amis-editor 4.1.0-beta.1 → 4.1.0-beta.20

package/src/plugin/Tabs.tsx

@@ -0,0 +1,364 @@
+import {Button, SchemaObject} from 'amis';
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicToolbarItem,
+  PluginEvent,
+  PreventClickEventContext,
+  RegionConfig,
+  RendererInfo,
+  VRendererConfig
+} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {mapReactElement} from '../component/factory';
+import {VRenderer} from '../component/VRenderer';
+import findIndex from 'lodash/findIndex';
+import {RegionWrapper as Region} from '../component/RegionWrapper';
+import {Tab} from 'amis';
+
+export class TabsPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'tabs';
+  $schema = '/schemas/TabsSchema.json';
+
+  // 组件名称
+  name = '选项卡';
+  isBaseComponent = true;
+  description = '选项卡，可以将内容分组用选项卡的形式展示，降低用户使用成本。';
+  docLink = '/amis/zh-CN/components/tabs';
+  tags = ['容器'];
+  icon = 'fa fa-folder-o';
+  scaffold = {
+    type: 'tabs',
+    tabs: [
+      {
+        title: '选项卡1',
+        body: '内容1'
+      },
+
+      {
+        title: '选项卡2',
+        body: '内容2'
+      }
+    ]
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '选项卡';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            name: 'tabs',
+            type: 'combo',
+            label: '选项卡管理',
+            multiple: true,
+            draggable: true,
+            minLength: 1,
+            items: [{type: 'input-text', name: 'title', required: true}],
+            scaffold: {
+              title: '选项卡',
+              body: {
+                type: 'tpl',
+                tpl: '内容',
+                inline: false
+              }
+            },
+            addButtonText: '新增选项卡',
+            draggableTip: ''
+          }
+        ]
+      },
+      {
+        title: '外观',
+        body: [
+          {
+            name: 'tabsMode',
+            label: '样式',
+            type: 'select',
+            className: 'block',
+            pipeIn: defaultValue(''),
+            options: [
+              {
+                label: '默认',
+                value: ''
+              },
+              {
+                label: '线型',
+                value: 'line'
+              },
+              {
+                label: '卡片',
+                value: 'card'
+              },
+              {
+                label: '仿 Chrome',
+                value: 'chrome'
+              },
+              {
+                label: '水平铺满',
+                value: 'tiled'
+              },
+              {
+                label: '选择器',
+                value: 'radio'
+              },
+              {
+                label: '垂直',
+                value: 'vertical'
+              }
+            ]
+          },
+          getSchemaTpl('className'),
+          getSchemaTpl('className', {
+            name: 'contentClassName',
+            label: '选项卡成员 CSS 类名'
+          }),
+
+          getSchemaTpl('subFormItemMode'),
+          getSchemaTpl('subFormHorizontalMode'),
+          getSchemaTpl('subFormHorizontal')
+        ]
+      },
+      {
+        title: '显隐',
+        body: [
+          {
+            type: 'switch',
+            name: 'mountOnEnter',
+            label: '激活时才渲染',
+            mode: 'inline',
+            className: 'block',
+            description:
+              '设置后选项卡的内容只有点开才会渲染，如果有选项卡放的可拉取接口的组件，那么这个接口只有在点开的时候才会拉取。'
+          },
+
+          {
+            type: 'switch',
+            name: 'unmountOnExit',
+            label: '隐藏即销毁',
+            mode: 'inline',
+            className: 'block',
+            description:
+              '设置后，如果选项卡内容关闭则销毁，配置「激活时才渲染」选项可以做到卡片内容每次点开都重新加载的效果。'
+          },
+          getSchemaTpl('visible')
+        ]
+      }
+    ])
+  ];
+
+  patchContainers = ['tabs.body'];
+
+  vRendererConfig: VRendererConfig = {
+    regions: {
+      body: {
+        key: 'body',
+        label: '内容区'
+      }
+    },
+    panelTitle: '卡片',
+    panelBody: [
+      getSchemaTpl('tabs', [
+        {
+          title: '常规',
+          body: [
+            {
+              name: 'title',
+              label: '标题',
+              type: 'input-text',
+              required: true
+            },
+            getSchemaTpl('icon'),
+            {
+              label: 'Hash',
+              name: 'hash',
+              type: 'input-text',
+              description: '设置后，会同步更新地址栏的 Hash。'
+            }
+          ]
+        },
+        {
+          title: '外观',
+          body: [getSchemaTpl('className')]
+        },
+        {
+          title: '显隐',
+          body: [getSchemaTpl('visible'), getSchemaTpl('disabled')]
+        },
+        {
+          title: '其他',
+          body: [
+            {
+              type: 'switch',
+              name: 'reload',
+              label: '内容刷新',
+              mode: 'inline',
+              className: 'block',
+              description:
+                '配置后，每次点开内容都会重新刷新，如果配置了，下面两个选项就不用配置了。'
+            },
+            {
+              type: 'switch',
+              name: 'mountOnEnter',
+              visibleOn: '!this.reload',
+              label: '激活时才渲染',
+              mode: 'inline',
+              className: 'block',
+              description:
+                '设置后选项卡的内容只有点开才会渲染，如果有选项卡放的可拉取接口的组件，那么这个接口只有在点开的时候才会拉取。'
+            },
+            {
+              visibleOn: '!this.reload',
+              type: 'switch',
+              name: 'unmountOnExit',
+              label: '隐藏即销毁',
+              mode: 'inline',
+              className: 'block',
+              description:
+                '设置后，如果选项卡内容关闭则销毁，配置「激活时才渲染」选项可以做到卡片内容每次点开都重新加载的效果。'
+            }
+          ]
+        }
+      ])
+    ]
+  };
+
+  wrapperProps = {
+    unmountOnExit: true,
+    mountOnEnter: true
+  };
+
+  tabWrapperResolve = (dom: HTMLElement) => dom.parentElement!;
+  overrides = {
+    renderTabs(this: any) {
+      const dom = this.super();
+
+      if (!this.renderTab && this.props.$$editor && dom) {
+        const tabs = this.props.tabs;
+        return mapReactElement(dom, item => {
+          if (item.type === Tab && item.props.$$id) {
+            const id = item.props.$$id;
+            const index = findIndex(tabs, (tab: any) => tab.$$id === id);
+            const info: RendererInfo = this.props.$$editor;
+            const plugin: TabsPlugin = info.plugin as any;
+
+            if (~index) {
+              const region = plugin.vRendererConfig?.regions?.body;
+
+              if (!region) {
+                return item;
+              }
+
+              return React.cloneElement(item, {
+                children: (
+                  <VRenderer
+                    key={id}
+                    plugin={info.plugin}
+                    renderer={info.renderer}
+                    $schema="/schemas/TabSchema.json"
+                    hostId={info.id}
+                    memberIndex={index}
+                    name={`${item.props.title || `卡片${index + 1}`}`}
+                    id={id}
+                    draggable={false}
+                    wrapperResolve={plugin.tabWrapperResolve}
+                    schemaPath={`${info.schemaPath}/tabs/${index}`}
+                    path={`${this.props.$path}/${index}`} // 好像没啥用
+                    data={this.props.data} // 好像没啥用
+                  >
+                    <Region
+                      key={region.key}
+                      preferTag={region.preferTag}
+                      name={region.key}
+                      label={region.label}
+                      regionConfig={region}
+                      placeholder={region.placeholder}
+                      editorStore={plugin.manager.store}
+                      manager={plugin.manager}
+                      children={item.props.children}
+                      wrapperResolve={region.wrapperResolve}
+                      rendererName={info.renderer.name}
+                    />
+                  </VRenderer>
+                )
+              });
+            }
+          }
+
+          return item;
+        });
+      }
+
+      return dom;
+    }
+  };
+
+  /**
+   * 补充切换的 toolbar
+   * @param context
+   * @param toolbars
+   */
+  buildEditorToolbar(
+    context: BaseEventContext,
+    toolbars: Array<BasicToolbarItem>
+  ) {
+    if (
+      context.info.plugin === this &&
+      context.info.renderer.name === 'tabs' &&
+      !context.info.hostId
+    ) {
+      const node = context.node;
+
+      toolbars.push({
+        level: 'secondary',
+        icon: 'fa fa-chevron-left',
+        tooltip: '上个卡片',
+        onClick: () => {
+          const control = node.getComponent();
+
+          if (control?.switchTo) {
+            const currentIndex = control.currentIndex();
+            control.switchTo(currentIndex - 1);
+          }
+        }
+      });
+
+      toolbars.push({
+        level: 'secondary',
+        icon: 'fa fa-chevron-right',
+        tooltip: '下个卡片',
+        onClick: () => {
+          const control = node.getComponent();
+
+          if (control?.switchTo) {
+            const currentIndex = control.currentIndex();
+            control.switchTo(currentIndex + 1);
+          }
+        }
+      });
+    }
+  }
+
+  onPreventClick(e: PluginEvent<PreventClickEventContext>) {
+    const mouseEvent = e.context.data;
+
+    if (mouseEvent.defaultPrevented) {
+      return false;
+    } else if (
+      (mouseEvent.target as HTMLElement).closest('[role=tablist]>li')
+    ) {
+      return false;
+    }
+
+    return;
+  }
+}
+
+registerEditorPlugin(TabsPlugin);

package/src/plugin/Tasks.tsx

@@ -0,0 +1,276 @@
+import {Button, SchemaObject} from 'amis';
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {BasePlugin, RegionConfig, RendererInfo} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+
+export class TasksPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'tasks';
+  $schema = '/schemas/TasksSchema.json';
+
+  // 组件名称
+  name = '异步任务';
+  isBaseComponent = true;
+  description = '用来做异步任务呈现或者操作。';
+  docLink = '/amis/zh-CN/components/tasks';
+  tags = ['功能'];
+  icon = '';
+  scaffold = {
+    type: 'tasks',
+    name: 'tasks',
+    items: [
+      {
+        label: 'hive 任务',
+        key: 'hive',
+        status: 4,
+        remark:
+          '查看详情<a target="_blank" href="http://www.baidu.com">日志</a>。'
+      },
+      {
+        label: '小流量',
+        key: 'partial',
+        status: 4
+      },
+      {
+        label: '全量',
+        key: 'full',
+        status: 4
+      }
+    ]
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '异步任务';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            name: 'items',
+            label: '初始任务信息',
+            type: 'combo',
+            multiple: true,
+            multiLine: true,
+            items: [
+              {
+                name: 'label',
+                type: 'input-text',
+                label: '任务名称'
+              },
+              {
+                name: 'key',
+                type: 'input-text',
+                label: '任务ID'
+              },
+              {
+                name: 'status',
+                type: 'input-number',
+                label: '任务状态'
+              },
+              {
+                name: 'remark',
+                type: 'textarea',
+                label: '任务说明'
+              }
+            ],
+            addButtonText: '新增任务信息',
+            scaffold: {
+              label: '名称',
+              key: 'key',
+              status: 0,
+              remark: '说明'
+            },
+            description: '可以不设置，如果检测接口返回这些信息的话。'
+          },
+
+          getSchemaTpl('api', {
+            name: 'checkApi',
+            label: '状态检测接口'
+          }),
+
+          {
+            name: 'interval',
+            type: 'input-number',
+            min: 3000,
+            step: 500,
+            visibleOn: 'data.checkApi',
+            pipeIn: defaultValue(3000),
+            label: '定时检测间隔'
+          },
+
+          getSchemaTpl('api', {
+            name: 'submitApi',
+            label: '提交接口'
+          }),
+
+          getSchemaTpl('api', {
+            name: 'reSubmitApi',
+            label: '重试接口'
+          }),
+
+          {
+            name: 'taskNameLabel',
+            type: 'input-text',
+            pipeIn: defaultValue('任务名称'),
+            label: '任务名称栏标题'
+          },
+
+          {
+            name: 'operationLabel',
+            type: 'input-text',
+            pipeIn: defaultValue('操作'),
+            label: '操作栏标题'
+          },
+
+          {
+            name: 'statusLabel',
+            type: 'input-text',
+            pipeIn: defaultValue('状态'),
+            label: '状态栏标题'
+          },
+
+          {
+            name: 'remarkLabel',
+            type: 'input-text',
+            pipeIn: defaultValue('备注说明'),
+            label: '备注栏标题'
+          },
+
+          {
+            name: 'btnText',
+            label: '按钮名称',
+            type: 'input-text',
+            pipeIn: defaultValue('上线')
+          },
+
+          {
+            name: 'retryBtnText',
+            label: '重试按钮名称',
+            type: 'input-text',
+            pipeIn: defaultValue('重试')
+          },
+
+          {
+            name: 'statusTextMap',
+            pipeIn: defaultValue([
+              '未开始',
+              '就绪',
+              '进行中',
+              '出错',
+              '已完成',
+              '出错'
+            ]),
+            type: 'input-array',
+            label: '状态标签文字配置',
+            multiple: true,
+            addable: false,
+            removable: false,
+            items: {
+              type: 'input-text',
+              placeholder: '名称'
+            }
+          },
+
+          {
+            name: 'initialStatusCode',
+            label: '初始状态码',
+            pipeIn: defaultValue(0),
+            type: 'input-number'
+          },
+
+          {
+            name: 'readyStatusCode',
+            label: '就绪状态码',
+            pipeIn: defaultValue(1),
+            type: 'input-number'
+          },
+
+          {
+            name: 'loadingStatusCode',
+            label: '进行中状态码',
+            pipeIn: defaultValue(2),
+            type: 'input-number'
+          },
+
+          {
+            name: 'errorStatusCode',
+            label: '错误状态码',
+            pipeIn: defaultValue(3),
+            type: 'input-number'
+          },
+
+          {
+            name: 'finishStatusCode',
+            label: '完成状态码',
+            pipeIn: defaultValue(4),
+            type: 'input-number'
+          },
+
+          {
+            name: 'canRetryStatusCode',
+            label: '出错但可重试状态码',
+            pipeIn: defaultValue(5),
+            type: 'input-number'
+          }
+        ]
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('className', {
+            pipeIn: defaultValue('b-a bg-white table-responsive')
+          }),
+
+          getSchemaTpl('className', {
+            name: 'tableClassName',
+            label: '表格 CSS 类名',
+            pipeIn: defaultValue('table table-striped m-b-none')
+          }),
+
+          getSchemaTpl('className', {
+            name: 'btnClassName',
+            label: '按钮 CSS 类名',
+            pipeIn: defaultValue('btn-sm btn-default')
+          }),
+
+          getSchemaTpl('className', {
+            name: 'retryBtnClassName',
+            label: '重试按钮 CSS 类名',
+            pipeIn: defaultValue('btn-sm btn-danger')
+          }),
+
+          {
+            name: 'statusLabelMap',
+            pipeIn: defaultValue([
+              'label-warning',
+              'label-info',
+              'label-info',
+              'label-danger',
+              'label-success',
+              'label-danger'
+            ]),
+            type: 'input-array',
+            label: '状态标签 CSS 类名配置',
+            multiple: true,
+            addable: false,
+            removable: false,
+            items: {
+              type: 'input-text',
+              placeholder: 'CSS 类名'
+            }
+          }
+        ]
+      },
+      {
+        title: '显隐',
+        body: [getSchemaTpl('visible')]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(TasksPlugin);

package/src/plugin/Time.tsx

@@ -0,0 +1,75 @@
+import {Button, SchemaObject} from 'amis';
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  RegionConfig,
+  RendererInfo
+} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {DatePlugin} from './Date';
+
+export class TimePlugin extends DatePlugin {
+  // 关联渲染器名字
+  rendererName = 'time';
+  name = '时间展示';
+  isBaseComponent = true;
+
+  scaffold = {
+    type: 'time',
+    value: Math.round(Date.now() / 1000)
+  };
+
+  previewSchema = {
+    ...this.scaffold,
+    format: 'HH:mm:ss',
+    value: Math.round(Date.now() / 1000)
+  };
+  panelBodyCreator = (context: BaseEventContext) => {
+    return [
+      getSchemaTpl('tabs', [
+        {
+          title: '常规',
+          body: [
+            {
+              type: 'input-time',
+              name: 'value',
+              label: '时间数值'
+            },
+            {
+              type: 'input-text',
+              name: 'format',
+              label: '显示时间格式',
+              description: '请参考 moment 中的格式用法。',
+              pipeIn: defaultValue('HH:mm:ss')
+            },
+            {
+              type: 'input-text',
+              name: 'valueFormat',
+              label: '数据日期格式',
+              description: '请参考 moment 中的格式用法。',
+              pipeIn: defaultValue('X')
+            },
+            {
+              name: 'placeholder',
+              type: 'input-text',
+              pipeIn: defaultValue('-'),
+              label: '占位符'
+            }
+          ]
+        },
+        {
+          title: '外观',
+          body: [getSchemaTpl('className')]
+        },
+        {
+          title: '显隐',
+          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+        }
+      ])
+    ];
+  };
+}
+
+registerEditorPlugin(TimePlugin);