[#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

View File

@ -194,7 +194,7 @@
(defn list-item (defn list-item
[{:keys [theme accessory disabled subtitle-max-lines icon icon-container-style [{: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 title subtitle subtitle-secondary active on-press on-long-press chevron size text-size
accessory-text accessibility-label title-accessibility-label accessory-style accessory-text accessibility-label title-accessibility-label accessory-style
haptic-feedback haptic-type error animated animated-accessory? title-text-weight] haptic-feedback haptic-type error animated animated-accessory? title-text-weight]
@ -204,9 +204,10 @@
animated platform/ios? animated platform/ios?
haptic-type :selection}}] haptic-type :selection}}]
(let [theme (if disabled :disabled theme) (let [theme (if disabled :disabled theme)
{:keys [icon-color text-color icon-bg-color {:keys [text-color active-background passive-background]}
active-background passive-background]}
(themes theme) (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 [] optional-haptic (fn []
(when haptic-feedback (when haptic-feedback
(haptic/trigger haptic-type))) (haptic/trigger haptic-type)))

View File

@ -18,19 +18,6 @@
:align-items :center :align-items :center
:justify-content :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-size 24)
(def icon-wrapper-size (+ icon-size (* 2 8))) (def icon-wrapper-size (+ icon-size (* 2 8)))

View File

@ -1,6 +1,5 @@
(ns status-im.ui.components.list.views (ns status-im.ui.components.list.views
(:require [reagent.core :as reagent] (: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.list.styles :as styles]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
@ -9,71 +8,16 @@
(def flat-list-class (reagent/adapt-react-class (.-FlatList react-native))) (def flat-list-class (reagent/adapt-react-class (.-FlatList react-native)))
(def section-list-class (reagent/adapt-react-class (.-SectionList 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 (def memo-wrap-render-fn
(memoize (memoize
(fn [f render-data] (fn [f render-data]
(fn [^js data] (fn [^js data]
(reagent/as-element [f (.-item data) (.-index data) (.-separators data) render-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 (def memo-separator-fn
(memoize (memoize
(fn [separator default-separator?] (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 [] (fn []
(reagent/as-element separator)))))) (reagent/as-element separator))))))

View File

@ -15,11 +15,11 @@
:testnet (i18n/label :t/ropsten-network) :testnet (i18n/label :t/ropsten-network)
:rinkeby (i18n/label :t/rinkeby-network) :rinkeby (i18n/label :t/rinkeby-network)
:custom (i18n/label :t/custom))] :custom (i18n/label :t/custom))]
[list/list-item-with-radio-button [quo/list-item
{:checked? (= (get-in manage-network [:chain :value]) type) {:title name
:on-value-change #(re-frame/dispatch [::network/input-changed :chain type])} :accessory :radio
[list/item :active (= (get-in manage-network [:chain :value]) type)
nil [list/item-primary-only name]]])) :on-press #(re-frame/dispatch [::network/input-changed :chain type])}]))
(views/defview edit-network [] (views/defview edit-network []
(views/letsubs [manage-network [:networks/manage] (views/letsubs [manage-network [:networks/manage]
@ -40,20 +40,18 @@
{:label (i18n/label :t/rpc-url) {:label (i18n/label :t/rpc-url)
:placeholder (i18n/label :t/specify-rpc-url) :placeholder (i18n/label :t/specify-rpc-url)
:default-value (get-in manage-network [:url :value]) :default-value (get-in manage-network [:url :value])
:on-change-text #(re-frame/dispatch [::network/input-changed :url (string/lower-case %)])}]] :on-change-text #(re-frame/dispatch [::network/input-changed :url (string/lower-case %)])}]]]
[react/view {:padding-vertical 8} [quo/list-header (i18n/label :t/network-chain)]
[react/i18n-text {:key :network-chain}] [list/flat-list {:data [:mainnet :testnet :rinkeby :custom]
[list/flat-list {:data [:mainnet :testnet :rinkeby :custom] :key-fn (fn [_ i] (str i))
:key-fn (fn [_ i] (str i)) :render-data manage-network
:separator list/base-separator :render-fn render-network-type}]
:render-data manage-network (when custom?
:render-fn render-network-type}]] [react/view styles/edit-network-view
(when custom? [quo/text-input
[react/view {:padding-vertical 8} {:label (i18n/label :t/network-id)
[quo/text-input :placeholder (i18n/label :t/specify-network-id)
{:label (i18n/label :t/network-id) :on-change-text #(re-frame/dispatch [::network/input-changed :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 styles/bottom-container
[react/view {:flex 1}] [react/view {:flex 1}]
[quo/button [quo/button

View File

@ -7,7 +7,8 @@
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.topbar :as topbar] [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])) (:require-macros [status-im.utils.views :as views]))
(defn- network-icon [connected? size] (defn- network-icon [connected? size]
@ -29,15 +30,13 @@
(defn render-network [{:keys [id name] :as network} _ _ current-network] (defn render-network [{:keys [id name] :as network} _ _ current-network]
(let [connected? (= id current-network)] (let [connected? (= id current-network)]
[list/touchable-item #(re-frame/dispatch [::network/network-entry-pressed network]) [quo/list-item {:on-press #(re-frame/dispatch [::network/network-entry-pressed network])
[react/view styles/network-item :icon :main-icons/network
[network-icon connected? 40] :icon-bg-color (if connected? colors/blue colors/gray-lighter)
[react/view {:padding-horizontal 16} :icon-color (if connected? colors/white-persist colors/gray)
[react/text {:style styles/network-item-name-text} name] :title name
(when connected? :subtitle (when connected? (i18n/label :t/connected))
[react/text {:style styles/network-item-connected-text :chevron true}]))
:accessibility-label :connected-text}
(i18n/label :t/connected)])]]]))
(views/defview network-settings [] (views/defview network-settings []
(views/letsubs [current-network [:networks/current-network] (views/letsubs [current-network [:networks/current-network]

View File

@ -6,7 +6,6 @@
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.copyable-text :as copyable-text] [status-im.ui.components.copyable-text :as copyable-text]
[status-im.wallet.utils :as wallet.utils] [status-im.wallet.utils :as wallet.utils]
[status-im.ui.components.list.views :as list]
[status-im.keycard.common :as keycard.common] [status-im.keycard.common :as keycard.common]
[status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet] [status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet]
[status-im.ui.components.chat-icon.screen :as chat-icon] [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.screens.keycard.pin.views :as pin.views]
[status-im.ui.components.bottom-panel.views :as bottom-panel] [status-im.ui.components.bottom-panel.views :as bottom-panel]
[status-im.utils.utils :as utils] [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 [] (defn separator []
[react/view {:height 1 :background-color colors/gray-lighter}]) [react/view {:height 1 :background-color colors/gray-lighter}])
@ -60,7 +60,7 @@
:style {:margin-right 8}} :style {:margin-right 8}}
display-symbol] display-symbol]
(if icon (if icon
[list/item-image [wallet.components/token-icon
(assoc icon (assoc icon
:style {:background-color colors/gray-lighter :style {:background-color colors/gray-lighter
:border-radius 16} :border-radius 16}

View File

@ -7,7 +7,6 @@
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.icons :as icons] [status-im.ui.components.icons.icons :as icons]
[quo.core :as quo] [quo.core :as quo]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.wallet.account.styles :as styles] [status-im.ui.screens.wallet.account.styles :as styles]
@ -18,7 +17,8 @@
[status-im.utils.money :as money] [status-im.utils.money :as money]
[status-im.wallet.utils :as wallet.utils] [status-im.wallet.utils :as wallet.utils]
[status-im.ui.components.tabs :as tabs] [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])) (:require-macros [status-im.utils.views :as views]))
(def state (reagent/atom {:tab :assets})) (def state (reagent/atom {:tab :assets}))
@ -82,7 +82,7 @@
[quo/list-item [quo/list-item
{:title (wallet.utils/display-symbol collectible) {:title (wallet.utils/display-symbol collectible)
:subtitle name :subtitle name
:icon [list/item-image icon] :icon [wallet.components/token-icon icon]
:accessory :text :accessory :text
:accessory-text items-number}])) :accessory-text items-number}]))

View File

@ -8,7 +8,6 @@
[status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.chat-icon.screen :as chat-icon]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.icons :as icons] [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.components.react :as react]
[status-im.ui.screens.wallet.accounts.sheets :as sheets] [status-im.ui.screens.wallet.accounts.sheets :as sheets]
[status-im.ui.screens.wallet.accounts.styles :as styles] [status-im.ui.screens.wallet.accounts.styles :as styles]
@ -16,7 +15,8 @@
[status-im.wallet.utils :as wallet.utils] [status-im.wallet.utils :as wallet.utils]
[status-im.keycard.login :as keycard.login] [status-im.keycard.login :as keycard.login]
[quo.react-native :as rn] [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])) (:require-macros [status-im.utils.views :as views]))
(views/defview account-card [{:keys [name color address type wallet] :as account} keycard? card-width] (views/defview account-card [{:keys [name color address type wallet] :as account} keycard? card-width]
@ -75,9 +75,9 @@
:weight :inherit} :weight :inherit}
(wallet.utils/display-symbol token)]] (wallet.utils/display-symbol token)]]
:subtitle (str (if value value "...") " " currency) :subtitle (str (if value value "...") " " currency)
:accessibility-label (str (:symbol token) "-asset-value") :accessibility-label (str (:symbol token) "-asset-value")
:icon (if icon :icon (if icon
[list/item-image icon] [wallet.components/token-icon icon]
[chat-icon/custom-icon-view-list (:name token) color])}]) [chat-icon/custom-icon-view-list (:name token) color])}])
(views/defview assets [] (views/defview assets []

View File

@ -7,3 +7,11 @@
(defn separator-dark [] (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)}]])

View File

@ -10,7 +10,6 @@
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.components.chat-icon.screen :as chat-icon] [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.wallet.utils :as wallet.utils]
[status-im.ui.components.icons.icons :as icons] [status-im.ui.components.icons.icons :as icons]
[status-im.multiaccounts.core :as multiaccounts] [status-im.multiaccounts.core :as multiaccounts]
@ -42,8 +41,9 @@
:margin-left 16} :margin-left 16}
:accessibility-label :choose-asset-button} :accessibility-label :choose-asset-button}
(if icon (if icon
[list/item-image (assoc icon :style {:background-color colors/gray-lighter [components/token-icon
:border-radius 50} :image-style {:width 32 :height 32})] (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]) [chat-icon/custom-icon-view-list name color 32])
[react/text {:style {:margin-left 8 [react/text {:style {:margin-left 8
:max-width (/ window-width 4)} :max-width (/ window-width 4)}

View File

@ -8,7 +8,8 @@
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.components.search-input.view :as search-input] [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]])) (:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defonce search-active? (reagent/atom false)) (defonce search-active? (reagent/atom false))
@ -54,7 +55,7 @@
:animated-accessory? false :animated-accessory? false
:animated false :animated false
:icon (if icon :icon (if icon
[list/item-image icon] [wallet.components/token-icon icon]
[chat-icon/custom-icon-view-list name color]) [chat-icon/custom-icon-view-list name color])
:title name :title name
:subtitle (clojure.core/name symbol) :subtitle (clojure.core/name symbol)

View File

@ -9,14 +9,15 @@
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.wallet.transactions.styles :as styles] [status-im.ui.screens.wallet.transactions.styles :as styles]
[quo.core :as quo] [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]])) (:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defn- transaction-icon (defn- transaction-icon
[icon-key background-color color] [icon-key background-color color]
{:icon icon-key {:icon icon-key
:icon-opts {:color color} :icon-color color
:style (styles/transaction-icon-background background-color)}) :icon-bg-color background-color})
(defn- transaction-type->icon (defn- transaction-type->icon
[k] [k]
@ -36,45 +37,29 @@
(defn render-transaction (defn render-transaction
[{:keys [label contact address contact-accessibility-label [{: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]} time-formatted on-touch-fn type hash]}
_ _ {:keys [keycard-account? transactions-management-enabled?]}] _ _ {:keys [keycard-account? transactions-management-enabled?]}]
[react/view [:<>
[list/touchable-item on-touch-fn [quo/list-item
[react/view {:accessibility-label :transaction-item} (merge
[list/item {:on-press on-touch-fn
(when type :accessibility-label :transaction-item
[list/item-icon (transaction-type->icon (keyword type))]) :title (str amount-text " " currency-text)
[list/item-content :subtitle (str label
[react/view {:style styles/amount-time} " "
[react/nested-text {:style styles/tx-amount (when contact
:ellipsize-mode "tail" [react/text {:style styles/address-contact
:number-of-lines 1} :accessibility-label contact-accessibility-label}
[{:accessibility-label :amount-text} contact])
amount-text] " "
" " (utils/get-shortened-address address)
[{:accessibility-label :currency-text} " "
currency-text]] (i18n/label :t/at)
[react/text {:style styles/tx-time} " "
time-formatted]] time-formatted)
[react/view {:style styles/address-row} :chevron true}
[react/text {:style styles/address-label} (when type (transaction-type->icon (keyword type))))]
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})}]]]]
(when (and transactions-management-enabled? (when (and transactions-management-enabled?
(not keycard-account?) (not keycard-account?)
(= type :pending)) (= type :pending))
@ -92,12 +77,12 @@
{:on-press #(when link {:on-press #(when link
(.openURL ^js react/linking link))} (.openURL ^js react/linking link))}
[react/view [react/view
{:style {:flex 1 {:style {:flex 1
:padding-horizontal 14 :padding-horizontal 14
:flex-direction :row :flex-direction :row
:align-items :center :align-items :center
:background-color colors/blue-light :background-color colors/blue-light
:height 52}} :height 52}}
[icons/tiny-icon [icons/tiny-icon
:tiny-icons/tiny-external :tiny-icons/tiny-external
{:color colors/blue {:color colors/blue
@ -120,26 +105,26 @@
(defn non-archival-node [] (defn non-archival-node []
[react/view [react/view
{:style {:flex 1 {:style {:flex 1
:padding-horizontal 14 :padding-horizontal 14
:flex-direction :row :flex-direction :row
:align-items :center :align-items :center
:background-color (quo/get-color :negative-02) :background-color (quo/get-color :negative-02)
:height 52}} :height 52}}
[react/text [react/text
{:style {:color (quo/get-color :negative-01)}} {:style {:color (quo/get-color :negative-01)}}
(i18n/label :t/non-archival-node)]]) (i18n/label :t/non-archival-node)]])
(defn history-list (defn history-list
[{:keys [transaction-history-sections total]} address] [{:keys [transaction-history-sections total]} address]
(let [fetching-recent-history? @(re-frame/subscribe [:wallet/fetching-recent-tx-history? 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]) fetching-more-history? @(re-frame/subscribe [:wallet/fetching-tx-history? address])
keycard-account? @(re-frame/subscribe [:multiaccounts/keycard-account?]) keycard-account? @(re-frame/subscribe [:multiaccounts/keycard-account?])
transactions-management-enabled? @(re-frame/subscribe [:wallet/transactions-management-enabled?]) transactions-management-enabled? @(re-frame/subscribe [:wallet/transactions-management-enabled?])
custom-rpc-node? @(re-frame/subscribe [:custom-rpc-node]) custom-rpc-node? @(re-frame/subscribe [:custom-rpc-node])
non-archival-rpc-node? @(re-frame/subscribe [:wallet/non-archival-node]) non-archival-rpc-node? @(re-frame/subscribe [:wallet/non-archival-node])
all-fetched? @(re-frame/subscribe [:wallet/tx-history-fetched? address]) all-fetched? @(re-frame/subscribe [:wallet/tx-history-fetched? address])
syncing-allowed? @(re-frame/subscribe [:mobile-network/syncing-allowed?])] syncing-allowed? @(re-frame/subscribe [:mobile-network/syncing-allowed?])]
[react/view {:flex 1} [react/view {:flex 1}
[etherscan-link address] [etherscan-link address]
(cond non-archival-rpc-node? (cond non-archival-rpc-node?
@ -154,11 +139,11 @@
[react/activity-indicator {:size :large [react/activity-indicator {:size :large
:animating true}]]) :animating true}]])
[list/section-list [list/section-list
{:sections transaction-history-sections {:sections transaction-history-sections
:key-fn :hash :key-fn :hash
:render-data {:keycard-account? keycard-account? :render-data {:keycard-account? keycard-account?
:transactions-management-enabled? transactions-management-enabled?} :transactions-management-enabled? transactions-management-enabled?}
:render-fn render-transaction :render-fn render-transaction
:empty-component :empty-component
[react/i18n-text {:style styles/empty-text [react/i18n-text {:style styles/empty-text
:key (if (or fetching-recent-history? fetching-more-history?) :key (if (or fetching-recent-history? fetching-more-history?)
@ -184,19 +169,16 @@
[:transactions/fetch-more address]))} [:transactions/fetch-more address]))}
(i18n/label :t/transactions-load-more)]}]))])) (i18n/label :t/transactions-load-more)]}]))]))
;; NOTE: Is this needed?
(defn details-header (defn details-header
[date type amount-text currency-text] [date type amount-text currency-text]
[react/view {:style styles/details-header} [quo/list-item
[react/view {:style styles/details-header-icon} (merge
(when type {:title [react/nested-text {:style styles/details-header-value}
[list/item-icon (transaction-type->icon type)])] [{:accessibility-label :amount-text} amount-text]
[react/view {:style styles/details-header-infos} " "
[react/nested-text {:style styles/details-header-value} [{:accessibility-label :currency-text} currency-text]]
[{:accessibility-label :amount-text} amount-text] :subtitle date}
" " (transaction-type->icon type))])
[{:accessibility-label :currency-text} currency-text]]
[react/text {:style styles/details-header-date} date]]])
(defn progress-bar [progress failed?] (defn progress-bar [progress failed?]
[react/view {:style styles/progress-bar} [react/view {:style styles/progress-bar}
@ -219,9 +201,9 @@
([label props-value] ([label props-value]
(details-list-row label props-value nil)) (details-list-row label props-value nil))
([label props-value extra-props-value] ([label props-value extra-props-value]
(let [[props value] (if (string? props-value) (let [[props value] (if (string? props-value)
[nil props-value] [nil props-value]
props-value) props-value)
[extra-props extra-value] (if (string? extra-props-value) [extra-props extra-value] (if (string? extra-props-value)
[nil extra-props-value] [nil extra-props-value]
extra-props-value)] extra-props-value)]