Compare commits
7
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Omar Basem
|
db6e36961f | ||
|
Omar Basem
|
51843e0b41 | ||
|
Omar Basem
|
bc3e3d30bd | ||
|
Omar Basem
|
9f9124aa0b | ||
|
Omar Basem
|
33674861d0 | ||
|
Omar Basem
|
32d8a52acf | ||
|
Omar Basem
|
d3635b7c91 |
@@ -1,12 +1,12 @@
|
||||
(ns react-native.gesture
|
||||
(:require ["react-native-gesture-handler" :refer
|
||||
(Gesture
|
||||
GestureDetector
|
||||
RectButton
|
||||
Swipeable
|
||||
TouchableWithoutFeedback
|
||||
gestureHandlerRootHOC
|
||||
FlatList)]
|
||||
GestureDetector
|
||||
RectButton
|
||||
Swipeable
|
||||
TouchableWithoutFeedback
|
||||
gestureHandlerRootHOC
|
||||
FlatList)]
|
||||
[react-native.flat-list :as rn-flat-list]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
(defn gesture-pan [] (.Pan ^js Gesture))
|
||||
|
||||
(defn gesture-pinch [] (.Pinch ^js Gesture))
|
||||
|
||||
(defn on-touches-down [gesture handler] (.onTouchesDown ^js gesture handler))
|
||||
(defn on-begin [gesture handler] (.onBegin ^js gesture handler))
|
||||
|
||||
(defn on-start [gesture handler] (.onStart ^js gesture handler))
|
||||
@@ -57,15 +57,15 @@
|
||||
[{:keys [render-left-actions render-right-actions] :as props} & children]
|
||||
(into [swipeable-component
|
||||
(cond-> props
|
||||
render-left-actions
|
||||
(assoc :render-left-actions
|
||||
(fn [& args]
|
||||
(reagent/as-element (apply render-left-actions args))))
|
||||
render-left-actions
|
||||
(assoc :render-left-actions
|
||||
(fn [& args]
|
||||
(reagent/as-element (apply render-left-actions args))))
|
||||
|
||||
render-right-actions
|
||||
(assoc :render-right-actions
|
||||
(fn [& args]
|
||||
(reagent/as-element (apply render-right-actions args)))))]
|
||||
render-right-actions
|
||||
(assoc :render-right-actions
|
||||
(fn [& args]
|
||||
(reagent/as-element (apply render-right-actions args)))))]
|
||||
children))
|
||||
|
||||
(def gesture-flat-list (reagent/adapt-react-class FlatList))
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
["@react-native-community/blur" :as blur]
|
||||
["react-native-reanimated" :default reanimated :refer
|
||||
(useSharedValue useAnimatedStyle
|
||||
useAnimatedGestureHandler
|
||||
withTiming
|
||||
withDelay
|
||||
withSpring
|
||||
|
||||
@@ -243,3 +243,4 @@
|
||||
(when (and (not @transparent?) (not landscape?))
|
||||
[bottom-view/bottom-view messages index scroll-index insets animations derived
|
||||
item-width atoms])]))]))])
|
||||
|
||||
|
||||
@@ -41,13 +41,13 @@
|
||||
:size 32} :i/reaction]])
|
||||
|
||||
(defn image-button
|
||||
[chat-id]
|
||||
[chat-id insets]
|
||||
[quo/button
|
||||
{:on-press (fn []
|
||||
(permissions/request-permissions
|
||||
{:permissions [:read-external-storage :write-external-storage]
|
||||
:on-allowed #(rf/dispatch
|
||||
[:open-modal :photo-selector {:chat-id chat-id}])
|
||||
[:open-modal :photo-selector {:insets insets}])
|
||||
:on-denied (fn []
|
||||
(background-timer/set-timeout
|
||||
#(utils-old/show-popup (i18n/label :t/error)
|
||||
@@ -122,7 +122,7 @@
|
||||
(when (and (not @input/recording-audio?)
|
||||
(nil? (get @input/reviewing-audio-filepath chat-id)))
|
||||
[:<>
|
||||
[image-button chat-id]
|
||||
[image-button chat-id insets]
|
||||
[rn/view {:width 12}]
|
||||
[reactions-button]
|
||||
[rn/view {:flex 1}]
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
(ns status-im2.contexts.chat.photo-selector.view
|
||||
(:require
|
||||
[react-native.gesture :as gesture]
|
||||
[react-native.navigation :as navigation]
|
||||
[react-native.platform :as platform]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[status-im2.constants :as constants]
|
||||
[utils.i18n :as i18n]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[oops.core :refer [oget]]
|
||||
[quo2.components.notifications.info-count :as info-count]
|
||||
[quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
@@ -15,6 +18,8 @@
|
||||
[quo.react]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(def ^:const drag-threshold 100)
|
||||
|
||||
(defn on-press-confirm-selection
|
||||
[selected]
|
||||
(rf/dispatch [:chat.ui/clear-sending-images])
|
||||
@@ -101,50 +106,162 @@
|
||||
[quo/icon (if photos? :i/chevron-down :i/chevron-up)
|
||||
{:color (colors/theme-colors colors/neutral-100 colors/white)}]]])
|
||||
|
||||
(defn drag-gesture
|
||||
[translate-y opacity scroll-enabled curr-scroll]
|
||||
(->
|
||||
(gesture/gesture-pan)
|
||||
(gesture/enabled true)
|
||||
;(gesture/max-pointers 1)
|
||||
;(gesture/on-touches-down (fn [e] (println "ONTOUCHDOWN " e)))
|
||||
(gesture/on-begin (fn [e] (println "beging gesture" @scroll-enabled e)))
|
||||
(gesture/on-start (fn [e] (println "lkk" (oget e "velocityY"))
|
||||
(when (< (oget e "velocityY") 0)
|
||||
(println "reset!00")
|
||||
(reset! scroll-enabled true))))
|
||||
(gesture/on-update (fn [e]
|
||||
(let [translation (oget e "translationY")
|
||||
progress (Math/abs (/ translation drag-threshold))]
|
||||
(println "update gesture")
|
||||
(when (pos? translation)
|
||||
(reanimated/set-shared-value translate-y translation)
|
||||
(reanimated/set-shared-value opacity (- 1 (/ progress 5))))
|
||||
;(anim/set-val (if x? pan-x pan-y) translation)
|
||||
;(anim/set-val opacity (- 1 progress))
|
||||
;(anim/set-val layout (* progress -20))
|
||||
)))
|
||||
(gesture/on-end (fn [e]
|
||||
(println "endx")
|
||||
(if (> (oget e "translationY") drag-threshold)
|
||||
(do
|
||||
;(anim/animate background-color "rgba(0,0,0,0)")
|
||||
;(anim/animate opacity 0)
|
||||
(reanimated/set-shared-value opacity (reanimated/with-timing 0 (clj->js {:duration 100})))
|
||||
(rf/dispatch [:navigate-back])
|
||||
)
|
||||
(do
|
||||
(reanimated/set-shared-value opacity (reanimated/with-timing 1))
|
||||
(reanimated/set-shared-value translate-y (reanimated/with-timing 0))
|
||||
(reset! scroll-enabled true)
|
||||
;#(reset! set-full-height? true)
|
||||
;(anim/animate (if x? pan-x pan-y) 0)
|
||||
;(anim/animate opacity 1)
|
||||
;(anim/animate layout 0)
|
||||
))))
|
||||
(gesture/on-finalize (fn [e]
|
||||
(println "aaa" e)
|
||||
(when (and (>= (oget e "velocityY") 0) (<= @curr-scroll 0))
|
||||
(println "reset!111" @curr-scroll)
|
||||
(reset! scroll-enabled false))
|
||||
))))
|
||||
|
||||
(defn on-scroll
|
||||
[e scroll-enabled curr-scroll flat-list-ref]
|
||||
(let [y (oget e "nativeEvent.contentOffset.y")]
|
||||
;(println "yyy" y)
|
||||
(reset! curr-scroll y)
|
||||
;(when platform/android?
|
||||
; (when (<= y 0)
|
||||
; (println "falsese")
|
||||
; ;(reset! scroll-enabled false)
|
||||
; ))
|
||||
))
|
||||
|
||||
;(defn on-scroll-end-drag
|
||||
; [e scroll-enabled curr-scroll flat-list-ref]
|
||||
; (let [y (oget e "nativeEvent.contentOffset.y")]
|
||||
; ;(println "yyykkk" y)
|
||||
; (reset! curr-scroll y)
|
||||
; (when (<= y 0)
|
||||
; (println "falsese")
|
||||
; ;(reset! scroll-enabled false)
|
||||
; )))
|
||||
|
||||
(defn photo-selector
|
||||
[]
|
||||
[:f>
|
||||
(let [temporary-selected (reagent/atom [])] ; used when switching albums
|
||||
(let [{:keys [insets]} (rf/sub [:get-screen-params])
|
||||
temporary-selected (reagent/atom [])
|
||||
scroll-enabled (reagent/atom true)
|
||||
curr-scroll (atom 0)
|
||||
flat-list-ref (atom nil)] ; used when switching albums
|
||||
(fn []
|
||||
(let [selected (reagent/atom []) ; currently selected
|
||||
selected-images (rf/sub [:chats/sending-image]) ; already selected and dispatched
|
||||
selected-album (or (rf/sub [:camera-roll/selected-album]) (i18n/label :t/recent))]
|
||||
selected-album (or (rf/sub [:camera-roll/selected-album]) (i18n/label :t/recent))
|
||||
opacity (reanimated/use-shared-value 0)
|
||||
translate-y (reanimated/use-shared-value 0)]
|
||||
(rn/use-effect
|
||||
(fn []
|
||||
(rf/dispatch [:chat.ui/camera-roll-get-photos 20 nil selected-album])
|
||||
(if (seq selected-images)
|
||||
(reset! selected (vec (vals selected-images)))
|
||||
(reset! selected @temporary-selected)))
|
||||
[selected-album])
|
||||
[safe-area/consumer
|
||||
(fn [insets]
|
||||
(let [window-width (:width (rn/get-window))
|
||||
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])]
|
||||
[rn/view {:style {:flex 1}}
|
||||
[rn/view
|
||||
{:style style/buttons-container}
|
||||
(when platform/android?
|
||||
[rn/touchable-opacity
|
||||
{:active-opacity 1
|
||||
:on-press #(rf/dispatch [:navigate-back])
|
||||
:style (style/close-button-container)}
|
||||
[quo/icon :i/close
|
||||
{:size 20 :color (colors/theme-colors colors/black colors/white)}]])
|
||||
[album-title true selected-album selected temporary-selected]
|
||||
[clear-button selected]]
|
||||
[rn/flat-list
|
||||
{:key-fn identity
|
||||
:render-fn image
|
||||
:render-data {:window-width window-width :selected selected}
|
||||
:data camera-roll-photos
|
||||
:num-columns 3
|
||||
:content-container-style {:width "100%"
|
||||
:padding-bottom (+ (:bottom insets) 100)
|
||||
:padding-top 80}
|
||||
:on-end-reached #(rf/dispatch [:camera-roll/on-end-reached end-cursor
|
||||
selected-album loading?
|
||||
has-next-page?])}]
|
||||
[bottom-gradient selected-images insets selected]]))])))])
|
||||
(fn []
|
||||
(reanimated/animate-shared-value-with-delay-default-easing opacity 1 300 (if platform/ios? 300 100))
|
||||
(rf/dispatch [:chat.ui/camera-roll-get-photos 20 nil selected-album])
|
||||
(if (seq selected-images)
|
||||
(reset! selected (vec (vals selected-images)))
|
||||
(reset! selected @temporary-selected)))
|
||||
[selected-album])
|
||||
(let [window-width (:width (rn/get-window))
|
||||
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])]
|
||||
[rn/view {:style {:flex 1
|
||||
:padding-top (if platform/ios? (navigation/status-bar-height) (+ (navigation/status-bar-height) 20))}}
|
||||
[reanimated/view {:style (reanimated/apply-animations-to-style {:opacity opacity}
|
||||
{:background-color "rgba(9, 16, 28, 0.7)"
|
||||
:position :absolute
|
||||
:top 0
|
||||
:bottom 0
|
||||
:left 0
|
||||
:right 0})}]
|
||||
[gesture/gesture-detector {:gesture (drag-gesture translate-y opacity scroll-enabled curr-scroll)}
|
||||
[reanimated/view {:style (reanimated/apply-animations-to-style
|
||||
{:transform [{:translateY translate-y}]}
|
||||
{:margin-top 0 :background-color :white
|
||||
:border-top-left-radius 20
|
||||
:border-top-right-radius 20
|
||||
:overflow :hidden})}
|
||||
[rn/view
|
||||
{:style style/buttons-container}
|
||||
(when true
|
||||
[rn/touchable-opacity
|
||||
{:active-opacity 1
|
||||
:on-press (fn []
|
||||
(reanimated/set-shared-value opacity (reanimated/with-timing 0 (clj->js {:duration 100})))
|
||||
(rf/dispatch [:navigate-back]))
|
||||
:style (style/close-button-container)}
|
||||
[quo/icon :i/close
|
||||
{:size 20 :color (colors/theme-colors colors/black colors/white)}]])
|
||||
[album-title true selected-album selected temporary-selected]
|
||||
[clear-button selected]]
|
||||
;[rn/view {:style {:flex 1
|
||||
; :background-color :red
|
||||
; :position :absolute
|
||||
; :top 0
|
||||
; :left 0
|
||||
; :right 0
|
||||
; :bottom 0
|
||||
; :width "100%"
|
||||
; :height "100%"
|
||||
; :z-index 10}}]
|
||||
[gesture/flat-list
|
||||
{:key-fn identity
|
||||
:ref #(reset! flat-list-ref %)
|
||||
;:on-handler-state-change (fn [e] (println "ayo" (oget e "nativeEvent")))
|
||||
;:on-gesture-event (fn [e] (println "ayo2" (oget e "nativeEvent")))
|
||||
:render-fn image
|
||||
;:scroll-event-throttle 8
|
||||
:render-data {:window-width window-width :selected selected}
|
||||
:data camera-roll-photos
|
||||
:num-columns 3
|
||||
:content-container-style {:width "100%"
|
||||
:padding-bottom (+ (:bottom insets) 100)
|
||||
:padding-top 80}
|
||||
;:onMomentumScrollEnd (fn [e] (println "kkk" (oget e "nativeEvent")))
|
||||
:on-scroll (fn [e] (on-scroll e scroll-enabled curr-scroll flat-list-ref))
|
||||
;:on-scroll-end-drag (fn [e] (on-scroll-end-drag e scroll-enabled curr-scroll flat-list-ref))
|
||||
;:on-scroll-end-drag (fn [e] (on-scroll e scroll-enabled curr-scroll flat-list-ref))
|
||||
:scroll-enabled @scroll-enabled
|
||||
:on-end-reached #(rf/dispatch [:camera-roll/on-end-reached end-cursor
|
||||
selected-album loading?
|
||||
has-next-page?])}]
|
||||
[bottom-gradient selected-images insets selected]]]
|
||||
]))))])
|
||||
|
||||
@@ -24,102 +24,106 @@
|
||||
|
||||
(def transparent-screen-options
|
||||
(merge
|
||||
{:topBar {:visible false}
|
||||
:modalPresentationStyle :overCurrentContext
|
||||
:layout {:componentBackgroundColor :transparent
|
||||
:orientation :portrait
|
||||
:backgroundColor :transparent}}
|
||||
(if platform/android?
|
||||
{:navigationBar {:backgroundColor colors/neutral-100}
|
||||
:statusBar {:backgroundColor :transparent
|
||||
:style :light
|
||||
:drawBehind true}}
|
||||
{:statusBar {:style :light}})))
|
||||
{:topBar {:visible false}
|
||||
:modalPresentationStyle :overCurrentContext
|
||||
:layout {:componentBackgroundColor :transparent
|
||||
:orientation :portrait
|
||||
:backgroundColor :transparent}}
|
||||
(if platform/android?
|
||||
{:navigationBar {:backgroundColor colors/neutral-100}
|
||||
:statusBar {:backgroundColor :transparent
|
||||
:style :light
|
||||
:drawBehind true}}
|
||||
{:statusBar {:style :light}})))
|
||||
|
||||
(defn screens
|
||||
[]
|
||||
(concat
|
||||
(old-screens/screens)
|
||||
[{:name :intro
|
||||
:options {:topBar {:visible false}}
|
||||
:insets {:top false}
|
||||
:component intro/view}
|
||||
(old-screens/screens)
|
||||
[{:name :intro
|
||||
:options {:topBar {:visible false}}
|
||||
:insets {:top false}
|
||||
:component intro/view}
|
||||
|
||||
{:name :activity-center
|
||||
:insets {:top false}
|
||||
:options transparent-screen-options
|
||||
:component activity-center/view}
|
||||
{:name :activity-center
|
||||
:insets {:top false}
|
||||
:options transparent-screen-options
|
||||
:component activity-center/view}
|
||||
|
||||
{:name :shell-stack
|
||||
:insets {:top false}
|
||||
:component shell/shell-stack}
|
||||
{:name :shell-stack
|
||||
:insets {:top false}
|
||||
:component shell/shell-stack}
|
||||
|
||||
{:name :chat
|
||||
:options {:topBar {:visible false}}
|
||||
:component chat/chat}
|
||||
{:name :chat
|
||||
:options {:topBar {:visible false}}
|
||||
:component chat/chat}
|
||||
|
||||
{:name :lightbox
|
||||
:insets {:top false :bottom false}
|
||||
:options {:topBar {:visible false}
|
||||
:statusBar {:backgroundColor :transparent
|
||||
:style :light
|
||||
:animate true
|
||||
:drawBehind true
|
||||
:translucent true}
|
||||
:navigationBar {:backgroundColor colors/black}
|
||||
:layout {:componentBackgroundColor :transparent
|
||||
:backgroundColor :transparent}
|
||||
:animations {:push {:sharedElementTransitions [{:fromId :shared-element
|
||||
:toId :shared-element
|
||||
:interpolation {:type :decelerate
|
||||
:factor 1.5}}]}
|
||||
:pop {:sharedElementTransitions [{:fromId :shared-element
|
||||
:toId :shared-element
|
||||
:interpolation {:type
|
||||
:decelerate
|
||||
:factor 1.5}}]}}}
|
||||
:component lightbox/lightbox}
|
||||
{:name :photo-selector
|
||||
:options {:topBar {:visible false}}
|
||||
:component photo-selector/photo-selector}
|
||||
{:name :lightbox
|
||||
:insets {:top false :bottom false}
|
||||
:options {:topBar {:visible false}
|
||||
:statusBar {:backgroundColor :transparent
|
||||
:style :light
|
||||
:animate true
|
||||
:drawBehind true
|
||||
:translucent true}
|
||||
:navigationBar {:backgroundColor colors/black}
|
||||
:layout {:componentBackgroundColor :transparent
|
||||
:backgroundColor :transparent}
|
||||
:animations {:push {:sharedElementTransitions [{:fromId :shared-element
|
||||
:toId :shared-element
|
||||
:interpolation {:type :decelerate
|
||||
:factor 1.5}}]}
|
||||
:pop {:sharedElementTransitions [{:fromId :shared-element
|
||||
:toId :shared-element
|
||||
:interpolation {:type
|
||||
:decelerate
|
||||
:factor 1.5}}]}}}
|
||||
:component lightbox/lightbox}
|
||||
{:name :photo-selector
|
||||
:insets {:top false}
|
||||
:options {:topBar {:visible false}
|
||||
:layout {:componentBackgroundColor :transparent
|
||||
:backgroundColor :transparent}
|
||||
:modalPresentationStyle :overCurrentContext}
|
||||
:component photo-selector/photo-selector}
|
||||
|
||||
{:name :album-selector
|
||||
:options {:topBar {:visible false}
|
||||
:modalPresentationStyle (if platform/ios? :overCurrentContext :none)}
|
||||
:component album-selector/album-selector}
|
||||
{:name :album-selector
|
||||
:options {:topBar {:visible false}
|
||||
:modalPresentationStyle (if platform/ios? :overCurrentContext :none)}
|
||||
:component album-selector/album-selector}
|
||||
|
||||
{:name :new-contact
|
||||
:options {:topBar {:visible false}}
|
||||
:component add-new-contact/new-contact}
|
||||
{:name :new-contact
|
||||
:options {:topBar {:visible false}}
|
||||
:component add-new-contact/new-contact}
|
||||
|
||||
{:name :discover-communities
|
||||
:options {:topBar {:visible false}}
|
||||
:component communities.discover/discover}
|
||||
{:name :discover-communities
|
||||
:options {:topBar {:visible false}}
|
||||
:component communities.discover/discover}
|
||||
|
||||
{:name :community-overview
|
||||
:options {:topBar {:visible false}}
|
||||
:component communities.overview/overview}
|
||||
{:name :community-overview
|
||||
:options {:topBar {:visible false}}
|
||||
:component communities.overview/overview}
|
||||
|
||||
{:name :settings-syncing
|
||||
:insets {:bottom true}
|
||||
:options {:topBar {:title {:text (i18n/label :t/syncing)}}}
|
||||
:component settings-syncing/views}
|
||||
{:name :settings-syncing
|
||||
:insets {:bottom true}
|
||||
:options {:topBar {:title {:text (i18n/label :t/syncing)}}}
|
||||
:component settings-syncing/views}
|
||||
|
||||
;; Onboarding
|
||||
{:name :profiles
|
||||
:insets {:top false}
|
||||
:component profiles/views}
|
||||
;; Onboarding
|
||||
{:name :profiles
|
||||
:insets {:top false}
|
||||
:component profiles/views}
|
||||
|
||||
;; Onboarding - new to Status
|
||||
{:name :new-to-status
|
||||
:options {:statusBar {:style :light}
|
||||
:topBar {:visible false}
|
||||
:navigationBar {:backgroundColor colors/black}}
|
||||
:insets {:top false}
|
||||
:component new-to-status/new-to-status}]
|
||||
;; Onboarding - new to Status
|
||||
{:name :new-to-status
|
||||
:options {:statusBar {:style :light}
|
||||
:topBar {:visible false}
|
||||
:navigationBar {:backgroundColor colors/black}}
|
||||
:insets {:top false}
|
||||
:component new-to-status/new-to-status}]
|
||||
|
||||
(when config/quo-preview-enabled?
|
||||
quo.preview/screens)
|
||||
(when config/quo-preview-enabled?
|
||||
quo.preview/screens)
|
||||
|
||||
(when config/quo-preview-enabled?
|
||||
quo.preview/main-screens)))
|
||||
(when config/quo-preview-enabled?
|
||||
quo.preview/main-screens)))
|
||||
|
||||
Reference in New Issue
Block a user