Skip to content

Commit

Permalink
[RNMobile] Add withIsConnected higher order component (#56966)
Browse files Browse the repository at this point in the history
* Add withIsConnected HOC

* fix: Destructure isConnected value from useIsConnected Hook

The previous value was always `undefined`.

* docs: Avoid permalink in documentation

Permalinks would likely referenced outdated code at some point. Documentation is generally expected to be up-to-date.

---------

Co-authored-by: David Calhoun <github@davidcalhoun.me>
  • Loading branch information
derekblank and dcalhoun authored Dec 13, 2023
1 parent b592ba9 commit 863bc33
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 0 deletions.
19 changes: 19 additions & 0 deletions packages/compose/src/higher-order/with-is-connected/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# withIsConnected

`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
/**
* 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 )
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/**
* WordPress dependencies
*/
import { useIsConnected } from '@wordpress/react-native-bridge';

/**
* Internal dependencies
*/
import { createHigherOrderComponent } from '../../utils/create-higher-order-component';

const withIsConnected = createHigherOrderComponent( ( WrappedComponent ) => {
return ( props ) => {
const { isConnected } = useIsConnected();
return <WrappedComponent { ...props } isConnected={ isConnected } />;
};
}, 'withIsConnected' );

export default withIsConnected;
1 change: 1 addition & 0 deletions packages/compose/src/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down

1 comment on commit 863bc33

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 863bc33.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7201027783
📝 Reported issues:

Please sign in to comment.