Drawer/Bottom Actions - context-tag-props (#20388)
This commit is contained in:
parent
b119860b81
commit
6a32006e6a
|
@ -4,6 +4,7 @@
|
||||||
[quo.components.drawers.bottom-actions.style :as style]
|
[quo.components.drawers.bottom-actions.style :as style]
|
||||||
[quo.components.icon :as icon]
|
[quo.components.icon :as icon]
|
||||||
[quo.components.markdown.text :as text]
|
[quo.components.markdown.text :as text]
|
||||||
|
[quo.components.tags.context-tag.schema :as context-tag.schema]
|
||||||
[quo.components.tags.context-tag.view :as context-tag]
|
[quo.components.tags.context-tag.view :as context-tag]
|
||||||
[quo.foundations.colors :as colors]
|
[quo.foundations.colors :as colors]
|
||||||
[quo.theme :as quo.theme]
|
[quo.theme :as quo.theme]
|
||||||
|
@ -22,6 +23,7 @@
|
||||||
[:description-top-text {:optional true} [:maybe :string]]
|
[:description-top-text {:optional true} [:maybe :string]]
|
||||||
[:error-message {:optional true} [:maybe :string]]
|
[:error-message {:optional true} [:maybe :string]]
|
||||||
[:role {:optional true} [:maybe [:enum :admin :member :token-master :owner]]]
|
[:role {:optional true} [:maybe [:enum :admin :member :token-master :owner]]]
|
||||||
|
[:context-tag-props {:optional true} [:maybe context-tag.schema/?schema]]
|
||||||
[:button-one-label {:optional true} [:maybe :string]]
|
[:button-one-label {:optional true} [:maybe :string]]
|
||||||
[:button-two-label {:optional true} [:maybe :string]]
|
[:button-two-label {:optional true} [:maybe :string]]
|
||||||
[:button-one-props {:optional true} [:maybe :map]]
|
[:button-one-props {:optional true} [:maybe :map]]
|
||||||
|
@ -39,7 +41,8 @@
|
||||||
|
|
||||||
(defn- view-internal
|
(defn- view-internal
|
||||||
[{:keys [actions description description-text description-top-text error-message role button-one-label
|
[{:keys [actions description description-text description-top-text error-message role button-one-label
|
||||||
button-two-label blur? button-one-props button-two-props scroll? container-style]}]
|
button-two-label blur? button-one-props button-two-props scroll? container-style
|
||||||
|
context-tag-props]}]
|
||||||
(let [theme (quo.theme/use-theme)]
|
(let [theme (quo.theme/use-theme)]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style (merge (style/container scroll? blur? theme) container-style)}
|
{:style (merge (style/container scroll? blur? theme) container-style)}
|
||||||
|
@ -54,18 +57,20 @@
|
||||||
:style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}}
|
:style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}}
|
||||||
error-message]])
|
error-message]])
|
||||||
|
|
||||||
(when (and (= description :top) role)
|
(when (and (= description :top) (or role context-tag-props))
|
||||||
[rn/view {:style style/description-top}
|
[rn/view {:style style/description-top}
|
||||||
[text/text
|
[text/text
|
||||||
{:size :paragraph-2
|
{:size :paragraph-2
|
||||||
:style (style/description-top-text scroll? blur? theme)}
|
:style (style/description-top-text scroll? blur? theme)}
|
||||||
(or description-top-text (i18n/label :t/eligible-to-join-as))]
|
(or description-top-text (i18n/label :t/eligible-to-join-as))]
|
||||||
[context-tag/view
|
[context-tag/view
|
||||||
{:type :icon
|
(if role
|
||||||
:size 24
|
{:type :icon
|
||||||
:icon (role role-icon)
|
:size 24
|
||||||
:blur? blur?
|
:icon (role role-icon)
|
||||||
:context (i18n/label (keyword "t" role))}]])
|
:blur? blur?
|
||||||
|
:context (i18n/label (keyword "t" role))}
|
||||||
|
context-tag-props)]])
|
||||||
|
|
||||||
[rn/view {:style style/buttons-container}
|
[rn/view {:style style/buttons-container}
|
||||||
(when (= actions :two-actions)
|
(when (= actions :two-actions)
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
(ns status-im.contexts.preview.quo.drawers.bottom-actions
|
(ns status-im.contexts.preview.quo.drawers.bottom-actions
|
||||||
(:require
|
(:require
|
||||||
[quo.core :as quo]
|
[quo.core :as quo]
|
||||||
[reagent.core :as reagent]
|
[react-native.core :as rn]
|
||||||
[status-im.contexts.preview.quo.preview :as preview]))
|
[status-im.contexts.preview.quo.preview :as preview]))
|
||||||
|
|
||||||
(def button-two "Cancel")
|
(def button-two "Cancel")
|
||||||
|
@ -58,7 +58,9 @@
|
||||||
(def role-descriptor
|
(def role-descriptor
|
||||||
{:key :role
|
{:key :role
|
||||||
:type :select
|
:type :select
|
||||||
:options [{:key :owner}
|
:options [{:key nil
|
||||||
|
:value :none}
|
||||||
|
{:key :owner}
|
||||||
{:key :token-master}
|
{:key :token-master}
|
||||||
{:key :admin}
|
{:key :admin}
|
||||||
{:key :member}]})
|
{:key :member}]})
|
||||||
|
@ -77,35 +79,40 @@
|
||||||
|
|
||||||
(defn view
|
(defn view
|
||||||
[]
|
[]
|
||||||
(let [state (reagent/atom {:actions :two-actions
|
(let [[state set-state] (rn/use-state
|
||||||
:description :bottom
|
{:actions :two-actions
|
||||||
:description-text description
|
:description :bottom
|
||||||
:description-top-text "Eligible to join as"
|
:description-text description
|
||||||
:error-message "Error message"
|
:description-top-text "Eligible to join as"
|
||||||
:button-one-label button-one
|
:error-message "Error message"
|
||||||
:button-two-label button-two
|
:button-one-label button-one
|
||||||
:button-one-props {:on-press (button-press 1)
|
:button-two-label button-two
|
||||||
:type :primary}
|
:button-one-props {:on-press (button-press 1)
|
||||||
:button-two-props {:on-press (button-press 2)
|
:type :primary}
|
||||||
:type :grey}
|
:button-two-props {:on-press (button-press 2)
|
||||||
:blur? false
|
:type :grey}
|
||||||
:role :owner
|
:blur? false
|
||||||
:scroll? false})]
|
:role nil
|
||||||
(fn []
|
:context-tag-props {:size 24
|
||||||
[preview/preview-container
|
:type :token
|
||||||
{:state state
|
:token "USDT"
|
||||||
:descriptor (cond-> descriptor
|
:amount "99.97"}
|
||||||
(= (:description @state) :top)
|
:scroll? false})]
|
||||||
(conj role-descriptor description-top-descriptor)
|
[preview/preview-container
|
||||||
|
{:state state
|
||||||
|
:set-state set-state
|
||||||
|
:descriptor (cond-> descriptor
|
||||||
|
(= (:description state) :top)
|
||||||
|
(conj role-descriptor description-top-descriptor)
|
||||||
|
|
||||||
(= (:description @state) :bottom)
|
(= (:description state) :bottom)
|
||||||
(conj description-descriptor)
|
(conj description-descriptor)
|
||||||
|
|
||||||
(= (:description @state) :top-error)
|
(= (:description state) :top-error)
|
||||||
(conj error-descriptor))
|
(conj error-descriptor))
|
||||||
:blur? (:blur? @state)
|
:blur? (:blur? state)
|
||||||
:show-blur-background? true
|
:show-blur-background? true
|
||||||
:blur-dark-only? true
|
:blur-dark-only? true
|
||||||
:component-container-style {:margin-top 40
|
:component-container-style {:margin-top 40
|
||||||
:padding-horizontal 0}}
|
:padding-horizontal 0}}
|
||||||
[quo/bottom-actions @state]])))
|
[quo/bottom-actions state]]))
|
||||||
|
|
Loading…
Reference in New Issue