tabs component

Signed-off-by: andrey <motor4ik@gmail.com>
This commit is contained in:
andrey 2022-03-11 12:51:40 +01:00
parent a0254c0fa8
commit 9e126a7399
No known key found for this signature in database
GPG Key ID: 89B67245FD2F0272
8 changed files with 232 additions and 3 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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