amis-ui 1.0.0-beta.0

package/esm-dist/components/ResultList.js

@@ -0,0 +1,182 @@
+/**
+ * amis-ui v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import Sortable from 'sortablejs';
+import { findDOMNode } from 'react-dom';
+import { guid, autobind, themeable, localeable } from 'amis-core';
+import { Icon } from './icons.js';
+import { BaseSelection } from './Selection.js';
+import TransferSearch from './TransferSearch.js';
+
+var ResultList = /** @class */ (function (_super) {
+    __extends(ResultList, _super);
+    function ResultList() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            searchResult: null
+        };
+        _this.id = guid();
+        _this.unmounted = false;
+        return _this;
+    }
+    ResultList.itemRender = function (option) {
+        return React__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 = findDOMNode(this);
+        var container = dom.querySelector(".".concat(ns, "Selections-items"));
+        if (!container) {
+            return;
+        }
+        this.sortable = new Sortable(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, __assign(__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 = 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 = 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__default.createElement(React__default.Fragment, null, Array.isArray(value) && value.length ? (React__default.createElement("div", { className: cx('Selections-items') }, value.map(function (option, index) { return (React__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__default.createElement(Icon, { className: cx('Selections-dragbar icon'), icon: "drag-bar" })) : null,
+            React__default.createElement("label", null, itemRender(option, {
+                index: index,
+                disabled: disabled,
+                onChange: _this.handleValueChange.bind(_this, index)
+            })),
+            !disabled ? (React__default.createElement("a", { className: cx('Selections-delBtn'), "data-index": index, onClick: function (e) {
+                    return _this.handleCloseItem(option);
+                } },
+                React__default.createElement(Icon, { icon: "close", className: "icon" }))) : null)); }))) : (React__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__default.createElement("div", { className: cx('Selections', className) },
+            title ? React__default.createElement("div", { className: cx('Selections-title') }, title) : null,
+            searchable ? (React__default.createElement(TransferSearch, { placeholder: placeholder, onSearch: this.search, onCancelSearch: this.clearSearch })) : null,
+            this.renderNormalList(searchResult !== null ? searchResult : value)));
+    };
+    ResultList.defaultProps = {
+        placeholder: 'placeholder.selectData',
+        itemRender: ResultList.itemRender
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], ResultList.prototype, "search", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ResultList.prototype, "clearSearch", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ResultList.prototype, "handleCloseItem", null);
+    return ResultList;
+}(React__default.Component));
+var ResultList$1 = themeable(localeable(ResultList));
+
+export { ResultList, ResultList$1 as default };