From 8dcbe2dfbefeb2c27dab852d7996dc7cc596287b Mon Sep 17 00:00:00 2001 From: Nancy <68706811+nancy-dassana@users.noreply.github.com> Date: Wed, 23 Jun 2021 16:59:53 -0700 Subject: [PATCH] enhancement #350, #351 - Updates for Policy Hub (#352) Closes #350 Closes #351 --- package.json | 2 +- src/components/Table/CellWithTooltip.tsx | 4 +- .../Table/__tests__/Table.sort.test.ts | 22 +++++++ src/components/Table/__tests__/utils.test.tsx | 13 +++- .../Table/fixtures/0_sample_data.ts | 11 ++++ src/components/Table/utils.tsx | 66 ++++++++++--------- src/components/Tabs/TabPane.tsx | 10 +-- 7 files changed, 89 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index 929b26e7..9093fd40 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@dassana-io/web-components", - "version": "0.11.5", + "version": "0.11.6", "publishConfig": { "registry": "https://npm.pkg.github.com/dassana-io" }, diff --git a/src/components/Table/CellWithTooltip.tsx b/src/components/Table/CellWithTooltip.tsx index 7796f9ab..63bec366 100644 --- a/src/components/Table/CellWithTooltip.tsx +++ b/src/components/Table/CellWithTooltip.tsx @@ -19,10 +19,12 @@ const useStyles = createUseStyles({ }) interface CellWithTooltipProps { + showTooltip?: boolean text: string } export const CellWithTooltip: FC = ({ + showTooltip = true, text }: CellWithTooltipProps) => { const [hasTooltip, setHasTooltip] = useState(false) @@ -31,7 +33,7 @@ export const CellWithTooltip: FC = ({ const classes = useStyles() - return isMobile ? ( + return isMobile || !showTooltip ? ( <>{text} ) : (
diff --git a/src/components/Table/__tests__/Table.sort.test.ts b/src/components/Table/__tests__/Table.sort.test.ts index e66a803a..0f835c01 100644 --- a/src/components/Table/__tests__/Table.sort.test.ts +++ b/src/components/Table/__tests__/Table.sort.test.ts @@ -75,6 +75,28 @@ describe('Table sort: Column type - "string', () => { ]) }) + it('sorts columns with array values in correct ascending and correct descending order', () => { + const sorter = wrapper.find('thead').find('th').at(2) + + const ascendingOrder = [ + ['apples, bananas'], + ['blueberries, peaches'], + ['mangoes, papayas'], + ['nectarines, plums, raspberries'], + ['oranges, pears'] + ] + + // ascending order + sorter.simulate('click') + expect(renderedData(wrapper, 'description')).toEqual(ascendingOrder) + + // descending order + sorter.simulate('click') + expect(renderedData(wrapper, 'description')).toEqual( + ascendingOrder.reverse() + ) + }) + it('sorts columns with missing cells in correct ascending and correct descending order', () => { wrapper = mount(createTable(mockData3)) const sorter = wrapper.find('.ant-table-column-has-sorters').first() diff --git a/src/components/Table/__tests__/utils.test.tsx b/src/components/Table/__tests__/utils.test.tsx index 8590be86..bc8afb93 100644 --- a/src/components/Table/__tests__/utils.test.tsx +++ b/src/components/Table/__tests__/utils.test.tsx @@ -64,6 +64,12 @@ describe('processColumns', () => { showSorterTooltip: false, sorter: expect.any(Function), title: 'Age' + }, + { + dataIndex: 'description', + showSorterTooltip: false, + sorter: expect.any(Function), + title: 'Description' } ] @@ -168,7 +174,12 @@ describe('processData', () => { describe('mapFilterKeys', () => { it('returns all column keys that should be searched or filtered on', () => { - const mockFilteredKeys0 = ['_FORMATTED_DATA', 'name', 'age'] + const mockFilteredKeys0 = [ + '_FORMATTED_DATA', + 'name', + 'age', + 'description' + ] const mockFilteredKeys2 = [ '_FORMATTED_DATA', 'name', diff --git a/src/components/Table/fixtures/0_sample_data.ts b/src/components/Table/fixtures/0_sample_data.ts index 672b3481..926c1ca9 100644 --- a/src/components/Table/fixtures/0_sample_data.ts +++ b/src/components/Table/fixtures/0_sample_data.ts @@ -4,6 +4,7 @@ export interface Person { name: string id: number | string age: number + description: string[] } const { number, string } = ColumnTypes @@ -18,32 +19,42 @@ const columns: ColumnType[] = [ dataIndex: 'age', title: 'Age', type: number + }, + { + dataIndex: 'description', + title: 'Description', + type: string } ] const data: Person[] = [ { age: 36, + description: ['apples, bananas'], id: 0, name: 'Lorem' }, { age: 32, + description: ['oranges, pears'], id: 1, name: 'Ipsum' }, { age: 45, + description: ['blueberries, peaches'], id: 2, name: 'Amet' }, { age: 50, + description: ['nectarines, plums, raspberries'], id: 3, name: 'Elit' }, { age: 22, + description: ['mangoes, papayas'], id: 4, name: 'Dolor' } diff --git a/src/components/Table/utils.tsx b/src/components/Table/utils.tsx index 16b808ae..49e3e552 100644 --- a/src/components/Table/utils.tsx +++ b/src/components/Table/utils.tsx @@ -174,22 +174,29 @@ export function mapFilterKeys(columns: ColumnType[]) { /* -*-*-*-*-*- Helpers for parsing columns -*-*-*-*-*- */ -const compareIcons = (column: ComponentIconType) => ( - a: Record, - b: Record -) => { - const { - dataIndex, - renderProps: { iconKey } - } = column +const compareIcons = + (column: ComponentIconType) => + (a: Record, b: Record) => { + const { + dataIndex, + renderProps: { iconKey } + } = column + + const jsonPath = iconKey + ? `$.${dataIndex}.${iconKey}` + : `$.${dataIndex}` - const jsonPath = iconKey ? `$.${dataIndex}.${iconKey}` : `$.${dataIndex}` + const compareValA = getJSONPathValue(jsonPath, a) || '' - const compareValA = getJSONPathValue(jsonPath, a) || '' + const compareValB = getJSONPathValue(jsonPath, b) || '' + + return compareValA.localeCompare(compareValB) + } - const compareValB = getJSONPathValue(jsonPath, b) || '' +const getStrVal = (value?: string | string[]) => { + if (!value) return '' - return compareValA.localeCompare(compareValB) + return Array.isArray(value) ? value.join(', ') : value } /* @@ -198,10 +205,10 @@ const compareIcons = (column: ComponentIconType) => ( */ function compareStrings(column: ColumnType) { return (a: Record, b: Record) => { - const compareValA: string = a[column.dataIndex] || '' - const compareValB: string = b[column.dataIndex] || '' + const valA = getStrVal(a[column.dataIndex]) + const valB = getStrVal(b[column.dataIndex]) - return compareValA.localeCompare(compareValB) + return valA.localeCompare(valB) } } @@ -295,16 +302,8 @@ function applyRender( tableMethods: TableMethods ) { const { component, number, string } = ColumnTypes - const { - action, - byte, - date, - icon, - coloredDot, - link, - tag, - toggle - } = ColumnFormats + const { action, byte, date, icon, coloredDot, link, tag, toggle } = + ColumnFormats const { updateRowData } = tableMethods switch (column.type) { @@ -356,11 +355,17 @@ function applyRender( break } } - } else if (ellipsis) { - antDColumn.render = (record: string) => ( - + } else { + antDColumn.render = (record: string | string[]) => ( + ) } + break } @@ -416,9 +421,8 @@ function applyRender( switch (type) { case 'icon': { - const { - iconMap - } = renderProps as RenderPropsIcon + const { iconMap } = + renderProps as RenderPropsIcon return { icon: iconMap[val] } } diff --git a/src/components/Tabs/TabPane.tsx b/src/components/Tabs/TabPane.tsx index e7134558..474862ab 100644 --- a/src/components/Tabs/TabPane.tsx +++ b/src/components/Tabs/TabPane.tsx @@ -11,6 +11,7 @@ const useStyles = createUseStyles({ tabPane: { ...font.body, display: ({ isActive }) => (isActive ? 'block' : 'none'), + height: '100%', padding: `${spacing.m}px ${spacing.l}px` } }) @@ -30,18 +31,17 @@ const TabPane: FC = ({ return ( - -
- {render()} -
- + {render()} + ) }