From d17f7c67b9177d887e6d473bcbc39c01725760b6 Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Tue, 3 Nov 2020 16:01:06 +0200 Subject: [PATCH] [#10957] Fix slow assets list --- src/quo/components/controls/styles.cljs | 19 +++++++++++-- src/quo/components/controls/view.cljs | 27 ++++++++++++++---- src/quo/components/list/item.cljs | 20 +++++++------ src/status_im/subs.cljs | 6 ++++ .../ui/screens/wallet/accounts/views.cljs | 2 +- .../ui/screens/wallet/settings/views.cljs | 28 ++++++++++--------- 6 files changed, 72 insertions(+), 30 deletions(-) diff --git a/src/quo/components/controls/styles.cljs b/src/quo/components/controls/styles.cljs index b58cac2ff4..5da116b21a 100644 --- a/src/quo/components/controls/styles.cljs +++ b/src/quo/components/controls/styles.cljs @@ -50,7 +50,7 @@ :shadow-color (:shadow-01 @colors/theme) :shadow-offset {:width 0 :height 4}}) -(defn checkbox-style [state disabled] +(defn animated-checkbox-style [state disabled] {:width 18 :height 18 :border-radius 4 @@ -62,6 +62,21 @@ (:interactive-04 @colors/theme) (:interactive-01 @colors/theme)))}) -(defn check-icon-style [state hold] +(defn checkbox-style [value disabled] + {:width 18 + :height 18 + :border-radius 4 + :justify-content :center + :align-items :center + :background-color (if value + (if disabled + (:interactive-04 @colors/theme) + (:interactive-01 @colors/theme)) + (:ui-01 @colors/theme))}) + +(defn animated-check-icon-style [state hold] {:opacity (animated/mix hold 1 0.6) :transform [{:scale (animated/mix state 0.0001 1)}]}) + +(defn check-icon-style [value] + {:opacity (if value 1 0)}) diff --git a/src/quo/components/controls/view.cljs b/src/quo/components/controls/view.cljs index 579737957c..1da1c1ca65 100644 --- a/src/quo/components/controls/view.cljs +++ b/src/quo/components/controls/view.cljs @@ -2,6 +2,7 @@ (:require [reagent.core :as reagent] [cljs-bean.core :as bean] [quo.react :as react] + [quo.react-native :as rn] [quo.animated :as animated] [quo.gesture-handler :as gh] [quo.design-system.colors :as colors] @@ -60,13 +61,27 @@ :accessibility-role :radio} [animated/view {:style (styles/radio-bullet-style transition hold)}]]) -(defn checkbox-view [{:keys [transition hold disabled]}] - [animated/view {:style (styles/checkbox-style transition disabled) - :accessibility-label :checkbox - :accessibility-role :checkbox} - [animated/view {:style (styles/check-icon-style transition hold)} +(defn checkbox-view [props] + (let [{:keys [value onChange disabled]} (bean/bean props)] + (reagent/as-element + [rn/touchable-highlight + {:on-press (when onChange onChange)} + [rn/view {:style (styles/checkbox-style value disabled) + :accessibility-label :checkbox + :accessibility-role :checkbox} + [rn/view {:style (styles/check-icon-style value)} + [icons/tiny-icon :tiny-icons/tiny-check {:color colors/white}]]]]))) + +(defn animated-checkbox-view [{:keys [transition hold disabled]}] + [animated/view + {:style (styles/animated-checkbox-style transition disabled) + :accessibility-label :checkbox + :accessibility-role :checkbox} + [animated/view {:style (styles/animated-check-icon-style transition hold)} [icons/tiny-icon :tiny-icons/tiny-check {:color colors/white}]]]) (def switch (reagent/adapt-react-class (react/memo (control-builder switch-view)))) (def radio (reagent/adapt-react-class (react/memo (control-builder radio-view)))) -(def checkbox (reagent/adapt-react-class (react/memo (control-builder checkbox-view)))) +(def animated-checkbox + (reagent/adapt-react-class (react/memo (control-builder animated-checkbox-view)))) +(def checkbox (reagent/adapt-react-class (react/memo checkbox-view))) diff --git a/src/quo/components/list/item.cljs b/src/quo/components/list/item.cljs index 2056ef81fd..33d5d86969 100644 --- a/src/quo/components/list/item.cljs +++ b/src/quo/components/list/item.cljs @@ -129,14 +129,17 @@ [icon-column props] [title-column props]]) -(defn right-side [{:keys [chevron active accessory accessory-text]}] +(defn right-side [{:keys [chevron active accessory accessory-text animated-accessory?]}] (when (or chevron accessory) [rn/view {:style {:align-items :center :flex-direction :row}} [rn/view {:style (:tiny spacing/padding-horizontal)} (case accessory :radio [controls/radio {:value active}] - :checkbox [controls/checkbox {:value active}] + :checkbox [(if animated-accessory? + controls/animated-checkbox + controls/checkbox) + {:value active}] :switch [controls/switch {:value active}] :text [text/text {:color :secondary :number-of-lines 1} @@ -154,7 +157,7 @@ [{:keys [theme accessory disabled subtitle-max-lines icon icon-container-style title subtitle active on-press on-long-press chevron size text-size accessory-text accessibility-label title-accessibility-label - haptic-feedback haptic-type error animated title-text-weight] + haptic-feedback haptic-type error animated animated-accessory? title-text-weight] :or {subtitle-max-lines 1 theme :main haptic-feedback true @@ -202,11 +205,12 @@ :text-size text-size :subtitle subtitle :subtitle-max-lines subtitle-max-lines}] - [right-side {:chevron chevron - :active active - :on-press on-press - :accessory-text accessory-text - :accessory accessory}]]] + [right-side {:chevron chevron + :active active + :on-press on-press + :accessory-text accessory-text + :animated-accessory? animated-accessory? + :accessory accessory}]]] (when error [tooltip/tooltip (merge {:bottom-value 0} (when accessibility-label diff --git a/src/status_im/subs.cljs b/src/status_im/subs.cljs index d76296087e..6fffc35896 100644 --- a/src/status_im/subs.cljs +++ b/src/status_im/subs.cljs @@ -1089,6 +1089,12 @@ ;;PROFILE ============================================================================================================== +(re-frame/reg-sub + :mnemonic + :<- [:multiaccount] + (fn [{:keys [mnemonic]}] + mnemonic)) + (re-frame/reg-sub :get-profile-unread-messages-number :<- [:multiaccount] diff --git a/src/status_im/ui/screens/wallet/accounts/views.cljs b/src/status_im/ui/screens/wallet/accounts/views.cljs index 1d0eb07651..3daf07e6a6 100644 --- a/src/status_im/ui/screens/wallet/accounts/views.cljs +++ b/src/status_im/ui/screens/wallet/accounts/views.cljs @@ -163,7 +163,7 @@ (defn accounts-overview [] (fn [] - (let [{:keys [mnemonic]} @(re-frame/subscribe [:multiaccount])] + (let [mnemonic @(re-frame/subscribe [:mnemonic])] [react/view {:flex 1} [quo/animated-header {:extended-header total-value diff --git a/src/status_im/ui/screens/wallet/settings/views.cljs b/src/status_im/ui/screens/wallet/settings/views.cljs index 1b8a6c8ea8..fa19d504f9 100644 --- a/src/status_im/ui/screens/wallet/settings/views.cljs +++ b/src/status_im/ui/screens/wallet/settings/views.cljs @@ -49,19 +49,21 @@ (not= (:checked? old-token) (:checked? new-token))) :reagent-render (fn [{:keys [symbol name icon color checked?] :as token}] - [quo/list-item {:active checked? - :accessory :checkbox - :animated false - :icon (if icon - [list/item-image icon] - [chat-icon/custom-icon-view-list name color]) - :title name - :subtitle (clojure.core/name symbol) - :on-press #(re-frame/dispatch - [:wallet.settings/toggle-visible-token (keyword symbol) (not checked?)]) - :on-long-press #(re-frame/dispatch - [:bottom-sheet/show-sheet - {:content (custom-token-actions-view token)}])}])})) + [quo/list-item + {:active checked? + :accessory :checkbox + :animated-accessory? false + :animated false + :icon (if icon + [list/item-image icon] + [chat-icon/custom-icon-view-list name color]) + :title name + :subtitle (clojure.core/name symbol) + :on-press #(re-frame/dispatch + [:wallet.settings/toggle-visible-token (keyword symbol) (not checked?)]) + :on-long-press #(re-frame/dispatch + [:bottom-sheet/show-sheet + {:content (custom-token-actions-view token)}])}])})) (defn- render-token-wrapper [token]