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

View File

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

View File

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

View File

@ -32,7 +32,7 @@
[text {:style st/command-text} (:text command)]]) [text {:style st/command-text} (:text command)]])
(defview cancel-button [] (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? [touchable-highlight {:disabled commands-input-is-switching?
:on-press cancel-command-input} :on-press cancel-command-input}
[view st/cancel-container [view st/cancel-container

View File

@ -19,29 +19,29 @@
[status-im.constants :refer [response-input-hiding-duration]])) [status-im.constants :refer [response-input-hiding-duration]]))
(defview send-button [{:keys [on-press accessibility-label]}] (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? [touchable-highlight {:disabled commands-input-is-switching?
:on-press on-press :on-press on-press
:accessibility-label accessibility-label} :accessibility-label accessibility-label}
[view st/send-container [view st/send-container
[icon :send st/send-icon]]]) [icon :send st/send-icon]]])
(defn message-input-container-animation-logic [{:keys [to-value val]}] (defn animation-logic [{:keys [to-value val]}]
(fn [_] (fn [_]
(let [to-value @to-value] (let [to-value @to-value]
(anim/start (anim/timing val {:toValue to-value (anim/start (anim/timing val {:toValue to-value
:duration response-input-hiding-duration}) :duration response-input-hiding-duration})
(fn [arg] (fn [arg]
(when (.-finished 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] (defn message-input-container [input]
(let [to-message-input-offset (subscribe [:get-in [:animations :message-input-offset]]) (let [to-message-input-offset (subscribe [:animations :message-input-offset])
cur-message-input-offset (subscribe [:get-in [:animations ::message-input-offset-current]]) cur-message-input-offset (subscribe [:animations ::message-input-offset-current])
message-input-offset (anim/create-value (or @cur-message-input-offset 0)) message-input-offset (anim/create-value (or @cur-message-input-offset 0))
context {:to-value to-message-input-offset context {:to-value to-message-input-offset
:val message-input-offset} :val message-input-offset}
on-update (message-input-container-animation-logic context)] on-update (animation-logic context)]
(r/create-class (r/create-class
{:component-did-mount {:component-did-mount
on-update on-update
@ -60,7 +60,7 @@
input-command [:get-chat-command-content] input-command [:get-chat-command-content]
staged-commands [:get-chat-staged-commands] staged-commands [:get-chat-staged-commands]
typing-command? [:typing-command?] 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?)) (let [dismiss-keyboard (not (or command typing-command?))
response? (and command to-msg-id) response? (and command to-msg-id)
message-input? (or (not command) commands-input-is-switching?) message-input? (or (not command) commands-input-is-switching?)
@ -99,7 +99,7 @@
input-command [:get-chat-command-content] input-command [:get-chat-command-content]
staged-commands [:get-chat-staged-commands] staged-commands [:get-chat-staged-commands]
typing-command? [:typing-command?] 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?)) (let [dismiss-keyboard (not (or command typing-command?))
response? (and command to-msg-id) response? (and command to-msg-id)
message-input? (or (not command) commands-input-is-switching?)] message-input? (or (not command) commands-input-is-switching?)]

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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