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

Spring animation 

Former-commit-id: 8892d13db4
This commit is contained in:
virvar 2016-05-31 14:23:30 +03:00
parent 0543b943f7
commit 81055c30bd
6 changed files with 55 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/status_im/chat/handlers.cljs
View File

@ -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]]

9
src/status_im/chat/styles/response_suggestions.cljs
View File

@ -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})

26
src/status_im/chat/subs.cljs
View File

@ -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)))))

6
src/status_im/chat/views/content_suggestions.cljs
View File

@ -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}]]]))

2
src/status_im/chat/views/response_suggestions.cljs
View File

@ -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}]]))

2
src/status_im/handlers/content_suggestions.cljs
View File

@ -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]