From 9a5ed62e1ffc931332a75e29c342e41b42d5b2b2 Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Fri, 3 Nov 2023 02:24:59 +0800 Subject: [PATCH] [Refactor] selectors component (#17763) This commit updates the following in the selectors component: - Introduces the "type" prop (Figma 1-1 property) to the selectors component for easy switching between the selector types while using it on lists. - Updates the component styles to use the "resolve-color" function as the "custom-color" function is deprecated - Updates the component usage across the codebase Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> --- src/quo/components/list_items/user_list.cljs | 5 ++- .../components/selectors/disclaimer/view.cljs | 5 ++- .../selectors/selectors/component_spec.cljs | 30 +++++++------- .../components/selectors/selectors/style.cljs | 14 +++---- .../components/selectors/selectors/view.cljs | 41 +++++++++++-------- .../settings/privacy_option/view.cljs | 5 ++- .../settings/settings_item/view.cljs | 4 +- src/quo/components/wallet/keypair/view.cljs | 5 ++- src/quo/core.cljs | 5 +-- .../common/confirmation_drawer/view.cljs | 4 +- .../contexts/quo_preview/preview.cljs | 5 ++- .../quo_preview/selectors/selectors.cljs | 15 +++---- 12 files changed, 75 insertions(+), 63 deletions(-) diff --git a/src/quo/components/list_items/user_list.cljs b/src/quo/components/list_items/user_list.cljs index 27351e08f7..694fff00f7 100644 --- a/src/quo/components/list_items/user_list.cljs +++ b/src/quo/components/list_items/user_list.cljs @@ -27,8 +27,9 @@ {:size 20 :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}] :checkbox - [selectors/checkbox - {:checked? checked? + [selectors/view + {:type :checkbox + :checked? checked? :accessibility-label :user-list-toggle-check :disabled? disabled? :on-change (when on-check on-check)}] diff --git a/src/quo/components/selectors/disclaimer/view.cljs b/src/quo/components/selectors/disclaimer/view.cljs index b2f03c3153..5935eb40a4 100644 --- a/src/quo/components/selectors/disclaimer/view.cljs +++ b/src/quo/components/selectors/disclaimer/view.cljs @@ -11,8 +11,9 @@ {:on-press on-change :accessibility-label :disclaimer-touchable-opacity} [rn/view {:style (merge container-style (style/container blur?))} - [selectors/checkbox - {:accessibility-label accessibility-label + [selectors/view + {:type :checkbox + :accessibility-label accessibility-label :blur? blur? :checked? checked? :on-change on-change}] diff --git a/src/quo/components/selectors/selectors/component_spec.cljs b/src/quo/components/selectors/selectors/component_spec.cljs index 241a9ddbdb..5685e4bd04 100644 --- a/src/quo/components/selectors/selectors/component_spec.cljs +++ b/src/quo/components/selectors/selectors/component_spec.cljs @@ -6,27 +6,27 @@ (defn render-toggle ([] - (render-toggle {})) + (render-toggle {:type :toggle})) ([opts] - (h/render (reagent/as-element [selectors/toggle opts])))) + (h/render (reagent/as-element [selectors/view (assoc opts :type :toggle)])))) (defn render-checkbox ([] - (render-checkbox {})) + (render-checkbox {:type :checkbox})) ([opts] - (h/render (reagent/as-element [selectors/checkbox opts])))) + (h/render (reagent/as-element [selectors/view (assoc opts :type :checkbox)])))) -(defn render-checkbox-prefill +(defn render-filled-checkbox ([] - (render-checkbox-prefill {})) + (render-filled-checkbox {:type :filled-checkbox})) ([opts] - (h/render (reagent/as-element [selectors/checkbox-prefill opts])))) + (h/render (reagent/as-element [selectors/view (assoc opts :type :filled-checkbox)])))) (defn render-radio ([] - (render-radio {})) + (render-radio {:type :radio})) ([opts] - (h/render (reagent/as-element [selectors/radio opts])))) + (h/render (reagent/as-element [selectors/view (assoc opts :type :radio)])))) (h/test "default render of toggle component" (render-toggle) @@ -58,12 +58,12 @@ (h/fire-event :press (h/get-by-test-id "checkbox-component")) (h/was-called mock-fn))) -(h/test "default render of checkbox-prefill component" - (render-checkbox-prefill) - (h/is-truthy (h/get-by-test-id "checkbox-prefill-component"))) +(h/test "default render of filled-checkbox component" + (render-filled-checkbox) + (h/is-truthy (h/get-by-test-id "filled-checkbox-component"))) -(h/test "checkbox-prefill component on change is working" +(h/test "filled-checkbox component on change is working" (let [mock-fn (h/mock-fn)] - (render-checkbox-prefill {:on-change mock-fn}) - (h/fire-event :press (h/get-by-test-id "checkbox-prefill-component")) + (render-filled-checkbox {:on-change mock-fn}) + (h/fire-event :press (h/get-by-test-id "filled-checkbox-component")) (h/was-called mock-fn))) diff --git a/src/quo/components/selectors/selectors/style.cljs b/src/quo/components/selectors/selectors/style.cljs index a5efec4e6b..144082f8d9 100644 --- a/src/quo/components/selectors/selectors/style.cljs +++ b/src/quo/components/selectors/selectors/style.cljs @@ -6,7 +6,7 @@ [customization-color theme] {:normal {:checked (colors/resolve-color customization-color theme) :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)} - :blur {:checked (colors/theme-colors (colors/custom-color customization-color 50) + :blur {:checked (colors/theme-colors (colors/resolve-color customization-color theme) colors/white-opa-70 theme) :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10 theme)}}) @@ -15,7 +15,7 @@ [customization-color theme] {:normal {:checked (colors/resolve-color customization-color theme) :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)} - :blur {:checked (colors/theme-colors (colors/custom-color customization-color 50) + :blur {:checked (colors/theme-colors (colors/resolve-color customization-color theme) colors/white theme) :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)}}) @@ -29,7 +29,7 @@ [customization-color theme] {:normal {:checked (colors/resolve-color customization-color theme) :unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)} - :blur {:checked (colors/theme-colors (colors/custom-color customization-color 50) + :blur {:checked (colors/theme-colors (colors/resolve-color customization-color theme) colors/white) :unchecked colors/white-opa-5}}) @@ -38,7 +38,7 @@ {:normal (colors/theme-colors colors/neutral-30 colors/neutral-70 theme) :blur (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)}) -(defn- checkbox-prefill-background-color +(defn- filled-checkbox-background-color [theme] {:normal (colors/theme-colors colors/neutral-30 colors/neutral-80 theme) :blur (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)}) @@ -119,16 +119,16 @@ (colors/theme-colors colors/white colors/neutral-100 theme) colors/white)}) -(defn checkbox-prefill +(defn filled-checkbox [{:keys [disabled? blur? container-style theme]}] (assoc container-style :height 21 :width 21 :border-radius 6 :opacity (if disabled? 0.3 1) - :background-color (get-color (checkbox-prefill-background-color theme) blur?))) + :background-color (get-color (filled-checkbox-background-color theme) blur?))) -(defn checkbox-prefill-check +(defn filled-checkbox-check [checked? _blur? theme] {:size 20 :color (when checked? (colors/theme-colors colors/neutral-100 colors/white theme))}) diff --git a/src/quo/components/selectors/selectors/view.cljs b/src/quo/components/selectors/selectors/view.cljs index b9d09c7281..3577d19d44 100644 --- a/src/quo/components/selectors/selectors/view.cljs +++ b/src/quo/components/selectors/selectors/view.cljs @@ -11,7 +11,7 @@ (when checked-atom (swap! checked-atom not)) (when on-change (on-change (not checked?)))) -(defn- selector-internal +(defn- base-selector [{:keys [default-checked? checked?]}] (let [controlled-component? (some? checked?) internal-checked? (when-not controlled-component? @@ -28,14 +28,13 @@ :container-style container-style :customization-color customization-color :theme theme})] - [rn/touchable-without-feedback + [rn/pressable (when-not disabled? {:on-press #(handle-press on-change internal-checked? actual-checked?)}) [rn/view {:style outer-styles :needs-offscreen-alpha-compositing true :accessibility-label accessibility-label - :accessibility-role :checkbox :testID test-id} [rn/view {:style (inner-style-fn {:theme theme @@ -45,39 +44,49 @@ (when (and icon-style-fn actual-checked?) [icons/icon :i/check-small (icon-style-fn actual-checked? blur? theme)])]]])))) -(def ^:private selector (quo.theme/with-theme selector-internal)) - -(defn toggle +(defn- toggle [props] - [selector + [base-selector (assoc props :label-prefix "toggle" :outer-style-fn style/toggle :inner-style-fn style/toggle-inner)]) -(defn radio +(defn- radio [props] - [selector + [base-selector (assoc props :label-prefix "radio" :outer-style-fn style/radio :inner-style-fn style/radio-inner)]) -(defn checkbox +(defn- checkbox [props] - [selector + [base-selector (assoc props :label-prefix "checkbox" :outer-style-fn style/checkbox :inner-style-fn style/common-checkbox-inner :icon-style-fn style/checkbox-check)]) -(defn checkbox-prefill +(defn- filled-checkbox [props] - [selector + [base-selector (assoc props - :label-prefix "checkbox-prefill" - :outer-style-fn style/checkbox-prefill + :label-prefix "filled-checkbox" + :outer-style-fn style/filled-checkbox :inner-style-fn style/common-checkbox-inner - :icon-style-fn style/checkbox-prefill-check)]) + :icon-style-fn style/filled-checkbox-check)]) +(defn view-internal + [{:keys [type] + :or {type :toggle} + :as props}] + (case type + :toggle [toggle props] + :radio [radio props] + :checkbox [checkbox props] + :filled-checkbox [filled-checkbox props] + nil)) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/settings/privacy_option/view.cljs b/src/quo/components/settings/privacy_option/view.cljs index f09d90e9e3..5032f64917 100644 --- a/src/quo/components/settings/privacy_option/view.cljs +++ b/src/quo/components/settings/privacy_option/view.cljs @@ -29,8 +29,9 @@ [rn/view {:style style/card-footer-label-container} [text/text {:size :paragraph-2} label]] [rn/view {:style style/card-footer-toggle-container} - [selectors/toggle - {:disabled? (not active?) + [selectors/view + {:type :toggle + :disabled? (not active?) :on-change on-toggle}]]]]) (defn- selection-indicator diff --git a/src/quo/components/settings/settings_item/view.cljs b/src/quo/components/settings/settings_item/view.cljs index 0bfd20f3c7..1b4748db95 100644 --- a/src/quo/components/settings/settings_item/view.cljs +++ b/src/quo/components/settings/settings_item/view.cljs @@ -97,9 +97,7 @@ {:type :outline :size 24}) (:button-text action-props)] - :selector (if (= (:type action-props) :checkbox) - [selectors/checkbox action-props] - [selectors/toggle action-props]) + :selector [selectors/view action-props] nil)]) (defn- internal-view diff --git a/src/quo/components/wallet/keypair/view.cljs b/src/quo/components/wallet/keypair/view.cljs index b4f2a325d4..644a253675 100644 --- a/src/quo/components/wallet/keypair/view.cljs +++ b/src/quo/components/wallet/keypair/view.cljs @@ -48,8 +48,9 @@ [text/text {:weight :semi-bold} (if (= type :default-keypair) (keypair-string full-name) full-name)] (if (= action :selector) - [selectors/radio - {:checked? selected? + [selectors/view + {:type :radio + :checked? selected? :blur? blur? :customization-color customization-color}] [rn/pressable {:on-press on-options-press} diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 7e5dea57ed..349c6c5389 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -328,10 +328,7 @@ (def reactions-selector quo.components.selectors.reactions-selector.view/view) (def react quo.components.selectors.react.view/view) (def react-selector quo.components.selectors.react-selector.view/view) -(def checkbox quo.components.selectors.selectors.view/checkbox) -(def toggle quo.components.selectors.selectors.view/toggle) -(def radio quo.components.selectors.selectors.view/radio) -(def checkbox-prefill quo.components.selectors.selectors.view/checkbox-prefill) +(def selectors quo.components.selectors.selectors.view/view) ;;;; Settings (def account quo.components.settings.accounts.view/account) diff --git a/src/status_im2/common/confirmation_drawer/view.cljs b/src/status_im2/common/confirmation_drawer/view.cljs index f58826d79f..8eabcf69bf 100644 --- a/src/status_im2/common/confirmation_drawer/view.cljs +++ b/src/status_im2/common/confirmation_drawer/view.cljs @@ -24,7 +24,9 @@ [extra-action extra-text extra-action-selected?] (when extra-action [rn/view {:style {:margin-top 16 :flex-direction :row}} - [quo/checkbox {:on-change (fn [selected?] (reset! extra-action-selected? selected?))}] + [quo/selectors + {:type :checkbox + :on-change #(reset! extra-action-selected? %)}] [quo/text {:style {:margin-left 10}} extra-text]])) (defn confirmation-drawer diff --git a/src/status_im2/contexts/quo_preview/preview.cljs b/src/status_im2/contexts/quo_preview/preview.cljs index 3d233075dc..21b10f36ae 100644 --- a/src/status_im2/contexts/quo_preview/preview.cljs +++ b/src/status_im2/contexts/quo_preview/preview.cljs @@ -197,8 +197,9 @@ {:style (style/multi-select-option) :on-press on-press} [rn/text {:style (style/field-text false)} v] - [quo/checkbox - {:checked? checked? + [quo/selectors + {:type :checkbox + :checked? checked? :on-change on-press}]])))] [rn/view {:style (style/footer)} [rn/pressable diff --git a/src/status_im2/contexts/quo_preview/selectors/selectors.cljs b/src/status_im2/contexts/quo_preview/selectors/selectors.cljs index 2cbbf11a43..dc1eae21a1 100644 --- a/src/status_im2/contexts/quo_preview/selectors/selectors.cljs +++ b/src/status_im2/contexts/quo_preview/selectors/selectors.cljs @@ -11,13 +11,14 @@ (preview/customization-color-option)]) (defn selector-preview - [text component {:keys [disabled? blur? customization-color]}] + [text type {:keys [disabled? blur? customization-color]}] [rn/view {:style {:margin 6 :align-items :center}} [quo/text {:size :paragraph-1} text] - [component - {:container-style {:margin 4} + [quo/selectors + {:type type + :container-style {:margin 4} :disabled? disabled? :blur? blur? :customization-color customization-color}]]) @@ -34,7 +35,7 @@ :blur? (:blur? @state) :show-blur-background? true :blur-height 300} - [selector-preview "Toggle" quo/toggle @state] - [selector-preview "Radio" quo/radio @state] - [selector-preview "Checkbox" quo/checkbox @state] - [selector-preview "Checkbox Prefill" quo/checkbox-prefill @state]]))) + [selector-preview "Toggle" :toggle @state] + [selector-preview "Radio" :radio @state] + [selector-preview "Checkbox" :checkbox @state] + [selector-preview "Filled Checkbox" :filled-checkbox @state]])))