[RNMobile] Refactor Dark Mode HOC (#17552)

* [RNMobile] Refactor the Dark Mode HOC to fix naming antipatterns * Fix lint errors * Add .native.js suffix to usePreferredColorScheme * Update usage of theme props renamed to preferredColorScheme * Update usage of theme props renamed to preferredColorScheme
WordPress · Sep 25, 2019 · ae6d2ce · ae6d2ce
1 parent 69da85e
commit ae6d2ce
Show file tree

Hide file tree

Showing 28 changed files with 172 additions and 177 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -10,9 +10,9 @@ import { Text, View, Platform, TouchableWithoutFeedback } from 'react-native';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-import { KeyboardAwareFlatList, ReadableContentView, withTheme } from '@wordpress/components';
+import { KeyboardAwareFlatList, ReadableContentView } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -113,7 +113,7 @@ export class BlockList extends Component {
 	}
 
 	renderItem( { item: clientId, index } ) {
-		const blockHolderFocusedStyle = this.props.useStyle( styles.blockHolderFocused, styles.blockHolderFocusedDark );
+		const blockHolderFocusedStyle = this.props.getStylesFromColorScheme( styles.blockHolderFocused, styles.blockHolderFocusedDark );
 		const { shouldShowBlockAtIndex, shouldShowInsertionPoint } = this.props;
 		return (
 			<ReadableContentView>
@@ -133,8 +133,8 @@ export class BlockList extends Component {
 	}
 
 	renderAddBlockSeparator() {
-		const lineStyle = this.props.useStyle( styles.lineStyleAddHere, styles.lineStyleAddHereDark );
-		const labelStyle = this.props.useStyle( styles.labelStyleAddHere, styles.labelStyleAddHereDark );
+		const lineStyle = this.props.getStylesFromColorScheme( styles.lineStyleAddHere, styles.lineStyleAddHereDark );
+		const labelStyle = this.props.getStylesFromColorScheme( styles.labelStyleAddHere, styles.labelStyleAddHereDark );
 		return (
 			<View style={ styles.containerStyleAddHere } >
 				<View style={ lineStyle }></View>
@@ -216,6 +216,6 @@ export default compose( [
 			replaceBlock,
 		};
 	} ),
-	withTheme,
+	withPreferredColorScheme,
 ] )( BlockList );
 
diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js
@@ -2,10 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Dropdown, ToolbarButton, Dashicon, withTheme } from '@wordpress/components';
+import { Dropdown, ToolbarButton, Dashicon } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { getUnregisteredTypeHandlerName } from '@wordpress/blocks';
 
 /**
@@ -56,9 +56,9 @@ class Inserter extends Component {
 		const {
 			disabled,
 			renderToggle = defaultRenderToggle,
-			useStyle,
+			getStylesFromColorScheme,
 		} = this.props;
-		const style = useStyle( styles.addBlockButton, styles.addBlockButtonDark );
+		const style = getStylesFromColorScheme( styles.addBlockButton, styles.addBlockButtonDark );
 		return renderToggle( { onToggle, isOpen, disabled, style } );
 	}
 
@@ -119,5 +119,5 @@ export default compose( [
 			items: inserterItems.filter( ( { name } ) => name !== getUnregisteredTypeHandlerName() ),
 		};
 	} ),
-	withTheme,
+	withPreferredColorScheme,
 ] )( Inserter );
diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
@@ -13,8 +13,8 @@ import {
 	isUnmodifiedDefaultBlock,
 } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { withInstanceId, compose } from '@wordpress/compose';
-import { BottomSheet, Icon, withTheme } from '@wordpress/components';
+import { withInstanceId, compose, withPreferredColorScheme } from '@wordpress/compose';
+import { BottomSheet, Icon } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -61,12 +61,12 @@ export class InserterMenu extends Component {
 	}
 
 	render() {
-		const { useStyle } = this.props;
+		const { getStylesFromColorScheme } = this.props;
 		const numberOfColumns = this.calculateNumberOfColumns();
 		const bottomPadding = styles.contentBottomPadding;
-		const modalIconWrapperStyle = useStyle( styles.modalIconWrapper, styles.modalIconWrapperDark );
-		const modalIconStyle = useStyle( styles.modalIcon, styles.modalIconDark );
-		const modalItemLabelStyle = useStyle( styles.modalItemLabel, styles.modalItemLabelDark );
+		const modalIconWrapperStyle = getStylesFromColorScheme( styles.modalIconWrapper, styles.modalIconWrapperDark );
+		const modalIconStyle = getStylesFromColorScheme( styles.modalIcon, styles.modalIconDark );
+		const modalItemLabelStyle = getStylesFromColorScheme( styles.modalItemLabel, styles.modalItemLabelDark );
 
 		return (
 			<BottomSheet
@@ -217,5 +217,5 @@ export default compose(
 		};
 	} ),
 	withInstanceId,
-	withTheme,
+	withPreferredColorScheme,
 )( InserterMenu );
diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -12,7 +12,8 @@ import {
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
 } from '@wordpress/block-editor';
-import { Dashicon, withTheme } from '@wordpress/components';
+import { Dashicon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -27,7 +28,7 @@ function MediaPlaceholder( props ) {
 		onSelect,
 		isAppender,
 		disableMediaButtons,
-		useStyle,
+		getStylesFromColorScheme,
 	} = props;
 
 	const isOneType = allowedTypes.length === 1;
@@ -60,8 +61,8 @@ function MediaPlaceholder( props ) {
 		accessibilityHint = __( 'Double tap to select a video' );
 	}
 
-	const emptyStateContainerStyle = useStyle( styles.emptyStateContainer, styles.emptyStateContainerDark );
-	const emptyStateTitleStyle = useStyle( styles.emptyStateTitle, styles.emptyStateTitleDark );
+	const emptyStateContainerStyle = getStylesFromColorScheme( styles.emptyStateContainer, styles.emptyStateContainerDark );
+	const emptyStateTitleStyle = getStylesFromColorScheme( styles.emptyStateTitle, styles.emptyStateTitleDark );
 
 	const renderContent = () => {
 		if ( isAppender === undefined || ! isAppender ) {
@@ -129,4 +130,4 @@ function MediaPlaceholder( props ) {
 	);
 }
 
-export default withTheme( MediaPlaceholder );
+export default withPreferredColorScheme( MediaPlaceholder );
diff --git a/packages/block-editor/src/components/warning/index.native.js b/packages/block-editor/src/components/warning/index.native.js
@@ -6,23 +6,24 @@ import { View, Text } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon, withTheme } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
 import { normalizeIconObject } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-function Warning( { title, message, icon, iconClass, theme, useStyle, ...viewProps } ) {
+function Warning( { title, message, icon, iconClass, preferredColorScheme, getStylesFromColorScheme, ...viewProps } ) {
 	icon = icon && normalizeIconObject( icon );
-	const internalIconClass = 'warning-icon' + '-' + theme;
-	const titleStyle = useStyle( styles.title, styles.titleDark );
-	const messageStyle = useStyle( styles.message, styles.messageDark );
+	const internalIconClass = 'warning-icon' + '-' + preferredColorScheme;
+	const titleStyle = getStylesFromColorScheme( styles.title, styles.titleDark );
+	const messageStyle = getStylesFromColorScheme( styles.message, styles.messageDark );
 
 	return (
 		<View
-			style={ useStyle( styles.container, styles.containerDark ) }
+			style={ getStylesFromColorScheme( styles.container, styles.containerDark ) }
 			{ ...viewProps }
 		>
 			{ icon && (
@@ -43,4 +44,4 @@ function Warning( { title, message, icon, iconClass, theme, useStyle, ...viewPro
 	);
 }
 
-export default withTheme( Warning );
+export default withPreferredColorScheme( Warning );
diff --git a/packages/block-library/src/code/edit.native.js b/packages/block-library/src/code/edit.native.js
@@ -8,7 +8,7 @@ import { View } from 'react-native';
  */
 import { PlainText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { withTheme } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -23,9 +23,9 @@ import styles from './theme.scss';
 // Note: styling is applied directly to the (nested) PlainText component. Web-side components
 // apply it to the container 'div' but we don't have a proper proposal for cascading styling yet.
 export function CodeEdit( props ) {
-	const { attributes, setAttributes, style, onFocus, onBlur, useStyle } = props;
-	const codeStyle = useStyle( styles.blockCode, styles.blockCodeDark );
-	const placeholderStyle = useStyle( styles.placeholder, styles.placeholderDark );
+	const { attributes, setAttributes, style, onFocus, onBlur, getStylesFromColorScheme } = props;
+	const codeStyle = getStylesFromColorScheme( styles.blockCode, styles.blockCodeDark );
+	const placeholderStyle = getStylesFromColorScheme( styles.placeholder, styles.placeholderDark );
 
 	return (
 		<View>
@@ -47,4 +47,4 @@ export function CodeEdit( props ) {
 	);
 }
 
-export default withTheme( CodeEdit );
+export default withPreferredColorScheme( CodeEdit );
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -19,7 +19,6 @@ import {
 	Icon,
 	Toolbar,
 	ToolbarButton,
-	withTheme,
 } from '@wordpress/components';
 
 import {
@@ -33,6 +32,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { isURL } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -198,7 +198,7 @@ class ImageEdit extends React.Component {
 			return <Icon icon={ SvgIconRetry } { ...styles.iconRetry } />;
 		}
 
-		const iconStyle = this.props.useStyle( styles.icon, styles.iconDark );
+		const iconStyle = this.props.getStylesFromColorScheme( styles.icon, styles.iconDark );
 		return <Icon icon={ SvgIcon } { ...iconStyle } />;
 	}
 
@@ -371,4 +371,4 @@ class ImageEdit extends React.Component {
 	}
 }
 
-export default withTheme( ImageEdit );
+export default withPreferredColorScheme( ImageEdit );
diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js
@@ -6,7 +6,8 @@ import { View, Text } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon, withTheme } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
 import { coreBlocks } from '@wordpress/block-library';
 import { normalizeIconObject } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
@@ -20,22 +21,22 @@ import styles from './style.scss';
 export class UnsupportedBlockEdit extends Component {
 	render() {
 		const { originalName } = this.props.attributes;
-		const { useStyle, theme } = this.props;
+		const { getStylesFromColorScheme, preferredColorScheme } = this.props;
 		const blockType = coreBlocks[ originalName ];
 
 		const title = blockType ? blockType.settings.title : __( 'Unsupported' );
-		const titleStyle = useStyle( styles.unsupportedBlockMessage, styles.unsupportedBlockMessageDark );
+		const titleStyle = getStylesFromColorScheme( styles.unsupportedBlockMessage, styles.unsupportedBlockMessageDark );
 
 		const icon = blockType ? normalizeIconObject( blockType.settings.icon ) : 'admin-plugins';
-		const iconStyle = useStyle( styles.unsupportedBlockIcon, styles.unsupportedBlockIconDark );
-		const iconClassName = 'unsupported-icon' + '-' + theme;
+		const iconStyle = getStylesFromColorScheme( styles.unsupportedBlockIcon, styles.unsupportedBlockIconDark );
+		const iconClassName = 'unsupported-icon' + '-' + preferredColorScheme;
 		return (
-			<View style={ useStyle( styles.unsupportedBlock, styles.unsupportedBlockDark ) }>
+			<View style={ getStylesFromColorScheme( styles.unsupportedBlock, styles.unsupportedBlockDark ) }>
 				<Icon className={ iconClassName } icon={ icon && icon.src ? icon.src : icon } color={ iconStyle.color } />
 				<Text style={ titleStyle }>{ title }</Text>
 			</View>
 		);
 	}
 }
 
-export default withTheme( UnsupportedBlockEdit );
+export default withPreferredColorScheme( UnsupportedBlockEdit );
diff --git a/packages/block-library/src/more/edit.native.js b/packages/block-library/src/more/edit.native.js
@@ -9,7 +9,7 @@ import Hr from 'react-native-hr';
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { withTheme } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -26,13 +26,13 @@ export class MoreEdit extends Component {
 	}
 
 	render() {
-		const { attributes, useStyle } = this.props;
+		const { attributes, getStylesFromColorScheme } = this.props;
 		const { customText } = attributes;
 		const { defaultText } = this.state;
 
 		const content = customText || defaultText;
-		const textStyle = useStyle( styles.moreText, styles.moreTextDark );
-		const lineStyle = useStyle( styles.moreLine, styles.moreLineDark );
+		const textStyle = getStylesFromColorScheme( styles.moreText, styles.moreTextDark );
+		const lineStyle = getStylesFromColorScheme( styles.moreLine, styles.moreLineDark );
 
 		return (
 			<View>
@@ -48,4 +48,4 @@ export class MoreEdit extends Component {
 	}
 }
 
-export default withTheme( MoreEdit );
+export default withPreferredColorScheme( MoreEdit );
diff --git a/packages/block-library/src/nextpage/edit.native.js b/packages/block-library/src/nextpage/edit.native.js
@@ -8,19 +8,19 @@ import Hr from 'react-native-hr';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { withTheme } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './editor.scss';
 
-export function NextPageEdit( { attributes, isSelected, onFocus, useStyle } ) {
+export function NextPageEdit( { attributes, isSelected, onFocus, getStylesFromColorScheme } ) {
 	const { customText = __( 'Page break' ) } = attributes;
 	const accessibilityTitle = attributes.customText || '';
 	const accessibilityState = isSelected ? [ 'selected' ] : [];
-	const textStyle = useStyle( styles.nextpageText, styles.nextpageTextDark );
-	const lineStyle = useStyle( styles.nextpageLine, styles.nextpageLineDark );
+	const textStyle = getStylesFromColorScheme( styles.nextpageText, styles.nextpageTextDark );
+	const lineStyle = getStylesFromColorScheme( styles.nextpageLine, styles.nextpageLineDark );
 
 	return (
 		<View
@@ -44,4 +44,4 @@ export function NextPageEdit( { attributes, isSelected, onFocus, useStyle } ) {
 	);
 }
 
-export default withTheme( NextPageEdit );
+export default withPreferredColorScheme( NextPageEdit );
diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js
@@ -20,9 +20,8 @@ import {
 	Icon,
 	Toolbar,
 	ToolbarButton,
-	withTheme,
 } from '@wordpress/components';
-
+import { withPreferredColorScheme } from '@wordpress/compose';
 import {
 	Caption,
 	MediaPlaceholder,
@@ -153,7 +152,7 @@ class VideoEdit extends React.Component {
 			return <Icon icon={ SvgIconRetry } { ...style.icon } />;
 		}
 
-		const iconStyle = this.props.useStyle( style.icon, style.iconDark );
+		const iconStyle = this.props.getStylesFromColorScheme( style.icon, style.iconDark );
 		return <Icon icon={ SvgIcon } { ...( ! isMediaPlaceholder ? style.iconUploading : iconStyle ) } />;
 	}
 
@@ -265,4 +264,4 @@ class VideoEdit extends React.Component {
 	}
 }
 
-export default withTheme( VideoEdit );
+export default withPreferredColorScheme( VideoEdit );
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
@@ -28,4 +28,3 @@ export { default as KeyboardAvoidingView } from './mobile/keyboard-avoiding-view
 export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-list';
 export { default as Picker } from './mobile/picker';
 export { default as ReadableContentView } from './mobile/readable-content-view';
-export * from './mobile/dark-mode';