"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var theme_1 = require("../theme");
var Checkboxes_1 = require("./Checkboxes");
var uncontrollable_1 = tslib_1.__importDefault(require("uncontrollable"));
var Selections_1 = tslib_1.__importDefault(require("./Selections"));
var TableCheckboxes_1 = tslib_1.__importDefault(require("./TableCheckboxes"));
var ListCheckboxes_1 = tslib_1.__importDefault(require("./ListCheckboxes"));
var TreeCheckboxes_1 = tslib_1.__importDefault(require("./TreeCheckboxes"));
var helper_1 = require("../utils/helper");
var InputBox_1 = tslib_1.__importDefault(require("./InputBox"));
var icons_1 = require("./icons");
var debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
var Transfer = /** @class */ (function (_super) {
    tslib_1.__extends(Transfer, _super);
    function Transfer() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            inputValue: '',
            searchResult: null
        };
        _this.unmounted = false;
        _this.lazySearch = debounce_1.default(function (text) {
            (function (text) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
                var onSearch, result;
                var _this = this;
                return tslib_1.__generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            onSearch = this.props.onSearch;
                            return [4 /*yield*/, onSearch(text, function (cancelExecutor) { return (_this.cancelSearch = cancelExecutor); })];
                        case 1:
                            result = _a.sent();
                            if (this.unmounted) {
                                return [2 /*return*/];
                            }
                            if (!Array.isArray(result)) {
                                throw new Error('onSearch 需要返回数组');
                            }
                            this.setState({
                                searchResult: result
                            });
                            return [2 /*return*/];
                    }
                });
            }); })(text).catch(function (e) { return console.error(e); });
        }, 250, {
            trailing: true,
            leading: false
        });
        return _this;
    }
    Transfer.prototype.componentWillUnmount = function () {
        this.lazySearch.cancel();
        this.unmounted = true;
    };
    Transfer.prototype.toggleAll = function () {
        var _a = this.props, options = _a.options, option2value = _a.option2value, onChange = _a.onChange, value = _a.value;
        var valueArray = Checkboxes_1.Checkboxes.value2array(value, options, option2value);
        var availableOptions = helper_1.flattenTree(options).filter(function (option) { return !option.disabled && option.value !== void 0; });
        if (valueArray.length < availableOptions.length) {
            valueArray = availableOptions;
        }
        else {
            valueArray = [];
        }
        var newValue = option2value
            ? valueArray.map(function (item) { return option2value(item); })
            : valueArray;
        onChange && onChange(newValue);
    };
    Transfer.prototype.clearAll = function () {
        var onChange = this.props.onChange;
        onChange && onChange([]);
    };
    Transfer.prototype.handleSearch = function (text) {
        var _this = this;
        this.setState({
            inputValue: text
        }, function () {
            // 如果有取消搜索，先取消掉。
            _this.cancelSearch && _this.cancelSearch();
            _this.lazySearch(text);
        });
    };
    Transfer.prototype.handleSeachCancel = function () {
        this.setState({
            inputValue: '',
            searchResult: null
        });
    };
    Transfer.prototype.renderSelect = function () {
        var _a = this.props, selectRender = _a.selectRender, selectMode = _a.selectMode, cx = _a.classnames, selectTitle = _a.selectTitle, onSearch = _a.onSearch, disabled = _a.disabled, options = _a.options;
        if (selectRender) {
            return selectRender(this.props);
        }
        return (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement("div", { className: cx('Transfer-title', selectMode === 'table' ? 'Transfer-title--light' : '') },
                react_1.default.createElement("span", null,
                    selectTitle,
                    "\uFF08",
                    this.valueArray.length,
                    "/",
                    this.availableOptions.length,
                    "\uFF09"),
                selectMode !== 'table' ? (react_1.default.createElement("a", { onClick: this.toggleAll, className: cx('Transfer-checkAll', disabled || !options.length ? 'is-disabled' : '') }, "\u5168\u9009")) : null),
            onSearch ? (react_1.default.createElement("div", { className: cx('Transfer-search') },
                react_1.default.createElement(InputBox_1.default, { value: this.state.inputValue, onChange: this.handleSearch, placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57", clearable: false }, this.state.searchResult !== null ? (react_1.default.createElement("a", { onClick: this.handleSeachCancel },
                    react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon" }))) : (react_1.default.createElement(icons_1.Icon, { icon: "search", className: "icon" }))))) : null,
            this.state.searchResult !== null
                ? this.renderSearchResult()
                : this.renderOptions()));
    };
    Transfer.prototype.renderSearchResult = function () {
        var _a = this.props, searchResultMode = _a.searchResultMode, selectMode = _a.selectMode, noResultsText = _a.noResultsText, searchResultColumns = _a.searchResultColumns, cx = _a.classnames, value = _a.value, onChange = _a.onChange, option2value = _a.option2value;
        var options = this.state.searchResult || [];
        var mode = searchResultMode || selectMode;
        return mode === 'table' ? (react_1.default.createElement(TableCheckboxes_1.default, { placeholder: noResultsText, className: cx('Transfer-checkboxes'), columns: searchResultColumns, options: options, value: value, onChange: onChange, option2value: option2value })) : mode === 'tree' ? (react_1.default.createElement(TreeCheckboxes_1.default, { placeholder: noResultsText, className: cx('Transfer-checkboxes'), options: options, value: value, onChange: onChange, option2value: option2value })) : (react_1.default.createElement(ListCheckboxes_1.default, { placeholder: noResultsText, className: cx('Transfer-checkboxes'), options: options, value: value, onChange: onChange, option2value: option2value }));
    };
    Transfer.prototype.renderOptions = function () {
        var _a = this.props, selectMode = _a.selectMode, columns = _a.columns, options = _a.options, value = _a.value, onChange = _a.onChange, option2value = _a.option2value, cx = _a.classnames;
        return selectMode === 'table' ? (react_1.default.createElement(TableCheckboxes_1.default, { className: cx('Transfer-checkboxes'), columns: columns, options: options, value: value, onChange: onChange, option2value: option2value })) : selectMode === 'tree' ? (react_1.default.createElement(TreeCheckboxes_1.default, { className: cx('Transfer-checkboxes'), options: options, value: value, onChange: onChange, option2value: option2value })) : (react_1.default.createElement(ListCheckboxes_1.default, { className: cx('Transfer-checkboxes'), options: options, value: value, onChange: onChange, option2value: option2value }));
    };
    Transfer.prototype.render = function () {
        var _a = this.props, inline = _a.inline, cx = _a.classnames, className = _a.className, value = _a.value, onChange = _a.onChange, resultTitle = _a.resultTitle, sortable = _a.sortable, options = _a.options, option2value = _a.option2value, disabled = _a.disabled;
        this.valueArray = Checkboxes_1.Checkboxes.value2array(value, options, option2value);
        this.availableOptions = helper_1.flattenTree(options).filter(function (option) { return !option.disabled && option.value !== void 0; });
        return (react_1.default.createElement("div", { className: cx('Transfer', className, inline ? 'Transfer--inline' : '') },
            react_1.default.createElement("div", { className: cx('Transfer-select') }, this.renderSelect()),
            react_1.default.createElement("div", { className: cx('Transfer-arrow') }),
            react_1.default.createElement("div", { className: cx('Transfer-result') },
                react_1.default.createElement("div", { className: cx('Transfer-title') },
                    react_1.default.createElement("span", null,
                        resultTitle,
                        "\uFF08",
                        this.valueArray.length,
                        "/",
                        this.availableOptions.length,
                        "\uFF09"),
                    react_1.default.createElement("a", { onClick: this.clearAll, className: cx('Transfer-clearAll', disabled || !this.valueArray.length ? 'is-disabled' : '') }, "\u6E05\u7A7A")),
                react_1.default.createElement(Selections_1.default, { className: cx('Transfer-selections'), sortable: sortable, value: value, onChange: onChange, placeholder: "\u8BF7\u5148\u9009\u62E9\u5DE6\u4FA7\u6570\u636E" }))));
    };
    Transfer.defaultProps = {
        selectTitle: '请选择',
        resultTitle: '当前选择',
        itemRender: function (option) { return react_1.default.createElement("span", null, option.label); }
    };
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", []),
        tslib_1.__metadata("design:returntype", void 0)
    ], Transfer.prototype, "toggleAll", null);
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", []),
        tslib_1.__metadata("design:returntype", void 0)
    ], Transfer.prototype, "clearAll", null);
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [String]),
        tslib_1.__metadata("design:returntype", void 0)
    ], Transfer.prototype, "handleSearch", null);
    tslib_1.__decorate([
        helper_1.autobind,
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", []),
        tslib_1.__metadata("design:returntype", void 0)
    ], Transfer.prototype, "handleSeachCancel", null);
    return Transfer;
}(react_1.default.Component));
exports.Transfer = Transfer;
exports.default = theme_1.themeable(uncontrollable_1.default(Transfer, {
    value: 'onChange'
}));
//# sourceMappingURL=./components/Transfer.js.map
