Skip to content

Commit 55d5a6a

Browse files
bvaughnbvaughn
committed
Cleaned up list overview
1 parent b8734c5 commit 55d5a6a

File tree

15 files changed

+79
-454
lines changed

15 files changed

+79
-454
lines changed

‎generated/docs/Grid.json‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -93,32 +93,18 @@
9393
}
9494
},
9595
"cellProps": {
96-
"defaultValue": {
97-
"value": null
98-
},
99-
"description": "Additional props to be passed to the cellComponent.\n\nThis object must not contain either an `columnIndex`, `rowIndex`, or `style` prop.\nRefer to the example for more information.",
96+
"defaultValue": null,
97+
"description": "Additional props to be passed to the cellComponent.\n\n⚠️ This object must not contain either an `columnIndex`, `rowIndex`, or `style` prop.",
10098
"name": "cellProps",
10199
"declarations": [
102100
{
103101
"fileName": "react-window/lib/components/grid/types.ts",
104102
"name": "TypeLiteral"
105103
}
106104
],
107-
"required": false,
105+
"required": true,
108106
"type": {
109-
"name": "enum",
110-
"raw": "ExcludeForbiddenKeys<CellProps> | undefined",
111-
"value": [
112-
{
113-
"value": "undefined"
114-
},
115-
{
116-
"value": "ExcludeForbiddenKeys<CellProps>",
117-
"description": "",
118-
"fullComment": "",
119-
"tags": {}
120-
}
121-
]
107+
"name": "ExcludeForbiddenKeys<CellProps>"
122108
}
123109
},
124110
"columnCount": {

‎generated/docs/List.json‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -195,32 +195,18 @@
195195
}
196196
},
197197
"rowProps": {
198-
"defaultValue": {
199-
"value": "{}"
200-
},
201-
"description": "Additional props to be passed to the rowComponent.\n\nThis object must not contain either an `index` or `style` prop.\nRefer to the example for more information.",
198+
"defaultValue": null,
199+
"description": "Additional props to be passed to the rowComponent.\n\n⚠️ This object must not contain either an `index` or `style` prop.",
202200
"name": "rowProps",
203201
"declarations": [
204202
{
205203
"fileName": "react-window/lib/components/list/types.ts",
206204
"name": "TypeLiteral"
207205
}
208206
],
209-
"required": false,
207+
"required": true,
210208
"type": {
211-
"name": "enum",
212-
"raw": "ExcludeForbiddenKeys<RowProps> | undefined",
213-
"value": [
214-
{
215-
"value": "undefined"
216-
},
217-
{
218-
"value": "ExcludeForbiddenKeys<RowProps>",
219-
"description": "",
220-
"fullComment": "",
221-
"tags": {}
222-
}
223-
]
209+
"name": "ExcludeForbiddenKeys<RowProps>"
224210
}
225211
},
226212
"onRowsRendered": {

‎generated/examples/List.example.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@ import { List } from "react-window";
33
function Example() {
44
return (
55
<div style={{ height: "150px" }}>
6-
<List rowComponent={RowComponent} rowCount={100} rowHeight={25} />
6+
<List
7+
rowComponent={RowComponent}
8+
rowCount={100}
9+
rowHeight={25}
10+
rowProps={{}}
11+
/>
712
</div>
813
);
914
}

‎generated/examples/List.example.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@ import { List, type RowComponentProps } from "react-window";
33
function Example() {
44
return (
55
<div style={{ height: "150px" }}>
6-
<List rowComponent={RowComponent} rowCount={100} rowHeight={25} />
6+
<List
7+
rowComponent={RowComponent}
8+
rowCount={100}
9+
rowHeight={25}
10+
rowProps={{}}
11+
/>
712
</div>
813
);
914
}

‎lib/components/grid/Grid.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import type { GridProps } from "./types";
77

88
export function Grid<CellProps extends object>({
99
cellComponent: CellComponentProp,
10-
// @ts-expect-error Find a way to cast this
11-
cellProps: cellPropsUnstable = EMPTY_OBJECT,
10+
cellProps: cellPropsUnstable,
1211
className,
1312
columnCount,
1413
columnWidth: columnWidthProp,

‎lib/components/grid/types.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,9 @@ export type GridProps<CellProps extends object> = {
4242
/**
4343
* Additional props to be passed to the cellComponent.
4444
*
45-
* This object must not contain either an `columnIndex`, `rowIndex`, or `style` prop.
46-
* Refer to the example for more information.
45+
* ⚠️ This object must not contain either an `columnIndex`, `rowIndex`, or `style` prop.
4746
*/
48-
cellProps?: ExcludeForbiddenKeys<CellProps>;
47+
cellProps: ExcludeForbiddenKeys<CellProps>;
4948

5049
/**
5150
* Number of columns to be rendered in the grid.

‎lib/components/list/List.test.tsx‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { act, render, screen } from "@testing-library/react";
22
import { createRef, useLayoutEffect, type CSSProperties } from "react";
33
import { beforeEach, describe, expect, test, vi } from "vitest";
4+
import { EMPTY_OBJECT } from "../../../src/constants";
45
import {
56
disableForCurrentTest,
67
updateMockResizeObserver,
78
} from "../../utils/test/mockResizeObserver";
8-
import { type ListImperativeAPI, type RowComponentProps } from "./types";
99
import { List } from "./List";
10+
import { type ListImperativeAPI, type RowComponentProps } from "./types";
1011

1112
describe("List", () => {
1213
function Row(props: { index: number; style: CSSProperties }) {
@@ -36,7 +37,12 @@ describe("List", () => {
3637

3738
test("should render an empty list", () => {
3839
render(
39-
<List rowCount={0} rowComponent={Row} rowHeight={25} rowProps={{}} />,
40+
<List
41+
rowCount={0}
42+
rowComponent={Row}
43+
rowHeight={25}
44+
rowProps={EMPTY_OBJECT}
45+
/>,
4046
);
4147

4248
const items = screen.queryAllByRole("listitem");
@@ -50,7 +56,7 @@ describe("List", () => {
5056
rowCount={10}
5157
rowComponent={Row}
5258
rowHeight={25}
53-
rowProps={{}}
59+
rowProps={EMPTY_OBJECT}
5460
/>,
5561
);
5662

@@ -76,7 +82,7 @@ describe("List", () => {
7682
rowCount={10}
7783
rowComponent={Row}
7884
rowHeight={25}
79-
rowProps={{}}
85+
rowProps={EMPTY_OBJECT}
8086
/>,
8187
);
8288

@@ -118,12 +124,24 @@ describe("List", () => {
118124

119125
test("should re-render items if rowComponent changes", () => {
120126
const { rerender } = render(
121-
<List rowCount={10} rowComponent={Row} rowHeight={25} />,
127+
<List
128+
rowCount={10}
129+
rowComponent={Row}
130+
rowHeight={25}
131+
rowProps={EMPTY_OBJECT}
132+
/>,
122133
);
123134

124135
const NewRow = vi.fn(() => null);
125136

126-
rerender(<List rowCount={10} rowComponent={NewRow} rowHeight={25} />);
137+
rerender(
138+
<List
139+
rowCount={10}
140+
rowComponent={NewRow}
141+
rowHeight={25}
142+
rowProps={EMPTY_OBJECT}
143+
/>,
144+
);
127145

128146
expect(NewRow).toHaveBeenCalled();
129147
});
@@ -135,6 +153,7 @@ describe("List", () => {
135153
rowCount={10}
136154
rowComponent={Row}
137155
rowHeight={25}
156+
rowProps={EMPTY_OBJECT}
138157
/>,
139158
);
140159
expect(mountedRows).toHaveLength(5);
@@ -145,6 +164,7 @@ describe("List", () => {
145164
rowCount={10}
146165
rowComponent={Row}
147166
rowHeight={50}
167+
rowProps={EMPTY_OBJECT}
148168
/>,
149169
);
150170
expect(mountedRows).toHaveLength(3);
@@ -197,6 +217,7 @@ describe("List", () => {
197217
rowCount={4}
198218
rowComponent={Row}
199219
rowHeight={25}
220+
rowProps={EMPTY_OBJECT}
200221
/>,
201222
);
202223

@@ -215,6 +236,7 @@ describe("List", () => {
215236
onRowsRendered={onRowsRendered}
216237
rowComponent={Row}
217238
rowHeight={25}
239+
rowProps={EMPTY_OBJECT}
218240
/>,
219241
);
220242
expect(onRowsRendered).toHaveBeenCalledTimes(1);
@@ -230,6 +252,7 @@ describe("List", () => {
230252
onRowsRendered={onRowsRendered}
231253
rowComponent={Row}
232254
rowHeight={25}
255+
rowProps={EMPTY_OBJECT}
233256
/>,
234257
);
235258
expect(onRowsRendered).toHaveBeenCalledTimes(2);
@@ -247,6 +270,7 @@ describe("List", () => {
247270
rowCount={4}
248271
rowComponent={Row}
249272
rowHeight={25}
273+
rowProps={EMPTY_OBJECT}
250274
style={{
251275
backgroundColor: "red",
252276
}}
@@ -266,6 +290,7 @@ describe("List", () => {
266290
rowCount={4}
267291
rowComponent={Row}
268292
rowHeight={25}
293+
rowProps={EMPTY_OBJECT}
269294
/>,
270295
);
271296

@@ -282,6 +307,7 @@ describe("List", () => {
282307
listRef={listRef}
283308
rowComponent={Row}
284309
rowHeight={25}
310+
rowProps={EMPTY_OBJECT}
285311
/>,
286312
);
287313

@@ -301,6 +327,7 @@ describe("List", () => {
301327
listRef={listRef}
302328
rowComponent={Row}
303329
rowHeight={25}
330+
rowProps={EMPTY_OBJECT}
304331
/>,
305332
);
306333
expect(scrollTo).not.toHaveBeenCalled();

‎lib/components/list/List.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
useState,
77
type ReactNode,
88
} from "react";
9-
import { EMPTY_OBJECT } from "../../../src/constants";
109
import { useResizeObserver } from "../../hooks/useResizeObserver";
1110
import { useStableObject } from "../../hooks/useStableObject";
1211
import type { Align } from "../../types";
@@ -23,8 +22,7 @@ export function List<RowProps extends object>({
2322
rowComponent: RowComponentProp,
2423
rowCount,
2524
rowHeight: rowHeightProp,
26-
// @ts-expect-error Find a way to cast this
27-
rowProps: rowPropsUnstable = EMPTY_OBJECT,
25+
rowProps: rowPropsUnstable,
2826
style,
2927
...rest
3028
}: ListProps<RowProps>) {

0 commit comments

Comments
 (0)