@chief-editor/brick-control/lib/brick/Opacity/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 i in r=arguments[t])Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i]);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")),use_1=require("@rc-hooks/use"),ui_1=require("@chief-editor/ui");function OpacityBrick(e){var r=e.styles,t=e.setValue,a=e.layout,i=e.value,s=e.creator,u=e.config.props,n=u.format,c=u.parse,o=use_1.useRefGetter(n),_=use_1.useRefGetter(c),l=react_1.useCallback((function(e){var r=o();return r?r(e):e+"%"}),[]),f=react_1.useCallback((function(e){var r=_();return r?r(e):e.replace("%","")}),[]),p=react_1.useState(i/100),v=p[0],h=p[1];react_1.useEffect((function(){h(100*i)}),[i]);var y=use_1.useRefCallback((function(e){t(e/100)}));return react_1.default.createElement(ui_1.Slider,{withInput:!0,min:0,max:100,step:1,format:l,parse:f,"data-id":s,style:__assign(__assign({},a),r),onValueChange:y,value:v})}exports.OpacityBrick=OpacityBrick;