Merge pull request woocommerce/woocommerce-admin#65 from woocommerce/add/date-picker-layout
Date Picker: Layout component, presets, and data flow
This commit is contained in:
Paul Sealock
GitHub
commit
c25b8ad991
|
|
@ -9,47 +9,14 @@ import { Component, Fragment } from '@wordpress/element';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import Header from 'components/header';
|
||||
import SegmentedSelection from 'components/segmented-selection';
|
||||
import DatePicker from 'components/date-picker';
|
||||
|
||||
export default class extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
numbers: [],
|
||||
};
|
||||
this.onSelect = this.onSelect.bind( this );
|
||||
}
|
||||
|
||||
onSelect( key, value ) {
|
||||
this.setState( { [ key ]: value } );
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<Header sections={ [ __( 'Analytics', 'woo-dash' ) ] } />
|
||||
<div
|
||||
style={ {
|
||||
width: '300px',
|
||||
padding: '20px',
|
||||
border: '1px solid lightgray',
|
||||
backgroundColor: 'white',
|
||||
} }
|
||||
>
|
||||
<h2>Example</h2>
|
||||
<SegmentedSelection
|
||||
options={ [
|
||||
{ value: 'one', label: 'One' },
|
||||
{ value: 'two', label: 'Two' },
|
||||
{ value: 'three', label: 'Three' },
|
||||
{ value: 'four', label: 'Four' },
|
||||
] }
|
||||
selected={ this.state.numbers }
|
||||
onSelect={ this.onSelect }
|
||||
legend="Select a number"
|
||||
name="numbers"
|
||||
/>
|
||||
</div>
|
||||
<DatePicker period="last_week" compare="previous_year" />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
Date Picker (Work in Progress)
|
||||
===
|
||||
|
||||
Select a range of dates or single dates
|
||||
|
||||
## Usage
|
||||
|
||||
```jsx
|
||||
<DatePicker period="last_week" compare="previous_year" />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
Required props are marked with `*`.
|
||||
|
||||
Name | Type | Default | Description
|
||||
--- | --- | --- | ---
|
||||
`period`* | `string` | none | Selected period. `today`, `yesterday`, `week`, `last_week`, `month`, `last_month`, `quarter`, `last_quarter`, `year`, `last_year`, `custom`
|
||||
`compare`* | `string` | none | Selected period to compare. `previous_period`, `previous_year`
|
||||
`start` | `string` | none | If a `custom` period is selected, this is the start date
|
||||
`end` | `string` | none | If a `custom` period is selected, this is the end date
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
/** @format */
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Component, Fragment } from '@wordpress/element';
|
||||
import { Button, TabPanel } from '@wordpress/components';
|
||||
import { partial } from 'lodash';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import SegmentedSelection from 'components/segmented-selection';
|
||||
import PresetPeriods from './preset-periods';
|
||||
|
||||
class DatePicker extends Component {
|
||||
constructor( props ) {
|
||||
super( props );
|
||||
/**
|
||||
* Getting initial data from props here, but they will come from the url
|
||||
* Defaults can be added here
|
||||
*/
|
||||
const { period, compare, start, end } = props;
|
||||
const state = {
|
||||
period,
|
||||
compare: compare,
|
||||
};
|
||||
if ( 'custom' === period ) {
|
||||
Object.assign( state, { start, end } );
|
||||
}
|
||||
this.state = state;
|
||||
this.update = this.update.bind( this );
|
||||
this.select = this.select.bind( this );
|
||||
}
|
||||
|
||||
select( key, value ) {
|
||||
this.setState( { [ key ]: value } );
|
||||
}
|
||||
|
||||
update( selectedTab ) {
|
||||
const data = {
|
||||
period: 'custom' === selectedTab ? 'custom' : this.state.period,
|
||||
compare: this.state.compare,
|
||||
};
|
||||
// This would be set as a result of the custom date picker, placing here as an example
|
||||
if ( 'custom' === selectedTab ) {
|
||||
Object.assign( data, { start: 'a date', end: 'another date' } );
|
||||
}
|
||||
console.log( data );
|
||||
}
|
||||
|
||||
render() {
|
||||
const { period, compare } = this.state;
|
||||
const compareToString = __( 'compare to', 'woo-dash' );
|
||||
return (
|
||||
<div className="woo-dash__datepicker">
|
||||
<h3 className="woo-dash__datepicker-text">{ __( 'select a date range', 'woo-dash' ) }</h3>
|
||||
<TabPanel
|
||||
tabs={ [
|
||||
{
|
||||
name: 'period',
|
||||
title: __( 'Presets', 'woo-dash' ),
|
||||
className: 'woo-dash__datepicker-tab',
|
||||
},
|
||||
{
|
||||
name: 'custom',
|
||||
title: __( 'Custom', 'woo-dash' ),
|
||||
className: 'woo-dash__datepicker-tab',
|
||||
},
|
||||
] }
|
||||
className="woo-dash__datepicker-tabs"
|
||||
activeClass="is-active"
|
||||
>
|
||||
{ selectedTab => (
|
||||
<Fragment>
|
||||
{ selectedTab === 'period' && (
|
||||
<PresetPeriods onSelect={ this.select } period={ period } />
|
||||
) }
|
||||
{ selectedTab === 'custom' && <div>Custom Date Picker Goes here</div> }
|
||||
<h3 className="woo-dash__datepicker-text">{ compareToString }</h3>
|
||||
<SegmentedSelection
|
||||
options={ [
|
||||
{ value: 'previous_period', label: __( 'Previous Period', 'woo-dash' ) },
|
||||
{ value: 'previous_year', label: __( 'Previous Year', 'woo-dash' ) },
|
||||
] }
|
||||
selected={ compare }
|
||||
onSelect={ this.select }
|
||||
name="compare"
|
||||
legend={ compareToString }
|
||||
/>
|
||||
<Button
|
||||
className="woo-dash__datepicker-update-btn"
|
||||
onClick={ partial( this.update, selectedTab ) }
|
||||
>
|
||||
{ __( 'Update', 'woo-dash' ) }
|
||||
</Button>
|
||||
</Fragment>
|
||||
) }
|
||||
</TabPanel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DatePicker;
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/** @format */
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Component } from '@wordpress/element';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import SegmentedSelection from 'components/segmented-selection';
|
||||
|
||||
class PresetPeriods extends Component {
|
||||
render() {
|
||||
const { onSelect, period } = this.props;
|
||||
return (
|
||||
<SegmentedSelection
|
||||
options={ [
|
||||
{ value: 'today', label: __( 'Today', 'woo-dash' ) },
|
||||
{ value: 'yesterday', label: __( 'Yesterday', 'woo-dash' ) },
|
||||
{ value: 'week', label: __( 'Week to Date', 'woo-dash' ) },
|
||||
{ value: 'last_week', label: __( 'Last Week', 'woo-dash' ) },
|
||||
{ value: 'month', label: __( 'Month to Date', 'woo-dash' ) },
|
||||
{ value: 'last_month', label: __( 'Last Month', 'woo-dash' ) },
|
||||
{ value: 'quarter', label: __( 'Quarter to Date', 'woo-dash' ) },
|
||||
{ value: 'last_quarter', label: __( 'Last Quarter', 'woo-dash' ) },
|
||||
{ value: 'year', label: __( 'Year to Date', 'woo-dash' ) },
|
||||
{ value: 'last_year', label: __( 'Last Year', 'woo-dash' ) },
|
||||
] }
|
||||
selected={ period }
|
||||
onSelect={ onSelect }
|
||||
name="period"
|
||||
legend={ __( 'select a preset period', 'woo-dash' ) }
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PresetPeriods;
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
/** @format */
|
||||
|
||||
.woo-dash__datepicker {
|
||||
width: 350px;
|
||||
padding: 1em 0;
|
||||
border: 1px solid $gray;
|
||||
background-color: $white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > * {
|
||||
margin: 0 0 1em 0;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woo-dash__datepicker-tabs {
|
||||
.components-tab-panel__tabs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-radius: 5px;
|
||||
margin: 0 1em 1em 1em;
|
||||
}
|
||||
|
||||
.components-tab-panel__tab-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > * {
|
||||
margin: 0 0 1em 0;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woo-dash__datepicker-tab {
|
||||
outline: none;
|
||||
border: 1px solid $black;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
border-radius: 5px 0 0 5px;
|
||||
background-color: transparent;
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid lightseagreen;
|
||||
}
|
||||
}
|
||||
|
||||
.woo-dash__datepicker-update-btn {
|
||||
border: 1px solid $gray;
|
||||
background-color: transparent;
|
||||
align-self: center;
|
||||
padding: 0.5em;
|
||||
width: 50%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.woo-dash__datepicker-text {
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: $gray-text;
|
||||
}
|
||||
|
|
@ -22,7 +22,6 @@ const Numbers = () => {
|
|||
/>
|
||||
);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Props
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
width: 100%;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
display: grid;
|
||||
border: 1px solid $gray;
|
||||
border-top: 1px solid $gray;
|
||||
border-bottom: 1px solid $gray;
|
||||
grid-gap: 1px;
|
||||
background-color: $gray;
|
||||
}
|
||||
|
|
@ -14,6 +15,7 @@
|
|||
padding: 1em;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.woo-dash__segmented-selection-input {
|
||||
|
|
|
|||
|
|
@ -13,3 +13,6 @@ $gray-text: $gray-darken-40;
|
|||
$gray-light-10: lighten($gray, 10%);
|
||||
|
||||
$wp-admin-background: #f1f1f1;
|
||||
|
||||
// Black
|
||||
$black: #24292d; // same as wp-admin sidebar
|
||||
|
|
|
|||
Loading…
Reference in New Issue