status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-01-14 02:35:54 +00:00
Code Issues Projects Releases Wiki Activity

Simplify input height management

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