@chief-editor/ui/es/components/color-picker/index.js

UI Component for chief editor

var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var o,r=1,t=arguments.length;r<t;r++)for(var n in o=arguments[r])Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,o){var r={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&o.indexOf(t)<0&&(r[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)o.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(r[t[n]]=e[t[n]])}return r};import React,{useCallback,useMemo,useState}from"react";import{guid}from"@co-hooks/util";import{RcColor}from"@rc-hooks/color";import{RcPopper}from"@rc-hooks/popper";import{useSingleton}from"@rc-hooks/use";import{ColorContent}from"../color-panel/components/ColorContent";import{PopoverWrapper}from"../popover/PopoverWrapper";import{ColorInput}from"./ColorInput";export function ColorPicker(e){var o=e.children,r=e.onChange,t=e.onValueChange,n=e.value,a=e.hasAlpha,l=e.placement,p=e.offset,c=e.presetColors,s=e.onHide,i=e.onShow,u=e.colorBoardStyle,f=e.format,h=void 0===f?"hex":f,m=__rest(e,["children","onChange","onValueChange","value","hasAlpha","placement","offset","presetColors","onHide","onShow","colorBoardStyle","format"]),g=useSingleton((function(){return guid()})),C=useMemo((function(){return[g]}),[]),v=useState(!1),d=v[0],y=v[1],_=useCallback((function(){y(!0),i&&i()}),[]),O=useCallback((function(){y(!1),s&&s()}),[]);return React.createElement(RcColor,{hasAlpha:a,value:n,format:h,onChange:r,onValueChange:t},React.createElement(RcPopper,null,React.createElement(ColorInput,__assign({triggerId:g},m,{colorBoardStyle:u})),React.createElement(PopoverWrapper,{show:d,onShow:_,onHide:O,triggerIds:C,preventOverflow:!0,offset:p,placement:l,getPopper:React.createElement(ColorContent,{hasAlpha:a,presetColors:c},o)})))}