Merge pull request woocommerce/woocommerce-admin#2154 from woocommerce/refactor/EllipsisMenu-renderContent

EllipsisMenu: Refactor children to renderContent

plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js

@@ -89,7 +89,7 @@ class DashboardCharts extends Component {
 		return (
 			<EllipsisMenu
 				label={ __( 'Choose which charts to display', 'woocommerce-admin' ) }
-				renderChildren={ ( { onToggle } ) => (
+				renderContent={ ( { onToggle } ) => (
 					<Fragment>
 						{ window.wcAdminFeatures[ 'dashboard/customizable' ] && (
 							<div className="woocommerce-ellipsis-menu__item">

plugins/woocommerce-admin/client/dashboard/leaderboards/index.js

@@ -73,7 +73,7 @@ class Leaderboards extends Component {
 					'Choose which leaderboards to display and other settings',
 					'woocommerce-admin'
 				) }
-				renderChildren={ ( { onToggle } ) => (
+				renderContent={ ( { onToggle } ) => (
 					<Fragment>
 						{ window.wcAdminFeatures[ 'dashboard/customizable' ] && (
 							<div className="woocommerce-ellipsis-menu__item">

plugins/woocommerce-admin/client/dashboard/store-performance/index.js

@@ -84,7 +84,7 @@ class StorePerformance extends Component {
 					'Choose which analytics to display and the section name',
 					'woocommerce-admin'
 				) }
-				renderChildren={ ( { onToggle } ) => (
+				renderContent={ ( { onToggle } ) => (
 					<Fragment>
 						{ window.wcAdminFeatures[ 'dashboard/customizable' ] && (
 							<div className="woocommerce-ellipsis-menu__item">

plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js

@@ -235,10 +235,15 @@ class OrdersPanel extends Component {
 		}
 
 		const menu = (
-			<EllipsisMenu label="Demo Menu">
+			<EllipsisMenu
-				<MenuTitle>Test</MenuTitle>
+				label="Demo Menu"
-				<MenuItem onInvoke={ noop }>Test</MenuItem>
+				renderContent={ () => (
-			</EllipsisMenu>
+					<Fragment>
+						<MenuTitle>Test</MenuTitle>
+						<MenuItem onInvoke={ noop }>Test</MenuItem>
+					</Fragment>
+				) }
+			/>
 		);
 
 		const title =

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -1,7 +1,8 @@
-# unreleased
+# 3.0.0 (unreleased)
 - TableCard component: new `onPageChange` prop.
 - Pagination no longer considers `0` a valid input and triggers `onPageChange` on the input blur event.
 - Tweaks to SummaryListPlaceholder height in order to better match SummaryNumber.
+- EllipsisMenu component (breaking change): Remove `children` prop in favor of a render prop `renderContent` so that function arguments `isOpen`, `onToggle`, and `onClose` can be passed down. 
 
 # 2.0.0
 - Chart legend component now uses withInstanceId HOC so the ids used in several HTML elements are unique.

plugins/woocommerce-admin/packages/components/src/ellipsis-menu/example.md

@@ -1,26 +1,40 @@
 ```jsx
-import { EllipsisMenu, MenuItem, MenuTitle } from '@woocommerce/components';
+import { EllipsisMenu, MenuItem, MenuTitle, Button } from '@woocommerce/components';
 
 const MyEllipsisMenu = withState( {
 	showCustomers: true,
 	showOrders: true,
 } )( ( { setState, showCustomers, showOrders } ) => (
-	<EllipsisMenu label="Choose which analytics to display">
+	<EllipsisMenu label="Choose which analytics to display"
-		<MenuTitle>Display Stats</MenuTitle>
+		renderContent={ ( { onToggle } )=> {
-		<MenuItem onInvoke={ () => setState( { showCustomers: ! showCustomers } ) }>
+			return (
-			<ToggleControl
+				<div>
-				label="Show Customers"
+					<MenuTitle>Display Stats</MenuTitle>
-				checked={ showCustomers }
+					<MenuItem onInvoke={ () => setState( { showCustomers: ! showCustomers } )  }>
-				onChange={ () => setState( { showCustomers: ! showCustomers } ) }
+						<ToggleControl
-			/>
+							label="Show Customers"
-		</MenuItem>
+							checked={ showCustomers }
-		<MenuItem onInvoke={ () => setState( { showOrders: ! showOrders } ) }>
+							onChange={ () => setState( { showCustomers: ! showCustomers } ) }
-			<ToggleControl
+						/>
-				label="Show Orders"
+					</MenuItem>
-				checked={ showOrders }
+					<MenuItem onInvoke={ () => setState( { showOrders: ! showOrders } ) }>
-				onChange={ () => setState( { showOrders: ! showOrders } ) }
+						<ToggleControl
-			/>
+							label="Show Orders"
-		</MenuItem>
+							checked={ showOrders }
-	</EllipsisMenu>
+							onChange={ () => setState( { showOrders: ! showOrders } ) }
+						/>
+					</MenuItem>
+					<MenuItem onInvoke={ onToggle }>
+						<Button
+							label="Close menu"
+							onClick={ onToggle }
+						>
+						Close Menu
+						</Button>
+					</MenuItem>
+				</div>
+			);
+		} }
+	/>
 ) );
 ```

plugins/woocommerce-admin/packages/components/src/ellipsis-menu/index.js

@@ -12,12 +12,12 @@ import PropTypes from 'prop-types';
  */
 class EllipsisMenu extends Component {
 	render() {
-		const { children, label, renderChildren } = this.props;
+		const { label, renderContent } = this.props;
-		if ( ! children && ! renderChildren ) {
+		if ( ! renderContent ) {
 			return null;
 		}
 
-		const renderToggle = ( { onToggle, isOpen } ) => {
+		const renderEllipsis = ( { onToggle, isOpen } ) => {
 			const toggleClassname = classnames( 'woocommerce-ellipsis-menu__toggle', {
 				'is-opened': isOpen,
 			} );
@@ -33,11 +33,9 @@ class EllipsisMenu extends Component {
 			);
 		};
 
-		// @todo Make all children rendered by render props so Dropdown args can be passed?
+		const renderMenu = renderContentArgs => (
-		const renderContent = renderContentArgs => (
 			<NavigableMenu className="woocommerce-ellipsis-menu__content">
-				{ children && children }
+				{ renderContent( renderContentArgs ) }
-				{ renderChildren && renderChildren( renderContentArgs ) }
 			</NavigableMenu>
 		);
 
@@ -46,8 +44,8 @@ class EllipsisMenu extends Component {
 				<Dropdown
 					contentClassName="woocommerce-ellipsis-menu__popover"
 					position="bottom left"
-					renderToggle={ renderToggle }
+					renderToggle={ renderEllipsis }
-					renderContent={ renderContent }
+					renderContent={ renderMenu }
 				/>
 			</div>
 		);
@@ -60,13 +58,9 @@ EllipsisMenu.propTypes = {
 	 */
 	label: PropTypes.string.isRequired,
 	/**
-	 * A list of `MenuTitle`/`MenuItem` components
+	 * A function returning `MenuTitle`/`MenuItem` components as a render prop. Arguments from Dropdown passed as function arguments.
 	 */
-	children: PropTypes.node,
+	renderContent: PropTypes.func,
-	/**
-	 * A list of `MenuTitle`/`MenuItem` components as a render prop. Arguments from Dropdown passed as function arguments.
-	 */
-	renderChildren: PropTypes.func,
 };
 
 export default EllipsisMenu;

plugins/woocommerce-admin/packages/components/src/table/index.js

@@ -340,25 +340,29 @@ class TableCard extends Component {
 					),
 				] }
 				menu={
-					showMenu && <EllipsisMenu label={ __( 'Choose which values to display', 'woocommerce-admin' ) }>
+					showMenu && <EllipsisMenu label={ __( 'Choose which values to display', 'woocommerce-admin' ) }
-						<MenuTitle>{ __( 'Columns:', 'woocommerce-admin' ) }</MenuTitle>
+						renderContent={ () => (
-						{ allHeaders.map( ( { key, label, required } ) => {
+							<Fragment>
-							if ( required ) {
+								<MenuTitle>{ __( 'Columns:', 'woocommerce-admin' ) }</MenuTitle>
-								return null;
+								{ allHeaders.map( ( { key, label, required } ) => {
-							}
+									if ( required ) {
-							return (
+										return null;
-								<MenuItem
+									}
-									checked={ showCols.includes( key ) }
+									return (
-									isCheckbox
+										<MenuItem
-									isClickable
+											checked={ showCols.includes( key ) }
-									key={ key }
+											isCheckbox
-									onInvoke={ this.onColumnToggle( key ) }
+											isClickable
-								>
+											key={ key }
-									{ label }
+											onInvoke={ this.onColumnToggle( key ) }
-								</MenuItem>
+										>
-							);
+											{ label }
-						} ) }
+										</MenuItem>
-					</EllipsisMenu>
+									);
+								} ) }
+							</Fragment>
+						) }
+					/>
 				}
 			>
 				{ isLoading ? (