diff --git a/src/status_im/chat/styles/input/input.cljs b/src/status_im/chat/styles/input/input.cljs index d78437bc7d..150db7cedb 100644 --- a/src/status_im/chat/styles/input/input.cljs +++ b/src/status_im/chat/styles/input/input.cljs @@ -11,8 +11,8 @@ (def color-command "#70777d") (def color-send "rgb(98, 143, 227)") -(def max-input-height 66) (def min-input-height 38) +(def max-input-height (* 4 min-input-height)) (defnstyle root [margin-bottom] {:flex-direction :column @@ -70,6 +70,18 @@ :background-color :transparent :color :transparent}) +(defnstyle invisible-input-text-height [container-width] + {:width container-width + :flex 1 + :font-size 14 + :padding-top 5 + :padding-bottom 5 + :android {:padding-top 3} + :position :absolute + :left 0 + :background-color :transparent + :color :transparent}) + (defnstyle input-helper-text [left] {:color color-input-helper-text :font-size 14 diff --git a/src/status_im/chat/views/input/input.cljs b/src/status_im/chat/views/input/input.cljs index 4645b346a5..edf4632840 100644 --- a/src/status_im/chat/views/input/input.cljs +++ b/src/status_im/chat/views/input/input.cljs @@ -105,6 +105,15 @@ (set-layout-width-fn w))} (or @input-text "")])) +(defn- invisible-input-height [{:keys [set-layout-height-fn container-width]}] + (let [input-text (subscribe [:chat :input-text])] + [react/text {:style (style/invisible-input-text-height container-width) + :on-layout #(let [h (-> (.-nativeEvent %) + (.-layout) + (.-height))] + (set-layout-height-fn h))} + (or @input-text "")])) + (defn- input-helper [_] (let [input-text (subscribe [:chat :input-text])] (fn [{:keys [command width]}] @@ -174,6 +183,8 @@ command @command] [react/animated-view {:style (style/input-root height anim-margin)} [invisible-input {:set-layout-width-fn set-layout-width-fn}] + [invisible-input-height {:set-layout-height-fn set-layout-height-fn + :container-width container-width}] [basic-text-input {:set-layout-height-fn set-layout-height-fn :set-container-width-fn set-container-width-fn :height height