feat: implement selectors for quo2 (#14078)

* feat: implement selectors for quo2
This commit is contained in:
Jamie Caprani 2022-09-28 16:19:32 +01:00 committed by GitHub
parent b4d95b240d
commit 7f71c01460
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 169 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 464 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 716 B

View File

@ -0,0 +1,116 @@
(ns quo2.components.selectors.selectors
(:require [quo.react-native :as rn]
[quo2.foundations.colors :as colors]
[quo.theme :as theme]
[quo2.components.icon :as icons]))
(defn- get-color [checked? disabled?]
(if checked?
(colors/custom-color-by-theme
:primary 50 60 (when disabled? 30) (when disabled? 30))
(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 [{: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 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?))})
: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}
[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}}]]])

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.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]
[quo2.screens.tabs.account-selector :as account-selector] [quo2.screens.tabs.account-selector :as account-selector]
@ -115,6 +116,9 @@
: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
:insets {:top false}
:component selectors/preview-selectors}]
:tabs [{:name :segmented :tabs [{:name :segmented
:insets {:top false} :insets {:top false}
:component segmented/preview-segmented} :component segmented/preview-segmented}

View File

@ -0,0 +1,49 @@
(ns quo2.screens.selectors.selectors
(:require [quo.react-native :as rn]
[quo.previews.preview :as preview]
[reagent.core :as reagent]
[quo2.components.selectors.selectors :as quo2]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]))
(def descriptor [{:label "Disabled?"
:key :disabled?
:type :boolean}])
(defn cool-preview []
(let [state (reagent/atom {:disabled false})
checked? (reagent/atom false)]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
: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)}]
[text/text {:size :heading-2} "Radio"]
[quo2/radio {:container-style {:margin-top 0}
:disabled? (:disabled? @state)
:checked? @checked?
:on-change #(swap! checked? not)}]
[text/text {:size :heading-2} "Checkbox"]
[quo2/checkbox {:container-style {:margin-top 0}
:disabled? (:disabled? @state)
:checked? @checked?
:on-change #(swap! checked? not)}]
[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)}]]])))
(defn preview-selectors []
[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}]])