azure-devops-ui/Components/Table/ColumnMore.min.js

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./Table.css";import{ObservableValue}from"../../Core/Observable";import{ExpandableButton}from"../../Button";import{ContextualMenu}from"../../Menu";import*as Resources from"../../Resources.Widgets";import{KeyCode,css,eventTargetContainsNode,preventDefault}from"../../Util";import{Location}from"../../Utilities/Position";import*as React from"react";import{IMeasurementStyle,TableColumnLayout}from"./Table.Props";var ColumnMoreWidths;!function(e){e[e.compact=2]="compact",e[e.default=2.625]="default"}(ColumnMoreWidths=ColumnMoreWidths||{});class ColumnMore{constructor(e,t,o,a=ColumnMoreWidths.default,l){this.ariaLabel=Resources.MoreActions,this.columnLayout=TableColumnLayout.none,this.id="_more",this.widthStyle=IMeasurementStyle.REM,this.renderCell=(a,t,e,l)=>{var o;const n=React.createRef();return this.refs&&!this.refs.value[a]&&(this.refs.value[a]=n),React.createElement("td",{"aria-colindex":t+1,className:css("bolt-table-cell-side-action bolt-table-cell bolt-list-cell","col-"+t),"data-column-index":t,key:"col-more",onClick:this.onClick,onDoubleClick:preventDefault,onKeyDown:this.onKeyDown,onMouseDown:preventDefault},!this.menuAvailable||this.menuAvailable(l)?React.createElement("div",{className:"bolt-table-cell-content-reveal flex-row justify-center"},React.createElement(ExpandableButton,{ariaLabel:Resources.MoreTooltip,className:"bolt-table-button-more",excludeTabStop:!0,hideDropdownIcon:!0,iconProps:{className:"small",iconName:"MoreVertical"},onClick:e=>{this.onActivate&&this.onActivate(a,t,e)},ref:null==(o=this.refs)?void 0:o.value[a],renderCallout:(e,t,o)=>React.createElement(ContextualMenu,{anchorElement:o,anchorOrigin:{horizontal:Location.end,vertical:Location.end},menuProps:Object.assign(Object.assign({},this.menuProvider(l,a,n)),{id:t}),menuOrigin:{horizontal:Location.end,vertical:Location.start},onDismiss:e.collapse}),subtle:!0,tooltipProps:{text:Resources.MoreTooltip}})):React.createElement("span",{className:"bolt-table-cell-content visually-hidden"},Resources.NoMoreActions))},this.renderHeaderCell=(e,t)=>React.createElement("th",{"aria-colindex":e+1,"aria-label":t.ariaLabel,className:css(t.headerClassName,"bolt-table-header-cell","col-header-"+e),"data-column-index":e,key:"col-more"},React.createElement("span",{className:"visually-hidden"},t.ariaLabel)),this.onClick=e=>{e.defaultPrevented||eventTargetContainsNode(e,["A"],document.body)||e.preventDefault()},this.onKeyDown=e=>{e.defaultPrevented||e.which!==KeyCode.enter&&e.which!==KeyCode.space||eventTargetContainsNode(e,["A"])||e.preventDefault()},this.menuAvailable=t,this.menuProvider=e,this.onActivate=o,this.width=new ObservableValue(a),this.refs=l}}export{ColumnMoreWidths,ColumnMore};