Skip to content

Commit 80ce6c4

Browse files
lytclytc
committed
fix typing
1 parent c9b8231 commit 80ce6c4

File tree

17 files changed

+84
-69
lines changed

17 files changed

+84
-69
lines changed

‎.eslintrc.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@
3131
},
3232
"plugins": [
3333
"@typescript-eslint",
34-
"react"
34+
"react",
35+
"react-hooks"
3536
],
3637
"rules": {
3738
"max-len": ["error", { "code": 120, "ignoreStrings": true, "ignoreTemplateLiterals": true }],
@@ -58,6 +59,8 @@
5859
"components": [ "Link" ],
5960
"specialLink": [ "hrefLeft", "hrefRight" ],
6061
"aspects": [ "noHref", "invalidHref", "preferButton" ]
61-
}]
62+
}],
63+
"react-hooks/rules-of-hooks": "error",
64+
"react-hooks/exhaustive-deps": "warn"
6265
}
6366
}

‎docs/api/globals.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ <h3>Sortly<wbr>Props</h3>
265265
<h4 class="tsd-type-parameters-title">Type parameters</h4>
266266
<ul class="tsd-type-parameters">
267267
<li>
268-
<h4>D<span class="tsd-signature-symbol">: </span><a href="globals.html#itemdata" class="tsd-signature-type">ItemData</a></h4>
268+
<h4>D</h4>
269269
</li>
270270
</ul>
271271
<div class="tsd-type-declaration">
@@ -306,14 +306,14 @@ <h5>on<wbr>Change<span class="tsd-signature-symbol">: </span><span class="tsd-si
306306
<ul class="tsd-parameters">
307307
<li class="tsd-parameter-siganture">
308308
<ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-variable tsd-is-not-exported">
309-
<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span>items<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">D</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
309+
<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span>items<span class="tsd-signature-symbol">: </span><a href="globals.html#itemdata" class="tsd-signature-type">ItemData</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">D</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
310310
</ul>
311311
<ul class="tsd-descriptions">
312312
<li class="tsd-description">
313313
<h4 class="tsd-parameters-title">Parameters</h4>
314314
<ul class="tsd-parameters">
315315
<li>
316-
<h5>items: <span class="tsd-signature-type">D</span><span class="tsd-signature-symbol">[]</span></h5>
316+
<h5>items: <a href="globals.html#itemdata" class="tsd-signature-type">ItemData</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">D</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">[]</span></h5>
317317
</li>
318318
</ul>
319319
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
@@ -387,7 +387,7 @@ <h3>Sortly</h3>
387387
<h4 class="tsd-type-parameters-title">Type parameters</h4>
388388
<ul class="tsd-type-parameters">
389389
<li>
390-
<h4>D<span class="tsd-signature-symbol">: </span><a href="globals.html#itemdata" class="tsd-signature-type">ItemData</a></h4>
390+
<h4>D</h4>
391391
</li>
392392
</ul>
393393
<h4 class="tsd-parameters-title">Parameters</h4>
@@ -1116,7 +1116,7 @@ <h3>use<wbr>IsClosest<wbr>Dragging</h3>
11161116
<li class="tsd-description">
11171117
<aside class="tsd-sources">
11181118
<ul>
1119-
<li>Defined in packages/react-sortly/src/useIsClosestDragging.ts:6</li>
1119+
<li>Defined in packages/react-sortly/src/useIsClosestDragging.ts:8</li>
11201120
</ul>
11211121
</aside>
11221122
<h4 class="tsd-parameters-title">Parameters</h4>

‎docs/main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"eslint-plugin-import": "^2.18.2",
3737
"eslint-plugin-jsx-a11y": "^6.2.3",
3838
"eslint-plugin-react": "7.16.0",
39+
"eslint-plugin-react-hooks": "^2.3.0",
3940
"husky": "^3.0.7",
4041
"jest": "^24.9.0",
4142
"lint-staged": "^9.4.1",

‎packages/documentation/src/pages/examples/Advanced/Advanced.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import faker from 'faker/locale/en';
77
import Sortly, { ID, ItemData, add, remove, insert } from 'react-sortly/src';
88
import ItemRenderer from './ItemRenderer';
99

10-
type Item = ItemData<{
10+
type Item = {
1111
name: string;
1212
isNew?: boolean;
13-
}>;
14-
const ITEMS: Item[] = [
13+
};
14+
const ITEMS: ItemData<Item>[] = [
1515
{ id: 1, name: 'Priscilla Cormier', depth: 0 },
1616
{ id: 2, name: 'Miss Erich Bartoletti', depth: 0 },
1717
{ id: 3, name: 'Alison Friesen', depth: 1 },
@@ -21,7 +21,7 @@ const ITEMS: Item[] = [
2121

2222
const Advanced = () => {
2323
const [items, setItems] = React.useState(ITEMS);
24-
const handleChange = (newItems: Item[]) => {
24+
const handleChange = (newItems: ItemData<Item>[]) => {
2525
setItems(newItems);
2626
};
2727
const handleChangeName = (id: ID, name: string) => {

‎packages/documentation/src/pages/examples/FileTree/FileTree.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import update from 'immutability-helper';
77
import Sortly, { ID, ItemData, findDescendants } from 'react-sortly/src';
88
import ItemRenderer from './ItemRenderer';
99

10-
type Item = ItemData<{
10+
type Item = {
1111
name: string;
1212
type: 'folder' | 'file';
1313
collapsed?: boolean;
14-
}>;
15-
const ITEMS: Item[] = [
14+
};
15+
const ITEMS: ItemData<Item>[] = [
1616
{ id: 1, name: random.word(), type: 'folder', depth: 0 },
1717
{ id: 2, name: system.fileName(), type: 'file', depth: 1 },
1818
{ id: 3, name: system.fileName(), type: 'file', depth: 1 },
@@ -32,7 +32,7 @@ const ITEMS: Item[] = [
3232
];
3333
const FileTree = () => {
3434
const [items, setItems] = React.useState(ITEMS);
35-
const handleChange = (newItems: Item[]) => {
35+
const handleChange = (newItems: ItemData<Item>[]) => {
3636
setItems(newItems);
3737
};
3838
const handleToggleCollapse = (id: ID) => {

‎packages/documentation/src/pages/examples/HorizontalList/HorizontalList.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import { name, internet } from 'faker/locale/en';
66
import Sortly, { ItemData } from 'react-sortly/src';
77
import ItemRenderer from './ItemRenderer';
88

9-
type Item = ItemData<{
9+
type Item = {
1010
name: string;
1111
color: string;
12-
}>;
13-
const generate = (numItems: number): Item[] => (
12+
};
13+
const generate = (numItems: number): ItemData<Item>[] => (
1414
Array
1515
.from(Array(numItems).keys())
1616
.map((index) => ({
@@ -23,7 +23,7 @@ const generate = (numItems: number): Item[] => (
2323

2424
const HorizontalList = () => {
2525
const [items, setItems] = React.useState(generate(6));
26-
const handleChange = (newItems: Item[]) => {
26+
const handleChange = (newItems: ItemData<Item>[]) => {
2727
setItems(newItems);
2828
};
2929

‎packages/documentation/src/pages/examples/MultipleTree.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ import Sortly, { ItemData, DragObject, add, remove, findDescendants } from 'reac
99
import DefaultItemRenderer from './DefaultItemRenderer';
1010
import useScreenSize from '../../hooks/useScreenSize';
1111

12-
type Item = ItemData<{
12+
type Item = {
1313
categoryId: number;
1414
name: string;
15-
}>;
15+
};
1616

1717
let idSeq = 0;
18-
const generate = (numItems: number, categoryId: number): Item[] => (
18+
const generate = (numItems: number, categoryId: number): ItemData<Item>[] => (
1919
Array
2020
.from(Array(numItems).keys())
2121
.map(() => {
@@ -37,8 +37,8 @@ const CATEGORIES = Array.from(Array(3).keys()).map((data, index) => ({
3737

3838
type TreeProps = {
3939
id: number;
40-
items: Item[];
41-
onChange: (items: Item[]) => void;
40+
items: ItemData<Item>[];
41+
onChange: (items: ItemData<Item>[]) => void;
4242
onEnter: (item: DragObject) => void;
4343
};
4444
const Tree = ({ items, onChange, onEnter }: TreeProps) => {
@@ -50,21 +50,21 @@ const Tree = ({ items, onChange, onEnter }: TreeProps) => {
5050
}),
5151
});
5252

53-
const handleMove = () => {
53+
const handleMove = React.useCallback(() => {
5454
if (!dragItem) {
5555
return;
5656
}
5757

5858
if (hovered) {
5959
onEnter(dragItem);
6060
}
61-
};
61+
}, [dragItem, hovered, onEnter]);
6262

6363
React.useEffect(() => {
6464
if (dragItem) {
6565
handleMove();
6666
}
67-
}, [hovered]);
67+
}, [dragItem, hovered, handleMove]);
6868

6969
return (
7070
<div ref={drop} style={{ paddingBottom: 50 }}>
@@ -82,7 +82,7 @@ const Tree = ({ items, onChange, onEnter }: TreeProps) => {
8282
const MultipleTree = () => {
8383
const { isLargeScreen } = useScreenSize();
8484
const [categories, setCategories] = React.useState(CATEGORIES);
85-
const handleChange = (index: number) => (newItems: Item[]) => {
85+
const handleChange = (index: number) => (newItems: ItemData<Item>[]) => {
8686
setCategories(update(categories, {
8787
[index]: { items: { $set: newItems } },
8888
}));

‎packages/documentation/src/pages/examples/RevertOnDragOutside.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ const useStyles = makeStyles((theme: Theme) => ({
1818
},
1919
}));
2020

21-
type Item = ItemData<{
21+
type Item = {
2222
name: string;
23-
}>;
24-
const ITEMS: Omit<Item, 'index'>[] = [
23+
};
24+
const ITEMS: ItemData<Item>[] = [
2525
{ id: 1, name: 'Priscilla Cormier', depth: 0 },
2626
{ id: 2, name: 'Miss Erich Bartoletti', depth: 0 },
2727
{ id: 3, name: 'Alison Friesen', depth: 1 },
@@ -32,7 +32,7 @@ const ITEMS: Omit<Item, 'index'>[] = [
3232
const RevertOnDragOutside = () => {
3333
const [items, setItems] = React.useState(ITEMS);
3434
const [pause, setPause] = React.useState(false);
35-
const handleChange = (newItems: Item[]) => {
35+
const handleChange = (newItems: ItemData<Item>[]) => {
3636
if (!pause) {
3737
setItems(newItems);
3838
}
@@ -53,7 +53,7 @@ const RevertOnDragOutside = () => {
5353
} else {
5454
setPause(false);
5555
}
56-
}, [hovered]);
56+
}, [hovered, didDrop]);
5757

5858
const classes = useStyles();
5959
return (

‎packages/documentation/src/pages/examples/Simple.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import { Box } from '@material-ui/core';
55
import Sortly, { ItemData } from 'react-sortly/src';
66
import DefaultItemRenderer from './DefaultItemRenderer';
77

8-
type Item = ItemData<{
8+
type Item = {
9+
id: number;
910
name: string;
10-
}>;
11-
const ITEMS: Item[] = [
11+
};
12+
const ITEMS: ItemData<Item>[] = [
1213
{ id: 1, name: 'Priscilla Cormier', depth: 0 },
1314
{ id: 2, name: 'Miss Erich Bartoletti', depth: 0 },
1415
{ id: 3, name: 'Alison Friesen', depth: 1 },
@@ -18,14 +19,14 @@ const ITEMS: Item[] = [
1819

1920
const Simple = () => {
2021
const [items, setItems] = React.useState(ITEMS);
21-
const handleChange = (newItems: Item[]) => {
22+
const handleChange = (newItems: ItemData<Item>[]) => {
2223
setItems(newItems);
2324
};
2425

2526
return (
2627
<Box width={{ md: 600 }}>
2728
<Flipper flipKey={items.map(({ id }) => id).join('.')}>
28-
<Sortly<Item>
29+
<Sortly
2930
items={items}
3031
onChange={handleChange}
3132
>

0 commit comments

Comments
 (0)