command suggestions and parameters animation with native driver

This commit is contained in:
Roman Volosovskyi 2019-06-24 13:23:29 +03:00
parent fd2c37df71
commit 6c50fe84f5
No known key found for this signature in database
GPG Key ID: 0238A4B5ECEE70DE
4 changed files with 36 additions and 25 deletions

View File

@ -9,21 +9,31 @@
(def top-offset 100)
(defn expandable-view-on-update [anim-value animation-height]
(when animation-height
(animation/start
(animation/spring anim-value {:toValue animation-height
:friction 10
:tension 60}))))
(defn expandable-view-on-update [anim-value]
(animation/start
(animation/spring anim-value {:toValue -53
:friction 10
:tension 60
:useNativeDriver true})))
(defview expandable-view [{:keys [key]} & elements]
(letsubs [anim-value (animation/create-value 0)
input-height [:chats/current-chat-ui-prop :input-height]
(defview expandable-view [_ & elements]
(letsubs [;; Default value of translateY is 104, it is sufficient to
;; hide two commands below an input view.
;; With bigger view like assets parameter animation looks good
;; enough too, even if initially the view isn't fully covered by
;; input. It might be inferred for each case but it would require
;; more efforts and will not change too much the way how animation
;; looks atm.
anim-value (animation/create-value 104)
input-focused? [:chats/current-chat-ui-prop :input-focused?]
messages-focused? [:chats/current-chat-ui-prop :messages-focused?]
input-height [:chats/current-chat-ui-prop :input-height]
chat-input-margin [:chats/input-margin]
keyboard-height [:keyboard-height]
chat-layout-height [:layout-height]]
chat-layout-height [:layout-height]
keyboard-height [:keyboard-height]]
{:component-did-mount
(fn []
(expandable-view-on-update anim-value))}
(let [input-height (or input-height (+ input-style/padding-vertical
input-style/min-input-height
input-style/padding-vertical
@ -31,9 +41,8 @@
bottom (+ input-height chat-input-margin)
max-height (- chat-layout-height (when platform/ios? keyboard-height) input-height top-offset)]
[react/view style/overlap-container
[react/animated-view {:style (style/expandable-container anim-value bottom max-height)}
[react/animated-view {:style (style/expandable-container anim-value keyboard-height max-height)}
(into [react/scroll-view {:keyboard-should-persist-taps :always
:on-content-size-change #(expandable-view-on-update anim-value %2)
:bounces false}]
(when (or input-focused? (not messages-focused?))
elements))]])))

View File

@ -13,7 +13,6 @@
(defview parameter-box-view []
(letsubs [show-box? [:chats/show-parameter-box?]]
(when show-box?
[react/view]
[expandable/expandable-view {:key :parameter-box}
;; TODO need to add the whole payload (and details about previous parameters?)
[parameter-box-container]])))

View File

@ -17,11 +17,11 @@
(defview suggestions-view []
(letsubs [available-commands [:chats/available-commands]]
[expandable/expandable-view {:key :suggestions}
[react/view
[react/scroll-view {:keyboard-should-persist-taps :always
:bounces false}
(when (seq available-commands)
(when (seq available-commands)
[expandable/expandable-view {:key :suggestions}
[react/view
[react/scroll-view {:keyboard-should-persist-taps :always
:bounces false}
(map-indexed
(fn [i {:keys [type] :as command}]
^{:key i}
@ -30,4 +30,4 @@
:description (commands/command-description type)
:last? (= i (dec (count available-commands)))
:accessibility-label (commands/accessibility-label type)}])
available-commands))]]]))
available-commands)]]])))

View File

@ -1,6 +1,7 @@
(ns status-im.ui.screens.chat.styles.animations
(:require [status-im.ui.components.styles :as common]
[status-im.ui.components.colors :as colors]))
[status-im.ui.components.colors :as colors]
[status-im.utils.platform :as platform]))
(def header-draggable-icon "rgba(73, 84, 93, 0.23)")
@ -11,19 +12,21 @@
:right 0
:bottom 0})
(defn expandable-container [anim-value bottom max-height]
(defn expandable-container [anim-value keyboard-height max-height]
{:background-color colors/white
:height anim-value
:left 0
:right 0
:bottom bottom
:bottom (if platform/ios?
(- keyboard-height 72)
0)
:position :absolute
:elevation 2
:shadow-offset {:width 0 :height 1}
:shadow-radius 12
:shadow-opacity 0.12
:shadow-color colors/white
:max-height max-height})
:max-height max-height
:transform [{:translateY anim-value}]})
(def header-container
{:min-height 19