date-time: show events tooltip

WordPress · Apr 20, 2021 · 548d68c · 548d68c
1 parent 1b49efa
commit 548d68c
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 2 deletions.
diff --git a/packages/components/src/date-time/date.js b/packages/components/src/date-time/date.js
@@ -12,14 +12,41 @@ import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerS
  * WordPress dependencies
  */
 import { Component, createRef, useEffect, useRef } from '@wordpress/element';
-import { isRTL, _n, sprintf } from '@wordpress/i18n';
+import { isRTL, _n, __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Tooltip } from '../';
 
 /**
  * Module Constants
  */
 const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
 const ARIAL_LABEL_TIME_FORMAT = 'dddd, LL';
 
+function renderTooltipContent( events ) {
+	const needToPrune = events.length > 4;
+	const eventsToRender = needToPrune ? events.slice( 0, 3 ) : events;
+	if ( needToPrune ) {
+		eventsToRender.push( {
+			title: __( '…and more' ),
+		} );
+	}
+
+	return (
+		<div className="components-datetime__date-day-events">
+			<ul>
+				{ eventsToRender.map( ( event, ind ) => (
+					<li key={ `event-${ ind }` }>
+						{ event.title || __( 'No title' ) }
+					</li>
+				) ) }
+			</ul>
+		</div>
+	);
+}
+
 function DatePickerDay( { day, events = [] } ) {
 	const ref = useRef();
 
@@ -65,7 +92,15 @@ function DatePickerDay( { day, events = [] } ) {
 				'has-events': events?.length,
 			} ) }
 		>
-			{ day.format( 'D' ) }
+			{ events?.length ? (
+				<Tooltip text={ renderTooltipContent( events ) }>
+					<div className="components-datetime__date__day">
+						{ day.format( 'D' ) }
+					</div>
+				</Tooltip>
+			) : (
+				day.format( 'D' )
+			) }
 		</div>
 	);
 }

diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss
@@ -143,6 +143,25 @@
 	background: var(--wp-admin-theme-color);
 }
 
+// Events tooltip.
+.components-datetime__date-day-events {
+	ul {
+		margin: 0;
+		padding: 2px 0;
+		text-align: left;
+		list-style-position: inside;
+	}
+
+	li {
+		margin: 0;
+		padding: 1px;
+		max-width: 200px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
 .components-datetime__time {
 	padding-bottom: $grid-unit-20;