@figlinq/react-chart-editor/lib/components/widgets/ColorPicker.js

plotly.js chart editor react component UI

import{useState}from"react";import PropTypes from"prop-types";import tinycolor from"tinycolor2";import{SketchPicker}from"@hello-pangea/color-picker";import{COLOR_PICKER_SWATCH}from"../../lib/constants";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const extractRGB=c=>c.rgb||c;const getColorSource=c=>c.source==="hex"?c.hex:extractRGB(c);const toTinyColor=c=>tinycolor(getColorSource(c));const ColorPicker=props=>{const[isVisible,setIsVisible]=useState(false);const onSelectedColorChange=newColor=>{const color=toTinyColor(newColor);props.onColorChange(color.toRgbString())};const toggleVisible=()=>{setIsVisible(!isVisible)};const selectedColor=tinycolor(props.selectedColor);const colorText=selectedColor.toHexString();const rgbString=selectedColor.toRgbString();const swatchStyle={backgroundColor:rgbString};return _jsxs(_Fragment,{children:[_jsxs("div",{className:"colorpicker__container",children:[_jsx("div",{className:"colorpicker",children:_jsx("div",{className:"colorpicker__swatch +cursor-clickable",style:swatchStyle,onClick:toggleVisible})}),_jsx("div",{className:"colorpicker__selected-color +hover-grey",onClick:toggleVisible,children:colorText})]}),isVisible&&_jsx(SketchPicker,{color:rgbString,onChangeComplete:onSelectedColorChange,presetColors:COLOR_PICKER_SWATCH,width:190})]})};ColorPicker.propTypes={onColorChange:PropTypes.func.isRequired,selectedColor:PropTypes.string};export default ColorPicker;
//# sourceMappingURL=ColorPicker.js.map