status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-01-14 02:35:54 +00:00
Code Issues Projects Releases Wiki Activity

quo2 counter component (#13182)

Browse Source
This commit is contained in:
Parvesh Monu 2022-03-25 01:31:13 +05:30 committed by GitHub
parent e4caa8f61a
commit b1dc1d871f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 105 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/quo2/components/counter.cljs Normal file
View File

@ -0,0 +1,57 @@
(ns quo2.components.counter
(:require [quo.theme :as theme]
[quo.react-native :as rn]
[quo2.components.text :as text]
[quo2.foundations.colors :as colors]))
(def themes
{:light {:default colors/primary-50
:secondary colors/black-opa-5
:grey colors/neutral-30}
:dark {:default colors/primary-60
:secondary colors/white-opa-10
:grey colors/neutral-70}})
(defn get-color [key]
(get-in themes [(theme/get-theme) key]))
(defn counter
"type: default, secondary, grey
outline: true, false
value: integer"
[{:keys [type outline]} value]
(let [type (or type :default)
text-color (if (or
(= (theme/get-theme) :dark)
(and
(= type :default)
(not outline)))
colors/white
colors/black)
value (if (integer? value)
value
(js/parseInt value))
label (if (> value 99)
"99+"
(str value))
width (case (count label)
1 16
2 20
28)]
[rn/view {:style (cond-> {:align-items :center
:justify-content :center
:border-radius 6
:width width
:height 16}
outline
(merge {:border-width 1
:border-color (get-color (or type :default))})
(not outline)
(assoc :background-color (get-color (or type :default)))
(> value 99)
(assoc :padding-left 0.5))}
[text/text {:weight :medium
:size :label
:style {:color text-color}} label]]))

4
src/quo2/foundations/typography.cljs
View File

@ -18,7 +18,7 @@
(def label {:font-size 11
:line-height 15.62
:letter-spacing 0.5})
:letter-spacing -0.055})
(def font-regular {:font-family "Inter-Regular"}) ; 400
@ -28,4 +28,4 @@
(def font-bold {:font-family "Inter-Bold"}) ; 700
(def monospace {:font-family "InterStatus-Regular"})
(def monospace {:font-family "InterStatus-Regular"})

40
src/quo2/screens/counter.cljs Normal file
View File

@ -0,0 +1,40 @@
(ns quo2.screens.counter
(:require [quo.react-native :as rn]
[quo.previews.preview :as preview]
[reagent.core :as reagent]
[quo2.components.counter :as quo2]
[quo.design-system.colors :as colors]))
(def descriptor [{:label "Type:"
:key :type
:type :select
:options [{:key :default
:value "Default"}
{:key :secondary
:value "Secondary"}
{:key :grey
:value "Gray"}]}
{:label "Outline?:"
:key :outline
:type :boolean}
{:label "Value"
:key :value
:type :text}])
(defn cool-preview []
(let [state (reagent/atom {:value 5 :type :default})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/counter @state (:value @state)]]])))
(defn preview-counter []
[rn/view {:background-color (:ui-background @colors/theme)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])

8
src/quo2/screens/main.cljs
View File

@ -6,6 +6,7 @@
[quo2.screens.button :as button]
[quo2.screens.text :as text]
[quo2.screens.tabs :as tabs]
[quo2.screens.counter :as counter]
[quo2.screens.segmented :as segmented]
[quo.core :as quo]))
@ -20,7 +21,10 @@
:component tabs/preview-tabs}
{:name :quo2-segmented
:insets {:top false}
:component segmented/preview-segmented}])
:component segmented/preview-segmented}
{:name :quo2-counter
:insets {:top false}
:component counter/preview-counter}])
(defn theme-switcher []
[rn/view {:style {:flex-direction :row
@ -60,4 +64,4 @@
(def main-screens [{:name :quo2-preview
:insets {:top false}
:component main-screen}])
:component main-screen}])