From b0087b4c67905de68e2fd56aae8c12075466d6e7 Mon Sep 17 00:00:00 2001 From: andrey Date: Mon, 19 Feb 2024 14:42:00 +0100 Subject: [PATCH] migrating to react state. step 1 --- .../browser/browser_input/view.cljs | 161 ++++++++------- src/quo/components/buttons/button/view.cljs | 194 +++++++++--------- .../buttons/composer_button/view.cljs | 44 ++-- .../buttons/dynamic_button/view.cljs | 81 ++++---- .../buttons/logout_button/view.cljs | 16 +- .../buttons/slide_button/animations.cljs | 16 +- .../components/buttons/slide_button/view.cljs | 165 +++++++-------- .../buttons/wallet_button/view.cljs | 42 ++-- src/react_native/core.cljs | 8 +- 9 files changed, 356 insertions(+), 371 deletions(-) diff --git a/src/quo/components/browser/browser_input/view.cljs b/src/quo/components/browser/browser_input/view.cljs index fd3ee874ac45..aab24a9d4554 100644 --- a/src/quo/components/browser/browser_input/view.cljs +++ b/src/quo/components/browser/browser_input/view.cljs @@ -6,8 +6,7 @@ [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] - [react-native.platform :as platform] - [reagent.core :as reagent])) + [react-native.platform :as platform])) (defn remove-http-https-www [value] @@ -68,78 +67,86 @@ [:cursor-color :placeholder-text-color :editable :on-change-text :on-focus :on-blur :on-clear :value :disabled? :blur? :customization-color :theme]) -(defn- view-internal - [{:keys [default-value] - :or {default-value ""}}] - (let [state (reagent/atom :default) - value (reagent/atom default-value) - set-active #(reset! state :active) - set-default #(reset! state :default) - set-value #(reset! value %) - ref (atom nil) - clear-input (fn [] - (.clear ^js @ref) - (reset! value "")) - focus-input (fn [] - (set-active) - (.focus ^js @ref))] - (fn [{:keys [disabled? blur? on-change-text customization-color - on-clear on-focus on-blur theme get-ref locked? - favicon favicon-color favicon-size] - :as props}] - (let [clean-props (apply dissoc props props-to-remove)] - [rn/view {:style style/root-container} - (when (and (seq @value) (= @state :default)) - [rn/touchable-opacity - {:style style/default-container - :on-press focus-input} - (when favicon - [icon/icon favicon - {:accessibility-label :browser-input-favicon - :color favicon-color - :container-style style/favicon-icon-container - :size favicon-size}]) - [rn/text - {:accessibility-label :browser-input-label - :style (style/text)} (remove-http-https-www @value)] - (when locked? - [lock-icon - {:blur? blur? - :theme theme}])]) - [rn/view {:style (style/active-container (or (empty? @value) (= @state :active)))} - [rn/text-input - (merge - clean-props - {:accessibility-label :browser-input - :auto-capitalize :none - :auto-correct false - :cursor-color (cursor-color customization-color theme) - :editable (not disabled?) - :keyboard-appearance (colors/theme-colors :light :dark theme) - :keyboard-type :web-search - :on-blur (fn [] - (set-default) - (when on-blur (on-blur))) - :on-change-text (fn [new-text] - (set-value new-text) - (when on-change-text (on-change-text new-text))) - :on-focus (fn [] - (set-active) - (when on-focus (on-focus))) - :placeholder-text-color (placeholder-color @state blur? theme) - :ref (fn [r] - (reset! ref r) - (when get-ref (get-ref r))) - :selection-color (when platform/ios? - (cursor-color customization-color theme)) - :select-text-on-focus true - :style (style/input disabled?)})] - (when (seq @value) - [clear-button - {:blur? blur? - :on-press (fn [] - (clear-input) - (when on-clear (on-clear))) - :theme theme}])]])))) - -(def view (quo.theme/with-theme view-internal)) +(defn view + [{:keys [disabled? blur? on-change-text customization-color + on-clear on-focus on-blur get-ref locked? + favicon favicon-color favicon-size default-value] + :or {default-value ""} + :as props}] + (let [ref (atom nil) + on-ref (rn/use-callback + (fn [r] + (reset! ref r) + (when get-ref (get-ref r))) + [get-ref]) + theme (quo.theme/use-theme) + [state set-state] (rn/use-state :default) + [value set-value] (rn/use-state default-value) + on-clear (rn/use-callback + (fn [] + (.clear ^js @ref) + (set-value "") + (when on-clear (on-clear))) + [on-clear]) + focus-input (rn/use-callback + (fn [] + (set-state :active) + (.focus ^js @ref))) + on-blur (rn/use-callback + (fn [] + (set-state :default) + (when on-blur (on-blur))) + [on-blur]) + on-change-text (rn/use-callback + (fn [new-text] + (set-value new-text) + (when on-change-text (on-change-text new-text))) + [on-change-text]) + on-focus (rn/use-callback + (fn [] + (set-state :active) + (when on-focus (on-focus))) + [on-focus])] + (let [clean-props (apply dissoc props props-to-remove)] + [rn/view {:style style/root-container} + (when (and (seq value) (= state :default)) + [rn/touchable-opacity + {:style style/default-container + :on-press focus-input} + (when favicon + [icon/icon favicon + {:accessibility-label :browser-input-favicon + :color favicon-color + :container-style style/favicon-icon-container + :size favicon-size}]) + [rn/text + {:accessibility-label :browser-input-label + :style (style/text)} + (remove-http-https-www value)] + (when locked? + [lock-icon {:blur? blur? :theme theme}])]) + [rn/view {:style (style/active-container (or (empty? value) (= state :active)))} + [rn/text-input + (merge + clean-props + {:accessibility-label :browser-input + :auto-capitalize :none + :auto-correct false + :cursor-color (cursor-color customization-color theme) + :editable (not disabled?) + :keyboard-appearance (colors/theme-colors :light :dark theme) + :keyboard-type :web-search + :on-blur on-blur + :on-change-text on-change-text + :on-focus on-focus + :placeholder-text-color (placeholder-color state blur? theme) + :ref on-ref + :selection-color (when platform/ios? + (cursor-color customization-color theme)) + :select-text-on-focus true + :style (style/input disabled?)})] + (when (seq value) + [clear-button + {:blur? blur? + :on-press on-clear + :theme theme}])]]))) diff --git a/src/quo/components/buttons/button/view.cljs b/src/quo/components/buttons/button/view.cljs index f7d5fb4142e1..355f826fbf45 100644 --- a/src/quo/components/buttons/button/view.cljs +++ b/src/quo/components/buttons/button/view.cljs @@ -7,10 +7,9 @@ [quo.foundations.customization-colors :as customization-colors] [quo.theme :as theme] [react-native.blur :as blur] - [react-native.core :as rn] - [reagent.core :as reagent])) + [react-native.core :as rn])) -(defn- button-internal +(defn button "with label [button opts \"label\"] opts @@ -29,102 +28,99 @@ :theme :light/:dark only icon [button {:icon-only? true} :i/close-circle]" - [_ _] - (let [pressed-state? (reagent/atom false)] - (fn - [{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top - customization-color theme accessibility-label icon-only? container-style inner-style - pressed? on-press-in on-press-out allow-multiple-presses?] - :or {type :primary - size 40 - customization-color (if (= type :primary) :blue nil)}} - children] - (let [{:keys [icon-color background-color label-color border-color blur-type - blur-overlay-color border-radius overlay-customization-color]} - (button-properties/get-values {:customization-color customization-color - :background background - :type type - :theme theme - :pressed? (if pressed? pressed? @pressed-state?) - :icon-only? icon-only?}) - icon-size (when (= 24 size) 12)] - [rn/touchable-without-feedback - {:disabled disabled? - :accessibility-label accessibility-label - :on-press-in (fn [] - (reset! pressed-state? true) - (when on-press-in (on-press-in))) - :on-press-out (fn [] - (reset! pressed-state? nil) - (when on-press-out (on-press-out))) - :on-press on-press - :allow-multiple-presses? allow-multiple-presses? - :on-long-press on-long-press} + [{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top + customization-color accessibility-label icon-only? container-style inner-style + pressed? on-press-in on-press-out allow-multiple-presses?] + :or {type :primary + size 40 + customization-color (if (= type :primary) :blue nil)}} + children] + (let [[pressed-state? set-pressed-state] (rn/use-state false) + theme (theme/use-theme-value) + {:keys [icon-color background-color label-color border-color blur-type + blur-overlay-color border-radius overlay-customization-color]} + (button-properties/get-values {:customization-color customization-color + :background background + :type type + :theme theme + :pressed? (if pressed? pressed? pressed-state?) + :icon-only? icon-only?}) + icon-size (when (= 24 size) 12)] + [rn/touchable-without-feedback + {:disabled disabled? + :accessibility-label accessibility-label + :on-press-in (fn [] + (set-pressed-state true) + (when on-press-in (on-press-in))) + :on-press-out (fn [] + (set-pressed-state nil) + (when on-press-out (on-press-out))) + :on-press on-press + :allow-multiple-presses? allow-multiple-presses? + :on-long-press on-long-press} + [rn/view + {:style (merge + (style/shape-style-container size border-radius) + container-style)} + [rn/view + {:style (merge + (style/style-container {:size size + :disabled? disabled? + :border-radius border-radius + :background-color background-color + :border-color border-color + :icon-only? icon-only? + :icon-top icon-top + :icon-left icon-left + :icon-right icon-right}) + inner-style)} + (when overlay-customization-color + [customization-colors/overlay + {:customization-color overlay-customization-color + :theme theme + :pressed? (if pressed? pressed? pressed-state?)}]) + (when (= background :photo) + [blur/view + {:blur-radius 20 + :blur-type blur-type + :overlay-color blur-overlay-color + :style style/blur-view}]) + (when icon-top [rn/view - {:style (merge - (style/shape-style-container size border-radius) - container-style)} - [rn/view - {:style (merge - (style/style-container {:size size - :disabled? disabled? - :border-radius border-radius - :background-color background-color - :border-color border-color - :icon-only? icon-only? - :icon-top icon-top - :icon-left icon-left - :icon-right icon-right}) - inner-style)} - (when overlay-customization-color - [customization-colors/overlay - {:customization-color overlay-customization-color - :theme theme - :pressed? (if pressed? pressed? @pressed-state?)}]) - (when (= background :photo) - [blur/view - {:blur-radius 20 - :blur-type blur-type - :overlay-color blur-overlay-color - :style style/blur-view}]) - (when icon-top - [rn/view - [quo.icons/icon icon-top - {:container-style {:margin-bottom 2} - :color icon-color - :size icon-size}]]) - (when icon-left - [rn/view - {:style (style/icon-left-icon-style - {:size size - :icon-size icon-size})} - [quo.icons/icon icon-left - {:color icon-color - :size icon-size}]]) - [rn/view - (cond - icon-only? - [quo.icons/icon children - {:color label-color - :size icon-size}] - - (string? children) - [text/text - {:size (when (#{56 24} size) :paragraph-2) - :weight :medium - :number-of-lines 1 - :style {:color label-color}} - children] + [quo.icons/icon icon-top + {:container-style {:margin-bottom 2} + :color icon-color + :size icon-size}]]) + (when icon-left + [rn/view + {:style (style/icon-left-icon-style + {:size size + :icon-size icon-size})} + [quo.icons/icon icon-left + {:color icon-color + :size icon-size}]]) + [rn/view + (cond + icon-only? + [quo.icons/icon children + {:color label-color + :size icon-size}] - (vector? children) - children)] - (when icon-right - [rn/view - {:style (style/icon-right-icon-style - {:size size - :icon-size icon-size})} - [quo.icons/icon icon-right - {:color icon-color - :size icon-size}]])]]])))) + (string? children) + [text/text + {:size (when (#{56 24} size) :paragraph-2) + :weight :medium + :number-of-lines 1 + :style {:color label-color}} + children] -(def button (theme/with-theme button-internal)) + (vector? children) + children)] + (when icon-right + [rn/view + {:style (style/icon-right-icon-style + {:size size + :icon-size icon-size})} + [quo.icons/icon icon-right + {:color icon-color + :size icon-size}]])]]])) diff --git a/src/quo/components/buttons/composer_button/view.cljs b/src/quo/components/buttons/composer_button/view.cljs index 4a66a67185e6..3c9161aa6f26 100644 --- a/src/quo/components/buttons/composer_button/view.cljs +++ b/src/quo/components/buttons/composer_button/view.cljs @@ -3,28 +3,24 @@ [quo.components.buttons.composer-button.style :as style] [quo.components.icon :as quo.icons] [quo.theme :as theme] - [react-native.core :as rn] - [reagent.core :as reagent])) + [react-native.core :as rn])) -(defn- view-internal - [_ _] - (let [pressed? (reagent/atom false)] - (fn - [{:keys [on-press on-long-press disabled? theme blur? icon accessibility-label container-style]}] - [rn/pressable - {:accessibility-label (or accessibility-label :composer-button) - :on-press on-press - :on-press-in #(reset! pressed? true) - :on-press-out #(reset! pressed? nil) - :on-long-press on-long-press - :disabled disabled? - :style (merge (style/main {:pressed? @pressed? - :blur? blur? - :theme theme - :disabled? disabled?}) - container-style)} - [quo.icons/icon icon - {:color (style/get-label-color {:blur? blur? - :theme theme})}]]))) - -(def view (theme/with-theme view-internal)) +(defn view + [{:keys [on-press on-long-press disabled? blur? icon accessibility-label container-style]}] + (let [[pressed? set-pressed] (rn/use-state false) + theme (theme/use-theme-value) + on-press-in (rn/use-callback #(set-pressed true)) + on-press-out (rn/use-callback #(set-pressed nil))] + [rn/pressable + {:accessibility-label (or accessibility-label :composer-button) + :on-press on-press + :on-press-in on-press-in + :on-press-out on-press-out + :on-long-press on-long-press + :disabled disabled? + :style (merge (style/main {:pressed? pressed? + :blur? blur? + :theme theme + :disabled? disabled?}) + container-style)} + [quo.icons/icon icon {:color (style/get-label-color {:blur? blur? :theme theme})}]])) diff --git a/src/quo/components/buttons/dynamic_button/view.cljs b/src/quo/components/buttons/dynamic_button/view.cljs index 1b75bcb86acb..d9f0f85d91bc 100644 --- a/src/quo/components/buttons/dynamic_button/view.cljs +++ b/src/quo/components/buttons/dynamic_button/view.cljs @@ -5,8 +5,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- get-button-color [{:keys [type pressed? customization-color theme]}] @@ -45,48 +44,48 @@ :color (get-icon-and-text-color type theme) :container-style (style/container type)}]) -(defn- view-internal +(defn view "[dynamic-button opts] opts {:type :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:scroll-to-bottom :on-press fn :count mentions or notifications count :customization-color customize jump-to and mention button color}" - [_] - (let [pressed? (reagent/atom false)] - (fn [{:keys [type label on-press customization-color style theme] :as args}] - [rn/touchable-opacity - {:on-press-in #(reset! pressed? true) - :on-press-out #(reset! pressed? false) - :on-press on-press - :active-opacity 1 - :hit-slop {:top 5 :bottom 5 :left 5 :right 5} - :pointer-events :auto - :style {:height 24} - :accessibility-label type} - [rn/view - {:style (merge - {:flex-direction :row - :height 24 - :border-radius 12 - :background-color (get-button-color {:type type - :pressed? @pressed? - :customization-color (or customization-color - :primary) - :theme theme})} - style)} - (when (#{:mention :search :search-with-label :scroll-to-bottom} type) - [icon-view type]) - (when (#{:jump-to :mention :notification-down :notification-up :search-with-label} type) - [text/text - {:weight :medium - :size :paragraph-2 - :style (assoc (style/text type) :color (get-icon-and-text-color type theme))} - (case type - :jump-to label - :search-with-label label - (:mention :notification-down :notification-up) (str (:count args)))]) - (when (#{:jump-to :notification-down :notification-up} type) - [icon-view type theme])]]))) - -(def view (quo.theme/with-theme view-internal)) + [{:keys [type label on-press customization-color style] :as args}] + (let [theme (quo.theme/use-theme-value) + [pressed? set-pressed] (rn/use-state false) + button-color (get-button-color {:type type + :pressed? pressed? + :customization-color (or customization-color :primary) + :theme theme}) + on-press-in (rn/use-callback #(set-pressed true)) + on-press-out (rn/use-callback #(set-pressed false))] + [rn/touchable-opacity + {:on-press-in on-press-in + :on-press-out on-press-out + :on-press on-press + :active-opacity 1 + :hit-slop {:top 5 :bottom 5 :left 5 :right 5} + :pointer-events :auto + :style {:height 24} + :accessibility-label type} + [rn/view + {:style (merge + {:flex-direction :row + :height 24 + :border-radius 12 + :background-color button-color} + style)} + (when (#{:mention :search :search-with-label :scroll-to-bottom} type) + [icon-view type]) + (when (#{:jump-to :mention :notification-down :notification-up :search-with-label} type) + [text/text + {:weight :medium + :size :paragraph-2 + :style (assoc (style/text type) :color (get-icon-and-text-color type theme))} + (case type + :jump-to label + :search-with-label label + (:mention :notification-down :notification-up) (str (:count args)))]) + (when (#{:jump-to :notification-down :notification-up} type) + [icon-view type theme])]])) diff --git a/src/quo/components/buttons/logout_button/view.cljs b/src/quo/components/buttons/logout_button/view.cljs index 0199a13a37e0..4375a87fd047 100644 --- a/src/quo/components/buttons/logout_button/view.cljs +++ b/src/quo/components/buttons/logout_button/view.cljs @@ -6,16 +6,16 @@ [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent] [utils.i18n :as i18n])) -(defn- view-internal +(defn view [_] - (let [pressed? (reagent/atom false) - on-press-in #(reset! pressed? true) - on-press-out #(reset! pressed? nil)] + (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 nil))] (fn - [{:keys [on-press on-long-press disabled? theme container-style]}] + [{:keys [on-press on-long-press disabled? container-style]}] [rn/pressable {:accessibility-label :log-out-button :on-press on-press @@ -23,12 +23,10 @@ :on-press-out on-press-out :on-long-press on-long-press :disabled disabled? - :style (merge (style/main {:pressed? @pressed? + :style (merge (style/main {:pressed? pressed? :theme theme :disabled? disabled?}) container-style)} [icon/icon :i/log-out {:color (if pressed? colors/white-opa-40 colors/white-opa-70)}] [text/text {:weight :medium :size :paragraph-1} (i18n/label :t/logout)]]))) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/buttons/slide_button/animations.cljs b/src/quo/components/buttons/slide_button/animations.cljs index 5425efa1a769..31d2209de427 100644 --- a/src/quo/components/buttons/slide_button/animations.cljs +++ b/src/quo/components/buttons/slide_button/animations.cljs @@ -66,10 +66,6 @@ :damping 30 :stiffness 400})) -(defn- complete-animation - [sliding-complete?] - (reset! sliding-complete? true)) - (defn reset-track-position [x-pos] (animate-spring x-pos 0)) @@ -78,10 +74,12 @@ (defn drag-gesture [x-pos gestures-disabled? + set-gestures-disabled disabled? track-width - sliding-complete?] - (let [gestures-enabled? (not (or disabled? @gestures-disabled?))] + sliding-complete? + set-sliding-complete] + (let [gestures-enabled? (not (or disabled? gestures-disabled?))] (-> (gesture/gesture-pan) (gesture/with-test-ID :slide-button-gestures) (gesture/enabled gestures-enabled?) @@ -91,9 +89,9 @@ clamped-x (utils/clamp-value x-translation 0 track-width) reached-end? (>= clamped-x track-width)] (reanimated/set-shared-value x-pos clamped-x) - (when (and reached-end? (not @sliding-complete?)) - (reset! gestures-disabled? true) - (complete-animation sliding-complete?))))) + (when (and reached-end? (not sliding-complete?)) + (set-gestures-disabled true) + (set-sliding-complete true))))) (gesture/on-end (fn [event] (let [x-translation (oops/oget event "translationX") reached-end? (>= x-translation track-width)] diff --git a/src/quo/components/buttons/slide_button/view.cljs b/src/quo/components/buttons/slide_button/view.cljs index e299480a34d1..320c92655800 100644 --- a/src/quo/components/buttons/slide_button/view.cljs +++ b/src/quo/components/buttons/slide_button/view.cljs @@ -11,92 +11,9 @@ [quo.theme :as quo.theme] [react-native.core :as rn] [react-native.gesture :as gesture] - [react-native.reanimated :as reanimated] - [reagent.core :as reagent])) + [react-native.reanimated :as reanimated])) -(defn- f-slider - [{:keys [disabled?]}] - (let [track-width (reagent/atom nil) - sliding-complete? (reagent/atom false) - gestures-disabled? (reagent/atom disabled?) - on-track-layout (fn [evt] - (let [width (oops/oget evt "nativeEvent.layout.width")] - (reset! track-width width)))] - (fn [{:keys [on-reset - on-complete - track-text - track-icon - disabled? - customization-color - size - container-style - theme - type - blur?]}] - (let [x-pos (reanimated/use-shared-value 0) - dimensions (partial utils/get-dimensions - (or @track-width constants/default-width) - size) - interpolate-track (partial animations/interpolate-track - x-pos - (dimensions :usable-track) - (dimensions :thumb)) - custom-color (if (= type :danger) :danger customization-color)] - (rn/use-effect (fn [] - (when @sliding-complete? - (on-complete))) - [@sliding-complete?]) - (rn/use-effect (fn [] - (when on-reset - (reset! sliding-complete? false) - (reset! gestures-disabled? false) - (animations/reset-track-position x-pos) - (on-reset))) - [on-reset]) - [gesture/gesture-detector - {:gesture (animations/drag-gesture x-pos - gestures-disabled? - disabled? - (dimensions :usable-track) - sliding-complete?)} - [reanimated/view - {:test-ID :slide-button-track - :style (merge (style/track {:disabled? disabled? - :customization-color custom-color - :height (dimensions :track-height) - :blur? blur?}) - container-style) - :on-layout (when-not (some? @track-width) - on-track-layout)} - [reanimated/view {:style (style/track-cover interpolate-track)} - [rn/view {:style (style/track-cover-text-container @track-width)} - [icon/icon track-icon - {:color (utils/text-color custom-color theme blur?) - :size 20}] - [rn/view {:width 4}] - [text/text - {:weight :medium - :size :paragraph-1 - :style (style/track-text custom-color theme blur?)} - track-text]]] - [reanimated/view - {:style (style/thumb-container {:interpolate-track interpolate-track - :thumb-size (dimensions :thumb) - :customization-color custom-color - :theme theme - :blur? blur?})} - [reanimated/view {:style (style/arrow-icon-container interpolate-track)} - [icon/icon :arrow-right - {:color colors/white - :size 20}]] - [reanimated/view - {:style (style/action-icon interpolate-track - (dimensions :thumb))} - [icon/icon track-icon - {:color colors/white - :size 20}]]]]])))) - -(defn- view-internal +(defn view "Options - `on-complete` Callback called when the sliding is complete - `disabled?` Boolean that disables the button @@ -108,7 +25,77 @@ - `customization-color` Customization color - `on-reset` A callback which can be used to reset the component and run required functionality " - [props] - [:f> f-slider props]) - -(def view (quo.theme/with-theme view-internal)) + [{:keys [on-reset on-complete track-text track-icon disabled? customization-color size + container-style type blur?]}] + (let [theme (quo.theme/use-theme-value) + [track-width set-track-width] (rn/use-state nil) + [sliding-complete? set-sliding-complete] (rn/use-state false) + [gestures-disabled? set-gestures-disabled] (rn/use-state disabled?) + on-track-layout (rn/use-callback + (fn [evt] + (when-not (some? track-width) + (let [width (oops/oget + evt + "nativeEvent.layout.width")] + (set-track-width width)))) + [track-width]) + x-pos (reanimated/use-shared-value 0) + dimensions (partial utils/get-dimensions + (or track-width constants/default-width) + size) + interpolate-track (partial animations/interpolate-track + x-pos + (dimensions :usable-track) + (dimensions :thumb)) + custom-color (if (= type :danger) :danger customization-color) + gesture (animations/drag-gesture x-pos + gestures-disabled? + set-gestures-disabled + disabled? + (dimensions :usable-track) + sliding-complete? + set-sliding-complete)] + (rn/use-effect #(when sliding-complete? (on-complete)) [sliding-complete?]) + (rn/use-effect (fn [] + (when on-reset + (set-sliding-complete false) + (set-gestures-disabled false) + (animations/reset-track-position x-pos) + (on-reset))) + [on-reset]) + [gesture/gesture-detector + {:gesture gesture} + [reanimated/view + {:test-ID :slide-button-track + :style (merge (style/track {:disabled? disabled? + :customization-color custom-color + :height (dimensions :track-height) + :blur? blur?}) + container-style) + :on-layout on-track-layout} + [reanimated/view {:style (style/track-cover interpolate-track)} + [rn/view {:style (style/track-cover-text-container track-width)} + [icon/icon track-icon + {:color (utils/text-color custom-color theme blur?) + :size 20}] + [rn/view {:width 4}] + [text/text + {:weight :medium + :size :paragraph-1 + :style (style/track-text custom-color theme blur?)} + track-text]]] + [reanimated/view + {:style (style/thumb-container {:interpolate-track interpolate-track + :thumb-size (dimensions :thumb) + :customization-color custom-color + :theme theme + :blur? blur?})} + [reanimated/view {:style (style/arrow-icon-container interpolate-track)} + [icon/icon :arrow-right + {:color colors/white + :size 20}]] + [reanimated/view + {:style (style/action-icon interpolate-track (dimensions :thumb))} + [icon/icon track-icon + {:color colors/white + :size 20}]]]]])) diff --git a/src/quo/components/buttons/wallet_button/view.cljs b/src/quo/components/buttons/wallet_button/view.cljs index b9f0bda9e360..e92416d468d5 100644 --- a/src/quo/components/buttons/wallet_button/view.cljs +++ b/src/quo/components/buttons/wallet_button/view.cljs @@ -4,26 +4,24 @@ [quo.components.icon :as quo.icons] [quo.foundations.colors :as colors] [quo.theme :as theme] - [react-native.core :as rn] - [reagent.core :as reagent])) + [react-native.core :as rn])) -(defn- view-internal - [] - (let [pressed? (reagent/atom false)] - (fn - [{:keys [on-press on-long-press disabled? icon accessibility-label container-style theme]}] - [rn/pressable - {:accessibility-label (or accessibility-label :wallet-button) - :on-press on-press - :on-press-in #(reset! pressed? true) - :on-press-out #(reset! pressed? nil) - :on-long-press on-long-press - :disabled disabled? - :style (merge (style/main {:pressed? @pressed? - :theme theme - :disabled? disabled?}) - container-style)} - [quo.icons/icon icon - {:color (colors/theme-colors colors/neutral-100 colors/white theme)}]]))) - -(def view (theme/with-theme view-internal)) +(defn view + [{:keys [on-press on-long-press disabled? icon accessibility-label container-style]}] + (let [theme (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 nil))] + [rn/pressable + {:accessibility-label (or accessibility-label :wallet-button) + :on-press on-press + :on-press-in on-press-in + :on-press-out on-press-out + :on-long-press on-long-press + :disabled disabled? + :style (merge (style/main {:pressed? pressed? + :theme theme + :disabled? disabled?}) + container-style)} + [quo.icons/icon icon + {:color (colors/theme-colors colors/neutral-100 colors/white theme)}]])) diff --git a/src/react_native/core.cljs b/src/react_native/core.cljs index 6b316189ad0e..f18c25fe5b2d 100644 --- a/src/react_native/core.cljs +++ b/src/react_native/core.cljs @@ -123,6 +123,8 @@ (def memo react/memo) +(def use-state react/useState) + (def create-ref react/createRef) (def use-ref react/useRef) @@ -144,7 +146,11 @@ (if (fn? ret) ret js/undefined)) (bean/->js deps)))) -(def use-callback react/useCallback) +(defn use-callback + ([callback-fn] + (use-callback callback-fn [])) + ([callback-fn deps] + (react/useCallback callback-fn (clj->js deps)))) (defn use-effect-once [effect-fn]