react-admin-component/lib/form-input-multiple/index.js

react library

import * as tslib_1 from "tslib";
import React from 'react';
import { Form, Input, Button } from 'antd';
import { uuid } from '../utils';
var FormInputMultiple = function (props) {
    var label = props.label, labelCol = props.labelCol, wrapperCol = props.wrapperCol, field = props.field, initialValue = props.initialValue, required = props.required, validator = props.validator, fieldKeys = props.fieldKeys;
    var _a = props.form, getFieldDecorator = _a.getFieldDecorator, getFieldValue = _a.getFieldValue, setFieldsValue = _a.setFieldsValue;
    var values = getFieldValue(field) || [];
    function setFormValue(value, index) {
        var _a, _b;
        var newValue = Object.assign([], values, (_a = {},
            _a[index] = tslib_1.__assign({}, values[index], value),
            _a)).filter(function (v) { return !!v; });
        setFieldsValue((_b = {}, _b[field] = newValue, _b));
    }
    function deleteValue(index) {
        var _a;
        setFieldsValue((_a = {}, _a[field] = values.filter(function (_value, i) { return i !== index; }), _a));
    }
    return (React.createElement(Form.Item, tslib_1.__assign({}, {
        label: label,
        labelCol: labelCol,
        wrapperCol: wrapperCol,
    }, { className: props.className }),
        getFieldDecorator(field, {
            initialValue: initialValue,
            rules: [
                { required: required, message: "\u8BF7\u8F93\u5165" + label },
                {
                    validator: function (rule, value, callback) {
                        return validator ? validator(rule, value, callback) : callback();
                    },
                },
            ],
        })(React.createElement(Input, { style: { display: 'none' } })),
        props.readOnly ? (props.render ? (props.render(values)) : (React.createElement("span", null, values))) : (values.map(function (value, index) { return (React.createElement(Input.Group, { compact: true },
            fieldKeys.map(function (fieldKey, i) { return (React.createElement(Input, { title: "\u8BF7\u8F93\u5165" + fieldKey.label, placeholder: "\u8BF7\u8F93\u5165" + fieldKey.label, key: value.key + i, style: {
                    width: fieldKey.width || (80 / fieldKeys.length).toFixed(2) + "%",
                }, value: value[fieldKey.key], onChange: function (e) {
                    var _a;
                    return setFormValue((_a = {}, _a[fieldKey.key] = e.target.value, _a), index);
                } })); }),
            React.createElement(Button, { type: "danger", style: { width: '20%' }, onClick: function () { return deleteValue(index); } }, "\u5220\u9664"))); })),
        !props.readOnly && (React.createElement(Button, { type: "primary", onClick: function () { return setFormValue({ key: uuid() }, values.length + 1); } }, "\u6DFB\u52A0"))));
};
export default FormInputMultiple;
//# sourceMappingURL=index.js.map