tabs component

Signed-off-by: andrey <motor4ik@gmail.com>

src/quo2/components/button.cljs

@@ -62,7 +62,6 @@
                                                     :disabled colors/danger-50}}}})
 
 (defn style-container [type size disabled background-color border-color icon above]
-  (println size disabled background-color)
   (merge {:height             size
           :align-items        :center
           :justify-content    :center

src/quo2/components/segmented_control.cljs

@@ -0,0 +1,35 @@
+(ns quo2.components.segmented-control
+  (:require [reagent.core :as reagent]
+            [quo.react-native :as rn]
+            [quo2.components.tab :as tab]
+            [quo2.foundations.colors :as colors]
+            [quo.theme :as theme]))
+
+(def themes {:light {:background-color colors/neutral-20}
+             :dark  {:background-color colors/neutral-80}})
+
+(defn segmented-control [{:keys [default-active on-change]}]
+  (let [active-tab-id (reagent/atom default-active)]
+    (fn [{:keys [data size]}]
+      (let [active-id @active-tab-id]
+        [rn/view {:flex-direction   :row
+                  :background-color (get-in themes [(theme/get-theme) :background-color])
+                  :border-radius    (case size
+                                      32 10
+                                      28 8
+                                      24 8
+                                      20 6)
+                  :padding          2}
+         (for [[indx {:keys [label id]}] (map-indexed vector data)]
+           ^{:key id}
+           [rn/view {:margin-left (if (= 0 indx) 0 2)
+                     :flex 1}
+            [tab/tab
+             {:id        id
+              :segmented true
+              :size      size
+              :active    (= id active-id)
+              :on-press  #(do (reset! active-tab-id %)
+                              (when on-change
+                                (on-change %)))}
+             label]])]))))

src/quo2/components/tab.cljs

@@ -0,0 +1,75 @@
+(ns quo2.components.tab
+  (:require [quo2.foundations.colors :as colors]
+            [quo.react-native :as rn]
+            [quo.theme :as theme]
+            [status-im.ui.components.icons.icons :as icons]
+            [quo2.components.text :as text]))
+
+(def themes {:light {:default  {:background-color colors/neutral-20
+                                :icon-color       colors/neutral-50
+                                :label            {:style {:color colors/black}}}
+                     :active   {:background-color colors/neutral-50
+                                :icon-color       colors/white
+                                :label            {:style {:color colors/white}}}
+                     :disabled {:background-color colors/neutral-20
+                                :icon-color       colors/neutral-50
+                                :label            {:style {:color colors/black}}}}
+             :dark  {:default  {:background-color colors/neutral-80
+                                :icon-color       colors/neutral-40
+                                :label            {:style {:color colors/white}}}
+                     :active   {:background-color colors/neutral-60
+                                :icon-color       colors/white
+                                :label            {:style {:color colors/white}}}
+                     :disabled {:background-color colors/neutral-80
+                                :icon-color       colors/neutral-40
+                                :label            {:style {:color colors/white}}}}})
+
+(defn style-container [size disabled background-color]
+  (merge {:height             size
+          :align-items        :center
+          :justify-content    :center
+          :flex-direction     :row
+          :border-radius      (case size
+                                32 10
+                                28 8
+                                24 8
+                                20 6)
+          :background-color   background-color
+          :padding-horizontal (case size 32 12 28 12 24 8 20 8)}
+         (when disabled
+           {:opacity 0.3})))
+
+(defn tab
+  "[tab opts \"label\"]
+   opts
+   {:type :primary/:secondary/:grey/:outline/:ghost/:danger
+    :size 40/32/24
+    :icon true/false
+    :before :icon-keyword
+    :after :icon-keyword}"
+  [_ _]
+  (fn [{:keys [id on-press disabled size before active accessibility-label]
+        :or   {size 32}}
+       children]
+    (let [state (cond disabled :disabled active :active :else :default)
+          {:keys [icon-color background-color label]}
+          (get-in themes [(theme/get-theme) state])]
+      [rn/touchable-without-feedback (merge {:disabled            disabled
+                                             :accessibility-label accessibility-label}
+                                            (when on-press
+                                              {:on-press (fn []
+                                                           (on-press id))}))
+       [rn/view {:style (style-container size disabled background-color)}
+        (when before
+          [rn/view
+           [icons/icon before {:color icon-color}]])
+        [rn/view
+         (cond
+           (string? children)
+           [text/text (merge {:size            (case size 24 :paragraph-2 20 :label nil)
+                              :weight          :medium
+                              :number-of-lines 1}
+                             label)
+            children]
+           (vector? children)
+           children)]]])))

src/quo2/components/tabs.cljs

@@ -0,0 +1,21 @@
+(ns quo2.components.tabs
+  (:require [reagent.core :as reagent]
+            [quo.react-native :as rn]
+            [quo2.components.tab :as tab]))
+
+(defn tabs [{:keys [default-active on-change]}]
+  (let [active-tab-id (reagent/atom default-active)]
+    (fn [{:keys [data size]}]
+      (let [active-id @active-tab-id]
+        [rn/view {:flex-direction :row}
+         (for [{:keys [label id]} data]
+           ^{:key id}
+           [rn/view {:margin-right (if (= size 32) 12 8)}
+            [tab/tab
+             {:id id
+              :size size
+              :active (= id active-id)
+              :on-press #(do (reset! active-tab-id %)
+                             (when on-change
+                               (on-change %)))}
+             label]])]))))

src/quo2/components/text.cljs

@@ -29,6 +29,5 @@
   (let [this (reagent/current-component)
         props (reagent/props this)
         style (text-style props)]
-    (println "style " style)
     (into [rn/text {:style style}]
           (reagent/children this))))

src/quo2/screens/main.cljs

@@ -5,6 +5,8 @@
             [re-frame.core :as re-frame]
             [quo2.screens.button :as button]
             [quo2.screens.text :as text]
+            [quo2.screens.tabs :as tabs]
+            [quo2.screens.segmented :as segmented]
             [quo.core :as quo]))
 
 (def screens [{:name      :quo2-texts
@@ -12,7 +14,13 @@
                :component text/preview-text}
               {:name      :quo2-button
                :insets    {:top false}
-               :component button/preview-button}])
+               :component button/preview-button}
+              {:name      :quo2-tabs
+               :insets    {:top false}
+               :component tabs/preview-tabs}
+              {:name      :quo2-segmented
+               :insets    {:top false}
+               :component segmented/preview-segmented}])
 
 (defn theme-switcher []
   [rn/view {:style {:flex-direction   :row

src/quo2/screens/segmented.cljs

@@ -0,0 +1,48 @@
+(ns quo2.screens.segmented
+  (:require [quo.react-native :as rn]
+            [quo.design-system.colors :as colors]
+            [quo.previews.preview :as preview]
+            [quo2.components.segmented-control :as quo2]
+            [reagent.core :as reagent]))
+
+(def descriptor [{:label   "Size:"
+                  :key     :size
+                  :type    :select
+                  :options [{:key   32
+                             :value "32"}
+                            {:key   28
+                             :value "28"}
+                            {:key   24
+                             :value "24"}
+                            {:key   20
+                             :value "20"}]}])
+
+(defn cool-preview []
+  (let [state  (reagent/atom {:size  32})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [rn/view {:flex 1}
+        [preview/customizer state descriptor]]
+       [rn/view {:padding-vertical 60}
+        [quo2/segmented-control (merge @state
+                                       {:default-active 1
+                                        :data [{:id 1 :label "Tab 1"}
+                                               {:id 2 :label "Tab 2"}
+                                               {:id 3 :label "Tab 3"}
+                                               {:id 4 :label "Tab 4"}]
+                                        :on-change #(println "Active tab" %)})]]
+       [rn/view {:padding-vertical 60}
+        [quo2/segmented-control (merge @state
+                                       {:default-active 1
+                                        :data [{:id 1 :label "Tab 1"}
+                                               {:id 2 :label "Tab 2"}]
+                                        :on-change #(println "Active tab" %)})]]])))
+
+(defn preview-segmented []
+  [rn/view {:background-color (:ui-background @colors/theme)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])

src/quo2/screens/tabs.cljs

@@ -0,0 +1,44 @@
+(ns quo2.screens.tabs
+  (:require [quo.react-native :as rn]
+            [quo.design-system.colors :as colors]
+            [quo.previews.preview :as preview]
+            [quo2.components.tabs :as quo2]
+            [reagent.core :as reagent]))
+
+(def descriptor [{:label   "Size:"
+                  :key     :size
+                  :type    :select
+                  :options [{:key   32
+                             :value "32"}
+                            {:key   28
+                             :value "28"}
+                            {:key   24
+                             :value "24"}
+                            {:key   20
+                             :value "20"}]}])
+
+(defn cool-preview []
+  (let [state  (reagent/atom {:size  32})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [rn/view {:flex 1}
+        [preview/customizer state descriptor]]
+       [rn/view {:padding-vertical 60
+                 :flex-direction   :row
+                 :justify-content  :center}
+        [quo2/tabs (merge @state
+                          {:default-active 1
+                           :data [{:id 1 :label "Tab 1"}
+                                  {:id 2 :label "Tab 2"}
+                                  {:id 3 :label "Tab 3"}
+                                  {:id 4 :label "Tab 4"}]
+                           :on-change #(println "Active tab" %)})]]])))
+
+(defn preview-tabs []
+  [rn/view {:background-color (:ui-background @colors/theme)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])