From a850d3c989073e7d902e717a9527f534e64c5df9 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Mon, 23 Oct 2023 19:27:52 +0530 Subject: [PATCH] chore: native-like draggable mobile menus (#2599) --- packages/mobile/ios/Podfile.lock | 370 +++++++++--------- .../StandardNotes.xcodeproj/project.pbxproj | 13 + .../Components/Menu/MenuSection.tsx | 2 +- .../Components/Modal/useModalAnimation.ts | 11 +- .../Components/Panes/usePaneGesture.ts | 29 +- .../Popover/MobilePopoverContent.tsx | 157 +++++++- .../src/javascripts/Constants/Constants.ts | 16 + .../Hooks/useLifecycleAnimation.ts | 6 +- 8 files changed, 373 insertions(+), 231 deletions(-) diff --git a/packages/mobile/ios/Podfile.lock b/packages/mobile/ios/Podfile.lock index b64516e05..1a3a4892d 100644 --- a/packages/mobile/ios/Podfile.lock +++ b/packages/mobile/ios/Podfile.lock @@ -2,14 +2,14 @@ PODS: - boost (1.76.0) - CocoaAsyncSocket (7.6.5) - DoubleConversion (1.1.6) - - FBLazyVector (0.72.4) - - FBReactNativeSpec (0.72.4): + - FBLazyVector (0.72.5) + - FBReactNativeSpec (0.72.5): - RCT-Folly (= 2021.07.22.00) - - RCTRequired (= 0.72.4) - - RCTTypeSafety (= 0.72.4) - - React-Core (= 0.72.4) - - React-jsi (= 0.72.4) - - ReactCommon/turbomodule/core (= 0.72.4) + - RCTRequired (= 0.72.5) + - RCTTypeSafety (= 0.72.5) + - React-Core (= 0.72.5) + - React-jsi (= 0.72.5) + - ReactCommon/turbomodule/core (= 0.72.5) - Flipper (0.182.0): - Flipper-Folly (~> 2.6) - Flipper-Boost-iOSX (1.76.0.1.11) @@ -95,26 +95,26 @@ PODS: - fmt (~> 6.2.1) - glog - libevent - - RCTRequired (0.72.4) - - RCTTypeSafety (0.72.4): - - FBLazyVector (= 0.72.4) - - RCTRequired (= 0.72.4) - - React-Core (= 0.72.4) - - React (0.72.4): - - React-Core (= 0.72.4) - - React-Core/DevSupport (= 0.72.4) - - React-Core/RCTWebSocket (= 0.72.4) - - React-RCTActionSheet (= 0.72.4) - - React-RCTAnimation (= 0.72.4) - - React-RCTBlob (= 0.72.4) - - React-RCTImage (= 0.72.4) - - React-RCTLinking (= 0.72.4) - - React-RCTNetwork (= 0.72.4) - - React-RCTSettings (= 0.72.4) - - React-RCTText (= 0.72.4) - - React-RCTVibration (= 0.72.4) - - React-callinvoker (0.72.4) - - React-Codegen (0.72.4): + - RCTRequired (0.72.5) + - RCTTypeSafety (0.72.5): + - FBLazyVector (= 0.72.5) + - RCTRequired (= 0.72.5) + - React-Core (= 0.72.5) + - React (0.72.5): + - React-Core (= 0.72.5) + - React-Core/DevSupport (= 0.72.5) + - React-Core/RCTWebSocket (= 0.72.5) + - React-RCTActionSheet (= 0.72.5) + - React-RCTAnimation (= 0.72.5) + - React-RCTBlob (= 0.72.5) + - React-RCTImage (= 0.72.5) + - React-RCTLinking (= 0.72.5) + - React-RCTNetwork (= 0.72.5) + - React-RCTSettings (= 0.72.5) + - React-RCTText (= 0.72.5) + - React-RCTVibration (= 0.72.5) + - React-callinvoker (0.72.5) + - React-Codegen (0.72.5): - DoubleConversion - FBReactNativeSpec - glog @@ -129,11 +129,11 @@ PODS: - React-rncore - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - - React-Core (0.72.4): + - React-Core (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) - - React-Core/Default (= 0.72.4) + - React-Core/Default (= 0.72.5) - React-cxxreact - React-hermes - React-jsi @@ -143,7 +143,7 @@ PODS: - React-utils - SocketRocket (= 0.6.1) - Yoga - - React-Core/CoreModulesHeaders (0.72.4): + - React-Core/CoreModulesHeaders (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) @@ -157,7 +157,7 @@ PODS: - React-utils - SocketRocket (= 0.6.1) - Yoga - - React-Core/Default (0.72.4): + - React-Core/Default (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) @@ -170,23 +170,23 @@ PODS: - React-utils - SocketRocket (= 0.6.1) - Yoga - - React-Core/DevSupport (0.72.4): + - React-Core/DevSupport (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) - - React-Core/Default (= 0.72.4) - - React-Core/RCTWebSocket (= 0.72.4) + - React-Core/Default (= 0.72.5) + - React-Core/RCTWebSocket (= 0.72.5) - React-cxxreact - React-hermes - React-jsi - React-jsiexecutor - - React-jsinspector (= 0.72.4) + - React-jsinspector (= 0.72.5) - React-perflogger - React-runtimeexecutor - React-utils - SocketRocket (= 0.6.1) - Yoga - - React-Core/RCTActionSheetHeaders (0.72.4): + - React-Core/RCTActionSheetHeaders (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) @@ -200,7 +200,7 @@ PODS: - React-utils - SocketRocket (= 0.6.1) - Yoga - - React-Core/RCTAnimationHeaders (0.72.4): + - React-Core/RCTAnimationHeaders (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) @@ -214,7 +214,7 @@ PODS: - React-utils - SocketRocket (= 0.6.1) - Yoga - - React-Core/RCTBlobHeaders (0.72.4): + - React-Core/RCTBlobHeaders (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) @@ -228,7 +228,7 @@ PODS: - React-utils - SocketRocket (= 0.6.1) - Yoga - - React-Core/RCTImageHeaders (0.72.4): + - React-Core/RCTImageHeaders (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) @@ -242,7 +242,7 @@ PODS: - React-utils - SocketRocket (= 0.6.1) - Yoga - - React-Core/RCTLinkingHeaders (0.72.4): + - React-Core/RCTLinkingHeaders (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) @@ -256,7 +256,7 @@ PODS: - React-utils - SocketRocket (= 0.6.1) - Yoga - - React-Core/RCTNetworkHeaders (0.72.4): + - React-Core/RCTNetworkHeaders (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) @@ -270,7 +270,7 @@ PODS: - React-utils - SocketRocket (= 0.6.1) - Yoga - - React-Core/RCTSettingsHeaders (0.72.4): + - React-Core/RCTSettingsHeaders (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) @@ -284,7 +284,7 @@ PODS: - React-utils - SocketRocket (= 0.6.1) - Yoga - - React-Core/RCTTextHeaders (0.72.4): + - React-Core/RCTTextHeaders (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) @@ -298,7 +298,7 @@ PODS: - React-utils - SocketRocket (= 0.6.1) - Yoga - - React-Core/RCTVibrationHeaders (0.72.4): + - React-Core/RCTVibrationHeaders (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) @@ -312,11 +312,11 @@ PODS: - React-utils - SocketRocket (= 0.6.1) - Yoga - - React-Core/RCTWebSocket (0.72.4): + - React-Core/RCTWebSocket (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) - - React-Core/Default (= 0.72.4) + - React-Core/Default (= 0.72.5) - React-cxxreact - React-hermes - React-jsi @@ -326,57 +326,57 @@ PODS: - React-utils - SocketRocket (= 0.6.1) - Yoga - - React-CoreModules (0.72.4): + - React-CoreModules (0.72.5): - RCT-Folly (= 2021.07.22.00) - - RCTTypeSafety (= 0.72.4) - - React-Codegen (= 0.72.4) - - React-Core/CoreModulesHeaders (= 0.72.4) - - React-jsi (= 0.72.4) + - RCTTypeSafety (= 0.72.5) + - React-Codegen (= 0.72.5) + - React-Core/CoreModulesHeaders (= 0.72.5) + - React-jsi (= 0.72.5) - React-RCTBlob - - React-RCTImage (= 0.72.4) - - ReactCommon/turbomodule/core (= 0.72.4) + - React-RCTImage (= 0.72.5) + - ReactCommon/turbomodule/core (= 0.72.5) - SocketRocket (= 0.6.1) - - React-cxxreact (0.72.4): + - React-cxxreact (0.72.5): - boost (= 1.76.0) - DoubleConversion - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) - - React-callinvoker (= 0.72.4) - - React-debug (= 0.72.4) - - React-jsi (= 0.72.4) - - React-jsinspector (= 0.72.4) - - React-logger (= 0.72.4) - - React-perflogger (= 0.72.4) - - React-runtimeexecutor (= 0.72.4) - - React-debug (0.72.4) - - React-hermes (0.72.4): + - React-callinvoker (= 0.72.5) + - React-debug (= 0.72.5) + - React-jsi (= 0.72.5) + - React-jsinspector (= 0.72.5) + - React-logger (= 0.72.5) + - React-perflogger (= 0.72.5) + - React-runtimeexecutor (= 0.72.5) + - React-debug (0.72.5) + - React-hermes (0.72.5): - DoubleConversion - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) - RCT-Folly/Futures (= 2021.07.22.00) - - React-cxxreact (= 0.72.4) + - React-cxxreact (= 0.72.5) - React-jsi - - React-jsiexecutor (= 0.72.4) - - React-jsinspector (= 0.72.4) - - React-perflogger (= 0.72.4) - - React-jsi (0.72.4): + - React-jsiexecutor (= 0.72.5) + - React-jsinspector (= 0.72.5) + - React-perflogger (= 0.72.5) + - React-jsi (0.72.5): - boost (= 1.76.0) - DoubleConversion - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) - - React-jsiexecutor (0.72.4): + - React-jsiexecutor (0.72.5): - DoubleConversion - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) - - React-cxxreact (= 0.72.4) - - React-jsi (= 0.72.4) - - React-perflogger (= 0.72.4) - - React-jsinspector (0.72.4) - - React-logger (0.72.4): + - React-cxxreact (= 0.72.5) + - React-jsi (= 0.72.5) + - React-perflogger (= 0.72.5) + - React-jsinspector (0.72.5) + - React-logger (0.72.5): - glog - react-native-fingerprint-scanner (5.0.0): - React-Core @@ -385,9 +385,9 @@ PODS: - React-Core - react-native-version-info (1.1.1): - React-Core - - react-native-webview (13.3.1): + - react-native-webview (13.6.0): - React-Core - - React-NativeModulesApple (0.72.4): + - React-NativeModulesApple (0.72.5): - hermes-engine - React-callinvoker - React-Core @@ -396,17 +396,17 @@ PODS: - React-runtimeexecutor - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - - React-perflogger (0.72.4) - - React-RCTActionSheet (0.72.4): - - React-Core/RCTActionSheetHeaders (= 0.72.4) - - React-RCTAnimation (0.72.4): + - React-perflogger (0.72.5) + - React-RCTActionSheet (0.72.5): + - React-Core/RCTActionSheetHeaders (= 0.72.5) + - React-RCTAnimation (0.72.5): - RCT-Folly (= 2021.07.22.00) - - RCTTypeSafety (= 0.72.4) - - React-Codegen (= 0.72.4) - - React-Core/RCTAnimationHeaders (= 0.72.4) - - React-jsi (= 0.72.4) - - ReactCommon/turbomodule/core (= 0.72.4) - - React-RCTAppDelegate (0.72.4): + - RCTTypeSafety (= 0.72.5) + - React-Codegen (= 0.72.5) + - React-Core/RCTAnimationHeaders (= 0.72.5) + - React-jsi (= 0.72.5) + - ReactCommon/turbomodule/core (= 0.72.5) + - React-RCTAppDelegate (0.72.5): - RCT-Folly - RCTRequired - RCTTypeSafety @@ -418,54 +418,54 @@ PODS: - React-RCTNetwork - React-runtimescheduler - ReactCommon/turbomodule/core - - React-RCTBlob (0.72.4): + - React-RCTBlob (0.72.5): - hermes-engine - RCT-Folly (= 2021.07.22.00) - - React-Codegen (= 0.72.4) - - React-Core/RCTBlobHeaders (= 0.72.4) - - React-Core/RCTWebSocket (= 0.72.4) - - React-jsi (= 0.72.4) - - React-RCTNetwork (= 0.72.4) - - ReactCommon/turbomodule/core (= 0.72.4) - - React-RCTImage (0.72.4): + - React-Codegen (= 0.72.5) + - React-Core/RCTBlobHeaders (= 0.72.5) + - React-Core/RCTWebSocket (= 0.72.5) + - React-jsi (= 0.72.5) + - React-RCTNetwork (= 0.72.5) + - ReactCommon/turbomodule/core (= 0.72.5) + - React-RCTImage (0.72.5): - RCT-Folly (= 2021.07.22.00) - - RCTTypeSafety (= 0.72.4) - - React-Codegen (= 0.72.4) - - React-Core/RCTImageHeaders (= 0.72.4) - - React-jsi (= 0.72.4) - - React-RCTNetwork (= 0.72.4) - - ReactCommon/turbomodule/core (= 0.72.4) - - React-RCTLinking (0.72.4): - - React-Codegen (= 0.72.4) - - React-Core/RCTLinkingHeaders (= 0.72.4) - - React-jsi (= 0.72.4) - - ReactCommon/turbomodule/core (= 0.72.4) - - React-RCTNetwork (0.72.4): + - RCTTypeSafety (= 0.72.5) + - React-Codegen (= 0.72.5) + - React-Core/RCTImageHeaders (= 0.72.5) + - React-jsi (= 0.72.5) + - React-RCTNetwork (= 0.72.5) + - ReactCommon/turbomodule/core (= 0.72.5) + - React-RCTLinking (0.72.5): + - React-Codegen (= 0.72.5) + - React-Core/RCTLinkingHeaders (= 0.72.5) + - React-jsi (= 0.72.5) + - ReactCommon/turbomodule/core (= 0.72.5) + - React-RCTNetwork (0.72.5): - RCT-Folly (= 2021.07.22.00) - - RCTTypeSafety (= 0.72.4) - - React-Codegen (= 0.72.4) - - React-Core/RCTNetworkHeaders (= 0.72.4) - - React-jsi (= 0.72.4) - - ReactCommon/turbomodule/core (= 0.72.4) - - React-RCTSettings (0.72.4): + - RCTTypeSafety (= 0.72.5) + - React-Codegen (= 0.72.5) + - React-Core/RCTNetworkHeaders (= 0.72.5) + - React-jsi (= 0.72.5) + - ReactCommon/turbomodule/core (= 0.72.5) + - React-RCTSettings (0.72.5): - RCT-Folly (= 2021.07.22.00) - - RCTTypeSafety (= 0.72.4) - - React-Codegen (= 0.72.4) - - React-Core/RCTSettingsHeaders (= 0.72.4) - - React-jsi (= 0.72.4) - - ReactCommon/turbomodule/core (= 0.72.4) - - React-RCTText (0.72.4): - - React-Core/RCTTextHeaders (= 0.72.4) - - React-RCTVibration (0.72.4): + - RCTTypeSafety (= 0.72.5) + - React-Codegen (= 0.72.5) + - React-Core/RCTSettingsHeaders (= 0.72.5) + - React-jsi (= 0.72.5) + - ReactCommon/turbomodule/core (= 0.72.5) + - React-RCTText (0.72.5): + - React-Core/RCTTextHeaders (= 0.72.5) + - React-RCTVibration (0.72.5): - RCT-Folly (= 2021.07.22.00) - - React-Codegen (= 0.72.4) - - React-Core/RCTVibrationHeaders (= 0.72.4) - - React-jsi (= 0.72.4) - - ReactCommon/turbomodule/core (= 0.72.4) - - React-rncore (0.72.4) - - React-runtimeexecutor (0.72.4): - - React-jsi (= 0.72.4) - - React-runtimescheduler (0.72.4): + - React-Codegen (= 0.72.5) + - React-Core/RCTVibrationHeaders (= 0.72.5) + - React-jsi (= 0.72.5) + - ReactCommon/turbomodule/core (= 0.72.5) + - React-rncore (0.72.5) + - React-runtimeexecutor (0.72.5): + - React-jsi (= 0.72.5) + - React-runtimescheduler (0.72.5): - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) @@ -473,31 +473,31 @@ PODS: - React-debug - React-jsi - React-runtimeexecutor - - React-utils (0.72.4): + - React-utils (0.72.5): - glog - RCT-Folly (= 2021.07.22.00) - React-debug - - ReactCommon/turbomodule/bridging (0.72.4): + - ReactCommon/turbomodule/bridging (0.72.5): - DoubleConversion - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) - - React-callinvoker (= 0.72.4) - - React-cxxreact (= 0.72.4) - - React-jsi (= 0.72.4) - - React-logger (= 0.72.4) - - React-perflogger (= 0.72.4) - - ReactCommon/turbomodule/core (0.72.4): + - React-callinvoker (= 0.72.5) + - React-cxxreact (= 0.72.5) + - React-jsi (= 0.72.5) + - React-logger (= 0.72.5) + - React-perflogger (= 0.72.5) + - ReactCommon/turbomodule/core (0.72.5): - DoubleConversion - glog - hermes-engine - RCT-Folly (= 2021.07.22.00) - - React-callinvoker (= 0.72.4) - - React-cxxreact (= 0.72.4) - - React-jsi (= 0.72.4) - - React-logger (= 0.72.4) - - React-perflogger (= 0.72.4) - - RNCAsyncStorage (1.19.2): + - React-callinvoker (= 0.72.5) + - React-cxxreact (= 0.72.5) + - React-jsi (= 0.72.5) + - React-logger (= 0.72.5) + - React-perflogger (= 0.72.5) + - RNCAsyncStorage (1.19.3): - React-Core - RNFileViewer (2.1.5): - React-Core @@ -505,11 +505,13 @@ PODS: - React-Core - RNIap (12.10.5): - React-Core - - RNKeychain (8.0.0): + - RNKeychain (8.1.2): - React-Core - RNPrivacySnapshot (1.0.0): - React-Core - - RNShare (8.2.2): + - RNShare (9.4.1): + - React-Core + - RNStoreReview (0.4.1): - React-Core - SNReactNative (1.0.1): - React-Core @@ -593,6 +595,7 @@ DEPENDENCIES: - RNKeychain (from `../node_modules/react-native-keychain`) - RNPrivacySnapshot (from `../node_modules/react-native-privacy-snapshot`) - RNShare (from `../node_modules/react-native-share`) + - RNStoreReview (from `../node_modules/react-native-store-review`) - "SNReactNative (from `../node_modules/@standardnotes/react-native-utils`)" - TrustKit (= 1.6.5) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) @@ -717,6 +720,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-privacy-snapshot" RNShare: :path: "../node_modules/react-native-share" + RNStoreReview: + :path: "../node_modules/react-native-store-review" SNReactNative: :path: "../node_modules/@standardnotes/react-native-utils" Yoga: @@ -726,8 +731,8 @@ SPEC CHECKSUMS: boost: 57d2868c099736d80fcd648bf211b4431e51a558 CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54 - FBLazyVector: 5d4a3b7f411219a45a6d952f77d2c0a6c9989da5 - FBReactNativeSpec: 3fc2d478e1c4b08276f9dd9128f80ec6d5d85c1f + FBLazyVector: 71803c074f6325f10b5ec891c443b6bbabef0ca7 + FBReactNativeSpec: 448e08a759d29a96e15725ae532445bf4343567c Flipper: 6edb735e6c3e332975d1b17956bcc584eccf5818 Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c Flipper-DoubleConversion: 2dc99b02f658daf147069aad9dbd29d8feb06d30 @@ -744,52 +749,53 @@ SPEC CHECKSUMS: MMKVCore: 89f5c8a66bba2dcd551779dea4d412eeec8ff5bb OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1 - RCTRequired: c0569ecc035894e4a68baecb30fe6a7ea6e399f9 - RCTTypeSafety: e90354072c21236e0bcf1699011e39acd25fea2f - React: a1be3c6dc0a6e949ccd3e659781aa47bbae1868f - React-callinvoker: 1020b33f6cb1a1824f9ca2a86609fbce2a73c6ed - React-Codegen: a0a26badf098d4a779acda922caf74f6ecabed28 - React-Core: 52075b80f10c26f62219d7b5d13d7d8089f027b3 - React-CoreModules: 21abab85d7ad9038ce2b1c33d39e3baaf7dc9244 - React-cxxreact: 4ad1cc861e32fb533dad6ff7a4ea25680fa1c994 - React-debug: 17366a3d5c5d2f5fc04f09101a4af38cb42b54ae - React-hermes: 37377d0a56aa0cf55c65248271866ce3268cde3f - React-jsi: 6de8b0ccc6b765b58e4eee9ee38049dbeaf5c221 - React-jsiexecutor: c7f826e40fa9cab5d37cab6130b1af237332b594 - React-jsinspector: aaed4cf551c4a1c98092436518c2d267b13a673f - React-logger: da1ebe05ae06eb6db4b162202faeafac4b435e77 + RCTRequired: df81ab637d35fac9e6eb94611cfd20f0feb05455 + RCTTypeSafety: 4636e4a36c7c2df332bda6d59b19b41c443d4287 + React: e0cc5197a804031a6c53fb38483c3485fcb9d6f3 + React-callinvoker: 1a635856fe0c3d8b13fccd4ed7e76283b99b0868 + React-Codegen: 78d61f981cccc68a771a598f71621cb7db14b04c + React-Core: 252f8e9ca5a4e91af9b9be58670846d662b1c49f + React-CoreModules: f8b9e91fac7bd5d18729ce961a4978c70b5031cc + React-cxxreact: 70284b32dcd367439d7dae84d9f72660544181b5 + React-debug: ee33d7ba43766d9b10b32561527b57ccfbcb6bd1 + React-hermes: 91f97ea2669dc5847e1f26c243aaad913319c570 + React-jsi: bd68b7779746014f01ea72d1b738809e132d7f1e + React-jsiexecutor: ff70a72027dea5cc7d71cfcc6fad7f599f63987a + React-jsinspector: aef73cbd43b70675f572214d10fa438c89bf11ba + React-logger: 2e4aee3e11b3ec4fa6cfd8004610bbb3b8d6cca4 react-native-fingerprint-scanner: be63e626b31fb951780a5fac5328b065a61a3d6e react-native-mmkv: dea675cf9697ad35940f1687e98e133e1358ef9f react-native-version-info: a106f23009ac0db4ee00de39574eb546682579b9 - react-native-webview: c2b70afb1d910cdd8810375aecc6c2894e2ba061 - React-NativeModulesApple: edb5ace14f73f4969df6e7b1f3e41bef0012740f - React-perflogger: 496a1a3dc6737f964107cb3ddae7f9e265ddda58 - React-RCTActionSheet: 02904b932b50e680f4e26e7a686b33ebf7ef3c00 - React-RCTAnimation: 88feaf0a85648fb8fd497ce749829774910276d6 - React-RCTAppDelegate: 5792ac0f0feccb584765fdd7aa81ea320c4d9b0b - React-RCTBlob: 0dbc9e2a13d241b37d46b53e54630cbad1f0e141 - React-RCTImage: b111645ab901f8e59fc68fbe31f5731bdbeef087 - React-RCTLinking: 3d719727b4c098aad3588aa3559361ee0579f5de - React-RCTNetwork: b44d3580be05d74556ba4efbf53570f17e38f734 - React-RCTSettings: c0c54b330442c29874cd4dae6e94190dc11a6f6f - React-RCTText: 9b9f5589d9b649d7246c3f336e116496df28cfe6 - React-RCTVibration: 691c67f3beaf1d084ceed5eb5c1dddd9afa8591e - React-rncore: 142268f6c92e296dc079aadda3fade778562f9e4 - React-runtimeexecutor: d465ba0c47ef3ed8281143f59605cacc2244d5c7 - React-runtimescheduler: 4941cc1b3cf08b792fbf666342c9fc95f1969035 - React-utils: b79f2411931f9d3ea5781404dcbb2fa8a837e13a - ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d - RNCAsyncStorage: f57e929cd7757f2cb3dd8186d123c09e8281a1ad + react-native-webview: 669ae162965f629a8d6a4bdd3b99a304d36ef1f2 + React-NativeModulesApple: 797bc6078d566eef3fb3f74127e6e1d2e945a15f + React-perflogger: cd8886513f68e1c135a1e79d20575c6489641597 + React-RCTActionSheet: 726d2615ca62a77ce3e2c13d87f65379cdc73498 + React-RCTAnimation: 8f2716b881c37c64858e4ecee0f58bfa57ff9afd + React-RCTAppDelegate: d4a213f29e81682f6b9c7d22f62a2ccab6d125ae + React-RCTBlob: dfaa933231c3497915bbcc9d98fcff7b6b60582c + React-RCTImage: 747e3d7b656a67470f9c234baedb8d41bbc4e745 + React-RCTLinking: 148332b5b0396b280b05534f7d168e560a3bbd5f + React-RCTNetwork: 1d818121a8e678f064de663a6db7aaefc099e53c + React-RCTSettings: 4b95d26ebc88bfd3b6535b2d7904914ff88dbfc2 + React-RCTText: ce4499e4f2d8f85dc4b93ff0559313a016c4f3e2 + React-RCTVibration: 45372e61b35e96d16893540958d156675afbeb63 + React-rncore: a79d1cb3d6c01b358a8aa0b31ccc04ab5f0dbebc + React-runtimeexecutor: 7e31e2bc6d0ecc83d4ba05eadc98401007abc10c + React-runtimescheduler: cc32add98c45c5df18436a6a52a7e1f6edec102c + React-utils: 7a9918a1ffdd39aba67835d42386f592ea3f8e76 + ReactCommon: 91ece8350ebb3dd2be9cef662abd78b6948233c0 + RNCAsyncStorage: c913ede1fa163a71cea118ed4670bbaaa4b511bb RNFileViewer: ce7ca3ac370e18554d35d6355cffd7c30437c592 RNFS: 4ac0f0ea233904cb798630b3c077808c06931688 RNIap: c397f49db45af3b10dca64b2325f21bb8078ad21 - RNKeychain: 4f63aada75ebafd26f4bc2c670199461eab85d94 + RNKeychain: a65256b6ca6ba6976132cc4124b238a5b13b3d9c RNPrivacySnapshot: 8eaf571478a353f2e5184f5c803164f22428b023 - RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c + RNShare: 32e97adc8d8c97d4a26bcdd3c45516882184f8b6 + RNStoreReview: 923b1c888c13469925bf0256dc2c046eab557ce5 SNReactNative: b5e9e529c175c13f3a618e27c76cf3071213d5e1 SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 TrustKit: 073855e3adecd317417bda4ac9e9ac54a2e3b9f2 - Yoga: 3efc43e0d48686ce2e8c60f99d4e6bd349aff981 + Yoga: 86fed2e4d425ee4c6eab3813ba1791101ee153c6 YogaKit: f782866e155069a2cca2517aafea43200b01fd5a PODFILE CHECKSUM: c3b827e3c92cdf3199eddc52083480826e717b88 diff --git a/packages/mobile/ios/StandardNotes.xcodeproj/project.pbxproj b/packages/mobile/ios/StandardNotes.xcodeproj/project.pbxproj index 987426dbe..076e07005 100644 --- a/packages/mobile/ios/StandardNotes.xcodeproj/project.pbxproj +++ b/packages/mobile/ios/StandardNotes.xcodeproj/project.pbxproj @@ -965,6 +965,7 @@ GCC_PREPROCESSOR_DEFINITIONS = ( "DEBUG=1", "$(inherited)", + _LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION, ); GCC_SYMBOLS_PRIVATE_EXTERN = NO; GCC_WARN_64_TO_32_BIT_CONVERSION = YES; @@ -987,6 +988,10 @@ ONLY_ACTIVE_ARCH = YES; OTHER_CFLAGS = "$(inherited)"; OTHER_CPLUSPLUSFLAGS = "$(inherited)"; + OTHER_LDFLAGS = ( + "$(inherited)", + " ", + ); REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; }; @@ -1028,6 +1033,10 @@ "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386; GCC_C_LANGUAGE_STANDARD = gnu99; GCC_NO_COMMON_BLOCKS = YES; + GCC_PREPROCESSOR_DEFINITIONS = ( + "$(inherited)", + _LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION, + ); GCC_WARN_64_TO_32_BIT_CONVERSION = YES; GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; GCC_WARN_UNDECLARED_SELECTOR = YES; @@ -1047,6 +1056,10 @@ MTL_ENABLE_DEBUG_INFO = NO; OTHER_CFLAGS = "$(inherited)"; OTHER_CPLUSPLUSFLAGS = "$(inherited)"; + OTHER_LDFLAGS = ( + "$(inherited)", + " ", + ); REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; VALIDATE_PRODUCT = YES; diff --git a/packages/web/src/javascripts/Components/Menu/MenuSection.tsx b/packages/web/src/javascripts/Components/Menu/MenuSection.tsx index 935481500..1a36a2336 100644 --- a/packages/web/src/javascripts/Components/Menu/MenuSection.tsx +++ b/packages/web/src/javascripts/Components/Menu/MenuSection.tsx @@ -18,7 +18,7 @@ const MenuSection = ({ )} > {title &&
{title}
} -
+
{children}
diff --git a/packages/web/src/javascripts/Components/Modal/useModalAnimation.ts b/packages/web/src/javascripts/Components/Modal/useModalAnimation.ts index 35eb21805..0794f151b 100644 --- a/packages/web/src/javascripts/Components/Modal/useModalAnimation.ts +++ b/packages/web/src/javascripts/Components/Modal/useModalAnimation.ts @@ -17,9 +17,6 @@ const Animations = { }, exit: { keyframes: [ - { - transform: 'translateY(0)', - }, { transform: 'translateY(100%)', }, @@ -81,11 +78,11 @@ const Animations = { }, } -const MobileOptions = { +export const MobileModalAnimationOptions = { easing: IosModalAnimationEasing, duration: 250, fill: 'forwards', -} +} as const const NonMobileOptions = { duration: 75, @@ -102,7 +99,7 @@ export const useModalAnimation = ( open: isOpen, enter: { keyframes: isMobileScreen ? Animations[variant].enter.keyframes : Animations.nonMobile.enter.keyframes, - options: isMobileScreen ? MobileOptions : NonMobileOptions, + options: isMobileScreen ? MobileModalAnimationOptions : NonMobileOptions, initialStyle: { transformOrigin: isMobileScreen ? Animations[variant].enter.transformOrigin @@ -117,7 +114,7 @@ export const useModalAnimation = ( }, exit: { keyframes: isMobileScreen ? Animations[variant].exit.keyframes : Animations.nonMobile.exit.keyframes, - options: isMobileScreen ? MobileOptions : NonMobileOptions, + options: isMobileScreen ? MobileModalAnimationOptions : NonMobileOptions, initialStyle: { transformOrigin: isMobileScreen ? Animations[variant].exit.transformOrigin diff --git a/packages/web/src/javascripts/Components/Panes/usePaneGesture.ts b/packages/web/src/javascripts/Components/Panes/usePaneGesture.ts index cee8b31e7..23145d805 100644 --- a/packages/web/src/javascripts/Components/Panes/usePaneGesture.ts +++ b/packages/web/src/javascripts/Components/Panes/usePaneGesture.ts @@ -4,22 +4,7 @@ import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/u import { useApplication } from '../ApplicationProvider' import { ApplicationEvent, PrefKey, PrefDefaults } from '@standardnotes/snjs' import { getScrollParent } from '@/Utils' - -const supportsPassive = (() => { - let supportsPassive = false - try { - const opts = Object.defineProperty({}, 'passive', { - get: () => { - supportsPassive = true - }, - }) - window.addEventListener('test', null as never, opts) - window.removeEventListener('test', null as never, opts) - } catch (e) { - /* empty */ - } - return supportsPassive -})() +import { SupportsPassiveListeners } from '@/Constants/Constants' export const usePaneSwipeGesture = ( direction: 'left' | 'right', @@ -113,7 +98,11 @@ export const usePaneSwipeGesture = ( closestScrollContainer = getScrollParent(event.target as HTMLElement) if (closestScrollContainer) { scrollContainerInitialOverflowY = closestScrollContainer.style.overflowY - closestScrollContainer.addEventListener('scroll', scrollListener, supportsPassive ? { passive: true } : false) + closestScrollContainer.addEventListener( + 'scroll', + scrollListener, + SupportsPassiveListeners ? { passive: true } : false, + ) if (closestScrollContainer.scrollWidth > closestScrollContainer.clientWidth) { scrollContainerAxis = 'x' @@ -268,9 +257,9 @@ export const usePaneSwipeGesture = ( disposeUnderlay() } - element.addEventListener('touchstart', touchStartListener, supportsPassive ? { passive: true } : false) - element.addEventListener('touchmove', touchMoveListener, supportsPassive ? { passive: true } : false) - element.addEventListener('touchend', touchEndListener, supportsPassive ? { passive: true } : false) + element.addEventListener('touchstart', touchStartListener, SupportsPassiveListeners ? { passive: true } : false) + element.addEventListener('touchmove', touchMoveListener, SupportsPassiveListeners ? { passive: true } : false) + element.addEventListener('touchend', touchEndListener, SupportsPassiveListeners ? { passive: true } : false) return () => { element.removeEventListener('touchstart', touchStartListener) diff --git a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx index 5586d0b83..d04e6567a 100644 --- a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx +++ b/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx @@ -1,13 +1,15 @@ import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile' import { classNames } from '@standardnotes/snjs' -import { ReactNode, useCallback } from 'react' +import { ReactNode, useCallback, useEffect, useRef } from 'react' import Portal from '../Portal/Portal' import MobileModalAction from '../Modal/MobileModalAction' -import { useModalAnimation } from '../Modal/useModalAnimation' +import { MobileModalAnimationOptions, useModalAnimation } from '../Modal/useModalAnimation' import MobileModalHeader from '../Modal/MobileModalHeader' import { mergeRefs } from '@/Hooks/mergeRefs' import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers' import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery' +import { SupportsPassiveListeners } from '@/Constants/Constants' +import { useLifecycleAnimation } from '@/Hooks/useLifecycleAnimation' const DisableScroll = () => { useDisableBodyScrollOnMobile() @@ -31,7 +33,120 @@ const MobilePopoverContent = ({ className?: string }) => { const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm) - const [isMounted, setPopoverElement] = useModalAnimation(open, isMobileScreen) + const [isMounted, setPopoverElement, element] = useModalAnimation(open, isMobileScreen) + const [, setUnderlayElement] = useLifecycleAnimation({ + open, + enter: { + keyframes: [ + { + opacity: 0, + }, + { + opacity: 0.6, + }, + ], + options: MobileModalAnimationOptions, + }, + exit: { + keyframes: [ + { + opacity: 0.6, + }, + { + opacity: 0, + }, + ], + options: MobileModalAnimationOptions, + }, + }) + const scrollContainerRef = useRef(null) + + useEffect(() => { + const closestScrollContainer = scrollContainerRef.current + + if (!element || !closestScrollContainer) { + return + } + + let elementY = 0 + let startY = 0 + let closestScrollContainerScrollTop = 0 + let isClosestScrollContainerScrolledAtStart = false + let containerScrollChangedAfterTouchStart = false + + const touchStartHandler = (e: TouchEvent) => { + startY = e.touches[0].clientY + elementY = element.getBoundingClientRect().y + closestScrollContainerScrollTop = closestScrollContainer?.scrollTop || 0 + isClosestScrollContainerScrolledAtStart = !!closestScrollContainer && closestScrollContainerScrollTop > 0 + containerScrollChangedAfterTouchStart = false + } + const touchMoveHandler = (e: TouchEvent) => { + const deltaY = e.touches[0].clientY - startY + + const latestClosestScrollContainerScrollTop = closestScrollContainer?.scrollTop || 0 + if (latestClosestScrollContainerScrollTop !== closestScrollContainerScrollTop) { + containerScrollChangedAfterTouchStart = true + } + const isClosestScrollContainerScrolled = !!closestScrollContainer && latestClosestScrollContainerScrollTop > 0 + + const shouldNotDrag = isClosestScrollContainerScrolled + ? true + : containerScrollChangedAfterTouchStart + ? true + : isClosestScrollContainerScrolledAtStart + + if (deltaY < 0 || shouldNotDrag) { + return + } + + const y = element.getBoundingClientRect().y + if (y > elementY) { + closestScrollContainer.style.overflowY = 'hidden' + } + + element.animate( + { + transform: [`translate3d(0, ${deltaY}px, 0)`], + }, + { + duration: 0, + fill: 'forwards', + }, + ) + } + const touchEndHandler = () => { + const y = element.getBoundingClientRect().y + const threshold = window.innerHeight * 0.75 + + if (y > threshold && !isClosestScrollContainerScrolledAtStart) { + requestClose() + } else { + element.animate( + { + transform: ['translate3d(0, 0, 0)'], + }, + { + duration: 200, + fill: 'forwards', + }, + ) + } + + startY = 0 + closestScrollContainer.style.overflowY = '' + } + + element.addEventListener('touchstart', touchStartHandler, SupportsPassiveListeners ? { passive: true } : false) + element.addEventListener('touchmove', touchMoveHandler, SupportsPassiveListeners ? { passive: true } : false) + element.addEventListener('touchend', touchEndHandler, SupportsPassiveListeners ? { passive: true } : false) + + return () => { + element.removeEventListener('touchstart', touchStartHandler) + element.removeEventListener('touchmove', touchMoveHandler) + element.removeEventListener('touchend', touchEndHandler) + } + }, [element, requestClose]) const addCloseMethod = useCallback( (element: HTMLDivElement | null) => { @@ -49,21 +164,27 @@ const MobilePopoverContent = ({ return ( -
- -
-
{title}
- - Done - - -
{children}
+
+
+
+
+ +
+
{title}
+ + Done + + +
+ {children} +
+
) diff --git a/packages/web/src/javascripts/Constants/Constants.ts b/packages/web/src/javascripts/Constants/Constants.ts index 8a5b2e380..f50c75993 100644 --- a/packages/web/src/javascripts/Constants/Constants.ts +++ b/packages/web/src/javascripts/Constants/Constants.ts @@ -42,3 +42,19 @@ export const SuperEditorMetadata: EditorMetadata = { iconClassName: 'text-accessory-tint-1', iconTintNumber: 1, } + +export const SupportsPassiveListeners = (() => { + let supportsPassive = false + try { + const opts = Object.defineProperty({}, 'passive', { + get: () => { + supportsPassive = true + }, + }) + window.addEventListener('test', null as never, opts) + window.removeEventListener('test', null as never, opts) + } catch (e) { + /* empty */ + } + return supportsPassive +})() diff --git a/packages/web/src/javascripts/Hooks/useLifecycleAnimation.ts b/packages/web/src/javascripts/Hooks/useLifecycleAnimation.ts index 5aa9185dc..8569ca8ab 100644 --- a/packages/web/src/javascripts/Hooks/useLifecycleAnimation.ts +++ b/packages/web/src/javascripts/Hooks/useLifecycleAnimation.ts @@ -1,4 +1,4 @@ -import { RefCallback, useEffect, useState } from 'react' +import { useEffect, useState } from 'react' import { AnimationConfig } from '../Constants/AnimationConfigs' import { useStateRef } from './useStateRef' @@ -23,7 +23,7 @@ type Options = { export const useLifecycleAnimation = ( { open, enter, enterCallback, exit, exitCallback }: Options, disabled = false, -): [boolean, RefCallback] => { +) => { const [element, setElement] = useState(null) const [isMounted, setIsMounted] = useState(() => open) @@ -124,5 +124,5 @@ export const useLifecycleAnimation = ( } }, [open, element, enterRef, enterCallbackRef, exitRef, exitCallbackRef, disabled]) - return [isMounted, setElement] + return [isMounted, setElement, element] as const }