Skip to content

Commit ae8bc93

Browse files
anna-shakhovaanna-shakhova
committed
Demos: fix ts issues in Sortable React demos
1 parent f8174ea commit ae8bc93

File tree

4 files changed

+82
-85
lines changed

4 files changed

+82
-85
lines changed

‎apps/demos/Demos/Sortable/Customization/React/App.tsx‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import React, { useCallback, useState } from 'react';
22

3-
import { DragDirection, DragHighlight, Orientation } from 'devextreme-react/common';
4-
5-
import { ScrollView } from 'devextreme-react/scroll-view';
6-
import { Sortable, type SortableTypes } from 'devextreme-react/sortable';
7-
import { SelectBox, type SelectBoxTypes } from 'devextreme-react/select-box';
8-
import { CheckBox, type CheckBoxTypes } from 'devextreme-react/check-box';
9-
import { NumberBox, type NumberBoxTypes } from 'devextreme-react/number-box';
3+
import CheckBox from 'devextreme-react/check-box';
4+
import type { CheckBoxTypes } from 'devextreme-react/check-box';
5+
import type { DragDirection, DragHighlight, Orientation } from 'devextreme-react/common';
6+
import NumberBox from 'devextreme-react/number-box';
7+
import type { NumberBoxTypes } from 'devextreme-react/number-box';
8+
import ScrollView from 'devextreme-react/scroll-view';
9+
import SelectBox from 'devextreme-react/select-box';
10+
import type { SelectBoxTypes } from 'devextreme-react/select-box';
11+
import Sortable from 'devextreme-react/sortable';
12+
import type { SortableTypes } from 'devextreme-react/sortable';
1013

1114
import {
1215
tasks,
@@ -16,8 +19,8 @@ import {
1619
dragDirectionLabel,
1720
itemOrientationLabel,
1821
} from './data.ts';
19-
import Item from './Item.tsx';
2022
import DragItem from './DragItem.tsx';
23+
import Item from './Item.tsx';
2124

2225
const dropFeedbackModes: DragHighlight[] = ['push', 'indicate'];
2326
const itemOrientations: Orientation[] = ['vertical', 'horizontal'];
@@ -48,37 +51,37 @@ const App = () => {
4851
];
4952

5053
setItems(updatedItems);
51-
}, [items, setItems]);
54+
}, [items]);
5255

5356
const onDropFeedbackModeChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
5457
setDropFeedbackMode(e.value);
55-
}, [setDropFeedbackMode]);
58+
}, []);
5659

5760
const onItemOrientationChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
5861
setItemOrientation(e.value);
5962
setDragDirection('both');
60-
}, [setItemOrientation, setDragDirection]);
63+
}, []);
6164

6265
const onDragDirectionChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
6366
setDragDirection(e.value);
64-
}, [setDragDirection]);
67+
}, []);
6568

6669
const onScrollSpeedChanged = useCallback((e: NumberBoxTypes.ValueChangedEvent) => {
6770
setScrollSpeed(e.value);
68-
}, [setScrollSpeed]);
71+
}, []);
6972

7073
const onScrollSensitivityChanged = useCallback((e: NumberBoxTypes.ValueChangedEvent) => {
7174
setScrollSensitivity(e.value);
72-
}, [setScrollSensitivity]);
75+
}, []);
7376

7477
const onHandleChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
7578
setHandle(e.value ? '.handle' : '');
76-
}, [setHandle]);
79+
}, []);
7780

7881
const onDragTemplateChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
7982
setUseDragComponent(!!e.value);
8083
setCursorOffset(e.value ? { x: 10, y: 20 } : null);
81-
}, [setUseDragComponent, setCursorOffset]);
84+
}, []);
8285

8386
return (
8487
<div id="demo-container">

‎apps/demos/Demos/Sortable/Customization/React/DragItem.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import React from 'react';
2+
3+
import type { SortableTypes } from 'devextreme-react/sortable';
4+
25
import Item from './Item.tsx';
36

47
const itemStyle = {
@@ -7,7 +10,7 @@ const itemStyle = {
710
fontWeight: 'bold',
811
};
912

10-
export default function DragItem({ data }) {
13+
export default function DragItem({ data }: { data: SortableTypes.DragTemplateData }) {
1114
return (
1215
<Item
1316
text={data.itemData.Task_Subject}

‎apps/demos/Demos/Sortable/Customization/ReactJs/App.js‎

Lines changed: 30 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { useCallback, useState } from 'react';
2-
import { ScrollView } from 'devextreme-react/scroll-view';
3-
import { Sortable } from 'devextreme-react/sortable';
4-
import { SelectBox } from 'devextreme-react/select-box';
5-
import { CheckBox } from 'devextreme-react/check-box';
6-
import { NumberBox } from 'devextreme-react/number-box';
2+
import CheckBox from 'devextreme-react/check-box';
3+
import NumberBox from 'devextreme-react/number-box';
4+
import ScrollView from 'devextreme-react/scroll-view';
5+
import SelectBox from 'devextreme-react/select-box';
6+
import Sortable from 'devextreme-react/sortable';
77
import {
88
tasks,
99
scrollSensitivityLabel,
@@ -12,8 +12,8 @@ import {
1212
dragDirectionLabel,
1313
itemOrientationLabel,
1414
} from './data.js';
15-
import Item from './Item.js';
1615
import DragItem from './DragItem.js';
16+
import Item from './Item.js';
1717

1818
const dropFeedbackModes = ['push', 'indicate'];
1919
const itemOrientations = ['vertical', 'horizontal'];
@@ -45,52 +45,31 @@ const App = () => {
4545
];
4646
setItems(updatedItems);
4747
},
48-
[items, setItems],
49-
);
50-
const onDropFeedbackModeChanged = useCallback(
51-
(e) => {
52-
setDropFeedbackMode(e.value);
53-
},
54-
[setDropFeedbackMode],
55-
);
56-
const onItemOrientationChanged = useCallback(
57-
(e) => {
58-
setItemOrientation(e.value);
59-
setDragDirection('both');
60-
},
61-
[setItemOrientation, setDragDirection],
62-
);
63-
const onDragDirectionChanged = useCallback(
64-
(e) => {
65-
setDragDirection(e.value);
66-
},
67-
[setDragDirection],
68-
);
69-
const onScrollSpeedChanged = useCallback(
70-
(e) => {
71-
setScrollSpeed(e.value);
72-
},
73-
[setScrollSpeed],
74-
);
75-
const onScrollSensitivityChanged = useCallback(
76-
(e) => {
77-
setScrollSensitivity(e.value);
78-
},
79-
[setScrollSensitivity],
80-
);
81-
const onHandleChanged = useCallback(
82-
(e) => {
83-
setHandle(e.value ? '.handle' : '');
84-
},
85-
[setHandle],
86-
);
87-
const onDragTemplateChanged = useCallback(
88-
(e) => {
89-
setUseDragComponent(!!e.value);
90-
setCursorOffset(e.value ? { x: 10, y: 20 } : null);
91-
},
92-
[setUseDragComponent, setCursorOffset],
48+
[items],
9349
);
50+
const onDropFeedbackModeChanged = useCallback((e) => {
51+
setDropFeedbackMode(e.value);
52+
}, []);
53+
const onItemOrientationChanged = useCallback((e) => {
54+
setItemOrientation(e.value);
55+
setDragDirection('both');
56+
}, []);
57+
const onDragDirectionChanged = useCallback((e) => {
58+
setDragDirection(e.value);
59+
}, []);
60+
const onScrollSpeedChanged = useCallback((e) => {
61+
setScrollSpeed(e.value);
62+
}, []);
63+
const onScrollSensitivityChanged = useCallback((e) => {
64+
setScrollSensitivity(e.value);
65+
}, []);
66+
const onHandleChanged = useCallback((e) => {
67+
setHandle(e.value ? '.handle' : '');
68+
}, []);
69+
const onDragTemplateChanged = useCallback((e) => {
70+
setUseDragComponent(!!e.value);
71+
setCursorOffset(e.value ? { x: 10, y: 20 } : null);
72+
}, []);
9473
return (
9574
<div id="demo-container">
9675
<div className="widget-container">

‎apps/demos/Demos/Sortable/Kanban/React/App.tsx‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React, { useCallback, useState } from 'react';
2+
23
import ScrollView from 'devextreme-react/scroll-view';
34
import Sortable from 'devextreme-react/sortable';
4-
import {
5-
tasks as taskList, employees, Employee, Task,
6-
} from './data.ts';
5+
import type { SortableTypes } from 'devextreme-react/sortable';
6+
7+
import { tasks as taskList, employees } from './data.ts';
8+
import type { Employee, Task } from './data.ts';
79

8-
function getLists(statusArray: string[], taskArray: Task[]) {
9-
const tasksMap = taskArray.reduce((result: { [x: string]: any[]; }, task: { Task_Status: string | number; }) => {
10+
function getLists(statusArray: string[], taskArray: Task[]): Task[][] {
11+
const tasksMap = taskArray.reduce<Record<string, Task[]>>((result, task) => {
1012
if (result[task.Task_Status]) {
1113
result[task.Task_Status].push(task);
1214
} else {
@@ -19,7 +21,7 @@ function getLists(statusArray: string[], taskArray: Task[]) {
1921
}
2022

2123
function getEmployeesMap(employeesArray: Employee[]): Record<string, string> {
22-
return employeesArray.reduce((result, employee) => {
24+
return employeesArray.reduce<Record<string, string>>((result, employee) => {
2325
result[employee.ID] = employee.Name;
2426
return result;
2527
}, {});
@@ -29,7 +31,7 @@ function removeItem(array: any[], removeIdx: number) {
2931
return array.filter((_, idx) => idx !== removeIdx);
3032
}
3133

32-
function insertItem(array: any[], item, insertIdx: number) {
34+
function insertItem(array: any[], item: any, insertIdx: number) {
3335
const newArray = [...array];
3436
newArray.splice(insertIdx, 0, item);
3537
return newArray;
@@ -52,7 +54,13 @@ const Card: React.FC<{ task: Task, employeesMap: Record<string, string> }> = ({
5254
<div className="card-assignee">{employeesMap[task.Task_Assigned_Employee_ID]}</div>
5355
</div>;
5456

55-
const List: React.FC<{ title, index, tasks, employeesMap, onTaskDrop }> = ({
57+
const List: React.FC<{
58+
title: string;
59+
index: number;
60+
tasks: Task[];
61+
employeesMap: Record<string, string>;
62+
onTaskDrop: (e: SortableTypes.ReorderEvent | SortableTypes.AddEvent) => void;
63+
}> = ({
5664
title, index, tasks, employeesMap, onTaskDrop,
5765
}) => <div className="list">
5866
<div className="list-title">{title}</div>
@@ -65,12 +73,15 @@ const List: React.FC<{ title, index, tasks, employeesMap, onTaskDrop }> = ({
6573
group="cardsGroup"
6674
data={index}
6775
onReorder={onTaskDrop}
68-
onAdd={onTaskDrop}>
69-
{tasks.map((task) => <Card
70-
key={task.Task_ID}
71-
task={task}
72-
employeesMap={employeesMap}>
73-
</Card>)}
76+
onAdd={onTaskDrop}
77+
>
78+
{tasks.map((task: Task) => (
79+
<Card
80+
key={task.Task_ID}
81+
task={task}
82+
employeesMap={employeesMap}>
83+
</Card>
84+
))}
7485
</Sortable>
7586
</ScrollView>
7687
</div>;
@@ -87,7 +98,7 @@ function App() {
8798
const onTaskDrop = useCallback(
8899
({
89100
fromData, toData, fromIndex, toIndex,
90-
}) => {
101+
}: SortableTypes.ReorderEvent | SortableTypes.AddEvent) => {
91102
const updatedLists = [...lists];
92103

93104
const item = updatedLists[fromData][fromIndex];
@@ -109,8 +120,9 @@ function App() {
109120
className="sortable-lists"
110121
itemOrientation="horizontal"
111122
handle=".list-title"
112-
onReorder={onListReorder}>
113-
{lists.map((tasks, listIndex: string | number) => {
123+
onReorder={onListReorder}
124+
>
125+
{lists.map((tasks, listIndex: number) => {
114126
const status = statuses[listIndex];
115127
return <List
116128
key={status}

0 commit comments

Comments
 (0)