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

150 lines
2.9 KiB
JavaScript
Raw Normal View History

2019-05-06 04:39:10 +00:00
/**
* 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';
2019-05-06 04:39:10 +00:00
/**
* 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',
},
2019-05-06 04:39:10 +00:00
];
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 ) => (
2019-05-06 04:39:10 +00:00
<MenuItem
checked={ ! hiddenBlocks.includes( item.key ) }
isCheckbox
isClickable
key={ item.key }
onInvoke={ () =>
onToggleHiddenBlock( item.key )()
}
2019-05-06 04:39:10 +00:00
>
{ 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 ) => {
2019-05-06 04:39:10 +00:00
return hiddenBlocks.includes( item.key ) ? null : (
<item.component
key={ item.key }
config={ config }
/>
2019-05-06 04:39:10 +00:00
);
} ) }
</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: [],
},
];
}
);