@progress/kendo-react-treeview 13.3.0 → 13.4.0-develop.1
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/ItemRenderProps.d.ts +20 -0
- package/TreeView.d.ts +137 -0
- package/TreeView.js +1 -1
- package/TreeView.mjs +17 -17
- package/TreeViewDragAnalyzer.d.ts +137 -0
- package/TreeViewDragClue.d.ts +146 -0
- package/TreeViewDragClue.mjs +3 -3
- package/TreeViewItem.d.ts +112 -0
- package/TreeViewItem.js +1 -1
- package/TreeViewItem.mjs +47 -36
- package/TreeViewOperationDescriptors.d.ts +83 -0
- package/TreeViewProps.d.ts +341 -0
- package/dist/cdn/js/kendo-react-treeview.js +1 -1
- package/events.d.ts +165 -0
- package/handleTreeViewCheckChange.d.ts +75 -0
- package/handleTreeViewCheckChange.mjs +5 -5
- package/index.d.mts +16 -1310
- package/index.d.ts +16 -1310
- package/moveTreeViewItem.d.ts +111 -0
- package/package-metadata.d.ts +12 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +10 -16
- package/package.json +4 -4
- package/processTreeViewItems.d.ts +58 -0
- package/processTreeViewItems.mjs +1 -1
- package/utils/consts.d.ts +51 -0
- package/utils/getItemIdUponKeyboardNavigation.d.ts +12 -0
- package/utils/utils.d.ts +13 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* The props of the ItemRender component ([see example](https://www.telerik.com/kendo-react-ui/components/treeview/custom-rendering)).
|
|
10
|
+
*/
|
|
11
|
+
export interface ItemRenderProps {
|
|
12
|
+
/**
|
|
13
|
+
* The item that is rendered.
|
|
14
|
+
*/
|
|
15
|
+
item: any;
|
|
16
|
+
/**
|
|
17
|
+
* 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.
|
|
18
|
+
*/
|
|
19
|
+
itemHierarchicalIndex: string;
|
|
20
|
+
}
|
package/TreeView.d.ts
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { default as PropTypes } from 'prop-types';
|
|
9
|
+
import { TreeViewProps } from './TreeViewProps.js';
|
|
10
|
+
import * as React from 'react';
|
|
11
|
+
/**
|
|
12
|
+
* @hidden
|
|
13
|
+
*/
|
|
14
|
+
export interface TreeViewState {
|
|
15
|
+
focusedItemId?: string;
|
|
16
|
+
focusedItemPublicId?: any;
|
|
17
|
+
tabbableItemId?: string;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Represents the [KendoReact TreeView component](https://www.telerik.com/kendo-react-ui/components/treeview).
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```jsx
|
|
24
|
+
* const data = [{
|
|
25
|
+
* text: 'Furniture', expanded: true, items: [
|
|
26
|
+
* { text: 'Tables & Chairs' }, { text: 'Sofas' }, { text: 'Occasional Furniture' }]
|
|
27
|
+
* }, {
|
|
28
|
+
* text: 'Decor', expanded: true, items: [
|
|
29
|
+
* { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' }]
|
|
30
|
+
* }];
|
|
31
|
+
* const App = () => {
|
|
32
|
+
* return <TreeView data={data} />;
|
|
33
|
+
* }
|
|
34
|
+
* ```
|
|
35
|
+
*/
|
|
36
|
+
export declare class TreeView extends React.Component<TreeViewProps, TreeViewState> {
|
|
37
|
+
/**
|
|
38
|
+
* @hidden
|
|
39
|
+
*/
|
|
40
|
+
static propTypes: {
|
|
41
|
+
data: PropTypes.Requireable<any[]>;
|
|
42
|
+
animate: PropTypes.Requireable<boolean>;
|
|
43
|
+
tabIndex: PropTypes.Requireable<number>;
|
|
44
|
+
focusIdField: PropTypes.Requireable<string>;
|
|
45
|
+
getHierarchicalIndexById: PropTypes.Requireable<(...args: any[]) => any>;
|
|
46
|
+
onExpandChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
47
|
+
onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
48
|
+
expandField: PropTypes.Requireable<string>;
|
|
49
|
+
selectField: PropTypes.Requireable<string>;
|
|
50
|
+
iconField: PropTypes.Requireable<string>;
|
|
51
|
+
childrenField: PropTypes.Requireable<string>;
|
|
52
|
+
hasChildrenField: PropTypes.Requireable<string>;
|
|
53
|
+
textField: PropTypes.Requireable<string>;
|
|
54
|
+
disableField: PropTypes.Requireable<string>;
|
|
55
|
+
item: PropTypes.Requireable<any>;
|
|
56
|
+
'aria-multiselectable': (props: any, propName: string, componentName: string) => Error | null;
|
|
57
|
+
'aria-label': PropTypes.Requireable<string>;
|
|
58
|
+
'aria-labelledby': PropTypes.Requireable<string>;
|
|
59
|
+
size: PropTypes.Requireable<"small" | "medium" | "large" | undefined>;
|
|
60
|
+
dir: PropTypes.Requireable<string>;
|
|
61
|
+
};
|
|
62
|
+
/**
|
|
63
|
+
* @hidden
|
|
64
|
+
*/
|
|
65
|
+
static defaultProps: {
|
|
66
|
+
animate: boolean;
|
|
67
|
+
expandField: string;
|
|
68
|
+
selectField: string;
|
|
69
|
+
iconField: string;
|
|
70
|
+
hasChildrenField: string;
|
|
71
|
+
childrenField: string;
|
|
72
|
+
textField: string;
|
|
73
|
+
disableField: string;
|
|
74
|
+
checkField: string;
|
|
75
|
+
checkIndeterminateField: string;
|
|
76
|
+
size: "small" | "medium" | "large" | undefined;
|
|
77
|
+
};
|
|
78
|
+
/**
|
|
79
|
+
* @hidden
|
|
80
|
+
*/
|
|
81
|
+
state: {
|
|
82
|
+
focusedItemId: undefined;
|
|
83
|
+
focusedItemPublicId: undefined;
|
|
84
|
+
tabbableItemId: string;
|
|
85
|
+
};
|
|
86
|
+
private blurRequest;
|
|
87
|
+
private fieldsSvc;
|
|
88
|
+
private allowExplicitFocus;
|
|
89
|
+
private readonly showLicenseWatermark;
|
|
90
|
+
private readonly licenseMessage?;
|
|
91
|
+
private get treeGuid();
|
|
92
|
+
private _element;
|
|
93
|
+
/**
|
|
94
|
+
* @hidden
|
|
95
|
+
*/
|
|
96
|
+
get element(): HTMLDivElement | null;
|
|
97
|
+
constructor(props: TreeViewProps);
|
|
98
|
+
/**
|
|
99
|
+
* @hidden
|
|
100
|
+
*/
|
|
101
|
+
render(): React.JSX.Element;
|
|
102
|
+
/**
|
|
103
|
+
* @hidden
|
|
104
|
+
*/
|
|
105
|
+
componentDidUpdate(): void;
|
|
106
|
+
private onFocusDomElNeeded;
|
|
107
|
+
private onCheckChange;
|
|
108
|
+
private onExpandChange;
|
|
109
|
+
private onPress;
|
|
110
|
+
private onDrag;
|
|
111
|
+
private onRelease;
|
|
112
|
+
private onItemClick;
|
|
113
|
+
private onFocus;
|
|
114
|
+
private onBlur;
|
|
115
|
+
private onKeyDown;
|
|
116
|
+
private dispatchEventsOnKeyDown;
|
|
117
|
+
private setFocus;
|
|
118
|
+
private onContextMenu;
|
|
119
|
+
private getFocusedItem;
|
|
120
|
+
private getItemById;
|
|
121
|
+
private dispatchCheckChange;
|
|
122
|
+
private dispatchExpandChange;
|
|
123
|
+
private dispatchItemClick;
|
|
124
|
+
private refocusDueToFocusIdField;
|
|
125
|
+
private get ariaMultiSelectable();
|
|
126
|
+
private get data();
|
|
127
|
+
private focusDomItem;
|
|
128
|
+
/**
|
|
129
|
+
* Returns the `guid` which is associated with the TreeView.
|
|
130
|
+
*/
|
|
131
|
+
get guid(): string;
|
|
132
|
+
}
|
|
133
|
+
/**
|
|
134
|
+
* Represent the `ref` of the TreeView component.
|
|
135
|
+
*/
|
|
136
|
+
export interface TreeViewHandle extends Pick<TreeView, keyof TreeView> {
|
|
137
|
+
}
|
package/TreeView.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),a=require("prop-types"),n=require("@progress/kendo-react-common"),f=require("./utils/getItemIdUponKeyboardNavigation.js"),b=require("./utils/utils.js"),E=require("./TreeViewItem.js"),m=require("./package-metadata.js"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),a=require("prop-types"),n=require("@progress/kendo-react-common"),f=require("./utils/getItemIdUponKeyboardNavigation.js"),b=require("./utils/utils.js"),E=require("./TreeViewItem.js"),m=require("./package-metadata.js"),o=require("./utils/consts.js");function F(l){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const e in l)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(l,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>l[e]})}}return t.default=l,Object.freeze(t)}const d=F(g),{sizeMap:C}=n.kendoThemeMaps,c=class c extends d.Component{constructor(t){super(t),this.state={focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:n.treeIdUtils.ZERO_LEVEL_ZERO_NODE_ID},this.fieldsSvc=null,this.allowExplicitFocus=!1,this.showLicenseWatermark=!1,this._element=null,this.onFocusDomElNeeded=e=>{this.allowExplicitFocus&&this.focusDomItem(e)},this.onCheckChange=(e,s,i)=>{this.setFocus(i),this.dispatchCheckChange(e,s,i)},this.onExpandChange=(e,s,i)=>{this.setFocus(i),this.dispatchExpandChange(e,s,i)},this.onPress=(e,s,i)=>{this.props.onItemDragStart&&this.props.onItemDragStart.call(void 0,{target:this,item:s,itemHierarchicalIndex:i})},this.onDrag=(e,s,i)=>{const{pageX:r,pageY:h,clientX:u,clientY:p}=e;this.props.onItemDragOver&&this.props.onItemDragOver.call(void 0,{target:this,item:s,itemHierarchicalIndex:i,pageX:r,pageY:h,clientX:u,clientY:p})},this.onRelease=(e,s,i)=>{const{pageX:r,pageY:h,clientX:u,clientY:p}=e;this.props.onItemDragEnd&&this.props.onItemDragEnd.call(void 0,{target:this,item:s,itemHierarchicalIndex:i,pageX:r,pageY:h,clientX:u,clientY:p})},this.onItemClick=(e,s,i)=>{this.setFocus(i),this.dispatchItemClick(e,s,i)},this.onFocus=()=>{clearTimeout(this.blurRequest),this.state.focusedItemId===void 0&&this.data.length&&this.setFocus(this.state.tabbableItemId)},this.onBlur=()=>{clearTimeout(this.blurRequest),this.blurRequest=window.setTimeout(()=>this.setFocus(void 0),0)},this.onKeyDown=e=>{const s=this.getFocusedItem();if(s&&this.fieldsSvc){const i=f(s,this.state.focusedItemId,this.data,e.keyCode,this.fieldsSvc);i!==this.state.focusedItemId&&(e.preventDefault(),this.allowExplicitFocus=!0,this.setFocus(i)),this.dispatchEventsOnKeyDown(e,s)}},this.onContextMenu=(e,s,i)=>{if(this.props.onContextMenu){const r={target:this,syntheticEvent:e,nativeEvent:e.nativeEvent,item:s,itemID:i};this.props.onContextMenu.call(void 0,r)}},this.showLicenseWatermark=!n.validatePackage(m.packageMetadata,{component:"TreeView"}),this.licenseMessage=n.getLicenseMessage(m.packageMetadata)}get treeGuid(){return this.props.id+"-accessibility-id"}get element(){return this._element}render(){this.fieldsSvc=new n.TreeFieldsService(this.props);const{size:t,className:e}=this.props;return d.createElement("div",{id:this.props.id,style:{position:"relative",...this.props.style},className:n.classNames("k-treeview",{[`k-treeview-${C[t]||t}`]:t,"k-user-select-none":this.props.draggable,"k-rtl":this.props.dir==="rtl"},e),onKeyDown:this.onKeyDown,onFocus:this.onFocus,onBlur:this.onBlur,role:"tree","aria-multiselectable":this.ariaMultiSelectable?!0:void 0,"aria-label":this.props["aria-label"],"aria-labelledby":this.props["aria-labelledby"],ref:s=>{this._element=s},tabIndex:this.props.tabIndex},d.createElement("ul",{className:"k-treeview-lines k-treeview-group",role:"group"},this.data.map((s,i)=>d.createElement(E.TreeViewItem,{id:this.props.id+"-item-"+i,item:s,position:b.getNodePosition(i,this.data),itemId:i.toString(),treeGuid:this.treeGuid,animate:this.props.animate,focusedItemId:this.state.focusedItemId,tabbableItemId:this.state.tabbableItemId,fieldsService:this.fieldsSvc,itemUI:this.props.item,checkboxes:this.props.checkboxes,ariaMultiSelectable:this.ariaMultiSelectable,onItemClick:this.onItemClick,onFocusDomElNeeded:this.onFocusDomElNeeded,draggable:this.props.draggable,onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,expandIcons:this.props.expandIcons,iconField:this.props.iconField,onExpandChange:this.onExpandChange,onCheckChange:this.onCheckChange,onContextMenu:this.onContextMenu,key:i,size:t,isRtl:this.props.dir==="rtl"}))),this.showLicenseWatermark&&d.createElement(n.WatermarkOverlay,{message:this.licenseMessage}))}componentDidUpdate(){this.allowExplicitFocus=!1,this.refocusDueToFocusIdField()}dispatchEventsOnKeyDown(t,e){if(this.fieldsSvc===null)return;const s=()=>this.fieldsSvc&&n.isEnabledAndAllParentsEnabled(this.state.focusedItemId,this.data,this.fieldsSvc);t.keyCode===n.Keys.left&&this.fieldsSvc.expanded(e)&&s()?this.dispatchExpandChange(t,e,this.state.focusedItemId):t.keyCode===n.Keys.right&&!this.fieldsSvc.expanded(e)&&(this.fieldsSvc.hasChildren(e)||n.hasChildren(e,this.props.childrenField))&&s()?this.dispatchExpandChange(t,e,this.state.focusedItemId):t.keyCode===n.Keys.enter&&s()?this.dispatchItemClick(t,e,this.state.focusedItemId):t.keyCode===n.Keys.space&&s()&&(t.preventDefault(),this.dispatchCheckChange(t,e,this.state.focusedItemId))}setFocus(t){if(t&&this.fieldsSvc)if(this.fieldsSvc.focusIdField){const e=this.getItemById(t);this.setState({focusedItemId:t,focusedItemPublicId:this.fieldsSvc.focusId(e)})}else this.setState({focusedItemId:t});else this.setState(e=>({focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:e.focusedItemId}))}getFocusedItem(){return this.state.focusedItemId?this.getItemById(this.state.focusedItemId):void 0}getItemById(t){return n.treeIdUtils.getItemById(t,this.data,this.props.childrenField||o.CHILDREN_FIELD)}dispatchCheckChange(t,e,s){n.dispatchEvent(this.props.onCheckChange,t,this,{item:e,itemHierarchicalIndex:s})}dispatchExpandChange(t,e,s){n.dispatchEvent(this.props.onExpandChange,t,this,{item:e,itemHierarchicalIndex:s})}dispatchItemClick(t,e,s){n.dispatchEvent(this.props.onItemClick,t,this,{item:e,itemHierarchicalIndex:s})}refocusDueToFocusIdField(){if(this.fieldsSvc&&this.fieldsSvc.focusIdField){const t=this.state.focusedItemPublicId;if(t){const e=this.props.getFocusHierarchicalIndex?this.props.getFocusHierarchicalIndex(t):n.resolveItemId(t,this.fieldsSvc.focusIdField,this.data,this.props.childrenField);e!==this.state.focusedItemId&&(this.allowExplicitFocus=!0,this.setState({focusedItemId:e}))}}}get ariaMultiSelectable(){return this.props["aria-multiselectable"]===!0||this.props["aria-multiselectable"]==="true"}get data(){return this.props.data||[]}focusDomItem(t){t.focus()}get guid(){return this.treeGuid}};c.propTypes={data:a.arrayOf(a.any),animate:a.bool,tabIndex:a.number,focusIdField:a.string,getHierarchicalIndexById:a.func,onExpandChange:a.func,onItemClick:a.func,expandField:a.string,selectField:a.string,iconField:a.string,childrenField:a.string,hasChildrenField:a.string,textField:a.string,disableField:a.string,item:a.any,"aria-multiselectable":(t,e,s)=>t[e]!==void 0&&t[e]!==!0&&t[e]!==!1&&t[e]!=="true"&&t[e]!=="false"?new Error("Invalid prop `"+e+"` supplied to `"+s+"`. Validation failed."):null,"aria-label":a.string,"aria-labelledby":a.string,size:a.oneOf(["small","medium","large"]),dir:a.string},c.defaultProps={animate:!0,expandField:o.EXPAND_FIELD,selectField:o.SELECT_FIELD,iconField:o.ICON_FIELD,hasChildrenField:o.HAS_CHILDREN_FIELD,childrenField:o.CHILDREN_FIELD,textField:o.TEXT_FIELD,disableField:o.DISABLED_FIELD,checkField:o.CHECK_FIELD,checkIndeterminateField:o.CHECK_INDETERMINATE_FIELD,size:void 0};let I=c;exports.TreeView=I;
|
package/TreeView.mjs
CHANGED
|
@@ -7,13 +7,13 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as l from "react";
|
|
9
9
|
import a from "prop-types";
|
|
10
|
-
import { treeIdUtils as u, validatePackage as g, getLicenseMessage as F, TreeFieldsService as E, classNames as b,
|
|
10
|
+
import { treeIdUtils as u, validatePackage as g, getLicenseMessage as F, TreeFieldsService as E, classNames as b, kendoThemeMaps as C, WatermarkOverlay as v, Keys as d, isEnabledAndAllParentsEnabled as D, hasChildren as x, dispatchEvent as p, resolveItemId as k } from "@progress/kendo-react-common";
|
|
11
11
|
import S from "./utils/getItemIdUponKeyboardNavigation.mjs";
|
|
12
12
|
import { getNodePosition as y } from "./utils/utils.mjs";
|
|
13
13
|
import { TreeViewItem as w } from "./TreeViewItem.mjs";
|
|
14
14
|
import { packageMetadata as I } from "./package-metadata.mjs";
|
|
15
|
-
import {
|
|
16
|
-
const { sizeMap: O } =
|
|
15
|
+
import { CHECK_INDETERMINATE_FIELD as L, CHECK_FIELD as _, DISABLED_FIELD as M, TEXT_FIELD as H, CHILDREN_FIELD as m, HAS_CHILDREN_FIELD as P, ICON_FIELD as R, SELECT_FIELD as T, EXPAND_FIELD as N } from "./utils/consts.mjs";
|
|
16
|
+
const { sizeMap: O } = C, r = class r extends l.Component {
|
|
17
17
|
constructor(t) {
|
|
18
18
|
super(t), this.state = {
|
|
19
19
|
focusedItemId: void 0,
|
|
@@ -146,7 +146,7 @@ const { sizeMap: O } = x, r = class r extends l.Component {
|
|
|
146
146
|
isRtl: this.props.dir === "rtl"
|
|
147
147
|
}
|
|
148
148
|
))),
|
|
149
|
-
this.showLicenseWatermark && /* @__PURE__ */ l.createElement(
|
|
149
|
+
this.showLicenseWatermark && /* @__PURE__ */ l.createElement(v, { message: this.licenseMessage })
|
|
150
150
|
);
|
|
151
151
|
}
|
|
152
152
|
/**
|
|
@@ -158,8 +158,8 @@ const { sizeMap: O } = x, r = class r extends l.Component {
|
|
|
158
158
|
dispatchEventsOnKeyDown(t, e) {
|
|
159
159
|
if (this.fieldsSvc === null)
|
|
160
160
|
return;
|
|
161
|
-
const i = () => this.fieldsSvc &&
|
|
162
|
-
t.keyCode === d.left && this.fieldsSvc.expanded(e) && i() ? this.dispatchExpandChange(t, e, this.state.focusedItemId) : t.keyCode === d.right && !this.fieldsSvc.expanded(e) && (this.fieldsSvc.hasChildren(e) ||
|
|
161
|
+
const i = () => this.fieldsSvc && D(this.state.focusedItemId, this.data, this.fieldsSvc);
|
|
162
|
+
t.keyCode === d.left && this.fieldsSvc.expanded(e) && i() ? this.dispatchExpandChange(t, e, this.state.focusedItemId) : t.keyCode === d.right && !this.fieldsSvc.expanded(e) && (this.fieldsSvc.hasChildren(e) || x(e, this.props.childrenField)) && i() ? this.dispatchExpandChange(t, e, this.state.focusedItemId) : t.keyCode === d.enter && i() ? this.dispatchItemClick(t, e, this.state.focusedItemId) : t.keyCode === d.space && i() && (t.preventDefault(), this.dispatchCheckChange(t, e, this.state.focusedItemId));
|
|
163
163
|
}
|
|
164
164
|
setFocus(t) {
|
|
165
165
|
if (t && this.fieldsSvc)
|
|
@@ -194,7 +194,7 @@ const { sizeMap: O } = x, r = class r extends l.Component {
|
|
|
194
194
|
if (this.fieldsSvc && this.fieldsSvc.focusIdField) {
|
|
195
195
|
const t = this.state.focusedItemPublicId;
|
|
196
196
|
if (t) {
|
|
197
|
-
const e = this.props.getFocusHierarchicalIndex ? this.props.getFocusHierarchicalIndex(t) :
|
|
197
|
+
const e = this.props.getFocusHierarchicalIndex ? this.props.getFocusHierarchicalIndex(t) : k(
|
|
198
198
|
t,
|
|
199
199
|
this.fieldsSvc.focusIdField,
|
|
200
200
|
this.data,
|
|
@@ -241,20 +241,20 @@ r.propTypes = {
|
|
|
241
241
|
) : null,
|
|
242
242
|
"aria-label": a.string,
|
|
243
243
|
"aria-labelledby": a.string,
|
|
244
|
-
size: a.oneOf([
|
|
244
|
+
size: a.oneOf(["small", "medium", "large"]),
|
|
245
245
|
dir: a.string
|
|
246
246
|
}, r.defaultProps = {
|
|
247
247
|
animate: !0,
|
|
248
|
-
expandField:
|
|
249
|
-
selectField:
|
|
250
|
-
iconField:
|
|
251
|
-
hasChildrenField:
|
|
248
|
+
expandField: N,
|
|
249
|
+
selectField: T,
|
|
250
|
+
iconField: R,
|
|
251
|
+
hasChildrenField: P,
|
|
252
252
|
childrenField: m,
|
|
253
|
-
textField:
|
|
254
|
-
disableField:
|
|
255
|
-
checkField:
|
|
256
|
-
checkIndeterminateField:
|
|
257
|
-
size:
|
|
253
|
+
textField: H,
|
|
254
|
+
disableField: M,
|
|
255
|
+
checkField: _,
|
|
256
|
+
checkIndeterminateField: L,
|
|
257
|
+
size: void 0
|
|
258
258
|
};
|
|
259
259
|
let f = r;
|
|
260
260
|
export {
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { TreeViewItemDragOverEvent, TreeViewItemDragEndEvent } from './events.js';
|
|
9
|
+
/**
|
|
10
|
+
* A class which provides an API for analyzing the `drag` events
|
|
11
|
+
* of the TreeView.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```jsx
|
|
15
|
+
* const App = () => {
|
|
16
|
+
* const dragClueRef = React.useRef(null);
|
|
17
|
+
* const [tree, setTree] = React.useState([{
|
|
18
|
+
* text: 'Furniture', expanded: true, items: [
|
|
19
|
+
* { text: 'Tables & Chairs', expanded: true },
|
|
20
|
+
* { text: 'Sofas', expanded: true },
|
|
21
|
+
* { text: 'Occasional Furniture', expanded: true }]
|
|
22
|
+
* }, {
|
|
23
|
+
* text: 'Decor', expanded: true, items: [
|
|
24
|
+
* { text: 'Bed Linen', expanded: true },
|
|
25
|
+
* { text: 'Curtains & Blinds', expanded: true },
|
|
26
|
+
* { text: 'Carpets', expanded: true }]
|
|
27
|
+
* }]);
|
|
28
|
+
*
|
|
29
|
+
* const SEPARATOR = '_';
|
|
30
|
+
*
|
|
31
|
+
* const getSiblings = (itemIndex, data) => {
|
|
32
|
+
* let result = data;
|
|
33
|
+
* const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
|
|
34
|
+
* for (let i = 0; i < indices.length - 1; i++) {
|
|
35
|
+
* result = result[indices[i]].items;
|
|
36
|
+
* }
|
|
37
|
+
* return result;
|
|
38
|
+
* };
|
|
39
|
+
*
|
|
40
|
+
* const getClueClassName = (event) => {
|
|
41
|
+
* const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
|
|
42
|
+
* const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
|
|
43
|
+
*
|
|
44
|
+
* if (eventAnalyzer.isDropAllowed) {
|
|
45
|
+
* switch (eventAnalyzer.getDropOperation()) {
|
|
46
|
+
* case 'child':
|
|
47
|
+
* return 'k-i-plus';
|
|
48
|
+
* case 'before':
|
|
49
|
+
* return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
|
|
50
|
+
* 'k-i-insert-up' : 'k-i-insert-middle';
|
|
51
|
+
* case 'after':
|
|
52
|
+
* const siblings = getSiblings(itemIndex, tree);
|
|
53
|
+
* const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
|
|
54
|
+
*
|
|
55
|
+
* return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
|
|
56
|
+
* default:
|
|
57
|
+
* break;
|
|
58
|
+
* }
|
|
59
|
+
* }
|
|
60
|
+
*
|
|
61
|
+
* return 'k-i-cancel';
|
|
62
|
+
* };
|
|
63
|
+
*
|
|
64
|
+
* const onItemDragOver = (event) => {
|
|
65
|
+
* dragClueRef.current.show(event.pageY + 10, event.pageX, event.item.text, getClueClassName(event));
|
|
66
|
+
* };
|
|
67
|
+
*
|
|
68
|
+
* const onItemDragEnd = (event) => {
|
|
69
|
+
* dragClueRef.current.hide();
|
|
70
|
+
* const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
|
|
71
|
+
*
|
|
72
|
+
* if (eventAnalyzer.isDropAllowed) {
|
|
73
|
+
* const updatedTree = moveTreeViewItem(
|
|
74
|
+
* event.itemHierarchicalIndex,
|
|
75
|
+
* tree,
|
|
76
|
+
* eventAnalyzer.getDropOperation(),
|
|
77
|
+
* eventAnalyzer.destinationMeta.itemHierarchicalIndex,
|
|
78
|
+
* );
|
|
79
|
+
*
|
|
80
|
+
* setTree(updatedTree);
|
|
81
|
+
* }
|
|
82
|
+
* };
|
|
83
|
+
*
|
|
84
|
+
* return (
|
|
85
|
+
* <div>
|
|
86
|
+
* <TreeView data={tree} draggable={true}
|
|
87
|
+
* onItemDragOver={onItemDragOver} onItemDragEnd={onItemDragEnd} />
|
|
88
|
+
* <TreeViewDragClue ref={dragClueRef} />
|
|
89
|
+
* </div>
|
|
90
|
+
* );
|
|
91
|
+
* }
|
|
92
|
+
* ```
|
|
93
|
+
*/
|
|
94
|
+
export declare class TreeViewDragAnalyzer {
|
|
95
|
+
private event;
|
|
96
|
+
private itemId;
|
|
97
|
+
private treeViewGuid;
|
|
98
|
+
private initialized;
|
|
99
|
+
private destDomNodeWithMeta;
|
|
100
|
+
private destItemId;
|
|
101
|
+
private destTreeViewGuid;
|
|
102
|
+
/**
|
|
103
|
+
* @param event - The event that will be analyzed.
|
|
104
|
+
*/
|
|
105
|
+
constructor(event: TreeViewItemDragOverEvent | TreeViewItemDragEndEvent);
|
|
106
|
+
/**
|
|
107
|
+
* The method which initializes the analyzer.
|
|
108
|
+
* Invoke the method before you call any other methods.
|
|
109
|
+
*
|
|
110
|
+
* @returns - The analyzer object of the `drag` event.
|
|
111
|
+
*/
|
|
112
|
+
init(): this;
|
|
113
|
+
/**
|
|
114
|
+
* Returns `true` if dropping is allowed. Otherwise, returns `false`.
|
|
115
|
+
*/
|
|
116
|
+
get isDropAllowed(): boolean;
|
|
117
|
+
/**
|
|
118
|
+
* Returns an object which contains:
|
|
119
|
+
* * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
|
|
120
|
+
* * The `guid` of the destination TreeView (the TreeView which renders the destination item).
|
|
121
|
+
*/
|
|
122
|
+
get destinationMeta(): {
|
|
123
|
+
itemHierarchicalIndex: string;
|
|
124
|
+
treeViewGuid: string;
|
|
125
|
+
};
|
|
126
|
+
/**
|
|
127
|
+
* Returns the specific drop operation.
|
|
128
|
+
*
|
|
129
|
+
* @returns - The following values are returned:
|
|
130
|
+
* * `before`—Indicates that the dragged item is positioned at the beginning of the destination item.
|
|
131
|
+
* * `after`—Indicates that the dragged item is positioned at the end of the destination item.
|
|
132
|
+
* * `child`—Indicates that the dragged item is positioned in the middle of the destination item.
|
|
133
|
+
* * `undefined`—Indicates that dropping is not allowed.
|
|
134
|
+
*/
|
|
135
|
+
getDropOperation(): "child" | "after" | "before" | undefined;
|
|
136
|
+
private setDestimationMeta;
|
|
137
|
+
}
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import * as React from 'react';
|
|
9
|
+
/**
|
|
10
|
+
* Represents the props of the KendoReact TreeViewDragClue component.
|
|
11
|
+
*/
|
|
12
|
+
export interface TreeViewDragClueProps {
|
|
13
|
+
/**
|
|
14
|
+
* Sets custom CSS styles to the component.
|
|
15
|
+
* When specified, the default CSS styles are removed.
|
|
16
|
+
*/
|
|
17
|
+
style?: React.CSSProperties;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* @hidden
|
|
21
|
+
*/
|
|
22
|
+
export interface TreeViewDragClueState {
|
|
23
|
+
visible?: boolean;
|
|
24
|
+
top?: number;
|
|
25
|
+
left?: number;
|
|
26
|
+
text?: string;
|
|
27
|
+
operationClassName?: string;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Represents the KendoReact TreeViewDragClue component which renders a clue when an item is dragged.
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* ```jsx
|
|
34
|
+
* const App = () => {
|
|
35
|
+
* const dragClueRef = React.useRef(null);
|
|
36
|
+
* const [tree, setTree] = React.useState([{
|
|
37
|
+
* text: 'Furniture', expanded: true, items: [
|
|
38
|
+
* { text: 'Tables & Chairs', expanded: true },
|
|
39
|
+
* { text: 'Sofas', expanded: true },
|
|
40
|
+
* { text: 'Occasional Furniture', expanded: true }]
|
|
41
|
+
* }, {
|
|
42
|
+
* text: 'Decor', expanded: true, items: [
|
|
43
|
+
* { text: 'Bed Linen', expanded: true },
|
|
44
|
+
* { text: 'Curtains & Blinds', expanded: true },
|
|
45
|
+
* { text: 'Carpets', expanded: true }]
|
|
46
|
+
* }]);
|
|
47
|
+
*
|
|
48
|
+
* const SEPARATOR = '_';
|
|
49
|
+
*
|
|
50
|
+
* const getSiblings = (itemIndex, data) => {
|
|
51
|
+
* let result = data;
|
|
52
|
+
* const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
|
|
53
|
+
* for (let i = 0; i < indices.length - 1; i++) {
|
|
54
|
+
* result = result[indices[i]].items;
|
|
55
|
+
* }
|
|
56
|
+
* return result;
|
|
57
|
+
* };
|
|
58
|
+
*
|
|
59
|
+
* const 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, 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
|
+
* const onItemDragOver = (event) => {
|
|
84
|
+
* dragClueRef.current.show(event.pageY + 10, event.pageX, event.item.text, getClueClassName(event));
|
|
85
|
+
* };
|
|
86
|
+
*
|
|
87
|
+
* const onItemDragEnd = (event) => {
|
|
88
|
+
* dragClueRef.current.hide();
|
|
89
|
+
* const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
|
|
90
|
+
*
|
|
91
|
+
* if (eventAnalyzer.isDropAllowed) {
|
|
92
|
+
* const updatedTree = moveTreeViewItem(
|
|
93
|
+
* event.itemHierarchicalIndex,
|
|
94
|
+
* tree,
|
|
95
|
+
* eventAnalyzer.getDropOperation(),
|
|
96
|
+
* eventAnalyzer.destinationMeta.itemHierarchicalIndex,
|
|
97
|
+
* );
|
|
98
|
+
*
|
|
99
|
+
* setTree(updatedTree);
|
|
100
|
+
* }
|
|
101
|
+
* };
|
|
102
|
+
*
|
|
103
|
+
* return (
|
|
104
|
+
* <div>
|
|
105
|
+
* <TreeView data={tree} draggable={true}
|
|
106
|
+
* onItemDragOver={onItemDragOver} onItemDragEnd={onItemDragEnd} />
|
|
107
|
+
* <TreeViewDragClue ref={dragClueRef} />
|
|
108
|
+
* </div>
|
|
109
|
+
* );
|
|
110
|
+
* }
|
|
111
|
+
* ```
|
|
112
|
+
*/
|
|
113
|
+
export declare class TreeViewDragClue extends React.PureComponent<TreeViewDragClueProps, TreeViewDragClueState> {
|
|
114
|
+
/**
|
|
115
|
+
* @hidden
|
|
116
|
+
*/
|
|
117
|
+
static defaultProps: {
|
|
118
|
+
style: {
|
|
119
|
+
display: string;
|
|
120
|
+
position: string;
|
|
121
|
+
zIndex: number;
|
|
122
|
+
padding: string;
|
|
123
|
+
};
|
|
124
|
+
};
|
|
125
|
+
/**
|
|
126
|
+
* @hidden
|
|
127
|
+
*/
|
|
128
|
+
readonly state: TreeViewDragClueState;
|
|
129
|
+
/**
|
|
130
|
+
* @hidden
|
|
131
|
+
*/
|
|
132
|
+
render(): false | React.JSX.Element | undefined;
|
|
133
|
+
/**
|
|
134
|
+
* Displays the TreeViewDragClue component.
|
|
135
|
+
*
|
|
136
|
+
* @param top - The `top` CSS position of the component.
|
|
137
|
+
* @param left - The `left` CSS position of the component.
|
|
138
|
+
* @param text - The text of the component.
|
|
139
|
+
* @param operationClassName - The CSS class name which is related to the specific drop operation.
|
|
140
|
+
*/
|
|
141
|
+
show(top: number, left: number, text: string, operationClassName: string): void;
|
|
142
|
+
/**
|
|
143
|
+
* Hides the TreeViewDragClue component.
|
|
144
|
+
*/
|
|
145
|
+
hide(): void;
|
|
146
|
+
}
|
package/TreeViewDragClue.mjs
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as s from "react";
|
|
9
|
-
import { IconWrap as l,
|
|
9
|
+
import { IconWrap as l, toIconName as r, classNames as p } from "@progress/kendo-react-common";
|
|
10
10
|
import { plusIcon as c, insertTopIcon as m, insertBottomIcon as d, insertMiddleIcon as h, cancelIcon as u } from "@progress/kendo-svg-icons";
|
|
11
11
|
const e = class e extends s.PureComponent {
|
|
12
12
|
constructor() {
|
|
@@ -26,8 +26,8 @@ const e = class e extends s.PureComponent {
|
|
|
26
26
|
return this.state.visible && /* @__PURE__ */ s.createElement("div", { className: "k-header k-drag-clue", style: { ...this.props.style, ...t } }, /* @__PURE__ */ s.createElement(
|
|
27
27
|
l,
|
|
28
28
|
{
|
|
29
|
-
className:
|
|
30
|
-
name: this.state.operationClassName &&
|
|
29
|
+
className: p("k-drag-status"),
|
|
30
|
+
name: this.state.operationClassName && r(this.state.operationClassName),
|
|
31
31
|
icon: this.state.operationClassName === "k-i-plus" ? c : this.state.operationClassName === "k-i-insert-up" ? m : this.state.operationClassName === "k-i-insert-down" ? d : this.state.operationClassName === "k-i-insert-middle" ? h : u
|
|
32
32
|
}
|
|
33
33
|
), this.state.text);
|