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