WIP

status-im · Jan 27, 2020 · 75b9529 · 75b9529
1 parent a480e95
commit 75b9529
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 33 deletions.
diff --git a/src/status_im/ui/components/bottom_sheet/styles.cljs b/src/status_im/ui/components/bottom_sheet/styles.cljs
@@ -26,6 +26,12 @@
    :opacity          opacity-value
    :background-color colors/black-transparent-40})
 
+(defn container-height [content-height]
+  (+ content-height
+     border-radius
+     bottom-padding
+     top-padding))
+
 (defn content-container
   [bottom-value]
   {:background-color        colors/white

diff --git a/src/status_im/ui/components/bottom_sheet/view.cljs b/src/status_im/ui/components/bottom_sheet/view.cljs
@@ -16,7 +16,8 @@
 (defn- animate
   [{:keys [opacity new-opacity-value
            bottom new-bottom-value
-           duration callback] :as opts}]
+           duration callback]
+    :as   opts}]
   (animation/start
    (animation/parallel
     [(animation/timing opacity
@@ -26,8 +27,7 @@
      (animation/spring bottom
                        {:toValue         new-bottom-value
                         :duration        duration
-                        :tension         40
-                        :friction        6
+                        :bounciness      1
                         :useNativeDriver true})])
    (when (fn? callback) callback)))
 
@@ -66,8 +66,10 @@
    react/pan-responder
    (clj->js
     {:onMoveShouldSetPanResponder (fn [_ state]
-                                    (or (< 10 (js/Math.abs (.-dx state)))
-                                        (< 5 (js/Math.abs (.-dy state)))))
+                                    true
+                                    ;; (or (< 10 (js/Math.abs (.-dx state)))
+                                    ;;     (< 5 (js/Math.abs (.-dy state))))
+                                    )
      :onPanResponderMove          (on-move opts)
      :onPanResponderRelease       (on-release opts)
      :onPanResponderTerminate     (on-release opts)})))
@@ -107,8 +109,8 @@
         internal-visible (reagent/atom false)
         external-visible (reagent/atom false)]
     (fn [{:keys [content on-cancel disable-drag? show?]
-          :or   {on-cancel #(re-frame/dispatch [:bottom-sheet/hide])}
-          :as   opts}]
+         :or   {on-cancel #(re-frame/dispatch [:bottom-sheet/hide])}
+         :as   opts}]
       (let [close-sheet (fn []
                           (on-close {:opacity-value    opacity-value
                                      :bottom-value     bottom-value
@@ -127,30 +129,28 @@
 
           [react/keyboard-avoiding-view {:pointer-events "box-none"
                                          :style          styles/sheet-wrapper}
-           [react/animated-view (merge
-                                 {:pointer-events "box-none"
-                                  :style          (styles/content-container bottom-value)}
-                                 (when-not disable-drag?
-                                   (pan-handlers
-                                    (swipe-pan-responder {:bottom-value  bottom-value
-                                                          :opacity-value opacity-value
-                                                          :height        @content-height
-                                                          :close-sheet   close-sheet}))))
-            [react/view {:style styles/content-header}
-             [react/view styles/handle]]
-            [react/animated-view {:on-layout
-                                  (fn [evt]
-                                    (let [height (+ (->> evt
-                                                         .-nativeEvent
-                                                         .-layout
-                                                         .-height)
-                                                    styles/border-radius
-                                                    styles/bottom-padding
-                                                    styles/top-padding)]
-                                      (reset! content-height height)
-                                      (on-open {:bottom-value     bottom-value
-                                                :opacity-value    opacity-value
-                                                :height           height
-                                                :internal-visible internal-visible})))}
-             [content]]]]]]))))
+           [react/scroll-view {:style {:height "100%"
+                                       :width "100%"
+                                       :background-color :transparent}}
+            [react/animated-view (merge
+                                  {:pointer-events "box-none"
+                                   :style          (styles/content-container bottom-value)}
+                                  (when-not disable-drag?
+                                    (pan-handlers
+                                     (swipe-pan-responder {:bottom-value  bottom-value
+                                                           :opacity-value opacity-value
+                                                           :height        @content-height
+                                                           :close-sheet   close-sheet}))))
+             [react/view {:style styles/content-header}
+              [react/view styles/handle]]
+             [react/animated-view {:on-layout
+                                   (fn [evt]
+                                     (let [height (styles/container-height
+                                                   (->> evt .-nativeEvent .-layout .-height))]
+                                       (reset! content-height height)
+                                       (on-open {:bottom-value     bottom-value
+                                                 :opacity-value    opacity-value
+                                                 :height           height
+                                                 :internal-visible internal-visible})))}
+              [content]]]]]]]))))