Browse Source

enhance(shui): fix custom dropdown trigger content for the :as-child option

charlie 1 year ago
parent
commit
df046850cc

+ 13 - 0
deps/shui/src/logseq/shui/base/core.cljs

@@ -1,10 +1,12 @@
 (ns logseq.shui.base.core
   (:require [logseq.shui.util :as util]
+            [cljs-bean.core :as bean]
             [rum.core :as rum]))
 
 (def button-base (util/lsui-wrap "Button" {:static? false}))
 (def link (util/lsui-wrap "Link"))
 
+;; Note: used for the shui popup trigger
 (defn trigger-as
   ([as & props-or-children]
    (let [[props children] [(first props-or-children) (rest props-or-children)]
@@ -19,6 +21,17 @@
          children (if (map? props) children (cons props children))]
      [as props' children])))
 
+;; Note: fix the custom trigger content
+;; for the {:as-child true} menu trigger
+(defn trigger-child-wrap
+  [& props-and-children]
+  (let [props (first props-and-children)
+        children (rest props-and-children)
+        children (if (map? props) children (cons props children))
+        children (when (seq children) (daiquiri.interpreter/interpret children))
+        props (if (map? props) props {})]
+    (apply js/React.createElement "div" (bean/->js props) children)))
+
 ;; Note: don't define component with rum/defc
 ;; to be compatible for the radix as-child option
 (defn button

+ 26 - 1
deps/shui/src/logseq/shui/demo2.cljs

@@ -367,6 +367,31 @@
         :on-context-menu #(ui/popup-show! %
                             [:h1.text-3xl.font-bold "hi x popup for custom context menu!"])}]])])
 
+(rum/defc custom-trigger-content
+  []
+  [:p
+   [:code "more content"] [:br]
+   (ui/input {:auto-focus true}) [:br]
+   (ui/button "select sth")])
+
+(rum/defc sample-dropdown-trigger
+  []
+
+  [:div.py-4
+   [:h1.text-3xl.font-bold.border-b.pb-4 "Sample dropdown/menu trigger"]
+   [:div.py-4
+    (ui/dropdown-menu
+      (ui/dropdown-menu-trigger
+        {:as-child true}
+        (ui/trigger-child-wrap
+          {:class "border p-6 border"}
+          (custom-trigger-content)))
+      (ui/dropdown-menu-content
+        (ui/dropdown-menu-item "A item")
+        (ui/dropdown-menu-item "B item")
+        (ui/dropdown-menu-item "C item")))]
+   ])
+
 (rum/defc page
   []
-  (multi-select-demo))
+  (sample-dropdown-trigger))

+ 1 - 0
deps/shui/src/logseq/shui/ui.cljs

@@ -12,6 +12,7 @@
 (def button base-core/button)
 (def link base-core/link)
 (def trigger-as base-core/trigger-as)
+(def trigger-child-wrap base-core/trigger-child-wrap)
 (def ^:export tabler-icon icon-v2/root)
 
 (def alert (util/lsui-wrap "Alert"))