[FIX #3641] Modify chat input to retain text, parameter box on blur
chat: adds messages-focused chat prop to fine tune command interactions
This commit is contained in:
parent
31728d5493
commit
5297100c53
|
@ -51,6 +51,7 @@
|
||||||
(def check-box (get-class "CheckBox"))
|
(def check-box (get-class "CheckBox"))
|
||||||
|
|
||||||
(def touchable-highlight-class (get-class "TouchableHighlight"))
|
(def touchable-highlight-class (get-class "TouchableHighlight"))
|
||||||
|
(def touchable-without-feedback-class (get-class "TouchableWithoutFeedback"))
|
||||||
(def touchable-opacity (get-class "TouchableOpacity"))
|
(def touchable-opacity (get-class "TouchableOpacity"))
|
||||||
(def activity-indicator (get-class "ActivityIndicator"))
|
(def activity-indicator (get-class "ActivityIndicator"))
|
||||||
|
|
||||||
|
@ -114,6 +115,11 @@
|
||||||
(merge {:underlay-color :transparent} props)
|
(merge {:underlay-color :transparent} props)
|
||||||
content])
|
content])
|
||||||
|
|
||||||
|
(defn touchable-without-feedback [props content]
|
||||||
|
[touchable-without-feedback-class
|
||||||
|
props
|
||||||
|
content])
|
||||||
|
|
||||||
(defn get-dimensions [name]
|
(defn get-dimensions [name]
|
||||||
(js->clj (.get dimensions name) :keywordize-keys true))
|
(js->clj (.get dimensions name) :keywordize-keys true))
|
||||||
|
|
||||||
|
|
|
@ -89,13 +89,19 @@
|
||||||
[react/with-activity-indicator
|
[react/with-activity-indicator
|
||||||
{:style style/message-view-preview
|
{:style style/message-view-preview
|
||||||
:preview [react/view style/message-view-preview]}
|
:preview [react/view style/message-view-preview]}
|
||||||
[react/animated-view {:style (style/message-view-animated opacity)}
|
[react/touchable-without-feedback
|
||||||
message-view]]))
|
{:on-press (fn [_]
|
||||||
|
(re-frame/dispatch [:set-chat-ui-props {:messages-focused? true}])
|
||||||
|
(react/dismiss-keyboard!))}
|
||||||
|
[react/animated-view {:style (style/message-view-animated opacity)}
|
||||||
|
message-view]]]))
|
||||||
|
|
||||||
(defview messages-view [group-chat]
|
(defview messages-view [group-chat]
|
||||||
(letsubs [messages [:get-current-chat-messages]
|
(letsubs [messages [:get-current-chat-messages]
|
||||||
current-public-key [:get-current-public-key]
|
chat-id [:get-current-chat-id]
|
||||||
chat-id [:get-current-chat-id]]
|
current-public-key [:get-current-public-key]]
|
||||||
|
{:component-did-mount #(re-frame/dispatch [:set-chat-ui-props {:messages-focused? true
|
||||||
|
:input-focused? false}])}
|
||||||
(if (empty? messages)
|
(if (empty? messages)
|
||||||
[react/view style/empty-chat-container
|
[react/view style/empty-chat-container
|
||||||
[react/text {:style style/empty-chat-text}
|
[react/text {:style style/empty-chat-text}
|
||||||
|
@ -111,7 +117,7 @@
|
||||||
:inverted true
|
:inverted true
|
||||||
:onEndReached #(re-frame/dispatch [:load-more-messages])
|
:onEndReached #(re-frame/dispatch [:load-more-messages])
|
||||||
:enableEmptySections true
|
:enableEmptySections true
|
||||||
:keyboardShouldPersistTaps (if platform/android? :always :handled)}])))
|
:keyboardShouldPersistTaps :handled}])))
|
||||||
|
|
||||||
(defview chat []
|
(defview chat []
|
||||||
(letsubs [{:keys [group-chat public? input-text]} [:get-current-chat]
|
(letsubs [{:keys [group-chat public? input-text]} [:get-current-chat]
|
||||||
|
|
|
@ -19,10 +19,11 @@
|
||||||
(defview expandable-view [{:keys [key]} & elements]
|
(defview expandable-view [{:keys [key]} & elements]
|
||||||
(letsubs [anim-value (animation/create-value 0)
|
(letsubs [anim-value (animation/create-value 0)
|
||||||
input-height [:get-current-chat-ui-prop :input-height]
|
input-height [:get-current-chat-ui-prop :input-height]
|
||||||
|
input-focused? [:get-current-chat-ui-prop :input-focused?]
|
||||||
|
messages-focused? [:get-current-chat-ui-prop :messages-focused?]
|
||||||
chat-input-margin [:chat-input-margin]
|
chat-input-margin [:chat-input-margin]
|
||||||
keyboard-height [:get :keyboard-height]
|
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
|
(let [input-height (or input-height (+ input-style/padding-vertical
|
||||||
input-style/min-input-height
|
input-style/min-input-height
|
||||||
input-style/padding-vertical
|
input-style/padding-vertical
|
||||||
|
@ -34,5 +35,5 @@
|
||||||
(into [react/scroll-view {:keyboard-should-persist-taps :always
|
(into [react/scroll-view {:keyboard-should-persist-taps :always
|
||||||
:on-content-size-change #(expandable-view-on-update anim-value %2)
|
:on-content-size-change #(expandable-view-on-update anim-value %2)
|
||||||
:bounces false}]
|
:bounces false}]
|
||||||
(when input-focused?
|
(when (or input-focused? (not messages-focused?))
|
||||||
elements))]])))
|
elements))]])))
|
||||||
|
|
|
@ -29,10 +29,9 @@
|
||||||
:default-value (or input-text "")
|
:default-value (or input-text "")
|
||||||
:editable true
|
:editable true
|
||||||
:blur-on-submit false
|
:blur-on-submit false
|
||||||
:on-focus #(re-frame/dispatch [:set-chat-ui-props {:input-focused? true}])
|
:on-focus #(re-frame/dispatch [:set-chat-ui-props {:input-focused? true
|
||||||
:on-blur (fn []
|
:messages-focused? false}])
|
||||||
(re-frame/dispatch [:set-chat-ui-props {:input-focused? false}])
|
:on-blur #(re-frame/dispatch [:set-chat-ui-props {:input-focused? false}])
|
||||||
(re-frame/dispatch [:set-chat-input-text ""]))
|
|
||||||
:on-submit-editing (fn [_]
|
:on-submit-editing (fn [_]
|
||||||
(if single-line-input?
|
(if single-line-input?
|
||||||
(re-frame/dispatch [:send-current-message])
|
(re-frame/dispatch [:send-current-message])
|
||||||
|
|
|
@ -339,10 +339,11 @@
|
||||||
|
|
||||||
(defn chat-message [{:keys [outgoing group-chat current-public-key content-type content] :as message}]
|
(defn chat-message [{:keys [outgoing group-chat current-public-key content-type content] :as message}]
|
||||||
[message-container message
|
[message-container message
|
||||||
[react/touchable-highlight {:on-press #(when platform/ios?
|
[react/touchable-highlight {:on-press (fn [_]
|
||||||
(react/dismiss-keyboard!))
|
(re-frame/dispatch [:set-chat-ui-props {:messages-focused? true}])
|
||||||
:on-long-press #(when (= content-type constants/text-content-type)
|
(react/dismiss-keyboard!))
|
||||||
(list-selection/share content (i18n/label :t/message)))}
|
:on-long-press #(when (= content-type constants/text-content-type)
|
||||||
|
(list-selection/share content (i18n/label :t/message)))}
|
||||||
[react/view {:accessibility-label :chat-item}
|
[react/view {:accessibility-label :chat-item}
|
||||||
(let [incoming-group (and group-chat (not outgoing))]
|
(let [incoming-group (and group-chat (not outgoing))]
|
||||||
[message-content message-body (merge message
|
[message-content message-body (merge message
|
||||||
|
|
Loading…
Reference in New Issue