status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Input fixes (#1067, #676), #1110

This commit is contained in:
alwx 2017-04-28 14:40:10 +03:00 committed by Roman Volosovskyi
parent 05886cc628
commit ddb6344dca
7 changed files with 62 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.re-natal
View File

@ -41,7 +41,8 @@
"instabug-reactnative", "instabug-reactnative",
"nfc-react-native", "nfc-react-native",
"react-native-http-bridge", "react-native-http-bridge",
"react-native-network-info" "react-native-network-info",
"react-native-autogrow-textinput"
], ],
"imageDirs": [ "imageDirs": [
"images" "images"

1
package.json
View File

@ -46,6 +46,7 @@
"react-native": "^0.43.4", "react-native": "^0.43.4",
"react-native-action-button": "^2.0.13", "react-native-action-button": "^2.0.13",
"react-native-android-sms-listener": "github:adrian-tiberius/react-native-android-sms-listener#listener-bugfix", "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-autolink": "^0.10.0",
"react-native-camera": "^0.7.0", "react-native-camera": "^0.7.0",
"react-native-circle-checkbox": "github:paramoshkinandrew/ReactNativeCircleCheckbox", "react-native-circle-checkbox": "github:paramoshkinandrew/ReactNativeCircleCheckbox",

19
src/status_im/chat/handlers.cljs
View File

@ -225,10 +225,8 @@
chats chats
(->> loaded-chats (->> loaded-chats
(map (fn [{:keys [chat-id] :as chat}] (map (fn [{:keys [chat-id] :as chat}]
(let [last-message (messages/get-last-message chat-id) (let [last-message (messages/get-last-message chat-id)]
prev-chat (get chats chat-id) [chat-id (assoc chat :last-message last-message)])))
new-chat (assoc chat :last-message last-message)]
[chat-id (merge prev-chat new-chat)])))
(into (priority-map-by compare-chats))))] (into (priority-map-by compare-chats))))]
(-> db (-> db
@ -242,12 +240,23 @@
db db
(assoc db :loaded-chats (chats/get-all)))) (assoc db :loaded-chats (chats/get-all))))
;TODO: check if its new account / signup status / create console chat
(register-handler :initialize-chats (register-handler :initialize-chats
[(after #(dispatch [:load-unviewed-messages!])) [(after #(dispatch [:load-unviewed-messages!]))
(after #(dispatch [:load-default-contacts!]))] (after #(dispatch [:load-default-contacts!]))]
((enrich initialize-chats) load-chats!)) ((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 (defmethod nav/preload-data! :chat
[{:keys [current-chat-id] :as db} [_ _ id]] [{:keys [current-chat-id] :as db} [_ _ id]]
(let [chat-id (or id current-chat-id) (let [chat-id (or id current-chat-id)

11
src/status_im/chat/styles/input/input.cljs
View File

@ -13,8 +13,8 @@
(def max-input-height 66) (def max-input-height 66)
(def min-input-height 38) (def min-input-height 38)
(def input-spacing-top 5) (def input-spacing-top 3)
(def input-spacing-bottom 8) (def input-spacing-bottom 5)
(defnstyle root [margin-bottom] (defnstyle root [margin-bottom]
{:flex-direction :column {:flex-direction :column
@ -50,12 +50,17 @@
:android {:border-radius 4} :android {:border-radius 4}
:ios {:border-radius 8}}) :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] (defnstyle input-view [content-height]
{:flex 1 {:flex 1
:font-size 14 :font-size 14
:padding-top input-spacing-top :padding-top input-spacing-top
:padding-bottom input-spacing-bottom :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 (def invisible-input-text
{:font-size 14 {:font-size 14

47
src/status_im/chat/views/input/input.cljs
View File

@ -6,6 +6,7 @@
[taoensso.timbre :as log] [taoensso.timbre :as log]
[status-im.accessibility-ids :as id] [status-im.accessibility-ids :as id]
[status-im.components.react :refer [view [status-im.components.react :refer [view
autogrow-text-input
animated-view animated-view
text text
scroll-view scroll-view
@ -64,26 +65,27 @@
command (subscribe [:selected-chat-command]) command (subscribe [:selected-chat-command])
sending-in-progress? (subscribe [:chat-ui-props :sending-in-progress?]) sending-in-progress? (subscribe [:chat-ui-props :sending-in-progress?])
input-focused? (subscribe [:chat-ui-props :input-focused?])] 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 [text-input
{:ref #(when % {:ref #(when %
(dispatch [:set-chat-ui-props {:input-ref %}])) (dispatch [:set-chat-ui-props {:input-ref %}]))
:accessibility-label id/chat-message-input :accessibility-label id/chat-message-input
:multiline true :multiline true
:default-value (or @input-text "") :default-value (or @input-text "")
:editable (not @sending-in-progress?) :editable true
:on-blur #(do (dispatch [:set-chat-ui-props {:input-focused? false}]) :blur-on-submit false
(set-layout-height 0)) :on-focus #(dispatch [:set-chat-ui-props {:input-focused? true
:on-content-size-change (when-not @input-focused? :show-emoji? false}])
#(let [h (-> (.-nativeEvent %) :on-blur #(do (dispatch [:set-chat-ui-props {:input-focused? false}]))
(.-contentSize) :on-layout (fn [e]
(.-height))] (set-container-width (.-width (.-layout (.-nativeEvent e)))))
(set-layout-height h))) :on-change (fn [e]
:on-change #(let [h (-> (.-nativeEvent %) (let [native-event (.-nativeEvent e)
(.-contentSize) height (.. native-event -contentSize -height)
(.-height))] text (.-text native-event)]
(set-layout-height h)) (set-layout-height height)
:on-change-text #(do (dispatch [:set-chat-input-text %]) (when (not= text @input-text)
(dispatch [:set-chat-input-text text])
(if @command (if @command
(do (do
(dispatch [:load-chat-parameter-box (:command @command)]) (dispatch [:load-chat-parameter-box (:command @command)])
@ -91,14 +93,17 @@
(do (do
(dispatch [:set-chat-input-metadata nil]) (dispatch [:set-chat-input-metadata nil])
(dispatch [:set-chat-ui-props {:result-box nil (dispatch [:set-chat-ui-props {:result-box nil
:validation-messages nil}])))) :validation-messages nil}]))))))
:on-content-size-change (when-not input-focused?
#(let [h (-> (.-nativeEvent %)
(.-contentSize)
(.-height))]
(set-layout-height h)))
:on-selection-change #(let [s (-> (.-nativeEvent %) :on-selection-change #(let [s (-> (.-nativeEvent %)
(.-selection))] (.-selection))]
(when (and (= (.-end s) (+ 2 (count (get-in @command [:command :name])))) (when (and (= (.-end s) (+ 2 (count (get-in @command [:command :name]))))
(get-in @command [:command :sequential-params])) (get-in @command [:command :sequential-params]))
(dispatch [:chat-input-focus :seq-input-ref]))) (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) :style (style/input-view height)
:placeholder-text-color style/color-input-helper-placeholder :placeholder-text-color style/color-input-helper-placeholder
:auto-capitalize :sentences}]))) :auto-capitalize :sentences}])))
@ -168,16 +173,18 @@
(let [component (r/current-component) (let [component (r/current-component)
set-layout-width #(r/set-state component {:width %}) set-layout-width #(r/set-state component {:width %})
set-layout-height #(r/set-state component {:height %}) set-layout-height #(r/set-state component {:height %})
set-container-width #(r/set-state component {:container-width %})
command (subscribe [:selected-chat-command])] command (subscribe [:selected-chat-command])]
(r/create-class (r/create-class
{:reagent-render {:reagent-render
(fn [{:keys [anim-margin]}] (fn [{:keys [anim-margin]}]
(let [{:keys [width height]} (r/state component) (let [{:keys [width height container-width]} (r/state component)
command @command] command @command]
[animated-view {:style (style/input-root height anim-margin)} [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}] [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 [input-helper {:command command
:width width}] :width width}]
[seq-input {:command-width width}] [seq-input {:command-width width}]

6
src/status_im/components/react.cljs
View File

@ -127,6 +127,12 @@
(def swiper (adapt-class (js/require "react-native-swiper"))) (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 ;; Clipboard
(def sharing (def sharing

4
src/status_im/data_store/chats.cljs
View File

@ -43,9 +43,7 @@
(defn add-contacts (defn add-contacts
[chat-id identities] [chat-id identities]
(data-store/add-contacts chat-id identities) (data-store/add-contacts chat-id identities)
; TODO: move this somewhere else (dispatch [:reload-chats]))
; TODO: temp. Update chat in db atom
(dispatch [:initialize-chats]))
(defn remove-contacts (defn remove-contacts
[chat-id identities] [chat-id identities]