@progress/kendo-react-orgchart 12.0.2 → 12.0.3-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/dist/cdn/js/kendo-react-orgchart.js +1 -1
- package/index.d.mts +123 -129
- package/index.d.ts +123 -129
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +5 -5
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@progress/kendo-react-common"),require("@progress/kendo-react-layout"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("prop-types"),require("@progress/kendo-data-query")):"function"==typeof define&&define.amd?define(["exports","react","@progress/kendo-react-common","@progress/kendo-react-layout","@progress/kendo-react-buttons","@progress/kendo-svg-icons","prop-types","@progress/kendo-data-query"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactOrgchart={},e.React,e.KendoReactCommon,e.KendoReactLayout,e.KendoReactButtons,e.KendoSvgIcons,e.PropTypes,e.KendoDataQuery)}(this,(function(e,t,n,i,r,a,l,o){"use strict";function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=d(t);const c=e=>window.getComputedStyle(e).backgroundColor,u=`\n <div class="k-var--series-unset"></div>\n <div class="k-var--series">\n ${(()=>{let e='\n <div class="k-var--series-a"></div>\n <div class="k-var--series-b"></div>\n <div class="k-var--series-c"></div>\n <div class="k-var--series-d"></div>\n <div class="k-var--series-e"></div>\n <div class="k-var--series-f"></div>\n';for(let t=0;t<30;t++)e+=`\n <div class="k-var--series-${t+1}"></div>`;return e})()}\n </div>\n`;let h=class{getSeriesColors(){const e=this.element,t=[].slice.call(e.querySelectorAll(".k-var--series div")),n=c(e.querySelector(".k-var--series-unset"));return t.reduce(((e,t)=>{const i=(e=>{const t=e.match(/series-([a-z])$/);if(null!==t)return(e=>e.toLowerCase().charCodeAt(0)-97)(t[1]);const n=e.split("--series-")[1];return parseInt(n,10)-1})(t.className),r=c(t);return r!==n&&(e[i]=r),e}),[])}};const p="checked",m="checkIndeterminate",g=80,v=25,f=40,k=s.createContext({cardColors:void 0,onExpandChange:void 0,onKeyDown:void 0,onItemAction:void 0,onItemContextMenu:void 0,onItemDoubleClick:void 0,onGroupAction:void 0,onGroupBlur:void 0,onGroupFocus:void 0}),F=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...e},{navigatable:i,id:r,tabIndex:a,className:l,style:o,data:d,groupField:c,cardWidth:p,cardHeight:m,groupTitleHeight:g,groupSubtitleHeight:v,verticalLine:f,idField:F,childrenField:y,expandField:b,hasChildrenField:x,avatarField:C,titleField:E,subtitleField:w,onExpandChange:I,onItemAction:N,onItemDoubleClick:A,onItemContextMenu:L,onKeyDown:T,onGroupAction:O,onGroupBlur:R,onGroupFocus:D,cardsColors:S,ariaLabel:G,itemRender:W,groupTitleRender:M,groupSubtitleRender:K,height:H,children:B,...z}=t,q=s.useRef(null),j=s.useRef(new n.Navigation({tabIndex:a,root:q,selectors:[t.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[P,$]=s.useState([]),_=s.useRef(null);s.useEffect((()=>{if(i&&j.current.first&&j.current.first.setAttribute("tabindex",String(a)),!S){((e,t)=>{const n=new h,i=n.element=t.createElement("div");let r;i.style.display="none",i.innerHTML=u,t.body.appendChild(i);try{r=n.getSeriesColors()}finally{t.body.removeChild(n.element),delete n.element,e(r)}})((e=>{$(e)}),q.current.ownerDocument||document)}}),[i,a]);return s.createElement("div",{style:o,ref:q,className:n.classNames(l,"k-orgchart")},s.createElement(k.Provider,{value:{cardColors:S||P,onExpandChange:e.onExpandChange,onKeyDown:n=>{if(t.navigatable){const i=n.event,r=" "===i.key?"Space":i.key,a=e.groupField&&-1!==i.target.className.indexOf("k-orgchart-card")&&_.current||j.current,l=i.target.closest(a.selectors.join(","));switch(r){case"ArrowUp":((e,n,i,r)=>{var a;if(i.preventDefault(),(t.groupField?r.items.some((e=>e[t.expandField])):r.item[t.expandField])&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const t=null==(a=e.closest(".k-orgchart-group"))?void 0:a.getAttribute("id"),i=document.querySelector(`[aria-owns="${t}"]`);i?n.focusElement(i,e):n.focusPrevious(e)}})(l,a,i,n);break;case"ArrowDown":((e,n,i,r)=>{var a;i.preventDefault();const l=t.groupField?r.items.some((e=>e[t.expandField])):r.item[t.expandField],o=t.groupField?r.items.find((e=>e[t.childrenField])):r.item[t.childrenField],d=t.groupField?r.items.some((e=>t.hasChildrenField&&e[t.hasChildrenField])):t.hasChildrenField&&r.item[t.hasChildrenField],s=t.groupField?o&&o[t.childrenField]&&o[t.childrenField].length:o&&o.length;if((d||s)&&!l&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const i=t.groupField?".k-orgchart-node-group-container":".k-orgchart-card",r=e.getAttribute("aria-owns"),l=null==(a=document.getElementById(r))?void 0:a.querySelector(i);l?n.focusElement(l,e):n.focusNext(e)}})(l,a,i,n);break;case"ArrowLeft":((e,t,n)=>{n.preventDefault(),t.focusPrevious(e)})(l,a,i);break;case"ArrowRight":((e,t,n)=>{n.preventDefault(),t.focusNext(e)})(l,a,i);break;case"End":((e,t,n)=>{n.preventDefault(),t.focusElement(t.last,null)})(0,a,i);break;case"Home":((e,t,n)=>{n.preventDefault(),t.focusElement(t.first,null)})(0,a,i);break;case"Enter":((n,i,r,a)=>{r.stopPropagation();const l=-1!==n.className.indexOf("k-orgchart-node-group-container");e.groupField&&l?_.current&&_.current.first&&_.current.focusElement(_.current.first,null):t.onItemAction&&t.onItemAction({event:r,item:a.item})})(l,0,i,n);break;case"Escape":(t=>{if(e.groupField){const e=t.closest(".k-orgchart-node-group-container");e&&j.current.focusElement(e,null)}})(l)}}},onItemAction:e=>{if(e.event.stopPropagation(),N&&N.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-card");t&&j.current.focusElement(t,null)}},onItemDoubleClick:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onItemContextMenu:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onGroupAction:e=>{if(O&&O.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-node-group-container");t&&j.current.focusElement(t,null)}},onGroupBlur:e=>{_.current=null},onGroupFocus:e=>{_.current=new n.Navigation({tabIndex:0,root:e.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})}},...z},e.children))};F.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onItemDoubleClick:l.func,onItemContextMenu:l.func,onGroupAction:l.func},F.displayName="KendoClientOrgChart";const y=e=>{const{expanded:t,node:n,nodes:i}=e,l=s.useContext(k);return s.createElement(r.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?a.minusIcon:a.plusIcon,"aria-label":t?"collapse":"expand",onClick:e=>{l.onExpandChange&&l.onExpandChange.call(void 0,{event:e,expand:!t,item:n,items:i})}})},b=e=>{const{node:t,children:r,style:a,...l}=e,[o,d]=s.useState(!1),c=s.useContext(k);return s.createElement(i.Card,{orientation:null,role:"treeitem",className:n.classNames("k-orgchart-card",{"k-focus":o}),onClick:e=>{c.onItemAction&&c.onItemAction.call(void 0,{event:e,item:t})},onKeyDown:e=>{c.onKeyDown&&c.onKeyDown.call(void 0,{event:e,item:t})},onContextMenu:e=>{c.onItemContextMenu&&c.onItemContextMenu.call(void 0,{event:e,item:t})},onDoubleClick:e=>{c.onItemDoubleClick&&c.onItemDoubleClick.call(void 0,{event:e,item:t})},style:a,"aria-selected":o,"aria-keyshortcuts":"Enter",onFocus:()=>d(!0),onBlur:()=>d(!1),...l},r)},x=e=>{const{level:t,children:n}=e,r=s.useContext(k),a=r.cardColors&&r.cardColors[t]||"green";return s.createElement(i.CardBody,{className:"k-hstack",style:{borderTopColor:a}},n)},C=e=>{const{id:t,title:r,subtitle:a,level:l,childLineWidth:o,cardWidth:d,cardHeight:c,verticalLine:u,color:h,line:p,plus:m,expanded:g,node:v,avatar:f,avatarType:k,itemRender:F,showAvatar:C,...E}={avatarType:"image",...e},w=F;return s.createElement("div",{...E,className:n.classNames(e.className,"k-orgchart-node","k-vstack","k-align-items-center")},0!==l&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:u}}),s.createElement(b,{node:v,style:{width:d,height:c},"aria-level":l+1,"aria-expanded":!!g,"aria-owns":t},s.createElement(x,{level:l},w?s.createElement(w,{item:v,title:r,subtitle:a,level:l,expanded:g,color:h}):s.createElement(s.Fragment,null,C&&s.createElement(i.Avatar,{type:k,themeColor:"secondary"},"image"===k?s.createElement("img",{src:f,alt:"KendoReact Avatar Customer"}):f),s.createElement("div",{className:"k-card-title-wrap k-vstack"},s.createElement(i.CardTitle,{className:"k-text-ellipsis"},r),s.createElement("span",{className:"k-spacer"}),s.createElement(i.CardSubtitle,{className:"k-text-ellipsis"},a)),s.createElement("span",{className:"k-spacer"})))),p&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),m&&s.createElement(y,{expanded:g,node:v}),m&&!!o&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:o,marginTop:-15}}))},E=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach((t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some((e=>e[i]&&e[i].length||l&&e[l])),h=u?"horizontal":"vertical",p=u?null:n;e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),E({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}}))},w=(e,t)=>{const n=t||300,i=e.sort(((e,t)=>t.level-e.level));i.forEach((e=>{if(!e.width){const t=i.filter((t=>e.ids.includes(t.parentId))),r=t.length?Math.max(...t.map((e=>e.width||0))):n,a="horizontal"===e.orientation?e.items.length:1,l=r*a+v*(a-1);e.width=l}}))},I=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:o,verticalLine:d,idField:c,childrenField:u,hasChildrenField:h,expandField:p,avatarField:m,titleField:k,subtitleField:F,ariaLabel:y,itemRender:b,height:x,avatarType:I,showAvatar:N}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",avatarType:"image",showAvatar:!0,...e},A=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];E({dataByGroups:A,data:r,cardWidth:l,expandField:p,hasChildrenField:h,childrenField:u,idField:c,groupField:a}),w(A,l),((e,t,n)=>{const i=e.sort(((e,t)=>e.level-t.level));i.forEach((e=>{if(0===e.level)return;const r=i.find((t=>t.ids.includes(e.parentId))),a=(null==r?void 0:r.items.findIndex((t=>e.ids.includes(t[n]))))||0,l=(null==r?void 0:r.items)||[],o=r.width?(r.width-(l.length-1)*v)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach(((e,n)=>{n<a&&(t+=o+v)})),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.items.length)||1,c=(d-(s-1)*v)/s;e.width=c;const u=null==r?void 0:r.items.map((e=>{const r=e[t]?e[t].length:0,a=i.find((t=>t.ids.includes(e[n]))),l=(null==a?void 0:a.width)||0;return"vertical"!==(null==a?void 0:a.orientation)&&0!==r&&e.expanded?l-(l-(r-1)*v)/r:0}));r&&(r.childLineWidths=u)}))})(A,u,c),((e,t,n)=>{const i=t||g,r=n||f;e.forEach((e=>{const t=e.level,n=(i+r)*t+f*(t?t-1:0)-(r-f)*(t?1:0);e.top=n}))})(A,o,d);const L=((e,t,n)=>{const i=t||g,r=n||f;return Math.max(...e.map((e=>{const t=e.top||0,n=e.items.length;return t+("horizontal"===e.orientation?i+r+r:n*(i+r))})))})(A,o,d);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:x||L}},A.map((e=>{const i=e.level,r=e.items,a=e.orientation;return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?y:void 0,"aria-orientation":0===i?a:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[a]}`]:a}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${n.kendoThemeMaps.orientationMap[e.orientation]}`]:e.orientation})},r.map(((n,a)=>{const g=n[u]&&n[u].length||h&&n[h],v=g||"vertical"===e.orientation&&a!==r.length-1,y="vertical"===e.orientation&&0!==a?0:d||f,x=e.childLineWidths?Math.max(...e.childLineWidths):void 0,E=n[p];return s.createElement(C,{id:t+"-"+(i+1)+"-"+n[c],style:{width:x},itemRender:b,cardHeight:o,cardWidth:l,verticalLine:y,key:a,level:i,avatar:n[m],avatarType:I,showAvatar:N,title:n[k],subtitle:n[F],line:v,expanded:E,node:n,childLineWidth:g&&E&&"horizontal"===e.orientation?e.childLineWidths[a]:0,plus:g},n.text)}))))})))};I.displayName="KendoServerOrgChart";const N=Object.freeze({name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"12.0.2",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"}),A=e=>{const{nodes:t,children:i,style:r,...a}=e,[l,o]=s.useState(!1),d=s.useContext(k),c=s.useRef(null);return s.createElement("div",{role:"treeitem","aria-selected":l,ref:c,className:n.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":l}),style:r,onKeyDown:e=>{d.onKeyDown&&d.onKeyDown({event:e,items:t})},onClick:e=>{d.onGroupAction&&d.onGroupAction({event:e,items:t})},onFocus:e=>{o(!0),d.onGroupFocus&&d.onGroupFocus({event:e,items:t,containerRef:c})},onBlur:e=>{o(!1),d.onGroupBlur&&d.onGroupBlur({event:e,items:t})},...a},i)},L="k-orgchart-node-group-title",T="k-orgchart-node-group-subtitle",O=e=>{const{id:t,title:i,subtitle:r,line:a,plus:l,focus:o,level:d,verticalLine:c,childLineWidth:u,orientation:h,expanded:p,nodes:m,groupTitleHeight:g,groupSubtitleHeight:v,groupTitleRender:f,groupSubtitleRender:k,...F}={orientation:"horizontal",...e},b=f,x=k,C={height:g||20},E={height:v||20};return s.createElement("div",{...F,className:n.classNames(e.className,"k-orgchart-node-group","k-vstack","k-align-items-center")},0!==d&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:c}}),s.createElement(A,{nodes:m,"aria-expanded":!!p,"aria-keyshortcuts":"Enter","aria-level":d+1,"aria-owns":t},b?s.createElement(b,{style:C,className:L,title:i,items:m,level:d,expanded:p}):s.createElement("div",{className:L,style:C},i),x?s.createElement(x,{style:E,className:T,subtitle:r,items:m,level:d,expanded:p}):s.createElement("div",{className:T,style:E},r),s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container",{[`k-${n.kendoThemeMaps.orientationMap[h]||h}`]:h})},e.children)),a&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),l&&s.createElement(y,{expanded:p,nodes:m}),l&&!!u&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:u,marginTop:-15}}))},R=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach((t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some((e=>e[i]&&e[i].length||l&&e[l])),h=u?"horizontal":"vertical",p=u?null:n+50,m=e.find((e=>e.parentId===s)),g=e.find((e=>e.ids.includes(s)));let v=!1;if(m){const e=m.ids[0],n=g.items.find((t=>t[r]===e)),i=g.items.find((e=>e[r]===t[r]));v=n[o]===i[o]}m&&v?(m.ids.push(t[r]),m.items=m.items.concat(c)):e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),R({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}}))},D=(e,t)=>{const n=t||300,i=e.sort(((e,t)=>t.level-e.level));i.forEach((e=>{if(!e.width){const t=i.filter((t=>e.ids.includes(t.parentId)));if(t.length){const i=Math.max(...t.map((e=>e.width||0))),r=Math.max(...t.map((e=>e.groupedItems.length||0))),a=Math.max(...e.groupedItems.map((t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+v*(i-1)}))),l=i*r+v*(r-1);e.width=Math.max(l,a)}else{const t=Math.max(...e.groupedItems.map((t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+v*(i-1)})));e.width=t}}}))},S=(e,t,n,i,r)=>{const a=t||g,l=r||f,o=n+i+82;e.forEach((e=>{const t=e.level,n=(a+l+o)*t+f*(t?t-1:0)-(l-f)*(t?1:0);e.top=n}))},G=(e,t,n,i,r)=>{const a=t||g,l=n||f,o=(i||20)+20+82;return Math.max(...e.map((e=>{const t=e.top||0,n=Math.max(...e.groupedItems.map((e=>e.items.length))),i=e.hasChildren?f:0;return t+("horizontal"===e.orientation?a+l+o+l+i:n*(a+l)+o+l)})))},W=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:d,groupTitleHeight:c,groupSubtitleHeight:u,verticalLine:h,idField:p,childrenField:m,expandField:k,hasChildrenField:F,avatarField:y,titleField:b,subtitleField:x,cardsColors:E,ariaLabel:w,itemRender:I,groupTitleRender:N,groupSubtitleRender:A,height:L,avatarType:T,showAvatar:W}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0,...e},M=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];R({dataByGroups:M,data:r,cardWidth:l,expandField:k,hasChildrenField:F,childrenField:m,idField:p,groupField:a}),M.map((e=>{e.groupedItems=o.groupBy(e.items,[{field:a}])})),D(M,l),((e,t)=>{const n=e.sort(((e,t)=>e.level-t.level));n.forEach((e=>{var i;if(0===e.level)return;const r=n.find((t=>t.ids.includes(e.parentId))),a=(null==r?void 0:r.groupedItems.findIndex((n=>n.items.some((n=>e.ids.includes(n[t]))))))||0,l=(null==r?void 0:r.groupedItems)||[],o=r.width?(r.width-(l.length-1)*v)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach(((e,n)=>{n<a&&(t+=o+v)})),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.groupedItems.length)||1,c=(d-(s-1)*v)/s;if(e.width=c,r){const t=e.width-(e.width-(e.groupedItems.length-1)*v)/e.groupedItems.length;r.childLineWidths?null==(i=r.childLineWidths)||i.push(t):r.childLineWidths=[t]}}))})(M,p),S(M,d||g,c||20,u||20,h);const K=G(M,d||g,c||20,u||20);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:L||K}},M.map((e=>{const i=e.level,o=e.groupedItems.map((e=>{const t=e.items.some((e=>e[k]));return{...e,expanded:t}})),g=o.filter((e=>e.expanded)),L="horizontal",R=E&&E[i]||"green";return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?w:void 0,"aria-orientation":0===i?L:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[L]}`]:L}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&o.map(((n,r)=>{const k=n.items.some((e=>e[m]&&e[m].length||F&&e[F])),E=e.width?(e.width-(o.length-1)*v)/o.length:void 0,w=g.findIndex((e=>e===n));return s.createElement(O,{id:t+"-"+(i+1)+"-"+n.items[0][p],style:{width:E},groupTitleHeight:c,groupSubtitleHeight:u,groupTitleRender:N,groupSubtitleRender:A,key:r,level:i,verticalLine:h||f,title:n.items[0][a||b],subtitle:a,orientation:e.orientation,childLineWidth:k&&n.expanded&&"horizontal"===e.orientation?e.childLineWidths[w]:0,line:k,nodes:n.items,expanded:n.expanded,plus:k},n.items.map(((e,t)=>s.createElement(C,{cardHeight:d,cardWidth:l,itemRender:I,color:R,key:t,level:i,avatar:e[y],avatarType:T,showAvatar:W,title:e[b],subtitle:e[x],verticalLine:0,line:!1,node:e,childLineWidth:0,plus:!1},e.text))))})))})))};W.displayName="KendoServerGroupedOrgChart";const M=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",avatarType:"image",titleField:"title",subtitleField:"subtitle",...e},{cardsColors:i,onExpandChange:r,onKeyDown:a,onItemAction:l,onGroupAction:o,onGroupBlur:d,onGroupFocus:c,id:u,...h}=t,p=s.useRef(n.useId()),m=!n.validatePackage(N,{component:"OrgChart"}),g=n.getLicenseMessage(N);return s.createElement(F,{style:{position:"relative",...e.style},...t},e.groupField?s.createElement(W,{id:u||p.current,...h},e.children):s.createElement(I,{id:u||p.current,...h},e.children),m&&s.createElement(n.WatermarkOverlay,{message:g}))};function K(e,t,i,r,a){if(i){const{ids:l,field:o}=H(i,t);return function(e,t,i,r,a){let l=e;return t.forEach((e=>{l=n.updateItem(l,e,(e=>B(i,e)),r,a)})),l}(e,!n.isArray(i)&&i.idField?n.resolveItemsIds(l,i.idField,e,a):l,o,r,a)}return e}function H(e,t){let i,r;return n.isArray(e)?(i=e,r=t):(i=e.ids||[],r=e.operationField||t),{ids:i,field:r}}function B(e,t){const n=(e||"").split(".");let i=t;for(let e=0;e<n.length;e++){const t=n[e];if(e===n.length-1)i[t]=!0;else{if(void 0===i[t])return;i[t]={...i[t]},i=i[t]}}}function z(e,t,i){if(i&&!n.isArray(i)&&i.applyCheckIndeterminate){const{field:r}=H(i,p),a=i.checkIndeterminateField||m;for(let i=0;i<e.length;i++){const l=e[i],o=l[t];o&&q(o,n.getNestedValue(r,l)?[]:[l],t,r,a)}}}function q(e,t,i,r,a){let l=!1;for(let o=0;o<e.length;o++){const d=e[o];if(n.getNestedValue(r,d)){if(!l)for(let e=0;e<t.length;e++)B(a,t[e]);l=!0,d[i]&&q(d[i],[],i,r,a)}else d[i]&&q(d[i],l?[d]:t.concat([d]),i,r,a)}}M.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onGroupAction:l.func},M.displayName="KendoOrgChart",e.OrgChart=M,e.ServerOrgChart=I,e.ServerOrgChartGroup=O,e.ServerOrgChartNode=C,e.processOrgChartItems=function(e,t){if(!e||!e.length)return[];let n=e;const i=t.cloneField||"cloned",r=t.expandField||"expanded",a=t.selectField||"selected",l=t.checkField||p,o=t.childrenField||"items";return n=K(n,r,t.expand,i,o),n=K(n,a,t.select,i,o),n=K(n,l,t.check,i,o),z(n,o,t.check),n}}));
|
|
15
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@progress/kendo-react-common"),require("@progress/kendo-react-layout"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("prop-types"),require("@progress/kendo-data-query")):"function"==typeof define&&define.amd?define(["exports","react","@progress/kendo-react-common","@progress/kendo-react-layout","@progress/kendo-react-buttons","@progress/kendo-svg-icons","prop-types","@progress/kendo-data-query"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactOrgchart={},e.React,e.KendoReactCommon,e.KendoReactLayout,e.KendoReactButtons,e.KendoSvgIcons,e.PropTypes,e.KendoDataQuery)}(this,(function(e,t,n,i,r,a,l,o){"use strict";function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=d(t);const c=e=>window.getComputedStyle(e).backgroundColor,u=`\n <div class="k-var--series-unset"></div>\n <div class="k-var--series">\n ${(()=>{let e='\n <div class="k-var--series-a"></div>\n <div class="k-var--series-b"></div>\n <div class="k-var--series-c"></div>\n <div class="k-var--series-d"></div>\n <div class="k-var--series-e"></div>\n <div class="k-var--series-f"></div>\n';for(let t=0;t<30;t++)e+=`\n <div class="k-var--series-${t+1}"></div>`;return e})()}\n </div>\n`;let h=class{getSeriesColors(){const e=this.element,t=[].slice.call(e.querySelectorAll(".k-var--series div")),n=c(e.querySelector(".k-var--series-unset"));return t.reduce(((e,t)=>{const i=(e=>{const t=e.match(/series-([a-z])$/);if(null!==t)return(e=>e.toLowerCase().charCodeAt(0)-97)(t[1]);const n=e.split("--series-")[1];return parseInt(n,10)-1})(t.className),r=c(t);return r!==n&&(e[i]=r),e}),[])}};const p="checked",m="checkIndeterminate",g=80,v=25,f=40,k=s.createContext({cardColors:void 0,onExpandChange:void 0,onKeyDown:void 0,onItemAction:void 0,onItemContextMenu:void 0,onItemDoubleClick:void 0,onGroupAction:void 0,onGroupBlur:void 0,onGroupFocus:void 0}),F=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...e},{navigatable:i,id:r,tabIndex:a,className:l,style:o,data:d,groupField:c,cardWidth:p,cardHeight:m,groupTitleHeight:g,groupSubtitleHeight:v,verticalLine:f,idField:F,childrenField:y,expandField:b,hasChildrenField:x,avatarField:C,titleField:E,subtitleField:w,onExpandChange:I,onItemAction:N,onItemDoubleClick:A,onItemContextMenu:L,onKeyDown:T,onGroupAction:O,onGroupBlur:R,onGroupFocus:D,cardsColors:S,ariaLabel:G,itemRender:W,groupTitleRender:M,groupSubtitleRender:K,height:H,children:B,...z}=t,q=s.useRef(null),j=s.useRef(new n.Navigation({tabIndex:a,root:q,selectors:[t.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[P,$]=s.useState([]),_=s.useRef(null);s.useEffect((()=>{if(i&&j.current.first&&j.current.first.setAttribute("tabindex",String(a)),!S){((e,t)=>{const n=new h,i=n.element=t.createElement("div");let r;i.style.display="none",i.innerHTML=u,t.body.appendChild(i);try{r=n.getSeriesColors()}finally{t.body.removeChild(n.element),delete n.element,e(r)}})((e=>{$(e)}),q.current.ownerDocument||document)}}),[i,a]);return s.createElement("div",{style:o,ref:q,className:n.classNames(l,"k-orgchart")},s.createElement(k.Provider,{value:{cardColors:S||P,onExpandChange:e.onExpandChange,onKeyDown:n=>{if(t.navigatable){const i=n.event,r=" "===i.key?"Space":i.key,a=e.groupField&&-1!==i.target.className.indexOf("k-orgchart-card")&&_.current||j.current,l=i.target.closest(a.selectors.join(","));switch(r){case"ArrowUp":((e,n,i,r)=>{var a;if(i.preventDefault(),(t.groupField?r.items.some((e=>e[t.expandField])):r.item[t.expandField])&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const t=null==(a=e.closest(".k-orgchart-group"))?void 0:a.getAttribute("id"),i=document.querySelector(`[aria-owns="${t}"]`);i?n.focusElement(i,e):n.focusPrevious(e)}})(l,a,i,n);break;case"ArrowDown":((e,n,i,r)=>{var a;i.preventDefault();const l=t.groupField?r.items.some((e=>e[t.expandField])):r.item[t.expandField],o=t.groupField?r.items.find((e=>e[t.childrenField])):r.item[t.childrenField],d=t.groupField?r.items.some((e=>t.hasChildrenField&&e[t.hasChildrenField])):t.hasChildrenField&&r.item[t.hasChildrenField],s=t.groupField?o&&o[t.childrenField]&&o[t.childrenField].length:o&&o.length;if((d||s)&&!l&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const i=t.groupField?".k-orgchart-node-group-container":".k-orgchart-card",r=e.getAttribute("aria-owns"),l=null==(a=document.getElementById(r))?void 0:a.querySelector(i);l?n.focusElement(l,e):n.focusNext(e)}})(l,a,i,n);break;case"ArrowLeft":((e,t,n)=>{n.preventDefault(),t.focusPrevious(e)})(l,a,i);break;case"ArrowRight":((e,t,n)=>{n.preventDefault(),t.focusNext(e)})(l,a,i);break;case"End":((e,t,n)=>{n.preventDefault(),t.focusElement(t.last,null)})(0,a,i);break;case"Home":((e,t,n)=>{n.preventDefault(),t.focusElement(t.first,null)})(0,a,i);break;case"Enter":((n,i,r,a)=>{r.stopPropagation();const l=-1!==n.className.indexOf("k-orgchart-node-group-container");e.groupField&&l?_.current&&_.current.first&&_.current.focusElement(_.current.first,null):t.onItemAction&&t.onItemAction({event:r,item:a.item})})(l,0,i,n);break;case"Escape":(t=>{if(e.groupField){const e=t.closest(".k-orgchart-node-group-container");e&&j.current.focusElement(e,null)}})(l)}}},onItemAction:e=>{if(e.event.stopPropagation(),N&&N.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-card");t&&j.current.focusElement(t,null)}},onItemDoubleClick:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onItemContextMenu:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onGroupAction:e=>{if(O&&O.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-node-group-container");t&&j.current.focusElement(t,null)}},onGroupBlur:e=>{_.current=null},onGroupFocus:e=>{_.current=new n.Navigation({tabIndex:0,root:e.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})}},...z},e.children))};F.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onItemDoubleClick:l.func,onItemContextMenu:l.func,onGroupAction:l.func},F.displayName="KendoClientOrgChart";const y=e=>{const{expanded:t,node:n,nodes:i}=e,l=s.useContext(k);return s.createElement(r.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?a.minusIcon:a.plusIcon,"aria-label":t?"collapse":"expand",onClick:e=>{l.onExpandChange&&l.onExpandChange.call(void 0,{event:e,expand:!t,item:n,items:i})}})},b=e=>{const{node:t,children:r,style:a,...l}=e,[o,d]=s.useState(!1),c=s.useContext(k);return s.createElement(i.Card,{orientation:null,role:"treeitem",className:n.classNames("k-orgchart-card",{"k-focus":o}),onClick:e=>{c.onItemAction&&c.onItemAction.call(void 0,{event:e,item:t})},onKeyDown:e=>{c.onKeyDown&&c.onKeyDown.call(void 0,{event:e,item:t})},onContextMenu:e=>{c.onItemContextMenu&&c.onItemContextMenu.call(void 0,{event:e,item:t})},onDoubleClick:e=>{c.onItemDoubleClick&&c.onItemDoubleClick.call(void 0,{event:e,item:t})},style:a,"aria-selected":o,"aria-keyshortcuts":"Enter",onFocus:()=>d(!0),onBlur:()=>d(!1),...l},r)},x=e=>{const{level:t,children:n}=e,r=s.useContext(k),a=r.cardColors&&r.cardColors[t]||"green";return s.createElement(i.CardBody,{className:"k-hstack",style:{borderTopColor:a}},n)},C=e=>{const{id:t,title:r,subtitle:a,level:l,childLineWidth:o,cardWidth:d,cardHeight:c,verticalLine:u,color:h,line:p,plus:m,expanded:g,node:v,avatar:f,avatarType:k,itemRender:F,showAvatar:C,...E}={avatarType:"image",...e},w=F;return s.createElement("div",{...E,className:n.classNames(e.className,"k-orgchart-node","k-vstack","k-align-items-center")},0!==l&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:u}}),s.createElement(b,{node:v,style:{width:d,height:c},"aria-level":l+1,"aria-expanded":!!g,"aria-owns":t},s.createElement(x,{level:l},w?s.createElement(w,{item:v,title:r,subtitle:a,level:l,expanded:g,color:h}):s.createElement(s.Fragment,null,C&&s.createElement(i.Avatar,{type:k,themeColor:"secondary"},"image"===k?s.createElement("img",{src:f,alt:"KendoReact Avatar Customer"}):f),s.createElement("div",{className:"k-card-title-wrap k-vstack"},s.createElement(i.CardTitle,{className:"k-text-ellipsis"},r),s.createElement("span",{className:"k-spacer"}),s.createElement(i.CardSubtitle,{className:"k-text-ellipsis"},a)),s.createElement("span",{className:"k-spacer"})))),p&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),m&&s.createElement(y,{expanded:g,node:v}),m&&!!o&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:o,marginTop:-15}}))},E=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach((t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some((e=>e[i]&&e[i].length||l&&e[l])),h=u?"horizontal":"vertical",p=u?null:n;e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),E({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}}))},w=(e,t)=>{const n=t||300,i=e.sort(((e,t)=>t.level-e.level));i.forEach((e=>{if(!e.width){const t=i.filter((t=>e.ids.includes(t.parentId))),r=t.length?Math.max(...t.map((e=>e.width||0))):n,a="horizontal"===e.orientation?e.items.length:1,l=r*a+v*(a-1);e.width=l}}))},I=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:o,verticalLine:d,idField:c,childrenField:u,hasChildrenField:h,expandField:p,avatarField:m,titleField:k,subtitleField:F,ariaLabel:y,itemRender:b,height:x,avatarType:I,showAvatar:N}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",avatarType:"image",showAvatar:!0,...e},A=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];E({dataByGroups:A,data:r,cardWidth:l,expandField:p,hasChildrenField:h,childrenField:u,idField:c,groupField:a}),w(A,l),((e,t,n)=>{const i=e.sort(((e,t)=>e.level-t.level));i.forEach((e=>{if(0===e.level)return;const r=i.find((t=>t.ids.includes(e.parentId))),a=(null==r?void 0:r.items.findIndex((t=>e.ids.includes(t[n]))))||0,l=(null==r?void 0:r.items)||[],o=r.width?(r.width-(l.length-1)*v)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach(((e,n)=>{n<a&&(t+=o+v)})),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.items.length)||1,c=(d-(s-1)*v)/s;e.width=c;const u=null==r?void 0:r.items.map((e=>{const r=e[t]?e[t].length:0,a=i.find((t=>t.ids.includes(e[n]))),l=(null==a?void 0:a.width)||0;return"vertical"!==(null==a?void 0:a.orientation)&&0!==r&&e.expanded?l-(l-(r-1)*v)/r:0}));r&&(r.childLineWidths=u)}))})(A,u,c),((e,t,n)=>{const i=t||g,r=n||f;e.forEach((e=>{const t=e.level,n=(i+r)*t+f*(t?t-1:0)-(r-f)*(t?1:0);e.top=n}))})(A,o,d);const L=((e,t,n)=>{const i=t||g,r=n||f;return Math.max(...e.map((e=>{const t=e.top||0,n=e.items.length;return t+("horizontal"===e.orientation?i+r+r:n*(i+r))})))})(A,o,d);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:x||L}},A.map((e=>{const i=e.level,r=e.items,a=e.orientation;return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?y:void 0,"aria-orientation":0===i?a:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[a]}`]:a}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${n.kendoThemeMaps.orientationMap[e.orientation]}`]:e.orientation})},r.map(((n,a)=>{const g=n[u]&&n[u].length||h&&n[h],v=g||"vertical"===e.orientation&&a!==r.length-1,y="vertical"===e.orientation&&0!==a?0:d||f,x=e.childLineWidths?Math.max(...e.childLineWidths):void 0,E=n[p];return s.createElement(C,{id:t+"-"+(i+1)+"-"+n[c],style:{width:x},itemRender:b,cardHeight:o,cardWidth:l,verticalLine:y,key:a,level:i,avatar:n[m],avatarType:I,showAvatar:N,title:n[k],subtitle:n[F],line:v,expanded:E,node:n,childLineWidth:g&&E&&"horizontal"===e.orientation?e.childLineWidths[a]:0,plus:g},n.text)}))))})))};I.displayName="KendoServerOrgChart";const N=Object.freeze({name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"12.0.3-develop.2",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"}),A=e=>{const{nodes:t,children:i,style:r,...a}=e,[l,o]=s.useState(!1),d=s.useContext(k),c=s.useRef(null);return s.createElement("div",{role:"treeitem","aria-selected":l,ref:c,className:n.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":l}),style:r,onKeyDown:e=>{d.onKeyDown&&d.onKeyDown({event:e,items:t})},onClick:e=>{d.onGroupAction&&d.onGroupAction({event:e,items:t})},onFocus:e=>{o(!0),d.onGroupFocus&&d.onGroupFocus({event:e,items:t,containerRef:c})},onBlur:e=>{o(!1),d.onGroupBlur&&d.onGroupBlur({event:e,items:t})},...a},i)},L="k-orgchart-node-group-title",T="k-orgchart-node-group-subtitle",O=e=>{const{id:t,title:i,subtitle:r,line:a,plus:l,focus:o,level:d,verticalLine:c,childLineWidth:u,orientation:h,expanded:p,nodes:m,groupTitleHeight:g,groupSubtitleHeight:v,groupTitleRender:f,groupSubtitleRender:k,...F}={orientation:"horizontal",...e},b=f,x=k,C={height:g||20},E={height:v||20};return s.createElement("div",{...F,className:n.classNames(e.className,"k-orgchart-node-group","k-vstack","k-align-items-center")},0!==d&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:c}}),s.createElement(A,{nodes:m,"aria-expanded":!!p,"aria-keyshortcuts":"Enter","aria-level":d+1,"aria-owns":t},b?s.createElement(b,{style:C,className:L,title:i,items:m,level:d,expanded:p}):s.createElement("div",{className:L,style:C},i),x?s.createElement(x,{style:E,className:T,subtitle:r,items:m,level:d,expanded:p}):s.createElement("div",{className:T,style:E},r),s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container",{[`k-${n.kendoThemeMaps.orientationMap[h]||h}`]:h})},e.children)),a&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),l&&s.createElement(y,{expanded:p,nodes:m}),l&&!!u&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:u,marginTop:-15}}))},R=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach((t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some((e=>e[i]&&e[i].length||l&&e[l])),h=u?"horizontal":"vertical",p=u?null:n+50,m=e.find((e=>e.parentId===s)),g=e.find((e=>e.ids.includes(s)));let v=!1;if(m){const e=m.ids[0],n=g.items.find((t=>t[r]===e)),i=g.items.find((e=>e[r]===t[r]));v=n[o]===i[o]}m&&v?(m.ids.push(t[r]),m.items=m.items.concat(c)):e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),R({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}}))},D=(e,t)=>{const n=t||300,i=e.sort(((e,t)=>t.level-e.level));i.forEach((e=>{if(!e.width){const t=i.filter((t=>e.ids.includes(t.parentId)));if(t.length){const i=Math.max(...t.map((e=>e.width||0))),r=Math.max(...t.map((e=>e.groupedItems.length||0))),a=Math.max(...e.groupedItems.map((t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+v*(i-1)}))),l=i*r+v*(r-1);e.width=Math.max(l,a)}else{const t=Math.max(...e.groupedItems.map((t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+v*(i-1)})));e.width=t}}}))},S=(e,t,n,i,r)=>{const a=t||g,l=r||f,o=n+i+82;e.forEach((e=>{const t=e.level,n=(a+l+o)*t+f*(t?t-1:0)-(l-f)*(t?1:0);e.top=n}))},G=(e,t,n,i,r)=>{const a=t||g,l=n||f,o=(i||20)+20+82;return Math.max(...e.map((e=>{const t=e.top||0,n=Math.max(...e.groupedItems.map((e=>e.items.length))),i=e.hasChildren?f:0;return t+("horizontal"===e.orientation?a+l+o+l+i:n*(a+l)+o+l)})))},W=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:d,groupTitleHeight:c,groupSubtitleHeight:u,verticalLine:h,idField:p,childrenField:m,expandField:k,hasChildrenField:F,avatarField:y,titleField:b,subtitleField:x,cardsColors:E,ariaLabel:w,itemRender:I,groupTitleRender:N,groupSubtitleRender:A,height:L,avatarType:T,showAvatar:W}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0,...e},M=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];R({dataByGroups:M,data:r,cardWidth:l,expandField:k,hasChildrenField:F,childrenField:m,idField:p,groupField:a}),M.map((e=>{e.groupedItems=o.groupBy(e.items,[{field:a}])})),D(M,l),((e,t)=>{const n=e.sort(((e,t)=>e.level-t.level));n.forEach((e=>{var i;if(0===e.level)return;const r=n.find((t=>t.ids.includes(e.parentId))),a=(null==r?void 0:r.groupedItems.findIndex((n=>n.items.some((n=>e.ids.includes(n[t]))))))||0,l=(null==r?void 0:r.groupedItems)||[],o=r.width?(r.width-(l.length-1)*v)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach(((e,n)=>{n<a&&(t+=o+v)})),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.groupedItems.length)||1,c=(d-(s-1)*v)/s;if(e.width=c,r){const t=e.width-(e.width-(e.groupedItems.length-1)*v)/e.groupedItems.length;r.childLineWidths?null==(i=r.childLineWidths)||i.push(t):r.childLineWidths=[t]}}))})(M,p),S(M,d||g,c||20,u||20,h);const K=G(M,d||g,c||20,u||20);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:L||K}},M.map((e=>{const i=e.level,o=e.groupedItems.map((e=>{const t=e.items.some((e=>e[k]));return{...e,expanded:t}})),g=o.filter((e=>e.expanded)),L="horizontal",R=E&&E[i]||"green";return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?w:void 0,"aria-orientation":0===i?L:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[L]}`]:L}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&o.map(((n,r)=>{const k=n.items.some((e=>e[m]&&e[m].length||F&&e[F])),E=e.width?(e.width-(o.length-1)*v)/o.length:void 0,w=g.findIndex((e=>e===n));return s.createElement(O,{id:t+"-"+(i+1)+"-"+n.items[0][p],style:{width:E},groupTitleHeight:c,groupSubtitleHeight:u,groupTitleRender:N,groupSubtitleRender:A,key:r,level:i,verticalLine:h||f,title:n.items[0][a||b],subtitle:a,orientation:e.orientation,childLineWidth:k&&n.expanded&&"horizontal"===e.orientation?e.childLineWidths[w]:0,line:k,nodes:n.items,expanded:n.expanded,plus:k},n.items.map(((e,t)=>s.createElement(C,{cardHeight:d,cardWidth:l,itemRender:I,color:R,key:t,level:i,avatar:e[y],avatarType:T,showAvatar:W,title:e[b],subtitle:e[x],verticalLine:0,line:!1,node:e,childLineWidth:0,plus:!1},e.text))))})))})))};W.displayName="KendoServerGroupedOrgChart";const M=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",avatarType:"image",titleField:"title",subtitleField:"subtitle",...e},{cardsColors:i,onExpandChange:r,onKeyDown:a,onItemAction:l,onGroupAction:o,onGroupBlur:d,onGroupFocus:c,id:u,...h}=t,p=s.useRef(n.useId()),m=!n.validatePackage(N,{component:"OrgChart"}),g=n.getLicenseMessage(N);return s.createElement(F,{style:{position:"relative",...e.style},...t},e.groupField?s.createElement(W,{id:u||p.current,...h},e.children):s.createElement(I,{id:u||p.current,...h},e.children),m&&s.createElement(n.WatermarkOverlay,{message:g}))};function K(e,t,i,r,a){if(i){const{ids:l,field:o}=H(i,t);return function(e,t,i,r,a){let l=e;return t.forEach((e=>{l=n.updateItem(l,e,(e=>B(i,e)),r,a)})),l}(e,!n.isArray(i)&&i.idField?n.resolveItemsIds(l,i.idField,e,a):l,o,r,a)}return e}function H(e,t){let i,r;return n.isArray(e)?(i=e,r=t):(i=e.ids||[],r=e.operationField||t),{ids:i,field:r}}function B(e,t){const n=(e||"").split(".");let i=t;for(let e=0;e<n.length;e++){const t=n[e];if(e===n.length-1)i[t]=!0;else{if(void 0===i[t])return;i[t]={...i[t]},i=i[t]}}}function z(e,t,i){if(i&&!n.isArray(i)&&i.applyCheckIndeterminate){const{field:r}=H(i,p),a=i.checkIndeterminateField||m;for(let i=0;i<e.length;i++){const l=e[i],o=l[t];o&&q(o,n.getNestedValue(r,l)?[]:[l],t,r,a)}}}function q(e,t,i,r,a){let l=!1;for(let o=0;o<e.length;o++){const d=e[o];if(n.getNestedValue(r,d)){if(!l)for(let e=0;e<t.length;e++)B(a,t[e]);l=!0,d[i]&&q(d[i],[],i,r,a)}else d[i]&&q(d[i],l?[d]:t.concat([d]),i,r,a)}}M.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onGroupAction:l.func},M.displayName="KendoOrgChart",e.OrgChart=M,e.ServerOrgChart=I,e.ServerOrgChartGroup=O,e.ServerOrgChartNode=C,e.processOrgChartItems=function(e,t){if(!e||!e.length)return[];let n=e;const i=t.cloneField||"cloned",r=t.expandField||"expanded",a=t.selectField||"selected",l=t.checkField||p,o=t.childrenField||"items";return n=K(n,r,t.expand,i,o),n=K(n,a,t.select,i,o),n=K(n,l,t.check,i,o),z(n,o,t.check),n}}));
|
package/index.d.mts
CHANGED
|
@@ -8,133 +8,6 @@
|
|
|
8
8
|
import { JSX } from 'react/jsx-runtime';
|
|
9
9
|
import * as React_2 from 'react';
|
|
10
10
|
|
|
11
|
-
/**
|
|
12
|
-
* BaseOrgChartProps
|
|
13
|
-
*/
|
|
14
|
-
export declare interface BaseOrgChartProps {
|
|
15
|
-
/**
|
|
16
|
-
* @hidden
|
|
17
|
-
*/
|
|
18
|
-
children?: React.ReactNode;
|
|
19
|
-
/**
|
|
20
|
-
* Sets additional classes to the OrgChart.
|
|
21
|
-
*/
|
|
22
|
-
className?: string;
|
|
23
|
-
/**
|
|
24
|
-
* Sets custom id to the OrgChart.
|
|
25
|
-
*/
|
|
26
|
-
id?: string;
|
|
27
|
-
/**
|
|
28
|
-
* Sets custom aria-label to the OrgChart. The default value is "Org Chart"
|
|
29
|
-
*/
|
|
30
|
-
ariaLabel?: string;
|
|
31
|
-
/**
|
|
32
|
-
* Sets the name of the field which provides an id for the item.
|
|
33
|
-
*
|
|
34
|
-
* @default "id"
|
|
35
|
-
*/
|
|
36
|
-
idField?: string;
|
|
37
|
-
/**
|
|
38
|
-
* Sets the name of the field which provides an array representation of the item children.
|
|
39
|
-
*/
|
|
40
|
-
childrenField?: string;
|
|
41
|
-
/**
|
|
42
|
-
* Sets the name of the field which provides a Boolean representation for the expanded state of the item.
|
|
43
|
-
*
|
|
44
|
-
* @default "expanded"
|
|
45
|
-
*/
|
|
46
|
-
expandField?: string;
|
|
47
|
-
/**
|
|
48
|
-
* Sets the name of the field which provides a title representation for the item.
|
|
49
|
-
*
|
|
50
|
-
* @default "text"
|
|
51
|
-
*/
|
|
52
|
-
titleField?: string;
|
|
53
|
-
/**
|
|
54
|
-
* Sets the name of the field which indicates to the OrgChart that an item has
|
|
55
|
-
* children even if the children are not initially passed. Used for implementing the load-on-demand feature.
|
|
56
|
-
*
|
|
57
|
-
* @default undefined
|
|
58
|
-
*/
|
|
59
|
-
hasChildrenField?: string;
|
|
60
|
-
/**
|
|
61
|
-
* Sets the name of the field which provides a subtitle representation for the item.
|
|
62
|
-
*
|
|
63
|
-
* @default "subtitle"
|
|
64
|
-
*/
|
|
65
|
-
subtitleField?: string;
|
|
66
|
-
/**
|
|
67
|
-
* Sets the field which provides an avatar representation for the item.
|
|
68
|
-
*
|
|
69
|
-
* @default "avatar"
|
|
70
|
-
*/
|
|
71
|
-
avatarField?: string;
|
|
72
|
-
/**
|
|
73
|
-
* Sets the type of the Avatar that renders for the OrgChart item.
|
|
74
|
-
*
|
|
75
|
-
* @default "image"
|
|
76
|
-
*/
|
|
77
|
-
avatarType?: string;
|
|
78
|
-
/**
|
|
79
|
-
* Sets if the Avatar inside the OrgChart's cards is displayed.
|
|
80
|
-
*
|
|
81
|
-
* @default true
|
|
82
|
-
*/
|
|
83
|
-
showAvatar?: boolean;
|
|
84
|
-
/**
|
|
85
|
-
* Sets a string array with the colors for the items. By default the colors come from the current Kendo Theme.
|
|
86
|
-
*/
|
|
87
|
-
cardsColors?: string[];
|
|
88
|
-
/**
|
|
89
|
-
* Sets additional CSS styles to the OrgChart.
|
|
90
|
-
*/
|
|
91
|
-
style?: React.CSSProperties;
|
|
92
|
-
/**
|
|
93
|
-
* Sets the data of the OrgChart.
|
|
94
|
-
*/
|
|
95
|
-
data?: any[];
|
|
96
|
-
/**
|
|
97
|
-
* Sets the field by which the OrgChart data is grouped.
|
|
98
|
-
*/
|
|
99
|
-
groupField?: string;
|
|
100
|
-
/**
|
|
101
|
-
* Sets the height of the card of the OrgChart.
|
|
102
|
-
*/
|
|
103
|
-
cardHeight?: number;
|
|
104
|
-
/**
|
|
105
|
-
* Sets the width of the card of the OrgChart.
|
|
106
|
-
*/
|
|
107
|
-
cardWidth?: number;
|
|
108
|
-
/**
|
|
109
|
-
* Sets the height of the title of the grouped OrgChart.
|
|
110
|
-
*/
|
|
111
|
-
groupTitleHeight?: number;
|
|
112
|
-
/**
|
|
113
|
-
* Sets the height of the subtitle of the grouped OrgChart.
|
|
114
|
-
*/
|
|
115
|
-
groupSubtitleHeight?: number;
|
|
116
|
-
/**
|
|
117
|
-
* Sets the component that renders each of the OrgChart items.
|
|
118
|
-
*/
|
|
119
|
-
itemRender?: React.ComponentType<OrgChartItemRenderProps>;
|
|
120
|
-
/**
|
|
121
|
-
* Sets the component that renders each of the grouped OrgChart title.
|
|
122
|
-
*/
|
|
123
|
-
groupTitleRender?: React.ComponentType<OrgChartGroupTitleProps>;
|
|
124
|
-
/**
|
|
125
|
-
* Sets the component that renders each of the grouped OrgChart subtitle.
|
|
126
|
-
*/
|
|
127
|
-
groupSubtitleRender?: React.ComponentType<OrgChartGroupSubtitleProps>;
|
|
128
|
-
/**
|
|
129
|
-
* Sets the height of the vertical line of the OrgChart.
|
|
130
|
-
*/
|
|
131
|
-
verticalLine?: number;
|
|
132
|
-
/**
|
|
133
|
-
* Sets the height of the OrgChart.
|
|
134
|
-
*/
|
|
135
|
-
height?: string | number;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
11
|
/**
|
|
139
12
|
* Represents the OrgChart component.
|
|
140
13
|
*/
|
|
@@ -356,7 +229,128 @@ declare interface OrgChartOperationDescriptors {
|
|
|
356
229
|
/**
|
|
357
230
|
* Represents the props of the [KendoReact OrgChart component]({% slug overview_orgchart %}).
|
|
358
231
|
*/
|
|
359
|
-
declare interface OrgChartProps
|
|
232
|
+
declare interface OrgChartProps {
|
|
233
|
+
/**
|
|
234
|
+
* @hidden
|
|
235
|
+
*/
|
|
236
|
+
children?: React_2.ReactNode;
|
|
237
|
+
/**
|
|
238
|
+
* Sets additional classes to the OrgChart.
|
|
239
|
+
*/
|
|
240
|
+
className?: string;
|
|
241
|
+
/**
|
|
242
|
+
* Sets custom id to the OrgChart.
|
|
243
|
+
*/
|
|
244
|
+
id?: string;
|
|
245
|
+
/**
|
|
246
|
+
* Sets custom aria-label to the OrgChart. The default value is "Org Chart"
|
|
247
|
+
*/
|
|
248
|
+
ariaLabel?: string;
|
|
249
|
+
/**
|
|
250
|
+
* Sets the name of the field which provides an id for the item.
|
|
251
|
+
*
|
|
252
|
+
* @default "id"
|
|
253
|
+
*/
|
|
254
|
+
idField?: string;
|
|
255
|
+
/**
|
|
256
|
+
* Sets the name of the field which provides an array representation of the item children.
|
|
257
|
+
*/
|
|
258
|
+
childrenField?: string;
|
|
259
|
+
/**
|
|
260
|
+
* Sets the name of the field which provides a Boolean representation for the expanded state of the item.
|
|
261
|
+
*
|
|
262
|
+
* @default "expanded"
|
|
263
|
+
*/
|
|
264
|
+
expandField?: string;
|
|
265
|
+
/**
|
|
266
|
+
* Sets the name of the field which provides a title representation for the item.
|
|
267
|
+
*
|
|
268
|
+
* @default "text"
|
|
269
|
+
*/
|
|
270
|
+
titleField?: string;
|
|
271
|
+
/**
|
|
272
|
+
* Sets the name of the field which indicates to the OrgChart that an item has
|
|
273
|
+
* children even if the children are not initially passed. Used for implementing the load-on-demand feature.
|
|
274
|
+
*
|
|
275
|
+
* @default undefined
|
|
276
|
+
*/
|
|
277
|
+
hasChildrenField?: string;
|
|
278
|
+
/**
|
|
279
|
+
* Sets the name of the field which provides a subtitle representation for the item.
|
|
280
|
+
*
|
|
281
|
+
* @default "subtitle"
|
|
282
|
+
*/
|
|
283
|
+
subtitleField?: string;
|
|
284
|
+
/**
|
|
285
|
+
* Sets the field which provides an avatar representation for the item.
|
|
286
|
+
*
|
|
287
|
+
* @default "avatar"
|
|
288
|
+
*/
|
|
289
|
+
avatarField?: string;
|
|
290
|
+
/**
|
|
291
|
+
* Sets the type of the Avatar that renders for the OrgChart item.
|
|
292
|
+
*
|
|
293
|
+
* @default "image"
|
|
294
|
+
*/
|
|
295
|
+
avatarType?: string;
|
|
296
|
+
/**
|
|
297
|
+
* Sets if the Avatar inside the OrgChart's cards is displayed.
|
|
298
|
+
*
|
|
299
|
+
* @default true
|
|
300
|
+
*/
|
|
301
|
+
showAvatar?: boolean;
|
|
302
|
+
/**
|
|
303
|
+
* Sets a string array with the colors for the items. By default the colors come from the current Kendo Theme.
|
|
304
|
+
*/
|
|
305
|
+
cardsColors?: string[];
|
|
306
|
+
/**
|
|
307
|
+
* Sets additional CSS styles to the OrgChart.
|
|
308
|
+
*/
|
|
309
|
+
style?: React_2.CSSProperties;
|
|
310
|
+
/**
|
|
311
|
+
* Sets the data of the OrgChart.
|
|
312
|
+
*/
|
|
313
|
+
data?: any[];
|
|
314
|
+
/**
|
|
315
|
+
* Sets the field by which the OrgChart data is grouped.
|
|
316
|
+
*/
|
|
317
|
+
groupField?: string;
|
|
318
|
+
/**
|
|
319
|
+
* Sets the height of the card of the OrgChart.
|
|
320
|
+
*/
|
|
321
|
+
cardHeight?: number;
|
|
322
|
+
/**
|
|
323
|
+
* Sets the width of the card of the OrgChart.
|
|
324
|
+
*/
|
|
325
|
+
cardWidth?: number;
|
|
326
|
+
/**
|
|
327
|
+
* Sets the height of the title of the grouped OrgChart.
|
|
328
|
+
*/
|
|
329
|
+
groupTitleHeight?: number;
|
|
330
|
+
/**
|
|
331
|
+
* Sets the height of the subtitle of the grouped OrgChart.
|
|
332
|
+
*/
|
|
333
|
+
groupSubtitleHeight?: number;
|
|
334
|
+
/**
|
|
335
|
+
* Sets the component that renders each of the OrgChart items.
|
|
336
|
+
*/
|
|
337
|
+
itemRender?: React_2.ComponentType<OrgChartItemRenderProps>;
|
|
338
|
+
/**
|
|
339
|
+
* Sets the component that renders each of the grouped OrgChart title.
|
|
340
|
+
*/
|
|
341
|
+
groupTitleRender?: React_2.ComponentType<OrgChartGroupTitleProps>;
|
|
342
|
+
/**
|
|
343
|
+
* Sets the component that renders each of the grouped OrgChart subtitle.
|
|
344
|
+
*/
|
|
345
|
+
groupSubtitleRender?: React_2.ComponentType<OrgChartGroupSubtitleProps>;
|
|
346
|
+
/**
|
|
347
|
+
* Sets the height of the vertical line of the OrgChart.
|
|
348
|
+
*/
|
|
349
|
+
verticalLine?: number;
|
|
350
|
+
/**
|
|
351
|
+
* Sets the height of the OrgChart.
|
|
352
|
+
*/
|
|
353
|
+
height?: string | number;
|
|
360
354
|
/**
|
|
361
355
|
* Sets if the OrgChart can be navigated with the keyboard.
|
|
362
356
|
*
|
|
@@ -482,7 +476,7 @@ export declare function processOrgChartItems(data: any[] | null | undefined, ope
|
|
|
482
476
|
* @hidden
|
|
483
477
|
*/
|
|
484
478
|
export declare const ServerOrgChart: {
|
|
485
|
-
(props:
|
|
479
|
+
(props: OrgChartProps): JSX.Element;
|
|
486
480
|
displayName: string;
|
|
487
481
|
};
|
|
488
482
|
|
package/index.d.ts
CHANGED
|
@@ -8,133 +8,6 @@
|
|
|
8
8
|
import { JSX } from 'react/jsx-runtime';
|
|
9
9
|
import * as React_2 from 'react';
|
|
10
10
|
|
|
11
|
-
/**
|
|
12
|
-
* BaseOrgChartProps
|
|
13
|
-
*/
|
|
14
|
-
export declare interface BaseOrgChartProps {
|
|
15
|
-
/**
|
|
16
|
-
* @hidden
|
|
17
|
-
*/
|
|
18
|
-
children?: React.ReactNode;
|
|
19
|
-
/**
|
|
20
|
-
* Sets additional classes to the OrgChart.
|
|
21
|
-
*/
|
|
22
|
-
className?: string;
|
|
23
|
-
/**
|
|
24
|
-
* Sets custom id to the OrgChart.
|
|
25
|
-
*/
|
|
26
|
-
id?: string;
|
|
27
|
-
/**
|
|
28
|
-
* Sets custom aria-label to the OrgChart. The default value is "Org Chart"
|
|
29
|
-
*/
|
|
30
|
-
ariaLabel?: string;
|
|
31
|
-
/**
|
|
32
|
-
* Sets the name of the field which provides an id for the item.
|
|
33
|
-
*
|
|
34
|
-
* @default "id"
|
|
35
|
-
*/
|
|
36
|
-
idField?: string;
|
|
37
|
-
/**
|
|
38
|
-
* Sets the name of the field which provides an array representation of the item children.
|
|
39
|
-
*/
|
|
40
|
-
childrenField?: string;
|
|
41
|
-
/**
|
|
42
|
-
* Sets the name of the field which provides a Boolean representation for the expanded state of the item.
|
|
43
|
-
*
|
|
44
|
-
* @default "expanded"
|
|
45
|
-
*/
|
|
46
|
-
expandField?: string;
|
|
47
|
-
/**
|
|
48
|
-
* Sets the name of the field which provides a title representation for the item.
|
|
49
|
-
*
|
|
50
|
-
* @default "text"
|
|
51
|
-
*/
|
|
52
|
-
titleField?: string;
|
|
53
|
-
/**
|
|
54
|
-
* Sets the name of the field which indicates to the OrgChart that an item has
|
|
55
|
-
* children even if the children are not initially passed. Used for implementing the load-on-demand feature.
|
|
56
|
-
*
|
|
57
|
-
* @default undefined
|
|
58
|
-
*/
|
|
59
|
-
hasChildrenField?: string;
|
|
60
|
-
/**
|
|
61
|
-
* Sets the name of the field which provides a subtitle representation for the item.
|
|
62
|
-
*
|
|
63
|
-
* @default "subtitle"
|
|
64
|
-
*/
|
|
65
|
-
subtitleField?: string;
|
|
66
|
-
/**
|
|
67
|
-
* Sets the field which provides an avatar representation for the item.
|
|
68
|
-
*
|
|
69
|
-
* @default "avatar"
|
|
70
|
-
*/
|
|
71
|
-
avatarField?: string;
|
|
72
|
-
/**
|
|
73
|
-
* Sets the type of the Avatar that renders for the OrgChart item.
|
|
74
|
-
*
|
|
75
|
-
* @default "image"
|
|
76
|
-
*/
|
|
77
|
-
avatarType?: string;
|
|
78
|
-
/**
|
|
79
|
-
* Sets if the Avatar inside the OrgChart's cards is displayed.
|
|
80
|
-
*
|
|
81
|
-
* @default true
|
|
82
|
-
*/
|
|
83
|
-
showAvatar?: boolean;
|
|
84
|
-
/**
|
|
85
|
-
* Sets a string array with the colors for the items. By default the colors come from the current Kendo Theme.
|
|
86
|
-
*/
|
|
87
|
-
cardsColors?: string[];
|
|
88
|
-
/**
|
|
89
|
-
* Sets additional CSS styles to the OrgChart.
|
|
90
|
-
*/
|
|
91
|
-
style?: React.CSSProperties;
|
|
92
|
-
/**
|
|
93
|
-
* Sets the data of the OrgChart.
|
|
94
|
-
*/
|
|
95
|
-
data?: any[];
|
|
96
|
-
/**
|
|
97
|
-
* Sets the field by which the OrgChart data is grouped.
|
|
98
|
-
*/
|
|
99
|
-
groupField?: string;
|
|
100
|
-
/**
|
|
101
|
-
* Sets the height of the card of the OrgChart.
|
|
102
|
-
*/
|
|
103
|
-
cardHeight?: number;
|
|
104
|
-
/**
|
|
105
|
-
* Sets the width of the card of the OrgChart.
|
|
106
|
-
*/
|
|
107
|
-
cardWidth?: number;
|
|
108
|
-
/**
|
|
109
|
-
* Sets the height of the title of the grouped OrgChart.
|
|
110
|
-
*/
|
|
111
|
-
groupTitleHeight?: number;
|
|
112
|
-
/**
|
|
113
|
-
* Sets the height of the subtitle of the grouped OrgChart.
|
|
114
|
-
*/
|
|
115
|
-
groupSubtitleHeight?: number;
|
|
116
|
-
/**
|
|
117
|
-
* Sets the component that renders each of the OrgChart items.
|
|
118
|
-
*/
|
|
119
|
-
itemRender?: React.ComponentType<OrgChartItemRenderProps>;
|
|
120
|
-
/**
|
|
121
|
-
* Sets the component that renders each of the grouped OrgChart title.
|
|
122
|
-
*/
|
|
123
|
-
groupTitleRender?: React.ComponentType<OrgChartGroupTitleProps>;
|
|
124
|
-
/**
|
|
125
|
-
* Sets the component that renders each of the grouped OrgChart subtitle.
|
|
126
|
-
*/
|
|
127
|
-
groupSubtitleRender?: React.ComponentType<OrgChartGroupSubtitleProps>;
|
|
128
|
-
/**
|
|
129
|
-
* Sets the height of the vertical line of the OrgChart.
|
|
130
|
-
*/
|
|
131
|
-
verticalLine?: number;
|
|
132
|
-
/**
|
|
133
|
-
* Sets the height of the OrgChart.
|
|
134
|
-
*/
|
|
135
|
-
height?: string | number;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
11
|
/**
|
|
139
12
|
* Represents the OrgChart component.
|
|
140
13
|
*/
|
|
@@ -356,7 +229,128 @@ declare interface OrgChartOperationDescriptors {
|
|
|
356
229
|
/**
|
|
357
230
|
* Represents the props of the [KendoReact OrgChart component]({% slug overview_orgchart %}).
|
|
358
231
|
*/
|
|
359
|
-
declare interface OrgChartProps
|
|
232
|
+
declare interface OrgChartProps {
|
|
233
|
+
/**
|
|
234
|
+
* @hidden
|
|
235
|
+
*/
|
|
236
|
+
children?: React_2.ReactNode;
|
|
237
|
+
/**
|
|
238
|
+
* Sets additional classes to the OrgChart.
|
|
239
|
+
*/
|
|
240
|
+
className?: string;
|
|
241
|
+
/**
|
|
242
|
+
* Sets custom id to the OrgChart.
|
|
243
|
+
*/
|
|
244
|
+
id?: string;
|
|
245
|
+
/**
|
|
246
|
+
* Sets custom aria-label to the OrgChart. The default value is "Org Chart"
|
|
247
|
+
*/
|
|
248
|
+
ariaLabel?: string;
|
|
249
|
+
/**
|
|
250
|
+
* Sets the name of the field which provides an id for the item.
|
|
251
|
+
*
|
|
252
|
+
* @default "id"
|
|
253
|
+
*/
|
|
254
|
+
idField?: string;
|
|
255
|
+
/**
|
|
256
|
+
* Sets the name of the field which provides an array representation of the item children.
|
|
257
|
+
*/
|
|
258
|
+
childrenField?: string;
|
|
259
|
+
/**
|
|
260
|
+
* Sets the name of the field which provides a Boolean representation for the expanded state of the item.
|
|
261
|
+
*
|
|
262
|
+
* @default "expanded"
|
|
263
|
+
*/
|
|
264
|
+
expandField?: string;
|
|
265
|
+
/**
|
|
266
|
+
* Sets the name of the field which provides a title representation for the item.
|
|
267
|
+
*
|
|
268
|
+
* @default "text"
|
|
269
|
+
*/
|
|
270
|
+
titleField?: string;
|
|
271
|
+
/**
|
|
272
|
+
* Sets the name of the field which indicates to the OrgChart that an item has
|
|
273
|
+
* children even if the children are not initially passed. Used for implementing the load-on-demand feature.
|
|
274
|
+
*
|
|
275
|
+
* @default undefined
|
|
276
|
+
*/
|
|
277
|
+
hasChildrenField?: string;
|
|
278
|
+
/**
|
|
279
|
+
* Sets the name of the field which provides a subtitle representation for the item.
|
|
280
|
+
*
|
|
281
|
+
* @default "subtitle"
|
|
282
|
+
*/
|
|
283
|
+
subtitleField?: string;
|
|
284
|
+
/**
|
|
285
|
+
* Sets the field which provides an avatar representation for the item.
|
|
286
|
+
*
|
|
287
|
+
* @default "avatar"
|
|
288
|
+
*/
|
|
289
|
+
avatarField?: string;
|
|
290
|
+
/**
|
|
291
|
+
* Sets the type of the Avatar that renders for the OrgChart item.
|
|
292
|
+
*
|
|
293
|
+
* @default "image"
|
|
294
|
+
*/
|
|
295
|
+
avatarType?: string;
|
|
296
|
+
/**
|
|
297
|
+
* Sets if the Avatar inside the OrgChart's cards is displayed.
|
|
298
|
+
*
|
|
299
|
+
* @default true
|
|
300
|
+
*/
|
|
301
|
+
showAvatar?: boolean;
|
|
302
|
+
/**
|
|
303
|
+
* Sets a string array with the colors for the items. By default the colors come from the current Kendo Theme.
|
|
304
|
+
*/
|
|
305
|
+
cardsColors?: string[];
|
|
306
|
+
/**
|
|
307
|
+
* Sets additional CSS styles to the OrgChart.
|
|
308
|
+
*/
|
|
309
|
+
style?: React_2.CSSProperties;
|
|
310
|
+
/**
|
|
311
|
+
* Sets the data of the OrgChart.
|
|
312
|
+
*/
|
|
313
|
+
data?: any[];
|
|
314
|
+
/**
|
|
315
|
+
* Sets the field by which the OrgChart data is grouped.
|
|
316
|
+
*/
|
|
317
|
+
groupField?: string;
|
|
318
|
+
/**
|
|
319
|
+
* Sets the height of the card of the OrgChart.
|
|
320
|
+
*/
|
|
321
|
+
cardHeight?: number;
|
|
322
|
+
/**
|
|
323
|
+
* Sets the width of the card of the OrgChart.
|
|
324
|
+
*/
|
|
325
|
+
cardWidth?: number;
|
|
326
|
+
/**
|
|
327
|
+
* Sets the height of the title of the grouped OrgChart.
|
|
328
|
+
*/
|
|
329
|
+
groupTitleHeight?: number;
|
|
330
|
+
/**
|
|
331
|
+
* Sets the height of the subtitle of the grouped OrgChart.
|
|
332
|
+
*/
|
|
333
|
+
groupSubtitleHeight?: number;
|
|
334
|
+
/**
|
|
335
|
+
* Sets the component that renders each of the OrgChart items.
|
|
336
|
+
*/
|
|
337
|
+
itemRender?: React_2.ComponentType<OrgChartItemRenderProps>;
|
|
338
|
+
/**
|
|
339
|
+
* Sets the component that renders each of the grouped OrgChart title.
|
|
340
|
+
*/
|
|
341
|
+
groupTitleRender?: React_2.ComponentType<OrgChartGroupTitleProps>;
|
|
342
|
+
/**
|
|
343
|
+
* Sets the component that renders each of the grouped OrgChart subtitle.
|
|
344
|
+
*/
|
|
345
|
+
groupSubtitleRender?: React_2.ComponentType<OrgChartGroupSubtitleProps>;
|
|
346
|
+
/**
|
|
347
|
+
* Sets the height of the vertical line of the OrgChart.
|
|
348
|
+
*/
|
|
349
|
+
verticalLine?: number;
|
|
350
|
+
/**
|
|
351
|
+
* Sets the height of the OrgChart.
|
|
352
|
+
*/
|
|
353
|
+
height?: string | number;
|
|
360
354
|
/**
|
|
361
355
|
* Sets if the OrgChart can be navigated with the keyboard.
|
|
362
356
|
*
|
|
@@ -482,7 +476,7 @@ export declare function processOrgChartItems(data: any[] | null | undefined, ope
|
|
|
482
476
|
* @hidden
|
|
483
477
|
*/
|
|
484
478
|
export declare const ServerOrgChart: {
|
|
485
|
-
(props:
|
|
479
|
+
(props: OrgChartProps): JSX.Element;
|
|
486
480
|
displayName: string;
|
|
487
481
|
};
|
|
488
482
|
|
package/package-metadata.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 e=Object.freeze({name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1758614800,version:"12.0.3-develop.2",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"});exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -10,8 +10,8 @@ const e = Object.freeze({
|
|
|
10
10
|
productName: "KendoReact",
|
|
11
11
|
productCode: "KENDOUIREACT",
|
|
12
12
|
productCodes: ["KENDOUIREACT"],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: "12.0.2",
|
|
13
|
+
publishDate: 1758614800,
|
|
14
|
+
version: "12.0.3-develop.2",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
|
|
16
16
|
});
|
|
17
17
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-orgchart",
|
|
3
|
-
"version": "12.0.2",
|
|
3
|
+
"version": "12.0.3-develop.2",
|
|
4
4
|
"description": "React OrgChart renders a message to the user with information about the status of an app process. KendoReact OrgChart package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-data-query": "^1.0.0",
|
|
29
29
|
"@progress/kendo-licensing": "^1.7.0",
|
|
30
|
-
"@progress/kendo-react-buttons": "12.0.2",
|
|
31
|
-
"@progress/kendo-react-common": "12.0.2",
|
|
32
|
-
"@progress/kendo-react-layout": "12.0.2",
|
|
30
|
+
"@progress/kendo-react-buttons": "12.0.3-develop.2",
|
|
31
|
+
"@progress/kendo-react-common": "12.0.3-develop.2",
|
|
32
|
+
"@progress/kendo-react-layout": "12.0.3-develop.2",
|
|
33
33
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
34
34
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
35
35
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"package": {
|
|
56
56
|
"productName": "KendoReact",
|
|
57
57
|
"productCode": "KENDOUIREACT",
|
|
58
|
-
"publishDate":
|
|
58
|
+
"publishDate": 1758614800,
|
|
59
59
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
|
|
60
60
|
}
|
|
61
61
|
},
|