Skip to content

Commit

Permalink
tabs component
Browse files Browse the repository at this point in the history 
Signed-off-by: andrey <motor4ik@gmail.com>
  • Loading branch information
@flexsurfer
flexsurfer committed Mar 11, 2022
1 parent a0254c0 commit 9e126a7
Show file tree
Hide file tree
Showing 8 changed files with 232 additions and 3 deletions.
1 change: 0 additions & 1 deletion src/quo2/components/button.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
35 changes: 35 additions & 0 deletions src/quo2/components/segmented_control.cljs
View file
Original file line number Diff line number Diff line change
@@ -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]])]))))
75 changes: 75 additions & 0 deletions src/quo2/components/tab.cljs
View file
Original file line number Diff line number Diff line change
@@ -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)]]])))
21 changes: 21 additions & 0 deletions src/quo2/components/tabs.cljs
View file
Original file line number Diff line number Diff line change
@@ -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]])]))))
1 change: 0 additions & 1 deletion src/quo2/components/text.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))))
10 changes: 9 additions & 1 deletion src/quo2/screens/main.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,22 @@
[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
:insets {:top false}
: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
Expand Down
48 changes: 48 additions & 0 deletions src/quo2/screens/segmented.cljs
View file
Original file line number Diff line number Diff line change
@@ -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}]])
44 changes: 44 additions & 0 deletions src/quo2/screens/tabs.cljs
View file
Original file line number Diff line number Diff line change
@@ -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}]])

0 comments on commit 9e126a7

Please sign in to comment.