woocommerce/plugins/woocommerce-admin/client/dashboard/customizable.js

231 lines
6.3 KiB
JavaScript
Raw Normal View History

/** @format */
/**
* External dependencies
*/
2019-04-30 00:35:37 +00:00
import { __, sprintf } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
2019-04-30 00:35:37 +00:00
import { partial } from 'lodash';
import { IconButton, Icon, Dropdown, Button } from '@wordpress/components';
import { withDispatch } from '@wordpress/data';
/**
* WooCommerce dependencies
*/
import { H, ReportFilters } from '@woocommerce/components';
/**
* Internal dependencies
*/
import './style.scss';
import defaultSections from './default-sections';
import Section from './section';
import withSelect from 'wc-api/with-select';
class CustomizableDashboard extends Component {
constructor( props ) {
super( props );
this.state = {
sections: this.mergeSectionsWithDefaults( props.userPrefSections ),
};
2019-04-30 00:35:37 +00:00
this.onMove = this.onMove.bind( this );
this.updateSection = this.updateSection.bind( this );
}
mergeSectionsWithDefaults( prefSections ) {
if ( ! prefSections || prefSections.length === 0 ) {
return defaultSections;
}
const defaultKeys = defaultSections.map( section => section.key );
const prefKeys = prefSections.map( section => section.key );
const keys = new Set( [ ...prefKeys, ...defaultKeys ] );
const sections = [];
keys.forEach( key => {
const defaultSection = defaultSections.find( section => section.key === key );
if ( ! defaultSection ) {
return;
}
const prefSection = prefSections.find( section => section.key === key );
sections.push( {
...defaultSection,
...prefSection,
} );
} );
return sections;
}
updateSections( newSections ) {
this.setState( { sections: newSections } );
this.props.updateCurrentUserData( { dashboard_sections: newSections } );
}
updateSection( updatedKey, newSettings ) {
const newSections = this.state.sections.map( section => {
if ( section.key === updatedKey ) {
return {
...section,
...newSettings,
};
}
return section;
} );
this.updateSections( newSections );
}
onChangeHiddenBlocks( updatedKey ) {
return updatedHiddenBlocks => {
this.updateSection( updatedKey, { hiddenBlocks: updatedHiddenBlocks } );
};
}
onSectionTitleUpdate( updatedKey ) {
return updatedTitle => {
this.updateSection( updatedKey, { title: updatedTitle } );
};
}
2019-04-30 00:35:37 +00:00
toggleVisibility( key, onToggle ) {
return () => {
if ( onToggle ) {
// Close the dropdown before setting state so an action is not performed on an unmounted component.
onToggle();
}
// When toggling visibility, place section at the end of the array.
const sections = [ ...this.state.sections ];
const index = sections.findIndex( s => key === s.key );
const toggledSection = sections.splice( index, 1 ).shift();
toggledSection.isVisible = ! toggledSection.isVisible;
sections.push( toggledSection );
this.updateSections( sections );
2019-04-30 00:35:37 +00:00
};
}
onMove( index, change ) {
const sections = [ ...this.state.sections ];
const movedSection = sections.splice( index, 1 ).shift();
const newIndex = index + change;
// Figure out the index of the skipped section.
const nextJumpedSectionIndex = change < 0 ? newIndex : newIndex - 1;
if (
sections[ nextJumpedSectionIndex ].isVisible || // Is the skipped section visible?
index === 0 || // Will this be the first element?
index === sections.length - 1 // Will this be the last element?
) {
// Yes, lets insert.
sections.splice( newIndex, 0, movedSection );
this.updateSections( sections );
} else {
// No, lets try the next one.
this.onMove( index, change + change );
}
2019-04-30 00:35:37 +00:00
}
renderAddMore() {
const { sections } = this.state;
const hiddenSections = sections.filter( section => false === section.isVisible );
if ( 0 === hiddenSections.length ) {
return null;
}
return (
<Dropdown
position="top center"
className="woocommerce-dashboard-section__add-more"
renderToggle={ ( { onToggle, isOpen } ) => (
<IconButton
onClick={ onToggle }
icon="plus-alt"
title={ __( 'Add more sections', 'woocommerce-admin' ) }
aria-expanded={ isOpen }
/>
) }
renderContent={ ( { onToggle } ) => (
<Fragment>
<H>{ __( 'Dashboard Sections', 'woocommerce-admin' ) }</H>
<div className="woocommerce-dashboard-section__add-more-choices">
{ hiddenSections.map( section => {
return (
<Button
key={ section.key }
onClick={ this.toggleVisibility( section.key, onToggle ) }
className="woocommerce-dashboard-section__add-more-btn"
title={ sprintf( __( 'Add %s section', 'woocommerce-admin' ), section.title ) }
>
<Icon icon={ section.icon } size={ 30 } />
<span className="woocommerce-dashboard-section__add-more-btn-title">
{ section.title }
</span>
</Button>
);
} ) }
</div>
</Fragment>
) }
/>
);
}
render() {
const { query, path } = this.props;
const { sections } = this.state;
const visibleSectionKeys = sections
.filter( section => section.isVisible )
.map( section => section.key );
return (
<Fragment>
<ReportFilters query={ query } path={ path } />
{ sections.map( ( section, index ) => {
if ( section.isVisible ) {
return (
<Section
component={ section.component }
hiddenBlocks={ section.hiddenBlocks }
key={ section.key }
onChangeHiddenBlocks={ this.onChangeHiddenBlocks( section.key ) }
onTitleUpdate={ this.onSectionTitleUpdate( section.key ) }
path={ path }
query={ query }
title={ section.title }
onMove={ partial( this.onMove, index ) }
onRemove={ this.toggleVisibility( section.key ) }
isFirst={ section.key === visibleSectionKeys[ 0 ] }
isLast={ section.key === visibleSectionKeys[ visibleSectionKeys.length - 1 ] }
/>
);
}
return null;
} ) }
2019-04-30 00:35:37 +00:00
{ this.renderAddMore() }
</Fragment>
);
}
}
export default compose(
withSelect( select => {
const { getCurrentUserData } = select( 'wc-api' );
const userData = getCurrentUserData();
return {
userPrefSections: userData.dashboard_sections,
};
} ),
withDispatch( dispatch => {
const { updateCurrentUserData } = dispatch( 'wc-api' );
return {
updateCurrentUserData,
};
} )
)( CustomizableDashboard );