amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Form/Select.tsx

@@ -0,0 +1,304 @@
+import {getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin, BaseEventContext} from '../../plugin';
+import isArray from 'lodash/isArray';
+
+import {ValidatorTag} from '../../component/validator';
+import {getEventControlConfig} from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
+
+export class SelectControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'select';
+  $schema = '/schemas/SelectControlSchema.json';
+
+  order = -480;
+
+  // 组件名称
+  name = '下拉框';
+  isBaseComponent = true;
+  icon = 'fa fa-th-list';
+  description = `支持多选，输入提示，可使用<code>source</code>获取选项`;
+  docLink = '/amis/zh-CN/components/form/select';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'select',
+    label: '选项',
+    name: 'select',
+    options: [
+      {
+        label: '选项A',
+        value: 'A'
+      },
+
+      {
+        label: '选项B',
+        value: 'B'
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  notRenderFormZone = true;
+
+  panelTitle = '下拉框';
+
+  // 事件定义
+  events: RendererEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '选中值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '选中值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'focus',
+      eventLabel: '获取焦点',
+      description: '输入框获取焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '选中值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'blur',
+      eventLabel: '失去焦点',
+      description: '输入框失去焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '选中值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'add',
+      eventLabel: '新增选项',
+      description: '新增选项',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '新增的选项'
+            },
+            'event.data.options': {
+              type: 'array',
+              title: '选项集合'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'edit',
+      eventLabel: '编辑选项',
+      description: '编辑选项',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '编辑的选项'
+            },
+            'event.data.options': {
+              type: 'array',
+              title: '选项集合'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'delete',
+      eventLabel: '删除选项',
+      description: '删除选项',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '删除的选项'
+            },
+            'event.data.options': {
+              type: 'array',
+              title: '选项集合'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除选中值'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'reload',
+      actionLabel: '重新加载',
+      description: '触发组件数据刷新并重新渲染'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
+  panelJustify = true;
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              getSchemaTpl('formItemName', {
+                required: true
+              }),
+              getSchemaTpl('label'),
+              getSchemaTpl('clearable'),
+              getSchemaTpl('searchable'),
+              getSchemaTpl('multiple', {
+                popMore: [
+                  getSchemaTpl('switch', {
+                    label: '单行显示选中值',
+                    name: 'valuesNoWrap'
+                  })
+                ]
+              }),
+              getSchemaTpl('checkAll'),
+              getSchemaTpl('labelRemark'),
+              getSchemaTpl('remark'),
+              getSchemaTpl('placeholder'),
+              getSchemaTpl('description')
+            ]
+          },
+          {
+            title: '选项',
+            body: [
+              getSchemaTpl('optionControl'),
+              getSchemaTpl('menuTpl'),
+              getSchemaTpl('value', {
+                visibleOn: 'this.options == null'
+              }),
+              getSchemaTpl('creatable', {
+                formType: 'extend',
+                hiddenOnDefault: true,
+                form: {
+                  body: [
+                    getSchemaTpl('createBtnLabel'),
+                    getSchemaTpl('addApi')
+                    // {
+                    //   label: '按钮位置',
+                    //   name: 'valueType',
+                    //   type: 'button-group-select',
+                    //   size: 'sm',
+                    //   tiled: true,
+                    //   value: 'asUpload',
+                    //   mode: 'row',
+                    //   options: [
+                    //     {
+                    //       label: '顶部',
+                    //       value: ''
+                    //     },
+                    //     {
+                    //       label: '底部',
+                    //       value: ''
+                    //     },
+                    //   ],
+                    // },
+                  ]
+                }
+              }),
+              getSchemaTpl('editable', {
+                type: 'ae-Switch-More',
+                formType: 'extend',
+                hiddenOnDefault: true,
+                form: {
+                  body: [getSchemaTpl('editApi')]
+                }
+              }),
+              getSchemaTpl('removable', {
+                type: 'ae-Switch-More',
+                formType: 'extend',
+                hiddenOnDefault: true,
+                form: {
+                  body: [getSchemaTpl('deleteApi')]
+                }
+              })
+            ]
+          },
+          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('validation', {tag: ValidatorTag.MultiSelect})
+        ])
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('collapseGroup', [
+            getSchemaTpl('style:formItem', {renderer: context.info.renderer}),
+            getSchemaTpl('style:classNames')
+          ])
+        ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+  };
+}
+
+registerEditorPlugin(SelectControlPlugin);

package/src/plugin/Form/Static.tsx

@@ -0,0 +1,322 @@
+import React from 'react';
+import {Button} from 'amis';
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BaseEventContext, BasePlugin} from '../../plugin';
+import {EditorNodeType} from '../../store/node';
+import {mockValue} from '../../mocker';
+
+export class StaticControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'static';
+  $schema = '/schemas/StaticControlSchema.json';
+
+  order = -390;
+
+  // 组件名称
+  name = '静态展示框';
+  isBaseComponent = true;
+  icon = 'fa fa-info';
+  description = `纯用来展示数据，可用来展示<code>json、date、image、progress</code>等数据`;
+  docLink = '/amis/zh-CN/components/form/static';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'static',
+    label: '描述'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold,
+        value: '静态值'
+      }
+    ]
+  };
+  multifactor = true;
+
+  panelTitle = '静态展示';
+  panelBodyCreator = (context: BaseEventContext) => {
+    return [
+      /*{
+        children: (
+          <Button
+            size="sm"
+            level="info"
+            className="m-b"
+            block
+            onClick={this.exchangeRenderer.bind(this, context.id)}
+          >
+            更改渲染器类型
+          </Button>
+        )
+      },*/
+      getSchemaTpl('switchDefaultValue'),
+
+      {
+        type: 'input-text',
+        name: 'value',
+        label: '默认值',
+        visibleOn: 'typeof this.value !== "undefined"'
+      },
+
+      {
+        name: 'quickEdit',
+        label: '启用快速编辑',
+        type: 'switch',
+        pipeIn: (value: any) => !!value,
+        mode: 'inline',
+        className: 'w-full'
+      },
+
+      {
+        visibleOn: 'data.quickEdit',
+        name: 'quickEdit.mode',
+        type: 'button-group-select',
+        value: 'popOver',
+        label: '快速编辑模式',
+        size: 'xs',
+        mode: 'inline',
+        className: 'w-full',
+        options: [
+          {
+            label: '下拉',
+            value: 'popOver'
+          },
+          {
+            label: '内嵌',
+            value: 'inline'
+          }
+        ]
+      },
+
+      {
+        visibleOn: 'data.quickEdit',
+        name: 'quickEdit.saveImmediately',
+        label: '是否立即保存',
+        type: 'switch',
+        mode: 'inline',
+        className: 'w-full',
+        description: '开启后修改即提交，而不是标记修改批量提交。',
+        descriptionClassName: 'help-block m-b-none',
+        pipeIn: (value: any) => !!value
+      },
+
+      getSchemaTpl('api', {
+        label: '立即保存接口',
+        description:
+          '是否单独给立即保存配置接口，如果不配置，则默认使用quickSaveItemApi。',
+        name: 'quickEdit.saveImmediately.api',
+        visibleOn: 'this.quickEdit && this.quickEdit.saveImmediately'
+      }),
+
+      {
+        visibleOn: 'data.quickEdit',
+        name: 'quickEdit',
+        asFormItem: true,
+        children: ({value, onChange, data}: any) => {
+          if (value === true) {
+            value = {};
+          }
+
+          const originMode = value.mode;
+
+          value = {
+            type: 'input-text',
+            name: data.name,
+            ...value
+          };
+          delete value.mode;
+
+          // todo 多个快速编辑表单模式看来只能代码模式编辑了。
+
+          return (
+            <Button
+              level="info"
+              className="m-b"
+              size="sm"
+              block
+              onClick={() => {
+                this.manager.openSubEditor({
+                  title: '配置快速编辑类型',
+                  value: value,
+                  slot: {
+                    type: 'form',
+                    mode: 'normal',
+                    body: ['$$'],
+                    wrapWithPanel: false
+                  },
+                  onChange: value =>
+                    onChange(
+                      {
+                        ...value,
+                        mode: originMode
+                      },
+                      'quickEdit'
+                    )
+                });
+              }}
+            >
+              配置快速编辑
+            </Button>
+          );
+        }
+      },
+
+      {
+        name: 'popOver',
+        label: '启用查看更多展示',
+        type: 'switch',
+        pipeIn: (value: any) => !!value,
+        mode: 'inline',
+        className: 'w-full'
+      },
+
+      {
+        name: 'popOver.mode',
+        label: '查看更多弹出模式',
+        type: 'select',
+        visibleOn: 'data.popOver',
+        pipeIn: defaultValue('popOver'),
+        options: [
+          {
+            label: '默认',
+            value: 'popOver'
+          },
+
+          {
+            label: '弹框',
+            value: 'dialog'
+          },
+
+          {
+            label: '抽出式弹框',
+            value: 'drawer'
+          }
+        ]
+      },
+
+      {
+        name: 'popOver.position',
+        label: '查看更多弹出模式',
+        type: 'select',
+        visibleOn: 'data.popOver && data.popOver.mode === "popOver"',
+        pipeIn: defaultValue('center'),
+        options: [
+          {
+            label: '目标中部',
+            value: 'center'
+          },
+
+          {
+            label: '目标左上角',
+            value: 'left-top'
+          },
+
+          {
+            label: '目标右上角',
+            value: 'right-top'
+          },
+
+          {
+            label: '目标左下角',
+            value: 'left-bottom'
+          },
+
+          {
+            label: '目标右下角',
+            value: 'right-bottom'
+          },
+
+          {
+            label: '页面左上角',
+            value: 'fixed-left-top'
+          },
+
+          {
+            label: '页面右上角',
+            value: 'fixed-right-top'
+          },
+
+          {
+            label: '页面左下角',
+            value: 'fixed-left-bottom'
+          },
+
+          {
+            label: '页面右下角',
+            value: 'fixed-right-bottom'
+          }
+        ]
+      },
+
+      {
+        visibleOn: 'data.popOver',
+        name: 'popOver',
+        asFormItem: true,
+        children: ({value, onChange}: any) => {
+          value = {
+            type: 'panel',
+            title: '查看详情',
+            body: '内容详情',
+            ...value
+          };
+
+          return (
+            <Button
+              level="info"
+              className="m-b"
+              size="sm"
+              block
+              onClick={() => {
+                this.manager.openSubEditor({
+                  title: '配置查看更多展示内容',
+                  value: value,
+                  onChange: value => onChange(value, 'quickEdit')
+                });
+              }}
+            >
+              查看更多内容配置
+            </Button>
+          );
+        }
+      },
+
+      getSchemaTpl('borderMode'),
+      {
+        name: 'copyable',
+        label: '启用内容复制功能',
+        type: 'switch',
+        pipeIn: (value: any) => !!value,
+        mode: 'inline',
+        className: 'w-full'
+      },
+
+      {
+        visibleOn: 'data.copyable',
+        name: 'copyable.content',
+        type: 'textarea',
+        label: '复制内容模板',
+        description: '默认为当前字段值，可定制。'
+      }
+    ];
+  };
+
+  filterProps(props: any, node: EditorNodeType) {
+    props.$$id = node.id;
+
+    if (typeof props.value === 'undefined') {
+      props.value = mockValue(props);
+    }
+    return props;
+  }
+
+  /*exchangeRenderer(id: string) {
+    this.manager.showReplacePanel(id, '展示');
+  }*/
+}
+
+registerEditorPlugin(StaticControlPlugin);