From 3c4f72c061bb697e3e0a973898f87275beeb2a98 Mon Sep 17 00:00:00 2001 From: flexsurfer Date: Fri, 23 Feb 2024 18:29:10 +0100 Subject: [PATCH] Enable functional components by default (#18820) * enable functional components by default * e2e: updated counter component locator --------- Co-authored-by: Yevheniia Berdnyk --- src/legacy/status_im/bottom_sheet/styles.cljs | 14 +++--- src/legacy/status_im/bottom_sheet/view.cljs | 6 ++- .../keyboard_avoid_presentation.cljs | 7 ++- .../status_im/ui/components/list/footer.cljs | 10 ++-- .../status_im/ui/components/list/header.cljs | 10 ++-- src/legacy/status_im/ui/components/text.cljs | 12 ++--- .../components/common/no_flicker_image.cljs | 49 +++++++++---------- src/quo/components/markdown/text.cljs | 8 ++- .../navigation/bottom_nav_tab/view.cljs | 2 +- .../wallet/network_routing/view.cljs | 2 +- src/react_native/core.cljs | 5 +- src/react_native/reanimated.cljs | 16 ++---- src/react_native/utils.cljs | 7 +++ src/status_im/common/bottom_sheet/view.cljs | 4 +- .../contexts/syncing/scan_sync_code/view.cljs | 2 +- src/status_im/core.cljs | 3 ++ src/utils/transforms.cljs | 11 ----- test/appium/views/base_view.py | 2 +- 18 files changed, 81 insertions(+), 89 deletions(-) diff --git a/src/legacy/status_im/bottom_sheet/styles.cljs b/src/legacy/status_im/bottom_sheet/styles.cljs index 1d0823b606..635affd0aa 100644 --- a/src/legacy/status_im/bottom_sheet/styles.cljs +++ b/src/legacy/status_im/bottom_sheet/styles.cljs @@ -16,12 +16,14 @@ :align-self :center}) (def backdrop - {:position :absolute - :left 0 - :right 0 - :bottom 0 - :top 0 - :background-color colors/neutral-100}) + {:position :absolute + :left 0 + :right 0 + :bottom 0 + :top 0}) + +(def backdrop-color + {:background-color colors/neutral-100}) (def container {:position :absolute diff --git a/src/legacy/status_im/bottom_sheet/view.cljs b/src/legacy/status_im/bottom_sheet/view.cljs index f110feb1f9..c074e424ee 100644 --- a/src/legacy/status_im/bottom_sheet/view.cljs +++ b/src/legacy/status_im/bottom_sheet/view.cljs @@ -207,11 +207,13 @@ [@show-bottom-sheet? @expanded? @gesture-running?]) [:<> - [rn/touchable-without-feedback {:on-press (when backdrop-dismiss? close-bottom-sheet)} + [rn/pressable + {:on-press (when backdrop-dismiss? close-bottom-sheet) + :style styles/backdrop} [reanimated/view {:style (reanimated/apply-animations-to-style {:opacity bg-opacity} - styles/backdrop)}]] + styles/backdrop-color)}]] (cond->> [reanimated/view {:style (reanimated/apply-animations-to-style {:transform [{:translateY translate-y}]} diff --git a/src/legacy/status_im/ui/components/keyboard_avoid_presentation.cljs b/src/legacy/status_im/ui/components/keyboard_avoid_presentation.cljs index 1f43efbb6a..2f68be6d04 100644 --- a/src/legacy/status_im/ui/components/keyboard_avoid_presentation.cljs +++ b/src/legacy/status_im/ui/components/keyboard_avoid_presentation.cljs @@ -1,13 +1,12 @@ (ns legacy.status-im.ui.components.keyboard-avoid-presentation (:require [legacy.status-im.ui.components.react :as react] + [react-native.utils :as rn.utils] [reagent.core :as reagent])) (defn keyboard-avoiding-view - [] - (let [this (reagent/current-component) - props (reagent/props this) - children (reagent/children this)] + [& argv] + (let [[props children] (rn.utils/get-props-and-children argv)] (reagent/as-element (into [react/keyboard-avoiding-view (update props diff --git a/src/legacy/status_im/ui/components/list/footer.cljs b/src/legacy/status_im/ui/components/list/footer.cljs index 8d0594ba75..844758d6ec 100644 --- a/src/legacy/status_im/ui/components/list/footer.cljs +++ b/src/legacy/status_im/ui/components/list/footer.cljs @@ -3,16 +3,16 @@ [legacy.status-im.ui.components.spacing :as spacing] [legacy.status-im.ui.components.text :as text] [react-native.core :as rn] - [reagent.core :as reagent])) + [react-native.utils :as rn.utils])) (defn footer - [] - (let [this (reagent/current-component) + [& argv] + (let [[props children] (rn.utils/get-props-and-children argv) {:keys [color] :or {color :secondary}} - (reagent/props this)] + props] [rn/view {:style (merge (:base spacing/padding-horizontal) (:small spacing/padding-vertical))} (into [text/text {:color color}] - (reagent/children this))])) + children)])) diff --git a/src/legacy/status_im/ui/components/list/header.cljs b/src/legacy/status_im/ui/components/list/header.cljs index d36441412c..b110bc3e34 100644 --- a/src/legacy/status_im/ui/components/list/header.cljs +++ b/src/legacy/status_im/ui/components/list/header.cljs @@ -3,18 +3,18 @@ [legacy.status-im.ui.components.spacing :as spacing] [legacy.status-im.ui.components.text :as text] [react-native.core :as rn] - [reagent.core :as reagent])) + [react-native.utils :as rn.utils])) (defn header - [] - (let [this (reagent/current-component) + [& argv] + (let [[props children] (rn.utils/get-props-and-children argv) {:keys [color] :or {color :secondary}} - (reagent/props this)] + props] [rn/view {:style (merge (:base spacing/padding-horizontal) (:x-tiny spacing/padding-vertical))} (into [text/text {:color color :style {:margin-top 10}}] - (reagent/children this))])) + children)])) diff --git a/src/legacy/status_im/ui/components/text.cljs b/src/legacy/status_im/ui/components/text.cljs index f68ae05ab2..9f215ed5d6 100644 --- a/src/legacy/status_im/ui/components/text.cljs +++ b/src/legacy/status_im/ui/components/text.cljs @@ -3,7 +3,7 @@ [legacy.status-im.ui.components.colors :as colors] [legacy.status-im.ui.components.typography :as typography] [react-native.core :as rn] - [reagent.core :as reagent])) + [react-native.utils :as rn.utils])) (defn text-style [{:keys [size align weight monospace color style]}] @@ -40,11 +40,9 @@ style)) (defn text - [] - (let [this (reagent/current-component) - props (reagent/props this) - component rn/text] - (into [component + [& argv] + (let [[props children] (rn.utils/get-props-and-children argv)] + (into [rn/text (merge {:style (text-style props)} (dissoc props :style @@ -53,4 +51,4 @@ :color :align :animated?))] - (reagent/children this)))) + children))) diff --git a/src/quo/components/common/no_flicker_image.cljs b/src/quo/components/common/no_flicker_image.cljs index 5368bd74b2..c2a7e9a422 100644 --- a/src/quo/components/common/no_flicker_image.cljs +++ b/src/quo/components/common/no_flicker_image.cljs @@ -5,35 +5,32 @@ [react-native.platform :as platform] [reagent.core :as reagent])) - (def cached-sources (js/Set. (js/Array.))) (defn- caching-image - [_ on-source-loaded] - (let [this (reagent/current-component)] - (reagent/create-class - {:component-did-update - (fn [] - (let [source (-> this reagent/props :source)] - (when (oops/ocall cached-sources "has" source) - (on-source-loaded source)))) - :reagent-render - (fn [{:keys [source] :as props}] - [rn/image - (assoc props - ;; hide the cache image under the real one - ;; have to render it for the on-load event - :style {:width 1 - :height 1 - :left "50%" - :top "50%" - :position :absolute} - :on-load - (fn [_] - (when-not (oops/ocall cached-sources "has" source) - (oops/ocall cached-sources "add" source) - (on-source-loaded source))) - :on-error js/console.error)])}))) + [{:keys [source]} on-source-loaded] + (reagent/create-class + {:component-did-update + (fn [] + (when (oops/ocall cached-sources "has" source) + (on-source-loaded source))) + :reagent-render + (fn [{:keys [source] :as props}] + [rn/image + (assoc props + ;; hide the cache image under the real one + ;; have to render it for the on-load event + :style {:width 1 + :height 1 + :left "50%" + :top "50%" + :position :absolute} + :on-load + (fn [_] + (when-not (oops/ocall cached-sources "has" source) + (oops/ocall cached-sources "add" source) + (on-source-loaded source))) + :on-error js/console.error)])})) (defn image "Same as rn/image but cache the image source in a js/Set, so the image won't diff --git a/src/quo/components/markdown/text.cljs b/src/quo/components/markdown/text.cljs index 21b5b42277..ffda3ac81f 100644 --- a/src/quo/components/markdown/text.cljs +++ b/src/quo/components/markdown/text.cljs @@ -4,7 +4,7 @@ [quo.foundations.typography :as typography] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent])) + [react-native.utils :as rn.utils])) (defn text-style [{:keys [size align weight style theme]}] @@ -41,8 +41,6 @@ (def ^:private text-view (quo.theme/with-theme text-view-internal)) (defn text - [] - (let [this (reagent/current-component) - props (reagent/props this) - children (reagent/children this)] + [& argv] + (let [[props children] (rn.utils/get-props-and-children argv)] (into [text-view props] children))) diff --git a/src/quo/components/navigation/bottom_nav_tab/view.cljs b/src/quo/components/navigation/bottom_nav_tab/view.cljs index 5b071e1a08..0f0044a5a7 100644 --- a/src/quo/components/navigation/bottom_nav_tab/view.cljs +++ b/src/quo/components/navigation/bottom_nav_tab/view.cljs @@ -46,7 +46,7 @@ {:width 90 :height 40 :border-radius 10})] - [rn/touchable-without-feedback + [rn/pressable {:test-ID test-ID :allow-multiple-presses? true :on-press on-press diff --git a/src/quo/components/wallet/network_routing/view.cljs b/src/quo/components/wallet/network_routing/view.cljs index a9d1d08528..ad9c75b1f8 100644 --- a/src/quo/components/wallet/network_routing/view.cljs +++ b/src/quo/components/wallet/network_routing/view.cljs @@ -42,7 +42,7 @@ [0 total-amount] [0 total-width]) width->amount #(/ (* % total-amount) total-width)] - [rn/touchable-without-feedback + [rn/pressable {:on-press (fn [] (when (and (not @detecting-gesture?) allow-press?) (on-press) diff --git a/src/react_native/core.cljs b/src/react_native/core.cljs index c9e41a7427..6b316189ad 100644 --- a/src/react_native/core.cljs +++ b/src/react_native/core.cljs @@ -53,8 +53,9 @@ (into [touchable-highlight-class (utils/custom-pressable-props props)] children)) (defn touchable-without-feedback - [props & children] - (into [touchable-without-feedback-class (utils/custom-pressable-props props)] children)) + {:deprecated "pressable should be used instead"} + [props child] + [touchable-without-feedback-class (utils/custom-pressable-props props) child]) (def flat-list flat-list/flat-list) diff --git a/src/react_native/reanimated.cljs b/src/react_native/reanimated.cljs index 3c045d9751..ef619273ae 100644 --- a/src/react_native/reanimated.cljs +++ b/src/react_native/reanimated.cljs @@ -22,8 +22,8 @@ useAnimatedScrollHandler runOnJS)] ["react-native-redash" :refer (withPause)] - [oops.core :as oops] [react-native.flat-list :as rn-flat-list] + [react-native.utils :as rn.utils] [reagent.core :as reagent] [utils.transforms :as transforms] [utils.worklets.core :as worklets.core])) @@ -43,16 +43,10 @@ (def ^:private view* (reagent/adapt-react-class (.-View reanimated))) (defn view - [] - (let [current-component (reagent/current-component) - reagent-props (reagent/props current-component) - children (reagent/children current-component) - updated-props (update reagent-props :style transforms/styles-with-vectors) - ;; Some components add JS props to their children (such as TouchableWithoutFeedback), to make - ;; this component fully compatible we are passing those props to the inner component (`view*`). - external-props (oops/gobj-get current-component "props") - all-props (transforms/copy-js-obj-to-map external-props updated-props #(not= % "argv"))] - (into [view* all-props] children))) + [& argv] + (let [[reagent-props children] (rn.utils/get-props-and-children argv) + updated-props (update reagent-props :style transforms/styles-with-vectors)] + (into [view* updated-props] children))) (def text (reagent/adapt-react-class (.-Text reanimated))) (def scroll-view (reagent/adapt-react-class (.-ScrollView reanimated))) diff --git a/src/react_native/utils.cljs b/src/react_native/utils.cljs index a96a2f3732..79f3f72ab4 100644 --- a/src/react_native/utils.cljs +++ b/src/react_native/utils.cljs @@ -30,3 +30,10 @@ on-press (assoc :on-press (throttled-on-press props throttle-id) :ref (wrapped-ref props throttle-id))))) + +(defn get-props-and-children + [argv] + (let [first-child (first argv) + props (when (map? first-child) first-child) + children (if props (rest argv) argv)] + [props children])) diff --git a/src/status_im/common/bottom_sheet/view.cljs b/src/status_im/common/bottom_sheet/view.cljs index 0cb8dc3db6..6157da0519 100644 --- a/src/status_im/common/bottom_sheet/view.cljs +++ b/src/status_im/common/bottom_sheet/view.cljs @@ -94,7 +94,9 @@ true)) [rn/view {:style {:flex 1}} ;; backdrop - [rn/touchable-without-feedback {:on-press #(rf/dispatch [:hide-bottom-sheet])} + [rn/pressable + {:on-press #(rf/dispatch [:hide-bottom-sheet]) + :style {:flex 1}} [reanimated/view {:style (reanimated/apply-animations-to-style {:opacity bg-opacity} diff --git a/src/status_im/contexts/syncing/scan_sync_code/view.cljs b/src/status_im/contexts/syncing/scan_sync_code/view.cljs index 6ef236cd15..a6fc5a5c36 100644 --- a/src/status_im/contexts/syncing/scan_sync_code/view.cljs +++ b/src/status_im/contexts/syncing/scan_sync_code/view.cljs @@ -203,7 +203,7 @@ (defn- f-bottom-view [insets translate-y] - [rn/touchable-without-feedback + [rn/pressable {:on-press #(js/alert "Yet to be implemented")} [reanimated/view {:style (style/bottom-container translate-y (:bottom insets))} diff --git a/src/status_im/core.cljs b/src/status_im/core.cljs index e7f692d6da..99996a2654 100644 --- a/src/status_im/core.cljs +++ b/src/status_im/core.cljs @@ -12,6 +12,7 @@ [react-native.core :as rn] [react-native.platform :as platform] [react-native.shake :as react-native-shake] + [reagent.core] [reagent.impl.batching :as batching] [status-im.common.log :as logging] [taoensso.timbre :as log] @@ -32,6 +33,8 @@ ;;;; re-frame RN setup (set! interop/next-tick js/setTimeout) (set! batching/fake-raf #(js/setTimeout % 0)) +(def functional-compiler (reagent.core/create-compiler {:function-components true})) +(reagent.core/set-default-compiler! functional-compiler) (def adjust-resize 16) diff --git a/src/utils/transforms.cljs b/src/utils/transforms.cljs index b078f6c997..ace1700468 100644 --- a/src/utils/transforms.cljs +++ b/src/utils/transforms.cljs @@ -49,14 +49,3 @@ (map? x) (reduce-kv convert-keys-and-values #js {} x) (vector? x) (to-array (mapv styles-with-vectors x)) :else (clj->js x))) - -(defn copy-js-obj-to-map - "Copy `obj` keys and values into `m` if `(pred obj-key)` is satisfied." - [obj m pred] - (persistent! - (reduce (fn [acc js-prop] - (if (pred js-prop) - (assoc! acc js-prop (oops/gobj-get obj js-prop)) - acc)) - (transient m) - (js-keys obj)))) diff --git a/test/appium/views/base_view.py b/test/appium/views/base_view.py index 5dcaa6e786..78a174d6cb 100644 --- a/test/appium/views/base_view.py +++ b/test/appium/views/base_view.py @@ -41,7 +41,7 @@ class AllowButton(Button): class UnreadMessagesCountText(Text): def __init__(self, driver, parent_locator: str): super().__init__(driver, - xpath="%s/*[@resource-id='counter-component']/android.widget.TextView" % parent_locator) + xpath="%s//*[@resource-id='counter-component']/android.widget.TextView" % parent_locator) class TabButton(Button):