diff --git a/src/status_im2/common/bottom_sheet_screen/style.cljs b/src/status_im2/common/bottom_sheet_screen/style.cljs index f7b8cff8a4..8ec937d0bf 100644 --- a/src/status_im2/common/bottom_sheet_screen/style.cljs +++ b/src/status_im2/common/bottom_sheet_screen/style.cljs @@ -30,7 +30,7 @@ :right 0 :top 0 :height 20 - :z-index 1 + :z-index 2 :position :absolute :justify-content :center :align-items :center}) diff --git a/src/status_im2/contexts/chat/photo_selector/album_selector/style.cljs b/src/status_im2/contexts/chat/photo_selector/album_selector/style.cljs index f73b9f7246..b44d727ff9 100644 --- a/src/status_im2/contexts/chat/photo_selector/album_selector/style.cljs +++ b/src/status_im2/contexts/chat/photo_selector/album_selector/style.cljs @@ -1,5 +1,17 @@ (ns status-im2.contexts.chat.photo-selector.album-selector.style - (:require [quo2.foundations.colors :as colors])) + (:require [quo2.foundations.colors :as colors] + [react-native.reanimated :as reanimated])) + +(defn selector-container + [top] + (reanimated/apply-animations-to-style {:top top} + {:position :absolute + :z-index 1 + :background-color (colors/theme-colors + colors/white + colors/neutral-100) + :left 0 + :right 0})) (defn album-container [selected?] diff --git a/src/status_im2/contexts/chat/photo_selector/album_selector/view.cljs b/src/status_im2/contexts/chat/photo_selector/album_selector/view.cljs index 26b420e7e8..0fd1edf929 100644 --- a/src/status_im2/contexts/chat/photo_selector/album_selector/view.cljs +++ b/src/status_im2/contexts/chat/photo_selector/album_selector/view.cljs @@ -3,19 +3,21 @@ [quo2.core :as quo] [react-native.core :as rn] [react-native.gesture :as gesture] + [react-native.reanimated :as reanimated] [utils.i18n :as i18n] [utils.re-frame :as rf] [quo2.foundations.colors :as colors] [status-im2.contexts.chat.photo-selector.album-selector.style :as style])) (defn render-album - [{title :title size :count uri :uri} index _ {:keys [album? selected-album]}] + [{title :title size :count uri :uri} index _ {:keys [album? selected-album top]}] (let [selected? (= selected-album title)] [rn/touchable-opacity {:on-press (fn [] (rf/dispatch [:chat.ui/camera-roll-select-album title]) (rf/dispatch [:photo-selector/get-photos-for-selected-album]) - (reset! album? false)) + (reanimated/animate top (:height (rn/get-window))) + (js/setTimeout #(reset! album? false) 300)) :style (style/album-container selected?) :accessibility-label (str "album-" index)} [rn/image @@ -52,20 +54,27 @@ [item index] (str (:title item) index)) -(defn album-selector - [{:keys [scroll-enabled on-scroll]} album? selected-album] +(defn- f-album-selector + [{:keys [scroll-enabled on-scroll]} album? selected-album top] (let [albums (rf/sub [:camera-roll/albums]) albums-sections [{:title no-title :data (:smart-albums albums)} - {:title (i18n/label :t/my-albums) :data (:my-albums albums)}]] - [gesture/section-list - {:data albums-sections - :sections albums-sections - :render-data {:album? album? :selected-album selected-album} - :render-fn render-album - :sticky-section-headers-enabled false - :render-section-header-fn section-header - :content-container-style {:padding-top 64 - :padding-bottom 40} - :key-fn key-fn - :scroll-enabled @scroll-enabled - :on-scroll on-scroll}])) + {:title (i18n/label :t/my-albums) :data (:my-albums albums)}] + window-height (:height (rn/get-window))] + [reanimated/view {:style (style/selector-container top)} + [gesture/section-list + {:data albums-sections + :sections albums-sections + :render-data {:album? album? :selected-album selected-album :top top} + :render-fn render-album + :sticky-section-headers-enabled false + :render-section-header-fn section-header + :content-container-style {:padding-top 64 + :padding-bottom 40} + :key-fn key-fn + :scroll-enabled @scroll-enabled + :on-scroll on-scroll + :style {:height window-height}}]])) + +(defn album-selector + [sheet album? selected-album top] + [:f> f-album-selector sheet album? selected-album top]) diff --git a/src/status_im2/contexts/chat/photo_selector/view.cljs b/src/status_im2/contexts/chat/photo_selector/view.cljs index 81bacba33e..9fd0cb1db3 100644 --- a/src/status_im2/contexts/chat/photo_selector/view.cljs +++ b/src/status_im2/contexts/chat/photo_selector/view.cljs @@ -1,6 +1,7 @@ (ns status-im2.contexts.chat.photo-selector.view (:require [react-native.gesture :as gesture] + [react-native.reanimated :as reanimated] [react-native.safe-area :as safe-area] [react-native.platform :as platform] [utils.i18n :as i18n] @@ -96,43 +97,51 @@ sending-image (into [] (vals (rf/sub [:chats/sending-image]))) selected-images (reagent/atom sending-image) window-width (:width (rn/get-window))] - (fn [] - (let [camera-roll-photos (rf/sub [:camera-roll/photos]) - end-cursor (rf/sub [:camera-roll/end-cursor]) - loading? (rf/sub [:camera-roll/loading-more]) - has-next-page? (rf/sub [:camera-roll/has-next-page]) - selected-album (or (rf/sub [:camera-roll/selected-album]) (i18n/label :t/recent)) - blur-active? (> @current-scroll min-scroll-to-blur)] - [rn/view {:style {:flex 1 :margin-top -20}} - (if @album? - [album-selector/album-selector sheet album? selected-album] - [:<> - [gesture/flat-list - {:key-fn identity - :render-fn render-image - :render-data {:window-width window-width :selected selected-images} - :data camera-roll-photos - :num-columns 3 - :content-container-style {:width "100%" - :padding-bottom (+ (safe-area/get-bottom) 100) - :padding-top 64} - :on-scroll on-scroll - :scroll-enabled @scroll-enabled - :on-end-reached (fn [] - (when (and (not loading?) has-next-page?) - (rf/dispatch [:photo-selector/camera-roll-loading-more true]) - (rf/dispatch [:photo-selector/get-photos-for-selected-album - end-cursor])))}] - [confirm-button @selected-images sending-image close]]) - [rn/view {:style style/buttons-container} - [quo/dropdown - {:type :blurred - :size 32 - :on-change (fn [] - (swap! album? not) - (reset! current-scroll 0)) - :selected @album? - :blur-active? (and (not @album?) blur-active?) - :override-background-color (when-not @album? :transparent)} - selected-album] - [clear-button @album? selected-images blur-active?]]])))) + [:f> + (fn [] + (let [camera-roll-photos (rf/sub [:camera-roll/photos]) + end-cursor (rf/sub [:camera-roll/end-cursor]) + loading? (rf/sub [:camera-roll/loading-more]) + has-next-page? (rf/sub [:camera-roll/has-next-page]) + selected-album (or (rf/sub [:camera-roll/selected-album]) (i18n/label :t/recent)) + blur-active? (> @current-scroll min-scroll-to-blur) + window-height (:height (rn/get-window)) + top (reanimated/use-shared-value window-height)] + [rn/view {:style {:flex 1 :margin-top -20}} + (when @album? + [album-selector/album-selector sheet album? selected-album top]) + [:<> + [gesture/flat-list + {:key-fn identity + :render-fn render-image + :render-data {:window-width window-width :selected selected-images} + :data camera-roll-photos + :num-columns 3 + :content-container-style {:width "100%" + :padding-bottom (+ (safe-area/get-bottom) 100) + :padding-top 64} + :on-scroll on-scroll + :scroll-enabled @scroll-enabled + :on-end-reached (fn [] + (when (and (not loading?) has-next-page?) + (rf/dispatch [:photo-selector/camera-roll-loading-more true]) + (rf/dispatch [:photo-selector/get-photos-for-selected-album + end-cursor])))}] + [confirm-button @selected-images sending-image close]] + [rn/view {:style style/buttons-container} + [quo/dropdown + {:type :blurred + :size 32 + :on-change (fn [] + (if-not @album? + (do + (reset! album? true) + (reanimated/animate top 0)) + (do + (reanimated/animate top window-height) + (js/setTimeout #(reset! album? false) 300)))) + :selected @album? + :blur-active? (and (not @album?) blur-active?) + :override-background-color (when-not @album? :transparent)} + selected-album] + [clear-button @album? selected-images blur-active?]]]))]))