azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 5.1 kB
JavaScript
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";class ColumnSelect{constructor(e){this.isListbox=!1,this.columnSelectBehavior={initialize:e=>{this.ariaHidden="menu"===e.tableProps.role,this.itemProvider=e.tableProps.itemProvider,this.selection=e.tableProps.selection,this.onSelect=e.tableProps.onSelect,this.isListbox="listbox"===e.tableProps.role},componentDidMount:e=>{this.componentDidMount(e)},componentDidUpdate:e=>{this.componentDidUpdate(e)},componentWillUnmount:()=>{this.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=(t,e,l)=>{var i,o=this["selection"],s=o&&o.selected(t),o=o&&o.selectable(t);return this.isListbox?React.createElement("div",{"aria-hidden":this.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:e=>{this.updateSelection(e,t),e.preventDefault()},onKeyDown:e=>{e.which===KeyCode.space&&(this.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==(i=this.props)?void 0:i.role)?void 0:Resources.SelectRowLabel,checked:!!s,excludeFocusZone:null==(i=this.props)?void 0:i.excludeFocusZone,excludeTabStop:!0,disabled:!o})))):React.createElement("td",{"aria-colindex":e+1,"aria-hidden":this.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:e=>{this.updateSelection(e,t),e.preventDefault()},onKeyDown:e=>{e.which===KeyCode.space&&(this.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==(i=this.props)?void 0:i.role)?void 0:Resources.SelectRowLabel,checked:!!s,excludeFocusZone:null==(e=this.props)?void 0:e.excludeFocusZone,excludeTabStop:!0,disabled:!o}))))},this.renderHeaderCell=(e,i,o)=>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:this.allSelected},e=>{var{itemProvider:t,selection:l}=this,t=t&&t.length;return l&&l.multiSelect&&-1!==t?React.createElement("div",{className:"flex-row flex-grow justify-center"},React.createElement(TriStateCheckbox,{ariaLabel:null!=(l=i.ariaLabel)?l:Resources.SelectAllRowsLabel,checked:e.allSelected,focuszoneId:o,onChange:this.onChangeHeader})):React.createElement("div",{className:"visually-hidden"},null!=(t=i.ariaLabel)?t:Resources.SelectionColumnLabel)}))),this.onChangeHeader=t=>{var{itemProvider:l,onSelect:i,selection:e}=this;if(e&&(!1!==this.allSelected.value?(e.clear(),announce(Resources.AllRowsUnselectedMessage,!0)):(e.select(0,l&&l.length),announce(Resources.AllRowsSelectedMessage,!0))),i&&l)for(let e=0;e<l.length;e++)i(t,this.getListRow(e))},this.onSelectionChange=()=>{var e,{itemProvider:t,selection:l}=this;l&&(e=l.selectedCount,t=t&&t.length-l.unselectableCount,this.allSelected.value=0<e&&(e===t||void 0))},this.updateSelection=(e,t)=>{var{onSelect:l,selection:i}=this;i&&(i.selected(t)?i.unselect(t):i.select(t,1,!0)),l&&l(e,this.getListRow(t))},this.getListRow=e=>({data:this.itemProvider?this.itemProvider.value[e]:{},index:e}),this.props=e}componentDidMount(e){var{itemProvider:t,selection:l}=this;l&&(l.subscribe(this.onSelectionChange),this.onSelectionChange()),t&&t.subscribe&&t.subscribe(this.onSelectionChange)}componentDidUpdate(e){let 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)}componentWillUnmount(){var e=this["selection"];e&&e.unsubscribe(this.onSelectionChange),this.itemProvider&&this.itemProvider.unsubscribe&&this.itemProvider.unsubscribe(this.onSelectionChange)}}export{ColumnSelect};