From 3a0eee4387744f7a4fdf3c2730040a1aa29135d1 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Tue, 12 Dec 2023 14:50:17 +0800 Subject: [PATCH 1/5] Add withIsConnected HOC --- .../higher-order/with-is-connected/README.md | 19 +++++++++++++++++++ .../with-is-connected/index.native.js | 18 ++++++++++++++++++ packages/compose/src/index.native.js | 1 + 3 files changed, 38 insertions(+) create mode 100644 packages/compose/src/higher-order/with-is-connected/README.md create mode 100644 packages/compose/src/higher-order/with-is-connected/index.native.js diff --git a/packages/compose/src/higher-order/with-is-connected/README.md b/packages/compose/src/higher-order/with-is-connected/README.md new file mode 100644 index 0000000000000..8ec360146c3ef --- /dev/null +++ b/packages/compose/src/higher-order/with-is-connected/README.md @@ -0,0 +1,19 @@ +# withIsConnected + +`withIsConnected` provides a true/false mobile connectivity status based on the [useIsConnected hook](https://github.com/WordPress/gutenberg/blob/aadf8c66ff345b176041ad82e3793191ade5d271/packages/react-native-bridge/index.js#L193-L212). + +## Usage +```jsx +/** + * WordPress dependencies + */ +import { withIsConnected } from '@wordpress/compose'; + +export class MyComponent extends Component { + if ( this.props.isConnected !== true ) { + console.log( 'You are currently offline.' ) + } +} + +export default withIsConnected( MyComponent ) +``` \ No newline at end of file diff --git a/packages/compose/src/higher-order/with-is-connected/index.native.js b/packages/compose/src/higher-order/with-is-connected/index.native.js new file mode 100644 index 0000000000000..fc802570ebc6b --- /dev/null +++ b/packages/compose/src/higher-order/with-is-connected/index.native.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +import { createHigherOrderComponent } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import { useIsConnected } from '@wordpress/react-native-bridge'; + +const withIsConnected = createHigherOrderComponent( ( WrappedComponent ) => { + return ( props ) => { + const isConnected = useIsConnected(); + return ; + }; +}, 'withIsConnected' ); + +export default withIsConnected; diff --git a/packages/compose/src/index.native.js b/packages/compose/src/index.native.js index a3f959e644f32..00e0a66a36034 100644 --- a/packages/compose/src/index.native.js +++ b/packages/compose/src/index.native.js @@ -17,6 +17,7 @@ export { default as withInstanceId } from './higher-order/with-instance-id'; export { default as withSafeTimeout } from './higher-order/with-safe-timeout'; export { default as withState } from './higher-order/with-state'; export { default as withPreferredColorScheme } from './higher-order/with-preferred-color-scheme'; +export { default as withIsConnected } from './higher-order/with-is-connected'; // Hooks. export { default as useConstrainedTabbing } from './hooks/use-constrained-tabbing'; From 11b24555b6a3bea6d1a7e2f04f45076ac731e9f7 Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Wed, 13 Dec 2023 14:31:25 -0500 Subject: [PATCH 2/5] fix: Destructure isConnected value from useIsConnected Hook The previous value was always `undefined`. --- .../compose/src/higher-order/with-is-connected/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compose/src/higher-order/with-is-connected/index.native.js b/packages/compose/src/higher-order/with-is-connected/index.native.js index fc802570ebc6b..b45c3096e690e 100644 --- a/packages/compose/src/higher-order/with-is-connected/index.native.js +++ b/packages/compose/src/higher-order/with-is-connected/index.native.js @@ -10,7 +10,7 @@ import { useIsConnected } from '@wordpress/react-native-bridge'; const withIsConnected = createHigherOrderComponent( ( WrappedComponent ) => { return ( props ) => { - const isConnected = useIsConnected(); + const { isConnected } = useIsConnected(); return ; }; }, 'withIsConnected' ); From 414c6e89b65560a8e3dbb82453d444a9144fca42 Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Wed, 13 Dec 2023 14:34:01 -0500 Subject: [PATCH 3/5] docs: Avoid permalink in documentation Permalinks would likely referenced outdated code at some point. Documentation is generally expected to be up-to-date. --- packages/compose/src/higher-order/with-is-connected/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compose/src/higher-order/with-is-connected/README.md b/packages/compose/src/higher-order/with-is-connected/README.md index 8ec360146c3ef..d1358357f8142 100644 --- a/packages/compose/src/higher-order/with-is-connected/README.md +++ b/packages/compose/src/higher-order/with-is-connected/README.md @@ -1,6 +1,6 @@ # withIsConnected -`withIsConnected` provides a true/false mobile connectivity status based on the [useIsConnected hook](https://github.com/WordPress/gutenberg/blob/aadf8c66ff345b176041ad82e3793191ade5d271/packages/react-native-bridge/index.js#L193-L212). +`withIsConnected` provides a true/false mobile connectivity status based on the `useIsConnected` hook found in the [bridge](https://github.com/WordPress/gutenberg/blob/trunk/packages/react-native-bridge/index.js). ## Usage ```jsx From aacf678eb94dd787ac23625e76fbc086aff14719 Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Wed, 13 Dec 2023 14:55:33 -0500 Subject: [PATCH 4/5] fix: Avoid cyclic dependency The test environment threw errors due to `@wordpress/compose` importing itself. --- .../src/higher-order/with-is-connected/index.native.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/compose/src/higher-order/with-is-connected/index.native.js b/packages/compose/src/higher-order/with-is-connected/index.native.js index b45c3096e690e..7d245491c7490 100644 --- a/packages/compose/src/higher-order/with-is-connected/index.native.js +++ b/packages/compose/src/higher-order/with-is-connected/index.native.js @@ -1,11 +1,7 @@ -/** - * WordPress dependencies - */ -import { createHigherOrderComponent } from '@wordpress/compose'; - /** * Internal dependencies */ +import { createHigherOrderComponent } from '../../utils/create-higher-order-component'; import { useIsConnected } from '@wordpress/react-native-bridge'; const withIsConnected = createHigherOrderComponent( ( WrappedComponent ) => { From b91fc16ff5761a4de72827613183c4fde83fd564 Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Wed, 13 Dec 2023 14:56:12 -0500 Subject: [PATCH 5/5] refactor: Move react-native-bridge import to WordPress group Fix lint error. --- .../src/higher-order/with-is-connected/index.native.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/compose/src/higher-order/with-is-connected/index.native.js b/packages/compose/src/higher-order/with-is-connected/index.native.js index 7d245491c7490..a24cdfc9173a1 100644 --- a/packages/compose/src/higher-order/with-is-connected/index.native.js +++ b/packages/compose/src/higher-order/with-is-connected/index.native.js @@ -1,8 +1,12 @@ +/** + * WordPress dependencies + */ +import { useIsConnected } from '@wordpress/react-native-bridge'; + /** * Internal dependencies */ import { createHigherOrderComponent } from '../../utils/create-higher-order-component'; -import { useIsConnected } from '@wordpress/react-native-bridge'; const withIsConnected = createHigherOrderComponent( ( WrappedComponent ) => { return ( props ) => {