Skip to content

Commit

Permalink
date-time: limit events per day
Browse files Browse the repository at this point in the history
  • Loading branch information
retrofox committed Sep 21, 2020
1 parent bda2b41 commit 36bf38c
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 132 deletions.
143 changes: 12 additions & 131 deletions packages/components/src/date-time/date.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@
* External dependencies
*/
import ReactDatePicker from 'react-datepicker';
import { format, setMonth, getMonth, getYear } from 'date-fns';
import { isSameDay, format, setMonth, getMonth, getYear, getDate } from 'date-fns';
import { map, filter } from 'lodash';

/**
* WordPress dependencies
*/
import { Icon, Button, Tooltup } from '../';
import { __, _n } from '@wordpress/i18n';

/**
* Module Constants
Expand Down Expand Up @@ -37,24 +38,27 @@ const DatePickerHeader = ( { date, decreaseMonth, increaseMonth ,locale } ) => (
);

const renderTooltipContent = ( events ) => {
const needToPrune = events?.length > 4;
const eventsToRender = needToPrune ? events.slice( 0, 3 ) : events;
if ( needToPrune ) {
eventsToRender.push( {
title: _n( '%s more events', '%s more events', events.length - eventsToRender.length, 'gutenberg' )
} );
}

return (
<div>
<ul>
{ map( events, ( event ) => (
<li>{ event.title }</li>
{ map( eventsToRender, ( event ) => (
<li>{ event.title || __( 'No title', 'gutenberg' ) }</li>
) ) }
</ul>
</div>
)
};

const renderDayContents = ( day, date, events ) => {
console.log( { events } );
console.log( { day } );
console.log( { date } );
const eventsByDay = filter( events, ( ev ) => isSameDay( date, ev.date ) );
console.log( { eventsByDay } );

if ( ! eventsByDay?.length ) {
return getDate( date );
}
Expand Down Expand Up @@ -94,128 +98,5 @@ const DatePicker = ( {
);
};

/*
class DatePicker extends Component {
constructor() {
super( ...arguments );
this.onChangeMoment = this.onChangeMoment.bind( this );
this.nodeRef = createRef();
this.keepFocusInside = this.keepFocusInside.bind( this );
this.isDayHighlighted = this.isDayHighlighted.bind( this );
}
/*
* Todo: We should remove this function ASAP.
* It is kept because focus is lost when we click on the previous and next month buttons.
* This focus loss closes the date picker popover.
* Ideally we should add an upstream commit on react-dates to fix this issue.
*
keepFocusInside( newMonthDate ) {
// Trigger onMonthChange callback.
if ( this.props.onMonthChange ) {
this.props.onMonthChange( newMonthDate.toISOString() );
}
if ( ! this.nodeRef.current ) {
return;
}
// If focus was lost.
if (
! document.activeElement ||
! this.nodeRef.current.contains( document.activeElement )
) {
// Retrieve the focus region div.
const focusRegion = this.nodeRef.current.querySelector(
'.DayPicker_focusRegion'
);
if ( ! focusRegion ) {
return;
}
// Keep the focus on focus region.
focusRegion.focus();
}
}
onChangeMoment( newDate ) {
const { currentDate, onChange } = this.props;
// If currentDate is null, use now as momentTime to designate hours, minutes, seconds.
const momentDate = currentDate ? moment( currentDate ) : moment();
const momentTime = {
hours: momentDate.hours(),
minutes: momentDate.minutes(),
seconds: 0,
};
onChange( newDate.set( momentTime ).format( TIMEZONELESS_FORMAT ) );
}
/**
* Create a Moment object from a date string. With no currentDate supplied, default to a Moment
* object representing now. If a null value is passed, return a null value.
*
* @param {?string} currentDate Date representing the currently selected date or null to signify no selection.
* @return {?moment.Moment} Moment object for selected date or null.
*
getMomentDate( currentDate ) {
if ( null === currentDate ) {
return null;
}
return currentDate ? moment( currentDate ) : moment();
}
isDayHighlighted( date ) {
if ( this.props.onMonthPreviewed ) {
this.props.onMonthPreviewed( date.toISOString() );
}
// Do not highlight when no events.
if ( ! this.props.events?.length ) {
return false;
}
// Compare date against highlighted events.
return this.props.events.some( ( highlighted ) =>
date.isSame( highlighted.date, 'day' )
);
}
render() {
const { currentDate, isInvalidDate, events } = this.props;
const momentDate = this.getMomentDate( currentDate );
const key = `datepicker-controller-${
momentDate ? momentDate.format( 'MM-YYYY' ) : 'null'
}${ events?.length ? '-events-' + events.length : '' }`;
return (
<div className="components-datetime__date" ref={ this.nodeRef }>
<DayPickerSingleDateController
date={ momentDate }
daySize={ 30 }
focused
hideKeyboardShortcutsPanel
// This is a hack to force the calendar to update on month or year change
// https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665
key={ key }
noBorder
numberOfMonths={ 1 }
onChange={ this.onDateChangeMoment }
transitionDuration={ 0 }
weekDayFormat="ddd"
isRTL={ isRTL() }
isOutsideRange={ ( date ) => {
return isInvalidDate && isInvalidDate( date.toDate() );
} }
isDayHighlighted={ this.isDayHighlighted }
onPrevMonthClick={ this.keepFocusInside }
onNextMonthClick={ this.keepFocusInside }
/>
</div>
);
}
}
*/

export default DatePicker;

Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default {
const DAY_IN_MS = 24 * 60 * 60 * 1000;
const aFewDaysAfter = ( date ) => {
// eslint-disable-next-line no-restricted-syntax
return new Date( date.getTime() + ( 1 + Math.random() * 5 ) * DAY_IN_MS );
return new Date( date.getTime() + DAY_IN_MS );
};

const now = new Date();
Expand Down Expand Up @@ -50,6 +50,26 @@ export const WithDaysHighlighted = () => {
title: 'Duplicated Event Title',
type: 'duplicated',
},
{
date: aFewDaysAfter( lastHighlight.date ),
title: 'Duplicated Event Title',
type: 'duplicated',
},
{
date: aFewDaysAfter( lastHighlight.date ),
title: 'Duplicated Event Title',
type: 'duplicated',
},
{
date: aFewDaysAfter( lastHighlight.date ),
title: 'Duplicated Event Title',
type: 'duplicated',
},
{
date: aFewDaysAfter( lastHighlight.date ),
title: 'Duplicated Event Title',
type: 'duplicated',
},
] );
} );

Expand Down
15 changes: 15 additions & 0 deletions packages/components/src/date-time/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,21 @@ $date-picker-date-size: 30px;
color: $gray-800;
box-sizing: border-box;

// Events tooltip.
.components-tooltip {
ul {
margin: 0;
padding: 2px 0;
text-align: left;
list-style-position: inside;
}

li {
margin: 0;
padding: 1px;
}
}

&:focus {
box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color);
outline: 2px solid transparent; // Shown in Windows 10 high contrast mode.
Expand Down

0 comments on commit 36bf38c

Please sign in to comment.