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

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

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