azure-devops-ui/Components/ColorPicker/ColorCallout.min.js

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./ColorPicker.css";import*as React from"react";import{wait}from"../../Core/Util/Promise";import{Button}from"../../Button";import{Callout,ContentSize}from"../../Callout";import{FocusZone,FocusZoneDirection,FocusZoneKeyStroke}from"../../FocusZone";import{SimpleTableCell,Table}from"../../Table";import{css,KeyCode}from"../../Util";import{colorItems,colorRowProvider}from"./Utils";class ColorDropdownCalloutComponent extends React.Component{constructor(){super(...arguments),this._focusedColumn=0,this.renderCell=(e,o,t,r,n)=>{const l=r.cells[o];r=null==(r=this.props.selection)?void 0:r.value[0].beginIndex,r=l===colorItems[null!=r?r:0];return React.createElement(SimpleTableCell,{ariaRowIndex:n,columnIndex:o,key:o,tableColumn:t},React.createElement(Button,{id:e+"-"+o,className:css(r&&"bolt-dropdown-init-focus","color-button flex-grow"),style:{backgroundColor:"#"+l.id},tooltipProps:{text:l.text},onClick:e=>{var o,t=colorItems.findIndex(e=>e.id===l.id);0<=t&&(null!=(o=this.props.selection)&&o.select(t),this.props.onSelect&&this.props.onSelect(e,colorItems[t]),this.props.onDismiss())},onFocus:()=>this._focusedColumn=o,onKeyDown:e=>{0===o&&e.which===KeyCode.leftArrow&&e.preventDefault()}}))},this.columns=[{id:"c1",renderCell:this.renderCell,width:-100/11},{id:"c2",renderCell:this.renderCell,width:-100/11},{id:"c3",renderCell:this.renderCell,width:-100/11},{id:"c4",renderCell:this.renderCell,width:-100/11},{id:"c5",renderCell:this.renderCell,width:-100/11},{id:"c6",renderCell:this.renderCell,width:-100/11},{id:"c7",renderCell:this.renderCell,width:-100/11},{id:"c8",renderCell:this.renderCell,width:-100/11},{id:"c9",renderCell:this.renderCell,width:-100/11},{id:"c10",renderCell:this.renderCell,width:-100/11},{id:"c11",renderCell:this.renderCell,width:-100/11}]}render(){var{anchorElement:e,anchorOffset:o,anchorOrigin:t,anchorPoint:r,blurDismiss:n=!0,calloutContentClassName:l,contentLocation:i,dropdownOrigin:s,excludeTabStop:c,id:d,lightDismiss:a,onFilterKeyDown:m}=this.props;const u=()=>{this.props.onDismiss&&this.props.onDismiss()};return React.createElement(Callout,{anchorElement:e,anchorOffset:o,anchorOrigin:t,anchorPoint:r,blurDismiss:n,calloutOrigin:s,contentClassName:css(l,"bolt-dropdown flex-column custom-scrollbar v-scroll-auto h-scroll-hidden color-dropdown-callout"),contentLocation:i,contentShadow:!0,contentSize:ContentSize.Auto,escDismiss:!0,id:d,lightDismiss:a,focuszoneProps:{postprocessKeyStroke:e=>e.which!==KeyCode.tab||e.defaultPrevented?FocusZoneKeyStroke.IgnoreNone:(e.preventDefault(),u(),FocusZoneKeyStroke.IgnoreAll)},onDismiss:u},React.createElement(FocusZone,{circularNavigation:!0,defaultActiveElement:".bolt-dropdown-init-focus",direction:FocusZoneDirection.Vertical,focusOnMount:!0},React.createElement("div",{className:"bolt-dropdown-container no-outline",onKeyDown:m},React.createElement("div",{"aria-hidden":"true",className:"no-outline",tabIndex:c?void 0:-1,role:"listbox"}),React.createElement(Table,{columns:this.columns,containerClassName:"color-dropdown-table-container",itemProvider:colorRowProvider,onFocus:async(e,o)=>{var e=e.nativeEvent;await wait(0),"TR"===e.target.tagName&&(e=e.target.querySelector(`td[data-column-index="${this._focusedColumn}"] button`))&&e!==document.activeElement&&e.focus()}}))))}}export{ColorDropdownCalloutComponent};