@progress/kendo-react-orgchart 15.0.1-develop.9 → 15.1.0-develop.10
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/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +5 -5
- package/server/ServerGroupedOrgChart.js +1 -1
- package/server/ServerGroupedOrgChart.mjs +59 -59
- package/server/ServerOrgChart.js +1 -1
- package/server/ServerOrgChart.mjs +34 -34
|
@@ -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=25,g=40,v=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:f,verticalLine:k,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(v.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}"]`),r=(null==i?void 0:i.querySelector(".k-orgchart-card"))||i;r?n.focusElement(r,e):n.focusPrevious(e)}})(l,a,i,n);break;case"ArrowDown":((e,n,i,r)=>{var a,l;i.preventDefault();const o=t.groupField?r.items.some(e=>e[t.expandField]):r.item[t.expandField],d=t.groupField?r.items.find(e=>e[t.childrenField]):r.item[t.childrenField],s=t.groupField?r.items.some(e=>t.hasChildrenField&&e[t.hasChildrenField]):t.hasChildrenField&&r.item[t.hasChildrenField],c=t.groupField?d&&d[t.childrenField]&&d[t.childrenField].length:d&&d.length;if((s||c)&&!o&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const i=t.groupField?".k-orgchart-node-group-container":".k-orgchart-card",r=null==(a=e.closest("[aria-owns]"))?void 0:a.getAttribute("aria-owns"),o=null==(l=document.getElementById(r))?void 0:l.querySelector(i);o?n.focusElement(o,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 k=e=>{const{expanded:t,node:n,nodes:i}=e,l=s.useContext(v);return s.createElement(r.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?a.minusIcon:a.plusIcon,role:"presentation","aria-hidden":!0,onClick:e=>{l.onExpandChange&&l.onExpandChange.call(void 0,{event:e,expand:!t,item:n,items:i})}})},F=e=>{const{node:t,children:r,style:a,...l}=e,[o,d]=s.useState(!1),c=s.useContext(v);return s.createElement(i.Card,{orientation:null,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,onFocus:()=>d(!0),onBlur:()=>d(!1),...l},r)},y=e=>{const{level:t,children:n}=e,r=s.useContext(v),a=r.cardColors&&r.cardColors[t]||"green";return s.createElement(i.CardBody,{className:"k-hstack",style:{borderTopColor:a}},n)},b=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:b,itemRender:x,showAvatar:C,...E}={avatarType:"image",...e},w=x;return s.createElement("div",{...E,className:n.classNames(e.className,"k-orgchart-node","k-vstack","k-align-items-center"),role:"treeitem","aria-level":l+1,"aria-keyshortcuts":"Enter","aria-expanded":null!=g?g:void 0,"aria-owns":void 0!==g?t:void 0,"aria-selected":!1},0!==l&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:u}}),s.createElement(F,{node:v,style:{width:d,height:c}},s.createElement(y,{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:b,themeColor:"secondary"},"image"===b?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"}),s.createElement("span",{className:"k-orgchart-card-menu",role:"button","aria-label":"Edit menu",tabIndex:-1})))),p&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),m&&s.createElement(k,{expanded:g,node:v}),m&&!!o&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:o,marginTop:-15}}))},x=({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}),x({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}})},C=(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+m*(a-1);e.width=l}})},E=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:v,titleField:f,subtitleField:k,ariaLabel:F,itemRender:y,height:E,avatarType:w,showAvatar:I}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",avatarType:"image",showAvatar:!0,...e},N=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];x({dataByGroups:N,data:r,cardWidth:l,expandField:p,hasChildrenField:h,childrenField:u,idField:c,groupField:a}),C(N,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)*m)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach((e,n)=>{n<a&&(t+=o+m)}),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)*m)/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)*m)/r:0});r&&(r.childLineWidths=u)})})(N,u,c),((e,t,n)=>{const i=t||80,r=n||g;e.forEach(e=>{const t=e.level,n=(i+r)*t+g*(t?t-1:0)-(r-g)*(t?1:0);e.top=n})})(N,o,d);const A=((e,t,n)=>{const i=t||80,r=n||g;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))}))})(N,o,d);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:E||A}},N.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?F:void 0,"aria-orientation":0===i?a:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i+1}`,"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:"presentation",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 m=n[u]&&n[u].length||h&&n[h],F=m||"vertical"===e.orientation&&a!==r.length-1,x="vertical"===e.orientation&&0!==a?0:d||g,C=e.childLineWidths?Math.max(...e.childLineWidths):void 0,E=n[p];return s.createElement(b,{id:t+"-"+(i+1)+"-"+n[c],style:{width:C},itemRender:y,cardHeight:o,cardWidth:l,verticalLine:x,key:a,level:i,avatar:n[v],avatarType:w,showAvatar:I,title:n[f],subtitle:n[k],line:F,expanded:E,node:n,childLineWidth:m&&E&&"horizontal"===e.orientation?e.childLineWidths[a]:0,plus:m},n.text)})))}))};E.displayName="KendoServerOrgChart";const w=Object.freeze({name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"15.0.1-develop.9",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"}),I=e=>{const{nodes:t,children:i,style:r,...a}=e,[l,o]=s.useState(!1),d=s.useContext(v),c=s.useRef(null);return s.createElement("div",{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)},N="k-orgchart-node-group-title",A="k-orgchart-node-group-subtitle",L=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:F,...y}={orientation:"horizontal",...e},b=f,x=F,C={height:g||20},E={height:v||20};return s.createElement("div",{...y,className:n.classNames(e.className,"k-orgchart-node-group","k-vstack","k-align-items-center"),role:"group"},0!==d&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:c}}),s.createElement(I,{nodes:m},b?s.createElement(b,{style:C,className:N,title:i,items:m,level:d,expanded:p}):s.createElement("div",{className:N,style:C},i),x?s.createElement(x,{style:E,className:A,subtitle:r,items:m,level:d,expanded:p}):s.createElement("div",{className:A,style:E},r),s.createElement("div",{role:"presentation",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(k,{expanded:p,nodes:m}),l&&!!u&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:u,marginTop:-15}}))},T=({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}),T({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}})},O=(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)+m*(i-1)})),l=i*r+m*(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)+m*(i-1)}));e.width=t}}})},R=(e,t,n,i,r)=>{const a=t,l=r||g,o=n+i+82;e.forEach(e=>{const t=e.level,n=(a+l+o)*t+g*(t?t-1:0)-(l-g)*(t?1:0);e.top=n})},D=(e,t,n,i,r)=>{const a=t,l=n,o=i+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?g:0;return t+("horizontal"===e.orientation?a+l+o+l+i:n*(a+l)+o+l)}))},S=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:d,groupTitleHeight:c,groupSubtitleHeight:u,verticalLine:h,idField:p,childrenField:v,expandField:f,hasChildrenField:k,avatarField:F,titleField:y,subtitleField:x,cardsColors:C,ariaLabel:E,itemRender:w,groupTitleRender:I,groupSubtitleRender:N,height:A,avatarType:S,showAvatar:G}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0,...e},W=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];T({dataByGroups:W,data:r,cardWidth:l,expandField:f,hasChildrenField:k,childrenField:v,idField:p,groupField:a}),W.map(e=>{e.groupedItems=o.groupBy(e.items,[{field:a}])}),O(W,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)*m)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach((e,n)=>{n<a&&(t+=o+m)}),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)*m)/s;if(e.width=c,r){const t=e.width-(e.width-(e.groupedItems.length-1)*m)/e.groupedItems.length;r.childLineWidths?null==(i=r.childLineWidths)||i.push(t):r.childLineWidths=[t]}})})(W,p),R(W,d||80,c||20,u||20,h);const M=D(W,d||80,c||20,u||20);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:A||M}},W.map(e=>{const i=e.level,o=e.groupedItems.map(e=>{const t=e.items.some(e=>e[f]);return{...e,expanded:t}}),A=o.filter(e=>e.expanded),T="horizontal",O=C&&C[i]||"green";return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?E:void 0,"aria-orientation":0===i?T:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i+1}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[T]}`]:T}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&o.map((n,r)=>{const f=n.items.some(e=>e[v]&&e[v].length||k&&e[k]),C=e.width?(e.width-(o.length-1)*m)/o.length:void 0,E=A.findIndex(e=>e===n);return s.createElement(L,{id:t+"-"+(i+1)+"-"+n.items[0][p],style:{width:C},groupTitleHeight:c,groupSubtitleHeight:u,groupTitleRender:I,groupSubtitleRender:N,key:r,level:i,verticalLine:h||g,title:n.items[0][a||y],subtitle:a,orientation:e.orientation,childLineWidth:f&&n.expanded&&"horizontal"===e.orientation?e.childLineWidths[E]:0,line:f,nodes:n.items,expanded:n.expanded,plus:f},n.items.map((e,t)=>s.createElement(b,{cardHeight:d,cardWidth:l,itemRender:w,color:O,key:t,level:i,avatar:e[F],avatarType:S,showAvatar:G,title:e[y],subtitle:e[x],verticalLine:0,line:!1,node:e,childLineWidth:0,plus:!1},e.text)))}))}))};S.displayName="KendoServerGroupedOrgChart";const G=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(w,{component:"OrgChart"}),g=n.getLicenseMessage(w);return s.createElement(f,{style:{position:"relative",...e.style},...t},e.groupField?s.createElement(S,{id:u||p.current,...h},e.children):s.createElement(E,{id:u||p.current,...h},e.children),m&&s.createElement(n.WatermarkOverlay,{message:g}))};function W(e,t,i,r,a){if(i){const{ids:l,field:o}=M(i,t);return function(e,t,i,r,a){let l=e;return t.forEach(e=>{l=n.updateItem(l,e,e=>K(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 M(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 K(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 H(e,t,i){if(i&&!n.isArray(i)&&i.applyCheckIndeterminate){const{field:r}=M(i,p),a=i.checkIndeterminateField||"checkIndeterminate";for(let i=0;i<e.length;i++){const l=e[i],o=l[t];o&&B(o,n.getNestedValue(r,l)?[]:[l],t,r,a)}}}function B(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++)K(a,t[e]);l=!0,d[i]&&B(d[i],[],i,r,a)}else d[i]&&B(d[i],l?[d]:t.concat([d]),i,r,a)}}G.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},G.displayName="KendoOrgChart",e.OrgChart=G,e.ServerOrgChart=E,e.ServerOrgChartGroup=L,e.ServerOrgChartNode=b,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=W(n,r,t.expand,i,o),n=W(n,a,t.select,i,o),n=W(n,l,t.check,i,o),H(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=25,g=40,v=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:f,verticalLine:k,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(v.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}"]`),r=(null==i?void 0:i.querySelector(".k-orgchart-card"))||i;r?n.focusElement(r,e):n.focusPrevious(e)}})(l,a,i,n);break;case"ArrowDown":((e,n,i,r)=>{var a,l;i.preventDefault();const o=t.groupField?r.items.some(e=>e[t.expandField]):r.item[t.expandField],d=t.groupField?r.items.find(e=>e[t.childrenField]):r.item[t.childrenField],s=t.groupField?r.items.some(e=>t.hasChildrenField&&e[t.hasChildrenField]):t.hasChildrenField&&r.item[t.hasChildrenField],c=t.groupField?d&&d[t.childrenField]&&d[t.childrenField].length:d&&d.length;if((s||c)&&!o&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const i=t.groupField?".k-orgchart-node-group-container":".k-orgchart-card",r=null==(a=e.closest("[aria-owns]"))?void 0:a.getAttribute("aria-owns"),o=null==(l=document.getElementById(r))?void 0:l.querySelector(i);o?n.focusElement(o,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 k=e=>{const{expanded:t,node:n,nodes:i}=e,l=s.useContext(v);return s.createElement(r.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?a.minusIcon:a.plusIcon,role:"presentation","aria-hidden":!0,onClick:e=>{l.onExpandChange&&l.onExpandChange.call(void 0,{event:e,expand:!t,item:n,items:i})}})},F=e=>{const{node:t,children:r,style:a,...l}=e,[o,d]=s.useState(!1),c=s.useContext(v);return s.createElement(i.Card,{orientation:null,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,onFocus:()=>d(!0),onBlur:()=>d(!1),...l},r)},y=e=>{const{level:t,children:n}=e,r=s.useContext(v),a=r.cardColors&&r.cardColors[t]||"green";return s.createElement(i.CardBody,{className:"k-hstack",style:{borderTopColor:a}},n)},b=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:b,itemRender:x,showAvatar:C,...E}={avatarType:"image",...e},w=x;return s.createElement("div",{...E,className:n.classNames(e.className,"k-orgchart-node","k-vstack","k-align-items-center"),role:"treeitem","aria-level":l+1,"aria-keyshortcuts":"Enter","aria-expanded":null!=g?g:void 0,"aria-owns":void 0!==g?t:void 0,"aria-selected":!1},0!==l&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:u}}),s.createElement(F,{node:v,style:{width:d,height:c}},s.createElement(y,{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:b,themeColor:"secondary"},"image"===b?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"}),s.createElement("span",{className:"k-orgchart-card-menu",role:"button","aria-label":"Edit menu",tabIndex:-1})))),p&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),m&&s.createElement(k,{expanded:g,node:v}),m&&!!o&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:o,marginTop:-15}}))},x=({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}),x({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}})},C=(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+m*(a-1);e.width=l}})},E=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:v,titleField:f,subtitleField:k,ariaLabel:F,itemRender:y,height:E,avatarType:w,showAvatar:I}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",avatarType:"image",showAvatar:!0,...e},N=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];x({dataByGroups:N,data:r,cardWidth:l,expandField:p,hasChildrenField:h,childrenField:u,idField:c,groupField:a}),C(N,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=null!=r&&r.width?((null==r?void 0:r.width)-(l.length-1)*m)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach((e,n)=>{n<a&&(t+=o+m)}),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)*m)/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)*m)/r:0});r&&(r.childLineWidths=u)})})(N,u,c),((e,t,n)=>{const i=t||80,r=n||g;e.forEach(e=>{const t=e.level,n=(i+r)*t+g*(t?t-1:0)-(r-g)*(t?1:0);e.top=n})})(N,o,d);const A=((e,t,n)=>{const i=t||80,r=n||g;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))}))})(N,o,d);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:E||A}},N.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?F:void 0,"aria-orientation":0===i?a:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i+1}`,"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:"presentation",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 m=n[u]&&n[u].length||h&&n[h],F=m||"vertical"===e.orientation&&a!==r.length-1,x="vertical"===e.orientation&&0!==a?0:d||g,C=e.childLineWidths?Math.max(...e.childLineWidths):void 0,E=n[p];return s.createElement(b,{id:t+"-"+(i+1)+"-"+n[c],style:{width:C},itemRender:y,cardHeight:o,cardWidth:l,verticalLine:x,key:a,level:i,avatar:n[v],avatarType:w,showAvatar:I,title:n[f],subtitle:n[k],line:F,expanded:E,node:n,childLineWidth:m&&E&&"horizontal"===e.orientation?e.childLineWidths[a]:0,plus:m},n.text)})))}))};E.displayName="KendoServerOrgChart";const w=Object.freeze({name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"15.1.0-develop.10",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"}),I=e=>{const{nodes:t,children:i,style:r,...a}=e,[l,o]=s.useState(!1),d=s.useContext(v),c=s.useRef(null);return s.createElement("div",{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)},N="k-orgchart-node-group-title",A="k-orgchart-node-group-subtitle",L=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:F,...y}={orientation:"horizontal",...e},b=f,x=F,C={height:g||20},E={height:v||20};return s.createElement("div",{...y,className:n.classNames(e.className,"k-orgchart-node-group","k-vstack","k-align-items-center"),role:"group"},0!==d&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:c}}),s.createElement(I,{nodes:m},b?s.createElement(b,{style:C,className:N,title:i,items:m,level:d,expanded:p}):s.createElement("div",{className:N,style:C},i),x?s.createElement(x,{style:E,className:A,subtitle:r,items:m,level:d,expanded:p}):s.createElement("div",{className:A,style:E},r),s.createElement("div",{role:"presentation",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(k,{expanded:p,nodes:m}),l&&!!u&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:u,marginTop:-15}}))},T=({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}),T({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}})},O=(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)+m*(i-1)})),l=i*r+m*(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)+m*(i-1)}));e.width=t}}})},R=(e,t,n,i,r)=>{const a=t,l=r||g,o=n+i+82;e.forEach(e=>{const t=e.level,n=(a+l+o)*t+g*(t?t-1:0)-(l-g)*(t?1:0);e.top=n})},D=(e,t,n,i,r)=>{const a=t,l=n,o=i+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?g:0;return t+("horizontal"===e.orientation?a+l+o+l+i:n*(a+l)+o+l)}))},S=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:d,groupTitleHeight:c,groupSubtitleHeight:u,verticalLine:h,idField:p,childrenField:v,expandField:f,hasChildrenField:k,avatarField:F,titleField:y,subtitleField:x,cardsColors:C,ariaLabel:E,itemRender:w,groupTitleRender:I,groupSubtitleRender:N,height:A,avatarType:S,showAvatar:G}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0,...e},W=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];T({dataByGroups:W,data:r,cardWidth:l,expandField:f,hasChildrenField:k,childrenField:v,idField:p,groupField:a}),W.map(e=>{e.groupedItems=o.groupBy(e.items,[{field:a}])}),O(W,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=null!=r&&r.width?((null==r?void 0:r.width)-(l.length-1)*m)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach((e,n)=>{n<a&&(t+=o+m)}),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)*m)/s;if(e.width=c,r){const t=e.width-(e.width-(e.groupedItems.length-1)*m)/e.groupedItems.length;r.childLineWidths?null==(i=r.childLineWidths)||i.push(t):r.childLineWidths=[t]}})})(W,p),R(W,d||80,c||20,u||20,h);const M=D(W,d||80,c||20,u||20);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:A||M}},W.map(e=>{const i=e.level,o=e.groupedItems.map(e=>{const t=e.items.some(e=>e[f]);return{...e,expanded:t}}),A=o.filter(e=>e.expanded),T="horizontal",O=C&&C[i]||"green";return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?E:void 0,"aria-orientation":0===i?T:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i+1}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[T]}`]:T}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&o.map((n,r)=>{const f=n.items.some(e=>e[v]&&e[v].length||k&&e[k]),C=e.width?(e.width-(o.length-1)*m)/o.length:void 0,E=A.findIndex(e=>e===n);return s.createElement(L,{id:t+"-"+(i+1)+"-"+n.items[0][p],style:{width:C},groupTitleHeight:c,groupSubtitleHeight:u,groupTitleRender:I,groupSubtitleRender:N,key:r,level:i,verticalLine:h||g,title:n.items[0][a||y],subtitle:a,orientation:e.orientation,childLineWidth:f&&n.expanded&&"horizontal"===e.orientation?e.childLineWidths[E]:0,line:f,nodes:n.items,expanded:n.expanded,plus:f},n.items.map((e,t)=>s.createElement(b,{cardHeight:d,cardWidth:l,itemRender:w,color:O,key:t,level:i,avatar:e[F],avatarType:S,showAvatar:G,title:e[y],subtitle:e[x],verticalLine:0,line:!1,node:e,childLineWidth:0,plus:!1},e.text)))}))}))};S.displayName="KendoServerGroupedOrgChart";const G=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(w,{component:"OrgChart"}),g=n.getLicenseMessage(w);return s.createElement(f,{style:{position:"relative",...e.style},...t},e.groupField?s.createElement(S,{id:u||p.current,...h},e.children):s.createElement(E,{id:u||p.current,...h},e.children),m&&s.createElement(n.WatermarkOverlay,{message:g}))};function W(e,t,i,r,a){if(i){const{ids:l,field:o}=M(i,t);return function(e,t,i,r,a){let l=e;return t.forEach(e=>{l=n.updateItem(l,e,e=>K(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 M(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 K(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 H(e,t,i){if(i&&!n.isArray(i)&&i.applyCheckIndeterminate){const{field:r}=M(i,p),a=i.checkIndeterminateField||"checkIndeterminate";for(let i=0;i<e.length;i++){const l=e[i],o=l[t];o&&B(o,n.getNestedValue(r,l)?[]:[l],t,r,a)}}}function B(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++)K(a,t[e]);l=!0,d[i]&&B(d[i],[],i,r,a)}else d[i]&&B(d[i],l?[d]:t.concat([d]),i,r,a)}}G.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},G.displayName="KendoOrgChart",e.OrgChart=G,e.ServerOrgChart=E,e.ServerOrgChartGroup=L,e.ServerOrgChartNode=b,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=W(n,r,t.expand,i,o),n=W(n,a,t.select,i,o),n=W(n,l,t.check,i,o),H(n,o,t.check),n}});
|
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: 1783504538,version:"15.1.0-develop.10",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
|
@@ -6,8 +6,8 @@ export const packageMetadata = Object.freeze({
|
|
|
6
6
|
productName: 'KendoReact',
|
|
7
7
|
productCode: 'KENDOUIREACT',
|
|
8
8
|
productCodes: ['KENDOUIREACT'],
|
|
9
|
-
publishDate:
|
|
10
|
-
version: '15.0
|
|
9
|
+
publishDate: 1783504538,
|
|
10
|
+
version: '15.1.0-develop.10',
|
|
11
11
|
licensingDocsUrl:
|
|
12
12
|
'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
|
|
13
13
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-orgchart",
|
|
3
|
-
"version": "15.0
|
|
3
|
+
"version": "15.1.0-develop.10",
|
|
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.7.2",
|
|
29
29
|
"@progress/kendo-licensing": "^1.7.2",
|
|
30
|
-
"@progress/kendo-react-buttons": "15.0
|
|
31
|
-
"@progress/kendo-react-common": "15.0
|
|
32
|
-
"@progress/kendo-react-layout": "15.0
|
|
30
|
+
"@progress/kendo-react-buttons": "15.1.0-develop.10",
|
|
31
|
+
"@progress/kendo-react-common": "15.1.0-develop.10",
|
|
32
|
+
"@progress/kendo-react-layout": "15.1.0-develop.10",
|
|
33
33
|
"@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
|
|
34
34
|
"react": "^18.0.0 || ^19.0.0",
|
|
35
35
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"package": {
|
|
56
56
|
"productName": "KendoReact",
|
|
57
57
|
"productCode": "KENDOUIREACT",
|
|
58
|
-
"publishDate":
|
|
58
|
+
"publishDate": 1783504538,
|
|
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
|
},
|
|
@@ -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 B=require("react"),C=require("@progress/kendo-react-common"),$=require("./ServerOrgChartNode.js"),F=require("./ServerOrgChartGroup.js"),K=require("@progress/kendo-data-query"),n=require("../utils/consts.js");function Q(o){const I=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const a in o)if(a!=="default"){const e=Object.getOwnPropertyDescriptor(o,a);Object.defineProperty(I,a,e.get?e:{enumerable:!0,get:()=>o[a]})}}return I.default=o,Object.freeze(I)}const b=Q(B),W=({dataByGroups:o,data:I=[],cardWidth:a,childrenField:e,idField:t,expandField:r,hasChildrenField:i,groupField:h,level:d=1,parentId:l=0})=>{I.forEach(s=>{const c=s[e];if(s[r]&&c&&c.length){const g=c.some(O=>O[e]&&O[e].length||i&&O[i]),H=g?"horizontal":"vertical",
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),C=require("@progress/kendo-react-common"),$=require("./ServerOrgChartNode.js"),F=require("./ServerOrgChartGroup.js"),K=require("@progress/kendo-data-query"),n=require("../utils/consts.js");function Q(o){const I=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const a in o)if(a!=="default"){const e=Object.getOwnPropertyDescriptor(o,a);Object.defineProperty(I,a,e.get?e:{enumerable:!0,get:()=>o[a]})}}return I.default=o,Object.freeze(I)}const b=Q(B),W=({dataByGroups:o,data:I=[],cardWidth:a,childrenField:e,idField:t,expandField:r,hasChildrenField:i,groupField:h,level:d=1,parentId:l=0})=>{I.forEach(s=>{const c=s[e];if(s[r]&&c&&c.length){const g=c.some(O=>O[e]&&O[e].length||i&&O[i]),H=g?"horizontal":"vertical",E=g?null:a+2*n.HORIZONTAL_GAP,v=o.find(O=>O.parentId===l),G=o.find(O=>O.ids.includes(l));let p=!1;if(v){const O=v.ids[0],x=G.items.find(A=>A[t]===O),P=G.items.find(A=>A[t]===s[t]);p=x[h]===P[h]}v&&p?(v.ids.push(s[t]),v.items=v.items.concat(c)):o.push({ids:[s[t]],items:c,level:d,parentId:l,hasChildren:g,orientation:H,width:E}),W({dataByGroups:o,data:s[e],childrenField:e,cardWidth:a,idField:t,expandField:r,hasChildrenField:i,groupField:h,level:d+1,parentId:s[t]})}})},J=(o,I)=>{const a=I||n.NODE_WIDTH,e=o.sort((t,r)=>r.level-t.level);e.forEach(t=>{if(!t.width){const r=e.filter(i=>t.ids.includes(i.parentId));if(r.length){const i=Math.max(...r.map(s=>s.width||0)),h=Math.max(...r.map(s=>s.groupedItems.length||0)),d=Math.max(...t.groupedItems.map(s=>{const c=t.orientation==="horizontal"?s.items.length:1;return c*(a+2*n.HORIZONTAL_GAP)+n.HORIZONTAL_GAP*(c-1)})),l=i*h+n.HORIZONTAL_GAP*(h-1);t.width=Math.max(l,d)}else{const i=Math.max(...t.groupedItems.map(h=>{const d=t.orientation==="horizontal"?h.items.length:1;return d*(a+2*n.HORIZONTAL_GAP)+n.HORIZONTAL_GAP*(d-1)}));t.width=i}}})},X=(o,I)=>{const a=o.sort((e,t)=>e.level-t.level);a.forEach(e=>{var c;if(e.level===0)return;const t=a.find(m=>m.ids.includes(e.parentId)),r=(t==null?void 0:t.groupedItems.findIndex(m=>m.items.some(g=>e.ids.includes(g[I]))))||0,i=(t==null?void 0:t.groupedItems)||[],h=t!=null&&t.width?((t==null?void 0:t.width)-(i.length-1)*n.HORIZONTAL_GAP)/i.length:0;if(!e.left){let m=(t==null?void 0:t.left)||0;i.forEach((g,H)=>{H<r&&(m+=h+n.HORIZONTAL_GAP)}),e.left=m}const d=(t==null?void 0:t.width)||0,l=(t==null?void 0:t.groupedItems.length)||1,s=(d-(l-1)*n.HORIZONTAL_GAP)/l;if(e.width=s,t){const m=e.width-(e.width-(e.groupedItems.length-1)*n.HORIZONTAL_GAP)/e.groupedItems.length;t.childLineWidths?(c=t.childLineWidths)==null||c.push(m):t.childLineWidths=[m]}})},Y=(o,I,a,e,t)=>{const r=I,i=t||n.VERTICAL_LINE,h=a+e+n.GROUP_PADDINGS;o.forEach(d=>{const l=d.level,s=(r+i+h)*l+n.VERTICAL_LINE*(l?l-1:0)-(i-n.VERTICAL_LINE)*(l?1:0);d.top=s})},tt=(o,I,a,e,t)=>{const r=I,i=a,d=e+n.GROUP_SUBTITLE_HEIGHT+n.GROUP_PADDINGS;return Math.max(...o.map(s=>{const c=s.top||0,m=Math.max(...s.groupedItems.map(E=>E.items.length)),g=s.hasChildren?n.VERTICAL_LINE:0,H=s.orientation==="horizontal"?r+i+d+i+g:m*(r+i)+d+i;return c+H}))},y=o=>{const I={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0},{id:a,width:e,data:t,groupField:r,cardWidth:i,cardHeight:h,groupTitleHeight:d,groupSubtitleHeight:l,verticalLine:s,idField:c,childrenField:m,expandField:g,hasChildrenField:H,avatarField:E,titleField:v,subtitleField:G,cardsColors:p,ariaLabel:O,itemRender:x,groupTitleRender:P,groupSubtitleRender:A,height:k,avatarType:D,showAvatar:M}={...I,...o},_=[{items:t,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];W({dataByGroups:_,data:t,cardWidth:i,expandField:g,hasChildrenField:H,childrenField:m,idField:c,groupField:r}),_.map(u=>{u.groupedItems=K.groupBy(u.items,[{field:r}])}),J(_,i),X(_,c),Y(_,h||n.NODE_HEIGHT,d||n.GROUP_TITLE_HEIGHT,l||n.GROUP_SUBTITLE_HEIGHT,s);const Z=tt(_,h||n.NODE_HEIGHT,d||n.GROUP_TITLE_HEIGHT,l||n.GROUP_SUBTITLE_HEIGHT);return b.createElement("div",{className:"k-orgchart-container",style:{width:e,height:k||Z}},_.map(u=>{const T=u.level,w=u.groupedItems.map(L=>{const S=L.items.some(R=>R[g]);return{...L,expanded:S}}),U=w.filter(L=>L.expanded),N="horizontal",z=p&&p[T]||"green";return b.createElement("div",{role:T===0?"tree":"group",id:a+"-"+T+"-"+u.ids[0],"aria-label":T===0?O:void 0,"aria-orientation":T===0?N:void 0,key:u.ids[0]+"_"+T,className:C.classNames("k-orgchart-group",`k-orgchart-level-${T+1}`,"k-pos-absolute",{[`k-${C.kendoThemeMaps.orientationMap[N]}`]:N}),style:{width:u.width||"100%",left:u.left,top:u.top}},t.length>0&&w.map((L,S)=>{const R=L.items.some(f=>f[m]&&f[m].length||H&&f[H]),q=u.width?(u.width-(w.length-1)*n.HORIZONTAL_GAP)/w.length:void 0,j=U.findIndex(f=>f===L);return b.createElement(F.ServerOrgChartGroup,{id:a+"-"+(T+1)+"-"+L.items[0][c],style:{width:q},groupTitleHeight:d,groupSubtitleHeight:l,groupTitleRender:P,groupSubtitleRender:A,key:S,level:T,verticalLine:s||n.VERTICAL_LINE,title:L.items[0][r||v],subtitle:r,orientation:u.orientation,childLineWidth:R&&L.expanded&&u.orientation==="horizontal"?u.childLineWidths[j]:0,line:R,nodes:L.items,expanded:L.expanded,plus:R},L.items.map((f,V)=>b.createElement($.ServerOrgChartNode,{cardHeight:h,cardWidth:i,itemRender:x,color:z,key:V,level:T,avatar:f[E],avatarType:D,showAvatar:M,title:f[v],subtitle:f[G],verticalLine:0,line:!1,node:f,childLineWidth:0,plus:!1},f.text)))}))}))};y.displayName="KendoServerGroupedOrgChart";exports.ServerGroupedOrgChart=y;
|
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
8
|
+
import * as S from "react";
|
|
9
9
|
import { classNames as q, kendoThemeMaps as J } from "@progress/kendo-react-common";
|
|
10
10
|
import { ServerOrgChartNode as Q } from "./ServerOrgChartNode.mjs";
|
|
11
11
|
import { ServerOrgChartGroup as X } from "./ServerOrgChartGroup.mjs";
|
|
12
12
|
import { groupBy as Y } from "@progress/kendo-data-query";
|
|
13
|
-
import { HORIZONTAL_GAP as
|
|
13
|
+
import { HORIZONTAL_GAP as p, VERTICAL_LINE as C, NODE_WIDTH as tt, GROUP_PADDINGS as D, GROUP_SUBTITLE_HEIGHT as M, GROUP_TITLE_HEIGHT as z, NODE_HEIGHT as A } from "../utils/consts.mjs";
|
|
14
14
|
const P = ({
|
|
15
15
|
dataByGroups: m,
|
|
16
|
-
data:
|
|
16
|
+
data: I = [],
|
|
17
17
|
cardWidth: r,
|
|
18
18
|
childrenField: e,
|
|
19
19
|
idField: t,
|
|
@@ -23,23 +23,23 @@ const P = ({
|
|
|
23
23
|
level: o = 1,
|
|
24
24
|
parentId: a = 0
|
|
25
25
|
}) => {
|
|
26
|
-
|
|
26
|
+
I.forEach((n) => {
|
|
27
27
|
const h = n[e];
|
|
28
28
|
if (n[s] && h && h.length) {
|
|
29
|
-
const
|
|
30
|
-
(
|
|
31
|
-
), x =
|
|
29
|
+
const g = h.some(
|
|
30
|
+
(u) => u[e] && u[e].length || i && u[i]
|
|
31
|
+
), x = g ? "horizontal" : "vertical", b = g ? null : r + 2 * p, L = m.find((u) => u.parentId === a), O = m.find((u) => u.ids.includes(a));
|
|
32
32
|
let E = !1;
|
|
33
33
|
if (L) {
|
|
34
|
-
const
|
|
35
|
-
E =
|
|
34
|
+
const u = L.ids[0], k = O.items.find((T) => T[t] === u), _ = O.items.find((T) => T[t] === n[t]);
|
|
35
|
+
E = k[d] === _[d];
|
|
36
36
|
}
|
|
37
37
|
L && E ? (L.ids.push(n[t]), L.items = L.items.concat(h)) : m.push({
|
|
38
38
|
ids: [n[t]],
|
|
39
39
|
items: h,
|
|
40
40
|
level: o,
|
|
41
41
|
parentId: a,
|
|
42
|
-
hasChildren:
|
|
42
|
+
hasChildren: g,
|
|
43
43
|
orientation: x,
|
|
44
44
|
width: b
|
|
45
45
|
}), P({
|
|
@@ -56,8 +56,8 @@ const P = ({
|
|
|
56
56
|
});
|
|
57
57
|
}
|
|
58
58
|
});
|
|
59
|
-
}, et = (m,
|
|
60
|
-
const r =
|
|
59
|
+
}, et = (m, I) => {
|
|
60
|
+
const r = I || tt, e = m.sort((t, s) => s.level - t.level);
|
|
61
61
|
e.forEach((t) => {
|
|
62
62
|
if (!t.width) {
|
|
63
63
|
const s = e.filter(
|
|
@@ -69,22 +69,22 @@ const P = ({
|
|
|
69
69
|
), o = Math.max(
|
|
70
70
|
...t.groupedItems.map((n) => {
|
|
71
71
|
const h = t.orientation === "horizontal" ? n.items.length : 1;
|
|
72
|
-
return h * (r + 2 *
|
|
72
|
+
return h * (r + 2 * p) + p * (h - 1);
|
|
73
73
|
})
|
|
74
|
-
), a = i * d +
|
|
74
|
+
), a = i * d + p * (d - 1);
|
|
75
75
|
t.width = Math.max(a, o);
|
|
76
76
|
} else {
|
|
77
77
|
const i = Math.max(
|
|
78
78
|
...t.groupedItems.map((d) => {
|
|
79
79
|
const o = t.orientation === "horizontal" ? d.items.length : 1;
|
|
80
|
-
return o * (r + 2 *
|
|
80
|
+
return o * (r + 2 * p) + p * (o - 1);
|
|
81
81
|
})
|
|
82
82
|
);
|
|
83
83
|
t.width = i;
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
});
|
|
87
|
-
}, it = (m,
|
|
87
|
+
}, it = (m, I) => {
|
|
88
88
|
const r = m.sort((e, t) => e.level - t.level);
|
|
89
89
|
r.forEach((e) => {
|
|
90
90
|
var h;
|
|
@@ -93,36 +93,36 @@ const P = ({
|
|
|
93
93
|
const t = r.find(
|
|
94
94
|
(l) => l.ids.includes(e.parentId)
|
|
95
95
|
), s = (t == null ? void 0 : t.groupedItems.findIndex(
|
|
96
|
-
(l) => l.items.some((
|
|
97
|
-
)) || 0, i = (t == null ? void 0 : t.groupedItems) || [], d = t.width ? (t.width - (i.length - 1) *
|
|
96
|
+
(l) => l.items.some((g) => e.ids.includes(g[I]))
|
|
97
|
+
)) || 0, i = (t == null ? void 0 : t.groupedItems) || [], d = t != null && t.width ? ((t == null ? void 0 : t.width) - (i.length - 1) * p) / i.length : 0;
|
|
98
98
|
if (!e.left) {
|
|
99
99
|
let l = (t == null ? void 0 : t.left) || 0;
|
|
100
|
-
i.forEach((
|
|
101
|
-
x < s && (l += d +
|
|
100
|
+
i.forEach((g, x) => {
|
|
101
|
+
x < s && (l += d + p);
|
|
102
102
|
}), e.left = l;
|
|
103
103
|
}
|
|
104
|
-
const o = (t == null ? void 0 : t.width) || 0, a = (t == null ? void 0 : t.groupedItems.length) || 1, n = (o - (a - 1) *
|
|
104
|
+
const o = (t == null ? void 0 : t.width) || 0, a = (t == null ? void 0 : t.groupedItems.length) || 1, n = (o - (a - 1) * p) / a;
|
|
105
105
|
if (e.width = n, t) {
|
|
106
|
-
const l = e.width - (e.width - (e.groupedItems.length - 1) *
|
|
106
|
+
const l = e.width - (e.width - (e.groupedItems.length - 1) * p) / e.groupedItems.length;
|
|
107
107
|
t.childLineWidths ? (h = t.childLineWidths) == null || h.push(l) : t.childLineWidths = [l];
|
|
108
108
|
}
|
|
109
109
|
});
|
|
110
|
-
}, nt = (m,
|
|
111
|
-
const s =
|
|
110
|
+
}, nt = (m, I, r, e, t) => {
|
|
111
|
+
const s = I, i = t || C, d = r + e + D;
|
|
112
112
|
m.forEach((o) => {
|
|
113
|
-
const a = o.level, n = (s + i + d) * a +
|
|
113
|
+
const a = o.level, n = (s + i + d) * a + C * (a ? a - 1 : 0) - (i - C) * (a ? 1 : 0);
|
|
114
114
|
o.top = n;
|
|
115
115
|
});
|
|
116
|
-
}, st = (m,
|
|
117
|
-
const s =
|
|
116
|
+
}, st = (m, I, r, e, t) => {
|
|
117
|
+
const s = I, i = r, o = e + M + D;
|
|
118
118
|
return Math.max(
|
|
119
119
|
...m.map((n) => {
|
|
120
|
-
const h = n.top || 0, l = Math.max(...n.groupedItems.map((b) => b.items.length)),
|
|
120
|
+
const h = n.top || 0, l = Math.max(...n.groupedItems.map((b) => b.items.length)), g = n.hasChildren ? C : 0, x = n.orientation === "horizontal" ? s + i + o + i + g : l * (s + i) + o + i;
|
|
121
121
|
return h + x;
|
|
122
122
|
})
|
|
123
123
|
);
|
|
124
124
|
}, ot = (m) => {
|
|
125
|
-
const
|
|
125
|
+
const I = {
|
|
126
126
|
width: "100%",
|
|
127
127
|
data: [],
|
|
128
128
|
ariaLabel: "Org Chart",
|
|
@@ -146,20 +146,20 @@ const P = ({
|
|
|
146
146
|
verticalLine: n,
|
|
147
147
|
idField: h,
|
|
148
148
|
childrenField: l,
|
|
149
|
-
expandField:
|
|
149
|
+
expandField: g,
|
|
150
150
|
hasChildrenField: x,
|
|
151
151
|
avatarField: b,
|
|
152
152
|
titleField: L,
|
|
153
|
-
subtitleField:
|
|
153
|
+
subtitleField: O,
|
|
154
154
|
cardsColors: E,
|
|
155
|
-
ariaLabel:
|
|
156
|
-
itemRender:
|
|
157
|
-
groupTitleRender:
|
|
155
|
+
ariaLabel: u,
|
|
156
|
+
itemRender: k,
|
|
157
|
+
groupTitleRender: _,
|
|
158
158
|
groupSubtitleRender: T,
|
|
159
159
|
height: N,
|
|
160
160
|
avatarType: U,
|
|
161
161
|
showAvatar: B
|
|
162
|
-
} = { ...
|
|
162
|
+
} = { ...I, ...m }, H = [
|
|
163
163
|
{
|
|
164
164
|
items: t,
|
|
165
165
|
level: 0,
|
|
@@ -174,7 +174,7 @@ const P = ({
|
|
|
174
174
|
dataByGroups: H,
|
|
175
175
|
data: t,
|
|
176
176
|
cardWidth: i,
|
|
177
|
-
expandField:
|
|
177
|
+
expandField: g,
|
|
178
178
|
hasChildrenField: x,
|
|
179
179
|
childrenField: l,
|
|
180
180
|
idField: h,
|
|
@@ -194,24 +194,24 @@ const P = ({
|
|
|
194
194
|
o || z,
|
|
195
195
|
a || M
|
|
196
196
|
);
|
|
197
|
-
return /* @__PURE__ */
|
|
198
|
-
const w = c.level,
|
|
199
|
-
const
|
|
197
|
+
return /* @__PURE__ */ S.createElement("div", { className: "k-orgchart-container", style: { width: e, height: N || $ } }, H.map((c) => {
|
|
198
|
+
const w = c.level, R = c.groupedItems.map((f) => {
|
|
199
|
+
const G = f.items.some((W) => W[g]);
|
|
200
200
|
return {
|
|
201
201
|
...f,
|
|
202
|
-
expanded:
|
|
202
|
+
expanded: G
|
|
203
203
|
};
|
|
204
|
-
}), F =
|
|
205
|
-
return /* @__PURE__ */
|
|
204
|
+
}), F = R.filter((f) => f.expanded), y = "horizontal", K = E && E[w] || "green";
|
|
205
|
+
return /* @__PURE__ */ S.createElement(
|
|
206
206
|
"div",
|
|
207
207
|
{
|
|
208
208
|
role: w === 0 ? "tree" : "group",
|
|
209
209
|
id: r + "-" + w + "-" + c.ids[0],
|
|
210
|
-
"aria-label": w === 0 ?
|
|
211
|
-
"aria-orientation": w === 0 ?
|
|
210
|
+
"aria-label": w === 0 ? u : void 0,
|
|
211
|
+
"aria-orientation": w === 0 ? y : void 0,
|
|
212
212
|
key: c.ids[0] + "_" + w,
|
|
213
213
|
className: q("k-orgchart-group", `k-orgchart-level-${w + 1}`, "k-pos-absolute", {
|
|
214
|
-
[`k-${J.orientationMap[
|
|
214
|
+
[`k-${J.orientationMap[y]}`]: y
|
|
215
215
|
}),
|
|
216
216
|
style: {
|
|
217
217
|
width: c.width || "100%",
|
|
@@ -219,22 +219,22 @@ const P = ({
|
|
|
219
219
|
top: c.top
|
|
220
220
|
}
|
|
221
221
|
},
|
|
222
|
-
t.length > 0 &&
|
|
222
|
+
t.length > 0 && R.map((f, G) => {
|
|
223
223
|
const W = f.items.some(
|
|
224
|
-
(
|
|
225
|
-
), V = c.width ? (c.width - (
|
|
226
|
-
return /* @__PURE__ */
|
|
224
|
+
(v) => v[l] && v[l].length || x && v[x]
|
|
225
|
+
), V = c.width ? (c.width - (R.length - 1) * p) / R.length : void 0, Z = F.findIndex((v) => v === f);
|
|
226
|
+
return /* @__PURE__ */ S.createElement(
|
|
227
227
|
X,
|
|
228
228
|
{
|
|
229
229
|
id: r + "-" + (w + 1) + "-" + f.items[0][h],
|
|
230
230
|
style: { width: V },
|
|
231
231
|
groupTitleHeight: o,
|
|
232
232
|
groupSubtitleHeight: a,
|
|
233
|
-
groupTitleRender:
|
|
233
|
+
groupTitleRender: _,
|
|
234
234
|
groupSubtitleRender: T,
|
|
235
|
-
key:
|
|
235
|
+
key: G,
|
|
236
236
|
level: w,
|
|
237
|
-
verticalLine: n ||
|
|
237
|
+
verticalLine: n || C,
|
|
238
238
|
title: f.items[0][s || L],
|
|
239
239
|
subtitle: s,
|
|
240
240
|
orientation: c.orientation,
|
|
@@ -244,27 +244,27 @@ const P = ({
|
|
|
244
244
|
expanded: f.expanded,
|
|
245
245
|
plus: W
|
|
246
246
|
},
|
|
247
|
-
f.items.map((
|
|
247
|
+
f.items.map((v, j) => /* @__PURE__ */ S.createElement(
|
|
248
248
|
Q,
|
|
249
249
|
{
|
|
250
250
|
cardHeight: d,
|
|
251
251
|
cardWidth: i,
|
|
252
|
-
itemRender:
|
|
252
|
+
itemRender: k,
|
|
253
253
|
color: K,
|
|
254
254
|
key: j,
|
|
255
255
|
level: w,
|
|
256
|
-
avatar:
|
|
256
|
+
avatar: v[b],
|
|
257
257
|
avatarType: U,
|
|
258
258
|
showAvatar: B,
|
|
259
|
-
title:
|
|
260
|
-
subtitle:
|
|
259
|
+
title: v[L],
|
|
260
|
+
subtitle: v[O],
|
|
261
261
|
verticalLine: 0,
|
|
262
262
|
line: !1,
|
|
263
|
-
node:
|
|
263
|
+
node: v,
|
|
264
264
|
childLineWidth: 0,
|
|
265
265
|
plus: !1
|
|
266
266
|
},
|
|
267
|
-
|
|
267
|
+
v.text
|
|
268
268
|
))
|
|
269
269
|
);
|
|
270
270
|
})
|
package/server/ServerOrgChart.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
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),u=require("@progress/kendo-react-common"),V=require("./ServerOrgChartNode.js"),v=require("../utils/consts.js");function p(a){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const s in a)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(a,s);Object.defineProperty(l,s,i.get?i:{enumerable:!0,get:()=>a[s]})}}return l.default=a,Object.freeze(l)}const H=p(z),C=({dataByGroups:a,data:l=[],cardWidth:s,childrenField:i,idField:e,expandField:t,hasChildrenField:n,groupField:c,level:m=1,parentId:d=0})=>{l.forEach(h=>{const f=h[i];if(h[t]&&f&&f.length){const o=f.some(I=>I[i]&&I[i].length||n&&I[n]),w=o?"horizontal":"vertical",L=o?null:s;a.push({ids:[h[e]],items:f,level:m,parentId:d,hasChildren:o,orientation:w,width:L}),C({dataByGroups:a,data:h[i],childrenField:i,cardWidth:s,idField:e,expandField:t,hasChildrenField:n,groupField:c,level:m+1,parentId:h[e]})}})},F=(a,l)=>{const s=l||v.NODE_WIDTH,i=a.sort((e,t)=>t.level-e.level);i.forEach(e=>{if(!e.width){const t=i.filter(d=>e.ids.includes(d.parentId)),n=t.length?Math.max(...t.map(d=>d.width||0)):s,c=e.orientation==="horizontal"?e.items.length:1,m=n*c+v.HORIZONTAL_GAP*(c-1);e.width=m}})},Z=(a,l,s)=>{const i=a.sort((e,t)=>e.level-t.level);i.forEach(e=>{if(e.level===0)return;const t=i.find(o=>o.ids.includes(e.parentId)),n=(t==null?void 0:t.items.findIndex(o=>e.ids.includes(o[s])))||0,c=(t==null?void 0:t.items)||[],m=t!=null&&t.width?((t==null?void 0:t.width)-(c.length-1)*v.HORIZONTAL_GAP)/c.length:0;if(!e.left){let o=(t==null?void 0:t.left)||0;c.forEach((w,L)=>{L<n&&(o+=m+v.HORIZONTAL_GAP)}),e.left=o}const d=(t==null?void 0:t.width)||0,h=(t==null?void 0:t.items.length)||1,f=(d-(h-1)*v.HORIZONTAL_GAP)/h;e.width=f;const N=t==null?void 0:t.items.map(o=>{const w=o[l]?o[l].length:0,L=i.find(_=>_.ids.includes(o[s])),I=(L==null?void 0:L.width)||0;return(L==null?void 0:L.orientation)==="vertical"||w===0||!o.expanded?0:I-(I-(w-1)*v.HORIZONTAL_GAP)/w});t&&(t.childLineWidths=N)})},q=(a,l,s)=>{const i=l||v.NODE_HEIGHT,e=s||v.VERTICAL_LINE;a.forEach(t=>{const n=t.level,c=(i+e)*n+v.VERTICAL_LINE*(n?n-1:0)-(e-v.VERTICAL_LINE)*(n?1:0);t.top=c})},$=(a,l,s)=>{const i=l||v.NODE_HEIGHT,e=s||v.VERTICAL_LINE;return Math.max(...a.map(n=>{const c=n.top||0,m=n.items.length,d=n.orientation==="horizontal"?i+e+e:m*(i+e);return c+d}))},R=a=>{const l={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",avatarType:"image",showAvatar:!0},{id:s,width:i,data:e,groupField:t,cardWidth:n,cardHeight:c,verticalLine:m,idField:d,childrenField:h,hasChildrenField:f,expandField:N,avatarField:o,titleField:w,subtitleField:L,ariaLabel:I,itemRender:_,height:W,avatarType:x,showAvatar:S}={...l,...a},E=[{items:e,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];C({dataByGroups:E,data:e,cardWidth:n,expandField:N,hasChildrenField:f,childrenField:h,idField:d,groupField:t}),F(E,n),Z(E,h,d),q(E,c,m);const M=$(E,c,m);return H.createElement("div",{className:"k-orgchart-container",style:{width:i,height:W||M}},E.map(r=>{const O=r.level,A=r.items,b=r.orientation;return H.createElement("div",{role:O===0?"tree":"group",id:s+"-"+O+"-"+r.ids[0],"aria-label":O===0?I:void 0,"aria-orientation":O===0?b:void 0,key:r.ids[0]+"_"+O,className:u.classNames("k-orgchart-group",`k-orgchart-level-${O+1}`,"k-pos-absolute",{[`k-${u.kendoThemeMaps.orientationMap[b]}`]:b}),style:{width:r.width||"100%",left:r.left,top:r.top}},A.length>0&&H.createElement("div",{role:"presentation",style:{width:"100%"},className:u.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${u.kendoThemeMaps.orientationMap[r.orientation]}`]:r.orientation})},A.map((g,T)=>{const k=g[h]&&g[h].length||f&&g[f],P=k||r.orientation==="vertical"&&T!==A.length-1,D=r.orientation==="vertical"&&T!==0?0:m||v.VERTICAL_LINE,j=r.childLineWidths?Math.max(...r.childLineWidths):void 0,y=g[N];return H.createElement(V.ServerOrgChartNode,{id:s+"-"+(O+1)+"-"+g[d],style:{width:j},itemRender:_,cardHeight:c,cardWidth:n,verticalLine:D,key:T,level:O,avatar:g[o],avatarType:x,showAvatar:S,title:g[w],subtitle:g[L],line:P,expanded:y,node:g,childLineWidth:k&&y&&r.orientation==="horizontal"?r.childLineWidths[T]:0,plus:k},g.text)})))}))};R.displayName="KendoServerOrgChart";exports.ServerOrgChart=R;
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as N from "react";
|
|
9
|
-
import { classNames as
|
|
9
|
+
import { classNames as M, kendoThemeMaps as R } from "@progress/kendo-react-common";
|
|
10
10
|
import { ServerOrgChartNode as P } from "./ServerOrgChartNode.mjs";
|
|
11
|
-
import { VERTICAL_LINE as H, HORIZONTAL_GAP as x, NODE_WIDTH as V, NODE_HEIGHT as
|
|
12
|
-
const
|
|
11
|
+
import { VERTICAL_LINE as H, HORIZONTAL_GAP as x, NODE_WIDTH as V, NODE_HEIGHT as _ } from "../utils/consts.mjs";
|
|
12
|
+
const u = ({
|
|
13
13
|
dataByGroups: c,
|
|
14
14
|
data: r = [],
|
|
15
15
|
cardWidth: l,
|
|
@@ -35,7 +35,7 @@ const R = ({
|
|
|
35
35
|
hasChildren: s,
|
|
36
36
|
orientation: L,
|
|
37
37
|
width: v
|
|
38
|
-
}),
|
|
38
|
+
}), u({
|
|
39
39
|
dataByGroups: c,
|
|
40
40
|
data: d[n],
|
|
41
41
|
childrenField: n,
|
|
@@ -66,7 +66,7 @@ const R = ({
|
|
|
66
66
|
return;
|
|
67
67
|
const t = n.find(
|
|
68
68
|
(s) => s.ids.includes(e.parentId)
|
|
69
|
-
), i = (t == null ? void 0 : t.items.findIndex((s) => e.ids.includes(s[l]))) || 0, a = (t == null ? void 0 : t.items) || [], m = t.width ? (t.width - (a.length - 1) * x) / a.length : 0;
|
|
69
|
+
), i = (t == null ? void 0 : t.items.findIndex((s) => e.ids.includes(s[l]))) || 0, a = (t == null ? void 0 : t.items) || [], m = t != null && t.width ? ((t == null ? void 0 : t.width) - (a.length - 1) * x) / a.length : 0;
|
|
70
70
|
if (!e.left) {
|
|
71
71
|
let s = (t == null ? void 0 : t.left) || 0;
|
|
72
72
|
a.forEach((L, v) => {
|
|
@@ -81,21 +81,21 @@ const R = ({
|
|
|
81
81
|
});
|
|
82
82
|
t && (t.childLineWidths = k);
|
|
83
83
|
});
|
|
84
|
-
},
|
|
85
|
-
const n = r ||
|
|
84
|
+
}, K = (c, r, l) => {
|
|
85
|
+
const n = r || _, e = l || H;
|
|
86
86
|
c.forEach((t) => {
|
|
87
87
|
const i = t.level, a = (n + e) * i + H * (i ? i - 1 : 0) - (e - H) * (i ? 1 : 0);
|
|
88
88
|
t.top = a;
|
|
89
89
|
});
|
|
90
|
-
},
|
|
91
|
-
const n = r ||
|
|
90
|
+
}, Z = (c, r, l) => {
|
|
91
|
+
const n = r || _, e = l || H;
|
|
92
92
|
return Math.max(
|
|
93
93
|
...c.map((i) => {
|
|
94
94
|
const a = i.top || 0, m = i.items.length, h = i.orientation === "horizontal" ? n + e + e : m * (n + e);
|
|
95
95
|
return a + h;
|
|
96
96
|
})
|
|
97
97
|
);
|
|
98
|
-
},
|
|
98
|
+
}, q = (c) => {
|
|
99
99
|
const r = {
|
|
100
100
|
width: "100%",
|
|
101
101
|
data: [],
|
|
@@ -125,9 +125,9 @@ const R = ({
|
|
|
125
125
|
subtitleField: v,
|
|
126
126
|
ariaLabel: g,
|
|
127
127
|
itemRender: y,
|
|
128
|
-
height:
|
|
129
|
-
avatarType:
|
|
130
|
-
showAvatar:
|
|
128
|
+
height: z,
|
|
129
|
+
avatarType: A,
|
|
130
|
+
showAvatar: D
|
|
131
131
|
} = { ...r, ...c }, E = [
|
|
132
132
|
{
|
|
133
133
|
items: e,
|
|
@@ -139,7 +139,7 @@ const R = ({
|
|
|
139
139
|
width: null
|
|
140
140
|
}
|
|
141
141
|
];
|
|
142
|
-
|
|
142
|
+
u({
|
|
143
143
|
dataByGroups: E,
|
|
144
144
|
data: e,
|
|
145
145
|
cardWidth: i,
|
|
@@ -148,20 +148,20 @@ const R = ({
|
|
|
148
148
|
childrenField: d,
|
|
149
149
|
idField: h,
|
|
150
150
|
groupField: t
|
|
151
|
-
}), j(E, i), B(E, d, h),
|
|
152
|
-
const
|
|
153
|
-
return /* @__PURE__ */ N.createElement("div", { className: "k-orgchart-container", style: { width: n, height:
|
|
154
|
-
const W = o.level, T = o.items,
|
|
151
|
+
}), j(E, i), B(E, d, h), K(E, a, m);
|
|
152
|
+
const F = Z(E, a, m);
|
|
153
|
+
return /* @__PURE__ */ N.createElement("div", { className: "k-orgchart-container", style: { width: n, height: z || F } }, E.map((o) => {
|
|
154
|
+
const W = o.level, T = o.items, C = o.orientation;
|
|
155
155
|
return /* @__PURE__ */ N.createElement(
|
|
156
156
|
"div",
|
|
157
157
|
{
|
|
158
158
|
role: W === 0 ? "tree" : "group",
|
|
159
159
|
id: l + "-" + W + "-" + o.ids[0],
|
|
160
160
|
"aria-label": W === 0 ? g : void 0,
|
|
161
|
-
"aria-orientation": W === 0 ?
|
|
161
|
+
"aria-orientation": W === 0 ? C : void 0,
|
|
162
162
|
key: o.ids[0] + "_" + W,
|
|
163
|
-
className:
|
|
164
|
-
[`k-${
|
|
163
|
+
className: M("k-orgchart-group", `k-orgchart-level-${W + 1}`, "k-pos-absolute", {
|
|
164
|
+
[`k-${R.orientationMap[C]}`]: C
|
|
165
165
|
}),
|
|
166
166
|
style: {
|
|
167
167
|
width: o.width || "100%",
|
|
@@ -174,33 +174,33 @@ const R = ({
|
|
|
174
174
|
{
|
|
175
175
|
role: "presentation",
|
|
176
176
|
style: { width: "100%" },
|
|
177
|
-
className:
|
|
178
|
-
[`k-${
|
|
177
|
+
className: M("k-orgchart-node-container", "k-justify-content-around", {
|
|
178
|
+
[`k-${R.orientationMap[o.orientation]}`]: o.orientation
|
|
179
179
|
})
|
|
180
180
|
},
|
|
181
181
|
T.map((w, I) => {
|
|
182
|
-
const
|
|
182
|
+
const O = w[d] && w[d].length || f && w[f], S = O || o.orientation === "vertical" && I !== T.length - 1, $ = o.orientation === "vertical" && I !== 0 ? 0 : m || H, p = o.childLineWidths ? Math.max(...o.childLineWidths) : void 0, b = w[k];
|
|
183
183
|
return /* @__PURE__ */ N.createElement(
|
|
184
184
|
P,
|
|
185
185
|
{
|
|
186
186
|
id: l + "-" + (W + 1) + "-" + w[h],
|
|
187
|
-
style: { width:
|
|
187
|
+
style: { width: p },
|
|
188
188
|
itemRender: y,
|
|
189
189
|
cardHeight: a,
|
|
190
190
|
cardWidth: i,
|
|
191
|
-
verticalLine:
|
|
191
|
+
verticalLine: $,
|
|
192
192
|
key: I,
|
|
193
193
|
level: W,
|
|
194
194
|
avatar: w[s],
|
|
195
|
-
avatarType:
|
|
196
|
-
showAvatar:
|
|
195
|
+
avatarType: A,
|
|
196
|
+
showAvatar: D,
|
|
197
197
|
title: w[L],
|
|
198
198
|
subtitle: w[v],
|
|
199
|
-
line:
|
|
200
|
-
expanded:
|
|
199
|
+
line: S,
|
|
200
|
+
expanded: b,
|
|
201
201
|
node: w,
|
|
202
|
-
childLineWidth:
|
|
203
|
-
plus:
|
|
202
|
+
childLineWidth: O && b && o.orientation === "horizontal" ? o.childLineWidths[I] : 0,
|
|
203
|
+
plus: O
|
|
204
204
|
},
|
|
205
205
|
w.text
|
|
206
206
|
);
|
|
@@ -209,7 +209,7 @@ const R = ({
|
|
|
209
209
|
);
|
|
210
210
|
}));
|
|
211
211
|
};
|
|
212
|
-
|
|
212
|
+
q.displayName = "KendoServerOrgChart";
|
|
213
213
|
export {
|
|
214
|
-
|
|
214
|
+
q as ServerOrgChart
|
|
215
215
|
};
|