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

Control Brick for chief editor

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