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) (def top-offset 100)
(defn expandable-view-on-update [anim-value animation-height] (defn expandable-view-on-update [anim-value]
(when animation-height
(animation/start (animation/start
(animation/spring anim-value {:toValue animation-height (animation/spring anim-value {:toValue -53
:friction 10 :friction 10
:tension 60})))) :tension 60
:useNativeDriver true})))
(defview expandable-view [{:keys [key]} & elements] (defview expandable-view [_ & elements]
(letsubs [anim-value (animation/create-value 0) (letsubs [;; Default value of translateY is 104, it is sufficient to
input-height [:chats/current-chat-ui-prop :input-height] ;; 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?] input-focused? [:chats/current-chat-ui-prop :input-focused?]
messages-focused? [:chats/current-chat-ui-prop :messages-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] 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 (let [input-height (or input-height (+ input-style/padding-vertical
input-style/min-input-height input-style/min-input-height
input-style/padding-vertical input-style/padding-vertical
@ -31,9 +41,8 @@
bottom (+ input-height chat-input-margin) bottom (+ input-height chat-input-margin)
max-height (- chat-layout-height (when platform/ios? keyboard-height) input-height top-offset)] max-height (- chat-layout-height (when platform/ios? keyboard-height) input-height top-offset)]
[react/view style/overlap-container [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 (into [react/scroll-view {:keyboard-should-persist-taps :always
:on-content-size-change #(expandable-view-on-update anim-value %2)
:bounces false}] :bounces false}]
(when (or input-focused? (not messages-focused?)) (when (or input-focused? (not messages-focused?))
elements))]]))) elements))]])))

View File

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

View File

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

View File

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