From 9e126a7399efd502bbb01c3dddfa9bb84984033c Mon Sep 17 00:00:00 2001 From: andrey Date: Fri, 11 Mar 2022 12:51:40 +0100 Subject: [PATCH] tabs component Signed-off-by: andrey --- src/quo2/components/button.cljs | 1 - src/quo2/components/segmented_control.cljs | 35 ++++++++++ src/quo2/components/tab.cljs | 75 ++++++++++++++++++++++ src/quo2/components/tabs.cljs | 21 ++++++ src/quo2/components/text.cljs | 1 - src/quo2/screens/main.cljs | 10 ++- src/quo2/screens/segmented.cljs | 48 ++++++++++++++ src/quo2/screens/tabs.cljs | 44 +++++++++++++ 8 files changed, 232 insertions(+), 3 deletions(-) create mode 100644 src/quo2/components/segmented_control.cljs create mode 100644 src/quo2/components/tab.cljs create mode 100644 src/quo2/components/tabs.cljs create mode 100644 src/quo2/screens/segmented.cljs create mode 100644 src/quo2/screens/tabs.cljs diff --git a/src/quo2/components/button.cljs b/src/quo2/components/button.cljs index a24ece47c2..f96284ad1d 100644 --- a/src/quo2/components/button.cljs +++ b/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 diff --git a/src/quo2/components/segmented_control.cljs b/src/quo2/components/segmented_control.cljs new file mode 100644 index 0000000000..5ceffdd017 --- /dev/null +++ b/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]])])))) diff --git a/src/quo2/components/tab.cljs b/src/quo2/components/tab.cljs new file mode 100644 index 0000000000..8026c9d0b1 --- /dev/null +++ b/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)]]]))) \ No newline at end of file diff --git a/src/quo2/components/tabs.cljs b/src/quo2/components/tabs.cljs new file mode 100644 index 0000000000..11abed7e82 --- /dev/null +++ b/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]])])))) \ No newline at end of file diff --git a/src/quo2/components/text.cljs b/src/quo2/components/text.cljs index 60fbc440a6..a094cf4c9b 100644 --- a/src/quo2/components/text.cljs +++ b/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)))) \ No newline at end of file diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index bcf021cb15..e39dadc60d 100644 --- a/src/quo2/screens/main.cljs +++ b/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 diff --git a/src/quo2/screens/segmented.cljs b/src/quo2/screens/segmented.cljs new file mode 100644 index 0000000000..3c8b95aa59 --- /dev/null +++ b/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}]]) \ No newline at end of file diff --git a/src/quo2/screens/tabs.cljs b/src/quo2/screens/tabs.cljs new file mode 100644 index 0000000000..723c0c1fcf --- /dev/null +++ b/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}]]) \ No newline at end of file