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

View File

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