-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
128 lines (113 loc) · 3.67 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import './App.css';
import 'devextreme/dist/css/dx.light.css';
import React, { useCallback, useEffect, useRef, useState } from "react";
import DropDownBox from "devextreme-react/drop-down-box";
import TreeView from "devextreme-react/tree-view";
import TagBox from "devextreme-react/tag-box";
import TextBox from "devextreme-react/text-box";
import CustomStore from "devextreme/data/custom_store";
import "whatwg-fetch";
import Popup from "devextreme/ui/popup";
const dropDownBoxAttributes = {
id: "myDropDownBox"
};
const treeDataSource = new CustomStore({
loadMode: "raw",
key: "ID",
load() {
return fetch(
`https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/data/treeProducts.json`
).then((response) => response.json());
}
});
const renderTagBox = (treeBoxValue, setTreeBoxValue) => () => {
const onValueChanged = useCallback(({ value }) => {
setTreeBoxValue(value);
}, []);
return (<div>
<TextBox visible={false} />
<TagBox
dataSource={treeDataSource}
value={treeBoxValue}
valueExpr="ID"
displayExpr="name"
onValueChanged={onValueChanged}
openOnFieldClick={false}
placeholder="Select a value..."
showClearButton={true}
width="100%"
/>
</div>);
};
export default function App() {
const treeView = useRef(null);
const [treeBoxValue, setTreeBoxValue] = useState(["1_1"]);
const onContentReady = useCallback(({ component }) => {
if (!component.isNotFirstLoad && treeBoxValue) {
component.isNotFirstLoad = true;
treeBoxValue.forEach((item) => {
component.selectItem(item);
});
}
}, [treeBoxValue]);
const onSelectionChanged = useCallback(({ component }) => {
let keys = component.getSelectedNodeKeys();
if (!component.customSelection && JSON.stringify(treeBoxValue) !== JSON.stringify(keys)) {
setTreeBoxValue(keys);
}
}, [treeBoxValue]);
const onValueChanged = useCallback(({ value }) => {
setTreeBoxValue(value);
}, []);
useEffect(() => {
const treeViewInstance = treeView?.current?.instance;
// Synchronize TreeView
if (!treeViewInstance) return;
treeViewInstance.customSelection = true;
treeViewInstance.unselectAll();
if (treeBoxValue && treeBoxValue.length > 0) {
treeBoxValue.forEach((item) => {
treeViewInstance.selectItem(item);
});
}
treeViewInstance.customSelection = false;
var popup = Popup.getInstance(
document.querySelector("#myDropDownBox .dx-dropdowneditor-overlay")
);
setTimeout(() => popup.repaint());
}, [treeView, treeBoxValue]);
return (
<div className="dx-fieldset">
<div className="dx-field">
<div className="dx-field-label">DropDownBox with embedded TreeView</div>
<div className="dx-field-value">
<DropDownBox
elementAttr={dropDownBoxAttributes}
deferRendering={false}
value={treeBoxValue}
valueExpr="ID"
displayExpr="name"
dataSource={treeDataSource}
fieldComponent={renderTagBox(treeBoxValue, setTreeBoxValue)}
onValueChanged={onValueChanged}
>
<TreeView
ref={treeView}
onContentReady={onContentReady}
dataSource={treeDataSource}
dataStructure="plain"
keyExpr="ID"
parentIdExpr="categoryId"
selectionMode="multiple"
showCheckBoxesMode="normal"
selectNodesRecursive={false}
displayExpr="name"
selectByClick={true}
onItemSelectionChanged={onSelectionChanged}
/>
</DropDownBox>
</div>
</div>
</div>
);
}