New message animation

Former-commit-id: ff5e4c66c3
This commit is contained in:
virvar 2016-06-08 15:46:12 +03:00
parent f57711aec1
commit ed7338be35
2 changed files with 41 additions and 24 deletions

View File

@ -133,7 +133,21 @@
(defn add-message-to-db
[db chat-id message]
(let [messages [:chats chat-id :messages]]
(update-in db messages conj message)))
(update-in db messages conj (assoc message :chat-id chat-id
:new? true))))
(defn set-message-shown
[db chat-id msg-id]
(update-in db [:chats chat-id :messages] (fn [messages]
(map (fn [msg]
(if (= msg-id (:msg-id msg))
(assoc msg :new? false)
msg))
messages))))
(register-handler :set-message-shown
(fn [db [_ {:keys [chat-id msg-id]}]]
(set-message-shown db chat-id msg-id)))
(defn prepare-message
[{:keys [identity current-chat-id] :as db} _]

View File

@ -160,7 +160,7 @@
(when (and outgoing delivery-status)
[message-delivery-status {:delivery-status delivery-status}])]))
(defn message-container-animation-logic [{:keys [to-value val]}]
(defn message-container-animation-logic [{:keys [to-value val callback]}]
(fn [_]
(let [to-value @to-value]
(when (< 0 to-value)
@ -170,14 +170,16 @@
:tension 10})
(fn [arg]
(when (.-finished arg)
;; todo ???
nil)))))))
(callback))))))))
(defn message-container [& children]
(defn message-container [message & children]
(if (:new? message)
(let [layout-height (r/atom 0)
anim-value (anim/create-value 1)
anim-callback #(dispatch [:set-message-shown message])
context {:to-value layout-height
:val anim-value}
:val anim-value
:callback anim-callback}
on-update (message-container-animation-logic context)]
(r/create-class
{:component-did-mount
@ -185,18 +187,19 @@
:component-did-update
on-update
:reagent-render
(fn [& children]
(fn [message & children]
@layout-height
[animated-view {:style (st/message-container anim-value)}
(into [view {:onLayout (fn [event]
(let [height (.. event -nativeEvent -layout -height)]
(reset! layout-height height)))}]
children)])})))
children)])}))
(into [view] children)))
(defn chat-message
[{:keys [outgoing delivery-status timestamp new-day group-chat]
:as message}]
[message-container
[message-container message
;; TODO there is no new-day info in message
(when new-day
[message-date timestamp])