Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RNMobile] Refactor Dark Mode HOC #17552

Merged
merged 6 commits into from
Sep 25, 2019
Merged

[RNMobile] Refactor Dark Mode HOC #17552

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a98f65f
[RNMobile] Refactor the Dark Mode HOC to fix naming antipatterns
Tug Sep 24, 2019
ab5b454
Fix lint errors
Tug Sep 24, 2019
66e080f
Add .native.js suffix to usePreferredColorScheme
Tug Sep 24, 2019
70b4651
Update usage of theme props renamed to preferredColorScheme
Tug Sep 25, 2019
401c730
Update usage of theme props renamed to preferredColorScheme
Tug Sep 25, 2019
c50ebb9
Merge branch 'rnmobile/master' into rnmobile/update/dark-mode-hoc
Tug Sep 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/block-editor/src/components/block-list/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -216,6 +216,6 @@ export default compose( [
replaceBlock,
};
} ),
withTheme,
withPreferredColorScheme,
] )( BlockList );

10 changes: 5 additions & 5 deletions packages/block-editor/src/components/inserter/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -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 } );
}

Expand Down Expand Up @@ -119,5 +119,5 @@ export default compose( [
items: inserterItems.filter( ( { name } ) => name !== getUnregisteredTypeHandlerName() ),
};
} ),
withTheme,
withPreferredColorScheme,
] )( Inserter );
14 changes: 7 additions & 7 deletions packages/block-editor/src/components/inserter/menu.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -217,5 +217,5 @@ export default compose(
};
} ),
withInstanceId,
withTheme,
withPreferredColorScheme,
)( InserterMenu );
10 changes: 5 additions & 5 deletions packages/block-editor/src/components/media-placeholder/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
*/
import { __, sprintf } from '@wordpress/i18n';
import { MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from '@wordpress/block-editor';
import { withTheme } from '@wordpress/components';
import { withPreferredColorScheme } from '@wordpress/compose';

/**
* Internal dependencies
*/
import styles from './styles.scss';

function MediaPlaceholder( props ) {
const { allowedTypes = [], labels = {}, icon, onSelect, useStyle } = props;
const { allowedTypes = [], labels = {}, icon, onSelect, getStylesFromColorScheme } = props;

const isOneType = allowedTypes.length === 1;
const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );
Expand Down Expand Up @@ -48,8 +48,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 );

return (
<MediaUpload
Expand Down Expand Up @@ -88,4 +88,4 @@ function MediaPlaceholder( props ) {
);
}

export default withTheme( MediaPlaceholder );
export default withPreferredColorScheme( MediaPlaceholder );
13 changes: 7 additions & 6 deletions packages/block-editor/src/components/warning/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, theme, getStylesFromColorScheme, ...viewProps } ) {
icon = icon && normalizeIconObject( icon );
const internalIconClass = 'warning-icon' + '-' + theme;
Copy link
Contributor

Choose a reason for hiding this comment

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

theme here should probably be renamed to preferredColorScheme?
This should fix the Warning component icon color issue.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Indeed, forgot that one thanks 👍 , will scan the code for other occurrences as well!

const titleStyle = useStyle( styles.title, styles.titleDark );
const messageStyle = useStyle( styles.message, styles.messageDark );
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 && (
Expand All @@ -43,4 +44,4 @@ function Warning( { title, message, icon, iconClass, theme, useStyle, ...viewPro
);
}

export default withTheme( Warning );
export default withPreferredColorScheme( Warning );
10 changes: 5 additions & 5 deletions packages/block-library/src/code/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -47,4 +47,4 @@ export function CodeEdit( props ) {
);
}

export default withTheme( CodeEdit );
export default withPreferredColorScheme( CodeEdit );
6 changes: 3 additions & 3 deletions packages/block-library/src/image/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import {
Icon,
Toolbar,
ToolbarButton,
withTheme,
} from '@wordpress/components';

import {
Expand All @@ -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
Expand Down Expand Up @@ -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 } />;
}

Expand Down Expand Up @@ -371,4 +371,4 @@ class ImageEdit extends React.Component {
}
}

export default withTheme( ImageEdit );
export default withPreferredColorScheme( ImageEdit );
13 changes: 7 additions & 6 deletions packages/block-library/src/missing/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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, theme } = 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 iconStyle = getStylesFromColorScheme( styles.unsupportedBlockIcon, styles.unsupportedBlockIconDark );
const iconClassName = 'unsupported-icon' + '-' + theme;
Copy link
Contributor

Choose a reason for hiding this comment

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

Same than on Warning block, this looks like should be 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 );
10 changes: 5 additions & 5 deletions packages/block-library/src/more/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -48,4 +48,4 @@ export class MoreEdit extends Component {
}
}

export default withTheme( MoreEdit );
export default withPreferredColorScheme( MoreEdit );
10 changes: 5 additions & 5 deletions packages/block-library/src/nextpage/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -44,4 +44,4 @@ export function NextPageEdit( { attributes, isSelected, onFocus, useStyle } ) {
);
}

export default withTheme( NextPageEdit );
export default withPreferredColorScheme( NextPageEdit );
7 changes: 3 additions & 4 deletions packages/block-library/src/video/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,8 @@ import {
Icon,
Toolbar,
ToolbarButton,
withTheme,
} from '@wordpress/components';

import { withPreferredColorScheme } from '@wordpress/compose';
import {
Caption,
MediaPlaceholder,
Expand Down Expand Up @@ -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 ) } />;
}

Expand Down Expand Up @@ -265,4 +264,4 @@ class VideoEdit extends React.Component {
}
}

export default withTheme( VideoEdit );
export default withPreferredColorScheme( VideoEdit );
1 change: 0 additions & 1 deletion packages/components/src/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Loading