feat: implement selectors for quo2 (#14078)

* feat: implement selectors for quo2

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}}]]])

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}

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}]])