Skip to content

Commit b0d9a8c

Browse files
pharret31pharret31
committed
code review
1 parent 3c00f6f commit b0d9a8c

File tree

12 files changed

+105
-51
lines changed

12 files changed

+105
-51
lines changed

‎apps/demos/Demos/ActionSheet/Basics/React/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const App = () => {
1212

1313
const showActionSheet = useCallback((): void => {
1414
setIsActionSheetVisible(true);
15-
}, [setIsActionSheetVisible]);
15+
}, []);
1616

1717
const onActionSheetButtonClick = useCallback((buttonName: string): void => {
1818
setIsActionSheetVisible(false);

‎apps/demos/Demos/ActionSheet/Basics/ReactJs/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const App = () => {
1111
const [showCancelButton, setShowCancelButton] = useState(true);
1212
const showActionSheet = useCallback(() => {
1313
setIsActionSheetVisible(true);
14-
}, [setIsActionSheetVisible]);
14+
}, []);
1515
const onActionSheetButtonClick = useCallback((buttonName) => {
1616
setIsActionSheetVisible(false);
1717
notify(`The "${buttonName}" button is clicked.`);

‎apps/demos/Demos/List/ItemDeletion/React/App.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import React, { useCallback, useState } from 'react';
2-
import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
3-
import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
4-
import List, { type ListTypes } from 'devextreme-react/list';
2+
import SelectBox from 'devextreme-react/select-box';
3+
import type { SelectBoxTypes } from 'devextreme-react/select-box';
4+
import CheckBox from 'devextreme-react/check-box';
5+
import type { CheckBoxTypes } from 'devextreme-react/check-box';
6+
import List from 'devextreme-react/list';
7+
import type { ListTypes } from 'devextreme-react/list';
58
import { tasks, deleteModeLabel } from './data.ts';
69

7-
const itemDeleteModes: ListTypes.Properties['itemDeleteMode'][] = ['static', 'toggle', 'slideButton', 'slideItem', 'swipe', 'context'];
10+
const itemDeleteModes: ListTypes.ItemDeleteMode[] = ['static', 'toggle', 'slideButton', 'slideItem', 'swipe', 'context'];
811

912
const App = () => {
1013
const [allowDeletion, setAllowDeletion] = useState<boolean>(false);
11-
const [itemDeleteMode, setItemDeleteMode] = useState<ListTypes.Properties['itemDeleteMode']>('toggle');
14+
const [itemDeleteMode, setItemDeleteMode] = useState<ListTypes.ItemDeleteMode>('toggle');
1215

1316
const onAllowDeletionChange = useCallback((args: CheckBoxTypes.ValueChangedEvent): void => {
1417
setAllowDeletion(args.value);

‎apps/demos/Demos/List/Search/React/App.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import React, { useCallback, useState } from 'react';
2-
import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
3-
import List, { type ListTypes } from 'devextreme-react/list';
2+
import SelectBox from 'devextreme-react/select-box';
3+
import type { SelectBoxTypes } from 'devextreme-react/select-box';
4+
import List from 'devextreme-react/list';
5+
import type { SearchMode } from 'devextreme-react/common';
46
import { products, searchModeLabel } from './data.ts';
57
import type { Product } from './types.ts';
68

79
function ItemTemplate(data: Product) {
810
return <div>{data.Name}</div>;
911
}
1012

11-
const searchModes: ListTypes.Properties['searchMode'][] = ['contains', 'startswith', 'equals'];
13+
const searchModes: SearchMode[] = ['contains', 'startswith', 'equals'];
1214

1315
const App = () => {
14-
const [searchMode, setSearchMode] = useState<ListTypes.Properties['searchMode']>('contains');
16+
const [searchMode, setSearchMode] = useState<SearchMode>('contains');
1517

1618
const onSearchModeChange = useCallback((args: SelectBoxTypes.ValueChangedEvent): void => {
1719
setSearchMode(args.value);

‎apps/demos/Demos/List/Selection/React/App.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React, { useCallback, useState } from 'react';
2-
2+
import type { SingleMultipleAllOrNone, SelectAllMode } from 'devextreme-react/common';
33
import SelectBox from 'devextreme-react/select-box';
4-
import List, { type ListTypes } from 'devextreme-react/list';
4+
import List from 'devextreme-react/list';
5+
import type { ListTypes } from 'devextreme-react/list';
56
import CheckBox from 'devextreme-react/check-box';
7+
import type { CheckBoxTypes } from 'devextreme-react/check-box';
68

79
import { ArrayStore } from 'devextreme-react/common/data';
810

@@ -17,14 +19,14 @@ const dataSource = new ArrayStore({
1719
key: 'id',
1820
data: tasks,
1921
});
20-
const selectionModes: ListTypes.Properties['selectionMode'][] = ['none', 'single', 'multiple', 'all'];
21-
const selectAllModes: ListTypes.Properties['selectAllMode'][] = ['page', 'allPages'];
22+
const selectionModes: SingleMultipleAllOrNone[] = ['none', 'single', 'multiple', 'all'];
23+
const selectAllModes: SelectAllMode[] = ['page', 'allPages'];
2224

2325
export default function App() {
24-
const [selectionMode, setSelectionMode] = useState<ListTypes.Properties['selectionMode']>('all');
25-
const [selectAllMode, setSelectAllMode] = useState<ListTypes.Properties['selectAllMode']>('page');
26-
const [selectByClick, setSelectByClick] = useState<boolean>(false);
27-
const [selectedItemKeys, setSelectedItemKeys] = useState<[]>([]);
26+
const [selectionMode, setSelectionMode] = useState<SingleMultipleAllOrNone>('all');
27+
const [selectAllMode, setSelectAllMode] = useState<SelectAllMode>('page');
28+
const [selectByClick, setSelectByClick] = useState<CheckBoxTypes.Properties['value']>(false);
29+
const [selectedItemKeys, setSelectedItemKeys] = useState<ListTypes.Properties['selectedItemKeys'][]>([]);
2830

2931
const onSelectedItemKeysChange = useCallback(({ name, value }): void => {
3032
if (name === 'selectedItemKeys') {
@@ -81,7 +83,7 @@ export default function App() {
8183
<CheckBox
8284
value={selectByClick}
8385
elementAttr={selectByClickLabel}
84-
onValueChange={(value: boolean | null | undefined): void => setSelectByClick(!!value)}>
86+
onValueChange={setSelectByClick}>
8587
</CheckBox>
8688
</div>
8789
</div>

‎apps/demos/Demos/List/Selection/ReactJs/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export default function App() {
7575
<CheckBox
7676
value={selectByClick}
7777
elementAttr={selectByClickLabel}
78-
onValueChange={(value) => setSelectByClick(!!value)}
78+
onValueChange={setSelectByClick}
7979
></CheckBox>
8080
</div>
8181
</div>

‎apps/demos/Demos/Stepper/Overview/React/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import Steppers from './Steppers.tsx';
1010
import Options from './Options.tsx';
1111

1212
export default function App() {
13-
const [orientation, setOrientation] = useState<Orientation>(orientations[0].value as Orientation);
14-
const [navigationMode, setNavigationMode] = useState<boolean>(navigationModes[0].value as boolean);
13+
const [orientation, setOrientation] = useState<Orientation>(orientations[0].value);
14+
const [navigationMode, setNavigationMode] = useState<boolean>(navigationModes[0].value);
1515
const [selectOnFocus, setSelectOnFocus] = useState<boolean>(true);
1616
const [rtlMode, setRtlMode] = useState<boolean>(false);
1717

‎apps/demos/Demos/Stepper/Overview/React/data.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { StepperTypes } from 'devextreme-react/stepper';
2-
import type { StepperOption } from './types.ts';
2+
import type { StepperOrientation, StepperNavigationMode } from './types.ts';
33

44
export const steps: StepperTypes.Item[] = [
55
{
@@ -30,12 +30,12 @@ export const steps: StepperTypes.Item[] = [
3030
},
3131
];
3232

33-
export const orientations: StepperOption[] = [
33+
export const orientations: StepperOrientation[] = [
3434
{ text: 'Horizontal', value: 'horizontal' },
3535
{ text: 'Vertical', value: 'vertical' },
3636
];
3737

38-
export const navigationModes: StepperOption[] = [
38+
export const navigationModes: StepperNavigationMode[] = [
3939
{ text: 'Non-linear', value: false },
4040
{ text: 'Linear', value: true },
4141
];

‎apps/demos/Demos/Stepper/Overview/React/types.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import type { Orientation } from 'devextreme-react/common';
22
import type { StepperTypes } from 'devextreme-react/stepper';
33

4-
export type StepperOption = {
4+
export type StepperOrientation = {
55
text: string;
6-
value: Orientation | boolean;
6+
value: Orientation;
7+
};
8+
9+
export type StepperNavigationMode = {
10+
text: string;
11+
value: boolean;
712
};
813

914
export type StepperConfig = {

‎apps/demos/Demos/TreeView/ContextMenuIntegration/React/App.tsx‎

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,52 @@ import React, { useCallback, useRef, useState } from 'react';
33
import { TreeView } from 'devextreme-react/tree-view';
44
import type { TreeViewTypes, TreeViewRef } from 'devextreme-react/tree-view';
55
import { ContextMenu } from 'devextreme-react/context-menu';
6-
import type { ContextMenuTypes, ContextMenuRef } from 'devextreme-react/context-menu';
6+
import type { ContextMenuTypes } from 'devextreme-react/context-menu';
77
import List from 'devextreme-react/list';
88

99
import { products, menuItems } from './data.ts';
10-
import type { Product } from './types';
10+
import type { Product, MenuItem } from './types';
1111

1212
const App = () => {
13-
const contextMenuRef = useRef<ContextMenuRef>(null);
14-
const treeViewRef = useRef<TreeViewRef>(null);
13+
const [contextMenuItems, setContextMenuItems] = useState<MenuItem[]>([...menuItems]);
1514
const [logItems, setLogItems] = useState<string[]>([]);
1615
const [selectedTreeItem, setSelectedTreeItem] = useState<Product | undefined>(undefined);
16+
const treeViewRef = useRef<TreeViewRef>(null);
1717

1818
const treeViewItemContextMenu = useCallback((
1919
e: TreeViewTypes.ItemContextMenuEvent<Product>,
20-
) => {
20+
): void => {
2121
setSelectedTreeItem(e.itemData);
2222

2323
const isProductItem = !e.itemData?.items;
24-
contextMenuRef.current?.instance().option('items[0].visible', !isProductItem);
25-
contextMenuRef.current?.instance().option('items[1].visible', !isProductItem);
26-
contextMenuRef.current?.instance().option('items[2].visible', isProductItem);
27-
contextMenuRef.current?.instance().option('items[3].visible', isProductItem);
24+
const isExpanded = e.node?.expanded;
25+
setContextMenuItems((prev: MenuItem[]): MenuItem[] => prev.map((item: MenuItem, index: number): MenuItem => {
26+
switch (index) {
27+
case 0:
28+
return {
29+
...item,
30+
visible: !isProductItem,
31+
disabled: isExpanded,
32+
};
2833

29-
contextMenuRef.current?.instance().option('items[0].disabled', e.node?.expanded);
30-
contextMenuRef.current?.instance().option('items[1].disabled', !e.node?.expanded);
34+
case 1:
35+
return {
36+
...item,
37+
visible: !isProductItem,
38+
disabled: !isExpanded,
39+
};
40+
41+
case 2:
42+
case 3:
43+
return {
44+
...item,
45+
visible: isProductItem,
46+
};
47+
48+
default:
49+
return item;
50+
}
51+
}));
3152
}, []);
3253

3354
const contextMenuItemClick = useCallback((
@@ -84,8 +105,7 @@ const App = () => {
84105
/>
85106
</div>
86107
<ContextMenu
87-
ref={contextMenuRef}
88-
dataSource={menuItems}
108+
dataSource={contextMenuItems}
89109
target="#treeview .dx-treeview-item"
90110
onItemClick={contextMenuItemClick}
91111
/>

0 commit comments

Comments
 (0)