Rnmobile/native toolbar component ui

packages/block-library/src/image/edit.native.js

@@ -8,7 +8,7 @@ import RNReactNativeGutenbergBridge from 'react-native-gutenberg-bridge';
  * Internal dependencies
  */
 import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor';
-import { Toolbar, IconButton } from '@wordpress/components';
+import { Toolbar, ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export default function ImageEdit( props ) {
@@ -40,7 +40,7 @@ export default function ImageEdit( props ) {
 
 	const toolbarEditButton = (
 		<Toolbar>
-			<IconButton
+			<ToolbarButton
 				className="components-toolbar__control"
 				label={ __( 'Edit image' ) }
 				icon="edit"

packages/components/src/button/index.native.js

@@ -1,20 +1,56 @@
 /**
  * External dependencies
  */
-import { TouchableOpacity, Text, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
+
+const styles = StyleSheet.create( {
+    container: {
+		flex: 1,
+		padding: 3,
+		justifyContent: 'center',
+		alignItems: 'center',
+    },
+    buttonInactive: {
+		flex: 1,
+		flexDirection: 'row',
+		justifyContent: 'center',
+		alignItems: 'center',
+		aspectRatio: 1,
+		backgroundColor: 'white',
+	},
+	buttonActive: {
+		flex: 1,
+		flexDirection: 'row',
+		justifyContent: 'center',
+		alignItems: 'center',
+		borderRadius: 6,
+		borderColor: '#2e4453',
+		aspectRatio: 1,
+		backgroundColor: '#2e4453',
+	},
+	subscriptInactive: {
+		fontVariant: [ 'small-caps' ],
+		color: '#87a6bc',
+	},
+	subscriptActive: {
+		fontVariant: [ 'small-caps' ],
+		color: 'white',
+	},
+} );
 
 export default function Button( props ) {
 	const { children, onClick, 'aria-label': ariaLabel, 'aria-pressed': ariaPressed, 'data-subscript': subscript } = props;
+
 	return (
 		<TouchableOpacity
 			accessible={ true }
 			accessibilityLabel={ ariaLabel }
 			onPress={ onClick }
-			style={ { borderColor: ariaPressed ? 'black' : 'white', borderWidth: 1, borderRadius: 2 } }
+			style={ styles.container }
 		>
-			<View style={ { height: 44, width: 44, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' } }>
+			<View style={ ariaPressed ? styles.buttonActive : styles.buttonInactive }>
 				{ children }
-				{ subscript && ( <Text style={ { fontVariant: [ 'small-caps' ] } }>{ subscript }</Text> ) }
+				{ subscript && ( <Text style={ ariaPressed ? styles.subscriptActive : styles.subscriptInactive }>{ subscript }</Text> ) }
 			</View>
 		</TouchableOpacity>
 	);

packages/components/src/dashicon/icon-class.js

@@ -0,0 +1,4 @@
+export const IconClass = ( props ) => {
+	const { icon, className } = props;
+	return [ 'dashicon', 'dashicons-' + icon, className ].filter( Boolean ).join( ' ' );
+};

packages/components/src/dashicon/icon-class.native.js

@@ -0,0 +1,4 @@
+export const IconClass = ( props ) => {
+	const { icon, className, ariaPressed } = props;
+	return [ ariaPressed ? 'dashicon-active' : 'dashicon', 'dashicons-' + icon, className ].filter( Boolean ).join( ' ' );
+};

packages/components/src/dashicon/index.js

@@ -14,18 +14,21 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import { Path, SVG } from '../primitives';
+import { IconClass } from './icon-class';
 
 export default class Dashicon extends Component {
 	shouldComponentUpdate( nextProps ) {
+
 		return (
 			this.props.icon !== nextProps.icon ||
 			this.props.size !== nextProps.size ||
-			this.props.className !== nextProps.className
+			this.props.className !== nextProps.className ||
+			this.props.ariaPressed !== nextProps.ariaPressed
 		);
 	}
 
 	render() {
-		const { icon, className, size = 20 } = this.props;
+		const { icon, size = 20 } = this.props;
 		let path;
 
 		switch ( icon ) {
@@ -896,7 +899,7 @@ export default class Dashicon extends Component {
 			return null;
 		}
 
-		const iconClass = [ 'dashicon', 'dashicons-' + icon, className ].filter( Boolean ).join( ' ' );
+		const iconClass = IconClass(this.props);
 
 		return (
 			<SVG

packages/components/src/icon-button/index.js

@@ -21,6 +21,7 @@ import Dashicon from '../dashicon';
 class IconButton extends Component {
 	render() {
 		const { icon, children, label, className, tooltip, shortcut, ...additionalProps } = this.props;
+		const { 'aria-pressed': ariaPressed } = this.props;
 		const classes = classnames( 'components-icon-button', className );
 		const tooltipText = tooltip || label;
 
@@ -42,7 +43,7 @@ class IconButton extends Component {
 
 		let element = (
 			<Button aria-label={ label } { ...additionalProps } className={ classes }>
-				{ isString( icon ) ? <Dashicon icon={ icon } /> : icon }
+				{ isString( icon ) ? <Dashicon icon={ icon } ariaPressed={ ariaPressed } /> : icon }
 				{ children }
 			</Button>
 		);

packages/components/src/index.native.js

@@ -2,6 +2,7 @@
 export * from './primitives';
 export { default as Dashicon } from './dashicon';
 export { default as Toolbar } from './toolbar';
+export { default as ToolbarButton } from './toolbar-button';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
 export { default as IconButton } from './icon-button';
 export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';

packages/components/src/primitives/svg/index.native.js

@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
-import { omit } from 'lodash';
 import { Svg } from 'react-native-svg';
 
 /**
  * Internal dependencies
  */
-import styles from '../../dashicon/style.scss';
+import styles from './style.scss';
 
 export {
 	Circle,
@@ -21,24 +20,23 @@ export const SVG = ( props ) => {
 	// We're using the react-native-classname-to-style plugin, so when a `className` prop is passed it gets converted to `style` here.
 	// Given it carries a string (as it was originally className) but an object is expected for `style`,
 	// we need to check whether `style` exists and is a string, and convert it to an object
-	let styleKeys = new Array();
-	const styleValues = new Array();
-	if ( typeof props.style === 'string' || props.style instanceof String ) {
-		styleKeys = props.style.split( ' ' );
-		styleKeys.forEach( ( element ) => {
-			const oneStyle = styles[ element ];
-			if ( oneStyle !== undefined ) {
-				styleValues.push( oneStyle );
-			}
-		} );
+
+	let styleValues = {};
+	if ( typeof props.style === 'string' ) {
+		const oneStyle = props.style.split( ' ' ).map( element => styles[ element ] ).filter( Boolean );
+		styleValues = Object.assign( styleValues, ...oneStyle );
 	}
 
-	const safeProps = styleValues.length === 0 ? { ...omit( props, [ 'style' ] ) } : { ...props, style: styleValues };
+	const safeProps = { ...props, style: styleValues };
+
 	return (
 		<Svg
+			//We want to re-render when style color is changed
+			key={ safeProps.style.color }
 			height="100%"
 			width="100%"
 			{ ...safeProps }
 		/>
 	);
 };
+

packages/components/src/primitives/svg/style.native.scss

@@ -0,0 +1,14 @@
+.dashicon {
+	color: #87a6bc;
+	fill: currentColor;
+}
+
+.dashicon-active {
+	color: #fff;
+	fill: currentColor;
+}
+
+.dashicons-insert {
+	color: #87a6bc;
+	fill: currentColor;
+}

packages/components/src/toolbar/style.native.scss

@@ -0,0 +1,7 @@
+.container {
+	flex-direction: row;
+	border-right-width: 1px;
+	border-right-color: #e9eff3;
+	padding-left: 5px;
+	padding-right: 5px;
+}

packages/components/src/toolbar/toolbar-container.native.js

@@ -3,8 +3,12 @@
  */
 import { View } from 'react-native';
 
-export default ( props ) => (
-	<View style={ { flexDirection: 'row' } }>
+import styles from './style.native.scss';
+
+const ToolbarContainer = ( props ) => (
+	<View style={ styles.container }>
 		{ props.children }
 	</View>
 );
+
+export default ToolbarContainer;

packages/html-entities/package.json

@@ -4,6 +4,7 @@
 	"description": "HTML entity utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
+	"react-native": "src/index",
 	"keywords": [
 		"wordpress",
 		"html",