Leaner code for the native mobile Toolbar

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

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { TouchableOpacity } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+export function Button( props ) {
+ const { onClick } = props;
+ const ariaLabel = props[ 'aria-label' ];
+ return (
+ <TouchableOpacity
+ accessible={ true }
+ accessibilityLabel={ ariaLabel }
+ onPress={ onClick }
+ >
+ { props.children }
+ </TouchableOpacity>
+ );
+}
+
+export default forwardRef( Button );

packages/components/src/dashicon/index.js

@@ -10,6 +10,7 @@ OR if you're looking to change now SVGs get output, you'll need to edit strings
  */
 import { Component } from '@wordpress/element';
 import SVG from './svg';
+import Path from './path';
 
 export default class Dashicon extends Component {
  shouldComponentUpdate( nextProps ) {
@@ -886,10 +887,18 @@ export default class Dashicon extends Component {
  const iconClass = [ 'dashicon', 'dashicons-' + icon, className ].filter( Boolean ).join( ' ' );
 
  return (
- <SVG className={ iconClass }
- size={ size }
- path= { path } 
- /> 
+ <SVG
+ aria-hidden
+ role="img"
+ focusable="false"
+ className={ iconClass }
+ xmlns="http://www.w3.org/2000/svg"
+ width={ size }
+ height={ size }
+ viewBox="0 0 20 20"
+ >
+ <Path d={ path } />
+ </SVG>
  );
  }
 }

packages/components/src/dashicon/path.js

@@ -0,0 +1 @@
+export default ( props ) => ( <path { ...props } /> );

packages/components/src/dashicon/path.native.js

@@ -0,0 +1,3 @@
+import { Path } from 'react-native-svg';
+
+export default ( props ) => ( <Path { ...props } /> );

packages/components/src/dashicon/svg.js

@@ -1,17 +1,5 @@
-export default function SVG( props, ref ) {
- const { size, path, iconClass } = props
- return (
- <svg
- aria-hidden
- role="img"
- focusable="false"
- className={ iconClass }
- xmlns="http://www.w3.org/2000/svg"
- width={ size }
- height={ size }
- viewBox="0 0 20 20"
- >
- <path d={ path } />
- </svg>
- );
-}
+export default ( props ) => (
+ <svg { ...props } >
+ { props.children }
+ </svg>
+);

packages/components/src/dashicon/svg.native.js

@@ -1,10 +1,7 @@
-import Svg,{ Path } from 'react-native-svg';
+import Svg from 'react-native-svg';
 
-export default function SVG( props, ref ) {
- const { size, path, iconClass } = props
- return (
- <Svg height={ size } width={ size }> 
- <Path d={ path } />
- </Svg>
- );
-}
+export default ( props ) => (
+ <Svg width={ props.width } height={ props.height } >
+ { props.children }
+ </Svg>
+);

packages/components/src/index.native.js

@@ -1,4 +1,4 @@
 // Components
 // eslint-disable-next-line camelcase
 export { default as Dashicon } from './dashicon';
-export { default as Toolbar } from './toolbar';
+export { default as Toolbar } from './toolbar';

packages/components/src/toolbar/index.js

@@ -8,6 +8,8 @@ import { flatMap } from 'lodash';
  * Internal dependencies
  */
 import IconButton from '../icon-button';
+import ToolbarContainer from './toolbar-container';
+import ToolbarButtonContainer from './toolbar-button-container';
 
 /**
  * Renders a toolbar with controls.
@@ -54,11 +56,12 @@ function Toolbar( { controls = [], children, className } ) {
  }
 
  return (
- <div className={ classnames( 'components-toolbar', className ) }>
+ <ToolbarContainer className={ classnames( 'components-toolbar', className ) }>
  { flatMap( controlSets, ( controlSet, indexOfSet ) => (
  controlSet.map( ( control, indexOfControl ) => (
- <div
+ <ToolbarButtonContainer
  key={ [ indexOfSet, indexOfControl ].join() }
+ keyProp={ [ indexOfSet, indexOfControl ].join() }
  className={ indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : null }
  >
  <IconButton
@@ -77,11 +80,11 @@ function Toolbar( { controls = [], children, className } ) {
  disabled={ control.isDisabled }
  />
  { control.children }
- </div>
+ </ToolbarButtonContainer>
  ) )
  ) ) }
  { children }
- </div>
+ </ToolbarContainer>
  );
 }
 

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

@@ -0,0 +1,8 @@
+export default ( props ) => (
+ <div
+ key={ props.keyProp }
+ className={ props.className }
+ >
+ { props.children }
+ </div>
+);

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

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+export default ( props ) => (
+ <View
+ key={ props.keyProp }
+ style={ props.className }
+ >
+ { props.children }
+ </View>
+);

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

@@ -0,0 +1,10 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+export default ( props ) => (
+ <div className={ classnames( 'components-toolbar', props.className ) }>
+ { props.children }
+ </div>
+);

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

@@ -0,0 +1,10 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+export default ( props ) => (
+ <View style={ { flex: 1, flexDirection: 'row' } }>
+ { props.children }
+ </View>
+);

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

@@ -0,0 +1,4 @@
+import React from 'react';
+
+// for the native mobile, just shortcircuit the Tooltip to return its child
+export default ( props ) => React.Children.only( props.children );

packages/editor/src/components/rich-text/format-toolbar/index.native.js

@@ -3,8 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { 
- IconButton, 
+import {
  Toolbar,
 } from '@wordpress/components';
 import { ESCAPE, LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER, displayShortcut } from '@wordpress/keycodes';
@@ -15,9 +14,7 @@ import { prependHTTP } from '@wordpress/url';
  */
 //import PositionedAtSelection from './positioned-at-selection';
 //import URLInput from '../../url-input';
-import { filterURLForDisplay } from '../../../utils/url';
-
-import { Text } from 'react-native'
+//import { filterURLForDisplay } from '../../../utils/url';
 
 const FORMATTING_CONTROLS = [
  {
@@ -173,9 +170,9 @@ class FormatToolbar extends Component {
  }
 
  render() {
- const { formats, enabledControls = DEFAULT_CONTROLS, customControls = [], selectedNodeId } = this.props;
- const { linkValue, settingsVisible, opensInNewWindow } = this.state;
- const isAddingLink = formats.link && formats.link.isAdding;
+ const { enabledControls = DEFAULT_CONTROLS, customControls = [] } = this.props;
+ // const { linkValue, settingsVisible, opensInNewWindow } = this.state;
+ // const isAddingLink = formats.link && formats.link.isAdding;
 
  const toolbarControls = FORMATTING_CONTROLS.concat( customControls )
  .filter( ( control ) => enabledControls.indexOf( control.format ) !== -1 )
@@ -197,10 +194,10 @@ class FormatToolbar extends Component {
  onClick: this.toggleFormat( control.format ),
  isActive: this.isFormatActive( control.format ),
  };
- } ); 
+ } );
 
- return ( 
- <Toolbar controls={ toolbarControls } /> 
+ return (
+ <Toolbar controls={ toolbarControls } />
  );
  }
 }