@progress/kendo-react-treeview 6.1.1 → 7.0.0-develop.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{dist/es/ItemRenderProps.d.ts → ItemRenderProps.d.ts} +4 -0
- package/LICENSE.md +1 -1
- package/{dist/npm/TreeView.d.ts → TreeView.d.ts} +5 -1
- package/{dist/es/TreeViewDragAnalyzer.d.ts → TreeViewDragAnalyzer.d.ts} +5 -1
- package/{dist/npm/TreeViewDragClue.d.ts → TreeViewDragClue.d.ts} +5 -1
- package/{dist/npm/TreeViewItem.d.ts → TreeViewItem.d.ts} +5 -1
- package/{dist/es/TreeViewOperationDescriptors.d.ts → TreeViewOperationDescriptors.d.ts} +4 -0
- package/{dist/es/TreeViewProps.d.ts → TreeViewProps.d.ts} +4 -0
- package/dist/cdn/js/kendo-react-treeview.js +5 -1
- package/{dist/es/events.d.ts → events.d.ts} +4 -1
- package/{dist/npm/handleTreeViewCheckChange.d.ts → handleTreeViewCheckChange.d.ts} +4 -0
- package/{dist/es/main.d.ts → index.d.ts} +9 -5
- package/index.js +5 -0
- package/index.mjs +745 -0
- package/{dist/npm/moveTreeViewItem.d.ts → moveTreeViewItem.d.ts} +4 -0
- package/package-metadata.d.ts +9 -0
- package/package.json +28 -37
- package/{dist/es/processTreeViewItems.d.ts → processTreeViewItems.d.ts} +4 -0
- package/{dist/npm/utils → utils}/consts.d.ts +4 -0
- package/utils/getItemIdUponKeyboardNavigation.d.ts +9 -0
- package/about.md +0 -3
- package/dist/es/ItemRenderProps.js +0 -2
- package/dist/es/TreeView.d.ts +0 -124
- package/dist/es/TreeView.js +0 -334
- package/dist/es/TreeViewDragAnalyzer.js +0 -186
- package/dist/es/TreeViewDragClue.d.ts +0 -144
- package/dist/es/TreeViewDragClue.js +0 -171
- package/dist/es/TreeViewItem.d.ts +0 -96
- package/dist/es/TreeViewItem.js +0 -255
- package/dist/es/TreeViewOperationDescriptors.js +0 -2
- package/dist/es/TreeViewProps.js +0 -1
- package/dist/es/events.js +0 -1
- package/dist/es/handleTreeViewCheckChange.d.ts +0 -69
- package/dist/es/handleTreeViewCheckChange.js +0 -193
- package/dist/es/main.js +0 -10
- package/dist/es/moveTreeViewItem.d.ts +0 -109
- package/dist/es/moveTreeViewItem.js +0 -155
- package/dist/es/package-metadata.d.ts +0 -5
- package/dist/es/package-metadata.js +0 -11
- package/dist/es/processTreeViewItems.js +0 -163
- package/dist/es/utils/consts.d.ts +0 -40
- package/dist/es/utils/consts.js +0 -40
- package/dist/es/utils/getItemIdUponKeyboardNavigation.d.ts +0 -5
- package/dist/es/utils/getItemIdUponKeyboardNavigation.js +0 -76
- package/dist/npm/ItemRenderProps.d.ts +0 -13
- package/dist/npm/ItemRenderProps.js +0 -3
- package/dist/npm/TreeView.js +0 -337
- package/dist/npm/TreeViewDragAnalyzer.d.ts +0 -135
- package/dist/npm/TreeViewDragAnalyzer.js +0 -189
- package/dist/npm/TreeViewDragClue.js +0 -174
- package/dist/npm/TreeViewItem.js +0 -258
- package/dist/npm/TreeViewOperationDescriptors.d.ts +0 -76
- package/dist/npm/TreeViewOperationDescriptors.js +0 -3
- package/dist/npm/TreeViewProps.d.ts +0 -137
- package/dist/npm/TreeViewProps.js +0 -2
- package/dist/npm/events.d.ts +0 -159
- package/dist/npm/events.js +0 -2
- package/dist/npm/handleTreeViewCheckChange.js +0 -197
- package/dist/npm/main.d.ts +0 -14
- package/dist/npm/main.js +0 -21
- package/dist/npm/moveTreeViewItem.js +0 -159
- package/dist/npm/package-metadata.d.ts +0 -5
- package/dist/npm/package-metadata.js +0 -14
- package/dist/npm/processTreeViewItems.d.ts +0 -51
- package/dist/npm/processTreeViewItems.js +0 -167
- package/dist/npm/utils/consts.js +0 -43
- package/dist/npm/utils/getItemIdUponKeyboardNavigation.d.ts +0 -5
- package/dist/npm/utils/getItemIdUponKeyboardNavigation.js +0 -79
- package/dist/systemjs/kendo-react-treeview.js +0 -1
- package/e2e-next/basic.tests.ts +0 -24
package/dist/npm/events.d.ts
DELETED
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { BaseEvent } from '@progress/kendo-react-common';
|
|
3
|
-
import { TreeView } from './TreeView';
|
|
4
|
-
/**
|
|
5
|
-
* Represents the object of the `onExpandChange` event ([see example]({% slug overview_treeview %}#toc-basic-usage)).
|
|
6
|
-
*/
|
|
7
|
-
export interface TreeViewExpandChangeEvent extends BaseEvent<TreeView> {
|
|
8
|
-
/**
|
|
9
|
-
* The item that is expanded or collapsed.
|
|
10
|
-
*/
|
|
11
|
-
item: any;
|
|
12
|
-
/**
|
|
13
|
-
* The hierarchical index of the item. The indices are zero-based. The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
|
|
14
|
-
*/
|
|
15
|
-
itemHierarchicalIndex: string;
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* Represents the object of the `onItemClick` event ([see example]({% slug overview_treeview %}#toc-basic-usage)).
|
|
19
|
-
*/
|
|
20
|
-
export interface TreeViewItemClickEvent extends BaseEvent<TreeView> {
|
|
21
|
-
/**
|
|
22
|
-
* The item that is clicked.
|
|
23
|
-
*/
|
|
24
|
-
item: any;
|
|
25
|
-
/**
|
|
26
|
-
* The hierarchical index of the item. The indices are zero-based.
|
|
27
|
-
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
|
|
28
|
-
*/
|
|
29
|
-
itemHierarchicalIndex: string;
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* Represents the object of the `onCheckChange` event ([see example]({% slug check_helper_funcs_treeview %})).
|
|
33
|
-
*/
|
|
34
|
-
export interface TreeViewCheckChangeEvent extends BaseEvent<TreeView> {
|
|
35
|
-
/**
|
|
36
|
-
* The item that is selected or deselected.
|
|
37
|
-
*/
|
|
38
|
-
item: any;
|
|
39
|
-
/**
|
|
40
|
-
* The hierarchical index of the item. The indices are zero-based.
|
|
41
|
-
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
|
|
42
|
-
*/
|
|
43
|
-
itemHierarchicalIndex: string;
|
|
44
|
-
}
|
|
45
|
-
/**
|
|
46
|
-
* Represents the object of the `onContextMenu` event ([see example]({% slug overview_treeview %}#toc-basic-usage)).
|
|
47
|
-
*/
|
|
48
|
-
export interface TreeViewContextMenuEvent extends BaseEvent<TreeView> {
|
|
49
|
-
/**
|
|
50
|
-
* An event target.
|
|
51
|
-
*/
|
|
52
|
-
target: TreeView;
|
|
53
|
-
/**
|
|
54
|
-
* The data object that represents the current item.
|
|
55
|
-
*/
|
|
56
|
-
item: any;
|
|
57
|
-
/**
|
|
58
|
-
* The ID of the current item.
|
|
59
|
-
*/
|
|
60
|
-
itemID: string;
|
|
61
|
-
/**
|
|
62
|
-
* A React Synthetic Event.
|
|
63
|
-
*/
|
|
64
|
-
syntheticEvent: React.MouseEvent<any>;
|
|
65
|
-
}
|
|
66
|
-
/**
|
|
67
|
-
* Represents the object of the `onItemDragStart` event.
|
|
68
|
-
*/
|
|
69
|
-
export interface TreeViewItemDragStartEvent {
|
|
70
|
-
/**
|
|
71
|
-
* An event target.
|
|
72
|
-
*/
|
|
73
|
-
target: TreeView;
|
|
74
|
-
/**
|
|
75
|
-
* The item that is dragged.
|
|
76
|
-
*/
|
|
77
|
-
item: any;
|
|
78
|
-
/**
|
|
79
|
-
* The hierarchical index of the dragged item. The indices are zero-based.
|
|
80
|
-
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
|
|
81
|
-
*/
|
|
82
|
-
itemHierarchicalIndex: string;
|
|
83
|
-
}
|
|
84
|
-
/**
|
|
85
|
-
* Represents the object of the `onItemDragOver` event ([see example]({% slug dragdrop_treeview %})).
|
|
86
|
-
*/
|
|
87
|
-
export interface TreeViewItemDragOverEvent {
|
|
88
|
-
/**
|
|
89
|
-
* The target that is associated with the dragged item.
|
|
90
|
-
*/
|
|
91
|
-
target: TreeView;
|
|
92
|
-
/**
|
|
93
|
-
* The item that is dragged.
|
|
94
|
-
*/
|
|
95
|
-
item: any;
|
|
96
|
-
/**
|
|
97
|
-
* The hierarchical index of the dragged item. The indices are zero-based.
|
|
98
|
-
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
|
|
99
|
-
*/
|
|
100
|
-
itemHierarchicalIndex: string;
|
|
101
|
-
/**
|
|
102
|
-
* The X (horizontal) coordinate (in pixels) at which the event occurred that is relative to the left edge of the entire document.
|
|
103
|
-
* Includes any portion of the document which is not currently visible.
|
|
104
|
-
*/
|
|
105
|
-
pageX: number;
|
|
106
|
-
/**
|
|
107
|
-
* The Y (vertical) coordinate (in pixels) at which the event occurred that is relative to the whole document.
|
|
108
|
-
* `pageY` observes any vertical scrolling of the page.
|
|
109
|
-
*/
|
|
110
|
-
pageY: number;
|
|
111
|
-
/**
|
|
112
|
-
* Provides the horizontal coordinate within the client area of the application at which the event occurred
|
|
113
|
-
* (as opposed to the coordinate within the page).
|
|
114
|
-
*/
|
|
115
|
-
clientX: number;
|
|
116
|
-
/**
|
|
117
|
-
* Provides the vertical coordinate within the client area of the application at which the event occurred
|
|
118
|
-
* (as opposed to the coordinate within the page).
|
|
119
|
-
*/
|
|
120
|
-
clientY: number;
|
|
121
|
-
}
|
|
122
|
-
/**
|
|
123
|
-
* Represents the object of the `onItemDragEnd` event ([see example]({% slug dragdrop_treeview %})).
|
|
124
|
-
*/
|
|
125
|
-
export interface TreeViewItemDragEndEvent {
|
|
126
|
-
/**
|
|
127
|
-
* The target that is associated with the dragged item.
|
|
128
|
-
*/
|
|
129
|
-
target: TreeView;
|
|
130
|
-
/**
|
|
131
|
-
* The item that is dragged.
|
|
132
|
-
*/
|
|
133
|
-
item: any;
|
|
134
|
-
/**
|
|
135
|
-
* The hierarchical index of the dragged item. The indices are zero-based.
|
|
136
|
-
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
|
|
137
|
-
*/
|
|
138
|
-
itemHierarchicalIndex: string;
|
|
139
|
-
/**
|
|
140
|
-
* The X (horizontal) coordinate (in pixels) at which the event occured that is relative to the left edge of the entire document.
|
|
141
|
-
* `pageX` includes any portion of the document that is not currently visible.
|
|
142
|
-
*/
|
|
143
|
-
pageX: number;
|
|
144
|
-
/**
|
|
145
|
-
* The Y (vertical) coordinate (in pixels) at which the event occured that is relative to the whole document.
|
|
146
|
-
* `pageY` observes any vertical scrolling of the page.
|
|
147
|
-
*/
|
|
148
|
-
pageY: number;
|
|
149
|
-
/**
|
|
150
|
-
* Provides the horizontal coordinate within the client area of the application at which the event occurred
|
|
151
|
-
* (as opposed to the coordinate within the page).
|
|
152
|
-
*/
|
|
153
|
-
clientX: number;
|
|
154
|
-
/**
|
|
155
|
-
* Provides the vertical coordinate within the client area of the application at which the event occurred
|
|
156
|
-
* (as opposed to the coordinate within the page).
|
|
157
|
-
*/
|
|
158
|
-
clientY: number;
|
|
159
|
-
}
|
package/dist/npm/events.js
DELETED
|
@@ -1,197 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
3
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
4
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
5
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
6
|
-
function step(op) {
|
|
7
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
8
|
-
while (_) try {
|
|
9
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
10
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
11
|
-
switch (op[0]) {
|
|
12
|
-
case 0: case 1: t = op; break;
|
|
13
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
14
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
15
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
16
|
-
default:
|
|
17
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
18
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
19
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
20
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
21
|
-
if (t[2]) _.ops.pop();
|
|
22
|
-
_.trys.pop(); continue;
|
|
23
|
-
}
|
|
24
|
-
op = body.call(thisArg, _);
|
|
25
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
26
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.handleTreeViewCheckChange = void 0;
|
|
31
|
-
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
32
|
-
var consts_1 = require("./utils/consts");
|
|
33
|
-
/**
|
|
34
|
-
* A helper function which updates the check descriptor.
|
|
35
|
-
*
|
|
36
|
-
* @param event - The event that triggered the change.
|
|
37
|
-
* @param check - The check descriptor that will be updated.
|
|
38
|
-
* @param data - The TreeView items.
|
|
39
|
-
* @param settings - The additional settings that configure the update of the check descriptor.
|
|
40
|
-
* @param childrenField - The field that points to the dataItem sub items. Defaults to `items`.
|
|
41
|
-
* The default behavior allows the selection of multiple items.
|
|
42
|
-
* @returns - The updated copy of the input check descriptor.
|
|
43
|
-
*
|
|
44
|
-
* @example
|
|
45
|
-
* ```jsx
|
|
46
|
-
* class App extends React.Component {
|
|
47
|
-
* state = { check: [], items: tree };
|
|
48
|
-
* render() {
|
|
49
|
-
* return (
|
|
50
|
-
* <div>
|
|
51
|
-
* <TreeView
|
|
52
|
-
* checkboxes={true} onCheckChange={this.onCheckChange}
|
|
53
|
-
* data={processTreeViewItems(this.state.items, { check: this.state.check })}
|
|
54
|
-
* />
|
|
55
|
-
* <div style={{ marginTop: 5 }}>
|
|
56
|
-
* <i>Press SPACE to check/uncheck the active item</i>
|
|
57
|
-
* <div className="example-config">
|
|
58
|
-
* Checked Indices: {this.state.check.join(",")}
|
|
59
|
-
* </div>
|
|
60
|
-
* </div>
|
|
61
|
-
* </div>
|
|
62
|
-
* );
|
|
63
|
-
* }
|
|
64
|
-
* onCheckChange = (event) => {
|
|
65
|
-
* this.setState({ check: handleTreeViewCheckChange(event, this.state.check, this.state.items) });
|
|
66
|
-
* }
|
|
67
|
-
* }
|
|
68
|
-
*
|
|
69
|
-
* const tree = [ {
|
|
70
|
-
* text: 'Furniture', expanded: true, items: [
|
|
71
|
-
* { text: 'Tables & Chairs' }, { text: 'Sofas' }, { text: 'Occasional Furniture' } ]
|
|
72
|
-
* }, {
|
|
73
|
-
* text: 'Decor', expanded: true, items: [
|
|
74
|
-
* { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' } ]
|
|
75
|
-
* } ];
|
|
76
|
-
*
|
|
77
|
-
* ReactDOM.render(<App />, document.querySelector('my-app'));
|
|
78
|
-
* ```
|
|
79
|
-
*/
|
|
80
|
-
function handleTreeViewCheckChange(event, check, data, settings, childrenField) {
|
|
81
|
-
if (settings === void 0) { settings = {}; }
|
|
82
|
-
if (!data || !data.length) {
|
|
83
|
-
return [];
|
|
84
|
-
}
|
|
85
|
-
var _a = parseOperation(check), ids = _a.ids, idField = _a.idField;
|
|
86
|
-
var itemId = idField ? (0, kendo_react_common_1.getNestedValue)(idField, event.item) : event.itemHierarchicalIndex;
|
|
87
|
-
var idIndex = ids.indexOf(itemId);
|
|
88
|
-
var itemJustChecked = idIndex === -1;
|
|
89
|
-
var subItemsField = childrenField || consts_1.CHILDREN_FIELD;
|
|
90
|
-
var newIds;
|
|
91
|
-
if (settings.singleMode) {
|
|
92
|
-
newIds = itemJustChecked ? [itemId] : [];
|
|
93
|
-
}
|
|
94
|
-
else {
|
|
95
|
-
newIds = ids.slice();
|
|
96
|
-
itemJustChecked ? newIds.push(itemId) : newIds.splice(idIndex, 1);
|
|
97
|
-
if (settings.checkChildren) {
|
|
98
|
-
checkChildren(event.item, event.itemHierarchicalIndex, itemJustChecked, idField, subItemsField, newIds);
|
|
99
|
-
}
|
|
100
|
-
if (settings.checkParents) {
|
|
101
|
-
checkParents(event.itemHierarchicalIndex, itemJustChecked, idField, subItemsField, newIds, data);
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
return (0, kendo_react_common_1.isArray)(check) ? newIds : Object.assign({}, check, { ids: newIds });
|
|
105
|
-
}
|
|
106
|
-
exports.handleTreeViewCheckChange = handleTreeViewCheckChange;
|
|
107
|
-
function parseOperation(operation) {
|
|
108
|
-
var ids;
|
|
109
|
-
var idField = undefined;
|
|
110
|
-
if ((0, kendo_react_common_1.isArray)(operation)) {
|
|
111
|
-
ids = operation;
|
|
112
|
-
}
|
|
113
|
-
else {
|
|
114
|
-
ids = operation.ids || [];
|
|
115
|
-
idField = operation.idField;
|
|
116
|
-
}
|
|
117
|
-
return { ids: ids, idField: idField };
|
|
118
|
-
}
|
|
119
|
-
function checkChildren(item, itemHierarchicalIndex, itemJustChecked, idField, childrenField, ids) {
|
|
120
|
-
(0, kendo_react_common_1.getAllDirectIndirectChildrenIds)(item, itemHierarchicalIndex, childrenField, idField).forEach(function (itemId) {
|
|
121
|
-
if (itemJustChecked && ids.indexOf(itemId) === -1) {
|
|
122
|
-
ids.push(itemId);
|
|
123
|
-
}
|
|
124
|
-
else if (!itemJustChecked && ids.indexOf(itemId) > -1) {
|
|
125
|
-
ids.splice(ids.indexOf(itemId), 1);
|
|
126
|
-
}
|
|
127
|
-
});
|
|
128
|
-
}
|
|
129
|
-
function checkParents(itemHierarchicalIndex, itemJustChecked, idField, childrenField, ids, data) {
|
|
130
|
-
var it = makeParentsIterator();
|
|
131
|
-
var result = it.next();
|
|
132
|
-
itemJustChecked ? check() : uncheck();
|
|
133
|
-
function check() {
|
|
134
|
-
// Check all parents which have all their children checked.
|
|
135
|
-
while (!result.done) {
|
|
136
|
-
var _a = result.value, id = _a.id, item = _a.item;
|
|
137
|
-
// The first check is needed. However, it is not sure whether to stop the entire loop.
|
|
138
|
-
if (ids.indexOf(id) === -1 &&
|
|
139
|
-
(0, kendo_react_common_1.areAllDirectChildrenChecked)(item, id, idField, childrenField, ids)) {
|
|
140
|
-
ids.push(id);
|
|
141
|
-
result = it.next();
|
|
142
|
-
}
|
|
143
|
-
else {
|
|
144
|
-
break;
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
function uncheck() {
|
|
149
|
-
// Uncheck parents until an already unchecked parent is reached.
|
|
150
|
-
while (!result.done) {
|
|
151
|
-
var id = result.value.id;
|
|
152
|
-
var idIndex = ids.indexOf(id);
|
|
153
|
-
if (idIndex > -1) {
|
|
154
|
-
ids.splice(idIndex, 1);
|
|
155
|
-
result = it.next();
|
|
156
|
-
}
|
|
157
|
-
else {
|
|
158
|
-
break;
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
// When called for unchecking, the parent items are not needed.
|
|
163
|
-
// That is why, for optimization, they are not returned.
|
|
164
|
-
function makeParentsIterator() {
|
|
165
|
-
var parents, i, parentId;
|
|
166
|
-
return __generator(this, function (_a) {
|
|
167
|
-
switch (_a.label) {
|
|
168
|
-
case 0:
|
|
169
|
-
if (!idField) return [3 /*break*/, 5];
|
|
170
|
-
parents = (0, kendo_react_common_1.getAllParents)(itemHierarchicalIndex, childrenField, data);
|
|
171
|
-
i = parents.length - 1;
|
|
172
|
-
_a.label = 1;
|
|
173
|
-
case 1:
|
|
174
|
-
if (!(i > -1)) return [3 /*break*/, 4];
|
|
175
|
-
return [4 /*yield*/, { id: (0, kendo_react_common_1.getNestedValue)(idField, parents[i]), item: itemJustChecked ? parents[i] : undefined }];
|
|
176
|
-
case 2:
|
|
177
|
-
_a.sent();
|
|
178
|
-
_a.label = 3;
|
|
179
|
-
case 3:
|
|
180
|
-
i--;
|
|
181
|
-
return [3 /*break*/, 1];
|
|
182
|
-
case 4: return [3 /*break*/, 8];
|
|
183
|
-
case 5:
|
|
184
|
-
parentId = kendo_react_common_1.treeIdUtils.getDirectParentId(itemHierarchicalIndex);
|
|
185
|
-
_a.label = 6;
|
|
186
|
-
case 6:
|
|
187
|
-
if (!parentId) return [3 /*break*/, 8];
|
|
188
|
-
return [4 /*yield*/, { id: parentId, item: itemJustChecked ? kendo_react_common_1.treeIdUtils.getItemById(parentId, data, childrenField) : undefined }];
|
|
189
|
-
case 7:
|
|
190
|
-
_a.sent();
|
|
191
|
-
parentId = kendo_react_common_1.treeIdUtils.getDirectParentId(parentId);
|
|
192
|
-
return [3 /*break*/, 6];
|
|
193
|
-
case 8: return [2 /*return*/];
|
|
194
|
-
}
|
|
195
|
-
});
|
|
196
|
-
}
|
|
197
|
-
}
|
package/dist/npm/main.d.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { TreeView } from './TreeView';
|
|
2
|
-
import { TreeViewItemClickEvent, TreeViewExpandChangeEvent, TreeViewCheckChangeEvent, TreeViewItemDragOverEvent, TreeViewItemDragStartEvent, TreeViewItemDragEndEvent } from './events';
|
|
3
|
-
import { processTreeViewItems } from './processTreeViewItems';
|
|
4
|
-
import { moveTreeViewItem } from './moveTreeViewItem';
|
|
5
|
-
import { handleTreeViewCheckChange, TreeViewCheckChangeSettings } from './handleTreeViewCheckChange';
|
|
6
|
-
import { TreeViewOperationDescriptor, TreeViewOperationDescriptors, TreeViewCheckDescriptor } from './TreeViewOperationDescriptors';
|
|
7
|
-
import { ItemRenderProps } from './ItemRenderProps';
|
|
8
|
-
import { TreeViewProps } from './TreeViewProps';
|
|
9
|
-
import { TreeViewDragClue } from './TreeViewDragClue';
|
|
10
|
-
import { TreeViewDragAnalyzer } from './TreeViewDragAnalyzer';
|
|
11
|
-
import { TreeViewItemPropsContext } from './TreeViewItem';
|
|
12
|
-
import getItemIdUponKeyboardNavigation from './utils/getItemIdUponKeyboardNavigation';
|
|
13
|
-
import { TreeFieldsService as FieldsService } from '@progress/kendo-react-common';
|
|
14
|
-
export { TreeViewItemPropsContext, TreeView, processTreeViewItems, handleTreeViewCheckChange, TreeViewCheckChangeSettings, TreeViewItemClickEvent, TreeViewExpandChangeEvent, TreeViewCheckChangeEvent, TreeViewItemDragOverEvent, TreeViewItemDragStartEvent, TreeViewItemDragEndEvent, TreeViewOperationDescriptor, TreeViewOperationDescriptors, TreeViewCheckDescriptor, TreeViewProps, ItemRenderProps, TreeViewDragClue, moveTreeViewItem, TreeViewDragAnalyzer, getItemIdUponKeyboardNavigation, FieldsService };
|
package/dist/npm/main.js
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.FieldsService = exports.getItemIdUponKeyboardNavigation = exports.TreeViewDragAnalyzer = exports.moveTreeViewItem = exports.TreeViewDragClue = exports.handleTreeViewCheckChange = exports.processTreeViewItems = exports.TreeView = exports.TreeViewItemPropsContext = void 0;
|
|
4
|
-
var TreeView_1 = require("./TreeView");
|
|
5
|
-
Object.defineProperty(exports, "TreeView", { enumerable: true, get: function () { return TreeView_1.TreeView; } });
|
|
6
|
-
var processTreeViewItems_1 = require("./processTreeViewItems");
|
|
7
|
-
Object.defineProperty(exports, "processTreeViewItems", { enumerable: true, get: function () { return processTreeViewItems_1.processTreeViewItems; } });
|
|
8
|
-
var moveTreeViewItem_1 = require("./moveTreeViewItem");
|
|
9
|
-
Object.defineProperty(exports, "moveTreeViewItem", { enumerable: true, get: function () { return moveTreeViewItem_1.moveTreeViewItem; } });
|
|
10
|
-
var handleTreeViewCheckChange_1 = require("./handleTreeViewCheckChange");
|
|
11
|
-
Object.defineProperty(exports, "handleTreeViewCheckChange", { enumerable: true, get: function () { return handleTreeViewCheckChange_1.handleTreeViewCheckChange; } });
|
|
12
|
-
var TreeViewDragClue_1 = require("./TreeViewDragClue");
|
|
13
|
-
Object.defineProperty(exports, "TreeViewDragClue", { enumerable: true, get: function () { return TreeViewDragClue_1.TreeViewDragClue; } });
|
|
14
|
-
var TreeViewDragAnalyzer_1 = require("./TreeViewDragAnalyzer");
|
|
15
|
-
Object.defineProperty(exports, "TreeViewDragAnalyzer", { enumerable: true, get: function () { return TreeViewDragAnalyzer_1.TreeViewDragAnalyzer; } });
|
|
16
|
-
var TreeViewItem_1 = require("./TreeViewItem");
|
|
17
|
-
Object.defineProperty(exports, "TreeViewItemPropsContext", { enumerable: true, get: function () { return TreeViewItem_1.TreeViewItemPropsContext; } });
|
|
18
|
-
var getItemIdUponKeyboardNavigation_1 = require("./utils/getItemIdUponKeyboardNavigation");
|
|
19
|
-
exports.getItemIdUponKeyboardNavigation = getItemIdUponKeyboardNavigation_1.default;
|
|
20
|
-
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
21
|
-
Object.defineProperty(exports, "FieldsService", { enumerable: true, get: function () { return kendo_react_common_1.TreeFieldsService; } });
|
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.moveTreeViewItem = void 0;
|
|
4
|
-
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
5
|
-
var consts_1 = require("./utils/consts");
|
|
6
|
-
/**
|
|
7
|
-
* A helper function which moves a TreeView item in an immutable way.
|
|
8
|
-
*
|
|
9
|
-
* @param sourceItemHierarchicalIndex - The hierarchical index of the item that will be moved.
|
|
10
|
-
* @param sourceData - The tree which contains the item that will be moved.
|
|
11
|
-
* @param operation - The specific move operation.
|
|
12
|
-
*
|
|
13
|
-
* The available options are:
|
|
14
|
-
* * `before`—Indicates that the source item will become the previous sibling of the target item.
|
|
15
|
-
* * `after`—Indicates that the source item will become the next sibling of the target item.
|
|
16
|
-
* * `child`—Indicates that the source item will become a child of the target item.
|
|
17
|
-
* @param targetItemHierarchicalIndex - The hierarchical index of the item next to which the source item will be moved.
|
|
18
|
-
* @param targetData - The tree which contains the target item.
|
|
19
|
-
* If the argument is skipped, then the move operation will be executed within the same tree.
|
|
20
|
-
* Setting the `sourceData` and `targetData` arguments to the same tree is also supported.
|
|
21
|
-
* @param childrenField - The field that points to the dataItem sub items. Defaults to `items`.
|
|
22
|
-
* @returns - The updated copies of the `sourceData` and `targetData` input arguments.
|
|
23
|
-
* If `targetData` is not passed, then only the updated copy of the `sourceData` will be returned.
|
|
24
|
-
*
|
|
25
|
-
* @example
|
|
26
|
-
* ```jsx
|
|
27
|
-
* class App extends React.Component {
|
|
28
|
-
* dragClue;
|
|
29
|
-
* state = { tree };
|
|
30
|
-
*
|
|
31
|
-
* render() {
|
|
32
|
-
* return (
|
|
33
|
-
* <div>
|
|
34
|
-
* <TreeView data={this.state.tree} draggable={true}
|
|
35
|
-
* onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
|
|
36
|
-
* <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
|
|
37
|
-
* </div>
|
|
38
|
-
* );
|
|
39
|
-
* }
|
|
40
|
-
*
|
|
41
|
-
* onItemDragOver = (event) => {
|
|
42
|
-
* this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
|
|
43
|
-
* }
|
|
44
|
-
* onItemDragEnd = (event) => {
|
|
45
|
-
* this.dragClue.hide();
|
|
46
|
-
* const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
|
|
47
|
-
*
|
|
48
|
-
* if (eventAnalyzer.isDropAllowed) {
|
|
49
|
-
* const updatedTree = moveTreeViewItem(
|
|
50
|
-
* event.itemHierarchicalIndex,
|
|
51
|
-
* this.state.tree,
|
|
52
|
-
* eventAnalyzer.getDropOperation(),
|
|
53
|
-
* eventAnalyzer.destinationMeta.itemHierarchicalIndex,
|
|
54
|
-
* );
|
|
55
|
-
*
|
|
56
|
-
* this.setState({ tree: updatedTree });
|
|
57
|
-
* }
|
|
58
|
-
* }
|
|
59
|
-
* getClueClassName(event) {
|
|
60
|
-
* const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
|
|
61
|
-
* const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
|
|
62
|
-
*
|
|
63
|
-
* if (eventAnalyzer.isDropAllowed) {
|
|
64
|
-
* switch (eventAnalyzer.getDropOperation()) {
|
|
65
|
-
* case 'child':
|
|
66
|
-
* return 'k-i-plus';
|
|
67
|
-
* case 'before':
|
|
68
|
-
* return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
|
|
69
|
-
* 'k-i-insert-up' : 'k-i-insert-middle';
|
|
70
|
-
* case 'after':
|
|
71
|
-
* const siblings = getSiblings(itemIndex, this.state.tree);
|
|
72
|
-
* const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
|
|
73
|
-
*
|
|
74
|
-
* return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
|
|
75
|
-
* default:
|
|
76
|
-
* break;
|
|
77
|
-
* }
|
|
78
|
-
* }
|
|
79
|
-
*
|
|
80
|
-
* return 'k-i-cancel';
|
|
81
|
-
* }
|
|
82
|
-
* }
|
|
83
|
-
*
|
|
84
|
-
* function getSiblings(itemIndex, data) {
|
|
85
|
-
* let result = data;
|
|
86
|
-
*
|
|
87
|
-
* const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
|
|
88
|
-
* for (let i = 0; i < indices.length - 1; i++) {
|
|
89
|
-
* result = result[indices[i]].items;
|
|
90
|
-
* }
|
|
91
|
-
*
|
|
92
|
-
* return result;
|
|
93
|
-
* }
|
|
94
|
-
*
|
|
95
|
-
* const SEPARATOR = '_';
|
|
96
|
-
* const tree = [{
|
|
97
|
-
* text: 'Furniture', expanded: true, items: [
|
|
98
|
-
* { text: 'Tables & Chairs', expanded: true },
|
|
99
|
-
* { text: 'Sofas', expanded: true },
|
|
100
|
-
* { text: 'Occasional Furniture', expanded: true }]
|
|
101
|
-
* }, {
|
|
102
|
-
* text: 'Decor', expanded: true, items: [
|
|
103
|
-
* { text: 'Bed Linen', expanded: true },
|
|
104
|
-
* { text: 'Curtains & Blinds', expanded: true },
|
|
105
|
-
* { text: 'Carpets', expanded: true }]
|
|
106
|
-
* }];
|
|
107
|
-
*
|
|
108
|
-
* ReactDOM.render(<App />, document.querySelector('my-app'));
|
|
109
|
-
* ```
|
|
110
|
-
*/
|
|
111
|
-
function moveTreeViewItem(sourceItemHierarchicalIndex, sourceData, operation, targetItemHierarchicalIndex, targetData, childrenField) {
|
|
112
|
-
var subItemsField = childrenField || consts_1.CHILDREN_FIELD;
|
|
113
|
-
if (!validateInput()) {
|
|
114
|
-
return prepareInputDataForReturn();
|
|
115
|
-
}
|
|
116
|
-
var sourceItem = kendo_react_common_1.treeIdUtils.getItemById(sourceItemHierarchicalIndex, sourceData, subItemsField);
|
|
117
|
-
if (!sourceItem) {
|
|
118
|
-
return prepareInputDataForReturn();
|
|
119
|
-
}
|
|
120
|
-
// The source and the target tree are the same.
|
|
121
|
-
if (!targetData || targetData === sourceData) {
|
|
122
|
-
if (!validateNoCircularReference()) {
|
|
123
|
-
return prepareInputDataForReturn();
|
|
124
|
-
}
|
|
125
|
-
var updatedSourceData = (0, kendo_react_common_1.removeItem)(sourceItemHierarchicalIndex, subItemsField, sourceData);
|
|
126
|
-
var resultData = (0, kendo_react_common_1.addItem)(sourceItem, operation, subItemsField, kendo_react_common_1.treeIdUtils.getDecrementedItemIdAfterRemoval(sourceItemHierarchicalIndex, targetItemHierarchicalIndex), updatedSourceData);
|
|
127
|
-
// A simpler output is explicitly returned when the source and the target tree are
|
|
128
|
-
// the same, that is, the targetData argument is skipped.
|
|
129
|
-
return targetData ? { sourceData: resultData, targetData: resultData } : resultData;
|
|
130
|
-
}
|
|
131
|
-
else {
|
|
132
|
-
var updatedSource = (0, kendo_react_common_1.removeItem)(sourceItemHierarchicalIndex, subItemsField, sourceData);
|
|
133
|
-
var updatedTarget = (0, kendo_react_common_1.addItem)(sourceItem, operation, subItemsField, targetItemHierarchicalIndex, targetData);
|
|
134
|
-
return { sourceData: updatedSource, targetData: updatedTarget };
|
|
135
|
-
}
|
|
136
|
-
function prepareInputDataForReturn() {
|
|
137
|
-
return targetData ? { sourceData: sourceData, targetData: targetData } : sourceData;
|
|
138
|
-
}
|
|
139
|
-
function validateNoCircularReference() {
|
|
140
|
-
return !"".concat(targetItemHierarchicalIndex, "_").startsWith("".concat(sourceItemHierarchicalIndex, "_"));
|
|
141
|
-
}
|
|
142
|
-
function validateInput() {
|
|
143
|
-
if (!sourceData || !sourceData.length ||
|
|
144
|
-
!sourceItemHierarchicalIndex || !targetItemHierarchicalIndex) {
|
|
145
|
-
return false;
|
|
146
|
-
}
|
|
147
|
-
if (targetData && !targetData.length) {
|
|
148
|
-
// Dropping over an empty tree is not supported.
|
|
149
|
-
return false;
|
|
150
|
-
}
|
|
151
|
-
// Validate that the target item exists.
|
|
152
|
-
var data = !targetData || targetData === sourceData ? sourceData : targetData;
|
|
153
|
-
if (!kendo_react_common_1.treeIdUtils.getItemById(targetItemHierarchicalIndex, data, subItemsField)) {
|
|
154
|
-
return false;
|
|
155
|
-
}
|
|
156
|
-
return true;
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
exports.moveTreeViewItem = moveTreeViewItem;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.packageMetadata = void 0;
|
|
4
|
-
/**
|
|
5
|
-
* @hidden
|
|
6
|
-
*/
|
|
7
|
-
exports.packageMetadata = {
|
|
8
|
-
name: '@progress/kendo-react-treeview',
|
|
9
|
-
productName: 'KendoReact',
|
|
10
|
-
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate: 1700064084,
|
|
12
|
-
version: '',
|
|
13
|
-
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
|
|
14
|
-
};
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { TreeViewOperationDescriptors } from './TreeViewOperationDescriptors';
|
|
2
|
-
/**
|
|
3
|
-
* A helper function which applies the specified operation descriptors to the data.
|
|
4
|
-
* * [Expanding and collapsing items]({% slug expansion_ways_treeview %}#toc-using-a-helper-function)
|
|
5
|
-
* * [Selecting and deselecting items]({% slug selection_ways_treeview %}#toc-using-a-helper-function)
|
|
6
|
-
* * [Checking and unchecking items]({% slug check_helper_funcs_treeview %})
|
|
7
|
-
*
|
|
8
|
-
* @param data - The data that will be processed.
|
|
9
|
-
* @param operations - The operation descriptors that will be applied to the data.
|
|
10
|
-
* @returns - The processed copy of the input data.
|
|
11
|
-
*
|
|
12
|
-
* @example
|
|
13
|
-
* ```jsx
|
|
14
|
-
* class App extends React.Component {
|
|
15
|
-
* state = { items: tree, expand: [], select: [], check: [] };
|
|
16
|
-
* render() {
|
|
17
|
-
* const { expand, select, check } = this.state;
|
|
18
|
-
* return (
|
|
19
|
-
* <TreeView
|
|
20
|
-
* data={processTreeViewItems(this.state.items, { expand, select, check })}
|
|
21
|
-
* expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
|
|
22
|
-
* onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
|
|
23
|
-
* onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
|
|
24
|
-
* />
|
|
25
|
-
* );
|
|
26
|
-
* }
|
|
27
|
-
* onExpandChange = (event) => {
|
|
28
|
-
* let expand = this.state.expand.slice();
|
|
29
|
-
* const index = expand.indexOf(event.itemHierarchicalIndex);
|
|
30
|
-
* index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
|
|
31
|
-
* this.setState({ expand });
|
|
32
|
-
* }
|
|
33
|
-
* }
|
|
34
|
-
*
|
|
35
|
-
* const tree = [{
|
|
36
|
-
* text: 'Item1',
|
|
37
|
-
* items: [
|
|
38
|
-
* { text: 'Item1.1' },
|
|
39
|
-
* { text: 'Item1.2' },
|
|
40
|
-
* { text: 'Item1.3', items: [{ text: 'Item1.3.1' }] }]
|
|
41
|
-
* }, {
|
|
42
|
-
* text: 'Item2', disabled: true,
|
|
43
|
-
* items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
|
|
44
|
-
* }, {
|
|
45
|
-
* text: 'Item3'
|
|
46
|
-
* }];
|
|
47
|
-
*
|
|
48
|
-
* ReactDOM.render(<App />, document.querySelector('my-app'));
|
|
49
|
-
* ```
|
|
50
|
-
*/
|
|
51
|
-
export declare function processTreeViewItems(data: any[] | null | undefined, operations: TreeViewOperationDescriptors): any[];
|