azure-devops-ui/Components/TreeEx/Tree.min.js

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./Tree.css";import"./TreeExpand.css";import*as React from"react";import{ObservableLike}from"../../Core/Observable";import{FocusWithin}from"../../FocusWithin";import{FocusZone,FocusZoneContext,FocusZoneDirection,FocusZoneKeyStroke}from"../../FocusZone";import{getDefaultAnchorProps}from"../../Link";import{renderListCell}from"../../List";import{UncheckedObserver}from"../../Observer";import{renderColumns,renderLoadingCell,SimpleTableCell,Table}from"../../Table";import{css,getSafeId,KeyCode,preventDefault}from"../../Util";import{getTabIndex}from"../../Utilities/Focus";import{TreeExpand}from"./TreeExpand";class Tree extends React.Component{constructor(){super(...arguments),this.table=React.createRef(),this.onActivateExpand=(e,t)=>{!e.defaultPrevented&&t.data.underlyingItem.childItems&&(this.props.onToggle&&this.props.onToggle(e,t.data),e.preventDefault())},this.renderRow=(r,o,l)=>(l.singleClickActivation=this.props.onActivate&&l.singleClickActivation,this.props.columns.length<=1&&!l.role&&(l.role="treeitem"),React.createElement(UncheckedObserver,{data:o.underlyingItem.data,key:o.underlyingItem.id},e=>{var t;return e.data?(t=o.underlyingItem.childItems&&0!==o.underlyingItem.childItems.length,e.data.folder&&(t=void 0!==o.underlyingItem.childItems),o.onToggle=t?this.props.onToggle:void 0,(t=o.underlyingItem.data.renderRow||this.props.renderRow)?t(r,o,l):renderTreeRow(r,o,l,this.props.columns,e.data)):(t=this.props["renderLoadingRow"],t?t(r,l):React.createElement(TreeRow,{index:r,details:l},this.props.columns.map((e,t)=>{let r=renderLoadingCell(e.columnLayout);return e.hierarchical&&(r=React.createElement(TreeExpand,{depth:l.data.depth},r)),SimpleTableCell({className:"bolt-tree-cell",columnIndex:t,children:r})})))}))}render(){var{role:e=this.props.role||(1<this.props.columns.length?"treegrid":"tree")}=this.props,t=this.props.onActivate||(this.props.onToggle?this.onActivateExpand:void 0);return React.createElement(Table,{ariaLabel:this.props.ariaLabel,behaviors:this.props.behaviors,className:this.props.className,columns:this.props.columns,containerClassName:this.props.containerClassName,eventDispatch:this.props.eventDispatch,focuszoneProps:this.props.focuszoneProps,id:this.props.id,itemProvider:this.props.itemProvider,maxHeight:this.props.maxHeight,onActivate:t,onFocus:this.props.onFocus,onSelect:this.props.onSelect,pageSize:this.props.pageSize,renderHeader:this.props.renderHeader,renderRow:this.renderRow,renderSpacer:this.props.renderSpacer,role:e,rowHeight:this.props.rowHeight,ref:this.table,scrollable:this.props.scrollable,selectableText:this.props.selectableText,selection:this.props.selection,singleClickActivation:this.props.singleClickActivation,showHeader:this.props.showHeader,showLines:this.props.showLines,showScroll:this.props.showScroll,tableBreakpoints:this.props.tableBreakpoints,virtualize:this.props.virtualize,excludeTabStop:this.props.excludeTabStop})}addOverlay(e,t,r,o=0){if(this.table.current)return this.table.current.addOverlay(e,t,r,o)}removeOverlay(e){if(this.table.current)return this.table.current.removeOverlay(e)}focusRow(e,t=1){return this.table.current?this.table.current.focusRow(e,t):Promise.resolve()}getFocusIndex(){return this.table.current?this.table.current.getFocusIndex():-1}getStats(){return this.table.current?this.table.current.getStats():{firstMaterialized:-1,firstRendered:-1,lastMaterialized:-1,lastRendered:-1}}scrollIntoView(e,t){if(this.table.current)return this.table.current.scrollIntoView(e,t)}}class TreeRow extends React.Component{constructor(){super(...arguments),this.rowElement=React.createRef(),this.onFocus=e=>{this.props.details.onFocusItem(this.props.index,e)},this.onKeyDown=e=>{var t,r;e.defaultPrevented||this.rowElement.current===e.nativeEvent.srcElement&&(t=this.props.details["data"],t)&&t.onToggle&&(r=t.underlyingItem["expanded"],e.which===KeyCode.rightArrow&&!r||e.which===KeyCode.leftArrow&&r)&&(t.onToggle(e,t),e.preventDefault())},this.onPostprocessKeyStroke=t=>{var r;if(!t.defaultPrevented&&t.which===KeyCode.leftArrow){var o=this.rowElement.current;if(t.nativeEvent.srcElement!==o)null!=o&&o.focus();else{var l=this.props.details["data"];if(l&&l.parentItem){let e=null==o?void 0:o.previousElementSibling;for(var n=null==o?void 0:o.getAttribute("aria-level"),s=null===e||void 0===e?void 0:e.getAttribute("aria-level");e&&o&&n&&s;){var i=Number.parseInt(n);if(Number.parseInt(s)<i)break;e=e.previousElementSibling}l.parentItem.onToggle&&null!==e&&void 0!==e&&e.id&&(null!=(r=document.getElementById(e.id))&&r.focus(),l.parentItem.onToggle(t,l.parentItem)),t.preventDefault()}}}return FocusZoneKeyStroke.IgnoreNone}}render(){const{details:r,index:o,linkProps:l}=this.props,{ariaRowOffset:n,data:s,excludeFocusZone:i,renderSpacer:a,selectableText:c,selection:d,singleClickActivation:p}=r,u=l?"a":"tr",m=getDefaultAnchorProps(l);return React.createElement(FocusWithin,{onFocus:this.onFocus},t=>React.createElement(FocusZoneContext.Consumer,null,e=>{return React.createElement(FocusZone,{direction:FocusZoneDirection.Horizontal,postprocessKeyStroke:this.onPostprocessKeyStroke},React.createElement(u,Object.assign({},m,{"aria-busy":void 0===s,"aria-current":r.ariaCurrent||void 0,"aria-expanded":s&&s.underlyingItem.childItems?void 0!==s.underlyingItem.expanded&&s.underlyingItem.expanded:void 0,"aria-labelledby":r.ariaLabelledBy,"aria-level":s?s.depth+1:void 0,"aria-rowindex":"treeitem"===(null===r||void 0===r?void 0:r.role)?void 0:o+n,"aria-selected":!(!d||!d.selected(o))||void 0,className:css(this.props.className,"bolt-tree-row bolt-table-row bolt-list-row",0===o&&"first-row",t.hasFocus&&"focused",d&&d.selected(o)&&"selected",p&&"single-click-activation",c&&"selectable-text",l&&"v-align-middle"),"data-focuszone":i||d&&!d.selectable(o)?void 0:e.focuszoneId,"data-row-index":o,id:getSafeId(null!=(e=r.data.underlyingItem.id)?e:o.toString()),onBlur:t.onBlur,onFocus:t.onFocus,onKeyDown:this.onKeyDown,ref:this.rowElement,role:r.role||"row",tabIndex:getTabIndex(r)}),React.createElement("td",{key:"left-spacer",className:"bolt-table-cell-compact bolt-table-cell bolt-list-cell",role:"presentation"},a&&a(o,!0)),this.props.children,React.createElement("td",{key:"right-spacer",className:"bolt-table-cell-compact bolt-table-cell bolt-list-cell",role:"presentation"},a&&a(o,!1))))}))}}function renderTreeRow(e,t,r,o,l,n,s){return React.createElement(TreeRow,{index:e,details:r,linkProps:l?l.linkProps:void 0,className:n,key:s},renderColumns(e,o,t,r))}function ExpandableTreeCell(e){const{colspan:t,columnIndex:r,contentClassName:o,treeItem:l,treeColumn:n,role:s}=e,{depth:i,onToggle:a,underlyingItem:c}=l;var d=c["expanded"],d=React.createElement(TreeExpand,{expanded:d,depth:i,indentationSize:n&&n.indentationSize,onClick:preventDefault,onToggle:a?e=>a(e,l):void 0},e.children);return SimpleTableCell({children:d,className:css(e.className,"bolt-tree-cell"),colspan:t,columnIndex:r,contentClassName:o,tableColumn:n,role:s})}function renderExpandableTreeCell(e,t,r,o,l,n){var s=o["underlyingItem"],s=ObservableLike.getValue(s.data),s=s&&s[r.id],i=!(!s||"string"==typeof s||"number"==typeof s||!s.href);return ExpandableTreeCell({children:s&&renderListCell(s),className:r.className,columnIndex:t,contentClassName:i?"bolt-table-cell-content-with-link":void 0,treeItem:o,treeColumn:r,role:n})}function renderTreeCell(e,t,r,o,l,n){var o=o["underlyingItem"],o=ObservableLike.getValue(o.data),o=o&&o[r.id],s=!(!o||"string"==typeof o||"number"==typeof o||!o.href);return SimpleTableCell({className:r.className,children:o&&renderListCell(o),columnIndex:t,contentClassName:s?"bolt-table-cell-content-with-link":void 0,tableColumn:r,role:n})}function renderTreeCellWithClassName(e,t,r,o,l){var o=o["underlyingItem"],o=ObservableLike.getValue(o.data),o=o&&o[r.id],n=!(!o||"string"==typeof o||"number"==typeof o||!o.href);return SimpleTableCell({className:r.className,children:o&&renderListCell(o),columnIndex:t,contentClassName:css(l,n?"bolt-table-cell-content-with-link":void 0),tableColumn:r})}export{Tree,TreeRow,renderTreeRow,ExpandableTreeCell,renderExpandableTreeCell,renderTreeCell,renderTreeCellWithClassName};