@chief-editor/brick-control/es/brick/Color/Brick.js

Control Brick for chief editor

var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,a=1,r=arguments.length;a<r;a++)for(var n in t=arguments[a])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}).apply(this,arguments)};import React,{useCallback,useEffect,useState}from"react";import{ColorPicker,Input,InputNumber}from"@chief-editor/ui";import{RGBA2HEX,string2RGB}from"@co-hooks/color";import{useRefCallback}from"@rc-hooks/use";export var getRgba=function(e){var t,a=null!==(t=string2RGB(e))&&void 0!==t?t:{},r=a.r,n=void 0===r?255:r,o=a.g,u=void 0===o?255:o,l=a.b,c=void 0===l?255:l,i=a.a;return{r:n,g:u,b:c,a:void 0===i?100:i}};export var RGBA2RGBHex=function(e){var t=RGBA2HEX(getRgba(e));return t.length>7?t.slice(0,7):t};export var getAlpha=function(e){return(string2RGB(e)||{a:100}).a};export var ColorPickerComp=function(e){var t=e.value,a=e.onValueChange,r=useCallback((function(e){return e+"%"}),[]),n=useCallback((function(e){return e.replace("%","")}),[]),o=useRefCallback(a),u=useState(t),l=u[0],c=u[1],i=useState(getAlpha(t)),s=i[0],g=i[1],p=useCallback((function(e){var t=getRgba(l),a=t.r,r=t.g,n=t.b;o("rgba("+a+", "+r+", "+n+", "+e/100+")")}),[l]),f=useState(t),v=f[0],R=f[1],b=useRefCallback((function(){var e=getRgba(v),t=e.r,a=e.g,r=e.b;o("rgba("+t+", "+a+", "+r+", "+s/100+")")}));return useEffect((function(){var e=RGBA2HEX(getRgba(t));c(e),R(RGBA2RGBHex(e)),g(getAlpha(e))}),[t]),React.createElement(Input.Group,null,React.createElement(Input,{prefix:React.createElement(ColorPicker,{hasAlpha:!0,format:"rgb",colorBoardStyle:{height:"16px",width:"16px",borderRadius:0},onValueChange:o,offset:{x:-30,y:8},value:l}),value:v,onValueChange:R,onBlur:b}),React.createElement(InputNumber,{min:0,max:100,step:1,style:{width:64},value:s,onValueChange:p,parse:n,format:r}))};export function ColorBrick(e){var t=e.styles,a=e.setValue,r=e.layout,n=e.value,o=e.creator;return React.createElement("div",{"data-id":o,style:__assign(__assign({},r),t)},React.createElement(ColorPickerComp,{value:n,onValueChange:a}))}