[#10957] Fix slow assets list
This commit is contained in:
Roman Volosovskyi
parent
82aca6bd76
commit
d17f7c67b9
|
|
@ -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)})
|
||||
|
|
|
|||
|
|
@ -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)))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
Loading…
Reference in New Issue