fix: date-fns & date cell renderer (#5054)

Talend · Dec 12, 2023 · 3ea63ce · 3ea63ce
1 parent 3808296
commit 3ea63ce
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/.changeset/tame-rockets-refuse.md b/.changeset/tame-rockets-refuse.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+fix: date-fns compatibility with Date Cell renderer while passing string date
diff --git a/packages/components/src/List/ListComposition.stories.js b/packages/components/src/List/ListComposition.stories.js
@@ -1,8 +1,8 @@
 import { action } from '@storybook/addon-actions';
 
-import { simpleCollection } from './ListComposition/collection';
-import ActionBar from '../ActionBar';
 import List from '.';
+import ActionBar from '../ActionBar';
+import { simpleCollection } from './ListComposition/collection';
 
 const titleProps = rowData => ({
 	onClick: action('onTitleClick'),
@@ -41,7 +41,7 @@ function CustomList(props) {
 			<List.VList.Badge label="Tag" dataKey="tag" columnData={{ selected: true }} disableSort />
 			<List.VList.Text label="Description" dataKey="description" disableSort />
 			<List.VList.Text label="Author" dataKey="author" />
-			<List.VList.Datetime label="Created" dataKey="created" columnData={{ mode: 'format' }} />
+			<List.VList.Datetime label="Created" dataKey="created" columnData={{ mode: 'ago' }} />
 			<List.VList.Datetime label="Modified" dataKey="modified" columnData={{ mode: 'format' }} />
 		</List.VList>
 	);

diff --git a/packages/components/src/List/ListComposition/collection.js b/packages/components/src/List/ListComposition/collection.js
@@ -290,8 +290,8 @@ for (let i = 0; i < 100; i += 1) {
 		isValid1: [true, false, undefined][random(2)],
 		isValid2: [true, false, undefined][random(2)],
 		tag: 'test',
-		created: 1474495200,
-		modified: 1474495200,
+		created: 1474495200000,
+		modified: 1474495200000,
 		description: `Simple row with icon and actions${[' (crème brûlée)', ''][random(1)]}`,
 		author: 'Jean-Pierre DUPONT',
 		icon: 'talend-file-xls-o',

diff --git a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js
@@ -53,15 +53,16 @@ export function getTooltipLabel(cellData, columnData, t) {
 		return columnData.getTooltipLabel(cellData);
 	}
 	if (columnData.mode === 'ago') {
+		const date = new Date(cellData);
 		let tooltipLabel = '';
 		if (columnData.timeZone) {
-			tooltipLabel = dateUtils.formatToTimeZone(cellData, columnData.pattern || DATE_TIME_FORMAT, {
+			tooltipLabel = dateUtils.formatToTimeZone(date, columnData.pattern || DATE_TIME_FORMAT, {
 				timeZone: columnData.timeZone,
 				locale: getLocale(t),
 			});
 		} else {
 			tooltipLabel = format(
-				cellData,
+				date,
 				dateUtils.formatToUnicode(columnData.pattern || DATE_TIME_FORMAT),
 				{
 					locale: getLocale(t),