From a94553e7980eb8fe2fb72cb04e4ecf5145730fa4 Mon Sep 17 00:00:00 2001 From: Etienne Burdet Date: Mon, 9 Dec 2024 13:36:59 +0100 Subject: [PATCH] =?UTF-8?q?feat:=C2=A0add=20clickable=20and=20hoverable=20?= =?UTF-8?q?rows=20to=20table=20(#265)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add clickable and hoverable rows to table * fix: add keyboard a11y * fix: add keyboard nav and conditionnaly add event listeners. * chore: export formatters and fix typing * fix: rework focus state to avoid double expand icon --- package-lock.json | 6 +- packages/visualizations-react/CHANGELOG.md | 20 ++++ packages/visualizations-react/package.json | 4 +- packages/visualizations-react/src/index.ts | 42 +++++++ .../stories/Table/Table.stories.tsx | 30 ++++- .../stories/Table/custom-style.css | 4 + .../stories/Table/options.ts | 2 +- packages/visualizations/CHANGELOG.md | 30 +++++ packages/visualizations/package.json | 2 +- .../Cell => }/Format/BooleanFormat.svelte | 12 +- .../src/components/Format/DateFormat.svelte | 30 +++++ .../{Table/Cell => }/Format/GeoFormat.svelte | 30 +++-- .../components/Format/LongTextFormat.svelte | 24 ++++ .../src/components/Format/NumberFormat.svelte | 27 +++++ .../components/Format/ShortTextFormat.svelte | 23 ++++ .../{Table/Cell => }/Format/URLFormat.svelte | 13 ++- .../{Table/Cell => }/Format/index.ts | 11 +- .../src/components/Format/types.ts | 45 ++++++++ .../{Table/Cell => }/Format/utils.ts | 0 .../src/components/Table/Body.svelte | 37 +++--- .../src/components/Table/Cell/Cell.svelte | 32 +++++- .../Table/Cell/Format/DateFormat.svelte | 24 ---- .../Table/Cell/Format/LongTextFormat.svelte | 18 --- .../Table/Cell/Format/NumberFormat.svelte | 21 ---- .../Table/Cell/Format/ShortTextFormat.svelte | 17 --- .../src/components/Table/Cell/utils.ts | 8 ++ .../components/Table/Headers/Headers.svelte | 4 + .../src/components/Table/Row.svelte | 105 +++++++++++++++++ .../src/components/Table/Table.svelte | 8 +- .../src/components/Table/TableCard.svelte | 4 +- .../src/components/Table/ZoomIcon.svelte | 15 +++ .../src/components/Table/types.ts | 108 ++++++------------ packages/visualizations/src/index.ts | 10 ++ 33 files changed, 561 insertions(+), 205 deletions(-) rename packages/visualizations/src/components/{Table/Cell => }/Format/BooleanFormat.svelte (50%) create mode 100644 packages/visualizations/src/components/Format/DateFormat.svelte rename packages/visualizations/src/components/{Table/Cell => }/Format/GeoFormat.svelte (62%) create mode 100644 packages/visualizations/src/components/Format/LongTextFormat.svelte create mode 100644 packages/visualizations/src/components/Format/NumberFormat.svelte create mode 100644 packages/visualizations/src/components/Format/ShortTextFormat.svelte rename packages/visualizations/src/components/{Table/Cell => }/Format/URLFormat.svelte (62%) rename packages/visualizations/src/components/{Table/Cell => }/Format/index.ts (79%) create mode 100644 packages/visualizations/src/components/Format/types.ts rename packages/visualizations/src/components/{Table/Cell => }/Format/utils.ts (100%) delete mode 100644 packages/visualizations/src/components/Table/Cell/Format/DateFormat.svelte delete mode 100644 packages/visualizations/src/components/Table/Cell/Format/LongTextFormat.svelte delete mode 100644 packages/visualizations/src/components/Table/Cell/Format/NumberFormat.svelte delete mode 100644 packages/visualizations/src/components/Table/Cell/Format/ShortTextFormat.svelte create mode 100644 packages/visualizations/src/components/Table/Cell/utils.ts create mode 100644 packages/visualizations/src/components/Table/Row.svelte create mode 100644 packages/visualizations/src/components/Table/ZoomIcon.svelte diff --git a/package-lock.json b/package-lock.json index 6c52d05d..e2c7c5f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29547,7 +29547,7 @@ }, "packages/visualizations": { "name": "@opendatasoft/visualizations", - "version": "0.27.0", + "version": "0.27.1-beta.1", "license": "MIT", "dependencies": { "@placemarkio/geo-viewport": "^1.0.2", @@ -29622,10 +29622,10 @@ }, "packages/visualizations-react": { "name": "@opendatasoft/visualizations-react", - "version": "0.27.0", + "version": "0.27.1-beta.1", "license": "MIT", "dependencies": { - "@opendatasoft/visualizations": "0.27.0", + "@opendatasoft/visualizations": "0.27.1-beta.1", "use-callback-ref": "^1.2.4" }, "devDependencies": { diff --git a/packages/visualizations-react/CHANGELOG.md b/packages/visualizations-react/CHANGELOG.md index 1e0f381d..9aab6004 100644 --- a/packages/visualizations-react/CHANGELOG.md +++ b/packages/visualizations-react/CHANGELOG.md @@ -3,6 +3,26 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.27.1-beta.1](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/visualizations-react@0.27.1-beta.0...@opendatasoft/visualizations-react@0.27.1-beta.1) (2024-11-29) + + +### Bug Fixes + +* make colors more easily customizable ([7f1591b](https://github.com/opendatasoft/ods-dataviz-sdk/commit/7f1591bb2770751e813dea4c82ac9c43be4306ee)) +* rename rows, lint, simplify callbacks ([1a10a98](https://github.com/opendatasoft/ods-dataviz-sdk/commit/1a10a98297e93e44415ffb49d917d6ef92d3d7c1)) + + + + + +## [0.27.1-beta.0](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/visualizations-react@0.27.0...@opendatasoft/visualizations-react@0.27.1-beta.0) (2024-11-27) + +**Note:** Version bump only for package @opendatasoft/visualizations-react + + + + + # [0.27.0](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/visualizations-react@0.26.1...@opendatasoft/visualizations-react@0.27.0) (2024-11-06) diff --git a/packages/visualizations-react/package.json b/packages/visualizations-react/package.json index 5a67b5f6..0117f07e 100644 --- a/packages/visualizations-react/package.json +++ b/packages/visualizations-react/package.json @@ -1,6 +1,6 @@ { "name": "@opendatasoft/visualizations-react", - "version": "0.27.0", + "version": "0.27.1-beta.1", "license": "MIT", "author": "opendatasoft", "homepage": "https://github.com/opendatasoft/ods-dataviz-sdk", @@ -53,7 +53,7 @@ "arrowParens": "avoid" }, "dependencies": { - "@opendatasoft/visualizations": "0.27.0", + "@opendatasoft/visualizations": "0.27.1-beta.1", "use-callback-ref": "^1.2.4" }, "devDependencies": { diff --git a/packages/visualizations-react/src/index.ts b/packages/visualizations-react/src/index.ts index d6015ae4..65097f11 100644 --- a/packages/visualizations-react/src/index.ts +++ b/packages/visualizations-react/src/index.ts @@ -10,6 +10,13 @@ import { PoiMap as _PoiMap, Table as _Table, WebGlMap as _WebGlMap, + BooleanFormat as _BooleanFormat, + DateFormat as _DateFormat, + GeoFormat as _GeoFormat, + LongTextFormat as _LongTextFormat, + ShortTextFormat as _ShortTextFormat, + URLFormat as _URLFormat, + NumberFormat as _NumberFormat, } from '@opendatasoft/visualizations'; import type { ChartProps, @@ -20,6 +27,13 @@ import type { PoiMapProps, WebGlMapProps, TableProps, + BooleanFormatProps, + DateFormatProps, + GeoFormatProps, + LongTextFormatProps, + ShortTextFormatProps, + URLFormatProps, + NumberFormatProps, } from '@opendatasoft/visualizations'; import reactifySvelte from 'reactify'; @@ -44,3 +58,31 @@ export const ChoroplethSvg = reactifySvelte( export const PoiMap = reactifySvelte(_PoiMap, 'ods-visualizations-poi-map'); export const WebGlMap = reactifySvelte(_WebGlMap, 'ods-visualizations-webgl-map'); export const Table = reactifySvelte(_Table, 'ods-visualizations-table'); +export const BooleanFormat = reactifySvelte( + _BooleanFormat, + 'ods-visualizations-format-boolean' +); +export const DateFormat = reactifySvelte( + _DateFormat, + 'ods-visualizations-format-date' +); +export const GeoFormat = reactifySvelte( + _GeoFormat, + 'ods-visualizations-format-geo' +); +export const ShortTextFormat = reactifySvelte( + _ShortTextFormat, + 'ods-visualizations-format-shorttext' +); +export const LongTextFormat = reactifySvelte( + _LongTextFormat, + 'ods-visualizations-format-longtext' +); +export const NumberFormat = reactifySvelte( + _NumberFormat, + 'ods-visualizations-format-number' +); +export const URLFormat = reactifySvelte( + _URLFormat, + 'ods-visualizations-format-url' +); diff --git a/packages/visualizations-react/stories/Table/Table.stories.tsx b/packages/visualizations-react/stories/Table/Table.stories.tsx index d64a1050..efeca90d 100644 --- a/packages/visualizations-react/stories/Table/Table.stories.tsx +++ b/packages/visualizations-react/stories/Table/Table.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { ComponentMeta, ComponentStory } from '@storybook/react'; import type { TableData, Async } from '@opendatasoft/visualizations'; @@ -39,6 +39,28 @@ const ScrollTemplate: ComponentStory = args => ( ); +const RowHoverTemplate: ComponentStory = args => { + const { options: argOptions, data: argData } = args; + const [hoveredRecord, setHovered] = useState | undefined | null>(null); + const [lastClicked, setLastClicked] = useState | undefined | null>(null); + + const onMouseEnter = (record?: Record) => {setHovered(record);}; + const onMouseLeave = () => {setHovered(null);}; + const onClick = (record?: Record) => {setLastClicked(record);}; + + return ( + <> +

Hovered

+ 
{JSON.stringify(hoveredRecord)}
+

Clicked

+ 
{JSON.stringify(lastClicked)}
+
+ + ; + + ); +}; + const optionsWithPagination = { ...options, pagination: { @@ -107,3 +129,9 @@ RtlDirection.args = { data, options: optionsWithPagination, }; + +export const RowHoverAndClick = RowHoverTemplate.bind({}); +RowHoverAndClick.args = { + data, + options, +}; diff --git a/packages/visualizations-react/stories/Table/custom-style.css b/packages/visualizations-react/stories/Table/custom-style.css index b875423a..c4a2f5d9 100644 --- a/packages/visualizations-react/stories/Table/custom-style.css +++ b/packages/visualizations-react/stories/Table/custom-style.css @@ -45,6 +45,10 @@ color: blue; } +.design-system .ods-dataviz--default td button:hover { + background-color: #cbd2db; +} + .design-system svg { --selected: #142e7b; --neutral: #cbd2db; diff --git a/packages/visualizations-react/stories/Table/options.ts b/packages/visualizations-react/stories/Table/options.ts index b0abeb34..50bf6a89 100644 --- a/packages/visualizations-react/stories/Table/options.ts +++ b/packages/visualizations-react/stories/Table/options.ts @@ -68,7 +68,7 @@ export const columns: Column[] = [ key: 'url', dataFormat: 'url', options: { - display: value => value.startsWith('https://') ? 'link' : 'broken link', + display: (value: string) => value.startsWith('https://') ? 'link' : 'broken link', }, }, { diff --git a/packages/visualizations/CHANGELOG.md b/packages/visualizations/CHANGELOG.md index 4855b4c9..c080b7f6 100644 --- a/packages/visualizations/CHANGELOG.md +++ b/packages/visualizations/CHANGELOG.md @@ -3,6 +3,36 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.27.1-beta.1](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/visualizations@0.27.1-beta.0...@opendatasoft/visualizations@0.27.1-beta.1) (2024-11-29) + + +### Bug Fixes + +* make colors more easily customizable ([7f1591b](https://github.com/opendatasoft/ods-dataviz-sdk/commit/7f1591bb2770751e813dea4c82ac9c43be4306ee)) +* rename rows, lint, simplify callbacks ([1a10a98](https://github.com/opendatasoft/ods-dataviz-sdk/commit/1a10a98297e93e44415ffb49d917d6ef92d3d7c1)) + + +### Reverts + +* Revert "chore: add accessor functiond and make warnings optionals" ([547cb6f](https://github.com/opendatasoft/ods-dataviz-sdk/commit/547cb6f820457a959b2314aa568268284a94cca5)) + + + + + +## [0.27.1-beta.0](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/visualizations@0.27.0...@opendatasoft/visualizations@0.27.1-beta.0) (2024-11-27) + + +### Bug Fixes + +* add keyboard a11y ([e2ed58d](https://github.com/opendatasoft/ods-dataviz-sdk/commit/e2ed58d8c9a8acc5379cb3df7a8e281c96f1a2de)) +* change implem to extra column to avoid formatting issues ([f2108e7](https://github.com/opendatasoft/ods-dataviz-sdk/commit/f2108e7801b34dc658ea975dcf177a35191386ac)) +* import alias and export old types ([f7080ac](https://github.com/opendatasoft/ods-dataviz-sdk/commit/f7080acab8e15329cbda1899a4c88bedb46d0fac)) + + + + + # [0.27.0](https://github.com/opendatasoft/ods-dataviz-sdk/compare/@opendatasoft/visualizations@0.26.1...@opendatasoft/visualizations@0.27.0) (2024-11-06) diff --git a/packages/visualizations/package.json b/packages/visualizations/package.json index 3f16951a..e4eca4c5 100644 --- a/packages/visualizations/package.json +++ b/packages/visualizations/package.json @@ -1,6 +1,6 @@ { "name": "@opendatasoft/visualizations", - "version": "0.27.0", + "version": "0.27.1-beta.1", "license": "MIT", "author": "opendatasoft", "homepage": "https://github.com/opendatasoft/ods-dataviz-sdk", diff --git a/packages/visualizations/src/components/Table/Cell/Format/BooleanFormat.svelte b/packages/visualizations/src/components/Format/BooleanFormat.svelte similarity index 50% rename from packages/visualizations/src/components/Table/Cell/Format/BooleanFormat.svelte rename to packages/visualizations/src/components/Format/BooleanFormat.svelte index e5b724d9..e6000086 100644 --- a/packages/visualizations/src/components/Table/Cell/Format/BooleanFormat.svelte +++ b/packages/visualizations/src/components/Format/BooleanFormat.svelte @@ -1,15 +1,21 @@ + +{value} diff --git a/packages/visualizations/src/components/Table/Cell/Format/GeoFormat.svelte b/packages/visualizations/src/components/Format/GeoFormat.svelte similarity index 62% rename from packages/visualizations/src/components/Table/Cell/Format/GeoFormat.svelte rename to packages/visualizations/src/components/Format/GeoFormat.svelte index 978b1f13..7d480eac 100644 --- a/packages/visualizations/src/components/Table/Cell/Format/GeoFormat.svelte +++ b/packages/visualizations/src/components/Format/GeoFormat.svelte @@ -2,22 +2,28 @@ import type { Content } from 'tippy.js'; import { WebGlMap } from 'components/Map'; - import type { WebGlMapOptions, WebGlMapData } from 'components/Map'; + import type { WebGlMapData } from 'components/Map'; import tippy from 'components/utils/tippy'; + import type { GeoFormatProps } from './types'; - export let rawValue: unknown; - export let display = (v: unknown) => v; - export let mapOptions: WebGlMapOptions; - export let sources: (v: unknown) => WebGlMapData['sources'] = () => ({}); - export let layers: (v: unknown) => WebGlMapData['layers'] = () => []; + type $$Props = GeoFormatProps; + + export let rawValue: $$Props['rawValue']; + export let display: $$Props['display'] = (v: unknown) => v; + export let mapOptions: $$Props['mapOptions'] = {}; + export let sources: $$Props['sources'] = () => ({}); + export let layers: $$Props['layers'] = () => []; let tooltipContent: Content; let showMap = false; + let data: WebGlMapData; - $: data = { - sources: sources(rawValue), - layers: layers(rawValue), - }; + $: if (sources && layers) { + data = { + sources: sources(rawValue), + layers: layers(rawValue), + }; + }
-
{display(rawValue)}
+
{display && display(rawValue)}
- {#if showMap} + {#if showMap && data && mapOptions}
diff --git a/packages/visualizations/src/components/Format/LongTextFormat.svelte b/packages/visualizations/src/components/Format/LongTextFormat.svelte new file mode 100644 index 00000000..0a9e3497 --- /dev/null +++ b/packages/visualizations/src/components/Format/LongTextFormat.svelte @@ -0,0 +1,24 @@ + + + +{value} diff --git a/packages/visualizations/src/components/Format/NumberFormat.svelte b/packages/visualizations/src/components/Format/NumberFormat.svelte new file mode 100644 index 00000000..f1839eaf --- /dev/null +++ b/packages/visualizations/src/components/Format/NumberFormat.svelte @@ -0,0 +1,27 @@ + + +{value} diff --git a/packages/visualizations/src/components/Format/ShortTextFormat.svelte b/packages/visualizations/src/components/Format/ShortTextFormat.svelte new file mode 100644 index 00000000..3b517ec4 --- /dev/null +++ b/packages/visualizations/src/components/Format/ShortTextFormat.svelte @@ -0,0 +1,23 @@ + + +{value} diff --git a/packages/visualizations/src/components/Table/Cell/Format/URLFormat.svelte b/packages/visualizations/src/components/Format/URLFormat.svelte similarity index 62% rename from packages/visualizations/src/components/Table/Cell/Format/URLFormat.svelte rename to packages/visualizations/src/components/Format/URLFormat.svelte index 0cf8865c..8923ce0a 100644 --- a/packages/visualizations/src/components/Table/Cell/Format/URLFormat.svelte +++ b/packages/visualizations/src/components/Format/URLFormat.svelte @@ -1,16 +1,19 @@ -
+ { + hoveredRow = null; + }} +> {#if records?.length === 0 && !loadingRowsNumber} {/if} @@ -22,22 +30,19 @@ {/each} {:else if records} - {#each records as record} - - {#each columns as column} - - {/each} - + {#each records as record, rowIndex} + { + hoveredRow = rowIndex; + }} + isHovered={hoveredRow === rowIndex} + /> {/each} {/if} diff --git a/packages/visualizations/src/components/Table/Cell/Cell.svelte b/packages/visualizations/src/components/Table/Cell/Cell.svelte index f501ce3d..4d67098a 100644 --- a/packages/visualizations/src/components/Table/Cell/Cell.svelte +++ b/packages/visualizations/src/components/Table/Cell/Cell.svelte @@ -1,17 +1,39 @@ - diff --git a/packages/visualizations/src/components/Table/Cell/Format/DateFormat.svelte b/packages/visualizations/src/components/Table/Cell/Format/DateFormat.svelte deleted file mode 100644 index 81ecc387..00000000 --- a/packages/visualizations/src/components/Table/Cell/Format/DateFormat.svelte +++ /dev/null @@ -1,24 +0,0 @@ - - -{value} diff --git a/packages/visualizations/src/components/Table/Cell/Format/LongTextFormat.svelte b/packages/visualizations/src/components/Table/Cell/Format/LongTextFormat.svelte deleted file mode 100644 index 97b42260..00000000 --- a/packages/visualizations/src/components/Table/Cell/Format/LongTextFormat.svelte +++ /dev/null @@ -1,18 +0,0 @@ - - - -{value} diff --git a/packages/visualizations/src/components/Table/Cell/Format/NumberFormat.svelte b/packages/visualizations/src/components/Table/Cell/Format/NumberFormat.svelte deleted file mode 100644 index 562d306b..00000000 --- a/packages/visualizations/src/components/Table/Cell/Format/NumberFormat.svelte +++ /dev/null @@ -1,21 +0,0 @@ - - -{value} diff --git a/packages/visualizations/src/components/Table/Cell/Format/ShortTextFormat.svelte b/packages/visualizations/src/components/Table/Cell/Format/ShortTextFormat.svelte deleted file mode 100644 index d0d1eb2e..00000000 --- a/packages/visualizations/src/components/Table/Cell/Format/ShortTextFormat.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - -{value} diff --git a/packages/visualizations/src/components/Table/Cell/utils.ts b/packages/visualizations/src/components/Table/Cell/utils.ts new file mode 100644 index 00000000..26f57ea8 --- /dev/null +++ b/packages/visualizations/src/components/Table/Cell/utils.ts @@ -0,0 +1,8 @@ +import type { DataFormat, Column, ColumnOfType } from '../types'; + +export default function isColumnOfType( + column: Column, + format: K +): column is ColumnOfType { + return column.dataFormat === format; +} diff --git a/packages/visualizations/src/components/Table/Headers/Headers.svelte b/packages/visualizations/src/components/Table/Headers/Headers.svelte index fea4ce4f..0047921f 100644 --- a/packages/visualizations/src/components/Table/Headers/Headers.svelte +++ b/packages/visualizations/src/components/Table/Headers/Headers.svelte @@ -3,10 +3,14 @@ import type { Column } from '../types'; export let columns: Column[]; + export let extraButtonColumn = false; + {#if extraButtonColumn} + + {#if rowProps?.onClick} + + {/if} + {#each columns as column} + + {/each} + + + diff --git a/packages/visualizations/src/components/Table/Table.svelte b/packages/visualizations/src/components/Table/Table.svelte index 352ccda8..81de6c9a 100644 --- a/packages/visualizations/src/components/Table/Table.svelte +++ b/packages/visualizations/src/components/Table/Table.svelte @@ -1,7 +1,7 @@
+ {#if isValidRawValue(rawValue)} - + {#if isColumnOfType(column, DATA_FORMAT.boolean)} + + {:else if isColumnOfType(column, DATA_FORMAT.date)} + + {:else if isColumnOfType(column, DATA_FORMAT.geo)} + + {:else if isColumnOfType(column, DATA_FORMAT.shortText)} + + {:else if isColumnOfType(column, DATA_FORMAT.longText)} + + {:else if isColumnOfType(column, DATA_FORMAT.number)} + + {:else if isColumnOfType(column, DATA_FORMAT.url)} + + {/if} {/if}
+ {/if} {#each columns as column} {#if column.onClick} diff --git a/packages/visualizations/src/components/Table/Row.svelte b/packages/visualizations/src/components/Table/Row.svelte new file mode 100644 index 00000000..dcf9d942 --- /dev/null +++ b/packages/visualizations/src/components/Table/Row.svelte @@ -0,0 +1,105 @@ + + +
+ +
- - + +
{#if description} diff --git a/packages/visualizations/src/components/Table/TableCard.svelte b/packages/visualizations/src/components/Table/TableCard.svelte index 254c94b2..aaf88dde 100644 --- a/packages/visualizations/src/components/Table/TableCard.svelte +++ b/packages/visualizations/src/components/Table/TableCard.svelte @@ -12,8 +12,10 @@ export let options: $$Props['options']; $: ({ value: records, loading: isLoading } = data); + $: ({ columns, + rowProps, title, subtitle, description, @@ -33,7 +35,7 @@
- +
{#if pagination} {/if} diff --git a/packages/visualizations/src/components/Table/ZoomIcon.svelte b/packages/visualizations/src/components/Table/ZoomIcon.svelte new file mode 100644 index 00000000..bcbc7d88 --- /dev/null +++ b/packages/visualizations/src/components/Table/ZoomIcon.svelte @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/packages/visualizations/src/components/Table/types.ts b/packages/visualizations/src/components/Table/types.ts index f850e998..a2d1232d 100644 --- a/packages/visualizations/src/components/Table/types.ts +++ b/packages/visualizations/src/components/Table/types.ts @@ -1,4 +1,12 @@ -import type { WebGlMapData, WebGlMapOptions } from 'components/Map'; +import type { + BooleanFormatProps, + DateFormatProps, + GeoFormatProps, + ShortTextFormatProps, + LongTextFormatProps, + NumberFormatProps, + URLFormatProps, +} from 'components/Format/types'; import type { Async, DataFrame, Source } from 'types'; import type { Pagination } from '../Pagination/types'; import type { DATA_FORMAT } from './constants'; @@ -26,88 +34,48 @@ type BaseColumn = { onClick?: () => void; }; -export type ShortTextColumn = BaseColumn & { - dataFormat: typeof DATA_FORMAT.shortText; - options?: { - display?: (v: string) => string; - }; -}; +// Eliminate rawValue from props to match column options +type ColumnOptions = Omit; -export type LongTextColumn = BaseColumn & { - dataFormat: typeof DATA_FORMAT.longText; - options?: { - display?: (v: string) => string; - }; +type FormatPropsTypeMap = { + [DATA_FORMAT.boolean]: ColumnOptions; + [DATA_FORMAT.date]: ColumnOptions; + [DATA_FORMAT.geo]: ColumnOptions; + [DATA_FORMAT.shortText]: ColumnOptions; + [DATA_FORMAT.longText]: ColumnOptions; + [DATA_FORMAT.number]: ColumnOptions; + [DATA_FORMAT.url]: ColumnOptions; }; -export type NumberColumn = BaseColumn & { - dataFormat: typeof DATA_FORMAT.number; - options?: { - /** Function to update the data value. Takes an argument which is the result of Intl.NumberFormat. */ - display?: (v: string) => string; - /** - * Configuration options for formatting numbers using Intl.NumberFormat. See: - * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options - */ - intl?: Intl.NumberFormatOptions; - }; +export type ColumnOfType = BaseColumn & { + dataFormat: F; + options?: FormatPropsTypeMap[F]; }; -export type DateColumn = BaseColumn & { - dataFormat: typeof DATA_FORMAT.date; - options?: { - /** Function to update the data value. Takes an argument which is the result of Intl.DateTimeFormat. */ - display?: (v: string) => string; - /** - * Configuration options for formatting dates using Intl.DateTimeFormat. See: - * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options - */ - intl?: Intl.DateTimeFormatOptions; - }; -}; +export type Column = ColumnOfType; -export type BooleanColumn = BaseColumn & { - dataFormat: typeof DATA_FORMAT.boolean; - options?: { - display?: (v: boolean) => string; - }; -}; +export type BooleanColumn = ColumnOfType; +export type DateColumn = ColumnOfType; +export type GeoColumn = ColumnOfType; +export type ShortTextColumn = ColumnOfType; +export type LongTextColumn = ColumnOfType; +export type NumberColumn = ColumnOfType; +export type URLColumn = ColumnOfType; -/** - * Render HTML \ tag if the record value is a valid URL. - */ -export type URLColumn = BaseColumn & { - dataFormat: typeof DATA_FORMAT.url; - options?: { - display?: (v: string) => string; - /** Default is `_blank` */ - target?: string; - /** Default is `nofollow noopener noreferrer` */ - rel?: string; - }; +export type HoverEvent = (MouseEvent | FocusEvent) & { + currentTarget: EventTarget & T; }; -export type GeoColumn = BaseColumn & { - dataFormat: typeof DATA_FORMAT.geo; - options?: Partial<{ - mapOptions: WebGlMapOptions; - display: (v: unknown) => string; - sources: (v: unknown) => WebGlMapData['sources']; - layers: (v: unknown) => WebGlMapData['layers']; - }>; +export type RowProps = { + onClick?: (record?: Record, e?: HoverEvent) => void; + onMouseEnter?: (record?: Record, e?: HoverEvent) => void; + onMouseLeave?: (record?: Record, e?: HoverEvent) => void; + actionAriaLabel?: string; }; -export type Column = - | ShortTextColumn - | LongTextColumn - | NumberColumn - | DateColumn - | BooleanColumn - | URLColumn - | GeoColumn; - export type TableOptions = { columns: Column[]; + rowProps?: RowProps; title?: string; subtitle?: string; description?: string; diff --git a/packages/visualizations/src/index.ts b/packages/visualizations/src/index.ts index ac723372..40eba4c2 100644 --- a/packages/visualizations/src/index.ts +++ b/packages/visualizations/src/index.ts @@ -21,5 +21,15 @@ export * from './components/MarkdownText/types'; export * from './components/Pagination/types'; export { default as Table } from './components/Table'; export * from './components/Table/types'; +export { + BooleanFormat, + DateFormat, + GeoFormat, + ShortTextFormat, + LongTextFormat, + NumberFormat, + URLFormat, +} from './components/Format'; +export * from './components/Format/types'; export * from './components/utils'; export * from './types';