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

react library

import * as tslib_1 from "tslib";
import React, { Component } from 'react';
import { Form, AutoComplete } from 'antd';
import debounce from 'lodash.debounce';
var Option = AutoComplete.Option;
var FormAutoComplete = (function (_super) {
    tslib_1.__extends(FormAutoComplete, _super);
    function FormAutoComplete(props) {
        var _this = _super.call(this, props) || this;
        _this._debounceChange = debounce(function (value) {
            var _a = _this.props, optionsApi = _a.optionsApi, field = _a.field;
            var validateFields = _this.props.form.validateFields;
            if (validateFields) {
                validateFields([field], function (errors) {
                    if (!errors && optionsApi) {
                        optionsApi(value).then(function (res) {
                            _this.setState({ dataSource: res });
                        });
                    }
                });
            }
        }, 500);
        _this.handleSearch = function (value) {
            if (value && value.trim().length !== 0) {
                _this._debounceChange(value);
            }
            else {
                _this.setState({ dataSource: [] });
            }
        };
        _this.state = {
            dataSource: [],
        };
        return _this;
    }
    FormAutoComplete.prototype.render = function () {
        var getFieldDecorator = this.props.form.getFieldDecorator;
        var _a = this.props, initialValue = _a.initialValue, label = _a.label, field = _a.field, required = _a.required, validator = _a.validator, labelCol = _a.labelCol, wrapperCol = _a.wrapperCol, disabled = _a.disabled, placeholder = _a.placeholder, className = _a.className, style = _a.style;
        var dataSource = this.state.dataSource;
        var children = dataSource.map(function (v) { return (React.createElement(Option, { key: v.id, value: v.id }, v.name)); });
        return (React.createElement(Form.Item, tslib_1.__assign({}, {
            label: label,
            labelCol: labelCol,
            wrapperCol: wrapperCol,
        }, { className: className, style: style }), getFieldDecorator(field, {
            initialValue: initialValue,
            rules: [
                { required: required, message: "\u8BF7\u9009\u62E9" + label },
                {
                    validator: function (rule, value, callback) { return (validator ? validator(rule, value, callback) : callback()); },
                },
            ],
        })(React.createElement(AutoComplete, tslib_1.__assign({ onSearch: this.handleSearch, placeholder: placeholder ? placeholder : "\u8BF7\u8F93\u5165" + label, disabled: disabled }, ({ labelInValue: true })), children))));
    };
    return FormAutoComplete;
}(Component));
export default FormAutoComplete;
//# sourceMappingURL=index.js.map