"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResultList = void 0;
var tslib_1 = require("tslib");
/**
 * 用来显示选择结果，垂直显示。支持移出、排序等操作。
 */
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var sortablejs_1 = (0, tslib_1.__importDefault)(require("sortablejs"));
var react_dom_1 = require("react-dom");
var Select_1 = require("./Select");
var theme_1 = require("../theme");
var icons_1 = require("./icons");
var helper_1 = require("../utils/helper");
var locale_1 = require("../locale");
var Selection_1 = require("./Selection");
var TransferSearch_1 = (0, tslib_1.__importDefault)(require("./TransferSearch"));
var ResultList = /** @class */ (function (_super) {
    (0, tslib_1.__extends)(ResultList, _super);
    function ResultList() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            searchResult: null
        };
        _this.id = (0, helper_1.guid)();
        _this.unmounted = false;
        return _this;
    }
    ResultList.itemRender = function (option) {
        return react_1.default.createElement("span", null, "".concat(option.scopeLabel || '').concat(option.label));
    };
    ResultList.prototype.componentDidMount = function () {
        this.props.sortable && this.initSortable();
    };
    ResultList.prototype.componentDidUpdate = function () {
        if (this.props.sortable) {
            this.sortable || this.initSortable();
        }
        else {
            this.desposeSortable();
        }
    };
    ResultList.prototype.componentWillUnmount = function () {
        this.desposeSortable();
        this.unmounted = true;
    };
    ResultList.prototype.initSortable = function () {
        var _this = this;
        var ns = this.props.classPrefix;
        var dom = (0, react_dom_1.findDOMNode)(this);
        var container = dom.querySelector(".".concat(ns, "Selections-items"));
        if (!container) {
            return;
        }
        this.sortable = new sortablejs_1.default(container, {
            group: "selections-".concat(this.id),
            animation: 150,
            handle: ".".concat(ns, "Selections-dragbar"),
            ghostClass: "".concat(ns, "Selections-item--dragging"),
            onEnd: function (e) {
                var _a, _b;
                // 没有移动
                if (e.newIndex === e.oldIndex) {
                    return;
                }
                // 换回来
                var parent = e.to;
                if (e.newIndex < e.oldIndex &&
                    e.oldIndex < parent.childNodes.length - 1) {
                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
                }
                else if (e.oldIndex < parent.childNodes.length - 1) {
                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
                }
                else {
                    parent.appendChild(e.item);
                }
                var value = _this.props.value;
                if (!Array.isArray(value)) {
                    return;
                }
                var newValue = value.concat();
                newValue.splice(e.newIndex, 0, newValue.splice(e.oldIndex, 1)[0]);
                (_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, newValue);
            }
        });
    };
    ResultList.prototype.desposeSortable = function () {
        var _a;
        (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
        delete this.sortable;
    };
    ResultList.prototype.handleValueChange = function (index, value, name) {
        var _a;
        if (typeof name !== 'string') {
            return;
        }
        var _b = this.props, list = _b.value, onChange = _b.onChange;
        var result = Array.isArray(list) ? list.concat() : [];
        if (!result[index]) {
            return;
        }
        result.splice(index, 1, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, result[index]), (_a = {}, _a[name] = value, _a)));
        onChange === null || onChange === void 0 ? void 0 : onChange(result, true);
    };
    ResultList.prototype.search = function (inputValue) {
        var _a = this.props, onSearch = _a.onSearch, value = _a.value;
        var searchResult = (value || []).filter(function (item) { return onSearch && onSearch(inputValue, item); });
        this.setState({ searchResult: searchResult });
    };
    ResultList.prototype.clearSearch = function () {
        this.setState({ searchResult: null });
    };
    // 关闭表格最后一项
    ResultList.prototype.handleCloseItem = function (option) {
        var _a = this.props, value = _a.value, onChange = _a.onChange, option2value = _a.option2value, options = _a.options, disabled = _a.disabled;
        if (disabled || option.disabled) {
            return;
        }
        // 删除普通值
        var valueArray = Selection_1.BaseSelection.value2array(value, options, option2value);
        var idx = valueArray.indexOf(option);
        valueArray.splice(idx, 1);
        var newValue = option2value
            ? valueArray.map(function (item) { return option2value(item); })
            : valueArray;
        onChange && onChange(newValue);
        var searchResult = this.state.searchResult;
        if (searchResult) {
            var searchArray = Selection_1.BaseSelection.value2array(searchResult, options, option2value);
            var searchIdx = searchArray.indexOf(option);
            searchResult.splice(searchIdx, 1);
            this.setState({ searchResult: searchResult });
        }
    };
    ResultList.prototype.renderNormalList = function (value) {
        var _this = this;
        var _a = this.props, cx = _a.classnames, placeholder = _a.placeholder, itemRender = _a.itemRender, disabled = _a.disabled, itemClassName = _a.itemClassName, sortable = _a.sortable, __ = _a.translate;
        return (react_1.default.createElement(react_1.default.Fragment, null, Array.isArray(value) && value.length ? (react_1.default.createElement("div", { className: cx('Selections-items') }, value.map(function (option, index) { return (react_1.default.createElement("div", { className: cx('Selections-item', itemClassName, option === null || option === void 0 ? void 0 : option.className), key: index },
            sortable && !disabled && value.length > 1 ? (react_1.default.createElement(icons_1.Icon, { className: cx('Selections-dragbar icon'), icon: "drag-bar" })) : null,
            react_1.default.createElement("label", null, itemRender(option, {
                index: index,
                disabled: disabled,
                onChange: _this.handleValueChange.bind(_this, index)
            })),
            !disabled ? (react_1.default.createElement("a", { className: cx('Selections-delBtn'), "data-index": index, onClick: function (e) {
                    return _this.handleCloseItem(option);
                } },
                react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon" }))) : null)); }))) :
            (react_1.default.createElement("div", { className: cx('Selections-placeholder') }, __(placeholder)))));
    };
    ResultList.prototype.render = function () {
        var _a = this.props, cx = _a.classnames, className = _a.className, title = _a.title, searchable = _a.searchable, value = _a.value, __ = _a.translate, _b = _a.placeholder, placeholder = _b === void 0 ? __('Transfer.searchKeyword') : _b;
        var searchResult = this.state.searchResult;
        return (react_1.default.createElement("div", { className: cx('Selections', className) },
            title ? react_1.default.createElement("div", { className: cx('Selections-title') }, title) : null,
            searchable ? (react_1.default.createElement(TransferSearch_1.default, { placeholder: placeholder, onSearch: this.search, onCancelSearch: this.clearSearch })) : null,
            this.renderNormalList(searchResult !== null ? searchResult : value)));
    };
    var _a;
    ResultList.defaultProps = {
        placeholder: 'placeholder.selectData',
        itemRender: ResultList.itemRender
    };
    (0, tslib_1.__decorate)([
        helper_1.autobind,
        (0, tslib_1.__metadata)("design:type", Function),
        (0, tslib_1.__metadata)("design:paramtypes", [String]),
        (0, tslib_1.__metadata)("design:returntype", void 0)
    ], ResultList.prototype, "search", null);
    (0, tslib_1.__decorate)([
        helper_1.autobind,
        (0, tslib_1.__metadata)("design:type", Function),
        (0, tslib_1.__metadata)("design:paramtypes", []),
        (0, tslib_1.__metadata)("design:returntype", void 0)
    ], ResultList.prototype, "clearSearch", null);
    (0, tslib_1.__decorate)([
        helper_1.autobind,
        (0, tslib_1.__metadata)("design:type", Function),
        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_a = typeof Select_1.Option !== "undefined" && Select_1.Option) === "function" ? _a : Object]),
        (0, tslib_1.__metadata)("design:returntype", void 0)
    ], ResultList.prototype, "handleCloseItem", null);
    return ResultList;
}(react_1.default.Component));
exports.ResultList = ResultList;
exports.default = (0, theme_1.themeable)((0, locale_1.localeable)(ResultList));
//# sourceMappingURL=./components/ResultList.js.map
