Skip to content

Commit

Permalink
[RNMobile] DarkMode improvements (#17309)
Browse files Browse the repository at this point in the history 
* Remove the need to import `useStyle` and pass the theme prop on every instance that `withStyle` is used

* Implement dark-mode refactor on all components

* Fix broken native tests

* Fix default block appender background color on DarkMode

* DarkMode: Make `useStyle` a class function
  • Loading branch information
@etoledom
etoledom authored Sep 4, 2019
1 parent fc8c3da commit 264b178
Show file tree
Hide file tree
Showing 24 changed files with 107 additions and 95 deletions.
1 change: 0 additions & 1 deletion packages/block-editor/src/components/block-list-appender/style.native.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@

.blockListAppender {
background-color: $white;
padding-left: 16;
padding-right: 16;
padding-top: 12;
Expand Down
10 changes: 5 additions & 5 deletions packages/block-editor/src/components/block-list/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
import { KeyboardAwareFlatList, ReadableContentView, useStyle, withTheme } from '@wordpress/components';
import { KeyboardAwareFlatList, ReadableContentView, withTheme } from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -83,7 +83,7 @@ export class BlockList extends Component {
innerRef={ this.scrollViewInnerRef }
extraScrollHeight={ innerToolbarHeight + 10 }
keyboardShouldPersistTaps="always"
style={ useStyle( styles.list, styles.listDark, this.context ) }
style={ styles.list }
data={ blockClientIds }
extraData={ [ isFullyBordered ] }
keyExtractor={ identity }
Expand Down Expand Up @@ -113,7 +113,7 @@ export class BlockList extends Component {
}

renderItem( { item: clientId, index } ) {
const blockHolderFocusedStyle = useStyle( styles.blockHolderFocused, styles.blockHolderFocusedDark, this.props.theme );
const blockHolderFocusedStyle = this.props.useStyle( 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 = useStyle( styles.lineStyleAddHere, styles.lineStyleAddHereDark, this.props.theme );
const labelStyle = useStyle( styles.labelStyleAddHere, styles.labelStyleAddHereDark, this.props.theme );
const lineStyle = this.props.useStyle( styles.lineStyleAddHere, styles.lineStyleAddHereDark );
const labelStyle = this.props.useStyle( styles.labelStyleAddHere, styles.labelStyleAddHereDark );
return (
<View style={ styles.containerStyleAddHere } >
<View style={ lineStyle }></View>
Expand Down
4 changes: 0 additions & 4 deletions packages/block-editor/src/components/block-list/style.native.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@
flex: 1;
}

.listDark {
background: #1c1c1e;
}

.switch {
flex-direction: row;
justify-content: flex-start;
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/inserter/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Dropdown, ToolbarButton, Dashicon, withTheme, useStyle } from '@wordpress/components';
import { Dropdown, ToolbarButton, Dashicon, withTheme } from '@wordpress/components';
import { Component } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
Expand Down Expand Up @@ -56,9 +56,9 @@ class Inserter extends Component {
const {
disabled,
renderToggle = defaultRenderToggle,
theme,
useStyle,
} = this.props;
const style = useStyle( styles.addBlockButton, styles.addBlockButtonDark, theme );
const style = useStyle( styles.addBlockButton, styles.addBlockButtonDark );
return renderToggle( { onToggle, isOpen, disabled, style } );
}

Expand Down
9 changes: 5 additions & 4 deletions packages/block-editor/src/components/inserter/menu.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
} from '@wordpress/blocks';
import { withDispatch, withSelect } from '@wordpress/data';
import { withInstanceId, compose } from '@wordpress/compose';
import { BottomSheet, Icon, withTheme, useStyle } from '@wordpress/components';
import { BottomSheet, Icon, withTheme } from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -61,11 +61,12 @@ export class InserterMenu extends Component {
}

render() {
const { useStyle } = this.props;
const numberOfColumns = this.calculateNumberOfColumns();
const bottomPadding = styles.contentBottomPadding;
const modalIconWrapperStyle = useStyle( styles.modalIconWrapper, styles.modalIconWrapperDark, this.props.theme );
const modalIconStyle = useStyle( styles.modalIcon, styles.modalIconDark, this.props.theme );
const modalItemLabelStyle = useStyle( styles.modalItemLabel, styles.modalItemLabelDark, this.props.theme );
const modalIconWrapperStyle = useStyle( styles.modalIconWrapper, styles.modalIconWrapperDark );
const modalIconStyle = useStyle( styles.modalIcon, styles.modalIconDark );
const modalItemLabelStyle = useStyle( styles.modalItemLabel, styles.modalItemLabelDark );

return (
<BottomSheet
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/media-placeholder/index.native.js
View file
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, useStyle } from '@wordpress/components';
import { withTheme } from '@wordpress/components';

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

function MediaPlaceholder( props ) {
const { allowedTypes = [], labels = {}, icon, onSelect, theme } = props;
const { allowedTypes = [], labels = {}, icon, onSelect, useStyle } = 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, theme );
const emptyStateTitleStyle = useStyle( styles.emptyStateTitle, styles.emptyStateTitleDark, theme );
const emptyStateContainerStyle = useStyle( styles.emptyStateContainer, styles.emptyStateContainerDark );
const emptyStateTitleStyle = useStyle( styles.emptyStateTitle, styles.emptyStateTitleDark );

return (
<MediaUpload
Expand Down
10 changes: 5 additions & 5 deletions packages/block-editor/src/components/warning/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,23 @@ import { View, Text } from 'react-native';
/**
* WordPress dependencies
*/
import { Icon, withTheme, useStyle } from '@wordpress/components';
import { Icon, withTheme } from '@wordpress/components';
import { normalizeIconObject } from '@wordpress/blocks';

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

function Warning( { title, message, icon, iconClass, theme, ...viewProps } ) {
function Warning( { title, message, icon, iconClass, theme, useStyle, ...viewProps } ) {
icon = icon && normalizeIconObject( icon );
const internalIconClass = 'warning-icon' + '-' + theme;
const titleStyle = useStyle( styles.title, styles.titleDark, theme );
const messageStyle = useStyle( styles.message, styles.messageDark, theme );
const titleStyle = useStyle( styles.title, styles.titleDark );
const messageStyle = useStyle( styles.message, styles.messageDark );

return (
<View
style={ useStyle( styles.container, styles.containerDark, theme ) }
style={ useStyle( styles.container, styles.containerDark ) }
{ ...viewProps }
>
{ icon && (
Expand Down
8 changes: 4 additions & 4 deletions packages/block-library/src/code/edit.native.js
View file
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, useStyle } from '@wordpress/components';
import { withTheme } from '@wordpress/components';

/**
* 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, theme } = props;
const codeStyle = useStyle( styles.blockCode, styles.blockCodeDark, theme );
const placeholderStyle = useStyle( styles.placeholder, styles.placeholderDark, theme );
const { attributes, setAttributes, style, onFocus, onBlur, useStyle } = props;
const codeStyle = useStyle( styles.blockCode, styles.blockCodeDark );
const placeholderStyle = useStyle( styles.placeholder, styles.placeholderDark );

return (
<View>
Expand Down
4 changes: 1 addition & 3 deletions packages/block-library/src/image/edit.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {
Toolbar,
ToolbarButton,
withTheme,
useStyle,
} from '@wordpress/components';

import {
Expand Down Expand Up @@ -195,12 +194,11 @@ class ImageEdit extends React.Component {
}

getIcon( isRetryIcon ) {
const iconStyle = useStyle( styles.icon, styles.iconDark, this.props.theme );

if ( isRetryIcon ) {
return <Icon icon={ SvgIconRetry } { ...styles.iconRetry } />;
}

const iconStyle = this.props.useStyle( styles.icon, styles.iconDark );
return <Icon icon={ SvgIcon } { ...iconStyle } />;
}

Expand Down
10 changes: 5 additions & 5 deletions packages/block-library/src/missing/edit.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { View, Text } from 'react-native';
/**
* WordPress dependencies
*/
import { Icon, withTheme, useStyle } from '@wordpress/components';
import { Icon, withTheme } from '@wordpress/components';
import { coreBlocks } from '@wordpress/block-library';
import { normalizeIconObject } from '@wordpress/blocks';
import { Component } from '@wordpress/element';
Expand All @@ -20,17 +20,17 @@ import styles from './style.scss';
export class UnsupportedBlockEdit extends Component {
render() {
const { originalName } = this.props.attributes;
const theme = this.props.theme;
const { useStyle, theme } = this.props;
const blockType = coreBlocks[ originalName ];

const title = blockType ? blockType.settings.title : __( 'Unsupported' );
const titleStyle = useStyle( styles.unsupportedBlockMessage, styles.unsupportedBlockMessageDark, theme );
const titleStyle = useStyle( styles.unsupportedBlockMessage, styles.unsupportedBlockMessageDark );

const icon = blockType ? normalizeIconObject( blockType.settings.icon ) : 'admin-plugins';
const iconStyle = useStyle( styles.unsupportedBlockIcon, styles.unsupportedBlockIconDark, theme );
const iconStyle = useStyle( styles.unsupportedBlockIcon, styles.unsupportedBlockIconDark );
const iconClassName = 'unsupported-icon' + '-' + theme;
return (
<View style={ useStyle( styles.unsupportedBlock, styles.unsupportedBlockDark, theme ) }>
<View style={ useStyle( styles.unsupportedBlock, styles.unsupportedBlockDark ) }>
<Icon className={ iconClassName } icon={ icon && icon.src ? icon.src : icon } color={ iconStyle.color } />
<Text style={ titleStyle }>{ title }</Text>
</View>
Expand Down
10 changes: 6 additions & 4 deletions packages/block-library/src/more/edit.native.js
View file
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, useStyle } from '@wordpress/components';
import { withTheme } from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -26,11 +26,13 @@ export class MoreEdit extends Component {
}

render() {
const { customText } = this.props.attributes;
const { attributes, useStyle } = this.props;
const { customText } = attributes;
const { defaultText } = this.state;

const content = customText || defaultText;
const textStyle = useStyle( styles.moreText, styles.moreTextDark, this.props.theme );
const lineStyle = useStyle( styles.moreLine, styles.moreLineDark, this.props.theme );
const textStyle = useStyle( styles.moreText, styles.moreTextDark );
const lineStyle = useStyle( styles.moreLine, styles.moreLineDark );

return (
<View>
Expand Down
8 changes: 4 additions & 4 deletions packages/block-library/src/nextpage/edit.native.js
View file
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, useStyle } from '@wordpress/components';
import { withTheme } from '@wordpress/components';

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

export function NextPageEdit( { attributes, isSelected, onFocus, theme } ) {
export function NextPageEdit( { attributes, isSelected, onFocus, useStyle } ) {
const { customText = __( 'Page break' ) } = attributes;
const accessibilityTitle = attributes.customText || '';
const accessibilityState = isSelected ? [ 'selected' ] : [];
const textStyle = useStyle( styles.nextpageText, styles.nextpageTextDark, theme );
const lineStyle = useStyle( styles.nextpageLine, styles.nextpageLineDark, theme );
const textStyle = useStyle( styles.nextpageText, styles.nextpageTextDark );
const lineStyle = useStyle( styles.nextpageLine, styles.nextpageLineDark );

return (
<View
Expand Down
4 changes: 1 addition & 3 deletions packages/block-library/src/video/edit.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import {
Toolbar,
ToolbarButton,
withTheme,
useStyle,
} from '@wordpress/components';

import {
Expand Down Expand Up @@ -150,12 +149,11 @@ class VideoEdit extends React.Component {
}

getIcon( isRetryIcon, isMediaPlaceholder ) {
const iconStyle = useStyle( style.icon, style.iconDark, this.props.theme );

if ( isRetryIcon ) {
return <Icon icon={ SvgIconRetry } { ...style.icon } />;
}

const iconStyle = this.props.useStyle( style.icon, style.iconDark );
return <Icon icon={ SvgIcon } { ...( ! isMediaPlaceholder ? style.iconUploading : iconStyle ) } />;
}

Expand Down
17 changes: 8 additions & 9 deletions packages/components/src/mobile/bottom-sheet/cell.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
*/
import styles from './styles.scss';
import platformStyles from './cellStyles.scss';
// `useStyle as getStyle`: Hack to avoid lint thinking this is a React Hook
import { withTheme, useStyle as getStyle } from '../dark-mode';
import { withTheme } from '../dark-mode';

class BottomSheetCell extends Component {
constructor( props ) {
Expand Down Expand Up @@ -50,14 +49,14 @@ class BottomSheetCell extends Component {
editable = true,
separatorType,
style = {},
theme,
useStyle,
...valueProps
} = this.props;

const showValue = value !== undefined;
const isValueEditable = editable && onChangeValue !== undefined;
const cellLabelStyle = getStyle( styles.cellLabel, styles.cellTextDark, theme );
const cellLabelCenteredStyle = getStyle( styles.cellLabelCentered, styles.cellTextDark, theme );
const cellLabelStyle = useStyle( styles.cellLabel, styles.cellTextDark );
const cellLabelCenteredStyle = useStyle( styles.cellLabelCentered, styles.cellTextDark );
const defaultLabelStyle = showValue || icon !== undefined ? cellLabelStyle : cellLabelCenteredStyle;
const drawSeparator = ( separatorType && separatorType !== 'none' ) || separatorStyle === undefined;

Expand All @@ -81,8 +80,8 @@ class BottomSheetCell extends Component {

const separatorStyle = () => {
//eslint-disable-next-line @wordpress/no-unused-vars-before-return
const defaultSeparatorStyle = getStyle( styles.separator, styles.separatorDark, theme );
const cellSeparatorStyle = getStyle( styles.cellSeparator, styles.cellSeparatorDark, theme );
const defaultSeparatorStyle = this.props.useStyle( styles.separator, styles.separatorDark );
const cellSeparatorStyle = this.props.useStyle( styles.cellSeparator, styles.cellSeparatorDark );
const leftMarginStyle = { ...cellSeparatorStyle, ...platformStyles.separatorMarginLeft };
switch ( separatorType ) {
case 'leftMargin':
Expand All @@ -98,7 +97,7 @@ class BottomSheetCell extends Component {

const getValueComponent = () => {
const styleRTL = I18nManager.isRTL && styles.cellValueRTL;
const cellValueStyle = getStyle( styles.cellValue, styles.cellTextDark, theme );
const cellValueStyle = this.props.useStyle( styles.cellValue, styles.cellTextDark );
const finalStyle = { ...cellValueStyle, ...valueStyle, ...styleRTL };

// To be able to show the `middle` ellipsizeMode on editable cells
Expand Down Expand Up @@ -151,7 +150,7 @@ class BottomSheetCell extends Component {
);
};

const iconStyle = getStyle( styles.icon, styles.iconDark, theme );
const iconStyle = useStyle( styles.icon, styles.iconDark );

return (
<TouchableOpacity
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/mobile/bottom-sheet/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import Cell from './cell';
import PickerCell from './picker-cell';
import SwitchCell from './switch-cell';
import KeyboardAvoidingView from './keyboard-avoiding-view';
import { withTheme, useStyle } from '../dark-mode';
import { withTheme } from '../dark-mode';

class BottomSheet extends Component {
constructor() {
Expand Down Expand Up @@ -64,7 +64,7 @@ class BottomSheet extends Component {
hideHeader,
style = {},
contentStyle = {},
theme,
useStyle,
} = this.props;

const panResponder = PanResponder.create( {
Expand Down Expand Up @@ -120,7 +120,7 @@ class BottomSheet extends Component {
},
};

const backgroundStyle = useStyle( styles.background, styles.backgroundDark, theme );
const backgroundStyle = useStyle( styles.background, styles.backgroundDark );

return (
<Modal
Expand Down
Loading

0 comments on commit 264b178

Please sign in to comment.