From 4a5243753d3dbd192f269b2516425af41a0b9b1a Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Tue, 7 Mar 2023 13:11:13 +0400 Subject: [PATCH 1/6] chore: added data table types --- .../components/cellmeasurer/CellMeasurer.d.ts | 1 + .../cellmeasurer/CellMeasurerCache.d.ts | 1 + .../src/components/data-table/data-table.jsx | 182 --------------- .../src/components/data-table/data-table.tsx | 218 ++++++++++++++++++ .../src/components/data-table/index.js | 11 - .../src/components/data-table/index.ts | 11 + .../src/components/data-table/table-cell.jsx | 12 - .../src/components/data-table/table-cell.tsx | 12 + ...{table-row-info.jsx => table-row-info.tsx} | 27 +-- .../{table-row.jsx => table-row.tsx} | 92 +++++--- .../components/src/components/list/List.d.ts | 5 + .../src/components/types/common.types.ts | 2 + 12 files changed, 316 insertions(+), 258 deletions(-) create mode 100644 packages/components/src/components/cellmeasurer/CellMeasurer.d.ts create mode 100644 packages/components/src/components/cellmeasurer/CellMeasurerCache.d.ts delete mode 100644 packages/components/src/components/data-table/data-table.jsx create mode 100644 packages/components/src/components/data-table/data-table.tsx delete mode 100644 packages/components/src/components/data-table/index.js create mode 100644 packages/components/src/components/data-table/index.ts delete mode 100644 packages/components/src/components/data-table/table-cell.jsx create mode 100644 packages/components/src/components/data-table/table-cell.tsx rename packages/components/src/components/data-table/{table-row-info.jsx => table-row-info.tsx} (77%) rename packages/components/src/components/data-table/{table-row.jsx => table-row.tsx} (51%) create mode 100644 packages/components/src/components/list/List.d.ts diff --git a/packages/components/src/components/cellmeasurer/CellMeasurer.d.ts b/packages/components/src/components/cellmeasurer/CellMeasurer.d.ts new file mode 100644 index 000000000000..38b11ab6fbf8 --- /dev/null +++ b/packages/components/src/components/cellmeasurer/CellMeasurer.d.ts @@ -0,0 +1 @@ +declare module '@enykeev/react-virtualized/dist/es/CellMeasurer'; diff --git a/packages/components/src/components/cellmeasurer/CellMeasurerCache.d.ts b/packages/components/src/components/cellmeasurer/CellMeasurerCache.d.ts new file mode 100644 index 000000000000..38b11ab6fbf8 --- /dev/null +++ b/packages/components/src/components/cellmeasurer/CellMeasurerCache.d.ts @@ -0,0 +1 @@ +declare module '@enykeev/react-virtualized/dist/es/CellMeasurer'; diff --git a/packages/components/src/components/data-table/data-table.jsx b/packages/components/src/components/data-table/data-table.jsx deleted file mode 100644 index 8d7a0550bbf5..000000000000 --- a/packages/components/src/components/data-table/data-table.jsx +++ /dev/null @@ -1,182 +0,0 @@ -import classNames from 'classnames'; -import { List } from '@enykeev/react-virtualized/dist/es/List'; -import PropTypes from 'prop-types'; -import React from 'react'; -import { AutoSizer } from '@enykeev/react-virtualized/dist/es/AutoSizer'; -import { CellMeasurer, CellMeasurerCache } from '@enykeev/react-virtualized/dist/es/CellMeasurer'; -import TableRow from './table-row.jsx'; -import ThemedScrollbars from '../themed-scrollbars'; - -/* TODO: - 1. implement sorting by column (ASC/DESC) - 2. implement filtering per column -*/ - -const DataTable = ({ - children, - className, - columns, - content_loader, - data_source, - footer, - getActionColumns, - getRowAction, - getRowSize, - id, - keyMapper, - onScroll, - passthrough, - preloaderCheck, -}) => { - const cache_ref = React.useRef(); - const list_ref = React.useRef(); - const is_dynamic_height = !getRowSize; - const [scroll_top, setScrollTop] = React.useState(0); - const [is_loading, setLoading] = React.useState(true); - - React.useEffect(() => { - if (is_dynamic_height) { - cache_ref.current = new CellMeasurerCache({ - fixedWidth: true, - keyMapper: row_index => { - if (row_index < data_source.length) return keyMapper?.(data_source[row_index]) || row_index; - return row_index; - }, - }); - } - setLoading(false); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - React.useEffect(() => { - if (is_dynamic_height) list_ref.current?.recomputeGridSize(0); - }, [data_source, is_dynamic_height]); - - const handleScroll = ev => { - setScrollTop(ev.target.scrollTop); - if (typeof onScroll === 'function') onScroll(ev); - }; - - const rowRenderer = ({ style, index, key, parent }) => { - const item = data_source[index]; - const action = getRowAction && getRowAction(item); - const contract_id = item.contract_id || item.id; - const row_key = keyMapper?.(item) || key; - - // If row content is complex, consider rendering a light-weight placeholder while scrolling. - const getContent = ({ measure } = {}) => ( - - ); - - return is_dynamic_height ? ( - - {({ measure }) =>
{getContent({ measure })}
} - - ) : ( -
- {getContent()} -
- ); - }; - - if (is_loading) { - return
; - } - return ( -
-
- -
-
- - {({ width, height }) => ( -
- - (list_ref.current = ref)} - rowCount={data_source.length} - rowHeight={is_dynamic_height ? cache_ref?.current.rowHeight : getRowSize} - rowRenderer={rowRenderer} - scrollingResetTimeInterval={0} - scrollTop={scroll_top} - width={width} - /> - - {children} -
- )} - -
- - {footer && ( -
- -
- )} -
- ); -}; - -DataTable.propTypes = { - children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]), - className: PropTypes.string, - columns: PropTypes.array, - data_source: PropTypes.array, - footer: PropTypes.object, - getRowAction: PropTypes.func, - getRowSize: PropTypes.func, - onScroll: PropTypes.func, - passthrough: PropTypes.object, - content_loader: PropTypes.elementType, - getActionColumns: PropTypes.func, - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - keyMapper: PropTypes.func, - preloaderCheck: PropTypes.func, -}; - -export default DataTable; diff --git a/packages/components/src/components/data-table/data-table.tsx b/packages/components/src/components/data-table/data-table.tsx new file mode 100644 index 000000000000..2b7fdd9747b7 --- /dev/null +++ b/packages/components/src/components/data-table/data-table.tsx @@ -0,0 +1,218 @@ +/* eslint @typescript-eslint/triple-slash-reference: "off" */ +/// +/// +/// + +import classNames from 'classnames'; +import React, { CSSProperties, UIEventHandler } from 'react'; +import TableRow from './table-row'; +import ThemedScrollbars from '../themed-scrollbars'; +import type { Grid } from 'react-virtualized'; +import TableRowInfo from './table-row-info'; +import TableCell from './table-cell'; +import { TTableRowItem } from '../types/common.types'; +import { AutoSizer } from '@enykeev/react-virtualized/dist/es/AutoSizer'; +import { CellMeasurer, CellMeasurerCache } from '@enykeev/react-virtualized/dist/es/CellMeasurer'; +import List from '@enykeev/react-virtualized/dist/es/List'; + +/* TODO: + 1. implement sorting by column (ASC/DESC) + 2. implement filtering per column +*/ +export type TSource = { + [key: string]: string; +}; + +type TMeasure = { + measure: () => void; +}; +type TRowRenderer = { + style: CSSProperties; + index: number; + key: string; + parent: React.RefObject; +}; + +type TDataTable = { + className: string; + content_loader: React.ElementType; + columns: any; + contract_id: number; + getActionColumns: (params: { row_obj?: TSource; is_header?: boolean; is_footer: boolean }) => TTableRowItem[]; + getRowSize?: ((params: { index: number }) => number) | number; + measure: () => void; + getRowAction?: (item: any) => TTableRowItem; + onScroll: UIEventHandler; + id: number; + passthrough: (item: TSource) => boolean; + autoHide?: boolean; + footer: boolean; + preloaderCheck: (param: any) => boolean; + data_source: TSource[]; + keyMapper: (row: TSource) => number | string; +}; + +const DataTable = ({ + children, + className, + columns, + content_loader, + data_source, + footer, + getActionColumns, + getRowAction, + getRowSize, + id, + keyMapper, + onScroll, + passthrough, + preloaderCheck, +}: React.PropsWithChildren) => { + const cache_ref = React.useRef(); + const list_ref = React.useRef(); + const is_dynamic_height = !getRowSize; + const [scroll_top, setScrollTop] = React.useState(0); + const [is_loading, setLoading] = React.useState(true); + + React.useEffect(() => { + if (is_dynamic_height) { + cache_ref.current = new CellMeasurerCache({ + fixedWidth: true, + keyMapper: (row_index: number) => { + if (row_index < data_source.length) return keyMapper?.(data_source[row_index]) || row_index; + return row_index; + }, + }); + } + setLoading(false); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + React.useEffect(() => { + if (is_dynamic_height) list_ref?.current?.recomputeGridSize({ columnIndex: 0, rowIndex: 0 }); + }, [data_source, is_dynamic_height]); + + const handleScroll = (ev: React.UIEvent) => { + setScrollTop((ev.target as HTMLElement).scrollTop); + if (typeof onScroll === 'function') onScroll(ev); + }; + + const rowRenderer = ({ style, index, key, parent }: TRowRenderer) => { + const item = data_source[index]; + const action = getRowAction && getRowAction(item); + const contract_id = item.contract_id || item.id; + const row_key = keyMapper?.(item) || key; + + // If row content is complex, consider rendering a light-weight placeholder while scrolling. + const getContent = (measure?: () => void) => ( + + ); + + return is_dynamic_height ? ( + + {({ measure }: TMeasure) =>
{getContent(measure)}
} + + ) : ( +
+ {getContent()} +
+ ); + }; + + if (is_loading) { + return
; + } + return ( +
+
+ +
+
+ + + {({ width, height }) => ( +
+ + (list_ref.current = ref)} + rowCount={data_source.length} + rowHeight={ + is_dynamic_height && cache_ref?.current?.rowHeight + ? cache_ref?.current?.rowHeight + : getRowSize || 0 + } + rowRenderer={rowRenderer} + scrollingResetTimeInterval={0} + scrollTop={scroll_top} + width={width} + /> + + {children} +
+ )} + + +
+ + {footer && ( +
+ +
+ )} +
+ ); +}; + +DataTable.TableRow = TableRow; +DataTable.TableRowInfo = TableRowInfo; +DataTable.TableCell = TableCell; + +export default DataTable; diff --git a/packages/components/src/components/data-table/index.js b/packages/components/src/components/data-table/index.js deleted file mode 100644 index fbdd0a722a19..000000000000 --- a/packages/components/src/components/data-table/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import DataTable from './data-table.jsx'; -import TableCell from './table-cell.jsx'; -import TableRowInfo from './table-row-info.jsx'; -import TableRow from './table-row.jsx'; -import './data-table.scss'; - -DataTable.TableRow = TableRow; -DataTable.TableRowInfo = TableRowInfo; -DataTable.TableCell = TableCell; - -export default DataTable; diff --git a/packages/components/src/components/data-table/index.ts b/packages/components/src/components/data-table/index.ts new file mode 100644 index 000000000000..0a5168be1fc6 --- /dev/null +++ b/packages/components/src/components/data-table/index.ts @@ -0,0 +1,11 @@ +import DataTable from './data-table'; +import TableCell from './table-cell'; +import TableRowInfo from './table-row-info'; +import TableRow from './table-row'; +import './data-table.scss'; + +DataTable.TableRow = TableRow; +DataTable.TableRowInfo = TableRowInfo; +DataTable.TableCell = TableCell; + +export default DataTable; diff --git a/packages/components/src/components/data-table/table-cell.jsx b/packages/components/src/components/data-table/table-cell.jsx deleted file mode 100644 index 4c39abebd9dc..000000000000 --- a/packages/components/src/components/data-table/table-cell.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import React from 'react'; - -const TableCell = ({ col_index, children }) =>
{children}
; - -TableCell.propTypes = { - children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), - col_index: PropTypes.string, -}; - -export default TableCell; diff --git a/packages/components/src/components/data-table/table-cell.tsx b/packages/components/src/components/data-table/table-cell.tsx new file mode 100644 index 000000000000..943b48881ddb --- /dev/null +++ b/packages/components/src/components/data-table/table-cell.tsx @@ -0,0 +1,12 @@ +import classNames from 'classnames'; +import React from 'react'; + +type TTableCell = { + col_index: string; +}; + +const TableCell = ({ col_index, children }: React.PropsWithChildren) => ( +
{children}
+); + +export default TableCell; diff --git a/packages/components/src/components/data-table/table-row-info.jsx b/packages/components/src/components/data-table/table-row-info.tsx similarity index 77% rename from packages/components/src/components/data-table/table-row-info.jsx rename to packages/components/src/components/data-table/table-row-info.tsx index c072ef5f1f4a..33c45309eba5 100644 --- a/packages/components/src/components/data-table/table-row-info.jsx +++ b/packages/components/src/components/data-table/table-row-info.tsx @@ -1,9 +1,18 @@ import classNames from 'classnames'; -import PropTypes from 'prop-types'; import React from 'react'; import ThemedScrollbars from '../themed-scrollbars'; +import { TTableRowItem } from '../types/common.types'; -const TableRowInfo = ({ replace, is_footer, cells, className, is_dynamic_height, measure }) => { +type TTableRowIndex = { + replace: TTableRowItem | undefined; + is_footer: boolean; + cells: React.ReactElement; + className?: string; + is_dynamic_height: boolean; + measure?: () => void; +}; + +const TableRowInfo = ({ replace, is_footer, cells, className, is_dynamic_height, measure }: TTableRowIndex) => { const [show_details, setShowDetails] = React.useState(false); const toggleDetails = () => { @@ -11,13 +20,11 @@ const TableRowInfo = ({ replace, is_footer, cells, className, is_dynamic_height, setShowDetails(!show_details); } }; - React.useEffect(() => { if (is_dynamic_height) { measure?.(); } }, [show_details, is_dynamic_height, measure]); - if (is_dynamic_height) { return (
= { + className?: string; + id?: string; + is_footer: boolean; + is_header?: boolean; + passthrough?: (item: TSource) => boolean; + replace?: TTableRowItem; + to?: string; + show_preloader?: boolean; + measure?: () => void; + is_dynamic_height: boolean; + row_obj?: T; + getActionColumns?: (params: { row_obj?: T; is_header?: boolean; is_footer: boolean }) => any; + content_loader: React.ElementType; + columns?: any; +}; + +type TCellContent = { + cell_value: string; + col_index: string; + row_obj?: U; + is_footer: boolean; + passthrough: any; +}; const TableRow = ({ className, @@ -20,23 +46,35 @@ const TableRow = ({ to, measure, is_dynamic_height, -}) => { +}: TTableRow) => { const action_columns = getActionColumns && getActionColumns({ row_obj, is_header, is_footer }); - const cells = columns?.map(({ col_index, renderCellContent, title, key }) => { - let cell_content = title; - if (!is_header) { - const cell_value = row_obj[col_index] || ''; - cell_content = renderCellContent - ? renderCellContent({ cell_value, col_index, row_obj, is_footer, passthrough }) - : cell_value; + const cells = columns.map( + ({ + col_index, + renderCellContent, + title, + key, + }: { + col_index: string; + renderCellContent: (params: TCellContent) => any; + title: string; + key: string; + }) => { + let cell_content = title; + if (!is_header) { + const cell_value = row_obj[col_index] || ''; + cell_content = renderCellContent + ? renderCellContent({ cell_value, col_index, row_obj, is_footer, passthrough }) + : cell_value; + } + return ( + + {cell_content} + + ); } - return ( - - {cell_content} - - ); - }); + ); const row_class_name = classNames( 'table__row', @@ -78,24 +116,4 @@ const TableRow = ({ ); }; -TableRow.propTypes = { - className: PropTypes.string, - columns: PropTypes.array, - id: PropTypes.number, - is_footer: PropTypes.bool, - is_header: PropTypes.bool, - passthrough: PropTypes.object, - replace: PropTypes.shape({ - component: PropTypes.object, - message: PropTypes.string, - }), - row_obj: PropTypes.object, - to: PropTypes.string, - content_loader: PropTypes.elementType, - measure: PropTypes.func, - getActionColumns: PropTypes.func, - show_preloader: PropTypes.bool, - is_dynamic_height: PropTypes.bool, -}; - export default TableRow; diff --git a/packages/components/src/components/list/List.d.ts b/packages/components/src/components/list/List.d.ts new file mode 100644 index 000000000000..d509dbff645e --- /dev/null +++ b/packages/components/src/components/list/List.d.ts @@ -0,0 +1,5 @@ +declare module '@enykeev/react-virtualized/dist/es/List' { + import { ListProps } from '@enykeev/react-virtualized/dist/es/List'; + + export default class List extends React.PureComponent {} +} diff --git a/packages/components/src/components/types/common.types.ts b/packages/components/src/components/types/common.types.ts index 62e0cd5db049..34d61ed2047e 100644 --- a/packages/components/src/components/types/common.types.ts +++ b/packages/components/src/components/types/common.types.ts @@ -8,3 +8,5 @@ export type TItem = { id: string; value: Array | string; }; + +export type TTableRowItem = { component: React.ReactNode }; From 94458dc2e1cb799b35553761a3ac1baa5dd3ad9e Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Wed, 8 Mar 2023 15:22:51 +0400 Subject: [PATCH 2/6] fix: build fix --- .../components/src/components/data-table/data-table.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/data-table/data-table.tsx b/packages/components/src/components/data-table/data-table.tsx index 2b7fdd9747b7..92cd629b8419 100644 --- a/packages/components/src/components/data-table/data-table.tsx +++ b/packages/components/src/components/data-table/data-table.tsx @@ -36,18 +36,18 @@ type TRowRenderer = { type TDataTable = { className: string; content_loader: React.ElementType; - columns: any; + columns: TSource[]; contract_id: number; getActionColumns: (params: { row_obj?: TSource; is_header?: boolean; is_footer: boolean }) => TTableRowItem[]; getRowSize?: ((params: { index: number }) => number) | number; measure: () => void; - getRowAction?: (item: any) => TTableRowItem; + getRowAction?: (item: TSource) => TTableRowItem; onScroll: UIEventHandler; id: number; passthrough: (item: TSource) => boolean; autoHide?: boolean; footer: boolean; - preloaderCheck: (param: any) => boolean; + preloaderCheck: (param: TSource) => boolean; data_source: TSource[]; keyMapper: (row: TSource) => number | string; }; @@ -139,6 +139,7 @@ const DataTable = ({ } return (
Date: Thu, 9 Mar 2023 11:06:57 +0400 Subject: [PATCH 3/6] Update packages/components/src/components/list/List.d.ts Co-authored-by: Shayan Khaleghparast <100833613+shayan-deriv@users.noreply.github.com> --- .../components/src/components/list/List.d.ts | 44 ++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/list/List.d.ts b/packages/components/src/components/list/List.d.ts index d509dbff645e..8d389fe02d18 100644 --- a/packages/components/src/components/list/List.d.ts +++ b/packages/components/src/components/list/List.d.ts @@ -1,5 +1,47 @@ + declare module '@enykeev/react-virtualized/dist/es/List' { import { ListProps } from '@enykeev/react-virtualized/dist/es/List'; + import type { Grid } from 'react-virtualized'; + + type TRowRenderer = { + style:CSSProperties; + index: number; + key:string; + parent:React.RefObject; + } + + type TList = { + autoHeight: boolean, + className?: string, + deferredMeasurementCache: any; + height: number; + overscanRowCount: number; + ref: any; + rowCount: number; + rowHeight: number; + rowRenderer: (props: TRowRenderer) => React.ReactNode; + scrollingResetTimeInterval: number; + scrollTop: number; + width: number; + } + + export const List = ({ + autoHeight, + className, + deferredMeasurementCache, + height, + overscanRowCount, + ref, + rowCount, + rowHeight, + rowRenderer, + scrollingResetTimeInterval, + scrollTop, + width, + }: TList): JSX.Element => JSX.Element; + // or just: + //export const List = (props: TList): JSX.Element => JSX.Element; + export default List; +} - export default class List extends React.PureComponent {} } From 8d2ea5374d962bc323b31566b773b1f58b1a3a28 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Thu, 16 Mar 2023 16:34:02 +0400 Subject: [PATCH 4/6] fix: react_virtualized_types --- .../components/cellmeasurer/CellMeasurer.d.ts | 30 ++++++++++++++++++- .../cellmeasurer/CellMeasurerCache.d.ts | 6 +++- .../src/components/data-table/data-table.tsx | 6 ++-- .../components/src/components/list/List.d.ts | 21 ++++++------- 4 files changed, 46 insertions(+), 17 deletions(-) diff --git a/packages/components/src/components/cellmeasurer/CellMeasurer.d.ts b/packages/components/src/components/cellmeasurer/CellMeasurer.d.ts index 38b11ab6fbf8..f6081fee7d97 100644 --- a/packages/components/src/components/cellmeasurer/CellMeasurer.d.ts +++ b/packages/components/src/components/cellmeasurer/CellMeasurer.d.ts @@ -1 +1,29 @@ -declare module '@enykeev/react-virtualized/dist/es/CellMeasurer'; +declare module '@enykeev/react-virtualized/dist/es/CellMeasurer' { + export type CellMeasurer = { + hasFixedWidth?: boolean; + hasFixedHeight?: boolean; + has?: (rowIndex: number, columnIndex: number) => boolean; + set?: (rowIndex: number, columnIndex: number, width: number, height: number) => void; + getHeight?: (rowIndex: number, columnIndex: number) => number; + getWidth?: (rowIndex: number, columnIndex: number) => number; + children: ({ measure }: TMeasure) => JSX.Element; + cache?: CellMeasureCache; + columnIndex?: number; + key?: string | number; + rowIndex?: number; + }; + + export const CellMeasurer = ({ + hasFixedWidth, + hasFixedHeight, + has, + set, + getHeight, + getWidth, + rowHeight, + children, + }: CellMeasurer): JSX.Element => JSX.Element; + // or just: + //export const CellMeasurer = (props: CellMeasureCache): JSX.Element => JSX.Element; + export default CellMeasurer; +} diff --git a/packages/components/src/components/cellmeasurer/CellMeasurerCache.d.ts b/packages/components/src/components/cellmeasurer/CellMeasurerCache.d.ts index 38b11ab6fbf8..e422edf8791b 100644 --- a/packages/components/src/components/cellmeasurer/CellMeasurerCache.d.ts +++ b/packages/components/src/components/cellmeasurer/CellMeasurerCache.d.ts @@ -1 +1,5 @@ -declare module '@enykeev/react-virtualized/dist/es/CellMeasurer'; +declare module '@enykeev/react-virtualized/dist/es/CellMeasurer/CellMeasurerCache' { + import { CellMeasurerCache } from '@enykeev/react-virtualized/dist/es/CellMeasurer/CellMeasurerCache'; + + export default CellMeasurerCache; +} diff --git a/packages/components/src/components/data-table/data-table.tsx b/packages/components/src/components/data-table/data-table.tsx index 92cd629b8419..2b52ad1fdbb7 100644 --- a/packages/components/src/components/data-table/data-table.tsx +++ b/packages/components/src/components/data-table/data-table.tsx @@ -1,5 +1,4 @@ /* eslint @typescript-eslint/triple-slash-reference: "off" */ -/// /// /// @@ -12,7 +11,8 @@ import TableRowInfo from './table-row-info'; import TableCell from './table-cell'; import { TTableRowItem } from '../types/common.types'; import { AutoSizer } from '@enykeev/react-virtualized/dist/es/AutoSizer'; -import { CellMeasurer, CellMeasurerCache } from '@enykeev/react-virtualized/dist/es/CellMeasurer'; +import { CellMeasurer } from '@enykeev/react-virtualized/dist/es/CellMeasurer'; +import CellMeasurerCache from '@enykeev/react-virtualized/dist/es/CellMeasurer/CellMeasurerCache'; import List from '@enykeev/react-virtualized/dist/es/List'; /* TODO: @@ -124,7 +124,7 @@ const DataTable = ({ ); return is_dynamic_height ? ( - + {({ measure }: TMeasure) =>
{getContent(measure)}
} ) : ( diff --git a/packages/components/src/components/list/List.d.ts b/packages/components/src/components/list/List.d.ts index 8d389fe02d18..2c3c7940c381 100644 --- a/packages/components/src/components/list/List.d.ts +++ b/packages/components/src/components/list/List.d.ts @@ -1,18 +1,17 @@ - declare module '@enykeev/react-virtualized/dist/es/List' { import { ListProps } from '@enykeev/react-virtualized/dist/es/List'; import type { Grid } from 'react-virtualized'; type TRowRenderer = { - style:CSSProperties; + style: CSSProperties; index: number; - key:string; - parent:React.RefObject; - } + key: string; + parent: React.RefObject; + }; type TList = { - autoHeight: boolean, - className?: string, + autoHeight: boolean; + className?: string; deferredMeasurementCache: any; height: number; overscanRowCount: number; @@ -23,9 +22,9 @@ declare module '@enykeev/react-virtualized/dist/es/List' { scrollingResetTimeInterval: number; scrollTop: number; width: number; - } + }; - export const List = ({ + export const List = ({ autoHeight, className, deferredMeasurementCache, @@ -39,9 +38,7 @@ declare module '@enykeev/react-virtualized/dist/es/List' { scrollTop, width, }: TList): JSX.Element => JSX.Element; - // or just: + // or just: //export const List = (props: TList): JSX.Element => JSX.Element; export default List; } - -} From 4290054eddb301cac1517235a68c46470b5e6348 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Thu, 16 Mar 2023 17:14:40 +0400 Subject: [PATCH 5/6] fix: build fix --- packages/components/src/components/data-table/data-table.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/components/data-table/data-table.tsx b/packages/components/src/components/data-table/data-table.tsx index 2b52ad1fdbb7..f1502344c063 100644 --- a/packages/components/src/components/data-table/data-table.tsx +++ b/packages/components/src/components/data-table/data-table.tsx @@ -1,6 +1,7 @@ /* eslint @typescript-eslint/triple-slash-reference: "off" */ /// /// +/// import classNames from 'classnames'; import React, { CSSProperties, UIEventHandler } from 'react'; From f435f87dc6e6ec4900c7ec778ef96ec265773d79 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Mon, 20 Mar 2023 08:42:13 +0400 Subject: [PATCH 6/6] fix: remove comments --- .../components/src/components/cellmeasurer/CellMeasurer.d.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/components/src/components/cellmeasurer/CellMeasurer.d.ts b/packages/components/src/components/cellmeasurer/CellMeasurer.d.ts index f6081fee7d97..047b4022c3c9 100644 --- a/packages/components/src/components/cellmeasurer/CellMeasurer.d.ts +++ b/packages/components/src/components/cellmeasurer/CellMeasurer.d.ts @@ -23,7 +23,5 @@ declare module '@enykeev/react-virtualized/dist/es/CellMeasurer' { rowHeight, children, }: CellMeasurer): JSX.Element => JSX.Element; - // or just: - //export const CellMeasurer = (props: CellMeasureCache): JSX.Element => JSX.Element; export default CellMeasurer; }