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