Settings/Data Item - editable variant (#20656)

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

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

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

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}

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