[RNMobile] Add OfflineStatus component (#56934)

* feat: Frame useNetInfo hook foundation

This code is non-functioning currently.

* feat: Add iOS connection status bridge utilities

This bridge will be required for the planned JavaScript Hook to monitor
connection status.

* feat: Add `useIsConnected` hook

Provides React Hook for monitoring the network connection status via the
bridge to the host app.

* Revert "feat: Frame useNetInfo hook foundation"

This reverts commit a8d3660.

* refactor: Align with project Swift syntax

Semicolon is unnecessary.

Co-authored-by: Tanner Stokes <[email protected]>

* feat: Add Android connection status bridge utilities

This bridge enables monitoring the connection status on Android.

* feat: Android network connection status request utility

Allow the Android platform to request the current network connection
status.

* fix: Add missing `requestConnectionStatus` bridge method mock

The Demo editor fails to build without a mocked bridge method.

* Add mobile OfflineStatus component

* Add OfflineStatus component to block-list behind __DEV__ flag

* Replace offline icon and update OfflineStatus text alignment

* Update BEM syntax for OfflineStatus

* Update OfflineStatus component colors

* test: Import sole native stylesheet to fix test module resolution error

The current Jest module resolution configuration will fail when there is
only a native-specific file without a web-specific file, e.g. only a
`style.native.scss` and no sibling `style.scss` next to it. Explicitly
importing the native-specific file avoids the error as Jest does not
attempt to seek the non-suffixed file.

* test: Mock `useIsConnected` native bridge method

The native implementation is not available within the JavaScript testing
environment.

---------

Co-authored-by: David Calhoun <[email protected]>
Co-authored-by: Tanner Stokes <[email protected]>

packages/block-editor/src/components/block-list/index.native.js

@@ -30,6 +30,7 @@ import {
 import { BlockDraggableWrapper } from '../block-draggable';
 import { useEditorWrapperStyles } from '../../hooks/use-editor-wrapper-styles';
 import { store as blockEditorStore } from '../../store';
+import OfflineStatus from '../offline-status';
 
 const identity = ( x ) => x;
 
@@ -235,6 +236,10 @@ export default function BlockList( {
 			onLayout={ onLayout }
 			testID="block-list-wrapper"
 		>
+			{
+				// eslint-disable-next-line no-undef
+				__DEV__ && <OfflineStatus />
+			}
 			{ isRootList ? (
 				<BlockListProvider
 					value={ {

packages/block-editor/src/components/offline-status/index.native.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { Icon } from '@wordpress/components';
+import { offline as offlineIcon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { useIsConnected } from '@wordpress/react-native-bridge';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.native.scss';
+
+const OfflineStatus = () => {
+	const { isConnected } = useIsConnected();
+
+	const containerStyle = usePreferredColorSchemeStyle(
+		styles.offline,
+		styles.offline__dark
+	);
+
+	const textStyle = usePreferredColorSchemeStyle(
+		styles[ 'offline--text' ],
+		styles[ 'offline--text__dark' ]
+	);
+
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles[ 'offline--icon' ],
+		styles[ 'offline--icon__dark' ]
+	);
+
+	return ! isConnected ? (
+		<View style={ containerStyle }>
+			<Icon fill={ iconStyle.fill } icon={ offlineIcon } />
+			<Text style={ textStyle }>{ __( 'Working Offline' ) }</Text>
+		</View>
+	) : null;
+};
+
+export default OfflineStatus;

packages/block-editor/src/components/offline-status/style.native.scss

@@ -0,0 +1,28 @@
+.offline {
+	background-color: $gray-lighten-30;
+	padding: $grid-unit;
+	justify-content: center;
+	align-items: center;
+	flex-direction: row;
+}
+
+.offline__dark {
+	background-color: $gray-70;
+}
+
+.offline--text {
+	color: $black;
+	padding-left: 3;
+}
+
+.offline--text__dark {
+	color: $white;
+}
+
+.offline--icon {
+	fill: $gray-70;
+}
+
+.offline--icon__dark {
+	fill: $gray-10;
+}

packages/icons/src/index.js

@@ -190,6 +190,7 @@ export { default as postList } from './library/post-list';
 export { default as postTerms } from './library/post-terms';
 export { default as previous } from './library/previous';
 export { default as next } from './library/next';
+export { default as offline } from './library/offline';
 export { default as preformatted } from './library/preformatted';
 export { default as pullLeft } from './library/pull-left';
 export { default as pullRight } from './library/pull-right';

packages/icons/src/library/offline.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const offline = (
+	<SVG
+		width="16"
+		height="16"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<Path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M1.36605 2.81332L2.30144 1.87332L13.5592 13.1867L12.6239 14.1267L7.92702 9.40666C6.74618 9.41999 5.57861 9.87999 4.68302 10.78L3.35623 9.44665C4.19874 8.60665 5.2071 8.03999 6.2818 7.75332L4.7958 6.25999C3.78744 6.67332 2.84542 7.29332 2.02944 8.11332L0.702656 6.77999C1.512 5.97332 2.42085 5.33332 3.3894 4.84665L1.36605 2.81332ZM15.2973 6.77999L13.9705 8.11332C12.3054 6.43999 10.1096 5.61332 7.92039 5.62666L6.20883 3.90665C9.41303 3.34665 12.8229 4.29332 15.2973 6.77999ZM10.1759 7.89332C11.0781 8.21332 11.9273 8.72665 12.6438 9.44665L12.1794 9.90665L10.1759 7.89332ZM6.00981 12.1133L8 14.1133L9.99018 12.1133C8.89558 11.0067 7.11105 11.0067 6.00981 12.1133Z"
+		/>
+	</SVG>
+);
+
+export default offline;

test/native/setup.js

@@ -107,6 +107,7 @@ jest.mock( '@wordpress/react-native-bridge', () => {
 		subscribeShowEditorHelp: jest.fn(),
 		subscribeOnUndoPressed: jest.fn(),
 		subscribeOnRedoPressed: jest.fn(),
+		useIsConnected: jest.fn( () => ( { isConnected: true } ) ),
 		editorDidMount: jest.fn(),
 		editorDidAutosave: jest.fn(),
 		subscribeMediaUpload: jest.fn(),