@progress/kendo-vue-treeview 3.3.4 → 3.3.6-dev.202206170937
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/cdn/js/kendo-vue-treeview.js +1 -1
- package/dist/es/TreeView.d.ts +70 -0
- package/dist/es/TreeView.js +72 -1
- package/dist/es/TreeViewDragAnalyzer.d.ts +15 -2
- package/dist/es/TreeViewDragAnalyzer.js +14 -2
- package/dist/es/TreeViewDragClue.d.ts +33 -90
- package/dist/es/TreeViewDragClue.js +34 -1
- package/dist/es/TreeViewItem.d.ts +6 -0
- package/dist/es/TreeViewItem.js +8 -1
- package/dist/es/TreeViewProps.d.ts +1 -1
- package/dist/es/additionalTypes.ts +11 -0
- package/dist/es/handleTreeViewCheckChange.d.ts +22 -40
- package/dist/es/handleTreeViewCheckChange.js +22 -40
- package/dist/es/main.d.ts +3 -3
- package/dist/es/main.js +3 -3
- package/dist/es/moveTreeViewItem.d.ts +31 -94
- package/dist/es/moveTreeViewItem.js +32 -95
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/processTreeViewItems.d.ts +16 -43
- package/dist/es/processTreeViewItems.js +17 -44
- package/dist/es/utils/SortedPublicItemIds.js +0 -2
- package/dist/npm/TreeView.d.ts +70 -0
- package/dist/npm/TreeView.js +72 -1
- package/dist/npm/TreeViewDragAnalyzer.d.ts +15 -2
- package/dist/npm/TreeViewDragAnalyzer.js +15 -2
- package/dist/npm/TreeViewDragClue.d.ts +33 -90
- package/dist/npm/TreeViewDragClue.js +34 -1
- package/dist/npm/TreeViewItem.d.ts +6 -0
- package/dist/npm/TreeViewItem.js +8 -1
- package/dist/npm/TreeViewProps.d.ts +1 -1
- package/dist/npm/additionalTypes.ts +11 -0
- package/dist/npm/handleTreeViewCheckChange.d.ts +22 -40
- package/dist/npm/handleTreeViewCheckChange.js +22 -40
- package/dist/npm/main.d.ts +3 -3
- package/dist/npm/main.js +3 -3
- package/dist/npm/moveTreeViewItem.d.ts +31 -94
- package/dist/npm/moveTreeViewItem.js +30 -96
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/processTreeViewItems.d.ts +16 -43
- package/dist/npm/processTreeViewItems.js +18 -45
- package/dist/npm/utils/SortedPublicItemIds.js +0 -2
- package/package.json +6 -6
|
@@ -5,99 +5,10 @@ declare type DefaultMethods<V> = {
|
|
|
5
5
|
[key: string]: (this: V, ...args: any[]) => any;
|
|
6
6
|
};
|
|
7
7
|
/**
|
|
8
|
-
* Represents the props of the
|
|
8
|
+
* Represents the props of the Kendo UI for Vue TreeViewDragClue component.
|
|
9
9
|
*/
|
|
10
10
|
export interface TreeViewDragClueProps {
|
|
11
11
|
}
|
|
12
|
-
/**
|
|
13
|
-
* Represents the KendoReact TreeViewDragClue component which renders a clue when an item is dragged.
|
|
14
|
-
*
|
|
15
|
-
* @example
|
|
16
|
-
* ```jsx
|
|
17
|
-
* class App extends React.Component {
|
|
18
|
-
* dragClue;
|
|
19
|
-
* state = { tree };
|
|
20
|
-
*
|
|
21
|
-
* render() {
|
|
22
|
-
* return (
|
|
23
|
-
* <div>
|
|
24
|
-
* <TreeView data={this.state.tree} draggable={true}
|
|
25
|
-
* onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
|
|
26
|
-
* <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
|
|
27
|
-
* </div>
|
|
28
|
-
* );
|
|
29
|
-
* }
|
|
30
|
-
*
|
|
31
|
-
* onItemDragOver = (event) => {
|
|
32
|
-
* this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
|
|
33
|
-
* }
|
|
34
|
-
* onItemDragEnd = (event) => {
|
|
35
|
-
* this.dragClue.hide();
|
|
36
|
-
* const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
|
|
37
|
-
*
|
|
38
|
-
* if (eventAnalyzer.isDropAllowed) {
|
|
39
|
-
* const updatedTree = moveTreeViewItem(
|
|
40
|
-
* event.itemHierarchicalIndex,
|
|
41
|
-
* this.state.tree,
|
|
42
|
-
* eventAnalyzer.getDropOperation(),
|
|
43
|
-
* eventAnalyzer.destinationMeta.itemHierarchicalIndex,
|
|
44
|
-
* );
|
|
45
|
-
*
|
|
46
|
-
* this.setState({ tree: updatedTree });
|
|
47
|
-
* }
|
|
48
|
-
* }
|
|
49
|
-
* getClueClassName(event) {
|
|
50
|
-
* const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
|
|
51
|
-
* const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
|
|
52
|
-
*
|
|
53
|
-
* if (eventAnalyzer.isDropAllowed) {
|
|
54
|
-
* switch (eventAnalyzer.getDropOperation()) {
|
|
55
|
-
* case 'child':
|
|
56
|
-
* return 'k-i-plus';
|
|
57
|
-
* case 'before':
|
|
58
|
-
* return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
|
|
59
|
-
* 'k-i-insert-up' : 'k-i-insert-middle';
|
|
60
|
-
* case 'after':
|
|
61
|
-
* const siblings = getSiblings(itemIndex, this.state.tree);
|
|
62
|
-
* const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
|
|
63
|
-
*
|
|
64
|
-
* return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
|
|
65
|
-
* default:
|
|
66
|
-
* break;
|
|
67
|
-
* }
|
|
68
|
-
* }
|
|
69
|
-
*
|
|
70
|
-
* return 'k-i-cancel';
|
|
71
|
-
* }
|
|
72
|
-
* }
|
|
73
|
-
*
|
|
74
|
-
* function getSiblings(itemIndex, data) {
|
|
75
|
-
* let result = data;
|
|
76
|
-
*
|
|
77
|
-
* const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
|
|
78
|
-
* for (let i = 0; i < indices.length - 1; i++) {
|
|
79
|
-
* result = result[indices[i]].items;
|
|
80
|
-
* }
|
|
81
|
-
*
|
|
82
|
-
* return result;
|
|
83
|
-
* }
|
|
84
|
-
*
|
|
85
|
-
* const SEPARATOR = '_';
|
|
86
|
-
* const tree = [{
|
|
87
|
-
* text: 'Furniture', expanded: true, items: [
|
|
88
|
-
* { text: 'Tables & Chairs', expanded: true },
|
|
89
|
-
* { text: 'Sofas', expanded: true },
|
|
90
|
-
* { text: 'Occasional Furniture', expanded: true }]
|
|
91
|
-
* }, {
|
|
92
|
-
* text: 'Decor', expanded: true, items: [
|
|
93
|
-
* { text: 'Bed Linen', expanded: true },
|
|
94
|
-
* { text: 'Curtains & Blinds', expanded: true },
|
|
95
|
-
* { text: 'Carpets', expanded: true }]
|
|
96
|
-
* }];
|
|
97
|
-
*
|
|
98
|
-
* ReactDOM.render(<App />, document.querySelector('my-app'));
|
|
99
|
-
* ```
|
|
100
|
-
*/
|
|
101
12
|
/**
|
|
102
13
|
* @hidden
|
|
103
14
|
*/
|
|
@@ -130,6 +41,38 @@ export interface TreeViewDragClueData {
|
|
|
130
41
|
*/
|
|
131
42
|
export interface TreeViewDragClueAll extends Vue, TreeViewDragClueMethods, TreeViewDragClueData, TreeViewDragClueComputed, TreeViewDragClueState {
|
|
132
43
|
}
|
|
44
|
+
/**
|
|
45
|
+
* @hidden
|
|
46
|
+
*/
|
|
133
47
|
declare let TreeViewDragClueVue2: ComponentOptions<TreeViewDragClueAll, DefaultData<TreeViewDragClueData>, DefaultMethods<TreeViewDragClueAll>, TreeViewDragClueComputed, RecordPropsDefinition<TreeViewDragClueProps>>;
|
|
48
|
+
/**
|
|
49
|
+
* Represents the Kendo UI for Vue Native TreeViewDragClue component which renders a clue when an item is dragged.
|
|
50
|
+
*
|
|
51
|
+
* {% meta height:400 %}
|
|
52
|
+
* {% embed_file drag/single/main.vue preview %}
|
|
53
|
+
* {% embed_file drag/single/main.js %}
|
|
54
|
+
* {% endmeta %}
|
|
55
|
+
*
|
|
56
|
+
* ## Methods
|
|
57
|
+
*
|
|
58
|
+
* ### hide
|
|
59
|
+
* Hides the TreeViewDragClue component.
|
|
60
|
+
*
|
|
61
|
+
* ### show
|
|
62
|
+
* Displays the TreeViewDragClue component.
|
|
63
|
+
*
|
|
64
|
+
* #### Parameters
|
|
65
|
+
* ##### top <span class='code'>number</span>
|
|
66
|
+
* The `top` CSS position of the component.
|
|
67
|
+
*
|
|
68
|
+
* ##### left <span class='code'>number</span>
|
|
69
|
+
* The `left` CSS position of the component.
|
|
70
|
+
*
|
|
71
|
+
* ##### text <span class='code'>string</span>
|
|
72
|
+
* The text of the component.
|
|
73
|
+
*
|
|
74
|
+
* ##### operationClassName <span class='code'>string</span>
|
|
75
|
+
* The CSS class name which is related to the specific drop operation.
|
|
76
|
+
*/
|
|
134
77
|
declare const TreeViewDragClue: DefineComponent<TreeViewDragClueProps, any, TreeViewDragClueData, TreeViewDragClueComputed, TreeViewDragClueMethods, {}, {}, {}, string, TreeViewDragClueProps, TreeViewDragClueProps, {}>;
|
|
135
78
|
export { TreeViewDragClue, TreeViewDragClueVue2 };
|
|
@@ -18,7 +18,10 @@ var __assign = this && this.__assign || function () {
|
|
|
18
18
|
import * as Vue from 'vue';
|
|
19
19
|
var allVue = Vue;
|
|
20
20
|
var gh = allVue.h;
|
|
21
|
-
import { classNames } from '@progress/kendo-vue-common';
|
|
21
|
+
import { classNames } from '@progress/kendo-vue-common';
|
|
22
|
+
/**
|
|
23
|
+
* @hidden
|
|
24
|
+
*/
|
|
22
25
|
|
|
23
26
|
var TreeViewDragClueVue2 = {
|
|
24
27
|
name: 'KendoTreeViewDragClue',
|
|
@@ -74,5 +77,35 @@ var TreeViewDragClueVue2 = {
|
|
|
74
77
|
}
|
|
75
78
|
}
|
|
76
79
|
};
|
|
80
|
+
/**
|
|
81
|
+
* Represents the Kendo UI for Vue Native TreeViewDragClue component which renders a clue when an item is dragged.
|
|
82
|
+
*
|
|
83
|
+
* {% meta height:400 %}
|
|
84
|
+
* {% embed_file drag/single/main.vue preview %}
|
|
85
|
+
* {% embed_file drag/single/main.js %}
|
|
86
|
+
* {% endmeta %}
|
|
87
|
+
*
|
|
88
|
+
* ## Methods
|
|
89
|
+
*
|
|
90
|
+
* ### hide
|
|
91
|
+
* Hides the TreeViewDragClue component.
|
|
92
|
+
*
|
|
93
|
+
* ### show
|
|
94
|
+
* Displays the TreeViewDragClue component.
|
|
95
|
+
*
|
|
96
|
+
* #### Parameters
|
|
97
|
+
* ##### top <span class='code'>number</span>
|
|
98
|
+
* The `top` CSS position of the component.
|
|
99
|
+
*
|
|
100
|
+
* ##### left <span class='code'>number</span>
|
|
101
|
+
* The `left` CSS position of the component.
|
|
102
|
+
*
|
|
103
|
+
* ##### text <span class='code'>string</span>
|
|
104
|
+
* The text of the component.
|
|
105
|
+
*
|
|
106
|
+
* ##### operationClassName <span class='code'>string</span>
|
|
107
|
+
* The CSS class name which is related to the specific drop operation.
|
|
108
|
+
*/
|
|
109
|
+
|
|
77
110
|
var TreeViewDragClue = TreeViewDragClueVue2;
|
|
78
111
|
export { TreeViewDragClue, TreeViewDragClueVue2 };
|
|
@@ -64,6 +64,12 @@ export interface TreeViewItemData {
|
|
|
64
64
|
*/
|
|
65
65
|
export interface TreeViewItemAll extends Vue, TreeViewItemMethods, TreeViewItemData, TreeViewItemComputed, TreeViewItemState {
|
|
66
66
|
}
|
|
67
|
+
/**
|
|
68
|
+
* @hidden
|
|
69
|
+
*/
|
|
67
70
|
declare let TreeViewItemVue2: ComponentOptions<TreeViewItemAll, DefaultData<TreeViewItemData>, DefaultMethods<TreeViewItemAll>, TreeViewItemComputed, RecordPropsDefinition<TreeViewItemProps>>;
|
|
71
|
+
/**
|
|
72
|
+
* @hidden
|
|
73
|
+
*/
|
|
68
74
|
declare const TreeViewItem: DefineComponent<TreeViewItemProps, any, TreeViewItemData, TreeViewItemComputed, TreeViewItemMethods, {}, {}, {}, string, TreeViewItemProps, TreeViewItemProps, {}>;
|
|
69
75
|
export { TreeViewItem, TreeViewItemVue2 };
|
package/dist/es/TreeViewItem.js
CHANGED
|
@@ -23,7 +23,10 @@ import { createId } from './utils/itemIdUtils';
|
|
|
23
23
|
import { isItemExpandedAndWithChildren, hasChildren } from './utils/itemUtils';
|
|
24
24
|
import { Reveal } from '@progress/kendo-vue-animation';
|
|
25
25
|
import { DOM_KENDO_ITEM_ID_FIELD, DOM_KENDO_TREEVIEW_GUID_FIELD } from './utils/consts';
|
|
26
|
-
var sizeMap = kendoThemeMaps.sizeMap;
|
|
26
|
+
var sizeMap = kendoThemeMaps.sizeMap;
|
|
27
|
+
/**
|
|
28
|
+
* @hidden
|
|
29
|
+
*/
|
|
27
30
|
|
|
28
31
|
var TreeViewItemVue2 = {
|
|
29
32
|
name: 'KendoTreeViewItem',
|
|
@@ -392,5 +395,9 @@ var TreeViewItemVue2 = {
|
|
|
392
395
|
}
|
|
393
396
|
}
|
|
394
397
|
};
|
|
398
|
+
/**
|
|
399
|
+
* @hidden
|
|
400
|
+
*/
|
|
401
|
+
|
|
395
402
|
var TreeViewItem = TreeViewItemVue2;
|
|
396
403
|
export { TreeViewItem, TreeViewItemVue2 };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as events from './events';
|
|
2
2
|
/**
|
|
3
|
-
* Represents the props of the [
|
|
3
|
+
* Represents the props of the [Kendo UI for Vue TreeView component]({% slug overview_treeview %}).
|
|
4
4
|
*/
|
|
5
5
|
export interface TreeViewProps {
|
|
6
6
|
/**
|
|
@@ -2,9 +2,20 @@
|
|
|
2
2
|
import { DefineComponent } from 'vue';
|
|
3
3
|
// @ts-ignore
|
|
4
4
|
import * as Vue from 'vue';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @hidden
|
|
8
|
+
*/
|
|
5
9
|
// @ts-ignore
|
|
6
10
|
type Vue2type = Vue.default;
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* @hidden
|
|
14
|
+
*/
|
|
7
15
|
// @ts-ignore
|
|
8
16
|
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
17
|
+
/**
|
|
18
|
+
* @hidden
|
|
19
|
+
*/
|
|
9
20
|
// @ts-ignore
|
|
10
21
|
export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };
|
|
@@ -18,50 +18,32 @@ export interface TreeViewCheckChangeSettings {
|
|
|
18
18
|
checkParents?: boolean;
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
21
|
+
*
|
|
21
22
|
* A helper function which updates the check descriptor.
|
|
22
23
|
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
24
|
+
* {% meta height:650 %}
|
|
25
|
+
* {% embed_file checkbox/checkbox-helper/main.vue preview %}
|
|
26
|
+
* {% embed_file checkbox/checkbox-helper/main.js %}
|
|
27
|
+
* {% endmeta %}
|
|
28
|
+
*
|
|
29
|
+
* #### Parameters
|
|
30
|
+
* ##### event <span class='code'>[TreeViewExpandChangeEvent]({% slug api_treeview_treeviewexpandchangeevent %})</span>
|
|
31
|
+
* The event that triggered the change.
|
|
32
|
+
*
|
|
33
|
+
* ##### check <span class='code'>string[] | [TreeViewCheckDescriptor]({% slug api_treeview_treeviewcheckdescriptor %})</span>
|
|
34
|
+
* The check descriptor that will be updated.
|
|
35
|
+
*
|
|
36
|
+
* ##### data? <span class='code'>any[] | null</span>
|
|
37
|
+
* The TreeView items.
|
|
30
38
|
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* class App extends React.Component {
|
|
34
|
-
* state = { check: [], items: tree };
|
|
35
|
-
* render() {
|
|
36
|
-
* return (
|
|
37
|
-
* <div>
|
|
38
|
-
* <TreeView
|
|
39
|
-
* checkboxes={true} onCheckChange={this.onCheckChange}
|
|
40
|
-
* data={processTreeViewItems(this.state.items, { check: this.state.check })}
|
|
41
|
-
* />
|
|
42
|
-
* <div style={{ marginTop: 5 }}>
|
|
43
|
-
* <i>Press SPACE to check/uncheck the active item</i>
|
|
44
|
-
* <div className="example-config">
|
|
45
|
-
* Checked Indices: {this.state.check.join(",")}
|
|
46
|
-
* </div>
|
|
47
|
-
* </div>
|
|
48
|
-
* </div>
|
|
49
|
-
* );
|
|
50
|
-
* }
|
|
51
|
-
* onCheckChange = (event) => {
|
|
52
|
-
* this.setState({ check: handleTreeViewCheckChange(event, this.state.check, this.state.items) });
|
|
53
|
-
* }
|
|
54
|
-
* }
|
|
39
|
+
* ##### settings <span class='code'>[TreeViewCheckChangeSettings]({% slug api_treeview_treeviewcheckchangesettings %})</span>
|
|
40
|
+
* The additional settings that configure the update of the check descriptor.
|
|
55
41
|
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
*
|
|
59
|
-
* }, {
|
|
60
|
-
* text: 'Decor', expanded: true, items: [
|
|
61
|
-
* { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' } ]
|
|
62
|
-
* } ];
|
|
42
|
+
* ##### childrenField? <span class='code'>string</span>
|
|
43
|
+
* The field that points to the dataItem sub items. Defaults to `items`.
|
|
44
|
+
* The default behavior allows the selection of multiple items.
|
|
63
45
|
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
46
|
+
* #### Returns
|
|
47
|
+
* <span class='code'>any</span> - The updated copy of the input check descriptor.
|
|
66
48
|
*/
|
|
67
49
|
export declare function handleTreeViewCheckChange(event: TreeViewExpandChangeEvent, check: string[] | TreeViewCheckDescriptor, data?: any[] | null, settings?: TreeViewCheckChangeSettings, childrenField?: string): any;
|
|
@@ -30,51 +30,33 @@ import { getDirectParentId, getItemById } from './utils/itemIdUtils';
|
|
|
30
30
|
import { isArray, getNestedValue } from './utils/misc';
|
|
31
31
|
import { CHILDREN_FIELD } from './utils/consts';
|
|
32
32
|
/**
|
|
33
|
+
*
|
|
33
34
|
* A helper function which updates the check descriptor.
|
|
34
35
|
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
36
|
+
* {% meta height:650 %}
|
|
37
|
+
* {% embed_file checkbox/checkbox-helper/main.vue preview %}
|
|
38
|
+
* {% embed_file checkbox/checkbox-helper/main.js %}
|
|
39
|
+
* {% endmeta %}
|
|
40
|
+
*
|
|
41
|
+
* #### Parameters
|
|
42
|
+
* ##### event <span class='code'>[TreeViewExpandChangeEvent]({% slug api_treeview_treeviewexpandchangeevent %})</span>
|
|
43
|
+
* The event that triggered the change.
|
|
44
|
+
*
|
|
45
|
+
* ##### check <span class='code'>string[] | [TreeViewCheckDescriptor]({% slug api_treeview_treeviewcheckdescriptor %})</span>
|
|
46
|
+
* The check descriptor that will be updated.
|
|
47
|
+
*
|
|
48
|
+
* ##### data? <span class='code'>any[] | null</span>
|
|
49
|
+
* The TreeView items.
|
|
42
50
|
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
* class App extends React.Component {
|
|
46
|
-
* state = { check: [], items: tree };
|
|
47
|
-
* render() {
|
|
48
|
-
* return (
|
|
49
|
-
* <div>
|
|
50
|
-
* <TreeView
|
|
51
|
-
* checkboxes={true} onCheckChange={this.onCheckChange}
|
|
52
|
-
* data={processTreeViewItems(this.state.items, { check: this.state.check })}
|
|
53
|
-
* />
|
|
54
|
-
* <div style={{ marginTop: 5 }}>
|
|
55
|
-
* <i>Press SPACE to check/uncheck the active item</i>
|
|
56
|
-
* <div className="example-config">
|
|
57
|
-
* Checked Indices: {this.state.check.join(",")}
|
|
58
|
-
* </div>
|
|
59
|
-
* </div>
|
|
60
|
-
* </div>
|
|
61
|
-
* );
|
|
62
|
-
* }
|
|
63
|
-
* onCheckChange = (event) => {
|
|
64
|
-
* this.setState({ check: handleTreeViewCheckChange(event, this.state.check, this.state.items) });
|
|
65
|
-
* }
|
|
66
|
-
* }
|
|
51
|
+
* ##### settings <span class='code'>[TreeViewCheckChangeSettings]({% slug api_treeview_treeviewcheckchangesettings %})</span>
|
|
52
|
+
* The additional settings that configure the update of the check descriptor.
|
|
67
53
|
*
|
|
68
|
-
*
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
* }, {
|
|
72
|
-
* text: 'Decor', expanded: true, items: [
|
|
73
|
-
* { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' } ]
|
|
74
|
-
* } ];
|
|
54
|
+
* ##### childrenField? <span class='code'>string</span>
|
|
55
|
+
* The field that points to the dataItem sub items. Defaults to `items`.
|
|
56
|
+
* The default behavior allows the selection of multiple items.
|
|
75
57
|
*
|
|
76
|
-
*
|
|
77
|
-
*
|
|
58
|
+
* #### Returns
|
|
59
|
+
* <span class='code'>any</span> - The updated copy of the input check descriptor.
|
|
78
60
|
*/
|
|
79
61
|
export function handleTreeViewCheckChange(event, check, data, settings, childrenField) {
|
|
80
62
|
if (settings === void 0) { settings = {}; }
|
package/dist/es/main.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { TreeView } from './TreeView';
|
|
2
2
|
import { TreeViewItemClickEvent, TreeViewExpandChangeEvent, TreeViewCheckChangeEvent, TreeViewItemDragOverEvent, TreeViewItemDragStartEvent, TreeViewItemDragEndEvent } from './events';
|
|
3
|
-
import processTreeViewItems from './processTreeViewItems';
|
|
4
|
-
import moveTreeViewItem from './moveTreeViewItem';
|
|
3
|
+
import { processTreeViewItems } from './processTreeViewItems';
|
|
4
|
+
import { moveTreeViewItem } from './moveTreeViewItem';
|
|
5
5
|
import { handleTreeViewCheckChange, TreeViewCheckChangeSettings } from './handleTreeViewCheckChange';
|
|
6
6
|
import { TreeViewOperationDescriptor, TreeViewOperationDescriptors, TreeViewCheckDescriptor } from './TreeViewOperationDescriptors';
|
|
7
7
|
import { ItemRenderProps } from './ItemRenderProps';
|
|
8
8
|
import { TreeViewProps } from './TreeViewProps';
|
|
9
9
|
import { TreeViewDragClue } from './TreeViewDragClue';
|
|
10
|
-
import TreeViewDragAnalyzer from './TreeViewDragAnalyzer';
|
|
10
|
+
import { TreeViewDragAnalyzer } from './TreeViewDragAnalyzer';
|
|
11
11
|
import { TreeViewItem } from './TreeViewItem';
|
|
12
12
|
export { TreeViewItem, TreeView, processTreeViewItems, handleTreeViewCheckChange, TreeViewCheckChangeSettings, TreeViewItemClickEvent, TreeViewExpandChangeEvent, TreeViewCheckChangeEvent, TreeViewItemDragOverEvent, TreeViewItemDragStartEvent, TreeViewItemDragEndEvent, TreeViewOperationDescriptor, TreeViewOperationDescriptors, TreeViewCheckDescriptor, TreeViewProps, ItemRenderProps, TreeViewDragClue, moveTreeViewItem, TreeViewDragAnalyzer };
|
package/dist/es/main.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { TreeView } from './TreeView';
|
|
2
|
-
import processTreeViewItems from './processTreeViewItems';
|
|
3
|
-
import moveTreeViewItem from './moveTreeViewItem';
|
|
2
|
+
import { processTreeViewItems } from './processTreeViewItems';
|
|
3
|
+
import { moveTreeViewItem } from './moveTreeViewItem';
|
|
4
4
|
import { handleTreeViewCheckChange } from './handleTreeViewCheckChange';
|
|
5
5
|
import { TreeViewDragClue } from './TreeViewDragClue';
|
|
6
|
-
import TreeViewDragAnalyzer from './TreeViewDragAnalyzer';
|
|
6
|
+
import { TreeViewDragAnalyzer } from './TreeViewDragAnalyzer';
|
|
7
7
|
import { TreeViewItem } from './TreeViewItem';
|
|
8
8
|
export { TreeViewItem, TreeView, processTreeViewItems, handleTreeViewCheckChange, TreeViewDragClue, moveTreeViewItem, TreeViewDragAnalyzer };
|
|
@@ -1,109 +1,46 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* A helper function which moves a TreeView item in an immutable way.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
4
|
+
* {% meta height:400 %}
|
|
5
|
+
* {% embed_file drag/single/main.vue preview %}
|
|
6
|
+
* {% embed_file drag/single/main.js %}
|
|
7
|
+
* {% endmeta %}
|
|
7
8
|
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* * `child`—Indicates that the source item will become a child of the target item.
|
|
12
|
-
* @param targetItemHierarchicalIndex - The hierarchical index of the item next to which the source item will be moved.
|
|
13
|
-
* @param targetData - The tree which contains the target item.
|
|
14
|
-
* If the argument is skipped, then the move operation will be executed within the same tree.
|
|
15
|
-
* Setting the `sourceData` and `targetData` arguments to the same tree is also supported.
|
|
16
|
-
* @param childrenField - The field that points to the dataItem sub items. Defaults to `items`.
|
|
17
|
-
* @returns - The updated copies of the `sourceData` and `targetData` input arguments.
|
|
18
|
-
* If `targetData` is not passed, then only the updated copy of the `sourceData` will be returned.
|
|
9
|
+
* #### Parameters
|
|
10
|
+
* ##### sourceItemHierarchicalIndex <span class='code'>string</span>
|
|
11
|
+
* The hierarchical index of the item that will be moved.
|
|
19
12
|
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
* class App extends React.Component {
|
|
23
|
-
* dragClue;
|
|
24
|
-
* state = { tree };
|
|
13
|
+
* ##### sourceData <span class='code'>any[] | null | undefined</span>
|
|
14
|
+
* The tree which contains the item that will be moved.
|
|
25
15
|
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
* <div>
|
|
29
|
-
* <TreeView data={this.state.tree} draggable={true}
|
|
30
|
-
* onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
|
|
31
|
-
* <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
|
|
32
|
-
* </div>
|
|
33
|
-
* );
|
|
34
|
-
* }
|
|
16
|
+
* ##### operation <span class='code'>"before" | "after" | "child"</span>
|
|
17
|
+
* The specific move operation.
|
|
35
18
|
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
* this.dragClue.hide();
|
|
41
|
-
* const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
|
|
19
|
+
* The available options are:
|
|
20
|
+
* * `before`—Indicates that the source item will become the previous sibling of the target item.
|
|
21
|
+
* * `after`—Indicates that the source item will become the next sibling of the target item.
|
|
22
|
+
* * `child`—Indicates that the source item will become a child of the target item.
|
|
42
23
|
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
* event.itemHierarchicalIndex,
|
|
46
|
-
* this.state.tree,
|
|
47
|
-
* eventAnalyzer.getDropOperation(),
|
|
48
|
-
* eventAnalyzer.destinationMeta.itemHierarchicalIndex,
|
|
49
|
-
* );
|
|
24
|
+
* ##### targetItemHierarchicalIndex <span class='code'>string</span>
|
|
25
|
+
* The hierarchical index of the item next to which the source item will be moved.
|
|
50
26
|
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
* const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
|
|
56
|
-
* const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
|
|
27
|
+
* ##### targetData? <span class='code'>any[] | null</span>
|
|
28
|
+
* The tree which contains the target item.
|
|
29
|
+
* If the argument is skipped, then the move operation will be executed within the same tree.
|
|
30
|
+
* Setting the `sourceData` and `targetData` arguments to the same tree is also supported.
|
|
57
31
|
*
|
|
58
|
-
*
|
|
59
|
-
*
|
|
60
|
-
* case 'child':
|
|
61
|
-
* return 'k-i-plus';
|
|
62
|
-
* case 'before':
|
|
63
|
-
* return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
|
|
64
|
-
* 'k-i-insert-up' : 'k-i-insert-middle';
|
|
65
|
-
* case 'after':
|
|
66
|
-
* const siblings = getSiblings(itemIndex, this.state.tree);
|
|
67
|
-
* const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
|
|
32
|
+
* ##### childrenField? <span class='code'>string</span>
|
|
33
|
+
* The field that points to the dataItem sub items. Defaults to `items`.
|
|
68
34
|
*
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
*
|
|
72
|
-
* }
|
|
73
|
-
* }
|
|
74
|
-
*
|
|
75
|
-
* return 'k-i-cancel';
|
|
76
|
-
* }
|
|
77
|
-
* }
|
|
78
|
-
*
|
|
79
|
-
* function getSiblings(itemIndex, data) {
|
|
80
|
-
* let result = data;
|
|
81
|
-
*
|
|
82
|
-
* const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
|
|
83
|
-
* for (let i = 0; i < indices.length - 1; i++) {
|
|
84
|
-
* result = result[indices[i]].items;
|
|
85
|
-
* }
|
|
86
|
-
*
|
|
87
|
-
* return result;
|
|
88
|
-
* }
|
|
89
|
-
*
|
|
90
|
-
* const SEPARATOR = '_';
|
|
91
|
-
* const tree = [{
|
|
92
|
-
* text: 'Furniture', expanded: true, items: [
|
|
93
|
-
* { text: 'Tables & Chairs', expanded: true },
|
|
94
|
-
* { text: 'Sofas', expanded: true },
|
|
95
|
-
* { text: 'Occasional Furniture', expanded: true }]
|
|
96
|
-
* }, {
|
|
97
|
-
* text: 'Decor', expanded: true, items: [
|
|
98
|
-
* { text: 'Bed Linen', expanded: true },
|
|
99
|
-
* { text: 'Curtains & Blinds', expanded: true },
|
|
100
|
-
* { text: 'Carpets', expanded: true }]
|
|
101
|
-
* }];
|
|
102
|
-
*
|
|
103
|
-
* ReactDOM.render(<App />, document.querySelector('my-app'));
|
|
104
|
-
* ```
|
|
35
|
+
* #### Returns
|
|
36
|
+
* <span class='code'>any[] | { sourceData: any[]; targetData: any[]; }</span> - The updated copies of the `sourceData` and `targetData` input arguments.
|
|
37
|
+
* If `targetData` is not passed, then only the updated copy of the `sourceData` will be returned.
|
|
105
38
|
*/
|
|
106
|
-
|
|
39
|
+
declare const moveTreeViewItem: (sourceItemHierarchicalIndex: string, sourceData: any[] | null | undefined, operation: 'before' | 'after' | 'child', targetItemHierarchicalIndex: string, targetData?: any[] | null, childrenField?: string) => any[] | {
|
|
107
40
|
sourceData: any[];
|
|
108
41
|
targetData: any[];
|
|
109
42
|
};
|
|
43
|
+
/**
|
|
44
|
+
* @hidden
|
|
45
|
+
*/
|
|
46
|
+
export { moveTreeViewItem };
|