Start response suggestions dragging

src/status_im/chat/handlers.cljs

@@ -2,6 +2,7 @@
   (:require [re-frame.core :refer [register-handler enrich after debug dispatch]]
             [status-im.models.commands :as commands]
             [clojure.string :as str]
+            [status-im.components.drag-drop :as drag]
             [status-im.components.animation :as anim]
             [status-im.components.styles :refer [default-chat-color]]
             [status-im.chat.styles.response :as response-styles]
@@ -132,13 +133,13 @@
     (anim/start (anim/timing offset-anim-value {:toValue  -40
                                                 :duration response-input-hiding-duration}))))
 
-(defn set-reponse-chat-command [db [_ to-msg-id command-key]]
+(defn set-response-chat-command [db [_ to-msg-id command-key]]
   (-> db
       (commands/set-response-chat-command to-msg-id command-key)
       (assoc-in [:animations :commands-input-is-switching?] true)))
 
 (register-handler :set-response-chat-command
-  (-> set-reponse-chat-command
+  (-> set-response-chat-command
       ((after animate-show-response!))
       ((after update-response-suggestions-height!))))
 
@@ -328,10 +329,25 @@
         messages/get-messages
         (assoc db :messages))))
 
+(defn create-response-pan-responder [pan]
+  (drag/create-pan-responder
+    {:on-move    (anim/event {:dy (anim/y pan)})
+     :on-release (fn [e gesture]
+                   (anim/start (anim/spring pan
+                                            {:toValue {:x 0, :y 0}})))}))
+
+(defn init-response-dragging [db]
+  (let [pan (anim/create-value-xy 0 0)]
+    (-> db
+        (assoc-in [:animations :response-pan] pan)
+        (assoc-in [:animations :response-pan-responder] (create-response-pan-responder pan)))))
+
 (defn init-chat
   ([db] (init-chat db nil))
   ([{:keys [messages current-chat-id] :as db} _]
-   (assoc-in db [:chats current-chat-id :messages] messages)))
+   (-> db
+       (assoc-in [:chats current-chat-id :messages] messages)
+       (init-response-dragging))))
 
 (register-handler :init-chat
   (-> load-messages!

src/status_im/chat/views/response.cljs

@@ -8,6 +8,8 @@
                                                 text
                                                 text-input
                                                 touchable-highlight]]
+            [status-im.components.animation :as anim]
+            [status-im.components.drag-drop :as drag]
             [status-im.chat.views.response-suggestions :refer [response-suggestions-view]]
             [status-im.chat.styles.response :as st]))
 
@@ -44,7 +46,11 @@
       [icon :close-white st/cancel-icon]]]]])
 
 (defview request-view []
-  [height [:get-in [:animations :response-suggestions-height]]]
+  [height [:get-in [:animations :response-suggestions-height]]
-  [animated-view {:style (st/request-view height)}
+   pan-responder [:get-in [:animations :response-pan-responder]]
+   pan [:get-in [:animations :response-pan]]]
+  [animated-view (merge (drag/pan-handlers pan-responder)
+                        {:style (merge (anim/get-layout pan)
+                                       (st/request-view height))})
    [request-info]
    [response-suggestions-view]])

src/status_im/components/animation.cljs

@@ -10,6 +10,9 @@
 (defn spring [anim-value config]
   (.spring animated anim-value (clj->js config)))
 
+(defn event [config]
+  (.event animated (clj->js [nil, config])))
+
 (defn add-listener [anim-value listener]
   (.addListener anim-value listener))
 
@@ -27,3 +30,15 @@
 
 (defn create-value [value]
   (js/React.Animated.Value. value))
+
+(defn x [value-xy]
+  (.-x value-xy))
+
+(defn y [value-xy]
+  (.-y value-xy))
+
+(defn get-layout [value-xy]
+  (js->clj (.getLayout value-xy)))
+
+(defn create-value-xy [x y]
+  (js/React.Animated.ValueXY. (clj->js {:x x, :y y})))

src/status_im/components/drag_drop.cljs

@@ -0,0 +1,12 @@
+(ns status-im.components.drag-drop
+  (:require [status-im.components.react :refer [animated pan-responder]]
+            [status-im.components.animation :as anim]))
+
+(defn pan-handlers [pan-responder]
+  (js->clj (.-panHandlers pan-responder)))
+
+(defn create-pan-responder [{:keys [on-move on-release]}]
+  (.create pan-responder
+           (clj->js {:onStartShouldSetPanResponder (fn [] true)
+                     :onPanResponderMove           on-move
+                     :onPanResponderRelease        on-release})))

src/status_im/components/react.cljs

@@ -34,6 +34,7 @@
 (def picker (r/adapt-react-class (.-Picker js/React)))
 (def picker-item (r/adapt-react-class (.-Item (.-Picker js/React))))
 
+(def pan-responder (.-PanResponder js/React))
 (def animated (.-Animated js/React))
 (def animated-view (r/adapt-react-class (.-View animated)))
 (def animated-text (r/adapt-react-class (.-Text animated)))

src/status_im/db.cljs

@@ -33,6 +33,8 @@
              :current-tag            nil
              :disable-group-creation false
              :animations             {;; mutable data
+                                      :response-pan                 nil
+                                      :response-pan-responder       nil
                                       :message-input-offset         (anim/create-value 0)
                                       :message-input-buttons-scale  (anim/create-value 1)
                                       :commands-input-is-switching? false