From 81055c30bd090a99640b4bc56ee81c95150f2526 Mon Sep 17 00:00:00 2001 From: virvar Date: Tue, 31 May 2016 14:23:30 +0300 Subject: [PATCH] Spring animation Former-commit-id: 8892d13db4ddd5a66c9daaea7e64d70d4e4e578e --- src/status_im/chat/handlers.cljs | 57 ++++++++++++++----- .../chat/styles/response_suggestions.cljs | 9 +-- src/status_im/chat/subs.cljs | 26 +-------- .../chat/views/content_suggestions.cljs | 6 +- .../chat/views/response_suggestions.cljs | 2 +- .../handlers/content_suggestions.cljs | 2 +- 6 files changed, 55 insertions(+), 47 deletions(-) diff --git a/src/status_im/chat/handlers.cljs b/src/status_im/chat/handlers.cljs index 841f23ab14..bd9367b91c 100644 --- a/src/status_im/chat/handlers.cljs +++ b/src/status_im/chat/handlers.cljs @@ -4,6 +4,8 @@ [clojure.string :as str] [status-im.components.animation :as anim] [status-im.components.styles :refer [default-chat-color]] + [status-im.chat.styles.response :as response-styles] + [status-im.chat.styles.response-suggestions :as response-suggestions-styles] [status-im.chat.suggestions :as suggestions] [status-im.protocol.api :as api] [status-im.models.messages :as messages] @@ -21,6 +23,8 @@ [status-im.utils.phone-number :refer [format-phone-number]] [status-im.utils.datetime :as time])) +(def delta 1) + (register-handler :set-show-actions (fn [db [_ show-actions]] (assoc db :show-actions show-actions))) @@ -45,27 +49,52 @@ (assoc-in [:chats current-chat-id :command-input] {}) (update-in [:chats current-chat-id :input-text] safe-trim)))) -(defn animate-cancel-command [db height] - (anim/add-listener height (fn [val] - (when (<= (.-value val) 1) - (anim/remove-all-listeners height) - (anim/stop-animation height) - (dispatch [:cancel-command])))) - (anim/start (anim/timing height {:toValue 1, :duration response-input-hiding-duration})) - (assoc-in db [:animations :response-input-is-hiding?] true)) +(defn animate-cancel-command [db height-anim-value] + (let [to-value 1] + (anim/add-listener height-anim-value + (fn [val] + (when (<= (- to-value delta) (anim/value val) (+ to-value delta)) + (anim/remove-all-listeners height-anim-value) + (dispatch [:cancel-command])))) + (anim/stop-animation height-anim-value) + (anim/start (anim/spring height-anim-value {:toValue to-value + :speed 10 + :bounciness 1})) + (assoc-in db [:animations :response-input-is-hiding?] true))) (register-handler :start-cancel-command - (fn [{{height :response-suggestions-height - hiding? :response-input-is-hiding?} :animations :as db} _] + (fn [{{height-anim-value :response-suggestions-height + hiding? :response-input-is-hiding?} :animations :as db} _] (if-not hiding? - (animate-cancel-command db height) + (animate-cancel-command db height-anim-value) db))) +(defn update-response-suggestions-height [db] + (when (and (not (get-in db [:animations :response-input-is-hiding?])) + (commands/get-chat-command-to-msg-id db)) + (let [command (commands/get-chat-command db) + text (commands/get-chat-command-content db) + suggestions (get-content-suggestions command text) + suggestions-height (min response-suggestions-styles/max-suggestions-height + (reduce + 0 (map #(if (:header %) + response-suggestions-styles/header-height + response-suggestions-styles/suggestion-height) + suggestions))) + height (+ suggestions-height response-styles/request-info-height) + anim-value (get-in db [:animations :response-suggestions-height])] + (anim/stop-animation anim-value) + (anim/start + (anim/spring anim-value {:toValue height + :speed 10 + :bounciness 10})))) + db) + (register-handler :set-chat-command-content (fn [{:keys [current-chat-id] :as db} [_ content]] (-> db (commands/set-chat-command-content content) - (assoc-in [:chats current-chat-id :input-text] nil)))) + (assoc-in [:chats current-chat-id :input-text] nil) + (update-response-suggestions-height)))) (defn update-input-text [{:keys [current-chat-id] :as db} text] @@ -83,7 +112,9 @@ (register-handler :set-response-chat-command (fn [db [_ to-msg-id command-key]] - (commands/set-response-chat-command db to-msg-id command-key))) + (-> db + (commands/set-response-chat-command to-msg-id command-key) + (update-response-suggestions-height)))) (defn update-text [db [_ text]] diff --git a/src/status_im/chat/styles/response_suggestions.cljs b/src/status_im/chat/styles/response_suggestions.cljs index e8ba2f6c98..e039264a06 100644 --- a/src/status_im/chat/styles/response_suggestions.cljs +++ b/src/status_im/chat/styles/response_suggestions.cljs @@ -13,7 +13,7 @@ text2-color text3-color]])) -(def min-suggestions-height 150) +(def max-suggestions-height 250) (def header-height 50) (def suggestion-height 56) @@ -51,13 +51,10 @@ :fontFamily font :color text2-color}) -(defn suggestions-container [suggestions] +(def suggestions-container {:flexDirection :row + :flex 1 :marginVertical 1 :marginHorizontal 0 - :height (min 150 (reduce + 0 (map #(if (:header %) - header-height - suggestion-height) - suggestions))) :backgroundColor color-white :borderRadius 5}) diff --git a/src/status_im/chat/subs.cljs b/src/status_im/chat/subs.cljs index 6e669efba4..9b11d29fd0 100644 --- a/src/status_im/chat/subs.cljs +++ b/src/status_im/chat/subs.cljs @@ -1,15 +1,12 @@ (ns status-im.chat.subs (:require-macros [reagent.ratom :refer [reaction]]) - (:require [re-frame.core :refer [register-sub]] + (:require [re-frame.core :refer [register-sub dispatch]] [status-im.db :as db] ;todo handlers in subs?... [status-im.chat.suggestions :refer [get-suggestions typing-command?]] [status-im.models.commands :as commands] - [status-im.components.animation :as anim] [status-im.constants :refer [response-suggesstion-resize-duration]] - [status-im.chat.styles.response :as response-styles] - [status-im.chat.styles.response-suggestions :as response-suggestions-styles] [status-im.handlers.content-suggestions :refer [get-content-suggestions]])) (register-sub :chat-properties @@ -95,25 +92,8 @@ (fn [db _] (reaction (typing-command? @db)))) -(defn update-response-suggestions-height [db] - (when-not (get-in db [:animations :response-input-is-hiding?]) - (let [command (commands/get-chat-command db) - text (commands/get-chat-command-content db) - suggestions (get-content-suggestions db command text) - suggestions-height (min response-suggestions-styles/min-suggestions-height - (reduce + 0 (map #(if (:header %) - response-suggestions-styles/header-height - response-suggestions-styles/suggestion-height) - suggestions))) - height (+ suggestions-height response-styles/request-info-height) - anim-value (get-in db [:animations :response-suggestions-height])] - (anim/start (anim/timing anim-value {:toValue height, :duration response-suggesstion-resize-duration})))) - db) - (register-sub :get-content-suggestions (fn [db _] (let [command (reaction (commands/get-chat-command @db)) - text (reaction (commands/get-chat-command-content @db)) - suggestions (reaction (get-content-suggestions @db @command @text))] - (reaction (do (update-response-suggestions-height @db) - @suggestions))))) + text (reaction (commands/get-chat-command-content @db))] + (reaction (get-content-suggestions @command @text))))) diff --git a/src/status_im/chat/views/content_suggestions.cljs b/src/status_im/chat/views/content_suggestions.cljs index a10ae722db..e200aee8db 100644 --- a/src/status_im/chat/views/content_suggestions.cljs +++ b/src/status_im/chat/views/content_suggestions.cljs @@ -25,13 +25,13 @@ (defview content-suggestions-view [] [suggestions [:get-content-suggestions]] - (when (seq suggestions) + (when-let [values (not-empty (filter :value suggestions))] [view [touchable-highlight {:style st/drag-down-touchable ;; TODO hide suggestions? :onPress (fn [])} [view [icon :drag_down st/drag-down-icon]]] - [view (st/suggestions-container (count suggestions)) - [list-view {:dataSource (to-datasource (filter :value suggestions)) + [view (st/suggestions-container (count values)) + [list-view {:dataSource (to-datasource values) :keyboardShouldPersistTaps true :renderRow render-row}]]])) diff --git a/src/status_im/chat/views/response_suggestions.cljs b/src/status_im/chat/views/response_suggestions.cljs index c2dab90552..54eed3bb7d 100644 --- a/src/status_im/chat/views/response_suggestions.cljs +++ b/src/status_im/chat/views/response_suggestions.cljs @@ -32,7 +32,7 @@ (defview response-suggestions-view [] [suggestions [:get-content-suggestions]] (when (seq suggestions) - [view (st/suggestions-container suggestions) + [view st/suggestions-container [list-view {:dataSource (to-datasource suggestions) :keyboardShouldPersistTaps true :renderRow render-row}]])) diff --git a/src/status_im/handlers/content_suggestions.cljs b/src/status_im/handlers/content_suggestions.cljs index 6fa8d3cec9..d43801cff3 100644 --- a/src/status_im/handlers/content_suggestions.cljs +++ b/src/status_im/handlers/content_suggestions.cljs @@ -14,7 +14,7 @@ {:value "9171111111" :description "Number format 3"}]}) -(defn get-content-suggestions [db command text] +(defn get-content-suggestions [command text] (or (when command (when-let [command-suggestions ((:command command) suggestions)] (filterv (fn [s]