woocommerce/plugins/woocommerce-admin/docs/examples/extensions/dashboard-section/js/index.js

127 lines
2.8 KiB
JavaScript
Raw Normal View History

2019-05-06 04:39:10 +00:00
/** @format */
/**
* External dependencies
*/
import { addFilter } from '@wordpress/hooks';
import { Component, Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
/**
* WooCommerce dependencies
*/
import { EllipsisMenu, MenuTitle, MenuItem, SectionHeader } from '@woocommerce/components';
/**
* Internal dependencies
*/
import UpcomingEvents from './upcoming-events';
import GlobalPrices from './global-prices';
const config = [
{
title: 'Granny Smith',
events: [ { date: '2020-01-02', title: 'The Granny Apple Fair' } ],
},
{
title: 'Golden Delicious',
events: [
{ date: '2020-04-15', title: 'Madrid Manzana Dorada' },
{ date: '2020-05-07', title: 'Golden CO Golden Delicious Day' },
],
},
{
title: 'Gala',
events: [ { date: '2020-08-31', title: 'The Met Gala Pomme' } ],
},
{
title: 'Braeburn',
events: [ { date: '2020-08-18', title: 'Mt. Aoraki Crisper' } ],
},
];
const dashboardItems = [
{ title: 'Upcoming Events', component: UpcomingEvents, key: 'upcoming-events' },
{ title: 'Global Apple Prices', component: GlobalPrices, key: 'global-prices' },
];
class Section extends Component {
renderMenu() {
const {
hiddenBlocks,
onToggleHiddenBlock,
onTitleBlur,
onTitleChange,
titleInput,
onMove,
onRemove,
isFirst,
isLast,
controls: Controls,
} = this.props;
return (
<EllipsisMenu
label={ __( 'Choose Apples', 'woocommerce-admin' ) }
renderContent={ ( { onToggle } ) => (
<Fragment>
<MenuTitle>{ __( 'My Apples', 'woocommerce-admin' ) }</MenuTitle>
{ dashboardItems.map( item => (
<MenuItem
checked={ ! hiddenBlocks.includes( item.key ) }
isCheckbox
isClickable
key={ item.key }
onInvoke={ () => onToggleHiddenBlock( item.key )() }
>
{ item.title }
</MenuItem>
) ) }
<Controls
onToggle={ onToggle }
onMove={ onMove }
onRemove={ onRemove }
isFirst={ isFirst }
isLast={ isLast }
2019-05-22 20:43:45 +00:00
onTitleBlur={ onTitleBlur }
onTitleChange={ onTitleChange }
titleInput={ titleInput }
2019-05-06 04:39:10 +00:00
/>
</Fragment>
) }
/>
);
}
render() {
const { title, hiddenBlocks } = this.props;
return (
<Fragment>
<SectionHeader title={ title } menu={ this.renderMenu() } />
<div className="woocommerce-dashboard__columns">
{ dashboardItems.map( item => {
return hiddenBlocks.includes( item.key ) ? null : (
<item.component key={ item.key } config={ config } />
);
} ) }
</div>
</Fragment>
);
}
}
addFilter( 'woocommerce_dashboard_default_sections', 'plugin-domain', sections => {
return [
...sections,
{
key: 'dashboard-apples',
component: Section,
title: __( 'Apples', 'woocommerce-admin' ),
isVisible: true,
icon: 'carrot',
hiddenBlocks: [],
},
];
} );