amis-editor 4.2.0-beta.0 → 5.2.0-beta.0

package/lib/component/BaseControl.js

@@ -0,0 +1,366 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var flatten = require('lodash/flatten');
+var util = require('../util.js');
+var AMisCodeEditor = require('amis-editor-core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
+
+/**
+ * @file 基础控件集合
+ */
+// 默认动作
+var BUTTON_DEFAULT_ACTION = {
+    onEvent: {
+        click: {
+            actions: []
+        }
+    }
+};
+/**
+ * Label提示
+ * 支持传入Schema或String，传入String则使用默认配置，如下：
+ *
+ * @default
+ * ```
+ * className: 'ae-BaseRemark',
+ * icon: 'fa fa-question-circle',
+ * trigger: ['hover', 'click'],
+ * placement: 'left'
+ * ```
+ */
+var BaseLabelMark = function (schema) {
+    var base = {
+        className: 'ae-BaseRemark',
+        icon: 'fa fa-question-circle',
+        trigger: ['hover', 'click'],
+        placement: 'left',
+        content: ''
+    };
+    if (!AMisCodeEditor.isObject(schema) || typeof schema === 'string') {
+        return schema ? tslib.__assign(tslib.__assign({}, base), { content: schema.toString() }) : undefined;
+    }
+    var className = schema.className, content = schema.content, rest = tslib.__rest(schema, ["className", "content"]);
+    return content
+        ? tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, base), rest), (className
+            ? { className: "".concat(base.className, " ").concat(rest.className) }
+            : {})), { content: content }) : undefined;
+};
+var normalizCollapsedGroup = function (publicProps, body) {
+    if (publicProps === void 0) { publicProps = {}; }
+    return body
+        ? Array.isArray(body)
+            ? body
+                .filter(function (item) { return item; })
+                .map(function (item, index) { return (tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, publicProps), { key: item.key || index.toString() }), item), { body: flatten__default["default"](item.body) })); })
+            : [
+                tslib.__assign(tslib.__assign(tslib.__assign({}, publicProps), { key: '0' }), body)
+            ]
+        : [];
+};
+/**
+ * 更新/归一化处理表单项
+ *
+ * @param defaultBody 默认配置
+ * @param body 输入配置
+ * @param replace 是否完全替换
+ * @returns
+ */
+var normalizeBodySchema = function (defaultBody, body, replace, reverse, order) {
+    if (replace === void 0) { replace = false; }
+    if (reverse === void 0) { reverse = false; }
+    var normalizedBody = body
+        ? Array.isArray(body)
+            ? body.concat()
+            : [body]
+        : [];
+    var schema = flatten__default["default"](replace
+        ? normalizedBody
+        : reverse
+            ? tslib.__spreadArray(tslib.__spreadArray([], normalizedBody, true), defaultBody, true) : tslib.__spreadArray(tslib.__spreadArray([], defaultBody, true), normalizedBody, true));
+    return schema;
+};
+/**
+ * 表单项组件面板
+ *
+ * @param {Object=} panels
+ * @param {string=} key
+ * `property` 属性
+ *     `common` 常用
+ *     `status` 状态
+ *     `validation` 校验
+ * `style` 样式
+ * `event` 事件
+ * @param {string=} panels.body - 配置面板Schema
+ * @param {boolean=} panels.replace - 是否完全替换默认Schema，默认追加
+ * @param {Array} panels.validation.validationType - 默认显示的校验类型
+ */
+var formItemControl = function (panels, context) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var collapseProps = {
+        type: 'collapse',
+        headingClassName: 'ae-formItemControl-header',
+        bodyClassName: 'ae-formItemControl-body'
+    };
+    // 已经配置了的属性
+    Object.keys((_a = context === null || context === void 0 ? void 0 : context.schema) !== null && _a !== void 0 ? _a : {});
+    // 选项面版内容，支持Option的组件才展示该面板
+    var optionBody = normalizeBodySchema([], (_b = panels === null || panels === void 0 ? void 0 : panels.option) === null || _b === void 0 ? void 0 : _b.body, (_c = panels === null || panels === void 0 ? void 0 : panels.option) === null || _c === void 0 ? void 0 : _c.replace);
+    // 属性面板配置
+    var collapseGroupBody = (panels === null || panels === void 0 ? void 0 : panels.property)
+        ? normalizCollapsedGroup(collapseProps, panels === null || panels === void 0 ? void 0 : panels.property)
+        : tslib.__spreadArray(tslib.__spreadArray([
+            tslib.__assign(tslib.__assign({}, collapseProps), { header: '常用', key: 'common', body: normalizeBodySchema([
+                    AMisCodeEditor.getSchemaTpl('formItemName', {
+                        required: true
+                    }),
+                    AMisCodeEditor.getSchemaTpl('label'),
+                    AMisCodeEditor.getSchemaTpl('labelRemark'),
+                    AMisCodeEditor.getSchemaTpl('remark'),
+                    AMisCodeEditor.getSchemaTpl('placeholder'),
+                    AMisCodeEditor.getSchemaTpl('description')
+                ], (_d = panels === null || panels === void 0 ? void 0 : panels.common) === null || _d === void 0 ? void 0 : _d.body, (_e = panels === null || panels === void 0 ? void 0 : panels.common) === null || _e === void 0 ? void 0 : _e.replace, (_f = panels === null || panels === void 0 ? void 0 : panels.common) === null || _f === void 0 ? void 0 : _f.reverse) })
+        ], (optionBody.length !== 0
+            ? [
+                tslib.__assign(tslib.__assign({}, collapseProps), { header: ((_g = panels === null || panels === void 0 ? void 0 : panels.option) === null || _g === void 0 ? void 0 : _g.title) || '选项', key: 'option', body: optionBody })
+            ]
+            : []), true), [
+            tslib.__assign(tslib.__assign({}, collapseProps), { header: '状态', key: 'status', body: normalizeBodySchema([
+                    AMisCodeEditor.getSchemaTpl('hidden'),
+                    // TODO: 下面的部分表单项才有，是不是判断一下是否是表单项
+                    AMisCodeEditor.getSchemaTpl('disabled'),
+                    AMisCodeEditor.getSchemaTpl('clearValueOnHidden')
+                ], (_h = panels === null || panels === void 0 ? void 0 : panels.status) === null || _h === void 0 ? void 0 : _h.body, (_j = panels === null || panels === void 0 ? void 0 : panels.status) === null || _j === void 0 ? void 0 : _j.replace, (_k = panels === null || panels === void 0 ? void 0 : panels.status) === null || _k === void 0 ? void 0 : _k.reverse) })
+        ], false);
+    return [
+        {
+            type: 'tabs',
+            tabsMode: 'line',
+            className: 'editor-prop-config-tabs',
+            linksClassName: 'editor-prop-config-tabs-links',
+            contentClassName: 'no-border editor-prop-config-tabs-cont',
+            tabs: tslib.__spreadArray([
+                {
+                    title: '属性',
+                    className: 'p-none',
+                    body: [
+                        {
+                            type: 'collapse-group',
+                            expandIconPosition: 'right',
+                            expandIcon: {
+                                type: 'icon',
+                                icon: 'chevron-right'
+                            },
+                            className: 'ae-formItemControl',
+                            activeKey: collapseGroupBody.map(function (group, index) { return group.key; }),
+                            body: collapseGroupBody
+                        }
+                    ]
+                },
+                {
+                    title: '外观',
+                    body: normalizeBodySchema([
+                        AMisCodeEditor.getSchemaTpl('formItemMode'),
+                        AMisCodeEditor.getSchemaTpl('horizontalMode'),
+                        AMisCodeEditor.getSchemaTpl('horizontal', {
+                            label: '',
+                            visibleOn: 'data.mode == "horizontal" && data.label !== false && data.horizontal'
+                        }),
+                        // renderer.sizeMutable !== false
+                        //   ? getSchemaTpl('formItemSize')
+                        //   : null,
+                        AMisCodeEditor.getSchemaTpl('formItemInline'),
+                        AMisCodeEditor.getSchemaTpl('className'),
+                        AMisCodeEditor.getSchemaTpl('className', {
+                            label: 'Label CSS 类名',
+                            name: 'labelClassName'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('className', {
+                            label: '控件 CSS 类名',
+                            name: 'inputClassName'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('className', {
+                            label: '描述 CSS 类名',
+                            name: 'descriptionClassName',
+                            visibleOn: 'this.description'
+                        })
+                    ], (_l = panels === null || panels === void 0 ? void 0 : panels.style) === null || _l === void 0 ? void 0 : _l.body, (_m = panels === null || panels === void 0 ? void 0 : panels.style) === null || _m === void 0 ? void 0 : _m.replace, (_o = panels === null || panels === void 0 ? void 0 : panels.style) === null || _o === void 0 ? void 0 : _o.reverse)
+                }
+            ], (AMisCodeEditor.isObject(context) && !((_p = panels === null || panels === void 0 ? void 0 : panels.event) === null || _p === void 0 ? void 0 : _p.hidden)
+                ? [
+                    {
+                        title: '事件',
+                        className: 'p-none',
+                        body: normalizeBodySchema([
+                            AMisCodeEditor.getSchemaTpl('eventControl', tslib.__assign({ name: 'onEvent' }, util.getEventControlConfig(context.info.plugin.manager, context)))
+                        ], (_q = panels === null || panels === void 0 ? void 0 : panels.event) === null || _q === void 0 ? void 0 : _q.body, (_r = panels === null || panels === void 0 ? void 0 : panels.event) === null || _r === void 0 ? void 0 : _r.replace)
+                    }
+                ]
+                : []), true)
+        }
+    ];
+};
+function tipedLabel(body, tip, style) {
+    return {
+        type: 'tooltip-wrapper',
+        tooltip: tip,
+        tooltipTheme: 'dark',
+        placement: 'top',
+        tooltipStyle: tslib.__assign({ fontSize: '12px' }, (style || {})),
+        className: 'ae-formItemControl-label-tip',
+        body: body
+    };
+}
+/**
+ * 信息提示组件模版
+ */
+function remarkTpl(config) {
+    return {
+        type: 'ae-switch-more',
+        formType: 'dialog',
+        label: config.labelRemark
+            ? tipedLabel(config.label, config.labelRemark)
+            : config.label,
+        bulk: false,
+        name: config.name,
+        pipeIn: function (value) { return !!value; },
+        pipeOut: function (value) {
+            // 更新内容
+            if (AMisCodeEditor.isObject(value)) {
+                return value;
+            }
+            // 关到开
+            if (value) {
+                return {
+                    icon: 'fa fa-question-circle',
+                    trigger: ['hover'],
+                    className: 'Remark--warning',
+                    placement: 'top'
+                };
+            }
+            // 开到关
+            return undefined;
+        },
+        form: {
+            size: 'md',
+            className: 'mb-8',
+            mode: 'horizontal',
+            horizontal: {
+                left: 4,
+                right: 8,
+                justify: true
+            },
+            body: {
+                type: 'grid',
+                className: 'pt-4 right-panel-pop',
+                gap: 'lg',
+                columns: [
+                    {
+                        md: '6',
+                        body: [
+                            {
+                                name: 'title',
+                                type: 'input-text',
+                                label: '提示标题',
+                                placeholder: '请输入提示标题'
+                            },
+                            {
+                                name: 'content',
+                                type: 'textarea',
+                                label: '内容'
+                            }
+                        ]
+                    },
+                    {
+                        md: '6',
+                        body: [
+                            {
+                                name: 'placement',
+                                type: 'button-group-select',
+                                size: 'md',
+                                label: '弹出位置',
+                                options: [
+                                    {
+                                        label: '上',
+                                        value: 'top'
+                                    },
+                                    {
+                                        label: '下',
+                                        value: 'bottom'
+                                    },
+                                    {
+                                        label: '左',
+                                        value: 'left'
+                                    },
+                                    {
+                                        label: '右',
+                                        value: 'right'
+                                    }
+                                ]
+                            },
+                            {
+                                name: 'icon',
+                                label: '图标',
+                                type: 'icon-picker',
+                                className: 'fix-icon-picker-overflow'
+                            },
+                            {
+                                name: 'className',
+                                label: 'CSS 类名',
+                                type: 'input-text',
+                                labelRemark: BaseLabelMark('有哪些辅助类 CSS 类名？请前往 <a href="https://baidu.gitee.io/amis/zh-CN/style/index" target="_blank">样式说明</a>，除此之外你可以添加自定义类名，然后在系统配置中添加自定义样式。')
+                            },
+                            {
+                                name: 'trigger',
+                                type: 'select',
+                                label: '触发方式',
+                                labelRemark: BaseLabelMark('浮层触发方式默认值为鼠标悬停'),
+                                multiple: true,
+                                pipeIn: function (value) {
+                                    return Array.isArray(value) ? value.join(',') : [];
+                                },
+                                pipeOut: function (value) {
+                                    return value && value.length ? value.split(',') : ['hover'];
+                                },
+                                options: [
+                                    {
+                                        label: '鼠标悬停',
+                                        value: 'hover'
+                                    },
+                                    {
+                                        label: '点击',
+                                        value: 'click'
+                                    }
+                                ]
+                            },
+                            {
+                                name: 'rootClose',
+                                visibleOn: '~this.trigger.indexOf("click")',
+                                label: '点击空白关闭',
+                                type: 'switch',
+                                mode: 'row',
+                                inputClassName: 'inline-flex justify-between flex-row-reverse'
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    };
+}
+
+exports.BUTTON_DEFAULT_ACTION = BUTTON_DEFAULT_ACTION;
+exports.BaseLabelMark = BaseLabelMark;
+exports.formItemControl = formItemControl;
+exports.remarkTpl = remarkTpl;
+exports.tipedLabel = tipedLabel;

package/lib/component/InputComponentName.js

@@ -0,0 +1,44 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function InputComponentName(props) {
+    var value = props.value, onChange = props.onChange, render = props.render, name = props.name, node = props.node;
+    var _a = React.useState([]), options = _a[0], setOptions = _a[1];
+    React.useEffect(function () {
+        var thisComp = node === null || node === void 0 ? void 0 : node.getComponent();
+        var scoped = thisComp === null || thisComp === void 0 ? void 0 : thisComp.context;
+        var comps = [];
+        while (scoped === null || scoped === void 0 ? void 0 : scoped.getComponents) {
+            scoped.getComponents().forEach(function (c) {
+                if (c.props.name && c !== thisComp) {
+                    // todo 把孩子节点拼装成 xxx.xxx
+                    comps.push(c.props.name);
+                }
+            });
+            scoped = scoped.parent;
+        }
+        setOptions(comps);
+    }, [node]);
+    function onInnerChange(value) {
+        onChange(value);
+        return false;
+    }
+    return render('inner', {
+        type: 'input-text',
+        name: name
+    }, {
+        value: value,
+        onChange: onInnerChange,
+        options: options
+    });
+}
+
+exports.InputComponentName = InputComponentName;

package/{dist → lib}/component/TableViewEditor.d.ts

@@ -3,8 +3,8 @@
  */
 import React from 'react';
 import { TableViewSchema } from 'amis/lib/renderers/TableView';
-import { EditorManager } from '../manager';
-import { EditorStoreType } from '../store/editor';
+import { EditorManager } from 'amis-editor-core';
+import { EditorStoreType } from 'amis-editor-core';
 interface TableViewEditorProps {
     schema: TableViewSchema;
     manager: EditorManager;