status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

button component

This commit is contained in:
andrey 2022-03-10 15:27:03 +01:00
parent 72a0df6332
commit a0254c0fa8
No known key found for this signature in database
GPG Key ID: 89B67245FD2F0272
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/quo2/components/button.cljs
View File

@ -61,20 +61,21 @@
:pressed colors/danger-40
:disabled colors/danger-50}}}})
(defn style-container [type size disabled background-color border-color icon]
(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
:flex-direction :row
:flex-direction (if above :column :row)
:border-radius (if (and icon (#{:primary :secondary :danger} type))
24
(case size
56 12
40 12
32 10
24 8))
:background-color background-color
:padding-horizontal (if icon 0 (case size 40 16 32 12 24 8))}
:padding-horizontal (if icon 0 (case size 56 16 40 16 32 12 24 8))}
(when icon
{:width size})
(when border-color
@ -97,7 +98,7 @@
[button {:icon true} :main-icons/close-circle]"
[_ _]
(let [pressed (reagent/atom false)]
(fn [{:keys [on-press disabled type size before after
(fn [{:keys [on-press disabled type size before after above
on-long-press accessibility-label icon]
:or {type :primary
size 40}}
@ -118,7 +119,10 @@
{:on-press-out (fn []
(reset! pressed nil))})
[rn/view {:style (style-container type size disabled (get background-color state) (get border-color state) icon)}
[rn/view {:style (style-container type size disabled (get background-color state) (get border-color state) icon above)}
(when above
[rn/view
[icons/icon above {:color icon-color}]])
(when before
[rn/view
[icons/icon before {:color icon-color}]])
@ -128,7 +132,7 @@
[icons/icon children {:color icon-color}]
(string? children)
[text/text (merge {:size (when (= size 24) :paragraph-2)
[text/text (merge {:size (when (#{56 24} size) :paragraph-2)
:weight :medium
:number-of-lines 1}
label)

10
src/quo2/screens/button.cljs
View File

@ -23,7 +23,9 @@
{:label "Size:"
:key :size
:type :select
:options [{:key 40
:options [{:key 56
:value "56"}
{:key 40
:value "40"}
{:key 32
:value "32"}
@ -32,6 +34,9 @@
{:label "Icon:"
:key :icon
:type :boolean}
{:label "Above icon:"
:key :above
:type :boolean}
{:label "After icon:"
:key :after
:type :boolean}
@ -51,6 +56,7 @@
label (reagent/cursor state [:label])
before (reagent/cursor state [:before])
after (reagent/cursor state [:after])
above (reagent/cursor state [:above])
icon (reagent/cursor state [:icon])]
(fn []
[rn/view {:margin-bottom 50
@ -63,6 +69,8 @@
[quo2/button (merge (dissoc @state
:theme :before :after)
{:on-press #(println "Hello world!")}
(when @above
{:above :main-icons/close-circle})
(when @before
{:before :main-icons/back})
(when @after