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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./Table.css";import*as React from"react";import{ObservableValue}from"../../Core/Observable";import{announce}from"../../Core/Util/Accessibility";import{Checkbox,TriStateCheckbox}from"../../Checkbox";import{Observer}from"../../Observer";import*as Resources from"../../Resources.Widgets";import{css,KeyCode,preventDefault}from"../../Util";import{IMeasurementStyle,TableColumnLayout}from"./Table.Props";var ColumnSelect=function(){function e(e){var c=this;this.isListbox=!1,this.columnSelectBehavior={initialize:function(e){c.ariaHidden="menu"===e.tableProps.role,c.itemProvider=e.tableProps.itemProvider,c.selection=e.tableProps.selection,c.onSelect=e.tableProps.onSelect,c.isListbox="listbox"===e.tableProps.role},componentDidMount:function(e){c.componentDidMount(e)},componentDidUpdate:function(e){c.componentDidUpdate(e)},componentWillUnmount:function(){c.componentWillUnmount()}},this.allSelected=new ObservableValue(!1),this.columnLayout=TableColumnLayout.none,this.id="_select",this.width=2.5,this.widthStyle=IMeasurementStyle.REM,this.behaviors=[this.columnSelectBehavior],this.renderCell=function(t,e,o){var l,n=c.selection,i=n&&n.selected(t),n=n&&n.selectable(t);return document.body.classList.contains("dropdown-list-component-enabled")&&c.isListbox?React.createElement("div",{"aria-hidden":c.ariaHidden,className:css("bolt-table-cell-select bolt-table-cell bolt-list-cell flex-noshrink","col-"+e),"data-column-index":e,key:"col-select",onClick:preventDefault,onDoubleClick:preventDefault,onMouseDown:function(e){c.updateSelection(e,t),e.preventDefault()},onKeyDown:function(e){e.which===KeyCode.space&&(c.updateSelection(e,t),e.preventDefault())}},React.createElement("div",{className:"flex-row justify-center"},React.createElement("span",{className:"flex-row-inline"},React.createElement(Checkbox,{ariaLabel:"presentation"===(null==(l=c.props)?void 0:l.role)?void 0:Resources.SelectRowLabel,checked:!!i,excludeFocusZone:null==(l=c.props)?void 0:l.excludeFocusZone,excludeTabStop:!0,disabled:!n})))):React.createElement("td",{"aria-colindex":e+1,"aria-hidden":c.ariaHidden,className:css("bolt-table-cell-select bolt-table-cell bolt-list-cell","col-"+e),"data-column-index":e,key:"col-select",onClick:preventDefault,onDoubleClick:preventDefault,onMouseDown:function(e){c.updateSelection(e,t),e.preventDefault()},onKeyDown:function(e){e.which===KeyCode.space&&(c.updateSelection(e,t),e.preventDefault())}},React.createElement("div",{className:"flex-row justify-center"},React.createElement("span",{className:"flex-row-inline"},React.createElement(Checkbox,{ariaLabel:"presentation"===(null==(l=c.props)?void 0:l.role)?void 0:Resources.SelectRowLabel,checked:!!i,excludeFocusZone:null==(e=c.props)?void 0:e.excludeFocusZone,excludeTabStop:!0,disabled:!n}))))},this.renderHeaderCell=function(e,l,n){return React.createElement("th",{"aria-colindex":e+1,className:css("bolt-table-cell-select bolt-table-header-cell","col-header-"+e),"data-column-index":e,key:"col-select"},React.createElement("div",{className:"flex-row"},React.createElement(Observer,{allSelected:c.allSelected},function(e){var t=c.itemProvider,o=c.selection,t=t&&t.length;return o&&o.multiSelect&&-1!==t?React.createElement("div",{className:"flex-row flex-grow justify-center"},React.createElement(TriStateCheckbox,{ariaLabel:null!=(o=l.ariaLabel)?o:Resources.SelectAllRowsLabel,checked:e.allSelected,focuszoneId:n,onChange:c.onChangeHeader})):React.createElement("div",{className:"visually-hidden"},null!=(t=l.ariaLabel)?t:Resources.SelectionColumnLabel)})))},this.onChangeHeader=function(e){var t=c.itemProvider,o=c.onSelect,l=c.selection;if(l&&(!1!==c.allSelected.value?(l.clear(),announce(Resources.AllRowsUnselectedMessage,!0)):(l.select(0,t&&t.length),announce(Resources.AllRowsSelectedMessage,!0))),o&&t)for(var n=0;n<t.length;n++)o(e,c.getListRow(n))},this.onSelectionChange=function(){var e,t=c.itemProvider,o=c.selection;o&&(e=o.selectedCount,t=t&&t.length-o.unselectableCount,c.allSelected.value=0<e&&(e===t||void 0))},this.updateSelection=function(e,t){var o=c.onSelect,l=c.selection;l&&(l.selected(t)?l.unselect(t):l.select(t,1,!0)),o&&o(e,c.getListRow(t))},this.getListRow=function(e){return{data:c.itemProvider?c.itemProvider.value[e]:{},index:e}},this.props=e}return e.prototype.componentDidMount=function(e){var t=this.itemProvider,o=this.selection;o&&(o.subscribe(this.onSelectionChange),this.onSelectionChange()),t&&t.subscribe&&t.subscribe(this.onSelectionChange)},e.prototype.componentDidUpdate=function(e){var t=this.selection;t!==e.tableProps.selection&&(t&&t.unsubscribe(this.onSelectionChange),t=e.tableProps.selection,this.selection=t)&&t.subscribe(this.onSelectionChange),t&&this.onSelectionChange(),this.itemProvider!==e.tableProps.itemProvider&&(this.itemProvider&&this.itemProvider.unsubscribe&&this.itemProvider.unsubscribe(this.onSelectionChange),this.itemProvider=e.tableProps.itemProvider,this.itemProvider)&&this.itemProvider.subscribe&&this.itemProvider.subscribe(this.onSelectionChange)},e.prototype.componentWillUnmount=function(){var e=this.selection;e&&e.unsubscribe(this.onSelectionChange),this.itemProvider&&this.itemProvider.unsubscribe&&this.itemProvider.unsubscribe(this.onSelectionChange)},e}();export{ColumnSelect};