amis-editor 4.1.0-beta.4 → 5.2.0-beta.1

package/lib/plugin/Custom.js

@@ -0,0 +1,109 @@
+/**
+ * amis-editor v5.2.0-beta.1
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+
+/**
+ * @file 自定义代码
+ */
+var CustomPlugin = /** @class */ (function (_super) {
+    tslib.__extends(CustomPlugin, _super);
+    function CustomPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'custom';
+        _this.$schema = '/schemas/CustomSchema.json';
+        // 组件名称
+        _this.name = '自定义代码';
+        _this.isBaseComponent = true;
+        _this.description = '通过内嵌代码来实现功能';
+        _this.tags = ['功能'];
+        _this.icon = 'fa fa-gears';
+        _this.docLink = '/amis/zh-CN/components/custom';
+        _this.scaffold = {
+            type: 'custom',
+            html: '<div><h2>hello, world!</h2></div>',
+            onMount: "\n      const button = document.createElement('button');\n      button.innerText = '\u70B9\u51FB\u4FEE\u6539\u59D3\u540D';\n      button.onclick = event => {\n        event.preventDefault();\n      };\n      dom.appendChild(button);"
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '自定义代码';
+        _this.panelBody = [
+            AMisCodeEditor.getSchemaTpl('fieldSet', {
+                title: 'HTML 内容',
+                body: [
+                    {
+                        label: 'HTML 内容',
+                        name: 'html',
+                        type: 'editor',
+                        allowFullscreen: true
+                    }
+                ]
+            }),
+            AMisCodeEditor.getSchemaTpl('fieldSet', {
+                title: 'onMount',
+                body: [
+                    {
+                        name: 'onMount',
+                        type: 'editor',
+                        allowFullscreen: true,
+                        size: 'xxl',
+                        label: 'onMount 代码',
+                        options: {
+                            lineNumbers: 'off',
+                            glyphMargin: false,
+                            lineDecorationsWidth: 0,
+                            lineNumbersMinChars: 0
+                        }
+                    }
+                ]
+            }),
+            AMisCodeEditor.getSchemaTpl('fieldSet', {
+                title: 'onUpdate',
+                body: [
+                    {
+                        name: 'onUpdate',
+                        type: 'editor',
+                        allowFullscreen: true,
+                        size: 'xxl',
+                        label: 'onUpdate 代码'
+                    }
+                ]
+            }),
+            AMisCodeEditor.getSchemaTpl('fieldSet', {
+                title: 'onUnmount',
+                body: [
+                    {
+                        name: 'onUnmount',
+                        type: 'editor',
+                        allowFullscreen: true,
+                        size: 'xxl',
+                        label: 'onUnmount 代码'
+                    }
+                ]
+            })
+        ];
+        return _this;
+    }
+    CustomPlugin.prototype.buildSubRenderers = function (context, renderers) {
+        var info = _super.prototype.buildSubRenderers.apply(this, arguments);
+        // 只有 form 下才调 onChange
+        // if (
+        //   context.info.renderer.name === 'form' ||
+        //   context.node.childRegions.some(i => i.region === 'body')
+        // ) {
+        info.scaffold.onMount = "\n        const button = document.createElement('button');\n        button.innerText = '\u70B9\u51FB\u4FEE\u6539\u59D3\u540Dddd';\n        button.onclick = event => {\n          onChange('new name');\n          event.preventDefault();\n        };\n        dom.appendChild(button);";
+        // }
+        return info;
+    };
+    return CustomPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(CustomPlugin);
+
+exports.CustomPlugin = CustomPlugin;

package/lib/plugin/CustomRegion.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @file 自定义代码
+ */
+import { BasePlugin, BasicRendererInfo, RendererInfoResolveEventContext, RegionConfig } from 'amis-editor-core';
+export declare class CustomPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    disabledRendererPlugin: boolean;
+    description: string;
+    docLink: string;
+    tags: string[];
+    icon: string;
+    scaffold: {
+        type: string;
+        html: string;
+        onMount: string;
+        body: {
+            type: string;
+            tpl: string;
+        }[];
+    };
+    previewSchema: {
+        type: string;
+        html: string;
+        onMount: string;
+        body: {
+            type: string;
+            tpl: string;
+        }[];
+    };
+    regions: Array<RegionConfig>;
+    panelTitle: string;
+    panelBody: any[];
+    /**
+     * 备注: 根据当前custom组件的schema中是否有body元素来启动容器模式，用于实现custom组件实现自定义容器类型
+     */
+    getRendererInfo(context: RendererInfoResolveEventContext): BasicRendererInfo | void;
+}

package/lib/plugin/CustomRegion.js

@@ -0,0 +1,154 @@
+/**
+ * amis-editor v5.2.0-beta.1
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+var isArray = require('lodash/isArray');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
+
+/**
+ * @file 自定义代码
+ */
+var CustomPlugin = /** @class */ (function (_super) {
+    tslib.__extends(CustomPlugin, _super);
+    function CustomPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'custom';
+        _this.$schema = '/schemas/CustomSchema.json';
+        // 组件名称
+        _this.name = '自定义容器';
+        _this.isBaseComponent = true;
+        _this.disabledRendererPlugin = true; // 待完善，暂时隐藏
+        _this.description = '通过自定义代码来实现容器组件';
+        _this.docLink = '/amis/zh-CN/components/custom';
+        _this.tags = ['功能', '容器'];
+        _this.icon = 'fa fa-gears';
+        _this.scaffold = {
+            type: 'custom',
+            html: '<div>\n<h2>hello, world!</h2>\n<div id="customBox">自定义容器区域</div>\n</div>',
+            onMount: "this.renderChild('body', props.body, document.getElementById('customBox'));",
+            body: [
+                {
+                    type: 'tpl',
+                    tpl: '<p>自定义容器区域</p>'
+                }
+            ]
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.regions = [
+            {
+                key: 'body',
+                label: '内容区'
+            }
+        ];
+        _this.panelTitle = '自定义代码';
+        _this.panelBody = [
+            AMisCodeEditor.getSchemaTpl('fieldSet', {
+                title: 'HTML 内容',
+                body: [
+                    {
+                        label: 'HTML 内容',
+                        name: 'html',
+                        type: 'editor',
+                        allowFullscreen: true
+                    }
+                ]
+            }),
+            AMisCodeEditor.getSchemaTpl('fieldSet', {
+                title: 'onMount',
+                body: [
+                    {
+                        name: 'onMount',
+                        type: 'editor',
+                        allowFullscreen: true,
+                        size: 'xxl',
+                        label: 'onMount 代码',
+                        options: {
+                            lineNumbers: 'off',
+                            glyphMargin: false,
+                            lineDecorationsWidth: 0,
+                            lineNumbersMinChars: 0
+                        }
+                    }
+                ]
+            }),
+            AMisCodeEditor.getSchemaTpl('fieldSet', {
+                title: 'onUpdate',
+                body: [
+                    {
+                        name: 'onUpdate',
+                        type: 'editor',
+                        allowFullscreen: true,
+                        size: 'xxl',
+                        label: 'onUpdate 代码'
+                    }
+                ]
+            }),
+            AMisCodeEditor.getSchemaTpl('fieldSet', {
+                title: 'onUnmount',
+                body: [
+                    {
+                        name: 'onUnmount',
+                        type: 'editor',
+                        allowFullscreen: true,
+                        size: 'xxl',
+                        label: 'onUnmount 代码'
+                    }
+                ]
+            })
+        ];
+        return _this;
+    }
+    /**
+     * 备注: 根据当前custom组件的schema中是否有body元素来启动容器模式，用于实现custom组件实现自定义容器类型
+     */
+    CustomPlugin.prototype.getRendererInfo = function (context) {
+        var plugin = this;
+        var renderer = context.renderer, schema = context.schema;
+        if (schema.$$id &&
+            plugin.name &&
+            plugin.rendererName &&
+            plugin.rendererName === renderer.name) {
+            var regions = plugin.regions;
+            if (!regions && schema && schema.body && isArray__default["default"](schema.body)) {
+                regions = [
+                    {
+                        key: 'body',
+                        label: '自定义容器区'
+                    }
+                ];
+            }
+            return {
+                name: plugin.name,
+                regions: regions,
+                patchContainers: plugin.patchContainers,
+                // wrapper: plugin.wrapper,
+                vRendererConfig: plugin.vRendererConfig,
+                wrapperProps: plugin.wrapperProps,
+                wrapperResolve: plugin.wrapperResolve,
+                filterProps: plugin.filterProps,
+                $schema: plugin.$schema,
+                renderRenderer: plugin.renderRenderer,
+                multifactor: plugin.multifactor,
+                scaffoldForm: plugin.scaffoldForm,
+                disabledRendererPlugin: plugin.disabledRendererPlugin,
+                isBaseComponent: plugin.isBaseComponent,
+                rendererName: plugin.rendererName
+            };
+        }
+    };
+    return CustomPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(CustomPlugin);
+
+exports.CustomPlugin = CustomPlugin;

package/{dist → lib}/plugin/Date.d.ts

@@ -1,4 +1,4 @@
-import { BaseEventContext, BasePlugin } from '../plugin';
+import { BaseEventContext, BasePlugin } from 'amis-editor-core';
 export declare class DatePlugin extends BasePlugin {
     rendererName: string;
     $schema: string;

package/lib/plugin/Date.js

@@ -0,0 +1,82 @@
+/**
+ * amis-editor v5.2.0-beta.1
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+
+var DatePlugin = /** @class */ (function (_super) {
+    tslib.__extends(DatePlugin, _super);
+    function DatePlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'date';
+        _this.$schema = '/schemas/DateSchema.json';
+        // 组件名称
+        _this.name = '日期展示';
+        _this.isBaseComponent = true;
+        _this.description = '主要用来关联字段名做日期展示，支持各种格式如：X（时间戳），YYYY-MM-DD HH:mm:ss。';
+        _this.tags = ['展示'];
+        _this.icon = 'fa fa-calendar';
+        _this.scaffold = {
+            type: 'date',
+            value: Math.round(Date.now() / 1000)
+        };
+        _this.previewSchema = tslib.__assign(tslib.__assign({}, _this.scaffold), { format: 'YYYY-MM-DD', value: Math.round(Date.now() / 1000) });
+        _this.panelTitle = '日期展示';
+        _this.panelBodyCreator = function (context) {
+            return [
+                AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '常规',
+                        body: [
+                            {
+                                type: 'input-date',
+                                name: 'value',
+                                label: '日期数值'
+                            },
+                            {
+                                type: 'input-text',
+                                name: 'format',
+                                label: '显示日期格式',
+                                description: '请参考 moment 中的格式用法。',
+                                pipeIn: AMisCodeEditor.defaultValue('YYYY-MM-DD')
+                            },
+                            {
+                                type: 'input-text',
+                                name: 'valueFormat',
+                                label: '数据日期格式',
+                                description: '请参考 moment 中的格式用法。',
+                                pipeIn: AMisCodeEditor.defaultValue('X')
+                            },
+                            {
+                                name: 'placeholder',
+                                type: 'input-text',
+                                pipeIn: AMisCodeEditor.defaultValue('-'),
+                                label: '占位符'
+                            }
+                        ]
+                    },
+                    {
+                        title: '外观',
+                        body: [AMisCodeEditor.getSchemaTpl('className')]
+                    },
+                    {
+                        title: '显隐',
+                        body: [AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')]
+                    }
+                ])
+            ];
+        };
+        return _this;
+    }
+    return DatePlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(DatePlugin);
+
+exports.DatePlugin = DatePlugin;

package/{dist → lib}/plugin/Datetime.d.ts

@@ -1,4 +1,4 @@
-import { BaseEventContext } from '../plugin';
+import { BaseEventContext } from 'amis-editor-core';
 import { DatePlugin } from './Date';
 export declare class DatetimePlugin extends DatePlugin {
     rendererName: string;

package/lib/plugin/Datetime.js

@@ -0,0 +1,77 @@
+/**
+ * amis-editor v5.2.0-beta.1
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+var Date$1 = require('./Date.js');
+
+var DatetimePlugin = /** @class */ (function (_super) {
+    tslib.__extends(DatetimePlugin, _super);
+    function DatetimePlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'datetime';
+        _this.scaffold = {
+            type: 'datetime',
+            value: Math.round(Date.now() / 1000)
+        };
+        _this.name = '日期时间展示';
+        _this.isBaseComponent = true;
+        _this.previewSchema = tslib.__assign(tslib.__assign({}, _this.scaffold), { format: 'YYYY-MM-DD HH:mm:ss', value: Math.round(Date.now() / 1000) });
+        _this.panelBodyCreator = function (context) {
+            return [
+                AMisCodeEditor.getSchemaTpl('tabs', [
+                    {
+                        title: '常规',
+                        body: [
+                            {
+                                type: 'input-datetime',
+                                name: 'value',
+                                label: '日期时间数值'
+                            },
+                            {
+                                type: 'input-text',
+                                name: 'format',
+                                label: '显示日期时间格式',
+                                description: '请参考 moment 中的格式用法。',
+                                pipeIn: AMisCodeEditor.defaultValue('YYYY-MM-DD HH:mm:ss')
+                            },
+                            {
+                                type: 'input-text',
+                                name: 'valueFormat',
+                                label: '数据日期格式',
+                                description: '请参考 moment 中的格式用法。',
+                                pipeIn: AMisCodeEditor.defaultValue('X')
+                            },
+                            {
+                                name: 'placeholder',
+                                type: 'input-text',
+                                pipeIn: AMisCodeEditor.defaultValue('-'),
+                                label: '占位符'
+                            }
+                        ]
+                    },
+                    {
+                        title: '外观',
+                        body: [AMisCodeEditor.getSchemaTpl('className')]
+                    },
+                    {
+                        title: '显隐',
+                        body: [AMisCodeEditor.getSchemaTpl('ref'), AMisCodeEditor.getSchemaTpl('visible')]
+                    }
+                ])
+            ];
+        };
+        return _this;
+    }
+    return DatetimePlugin;
+}(Date$1.DatePlugin));
+AMisCodeEditor.registerEditorPlugin(DatetimePlugin);
+
+exports.DatetimePlugin = DatetimePlugin;

package/{dist → lib}/plugin/Dialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BasePlugin, RegionConfig } from '../plugin';
+import { BaseEventContext, BasePlugin, RegionConfig } from 'amis-editor-core';
 export declare class DialogPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -7,12 +7,22 @@ export declare class DialogPlugin extends BasePlugin {
     isBaseComponent: boolean;
     wrapperProps: {
         wrapperComponent: typeof InlineModal;
-        onClose: typeof import("amis/lib/utils/helper").noop;
+        onClose: typeof import("amis-core").noop;
         show: boolean;
     };
     regions: Array<RegionConfig>;
+    events: {
+        eventName: string;
+        eventLabel: string;
+        description: string;
+    }[];
+    actions: {
+        actionType: string;
+        actionLabel: string;
+        description: string;
+    }[];
     panelTitle: string;
-    panelBody: any[];
+    panelBodyCreator: (context: BaseEventContext) => any;
     buildSubRenderers(): void;
 }
 export declare class InlineModal extends React.Component<any, any> {