qt-public-ui
Version:
新设计规范下业务组件库
231 lines (221 loc) • 10.6 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireWildcard(require("react"));
var _icons = require("@ant-design/icons");
var _antd = require("antd");
var _2 = require("..");
var _classnames = _interopRequireDefault(require("classnames"));
var _utils = require("./utils");
require("./style.less");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // import { Form } from '@ant-design/compatible';
// import { GetFieldDecoratorOptions } from 'antd/lib/form/Form';
var initIndice = function initIndice(value) {
return (0, _toConsumableArray2["default"])(new Array(value.length)).map(function (_, i) {
return i;
});
};
var getDecoratorId = function getDecoratorId(key, indexKey, colIndex) {
return key ? "".concat(indexKey, ".").concat(key) : "".concat(indexKey, ".").concat(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 = (0, _react.useState)([]),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
setIndice = _useState2[1];
var _Form$useForm = _antd.Form.useForm(),
_Form$useForm2 = (0, _slicedToArray2["default"])(_Form$useForm, 1),
form = _Form$useForm2[0];
// const [errorMark,setErrorMark] = useState(value);
// const { validateFields, getFieldValue, setFieldsValue } = form;
(0, _react.useEffect)(function () {
form.setFieldsValue({
dynamic: value
});
}, [value]);
(0, _react.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 = (0, _react.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);
}, []);
(0, _react.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["default"].createElement(_antd.Form, {
form: form,
onFieldsChange: onFieldsChange,
className: "umui-dynamic"
}, /*#__PURE__*/_react["default"].createElement(_antd.Form.List, {
name: "dynamic"
}, function (fields, _ref) {
var add = _ref.add,
remove = _ref.remove;
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, fields.map(function (field) {
var indexKey = field.key;
var originalValue = (0, _utils.toValue)(value[indexKey]);
var itemDisabled = disabled || originalValue.disabled;
var itemWithoutDel = disabled || originalValue.withoutDel;
return /*#__PURE__*/_react["default"].createElement(_antd.Row, {
gutter: [8, 0],
key: field.key,
className: (0, _classnames["default"])('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 = _objectSpread({
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["default"].createElement(_antd.Form.Item, (0, _extends2["default"])({}, field, {
name: [field.name, key],
fieldKey: [field.fieldKey, key],
validateStatus: validateStatus,
help: help
}, options), component) : /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, (0, _extends2["default"])({}, field, {
name: [field.name, key],
fieldKey: [field.fieldKey, key]
}, options), component);
// 支持非表单字段
var content = key ? formItem : /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-dynamic-const"
}, component);
return /*#__PURE__*/_react["default"].createElement(_antd.Col, (0, _extends2["default"])({}, colProps, {
key: itemKey,
className: (0, _classnames["default"])(className)
}), content);
}), /*#__PURE__*/_react["default"].createElement("div", {
key: "delete-icon",
className: "umui-dynamic-delete-float"
}, !itemWithoutDel && fields.length > min && /*#__PURE__*/_react["default"].createElement(_2.IconSlim, {
type: "umicon-fail",
className: "umui-dynamic-delete",
onClick: function onClick() {
return remove(field.name);
}
})));
}), fields.length < max && /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, buttonLayout, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
icon: /*#__PURE__*/_react["default"].createElement(_icons.PlusOutlined, null),
onClick: function onClick() {
return add();
},
disabled: disabled
}, addText || '添加')));
}));
};
var FCForm = (0, _react.forwardRef)(DynamicForm);
var DynamicList = FCForm;
DynamicList.displayName = 'DynamicList';
var _default = exports["default"] = DynamicList;