fx-form-widget
Version:
131 lines (130 loc) • 4.1 kB
JavaScript
import _Col from "antd/es/col";
import _Tooltip from "antd/es/tooltip";
import _Form from "antd/es/form";
import * as React from 'react';
import { useContext } from 'react';
import classnames from 'classnames';
import { Widgets } from '../../widgets';
import { Context } from '../../../previewPlatform';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { isNotNullValue } from '../../tools';
// 不同布局组件的id集合
var LAYOUT_COMPONENTIDS = {
SUB_FORM_ID: 100,
GROUP_ID: 101,
SEPARATOR_ID: 102
};
var DefaultWidgets = Widgets;
var Item = _Form.Item;
// 添加校验规则
export var setRules = function setRules(viewSchema) {
var required = viewSchema.required,
minLength = viewSchema.minLength,
maxLength = viewSchema.maxLength,
title = viewSchema.title,
pattern = viewSchema.pattern,
patternErrMsg = viewSchema.patternErrMsg;
// 校验规则
var rulesList = [];
rulesList.push({
required: required,
message: title + "\u4E0D\u80FD\u4E3A\u7A7A"
});
// 最小字数
if (isNotNullValue(minLength)) {
rulesList.push({
min: minLength,
message: "\u8F93\u5165\u4E0D\u80FD\u5C11\u4E8E" + minLength + "\u4E2A\u5B57\u7B26"
});
}
// 最大字数
if (isNotNullValue(maxLength)) {
rulesList.push({
max: maxLength,
message: "\u8F93\u5165\u4E0D\u80FD\u591A\u4E8E" + maxLength + "\u4E2A\u5B57\u7B26"
});
}
if (isNotNullValue(pattern)) {
try {
var regexp = new RegExp(pattern);
rulesList.push({
pattern: regexp,
message: patternErrMsg || undefined,
validateTrigger: 'onBlur'
});
} catch (error) {
console.error(error);
}
}
return rulesList;
};
var RenderWidget = function RenderWidget(_ref) {
var schema = _ref.schema,
onCheck = _ref.onCheck,
children = _ref.children;
var id = schema.id,
wid = schema.wid,
widget = schema.widget,
_schema$viewSchema = schema.viewSchema,
title = _schema$viewSchema.title,
description = _schema$viewSchema.description,
data = _schema$viewSchema.data,
fieldName = _schema$viewSchema.fieldName,
required = _schema$viewSchema.required;
var ContentContext = useContext(Context);
var Widget = DefaultWidgets[widget];
if (!Widget) {
return null;
}
var onSchemaChange = ContentContext.onSchemaChange,
globalData = ContentContext.globalData;
var _globalData$column = globalData.column,
column = _globalData$column === void 0 ? 3 : _globalData$column;
var onChange = function onChange(value) {
schema.viewSchema.data = value;
onSchemaChange('edit', schema);
};
var renderDescription = function renderDescription(description) {
if (description) {
return /*#__PURE__*/React.createElement(_Tooltip, {
title: description
}, /*#__PURE__*/React.createElement(ExclamationCircleOutlined, null));
}
return null;
};
var className = classnames('label-content', {
'label-content-required': required
});
var renderTitle = function renderTitle(title) {
return /*#__PURE__*/React.createElement("div", {
className: className
}, title, renderDescription(description));
};
if (id === LAYOUT_COMPONENTIDS['SEPARATOR_ID']) {
return /*#__PURE__*/React.createElement(_Col, {
span: 24
}, /*#__PURE__*/React.createElement(Item, {
className: "separator-wrap"
}, /*#__PURE__*/React.createElement("div", {
className: "separator-title"
}, title), /*#__PURE__*/React.createElement(Widget, {
schema: schema.viewSchema
})));
}
return /*#__PURE__*/React.createElement(_Col, {
span: column === 1 ? 16 : 24 / column
}, /*#__PURE__*/React.createElement(Item, {
name: fieldName ? fieldName : wid,
rules: setRules(schema.viewSchema),
label: renderTitle(title),
className: "form-item-widget-wrapper"
}, /*#__PURE__*/React.createElement(Widget, {
isInit: true,
value: data,
onChange: onChange,
onCheck: onCheck,
schema: schema.viewSchema,
children: children
})));
};
export default RenderWidget;