status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: album selector animation (#16533) 

* feat: album selector animation
This commit is contained in:
Omar Basem 2023-07-11 15:16:24 +04:00 committed by GitHub
parent 7350c88920
commit 704b160964
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 89 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im2/common/bottom_sheet_screen/style.cljs
View File

@ -30,7 +30,7 @@
:right 0
:top 0
:height 20
:z-index 1
:z-index 2
:position :absolute
:justify-content :center
:align-items :center})

14
src/status_im2/contexts/chat/photo_selector/album_selector/style.cljs
View File

@ -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?]

43
src/status_im2/contexts/chat/photo_selector/album_selector/view.cljs
View File

@ -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])

89
src/status_im2/contexts/chat/photo_selector/view.cljs
View File

@ -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?]]]))]))