From 264b178ef9bd94d4e0539c1271fb92b5b4490efa Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 4 Sep 2019 14:03:38 +0200 Subject: [PATCH] [RNMobile] DarkMode improvements (#17309) * 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 --- .../block-list-appender/style.native.scss | 1 - .../src/components/block-list/index.native.js | 10 +++---- .../components/block-list/style.native.scss | 4 --- .../src/components/inserter/index.native.js | 6 ++-- .../src/components/inserter/menu.native.js | 9 +++--- .../media-placeholder/index.native.js | 8 ++--- .../src/components/warning/index.native.js | 10 +++---- .../block-library/src/code/edit.native.js | 8 ++--- .../block-library/src/image/edit.native.js | 4 +-- .../block-library/src/missing/edit.native.js | 10 +++---- .../block-library/src/more/edit.native.js | 10 ++++--- .../block-library/src/nextpage/edit.native.js | 8 ++--- .../block-library/src/video/edit.native.js | 4 +-- .../src/mobile/bottom-sheet/cell.native.js | 17 +++++------ .../src/mobile/bottom-sheet/index.native.js | 6 ++-- .../src/mobile/dark-mode/index.native.js | 29 +++++++++++-------- .../mobile/html-text-input/index.native.js | 7 +++-- .../html-text-input/test/index.native.js | 9 +++++- .../src/toolbar/toolbar-container.native.js | 8 ++--- .../header/header-toolbar/index.native.js | 6 ++-- .../src/components/layout/index.native.js | 7 +++-- .../components/visual-editor/index.native.js | 6 ++-- .../rich-text/src/component/index.native.js | 10 +++---- .../src/component/test/index.native.js | 5 ++++ 24 files changed, 107 insertions(+), 95 deletions(-) diff --git a/packages/block-editor/src/components/block-list-appender/style.native.scss b/packages/block-editor/src/components/block-list-appender/style.native.scss index 60734f5e9c210..edb2c6f809ebc 100644 --- a/packages/block-editor/src/components/block-list-appender/style.native.scss +++ b/packages/block-editor/src/components/block-list-appender/style.native.scss @@ -1,6 +1,5 @@ .blockListAppender { - background-color: $white; padding-left: 16; padding-right: 16; padding-top: 12; diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 2dcf6b487a18f..54b6b62f08c96 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -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 @@ -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 } @@ -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 ( @@ -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 ( diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss index e1f8e96abc948..36be89c4c067c 100644 --- a/packages/block-editor/src/components/block-list/style.native.scss +++ b/packages/block-editor/src/components/block-list/style.native.scss @@ -8,10 +8,6 @@ flex: 1; } -.listDark { - background: #1c1c1e; -} - .switch { flex-direction: row; justify-content: flex-start; diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js index 1a757a65a502b..b64c460f14bd6 100644 --- a/packages/block-editor/src/components/inserter/index.native.js +++ b/packages/block-editor/src/components/inserter/index.native.js @@ -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'; @@ -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 } ); } diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 3b0e27a156ddb..9dbf9b5b16271 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -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 @@ -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 ( { icon && ( diff --git a/packages/block-library/src/code/edit.native.js b/packages/block-library/src/code/edit.native.js index 0363fcfebc61d..a8afae8f0195b 100644 --- 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, useStyle } from '@wordpress/components'; +import { withTheme } from '@wordpress/components'; /** * 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, 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 ( diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 2d059b04c5ca4..eb846520ab53f 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -20,7 +20,6 @@ import { Toolbar, ToolbarButton, withTheme, - useStyle, } from '@wordpress/components'; import { @@ -195,12 +194,11 @@ class ImageEdit extends React.Component { } getIcon( isRetryIcon ) { - const iconStyle = useStyle( styles.icon, styles.iconDark, this.props.theme ); - if ( isRetryIcon ) { return ; } + const iconStyle = this.props.useStyle( styles.icon, styles.iconDark ); return ; } diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js index c5a604144b7e7..356aa68f0fb33 100644 --- a/packages/block-library/src/missing/edit.native.js +++ b/packages/block-library/src/missing/edit.native.js @@ -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'; @@ -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 ( - + { title } diff --git a/packages/block-library/src/more/edit.native.js b/packages/block-library/src/more/edit.native.js index e177213a7f1f6..c266512b28783 100644 --- 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, useStyle } from '@wordpress/components'; +import { withTheme } from '@wordpress/components'; /** * Internal dependencies @@ -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 ( diff --git a/packages/block-library/src/nextpage/edit.native.js b/packages/block-library/src/nextpage/edit.native.js index be9ad28357640..37f9c235b7ef6 100644 --- 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, 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 ( ; } + const iconStyle = this.props.useStyle( style.icon, style.iconDark ); return ; } diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index cbc1092847870..6a5fc6ba38947 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -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 ) { @@ -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; @@ -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': @@ -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 @@ -151,7 +150,7 @@ class BottomSheetCell extends Component { ); }; - const iconStyle = getStyle( styles.icon, styles.iconDark, theme ); + const iconStyle = useStyle( styles.icon, styles.iconDark ); return ( ; + return ; } }; } diff --git a/packages/components/src/mobile/html-text-input/index.native.js b/packages/components/src/mobile/html-text-input/index.native.js index 1408be65c9053..4032fa5a74b0d 100644 --- a/packages/components/src/mobile/html-text-input/index.native.js +++ b/packages/components/src/mobile/html-text-input/index.native.js @@ -15,7 +15,7 @@ import { withInstanceId, compose } from '@wordpress/compose'; /** * Internal dependencies */ -import { withTheme, useStyle } from '../dark-mode'; +import { withTheme } from '../dark-mode'; import HTMLInputContainer from './container'; import styles from './style.scss'; @@ -61,8 +61,9 @@ export class HTMLTextInput extends Component { } render() { - const htmlStyle = useStyle( styles.htmlView, styles.htmlViewDark, this.props.theme ); - const placeholderStyle = useStyle( styles.placeholder, styles.placeholderDark, this.props.theme ); + const { useStyle } = this.props; + const htmlStyle = useStyle( styles.htmlView, styles.htmlViewDark ); + const placeholderStyle = useStyle( styles.placeholder, styles.placeholderDark ); return ( { return findTextInputInWrapper( wrapper, { placeholder } ); }; +const useStyle = () => { + return { color: 'white' }; +}; + describe( 'HTMLTextInput', () => { it( 'HTMLTextInput renders', () => { const wrapper = shallow( - + ); expect( wrapper ).toBeTruthy(); } ); @@ -47,6 +51,7 @@ describe( 'HTMLTextInput', () => { const wrapper = shallow( ); @@ -71,6 +76,7 @@ describe( 'HTMLTextInput', () => { ); @@ -101,6 +107,7 @@ describe( 'HTMLTextInput', () => { const wrapper = shallow( ); diff --git a/packages/components/src/toolbar/toolbar-container.native.js b/packages/components/src/toolbar/toolbar-container.native.js index f9d019450266c..c92251c38c19c 100644 --- a/packages/components/src/toolbar/toolbar-container.native.js +++ b/packages/components/src/toolbar/toolbar-container.native.js @@ -7,11 +7,11 @@ import { View } from 'react-native'; * Internal dependencies */ import styles from './style.scss'; -import { withTheme, useStyle } from '../mobile/dark-mode'; +import { withTheme } from '../mobile/dark-mode'; -const ToolbarContainer = ( props ) => ( - - { props.children } +const ToolbarContainer = ( { useStyle, passedStyle, children } ) => ( + + { children } ); diff --git a/packages/edit-post/src/components/header/header-toolbar/index.native.js b/packages/edit-post/src/components/header/header-toolbar/index.native.js index 278b0af30548e..5da763a5dd8e5 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.native.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.native.js @@ -15,7 +15,7 @@ import { Inserter, BlockToolbar, } from '@wordpress/block-editor'; -import { Toolbar, ToolbarButton, useStyle, withTheme } from '@wordpress/components'; +import { Toolbar, ToolbarButton, withTheme } from '@wordpress/components'; /** * Internal dependencies @@ -30,7 +30,7 @@ function HeaderToolbar( { undo, showInserter, showKeyboardHideButton, - theme, + useStyle, onHideKeyboard, } ) { const scrollViewRef = useRef( null ); @@ -39,7 +39,7 @@ function HeaderToolbar( { }; return ( - + - + + { isHtmlView ? this.renderHTML() : this.renderVisual() } diff --git a/packages/edit-post/src/components/visual-editor/index.native.js b/packages/edit-post/src/components/visual-editor/index.native.js index b7c53b12aad54..1d8c7dbc094af 100644 --- a/packages/edit-post/src/components/visual-editor/index.native.js +++ b/packages/edit-post/src/components/visual-editor/index.native.js @@ -7,7 +7,7 @@ import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { BlockList } from '@wordpress/block-editor'; import { PostTitle } from '@wordpress/editor'; -import { ReadableContentView, withTheme, useStyle } from '@wordpress/components'; +import { ReadableContentView, withTheme } from '@wordpress/components'; /** * Internal dependencies @@ -20,9 +20,9 @@ class VisualEditor extends Component { editTitle, setTitleRef, title, - theme, + useStyle, } = this.props; - const blockHolderFocusedStyle = useStyle( styles.blockHolderFocused, styles.blockHolderFocusedDark, theme ); + const blockHolderFocusedStyle = useStyle( styles.blockHolderFocused, styles.blockHolderFocusedDark ); return ( diff --git a/packages/rich-text/src/component/test/index.native.js b/packages/rich-text/src/component/test/index.native.js index ec0cbb7719524..c4ff0da2b2f41 100644 --- a/packages/rich-text/src/component/test/index.native.js +++ b/packages/rich-text/src/component/test/index.native.js @@ -8,6 +8,10 @@ import { shallow } from 'enzyme'; */ import { RichText } from '../index'; +const useStyle = () => { + return { color: 'white' }; +}; + describe( 'RichText Native', () => { let richText; @@ -40,6 +44,7 @@ describe( 'RichText Native', () => { } } formatTypes={ [] } onSelectionChange={ jest.fn() } + useStyle={ useStyle } /> ); const event = {