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
GitHub
parent
0e3b645695
commit
faaf6d5f94
|
|
@ -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]])
|
||||
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo.theme :as theme]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.icon :as icons]))
|
||||
|
||||
(defn- get-color [checked? disabled?]
|
||||
|
|
@ -12,105 +13,120 @@
|
|||
(colors/alpha colors/neutral-20 (if disabled? 0.4 1))
|
||||
(colors/alpha colors/neutral-70 (if disabled? 0.3 1)))))
|
||||
|
||||
(defn checkbox-prefill [{:keys [checked? on-change disabled? container-style]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (when (and on-change (not disabled?)) on-change)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
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- handle-press [disabled? on-change checked?]
|
||||
(when (not disabled?)
|
||||
(fn []
|
||||
(swap! checked? not)
|
||||
(when on-change (on-change @checked?)))))
|
||||
|
||||
(defn checkbox [{:keys [checked? on-change disabled? container-style]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (when (and on-change (not disabled?)) on-change)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
{:height (if checked? 20 21)
|
||||
:width (if checked? 20 21)
|
||||
: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?))})
|
||||
(defn checkbox-prefill [{:keys [default-checked?]}]
|
||||
(let [checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? container-style]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
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)))}]])]])))
|
||||
|
||||
: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 checkbox [{:keys [default-checked?]}]
|
||||
(let [checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? container-style]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
{: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]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (when (and on-change (not disabled?)) on-change)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
{:height 20
|
||||
:width 20
|
||||
:border-radius 20
|
||||
:border-width 1
|
||||
:border-color (get-color checked? disabled?)
|
||||
:background-color (colors/theme-colors colors/white
|
||||
(colors/alpha colors/neutral-80 0.4))})
|
||||
:accessibility-label (str "radio-" (if checked? "on" "off"))
|
||||
:accessibility-role :checkbox}
|
||||
(defn radio [{:keys [default-checked?]}]
|
||||
(let [checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? container-style]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
{:height 20
|
||||
:width 20
|
||||
:border-radius 20
|
||||
:border-width 1
|
||||
:border-color (get-color @checked? disabled?)
|
||||
:background-color (colors/theme-colors colors/white
|
||||
(colors/alpha colors/neutral-80 0.4))})
|
||||
:accessibility-label (str "radio-" (if @checked? "on" "off"))
|
||||
:accessibility-role :checkbox}
|
||||
|
||||
[rn/view {:style
|
||||
{:margin-left :auto
|
||||
:height 14
|
||||
:width 14
|
||||
:background-color (when checked? (get-color checked? disabled?))
|
||||
:border-radius 20
|
||||
:margin-right :auto
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto}}]]])
|
||||
[rn/view {:style
|
||||
{:margin-left :auto
|
||||
:height 14
|
||||
:width 14
|
||||
:background-color (when @checked? (get-color @checked? disabled?))
|
||||
:border-radius 20
|
||||
:margin-right :auto
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto}}]]])))
|
||||
|
||||
(defn toggle [{:keys [checked? on-change disabled? container-style]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (when (and on-change (not disabled?)) on-change)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
{:height 20
|
||||
:width 30
|
||||
:border-radius 20
|
||||
:background-color (get-color checked? disabled?)})
|
||||
:accessibility-label (str "toggle-" (if checked? "on" "off"))
|
||||
:accessibility-role :checkbox}
|
||||
[rn/view {:style
|
||||
{:margin-left (if checked? 12 2)
|
||||
:height 16
|
||||
:width 16
|
||||
:background-color (colors/alpha colors/white
|
||||
(if (theme/dark?)
|
||||
(if disabled? 0.3 1)
|
||||
1))
|
||||
:border-radius 20
|
||||
:margin-right :auto
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto}}]]])
|
||||
(defn toggle [{:keys [default-checked?]}]
|
||||
(let [checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? container-style]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
{:height 20
|
||||
:width 30
|
||||
:border-radius 20
|
||||
:background-color (get-color @checked? disabled?)})
|
||||
:accessibility-label (str "toggle-" (if @checked? "on" "off"))
|
||||
:accessibility-role :checkbox}
|
||||
[rn/view {:style
|
||||
{:margin-left (if @checked? 12 2)
|
||||
:height 16
|
||||
:width 16
|
||||
:background-color (colors/alpha colors/white
|
||||
(if (theme/dark?)
|
||||
(if disabled? 0.3 1)
|
||||
1))
|
||||
:border-radius 20
|
||||
:margin-right :auto
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto}}]]])))
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
[quo2.screens.messages.gap :as messages-gap]
|
||||
[quo2.screens.notifications.activity-logs :as activity-logs]
|
||||
[quo2.screens.reactions.react :as react]
|
||||
[quo2.screens.selectors.disclaimer :as disclaimer]
|
||||
[quo2.screens.selectors.selectors :as selectors]
|
||||
[quo2.screens.switcher.switcher-cards :as switcher-cards]
|
||||
[quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab]
|
||||
|
|
@ -107,7 +108,10 @@
|
|||
:switcher [{:name :switcher-cards
|
||||
:insets {:top false}
|
||||
:component switcher-cards/preview-switcher-cards}]
|
||||
:selectors [{:name :selectors
|
||||
:selectors [{:name :disclaimer
|
||||
:insets {:top false}
|
||||
:component disclaimer/preview-disclaimer}
|
||||
{:name :selectors
|
||||
:insets {:top false}
|
||||
:component selectors/preview-selectors}]
|
||||
:tabs [{:name :segmented
|
||||
|
|
|
|||
|
|
@ -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}]])
|
||||
|
|
@ -11,8 +11,7 @@
|
|||
:type :boolean}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:disabled false})
|
||||
checked? (reagent/atom false)]
|
||||
(let [state (reagent/atom {:disabled false})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
|
|
@ -21,24 +20,16 @@
|
|||
:align-items :center}
|
||||
[text/text {:size :heading-2} "Toggle"]
|
||||
[quo2/toggle {:container-style {:margin-top 0}
|
||||
:disabled? (:disabled? @state)
|
||||
:checked? @checked?
|
||||
:on-change #(swap! checked? not)}]
|
||||
:disabled? (:disabled? @state)}]
|
||||
[text/text {:size :heading-2} "Radio"]
|
||||
[quo2/radio {:container-style {:margin-top 0}
|
||||
:disabled? (:disabled? @state)
|
||||
:checked? @checked?
|
||||
:on-change #(swap! checked? not)}]
|
||||
:disabled? (:disabled? @state)}]
|
||||
[text/text {:size :heading-2} "Checkbox"]
|
||||
[quo2/checkbox {:container-style {:margin-top 0}
|
||||
:disabled? (:disabled? @state)
|
||||
:checked? @checked?
|
||||
:on-change #(swap! checked? not)}]
|
||||
:disabled? (:disabled? @state)}]
|
||||
[text/text {:size :heading-2} "Checkbox Prefill"]
|
||||
[quo2/checkbox-prefill {:container-style {:margin-top 0}
|
||||
:disabled? (:disabled? @state)
|
||||
:checked? @checked?
|
||||
:on-change #(swap! checked? not)}]]])))
|
||||
:disabled? (:disabled? @state)}]]])))
|
||||
|
||||
(defn preview-selectors []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
|
|
|
|||
Loading…
Reference in New Issue