azure-devops-ui/Components/ColorPicker/ExpandableColorButton.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{ObservableValue,useObservable}from"../../Core/Observable";import{ExpandableButton}from"../../Button";import{IconSize}from"../../Icon";import{ListSelection}from"../../List";import{Observer}from"../../Observer";import{css}from"../../Util";import{ColorDropdownCallout}from"./ColorDropdown";import{addColorClass,colorItems}from"./Utils";function ExpandableColorButton(o){function a(o,e){n.value="#"+e.id,l("#"+e.id)}var e=o.ariaLabel,r=o.className,t=o.color,l=o.onColorSelected,s=React.useRef(new ListSelection),n=useObservable("#000000")[0],o=(React.useEffect(function(){n.value=t;var o=colorItems.findIndex(function(o){return"#"+o.id===t});s.current.select(0<=o?o:0)},[t]),addColorClass(t));return React.createElement("div",{className:"flex-column justify-center color-callout"},React.createElement(ExpandableButton,{ariaLabel:e,className:css(r,o,"color-dropdown color-callout"),renderCallout:function(o,e,r,t,l,n,c){return React.createElement(ColorDropdownCallout,{id:e,focusOnMount:!0,anchorElement:r,anchorOffset:t,anchorOrigin:l,anchorPoint:n,dropdownOrigin:c,blurDismiss:!0,lightDismiss:!0,onDismiss:o.collapse,items:colorItems,filterText:new ObservableValue(""),onSelect:a,selection:s.current})},iconProps:{iconName:"FontColor",size:IconSize.medium},hideDropdownIcon:!0}),React.createElement(Observer,{color:n},function(o){return React.createElement("div",{className:"style-rule-font-color-bar",style:{backgroundColor:o.color}})}))}export{ExpandableColorButton};