[tree-select] Use svg (not unicode) for expander buttons

day8 · Jun 28, 2024 · b3417ad · b3417ad
1 parent 2c2036f
commit b3417ad
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/src/re_com/dropdown.cljs b/src/re_com/dropdown.cljs
@@ -262,16 +262,8 @@
               theme)]
            children)))})))
 
-(defn triangle [{:keys [width height fill direction]
-                 :or   {width "9px" height "9px" fill "#888"}}]
-  [:svg {:width width :height height :viewBox "0 0 9 9" :xmlns "http://www.w3.org/2000/svg"}
-   [:polygon {:points (case direction
-                        :up   "4,2 8,7 0,7"
-                        :down "4,7 8,2 0,2")
-              :fill   fill}]])
-
 (defn indicator [{:keys [state style]}]
-  [:span {:style style} [triangle {:direction (case (:openable state) :open :up :closed :down)}]])
+  [:span {:style style} [u/triangle {:direction (case (:openable state) :open :up :closed :down)}]])
 
 (defn dropdown
   "A clickable anchor above an openable, floating body.

diff --git a/src/re_com/tree_select.cljs b/src/re_com/tree_select.cljs
@@ -276,11 +276,14 @@
      [[offset :parts parts :level (dec level)]
       [box
        :src (at)
+       :align :center
+       :justify :center
        :attr (into {:on-click hide-show!} (get-in parts [:expander :attr]))
-       :style (into {:cursor "pointer"} (get-in parts [:expander :style]))
+       :style (into {:padding-top 4 :cursor "pointer" :height "100%"} (get-in parts [:expander :style]))
        :class (str "rc-tree-select-expander " (get-in parts [:expander :class]))
        :child
-       (if open? "⯆" "⯈")]
+       [u/triangle {:direction (if open? :down :right)
+                    :width 10 :height 10}]]
       " "
       [choice-checkbox (into props {:attr {:ref #(when %
                                                    (set! (.-indeterminate %)

diff --git a/src/re_com/util.cljs b/src/re_com/util.cljs
@@ -243,3 +243,12 @@
     :else       nil))
 
 (def reduce-> #(reduce %2 %1 %3))
+
+(defn triangle [{:keys [width height fill direction]
+                 :or   {width "9px" height "9px" fill "#888"}}]
+  [:svg {:width width :height height :viewBox "0 0 9 9" :xmlns "http://www.w3.org/2000/svg"}
+   [:polygon {:points (case direction
+                        :right "2,2 8,5 2,8"
+                        :up    "4,2 8,7 0,7"
+                        :down  "4,7 8,2 0,2")
+              :fill   fill}]])