"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 icons_1 = require("./icons");
var helper_1 = require("../utils/helper");
var sortablejs_1 = tslib_1.__importDefault(require("sortablejs"));
var react_dom_1 = require("react-dom");
var Selections = /** @class */ (function (_super) {
    tslib_1.__extends(Selections, _super);
    function Selections() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.id = helper_1.guid();
        return _this;
    }
    Selections.prototype.componentDidMount = function () {
        this.props.sortable && this.initSortable();
    };
    Selections.prototype.componentDidUpdate = function () {
        if (this.props.sortable) {
            this.sortable || this.initSortable();
        }
        else {
            this.desposeSortable();
        }
    };
    Selections.prototype.componentWillUnmount = function () {
        this.desposeSortable();
    };
    Selections.prototype.handleRemove = function (e) {
        var _a;
        var index = parseInt(e.currentTarget.getAttribute('data-index'), 10);
        var _b = this.props, value = _b.value, onChange = _b.onChange;
        if (!Array.isArray(value)) {
            return;
        }
        var newValue = value.concat();
        newValue.splice(index, 1);
        (_a = onChange) === null || _a === void 0 ? void 0 : _a(newValue);
    };
    Selections.prototype.initSortable = function () {
        var _this = this;
        var ns = this.props.classPrefix;
        var dom = react_dom_1.findDOMNode(this);
        var container = dom.querySelector("." + ns + "Selections-items");
        if (!container) {
            return;
        }
        this.sortable = new sortablejs_1.default(container, {
            group: "selections-" + this.id,
            animation: 150,
            handle: "." + ns + "Selections-dragbar",
            ghostClass: 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);
            }
        });
    };
    Selections.prototype.desposeSortable = function () {
        var _a;
        (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
        delete this.sortable;
    };
    Selections.prototype.render = function () {
        var _this = this;
        var _a = this.props, cx = _a.classnames, className = _a.className, value = _a.value, placeholder = _a.placeholder, itemRender = _a.itemRender, disabled = _a.disabled, title = _a.title, itemClassName = _a.itemClassName, sortable = _a.sortable;
        return (react_1.default.createElement("div", { className: cx('Selections', className) },
            title ? react_1.default.createElement("div", { className: cx('Selections-title') }, title) : null,
            Array.isArray(value) && value.length ? (react_1.default.createElement("div", { className: cx('Selections-items') }, value.map(function (option, index) {
                var _a;
                return (react_1.default.createElement("div", { className: cx('Selections-item', itemClassName, (_a = option) === null || _a === void 0 ? void 0 : _a.className), key: index },
                    sortable && !disabled && value.length > 1 ? (react_1.default.createElement(icons_1.Icon, { className: cx('Selections-dragbar'), icon: "combo-dragger" })) : null,
                    react_1.default.createElement("label", null, itemRender(option)),
                    !disabled ? (react_1.default.createElement("a", { className: cx('Selections-delBtn'), "data-index": index, onClick: _this.handleRemove },
                        react_1.default.createElement(icons_1.Icon, { icon: "close" }))) : null));
            }))) : (react_1.default.createElement("div", { className: cx('Selections-placeholder') }, placeholder))));
    };
    var _a;
    Selections.defaultProps = {
        placeholder: '请先选择数据',
        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", [typeof (_a = typeof react_1.default !== "undefined" && react_1.default.MouseEvent) === "function" ? _a : Object]),
        tslib_1.__metadata("design:returntype", void 0)
    ], Selections.prototype, "handleRemove", null);
    return Selections;
}(react_1.default.Component));
exports.Selections = Selections;
exports.default = theme_1.themeable(Selections);
//# sourceMappingURL=./components/Selections.js.map
