azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 8.45 kB
JavaScript
import{__assign,__extends}from"tslib";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";var Tree=function(e){function t(){var l=null!==e&&e.apply(this,arguments)||this;return l.table=React.createRef(),l.onActivateExpand=function(e,t){!e.defaultPrevented&&t.data.underlyingItem.childItems&&(l.props.onToggle&&l.props.onToggle(e,t.data),e.preventDefault())},l.renderRow=function(r,o,n){return n.singleClickActivation=l.props.onActivate&&n.singleClickActivation,l.props.columns.length<=1&&!n.role&&(n.role="treeitem"),React.createElement(UncheckedObserver,{data:o.underlyingItem.data,key:o.underlyingItem.id},function(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?l.props.onToggle:void 0,(t=o.underlyingItem.data.renderRow||l.props.renderRow)?t(r,o,n):renderTreeRow(r,o,n,l.props.columns,e.data)):(t=l.props.renderLoadingRow)?t(r,n):React.createElement(TreeRow,{index:r,details:n},l.props.columns.map(function(e,t){var r=renderLoadingCell(e.columnLayout);return e.hierarchical&&(r=React.createElement(TreeExpand,{depth:n.data.depth},r)),SimpleTableCell({className:"bolt-tree-cell",columnIndex:t,children:r})}))})},l}return __extends(t,e),t.prototype.render=function(){var e=this.props.role,e=void 0===e?this.props.role||(1<this.props.columns.length?"treegrid":"tree"):e,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})},t.prototype.addOverlay=function(e,t,r,o){if(void 0===o&&(o=0),this.table.current)return this.table.current.addOverlay(e,t,r,o)},t.prototype.removeOverlay=function(e){if(this.table.current)return this.table.current.removeOverlay(e)},t.prototype.focusRow=function(e,t){return void 0===t&&(t=1),this.table.current?this.table.current.focusRow(e,t):Promise.resolve()},t.prototype.getFocusIndex=function(){return this.table.current?this.table.current.getFocusIndex():-1},t.prototype.getStats=function(){return this.table.current?this.table.current.getStats():{firstMaterialized:-1,firstRendered:-1,lastMaterialized:-1,lastRendered:-1}},t.prototype.scrollIntoView=function(e,t){if(this.table.current)return this.table.current.scrollIntoView(e,t)},t}(React.Component),TreeRow=function(e){function t(){var s=null!==e&&e.apply(this,arguments)||this;return s.rowElement=React.createRef(),s.onFocus=function(e){s.props.details.onFocusItem(s.props.index,e)},s.onKeyDown=function(e){var t,r;e.defaultPrevented||s.rowElement.current===e.nativeEvent.srcElement&&(t=s.props.details.data)&&t.onToggle&&(r=t.underlyingItem.expanded,e.which===KeyCode.rightArrow&&!r||e.which===KeyCode.leftArrow&&r)&&(t.onToggle(e,t),e.preventDefault())},s.onPostprocessKeyStroke=function(e){var t;if(!e.defaultPrevented&&e.which===KeyCode.leftArrow){var r=s.rowElement.current;if(e.nativeEvent.srcElement!==r)null!=r&&r.focus();else{var o=s.props.details.data;if(o&&o.parentItem){for(var n=null==r?void 0:r.previousElementSibling,l=null==r?void 0:r.getAttribute("aria-level"),i=null==n?void 0:n.getAttribute("aria-level");n&&r&&l&&i;){var a=Number.parseInt(l);if(Number.parseInt(i)<a)break;n=n.previousElementSibling}o.parentItem.onToggle&&null!=n&&n.id&&(null!=(t=document.getElementById(n.id))&&t.focus(),o.parentItem.onToggle(e,o.parentItem)),e.preventDefault()}}}return FocusZoneKeyStroke.IgnoreNone},s}return __extends(t,e),t.prototype.render=function(){var r=this,e=this.props,o=e.details,n=e.index,l=e.linkProps,i=o.ariaRowOffset,a=o.data,s=o.excludeFocusZone,c=o.renderSpacer,d=o.selectableText,p=o.selection,u=o.singleClickActivation,m=l?"a":"tr",h=getDefaultAnchorProps(l);return React.createElement(FocusWithin,{onFocus:this.onFocus},function(t){return React.createElement(FocusZoneContext.Consumer,null,function(e){return React.createElement(FocusZone,{direction:FocusZoneDirection.Horizontal,postprocessKeyStroke:r.onPostprocessKeyStroke},React.createElement(m,__assign({},h,{"aria-busy":void 0===a,"aria-current":o.ariaCurrent||void 0,"aria-expanded":a&&a.underlyingItem.childItems?void 0!==a.underlyingItem.expanded&&a.underlyingItem.expanded:void 0,"aria-level":a?a.depth+1:void 0,"aria-rowindex":"treeitem"===(null==o?void 0:o.role)?void 0:n+i,"aria-selected":!(!p||!p.selected(n))||void 0,className:css(r.props.className,"bolt-tree-row bolt-table-row bolt-list-row",0===n&&"first-row",t.hasFocus&&"focused",p&&p.selected(n)&&"selected",u&&"single-click-activation",d&&"selectable-text",l&&"v-align-middle"),"data-focuszone":s||p&&!p.selectable(n)?void 0:e.focuszoneId,"data-row-index":n,id:getSafeId(null!=(e=o.data.underlyingItem.id)?e:n.toString()),onBlur:t.onBlur,onFocus:t.onFocus,onKeyDown:r.onKeyDown,ref:r.rowElement,role:o.role||"row",tabIndex:getTabIndex(o)}),React.createElement("td",{key:"left-spacer",className:"bolt-table-cell-compact bolt-table-cell bolt-list-cell",role:"presentation"},c&&c(n,!0)),r.props.children,React.createElement("td",{key:"right-spacer",className:"bolt-table-cell-compact bolt-table-cell bolt-list-cell",role:"presentation"},c&&c(n,!1))))})})},t}(React.Component);function renderTreeRow(e,t,r,o,n,l,i){return React.createElement(TreeRow,{index:e,details:r,linkProps:n?n.linkProps:void 0,className:l,key:i},renderColumns(e,o,t,r))}function ExpandableTreeCell(e){var t=e.colspan,r=e.columnIndex,o=e.contentClassName,n=e.treeItem,l=e.treeColumn,i=e.role,a=n.depth,s=n.onToggle,c=n.underlyingItem.expanded,c=React.createElement(TreeExpand,{expanded:c,depth:a,indentationSize:l&&l.indentationSize,onClick:preventDefault,onToggle:s?function(e){return s(e,n)}:void 0},e.children);return SimpleTableCell({children:c,className:css(e.className,"bolt-tree-cell"),colspan:t,columnIndex:r,contentClassName:o,tableColumn:l,role:i})}function renderExpandableTreeCell(e,t,r,o,n,l){var i=o.underlyingItem,i=ObservableLike.getValue(i.data),i=i&&i[r.id],a=!(!i||"string"==typeof i||"number"==typeof i||!i.href);return ExpandableTreeCell({children:i&&renderListCell(i),className:r.className,columnIndex:t,contentClassName:a?"bolt-table-cell-content-with-link":void 0,treeItem:o,treeColumn:r,role:l})}function renderTreeCell(e,t,r,o,n,l){var o=o.underlyingItem,o=ObservableLike.getValue(o.data),o=o&&o[r.id],i=!(!o||"string"==typeof o||"number"==typeof o||!o.href);return SimpleTableCell({className:r.className,children:o&&renderListCell(o),columnIndex:t,contentClassName:i?"bolt-table-cell-content-with-link":void 0,tableColumn:r,role:l})}function renderTreeCellWithClassName(e,t,r,o,n){var o=o.underlyingItem,o=ObservableLike.getValue(o.data),o=o&&o[r.id],l=!(!o||"string"==typeof o||"number"==typeof o||!o.href);return SimpleTableCell({className:r.className,children:o&&renderListCell(o),columnIndex:t,contentClassName:css(n,l?"bolt-table-cell-content-with-link":void 0),tableColumn:r})}export{Tree,TreeRow,renderTreeRow,ExpandableTreeCell,renderExpandableTreeCell,renderTreeCell,renderTreeCellWithClassName};