109 lines
2.9 KiB
JavaScript
109 lines
2.9 KiB
JavaScript
/** @format */
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import { Component } from '@wordpress/element';
|
|
import { Button, Dropdown } from '@wordpress/components';
|
|
import { stringify as stringifyQueryObject } from 'qs';
|
|
import moment from 'moment';
|
|
import PropTypes from 'prop-types';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
import DatePickerContent from './content';
|
|
import { getDateValues } from 'lib/date-utils';
|
|
|
|
class DatePicker extends Component {
|
|
constructor( props ) {
|
|
super( props );
|
|
this.state = this.addQueryDefaults( props.query );
|
|
this.select = this.select.bind( this );
|
|
this.getUpdatePath = this.getUpdatePath.bind( this );
|
|
}
|
|
|
|
addQueryDefaults( { period, compare, start, end } ) {
|
|
// @TODO: What are the default `start` and `end` for custom dates, if at all?
|
|
return {
|
|
period: period || 'today',
|
|
compare: compare || 'previous_period',
|
|
start: start ? moment( start ) : undefined,
|
|
end: end ? moment( end ) : undefined,
|
|
};
|
|
}
|
|
|
|
select( key, value ) {
|
|
this.setState( { [ key ]: value } );
|
|
}
|
|
|
|
getUpdatePath( selectedTab ) {
|
|
const { path, query } = this.props;
|
|
const { period, compare, start, end, ...otherQueries } = query; // eslint-disable-line no-unused-vars
|
|
const data = {
|
|
period: 'custom' === selectedTab ? 'custom' : this.state.period,
|
|
compare: this.state.compare,
|
|
};
|
|
// `start` and `end` would be added as a result of the custom date picker. Adding here as an example
|
|
if ( 'custom' === selectedTab ) {
|
|
Object.assign( data, { start: '2018-04-15', end: '2018-04-29' } );
|
|
}
|
|
const queryString = stringifyQueryObject( Object.assign( otherQueries, data ) );
|
|
return `${ path }?${ queryString }`;
|
|
}
|
|
|
|
getButtonLabel() {
|
|
const queryWithDefaults = this.addQueryDefaults( this.props.query );
|
|
const { primary, secondary } = getDateValues( queryWithDefaults );
|
|
return (
|
|
<div className="woocommerce-date-picker__toggle-label">
|
|
<p>
|
|
{ primary.label } ({ primary.range })
|
|
</p>
|
|
<p>
|
|
vs. { secondary.label } ({ secondary.range })
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const { period, compare, start, end } = this.state;
|
|
return (
|
|
<Dropdown
|
|
className="woocommerce-date-picker"
|
|
contentClassName="woocommerce-date-picker__content"
|
|
position="bottom"
|
|
expandOnMobile
|
|
renderToggle={ ( { isOpen, onToggle } ) => (
|
|
<Button
|
|
className="woocommerce-date-picker__toggle"
|
|
onClick={ onToggle }
|
|
aria-expanded={ isOpen }
|
|
>
|
|
{ this.getButtonLabel() }
|
|
</Button>
|
|
) }
|
|
renderContent={ ( { onClose } ) => (
|
|
<DatePickerContent
|
|
period={ period }
|
|
compare={ compare }
|
|
start={ start }
|
|
end={ end }
|
|
onSelect={ this.select }
|
|
onClose={ onClose }
|
|
getUpdatePath={ this.getUpdatePath }
|
|
/>
|
|
) }
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
DatePicker.propTypes = {
|
|
path: PropTypes.string.isRequired,
|
|
query: PropTypes.object.isRequired,
|
|
};
|
|
|
|
export default DatePicker;
|