tabs component
Signed-off-by: andrey <motor4ik@gmail.com>
This commit is contained in:
andrey
parent
a0254c0fa8
commit
9e126a7399
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]])]))))
|
||||
|
|
@ -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)]]])))
|
||||
|
|
@ -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]])]))))
|
||||
|
|
@ -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))))
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}]])
|
||||
|
|
@ -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}]])
|
||||
Loading…
Reference in New Issue