From 3785e0b408e392eed13eb36f6b9b696d6c57d9ce Mon Sep 17 00:00:00 2001
From: Alexander Pantyuhov <alwxndr@gmail.com>
Date: Tue, 8 Nov 2016 12:08:51 +0300
Subject: [PATCH] Updated animation (#418)

---
 src/status_im/chat/styles/message.cljs |  8 ++++--
 src/status_im/chat/views/message.cljs  | 40 ++++++++++++++++----------
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/status_im/chat/styles/message.cljs b/src/status_im/chat/styles/message.cljs
index 1437dba3ac..97a94916aa 100644
--- a/src/status_im/chat/styles/message.cljs
+++ b/src/status_im/chat/styles/message.cljs
@@ -260,8 +260,12 @@
    :textAlign  :center
    :color      text2-color})
 
-(defn message-container [height]
-  {:top height})
+(defn message-animated-container [height]
+  {:height height})
+
+(defn message-container [window-width]
+  {:position :absolute
+   :width    window-width})
 
 (defn new-message-container [margin on-top?]
   {:background-color color-white
diff --git a/src/status_im/chat/views/message.cljs b/src/status_im/chat/views/message.cljs
index c44562dba4..a3365e82b0 100644
--- a/src/status_im/chat/views/message.cljs
+++ b/src/status_im/chat/views/message.cljs
@@ -9,7 +9,8 @@
                                                 image
                                                 icon
                                                 animated-view
-                                                touchable-highlight]]
+                                                touchable-highlight
+                                                get-dimensions]]
             [status-im.components.animation :as anim]
             [status-im.chat.views.request-message :refer [message-content-command-request]]
             [status-im.chat.styles.message :as st]
@@ -34,6 +35,8 @@
             [status-im.chat.handlers.console :as console]
             [taoensso.timbre :as log]))
 
+(def window-width (:width (get-dimensions "window")))
+
 (defn message-content-status [_]
   (let [{:keys [chat-id group-chat name color]} (subscribe [:chat-properties [:chat-id :group-chat :name :color]])
         members (subscribe [:current-chat-contacts])]
@@ -290,31 +293,38 @@
        [group-message-delivery-status message]
        [message-delivery-status message]))])
 
-(defn message-container-animation-logic [{:keys [top-offset callback]}]
+(defn message-container-animation-logic [{:keys [to-value val callback]}]
   (fn [_]
-    (anim/start
-      (anim/timing top-offset {:toValue  0
-                               :duration 150})
-      (fn [arg]
-        (when (.-finished arg)
-          (callback))))))
+    (let [to-value @to-value]
+      (when (< 0 to-value)
+        (anim/start
+          (anim/timing val {:toValue  to-value
+                            :duration 250})
+          (fn [arg]
+            (when (.-finished arg)
+              (callback))))))))
 
 (defn message-container [message & children]
   (if (:new? message)
-    (let [top-offset    (anim/create-value 40)
+    (let [layout-height (r/atom 0)
+          anim-value    (anim/create-value 1)
           anim-callback #(dispatch [:set-message-shown message])
-          context       {:top-offset top-offset
-                         :callback   anim-callback}
+          context       {:to-value layout-height
+                         :val      anim-value
+                         :callback anim-callback}
           on-update     (message-container-animation-logic context)]
       (r/create-class
         {:component-did-update
-         on-update
-         :component-did-mount
          on-update
          :reagent-render
          (fn [message & children]
-           [animated-view {:style (st/message-container top-offset)}
-            (into [view] children)])}))
+           @layout-height
+           [animated-view {:style (st/message-animated-container anim-value)}
+            (into [view {:style (st/message-container window-width)
+                         :onLayout (fn [event]
+                                     (let [height (.. event -nativeEvent -layout -height)]
+                                       (reset! layout-height height)))}]
+                  children)])}))
     (into [view] children)))
 
 (defn chat-message [{:keys [outgoing message-id chat-id user-statuses from]}]