fix: empty date is not working in CellDateTime

Talend · Dec 12, 2023 · ce749a6 · ce749a6
1 parent 58a4866
commit ce749a6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/.changeset/nervous-yaks-repair.md b/.changeset/nervous-yaks-repair.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+fix: empty date cell renderer
diff --git a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js
@@ -19,7 +19,7 @@ import getDefaultT from '../../translate';
 
 import styles from './CellDatetime.module.scss';
 
-const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 
 export function computeValue(cellData, columnData, t) {
 	const date = new Date(cellData);
@@ -52,8 +52,10 @@ export function getTooltipLabel(cellData, columnData, t) {
 	if (typeof columnData.getTooltipLabel === 'function') {
 		return columnData.getTooltipLabel(cellData);
 	}
-	if (columnData.mode === 'ago') {
-		const date = new Date(cellData);
+	const date = new Date(cellData);
+	const isDateValid = isValid(date);
+
+	if (columnData.mode === 'ago' && isDateValid) {
 		let tooltipLabel = '';
 		if (columnData.timeZone) {
 			tooltipLabel = dateUtils.formatToTimeZone(date, columnData.pattern || DATE_TIME_FORMAT, {
@@ -88,6 +90,7 @@ export class CellDatetimeComponent extends Component {
 
 	render() {
 		const { cellData, columnData, t } = this.props;
+
 		const computedValue = computeValue(cellData, columnData, t);
 		const tooltipLabel = getTooltipLabel(cellData, columnData, t);
 

diff --git a/packages/components/src/VirtualizedList/VirtualizedList.stories.js b/packages/components/src/VirtualizedList/VirtualizedList.stories.js
@@ -1,9 +1,11 @@
 /* eslint-disable react/prop-types */
 import { useState } from 'react';
-import { action } from '@storybook/addon-actions'; // eslint-disable-line import/no-extraneous-dependencies
-
-import { SortIndicator } from 'react-virtualized';
 import { BrowserRouter, Link as RouterLink } from 'react-router-dom';
+// eslint-disable-line import/no-extraneous-dependencies
+import { SortIndicator } from 'react-virtualized';
+
+import { action } from '@storybook/addon-actions';
+
 import VirtualizedList from '.';
 
 function MyCustomRow(props) {
@@ -283,7 +285,7 @@ const collection = [
 		name: 'Title with long long long long long long long long long long long text',
 		tag: 'test',
 		created: '2016-09-22',
-		modified: '2016-09-22',
+		modified: undefined,
 		description: 'Row with a super super long text to show the ellipsis',
 		author:
 			'Jean-Pierre DUPONT with super super super super super super super super super super super super super super super super super super super super super super super long name, but there was not enough long text',
@@ -470,7 +472,7 @@ export const ListTable = () => (
 				<VirtualizedList.Datetime
 					label="Modified"
 					dataKey="modified"
-					columnData={{ mode: 'format' }}
+					columnData={{ mode: 'ago' }}
 				/>
 			</VirtualizedList>
 		</section>