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 6661de0cd1..bd851612cd 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 @@ -3,21 +3,23 @@ (:require [status-im.utils.platform :refer [ios?]] [status-im.ui.components.styles :as common])) -(defnstyle text-input [content-height] +(defstyle text-input {:placeholder "" - :android {:height (or content-height 24) - :padding-top 0 + :android {:padding-top 0 :padding-bottom 0 :padding-left 0 :margin-top 26 :margin-bottom 4 :font-size 16} - :ios {:height (or content-height 26) - :margin-top 24 + :ios {:margin-top 24 :margin-bottom 6 :font-size 17 :letter-spacing -0.2}}) +(defstyle content-height + {:android {:height 24} + :ios {:height 26}}) + (defstyle component-container {:margin-left 16 :android {:min-height 76} @@ -31,29 +33,29 @@ :ios {:letter-spacing -0.2}}) (defstyle description-text - {:color common/color-gray4 - :android {:margin-top 6 - :font-size 12} - :ios {:margin-top 4 - :font-size 14 - :letter-spacing -0.2}}) + {:color common/color-gray4 + :android {:margin-top 6 + :font-size 12} + :ios {:margin-top 4 + :font-size 14 + :letter-spacing -0.2}}) (defstyle error-text - {:color common/color-red-2 - :android {:margin-top 6 - :font-size 12} - :ios {:margin-top 4 - :font-size 14 - :letter-spacing -0.2}}) + {:color common/color-red-2 + :android {:margin-top 6 + :font-size 12} + :ios {:margin-top 4 + :font-size 14 + :letter-spacing -0.2}}) (defn underline-blured [error] {:background-color (if error common/color-red-2 common/color-light-gray2) :align-items :center}) (defn underline-focused [underline-width underline-height error] - {:height underline-height - :width underline-width - :background-color (if error common/color-red-2 common/color-light-blue)}) + {:height underline-height + :width underline-width + :background-color (if error common/color-red-2 common/color-light-blue)}) (def label-top-top (if ios? 6 6)) diff --git a/src/status_im/ui/components/text_input_with_label/view.cljs b/src/status_im/ui/components/text_input_with_label/view.cljs index 7d8537bbce..141d715e47 100644 --- a/src/status_im/ui/components/text_input_with_label/view.cljs +++ b/src/status_im/ui/components/text_input_with_label/view.cljs @@ -1,62 +1,50 @@ (ns status-im.ui.components.text-input-with-label.view - (:require [reagent.core :as r] + (:require [reagent.core :as reagent] [status-im.ui.components.animation :as animation] - [status-im.ui.components.text-input-with-label.animation :refer [animate-label - text-input-on-focus - text-input-on-blur]] - [status-im.ui.components.react :refer [view - text - animated-text - animated-view - text-input]] - [status-im.ui.components.text-input-with-label.styles :as st] - [clojure.string :as str])) + [status-im.ui.components.text-input-with-label.animation :as label-animation] + [status-im.ui.components.react :as react] + [status-im.ui.components.text-input-with-label.styles :as styles] + [clojure.string :as string])) (defn get-init-props [{:keys [default-value]}] - (let [blank? (str/blank? default-value)] - {:underline-width (animation/create-value 0) - :underline-height (animation/create-value 1) - :label-top (animation/create-value (if blank? - st/label-top-bottom - st/label-top-top)) - :label-font-size (animation/create-value (if blank? - st/label-font-size-bottom - st/label-font-size-top)) - :label-top-top st/label-top-top - :label-top-bottom st/label-top-bottom - :label-font-size-top st/label-font-size-top - :label-font-size-bottom st/label-font-size-bottom - :underline-max-height st/underline-max-height - :content-height* (r/atom nil) - :input-ref* (r/atom nil) - :value* (r/atom default-value) - :underline-max-width* (r/atom 0)})) + (let [blank? (string/blank? default-value)] + {:underline-width (animation/create-value 0) + :underline-height (animation/create-value 1) + :label-top (animation/create-value (if blank? + styles/label-top-bottom + styles/label-top-top)) + :label-font-size (animation/create-value (if blank? + styles/label-font-size-bottom + styles/label-font-size-top)) + :label-top-top styles/label-top-top + :label-top-bottom styles/label-top-bottom + :label-font-size-top styles/label-font-size-top + :label-font-size-bottom styles/label-font-size-bottom + :underline-max-height styles/underline-max-height + :input-ref* (reagent/atom nil) + :value* (reagent/atom default-value) + :underline-max-width* (reagent/atom 0)})) (defn get-width [event] (.-width (.-layout (.-nativeEvent event)))) (defn text-input-on-change-text [text props] - (animate-label text props) + (label-animation/animate-label text props) (reset! (:value* props) text)) -(defn text-input-handlers [{:keys [on-focus on-blur on-change-text on-change on-submit-editing - auto-expanding multiline max-height ref]} props] +(defn text-input-handlers [{:keys [on-focus on-blur on-change-text on-change + on-submit-editing max-height ref]} props] {:ref #(do (reset! (:input-ref* props) %) (when ref (ref %))) - :on-change #(do - (when (and auto-expanding multiline) - (reset! (:content-height* props) (min (.-height (.-contentSize (.-nativeEvent %))) - max-height))) - (when on-change (on-change %))) :on-submit-editing #(do (.blur @(:input-ref* props)) (when on-submit-editing (on-submit-editing))) :on-focus #(do - (text-input-on-focus props) + (label-animation/text-input-on-focus props) (when on-focus (on-focus))) :on-blur #(do - (text-input-on-blur props) + (label-animation/text-input-on-blur props) (when on-blur (on-blur))) :on-change-text #(do (text-input-on-change-text % props) @@ -64,20 +52,21 @@ (defn text-input-with-label [options] (let [props (get-init-props options)] - (fn [{:keys [label description error hide-underline?] :as options}] - [view st/component-container - [animated-text {:style (st/label-animated-text props)} label] - [text-input (merge (st/text-input @(:content-height* props)) - (dissoc options :label :description :error :hide-underline?) - (text-input-handlers options props))] + (fn [{:keys [label description error hide-underline? auto-expanding multiline] :as options}] + [react/view styles/component-container + [react/animated-text {:style (styles/label-animated-text props)} label] + [react/text-input (merge styles/text-input + (when-not (and auto-expanding multiline) + styles/content-height) + (dissoc options :label :description :error :auto-expanding :hide-underline?) + (text-input-handlers options props))] (when-not hide-underline? - [view {:style (st/underline-blured error) - :on-layout #(reset! (:underline-max-width* props) (get-width %))} - [animated-view {:style (st/underline-focused - (:underline-width props) - (:underline-height props) - error)}]]) + [react/view {:style (styles/underline-blured error) + :on-layout #(reset! (:underline-max-width* props) (get-width %))} + [react/animated-view {:style (styles/underline-focused (:underline-width props) + (:underline-height props) + error)}]]) (cond error - [text {:style st/error-text} error] + [react/text {:style styles/error-text} error] description - [text {:style st/description-text} description])]))) + [react/text {:style styles/description-text} description])]))) diff --git a/src/status_im/ui/screens/accounts/views.cljs b/src/status_im/ui/screens/accounts/views.cljs index 79cbbf71cd..55b687bfe9 100644 --- a/src/status_im/ui/screens/accounts/views.cljs +++ b/src/status_im/ui/screens/accounts/views.cljs @@ -1,8 +1,7 @@ (ns status-im.ui.screens.accounts.views (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [dispatch dispatch-sync]] - [status-im.ui.screens.accounts.styles :as st] - [status-im.ui.components.text-input-with-label.view :refer [text-input-with-label]] + [status-im.ui.screens.accounts.styles :as st] [status-im.ui.components.status-bar :refer [status-bar]] [status-im.ui.components.toolbar.actions :as act] [status-im.ui.components.common.common :as common]