Skip to content

Commit 2864b6b

Browse files
alwxjeluard
alwx
authored and
jeluard
committed
Fixes for chat input; animations leftovers removed
Signed-off-by: Julien Eluard <julien.eluard@gmail.com>
1 parent 4145a31 commit 2864b6b

9 files changed

Lines changed: 46 additions & 133 deletions

File tree

‎src/status_im/chat/screen.cljs‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -112,14 +112,20 @@
112112
(letsubs [{:keys [group-chat public? input-text]} [:get-current-chat]
113113
show-bottom-info? [:get-current-chat-ui-prop :show-bottom-info?]
114114
current-view [:get :view-id]]
115-
[react/view {:style style/chat-view
116-
:on-layout (fn [e]
117-
(re-frame/dispatch [:set :layout-height (-> e .-nativeEvent .-layout .-height)]))}
118-
[chat-toolbar public?]
119-
(when (= :chat current-view)
120-
[messages-view-animation
121-
[messages-view group-chat]])
122-
[input/container {:text-empty? (string/blank? input-text)}]
123-
(when show-bottom-info?
124-
[bottom-info/bottom-info-view])
125-
[connectivity/error-view {:top (get platform/platform-specific :status-bar-default-height)}]]))
115+
;; this scroll-view is a hack that allows us to use on-blur and on-focus on Android
116+
;; more details here: https://github.com/facebook/react-native/issues/11071
117+
[react/scroll-view {:scroll-enabled false
118+
:style style/scroll-root
119+
:content-container-style style/scroll-root
120+
:keyboard-should-persist-taps :handled}
121+
[react/view {:style style/chat-view
122+
:on-layout (fn [e]
123+
(re-frame/dispatch [:set :layout-height (-> e .-nativeEvent .-layout .-height)]))}
124+
[chat-toolbar public?]
125+
(when (= :chat current-view)
126+
[messages-view-animation
127+
[messages-view group-chat]])
128+
[input/container {:text-empty? (string/blank? input-text)}]
129+
(when show-bottom-info?
130+
[bottom-info/bottom-info-view])
131+
[connectivity/error-view {:top (get platform/platform-specific :status-bar-default-height)}]]]))

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

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎src/status_im/chat/styles/screen.cljs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
(:require [status-im.ui.components.styles :as component.styles]
44
[status-im.ui.components.colors :as colors]))
55

6+
7+
(def scroll-root
8+
{:flex 1})
9+
610
(def chat-view
711
{:flex 1
812
:background-color component.styles/chat-background})

‎src/status_im/chat/views/input/animations/expandable.cljs‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,13 @@
1616
:friction 10
1717
:tension 60}))))
1818

19-
(defview expandable-view [{:keys [key custom-header]} & elements]
19+
(defview expandable-view [{:keys [key]} & elements]
2020
(letsubs [anim-value (animation/create-value 0)
2121
input-height [:get-current-chat-ui-prop :input-height]
2222
chat-input-margin [:chat-input-margin]
2323
keyboard-height [:get :keyboard-height]
24-
chat-layout-height [:get :layout-height]]
24+
chat-layout-height [:get :layout-height]
25+
input-focused? [:get-current-chat-ui-prop :input-focused?]]
2526
(let [input-height (or input-height (+ input-style/padding-vertical
2627
input-style/min-input-height
2728
input-style/padding-vertical
@@ -33,4 +34,5 @@
3334
(into [react/scroll-view {:keyboard-should-persist-taps :always
3435
:on-content-size-change #(expandable-view-on-update anim-value %2)
3536
:bounces false}]
36-
elements)]])))
37+
(when input-focused?
38+
elements))]])))

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

Lines changed: 0 additions & 39 deletions
This file was deleted.

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,9 @@
3131
:editable true
3232
:blur-on-submit false
3333
:on-focus #(re-frame/dispatch [:set-chat-ui-props {:input-focused? true}])
34-
:on-blur #(re-frame/dispatch [:set-chat-ui-props {:input-focused? false}])
34+
:on-blur (fn []
35+
(re-frame/dispatch [:set-chat-ui-props {:input-focused? false}])
36+
(re-frame/dispatch [:set-chat-input-text ""]))
3537
:on-submit-editing (fn [_]
3638
(if single-line-input?
3739
(re-frame/dispatch [:send-current-message])
@@ -41,7 +43,7 @@
4143
(set-container-width-fn (.-width (.-layout (.-nativeEvent e)))))
4244
:on-change (fn [e]
4345
(let [native-event (.-nativeEvent e)
44-
text (.-text native-event)
46+
text (.-text native-event)
4547
content-size (.. native-event -contentSize)]
4648
(when (and (not single-line-input?)
4749
content-size)
@@ -58,8 +60,8 @@
5860
h (.-height s)]
5961
(set-container-width-fn w)
6062
(set-layout-height-fn h)))
61-
:on-selection-change #(let [s (-> (.-nativeEvent %)
62-
(.-selection))
63+
:on-selection-change #(let [s (-> (.-nativeEvent %)
64+
(.-selection))
6365
end (.-end s)]
6466
(re-frame/dispatch [:update-text-selection end]))
6567
:style (style/input-view height single-line-input?)
@@ -157,7 +159,7 @@
157159
(defn commands-button []
158160
[react/touchable-highlight
159161
{:on-press #(do (re-frame/dispatch [:set-chat-input-text constants/command-char])
160-
(react/dismiss-keyboard!))}
162+
(re-frame/dispatch [:chat-input-focus :input-ref]))}
161163
[react/view
162164
[vi/icon :icons/input-commands {:container-style style/input-commands-icon
163165
:color :dark}]]])

‎src/status_im/chat/views/input/parameter_box.cljs‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
(ns status-im.chat.views.input.parameter-box
22
(:require-macros [status-im.utils.views :refer [defview letsubs]])
3-
(:require [re-frame.core :refer [subscribe dispatch]]
4-
[status-im.chat.views.input.animations.expandable :as expandable]
5-
[status-im.chat.views.input.box-header :as box-header]
3+
(:require [status-im.chat.views.input.animations.expandable :as expandable]
64
[status-im.chat.styles.input.parameter-box :as style]
75
[status-im.commands.utils :as command-utils]
86
[status-im.ui.components.react :as react]
@@ -16,12 +14,7 @@
1614
(command-utils/generate-hiccup markup (first bot-id-bot-db) (second bot-id-bot-db))]))
1715

1816
(defview parameter-box-view []
19-
(letsubs [show-parameter-box? [:show-parameter-box?]
20-
parameter-box [:chat-parameter-box]]
21-
(let [{:keys [title]} parameter-box]
22-
(when show-parameter-box?
23-
[expandable/expandable-view
24-
{:key :parameter-box
25-
:custom-header (when title
26-
(box-header/get-header :parameter-box))}
27-
[parameter-box-container]]))))
17+
(letsubs [show-parameter-box? [:show-parameter-box?]]
18+
(when show-parameter-box?
19+
[expandable/expandable-view {:key :parameter-box}
20+
[parameter-box-container]])))

‎src/status_im/chat/views/input/result_box.cljs‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,14 @@
11
(ns status-im.chat.views.input.result-box
22
(:require-macros [status-im.utils.views :refer [defview]])
3-
(:require [re-frame.core :refer [subscribe dispatch]]
4-
[status-im.ui.components.react :refer [view
5-
scroll-view
6-
touchable-highlight
7-
text
8-
icon]]
9-
[status-im.chat.views.input.animations.expandable :refer [expandable-view]]
10-
[status-im.chat.views.input.box-header :as box-header]
11-
[status-im.ui.components.connectivity.view :as connectivity]))
12-
13-
(defview result-box-container [markup]
14-
[view {:flex 1}
15-
markup])
3+
(:require [status-im.ui.components.react :as react]
4+
[status-im.chat.views.input.animations.expandable :as expandable]
5+
[status-im.ui.components.connectivity.view :as connectivity]
6+
[status-im.ui.components.styles :as common-styles]))
167

178
(defview result-box-view []
189
[markup [:result-box-markup]]
1910
(when markup
20-
[expandable-view {:key :result-box
21-
:custom-header (box-header/get-header :result-box)}
22-
[result-box-container markup]
11+
[expandable/expandable-view {:key :result-box}
12+
[react/view common-styles/flex
13+
markup]
2314
[connectivity/error-view]]))

‎src/status_im/chat/views/input/suggestions.cljs‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,7 @@
1919

2020
(defview suggestions-view []
2121
(letsubs [commands [:get-available-commands]]
22-
[expandable/expandable-view {:key :suggestions
23-
:draggable? false
24-
:height (* (count commands)
25-
(+ style/item-height
26-
style/border-height))
27-
:dynamic-height? true}
22+
[expandable/expandable-view {:key :suggestions}
2823
[react/view
2924
[react/scroll-view {:keyboard-should-persist-taps :always
3025
:bounces false}

0 commit comments

Comments
 (0)