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]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:on-press {:optional true} [:maybe fn?]]
[:theme :schema.common/theme]
[:title-icon {:optional true} [:maybe :keyword]]
[:account-props
[:map

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

@ -9,7 +9,6 @@
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema]))
(defn- account-view
@ -97,22 +96,23 @@
(colors/resolve-color customization-color theme))}]])
(defn- internal-view
[_]
(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]
[{:keys [type state blur? customization-color on-press]
:or {customization-color :blue
type :default
state :default
blur? false}
: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
{:style (style/container
{:state state
:blur? blur?
:customization-color customization-color
:pressed? @pressed?})
:pressed? pressed?})
:on-press-in on-press-in
:on-press on-press
:on-press-out on-press-out
@ -130,8 +130,6 @@
[options-button props]
(and (= type :default) (= state :selected))
[check-icon props])]])))
[check-icon props])]]))
(def view
(quo.theme/with-theme
(schema/instrument #'internal-view component-schema/?schema)))
(def view (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]]
[:blur? {:optional true} [:maybe :boolean]]
[:on-press {:optional true} [:maybe fn?]]
[:theme :schema.common/theme]
[:account-props
[:map {:closed true}
[: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.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema]))
(defn- internal-view
[]
(let [state (reagent/atom :default)]
(fn [{:keys [action blur? account-props networks on-press on-options-press theme]}]
[{:keys [action blur? account-props networks on-press on-options-press]}]
(let [theme (quo.theme/use-theme-value)
[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
{:style (style/container {:state @state :blur? blur? :theme theme})
:on-press-in #(reset! state :pressed)
:on-press-out #(reset! state :default)
{:style (style/container {:state state :blur? blur? :theme theme})
:on-press-in on-press-in
:on-press-out on-press-out
:on-press on-press
:accessibility-label :container}
[rn/view {:style style/left-container}
@ -39,8 +40,6 @@
{:color (if blur?
colors/white-opa-70
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
:accessibility-label :icon}]])])))
:accessibility-label :icon}]])]))
(def view
(quo.theme/with-theme
(schema/instrument #'internal-view component-schema/?schema)))
(def view (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]]
[:on-press {:optional true} [:maybe fn?]]
[:blur? {:optional true} [:maybe :boolean]]
[:theme :schema.common/theme]
[:active-state? {:optional true} [:maybe :boolean]]]]
:any])

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

@ -1,13 +1,12 @@
(ns quo.components.list-items.address.view
(:require
[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.markdown.text :as text]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema]
[utils.address :as address]))
@ -39,23 +38,27 @@
(address/get-shortened-key address)]]]])
(defn- internal-view
[]
(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]
[{:keys [networks address customization-color on-press active-state? blur?]
: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)]
(when @timer (js/clearTimeout @timer))
(reset! timer nil)
(reset! active? (= new-state :active))
(reset! state new-state)))]
(set-state new-state)))
[active-state?])]
[rn/pressable
{:style (style/container @state customization-color blur?)
{:style (style/container state customization-color blur?)
:on-press-in on-press-in
:on-press-out on-press-out
:on-press on-press
@ -64,9 +67,6 @@
{:theme theme
:networks networks
:address address
:blur? blur?}]]))))
(def view
(quo.theme/with-theme
(schema/instrument #'internal-view component-schema/?schema)))
:blur? blur?}]]))
(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.list-items.channel.style :as style]
[quo.components.markdown.text :as quo.text]
[quo.theme :as theme]
[react-native.core :as rn]
[reagent.core :as reagent]))
[quo.theme]
[react-native.core :as rn]))
(defn- view-internal
(defn view
"Options:
- notification - (nil/:notification/:mention/:mute, default: nil):
- :notification - Display a grey dot.
@ -27,17 +26,18 @@
- 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.
- theme - Theme value from with-theme HOC"
[]
(let [pressed? (reagent/atom false)]
(fn [{:keys [notification locked? mentions-count customization-color emoji name on-press
on-long-press theme]}]
[{:keys [notification locked? mentions-count customization-color emoji name on-press on-long-press]}]
(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))]
[rn/pressable
{:style (style/container @pressed? customization-color theme)
{:style (style/container pressed? customization-color theme)
:accessibility-label :channel-list-item
:on-press on-press
:on-long-press on-long-press
:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? false)}
:on-press-in on-press-in
:on-press-out on-press-out}
[channel-avatar/view
{:size :size-32
:locked? locked?
@ -59,6 +59,4 @@
:notification [quo.icons/icon :i/notification
{:color (style/mute-notification-icon-color theme)
:accessibility-label :unviewed-messages-public}]
nil))])))
(def view (theme/with-theme view-internal))
nil))]))

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

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

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

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

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

@ -5,7 +5,6 @@
[quo.components.markdown.text :as text]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema]))
(defn- info
@ -22,7 +21,8 @@
(if (string/blank? label) "-" label)]]])
(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}
[text/text
{:weight :medium
@ -33,7 +33,7 @@
{:style (style/fiat-value theme)
:size :paragraph-2
:number-of-lines 1}
fiat-value]])
fiat-value]]))
(def ?schema
[:=>
@ -51,17 +51,14 @@
:any])
(defn- view-internal
[]
(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]
[{:keys [on-press state customization-color]
:as props
:or {customization-color :blue}}]
(let [internal-state (if @pressed?
:pressed
state)]
(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))
internal-state (if pressed? :pressed state)]
[rn/pressable
{:style (style/container internal-state customization-color theme)
:on-press-in on-press-in
@ -69,8 +66,6 @@
:on-press on-press
:accessibility-label :network-list}
[info props]
[values props]]))))
[values props]]))
(def view
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))
(def view (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.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]
[utils.address :as address]))
(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}
[wallet-user-avatar/wallet-user-avatar
{:size :size-32
@ -28,31 +28,32 @@
{:size :paragraph-2
:weight :monospace
:style (style/account-address blur? theme)}
(or ens (address/get-shortened-key address))]]]])
(or ens (address/get-shortened-key address))]]]]))
(defn- internal-view
[]
(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]
(defn view
[{:keys [blur? user-props active-state? customization-color on-press on-options-press]
:or {customization-color :blue
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)]
(when @timer (js/clearTimeout @timer))
(reset! timer nil)
(reset! active? (= new-state :active))
(reset! state new-state)))]
(set-state new-state)))
[active-state?])]
[rn/pressable
{: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-out on-press-out
:on-press on-press
@ -71,6 +72,4 @@
[icon/icon :i/options
{:color (if blur?
colors/white-opa-70
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])]))))
(def view (quo.theme/with-theme internal-view))
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])]))

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

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

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

@ -9,13 +9,13 @@
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema]
[utils.address :as address]
[utils.i18n :as i18n]))
(defn- account
[{:keys [emoji name address customization-color theme]}]
[{:keys [emoji name address customization-color]}]
(let [theme (quo.theme/use-theme-value)]
[rn/view
{:accessibility-label :account-container
:style style/account-container}
@ -33,36 +33,38 @@
{:size :paragraph-2
:weight :monospace
:style (style/account-address theme)}
(address/get-shortened-key address)]])
(address/get-shortened-key address)]]))
(defn- internal-view
[]
(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]
[{:keys [contact-props accounts active-state? customization-color on-press]
:or {customization-color :blue
accounts []
active-state? true}}]
(let [accounts-count (count accounts)
account-props (when (= accounts-count 1)
(first accounts))
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 (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)]
(when @timer (js/clearTimeout @timer))
(reset! timer nil)
(reset! active? (= new-state :active))
(reset! state new-state)))]
(set-state new-state)))
[active-state?])]
[rn/pressable
{:style (style/container
{:state @state :customization-color customization-color})
{:style (style/container {:state state :customization-color customization-color})
:on-press-in on-press-in
:on-press-out on-press-out
:on-press #(when on-press
(on-press))
:on-press on-press
:accessibility-label :container}
[rn/view {:style style/left-container}
[user-avatar/user-avatar (assoc contact-props :size :small)]
@ -90,10 +92,6 @@
[icon/icon :i/chevron-right
{:accessibility-label :check-icon
: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
(quo.theme/with-theme
(schema/instrument #'internal-view component-schema/?schema)))
(def view (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]]]]
[:on-press {:optional true} [:maybe fn?]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:state {:optional true} [:enum :default :active :selected]]
[:theme :schema.common/theme]]]
[:state {:optional true} [:enum :default :active :selected]]]]
: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.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema]))
(defn- info
@ -31,7 +30,8 @@
networks]]])
(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)
[icon/icon :i/check
{:color (style/check-color customization-color theme)
@ -46,20 +46,17 @@
{:style (style/fiat-value theme)
:size :paragraph-2
:number-of-lines 1}
fiat-value]]))
fiat-value]])))
(defn- view-internal
[]
(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]
[{:keys [on-press state customization-color _token _networks _token-value _fiat-value]
:as props
:or {customization-color :blue}}]
(let [internal-state (if @pressed?
:pressed
state)]
(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))
internal-state (if pressed? :pressed state)]
[rn/pressable
{:style (style/container internal-state customization-color theme)
:on-press-in on-press-in
@ -67,8 +64,6 @@
:on-press on-press
:accessibility-label :token-network}
[info props]
[values props]]))))
[values props]]))
(def view
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))
(def view (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]
[:on-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]]
[:metrics? {:optional true} [:maybe :boolean]]]]
:any])

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

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