♻️ Add minor refactor to radio buttons components

frontend/src/app/main/ui/components/radio_buttons.cljs

@@ -5,58 +5,73 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.components.radio-buttons
-  (:require-macros [app.main.style :refer [css]])
+  (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data :as d]
    [app.common.math :as math]
    [app.main.ui.formats :as fmt]
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
-(def ctx-radio-button (mf/create-context nil))
+(def context
+  (mf/create-context nil))
 
 (mf/defc radio-button
   {::mf/wrap-props false}
   [props]
-  (let [ctx (mf/use-ctx ctx-radio-button)
+  (let [context   (mf/use-ctx context)
-        icon  (unchecked-get props "icon")
+
-        id (unchecked-get props "id")
+        icon      (unchecked-get props "icon")
-        on-change (:on-change ctx)
+        id        (unchecked-get props "id")
-        selected (:selected ctx)
+        value     (unchecked-get props "value")
-        value (unchecked-get props "value")
+
-        checked? (= selected value)
+        on-change (unchecked-get context "on-change")
-        name (:name ctx)]
+        selected  (unchecked-get context "selected")
+        name      (unchecked-get context "name")
+
+        encode-fn (unchecked-get context "encode-fn")
+        checked?  (= selected value)]
+
     [:label {:for id
-             :class (dom/classnames (css :radio-icon) true
+             :class (stl/css-case
-                                    (css :checked) checked?)}
+                     :radio-icon true
-     icon
+                     :checked checked?)}
+
+     (when (some? icon) icon)
+
      [:input {:id id
               :on-change on-change
               :type "radio"
               :name name
-              :value value
+              :value (encode-fn value)
-              :checked  checked?}]]))
+              :checked checked?}]]))
 
 (mf/defc nilable-option
   {::mf/wrap-props false}
   [props]
-  (let [ctx (mf/use-ctx ctx-radio-button)
+  (let [context   (mf/use-ctx context)
-        icon  (unchecked-get props "icon")
+        icon      (unchecked-get props "icon")
-        id (unchecked-get props "id")
+        id        (unchecked-get props "id")
-        on-change (:on-change ctx)
+        value     (unchecked-get props "value")
-        selected (:selected ctx)
+
-        value (unchecked-get props "value")
+        on-change (unchecked-get context "on-change")
-        checked? (= selected value)
+        selected  (unchecked-get context "selected")
-        name (:name ctx)]
+        name      (unchecked-get context "name")
+
+        encode-fn (unchecked-get context "encode-fn")
+        checked?  (= selected value)]
+
     [:label {:for id
-             :class (dom/classnames (css :radio-icon) true
+             :class (stl/css-case
-                                    (css :checked) checked?)}
+                     :radio-icon true
+                     :checked checked?)}
      icon
      [:input {:id id
               :on-change on-change
               :type "checkbox"
               :name name
-              :value value
+              :value (encode-fn value)
-              :checked  checked?}]]))
+              :checked checked?}]]))
 
 (mf/defc radio-buttons
   {::mf/wrap-props false}
@@ -65,14 +80,36 @@
         on-change (unchecked-get props "on-change")
         selected  (unchecked-get props "selected")
         name      (unchecked-get props "name")
-        calculate-width (fmt/format-pixels (+ (math/pow 2 (count children)) (* 28 (count children))))
+
-        handle-change
+        encode-fn (d/nilv (unchecked-get props "encode-fn") identity)
+        decode-fn (d/nilv (unchecked-get props "encode-fn") identity)
+
+        nitems    (if (array? children)
+                    (alength children)
+                    1)
+
+        width     (mf/with-memo [nitems]
+                    (fmt/format-pixels
+                     (+ (math/pow 2 nitems)
+                        (* 28 nitems))))
+
+        on-change'
         (mf/use-fn
          (mf/deps on-change)
          (fn [event]
            (let [value (dom/get-target-val event)]
-             (on-change value event))))]
+             (when (fn? on-change)
-    [:& (mf/provider ctx-radio-button) {:value {:selected selected :on-change handle-change :name name}}
+               (on-change (decode-fn value) event)))))
-     [:div {:class (css :radio-btn-wrapper)
+
-                          :style {:width calculate-width}}
+        context-value
+        (mf/with-memo [selected on-change' name encode-fn decode-fn]
+          #js {:selected selected
+               :on-change on-change'
+               :name name
+               :encode-fn encode-fn
+               :decode-fn decode-fn})]
+
+    [:& (mf/provider context) {:value context-value}
+     [:div {:class (stl/css :radio-btn-wrapper)
+            :style {:width width}}
       children]]))

frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs

@@ -5,7 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.sidebar.assets.components
-  (:require-macros [app.main.style :refer [css]])
+  (:require-macros [app.main.style :as stl :refer [css]])
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
@@ -569,29 +569,27 @@
                            :open? open?}
      (if ^boolean new-css-system
        [:& cmm/asset-section-block {:role :title-button}
+        [:*
+         (when open?
+           [:div {:class (stl/css :listing-options)}
+            [:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
+                               :on-change toggle-list-style
+                               :name "listing-style"}
+             [:& radio-button {:icon i/view-as-list-refactor
+                               :value "list"
+                               :id :list}]
+             [:& radio-button {:icon i/flex-grid-refactor
+                               :value "grid"
+                               :id :grid}]]])
 
-        (when open?
+         (when (and components-v2 (not read-only?) local?)
-          [:div {:class (dom/classnames (css :listing-options) true)}
+           [:div {:on-click add-component
-           (let [option-selected (if listing-thumbs?
+                  :class (dom/classnames (css :add-component) true)}
-                                   "grid"
+            i/add-refactor
-                                   "list")]
+            [:& file-uploader {:accept cm/str-image-types
-             [:& radio-buttons {:selected option-selected
+                               :multi true
-                                :on-change toggle-list-style
+                               :ref input-ref
-                                :name "listing-style"}
+                               :on-selected on-file-selected}]])]]
-              [:& radio-button {:icon (mf/html i/view-as-list-refactor)
-                                :value "list"
-                                :id :list}]
-              [:& radio-button {:icon (mf/html i/flex-grid-refactor)
-                                :value "grid"
-                                :id :grid}]])])
-        (when (and components-v2 (not read-only?) local?)
-          [:div {:on-click add-component
-                 :class (dom/classnames (css :add-component) true)}
-           i/add-refactor
-           [:& file-uploader {:accept cm/str-image-types
-                              :multi true
-                              :ref input-ref
-                              :on-selected on-file-selected}]])]
        (when local?
          [:& cmm/asset-section-block {:role :title-button}
           (when (and components-v2 (not read-only?))