From a44f2c57881a76db574ae0b7bd927072309c7450 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 20 Jul 2023 11:56:20 +0200 Subject: [PATCH] :recycle: Add minor refactor to radio buttons components --- .../app/main/ui/components/radio_buttons.cljs | 103 ++++++++++++------ .../workspace/sidebar/assets/components.cljs | 44 ++++---- 2 files changed, 91 insertions(+), 56 deletions(-) diff --git a/frontend/src/app/main/ui/components/radio_buttons.cljs b/frontend/src/app/main/ui/components/radio_buttons.cljs index 40784e6232..1f31379e9b 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.cljs +++ b/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) - icon (unchecked-get props "icon") - id (unchecked-get props "id") - on-change (:on-change ctx) - selected (:selected ctx) - value (unchecked-get props "value") - checked? (= selected value) - name (:name ctx)] + (let [context (mf/use-ctx context) + + icon (unchecked-get props "icon") + id (unchecked-get props "id") + value (unchecked-get props "value") + + on-change (unchecked-get context "on-change") + 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 - (css :checked) checked?)} - icon + :class (stl/css-case + :radio-icon true + :checked checked?)} + + (when (some? icon) icon) + [:input {:id id :on-change on-change :type "radio" :name name - :value value - :checked checked?}]])) + :value (encode-fn value) + :checked checked?}]])) (mf/defc nilable-option {::mf/wrap-props false} [props] - (let [ctx (mf/use-ctx ctx-radio-button) - icon (unchecked-get props "icon") - id (unchecked-get props "id") - on-change (:on-change ctx) - selected (:selected ctx) - value (unchecked-get props "value") - checked? (= selected value) - name (:name ctx)] + (let [context (mf/use-ctx context) + icon (unchecked-get props "icon") + id (unchecked-get props "id") + value (unchecked-get props "value") + + on-change (unchecked-get context "on-change") + 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 - (css :checked) checked?)} + :class (stl/css-case + :radio-icon true + :checked checked?)} icon [:input {:id id :on-change on-change :type "checkbox" :name name - :value value - :checked checked?}]])) + :value (encode-fn value) + :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))))] - [:& (mf/provider ctx-radio-button) {:value {:selected selected :on-change handle-change :name name}} - [:div {:class (css :radio-btn-wrapper) - :style {:width calculate-width}} + (when (fn? on-change) + (on-change (decode-fn value) event))))) + + 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]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index fcfbf06db1..295e2ac6f1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/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? - [:div {:class (dom/classnames (css :listing-options) true)} - (let [option-selected (if listing-thumbs? - "grid" - "list")] - [:& radio-buttons {:selected option-selected - :on-change toggle-list-style - :name "listing-style"} - [:& 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 (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?))