@jannie-shao/components-antd4
Version:
274 lines (273 loc) • 11.5 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"));
require("antd/es/form/style");
var _form = _interopRequireDefault(require("antd/es/form"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames2 = _interopRequireDefault(require("classnames"));
var _lodash = require("lodash");
var _icons = require("@ant-design/icons");
var _config = require("../style/config");
var _utils = require("../utils");
var _const = require("./const");
var _index = _interopRequireWildcard(require("./maker/index"));
var _excluded = ["className", "isLoading", "layout", "col", "row", "perMaxWidth", "initialCol", "minCol", "model", "btnGroup", "onChange", "onSubmit", "onReset", "onCancel", "onValuesChange"];
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";
var CompForm = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
var _classnames;
var className = _ref.className,
isLoading = _ref.isLoading,
layout = _ref.layout,
col = _ref.col,
row = _ref.row,
perMaxWidth = _ref.perMaxWidth,
initialCol = _ref.initialCol,
minCol = _ref.minCol,
model = _ref.model,
btnGroup = _ref.btnGroup,
onChange = _ref.onChange,
onSubmit = _ref.onSubmit,
onReset = _ref.onReset,
onCancel = _ref.onCancel,
onValuesChange = _ref.onValuesChange,
more = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
var _Form$useForm = _form["default"].useForm(),
form = _Form$useForm[0];
var compForm = (0, _react.useRef)();
var _useState = (0, _react.useState)([]),
itemObj = _useState[0],
setItemObj = _useState[1];
var _useState2 = (0, _react.useState)(false),
showMore = _useState2[0],
setShowMore = _useState2[1];
var _useState3 = (0, _react.useState)(col || initialCol || (0, _index.getRealCol)(compForm === null || compForm === void 0 ? void 0 : compForm.current, perMaxWidth, minCol)),
realCol = _useState3[0],
setRealCol = _useState3[1];
var ifUseHideShow = (0, _react.useMemo)(function () {
return layout === 'horizontal' && col > -1 && row > 0;
}, [layout, col, row]);
var ifShowMoreA = (0, _react.useMemo)(function () {
return ifUseHideShow && realCol * row <= model.length;
}, [ifUseHideShow, realCol, row, model]);
var customStyle = (0, _react.useMemo)(function () {
if (!ifUseHideShow) return {};
var c = Number(realCol);
var spaceWidth = (c - 1) * _const.GRID_GAP;
return {
gridTemplateColumns: "repeat(" + realCol + ", calc(calc(100% - " + spaceWidth + "px) / " + c + ")"
};
}, [ifUseHideShow, realCol]);
var formatFields = function formatFields(formData) {
var dataNow = (0, _utils.filterEmptyObj)(formData) || {};
var dataCall = {};
Object.keys(dataNow).forEach(function (k) {
var v = dataNow[k];
var temp = itemObj.filter(function (i) {
return i.name === k;
})[0] || {};
if (temp.type === 'KV' && Object.prototype.toString.call(v) === '[object Object]') {
dataCall[v.key || k] = v.value || v;
} else if (temp.type === 'OBJ' && Object.prototype.toString.call(v) === '[object Object]') {
dataCall = (0, _extends2["default"])({}, dataCall, v);
} else {
dataCall[k] = v;
}
});
return (0, _utils.filterEmptyObj)(dataCall) || {};
};
var handleValueChange = function handleValueChange(changed, all) {
if (changed === void 0) {
changed = {};
}
if (all === void 0) {
all = {};
}
onValuesChange(changed, all);
// 字段值更新，格式化数据
var keysChanged = Object.keys(changed);
var valueAll = formatFields(all);
onChange(keysChanged, valueAll);
};
var doSubmit = function doSubmit() {
return setTimeout(function () {
return form.submit();
});
};
var handleSubmit = function handleSubmit(formData) {
if (formData === void 0) {
formData = {};
}
onSubmit(formatFields(formData));
};
var handleResetSubmit = function handleResetSubmit() {
form.resetFields();
doSubmit();
};
var handleReset = function handleReset() {
form.resetFields();
onReset();
};
var handleCancel = function handleCancel() {
form.resetFields();
onCancel();
};
var doGetRealCol = (0, _lodash.debounce)(function () {
setRealCol((0, _index.getRealCol)(compForm === null || compForm === void 0 ? void 0 : compForm.current, perMaxWidth, minCol));
}, 300);
(0, _react.useEffect)(function () {
var temp = [];
model.forEach(function (m) {
if (_const.SPEC_ITEM_KV.includes(m.type)) {
temp.push({
name: m.name,
type: 'KV'
});
} else if (_const.SPEC_ITEM_OBJ.includes(m.type)) {
temp.push({
name: m.name,
type: 'OBJ'
});
}
});
setItemObj(temp);
}, [model]);
(0, _react.useEffect)(function () {
if (layout === 'horizontal' && col === 0) {
doGetRealCol();
window.addEventListener('resize', doGetRealCol);
return function () {
window.removeEventListener('resize', doGetRealCol);
};
}
return function () {};
}, []);
(0, _react.useImperativeHandle)(ref, function () {
return (0, _extends2["default"])({}, form, {
getFieldsValue: function getFieldsValue(keys) {
return formatFields(form.getFieldsValue(keys));
},
handleSubmit: function handleSubmit() {
return doSubmit();
},
handleReset: handleReset,
handleResetSubmit: handleResetSubmit
});
});
return /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-parent",
ref: compForm
}, /*#__PURE__*/_react["default"].createElement(_form["default"], (0, _extends2["default"])({}, more, {
className: (0, _classnames2["default"])(prefix, className, (_classnames = {}, _classnames[prefix + "-grid"] = ifUseHideShow, _classnames[prefix + "-grid-hide-" + realCol * row] = ifUseHideShow && !showMore, _classnames)),
form: form,
layout: layout,
onFinish: handleSubmit,
scrollToFirstError: true,
onValuesChange: handleValueChange,
style: (0, _extends2["default"])({}, more.style || {}, customStyle)
}), (0, _index["default"])(model), btnGroup.length > 0 && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
className: prefix + "-actions",
style: ifUseHideShow ? {
gridColumnStart: realCol
} : {},
label: layout === 'horizontal' ? ' ' : '',
colon: false
}, /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-actions-content"
}, ifShowMoreA && /*#__PURE__*/_react["default"].createElement("a", {
onClick: function onClick() {
return setShowMore(!showMore);
}
}, /*#__PURE__*/_react["default"].createElement(_space["default"], {
size: 5
}, showMore ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, "Collapse"), /*#__PURE__*/_react["default"].createElement(_icons.UpOutlined, null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, "Expand"), /*#__PURE__*/_react["default"].createElement(_icons.DownOutlined, null)))), /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-btns"
}, btnGroup.map(function (btn) {
var b = typeof btn === 'string' ? {
opType: btn
} : btn;
if (b.opType === 'submit') {
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
key: "submit",
type: b.type || 'primary',
htmlType: "submit",
loading: isLoading
}, b.btnText || 'Submit');
}
if (b.opType === 'resetSubmit') {
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
key: "resetSubmit",
type: b.type || 'link',
onClick: handleResetSubmit,
loading: isLoading
}, b.btnText || 'Reset');
}
if (b.opType === 'reset') {
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
key: "reset",
type: b.type || 'link',
onClick: handleReset,
loading: isLoading
}, b.btnText || 'Reset');
}
if (b.opType === 'cancel') {
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
key: "cancel",
type: b.type || 'default',
onClick: handleCancel,
disabled: isLoading
}, b.btnText || 'Cancel');
}
if (b.render && typeof b.render === 'function' && !/[A-Z]/.test(b.render.name[0])) {
return b.render({
loading: isLoading
});
}
return '';
}))))));
});
CompForm.propTypes = {
className: _propTypes["default"].string,
isLoading: _propTypes["default"].bool,
layout: _propTypes["default"].string,
col: _propTypes["default"].number,
row: _propTypes["default"].number,
perMaxWidth: _propTypes["default"].number,
initialCol: _propTypes["default"].number,
minCol: _propTypes["default"].number,
model: _propTypes["default"].array,
btnGroup: _propTypes["default"].array,
onChange: _propTypes["default"].func,
onSubmit: _propTypes["default"].func,
onReset: _propTypes["default"].func,
onCancel: _propTypes["default"].func,
onValuesChange: _propTypes["default"].func
};
CompForm.defaultProps = {
className: '',
isLoading: false,
layout: 'inline',
col: -1,
row: 1,
perMaxWidth: 240,
initialCol: 0,
minCol: 1,
model: [],
btnGroup: ['submit', 'cancel'],
onChange: function onChange() {},
onSubmit: function onSubmit() {},
onReset: function onReset() {},
onCancel: function onCancel() {},
onValuesChange: function onValuesChange() {}
};
var _default = CompForm;
exports["default"] = _default;