@jannie-shao/components-antd4
Version:
266 lines • 9.22 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 "antd/es/form/style";
import _Form from "antd/es/form";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["className", "isLoading", "layout", "col", "row", "perMaxWidth", "initialCol", "minCol", "model", "btnGroup", "onChange", "onSubmit", "onReset", "onCancel", "onValuesChange"];
import React, { useImperativeHandle, forwardRef, useEffect, useState, useMemo, useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { debounce } from 'lodash';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { rootPrefix } from "../style/config";
import { filterEmptyObj } from "../utils";
import { SPEC_ITEM_KV, SPEC_ITEM_OBJ, GRID_GAP } from "./const";
import maker, { getRealCol } from "./maker/index";
var prefix = rootPrefix + "-form";
var CompForm = /*#__PURE__*/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 = _objectWithoutPropertiesLoose(_ref, _excluded);
var _Form$useForm = _Form.useForm(),
form = _Form$useForm[0];
var compForm = useRef();
var _useState = useState([]),
itemObj = _useState[0],
setItemObj = _useState[1];
var _useState2 = useState(false),
showMore = _useState2[0],
setShowMore = _useState2[1];
var _useState3 = useState(col || initialCol || getRealCol(compForm === null || compForm === void 0 ? void 0 : compForm.current, perMaxWidth, minCol)),
realCol = _useState3[0],
setRealCol = _useState3[1];
var ifUseHideShow = useMemo(function () {
return layout === 'horizontal' && col > -1 && row > 0;
}, [layout, col, row]);
var ifShowMoreA = useMemo(function () {
return ifUseHideShow && realCol * row <= model.length;
}, [ifUseHideShow, realCol, row, model]);
var customStyle = useMemo(function () {
if (!ifUseHideShow) return {};
var c = Number(realCol);
var spaceWidth = (c - 1) * GRID_GAP;
return {
gridTemplateColumns: "repeat(" + realCol + ", calc(calc(100% - " + spaceWidth + "px) / " + c + ")"
};
}, [ifUseHideShow, realCol]);
var formatFields = function formatFields(formData) {
var dataNow = 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 = _extends({}, dataCall, v);
} else {
dataCall[k] = v;
}
});
return 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 = debounce(function () {
setRealCol(getRealCol(compForm === null || compForm === void 0 ? void 0 : compForm.current, perMaxWidth, minCol));
}, 300);
useEffect(function () {
var temp = [];
model.forEach(function (m) {
if (SPEC_ITEM_KV.includes(m.type)) {
temp.push({
name: m.name,
type: 'KV'
});
} else if (SPEC_ITEM_OBJ.includes(m.type)) {
temp.push({
name: m.name,
type: 'OBJ'
});
}
});
setItemObj(temp);
}, [model]);
useEffect(function () {
if (layout === 'horizontal' && col === 0) {
doGetRealCol();
window.addEventListener('resize', doGetRealCol);
return function () {
window.removeEventListener('resize', doGetRealCol);
};
}
return function () {};
}, []);
useImperativeHandle(ref, function () {
return _extends({}, form, {
getFieldsValue: function getFieldsValue(keys) {
return formatFields(form.getFieldsValue(keys));
},
handleSubmit: function handleSubmit() {
return doSubmit();
},
handleReset: handleReset,
handleResetSubmit: handleResetSubmit
});
});
return /*#__PURE__*/React.createElement("div", {
className: prefix + "-parent",
ref: compForm
}, /*#__PURE__*/React.createElement(_Form, _extends({}, more, {
className: classnames(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: _extends({}, more.style || {}, customStyle)
}), maker(model), btnGroup.length > 0 && /*#__PURE__*/React.createElement(_Form.Item, {
className: prefix + "-actions",
style: ifUseHideShow ? {
gridColumnStart: realCol
} : {},
label: layout === 'horizontal' ? ' ' : '',
colon: false
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-actions-content"
}, ifShowMoreA && /*#__PURE__*/React.createElement("a", {
onClick: function onClick() {
return setShowMore(!showMore);
}
}, /*#__PURE__*/React.createElement(_Space, {
size: 5
}, showMore ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Collapse"), /*#__PURE__*/React.createElement(UpOutlined, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Expand"), /*#__PURE__*/React.createElement(DownOutlined, null)))), /*#__PURE__*/React.createElement("div", {
className: prefix + "-btns"
}, btnGroup.map(function (btn) {
var b = typeof btn === 'string' ? {
opType: btn
} : btn;
if (b.opType === 'submit') {
return /*#__PURE__*/React.createElement(_Button, {
key: "submit",
type: b.type || 'primary',
htmlType: "submit",
loading: isLoading
}, b.btnText || 'Submit');
}
if (b.opType === 'resetSubmit') {
return /*#__PURE__*/React.createElement(_Button, {
key: "resetSubmit",
type: b.type || 'link',
onClick: handleResetSubmit,
loading: isLoading
}, b.btnText || 'Reset');
}
if (b.opType === 'reset') {
return /*#__PURE__*/React.createElement(_Button, {
key: "reset",
type: b.type || 'link',
onClick: handleReset,
loading: isLoading
}, b.btnText || 'Reset');
}
if (b.opType === 'cancel') {
return /*#__PURE__*/React.createElement(_Button, {
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.string,
isLoading: PropTypes.bool,
layout: PropTypes.string,
col: PropTypes.number,
row: PropTypes.number,
perMaxWidth: PropTypes.number,
initialCol: PropTypes.number,
minCol: PropTypes.number,
model: PropTypes.array,
btnGroup: PropTypes.array,
onChange: PropTypes.func,
onSubmit: PropTypes.func,
onReset: PropTypes.func,
onCancel: PropTypes.func,
onValuesChange: PropTypes.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() {}
};
export default CompForm;