woocommerce/plugins/woocommerce-admin/client/components/ellipsis-menu/index.js

62 lines
1.3 KiB
JavaScript
Raw Normal View History

/** @format */
/**
* External dependencies
*/
import { Component } from '@wordpress/element';
import classnames from 'classnames';
import { IconButton, Dropdown, NavigableMenu } from '@wordpress/components';
import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
import './style.scss';
class EllipsisMenu extends Component {
render() {
const { children, label } = this.props;
if ( ! children ) {
return null;
}
const renderToggle = ( { onToggle, isOpen } ) => {
const toggleClassname = classnames( 'woocommerce-ellipsis-menu__toggle', {
'is-opened': isOpen,
} );
return (
<IconButton
className={ toggleClassname }
onClick={ onToggle }
icon="ellipsis"
label={ label }
aria-expanded={ isOpen }
/>
);
};
const renderContent = () => (
<NavigableMenu className="woocommerce-ellipsis-menu__content">{ children }</NavigableMenu>
);
return (
<div className="woocommerce-ellipsis-menu">
<Dropdown
contentClassName="woocommerce-ellipsis-menu__popover"
position="bottom left"
renderToggle={ renderToggle }
renderContent={ renderContent }
/>
</div>
);
}
}
EllipsisMenu.propTypes = {
label: PropTypes.string.isRequired,
};
export { EllipsisMenu };
export { default as MenuItem } from './menu-item';
export { default as MenuTitle } from './menu-title';