diff --git a/src/react_native/gesture.cljs b/src/react_native/gesture.cljs index 2811637fa6..bd7aa2aa15 100644 --- a/src/react_native/gesture.cljs +++ b/src/react_native/gesture.cljs @@ -76,3 +76,22 @@ [gesture-flat-list (rn-flat-list/base-list-props props)]) (def scroll-view (reagent/adapt-react-class ScrollView)) + + +;;; Custom gesture section-list +(defn- flatten-sections + [sections] + (mapcat (fn [{:keys [title data]}] + (into [{:title title :header? true}] data)) + sections)) + +(defn section-list + [{:keys [sections render-section-header-fn render-fn] :as props}] + (let [data (flatten-sections sections)] + [flat-list + (merge props + {:data data + :render-fn (fn [item] + (if (:header? item) + (render-section-header-fn item) + (render-fn item)))})])) diff --git a/src/status_im/ui2/screens/chat/components/new_chat/view.cljs b/src/status_im/ui2/screens/chat/components/new_chat/view.cljs index a3ea31a152..13044b87ef 100644 --- a/src/status_im/ui2/screens/chat/components/new_chat/view.cljs +++ b/src/status_im/ui2/screens/chat/components/new_chat/view.cljs @@ -3,6 +3,7 @@ [quo2.core :as quo2] [quo2.foundations.colors :as quo2.colors] [re-frame.core :as re-frame] + [react-native.gesture :as gesture] [status-im2.constants :as constants] [utils.i18n :as i18n] [react-native.core :as rn] @@ -58,7 +59,7 @@ item]))) (defn contact-selection-list - [] + [{:keys [scroll-enabled on-scroll]}] [:f> (fn [] (let [contacts (rf/sub [:contacts/sorted-and-grouped-by-first-letter]) @@ -97,13 +98,15 @@ {:style {:flex 1}} (if no-contacts? [no-contacts-view] - [rn/section-list + [gesture/section-list {:key-fn :title :sticky-section-headers-enabled false :sections (rf/sub [:contacts/filtered-active-sections]) :render-section-header-fn contact-list/contacts-section-header :content-container-style {:padding-bottom 70} - :render-fn contact-item-render}])] + :render-fn contact-item-render + :scroll-enabled @scroll-enabled + :on-scroll on-scroll}])] (when contacts-selected? [button/button {:type :primary diff --git a/src/status_im2/common/bottom_sheet_screen/view.cljs b/src/status_im2/common/bottom_sheet_screen/view.cljs index f7b16d508c..b3ae9fd30f 100644 --- a/src/status_im2/common/bottom_sheet_screen/view.cljs +++ b/src/status_im2/common/bottom_sheet_screen/view.cljs @@ -70,14 +70,13 @@ :padding-top padding-top}} (when-not skip-background? [reanimated/view {:style (style/background opacity)}]) - - [reanimated/view {:style (style/main-view translate-y)} - [gesture/gesture-detector - {:gesture (drag-gesture translate-y opacity scroll-enabled curr-scroll)} + [gesture/gesture-detector + {:gesture (drag-gesture translate-y opacity scroll-enabled curr-scroll)} + [reanimated/view {:style (style/main-view translate-y)} [rn/view {:style style/handle-container} - [rn/view {:style (style/handle)}]]] - [content - {:insets insets - :close close - :scroll-enabled @scroll-enabled - :on-scroll #(on-scroll % curr-scroll)}]]])))]) + [rn/view {:style (style/handle)}]] + [content + {:insets insets + :close close + :scroll-enabled scroll-enabled + :on-scroll #(on-scroll % curr-scroll)}]]]])))]) diff --git a/src/status_im2/contexts/chat/messages/composer/controls/view.cljs b/src/status_im2/contexts/chat/messages/composer/controls/view.cljs index 97a68353ef..e711c3350f 100644 --- a/src/status_im2/contexts/chat/messages/composer/controls/view.cljs +++ b/src/status_im2/contexts/chat/messages/composer/controls/view.cljs @@ -40,12 +40,12 @@ :size 32} :i/reaction]]) (defn image-button - [bottom-inset] + [insets] [quo/button {:on-press (fn [] (permissions/request-permissions {:permissions [:read-external-storage :write-external-storage] - :on-allowed #(rf/dispatch [:open-modal :photo-selector {:bottom-inset bottom-inset}]) + :on-allowed #(rf/dispatch [:open-modal :photo-selector {:insets insets}]) :on-denied (fn [] (background-timer/set-timeout #(utils-old/show-popup (i18n/label :t/error) @@ -118,7 +118,7 @@ (when (and (not @input/recording-audio?) (nil? (get @input/reviewing-audio-filepath chat-id))) [:<> - [image-button bottom-inset] + [image-button {:bottom bottom-inset}] [rn/view {:width 12}] [reactions-button] [rn/view {:flex 1}] 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 9f9ee0231a..fce76aa3e1 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 @@ -2,6 +2,7 @@ (:require [quo2.core :as quo] [react-native.core :as rn] + [react-native.gesture :as gesture] [utils.i18n :as i18n] [utils.re-frame :as rf] [quo2.foundations.colors :as colors] @@ -50,7 +51,7 @@ (str (:title item) index)) (defn album-selector - [] + [{:keys [scroll-enabled on-scroll]}] [:f> (fn [] (let [albums (rf/sub [:camera-roll/albums]) @@ -60,8 +61,8 @@ (rf/dispatch [:chat.ui/camera-roll-get-albums]) js/undefined)) [rn/view {:style {:padding-top 20}} - [album-title false selected-album] - [rn/section-list + [album-title false] + [gesture/section-list {:data albums :render-fn album :render-data selected-album @@ -70,4 +71,6 @@ :render-section-header-fn section-header :style {:margin-top 12} :content-container-style {:padding-bottom 40} - :key-fn key-fn}]]))]) + :key-fn key-fn + :scroll-enabled @scroll-enabled + :on-scroll on-scroll}]]))]) diff --git a/src/status_im2/contexts/chat/photo_selector/view.cljs b/src/status_im2/contexts/chat/photo_selector/view.cljs index 393d9abdcb..ce03356058 100644 --- a/src/status_im2/contexts/chat/photo_selector/view.cljs +++ b/src/status_im2/contexts/chat/photo_selector/view.cljs @@ -80,41 +80,41 @@ (inc (utils/first-index #(= (:uri item) (:uri %)) @selected))])]) (defn album-title - [photos? selected-album] + [photos? selected temporary-selected insets] (fn [] - [rn/touchable-opacity - {:style (style/title-container) - :active-opacity 1 - :accessibility-label :album-title - :on-press (fn [] - ;; TODO: album-selector issue: - ;; https://github.com/status-im/status-mobile/issues/15398 - (js/alert "currently disabled"))} - ;(if photos? - ; (do - ; (reset! temporary-selected @selected) - ; (rf/dispatch [:open-modal :album-selector {:insets insets}])) - ; (rf/dispatch [:navigate-back])) + (let [selected-album (or (rf/sub [:camera-roll/selected-album]) (i18n/label :t/recent))] + [rn/touchable-opacity + {:style (style/title-container) + :active-opacity 1 + :accessibility-label :album-title + :on-press (fn [] + ;; TODO: album-selector issue: + ;; https://github.com/status-im/status-mobile/issues/15398 + (if photos? + (do + (reset! temporary-selected @selected) + (rf/dispatch [:open-modal :album-selector {:insets insets}])) + (rf/dispatch [:navigate-back])))} - [quo/text - {:weight :medium - :ellipsize-mode :tail - :number-of-lines 1 - :style {:max-width 150}} - selected-album] - [rn/view {:style (style/chevron-container)} - [quo/icon (if photos? :i/chevron-down :i/chevron-up) - {:color (colors/theme-colors colors/neutral-100 colors/white)}]]])) + + [quo/text + {:weight :medium + :ellipsize-mode :tail + :number-of-lines 1 + :style {:max-width 150}} + selected-album] + [rn/view {:style (style/chevron-container)} + [quo/icon (if photos? :i/chevron-down :i/chevron-up) + {:color (colors/theme-colors colors/neutral-100 colors/white)}]]]))) (defn photo-selector [{:keys [scroll-enabled on-scroll]}] [:f> - (let [{:keys [insets]} (rf/sub [:get-screen-params]) ; TODO: - ; https://github.com/status-im/status-mobile/issues/15535 - temporary-selected (reagent/atom [])] ; used when switching albums + (let [temporary-selected (reagent/atom []) + {:keys [insets]} (rf/sub [:get-screen-params])] ; used when switching albums (fn [] (let [selected (reagent/atom []) ; currently selected - selected-images (rf/sub [:chats/sending-image]) ; already selected and dispatched + selected-images (rf/sub [:chats/sending-image]) selected-album (or (rf/sub [:camera-roll/selected-album]) (i18n/label :t/recent))] (rn/use-effect (fn [] @@ -130,10 +130,10 @@ 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])] - [:<> + [rn/view {:style {:flex 1}} [rn/view {:style style/buttons-container} - [album-title true selected-album selected temporary-selected] + [album-title true selected temporary-selected insets] [clear-button selected]] [gesture/flat-list {:key-fn identity @@ -145,7 +145,7 @@ :padding-bottom (+ (:bottom insets) 100) :padding-top 64} :on-scroll on-scroll - :scroll-enabled scroll-enabled + :scroll-enabled @scroll-enabled :on-end-reached #(rf/dispatch [:camera-roll/on-end-reached end-cursor selected-album loading? has-next-page?])}] diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 49f86f3d2e..869881d18b 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -1,6 +1,5 @@ (ns status-im2.navigation.screens (:require - [react-native.platform :as platform] [status-im2.config :as config] [status-im2.contexts.activity-center.view :as activity-center] [status-im2.contexts.add-new-contact.views :as add-new-contact] @@ -67,7 +66,7 @@ :component photo-selector/photo-selector} {:name :album-selector - :options {:modalPresentationStyle (if platform/ios? :overCurrentContext :none)} + :options {:sheet? true} :component album-selector/album-selector} {:name :new-contact