react-admin-component/lib/form-inputsearch/index.js

react library

import * as tslib_1 from "tslib";
import React, { useState, useRef } from 'react';
import { Form, Input, AutoComplete, Button, Tag } from 'antd';
import classNames from 'classnames';
import { debounce } from 'lodash';
import { PrototypeCheck } from '../utils';
import InputSearchTable from '../input-search-table';
var FormInputSearch = function (props) {
    var label = props.label, labelCol = props.labelCol, wrapperCol = props.wrapperCol, className = props.className, tagsClassName = props.tagsClassName, validator = props.validator, field = props.field, initialValue = props.initialValue, required = props.required, optionRender = props.optionRender, normalizeValue = props.normalizeValue, tagRender = props.tagRender, tagKey = props.tagKey, onSelectCallBack = props.onSelectCallBack, onChange = props.onChange, initialInputValue = props.initialInputValue, tagCloseCB = props.tagCloseCB, readOnly = props.readOnly, showTags = props.showTags, withoutSetValue = props.withoutSetValue;
    var _a = props.form, getFieldDecorator = _a.getFieldDecorator, setFieldsValue = _a.setFieldsValue, getFieldValue = _a.getFieldValue;
    var _b = useState([]), options = _b[0], setOptions = _b[1];
    var _c = useState(initialInputValue), inputValue = _c[0], setInputValue = _c[1];
    var _d = useState(true), isFirst = _d[0], setIsFirst = _d[1];
    var tableRef = useRef();
    function onSelect(value, option, cb) {
        var _a;
        setInputValue(option && option.props['data-value']);
        setFieldsValue((_a = {},
            _a[field] = normalizeValue ? normalizeValue(value, option, getFieldValue(field)) : value,
            _a));
        cb && cb();
    }
    var onSearch = debounce(function (value) {
        props.tableConfig && openTable();
        props.fetchApi &&
            props
                .fetchApi(props.apiParamsCb ? props.apiParamsCb(value) : value)
                .then(function (res) {
                setOptions(res.map(function (data) { return (React.createElement(AutoComplete.Option, { key: data.key || data.value, "data-value": data.value }, optionRender ? optionRender(data) : data.value)); }));
            });
    }, 500);
    var onInputChange = function (value) {
        setInputValue(value);
        setIsFirst(false);
        onChange && onChange(value);
    };
    function onTagClose(_e, _i, _val) {
        var _a;
        var fieldValue = getFieldValue(field);
        var filterValue = fieldValue.filter(function (_value) { return _value.key !== _val.key; });
        tagCloseCB
            ? tagCloseCB(_val, fieldValue, setFieldsValue, field)
            : setFieldsValue((_a = {},
                _a[field] = filterValue.length > 0 ? filterValue : undefined,
                _a));
    }
    function renderTags() {
        return (React.createElement("div", { style: { lineHeight: 1 }, className: tagsClassName }, getFieldValue(field).map(function (val, index) { return (React.createElement(Tag, { key: tagKey
                ? PrototypeCheck.isFunction(tagKey)
                    ? tagKey(val)
                    : val[tagKey]
                : val.key, closable: !props.readOnly, onClose: function (e) { return onTagClose(e, index, val); } }, tagRender ? tagRender(val) : val.value)); })));
    }
    function onRowCB(normalizeValue, record, inputValue) {
        var _a;
        if (inputValue)
            setInputValue(inputValue);
        setFieldsValue((_a = {},
            _a[field] = normalizeValue && normalizeValue(record, getFieldValue(field)),
            _a));
    }
    function openTable() {
        tableRef.current.setTableVisible(true);
    }
    function renderNormalRead() {
        return (!showTags &&
            readOnly &&
            (props.render ? props.render(getFieldValue(field)) : getFieldValue(field)));
    }
    return (React.createElement(Form.Item, tslib_1.__assign({}, {
        label: label,
        labelCol: labelCol,
        wrapperCol: wrapperCol,
    }, { className: classNames('rac_form_inputs', 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 && (React.createElement(AutoComplete, { onSelect: function (value, option) {
                return onSelect(value, option, onSelectCallBack);
            }, onChange: onInputChange, onSearch: onSearch, dataSource: options, placeholder: "\u8BF7\u8F93\u5165" + label, optionLabelProp: "value", value: inputValue ||
                (isFirst &&
                    !withoutSetValue &&
                    PrototypeCheck.isString(getFieldValue(field)) &&
                    getFieldValue(field)) ||
                '' },
            React.createElement(Input, { suffix: props.strAddable && (React.createElement(Button, { className: "search-btn", style: { marginRight: -12 }, type: "primary", onClick: function () { return onSelect(inputValue); } }, "\u786E\u5B9A")) }))),
        props.tableConfig && (React.createElement(InputSearchTable, { onRowCB: onRowCB, inputValue: inputValue, tableConfig: tslib_1.__assign({}, props.tableConfig), ref: tableRef })),
        props.showTags &&
            getFieldValue(field) &&
            (props.readOnly
                ? props.render
                    ? props.render(getFieldValue(field))
                    : renderTags()
                : renderTags()),
        renderNormalRead()));
};
export default FormInputSearch;
//# sourceMappingURL=index.js.map