From cfc43be3cc6283317b95432dac40a9971e2359e9 Mon Sep 17 00:00:00 2001 From: flexsurfer Date: Thu, 11 Apr 2024 16:43:33 +0200 Subject: [PATCH] migrate reagent part6 (#19270) --- .../notifications/activity_log/view.cljs | 32 ++- .../notifications/count_down_circle.cljs | 110 ++++----- .../components/notifications/toast/view.cljs | 4 +- src/quo/components/selectors/filter/view.cljs | 35 ++- .../selectors/reactions_selector/view.cljs | 33 ++- .../components/selectors/selectors/view.cljs | 70 +++--- .../tags/collectible_tag/schema.cljs | 1 - .../components/tags/collectible_tag/view.cljs | 87 ++++--- src/quo/components/tags/tags.cljs | 233 +++++++++--------- src/quo/components/tags/token_tag/view.cljs | 88 ++++--- src/status_im/common/toasts/view.cljs | 2 +- src/status_im/navigation/view.cljs | 3 +- 12 files changed, 339 insertions(+), 359 deletions(-) diff --git a/src/quo/components/notifications/activity_log/view.cljs b/src/quo/components/notifications/activity_log/view.cljs index 6d047c2722..9b4d3ef4a0 100644 --- a/src/quo/components/notifications/activity_log/view.cljs +++ b/src/quo/components/notifications/activity_log/view.cljs @@ -9,11 +9,10 @@ [quo.components.tags.status-tags :as status-tags] [quo.foundations.colors :as colors] [react-native.core :as rn] - [reagent.core :as reagent] [utils.i18n :as i18n])) (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 {:style {:margin-top 16 @@ -26,12 +25,12 @@ (i18n/label :t/your-answer)] [text/text {:style {:flex-shrink 1 - :color (if (valid-reply? @reply-input) + :color (if (valid-reply? reply-input) colors/neutral-40 colors/danger-60)}} - (str (count @reply-input) "/" max-reply-length)]] + (str (count reply-input) "/" max-reply-length)]] [input/input - {:on-change-text #(do (reset! reply-input %) + {:on-change-text #(do (set-reply-input %) (when on-update-reply (on-update-reply %))) :auto-capitalize :none @@ -136,7 +135,7 @@ (-> button (assoc :size size) (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 {:justify-content :center :padding-bottom 0 @@ -153,17 +152,16 @@ :blur? blur?}]) (defn- footer - [_] - (let [reply-input (reagent/atom "")] - (fn [{:keys [replying? items] :as props}] - [:<> - (when replying? - [activity-reply-text-input props reply-input]) - (when items - [rn/view style/footer-container - (for [item items] - ^{:key (:key item)} - [footer-item-view item replying? reply-input])])]))) + [{:keys [replying? items] :as props}] + (let [[reply-input set-reply-input] (rn/use-state "")] + [:<> + (when replying? + [activity-reply-text-input props reply-input set-reply-input]) + (when items + [rn/view style/footer-container + (for [item items] + ^{:key (:key item)} + [footer-item-view item replying? reply-input])])])) (defn view [{:keys [icon diff --git a/src/quo/components/notifications/count_down_circle.cljs b/src/quo/components/notifications/count_down_circle.cljs index 51ec1d08f8..82abad70b1 100644 --- a/src/quo/components/notifications/count_down_circle.cljs +++ b/src/quo/components/notifications/count_down_circle.cljs @@ -4,8 +4,7 @@ [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] - [react-native.svg :as svg] - [reagent.core :as reagent])) + [react-native.svg :as svg])) (defn- get-path-props [size stroke-width rotation] @@ -49,60 +48,53 @@ {:color {:dark colors/neutral-80-opa-40 :light colors/white-opa-40}}) -(defn- circle-timer-internal - [{:keys [color duration size stroke-width trail-color rotation initial-remaining-time theme]}] - (let [rotation (or rotation :clockwise) - duration (or duration 4) - stroke-width (or stroke-width 1) - size (or size 9) - max-stroke-width (max stroke-width 0) - {:keys [path path-length]} (get-path-props size max-stroke-width rotation) - start-at (get-start-at duration initial-remaining-time) - elapsed-time (reagent/atom 0) - prev-frame-time (reagent/atom nil) - frame-request (reagent/atom nil) - display-time (reagent/atom start-at) - ;; get elapsed frame time - swap-elapsed-time-each-frame (fn swap-elapsed-time-each-frame [frame-time] - (if (nil? @prev-frame-time) - (do (reset! prev-frame-time frame-time) - (reset! frame-request (js/requestAnimationFrame - swap-elapsed-time-each-frame))) - (let [delta (- (/ frame-time 1000) - (/ @prev-frame-time 1000)) - current-elapsed (swap! elapsed-time + delta) - current-display-time (+ start-at current-elapsed) - completed? (>= current-display-time duration)] - (reset! display-time (if completed? - duration - current-display-time)) - (when-not completed? - (reset! prev-frame-time frame-time) - (reset! frame-request (js/requestAnimationFrame - swap-elapsed-time-each-frame))))))] - (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 - {:style {:position :relative - :width size - :height size}} - [svg/svg - {:view-box (str "0 0 " size " " size) - :width size - :height size} - [svg/path - {:d path :fill :none :stroke (or trail-color :transparent) :stroke-width stroke-width}] - (when-not (= @display-time duration) - [svg/path - {:d path - :fill :none - :stroke (or color (get-in themes [:color theme])) - :stroke-linecap :square - :stroke-width stroke-width - :stroke-dasharray path-length - :stroke-dashoffset (linear-ease @display-time 0 path-length duration)}])]])}))) - -(def circle-timer (quo.theme/with-theme circle-timer-internal)) +(defn circle-timer + [{:keys [color duration size stroke-width trail-color rotation initial-remaining-time]}] + (let [theme (quo.theme/use-theme-value) + rotation (or rotation :clockwise) + duration (or duration 4) + stroke-width (or stroke-width 1) + size (or size 9) + max-stroke-width (max stroke-width 0) + {:keys [path path-length]} (get-path-props size max-stroke-width rotation) + start-at (get-start-at duration initial-remaining-time) + elapsed-time (rn/use-ref-atom 0) + prev-frame-time (rn/use-ref-atom nil) + frame-request (rn/use-ref-atom nil) + [display-time set-display-time] (rn/use-state start-at) + swap-elapsed-time-each-frame (fn swap-elapsed-time-each-frame [frame-time] + (if (nil? @prev-frame-time) + (do (reset! prev-frame-time frame-time) + (reset! frame-request (js/requestAnimationFrame + swap-elapsed-time-each-frame))) + (let [delta (- (/ frame-time 1000) + (/ @prev-frame-time 1000)) + current-elapsed (swap! elapsed-time + delta) + current-display-time (+ start-at current-elapsed) + completed? (>= current-display-time + duration)] + (set-display-time + (if completed? duration current-display-time)) + (when-not completed? + (reset! prev-frame-time frame-time)))))] + (rn/use-effect #(reset! frame-request (js/requestAnimationFrame swap-elapsed-time-each-frame))) + (rn/use-unmount #(js/cancelAnimationFrame @frame-request)) + [rn/view + {:style {:position :relative + :width size + :height size}} + [svg/svg + {:view-box (str "0 0 " size " " size) + :width size + :height size} + [svg/path + {:d path :fill :none :stroke (or trail-color :transparent) :stroke-width stroke-width}] + (when-not (= display-time duration) + [svg/path + {:d path + :fill :none + :stroke (or color (get-in themes [:color theme])) + :stroke-linecap :square + :stroke-width stroke-width + :stroke-dasharray path-length + :stroke-dashoffset (linear-ease display-time 0 path-length duration)}])]])) diff --git a/src/quo/components/notifications/toast/view.cljs b/src/quo/components/notifications/toast/view.cljs index 336b3f901d..d409528d01 100644 --- a/src/quo/components/notifications/toast/view.cljs +++ b/src/quo/components/notifications/toast/view.cljs @@ -15,10 +15,10 @@ [rn/touchable-highlight {:on-press on-press :underlay-color :transparent} - [into + (into [rn/view {:style (merge (style/action-container theme) style)}] - children]]) + children)]) (defn toast-undo-action-internal [{:keys [undo-duration undo-on-press theme]}] diff --git a/src/quo/components/selectors/filter/view.cljs b/src/quo/components/selectors/filter/view.cljs index a3c1374af5..9a07d5b473 100644 --- a/src/quo/components/selectors/filter/view.cljs +++ b/src/quo/components/selectors/filter/view.cljs @@ -3,23 +3,20 @@ [quo.components.icon :as icon] [quo.components.selectors.filter.style :as style] [quo.theme :as quo.theme] - [react-native.core :as rn] - [reagent.core :as reagent])) + [react-native.core :as rn])) -(defn view-internal - [initial-props] - (let [pressed? (reagent/atom (:pressed? initial-props))] - (fn [{:keys [blur? customization-color theme on-press-out]}] - [rn/touchable-without-feedback - {:accessibility-label :selector-filter - :on-press-out (fn [] - (swap! pressed? not) - (when on-press-out - (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 - {:color (style/icon-color @pressed? theme) - :size 20}]]]]))) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [blur? customization-color on-press-out pressed?]}] + (let [theme (quo.theme/use-theme-value) + [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 + {:accessibility-label :selector-filter + :on-press-out on-press-out} + [rn/view {:style (style/container-outer customization-color pressed? theme)} + [rn/view {:style (style/container-inner pressed? blur? theme)} + [icon/icon :i/unread + {:color (style/icon-color pressed? theme) + :size 20}]]]])) diff --git a/src/quo/components/selectors/reactions_selector/view.cljs b/src/quo/components/selectors/reactions_selector/view.cljs index 7aa6ce4f96..393273c6c2 100644 --- a/src/quo/components/selectors/reactions_selector/view.cljs +++ b/src/quo/components/selectors/reactions_selector/view.cljs @@ -2,23 +2,20 @@ (:require [quo.components.selectors.reaction-resource :as reactions.resource] [quo.components.selectors.reactions-selector.style :as style] - [react-native.core :as rn] - [reagent.core :as reagent])) + [react-native.core :as rn])) (defn view - [{:keys [start-pressed?]}] - (let [pressed? (reagent/atom start-pressed?)] - (fn [{:keys [emoji container-style on-press - accessibility-label] - :or {accessibility-label :reaction}}] - [rn/pressable - {:accessibility-label accessibility-label - :allow-multiple-presses? true - :style (merge (style/container @pressed?) - container-style) - :on-press (fn [e] - (swap! pressed? not) - (when on-press - (on-press e)))} - [rn/text - (reactions.resource/system-emojis emoji)]]))) + [{:keys [emoji container-style on-press + accessibility-label start-pressed?] + :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 + {:accessibility-label accessibility-label + :allow-multiple-presses? true + :style (merge (style/container pressed?) + container-style) + :on-press on-press} + [rn/text (reactions.resource/system-emojis emoji)]])) diff --git a/src/quo/components/selectors/selectors/view.cljs b/src/quo/components/selectors/selectors/view.cljs index 85f7530533..db7fcb84c9 100644 --- a/src/quo/components/selectors/selectors/view.cljs +++ b/src/quo/components/selectors/selectors/view.cljs @@ -3,47 +3,47 @@ [quo.components.icon :as icons] [quo.components.selectors.selectors.style :as style] [quo.theme :as quo.theme] - [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?)))) + [react-native.core :as rn])) (defn- base-selector - [{:keys [default-checked? checked?]}] - (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] - :or {customization-color :blue}}] - (let [actual-checked? (if controlled-component? checked? @internal-checked?) - accessibility-label (str label-prefix "-" (if actual-checked? "on" "off")) - test-id (str label-prefix "-component") - outer-styles (outer-style-fn {:checked? actual-checked? + [{:keys [default-checked? checked? disabled? blur? customization-color on-change container-style + label-prefix outer-style-fn inner-style-fn icon-style-fn theme] + :or {customization-color :blue}}] + (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")) + test-id (str label-prefix "-component") + outer-styles (outer-style-fn {:checked? actual-checked? :disabled? disabled? :blur? blur? :container-style container-style :customization-color customization-color - :theme theme})] - [rn/pressable - (when-not disabled? - {:on-press #(handle-press on-change internal-checked? actual-checked?) - :allow-multiple-presses? true}) - [rn/view - {:style outer-styles - :needs-offscreen-alpha-compositing true - :accessibility-label accessibility-label - :testID test-id} - [rn/view - {:style (inner-style-fn {:theme theme - :checked? actual-checked? - :blur? blur? - :customization-color customization-color})} - (when (and icon-style-fn actual-checked?) - [icons/icon :i/check-small (icon-style-fn actual-checked? blur? 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 + (when-not disabled? + {:on-press on-press + :allow-multiple-presses? true}) + [rn/view + {:style outer-styles + :needs-offscreen-alpha-compositing true + :accessibility-label accessibility-label + :testID test-id} + [rn/view + {:style (inner-style-fn {:theme theme + :checked? actual-checked? + :blur? blur? + :customization-color customization-color})} + (when (and icon-style-fn actual-checked?) + [icons/icon :i/check-small (icon-style-fn actual-checked? blur? theme)])]]])) (defn- toggle [props] diff --git a/src/quo/components/tags/collectible_tag/schema.cljs b/src/quo/components/tags/collectible_tag/schema.cljs index f387868810..efd2e28aea 100644 --- a/src/quo/components/tags/collectible_tag/schema.cljs +++ b/src/quo/components/tags/collectible_tag/schema.cljs @@ -8,7 +8,6 @@ [:options {:optional true} [:maybe [:enum :add :hold]]] [:size {:optional true} [:maybe [:enum :size-24 :size-32]]] [:blur? {:optional true} [:maybe :boolean]] - [:theme :schema.common/theme] [:collectible-img-src :schema.common/image-source] [:collectible-name :string] [:collectible-id :string]]]] diff --git a/src/quo/components/tags/collectible_tag/view.cljs b/src/quo/components/tags/collectible_tag/view.cljs index b5a707ad12..96852903a3 100644 --- a/src/quo/components/tags/collectible_tag/view.cljs +++ b/src/quo/components/tags/collectible_tag/view.cljs @@ -8,52 +8,49 @@ [quo.theme] [react-native.core :as rn] [react-native.hole-view :as hole-view] - [reagent.core :as reagent] [schema.core :as schema])) (defn- view-internal - [] - (let [container-width (reagent/atom 0) - on-layout #(->> (oops/oget % :nativeEvent :layout :width) - (reset! container-width))] - (fn [{:keys [options blur? theme collectible-img-src collectible-name collectible-id] :as props}] - (let [size (or (:size props) :size-24)] - [rn/view - {:on-layout on-layout} - [hole-view/hole-view - {:holes (if options - [{:x (- @container-width - (case size - :size-24 10 - :size-32 12 - nil)) - :y (case size - :size-24 -6 - :size-32 -4 - nil) - :width 16 - :height 16 - :borderRadius 8}] - [])} - [rn/view {:style (style/container size options blur? theme)} - [rn/image {:style (style/collectible-img size) :source collectible-img-src}] - [text/text - {:size :paragraph-2 - :weight :medium - :style (style/label theme)} - collectible-name] - [text/text - {:size :paragraph-2 - :weight :medium - :margin-left 5 - :style (style/label theme)} - collectible-id]]] - (when options - [rn/view {:style (style/options-icon size)} - [icons/icon (if (= options :hold) :i/hold :i/add-token) - {:size 20 - :no-color true}]])])))) + [{:keys [options blur? collectible-img-src collectible-name collectible-id] :as props}] + (let [theme (quo.theme/use-theme-value) + [container-width + set-container-width] (rn/use-state 0) + on-layout (rn/use-callback + #(set-container-width (oops/oget % :nativeEvent :layout :width))) + size (or (:size props) :size-24)] + [rn/view {:on-layout on-layout} + [hole-view/hole-view + {:holes (if options + [{:x (- container-width + (case size + :size-24 10 + :size-32 12 + nil)) + :y (case size + :size-24 -6 + :size-32 -4 + nil) + :width 16 + :height 16 + :borderRadius 8}] + [])} + [rn/view {:style (style/container size options blur? theme)} + [rn/image {:style (style/collectible-img size) :source collectible-img-src}] + [text/text + {:size :paragraph-2 + :weight :medium + :style (style/label theme)} + collectible-name] + [text/text + {:size :paragraph-2 + :weight :medium + :margin-left 5 + :style (style/label theme)} + collectible-id]]] + (when options + [rn/view {:style (style/options-icon size)} + [icons/icon (if (= options :hold) :i/hold :i/add-token) + {:size 20 + :no-color true}]])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/tags/tags.cljs b/src/quo/components/tags/tags.cljs index 6fb37f47ae..07fda483f3 100644 --- a/src/quo/components/tags/tags.cljs +++ b/src/quo/components/tags/tags.cljs @@ -50,128 +50,131 @@ - `fade-end-percentage` Percentage where fading starts relative to the total layout width of the `flat-list` data." - [{:keys [default-active fade-end-percentage] - :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? - scroll-on-press? - size - type - labelled? - disabled? - blurred? - icon-color] - :or {fade-end-percentage fade-end-percentage - fade-end? false - scroll-event-throttle 64 - scrollable? false - scroll-on-press? false - size default-tab-size} - :as props}] - (let [maybe-mask-wrapper (if fade-end? + [{:keys [default-active data fade-end-percentage fade-end? on-change on-scroll scroll-event-throttle + scrollable? + scroll-on-press? size type labelled? disabled? blurred? icon-color] + :or {fade-end-percentage 0.8 + fade-end? false + scroll-event-throttle 64 + scrollable? false + scroll-on-press? false + size default-tab-size} + :as props}] + (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 {:mask-element (reagent/as-element [linear-gradient/linear-gradient {:colors [:black :transparent] - :locations [(get @fading :fade-end-percentage) + :locations [(get fading :fade-end-percentage) 1] :start {:x 0 :y 0} :end {:x 1 :y 0} :pointer-events :none :style {:width "100%" :height "100%"}}])}] - [:<>])] - (if scrollable? - (conj - maybe-mask-wrapper - [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? - (let [offset-x (oget e "nativeEvent.contentOffset.x") - content-width (oget e "nativeEvent.contentSize.width") - layout-width (oget e "nativeEvent.layoutMeasurement.width") - new-percentage (calculate-fade-end-percentage - {:offset-x offset-x - :content-width content-width - :layout-width layout-width - :max-fade-percentage fade-end-percentage})] - ;; Avoid unnecessary re-rendering. - (when (not= new-percentage (get @fading :fade-end-percentage)) - (swap! fading assoc :fade-end-percentage new-percentage)))) - (when on-scroll - (on-scroll e))) - :render-fn (fn [{:keys [id label resource]} index] - [rn/view - {:style {:margin-right (if (= size default-tab-size) 12 8) - :padding-right (when (= index (dec (count data))) - (get-in props [:style :padding-left]))}} - [tag/tag - {:id id - :size size - :active (= id @active-tab-id) - :resource resource - :blurred? blurred? - :icon-color icon-color - :disabled? disabled? - :label (if labelled? - label - (when (= type :label) label)) - :type type - :labelled? labelled? - :on-press (fn [id] - (reset! active-tab-id id) - (when scroll-on-press? - (.scrollToIndex ^js @flat-list-ref - #js - {:animated true - :index index - :viewPosition 0.5})) - (when on-change - (on-change id)))}]])})]) - [rn/view {:style {:flex-direction :row}} - (for [{:keys [id label resource]} data] - ^{:key id} - [rn/view {:style {:margin-right 8}} - [tag/tag - (merge {:id id - :size size - :type type - :label (if labelled? - label - (when (= type :label) label)) - :active (= id active-tab-id) - :disabled? disabled? - :blurred? blurred? - :icon-color icon-color - :labelled? (if (= type :label) true labelled?) - :resource (if (= type :icon) - :i/placeholder - resource) - :on-press #(do (reset! active-tab-id %) - (when on-change (on-change %)))})]])]))))) + [:<>])) + [fade-end? fading]) + on-scroll (rn/use-context + (fn [^js e] + (when fade-end? + (let [offset-x (oget e "nativeEvent.contentOffset.x") + content-width (oget e "nativeEvent.contentSize.width") + layout-width (oget e "nativeEvent.layoutMeasurement.width") + new-percentage (calculate-fade-end-percentage + {:offset-x offset-x + :content-width content-width + :layout-width layout-width + :max-fade-percentage fade-end-percentage})] + ;; Avoid unnecessary re-rendering. + (when (not= new-percentage (get fading :fade-end-percentage)) + (set-fading (assoc fading :fade-end-percentage new-percentage))))) + (when on-scroll + (on-scroll e))) + [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 + {:style {:margin-right (if (= size default-tab-size) 12 8) + :padding-right (when (= index (dec data-count)) + style-padding-left)}} + + [tag/tag + {:id id + :size size + :active (= id active-tab-id) + :resource resource + :blurred? blurred? + :icon-color icon-color + :disabled? disabled? + :label (if labelled? + label + (when (= type :label) label)) + :type type + :labelled? labelled? + :on-press (fn [id] + (set-active-tab-id id) + (when scroll-on-press? + (.scrollToIndex ^js @flat-list-ref + #js + {:animated true + :index index + :viewPosition 0.5})) + (when on-change + (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}} + (for [{:keys [id label resource]} data] + ^{:key id} + [rn/view {:style {:margin-right 8}} + [tag/tag + {:id id + :size size + :type type + :label (if labelled? + label + (when (= type :label) label)) + :active (= id active-tab-id) + :disabled? disabled? + :blurred? blurred? + :icon-color icon-color + :labelled? (if (= type :label) true labelled?) + :resource (if (= type :icon) :i/placeholder resource) + :on-press on-press}]])]))) diff --git a/src/quo/components/tags/token_tag/view.cljs b/src/quo/components/tags/token_tag/view.cljs index 45b08e4ee5..c20f5ed8a0 100644 --- a/src/quo/components/tags/token_tag/view.cljs +++ b/src/quo/components/tags/token_tag/view.cljs @@ -7,10 +7,9 @@ [quo.components.utilities.token.view :as token] [quo.theme :as quo.theme] [react-native.core :as rn] - [react-native.hole-view :as hole-view] - [reagent.core :as reagent])) + [react-native.hole-view :as hole-view])) -(defn- view-internal +(defn view "Options: - :options - false / :add / :hold (default false) - :size - :size-24 / :size-32 (default :size-24) @@ -18,45 +17,44 @@ - :theme - :light / :dark - :token-value - string - token value - :token-symbol - string" - [] - (let [container-width (reagent/atom 0)] - (fn [{:keys [options size blur? theme token-value token-img-src token-symbol] - :or {size :size-24}}] - [rn/view - {:on-layout #(reset! container-width - (oget % :nativeEvent :layout :width))} - [hole-view/hole-view - {:holes (if options - [{:x (- @container-width - (case size - :size-24 10 - :size-32 12 - nil)) - :y (case size - :size-24 -6 - :size-32 -4 - nil) - :width 16 - :height 16 - :borderRadius 8}] - [])} - [rn/view {:style (style/container size options blur? theme)} - [token/view - {:style (style/token-img size) - :token token-symbol - :size (case size - :size-24 :size-20 - :size-32 :size-28) - :image-source token-img-src}] - [text/text - {:size :paragraph-2 - :weight :medium - :style (style/label theme)} - (str token-value " " token-symbol)]]] - (when options - [rn/view {:style (style/options-icon size)} - [icons/icon (if (= options :hold) :i/hold :i/add-token) - {:size 20 - :no-color true}]])]))) - -(def view (quo.theme/with-theme view-internal)) + [{:keys [options size blur? token-value token-img-src token-symbol] + :or {size :size-24}}] + (let [theme (quo.theme/use-theme-value) + [container-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 + {:holes (if options + [{:x (- container-width + (case size + :size-24 10 + :size-32 12 + nil)) + :y (case size + :size-24 -6 + :size-32 -4 + nil) + :width 16 + :height 16 + :borderRadius 8}] + [])} + [rn/view {:style (style/container size options blur? theme)} + [token/view + {:style (style/token-img size) + :token token-symbol + :size (case size + :size-24 :size-20 + :size-32 :size-28) + :image-source token-img-src}] + [text/text + {:size :paragraph-2 + :weight :medium + :style (style/label theme)} + (str token-value " " token-symbol)]]] + (when options + [rn/view {:style (style/options-icon size)} + [icons/icon (if (= options :hold) :i/hold :i/add-token) + {:size 20 + :no-color true}]])])) diff --git a/src/status_im/common/toasts/view.cljs b/src/status_im/common/toasts/view.cljs index bb268ba876..e541e13da7 100644 --- a/src/status_im/common/toasts/view.cljs +++ b/src/status_im/common/toasts/view.cljs @@ -61,4 +61,4 @@ (->> (rf/sub [:toasts]) :ordered (into [rn/view {:style (style/outmost-transparent-container)}] - (map #(with-meta [:f> f-container %] {:key %}))))) + (map #(with-meta [f-container %] {:key %}))))) diff --git a/src/status_im/navigation/view.cljs b/src/status_im/navigation/view.cljs index 3dc45d2515..e7443225a3 100644 --- a/src/status_im/navigation/view.cljs +++ b/src/status_im/navigation/view.cljs @@ -54,7 +54,6 @@ (defn screen [screen-key] - (reagent.core/reactify-component (fn [] (let [screen-details (get (if js/goog.DEBUG @@ -110,7 +109,7 @@ sheet])]])) functional-compiler)) -(def toasts (reagent/reactify-component toasts/toasts)) +(def toasts (reagent/reactify-component toasts/toasts functional-compiler)) (def alert-banner (reagent/reactify-component