From 547c73d130fc960cca6e17e91e1a1337eb7dd676 Mon Sep 17 00:00:00 2001 From: virvar Date: Wed, 1 Jun 2016 16:36:43 +0300 Subject: [PATCH] Start response suggestions dragging --- src/status_im/chat/handlers.cljs | 22 +++++++++++++++++++--- src/status_im/chat/views/response.cljs | 10 ++++++++-- src/status_im/components/animation.cljs | 15 +++++++++++++++ src/status_im/components/drag_drop.cljs | 12 ++++++++++++ src/status_im/components/react.cljs | 1 + src/status_im/db.cljs | 2 ++ 6 files changed, 57 insertions(+), 5 deletions(-) create mode 100644 src/status_im/components/drag_drop.cljs diff --git a/src/status_im/chat/handlers.cljs b/src/status_im/chat/handlers.cljs index 8169e91b67..481e5372fc 100644 --- a/src/status_im/chat/handlers.cljs +++ b/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! diff --git a/src/status_im/chat/views/response.cljs b/src/status_im/chat/views/response.cljs index 27c997317b..4dd39ab9e9 100644 --- a/src/status_im/chat/views/response.cljs +++ b/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]]] - [animated-view {:style (st/request-view height)} + [height [:get-in [:animations :response-suggestions-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]]) diff --git a/src/status_im/components/animation.cljs b/src/status_im/components/animation.cljs index 2ccc4fc216..dac71685fd 100644 --- a/src/status_im/components/animation.cljs +++ b/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}))) diff --git a/src/status_im/components/drag_drop.cljs b/src/status_im/components/drag_drop.cljs new file mode 100644 index 0000000000..708efdfb12 --- /dev/null +++ b/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}))) diff --git a/src/status_im/components/react.cljs b/src/status_im/components/react.cljs index 0f16a6d82b..1967c91801 100644 --- a/src/status_im/components/react.cljs +++ b/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))) diff --git a/src/status_im/db.cljs b/src/status_im/db.cljs index 2ffdc70d88..af852299af 100644 --- a/src/status_im/db.cljs +++ b/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