From 2fa8f989ae29187c25786314570390e49d7ac2dd Mon Sep 17 00:00:00 2001 From: "Hugh A. Miles II" Date: Mon, 20 Mar 2023 13:26:27 -0700 Subject: [PATCH] chore: Update typing for `Table` component (#23398) Co-authored-by: Cody Leff --- .../Chart/DrillDetail/DrillDetailPane.tsx | 8 +- .../src/components/Table/Table.stories.tsx | 6 +- .../src/components/Table/VirtualTable.tsx | 23 +++- .../src/components/Table/index.tsx | 126 +++++------------- .../AddDataset/EditDataset/UsageTab/index.tsx | 2 + 5 files changed, 60 insertions(+), 105 deletions(-) diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx index cf387b4e7e..0a46ee5549 100644 --- a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx +++ b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx @@ -42,11 +42,7 @@ import NullCell from 'src/components/Table/cell-renderers/NullCell'; import TimeCell from 'src/components/Table/cell-renderers/TimeCell'; import { EmptyStateMedium } from 'src/components/EmptyState'; import { getDatasourceSamples } from 'src/components/Chart/chartAction'; -import Table, { - ColumnsType, - TablePaginationConfig, - TableSize, -} from 'src/components/Table'; +import Table, { ColumnsType, TableSize } from 'src/components/Table'; import MetadataBar, { ContentType, MetadataType, @@ -302,7 +298,7 @@ export default function DrillDetailPane({ recordCount={resultsPage?.total} usePagination loading={isLoading} - onChange={(pagination: TablePaginationConfig) => + onChange={pagination => setPageIndex(pagination.current ? pagination.current - 1 : 0) } resizable diff --git a/superset-frontend/src/components/Table/Table.stories.tsx b/superset-frontend/src/components/Table/Table.stories.tsx index 7ae3525562..4a890aadf4 100644 --- a/superset-frontend/src/components/Table/Table.stories.tsx +++ b/superset-frontend/src/components/Table/Table.stories.tsx @@ -404,7 +404,7 @@ export const ServerPagination: ComponentStory = args => { const [data, setData] = useState(generateData(0, 5)); const [loading, setLoading] = useState(false); - const handleChange: OnChangeFunction = ( + const handleChange: OnChangeFunction = ( pagination, filters, sorter, @@ -610,7 +610,7 @@ const shoppingData: ShoppingData[] = [ }, ]; -export const HeaderRenderers: ComponentStory = args => { +export const HeaderRenderers: ComponentStory = () => { const [orderDateFormatting, setOrderDateFormatting] = useState('formatted'); const [priceLocale, setPriceLocale] = useState(LocaleCode.en_US); const shoppingColumns: ColumnsType = [ @@ -672,7 +672,7 @@ export const HeaderRenderers: ComponentStory = args => { ]; return ( - data={shoppingData} columns={shoppingColumns} size={TableSize.SMALL} diff --git a/superset-frontend/src/components/Table/VirtualTable.tsx b/superset-frontend/src/components/Table/VirtualTable.tsx index 9169e0753b..721fd906b4 100644 --- a/superset-frontend/src/components/Table/VirtualTable.tsx +++ b/superset-frontend/src/components/Table/VirtualTable.tsx @@ -16,17 +16,24 @@ * specific language governing permissions and limitations * under the License. */ -import { Table as AntTable } from 'antd'; + +import AntTable, { + TablePaginationConfig, + TableProps as AntTableProps, +} from 'antd/lib/table'; import classNames from 'classnames'; import { useResizeDetector } from 'react-resize-detector'; import React, { useEffect, useRef, useState, useCallback } from 'react'; import { VariableSizeGrid as Grid } from 'react-window'; -import { StyledComponent } from '@emotion/styled'; import { useTheme, styled } from '@superset-ui/core'; -import { TablePaginationConfig } from 'antd/lib/table'; -import { TableProps, TableSize, ETableAction } from './index'; -const StyledCell: StyledComponent = styled('div')( +import { TableSize, ETableAction } from './index'; + +interface VirtualTableProps extends AntTableProps { + height?: number; +} + +const StyledCell = styled('div')<{ height?: number }>( ({ theme, height }) => ` white-space: nowrap; overflow: hidden; @@ -40,7 +47,7 @@ const StyledCell: StyledComponent = styled('div')( `, ); -const StyledTable: StyledComponent = styled(AntTable)( +const StyledTable = styled(AntTable)<{ height?: number }>( ({ theme }) => ` th.ant-table-cell { font-weight: ${theme.typography.weights.bold}; @@ -61,7 +68,9 @@ const StyledTable: StyledComponent = styled(AntTable)( const SMALL = 39; const MIDDLE = 47; -const VirtualTable = (props: TableProps) => { +const VirtualTable = ( + props: VirtualTableProps, +) => { const { columns, pagination, onChange, height, scroll, size } = props; const [tableWidth, setTableWidth] = useState(0); const onResize = useCallback((width: number) => { diff --git a/superset-frontend/src/components/Table/index.tsx b/superset-frontend/src/components/Table/index.tsx index 55b004570a..662908a750 100644 --- a/superset-frontend/src/components/Table/index.tsx +++ b/superset-frontend/src/components/Table/index.tsx @@ -17,33 +17,18 @@ * under the License. */ import React, { useState, useEffect, useRef, ReactElement } from 'react'; -import { Table as AntTable, ConfigProvider } from 'antd'; -import { - ColumnType, - ColumnGroupType, +import AntTable, { + ColumnsType, TableProps as AntTableProps, -} from 'antd/es/table'; -import { PaginationProps } from 'antd/es/pagination'; -import { Key } from 'antd/lib/table/interface'; -import { t, useTheme, logging } from '@superset-ui/core'; +} from 'antd/lib/table'; +import ConfigProvider from 'antd/lib/config-provider'; +import { PaginationProps } from 'antd/lib/pagination'; +import { t, useTheme, logging, styled } from '@superset-ui/core'; import Loading from 'src/components/Loading'; -import styled, { StyledComponent } from '@emotion/styled'; import InteractiveTableUtils from './utils/InteractiveTableUtils'; import VirtualTable from './VirtualTable'; export const SUPERSET_TABLE_COLUMN = 'superset/table-column'; -export interface TableDataType { - key: React.Key; -} - -export interface TablePaginationConfig extends PaginationProps { - extra?: object; -} - -export type ColumnsType = ( - | ColumnGroupType - | ColumnType -)[]; export enum SelectionType { 'DISABLED' = 'disabled', @@ -51,36 +36,7 @@ export enum SelectionType { 'MULTI' = 'multi', } -export interface Locale { - /** - * Text contained within the Table UI. - */ - filterTitle: string; - filterConfirm: string; - filterReset: string; - filterEmptyText: string; - filterCheckall: string; - filterSearchPlaceholder: string; - emptyText: string; - selectAll: string; - selectInvert: string; - selectNone: string; - selectionAll: string; - sortTitle: string; - expand: string; - collapse: string; - triggerDesc: string; - triggerAsc: string; - cancelSort: string; -} - export type SortOrder = 'descend' | 'ascend' | null; -export interface SorterResult { - column?: ColumnType; - order?: SortOrder; - field?: Key | Key[]; - columnKey?: Key; -} export enum ETableAction { PAGINATE = 'paginate', @@ -88,27 +44,24 @@ export enum ETableAction { FILTER = 'filter', } -export interface TableCurrentDataSource { - currentDataSource: RecordType[]; - action: ETableAction; +export { ColumnsType }; +export type OnChangeFunction = + AntTableProps['onChange']; + +export enum TableSize { + SMALL = 'small', + MIDDLE = 'middle', } -export type OnChangeFunction = ( - pagination: TablePaginationConfig, - filters: Record, - sorter: SorterResult | SorterResult[], - extra: TableCurrentDataSource, -) => void; - -export interface TableProps extends AntTableProps { +export interface TableProps { /** * Data that will populate the each row and map to the column key. */ - data: object[]; + data: RecordType[]; /** * Table column definitions. */ - columns: ColumnsType; + columns: ColumnsType; /** * Array of row keys to represent list of selected rows. */ @@ -116,13 +69,13 @@ export interface TableProps extends AntTableProps { /** * Callback function invoked when a row is selected by user. */ - handleRowSelection?: Function; + handleRowSelection?: (newSelectedRowKeys: React.Key[]) => void; /** * Controls the size of the table. */ size: TableSize; /** - * Adjusts the padding around elements for different amounts of spacing between elements. + * Controls if table rows are selectable and if multiple select is supported. */ selectionType?: SelectionType; /* @@ -165,7 +118,7 @@ export interface TableProps extends AntTableProps { /** * Enables setting the text displayed in various components and tooltips within the Table UI. */ - locale?: Locale; + locale?: Partial['locale']>; /** * Restricts the visible height of the table and allows for internal scrolling within the table * when the number of rows exceeds the visible space. @@ -183,20 +136,11 @@ export interface TableProps extends AntTableProps { /** * Invoked when the tables sorting, paging, or filtering is changed. */ - onChange?: OnChangeFunction; -} - -interface IPaginationOptions { - hideOnSinglePage: boolean; - pageSize: number; - pageSizeOptions: string[]; - onShowSizeChange: Function; - total?: number; -} - -export enum TableSize { - SMALL = 'small', - MIDDLE = 'middle', + onChange?: OnChangeFunction; + /** + * Returns props that should be applied to each row component. + */ + onRow?: AntTableProps['onRow']; } const defaultRowSelection: React.Key[] = []; @@ -204,7 +148,7 @@ const defaultRowSelection: React.Key[] = []; const PAGINATION_HEIGHT = 40; const HEADER_HEIGHT = 68; -const StyledTable: StyledComponent = styled(AntTable)( +const StyledTable = styled(AntTable)<{ height?: number }>( ({ theme, height }) => ` .ant-table-body { overflow: auto; @@ -231,11 +175,9 @@ const StyledTable: StyledComponent = styled(AntTable)( .ant-pagination-item-active { border-color: ${theme.colors.primary.base}; } - } -`, + `, ); - -const StyledVirtualTable: StyledComponent = styled(VirtualTable)( +const StyledVirtualTable = styled(VirtualTable)( ({ theme }) => ` .virtual-table .ant-table-container:before, .virtual-table .ant-table-container:after { @@ -277,7 +219,9 @@ selectionMap[SelectionType.MULTI] = 'checkbox'; selectionMap[SelectionType.SINGLE] = 'radio'; selectionMap[SelectionType.DISABLED] = null; -export function Table(props: TableProps) { +export function Table( + props: TableProps, +) { const { data, columns, @@ -299,12 +243,15 @@ export function Table(props: TableProps) { virtualize = false, onChange = noop, recordCount, + onRow, } = props; const wrapperRef = useRef(null); const [derivedColumns, setDerivedColumns] = useState(columns); const [pageSize, setPageSize] = useState(defaultPageSize); - const [mergedLocale, setMergedLocale] = useState({ ...defaultLocale }); + const [mergedLocale, setMergedLocale] = useState< + Required>['locale'] + >({ ...defaultLocale }); const [selectedRowKeys, setSelectedRowKeys] = useState(selectedRows); const interactiveTableUtils = useRef(null); @@ -387,7 +334,7 @@ export function Table(props: TableProps) { const theme = useTheme(); - const paginationSettings: IPaginationOptions | false = usePagination + const paginationSettings: PaginationProps | false = usePagination ? { hideOnSinglePage: true, pageSize, @@ -420,12 +367,13 @@ export function Table(props: TableProps) { loading: { spinning: loading ?? false, indicator: }, hasData: hideData ? false : data, columns: derivedColumns, - dataSource: hideData ? [undefined] : data, + dataSource: hideData ? undefined : data, size, pagination: paginationSettings, locale: mergedLocale, showSorterTooltip: false, onChange, + onRow, theme, height: bodyHeight, }; diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/EditDataset/UsageTab/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/EditDataset/UsageTab/index.tsx index 99663d91e1..a744381df8 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/EditDataset/UsageTab/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/EditDataset/UsageTab/index.tsx @@ -188,7 +188,9 @@ const useDatasetChartRecords = (datasetId: string) => { ); // Called by table with updated table state to fetch new data + // @ts-ignore const onChange: OnChangeFunction = useCallback( + // @ts-ignore (tablePagination, tableFilters, tableSorter) => { const pageIndex = (tablePagination.current ?? 1) - 1; const pageSize = tablePagination.pageSize ?? 0;