diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts index 96ea391d..5ab5b214 100644 --- a/src/components/Table/types.ts +++ b/src/components/Table/types.ts @@ -16,6 +16,7 @@ export enum ColumnFormats { date = 'date', byte = 'byte', icon = 'icon', + iconArray = 'iconArray', coloredDot = 'coloredDot', link = 'link', tag = 'tag', @@ -112,7 +113,7 @@ export interface ComponentActionType extends PartialComponentType { } interface ComponentIconType extends PartialComponentType { - format: ColumnFormats.icon + format: ColumnFormats.icon | ColumnFormats.iconArray renderProps: RenderPropsIcon | RenderPropsIconKey | RenderPropsIconUrl } diff --git a/src/components/Table/utils.tsx b/src/components/Table/utils.tsx index f0dcd563..c76923fa 100644 --- a/src/components/Table/utils.tsx +++ b/src/components/Table/utils.tsx @@ -108,8 +108,10 @@ export function processData( path: dataIndex }) - if (value.length) - partialData[dataIndex as keyof TableData] = value[0] + if (value.length) { + partialData[dataIndex as keyof TableData] = + value.length <= 1 ? value[0] : value + } } else { partialData[dataIndex as keyof TableData] = item[dataIndex] } @@ -268,6 +270,7 @@ function applyRender( byte, date, icon, + iconArray, coloredDot, link, tag, @@ -345,9 +348,10 @@ function applyRender( } break } + case icon: { - antDColumn.render = (record: IconName | string) => { - if (record === undefined) return '' + antDColumn.render = (record?: IconName | string) => { + if (!record) return '' const renderProps = column.renderProps const { height = 25 } = renderProps @@ -385,6 +389,59 @@ function applyRender( break } + case iconArray: { + antDColumn.render = (record?: (IconName | string)[]) => { + if (!record) return '' + + if (!Array.isArray(record)) + throw new Error( + 'ColumnFormats.iconArray requires an array of icons' + ) + + const renderProps = column.renderProps + const { height = 25 } = renderProps + + let iconPropsArr: IconProps[] = [] + + switch (renderProps.type) { + case 'icon': { + iconPropsArr = record.map(item => ({ + icon: renderProps.iconMap[item] + })) + break + } + + case 'iconKey': { + iconPropsArr = record.map(item => ({ + iconKey: item as IconName + })) + break + } + + case 'iconUrl': { + iconPropsArr = record.map(item => ({ + icon: item + })) + + break + } + } + + return ( +
+ {iconPropsArr.map((iconProps, i) => ( + + ))} +
+ ) + } + break + } + case coloredDot: { antDColumn.render = (record: string) => { const { colorMap } = column.renderProps