reagent 2021-06-17 | Slack Archive

samoleary00:06:59

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 "&#8203;")]
     [:> 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 minoS15:06:55

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

p-himik15:06:02

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

p-himik15:06:17

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

👍 2

max minoS15:06:39

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

p-himik15:06:34

https://clojure.org/reference/metadata

🙏 2

emccue16:06:34

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

emccue17:06:07

so thats new to me

p-himik17:06:54

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

p-himik17:06:24

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");

💯 3

2021-06-17

Channels