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
+				label="Demo Menu"
+				renderContent={ () => (
+					<Fragment>
 						<MenuTitle>Test</MenuTitle>
 						<MenuItem onInvoke={ noop }>Test</MenuItem>
-			</EllipsisMenu>
+					</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,11 +1,14 @@
 ```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"
+		renderContent={ ( { onToggle } )=> {
+			return (
+				<div>
 					<MenuTitle>Display Stats</MenuTitle>
 					<MenuItem onInvoke={ () => setState( { showCustomers: ! showCustomers } )  }>
 						<ToggleControl
@@ -21,6 +24,17 @@ const MyEllipsisMenu = withState( {
 							onChange={ () => setState( { showOrders: ! showOrders } ) }
 						/>
 					</MenuItem>
-	</EllipsisMenu>
+					<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;
-		if ( ! children && ! renderChildren ) {
+		const { label, renderContent } = this.props;
+		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 renderContent = renderContentArgs => (
+		const renderMenu = renderContentArgs => (
 			<NavigableMenu className="woocommerce-ellipsis-menu__content">
-				{ children && children }
-				{ renderChildren && renderChildren( renderContentArgs ) }
+				{ renderContent( renderContentArgs ) }
 			</NavigableMenu>
 		);
 
@@ -46,8 +44,8 @@ class EllipsisMenu extends Component {
 				<Dropdown
 					contentClassName="woocommerce-ellipsis-menu__popover"
 					position="bottom left"
-					renderToggle={ renderToggle }
-					renderContent={ renderContent }
+					renderToggle={ renderEllipsis }
+					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,
-	/**
-	 * A list of `MenuTitle`/`MenuItem` components as a render prop. Arguments from Dropdown passed as function arguments.
-	 */
-	renderChildren: PropTypes.func,
+	renderContent: PropTypes.func,
 };
 
 export default EllipsisMenu;

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

@@ -340,7 +340,9 @@ 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' ) }
+						renderContent={ () => (
+							<Fragment>
 								<MenuTitle>{ __( 'Columns:', 'woocommerce-admin' ) }</MenuTitle>
 								{ allHeaders.map( ( { key, label, required } ) => {
 									if ( required ) {
@@ -358,7 +360,9 @@ class TableCard extends Component {
 										</MenuItem>
 									);
 								} ) }
-					</EllipsisMenu>
+							</Fragment>
+						) }
+					/>
 				}
 			>
 				{ isLoading ? (