From 36bf38c15c4c8f3e78e8181bb759387cf2962bfa Mon Sep 17 00:00:00 2001 From: retrofox Date: Mon, 21 Sep 2020 10:19:52 -0300 Subject: [PATCH] date-time: limit events per day --- packages/components/src/date-time/date.js | 143 ++---------------- .../stories/with-days-highlighted.js | 22 ++- packages/components/src/date-time/style.scss | 15 ++ 3 files changed, 48 insertions(+), 132 deletions(-) diff --git a/packages/components/src/date-time/date.js b/packages/components/src/date-time/date.js index d9aebfc5d7314..9a5e9d8ad980c 100644 --- a/packages/components/src/date-time/date.js +++ b/packages/components/src/date-time/date.js @@ -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 @@ -37,11 +38,19 @@ 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 (
@@ -49,12 +58,7 @@ const renderTooltipContent = ( events ) => { }; 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 ); } @@ -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 ( -
- { - return isInvalidDate && isInvalidDate( date.toDate() ); - } } - isDayHighlighted={ this.isDayHighlighted } - onPrevMonthClick={ this.keepFocusInside } - onNextMonthClick={ this.keepFocusInside } - /> -
- ); - } -} -*/ - export default DatePicker; diff --git a/packages/components/src/date-time/stories/with-days-highlighted.js b/packages/components/src/date-time/stories/with-days-highlighted.js index 3b42f3ecc10c2..470f13e078a81 100644 --- a/packages/components/src/date-time/stories/with-days-highlighted.js +++ b/packages/components/src/date-time/stories/with-days-highlighted.js @@ -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(); @@ -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', + }, ] ); } ); diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss index 09f13c2093e90..924dca0f9a132 100644 --- a/packages/components/src/date-time/style.scss +++ b/packages/components/src/date-time/style.scss @@ -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.