[RNMobile] Native mobile release v1.11.0 (WordPress#17181)

* [RNMobile] Fix crash when adding separator * Build: remove global install of latest npm since we want to use the paired node/npm version (WordPress#17134) * Build: remove global install of latest npm since we want to use the paired node/npm version * Also update travis to remove --latest-npm flag * [RNMobile] Try dark mode (iOS) (WordPress#17067) * Adding dark mode component implemented on list and list block * Adding DarkMode handling to RichText, ToolBar and SafeArea * Mobile: Using DarkMode as HOC * iOS DarkMode: Modified colors on block list and block container * iOS DarkMode: Improved Header Toolbar colors * iOS DarkMode: Removing background from buttons * iOS DarkMode warning and unsupported * iOS DarkMode: MediaPlaceholder * iOS DarkMode: BottomSheets * iOS DarkMode: Inserter * iOS DarkMode: DefaultBlockAppender * iOS DarkMode: PostTite * Update hardcoded colors with variables * iOS DarkMode: Fix bottom-sheet cell value color * iOS DarkMode: More - PageBreak - Add Block Here * iOS DarkMode: Better text color * iOS Darkmode: Code block * iOS DarkMode: HTML View * iOS DarkMode: Improve colors on SafeArea * Fix toolbar not avoiding keyboard regression * Fix native unit tests * Fix gutenberg-mobile unit tests * Adding RNDarkMode mocks * RNMobile: Fix crash when viewing HTML on iOS * [RNMobile] Remove toolbar from html view * [RNMobile] Fix MaxListenersExceededWarning caused by dark-mode event emitter (WordPress#17186) * Fix MaxListenersExceededWarning caused by dark-mode event emitter * Checking for setMaxListeners trying to avoid CI error * Adding remove listener to DarkMode HOC * DarkMode: Binding this.onModeChanged to `this` * DarkMode: Adding conditional needed to pass UI Tests on CI * Fix focus title on new posts regression (WordPress#17180) * BottomSheet: Setting DashIcon color directly when theme is default (light) (WordPress#17193)
geriux · Oct 2, 2019 · 13d930c · 13d930c
1 parent a220eba
commit 13d930c
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss
@@ -8,6 +8,10 @@
 	flex: 1;
 }
 
+.listDark {
+	background: #1c1c1e;
+}
+
 .switch {
 	flex-direction: row;
 	justify-content: flex-start;

diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss
@@ -31,6 +31,10 @@
 	background-color: $background-dark-secondary;
 }
 
+.emptyStateContainerDark {
+	background-color: $background-dark-secondary;
+}
+
 .emptyStateTitle {
 	text-align: center;
 	margin-top: 8;

diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
@@ -32,3 +32,4 @@ 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';
diff --git a/packages/components/src/mobile/dark-mode/index.native.js b/packages/components/src/mobile/dark-mode/index.native.js
@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { eventEmitter, initialMode } from 'react-native-dark-mode';
+import React from 'react';
+
+// This was failing on CI
+if ( eventEmitter.setMaxListeners ) {
+	eventEmitter.setMaxListeners( 150 );
+}
+
+export function useStyle( light, dark, theme ) {
+	const finalDark = {
+		...light,
+		...dark,
+	};
+
+	return theme === 'dark' ? finalDark : light;
+}
+
+// This function takes a component...
+export function withTheme( WrappedComponent ) {
+	return class extends React.Component {
+		constructor( props ) {
+			super( props );
+
+			this.onModeChanged = this.onModeChanged.bind( this );
+
+			this.state = {
+				mode: initialMode,
+			};
+		}
+
+		onModeChanged( newMode ) {
+			this.setState( { mode: newMode } );
+		}
+
+		componentDidMount() {
+			this.subscription = eventEmitter.on( 'currentModeChanged', this.onModeChanged );
+		}
+
+		componentWillUnmount() {
+			// Conditional needed to pass UI Tests on CI
+			if ( eventEmitter.removeListener ) {
+				eventEmitter.removeListener( 'currentModeChanged', this.onModeChanged );
+			}
+		}
+
+		render() {
+			return <WrappedComponent theme={ this.state.mode } { ...this.props } />;
+		}
+	};
+}