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

feat: add disclaimer component to quo 2 library (#14084) 

* feat: add disclaimer component to quo 2 library

* chore: move state of selectors to be internal
This commit is contained in:
Jamie Caprani 2022-09-29 16:28:32 +01:00 committed by GitHub
parent 0e3b645695
commit faaf6d5f94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 185 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/quo2/components/selectors/disclaimer.cljs Normal file
View File

@ -0,0 +1,31 @@
(ns quo2.components.selectors.disclaimer
(:require [quo.react-native :as rn]
[quo2.foundations.colors :as colors]
[quo2.components.markdown.text :as text]
[quo2.components.selectors.selectors :as selectors]))
(defn disclaimer [{:keys [on-change accessibility-label container-style]} label]
[rn/view
{:style
(merge
container-style
{:flex 1
:flex-direction :row
:background-color (colors/theme-colors
colors/neutral-5
colors/neutral-80-opa-40)
:padding 11
:align-self :stretch
:border-radius 12
:border-width 1
:border-color (colors/theme-colors
colors/neutral-20
colors/neutral-70)})}
[selectors/checkbox
{:on-change on-change}]
[text/text
{:accessibility-label accessibility-label
:size :paragraph-2
:style {:margin-left 8}}
label]])

210
src/quo2/components/selectors/selectors.cljs
View File

@ -2,6 +2,7 @@
(:require [quo.react-native :as rn] (:require [quo.react-native :as rn]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo.theme :as theme] [quo.theme :as theme]
[reagent.core :as reagent]
[quo2.components.icon :as icons])) [quo2.components.icon :as icons]))
(defn- get-color [checked? disabled?] (defn- get-color [checked? disabled?]
@ -12,105 +13,120 @@
(colors/alpha colors/neutral-20 (if disabled? 0.4 1)) (colors/alpha colors/neutral-20 (if disabled? 0.4 1))
(colors/alpha colors/neutral-70 (if disabled? 0.3 1))))) (colors/alpha colors/neutral-70 (if disabled? 0.3 1)))))
(defn checkbox-prefill [{:keys [checked? on-change disabled? container-style]}] (defn- handle-press [disabled? on-change checked?]
[rn/touchable-without-feedback (when (not disabled?)
{:on-press (when (and on-change (not disabled?)) on-change)} (fn []
[rn/view (swap! checked? not)
{:style (merge (when on-change (on-change @checked?)))))
container-style
{:height 21
:width 21
:border-radius 6
:background-color (colors/theme-colors
(colors/alpha colors/neutral-20 (if disabled? 0.3 1))
(colors/alpha colors/neutral-70 (if disabled? 0.3 1)))})
:accessibility-label (str "checkbox-" (if checked? "on" "off"))
:accessibility-role :checkbox}
(when checked?
[rn/view {:style
{:height 20
:width 20}}
[icons/icon :main-icons2/check
{: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 [checked? on-change disabled? container-style]}] (defn checkbox-prefill [{:keys [default-checked?]}]
[rn/touchable-without-feedback (let [checked? (reagent/atom (or default-checked? false))]
{:on-press (when (and on-change (not disabled?)) on-change)} (fn [{:keys [on-change disabled? container-style]}]
[rn/view [rn/touchable-without-feedback
{:style (merge {:on-press (handle-press disabled? on-change checked?)}
container-style [rn/view
{:height (if checked? 20 21) {:style (merge
:width (if checked? 20 21) container-style
:border-radius 6 {:height 21
:border-width (if checked? 0 1) :width 21
:background-color (if checked? :border-radius 6
(get-color checked? disabled?) :background-color (colors/theme-colors
(colors/theme-colors (colors/alpha colors/neutral-20 (if disabled? 0.3 1))
colors/white (colors/alpha colors/neutral-70 (if disabled? 0.3 1)))})
colors/neutral-80-opa-40)) :accessibility-label (str "checkbox-" (if @checked? "on" "off"))
:border-color (if checked? :none :accessibility-role :checkbox}
(get-color checked? disabled?))}) (when @checked?
[rn/view {:style
{:height 20
:width 20}}
[icons/icon :main-icons2/check
{: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)))}]])]])))
:accessibility-label (str "checkbox-" (if checked? "on" "off")) (defn checkbox [{:keys [default-checked?]}]
:accessibility-role :checkbox} (let [checked? (reagent/atom (or default-checked? false))]
(when checked? (fn [{:keys [on-change disabled? container-style]}]
[rn/view {:style [rn/touchable-without-feedback
{:height 20 {:on-press (handle-press disabled? on-change checked?)}
:width 20}} [rn/view
[icons/icon :main-icons2/check {:style (merge
{:size 20 container-style
:color (colors/alpha colors/white (if disabled? 0.3 1))}]])]]) {:height 21
:width 21})}
[rn/view
{:style {:flex 1
:border-radius 6
:border-width (if @checked? 0 1)
:background-color (if @checked?
(get-color @checked? disabled?)
(colors/theme-colors
colors/white
colors/neutral-80-opa-40))
:border-color (if @checked? :none
(get-color @checked? disabled?))}
:accessibility-label (str "checkbox-" (if @checked? "on" "off"))
:accessibility-role :checkbox}
(when @checked?
[rn/view {:style
{:height 20
:width 20}}
[icons/icon :main-icons2/check
{:size 20
:color (colors/alpha colors/white (if disabled? 0.3 1))}]])]]])))
(defn radio [{:keys [checked? on-change disabled? container-style]}] (defn radio [{:keys [default-checked?]}]
[rn/touchable-without-feedback (let [checked? (reagent/atom (or default-checked? false))]
{:on-press (when (and on-change (not disabled?)) on-change)} (fn [{:keys [on-change disabled? container-style]}]
[rn/view [rn/touchable-without-feedback
{:style (merge {:on-press (handle-press disabled? on-change checked?)}
container-style [rn/view
{:height 20 {:style (merge
:width 20 container-style
:border-radius 20 {:height 20
:border-width 1 :width 20
:border-color (get-color checked? disabled?) :border-radius 20
:background-color (colors/theme-colors colors/white :border-width 1
(colors/alpha colors/neutral-80 0.4))}) :border-color (get-color @checked? disabled?)
:accessibility-label (str "radio-" (if checked? "on" "off")) :background-color (colors/theme-colors colors/white
:accessibility-role :checkbox} (colors/alpha colors/neutral-80 0.4))})
:accessibility-label (str "radio-" (if @checked? "on" "off"))
:accessibility-role :checkbox}
[rn/view {:style [rn/view {:style
{:margin-left :auto {:margin-left :auto
:height 14 :height 14
:width 14 :width 14
:background-color (when checked? (get-color checked? disabled?)) :background-color (when @checked? (get-color @checked? disabled?))
:border-radius 20 :border-radius 20
:margin-right :auto :margin-right :auto
:margin-top :auto :margin-top :auto
:margin-bottom :auto}}]]]) :margin-bottom :auto}}]]])))
(defn toggle [{:keys [checked? on-change disabled? container-style]}] (defn toggle [{:keys [default-checked?]}]
[rn/touchable-without-feedback (let [checked? (reagent/atom (or default-checked? false))]
{:on-press (when (and on-change (not disabled?)) on-change)} (fn [{:keys [on-change disabled? container-style]}]
[rn/view [rn/touchable-without-feedback
{:style (merge {:on-press (handle-press disabled? on-change checked?)}
container-style [rn/view
{:height 20 {:style (merge
:width 30 container-style
:border-radius 20 {:height 20
:background-color (get-color checked? disabled?)}) :width 30
:accessibility-label (str "toggle-" (if checked? "on" "off")) :border-radius 20
:accessibility-role :checkbox} :background-color (get-color @checked? disabled?)})
[rn/view {:style :accessibility-label (str "toggle-" (if @checked? "on" "off"))
{:margin-left (if checked? 12 2) :accessibility-role :checkbox}
:height 16 [rn/view {:style
:width 16 {:margin-left (if @checked? 12 2)
:background-color (colors/alpha colors/white :height 16
(if (theme/dark?) :width 16
(if disabled? 0.3 1) :background-color (colors/alpha colors/white
1)) (if (theme/dark?)
:border-radius 20 (if disabled? 0.3 1)
:margin-right :auto 1))
:margin-top :auto :border-radius 20
:margin-bottom :auto}}]]]) :margin-right :auto
:margin-top :auto
:margin-bottom :auto}}]]])))

6
src/quo2/screens/main.cljs
View File

@ -27,6 +27,7 @@
[quo2.screens.messages.gap :as messages-gap] [quo2.screens.messages.gap :as messages-gap]
[quo2.screens.notifications.activity-logs :as activity-logs] [quo2.screens.notifications.activity-logs :as activity-logs]
[quo2.screens.reactions.react :as react] [quo2.screens.reactions.react :as react]
[quo2.screens.selectors.disclaimer :as disclaimer]
[quo2.screens.selectors.selectors :as selectors] [quo2.screens.selectors.selectors :as selectors]
[quo2.screens.switcher.switcher-cards :as switcher-cards] [quo2.screens.switcher.switcher-cards :as switcher-cards]
[quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab] [quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab]
@ -107,7 +108,10 @@
:switcher [{:name :switcher-cards :switcher [{:name :switcher-cards
:insets {:top false} :insets {:top false}
:component switcher-cards/preview-switcher-cards}] :component switcher-cards/preview-switcher-cards}]
:selectors [{:name :selectors :selectors [{:name :disclaimer
:insets {:top false}
:component disclaimer/preview-disclaimer}
{:name :selectors
:insets {:top false} :insets {:top false}
:component selectors/preview-selectors}] :component selectors/preview-selectors}]
:tabs [{:name :segmented :tabs [{:name :segmented

31
src/quo2/screens/selectors/disclaimer.cljs Normal file
View File

@ -0,0 +1,31 @@
(ns quo2.screens.selectors.disclaimer
(:require [quo.react-native :as rn]
[reagent.core :as reagent]
[quo2.components.buttons.button :as button]
[quo2.components.selectors.disclaimer :as quo2]
[quo2.foundations.colors :as colors]))
(defn cool-preview []
(let [checked? (reagent/atom false)]
(fn []
[rn/view {:margin-bottom 50
:padding-vertical 16
:padding-horizontal 20}
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/disclaimer
{:checked? @checked?
:container-style {:margin-bottom 40}
:on-change #(swap! checked? not)}
"I agree with the community rules"]
[button/button
{:disabled (not @checked?)}
"submit"]]])))
(defn preview-disclaimer []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])

19
src/quo2/screens/selectors/selectors.cljs
View File

@ -11,8 +11,7 @@
:type :boolean}]) :type :boolean}])
(defn cool-preview [] (defn cool-preview []
(let [state (reagent/atom {:disabled false}) (let [state (reagent/atom {:disabled false})]
checked? (reagent/atom false)]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/view {:margin-bottom 50
:padding 16} :padding 16}
@ -21,24 +20,16 @@
:align-items :center} :align-items :center}
[text/text {:size :heading-2} "Toggle"] [text/text {:size :heading-2} "Toggle"]
[quo2/toggle {:container-style {:margin-top 0} [quo2/toggle {:container-style {:margin-top 0}
:disabled? (:disabled? @state) :disabled? (:disabled? @state)}]
:checked? @checked?
:on-change #(swap! checked? not)}]
[text/text {:size :heading-2} "Radio"] [text/text {:size :heading-2} "Radio"]
[quo2/radio {:container-style {:margin-top 0} [quo2/radio {:container-style {:margin-top 0}
:disabled? (:disabled? @state) :disabled? (:disabled? @state)}]
:checked? @checked?
:on-change #(swap! checked? not)}]
[text/text {:size :heading-2} "Checkbox"] [text/text {:size :heading-2} "Checkbox"]
[quo2/checkbox {:container-style {:margin-top 0} [quo2/checkbox {:container-style {:margin-top 0}
:disabled? (:disabled? @state) :disabled? (:disabled? @state)}]
:checked? @checked?
:on-change #(swap! checked? not)}]
[text/text {:size :heading-2} "Checkbox Prefill"] [text/text {:size :heading-2} "Checkbox Prefill"]
[quo2/checkbox-prefill {:container-style {:margin-top 0} [quo2/checkbox-prefill {:container-style {:margin-top 0}
:disabled? (:disabled? @state) :disabled? (:disabled? @state)}]]])))
:checked? @checked?
:on-change #(swap! checked? not)}]]])))
(defn preview-selectors [] (defn preview-selectors []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)