diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index 696ffe7d..7f07b964 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -5102,10 +5102,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` className="tableContainer-0-2-249" >
= args => { const filtersList: FiltersList = [ { id: 'some-id', - selectedKey: 'service', + selectedKey: 'key0', selectedOperator: '=', selectedValues: [{ text: 'EC2', value: 'service0' }] } diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx index 94bb5a8b..9865c0be 100644 --- a/src/components/Table/Table.stories.tsx +++ b/src/components/Table/Table.stories.tsx @@ -1,10 +1,8 @@ import { action } from '@storybook/addon-actions' -import { createUseStyles } from 'react-jss' import { Story } from '@storybook/react/types-6-0' import tableData4 from './fixtures/4_sample_data' import { DataId, Table, TableProps } from '.' import React, { Key, useState } from 'react' -import { styleguide, themes, ThemeType } from 'components/assets/styles' import tableData0, { Person } from './fixtures/0_sample_data' import tableData1, { File } from './fixtures/1_sample_data' import tableData2, { Client } from './fixtures/2_sample_data' @@ -13,10 +11,6 @@ import tableData5, { Dot } from './fixtures/5_sample_data' import tableData6, { Client2 } from './fixtures/6_sample_data' import tableData7, { JSONPathData } from './fixtures/7_sample_data' -const { spacing } = styleguide - -const { dark, light } = ThemeType - const commonArgTypes = { activeRowKey: { control: { disable: true } @@ -55,33 +49,6 @@ const commonArgTypes = { } } -const useStyles = createUseStyles({ - decorator: { - background: themes[light].background.secondary, - height: `calc(100vh - ${spacing.m * 2}px)`, - padding: spacing.l, - width: '100%' - }, - // eslint-disable-next-line sort-keys - '@global': { - [`.${dark}`]: { - '& $decorator': { - background: themes[dark].background.secondary - } - } - } -}) - -export const Decorator = (TableStory: Story) => { - const classes = useStyles() - - return ( -
- -
- ) -} - const DecoratedTableStory = (props: TableProps) => { const [activeRowKey, setActiveRowKey] = useState('') diff --git a/src/components/Table/__tests__/Table.test.tsx b/src/components/Table/__tests__/Table.test.tsx index 0bc3399c..b074ecf7 100644 --- a/src/components/Table/__tests__/Table.test.tsx +++ b/src/components/Table/__tests__/Table.test.tsx @@ -213,9 +213,9 @@ describe('Table search and searchProps', () => { it('it renders the search bar to the left by default', async () => { const table = wrapper.find(Table) - const searchBarWrapper = table.find('[className*="searchBarWrapper"]') + const tableControls = table.find('[className*="tableControls"]') - const style = window.getComputedStyle(searchBarWrapper.getDOMNode()) + const style = window.getComputedStyle(tableControls.getDOMNode()) expect(style.justifyContent).toBe('flex-start') }) @@ -229,9 +229,9 @@ describe('Table search and searchProps', () => { ) const table = wrapper.find(Table) - const searchBarWrapper = table.find('[className*="searchBarWrapper"]') + const tableControls = table.find('[className*="tableControls"]') - const style = window.getComputedStyle(searchBarWrapper.getDOMNode()) + const style = window.getComputedStyle(tableControls.getDOMNode()) expect(style.justifyContent).toBe('flex-end') }) diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx index 57f30467..4251f244 100644 --- a/src/components/Table/index.tsx +++ b/src/components/Table/index.tsx @@ -17,6 +17,7 @@ import { mapData, mapFilterKeys, processColumns, processData } from './utils' import React, { ChangeEvent, Key, + ReactNode, useCallback, useEffect, useState @@ -46,6 +47,11 @@ export interface SearchProps { placement?: 'left' | 'right' } +export interface TableControlsConfig { + classes?: string[] + render?: () => ReactNode +} + export interface TableProps extends CommonComponentProps { /** * Key(id) of active row if onRowClick exists @@ -75,6 +81,7 @@ export interface TableProps extends CommonComponentProps { * Optional Table Pagination config that determines the numbers of table rows to render per page */ paginationConfig?: { rowCount?: number } + tableControlsConfig?: TableControlsConfig scrollConfig?: ScrollConfig /** * Optional prop to enable/disable table search @@ -103,6 +110,7 @@ export const Table = ({ loading = false, paginationConfig = {}, onRowClick, + tableControlsConfig = {}, scrollConfig, search = true, skeletonRowCount = 5, @@ -117,6 +125,11 @@ export const Table = ({ showSizeChanger: false }) + const { + classes: tableControlClasses = [], + render: renderTableControls + } = tableControlsConfig + const { isMobile } = useWindowSize() const tableClasses = useStyles({ @@ -265,7 +278,13 @@ export const Table = ({
{search && ( -
+
+ {renderTableControls && renderTableControls()} - props.searchProps.placement === 'right' ? 'flex-end' : 'flex-start', - marginBottom: spacing.m, - width: '100%' - }, tableContainer: generateTableStyles(light), // eslint-disable-next-line sort-keys '@global': { @@ -271,5 +264,12 @@ export const useStyles = createUseStyles({ }, '& $tableContainer': generateTableStyles(dark) } + }, + tableControls: { + display: 'flex', + justifyContent: props => + props.searchProps.placement === 'right' ? 'flex-end' : 'flex-start', + marginBottom: spacing.m, + width: '100%' } }) diff --git a/src/components/TableDrawer/index.tsx b/src/components/TableDrawer/index.tsx index 4faa62c9..da9f9d30 100644 --- a/src/components/TableDrawer/index.tsx +++ b/src/components/TableDrawer/index.tsx @@ -49,14 +49,12 @@ export interface TableDrawerProps extends Omit, 'activeRowKey' | 'onRowClick'> { drawerContainerClasses?: string[] renderDrawerCmp: (id: Key, rowData: DataType) => ReactNode - renderTableControls?: () => ReactNode tableContainerClasses?: string[] } export const TableDrawer = ({ drawerContainerClasses = [], renderDrawerCmp, - renderTableControls, tableContainerClasses = [], ...rest }: TableDrawerProps) => { @@ -87,7 +85,6 @@ export const TableDrawer = ({ tableContainerClasses )} > - {renderTableControls && renderTableControls()} activeRowKey={rowData.id} onRowClick={onRowClick}