reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
samoleary 2021-06-17T00:27:59.115600Z

Hey all, does anyone have experience with https://tailwindui.com/components / https://headlessui.dev/react and reagent? I’m brushing up on my interop with react components via the https://cljdoc.org/d/reagent/reagent/1.1.0/doc/tutorials/interop-with-react and I’ve gotten as far as having the CSS applied and the javascript working for modals and popovers. The part I’m getting stuck on is the transitions. For example, modals will just appear and disappear instead of fading in and out. This is some example code for a modal I’ve taken from the Tailwind UI https://tailwindui.com/components/application-ui/overlays/modals:

(ns app.views
  (:require [reagent.core :as reagent]
            [re-frame.core :refer [dispatch]]
            ["react" :as r]
            [goog.string :as gstr]
            ["@headlessui/react" :as rui]))

(defn modal-login
  [open?]
  [:> rui/Transition.Root {:show open? :as r/Fragment}
   [:> rui/Dialog {:as "div"
                   :class "fixed z-10 inset-0 overflow-y-auto"
                   :on-close #(dispatch [:modal :login false])}
    [:div {:class "min-h-screen px-4 text-center"}
     [:> rui/Transition.Child {:as r/Fragment
                               :enter "ease-out duration-300"
                               :enter-from "opacity-0"
                               :enter-to "opacity-100"
                               :leave "ease-in duration-200"
                               :leave-from "opacity-100"
                               :leave-to "opacity-0"}
      [:> rui/Dialog.Overlay {:class "fixed inset-0"}]]
     [:span {:class "inline-block h-screen align-middle" :aria-hidden "true"}
      (gstr/unescapeEntities "​")]
     [:> rui/Transition.Child {:as r/Fragment
                               :enter "ease-out duration-300"
                               :enter-from "opacity-0 scale-95"
                               :enter-to "opacity-100 scale-100"
                               :leave "ease-in duration-200"
                               :leave-from "opacity-100 scale-100"
                               :leave-to "opacity-0 scale-95"}
      [:div {:class "inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl"}
       [:> rui/Dialog.Title {:as "h3" :class "text-lg font-medium leading-6 text-gray-900"}
        "Log in to your account"]
       [:div {:class "mt-2"}
        [form-login]]]]]]])
I thought it might have been the case, enterFrom vs enter-from , but no joy. I’m guessing it might involve some combination of reagent/reactify-component, reagent/as-element , reagent/create-element? I’m not quite up to speed yet but everything other than the properties on the Transition components looks to be working. Thanks in advance!

max minoS 2021-06-17T15:08:55.117200Z

what exactly does the caret indicate for things such as ^:export and ^{:key i}?

p-himik 2021-06-17T15:13:02.117300Z

Assigning metatada to the next form. The former is sugar for ^{:export true}.

p-himik 2021-06-17T15:13:17.117500Z

Not Reagent specific at all - it's just how Clojure reader works.

1👍
max minoS 2021-06-17T15:15:39.117800Z

what does "assigning metadata to the next form" mean exactly? what would be the google-able term for this

p-himik 2021-06-17T15:16:34.118Z

https://clojure.org/reference/metadata

1🙏
emccue 2021-06-17T16:59:34.118400Z

I thought ^... was a shorthand for {:tag ...}

emccue 2021-06-17T17:00:07.118600Z

so thats new to me

p-himik 2021-06-17T17:02:54.118900Z

^str => ^{:tag str} ^"hello" => ^{:tag "hello"} ^:key => {:key true}

p-himik 2021-06-17T17:03:24.119100Z

if(meta instanceof Symbol || meta instanceof String)
   meta = RT.map(RT.TAG_KEY, meta);
else if (meta instanceof Keyword)
   meta = RT.map(meta, RT.T);
else if(!(meta instanceof IPersistentMap))
   throw new IllegalArgumentException("Metadata must be Symbol,Keyword,String or Map");

1💯