Add platform component (#18058)

* Add platform component

* Improve platform implementation in RN.

* Add more documentation and tests.

* Update readme file.

* Update tests.

* Fix filenames for native versions.

* Add license attribution

* Remove unnecessary lines.

* Improve documentation

* Remove trailing space

* Update packages/element/src/platform.js

Co-Authored-By: Grzegorz (Greg) Ziółkowski <[email protected]>

* Update readme.

* Fix lint error.

packages/element/README.md

@@ -224,6 +224,30 @@ _Related_
 
 -   <https://reactjs.org/docs/react-api.html#reactmemo>
 
+<a name="Platform" href="#Platform">#</a> **Platform**
+
+Component used to detect the current Platform being used.
+Use Platform.OS === 'web' to detect if running on web enviroment.
+
+This is the same concept as the React Native implementation.
+
+_Related_
+
+-   <https://facebook.github.io/react-native/docs/platform-specific-code#platform-module>
+
+Here is an example of how to use the select method:
+
+_Usage_
+
+```js
+import { Platform } from '@wordpress/element';
+
+const placeholderLabel = Platform.select( {
+  native: __( 'Add media' ),
+  web: __( 'Drag images, upload new ones or select files from your library.' ),
+} );
+```
+
 <a name="RawHTML" href="#RawHTML">#</a> **RawHTML**
 
 Component used as equivalent of Fragment with unescaped HTML, in cases where

packages/element/src/index.js

@@ -1,5 +1,6 @@
 export * from './react';
 export * from './react-platform';
 export * from './utils';
+export { default as Platform } from './platform';
 export { default as renderToString } from './serialize';
 export { default as RawHTML } from './raw-html';

packages/element/src/platform.android.js

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { Platform as OriginalPlatform } from 'react-native';
+
+const Platform = {
+	...OriginalPlatform,
+	select: ( spec ) => {
+		if ( 'android' in spec ) {
+			return spec.android;
+		} else if ( 'native' in spec ) {
+			return spec.native;
+		}
+		return spec.default;
+	},
+};
+
+export default Platform;

packages/element/src/platform.ios.js

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { Platform as OriginalPlatform } from 'react-native';
+
+const Platform = {
+	...OriginalPlatform,
+	select: ( spec ) => {
+		if ( 'ios' in spec ) {
+			return spec.ios;
+		} else if ( 'native' in spec ) {
+			return spec.native;
+		}
+		return spec.default;
+	},
+};
+
+export default Platform;

packages/element/src/platform.js

@@ -0,0 +1,32 @@
+/**
+ * Parts of this source were derived and modified from react-native-web,
+ * released under the MIT license.
+ *
+ * Copyright (c) 2016-present, Nicolas Gallagher.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ */
+const Platform = {
+	OS: 'web',
+	select: ( spec ) => ( 'web' in spec ? spec.web : spec.default ),
+};
+/**
+ * Component used to detect the current Platform being used.
+ * Use Platform.OS === 'web' to detect if running on web enviroment.
+ *
+ * This is the same concept as the React Native implementation.
+ *
+ * @see https://facebook.github.io/react-native/docs/platform-specific-code#platform-module
+ *
+ * Here is an example of how to use the select method:
+ * @example
+ * ```js
+ * import { Platform } from '@wordpress/element';
+ *
+ * const placeholderLabel = Platform.select( {
+ *   native: __( 'Add media' ),
+ *   web: __( 'Drag images, upload new ones or select files from your library.' ),
+ * } );
+ * ```
+ */
+export default Platform;

packages/element/src/test/platform.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+/**
+ * Internal dependencies
+ */
+import Platform from '../platform';
+
+describe( 'Platform', () => {
+	it( 'is chooses the right thing', () => {
+		const element = Platform.select( {
+			web: shallow( <div></div> ),
+			native: shallow( <button></button> ),
+		} );
+
+		expect( element.type() ).toBe( 'div' );
+	} );
+} );

packages/element/src/test/platform.native.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+/**
+ * Internal dependencies
+ */
+import Platform from '../platform';
+
+describe( 'Platform', () => {
+	it( 'is chooses the right thing', () => {
+		const element = Platform.select( {
+			web: shallow( <div></div> ),
+			native: shallow( <button></button> ),
+		} );
+
+		expect( element.type() ).toBe( 'button' );
+	} );
+} );