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
: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)}]

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

@ -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}]

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

@ -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)))

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

@ -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))})

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

@ -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))

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

@ -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

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

@ -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

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

@ -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}

5
src/quo/core.cljs
View File

@ -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)

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

@ -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

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

@ -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

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

@ -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]])))