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

package/src/plugin/Plain.tsx

@@ -0,0 +1,91 @@
+import {SchemaObject} from 'amis';
+import {registerEditorPlugin} from '../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicPanelItem,
+  RegionConfig,
+  RendererInfo
+} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+
+export class PlainPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'plain';
+  $schema = '/schemas/PlainSchema.json';
+  disabledRendererPlugin = true; // 组件面板不显示
+
+  // 组件名称
+  name = '纯文本';
+  isBaseComponent = true;
+  icon = 'fa fa-file-text-o';
+  description = '用来展示纯文字，html 标签会被转义。';
+  docLink = '/amis/zh-CN/components/plain';
+  tags = ['展示'];
+  previewSchema = {
+    type: 'plain',
+    text: '这是纯文本',
+    className: 'text-center',
+    inline: false
+  };
+  scaffold: any = {
+    type: 'plain',
+    tpl: '内容',
+    inline: false
+  };
+
+  panelTitle = '纯文本';
+  panelBodyCreator = (context: BaseEventContext) => {
+    const isTableCell = context.info.renderer.name === 'table-cell';
+
+    return getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            label: '内容',
+            type: 'textarea',
+            pipeIn: (value: any, data: any) => value || (data && data.text),
+            name: 'tpl',
+            description:
+              '如果当前字段有值，请不要设置，否则覆盖。支持使用 <code>\\${xxx}</code> 来获取变量，或者用 lodash.template 语法来写模板逻辑。<a target="_blank" href="/amis/zh-CN/docs/concepts/template">详情</a>'
+          },
+
+          {
+            name: 'placeholder',
+            label: '占位符',
+            type: 'input-text',
+            pipeIn: defaultValue('-')
+          }
+        ]
+      },
+
+      isTableCell
+        ? null
+        : {
+            title: '外观',
+            body: [
+              {
+                label: '内联模式',
+                type: 'switch',
+                name: 'inline',
+                mode: 'inline',
+                className: 'w-full',
+                value: true
+              },
+
+              getSchemaTpl('className')
+            ]
+          },
+
+      isTableCell
+        ? null
+        : {
+            title: '显隐',
+            body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+          }
+    ]);
+  };
+}
+
+registerEditorPlugin(PlainPlugin);

package/src/plugin/Progress.tsx

@@ -0,0 +1,132 @@
+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';
+
+export class ProgressPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'progress';
+  $schema = '/schemas/ProgressSchema.json';
+
+  // 组件名称
+  name = '进度展示';
+  isBaseComponent = true;
+  description = '用来展示进度。可配置各个进度段用不同的颜色展示。';
+  docLink = '/amis/zh-CN/components/progress';
+  tags = ['展示'];
+  icon = 'fa fa-angle-double-right';
+  scaffold = {
+    type: 'progress',
+    value: 66.66
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '进度';
+  panelBodyCreator = (context: BaseEventContext) => {
+    const isUnderField = /\/field\/\w+$/.test(context.path as string);
+    return [
+      getSchemaTpl('tabs', [
+        {
+          title: '常规',
+          body: [
+            isUnderField
+              ? {
+                  type: 'tpl',
+                  inline: false,
+                  className: 'text-info text-sm',
+                  tpl: '<p>当前为字段内容节点配置，选择上层还有更多的配置。</p>'
+                }
+              : null,
+
+            {
+              name: 'showLabel',
+              type: 'switch',
+              mode: 'inline',
+              pipeIn: defaultValue(true),
+              label: '是否显示文字'
+            },
+
+            {
+              name: 'stripe',
+              type: 'switch',
+              mode: 'inline',
+              label: '是否显示条纹'
+            },
+
+            {
+              name: 'animate',
+              type: 'switch',
+              mode: 'inline',
+              label: '是否显示动画'
+            },
+
+            {
+              name: 'map',
+              label: '等级配置',
+              type: 'input-array',
+              items: {
+                type: 'input-text'
+              },
+              descrition: '配置不通的值段，用不通的样式提示用户',
+              pipeIn: defaultValue([
+                'bg-danger',
+                'bg-warning',
+                'bg-info',
+                'bg-success',
+                'bg-success'
+              ])
+            },
+
+            getSchemaTpl('switchDefaultValue'),
+
+            {
+              type: 'input-text',
+              name: 'value',
+              label: '默认值',
+              validations: 'isNumeric',
+              visibleOn: 'typeof this.value !== "undefined"'
+            },
+
+            {
+              name: 'placeholder',
+              type: 'input-text',
+              pipeIn: defaultValue('-'),
+              label: '占位符'
+            }
+          ]
+        },
+        {
+          title: '外观',
+          body: [
+            getSchemaTpl('className'),
+            getSchemaTpl('className', {
+              name: 'progressClassName',
+              label: '进度外层 CSS 类名',
+              pipeIn: defaultValue(
+                'progress-xs progress-striped active m-t-xs m-b-none'
+              )
+            }),
+            getSchemaTpl('className', {
+              name: 'progressBarClassName',
+              label: '进度条 CSS 类名'
+            })
+          ]
+        },
+        {
+          title: '显隐',
+          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+        }
+      ])
+    ];
+  };
+}
+
+registerEditorPlugin(ProgressPlugin);

package/src/plugin/Property.tsx

@@ -0,0 +1,139 @@
+/**
+ * @file 属性表
+ */
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext, BasePlugin} from '../plugin';
+import {getSchemaTpl} from '../component/schemaTpl';
+
+export class PropertyPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'property';
+  $schema = '/schemas/PropertySchema.json';
+
+  // 组件名称
+  name = '属性表';
+  isBaseComponent = true;
+  icon = 'fa fa-list';
+  description = '属性表';
+  docLink = '/amis/zh-CN/components/property';
+  tags = ['其他'];
+  scaffold = {
+    type: 'property',
+    title: '机器配置',
+    items: [
+      {
+        label: 'cpu',
+        content: '1 core'
+      },
+      {
+        label: 'memory',
+        content: '4G'
+      },
+      {
+        label: 'disk',
+        content: '80G'
+      },
+      {
+        label: 'network',
+        content: '4M',
+        span: 2
+      },
+      {
+        label: 'IDC',
+        content: 'beijing'
+      },
+      {
+        label: 'Note',
+        content: '其它说明',
+        span: 3
+      }
+    ]
+  };
+  previewSchema: any = {
+    ...this.scaffold
+  };
+
+  panelTitle = '属性表';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            label: '标题',
+            type: 'input-text',
+            name: 'title'
+          },
+          {
+            label: '每行显示几列',
+            type: 'input-number',
+            value: 3,
+            name: 'column'
+          },
+          {
+            type: 'radios',
+            name: 'mode',
+            inline: true,
+            value: 'table',
+            label: '显示模式',
+            options: ['table', 'simple']
+          },
+          {
+            label: '分隔符',
+            type: 'input-text',
+            name: 'separator',
+            visibleOn: 'data.mode === "simple"'
+          },
+          {
+            label: '属性取自变量',
+            type: 'input-text',
+            name: 'source'
+          },
+          {
+            label: '属性列表',
+            name: 'items',
+            type: 'combo',
+            multiple: true,
+            multiLine: true,
+            draggable: true,
+            addButtonText: '新增',
+            items: [
+              {
+                type: 'input-text',
+                mode: 'inline',
+                size: 'sm',
+                label: '属性名',
+                name: 'label'
+              },
+              {
+                type: 'input-text',
+                mode: 'inline',
+                size: 'sm',
+                label: '属性值',
+                name: 'content'
+              },
+              {
+                type: 'input-number',
+                mode: 'inline',
+                size: 'sm',
+                label: '跨几列',
+                value: 1,
+                name: 'span'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        title: '外观',
+        body: [getSchemaTpl('className')]
+      },
+      {
+        title: '显隐',
+        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(PropertyPlugin);

package/src/plugin/QRCode.tsx

@@ -0,0 +1,98 @@
+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 QRCodePlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'qrcode';
+  $schema = '/schemas/QRCodeSchema.json';
+
+  // 组件名称
+  name = '二维码';
+  isBaseComponent = true;
+  description = '可以用来生成二维码';
+  docLink = '/amis/zh-CN/components/qrcode';
+  tags = ['功能'];
+  icon = 'fa fa-qrcode';
+  scaffold = {
+    type: 'qrcode',
+    value: 'https://amis.baidu.com'
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '二维码';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            name: 'value',
+            type: 'input-text',
+            label: '二维码值',
+            pipeIn: defaultValue('https://www.baidu.com'),
+            description: '支持使用 <code>\\${xxx}</code> 来获取变量'
+          },
+          {
+            name: 'level',
+            type: 'select',
+            label: '复杂度',
+            pipeIn: defaultValue('L'),
+            options: [
+              {
+                label: 'L',
+                value: 'L'
+              },
+              {
+                label: 'M',
+                value: 'M'
+              },
+              {
+                label: 'Q',
+                value: 'Q'
+              },
+              {
+                label: 'H',
+                value: 'H'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        title: '外观',
+        body: [
+          {
+            name: 'codeSize',
+            type: 'input-number',
+            label: '宽高值',
+            pipeIn: defaultValue(128)
+          },
+          {
+            name: 'backgroundColor',
+            type: 'input-color',
+            label: '背景色',
+            pipeIn: defaultValue('#fff')
+          },
+          {
+            name: 'foregroundColor',
+            type: 'input-color',
+            label: '前景色',
+            pipeIn: defaultValue('#000')
+          },
+          getSchemaTpl('className')
+        ]
+      },
+      {
+        title: '显隐',
+        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(QRCodePlugin);

package/src/plugin/Reset.tsx

@@ -0,0 +1,23 @@
+import {registerEditorPlugin} from '../manager';
+import {ButtonPlugin} from './Button';
+
+export class ResetPlugin extends ButtonPlugin {
+  // 关联渲染器名字
+  rendererName = 'reset';
+  disabledRendererPlugin = true; // 组件面板不显示
+  // 组件名称
+  name = '重置';
+  isBaseComponent = true;
+  icon = 'fa fa-eraser';
+  description = '一般用来重置表单数据到初始值。';
+  panelTitle = '按钮';
+  scaffold: any = {
+    type: 'reset',
+    label: '重置'
+  };
+  previewSchema: any = {
+    ...this.scaffold
+  };
+}
+
+registerEditorPlugin(ResetPlugin);

package/src/plugin/Service.tsx

@@ -0,0 +1,167 @@
+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';
+
+export class ServicePlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'service';
+  $schema = '/schemas/ServiceSchema.json';
+
+  // 组件名称
+  name = '服务 Service';
+  isBaseComponent = true;
+  description =
+    '功能性容器，可以用来加载数据或者加载渲染器配置。加载到的数据在容器可以使用。';
+  docLink = '/amis/zh-CN/components/service';
+  tags = ['功能'];
+  icon = 'fa fa-server';
+  scaffold = {
+    type: 'service',
+    body: [
+      {
+        type: 'tpl',
+        tpl: '内容',
+        inline: false
+      }
+    ]
+  };
+  previewSchema = {
+    type: 'tpl',
+    tpl: '功能性组件，用于数据拉取。'
+  };
+
+  regions: Array<RegionConfig> = [
+    {
+      key: 'body',
+      label: '内容区'
+    }
+  ];
+
+  panelTitle = '服务';
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            children: (
+              <Button
+                level="info"
+                size="sm"
+                className="m-b-sm"
+                block
+                onClick={() => {
+                  // this.manager.showInsertPanel('body', context.id);
+                  this.manager.showRendererPanel('');
+                }}
+              >
+                添加内容
+              </Button>
+            )
+          },
+          {
+            type: 'divider'
+          },
+          getSchemaTpl('api', {
+            label: '数据接口'
+          }),
+          getSchemaTpl('data'),
+          {
+            name: 'ws',
+            type: 'input-text',
+            label: 'WebSocket 实时更新接口'
+          },
+          getSchemaTpl('initFetch'),
+          {
+            name: 'interval',
+            label: '定时刷新间隔',
+            visibleOn: 'this.api',
+            type: 'input-number',
+            step: 500,
+            description: '设置后将自动定时刷新，单位 ms'
+          },
+          {
+            name: 'silentPolling',
+            label: '静默加载',
+            mode: 'inline',
+            className: 'block',
+            type: 'switch',
+            visibleOn: '!!data.interval',
+            description: '设置自动定时刷新是否显示加载动画'
+          },
+          {
+            name: 'stopAutoRefreshWhen',
+            label: '停止定时刷新检测',
+            type: 'input-text',
+            visibleOn: '!!data.interval',
+            description:
+              '定时刷新一旦设置会一直刷新，除非给出表达式，条件满足后则不刷新了。'
+          },
+          {
+            type: 'divider'
+          },
+          getSchemaTpl('api', {
+            name: 'schemaApi',
+            label: '内容 Schema 接口'
+          }),
+          {
+            type: 'divider'
+          },
+          getSchemaTpl('initFetch', {
+            name: 'initFetchSchema',
+            visibleOn: 'data.schemaApi',
+            label: '初始是否拉取内容 Schema 接口'
+          }),
+          {
+            type: 'js-editor',
+            allowFullscreen: true,
+            name: 'dataProvider',
+            label: '自定义函数获取数据',
+            description: '将会传递 data 和 setData 两个参数'
+          },
+          {
+            label: '默认消息信息',
+            type: 'combo',
+            name: 'messages',
+            multiLine: true,
+            description:
+              '设置 service 默认提示信息，当 service 没有返回 msg 信息时有用，如果 service 返回携带了 msg 值，则还是以 service 返回为主',
+            items: [
+              {
+                label: '获取成功',
+                type: 'input-text',
+                name: 'fetchSuccess'
+              },
+              {
+                label: '获取失败',
+                type: 'input-text',
+                name: 'fetchFailed'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        title: '外观',
+        body: [getSchemaTpl('className')]
+      },
+      {
+        title: '其他',
+        body: [
+          getSchemaTpl('ref'),
+          getSchemaTpl('name'),
+          getSchemaTpl('visible')
+        ]
+      }
+    ]);
+  };
+}
+
+registerEditorPlugin(ServicePlugin);

package/src/plugin/Sparkline.tsx

@@ -0,0 +1,40 @@
+/**
+ * @file 走势图
+ */
+
+import {registerEditorPlugin} from '../manager';
+import {BasePlugin} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+
+export class SparklinePlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'sparkline';
+  $schema = '/schemas/SparklineSchema.json';
+
+  // 组件名称
+  name = '走势图';
+  isBaseComponent = true;
+  description = '用于内嵌展示简单图表';
+  docLink = '/amis/zh-CN/components/sparkline';
+  tags = ['展示'];
+  icon = 'fa fa-area-chart';
+  scaffold = {
+    type: 'sparkline',
+    height: 30,
+    value: [3, 5, 2, 4, 1, 8, 3, 7]
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '走势图';
+  panelBody = [
+    {
+      name: 'height',
+      type: 'input-number',
+      label: '高度'
+    }
+  ];
+}
+
+registerEditorPlugin(SparklinePlugin);