From f93e372d18e7948189fbf351b8265860b31a075d Mon Sep 17 00:00:00 2001 From: Lungu Cristian Date: Tue, 25 Jun 2024 15:35:45 +0300 Subject: [PATCH] Add data-item to `quo/category` (#20542) * feat: added data-item to category quo component * feat: session proposal with data-item & category * test: category with data-items * chore: removed unnecessary -> * fix: trailing newline --- .../settings/category/component_spec.cljs | 21 ++++++ .../settings/category/data_item/view.cljs | 32 ++++++++ .../components/settings/category/view.cljs | 9 ++- .../preview/quo/settings/category.cljs | 30 +++++++- .../session_proposal/style.cljs | 5 -- .../wallet_connect/session_proposal/view.cljs | 74 ++++++++++--------- 6 files changed, 127 insertions(+), 44 deletions(-) create mode 100644 src/quo/components/settings/category/data_item/view.cljs diff --git a/src/quo/components/settings/category/component_spec.cljs b/src/quo/components/settings/category/component_spec.cljs index bba6d0416f..5286935c3e 100644 --- a/src/quo/components/settings/category/component_spec.cljs +++ b/src/quo/components/settings/category/component_spec.cljs @@ -51,3 +51,24 @@ :right-icon :i/globe :chevron? true}]}]) (h/is-truthy (h/get-by-text "subtitle")))) + +(h/describe "Data Item Category tests" + (h/test "category renders" + (h/render [category/category + {:list-type :data-item + :label "Label" + :data [{:title "Item 1" + :subtitle "subtitle" + :right-icon :i/globe}]}]) + (h/is-truthy (h/get-by-text "Label")) + (h/is-truthy (h/get-by-text "Item 1")) + (h/is-truthy (h/get-by-text "subtitle"))) + + (h/test "category renders without label" + (h/render [category/category + {:list-type :data-item + :data [{:title "Item 1" + :subtitle "subtitle" + :right-icon :i/globe}]}]) + (h/is-falsy (h/query-by-label-text "Label")) + (h/is-truthy (h/get-by-text "Item 1")))) diff --git a/src/quo/components/settings/category/data_item/view.cljs b/src/quo/components/settings/category/data_item/view.cljs new file mode 100644 index 0000000000..e83f4966f0 --- /dev/null +++ b/src/quo/components/settings/category/data_item/view.cljs @@ -0,0 +1,32 @@ +(ns quo.components.settings.category.data-item.view + (:require + [quo.components.markdown.text :as text] + [quo.components.settings.category.style :as style] + [quo.components.settings.data-item.view :as data-item] + [quo.theme :as quo.theme] + [react-native.core :as rn])) + +(defn view + [{:keys [label data container-style blur?]}] + (let [theme (quo.theme/use-theme) + last-item (rn/use-memo #(last data) [data])] + [rn/view {:style (merge (style/container label) container-style)} + (when label + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/label blur? theme)} + label]) + [rn/view {:style (style/settings-items blur? theme)} + (for [item data + ;; NOTE: overwriting the background of the data-item in favor of the category bg + :let [data-item-container-style (-> item :container-style (assoc :background-color nil)) + data-item-props (assoc item + :blur? blur? + :container-style data-item-container-style)]] + ^{:key item} + [:<> + [data-item/view data-item-props] + (when-not (= item last-item) + [rn/view {:style (style/settings-separator blur? theme)}])])]])) + diff --git a/src/quo/components/settings/category/view.cljs b/src/quo/components/settings/category/view.cljs index 6fd33ca3fd..a8deab9211 100644 --- a/src/quo/components/settings/category/view.cljs +++ b/src/quo/components/settings/category/view.cljs @@ -1,10 +1,13 @@ (ns quo.components.settings.category.view (:require + [quo.components.settings.category.data-item.view :as data-item] [quo.components.settings.category.reorder.view :as reorder] [quo.components.settings.category.settings.view :as settings])) (defn category [{:keys [list-type] :as props}] - (if (= list-type :settings) - [settings/settings-category props] - [reorder/reorder-category props])) + (condp = list-type + :settings [settings/settings-category props] + :data-item [data-item/view props] + :reorder [reorder/reorder-category props] + nil)) diff --git a/src/status_im/contexts/preview/quo/settings/category.cljs b/src/status_im/contexts/preview/quo/settings/category.cljs index 51986ddf9e..64ce484c56 100644 --- a/src/status_im/contexts/preview/quo/settings/category.cljs +++ b/src/status_im/contexts/preview/quo/settings/category.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.preview.quo.settings.category (:require [quo.core :as quo] + [quo.foundations.colors :as colors] [reagent.core :as reagent] [status-im.common.resources :as resources] [status-im.contexts.preview.quo.preview :as preview])) @@ -17,6 +18,24 @@ :image-props :i/browser :image-size 32}))) +(defn create-data-item-array + [n] + (vec + (for [i (range n)] + {:blur? false + :description :default + :icon-right? true + :right-icon :i/chevron-right + :icon-color colors/neutral-10 + :card? false + :label :preview + :status :default + :size :default + :right-content {:type :accounts + :data [{:emoji "🔥" :customization-color :yellow}]} + :title (str "Item title " i) + :subtitle "Item subtitle"}))) + (def descriptor [{:key :blur? :type :boolean} {:key :list-type @@ -24,7 +43,11 @@ :options [{:key :settings :value :settings} {:key :reorder - :value :reorder}]}]) + :value :reorder} + {:key :data-item + :value :data-item}]}]) + +(def ^:constant n-items 5) (defn view [] @@ -32,7 +55,10 @@ :blur? false :list-type :settings})] (fn [] - (let [data (create-item-array 5)] + (let [list-type (:list-type @state) + data (if (= list-type :data-item) + (create-data-item-array n-items) + (create-item-array n-items))] [preview/preview-container {:state state :descriptor descriptor diff --git a/src/status_im/contexts/wallet/wallet_connect/session_proposal/style.cljs b/src/status_im/contexts/wallet/wallet_connect/session_proposal/style.cljs index b99de1ef5d..488c180398 100644 --- a/src/status_im/contexts/wallet/wallet_connect/session_proposal/style.cljs +++ b/src/status_im/contexts/wallet/wallet_connect/session_proposal/style.cljs @@ -24,8 +24,3 @@ (def approval-li-spacer {:width 8}) - -(def detail-item - {:margin-bottom 20 - :margin-horizontal 20 - :padding 12}) diff --git a/src/status_im/contexts/wallet/wallet_connect/session_proposal/view.cljs b/src/status_im/contexts/wallet/wallet_connect/session_proposal/view.cljs index c8f9c43971..770037f503 100644 --- a/src/status_im/contexts/wallet/wallet_connect/session_proposal/view.cljs +++ b/src/status_im/contexts/wallet/wallet_connect/session_proposal/view.cljs @@ -2,6 +2,7 @@ (:require [quo.core :as quo] [quo.foundations.colors :as colors] + [quo.foundations.resources :as quo.resources] [quo.theme] [react-native.core :as rn] [status-im.common.floating-button-page.view :as floating-button-page] @@ -44,41 +45,47 @@ [quo/text label]]) labels)])) -(defn- accounts-data-item +(defn- get-placeholder-networks [] - ;; TODO. This account is currently hard coded in - ;; `status-im.contexts.wallet.wallet-connect.events`. Should be selectable and changeable - (let [accounts (rf/sub [:wallet/accounts-without-watched-accounts]) - name (-> accounts first :name)] - [quo/data-item - {:container-style style/detail-item - :blur? false - :description :default - :icon-right? true - :right-icon :i/chevron-right - :icon-color colors/neutral-10 - :card? false - :label :preview - ;; TODO. The quo component for data item doesn't support showing accounts yet - :status :default - :size :small - :title (i18n/label :t/account-title) - :subtitle name}])) + [{:source (quo.resources/get-network :ethereum)} + {:source (quo.resources/get-network :optimism)} + {:source (quo.resources/get-network :arbitrum)}]) -(defn- networks-data-item +(defn- connection-category [] - [quo/data-item - {:container-style style/detail-item - :blur? false - :description :default - :icon-right? true - :card? true - :label :none - :status :default - :size :small - :title (i18n/label :t/networks) - ;; TODO. The quo component for data-item does not support showing networks yet - :subtitle "Networks will show up here"}]) + (let [{:keys [name emoji customization-color]} (first (rf/sub + [:wallet/accounts-without-watched-accounts])) + data-item-common-props {:blur? false + :description :default + :card? false + :label :preview + :status :default + :size :default} + account-data-item-props (assoc data-item-common-props + :right-content {:type :accounts + :size :size-32 + :data [{:emoji emoji + :customization-color + customization-color}]} + :on-press #(js/alert "Not yet implemented") + :title (i18n/label :t/account-title) + :subtitle name + :icon-right? true + :right-icon :i/chevron-right + :icon-color colors/neutral-10) + networks-data-item-props (assoc data-item-common-props + :right-content {:type :network + :data + (get-placeholder-networks)} + :title (i18n/label :t/networks) + ;; TODO. The quo component for data-item + ;; does not support showing networks yet + :subtitle "Networks placeholder")] + [quo/category + {:blur? false + :list-type :data-item + :data [account-data-item-props + networks-data-item-props]}])) (defn- footer [] @@ -114,6 +121,5 @@ :footer [footer]} [rn/view [dapp-metadata] - [accounts-data-item] - [networks-data-item] + [connection-category] [approval-note]]])