@jannie-shao/components-antd4
Version:
152 lines (151 loc) • 7.06 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
require("antd/es/button/style");
var _button = _interopRequireDefault(require("antd/es/button"));
require("antd/es/space/style");
var _space = _interopRequireDefault(require("antd/es/space"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _lodash = require("lodash");
var _icons = require("@ant-design/icons");
var _iconFont = _interopRequireDefault(require("../../../icon-font"));
var _config = require("../../../style/config");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var prefix = _config.rootPrefix + "-form-item";
var Item = /*#__PURE__*/(0, _react.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 = (0, _lodash.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((0, _extends2["default"])({}, recordInfo, {
updateFields: updateFields
})) : model.items;
// 构造子组件
return items.map(function (item) {
var itemNow = (0, _lodash.cloneDeep)(item);
itemNow.name = [name, item.name];
itemNow.formProps = (0, _extends2["default"])({}, 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, [(0, _extends2["default"])({}, recordInfo, {
updateFields: updateFields
})].concat(arg));
};
}
return itemRender([itemNow]);
});
};
(0, _react.useImperativeHandle)(ref, function () {
return (0, _extends2["default"])({}, 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["default"].createElement("div", {
key: field.key,
className: prefix + "-list",
"data-layout": layout
}, layout === 'inline' && /*#__PURE__*/_react["default"].createElement(_space["default"], {
className: prefix + "-list-item",
align: "baseline"
}, makeItems(field, idx), canRemove && /*#__PURE__*/_react["default"].createElement(_icons.MinusCircleOutlined, {
onClick: function onClick() {
return remove(idx);
}
}), canAdd && /*#__PURE__*/_react["default"].createElement(_icons.PlusCircleOutlined, {
onClick: function onClick() {
return handleAdd();
}
})), layout === 'vertical' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-list-item"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-list-item-fields"
}, makeItems(field, idx)), /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-list-item-opts"
}, canRemove && /*#__PURE__*/_react["default"].createElement(_iconFont["default"].Delete, {
onClick: function onClick() {
return remove(idx);
}
}))), canAdd && /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-list-item"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-list-item-fields"
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
type: "dashed",
onClick: function onClick() {
return handleAdd();
},
block: true,
icon: /*#__PURE__*/_react["default"].createElement(_icons.PlusOutlined, null)
}, "Add")), /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-list-item-opts"
}))));
});
});
var _default = Item;
exports["default"] = _default;