Compute bottom sheet height dynamically

status-im · Sep 6, 2019 · 59830ad · 59830ad
1 parent cd669c3
commit 59830ad
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/src/status_im/ui/screens/about_app/views.cljs b/src/status_im/ui/screens/about_app/views.cljs
@@ -43,13 +43,12 @@
 (views/defview learn-more-sheet []
   (views/letsubs [{:keys [title content]} [:bottom-sheet/options]]
     [react/view {:style {:padding-left 16 :padding-top 16
-                         :padding-right 34 :padding-bottom 28}}
+                         :padding-right 34 :padding-bottom 0}}
      [react/view {:style {:align-items :center :flex-direction :row :margin-bottom 16}}
       [vector-icons/icon :main-icons/info {:color colors/blue
                                            :container-style {:margin-right 13}}]
       [react/text {:style styles/learn-more-title} title]]
      [react/text {:style styles/learn-more-text} content]]))
 
 (def learn-more
-  {:content learn-more-sheet
-   :content-height 160})
+  {:content learn-more-sheet})
diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs
@@ -30,6 +30,20 @@
 
 (defonce initial-view-id (atom nil))
 
+(defn bottom-sheet-comp [opts height-atom]
+  ;; We compute bottom sheet height dynamically by rendering it
+  ;; on an invisible view; then, if height is already available
+  ;; (either because it is statically provided or computed),
+  ;; we render the sheet itself
+  (if (or (not @height-atom) (= 0 @height-atom))
+    [react/view {:style {:position :absolute :opacity 0}
+                 :on-layout (fn [e]
+                              (let [h (-> e .-nativeEvent .-layout .-height)]
+                                (reset! height-atom h)))}
+     (when (:content opts)
+       [(:content opts)])]
+    [bottom-sheet/bottom-sheet (assoc opts :content-height @height-atom)]))
+
 (views/defview bottom-sheet []
   (views/letsubs [{:keys [show? view]} [:bottom-sheet]]
     (let [opts (cond-> {:show?     show?
@@ -63,9 +77,9 @@
                  (merge home.sheet/group-chat-actions)
 
                  (= view :recover-sheet)
-                 (merge recover.views/bottom-sheet))]
-
-      [bottom-sheet/bottom-sheet opts])))
+                 (merge recover.views/bottom-sheet))
+          height-atom (reagent/atom (if (:content-height opts) (:content-height opts) nil))]
+      [bottom-sheet-comp opts height-atom])))
 
 (defn reset-component-on-mount [view-id component two-pane?]
   (when (and @initial-view-id