status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-02-22 21:38:45 +00:00
Code Issues Projects Releases Wiki Activity

migrate reagent part6 (#19270)

Browse Source
This commit is contained in:
flexsurfer 2024-04-11 16:43:33 +02:00 committed by GitHub
parent 3164cc6a6c
commit cfc43be3cc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 339 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/quo/components/notifications/activity_log/view.cljs
View File

@ -9,11 +9,10 @@
[quo.components.tags.status-tags :as status-tags] [quo.components.tags.status-tags :as status-tags]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
(defn- activity-reply-text-input (defn- activity-reply-text-input
[{:keys [on-update-reply max-reply-length valid-reply?]} reply-input] [{:keys [on-update-reply max-reply-length valid-reply?]} reply-input set-reply-input]
[rn/view [rn/view
[rn/view [rn/view
{:style {:margin-top 16 {:style {:margin-top 16
@ -26,12 +25,12 @@
(i18n/label :t/your-answer)] (i18n/label :t/your-answer)]
[text/text [text/text
{:style {:flex-shrink 1 {:style {:flex-shrink 1
:color (if (valid-reply? @reply-input) :color (if (valid-reply? reply-input)
colors/neutral-40 colors/neutral-40
colors/danger-60)}} colors/danger-60)}}
(str (count @reply-input) "/" max-reply-length)]] (str (count reply-input) "/" max-reply-length)]]
[input/input [input/input
{:on-change-text #(do (reset! reply-input %) {:on-change-text #(do (set-reply-input %)
(when on-update-reply (when on-update-reply
(on-update-reply %))) (on-update-reply %)))
:auto-capitalize :none :auto-capitalize :none
@ -136,7 +135,7 @@
(-> button (-> button
(assoc :size size) (assoc :size size)
(assoc :type subtype) (assoc :type subtype)
(assoc :disabled? (and replying? disable-when (disable-when @reply-input))) (assoc :disabled? (and replying? disable-when (disable-when reply-input)))
(assoc :inner-style (assoc :inner-style
{:justify-content :center {:justify-content :center
:padding-bottom 0 :padding-bottom 0
@ -153,17 +152,16 @@
:blur? blur?}]) :blur? blur?}])
(defn- footer (defn- footer
[_] [{:keys [replying? items] :as props}]
(let [reply-input (reagent/atom "")] (let [[reply-input set-reply-input] (rn/use-state "")]
(fn [{:keys [replying? items] :as props}]
[:<> [:<>
(when replying? (when replying?
[activity-reply-text-input props reply-input]) [activity-reply-text-input props reply-input set-reply-input])
(when items (when items
[rn/view style/footer-container [rn/view style/footer-container
(for [item items] (for [item items]
^{:key (:key item)} ^{:key (:key item)}
[footer-item-view item replying? reply-input])])]))) [footer-item-view item replying? reply-input])])]))
(defn view (defn view
[{:keys [icon [{:keys [icon

44
src/quo/components/notifications/count_down_circle.cljs
View File

@ -4,8 +4,7 @@
[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.svg :as svg] [react-native.svg :as svg]))
[reagent.core :as reagent]))
(defn- get-path-props (defn- get-path-props
[size stroke-width rotation] [size stroke-width rotation]
@ -49,20 +48,20 @@
{:color {:dark colors/neutral-80-opa-40 {:color {:dark colors/neutral-80-opa-40
:light colors/white-opa-40}}) :light colors/white-opa-40}})
(defn- circle-timer-internal (defn circle-timer
[{:keys [color duration size stroke-width trail-color rotation initial-remaining-time theme]}] [{:keys [color duration size stroke-width trail-color rotation initial-remaining-time]}]
(let [rotation (or rotation :clockwise) (let [theme (quo.theme/use-theme-value)
rotation (or rotation :clockwise)
duration (or duration 4) duration (or duration 4)
stroke-width (or stroke-width 1) stroke-width (or stroke-width 1)
size (or size 9) size (or size 9)
max-stroke-width (max stroke-width 0) max-stroke-width (max stroke-width 0)
{:keys [path path-length]} (get-path-props size max-stroke-width rotation) {:keys [path path-length]} (get-path-props size max-stroke-width rotation)
start-at (get-start-at duration initial-remaining-time) start-at (get-start-at duration initial-remaining-time)
elapsed-time (reagent/atom 0) elapsed-time (rn/use-ref-atom 0)
prev-frame-time (reagent/atom nil) prev-frame-time (rn/use-ref-atom nil)
frame-request (reagent/atom nil) frame-request (rn/use-ref-atom nil)
display-time (reagent/atom start-at) [display-time set-display-time] (rn/use-state start-at)
;; get elapsed frame time
swap-elapsed-time-each-frame (fn swap-elapsed-time-each-frame [frame-time] swap-elapsed-time-each-frame (fn swap-elapsed-time-each-frame [frame-time]
(if (nil? @prev-frame-time) (if (nil? @prev-frame-time)
(do (reset! prev-frame-time frame-time) (do (reset! prev-frame-time frame-time)
@ -72,19 +71,14 @@
(/ @prev-frame-time 1000)) (/ @prev-frame-time 1000))
current-elapsed (swap! elapsed-time + delta) current-elapsed (swap! elapsed-time + delta)
current-display-time (+ start-at current-elapsed) current-display-time (+ start-at current-elapsed)
completed? (>= current-display-time duration)] completed? (>= current-display-time
(reset! display-time (if completed? duration)]
duration (set-display-time
current-display-time)) (if completed? duration current-display-time))
(when-not completed? (when-not completed?
(reset! prev-frame-time frame-time) (reset! prev-frame-time frame-time)))))]
(reset! frame-request (js/requestAnimationFrame (rn/use-effect #(reset! frame-request (js/requestAnimationFrame swap-elapsed-time-each-frame)))
swap-elapsed-time-each-frame))))))] (rn/use-unmount #(js/cancelAnimationFrame @frame-request))
(reagent/create-class
{:component-will-unmount #(js/cancelAnimationFrame @frame-request)
:reagent-render
(fn []
(reset! frame-request (js/requestAnimationFrame swap-elapsed-time-each-frame))
[rn/view [rn/view
{:style {:position :relative {:style {:position :relative
:width size :width size
@ -95,7 +89,7 @@
:height size} :height size}
[svg/path [svg/path
{:d path :fill :none :stroke (or trail-color :transparent) :stroke-width stroke-width}] {:d path :fill :none :stroke (or trail-color :transparent) :stroke-width stroke-width}]
(when-not (= @display-time duration) (when-not (= display-time duration)
[svg/path [svg/path
{:d path {:d path
:fill :none :fill :none
@ -103,6 +97,4 @@
:stroke-linecap :square :stroke-linecap :square
:stroke-width stroke-width :stroke-width stroke-width
:stroke-dasharray path-length :stroke-dasharray path-length
:stroke-dashoffset (linear-ease @display-time 0 path-length duration)}])]])}))) :stroke-dashoffset (linear-ease display-time 0 path-length duration)}])]]))
(def circle-timer (quo.theme/with-theme circle-timer-internal))

4
src/quo/components/notifications/toast/view.cljs
View File

@ -15,10 +15,10 @@
[rn/touchable-highlight [rn/touchable-highlight
{:on-press on-press {:on-press on-press
:underlay-color :transparent} :underlay-color :transparent}
[into (into
[rn/view [rn/view
{:style (merge (style/action-container theme) style)}] {:style (merge (style/action-container theme) style)}]
children]]) children)])
(defn toast-undo-action-internal (defn toast-undo-action-internal
[{:keys [undo-duration undo-on-press theme]}] [{:keys [undo-duration undo-on-press theme]}]

29
src/quo/components/selectors/filter/view.cljs
View File

@ -3,23 +3,20 @@
[quo.components.icon :as icon] [quo.components.icon :as icon]
[quo.components.selectors.filter.style :as style] [quo.components.selectors.filter.style :as style]
[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 view-internal (defn view
[initial-props] [{:keys [blur? customization-color on-press-out pressed?]}]
(let [pressed? (reagent/atom (:pressed? initial-props))] (let [theme (quo.theme/use-theme-value)
(fn [{:keys [blur? customization-color theme on-press-out]}] [pressed? set-pressed] (rn/use-state pressed?)
on-press-out (fn []
(set-pressed (not pressed?))
(when on-press-out (on-press-out pressed?)))]
[rn/touchable-without-feedback [rn/touchable-without-feedback
{:accessibility-label :selector-filter {:accessibility-label :selector-filter
:on-press-out (fn [] :on-press-out on-press-out}
(swap! pressed? not) [rn/view {:style (style/container-outer customization-color pressed? theme)}
(when on-press-out [rn/view {:style (style/container-inner pressed? blur? theme)}
(on-press-out @pressed?)))}
[rn/view {:style (style/container-outer customization-color @pressed? theme)}
[rn/view {:style (style/container-inner @pressed? blur? theme)}
[icon/icon :i/unread [icon/icon :i/unread
{:color (style/icon-color @pressed? theme) {:color (style/icon-color pressed? theme)
:size 20}]]]]))) :size 20}]]]]))
(def view (quo.theme/with-theme view-internal))

23
src/quo/components/selectors/reactions_selector/view.cljs
View File

@ -2,23 +2,20 @@
(:require (:require
[quo.components.selectors.reaction-resource :as reactions.resource] [quo.components.selectors.reaction-resource :as reactions.resource]
[quo.components.selectors.reactions-selector.style :as style] [quo.components.selectors.reactions-selector.style :as style]
[react-native.core :as rn] [react-native.core :as rn]))
[reagent.core :as reagent]))
(defn view (defn view
[{:keys [start-pressed?]}] [{:keys [emoji container-style on-press
(let [pressed? (reagent/atom start-pressed?)] accessibility-label start-pressed?]
(fn [{:keys [emoji container-style on-press
accessibility-label]
:or {accessibility-label :reaction}}] :or {accessibility-label :reaction}}]
(let [[pressed? set-pressed] (rn/use-state start-pressed?)
on-press (fn [e]
(set-pressed (not pressed?))
(when on-press (on-press e)))]
[rn/pressable [rn/pressable
{:accessibility-label accessibility-label {:accessibility-label accessibility-label
:allow-multiple-presses? true :allow-multiple-presses? true
:style (merge (style/container @pressed?) :style (merge (style/container pressed?)
container-style) container-style)
:on-press (fn [e] :on-press on-press}
(swap! pressed? not) [rn/text (reactions.resource/system-emojis emoji)]]))
(when on-press
(on-press e)))}
[rn/text
(reactions.resource/system-emojis emoji)]])))

32
src/quo/components/selectors/selectors/view.cljs
View File

@ -3,23 +3,17 @@
[quo.components.icon :as icons] [quo.components.icon :as icons]
[quo.components.selectors.selectors.style :as style] [quo.components.selectors.selectors.style :as style]
[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- handle-press
[on-change checked-atom checked?]
(when checked-atom (swap! checked-atom not))
(when on-change (on-change (not checked?))))
(defn- base-selector (defn- base-selector
[{:keys [default-checked? checked?]}] [{:keys [default-checked? checked? disabled? blur? customization-color on-change container-style
(let [controlled-component? (some? checked?)
internal-checked? (when-not controlled-component?
(reagent/atom (or default-checked? false)))]
(fn [{:keys [checked? disabled? blur? customization-color on-change container-style
label-prefix outer-style-fn inner-style-fn icon-style-fn theme] label-prefix outer-style-fn inner-style-fn icon-style-fn theme]
:or {customization-color :blue}}] :or {customization-color :blue}}]
(let [actual-checked? (if controlled-component? checked? @internal-checked?) (let [controlled-component? (some? checked?)
[internal-checked?
set-internal-checked?] (rn/use-state (when-not controlled-component?
(or default-checked? false)))
actual-checked? (if controlled-component? checked? internal-checked?)
accessibility-label (str label-prefix "-" (if actual-checked? "on" "off")) accessibility-label (str label-prefix "-" (if actual-checked? "on" "off"))
test-id (str label-prefix "-component") test-id (str label-prefix "-component")
outer-styles (outer-style-fn {:checked? actual-checked? outer-styles (outer-style-fn {:checked? actual-checked?
@ -27,10 +21,16 @@
:blur? blur? :blur? blur?
:container-style container-style :container-style container-style
:customization-color customization-color :customization-color customization-color
:theme theme})] :theme theme})
on-press (rn/use-callback
(fn []
(when-not (nil? internal-checked?)
(set-internal-checked? (not internal-checked?)))
(when on-change (on-change (not actual-checked?))))
[internal-checked? actual-checked? on-change])]
[rn/pressable [rn/pressable
(when-not disabled? (when-not disabled?
{:on-press #(handle-press on-change internal-checked? actual-checked?) {:on-press on-press
:allow-multiple-presses? true}) :allow-multiple-presses? true})
[rn/view [rn/view
{:style outer-styles {:style outer-styles
@ -43,7 +43,7 @@
:blur? blur? :blur? blur?
:customization-color customization-color})} :customization-color customization-color})}
(when (and icon-style-fn actual-checked?) (when (and icon-style-fn actual-checked?)
[icons/icon :i/check-small (icon-style-fn actual-checked? blur? theme)])]]])))) [icons/icon :i/check-small (icon-style-fn actual-checked? blur? theme)])]]]))
(defn- toggle (defn- toggle
[props] [props]

1
src/quo/components/tags/collectible_tag/schema.cljs
View File

@ -8,7 +8,6 @@
[:options {:optional true} [:maybe [:enum :add :hold]]] [:options {:optional true} [:maybe [:enum :add :hold]]]
[:size {:optional true} [:maybe [:enum :size-24 :size-32]]] [:size {:optional true} [:maybe [:enum :size-24 :size-32]]]
[:blur? {:optional true} [:maybe :boolean]] [:blur? {:optional true} [:maybe :boolean]]
[:theme :schema.common/theme]
[:collectible-img-src :schema.common/image-source] [:collectible-img-src :schema.common/image-source]
[:collectible-name :string] [:collectible-name :string]
[:collectible-id :string]]]] [:collectible-id :string]]]]

25
src/quo/components/tags/collectible_tag/view.cljs
View File

@ -8,21 +8,20 @@
[quo.theme] [quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.hole-view :as hole-view] [react-native.hole-view :as hole-view]
[reagent.core :as reagent]
[schema.core :as schema])) [schema.core :as schema]))
(defn- view-internal (defn- view-internal
[] [{:keys [options blur? collectible-img-src collectible-name collectible-id] :as props}]
(let [container-width (reagent/atom 0) (let [theme (quo.theme/use-theme-value)
on-layout #(->> (oops/oget % :nativeEvent :layout :width) [container-width
(reset! container-width))] set-container-width] (rn/use-state 0)
(fn [{:keys [options blur? theme collectible-img-src collectible-name collectible-id] :as props}] on-layout (rn/use-callback
(let [size (or (:size props) :size-24)] #(set-container-width (oops/oget % :nativeEvent :layout :width)))
[rn/view size (or (:size props) :size-24)]
{:on-layout on-layout} [rn/view {:on-layout on-layout}
[hole-view/hole-view [hole-view/hole-view
{:holes (if options {:holes (if options
[{:x (- @container-width [{:x (- container-width
(case size (case size
:size-24 10 :size-24 10
:size-32 12 :size-32 12
@ -52,8 +51,6 @@
[rn/view {:style (style/options-icon size)} [rn/view {:style (style/options-icon size)}
[icons/icon (if (= options :hold) :i/hold :i/add-token) [icons/icon (if (= options :hold) :i/hold :i/add-token)
{:size 20 {:size 20
:no-color true}]])])))) :no-color true}]])]))
(def view (def view (schema/instrument #'view-internal component-schema/?schema))
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))

121
src/quo/components/tags/tags.cljs
View File

@ -50,68 +50,38 @@
- `fade-end-percentage` Percentage where fading starts relative to the total - `fade-end-percentage` Percentage where fading starts relative to the total
layout width of the `flat-list` data." layout width of the `flat-list` data."
[{:keys [default-active fade-end-percentage] [{:keys [default-active data fade-end-percentage fade-end? on-change on-scroll scroll-event-throttle
:or {fade-end-percentage 0.8}}]
(let [active-tab-id (reagent/atom default-active)
fading (reagent/atom {:fade-end-percentage fade-end-percentage})
flat-list-ref (atom nil)]
(fn
[{:keys [data
fade-end-percentage
fade-end?
on-change
on-scroll
scroll-event-throttle
scrollable? scrollable?
scroll-on-press? scroll-on-press? size type labelled? disabled? blurred? icon-color]
size :or {fade-end-percentage 0.8
type
labelled?
disabled?
blurred?
icon-color]
:or {fade-end-percentage fade-end-percentage
fade-end? false fade-end? false
scroll-event-throttle 64 scroll-event-throttle 64
scrollable? false scrollable? false
scroll-on-press? false scroll-on-press? false
size default-tab-size} size default-tab-size}
:as props}] :as props}]
(let [maybe-mask-wrapper (if fade-end? (let [[active-tab-id
set-active-tab-id] (rn/use-state default-active)
[fading set-fading] (rn/use-state {:fade-end-percentage fade-end-percentage})
flat-list-ref (rn/use-ref-atom nil)
maybe-mask-wrapper (rn/use-memo
(fn []
(if fade-end?
[masked-view/masked-view [masked-view/masked-view
{:mask-element (reagent/as-element {:mask-element (reagent/as-element
[linear-gradient/linear-gradient [linear-gradient/linear-gradient
{:colors [:black :transparent] {:colors [:black :transparent]
:locations [(get @fading :fade-end-percentage) :locations [(get fading :fade-end-percentage)
1] 1]
:start {:x 0 :y 0} :start {:x 0 :y 0}
:end {:x 1 :y 0} :end {:x 1 :y 0}
:pointer-events :none :pointer-events :none
:style {:width "100%" :style {:width "100%"
:height "100%"}}])}] :height "100%"}}])}]
[:<>])] [:<>]))
(if scrollable? [fade-end? fading])
(conj on-scroll (rn/use-context
maybe-mask-wrapper (fn [^js e]
[rn/flat-list
(merge
(dissoc props
:default-active
:fade-end-percentage
:fade-end?
:on-change
:scroll-on-press?
:size)
(when scroll-on-press?
{:initial-scroll-index (utils.collection/first-index #(= @active-tab-id (:id %)) data)})
{:ref #(reset! flat-list-ref %)
:extra-data (str @active-tab-id)
:horizontal true
:scroll-event-throttle scroll-event-throttle
:shows-horizontal-scroll-indicator false
:data data
:key-fn (comp str :id)
:on-scroll (fn [^js e]
(when fade-end? (when fade-end?
(let [offset-x (oget e "nativeEvent.contentOffset.x") (let [offset-x (oget e "nativeEvent.contentOffset.x")
content-width (oget e "nativeEvent.contentSize.width") content-width (oget e "nativeEvent.contentSize.width")
@ -122,19 +92,24 @@
:layout-width layout-width :layout-width layout-width
:max-fade-percentage fade-end-percentage})] :max-fade-percentage fade-end-percentage})]
;; Avoid unnecessary re-rendering. ;; Avoid unnecessary re-rendering.
(when (not= new-percentage (get @fading :fade-end-percentage)) (when (not= new-percentage (get fading :fade-end-percentage))
(swap! fading assoc :fade-end-percentage new-percentage)))) (set-fading (assoc fading :fade-end-percentage new-percentage)))))
(when on-scroll (when on-scroll
(on-scroll e))) (on-scroll e)))
:render-fn (fn [{:keys [id label resource]} index] [fade-end? fading fade-end-percentage])
data-count (count data)
style-padding-left (get-in props [:style :padding-left])
render-fn (rn/use-callback
(fn [{:keys [id label resource]} index]
[rn/view [rn/view
{:style {:margin-right (if (= size default-tab-size) 12 8) {:style {:margin-right (if (= size default-tab-size) 12 8)
:padding-right (when (= index (dec (count data))) :padding-right (when (= index (dec data-count))
(get-in props [:style :padding-left]))}} style-padding-left)}}
[tag/tag [tag/tag
{:id id {:id id
:size size :size size
:active (= id @active-tab-id) :active (= id active-tab-id)
:resource resource :resource resource
:blurred? blurred? :blurred? blurred?
:icon-color icon-color :icon-color icon-color
@ -145,7 +120,7 @@
:type type :type type
:labelled? labelled? :labelled? labelled?
:on-press (fn [id] :on-press (fn [id]
(reset! active-tab-id id) (set-active-tab-id id)
(when scroll-on-press? (when scroll-on-press?
(.scrollToIndex ^js @flat-list-ref (.scrollToIndex ^js @flat-list-ref
#js #js
@ -153,13 +128,44 @@
:index index :index index
:viewPosition 0.5})) :viewPosition 0.5}))
(when on-change (when on-change
(on-change id)))}]])})]) (on-change id)))}]])
[size default-tab-size data-count style-padding-left active-tab-id blurred?
icon-color disabled? labelled? type scroll-on-press? on-change])
on-press (rn/use-callback #(do (set-active-tab-id %) (when on-change (on-change %)))
[on-change])
key-fn (rn/use-callback (comp str :id))
ref (rn/use-callback #(reset! flat-list-ref %))
clean-props (dissoc props
:default-active
:fade-end-percentage
:fade-end?
:on-change
:scroll-on-press?
:size)]
(if scrollable?
(conj
maybe-mask-wrapper
[rn/flat-list
(merge
clean-props
(when scroll-on-press?
{:initial-scroll-index (utils.collection/first-index #(= active-tab-id (:id %)) data)})
{:ref ref
:extra-data (str active-tab-id)
:horizontal true
:scroll-event-throttle scroll-event-throttle
:shows-horizontal-scroll-indicator false
:data data
:key-fn key-fn
:on-scroll on-scroll
:render-fn render-fn})])
[rn/view {:style {:flex-direction :row}} [rn/view {:style {:flex-direction :row}}
(for [{:keys [id label resource]} data] (for [{:keys [id label resource]} data]
^{:key id} ^{:key id}
[rn/view {:style {:margin-right 8}} [rn/view {:style {:margin-right 8}}
[tag/tag [tag/tag
(merge {:id id {:id id
:size size :size size
:type type :type type
:label (if labelled? :label (if labelled?
@ -170,8 +176,5 @@
:blurred? blurred? :blurred? blurred?
:icon-color icon-color :icon-color icon-color
:labelled? (if (= type :label) true labelled?) :labelled? (if (= type :label) true labelled?)
:resource (if (= type :icon) :resource (if (= type :icon) :i/placeholder resource)
:i/placeholder :on-press on-press}]])])))
resource)
:on-press #(do (reset! active-tab-id %)
(when on-change (on-change %)))})]])])))))

24
src/quo/components/tags/token_tag/view.cljs
View File

@ -7,10 +7,9 @@
[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]
[react-native.hole-view :as hole-view] [react-native.hole-view :as hole-view]))
[reagent.core :as reagent]))
(defn- view-internal (defn view
"Options: "Options:
- :options - false / :add / :hold (default false) - :options - false / :add / :hold (default false)
- :size - :size-24 / :size-32 (default :size-24) - :size - :size-24 / :size-32 (default :size-24)
@ -18,16 +17,17 @@
- :theme - :light / :dark - :theme - :light / :dark
- :token-value - string - token value - :token-value - string - token value
- :token-symbol - string" - :token-symbol - string"
[] [{:keys [options size blur? token-value token-img-src token-symbol]
(let [container-width (reagent/atom 0)]
(fn [{:keys [options size blur? theme token-value token-img-src token-symbol]
:or {size :size-24}}] :or {size :size-24}}]
[rn/view (let [theme (quo.theme/use-theme-value)
{:on-layout #(reset! container-width [container-width
(oget % :nativeEvent :layout :width))} set-container-width] (rn/use-state 0)
on-layout (rn/use-callback #(set-container-width
(oget % :nativeEvent :layout :width)))]
[rn/view {:on-layout on-layout}
[hole-view/hole-view [hole-view/hole-view
{:holes (if options {:holes (if options
[{:x (- @container-width [{:x (- container-width
(case size (case size
:size-24 10 :size-24 10
:size-32 12 :size-32 12
@ -57,6 +57,4 @@
[rn/view {:style (style/options-icon size)} [rn/view {:style (style/options-icon size)}
[icons/icon (if (= options :hold) :i/hold :i/add-token) [icons/icon (if (= options :hold) :i/hold :i/add-token)
{:size 20 {:size 20
:no-color true}]])]))) :no-color true}]])]))
(def view (quo.theme/with-theme view-internal))

2
src/status_im/common/toasts/view.cljs
View File

@ -61,4 +61,4 @@
(->> (rf/sub [:toasts]) (->> (rf/sub [:toasts])
:ordered :ordered
(into [rn/view {:style (style/outmost-transparent-container)}] (into [rn/view {:style (style/outmost-transparent-container)}]
(map #(with-meta [:f> f-container %] {:key %}))))) (map #(with-meta [f-container %] {:key %})))))

3
src/status_im/navigation/view.cljs
View File

@ -54,7 +54,6 @@
(defn screen (defn screen
[screen-key] [screen-key]
(reagent.core/reactify-component (reagent.core/reactify-component
(fn [] (fn []
(let [screen-details (get (if js/goog.DEBUG (let [screen-details (get (if js/goog.DEBUG
@ -110,7 +109,7 @@
sheet])]])) sheet])]]))
functional-compiler)) functional-compiler))
(def toasts (reagent/reactify-component toasts/toasts)) (def toasts (reagent/reactify-component toasts/toasts functional-compiler))
(def alert-banner (def alert-banner
(reagent/reactify-component (reagent/reactify-component