Selector component improvements (#15541)
* Add missing color variants for selectors * Rename test ns and replace rtl fns by helper ones * Add missing disclaimer blur style in onboarding - create password
This commit is contained in:
parent
d11ce135a6
commit
73df442f40
|
@ -5,7 +5,7 @@
|
|||
[quo2.components.icon :as icons]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.messages.author.view :as author]
|
||||
[quo2.components.selectors.selectors :as selectors]))
|
||||
[quo2.components.selectors.selectors.view :as selectors]))
|
||||
|
||||
(def container-style
|
||||
{:margin-horizontal 8
|
||||
|
|
|
@ -1,84 +0,0 @@
|
|||
(ns quo2.components.selectors.--tests--.selectors-component-spec
|
||||
(:require ["@testing-library/react-native" :as rtl]
|
||||
[quo2.components.selectors.selectors :as selectors]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn render-toggle
|
||||
([]
|
||||
(render-toggle {}))
|
||||
([opts]
|
||||
(rtl/render (reagent/as-element [selectors/toggle opts]))))
|
||||
|
||||
(defn render-checkbox
|
||||
([]
|
||||
(render-checkbox {}))
|
||||
([opts]
|
||||
(rtl/render (reagent/as-element [selectors/checkbox opts]))))
|
||||
|
||||
(defn render-checkbox-prefill
|
||||
([]
|
||||
(render-checkbox-prefill {}))
|
||||
([opts]
|
||||
(rtl/render (reagent/as-element [selectors/checkbox-prefill opts]))))
|
||||
|
||||
(defn render-radio
|
||||
([]
|
||||
(render-radio {}))
|
||||
([opts]
|
||||
(rtl/render (reagent/as-element [selectors/radio opts]))))
|
||||
|
||||
(js/global.test "default render of toggle component"
|
||||
(fn []
|
||||
(render-toggle)
|
||||
(-> (js/expect (rtl/screen.getByTestId "toggle-component"))
|
||||
(.toBeTruthy))))
|
||||
|
||||
(js/global.test "toggle component on change is working"
|
||||
(let [mock-fn (js/jest.fn)]
|
||||
(fn []
|
||||
(render-toggle {:on-change mock-fn})
|
||||
(rtl/fireEvent.press (rtl/screen.getByTestId "toggle-component"))
|
||||
(-> (js/expect mock-fn)
|
||||
(.toHaveBeenCalledTimes 1)))))
|
||||
|
||||
(js/global.test "default render of radio component"
|
||||
(fn []
|
||||
(render-radio)
|
||||
(-> (js/expect (rtl/screen.getByTestId "radio-component"))
|
||||
(.toBeTruthy))))
|
||||
|
||||
(js/global.test "radio component on change is working"
|
||||
(let [mock-fn (js/jest.fn)]
|
||||
(fn []
|
||||
(render-radio {:on-change mock-fn})
|
||||
(rtl/fireEvent.press (rtl/screen.getByTestId "radio-component"))
|
||||
(-> (js/expect mock-fn)
|
||||
(.toHaveBeenCalledTimes 1)))))
|
||||
|
||||
(js/global.test "default render of checkbox component"
|
||||
(fn []
|
||||
(render-checkbox)
|
||||
(-> (js/expect (rtl/screen.getByTestId "checkbox-component"))
|
||||
(.toBeTruthy))))
|
||||
|
||||
(js/global.test "checkbox component on change is working"
|
||||
(let [mock-fn (js/jest.fn)]
|
||||
(fn []
|
||||
(render-checkbox {:on-change mock-fn})
|
||||
(rtl/fireEvent.press (rtl/screen.getByTestId "checkbox-component"))
|
||||
(-> (js/expect mock-fn)
|
||||
(.toHaveBeenCalledTimes 1)))))
|
||||
|
||||
(js/global.test "default render of checkbox-prefill component"
|
||||
(fn []
|
||||
(render-checkbox-prefill)
|
||||
(-> (js/expect (rtl/screen.getByTestId "checkbox-prefill-component"))
|
||||
(.toBeTruthy))))
|
||||
|
||||
(js/global.test "checkbox-prefill component on change is working"
|
||||
(let [mock-fn (js/jest.fn)]
|
||||
(fn []
|
||||
(render-checkbox-prefill {:on-change mock-fn})
|
||||
(rtl/fireEvent.press (rtl/screen.getByTestId "checkbox-prefill-component"))
|
||||
(-> (js/expect mock-fn)
|
||||
(.toHaveBeenCalledTimes 1)))))
|
|
@ -1,7 +1,7 @@
|
|||
(ns quo2.components.selectors.disclaimer.view
|
||||
(:require [quo2.components.markdown.text :as text]
|
||||
[quo2.components.selectors.disclaimer.style :as style]
|
||||
[quo2.components.selectors.selectors :as selectors]
|
||||
[quo2.components.selectors.selectors.view :as selectors]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn view
|
||||
|
@ -10,8 +10,9 @@
|
|||
{:style (merge container-style (style/container blur?))}
|
||||
[selectors/checkbox
|
||||
{:accessibility-label accessibility-label
|
||||
:on-change on-change
|
||||
:checked? checked?}]
|
||||
:blur? blur?
|
||||
:checked? checked?
|
||||
:on-change on-change}]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:style style/text}
|
||||
|
|
|
@ -1,109 +0,0 @@
|
|||
(ns quo2.components.selectors.selectors
|
||||
(:require [quo2.components.icon :as icons]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.selectors.styles :as style]))
|
||||
|
||||
(defn- handle-press
|
||||
[disabled? on-change checked?]
|
||||
(when (not disabled?)
|
||||
(fn []
|
||||
(swap! checked? not)
|
||||
(when on-change (on-change @checked?)))))
|
||||
|
||||
(defn checkbox-prefill
|
||||
[{:keys [default-checked?]}]
|
||||
(let [internal-checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
|
||||
(when (and (not (nil? checked?)) (not= @internal-checked? checked?))
|
||||
(reset! internal-checked? checked?))
|
||||
(let [checked? (or checked? @internal-checked?)]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change internal-checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
(style/checkbox-prefill blurred-background? disabled?))
|
||||
:accessibility-label (str "checkbox-" (if checked? "on" "off"))
|
||||
:accessibility-role :checkbox
|
||||
:testID "checkbox-prefill-component"}
|
||||
(when checked?
|
||||
[rn/view
|
||||
{:style
|
||||
{:height 20
|
||||
:width 20}}
|
||||
[icons/icon :i/check-small
|
||||
{:size 20
|
||||
:color (colors/theme-colors
|
||||
(colors/alpha colors/neutral-100 (if disabled? 0.3 1))
|
||||
(colors/alpha colors/white (if disabled? 0.3 1)))}]])]]))))
|
||||
|
||||
(defn checkbox
|
||||
[{:keys [default-checked?]}]
|
||||
(let [internal-checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
|
||||
(when (and (not (nil? checked?)) (not= @internal-checked? checked?))
|
||||
(reset! internal-checked? checked?))
|
||||
(let [checked? (or checked? @internal-checked?)]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change internal-checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
{:height 20
|
||||
:width 20})}
|
||||
[rn/view
|
||||
{:style (style/checkbox blurred-background? disabled? checked?)
|
||||
:accessibility-label (str "checkbox-" (if checked? "on" "off"))
|
||||
:accessibility-role :checkbox
|
||||
:testID "checkbox-component"}
|
||||
(when checked?
|
||||
[rn/view
|
||||
{:style
|
||||
{:height 20
|
||||
:width 20}}
|
||||
[icons/icon :i/check-small
|
||||
{:size 20
|
||||
:color colors/white}]])]]]))))
|
||||
|
||||
(defn radio
|
||||
[{:keys [default-checked?]}]
|
||||
(let [internal-checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
|
||||
(when (and (not (nil? checked?)) (not= @internal-checked? checked?))
|
||||
(reset! internal-checked? checked?))
|
||||
(let [checked? (or checked? @internal-checked?)]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change internal-checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
(style/radio checked? disabled? blurred-background?))
|
||||
:accessibility-label (str "radio-" (if checked? "on" "off"))
|
||||
:accessibility-role :checkbox
|
||||
:testID "radio-component"}
|
||||
|
||||
[rn/view
|
||||
{:style
|
||||
(style/radio-inner checked? disabled? blurred-background?)}]]]))))
|
||||
|
||||
(defn toggle
|
||||
[{:keys [default-checked?]}]
|
||||
(let [internal-checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
|
||||
(when (and (not (nil? checked?)) (not= @internal-checked? checked?))
|
||||
(reset! internal-checked? checked?))
|
||||
(let [checked? (or checked? @internal-checked?)]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change internal-checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
(style/toggle checked? disabled? blurred-background?))
|
||||
:accessibility-label (str "toggle-" (if checked? "on" "off"))
|
||||
:accessibility-role :checkbox
|
||||
:testID "toggle-component"}
|
||||
[rn/view
|
||||
{:style
|
||||
(style/toggle-inner checked? disabled? blurred-background?)}]]]))))
|
|
@ -0,0 +1,68 @@
|
|||
(ns quo2.components.selectors.selectors.component-spec
|
||||
(:require [quo2.components.selectors.selectors.view :as selectors]
|
||||
[reagent.core :as reagent]
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(defn render-toggle
|
||||
([]
|
||||
(render-toggle {}))
|
||||
([opts]
|
||||
(h/render (reagent/as-element [selectors/toggle opts]))))
|
||||
|
||||
(defn render-checkbox
|
||||
([]
|
||||
(render-checkbox {}))
|
||||
([opts]
|
||||
(h/render (reagent/as-element [selectors/checkbox opts]))))
|
||||
|
||||
(defn render-checkbox-prefill
|
||||
([]
|
||||
(render-checkbox-prefill {}))
|
||||
([opts]
|
||||
(h/render (reagent/as-element [selectors/checkbox-prefill opts]))))
|
||||
|
||||
(defn render-radio
|
||||
([]
|
||||
(render-radio {}))
|
||||
([opts]
|
||||
(h/render (reagent/as-element [selectors/radio opts]))))
|
||||
|
||||
(h/test "default render of toggle component"
|
||||
(render-toggle)
|
||||
(h/is-truthy (h/get-by-test-id "toggle-component")))
|
||||
|
||||
(h/test "toggle component on change is working"
|
||||
(let [mock-fn (h/mock-fn)]
|
||||
(render-toggle {:on-change mock-fn})
|
||||
(h/fire-event :press (h/get-by-test-id "toggle-component"))
|
||||
(h/was-called mock-fn)))
|
||||
|
||||
(h/test "default render of radio component"
|
||||
(render-radio)
|
||||
(h/is-truthy (h/get-by-test-id "radio-component")))
|
||||
|
||||
(h/test "radio component on change is working"
|
||||
(let [mock-fn (h/mock-fn)]
|
||||
(render-radio {:on-change mock-fn})
|
||||
(h/fire-event :press (h/get-by-test-id "radio-component"))
|
||||
(h/was-called mock-fn)))
|
||||
|
||||
(h/test "default render of checkbox component"
|
||||
(render-checkbox)
|
||||
(h/is-truthy (h/get-by-test-id "checkbox-component")))
|
||||
|
||||
(h/test "checkbox component on change is working"
|
||||
(let [mock-fn (h/mock-fn)]
|
||||
(render-checkbox {:on-change mock-fn})
|
||||
(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 "checkbox-prefill 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"))
|
||||
(h/was-called mock-fn)))
|
|
@ -0,0 +1,127 @@
|
|||
(ns quo2.components.selectors.selectors.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn toggle-background-color
|
||||
[custom-color]
|
||||
{:normal {:checked (colors/custom-color-by-theme custom-color 50 60)
|
||||
:unchecked (colors/theme-colors colors/neutral-30 colors/neutral-80)}
|
||||
:blur {:checked (colors/theme-colors (colors/custom-color custom-color 50) colors/white-opa-70)
|
||||
:unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10)}})
|
||||
|
||||
(defn radio-border-color
|
||||
[customization-color]
|
||||
{:normal {:checked (colors/custom-color-by-theme customization-color 50 60)
|
||||
:unchecked (colors/theme-colors colors/neutral-30 colors/neutral-70)}
|
||||
:blur {:checked (colors/theme-colors (colors/custom-color customization-color 50)
|
||||
colors/white)
|
||||
:unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40)}})
|
||||
|
||||
(defn radio-background-unchecked-color
|
||||
[]
|
||||
{:normal (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)
|
||||
:blur colors/white-opa-5})
|
||||
|
||||
(defn checkbox-background-color
|
||||
[customization-color]
|
||||
{:normal {:checked (colors/custom-color-by-theme customization-color 50 60)
|
||||
:unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)}
|
||||
:blur {:checked (colors/theme-colors (colors/custom-color customization-color 50)
|
||||
colors/white)
|
||||
:unchecked colors/white-opa-5}})
|
||||
|
||||
(defn checkbox-border-unchecked-color
|
||||
[]
|
||||
{:normal (colors/theme-colors colors/neutral-30 colors/neutral-70)
|
||||
:blur (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40)})
|
||||
|
||||
(defn checkbox-prefill-background-color
|
||||
[]
|
||||
{:normal (colors/theme-colors colors/neutral-30 colors/neutral-80)
|
||||
:blur (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10)})
|
||||
|
||||
(defn- get-color
|
||||
[color-map & [blur? checked?]]
|
||||
(let [blur-type (if blur? :blur :normal)]
|
||||
(if (some? checked?)
|
||||
(get-in color-map [blur-type (if checked? :checked :unchecked)])
|
||||
(get color-map blur-type))))
|
||||
|
||||
(defn toggle
|
||||
[{:keys [checked? disabled? blur? container-style customization-color]}]
|
||||
(assoc container-style
|
||||
:height 20
|
||||
:width 30
|
||||
:border-radius 20
|
||||
:opacity (if disabled? 0.3 1)
|
||||
:background-color (get-color (toggle-background-color customization-color) blur? checked?)))
|
||||
|
||||
(defn toggle-inner
|
||||
[{:keys [checked?]}]
|
||||
{:height 16
|
||||
:width 16
|
||||
:background-color colors/white
|
||||
:border-radius 20
|
||||
:margin-left (if checked? 12 2)
|
||||
:margin-right :auto
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto})
|
||||
|
||||
(defn radio
|
||||
[{:keys [checked? disabled? blur? container-style customization-color]}]
|
||||
(assoc container-style
|
||||
:height 20
|
||||
:width 20
|
||||
:border-radius 20
|
||||
:border-width 1.2
|
||||
:opacity (if disabled? 0.3 1)
|
||||
:background-color (when-not checked?
|
||||
(get-color (radio-background-unchecked-color) blur?))
|
||||
:border-color (get-color (radio-border-color customization-color) blur? checked?)))
|
||||
|
||||
(defn radio-inner
|
||||
[{:keys [checked? blur? customization-color]}]
|
||||
{:height 14
|
||||
:width 14
|
||||
:margin 1.8
|
||||
:border-radius 7
|
||||
:background-color (when checked?
|
||||
(get-color (radio-border-color customization-color) blur? checked?))})
|
||||
|
||||
(defn checkbox
|
||||
[{:keys [checked? disabled? blur? container-style customization-color]}]
|
||||
(assoc container-style
|
||||
:height 20
|
||||
:width 20
|
||||
:border-radius 6
|
||||
:opacity (if disabled? 0.3 1)
|
||||
:border-width (if checked? 0 1.2)
|
||||
:background-color (get-color (checkbox-background-color customization-color) blur? checked?)
|
||||
:border-color (when-not checked?
|
||||
(get-color (checkbox-border-unchecked-color) blur?))))
|
||||
|
||||
(defn common-checkbox-inner
|
||||
[{:keys [checked?]}]
|
||||
(let [size (if checked? 20 0)]
|
||||
{:height size :width size}))
|
||||
|
||||
(defn checkbox-check
|
||||
[_checked? blur?]
|
||||
{:size 20
|
||||
:color (if blur?
|
||||
(colors/theme-colors colors/white colors/neutral-100)
|
||||
colors/white)})
|
||||
|
||||
(defn checkbox-prefill
|
||||
[{:keys [disabled? blur? container-style]}]
|
||||
(assoc container-style
|
||||
:height 21
|
||||
:width 21
|
||||
:border-radius 6
|
||||
:opacity (if disabled? 0.3 1)
|
||||
:background-color (get-color (checkbox-prefill-background-color) blur?)))
|
||||
|
||||
(defn checkbox-prefill-check
|
||||
[checked? _blur?]
|
||||
{:size 20
|
||||
:color (when checked? (colors/theme-colors colors/neutral-100 colors/white))})
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
(ns quo2.components.selectors.selectors.view
|
||||
(:require [quo2.components.icon :as icons]
|
||||
[quo2.components.selectors.selectors.style :as style]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn- handle-press
|
||||
[on-change checked-atom checked?]
|
||||
(when checked-atom (swap! checked-atom not))
|
||||
(when on-change (on-change (not checked?))))
|
||||
|
||||
(defn- selector
|
||||
[{:keys [default-checked? checked?]}]
|
||||
(let [controlled-component? (some? checked?)
|
||||
internal-checked? (when-not controlled-component?
|
||||
(reagent/atom (or default-checked? false)))]
|
||||
(fn [{:keys [checked? disabled? blur? customization-color on-change container-style
|
||||
label-prefix outer-style-fn inner-style-fn icon-style-fn]
|
||||
:or {customization-color :blue}}]
|
||||
(let [actual-checked? (if controlled-component? checked? @internal-checked?)
|
||||
accessibility-label (str label-prefix "-" (if actual-checked? "on" "off"))
|
||||
test-id (str label-prefix "-component")
|
||||
outer-styles (outer-style-fn {:checked? actual-checked?
|
||||
:disabled? disabled?
|
||||
:blur? blur?
|
||||
:container-style container-style
|
||||
:customization-color customization-color})]
|
||||
[rn/touchable-without-feedback
|
||||
(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 {:checked? actual-checked?
|
||||
:blur? blur?
|
||||
:customization-color customization-color})}
|
||||
(when (and icon-style-fn actual-checked?)
|
||||
[icons/icon :i/check-small (icon-style-fn actual-checked? blur?)])]]]))))
|
||||
|
||||
(defn toggle
|
||||
[props]
|
||||
[selector
|
||||
(assoc props
|
||||
:label-prefix "toggle"
|
||||
:outer-style-fn style/toggle
|
||||
:inner-style-fn style/toggle-inner)])
|
||||
|
||||
(defn radio
|
||||
[props]
|
||||
[selector
|
||||
(assoc props
|
||||
:label-prefix "radio"
|
||||
:outer-style-fn style/radio
|
||||
:inner-style-fn style/radio-inner)])
|
||||
|
||||
(defn checkbox
|
||||
[props]
|
||||
[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
|
||||
[props]
|
||||
[selector
|
||||
(assoc props
|
||||
:label-prefix "checkbox-prefill"
|
||||
:outer-style-fn style/checkbox-prefill
|
||||
:inner-style-fn style/common-checkbox-inner
|
||||
:icon-style-fn style/checkbox-prefill-check)])
|
|
@ -1,130 +0,0 @@
|
|||
(ns quo2.components.selectors.styles
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn get-color
|
||||
[checked? disabled? blurred-background?]
|
||||
(cond
|
||||
checked?
|
||||
(colors/custom-color-by-theme
|
||||
:primary
|
||||
50
|
||||
60
|
||||
(when disabled? 30)
|
||||
(when disabled? 30))
|
||||
blurred-background?
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/neutral-80 (if disabled? 0.05 0.1))
|
||||
(colors/alpha colors/white (if disabled? 0.05 0.1)))
|
||||
:else
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/neutral-20 (if disabled? 0.4 1))
|
||||
(colors/alpha colors/neutral-70 (if disabled? 0.3 1)))))
|
||||
|
||||
(defn checkbox-prefill
|
||||
[blurred-background? disabled?]
|
||||
{:height 21
|
||||
:width 21
|
||||
:border-radius 6
|
||||
:background-color (if blurred-background?
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/neutral-80
|
||||
(if disabled? 0.05 0.1))
|
||||
(colors/alpha colors/white (if disabled? 0.05 0.1)))
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/neutral-20
|
||||
(if disabled? 0.3 1))
|
||||
(colors/alpha colors/neutral-70
|
||||
(if disabled? 0.3 1))))})
|
||||
|
||||
(defn checkbox
|
||||
[blurred-background? disabled? checked?]
|
||||
{:flex 1
|
||||
:border-radius 6
|
||||
:border-width (if checked? 0 1)
|
||||
:background-color (cond
|
||||
checked?
|
||||
(get-color checked? disabled? blurred-background?)
|
||||
blurred-background?
|
||||
(colors/theme-colors
|
||||
colors/white-opa-5
|
||||
colors/white-opa-10)
|
||||
:else
|
||||
(colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-80-opa-40))
|
||||
:border-color (if checked?
|
||||
:none
|
||||
(get-color checked?
|
||||
disabled?
|
||||
blurred-background?))})
|
||||
|
||||
(defn checkbox-toggle
|
||||
[checked? disabled? blurred-background?]
|
||||
{:flex 1
|
||||
:border-radius 6
|
||||
:border-width (if @checked? 0 1)
|
||||
:background-color (cond
|
||||
@checked?
|
||||
(get-color @checked? disabled? blurred-background?)
|
||||
blurred-background?
|
||||
(colors/theme-colors
|
||||
colors/white-opa-5
|
||||
colors/white-opa-10)
|
||||
:else
|
||||
(colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-80-opa-40))
|
||||
:border-color (if @checked?
|
||||
:none
|
||||
(get-color @checked? disabled? blurred-background?))})
|
||||
|
||||
(defn radio
|
||||
[checked? disabled? blurred-background?]
|
||||
{:height 20
|
||||
:width 20
|
||||
:border-radius 20
|
||||
:border-width 1
|
||||
:border-color (get-color checked?
|
||||
disabled?
|
||||
blurred-background?)
|
||||
:background-color (when-not blurred-background?
|
||||
(colors/theme-colors colors/white
|
||||
(colors/alpha colors/neutral-80
|
||||
0.4)))})
|
||||
|
||||
(defn toggle
|
||||
[checked? disabled? blurred-background?]
|
||||
{:height 20
|
||||
:width 30
|
||||
:border-radius 20
|
||||
:background-color (get-color checked?
|
||||
disabled?
|
||||
blurred-background?)})
|
||||
|
||||
(defn toggle-inner
|
||||
[checked? disabled? blurred-background?]
|
||||
{:margin-left (if checked? 12 2)
|
||||
:height 16
|
||||
:width 16
|
||||
:background-color (if blurred-background?
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/white (if disabled? 0.4 1))
|
||||
(colors/alpha colors/white (if disabled? 0.3 1)))
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/white 1)
|
||||
(colors/alpha colors/white (if disabled? 0.4 1))))
|
||||
:border-radius 20
|
||||
:margin-right :auto
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto})
|
||||
|
||||
(defn radio-inner
|
||||
[checked? disabled? blurred-background?]
|
||||
{:margin-left :auto
|
||||
:height 14
|
||||
:width 14
|
||||
:background-color (when checked? (get-color checked? disabled? blurred-background?))
|
||||
:border-radius 20
|
||||
:margin-right :auto
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto})
|
|
@ -1,7 +1,7 @@
|
|||
(ns quo2.components.settings.privacy-option
|
||||
(:require [quo2.components.icon :as icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.selectors.selectors :as selectors]
|
||||
[quo2.components.selectors.selectors.view :as selectors]
|
||||
[quo2.components.settings.style :as style]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]))
|
||||
|
|
|
@ -56,7 +56,7 @@
|
|||
quo2.components.record-audio.record-audio.view
|
||||
quo2.components.selectors.disclaimer.view
|
||||
quo2.components.selectors.filter.view
|
||||
quo2.components.selectors.selectors
|
||||
quo2.components.selectors.selectors.view
|
||||
quo2.components.separator
|
||||
quo2.components.settings.accounts.view
|
||||
quo2.components.settings.privacy-option
|
||||
|
@ -99,7 +99,7 @@
|
|||
(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
|
||||
(def page-nav quo2.components.navigation.page-nav/page-nav)
|
||||
(def disclaimer quo2.components.selectors.disclaimer.view/view)
|
||||
(def checkbox quo2.components.selectors.selectors/checkbox)
|
||||
(def checkbox quo2.components.selectors.selectors.view/checkbox)
|
||||
(def filter quo2.components.selectors.filter.view/view)
|
||||
(def skeleton quo2.components.loaders.skeleton/skeleton)
|
||||
(def author quo2.components.messages.author.view/author)
|
||||
|
|
|
@ -20,8 +20,8 @@
|
|||
[quo2.components.profile.select-profile.component-spec]
|
||||
[quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec]
|
||||
[quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
|
||||
[quo2.components.selectors.--tests--.selectors-component-spec]
|
||||
[quo2.components.selectors.disclaimer.component-spec]
|
||||
[quo2.components.selectors.filter.component-spec]
|
||||
[quo2.components.selectors.selectors.component-spec]
|
||||
[quo2.components.share.share-qr-code.component-spec]
|
||||
[quo2.components.tags.--tests--.status-tags-component-spec]))
|
||||
|
|
|
@ -170,8 +170,9 @@
|
|||
(when (= @focused-input :repeat-password)
|
||||
[rn/view {:style style/disclaimer-container}
|
||||
[quo/disclaimer
|
||||
{:on-change #(reset! accepts-disclaimer? %)
|
||||
:checked? @accepts-disclaimer?}
|
||||
{:blur? true
|
||||
:checked? @accepts-disclaimer?
|
||||
:on-change #(reset! accepts-disclaimer? %)}
|
||||
(i18n/label :t/password-creation-disclaimer)]])
|
||||
|
||||
[rn/view {:style style/button-container}
|
||||
|
|
|
@ -1,91 +1,71 @@
|
|||
(ns status-im2.contexts.quo-preview.selectors.selectors
|
||||
(:require ["react-native" :refer [StyleSheet]]
|
||||
[oops.core :refer [oget]]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.selectors.selectors :as quo2]
|
||||
(:require [quo2.components.markdown.text :as text]
|
||||
[quo2.components.selectors.selectors.view :as quo2]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui.components.react :as react]))
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def descriptor
|
||||
[{:label "Disabled?"
|
||||
[{:label "Disabled"
|
||||
:key :disabled?
|
||||
:type :boolean}])
|
||||
:type :boolean}
|
||||
{:label "Blur"
|
||||
:key :blur?
|
||||
:type :boolean}
|
||||
{:label "Customization color"
|
||||
:key :customization-color
|
||||
:type :select
|
||||
:options (map (fn [[color _]]
|
||||
{:key color :value (name color)})
|
||||
colors/customization)}])
|
||||
|
||||
(defn selector-preview
|
||||
[text component {:keys [disabled? blur? customization-color]}]
|
||||
[rn/view
|
||||
{:style {:margin 6
|
||||
:align-items :center}}
|
||||
[text/text {:size :paragraph-1} text]
|
||||
[component
|
||||
{:container-style {:margin 4}
|
||||
:disabled? disabled?
|
||||
:blur? blur?
|
||||
:customization-color customization-color}]])
|
||||
|
||||
(defn cool-preview
|
||||
[]
|
||||
(let [state (reagent/atom {:disabled false})]
|
||||
(let [state (reagent/atom {:disabled? false
|
||||
:blur? false
|
||||
:customization-color :blue})]
|
||||
(fn []
|
||||
[rn/view
|
||||
{:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:style {:margin-vertical 24}}
|
||||
[preview/blur-view
|
||||
{:style {:width "100%"
|
||||
:align-items :center
|
||||
:top (if (:blur? @state) 32 16)
|
||||
:position (if (:blur? @state)
|
||||
:absolute
|
||||
:relative)}
|
||||
:height 300
|
||||
:show-blur-background? (:blur? @state)}
|
||||
|
||||
[rn/view
|
||||
{:padding-vertical 60
|
||||
:align-items :center}
|
||||
[text/text {:size :heading-2} "Toggle"]
|
||||
[quo2/toggle
|
||||
{:container-style {:margin-top 0}
|
||||
:disabled? (:disabled? @state)}]
|
||||
[text/text {:size :heading-2} "Radio"]
|
||||
[quo2/radio
|
||||
{:container-style {:margin-top 0}
|
||||
:disabled? (:disabled? @state)}]
|
||||
[text/text {:size :heading-2} "Checkbox"]
|
||||
[quo2/checkbox
|
||||
{:container-style {:margin-top 0}
|
||||
:disabled? (:disabled? @state)}]
|
||||
[text/text {:size :heading-2} "Checkbox Prefill"]
|
||||
[quo2/checkbox-prefill
|
||||
{:container-style {:margin-top 0}
|
||||
:disabled? (:disabled? @state)}]]
|
||||
|
||||
[rn/view
|
||||
{:padding-vertical 60
|
||||
:align-items :center}
|
||||
[react/blur-view
|
||||
{:style (oget StyleSheet "absoluteFill")
|
||||
:blurAmount 20
|
||||
:blurType (if (colors/dark?) :dark :light)}
|
||||
[react/linear-gradient
|
||||
{:style (oget StyleSheet "absoluteFill")
|
||||
:colors [(colors/alpha "#4CB4EF" 0.2)
|
||||
(colors/alpha "#FB8F61" 0.2)
|
||||
(colors/alpha "#647084" 0.2)]
|
||||
:start {:x 0 :y 0}
|
||||
:end {:x 1 :y 1}}]]
|
||||
|
||||
[text/text {:size :heading-2} "Toggle"]
|
||||
[quo2/toggle
|
||||
{:container-style {:margin-top 0}
|
||||
:disabled? (:disabled? @state)
|
||||
:blurred-background? true}]
|
||||
[text/text {:size :heading-2} "Radio"]
|
||||
[quo2/radio
|
||||
{:container-style {:margin-top 0}
|
||||
:disabled? (:disabled? @state)
|
||||
:blurred-background? true}]
|
||||
[text/text {:size :heading-2} "Checkbox"]
|
||||
[quo2/checkbox
|
||||
{:container-style {:margin-top 0}
|
||||
:disabled? (:disabled? @state)
|
||||
:blurred-background? true}]
|
||||
[text/text {:size :heading-2} "Checkbox Prefill"]
|
||||
[quo2/checkbox-prefill
|
||||
{:container-style {:margin-top 0}
|
||||
:disabled? (:disabled? @state)
|
||||
:blurred-background? true}]]])))
|
||||
[rn/view
|
||||
{:style {:flex 1
|
||||
:align-items :center}}
|
||||
[selector-preview "Toggle" quo2/toggle @state]
|
||||
[selector-preview "Radio" quo2/radio @state]
|
||||
[selector-preview "Checkbox" quo2/checkbox @state]
|
||||
[selector-preview "Checkbox Prefill" quo2/checkbox-prefill @state]]]]])))
|
||||
|
||||
(defn preview-selectors
|
||||
[]
|
||||
[rn/view
|
||||
{:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
:flex 1}
|
||||
{:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
|
||||
:flex 1}}
|
||||
[rn/flat-list
|
||||
{:flex 1
|
||||
{:style {:flex 1}
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
|
|
Loading…
Reference in New Issue