amis-editor 4.1.0-beta.28 → 5.2.0-beta.0

package/src/plugin/Carousel.tsx

@@ -1,386 +0,0 @@
-import {Button, SchemaObject} from 'amis';
-import React from 'react';
-import {registerEditorPlugin} from '../manager';
-import {
-  BaseEventContext,
-  BasePlugin,
-  BasicToolbarItem,
-  PluginEvent,
-  PreventClickEventContext,
-  RegionConfig,
-  RendererInfo
-} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {mockValue} from '../mocker';
-
-export class CarouselPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'carousel';
-  $schema = '/schemas/CarouselSchema.json';
-
-  // 组件名称
-  name = '轮播图';
-  isBaseComponent = true;
-  description =
-    '用来渲染轮播图，可以配置每一页的内容（不只是图片），可以配置过渡动画。';
-  docLink = '/amis/zh-CN/components/carousel';
-  tags = ['展示'];
-  icon = 'fa fa-images';
-  scaffold = {
-    type: 'carousel',
-    options: [
-      {
-        image: mockValue({type: 'image'})
-      },
-      {
-        html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
-      },
-      {
-        image: mockValue({type: 'image'})
-      }
-    ]
-  };
-  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,
-            {
-              type: 'formula',
-              name: '__mode',
-              autoSet: false,
-              formula:
-                '!this.name && !this.source && Array.isArray(this.options) ? 2 : 1'
-            },
-            {
-              label: '数据源',
-              name: '__mode',
-              type: 'button-group-select',
-              size: 'xs',
-              mode: 'inline',
-              className: 'w-full',
-              options: [
-                {
-                  label: '关联字段',
-                  value: 1
-                },
-                {
-                  label: '静态设置',
-                  value: 2
-                }
-              ]
-            },
-            {
-              label: '字段名',
-              name: 'name',
-              type: 'input-text',
-              description: '设置字段名，关联当前数据作用域中的数据。',
-              visibleOn: 'this.__mode == 1'
-            },
-            {
-              type: 'combo',
-              name: 'options',
-              visibleOn: 'this.__mode == 2',
-              label: '轮播选项内容',
-              multiple: true,
-              multiLine: true,
-              addable: true,
-              removable: true,
-              typeSwitchable: false,
-              conditions: [
-                {
-                  label: '图片',
-                  test: 'this.type === "image"',
-                  items: [
-                    getSchemaTpl('imageUrl', {
-                      name: 'content'
-                    }),
-                    {
-                      type: 'input-text',
-                      label: '图片标题',
-                      name: 'title',
-                      visibleOn: 'this.type == "image"'
-                    },
-                    getSchemaTpl('className', {
-                      label: '图片标题类名',
-                      name: 'titleClassName',
-                      visibleOn: 'this.type == "image"'
-                    }),
-                    {
-                      type: 'textarea',
-                      label: '图片描述',
-                      name: 'description',
-                      visibleOn: 'this.type == "image"'
-                    },
-                    getSchemaTpl('className', {
-                      label: '图片描述类名',
-                      name: 'descriptionClassName',
-                      visibleOn: 'this.type == "image"'
-                    }),
-                    {
-                      type: 'input-text',
-                      label: '打开外部链接',
-                      name: 'href',
-                      visibleOn: 'this.type == "image"'
-                    }
-                  ],
-                  scaffold: {
-                    type: 'input-image',
-                    image: ''
-                  }
-                },
-
-                {
-                  label: 'HTML',
-                  test: 'this.type === "html"',
-                  items: [
-                    getSchemaTpl('richText', {
-                      label: '内容',
-                      name: 'content'
-                    })
-                  ],
-                  scaffold: {
-                    type: 'html',
-                    content: '<p>html 片段</p>'
-                  }
-                }
-              ],
-              pipeIn: (value: any) => {
-                return Array.isArray(value) && value.length
-                  ? value.map(
-                      (item: {
-                        html?: string;
-                        image?: string;
-                        title?: string;
-                        titleClassName?: string;
-                        description?: string;
-                        descriptionClassName?: string;
-                      }) =>
-                        item && item.hasOwnProperty('html')
-                          ? {
-                              type: 'html',
-                              content: item.html
-                            }
-                          : {
-                              type: 'image',
-                              content: item.image,
-                              title: item.title,
-                              titleClassName: item.titleClassName,
-                              description: item.description,
-                              descriptionClassName: item.descriptionClassName
-                            }
-                    )
-                  : [];
-              },
-              pipeOut: (value: any, originValue: any, data: any) => {
-                return Array.isArray(value) && value.length
-                  ? value.map(
-                      (item: {
-                        type: string;
-                        content: string;
-                        title?: string;
-                        titleClassName?: string;
-                        description?: string;
-                        descriptionClassName?: string;
-                      }) => {
-                        return item.type === 'html'
-                          ? {
-                              html: item.content
-                            }
-                          : {
-                              image: item.content,
-                              title: item.title,
-                              titleClassName: item.titleClassName,
-                              description: item.description,
-                              descriptionClassName: item.descriptionClassName
-                            };
-                      }
-                    )
-                  : [];
-              }
-            }
-          ]
-        },
-        {
-          title: '外观',
-          body: [
-            {
-              name: 'auto',
-              type: 'switch',
-              mode: 'inline',
-              className: 'w-full',
-              label: '自动轮播',
-              pipeIn: defaultValue(true)
-            },
-            {
-              name: 'interval',
-              type: 'input-range',
-              label: '动画间隔',
-              min: 1,
-              max: 100,
-              step: 1,
-              unit: 's',
-              pipeIn: (value: any) => (value ?? 3000) / 1000,
-              pipeOut: (value: any, originValue: any, data: any) => value * 1000
-            },
-            {
-              name: 'duration',
-              type: 'input-range',
-              label: '动画时长',
-              min: 100,
-              max: 2000,
-              step: 10,
-              pipeIn: defaultValue(500),
-              unit: 'ms'
-            },
-            {
-              name: 'animation',
-              label: '动画效果',
-              type: 'button-group-select',
-              mode: 'inline',
-              className: 'w-full',
-              size: 'sm',
-              pipeIn: defaultValue('fade'),
-              options: [
-                {
-                  label: 'fade',
-                  value: 'fade'
-                },
-                {
-                  label: 'slide',
-                  value: 'slide'
-                }
-              ]
-            },
-            {
-              name: 'controlsTheme',
-              label: '控制按钮主题',
-              type: 'button-group-select',
-              size: 'sm',
-              pipeIn: defaultValue('light'),
-              mode: 'inline',
-              className: 'w-full',
-              options: [
-                {
-                  label: 'light',
-                  value: 'light'
-                },
-                {
-                  label: 'dark',
-                  value: 'dark'
-                }
-              ]
-            },
-            {
-              name: 'controls',
-              label: '控制显示',
-              type: 'button-group-select',
-              size: 'sm',
-              mode: 'inline',
-              className: 'w-full',
-              pipeIn: defaultValue('dots,arrows'),
-              multiple: true,
-              options: [
-                {
-                  label: '底部圆点',
-                  value: 'dots'
-                },
-                {
-                  label: '左右箭头',
-                  value: 'arrows'
-                }
-              ]
-            },
-            {
-              name: 'width',
-              type: 'input-text',
-              label: '宽度',
-              validations: 'isNumeric',
-              addOn: {
-                type: 'button',
-                label: 'px'
-              }
-            },
-            {
-              name: 'height',
-              type: 'input-text',
-              label: '高度',
-              validations: 'isNumeric',
-              addOn: {
-                type: 'button',
-                label: 'px'
-              }
-            },
-            getSchemaTpl('className')
-          ]
-        },
-        {
-          title: '显隐',
-          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
-        }
-      ])
-    ];
-  };
-
-  filterProps(props: any) {
-    // 编辑的时候别自动轮播，影响编辑
-    props.auto = false;
-    return props;
-  }
-
-  /**
-   * 补充切换的 toolbar
-   * @param context
-   * @param toolbars
-   */
-  buildEditorToolbar(
-    context: BaseEventContext,
-    toolbars: Array<BasicToolbarItem>
-  ) {
-    if (
-      context.info.plugin === this &&
-      context.info.renderer.name === 'carousel' &&
-      !context.info.hostId
-    ) {
-      const node = context.node;
-
-      toolbars.push({
-        level: 'secondary',
-        icon: 'fa fa-chevron-left',
-        tooltip: '上个卡片',
-        onClick: () => {
-          const control = node.getComponent();
-          control?.prev?.();
-        }
-      });
-
-      toolbars.push({
-        level: 'secondary',
-        icon: 'fa fa-chevron-right',
-        tooltip: '下个卡片',
-        onClick: () => {
-          const control = node.getComponent();
-
-          control?.next?.();
-        }
-      });
-    }
-  }
-}
-
-registerEditorPlugin(CarouselPlugin);

package/src/plugin/Chart.tsx

@@ -1,218 +0,0 @@
-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 {diff} from '../util';
-import AMisCodeEditor from '../component/Panel/AMisCodeEditor';
-
-const ChartConfigEditor = ({value, onChange}: any) => {
-  return (
-    <div className="ae-JsonEditor">
-      <AMisCodeEditor value={value} onChange={onChange} />
-    </div>
-  );
-};
-
-export class ChartPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'chart';
-  $schema = '/schemas/ChartSchema.json';
-
-  // 组件名称
-  name = '图表';
-  isBaseComponent = true;
-  description =
-    '用来渲染图表，基于 echarts 图表库，理论上 echarts 所有图表类型都支持。';
-  docLink = '/amis/zh-CN/components/chart';
-  tags = ['展示'];
-  icon = 'fa fa-pie-chart';
-  scaffold = {
-    type: 'chart',
-    config: {
-      xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-      },
-      yAxis: {
-        type: 'value'
-      },
-      series: [
-        {
-          data: [820, 932, 901, 934, 1290, 1330, 1320],
-          type: 'line'
-        }
-      ]
-    },
-    replaceChartOption: true
-  };
-  previewSchema = {
-    ...this.scaffold
-  };
-
-  panelTitle = '图表';
-  panelBodyCreator = (context: BaseEventContext) => {
-    return [
-      getSchemaTpl('tabs', [
-        {
-          title: '常规',
-          body: [
-            getSchemaTpl('api', {
-              label: '接口拉取',
-              description:
-                '接口可以返回配置，或者数据，建议返回数据可映射到 Echarts 配置中'
-            }),
-            {
-              label: '初始是否拉取',
-              type: 'switch',
-              name: 'initFetch',
-              visibleOn: 'data.api',
-              pipeIn: defaultValue(true),
-              mode: 'inline',
-              className: 'block'
-            },
-            {
-              name: 'interval',
-              label: '定时刷新间隔',
-              type: 'input-number',
-              step: 500,
-              visibleOn: 'data.api',
-              description: '设置后将自动定时刷新，最小3000, 单位 ms'
-            },
-            {
-              name: 'config',
-              asFormItem: true,
-              component: ChartConfigEditor,
-              // type: 'json-editor',
-              label: 'Echarts 配置',
-              description: '支持数据映射，可将接口返回的数据填充进来'
-              // size: 'lg'
-              // pipeOut: (value: any) => {
-              //   try {
-              //     return value ? JSON.parse(value) : null;
-              //   } catch (e) {}
-              //   return null;
-              // }
-            },
-            {
-              name: 'clickAction',
-              asFormItem: true,
-              children: ({onChange, value}: any) => (
-                <div className="m-b">
-                  <Button
-                    size="sm"
-                    level={value ? 'danger' : 'info'}
-                    onClick={this.editDrillDown.bind(this, context.id)}
-                  >
-                    配置 DrillDown
-                  </Button>
-
-                  {value ? (
-                    <Button
-                      size="sm"
-                      level="link"
-                      className="m-l"
-                      onClick={() => onChange('')}
-                    >
-                      删除 DrillDown
-                    </Button>
-                  ) : null}
-                </div>
-              )
-            },
-            {
-              name: 'dataFilter',
-              type: 'js-editor',
-              allowFullscreen: true,
-              label: '数据加工',
-              size: 'lg',
-              description: `
-              如果后端没有直接返回 Echart 配置，可以自己写一段函数来包装。
-              <p>签名：(config, echarts, data) => config</p>
-              <p>参数说明</p>
-              <ul>
-              <li><code>config</code> 原始数据</li>
-              <li><code>echarts</code> echarts 对象</li>
-              <li><code>data</code> 如果配置了数据接口，接口返回的数据通过此变量传入</li>
-              </ul>
-              <p>示例</p>
-              <pre>debugger; // 可以浏览器中断点调试\n\n// 查看原始数据\nconsole.log(config)\n\n// 返回新的结果 \nreturn {}</pre>
-              `
-            },
-            {
-              label: 'Chart 配置完全替换？',
-              labelRemark: {
-                trigger: 'click',
-                className: 'm-l-xs',
-                rootClose: true,
-                content:
-                  '默认为追加模式，新的配置会跟旧的配置合并，如果勾选将直接完全覆盖。',
-                placement: 'left'
-              },
-              name: 'replaceChartOption',
-              type: 'switch',
-              mode: 'inline',
-              className: 'block'
-            }
-          ]
-        },
-        {
-          title: '外观',
-          body: [getSchemaTpl('className')]
-        },
-        {
-          title: '显隐',
-          body: [getSchemaTpl('visible')]
-        },
-        {
-          title: '其他',
-          body: [getSchemaTpl('name')]
-        }
-      ])
-    ];
-  };
-
-  editDrillDown(id: string) {
-    const manager = this.manager;
-    const store = manager.store;
-    const node = store.getNodeById(id);
-    const value = store.getValueOf(id);
-
-    const dialog = (value.clickAction && value.clickAction.dialog) || {
-      title: '标题',
-      body: ['<p>内容 <code>${value|json}</code></p>']
-    };
-
-    node &&
-      value &&
-      this.manager.openSubEditor({
-        title: '配置 DrillDown 详情',
-        value: {
-          type: 'container',
-          ...dialog
-        },
-        slot: {
-          type: 'container',
-          body: '$$'
-        },
-        typeMutable: false,
-        onChange: newValue => {
-          newValue = {
-            ...value,
-            clickAction: {
-              actionType: 'dialog',
-              dialog: newValue
-            }
-          };
-          manager.panelChangeValue(newValue, diff(value, newValue));
-        }
-      });
-  }
-}
-
-registerEditorPlugin(ChartPlugin);

package/src/plugin/CodeView.tsx

@@ -1,60 +0,0 @@
-/**
- * @file 代码高亮显示
- */
-import {registerEditorPlugin} from '../manager';
-import {BaseEventContext, BasePlugin} from '../plugin';
-import {getSchemaTpl} from '../component/schemaTpl';
-
-export class CodeViewPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'code';
-  $schema = '/schemas/CodeSchema.json';
-
-  // 组件名称
-  name = '代码高亮';
-  isBaseComponent = true;
-  icon = 'fa fa-code';
-  description = '代码高亮';
-  docLink = '/amis/zh-CN/components/code';
-  tags = ['展示'];
-  scaffold = {
-    type: 'code',
-    language: 'html',
-    value: '<div>html</div>'
-  };
-  previewSchema: any = {
-    ...this.scaffold
-  };
-
-  panelTitle = '代码高亮';
-  panelBody = [
-    getSchemaTpl('tabs', [
-      {
-        title: '常规',
-        body: [
-          {
-            type: 'input-text',
-            label: '名称',
-            name: 'name'
-          },
-          {
-            type: 'editor',
-            label: '固定值',
-            allowFullscreen: true,
-            name: 'value'
-          }
-        ]
-      },
-      {
-        title: '外观',
-        body: [getSchemaTpl('className')]
-      },
-      {
-        title: '显隐',
-        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
-      }
-    ])
-  ];
-}
-
-registerEditorPlugin(CodeViewPlugin);