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

React components for building web UI in Azure DevOps

import{__awaiter,__extends,__generator}from"tslib";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";var ColorDropdownCalloutComponent=function(e){function o(){var i=null!==e&&e.apply(this,arguments)||this;return i._focusedColumn=0,i.renderCell=function(e,o,t,n,r){var l=n.cells[o],n=null==(n=i.props.selection)?void 0:n.value[0].beginIndex,n=l===colorItems[null!=n?n:0];return React.createElement(SimpleTableCell,{ariaRowIndex:r,columnIndex:o,key:o,tableColumn:t},React.createElement(Button,{id:"".concat(e,"-").concat(o),className:css(n&&"bolt-dropdown-init-focus","color-button flex-grow"),style:{backgroundColor:"#"+l.id},tooltipProps:{text:l.text},onClick:function(e){var o,t=colorItems.findIndex(function(e){return e.id===l.id});0<=t&&(null!=(o=i.props.selection)&&o.select(t),i.props.onSelect&&i.props.onSelect(e,colorItems[t]),i.props.onDismiss())},onFocus:function(){return i._focusedColumn=o},onKeyDown:function(e){0===o&&e.which===KeyCode.leftArrow&&e.preventDefault()}}))},i.columns=[{id:"c1",renderCell:i.renderCell,width:-100/11},{id:"c2",renderCell:i.renderCell,width:-100/11},{id:"c3",renderCell:i.renderCell,width:-100/11},{id:"c4",renderCell:i.renderCell,width:-100/11},{id:"c5",renderCell:i.renderCell,width:-100/11},{id:"c6",renderCell:i.renderCell,width:-100/11},{id:"c7",renderCell:i.renderCell,width:-100/11},{id:"c8",renderCell:i.renderCell,width:-100/11},{id:"c9",renderCell:i.renderCell,width:-100/11},{id:"c10",renderCell:i.renderCell,width:-100/11},{id:"c11",renderCell:i.renderCell,width:-100/11}],i}return __extends(o,e),o.prototype.render=function(){function o(){t.props.onDismiss&&t.props.onDismiss()}var t=this,e=this.props,n=e.anchorElement,r=e.anchorOffset,l=e.anchorOrigin,i=e.anchorPoint,c=e.blurDismiss,s=e.calloutContentClassName,a=e.contentLocation,d=e.dropdownOrigin,u=e.excludeTabStop,m=e.id,p=e.lightDismiss,e=e.onFilterKeyDown;return React.createElement(Callout,{anchorElement:n,anchorOffset:r,anchorOrigin:l,anchorPoint:i,blurDismiss:void 0===c||c,calloutOrigin:d,contentClassName:css(s,"bolt-dropdown flex-column custom-scrollbar v-scroll-auto h-scroll-hidden color-dropdown-callout"),contentLocation:a,contentShadow:!0,contentSize:ContentSize.Auto,escDismiss:!0,id:m,lightDismiss:p,focuszoneProps:{postprocessKeyStroke:function(e){return e.which!==KeyCode.tab||e.defaultPrevented?FocusZoneKeyStroke.IgnoreNone:(e.preventDefault(),o(),FocusZoneKeyStroke.IgnoreAll)}},onDismiss:o},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:e},React.createElement("div",{"aria-hidden":"true",className:"no-outline",tabIndex:u?void 0:-1,role:"listbox"}),React.createElement(Table,{columns:this.columns,containerClassName:"color-dropdown-table-container",itemProvider:colorRowProvider,onFocus:function(n,e){return __awaiter(t,void 0,void 0,function(){var o,t;return __generator(this,function(e){switch(e.label){case 0:return o=n.nativeEvent,[4,wait(0)];case 1:return e.sent(),"TR"===o.target.tagName&&(t=o.target,t=t.querySelector('td[data-column-index="'.concat(this._focusedColumn,'"] button')))&&t!==document.activeElement&&t.focus(),[2]}})})}}))))},o}(React.Component);export{ColorDropdownCalloutComponent};