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