EllipsisMenu: Refactor to expose renderContent args
This commit is contained in:
Paul Sealock
parent
b90f5ecb98
commit
e012af7add
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -235,10 +235,15 @@ class OrdersPanel extends Component {
|
|||
}
|
||||
|
||||
const menu = (
|
||||
<EllipsisMenu label="Demo Menu">
|
||||
<MenuTitle>Test</MenuTitle>
|
||||
<MenuItem onInvoke={ noop }>Test</MenuItem>
|
||||
</EllipsisMenu>
|
||||
<EllipsisMenu
|
||||
label="Demo Menu"
|
||||
renderContent={ () => (
|
||||
<Fragment>
|
||||
<MenuTitle>Test</MenuTitle>
|
||||
<MenuItem onInvoke={ noop }>Test</MenuItem>
|
||||
</Fragment>
|
||||
) }
|
||||
/>
|
||||
);
|
||||
|
||||
const title =
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<MenuTitle>Display Stats</MenuTitle>
|
||||
<MenuItem onInvoke={ () => setState( { showCustomers: ! showCustomers } ) }>
|
||||
<ToggleControl
|
||||
label="Show Customers"
|
||||
checked={ showCustomers }
|
||||
onChange={ () => setState( { showCustomers: ! showCustomers } ) }
|
||||
/>
|
||||
</MenuItem>
|
||||
<MenuItem onInvoke={ () => setState( { showOrders: ! showOrders } ) }>
|
||||
<ToggleControl
|
||||
label="Show Orders"
|
||||
checked={ showOrders }
|
||||
onChange={ () => setState( { showOrders: ! showOrders } ) }
|
||||
/>
|
||||
</MenuItem>
|
||||
</EllipsisMenu>
|
||||
<EllipsisMenu label="Choose which analytics to display"
|
||||
renderContent={ ( { onToggle } )=> {
|
||||
return (
|
||||
<div>
|
||||
<MenuTitle>Display Stats</MenuTitle>
|
||||
<MenuItem onInvoke={ () => setState( { showCustomers: ! showCustomers } ) }>
|
||||
<ToggleControl
|
||||
label="Show Customers"
|
||||
checked={ showCustomers }
|
||||
onChange={ () => setState( { showCustomers: ! showCustomers } ) }
|
||||
/>
|
||||
</MenuItem>
|
||||
<MenuItem onInvoke={ () => setState( { showOrders: ! showOrders } ) }>
|
||||
<ToggleControl
|
||||
label="Show Orders"
|
||||
checked={ showOrders }
|
||||
onChange={ () => setState( { showOrders: ! showOrders } ) }
|
||||
/>
|
||||
</MenuItem>
|
||||
<MenuItem onInvoke={ onToggle }>
|
||||
<Button
|
||||
label="Close menu"
|
||||
onClick={ onToggle }
|
||||
>
|
||||
Close Menu
|
||||
</Button>
|
||||
</MenuItem>
|
||||
</div>
|
||||
);
|
||||
} }
|
||||
/>
|
||||
) );
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -340,25 +340,29 @@ class TableCard extends Component {
|
|||
),
|
||||
] }
|
||||
menu={
|
||||
showMenu && <EllipsisMenu label={ __( 'Choose which values to display', 'woocommerce-admin' ) }>
|
||||
<MenuTitle>{ __( 'Columns:', 'woocommerce-admin' ) }</MenuTitle>
|
||||
{ allHeaders.map( ( { key, label, required } ) => {
|
||||
if ( required ) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<MenuItem
|
||||
checked={ showCols.includes( key ) }
|
||||
isCheckbox
|
||||
isClickable
|
||||
key={ key }
|
||||
onInvoke={ this.onColumnToggle( key ) }
|
||||
>
|
||||
{ label }
|
||||
</MenuItem>
|
||||
);
|
||||
} ) }
|
||||
</EllipsisMenu>
|
||||
showMenu && <EllipsisMenu label={ __( 'Choose which values to display', 'woocommerce-admin' ) }
|
||||
renderContent={ () => (
|
||||
<Fragment>
|
||||
<MenuTitle>{ __( 'Columns:', 'woocommerce-admin' ) }</MenuTitle>
|
||||
{ allHeaders.map( ( { key, label, required } ) => {
|
||||
if ( required ) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<MenuItem
|
||||
checked={ showCols.includes( key ) }
|
||||
isCheckbox
|
||||
isClickable
|
||||
key={ key }
|
||||
onInvoke={ this.onColumnToggle( key ) }
|
||||
>
|
||||
{ label }
|
||||
</MenuItem>
|
||||
);
|
||||
} ) }
|
||||
</Fragment>
|
||||
) }
|
||||
/>
|
||||
}
|
||||
>
|
||||
{ isLoading ? (
|
||||
|
|
|
|||
Loading…
Reference in New Issue