status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-01-14 10:46:21 +00:00
Code Issues Projects Releases Wiki Activity

migrate reagent part4 (#19167)

Browse Source
This commit is contained in:
flexsurfer 2024-03-13 15:43:39 +01:00 committed by GitHub
parent 6bda54266b
commit eb379791c9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 476 additions and 501 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/quo/components/list_items/account/schema.cljs
View File

@ -27,7 +27,6 @@
[:blur? {:optional true} [:maybe :boolean]] [:blur? {:optional true} [:maybe :boolean]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:on-press {:optional true} [:maybe fn?]] [:on-press {:optional true} [:maybe fn?]]
[:theme :schema.common/theme]
[:title-icon {:optional true} [:maybe :keyword]] [:title-icon {:optional true} [:maybe :keyword]]
[:account-props [:account-props
[:map [:map

20
src/quo/components/list_items/account/view.cljs
View File

@ -9,7 +9,6 @@
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema])) [schema.core :as schema]))
(defn- account-view (defn- account-view
@ -97,22 +96,23 @@
(colors/resolve-color customization-color theme))}]]) (colors/resolve-color customization-color theme))}]])
(defn- internal-view (defn- internal-view
[_] [{:keys [type state blur? customization-color on-press]
(let [pressed? (reagent/atom false)
on-press-in #(reset! pressed? true)
on-press-out #(reset! pressed? false)]
(fn [{:keys [type state blur? customization-color on-press]
:or {customization-color :blue :or {customization-color :blue
type :default type :default
state :default state :default
blur? false} blur? false}
:as props}] :as props}]
(let [theme (quo.theme/use-theme-value)
[pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed false))
props (assoc props :theme theme)]
[rn/pressable [rn/pressable
{:style (style/container {:style (style/container
{:state state {:state state
:blur? blur? :blur? blur?
:customization-color customization-color :customization-color customization-color
:pressed? @pressed?}) :pressed? pressed?})
:on-press-in on-press-in :on-press-in on-press-in
:on-press on-press :on-press on-press
:on-press-out on-press-out :on-press-out on-press-out
@ -130,8 +130,6 @@
[options-button props] [options-button props]
(and (= type :default) (= state :selected)) (and (= type :default) (= state :selected))
[check-icon props])]]))) [check-icon props])]]))
(def view (def view (schema/instrument #'internal-view component-schema/?schema))
(quo.theme/with-theme
(schema/instrument #'internal-view component-schema/?schema)))

1
src/quo/components/list_items/account_list_card/schema.cljs
View File

@ -5,7 +5,6 @@
[:action {:optional true} [:enum :icon :none]] [:action {:optional true} [:enum :icon :none]]
[:blur? {:optional true} [:maybe :boolean]] [:blur? {:optional true} [:maybe :boolean]]
[:on-press {:optional true} [:maybe fn?]] [:on-press {:optional true} [:maybe fn?]]
[:theme :schema.common/theme]
[:account-props [:account-props
[:map {:closed true} [:map {:closed true}
[:type [:enum :default :watch-only]] [:type [:enum :default :watch-only]]

21
src/quo/components/list_items/account_list_card/view.cljs
View File

@ -9,17 +9,18 @@
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema])) [schema.core :as schema]))
(defn- internal-view (defn- internal-view
[] [{:keys [action blur? account-props networks on-press on-options-press]}]
(let [state (reagent/atom :default)] (let [theme (quo.theme/use-theme-value)
(fn [{:keys [action blur? account-props networks on-press on-options-press theme]}] [state set-state] (rn/use-state :default)
on-press-in (rn/use-callback #(set-state :pressed))
on-press-out (rn/use-callback #(set-state :default))]
[rn/pressable [rn/pressable
{:style (style/container {:state @state :blur? blur? :theme theme}) {:style (style/container {:state state :blur? blur? :theme theme})
:on-press-in #(reset! state :pressed) :on-press-in on-press-in
:on-press-out #(reset! state :default) :on-press-out on-press-out
:on-press on-press :on-press on-press
:accessibility-label :container} :accessibility-label :container}
[rn/view {:style style/left-container} [rn/view {:style style/left-container}
@ -39,8 +40,6 @@
{:color (if blur? {:color (if blur?
colors/white-opa-70 colors/white-opa-70
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)) (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
:accessibility-label :icon}]])]))) :accessibility-label :icon}]])]))
(def view (def view (schema/instrument #'internal-view component-schema/?schema))
(quo.theme/with-theme
(schema/instrument #'internal-view component-schema/?schema)))

1
src/quo/components/list_items/address/schema.cljs
View File

@ -9,6 +9,5 @@
[:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:on-press {:optional true} [:maybe fn?]] [:on-press {:optional true} [:maybe fn?]]
[:blur? {:optional true} [:maybe :boolean]] [:blur? {:optional true} [:maybe :boolean]]
[:theme :schema.common/theme]
[:active-state? {:optional true} [:maybe :boolean]]]] [:active-state? {:optional true} [:maybe :boolean]]]]
:any]) :any])

36
src/quo/components/list_items/address/view.cljs
View File

@ -1,13 +1,12 @@
(ns quo.components.list-items.address.view (ns quo.components.list-items.address.view
(:require (:require
[quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar] [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
(quo.components.list-items.address.schema :as component-schema) [quo.components.list-items.address.schema :as component-schema]
[quo.components.list-items.address.style :as style] [quo.components.list-items.address.style :as style]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema] [schema.core :as schema]
[utils.address :as address])) [utils.address :as address]))
@ -39,23 +38,27 @@
(address/get-shortened-key address)]]]]) (address/get-shortened-key address)]]]])
(defn- internal-view (defn- internal-view
[] [{:keys [networks address customization-color on-press active-state? blur?]
(let [state (reagent/atom :default)
active? (atom false)
timer (atom nil)
on-press-in (fn []
(when-not (= @state :selected)
(reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
(fn [{:keys [networks address customization-color on-press active-state? blur? theme]
:or {customization-color :blue}}] :or {customization-color :blue}}]
(let [on-press-out (fn [] (let [theme (quo.theme/use-theme-value)
[state set-state] (rn/use-state :default)
active? (rn/use-ref-atom false)
timer (rn/use-ref-atom nil)
on-press-in (rn/use-callback
(fn []
(when-not (= state :selected)
(reset! timer (js/setTimeout #(set-state :pressed) 100))))
[state])
on-press-out (rn/use-callback
(fn []
(let [new-state (if (or (not active-state?) @active?) :default :active)] (let [new-state (if (or (not active-state?) @active?) :default :active)]
(when @timer (js/clearTimeout @timer)) (when @timer (js/clearTimeout @timer))
(reset! timer nil) (reset! timer nil)
(reset! active? (= new-state :active)) (reset! active? (= new-state :active))
(reset! state new-state)))] (set-state new-state)))
[active-state?])]
[rn/pressable [rn/pressable
{:style (style/container @state customization-color blur?) {:style (style/container state customization-color blur?)
:on-press-in on-press-in :on-press-in on-press-in
:on-press-out on-press-out :on-press-out on-press-out
:on-press on-press :on-press on-press
@ -64,9 +67,6 @@
{:theme theme {:theme theme
:networks networks :networks networks
:address address :address address
:blur? blur?}]])))) :blur? blur?}]]))
(def view
(quo.theme/with-theme
(schema/instrument #'internal-view component-schema/?schema)))
(def view (schema/instrument #'internal-view component-schema/?schema))

26
src/quo/components/list_items/channel/view.cljs
View File

@ -5,11 +5,10 @@
[quo.components.icon :as quo.icons] [quo.components.icon :as quo.icons]
[quo.components.list-items.channel.style :as style] [quo.components.list-items.channel.style :as style]
[quo.components.markdown.text :as quo.text] [quo.components.markdown.text :as quo.text]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn] [react-native.core :as rn]))
[reagent.core :as reagent]))
(defn- view-internal (defn view
"Options: "Options:
- notification - (nil/:notification/:mention/:mute, default: nil): - notification - (nil/:notification/:mention/:mute, default: nil):
- :notification - Display a grey dot. - :notification - Display a grey dot.
@ -27,17 +26,18 @@
- on-press - (function, default: nil) - Function called when the component is pressed. - on-press - (function, default: nil) - Function called when the component is pressed.
- on-long-press - (function, default: nil) - Function called when the component is long pressed. - on-long-press - (function, default: nil) - Function called when the component is long pressed.
- theme - Theme value from with-theme HOC" - theme - Theme value from with-theme HOC"
[] [{:keys [notification locked? mentions-count customization-color emoji name on-press on-long-press]}]
(let [pressed? (reagent/atom false)] (let [theme (quo.theme/use-theme-value)
(fn [{:keys [notification locked? mentions-count customization-color emoji name on-press [pressed? set-pressed] (rn/use-state false)
on-long-press theme]}] on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed false))]
[rn/pressable [rn/pressable
{:style (style/container @pressed? customization-color theme) {:style (style/container pressed? customization-color theme)
:accessibility-label :channel-list-item :accessibility-label :channel-list-item
:on-press on-press :on-press on-press
:on-long-press on-long-press :on-long-press on-long-press
:on-press-in #(reset! pressed? true) :on-press-in on-press-in
:on-press-out #(reset! pressed? false)} :on-press-out on-press-out}
[channel-avatar/view [channel-avatar/view
{:size :size-32 {:size :size-32
:locked? locked? :locked? locked?
@ -59,6 +59,4 @@
:notification [quo.icons/icon :i/notification :notification [quo.icons/icon :i/notification
{:color (style/mute-notification-icon-color theme) {:color (style/mute-notification-icon-color theme)
:accessibility-label :unviewed-messages-public}] :accessibility-label :unviewed-messages-public}]
nil))]))) nil))]))
(def view (theme/with-theme view-internal))

28
src/quo/components/list_items/community/view.cljs
View File

@ -7,8 +7,7 @@
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]))
[reagent.core :as reagent]))
(defn- logo-component (defn- logo-component
[logo] [logo]
@ -83,7 +82,7 @@
:style {:margin-left 10}} :style {:margin-left 10}}
component]))) component])))
(defn- view-internal (defn view
"Options: "Options:
:type - :discover/engage/share :type - :discover/engage/share
@ -116,23 +115,24 @@
:unread-count - number - When the info is :mention, it will be used to show :unread-count - number - When the info is :mention, it will be used to show
the number of unread mentions. the number of unread mentions.
" "
[] [{:keys [members type info tokens locked? title subtitle logo blur? customization-color
(let [pressed? (reagent/atom false)] on-press on-long-press on-press-info container-style unread-count]}]
(fn [{:keys [members type info tokens locked? title subtitle (let [theme (quo.theme/use-theme-value)
logo blur? customization-color [pressed? set-pressed] (rn/use-state false)
on-press on-long-press on-press-info on-press-in (rn/use-callback #(set-pressed true))
container-style unread-count theme]}] on-press-out (rn/use-callback #(set-pressed false))]
[rn/pressable [rn/pressable
{:accessibility-label :container {:accessibility-label :container
:on-press-in (fn [] (reset! pressed? true))
:on-press on-press :on-press on-press
:on-long-press on-long-press :on-long-press on-long-press
:on-press-out (fn [] (reset! pressed? false)) :on-press-in on-press-in
:on-press-out on-press-out
:style (merge (style/container {:blur? blur? :style (merge (style/container {:blur? blur?
:customization-color customization-color :customization-color customization-color
:info info :info info
:type type :type type
:pressed? @pressed? :pressed? pressed?
:theme theme}) :theme theme})
container-style)} container-style)}
[logo-component logo] [logo-component logo]
@ -159,6 +159,4 @@
:on-press-info on-press-info :on-press-info on-press-info
:theme theme :theme theme
:tokens tokens :tokens tokens
:unread-count unread-count}]]))) :unread-count unread-count}]]))
(def view (quo.theme/with-theme view-internal))

24
src/quo/components/list_items/dapp/view.cljs
View File

@ -6,18 +6,19 @@
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.fast-image :as fast-image] [react-native.fast-image :as fast-image]))
[reagent.core :as reagent]))
(defn- view-internal (defn view
[] [{:keys [dapp action on-press on-press-icon] :as props}]
(let [pressed? (reagent/atom false)] (let [theme (quo.theme/use-theme-value)
(fn [{:keys [dapp action on-press on-press-icon theme] :as props}] [pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed false))]
[rn/pressable [rn/pressable
{:style (style/container (assoc props :pressed? @pressed?)) {:style (style/container (assoc props :pressed? pressed?))
:on-press on-press :on-press on-press
:on-press-in #(reset! pressed? true) :on-press-in on-press-in
:on-press-out #(reset! pressed? false)} :on-press-out on-press-out}
[rn/view {:style style/container-info} [rn/view {:style style/container-info}
[fast-image/fast-image [fast-image/fast-image
{:source (:avatar dapp) {:source (:avatar dapp)
@ -42,7 +43,4 @@
colors/neutral-50 colors/neutral-50
colors/neutral-40 colors/neutral-40
theme) theme)
:accessibility-label :icon}]])]))) :accessibility-label :icon}]])]))
(def view
(quo.theme/with-theme view-internal))

27
src/quo/components/list_items/network_list/view.cljs
View File

@ -5,7 +5,6 @@
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema])) [schema.core :as schema]))
(defn- info (defn- info
@ -22,7 +21,8 @@
(if (string/blank? label) "-" label)]]]) (if (string/blank? label) "-" label)]]])
(defn- values (defn- values
[{:keys [token-value fiat-value theme]}] [{:keys [token-value fiat-value]}]
(let [theme (quo.theme/use-theme-value)]
[rn/view {:style style/values-container} [rn/view {:style style/values-container}
[text/text [text/text
{:weight :medium {:weight :medium
@ -33,7 +33,7 @@
{:style (style/fiat-value theme) {:style (style/fiat-value theme)
:size :paragraph-2 :size :paragraph-2
:number-of-lines 1} :number-of-lines 1}
fiat-value]]) fiat-value]]))
(def ?schema (def ?schema
[:=> [:=>
@ -51,17 +51,14 @@
:any]) :any])
(defn- view-internal (defn- view-internal
[] [{:keys [on-press state customization-color]
(let [pressed? (reagent/atom false)
on-press-in #(reset! pressed? true)
on-press-out #(reset! pressed? false)]
(fn [{:keys [on-press state customization-color theme]
:as props :as props
:or {customization-color :blue}}] :or {customization-color :blue}}]
(let [internal-state (if @pressed? (let [theme (quo.theme/use-theme-value)
:pressed [pressed? set-pressed] (rn/use-state false)
state)] on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed false))
internal-state (if pressed? :pressed state)]
[rn/pressable [rn/pressable
{:style (style/container internal-state customization-color theme) {:style (style/container internal-state customization-color theme)
:on-press-in on-press-in :on-press-in on-press-in
@ -69,8 +66,6 @@
:on-press on-press :on-press on-press
:accessibility-label :network-list} :accessibility-label :network-list}
[info props] [info props]
[values props]])))) [values props]]))
(def view (def view (schema/instrument #'view-internal ?schema))
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))

41
src/quo/components/list_items/saved_address/view.cljs
View File

@ -7,11 +7,11 @@
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent]
[utils.address :as address])) [utils.address :as address]))
(defn- left-container (defn- left-container
[{:keys [blur? theme name ens address customization-color]}] [{:keys [blur? name ens address customization-color]}]
(let [theme (quo.theme/use-theme-value)]
[rn/view {:style style/left-container} [rn/view {:style style/left-container}
[wallet-user-avatar/wallet-user-avatar [wallet-user-avatar/wallet-user-avatar
{:size :size-32 {:size :size-32
@ -28,31 +28,32 @@
{:size :paragraph-2 {:size :paragraph-2
:weight :monospace :weight :monospace
:style (style/account-address blur? theme)} :style (style/account-address blur? theme)}
(or ens (address/get-shortened-key address))]]]]) (or ens (address/get-shortened-key address))]]]]))
(defn- internal-view (defn view
[] [{:keys [blur? user-props active-state? customization-color on-press on-options-press]
(let [state (reagent/atom :default)
active? (atom false)
timer (atom nil)
on-press-in (fn []
(when-not (= @state :selected)
(reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
(fn [{:keys [blur? user-props active-state? customization-color
on-press
on-options-press
theme]
:or {customization-color :blue :or {customization-color :blue
blur? false}}] blur? false}}]
(let [on-press-out (fn [] (let [theme (quo.theme/use-theme-value)
[state set-state] (rn/use-state :default)
active? (rn/use-ref-atom false)
timer (rn/use-ref-atom nil)
on-press-in (rn/use-callback
(fn []
(when-not (= state :selected)
(reset! timer (js/setTimeout #(set-state :pressed) 100))))
[state])
on-press-out (rn/use-callback
(fn []
(let [new-state (if (or (not active-state?) @active?) :default :active)] (let [new-state (if (or (not active-state?) @active?) :default :active)]
(when @timer (js/clearTimeout @timer)) (when @timer (js/clearTimeout @timer))
(reset! timer nil) (reset! timer nil)
(reset! active? (= new-state :active)) (reset! active? (= new-state :active))
(reset! state new-state)))] (set-state new-state)))
[active-state?])]
[rn/pressable [rn/pressable
{:style (style/container {:style (style/container
{:state @state :blur? blur? :customization-color customization-color}) {:state state :blur? blur? :customization-color customization-color})
:on-press-in on-press-in :on-press-in on-press-in
:on-press-out on-press-out :on-press-out on-press-out
:on-press on-press :on-press on-press
@ -71,6 +72,4 @@
[icon/icon :i/options [icon/icon :i/options
{:color (if blur? {:color (if blur?
colors/white-opa-70 colors/white-opa-70
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])])))) (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])]))
(def view (quo.theme/with-theme internal-view))

1
src/quo/components/list_items/saved_contact_address/schema.cljs
View File

@ -23,7 +23,6 @@
[:contact-props ?contact] [:contact-props ?contact]
[:accounts {:optional true} ?accounts] [:accounts {:optional true} ?accounts]
[:on-press {:optional true} [:maybe fn?]] [:on-press {:optional true} [:maybe fn?]]
[:theme :schema.common/theme]
[:active-state? {:optional true} [:maybe :boolean]] [:active-state? {:optional true} [:maybe :boolean]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]]]]
:any]) :any])

50
src/quo/components/list_items/saved_contact_address/view.cljs
View File

@ -9,13 +9,13 @@
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema] [schema.core :as schema]
[utils.address :as address] [utils.address :as address]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
(defn- account (defn- account
[{:keys [emoji name address customization-color theme]}] [{:keys [emoji name address customization-color]}]
(let [theme (quo.theme/use-theme-value)]
[rn/view [rn/view
{:accessibility-label :account-container {:accessibility-label :account-container
:style style/account-container} :style style/account-container}
@ -33,36 +33,38 @@
{:size :paragraph-2 {:size :paragraph-2
:weight :monospace :weight :monospace
:style (style/account-address theme)} :style (style/account-address theme)}
(address/get-shortened-key address)]]) (address/get-shortened-key address)]]))
(defn- internal-view (defn- internal-view
[] [{:keys [contact-props accounts active-state? customization-color on-press]
(let [state (reagent/atom :default)
active? (atom false)
timer (atom nil)
on-press-in (fn []
(when-not (= @state :selected)
(reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
(fn [{:keys [contact-props accounts active-state? customization-color on-press theme]
:or {customization-color :blue :or {customization-color :blue
accounts [] accounts []
active-state? true}}] active-state? true}}]
(let [accounts-count (count accounts) (let [theme (quo.theme/use-theme-value)
account-props (when (= accounts-count 1) [state set-state] (rn/use-state :default)
(first accounts)) active? (rn/use-ref-atom false)
on-press-out (fn [] timer (rn/use-ref-atom nil)
on-press (rn/use-callback #(when on-press (on-press)))
on-press-in (rn/use-callback
(fn []
(when-not (= state :selected)
(reset! timer (js/setTimeout #(set-state :pressed) 100))))
[state])
accounts-count (count accounts)
account-props (when (= accounts-count 1) (first accounts))
on-press-out (rn/use-callback
(fn []
(let [new-state (if (or (not active-state?) @active?) :default :active)] (let [new-state (if (or (not active-state?) @active?) :default :active)]
(when @timer (js/clearTimeout @timer)) (when @timer (js/clearTimeout @timer))
(reset! timer nil) (reset! timer nil)
(reset! active? (= new-state :active)) (reset! active? (= new-state :active))
(reset! state new-state)))] (set-state new-state)))
[active-state?])]
[rn/pressable [rn/pressable
{:style (style/container {:style (style/container {:state state :customization-color customization-color})
{:state @state :customization-color customization-color})
:on-press-in on-press-in :on-press-in on-press-in
:on-press-out on-press-out :on-press-out on-press-out
:on-press #(when on-press :on-press on-press
(on-press))
:accessibility-label :container} :accessibility-label :container}
[rn/view {:style style/left-container} [rn/view {:style style/left-container}
[user-avatar/user-avatar (assoc contact-props :size :small)] [user-avatar/user-avatar (assoc contact-props :size :small)]
@ -90,10 +92,6 @@
[icon/icon :i/chevron-right [icon/icon :i/chevron-right
{:accessibility-label :check-icon {:accessibility-label :check-icon
:size 20 :size 20
:color (colors/theme-colors colors/neutral-50 :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}])]))
colors/neutral-40
theme)}])]))))
(def view (def view (schema/instrument #'internal-view component-schema/?schema))
(quo.theme/with-theme
(schema/instrument #'internal-view component-schema/?schema)))

3
src/quo/components/list_items/token_network/schema.cljs
View File

@ -11,6 +11,5 @@
[:networks [:* [:map [:source :schema.common/image-source]]]] [:networks [:* [:map [:source :schema.common/image-source]]]]
[:on-press {:optional true} [:maybe fn?]] [:on-press {:optional true} [:maybe fn?]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:state {:optional true} [:enum :default :active :selected]] [:state {:optional true} [:enum :default :active :selected]]]]
[:theme :schema.common/theme]]]
:any]) :any])

27
src/quo/components/list_items/token_network/view.cljs
View File

@ -8,7 +8,6 @@
[quo.components.utilities.token.view :as token] [quo.components.utilities.token.view :as token]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema])) [schema.core :as schema]))
(defn- info (defn- info
@ -31,7 +30,8 @@
networks]]]) networks]]])
(defn- values (defn- values
[{:keys [state token-value fiat-value customization-color theme]}] [{:keys [state token-value fiat-value customization-color]}]
(let [theme (quo.theme/use-theme-value)]
(if (= state :selected) (if (= state :selected)
[icon/icon :i/check [icon/icon :i/check
{:color (style/check-color customization-color theme) {:color (style/check-color customization-color theme)
@ -46,20 +46,17 @@
{:style (style/fiat-value theme) {:style (style/fiat-value theme)
:size :paragraph-2 :size :paragraph-2
:number-of-lines 1} :number-of-lines 1}
fiat-value]])) fiat-value]])))
(defn- view-internal (defn- view-internal
[] [{:keys [on-press state customization-color _token _networks _token-value _fiat-value]
(let [pressed? (reagent/atom false)
on-press-in #(reset! pressed? true)
on-press-out #(reset! pressed? false)]
(fn [{:keys [on-press state customization-color
_token _networks _token-value _fiat-value theme]
:as props :as props
:or {customization-color :blue}}] :or {customization-color :blue}}]
(let [internal-state (if @pressed? (let [theme (quo.theme/use-theme-value)
:pressed [pressed? set-pressed] (rn/use-state false)
state)] on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed false))
internal-state (if pressed? :pressed state)]
[rn/pressable [rn/pressable
{:style (style/container internal-state customization-color theme) {:style (style/container internal-state customization-color theme)
:on-press-in on-press-in :on-press-in on-press-in
@ -67,8 +64,6 @@
:on-press on-press :on-press on-press
:accessibility-label :token-network} :accessibility-label :token-network}
[info props] [info props]
[values props]])))) [values props]]))
(def view (def view (schema/instrument #'view-internal component-schema/?schema))
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))

1
src/quo/components/list_items/token_value/schema.cljs
View File

@ -17,7 +17,6 @@
[:values ?values] [:values ?values]
[:on-press {:optional true} [:maybe fn?]] [:on-press {:optional true} [:maybe fn?]]
[:on-long-press {:optional true} [:maybe fn?]] [:on-long-press {:optional true} [:maybe fn?]]
[:theme :schema.common/theme]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:metrics? {:optional true} [:maybe :boolean]]]] [:metrics? {:optional true} [:maybe :boolean]]]]
:any]) :any])

37
src/quo/components/list_items/token_value/view.cljs
View File

@ -9,27 +9,32 @@
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema])) [schema.core :as schema]))
(defn- internal-view (defn- internal-view
[] [{:keys [customization-color status token metrics? values on-press on-long-press token-name]}]
(let [state (reagent/atom :default)] (let [theme (quo.theme/use-theme-value)
(fn [{:keys [theme customization-color status token metrics? values on-press on-long-press [state set-state] (rn/use-state :default)
token-name]}] bg-opacity (case state
(let [bg-opacity (case @state
:active 10 :active 10
:pressed 5 :pressed 5
0) 0)
{:keys [crypto-value fiat-value percentage-change fiat-change]} values] {:keys [crypto-value
fiat-value
percentage-change
fiat-change]} values
on-press-in (rn/use-callback #(set-state :pressed))
on-press-out (rn/use-callback #(set-state :default))
on-press (rn/use-callback
(fn []
(set-state :active)
(js/setTimeout #(set-state :default) 300)
on-press))]
[rn/pressable [rn/pressable
{:style (style/container customization-color bg-opacity theme) {:style (style/container customization-color bg-opacity theme)
:on-press-in #(reset! state :pressed) :on-press-in on-press-in
:on-press-out #(reset! state :default) :on-press-out on-press-out
:on-press (fn [] :on-press on-press
(reset! state :active)
(js/setTimeout #(reset! state :default) 300)
on-press)
:on-long-press on-long-press :on-long-press on-long-press
:accessibility-label :container} :accessibility-label :container}
[rn/view [rn/view
@ -65,8 +70,6 @@
{:style {:margin-left 4} {:style {:margin-left 4}
:accessibility-label :arrow-icon} :accessibility-label :arrow-icon}
[icon/icon (if (= status :positive) :i/positive :i/negative) [icon/icon (if (= status :positive) :i/positive :i/negative)
(style/arrow-icon status theme)]])])]])))) (style/arrow-icon status theme)]])])]]))
(def view (def view (schema/instrument #'internal-view component-schema/?schema))
(quo.theme/with-theme
(schema/instrument #'internal-view component-schema/?schema)))