71 lines
1.9 KiB
JavaScript
71 lines
1.9 KiB
JavaScript
|
/** @format */
|
||
|
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import { __ } from '@wordpress/i18n';
|
||
|
|
import { Component, Fragment } from '@wordpress/element';
|
||
|
|
import { TabPanel } from '@wordpress/components';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import { Link } from 'react-router-dom';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Internal dependencies
|
||
|
|
*/
|
||
|
|
import PresetPeriods from './preset-periods';
|
||
|
|
import ComparePeriods from './compare-periods';
|
||
|
|
|
||
|
|
class DatePickerContent extends Component {
|
||
|
|
render() {
|
||
|
|
const { period, compare, onSelect, onClose, getUpdatePath } = this.props;
|
||
|
|
return (
|
||
|
|
<Fragment>
|
||
|
|
<h3 className="woocommerce-date-picker__text">{ __( 'select a date range', 'woo-dash' ) }</h3>
|
||
|
|
<TabPanel
|
||
|
|
tabs={ [
|
||
|
|
{
|
||
|
|
name: 'period',
|
||
|
|
title: __( 'Presets', 'woo-dash' ),
|
||
|
|
className: 'woocommerce-date-picker__tab',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'custom',
|
||
|
|
title: __( 'Custom', 'woo-dash' ),
|
||
|
|
className: 'woocommerce-date-picker__tab',
|
||
|
|
},
|
||
|
|
] }
|
||
|
|
className="woocommerce-date-picker__tabs"
|
||
|
|
activeClass="is-active"
|
||
|
|
>
|
||
|
|
{ selectedTab => (
|
||
|
|
<Fragment>
|
||
|
|
{ selectedTab === 'period' && (
|
||
|
|
<PresetPeriods onSelect={ onSelect } period={ period } />
|
||
|
|
) }
|
||
|
|
{ selectedTab === 'custom' && <div>Custom Date Picker Goes here</div> }
|
||
|
|
<h3 className="woocommerce-date-picker__text">{ __( 'compare to', 'woo-dash' ) }</h3>
|
||
|
|
<ComparePeriods onSelect={ onSelect } compare={ compare } />
|
||
|
|
<Link
|
||
|
|
className="woocommerce-date-picker__update-btn"
|
||
|
|
to={ getUpdatePath( selectedTab ) }
|
||
|
|
onClick={ onClose }
|
||
|
|
>
|
||
|
|
{ __( 'Update', 'woo-dash' ) }
|
||
|
|
</Link>
|
||
|
|
</Fragment>
|
||
|
|
) }
|
||
|
|
</TabPanel>
|
||
|
|
</Fragment>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
DatePickerContent.propTypes = {
|
||
|
|
period: PropTypes.string.isRequired,
|
||
|
|
compare: PropTypes.string.isRequired,
|
||
|
|
onSelect: PropTypes.func.isRequired,
|
||
|
|
onClose: PropTypes.func.isRequired,
|
||
|
|
getUpdatePath: PropTypes.func.isRequired,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default DatePickerContent;
|