From 6c50fe84f55c45638a009ba7fbf759d6c77af5ee Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Mon, 24 Jun 2019 13:23:29 +0300 Subject: [PATCH] command suggestions and parameters animation with native driver --- .../chat/input/animations/expandable.cljs | 35 ++++++++++++------- .../ui/screens/chat/input/parameter_box.cljs | 1 - .../ui/screens/chat/input/suggestions.cljs | 12 +++---- .../ui/screens/chat/styles/animations.cljs | 13 ++++--- 4 files changed, 36 insertions(+), 25 deletions(-) diff --git a/src/status_im/ui/screens/chat/input/animations/expandable.cljs b/src/status_im/ui/screens/chat/input/animations/expandable.cljs index af39add55c..174c51b3d5 100644 --- a/src/status_im/ui/screens/chat/input/animations/expandable.cljs +++ b/src/status_im/ui/screens/chat/input/animations/expandable.cljs @@ -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))]]))) diff --git a/src/status_im/ui/screens/chat/input/parameter_box.cljs b/src/status_im/ui/screens/chat/input/parameter_box.cljs index f5e3a940de..652a63377f 100644 --- a/src/status_im/ui/screens/chat/input/parameter_box.cljs +++ b/src/status_im/ui/screens/chat/input/parameter_box.cljs @@ -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]]))) diff --git a/src/status_im/ui/screens/chat/input/suggestions.cljs b/src/status_im/ui/screens/chat/input/suggestions.cljs index b4091ec20b..f05cf2e96a 100644 --- a/src/status_im/ui/screens/chat/input/suggestions.cljs +++ b/src/status_im/ui/screens/chat/input/suggestions.cljs @@ -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)]]]))) diff --git a/src/status_im/ui/screens/chat/styles/animations.cljs b/src/status_im/ui/screens/chat/styles/animations.cljs index 03e8cf6d52..58ab7d27c9 100644 --- a/src/status_im/ui/screens/chat/styles/animations.cljs +++ b/src/status_im/ui/screens/chat/styles/animations.cljs @@ -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