antd-custom-form
Version:
A custom form component built with Ant Design
99 lines (98 loc) • 7.77 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __exportStar = (this && this.__exportStar) || function(m, exports) {
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomForm = void 0;
var antd_1 = require("antd");
var react_1 = __importDefault(require("react"));
var TextArea_1 = __importDefault(require("antd/lib/input/TextArea"));
__exportStar(require("./types"), exports);
var CustomForm = function (_a) {
var fieldGroups = _a.fieldGroups, onSubmit = _a.onSubmit, formControl = _a.formControl, initialValues = _a.initialValues, _b = _a.layout, layout = _b === void 0 ? "horizontal" : _b, _c = _a.actionButtonsPlacement, actionButtonsPlacement = _c === void 0 ? "end" : _c, _d = _a.submitButton, submitButton = _d === void 0 ? true : _d, resetButton = _a.resetButton, formProps = _a.formProps;
var buttonsPlacement = actionButtonsPlacement === "start"
? "flex-start"
: actionButtonsPlacement === "center"
? "center"
: "flex-end";
var form = formControl || antd_1.Form.useForm()[0];
var isSubmitButton = react_1.default.isValidElement(submitButton);
var isResetButton = react_1.default.isValidElement(resetButton);
return (react_1.default.createElement(antd_1.Form, __assign({ form: form, onFinish: onSubmit, layout: layout, initialValues: initialValues }, formProps),
fieldGroups.map(function (fields, rowIndex) { return (react_1.default.createElement(antd_1.Row, { gutter: [16, 16], key: rowIndex }, fields.map(function (field, fieldIndex) {
return !field.hide && (react_1.default.createElement(antd_1.Col, { key: fieldIndex, span: field.span || 24 / fields.length }, renderField(field)));
}))); }),
react_1.default.createElement(antd_1.Space, { style: { width: "100%", justifyContent: buttonsPlacement } },
isResetButton && resetButton,
!isResetButton && resetButton === true && (react_1.default.createElement(antd_1.Button, { type: "text", onClick: function () { return form.resetFields(); } }, "Reset")),
isSubmitButton && submitButton,
!isSubmitButton && submitButton === true && (react_1.default.createElement(antd_1.Button, { type: "primary", htmlType: "submit" }, "Submit")))));
};
exports.CustomForm = CustomForm;
var renderField = function (field) {
var _a, _b;
var inputProps = __assign({ "data-testid": Array.isArray(field.name)
? field.name.join("-")
: field.name }, field.inputProps);
switch (field.type) {
case "textarea":
return (react_1.default.createElement(antd_1.Form.Item, __assign({ label: field.label, name: field.name, rules: field.rules }, field.formItemProps),
react_1.default.createElement(TextArea_1.default, __assign({ disabled: field.disabled, style: { width: "100%" }, placeholder: field.placeholder }, inputProps))));
case "password":
return (react_1.default.createElement(antd_1.Form.Item, __assign({ label: field.label, name: field.name, rules: field.rules }, field.formItemProps),
react_1.default.createElement(antd_1.Input.Password, __assign({ disabled: field.disabled, style: { width: "100%" }, placeholder: field.placeholder }, inputProps))));
case "number":
return (react_1.default.createElement(antd_1.Form.Item, __assign({ label: field.label, name: field.name, rules: field.rules }, field.formItemProps),
react_1.default.createElement(antd_1.InputNumber, __assign({ style: { width: "100%" }, disabled: field.disabled, placeholder: field.placeholder }, inputProps))));
case "single-select":
case "multi-select":
return (react_1.default.createElement(antd_1.Form.Item, __assign({ label: field.label, name: field.name, rules: field.rules }, field.formItemProps),
react_1.default.createElement(antd_1.Select, __assign({ disabled: field.disabled, placeholder: field.placeholder, style: { width: "100%" }, mode: field.type === "multi-select" ? "multiple" : undefined, showSearch: (((_a = field.list) === null || _a === void 0 ? void 0 : _a.length) || 0) > 10, allowClear: true }, inputProps), (_b = field.list) === null || _b === void 0 ? void 0 : _b.map(function (item) { return (react_1.default.createElement(antd_1.Select.Option, { key: item.value, value: item.value }, item.label)); }))));
case "date":
return (react_1.default.createElement(antd_1.Form.Item, __assign({ label: field.label, name: field.name, rules: field.rules }, field.formItemProps),
react_1.default.createElement(antd_1.DatePicker, __assign({ style: { width: "100%" }, disabled: field.disabled, placeholder: field.placeholder }, inputProps))));
case "file":
return (react_1.default.createElement(antd_1.Form.Item, __assign({ label: field.label, name: field.name, rules: field.rules }, field.formItemProps),
react_1.default.createElement(antd_1.Upload, __assign({ style: { width: "100%" }, placeholder: field.placeholder }, inputProps),
react_1.default.createElement(antd_1.Button, { disabled: field.disabled }, field.placeholder))));
case "checkbox":
return (react_1.default.createElement(antd_1.Form.Item, __assign({ name: field.name, label: field.label, rules: field.rules }, field.formItemProps),
react_1.default.createElement(antd_1.Checkbox.Group, __assign({ options: field.list, disabled: field.disabled }, inputProps))));
case "radio":
return (react_1.default.createElement(antd_1.Form.Item, __assign({ name: field.name, label: field.label, rules: field.rules }, field.formItemProps),
react_1.default.createElement(antd_1.Radio.Group, __assign({ options: field.list, disabled: field.disabled }, inputProps))));
case "toggle":
return (react_1.default.createElement(antd_1.Form.Item, __assign({ name: field.name, label: field.label, rules: field.rules, valuePropName: "checked" }, field.formItemProps),
react_1.default.createElement(antd_1.Switch, __assign({ checkedChildren: field.list[0].label, unCheckedChildren: field.list[1].label, disabled: field.disabled }, inputProps))));
case "custom":
return field.label;
default:
return (react_1.default.createElement(antd_1.Form.Item, __assign({ label: field.label, name: field.name, rules: field.rules }, field.formItemProps),
react_1.default.createElement(antd_1.Input, __assign({ disabled: field.disabled, style: { width: "100%" }, placeholder: field.placeholder }, inputProps))));
}
};