/
information_box.cljs
106 lines (100 loc) · 5.28 KB
/
information_box.cljs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
(ns quo2.components.information-box
(:require [quo.theme :as theme]
[quo.react-native :as rn]
[reagent.core :as reagent]
[clojure.string :as string]
[quo2.foundations.colors :as colors]
[quo2.components.icon :as quo2.icons]
[quo2.components.button :as quo2.button]
[status-im.utils.handlers :refer [<sub]]
[quo2.components.info-message :as info-message]
[status-im.async-storage.core :as async-storage]))
(def themes
{:light {:default {:bg colors/white
:border colors/neutral-20
:icon colors/neutral-50
:text colors/black}
:informative {:bg colors/primary-50-opa-5
:border colors/primary-50-opa-10
:icon colors/primary-50
:text colors/black}
:error {:bg colors/danger-50-opa-5
:border colors/danger-50-opa-10
:icon colors/danger-50
:text colors/danger-50}
:close-button colors/black}
:dark {:default {:bg colors/neutral-90
:border colors/neutral-70
:icon colors/neutral-40
:text colors/white}
:informative {:bg colors/primary-50-opa-5
:border colors/primary-50-opa-10
:icon colors/white
:text colors/white}
:error {:bg colors/danger-50-opa-5
:border colors/danger-50-opa-10
:icon colors/danger-50
:text colors/danger-50}
:close-button colors/white}})
(defn get-color [key]
(get-in themes [(theme/get-theme) key]))
(defn get-color-by-type [type key]
(get-in themes [(theme/get-theme) type key]))
(defn id-hash [id public-key global?]
(if global?
(hash id)
(hash (str public-key id))))
(defn close-information-box [id public-key global? closed? on-close]
(reset! closed? true)
(async-storage/set-item! (id-hash id public-key global?) true)
(when on-close (on-close)))
(defn information-box
"[information-box opts \"message\"]
opts
{:type :default/:informative/:error
:closable? true/false ;; allow information box to be closed?
:id :information-box-id ;; unique id (required for closable? information box)
:global? true/ false ;; close information box across all profiles
:icon :main-icons/info ;; information box icon
:style style
:button-label \"PressMe\" ;; add action button with label
:on-button-press action ;; (required for information box with button-label)
:on-close on-close ;; (optional on-close call)"
[{:keys [closable? id global?]} _]
(let [closed? (reagent/atom true)
public-key (when (and closable? (not global?)) (<sub [:multiaccount/public-key]))]
(when closable?
(async-storage/get-item (id-hash id public-key global?) #(reset! closed? %)))
(fn [{:keys [type closable? id global? icon style button-label on-button-press on-close]} message]
(when-not (and closable? @closed?)
(let [background-color (get-color-by-type type :bg)
border-color (get-color-by-type type :border)
icon-color (get-color-by-type type :icon)
text-color (get-color-by-type type :text)
include-button? (not (string/blank? button-label))]
[rn/view {:style (merge {:background-color background-color
:border-color border-color
:border-width 1
:border-radius 12
:padding-vertical (if include-button? 10 11)
:padding-horizontal 16} style)}
[rn/view {:style {:flex-direction :row
:align-self :flex-start}}
[info-message/info-message {:size :default
:icon icon
:text-color text-color
:icon-color icon-color} message]
(when closable?
[rn/touchable-opacity
{:on-press #(close-information-box id public-key global? closed? on-close)}
[quo2.icons/icon :main-icons2/close {:size 12
:color (get-color :close-button)
:container-style {:margin-top 3
:margin-left 8}}]])]
(when include-button?
[quo2.button/button {:type :primary
:size 24
:on-press on-button-press
:style {:margin-left 20
:margin-top 8
:align-self :flex-start}} button-label])])))))