Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request woocommerce/woocommerce-admin#142 from woocommerce/fix/datepicker-naming-match-api 

Datepicker: Use api naming before/after
This commit is contained in:
Paul Sealock 2018-07-03 11:17:34 +12:00 committed by GitHub
parent 1a3240b4ec 0a2b71865b
commit 323807c074
4 changed files with 79 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
plugins/woocommerce-admin/client/components/calendar/index.js
View File

@ -34,11 +34,11 @@ class DateRange extends Component {
constructor( props ) {
super( props );
const { start, end } = props;
const { after, before } = props;
this.state = {
focusedInput: START_DATE,
startText: start ? start.format( shortDateFormat ) : '',
endText: end ? end.format( shortDateFormat ) : '',
afterText: after ? after.format( shortDateFormat ) : '',
beforeText: before ? before.format( shortDateFormat ) : '',
};
this.onDatesChange = this.onDatesChange.bind( this );
@ -49,12 +49,12 @@ class DateRange extends Component {
onDatesChange( { startDate, endDate } ) {
this.setState( {
startText: startDate ? startDate.format( shortDateFormat ) : '',
endText: endDate ? endDate.format( shortDateFormat ) : '',
afterText: startDate ? startDate.format( shortDateFormat ) : '',
beforeText: endDate ? endDate.format( shortDateFormat ) : '',
} );
this.props.onSelect( {
start: startDate,
end: endDate,
after: startDate,
before: endDate,
} );
}
@ -66,15 +66,12 @@ class DateRange extends Component {
onInputChange( input, event ) {
const value = event.target.value;
this.setState( { [ input ]: value } );
this.setState( { [ input + 'Text' ]: value } );
const date = toMoment( shortDateFormat, value );
if ( date ) {
const match = input.match( /.*(?=Text)/ );
if ( match ) {
this.props.onSelect( {
[ match[ 0 ] ]: date,
} );
}
this.props.onSelect( {
[ input ]: date,
} );
}
}
@ -95,22 +92,22 @@ class DateRange extends Component {
}
render() {
const { focusedInput, startText, endText } = this.state;
const { start, end } = this.props;
const { focusedInput, afterText, beforeText } = this.state;
const { after, before } = this.props;
const isOutsideRange = this.getOutsideRange();
const isMobile = isMobileViewport();
return (
<Fragment>
<div className="woocommerce-date-picker__date-inputs">
<input
value={ startText }
value={ afterText }
type="text"
onChange={ partial( this.onInputChange, 'startText' ) }
onChange={ partial( this.onInputChange, 'after' ) }
aria-label={ __( 'Start Date', 'woo-dash' ) }
id="start-date-string"
aria-describedby="start-date-string-message"
id="after-date-string"
aria-describedby="after-date-string-message"
/>
<p className="screen-reader-text" id="start-date-string-message">
<p className="screen-reader-text" id="after-date-string-message">
{ sprintf(
__(
"Date input describing a selected date range's start date in format %s",
@ -121,14 +118,14 @@ class DateRange extends Component {
</p>
<span>{ __( 'to', 'woo-dash' ) }</span>
<input
value={ endText }
value={ beforeText }
type="text"
onChange={ partial( this.onInputChange, 'endText' ) }
onChange={ partial( this.onInputChange, 'before' ) }
aria-label={ __( 'End Date', 'woo-dash' ) }
id="end-date-string"
aria-describedby="end-date-string-message"
id="before-date-string"
aria-describedby="before-date-string-message"
/>
<p className="screen-reader-text" id="start-date-string-message">
<p className="screen-reader-text" id="before-date-string-message">
{ sprintf(
__(
"Date input describing a selected date range's end date in format %s",
@ -147,10 +144,10 @@ class DateRange extends Component {
onDatesChange={ this.onDatesChange }
onFocusChange={ this.onFocusChange }
focusedInput={ focusedInput }
startDate={ start }
startDate={ after }
startDateId={ START_DATE }
startDatePlaceholderText={ 'Start Date' }
endDate={ end }
endDate={ before }
endDateId={ END_DATE }
endDatePlaceholderText={ 'End Date' }
orientation={ 'horizontal' }
@ -159,7 +156,7 @@ class DateRange extends Component {
minimumNights={ 0 }
hideKeyboardShortcutsPanel
noBorder
initialVisibleMonth={ () => start || moment() }
initialVisibleMonth={ () => after || moment() }
phrases={ phrases }
/>
</div>
@ -169,8 +166,8 @@ class DateRange extends Component {
}
DateRange.propTypes = {
start: PropTypes.object,
end: PropTypes.object,
after: PropTypes.object,
before: PropTypes.object,
onSelect: PropTypes.func.isRequired,
inValidDays: PropTypes.oneOfType( [
PropTypes.oneOf( [ 'past', 'future', 'none' ] ),

8
plugins/woocommerce-admin/client/components/date-picker/content.js
View File

@ -38,8 +38,8 @@ class DatePickerContent extends Component {
const {
period,
compare,
start,
end,
after,
before,
onSelect,
onClose,
getUpdatePath,
@ -83,8 +83,8 @@ class DatePickerContent extends Component {
) }
{ selectedTab === 'custom' && (
<DateRange
start={ start }
end={ end }
after={ after }
before={ before }
onSelect={ onSelect }
inValidDays="future"
/>

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

@ -29,12 +29,12 @@ class DatePicker extends Component {
this.setState( this.addQueryDefaults( nextProps.query ) );
}
addQueryDefaults( { period, compare, start, end } ) {
addQueryDefaults( { period, compare, after, before } ) {
return {
period: period || 'today',
compare: compare || 'previous_period',
start: start ? moment( start ) : null,
end: end ? moment( end ) : null,
after: after ? moment( after ) : null,
before: before ? moment( before ) : null,
};
}
@ -43,22 +43,22 @@ class DatePicker extends Component {
}
getOtherQueries( query ) {
const { period, compare, start, end, ...otherQueries } = query; // eslint-disable-line no-unused-vars
const { period, compare, after, before, ...otherQueries } = query; // eslint-disable-line no-unused-vars
return otherQueries;
}
getUpdatePath( selectedTab ) {
const { path, query } = this.props;
const otherQueries = this.getOtherQueries( query );
const { period, compare, start, end } = this.state;
const { period, compare, after, before } = this.state;
const data = {
period: 'custom' === selectedTab ? 'custom' : period,
compare,
};
if ( 'custom' === selectedTab ) {
Object.assign( data, {
start: start ? start.format( isoDateFormat ) : '',
end: end ? end.format( isoDateFormat ) : '',
after: after ? after.format( isoDateFormat ) : '',
before: before ? before.format( isoDateFormat ) : '',
} );
}
const queryString = stringifyQueryObject( Object.assign( otherQueries, data ) );
@ -81,15 +81,15 @@ class DatePicker extends Component {
}
isValidSelection( selectedTab ) {
const { compare, start, end } = this.state;
const { compare, after, before } = this.state;
if ( 'custom' === selectedTab ) {
return compare && start && end;
return compare && after && before;
}
return true;
}
render() {
const { period, compare, start, end } = this.state;
const { period, compare, after, before } = this.state;
return (
<Dropdown
className="woocommerce-date-picker"
@ -109,8 +109,8 @@ class DatePicker extends Component {
<DatePickerContent
period={ period }
compare={ compare }
start={ start }
end={ end }
after={ after }
before={ before }
onSelect={ this.select }
onClose={ onClose }
getUpdatePath={ this.getUpdatePath }

68
plugins/woocommerce-admin/client/lib/date/index.js
View File

@ -18,8 +18,8 @@ import { compareValues } from 'components/date-picker/compare-periods';
* @typedef {Object} DateValue - Describes the date range supplied by the date picker.
* @property {string} label - The translated value of the period.
* @property {string} range - The human readable value of a date range.
* @property {moment.Moment} start - Start of the date range.
* @property {moment.Moment} end - End of the date range.
* @property {moment.Moment} after - Start of the date range.
* @property {moment.Moment} before - End of the date range.
*/
export const isoDateFormat = 'YYYY-MM-DD';
@ -45,26 +45,28 @@ export function toMoment( format, str ) {
/**
* Given two dates, derive a string representation
*
* @param {Moment} start - start date
* @param {Moment} end - end date
* @param {Moment} after - start date
* @param {Moment} before - end date
* @return {string} - text value for the supplied date range
*/
export function getRangeLabel( start, end ) {
const isSameDay = start.isSame( end, 'day' );
const isSameYear = start.year() === end.year();
const isSameMonth = isSameYear && start.month() === end.month();
export function getRangeLabel( after, before ) {
const isSameDay = after.isSame( before, 'day' );
const isSameYear = after.year() === before.year();
const isSameMonth = isSameYear && after.month() === before.month();
const fullDateFormat = __( 'MMM D, YYYY', 'woo-dash' );
const monthDayFormat = __( 'MMM D', 'woo-dash' );
if ( isSameDay ) {
return start.format( fullDateFormat );
return after.format( fullDateFormat );
} else if ( isSameMonth ) {
const startDate = start.date();
return start.format( fullDateFormat ).replace( startDate, `${ startDate } - ${ end.date() }` );
const afterDate = after.date();
return after
.format( fullDateFormat )
.replace( afterDate, `${ afterDate } - ${ before.date() }` );
} else if ( isSameYear ) {
return `${ start.format( monthDayFormat ) } - ${ end.format( fullDateFormat ) }`;
return `${ after.format( monthDayFormat ) } - ${ before.format( fullDateFormat ) }`;
}
return `${ start.format( fullDateFormat ) } - ${ end.format( fullDateFormat ) }`;
return `${ after.format( fullDateFormat ) } - ${ before.format( fullDateFormat ) }`;
}
/**
@ -157,11 +159,11 @@ export function getCurrentPeriod( period, compare ) {
*
* @param {string} period - the chosen period
* @param {string} compare - `previous_period` or `previous_year`
* @param {Moment} [start] - start date if custom period
* @param {Moment} [end] - end date if custom period
* @param {Moment} [after] - after date if custom period
* @param {Moment} [before] - before date if custom period
* @return {DateValue} - DateValue data about the selected period
*/
function getDateValue( period, compare, start, end ) {
function getDateValue( period, compare, after, before ) {
switch ( period ) {
case 'today':
return getCurrentPeriod( 'day', compare );
@ -184,22 +186,22 @@ function getDateValue( period, compare, start, end ) {
case 'last_year':
return getLastPeriod( 'year', compare );
case 'custom':
const difference = end.diff( start, 'days' );
const difference = before.diff( after, 'days' );
if ( 'previous_period' === compare ) {
const secondaryEnd = start.clone().subtract( 1, 'days' );
const secondaryEnd = after.clone().subtract( 1, 'days' );
const secondaryStart = secondaryEnd.clone().subtract( difference, 'days' );
return {
primaryStart: start,
primaryEnd: end,
primaryStart: after,
primaryEnd: before,
secondaryStart,
secondaryEnd,
};
}
return {
primaryStart: start,
primaryEnd: end,
secondaryStart: start.clone().subtract( 1, 'years' ),
secondaryEnd: end.clone().subtract( 1, 'years' ),
primaryStart: after,
primaryEnd: before,
secondaryStart: after.clone().subtract( 1, 'years' ),
secondaryEnd: before.clone().subtract( 1, 'years' ),
};
}
}
@ -209,30 +211,30 @@ function getDateValue( period, compare, start, end ) {
*
* @param {string} period - Indicates period, 'last_week', 'quarter', or 'custom'
* @param {string} compare - Indicates the period to compare against, 'previous_period', previous_year'
* @param {moment.Moment} [start] - If the period supplied is "custom", this is the start date
* @param {moment.Moment} [end] - If the period supplied is "custom", this is the end date
* @param {moment.Moment} [after] - If the period supplied is "custom", this is the after date
* @param {moment.Moment} [before] - If the period supplied is "custom", this is the before date
* @return {{primary: DateValue, secondary: DateValue}} - Primary and secondary DateValue objects
*/
export const getCurrentDates = ( { period, compare, start, end } ) => {
export const getCurrentDates = ( { period, compare, after, before } ) => {
const { primaryStart, primaryEnd, secondaryStart, secondaryEnd } = getDateValue(
period,
compare,
start,
end
after,
before
);
return {
primary: {
label: find( presetValues, item => item.value === period ).label,
range: getRangeLabel( primaryStart, primaryEnd ),
start: primaryStart,
end: primaryEnd,
after: primaryStart,
before: primaryEnd,
},
secondary: {
label: find( compareValues, item => item.value === compare ).label,
range: getRangeLabel( secondaryStart, secondaryEnd ),
start: secondaryStart,
end: secondaryEnd,
after: secondaryStart,
before: secondaryEnd,
},
};
};