diff --git a/src/status_im/ui/components/action_sheet.cljs b/src/status_im/ui/components/action_sheet.cljs index 91bcef8ebb..1a1dd31d25 100644 --- a/src/status_im/ui/components/action_sheet.cljs +++ b/src/status_im/ui/components/action_sheet.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.components.action-sheet (:require [status-im.i18n :as i18n] [status-im.utils.core :as utils] - [status-im.react-native.js-dependencies :as rn-dependencies])) + [status-im.react-native.js-dependencies :as js-dependencies])) (defn- callback [options] (fn [index] @@ -19,6 +19,6 @@ (when message {:message message}))))) (defn show [{:keys [title message options]}] - (.showActionSheetWithOptions (.-ActionSheetIOS rn-dependencies/react-native) + (.showActionSheetWithOptions (.-ActionSheetIOS js-dependencies/react-native) (prepare-options title message options) (callback options))) diff --git a/src/status_im/ui/components/animation.cljs b/src/status_im/ui/components/animation.cljs index 7c4eba0e91..eabc7d2ae2 100644 --- a/src/status_im/ui/components/animation.cljs +++ b/src/status_im/ui/components/animation.cljs @@ -1,30 +1,30 @@ (ns status-im.ui.components.animation - (:require [status-im.ui.components.react :refer [animated]])) + (:require [status-im.ui.components.react :as react])) (defn start ([anim] (.start anim)) ([anim callback] (.start anim callback))) (defn timing [anim-value config] - (.timing animated anim-value (clj->js config))) + (.timing react/animated anim-value (clj->js config))) (defn spring [anim-value config] - (.spring animated anim-value (clj->js config))) + (.spring react/animated anim-value (clj->js config))) (defn decay [anim-value config] - (.decay animated anim-value (clj->js config))) + (.decay react/animated anim-value (clj->js config))) (defn anim-sequence [animations] - (.sequence animated (clj->js animations))) + (.sequence react/animated (clj->js animations))) (defn parallel [animations] - (.parallel animated (clj->js animations))) + (.parallel react/animated (clj->js animations))) (defn anim-delay [duration] - (.delay animated duration)) + (.delay react/animated duration)) (defn event [config] - (.event animated (clj->js [nil, config]))) + (.event react/animated (clj->js [nil, config]))) (defn add-listener [anim-value listener] (.addListener anim-value listener)) diff --git a/src/status_im/ui/components/camera.cljs b/src/status_im/ui/components/camera.cljs index 831bb047e5..d6cc8607d8 100644 --- a/src/status_im/ui/components/camera.cljs +++ b/src/status_im/ui/components/camera.cljs @@ -1,15 +1,15 @@ (ns status-im.ui.components.camera (:require [goog.object :as object] - [reagent.core :as r] - [clojure.walk :refer [keywordize-keys]] - [status-im.react-native.js-dependencies :as rn-dependecies])) + [reagent.core :as reagent] + [clojure.walk :as walk] + [status-im.react-native.js-dependencies :as js-dependecies])) -(def default-camera (.-default rn-dependecies/camera)) +(def default-camera (.-default js-dependecies/camera)) (defn constants [t] - (-> (object/get rn-dependecies/camera "constants" t) + (-> (object/get js-dependecies/camera "constants" t) (js->clj) - (keywordize-keys))) + (walk/keywordize-keys))) (def aspects (constants "Aspect")) (def capture-targets (constants "CaptureTarget")) @@ -24,7 +24,7 @@ (.catch else))) (defn camera [props] - (r/create-element default-camera (clj->js (merge {:inverted true} props)))) + (reagent/create-element default-camera (clj->js (merge {:inverted true} props)))) (defn get-qr-code-data [code] (.-data code)) diff --git a/src/status_im/ui/components/carousel/carousel.cljs b/src/status_im/ui/components/carousel/carousel.cljs index cd93ec250c..b4e7b31940 100644 --- a/src/status_im/ui/components/carousel/carousel.cljs +++ b/src/status_im/ui/components/carousel/carousel.cljs @@ -1,14 +1,14 @@ (ns status-im.ui.components.carousel.carousel - (:require [reagent.impl.component :as rc] + (:require [reagent.impl.component :as component] [status-im.ui.components.react :as react] - [status-im.ui.components.carousel.styles :as st] + [status-im.ui.components.carousel.styles :as styles] [taoensso.timbre :as log] - [status-im.react-native.js-dependencies :as rn-dependencies] + [status-im.react-native.js-dependencies :as js-dependencies] [status-im.utils.utils :as utils])) (defn window-page-width [] - (.-width (.get (.. rn-dependencies/react-native -Dimensions) "window"))) + (.-width (.get (.. js-dependencies/react-native -Dimensions) "window"))) (def defaults {:gap 8 :sneak 8 @@ -128,7 +128,7 @@ (go-to-page component initial-page)))) (defn component-will-receive-props [component new-argv] - (let [props (rc/extract-props new-argv)] + (let [props (component/extract-props new-argv)] (log/debug "component-will-receive-props: props=" props) (apply-props component props))) @@ -161,7 +161,7 @@ touchable-data {:key index :onPress #(go-to-page component page-index)}] [react/touchable-without-feedback touchable-data - [react/view {:style [(st/page index count page-width gap) + [react/view {:style [(styles/page index count page-width gap) page-style] :onLayout #(log/debug "view onLayout" %)} @@ -173,8 +173,8 @@ state (reagent.core/state component) gap (get-gap state)] (log/debug "reagent-render: " data state) - [react/view {:style st/scroll-view-container} - [react/scroll-view {:contentContainerStyle (st/content-container gap) + [react/view {:style styles/scroll-view-container} + [react/scroll-view {:contentContainerStyle (styles/content-container gap) :automaticallyAdjustContentInsets false :bounces false :decelerationRate 0.9 diff --git a/src/status_im/ui/components/checkbox/styles.cljs b/src/status_im/ui/components/checkbox/styles.cljs index 2c97d0ad14..39ec2d0f16 100644 --- a/src/status_im/ui/components/checkbox/styles.cljs +++ b/src/status_im/ui/components/checkbox/styles.cljs @@ -1,12 +1,12 @@ (ns status-im.ui.components.checkbox.styles (:require-macros [status-im.utils.styles :refer [defnstyle]]) - (:require [status-im.ui.components.styles :as st])) + (:require [status-im.ui.components.styles :as styles])) (def wrapper {:padding 16}) (defnstyle icon-check-container [checked?] - {:background-color (if checked? st/color-light-blue st/color-gray5) + {:background-color (if checked? styles/color-light-blue styles/color-gray5) :alignItems :center :justifyContent :center :android {:border-radius 2 diff --git a/src/status_im/ui/components/checkbox/view.cljs b/src/status_im/ui/components/checkbox/view.cljs index ff4aae522b..979442f1d8 100644 --- a/src/status_im/ui/components/checkbox/view.cljs +++ b/src/status_im/ui/components/checkbox/view.cljs @@ -1,6 +1,5 @@ (ns status-im.ui.components.checkbox.view - (:require [reagent.core :as reagent] - [status-im.ui.components.checkbox.styles :as styles] + (:require [status-im.ui.components.checkbox.styles :as styles] [status-im.ui.components.react :as react])) ;; TODO(jeluard) Migrate to native checkbox provided by RN 0.49 diff --git a/src/status_im/ui/components/common/common.cljs b/src/status_im/ui/components/common/common.cljs index 6740693428..d9f687a5d2 100644 --- a/src/status_im/ui/components/common/common.cljs +++ b/src/status_im/ui/components/common/common.cljs @@ -2,12 +2,11 @@ (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [status-im.ui.components.react :as react] [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.context-menu :refer [context-menu]] + [status-im.ui.components.context-menu :as context-menu] [status-im.ui.components.common.styles :as styles] [status-im.utils.ethereum.core :as ethereum] [status-im.utils.platform :as platform] - [status-im.i18n :as i18n] - [re-frame.core :as re-frame])) + [status-im.i18n :as i18n])) (defn top-shadow [] (when platform/android? @@ -56,7 +55,7 @@ [react/view {:flex 1}]]) (when extended? [react/view styles/form-title-extend-container - [context-menu + [context-menu/context-menu [vector-icons/icon :icons/options] options nil diff --git a/src/status_im/ui/components/contact/contact.cljs b/src/status_im/ui/components/contact/contact.cljs index 3efa1d115c..a17769bf33 100644 --- a/src/status_im/ui/components/contact/contact.cljs +++ b/src/status_im/ui/components/contact/contact.cljs @@ -1,54 +1,54 @@ (ns status-im.ui.components.contact.contact - (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [status-im.ui.components.react :refer [view touchable-highlight text]] - [status-im.ui.components.icons.vector-icons :as vi] - [status-im.ui.components.chat-icon.screen :refer [contact-icon-contacts-tab]] - [status-im.ui.components.context-menu :refer [context-menu]] - [status-im.ui.components.contact.styles :as st] - [status-im.utils.gfycat.core :refer [generate-gfy]] - [status-im.i18n :refer [get-contact-translated label]])) + (:require-macros [status-im.utils.views :as views]) + (:require [status-im.ui.components.react :as react] + [status-im.ui.components.icons.vector-icons :as vector-icons] + [status-im.ui.components.chat-icon.screen :as chat-icon.screen] + [status-im.ui.components.context-menu :as context-menu] + [status-im.ui.components.contact.styles :as styles] + [status-im.utils.gfycat.core :as gfycat] + [status-im.i18n :as i18n])) (defn contact-photo [contact] - [view - [contact-icon-contacts-tab contact]]) + [react/view + [chat-icon.screen/contact-icon-contacts-tab contact]]) (defn contact-inner-view ([{:keys [info style] {:keys [whisper-identity name] :as contact} :contact}] - [view (merge st/contact-inner-container style) + [react/view (merge styles/contact-inner-container style) [contact-photo contact] - [view st/info-container - [text {:style st/name-text - :number-of-lines 1} + [react/view styles/info-container + [react/text {:style styles/name-text + :number-of-lines 1} (if (pos? (count (:name contact))) - (get-contact-translated whisper-identity :name name) + (i18n/get-contact-translated whisper-identity :name name) ;;TODO is this correct behaviour? - (generate-gfy whisper-identity))] + (gfycat/generate-gfy whisper-identity))] (when info - [text {:style st/info-text} + [react/text {:style styles/info-text} info])]])) (defn contact-view [{:keys [contact extended? on-press extend-options info show-forward?]}] - [touchable-highlight (when-not extended? + [react/touchable-highlight (when-not extended? {:on-press (when on-press #(on-press contact))}) - [view st/contact-container + [react/view styles/contact-container [contact-inner-view {:contact contact :info info}] (when show-forward? - [view st/forward-btn - [vi/icon :icons/forward]]) + [react/view styles/forward-btn + [vector-icons/icon :icons/forward]]) (when (and extended? (not (empty? extend-options))) - [view st/more-btn-container - [context-menu - [vi/icon :icons/options {:accessibility-label :options}] + [react/view styles/more-btn-container + [context-menu/context-menu + [vector-icons/icon :icons/options {:accessibility-label :options}] extend-options nil - st/more-btn]])]]) + styles/more-btn]])]]) -(defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler] - (letsubs [checked [selected-key whisper-identity]] - [touchable-highlight {:on-press #(on-toggle-handler checked whisper-identity)} - [view (merge st/contact-container (when checked {:style st/selected-contact})) +(views/defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler] + (views/letsubs [checked [selected-key whisper-identity]] + [react/touchable-highlight {:on-press #(on-toggle-handler checked whisper-identity)} + [react/view (merge styles/contact-container (when checked {:style styles/selected-contact})) [contact-inner-view (merge {:contact contact} - (when checked {:style st/selected-contact}))] - [view (st/icon-check-container checked) + (when checked {:style styles/selected-contact}))] + [react/view (styles/icon-check-container checked) (when checked - [vi/icon :icons/ok {:style st/check-icon}])]]])) + [vector-icons/icon :icons/ok {:style styles/check-icon}])]]])) diff --git a/src/status_im/ui/components/context_menu.cljs b/src/status_im/ui/components/context_menu.cljs index 5cbbf6a50f..6e84f5a3f8 100644 --- a/src/status_im/ui/components/context_menu.cljs +++ b/src/status_im/ui/components/context_menu.cljs @@ -1,14 +1,13 @@ (ns status-im.ui.components.context-menu - (:require [status-im.react-native.js-dependencies :as rn-dependencies] + (:require [status-im.react-native.js-dependencies :as js-dependencies] [status-im.ui.components.action-sheet :as action-sheet] [status-im.ui.components.react :as react] [goog.object :as object] - [reagent.core :as r] - [status-im.ui.components.styles :as st] + [status-im.ui.components.styles :as styles] [status-im.utils.platform :as platform])) (defn- get-property [name] - (object/get rn-dependencies/popup-menu name)) + (object/get js-dependencies/popup-menu name)) (defn- get-class [name] (react/adapt-class (get-property name))) @@ -37,7 +36,7 @@ (defn- context-menu-text [destructive?] {:font-size 15 :line-height 20 - :color (if destructive? st/color-light-red st/text1-color)}) + :color (if destructive? styles/color-light-red styles/text1-color)}) (defn context-menu [trigger options & custom-styles trigger-style] (if platform/ios? diff --git a/src/status_im/ui/components/drag_drop.cljs b/src/status_im/ui/components/drag_drop.cljs index aae5e18acc..be6478ca18 100644 --- a/src/status_im/ui/components/drag_drop.cljs +++ b/src/status_im/ui/components/drag_drop.cljs @@ -1,11 +1,11 @@ (ns status-im.ui.components.drag-drop - (:require [status-im.ui.components.react :refer [animated pan-responder]])) + (:require [status-im.ui.components.react :as react])) (defn pan-handlers [pan-responder] (js->clj (.-panHandlers pan-responder))) (defn create-pan-responder [{:keys [on-move on-release]}] - (.create pan-responder + (.create react/pan-responder (clj->js {:onStartShouldSetPanResponder (fn [] true) :onPanResponderMove on-move :onPanResponderRelease on-release}))) diff --git a/src/status_im/ui/components/icons/custom_icons.cljs b/src/status_im/ui/components/icons/custom_icons.cljs index e1e66dc73a..84324aa36f 100644 --- a/src/status_im/ui/components/icons/custom_icons.cljs +++ b/src/status_im/ui/components/icons/custom_icons.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.components.icons.custom-icons - (:require [reagent.core :as r] - [status-im.react-native.js-dependencies :as rn-dependencies])) + (:require [reagent.core :as reagent] + [status-im.react-native.js-dependencies :as js-dependencies])) (def ion-icon - (r/adapt-react-class (.-default rn-dependencies/vector-icons))) + (reagent/adapt-react-class (.-default js-dependencies/vector-icons))) diff --git a/src/status_im/ui/components/icons/vector_icons.cljs b/src/status_im/ui/components/icons/vector_icons.cljs index 7fdeec6de4..c8dfced45b 100644 --- a/src/status_im/ui/components/icons/vector_icons.cljs +++ b/src/status_im/ui/components/icons/vector_icons.cljs @@ -1,15 +1,15 @@ (ns status-im.ui.components.icons.vector-icons - (:require-macros [status-im.utils.slurp :refer [slurp-svg]]) + (:require-macros [status-im.utils.slurp :as slurp]) (:require [goog.object :as object] [reagent.core :as reagent] [status-im.utils.platform :as platform] [status-im.ui.components.styles :as styles] [status-im.ui.components.react :as react] - [status-im.react-native.js-dependencies :as rn-dependencies]) + [status-im.react-native.js-dependencies :as js-dependencies]) (:refer-clojure :exclude [use])) (defn get-property [name] - (object/get rn-dependencies/svg name)) + (object/get js-dependencies/svg name)) (defn adapt-class [class] (when class @@ -25,59 +25,59 @@ (def use (get-class "Use")) (def defs (get-class "Defs")) -(def icons {:icons/discover (slurp-svg "./resources/icons/bottom/discover_gray.svg") - :icons/contacts (slurp-svg "./resources/icons/bottom/contacts_gray.svg") - :icons/home (slurp-svg "./resources/icons/bottom/home_gray.svg") - :icons/home-active (slurp-svg "./resources/icons/bottom/home_blue.svg") - :icons/profile (slurp-svg "./resources/icons/bottom/profile_gray.svg") - :icons/profile-active (slurp-svg "./resources/icons/bottom/profile_blue.svg") - :icons/wallet (slurp-svg "./resources/icons/bottom/wallet_gray.svg") - :icons/wallet-active (slurp-svg "./resources/icons/bottom/wallet_active.svg") - :icons/speaker (slurp-svg "./resources/icons/speaker.svg") - :icons/speaker-off (slurp-svg "./resources/icons/speaker_off.svg") - :icons/transaction-history (slurp-svg "./resources/icons/transaction_history.svg") - :icons/add (slurp-svg "./resources/icons/add.svg") - :icons/add-wallet (slurp-svg "./resources/icons/add_wallet.svg") - :icons/address (slurp-svg "./resources/icons/address.svg") - :icons/arrow-left (slurp-svg "./resources/icons/arrow_left.svg") - :icons/arrow-right (slurp-svg "./resources/icons/arrow_right.svg") - :icons/flash-active (slurp-svg "./resources/icons/flash_active.svg") - :icons/flash-inactive (slurp-svg "./resources/icons/flash_inactive.svg") - :icons/attach (slurp-svg "./resources/icons/attach.svg") - :icons/browse (slurp-svg "./resources/icons/browse.svg") - :icons/close (slurp-svg "./resources/icons/close.svg") - :icons/copy-from (slurp-svg "./resources/icons/copy_from.svg") - :icons/dots-horizontal (slurp-svg "./resources/icons/dots_horizontal.svg") - :icons/dots-vertical (slurp-svg "./resources/icons/dots_vertical.svg") - :icons/exclamation_mark (slurp-svg "./resources/icons/exclamation_mark.svg") - :icons/filter (slurp-svg "./resources/icons/filter.svg") - :icons/fullscreen (slurp-svg "./resources/icons/fullscreen.svg") - :icons/group-big (slurp-svg "./resources/icons/group_big.svg") - :icons/group-chat (slurp-svg "./resources/icons/group_chat.svg") - :icons/chats (slurp-svg "./resources/icons/chats.svg") - :icons/hamburger (slurp-svg "./resources/icons/hamburger.svg") - :icons/hidden (slurp-svg "./resources/icons/hidden.svg") - :icons/mic (slurp-svg "./resources/icons/mic.svg") - :icons/ok (slurp-svg "./resources/icons/ok.svg") - :icons/public (slurp-svg "./resources/icons/public.svg") - :icons/public-chat (slurp-svg "./resources/icons/public_chat.svg") - :icons/qr (slurp-svg "./resources/icons/QR.svg") - :icons/search (slurp-svg "./resources/icons/search.svg") - :icons/smile (slurp-svg "./resources/icons/smile.svg") - :icons/commands-list (slurp-svg "./resources/icons/commands_list.svg") - :icons/back (slurp-svg "./resources/icons/back.svg") - :icons/forward (slurp-svg "./resources/icons/forward.svg") - :icons/dropdown-up (slurp-svg "./resources/icons/dropdown_up.svg") - :icons/up (slurp-svg "./resources/icons/up.svg") - :icons/down (slurp-svg "./resources/icons/down.svg") - :icons/grab (slurp-svg "./resources/icons/grab.svg") - :icons/share (slurp-svg "./resources/icons/share.svg") - :icons/tooltip-triangle (slurp-svg "./resources/icons/tooltip-triangle.svg") - :icons/open (slurp-svg "./resources/icons/open.svg") - :icons/network (slurp-svg "./resources/icons/network.svg") - :icons/wnode (slurp-svg "./resources/icons/wnode.svg") - :icons/refresh (slurp-svg "./resources/icons/refresh.svg") - :icons/newchat (slurp-svg "./resources/icons/newchat.svg")}) +(def icons {:icons/discover (slurp/slurp-svg "./resources/icons/bottom/discover_gray.svg") + :icons/contacts (slurp/slurp-svg "./resources/icons/bottom/contacts_gray.svg") + :icons/home (slurp/slurp-svg "./resources/icons/bottom/home_gray.svg") + :icons/home-active (slurp/slurp-svg "./resources/icons/bottom/home_blue.svg") + :icons/profile (slurp/slurp-svg "./resources/icons/bottom/profile_gray.svg") + :icons/profile-active (slurp/slurp-svg "./resources/icons/bottom/profile_blue.svg") + :icons/wallet (slurp/slurp-svg "./resources/icons/bottom/wallet_gray.svg") + :icons/wallet-active (slurp/slurp-svg "./resources/icons/bottom/wallet_active.svg") + :icons/speaker (slurp/slurp-svg "./resources/icons/speaker.svg") + :icons/speaker-off (slurp/slurp-svg "./resources/icons/speaker_off.svg") + :icons/transaction-history (slurp/slurp-svg "./resources/icons/transaction_history.svg") + :icons/add (slurp/slurp-svg "./resources/icons/add.svg") + :icons/add-wallet (slurp/slurp-svg "./resources/icons/add_wallet.svg") + :icons/address (slurp/slurp-svg "./resources/icons/address.svg") + :icons/arrow-left (slurp/slurp-svg "./resources/icons/arrow_left.svg") + :icons/arrow-right (slurp/slurp-svg "./resources/icons/arrow_right.svg") + :icons/flash-active (slurp/slurp-svg "./resources/icons/flash_active.svg") + :icons/flash-inactive (slurp/slurp-svg "./resources/icons/flash_inactive.svg") + :icons/attach (slurp/slurp-svg "./resources/icons/attach.svg") + :icons/browse (slurp/slurp-svg "./resources/icons/browse.svg") + :icons/close (slurp/slurp-svg "./resources/icons/close.svg") + :icons/copy-from (slurp/slurp-svg "./resources/icons/copy_from.svg") + :icons/dots-horizontal (slurp/slurp-svg "./resources/icons/dots_horizontal.svg") + :icons/dots-vertical (slurp/slurp-svg "./resources/icons/dots_vertical.svg") + :icons/exclamation_mark (slurp/slurp-svg "./resources/icons/exclamation_mark.svg") + :icons/filter (slurp/slurp-svg "./resources/icons/filter.svg") + :icons/fullscreen (slurp/slurp-svg "./resources/icons/fullscreen.svg") + :icons/group-big (slurp/slurp-svg "./resources/icons/group_big.svg") + :icons/group-chat (slurp/slurp-svg "./resources/icons/group_chat.svg") + :icons/chats (slurp/slurp-svg "./resources/icons/chats.svg") + :icons/hamburger (slurp/slurp-svg "./resources/icons/hamburger.svg") + :icons/hidden (slurp/slurp-svg "./resources/icons/hidden.svg") + :icons/mic (slurp/slurp-svg "./resources/icons/mic.svg") + :icons/ok (slurp/slurp-svg "./resources/icons/ok.svg") + :icons/public (slurp/slurp-svg "./resources/icons/public.svg") + :icons/public-chat (slurp/slurp-svg "./resources/icons/public_chat.svg") + :icons/qr (slurp/slurp-svg "./resources/icons/QR.svg") + :icons/search (slurp/slurp-svg "./resources/icons/search.svg") + :icons/smile (slurp/slurp-svg "./resources/icons/smile.svg") + :icons/commands-list (slurp/slurp-svg "./resources/icons/commands_list.svg") + :icons/back (slurp/slurp-svg "./resources/icons/back.svg") + :icons/forward (slurp/slurp-svg "./resources/icons/forward.svg") + :icons/dropdown-up (slurp/slurp-svg "./resources/icons/dropdown_up.svg") + :icons/up (slurp/slurp-svg "./resources/icons/up.svg") + :icons/down (slurp/slurp-svg "./resources/icons/down.svg") + :icons/grab (slurp/slurp-svg "./resources/icons/grab.svg") + :icons/share (slurp/slurp-svg "./resources/icons/share.svg") + :icons/tooltip-triangle (slurp/slurp-svg "./resources/icons/tooltip-triangle.svg") + :icons/open (slurp/slurp-svg "./resources/icons/open.svg") + :icons/network (slurp/slurp-svg "./resources/icons/network.svg") + :icons/wnode (slurp/slurp-svg "./resources/icons/wnode.svg") + :icons/refresh (slurp/slurp-svg "./resources/icons/refresh.svg") + :icons/newchat (slurp/slurp-svg "./resources/icons/newchat.svg")}) (defn normalize-property-name [n] (if (= n :icons/options) diff --git a/src/status_im/ui/components/image_button/styles.cljs b/src/status_im/ui/components/image_button/styles.cljs index 48642b3b26..6cd2fb6af6 100644 --- a/src/status_im/ui/components/image_button/styles.cljs +++ b/src/status_im/ui/components/image_button/styles.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.image-button.styles - (:require [status-im.ui.components.styles :refer [color-blue]])) + (:require [status-im.ui.components.styles :as styles])) (def image-button {:position :absolute @@ -23,7 +23,7 @@ :margin-left 8}) (def scan-button-text - (merge image-button-text {:color color-blue})) + (merge image-button-text {:color styles/color-blue})) (def show-qr-button-text (merge image-button-text {:color "#838c93"})) diff --git a/src/status_im/ui/components/native_action_button.cljs b/src/status_im/ui/components/native_action_button.cljs index 4246fa836f..7b72f4f570 100644 --- a/src/status_im/ui/components/native_action_button.cljs +++ b/src/status_im/ui/components/native_action_button.cljs @@ -1,10 +1,10 @@ (ns status-im.ui.components.native-action-button - (:require [reagent.core :as r] - [status-im.react-native.js-dependencies :as rn-dependencies])) + (:require [reagent.core :as reagent] + [status-im.react-native.js-dependencies :as js-dependencies])) (def native-action-button - (r/adapt-react-class (.-default rn-dependencies/action-button))) + (reagent/adapt-react-class (.-default js-dependencies/action-button))) (def native-action-button-item - (r/adapt-react-class (.. rn-dependencies/action-button -default -Item))) + (reagent/adapt-react-class (.. js-dependencies/action-button -default -Item))) diff --git a/src/status_im/ui/components/nfc.cljs b/src/status_im/ui/components/nfc.cljs index fab1ed14b9..049bd60efc 100644 --- a/src/status_im/ui/components/nfc.cljs +++ b/src/status_im/ui/components/nfc.cljs @@ -1,27 +1,26 @@ (ns status-im.ui.components.nfc - (:require [cljs.spec.alpha :as s] - [status-im.utils.platform :as platform] - [status-im.react-native.js-dependencies :as rn-dependencies])) + (:require [status-im.utils.platform :as platform] + [status-im.react-native.js-dependencies :as js-dependencies])) (def android-only-error "NFC API is available only on Android") (defn get-card-id [on-success on-error] (if platform/android? - (-> (.getCardId rn-dependencies/nfc) + (-> (.getCardId js-dependencies/nfc) (.then on-success) (.catch on-error)) (on-error android-only-error))) (defn read-tag [sectors on-success on-error] (if platform/android? - (-> (.readTag rn-dependencies/nfc (clj->js sectors)) + (-> (.readTag js-dependencies/nfc (clj->js sectors)) (.then on-success) (.catch on-error)) (on-error android-only-error))) (defn write-tag [sectors card-id on-success on-error] (if platform/android? - (-> (.writeTag rn-dependencies/nfc (clj->js sectors) card-id) + (-> (.writeTag js-dependencies/nfc (clj->js sectors) card-id) (.then on-success) (.catch on-error)) (on-error android-only-error))) diff --git a/src/status_im/ui/components/permissions.cljs b/src/status_im/ui/components/permissions.cljs index 05564a3603..b037e0bfb0 100644 --- a/src/status_im/ui/components/permissions.cljs +++ b/src/status_im/ui/components/permissions.cljs @@ -2,9 +2,9 @@ (:require [status-im.utils.platform :as platform] [taoensso.timbre :as log] [status-im.ui.components.camera :as camera] - [status-im.react-native.js-dependencies :as rn-dependencies])) + [status-im.react-native.js-dependencies :as js-dependencies])) -(def permissions-class (.-PermissionsAndroid rn-dependencies/react-native)) +(def permissions-class (.-PermissionsAndroid js-dependencies/react-native)) (def permissions-map {:read-external-storage "android.permission.READ_EXTERNAL_STORAGE" diff --git a/src/status_im/ui/components/react.cljs b/src/status_im/ui/components/react.cljs index bcba3a640d..9bcb226701 100644 --- a/src/status_im/ui/components/react.cljs +++ b/src/status_im/ui/components/react.cljs @@ -2,29 +2,29 @@ (:require-macros [status-im.utils.views :as views]) (:require [clojure.string :as string] [goog.object :as object] - [reagent.core :as r] - [status-im.ui.components.styles :as st] - [status-im.utils.utils :as u] - [status-im.utils.platform :refer [platform-specific ios?]] + [reagent.core :as reagent] + [status-im.ui.components.styles :as styles] + [status-im.utils.utils :as utils] + [status-im.utils.platform :as platform] [status-im.i18n :as i18n] - [status-im.react-native.js-dependencies :as rn-dependencies])) + [status-im.react-native.js-dependencies :as js-dependencies])) (defn get-react-property [name] - (if rn-dependencies/react-native - (object/get rn-dependencies/react-native name) + (if js-dependencies/react-native + (object/get js-dependencies/react-native name) #js {})) (defn adapt-class [class] (when class - (r/adapt-react-class class))) + (reagent/adapt-react-class class))) (defn get-class [name] (adapt-class (get-react-property name))) -(def native-modules (.-NativeModules rn-dependencies/react-native)) -(def device-event-emitter (.-DeviceEventEmitter rn-dependencies/react-native)) -(def dismiss-keyboard! rn-dependencies/dismiss-keyboard) -(def orientation rn-dependencies/orientation) +(def native-modules (.-NativeModules js-dependencies/react-native)) +(def device-event-emitter (.-DeviceEventEmitter js-dependencies/react-native)) +(def dismiss-keyboard! js-dependencies/dismiss-keyboard) +(def orientation js-dependencies/orientation) (def back-handler (get-react-property "BackHandler")) (def splash-screen (.-SplashScreen native-modules)) @@ -57,20 +57,20 @@ (when-let [picker (get-react-property "Picker")] (adapt-class (.-Item picker)))) -(def pan-responder (.-PanResponder rn-dependencies/react-native)) -(def animated (.-Animated rn-dependencies/react-native)) -(def animated-view (r/adapt-react-class (.-View animated))) -(def animated-text (r/adapt-react-class (.-Text animated))) +(def pan-responder (.-PanResponder js-dependencies/react-native)) +(def animated (.-Animated js-dependencies/react-native)) +(def animated-view (reagent/adapt-react-class (.-View animated))) +(def animated-text (reagent/adapt-react-class (.-Text animated))) -(def dimensions (.-Dimensions rn-dependencies/react-native)) -(def keyboard (.-Keyboard rn-dependencies/react-native)) -(def linking (.-Linking rn-dependencies/react-native)) +(def dimensions (.-Dimensions js-dependencies/react-native)) +(def keyboard (.-Keyboard js-dependencies/react-native)) +(def linking (.-Linking js-dependencies/react-native)) (def slider (get-class "Slider")) ;; Accessor methods for React Components (defn add-font-style [style-key {:keys [font] :as opts :or {font :default}}] - (let [font (get-in platform-specific [:fonts (keyword font)]) + (let [font (get-in platform/platform-specific [:fonts (keyword font)]) style (get opts style-key)] (-> opts (dissoc :font) @@ -78,9 +78,9 @@ (defn text ([t] - (r/as-element [text-class t])) + (reagent/as-element [text-class t])) ([{:keys [uppercase?] :as opts} t & ts] - (r/as-element + (reagent/as-element (let [ts (cond->> (conj ts t) uppercase? (map #(when % (string/upper-case %))))] (vec (concat @@ -90,10 +90,10 @@ (defn text-input [{:keys [font style] :as opts :or {font :default}} text] - (let [font (get-in platform-specific [:fonts (keyword font)])] + (let [font (get-in platform/platform-specific [:fonts (keyword font)])] [text-input-class (merge {:underline-color-android :transparent - :placeholder-text-color st/text2-color + :placeholder-text-color styles/text2-color :placeholder (i18n/label :t/type-a-message) :value text} (-> opts @@ -101,7 +101,7 @@ (assoc :style (merge style font))))])) (defn icon - ([n] (icon n st/icon-default)) + ([n] (icon n styles/icon-default)) ([n style] [image {:source {:uri (keyword (str "icon_" (name n)))} :resizeMode "contain" @@ -115,13 +115,13 @@ (defn get-dimensions [name] (js->clj (.get dimensions name) :keywordize-keys true)) -(def gradient (adapt-class (.-default rn-dependencies/linear-gradient))) +(def gradient (adapt-class (.-default js-dependencies/linear-gradient))) (defn linear-gradient [props] [gradient props]) (defn list-item [component] - (r/as-element component)) + (reagent/as-element component)) (defn picker ([{:keys [style item-style selected on-change]} items] @@ -133,12 +133,12 @@ ;; Image picker -(def image-picker-class rn-dependencies/image-crop-picker) +(def image-picker-class js-dependencies/image-crop-picker) (defn show-access-error [o] (when (= "ERROR_PICKER_UNAUTHORIZED_KEY" (object/get o "code")) ; Do not show error when user cancel selection - (u/show-popup (i18n/label :t/error) - (i18n/label :t/photos-access-error)))) + (utils/show-popup (i18n/label :t/error) + (i18n/label :t/photos-access-error)))) (defn show-image-picker [images-fn] (let [image-picker (.-default image-picker-class)] @@ -150,40 +150,40 @@ ;; Clipboard (def sharing - (.-Share rn-dependencies/react-native)) + (.-Share js-dependencies/react-native)) (defn copy-to-clipboard [text] - (.setString (.-Clipboard rn-dependencies/react-native) text)) + (.setString (.-Clipboard js-dependencies/react-native) text)) (defn get-from-clipboard [clbk] - (let [clipboard-contents (.getString (.-Clipboard rn-dependencies/react-native))] + (let [clipboard-contents (.getString (.-Clipboard js-dependencies/react-native))] (.then clipboard-contents #(clbk %)))) ;; Emoji -(def emoji-picker-class rn-dependencies/emoji-picker) +(def emoji-picker-class js-dependencies/emoji-picker) (def emoji-picker (let [emoji-picker (.-default emoji-picker-class)] - (r/adapt-react-class emoji-picker))) + (reagent/adapt-react-class emoji-picker))) ;; Autolink -(def autolink-class (r/adapt-react-class (.-default rn-dependencies/autolink))) +(def autolink-class (reagent/adapt-react-class (.-default js-dependencies/autolink))) (defn autolink [opts] - (r/as-element + (reagent/as-element [autolink-class (add-font-style :style opts)])) ;; HTTP Bridge -(def http-bridge rn-dependencies/http-bridge) +(def http-bridge js-dependencies/http-bridge) ;; KeyboardAvoidingView (defn keyboard-avoiding-view [props & children] - (let [view-element (if ios? + (let [view-element (if platform/ios? [keyboard-avoiding-view-class (merge {:behavior :padding} props)] [view props])] (vec (concat view-element children)))) @@ -191,12 +191,12 @@ (views/defview with-activity-indicator [{:keys [timeout style enabled? preview]} comp] (views/letsubs - [loading (r/atom true)] + [loading (reagent/atom true)] {:component-did-mount (fn [] (if (or (nil? timeout) (> 100 timeout)) (reset! loading false) - (u/set-timeout (fn [] + (utils/set-timeout (fn [] (reset! loading false)) timeout)))} (if (and (not enabled?) @loading) diff --git a/src/status_im/ui/components/sortable_list_view.cljs b/src/status_im/ui/components/sortable_list_view.cljs index 0c3e306912..4846fa29e7 100644 --- a/src/status_im/ui/components/sortable_list_view.cljs +++ b/src/status_im/ui/components/sortable_list_view.cljs @@ -1,10 +1,10 @@ (ns status-im.ui.components.sortable-list-view - (:require [reagent.core :as r] + (:require [reagent.core :as reagent] [status-im.ui.components.react :as react] - [status-im.react-native.js-dependencies :as rn-dependencies])) + [status-im.react-native.js-dependencies :as js-dependencies])) (def sortable-listview-class - (r/adapt-react-class rn-dependencies/sortable-listview)) + (reagent/adapt-react-class js-dependencies/sortable-listview)) (defn sortable-list-view [{:keys [on-row-moved render-row] :as props}] [sortable-listview-class @@ -12,7 +12,7 @@ :render-row #(render-row (js->clj % :keywordize-keys true)))]) (defn- touchable [inner] - [react/touchable-highlight (js->clj (.-props (r/current-component))) + [react/touchable-highlight (js->clj (.-props (reagent/current-component))) [react/view inner]]) diff --git a/src/status_im/ui/components/status_view/view.cljs b/src/status_im/ui/components/status_view/view.cljs index d381d01196..07444b9b81 100644 --- a/src/status_im/ui/components/status_view/view.cljs +++ b/src/status_im/ui/components/status_view/view.cljs @@ -1,15 +1,12 @@ (ns status-im.ui.components.status-view.view - (:require-macros [status-im.utils.views :refer [defview]]) - (:require [re-frame.core :refer [subscribe dispatch]] - [clojure.string :as str] - [status-im.ui.components.react :refer [view text]] - [status-im.utils.platform :refer [platform-specific]] - [status-im.ui.components.styles :refer [color-blue color-black color-blue4-faded]] - [status-im.utils.core :refer [hash-tag?]])) + (:require [clojure.string :as string] + [status-im.ui.components.react :as react] + [status-im.ui.components.styles :as components.styles] + [status-im.utils.core :as utils.core])) (defn tag-view [tag] - [text {:style {:color color-blue4-faded} - :font :medium} + [react/text {:style {:color components.styles/color-blue4-faded} + :font :medium} (str tag " ")]) (defn status-view [{:keys [style @@ -19,15 +16,15 @@ on-press number-of-lines] :or {message-id "msg" - non-tag-color color-black}}] - [text {:style style - :on-press on-press - :number-of-lines number-of-lines - :font :default} - (for [[i status] (map-indexed vector (str/split status #" "))] - (if (hash-tag? status) + non-tag-color components.styles/color-black}}] + [react/text {:style style + :on-press on-press + :number-of-lines number-of-lines + :font :default} + (for [[i status] (map-indexed vector (string/split status #" "))] + (if (utils.core/hash-tag? status) ^{:key (str "item-" message-id "-" i)} [tag-view status] ^{:key (str "item-" message-id "-" i)} - [text {:style {:color non-tag-color}} + [react/text {:style {:color non-tag-color}} (str status " ")]))]) diff --git a/src/status_im/ui/components/sticky_button.cljs b/src/status_im/ui/components/sticky_button.cljs index a3770e4c8b..6a1b705e7e 100644 --- a/src/status_im/ui/components/sticky_button.cljs +++ b/src/status_im/ui/components/sticky_button.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.components.sticky-button (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) - (:require [status-im.ui.components.styles :as common] - [status-im.utils.platform :refer [platform-specific]] + (:require [status-im.ui.components.styles :as styles] + [status-im.utils.platform :as platform] [status-im.utils.core :as u] [status-im.ui.components.react :as react])) @@ -10,10 +10,10 @@ :height 52 :justify-content :center :align-items :center - :background-color common/color-light-blue}) + :background-color styles/color-light-blue}) (defstyle sticky-button-label-style - {:color common/color-white + {:color styles/color-white :ios {:font-size 17 :line-height 20 :letter-spacing -0.2} @@ -26,5 +26,5 @@ [react/touchable-highlight {:on-press (if once? (u/wrap-call-once! on-press) on-press)} [react/view sticky-button-style [react/text {:style sticky-button-label-style - :uppercase? (get-in platform-specific [:uppercase?])} + :uppercase? (get-in platform/platform-specific [:uppercase?])} label]]])) diff --git a/src/status_im/ui/components/sync_state/offline.cljs b/src/status_im/ui/components/sync_state/offline.cljs index 3e85a50a3b..c59ac6815b 100644 --- a/src/status_im/ui/components/sync_state/offline.cljs +++ b/src/status_im/ui/components/sync_state/offline.cljs @@ -1,32 +1,29 @@ (ns status-im.ui.components.sync-state.offline - (:require [re-frame.core :refer [subscribe dispatch]] - [reagent.core :as r] - [status-im.ui.components.react :refer [view - text - animated-view - get-dimensions]] - [status-im.ui.components.sync-state.styles :as st] - [status-im.ui.components.animation :as anim] - [status-im.i18n :refer [label]])) + (:require [re-frame.core :as re-frame] + [reagent.core :as reagent] + [status-im.ui.components.react :as react] + [status-im.ui.components.sync-state.styles :as styles] + [status-im.ui.components.animation :as animation] + [status-im.i18n :as i18n])) -(def window-width (:width (get-dimensions "window"))) +(def window-width (:width (react/get-dimensions "window"))) (defn start-offline-animation [offline-opacity] - (anim/start - (anim/timing offline-opacity {:toValue 1.0 - :duration 250}))) + (animation/start + (animation/timing offline-opacity {:toValue 1.0 + :duration 250}))) (defn offline-view [_] - (let [sync-state (subscribe [:sync-state]) - network-status (subscribe [:get :network-status]) - offline-opacity (anim/create-value 0.0) + (let [sync-state (re-frame/subscribe [:sync-state]) + network-status (re-frame/subscribe [:get :network-status]) + offline-opacity (animation/create-value 0.0) on-update (fn [_ _] - (anim/set-value offline-opacity 0) + (animation/set-value offline-opacity 0) (when (or (= @network-status :offline) (= @sync-state :offline)) (start-offline-animation offline-opacity))) - pending-contact? (subscribe [:current-contact :pending?]) - view-id (subscribe [:get :view-id])] - (r/create-class + pending-contact? (re-frame/subscribe [:current-contact :pending?]) + view-id (re-frame/subscribe [:get :view-id])] + (reagent/create-class {:component-did-mount on-update :component-did-update @@ -36,7 +33,7 @@ (fn [{:keys [top]}] (when (or (= @network-status :offline) (= @sync-state :offline)) (let [pending? (and @pending-contact? (= :chat @view-id))] - [animated-view {:style (st/offline-wrapper top offline-opacity window-width pending?)} - [view - [text {:style st/offline-text} - (label :t/offline)]]])))}))) + [react/animated-view {:style (styles/offline-wrapper top offline-opacity window-width pending?)} + [react/view + [react/text {:style styles/offline-text} + (i18n/label :t/offline)]]])))}))) diff --git a/src/status_im/ui/components/text_field/view.cljs b/src/status_im/ui/components/text_field/view.cljs index 70d2807455..4d13a11946 100644 --- a/src/status_im/ui/components/text_field/view.cljs +++ b/src/status_im/ui/components/text_field/view.cljs @@ -1,18 +1,11 @@ (ns status-im.ui.components.text-field.view - (:require [clojure.string :as s] - [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [reagent.core :as r] - [status-im.ui.components.react :refer [view - text - animated-text - animated-view - text-input - touchable-opacity]] - [status-im.ui.components.text-field.styles :as st] - [status-im.i18n :refer [label]] - [status-im.ui.components.animation :as anim] + (:require [clojure.string :as string] + [reagent.core :as reagent] + [status-im.ui.components.react :as react] + [status-im.ui.components.text-field.styles :as styles] + [status-im.ui.components.animation :as animation] [taoensso.timbre :as log] - [status-im.ui.components.styles :refer [separator-color]])) + [status-im.ui.components.styles :as components.styles])) (def config {:label-top 16 @@ -26,8 +19,8 @@ :line-style {} :editable true :label-color "#838c93" - :line-color separator-color - :focus-line-color separator-color + :line-color components.styles/separator-color + :focus-line-color components.styles/separator-color :focus-line-height 1 :error-color "#d50000" :secure-text-entry false @@ -40,18 +33,18 @@ (defn field-animation [{:keys [top to-top font-size to-font-size line-width to-line-width line-height to-line-height]} & [value-blank?]] (let [duration (:label-animation-duration config) - animation (anim/parallel (into [] - (concat + animation (animation/parallel (into [] + (concat (when (or (nil? value-blank?) value-blank?) - [(anim/timing top {:toValue to-top - :duration duration}) - (anim/timing font-size {:toValue to-font-size - :duration duration})]) - [(anim/timing line-width {:toValue to-line-width - :duration duration}) - (anim/timing line-height {:toValue to-line-height - :duration duration})])))] - (anim/start animation (fn [arg] + [(animation/timing top {:toValue to-top + :duration duration}) + (animation/timing font-size {:toValue to-font-size + :duration duration})]) + [(animation/timing line-width {:toValue to-line-width + :duration duration}) + (animation/timing line-height {:toValue to-line-height + :duration duration})])))] + (animation/start animation (fn [arg] (when (.-finished arg) (log/debug "Field animation finished")))))) @@ -62,47 +55,47 @@ :float-label? false :label-top 0 :label-font-size 0 - :line-width (anim/create-value 0) - :line-height (anim/create-value 1) + :line-width (animation/create-value 0) + :line-height (animation/create-value 1) :max-line-width 100}) ; Invoked once, both on the client and server, immediately before the initial ; rendering occurs. If you call setState within this method, render() will see ; the updated state and will be executed only once despite the state change. (defn component-will-mount [component] - (let [{:keys [value]} (r/props component) - data {:label-top (anim/create-value (if (s/blank? value) + (let [{:keys [value]} (reagent/props component) + data {:label-top (animation/create-value (if (string/blank? value) (:label-bottom config) (:label-top config))) - :label-font-size (anim/create-value (if (s/blank? value) + :label-font-size (animation/create-value (if (string/blank? value) (:label-font-large config) (:label-font-small config))) - :float-label? (if (s/blank? value) false true)}] + :float-label? (if (string/blank? value) false true)}] ;(log/debug "component-will-mount") - (r/set-state component data))) + (reagent/set-state component data))) (defn on-input-focus [{:keys [component animation onFocus]}] (do (log/debug "input focused") - (r/set-state component {:has-focus true - :float-label? true}) + (reagent/set-state component {:has-focus true + :float-label? true}) (field-animation (merge animation - {:to-line-width (:max-line-width (r/state component))})) + {:to-line-width (:max-line-width (reagent/state component))})) (when onFocus (onFocus)))) (defn on-input-blur [{:keys [component value animation onBlur]}] (log/debug "Input blurred") - (r/set-state component {:has-focus false - :float-label? (if (s/blank? value) false true)}) - (field-animation animation (s/blank? value)) + (reagent/set-state component {:has-focus false + :float-label? (if (string/blank? value) false true)}) + (field-animation animation (string/blank? value)) (when onBlur (onBlur))) (defn get-width [event] (.-width (.-layout (.-nativeEvent event)))) (defn reagent-render [_ _] - (let [component (r/current-component) - input-ref (r/atom nil) + (let [component (reagent/current-component) + input-ref (reagent/atom nil) {:keys [float-label? label-top label-font-size @@ -111,23 +104,23 @@ current-value valid-value temp-value - max-length]} (r/state component) + max-length]} (reagent/state component) {:keys [wrapper-style input-style label-hidden? line-color focus-line-color focus-line-height secure-text-entry label-color error-color error label value on-focus on-blur validator auto-focus on-change-text on-change on-end-editing editable placeholder placeholder-text-color auto-capitalize multiline number-of-lines]} - (merge default-props (r/props component)) + (merge default-props (reagent/props component)) valid-value (or valid-value "") line-color (if error error-color line-color) focus-line-color (if error error-color focus-line-color) label-color (if (and error (not float-label?)) error-color label-color) label (when-not label-hidden? (if error (str label " *") label))] - [view (merge st/text-field-container wrapper-style) + [react/view (merge styles/text-field-container wrapper-style) (when-not label-hidden? - [animated-text {:style (st/label label-top label-font-size label-color)} label]) - [text-input {:ref #(reset! input-ref %) - :style (merge st/text-input input-style) + [react/animated-text {:style (styles/label label-top label-font-size label-color)} label]) + [react/text-input {:ref #(reset! input-ref %) + :style (merge styles/text-input input-style) :placeholder (or placeholder "") :placeholder-text-color placeholder-text-color :editable editable @@ -156,14 +149,14 @@ :to-line-height 1} :onBlur on-blur}) :on-change-text (fn [text] - (r/set-state component {:current-value text}) + (reagent/set-state component {:current-value text}) (if (or (not validator) (validator text)) (do - (r/set-state component {:valid-value text - :temp-value nil}) + (reagent/set-state component {:valid-value text + :temp-value nil}) (on-change-text text)) - (r/set-state component {:temp-value valid-value - :max-length (count valid-value)}))) + (reagent/set-state component {:temp-value valid-value + :max-length (count valid-value)}))) :on-change on-change :default-value value :value temp-value @@ -171,10 +164,10 @@ :on-submit-editing #(.blur @input-ref) :on-end-editing (when on-end-editing on-end-editing) :auto-focus (true? auto-focus)}] - [view {:style (st/underline-container line-color) - :onLayout #(r/set-state component {:max-line-width (get-width %)})} - [animated-view {:style (st/underline focus-line-color line-width line-height)}]] - [text {:style (st/error-text error-color)} error]])) + [react/view {:style (styles/underline-container line-color) + :onLayout #(reagent/set-state component {:max-line-width (get-width %)})} + [react/animated-view {:style (styles/underline focus-line-color line-width line-height)}]] + [react/text {:style (styles/error-text error-color)} error]])) (defn text-field [_ _] (let [component-data {:get-initial-state get-initial-state @@ -182,9 +175,9 @@ :display-name "text-field" :reagent-render reagent-render :component-did-update (fn [comp] - (let [{:keys [temp-value]} (r/state comp)] + (let [{:keys [temp-value]} (reagent/state comp)] (when temp-value - (r/set-state comp {:temp-value nil - :max-length nil}))))}] + (reagent/set-state comp {:temp-value nil + :max-length nil}))))}] ;(log/debug "Creating text-field component: " data) - (r/create-class component-data))) + (reagent/create-class component-data))) diff --git a/src/status_im/ui/components/text_input_with_label/animation.cljs b/src/status_im/ui/components/text_input_with_label/animation.cljs index 712c75a997..f7fc5b1fca 100644 --- a/src/status_im/ui/components/text_input_with_label/animation.cljs +++ b/src/status_im/ui/components/text_input_with_label/animation.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.components.text-input-with-label.animation (:require [status-im.ui.components.animation :as animation] - [clojure.string :as str])) + [clojure.string :as string])) (def anim-duration 200) @@ -19,8 +19,8 @@ (defn animate-label [text {:keys [value* label-top label-font-size label-top-top label-top-bottom label-font-size-top label-font-size-bottom]}] - (when (or (str/blank? text) (str/blank? @value*)) - (let [was-blank? (str/blank? @value*) + (when (or (string/blank? text) (string/blank? @value*)) + (let [was-blank? (string/blank? @value*) anim (animation/parallel [(animation/timing label-top {:toValue (if was-blank? label-top-top label-top-bottom) diff --git a/src/status_im/ui/components/text_input_with_label/styles.cljs b/src/status_im/ui/components/text_input_with_label/styles.cljs index bd851612cd..2e0ab1e801 100644 --- a/src/status_im/ui/components/text_input_with_label/styles.cljs +++ b/src/status_im/ui/components/text_input_with_label/styles.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.components.text-input-with-label.styles (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) - (:require [status-im.utils.platform :refer [ios?]] + (:require [status-im.utils.platform :as platform] [status-im.ui.components.styles :as common])) (defstyle text-input @@ -57,12 +57,12 @@ :width underline-width :background-color (if error common/color-red-2 common/color-light-blue)}) -(def label-top-top (if ios? 6 6)) +(def label-top-top (if platform/ios? 6 6)) -(def label-top-bottom (if ios? 26 26)) +(def label-top-bottom (if platform/ios? 26 26)) -(def label-font-size-top (if ios? 14 12)) +(def label-font-size-top (if platform/ios? 14 12)) -(def label-font-size-bottom (if ios? 17 16)) +(def label-font-size-bottom (if platform/ios? 17 16)) -(def underline-max-height (if ios? 1 2)) +(def underline-max-height (if platform/ios? 1 2)) diff --git a/src/status_im/ui/components/toolbar/actions.cljs b/src/status_im/ui/components/toolbar/actions.cljs index e43e1ebd5f..cb5ccfe0de 100644 --- a/src/status_im/ui/components/toolbar/actions.cljs +++ b/src/status_im/ui/components/toolbar/actions.cljs @@ -1,6 +1,5 @@ (ns status-im.ui.components.toolbar.actions - (:require [re-frame.core :refer [dispatch]] - [status-im.ui.components.toolbar.styles :as st])) + (:require [re-frame.core :as re-frame])) (defn add [handler] {:icon :icons/add @@ -23,7 +22,7 @@ :handler handler :accessibility-label :toolbar-back-button}) -(def default-handler #(dispatch [:navigate-back])) +(def default-handler #(re-frame/dispatch [:navigate-back])) (def default-back (back default-handler)) diff --git a/src/status_im/ui/components/webview_bridge.cljs b/src/status_im/ui/components/webview_bridge.cljs index 2832b9323d..e474880f82 100644 --- a/src/status_im/ui/components/webview_bridge.cljs +++ b/src/status_im/ui/components/webview_bridge.cljs @@ -1,9 +1,9 @@ (ns status-im.ui.components.webview-bridge - (:require [reagent.core :as r] - [status-im.react-native.js-dependencies :as rn-dependencies])) + (:require [reagent.core :as reagent] + [status-im.react-native.js-dependencies :as js-dependencies])) (def webview-bridge-class - (r/adapt-react-class (.-default rn-dependencies/webview-bridge))) + (reagent/adapt-react-class (.-default js-dependencies/webview-bridge))) (defn webview-bridge [opts] [webview-bridge-class opts])