status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[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>
This commit is contained in:
Mohamed Javid 2023-11-03 02:24:59 +08:00 committed by GitHub
parent e6068fd4c1
commit 9a5ed62e1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 75 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/quo/components/list_items/user_list.cljs
View File

@ -27,8 +27,9 @@
{:size 20 {:size 20
:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}] :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
:checkbox :checkbox
[selectors/checkbox [selectors/view
{:checked? checked? {:type :checkbox
:checked? checked?
:accessibility-label :user-list-toggle-check :accessibility-label :user-list-toggle-check
:disabled? disabled? :disabled? disabled?
:on-change (when on-check on-check)}] :on-change (when on-check on-check)}]

5
src/quo/components/selectors/disclaimer/view.cljs
View File

@ -11,8 +11,9 @@
{:on-press on-change {:on-press on-change
:accessibility-label :disclaimer-touchable-opacity} :accessibility-label :disclaimer-touchable-opacity}
[rn/view {:style (merge container-style (style/container blur?))} [rn/view {:style (merge container-style (style/container blur?))}
[selectors/checkbox [selectors/view
{:accessibility-label accessibility-label {:type :checkbox
:accessibility-label accessibility-label
:blur? blur? :blur? blur?
:checked? checked? :checked? checked?
:on-change on-change}] :on-change on-change}]

30
src/quo/components/selectors/selectors/component_spec.cljs
View File

@ -6,27 +6,27 @@
(defn render-toggle (defn render-toggle
([] ([]
(render-toggle {})) (render-toggle {:type :toggle}))
([opts] ([opts]
(h/render (reagent/as-element [selectors/toggle opts])))) (h/render (reagent/as-element [selectors/view (assoc opts :type :toggle)]))))
(defn render-checkbox (defn render-checkbox
([] ([]
(render-checkbox {})) (render-checkbox {:type :checkbox}))
([opts] ([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] ([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 (defn render-radio
([] ([]
(render-radio {})) (render-radio {:type :radio}))
([opts] ([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" (h/test "default render of toggle component"
(render-toggle) (render-toggle)
@ -58,12 +58,12 @@
(h/fire-event :press (h/get-by-test-id "checkbox-component")) (h/fire-event :press (h/get-by-test-id "checkbox-component"))
(h/was-called mock-fn))) (h/was-called mock-fn)))
(h/test "default render of checkbox-prefill component" (h/test "default render of filled-checkbox component"
(render-checkbox-prefill) (render-filled-checkbox)
(h/is-truthy (h/get-by-test-id "checkbox-prefill-component"))) (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)] (let [mock-fn (h/mock-fn)]
(render-checkbox-prefill {:on-change mock-fn}) (render-filled-checkbox {:on-change mock-fn})
(h/fire-event :press (h/get-by-test-id "checkbox-prefill-component")) (h/fire-event :press (h/get-by-test-id "filled-checkbox-component"))
(h/was-called mock-fn))) (h/was-called mock-fn)))

14
src/quo/components/selectors/selectors/style.cljs
View File

@ -6,7 +6,7 @@
[customization-color theme] [customization-color theme]
{:normal {:checked (colors/resolve-color customization-color theme) {:normal {:checked (colors/resolve-color customization-color theme)
:unchecked (colors/theme-colors colors/neutral-30 colors/neutral-80 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 colors/white-opa-70
theme) theme)
:unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10 theme)}}) :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10 theme)}})
@ -15,7 +15,7 @@
[customization-color theme] [customization-color theme]
{:normal {:checked (colors/resolve-color customization-color theme) {:normal {:checked (colors/resolve-color customization-color theme)
:unchecked (colors/theme-colors colors/neutral-30 colors/neutral-70 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 colors/white
theme) theme)
:unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)}}) :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)}})
@ -29,7 +29,7 @@
[customization-color theme] [customization-color theme]
{:normal {:checked (colors/resolve-color 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)} :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) colors/white)
:unchecked colors/white-opa-5}}) :unchecked colors/white-opa-5}})
@ -38,7 +38,7 @@
{:normal (colors/theme-colors colors/neutral-30 colors/neutral-70 theme) {: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)}) :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] [theme]
{:normal (colors/theme-colors colors/neutral-30 colors/neutral-80 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)}) :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/theme-colors colors/white colors/neutral-100 theme)
colors/white)}) colors/white)})
(defn checkbox-prefill (defn filled-checkbox
[{:keys [disabled? blur? container-style theme]}] [{:keys [disabled? blur? container-style theme]}]
(assoc container-style (assoc container-style
:height 21 :height 21
:width 21 :width 21
:border-radius 6 :border-radius 6
:opacity (if disabled? 0.3 1) :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] [checked? _blur? theme]
{:size 20 {:size 20
:color (when checked? (colors/theme-colors colors/neutral-100 colors/white theme))}) :color (when checked? (colors/theme-colors colors/neutral-100 colors/white theme))})

41
src/quo/components/selectors/selectors/view.cljs
View File

@ -11,7 +11,7 @@
(when checked-atom (swap! checked-atom not)) (when checked-atom (swap! checked-atom not))
(when on-change (on-change (not checked?)))) (when on-change (on-change (not checked?))))
(defn- selector-internal (defn- base-selector
[{:keys [default-checked? checked?]}] [{:keys [default-checked? checked?]}]
(let [controlled-component? (some? checked?) (let [controlled-component? (some? checked?)
internal-checked? (when-not controlled-component? internal-checked? (when-not controlled-component?
@ -28,14 +28,13 @@
:container-style container-style :container-style container-style
:customization-color customization-color :customization-color customization-color
:theme theme})] :theme theme})]
[rn/touchable-without-feedback [rn/pressable
(when-not disabled? (when-not disabled?
{:on-press #(handle-press on-change internal-checked? actual-checked?)}) {:on-press #(handle-press on-change internal-checked? actual-checked?)})
[rn/view [rn/view
{:style outer-styles {:style outer-styles
:needs-offscreen-alpha-compositing true :needs-offscreen-alpha-compositing true
:accessibility-label accessibility-label :accessibility-label accessibility-label
:accessibility-role :checkbox
:testID test-id} :testID test-id}
[rn/view [rn/view
{:style (inner-style-fn {:theme theme {:style (inner-style-fn {:theme theme
@ -45,39 +44,49 @@
(when (and icon-style-fn actual-checked?) (when (and icon-style-fn actual-checked?)
[icons/icon :i/check-small (icon-style-fn actual-checked? blur? theme)])]]])))) [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] [props]
[selector [base-selector
(assoc props (assoc props
:label-prefix "toggle" :label-prefix "toggle"
:outer-style-fn style/toggle :outer-style-fn style/toggle
:inner-style-fn style/toggle-inner)]) :inner-style-fn style/toggle-inner)])
(defn radio (defn- radio
[props] [props]
[selector [base-selector
(assoc props (assoc props
:label-prefix "radio" :label-prefix "radio"
:outer-style-fn style/radio :outer-style-fn style/radio
:inner-style-fn style/radio-inner)]) :inner-style-fn style/radio-inner)])
(defn checkbox (defn- checkbox
[props] [props]
[selector [base-selector
(assoc props (assoc props
:label-prefix "checkbox" :label-prefix "checkbox"
:outer-style-fn style/checkbox :outer-style-fn style/checkbox
:inner-style-fn style/common-checkbox-inner :inner-style-fn style/common-checkbox-inner
:icon-style-fn style/checkbox-check)]) :icon-style-fn style/checkbox-check)])
(defn checkbox-prefill (defn- filled-checkbox
[props] [props]
[selector [base-selector
(assoc props (assoc props
:label-prefix "checkbox-prefill" :label-prefix "filled-checkbox"
:outer-style-fn style/checkbox-prefill :outer-style-fn style/filled-checkbox
:inner-style-fn style/common-checkbox-inner :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))

5
src/quo/components/settings/privacy_option/view.cljs
View File

@ -29,8 +29,9 @@
[rn/view {:style style/card-footer-label-container} [rn/view {:style style/card-footer-label-container}
[text/text {:size :paragraph-2} label]] [text/text {:size :paragraph-2} label]]
[rn/view {:style style/card-footer-toggle-container} [rn/view {:style style/card-footer-toggle-container}
[selectors/toggle [selectors/view
{:disabled? (not active?) {:type :toggle
:disabled? (not active?)
:on-change on-toggle}]]]]) :on-change on-toggle}]]]])
(defn- selection-indicator (defn- selection-indicator

4
src/quo/components/settings/settings_item/view.cljs
View File

@ -97,9 +97,7 @@
{:type :outline {:type :outline
:size 24}) :size 24})
(:button-text action-props)] (:button-text action-props)]
:selector (if (= (:type action-props) :checkbox) :selector [selectors/view action-props]
[selectors/checkbox action-props]
[selectors/toggle action-props])
nil)]) nil)])
(defn- internal-view (defn- internal-view

5
src/quo/components/wallet/keypair/view.cljs
View File

@ -48,8 +48,9 @@
[text/text {:weight :semi-bold} [text/text {:weight :semi-bold}
(if (= type :default-keypair) (keypair-string full-name) full-name)] (if (= type :default-keypair) (keypair-string full-name) full-name)]
(if (= action :selector) (if (= action :selector)
[selectors/radio [selectors/view
{:checked? selected? {:type :radio
:checked? selected?
:blur? blur? :blur? blur?
:customization-color customization-color}] :customization-color customization-color}]
[rn/pressable {:on-press on-options-press} [rn/pressable {:on-press on-options-press}

5
src/quo/core.cljs
View File

@ -328,10 +328,7 @@
(def reactions-selector quo.components.selectors.reactions-selector.view/view) (def reactions-selector quo.components.selectors.reactions-selector.view/view)
(def react quo.components.selectors.react.view/view) (def react quo.components.selectors.react.view/view)
(def react-selector quo.components.selectors.react-selector.view/view) (def react-selector quo.components.selectors.react-selector.view/view)
(def checkbox quo.components.selectors.selectors.view/checkbox) (def selectors quo.components.selectors.selectors.view/view)
(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)
;;;; Settings ;;;; Settings
(def account quo.components.settings.accounts.view/account) (def account quo.components.settings.accounts.view/account)

4
src/status_im2/common/confirmation_drawer/view.cljs
View File

@ -24,7 +24,9 @@
[extra-action extra-text extra-action-selected?] [extra-action extra-text extra-action-selected?]
(when extra-action (when extra-action
[rn/view {:style {:margin-top 16 :flex-direction :row}} [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]])) [quo/text {:style {:margin-left 10}} extra-text]]))
(defn confirmation-drawer (defn confirmation-drawer

5
src/status_im2/contexts/quo_preview/preview.cljs
View File

@ -197,8 +197,9 @@
{:style (style/multi-select-option) {:style (style/multi-select-option)
:on-press on-press} :on-press on-press}
[rn/text {:style (style/field-text false)} v] [rn/text {:style (style/field-text false)} v]
[quo/checkbox [quo/selectors
{:checked? checked? {:type :checkbox
:checked? checked?
:on-change on-press}]])))] :on-change on-press}]])))]
[rn/view {:style (style/footer)} [rn/view {:style (style/footer)}
[rn/pressable [rn/pressable

15
src/status_im2/contexts/quo_preview/selectors/selectors.cljs
View File

@ -11,13 +11,14 @@
(preview/customization-color-option)]) (preview/customization-color-option)])
(defn selector-preview (defn selector-preview
[text component {:keys [disabled? blur? customization-color]}] [text type {:keys [disabled? blur? customization-color]}]
[rn/view [rn/view
{:style {:margin 6 {:style {:margin 6
:align-items :center}} :align-items :center}}
[quo/text {:size :paragraph-1} text] [quo/text {:size :paragraph-1} text]
[component [quo/selectors
{:container-style {:margin 4} {:type type
:container-style {:margin 4}
:disabled? disabled? :disabled? disabled?
:blur? blur? :blur? blur?
:customization-color customization-color}]]) :customization-color customization-color}]])
@ -34,7 +35,7 @@
:blur? (:blur? @state) :blur? (:blur? @state)
:show-blur-background? true :show-blur-background? true
:blur-height 300} :blur-height 300}
[selector-preview "Toggle" quo/toggle @state] [selector-preview "Toggle" :toggle @state]
[selector-preview "Radio" quo/radio @state] [selector-preview "Radio" :radio @state]
[selector-preview "Checkbox" quo/checkbox @state] [selector-preview "Checkbox" :checkbox @state]
[selector-preview "Checkbox Prefill" quo/checkbox-prefill @state]]))) [selector-preview "Filled Checkbox" :filled-checkbox @state]])))