From ddb6344dca54ae0c6ec3217fe8be4512c16b49f0 Mon Sep 17 00:00:00 2001 From: alwx Date: Fri, 28 Apr 2017 14:40:10 +0300 Subject: [PATCH] Input fixes (#1067, #676), #1110 --- .re-natal | 3 +- package.json | 1 + src/status_im/chat/handlers.cljs | 19 ++++++-- src/status_im/chat/styles/input/input.cljs | 11 +++-- src/status_im/chat/views/input/input.cljs | 53 ++++++++++++---------- src/status_im/components/react.cljs | 6 +++ src/status_im/data_store/chats.cljs | 4 +- 7 files changed, 62 insertions(+), 35 deletions(-) diff --git a/.re-natal b/.re-natal index 34d5a84205..ef5704e9d7 100644 --- a/.re-natal +++ b/.re-natal @@ -41,7 +41,8 @@ "instabug-reactnative", "nfc-react-native", "react-native-http-bridge", - "react-native-network-info" + "react-native-network-info", + "react-native-autogrow-textinput" ], "imageDirs": [ "images" diff --git a/package.json b/package.json index d9ba677344..683c56df38 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "react-native": "^0.43.4", "react-native-action-button": "^2.0.13", "react-native-android-sms-listener": "github:adrian-tiberius/react-native-android-sms-listener#listener-bugfix", + "react-native-autogrow-textinput": "^3.0.2", "react-native-autolink": "^0.10.0", "react-native-camera": "^0.7.0", "react-native-circle-checkbox": "github:paramoshkinandrew/ReactNativeCircleCheckbox", diff --git a/src/status_im/chat/handlers.cljs b/src/status_im/chat/handlers.cljs index 6b41a258bb..4d9f0c530a 100644 --- a/src/status_im/chat/handlers.cljs +++ b/src/status_im/chat/handlers.cljs @@ -225,10 +225,8 @@ chats (->> loaded-chats (map (fn [{:keys [chat-id] :as chat}] - (let [last-message (messages/get-last-message chat-id) - prev-chat (get chats chat-id) - new-chat (assoc chat :last-message last-message)] - [chat-id (merge prev-chat new-chat)]))) + (let [last-message (messages/get-last-message chat-id)] + [chat-id (assoc chat :last-message last-message)]))) (into (priority-map-by compare-chats))))] (-> db @@ -242,12 +240,23 @@ db (assoc db :loaded-chats (chats/get-all)))) -;TODO: check if its new account / signup status / create console chat (register-handler :initialize-chats [(after #(dispatch [:load-unviewed-messages!])) (after #(dispatch [:load-default-contacts!]))] ((enrich initialize-chats) load-chats!)) +(register-handler :reload-chats + (fn [{:keys [chats] :as db} _] + (let [chats' (->> (chats/get-all) + (map (fn [{:keys [chat-id] :as chat}] + (let [last-message (messages/get-last-message chat-id) + prev-chat (get chats chat-id) + new-chat (assoc chat :last-message last-message)] + [chat-id (merge prev-chat new-chat)]))) + (into (priority-map-by compare-chats)))] + (-> (assoc db :chats chats') + (init-console-chat true))))) + (defmethod nav/preload-data! :chat [{:keys [current-chat-id] :as db} [_ _ id]] (let [chat-id (or id current-chat-id) diff --git a/src/status_im/chat/styles/input/input.cljs b/src/status_im/chat/styles/input/input.cljs index 8ca2ff0329..9d087e4f42 100644 --- a/src/status_im/chat/styles/input/input.cljs +++ b/src/status_im/chat/styles/input/input.cljs @@ -13,8 +13,8 @@ (def max-input-height 66) (def min-input-height 38) -(def input-spacing-top 5) -(def input-spacing-bottom 8) +(def input-spacing-top 3) +(def input-spacing-bottom 5) (defnstyle root [margin-bottom] {:flex-direction :column @@ -50,12 +50,17 @@ :android {:border-radius 4} :ios {:border-radius 8}}) +(defnstyle input-touch-handler-view [container-width] + {:position :absolute + :width container-width + :height min-input-height}) + (defnstyle input-view [content-height] {:flex 1 :font-size 14 :padding-top input-spacing-top :padding-bottom input-spacing-bottom - :height (min (max min-input-height content-height) max-input-height)}) + :height (+ (min (max min-input-height content-height) max-input-height))}) (def invisible-input-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 b5a8e0e4bb..10a4487343 100644 --- a/src/status_im/chat/views/input/input.cljs +++ b/src/status_im/chat/views/input/input.cljs @@ -6,6 +6,7 @@ [taoensso.timbre :as log] [status-im.accessibility-ids :as id] [status-im.components.react :refer [view + autogrow-text-input animated-view text scroll-view @@ -64,41 +65,45 @@ command (subscribe [:selected-chat-command]) sending-in-progress? (subscribe [:chat-ui-props :sending-in-progress?]) input-focused? (subscribe [:chat-ui-props :input-focused?])] - (fn [{:keys [set-layout-height height]}] + (fn [{:keys [set-layout-height set-container-width height]}] [text-input {:ref #(when % (dispatch [:set-chat-ui-props {:input-ref %}])) :accessibility-label id/chat-message-input :multiline true :default-value (or @input-text "") - :editable (not @sending-in-progress?) - :on-blur #(do (dispatch [:set-chat-ui-props {:input-focused? false}]) - (set-layout-height 0)) - :on-content-size-change (when-not @input-focused? + :editable true + :blur-on-submit false + :on-focus #(dispatch [:set-chat-ui-props {:input-focused? true + :show-emoji? false}]) + :on-blur #(do (dispatch [:set-chat-ui-props {:input-focused? false}])) + :on-layout (fn [e] + (set-container-width (.-width (.-layout (.-nativeEvent e))))) + :on-change (fn [e] + (let [native-event (.-nativeEvent e) + height (.. native-event -contentSize -height) + text (.-text native-event)] + (set-layout-height height) + (when (not= text @input-text) + (dispatch [:set-chat-input-text text]) + (if @command + (do + (dispatch [:load-chat-parameter-box (:command @command)]) + (dispatch [:set-chat-ui-props {:validation-messages nil}])) + (do + (dispatch [:set-chat-input-metadata nil]) + (dispatch [:set-chat-ui-props {:result-box nil + :validation-messages nil}])))))) + :on-content-size-change (when-not input-focused? #(let [h (-> (.-nativeEvent %) (.-contentSize) (.-height))] (set-layout-height h))) - :on-change #(let [h (-> (.-nativeEvent %) - (.-contentSize) - (.-height))] - (set-layout-height h)) - :on-change-text #(do (dispatch [:set-chat-input-text %]) - (if @command - (do - (dispatch [:load-chat-parameter-box (:command @command)]) - (dispatch [:set-chat-ui-props {:validation-messages nil}])) - (do - (dispatch [:set-chat-input-metadata nil]) - (dispatch [:set-chat-ui-props {:result-box nil - :validation-messages nil}])))) :on-selection-change #(let [s (-> (.-nativeEvent %) (.-selection))] (when (and (= (.-end s) (+ 2 (count (get-in @command [:command :name])))) (get-in @command [:command :sequential-params])) (dispatch [:chat-input-focus :seq-input-ref]))) - :on-focus #(dispatch [:set-chat-ui-props {:input-focused? true - :show-emoji? false}]) :style (style/input-view height) :placeholder-text-color style/color-input-helper-placeholder :auto-capitalize :sentences}]))) @@ -168,16 +173,18 @@ (let [component (r/current-component) set-layout-width #(r/set-state component {:width %}) set-layout-height #(r/set-state component {:height %}) + set-container-width #(r/set-state component {:container-width %}) command (subscribe [:selected-chat-command])] (r/create-class {:reagent-render (fn [{:keys [anim-margin]}] - (let [{:keys [width height]} (r/state component) + (let [{:keys [width height container-width]} (r/state component) command @command] [animated-view {:style (style/input-root height anim-margin)} - [basic-text-input {:set-layout-height set-layout-height - :height height}] [invisible-input {:set-layout-width set-layout-width}] + [basic-text-input {:set-layout-height set-layout-height + :set-container-width set-container-width + :height height}] [input-helper {:command command :width width}] [seq-input {:command-width width}] diff --git a/src/status_im/components/react.cljs b/src/status_im/components/react.cljs index 1de7daa210..58bc65e3c5 100644 --- a/src/status_im/components/react.cljs +++ b/src/status_im/components/react.cljs @@ -127,6 +127,12 @@ (def swiper (adapt-class (js/require "react-native-swiper"))) +;; Autogrow text input + +(def autogrow-class (js/require "react-native-autogrow-textinput")) + +(def autogrow-text-input (r/adapt-react-class (.-AutoGrowingTextInput autogrow-class))) + ;; Clipboard (def sharing diff --git a/src/status_im/data_store/chats.cljs b/src/status_im/data_store/chats.cljs index a0c0996181..b6cfe23344 100644 --- a/src/status_im/data_store/chats.cljs +++ b/src/status_im/data_store/chats.cljs @@ -43,9 +43,7 @@ (defn add-contacts [chat-id identities] (data-store/add-contacts chat-id identities) - ; TODO: move this somewhere else - ; TODO: temp. Update chat in db atom - (dispatch [:initialize-chats])) + (dispatch [:reload-chats])) (defn remove-contacts [chat-id identities]