woocommerce/plugins/woocommerce-admin/client/components/split-button/index.js

124 lines
2.7 KiB
JavaScript

/**
* External dependencies
*
* @format
*/
import { Button, IconButton, Dropdown, NavigableMenu } from '@wordpress/components';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { noop } from 'lodash';
/**
* Internal dependencies
*/
import './style.scss';
const SplitButton = ( {
isPrimary,
mainIcon,
mainLabel,
onClick,
menuLabel,
controls,
className,
} ) => {
if ( ! controls || ! controls.length ) {
return null;
}
const MainButtonComponent = ( mainIcon && IconButton ) || Button;
const classes = classnames( 'woocommerce-split-button', className, {
'is-primary': isPrimary,
'has-label': mainLabel,
} );
return (
<div className={ classes }>
<MainButtonComponent
icon={ mainIcon }
className="woocommerce-split-button__main-action"
onClick={ onClick }
>
{ mainLabel }
</MainButtonComponent>
<Dropdown
className="woocommerce-split-button__menu"
position="bottom left"
contentClassName="woocommerce-split-button__menu-popover"
expandOnMobile
headerTitle={ menuLabel }
renderToggle={ ( { isOpen, onToggle } ) => {
return (
<IconButton
icon={ isOpen ? 'arrow-up' : 'arrow-down' }
className={ classnames( 'woocommerce-split-button__menu-toggle', {
'is-active': isOpen,
} ) }
onClick={ onToggle }
aria-haspopup="true"
aria-expanded={ isOpen }
label={ menuLabel }
tooltip={ menuLabel }
/>
);
} }
renderContent={ ( { onClose } ) => {
const renderControl = ( control, index ) => {
const ButtonComponent = ( control.icon && IconButton ) || Button;
return (
<ButtonComponent
key={ index }
onClick={ event => {
event.stopPropagation();
onClose();
if ( control.onClick ) {
control.onClick();
}
} }
className="woocommerce-split-button__menu-item"
icon={ control.icon || '' }
role="menuitem"
>
{ control.label }
</ButtonComponent>
);
};
return (
<NavigableMenu
className="woocommerce-split-button__menu-wrapper"
role="menu"
aria-label={ menuLabel }
>
{ controls.map( renderControl ) }
</NavigableMenu>
);
} }
/>
</div>
);
};
SplitButton.propTypes = {
isPrimary: PropTypes.bool,
mainIcon: PropTypes.node,
mainLabel: PropTypes.string,
onClick: PropTypes.func,
menuLabel: PropTypes.string,
controls: PropTypes.arrayOf(
PropTypes.shape( {
icon: PropTypes.node,
label: PropTypes.string,
onClick: PropTypes.func,
} )
).isRequired,
className: PropTypes.string,
};
SplitButton.defaultProps = {
isPrimary: false,
onClick: noop,
};
export default SplitButton;