From 051ac020f81109081d3776bd11fdb597e82ec8a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Est=C3=AAv=C3=A3o?= Date: Thu, 24 Oct 2019 16:37:36 +0100 Subject: [PATCH] Add platform component (#18058) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * Update readme. * Fix lint error. --- packages/element/README.md | 24 +++++++++++++++ packages/element/src/index.js | 1 + packages/element/src/platform.android.js | 18 +++++++++++ packages/element/src/platform.ios.js | 18 +++++++++++ packages/element/src/platform.js | 32 ++++++++++++++++++++ packages/element/src/test/platform.js | 19 ++++++++++++ packages/element/src/test/platform.native.js | 19 ++++++++++++ 7 files changed, 131 insertions(+) create mode 100644 packages/element/src/platform.android.js create mode 100644 packages/element/src/platform.ios.js create mode 100644 packages/element/src/platform.js create mode 100644 packages/element/src/test/platform.js create mode 100644 packages/element/src/test/platform.native.js diff --git a/packages/element/README.md b/packages/element/README.md index d592235c5dd8d9..fb0c8089fae2b1 100755 --- a/packages/element/README.md +++ b/packages/element/README.md @@ -224,6 +224,30 @@ _Related_ - +# **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_ + +- + +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.' ), +} ); +``` + # **RawHTML** Component used as equivalent of Fragment with unescaped HTML, in cases where diff --git a/packages/element/src/index.js b/packages/element/src/index.js index d9d4bf87ecf05d..ad8bae6eff98b0 100644 --- a/packages/element/src/index.js +++ b/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'; diff --git a/packages/element/src/platform.android.js b/packages/element/src/platform.android.js new file mode 100644 index 00000000000000..4f0da0cab9c683 --- /dev/null +++ b/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; diff --git a/packages/element/src/platform.ios.js b/packages/element/src/platform.ios.js new file mode 100644 index 00000000000000..bbadff1f193319 --- /dev/null +++ b/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; diff --git a/packages/element/src/platform.js b/packages/element/src/platform.js new file mode 100644 index 00000000000000..328f5523b6f95f --- /dev/null +++ b/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; diff --git a/packages/element/src/test/platform.js b/packages/element/src/test/platform.js new file mode 100644 index 00000000000000..fc98f4e19b22a9 --- /dev/null +++ b/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(
), + native: shallow( ), + } ); + + expect( element.type() ).toBe( 'div' ); + } ); +} ); diff --git a/packages/element/src/test/platform.native.js b/packages/element/src/test/platform.native.js new file mode 100644 index 00000000000000..da6717d66409e0 --- /dev/null +++ b/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(
), + native: shallow( ), + } ); + + expect( element.type() ).toBe( 'button' ); + } ); +} );