Drawer/Bottom Actions - context-tag-props (#20388)

This commit is contained in:
Ajay Sivan 2024-06-11 19:13:12 +05:30 committed by GitHub
parent b119860b81
commit 6a32006e6a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 51 additions and 39 deletions

View File

@ -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)

View File

@ -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]]))