Fixes for chat input; animations leftovers removed

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>

src/status_im/chat/screen.cljs

@@ -112,6 +112,12 @@
   (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]]
+    ;; 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)]))}
@@ -122,4 +128,4 @@
       [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)}]]))
+      [connectivity/error-view {:top (get platform/platform-specific :status-bar-default-height)}]]]))

src/status_im/chat/styles/input/box_header.cljs

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

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

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

src/status_im/chat/views/input/box_header.cljs

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

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

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]]
+  (:require [status-im.chat.views.input.animations.expandable :as expandable]
-            [status-im.chat.views.input.animations.expandable :as expandable]
-            [status-im.chat.views.input.box-header :as box-header]
             [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?]
+  (letsubs [show-parameter-box? [:show-parameter-box?]]
-            parameter-box [:chat-parameter-box]]
-    (let [{:keys [title]} parameter-box]
     (when show-parameter-box?
-        [expandable/expandable-view
+      [expandable/expandable-view {:key :parameter-box}
-         {:key           :parameter-box
+       [parameter-box-container]])))
-          :custom-header (when title
-                           (box-header/get-header :parameter-box))}
-         [parameter-box-container]]))))

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]]
+  (:require [status-im.ui.components.react :as react]
-            [status-im.ui.components.react :refer [view
+            [status-im.chat.views.input.animations.expandable :as expandable]
-                                                   scroll-view
+            [status-im.ui.components.connectivity.view :as connectivity]
-                                                   touchable-highlight
+            [status-im.ui.components.styles :as common-styles]))
-                                                   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])
 
 (defview result-box-view []
   [markup [:result-box-markup]]
   (when markup
-    [expandable-view {:key           :result-box
+    [expandable/expandable-view {:key :result-box}
-                      :custom-header (box-header/get-header :result-box)}
+     [react/view common-styles/flex
-     [result-box-container markup]
+      markup]
      [connectivity/error-view]]))

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
+    [expandable/expandable-view {:key :suggestions}
-                                 :draggable?      false
-                                 :height          (* (count commands)
-                                                     (+ style/item-height
-                                                        style/border-height))
-                                 :dynamic-height? true}
      [react/view
       [react/scroll-view {:keyboard-should-persist-taps :always
                           :bounces                      false}