From ee02b9077461c4aca830c382104ff8b8fa64ebdb Mon Sep 17 00:00:00 2001 From: andrey Date: Thu, 26 Aug 2021 11:36:39 +0200 Subject: [PATCH] [#12050] replace list-item usage by quo Signed-off-by: andrey --- src/quo/components/list/item.cljs | 7 +- src/status_im/ui/components/list/styles.cljs | 13 -- src/status_im/ui/components/list/views.cljs | 58 +------- .../screens/network/edit_network/views.cljs | 36 +++-- src/status_im/ui/screens/network/views.cljs | 19 ++- src/status_im/ui/screens/signing/views.cljs | 6 +- .../ui/screens/wallet/account/views.cljs | 6 +- .../ui/screens/wallet/accounts/views.cljs | 8 +- .../ui/screens/wallet/components/views.cljs | 10 +- .../ui/screens/wallet/send/views.cljs | 6 +- .../ui/screens/wallet/settings/views.cljs | 5 +- .../ui/screens/wallet/transactions/views.cljs | 134 ++++++++---------- 12 files changed, 114 insertions(+), 194 deletions(-) diff --git a/src/quo/components/list/item.cljs b/src/quo/components/list/item.cljs index c1bd0a4445..3a525f7c15 100644 --- a/src/quo/components/list/item.cljs +++ b/src/quo/components/list/item.cljs @@ -194,7 +194,7 @@ (defn list-item [{:keys [theme accessory disabled subtitle-max-lines icon icon-container-style - left-side-alignment + left-side-alignment icon-color icon-bg-color title subtitle subtitle-secondary active on-press on-long-press chevron size text-size accessory-text accessibility-label title-accessibility-label accessory-style haptic-feedback haptic-type error animated animated-accessory? title-text-weight] @@ -204,9 +204,10 @@ animated platform/ios? haptic-type :selection}}] (let [theme (if disabled :disabled theme) - {:keys [icon-color text-color icon-bg-color - active-background passive-background]} + {:keys [text-color active-background passive-background]} (themes theme) + icon-color (or icon-color (:icon-color (themes theme))) + icon-bg-color (or icon-bg-color (:icon-bg-color (themes theme))) optional-haptic (fn [] (when haptic-feedback (haptic/trigger haptic-type))) diff --git a/src/status_im/ui/components/list/styles.cljs b/src/status_im/ui/components/list/styles.cljs index ed9b22c513..9d40b326c8 100644 --- a/src/status_im/ui/components/list/styles.cljs +++ b/src/status_im/ui/components/list/styles.cljs @@ -18,19 +18,6 @@ :align-items :center :justify-content :center}) -(def primary-text-base - {:font-size 16}) - -(def primary-text-only - (merge primary-text-base - {:padding-vertical 16})) - -(def image-size 40) - -(def item-image - {:width image-size - :height image-size}) - (def icon-size 24) (def icon-wrapper-size (+ icon-size (* 2 8))) diff --git a/src/status_im/ui/components/list/views.cljs b/src/status_im/ui/components/list/views.cljs index 9ab5c13a5f..3467214084 100644 --- a/src/status_im/ui/components/list/views.cljs +++ b/src/status_im/ui/components/list/views.cljs @@ -1,6 +1,5 @@ (ns status-im.ui.components.list.views (:require [reagent.core :as reagent] - [status-im.ui.components.icons.icons :as icons] [status-im.ui.components.list.styles :as styles] [status-im.ui.components.react :as react] [status-im.utils.platform :as platform] @@ -9,71 +8,16 @@ (def flat-list-class (reagent/adapt-react-class (.-FlatList react-native))) (def section-list-class (reagent/adapt-react-class (.-SectionList react-native))) -;;TODO THIS NAMESPACE is DEPRECATED, use status-im.ui.components.list-item.views -;;TODO DEPRECATED, use status-im.ui.components.list-item.views -(defn item - ([content] (item nil content)) - ([left content] (item left content nil)) - ([left content right] - [react/view {:style styles/item} - (when left - [react/view {:style styles/left-item-wrapper} - left]) - [react/view {:style styles/content-item-wrapper} - content] - (when right - [react/view {:style styles/right-item-wrapper} - right])])) -;;TODO DEPRECATED, use status-im.ui.components.list-item.views -(defn touchable-item [handler item] - [react/touchable-highlight {:on-press handler} - [react/view - item]]) -;;TODO DEPRECATED, use status-im.ui.components.list-item.views -(defn item-icon - [{:keys [icon style icon-opts]}] - {:pre [(not (nil? icon))]} - [react/view {:style (merge styles/item-icon-wrapper style)} - [icons/icon icon (merge icon-opts {:style styles/item-icon})]]) -;;TODO DEPRECATED, use status-im.ui.components.list-item.views -(defn item-image - [{:keys [source style image-style]}] - [react/view {:style style} - [react/image {:source (if (fn? source) (source) source) - :style (merge styles/item-image image-style)}]]) -;;TODO DEPRECATED, use status-im.ui.components.list-item.views -(defn item-primary-only - ([s] (item-primary-only nil s)) - ([{:keys [style] :as props} s] - [react/text (merge {:style (merge styles/primary-text-only style)} - (dissoc props :style)) - s])) -;;TODO DEPRECATED, use status-im.ui.components.list-item.views -(defn item-content - [& children] - (into [react/view {:style styles/item-content-view}] (keep identity children))) - -;;TODO DEPRECATED, use status-im.ui.components.list-item.views -(defn list-item-with-radio-button - [{:keys [on-value-change style checked?]} item] - [react/touchable-highlight {:on-press #(on-value-change (not checked?))} - (conj item - [react/view {:style (merge style styles/item-checkbox)}])]) - (def memo-wrap-render-fn (memoize (fn [f render-data] (fn [^js data] (reagent/as-element [f (.-item data) (.-index data) (.-separators data) render-data]))))) -(def base-separator [react/view styles/base-separator]) - -(def default-separator [react/view styles/separator]) - (def memo-separator-fn (memoize (fn [separator default-separator?] - (when-let [separator (or separator (when (and platform/ios? default-separator?) default-separator))] + (when-let [separator (or separator (when (and platform/ios? default-separator?) [react/view styles/separator]))] (fn [] (reagent/as-element separator)))))) diff --git a/src/status_im/ui/screens/network/edit_network/views.cljs b/src/status_im/ui/screens/network/edit_network/views.cljs index f719034013..8e6085fa4a 100644 --- a/src/status_im/ui/screens/network/edit_network/views.cljs +++ b/src/status_im/ui/screens/network/edit_network/views.cljs @@ -15,11 +15,11 @@ :testnet (i18n/label :t/ropsten-network) :rinkeby (i18n/label :t/rinkeby-network) :custom (i18n/label :t/custom))] - [list/list-item-with-radio-button - {:checked? (= (get-in manage-network [:chain :value]) type) - :on-value-change #(re-frame/dispatch [::network/input-changed :chain type])} - [list/item - nil [list/item-primary-only name]]])) + [quo/list-item + {:title name + :accessory :radio + :active (= (get-in manage-network [:chain :value]) type) + :on-press #(re-frame/dispatch [::network/input-changed :chain type])}])) (views/defview edit-network [] (views/letsubs [manage-network [:networks/manage] @@ -40,20 +40,18 @@ {:label (i18n/label :t/rpc-url) :placeholder (i18n/label :t/specify-rpc-url) :default-value (get-in manage-network [:url :value]) - :on-change-text #(re-frame/dispatch [::network/input-changed :url (string/lower-case %)])}]] - [react/view {:padding-vertical 8} - [react/i18n-text {:key :network-chain}] - [list/flat-list {:data [:mainnet :testnet :rinkeby :custom] - :key-fn (fn [_ i] (str i)) - :separator list/base-separator - :render-data manage-network - :render-fn render-network-type}]] - (when custom? - [react/view {:padding-vertical 8} - [quo/text-input - {:label (i18n/label :t/network-id) - :placeholder (i18n/label :t/specify-network-id) - :on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}]])]] + :on-change-text #(re-frame/dispatch [::network/input-changed :url (string/lower-case %)])}]]] + [quo/list-header (i18n/label :t/network-chain)] + [list/flat-list {:data [:mainnet :testnet :rinkeby :custom] + :key-fn (fn [_ i] (str i)) + :render-data manage-network + :render-fn render-network-type}] + (when custom? + [react/view styles/edit-network-view + [quo/text-input + {:label (i18n/label :t/network-id) + :placeholder (i18n/label :t/specify-network-id) + :on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}]])] [react/view styles/bottom-container [react/view {:flex 1}] [quo/button diff --git a/src/status_im/ui/screens/network/views.cljs b/src/status_im/ui/screens/network/views.cljs index 25298cd4f2..4ba066e35b 100644 --- a/src/status_im/ui/screens/network/views.cljs +++ b/src/status_im/ui/screens/network/views.cljs @@ -7,7 +7,8 @@ [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.topbar :as topbar] - [status-im.ui.components.colors :as colors]) + [status-im.ui.components.colors :as colors] + [quo.core :as quo]) (:require-macros [status-im.utils.views :as views])) (defn- network-icon [connected? size] @@ -29,15 +30,13 @@ (defn render-network [{:keys [id name] :as network} _ _ current-network] (let [connected? (= id current-network)] - [list/touchable-item #(re-frame/dispatch [::network/network-entry-pressed network]) - [react/view styles/network-item - [network-icon connected? 40] - [react/view {:padding-horizontal 16} - [react/text {:style styles/network-item-name-text} name] - (when connected? - [react/text {:style styles/network-item-connected-text - :accessibility-label :connected-text} - (i18n/label :t/connected)])]]])) + [quo/list-item {:on-press #(re-frame/dispatch [::network/network-entry-pressed network]) + :icon :main-icons/network + :icon-bg-color (if connected? colors/blue colors/gray-lighter) + :icon-color (if connected? colors/white-persist colors/gray) + :title name + :subtitle (when connected? (i18n/label :t/connected)) + :chevron true}])) (views/defview network-settings [] (views/letsubs [current-network [:networks/current-network] diff --git a/src/status_im/ui/screens/signing/views.cljs b/src/status_im/ui/screens/signing/views.cljs index c0c26a3d21..dafc1f0ca3 100644 --- a/src/status_im/ui/screens/signing/views.cljs +++ b/src/status_im/ui/screens/signing/views.cljs @@ -6,7 +6,6 @@ [status-im.ui.components.colors :as colors] [status-im.ui.components.copyable-text :as copyable-text] [status-im.wallet.utils :as wallet.utils] - [status-im.ui.components.list.views :as list] [status-im.keycard.common :as keycard.common] [status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet] [status-im.ui.components.chat-icon.screen :as chat-icon] @@ -25,7 +24,8 @@ [status-im.ui.screens.keycard.pin.views :as pin.views] [status-im.ui.components.bottom-panel.views :as bottom-panel] [status-im.utils.utils :as utils] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [status-im.ui.screens.wallet.components.views :as wallet.components])) (defn separator [] [react/view {:height 1 :background-color colors/gray-lighter}]) @@ -60,7 +60,7 @@ :style {:margin-right 8}} display-symbol] (if icon - [list/item-image + [wallet.components/token-icon (assoc icon :style {:background-color colors/gray-lighter :border-radius 16} diff --git a/src/status_im/ui/screens/wallet/account/views.cljs b/src/status_im/ui/screens/wallet/account/views.cljs index 75180c3ea9..0a28aaf95a 100644 --- a/src/status_im/ui/screens/wallet/account/views.cljs +++ b/src/status_im/ui/screens/wallet/account/views.cljs @@ -7,7 +7,6 @@ [status-im.ui.components.colors :as colors] [status-im.ui.components.icons.icons :as icons] [quo.core :as quo] - [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.wallet.account.styles :as styles] @@ -18,7 +17,8 @@ [status-im.utils.money :as money] [status-im.wallet.utils :as wallet.utils] [status-im.ui.components.tabs :as tabs] - [quo.design-system.colors :as quo-colors]) + [quo.design-system.colors :as quo-colors] + [status-im.ui.screens.wallet.components.views :as wallet.components]) (:require-macros [status-im.utils.views :as views])) (def state (reagent/atom {:tab :assets})) @@ -82,7 +82,7 @@ [quo/list-item {:title (wallet.utils/display-symbol collectible) :subtitle name - :icon [list/item-image icon] + :icon [wallet.components/token-icon icon] :accessory :text :accessory-text items-number}])) diff --git a/src/status_im/ui/screens/wallet/accounts/views.cljs b/src/status_im/ui/screens/wallet/accounts/views.cljs index e96fca7421..dd67ea0c45 100644 --- a/src/status_im/ui/screens/wallet/accounts/views.cljs +++ b/src/status_im/ui/screens/wallet/accounts/views.cljs @@ -8,7 +8,6 @@ [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.colors :as colors] [status-im.ui.components.icons.icons :as icons] - [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.screens.wallet.accounts.sheets :as sheets] [status-im.ui.screens.wallet.accounts.styles :as styles] @@ -16,7 +15,8 @@ [status-im.wallet.utils :as wallet.utils] [status-im.keycard.login :as keycard.login] [quo.react-native :as rn] - [status-im.utils.utils :as utils.utils]) + [status-im.utils.utils :as utils.utils] + [status-im.ui.screens.wallet.components.views :as wallet.components]) (:require-macros [status-im.utils.views :as views])) (views/defview account-card [{:keys [name color address type wallet] :as account} keycard? card-width] @@ -75,9 +75,9 @@ :weight :inherit} (wallet.utils/display-symbol token)]] :subtitle (str (if value value "...") " " currency) - :accessibility-label (str (:symbol token) "-asset-value") + :accessibility-label (str (:symbol token) "-asset-value") :icon (if icon - [list/item-image icon] + [wallet.components/token-icon icon] [chat-icon/custom-icon-view-list (:name token) color])}]) (views/defview assets [] diff --git a/src/status_im/ui/screens/wallet/components/views.cljs b/src/status_im/ui/screens/wallet/components/views.cljs index 46c3cfb42a..687f26c6ba 100644 --- a/src/status_im/ui/screens/wallet/components/views.cljs +++ b/src/status_im/ui/screens/wallet/components/views.cljs @@ -6,4 +6,12 @@ [react/view (styles/separator)]) (defn separator-dark [] - [react/view (styles/separator-dark)]) \ No newline at end of file + [react/view (styles/separator-dark)]) + +(defn token-icon [{:keys [style source image-style]}] + [react/view {:style style} + [react/image {:source (if (fn? source) (source) source) + :style (merge + {:width 40 + :height 40} + image-style)}]]) \ No newline at end of file diff --git a/src/status_im/ui/screens/wallet/send/views.cljs b/src/status_im/ui/screens/wallet/send/views.cljs index 8cfec7e0e6..cb0eff2b19 100644 --- a/src/status_im/ui/screens/wallet/send/views.cljs +++ b/src/status_im/ui/screens/wallet/send/views.cljs @@ -10,7 +10,6 @@ [status-im.ui.components.colors :as colors] [status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.chat-icon.screen :as chat-icon] - [status-im.ui.components.list.views :as list] [status-im.wallet.utils :as wallet.utils] [status-im.ui.components.icons.icons :as icons] [status-im.multiaccounts.core :as multiaccounts] @@ -42,8 +41,9 @@ :margin-left 16} :accessibility-label :choose-asset-button} (if icon - [list/item-image (assoc icon :style {:background-color colors/gray-lighter - :border-radius 50} :image-style {:width 32 :height 32})] + [components/token-icon + (assoc icon :style {:background-color colors/gray-lighter + :border-radius 50} :image-style {:width 32 :height 32})] [chat-icon/custom-icon-view-list name color 32]) [react/text {:style {:margin-left 8 :max-width (/ window-width 4)} diff --git a/src/status_im/ui/screens/wallet/settings/views.cljs b/src/status_im/ui/screens/wallet/settings/views.cljs index 0fd4867e49..3e7e875afa 100644 --- a/src/status_im/ui/screens/wallet/settings/views.cljs +++ b/src/status_im/ui/screens/wallet/settings/views.cljs @@ -8,7 +8,8 @@ [reagent.core :as reagent] [status-im.ui.components.topbar :as topbar] [status-im.ui.components.search-input.view :as search-input] - [status-im.ui.components.colors :as colors]) + [status-im.ui.components.colors :as colors] + [status-im.ui.screens.wallet.components.views :as wallet.components]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defonce search-active? (reagent/atom false)) @@ -54,7 +55,7 @@ :animated-accessory? false :animated false :icon (if icon - [list/item-image icon] + [wallet.components/token-icon icon] [chat-icon/custom-icon-view-list name color]) :title name :subtitle (clojure.core/name symbol) diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index bc5221aacb..bcd9e049ce 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -9,14 +9,15 @@ [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.wallet.transactions.styles :as styles] [quo.core :as quo] - [status-im.ui.components.toolbar :as toolbar]) + [status-im.ui.components.toolbar :as toolbar] + [status-im.utils.utils :as utils]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defn- transaction-icon [icon-key background-color color] - {:icon icon-key - :icon-opts {:color color} - :style (styles/transaction-icon-background background-color)}) + {:icon icon-key + :icon-color color + :icon-bg-color background-color}) (defn- transaction-type->icon [k] @@ -36,45 +37,29 @@ (defn render-transaction [{:keys [label contact address contact-accessibility-label - address-accessibility-label currency-text amount-text + currency-text amount-text time-formatted on-touch-fn type hash]} _ _ {:keys [keycard-account? transactions-management-enabled?]}] - [react/view - [list/touchable-item on-touch-fn - [react/view {:accessibility-label :transaction-item} - [list/item - (when type - [list/item-icon (transaction-type->icon (keyword type))]) - [list/item-content - [react/view {:style styles/amount-time} - [react/nested-text {:style styles/tx-amount - :ellipsize-mode "tail" - :number-of-lines 1} - [{:accessibility-label :amount-text} - amount-text] - " " - [{:accessibility-label :currency-text} - currency-text]] - [react/text {:style styles/tx-time} - time-formatted]] - [react/view {:style styles/address-row} - [react/text {:style styles/address-label} - label] - (when contact - [react/text {:style styles/address-contact - :accessibility-label contact-accessibility-label} - contact]) - [quo/text {:style styles/address-hash - :monospace true - :color :secondary - :ellipsize-mode "middle" - :number-of-lines 1 - :accessibility-label address-accessibility-label} - address]]] - [list/item-icon {:icon :main-icons/next - :style {:margin-top 10} - :icon-opts (merge styles/forward - {:accessibility-label :show-transaction-button})}]]]] + [:<> + [quo/list-item + (merge + {:on-press on-touch-fn + :accessibility-label :transaction-item + :title (str amount-text " " currency-text) + :subtitle (str label + " " + (when contact + [react/text {:style styles/address-contact + :accessibility-label contact-accessibility-label} + contact]) + " " + (utils/get-shortened-address address) + " " + (i18n/label :t/at) + " " + time-formatted) + :chevron true} + (when type (transaction-type->icon (keyword type))))] (when (and transactions-management-enabled? (not keycard-account?) (= type :pending)) @@ -92,12 +77,12 @@ {:on-press #(when link (.openURL ^js react/linking link))} [react/view - {:style {:flex 1 + {:style {:flex 1 :padding-horizontal 14 - :flex-direction :row - :align-items :center - :background-color colors/blue-light - :height 52}} + :flex-direction :row + :align-items :center + :background-color colors/blue-light + :height 52}} [icons/tiny-icon :tiny-icons/tiny-external {:color colors/blue @@ -120,26 +105,26 @@ (defn non-archival-node [] [react/view - {:style {:flex 1 + {:style {:flex 1 :padding-horizontal 14 - :flex-direction :row - :align-items :center - :background-color (quo/get-color :negative-02) - :height 52}} + :flex-direction :row + :align-items :center + :background-color (quo/get-color :negative-02) + :height 52}} [react/text {:style {:color (quo/get-color :negative-01)}} (i18n/label :t/non-archival-node)]]) (defn history-list [{:keys [transaction-history-sections total]} address] - (let [fetching-recent-history? @(re-frame/subscribe [:wallet/fetching-recent-tx-history? address]) - fetching-more-history? @(re-frame/subscribe [:wallet/fetching-tx-history? address]) - keycard-account? @(re-frame/subscribe [:multiaccounts/keycard-account?]) + (let [fetching-recent-history? @(re-frame/subscribe [:wallet/fetching-recent-tx-history? address]) + fetching-more-history? @(re-frame/subscribe [:wallet/fetching-tx-history? address]) + keycard-account? @(re-frame/subscribe [:multiaccounts/keycard-account?]) transactions-management-enabled? @(re-frame/subscribe [:wallet/transactions-management-enabled?]) - custom-rpc-node? @(re-frame/subscribe [:custom-rpc-node]) - non-archival-rpc-node? @(re-frame/subscribe [:wallet/non-archival-node]) - all-fetched? @(re-frame/subscribe [:wallet/tx-history-fetched? address]) - syncing-allowed? @(re-frame/subscribe [:mobile-network/syncing-allowed?])] + custom-rpc-node? @(re-frame/subscribe [:custom-rpc-node]) + non-archival-rpc-node? @(re-frame/subscribe [:wallet/non-archival-node]) + all-fetched? @(re-frame/subscribe [:wallet/tx-history-fetched? address]) + syncing-allowed? @(re-frame/subscribe [:mobile-network/syncing-allowed?])] [react/view {:flex 1} [etherscan-link address] (cond non-archival-rpc-node? @@ -154,11 +139,11 @@ [react/activity-indicator {:size :large :animating true}]]) [list/section-list - {:sections transaction-history-sections - :key-fn :hash - :render-data {:keycard-account? keycard-account? + {:sections transaction-history-sections + :key-fn :hash + :render-data {:keycard-account? keycard-account? :transactions-management-enabled? transactions-management-enabled?} - :render-fn render-transaction + :render-fn render-transaction :empty-component [react/i18n-text {:style styles/empty-text :key (if (or fetching-recent-history? fetching-more-history?) @@ -184,19 +169,16 @@ [:transactions/fetch-more address]))} (i18n/label :t/transactions-load-more)]}]))])) -;; NOTE: Is this needed? (defn details-header [date type amount-text currency-text] - [react/view {:style styles/details-header} - [react/view {:style styles/details-header-icon} - (when type - [list/item-icon (transaction-type->icon type)])] - [react/view {:style styles/details-header-infos} - [react/nested-text {:style styles/details-header-value} - [{:accessibility-label :amount-text} amount-text] - " " - [{:accessibility-label :currency-text} currency-text]] - [react/text {:style styles/details-header-date} date]]]) + [quo/list-item + (merge + {:title [react/nested-text {:style styles/details-header-value} + [{:accessibility-label :amount-text} amount-text] + " " + [{:accessibility-label :currency-text} currency-text]] + :subtitle date} + (transaction-type->icon type))]) (defn progress-bar [progress failed?] [react/view {:style styles/progress-bar} @@ -219,9 +201,9 @@ ([label props-value] (details-list-row label props-value nil)) ([label props-value extra-props-value] - (let [[props value] (if (string? props-value) - [nil props-value] - props-value) + (let [[props value] (if (string? props-value) + [nil props-value] + props-value) [extra-props extra-value] (if (string? extra-props-value) [nil extra-props-value] extra-props-value)]