From 3bb4399632453ca175931fe189cfe86f26e56922 Mon Sep 17 00:00:00 2001 From: Piotr Drapich Date: Tue, 7 Jul 2020 21:23:36 +0200 Subject: [PATCH 01/52] Add navigation dependencies --- package-lock.json | 150 ++++++++++++++++++++++ packages/react-native-editor/package.json | 6 + 2 files changed, 156 insertions(+) diff --git a/package-lock.json b/package-lock.json index b0cf3da793aa6..5fb054a9f6df6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1367,6 +1367,14 @@ "minimist": "^1.2.0" } }, + "@egjs/hammerjs": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", + "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==", + "requires": { + "@types/hammerjs": "^2.0.36" + } + }, "@egoist/vue-to-react": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@egoist/vue-to-react/-/vue-to-react-1.1.0.tgz", @@ -7092,10 +7100,72 @@ "resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-3.0.0.tgz", "integrity": "sha512-ng6Tm537E/M42GjE4TRUxQyL8sRfClcL7bQWblOCoxPZzJ2J3bdALsjeG3vDnVCIfI/R0AeFalN9KjMt0+Z/Zg==" }, + "@react-native-community/masked-view": { + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.10.tgz", + "integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==" + }, "@react-native-community/slider": { "version": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6", "from": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6" }, + "@react-navigation/core": { + "version": "5.11.1", + "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.11.1.tgz", + "integrity": "sha512-zJ/w84msKBhgRR35/tHdY1facxdnN/WP9Ebutnjp/J9ENuv7fHXhYlxX+oIRrMn+/MnbG79RVnYcO/r4lO8OTQ==", + "requires": { + "@react-navigation/routers": "^5.4.8", + "escape-string-regexp": "^4.0.0", + "nanoid": "^3.1.9", + "query-string": "^6.13.1", + "react-is": "^16.13.0", + "use-subscription": "^1.4.0" + }, + "dependencies": { + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" + }, + "query-string": { + "version": "6.13.1", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.13.1.tgz", + "integrity": "sha512-RfoButmcK+yCta1+FuU8REvisx1oEzhMKwhLUNcepQTPGcNMp1sIqjnfCtfnvGSQZQEhaBHvccujtWoUV3TTbA==", + "requires": { + "decode-uri-component": "^0.2.0", + "split-on-first": "^1.0.0", + "strict-uri-encode": "^2.0.0" + } + }, + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "strict-uri-encode": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz", + "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=" + } + } + }, + "@react-navigation/native": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-5.6.1.tgz", + "integrity": "sha512-jnSNEnuRzqLvG+7QcMthfB8eCZIzAE0Wku7HDgzfjFS2iA7Oa9ugeX/1qdP9heT2Mp0t9BDQ4XX4boJma9Z/xg==", + "requires": { + "@react-navigation/core": "^5.11.1", + "nanoid": "^3.1.9" + } + }, + "@react-navigation/routers": { + "version": "5.4.8", + "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-5.4.8.tgz", + "integrity": "sha512-7uxC24fgLQdRquxPfL8SZ8zjle5DXdAB56aYL13tH+HAdhO2YxjKVvulzhGUsfcZthMvZ/9psybhn+m4z71dUg==", + "requires": { + "nanoid": "^3.1.9" + } + }, "@samverschueren/stream-to-observable": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz", @@ -10116,6 +10186,11 @@ "@types/node": "*" } }, + "@types/hammerjs": { + "version": "2.0.36", + "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.36.tgz", + "integrity": "sha512-7TUK/k2/QGpEAv/BCwSHlYu3NXZhQ9ZwBYpzr9tjlPIL2C5BeGhH3DmVavRx3ZNyELX5TLC91JTz/cen6AAtIQ==" + }, "@types/history": { "version": "4.7.4", "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.4.tgz", @@ -11758,7 +11833,9 @@ "requires": { "@babel/runtime": "^7.9.2", "@react-native-community/blur": "3.6.0", + "@react-native-community/masked-view": "^0.1.10", "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6", + "@react-navigation/native": "^5.6.1", "@wordpress/api-fetch": "file:packages/api-fetch", "@wordpress/block-editor": "file:packages/block-editor", "@wordpress/block-library": "file:packages/block-library", @@ -11780,14 +11857,18 @@ "node-fetch": "^2.6.0", "react-native": "0.61.5", "react-native-dark-mode": "git+https://github.com/wordpress-mobile/react-native-dark-mode.git#f09bf1480e7b34536413ab3300f29e4375edb2c6", + "react-native-gesture-handler": "^1.6.1", "react-native-get-random-values": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#f03f2c16414aff4ea76064dcd00a9e3c6efc838d", "react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3", "react-native-hsv-color-picker": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker.git", "react-native-keyboard-aware-scroll-view": "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#gb-v0.8.8", "react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#52bf43077171cff8714ce3e0155f3ebb7f55bc37", "react-native-modal": "^6.5.0", + "react-native-reanimated": "^1.9.0", "react-native-safe-area": "^0.5.0", + "react-native-safe-area-context": "^3.0.7", "react-native-sass-transformer": "^1.1.1", + "react-native-screens": "^2.9.0", "react-native-svg": "git+https://github.com/wordpress-mobile/react-native-svg.git#a628e92990a2404e30a0086f168bd2b5b7b4ce96", "react-native-url-polyfill": "^1.1.2", "react-native-video": "git+https://github.com/wordpress-mobile/react-native-video.git#1b964b107863351ed744fc104d7952bbec3e2d4f" @@ -41094,6 +41175,11 @@ "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz", "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==" }, + "nanoid": { + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.10.tgz", + "integrity": "sha512-iZFMXKeXWkxzlfmMfM91gw7YhN2sdJtixY+eZh9V6QWJWTOiurhpKhBMgr82pfzgSqglQgqYSCowEYsz8D++6w==" + }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -47074,6 +47160,17 @@ } } }, + "react-native-gesture-handler": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.6.1.tgz", + "integrity": "sha512-gQgIKhDiYf754yzhhliagLuLupvGb6ZyBdzYzr7aus3Fyi87TLOw63ers+r4kGw0h26oAWTAdHd34JnF4NeL6Q==", + "requires": { + "@egjs/hammerjs": "^2.0.17", + "hoist-non-react-statics": "^2.3.1", + "invariant": "^2.2.4", + "prop-types": "^15.7.2" + } + }, "react-native-get-random-values": { "version": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#f03f2c16414aff4ea76064dcd00a9e3c6efc838d", "from": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#f03f2c16414aff4ea76064dcd00a9e3c6efc838d", @@ -47119,6 +47216,36 @@ "react-native-animatable": "^1.2.4" } }, + "react-native-reanimated": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.9.0.tgz", + "integrity": "sha512-Aj+spgIHRiVv7ezGADxnSH1EoKrQRD2+XaSiGY0MiB/pvRNNrZPSJ+3NVpvLwWf9lZMOP7dwqqyJIzoZgBDt8w==", + "requires": { + "fbjs": "^1.0.0" + }, + "dependencies": { + "core-js": { + "version": "2.6.11", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz", + "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==" + }, + "fbjs": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-1.0.0.tgz", + "integrity": "sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==", + "requires": { + "core-js": "^2.4.1", + "fbjs-css-vars": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + } + } + } + }, "react-native-safe-area": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/react-native-safe-area/-/react-native-safe-area-0.5.1.tgz", @@ -47127,6 +47254,11 @@ "@types/react": "^16.8.8" } }, + "react-native-safe-area-context": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.0.7.tgz", + "integrity": "sha512-dqhRTlIFe5+P1yxitj0C9XVUxLqOmjomeqzUSSY8sNOWVjtIhEY/fl4ZKYpAVnktd8dt3zl13XmJTmRmy3d0uA==" + }, "react-native-sass-transformer": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/react-native-sass-transformer/-/react-native-sass-transformer-1.4.0.tgz", @@ -47144,6 +47276,11 @@ } } }, + "react-native-screens": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.9.0.tgz", + "integrity": "sha512-5MaiUD6HA3nzY3JbVI8l3V7pKedtxQF3d8qktTVI0WmWXTI4QzqOU8r8fPVvfKo3MhOXwhWBjr+kQ7DZaIQQeg==" + }, "react-native-svg": { "version": "git+https://github.com/wordpress-mobile/react-native-svg.git#a628e92990a2404e30a0086f168bd2b5b7b4ce96", "from": "git+https://github.com/wordpress-mobile/react-native-svg.git#a628e92990a2404e30a0086f168bd2b5b7b4ce96", @@ -49947,6 +50084,11 @@ "through": "2" } }, + "split-on-first": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz", + "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==" + }, "split-string": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", @@ -53530,6 +53672,14 @@ "tslib": "^1.9.3" } }, + "use-subscription": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.4.1.tgz", + "integrity": "sha512-7+IIwDG/4JICrWHL/Q/ZPK5yozEnvRm6vHImu0LKwQlmWGKeiF7mbAenLlK/cTNXrTtXHU/SFASQHzB6+oSJMQ==", + "requires": { + "object-assign": "^4.1.1" + } + }, "util": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz", diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index a2bd308f2a885..5e96196bf6404 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -31,7 +31,9 @@ "dependencies": { "@babel/runtime": "^7.9.2", "@react-native-community/blur": "3.6.0", + "@react-native-community/masked-view": "^0.1.10", "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6", + "@react-navigation/native": "^5.6.1", "@wordpress/api-fetch": "file:../api-fetch", "@wordpress/block-editor": "file:../block-editor", "@wordpress/block-library": "file:../block-library", @@ -53,14 +55,18 @@ "node-fetch": "^2.6.0", "react-native": "0.61.5", "react-native-dark-mode": "git+https://github.com/wordpress-mobile/react-native-dark-mode.git#f09bf1480e7b34536413ab3300f29e4375edb2c6", + "react-native-gesture-handler": "^1.6.1", "react-native-get-random-values": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#f03f2c16414aff4ea76064dcd00a9e3c6efc838d", "react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3", "react-native-hsv-color-picker": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker", "react-native-keyboard-aware-scroll-view": "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#gb-v0.8.8", "react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#52bf43077171cff8714ce3e0155f3ebb7f55bc37", "react-native-modal": "^6.5.0", + "react-native-reanimated": "^1.9.0", "react-native-safe-area": "^0.5.0", + "react-native-safe-area-context": "^3.0.7", "react-native-sass-transformer": "^1.1.1", + "react-native-screens": "^2.9.0", "react-native-svg": "git+https://github.com/wordpress-mobile/react-native-svg.git#a628e92990a2404e30a0086f168bd2b5b7b4ce96", "react-native-url-polyfill": "^1.1.2", "react-native-video": "git+https://github.com/wordpress-mobile/react-native-video.git#1b964b107863351ed744fc104d7952bbec3e2d4f" From 826ec94f2836c9b739a1931b3c22fc94ecaa5c2f Mon Sep 17 00:00:00 2001 From: Piotr Drapich Date: Tue, 7 Jul 2020 21:38:18 +0200 Subject: [PATCH 02/52] Add android links --- package-lock.json | 32 +++++++++++++++++-- .../WPAndroidGlue/WPAndroidGlueCode.java | 13 +++++++- .../java/com/gutenberg/MainApplication.java | 10 ++++++ packages/react-native-editor/babel.config.js | 4 +-- packages/react-native-editor/index.js | 4 +++ packages/react-native-editor/package.json | 1 + 6 files changed, 58 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5fb054a9f6df6..9b6c638a39556 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7166,6 +7166,15 @@ "nanoid": "^3.1.9" } }, + "@react-navigation/stack": { + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.6.2.tgz", + "integrity": "sha512-51Aasxg8j2eKxz4mhA0ajJXrhAyJQkk2iiNE511zcqJ3tlfxv/h70Eej3PetnbbHFMOwNsEwc2GjB3OnfQcxjQ==", + "requires": { + "color": "^3.1.2", + "react-native-iphone-x-helper": "^1.2.1" + } + }, "@samverschueren/stream-to-observable": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz", @@ -11836,6 +11845,7 @@ "@react-native-community/masked-view": "^0.1.10", "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6", "@react-navigation/native": "^5.6.1", + "@react-navigation/stack": "5.6.2", "@wordpress/api-fetch": "file:packages/api-fetch", "@wordpress/block-editor": "file:packages/block-editor", "@wordpress/block-library": "file:packages/block-library", @@ -22831,6 +22841,15 @@ "object-visit": "^1.0.0" } }, + "color": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz", + "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==", + "requires": { + "color-convert": "^1.9.1", + "color-string": "^1.5.2" + } + }, "color-convert": { "version": "1.9.2", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz", @@ -22844,6 +22863,15 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz", "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=" }, + "color-string": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz", + "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==", + "requires": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "color-support": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", @@ -49705,7 +49733,6 @@ "version": "0.2.2", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", - "dev": true, "requires": { "is-arrayish": "^0.3.1" }, @@ -49713,8 +49740,7 @@ "is-arrayish": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", - "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==", - "dev": true + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" } } }, diff --git a/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java b/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java index 1be4706beb0a5..2abc726821a42 100644 --- a/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java +++ b/packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java @@ -37,6 +37,12 @@ import com.BV.LinearGradient.LinearGradientPackage; import com.reactnativecommunity.slider.ReactSliderPackage; import org.linusu.RNGetRandomValuesPackage; +import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; +import com.swmansion.gesturehandler.react.RNGestureHandlerPackage; +import com.swmansion.reanimated.ReanimatedPackage; +import com.swmansion.rnscreens.RNScreensPackage; +import com.th3rdwave.safeareacontext.SafeAreaContextPackage; +import org.reactnative.maskedview.RNCMaskedViewPackage; import org.wordpress.android.util.AppLog; import org.wordpress.mobile.ReactNativeAztec.ReactAztecPackage; @@ -406,6 +412,11 @@ public void requestStarterPageTemplatesTooltipShown(StarterPageTemplatesTooltipS new ReactVideoPackage(), new ReactSliderPackage(), new RNGetRandomValuesPackage(), + new RNGestureHandlerPackage(), + new RNScreensPackage(), + new SafeAreaContextPackage(), + new RNCMaskedViewPackage(), + new ReanimatedPackage(), mRnReactNativeGutenbergBridgePackage); } @@ -437,7 +448,7 @@ public void onCreateView(Context initContext, mIsDarkMode = isDarkMode; mExceptionLogger = exceptionLogger; mBreadcrumbLogger = breadcrumbLogger; - mReactRootView = new ReactRootView(new MutableContextWrapper(initContext)); + mReactRootView = new RNGestureHandlerEnabledRootView(new MutableContextWrapper(initContext)); mReactRootView.setBackgroundColor(colorBackground); ReactInstanceManagerBuilder builder = diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java index fe21447c9f622..e9dbb45a78915 100644 --- a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java +++ b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java @@ -31,6 +31,11 @@ import com.facebook.react.ReactPackage; import com.facebook.react.shell.MainReactPackage; import com.facebook.soloader.SoLoader; +import com.swmansion.gesturehandler.react.RNGestureHandlerPackage; +import com.swmansion.reanimated.ReanimatedPackage; +import com.swmansion.rnscreens.RNScreensPackage; +import com.th3rdwave.safeareacontext.SafeAreaContextPackage; +import org.reactnative.maskedview.RNCMaskedViewPackage; import java.util.Arrays; import java.util.List; @@ -185,6 +190,11 @@ protected List getPackages() { new ReactAztecPackage(null, null), new LinearGradientPackage(), new RNGetRandomValuesPackage(), + new RNCMaskedViewPackage(), + new RNGestureHandlerPackage(), + new ReanimatedPackage(), + new SafeAreaContextPackage(), + new RNScreensPackage(), mRnReactNativeGutenbergBridgePackage); } diff --git a/packages/react-native-editor/babel.config.js b/packages/react-native-editor/babel.config.js index 0fd51ac0d1006..868045c19ca90 100644 --- a/packages/react-native-editor/babel.config.js +++ b/packages/react-native-editor/babel.config.js @@ -24,7 +24,7 @@ module.exports = function ( api ) { }, ], ], - exclude: /node_modules\/(react-native|@react-native-community)/, + exclude: /node_modules\/(react-native|@react-native-community|@react-navigation)/, }, { // Auto-add `import { createElement } from '@wordpress/element';` when JSX is found @@ -39,7 +39,7 @@ module.exports = function ( api ) { }, ], ], - exclude: /node_modules\/(react-native|@react-native-community)/, + exclude: /node_modules\/(react-native|@react-native-community|@react-navigation)/, }, ], env: { diff --git a/packages/react-native-editor/index.js b/packages/react-native-editor/index.js index 1417cc0322975..b84a0fe9760b6 100644 --- a/packages/react-native-editor/index.js +++ b/packages/react-native-editor/index.js @@ -1,3 +1,7 @@ +/** + * External dependencies + */ +import 'react-native-gesture-handler'; /** * Internal dependencies */ diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index 5e96196bf6404..977b6f49e18fb 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -34,6 +34,7 @@ "@react-native-community/masked-view": "^0.1.10", "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6", "@react-navigation/native": "^5.6.1", + "@react-navigation/stack": "5.6.2", "@wordpress/api-fetch": "file:../api-fetch", "@wordpress/block-editor": "file:../block-editor", "@wordpress/block-library": "file:../block-library", From 8ce1446de668e3257eb90f5628f20d599f4ed8ed Mon Sep 17 00:00:00 2001 From: Piotr Drapich Date: Tue, 7 Jul 2020 21:58:50 +0200 Subject: [PATCH 03/52] link ios --- packages/react-native-editor/ios/Podfile.lock | 38 +++++++++++++++++-- .../ios/gutenberg.xcodeproj/project.pbxproj | 10 +++++ 2 files changed, 44 insertions(+), 4 deletions(-) diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index f097969c346f4..79f56c39a2774 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -21,7 +21,7 @@ PODS: - DoubleConversion - glog - glog (0.3.5) - - Gutenberg (8.4.0): + - Gutenberg (8.5.0-rc.1): - React (= 0.61.5) - React-CoreModules (= 0.61.5) - React-RCTImage (= 0.61.5) @@ -197,6 +197,8 @@ PODS: - React - react-native-safe-area (0.5.1): - React + - react-native-safe-area-context (3.0.7): + - React - react-native-slider (2.0.7): - React - react-native-video (5.0.2): @@ -241,9 +243,17 @@ PODS: - ReactCommon/jscallinvoker (= 0.61.5) - ReactNativeDarkMode (0.0.10): - React + - RNCMaskedView (0.1.10): + - React + - RNGestureHandler (1.6.1): + - React + - RNReanimated (1.9.0): + - React + - RNScreens (2.9.0): + - React - RNSVG (9.13.6-gb): - React - - RNTAztecView (0.1.11): + - RNTAztecView (0.2.0): - React-Core - WordPress-Aztec-iOS (~> 1.19.2) - WordPress-Aztec-iOS (1.19.2) @@ -272,6 +282,7 @@ DEPENDENCIES: - react-native-get-random-values (from `../../../node_modules/react-native-get-random-values`) - react-native-keyboard-aware-scroll-view (from `../../../node_modules/react-native-keyboard-aware-scroll-view`) - react-native-safe-area (from `../../../node_modules/react-native-safe-area`) + - react-native-safe-area-context (from `../../../node_modules/react-native-safe-area-context`) - "react-native-slider (from `../../../node_modules/@react-native-community/slider`)" - react-native-video (from `../../../node_modules/react-native-video`) - React-RCTActionSheet (from `../../../node_modules/react-native/Libraries/ActionSheetIOS`) @@ -286,6 +297,10 @@ DEPENDENCIES: - ReactCommon/jscallinvoker (from `../../../node_modules/react-native/ReactCommon`) - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`) - ReactNativeDarkMode (from `../../../node_modules/react-native-dark-mode`) + - "RNCMaskedView (from `../../../node_modules/@react-native-community/masked-view`)" + - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`) + - RNReanimated (from `../../../node_modules/react-native-reanimated`) + - RNScreens (from `../../../node_modules/react-native-screens`) - RNSVG (from `../../../node_modules/react-native-svg`) - RNTAztecView (from `../../react-native-aztec/RNTAztecView.podspec`) - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`) @@ -336,6 +351,8 @@ EXTERNAL SOURCES: :path: "../../../node_modules/react-native-keyboard-aware-scroll-view" react-native-safe-area: :path: "../../../node_modules/react-native-safe-area" + react-native-safe-area-context: + :path: "../../../node_modules/react-native-safe-area-context" react-native-slider: :path: "../../../node_modules/@react-native-community/slider" react-native-video: @@ -362,6 +379,14 @@ EXTERNAL SOURCES: :path: "../../../node_modules/react-native/ReactCommon" ReactNativeDarkMode: :path: "../../../node_modules/react-native-dark-mode" + RNCMaskedView: + :path: "../../../node_modules/@react-native-community/masked-view" + RNGestureHandler: + :path: "../../../node_modules/react-native-gesture-handler" + RNReanimated: + :path: "../../../node_modules/react-native-reanimated" + RNScreens: + :path: "../../../node_modules/react-native-screens" RNSVG: :path: "../../../node_modules/react-native-svg" RNTAztecView: @@ -377,7 +402,7 @@ SPEC CHECKSUMS: FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75 Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51 glog: 1f3da668190260b06b429bb211bfbee5cd790c28 - Gutenberg: 42a3ed491af07194744d45aa7fc44b8202ea1a5b + Gutenberg: bfd3c12a77b9fc4a566435e81138828c6ad268b9 RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1 RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320 React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78 @@ -391,6 +416,7 @@ SPEC CHECKSUMS: react-native-get-random-values: 8940331a943a46c165d3ed05802c09c392f8dd46 react-native-keyboard-aware-scroll-view: ffa9152671fec9a571197ed2d02e0fcb90206e60 react-native-safe-area: e8230b0017d76c00de6b01e2412dcf86b127c6a3 + react-native-safe-area-context: c39fc20a20cd66ebf1d56c6f8b8711142fbfee98 react-native-slider: f81b89fa0c1f9a65742d33f889a194ca6653a985 react-native-video: 961749da457e73bf0b5565edfbaffc25abfb8974 React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76 @@ -404,8 +430,12 @@ SPEC CHECKSUMS: React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd ReactNativeDarkMode: f61376360c5d983907e5c316e8e1c853a8c2f348 + RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459 + RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38 + RNReanimated: b5ccb50650ba06f6e749c7c329a1bc3ae0c88b43 + RNScreens: c526239bbe0e957b988dacc8d75ac94ec9cb19da RNSVG: 68a534a5db06dcbdaebfd5079349191598caef7b - RNTAztecView: b4c945bdc156b98dbf5c8a676def6c7736efa337 + RNTAztecView: c19a1177301a21977389629351f2348adf53f546 WordPress-Aztec-iOS: d01bf0c5e150ae6a046f06ba63b7cc2762061c0b Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b diff --git a/packages/react-native-editor/ios/gutenberg.xcodeproj/project.pbxproj b/packages/react-native-editor/ios/gutenberg.xcodeproj/project.pbxproj index 81a72bc9af7c8..b5cb62934183a 100644 --- a/packages/react-native-editor/ios/gutenberg.xcodeproj/project.pbxproj +++ b/packages/react-native-editor/ios/gutenberg.xcodeproj/project.pbxproj @@ -470,7 +470,11 @@ "${BUILT_PRODUCTS_DIR}/Folly/folly.framework", "${BUILT_PRODUCTS_DIR}/Gutenberg/Gutenberg.framework", "${BUILT_PRODUCTS_DIR}/RCTTypeSafety/RCTTypeSafety.framework", + "${BUILT_PRODUCTS_DIR}/RNCMaskedView/RNCMaskedView.framework", + "${BUILT_PRODUCTS_DIR}/RNGestureHandler/RNGestureHandler.framework", + "${BUILT_PRODUCTS_DIR}/RNReanimated/RNReanimated.framework", "${BUILT_PRODUCTS_DIR}/RNSVG/RNSVG.framework", + "${BUILT_PRODUCTS_DIR}/RNScreens/RNScreens.framework", "${BUILT_PRODUCTS_DIR}/RNTAztecView/RNTAztecView.framework", "${BUILT_PRODUCTS_DIR}/React-Core/React.framework", "${BUILT_PRODUCTS_DIR}/React-CoreModules/CoreModules.framework", @@ -496,6 +500,7 @@ "${BUILT_PRODUCTS_DIR}/react-native-get-random-values/react_native_get_random_values.framework", "${BUILT_PRODUCTS_DIR}/react-native-keyboard-aware-scroll-view/react_native_keyboard_aware_scroll_view.framework", "${BUILT_PRODUCTS_DIR}/react-native-safe-area/react_native_safe_area.framework", + "${BUILT_PRODUCTS_DIR}/react-native-safe-area-context/react_native_safe_area_context.framework", "${BUILT_PRODUCTS_DIR}/react-native-slider/react_native_slider.framework", ); name = "[CP] Embed Pods Frameworks"; @@ -506,7 +511,11 @@ "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/folly.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Gutenberg.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTTypeSafety.framework", + "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNCMaskedView.framework", + "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNGestureHandler.framework", + "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNReanimated.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNSVG.framework", + "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNScreens.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNTAztecView.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/React.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/CoreModules.framework", @@ -532,6 +541,7 @@ "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_get_random_values.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_keyboard_aware_scroll_view.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_safe_area.framework", + "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_safe_area_context.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_slider.framework", ); runOnlyForDeploymentPostprocessing = 0; From 5e1c2162a4258a95f348faced08e1f79cc0c557b Mon Sep 17 00:00:00 2001 From: Piotr Drapich Date: Tue, 7 Jul 2020 23:39:12 +0200 Subject: [PATCH 04/52] WIP add height animation - needs polishing --- .../block-settings/container.native.js | 136 ++++++-- .../block-settings/container.native.scss | 8 + .../panel-color-gradient-settings.native.js | 64 ++-- packages/components/src/index.native.js | 5 +- .../bottom-sheet-context.native.js | 10 +- .../src/mobile/color-settings/index.native.js | 324 +++++++++++------- .../react-native-bridge/android/build.gradle | 5 + 7 files changed, 363 insertions(+), 189 deletions(-) diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index 302030563debe..2fbacdcfc244e 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -1,52 +1,131 @@ /** * WordPress dependencies */ +/** + * External dependencies + */ import { - BottomSheet, - BottomSheetConsumer, - ColorSettings, - colorsUtils, -} from '@wordpress/components'; -import { withSelect, withDispatch } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; -import { InspectorControls } from '@wordpress/block-editor'; - + NavigationContainer, + useFocusEffect, + DefaultTheme, +} from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; +import { + InspectorControls, + SETTINGS_DEFAULTS as defaultSettings, +} from '@wordpress/block-editor'; +import { BottomSheet, ColorSettings } from '@wordpress/components'; +import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose'; +import { withDispatch, withSelect } from '@wordpress/data'; +import { useRef, useCallback } from '@wordpress/element'; +import { View, Animated, Easing } from 'react-native'; /** * Internal dependencies */ import styles from './container.native.scss'; +const forFade = ( { current } ) => ( { + cardStyle: { + opacity: current.progress, + }, +} ); + +const BottomSheetScreen = ( { children, setHeight } ) => { + const height = useRef( { maxHeight: 0 } ); + useFocusEffect( + useCallback( () => { + if ( height.current.maxHeight !== 0 ) { + setHeight( height.current.maxHeight ); + } + return () => {}; + }, [] ) + ); + + const onLayout = ( e ) => { + if ( height.current.maxHeight !== e.nativeEvent.layout.height ) { + height.current.maxHeight = e.nativeEvent.layout.height; + setHeight( e.nativeEvent.layout.height ); + } + }; + return { children }; +}; + +const Stack = createStackNavigator(); + function BottomSheetSettings( { editorSidebarOpened, closeGeneralSidebar, - settings, ...props } ) { + const heightValue = useRef( new Animated.Value( 1 ) ).current; + const setHeight = ( maxHeight ) => { + if ( heightValue !== maxHeight ) { + Animated.timing( heightValue, { + toValue: maxHeight, + duration: 300, + easing: Easing.ease, + } ).start(); + } + }; + + const MainScreen = useRef( () => ( + + + + ) ); + + const DetailsScreen = useRef( () => ( + + + + ) ); + + const backgroundStyle = usePreferredColorSchemeStyle( + styles.background, + styles.backgroundDark + ); + + const MyTheme = { + ...DefaultTheme, + colors: { + ...DefaultTheme.colors, + background: backgroundStyle.backgroundColor, + }, + }; return ( - - { ( { currentScreen, extraProps, ...bottomSheetProps } ) => { - switch ( currentScreen ) { - case colorsUtils.subsheets.color: - return ( - - ); - case colorsUtils.subsheets.settings: - default: - return ; - } - } } - + + + + + + + + ); } @@ -54,9 +133,8 @@ function BottomSheetSettings( { export default compose( [ withSelect( ( select ) => { const { isEditorSidebarOpened } = select( 'core/edit-post' ); - const { getSettings } = select( 'core/block-editor' ); + return { - settings: getSettings(), editorSidebarOpened: isEditorSidebarOpened(), }; } ), diff --git a/packages/block-editor/src/components/block-settings/container.native.scss b/packages/block-editor/src/components/block-settings/container.native.scss index 2eed1c9e3f2d0..3fd9962974ec8 100644 --- a/packages/block-editor/src/components/block-settings/container.native.scss +++ b/packages/block-editor/src/components/block-settings/container.native.scss @@ -2,3 +2,11 @@ padding-left: 0; padding-right: 0; } + +.background { + background-color: $white; +} + +.backgroundDark { + background-color: $background-dark-elevated; +} \ No newline at end of file diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js index f9e7bd2950dc0..302a94126ca16 100644 --- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js +++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js @@ -1,43 +1,41 @@ /** * WordPress dependencies */ -import { - ColorControl, - BottomSheetConsumer, - PanelBody, -} from '@wordpress/components'; +import { ColorControl, PanelBody } from '@wordpress/components'; +/** + * External dependencies + */ +import { useNavigation } from '@react-navigation/native'; export default function PanelColorGradientSettings( { settings, title } ) { + const navigation = useNavigation(); + return ( - - { ( { onReplaceSubsheet } ) => - settings.map( - ( { - onColorChange, - colorValue, - onGradientChange, - gradientValue, - label, - } ) => ( - { - onReplaceSubsheet( 'Color', { - onColorChange, - colorValue: gradientValue || colorValue, - gradientValue, - onGradientChange, - label, - } ); - } } - key={ `color-setting-${ label }` } - label={ label } - color={ gradientValue || colorValue } - /> - ) - ) - } - + { settings.map( + ( { + onColorChange, + colorValue, + onGradientChange, + gradientValue, + label, + } ) => ( + { + navigation.navigate( 'Colors', { + onColorChange, + colorValue: gradientValue || colorValue, + gradientValue, + onGradientChange, + label, + } ); + } } + key={ `color-setting-${ label }` } + label={ label } + color={ gradientValue || colorValue } + /> + ) + ) } ); } diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 02913c7aa8541..8e0168b890eb9 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -58,7 +58,10 @@ export * from './text'; // Mobile Components export { default as BottomSheet } from './mobile/bottom-sheet'; -export { BottomSheetConsumer } from './mobile/bottom-sheet/bottom-sheet-context'; +export { + BottomSheetConsumer, + BottomSheetContext, +} from './mobile/bottom-sheet/bottom-sheet-context'; export { default as HTMLTextInput } from './mobile/html-text-input'; export { default as KeyboardAvoidingView } from './mobile/keyboard-avoiding-view'; export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-list'; diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js index 9252e5daf3ac4..92dbe9f3036ea 100644 --- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js +++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js @@ -18,10 +18,7 @@ if ( // Context in BottomSheet is necessary for controlling the // transition flow between subsheets and replacing a content inside them -export const { - Provider: BottomSheetProvider, - Consumer: BottomSheetConsumer, -} = createContext( { +export const BottomSheetContext = createContext( { // Specifies whether content is currently scrolling isBottomSheetContentScrolling: false, // Function called to enable scroll within bottom sheet @@ -41,3 +38,8 @@ export const { // Specifies the currently active subsheet name currentScreen: undefined, } ); + +export const { + Provider: BottomSheetProvider, + Consumer: BottomSheetConsumer, +} = BottomSheetContext; diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 79aa0c8a98aec..61227d58324b5 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -1,14 +1,32 @@ /** * External dependencies */ -import { View, Text } from 'react-native'; +import { View, Text, Animated } from 'react-native'; +import { createStackNavigator } from '@react-navigation/stack'; + /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useState, useEffect } from '@wordpress/element'; +import { + useState, + useEffect, + useContext, + useRef, + useCallback, +} from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; -import { ColorControl, PanelBody } from '@wordpress/components'; +import { + BottomSheetConsumer, + ColorControl, + PanelBody, + BottomSheetContext, +} from '@wordpress/components'; +import { + useRoute, + useFocusEffect, + useNavigation, +} from '@react-navigation/native'; /** * Internal dependencies */ @@ -19,95 +37,182 @@ import CustomGradientPicker from '../../custom-gradient-picker'; import NavigationHeader from '../bottom-sheet/navigation-header'; import SegmentedControls from '../segmented-control'; import { colorsUtils } from './utils'; -import { performLayoutAnimation } from '../layout-animation'; import styles from './style.scss'; -function ColorSettings( { - label, - onColorChange, - onGradientChange, - colorValue, - onReplaceSubsheet, - shouldEnableBottomSheetScroll, - shouldDisableBottomSheetMaxHeight, - isBottomSheetContentScrolling, - onCloseBottomSheet, - onHardwareButtonPress, - defaultSettings, -} ) { - const [ currentValue, setCurrentValue ] = useState( colorValue ); - const [ isCustomScreen, setIsCustomScreen ] = useState( false ); - const [ isCustomGradientScreen, setIsCustomGradientScreen ] = useState( - false +const BottomSheetScreen = ( { children, setHeight } ) => { + const height = useRef( { maxHeight: 0 } ); + useFocusEffect( + useCallback( () => { + if ( height.current.maxHeight !== 0 ) { + setHeight( height.current.maxHeight ); + } + return () => {}; + }, [] ) ); - const { segments, subsheets, isGradient } = colorsUtils; - const isGradientColor = isGradient( currentValue ); - const selectedSegmentIndex = isGradientColor ? 1 : 0; + const onLayout = ( e ) => { + if ( height.current.maxHeight !== e.nativeEvent.layout.height ) { + height.current.maxHeight = e.nativeEvent.layout.height; + setHeight( e.nativeEvent.layout.height ); + } + }; + return { children }; +}; - const [ currentSegment, setCurrentSegment ] = useState( - segments[ selectedSegmentIndex ] - ); +const forFade = ( { current } ) => ( { + cardStyle: { + opacity: current.progress, + }, +} ); +const Stack = createStackNavigator(); - const isSolidSegment = currentSegment === segments[ 0 ]; - const isCustomGadientShown = ! isSolidSegment && isGradientColor; +function ColorSettings( { defaultSettings } ) { + const route = useRoute(); + const heightValue = useRef( new Animated.Value( 1 ) ).current; + const { + onCloseBottomSheet, + shouldDisableBottomSheetMaxHeight, + } = useContext( BottomSheetContext ); + const setHeight = ( maxHeight ) => { + if ( heightValue !== maxHeight ) { + heightValue.setValue( maxHeight ); + } + }; - const horizontalSeparatorStyle = usePreferredColorSchemeStyle( - styles.horizontalSeparator, - styles.horizontalSeparatorDark + useEffect( () => { + shouldDisableBottomSheetMaxHeight( true ); + onCloseBottomSheet( null ); + }, [] ); + + // function afterHardwareButtonPress() { + // onHardwareButtonPress( null ); + // shouldDisableBottomSheetMaxHeight( true ); + // } + + const PaletteScreenView = useRef( () => ( + + + + ) ); + + const PickerScreenView = useRef( () => ( + + + + ) ); + + const GradientPickerView = useRef( () => ( + + + + ) ); + + return ( + + + + + + + ); +} - useEffect( () => { - onHardwareButtonPress( () => { - if ( isCustomScreen ) { - onCustomScreenToggle( false ); - } else if ( isCustomGradientScreen ) { - onCustomGradientScreenToggle( false ); - } else { - onReplaceSubsheet( - subsheets[ 0 ], - {}, - afterHardwareButtonPress() - ); +export default ColorSettings; + +const PickerScreen = () => { + const route = useRoute(); + const navigation = useNavigation(); + const { + onShouldEnableInnerHandling, + shouldDisableBottomSheetMaxHeight, + onCloseBottomSheet, + isBottomSheetContentScrolling, + } = useContext( BottomSheetContext ); + const { setColor, currentValue, isGradientColor } = route.params; + return ( + + ); +}; - useEffect( () => { - performLayoutAnimation(); - }, [ isCustomGadientShown ] ); +const GradientPickerScreen = () => { + const route = useRoute(); + const navigation = useNavigation(); + const { setColor, currentValue, isGradientColor } = route.params; + return ( + + + + + ); +}; - useEffect( () => { - setCurrentSegment( segments[ selectedSegmentIndex ] ); - shouldDisableBottomSheetMaxHeight( true ); - onCloseBottomSheet( null ); - }, [] ); +const PaletteScreen = () => { + const route = useRoute(); + const navigation = useNavigation(); + const { + label, + onColorChange, + onGradientChange, + colorValue, + defaultSettings, + } = route.params || {}; + const { segments, isGradient } = colorsUtils; - function afterHardwareButtonPress() { - onHardwareButtonPress( null ); - shouldDisableBottomSheetMaxHeight( true ); - } + const [ currentValue, setCurrentValue ] = useState( colorValue ); + const isGradientColor = isGradient( currentValue ); + const selectedSegmentIndex = isGradientColor ? 1 : 0; - function onCustomScreenToggle( shouldShow ) { - performLayoutAnimation(); - setIsCustomScreen( shouldShow ); - } + const [ currentSegment, setCurrentSegment ] = useState( + segments[ selectedSegmentIndex ] + ); - function onCustomGradientScreenToggle( shouldShow ) { - performLayoutAnimation(); - setIsCustomGradientScreen( shouldShow ); - } + const horizontalSeparatorStyle = usePreferredColorSchemeStyle( + styles.horizontalSeparator, + styles.horizontalSeparatorDark + ); - function onCustomPress() { - if ( isSolidSegment ) { - onCustomScreenToggle( true ); - } else { - onCustomGradientScreenToggle( true ); - } - } + const isSolidSegment = currentSegment === segments[ 0 ]; + const isCustomGadientShown = ! isSolidSegment && isGradientColor; - function setColor( color ) { + const setColor = ( color ) => { setCurrentValue( color ); if ( isSolidSegment && onColorChange && onGradientChange ) { onColorChange( color ); @@ -118,6 +223,23 @@ function ColorSettings( { onGradientChange( color ); onColorChange( '' ); } + }; + + function onCustomPress() { + if ( isSolidSegment ) { + navigation.navigate( 'Picker', { + setColor, + isGradientColor, + currentValue, + } ); + } else { + navigation.navigate( 'GradientPicker', { + setColor, + isGradientColor, + currentValue, + isSolidSegment, + } ); + } } function getFooter() { @@ -160,41 +282,18 @@ function ColorSettings( { } return ( - - { isCustomScreen && ( - - onCustomScreenToggle( false ) } - onCloseBottomSheet={ onCloseBottomSheet } - isBottomSheetContentScrolling={ - isBottomSheetContentScrolling - } - /> - - ) } - { ! isCustomScreen && ! isCustomGradientScreen && ( + + { ( { shouldEnableBottomSheetScroll } ) => ( - onReplaceSubsheet( subsheets[ 0 ] ) - } + leftButtonOnPress={ navigation.goBack } /> - onCustomGradientScreenToggle( true ) - } + onPress={ onCustomPress } withColorIndicator={ false } /> @@ -219,23 +316,6 @@ function ColorSettings( { { getFooter() } ) } - { isCustomGradientScreen && ( - - - onCustomGradientScreenToggle( false ) - } - /> - - - ) } - + ); -} - -export default ColorSettings; +}; diff --git a/packages/react-native-bridge/android/build.gradle b/packages/react-native-bridge/android/build.gradle index 9eb117f9d2754..3c2485cb35d20 100644 --- a/packages/react-native-bridge/android/build.gradle +++ b/packages/react-native-bridge/android/build.gradle @@ -155,6 +155,11 @@ dependencies { implementation project(':react-native-video') implementation project(':@react-native-community_slider') implementation project(':react-native-get-random-values') + implementation project(':@react-native-community_masked-view') + implementation project(':react-native-gesture-handler') + implementation project(':react-native-screens') + implementation project(':react-native-safe-area-context') + implementation project(':react-native-reanimated') implementation 'com.facebook.react:react-native:+' } else { From 5608682e29c405e5432743e56a20e4b2faae6d50 Mon Sep 17 00:00:00 2001 From: Piotr Drapich Date: Wed, 8 Jul 2020 12:56:52 +0200 Subject: [PATCH 05/52] Fix gradient picker --- .../src/custom-gradient-picker/index.native.js | 9 +++++++-- .../components/src/mobile/color-settings/index.native.js | 6 +----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/components/src/custom-gradient-picker/index.native.js b/packages/components/src/custom-gradient-picker/index.native.js index 696078941d5a6..71447f43e9f06 100644 --- a/packages/components/src/custom-gradient-picker/index.native.js +++ b/packages/components/src/custom-gradient-picker/index.native.js @@ -2,6 +2,7 @@ * External dependencies */ import { get, omit } from 'lodash'; +import { useRoute, useNavigation } from '@react-navigation/native'; /** * WordPress dependencies */ @@ -22,7 +23,10 @@ import { } from './constants'; import styles from './style.scss'; -function CustomGradientPicker( { currentValue, setColor, isGradientColor } ) { +function CustomGradientPicker() { + const route = useRoute(); + const navigation = useNavigation(); + const { setColor, currentValue, isGradientColor } = route.params; const [ gradientOrientation, setGradientOrientation ] = useState( HORIZONTAL_GRADIENT_ORIENTATION ); @@ -63,6 +67,7 @@ function CustomGradientPicker( { currentValue, setColor, isGradientColor } ) { function onGradientTypeChange( type ) { const gradientColor = getGradientColor( type ); performLayoutAnimation(); + navigation.setParams( { currentValue: gradientColor } ); setColor( gradientColor ); } @@ -76,6 +81,7 @@ function CustomGradientPicker( { currentValue, setColor, isGradientColor } ) { } ); if ( isGradientColor && gradientColor !== currentValue ) { + navigation.setParams( { currentValue: gradientColor } ); setColor( gradientColor ); } } @@ -87,7 +93,6 @@ function CustomGradientPicker( { currentValue, setColor, isGradientColor } ) { DEFAULT_LINEAR_GRADIENT_ANGLE ); } - return ( <> diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 61227d58324b5..cf5fce04bf653 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -175,11 +175,7 @@ const GradientPickerScreen = () => { screen={ __( 'Customize Gradient' ) } leftButtonOnPress={ navigation.goBack } /> - + ); }; From 47db53a924dbc01344354ada202649859784588c Mon Sep 17 00:00:00 2001 From: Piotr Drapich Date: Wed, 8 Jul 2020 15:56:18 +0200 Subject: [PATCH 06/52] remove unused variables --- packages/components/src/mobile/color-settings/index.native.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index cf5fce04bf653..9105c1e2b8067 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -166,9 +166,7 @@ const PickerScreen = () => { }; const GradientPickerScreen = () => { - const route = useRoute(); const navigation = useNavigation(); - const { setColor, currentValue, isGradientColor } = route.params; return ( Date: Wed, 8 Jul 2020 16:20:03 +0200 Subject: [PATCH 07/52] Use FlatList inside the BottomSheet --- .../src/components/inserter/menu.native.js | 31 ++++--- .../src/mobile/bottom-sheet/index.native.js | 89 +++++++++++++++---- 2 files changed, 88 insertions(+), 32 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 43d96a8dafd04..7d1a9ce8c8faa 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -11,7 +11,7 @@ import { Component } from '@wordpress/element'; import { createBlock, rawHandler } from '@wordpress/blocks'; import { withDispatch, withSelect } from '@wordpress/data'; import { withInstanceId, compose } from '@wordpress/compose'; -import { BottomSheet } from '@wordpress/components'; +import { BottomSheet, BottomSheetConsumer } from '@wordpress/components'; /** * Internal dependencies @@ -127,21 +127,26 @@ export class InserterMenu extends Component { onClose={ this.onClose } contentStyle={ [ styles.content, bottomPadding ] } hideHeader + isChildrenScrollable > - ( - + + { ( { listProps } ) => ( + ( + + ) } + keyExtractor={ ( item ) => item.name } + renderItem={ this.renderItem } + { ...listProps } + /> ) } - keyExtractor={ ( item ) => item.name } - renderItem={ this.renderItem } - /> + ); diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 655e2d414dad6..901cb6eb45e85 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -48,6 +48,9 @@ class BottomSheet extends Component { this.onShouldSetBottomSheetMaxHeight = this.onShouldSetBottomSheetMaxHeight.bind( this ); + this.onScrollBeginDrag = this.onScrollBeginDrag.bind( this ); + this.onScrollEndDrag = this.onScrollEndDrag.bind( this ); + this.onDimensionsChange = this.onDimensionsChange.bind( this ); this.onCloseBottomSheet = this.onCloseBottomSheet.bind( this ); this.onHandleClosingBottomSheet = this.onHandleClosingBottomSheet.bind( @@ -237,6 +240,14 @@ class BottomSheet extends Component { onClose(); } + onScrollBeginDrag() { + this.isScrolling( true ); + } + + onScrollEndDrag() { + this.isScrolling( false ); + } + onHardwareButtonPress() { const { onClose } = this.props; const { onHardwareButtonPress } = this.state; @@ -270,6 +281,7 @@ class BottomSheet extends Component { getStylesFromColorScheme, onDismiss, children, + isChildrenScrollable, ...rest } = this.props; const { @@ -317,6 +329,26 @@ class BottomSheet extends Component { styles.backgroundDark ); + const listProps = { + disableScrollViewPanResponder: true, + bounces, + onScroll: this.onScroll, + onScrollBeginDrag: this.onScrollBeginDrag, + onScrollEndDrag: this.onScrollEndDrag, + scrollEventThrottle: 16, + contentContainerStyle: [ + styles.content, + hideHeader && styles.emptyHeader, + contentStyle, + isChildrenScrollable && { + flexGrow: 1, + paddingBottom: safeAreaBottomInset, + }, + ], + scrollEnabled, + automaticallyAdjustContentInsets: false, + }; + return ( { ! hideHeader && getHeader() } - this.isScrolling( true ) } - onScrollEndDrag={ () => this.isScrolling( false ) } - scrollEventThrottle={ 16 } - style={ isMaxHeightSet ? { maxHeight } : {} } - contentContainerStyle={ [ - styles.content, - hideHeader && styles.emptyHeader, - contentStyle, - ] } - scrollEnabled={ scrollEnabled } - automaticallyAdjustContentInsets={ false } - > + { ! isChildrenScrollable ? ( + + + + <>{ children } + + + + + ) : ( - <>{ children } + + <>{ children } + - - + ) } ); From fb12d7d0ecc058dea540613d1ab05be77d1bf99f Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 9 Jul 2020 17:19:28 +0200 Subject: [PATCH 08/52] remove unused code --- .../block-settings/container.native.js | 11 +++-- .../src/color-palette/index.native.js | 2 - .../custom-gradient-picker/index.native.js | 2 - .../bottom-sheet-context.native.js | 6 --- .../src/mobile/bottom-sheet/index.native.js | 43 +++++-------------- .../src/mobile/color-settings/index.native.js | 7 ++- 6 files changed, 24 insertions(+), 47 deletions(-) diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index 2fbacdcfc244e..9f64d753cc265 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -7,6 +7,7 @@ import { NavigationContainer, useFocusEffect, + useIsFocused, DefaultTheme, } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; @@ -32,6 +33,7 @@ const forFade = ( { current } ) => ( { const BottomSheetScreen = ( { children, setHeight } ) => { const height = useRef( { maxHeight: 0 } ); + const isFocused = useIsFocused(); useFocusEffect( useCallback( () => { if ( height.current.maxHeight !== 0 ) { @@ -42,7 +44,10 @@ const BottomSheetScreen = ( { children, setHeight } ) => { ); const onLayout = ( e ) => { - if ( height.current.maxHeight !== e.nativeEvent.layout.height ) { + if ( + height.current.maxHeight !== e.nativeEvent.layout.height && + isFocused + ) { height.current.maxHeight = e.nativeEvent.layout.height; setHeight( e.nativeEvent.layout.height ); } @@ -62,8 +67,8 @@ function BottomSheetSettings( { if ( heightValue !== maxHeight ) { Animated.timing( heightValue, { toValue: maxHeight, - duration: 300, - easing: Easing.ease, + duration: 200, + easing: Easing.quad, } ).start(); } }; diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 1f04cbf566ddf..f905392972674 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -24,7 +24,6 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import styles from './style.scss'; import ColorIndicator from '../color-indicator'; import { colorsUtils } from '../mobile/color-settings/utils'; -import { performLayoutAnimation } from '../mobile/layout-animation'; const ANIMATION_DURATION = 200; @@ -132,7 +131,6 @@ function ColorPalette( { contentWidth - scrollPosition - customIndicatorWidth < width; if ( isCustomGradientColor ) { - performLayoutAnimation(); if ( ! isIOS ) { // Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list. // https://github.com/facebook/react-native/issues/27504 diff --git a/packages/components/src/custom-gradient-picker/index.native.js b/packages/components/src/custom-gradient-picker/index.native.js index 71447f43e9f06..da030a8d9f08a 100644 --- a/packages/components/src/custom-gradient-picker/index.native.js +++ b/packages/components/src/custom-gradient-picker/index.native.js @@ -14,7 +14,6 @@ import { useState } from '@wordpress/element'; * Internal dependencies */ import { colorsUtils } from '../mobile/color-settings/utils'; -import { performLayoutAnimation } from '../mobile/layout-animation'; import { getGradientParsed } from './utils'; import { serializeGradient } from './serializer'; import { @@ -66,7 +65,6 @@ function CustomGradientPicker() { function onGradientTypeChange( type ) { const gradientColor = getGradientColor( type ); - performLayoutAnimation(); navigation.setParams( { currentValue: gradientColor } ); setColor( gradientColor ); } diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js index 92dbe9f3036ea..6c838dc339269 100644 --- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js +++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js @@ -31,12 +31,6 @@ export const BottomSheetContext = createContext( { onCloseBottomSheet: () => {}, // Android only: Function called to control android hardware back button functionality onHardwareButtonPress: () => {}, - // Function called to navigate to another subsheet - onReplaceSubsheet: () => {}, - // Object contains extra data passed to the current subsheet - extraProps: {}, - // Specifies the currently active subsheet name - currentScreen: undefined, } ); export const { diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 901cb6eb45e85..a92ad94d2bc91 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -36,7 +36,6 @@ import ColorCell from './color-cell'; import RadioCell from './radio-cell'; import KeyboardAvoidingView from './keyboard-avoiding-view'; import { BottomSheetProvider } from './bottom-sheet-context'; -import { performLayoutAnimation } from '../layout-animation'; class BottomSheet extends Component { constructor() { @@ -60,7 +59,6 @@ class BottomSheet extends Component { this.onHandleHardwareButtonPress = this.onHandleHardwareButtonPress.bind( this ); - this.onReplaceSubsheet = this.onReplaceSubsheet.bind( this ); this.keyboardWillShow = this.keyboardWillShow.bind( this ); this.keyboardDidHide = this.keyboardDidHide.bind( this ); @@ -74,8 +72,6 @@ class BottomSheet extends Component { onCloseBottomSheet: null, onHardwareButtonPress: null, isMaxHeightSet: true, - currentScreen: '', - extraProps: {}, }; SafeArea.getSafeAreaInsetsForRootView().then( @@ -139,14 +135,6 @@ class BottomSheet extends Component { this.keyboardDidHideListener.remove(); } - componentDidUpdate( prevProps ) { - const { isVisible } = this.props; - - if ( ! prevProps.isVisible && isVisible ) { - this.setState( { currentScreen: '' } ); - } - } - onSafeAreaInsetsUpdate( result ) { const { safeAreaBottomInset } = this.state; if ( this.safeAreaEventSubscription === null ) { @@ -257,18 +245,6 @@ class BottomSheet extends Component { return onClose(); } - onReplaceSubsheet( destination, extraProps, callback ) { - performLayoutAnimation(); - - this.setState( - { - currentScreen: destination, - extraProps: extraProps || {}, - }, - callback - ); - } - render() { const { title = '', @@ -291,8 +267,6 @@ class BottomSheet extends Component { isScrolling, scrollEnabled, isMaxHeightSet, - extraProps, - currentScreen, } = this.state; const panResponder = PanResponder.create( { @@ -389,7 +363,16 @@ class BottomSheet extends Component { { ! hideHeader && getHeader() } { ! isChildrenScrollable ? ( - + @@ -424,9 +404,6 @@ class BottomSheet extends Component { .onHandleClosingBottomSheet, onHardwareButtonPress: this .onHandleHardwareButtonPress, - onReplaceSubsheet: this.onReplaceSubsheet, - extraProps, - currentScreen, listProps, } } > diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 9105c1e2b8067..ee35ee320b346 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -25,6 +25,7 @@ import { import { useRoute, useFocusEffect, + useIsFocused, useNavigation, } from '@react-navigation/native'; /** @@ -42,6 +43,7 @@ import styles from './style.scss'; const BottomSheetScreen = ( { children, setHeight } ) => { const height = useRef( { maxHeight: 0 } ); + const isFocused = useIsFocused(); useFocusEffect( useCallback( () => { if ( height.current.maxHeight !== 0 ) { @@ -52,7 +54,10 @@ const BottomSheetScreen = ( { children, setHeight } ) => { ); const onLayout = ( e ) => { - if ( height.current.maxHeight !== e.nativeEvent.layout.height ) { + if ( + height.current.maxHeight !== e.nativeEvent.layout.height && + isFocused + ) { height.current.maxHeight = e.nativeEvent.layout.height; setHeight( e.nativeEvent.layout.height ); } From 5627439ff4c36ed7838ae1565924c077db15163c Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 9 Jul 2020 17:44:55 +0200 Subject: [PATCH 09/52] Move BottomSheetScreen to separate file --- .../block-settings/container.native.js | 57 ++------ .../src/mobile/bottom-sheet/index.native.js | 2 + .../bottom-sheet/navigation-screen.native.js | 45 ++++++ .../src/mobile/color-settings/index.native.js | 130 ++++++------------ 4 files changed, 101 insertions(+), 133 deletions(-) create mode 100644 packages/components/src/mobile/bottom-sheet/navigation-screen.native.js diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index 9f64d753cc265..9f03bb075002e 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -4,12 +4,7 @@ /** * External dependencies */ -import { - NavigationContainer, - useFocusEffect, - useIsFocused, - DefaultTheme, -} from '@react-navigation/native'; +import { NavigationContainer, DefaultTheme } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { InspectorControls, @@ -18,43 +13,13 @@ import { import { BottomSheet, ColorSettings } from '@wordpress/components'; import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; -import { useRef, useCallback } from '@wordpress/element'; -import { View, Animated, Easing } from 'react-native'; +import { useRef } from '@wordpress/element'; +import { Animated, Easing } from 'react-native'; /** * Internal dependencies */ import styles from './container.native.scss'; -const forFade = ( { current } ) => ( { - cardStyle: { - opacity: current.progress, - }, -} ); - -const BottomSheetScreen = ( { children, setHeight } ) => { - const height = useRef( { maxHeight: 0 } ); - const isFocused = useIsFocused(); - useFocusEffect( - useCallback( () => { - if ( height.current.maxHeight !== 0 ) { - setHeight( height.current.maxHeight ); - } - return () => {}; - }, [] ) - ); - - const onLayout = ( e ) => { - if ( - height.current.maxHeight !== e.nativeEvent.layout.height && - isFocused - ) { - height.current.maxHeight = e.nativeEvent.layout.height; - setHeight( e.nativeEvent.layout.height ); - } - }; - return { children }; -}; - const Stack = createStackNavigator(); function BottomSheetSettings( { @@ -74,15 +39,15 @@ function BottomSheetSettings( { }; const MainScreen = useRef( () => ( - + - + ) ); const DetailsScreen = useRef( () => ( - + - + ) ); const backgroundStyle = usePreferredColorSchemeStyle( @@ -115,16 +80,12 @@ function BottomSheetSettings( { } } > diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index a92ad94d2bc91..d1dacfc0f0f2e 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -34,6 +34,7 @@ import SwitchCell from './switch-cell'; import RangeCell from './range-cell'; import ColorCell from './color-cell'; import RadioCell from './radio-cell'; +import NavigationScreen from './navigation-screen'; import KeyboardAvoidingView from './keyboard-avoiding-view'; import { BottomSheetProvider } from './bottom-sheet-context'; @@ -446,5 +447,6 @@ ThemedBottomSheet.SwitchCell = SwitchCell; ThemedBottomSheet.RangeCell = RangeCell; ThemedBottomSheet.ColorCell = ColorCell; ThemedBottomSheet.RadioCell = RadioCell; +ThemedBottomSheet.NavigationScreen = NavigationScreen; export default ThemedBottomSheet; diff --git a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js new file mode 100644 index 0000000000000..9dee4b6a525c5 --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js @@ -0,0 +1,45 @@ +/** + * External dependencies + */ +import { useFocusEffect, useIsFocused } from '@react-navigation/native'; +import { View } from 'react-native'; + +/** + * WordPress dependencies + */ + +import { useRef, useCallback } from '@wordpress/element'; + +const BottomSheetScreen = ( { children, setHeight } ) => { + const height = useRef( { maxHeight: 0 } ); + const isFocused = useIsFocused(); + useFocusEffect( + useCallback( () => { + if ( height.current.maxHeight !== 0 ) { + setHeight( height.current.maxHeight ); + } + return () => {}; + }, [] ) + ); + + const onLayout = ( e ) => { + if ( + height.current.maxHeight !== e.nativeEvent.layout.height && + isFocused + ) { + height.current.maxHeight = e.nativeEvent.layout.height; + setHeight( e.nativeEvent.layout.height ); + } + }; + return { children }; +}; + +BottomSheetScreen.options = { + cardStyleInterpolator: ( { current } ) => ( { + cardStyle: { + opacity: current.progress, + }, + } ), +}; + +export default BottomSheetScreen; diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index ee35ee320b346..c7773ce1d7220 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -8,26 +8,15 @@ import { createStackNavigator } from '@react-navigation/stack'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { - useState, - useEffect, - useContext, - useRef, - useCallback, -} from '@wordpress/element'; +import { useState, useEffect, useContext, useRef } from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import { - BottomSheetConsumer, ColorControl, PanelBody, BottomSheetContext, + BottomSheet, } from '@wordpress/components'; -import { - useRoute, - useFocusEffect, - useIsFocused, - useNavigation, -} from '@react-navigation/native'; +import { useRoute, useNavigation } from '@react-navigation/native'; /** * Internal dependencies */ @@ -41,35 +30,6 @@ import { colorsUtils } from './utils'; import styles from './style.scss'; -const BottomSheetScreen = ( { children, setHeight } ) => { - const height = useRef( { maxHeight: 0 } ); - const isFocused = useIsFocused(); - useFocusEffect( - useCallback( () => { - if ( height.current.maxHeight !== 0 ) { - setHeight( height.current.maxHeight ); - } - return () => {}; - }, [] ) - ); - - const onLayout = ( e ) => { - if ( - height.current.maxHeight !== e.nativeEvent.layout.height && - isFocused - ) { - height.current.maxHeight = e.nativeEvent.layout.height; - setHeight( e.nativeEvent.layout.height ); - } - }; - return { children }; -}; - -const forFade = ( { current } ) => ( { - cardStyle: { - opacity: current.progress, - }, -} ); const Stack = createStackNavigator(); function ColorSettings( { defaultSettings } ) { @@ -96,21 +56,24 @@ function ColorSettings( { defaultSettings } ) { // } const PaletteScreenView = useRef( () => ( - + - + ) ); const PickerScreenView = useRef( () => ( - + - + ) ); const GradientPickerView = useRef( () => ( - + - + ) ); return ( @@ -124,18 +87,18 @@ function ColorSettings( { defaultSettings } ) { @@ -152,6 +115,7 @@ const PickerScreen = () => { shouldDisableBottomSheetMaxHeight, onCloseBottomSheet, isBottomSheetContentScrolling, + shouldEnableBottomSheetScroll, } = useContext( BottomSheetContext ); const { setColor, currentValue, isGradientColor } = route.params; return ( @@ -166,6 +130,7 @@ const PickerScreen = () => { onNavigationBack={ navigation.goBack } onCloseBottomSheet={ onCloseBottomSheet } isBottomSheetContentScrolling={ isBottomSheetContentScrolling } + shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll } /> ); }; @@ -186,6 +151,7 @@ const GradientPickerScreen = () => { const PaletteScreen = () => { const route = useRoute(); const navigation = useNavigation(); + const { shouldEnableBottomSheetScroll } = useContext( BottomSheetContext ); const { label, onColorChange, @@ -281,40 +247,34 @@ const PaletteScreen = () => { } return ( - - { ( { shouldEnableBottomSheetScroll } ) => ( - - - - { isCustomGadientShown && ( - <> - - - - - - ) } + + + + { isCustomGadientShown && ( + <> - { getFooter() } - + + + + ) } - + + { getFooter() } + ); }; From 29c890a6bfe36eee593f8bd0be085d89e523ec78 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 9 Jul 2020 18:49:24 +0200 Subject: [PATCH 10/52] Split color-settings to few files --- .../src/mobile/bottom-sheet/index.native.js | 1 + .../gradient-picker-screen.native.js | 31 +++ .../src/mobile/color-settings/index.native.js | 206 +----------------- .../color-settings/palette.screen.native.js | 160 ++++++++++++++ .../color-settings/picker-screen.native.js | 45 ++++ 5 files changed, 248 insertions(+), 195 deletions(-) create mode 100644 packages/components/src/mobile/color-settings/gradient-picker-screen.native.js create mode 100644 packages/components/src/mobile/color-settings/palette.screen.native.js create mode 100644 packages/components/src/mobile/color-settings/picker-screen.native.js diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index d1dacfc0f0f2e..9be7adb6fe617 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -227,6 +227,7 @@ class BottomSheet extends Component { onCloseBottomSheet(); } onClose(); + this.onShouldSetBottomSheetMaxHeight( true ); } onScrollBeginDrag() { diff --git a/packages/components/src/mobile/color-settings/gradient-picker-screen.native.js b/packages/components/src/mobile/color-settings/gradient-picker-screen.native.js new file mode 100644 index 0000000000000..1867da5db87e5 --- /dev/null +++ b/packages/components/src/mobile/color-settings/gradient-picker-screen.native.js @@ -0,0 +1,31 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; +import { useNavigation } from '@react-navigation/native'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import CustomGradientPicker from '../../custom-gradient-picker'; +import NavigationHeader from '../bottom-sheet/navigation-header'; + +const GradientPickerScreen = () => { + const navigation = useNavigation(); + return ( + + + + + ); +}; + +export default GradientPickerScreen; diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index c7773ce1d7220..8f7dbe07f2570 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -1,47 +1,35 @@ /** * External dependencies */ -import { View, Text, Animated } from 'react-native'; +import { View } from 'react-native'; import { createStackNavigator } from '@react-navigation/stack'; /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { useState, useEffect, useContext, useRef } from '@wordpress/element'; -import { usePreferredColorSchemeStyle } from '@wordpress/compose'; -import { - ColorControl, - PanelBody, - BottomSheetContext, - BottomSheet, -} from '@wordpress/components'; -import { useRoute, useNavigation } from '@react-navigation/native'; +import { BottomSheetContext, BottomSheet } from '@wordpress/components'; +import { useRoute } from '@react-navigation/native'; + /** * Internal dependencies */ -import ColorPicker from '../../color-picker'; -import ColorPalette from '../../color-palette'; -import ColorIndicator from '../../color-indicator'; -import CustomGradientPicker from '../../custom-gradient-picker'; -import NavigationHeader from '../bottom-sheet/navigation-header'; -import SegmentedControls from '../segmented-control'; -import { colorsUtils } from './utils'; - -import styles from './style.scss'; +import PickerScreen from './picker-screen'; +import GradientPickerScreen from './gradient-picker-screen'; +import PaletteScreen from './palette.screen'; const Stack = createStackNavigator(); function ColorSettings( { defaultSettings } ) { const route = useRoute(); - const heightValue = useRef( new Animated.Value( 1 ) ).current; + const [ heightValue, setHeightValue ] = useState( 1 ); const { onCloseBottomSheet, shouldDisableBottomSheetMaxHeight, } = useContext( BottomSheetContext ); const setHeight = ( maxHeight ) => { if ( heightValue !== maxHeight ) { - heightValue.setValue( maxHeight ); + setHeightValue( maxHeight ); } }; @@ -77,7 +65,7 @@ function ColorSettings( { defaultSettings } ) { ) ); return ( - + - + ); } export default ColorSettings; - -const PickerScreen = () => { - const route = useRoute(); - const navigation = useNavigation(); - const { - onShouldEnableInnerHandling, - shouldDisableBottomSheetMaxHeight, - onCloseBottomSheet, - isBottomSheetContentScrolling, - shouldEnableBottomSheetScroll, - } = useContext( BottomSheetContext ); - const { setColor, currentValue, isGradientColor } = route.params; - return ( - - ); -}; - -const GradientPickerScreen = () => { - const navigation = useNavigation(); - return ( - - - - - ); -}; - -const PaletteScreen = () => { - const route = useRoute(); - const navigation = useNavigation(); - const { shouldEnableBottomSheetScroll } = useContext( BottomSheetContext ); - const { - label, - onColorChange, - onGradientChange, - colorValue, - defaultSettings, - } = route.params || {}; - const { segments, isGradient } = colorsUtils; - - const [ currentValue, setCurrentValue ] = useState( colorValue ); - const isGradientColor = isGradient( currentValue ); - const selectedSegmentIndex = isGradientColor ? 1 : 0; - - const [ currentSegment, setCurrentSegment ] = useState( - segments[ selectedSegmentIndex ] - ); - - const horizontalSeparatorStyle = usePreferredColorSchemeStyle( - styles.horizontalSeparator, - styles.horizontalSeparatorDark - ); - - const isSolidSegment = currentSegment === segments[ 0 ]; - const isCustomGadientShown = ! isSolidSegment && isGradientColor; - - const setColor = ( color ) => { - setCurrentValue( color ); - if ( isSolidSegment && onColorChange && onGradientChange ) { - onColorChange( color ); - onGradientChange( '' ); - } else if ( isSolidSegment && onColorChange ) { - onColorChange( color ); - } else if ( ! isSolidSegment && onGradientChange ) { - onGradientChange( color ); - onColorChange( '' ); - } - }; - - function onCustomPress() { - if ( isSolidSegment ) { - navigation.navigate( 'Picker', { - setColor, - isGradientColor, - currentValue, - } ); - } else { - navigation.navigate( 'GradientPicker', { - setColor, - isGradientColor, - currentValue, - isSolidSegment, - } ); - } - } - - function getFooter() { - if ( onGradientChange ) { - return ( - - ) - } - /> - ); - } - return ( - - - { currentValue && ( - - ) } - - - { __( 'Select a color' ) } - - - - ); - } - - return ( - - - - { isCustomGadientShown && ( - <> - - - - - - ) } - - { getFooter() } - - ); -}; diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js new file mode 100644 index 0000000000000..00a4a31c27970 --- /dev/null +++ b/packages/components/src/mobile/color-settings/palette.screen.native.js @@ -0,0 +1,160 @@ +/** + * External dependencies + */ +import { View, Text } from 'react-native'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useState, useContext } from '@wordpress/element'; +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; +import { + ColorControl, + PanelBody, + BottomSheetContext, +} from '@wordpress/components'; +import { useRoute, useNavigation } from '@react-navigation/native'; +/** + * Internal dependencies + */ +import ColorPalette from '../../color-palette'; +import ColorIndicator from '../../color-indicator'; +import NavigationHeader from '../bottom-sheet/navigation-header'; +import SegmentedControls from '../segmented-control'; +import { colorsUtils } from './utils'; + +import styles from './style.scss'; + +const PaletteScreen = () => { + const route = useRoute(); + const navigation = useNavigation(); + const { shouldEnableBottomSheetScroll } = useContext( BottomSheetContext ); + const { + label, + onColorChange, + onGradientChange, + colorValue, + defaultSettings, + } = route.params || {}; + const { segments, isGradient } = colorsUtils; + + const [ currentValue, setCurrentValue ] = useState( colorValue ); + const isGradientColor = isGradient( currentValue ); + const selectedSegmentIndex = isGradientColor ? 1 : 0; + + const [ currentSegment, setCurrentSegment ] = useState( + segments[ selectedSegmentIndex ] + ); + + const horizontalSeparatorStyle = usePreferredColorSchemeStyle( + styles.horizontalSeparator, + styles.horizontalSeparatorDark + ); + + const isSolidSegment = currentSegment === segments[ 0 ]; + const isCustomGadientShown = ! isSolidSegment && isGradientColor; + + const setColor = ( color ) => { + setCurrentValue( color ); + if ( isSolidSegment && onColorChange && onGradientChange ) { + onColorChange( color ); + onGradientChange( '' ); + } else if ( isSolidSegment && onColorChange ) { + onColorChange( color ); + } else if ( ! isSolidSegment && onGradientChange ) { + onGradientChange( color ); + onColorChange( '' ); + } + }; + + function onCustomPress() { + if ( isSolidSegment ) { + navigation.navigate( 'Picker', { + setColor, + isGradientColor, + currentValue, + } ); + } else { + navigation.navigate( 'GradientPicker', { + setColor, + isGradientColor, + currentValue, + isSolidSegment, + } ); + } + } + + function getFooter() { + if ( onGradientChange ) { + return ( + + ) + } + /> + ); + } + return ( + + + { currentValue && ( + + ) } + + + { __( 'Select a color' ) } + + + + ); + } + + return ( + + + + { isCustomGadientShown && ( + <> + + + + + + ) } + + { getFooter() } + + ); +}; + +export default PaletteScreen; diff --git a/packages/components/src/mobile/color-settings/picker-screen.native.js b/packages/components/src/mobile/color-settings/picker-screen.native.js new file mode 100644 index 0000000000000..4721eab2df1b0 --- /dev/null +++ b/packages/components/src/mobile/color-settings/picker-screen.native.js @@ -0,0 +1,45 @@ +/** + * External dependencies + */ +import { useRoute, useNavigation } from '@react-navigation/native'; + +/** + * WordPress dependencies + */ +import { useContext } from '@wordpress/element'; +import { BottomSheetContext } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import ColorPicker from '../../color-picker'; + +const PickerScreen = () => { + const route = useRoute(); + const navigation = useNavigation(); + const { + onShouldEnableInnerHandling, + shouldDisableBottomSheetMaxHeight, + onCloseBottomSheet, + isBottomSheetContentScrolling, + shouldEnableBottomSheetScroll, + } = useContext( BottomSheetContext ); + const { setColor, currentValue, isGradientColor } = route.params; + return ( + + ); +}; + +export default PickerScreen; From 98e6f146f66187b41ad1b5ed123d8e9a2b4e64b0 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 9 Jul 2020 20:26:08 +0200 Subject: [PATCH 11/52] add hardware back button support --- .../src/mobile/bottom-sheet/index.native.js | 4 ++-- .../bottom-sheet/navigation-screen.native.js | 20 +++++++++++++++++-- .../src/mobile/color-settings/index.native.js | 5 ----- .../android/app/build.gradle | 5 +++++ .../android/settings.gradle | 10 ++++++++++ 5 files changed, 35 insertions(+), 9 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 9be7adb6fe617..d62fe193c97ec 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -241,8 +241,8 @@ class BottomSheet extends Component { onHardwareButtonPress() { const { onClose } = this.props; const { onHardwareButtonPress } = this.state; - if ( onHardwareButtonPress ) { - return onHardwareButtonPress(); + if ( onHardwareButtonPress && onHardwareButtonPress() ) { + return; } return onClose(); } diff --git a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js index 9dee4b6a525c5..f5f1876aa15f0 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js @@ -1,20 +1,36 @@ /** * External dependencies */ -import { useFocusEffect, useIsFocused } from '@react-navigation/native'; +import { + useFocusEffect, + useIsFocused, + useNavigation, +} from '@react-navigation/native'; import { View } from 'react-native'; /** * WordPress dependencies */ +import { BottomSheetContext } from '@wordpress/components'; -import { useRef, useCallback } from '@wordpress/element'; +import { useRef, useCallback, useContext } from '@wordpress/element'; const BottomSheetScreen = ( { children, setHeight } ) => { + const navigation = useNavigation(); const height = useRef( { maxHeight: 0 } ); const isFocused = useIsFocused(); + const { onHardwareButtonPress } = useContext( BottomSheetContext ); useFocusEffect( useCallback( () => { + onHardwareButtonPress( () => { + if ( navigation.canGoBack() ) { + navigation.goBack(); + return true; + } + onHardwareButtonPress( null ); + return false; + } ); + if ( height.current.maxHeight !== 0 ) { setHeight( height.current.maxHeight ); } diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 8f7dbe07f2570..889f239830b8b 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -38,11 +38,6 @@ function ColorSettings( { defaultSettings } ) { onCloseBottomSheet( null ); }, [] ); - // function afterHardwareButtonPress() { - // onHardwareButtonPress( null ); - // shouldDisableBottomSheetMaxHeight( true ); - // } - const PaletteScreenView = useRef( () => ( diff --git a/packages/react-native-editor/android/app/build.gradle b/packages/react-native-editor/android/app/build.gradle index 3f150b4c1669d..fc595ce89b2e6 100644 --- a/packages/react-native-editor/android/app/build.gradle +++ b/packages/react-native-editor/android/app/build.gradle @@ -166,6 +166,11 @@ dependencies { implementation project(':react-native-video') implementation project(':react-native-svg') implementation project(':react-native-get-random-values') + implementation project(':@react-native-community_masked-view') + implementation project(':react-native-gesture-handler') + implementation project(':react-native-screens') + implementation project(':react-native-safe-area-context') + implementation project(':react-native-reanimated') implementation "org.wordpress:utils:$wordpressUtilsVersion" implementation 'androidx.appcompat:appcompat:1.0.0' implementation "com.facebook.react:react-native:+" // From node_modules diff --git a/packages/react-native-editor/android/settings.gradle b/packages/react-native-editor/android/settings.gradle index f7ae4dfa566f5..733c341d7fc5f 100644 --- a/packages/react-native-editor/android/settings.gradle +++ b/packages/react-native-editor/android/settings.gradle @@ -14,5 +14,15 @@ include ':react-native-linear-gradient' project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../../../node_modules/react-native-linear-gradient/android') include ':react-native-get-random-values' project(':react-native-get-random-values').projectDir = new File(rootProject.projectDir, '../../../node_modules/react-native-get-random-values/android') +include ':@react-native-community_masked-view' +project(':@react-native-community_masked-view').projectDir = new File(rootProject.projectDir, '../../../node_modules/@react-native-community/masked-view/android') +include ':react-native-gesture-handler' +project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../../../node_modules/react-native-gesture-handler/android') +include ':react-native-screens' +project(':react-native-screens').projectDir = new File(rootProject.projectDir, '../../../node_modules/react-native-screens/android') +include ':react-native-safe-area-context' +project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../../../node_modules/react-native-safe-area-context/android') +include ':react-native-reanimated' +project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../../../node_modules/react-native-reanimated/android') include ':app' From 77d797af5c6b9211eeb64af9f7ecd427e4ffb1a4 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 9 Jul 2020 20:30:47 +0200 Subject: [PATCH 12/52] fix max height after back --- .../src/mobile/bottom-sheet/navigation-screen.native.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js index f5f1876aa15f0..5ace69872c464 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js @@ -19,11 +19,15 @@ const BottomSheetScreen = ( { children, setHeight } ) => { const navigation = useNavigation(); const height = useRef( { maxHeight: 0 } ); const isFocused = useIsFocused(); - const { onHardwareButtonPress } = useContext( BottomSheetContext ); + const { + onHardwareButtonPress, + shouldDisableBottomSheetMaxHeight, + } = useContext( BottomSheetContext ); useFocusEffect( useCallback( () => { onHardwareButtonPress( () => { if ( navigation.canGoBack() ) { + shouldDisableBottomSheetMaxHeight( true ); navigation.goBack(); return true; } From 5f3dafa15ef629cca1dcb0ce8cc2f269f91823a0 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 9 Jul 2020 20:49:15 +0200 Subject: [PATCH 13/52] fix android padding when there is no safe area --- .../src/mobile/bottom-sheet/index.native.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index d62fe193c97ec..71437f1bbf548 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -318,7 +318,8 @@ class BottomSheet extends Component { contentStyle, isChildrenScrollable && { flexGrow: 1, - paddingBottom: safeAreaBottomInset, + paddingBottom: + safeAreaBottomInset || styles.content.paddingRight, }, ], scrollEnabled, @@ -392,7 +393,13 @@ class BottomSheet extends Component { <>{ children } - + ) : ( Date: Fri, 10 Jul 2020 15:14:42 +0200 Subject: [PATCH 14/52] Add BottomSheet.NavigationContainer --- .../block-settings/container.native.js | 31 +++++---------- packages/components/src/index.native.js | 1 + .../src/mobile/bottom-sheet/index.native.js | 2 + .../navigation-container.native.js | 38 +++++++++++++++++++ .../bottom-sheet/navigation-screen.native.js | 3 +- .../src/mobile/color-settings/index.native.js | 22 +++-------- 6 files changed, 58 insertions(+), 39 deletions(-) create mode 100644 packages/components/src/mobile/bottom-sheet/navigation-container.native.js diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index 9f03bb075002e..44c9278f36cc3 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -6,15 +6,11 @@ */ import { NavigationContainer, DefaultTheme } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; -import { - InspectorControls, - SETTINGS_DEFAULTS as defaultSettings, -} from '@wordpress/block-editor'; +import { InspectorControls } from '@wordpress/block-editor'; import { BottomSheet, ColorSettings } from '@wordpress/components'; import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; import { useRef } from '@wordpress/element'; -import { Animated, Easing } from 'react-native'; /** * Internal dependencies */ @@ -25,28 +21,18 @@ const Stack = createStackNavigator(); function BottomSheetSettings( { editorSidebarOpened, closeGeneralSidebar, + settings, ...props } ) { - const heightValue = useRef( new Animated.Value( 1 ) ).current; - const setHeight = ( maxHeight ) => { - if ( heightValue !== maxHeight ) { - Animated.timing( heightValue, { - toValue: maxHeight, - duration: 200, - easing: Easing.quad, - } ).start(); - } - }; - const MainScreen = useRef( () => ( - + ) ); const DetailsScreen = useRef( () => ( - - + + ) ); @@ -71,7 +57,7 @@ function BottomSheetSettings( { adjustToContentHeight { ...props } > - + - + ); } @@ -99,8 +85,9 @@ function BottomSheetSettings( { export default compose( [ withSelect( ( select ) => { const { isEditorSidebarOpened } = select( 'core/edit-post' ); - + const { getSettings } = select( 'core/block-editor' ); return { + settings: getSettings(), editorSidebarOpened: isEditorSidebarOpened(), }; } ), diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 8e0168b890eb9..fc6e0724f47a4 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -60,6 +60,7 @@ export * from './text'; export { default as BottomSheet } from './mobile/bottom-sheet'; export { BottomSheetConsumer, + BottomSheetProvider, BottomSheetContext, } from './mobile/bottom-sheet/bottom-sheet-context'; export { default as HTMLTextInput } from './mobile/html-text-input'; diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 71437f1bbf548..2fe17187e3cc4 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -35,6 +35,7 @@ import RangeCell from './range-cell'; import ColorCell from './color-cell'; import RadioCell from './radio-cell'; import NavigationScreen from './navigation-screen'; +import NavigationContainer from './navigation-container'; import KeyboardAvoidingView from './keyboard-avoiding-view'; import { BottomSheetProvider } from './bottom-sheet-context'; @@ -456,5 +457,6 @@ ThemedBottomSheet.RangeCell = RangeCell; ThemedBottomSheet.ColorCell = ColorCell; ThemedBottomSheet.RadioCell = RadioCell; ThemedBottomSheet.NavigationScreen = NavigationScreen; +ThemedBottomSheet.NavigationContainer = NavigationContainer; export default ThemedBottomSheet; diff --git a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js new file mode 100644 index 0000000000000..93e6ab04063a6 --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js @@ -0,0 +1,38 @@ +/** + * External dependencies + */ +import { Animated, Easing } from 'react-native'; + +/** + * WordPress dependencies + */ +import { BottomSheetContext, BottomSheetProvider } from '@wordpress/components'; +import { useRef, useContext } from '@wordpress/element'; + +function BottomSheetNavigationContainer( { children, animate } ) { + const heightValue = useRef( new Animated.Value( 1 ) ).current; + const context = useContext( BottomSheetContext ); + const setHeight = ( maxHeight ) => { + if ( heightValue !== maxHeight ) { + if ( animate ) { + Animated.timing( heightValue, { + toValue: maxHeight, + duration: 200, + easing: Easing.ease, + } ).start(); + } else { + heightValue.setValue( maxHeight ); + } + } + }; + + return ( + + + { children } + + + ); +} + +export default BottomSheetNavigationContainer; diff --git a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js index 5ace69872c464..bdaac3a16625e 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js @@ -15,13 +15,14 @@ import { BottomSheetContext } from '@wordpress/components'; import { useRef, useCallback, useContext } from '@wordpress/element'; -const BottomSheetScreen = ( { children, setHeight } ) => { +const BottomSheetScreen = ( { children } ) => { const navigation = useNavigation(); const height = useRef( { maxHeight: 0 } ); const isFocused = useIsFocused(); const { onHardwareButtonPress, shouldDisableBottomSheetMaxHeight, + setHeight, } = useContext( BottomSheetContext ); useFocusEffect( useCallback( () => { diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 889f239830b8b..5bfd6ab3a80b8 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -1,13 +1,12 @@ /** * External dependencies */ -import { View } from 'react-native'; import { createStackNavigator } from '@react-navigation/stack'; /** * WordPress dependencies */ -import { useState, useEffect, useContext, useRef } from '@wordpress/element'; +import { useEffect, useContext, useRef } from '@wordpress/element'; import { BottomSheetContext, BottomSheet } from '@wordpress/components'; import { useRoute } from '@react-navigation/native'; @@ -22,16 +21,10 @@ const Stack = createStackNavigator(); function ColorSettings( { defaultSettings } ) { const route = useRoute(); - const [ heightValue, setHeightValue ] = useState( 1 ); const { onCloseBottomSheet, shouldDisableBottomSheetMaxHeight, } = useContext( BottomSheetContext ); - const setHeight = ( maxHeight ) => { - if ( heightValue !== maxHeight ) { - setHeightValue( maxHeight ); - } - }; useEffect( () => { shouldDisableBottomSheetMaxHeight( true ); @@ -39,28 +32,25 @@ function ColorSettings( { defaultSettings } ) { }, [] ); const PaletteScreenView = useRef( () => ( - + ) ); const PickerScreenView = useRef( () => ( - + ) ); const GradientPickerView = useRef( () => ( - + ) ); return ( - + - + ); } From d5a735eaab0d52bc7e0b18ad90dafa31f6f11178 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 10 Jul 2020 15:35:58 +0200 Subject: [PATCH 15/52] Update Podfile.lock --- packages/react-native-editor/ios/Podfile.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index c68f720753dfa..95780678cca17 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -21,7 +21,7 @@ PODS: - DoubleConversion - glog - glog (0.3.5) - - Gutenberg (8.5.0): + - Gutenberg (8.5.1): - React (= 0.61.5) - React-CoreModules (= 0.61.5) - React-RCTImage (= 0.61.5) @@ -402,7 +402,7 @@ SPEC CHECKSUMS: FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75 Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51 glog: 1f3da668190260b06b429bb211bfbee5cd790c28 - Gutenberg: c5583ab0c80c08e17e40c27ae2ec14a244acf8f5 + Gutenberg: 04a90a71ab9a5e61b9dd185270dec12dff3c2777 RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1 RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320 React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78 From e29eee3ddb3a7d03a882adc034ce7ba543d2a916 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Mon, 13 Jul 2020 13:54:15 +0200 Subject: [PATCH 16/52] revert changes with FlatList to make review easier --- .../src/components/inserter/menu.native.js | 31 +++-- .../src/mobile/bottom-sheet/index.native.js | 107 ++++-------------- 2 files changed, 38 insertions(+), 100 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 7d1a9ce8c8faa..43d96a8dafd04 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -11,7 +11,7 @@ import { Component } from '@wordpress/element'; import { createBlock, rawHandler } from '@wordpress/blocks'; import { withDispatch, withSelect } from '@wordpress/data'; import { withInstanceId, compose } from '@wordpress/compose'; -import { BottomSheet, BottomSheetConsumer } from '@wordpress/components'; +import { BottomSheet } from '@wordpress/components'; /** * Internal dependencies @@ -127,26 +127,21 @@ export class InserterMenu extends Component { onClose={ this.onClose } contentStyle={ [ styles.content, bottomPadding ] } hideHeader - isChildrenScrollable > - - { ( { listProps } ) => ( - ( - - ) } - keyExtractor={ ( item ) => item.name } - renderItem={ this.renderItem } - { ...listProps } - /> + ( + ) } - + keyExtractor={ ( item ) => item.name } + renderItem={ this.renderItem } + /> ); diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 2fe17187e3cc4..5439c8f1db74d 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -49,8 +49,6 @@ class BottomSheet extends Component { this.onShouldSetBottomSheetMaxHeight = this.onShouldSetBottomSheetMaxHeight.bind( this ); - this.onScrollBeginDrag = this.onScrollBeginDrag.bind( this ); - this.onScrollEndDrag = this.onScrollEndDrag.bind( this ); this.onDimensionsChange = this.onDimensionsChange.bind( this ); this.onCloseBottomSheet = this.onCloseBottomSheet.bind( this ); @@ -231,14 +229,6 @@ class BottomSheet extends Component { this.onShouldSetBottomSheetMaxHeight( true ); } - onScrollBeginDrag() { - this.isScrolling( true ); - } - - onScrollEndDrag() { - this.isScrolling( false ); - } - onHardwareButtonPress() { const { onClose } = this.props; const { onHardwareButtonPress } = this.state; @@ -260,7 +250,6 @@ class BottomSheet extends Component { getStylesFromColorScheme, onDismiss, children, - isChildrenScrollable, ...rest } = this.props; const { @@ -306,27 +295,6 @@ class BottomSheet extends Component { styles.backgroundDark ); - const listProps = { - disableScrollViewPanResponder: true, - bounces, - onScroll: this.onScroll, - onScrollBeginDrag: this.onScrollBeginDrag, - onScrollEndDrag: this.onScrollEndDrag, - scrollEventThrottle: 16, - contentContainerStyle: [ - styles.content, - hideHeader && styles.emptyHeader, - contentStyle, - isChildrenScrollable && { - flexGrow: 1, - paddingBottom: - safeAreaBottomInset || styles.content.paddingRight, - }, - ], - scrollEnabled, - automaticallyAdjustContentInsets: false, - }; - return ( { ! hideHeader && getHeader() } - { ! isChildrenScrollable ? ( - - - - <>{ children } - - - - - ) : ( + this.isScrolling( true ) } + onScrollEndDrag={ () => this.isScrolling( false ) } + scrollEventThrottle={ 16 } + style={ isMaxHeightSet ? { maxHeight } : {} } + contentContainerStyle={ [ + styles.content, + hideHeader && styles.emptyHeader, + contentStyle, + ] } + scrollEnabled={ scrollEnabled } + automaticallyAdjustContentInsets={ false } + > - - <>{ children } - + <>{ children } - ) } + + ); From 1159e6da2d7d3ebe413219d1274d536655e17369 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Wed, 15 Jul 2020 14:29:45 +0200 Subject: [PATCH 17/52] add mocks --- test/native/setup.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/test/native/setup.js b/test/native/setup.js index 3f90fe422455c..9ca6804e56454 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -2,6 +2,7 @@ * External dependencies */ import { NativeModules } from 'react-native'; +import 'react-native-gesture-handler/jestSetup'; jest.mock( '@wordpress/element', () => { return { @@ -122,3 +123,16 @@ Object.keys( mockNativeModules ).forEach( ( module ) => { } ); } } ); + +jest.mock( 'react-native-reanimated', () => { + const Reanimated = require( 'react-native-reanimated/mock' ); + + // The mock for `call` immediately calls the callback which is incorrect + // So we override it with a no-op + Reanimated.default.call = () => {}; + + return Reanimated; +} ); + +// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing +jest.mock( 'react-native/Libraries/Animated/src/NativeAnimatedHelper' ); From 9067fc39dd23cf655d1a9b8d771a652cd6e7041f Mon Sep 17 00:00:00 2001 From: Dratwas Date: Wed, 15 Jul 2020 15:00:48 +0200 Subject: [PATCH 18/52] use LayoutAnimmation --- .../block-settings/container.native.js | 1 - .../src/mobile/bottom-sheet/index.native.js | 4 +-- .../navigation-container.native.js | 26 +++++++++---------- 3 files changed, 15 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index 44c9278f36cc3..b52c06bfe4729 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -54,7 +54,6 @@ function BottomSheetSettings( { onClose={ closeGeneralSidebar } hideHeader contentStyle={ styles.content } - adjustToContentHeight { ...props } > diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 5439c8f1db74d..1530478346a63 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -119,6 +119,8 @@ class BottomSheet extends Component { } componentWillUnmount() { + this.keyboardWillShowListener.remove(); + this.keyboardDidHideListener.remove(); if ( this.androidModalClosedSubscription ) { this.androidModalClosedSubscription.remove(); } @@ -131,8 +133,6 @@ class BottomSheet extends Component { 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate ); - this.keyboardWillShowListener.remove(); - this.keyboardDidHideListener.remove(); } onSafeAreaInsetsUpdate( result ) { diff --git a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js index 93e6ab04063a6..306972328bec7 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js @@ -1,37 +1,37 @@ /** * External dependencies */ -import { Animated, Easing } from 'react-native'; +import { View } from 'react-native'; /** * WordPress dependencies */ import { BottomSheetContext, BottomSheetProvider } from '@wordpress/components'; -import { useRef, useContext } from '@wordpress/element'; +import { useState, useContext } from '@wordpress/element'; +/** + * Internal dependencies + */ +import { performLayoutAnimation } from '../layout-animation'; function BottomSheetNavigationContainer( { children, animate } ) { - const heightValue = useRef( new Animated.Value( 1 ) ).current; + const [ height, setMaxHeight ] = useState( 1 ); + const context = useContext( BottomSheetContext ); const setHeight = ( maxHeight ) => { - if ( heightValue !== maxHeight ) { + if ( height !== maxHeight && maxHeight > 50 ) { if ( animate ) { - Animated.timing( heightValue, { - toValue: maxHeight, - duration: 200, - easing: Easing.ease, - } ).start(); - } else { - heightValue.setValue( maxHeight ); + performLayoutAnimation( 200 ); } + setMaxHeight( maxHeight ); } }; return ( - + { children } - + ); } From 77249ff7cd7c3d6d6ae484c8f202931e2155148f Mon Sep 17 00:00:00 2001 From: Dratwas Date: Wed, 15 Jul 2020 15:10:13 +0200 Subject: [PATCH 19/52] update podfile.lock --- packages/react-native-editor/ios/Podfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index d295335d116d6..95780678cca17 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -418,7 +418,7 @@ SPEC CHECKSUMS: react-native-safe-area: e8230b0017d76c00de6b01e2412dcf86b127c6a3 react-native-safe-area-context: c39fc20a20cd66ebf1d56c6f8b8711142fbfee98 react-native-slider: f81b89fa0c1f9a65742d33f889a194ca6653a985 - react-native-video: d01ed7ff1e38fa7dcc6c15c94cf505e661b7bfd0 + react-native-video: 961749da457e73bf0b5565edfbaffc25abfb8974 React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76 React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360 React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72 From ebec01e2486e5b494c3333c635b00eebd27aeb44 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 16 Jul 2020 13:45:14 +0200 Subject: [PATCH 20/52] add jitpack versions --- packages/react-native-bridge/android/build.gradle | 5 +++++ packages/react-native-editor/package.json | 10 +++++----- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/react-native-bridge/android/build.gradle b/packages/react-native-bridge/android/build.gradle index 3c2485cb35d20..cebbb2dbdd37a 100644 --- a/packages/react-native-bridge/android/build.gradle +++ b/packages/react-native-bridge/android/build.gradle @@ -170,6 +170,11 @@ dependencies { implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-linear-gradient', readHashedVersion('../../react-native-editor/package.json', 'react-native-linear-gradient', 'dependencies'))) implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-slider', readHashedVersion('../../react-native-editor/package.json', '@react-native-community/slider', 'dependencies'))) implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-get-random-values', readHashedVersion('../../react-native-editor/package.json', 'react-native-get-random-values', 'dependencies'))) + implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-masked-view', readHashedVersion('../../react-native-editor/package.json', '@react-native-community/react-native-masked-view', 'dependencies'))) + implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-gesture-handler', readHashedVersion('../../react-native-editor/package.json', 'react-native-gesture-handler', 'dependencies'))) + implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-screens', readHashedVersion('../../react-native-editor/package.json', 'react-native-screens', 'dependencies'))) + implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-safe-area-context', readHashedVersion('../../react-native-editor/package.json', 'react-native-safe-area-context', 'dependencies'))) + implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-reanimated', readHashedVersion('../../react-native-editor/package.json', 'react-native-reanimated', 'dependencies'))) // FIXME Temporary fix to get Jitpack builds to green while I work on a solution without hardcoded values. //def rnVersion = readReactNativeVersion('../package.json', 'peerDependencies') diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index 47eec3f32dc7b..b234d8cc01633 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -31,7 +31,7 @@ "dependencies": { "@babel/runtime": "^7.9.2", "@react-native-community/blur": "3.6.0", - "@react-native-community/masked-view": "^0.1.10", + "@react-native-community/masked-view": "^git+https://github.com/wordpress-mobile/react-native-masked-view.git#6eb627ff8afa9e81d8be3f34ebfbe09f6f6dbfd3", "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6", "@react-navigation/native": "^5.6.1", "@react-navigation/stack": "5.6.2", @@ -56,18 +56,18 @@ "node-fetch": "^2.6.0", "react-native": "0.61.5", "react-native-dark-mode": "git+https://github.com/wordpress-mobile/react-native-dark-mode.git#f09bf1480e7b34536413ab3300f29e4375edb2c6", - "react-native-gesture-handler": "^1.6.1", + "react-native-gesture-handler": "git+https://github.com/wordpress-mobile/react-gesture-handler.git#86c8b1901137b5b67505ad43839fc03c30b54527", "react-native-get-random-values": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#f03f2c16414aff4ea76064dcd00a9e3c6efc838d", "react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3", "react-native-hsv-color-picker": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker", "react-native-keyboard-aware-scroll-view": "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#gb-v0.8.8", "react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#52bf43077171cff8714ce3e0155f3ebb7f55bc37", "react-native-modal": "^6.5.0", - "react-native-reanimated": "^1.9.0", + "react-native-reanimated": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#0d88e036348ee868491740845e3baafdd575616a", "react-native-safe-area": "^0.5.0", - "react-native-safe-area-context": "^3.0.7", + "react-native-safe-area-context": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#3ea694a404638dddef01a046d12c7f75b6ecfdc7", "react-native-sass-transformer": "^1.1.1", - "react-native-screens": "^2.9.0", + "react-native-screens": "git+https://github.com/wordpress-mobile/react-native-screens.git#181c477827b0ab82a6c3819add46d5e8d56a34ec", "react-native-svg": "git+https://github.com/wordpress-mobile/react-native-svg.git#a628e92990a2404e30a0086f168bd2b5b7b4ce96", "react-native-url-polyfill": "^1.1.2", "react-native-video": "git+https://github.com/wordpress-mobile/react-native-video.git#1b964b107863351ed744fc104d7952bbec3e2d4f" From df5316f86db9f7a5e1ec9cd942409104e4d67057 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 16 Jul 2020 14:33:34 +0200 Subject: [PATCH 21/52] fix name of masked-view package --- packages/react-native-bridge/android/build.gradle | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-bridge/android/build.gradle b/packages/react-native-bridge/android/build.gradle index cebbb2dbdd37a..efc20f008d4f5 100644 --- a/packages/react-native-bridge/android/build.gradle +++ b/packages/react-native-bridge/android/build.gradle @@ -170,7 +170,7 @@ dependencies { implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-linear-gradient', readHashedVersion('../../react-native-editor/package.json', 'react-native-linear-gradient', 'dependencies'))) implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-slider', readHashedVersion('../../react-native-editor/package.json', '@react-native-community/slider', 'dependencies'))) implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-get-random-values', readHashedVersion('../../react-native-editor/package.json', 'react-native-get-random-values', 'dependencies'))) - implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-masked-view', readHashedVersion('../../react-native-editor/package.json', '@react-native-community/react-native-masked-view', 'dependencies'))) + implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-masked-view', readHashedVersion('../../react-native-editor/package.json', '@react-native-community/masked-view', 'dependencies'))) implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-gesture-handler', readHashedVersion('../../react-native-editor/package.json', 'react-native-gesture-handler', 'dependencies'))) implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-screens', readHashedVersion('../../react-native-editor/package.json', 'react-native-screens', 'dependencies'))) implementation (waitJitpack('com.github.wordpress-mobile', 'react-native-safe-area-context', readHashedVersion('../../react-native-editor/package.json', 'react-native-safe-area-context', 'dependencies'))) From 6702ec5f4e754ab1cd98ef82760a4f3eb74188e2 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 16 Jul 2020 20:09:21 +0200 Subject: [PATCH 22/52] add mocks for media --- test/native/__mocks__/fileMock.js | 3 +++ test/native/jest.config.js | 2 ++ 2 files changed, 5 insertions(+) create mode 100644 test/native/__mocks__/fileMock.js diff --git a/test/native/__mocks__/fileMock.js b/test/native/__mocks__/fileMock.js new file mode 100644 index 0000000000000..59890f6a201a5 --- /dev/null +++ b/test/native/__mocks__/fileMock.js @@ -0,0 +1,3 @@ +// __mocks__/fileMock.js + +module.exports = 'test-file-stub'; diff --git a/test/native/jest.config.js b/test/native/jest.config.js index 18ccbb421ea7f..16c0c6489c1fd 100644 --- a/test/native/jest.config.js +++ b/test/native/jest.config.js @@ -49,6 +49,8 @@ module.exports = { moduleNameMapper: { // Mock the CSS modules. See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets '\\.(scss)$': '/' + configPath + '/__mocks__/styleMock.js', + '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': + '/test/native/__mocks__/fileMock.js', [ `@wordpress\\/(${ transpiledPackageNames.join( '|' ) })$` ]: '/packages/$1/src', From da2358ed457d9a2e2504e628fd277d58210d4fa9 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 16 Jul 2020 21:08:17 +0200 Subject: [PATCH 23/52] fix css lint error --- .../src/components/block-settings/container.native.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-settings/container.native.scss b/packages/block-editor/src/components/block-settings/container.native.scss index 3fd9962974ec8..d0c47845a0450 100644 --- a/packages/block-editor/src/components/block-settings/container.native.scss +++ b/packages/block-editor/src/components/block-settings/container.native.scss @@ -9,4 +9,4 @@ .backgroundDark { background-color: $background-dark-elevated; -} \ No newline at end of file +} From e9cfb16cc71f0eb07d900d84a96c96bee1a38f00 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 16 Jul 2020 22:23:51 +0200 Subject: [PATCH 24/52] update package-lock.json --- package-lock.json | 33 ++++++++++++++------------------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index f0a990a0ca81c..72b245c994cfe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7101,8 +7101,7 @@ "integrity": "sha512-ng6Tm537E/M42GjE4TRUxQyL8sRfClcL7bQWblOCoxPZzJ2J3bdALsjeG3vDnVCIfI/R0AeFalN9KjMt0+Z/Zg==" }, "@react-native-community/masked-view": { - "version": "0.1.10", - "resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.10.tgz", + "version": "file:https:/registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.10.tgz", "integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==" }, "@react-native-community/slider": { @@ -11845,7 +11844,7 @@ "requires": { "@babel/runtime": "^7.9.2", "@react-native-community/blur": "3.6.0", - "@react-native-community/masked-view": "^0.1.10", + "@react-native-community/masked-view": "file:https:/registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.10.tgz", "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6", "@react-navigation/native": "^5.6.1", "@react-navigation/stack": "5.6.2", @@ -11870,18 +11869,18 @@ "node-fetch": "^2.6.0", "react-native": "0.61.5", "react-native-dark-mode": "git+https://github.com/wordpress-mobile/react-native-dark-mode.git#f09bf1480e7b34536413ab3300f29e4375edb2c6", - "react-native-gesture-handler": "^1.6.1", + "react-native-gesture-handler": "react-native-gesture-handler@1.6.1", "react-native-get-random-values": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#f03f2c16414aff4ea76064dcd00a9e3c6efc838d", "react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3", "react-native-hsv-color-picker": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker.git", "react-native-keyboard-aware-scroll-view": "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#gb-v0.8.8", "react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#52bf43077171cff8714ce3e0155f3ebb7f55bc37", "react-native-modal": "^6.5.0", - "react-native-reanimated": "^1.9.0", + "react-native-reanimated": "react-native-reanimated@1.9.0", "react-native-safe-area": "^0.5.0", - "react-native-safe-area-context": "^3.0.7", + "react-native-safe-area-context": "react-native-safe-area-context@3.0.7", "react-native-sass-transformer": "^1.1.1", - "react-native-screens": "^2.9.0", + "react-native-screens": "react-native-screens@2.9.0", "react-native-svg": "git+https://github.com/wordpress-mobile/react-native-svg.git#a628e92990a2404e30a0086f168bd2b5b7b4ce96", "react-native-url-polyfill": "^1.1.2", "react-native-video": "git+https://github.com/wordpress-mobile/react-native-video.git#1b964b107863351ed744fc104d7952bbec3e2d4f" @@ -47197,9 +47196,8 @@ } }, "react-native-gesture-handler": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.6.1.tgz", - "integrity": "sha512-gQgIKhDiYf754yzhhliagLuLupvGb6ZyBdzYzr7aus3Fyi87TLOw63ers+r4kGw0h26oAWTAdHd34JnF4NeL6Q==", + "version": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.6.1.tgz", + "from": "react-native-gesture-handler@1.6.1", "requires": { "@egjs/hammerjs": "^2.0.17", "hoist-non-react-statics": "^2.3.1", @@ -47253,9 +47251,8 @@ } }, "react-native-reanimated": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.9.0.tgz", - "integrity": "sha512-Aj+spgIHRiVv7ezGADxnSH1EoKrQRD2+XaSiGY0MiB/pvRNNrZPSJ+3NVpvLwWf9lZMOP7dwqqyJIzoZgBDt8w==", + "version": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.9.0.tgz", + "from": "react-native-reanimated@1.9.0", "requires": { "fbjs": "^1.0.0" }, @@ -47291,9 +47288,8 @@ } }, "react-native-safe-area-context": { - "version": "3.0.7", - "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.0.7.tgz", - "integrity": "sha512-dqhRTlIFe5+P1yxitj0C9XVUxLqOmjomeqzUSSY8sNOWVjtIhEY/fl4ZKYpAVnktd8dt3zl13XmJTmRmy3d0uA==" + "version": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.0.7.tgz", + "from": "react-native-safe-area-context@3.0.7" }, "react-native-sass-transformer": { "version": "1.4.0", @@ -47313,9 +47309,8 @@ } }, "react-native-screens": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.9.0.tgz", - "integrity": "sha512-5MaiUD6HA3nzY3JbVI8l3V7pKedtxQF3d8qktTVI0WmWXTI4QzqOU8r8fPVvfKo3MhOXwhWBjr+kQ7DZaIQQeg==" + "version": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.9.0.tgz", + "from": "react-native-screens@2.9.0" }, "react-native-svg": { "version": "git+https://github.com/wordpress-mobile/react-native-svg.git#a628e92990a2404e30a0086f168bd2b5b7b4ce96", From 8afbca2350e294da08650c5bc65ccb39237a87ee Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 16 Jul 2020 23:57:46 +0200 Subject: [PATCH 25/52] fix dependencies --- package-lock.json | 52 +++++++++++------------ packages/react-native-editor/package.json | 4 +- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index 72b245c994cfe..1cc722d299323 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7101,19 +7101,19 @@ "integrity": "sha512-ng6Tm537E/M42GjE4TRUxQyL8sRfClcL7bQWblOCoxPZzJ2J3bdALsjeG3vDnVCIfI/R0AeFalN9KjMt0+Z/Zg==" }, "@react-native-community/masked-view": { - "version": "file:https:/registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.10.tgz", - "integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==" + "version": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#6eb627ff8afa9e81d8be3f34ebfbe09f6f6dbfd3", + "from": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#6eb627ff8afa9e81d8be3f34ebfbe09f6f6dbfd3" }, "@react-native-community/slider": { "version": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6", "from": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6" }, "@react-navigation/core": { - "version": "5.11.1", - "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.11.1.tgz", - "integrity": "sha512-zJ/w84msKBhgRR35/tHdY1facxdnN/WP9Ebutnjp/J9ENuv7fHXhYlxX+oIRrMn+/MnbG79RVnYcO/r4lO8OTQ==", + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.12.0.tgz", + "integrity": "sha512-CTmYrFXCZwInN40CpEzkPxhrpzujj20qvsUgpH05+oO1flwsnaJsyBfYawIcTS62/1/Z6SAM7iW5PbKk+qw9iQ==", "requires": { - "@react-navigation/routers": "^5.4.8", + "@react-navigation/routers": "^5.4.9", "escape-string-regexp": "^4.0.0", "nanoid": "^3.1.9", "query-string": "^6.13.1", @@ -7149,18 +7149,18 @@ } }, "@react-navigation/native": { - "version": "5.6.1", - "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-5.6.1.tgz", - "integrity": "sha512-jnSNEnuRzqLvG+7QcMthfB8eCZIzAE0Wku7HDgzfjFS2iA7Oa9ugeX/1qdP9heT2Mp0t9BDQ4XX4boJma9Z/xg==", + "version": "5.7.0", + "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-5.7.0.tgz", + "integrity": "sha512-a2JBOdRB3q20Jdc5hF8shR4Dk+ZmjF2Rr9RviErtARztu08lU+jcb1gK6c31OKL37JDuaS3xexE9Cb7dYeMy3Q==", "requires": { - "@react-navigation/core": "^5.11.1", + "@react-navigation/core": "^5.12.0", "nanoid": "^3.1.9" } }, "@react-navigation/routers": { - "version": "5.4.8", - "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-5.4.8.tgz", - "integrity": "sha512-7uxC24fgLQdRquxPfL8SZ8zjle5DXdAB56aYL13tH+HAdhO2YxjKVvulzhGUsfcZthMvZ/9psybhn+m4z71dUg==", + "version": "5.4.9", + "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-5.4.9.tgz", + "integrity": "sha512-dYD5qrIKUmuBEp+O98hB0tDYpEsGQgCQFQgMEoFKBmVVhx2JnJJ1zxRjU7xWcCU4VdBA8IOowgHQHJsVNKYyrg==", "requires": { "nanoid": "^3.1.9" } @@ -11844,7 +11844,7 @@ "requires": { "@babel/runtime": "^7.9.2", "@react-native-community/blur": "3.6.0", - "@react-native-community/masked-view": "file:https:/registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.10.tgz", + "@react-native-community/masked-view": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#6eb627ff8afa9e81d8be3f34ebfbe09f6f6dbfd3", "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6", "@react-navigation/native": "^5.6.1", "@react-navigation/stack": "5.6.2", @@ -11869,18 +11869,18 @@ "node-fetch": "^2.6.0", "react-native": "0.61.5", "react-native-dark-mode": "git+https://github.com/wordpress-mobile/react-native-dark-mode.git#f09bf1480e7b34536413ab3300f29e4375edb2c6", - "react-native-gesture-handler": "react-native-gesture-handler@1.6.1", + "react-native-gesture-handler": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#86c8b1901137b5b67505ad43839fc03c30b54527", "react-native-get-random-values": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#f03f2c16414aff4ea76064dcd00a9e3c6efc838d", "react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3", "react-native-hsv-color-picker": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker.git", "react-native-keyboard-aware-scroll-view": "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#gb-v0.8.8", "react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#52bf43077171cff8714ce3e0155f3ebb7f55bc37", "react-native-modal": "^6.5.0", - "react-native-reanimated": "react-native-reanimated@1.9.0", + "react-native-reanimated": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#0d88e036348ee868491740845e3baafdd575616a", "react-native-safe-area": "^0.5.0", - "react-native-safe-area-context": "react-native-safe-area-context@3.0.7", + "react-native-safe-area-context": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#3ea694a404638dddef01a046d12c7f75b6ecfdc7", "react-native-sass-transformer": "^1.1.1", - "react-native-screens": "react-native-screens@2.9.0", + "react-native-screens": "git+https://github.com/wordpress-mobile/react-native-screens.git#181c477827b0ab82a6c3819add46d5e8d56a34ec", "react-native-svg": "git+https://github.com/wordpress-mobile/react-native-svg.git#a628e92990a2404e30a0086f168bd2b5b7b4ce96", "react-native-url-polyfill": "^1.1.2", "react-native-video": "git+https://github.com/wordpress-mobile/react-native-video.git#1b964b107863351ed744fc104d7952bbec3e2d4f" @@ -47196,8 +47196,8 @@ } }, "react-native-gesture-handler": { - "version": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.6.1.tgz", - "from": "react-native-gesture-handler@1.6.1", + "version": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#86c8b1901137b5b67505ad43839fc03c30b54527", + "from": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#86c8b1901137b5b67505ad43839fc03c30b54527", "requires": { "@egjs/hammerjs": "^2.0.17", "hoist-non-react-statics": "^2.3.1", @@ -47251,8 +47251,8 @@ } }, "react-native-reanimated": { - "version": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.9.0.tgz", - "from": "react-native-reanimated@1.9.0", + "version": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#0d88e036348ee868491740845e3baafdd575616a", + "from": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#0d88e036348ee868491740845e3baafdd575616a", "requires": { "fbjs": "^1.0.0" }, @@ -47288,8 +47288,8 @@ } }, "react-native-safe-area-context": { - "version": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.0.7.tgz", - "from": "react-native-safe-area-context@3.0.7" + "version": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#3ea694a404638dddef01a046d12c7f75b6ecfdc7", + "from": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#3ea694a404638dddef01a046d12c7f75b6ecfdc7" }, "react-native-sass-transformer": { "version": "1.4.0", @@ -47309,8 +47309,8 @@ } }, "react-native-screens": { - "version": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.9.0.tgz", - "from": "react-native-screens@2.9.0" + "version": "git+https://github.com/wordpress-mobile/react-native-screens.git#181c477827b0ab82a6c3819add46d5e8d56a34ec", + "from": "git+https://github.com/wordpress-mobile/react-native-screens.git#181c477827b0ab82a6c3819add46d5e8d56a34ec" }, "react-native-svg": { "version": "git+https://github.com/wordpress-mobile/react-native-svg.git#a628e92990a2404e30a0086f168bd2b5b7b4ce96", diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index b234d8cc01633..f4b6824444f30 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -31,7 +31,7 @@ "dependencies": { "@babel/runtime": "^7.9.2", "@react-native-community/blur": "3.6.0", - "@react-native-community/masked-view": "^git+https://github.com/wordpress-mobile/react-native-masked-view.git#6eb627ff8afa9e81d8be3f34ebfbe09f6f6dbfd3", + "@react-native-community/masked-view": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#6eb627ff8afa9e81d8be3f34ebfbe09f6f6dbfd3", "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6", "@react-navigation/native": "^5.6.1", "@react-navigation/stack": "5.6.2", @@ -56,7 +56,7 @@ "node-fetch": "^2.6.0", "react-native": "0.61.5", "react-native-dark-mode": "git+https://github.com/wordpress-mobile/react-native-dark-mode.git#f09bf1480e7b34536413ab3300f29e4375edb2c6", - "react-native-gesture-handler": "git+https://github.com/wordpress-mobile/react-gesture-handler.git#86c8b1901137b5b67505ad43839fc03c30b54527", + "react-native-gesture-handler": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#86c8b1901137b5b67505ad43839fc03c30b54527", "react-native-get-random-values": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#f03f2c16414aff4ea76064dcd00a9e3c6efc838d", "react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3", "react-native-hsv-color-picker": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker", From d953b7cfc4cc87c7470e3dc0aa5b5222e4071335 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 17 Jul 2020 11:08:10 +0200 Subject: [PATCH 26/52] update masked-view package --- packages/react-native-editor/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index f4b6824444f30..730c505fc8860 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -31,7 +31,7 @@ "dependencies": { "@babel/runtime": "^7.9.2", "@react-native-community/blur": "3.6.0", - "@react-native-community/masked-view": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#6eb627ff8afa9e81d8be3f34ebfbe09f6f6dbfd3", + "@react-native-community/masked-view": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#098004d0968f853fc7d96c2aa5f96afe7a133c58", "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6", "@react-navigation/native": "^5.6.1", "@react-navigation/stack": "5.6.2", From 6db1b4f84412c9a6a205f8039d640305fcde8725 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 17 Jul 2020 11:38:55 +0200 Subject: [PATCH 27/52] update lock file --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1cc722d299323..74cec8f0011c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7101,8 +7101,8 @@ "integrity": "sha512-ng6Tm537E/M42GjE4TRUxQyL8sRfClcL7bQWblOCoxPZzJ2J3bdALsjeG3vDnVCIfI/R0AeFalN9KjMt0+Z/Zg==" }, "@react-native-community/masked-view": { - "version": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#6eb627ff8afa9e81d8be3f34ebfbe09f6f6dbfd3", - "from": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#6eb627ff8afa9e81d8be3f34ebfbe09f6f6dbfd3" + "version": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#098004d0968f853fc7d96c2aa5f96afe7a133c58", + "from": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#098004d0968f853fc7d96c2aa5f96afe7a133c58" }, "@react-native-community/slider": { "version": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6", @@ -11844,7 +11844,7 @@ "requires": { "@babel/runtime": "^7.9.2", "@react-native-community/blur": "3.6.0", - "@react-native-community/masked-view": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#6eb627ff8afa9e81d8be3f34ebfbe09f6f6dbfd3", + "@react-native-community/masked-view": "git+https://github.com/wordpress-mobile/react-native-masked-view.git#098004d0968f853fc7d96c2aa5f96afe7a133c58", "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6", "@react-navigation/native": "^5.6.1", "@react-navigation/stack": "5.6.2", From eddfa383b79a37cff2871f4c6e53fd4054e888b2 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 17 Jul 2020 12:40:51 +0200 Subject: [PATCH 28/52] update react-native-gesture-handler hash --- package-lock.json | 6 +++--- packages/react-native-editor/package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 74cec8f0011c9..47d95ec4dbe70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11869,7 +11869,7 @@ "node-fetch": "^2.6.0", "react-native": "0.61.5", "react-native-dark-mode": "git+https://github.com/wordpress-mobile/react-native-dark-mode.git#f09bf1480e7b34536413ab3300f29e4375edb2c6", - "react-native-gesture-handler": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#86c8b1901137b5b67505ad43839fc03c30b54527", + "react-native-gesture-handler": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#b80e959908b383a26d6e35d992d6d529efad0b16", "react-native-get-random-values": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#f03f2c16414aff4ea76064dcd00a9e3c6efc838d", "react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3", "react-native-hsv-color-picker": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker.git", @@ -47196,8 +47196,8 @@ } }, "react-native-gesture-handler": { - "version": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#86c8b1901137b5b67505ad43839fc03c30b54527", - "from": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#86c8b1901137b5b67505ad43839fc03c30b54527", + "version": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#b80e959908b383a26d6e35d992d6d529efad0b16", + "from": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#b80e959908b383a26d6e35d992d6d529efad0b16", "requires": { "@egjs/hammerjs": "^2.0.17", "hoist-non-react-statics": "^2.3.1", diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index 730c505fc8860..8fa3486347bc0 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -56,7 +56,7 @@ "node-fetch": "^2.6.0", "react-native": "0.61.5", "react-native-dark-mode": "git+https://github.com/wordpress-mobile/react-native-dark-mode.git#f09bf1480e7b34536413ab3300f29e4375edb2c6", - "react-native-gesture-handler": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#86c8b1901137b5b67505ad43839fc03c30b54527", + "react-native-gesture-handler": "git+https://github.com/wordpress-mobile/react-native-gesture-handler.git#b80e959908b383a26d6e35d992d6d529efad0b16", "react-native-get-random-values": "git+https://github.com/wordpress-mobile/react-native-get-random-values.git#f03f2c16414aff4ea76064dcd00a9e3c6efc838d", "react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3", "react-native-hsv-color-picker": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker", From b97fe50df43f1600909de1899c7a8284af56f85b Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 17 Jul 2020 16:06:49 +0200 Subject: [PATCH 29/52] update deps --- package-lock.json | 18 +++++++++--------- packages/react-native-editor/package.json | 6 +++--- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index bf07c2c7f4c11..73b42c9451d25 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11876,11 +11876,11 @@ "react-native-keyboard-aware-scroll-view": "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#gb-v0.8.8", "react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#52bf43077171cff8714ce3e0155f3ebb7f55bc37", "react-native-modal": "^6.5.0", - "react-native-reanimated": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#0d88e036348ee868491740845e3baafdd575616a", + "react-native-reanimated": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#ed48f510fba751cd75da7629e92276166766be91", "react-native-safe-area": "^0.5.0", - "react-native-safe-area-context": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#3ea694a404638dddef01a046d12c7f75b6ecfdc7", + "react-native-safe-area-context": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#1e3c0d34f31b59fb79f71ec0b4c39c513f684871", "react-native-sass-transformer": "^1.1.1", - "react-native-screens": "git+https://github.com/wordpress-mobile/react-native-screens.git#181c477827b0ab82a6c3819add46d5e8d56a34ec", + "react-native-screens": "git+https://github.com/wordpress-mobile/react-native-screens.git#835843f4c3697bba5c330d05d8fc270d50ca9d2a", "react-native-svg": "git+https://github.com/wordpress-mobile/react-native-svg.git#a628e92990a2404e30a0086f168bd2b5b7b4ce96", "react-native-url-polyfill": "^1.1.2", "react-native-video": "git+https://github.com/wordpress-mobile/react-native-video.git#1b964b107863351ed744fc104d7952bbec3e2d4f" @@ -46549,8 +46549,8 @@ } }, "react-native-reanimated": { - "version": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#0d88e036348ee868491740845e3baafdd575616a", - "from": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#0d88e036348ee868491740845e3baafdd575616a", + "version": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#ed48f510fba751cd75da7629e92276166766be91", + "from": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#ed48f510fba751cd75da7629e92276166766be91", "requires": { "fbjs": "^1.0.0" }, @@ -46586,8 +46586,8 @@ } }, "react-native-safe-area-context": { - "version": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#3ea694a404638dddef01a046d12c7f75b6ecfdc7", - "from": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#3ea694a404638dddef01a046d12c7f75b6ecfdc7" + "version": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#1e3c0d34f31b59fb79f71ec0b4c39c513f684871", + "from": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#1e3c0d34f31b59fb79f71ec0b4c39c513f684871" }, "react-native-sass-transformer": { "version": "1.4.0", @@ -46607,8 +46607,8 @@ } }, "react-native-screens": { - "version": "git+https://github.com/wordpress-mobile/react-native-screens.git#181c477827b0ab82a6c3819add46d5e8d56a34ec", - "from": "git+https://github.com/wordpress-mobile/react-native-screens.git#181c477827b0ab82a6c3819add46d5e8d56a34ec" + "version": "git+https://github.com/wordpress-mobile/react-native-screens.git#835843f4c3697bba5c330d05d8fc270d50ca9d2a", + "from": "git+https://github.com/wordpress-mobile/react-native-screens.git#835843f4c3697bba5c330d05d8fc270d50ca9d2a" }, "react-native-svg": { "version": "git+https://github.com/wordpress-mobile/react-native-svg.git#a628e92990a2404e30a0086f168bd2b5b7b4ce96", diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index 6f07836c32a57..12885bfd36b40 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -63,11 +63,11 @@ "react-native-keyboard-aware-scroll-view": "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#gb-v0.8.8", "react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#52bf43077171cff8714ce3e0155f3ebb7f55bc37", "react-native-modal": "^6.5.0", - "react-native-reanimated": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#0d88e036348ee868491740845e3baafdd575616a", + "react-native-reanimated": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#ed48f510fba751cd75da7629e92276166766be91", "react-native-safe-area": "^0.5.0", - "react-native-safe-area-context": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#3ea694a404638dddef01a046d12c7f75b6ecfdc7", + "react-native-safe-area-context": "git+https://github.com/wordpress-mobile/react-native-safe-area-context.git#1e3c0d34f31b59fb79f71ec0b4c39c513f684871", "react-native-sass-transformer": "^1.1.1", - "react-native-screens": "git+https://github.com/wordpress-mobile/react-native-screens.git#181c477827b0ab82a6c3819add46d5e8d56a34ec", + "react-native-screens": "git+https://github.com/wordpress-mobile/react-native-screens.git#835843f4c3697bba5c330d05d8fc270d50ca9d2a", "react-native-svg": "git+https://github.com/wordpress-mobile/react-native-svg.git#a628e92990a2404e30a0086f168bd2b5b7b4ce96", "react-native-url-polyfill": "^1.1.2", "react-native-video": "git+https://github.com/wordpress-mobile/react-native-video.git#1b964b107863351ed744fc104d7952bbec3e2d4f" From c4c3d9d1e43217e2bad50b2211ea9396c22ab88f Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 17 Jul 2020 17:37:02 +0200 Subject: [PATCH 30/52] move names of screens to consts --- .../block-settings/container.native.js | 9 +++++++-- .../components/block-settings/index.native.js | 5 ++++- .../panel-color-gradient-settings.native.js | 15 ++++++++++----- .../src/components/index.native.js | 6 +++++- .../bottom-sheet/navigation-screen.native.js | 19 +++++++++---------- .../src/mobile/color-settings/index.native.js | 8 +++++--- .../color-settings/palette.screen.native.js | 4 ++-- .../src/mobile/color-settings/utils.native.js | 7 ++++--- 8 files changed, 46 insertions(+), 27 deletions(-) diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index b52c06bfe4729..8666b53a19ef2 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -18,6 +18,11 @@ import styles from './container.native.scss'; const Stack = createStackNavigator(); +export const blockSettingsScreens = { + settings: 'Settings', + color: 'Color', +}; + function BottomSheetSettings( { editorSidebarOpened, closeGeneralSidebar, @@ -66,12 +71,12 @@ function BottomSheetSettings( { > diff --git a/packages/block-editor/src/components/block-settings/index.native.js b/packages/block-editor/src/components/block-settings/index.native.js index f3895a9c69792..9daa470d59798 100644 --- a/packages/block-editor/src/components/block-settings/index.native.js +++ b/packages/block-editor/src/components/block-settings/index.native.js @@ -1,2 +1,5 @@ export { default as BlockSettingsButton } from './button'; -export { default as BottomSheetSettings } from './container'; +export { + default as BottomSheetSettings, + blockSettingsScreens, +} from './container'; diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js index 302a94126ca16..b4fb0df55e717 100644 --- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js +++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js @@ -1,12 +1,17 @@ -/** - * WordPress dependencies - */ -import { ColorControl, PanelBody } from '@wordpress/components'; /** * External dependencies */ import { useNavigation } from '@react-navigation/native'; +/** + * WordPress dependencies + */ +import { + ColorControl, + PanelBody, + blockSettingsScreens, +} from '@wordpress/components'; + export default function PanelColorGradientSettings( { settings, title } ) { const navigation = useNavigation(); @@ -22,7 +27,7 @@ export default function PanelColorGradientSettings( { settings, title } ) { } ) => ( { - navigation.navigate( 'Colors', { + navigation.navigate( blockSettingsScreens.color, { onColorChange, colorValue: gradientValue || colorValue, gradientValue, diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 07b298c6baa53..38b1f820cb69e 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -35,7 +35,11 @@ export { default as Caption } from './caption'; export { default as PanelColorSettings } from './panel-color-settings'; export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings'; -export { BottomSheetSettings, BlockSettingsButton } from './block-settings'; +export { + BottomSheetSettings, + BlockSettingsButton, + blockSettingsScreens, +} from './block-settings'; export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player'; // Content Related Components diff --git a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js index bdaac3a16625e..e5090e4abba01 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js @@ -17,7 +17,7 @@ import { useRef, useCallback, useContext } from '@wordpress/element'; const BottomSheetScreen = ( { children } ) => { const navigation = useNavigation(); - const height = useRef( { maxHeight: 0 } ); + const heightRef = useRef( { maxHeight: 0 } ); const isFocused = useIsFocused(); const { onHardwareButtonPress, @@ -36,22 +36,21 @@ const BottomSheetScreen = ( { children } ) => { return false; } ); - if ( height.current.maxHeight !== 0 ) { - setHeight( height.current.maxHeight ); + if ( heightRef.current.maxHeight !== 0 ) { + setHeight( heightRef.current.maxHeight ); } return () => {}; }, [] ) ); + const onLayout = ( { nativeEvent } ) => { + const { height } = nativeEvent.layout; - const onLayout = ( e ) => { - if ( - height.current.maxHeight !== e.nativeEvent.layout.height && - isFocused - ) { - height.current.maxHeight = e.nativeEvent.layout.height; - setHeight( e.nativeEvent.layout.height ); + if ( heightRef.current.maxHeight !== height && isFocused ) { + heightRef.current.maxHeight = height; + setHeight( height ); } }; + return { children }; }; diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 5bfd6ab3a80b8..0d9027b91f863 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -17,6 +17,8 @@ import PickerScreen from './picker-screen'; import GradientPickerScreen from './gradient-picker-screen'; import PaletteScreen from './palette.screen'; +import { colorsUtils } from './utils'; + const Stack = createStackNavigator(); function ColorSettings( { defaultSettings } ) { @@ -58,18 +60,18 @@ function ColorSettings( { defaultSettings } ) { } } > diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js index 00a4a31c27970..867d81eb9f53d 100644 --- a/packages/components/src/mobile/color-settings/palette.screen.native.js +++ b/packages/components/src/mobile/color-settings/palette.screen.native.js @@ -70,13 +70,13 @@ const PaletteScreen = () => { function onCustomPress() { if ( isSolidSegment ) { - navigation.navigate( 'Picker', { + navigation.navigate( colorsUtils.screens.picker, { setColor, isGradientColor, currentValue, } ); } else { - navigation.navigate( 'GradientPicker', { + navigation.navigate( colorsUtils.screens.gradientPicker, { setColor, isGradientColor, currentValue, diff --git a/packages/components/src/mobile/color-settings/utils.native.js b/packages/components/src/mobile/color-settings/utils.native.js index e331f601e4b4c..a49da82b08008 100644 --- a/packages/components/src/mobile/color-settings/utils.native.js +++ b/packages/components/src/mobile/color-settings/utils.native.js @@ -18,9 +18,10 @@ const getGradientType = ( color ) => { }; export const colorsUtils = { - subsheets: { - settings: 'Settings', - color: 'Color', + screens: { + gradientPicker: 'GradientPicker', + picker: 'Picker', + palette: 'Palette', }, segments: [ 'Solid', 'Gradient' ], gradients, From ab1c66a8a3ca83e0e96e168d238e3af2fa8fa3e7 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Mon, 20 Jul 2020 15:15:18 +0200 Subject: [PATCH 31/52] fix issue with import of blockSettingsScreen --- .../panel-color-gradient-settings.native.js | 11 ++++++----- .../bottom-sheet/navigation-container.native.js | 2 +- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js index b4fb0df55e717..126064cfd3865 100644 --- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js +++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js @@ -6,11 +6,12 @@ import { useNavigation } from '@react-navigation/native'; /** * WordPress dependencies */ -import { - ColorControl, - PanelBody, - blockSettingsScreens, -} from '@wordpress/components'; +import { ColorControl, PanelBody } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { blockSettingsScreens } from '../block-settings'; export default function PanelColorGradientSettings( { settings, title } ) { const navigation = useNavigation(); diff --git a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js index 306972328bec7..c41bd1033b720 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js @@ -20,7 +20,7 @@ function BottomSheetNavigationContainer( { children, animate } ) { const setHeight = ( maxHeight ) => { if ( height !== maxHeight && maxHeight > 50 ) { if ( animate ) { - performLayoutAnimation( 200 ); + performLayoutAnimation( 300 ); } setMaxHeight( maxHeight ); } From 5623d8b0fcb114aa308ff9393af632d454e8c266 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Mon, 20 Jul 2020 15:53:26 +0200 Subject: [PATCH 32/52] bottom-sheet-context refactor --- .../src/color-picker/index.native.js | 12 +++---- .../bottom-sheet-context.native.js | 9 +++--- .../src/mobile/bottom-sheet/index.native.js | 32 +++++++++++-------- .../bottom-sheet/navigation-screen.native.js | 10 +++--- .../src/mobile/color-settings/index.native.js | 8 ++--- .../color-settings/picker-screen.native.js | 6 ++-- 6 files changed, 41 insertions(+), 36 deletions(-) diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index e95d2b4d770f6..d3d3f225f1cd1 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -19,13 +19,13 @@ import styles from './style.scss'; function ColorPicker( { shouldEnableBottomSheetScroll, - shouldDisableBottomSheetMaxHeight, + shouldEnableBottomSheetMaxHeight, isBottomSheetContentScrolling, setColor, activeColor, isGradientColor, onNavigationBack, - onCloseBottomSheet, + onHandleClosingBottomSheet, } ) { const isIOS = Platform.OS === 'ios'; const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 }; @@ -81,8 +81,8 @@ function ColorPicker( { setHSVFromHex( activeColor ); } setColor( activeColor ); - shouldDisableBottomSheetMaxHeight( false ); - onCloseBottomSheet( () => setColor( savedColor ) ); + shouldEnableBottomSheetMaxHeight( false ); + onHandleClosingBottomSheet( () => setColor( savedColor ) ); }, [] ); function onHuePickerChange( { hue: h } ) { @@ -96,8 +96,8 @@ function ColorPicker( { function onButtonPress( action ) { onNavigationBack(); - onCloseBottomSheet( null ); - shouldDisableBottomSheetMaxHeight( true ); + onHandleClosingBottomSheet( null ); + shouldEnableBottomSheetMaxHeight( true ); setColor( action === 'apply' ? currentColor : savedColor ); } diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js index 6c838dc339269..ebfc384f53069 100644 --- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js +++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js @@ -23,14 +23,15 @@ export const BottomSheetContext = createContext( { isBottomSheetContentScrolling: false, // Function called to enable scroll within bottom sheet shouldEnableBottomSheetScroll: () => {}, - // Function called to disable bottom sheet max height. + // Function called to enable/disable bottom sheet max height. // E.g. used to extend bottom sheet on full screen in ColorPicker, // which is helpful on small devices with set the largest font/display size. - shouldDisableBottomSheetMaxHeight: () => {}, + shouldEnableBottomSheetMaxHeight: () => {}, // Callback that is called on closing bottom sheet - onCloseBottomSheet: () => {}, + onHandleClosingBottomSheet: () => {}, // Android only: Function called to control android hardware back button functionality - onHardwareButtonPress: () => {}, + // Return true if the bottom-sheet default close action shouldn't be called + onHandleHardwareButtonPress: () => {}, } ); export const { diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 1530478346a63..d3faa58a97463 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -69,8 +69,8 @@ class BottomSheet extends Component { keyboardHeight: 0, scrollEnabled: true, isScrolling: false, - onCloseBottomSheet: null, - onHardwareButtonPress: null, + handleClosingBottomSheet: null, + handleHardwareButtonPress: null, isMaxHeightSet: true, }; @@ -212,30 +212,34 @@ class BottomSheet extends Component { } onHandleClosingBottomSheet( action ) { - this.setState( { onCloseBottomSheet: action } ); + this.setState( { handleClosingBottomSheet: action } ); } onHandleHardwareButtonPress( action ) { - this.setState( { onHardwareButtonPress: action } ); + this.setState( { handleHardwareButtonPress: action } ); } onCloseBottomSheet() { const { onClose } = this.props; - const { onCloseBottomSheet } = this.state; - if ( onCloseBottomSheet ) { - onCloseBottomSheet(); + const { handleClosingBottomSheet } = this.state; + if ( handleClosingBottomSheet ) { + handleClosingBottomSheet(); + } + if ( onClose ) { + onClose(); } - onClose(); this.onShouldSetBottomSheetMaxHeight( true ); } onHardwareButtonPress() { const { onClose } = this.props; - const { onHardwareButtonPress } = this.state; - if ( onHardwareButtonPress && onHardwareButtonPress() ) { + const { handleHardwareButtonPress } = this.state; + if ( handleHardwareButtonPress && handleHardwareButtonPress() ) { return; } - return onClose(); + if ( onClose ) { + return onClose(); + } } render() { @@ -354,12 +358,12 @@ class BottomSheet extends Component { value={ { shouldEnableBottomSheetScroll: this .onShouldEnableScroll, - shouldDisableBottomSheetMaxHeight: this + shouldEnableBottomSheetMaxHeight: this .onShouldSetBottomSheetMaxHeight, isBottomSheetContentScrolling: isScrolling, - onCloseBottomSheet: this + onHandleClosingBottomSheet: this .onHandleClosingBottomSheet, - onHardwareButtonPress: this + onHandleHardwareButtonPress: this .onHandleHardwareButtonPress, } } > diff --git a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js index e5090e4abba01..0fe54cd77426b 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js @@ -20,19 +20,19 @@ const BottomSheetScreen = ( { children } ) => { const heightRef = useRef( { maxHeight: 0 } ); const isFocused = useIsFocused(); const { - onHardwareButtonPress, - shouldDisableBottomSheetMaxHeight, + onHandleHardwareButtonPress, + shouldEnableBottomSheetMaxHeight, setHeight, } = useContext( BottomSheetContext ); useFocusEffect( useCallback( () => { - onHardwareButtonPress( () => { + onHandleHardwareButtonPress( () => { if ( navigation.canGoBack() ) { - shouldDisableBottomSheetMaxHeight( true ); + shouldEnableBottomSheetMaxHeight( true ); navigation.goBack(); return true; } - onHardwareButtonPress( null ); + onHandleHardwareButtonPress( null ); return false; } ); diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 0d9027b91f863..fc88c980ec7c8 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -24,13 +24,13 @@ const Stack = createStackNavigator(); function ColorSettings( { defaultSettings } ) { const route = useRoute(); const { - onCloseBottomSheet, - shouldDisableBottomSheetMaxHeight, + onHandleClosingBottomSheet, + shouldEnableBottomSheetMaxHeight, } = useContext( BottomSheetContext ); useEffect( () => { - shouldDisableBottomSheetMaxHeight( true ); - onCloseBottomSheet( null ); + shouldEnableBottomSheetMaxHeight( true ); + onHandleClosingBottomSheet( null ); }, [] ); const PaletteScreenView = useRef( () => ( diff --git a/packages/components/src/mobile/color-settings/picker-screen.native.js b/packages/components/src/mobile/color-settings/picker-screen.native.js index 4721eab2df1b0..2611613bd9232 100644 --- a/packages/components/src/mobile/color-settings/picker-screen.native.js +++ b/packages/components/src/mobile/color-settings/picker-screen.native.js @@ -19,7 +19,7 @@ const PickerScreen = () => { const navigation = useNavigation(); const { onShouldEnableInnerHandling, - shouldDisableBottomSheetMaxHeight, + shouldEnableBottomSheetMaxHeight, onCloseBottomSheet, isBottomSheetContentScrolling, shouldEnableBottomSheetScroll, @@ -28,8 +28,8 @@ const PickerScreen = () => { return ( Date: Mon, 20 Jul 2020 15:58:32 +0200 Subject: [PATCH 33/52] fix: rename handler prop in picker screen --- .../src/mobile/color-settings/picker-screen.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/color-settings/picker-screen.native.js b/packages/components/src/mobile/color-settings/picker-screen.native.js index 2611613bd9232..9fed5c47ee46a 100644 --- a/packages/components/src/mobile/color-settings/picker-screen.native.js +++ b/packages/components/src/mobile/color-settings/picker-screen.native.js @@ -20,7 +20,7 @@ const PickerScreen = () => { const { onShouldEnableInnerHandling, shouldEnableBottomSheetMaxHeight, - onCloseBottomSheet, + onHandleClosingBottomSheet, isBottomSheetContentScrolling, shouldEnableBottomSheetScroll, } = useContext( BottomSheetContext ); @@ -35,7 +35,7 @@ const PickerScreen = () => { activeColor={ currentValue } isGradientColor={ isGradientColor } onNavigationBack={ navigation.goBack } - onCloseBottomSheet={ onCloseBottomSheet } + onHandleClosingBottomSheet={ onHandleClosingBottomSheet } isBottomSheetContentScrolling={ isBottomSheetContentScrolling } shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll } /> From b813d3a3512e1bef57cc1bc5ce11ead427431db1 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Tue, 21 Jul 2020 14:25:49 +0200 Subject: [PATCH 34/52] fix spacing in slider --- .../src/mobile/bottom-sheet/cellRowStyles.ios.scss | 6 ------ .../{cellRowStyles.android.scss => cellRowStyles.scss} | 2 +- 2 files changed, 1 insertion(+), 7 deletions(-) delete mode 100644 packages/components/src/mobile/bottom-sheet/cellRowStyles.ios.scss rename packages/components/src/mobile/bottom-sheet/{cellRowStyles.android.scss => cellRowStyles.scss} (78%) diff --git a/packages/components/src/mobile/bottom-sheet/cellRowStyles.ios.scss b/packages/components/src/mobile/bottom-sheet/cellRowStyles.ios.scss deleted file mode 100644 index bd76f06e7d1ab..0000000000000 --- a/packages/components/src/mobile/bottom-sheet/cellRowStyles.ios.scss +++ /dev/null @@ -1,6 +0,0 @@ -.cellRowStyles { - min-height: 48px; - margin-bottom: -27px; - width: 100%; - justify-content: space-between; -} diff --git a/packages/components/src/mobile/bottom-sheet/cellRowStyles.android.scss b/packages/components/src/mobile/bottom-sheet/cellRowStyles.scss similarity index 78% rename from packages/components/src/mobile/bottom-sheet/cellRowStyles.android.scss rename to packages/components/src/mobile/bottom-sheet/cellRowStyles.scss index 77b3be4d844fa..ce4f26d2ce80a 100644 --- a/packages/components/src/mobile/bottom-sheet/cellRowStyles.android.scss +++ b/packages/components/src/mobile/bottom-sheet/cellRowStyles.scss @@ -1,6 +1,6 @@ .cellRowStyles { min-height: 48px; - margin-bottom: -37px; + margin-bottom: -13px; width: 100%; justify-content: space-between; } From 481dc189e3a33cdbeee52297934c5d91055efaa4 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Tue, 28 Jul 2020 17:46:08 +0200 Subject: [PATCH 35/52] set push animation --- .../navigation-container.native.js | 28 +++++++++++++------ .../bottom-sheet/navigation-screen.native.js | 15 +++++----- 2 files changed, 26 insertions(+), 17 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js index c41bd1033b720..4fb9bd59800ad 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js @@ -1,8 +1,7 @@ /** * External dependencies */ -import { View } from 'react-native'; - +import { View, InteractionManager } from 'react-native'; /** * WordPress dependencies */ @@ -14,21 +13,32 @@ import { useState, useContext } from '@wordpress/element'; import { performLayoutAnimation } from '../layout-animation'; function BottomSheetNavigationContainer( { children, animate } ) { - const [ height, setMaxHeight ] = useState( 1 ); - const context = useContext( BottomSheetContext ); + const [ height, setMaxHeight ] = useState( context.currentHeight || 1 ); + const setHeight = ( maxHeight ) => { if ( height !== maxHeight && maxHeight > 50 ) { if ( animate ) { - performLayoutAnimation( 300 ); + InteractionManager.runAfterInteractions( () => { + performLayoutAnimation(); + setMaxHeight( maxHeight ); + } ); + } else { + setMaxHeight( maxHeight ); } - setMaxHeight( maxHeight ); } }; - return ( - - + + { children } diff --git a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js index 0fe54cd77426b..5e62482e5d81b 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js @@ -6,7 +6,8 @@ import { useIsFocused, useNavigation, } from '@react-navigation/native'; -import { View } from 'react-native'; +import { CardStyleInterpolators } from '@react-navigation/stack'; +import { View, InteractionManager } from 'react-native'; /** * WordPress dependencies @@ -24,6 +25,7 @@ const BottomSheetScreen = ( { children } ) => { shouldEnableBottomSheetMaxHeight, setHeight, } = useContext( BottomSheetContext ); + useFocusEffect( useCallback( () => { onHandleHardwareButtonPress( () => { @@ -37,14 +39,15 @@ const BottomSheetScreen = ( { children } ) => { } ); if ( heightRef.current.maxHeight !== 0 ) { - setHeight( heightRef.current.maxHeight ); + InteractionManager.runAfterInteractions( () => { + setHeight( heightRef.current.maxHeight ); + } ); } return () => {}; }, [] ) ); const onLayout = ( { nativeEvent } ) => { const { height } = nativeEvent.layout; - if ( heightRef.current.maxHeight !== height && isFocused ) { heightRef.current.maxHeight = height; setHeight( height ); @@ -55,11 +58,7 @@ const BottomSheetScreen = ( { children } ) => { }; BottomSheetScreen.options = { - cardStyleInterpolator: ( { current } ) => ( { - cardStyle: { - opacity: current.progress, - }, - } ), + cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, }; export default BottomSheetScreen; From 1079f273ece42c3d80186c23b789cdc364b18939 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Wed, 29 Jul 2020 22:36:52 +0200 Subject: [PATCH 36/52] use debounce to fix the initial animation --- .../bottom-sheet/navigation-container.native.js | 17 +++++++---------- .../bottom-sheet/navigation-screen.native.js | 6 ++++-- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js index 4fb9bd59800ad..dcaa817ced272 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js @@ -16,9 +16,11 @@ function BottomSheetNavigationContainer( { children, animate } ) { const context = useContext( BottomSheetContext ); const [ height, setMaxHeight ] = useState( context.currentHeight || 1 ); - const setHeight = ( maxHeight ) => { - if ( height !== maxHeight && maxHeight > 50 ) { - if ( animate ) { + const setHeight = ( maxHeight, layout ) => { + if ( height !== maxHeight && maxHeight > 1 ) { + if ( animate && layout && height === 1 ) { + setMaxHeight( maxHeight ); + } else if ( animate ) { InteractionManager.runAfterInteractions( () => { performLayoutAnimation(); setMaxHeight( maxHeight ); @@ -28,14 +30,9 @@ function BottomSheetNavigationContainer( { children, animate } ) { } } }; + return ( - + diff --git a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js index 5e62482e5d81b..8b699860b09b5 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js @@ -8,6 +8,7 @@ import { } from '@react-navigation/native'; import { CardStyleInterpolators } from '@react-navigation/stack'; import { View, InteractionManager } from 'react-native'; +import { debounce } from 'lodash'; /** * WordPress dependencies @@ -26,6 +27,8 @@ const BottomSheetScreen = ( { children } ) => { setHeight, } = useContext( BottomSheetContext ); + const setHeightDebounce = useCallback( debounce( setHeight, 10 ), [] ); + useFocusEffect( useCallback( () => { onHandleHardwareButtonPress( () => { @@ -37,7 +40,6 @@ const BottomSheetScreen = ( { children } ) => { onHandleHardwareButtonPress( null ); return false; } ); - if ( heightRef.current.maxHeight !== 0 ) { InteractionManager.runAfterInteractions( () => { setHeight( heightRef.current.maxHeight ); @@ -50,7 +52,7 @@ const BottomSheetScreen = ( { children } ) => { const { height } = nativeEvent.layout; if ( heightRef.current.maxHeight !== height && isFocused ) { heightRef.current.maxHeight = height; - setHeight( height ); + setHeightDebounce( height, true ); } }; From 3d7c3d1ae3bd61096402ad2ae18c0aaeede48845 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 30 Jul 2020 19:51:10 +0200 Subject: [PATCH 37/52] remove unused onReplaceSubsheet method --- .../src/mobile/bottom-sheet/index.native.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 6812edb2e1b8b..2c9656ef03c17 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -252,18 +252,6 @@ class BottomSheet extends Component { }; } - onReplaceSubsheet( destination, extraProps, callback ) { - performLayoutAnimation(); - - this.setState( - { - currentScreen: destination, - extraProps: extraProps || {}, - }, - callback - ); - } - render() { const { title = '', From 8995e6985bd1582629429202264d8b6a252ca006 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 31 Jul 2020 15:40:24 +0200 Subject: [PATCH 38/52] refactor navigation screen and navigation container WIP --- .../block-settings/container.native.js | 51 ++++++---------- .../src/mobile/bottom-sheet/index.native.js | 4 +- .../navigation-container.native.js | 51 +++++++++++++--- .../bottom-sheet/navigation-screen.native.js | 24 +++++--- .../src/mobile/color-settings/index.native.js | 61 ++++++------------- 5 files changed, 97 insertions(+), 94 deletions(-) diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index 8666b53a19ef2..ff01d0dbc94d4 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -4,13 +4,12 @@ /** * External dependencies */ -import { NavigationContainer, DefaultTheme } from '@react-navigation/native'; +import { DefaultTheme } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { InspectorControls } from '@wordpress/block-editor'; import { BottomSheet, ColorSettings } from '@wordpress/components'; import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; -import { useRef } from '@wordpress/element'; /** * Internal dependencies */ @@ -29,18 +28,6 @@ function BottomSheetSettings( { settings, ...props } ) { - const MainScreen = useRef( () => ( - - - - ) ); - - const DetailsScreen = useRef( () => ( - - - - ) ); - const backgroundStyle = usePreferredColorSchemeStyle( styles.background, styles.backgroundDark @@ -61,26 +48,22 @@ function BottomSheetSettings( { contentStyle={ styles.content } { ...props } > - - - - - - - + + { BottomSheet.NavigationScreen( { + name: blockSettingsScreens.settings, + stack: Stack, + children: , + } ) } + { BottomSheet.NavigationScreen( { + name: blockSettingsScreens.color, + stack: Stack, + children: , + } ) } ); diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 2c9656ef03c17..2e840d9b4705c 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -335,8 +335,8 @@ class BottomSheet extends Component { { - performLayoutAnimation(); - setMaxHeight( maxHeight ); - } ); + // InteractionManager.runAfterInteractions( () => { + performLayoutAnimation( 190 ); + setMaxHeight( maxHeight ); + // } ); } else { setMaxHeight( maxHeight ); } @@ -36,7 +63,17 @@ function BottomSheetNavigationContainer( { children, animate } ) { - { children } + { main ? ( + + + { children } + + + ) : ( + + { children } + + ) } ); diff --git a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js index 8b699860b09b5..11cc9331a28bb 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js @@ -6,8 +6,7 @@ import { useIsFocused, useNavigation, } from '@react-navigation/native'; -import { CardStyleInterpolators } from '@react-navigation/stack'; -import { View, InteractionManager } from 'react-native'; +import { View } from 'react-native'; import { debounce } from 'lodash'; /** @@ -41,9 +40,9 @@ const BottomSheetScreen = ( { children } ) => { return false; } ); if ( heightRef.current.maxHeight !== 0 ) { - InteractionManager.runAfterInteractions( () => { - setHeight( heightRef.current.maxHeight ); - } ); + // InteractionManager.runAfterInteractions( () => { + setHeight( heightRef.current.maxHeight ); + // } ); } return () => {}; }, [] ) @@ -59,8 +58,17 @@ const BottomSheetScreen = ( { children } ) => { return { children }; }; -BottomSheetScreen.options = { - cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, +const OuterBottomSheetScreen = ( { name, stack, children, ...otherProps } ) => { + const ScreenView = useRef( () => ( + { children } + ) ); + return ( + + ); }; -export default BottomSheetScreen; +export default OuterBottomSheetScreen; diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index fc88c980ec7c8..54d299ab52e32 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -6,7 +6,7 @@ import { createStackNavigator } from '@react-navigation/stack'; /** * WordPress dependencies */ -import { useEffect, useContext, useRef } from '@wordpress/element'; +import { useEffect, useContext } from '@wordpress/element'; import { BottomSheetContext, BottomSheet } from '@wordpress/components'; import { useRoute } from '@react-navigation/native'; @@ -33,49 +33,24 @@ function ColorSettings( { defaultSettings } ) { onHandleClosingBottomSheet( null ); }, [] ); - const PaletteScreenView = useRef( () => ( - - - - ) ); - - const PickerScreenView = useRef( () => ( - - - - ) ); - - const GradientPickerView = useRef( () => ( - - - - ) ); - return ( - - - - - - + + { BottomSheet.NavigationScreen( { + name: colorsUtils.screens.palette, + stack: Stack, + initialParams: { defaultSettings, ...route.params }, + children: , + } ) } + { BottomSheet.NavigationScreen( { + name: colorsUtils.screens.picker, + stack: Stack, + children: , + } ) } + { BottomSheet.NavigationScreen( { + name: colorsUtils.screens.gradientPicker, + stack: Stack, + children: , + } ) } ); } From e3f881036d7f0250a85f85a9853097f33c790654 Mon Sep 17 00:00:00 2001 From: Piotr Drapich Date: Wed, 5 Aug 2020 16:34:06 +0200 Subject: [PATCH 39/52] change animation to fade --- .../bottom-sheet/navigation-container.native.js | 13 +++++++++---- .../mobile/bottom-sheet/navigation-screen.native.js | 2 -- packages/react-native-editor/ios/Podfile.lock | 10 +++++----- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js index bd9a6677febc3..87b7ae273e4be 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js @@ -3,7 +3,6 @@ */ import { View, Easing } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; -import { CardStyleInterpolators } from '@react-navigation/stack'; /** * WordPress dependencies @@ -23,6 +22,14 @@ const AnimationSpec = { }, }; +const fadeConfig = ( { current } ) => { + return { + cardStyle: { + opacity: current.progress, + }, + }; +}; + const options = { transitionSpec: { open: AnimationSpec, @@ -30,7 +37,7 @@ const options = { }, headerShown: false, gestureEnabled: false, - cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, + cardStyleInterpolator: fadeConfig, }; function BottomSheetNavigationContainer( { @@ -48,10 +55,8 @@ function BottomSheetNavigationContainer( { if ( animate && layout && height === 1 ) { setMaxHeight( maxHeight ); } else if ( animate ) { - // InteractionManager.runAfterInteractions( () => { performLayoutAnimation( 190 ); setMaxHeight( maxHeight ); - // } ); } else { setMaxHeight( maxHeight ); } diff --git a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js index 11cc9331a28bb..01c0fa3643103 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js @@ -40,9 +40,7 @@ const BottomSheetScreen = ( { children } ) => { return false; } ); if ( heightRef.current.maxHeight !== 0 ) { - // InteractionManager.runAfterInteractions( () => { setHeight( heightRef.current.maxHeight ); - // } ); } return () => {}; }, [] ) diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index 60e31e0672e8d..8b45f085c4eb8 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -197,7 +197,7 @@ PODS: - React - react-native-safe-area (0.5.1): - React - - react-native-safe-area-context (3.0.7): + - react-native-safe-area-context (3.1.1): - React - react-native-slider (3.0.2): - React @@ -245,7 +245,7 @@ PODS: - React - RNCMaskedView (0.1.10): - React - - RNGestureHandler (1.6.1): + - RNGestureHandler (1.6.0): - React - RNReanimated (1.9.0): - React @@ -416,9 +416,9 @@ SPEC CHECKSUMS: react-native-get-random-values: 8940331a943a46c165d3ed05802c09c392f8dd46 react-native-keyboard-aware-scroll-view: ffa9152671fec9a571197ed2d02e0fcb90206e60 react-native-safe-area: e8230b0017d76c00de6b01e2412dcf86b127c6a3 - react-native-safe-area-context: c39fc20a20cd66ebf1d56c6f8b8711142fbfee98 + react-native-safe-area-context: 4c3249e4840225c61fcd215b136af0a737bccb79 react-native-slider: ecb7f25c14f2348d1c1f629a6f2be7611d22a066 - react-native-video: d01ed7ff1e38fa7dcc6c15c94cf505e661b7bfd0 + react-native-video: 961749da457e73bf0b5565edfbaffc25abfb8974 React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76 React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360 React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72 @@ -431,7 +431,7 @@ SPEC CHECKSUMS: ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd ReactNativeDarkMode: f61376360c5d983907e5c316e8e1c853a8c2f348 RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459 - RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38 + RNGestureHandler: dde546180bf24af0b5f737c8ad04b6f3fa51609a RNReanimated: b5ccb50650ba06f6e749c7c329a1bc3ae0c88b43 RNScreens: c526239bbe0e957b988dacc8d75ac94ec9cb19da RNSVG: 68a534a5db06dcbdaebfd5079349191598caef7b From 746894e68cf79ec04f98182048645d61e72993ab Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 6 Aug 2020 13:55:57 +0200 Subject: [PATCH 40/52] change the in/out animation duration --- packages/components/src/mobile/bottom-sheet/index.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 2e840d9b4705c..c8b9bccf69de0 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -335,8 +335,8 @@ class BottomSheet extends Component { Date: Mon, 10 Aug 2020 17:05:03 +0200 Subject: [PATCH 41/52] fix slider styles --- .../mobile/bottom-sheet/range-cell.native.js | 9 ++++----- .../bottom-sheet/range-cell.native.scss | 20 ++++++++----------- 2 files changed, 12 insertions(+), 17 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 31248f01895b4..0f1f5401ea390 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -186,16 +186,15 @@ class BottomSheetRangeCell extends Component { styles.sliderDarkTextInput ); - const cellRowContainerStyle = [ - styles.cellRowStyles, - isIOS ? styles.cellRowStylesIOS : styles.cellRowStylesAndroid, + const containerStyle = [ + styles.container, + isIOS ? styles.containerIOS : styles.containerAndroid, ]; return ( - + { rangePreview } Date: Tue, 11 Aug 2020 17:54:53 +0200 Subject: [PATCH 42/52] rename setMaxHeight to avoid confusion --- .../navigation-container.native.js | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js index 87b7ae273e4be..213b97cc324ae 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js @@ -40,6 +40,8 @@ const options = { cardStyleInterpolator: fadeConfig, }; +const ANIMATION_DURATION = 190; + function BottomSheetNavigationContainer( { children, animate, @@ -48,25 +50,25 @@ function BottomSheetNavigationContainer( { stack, } ) { const context = useContext( BottomSheetContext ); - const [ height, setMaxHeight ] = useState( context.currentHeight || 1 ); + const [ currentHeight, setCurrentHeight ] = useState( context.currentHeight || 1 ); - const setHeight = ( maxHeight, layout ) => { - if ( height !== maxHeight && maxHeight > 1 ) { - if ( animate && layout && height === 1 ) { - setMaxHeight( maxHeight ); + const setHeight = ( height, layout ) => { + if ( currentHeight !== height && height > 1 ) { + if ( animate && layout && currentHeight === 1 ) { + setCurrentHeight( height ); } else if ( animate ) { - performLayoutAnimation( 190 ); - setMaxHeight( maxHeight ); + performLayoutAnimation( ANIMATION_DURATION ); + setCurrentHeight( height ); } else { - setMaxHeight( maxHeight ); + setCurrentHeight( height ); } } }; return ( - + { main ? ( From 901974020e2be010200c6f908a20ca7f890c77b8 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Tue, 11 Aug 2020 17:55:37 +0200 Subject: [PATCH 43/52] fix js-lint --- .../src/mobile/bottom-sheet/navigation-container.native.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js index 213b97cc324ae..24e96b79364ec 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js @@ -50,7 +50,9 @@ function BottomSheetNavigationContainer( { stack, } ) { const context = useContext( BottomSheetContext ); - const [ currentHeight, setCurrentHeight ] = useState( context.currentHeight || 1 ); + const [ currentHeight, setCurrentHeight ] = useState( + context.currentHeight || 1 + ); const setHeight = ( height, layout ) => { if ( currentHeight !== height && height > 1 ) { From 9bba9bed124eb104d41f0a90ead67647e2b46cf1 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Tue, 11 Aug 2020 18:03:09 +0200 Subject: [PATCH 44/52] use configPath in jest config --- test/native/jest.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/native/jest.config.js b/test/native/jest.config.js index 16c0c6489c1fd..2443e29ef5f4e 100644 --- a/test/native/jest.config.js +++ b/test/native/jest.config.js @@ -50,7 +50,7 @@ module.exports = { // Mock the CSS modules. See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets '\\.(scss)$': '/' + configPath + '/__mocks__/styleMock.js', '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': - '/test/native/__mocks__/fileMock.js', + '/' + configPath + '/__mocks__/fileMock.js', [ `@wordpress\\/(${ transpiledPackageNames.join( '|' ) })$` ]: '/packages/$1/src', From 2b58be6371ce9b3cd4629f777d98fbdf84bf0c9f Mon Sep 17 00:00:00 2001 From: Dratwas Date: Wed, 12 Aug 2020 18:07:45 +0200 Subject: [PATCH 45/52] performance optimisation --- .../src/color-picker/index.native.js | 31 ++++---- .../bottom-sheet-navigation-context.native.js | 16 ++++ .../navigation-container.native.js | 44 ++++++----- .../bottom-sheet/navigation-screen.native.js | 14 +++- .../src/mobile/color-settings/index.native.js | 78 +++++++++++++------ .../color-settings/palette.screen.native.js | 6 +- .../color-settings/picker-screen.native.js | 47 +++++++---- 7 files changed, 151 insertions(+), 85 deletions(-) create mode 100644 packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation-context.native.js diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index f895c7a565b46..27682f7ff2542 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -2,12 +2,13 @@ * External dependencies */ import { View, Text, TouchableWithoutFeedback, Platform } from 'react-native'; +import React from 'react'; import HsvColorPicker from 'react-native-hsv-color-picker'; import tinycolor from 'tinycolor2'; /** * WordPress dependencies */ -import { useState, useEffect } from '@wordpress/element'; +import { useState, useEffect, useRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { BottomSheet } from '@wordpress/components'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; @@ -30,12 +31,16 @@ function ColorPicker( { onHandleHardwareButtonPress, bottomLabelText, } ) { + const didMount = useRef( false ); const isIOS = Platform.OS === 'ios'; const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 }; - - const [ hue, setHue ] = useState( 0 ); - const [ sat, setSaturation ] = useState( 0.5 ); - const [ val, setValue ] = useState( 0.5 ); + const { h: initH, s: initS, v: initV } = + ! isGradientColor && activeColor + ? tinycolor( activeColor ).toHsv() + : { h: 0, s: 0.5, v: 0.5 }; + const [ hue, setHue ] = useState( initH ); + const [ sat, setSaturation ] = useState( initS ); + const [ val, setValue ] = useState( initV ); const [ savedColor ] = useState( activeColor ); const { @@ -71,23 +76,15 @@ function ColorPicker( { `hsv ${ hue } ${ sat } ${ val }` ).toHexString(); - function setHSVFromHex( color ) { - const { h, s, v } = tinycolor( color ).toHsv(); - - setHue( h ); - setSaturation( s ); - setValue( v ); - } - useEffect( () => { + if ( ! didMount.current ) { + didMount.current = true; + return; + } setColor( currentColor ); }, [ currentColor ] ); useEffect( () => { - if ( ! isGradientColor && activeColor ) { - setHSVFromHex( activeColor ); - } - setColor( activeColor ); shouldEnableBottomSheetMaxHeight( false ); onHandleClosingBottomSheet( () => { setColor( savedColor ); diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation-context.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation-context.native.js new file mode 100644 index 0000000000000..9e89c285b2534 --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation-context.native.js @@ -0,0 +1,16 @@ +/** + * WordPress dependencies + */ +import { createContext } from '@wordpress/element'; + +// Navigation context in BottomSheet is necessary for controlling the +// height of navigation container. +export const BottomSheetNavigationContext = createContext( { + currentHeight: 1, + setHeight: () => {}, +} ); + +export const { + Provider: BottomSheetNavigationProvider, + Consumer: BottomSheetNavigationConsumer, +} = BottomSheetNavigationContext; diff --git a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js index 24e96b79364ec..9a1e7209f77f1 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js @@ -7,12 +7,15 @@ import { NavigationContainer } from '@react-navigation/native'; /** * WordPress dependencies */ -import { BottomSheetContext, BottomSheetProvider } from '@wordpress/components'; -import { useState, useContext } from '@wordpress/element'; +import { useState, useContext, useMemo } from '@wordpress/element'; /** * Internal dependencies */ import { performLayoutAnimation } from '../layout-animation'; +import { + BottomSheetNavigationContext, + BottomSheetNavigationProvider, +} from './bottom-sheet-navigation-context'; const AnimationSpec = { animation: 'timing', @@ -49,7 +52,7 @@ function BottomSheetNavigationContainer( { theme, stack, } ) { - const context = useContext( BottomSheetContext ); + const context = useContext( BottomSheetNavigationContext ); const [ currentHeight, setCurrentHeight ] = useState( context.currentHeight || 1 ); @@ -66,26 +69,27 @@ function BottomSheetNavigationContainer( { } } }; - - return ( - - - { main ? ( - + return useMemo( () => { + return ( + + + { main ? ( + + + { children } + + + ) : ( { children } - - ) : ( - - { children } - - ) } - - - ); + ) } + + + ); + }, [ currentHeight ] ); } export default BottomSheetNavigationContainer; diff --git a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js index 01c0fa3643103..b1f87efff29bb 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js @@ -14,7 +14,12 @@ import { debounce } from 'lodash'; */ import { BottomSheetContext } from '@wordpress/components'; -import { useRef, useCallback, useContext } from '@wordpress/element'; +import { useRef, useCallback, useContext, useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { BottomSheetNavigationContext } from './bottom-sheet-navigation-context'; const BottomSheetScreen = ( { children } ) => { const navigation = useNavigation(); @@ -23,9 +28,10 @@ const BottomSheetScreen = ( { children } ) => { const { onHandleHardwareButtonPress, shouldEnableBottomSheetMaxHeight, - setHeight, } = useContext( BottomSheetContext ); + const { setHeight } = useContext( BottomSheetNavigationContext ); + const setHeightDebounce = useCallback( debounce( setHeight, 10 ), [] ); useFocusEffect( @@ -53,7 +59,9 @@ const BottomSheetScreen = ( { children } ) => { } }; - return { children }; + return useMemo( () => { + return { children }; + }, [ children, isFocused ] ); }; const OuterBottomSheetScreen = ( { name, stack, children, ...otherProps } ) => { diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 54d299ab52e32..be7b67a551020 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -2,6 +2,7 @@ * External dependencies */ import { createStackNavigator } from '@react-navigation/stack'; +import React from 'react'; /** * WordPress dependencies @@ -21,37 +22,66 @@ import { colorsUtils } from './utils'; const Stack = createStackNavigator(); -function ColorSettings( { defaultSettings } ) { +const ColorSettingsMemo = React.memo( + ( { + defaultSettings, + onHandleClosingBottomSheet, + shouldEnableBottomSheetMaxHeight, + onColorChange, + colorValue, + gradientValue, + onGradientChange, + label, + } ) => { + useEffect( () => { + shouldEnableBottomSheetMaxHeight( true ); + onHandleClosingBottomSheet( null ); + }, [] ); + return ( + + { BottomSheet.NavigationScreen( { + name: colorsUtils.screens.palette, + stack: Stack, + initialParams: { + defaultSettings, + onColorChange, + colorValue, + gradientValue, + onGradientChange, + label, + }, + children: , + } ) } + { BottomSheet.NavigationScreen( { + name: colorsUtils.screens.picker, + stack: Stack, + children: , + } ) } + { BottomSheet.NavigationScreen( { + name: colorsUtils.screens.gradientPicker, + stack: Stack, + children: , + } ) } + + ); + } +); +function ColorSettings( props ) { const route = useRoute(); const { onHandleClosingBottomSheet, shouldEnableBottomSheetMaxHeight, } = useContext( BottomSheetContext ); - useEffect( () => { - shouldEnableBottomSheetMaxHeight( true ); - onHandleClosingBottomSheet( null ); - }, [] ); - return ( - - { BottomSheet.NavigationScreen( { - name: colorsUtils.screens.palette, - stack: Stack, - initialParams: { defaultSettings, ...route.params }, - children: , - } ) } - { BottomSheet.NavigationScreen( { - name: colorsUtils.screens.picker, - stack: Stack, - children: , - } ) } - { BottomSheet.NavigationScreen( { - name: colorsUtils.screens.gradientPicker, - stack: Stack, - children: , - } ) } - + ); } diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js index 867d81eb9f53d..91cd1cc8e7195 100644 --- a/packages/components/src/mobile/color-settings/palette.screen.native.js +++ b/packages/components/src/mobile/color-settings/palette.screen.native.js @@ -38,7 +38,6 @@ const PaletteScreen = () => { defaultSettings, } = route.params || {}; const { segments, isGradient } = colorsUtils; - const [ currentValue, setCurrentValue ] = useState( colorValue ); const isGradientColor = isGradient( currentValue ); const selectedSegmentIndex = isGradientColor ? 1 : 0; @@ -71,16 +70,14 @@ const PaletteScreen = () => { function onCustomPress() { if ( isSolidSegment ) { navigation.navigate( colorsUtils.screens.picker, { - setColor, - isGradientColor, currentValue, + setColor, } ); } else { navigation.navigate( colorsUtils.screens.gradientPicker, { setColor, isGradientColor, currentValue, - isSolidSegment, } ); } } @@ -123,7 +120,6 @@ const PaletteScreen = () => { ); } - return ( { onHandleClosingBottomSheet, isBottomSheetContentScrolling, shouldEnableBottomSheetScroll, + onHandleHardwareButtonPress, } = useContext( BottomSheetContext ); const { setColor, currentValue, isGradientColor } = route.params; - return ( - - ); + return useMemo( () => { + return ( + + ); + }, [ + setColor, + currentValue, + isGradientColor, + onShouldEnableInnerHandling, + shouldEnableBottomSheetMaxHeight, + onHandleClosingBottomSheet, + isBottomSheetContentScrolling, + shouldEnableBottomSheetScroll, + onHandleHardwareButtonPress, + ] ); }; export default PickerScreen; From 1cc94dbac6e99569d340113d29c6ef60b0f8c5fd Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 13 Aug 2020 13:48:38 +0200 Subject: [PATCH 46/52] fix custom color from initial palette - cover block --- .../block-library/src/cover/edit.native.js | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index d698791df731d..39e6d685b0557 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -204,8 +204,8 @@ const Cover = ( { function openColorPicker() { if ( isParentSelected ) { - openGeneralSidebar(); setCustomColorPickerShowing( true ); + openGeneralSidebar(); } } @@ -314,25 +314,29 @@ const Cover = ( { { ( { shouldEnableBottomSheetScroll, - shouldDisableBottomSheetMaxHeight, - onCloseBottomSheet, - onHardwareButtonPress, + shouldEnableBottomSheetMaxHeight, + onHandleClosingBottomSheet, + onHandleHardwareButtonPress, isBottomSheetContentScrolling, } ) => ( { setCustomColor( color ); setColor( color ); } } onNavigationBack={ closeSettingsBottomSheet } - onCloseBottomSheet={ onCloseBottomSheet } - onHardwareButtonPress={ onHardwareButtonPress } + onHandleClosingBottomSheet={ + onHandleClosingBottomSheet + } + onHandleHardwareButtonPress={ + onHandleHardwareButtonPress + } onBottomSheetClosed={ () => { setCustomColorPickerShowing( false ); } } From 08b95092246071d0ea55cff4bd2c5c34a084b017 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 13 Aug 2020 14:00:05 +0200 Subject: [PATCH 47/52] refactor navigation screen and navigation container --- .../block-settings/container.native.js | 20 +++++------ .../navigation-container.native.js | 20 +++++++++-- .../bottom-sheet/navigation-screen.native.js | 15 +------- .../src/mobile/color-settings/index.native.js | 34 +++++++++---------- 4 files changed, 45 insertions(+), 44 deletions(-) diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index ff01d0dbc94d4..e4f076491ad40 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -54,16 +54,16 @@ function BottomSheetSettings( { theme={ MyTheme } stack={ Stack } > - { BottomSheet.NavigationScreen( { - name: blockSettingsScreens.settings, - stack: Stack, - children: , - } ) } - { BottomSheet.NavigationScreen( { - name: blockSettingsScreens.color, - stack: Stack, - children: , - } ) } + + + + + + ); diff --git a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js index 9a1e7209f77f1..e9223f9434334 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-container.native.js @@ -7,7 +7,7 @@ import { NavigationContainer } from '@react-navigation/native'; /** * WordPress dependencies */ -import { useState, useContext, useMemo } from '@wordpress/element'; +import { useState, useContext, useMemo, Children } from '@wordpress/element'; /** * Internal dependencies */ @@ -69,6 +69,20 @@ function BottomSheetNavigationContainer( { } } }; + + const screens = useMemo( () => { + return Children.map( children, ( child ) => { + const { name, ...otherProps } = child.props; + return ( + child } + /> + ); + } ); + }, [ children ] ); + return useMemo( () => { return ( @@ -78,12 +92,12 @@ function BottomSheetNavigationContainer( { { main ? ( - { children } + { screens } ) : ( - { children } + { screens } ) } diff --git a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js index b1f87efff29bb..c71ae35bb1970 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js @@ -64,17 +64,4 @@ const BottomSheetScreen = ( { children } ) => { }, [ children, isFocused ] ); }; -const OuterBottomSheetScreen = ( { name, stack, children, ...otherProps } ) => { - const ScreenView = useRef( () => ( - { children } - ) ); - return ( - - ); -}; - -export default OuterBottomSheetScreen; +export default BottomSheetScreen; diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index be7b67a551020..fd3f9839fe7a6 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -39,29 +39,29 @@ const ColorSettingsMemo = React.memo( }, [] ); return ( - { BottomSheet.NavigationScreen( { - name: colorsUtils.screens.palette, - stack: Stack, - initialParams: { + , - } ) } - { BottomSheet.NavigationScreen( { - name: colorsUtils.screens.picker, - stack: Stack, - children: , - } ) } - { BottomSheet.NavigationScreen( { - name: colorsUtils.screens.gradientPicker, - stack: Stack, - children: , - } ) } + } } + > + + + + + + + + ); } From 537c5f29d23ae0eda17b689743fd82dd54ba666e Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 13 Aug 2020 14:11:28 +0200 Subject: [PATCH 48/52] Revert cell styles --- .../mobile/bottom-sheet/cellStyles.android.scss | 11 +++++++++++ .../src/mobile/bottom-sheet/cellStyles.ios.scss | 15 +++++++++++++++ 2 files changed, 26 insertions(+) create mode 100644 packages/components/src/mobile/bottom-sheet/cellStyles.android.scss create mode 100644 packages/components/src/mobile/bottom-sheet/cellStyles.ios.scss diff --git a/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss b/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss new file mode 100644 index 0000000000000..0c823db8c3fc9 --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss @@ -0,0 +1,11 @@ +.labelIconSeparator { + width: 32px; +} + +.separatorMarginLeft { + margin-left: 56px; +} + +.isSelected { + color: $blue-wordpress; +} diff --git a/packages/components/src/mobile/bottom-sheet/cellStyles.ios.scss b/packages/components/src/mobile/bottom-sheet/cellStyles.ios.scss new file mode 100644 index 0000000000000..6cb9dead68b6f --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/cellStyles.ios.scss @@ -0,0 +1,15 @@ +.labelIconSeparator { + width: 12px; +} + +.separatorMarginLeft { + margin-left: 36px; +} + +.isSelected { + color: $blue-wordpress; +} + +.activeOpacity { + opacity: 1; +} From ddbcfcdab0b2a81dadf2b08ae6b087d387b09f24 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 13 Aug 2020 16:17:29 +0200 Subject: [PATCH 49/52] Add readme for navigation in bottom sheet and refactor container and screen --- .../block-settings/container.native.js | 28 +----- .../block-settings/container.native.scss | 8 -- .../src/mobile/bottom-sheet/index.native.js | 4 +- .../mobile/bottom-sheet/navigation/README.md | 88 +++++++++++++++++++ .../bottom-sheet-navigation-context.native.js | 0 .../navigation-container.native.js | 52 +++++++---- .../navigation-screen.native.js | 4 +- .../navigation/styles.native.scss | 7 ++ .../src/mobile/color-settings/index.native.js | 5 +- 9 files changed, 138 insertions(+), 58 deletions(-) create mode 100644 packages/components/src/mobile/bottom-sheet/navigation/README.md rename packages/components/src/mobile/bottom-sheet/{ => navigation}/bottom-sheet-navigation-context.native.js (100%) rename packages/components/src/mobile/bottom-sheet/{ => navigation}/navigation-container.native.js (64%) rename packages/components/src/mobile/bottom-sheet/{ => navigation}/navigation-screen.native.js (94%) create mode 100644 packages/components/src/mobile/bottom-sheet/navigation/styles.native.scss diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index e4f076491ad40..a316b2c86cf5f 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -1,22 +1,15 @@ /** * WordPress dependencies */ -/** - * External dependencies - */ -import { DefaultTheme } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; import { InspectorControls } from '@wordpress/block-editor'; import { BottomSheet, ColorSettings } from '@wordpress/components'; -import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose'; +import { compose } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; /** * Internal dependencies */ import styles from './container.native.scss'; -const Stack = createStackNavigator(); - export const blockSettingsScreens = { settings: 'Settings', color: 'Color', @@ -28,18 +21,6 @@ function BottomSheetSettings( { settings, ...props } ) { - const backgroundStyle = usePreferredColorSchemeStyle( - styles.background, - styles.backgroundDark - ); - - const MyTheme = { - ...DefaultTheme, - colors: { - ...DefaultTheme.colors, - background: backgroundStyle.backgroundColor, - }, - }; return ( - + diff --git a/packages/block-editor/src/components/block-settings/container.native.scss b/packages/block-editor/src/components/block-settings/container.native.scss index d0c47845a0450..2eed1c9e3f2d0 100644 --- a/packages/block-editor/src/components/block-settings/container.native.scss +++ b/packages/block-editor/src/components/block-settings/container.native.scss @@ -2,11 +2,3 @@ padding-left: 0; padding-right: 0; } - -.background { - background-color: $white; -} - -.backgroundDark { - background-color: $background-dark-elevated; -} diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index e08dc2390445d..8220c9b4eca20 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -34,8 +34,8 @@ import SwitchCell from './switch-cell'; import RangeCell from './range-cell'; import ColorCell from './color-cell'; import RadioCell from './radio-cell'; -import NavigationScreen from './navigation-screen'; -import NavigationContainer from './navigation-container'; +import NavigationScreen from './navigation/navigation-screen'; +import NavigationContainer from './navigation/navigation-container'; import KeyboardAvoidingView from './keyboard-avoiding-view'; import { BottomSheetProvider } from './bottom-sheet-context'; diff --git a/packages/components/src/mobile/bottom-sheet/navigation/README.md b/packages/components/src/mobile/bottom-sheet/navigation/README.md new file mode 100644 index 0000000000000..4ad61cc91f66d --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/navigation/README.md @@ -0,0 +1,88 @@ +# BottomSheet Navigation +We use [`react-navigation`](https://reactnavigation.org/) v5 to handle multiple screens inside the bottom-sheet. We have two components that help use it w/o additional settings. +- BottomSheet.NavigationContainer +- BottomSheet.NavigationScreen + +## BottomSheet.NavigationContainer + +`BottomSheet.NavigationContainer` is a React component to render a Stack Navigator with settings prepared for the Bottom-Sheet. This component also handles the height animation of bottom-sheet when back or pushing a new screen. + +**NOTE:** Children of the `BottomSheet.NavigationContainer` can be only `BottomSheet.NavigationScreen` + +## BottomSheet.NavigationScreen + +`BottomSheet.NavigationScreen` is a React component to render a Screen inside the stack that is passed from parent. This component can be rendered only inside the `BottomSheet.NavigationContainer` and is responsible for handling the hardware back button on Android and setting the correct height of the parent (container). + + +## Usage + + +```jsx +import { BottomSheet } from '@wordpress/components'; + + +const BottomSheetWithNavigation = () => ( +  +    +      +        +      +      +        +      +    +  +); +``` + +## Props + +### BottomSheet.NavigationContainer +The component accepts the following props. + +### animate + +This prop determines if the container height should be animated. It should be set to `true` only for the root container in BottomSheet. In nested `BottomSheet.NavigationContainer` set it to `false`. + +- Type: `Boolean` +- Required: No +- Default: `false` + +### main + +Since we do not wrap the whole editor inside navigation (yet) we need to determine if the container is the very top one (root one). Set it to `true` in only for NOT nested navigation container. + +Note: This prop is needed until we wrap the editor inside the navigation container. + +- Type: `Boolean` +- Required: No +- Default: `false` + +### theme + +This prop is to set the theme of navigation containers. Please read: https://reactnavigation.org/docs/themes/ + +- Type: `Object` +- Required: No + + +### BottomSheet.NavigationScreen +The component accepts the following props. Props not included in this set will be applied to the Stack.Screen from `react-navigation`. + +### name + +This prop is used as a Screen name. + +- Type: `String` +- Required: Yes + +### children + +The component that should be rendered as content. + +- Type: React Element +- Required: Yes \ No newline at end of file diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation-context.native.js b/packages/components/src/mobile/bottom-sheet/navigation/bottom-sheet-navigation-context.native.js similarity index 100% rename from packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation-context.native.js rename to packages/components/src/mobile/bottom-sheet/navigation/bottom-sheet-navigation-context.native.js diff --git a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/navigation/navigation-container.native.js similarity index 64% rename from packages/components/src/mobile/bottom-sheet/navigation-container.native.js rename to packages/components/src/mobile/bottom-sheet/navigation/navigation-container.native.js index e9223f9434334..a8b802d6cf2cb 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-container.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation/navigation-container.native.js @@ -2,21 +2,33 @@ * External dependencies */ import { View, Easing } from 'react-native'; -import { NavigationContainer } from '@react-navigation/native'; +import { NavigationContainer, DefaultTheme } from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; /** * WordPress dependencies */ -import { useState, useContext, useMemo, Children } from '@wordpress/element'; +import { + useState, + useContext, + useMemo, + Children, + useRef, +} from '@wordpress/element'; + +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; + /** * Internal dependencies */ -import { performLayoutAnimation } from '../layout-animation'; +import { performLayoutAnimation } from '../../layout-animation'; import { BottomSheetNavigationContext, BottomSheetNavigationProvider, } from './bottom-sheet-navigation-context'; +import styles from './styles.scss'; + const AnimationSpec = { animation: 'timing', config: { @@ -45,18 +57,26 @@ const options = { const ANIMATION_DURATION = 190; -function BottomSheetNavigationContainer( { - children, - animate, - main, - theme, - stack, -} ) { +function BottomSheetNavigationContainer( { children, animate, main, theme } ) { + const Stack = useRef( createStackNavigator() ).current; const context = useContext( BottomSheetNavigationContext ); const [ currentHeight, setCurrentHeight ] = useState( context.currentHeight || 1 ); + const backgroundStyle = usePreferredColorSchemeStyle( + styles.background, + styles.backgroundDark + ); + + const _theme = theme || { + ...DefaultTheme, + colors: { + ...DefaultTheme.colors, + background: backgroundStyle.backgroundColor, + }, + }; + const setHeight = ( height, layout ) => { if ( currentHeight !== height && height > 1 ) { if ( animate && layout && currentHeight === 1 ) { @@ -74,7 +94,7 @@ function BottomSheetNavigationContainer( { return Children.map( children, ( child ) => { const { name, ...otherProps } = child.props; return ( - child } @@ -90,15 +110,15 @@ function BottomSheetNavigationContainer( { value={ { setHeight, currentHeight } } > { main ? ( - - + + { screens } - + ) : ( - + { screens } - + ) } diff --git a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/navigation/navigation-screen.native.js similarity index 94% rename from packages/components/src/mobile/bottom-sheet/navigation-screen.native.js rename to packages/components/src/mobile/bottom-sheet/navigation/navigation-screen.native.js index c71ae35bb1970..3c13517f1a0d2 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation/navigation-screen.native.js @@ -21,7 +21,7 @@ import { useRef, useCallback, useContext, useMemo } from '@wordpress/element'; */ import { BottomSheetNavigationContext } from './bottom-sheet-navigation-context'; -const BottomSheetScreen = ( { children } ) => { +const BottomSheetNavigationScreen = ( { children } ) => { const navigation = useNavigation(); const heightRef = useRef( { maxHeight: 0 } ); const isFocused = useIsFocused(); @@ -64,4 +64,4 @@ const BottomSheetScreen = ( { children } ) => { }, [ children, isFocused ] ); }; -export default BottomSheetScreen; +export default BottomSheetNavigationScreen; diff --git a/packages/components/src/mobile/bottom-sheet/navigation/styles.native.scss b/packages/components/src/mobile/bottom-sheet/navigation/styles.native.scss new file mode 100644 index 0000000000000..ebed998355726 --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/navigation/styles.native.scss @@ -0,0 +1,7 @@ +.background { + background-color: $white; +} + +.backgroundDark { + background-color: $background-dark-elevated; +} diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index fd3f9839fe7a6..ec8be2ac573c6 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { createStackNavigator } from '@react-navigation/stack'; import React from 'react'; /** @@ -20,8 +19,6 @@ import PaletteScreen from './palette.screen'; import { colorsUtils } from './utils'; -const Stack = createStackNavigator(); - const ColorSettingsMemo = React.memo( ( { defaultSettings, @@ -38,7 +35,7 @@ const ColorSettingsMemo = React.memo( onHandleClosingBottomSheet( null ); }, [] ); return ( - + Date: Thu, 13 Aug 2020 16:20:13 +0200 Subject: [PATCH 50/52] rename dirname because manifest title --- .../{navigation => bottom-sheet-navigation}/README.md | 0 .../bottom-sheet-navigation-context.native.js | 0 .../navigation-container.native.js | 0 .../navigation-screen.native.js | 0 .../styles.native.scss | 0 packages/components/src/mobile/bottom-sheet/index.native.js | 4 ++-- 6 files changed, 2 insertions(+), 2 deletions(-) rename packages/components/src/mobile/bottom-sheet/{navigation => bottom-sheet-navigation}/README.md (100%) rename packages/components/src/mobile/bottom-sheet/{navigation => bottom-sheet-navigation}/bottom-sheet-navigation-context.native.js (100%) rename packages/components/src/mobile/bottom-sheet/{navigation => bottom-sheet-navigation}/navigation-container.native.js (100%) rename packages/components/src/mobile/bottom-sheet/{navigation => bottom-sheet-navigation}/navigation-screen.native.js (100%) rename packages/components/src/mobile/bottom-sheet/{navigation => bottom-sheet-navigation}/styles.native.scss (100%) diff --git a/packages/components/src/mobile/bottom-sheet/navigation/README.md b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md similarity index 100% rename from packages/components/src/mobile/bottom-sheet/navigation/README.md rename to packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md diff --git a/packages/components/src/mobile/bottom-sheet/navigation/bottom-sheet-navigation-context.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/bottom-sheet-navigation-context.native.js similarity index 100% rename from packages/components/src/mobile/bottom-sheet/navigation/bottom-sheet-navigation-context.native.js rename to packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/bottom-sheet-navigation-context.native.js diff --git a/packages/components/src/mobile/bottom-sheet/navigation/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js similarity index 100% rename from packages/components/src/mobile/bottom-sheet/navigation/navigation-container.native.js rename to packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js diff --git a/packages/components/src/mobile/bottom-sheet/navigation/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js similarity index 100% rename from packages/components/src/mobile/bottom-sheet/navigation/navigation-screen.native.js rename to packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js diff --git a/packages/components/src/mobile/bottom-sheet/navigation/styles.native.scss b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/styles.native.scss similarity index 100% rename from packages/components/src/mobile/bottom-sheet/navigation/styles.native.scss rename to packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/styles.native.scss diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 8220c9b4eca20..2a407d34cea61 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -34,8 +34,8 @@ import SwitchCell from './switch-cell'; import RangeCell from './range-cell'; import ColorCell from './color-cell'; import RadioCell from './radio-cell'; -import NavigationScreen from './navigation/navigation-screen'; -import NavigationContainer from './navigation/navigation-container'; +import NavigationScreen from './bottom-sheet-navigation/navigation-screen'; +import NavigationContainer from './bottom-sheet-navigation/navigation-container'; import KeyboardAvoidingView from './keyboard-avoiding-view'; import { BottomSheetProvider } from './bottom-sheet-context'; From 8f9ba55582ff2c011e8ef973fb71471f696242a4 Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 13 Aug 2020 16:20:30 +0200 Subject: [PATCH 51/52] update manifest --- docs/manifest.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/manifest.json b/docs/manifest.json index abcc27569c88e..5ffb21b8e7c86 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -1037,6 +1037,12 @@ "markdown_source": "../packages/components/src/menu-items-choice/README.md", "parent": "components" }, + { + "title": "BottomSheetNavigation", + "slug": "bottom-sheet-navigation", + "markdown_source": "../packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md", + "parent": "components" + }, { "title": "Modal", "slug": "modal", From 175012b268760bcc8be664a6ff586dde2401630e Mon Sep 17 00:00:00 2001 From: Dratwas Date: Thu, 13 Aug 2020 16:49:46 +0200 Subject: [PATCH 52/52] make custom-gradient-picker component independent of navigation --- .../src/custom-gradient-picker/index.native.js | 18 ++++++++---------- .../gradient-picker-screen.native.js | 10 ++++++++-- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/components/src/custom-gradient-picker/index.native.js b/packages/components/src/custom-gradient-picker/index.native.js index da030a8d9f08a..52d662df0a9bb 100644 --- a/packages/components/src/custom-gradient-picker/index.native.js +++ b/packages/components/src/custom-gradient-picker/index.native.js @@ -2,7 +2,6 @@ * External dependencies */ import { get, omit } from 'lodash'; -import { useRoute, useNavigation } from '@react-navigation/native'; /** * WordPress dependencies */ @@ -22,17 +21,16 @@ import { } from './constants'; import styles from './style.scss'; -function CustomGradientPicker() { - const route = useRoute(); - const navigation = useNavigation(); - const { setColor, currentValue, isGradientColor } = route.params; +function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) { const [ gradientOrientation, setGradientOrientation ] = useState( HORIZONTAL_GRADIENT_ORIENTATION ); + const [ currentColor, setCurrentColor ] = useState( currentValue ); + const { getGradientType, gradients, gradientOptions } = colorsUtils; - const { gradientAST } = getGradientParsed( currentValue ); - const gradientType = getGradientType( currentValue ); + const { gradientAST } = getGradientParsed( currentColor ); + const gradientType = getGradientType( currentColor ); function isLinearGradient( type ) { return type === gradients.linear; @@ -65,7 +63,7 @@ function CustomGradientPicker() { function onGradientTypeChange( type ) { const gradientColor = getGradientColor( type ); - navigation.setParams( { currentValue: gradientColor } ); + setCurrentColor( gradientColor ); setColor( gradientColor ); } @@ -78,8 +76,8 @@ function CustomGradientPicker() { }, } ); - if ( isGradientColor && gradientColor !== currentValue ) { - navigation.setParams( { currentValue: gradientColor } ); + if ( isGradientColor && gradientColor !== currentColor ) { + setCurrentColor( gradientColor ); setColor( gradientColor ); } } diff --git a/packages/components/src/mobile/color-settings/gradient-picker-screen.native.js b/packages/components/src/mobile/color-settings/gradient-picker-screen.native.js index 1867da5db87e5..74d4e9d30bda5 100644 --- a/packages/components/src/mobile/color-settings/gradient-picker-screen.native.js +++ b/packages/components/src/mobile/color-settings/gradient-picker-screen.native.js @@ -2,7 +2,7 @@ * External dependencies */ import { View } from 'react-native'; -import { useNavigation } from '@react-navigation/native'; +import { useNavigation, useRoute } from '@react-navigation/native'; /** * WordPress dependencies @@ -17,13 +17,19 @@ import NavigationHeader from '../bottom-sheet/navigation-header'; const GradientPickerScreen = () => { const navigation = useNavigation(); + const route = useRoute(); + const { setColor, currentValue, isGradientColor } = route.params; return ( - + ); };