@m-materials/form-item
Version:
基于antd中form表单，加入了自定义组件，以简化代码为模板。
185 lines (145 loc) • 6.56 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.FormRowWrapper = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _antd = require("antd");
var _lodash = _interopRequireDefault(require("lodash"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _excluded = ["children"];
function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
// 检查是否需要克隆组件，减少渲染
function checkNeedClone(_ref) {
var item = _ref.item,
props = _ref.props;
// 如果明显不能操作，也设置了必填，组件纠错
if (item.props.disabled === !!item.props.required || item.props.hidden === !!item.props.required) {
return true;
}
if (props.isDetail !== item.props.disabled) {
return true;
} // 如果是明细，需要把必填给取消掉
var isDetail = props.isDetail;
if (isDetail) {
if (item.props.rules && item.props.rules.required) {
return true;
}
} else {
// 不是明细，有校验规则也需要克隆
if (item.props.validator) {
return true;
}
}
return false;
}
function handleAddItem(item) {
// 将用span包含的子元素取出来
if (item.type && (item.type === 'span' || item.type === 'Row' || item.type === 'Tooltip')) {
for (var _iterator = _createForOfIteratorHelperLoose(item.props.children), _step; !(_step = _iterator()).done;) {
var childItem = _step.value;
if (childItem) {
return childItem;
}
}
} else {
return item;
}
}
var FormRowWrapper = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
var contentArray = [];
var children = props.children,
others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
var content = children;
var _Form$useForm = _antd.Form.useForm(),
form = _Form$useForm[0]; // 将FormItem分组并重新渲染
if (_lodash["default"].isArray(content)) {
for (var _iterator2 = _createForOfIteratorHelperLoose(content), _step2; !(_step2 = _iterator2()).done;) {
var item = _step2.value;
if (_lodash["default"].isArray(item)) {
for (var k = 0; k < item.length; k++) {
contentArray.push(handleAddItem(item[k]));
}
} else if (item) {
contentArray.push(handleAddItem(item));
}
}
} else {
contentArray.push(handleAddItem(content));
} // 实现span超过24自动加Row换行
var renderContent = [];
var lineSpanSum = 0;
for (var i = 0; i < contentArray.length; i++) {
if (contentArray[i].props.hidden || _lodash["default"].isArray(contentArray[i])) {
lineSpanSum += 0;
} else {
var span = contentArray[i].props.span || 8;
var addNumber = 0;
if (parseInt((lineSpanSum + span - 1) / 24) - parseInt(lineSpanSum / 24) === 1) {
addNumber = parseInt((lineSpanSum + span) / 24) * 24 - lineSpanSum;
}
lineSpanSum += contentArray[i].props.span || 8;
lineSpanSum += addNumber;
}
var j = parseInt((lineSpanSum - 1) / 24);
if (!renderContent[j]) {
renderContent[j] = [];
}
renderContent[j].push(contentArray[i]);
}
return /*#__PURE__*/_react["default"].createElement(_antd.Form, (0, _extends2["default"])({}, others, {
ref: ref,
form: form
}), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderContent.map(function (renderItem, index) {
return /*#__PURE__*/_react["default"].createElement(_antd.Row, {
key: index
}, renderItem.map(function (item) {
// 为每个元素设置唯一key
if (item.props && item.props.code) {
item = /*#__PURE__*/_react["default"].cloneElement(item, {
form: form,
key: item.props.code
});
} // 合法的组件才需要这个步骤
// 代理组件的明细的处理
// 如果是ignoreDetail为true则忽略明细的代理
if (!item.props.ignoreDetail) {
if (checkNeedClone({
item: item,
props: props
})) {
item = /*#__PURE__*/_react["default"].cloneElement(item, {
disabled: props.isDetail || item.props.disabled,
rules: props.isDetail || item.props.disabled || item.props.hidden ? [{
required: false,
message: ''
}] : item.props.rules || [{
required: false,
message: ''
}],
validator: props.isDetail || item.props.disabled ? null : item.props.validator || null
});
}
}
if (item.props.disabled === !!item.props.required || item.props.hidden === !!item.props.required) {
return /*#__PURE__*/_react["default"].cloneElement(item, {
rules: item.props.disabled || item.props.hidden ? [{
required: false,
message: ''
}] : item.props.rules || [{
required: false,
message: ''
}]
});
}
return item;
}));
})));
});
exports.FormRowWrapper = FormRowWrapper;
FormRowWrapper.propTypes = {
isDetail: _propTypes["default"].bool
};