fastlion-amis/lib/components/formula/Editor.js

一种MIS页面生成工具

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormulaEditor = void 0;
var tslib_1 = require("tslib");
/**
 * @file 公式编辑器
 */
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var uncontrollable_1 = require("uncontrollable");
var plugin_1 = require("./plugin");
var doc_1 = require("amis-formula/dist/doc");
var FuncList_1 = (0, tslib_1.__importDefault)(require("./FuncList"));
var VariableList_1 = require("./VariableList");
var amis_formula_1 = require("amis-formula");
var helper_1 = require("../../utils/helper");
var CodeMirror_1 = (0, tslib_1.__importDefault)(require("../CodeMirror"));
var theme_1 = require("../../theme");
var locale_1 = require("../../locale");
var FormulaEditor = /** @class */ (function (_super) {
    (0, tslib_1.__extends)(FormulaEditor, _super);
    function FormulaEditor() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            focused: false
        };
        return _this;
    }
    FormulaEditor.buildDefaultFunctions = function (doc) {
        var funcs = [];
        doc.forEach(function (item) {
            var namespace = item.namespace || 'Others';
            var exists = funcs.find(function (item) { return item.groupName === namespace; });
            if (!exists) {
                exists = {
                    groupName: namespace,
                    items: []
                };
                funcs.push(exists);
            }
            exists.items.push(item);
        });
        return funcs;
    };
    FormulaEditor.highlightValue = function (value, variables, functions) {
        // todo 高亮原始文本
        return value;
    };
    FormulaEditor.prototype.componentWillUnmount = function () {
        var _b;
        (_b = this.editorPlugin) === null || _b === void 0 ? void 0 : _b.dispose();
    };
    FormulaEditor.prototype.handleFocus = function () {
        this.setState({
            focused: true
        });
    };
    FormulaEditor.prototype.handleBlur = function () {
        this.setState({
            focused: false
        });
    };
    FormulaEditor.prototype.insertValue = function (value, type) {
        var _b;
        (_b = this.editorPlugin) === null || _b === void 0 ? void 0 : _b.insertContent(value, type);
    };
    FormulaEditor.prototype.handleEditorMounted = function (cm, editor) {
        var _this = this;
        this.editorPlugin = new plugin_1.FormulaPlugin(editor, cm, function () { return _this.props; });
    };
    FormulaEditor.prototype.validate = function () {
        var value = this.props.value;
        try {
            value
                ? (0, amis_formula_1.parse)(value, {
                    evalMode: this.props.evalMode
                })
                : null;
        }
        catch (e) {
            return e.message;
        }
        return;
    };
    FormulaEditor.prototype.handleFunctionSelect = function (item) {
        var _b;
        (_b = this.editorPlugin) === null || _b === void 0 ? void 0 : _b.insertContent("" + item.name, 'func');
    };
    FormulaEditor.prototype.handleVariableSelect = function (item) {
        var _b;
        (_b = this.editorPlugin) === null || _b === void 0 ? void 0 : _b.insertContent({
            key: item.value,
            name: item.label
        }, 'variable');
    };
    FormulaEditor.prototype.handleOnChange = function (value) {
        var onChange = this.props.onChange;
        onChange === null || onChange === void 0 ? void 0 : onChange(value);
    };
    FormulaEditor.prototype.editorFactory = function (dom, cm) {
        return (0, plugin_1.editorFactory)(dom, cm, this.props);
    };
    FormulaEditor.prototype.render = function () {
        var _b = this.props, variables = _b.variables, header = _b.header, value = _b.value, functions = _b.functions, variableMode = _b.variableMode, __ = _b.translate, cx = _b.classnames, variableClassName = _b.variableClassName, functionClassName = _b.functionClassName, classPrefix = _b.classPrefix;
        var focused = this.state.focused;
        return (react_1.default.createElement("div", { className: cx("FormulaEditor", {
                'is-focused': focused
            }) },
            react_1.default.createElement("section", { className: cx("FormulaEditor-content") },
                react_1.default.createElement("header", { className: cx("FormulaEditor-header") }, __(header || 'FormulaEditor.title')),
                react_1.default.createElement(CodeMirror_1.default, { className: cx('FormulaEditor-editor'), value: value, onChange: this.handleOnChange, editorFactory: this.editorFactory, editorDidMount: this.handleEditorMounted, onFocus: this.handleFocus, onBlur: this.handleBlur })),
            react_1.default.createElement("section", { className: cx('FormulaEditor-settings') },
                react_1.default.createElement("div", { className: cx('FormulaEditor-panel') },
                    react_1.default.createElement("div", { className: cx('FormulaEditor-panel-header') }, __('FormulaEditor.variable')),
                    react_1.default.createElement("div", { className: cx('FormulaEditor-panel-body') },
                        react_1.default.createElement(VariableList_1.VariableList, { classPrefix: classPrefix, className: cx('FormulaEditor-VariableList', 'FormulaEditor-VariableList-root', variableClassName), selectMode: variableMode, data: variables, onSelect: this.handleVariableSelect }))),
                react_1.default.createElement(FuncList_1.default, { className: functionClassName, title: __('FormulaEditor.function'), data: functions, onSelect: this.handleFunctionSelect }))));
    };
    var _a;
    var _b;
    _a = FormulaEditor;
    FormulaEditor.defaultProps = {
        // @ts-ignore
        functions: _a.buildDefaultFunctions(doc_1.doc),
        variables: [],
        evalMode: true
    };
    (0, tslib_1.__decorate)([
        helper_1.autobind,
        (0, tslib_1.__metadata)("design:type", Function),
        (0, tslib_1.__metadata)("design:paramtypes", []),
        (0, tslib_1.__metadata)("design:returntype", void 0)
    ], FormulaEditor.prototype, "handleFocus", null);
    (0, tslib_1.__decorate)([
        helper_1.autobind,
        (0, tslib_1.__metadata)("design:type", Function),
        (0, tslib_1.__metadata)("design:paramtypes", []),
        (0, tslib_1.__metadata)("design:returntype", void 0)
    ], FormulaEditor.prototype, "handleBlur", null);
    (0, tslib_1.__decorate)([
        helper_1.autobind,
        (0, tslib_1.__metadata)("design:type", Function),
        (0, tslib_1.__metadata)("design:paramtypes", [Object, String]),
        (0, tslib_1.__metadata)("design:returntype", void 0)
    ], FormulaEditor.prototype, "insertValue", null);
    (0, tslib_1.__decorate)([
        helper_1.autobind,
        (0, tslib_1.__metadata)("design:type", Function),
        (0, tslib_1.__metadata)("design:paramtypes", [Object, Object]),
        (0, tslib_1.__metadata)("design:returntype", void 0)
    ], FormulaEditor.prototype, "handleEditorMounted", null);
    (0, tslib_1.__decorate)([
        helper_1.autobind,
        (0, tslib_1.__metadata)("design:type", Function),
        (0, tslib_1.__metadata)("design:paramtypes", []),
        (0, tslib_1.__metadata)("design:returntype", void 0)
    ], FormulaEditor.prototype, "validate", null);
    (0, tslib_1.__decorate)([
        helper_1.autobind,
        (0, tslib_1.__metadata)("design:type", Function),
        (0, tslib_1.__metadata)("design:paramtypes", [Object]),
        (0, tslib_1.__metadata)("design:returntype", void 0)
    ], FormulaEditor.prototype, "handleFunctionSelect", null);
    (0, tslib_1.__decorate)([
        helper_1.autobind,
        (0, tslib_1.__metadata)("design:type", Function),
        (0, tslib_1.__metadata)("design:paramtypes", [Object]),
        (0, tslib_1.__metadata)("design:returntype", void 0)
    ], FormulaEditor.prototype, "handleVariableSelect", null);
    (0, tslib_1.__decorate)([
        helper_1.autobind,
        (0, tslib_1.__metadata)("design:type", Function),
        (0, tslib_1.__metadata)("design:paramtypes", [Object]),
        (0, tslib_1.__metadata)("design:returntype", void 0)
    ], FormulaEditor.prototype, "handleOnChange", null);
    (0, tslib_1.__decorate)([
        helper_1.autobind,
        (0, tslib_1.__metadata)("design:type", Function),
        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_b = typeof HTMLElement !== "undefined" && HTMLElement) === "function" ? _b : Object, Object]),
        (0, tslib_1.__metadata)("design:returntype", void 0)
    ], FormulaEditor.prototype, "editorFactory", null);
    return FormulaEditor;
}(react_1.default.Component));
exports.FormulaEditor = FormulaEditor;
exports.default = (0, uncontrollable_1.uncontrollable)((0, theme_1.themeable)((0, locale_1.localeable)(FormulaEditor)), {
    value: 'onChange'
}, ['validate']);
//# sourceMappingURL=./components/formula/Editor.js.map