@progress/kendo-react-treeview 7.4.0 → 7.5.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/TreeView.js +1 -1
- package/TreeView.mjs +20 -17
- package/TreeViewItem.js +1 -1
- package/TreeViewItem.mjs +21 -17
- package/dist/cdn/js/kendo-react-treeview.js +1 -1
- package/index.d.mts +7 -0
- package/index.d.ts +7 -0
- package/package-metadata.mjs +1 -1
- package/package.json +3 -3
- package/utils/consts.js +1 -1
- package/utils/consts.mjs +8 -7
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 client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),a=require("prop-types"),l=require("@progress/kendo-react-common"),f=require("./utils/getItemIdUponKeyboardNavigation.js"),g=require("./TreeViewItem.js"),b=require("./package-metadata.js"),o=require("./utils/consts.js");function E(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),a=require("prop-types"),l=require("@progress/kendo-react-common"),f=require("./utils/getItemIdUponKeyboardNavigation.js"),g=require("./TreeViewItem.js"),b=require("./package-metadata.js"),o=require("./utils/consts.js");function E(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const r=E(m),{sizeMap:F}=l.kendoThemeMaps,c=class c extends r.Component{constructor(t){super(t),this.state={focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:l.treeIdUtils.ZERO_LEVEL_ZERO_NODE_ID},this.fieldsSvc=null,this.allowExplicitFocus=!1,this._element=null,this.onFocusDomElNeeded=e=>{this.allowExplicitFocus&&this.focusDomItem(e)},this.onCheckChange=(e,i,s)=>{this.setFocus(s),this.dispatchCheckChange(e,i,s)},this.onExpandChange=(e,i,s)=>{this.setFocus(s),this.dispatchExpandChange(e,i,s)},this.onPress=(e,i,s)=>{this.props.onItemDragStart&&this.props.onItemDragStart.call(void 0,{target:this,item:i,itemHierarchicalIndex:s})},this.onDrag=(e,i,s)=>{const{pageX:d,pageY:h,clientX:u,clientY:p}=e;this.props.onItemDragOver&&this.props.onItemDragOver.call(void 0,{target:this,item:i,itemHierarchicalIndex:s,pageX:d,pageY:h,clientX:u,clientY:p})},this.onRelease=(e,i,s)=>{const{pageX:d,pageY:h,clientX:u,clientY:p}=e;this.props.onItemDragEnd&&this.props.onItemDragEnd.call(void 0,{target:this,item:i,itemHierarchicalIndex:s,pageX:d,pageY:h,clientX:u,clientY:p})},this.onItemClick=(e,i,s)=>{this.setFocus(s),this.dispatchItemClick(e,i,s)},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 i=this.getFocusedItem();if(i&&this.fieldsSvc){const s=f(i,this.state.focusedItemId,this.data,e.keyCode,this.fieldsSvc);s!==this.state.focusedItemId&&(e.preventDefault(),this.allowExplicitFocus=!0,this.setFocus(s)),this.dispatchEventsOnKeyDown(e,i)}},this.onContextMenu=(e,i,s)=>{if(this.props.onContextMenu){const d={target:this,syntheticEvent:e,nativeEvent:e.nativeEvent,item:i,itemID:s};this.props.onContextMenu.call(void 0,d)}},l.validatePackage(b.packageMetadata)}get treeGuid(){return this.props.id+"-accessibility-id"}get element(){return this._element}render(){this.fieldsSvc=new l.TreeFieldsService(this.props);const{size:t,className:e}=this.props;return r.createElement("div",{id:this.props.id,style:this.props.style?this.props.style:void 0,className:l.classNames("k-treeview",{[`k-treeview-${F[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:i=>this._element=i,tabIndex:this.props.tabIndex},r.createElement("ul",{className:"k-treeview-lines k-treeview-group",role:"group"},this.data.map((i,s)=>r.createElement(g.TreeViewItem,{id:this.props.id+"-item-"+s,item:i,position:s===0?"top":s===this.data.length-1?"bot":"mid",itemId:s.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:s,size:t,isRtl:this.props.dir==="rtl"}))))}componentDidUpdate(){this.allowExplicitFocus=!1,this.refocusDueToFocusIdField()}dispatchEventsOnKeyDown(t,e){if(this.fieldsSvc===null)return;const i=()=>this.fieldsSvc&&l.isEnabledAndAllParentsEnabled(this.state.focusedItemId,this.data,this.fieldsSvc);t.keyCode===l.Keys.left&&this.fieldsSvc.expanded(e)&&i()?this.dispatchExpandChange(t,e,this.state.focusedItemId):t.keyCode===l.Keys.right&&!this.fieldsSvc.expanded(e)&&(this.fieldsSvc.hasChildren(e)||l.hasChildren(e,this.props.childrenField))&&i()?this.dispatchExpandChange(t,e,this.state.focusedItemId):t.keyCode===l.Keys.enter&&i()?this.dispatchItemClick(t,e,this.state.focusedItemId):t.keyCode===l.Keys.space&&i()&&(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 l.treeIdUtils.getItemById(t,this.data,this.props.childrenField||o.CHILDREN_FIELD)}dispatchCheckChange(t,e,i){l.dispatchEvent(this.props.onCheckChange,t,this,{item:e,itemHierarchicalIndex:i})}dispatchExpandChange(t,e,i){l.dispatchEvent(this.props.onExpandChange,t,this,{item:e,itemHierarchicalIndex:i})}dispatchItemClick(t,e,i){l.dispatchEvent(this.props.onItemClick,t,this,{item:e,itemHierarchicalIndex:i})}refocusDueToFocusIdField(){if(this.fieldsSvc&&this.fieldsSvc.focusIdField){const t=this.state.focusedItemPublicId;if(t){const e=this.props.getFocusHierarchicalIndex?this.props.getFocusHierarchicalIndex(t):l.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,i)=>t[e]!==void 0&&t[e]!==!0&&t[e]!==!1&&t[e]!=="true"&&t[e]!=="false"?new Error("Invalid prop `"+e+"` supplied to `"+i+"`. Validation failed."):null,"aria-label":a.string,"aria-labelledby":a.string,size:a.oneOf([null,"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:"medium"};let I=c;exports.TreeView=I;
|
package/TreeView.mjs
CHANGED
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as o from "react";
|
|
10
10
|
import a from "prop-types";
|
|
11
|
-
import { treeIdUtils as u, validatePackage as f, TreeFieldsService as g, classNames as
|
|
11
|
+
import { treeIdUtils as u, validatePackage as f, TreeFieldsService as g, classNames as F, Keys as d, hasChildren as b, dispatchEvent as p, resolveItemId as E, kendoThemeMaps as C, isEnabledAndAllParentsEnabled as v } from "@progress/kendo-react-common";
|
|
12
12
|
import D from "./utils/getItemIdUponKeyboardNavigation.mjs";
|
|
13
13
|
import { TreeViewItem as x } from "./TreeViewItem.mjs";
|
|
14
14
|
import { packageMetadata as k } from "./package-metadata.mjs";
|
|
15
|
-
import { EXPAND_FIELD as S, SELECT_FIELD as y,
|
|
16
|
-
const { sizeMap:
|
|
15
|
+
import { EXPAND_FIELD as S, SELECT_FIELD as y, ICON_FIELD as w, HAS_CHILDREN_FIELD as _, CHILDREN_FIELD as I, TEXT_FIELD as L, DISABLED_FIELD as H, CHECK_FIELD as M, CHECK_INDETERMINATE_FIELD as P } from "./utils/consts.mjs";
|
|
16
|
+
const { sizeMap: R } = C, h = class h extends o.Component {
|
|
17
17
|
constructor(t) {
|
|
18
18
|
super(t), this.state = { focusedItemId: void 0, focusedItemPublicId: void 0, tabbableItemId: u.ZERO_LEVEL_ZERO_NODE_ID }, this.fieldsSvc = null, this.allowExplicitFocus = !1, this._element = null, this.onFocusDomElNeeded = (e) => {
|
|
19
19
|
this.allowExplicitFocus && this.focusDomItem(e);
|
|
@@ -27,7 +27,7 @@ const { sizeMap: P } = C, h = class h extends o.Component {
|
|
|
27
27
|
{ target: this, item: i, itemHierarchicalIndex: s }
|
|
28
28
|
);
|
|
29
29
|
}, this.onDrag = (e, i, s) => {
|
|
30
|
-
const { pageX: l, pageY:
|
|
30
|
+
const { pageX: l, pageY: n, clientX: r, clientY: c } = e;
|
|
31
31
|
this.props.onItemDragOver && this.props.onItemDragOver.call(
|
|
32
32
|
void 0,
|
|
33
33
|
{
|
|
@@ -35,13 +35,13 @@ const { sizeMap: P } = C, h = class h extends o.Component {
|
|
|
35
35
|
item: i,
|
|
36
36
|
itemHierarchicalIndex: s,
|
|
37
37
|
pageX: l,
|
|
38
|
-
pageY:
|
|
39
|
-
clientX:
|
|
38
|
+
pageY: n,
|
|
39
|
+
clientX: r,
|
|
40
40
|
clientY: c
|
|
41
41
|
}
|
|
42
42
|
);
|
|
43
43
|
}, this.onRelease = (e, i, s) => {
|
|
44
|
-
const { pageX: l, pageY:
|
|
44
|
+
const { pageX: l, pageY: n, clientX: r, clientY: c } = e;
|
|
45
45
|
this.props.onItemDragEnd && this.props.onItemDragEnd.call(
|
|
46
46
|
void 0,
|
|
47
47
|
{
|
|
@@ -49,8 +49,8 @@ const { sizeMap: P } = C, h = class h extends o.Component {
|
|
|
49
49
|
item: i,
|
|
50
50
|
itemHierarchicalIndex: s,
|
|
51
51
|
pageX: l,
|
|
52
|
-
pageY:
|
|
53
|
-
clientX:
|
|
52
|
+
pageY: n,
|
|
53
|
+
clientX: r,
|
|
54
54
|
clientY: c
|
|
55
55
|
}
|
|
56
56
|
);
|
|
@@ -99,10 +99,10 @@ const { sizeMap: P } = C, h = class h extends o.Component {
|
|
|
99
99
|
{
|
|
100
100
|
id: this.props.id,
|
|
101
101
|
style: this.props.style ? this.props.style : void 0,
|
|
102
|
-
className:
|
|
102
|
+
className: F(
|
|
103
103
|
"k-treeview",
|
|
104
104
|
{
|
|
105
|
-
[`k-treeview-${
|
|
105
|
+
[`k-treeview-${R[t] || t}`]: t,
|
|
106
106
|
"k-user-select-none": this.props.draggable,
|
|
107
107
|
"k-rtl": this.props.dir === "rtl"
|
|
108
108
|
},
|
|
@@ -140,6 +140,7 @@ const { sizeMap: P } = C, h = class h extends o.Component {
|
|
|
140
140
|
onDrag: this.onDrag,
|
|
141
141
|
onRelease: this.onRelease,
|
|
142
142
|
expandIcons: this.props.expandIcons,
|
|
143
|
+
iconField: this.props.iconField,
|
|
143
144
|
onExpandChange: this.onExpandChange,
|
|
144
145
|
onCheckChange: this.onCheckChange,
|
|
145
146
|
onContextMenu: this.onContextMenu,
|
|
@@ -160,7 +161,7 @@ const { sizeMap: P } = C, h = class h extends o.Component {
|
|
|
160
161
|
if (this.fieldsSvc === null)
|
|
161
162
|
return;
|
|
162
163
|
const i = () => this.fieldsSvc && v(this.state.focusedItemId, this.data, this.fieldsSvc);
|
|
163
|
-
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) ||
|
|
164
|
+
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) || b(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));
|
|
164
165
|
}
|
|
165
166
|
setFocus(t) {
|
|
166
167
|
if (t && this.fieldsSvc)
|
|
@@ -195,7 +196,7 @@ const { sizeMap: P } = C, h = class h extends o.Component {
|
|
|
195
196
|
if (this.fieldsSvc && this.fieldsSvc.focusIdField) {
|
|
196
197
|
const t = this.state.focusedItemPublicId;
|
|
197
198
|
if (t) {
|
|
198
|
-
const e = this.props.getFocusHierarchicalIndex ? this.props.getFocusHierarchicalIndex(t) :
|
|
199
|
+
const e = this.props.getFocusHierarchicalIndex ? this.props.getFocusHierarchicalIndex(t) : E(t, this.fieldsSvc.focusIdField, this.data, this.props.childrenField);
|
|
199
200
|
e !== this.state.focusedItemId && (this.allowExplicitFocus = !0, this.setState({ focusedItemId: e }));
|
|
200
201
|
}
|
|
201
202
|
}
|
|
@@ -226,6 +227,7 @@ h.propTypes = {
|
|
|
226
227
|
onItemClick: a.func,
|
|
227
228
|
expandField: a.string,
|
|
228
229
|
selectField: a.string,
|
|
230
|
+
iconField: a.string,
|
|
229
231
|
childrenField: a.string,
|
|
230
232
|
hasChildrenField: a.string,
|
|
231
233
|
textField: a.string,
|
|
@@ -242,12 +244,13 @@ h.propTypes = {
|
|
|
242
244
|
animate: !0,
|
|
243
245
|
expandField: S,
|
|
244
246
|
selectField: y,
|
|
245
|
-
|
|
247
|
+
iconField: w,
|
|
248
|
+
hasChildrenField: _,
|
|
246
249
|
childrenField: I,
|
|
247
|
-
textField:
|
|
250
|
+
textField: L,
|
|
248
251
|
disableField: H,
|
|
249
|
-
checkField:
|
|
250
|
-
checkIndeterminateField:
|
|
252
|
+
checkField: M,
|
|
253
|
+
checkIndeterminateField: P,
|
|
251
254
|
size: "medium"
|
|
252
255
|
};
|
|
253
256
|
let m = h;
|
package/TreeViewItem.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 client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),s=require("@progress/kendo-react-common"),o=require("@progress/kendo-svg-icons"),m=require("@progress/kendo-react-animation"),h=require("./utils/consts.js");function I(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const i=I(p),{sizeMap:u}=s.kendoThemeMaps,l=i.createContext(r=>r),d=class d extends i.Component{constructor(){super(...arguments),this.onCheckChange=e=>{this.props.onCheckChange(e,this.item,this.itemId)},this.onExpandChange=e=>{this.props.onExpandChange(e,this.item,this.itemId)},this.onItemClick=e=>{this.props.onItemClick(e,this.item,this.itemId)},this.onPress=e=>{this.props.onPress(e.event,this.item,this.itemId)},this.onDrag=e=>{this.props.onDrag(e.event,this.item,this.itemId)},this.onRelease=e=>{this.props.onRelease(e.event,this.item,this.itemId)},this.onContextMenu=e=>{this.props.onContextMenu(e,this.item,this.itemId)},this.assignDraggableMeta=e=>{e&&(e[h.DOM_KENDO_ITEM_ID_FIELD]=this.props.itemId,e[h.DOM_KENDO_TREEVIEW_GUID_FIELD]=this.props.treeGuid)}}render(){const e=this.renderSubitemsIfApplicable(),t=this.renderItemInPart();return i.createElement("li",{className:s.classNames("k-treeview-item"),tabIndex:this.tabIndex,role:"treeitem","aria-expanded":this.ariaExpanded,"aria-selected":this.ariaSelected,"aria-checked":this.ariaChecked,"aria-disabled":this.disabled?!0:void 0,ref:n=>this.itemElement=n},i.createElement("span",{className:`k-treeview-${this.props.position}`,ref:this.assignDraggableMeta},this.renderExpandIcon(),this.renderCheckbox(),this.props.draggable?i.createElement(s.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease},t):t),this.props.animate?i.createElement(m.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,style:{display:"block"},children:e}):e)}componentDidMount(){const e=this.props.focusedItemId,t=this.itemId;e&&e===t&&this.props.onFocusDomElNeeded(this.itemElement),this.checkboxElement&&(this.checkboxElement.indeterminate=this.fieldsSvc.checkIndeterminate(this.item))}componentDidUpdate(e){const t=this.props.focusedItemId;if(t&&t!==e.focusedItemId&&t===this.itemId&&this.props.onFocusDomElNeeded(this.itemElement),this.checkboxElement){const n=this.fieldsSvc.checkIndeterminate(this.item);n!==e.fieldsService.checkIndeterminate(e.item)&&(this.checkboxElement.indeterminate=n)}}renderCheckbox(){if(this.props.checkboxes){const e=this.props.size;return i.createElement("span",{className:s.classNames("k-checkbox-wrap")},i.createElement("input",{type:"checkbox",className:s.classNames("k-checkbox k-rounded-md",{[`k-checkbox-${u[e]||e}`]:e,"k-disabled":this.disabled}),"aria-label":this.item.text,checked:!!this.fieldsSvc.checked(this.item),id:this.props.id,tabIndex:-1,onChange:this.onCheckChange,ref:t=>this.checkboxElement=t}))}else return}renderExpandIcon(){return this.props.expandIcons&&(this.fieldsSvc.hasChildren(this.item)||s.hasChildren(this.item,this.fieldsSvc.getChildrenField()))&&i.createElement("span",{className:s.classNames("k-treeview-toggle",{"k-disabled":this.disabled}),onClick:this.onExpandChange},i.createElement(s.IconWrap,{...this.getIconProps()}))}renderSubitemsIfApplicable(){const e=this.fieldsSvc.children(this.item);return s.isItemExpandedAndWithChildren(this.item,this.fieldsSvc)?i.createElement("ul",{className:"k-treeview-group",role:"group"},e.map((t,n)=>i.createElement(c,{item:t,position:n===0?"top":n===e.length-1?"bot":"mid",itemId:s.treeIdUtils.createId(n,this.itemId),treeGuid:this.props.treeGuid,animate:this.props.animate,focusedItemId:this.props.focusedItemId,tabbableItemId:this.props.tabbableItemId,fieldsService:this.props.fieldsService,itemUI:this.props.itemUI,checkboxes:this.props.checkboxes,ariaMultiSelectable:this.props.ariaMultiSelectable,onItemClick:this.props.onItemClick,onFocusDomElNeeded:this.props.onFocusDomElNeeded,draggable:this.props.draggable,onPress:this.props.onPress,onDrag:this.props.onDrag,onRelease:this.props.onRelease,expandIcons:this.props.expandIcons,iconField:this.props.iconField,onExpandChange:this.props.onExpandChange,onCheckChange:this.props.onCheckChange,onContextMenu:this.props.onContextMenu,key:n,size:this.props.size,disabled:this.disabled,isRtl:this.props.isRtl}))):void 0}renderItemInPart(){const e=this.props.iconField,t=e&&this.item[e];return i.createElement("span",{className:s.classNames("k-treeview-leaf",{"k-focus":this.props.focusedItemId===this.itemId,"k-selected":this.fieldsSvc.selected(this.item),"k-disabled":this.disabled}),style:{touchAction:"none"},onClick:this.onItemClick,onContextMenu:this.onContextMenu},t&&i.createElement(s.IconWrap,{name:t.name,icon:t}),i.createElement("span",{className:"k-treeview-leaf-text"},this.props.itemUI?i.createElement(this.props.itemUI,{item:this.item,itemHierarchicalIndex:this.itemId}):this.fieldsSvc.text(this.item)))}get fieldsSvc(){return this.props.fieldsService}get itemId(){return this.props.itemId}get item(){return this.props.item}get tabIndex(){return(this.props.focusedItemId||this.props.tabbableItemId)===this.itemId?0:-1}get ariaExpanded(){return this.fieldsSvc.hasChildren(this.item)||s.hasChildren(this.item,this.fieldsSvc.getChildrenField())?!!this.fieldsSvc.expanded(this.item):void 0}get disabled(){return this.props.disabled||this.fieldsSvc.disabled(this.item)}get ariaChecked(){if(this.props.checkboxes)return this.fieldsSvc.checked(this.item)?"true":this.fieldsSvc.checkIndeterminate(this.item)?"mixed":"false"}get ariaSelected(){return this.fieldsSvc.selected(this.item)?!0:this.props.ariaMultiSelectable?this.disabled?void 0:!1:void 0}getIconProps(){const e=this.fieldsSvc.expanded(this.item);return e&&!s.hasChildren(this.item,this.fieldsSvc.getChildrenField())?{name:"loading"}:e?{name:"caret-alt-down",icon:o.caretAltDownIcon}:{name:this.props.isRtl?"caret-alt-left":"caret-alt-right",icon:this.props.isRtl?o.caretAltLeftIcon:o.caretAltRightIcon}}};d.defaultProps={position:"top",iconField:"svgIcon"};let a=d;const c=s.withIdHOC(i.forwardRef((r,e)=>{const n=i.useContext(l).call(void 0,r);return i.createElement(a,{ref:e,...n})}));c.displayName="TreeViewItem";exports.TreeViewItem=c;exports.TreeViewItemPropsContext=l;
|
package/TreeViewItem.mjs
CHANGED
|
@@ -7,11 +7,11 @@
|
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
9
|
import * as t from "react";
|
|
10
|
-
import { classNames as
|
|
11
|
-
import { caretAltDownIcon as
|
|
10
|
+
import { classNames as n, Draggable as l, hasChildren as o, IconWrap as d, isItemExpandedAndWithChildren as p, treeIdUtils as m, withIdHOC as I, kendoThemeMaps as u } from "@progress/kendo-react-common";
|
|
11
|
+
import { caretAltDownIcon as f, caretAltLeftIcon as b, caretAltRightIcon as k } from "@progress/kendo-svg-icons";
|
|
12
12
|
import { Reveal as g } from "@progress/kendo-react-animation";
|
|
13
13
|
import { DOM_KENDO_ITEM_ID_FIELD as x, DOM_KENDO_TREEVIEW_GUID_FIELD as E } from "./utils/consts.mjs";
|
|
14
|
-
const { sizeMap: C } = u, v = t.createContext((
|
|
14
|
+
const { sizeMap: C } = u, v = t.createContext((r) => r), h = class h extends t.Component {
|
|
15
15
|
constructor() {
|
|
16
16
|
super(...arguments), this.onCheckChange = (e) => {
|
|
17
17
|
this.props.onCheckChange(e, this.item, this.itemId);
|
|
@@ -36,7 +36,7 @@ const { sizeMap: C } = u, v = t.createContext((n) => n), h = class h extends t.C
|
|
|
36
36
|
return /* @__PURE__ */ t.createElement(
|
|
37
37
|
"li",
|
|
38
38
|
{
|
|
39
|
-
className:
|
|
39
|
+
className: n("k-treeview-item"),
|
|
40
40
|
tabIndex: this.tabIndex,
|
|
41
41
|
role: "treeitem",
|
|
42
42
|
"aria-expanded": this.ariaExpanded,
|
|
@@ -45,7 +45,7 @@ const { sizeMap: C } = u, v = t.createContext((n) => n), h = class h extends t.C
|
|
|
45
45
|
"aria-disabled": this.disabled ? !0 : void 0,
|
|
46
46
|
ref: (s) => this.itemElement = s
|
|
47
47
|
},
|
|
48
|
-
/* @__PURE__ */ t.createElement("
|
|
48
|
+
/* @__PURE__ */ t.createElement("span", { className: `k-treeview-${this.props.position}`, ref: this.assignDraggableMeta }, this.renderExpandIcon(), this.renderCheckbox(), this.props.draggable ? /* @__PURE__ */ t.createElement(l, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease }, i) : i),
|
|
49
49
|
this.props.animate ? /* @__PURE__ */ t.createElement(
|
|
50
50
|
g,
|
|
51
51
|
{
|
|
@@ -71,11 +71,11 @@ const { sizeMap: C } = u, v = t.createContext((n) => n), h = class h extends t.C
|
|
|
71
71
|
renderCheckbox() {
|
|
72
72
|
if (this.props.checkboxes) {
|
|
73
73
|
const e = this.props.size;
|
|
74
|
-
return /* @__PURE__ */ t.createElement("
|
|
74
|
+
return /* @__PURE__ */ t.createElement("span", { className: n("k-checkbox-wrap") }, /* @__PURE__ */ t.createElement(
|
|
75
75
|
"input",
|
|
76
76
|
{
|
|
77
77
|
type: "checkbox",
|
|
78
|
-
className:
|
|
78
|
+
className: n(
|
|
79
79
|
"k-checkbox k-rounded-md",
|
|
80
80
|
{
|
|
81
81
|
[`k-checkbox-${C[e] || e}`]: e,
|
|
@@ -89,7 +89,7 @@ const { sizeMap: C } = u, v = t.createContext((n) => n), h = class h extends t.C
|
|
|
89
89
|
onChange: this.onCheckChange,
|
|
90
90
|
ref: (i) => this.checkboxElement = i
|
|
91
91
|
}
|
|
92
|
-
)
|
|
92
|
+
));
|
|
93
93
|
} else
|
|
94
94
|
return;
|
|
95
95
|
}
|
|
@@ -98,12 +98,12 @@ const { sizeMap: C } = u, v = t.createContext((n) => n), h = class h extends t.C
|
|
|
98
98
|
// or if the item actually has children, then render the icon.
|
|
99
99
|
(this.fieldsSvc.hasChildren(this.item) || o(this.item, this.fieldsSvc.getChildrenField())) && // Allowing the toggle-button even with `disabled=true` might be a valid case!
|
|
100
100
|
// Re-evaluate the classes bellow if such scenario occurs
|
|
101
|
-
/* @__PURE__ */ t.createElement("span", { className:
|
|
101
|
+
/* @__PURE__ */ t.createElement("span", { className: n("k-treeview-toggle", { "k-disabled": this.disabled }), onClick: this.onExpandChange }, /* @__PURE__ */ t.createElement(d, { ...this.getIconProps() }));
|
|
102
102
|
}
|
|
103
103
|
renderSubitemsIfApplicable() {
|
|
104
104
|
const e = this.fieldsSvc.children(this.item);
|
|
105
105
|
return p(this.item, this.fieldsSvc) ? /* @__PURE__ */ t.createElement("ul", { className: "k-treeview-group", role: "group" }, e.map((i, s) => /* @__PURE__ */ t.createElement(
|
|
106
|
-
|
|
106
|
+
c,
|
|
107
107
|
{
|
|
108
108
|
item: i,
|
|
109
109
|
position: s === 0 ? "top" : s === e.length - 1 ? "bot" : "mid",
|
|
@@ -123,6 +123,7 @@ const { sizeMap: C } = u, v = t.createContext((n) => n), h = class h extends t.C
|
|
|
123
123
|
onDrag: this.props.onDrag,
|
|
124
124
|
onRelease: this.props.onRelease,
|
|
125
125
|
expandIcons: this.props.expandIcons,
|
|
126
|
+
iconField: this.props.iconField,
|
|
126
127
|
onExpandChange: this.props.onExpandChange,
|
|
127
128
|
onCheckChange: this.props.onCheckChange,
|
|
128
129
|
onContextMenu: this.props.onContextMenu,
|
|
@@ -134,10 +135,11 @@ const { sizeMap: C } = u, v = t.createContext((n) => n), h = class h extends t.C
|
|
|
134
135
|
))) : void 0;
|
|
135
136
|
}
|
|
136
137
|
renderItemInPart() {
|
|
138
|
+
const e = this.props.iconField, i = e && this.item[e];
|
|
137
139
|
return /* @__PURE__ */ t.createElement(
|
|
138
140
|
"span",
|
|
139
141
|
{
|
|
140
|
-
className:
|
|
142
|
+
className: n(
|
|
141
143
|
"k-treeview-leaf",
|
|
142
144
|
{
|
|
143
145
|
"k-focus": this.props.focusedItemId === this.itemId,
|
|
@@ -149,6 +151,7 @@ const { sizeMap: C } = u, v = t.createContext((n) => n), h = class h extends t.C
|
|
|
149
151
|
onClick: this.onItemClick,
|
|
150
152
|
onContextMenu: this.onContextMenu
|
|
151
153
|
},
|
|
154
|
+
i && /* @__PURE__ */ t.createElement(d, { name: i.name, icon: i }),
|
|
152
155
|
/* @__PURE__ */ t.createElement("span", { className: "k-treeview-leaf-text" }, this.props.itemUI ? /* @__PURE__ */ t.createElement(this.props.itemUI, { item: this.item, itemHierarchicalIndex: this.itemId }) : this.fieldsSvc.text(this.item))
|
|
153
156
|
);
|
|
154
157
|
}
|
|
@@ -179,15 +182,16 @@ const { sizeMap: C } = u, v = t.createContext((n) => n), h = class h extends t.C
|
|
|
179
182
|
}
|
|
180
183
|
getIconProps() {
|
|
181
184
|
const e = this.fieldsSvc.expanded(this.item);
|
|
182
|
-
return e && !o(this.item, this.fieldsSvc.getChildrenField()) ? { name: "loading" } : e ? { name: "caret-alt-down", icon:
|
|
185
|
+
return e && !o(this.item, this.fieldsSvc.getChildrenField()) ? { name: "loading" } : e ? { name: "caret-alt-down", icon: f } : { name: this.props.isRtl ? "caret-alt-left" : "caret-alt-right", icon: this.props.isRtl ? b : k };
|
|
183
186
|
}
|
|
184
187
|
};
|
|
185
188
|
h.defaultProps = {
|
|
186
|
-
position: "top"
|
|
189
|
+
position: "top",
|
|
190
|
+
iconField: "svgIcon"
|
|
187
191
|
};
|
|
188
192
|
let a = h;
|
|
189
|
-
const
|
|
190
|
-
const s = t.useContext(v).call(void 0,
|
|
193
|
+
const c = I(t.forwardRef((r, e) => {
|
|
194
|
+
const s = t.useContext(v).call(void 0, r);
|
|
191
195
|
return /* @__PURE__ */ t.createElement(
|
|
192
196
|
a,
|
|
193
197
|
{
|
|
@@ -196,8 +200,8 @@ const d = I(t.forwardRef((n, e) => {
|
|
|
196
200
|
}
|
|
197
201
|
);
|
|
198
202
|
}));
|
|
199
|
-
|
|
203
|
+
c.displayName = "TreeViewItem";
|
|
200
204
|
export {
|
|
201
|
-
|
|
205
|
+
c as TreeViewItem,
|
|
202
206
|
v as TreeViewItemPropsContext
|
|
203
207
|
};
|
|
@@ -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
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-animation")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-svg-icons","@progress/kendo-react-animation"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactTreeview={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoSvgIcons,e.KendoReactAnimation)}(this,(function(e,t,i,s,n,r){"use strict";function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var a=d(t);function o(e,t,i,n,r){switch(n){case s.Keys.left:return s.treeIdUtils.isIdZeroLevel(t)||r.expanded(e)&&s.isEnabledAndAllParentsEnabled(t,i,r)?t:s.treeIdUtils.getDirectParentId(t);case s.Keys.right:return s.isItemExpandedAndWithChildren(e,r)?s.treeIdUtils.getFirstChildId(t):t;case s.Keys.up:return function(){const e=Number(s.treeIdUtils.getShortId(t)),n=s.treeIdUtils.getDirectParentId(t);return e?c(s.treeIdUtils.createId(e-1,n),i,r):s.treeIdUtils.isIdZeroLevel(t)?t:n}();case s.Keys.down:return s.isItemExpandedAndWithChildren(e,r)?s.treeIdUtils.getFirstChildId(t):l(t,i,r)||t;case s.Keys.home:return s.treeIdUtils.ZERO_LEVEL_ZERO_NODE_ID;case s.Keys.end:return function(){let e,t=(i.length-1).toString(),n=i[i.length-1];for(;s.isItemExpandedAndWithChildren(n,r);)e=n[r.getChildrenField()],t=s.treeIdUtils.createId(e.length-1,t),n=e[e.length-1];return t}();default:return t}}function l(e,t,i){const n=s.treeIdUtils.getDirectParentId(e),r=n?s.treeIdUtils.getItemById(n,t,i.getChildrenField()):void 0,d=r?r[i.getChildrenField()]:t,a=Number(s.treeIdUtils.getShortId(e));return a<d.length-1?s.treeIdUtils.createId(a+1,n):r?l(n,t,i):void 0}function c(e,t,i){const n=s.treeIdUtils.getItemById(e,t,i.getChildrenField());return s.isItemExpandedAndWithChildren(n,i)?c(s.treeIdUtils.createId(n[i.getChildrenField()].length-1,e),t,i):e}const h="expanded",p="items",m="selected",u="checked",I="checkIndeterminate",f="_kendoItemId",g="_kendoTreeViewGuid",{sizeMap:b}=s.kendoThemeMaps,v=a.createContext((e=>e)),C=class extends a.Component{constructor(){super(...arguments),this.onCheckChange=e=>{this.props.onCheckChange(e,this.item,this.itemId)},this.onExpandChange=e=>{this.props.onExpandChange(e,this.item,this.itemId)},this.onItemClick=e=>{this.props.onItemClick(e,this.item,this.itemId)},this.onPress=e=>{this.props.onPress(e.event,this.item,this.itemId)},this.onDrag=e=>{this.props.onDrag(e.event,this.item,this.itemId)},this.onRelease=e=>{this.props.onRelease(e.event,this.item,this.itemId)},this.onContextMenu=e=>{this.props.onContextMenu(e,this.item,this.itemId)},this.assignDraggableMeta=e=>{e&&(e[f]=this.props.itemId,e[g]=this.props.treeGuid)}}render(){const e=this.renderSubitemsIfApplicable(),t=this.renderItemInPart();return a.createElement("li",{className:s.classNames("k-treeview-item"),tabIndex:this.tabIndex,role:"treeitem","aria-expanded":this.ariaExpanded,"aria-selected":this.ariaSelected,"aria-checked":this.ariaChecked,"aria-disabled":!!this.disabled||void 0,ref:e=>this.itemElement=e},a.createElement("div",{className:`k-treeview-${this.props.position}`,ref:this.assignDraggableMeta},this.renderExpandIcon(),this.renderCheckbox(),this.props.draggable?a.createElement(s.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease},t):t),this.props.animate?a.createElement(r.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,style:{display:"block"},children:e}):e)}componentDidMount(){const e=this.props.focusedItemId,t=this.itemId;e&&e===t&&this.props.onFocusDomElNeeded(this.itemElement),this.checkboxElement&&(this.checkboxElement.indeterminate=this.fieldsSvc.checkIndeterminate(this.item))}componentDidUpdate(e){const t=this.props.focusedItemId;if(t&&t!==e.focusedItemId&&t===this.itemId&&this.props.onFocusDomElNeeded(this.itemElement),this.checkboxElement){const t=this.fieldsSvc.checkIndeterminate(this.item);t!==e.fieldsService.checkIndeterminate(e.item)&&(this.checkboxElement.indeterminate=t)}}renderCheckbox(){if(this.props.checkboxes){const e=this.props.size;return a.createElement("div",{className:s.classNames("k-checkbox-wrap")},a.createElement("input",{type:"checkbox",className:s.classNames("k-checkbox k-rounded-md",{[`k-checkbox-${b[e]||e}`]:e,"k-disabled":this.disabled}),"aria-label":this.item.text,checked:!!this.fieldsSvc.checked(this.item),id:this.props.id,tabIndex:-1,onChange:this.onCheckChange,ref:e=>this.checkboxElement=e}),a.createElement("label",{className:"k-checkbox-label",htmlFor:this.props.id}))}}renderExpandIcon(){return this.props.expandIcons&&(this.fieldsSvc.hasChildren(this.item)||s.hasChildren(this.item,this.fieldsSvc.getChildrenField()))&&a.createElement("span",{className:s.classNames("k-treeview-toggle",{"k-disabled":this.disabled}),onClick:this.onExpandChange},a.createElement(s.IconWrap,{...this.getIconProps()}))}renderSubitemsIfApplicable(){const e=this.fieldsSvc.children(this.item);return s.isItemExpandedAndWithChildren(this.item,this.fieldsSvc)?a.createElement("ul",{className:"k-treeview-group",role:"group"},e.map(((t,i)=>a.createElement(k,{item:t,position:0===i?"top":i===e.length-1?"bot":"mid",itemId:s.treeIdUtils.createId(i,this.itemId),treeGuid:this.props.treeGuid,animate:this.props.animate,focusedItemId:this.props.focusedItemId,tabbableItemId:this.props.tabbableItemId,fieldsService:this.props.fieldsService,itemUI:this.props.itemUI,checkboxes:this.props.checkboxes,ariaMultiSelectable:this.props.ariaMultiSelectable,onItemClick:this.props.onItemClick,onFocusDomElNeeded:this.props.onFocusDomElNeeded,draggable:this.props.draggable,onPress:this.props.onPress,onDrag:this.props.onDrag,onRelease:this.props.onRelease,expandIcons:this.props.expandIcons,onExpandChange:this.props.onExpandChange,onCheckChange:this.props.onCheckChange,onContextMenu:this.props.onContextMenu,key:i,size:this.props.size,disabled:this.disabled,isRtl:this.props.isRtl})))):void 0}renderItemInPart(){return a.createElement("span",{className:s.classNames("k-treeview-leaf",{"k-focus":this.props.focusedItemId===this.itemId,"k-selected":this.fieldsSvc.selected(this.item),"k-disabled":this.disabled}),style:{touchAction:"none"},onClick:this.onItemClick,onContextMenu:this.onContextMenu},a.createElement("span",{className:"k-treeview-leaf-text"},this.props.itemUI?a.createElement(this.props.itemUI,{item:this.item,itemHierarchicalIndex:this.itemId}):this.fieldsSvc.text(this.item)))}get fieldsSvc(){return this.props.fieldsService}get itemId(){return this.props.itemId}get item(){return this.props.item}get tabIndex(){return(this.props.focusedItemId||this.props.tabbableItemId)===this.itemId?0:-1}get ariaExpanded(){return this.fieldsSvc.hasChildren(this.item)||s.hasChildren(this.item,this.fieldsSvc.getChildrenField())?!!this.fieldsSvc.expanded(this.item):void 0}get disabled(){return this.props.disabled||this.fieldsSvc.disabled(this.item)}get ariaChecked(){if(this.props.checkboxes)return this.fieldsSvc.checked(this.item)?"true":this.fieldsSvc.checkIndeterminate(this.item)?"mixed":"false"}get ariaSelected(){return!!this.fieldsSvc.selected(this.item)||(this.props.ariaMultiSelectable?!!this.disabled&&void 0:void 0)}getIconProps(){const e=this.fieldsSvc.expanded(this.item);return e&&!s.hasChildren(this.item,this.fieldsSvc.getChildrenField())?{name:"loading"}:e?{name:"caret-alt-down",icon:n.caretAltDownIcon}:{name:this.props.isRtl?"caret-alt-left":"caret-alt-right",icon:this.props.isRtl?n.caretAltLeftIcon:n.caretAltRightIcon}}};C.defaultProps={position:"top"};let x=C;const k=s.withIdHOC(a.forwardRef(((e,t)=>{const i=a.useContext(v).call(void 0,e);return a.createElement(x,{ref:t,...i})})));k.displayName="TreeViewItem";const E={name:"@progress/kendo-react-treeview",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},{sizeMap:F}=s.kendoThemeMaps,y=class extends a.Component{constructor(e){super(e),this.state={focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:s.treeIdUtils.ZERO_LEVEL_ZERO_NODE_ID},this.fieldsSvc=null,this.allowExplicitFocus=!1,this._element=null,this.onFocusDomElNeeded=e=>{this.allowExplicitFocus&&this.focusDomItem(e)},this.onCheckChange=(e,t,i)=>{this.setFocus(i),this.dispatchCheckChange(e,t,i)},this.onExpandChange=(e,t,i)=>{this.setFocus(i),this.dispatchExpandChange(e,t,i)},this.onPress=(e,t,i)=>{this.props.onItemDragStart&&this.props.onItemDragStart.call(void 0,{target:this,item:t,itemHierarchicalIndex:i})},this.onDrag=(e,t,i)=>{const{pageX:s,pageY:n,clientX:r,clientY:d}=e;this.props.onItemDragOver&&this.props.onItemDragOver.call(void 0,{target:this,item:t,itemHierarchicalIndex:i,pageX:s,pageY:n,clientX:r,clientY:d})},this.onRelease=(e,t,i)=>{const{pageX:s,pageY:n,clientX:r,clientY:d}=e;this.props.onItemDragEnd&&this.props.onItemDragEnd.call(void 0,{target:this,item:t,itemHierarchicalIndex:i,pageX:s,pageY:n,clientX:r,clientY:d})},this.onItemClick=(e,t,i)=>{this.setFocus(i),this.dispatchItemClick(e,t,i)},this.onFocus=()=>{clearTimeout(this.blurRequest),void 0===this.state.focusedItemId&&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 t=this.getFocusedItem();if(t&&this.fieldsSvc){const i=o(t,this.state.focusedItemId,this.data,e.keyCode,this.fieldsSvc);i!==this.state.focusedItemId&&(e.preventDefault(),this.allowExplicitFocus=!0,this.setFocus(i)),this.dispatchEventsOnKeyDown(e,t)}},this.onContextMenu=(e,t,i)=>{if(this.props.onContextMenu){const s={target:this,syntheticEvent:e,nativeEvent:e.nativeEvent,item:t,itemID:i};this.props.onContextMenu.call(void 0,s)}},s.validatePackage(E)}get treeGuid(){return this.props.id+"-accessibility-id"}get element(){return this._element}render(){this.fieldsSvc=new s.TreeFieldsService(this.props);const{size:e,className:t}=this.props;return a.createElement("div",{id:this.props.id,style:this.props.style?this.props.style:void 0,className:s.classNames("k-treeview",{[`k-treeview-${F[e]||e}`]:e,"k-user-select-none":this.props.draggable,"k-rtl":"rtl"===this.props.dir},t),onKeyDown:this.onKeyDown,onFocus:this.onFocus,onBlur:this.onBlur,role:"tree","aria-multiselectable":!!this.ariaMultiSelectable||void 0,"aria-label":this.props["aria-label"],"aria-labelledby":this.props["aria-labelledby"],ref:e=>this._element=e,tabIndex:this.props.tabIndex},a.createElement("ul",{className:"k-treeview-lines k-treeview-group",role:"group"},this.data.map(((t,i)=>a.createElement(k,{id:this.props.id+"-item-"+i,item:t,position:0===i?"top":i===this.data.length-1?"bot":"mid",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,onExpandChange:this.onExpandChange,onCheckChange:this.onCheckChange,onContextMenu:this.onContextMenu,key:i,size:e,isRtl:"rtl"===this.props.dir})))))}componentDidUpdate(){this.allowExplicitFocus=!1,this.refocusDueToFocusIdField()}dispatchEventsOnKeyDown(e,t){if(null===this.fieldsSvc)return;const i=()=>this.fieldsSvc&&s.isEnabledAndAllParentsEnabled(this.state.focusedItemId,this.data,this.fieldsSvc);e.keyCode===s.Keys.left&&this.fieldsSvc.expanded(t)&&i()||e.keyCode===s.Keys.right&&!this.fieldsSvc.expanded(t)&&(this.fieldsSvc.hasChildren(t)||s.hasChildren(t,this.props.childrenField))&&i()?this.dispatchExpandChange(e,t,this.state.focusedItemId):e.keyCode===s.Keys.enter&&i()?this.dispatchItemClick(e,t,this.state.focusedItemId):e.keyCode===s.Keys.space&&i()&&(e.preventDefault(),this.dispatchCheckChange(e,t,this.state.focusedItemId))}setFocus(e){if(e&&this.fieldsSvc)if(this.fieldsSvc.focusIdField){const t=this.getItemById(e);this.setState({focusedItemId:e,focusedItemPublicId:this.fieldsSvc.focusId(t)})}else this.setState({focusedItemId:e});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(e){return s.treeIdUtils.getItemById(e,this.data,this.props.childrenField||p)}dispatchCheckChange(e,t,i){s.dispatchEvent(this.props.onCheckChange,e,this,{item:t,itemHierarchicalIndex:i})}dispatchExpandChange(e,t,i){s.dispatchEvent(this.props.onExpandChange,e,this,{item:t,itemHierarchicalIndex:i})}dispatchItemClick(e,t,i){s.dispatchEvent(this.props.onItemClick,e,this,{item:t,itemHierarchicalIndex:i})}refocusDueToFocusIdField(){if(this.fieldsSvc&&this.fieldsSvc.focusIdField){const e=this.state.focusedItemPublicId;if(e){const t=this.props.getFocusHierarchicalIndex?this.props.getFocusHierarchicalIndex(e):s.resolveItemId(e,this.fieldsSvc.focusIdField,this.data,this.props.childrenField);t!==this.state.focusedItemId&&(this.allowExplicitFocus=!0,this.setState({focusedItemId:t}))}}}get ariaMultiSelectable(){return!0===this.props["aria-multiselectable"]||"true"===this.props["aria-multiselectable"]}get data(){return this.props.data||[]}focusDomItem(e){e.focus()}get guid(){return this.treeGuid}};y.propTypes={data:i.arrayOf(i.any),animate:i.bool,tabIndex:i.number,focusIdField:i.string,getHierarchicalIndexById:i.func,onExpandChange:i.func,onItemClick:i.func,expandField:i.string,selectField:i.string,childrenField:i.string,hasChildrenField:i.string,textField:i.string,disableField:i.string,item:i.any,"aria-multiselectable":(e,t,i)=>void 0!==e[t]&&!0!==e[t]&&!1!==e[t]&&"true"!==e[t]&&"false"!==e[t]?new Error("Invalid prop `"+t+"` supplied to `"+i+"`. Validation failed."):null,"aria-label":i.string,"aria-labelledby":i.string,size:i.oneOf([null,"small","medium","large"]),dir:i.string},y.defaultProps={animate:!0,expandField:h,selectField:m,hasChildrenField:"hasChildren",childrenField:p,textField:"text",disableField:"disabled",checkField:u,checkIndeterminateField:I,size:"medium"};let D=y;function S(e,t,i,n,r){if(i){let{ids:d,field:a}=w(i,t);return function(e,t,i,n,r){let d=e;return t.forEach((e=>{d=s.updateItem(d,e,(e=>N(i,e)),n,r)})),d}(e,!s.isArray(i)&&i.idField?s.resolveItemsIds(d,i.idField,e,r):d,a,n,r)}return e}function w(e,t){let i,n;return s.isArray(e)?(i=e,n=t):(i=e.ids||[],n=e.operationField||t),{ids:i,field:n}}function N(e,t){const i=(e||"").split(".");let s=t;for(let e=0;e<i.length;e++){const t=i[e];if(e===i.length-1)s[t]=!0;else{if(void 0===s[t])return;s[t]={...s[t]},s=s[t]}}}function P(e,t,i){if(i&&!s.isArray(i)&&i.applyCheckIndeterminate){const{field:n}=w(i,u),r=i.checkIndeterminateField||I;for(let i=0;i<e.length;i++){const d=e[i],a=d[t];a&&U(a,s.getNestedValue(n,d)?[]:[d],t,n,r)}}}function U(e,t,i,n,r){let d=!1;for(let a=0;a<e.length;a++){const o=e[a];if(s.getNestedValue(n,o)){if(!d)for(let e=0;e<t.length;e++)N(r,t[e]);d=!0,o[i]&&U(o[i],[],i,n,r)}else o[i]&&U(o[i],d?[o]:t.concat([o]),i,n,r)}}const M=class extends a.PureComponent{constructor(){super(...arguments),this.state={visible:!1,top:0,left:0,text:"",operationClassName:"cancel"}}render(){const e={top:this.state.top+"px",left:this.state.left+"px"};return this.state.visible&&a.createElement("div",{className:"k-header k-drag-clue",style:{...this.props.style,...e}},a.createElement(s.IconWrap,{className:s.classNames("k-drag-status"),name:this.state.operationClassName&&s.toIconName(this.state.operationClassName),icon:"k-i-plus"===this.state.operationClassName?n.plusIcon:"k-i-insert-up"===this.state.operationClassName?n.insertTopIcon:"k-i-insert-down"===this.state.operationClassName?n.insertBottomIcon:"k-i-insert-middle"===this.state.operationClassName?n.insertMiddleIcon:n.cancelIcon}),this.state.text)}show(e,t,i,s){this.setState({visible:!0,top:e,left:t,text:i,operationClassName:s})}hide(){this.setState({visible:!1})}};M.defaultProps={style:{display:"block",position:"absolute",zIndex:2e4,padding:"4px 6px"}};let R=M;const T=s.withIdHOC(D);T.displayName="KendoReactTreeView",Object.defineProperty(e,"FieldsService",{enumerable:!0,get:function(){return s.TreeFieldsService}}),e.TreeView=T,e.TreeViewClassComponent=D,e.TreeViewDragAnalyzer=class{constructor(e){this.event=e,this.initialized=!1,this.destItemId="",this.destTreeViewGuid="",this.itemId=e.itemHierarchicalIndex,this.treeViewGuid=e.target.guid}init(){return this.initialized||(this.setDestimationMeta(document.elementFromPoint(this.event.clientX,this.event.clientY)),this.initialized=!0),this}get isDropAllowed(){return!!(this.initialized&&this.destItemId&&this.destTreeViewGuid)&&!`${this.destTreeViewGuid}_${this.destItemId}_`.startsWith(`${this.treeViewGuid}_${this.itemId}_`)}get destinationMeta(){return{itemHierarchicalIndex:this.destItemId,treeViewGuid:this.destTreeViewGuid}}getDropOperation(){if(this.initialized&&this.isDropAllowed){const{top:e,height:t}=this.destDomNodeWithMeta.getBoundingClientRect();return e+t-this.event.clientY<6?"after":this.event.clientY-e<6?"before":"child"}}setDestimationMeta(e){let t=e;for(;t&&!t[f];)t=t.parentNode;t&&t[f]&&(this.destDomNodeWithMeta=t,this.destItemId=t[f],this.destTreeViewGuid=t[g])}},e.TreeViewDragClue=R,e.TreeViewItemPropsContext=v,e.getItemIdUponKeyboardNavigation=o,e.handleTreeViewCheckChange=function(e,t,i,n={},r){if(!i||!i.length)return[];const{ids:d,idField:a}=function(e){let t,i;return s.isArray(e)?t=e:(t=e.ids||[],i=e.idField),{ids:t,idField:i}}(t),o=a?s.getNestedValue(a,e.item):e.itemHierarchicalIndex,l=d.indexOf(o),c=-1===l,h=r||p;let m;return n.singleMode?m=c?[o]:[]:(m=d.slice(),c?m.push(o):m.splice(l,1),n.checkChildren&&function(e,t,i,n,r,d){s.getAllDirectIndirectChildrenIds(e,t,r,n).forEach((e=>{i&&-1===d.indexOf(e)?d.push(e):!i&&d.indexOf(e)>-1&&d.splice(d.indexOf(e),1)}))}(e.item,e.itemHierarchicalIndex,c,a,h,m),n.checkParents&&function(e,t,i,n,r,d){const a=h();let o=a.next();function l(){for(;!o.done;){const{id:e,item:t}=o.value;if(-1!==r.indexOf(e)||!s.areAllDirectChildrenChecked(t,e,i,n,r))break;r.push(e),o=a.next()}}function c(){for(;!o.done;){const{id:e}=o.value,t=r.indexOf(e);if(!(t>-1))break;r.splice(t,1),o=a.next()}}function*h(){if(i){const r=s.getAllParents(e,n,d);for(let e=r.length-1;e>-1;e--)yield{id:s.getNestedValue(i,r[e]),item:t?r[e]:void 0}}else{let i=s.treeIdUtils.getDirectParentId(e);for(;i;)yield{id:i,item:t?s.treeIdUtils.getItemById(i,d,n):void 0},i=s.treeIdUtils.getDirectParentId(i)}}t?l():c()}(e.itemHierarchicalIndex,c,a,h,m,i)),s.isArray(t)?m:Object.assign({},t,{ids:m})},e.moveTreeViewItem=function(e,t,i,n,r,d){const a=d||p;if(!function(){if(!t||!t.length||!e||!n||r&&!r.length)return!1;const i=r&&r!==t?r:t;return!!s.treeIdUtils.getItemById(n,i,a)}())return l();const o=s.treeIdUtils.getItemById(e,t,a);if(!o)return l();if(r&&r!==t){return{sourceData:s.removeItem(e,a,t),targetData:s.addItem(o,i,a,n,r)}}{if(`${n}_`.startsWith(`${e}_`))return l();const d=s.removeItem(e,a,t),c=s.addItem(o,i,a,s.treeIdUtils.getDecrementedItemIdAfterRemoval(e,n),d);return r?{sourceData:c,targetData:c}:c}function l(){return r?{sourceData:t,targetData:r}:t}},e.processTreeViewItems=function(e,t){if(!e||!e.length)return[];let i=e;const s=t.cloneField||"cloned",n=t.expandField||h,r=t.selectField||m,d=t.checkField||u,a=t.childrenField||p;return i=S(i,n,t.expand,s,a),i=S(i,r,t.select,s,a),i=S(i,d,t.check,s,a),P(i,a,t.check),i}}));
|
|
8
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-animation")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-svg-icons","@progress/kendo-react-animation"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactTreeview={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoSvgIcons,e.KendoReactAnimation)}(this,(function(e,t,i,s,n,r){"use strict";function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var a=d(t);function o(e,t,i,n,r){switch(n){case s.Keys.left:return s.treeIdUtils.isIdZeroLevel(t)||r.expanded(e)&&s.isEnabledAndAllParentsEnabled(t,i,r)?t:s.treeIdUtils.getDirectParentId(t);case s.Keys.right:return s.isItemExpandedAndWithChildren(e,r)?s.treeIdUtils.getFirstChildId(t):t;case s.Keys.up:return function(){const e=Number(s.treeIdUtils.getShortId(t)),n=s.treeIdUtils.getDirectParentId(t);return e?c(s.treeIdUtils.createId(e-1,n),i,r):s.treeIdUtils.isIdZeroLevel(t)?t:n}();case s.Keys.down:return s.isItemExpandedAndWithChildren(e,r)?s.treeIdUtils.getFirstChildId(t):l(t,i,r)||t;case s.Keys.home:return s.treeIdUtils.ZERO_LEVEL_ZERO_NODE_ID;case s.Keys.end:return function(){let e,t=(i.length-1).toString(),n=i[i.length-1];for(;s.isItemExpandedAndWithChildren(n,r);)e=n[r.getChildrenField()],t=s.treeIdUtils.createId(e.length-1,t),n=e[e.length-1];return t}();default:return t}}function l(e,t,i){const n=s.treeIdUtils.getDirectParentId(e),r=n?s.treeIdUtils.getItemById(n,t,i.getChildrenField()):void 0,d=r?r[i.getChildrenField()]:t,a=Number(s.treeIdUtils.getShortId(e));return a<d.length-1?s.treeIdUtils.createId(a+1,n):r?l(n,t,i):void 0}function c(e,t,i){const n=s.treeIdUtils.getItemById(e,t,i.getChildrenField());return s.isItemExpandedAndWithChildren(n,i)?c(s.treeIdUtils.createId(n[i.getChildrenField()].length-1,e),t,i):e}const h="expanded",p="items",m="selected",u="checked",I="checkIndeterminate",g="_kendoItemId",f="_kendoTreeViewGuid",{sizeMap:b}=s.kendoThemeMaps,v=a.createContext((e=>e)),C=class extends a.Component{constructor(){super(...arguments),this.onCheckChange=e=>{this.props.onCheckChange(e,this.item,this.itemId)},this.onExpandChange=e=>{this.props.onExpandChange(e,this.item,this.itemId)},this.onItemClick=e=>{this.props.onItemClick(e,this.item,this.itemId)},this.onPress=e=>{this.props.onPress(e.event,this.item,this.itemId)},this.onDrag=e=>{this.props.onDrag(e.event,this.item,this.itemId)},this.onRelease=e=>{this.props.onRelease(e.event,this.item,this.itemId)},this.onContextMenu=e=>{this.props.onContextMenu(e,this.item,this.itemId)},this.assignDraggableMeta=e=>{e&&(e[g]=this.props.itemId,e[f]=this.props.treeGuid)}}render(){const e=this.renderSubitemsIfApplicable(),t=this.renderItemInPart();return a.createElement("li",{className:s.classNames("k-treeview-item"),tabIndex:this.tabIndex,role:"treeitem","aria-expanded":this.ariaExpanded,"aria-selected":this.ariaSelected,"aria-checked":this.ariaChecked,"aria-disabled":!!this.disabled||void 0,ref:e=>this.itemElement=e},a.createElement("span",{className:`k-treeview-${this.props.position}`,ref:this.assignDraggableMeta},this.renderExpandIcon(),this.renderCheckbox(),this.props.draggable?a.createElement(s.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease},t):t),this.props.animate?a.createElement(r.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,style:{display:"block"},children:e}):e)}componentDidMount(){const e=this.props.focusedItemId,t=this.itemId;e&&e===t&&this.props.onFocusDomElNeeded(this.itemElement),this.checkboxElement&&(this.checkboxElement.indeterminate=this.fieldsSvc.checkIndeterminate(this.item))}componentDidUpdate(e){const t=this.props.focusedItemId;if(t&&t!==e.focusedItemId&&t===this.itemId&&this.props.onFocusDomElNeeded(this.itemElement),this.checkboxElement){const t=this.fieldsSvc.checkIndeterminate(this.item);t!==e.fieldsService.checkIndeterminate(e.item)&&(this.checkboxElement.indeterminate=t)}}renderCheckbox(){if(this.props.checkboxes){const e=this.props.size;return a.createElement("span",{className:s.classNames("k-checkbox-wrap")},a.createElement("input",{type:"checkbox",className:s.classNames("k-checkbox k-rounded-md",{[`k-checkbox-${b[e]||e}`]:e,"k-disabled":this.disabled}),"aria-label":this.item.text,checked:!!this.fieldsSvc.checked(this.item),id:this.props.id,tabIndex:-1,onChange:this.onCheckChange,ref:e=>this.checkboxElement=e}))}}renderExpandIcon(){return this.props.expandIcons&&(this.fieldsSvc.hasChildren(this.item)||s.hasChildren(this.item,this.fieldsSvc.getChildrenField()))&&a.createElement("span",{className:s.classNames("k-treeview-toggle",{"k-disabled":this.disabled}),onClick:this.onExpandChange},a.createElement(s.IconWrap,{...this.getIconProps()}))}renderSubitemsIfApplicable(){const e=this.fieldsSvc.children(this.item);return s.isItemExpandedAndWithChildren(this.item,this.fieldsSvc)?a.createElement("ul",{className:"k-treeview-group",role:"group"},e.map(((t,i)=>a.createElement(k,{item:t,position:0===i?"top":i===e.length-1?"bot":"mid",itemId:s.treeIdUtils.createId(i,this.itemId),treeGuid:this.props.treeGuid,animate:this.props.animate,focusedItemId:this.props.focusedItemId,tabbableItemId:this.props.tabbableItemId,fieldsService:this.props.fieldsService,itemUI:this.props.itemUI,checkboxes:this.props.checkboxes,ariaMultiSelectable:this.props.ariaMultiSelectable,onItemClick:this.props.onItemClick,onFocusDomElNeeded:this.props.onFocusDomElNeeded,draggable:this.props.draggable,onPress:this.props.onPress,onDrag:this.props.onDrag,onRelease:this.props.onRelease,expandIcons:this.props.expandIcons,iconField:this.props.iconField,onExpandChange:this.props.onExpandChange,onCheckChange:this.props.onCheckChange,onContextMenu:this.props.onContextMenu,key:i,size:this.props.size,disabled:this.disabled,isRtl:this.props.isRtl})))):void 0}renderItemInPart(){const e=this.props.iconField,t=e&&this.item[e];return a.createElement("span",{className:s.classNames("k-treeview-leaf",{"k-focus":this.props.focusedItemId===this.itemId,"k-selected":this.fieldsSvc.selected(this.item),"k-disabled":this.disabled}),style:{touchAction:"none"},onClick:this.onItemClick,onContextMenu:this.onContextMenu},t&&a.createElement(s.IconWrap,{name:t.name,icon:t}),a.createElement("span",{className:"k-treeview-leaf-text"},this.props.itemUI?a.createElement(this.props.itemUI,{item:this.item,itemHierarchicalIndex:this.itemId}):this.fieldsSvc.text(this.item)))}get fieldsSvc(){return this.props.fieldsService}get itemId(){return this.props.itemId}get item(){return this.props.item}get tabIndex(){return(this.props.focusedItemId||this.props.tabbableItemId)===this.itemId?0:-1}get ariaExpanded(){return this.fieldsSvc.hasChildren(this.item)||s.hasChildren(this.item,this.fieldsSvc.getChildrenField())?!!this.fieldsSvc.expanded(this.item):void 0}get disabled(){return this.props.disabled||this.fieldsSvc.disabled(this.item)}get ariaChecked(){if(this.props.checkboxes)return this.fieldsSvc.checked(this.item)?"true":this.fieldsSvc.checkIndeterminate(this.item)?"mixed":"false"}get ariaSelected(){return!!this.fieldsSvc.selected(this.item)||(this.props.ariaMultiSelectable?!!this.disabled&&void 0:void 0)}getIconProps(){const e=this.fieldsSvc.expanded(this.item);return e&&!s.hasChildren(this.item,this.fieldsSvc.getChildrenField())?{name:"loading"}:e?{name:"caret-alt-down",icon:n.caretAltDownIcon}:{name:this.props.isRtl?"caret-alt-left":"caret-alt-right",icon:this.props.isRtl?n.caretAltLeftIcon:n.caretAltRightIcon}}};C.defaultProps={position:"top",iconField:"svgIcon"};let x=C;const k=s.withIdHOC(a.forwardRef(((e,t)=>{const i=a.useContext(v).call(void 0,e);return a.createElement(x,{ref:t,...i})})));k.displayName="TreeViewItem";const E={name:"@progress/kendo-react-treeview",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},{sizeMap:F}=s.kendoThemeMaps,y=class extends a.Component{constructor(e){super(e),this.state={focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:s.treeIdUtils.ZERO_LEVEL_ZERO_NODE_ID},this.fieldsSvc=null,this.allowExplicitFocus=!1,this._element=null,this.onFocusDomElNeeded=e=>{this.allowExplicitFocus&&this.focusDomItem(e)},this.onCheckChange=(e,t,i)=>{this.setFocus(i),this.dispatchCheckChange(e,t,i)},this.onExpandChange=(e,t,i)=>{this.setFocus(i),this.dispatchExpandChange(e,t,i)},this.onPress=(e,t,i)=>{this.props.onItemDragStart&&this.props.onItemDragStart.call(void 0,{target:this,item:t,itemHierarchicalIndex:i})},this.onDrag=(e,t,i)=>{const{pageX:s,pageY:n,clientX:r,clientY:d}=e;this.props.onItemDragOver&&this.props.onItemDragOver.call(void 0,{target:this,item:t,itemHierarchicalIndex:i,pageX:s,pageY:n,clientX:r,clientY:d})},this.onRelease=(e,t,i)=>{const{pageX:s,pageY:n,clientX:r,clientY:d}=e;this.props.onItemDragEnd&&this.props.onItemDragEnd.call(void 0,{target:this,item:t,itemHierarchicalIndex:i,pageX:s,pageY:n,clientX:r,clientY:d})},this.onItemClick=(e,t,i)=>{this.setFocus(i),this.dispatchItemClick(e,t,i)},this.onFocus=()=>{clearTimeout(this.blurRequest),void 0===this.state.focusedItemId&&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 t=this.getFocusedItem();if(t&&this.fieldsSvc){const i=o(t,this.state.focusedItemId,this.data,e.keyCode,this.fieldsSvc);i!==this.state.focusedItemId&&(e.preventDefault(),this.allowExplicitFocus=!0,this.setFocus(i)),this.dispatchEventsOnKeyDown(e,t)}},this.onContextMenu=(e,t,i)=>{if(this.props.onContextMenu){const s={target:this,syntheticEvent:e,nativeEvent:e.nativeEvent,item:t,itemID:i};this.props.onContextMenu.call(void 0,s)}},s.validatePackage(E)}get treeGuid(){return this.props.id+"-accessibility-id"}get element(){return this._element}render(){this.fieldsSvc=new s.TreeFieldsService(this.props);const{size:e,className:t}=this.props;return a.createElement("div",{id:this.props.id,style:this.props.style?this.props.style:void 0,className:s.classNames("k-treeview",{[`k-treeview-${F[e]||e}`]:e,"k-user-select-none":this.props.draggable,"k-rtl":"rtl"===this.props.dir},t),onKeyDown:this.onKeyDown,onFocus:this.onFocus,onBlur:this.onBlur,role:"tree","aria-multiselectable":!!this.ariaMultiSelectable||void 0,"aria-label":this.props["aria-label"],"aria-labelledby":this.props["aria-labelledby"],ref:e=>this._element=e,tabIndex:this.props.tabIndex},a.createElement("ul",{className:"k-treeview-lines k-treeview-group",role:"group"},this.data.map(((t,i)=>a.createElement(k,{id:this.props.id+"-item-"+i,item:t,position:0===i?"top":i===this.data.length-1?"bot":"mid",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:e,isRtl:"rtl"===this.props.dir})))))}componentDidUpdate(){this.allowExplicitFocus=!1,this.refocusDueToFocusIdField()}dispatchEventsOnKeyDown(e,t){if(null===this.fieldsSvc)return;const i=()=>this.fieldsSvc&&s.isEnabledAndAllParentsEnabled(this.state.focusedItemId,this.data,this.fieldsSvc);e.keyCode===s.Keys.left&&this.fieldsSvc.expanded(t)&&i()||e.keyCode===s.Keys.right&&!this.fieldsSvc.expanded(t)&&(this.fieldsSvc.hasChildren(t)||s.hasChildren(t,this.props.childrenField))&&i()?this.dispatchExpandChange(e,t,this.state.focusedItemId):e.keyCode===s.Keys.enter&&i()?this.dispatchItemClick(e,t,this.state.focusedItemId):e.keyCode===s.Keys.space&&i()&&(e.preventDefault(),this.dispatchCheckChange(e,t,this.state.focusedItemId))}setFocus(e){if(e&&this.fieldsSvc)if(this.fieldsSvc.focusIdField){const t=this.getItemById(e);this.setState({focusedItemId:e,focusedItemPublicId:this.fieldsSvc.focusId(t)})}else this.setState({focusedItemId:e});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(e){return s.treeIdUtils.getItemById(e,this.data,this.props.childrenField||p)}dispatchCheckChange(e,t,i){s.dispatchEvent(this.props.onCheckChange,e,this,{item:t,itemHierarchicalIndex:i})}dispatchExpandChange(e,t,i){s.dispatchEvent(this.props.onExpandChange,e,this,{item:t,itemHierarchicalIndex:i})}dispatchItemClick(e,t,i){s.dispatchEvent(this.props.onItemClick,e,this,{item:t,itemHierarchicalIndex:i})}refocusDueToFocusIdField(){if(this.fieldsSvc&&this.fieldsSvc.focusIdField){const e=this.state.focusedItemPublicId;if(e){const t=this.props.getFocusHierarchicalIndex?this.props.getFocusHierarchicalIndex(e):s.resolveItemId(e,this.fieldsSvc.focusIdField,this.data,this.props.childrenField);t!==this.state.focusedItemId&&(this.allowExplicitFocus=!0,this.setState({focusedItemId:t}))}}}get ariaMultiSelectable(){return!0===this.props["aria-multiselectable"]||"true"===this.props["aria-multiselectable"]}get data(){return this.props.data||[]}focusDomItem(e){e.focus()}get guid(){return this.treeGuid}};y.propTypes={data:i.arrayOf(i.any),animate:i.bool,tabIndex:i.number,focusIdField:i.string,getHierarchicalIndexById:i.func,onExpandChange:i.func,onItemClick:i.func,expandField:i.string,selectField:i.string,iconField:i.string,childrenField:i.string,hasChildrenField:i.string,textField:i.string,disableField:i.string,item:i.any,"aria-multiselectable":(e,t,i)=>void 0!==e[t]&&!0!==e[t]&&!1!==e[t]&&"true"!==e[t]&&"false"!==e[t]?new Error("Invalid prop `"+t+"` supplied to `"+i+"`. Validation failed."):null,"aria-label":i.string,"aria-labelledby":i.string,size:i.oneOf([null,"small","medium","large"]),dir:i.string},y.defaultProps={animate:!0,expandField:h,selectField:m,iconField:"svgIcon",hasChildrenField:"hasChildren",childrenField:p,textField:"text",disableField:"disabled",checkField:u,checkIndeterminateField:I,size:"medium"};let D=y;function S(e,t,i,n,r){if(i){let{ids:d,field:a}=w(i,t);return function(e,t,i,n,r){let d=e;return t.forEach((e=>{d=s.updateItem(d,e,(e=>N(i,e)),n,r)})),d}(e,!s.isArray(i)&&i.idField?s.resolveItemsIds(d,i.idField,e,r):d,a,n,r)}return e}function w(e,t){let i,n;return s.isArray(e)?(i=e,n=t):(i=e.ids||[],n=e.operationField||t),{ids:i,field:n}}function N(e,t){const i=(e||"").split(".");let s=t;for(let e=0;e<i.length;e++){const t=i[e];if(e===i.length-1)s[t]=!0;else{if(void 0===s[t])return;s[t]={...s[t]},s=s[t]}}}function P(e,t,i,n,r){let d=!1;for(let a=0;a<e.length;a++){const o=e[a];if(s.getNestedValue(n,o)){if(!d)for(let e=0;e<t.length;e++)N(r,t[e]);d=!0,o[i]&&P(o[i],[],i,n,r)}else o[i]&&P(o[i],d?[o]:t.concat([o]),i,n,r)}}const U=class extends a.PureComponent{constructor(){super(...arguments),this.state={visible:!1,top:0,left:0,text:"",operationClassName:"cancel"}}render(){const e={top:this.state.top+"px",left:this.state.left+"px"};return this.state.visible&&a.createElement("div",{className:"k-header k-drag-clue",style:{...this.props.style,...e}},a.createElement(s.IconWrap,{className:s.classNames("k-drag-status"),name:this.state.operationClassName&&s.toIconName(this.state.operationClassName),icon:"k-i-plus"===this.state.operationClassName?n.plusIcon:"k-i-insert-up"===this.state.operationClassName?n.insertTopIcon:"k-i-insert-down"===this.state.operationClassName?n.insertBottomIcon:"k-i-insert-middle"===this.state.operationClassName?n.insertMiddleIcon:n.cancelIcon}),this.state.text)}show(e,t,i,s){this.setState({visible:!0,top:e,left:t,text:i,operationClassName:s})}hide(){this.setState({visible:!1})}};U.defaultProps={style:{display:"block",position:"absolute",zIndex:2e4,padding:"4px 6px"}};let M=U;const R=s.withIdHOC(D);R.displayName="KendoReactTreeView",Object.defineProperty(e,"FieldsService",{enumerable:!0,get:function(){return s.TreeFieldsService}}),e.TreeView=R,e.TreeViewClassComponent=D,e.TreeViewDragAnalyzer=class{constructor(e){this.event=e,this.initialized=!1,this.destItemId="",this.destTreeViewGuid="",this.itemId=e.itemHierarchicalIndex,this.treeViewGuid=e.target.guid}init(){return this.initialized||(this.setDestimationMeta(document.elementFromPoint(this.event.clientX,this.event.clientY)),this.initialized=!0),this}get isDropAllowed(){return!!(this.initialized&&this.destItemId&&this.destTreeViewGuid)&&!`${this.destTreeViewGuid}_${this.destItemId}_`.startsWith(`${this.treeViewGuid}_${this.itemId}_`)}get destinationMeta(){return{itemHierarchicalIndex:this.destItemId,treeViewGuid:this.destTreeViewGuid}}getDropOperation(){if(this.initialized&&this.isDropAllowed){const{top:e,height:t}=this.destDomNodeWithMeta.getBoundingClientRect();return e+t-this.event.clientY<6?"after":this.event.clientY-e<6?"before":"child"}}setDestimationMeta(e){let t=e;for(;t&&!t[g];)t=t.parentNode;t&&t[g]&&(this.destDomNodeWithMeta=t,this.destItemId=t[g],this.destTreeViewGuid=t[f])}},e.TreeViewDragClue=M,e.TreeViewItemPropsContext=v,e.getItemIdUponKeyboardNavigation=o,e.handleTreeViewCheckChange=function(e,t,i,n={},r){if(!i||!i.length)return[];const{ids:d,idField:a}=function(e){let t,i;return s.isArray(e)?t=e:(t=e.ids||[],i=e.idField),{ids:t,idField:i}}(t),o=a?s.getNestedValue(a,e.item):e.itemHierarchicalIndex,l=d.indexOf(o),c=-1===l,h=r||p;let m;return n.singleMode?m=c?[o]:[]:(m=d.slice(),c?m.push(o):m.splice(l,1),n.checkChildren&&function(e,t,i,n,r,d){s.getAllDirectIndirectChildrenIds(e,t,r,n).forEach((e=>{i&&-1===d.indexOf(e)?d.push(e):!i&&d.indexOf(e)>-1&&d.splice(d.indexOf(e),1)}))}(e.item,e.itemHierarchicalIndex,c,a,h,m),n.checkParents&&function(e,t,i,n,r,d){const a=h();let o=a.next();function l(){for(;!o.done;){const{id:e,item:t}=o.value;if(-1!==r.indexOf(e)||!s.areAllDirectChildrenChecked(t,e,i,n,r))break;r.push(e),o=a.next()}}function c(){for(;!o.done;){const{id:e}=o.value,t=r.indexOf(e);if(!(t>-1))break;r.splice(t,1),o=a.next()}}function*h(){if(i){const r=s.getAllParents(e,n,d);for(let e=r.length-1;e>-1;e--)yield{id:s.getNestedValue(i,r[e]),item:t?r[e]:void 0}}else{let i=s.treeIdUtils.getDirectParentId(e);for(;i;)yield{id:i,item:t?s.treeIdUtils.getItemById(i,d,n):void 0},i=s.treeIdUtils.getDirectParentId(i)}}t?l():c()}(e.itemHierarchicalIndex,c,a,h,m,i)),s.isArray(t)?m:Object.assign({},t,{ids:m})},e.moveTreeViewItem=function(e,t,i,n,r,d){const a=d||p;if(!function(){if(!t||!t.length||!e||!n||r&&!r.length)return!1;const i=r&&r!==t?r:t;return!!s.treeIdUtils.getItemById(n,i,a)}())return l();const o=s.treeIdUtils.getItemById(e,t,a);if(!o)return l();if(r&&r!==t){return{sourceData:s.removeItem(e,a,t),targetData:s.addItem(o,i,a,n,r)}}{if(`${n}_`.startsWith(`${e}_`))return l();const d=s.removeItem(e,a,t),c=s.addItem(o,i,a,s.treeIdUtils.getDecrementedItemIdAfterRemoval(e,n),d);return r?{sourceData:c,targetData:c}:c}function l(){return r?{sourceData:t,targetData:r}:t}},e.processTreeViewItems=function(e,t){if(!e||!e.length)return[];let i=e;const n=t.cloneField||"cloned",r=t.expandField||h,d=t.selectField||m,a=t.checkField||u,o=t.childrenField||p;return i=S(i,r,t.expand,n,o),i=S(i,d,t.select,n,o),i=S(i,a,t.check,n,o),function(e,t,i){if(i&&!s.isArray(i)&&i.applyCheckIndeterminate){const{field:n}=w(i,u),r=i.checkIndeterminateField||I;for(let i=0;i<e.length;i++){const d=e[i],a=d[t];a&&P(a,s.getNestedValue(n,d)?[]:[d],t,n,r)}}}(i,o,t.check),i}}));
|
package/index.d.mts
CHANGED
|
@@ -345,6 +345,7 @@ export declare class TreeViewClassComponent extends React_2.Component<TreeViewPr
|
|
|
345
345
|
onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
346
346
|
expandField: PropTypes.Requireable<string>;
|
|
347
347
|
selectField: PropTypes.Requireable<string>;
|
|
348
|
+
iconField: PropTypes.Requireable<string>;
|
|
348
349
|
childrenField: PropTypes.Requireable<string>;
|
|
349
350
|
hasChildrenField: PropTypes.Requireable<string>;
|
|
350
351
|
textField: PropTypes.Requireable<string>;
|
|
@@ -363,6 +364,7 @@ export declare class TreeViewClassComponent extends React_2.Component<TreeViewPr
|
|
|
363
364
|
animate: boolean;
|
|
364
365
|
expandField: string;
|
|
365
366
|
selectField: string;
|
|
367
|
+
iconField: string;
|
|
366
368
|
hasChildrenField: string;
|
|
367
369
|
childrenField: string;
|
|
368
370
|
textField: string;
|
|
@@ -878,6 +880,7 @@ declare interface TreeViewItemProps {
|
|
|
878
880
|
ariaMultiSelectable: boolean;
|
|
879
881
|
onItemClick: any;
|
|
880
882
|
expandIcons?: boolean;
|
|
883
|
+
iconField?: string;
|
|
881
884
|
onExpandChange: any;
|
|
882
885
|
onCheckChange: any;
|
|
883
886
|
checkboxes?: boolean;
|
|
@@ -1043,6 +1046,10 @@ export declare interface TreeViewProps {
|
|
|
1043
1046
|
* Specifies the name of the field which will provide a Boolean representation for the selected state of the item. Defaults to `selected`.
|
|
1044
1047
|
*/
|
|
1045
1048
|
selectField?: string;
|
|
1049
|
+
/**
|
|
1050
|
+
* Specifies the name of the field which will provide an icon for the specific TreeView item. Defaults to `svgIcon`.
|
|
1051
|
+
*/
|
|
1052
|
+
iconField?: string;
|
|
1046
1053
|
/**
|
|
1047
1054
|
* Specifies the name of the field which indicates to the TreeView that an item has children even if the children are not initially passed. Used for implementing the load-on-demand feature ([see example]({% slug databinding_treeview %}#toc-loading-data-on-demand)). Defaults to `hasChildren`.
|
|
1048
1055
|
*/
|
package/index.d.ts
CHANGED
|
@@ -345,6 +345,7 @@ export declare class TreeViewClassComponent extends React_2.Component<TreeViewPr
|
|
|
345
345
|
onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
346
346
|
expandField: PropTypes.Requireable<string>;
|
|
347
347
|
selectField: PropTypes.Requireable<string>;
|
|
348
|
+
iconField: PropTypes.Requireable<string>;
|
|
348
349
|
childrenField: PropTypes.Requireable<string>;
|
|
349
350
|
hasChildrenField: PropTypes.Requireable<string>;
|
|
350
351
|
textField: PropTypes.Requireable<string>;
|
|
@@ -363,6 +364,7 @@ export declare class TreeViewClassComponent extends React_2.Component<TreeViewPr
|
|
|
363
364
|
animate: boolean;
|
|
364
365
|
expandField: string;
|
|
365
366
|
selectField: string;
|
|
367
|
+
iconField: string;
|
|
366
368
|
hasChildrenField: string;
|
|
367
369
|
childrenField: string;
|
|
368
370
|
textField: string;
|
|
@@ -878,6 +880,7 @@ declare interface TreeViewItemProps {
|
|
|
878
880
|
ariaMultiSelectable: boolean;
|
|
879
881
|
onItemClick: any;
|
|
880
882
|
expandIcons?: boolean;
|
|
883
|
+
iconField?: string;
|
|
881
884
|
onExpandChange: any;
|
|
882
885
|
onCheckChange: any;
|
|
883
886
|
checkboxes?: boolean;
|
|
@@ -1043,6 +1046,10 @@ export declare interface TreeViewProps {
|
|
|
1043
1046
|
* Specifies the name of the field which will provide a Boolean representation for the selected state of the item. Defaults to `selected`.
|
|
1044
1047
|
*/
|
|
1045
1048
|
selectField?: string;
|
|
1049
|
+
/**
|
|
1050
|
+
* Specifies the name of the field which will provide an icon for the specific TreeView item. Defaults to `svgIcon`.
|
|
1051
|
+
*/
|
|
1052
|
+
iconField?: string;
|
|
1046
1053
|
/**
|
|
1047
1054
|
* Specifies the name of the field which indicates to the TreeView that an item has children even if the children are not initially passed. Used for implementing the load-on-demand feature ([see example]({% slug databinding_treeview %}#toc-loading-data-on-demand)). Defaults to `hasChildren`.
|
|
1048
1055
|
*/
|
package/package-metadata.mjs
CHANGED
|
@@ -10,7 +10,7 @@ const e = {
|
|
|
10
10
|
name: "@progress/kendo-react-treeview",
|
|
11
11
|
productName: "KendoReact",
|
|
12
12
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
13
|
-
publishDate:
|
|
13
|
+
publishDate: 1712928279,
|
|
14
14
|
version: "",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
16
16
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-treeview",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.5.0-develop.2",
|
|
4
4
|
"description": "React TreeView displays hierarchical data in a traditional tree structure, supports user interaction. KendoReact TreeView package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"sideEffects": false,
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@progress/kendo-licensing": "^1.3.4",
|
|
26
|
-
"@progress/kendo-react-animation": "7.
|
|
27
|
-
"@progress/kendo-react-common": "7.
|
|
26
|
+
"@progress/kendo-react-animation": "7.5.0-develop.2",
|
|
27
|
+
"@progress/kendo-react-common": "7.5.0-develop.2",
|
|
28
28
|
"@progress/kendo-svg-icons": "^2.1.0",
|
|
29
29
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
30
30
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|
package/utils/consts.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 client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E="expanded",D="text",I="disabled",_="items",e="hasChildren",L="selected",t="
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E="expanded",D="text",I="disabled",_="items",e="hasChildren",L="selected",t="svgIcon",F="checked",n="checkIndeterminate",c="_kendoItemId",s="_kendoTreeViewGuid";exports.CHECK_FIELD=F;exports.CHECK_INDETERMINATE_FIELD=n;exports.CHILDREN_FIELD=_;exports.DISABLED_FIELD=I;exports.DOM_KENDO_ITEM_ID_FIELD=c;exports.DOM_KENDO_TREEVIEW_GUID_FIELD=s;exports.EXPAND_FIELD=E;exports.HAS_CHILDREN_FIELD=e;exports.ICON_FIELD=t;exports.SELECT_FIELD=L;exports.TEXT_FIELD=D;
|
package/utils/consts.mjs
CHANGED
|
@@ -6,16 +6,17 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
const E = "expanded",
|
|
9
|
+
const E = "expanded", I = "text", e = "disabled", D = "items", _ = "hasChildren", t = "selected", n = "svgIcon", c = "checked", s = "checkIndeterminate", o = "_kendoItemId", L = "_kendoTreeViewGuid";
|
|
10
10
|
export {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
c as CHECK_FIELD,
|
|
12
|
+
s as CHECK_INDETERMINATE_FIELD,
|
|
13
|
+
D as CHILDREN_FIELD,
|
|
14
|
+
e as DISABLED_FIELD,
|
|
15
|
+
o as DOM_KENDO_ITEM_ID_FIELD,
|
|
16
16
|
L as DOM_KENDO_TREEVIEW_GUID_FIELD,
|
|
17
17
|
E as EXPAND_FIELD,
|
|
18
18
|
_ as HAS_CHILDREN_FIELD,
|
|
19
|
+
n as ICON_FIELD,
|
|
19
20
|
t as SELECT_FIELD,
|
|
20
|
-
|
|
21
|
+
I as TEXT_FIELD
|
|
21
22
|
};
|