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

UI Component for chief editor

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