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
[list/list-item-with-checkbox [{:keys [symbol name icon color custom? checked?] :as token}]
{:checked? checked? (reagent/create-class
:on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet {:content (custom-token-actions-view token) {:should-component-update
:content-height (if custom? 128 68)}]) (fn [this [_ old-token] [_ new-token]]
:on-value-change #(re-frame/dispatch [:wallet.settings/toggle-visible-token (keyword symbol) %])} (not= (:checked? old-token) (:checked? new-token)))
[list/item :reagent-render
(if icon (fn [{:keys [symbol name icon color custom? checked?] :as token}]
[list/item-image icon] [list/list-item-with-checkbox
[chat-icon/custom-icon-view-list name color]) {:checked? checked?
[list/item-content :on-long-press
[list/item-primary name] #(re-frame/dispatch
[list/item-secondary symbol]]]]) [: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 [] (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,23 +78,26 @@
[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
[list-item/list-item [react/view {:margin-top 16}
{:theme :action [list-item/list-item
:title :t/add-custom-token {:theme :action
:icon :main-icons/add :title :t/add-custom-token
:on-press #(re-frame/dispatch [:navigate-to :wallet-add-custom-token])}]] :icon :main-icons/add
:sections (concat :on-press
(when (seq custom-tokens) #(re-frame/dispatch [:navigate-to :wallet-add-custom-token])}]]
[{:title (i18n/label :t/custom) :sections (concat
:data custom-tokens}]) (when (seq custom-tokens)
[{:title (i18n/label :t/default) [{:title (i18n/label :t/custom)
:data default-tokens}]) :data custom-tokens}])
:key-fn :address [{:title (i18n/label :t/default)
:data default-tokens}])
:key-fn :address
:stickySectionHeadersEnabled false :stickySectionHeadersEnabled false
:render-section-header-fn (fn [{:keys [title data]}] :render-section-header-fn
[list-item/list-item {:type :section-header :title title}]) (fn [{:keys [title data]}]
:render-fn render-token}]]])) [list-item/list-item {:type :section-header :title title}])
:render-fn render-token-wrapper}]]]))
(defn- create-payload [address] (defn- create-payload [address]
{:address (ethereum/normalized-address address)}) {:address (ethereum/normalized-address address)})