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

Replace animation listeners to callbacks. Handle height < 0.

This commit is contained in:
virvar 2016-06-03 14:46:32 +03:00
parent 06dd295ef5
commit 72bdf34348
5 changed files with 39 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,10 +4,13 @@
[status-im.components.drag-drop :as drag]
[status-im.models.commands :as commands]
[status-im.handlers.content-suggestions :refer [get-content-suggestions]]
[status-im.chat.styles.plain-input :refer [input-height]]
[status-im.chat.styles.response :refer [request-info-height response-height-normal]]
[status-im.chat.styles.response-suggestions :as response-suggestions-styles]
[status-im.constants :refer [response-input-hiding-duration]]))
(def zero-height input-height)
(register-handler :finish-animate-cancel-command
(fn [db _]
(assoc-in db [:animations :commands-input-is-switching?] false)))
@ -17,18 +20,11 @@
message-input-offset
messages-offset-anim-value]} :animations}
[_ on-animation-stop]]
(let [height-to-value 1
delta 1]
(anim/add-listener response-height-anim-value
(fn [val]
(when (<= (- height-to-value delta) (anim/value val) (+ height-to-value delta))
(anim/remove-all-listeners response-height-anim-value)
(dispatch [:finish-animate-cancel-command])
(on-animation-stop))))
(anim/start (anim/spring response-height-anim-value {:toValue height-to-value
:velocity 1
:tension 1
:friction 5}))
(let [height-to-value zero-height]
(anim/start (anim/spring response-height-anim-value {:toValue height-to-value})
(fn []
(dispatch [:finish-animate-cancel-command])
(on-animation-stop)))
(anim/start (anim/timing message-input-buttons-scale {:toValue 1
:duration response-input-hiding-duration}))
(anim/start (anim/timing message-input-offset {:toValue 0
@ -57,16 +53,15 @@
(defn animate-response-resize! [{{height-anim-value :response-height-anim-value
from :response-height
to :response-height-fixed} :animations}]
(let [delta 5]
(anim/remove-all-listeners height-anim-value)
(anim/set-value height-anim-value from)
(anim/add-listener height-anim-value
(fn [val]
(dispatch [:set-response-height (anim/value val)])
(when (<= (- to delta) (anim/value val) (+ to delta))
(anim/remove-all-listeners height-anim-value)
(dispatch [:finish-animate-response-resize]))))
(anim/start (anim/spring height-anim-value {:toValue to}))))
(anim/remove-all-listeners height-anim-value)
(anim/set-value height-anim-value from)
(anim/add-listener height-anim-value
(fn [val]
(dispatch [:set-response-height (anim/value val)])))
(anim/start (anim/spring height-anim-value {:toValue to})
(fn []
(anim/remove-all-listeners height-anim-value)
(dispatch [:finish-animate-response-resize]))))
(register-handler :animate-response-resize
(after animate-response-resize!)
@ -81,7 +76,8 @@
response-suggestions-styles/header-height
response-suggestions-styles/suggestion-height)
suggestions))]
(min response-height-normal (+ suggestions-height request-info-height))))
(+ zero-height
(min response-height-normal (+ suggestions-height request-info-height)))))
(defn update-response-height [db]
(assoc-in db [:animations :response-height-fixed] (get-response-height db)))
@ -93,15 +89,10 @@
(defn animate-show-response! [{{scale-anim-value :message-input-buttons-scale
input-offset-anim-value :message-input-offset
messages-offset-anim-value :messages-offset-anim-value} :animations}]
(let [to-value 0.1
delta 0.02]
(anim/add-listener scale-anim-value
(fn [val]
(when (<= (- to-value delta) (anim/value val) (+ to-value delta))
(anim/remove-all-listeners scale-anim-value)
(dispatch [:finish-show-response!]))))
(let [to-value 0.1]
(anim/start (anim/timing scale-anim-value {:toValue to-value
:duration response-input-hiding-duration}))
:duration response-input-hiding-duration})
#(dispatch [:finish-show-response!]))
(anim/start (anim/timing input-offset-anim-value {:toValue -40
:duration response-input-hiding-duration}))
(anim/start (anim/spring messages-offset-anim-value {:toValue request-info-height}))))
@ -112,7 +103,7 @@
(dispatch [:animate-response-resize])
(-> db
(assoc-in [:animations :commands-input-is-switching?] true)
(assoc-in [:animations :response-height] 0)
(assoc-in [:animations :response-height] zero-height)
(update-response-height))))
(register-handler :set-response-max-height
@ -131,8 +122,8 @@
max-height (get-in db [:animations :response-height-max])
delta (/ normal-height 2)
new-fixed (cond
(<= current delta) request-info-height
(<= current (+ normal-height delta)) (get-response-height db)
(<= current (+ zero-height delta)) (+ zero-height request-info-height)
(<= current (+ zero-height normal-height delta)) (get-response-height db)
:else max-height)]
(dispatch [:animate-response-resize])
(assoc-in db [:animations :response-height-fixed] new-fixed))))

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

@ -4,12 +4,14 @@
color-white
color-blue]]))
(def input-height 56)
(def input-container
{:flexDirection :column})
(def input-view
{:flexDirection :row
:height 56
:height input-height
:backgroundColor color-white})
(def message-input-button-touchable

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

@ -5,7 +5,8 @@
text1-color
text2-color
chat-background
color-black]]))
color-black]]
[status-im.chat.styles.plain-input :refer [input-height]]))
(def response-height-normal 211)
(def request-info-height 61)
@ -57,7 +58,7 @@
:left 0
:right 0
:top 0
:bottom 56
:bottom 0
:backgroundColor :transparent
:elevation 2})
@ -66,6 +67,9 @@
:height height
:backgroundColor color-white})
(def input-placeholder
{:height input-height})
(defn request-info [color]
{:flexDirection :column
:height request-info-height

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

@ -55,4 +55,5 @@
anim-height
response-height))})
[request-info]
[response-suggestions-view]]])
[response-suggestions-view]
[view st/input-placeholder]]])

5
src/status_im/components/animation.cljs
View File

@ -1,8 +1,9 @@
(ns status-im.components.animation
(:require [status-im.components.react :refer [animated]]))
(defn start [anim]
(.start anim))
(defn start
([anim] (.start anim))
([anim callback] (.start anim callback)))
(defn timing [anim-value config]
(.timing animated anim-value (clj->js config)))