134 lines
3.0 KiB
JavaScript
134 lines
3.0 KiB
JavaScript
|
/** @format */
|
||
|
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { addFilter } from '@wordpress/hooks';
|
||
|
|
import { Component, Fragment } from '@wordpress/element';
|
||
|
|
import { TextControl } from '@wordpress/components';
|
||
|
|
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>
|
||
|
|
) ) }
|
||
|
|
<div className="woocommerce-ellipsis-menu__item">
|
||
|
|
<TextControl
|
||
|
|
label={ __( 'Section Title', 'woocommerce-admin' ) }
|
||
|
|
onBlur={ onTitleBlur }
|
||
|
|
onChange={ onTitleChange }
|
||
|
|
required
|
||
|
|
value={ titleInput }
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<Controls
|
||
|
|
onToggle={ onToggle }
|
||
|
|
onMove={ onMove }
|
||
|
|
onRemove={ onRemove }
|
||
|
|
isFirst={ isFirst }
|
||
|
|
isLast={ isLast }
|
||
|
|
/>
|
||
|
|
</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: [],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
} );
|