@chief-editor/brick-control/es/brick/BorderInput/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 l in t=arguments[r])Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l]);return e}).apply(this,arguments)};import React,{useEffect,useState}from"react";import{InputNumber,Select}from"@chief-editor/ui";import{useRefCallback}from"@rc-hooks/use";import{AlignText}from"@chief-editor/icons";import{ColorPickerComp}from"../Color/Brick";export var reColor=/(#\w+|rgb.*\)|transparent)/i;export var reWidth=/(\d+)px/i;export var reStyle=/(solid|dashed|none|dotted)/i;export var getBorderPart=function(e){var t,r,a,l=null!=e?e:"",n=(null===(t=l.match(reWidth))||void 0===t?void 0:t[1])||1,o=(null===(r=l.match(reStyle))||void 0===r?void 0:r[1])||"none",i=(null===(a=l.match(reColor))||void 0===a?void 0:a[1])||"#000";return{width:Number(n),style:o,color:i}};export var getBorderString=function(e){var t="number"==typeof e.width?e.width+"px":e.width;return Object.values(__assign(__assign({},e),{width:t})).join(" ")};var borderStyle={border:"1px rgba(255, 255, 255, 0.6)",width:"52px"};export function BorderInputBrick(e){var t=e.styles,r=e.setValue,a=e.layout,l=e.value,n=e.creator,o=useState(getBorderPart(l)),i=o[0],s=o[1];useEffect((function(){return s(getBorderPart(l))}),[l]);var c=useRefCallback((function(e){var t=getBorderString(__assign(__assign({},i),e));r(t)})),d=useRefCallback((function(e){return c({color:e})})),u=useRefCallback((function(e){return c({style:e})})),p=useRefCallback((function(e){return c({width:e+"px"})}));return React.createElement("div",{"data-id":n,style:__assign(__assign({},a),t)},React.createElement(ColorPickerComp,{value:i.color,onValueChange:d}),React.createElement("div",{className:"style-and-width",style:{marginTop:16,display:"flex"}},React.createElement(Select,{value:i.style,onValueChange:u,style:{marginRight:8}},React.createElement(Select.Option,{value:"solid",label:"实线"},React.createElement("div",{style:__assign(__assign({},borderStyle),{borderStyle:"solid"})})),React.createElement(Select.Option,{value:"dashed",label:"虚线"},React.createElement("div",{style:__assign(__assign({},borderStyle),{borderStyle:"dashed"})})),React.createElement(Select.Option,{value:"dotted",label:"点"},React.createElement("div",{style:__assign(__assign({},borderStyle),{borderStyle:"dotted"})})),React.createElement(Select.Option,{value:"none",label:"无边框"})),React.createElement(InputNumber,{prefix:React.createElement(AlignText,{size:18}),suffix:"PX",style:{width:"calc(50% - 4px)",flex:"none"},value:i.width,onValueChange:p})))}