From 7f71c014601db80de14920c3eb03dbc060a6268d Mon Sep 17 00:00:00 2001
From: Jamie Caprani <jamiecaprani@gmail.com>
Date: Wed, 28 Sep 2022 16:19:32 +0100
Subject: [PATCH] feat: implement selectors for quo2 (#14078)

* feat: implement selectors for quo2
---
 resources/images/icons/check20@2x.png        | Bin 0 -> 464 bytes
 resources/images/icons/check20@3x.png        | Bin 0 -> 716 bytes
 src/quo2/components/selectors/selectors.cljs | 116 +++++++++++++++++++
 src/quo2/screens/main.cljs                   |   4 +
 src/quo2/screens/selectors/selectors.cljs    |  49 ++++++++
 5 files changed, 169 insertions(+)
 create mode 100644 resources/images/icons/check20@2x.png
 create mode 100644 resources/images/icons/check20@3x.png
 create mode 100644 src/quo2/components/selectors/selectors.cljs
 create mode 100644 src/quo2/screens/selectors/selectors.cljs

diff --git a/resources/images/icons/check20@2x.png b/resources/images/icons/check20@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..d82432d3bed5f5be3855a8a68643b7d3c7ab786f
GIT binary patch
literal 464
zcmV;>0WbcEP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0cA-<K~#7F?bJ<9
z!ax|t@n`t5l1OHW0TaA|>~se^-Ejl;1aJfJB;W~j=}tTW9HEJjxEzt_L>k9;l#k-V
zWS~tN^8S)0(<v$cOgjY_V~jDzk{~b3ZF?YzY}mdm8+*7$rVulVY8s%kIRAn<h68~Z
zWo79k12G8w+3;PBst&h^Zv{PBtWezJYDV}uOzUtIOQ4MtNZUC1J0pC9SzQr0iu@6;
z;zVUWr3`|qRxds_;JkwNrT=dyrjWS{#UX&HZyIN%U4ERGhYd>T(Xf{D3Yh81)B5#N
z*Fc;v&S`x8sYVajg3}5bq?@ZTI(d22#WJqkrl70P^&738d)SimJLt($Pe5FTZZM><
zJ|(rV7B}i30#1+E3iR83#w!R4tIem1bev)tXKu9`w-6EMKr7Ib{-4Mnb~QiL_yQ5y
zDA2NzS?}N#%S|EtJxtFuL6Xo$Y0w54*zX@0V~jDjbG`wFZE2&MFkNN<0000<MNUMn
GLSTY_nZnNi

literal 0
HcmV?d00001

diff --git a/resources/images/icons/check20@3x.png b/resources/images/icons/check20@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ff48e3fffd3b5d36c93595a2a810a44edd56ea3
GIT binary patch
literal 716
zcmV;-0yF)IP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk00009a7bBm001F4
z001F40Y#QEU;qFB0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0%1u+K~#7F?U+w)
z(?Ar)ze!x`MoKWdNC7FmK}iol)eRD>QWk8vK`Snhz=kC~K`Jg##098WvT5N2&7u{o
zAOs1F;%4|>!=J>daHY(|mUutO8Rxx`GoStJ_r-vsD2k#eilQirq9}@@_#=#N%C-TA
zlu=MB6l;JEce~fZ8iw)U4IEHN!6KG)EYRji-MHgQbm0WAjK%J9do~fi5FLcoUJ`$O
zk2x?X5KB=*hT8$mQ98$k9)IhfwlF6F3PKpw`FXx-5WJqvnv)TR+i*Y$1z;=|6k8Ut
z(R9|FSPVDg{>L61kb6l_i#5$u`m;sSawS&Cy`)PB<fI?)iQG)3Yy!JEbSQTGdpS~x
z8Wd~06uXv6F=QVP`)BXqn4GV$X;aywbd<5DasO-&9&mPrBf=i~lJ{iuD)VVB+P{p&
zB$lx!asRXfPdF3&1J!*FTYUH&W{KvB*|B5WI0?nt7e2)bb3diS3(sqwbG^HNqqdg-
z+e;YHEPR-lTgN%dYcv+emn`In#$p|wadCw=C~#*wWSSHuZRY;U*ggGeKa3yF9zu*o
z@&F59ZZDn0gWghD{lZ1x#dO7l{Q8jNU^%S4Wx4+Dwe{&ExHT48I5QrV=++iRb-8;Z
zoh!lajd*`wVk|z<SgbEftl-pX(fsrNEFG}KSFbQ#j77^wul*NJjfX5=%2UcTd$u2A
zk%e=oCFPkVT6*nwPsSn(FV<2-FQY8~U1!>lZ)1@=Vbs{C(Xg_~K61wUD;~a*c@=~;
y!&17=GQNlZ1@YQY6h%=KMNt$*Q4~d41U~`WFU1?=V3ITd0000<MNUMnLSTX{a64%L

literal 0
HcmV?d00001

diff --git a/src/quo2/components/selectors/selectors.cljs b/src/quo2/components/selectors/selectors.cljs
new file mode 100644
index 0000000000..2e6586b91c
--- /dev/null
+++ b/src/quo2/components/selectors/selectors.cljs
@@ -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}}]]])
diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs
index 1b49929224..346863328c 100644
--- a/src/quo2/screens/main.cljs
+++ b/src/quo2/screens/main.cljs
@@ -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.selectors :as selectors]
             [quo2.screens.switcher.switcher-cards :as switcher-cards]
             [quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab]
             [quo2.screens.tabs.account-selector :as account-selector]
@@ -115,6 +116,9 @@
    :switcher [{:name :switcher-cards
                :insets {:top false}
                :component switcher-cards/preview-switcher-cards}]
+   :selectors [{:name :selectors
+                :insets {:top false}
+                :component selectors/preview-selectors}]
    :tabs [{:name      :segmented
            :insets    {:top false}
            :component segmented/preview-segmented}
diff --git a/src/quo2/screens/selectors/selectors.cljs b/src/quo2/screens/selectors/selectors.cljs
new file mode 100644
index 0000000000..1678c03f7b
--- /dev/null
+++ b/src/quo2/screens/selectors/selectors.cljs
@@ -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}]])