amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Panel.tsx

@@ -0,0 +1,242 @@
+import {Button} from 'amis';
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {
+  BasePlugin,
+  BaseEventContext,
+  BasicPanelItem,
+  RegionConfig,
+  RendererInfo,
+  BuildPanelEventContext
+} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+
+export class PanelPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'panel';
+  $schema = '/schemas/panelSchema.json';
+
+  name = '面板';
+  isBaseComponent = true;
+  icon = 'fa fa-window-maximize';
+  description = '展示一个面板，可以配置标题，内容区。';
+  docLink = '/amis/zh-CN/components/panel';
+  tags = '容器';
+  scaffold = {
+    type: 'panel',
+    title: '标题',
+    body: '内容'
+  };
+  previewSchema = {
+    type: 'panel',
+    title: '这是一个面板',
+    body: '这是内容区',
+    className: 'Panel--default text-left m-b-none',
+    actions: [
+      {
+        label: '按钮1',
+        type: 'button'
+      },
+      {
+        label: '按钮2',
+        type: 'button'
+      }
+    ]
+  };
+
+  regions: Array<RegionConfig> = [
+    {
+      key: 'body',
+      label: '内容区',
+
+      // 复写渲染器里面的 renderBody 方法
+      renderMethod: 'renderBody',
+
+      // 这个 case 很另类，要自己写。form 里面直接复用了 Panel 来输出内容。
+      // 这种 case 应该跳过包裹 Region
+      // 只有他自己输出时才包裹，form 调用进来是下发了 children 来完成渲染
+      // 自己的话是其他方式。
+      renderMethodOverride: (regions, insertRegion) =>
+        function (this: any, ...args: any[]) {
+          const info: RendererInfo = this.props.$$editor;
+          const dom = this.super(...args);
+
+          if (info && !this.props.children) {
+            return insertRegion(this, dom, regions, info, info.plugin.manager);
+          }
+
+          return dom;
+        }
+    },
+
+    {
+      key: 'actions',
+      label: '按钮组',
+      renderMethod: 'renderActions',
+      preferTag: '按钮'
+    }
+  ];
+
+  panelTitle = '面板';
+  panelBodyCreator = (context: BaseEventContext) => {
+    const isForm = /(?:^|\/)form$/.test(context.path);
+
+    return [
+      getSchemaTpl('tabs', [
+        {
+          title: '常规',
+          body: [
+            {
+              label: '标题',
+              name: 'title',
+              type: 'input-text'
+            },
+
+            isForm
+              ? null
+              : {
+                  children: (
+                    <Button
+                      size="sm"
+                      level="info"
+                      className="m-b"
+                      onClick={() => {
+                        // this.manager.showInsertPanel('body')
+                        this.manager.showRendererPanel('');
+                      }}
+                      block
+                    >
+                      内容区新增内容
+                    </Button>
+                  )
+                }
+          ]
+        },
+        {
+          title: '外观',
+          body: [
+            getSchemaTpl('switch', {
+              name: 'affixFooter',
+              label: '固定底部',
+              value: false
+            }),
+
+            getSchemaTpl('horizontal', {
+              visibleOn:
+                '(data.mode || data.$$formMode) == "horizontal" && data.$$mode == "form"'
+            }),
+
+            {
+              name: isForm ? 'panelClassName' : 'className',
+              label: '样式',
+              type: 'button-group-select',
+              size: 'sm',
+              pipeIn: (value: any) =>
+                typeof value === 'string' &&
+                /(?:^|\s)(Panel\-\-(\w+))(?:$|\s)/.test(value)
+                  ? RegExp.$1
+                  : '',
+              pipeOut: (value: string, origin: string) =>
+                origin
+                  ? `${origin.replace(
+                      /(?:^|\s)(Panel\-\-(\w+))(?=($|\s))/g,
+                      ''
+                    )} ${value}`
+                      .replace(/\s+/g, ' ')
+                      .trim()
+                  : value,
+              options: [
+                {
+                  label: '默认',
+                  value: 'Panel--default'
+                },
+                {
+                  label: '主色',
+                  value: 'Panel--primary'
+                },
+                {
+                  label: '提示',
+                  value: 'Panel--info'
+                },
+                {
+                  label: '成功',
+                  value: 'Panel--success'
+                },
+                {
+                  label: '警告',
+                  value: 'Panel--warning'
+                },
+                {
+                  label: '危险',
+                  value: 'Panel--danger'
+                }
+              ]
+            },
+
+            getSchemaTpl('className', {
+              name: isForm ? 'panelClassName' : 'className',
+              pipeIn: defaultValue('Panel--default')
+            }),
+
+            getSchemaTpl('className', {
+              name: 'headerClassName',
+              label: '头部区域 CSS 类名'
+            }),
+
+            getSchemaTpl('className', {
+              name: 'bodyClassName',
+              label: '内容区域 CSS 类名'
+            }),
+
+            getSchemaTpl('className', {
+              name: 'footerClassName',
+              label: '底部区域 CSS 类名'
+            }),
+
+            getSchemaTpl('className', {
+              name: 'actionsClassName',
+              label: '按钮外层 CSS 类名'
+            }),
+
+            getSchemaTpl('subFormItemMode'),
+            getSchemaTpl('subFormHorizontalMode'),
+            getSchemaTpl('subFormHorizontal')
+          ]
+        },
+        {
+          title: '显隐',
+          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+        }
+      ])
+    ];
+  };
+
+  buildEditorPanel(
+    context: BuildPanelEventContext,
+    panels: Array<BasicPanelItem>
+  ) {
+    const path = context.path;
+    const schema = context.schema;
+    const store = this.manager.store;
+
+    if (
+      context.info.renderer.name === 'form' &&
+      schema.wrapWithPanel !== false &&
+      !context.selections.length
+    ) {
+      panels.push({
+        key: 'panel',
+        icon: 'fa fa-list-alt',
+        title: this.panelTitle,
+        render: this.manager.makeSchemaFormRender({
+          body: this.panelBodyCreator(context),
+          panelById: store.activeId
+        })
+      });
+    } else {
+      super.buildEditorPanel(context, panels);
+    }
+  }
+}
+
+registerEditorPlugin(PanelPlugin);

package/src/plugin/Plain.tsx

@@ -0,0 +1,81 @@
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext, BasePlugin} 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: [
+              getSchemaTpl('switch', {
+                name: 'inline',
+                label: '内联模式',
+                value: true
+              }),
+
+              getSchemaTpl('className')
+            ]
+          },
+
+      isTableCell
+        ? null
+        : {
+            title: '显隐',
+            body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+          }
+    ]);
+  };
+}
+
+registerEditorPlugin(PlainPlugin);

package/src/plugin/Progress.tsx

@@ -0,0 +1,265 @@
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext, BasePlugin} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {tipedLabel} from '../component/control/BaseControl';
+
+export class ProgressPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'progress';
+  $schema = '/schemas/ProgressSchema.json';
+
+  // 组件名称
+  name = '进度展示';
+  searchKeywords = '进度条、progress';
+  isBaseComponent = true;
+  description = '用来展示进度。可配置各个进度段用不同的颜色展示。';
+  docLink = '/amis/zh-CN/components/progress';
+  tags = ['展示'];
+  icon = 'fa fa-angle-double-right';
+  scaffold = {
+    type: 'progress',
+    value: 66,
+    strokeWidth: 6
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '进度';
+
+  panelJustify = true;
+
+  panelBodyCreator = (context: BaseEventContext) => {
+    const isFormItem = !!context?.info.renderer.isFormItem;
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              {
+                label: '类型',
+                name: 'mode',
+                type: 'select',
+                option: '继承',
+                value: 'line',
+                tiled: true,
+                options: [
+                  {
+                    label: '线形',
+                    value: 'line'
+                  },
+
+                  {
+                    label: '圆形',
+                    value: 'circle'
+                  },
+
+                  {
+                    label: '仪表盘',
+                    value: 'dashboard'
+                  }
+                ],
+                onChange: (
+                  value: any,
+                  oldValue: boolean,
+                  model: any,
+                  form: any
+                ) => {
+                  if (value === 'circle') {
+                    form.setValueByName('gapDegree', 0);
+                    form.setValueByName('gapPosition', '');
+                  } else if (value === 'dashboard') {
+                    form.setValueByName('gapDegree', 75);
+                    form.setValueByName('gapPosition', 'bottom');
+                  }
+                }
+              },
+              {
+                type: 'input-number',
+                name: 'value',
+                label: '默认值',
+                min: 0,
+                max: 100
+              },
+              getSchemaTpl('menuTpl', {
+                name: 'valueTpl'
+              }),
+
+              getSchemaTpl('switch', {
+                name: 'showLabel',
+                label: '进度值',
+                pipeIn: defaultValue(true)
+              }),
+
+              getSchemaTpl('placeholder', {
+                value: '-',
+                placeholder: '无数据空位提示',
+                label: tipedLabel('占位提示', '数据字段未定义时的值，不包括0')
+              })
+            ]
+          },
+          getSchemaTpl('status', {isFormItem})
+        ])
+      },
+      {
+        title: '外观',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              {
+                type: 'select',
+                name: 'progressClassName',
+                label: '尺寸',
+                value: '',
+                options: [
+                  {
+                    label: '极小',
+                    value: 'w-xs'
+                  },
+
+                  {
+                    label: '小',
+                    value: 'w-sm'
+                  },
+
+                  {
+                    label: '中',
+                    value: 'w-md'
+                  },
+
+                  {
+                    label: '大',
+                    value: 'w-lg'
+                  },
+
+                  {
+                    label: '默认',
+                    value: ''
+                  }
+                ]
+              },
+              {
+                type: 'input-number',
+                name: 'strokeWidth',
+                label: '线条宽度',
+                value: 6,
+                min: 0,
+                max: 100
+              },
+              {
+                type: 'input-number',
+                name: 'gapDegree',
+                visibleOn: 'data.mode === "dashboard"',
+                label: '缺口角度',
+                value: 75,
+                min: 0,
+                max: 295
+              },
+              {
+                label: '缺口位置',
+                name: 'gapPosition',
+                type: 'button-group-select',
+                visibleOn: 'data.mode === "dashboard"',
+                value: defaultValue('bottom'),
+                tiled: true,
+                options: [
+                  {
+                    label: '上',
+                    value: 'top'
+                  },
+
+                  {
+                    label: '下',
+                    value: 'bottom'
+                  },
+
+                  {
+                    label: '左',
+                    value: 'left'
+                  },
+                  {
+                    label: '右',
+                    value: 'right'
+                  }
+                ]
+              },
+              getSchemaTpl('switch', {
+                name: 'animate',
+                label: '显示动画',
+                visibleOn: 'data.mode === "line"'
+              }),
+              {
+                type: 'button-group-select',
+                name: 'style',
+                label: '样式',
+                visibleOn: 'data.mode === "line"',
+                options: [
+                  {
+                    label: '纯色',
+                    value: 'purity'
+                  },
+                  {
+                    label: '条纹',
+                    value: 'stripe'
+                  }
+                ],
+                pipeIn: (value: any, form: any) => {
+                  return form.data?.stripe ? 'stripe' : 'purity';
+                },
+                onChange(value: any, oldValue: boolean, model: any, form: any) {
+                  form.setValueByName('stripe', value === 'stripe');
+                }
+              },
+              {
+                name: 'map',
+                type: 'combo',
+                mode: 'normal',
+                multiple: true,
+                label: tipedLabel(
+                  '颜色',
+                  '分配不同的值段，用不同的颜色提示用户'
+                ),
+                items: [
+                  {
+                    type: 'input-number',
+                    name: 'value',
+                    placeholder: 'value',
+                    required: true,
+                    columnClassName: 'w-xs',
+                    unique: true,
+                    min: 0,
+                    step: 10,
+                    precision: 0
+                  },
+                  {
+                    placeholder: 'color',
+                    type: 'input-color',
+                    name: 'color',
+                    required: true
+                  }
+                ],
+                value: [
+                  {color: '#dc3545', value: 20},
+                  {color: '#fad733', value: 60},
+                  {color: '#28a745', value: 100}
+                ],
+                pipeIn: (value: any) => {
+                  return Array.isArray(value) ? value : [];
+                }
+              }
+            ]
+          },
+          getSchemaTpl('style:classNames', {
+            schema: [],
+            isFormItem
+          })
+        ])
+      }
+    ]);
+  };
+}
+
+registerEditorPlugin(ProgressPlugin);