From 2864b6b4c633bb04840090e0cb8a19373732fbae Mon Sep 17 00:00:00 2001 From: alwxndr Date: Fri, 9 Mar 2018 15:58:27 +0100 Subject: [PATCH] Fixes for chat input; animations leftovers removed Signed-off-by: Julien Eluard --- src/status_im/chat/screen.cljs | 28 ++++++++----- .../chat/styles/input/box_header.cljs | 41 ------------------- src/status_im/chat/styles/screen.cljs | 4 ++ .../views/input/animations/expandable.cljs | 8 ++-- .../chat/views/input/box_header.cljs | 39 ------------------ src/status_im/chat/views/input/input.cljs | 12 +++--- .../chat/views/input/parameter_box.cljs | 17 +++----- .../chat/views/input/result_box.cljs | 23 ++++------- .../chat/views/input/suggestions.cljs | 7 +--- 9 files changed, 46 insertions(+), 133 deletions(-) delete mode 100644 src/status_im/chat/styles/input/box_header.cljs delete mode 100644 src/status_im/chat/views/input/box_header.cljs diff --git a/src/status_im/chat/screen.cljs b/src/status_im/chat/screen.cljs index 6081ffd86d..b40ebdfee1 100644 --- a/src/status_im/chat/screen.cljs +++ b/src/status_im/chat/screen.cljs @@ -112,14 +112,20 @@ (letsubs [{:keys [group-chat public? input-text]} [:get-current-chat] show-bottom-info? [:get-current-chat-ui-prop :show-bottom-info?] current-view [:get :view-id]] - [react/view {:style style/chat-view - :on-layout (fn [e] - (re-frame/dispatch [:set :layout-height (-> e .-nativeEvent .-layout .-height)]))} - [chat-toolbar public?] - (when (= :chat current-view) - [messages-view-animation - [messages-view group-chat]]) - [input/container {:text-empty? (string/blank? input-text)}] - (when show-bottom-info? - [bottom-info/bottom-info-view]) - [connectivity/error-view {:top (get platform/platform-specific :status-bar-default-height)}]])) + ;; this scroll-view is a hack that allows us to use on-blur and on-focus on Android + ;; more details here: https://github.com/facebook/react-native/issues/11071 + [react/scroll-view {:scroll-enabled false + :style style/scroll-root + :content-container-style style/scroll-root + :keyboard-should-persist-taps :handled} + [react/view {:style style/chat-view + :on-layout (fn [e] + (re-frame/dispatch [:set :layout-height (-> e .-nativeEvent .-layout .-height)]))} + [chat-toolbar public?] + (when (= :chat current-view) + [messages-view-animation + [messages-view group-chat]]) + [input/container {:text-empty? (string/blank? input-text)}] + (when show-bottom-info? + [bottom-info/bottom-info-view]) + [connectivity/error-view {:top (get platform/platform-specific :status-bar-default-height)}]]])) diff --git a/src/status_im/chat/styles/input/box_header.cljs b/src/status_im/chat/styles/input/box_header.cljs deleted file mode 100644 index b8077b4e98..0000000000 --- a/src/status_im/chat/styles/input/box_header.cljs +++ /dev/null @@ -1,41 +0,0 @@ -(ns status-im.chat.styles.input.box-header - (:require [status-im.ui.components.styles :as common])) - -(def header-height 33) - -(def header-container - {:background-color common/color-white - :align-items :center - :justify-content :center - :height header-height}) - -(def header-title-container - {:flex-direction :row - :height header-height - :border-bottom-color "rgba(193, 199, 203, 0.28)" - :border-bottom-width 1}) - -(defn header-title-text [back?] - {:color common/color-black - :flex 1 - :font-size 15 - :text-align :center - :padding-top 0 - :margin-left (if back? 32 72) - :margin-right 32}) - -(def header-back-container - {:width 24 - :height 24 - :margin-left 16 - :top -4}) - -(def header-close-container - {:width 24 - :height 24 - :margin-right 16 - :top -4}) - -(def header-icon - {:width 24 - :height 24}) \ No newline at end of file diff --git a/src/status_im/chat/styles/screen.cljs b/src/status_im/chat/styles/screen.cljs index 10e7772af8..05a2fa0834 100644 --- a/src/status_im/chat/styles/screen.cljs +++ b/src/status_im/chat/styles/screen.cljs @@ -3,6 +3,10 @@ (:require [status-im.ui.components.styles :as component.styles] [status-im.ui.components.colors :as colors])) + +(def scroll-root + {:flex 1}) + (def chat-view {:flex 1 :background-color component.styles/chat-background}) diff --git a/src/status_im/chat/views/input/animations/expandable.cljs b/src/status_im/chat/views/input/animations/expandable.cljs index 23ab601526..ef987991fb 100644 --- a/src/status_im/chat/views/input/animations/expandable.cljs +++ b/src/status_im/chat/views/input/animations/expandable.cljs @@ -16,12 +16,13 @@ :friction 10 :tension 60})))) -(defview expandable-view [{:keys [key custom-header]} & elements] +(defview expandable-view [{:keys [key]} & elements] (letsubs [anim-value (animation/create-value 0) input-height [:get-current-chat-ui-prop :input-height] chat-input-margin [:chat-input-margin] keyboard-height [:get :keyboard-height] - chat-layout-height [:get :layout-height]] + chat-layout-height [:get :layout-height] + input-focused? [:get-current-chat-ui-prop :input-focused?]] (let [input-height (or input-height (+ input-style/padding-vertical input-style/min-input-height input-style/padding-vertical @@ -33,4 +34,5 @@ (into [react/scroll-view {:keyboard-should-persist-taps :always :on-content-size-change #(expandable-view-on-update anim-value %2) :bounces false}] - elements)]]))) + (when input-focused? + elements))]]))) diff --git a/src/status_im/chat/views/input/box_header.cljs b/src/status_im/chat/views/input/box_header.cljs deleted file mode 100644 index 4da7dda522..0000000000 --- a/src/status_im/chat/views/input/box_header.cljs +++ /dev/null @@ -1,39 +0,0 @@ -(ns status-im.chat.views.input.box-header - (:require-macros [status-im.utils.views :refer [defview]]) - (:require [re-frame.core :refer [subscribe dispatch]] - [status-im.ui.components.react :refer [view - touchable-highlight - text - icon]] - [status-im.chat.styles.input.box-header :as style] - [taoensso.timbre :as log])) - -(defn get-header [type] - (fn [] - (let [parameter-box (subscribe [:chat-parameter-box]) - result-box (subscribe [:get-current-chat-ui-prop :result-box]) - chat-id (subscribe [:get-current-chat-id]) - command (subscribe [:selected-chat-command]) - index (subscribe [:current-chat-argument-position])] - (fn [] - (let [{:keys [showBack title]} (if (= type :parameter-box) - @parameter-box - @result-box)] - [view {:style style/header-container} - [view style/header-title-container - (when showBack - [touchable-highlight {:on-press #(dispatch [:select-prev-argument])} - [view style/header-back-container - [icon :back_gray style/header-icon]]]) - [text {:style (style/header-title-text showBack) - :number-of-lines 1 - :font :medium} - title] - [touchable-highlight - {:on-press (fn [] - (if (= type :parameter-box) - (let [command-name (get-in @command [:command :name])] - (dispatch [:set-in [:chats @chat-id :parameter-boxes command-name @index] nil])) - (dispatch [:set-chat-ui-props {:result-box nil}])))} - [view style/header-close-container - [icon :close_light_gray style/header-icon]]]]]))))) diff --git a/src/status_im/chat/views/input/input.cljs b/src/status_im/chat/views/input/input.cljs index 6033317f5e..764c672f86 100644 --- a/src/status_im/chat/views/input/input.cljs +++ b/src/status_im/chat/views/input/input.cljs @@ -31,7 +31,9 @@ :editable true :blur-on-submit false :on-focus #(re-frame/dispatch [:set-chat-ui-props {:input-focused? true}]) - :on-blur #(re-frame/dispatch [:set-chat-ui-props {:input-focused? false}]) + :on-blur (fn [] + (re-frame/dispatch [:set-chat-ui-props {:input-focused? false}]) + (re-frame/dispatch [:set-chat-input-text ""])) :on-submit-editing (fn [_] (if single-line-input? (re-frame/dispatch [:send-current-message]) @@ -41,7 +43,7 @@ (set-container-width-fn (.-width (.-layout (.-nativeEvent e))))) :on-change (fn [e] (let [native-event (.-nativeEvent e) - text (.-text native-event) + text (.-text native-event) content-size (.. native-event -contentSize)] (when (and (not single-line-input?) content-size) @@ -58,8 +60,8 @@ h (.-height s)] (set-container-width-fn w) (set-layout-height-fn h))) - :on-selection-change #(let [s (-> (.-nativeEvent %) - (.-selection)) + :on-selection-change #(let [s (-> (.-nativeEvent %) + (.-selection)) end (.-end s)] (re-frame/dispatch [:update-text-selection end])) :style (style/input-view height single-line-input?) @@ -157,7 +159,7 @@ (defn commands-button [] [react/touchable-highlight {:on-press #(do (re-frame/dispatch [:set-chat-input-text constants/command-char]) - (react/dismiss-keyboard!))} + (re-frame/dispatch [:chat-input-focus :input-ref]))} [react/view [vi/icon :icons/input-commands {:container-style style/input-commands-icon :color :dark}]]]) diff --git a/src/status_im/chat/views/input/parameter_box.cljs b/src/status_im/chat/views/input/parameter_box.cljs index 10b9071a85..c8c4963888 100644 --- a/src/status_im/chat/views/input/parameter_box.cljs +++ b/src/status_im/chat/views/input/parameter_box.cljs @@ -1,8 +1,6 @@ (ns status-im.chat.views.input.parameter-box (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [re-frame.core :refer [subscribe dispatch]] - [status-im.chat.views.input.animations.expandable :as expandable] - [status-im.chat.views.input.box-header :as box-header] + (:require [status-im.chat.views.input.animations.expandable :as expandable] [status-im.chat.styles.input.parameter-box :as style] [status-im.commands.utils :as command-utils] [status-im.ui.components.react :as react] @@ -16,12 +14,7 @@ (command-utils/generate-hiccup markup (first bot-id-bot-db) (second bot-id-bot-db))])) (defview parameter-box-view [] - (letsubs [show-parameter-box? [:show-parameter-box?] - parameter-box [:chat-parameter-box]] - (let [{:keys [title]} parameter-box] - (when show-parameter-box? - [expandable/expandable-view - {:key :parameter-box - :custom-header (when title - (box-header/get-header :parameter-box))} - [parameter-box-container]])))) + (letsubs [show-parameter-box? [:show-parameter-box?]] + (when show-parameter-box? + [expandable/expandable-view {:key :parameter-box} + [parameter-box-container]]))) diff --git a/src/status_im/chat/views/input/result_box.cljs b/src/status_im/chat/views/input/result_box.cljs index c791e46675..99abb9b25e 100644 --- a/src/status_im/chat/views/input/result_box.cljs +++ b/src/status_im/chat/views/input/result_box.cljs @@ -1,23 +1,14 @@ (ns status-im.chat.views.input.result-box (:require-macros [status-im.utils.views :refer [defview]]) - (:require [re-frame.core :refer [subscribe dispatch]] - [status-im.ui.components.react :refer [view - scroll-view - touchable-highlight - text - icon]] - [status-im.chat.views.input.animations.expandable :refer [expandable-view]] - [status-im.chat.views.input.box-header :as box-header] - [status-im.ui.components.connectivity.view :as connectivity])) - -(defview result-box-container [markup] - [view {:flex 1} - markup]) + (:require [status-im.ui.components.react :as react] + [status-im.chat.views.input.animations.expandable :as expandable] + [status-im.ui.components.connectivity.view :as connectivity] + [status-im.ui.components.styles :as common-styles])) (defview result-box-view [] [markup [:result-box-markup]] (when markup - [expandable-view {:key :result-box - :custom-header (box-header/get-header :result-box)} - [result-box-container markup] + [expandable/expandable-view {:key :result-box} + [react/view common-styles/flex + markup] [connectivity/error-view]])) diff --git a/src/status_im/chat/views/input/suggestions.cljs b/src/status_im/chat/views/input/suggestions.cljs index 4cfdb60cf1..f6f7f7c392 100644 --- a/src/status_im/chat/views/input/suggestions.cljs +++ b/src/status_im/chat/views/input/suggestions.cljs @@ -19,12 +19,7 @@ (defview suggestions-view [] (letsubs [commands [:get-available-commands]] - [expandable/expandable-view {:key :suggestions - :draggable? false - :height (* (count commands) - (+ style/item-height - style/border-height)) - :dynamic-height? true} + [expandable/expandable-view {:key :suggestions} [react/view [react/scroll-view {:keyboard-should-persist-taps :always :bounces false}