amis 2.3.2-beta.1 → 2.4.0

package/esm/renderers/Form/IconSelect.js

@@ -0,0 +1,282 @@
+/**
+ * amis v2.4.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __awaiter, __generator, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import cx from 'classnames';
+import { matchSorter } from 'match-sorter';
+import { autobind, FormItem } from 'amis-core';
+import { Icon, SearchBox, Spinner, Modal, Button } from 'amis-ui';
+import debouce from 'lodash/debounce';
+import * as IconSelectStore from './IconSelectStore.js';
+import { svgIcons, refreshIconList } from './IconSelectStore.js';
+
+/**
+ * 新图标选择器
+ */
+var IconSelectControl = /** @class */ (function (_super) {
+    __extends(IconSelectControl, _super);
+    function IconSelectControl(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            activeTypeIndex: 0,
+            showModal: false,
+            tmpCheckIconId: null,
+            searchValue: '',
+            isRefreshLoading: false
+        };
+        _this.handleSearchValueChange = debouce(_this.handleSearchValueChange.bind(_this), 300);
+        return _this;
+    }
+    IconSelectControl.prototype.handleClick = function () {
+        if (this.props.disabled) {
+            return;
+        }
+        this.toggleModel(true);
+    };
+    IconSelectControl.prototype.handleClear = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.props.onChange && this.props.onChange('');
+    };
+    IconSelectControl.prototype.renderInputArea = function () {
+        var _a = this.props, ns = _a.classPrefix, disabled = _a.disabled, value = _a.value, placeholder = _a.placeholder, clearable = _a.clearable;
+        var pureValue = ((value === null || value === void 0 ? void 0 : value.id) && String(value.id).replace(/^svg-/, '')) || '';
+        var iconName = (value === null || value === void 0 ? void 0 : value.name) || pureValue;
+        return (React.createElement("div", { className: cx("".concat(ns, "IconSelectControl-input-area")) },
+            pureValue && (React.createElement("div", { className: cx("".concat(ns, "IconSelectControl-input-icon-show")) },
+                React.createElement("svg", null,
+                    React.createElement("use", { xlinkHref: "#".concat(pureValue) })))),
+            React.createElement("span", { className: cx("".concat(ns, "IconSelectControl-input-icon-id")) }, iconName),
+            clearable && !disabled && pureValue ? (React.createElement("a", { onClick: this.handleClear, className: cx("".concat(ns, "IconSelectControl-clear")) },
+                React.createElement(Icon, { icon: "input-clear", className: "icon" }))) : null,
+            (!value && placeholder && (React.createElement("span", { className: cx("".concat(ns, "IconSelectControl-input-icon-placeholder")) }, placeholder))) ||
+                null));
+    };
+    IconSelectControl.prototype.handleIconTypeClick = function (item, index) {
+        this.setState({
+            activeTypeIndex: index
+        });
+    };
+    IconSelectControl.prototype.renderIconTypes = function () {
+        var _this = this;
+        var ns = this.props.classPrefix;
+        var types = svgIcons.map(function (item) { return ({
+            id: item.groupId,
+            label: item.name
+        }); });
+        return (React.createElement("ul", { className: cx("".concat(ns, "IconSelectControl-type-list")) }, types.map(function (item, index) { return (React.createElement("li", { key: item.id, onClick: function () { return _this.handleIconTypeClick(item, index); }, className: cx({
+                active: index === _this.state.activeTypeIndex
+            }) }, item.label)); })));
+    };
+    IconSelectControl.prototype.handleConfirm = function () {
+        var checkedIcon = this.state.tmpCheckIconId;
+        this.props.onChange &&
+            this.props.onChange(checkedIcon && checkedIcon.id
+                ? __assign(__assign({}, checkedIcon), { id: 'svg-' + checkedIcon.id }) : '');
+        this.toggleModel(false);
+    };
+    IconSelectControl.prototype.handleClickIconInModal = function (icon) {
+        var _a;
+        this.setState({
+            tmpCheckIconId: (icon === null || icon === void 0 ? void 0 : icon.id) === ((_a = this.state.tmpCheckIconId) === null || _a === void 0 ? void 0 : _a.id) ? null : icon
+        });
+    };
+    IconSelectControl.prototype.renderIconList = function (icons) {
+        var _this = this;
+        var _a = this.props, ns = _a.classPrefix, noDataTip = _a.noDataTip, __ = _a.translate;
+        if (!icons || !icons.length) {
+            return (React.createElement("p", { className: cx("".concat(ns, "IconSelectControl-icon-list-empty")) }, __(noDataTip)));
+        }
+        return (React.createElement("ul", { className: cx("".concat(ns, "IconSelectControl-icon-list")) }, icons.map(function (item, index) {
+            var _a;
+            return (React.createElement("li", { key: item.id },
+                React.createElement("div", { className: cx("".concat(ns, "IconSelectControl-icon-list-item"), {
+                        active: ((_a = _this.state.tmpCheckIconId) === null || _a === void 0 ? void 0 : _a.id) === item.id
+                    }), onClick: function () { return _this.handleClickIconInModal(item); } },
+                    React.createElement("svg", null,
+                        React.createElement("use", { xlinkHref: "#".concat(item.id) })),
+                    React.createElement("div", { className: cx("".concat(ns, "IconSelectControl-icon-list-item-info")) },
+                        React.createElement("p", { className: cx("".concat(ns, "IconSelectControl-icon-list-item-info-name")) }, item.name)))));
+        })));
+    };
+    IconSelectControl.prototype.handleSearchValueChange = function (e) {
+        this.setState({
+            searchValue: e
+        });
+    };
+    IconSelectControl.prototype.handleRefreshIconList = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var refreshIconList$1, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        refreshIconList$1 = refreshIconList;
+                        if (!(refreshIconList$1 && typeof refreshIconList$1 === 'function')) return [3 /*break*/, 5];
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        this.setState({
+                            isRefreshLoading: true
+                        });
+                        return [4 /*yield*/, Promise.resolve(refreshIconList$1())];
+                    case 2:
+                        _a.sent();
+                        return [3 /*break*/, 5];
+                    case 3:
+                        e_1 = _a.sent();
+                        console.error(e_1);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        this.setState({
+                            isRefreshLoading: false
+                        });
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    IconSelectControl.prototype.renderModalContent = function () {
+        var _a = this.props, render = _a.render, ns = _a.classPrefix;
+        var icons = this.getIconsByType();
+        var inputValue = this.state.searchValue;
+        var filteredIcons = inputValue
+            ? matchSorter(icons, inputValue, { keys: ['name'] })
+            : icons;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(SearchBox, { className: cx("".concat(ns, "IconSelectControl-Modal-search")), mini: false, clearable: true, onChange: this.handleSearchValueChange }),
+            (refreshIconList &&
+                render('refresh-btn', {
+                    type: 'button',
+                    icon: 'fa fa-refresh'
+                }, {
+                    className: cx("".concat(ns, "IconSelectControl-Modal-refresh")),
+                    onClick: this.handleRefreshIconList
+                })) ||
+                null,
+            React.createElement("div", { className: cx("".concat(ns, "IconSelectControl-Modal-content")) },
+                React.createElement(Spinner, { size: "lg", overlay: true, key: "info", show: this.state.isRefreshLoading }),
+                React.createElement("div", { className: cx("".concat(ns, "IconSelectControl-Modal-content-aside")) }, this.renderIconTypes()),
+                React.createElement("div", { className: cx("".concat(ns, "IconSelectControl-Modal-content-main")) }, this.renderIconList(filteredIcons)))));
+    };
+    IconSelectControl.prototype.getIconsByType = function () {
+        return (((IconSelectStore === null || IconSelectStore === void 0 ? void 0 : svgIcons.length) &&
+            svgIcons[this.state.activeTypeIndex]
+                .children) ||
+            []);
+    };
+    IconSelectControl.prototype.toggleModel = function (isShow) {
+        var value = this.props.value;
+        if (isShow === undefined) {
+            this.setState({
+                showModal: !this.state.showModal,
+                searchValue: ''
+            });
+            return;
+        }
+        this.setState({
+            showModal: isShow,
+            // tmpCheckIconId: isShow ? String(value).replace('svg-', '') : '',
+            tmpCheckIconId: isShow && (value === null || value === void 0 ? void 0 : value.id)
+                ? __assign(__assign({}, value), { id: String(value.id).replace(/^svg-/, '') }) : null,
+            searchValue: ''
+        });
+    };
+    IconSelectControl.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, className = _a.className, ns = _a.classPrefix, disabled = _a.disabled, __ = _a.translate;
+        return (React.createElement("div", { className: cx(className, "".concat(ns, "IconSelectControl"), {
+                'is-focused': this.state.showModal,
+                'is-disabled': disabled
+            }) },
+            React.createElement("div", { className: cx("".concat(ns, "IconSelectControl-input")), onClick: this.handleClick }, this.renderInputArea()),
+            React.createElement(Modal, { show: this.state.showModal, closeOnOutside: true, closeOnEsc: true, size: "lg", overlay: true, onHide: function () { return _this.toggleModel(false); } },
+                React.createElement(Modal.Header, { onClose: function () { return _this.toggleModel(false); } }, __('IconSelect.choice')),
+                React.createElement(Modal.Body, null, this.renderModalContent()),
+                React.createElement(Modal.Footer, null,
+                    React.createElement(Button, { type: "button", className: "m-l", onClick: function () { return _this.toggleModel(false); } }, __('cancel')),
+                    React.createElement(Button, { type: "button", level: "primary", onClick: this.handleConfirm }, __('confirm'))))));
+    };
+    IconSelectControl.defaultProps = {
+        noDataTip: 'placeholder.noData',
+        clearable: true
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "handleClick", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "handleClear", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "renderInputArea", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Number]),
+        __metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "handleIconTypeClick", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "renderIconTypes", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "handleConfirm", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "renderIconList", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Promise)
+    ], IconSelectControl.prototype, "handleRefreshIconList", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "renderModalContent", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Boolean]),
+        __metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "toggleModel", null);
+    return IconSelectControl;
+}(React.PureComponent));
+/** @class */ ((function (_super) {
+    __extends(IconSelectControlRenderer, _super);
+    function IconSelectControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    IconSelectControlRenderer = __decorate([
+        FormItem({
+            type: 'icon-select'
+        })
+    ], IconSelectControlRenderer);
+    return IconSelectControlRenderer;
+})(IconSelectControl));
+
+export { IconSelectControl as default };

package/esm/renderers/Form/IconSelectStore.d.ts

@@ -0,0 +1,19 @@
+export interface SvgIcon {
+    name: string;
+    id: string;
+}
+export interface SvgIconGroup {
+    name: string;
+    groupId: string;
+    children: SvgIcon[];
+}
+export declare let svgIcons: SvgIconGroup[];
+export declare function mountIconSpiriteToDom(spirite: string): void;
+declare type refreshIconListFunc = null | (() => any);
+export declare let refreshIconList: refreshIconListFunc;
+export declare function setRefreshSvgListAction(func: ({ setSvgIconList, mountIconSpiriteToDom }: {
+    setSvgIconList: (arr: SvgIconGroup[]) => void;
+    mountIconSpiriteToDom: (str: string) => void;
+}) => any): void;
+export declare function setSvgIconList(groups: SvgIconGroup[], combine?: boolean, local?: string): void;
+export {};

package/esm/renderers/Form/IconSelectStore.js

@@ -0,0 +1,69 @@
+/**
+ * amis v2.4.0
+ * Copyright 2018-2022 baidu
+ */
+
+import cloneDeep from 'lodash/cloneDeep';
+import { getDefaultLocale, makeTranslator } from 'amis-core';
+
+var svgIcons = [];
+function getSvgMountNode() {
+    var node = document.getElementById('amis-icon-manage-mount-node');
+    if (node) {
+        return node;
+    }
+    else {
+        var newNode = document.createElement('div');
+        newNode.setAttribute('id', 'amis-icon-manage-mount-node');
+        newNode.setAttribute('style', 'width:0;height:0;visibility:hidden;');
+        if (document.body.firstElementChild) {
+            document.body.insertBefore(newNode, document.body.firstElementChild);
+        }
+        else {
+            document.body.appendChild(newNode);
+        }
+        return newNode;
+    }
+}
+function mountIconSpiriteToDom(spirite) {
+    var node = getSvgMountNode();
+    node && (node.innerHTML = spirite);
+}
+var refreshIconList = null;
+function setRefreshSvgListAction(func) {
+    if (func && typeof func === 'function') {
+        refreshIconList = function () {
+            return func({
+                setSvgIconList: setSvgIconList,
+                mountIconSpiriteToDom: mountIconSpiriteToDom
+            });
+        };
+    }
+    else {
+        refreshIconList = null;
+        throw new Error('setRefreshSvgListAction need a function param, not ' + typeof func);
+    }
+}
+function setSvgIconList(groups, combine, local) {
+    if (combine === void 0) { combine = true; }
+    if (local === void 0) { local = getDefaultLocale(); }
+    var clonedIcons = cloneDeep(groups);
+    var __ = makeTranslator(local);
+    if (combine) {
+        var allIcons = clonedIcons
+            .map(function (item) { return item.children; })
+            .flat();
+        svgIcons = [
+            {
+                name: __('IconSelect.all'),
+                groupId: 'all',
+                children: allIcons
+            }
+        ].concat(groups);
+    }
+    else {
+        svgIcons = groups;
+    }
+}
+
+export { mountIconSpiriteToDom, refreshIconList, setRefreshSvgListAction, setSvgIconList, svgIcons };

package/esm/renderers/Form/InputArray.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 
@@ -19,8 +19,7 @@ var InputArrayControl = /** @class */ (function (_super) {
         this.comboInstance = ref;
     };
     InputArrayControl.prototype.validate = function (args) {
-        var _a;
-        return this.comboInstance ? (_a = this.comboInstance).validate.apply(_a, args) : null;
+        return this.comboInstance ? this.comboInstance.validate() : null;
     };
     InputArrayControl.prototype.render = function () {
         var _a = this.props, items = _a.items, rest = __rest(_a, ["items"]);