enhance(ui): WIP enhance the multi select component for shui

deps/shui/src/logseq/shui/demo2.cljs

@@ -16,7 +16,7 @@
    (let [items [{:key 1 :value "Apple" :class "bg-gray-800 text-gray-50"}
                 {:key 2 :value "Orange" :class "bg-orange-700 text-gray-50"}
                 nil
-                {:key 3 :value "Pear"}]
+                {:key 3 :value  "Pear"}]
 
          [selected-items set-selected-items!]
          (rum/use-state [(last items)])
@@ -45,16 +45,23 @@
            ;; content
            (x-select items selected-items
              {:on-chosen on-chosen
-              :item-render (fn [item {:keys [selected]}]
-                             (if item
-                               (ui/dropdown-menu-checkbox-item
-                                 {:checked selected
-                                  :on-click (fn []
-                                              (if selected
-                                                (rm-item! item)
-                                                (add-item! item)))}
-                                 (:value item))
-                               (ui/dropdown-menu-separator)))
+              :value-render (fn [v {:keys [selected]}]
+                              (if selected
+                                [:b.text-red-800 v]
+                                [:b.text-green-800 v]))
+
+              ;; test item render
+              ;:item-render (fn [item {:keys [selected]}]
+              ;                (if item
+              ;                  (ui/dropdown-menu-checkbox-item
+              ;                    {:checked selected
+              ;                     :on-click (fn []
+              ;                                 (if selected
+              ;                                   (rm-item! item)
+              ;                                   (add-item! item)))}
+              ;                    (:value item))
+              ;                  (ui/dropdown-menu-separator)))
+
               :content-props {:onInteractOutside #(set-open! false)}})
            ))))])
 

deps/shui/src/logseq/shui/select/multi.cljs

@@ -10,8 +10,8 @@
       (first))))
 
 (rum/defc x-select
-  [items selected-items & {:keys [on-chosen item-render item-props
-                                  content-props]}]
+  [items selected-items & {:keys [on-chosen item-render value-render
+                                  item-props content-props]}]
   (let [x-content popup/dropdown-menu-content
         x-item popup/dropdown-menu-item]
     (x-content
@@ -30,12 +30,16 @@
                 k (get-k item)
                 v (or title value)]
             (when k
-              (let [on-click' (:on-click item-props)
+              (let [opts {:selected selected?}
+                    on-click' (:on-click item-props)
                     on-click (fn [e]
                                ;; TODO: return value
                                (when (fn? on-click') (on-click' e))
                                (when (fn? on-chosen)
-                                 (on-chosen item {:selected selected?})))]
+                                 (on-chosen item opts)))]
                 (x-item (merge {:data-k k :on-click on-click} item-props)
-                  [:a.flex.items-center.gap-2.w-full
-                   (form/checkbox {:checked selected?}) v])))))))))
+                  [:span.flex.items-center.gap-2.w-full
+                   (form/checkbox {:checked selected?})
+                   (let [v' (if (fn? v) (v item opts) v)]
+                     (if (fn? value-render)
+                       (value-render v' (assoc opts :item item)) v'))])))))))))