amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Tasks.tsx

@@ -0,0 +1,274 @@
+import {registerEditorPlugin} from '../manager';
+import {BasePlugin} 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,68 @@
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext} 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);

package/src/plugin/TooltipWrapper.tsx

@@ -0,0 +1,289 @@
+/**
+ * @file 文字提示容器
+ */
+
+import {registerEditorPlugin} from '../manager';
+import {BasePlugin, RegionConfig, BaseEventContext} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {tipedLabel} from '../component/control/BaseControl';
+
+export class TooltipWrapperPlugin extends BasePlugin {
+  rendererName = 'tooltip-wrapper';
+  $schema = '/schemas/TooltipWrapperSchema.json';
+
+  isBaseComponent = true;
+  name = '文字提示容器';
+  description =
+    '类似容器，可以将多个渲染器放置在一起，当用户鼠标悬停或者点击容器时，显示文字提示浮层';
+  docLink = '/amis/zh-CN/components/tooltip';
+  tags = ['容器'];
+  icon = 'fa fa-comment-alt';
+
+  scaffold = {
+    type: 'tooltip-wrapper',
+    tooltip: '提示文字',
+    body: [
+      {
+        type: 'tpl',
+        tpl: '内容'
+      }
+    ],
+    enterable: true,
+    showArrow: true,
+    offset: [0, 0]
+  };
+
+  previewSchema = {
+    ...this.scaffold,
+    className: 'p-1 mr-3 border-2 border-solid border-indigo-400'
+  };
+
+  regions: Array<RegionConfig> = [
+    {
+      key: 'body',
+      label: '内容区'
+    }
+  ];
+
+  panelTitle = this.name;
+
+  panelJustify = true;
+
+  panelBodyCreator = (context: BaseEventContext) => {
+    return [
+      getSchemaTpl('tabs', [
+        {
+          title: '属性',
+          className: 'p-none',
+          body: [
+            getSchemaTpl('collapseGroup', [
+              {
+                title: '常用',
+                body: [
+                  {
+                    type: 'input-text',
+                    name: 'title',
+                    label: '提示标题'
+                  },
+                  {
+                    type: 'textarea',
+                    name: 'tooltip',
+                    label: '提示内容'
+                  },
+
+                  {
+                    name: 'trigger',
+                    type: 'select',
+                    label: tipedLabel('触发方式', '默认方式为”鼠标悬停“'),
+                    multiple: true,
+                    value: ['hover'],
+                    pipeIn: (value: any) =>
+                      Array.isArray(value) ? value.join(',') : [],
+                    pipeOut: (value: any) =>
+                      value && value.length ? value.split(',') : undefined,
+                    options: [
+                      {
+                        label: '鼠标悬停',
+                        value: 'hover'
+                      },
+
+                      {
+                        label: '点击',
+                        value: 'click'
+                      }
+                    ]
+                  },
+                  {
+                    type: 'button-group-select',
+                    name: 'placement',
+                    label: '提示位置',
+                    size: 'sm',
+                    className: 'ae-buttonGroupSelect--justify',
+                    options: [
+                      {
+                        label: '上',
+                        value: 'top'
+                        // icon: 'fa fa-arrow-up'
+                      },
+                      {
+                        label: '下',
+                        value: 'bottom'
+                        // icon: 'fa fa-arrow-down'
+                      },
+                      {
+                        label: '左',
+                        value: 'left'
+                        // icon: 'fa fa-arrow-left'
+                      },
+                      {
+                        label: '右',
+                        value: 'right'
+                        // icon: 'fa fa-arrow-right'
+                      }
+                    ],
+                    pipeIn: defaultValue('top')
+                  },
+                  {
+                    type: 'button-group-select',
+                    name: 'tooltipTheme',
+                    label: '主题色',
+                    size: 'sm',
+                    className: 'ae-buttonGroupSelect--justify',
+                    options: [
+                      {
+                        label: '亮色',
+                        value: 'light',
+                        icon: 'far fa-sun'
+                      },
+                      {
+                        label: '暗色',
+                        value: 'dark',
+                        icon: 'far fa-moon'
+                      }
+                    ],
+                    pipeIn: defaultValue('light')
+                  },
+                  {
+                    name: 'inline',
+                    label: '容器内联',
+                    type: 'switch',
+                    mode: 'row',
+                    inputClassName:
+                      'inline-flex justify-between flex-row-reverse'
+                  },
+                  {
+                    name: 'rootClose',
+                    visibleOn: '~this.trigger.indexOf("click")',
+                    label: '点击容器外部关闭提示',
+                    type: 'switch',
+                    mode: 'row',
+                    inputClassName:
+                      'inline-flex justify-between flex-row-reverse'
+                  }
+                ]
+              },
+              {
+                title: '高级',
+                body: [
+                  {
+                    name: 'wrapperComponent',
+                    label: '容器标签',
+                    type: 'input-text',
+                    options: [
+                      'article',
+                      'aside',
+                      'code',
+                      'div',
+                      'footer',
+                      'header',
+                      'p',
+                      'section'
+                    ],
+                    validations: {
+                      isAlphanumeric: true,
+                      matchRegexp: '/^(?!.*script).*$/' // 禁用一下script标签
+                    },
+                    validationErrors: {
+                      isAlpha: 'HTML标签不合法，请重新输入',
+                      matchRegexp: 'HTML标签不合法，请重新输入'
+                    },
+                    validateOnChange: false
+                  },
+                  {
+                    type: 'input-group',
+                    label: tipedLabel(
+                      '浮层偏移量',
+                      '提示浮层位置相对”水平“、”垂直“的偏移量'
+                    ),
+                    body: [
+                      {
+                        type: 'input-number',
+                        name: 'offset',
+                        suffix: 'px',
+                        pipeIn: (value: any) =>
+                          Array.isArray(value) ? value[0] || 0 : 0,
+                        pipeOut: (value: any, oldValue: any, data: any) => [
+                          value,
+                          data.offset[1]
+                        ]
+                      },
+                      {
+                        type: 'input-number',
+                        name: 'offset',
+                        suffix: 'px',
+                        pipeIn: (value: any) =>
+                          Array.isArray(value) ? value[1] || 0 : 0,
+                        pipeOut: (value: any, oldValue: any, data: any) => [
+                          data.offset[0],
+                          value
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    type: 'switch',
+                    label: tipedLabel(
+                      '可进入浮层',
+                      '关闭后鼠标进入提示浮层后也关闭浮层'
+                    ),
+                    name: 'enterable',
+                    inputClassName: 'is-inline'
+                  },
+                  {
+                    type: 'switch',
+                    label: tipedLabel(
+                      '展示浮层箭头',
+                      '关闭后提示浮层不展示指向箭头'
+                    ),
+                    name: 'showArrow',
+                    inputClassName: 'is-inline'
+                  },
+
+                  {
+                    label: '延迟打开',
+                    type: 'input-number',
+                    min: 0,
+                    step: 100,
+                    name: 'mouseEnterDelay',
+                    suffix: 'ms',
+                    pipeIn: defaultValue(0)
+                  },
+                  {
+                    label: '延迟关闭',
+                    type: 'input-number',
+                    min: 0,
+                    step: 100,
+                    name: 'mouseLeaveDelay',
+                    suffix: 'ms',
+                    pipeIn: defaultValue(0)
+                  }
+                ]
+              }
+            ])
+          ]
+        },
+        {
+          title: '外观',
+          className: 'p-none',
+          body: getSchemaTpl('collapseGroup', [
+            ...getSchemaTpl('style:common'),
+            {
+              title: 'CSS 类名',
+              body: [
+                getSchemaTpl('className', {
+                  label: '内容区CSS类名'
+                }),
+                getSchemaTpl('className', {
+                  label: '浮层CSS类名',
+                  name: 'tooltipClassName'
+                })
+              ]
+            }
+          ])
+        }
+      ])
+    ];
+  };
+}
+
+registerEditorPlugin(TooltipWrapperPlugin);