mainej / headlessui-reagent Goto Github PK

The required JS dependency "react" is not available, it was required by "node_modules/@heroicons/react/solid/AcademicCapIcon.js".

     [ui/transition-child
      {:as Fragment
       :enter "transition-opacity ease-linear duration-300",
       :enter-from "opacity-0",
       :enter-to "opacity-100",
       :leave "transition-opacity ease-linear duration-300",
       :leave-from "opacity-100",
       :leave-to "opacity-0"}

Uncaught Error: Assert failed: Invalid Hiccup form: [nil {:leave "transition ease-in duration-100", :leave-from "opacity-100", :leave-to "opacity-0"} [G__33906 {:class "absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"} ([G__33906 {:value 1, :class #object[Function]} #object[Function]] [G__33906 {:value 2, :class #object[Function]} #object[Function]] [G__33906 {:value 3, :class #object[Function]} #object[Function]] [G__33906 {:value 4, :class #object[Function]} #object[Function]] [G__33906 {:value 5, :class #object[Function]} #object[Function]] [G__33906 {:value 6, :class #object[Function]} #object[Function]])]]
 (in G__33906)
(valid-tag? tag)
    reagent$impl$template$vec_to_elem                  template.cljs:277
    reagent$impl$template$as_element                   template.cljs:294
    reagent$impl$protocols$Compiler$as_element$arity$2 template.cljs:315
    reagent$impl$protocols$as_element                  protocols.cljs:6
    make_element                                       template.cljs:140
    3 core.cljs:5688
    2 cljs.core.js:20602

(defn panel-ul [props children]
  (into [:ul.bg-red-500 props] children))

`(defn multi-select []
  (r/with-let [!selected (r/atom (first people))
               !query (r/atom "")
               !filtered-people (r/reaction
                                 (let [query @!query]
                                   (if (str/blank? query)
                                     people
                                     (filter #(str/includes? (string->query (:name %)) query)
                                             people))))]
    (let [selected        @!selected
          filtered-people @!filtered-people]
      [:div.w-72.h-72
       [ui/combobox {:multiple true
                     :value     filtered-people
                     :on-change #(reset! !selected (get person-by-id %))}
        [:div.relative.mt-1
         [:div.relative.w-full.text-left.bg-white.rounded-lg.shadow-md.cursor-default.focus:outline-none.focus-visible:ring-2.focus-visible:ring-opacity-75.focus-visible:ring-white.focus-visible:ring-offset-teal-300.focus-visible:ring-offset-2.sm:text-sm.overflow-hidden
          [ui/combobox-input {:class         #{"w-full" "border-none" "focus:ring-0" "py-2" "pl-3" "pr-10" "text-sm" "leading-5" "text-gray-900"}
                              :display-value (fn [id] (:name (get person-by-id id)))
                              :on-change     #(reset! !query (string->query (.-value (.-target %))))}]
          [ui/combobox-button {:class #{"absolute" "inset-y-0" "right-0" "flex" "items-center" "pr-2"}}
           [icons/icon-semantic
            {:class #{"font-black"}}
            "magnifying-glass"]]
          [ui/transition
           {:leave      "transition ease-in duration-100"
            :leave-from "opacity-100"
            :leave-to   "opacity-0"}]]
         [ui/combobox-options {:as "div.absolute.w-full.py-1.mt-1.overflow-auto.text-base.bg-white.rounded-md.shadow-lg.max-h-60.ring-1.ring-black.ring-opacity-5.focus:outline-none.sm:text-sm" :static true}
          [:<>
           (for [person filtered-people]
             ^{:key (:id person)}
             [:div.options-wrapper
              [ui/combobox-option
               {:value (:id person)
                :as panel-ul}]])]]]]])))`