Skip to content

Commit f3373e5

Browse files
mckervincmckervinc
committed
more types
1 parent fee8036 commit f3373e5

18 files changed

+346
-282
lines changed

‎example/src/examples/01-base.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Table } from "react-fluid-table";
2-
import { testData } from "../data";
1+
import { ColumnProps, Table } from "react-fluid-table";
2+
import { TestData, testData } from "../data";
33

4-
const columns = [
4+
const columns: ColumnProps<TestData>[] = [
55
{
66
key: "id",
77
header: "ID",
@@ -27,14 +27,21 @@ const columns = [
2727
const Example1 = () => <Table data={testData} columns={columns} />;
2828

2929
const Source = `
30-
const data = _.range(3000).map(i => ({
30+
interface TestData {
31+
id: number;
32+
firstName: string;
33+
lastName: string;
34+
email: string;
35+
}
36+
37+
const data: TestData[] = _.range(3000).map(i => ({
3138
id: i + 1,
3239
firstName: faker.name.firstName(),
3340
lastName: faker.name.lastName(),
3441
email: faker.internet.email()
3542
}));
3643
37-
const columns = [
44+
const columns: ColumnProps<TestData>[] = [
3845
{ key: "id", header: "ID", width: 50 },
3946
{ key: "firstName", header: "First", width: 120 },
4047
{ key: "lastName", header: "Last", width: 120 },

‎example/src/examples/02-sort.tsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import _ from "lodash";
22
import { useState } from "react";
3-
import { SortDirection, Table } from "react-fluid-table";
4-
import { testData } from "../data";
3+
import { ColumnProps, SortDirection, Table } from "react-fluid-table";
4+
import { TestData, testData } from "../data";
55

6-
const columns = [
6+
const columns: ColumnProps<TestData>[] = [
77
{
88
key: "id",
99
header: "ID",
@@ -33,12 +33,12 @@ const columns = [
3333
const Example2 = () => {
3434
const [data, setData] = useState(_.orderBy(testData, ["firstName"], ["asc"]));
3535

36-
const onSort = (col: string | null, dir: SortDirection | null) => {
36+
const onSort = (col: string | null, dir: SortDirection) => {
3737
if (!col || !dir) {
3838
setData(testData);
3939
} else {
40-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
41-
setData(_.orderBy(data, [col], [dir.toLowerCase() as any]));
40+
const direction = dir === "ASC" ? "asc" : "desc";
41+
setData(_.orderBy(data, [col], [direction]));
4242
}
4343
};
4444

@@ -59,7 +59,7 @@ const Example2 = () => {
5959
const Source = `
6060
const testData = [/* ... */];
6161
62-
const columns = [
62+
const columns: ColumnProps<TestData>[] = [
6363
{ key: "id", header: "ID", sortable: true, width: 50 },
6464
{ key: "firstName", header: "First", sortable: true, width: 120 },
6565
{ key: "lastName", header: "Last", sortable: true, width: 120 },
@@ -69,8 +69,13 @@ const columns = [
6969
const Example = () => {
7070
const [data, setData] = useState(_.orderBy(testData, ['firstName'], ['asc']));
7171
72-
const onSort = (col, dir) => {
73-
setData(!col || !dir ? testData : _.orderBy(data, [col], [dir.toLowerCase()]));
72+
const onSort = (col: string | null, dir: SortDirection) => {
73+
if (!col || !dir) {
74+
setData(testData);
75+
} else {
76+
const direction = dir === "ASC" ? "asc" : "desc";
77+
setData(_.orderBy(data, [col], [direction]));
78+
}
7479
};
7580
7681
return (

‎example/src/examples/03-sub.tsx

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import _ from "lodash";
22
import { useState } from "react";
3-
import { SortDirection, SubComponentProps, Table } from "react-fluid-table";
3+
import { ColumnProps, SortDirection, Table } from "react-fluid-table";
44
import styled from "styled-components";
55
import { TestData, testData } from "../data";
66

7-
const columns = [
7+
const columns: ColumnProps<TestData>[] = [
88
{
99
key: "",
1010
width: 40,
@@ -36,24 +36,20 @@ const columns = [
3636
}
3737
];
3838

39-
const SubComponentStyle = styled.div`
39+
const Custom = styled.div`
4040
height: 100px;
4141
background-color: lightblue;
4242
`;
4343

44-
const SubComponent = ({ row }: SubComponentProps<TestData>) => (
45-
<SubComponentStyle>{`Row ${row.id} is expanded`}</SubComponentStyle>
46-
);
47-
4844
const Example3 = () => {
4945
const [data, setData] = useState(testData);
5046

51-
const onSort = (col: string | null, dir: SortDirection | null) => {
47+
const onSort = (col: string | null, dir: SortDirection) => {
5248
if (!col || !dir) {
5349
setData(testData);
5450
} else {
55-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
56-
setData(_.orderBy(data, [col], [dir.toLowerCase() as any]));
51+
const direction = dir === "ASC" ? "asc" : "desc";
52+
setData(_.orderBy(data, [col], [direction]));
5753
}
5854
};
5955

@@ -65,7 +61,7 @@ const Example3 = () => {
6561
rowHeight={35}
6662
itemKey={row => row.id}
6763
onSort={onSort}
68-
subComponent={SubComponent}
64+
subComponent={({ row }) => <Custom>{`Row ${row.id} is expanded`}</Custom>}
6965
sortColumn="id"
7066
sortDirection="ASC"
7167
/>
@@ -75,18 +71,14 @@ const Example3 = () => {
7571
const Source = `
7672
const testData = [/* ... */];
7773
78-
const columns = [
74+
const columns: ColumnProps<TestData>[] = [
7975
{ key: "", width: 40, expander: true },
8076
{ key: "id", header: "ID", width: 50, sortable: true, },
8177
{ key: "firstName", header: "First", width: 120, sortable: true, },
8278
{ key: "lastName", header: "Last", width: 120, sortable: true, },
8379
{ key: "email", header: "Email", width: 250, sortable: true, }
8480
];
8581
86-
const SubComponent = ({ row }) => (
87-
<SubComponentStyle>{\`Row \${row.id} is expanded\`}</SubComponentStyle>
88-
);
89-
9082
const Example = () => {
9183
const [data, setData] = useState(testData);
9284
@@ -106,7 +98,7 @@ const Example = () => {
10698
rowHeight={35}
10799
itemKey={row => row.id}
108100
onSort={onSort}
109-
subComponent={SubComponent}
101+
subComponent={({ row }) => <Custom>{\`Row \${row.id} is expanded\`}</Custom>}
110102
sortColumn="id"
111103
sortDirection="ASC"
112104
/>

‎example/src/examples/04-custom.tsx

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Table } from "react-fluid-table";
2-
import { Flag, Image, Input } from "semantic-ui-react";
1+
import { ColumnProps, Table } from "react-fluid-table";
2+
import { Flag, FlagNameValues, Image, Input } from "semantic-ui-react";
33
import styled from "styled-components";
44
import { TestData, testData } from "../data";
55

@@ -279,7 +279,7 @@ const countryMap = countries.reduce(
279279
{} as { [x: string]: string }
280280
);
281281

282-
const columns = [
282+
const columns: ColumnProps<TestData>[] = [
283283
{
284284
key: "id",
285285
header: "ID",
@@ -289,35 +289,34 @@ const columns = [
289289
key: "avatar",
290290
header: "Profile Photo",
291291
width: 150,
292-
content: ({ row }: { row: TestData }) => <ProfPic size="small" src={row.avatar} />
292+
content: ({ row }) => <ProfPic size="small" src={row.avatar} />
293293
},
294294
{
295295
key: "email",
296296
header: "Email",
297-
content: ({ row }: { row: TestData }) => <EmailInput defaultValue={row.email} />
297+
content: ({ row }) => <EmailInput defaultValue={row.email} />
298298
},
299299
{
300300
key: "firstName",
301301
header: "First",
302302
width: 100,
303-
content: ({ row }: { row: TestData }) => <TextStyle>{row.firstName}</TextStyle>
303+
content: ({ row }) => <TextStyle>{row.firstName}</TextStyle>
304304
},
305305
{
306306
key: "lastName",
307307
header: "Last",
308308
width: 100,
309-
content: ({ row }: { row: TestData }) => <TextStyle>{row.lastName}</TextStyle>
309+
content: ({ row }) => <TextStyle>{row.lastName}</TextStyle>
310310
},
311311
{
312312
key: "country",
313313
header: "Country",
314-
content: ({ row }: { row: TestData }) =>
314+
content: ({ row }) =>
315315
!countryMap[row.country] ? (
316316
`No flag for this country: ${row.country.toUpperCase()}`
317317
) : (
318318
<>
319-
{/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
320-
<Flag name={row.country as any} />
319+
<Flag name={row.country as FlagNameValues} />
321320
{countryMap[row.country]}
322321
</>
323322
)
@@ -331,35 +330,35 @@ const Example4 = () => (
331330
const Source = `
332331
const data = [/* ... */];
333332
334-
const columns = [
333+
const columns: ColumnProps<TestData>[] = [
335334
{ key: "id", header: "ID", width: 50 },
336335
{
337336
key: "avatar",
338337
header: "Profile Photo",
339338
width: 150,
340-
content: ({ row }: {row: TestData}) => <ProfPic size="small" src={row.avatar} />
339+
content: ({ row}) => <ProfPic size="small" src={row.avatar} />
341340
},
342341
{
343342
key: "email",
344343
header: "Email",
345-
content: ({ row }: {row: TestData}) => <Email email={row.email} />
344+
content: ({ row}) => <Email email={row.email} />
346345
},
347346
{
348347
key: "firstName",
349348
header: "First",
350349
width: 100,
351-
content: ({ row }: {row: TestData}) => <TextStyle>{row.firstName}</TextStyle>
350+
content: ({ row}) => <TextStyle>{row.firstName}</TextStyle>
352351
},
353352
{
354353
key: "lastName",
355354
header: "Last",
356355
width: 100,
357-
content: ({ row }: {row: TestData}) => <TextStyle>{row.lastName}</TextStyle>
356+
content: ({ row}) => <TextStyle>{row.lastName}</TextStyle>
358357
},
359358
{
360359
key: "country",
361360
header: "Country",
362-
content: ({ row }: {row: TestData}) =>
361+
content: ({ row}) =>
363362
!countryMap[row.country] ? (
364363
\`No flag for this country: \${row.country.toUpperCase()}\`
365364
) : (

‎example/src/examples/05-variable.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Table } from "react-fluid-table";
2-
import { testData } from "../data";
1+
import { ColumnProps, Table } from "react-fluid-table";
2+
import { TestData, testData } from "../data";
33

4-
const columns = [
4+
const columns: ColumnProps<TestData>[] = [
55
{
66
key: "id",
77
header: "ID",
@@ -27,7 +27,7 @@ const Example5 = () => <Table data={testData} columns={columns} tableHeight={400
2727
const Source = `
2828
const data = [/* ... */];
2929
30-
const columns = [
30+
const columns: ColumnProps<TestData>[] = [
3131
{ key: "id", header: "ID", width: 50 },
3232
{ key: "words", header: "Words", width: 100 },
3333
{ key: "sentence", header: "Sentences" },

‎example/src/examples/06-expanded.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React, { useLayoutEffect, useState } from "react";
2-
import { SubComponentProps, Table } from "react-fluid-table";
2+
import { ColumnProps, SubComponentProps, Table } from "react-fluid-table";
33
import { Accordion, AccordionTitleProps, Icon, Segment } from "semantic-ui-react";
44
import styled from "styled-components";
55
import { TestData, testData } from "../data";
66

7-
const columns = [
7+
const columns: ColumnProps<TestData>[] = [
88
{
99
key: "",
1010
width: 40,
@@ -115,15 +115,15 @@ const Example6 = () => (
115115
const Source = `
116116
const data = [/* ... */];
117117
118-
const columns = [
118+
const columns: ColumnProps<TestData>[] = [
119119
{ key: "", width: 40, expander: true },
120120
{ key: "id", header: "ID", width: 50 },
121121
{ key: "firstName", header: "First", width: 120 },
122122
{ key: "lastName", header: "Last", width: 120 },
123123
{ key: "email", header: "Email", width: 250 }
124124
];
125125
126-
const SubComponent = ({ row, index, clearSizeCache }) => {
126+
const SubComponent = ({ row, index, clearSizeCache }: SubComponentProps<TestData>) => {
127127
const [activeIndex, setActiveIndex] = useState(context[index]);
128128
const onClick = (e, { index: selected }) => {
129129
const result = activeIndex === selected ? null : selected;

‎example/src/examples/07-controlled.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable @typescript-eslint/ban-ts-comment */
12
import {
23
randCatchPhrase,
34
randCity,
@@ -30,7 +31,7 @@ const Background = styled.div`
3031
color: rgb(248, 248, 242);
3132
`;
3233

33-
const columns = [
34+
const columns: ColumnProps<TestData>[] = [
3435
{
3536
key: "id",
3637
header: "ID",
@@ -82,12 +83,12 @@ interface ControlledProps {
8283
const Controlled = ({ data, height, columns: variableColumns }: ControlledProps) => {
8384
const [rows, setRows] = useState<TestData[]>([]);
8485

85-
const onSort = (col: string | null, dir: SortDirection | null) => {
86+
const onSort = (col: string | null, dir: SortDirection) => {
8687
if (!col || !dir) {
8788
setRows(data);
8889
} else {
89-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
90-
setRows(_.orderBy(rows, [col], [dir.toLowerCase() as any]));
90+
const direction = dir === "ASC" ? "asc" : "desc";
91+
setRows(_.orderBy(rows, [col], [direction]));
9192
}
9293
};
9394

@@ -220,7 +221,8 @@ const Controlled = ({ data, columns: variableColumns }) => {
220221
if (!col || !dir) {
221222
setRows(data);
222223
} else {
223-
setRows(_.orderBy(rows, [col], [dir.toLowerCase()]));
224+
const direction = dir === "ASC" ? "asc" : "desc";
225+
setRows(_.orderBy(rows, [col], [direction]));
224226
}
225227
};
226228

0 commit comments

Comments
 (0)