Initial version of date column

change/@ni-nimble-components-fdbf357d-901d-4004-8a37-7ccea6c59bea.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Initial version of date column",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/table-column/date-text/cell-view/index.ts

@@ -0,0 +1,57 @@
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { template } from '../../text-base/cell-view/template';
+import type {
+    TableColumnDateTextCellRecord,
+    TableColumnDateTextColumnConfig
+} from '..';
+import { styles } from '../../text-base/cell-view/styles';
+import { TableColumnTextCellViewBase } from '../../text-base/cell-view';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-column-date-text-cell-view': TableColumnDateTextCellView;
+    }
+}
+
+/**
+ * A cell view for displaying date/time fields as text
+ */
+export class TableColumnDateTextCellView extends TableColumnTextCellViewBase<
+TableColumnDateTextCellRecord,
+TableColumnDateTextColumnConfig
+> {
+    private columnConfigChanged(): void {
+        this.placeholder = this.columnConfig.placeholder;
+    }
+
+    private cellRecordChanged(): void {
+        if (typeof this.cellRecord.value === 'number') {
+            const formatter = new Intl.DateTimeFormat(undefined, {
+                dateStyle: 'medium',
+                timeStyle: 'medium'
+            });
+            try {
+                this.text = formatter
+                    .format(this.cellRecord.value)
+                    .replace('\u202f', ' '); // on Chrome, the space before AM/PM is a narrow non-breaking space. For testing consistency across browsers, replace it with a regular space.
+                this.shouldUsePlaceholder = false;
+            } catch (e) {
+                this.text = '';
+                this.shouldUsePlaceholder = true;
+            }
+        } else {
+            this.text = '';
+            this.shouldUsePlaceholder = true;
+        }
+    }
+}
+
+const dateTextCellView = TableColumnDateTextCellView.compose({
+    baseName: 'table-column-date-text-cell-view',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
+export const tableColumnDateTextCellViewTag = DesignSystem.tagFor(
+    TableColumnDateTextCellView
+);

packages/nimble-components/src/table-column/date-text/group-header-view/index.ts

@@ -0,0 +1,56 @@
+import { DesignSystem } from '@microsoft/fast-foundation';
+import type { TableNumberFieldValue } from '../../../table/types';
+import { TableColumnTextGroupHeaderViewBase } from '../../text-base/group-header-view';
+import { template } from '../../text-base/group-header-view/template';
+import { styles } from '../../text-base/group-header-view/styles';
+import type { TableColumnDateTextColumnConfig } from '..';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-column-date-text-group-header': TableColumnDateTextGroupHeaderView;
+    }
+}
+/**
+ * The group header view for displaying date/time fields as text.
+ */
+export class TableColumnDateTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase<
+TableNumberFieldValue,
+TableColumnDateTextColumnConfig
+> {
+    private columnConfigChanged(): void {
+        this.placeholder = this.columnConfig?.placeholder ?? '';
+    }
+
+    private groupHeaderValueChanged(): void {
+        if (typeof this.groupHeaderValue === 'number') {
+            const formatter = new Intl.DateTimeFormat(undefined, {
+                dateStyle: 'medium',
+                timeStyle: 'medium'
+            });
+            try {
+                this.text = formatter
+                    .format(this.groupHeaderValue)
+                    .replace('\u202f', ' '); // on Chrome, the space before AM/PM is a narrow non-breaking space. For testing consistency across browsers, replace it with a regular space.
+                this.shouldUsePlaceholder = false;
+            } catch (e) {
+                this.text = '';
+                this.shouldUsePlaceholder = true;
+            }
+        } else {
+            this.text = '';
+            this.shouldUsePlaceholder = true;
+        }
+    }
+}
+
+const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
+    baseName: 'table-column-date-text-group-header',
+    template,
+    styles
+});
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(tableColumnDateTextGroupHeaderView());
+export const tableColumnDateTextGroupHeaderTag = DesignSystem.tagFor(
+    TableColumnDateTextGroupHeaderView
+);

packages/nimble-components/src/table-column/date-text/index.ts

@@ -0,0 +1,49 @@
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { styles } from '../base/styles';
+import { template } from '../base/template';
+import type { TableNumberField } from '../../table/types';
+import { TableColumnTextBase } from '../text-base';
+import {
+    TableColumnWithPlaceholderColumnConfig,
+    TableColumnSortOperation
+} from '../base/types';
+import { tableColumnDateTextGroupHeaderTag } from './group-header-view';
+import { tableColumnDateTextCellViewTag } from './cell-view';
+import type { ColumnInternalsOptions } from '../base/models/column-internals';
+
+export type TableColumnDateTextCellRecord = TableNumberField<'value'>;
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface TableColumnDateTextColumnConfig
+    extends TableColumnWithPlaceholderColumnConfig {}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-column-date-text': TableColumnDateText;
+    }
+}
+
+/**
+ * The table column for displaying dates/times as text.
+ */
+export class TableColumnDateText extends TableColumnTextBase {
+    protected override getColumnInternalsOptions(): ColumnInternalsOptions {
+        return {
+            cellRecordFieldNames: ['value'],
+            cellViewTag: tableColumnDateTextCellViewTag,
+            groupHeaderViewTag: tableColumnDateTextGroupHeaderTag,
+            delegatedEvents: [],
+            sortOperation: TableColumnSortOperation.basic
+        };
+    }
+}
+
+const nimbleTableColumnDateText = TableColumnDateText.compose({
+    baseName: 'table-column-date-text',
+    template,
+    styles
+});
+
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(nimbleTableColumnDateText());
+export const tableColumnDateTextTag = DesignSystem.tagFor(TableColumnDateText);

packages/nimble-components/src/table-column/date-text/tests/table-column-date-text-matrix.stories.ts

@@ -0,0 +1,61 @@
+import type { StoryFn, Meta } from '@storybook/html';
+import { html, ViewTemplate } from '@microsoft/fast-element';
+import { createMatrixThemeStory } from '../../../utilities/tests/storybook';
+import {
+    createMatrix,
+    sharedMatrixParameters
+} from '../../../utilities/tests/matrix';
+import { tableColumnDateTextTag } from '..';
+import { iconUserTag } from '../../../icons/user';
+import { Table, tableTag } from '../../../table';
+
+const metadata: Meta = {
+    title: 'Tests/Table Column Types',
+    parameters: {
+        ...sharedMatrixParameters()
+    }
+};
+
+export default metadata;
+
+const data = [
+    {
+        id: '0',
+        date: new Date('Dec 21, 2020, 3:45:03 PM').valueOf()
+    },
+    {
+        id: '1',
+        date: new Date('Dec 21, 2020, 3:45:03 PM').valueOf()
+    },
+    {
+        id: '2'
+    }
+] as const;
+
+// prettier-ignore
+const component = (): ViewTemplate => html`
+    <label style="color: var(--ni-nimble-control-label-font-color); font: var(--ni-nimble-control-label-font)">Date Text Table Column</label>
+    <${tableTag} id-field-name="id" style="height: 250px">
+        <${tableColumnDateTextTag}
+            field-name="date"
+            placeholder="no value"
+            group-index="0"
+        >
+            <${iconUserTag}></${iconUserTag}>
+        </${tableColumnDateTextTag}>
+    </${tableTag}>
+`;
+
+export const tableColumnDateTextThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(component)
+);
+
+tableColumnDateTextThemeMatrix.play = async (): Promise<void> => {
+    await Promise.all(
+        Array.from(document.querySelectorAll<Table>('nimble-table')).map(
+            async table => {
+                await table.setData(data);
+            }
+        )
+    );
+};