amis-ui 6.13.0-beta.8 → 6.13.0

package/esm/components/ResultTreeList.js

@@ -0,0 +1,241 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import cloneDeep from 'lodash/cloneDeep';
+import isEqual from 'lodash/isEqual';
+import omit from 'lodash/omit';
+import { noop, autobind, themeable, localeable } from 'amis-core';
+import Tree from './Tree.js';
+import TransferSearch from './TransferSearch.js';
+
+// 递归找到对应选中节点(dfs)
+function getDeep(node, cb, pathNodes, valueField) {
+    if (node[valueField] && cb(node)) {
+        node.isChecked = true;
+        for (var i = pathNodes.length - 2; i >= 0; i--) {
+            if (!pathNodes[i].isChecked) {
+                pathNodes[i].isChecked = true;
+                continue;
+            }
+            break;
+        }
+    }
+    else if (node.children && Array.isArray(node.children)) {
+        node.children.forEach(function (n) {
+            pathNodes.push(n);
+            getDeep(n, cb, pathNodes, valueField);
+            pathNodes.pop();
+        });
+    }
+}
+// 递归删除树多余的节点
+function deepCheckedTreeNode(nodes) {
+    var arr = [];
+    for (var i = 0; i < nodes.length; i++) {
+        var node = nodes[i];
+        if (node.isChecked) {
+            if (node.children && Array.isArray(node.children)) {
+                node.children = deepCheckedTreeNode(node.children);
+            }
+            arr.push(node);
+        }
+    }
+    return arr;
+}
+// 根据选项获取到结果
+function getResultOptions(value, options, valueField) {
+    if (value === void 0) { value = []; }
+    var newOptions = cloneDeep(options);
+    var callBack = function (node) {
+        return !!(value || []).find(function (target) { return target[valueField] === node[valueField]; });
+    };
+    newOptions &&
+        newOptions.forEach(function (op) {
+            getDeep(op, callBack, [op], valueField);
+        });
+    return deepCheckedTreeNode(newOptions);
+}
+// 在包含回调函数情况下，遍历树
+function deepTree(nodes, cb) {
+    for (var i = 0; i < nodes.length; i++) {
+        var node = nodes[i];
+        cb(node);
+        if (node.children && Array.isArray(node.children)) {
+            deepTree(node.children, cb);
+        }
+    }
+}
+// 树的节点删除
+function deepDeleteTree(nodes, option, valueField) {
+    var arr = [];
+    for (var i = 0; i < nodes.length; i++) {
+        var node = nodes[i];
+        if (isEqual(node, option)) {
+            continue;
+        }
+        if (node.children && Array.isArray(node.children)) {
+            node.children = deepDeleteTree(node.children, option, valueField);
+        }
+        if ((node.children && node.children.length > 0) ||
+            node[valueField] !== undefined) {
+            arr.push(node);
+        }
+    }
+    return arr;
+}
+var BaseResultTreeList = /** @class */ (function (_super) {
+    __extends(BaseResultTreeList, _super);
+    function BaseResultTreeList() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            searching: false,
+            treeOptions: [],
+            searchTreeOptions: []
+        };
+        return _this;
+    }
+    BaseResultTreeList.itemRender = function (option) {
+        return React__default.createElement("span", null, "".concat(option.scopeLabel || '').concat(option.label));
+    };
+    BaseResultTreeList.getDerivedStateFromProps = function (props) {
+        var newOptions = getResultOptions(props.value, props.options, props.valueField);
+        return {
+            treeOptions: cloneDeep(newOptions)
+        };
+    };
+    BaseResultTreeList.prototype.domSearchRef = function (ref) {
+        while (ref && ref.getWrappedInstance) {
+            ref = ref.getWrappedInstance();
+        }
+        this.searchRef = ref;
+    };
+    // 删除非选中节点
+    BaseResultTreeList.prototype.deleteTreeChecked = function (option) {
+        var _b = this.props, _c = _b.value, value = _c === void 0 ? [] : _c, onChange = _b.onChange, valueField = _b.valueField;
+        var _d = this.state, searching = _d.searching, treeOptions = _d.treeOptions;
+        var temNode = [];
+        var cb = function (node) {
+            // 对比时去掉 parent，因为其无限嵌套
+            if (isEqual(omit(node, 'parent'), omit(option, 'parent'))) {
+                temNode = [node];
+            }
+        };
+        deepTree(treeOptions || [], cb);
+        var arr = [];
+        var cb2 = function (node) {
+            if (node.isChecked && node[valueField]) {
+                arr.push(node);
+            }
+        };
+        deepTree(temNode, cb2);
+        onChange &&
+            onChange(value.filter(function (item) {
+                return !arr.find(function (arrItem) {
+                    // 对比时去掉 parent，因为其无限嵌套，且不相等
+                    return isEqual(omit(arrItem, ['isChecked', 'childrens', 'parent']), omit(item, 'parent'));
+                });
+            }));
+        // 搜索时，重新生成树
+        searching && this.deleteResultTreeNode(option);
+    };
+    // 搜索树点击删除时，删除对应节点
+    BaseResultTreeList.prototype.deleteResultTreeNode = function (option) {
+        var arr = deepDeleteTree(cloneDeep(this.state.searchTreeOptions) || [], option, this.props.valueField);
+        this.setState({ searchTreeOptions: arr });
+    };
+    BaseResultTreeList.prototype.search = function (inputValue) {
+        // 结果为空，直接清空
+        if (!inputValue) {
+            this.clearSearch();
+            return;
+        }
+        var _b = this.props, valueField = _b.valueField, onSearch = _b.onSearch;
+        var temOptions = this.state.treeOptions || [];
+        var cb = function (node) {
+            node.isChecked = false;
+            return true;
+        };
+        deepTree(temOptions, cb);
+        var callBack = function (node) { return onSearch === null || onSearch === void 0 ? void 0 : onSearch(inputValue, node); };
+        temOptions &&
+            temOptions.forEach(function (op) {
+                getDeep(op, callBack, [op], valueField);
+            });
+        this.setState({
+            searching: true,
+            searchTreeOptions: deepCheckedTreeNode(temOptions)
+        });
+    };
+    BaseResultTreeList.prototype.clearSearch = function () {
+        this.setState({
+            searching: false,
+            searchTreeOptions: []
+        });
+    };
+    BaseResultTreeList.prototype.clearInput = function () {
+        var _b, _c;
+        if (this.props.searchable) {
+            (_c = (_b = this.searchRef) === null || _b === void 0 ? void 0 : _b.clearInput) === null || _c === void 0 ? void 0 : _c.call(_b);
+        }
+        this.clearSearch();
+    };
+    BaseResultTreeList.prototype.renderTree = function () {
+        var _this = this;
+        var _b = this.props, className = _b.className, cx = _b.classnames, value = _b.value, valueField = _b.valueField, itemRender = _b.itemRender, __ = _b.translate, placeholder = _b.placeholder, virtualThreshold = _b.virtualThreshold; _b.itemHeight; var loadingConfig = _b.loadingConfig, testIdBuilder = _b.testIdBuilder;
+        var _c = this.state, treeOptions = _c.treeOptions, searching = _c.searching, searchTreeOptions = _c.searchTreeOptions;
+        return (React__default.createElement("div", { className: cx('ResultTreeList', className) }, Array.isArray(value) && value.length ? (React__default.createElement(Tree, { className: cx('Transfer-tree'), options: !searching ? treeOptions : searchTreeOptions, valueField: valueField, value: [], onChange: noop, showIcon: false, itemRender: itemRender, removable: true, loadingConfig: loadingConfig, onDelete: function (option) { return _this.deleteTreeChecked(option); }, virtualThreshold: virtualThreshold, 
+            // itemHeight={itemHeight}
+            testIdBuilder: testIdBuilder })) : (React__default.createElement("div", { className: cx('Selections-placeholder') }, __(placeholder)))));
+    };
+    BaseResultTreeList.prototype.render = function () {
+        var _b = this.props, cx = _b.classnames, className = _b.className, title = _b.title, searchable = _b.searchable, __ = _b.translate, _c = _b.searchPlaceholder, searchPlaceholder = _c === void 0 ? __('Transfer.searchKeyword') : _c;
+        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, { ref: this.domSearchRef, placeholder: searchPlaceholder, onSearch: this.search, onCancelSearch: this.clearSearch })) : null,
+            this.renderTree()));
+    };
+    var _a;
+    _a = BaseResultTreeList;
+    BaseResultTreeList.defaultProps = {
+        placeholder: 'placeholder.selectData',
+        itemRender: _a.itemRender
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], BaseResultTreeList.prototype, "domSearchRef", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], BaseResultTreeList.prototype, "deleteTreeChecked", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], BaseResultTreeList.prototype, "search", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], BaseResultTreeList.prototype, "clearSearch", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], BaseResultTreeList.prototype, "clearInput", null);
+    return BaseResultTreeList;
+}(React__default.Component));
+var ResultTreeList = themeable(localeable(BaseResultTreeList));
+
+export { BaseResultTreeList, ResultTreeList as default };

package/esm/components/RichText.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @file RichText
+ * @description
+ * @author fex
+ */
+import React from 'react';
+import FroalaEditor from 'froala-editor';
+import 'froala-editor/js/plugins/align.min';
+import 'froala-editor/js/plugins/colors.min';
+import 'froala-editor/js/plugins/char_counter.min';
+import 'froala-editor/js/plugins/code_view.min';
+import 'froala-editor/js/plugins/draggable.min';
+import 'froala-editor/js/plugins/entities.min';
+import 'froala-editor/js/plugins/font_family.min';
+import 'froala-editor/js/plugins/font_size.min';
+import 'froala-editor/js/plugins/forms.min';
+import 'froala-editor/js/plugins/fullscreen.min';
+import 'froala-editor/js/plugins/help.min';
+import 'froala-editor/js/plugins/image.min';
+import 'froala-editor/js/plugins/inline_class.min';
+import 'froala-editor/js/plugins/inline_style.min';
+import 'froala-editor/js/plugins/line_breaker.min';
+import 'froala-editor/js/plugins/line_height.min';
+import 'froala-editor/js/plugins/link.min';
+import 'froala-editor/js/plugins/lists.min';
+import 'froala-editor/js/plugins/paragraph_format.min';
+import 'froala-editor/js/plugins/paragraph_style.min';
+import 'froala-editor/js/plugins/print.min';
+import 'froala-editor/js/plugins/quick_insert.min';
+import 'froala-editor/js/plugins/quote.min';
+import 'froala-editor/js/plugins/save.min';
+import 'froala-editor/js/plugins/special_characters.min';
+import 'froala-editor/js/plugins/table.min';
+import 'froala-editor/js/plugins/url.min';
+import 'froala-editor/js/plugins/video.min';
+import 'froala-editor/js/plugins/word_paste.min';
+import 'froala-editor/js/languages/zh_cn.js';
+export interface FroalaEditorComponentProps {
+    config: any;
+    model: string;
+    onModelChange: (value: string) => void;
+    children?: React.ReactNode;
+}
+export default class extends React.Component<any, any> {
+    constructor(props: any);
+    render(): React.JSX.Element;
+}
+export { FroalaEditor };

package/esm/components/RichText.js

@@ -0,0 +1,271 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import React__default from 'react';
+import isEqual from 'lodash/isEqual';
+import FroalaEditor from 'froala-editor';
+export { default as FroalaEditor } from 'froala-editor';
+import Froala from 'froala-editor/js/froala_editor.min.js';
+import 'froala-editor/js/plugins/align.min';
+import 'froala-editor/js/plugins/colors.min';
+import 'froala-editor/js/plugins/char_counter.min';
+import 'froala-editor/js/plugins/code_view.min';
+import 'froala-editor/js/plugins/draggable.min';
+import 'froala-editor/js/plugins/entities.min';
+import 'froala-editor/js/plugins/font_family.min';
+import 'froala-editor/js/plugins/font_size.min';
+import 'froala-editor/js/plugins/forms.min';
+import 'froala-editor/js/plugins/fullscreen.min';
+import 'froala-editor/js/plugins/help.min';
+import 'froala-editor/js/plugins/image.min';
+import 'froala-editor/js/plugins/inline_class.min';
+import 'froala-editor/js/plugins/inline_style.min';
+import 'froala-editor/js/plugins/line_breaker.min';
+import 'froala-editor/js/plugins/line_height.min';
+import 'froala-editor/js/plugins/link.min';
+import 'froala-editor/js/plugins/lists.min';
+import 'froala-editor/js/plugins/paragraph_format.min';
+import 'froala-editor/js/plugins/paragraph_style.min';
+import 'froala-editor/js/plugins/print.min';
+import 'froala-editor/js/plugins/quick_insert.min';
+import 'froala-editor/js/plugins/quote.min';
+import 'froala-editor/js/plugins/save.min';
+import 'froala-editor/js/plugins/special_characters.min';
+import 'froala-editor/js/plugins/table.min';
+import 'froala-editor/js/plugins/url.min';
+import 'froala-editor/js/plugins/video.min';
+import 'froala-editor/js/plugins/word_paste.min';
+import 'froala-editor/js/languages/zh_cn.js';
+
+/**
+ * @file RichText
+ * @description
+ * @author fex
+ */
+// 代码来源于：https://github.com/froala/react-froala-wysiwyg/blob/master/lib/FroalaEditorFunctionality.jsx
+// 改动原因是model 同步有些问题，有时候不更新，所以基于官方代码改造一下。
+// 目前发现的问题是，如果 model 数据修改，如果此时 editor 还没有初始化完成则不会同步成功
+var FroalaEditorComponent = /** @class */ (function (_super) {
+    __extends(FroalaEditorComponent, _super);
+    function FroalaEditorComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.listeningEvents = [];
+        _this.element = null;
+        _this.editor = null;
+        _this.config = {
+            immediateReactModelUpdate: false,
+            reactIgnoreAttrs: null
+        };
+        _this.editorInitialized = false;
+        _this.INNER_HTML_ATTR = 'innerHTML';
+        _this.oldModel = null;
+        return _this;
+    }
+    // After first time render.
+    FroalaEditorComponent.prototype.componentDidMount = function () {
+        this.createEditor();
+    };
+    FroalaEditorComponent.prototype.componentWillUnmount = function () {
+        this.destroyEditor();
+    };
+    FroalaEditorComponent.prototype.componentDidUpdate = function (prevProps) {
+        if (!isEqual(this.props.config, prevProps.config)) {
+            this.destroyEditor();
+            this.createEditor();
+            return;
+        }
+        if (JSON.stringify(this.oldModel) == JSON.stringify(this.props.model)) {
+            return;
+        }
+        this.setContent();
+    };
+    // Return cloned object
+    FroalaEditorComponent.prototype.clone = function (item) {
+        var me = this;
+        if (!item) {
+            return item;
+        } // null, undefined values check
+        var types = [Number, String, Boolean], result;
+        // normalizing primitives if someone did new String('aaa'), or new Number('444');
+        types.forEach(function (type) {
+            if (item instanceof type) {
+                result = type(item);
+            }
+        });
+        if (typeof result == 'undefined') {
+            if (Object.prototype.toString.call(item) === '[object Array]') {
+                result = [];
+                item.forEach(function (child, index, array) {
+                    result[index] = me.clone(child);
+                });
+            }
+            else if (typeof item == 'object') {
+                // testing that this is DOM
+                if (item.nodeType && typeof item.cloneNode == 'function') {
+                    result = item.cloneNode(true);
+                }
+                else if (!item.prototype) {
+                    // check that this is a literal
+                    if (item instanceof Date) {
+                        result = new Date(item);
+                    }
+                    else {
+                        // it is an object literal
+                        result = {};
+                        for (var i in item) {
+                            result[i] = me.clone(item[i]);
+                        }
+                    }
+                }
+                else {
+                    {
+                        result = item;
+                    }
+                }
+            }
+            else {
+                result = item;
+            }
+        }
+        return result;
+    };
+    FroalaEditorComponent.prototype.createEditor = function () {
+        var _this = this;
+        if (this.editorInitialized) {
+            return;
+        }
+        this.config = this.clone(this.props.config || this.config);
+        this.config = __assign({}, this.config);
+        this.element = this.el;
+        if (this.props.model) {
+            this.element.innerHTML = this.props.model;
+        }
+        this.setContent();
+        // Default initialized.
+        this.registerEvent('initialized', this.config.events && this.config.events.initialized);
+        // Check if events are set.
+        if (!this.config.events)
+            this.config.events = {};
+        this.config.events.initialized = function () {
+            _this.editorInitialized = true;
+            _this.initListeners();
+        };
+        this.editor = new FroalaEditor(this.element, this.config);
+    };
+    FroalaEditorComponent.prototype.setContent = function () {
+        var _this = this;
+        if (this.props.model || this.props.model == '') {
+            this.oldModel = this.props.model;
+            if (this.editorInitialized) {
+                this.setNormalTagContent();
+            }
+            else {
+                if (!this._initEvents)
+                    this._initEvents = [];
+                this._initEvents.push(function () { return _this.setNormalTagContent(); });
+            }
+        }
+    };
+    FroalaEditorComponent.prototype.setNormalTagContent = function () {
+        var self = this;
+        self.editor.html && self.editor.html.set(self.props.model || '');
+        if (self.editorInitialized && self.editor.undo) {
+            //This will reset the undo stack everytime the model changes externally. Can we fix this?
+            self.editor.undo.reset();
+            self.editor.undo.saveStep();
+        }
+    };
+    FroalaEditorComponent.prototype.destroyEditor = function () {
+        if (this.element) {
+            this.editor.destroy && this.editor.destroy();
+            this.listeningEvents.length = 0;
+            this.element = null;
+            this.editorInitialized = false;
+            this._initEvents = [];
+        }
+    };
+    FroalaEditorComponent.prototype.getEditor = function () {
+        if (this.element) {
+            return this.editor;
+        }
+        return null;
+    };
+    FroalaEditorComponent.prototype.updateModel = function () {
+        if (!this.props.onModelChange) {
+            return;
+        }
+        var modelContent = '';
+        var returnedHtml = this.editor.html.get();
+        if (typeof returnedHtml === 'string') {
+            modelContent = returnedHtml;
+        }
+        if (this.oldModel !== modelContent) {
+            this.oldModel = modelContent;
+            this.props.onModelChange(modelContent);
+        }
+    };
+    FroalaEditorComponent.prototype.initListeners = function () {
+        var self = this;
+        // bind contentChange and keyup event to froalaModel
+        this.editor.events.on('contentChanged', function () {
+            self.updateModel();
+        });
+        if (this.config.immediateReactModelUpdate) {
+            this.editor.events.on('keyup', function () {
+                self.updateModel();
+            });
+        }
+        // Call init events.
+        if (this._initEvents) {
+            for (var i = 0; i < this._initEvents.length; i++) {
+                this._initEvents[i].call(this.editor);
+            }
+        }
+    };
+    // register event on jquery editor element
+    FroalaEditorComponent.prototype.registerEvent = function (eventName, callback) {
+        if (!eventName || !callback) {
+            return;
+        }
+        if (eventName == 'initialized') {
+            if (!this._initEvents)
+                this._initEvents = [];
+            this._initEvents.push(callback);
+        }
+        else {
+            if (!this.config.events) {
+                this.config.events = {};
+            }
+            this.config.events[eventName] = callback;
+        }
+    };
+    FroalaEditorComponent.prototype.render = function () {
+        var _this = this;
+        return (React__default.createElement("textarea", { ref: function (el) { return (_this.el = el); } }, this.props.children));
+    };
+    return FroalaEditorComponent;
+}(React__default.Component));
+var default_1 = /** @class */ (function (_super) {
+    __extends(default_1, _super);
+    function default_1(props) {
+        var _this = _super.call(this, props) || this;
+        Froala.VIDEO_PROVIDERS = [
+            {
+                test_regex: /.*/,
+                url_regex: '',
+                url_text: '',
+                html: '<span class="fr-video fr-dvb fr-draggable" contenteditable="false" draggable="true"><video class="fr-draggable" controls="" data-msg="ok" data-status="0" src="{url}" style="width: 600px;"></video></span>'
+            }
+        ];
+        return _this;
+    }
+    default_1.prototype.render = function () {
+        return (React__default.createElement(FroalaEditorComponent, { config: this.props.config, model: this.props.model, onModelChange: this.props.onModelChange }));
+    };
+    return default_1;
+}(React__default.Component));
+
+export { default_1 as default };