woocommerce/plugins/woocommerce-admin/client/components/date-picker/index.js

125 lines
3.3 KiB
JavaScript
Raw Normal View History

/** @format */
/**
* External dependencies
*/
2018-07-12 01:43:33 +00:00
import { Component } from '@wordpress/element';
2018-06-29 00:34:17 +00:00
import { __ } from '@wordpress/i18n';
import { Dropdown } from '@wordpress/components';
import { stringify as stringifyQueryObject } from 'qs';
import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
import './style.scss';
2018-06-29 00:34:17 +00:00
import DropdownButton from 'components/dropdown-button';
import DatePickerContent from './content';
import { getCurrentDates, getDateParamsFromQuery, isoDateFormat } from 'lib/date';
class DatePicker extends Component {
constructor( props ) {
super( props );
this.state = getDateParamsFromQuery( props.query );
this.select = this.select.bind( this );
this.getUpdatePath = this.getUpdatePath.bind( this );
2018-05-28 10:55:19 +00:00
this.isValidSelection = this.isValidSelection.bind( this );
2018-07-22 23:43:21 +00:00
this.resetCustomValues = this.resetCustomValues.bind( this );
2018-05-28 10:55:19 +00:00
}
// @TODO change this to `getDerivedStateFromProps` in React 16.4
UNSAFE_componentWillReceiveProps( nextProps ) {
this.setState( getDateParamsFromQuery( nextProps.query ) );
}
2018-05-28 10:55:19 +00:00
select( update ) {
this.setState( update );
}
getOtherQueries( query ) {
const { period, compare, after, before, ...otherQueries } = query; // eslint-disable-line no-unused-vars
2018-05-28 10:55:19 +00:00
return otherQueries;
}
getUpdatePath( selectedTab ) {
const { path, query } = this.props;
2018-05-28 10:55:19 +00:00
const otherQueries = this.getOtherQueries( query );
const { period, compare, after, before } = this.state;
const data = {
2018-05-28 10:55:19 +00:00
period: 'custom' === selectedTab ? 'custom' : period,
compare,
};
if ( 'custom' === selectedTab ) {
2018-05-28 10:55:19 +00:00
Object.assign( data, {
after: after ? after.format( isoDateFormat ) : '',
before: before ? before.format( isoDateFormat ) : '',
2018-05-28 10:55:19 +00:00
} );
}
const queryString = stringifyQueryObject( Object.assign( otherQueries, data ) );
return `${ path }?${ queryString }`;
}
getButtonLabel() {
const { primary, secondary } = getCurrentDates( this.props.query );
2018-06-29 00:34:17 +00:00
return [
`${ primary.label } (${ primary.range })`,
`${ __( 'vs.', 'wc-admin' ) } ${ secondary.label } (${ secondary.range })`,
2018-06-29 00:34:17 +00:00
];
}
2018-05-28 10:55:19 +00:00
isValidSelection( selectedTab ) {
const { compare, after, before } = this.state;
2018-05-28 10:55:19 +00:00
if ( 'custom' === selectedTab ) {
return compare && after && before;
2018-05-28 10:55:19 +00:00
}
return true;
}
2018-07-22 23:43:21 +00:00
resetCustomValues() {
this.setState( {
after: null,
before: null,
} );
}
render() {
const { period, compare, after, before } = this.state;
return (
2018-07-12 01:43:33 +00:00
<div className="woocommerce-date-picker">
<p>{ __( 'Date Range', 'wc-admin' ) }:</p>
2018-06-29 00:34:17 +00:00
<Dropdown
contentClassName="woocommerce-date-picker__content"
position="bottom"
expandOnMobile
renderToggle={ ( { isOpen, onToggle } ) => (
<DropdownButton
onClick={ onToggle }
isOpen={ isOpen }
labels={ this.getButtonLabel() }
/>
) }
renderContent={ ( { onClose } ) => (
<DatePickerContent
period={ period }
compare={ compare }
after={ after }
before={ before }
onSelect={ this.select }
onClose={ onClose }
getUpdatePath={ this.getUpdatePath }
isValidSelection={ this.isValidSelection }
2018-07-22 23:43:21 +00:00
resetCustomValues={ this.resetCustomValues }
2018-06-29 00:34:17 +00:00
/>
) }
/>
2018-07-12 01:43:33 +00:00
</div>
);
}
}
DatePicker.propTypes = {
path: PropTypes.string.isRequired,
query: PropTypes.object.isRequired,
};
export default DatePicker;