@jannie-shao/components-antd4
Version:
144 lines • 5.31 kB
JavaScript
import "antd/es/button/style";
import _Button from "antd/es/button";
import "antd/es/space/style";
import _Space from "antd/es/space";
import _extends from "@babel/runtime/helpers/extends";
import React, { useImperativeHandle, forwardRef } from 'react';
import { cloneDeep } from 'lodash';
import { MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import IconFont from "../../../icon-font";
import { rootPrefix } from "../../../style/config";
var prefix = rootPrefix + "-form-item";
var Item = /*#__PURE__*/forwardRef(function (props, ref) {
var eleCount = props.eleCount,
fields = props.fields,
operation = props.operation,
model = props.model,
data = props.data,
onChange = props.onChange,
itemRender = props.itemRender;
var add = operation.add,
remove = operation.remove;
var _ref = model.props || {},
_ref$layout = _ref.layout,
layout = _ref$layout === void 0 ? 'vertical' : _ref$layout,
max = _ref.max,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
var handleAdd = function handleAdd(d) {
if (d === void 0) {
d = {};
}
if (disabled) return;
if (max && eleCount.current >= max) return;
add(d);
};
var handleUpdateFields = function handleUpdateFields(idx, values) {
if (values === void 0) {
values = {};
}
if (disabled) return;
var dataNow = cloneDeep(data);
if (!dataNow[idx]) {
dataNow[idx] = {};
}
Object.keys(values).forEach(function (key) {
dataNow[idx][key] = values[key];
});
onChange && onChange(dataNow);
};
var makeItems = function makeItems(_ref2, idx) {
var key = _ref2.key,
name = _ref2.name,
fieldKey = _ref2.fieldKey;
var recordInfo = {
sn: key,
record: data[idx] || {},
idx: idx,
dataSource: data
};
var updateFields = function updateFields(values) {
return handleUpdateFields(idx, values);
};
// 获取子组件
var items = Object.prototype.toString.call(model.items) === '[object Function]' ? model.items(_extends({}, recordInfo, {
updateFields: updateFields
})) : model.items;
// 构造子组件
return items.map(function (item) {
var itemNow = cloneDeep(item);
itemNow.name = [name, item.name];
itemNow.formProps = _extends({}, item.formProps || {}, {
name: [name, item.name],
key: [key, item.name],
fieldKey: [fieldKey, item.name]
});
// 获取子组件的 props 并改造属性，比如 onChange 事件
itemNow.props = typeof itemNow.props === 'function' ? itemNow.props(recordInfo) : itemNow.props || {};
itemNow.props.disabled = disabled || itemNow.props.disabled;
if (itemNow.props.onChange) {
itemNow.props.onChange = function () {
var _item$props;
for (var _len = arguments.length, arg = new Array(_len), _key = 0; _key < _len; _key++) {
arg[_key] = arguments[_key];
}
return (_item$props = item.props).onChange.apply(_item$props, [_extends({}, recordInfo, {
updateFields: updateFields
})].concat(arg));
};
}
return itemRender([itemNow]);
});
};
useImperativeHandle(ref, function () {
return _extends({}, operation, {
add: handleAdd
});
});
return (fields || []).map(function (field, idx) {
var isLast = idx === data.length - 1 && !(max && data.length === max);
var isOnly = idx === 0 && isLast;
var canAdd = isLast && !disabled;
var canRemove = !isOnly && !disabled;
return /*#__PURE__*/React.createElement("div", {
key: field.key,
className: prefix + "-list",
"data-layout": layout
}, layout === 'inline' && /*#__PURE__*/React.createElement(_Space, {
className: prefix + "-list-item",
align: "baseline"
}, makeItems(field, idx), canRemove && /*#__PURE__*/React.createElement(MinusCircleOutlined, {
onClick: function onClick() {
return remove(idx);
}
}), canAdd && /*#__PURE__*/React.createElement(PlusCircleOutlined, {
onClick: function onClick() {
return handleAdd();
}
})), layout === 'vertical' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: prefix + "-list-item"
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-list-item-fields"
}, makeItems(field, idx)), /*#__PURE__*/React.createElement("div", {
className: prefix + "-list-item-opts"
}, canRemove && /*#__PURE__*/React.createElement(IconFont.Delete, {
onClick: function onClick() {
return remove(idx);
}
}))), canAdd && /*#__PURE__*/React.createElement("div", {
className: prefix + "-list-item"
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-list-item-fields"
}, /*#__PURE__*/React.createElement(_Button, {
type: "dashed",
onClick: function onClick() {
return handleAdd();
},
block: true,
icon: /*#__PURE__*/React.createElement(PlusOutlined, null)
}, "Add")), /*#__PURE__*/React.createElement("div", {
className: prefix + "-list-item-opts"
}))));
});
});
export default Item;