status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor #3141 - replaced :refer with :as in ui.components 

Signed-off-by: Goran Jovic <goranjovic@gmail.com>
This commit is contained in:
Goran Jovic 2018-01-26 11:31:34 +01:00
parent 2a6d7b9ac7
commit 96f08abc7d
No known key found for this signature in database
GPG Key ID: A778DE3CD7D2D10D
26 changed files with 293 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/status_im/ui/components/action_sheet.cljs
View File

@ -1,7 +1,7 @@
(ns status-im.ui.components.action-sheet (ns status-im.ui.components.action-sheet
(:require [status-im.i18n :as i18n] (:require [status-im.i18n :as i18n]
[status-im.utils.core :as utils] [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] (defn- callback [options]
(fn [index] (fn [index]
@ -19,6 +19,6 @@
(when message {:message message}))))) (when message {:message message})))))
(defn show [{:keys [title message options]}] (defn show [{:keys [title message options]}]
(.showActionSheetWithOptions (.-ActionSheetIOS rn-dependencies/react-native) (.showActionSheetWithOptions (.-ActionSheetIOS js-dependencies/react-native)
(prepare-options title message options) (prepare-options title message options)
(callback options))) (callback options)))

16
src/status_im/ui/components/animation.cljs
View File

@ -1,30 +1,30 @@
(ns status-im.ui.components.animation (ns status-im.ui.components.animation
(:require [status-im.ui.components.react :refer [animated]])) (:require [status-im.ui.components.react :as react]))
(defn start (defn start
([anim] (.start anim)) ([anim] (.start anim))
([anim callback] (.start anim callback))) ([anim callback] (.start anim callback)))
(defn timing [anim-value config] (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] (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] (defn decay [anim-value config]
(.decay animated anim-value (clj->js config))) (.decay react/animated anim-value (clj->js config)))
(defn anim-sequence [animations] (defn anim-sequence [animations]
(.sequence animated (clj->js animations))) (.sequence react/animated (clj->js animations)))
(defn parallel [animations] (defn parallel [animations]
(.parallel animated (clj->js animations))) (.parallel react/animated (clj->js animations)))
(defn anim-delay [duration] (defn anim-delay [duration]
(.delay animated duration)) (.delay react/animated duration))
(defn event [config] (defn event [config]
(.event animated (clj->js [nil, config]))) (.event react/animated (clj->js [nil, config])))
(defn add-listener [anim-value listener] (defn add-listener [anim-value listener]
(.addListener anim-value listener)) (.addListener anim-value listener))

14
src/status_im/ui/components/camera.cljs
View File

@ -1,15 +1,15 @@
(ns status-im.ui.components.camera (ns status-im.ui.components.camera
(:require [goog.object :as object] (:require [goog.object :as object]
[reagent.core :as r] [reagent.core :as reagent]
[clojure.walk :refer [keywordize-keys]] [clojure.walk :as walk]
[status-im.react-native.js-dependencies :as rn-dependecies])) [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] (defn constants [t]
(-> (object/get rn-dependecies/camera "constants" t) (-> (object/get js-dependecies/camera "constants" t)
(js->clj) (js->clj)
(keywordize-keys))) (walk/keywordize-keys)))
(def aspects (constants "Aspect")) (def aspects (constants "Aspect"))
(def capture-targets (constants "CaptureTarget")) (def capture-targets (constants "CaptureTarget"))
@ -24,7 +24,7 @@
(.catch else))) (.catch else)))
(defn camera [props] (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] (defn get-qr-code-data [code]
(.-data code)) (.-data code))

16
src/status_im/ui/components/carousel/carousel.cljs
View File

@ -1,14 +1,14 @@
(ns status-im.ui.components.carousel.carousel (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.react :as react]
[status-im.ui.components.carousel.styles :as st] [status-im.ui.components.carousel.styles :as styles]
[taoensso.timbre :as log] [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])) [status-im.utils.utils :as utils]))
(defn window-page-width [] (defn window-page-width []
(.-width (.get (.. rn-dependencies/react-native -Dimensions) "window"))) (.-width (.get (.. js-dependencies/react-native -Dimensions) "window")))
(def defaults {:gap 8 (def defaults {:gap 8
:sneak 8 :sneak 8
@ -128,7 +128,7 @@
(go-to-page component initial-page)))) (go-to-page component initial-page))))
(defn component-will-receive-props [component new-argv] (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) (log/debug "component-will-receive-props: props=" props)
(apply-props component props))) (apply-props component props)))
@ -161,7 +161,7 @@
touchable-data {:key index touchable-data {:key index
:onPress #(go-to-page component page-index)}] :onPress #(go-to-page component page-index)}]
[react/touchable-without-feedback touchable-data [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] page-style]
:onLayout #(log/debug "view onLayout" %)} :onLayout #(log/debug "view onLayout" %)}
@ -173,8 +173,8 @@
state (reagent.core/state component) state (reagent.core/state component)
gap (get-gap state)] gap (get-gap state)]
(log/debug "reagent-render: " data state) (log/debug "reagent-render: " data state)
[react/view {:style st/scroll-view-container} [react/view {:style styles/scroll-view-container}
[react/scroll-view {:contentContainerStyle (st/content-container gap) [react/scroll-view {:contentContainerStyle (styles/content-container gap)
:automaticallyAdjustContentInsets false :automaticallyAdjustContentInsets false
:bounces false :bounces false
:decelerationRate 0.9 :decelerationRate 0.9

4
src/status_im/ui/components/checkbox/styles.cljs
View File

@ -1,12 +1,12 @@
(ns status-im.ui.components.checkbox.styles (ns status-im.ui.components.checkbox.styles
(:require-macros [status-im.utils.styles :refer [defnstyle]]) (: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 (def wrapper
{:padding 16}) {:padding 16})
(defnstyle icon-check-container [checked?] (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 :alignItems :center
:justifyContent :center :justifyContent :center
:android {:border-radius 2 :android {:border-radius 2

3
src/status_im/ui/components/checkbox/view.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.ui.components.checkbox.view (ns status-im.ui.components.checkbox.view
(:require [reagent.core :as reagent] (:require [status-im.ui.components.checkbox.styles :as styles]
[status-im.ui.components.checkbox.styles :as styles]
[status-im.ui.components.react :as react])) [status-im.ui.components.react :as react]))
;; TODO(jeluard) Migrate to native checkbox provided by RN 0.49 ;; TODO(jeluard) Migrate to native checkbox provided by RN 0.49

7
src/status_im/ui/components/common/common.cljs
View File

@ -2,12 +2,11 @@
(:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [status-im.ui.components.react :as react] (:require [status-im.ui.components.react :as react]
[status-im.ui.components.icons.vector-icons :as vector-icons] [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.ui.components.common.styles :as styles]
[status-im.utils.ethereum.core :as ethereum] [status-im.utils.ethereum.core :as ethereum]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]))
[re-frame.core :as re-frame]))
(defn top-shadow [] (defn top-shadow []
(when platform/android? (when platform/android?
@ -56,7 +55,7 @@
[react/view {:flex 1}]]) [react/view {:flex 1}]])
(when extended? (when extended?
[react/view styles/form-title-extend-container [react/view styles/form-title-extend-container
[context-menu [context-menu/context-menu
[vector-icons/icon :icons/options] [vector-icons/icon :icons/options]
options options
nil nil

62
src/status_im/ui/components/contact/contact.cljs
View File

@ -1,54 +1,54 @@
(ns status-im.ui.components.contact.contact (ns status-im.ui.components.contact.contact
(:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require-macros [status-im.utils.views :as views])
(:require [status-im.ui.components.react :refer [view touchable-highlight text]] (:require [status-im.ui.components.react :as react]
[status-im.ui.components.icons.vector-icons :as vi] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.chat-icon.screen :refer [contact-icon-contacts-tab]] [status-im.ui.components.chat-icon.screen :as chat-icon.screen]
[status-im.ui.components.context-menu :refer [context-menu]] [status-im.ui.components.context-menu :as context-menu]
[status-im.ui.components.contact.styles :as st] [status-im.ui.components.contact.styles :as styles]
[status-im.utils.gfycat.core :refer [generate-gfy]] [status-im.utils.gfycat.core :as gfycat]
[status-im.i18n :refer [get-contact-translated label]])) [status-im.i18n :as i18n]))
(defn contact-photo [contact] (defn contact-photo [contact]
[view [react/view
[contact-icon-contacts-tab contact]]) [chat-icon.screen/contact-icon-contacts-tab contact]])
(defn contact-inner-view (defn contact-inner-view
([{:keys [info style] {:keys [whisper-identity name] :as contact} :contact}] ([{: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] [contact-photo contact]
[view st/info-container [react/view styles/info-container
[text {:style st/name-text [react/text {:style styles/name-text
:number-of-lines 1} :number-of-lines 1}
(if (pos? (count (:name contact))) (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? ;;TODO is this correct behaviour?
(generate-gfy whisper-identity))] (gfycat/generate-gfy whisper-identity))]
(when info (when info
[text {:style st/info-text} [react/text {:style styles/info-text}
info])]])) info])]]))
(defn contact-view [{:keys [contact extended? on-press extend-options info show-forward?]}] (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))}) {:on-press (when on-press #(on-press contact))})
[view st/contact-container [react/view styles/contact-container
[contact-inner-view {:contact contact :info info}] [contact-inner-view {:contact contact :info info}]
(when show-forward? (when show-forward?
[view st/forward-btn [react/view styles/forward-btn
[vi/icon :icons/forward]]) [vector-icons/icon :icons/forward]])
(when (and extended? (not (empty? extend-options))) (when (and extended? (not (empty? extend-options)))
[view st/more-btn-container [react/view styles/more-btn-container
[context-menu [context-menu/context-menu
[vi/icon :icons/options {:accessibility-label :options}] [vector-icons/icon :icons/options {:accessibility-label :options}]
extend-options extend-options
nil nil
st/more-btn]])]]) styles/more-btn]])]])
(defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler] (views/defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler]
(letsubs [checked [selected-key whisper-identity]] (views/letsubs [checked [selected-key whisper-identity]]
[touchable-highlight {:on-press #(on-toggle-handler checked whisper-identity)} [react/touchable-highlight {:on-press #(on-toggle-handler checked whisper-identity)}
[view (merge st/contact-container (when checked {:style st/selected-contact})) [react/view (merge styles/contact-container (when checked {:style styles/selected-contact}))
[contact-inner-view (merge {:contact contact} [contact-inner-view (merge {:contact contact}
(when checked {:style st/selected-contact}))] (when checked {:style styles/selected-contact}))]
[view (st/icon-check-container checked) [react/view (styles/icon-check-container checked)
(when checked (when checked
[vi/icon :icons/ok {:style st/check-icon}])]]])) [vector-icons/icon :icons/ok {:style styles/check-icon}])]]]))

9
src/status_im/ui/components/context_menu.cljs
View File

@ -1,14 +1,13 @@
(ns status-im.ui.components.context-menu (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.action-sheet :as action-sheet]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[goog.object :as object] [goog.object :as object]
[reagent.core :as r] [status-im.ui.components.styles :as styles]
[status-im.ui.components.styles :as st]
[status-im.utils.platform :as platform])) [status-im.utils.platform :as platform]))
(defn- get-property [name] (defn- get-property [name]
(object/get rn-dependencies/popup-menu name)) (object/get js-dependencies/popup-menu name))
(defn- get-class [name] (defn- get-class [name]
(react/adapt-class (get-property name))) (react/adapt-class (get-property name)))
@ -37,7 +36,7 @@
(defn- context-menu-text [destructive?] (defn- context-menu-text [destructive?]
{:font-size 15 {:font-size 15
:line-height 20 :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] (defn context-menu [trigger options & custom-styles trigger-style]
(if platform/ios? (if platform/ios?

4
src/status_im/ui/components/drag_drop.cljs
View File

@ -1,11 +1,11 @@
(ns status-im.ui.components.drag-drop (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] (defn pan-handlers [pan-responder]
(js->clj (.-panHandlers pan-responder))) (js->clj (.-panHandlers pan-responder)))
(defn create-pan-responder [{:keys [on-move on-release]}] (defn create-pan-responder [{:keys [on-move on-release]}]
(.create pan-responder (.create react/pan-responder
(clj->js {:onStartShouldSetPanResponder (fn [] true) (clj->js {:onStartShouldSetPanResponder (fn [] true)
:onPanResponderMove on-move :onPanResponderMove on-move
:onPanResponderRelease on-release}))) :onPanResponderRelease on-release})))

6
src/status_im/ui/components/icons/custom_icons.cljs
View File

@ -1,6 +1,6 @@
(ns status-im.ui.components.icons.custom-icons (ns status-im.ui.components.icons.custom-icons
(:require [reagent.core :as r] (:require [reagent.core :as reagent]
[status-im.react-native.js-dependencies :as rn-dependencies])) [status-im.react-native.js-dependencies :as js-dependencies]))
(def ion-icon (def ion-icon
(r/adapt-react-class (.-default rn-dependencies/vector-icons))) (reagent/adapt-react-class (.-default js-dependencies/vector-icons)))

112
src/status_im/ui/components/icons/vector_icons.cljs
View File

@ -1,15 +1,15 @@
(ns status-im.ui.components.icons.vector-icons (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] (:require [goog.object :as object]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
[status-im.ui.components.styles :as styles] [status-im.ui.components.styles :as styles]
[status-im.ui.components.react :as react] [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])) (:refer-clojure :exclude [use]))
(defn get-property [name] (defn get-property [name]
(object/get rn-dependencies/svg name)) (object/get js-dependencies/svg name))
(defn adapt-class [class] (defn adapt-class [class]
(when class (when class
@ -25,59 +25,59 @@
(def use (get-class "Use")) (def use (get-class "Use"))
(def defs (get-class "Defs")) (def defs (get-class "Defs"))
(def icons {:icons/discover (slurp-svg "./resources/icons/bottom/discover_gray.svg") (def icons {:icons/discover (slurp/slurp-svg "./resources/icons/bottom/discover_gray.svg")
:icons/contacts (slurp-svg "./resources/icons/bottom/contacts_gray.svg") :icons/contacts (slurp/slurp-svg "./resources/icons/bottom/contacts_gray.svg")
:icons/home (slurp-svg "./resources/icons/bottom/home_gray.svg") :icons/home (slurp/slurp-svg "./resources/icons/bottom/home_gray.svg")
:icons/home-active (slurp-svg "./resources/icons/bottom/home_blue.svg") :icons/home-active (slurp/slurp-svg "./resources/icons/bottom/home_blue.svg")
:icons/profile (slurp-svg "./resources/icons/bottom/profile_gray.svg") :icons/profile (slurp/slurp-svg "./resources/icons/bottom/profile_gray.svg")
:icons/profile-active (slurp-svg "./resources/icons/bottom/profile_blue.svg") :icons/profile-active (slurp/slurp-svg "./resources/icons/bottom/profile_blue.svg")
:icons/wallet (slurp-svg "./resources/icons/bottom/wallet_gray.svg") :icons/wallet (slurp/slurp-svg "./resources/icons/bottom/wallet_gray.svg")
:icons/wallet-active (slurp-svg "./resources/icons/bottom/wallet_active.svg") :icons/wallet-active (slurp/slurp-svg "./resources/icons/bottom/wallet_active.svg")
:icons/speaker (slurp-svg "./resources/icons/speaker.svg") :icons/speaker (slurp/slurp-svg "./resources/icons/speaker.svg")
:icons/speaker-off (slurp-svg "./resources/icons/speaker_off.svg") :icons/speaker-off (slurp/slurp-svg "./resources/icons/speaker_off.svg")
:icons/transaction-history (slurp-svg "./resources/icons/transaction_history.svg") :icons/transaction-history (slurp/slurp-svg "./resources/icons/transaction_history.svg")
:icons/add (slurp-svg "./resources/icons/add.svg") :icons/add (slurp/slurp-svg "./resources/icons/add.svg")
:icons/add-wallet (slurp-svg "./resources/icons/add_wallet.svg") :icons/add-wallet (slurp/slurp-svg "./resources/icons/add_wallet.svg")
:icons/address (slurp-svg "./resources/icons/address.svg") :icons/address (slurp/slurp-svg "./resources/icons/address.svg")
:icons/arrow-left (slurp-svg "./resources/icons/arrow_left.svg") :icons/arrow-left (slurp/slurp-svg "./resources/icons/arrow_left.svg")
:icons/arrow-right (slurp-svg "./resources/icons/arrow_right.svg") :icons/arrow-right (slurp/slurp-svg "./resources/icons/arrow_right.svg")
:icons/flash-active (slurp-svg "./resources/icons/flash_active.svg") :icons/flash-active (slurp/slurp-svg "./resources/icons/flash_active.svg")
:icons/flash-inactive (slurp-svg "./resources/icons/flash_inactive.svg") :icons/flash-inactive (slurp/slurp-svg "./resources/icons/flash_inactive.svg")
:icons/attach (slurp-svg "./resources/icons/attach.svg") :icons/attach (slurp/slurp-svg "./resources/icons/attach.svg")
:icons/browse (slurp-svg "./resources/icons/browse.svg") :icons/browse (slurp/slurp-svg "./resources/icons/browse.svg")
:icons/close (slurp-svg "./resources/icons/close.svg") :icons/close (slurp/slurp-svg "./resources/icons/close.svg")
:icons/copy-from (slurp-svg "./resources/icons/copy_from.svg") :icons/copy-from (slurp/slurp-svg "./resources/icons/copy_from.svg")
:icons/dots-horizontal (slurp-svg "./resources/icons/dots_horizontal.svg") :icons/dots-horizontal (slurp/slurp-svg "./resources/icons/dots_horizontal.svg")
:icons/dots-vertical (slurp-svg "./resources/icons/dots_vertical.svg") :icons/dots-vertical (slurp/slurp-svg "./resources/icons/dots_vertical.svg")
:icons/exclamation_mark (slurp-svg "./resources/icons/exclamation_mark.svg") :icons/exclamation_mark (slurp/slurp-svg "./resources/icons/exclamation_mark.svg")
:icons/filter (slurp-svg "./resources/icons/filter.svg") :icons/filter (slurp/slurp-svg "./resources/icons/filter.svg")
:icons/fullscreen (slurp-svg "./resources/icons/fullscreen.svg") :icons/fullscreen (slurp/slurp-svg "./resources/icons/fullscreen.svg")
:icons/group-big (slurp-svg "./resources/icons/group_big.svg") :icons/group-big (slurp/slurp-svg "./resources/icons/group_big.svg")
:icons/group-chat (slurp-svg "./resources/icons/group_chat.svg") :icons/group-chat (slurp/slurp-svg "./resources/icons/group_chat.svg")
:icons/chats (slurp-svg "./resources/icons/chats.svg") :icons/chats (slurp/slurp-svg "./resources/icons/chats.svg")
:icons/hamburger (slurp-svg "./resources/icons/hamburger.svg") :icons/hamburger (slurp/slurp-svg "./resources/icons/hamburger.svg")
:icons/hidden (slurp-svg "./resources/icons/hidden.svg") :icons/hidden (slurp/slurp-svg "./resources/icons/hidden.svg")
:icons/mic (slurp-svg "./resources/icons/mic.svg") :icons/mic (slurp/slurp-svg "./resources/icons/mic.svg")
:icons/ok (slurp-svg "./resources/icons/ok.svg") :icons/ok (slurp/slurp-svg "./resources/icons/ok.svg")
:icons/public (slurp-svg "./resources/icons/public.svg") :icons/public (slurp/slurp-svg "./resources/icons/public.svg")
:icons/public-chat (slurp-svg "./resources/icons/public_chat.svg") :icons/public-chat (slurp/slurp-svg "./resources/icons/public_chat.svg")
:icons/qr (slurp-svg "./resources/icons/QR.svg") :icons/qr (slurp/slurp-svg "./resources/icons/QR.svg")
:icons/search (slurp-svg "./resources/icons/search.svg") :icons/search (slurp/slurp-svg "./resources/icons/search.svg")
:icons/smile (slurp-svg "./resources/icons/smile.svg") :icons/smile (slurp/slurp-svg "./resources/icons/smile.svg")
:icons/commands-list (slurp-svg "./resources/icons/commands_list.svg") :icons/commands-list (slurp/slurp-svg "./resources/icons/commands_list.svg")
:icons/back (slurp-svg "./resources/icons/back.svg") :icons/back (slurp/slurp-svg "./resources/icons/back.svg")
:icons/forward (slurp-svg "./resources/icons/forward.svg") :icons/forward (slurp/slurp-svg "./resources/icons/forward.svg")
:icons/dropdown-up (slurp-svg "./resources/icons/dropdown_up.svg") :icons/dropdown-up (slurp/slurp-svg "./resources/icons/dropdown_up.svg")
:icons/up (slurp-svg "./resources/icons/up.svg") :icons/up (slurp/slurp-svg "./resources/icons/up.svg")
:icons/down (slurp-svg "./resources/icons/down.svg") :icons/down (slurp/slurp-svg "./resources/icons/down.svg")
:icons/grab (slurp-svg "./resources/icons/grab.svg") :icons/grab (slurp/slurp-svg "./resources/icons/grab.svg")
:icons/share (slurp-svg "./resources/icons/share.svg") :icons/share (slurp/slurp-svg "./resources/icons/share.svg")
:icons/tooltip-triangle (slurp-svg "./resources/icons/tooltip-triangle.svg") :icons/tooltip-triangle (slurp/slurp-svg "./resources/icons/tooltip-triangle.svg")
:icons/open (slurp-svg "./resources/icons/open.svg") :icons/open (slurp/slurp-svg "./resources/icons/open.svg")
:icons/network (slurp-svg "./resources/icons/network.svg") :icons/network (slurp/slurp-svg "./resources/icons/network.svg")
:icons/wnode (slurp-svg "./resources/icons/wnode.svg") :icons/wnode (slurp/slurp-svg "./resources/icons/wnode.svg")
:icons/refresh (slurp-svg "./resources/icons/refresh.svg") :icons/refresh (slurp/slurp-svg "./resources/icons/refresh.svg")
:icons/newchat (slurp-svg "./resources/icons/newchat.svg")}) :icons/newchat (slurp/slurp-svg "./resources/icons/newchat.svg")})
(defn normalize-property-name [n] (defn normalize-property-name [n]
(if (= n :icons/options) (if (= n :icons/options)

4
src/status_im/ui/components/image_button/styles.cljs
View File

@ -1,5 +1,5 @@
(ns status-im.ui.components.image-button.styles (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 (def image-button
{:position :absolute {:position :absolute
@ -23,7 +23,7 @@
:margin-left 8}) :margin-left 8})
(def scan-button-text (def scan-button-text
(merge image-button-text {:color color-blue})) (merge image-button-text {:color styles/color-blue}))
(def show-qr-button-text (def show-qr-button-text
(merge image-button-text {:color "#838c93"})) (merge image-button-text {:color "#838c93"}))

8
src/status_im/ui/components/native_action_button.cljs
View File

@ -1,10 +1,10 @@
(ns status-im.ui.components.native-action-button (ns status-im.ui.components.native-action-button
(:require [reagent.core :as r] (:require [reagent.core :as reagent]
[status-im.react-native.js-dependencies :as rn-dependencies])) [status-im.react-native.js-dependencies :as js-dependencies]))
(def native-action-button (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 (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)))

11
src/status_im/ui/components/nfc.cljs
View File

@ -1,27 +1,26 @@
(ns status-im.ui.components.nfc (ns status-im.ui.components.nfc
(:require [cljs.spec.alpha :as s] (:require [status-im.utils.platform :as platform]
[status-im.utils.platform :as platform] [status-im.react-native.js-dependencies :as js-dependencies]))
[status-im.react-native.js-dependencies :as rn-dependencies]))
(def android-only-error "NFC API is available only on Android") (def android-only-error "NFC API is available only on Android")
(defn get-card-id [on-success on-error] (defn get-card-id [on-success on-error]
(if platform/android? (if platform/android?
(-> (.getCardId rn-dependencies/nfc) (-> (.getCardId js-dependencies/nfc)
(.then on-success) (.then on-success)
(.catch on-error)) (.catch on-error))
(on-error android-only-error))) (on-error android-only-error)))
(defn read-tag [sectors on-success on-error] (defn read-tag [sectors on-success on-error]
(if platform/android? (if platform/android?
(-> (.readTag rn-dependencies/nfc (clj->js sectors)) (-> (.readTag js-dependencies/nfc (clj->js sectors))
(.then on-success) (.then on-success)
(.catch on-error)) (.catch on-error))
(on-error android-only-error))) (on-error android-only-error)))
(defn write-tag [sectors card-id on-success on-error] (defn write-tag [sectors card-id on-success on-error]
(if platform/android? (if platform/android?
(-> (.writeTag rn-dependencies/nfc (clj->js sectors) card-id) (-> (.writeTag js-dependencies/nfc (clj->js sectors) card-id)
(.then on-success) (.then on-success)
(.catch on-error)) (.catch on-error))
(on-error android-only-error))) (on-error android-only-error)))

4
src/status_im/ui/components/permissions.cljs
View File

@ -2,9 +2,9 @@
(:require [status-im.utils.platform :as platform] (:require [status-im.utils.platform :as platform]
[taoensso.timbre :as log] [taoensso.timbre :as log]
[status-im.ui.components.camera :as camera] [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 (def permissions-map
{:read-external-storage "android.permission.READ_EXTERNAL_STORAGE" {:read-external-storage "android.permission.READ_EXTERNAL_STORAGE"

80
src/status_im/ui/components/react.cljs
View File

@ -2,29 +2,29 @@
(:require-macros [status-im.utils.views :as views]) (:require-macros [status-im.utils.views :as views])
(:require [clojure.string :as string] (:require [clojure.string :as string]
[goog.object :as object] [goog.object :as object]
[reagent.core :as r] [reagent.core :as reagent]
[status-im.ui.components.styles :as st] [status-im.ui.components.styles :as styles]
[status-im.utils.utils :as u] [status-im.utils.utils :as utils]
[status-im.utils.platform :refer [platform-specific ios?]] [status-im.utils.platform :as platform]
[status-im.i18n :as i18n] [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] (defn get-react-property [name]
(if rn-dependencies/react-native (if js-dependencies/react-native
(object/get rn-dependencies/react-native name) (object/get js-dependencies/react-native name)
#js {})) #js {}))
(defn adapt-class [class] (defn adapt-class [class]
(when class (when class
(r/adapt-react-class class))) (reagent/adapt-react-class class)))
(defn get-class [name] (defn get-class [name]
(adapt-class (get-react-property name))) (adapt-class (get-react-property name)))
(def native-modules (.-NativeModules rn-dependencies/react-native)) (def native-modules (.-NativeModules js-dependencies/react-native))
(def device-event-emitter (.-DeviceEventEmitter rn-dependencies/react-native)) (def device-event-emitter (.-DeviceEventEmitter js-dependencies/react-native))
(def dismiss-keyboard! rn-dependencies/dismiss-keyboard) (def dismiss-keyboard! js-dependencies/dismiss-keyboard)
(def orientation rn-dependencies/orientation) (def orientation js-dependencies/orientation)
(def back-handler (get-react-property "BackHandler")) (def back-handler (get-react-property "BackHandler"))
(def splash-screen (.-SplashScreen native-modules)) (def splash-screen (.-SplashScreen native-modules))
@ -57,20 +57,20 @@
(when-let [picker (get-react-property "Picker")] (when-let [picker (get-react-property "Picker")]
(adapt-class (.-Item picker)))) (adapt-class (.-Item picker))))
(def pan-responder (.-PanResponder rn-dependencies/react-native)) (def pan-responder (.-PanResponder js-dependencies/react-native))
(def animated (.-Animated rn-dependencies/react-native)) (def animated (.-Animated js-dependencies/react-native))
(def animated-view (r/adapt-react-class (.-View animated))) (def animated-view (reagent/adapt-react-class (.-View animated)))
(def animated-text (r/adapt-react-class (.-Text animated))) (def animated-text (reagent/adapt-react-class (.-Text animated)))
(def dimensions (.-Dimensions rn-dependencies/react-native)) (def dimensions (.-Dimensions js-dependencies/react-native))
(def keyboard (.-Keyboard rn-dependencies/react-native)) (def keyboard (.-Keyboard js-dependencies/react-native))
(def linking (.-Linking rn-dependencies/react-native)) (def linking (.-Linking js-dependencies/react-native))
(def slider (get-class "Slider")) (def slider (get-class "Slider"))
;; Accessor methods for React Components ;; Accessor methods for React Components
(defn add-font-style [style-key {:keys [font] :as opts :or {font :default}}] (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)] style (get opts style-key)]
(-> opts (-> opts
(dissoc :font) (dissoc :font)
@ -78,9 +78,9 @@
(defn text (defn text
([t] ([t]
(r/as-element [text-class t])) (reagent/as-element [text-class t]))
([{:keys [uppercase?] :as opts} t & ts] ([{:keys [uppercase?] :as opts} t & ts]
(r/as-element (reagent/as-element
(let [ts (cond->> (conj ts t) (let [ts (cond->> (conj ts t)
uppercase? (map #(when % (string/upper-case %))))] uppercase? (map #(when % (string/upper-case %))))]
(vec (concat (vec (concat
@ -90,10 +90,10 @@
(defn text-input [{:keys [font style] :as opts (defn text-input [{:keys [font style] :as opts
:or {font :default}} text] :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 [text-input-class (merge
{:underline-color-android :transparent {:underline-color-android :transparent
:placeholder-text-color st/text2-color :placeholder-text-color styles/text2-color
:placeholder (i18n/label :t/type-a-message) :placeholder (i18n/label :t/type-a-message)
:value text} :value text}
(-> opts (-> opts
@ -101,7 +101,7 @@
(assoc :style (merge style font))))])) (assoc :style (merge style font))))]))
(defn icon (defn icon
([n] (icon n st/icon-default)) ([n] (icon n styles/icon-default))
([n style] ([n style]
[image {:source {:uri (keyword (str "icon_" (name n)))} [image {:source {:uri (keyword (str "icon_" (name n)))}
:resizeMode "contain" :resizeMode "contain"
@ -115,13 +115,13 @@
(defn get-dimensions [name] (defn get-dimensions [name]
(js->clj (.get dimensions name) :keywordize-keys true)) (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] (defn linear-gradient [props]
[gradient props]) [gradient props])
(defn list-item [component] (defn list-item [component]
(r/as-element component)) (reagent/as-element component))
(defn picker (defn picker
([{:keys [style item-style selected on-change]} items] ([{:keys [style item-style selected on-change]} items]
@ -133,11 +133,11 @@
;; Image picker ;; 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] (defn show-access-error [o]
(when (= "ERROR_PICKER_UNAUTHORIZED_KEY" (object/get o "code")) ; Do not show error when user cancel selection (when (= "ERROR_PICKER_UNAUTHORIZED_KEY" (object/get o "code")) ; Do not show error when user cancel selection
(u/show-popup (i18n/label :t/error) (utils/show-popup (i18n/label :t/error)
(i18n/label :t/photos-access-error)))) (i18n/label :t/photos-access-error))))
(defn show-image-picker [images-fn] (defn show-image-picker [images-fn]
@ -150,40 +150,40 @@
;; Clipboard ;; Clipboard
(def sharing (def sharing
(.-Share rn-dependencies/react-native)) (.-Share js-dependencies/react-native))
(defn copy-to-clipboard [text] (defn copy-to-clipboard [text]
(.setString (.-Clipboard rn-dependencies/react-native) text)) (.setString (.-Clipboard js-dependencies/react-native) text))
(defn get-from-clipboard [clbk] (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 %)))) (.then clipboard-contents #(clbk %))))
;; Emoji ;; Emoji
(def emoji-picker-class rn-dependencies/emoji-picker) (def emoji-picker-class js-dependencies/emoji-picker)
(def emoji-picker (def emoji-picker
(let [emoji-picker (.-default emoji-picker-class)] (let [emoji-picker (.-default emoji-picker-class)]
(r/adapt-react-class emoji-picker))) (reagent/adapt-react-class emoji-picker)))
;; Autolink ;; 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] (defn autolink [opts]
(r/as-element (reagent/as-element
[autolink-class (add-font-style :style opts)])) [autolink-class (add-font-style :style opts)]))
;; HTTP Bridge ;; HTTP Bridge
(def http-bridge rn-dependencies/http-bridge) (def http-bridge js-dependencies/http-bridge)
;; KeyboardAvoidingView ;; KeyboardAvoidingView
(defn keyboard-avoiding-view [props & children] (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)] [keyboard-avoiding-view-class (merge {:behavior :padding} props)]
[view props])] [view props])]
(vec (concat view-element children)))) (vec (concat view-element children))))
@ -191,12 +191,12 @@
(views/defview with-activity-indicator (views/defview with-activity-indicator
[{:keys [timeout style enabled? preview]} comp] [{:keys [timeout style enabled? preview]} comp]
(views/letsubs (views/letsubs
[loading (r/atom true)] [loading (reagent/atom true)]
{:component-did-mount (fn [] {:component-did-mount (fn []
(if (or (nil? timeout) (if (or (nil? timeout)
(> 100 timeout)) (> 100 timeout))
(reset! loading false) (reset! loading false)
(u/set-timeout (fn [] (utils/set-timeout (fn []
(reset! loading false)) (reset! loading false))
timeout)))} timeout)))}
(if (and (not enabled?) @loading) (if (and (not enabled?) @loading)

8
src/status_im/ui/components/sortable_list_view.cljs
View File

@ -1,10 +1,10 @@
(ns status-im.ui.components.sortable-list-view (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.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 (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}] (defn sortable-list-view [{:keys [on-row-moved render-row] :as props}]
[sortable-listview-class [sortable-listview-class
@ -12,7 +12,7 @@
:render-row #(render-row (js->clj % :keywordize-keys true)))]) :render-row #(render-row (js->clj % :keywordize-keys true)))])
(defn- touchable [inner] (defn- touchable [inner]
[react/touchable-highlight (js->clj (.-props (r/current-component))) [react/touchable-highlight (js->clj (.-props (reagent/current-component)))
[react/view [react/view
inner]]) inner]])

23
src/status_im/ui/components/status_view/view.cljs
View File

@ -1,14 +1,11 @@
(ns status-im.ui.components.status-view.view (ns status-im.ui.components.status-view.view
(:require-macros [status-im.utils.views :refer [defview]]) (:require [clojure.string :as string]
(:require [re-frame.core :refer [subscribe dispatch]] [status-im.ui.components.react :as react]
[clojure.string :as str] [status-im.ui.components.styles :as components.styles]
[status-im.ui.components.react :refer [view text]] [status-im.utils.core :as utils.core]))
[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?]]))
(defn tag-view [tag] (defn tag-view [tag]
[text {:style {:color color-blue4-faded} [react/text {:style {:color components.styles/color-blue4-faded}
:font :medium} :font :medium}
(str tag " ")]) (str tag " ")])
@ -19,15 +16,15 @@
on-press on-press
number-of-lines] number-of-lines]
:or {message-id "msg" :or {message-id "msg"
non-tag-color color-black}}] non-tag-color components.styles/color-black}}]
[text {:style style [react/text {:style style
:on-press on-press :on-press on-press
:number-of-lines number-of-lines :number-of-lines number-of-lines
:font :default} :font :default}
(for [[i status] (map-indexed vector (str/split status #" "))] (for [[i status] (map-indexed vector (string/split status #" "))]
(if (hash-tag? status) (if (utils.core/hash-tag? status)
^{:key (str "item-" message-id "-" i)} ^{:key (str "item-" message-id "-" i)}
[tag-view status] [tag-view status]
^{:key (str "item-" message-id "-" i)} ^{:key (str "item-" message-id "-" i)}
[text {:style {:color non-tag-color}} [react/text {:style {:color non-tag-color}}
(str status " ")]))]) (str status " ")]))])

10
src/status_im/ui/components/sticky_button.cljs
View File

@ -1,7 +1,7 @@
(ns status-im.ui.components.sticky-button (ns status-im.ui.components.sticky-button
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.ui.components.styles :as common] (:require [status-im.ui.components.styles :as styles]
[status-im.utils.platform :refer [platform-specific]] [status-im.utils.platform :as platform]
[status-im.utils.core :as u] [status-im.utils.core :as u]
[status-im.ui.components.react :as react])) [status-im.ui.components.react :as react]))
@ -10,10 +10,10 @@
:height 52 :height 52
:justify-content :center :justify-content :center
:align-items :center :align-items :center
:background-color common/color-light-blue}) :background-color styles/color-light-blue})
(defstyle sticky-button-label-style (defstyle sticky-button-label-style
{:color common/color-white {:color styles/color-white
:ios {:font-size 17 :ios {:font-size 17
:line-height 20 :line-height 20
:letter-spacing -0.2} :letter-spacing -0.2}
@ -26,5 +26,5 @@
[react/touchable-highlight {:on-press (if once? (u/wrap-call-once! on-press) on-press)} [react/touchable-highlight {:on-press (if once? (u/wrap-call-once! on-press) on-press)}
[react/view sticky-button-style [react/view sticky-button-style
[react/text {:style sticky-button-label-style [react/text {:style sticky-button-label-style
:uppercase? (get-in platform-specific [:uppercase?])} :uppercase? (get-in platform/platform-specific [:uppercase?])}
label]]])) label]]]))

43
src/status_im/ui/components/sync_state/offline.cljs
View File

@ -1,32 +1,29 @@
(ns status-im.ui.components.sync-state.offline (ns status-im.ui.components.sync-state.offline
(:require [re-frame.core :refer [subscribe dispatch]] (:require [re-frame.core :as re-frame]
[reagent.core :as r] [reagent.core :as reagent]
[status-im.ui.components.react :refer [view [status-im.ui.components.react :as react]
text [status-im.ui.components.sync-state.styles :as styles]
animated-view [status-im.ui.components.animation :as animation]
get-dimensions]] [status-im.i18n :as i18n]))
[status-im.ui.components.sync-state.styles :as st]
[status-im.ui.components.animation :as anim]
[status-im.i18n :refer [label]]))
(def window-width (:width (get-dimensions "window"))) (def window-width (:width (react/get-dimensions "window")))
(defn start-offline-animation [offline-opacity] (defn start-offline-animation [offline-opacity]
(anim/start (animation/start
(anim/timing offline-opacity {:toValue 1.0 (animation/timing offline-opacity {:toValue 1.0
:duration 250}))) :duration 250})))
(defn offline-view [_] (defn offline-view [_]
(let [sync-state (subscribe [:sync-state]) (let [sync-state (re-frame/subscribe [:sync-state])
network-status (subscribe [:get :network-status]) network-status (re-frame/subscribe [:get :network-status])
offline-opacity (anim/create-value 0.0) offline-opacity (animation/create-value 0.0)
on-update (fn [_ _] on-update (fn [_ _]
(anim/set-value offline-opacity 0) (animation/set-value offline-opacity 0)
(when (or (= @network-status :offline) (= @sync-state :offline)) (when (or (= @network-status :offline) (= @sync-state :offline))
(start-offline-animation offline-opacity))) (start-offline-animation offline-opacity)))
pending-contact? (subscribe [:current-contact :pending?]) pending-contact? (re-frame/subscribe [:current-contact :pending?])
view-id (subscribe [:get :view-id])] view-id (re-frame/subscribe [:get :view-id])]
(r/create-class (reagent/create-class
{:component-did-mount {:component-did-mount
on-update on-update
:component-did-update :component-did-update
@ -36,7 +33,7 @@
(fn [{:keys [top]}] (fn [{:keys [top]}]
(when (or (= @network-status :offline) (= @sync-state :offline)) (when (or (= @network-status :offline) (= @sync-state :offline))
(let [pending? (and @pending-contact? (= :chat @view-id))] (let [pending? (and @pending-contact? (= :chat @view-id))]
[animated-view {:style (st/offline-wrapper top offline-opacity window-width pending?)} [react/animated-view {:style (styles/offline-wrapper top offline-opacity window-width pending?)}
[view [react/view
[text {:style st/offline-text} [react/text {:style styles/offline-text}
(label :t/offline)]]])))}))) (i18n/label :t/offline)]]])))})))

95
src/status_im/ui/components/text_field/view.cljs
View File

@ -1,18 +1,11 @@
(ns status-im.ui.components.text-field.view (ns status-im.ui.components.text-field.view
(:require [clojure.string :as s] (:require [clojure.string :as string]
[re-frame.core :refer [subscribe dispatch dispatch-sync]] [reagent.core :as reagent]
[reagent.core :as r] [status-im.ui.components.react :as react]
[status-im.ui.components.react :refer [view [status-im.ui.components.text-field.styles :as styles]
text [status-im.ui.components.animation :as animation]
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]
[taoensso.timbre :as log] [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 (def config {:label-top 16
@ -26,8 +19,8 @@
:line-style {} :line-style {}
:editable true :editable true
:label-color "#838c93" :label-color "#838c93"
:line-color separator-color :line-color components.styles/separator-color
:focus-line-color separator-color :focus-line-color components.styles/separator-color
:focus-line-height 1 :focus-line-height 1
:error-color "#d50000" :error-color "#d50000"
:secure-text-entry false :secure-text-entry false
@ -40,18 +33,18 @@
(defn field-animation [{:keys [top to-top font-size to-font-size (defn field-animation [{:keys [top to-top font-size to-font-size
line-width to-line-width line-height to-line-height]} & [value-blank?]] line-width to-line-width line-height to-line-height]} & [value-blank?]]
(let [duration (:label-animation-duration config) (let [duration (:label-animation-duration config)
animation (anim/parallel (into [] animation (animation/parallel (into []
(concat (concat
(when (or (nil? value-blank?) value-blank?) (when (or (nil? value-blank?) value-blank?)
[(anim/timing top {:toValue to-top [(animation/timing top {:toValue to-top
:duration duration}) :duration duration})
(anim/timing font-size {:toValue to-font-size (animation/timing font-size {:toValue to-font-size
:duration duration})]) :duration duration})])
[(anim/timing line-width {:toValue to-line-width [(animation/timing line-width {:toValue to-line-width
:duration duration}) :duration duration})
(anim/timing line-height {:toValue to-line-height (animation/timing line-height {:toValue to-line-height
:duration duration})])))] :duration duration})])))]
(anim/start animation (fn [arg] (animation/start animation (fn [arg]
(when (.-finished arg) (when (.-finished arg)
(log/debug "Field animation finished")))))) (log/debug "Field animation finished"))))))
@ -62,47 +55,47 @@
:float-label? false :float-label? false
:label-top 0 :label-top 0
:label-font-size 0 :label-font-size 0
:line-width (anim/create-value 0) :line-width (animation/create-value 0)
:line-height (anim/create-value 1) :line-height (animation/create-value 1)
:max-line-width 100}) :max-line-width 100})
; Invoked once, both on the client and server, immediately before the initial ; Invoked once, both on the client and server, immediately before the initial
; rendering occurs. If you call setState within this method, render() will see ; 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. ; the updated state and will be executed only once despite the state change.
(defn component-will-mount [component] (defn component-will-mount [component]
(let [{:keys [value]} (r/props component) (let [{:keys [value]} (reagent/props component)
data {:label-top (anim/create-value (if (s/blank? value) data {:label-top (animation/create-value (if (string/blank? value)
(:label-bottom config) (:label-bottom config)
(:label-top 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-large config)
(:label-font-small 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") ;(log/debug "component-will-mount")
(r/set-state component data))) (reagent/set-state component data)))
(defn on-input-focus [{:keys [component animation onFocus]}] (defn on-input-focus [{:keys [component animation onFocus]}]
(do (do
(log/debug "input focused") (log/debug "input focused")
(r/set-state component {:has-focus true (reagent/set-state component {:has-focus true
:float-label? true}) :float-label? true})
(field-animation (merge animation (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)))) (when onFocus (onFocus))))
(defn on-input-blur [{:keys [component value animation onBlur]}] (defn on-input-blur [{:keys [component value animation onBlur]}]
(log/debug "Input blurred") (log/debug "Input blurred")
(r/set-state component {:has-focus false (reagent/set-state component {:has-focus false
:float-label? (if (s/blank? value) false true)}) :float-label? (if (string/blank? value) false true)})
(field-animation animation (s/blank? value)) (field-animation animation (string/blank? value))
(when onBlur (onBlur))) (when onBlur (onBlur)))
(defn get-width [event] (defn get-width [event]
(.-width (.-layout (.-nativeEvent event)))) (.-width (.-layout (.-nativeEvent event))))
(defn reagent-render [_ _] (defn reagent-render [_ _]
(let [component (r/current-component) (let [component (reagent/current-component)
input-ref (r/atom nil) input-ref (reagent/atom nil)
{:keys [float-label? {:keys [float-label?
label-top label-top
label-font-size label-font-size
@ -111,23 +104,23 @@
current-value current-value
valid-value valid-value
temp-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 {: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 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 auto-focus on-change-text on-change on-end-editing editable placeholder
placeholder-text-color auto-capitalize multiline number-of-lines]} 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 "") valid-value (or valid-value "")
line-color (if error error-color line-color) line-color (if error error-color line-color)
focus-line-color (if error error-color focus-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-color (if (and error (not float-label?)) error-color label-color)
label (when-not label-hidden? label (when-not label-hidden?
(if error (str label " *") label))] (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? (when-not label-hidden?
[animated-text {:style (st/label label-top label-font-size label-color)} label]) [react/animated-text {:style (styles/label label-top label-font-size label-color)} label])
[text-input {:ref #(reset! input-ref %) [react/text-input {:ref #(reset! input-ref %)
:style (merge st/text-input input-style) :style (merge styles/text-input input-style)
:placeholder (or placeholder "") :placeholder (or placeholder "")
:placeholder-text-color placeholder-text-color :placeholder-text-color placeholder-text-color
:editable editable :editable editable
@ -156,13 +149,13 @@
:to-line-height 1} :to-line-height 1}
:onBlur on-blur}) :onBlur on-blur})
:on-change-text (fn [text] :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)) (if (or (not validator) (validator text))
(do (do
(r/set-state component {:valid-value text (reagent/set-state component {:valid-value text
:temp-value nil}) :temp-value nil})
(on-change-text text)) (on-change-text text))
(r/set-state component {:temp-value valid-value (reagent/set-state component {:temp-value valid-value
:max-length (count valid-value)}))) :max-length (count valid-value)})))
:on-change on-change :on-change on-change
:default-value value :default-value value
@ -171,10 +164,10 @@
:on-submit-editing #(.blur @input-ref) :on-submit-editing #(.blur @input-ref)
:on-end-editing (when on-end-editing on-end-editing) :on-end-editing (when on-end-editing on-end-editing)
:auto-focus (true? auto-focus)}] :auto-focus (true? auto-focus)}]
[view {:style (st/underline-container line-color) [react/view {:style (styles/underline-container line-color)
:onLayout #(r/set-state component {:max-line-width (get-width %)})} :onLayout #(reagent/set-state component {:max-line-width (get-width %)})}
[animated-view {:style (st/underline focus-line-color line-width line-height)}]] [react/animated-view {:style (styles/underline focus-line-color line-width line-height)}]]
[text {:style (st/error-text error-color)} error]])) [react/text {:style (styles/error-text error-color)} error]]))
(defn text-field [_ _] (defn text-field [_ _]
(let [component-data {:get-initial-state get-initial-state (let [component-data {:get-initial-state get-initial-state
@ -182,9 +175,9 @@
:display-name "text-field" :display-name "text-field"
:reagent-render reagent-render :reagent-render reagent-render
:component-did-update (fn [comp] :component-did-update (fn [comp]
(let [{:keys [temp-value]} (r/state comp)] (let [{:keys [temp-value]} (reagent/state comp)]
(when temp-value (when temp-value
(r/set-state comp {:temp-value nil (reagent/set-state comp {:temp-value nil
:max-length nil}))))}] :max-length nil}))))}]
;(log/debug "Creating text-field component: " data) ;(log/debug "Creating text-field component: " data)
(r/create-class component-data))) (reagent/create-class component-data)))

6
src/status_im/ui/components/text_input_with_label/animation.cljs
View File

@ -1,6 +1,6 @@
(ns status-im.ui.components.text-input-with-label.animation (ns status-im.ui.components.text-input-with-label.animation
(:require [status-im.ui.components.animation :as animation] (:require [status-im.ui.components.animation :as animation]
[clojure.string :as str])) [clojure.string :as string]))
(def anim-duration 200) (def anim-duration 200)
@ -19,8 +19,8 @@
(defn animate-label [text {:keys [value* label-top label-font-size (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]}] label-top-top label-top-bottom label-font-size-top label-font-size-bottom]}]
(when (or (str/blank? text) (str/blank? @value*)) (when (or (string/blank? text) (string/blank? @value*))
(let [was-blank? (str/blank? @value*) (let [was-blank? (string/blank? @value*)
anim (animation/parallel [(animation/timing label-top {:toValue (if was-blank? anim (animation/parallel [(animation/timing label-top {:toValue (if was-blank?
label-top-top label-top-top
label-top-bottom) label-top-bottom)

12
src/status_im/ui/components/text_input_with_label/styles.cljs
View File

@ -1,6 +1,6 @@
(ns status-im.ui.components.text-input-with-label.styles (ns status-im.ui.components.text-input-with-label.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) (: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])) [status-im.ui.components.styles :as common]))
(defstyle text-input (defstyle text-input
@ -57,12 +57,12 @@
:width underline-width :width underline-width
:background-color (if error common/color-red-2 common/color-light-blue)}) :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))

5
src/status_im/ui/components/toolbar/actions.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.ui.components.toolbar.actions (ns status-im.ui.components.toolbar.actions
(:require [re-frame.core :refer [dispatch]] (:require [re-frame.core :as re-frame]))
[status-im.ui.components.toolbar.styles :as st]))
(defn add [handler] (defn add [handler]
{:icon :icons/add {:icon :icons/add
@ -23,7 +22,7 @@
:handler handler :handler handler
:accessibility-label :toolbar-back-button}) :accessibility-label :toolbar-back-button})
(def default-handler #(dispatch [:navigate-back])) (def default-handler #(re-frame/dispatch [:navigate-back]))
(def default-back (def default-back
(back default-handler)) (back default-handler))

6
src/status_im/ui/components/webview_bridge.cljs
View File

@ -1,9 +1,9 @@
(ns status-im.ui.components.webview-bridge (ns status-im.ui.components.webview-bridge
(:require [reagent.core :as r] (:require [reagent.core :as reagent]
[status-im.react-native.js-dependencies :as rn-dependencies])) [status-im.react-native.js-dependencies :as js-dependencies]))
(def webview-bridge-class (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] (defn webview-bridge [opts]
[webview-bridge-class opts]) [webview-bridge-class opts])