From 6a32006e6abae5aee76c419b7a568845f434ec18 Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Tue, 11 Jun 2024 19:13:12 +0530 Subject: [PATCH] Drawer/Bottom Actions - context-tag-props (#20388) --- .../drawers/bottom_actions/view.cljs | 19 +++-- .../preview/quo/drawers/bottom_actions.cljs | 71 ++++++++++--------- 2 files changed, 51 insertions(+), 39 deletions(-) diff --git a/src/quo/components/drawers/bottom_actions/view.cljs b/src/quo/components/drawers/bottom_actions/view.cljs index fdde7f26c9..c731091050 100644 --- a/src/quo/components/drawers/bottom_actions/view.cljs +++ b/src/quo/components/drawers/bottom_actions/view.cljs @@ -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) diff --git a/src/status_im/contexts/preview/quo/drawers/bottom_actions.cljs b/src/status_im/contexts/preview/quo/drawers/bottom_actions.cljs index f4e48cae07..882471bb67 100644 --- a/src/status_im/contexts/preview/quo/drawers/bottom_actions.cljs +++ b/src/status_im/contexts/preview/quo/drawers/bottom_actions.cljs @@ -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]]))