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

Control Brick for chief editor

"use strict";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 u=arguments[t],i=0,l=u.length;i<l;i++,n++)a[n]=u[i];return a},__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__importStar(require("react")),ui_1=require("@chief-editor/ui"),icons_1=require("@chief-editor/icons"),use_1=require("@rc-hooks/use");function RadiusInputBrick(e){var t=e.styles,r=e.setValue,a=e.layout,n=e.value,u=e.creator,i=react_1.useState(0),l=i[0],s=i[1],c=react_1.useState([0,0,0,0]),o=c[0],p=c[1],_=react_1.useState("allSide"),f=_[0],d=_[1];react_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 d("allSide"),s(t[0]);"allSide"===f?s(t[0]):p(t)}),[n,f]);var g=use_1.useRefCallback((function(e){d(e||"allSide")})),m=use_1.useRefCallback((function(e){s(e),r(exports.getRadiusString(e))})),h=use_1.useRefCallback((function(e,t){var a=__spreadArrays(o);a.splice(e,1,t),p(a),r(exports.getRadiusString(a))})),y=react_1.useMemo((function(){return{marginRight:8,padding:0,flex:"none",width:24,height:24,alignItem:"center",justifyContent:"center"}}),[]);return react_1.default.createElement("div",{"data-id":u,className:"brick-radius-input",style:__assign(__assign({display:"flex"},a),t)},react_1.default.createElement(ui_1.RadioGroup,{value:f,onValueChange:g,style:{display:"flex",flex:"none"}},react_1.default.createElement(ui_1.RadioGroup.Button,{value:"allSide",style:y},react_1.default.createElement(icons_1.BorderRadius,{size:12,style:{verticalAlign:"unset"}})),react_1.default.createElement(ui_1.RadioGroup.Button,{value:"oneSide",style:y},react_1.default.createElement(icons_1.BorderRadiusPart,{size:12,style:{verticalAlign:"unset"}}))),"allSide"===f?react_1.default.createElement(ui_1.Slider,{withInput:!0,value:l,onValueChange:m,min:0,max:1e3,step:1,style:{flex:"auto"}}):react_1.default.createElement(ui_1.Input.Group,{style:{flex:"auto"}},react_1.default.createElement(ui_1.InputNumber,{className:"brick-radius-input-part brick-radius-input-part-0",value:o[0],onValueChange:function(e){return h(0,e)}}),react_1.default.createElement(ui_1.InputNumber,{className:"brick-radius-input-part brick-radius-input-part-1",value:o[1],onValueChange:function(e){return h(1,e)}}),react_1.default.createElement(ui_1.InputNumber,{className:"brick-radius-input-part brick-radius-input-part-2",value:o[2],onValueChange:function(e){return h(2,e)}}),react_1.default.createElement(ui_1.InputNumber,{className:"brick-radius-input-part brick-radius-input-part-3",value:o[3],onValueChange:function(e){return h(3,e)}})))}require("../../../css/RadiusInput/index.less"),exports.InputNumberWrap=function(e){var t=e.idx,r=e.onValueChange,a=__rest(e,["idx","onValueChange"]),n=use_1.useRefCallback((function(e){r(t,e)}));return react_1.default.createElement(ui_1.InputNumber,__assign({onValueChange:n},a))},exports.getRadiusString=function(e){var t=e;return"number"==typeof e&&(t=Array(4).fill(e)),t.map((function(e){return e+"px"})).join(" ")},exports.RadiusInputBrick=RadiusInputBrick;