From ce749a629d7c0c3f13d17c758361cb8c852bcc93 Mon Sep 17 00:00:00 2001 From: Sebastien Romain Date: Tue, 12 Dec 2023 16:08:44 +0100 Subject: [PATCH 1/2] fix: empty date is not working in CellDateTime --- .changeset/nervous-yaks-repair.md | 5 +++++ .../CellDatetime/CellDatetime.component.js | 9 ++++++--- .../src/VirtualizedList/VirtualizedList.stories.js | 12 +++++++----- 3 files changed, 18 insertions(+), 8 deletions(-) create mode 100644 .changeset/nervous-yaks-repair.md diff --git a/.changeset/nervous-yaks-repair.md b/.changeset/nervous-yaks-repair.md new file mode 100644 index 00000000000..7cc34edc7ea --- /dev/null +++ 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 index 17f842d3631..d0501360414 100644 --- 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 index 8f0c6b92e9f..a02d2b64f6e 100644 --- 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 = () => ( From 33045558bb22f4b92a914afe38ec0a9e93cc6b6c Mon Sep 17 00:00:00 2001 From: Sebastien Romain Date: Tue, 12 Dec 2023 16:19:50 +0100 Subject: [PATCH 2/2] update tests --- .../src/VirtualizedList/CellDatetime/CellDatetime.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js index d4e1a2ae66f..eeec1cb2a09 100644 --- a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js +++ b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js @@ -90,7 +90,7 @@ describe('CellDatetime', () => { render(); // then expect(distanceInWordsToNow).not.toHaveBeenCalled(); - expect(format).toHaveBeenCalled(); + expect(format).not.toHaveBeenCalled(); expect(document.querySelector('.cell-datetime-container')).toBeEmptyDOMElement(); });