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

package/src/plugin/Button.tsx

@@ -0,0 +1,283 @@
+import {Button, SchemaObject} from 'amis';
+import flatten from 'lodash/flatten';
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicRendererInfo,
+  PluginInterface,
+  RendererInfoResolveEventContext
+} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+
+export class ButtonPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'button';
+  $schema = '/schemas/ActionSchema.json';
+
+  // 组件名称
+  name = '按钮';
+  isBaseComponent = true;
+  description =
+    '用来展示一个按钮，你可以配置不同的展示样式，配置不同的点击行为。';
+  docLink = '/amis/zh-CN/components/button';
+  tags = ['按钮'];
+  icon = 'fa fa-square';
+  scaffold: SchemaObject = {
+    type: 'button',
+    label: '按钮',
+    actionType: 'dialog',
+    dialog: {
+      title: '系统提示',
+      body: '对你点击了'
+    }
+  };
+  previewSchema: any = {
+    type: 'button',
+    label: '按钮'
+  };
+
+  panelTitle = '按钮';
+  panelBodyCreator = (context: BaseEventContext) => {
+    const isInDialog = /(?:\/|^)dialog\/.+$/.test(context.path);
+    const isInDropdown = /(?:\/|^)dropdown-button\/.+$/.test(context.path);
+
+    return [
+      getSchemaTpl('tabs', [
+        {
+          title: '常规',
+          body: [
+            {
+              label: '名称',
+              type: 'input-text',
+              name: 'label'
+            },
+
+            {
+              label: '类型',
+              type: 'button-group-select',
+              name: 'type',
+              size: 'sm',
+              // mode: 'inline',
+              // className: 'w-full',
+              options: [
+                {
+                  label: '按钮',
+                  value: 'button'
+                },
+
+                {
+                  label: '提交',
+                  value: 'submit'
+                },
+
+                {
+                  label: '重置',
+                  value: 'reset'
+                }
+              ]
+            },
+
+            {
+              type: 'input-text',
+              name: 'tooltip',
+              hidden: isInDropdown,
+              label: '提示文案',
+              description: '鼠标停留时弹出该内容'
+            },
+
+            {
+              type: 'button-group-select',
+              name: 'tooltipPlacement',
+              visibleOn: 'data.tooltip || data.disabledTip',
+              label: '提示信息位置',
+              size: 'sm',
+              mode: 'inline',
+              className: 'w-full',
+              value: 'bottom',
+              options: [
+                {
+                  label: '上',
+                  value: 'top'
+                },
+                {
+                  label: '右',
+                  value: 'right'
+                },
+                {
+                  label: '下',
+                  value: 'bottom'
+                },
+                {
+                  label: '左',
+                  value: 'left'
+                }
+              ]
+            },
+
+            getSchemaTpl('icon'),
+            {
+              type: 'button-group-select',
+              label: '图标位置',
+              clearable: true,
+              visibleOn: 'this.icon',
+              name: 'iconClassName',
+              size: 'sm',
+              pipeIn: (value: any) =>
+                typeof value === 'string' &&
+                /\bpull\-(left|right)\b/.test(value)
+                  ? RegExp.$1
+                  : '',
+              pipeOut: (value: any, originValue: string) => {
+                return ((originValue as string) || '')
+                  .replace(/\bpull\-(left|right)\b/, '')
+                  .trim() + value
+                  ? `pull-${value}`
+                  : '';
+              },
+              options: [
+                {label: '居左', value: 'left'},
+                {label: '居右', value: 'right'}
+              ]
+            },
+
+            getSchemaTpl('size', {
+              label: '尺寸'
+            }),
+            {
+              label: '样式',
+              type: 'select',
+              name: 'level',
+              hidden: isInDropdown,
+              clearable: false,
+              btnActiveLevel: '',
+              options: [
+                {
+                  label: '默认',
+                  value: 'default',
+                  level: 'default'
+                },
+                {
+                  label: '链接',
+                  value: 'link',
+                  level: 'link'
+                },
+                {
+                  label: '主色',
+                  value: 'primary',
+                  level: 'primary'
+                },
+
+                {
+                  label: '淡色',
+                  value: 'light',
+                  level: 'light'
+                },
+                {
+                  label: '深色',
+                  value: 'dark',
+                  level: 'dark'
+                },
+
+                {
+                  label: '提示',
+                  value: 'info',
+                  level: 'info'
+                },
+                {
+                  label: '成功',
+                  value: 'success',
+                  level: 'success'
+                },
+                {
+                  label: '警告',
+                  value: 'warning',
+                  level: 'warning'
+                },
+                {
+                  label: '严重',
+                  value: 'danger',
+                  level: 'danger'
+                }
+              ]
+            },
+
+            {
+              name: 'block',
+              type: 'switch',
+              label: '块状显示',
+              mode: 'inline'
+            },
+
+            getSchemaTpl('className', {
+              label: '按钮 CSS 类名'
+            }),
+            getSchemaTpl('className', {
+              name: 'iconClassName',
+              label: '图标 CSS 类名',
+              visibleOn: 'this.icon'
+            })
+          ]
+        },
+        {
+          title: '显隐',
+          body: [
+            getSchemaTpl('disabled', [
+              {
+                type: 'input-text',
+                name: 'disabledTip',
+                label: '禁用提示信息',
+                hidden: isInDropdown,
+                description: '按钮被禁用时，鼠标停留弹出该段文字'
+              }
+            ]),
+            getSchemaTpl('visible')
+          ]
+        }
+      ])
+    ];
+  };
+
+  /**
+   * 如果禁用了没办法编辑
+   */
+  filterProps(props: any) {
+    props.disabled = false;
+    return props;
+  }
+
+  /**
+   * 如果配置里面有 rendererName 自动返回渲染器信息。
+   * @param renderer
+   */
+  getRendererInfo({
+    renderer,
+    schema
+  }: RendererInfoResolveEventContext): BasicRendererInfo | void {
+    const plugin: PluginInterface = this;
+
+    if (
+      schema.$$id &&
+      plugin.name &&
+      plugin.rendererName &&
+      plugin.rendererName === renderer.name
+    ) {
+      // 复制部分信息出去
+      return {
+        name: schema.label ? schema.label : plugin.name,
+        regions: plugin.regions,
+        patchContainers: plugin.patchContainers,
+        // wrapper: plugin.wrapper,
+        vRendererConfig: plugin.vRendererConfig,
+        wrapperProps: plugin.wrapperProps,
+        wrapperResolve: plugin.wrapperResolve,
+        filterProps: plugin.filterProps,
+        $schema: plugin.$schema,
+        renderRenderer: plugin.renderRenderer
+      };
+    }
+  }
+}
+
+registerEditorPlugin(ButtonPlugin);

package/src/plugin/ButtonGroup.tsx

@@ -0,0 +1,88 @@
+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';
+import {RegionWrapper as Region} from '../component/RegionWrapper';
+
+export class ButtonGroupPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'button-group';
+  $schema = '/schemas/ButtonGroupSchema.json';
+
+  // 组件名称
+  name = '按钮组';
+  isBaseComponent = true;
+  description = '用来展示多个按钮，视觉上会作为一个整体呈现。';
+  tags = ['按钮'];
+  icon = 'fa fa-object-group';
+  docLink = '/amis/zh-CN/components/button-group';
+  scaffold = {
+    type: 'button-group',
+    buttons: [
+      {
+        type: 'button',
+        label: '按钮1',
+        actionType: 'dialog',
+        dialog: {
+          title: '系统提示',
+          body: '对你点击了'
+        }
+      },
+
+      {
+        type: 'button',
+        label: '按钮2',
+        actionType: 'dialog',
+        dialog: {
+          title: '系统提示',
+          body: '对你点击了'
+        }
+      }
+    ]
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '按钮组';
+  panelBody = [
+    {
+      name: 'buttons',
+      type: 'combo',
+      label: '按钮管理',
+      multiple: true,
+      addable: true,
+      minLength: 1,
+      draggable: true,
+      draggableTip: '',
+      editable: false,
+      visibleOn: 'this.buttons && this.buttons.length',
+      items: [
+        {
+          type: 'tpl',
+          inline: false,
+          className: 'p-t-xs',
+          tpl: '<span class="label label-default"><% if (data.type === "button-group") { %> 按钮组 <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>'
+        }
+      ],
+      addButtonText: '新增按钮',
+      scaffold: {
+        type: 'button',
+        label: '按钮'
+      }
+    }
+  ];
+
+  regions: Array<RegionConfig> = [
+    {
+      key: 'buttons',
+      label: '子按钮',
+      renderMethod: 'render',
+      preferTag: '按钮',
+      insertPosition: 'inner'
+    }
+  ];
+}
+
+registerEditorPlugin(ButtonGroupPlugin);

package/src/plugin/ButtonToolbar.tsx

@@ -0,0 +1,89 @@
+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 ButtonToolbarPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'button-toolbar';
+  $schema = '/schemas/ButtonToolbarSchema.json';
+
+  // 组件名称
+  name = '按钮工具栏';
+  isBaseComponent = true;
+  description = '可以用来放置多个按钮或者按钮组，按钮之间会存在一定的间隔';
+  tags = ['按钮'];
+  icon = 'fa fa-ellipsis-h';
+  scaffold = {
+    type: 'button-toolbar',
+    buttons: [
+      {
+        type: 'button',
+        label: '按钮1',
+        actionType: 'dialog',
+        dialog: {
+          title: '系统提示',
+          body: '对你点击了'
+        }
+      },
+      {
+        type: 'button',
+        label: '按钮2',
+        actionType: 'dialog',
+        dialog: {
+          title: '系统提示',
+          body: '对你点击了'
+        }
+      }
+    ]
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '按钮工具栏';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            name: 'buttons',
+            type: 'combo',
+            label: '按钮管理',
+            multiple: true,
+            addable: true,
+            draggable: true,
+            draggableTip: '可排序、可移除、如要编辑请在预览区选中编辑',
+            editable: false,
+            visibleOn: 'this.buttons && this.buttons.length',
+            items: [
+              {
+                type: 'tpl',
+                inline: false,
+                className: 'p-t-xs',
+                tpl: '<span class="label label-default"><% if (data.type === "button-group") { %> 按钮组 <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>'
+              }
+            ],
+            addButtonText: '新增按钮',
+            scaffold: {
+              type: 'button',
+              label: '按钮'
+            }
+          }
+        ]
+      },
+      {
+        title: '外观',
+        body: [getSchemaTpl('className')]
+      },
+      {
+        title: '显隐',
+        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+      }
+    ])
+  ];
+}
+// 和plugin/Form/ButtonToolbar.tsx的重复了
+// registerEditorPlugin(ButtonToolbarPlugin);