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 (defn add-message-to-db
[db chat-id message] [db chat-id message]
(let [messages [:chats chat-id :messages]] (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 (defn prepare-message
[{:keys [identity current-chat-id] :as db} _] [{:keys [identity current-chat-id] :as db} _]

View File

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