@progress/kendo-react-treeview 7.2.4-develop.3 → 7.2.4-develop.4

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.
Files changed (40) hide show
  1. package/TreeView.js +8 -0
  2. package/TreeView.mjs +256 -0
  3. package/TreeViewDragAnalyzer.js +8 -0
  4. package/TreeViewDragAnalyzer.mjs +66 -0
  5. package/TreeViewDragClue.js +8 -0
  6. package/TreeViewDragClue.mjs +58 -0
  7. package/TreeViewItem.js +8 -0
  8. package/TreeViewItem.mjs +203 -0
  9. package/dist/cdn/js/kendo-react-treeview.js +8 -5
  10. package/handleTreeViewCheckChange.js +8 -0
  11. package/handleTreeViewCheckChange.mjs +63 -0
  12. package/index.d.mts +1141 -5
  13. package/index.d.ts +1141 -20
  14. package/index.js +8 -5
  15. package/index.mjs +29 -752
  16. package/moveTreeViewItem.js +8 -0
  17. package/moveTreeViewItem.mjs +48 -0
  18. package/package-metadata.js +8 -0
  19. package/package-metadata.mjs +19 -0
  20. package/package.json +3 -3
  21. package/processTreeViewItems.js +8 -0
  22. package/processTreeViewItems.mjs +84 -0
  23. package/utils/consts.js +8 -0
  24. package/utils/consts.mjs +21 -0
  25. package/utils/getItemIdUponKeyboardNavigation.js +8 -0
  26. package/utils/getItemIdUponKeyboardNavigation.mjs +57 -0
  27. package/ItemRenderProps.d.ts +0 -17
  28. package/TreeView.d.ts +0 -133
  29. package/TreeViewDragAnalyzer.d.ts +0 -139
  30. package/TreeViewDragClue.d.ts +0 -148
  31. package/TreeViewItem.d.ts +0 -106
  32. package/TreeViewOperationDescriptors.d.ts +0 -80
  33. package/TreeViewProps.d.ts +0 -149
  34. package/events.d.ts +0 -162
  35. package/handleTreeViewCheckChange.d.ts +0 -73
  36. package/moveTreeViewItem.d.ts +0 -113
  37. package/package-metadata.d.ts +0 -9
  38. package/processTreeViewItems.d.ts +0 -55
  39. package/utils/consts.d.ts +0 -44
  40. package/utils/getItemIdUponKeyboardNavigation.d.ts +0 -9
@@ -1,73 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the package root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { TreeViewExpandChangeEvent } from './events';
6
- import { TreeViewCheckDescriptor } from './TreeViewOperationDescriptors';
7
- /**
8
- * The settings that configure the update of the check descriptor.
9
- */
10
- export interface TreeViewCheckChangeSettings {
11
- /**
12
- * Determines a selection of a single node at a time.
13
- */
14
- singleMode?: boolean;
15
- /**
16
- * Determines if the children checkboxes will be selected when the user selects the parent checkbox.
17
- */
18
- checkChildren?: boolean;
19
- /**
20
- * Determines if the parent checkbox will be selected when the user selects all its children checkboxes.
21
- */
22
- checkParents?: boolean;
23
- }
24
- /**
25
- * A helper function which updates the check descriptor.
26
- *
27
- * @param event - The event that triggered the change.
28
- * @param check - The check descriptor that will be updated.
29
- * @param data - The TreeView items.
30
- * @param settings - The additional settings that configure the update of the check descriptor.
31
- * @param childrenField - The field that points to the dataItem sub items. Defaults to `items`.
32
- * The default behavior allows the selection of multiple items.
33
- * @returns - The updated copy of the input check descriptor.
34
- *
35
- * @example
36
- * ```jsx
37
- * class App extends React.Component {
38
- * state = { check: [], items: tree };
39
- * render() {
40
- * return (
41
- * <div>
42
- * <TreeView
43
- * checkboxes={true} onCheckChange={this.onCheckChange}
44
- * data={processTreeViewItems(this.state.items, { check: this.state.check })}
45
- * />
46
- * <div style={{ marginTop: 5 }}>
47
- * <i>Press SPACE to check/uncheck the active item</i>
48
- * <div className="example-config">
49
- * Checked Indices: {this.state.check.join(",")}
50
- * </div>
51
- * </div>
52
- * </div>
53
- * );
54
- * }
55
- * onCheckChange = (event) => {
56
- * this.setState({ check: handleTreeViewCheckChange(event, this.state.check, this.state.items) });
57
- * }
58
- * }
59
- *
60
- * const tree = [ {
61
- * text: 'Furniture', expanded: true, items: [
62
- * { text: 'Tables & Chairs' }, { text: 'Sofas' }, { text: 'Occasional Furniture' } ]
63
- * }, {
64
- * text: 'Decor', expanded: true, items: [
65
- * { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' } ]
66
- * } ];
67
- *
68
- * ReactDOM.render(<App />, document.querySelector('my-app'));
69
- * ```
70
- */
71
- export declare function handleTreeViewCheckChange(event: TreeViewExpandChangeEvent, check: string[] | TreeViewCheckDescriptor, data?: any[] | null, settings?: TreeViewCheckChangeSettings, childrenField?: string): any[] | (TreeViewCheckDescriptor & {
72
- ids: any[];
73
- });
@@ -1,113 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the package root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- /**
6
- * A helper function which moves a TreeView item in an immutable way.
7
- *
8
- * @param sourceItemHierarchicalIndex - The hierarchical index of the item that will be moved.
9
- * @param sourceData - The tree which contains the item that will be moved.
10
- * @param operation - The specific move operation.
11
- *
12
- * The available options are:
13
- * * `before`&mdash;Indicates that the source item will become the previous sibling of the target item.
14
- * * `after`&mdash;Indicates that the source item will become the next sibling of the target item.
15
- * * `child`&mdash;Indicates that the source item will become a child of the target item.
16
- * @param targetItemHierarchicalIndex - The hierarchical index of the item next to which the source item will be moved.
17
- * @param targetData - The tree which contains the target item.
18
- * If the argument is skipped, then the move operation will be executed within the same tree.
19
- * Setting the `sourceData` and `targetData` arguments to the same tree is also supported.
20
- * @param childrenField - The field that points to the dataItem sub items. Defaults to `items`.
21
- * @returns - The updated copies of the `sourceData` and `targetData` input arguments.
22
- * If `targetData` is not passed, then only the updated copy of the `sourceData` will be returned.
23
- *
24
- * @example
25
- * ```jsx
26
- * class App extends React.Component {
27
- * dragClue;
28
- * state = { tree };
29
- *
30
- * render() {
31
- * return (
32
- * <div>
33
- * <TreeView data={this.state.tree} draggable={true}
34
- * onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
35
- * <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
36
- * </div>
37
- * );
38
- * }
39
- *
40
- * onItemDragOver = (event) => {
41
- * this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
42
- * }
43
- * onItemDragEnd = (event) => {
44
- * this.dragClue.hide();
45
- * const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
46
- *
47
- * if (eventAnalyzer.isDropAllowed) {
48
- * const updatedTree = moveTreeViewItem(
49
- * event.itemHierarchicalIndex,
50
- * this.state.tree,
51
- * eventAnalyzer.getDropOperation(),
52
- * eventAnalyzer.destinationMeta.itemHierarchicalIndex,
53
- * );
54
- *
55
- * this.setState({ tree: updatedTree });
56
- * }
57
- * }
58
- * getClueClassName(event) {
59
- * const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
60
- * const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
61
- *
62
- * if (eventAnalyzer.isDropAllowed) {
63
- * switch (eventAnalyzer.getDropOperation()) {
64
- * case 'child':
65
- * return 'k-i-plus';
66
- * case 'before':
67
- * return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
68
- * 'k-i-insert-up' : 'k-i-insert-middle';
69
- * case 'after':
70
- * const siblings = getSiblings(itemIndex, this.state.tree);
71
- * const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
72
- *
73
- * return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
74
- * default:
75
- * break;
76
- * }
77
- * }
78
- *
79
- * return 'k-i-cancel';
80
- * }
81
- * }
82
- *
83
- * function getSiblings(itemIndex, data) {
84
- * let result = data;
85
- *
86
- * const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
87
- * for (let i = 0; i < indices.length - 1; i++) {
88
- * result = result[indices[i]].items;
89
- * }
90
- *
91
- * return result;
92
- * }
93
- *
94
- * const SEPARATOR = '_';
95
- * const tree = [{
96
- * text: 'Furniture', expanded: true, items: [
97
- * { text: 'Tables & Chairs', expanded: true },
98
- * { text: 'Sofas', expanded: true },
99
- * { text: 'Occasional Furniture', expanded: true }]
100
- * }, {
101
- * text: 'Decor', expanded: true, items: [
102
- * { text: 'Bed Linen', expanded: true },
103
- * { text: 'Curtains & Blinds', expanded: true },
104
- * { text: 'Carpets', expanded: true }]
105
- * }];
106
- *
107
- * ReactDOM.render(<App />, document.querySelector('my-app'));
108
- * ```
109
- */
110
- export declare function moveTreeViewItem(sourceItemHierarchicalIndex: string, sourceData: any[] | null | undefined, operation: 'before' | 'after' | 'child', targetItemHierarchicalIndex: string, targetData?: any[] | null, childrenField?: string): any[] | {
111
- sourceData: any[] | null | undefined;
112
- targetData: any[];
113
- } | null | undefined;
@@ -1,9 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the package root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { PackageMetadata } from '@progress/kendo-licensing';
6
- /**
7
- * @hidden
8
- */
9
- export declare const packageMetadata: PackageMetadata;
@@ -1,55 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the package root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { TreeViewOperationDescriptors } from './TreeViewOperationDescriptors';
6
- /**
7
- * A helper function which applies the specified operation descriptors to the data.
8
- * * [Expanding and collapsing items]({% slug expansion_ways_treeview %}#toc-using-a-helper-function)
9
- * * [Selecting and deselecting items]({% slug selection_ways_treeview %}#toc-using-a-helper-function)
10
- * * [Checking and unchecking items]({% slug check_helper_funcs_treeview %})
11
- *
12
- * @param data - The data that will be processed.
13
- * @param operations - The operation descriptors that will be applied to the data.
14
- * @returns - The processed copy of the input data.
15
- *
16
- * @example
17
- * ```jsx
18
- * class App extends React.Component {
19
- * state = { items: tree, expand: [], select: [], check: [] };
20
- * render() {
21
- * const { expand, select, check } = this.state;
22
- * return (
23
- * <TreeView
24
- * data={processTreeViewItems(this.state.items, { expand, select, check })}
25
- * expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
26
- * onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
27
- * onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
28
- * />
29
- * );
30
- * }
31
- * onExpandChange = (event) => {
32
- * let expand = this.state.expand.slice();
33
- * const index = expand.indexOf(event.itemHierarchicalIndex);
34
- * index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
35
- * this.setState({ expand });
36
- * }
37
- * }
38
- *
39
- * const tree = [{
40
- * text: 'Item1',
41
- * items: [
42
- * { text: 'Item1.1' },
43
- * { text: 'Item1.2' },
44
- * { text: 'Item1.3', items: [{ text: 'Item1.3.1' }] }]
45
- * }, {
46
- * text: 'Item2', disabled: true,
47
- * items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
48
- * }, {
49
- * text: 'Item3'
50
- * }];
51
- *
52
- * ReactDOM.render(<App />, document.querySelector('my-app'));
53
- * ```
54
- */
55
- export declare function processTreeViewItems(data: any[] | null | undefined, operations: TreeViewOperationDescriptors): any[];
package/utils/consts.d.ts DELETED
@@ -1,44 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the package root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- /**
6
- * @hidden
7
- */
8
- export declare const EXPAND_FIELD = "expanded";
9
- /**
10
- * @hidden
11
- */
12
- export declare const TEXT_FIELD = "text";
13
- /**
14
- * @hidden
15
- */
16
- export declare const DISABLED_FIELD = "disabled";
17
- /**
18
- * @hidden
19
- */
20
- export declare const CHILDREN_FIELD = "items";
21
- /**
22
- * @hidden
23
- */
24
- export declare const HAS_CHILDREN_FIELD = "hasChildren";
25
- /**
26
- * @hidden
27
- */
28
- export declare const SELECT_FIELD = "selected";
29
- /**
30
- * @hidden
31
- */
32
- export declare const CHECK_FIELD = "checked";
33
- /**
34
- * @hidden
35
- */
36
- export declare const CHECK_INDETERMINATE_FIELD = "checkIndeterminate";
37
- /**
38
- * @hidden
39
- */
40
- export declare const DOM_KENDO_ITEM_ID_FIELD = "_kendoItemId";
41
- /**
42
- * @hidden
43
- */
44
- export declare const DOM_KENDO_TREEVIEW_GUID_FIELD = "_kendoTreeViewGuid";
@@ -1,9 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the package root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { TreeFieldsService } from '@progress/kendo-react-common';
6
- /**
7
- * @hidden
8
- */
9
- export default function getItemIdUponKeyboardNavigation(item: any, itemId: string, items: any[], keyCode: number, fieldsSvc: TreeFieldsService): any;