Skip to content

Commit 568b34e

Browse files
alexcambosealexcambose
committed
remove ref
1 parent 0548bde commit 568b34e

File tree

3 files changed

+90
-108
lines changed

3 files changed

+90
-108
lines changed

‎packages/component-library/src/TableGrid/index.module.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@
2222
align-items: center;
2323
}
2424

25-
2625
.skeletonContainer {
2726
height: theme.spacing(10);
2827
width: 100%;
29-
}
28+
}

‎packages/component-library/src/TableGrid/index.stories.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import { ChartLine } from "@phosphor-icons/react/dist/ssr/ChartLine";
22
import type { Meta, StoryObj } from "@storybook/react";
33
import BtcIcon from "cryptocurrency-icons/svg/color/btc.svg";
4-
import { useRef } from "react";
54

65
import { Badge } from "../Badge";
76
import { SymbolPairTag } from "../SymbolPairTag";
87
import { dummyRowData } from "./dummy-row-data";
98
import { TableGrid as TableGridComponent } from "./index.jsx";
10-
import { AgGridReact } from "ag-grid-react";
119

1210
const meta = {
1311
component: TableGridComponent,
@@ -108,14 +106,10 @@ const args = {
108106
export const TableGrid = {
109107
args,
110108
} satisfies StoryObj<typeof TableGridComponent>;
111-
const Comp = () => {
112-
const gridRef = useRef<AgGridReact<typeof args.rowData>>(null);
113-
console.log(gridRef, args,'args');
114-
return <TableGridComponent {...args} ref={gridRef}/>;
115-
};
109+
116110
export const PriceFeedsCard = {
117111
render: (props) => {
118-
return <Comp {...props} />;
112+
return <TableGridComponent {...props} />;
119113
},
120114
args: {
121115
...args,

‎packages/component-library/src/TableGrid/index.tsx‎

Lines changed: 87 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,8 @@ import {
66
themeQuartz,
77
} from "ag-grid-community";
88
import { AgGridReact } from "ag-grid-react";
9-
import {
10-
type ForwardedRef,
11-
forwardRef,
12-
type ReactNode,
13-
useCallback,
14-
useImperativeHandle,
15-
useMemo,
16-
useRef,
17-
useState,
18-
} from "react";
9+
import type { ReactNode } from "react";
10+
import { useCallback, useMemo, useRef, useState } from "react";
1911

2012
import { Card } from "../Card";
2113
import { Paginator } from "../Paginator";
@@ -32,101 +24,98 @@ ModuleRegistry.registerModules([
3224

3325
const SkeletonCellRenderer = (props: { value?: ReactNode }) => {
3426
if (!props.value) {
35-
return <div className={styles.defaultCellContainer}><div className={styles.skeletonContainer}><Skeleton fill /></div></div>;
27+
return (
28+
<div className={styles.defaultCellContainer}>
29+
<div className={styles.skeletonContainer}>
30+
<Skeleton fill />
31+
</div>
32+
</div>
33+
);
3634
}
3735
return <div className={styles.defaultCellContainer}>{props.value}</div>;
3836
};
3937

40-
export const TableGrid = forwardRef(
41-
<TData extends Record<string, unknown>>(
42-
{
43-
rowData,
44-
colDefs,
45-
isLoading,
46-
cardProps,
47-
pagination,
48-
...props
49-
}: TableGridProps<TData>,
50-
ref: ForwardedRef<AgGridReact<TData>>,
51-
) => {
52-
const gridRef = useRef<AgGridReact<TData>>(null);
53-
const [pageSize, setPageSize] = useState(10);
54-
const [currentPage, setCurrentPage] = useState(1);
55-
const [totalPages, setTotalPages] = useState(1);
56-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
57-
useImperativeHandle(ref, () => gridRef.current!);
38+
export const TableGrid = <TData extends Record<string, unknown>>({
39+
rowData,
40+
colDefs,
41+
isLoading,
42+
cardProps,
43+
pagination,
44+
...props
45+
}: TableGridProps<TData>) => {
46+
const gridRef = useRef<AgGridReact<TData>>(null);
47+
const [pageSize, setPageSize] = useState(10);
48+
const [currentPage, setCurrentPage] = useState(1);
49+
const [totalPages, setTotalPages] = useState(1);
50+
51+
const defaultColDef = useMemo(() => {
52+
return {
53+
cellRenderer: SkeletonCellRenderer,
54+
flex: 1,
55+
};
56+
}, []);
5857

59-
const defaultColDef = useMemo(() => {
58+
const mappedColDefs = useMemo(() => {
59+
return colDefs.map((colDef) => {
6060
return {
61-
cellRenderer: SkeletonCellRenderer,
62-
flex: 1,
61+
...colDef,
62+
// the types in ag-grid are `any` for the cellRenderers
63+
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
64+
cellRenderer: isLoading
65+
? (colDef.loadingCellRenderer ?? SkeletonCellRenderer)
66+
: colDef.cellRenderer,
6367
};
64-
}, []);
65-
66-
const mappedColDefs = useMemo(() => {
67-
return colDefs.map((colDef) => {
68-
return {
69-
...colDef,
70-
// the types in ag-grid are `any` for the cellRenderers
71-
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
72-
cellRenderer: isLoading
73-
? (colDef.loadingCellRenderer ?? SkeletonCellRenderer)
74-
: colDef.cellRenderer,
75-
};
76-
});
77-
}, [colDefs, isLoading]);
78-
79-
const onPaginationChanged = useCallback(() => {
80-
if (gridRef.current?.api) {
81-
const api = gridRef.current.api;
82-
setPageSize(api.paginationGetPageSize());
83-
setCurrentPage(api.paginationGetCurrentPage() + 1);
84-
setTotalPages(api.paginationGetTotalPages());
85-
}
86-
}, []);
87-
const onPageChange = useCallback((newPage: number) => {
88-
gridRef.current?.api.paginationGoToPage(newPage - 1);
89-
}, []);
68+
});
69+
}, [colDefs, isLoading]);
9070

91-
const tableGrid = (
92-
<AgGridReact<TData>
93-
className={styles.tableGrid}
94-
// @ts-expect-error empty row data
95-
rowData={isLoading ? [[]] : rowData}
96-
defaultColDef={defaultColDef}
97-
columnDefs={mappedColDefs}
98-
theme={themeQuartz}
99-
domLayout="autoHeight"
100-
pagination={pagination ?? false}
101-
paginationPageSize={pageSize}
102-
suppressPaginationPanel
103-
onPaginationChanged={onPaginationChanged}
104-
ref={gridRef}
105-
{...props}
106-
/>
107-
);
108-
if (!cardProps && !pagination) {
109-
return tableGrid;
71+
const onPaginationChanged = useCallback(() => {
72+
if (gridRef.current?.api) {
73+
const api = gridRef.current.api;
74+
setPageSize(api.paginationGetPageSize());
75+
setCurrentPage(api.paginationGetCurrentPage() + 1);
76+
setTotalPages(api.paginationGetTotalPages());
11077
}
111-
return (
112-
<Card
113-
footer={
114-
pagination && (
115-
<Paginator
116-
numPages={totalPages}
117-
currentPage={currentPage}
118-
onPageChange={onPageChange}
119-
pageSize={pageSize}
120-
onPageSizeChange={setPageSize}
121-
/>
122-
)
123-
}
124-
{...cardProps}
125-
>
126-
{tableGrid}
127-
</Card>
128-
);
129-
},
130-
);
78+
}, []);
79+
const onPageChange = useCallback((newPage: number) => {
80+
gridRef.current?.api.paginationGoToPage(newPage - 1);
81+
}, []);
13182

132-
TableGrid.displayName = "TableGrid";
83+
const tableGrid = (
84+
<AgGridReact<TData>
85+
className={styles.tableGrid}
86+
// @ts-expect-error empty row data
87+
rowData={isLoading ? [[]] : rowData}
88+
defaultColDef={defaultColDef}
89+
columnDefs={mappedColDefs}
90+
theme={themeQuartz}
91+
domLayout="autoHeight"
92+
pagination={pagination ?? false}
93+
paginationPageSize={pageSize}
94+
suppressPaginationPanel
95+
onPaginationChanged={onPaginationChanged}
96+
ref={gridRef}
97+
{...props}
98+
/>
99+
);
100+
if (!cardProps && !pagination) {
101+
return tableGrid;
102+
}
103+
return (
104+
<Card
105+
footer={
106+
pagination && (
107+
<Paginator
108+
numPages={totalPages}
109+
currentPage={currentPage}
110+
onPageChange={onPageChange}
111+
pageSize={pageSize}
112+
onPageSizeChange={setPageSize}
113+
/>
114+
)
115+
}
116+
{...cardProps}
117+
>
118+
{tableGrid}
119+
</Card>
120+
);
121+
};

0 commit comments

Comments
 (0)