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

Simplify input height management

This commit is contained in:
janherich 2017-12-18 15:38:47 +01:00 committed by Goran Jović
parent eb8d0a8a79
commit fecdef4124
3 changed files with 65 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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))

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

@ -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])])))

3
src/status_im/ui/screens/accounts/views.cljs
View File

@ -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]