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

Control Brick for chief editor

var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,r=1,a=arguments.length;r<a;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,t){var r={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(r[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(a=Object.getOwnPropertySymbols(e);n<a.length;n++)t.indexOf(a[n])<0&&Object.prototype.propertyIsEnumerable.call(e,a[n])&&(r[a[n]]=e[a[n]])}return r},__spreadArrays=this&&this.__spreadArrays||function(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var a=Array(e),n=0;for(t=0;t<r;t++)for(var i=arguments[t],u=0,l=i.length;u<l;u++,n++)a[n]=i[u];return a};import React,{useEffect,useMemo,useState}from"react";import{Input,InputNumber,RadioGroup,Slider}from"@chief-editor/ui";import{BorderRadius,BorderRadiusPart}from"@chief-editor/icons";import{useRefCallback}from"@rc-hooks/use";import"../../../css/RadiusInput/index.less";export var InputNumberWrap=function(e){var t=e.idx,r=e.onValueChange,a=__rest(e,["idx","onValueChange"]),n=useRefCallback((function(e){r(t,e)}));return React.createElement(InputNumber,__assign({onValueChange:n},a))};export var getRadiusString=function(e){var t=e;return"number"==typeof e&&(t=Array(4).fill(e)),t.map((function(e){return e+"px"})).join(" ")};export function RadiusInputBrick(e){var t=e.styles,r=e.setValue,a=e.layout,n=e.value,i=e.creator,u=useState(0),l=u[0],s=u[1],o=useState([0,0,0,0]),c=o[0],p=o[1],f=useState("allSide"),d=f[0],m=f[1];useEffect((function(){var e,t=(null!==(e=n.match(/[\d\\.]+px/gi))&&void 0!==e?e:Array(4).fill("0")).map((function(e){return parseFloat(String(e))}));if(t.length<4)return m("allSide"),s(t[0]);"allSide"===d?s(t[0]):p(t)}),[n,d]);var g=useRefCallback((function(e){m(e||"allSide")})),h=useRefCallback((function(e){s(e),r(getRadiusString(e))})),R=useRefCallback((function(e,t){var a=__spreadArrays(c);a.splice(e,1,t),p(a),r(getRadiusString(a))})),y=useMemo((function(){return{marginRight:8,padding:0,flex:"none",width:24,height:24,alignItem:"center",justifyContent:"center"}}),[]);return React.createElement("div",{"data-id":i,className:"brick-radius-input",style:__assign(__assign({display:"flex"},a),t)},React.createElement(RadioGroup,{value:d,onValueChange:g,style:{display:"flex",flex:"none"}},React.createElement(RadioGroup.Button,{value:"allSide",style:y},React.createElement(BorderRadius,{size:12,style:{verticalAlign:"unset"}})),React.createElement(RadioGroup.Button,{value:"oneSide",style:y},React.createElement(BorderRadiusPart,{size:12,style:{verticalAlign:"unset"}}))),"allSide"===d?React.createElement(Slider,{withInput:!0,value:l,onValueChange:h,min:0,max:1e3,step:1,style:{flex:"auto"}}):React.createElement(Input.Group,{style:{flex:"auto"}},React.createElement(InputNumber,{className:"brick-radius-input-part brick-radius-input-part-0",value:c[0],onValueChange:function(e){return R(0,e)}}),React.createElement(InputNumber,{className:"brick-radius-input-part brick-radius-input-part-1",value:c[1],onValueChange:function(e){return R(1,e)}}),React.createElement(InputNumber,{className:"brick-radius-input-part brick-radius-input-part-2",value:c[2],onValueChange:function(e){return R(2,e)}}),React.createElement(InputNumber,{className:"brick-radius-input-part brick-radius-input-part-3",value:c[3],onValueChange:function(e){return R(3,e)}})))}