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

New message animation

This commit is contained in:
virvar 2016-06-08 15:46:12 +03:00
parent 446e6ade50
commit ff5e4c66c3
2 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/status_im/chat/handlers.cljs
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} _]

49
src/status_im/chat/views/message.cljs
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,33 +170,36 @@
: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]
(let [layout-height (r/atom 0) (if (:new? message)
anim-value (anim/create-value 1) (let [layout-height (r/atom 0)
context {:to-value layout-height anim-value (anim/create-value 1)
:val anim-value} anim-callback #(dispatch [:set-message-shown message])
on-update (message-container-animation-logic context)] context {:to-value layout-height
(r/create-class :val anim-value
{:component-did-mount :callback anim-callback}
on-update on-update (message-container-animation-logic context)]
:component-did-update (r/create-class
on-update {:component-did-mount
:reagent-render on-update
(fn [& children] :component-did-update
@layout-height on-update
[animated-view {:style (st/message-container anim-value)} :reagent-render
(into [view {:onLayout (fn [event] (fn [message & children]
(let [height (.. event -nativeEvent -layout -height)] @layout-height
(reset! layout-height height)))}] [animated-view {:style (st/message-container anim-value)}
children)])}))) (into [view {:onLayout (fn [event]
(let [height (.. event -nativeEvent -layout -height)]
(reset! layout-height height)))}]
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])