amis 2.3.2-beta.1 → 2.4.0

package/lib/renderers/Form/IconSelect.js

@@ -0,0 +1,291 @@
+/**
+ * amis v2.4.0
+ * Copyright 2018-2022 baidu
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cx = require('classnames');
+var matchSorter = require('match-sorter');
+var amisCore = require('amis-core');
+var amisUi = require('amis-ui');
+var debouce = require('lodash/debounce');
+var IconSelectStore = require('./IconSelectStore.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var debouce__default = /*#__PURE__*/_interopDefaultLegacy(debouce);
+
+/**
+ * 新图标选择器
+ */
+var IconSelectControl = /** @class */ (function (_super) {
+    tslib.__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__default["default"](_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__default["default"].createElement("div", { className: cx__default["default"]("".concat(ns, "IconSelectControl-input-area")) },
+            pureValue && (React__default["default"].createElement("div", { className: cx__default["default"]("".concat(ns, "IconSelectControl-input-icon-show")) },
+                React__default["default"].createElement("svg", null,
+                    React__default["default"].createElement("use", { xlinkHref: "#".concat(pureValue) })))),
+            React__default["default"].createElement("span", { className: cx__default["default"]("".concat(ns, "IconSelectControl-input-icon-id")) }, iconName),
+            clearable && !disabled && pureValue ? (React__default["default"].createElement("a", { onClick: this.handleClear, className: cx__default["default"]("".concat(ns, "IconSelectControl-clear")) },
+                React__default["default"].createElement(amisUi.Icon, { icon: "input-clear", className: "icon" }))) : null,
+            (!value && placeholder && (React__default["default"].createElement("span", { className: cx__default["default"]("".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 = IconSelectStore.svgIcons.map(function (item) { return ({
+            id: item.groupId,
+            label: item.name
+        }); });
+        return (React__default["default"].createElement("ul", { className: cx__default["default"]("".concat(ns, "IconSelectControl-type-list")) }, types.map(function (item, index) { return (React__default["default"].createElement("li", { key: item.id, onClick: function () { return _this.handleIconTypeClick(item, index); }, className: cx__default["default"]({
+                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
+                ? tslib.__assign(tslib.__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__default["default"].createElement("p", { className: cx__default["default"]("".concat(ns, "IconSelectControl-icon-list-empty")) }, __(noDataTip)));
+        }
+        return (React__default["default"].createElement("ul", { className: cx__default["default"]("".concat(ns, "IconSelectControl-icon-list")) }, icons.map(function (item, index) {
+            var _a;
+            return (React__default["default"].createElement("li", { key: item.id },
+                React__default["default"].createElement("div", { className: cx__default["default"]("".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__default["default"].createElement("svg", null,
+                        React__default["default"].createElement("use", { xlinkHref: "#".concat(item.id) })),
+                    React__default["default"].createElement("div", { className: cx__default["default"]("".concat(ns, "IconSelectControl-icon-list-item-info")) },
+                        React__default["default"].createElement("p", { className: cx__default["default"]("".concat(ns, "IconSelectControl-icon-list-item-info-name")) }, item.name)))));
+        })));
+    };
+    IconSelectControl.prototype.handleSearchValueChange = function (e) {
+        this.setState({
+            searchValue: e
+        });
+    };
+    IconSelectControl.prototype.handleRefreshIconList = function () {
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var refreshIconList, e_1;
+            return tslib.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        refreshIconList = IconSelectStore.refreshIconList;
+                        if (!(refreshIconList && typeof refreshIconList === '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())];
+                    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.matchSorter(icons, inputValue, { keys: ['name'] })
+            : icons;
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(amisUi.SearchBox, { className: cx__default["default"]("".concat(ns, "IconSelectControl-Modal-search")), mini: false, clearable: true, onChange: this.handleSearchValueChange }),
+            (IconSelectStore.refreshIconList &&
+                render('refresh-btn', {
+                    type: 'button',
+                    icon: 'fa fa-refresh'
+                }, {
+                    className: cx__default["default"]("".concat(ns, "IconSelectControl-Modal-refresh")),
+                    onClick: this.handleRefreshIconList
+                })) ||
+                null,
+            React__default["default"].createElement("div", { className: cx__default["default"]("".concat(ns, "IconSelectControl-Modal-content")) },
+                React__default["default"].createElement(amisUi.Spinner, { size: "lg", overlay: true, key: "info", show: this.state.isRefreshLoading }),
+                React__default["default"].createElement("div", { className: cx__default["default"]("".concat(ns, "IconSelectControl-Modal-content-aside")) }, this.renderIconTypes()),
+                React__default["default"].createElement("div", { className: cx__default["default"]("".concat(ns, "IconSelectControl-Modal-content-main")) }, this.renderIconList(filteredIcons)))));
+    };
+    IconSelectControl.prototype.getIconsByType = function () {
+        return (((IconSelectStore === null || IconSelectStore === void 0 ? void 0 : IconSelectStore.svgIcons.length) &&
+            IconSelectStore.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)
+                ? tslib.__assign(tslib.__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__default["default"].createElement("div", { className: cx__default["default"](className, "".concat(ns, "IconSelectControl"), {
+                'is-focused': this.state.showModal,
+                'is-disabled': disabled
+            }) },
+            React__default["default"].createElement("div", { className: cx__default["default"]("".concat(ns, "IconSelectControl-input")), onClick: this.handleClick }, this.renderInputArea()),
+            React__default["default"].createElement(amisUi.Modal, { show: this.state.showModal, closeOnOutside: true, closeOnEsc: true, size: "lg", overlay: true, onHide: function () { return _this.toggleModel(false); } },
+                React__default["default"].createElement(amisUi.Modal.Header, { onClose: function () { return _this.toggleModel(false); } }, __('IconSelect.choice')),
+                React__default["default"].createElement(amisUi.Modal.Body, null, this.renderModalContent()),
+                React__default["default"].createElement(amisUi.Modal.Footer, null,
+                    React__default["default"].createElement(amisUi.Button, { type: "button", className: "m-l", onClick: function () { return _this.toggleModel(false); } }, __('cancel')),
+                    React__default["default"].createElement(amisUi.Button, { type: "button", level: "primary", onClick: this.handleConfirm }, __('confirm'))))));
+    };
+    IconSelectControl.defaultProps = {
+        noDataTip: 'placeholder.noData',
+        clearable: true
+    };
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "handleClick", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "handleClear", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "renderInputArea", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object, Number]),
+        tslib.__metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "handleIconTypeClick", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "renderIconTypes", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "handleConfirm", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Array]),
+        tslib.__metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "renderIconList", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", Promise)
+    ], IconSelectControl.prototype, "handleRefreshIconList", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "renderModalContent", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Boolean]),
+        tslib.__metadata("design:returntype", void 0)
+    ], IconSelectControl.prototype, "toggleModel", null);
+    return IconSelectControl;
+}(React__default["default"].PureComponent));
+/** @class */ ((function (_super) {
+    tslib.__extends(IconSelectControlRenderer, _super);
+    function IconSelectControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    IconSelectControlRenderer = tslib.__decorate([
+        amisCore.FormItem({
+            type: 'icon-select'
+        })
+    ], IconSelectControlRenderer);
+    return IconSelectControlRenderer;
+})(IconSelectControl));
+
+exports["default"] = IconSelectControl;

package/lib/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/lib/renderers/Form/IconSelectStore.js

@@ -0,0 +1,79 @@
+/**
+ * amis v2.4.0
+ * Copyright 2018-2022 baidu
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cloneDeep = require('lodash/cloneDeep');
+var amisCore = require('amis-core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
+
+exports.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);
+}
+exports.refreshIconList = null;
+function setRefreshSvgListAction(func) {
+    if (func && typeof func === 'function') {
+        exports.refreshIconList = function () {
+            return func({
+                setSvgIconList: setSvgIconList,
+                mountIconSpiriteToDom: mountIconSpiriteToDom
+            });
+        };
+    }
+    else {
+        exports.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 = amisCore.getDefaultLocale(); }
+    var clonedIcons = cloneDeep__default["default"](groups);
+    var __ = amisCore.makeTranslator(local);
+    if (combine) {
+        var allIcons = clonedIcons
+            .map(function (item) { return item.children; })
+            .flat();
+        exports.svgIcons = [
+            {
+                name: __('IconSelect.all'),
+                groupId: 'all',
+                children: allIcons
+            }
+        ].concat(groups);
+    }
+    else {
+        exports.svgIcons = groups;
+    }
+}
+
+exports.mountIconSpiriteToDom = mountIconSpiriteToDom;
+exports.setRefreshSvgListAction = setRefreshSvgListAction;
+exports.setSvgIconList = setSvgIconList;

package/lib/renderers/Form/InputArray.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 
@@ -27,8 +27,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 = tslib.__rest(_a, ["items"]);