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