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

Message input refactoring 

Former-commit-id: 89051ce50b
This commit is contained in:
virvar 2016-06-06 18:47:11 +03:00
parent d65584bd3b
commit 7aa209d9f3
11 changed files with 297 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im/chat/handlers/animation.cljs
View File

@ -3,7 +3,7 @@
[re-frame.middleware :refer [path]] [re-frame.middleware :refer [path]]
[status-im.models.commands :as commands] [status-im.models.commands :as commands]
[status-im.handlers.content-suggestions :refer [get-content-suggestions]] [status-im.handlers.content-suggestions :refer [get-content-suggestions]]
[status-im.chat.styles.plain-input :refer [input-height]] [status-im.chat.styles.message-input :refer [input-height]]
[status-im.chat.styles.response :refer [request-info-height response-height-normal]] [status-im.chat.styles.response :refer [request-info-height response-height-normal]]
[status-im.chat.styles.response-suggestions :as response-suggestions-styles] [status-im.chat.styles.response-suggestions :as response-suggestions-styles]
[status-im.constants :refer [response-input-hiding-duration]])) [status-im.constants :refer [response-input-hiding-duration]]))

32
src/status_im/chat/styles/message_input.cljs Normal file
View File

@ -0,0 +1,32 @@
(ns status-im.chat.styles.message-input
(:require [status-im.components.styles :refer [color-white
color-blue]]))
(def input-height 56)
(defn message-input-container [offset]
{:flex 1
:transform [{:translateX offset}]
:marginRight offset})
(def input-container
{:flexDirection :column})
(def input-view
{:flexDirection :row
:height input-height
:backgroundColor color-white})
(def send-icon
{:marginTop 10.5
:marginLeft 12
:width 15
:height 15})
(def send-container
{:marginTop 10
:marginRight 10
:width 36
:height 36
:borderRadius 50
:backgroundColor color-blue})

63
src/status_im/chat/styles/plain_input.cljs
View File

@ -1,63 +0,0 @@
(ns status-im.chat.styles.plain-input
(:require [status-im.components.styles :refer [font
text2-color
color-white
color-blue]]))
(def input-height 56)
(def input-container
{:flexDirection :column})
(def input-view
{:flexDirection :row
:height input-height
:backgroundColor color-white})
(def message-input-button-touchable
{:width 56
:height 56
:alignItems :center
:justifyContent :center})
(defn message-input-button [scale]
{:transform [{:scale scale}]})
(defn message-input-container [offset]
{:flex 1
:transform [{:translateX offset}]
:marginRight offset})
(def list-icon
{:width 13
:height 12})
(def close-icon
{:width 12
:height 12})
(def message-input
{:flex 1
:marginTop -2
:padding 0
:fontSize 14
:fontFamily font
:color text2-color})
(def smile-icon
{:width 20
:height 20})
(def send-icon
{:marginTop 10.5
:marginLeft 12
:width 15
:height 15})
(def send-container
{:marginTop 10
:marginRight 10
:width 36
:height 36
:borderRadius 50
:backgroundColor color-blue})

32
src/status_im/chat/styles/plain_message.cljs Normal file
View File

@ -0,0 +1,32 @@
(ns status-im.chat.styles.plain-message
(:require [status-im.components.styles :refer [font
text2-color]]))
(def message-input-button-touchable
{:width 56
:height 56
:alignItems :center
:justifyContent :center})
(defn message-input-button [scale]
{:transform [{:scale scale}]})
(def list-icon
{:width 13
:height 12})
(def close-icon
{:width 12
:height 12})
(def message-input
{:flex 1
:marginTop -2
:padding 0
:fontSize 14
:fontFamily font
:color text2-color})
(def smile-icon
{:width 20
:height 20})

2
src/status_im/chat/styles/response.cljs
View File

@ -6,7 +6,7 @@
text2-color text2-color
chat-background chat-background
color-black]] color-black]]
[status-im.chat.styles.plain-input :refer [input-height]])) [status-im.chat.styles.message-input :refer [input-height]]))
(def response-height-normal 211) (def response-height-normal 211)
(def request-info-height 61) (def request-info-height 61)

8
src/status_im/chat/views/command.cljs
View File

@ -1,4 +1,5 @@
(ns status-im.chat.views.command (ns status-im.chat.views.command
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]] (:require [re-frame.core :refer [subscribe dispatch]]
[status-im.components.react :refer [view [status-im.components.react :refer [view
icon icon
@ -29,3 +30,10 @@
(defn command-icon [command] (defn command-icon [command]
[view (st/command-text-container command) [view (st/command-text-container command)
[text {:style st/command-text} (:text command)]]) [text {:style st/command-text} (:text command)]])
(defview cancel-button []
[commands-input-is-switching? [:get-in [:animations :commands-input-is-switching?]]]
[touchable-highlight {:disabled commands-input-is-switching?
:on-press cancel-command-input}
[view st/cancel-container
[icon :close-gray st/cancel-icon]]])

127
src/status_im/chat/views/message_input.cljs Normal file
View File

@ -0,0 +1,127 @@
(ns status-im.chat.views.message-input
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]]
[reagent.core :as r]
[status-im.components.react :refer [view
animated-view
icon
touchable-highlight
text-input
dismiss-keyboard!]]
[status-im.components.animation :as anim]
[status-im.chat.views.plain-message :as plain-message]
[status-im.chat.views.command :as command]
[status-im.chat.views.response :as response]
[status-im.chat.styles.message-input :as st]
[status-im.chat.styles.plain-message :as st-message]
[status-im.chat.styles.input :as st-command]
[status-im.chat.styles.response :as st-response]
[status-im.constants :refer [response-input-hiding-duration]]))
(defview send-button [{:keys [on-press accessibility-label]}]
[commands-input-is-switching? [:get-in [:animations :commands-input-is-switching?]]]
[touchable-highlight {:disabled commands-input-is-switching?
:on-press on-press
:accessibility-label accessibility-label}
[view st/send-container
[icon :send st/send-icon]]])
(defn message-input-container-animation-logic [{:keys [to-value val]}]
(fn [_]
(let [to-value @to-value]
(anim/start (anim/timing val {:toValue to-value
:duration response-input-hiding-duration})
(fn [arg]
(when (.-finished arg)
(dispatch [:set-in [:animations ::message-input-offset-current] to-value])))))))
(defn message-input-container [input]
(let [to-message-input-offset (subscribe [:get-in [:animations :message-input-offset]])
cur-message-input-offset (subscribe [:get-in [:animations ::message-input-offset-current]])
message-input-offset (anim/create-value (or @cur-message-input-offset 0))
context {:to-value to-message-input-offset
:val message-input-offset}
on-update (message-input-container-animation-logic context)]
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
:reagent-render
(fn [input]
@to-message-input-offset
[animated-view {:style (st/message-input-container message-input-offset)}
input])})))
(defview message-input []
[input-message [:get-chat-input-text]
command [:get-chat-command]
to-msg-id [:get-chat-command-to-msg-id]
input-command [:get-chat-command-content]
staged-commands [:get-chat-staged-commands]
typing-command? [:typing-command?]
commands-input-is-switching? [:get-in [:animations :commands-input-is-switching?]]]
(let [dismiss-keyboard (not (or command typing-command?))
response? (and command to-msg-id)
message-input? (or (not command) commands-input-is-switching?)
animation? commands-input-is-switching?]
[text-input (merge {:style (cond
message-input? st-message/message-input
response? st-response/command-input
command st-command/command-input)
:ref (fn [input]
(dispatch [:set-message-input input]))
:autoFocus false
:blurOnSubmit dismiss-keyboard
:onChangeText (fn [text]
(when-not animation?
((if message-input?
plain-message/set-input-message
command/set-input-message)
text)))
:onSubmitEditing #(when-not animation?
(if message-input?
(plain-message/try-send staged-commands
input-message
dismiss-keyboard)
(command/try-send input-command validator)))}
(when command
{:accessibility-label :command-input})
input-options)
(if message-input?
input-message
input-command)]))
(defview plain-message-input-view [{:keys [input-options validator]}]
[input-message [:get-chat-input-text]
command [:get-chat-command]
to-msg-id [:get-chat-command-to-msg-id]
input-command [:get-chat-command-content]
staged-commands [:get-chat-staged-commands]
typing-command? [:typing-command?]
commands-input-is-switching? [:get-in [:animations :commands-input-is-switching?]]]
(let [dismiss-keyboard (not (or command typing-command?))
response? (and command to-msg-id)
message-input? (or (not command) commands-input-is-switching?)]
[view st/input-container
[view st/input-view
(if message-input?
[plain-message/commands-button]
(when (and command (not response?))
[command/command-icon command response?]))
[message-input-container
[message-input]]
;; TODO emoticons: not implemented
(when message-input?
[plain-message/smile-button])
(if message-input?
(when (plain-message/message-valid? staged-commands input-message)
[send-button {:on-press #(plain-message/try-send staged-commands
input-message
dismiss-keyboard)
:accessibility-label :send-message}])
(if (command/valid? input-command validator)
[send-button {:on-press command/send-command
:accessibility-label :stage-command}]
(when-not response?
[command/cancel-button])))]]))

2
src/status_im/chat/views/new_message.cljs
View File

@ -3,7 +3,7 @@
(:require (:require
[re-frame.core :refer [subscribe]] [re-frame.core :refer [subscribe]]
[status-im.components.react :refer [view]] [status-im.components.react :refer [view]]
[status-im.chat.views.plain-input :refer [plain-message-input-view]] [status-im.chat.views.message-input :refer [plain-message-input-view]]
[status-im.chat.views.staged-command :refer [simple-command-staged-view]] [status-im.chat.views.staged-command :refer [simple-command-staged-view]]
[status-im.utils.phone-number :refer [valid-mobile-number?]] [status-im.utils.phone-number :refer [valid-mobile-number?]]
[status-im.chat.styles.message :as st])) [status-im.chat.styles.message :as st]))

192
src/status_im/chat/views/plain_input.cljs
View File

@ -1,192 +0,0 @@
(ns status-im.chat.views.plain-input
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]]
[reagent.core :as r]
[status-im.components.react :refer [view
animated-view
icon
touchable-highlight
text-input
dismiss-keyboard!]]
[status-im.components.animation :as anim]
[status-im.chat.views.command :as command]
[status-im.chat.views.response :as response]
[status-im.chat.styles.plain-input :as st]
[status-im.chat.styles.input :as st-command]
[status-im.chat.styles.response :as st-response]
[status-im.constants :refer [response-input-hiding-duration]]))
(defn set-input-message [message]
(dispatch [:set-chat-input-text message]))
(defn send [dismiss-keyboard]
(when dismiss-keyboard
(dismiss-keyboard!))
(dispatch [:send-chat-msg]))
(defn message-valid? [staged-commands message]
(or (and (pos? (count message))
(not= "!" message))
(pos? (count staged-commands))))
(defn try-send [staged-commands message dismiss-keyboard]
(when (message-valid? staged-commands message)
(send dismiss-keyboard)))
(defn commands-button-animation-logic [{:keys [to-value val]}]
(fn [_]
(let [to-scale @to-value
minimum 0.1
scale (cond (< 1 to-scale) 1
(< to-scale minimum) minimum
:else to-scale)]
(anim/start (anim/timing val {:toValue scale
:duration response-input-hiding-duration})
(fn [arg]
(when (.-finished arg)
(dispatch [:set-in [:animations ::message-input-buttons-scale-current] scale])
(when (= to-scale minimum)
(dispatch [:finish-show-response]))))))))
(defn commands-button [animation?]
(let [typing-command? (subscribe [:typing-command?])
to-scale (subscribe [:get-in [:animations :message-input-buttons-scale]])
cur-scale (subscribe [:get-in [:animations ::message-input-buttons-scale-current]])
buttons-scale (anim/create-value (or @cur-scale 1))
context {:to-value to-scale
:val buttons-scale}
on-update (commands-button-animation-logic context)]
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
:reagent-render
(fn [animation?]
(let [typing-command? @typing-command?]
@to-scale
[touchable-highlight {:disabled animation?
:on-press #(dispatch [:switch-command-suggestions])
:style st/message-input-button-touchable}
[animated-view {:style (st/message-input-button buttons-scale)}
(if typing-command?
[icon :close-gray st/close-icon]
[icon :list st/list-icon])]]))})))
(defn smile-button [animation?]
(let [to-scale (subscribe [:get-in [:animations :message-input-buttons-scale]])
cur-scale (subscribe [:get-in [:animations ::message-input-buttons-scale-current]])
buttons-scale (anim/create-value (or @cur-scale 1))
context {:to-value to-scale
:val buttons-scale}
on-update (commands-button-animation-logic context)]
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
:reagent-render
(fn [animation?]
@to-scale
[touchable-highlight {:disabled animation?
:on-press (fn []
;; TODO emoticons: not implemented
)
:style st/message-input-button-touchable}
[animated-view {:style (st/message-input-button buttons-scale)}
[icon :smile st/smile-icon]]])})))
(defn message-input-container-animation-logic [{:keys [to-value val]}]
(fn [_]
(let [to-value @to-value]
(anim/start (anim/timing val {:toValue to-value
:duration response-input-hiding-duration})
(fn [arg]
(when (.-finished arg)
(dispatch [:set-in [:animations ::message-input-offset-current] to-value])))))))
(defn message-input-container [input]
(let [to-message-input-offset (subscribe [:get-in [:animations :message-input-offset]])
cur-message-input-offset (subscribe [:get-in [:animations ::message-input-offset-current]])
message-input-offset (anim/create-value (or @cur-message-input-offset 0))
context {:to-value to-message-input-offset
:val message-input-offset}
on-update (message-input-container-animation-logic context)]
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
:reagent-render
(fn [input]
@to-message-input-offset
[animated-view {:style (st/message-input-container message-input-offset)}
input])})))
(defview plain-message-input-view [{:keys [input-options validator]}]
[input-message [:get-chat-input-text]
command [:get-chat-command]
to-msg-id [:get-chat-command-to-msg-id]
input-command [:get-chat-command-content]
staged-commands [:get-chat-staged-commands]
typing-command? [:typing-command?]
commands-button-is-switching? [:get-in [:animations :commands-input-is-switching?]]]
(let [dismiss-keyboard (not (or command typing-command?))
response? (and command to-msg-id)
message-input? (or (not command) commands-button-is-switching?)
animation? commands-button-is-switching?]
[view st/input-container
[view st/input-view
(if message-input?
[commands-button animation?]
(when (and command (not response?))
[command/command-icon command response?]))
[message-input-container
[text-input (merge {:style (cond
message-input? st/message-input
response? st-response/command-input
command st-command/command-input)
:ref (fn [input]
(dispatch [:set-message-input input]))
:autoFocus false
:blurOnSubmit dismiss-keyboard
:onChangeText (fn [text]
(when-not animation?
((if message-input?
set-input-message
command/set-input-message)
text)))
:onSubmitEditing #(when-not animation?
(if message-input?
(try-send staged-commands
input-message
dismiss-keyboard)
(command/try-send input-command validator)))}
(when command
{:accessibility-label :command-input})
input-options)
(if message-input?
input-message
input-command)]]
;; TODO emoticons: not implemented
(when message-input?
[smile-button animation?])
(if message-input?
(when (message-valid? staged-commands input-message)
[touchable-highlight {:disabled animation?
:on-press #(try-send staged-commands
input-message
dismiss-keyboard)
:accessibility-label :send-message}
[view st/send-container
[icon :send st/send-icon]]])
(if (command/valid? input-command validator)
[touchable-highlight {:disabled animation?
:on-press command/send-command
:accessibility-label :stage-command}
[view st/send-container [icon :send st/send-icon]]]
(when-not response?
[touchable-highlight {:disabled animation?
:on-press command/cancel-command-input}
[view st-command/cancel-container
[icon :close-gray st-command/cancel-icon]]])))]]))

94
src/status_im/chat/views/plain_message.cljs Normal file
View File

@ -0,0 +1,94 @@
(ns status-im.chat.views.plain-message
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]]
[reagent.core :as r]
[status-im.components.react :refer [view
animated-view
icon
touchable-highlight
dismiss-keyboard!]]
[status-im.components.animation :as anim]
[status-im.chat.styles.plain-message :as st]
[status-im.constants :refer [response-input-hiding-duration]]))
(defn set-input-message [message]
(dispatch [:set-chat-input-text message]))
(defn send [dismiss-keyboard]
(when dismiss-keyboard
(dismiss-keyboard!))
(dispatch [:send-chat-msg]))
(defn message-valid? [staged-commands message]
(or (and (pos? (count message))
(not= "!" message))
(pos? (count staged-commands))))
(defn try-send [staged-commands message dismiss-keyboard]
(when (message-valid? staged-commands message)
(send dismiss-keyboard)))
(defn commands-button-animation-logic [{:keys [to-value val]}]
(fn [_]
(let [to-scale @to-value
minimum 0.1
scale (cond (< 1 to-scale) 1
(< to-scale minimum) minimum
:else to-scale)]
(anim/start (anim/timing val {:toValue scale
:duration response-input-hiding-duration})
(fn [arg]
(when (.-finished arg)
(dispatch [:set-in [:animations ::message-input-buttons-scale-current] scale])
(when (= to-scale minimum)
(dispatch [:finish-show-response]))))))))
(defn commands-button []
(let [typing-command? (subscribe [:typing-command?])
animation? (subscribe [:get-in [:animations :commands-input-is-switching?]])
to-scale (subscribe [:get-in [:animations :message-input-buttons-scale]])
cur-scale (subscribe [:get-in [:animations ::message-input-buttons-scale-current]])
buttons-scale (anim/create-value (or @cur-scale 1))
context {:to-value to-scale
:val buttons-scale}
on-update (commands-button-animation-logic context)]
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
:reagent-render
(fn []
(let [typing-command? @typing-command?]
@to-scale
[touchable-highlight {:disabled @animation?
:on-press #(dispatch [:switch-command-suggestions])
:style st/message-input-button-touchable}
[animated-view {:style (st/message-input-button buttons-scale)}
(if typing-command?
[icon :close-gray st/close-icon]
[icon :list st/list-icon])]]))})))
(defn smile-button []
(let [animation? (subscribe [:get-in [:animations :commands-input-is-switching?]])
to-scale (subscribe [:get-in [:animations :message-input-buttons-scale]])
cur-scale (subscribe [:get-in [:animations ::message-input-buttons-scale-current]])
buttons-scale (anim/create-value (or @cur-scale 1))
context {:to-value to-scale
:val buttons-scale}
on-update (commands-button-animation-logic context)]
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
:reagent-render
(fn []
@to-scale
[touchable-highlight {:disabled @animation?
:on-press (fn []
;; TODO emoticons: not implemented
)
:style st/message-input-button-touchable}
[animated-view {:style (st/message-input-button buttons-scale)}
[icon :smile st/smile-icon]]])})))

2
src/status_im/chat/views/response.cljs
View File

@ -13,7 +13,7 @@
[status-im.components.drag-drop :as drag] [status-im.components.drag-drop :as drag]
[status-im.chat.views.response-suggestions :refer [response-suggestions-view]] [status-im.chat.views.response-suggestions :refer [response-suggestions-view]]
[status-im.chat.styles.response :as st] [status-im.chat.styles.response :as st]
[status-im.chat.styles.plain-input :refer [input-height]] [status-im.chat.styles.message-input :refer [input-height]]
[status-im.components.animation :as anim])) [status-im.components.animation :as anim]))
(defn drag-icon [] (defn drag-icon []