From 20b256b0d056aaf11c3d73de9e1cc6fc71180b1d Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Fri, 12 Jul 2024 16:45:37 +0530 Subject: [PATCH] Settings/Data Item - editable variant (#20656) --- .../settings/data_item/component_spec.cljs | 17 +++++++- .../components/settings/data_item/style.cljs | 3 +- .../components/settings/data_item/view.cljs | 43 +++++++++++++++++-- .../preview/quo/settings/data_item.cljs | 3 +- .../wallet/account/tabs/about/view.cljs | 2 +- 5 files changed, 61 insertions(+), 7 deletions(-) diff --git a/src/quo/components/settings/data_item/component_spec.cljs b/src/quo/components/settings/data_item/component_spec.cljs index 600f4f0896..aa0857d619 100644 --- a/src/quo/components/settings/data_item/component_spec.cljs +++ b/src/quo/components/settings/data_item/component_spec.cljs @@ -159,4 +159,19 @@ :icon :i/placeholder :emoji "🎮" :customization-color :yellow}]) - (h/is-truthy (h/query-by-label-text :account-emoji)))) + (h/is-truthy (h/query-by-label-text :account-emoji))) + + (h/test "edit icon is visible when subtitle type is editable" + (h/render [quo/data-item + {:on-press (h/mock-fn) + :blur? false + :card? true + :status :default + :size :default + :title "Label" + :subtitle "Subtitle" + :subtitle-type :editable + :icon :i/placeholder + :emoji "🎮" + :customization-color :yellow}]) + (h/is-truthy (h/query-by-label-text :edit-icon)))) diff --git a/src/quo/components/settings/data_item/style.cljs b/src/quo/components/settings/data_item/style.cljs index dd82e6a0ff..007f1b785d 100644 --- a/src/quo/components/settings/data_item/style.cljs +++ b/src/quo/components/settings/data_item/style.cljs @@ -54,6 +54,7 @@ (def subtitle-container {:flex-direction :row + :align-items :center :margin-bottom 1}) (def right-container @@ -62,7 +63,7 @@ (defn subtitle-icon-container [subtitle-type] - {:margin-right (when (not= :default subtitle-type) 4) + {:margin-right (when-not (contains? #{:editable :default} subtitle-type) 4) :justify-content :center}) (defn title diff --git a/src/quo/components/settings/data_item/view.cljs b/src/quo/components/settings/data_item/view.cljs index e99104498a..712a577d48 100644 --- a/src/quo/components/settings/data_item/view.cljs +++ b/src/quo/components/settings/data_item/view.cljs @@ -7,7 +7,8 @@ [quo.components.settings.data-item.style :as style] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] - [react-native.core :as rn])) + [react-native.core :as rn] + [schema.core :as schema])) (defn- left-loading [{:keys [size blur?]}] @@ -40,7 +41,17 @@ {:weight :medium :size :paragraph-2 :style (style/description blur? theme)} - subtitle]])) + subtitle] + (when (= subtitle-type :editable) + [icons/icon :i/edit + {:accessibility-label :edit-icon + :size 12 + :container-style {:margin-left 2} + :color (if blur? + colors/neutral-40 + (colors/theme-colors colors/neutral-50 + colors/neutral-40 + theme))}])])) (defn- left-title [{:keys [title blur?]}] @@ -100,7 +111,31 @@ :color icon-color :size 20}]])])) -(defn view + +(def ?schema + [:=> + [:catn + [:props + [:map {:closed true} + [:blur? {:optional true} [:maybe :boolean]] + [:card? {:optional true} [:maybe :boolean]] + [:right-icon {:optional true} [:maybe :keyword]] + [:right-content {:optional true} [:maybe :map]] + [:status {:optional true} [:maybe [:enum :default :loading]]] + [:subtitle-type {:optional true} [:maybe [:enum :default :icon :network :account :editable]]] + [:size {:optional true} [:maybe [:enum :default :small :large]]] + [:title :string] + [:subtitle {:optional true} [:maybe :string]] + [:custom-subtitle {:optional true} [:maybe fn?]] + [:icon {:optional true} [:maybe :keyword]] + [:emoji {:optional true} [:maybe :string]] + [:customization-color {:optional true} [:maybe :schema.common/customization-color]] + [:network-image {:optional true} [:maybe :schema.common/image-source]] + [:on-press {:optional true} [:maybe fn?]] + [:container-style {:optional true} [:maybe :map]]]]] + :any]) + +(defn view-internal [{:keys [blur? card? right-icon right-content status size on-press container-style] :as props}] (let [theme (quo.theme/use-theme) @@ -123,3 +158,5 @@ {:right-icon right-icon :right-content right-content :icon-color icon-color}])])) + +(def view (schema/instrument #'view-internal ?schema)) diff --git a/src/status_im/contexts/preview/quo/settings/data_item.cljs b/src/status_im/contexts/preview/quo/settings/data_item.cljs index 36d171dd61..0714391bc3 100644 --- a/src/status_im/contexts/preview/quo/settings/data_item.cljs +++ b/src/status_im/contexts/preview/quo/settings/data_item.cljs @@ -47,7 +47,8 @@ :options [{:key :default} {:key :icon} {:key :network} - {:key :account}]} + {:key :account} + {:key :editable}]} {:type :select :key :status :options [{:key :default} diff --git a/src/status_im/contexts/wallet/account/tabs/about/view.cljs b/src/status_im/contexts/wallet/account/tabs/about/view.cljs index 5c8534de0b..21a3ed124b 100644 --- a/src/status_im/contexts/wallet/account/tabs/about/view.cljs +++ b/src/status_im/contexts/wallet/account/tabs/about/view.cljs @@ -83,7 +83,7 @@ {:style style/about-tab :content-container-style {:padding-bottom (+ constants/floating-shell-button-height 8)}} [quo/data-item - {:description :default + {:subtitle-type :default :right-icon :i/options :card? true :status :default