qt-public-ui
Version:
新设计规范下业务组件库
217 lines (206 loc) • 7.89 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useState, useEffect, forwardRef, useCallback, useImperativeHandle } from 'react';
// import { Form } from '@ant-design/compatible';
import { PlusOutlined } from '@ant-design/icons';
import { Row, Col, Button, Form } from 'antd';
import { IconSlim as Icon } from '..';
import classnames from 'classnames';
import { toValue } from './utils';
// import { GetFieldDecoratorOptions } from 'antd/lib/form/Form';
import './style.less';
var initIndice = function initIndice(value) {
return [].concat(new Array(value.length)).map(function (_, i) {
return i;
});
};
var getDecoratorId = function getDecoratorId(key, indexKey, colIndex) {
return key ? indexKey + "." + key : indexKey + "." + colIndex;
};
var DynamicForm = function DynamicForm(props, ref) {
var _props$max = props.max,
max = _props$max === void 0 ? Infinity : _props$max,
_props$min = props.min,
min = _props$min === void 0 ? 0 : _props$min,
columns = props.columns,
_props$value = props.value,
value = _props$value === void 0 ? [] : _props$value,
disabled = props.disabled,
addText = props.addText,
onChange = props.onChange,
rowClassName = props.rowClassName,
_props$buttonLayout = props.buttonLayout,
buttonLayout = _props$buttonLayout === void 0 ? {} : _props$buttonLayout;
var _useState = useState([]),
setIndice = _useState[1];
var _Form$useForm = Form.useForm(),
form = _Form$useForm[0];
// const [errorMark,setErrorMark] = useState(value);
// const { validateFields, getFieldValue, setFieldsValue } = form;
useEffect(function () {
form.setFieldsValue({
dynamic: value
});
}, [value]);
useEffect(function () {
setIndice(initIndice(value));
onChange && onChange(value);
}, [value.length]);
// const validate = useCallback(() => {
// return new Promise<T[]>((resolve) => {
// resolve();
// validateFields((errors, values) => {
// errors ? reject(errors) : resolve(values2array<T>(values));
// });
// });
// }, []);
var validate = function validate() {
return new Promise(function (resolve, reject) {
form.validateFields().then(function (res) {
return resolve(res.dynamic);
})["catch"](function (error) {
return reject(error);
});
});
};
var setError = useCallback(function (error) {
var index = error.index;
// const key = getDecoratorId(name, index);
var formValue = form.getFieldValue('dynamic');
// console.log({ [key]: { value: formValue, errors: [new Error(message)] } },888888)
// form.setFieldsValue({ [key]: { value: 'formValue', errors: [new Error(message)] } });
formValue[index].errorInfo = error;
form.setFieldsValue({
dynamic: formValue
});
// errorMark[index].errorInfo = error;
// setErrorMark(formValue);
// console.log(error,formValue,form.getFieldValue('dynamic'), 67676);
}, []);
useImperativeHandle(ref, function () {
return {
validate: validate,
setError: setError
};
});
var onFieldsChange = function onFieldsChange(changedFields) {
// setErrorMark(null);
if (changedFields.length > 0) {
var formValue = form.getFieldValue('dynamic');
var error = changedFields.some(function (item) {
return item.errors.length > 0;
});
if (error) {
// 原来的rule验证错误
formValue.forEach(function (element) {
delete element.errorInfo;
});
} else {
// 正在修改此表单
var index = changedFields[0].name[1];
if (formValue[index]) {
delete formValue[index].errorInfo;
}
}
form.setFieldsValue({
dynamic: formValue
});
onChange && onChange(formValue);
}
};
return /*#__PURE__*/React.createElement(Form, {
form: form,
onFieldsChange: onFieldsChange,
className: "umui-dynamic"
}, /*#__PURE__*/React.createElement(Form.List, {
name: "dynamic"
}, function (fields, _ref) {
var add = _ref.add,
remove = _ref.remove;
return /*#__PURE__*/React.createElement(React.Fragment, null, fields.map(function (field) {
var indexKey = field.key;
var originalValue = toValue(value[indexKey]);
var itemDisabled = disabled || originalValue.disabled;
var itemWithoutDel = disabled || originalValue.withoutDel;
return /*#__PURE__*/React.createElement(Row, {
gutter: [8, 0],
key: field.key,
className: classnames('umui-dynamic-row', rowClassName)
}, columns.map(function (col, colIndex) {
var _formValue$field$name;
var span = col.span,
options = col.options,
key = col.key,
render = col.render,
className = col.className,
_col$grid = col.grid,
grid = _col$grid === void 0 ? {} : _col$grid;
var component = render({
disabled: itemDisabled
}, originalValue, indexKey);
var colProps = _extends({
span: span
}, grid);
var itemKey = getDecoratorId(key, indexKey, colIndex);
// console.log(options,111,key, indexKey,originalValue,originalValue[key],2222,itemKey)
// console.log(errorMark,'errorMark')
var validateStatus = '';
var help = null;
var formValue = form.getFieldValue('dynamic');
var errorInfo = (_formValue$field$name = formValue[field.name]) === null || _formValue$field$name === void 0 ? void 0 : _formValue$field$name.errorInfo;
if (errorInfo && key && errorInfo.name === key) {
// console.log(errorInfo,field,key,'error');
help = errorInfo.message;
validateStatus = 'error';
}
// if(errorMark){
// const errorInfo = errorMark[field.name]?.errorInfo;
// if(errorInfo && key && errorInfo.name===key){
// console.log(errorInfo,field,key,'error');
// help = errorInfo.message;
// validateStatus = 'error';
// }
// }
// if(key){
// console.log('name', [field.name, key]);
// console.log('fieldKey', [field.fieldKey, key]);
// }
var formItem = validateStatus ? /*#__PURE__*/React.createElement(Form.Item, _extends({}, field, {
name: [field.name, key],
fieldKey: [field.fieldKey, key],
validateStatus: validateStatus,
help: help
}, options), component) : /*#__PURE__*/React.createElement(Form.Item, _extends({}, field, {
name: [field.name, key],
fieldKey: [field.fieldKey, key]
}, options), component);
// 支持非表单字段
var content = key ? formItem : /*#__PURE__*/React.createElement("div", {
className: "umui-dynamic-const"
}, component);
return /*#__PURE__*/React.createElement(Col, _extends({}, colProps, {
key: itemKey,
className: classnames(className)
}), content);
}), /*#__PURE__*/React.createElement("div", {
key: "delete-icon",
className: "umui-dynamic-delete-float"
}, !itemWithoutDel && fields.length > min && /*#__PURE__*/React.createElement(Icon, {
type: "umicon-fail",
className: "umui-dynamic-delete",
onClick: function onClick() {
return remove(field.name);
}
})));
}), fields.length < max && /*#__PURE__*/React.createElement(Form.Item, buttonLayout, /*#__PURE__*/React.createElement(Button, {
icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
onClick: function onClick() {
return add();
},
disabled: disabled
}, addText || '添加')));
}));
};
var FCForm = forwardRef(DynamicForm);
var DynamicList = FCForm;
DynamicList.displayName = 'DynamicList';
export default DynamicList;