amis-editor 4.1.0-beta.4 → 4.2.0-beta.0

package/src/plugin/Wrapper.tsx

@@ -0,0 +1,107 @@
+import {Button} from 'amis';
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {BasePlugin, RegionConfig, RendererInfo} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+
+export class WrapperPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'wrapper';
+  $schema = '/schemas/WrapperSchema.json';
+  disabledRendererPlugin = true; // 组件面板不显示
+
+  // 组件名称
+  name = '包裹';
+  isBaseComponent = true;
+  description = '类似于容器，唯一的区别在于会默认会有一层内边距。';
+  docLink = '/amis/zh-CN/components/wrapper';
+  tags = ['容器'];
+  icon = 'fa fa-square-o';
+  scaffold = {
+    type: 'wrapper',
+    body: '内容'
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  regions: Array<RegionConfig> = [
+    {
+      key: 'body',
+      label: '内容区'
+    }
+  ];
+
+  panelTitle = '包裹';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            children: (
+              <Button
+                size="sm"
+                className="m-b-sm"
+                level="info"
+                block
+                onClick={() => {
+                  // this.manager.showInsertPanel('body');
+                  this.manager.showRendererPanel(
+                    '',
+                    '请从左侧组件面板中点击添加内容元素'
+                  );
+                }}
+              >
+                新增内容
+              </Button>
+            )
+          },
+          getSchemaTpl('size', {
+            label: '内间距大小',
+            options: [
+              {
+                label: '极小',
+                value: 'xs'
+              },
+              {
+                label: '小',
+                value: 'sm'
+              },
+              {
+                label: '默认',
+                value: ''
+              },
+              {
+                label: '中',
+                value: 'md'
+              },
+              {
+                label: '大',
+                value: 'lg'
+              },
+              {
+                label: '无',
+                value: 'none'
+              }
+            ],
+            pipeIn: defaultValue('')
+          })
+        ]
+      },
+
+      {
+        title: '样式',
+        body: [
+          getSchemaTpl('className', {
+            description: '设置样式后，大小设置将无效。',
+            pipeIn: defaultValue('bg-white')
+          }),
+          getSchemaTpl('style')
+        ]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(WrapperPlugin);