Rnmobile/native toolbar component ui (#11827)

Implement toolbar 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,71 @@
 /**
  * External dependencies
  */
-import { TouchableOpacity, Text, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, Text, View, Platform } from 'react-native';
+
+const isAndroid = Platform.OS === 'android';
+const marginBottom = isAndroid ? -0.5 : 0;
+const marginLeft = -3;
+
+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: {
+ color: '#7b9ab1',
+ fontWeight: 'bold',
+ fontSize: 13,
+ alignSelf: 'flex-end',
+ marginLeft: marginLeft,
+ marginBottom: marginBottom,
+ },
+ subscriptActive: {
+ color: 'white',
+ fontWeight: 'bold',
+ fontSize: 13,
+ alignSelf: 'flex-end',
+ marginLeft: marginLeft,
+ marginBottom: marginBottom,
+ },
+} );
 
 export default function Button( props ) {
  const { children, onClick, 'aria-label': ariaLabel, 'aria-pressed': ariaPressed, 'data-subscript': subscript } = props;
+
  return (
  <TouchableOpacity
+ activeOpacity={ 0.7 }
  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' } }>
- { children }
- { subscript && ( <Text style={ { fontVariant: [ 'small-caps' ] } }>{ subscript }</Text> ) }
+ <View style={ ariaPressed ? styles.buttonActive : styles.buttonInactive }>
+ <View style={ { flexDirection: 'row' } }>
+ { children }
+ { subscript && ( <Text style={ ariaPressed ? styles.subscriptActive : styles.subscriptInactive }>{ subscript }</Text> ) }
+ </View>
  </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,20 @@ 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 +898,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, labelPosition, ...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: #7b9ab1;
+ 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.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",