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

Animation refactoring 

Former-commit-id: 4413d8dc3b
This commit is contained in:
virvar 2016-06-10 11:18:10 +03:00
parent 997cc2f635
commit 9ec0d03d90
10 changed files with 74 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,12 +10,16 @@
(def zero-height input-height)
(register-handler :finish-animate-cancel-command
(fn [db _]
(assoc-in db [:animations :commands-input-is-switching?] false)))
(defn animation-handler
([name handler] (animation-handler name nil handler))
([name middleware handler]
(register-handler name [(path :animations) middleware] handler)))
(register-handler :animate-cancel-command
(path :animations)
(animation-handler :finish-animate-cancel-command
(fn [db _]
(assoc db :commands-input-is-switching? false)))
(animation-handler :animate-cancel-command
(fn [db _]
(if-not (:commands-input-is-switching? db)
(assoc db
@ -26,20 +30,19 @@
:messages-offset 0)
db)))
(register-handler :finish-animate-response-resize
(animation-handler :finish-animate-response-resize
(fn [db _]
(let [fixed (get-in db [:animations :to-response-height])]
(-> db
(assoc-in [:animations :response-height-current] fixed)
(assoc-in [:animations :response-resize?] false)))))
(let [fixed (:to-response-height db)]
(assoc db :response-height-current fixed
:response-resize? false))))
(register-handler :set-response-height
(animation-handler :set-response-height
(fn [db [_ value]]
(assoc-in db [:animations :response-height-current] value)))
(assoc db :response-height-current value)))
(register-handler :animate-response-resize
(animation-handler :animate-response-resize
(fn [db _]
(assoc-in db [:animations :response-resize?] true)))
(assoc db :response-resize? true)))
(defn get-response-height [db]
(let [command (commands/get-chat-command db)
@ -55,9 +58,9 @@
(defn update-response-height [db]
(assoc-in db [:animations :to-response-height] (get-response-height db)))
(register-handler :finish-show-response
(animation-handler :finish-show-response
(fn [db _]
(assoc-in db [:animations :commands-input-is-switching?] false)))
(assoc db :commands-input-is-switching? false)))
(register-handler :animate-show-response
(after #(dispatch [:animate-response-resize]))
@ -70,24 +73,22 @@
(assoc-in [:animations :messages-offset] request-info-height)
(update-response-height))))
(register-handler :set-response-max-height
(animation-handler :set-response-max-height
(fn [db [_ height]]
(let [prev-height (get-in db [:animations :response-height-max])]
(let [prev-height (:response-height-max db)]
(if (not= height prev-height)
(let [db (assoc-in db [:animations :response-height-max] height)]
(if (= prev-height (get-in db [:animations :to-response-height]))
(-> db
(assoc-in [:animations :to-response-height] height)
(assoc-in [:animations :response-height-current] height))
(let [db (assoc db :response-height-max height)]
(if (= prev-height (:to-response-height db))
(assoc db :to-response-height height
:response-height-current height)
db))
db))))
(register-handler :on-drag-response
(animation-handler :on-drag-response
(fn [db [_ dy]]
(let [fixed (get-in db [:animations :to-response-height])]
(-> db
(assoc-in [:animations :response-height-current] (- fixed dy))
(assoc-in [:animations :response-resize?] false)))))
(let [fixed (:to-response-height db)]
(assoc db :response-height-current (- fixed dy)
:response-resize? false))))
(register-handler :fix-response-height
(fn [db _]

6
src/status_im/chat/screen.cljs
View File

@ -235,11 +235,11 @@
(anim/start (anim/spring val {:toValue to-value})
(fn [arg]
(when (.-finished arg)
(dispatch [:set-in [:animations ::messages-offset-current] to-value])))))))
(dispatch [:set-animation ::messages-offset-current to-value])))))))
(defn messages-container [messages]
(let [to-messages-offset (subscribe [:get-in [:animations :messages-offset]])
cur-messages-offset (subscribe [:get-in [:animations ::messages-offset-current]])
(let [to-messages-offset (subscribe [:animations :messages-offset])
cur-messages-offset (subscribe [:animations ::messages-offset-current])
messages-offset (anim/create-value (or @cur-messages-offset 0))
context {:to-value to-messages-offset
:val messages-offset}

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

@ -32,7 +32,7 @@
[text {:style st/command-text} (:text command)]])
(defview cancel-button []
[commands-input-is-switching? [:get-in [:animations :commands-input-is-switching?]]]
[commands-input-is-switching? [:animations :commands-input-is-switching?]]
[touchable-highlight {:disabled commands-input-is-switching?
:on-press cancel-command-input}
[view st/cancel-container

16
src/status_im/chat/views/message_input.cljs
View File

@ -19,29 +19,29 @@
[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?]]]
[commands-input-is-switching? [: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]}]
(defn 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])))))))
(dispatch [:set-animation ::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]])
(let [to-message-input-offset (subscribe [:animations :message-input-offset])
cur-message-input-offset (subscribe [: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)]
on-update (animation-logic context)]
(r/create-class
{:component-did-mount
on-update
@ -60,7 +60,7 @@
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?]]]
commands-input-is-switching? [: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?)
@ -99,7 +99,7 @@
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?]]]
commands-input-is-switching? [: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?)]

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

@ -28,12 +28,10 @@
:request {:input-options {:keyboardType :numeric}}
(throw (js/Error. "Uknown command type"))))])
(defn chat-message-new []
(let [command-atom (subscribe [:get-chat-command])
staged-commands-atom (subscribe [:get-chat-staged-commands])]
(fn []
(let [staged-commands @staged-commands-atom]
[view st/new-message-container
(when (and staged-commands (pos? (count staged-commands)))
[staged-commands-view staged-commands])
[show-input @command-atom]]))))
(defview chat-message-new []
[command [:get-chat-command]
staged-commands [:get-chat-staged-commands]]
[view st/new-message-container
(when (and staged-commands (pos? (count staged-commands)))
[staged-commands-view staged-commands])
[show-input command]])

14
src/status_im/chat/views/plain_message.cljs
View File

@ -36,7 +36,7 @@
(defn commands-button-animation-callback [message-input]
(fn [arg to-value]
(when (.-finished arg)
(dispatch [:set-in [:animations ::message-input-buttons-scale-current] to-value])
(dispatch [:set-animation ::message-input-buttons-scale-current to-value])
(when (<= to-value 0.1)
(dispatch [:finish-show-response])
(prepare-message-input @message-input)))))
@ -57,9 +57,9 @@
(defn commands-button []
(let [typing-command? (subscribe [:typing-command?])
message-input (subscribe [:get :message-input])
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]])
animation? (subscribe [:animations :commands-input-is-switching?])
to-scale (subscribe [:animations :message-input-buttons-scale])
cur-scale (subscribe [:animations ::message-input-buttons-scale-current])
buttons-scale (anim/create-value (or @cur-scale 1))
anim-callback (commands-button-animation-callback message-input)
context {:to-value to-scale
@ -84,9 +84,9 @@
[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]])
(let [animation? (subscribe [:animations :commands-input-is-switching?])
to-scale (subscribe [:animations :message-input-buttons-scale])
cur-scale (subscribe [:animations ::message-input-buttons-scale-current])
buttons-scale (anim/create-value (or @cur-scale 1))
context {:to-value to-scale
:val buttons-scale}

12
src/status_im/chat/views/request_message.cljs
View File

@ -33,15 +33,15 @@
(anim/spring val {:toValue to-scale})])
(fn [arg]
(when (.-finished arg)
(dispatch [:set-in [:animations ::request-button-scale-current] to-scale])
(dispatch [:set-animation ::request-button-scale-current to-scale])
(when loop?
(dispatch [:set-in [:animations ::request-button-scale] (if (= to-scale minimum)
maximum
minimum)]))))))))
(dispatch [:set-animation ::request-button-scale (if (= to-scale minimum)
maximum
minimum)]))))))))
(defn request-button [msg-id command]
(let [to-scale (subscribe [:get-in [:animations ::request-button-scale]])
cur-scale (subscribe [:get-in [:animations ::request-button-scale-current]])
(let [to-scale (subscribe [:animations ::request-button-scale])
cur-scale (subscribe [:animations ::request-button-scale-current])
scale-anim-val (anim/create-value (or @cur-scale 1))
loop? (r/atom true)
context {:to-value to-scale

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

@ -61,7 +61,7 @@
(anim/start (anim/spring val {:toValue to-value})
(fn [arg]
(when (.-finished arg)
(dispatch [:set-in [:animations :response-height-current] to-value])
(dispatch [:set-animation :response-height-current to-value])
(dispatch [:finish-animate-response-resize])
(when (= to-value input-height)
(dispatch [:finish-animate-cancel-command])
@ -69,10 +69,10 @@
(anim/set-value val @current-value))))
(defn container [& children]
(let [commands-input-is-switching? (subscribe [:get-in [:animations :commands-input-is-switching?]])
response-resize? (subscribe [:get-in [:animations :response-resize?]])
to-response-height (subscribe [:get-in [:animations :to-response-height]])
cur-response-height (subscribe [:get-in [:animations :response-height-current]])
(let [commands-input-is-switching? (subscribe [:animations :commands-input-is-switching?])
response-resize? (subscribe [:animations :response-resize?])
to-response-height (subscribe [:animations :to-response-height])
cur-response-height (subscribe [:animations :response-height-current])
response-height (anim/create-value (or @cur-response-height 0))
context {:animation? (reaction (or @commands-input-is-switching? @response-resize?))
:to-value to-response-height

4
src/status_im/handlers.cljs
View File

@ -49,6 +49,10 @@
debug
set-in)
(register-handler :set-animation
(fn [db [_ k v]]
(assoc-in db [:animations k] v)))
(register-handler :initialize-db
(fn [_ _]
(assoc app-db

4
src/status_im/subs.cljs
View File

@ -15,3 +15,7 @@
(register-sub :get-in
(fn [db [_ path]]
(reaction (get-in @db path))))
(register-sub :animations
(fn [db [_ k]]
(reaction (get-in @db [:animations k]))))