@progress/kendo-react-treeview/TreeViewItem.js

React TreeView displays hierarchical data in a traditional tree structure, supports user interaction. KendoReact TreeView package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"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"),I=require("./utils/utils.js");function u(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=u(p),{sizeMap:b}=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),e&&(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);this.checkboxElement.indeterminate!==n&&(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-${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:t=>{this.checkboxElement=t}}))}}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:I.getNodePosition(n,e),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,"k-touch-action-none":this.props.draggable}),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(){if(this.fieldsSvc.selected(this.item))return!0;if(this.props.ariaMultiSelectable)return this.disabled?void 0:!1}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;