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

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:
yenda 2019-11-22 16:29:43 +01:00
parent 0dbcfab2e6
commit a2067783c5
No known key found for this signature in database
GPG Key ID: 0095623C0069DCE6
1 changed files with 54 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,8 @@
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.toolbar.actions :as actions]
[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]]))
(defn toolbar []
@ -31,27 +32,45 @@
{:theme :action
:title :t/token-details
: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?
[list-item/list-item
{:theme :action-destructive
:title :t/remove-token
: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}]
[list/list-item-with-checkbox
{:checked? checked?
:on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet {:content (custom-token-actions-view token)
:content-height (if custom? 128 68)}])
:on-value-change #(re-frame/dispatch [:wallet.settings/toggle-visible-token (keyword symbol) %])}
[list/item
(if icon
[list/item-image icon]
[chat-icon/custom-icon-view-list name color])
[list/item-content
[list/item-primary name]
[list/item-secondary symbol]]]])
(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
{:checked? checked?
:on-long-press
#(re-frame/dispatch
[:bottom-sheet/show-sheet
{:content (custom-token-actions-view token)
:content-height (if custom? 128 68)}])
:on-value-change
#(re-frame/dispatch
[:wallet.settings/toggle-visible-token (keyword symbol) %])}
[list/item
(if icon
[list/item-image icon]
[chat-icon/custom-icon-view-list name color])
[list/item-content
[list/item-primary name]
[list/item-secondary symbol]]]])}))
(defn- render-token-wrapper
[token]
[render-token token])
(defview manage-assets []
(letsubs [{custom-tokens true default-tokens nil} [:wallet/grouped-chain-tokens]]
@ -59,23 +78,26 @@
[toolbar]
[react/view {:style components.styles/flex}
[list/section-list
{:header [react/view {:margin-top 16}
[list-item/list-item
{:theme :action
:title :t/add-custom-token
:icon :main-icons/add
:on-press #(re-frame/dispatch [:navigate-to :wallet-add-custom-token])}]]
:sections (concat
(when (seq custom-tokens)
[{:title (i18n/label :t/custom)
:data custom-tokens}])
[{:title (i18n/label :t/default)
:data default-tokens}])
:key-fn :address
{:header
[react/view {:margin-top 16}
[list-item/list-item
{:theme :action
:title :t/add-custom-token
:icon :main-icons/add
:on-press
#(re-frame/dispatch [:navigate-to :wallet-add-custom-token])}]]
:sections (concat
(when (seq custom-tokens)
[{:title (i18n/label :t/custom)
:data custom-tokens}])
[{:title (i18n/label :t/default)
:data default-tokens}])
:key-fn :address
:stickySectionHeadersEnabled false
:render-section-header-fn (fn [{:keys [title data]}]
[list-item/list-item {:type :section-header :title title}])
:render-fn render-token}]]]))
:render-section-header-fn
(fn [{:keys [title data]}]
[list-item/list-item {:type :section-header :title title}])
:render-fn render-token-wrapper}]]]))
(defn- create-payload [address]
{:address (ethereum/normalized-address address)})