From ee6e7489018655d48013dc4b97f71e3acd8ac27b Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 9 Dec 2024 17:13:44 +0100 Subject: [PATCH] fix(AnalyticalTable - TypeScript): adjust column types for filtering (#6715) --- .../AnalyticalTable/AnalyticalTable.mdx | 2 +- .../defaults/FilterComponent/index.tsx | 17 +++++++----- .../components/AnalyticalTable/types/index.ts | 26 ++++++++++++++++--- 3 files changed, 34 insertions(+), 11 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx index fc41c665c67..13d3dad696b 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx @@ -110,7 +110,7 @@ const TableComp = () => { | `disableFilters` | `boolean` | Disable filters for this column | | `disableGlobalFilter` | `boolean` | Disable global filtering for this column | | `defaultCanFilter` | `boolean` | If set to true, this column will be filterable, regardless if it has a valid `accessor` | -| `filter` | `string OR Function` | Either a string or a filter function.
Supported String Values: | +| `filter` | `string OR Function` | Either a string or a filter function.
Supported String Values: **Note:** When the standard `Filter` component is used, the filter function is not triggered if the `filterValue` is empty, as the filter is then removed. | | `Aggregated` | `ComponentType` | Component to render for aggregated cells | | `aggregate` | `string` OR
`((leafValues, aggregatedValues) => any)` | Aggregation function or string.
Supported String Values: | | `aggregateValue` | `string` OR
`((values, row, column) => any)` | When attempting to group/aggregate non primitive cell values (eg. arrays of items) you will likely need to resolve a stable primitive value like a number or string to use in normal row aggregations. This property can be used to aggregate or simply access the value to be used in aggregations eg. count-ing the unique number of items in a cell's array value before sum-ing that count across the table | diff --git a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx index 8a6098dca53..9929bfd968f 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx @@ -1,20 +1,25 @@ -import type { FC } from 'react'; import { useCallback } from 'react'; import { stopPropagation } from '../../../../internal/stopPropagation.js'; +import type { InputPropTypes } from '../../../../webComponents/Input/index.js'; import { Input } from '../../../../webComponents/Input/index.js'; +import type { FilterProps } from '../../types/index.js'; -export const DefaultFilterComponent: FC = ({ column }) => { - const handleChange = useCallback( +export const DefaultFilterComponent = ({ column }: FilterProps) => { + const handleInput: InputPropTypes['onInput'] = useCallback( (e) => { + // Setting the filter to `undefined` removes it column.setFilter(e.target.value || undefined); }, [column.setFilter] ); - const handleKeyDown = (e) => { + + const handleKeyDown: InputPropTypes['onKeyDown'] = (e) => { if (e.key !== 'Enter') { stopPropagation(e); } }; - // todo remove "undefined" check if wc issue has been fixed (https://github.com/SAP/ui5-webcomponents/issues/2616) - return ; + + return ; }; + +DefaultFilterComponent.displayName = 'DefaultFilterComponent'; diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts index 82b680ed478..dd9bebd0a6d 100644 --- a/packages/main/src/components/AnalyticalTable/types/index.ts +++ b/packages/main/src/components/AnalyticalTable/types/index.ts @@ -14,6 +14,7 @@ import type { VerticalAlign } from '../../../enums/index.js'; import type { CommonProps } from '../../../types/index.js'; +import type { PopoverDomRef } from '../../../webComponents/Popover/index.js'; export enum RenderColumnTypes { Filter = 'Filter', @@ -60,7 +61,12 @@ export interface ColumnType extends Omit * @param props The props are added to the table instance */ render?: (type: RenderColumnTypes | keyof typeof RenderColumnTypes, props: Record) => ReactNode; - setFilter?: (val: string) => void; + /** + * Set the filter value for the current column. + * + * __Note:__ If set to `undefined`, the filter is removed. + */ + setFilter?: (val: string | undefined) => void; sortDescFirst?: boolean; sortedIndex?: number; toggleHidden?: (hidden?: boolean) => void; @@ -139,7 +145,12 @@ export interface TableInstance { selectedFlatRows?: RowType[]; setAllFilters?: (filtersObjectArray: Record[]) => void; setColumnOrder?: any; - setFilter?: (columnId: string, filterValue: string) => void; + /** + * Set the filter value for the defined column. + * + * __Note:__ If set to `undefined`, the filter is removed. + */ + setFilter?: (columnId: string, filterValue: string | undefined) => void; setGlobalFilter?: (filterValue: string) => void; setGroupBy?: (columnIds: string[]) => void; setHiddenColumns?: (columnIds: string[]) => void; @@ -323,6 +334,11 @@ export interface TableInstanceWithPopoverProps extends TableInstance { popoverProps: PopoverProps; } +export interface FilterProps { + column: ColumnType; + popoverRef: MutableRefObject; +} + export interface AnalyticalTableColumnDefinition { // base properties /** @@ -403,7 +419,7 @@ export interface AnalyticalTableColumnDefinition { /** * Filter Component to be rendered in the Header. */ - Filter?: string | ComponentType | ((props?: any) => ReactNode); + Filter?: ComponentType | ((props: FilterProps) => ReactNode); /** * Disable filters for this column. */ @@ -420,8 +436,10 @@ export interface AnalyticalTableColumnDefinition { * * `exactText` * * `exactTextCase` * * `equals` + * + * __Note:__ When the standard `Filter` component is used, the filter function is not triggered if the `filterValue` is empty, as the filter is then removed. */ - filter?: string | ((rows: any[], columnIds: string[], filterValue: string) => any); + filter?: string | ((rows: RowType[], columnIds: string[], filterValue: string) => RowType[]); // useGlobalFilter /**