status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

migrate reagent part4 (#19167)

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

68
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,41 +96,40 @@
(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) :or {customization-color :blue
on-press-in #(reset! pressed? true) type :default
on-press-out #(reset! pressed? false)] state :default
(fn [{:keys [type state blur? customization-color on-press] blur? false}
:or {customization-color :blue :as props}]
type :default (let [theme (quo.theme/use-theme-value)
state :default [pressed? set-pressed] (rn/use-state false)
blur? false} on-press-in (rn/use-callback #(set-pressed true))
:as props}] on-press-out (rn/use-callback #(set-pressed false))
[rn/pressable props (assoc props :theme theme)]
{:style (style/container [rn/pressable
{:state state {:style (style/container
:blur? blur? {:state state
:customization-color customization-color :blur? blur?
:pressed? @pressed?}) :customization-color customization-color
:on-press-in on-press-in :pressed? pressed?})
:on-press on-press :on-press-in on-press-in
:on-press-out on-press-out :on-press on-press
:accessibility-label :container} :on-press-out on-press-out
[account-view props] :accessibility-label :container}
[rn/view {:style (when (= type :tag) style/token-tag-container)} [account-view props]
(cond [rn/view {:style (when (= type :tag) style/token-tag-container)}
(#{:balance-neutral :balance-negative :balance-positive} type) (cond
[balance-view props] (#{:balance-neutral :balance-negative :balance-positive} type)
[balance-view props]
(= type :tag) (= type :tag)
[token-tag props] [token-tag props]
(= type :action) (= type :action)
[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]]

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

@ -9,38 +9,37 @@
[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)
[rn/pressable on-press-in (rn/use-callback #(set-state :pressed))
{:style (style/container {:state @state :blur? blur? :theme theme}) on-press-out (rn/use-callback #(set-state :default))]
:on-press-in #(reset! state :pressed) [rn/pressable
:on-press-out #(reset! state :default) {:style (style/container {:state state :blur? blur? :theme theme})
:on-press on-press :on-press-in on-press-in
:accessibility-label :container} :on-press-out on-press-out
[rn/view {:style style/left-container} :on-press on-press
[account-avatar/view account-props] :accessibility-label :container}
[rn/view {:style {:margin-left 8}} [rn/view {:style style/left-container}
[text/text [account-avatar/view account-props]
{:weight :semi-bold [rn/view {:style {:margin-left 8}}
:size :paragraph-2} [text/text
(:name account-props)] {:weight :semi-bold
[address-text/view :size :paragraph-2}
{:networks networks (:name account-props)]
:address (:address account-props) [address-text/view
:format :short}]]] {:networks networks
(when (= action :icon) :address (:address account-props)
[rn/pressable {:on-press on-options-press} :format :short}]]]
[icon/icon :i/options (when (= action :icon)
{:color (if blur? [rn/pressable {:on-press on-options-press}
colors/white-opa-70 [icon/icon :i/options
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)) {:color (if blur?
:accessibility-label :icon}]])]))) colors/white-opa-70
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
: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])

64
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,34 +38,35 @@
(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) :or {customization-color :blue}}]
active? (atom false) (let [theme (quo.theme/use-theme-value)
timer (atom nil) [state set-state] (rn/use-state :default)
on-press-in (fn [] active? (rn/use-ref-atom false)
(when-not (= @state :selected) timer (rn/use-ref-atom nil)
(reset! timer (js/setTimeout #(reset! state :pressed) 100))))] on-press-in (rn/use-callback
(fn [{:keys [networks address customization-color on-press active-state? blur? theme] (fn []
:or {customization-color :blue}}] (when-not (= state :selected)
(let [on-press-out (fn [] (reset! timer (js/setTimeout #(set-state :pressed) 100))))
(let [new-state (if (or (not active-state?) @active?) :default :active)] [state])
(when @timer (js/clearTimeout @timer)) on-press-out (rn/use-callback
(reset! timer nil) (fn []
(reset! active? (= new-state :active)) (let [new-state (if (or (not active-state?) @active?) :default :active)]
(reset! state new-state)))] (when @timer (js/clearTimeout @timer))
[rn/pressable (reset! timer nil)
{:style (style/container @state customization-color blur?) (reset! active? (= new-state :active))
:on-press-in on-press-in (set-state new-state)))
:on-press-out on-press-out [active-state?])]
:on-press on-press [rn/pressable
:accessibility-label :container} {:style (style/container state customization-color blur?)
[left-container :on-press-in on-press-in
{:theme theme :on-press-out on-press-out
:networks networks :on-press on-press
:address address :accessibility-label :container}
:blur? blur?}]])))) [left-container
{:theme theme
(def view :networks networks
(quo.theme/with-theme :address address
(schema/instrument #'internal-view component-schema/?schema))) :blur? blur?}]]))
(def view (schema/instrument #'internal-view component-schema/?schema))

76
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,38 +26,37 @@
- 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))
[rn/pressable on-press-out (rn/use-callback #(set-pressed false))]
{:style (style/container @pressed? customization-color theme) [rn/pressable
:accessibility-label :channel-list-item {:style (style/container pressed? customization-color theme)
:on-press on-press :accessibility-label :channel-list-item
:on-long-press on-long-press :on-press on-press
:on-press-in #(reset! pressed? true) :on-long-press on-long-press
:on-press-out #(reset! pressed? false)} :on-press-in on-press-in
[channel-avatar/view :on-press-out on-press-out}
{:size :size-32 [channel-avatar/view
:locked? locked? {:size :size-32
:full-name name :locked? locked?
:customization-color customization-color :full-name name
:emoji emoji}] :customization-color customization-color
[quo.text/text :emoji emoji}]
{:style (style/label notification theme) [quo.text/text
:weight :medium {:style (style/label notification theme)
:size :paragraph-1} (str "# " name)] :weight :medium
(when-not locked? :size :paragraph-1} (str "# " name)]
(condp = notification (when-not locked?
:mute [quo.icons/icon :i/muted (condp = notification
{:color (style/mute-notification-icon-color theme)}] :mute [quo.icons/icon :i/muted
:mention [counter/view {:color (style/mute-notification-icon-color theme)}]
{:customization-color customization-color :mention [counter/view
:container-style (style/counter mentions-count)} {:customization-color customization-color
mentions-count] :container-style (style/counter mentions-count)}
:notification [quo.icons/icon :i/notification mentions-count]
{:color (style/mute-notification-icon-color theme) :notification [quo.icons/icon :i/notification
:accessibility-label :unviewed-messages-public}] {:color (style/mute-notification-icon-color theme)
nil))]))) :accessibility-label :unviewed-messages-public}]
nil))]))
(def view (theme/with-theme view-internal))

94
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,49 +115,48 @@
: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-long-press on-long-press
:on-press-out (fn [] (reset! pressed? false))
:style (merge (style/container {:blur? blur?
:customization-color customization-color
:info info
:type type
:pressed? @pressed?
:theme theme})
container-style)}
[logo-component logo]
[rn/view {:style {:flex 1}}
[title-component
{:blur? blur?
:info info
:theme theme
:title title
:type type}]
(when (and (= type :share) subtitle)
[subtitle-component subtitle blur? theme])
(when (and members (= type :discover))
[community-view/community-stats-column
{:type :list-view
:members-count (:members-count members)
:active-count (:active-count members)}])]
[info-component
{:blur? blur?
:customization-color customization-color
:info info
:type type
:locked? locked?
:on-press-info on-press-info
:theme theme
:tokens tokens
:unread-count unread-count}]])))
(def view (quo.theme/with-theme view-internal)) :on-press on-press
:on-long-press on-long-press
:on-press-in on-press-in
:on-press-out on-press-out
:style (merge (style/container {:blur? blur?
:customization-color customization-color
:info info
:type type
:pressed? pressed?
:theme theme})
container-style)}
[logo-component logo]
[rn/view {:style {:flex 1}}
[title-component
{:blur? blur?
:info info
:theme theme
:title title
:type type}]
(when (and (= type :share) subtitle)
[subtitle-component subtitle blur? theme])
(when (and members (= type :discover))
[community-view/community-stats-column
{:type :list-view
:members-count (:members-count members)
:active-count (:active-count members)}])]
[info-component
{:blur? blur?
:customization-color customization-color
:info info
:type type
:locked? locked?
:on-press-info on-press-info
:theme theme
:tokens tokens
:unread-count unread-count}]]))

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

@ -6,43 +6,41 @@
[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)
[rn/pressable on-press-in (rn/use-callback #(set-pressed true))
{:style (style/container (assoc props :pressed? @pressed?)) on-press-out (rn/use-callback #(set-pressed false))]
:on-press on-press [rn/pressable
:on-press-in #(reset! pressed? true) {:style (style/container (assoc props :pressed? pressed?))
:on-press-out #(reset! pressed? false)} :on-press on-press
[rn/view {:style style/container-info} :on-press-in on-press-in
[fast-image/fast-image :on-press-out on-press-out}
{:source (:avatar dapp) [rn/view {:style style/container-info}
:style {:width 32 :height 32}}] [fast-image/fast-image
[rn/view {:style style/user-info} {:source (:avatar dapp)
[text/text :style {:width 32 :height 32}}]
{:weight :semi-bold [rn/view {:style style/user-info}
:size :paragraph-1 [text/text
:style (style/style-text-name theme)} {:weight :semi-bold
(:name dapp)] :size :paragraph-1
[text/text :style (style/style-text-name theme)}
{:weight :regular (:name dapp)]
:size :paragraph-2 [text/text
:style (style/style-text-value theme)} {:weight :regular
(:value dapp)]]] :size :paragraph-2
(when (= action :icon) :style (style/style-text-value theme)}
[rn/pressable (:value dapp)]]]
{:on-press on-press-icon (when (= action :icon)
:testID "dapp-component-icon"} [rn/pressable
[icons/icon :i/options {:on-press on-press-icon
{:color (colors/theme-colors :testID "dapp-component-icon"}
colors/neutral-50 [icons/icon :i/options
colors/neutral-40 {:color (colors/theme-colors
theme) colors/neutral-50
:accessibility-label :icon}]])]))) colors/neutral-40
theme)
(def view :accessibility-label :icon}]])]))
(quo.theme/with-theme view-internal))

65
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,18 +21,19 @@
(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]}]
[rn/view {:style style/values-container} (let [theme (quo.theme/use-theme-value)]
[text/text [rn/view {:style style/values-container}
{:weight :medium [text/text
:size :paragraph-2 {:weight :medium
:number-of-lines 1} :size :paragraph-2
token-value] :number-of-lines 1}
[text/text token-value]
{:style (style/fiat-value theme) [text/text
:size :paragraph-2 {:style (style/fiat-value theme)
:number-of-lines 1} :size :paragraph-2
fiat-value]]) :number-of-lines 1}
fiat-value]]))
(def ?schema (def ?schema
[:=> [:=>
@ -51,26 +51,21 @@
:any]) :any])
(defn- view-internal (defn- view-internal
[] [{:keys [on-press state customization-color]
(let [pressed? (reagent/atom false) :as props
on-press-in #(reset! pressed? true) :or {customization-color :blue}}]
on-press-out #(reset! pressed? false)] (let [theme (quo.theme/use-theme-value)
(fn [{:keys [on-press state customization-color theme] [pressed? set-pressed] (rn/use-state false)
:as props on-press-in (rn/use-callback #(set-pressed true))
:or {customization-color :blue}}] on-press-out (rn/use-callback #(set-pressed false))
(let [internal-state (if @pressed? internal-state (if pressed? :pressed state)]
:pressed [rn/pressable
state)] {:style (style/container internal-state customization-color theme)
:on-press-in on-press-in
:on-press-out on-press-out
:on-press on-press
:accessibility-label :network-list}
[info props]
[values props]]))
[rn/pressable (def view (schema/instrument #'view-internal ?schema))
{:style (style/container internal-state customization-color theme)
:on-press-in on-press-in
:on-press-out on-press-out
:on-press on-press
:accessibility-label :network-list}
[info props]
[values props]]))))
(def view
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))

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

@ -7,70 +7,69 @@
[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]}]
[rn/view {:style style/left-container} (let [theme (quo.theme/use-theme-value)]
[wallet-user-avatar/wallet-user-avatar [rn/view {:style style/left-container}
{:size :size-32 [wallet-user-avatar/wallet-user-avatar
:full-name name {:size :size-32
:customization-color customization-color}] :full-name name
[rn/view {:style style/account-container} :customization-color customization-color}]
[text/text [rn/view {:style style/account-container}
{:weight :semi-bold [text/text
:size :paragraph-1 {:weight :semi-bold
:style style/name-text} :size :paragraph-1
name] :style style/name-text}
[text/text {:size :paragraph-2} name]
[text/text [text/text {:size :paragraph-2}
{:size :paragraph-2 [text/text
:weight :monospace {:size :paragraph-2
:style (style/account-address blur? theme)} :weight :monospace
(or ens (address/get-shortened-key address))]]]]) :style (style/account-address blur? theme)}
(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) :or {customization-color :blue
active? (atom false) blur? false}}]
timer (atom nil) (let [theme (quo.theme/use-theme-value)
on-press-in (fn [] [state set-state] (rn/use-state :default)
(when-not (= @state :selected) active? (rn/use-ref-atom false)
(reset! timer (js/setTimeout #(reset! state :pressed) 100))))] timer (rn/use-ref-atom nil)
(fn [{:keys [blur? user-props active-state? customization-color on-press-in (rn/use-callback
on-press (fn []
on-options-press (when-not (= state :selected)
theme] (reset! timer (js/setTimeout #(set-state :pressed) 100))))
:or {customization-color :blue [state])
blur? false}}] on-press-out (rn/use-callback
(let [on-press-out (fn [] (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)))
[rn/pressable [active-state?])]
{:style (style/container [rn/pressable
{:state @state :blur? blur? :customization-color customization-color}) {:style (style/container
:on-press-in on-press-in {:state state :blur? blur? :customization-color customization-color})
:on-press-out on-press-out :on-press-in on-press-in
:on-press on-press :on-press-out on-press-out
:accessibility-label :container} :on-press on-press
[left-container :accessibility-label :container}
{:blur? blur? [left-container
:theme theme {:blur? blur?
:name (:name user-props) :theme theme
:ens (:ens user-props) :name (:name user-props)
:address (:address user-props) :ens (:ens user-props)
:customization-color (or (:customization-color user-props) :blue)}] :address (:address user-props)
(when on-options-press :customization-color (or (:customization-color user-props) :blue)}]
[rn/pressable (when on-options-press
{:accessibility-label :options-button [rn/pressable
:on-press on-options-press} {:accessibility-label :options-button
[icon/icon :i/options :on-press on-options-press}
{:color (if blur? [icon/icon :i/options
colors/white-opa-70 {:color (if blur?
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])])))) colors/white-opa-70
(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])

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

@ -9,91 +9,89 @@
[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]}]
[rn/view (let [theme (quo.theme/use-theme-value)]
{:accessibility-label :account-container [rn/view
:style style/account-container} {:accessibility-label :account-container
[account-avatar/view :style style/account-container}
{:emoji emoji [account-avatar/view
:size 16 {:emoji emoji
:customization-color customization-color}] :size 16
[text/text :customization-color customization-color}]
{:size :paragraph-2 [text/text
:weight :monospace {:size :paragraph-2
:style (style/account-name theme)} :weight :monospace
name] :style (style/account-name theme)}
[rn/view {:style (style/dot-divider theme)}] name]
[text/text [rn/view {:style (style/dot-divider theme)}]
{:size :paragraph-2 [text/text
:weight :monospace {:size :paragraph-2
:style (style/account-address theme)} :weight :monospace
(address/get-shortened-key address)]]) :style (style/account-address theme)}
(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) :or {customization-color :blue
active? (atom false) accounts []
timer (atom nil) active-state? true}}]
on-press-in (fn [] (let [theme (quo.theme/use-theme-value)
(when-not (= @state :selected) [state set-state] (rn/use-state :default)
(reset! timer (js/setTimeout #(reset! state :pressed) 100))))] active? (rn/use-ref-atom false)
(fn [{:keys [contact-props accounts active-state? customization-color on-press theme] timer (rn/use-ref-atom nil)
:or {customization-color :blue on-press (rn/use-callback #(when on-press (on-press)))
accounts [] on-press-in (rn/use-callback
active-state? true}}] (fn []
(let [accounts-count (count accounts) (when-not (= state :selected)
account-props (when (= accounts-count 1) (reset! timer (js/setTimeout #(set-state :pressed) 100))))
(first accounts)) [state])
on-press-out (fn [] 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)))
[rn/pressable [active-state?])]
{:style (style/container [rn/pressable
{:state @state :customization-color customization-color}) {:style (style/container {: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)] [rn/view {:style style/saved-contact-container}
[rn/view {:style style/saved-contact-container} [rn/view
[rn/view {:style style/account-title-container}
{:style style/account-title-container} [text/text
[text/text {:weight :semi-bold
{:weight :semi-bold :size :paragraph-1}
:size :paragraph-1} (:full-name contact-props)]
(:full-name contact-props)] [icon/icon :i/contact
[icon/icon :i/contact {:container-style style/contact-icon-container
{:container-style style/contact-icon-container :accessibility-label :contact-icon
:accessibility-label :contact-icon :size 12
:size 12 :color (colors/theme-colors colors/primary-50 colors/primary-60 theme)
:color (colors/theme-colors colors/primary-50 colors/primary-60 theme) :color-2 colors/white}]]
:color-2 colors/white}]] (if account-props
(if account-props [account (assoc account-props :theme theme)]
[account (assoc account-props :theme theme)] [text/text
[text/text {:accessibility-label :accounts-count
{:accessibility-label :accounts-count :size :paragraph-2
:size :paragraph-2 :style (style/accounts-count theme)}
:style (style/accounts-count theme)} (i18n/label :t/accounts-count {:count accounts-count})])]]
(i18n/label :t/accounts-count {:count accounts-count})])]] (when (> accounts-count 1)
(when (> accounts-count 1) [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 colors/neutral-40 theme)}])]))
:color (colors/theme-colors colors/neutral-50
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])

73
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,44 +30,40 @@
networks]]]) networks]]])
(defn- values (defn- values
[{:keys [state token-value fiat-value customization-color theme]}] [{:keys [state token-value fiat-value customization-color]}]
(if (= state :selected) (let [theme (quo.theme/use-theme-value)]
[icon/icon :i/check (if (= state :selected)
{:color (style/check-color customization-color theme) [icon/icon :i/check
:accessibility-label :check-icon}] {:color (style/check-color customization-color theme)
[rn/view {:style style/values-container} :accessibility-label :check-icon}]
[text/text [rn/view {:style style/values-container}
{:weight :medium [text/text
:size :paragraph-2 {:weight :medium
:number-of-lines 1} :size :paragraph-2
token-value] :number-of-lines 1}
[text/text token-value]
{:style (style/fiat-value theme) [text/text
:size :paragraph-2 {:style (style/fiat-value theme)
:number-of-lines 1} :size :paragraph-2
fiat-value]])) :number-of-lines 1}
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) :as props
on-press-in #(reset! pressed? true) :or {customization-color :blue}}]
on-press-out #(reset! pressed? false)] (let [theme (quo.theme/use-theme-value)
(fn [{:keys [on-press state customization-color [pressed? set-pressed] (rn/use-state false)
_token _networks _token-value _fiat-value theme] on-press-in (rn/use-callback #(set-pressed true))
:as props on-press-out (rn/use-callback #(set-pressed false))
:or {customization-color :blue}}] internal-state (if pressed? :pressed state)]
(let [internal-state (if @pressed? [rn/pressable
:pressed {:style (style/container internal-state customization-color theme)
state)] :on-press-in on-press-in
[rn/pressable :on-press-out on-press-out
{:style (style/container internal-state customization-color theme) :on-press on-press
:on-press-in on-press-in :accessibility-label :token-network}
:on-press-out on-press-out [info props]
:on-press on-press [values props]]))
:accessibility-label :token-network}
[info 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])

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

@ -9,64 +9,67 @@
[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
{:keys [crypto-value fiat-value percentage-change fiat-change]} values] fiat-value
[rn/pressable percentage-change
{:style (style/container customization-color bg-opacity theme) fiat-change]} values
:on-press-in #(reset! state :pressed) on-press-in (rn/use-callback #(set-state :pressed))
:on-press-out #(reset! state :default) on-press-out (rn/use-callback #(set-state :default))
:on-press (fn [] on-press (rn/use-callback
(reset! state :active) (fn []
(js/setTimeout #(reset! state :default) 300) (set-state :active)
on-press) (js/setTimeout #(set-state :default) 300)
:on-long-press on-long-press on-press))]
:accessibility-label :container} [rn/pressable
[rn/view {:style (style/container customization-color bg-opacity theme)
{:style {:flex-direction :row :on-press-in on-press-in
:align-items :center :on-press-out on-press-out
:flex 1}} :on-press on-press
[token/view {:token token :size :size-32}] :on-long-press on-long-press
[rn/view {:style {:margin-left 8}} :accessibility-label :container}
[text/text {:weight :semi-bold} token-name] [rn/view
[text/text {:style {:flex-direction :row
{:size :paragraph-2 :align-items :center
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} :flex 1}}
(str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]] [token/view {:token token :size :size-32}]
[rn/view [rn/view {:style {:margin-left 8}}
{:style {:align-items :flex-end [text/text {:weight :semi-bold} token-name]
:justify-content :space-between}} [text/text
[text/text {:size :paragraph-2
{:weight :medium :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
:size :paragraph-2} fiat-value] (str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]]
(when metrics? [rn/view
[rn/view {:style {:align-items :flex-end
{:style {:flex-direction :row :justify-content :space-between}}
:align-items :center}} [text/text
[text/text {:weight :medium
{:size :paragraph-2 :size :paragraph-2} fiat-value]
:style (style/metric-text status theme)} (str percentage-change "%")] (when metrics?
[rn/view {:style (style/dot-divider status theme)}] [rn/view
[text/text {:style {:flex-direction :row
{:size :paragraph-2 :align-items :center}}
:style (style/metric-text status theme)} fiat-change] [text/text
(when (not= status :empty) {:size :paragraph-2
[rn/view :style (style/metric-text status theme)} (str percentage-change "%")]
{:style {:margin-left 4} [rn/view {:style (style/dot-divider status theme)}]
:accessibility-label :arrow-icon} [text/text
[icon/icon (if (= status :positive) :i/positive :i/negative) {:size :paragraph-2
(style/arrow-icon status theme)]])])]])))) :style (style/metric-text status theme)} fiat-change]
(when (not= status :empty)
[rn/view
{:style {:margin-left 4}
:accessibility-label :arrow-icon}
[icon/icon (if (= status :positive) :i/positive :i/negative)
(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)))