jjb-lc-designable
Version:
基于alibaba-designable源码二次封装的表单设计器。
94 lines • 3.12 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
/*
* 支持文本、数字、布尔、表达式
* Todo: JSON、富文本，公式
*/
import React from 'react';
import { createPolyInput } from '../PolyInput';
import { Input, Button, Popover, InputNumber, Select } from 'antd';
import { MonacoInput } from '../MonacoInput';
import { TextWidget } from 'jjb-lc-designable/react';
const STARTTAG_REX = /<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
const EXPRESSION_REX = /^\{\{([\s\S]*)\}\}$/;
const isNumber = value => typeof value === 'number';
const isBoolean = value => typeof value === 'boolean';
const isExpression = value => {
return typeof value === 'string' && EXPRESSION_REX.test(value);
};
const isRichText = value => {
return typeof value === 'string' && STARTTAG_REX.test(value);
};
const isNormalText = value => {
return typeof value === 'string' && !isExpression(value) && !isRichText(value);
};
const takeNumber = value => {
const num = String(value).replace(/[^\d\.]+/, '');
if (num === '') return;
return Number(num);
};
export const ValueInput = createPolyInput([{
type: 'TEXT',
icon: 'Text',
component: Input,
checker: isNormalText
}, {
type: 'EXPRESSION',
icon: 'Expression',
component: props => {
return /*#__PURE__*/React.createElement(Popover, {
content: /*#__PURE__*/React.createElement("div", {
style: {
width: 400,
height: 200,
marginLeft: -16,
marginRight: -16,
marginBottom: -12
}
}, /*#__PURE__*/React.createElement(MonacoInput, _extends({}, props, {
language: "javascript.expression"
}))),
trigger: "click"
}, /*#__PURE__*/React.createElement(Button, {
block: true
}, /*#__PURE__*/React.createElement(TextWidget, {
token: "SettingComponents.ValueInput.expression"
})));
},
checker: isExpression,
toInputValue: value => {
if (!value || value === '{{}}') return;
const matched = String(value).match(EXPRESSION_REX);
return matched?.[1] || value || '';
},
toChangeValue: value => {
if (!value || value === '{{}}') return;
const matched = String(value).match(EXPRESSION_REX);
return `{{${matched?.[1] || value || ''}}}`;
}
}, {
type: 'BOOLEAN',
icon: 'Boolean',
component: props => /*#__PURE__*/React.createElement(Select, _extends({}, props, {
options: [{
label: 'True',
value: true
}, {
label: 'False',
value: false
}]
})),
checker: isBoolean,
toInputValue: value => {
return !!value;
},
toChangeValue: value => {
return !!value;
}
}, {
type: 'NUMBER',
icon: 'Number',
component: InputNumber,
checker: isNumber,
toInputValue: takeNumber,
toChangeValue: takeNumber
}]);