status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#12050] replace list-item usage by quo 

Signed-off-by: andrey <motor4ik@gmail.com>
This commit is contained in:
andrey 2021-08-26 11:36:39 +02:00
parent c036469409
commit ee02b90774
No known key found for this signature in database
GPG Key ID: 89B67245FD2F0272
12 changed files with 114 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/quo/components/list/item.cljs
View File

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

13
src/status_im/ui/components/list/styles.cljs
View File

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

58
src/status_im/ui/components/list/views.cljs
View File

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

36
src/status_im/ui/screens/network/edit_network/views.cljs
View File

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

19
src/status_im/ui/screens/network/views.cljs
View File

@ -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]

6
src/status_im/ui/screens/signing/views.cljs
View File

@ -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}

6
src/status_im/ui/screens/wallet/account/views.cljs
View File

@ -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}]))

8
src/status_im/ui/screens/wallet/accounts/views.cljs
View File

@ -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 []

10
src/status_im/ui/screens/wallet/components/views.cljs
View File

@ -6,4 +6,12 @@
[react/view (styles/separator)])
(defn separator-dark []
[react/view (styles/separator-dark)])
[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)}]])

6
src/status_im/ui/screens/wallet/send/views.cljs
View File

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

5
src/status_im/ui/screens/wallet/settings/views.cljs
View File

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

134
src/status_im/ui/screens/wallet/transactions/views.cljs
View File

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