overwrite should-component-update
when checking the checkbox, the entire list was being re-rendered we now only re-render if the `checked?` value has changed Signed-off-by: yenda <eric@status.im>
This commit is contained in:
parent
0dbcfab2e6
commit
a2067783c5
|
@ -9,7 +9,8 @@
|
||||||
[status-im.ui.components.styles :as components.styles]
|
[status-im.ui.components.styles :as components.styles]
|
||||||
[status-im.ui.components.toolbar.actions :as actions]
|
[status-im.ui.components.toolbar.actions :as actions]
|
||||||
[status-im.ui.components.toolbar.view :as toolbar]
|
[status-im.ui.components.toolbar.view :as toolbar]
|
||||||
[status-im.ui.components.list-item.views :as list-item])
|
[status-im.ui.components.list-item.views :as list-item]
|
||||||
|
[reagent.core :as reagent])
|
||||||
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
|
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
|
||||||
|
|
||||||
(defn toolbar []
|
(defn toolbar []
|
||||||
|
@ -31,27 +32,45 @@
|
||||||
{:theme :action
|
{:theme :action
|
||||||
:title :t/token-details
|
:title :t/token-details
|
||||||
:icon :main-icons/warning
|
:icon :main-icons/warning
|
||||||
:on-press #(hide-sheet-and-dispatch [:navigate-to :wallet-custom-token-details token])}]
|
:on-press #(hide-sheet-and-dispatch
|
||||||
|
[:navigate-to :wallet-custom-token-details token])}]
|
||||||
(when custom?
|
(when custom?
|
||||||
[list-item/list-item
|
[list-item/list-item
|
||||||
{:theme :action-destructive
|
{:theme :action-destructive
|
||||||
:title :t/remove-token
|
:title :t/remove-token
|
||||||
:icon :main-icons/delete
|
:icon :main-icons/delete
|
||||||
:on-press #(hide-sheet-and-dispatch [:wallet.custom-token.ui/remove-pressed token])}])]))
|
:on-press #(hide-sheet-and-dispatch
|
||||||
|
[:wallet.custom-token.ui/remove-pressed token])}])]))
|
||||||
|
|
||||||
(defn- render-token [{:keys [symbol name icon color custom? checked?] :as token}]
|
(defn render-token
|
||||||
|
[{:keys [symbol name icon color custom? checked?] :as token}]
|
||||||
|
(reagent/create-class
|
||||||
|
{:should-component-update
|
||||||
|
(fn [this [_ old-token] [_ new-token]]
|
||||||
|
(not= (:checked? old-token) (:checked? new-token)))
|
||||||
|
:reagent-render
|
||||||
|
(fn [{:keys [symbol name icon color custom? checked?] :as token}]
|
||||||
[list/list-item-with-checkbox
|
[list/list-item-with-checkbox
|
||||||
{:checked? checked?
|
{:checked? checked?
|
||||||
:on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet {:content (custom-token-actions-view token)
|
:on-long-press
|
||||||
|
#(re-frame/dispatch
|
||||||
|
[:bottom-sheet/show-sheet
|
||||||
|
{:content (custom-token-actions-view token)
|
||||||
:content-height (if custom? 128 68)}])
|
:content-height (if custom? 128 68)}])
|
||||||
:on-value-change #(re-frame/dispatch [:wallet.settings/toggle-visible-token (keyword symbol) %])}
|
:on-value-change
|
||||||
|
#(re-frame/dispatch
|
||||||
|
[:wallet.settings/toggle-visible-token (keyword symbol) %])}
|
||||||
[list/item
|
[list/item
|
||||||
(if icon
|
(if icon
|
||||||
[list/item-image icon]
|
[list/item-image icon]
|
||||||
[chat-icon/custom-icon-view-list name color])
|
[chat-icon/custom-icon-view-list name color])
|
||||||
[list/item-content
|
[list/item-content
|
||||||
[list/item-primary name]
|
[list/item-primary name]
|
||||||
[list/item-secondary symbol]]]])
|
[list/item-secondary symbol]]]])}))
|
||||||
|
|
||||||
|
(defn- render-token-wrapper
|
||||||
|
[token]
|
||||||
|
[render-token token])
|
||||||
|
|
||||||
(defview manage-assets []
|
(defview manage-assets []
|
||||||
(letsubs [{custom-tokens true default-tokens nil} [:wallet/grouped-chain-tokens]]
|
(letsubs [{custom-tokens true default-tokens nil} [:wallet/grouped-chain-tokens]]
|
||||||
|
@ -59,12 +78,14 @@
|
||||||
[toolbar]
|
[toolbar]
|
||||||
[react/view {:style components.styles/flex}
|
[react/view {:style components.styles/flex}
|
||||||
[list/section-list
|
[list/section-list
|
||||||
{:header [react/view {:margin-top 16}
|
{:header
|
||||||
|
[react/view {:margin-top 16}
|
||||||
[list-item/list-item
|
[list-item/list-item
|
||||||
{:theme :action
|
{:theme :action
|
||||||
:title :t/add-custom-token
|
:title :t/add-custom-token
|
||||||
:icon :main-icons/add
|
:icon :main-icons/add
|
||||||
:on-press #(re-frame/dispatch [:navigate-to :wallet-add-custom-token])}]]
|
:on-press
|
||||||
|
#(re-frame/dispatch [:navigate-to :wallet-add-custom-token])}]]
|
||||||
:sections (concat
|
:sections (concat
|
||||||
(when (seq custom-tokens)
|
(when (seq custom-tokens)
|
||||||
[{:title (i18n/label :t/custom)
|
[{:title (i18n/label :t/custom)
|
||||||
|
@ -73,9 +94,10 @@
|
||||||
:data default-tokens}])
|
:data default-tokens}])
|
||||||
:key-fn :address
|
:key-fn :address
|
||||||
:stickySectionHeadersEnabled false
|
:stickySectionHeadersEnabled false
|
||||||
:render-section-header-fn (fn [{:keys [title data]}]
|
:render-section-header-fn
|
||||||
|
(fn [{:keys [title data]}]
|
||||||
[list-item/list-item {:type :section-header :title title}])
|
[list-item/list-item {:type :section-header :title title}])
|
||||||
:render-fn render-token}]]]))
|
:render-fn render-token-wrapper}]]]))
|
||||||
|
|
||||||
(defn- create-payload [address]
|
(defn- create-payload [address]
|
||||||
{:address (ethereum/normalized-address address)})
|
{:address (ethereum/normalized-address address)})
|
||||||
|
|
Loading…
Reference in New Issue