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

package/src/plugin/Form/Select.tsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import {Button} from 'amis';
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+import isArray from 'lodash/isArray';
+
+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
+      }
+    ]
+  };
+
+  panelTitle = '下拉框';
+  panelBody = [
+    getSchemaTpl('switchDefaultValue'),
+
+    {
+      type: 'select',
+      name: 'value',
+      label: '默认值',
+      source: '${options}',
+      visibleOn: '!data.multiple && typeof this.value !== "undefined"'
+    },
+
+    {
+      type: 'select',
+      name: 'value',
+      label: '默认值',
+      source: '${options}',
+      multiple: true,
+      visibleOn: ' data.multiple && typeof this.value !== "undefined"'
+    },
+
+    getSchemaTpl('clearable'),
+    {
+      label: '可检索',
+      name: 'searchable',
+      type: 'switch',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    {
+      label: '是否默认选择第一个',
+      name: 'selectFirst',
+      type: 'switch',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    getSchemaTpl('fieldSet', {
+      title: '选项',
+      body: [
+        getSchemaTpl('multiple'),
+        {
+          label: '选中内容以单行模式显示',
+          name: 'valuesNoWrap',
+          type: 'switch',
+          mode: 'inline',
+          className: 'w-full',
+          visibleOn: 'this.multiple'
+        },
+        {
+          label: '可全选',
+          name: 'checkAll',
+          type: 'switch',
+          mode: 'inline',
+          value: false,
+          className: 'w-full',
+          onChange: (value: any, origin: any, item: any, form: any) => {
+            // 开启 “可全选” 时，需关联开启多选模式
+            value && form.setValueByName('multiple', true);
+          }
+        },
+        {
+          label: '自定义菜单模板',
+          name: 'menuTpl',
+          type: 'input-text'
+        },
+        {
+          label: '默认全选',
+          name: 'defaultCheckAll',
+          type: 'switch',
+          value: false,
+          visibleOn: 'this.checkAll',
+          mode: 'inline',
+          className: 'w-full'
+        },
+        {
+          type: 'input-text',
+          name: 'checkAllLabel',
+          label: '默认为 "全选" 的文字',
+          visibleOn: 'this.checkAll',
+          value: '全选'
+        },
+        getSchemaTpl('options'),
+        getSchemaTpl('source'),
+        getSchemaTpl('api', {
+          name: 'autoComplete',
+          label: '自动完成接口',
+          description:
+            '每次输入新内容后，将调用接口，根据接口返回更新选项。当前用户输入值在 <code>\\${term}</code> 中。'
+        }),
+        getSchemaTpl('joinValues'),
+        getSchemaTpl('delimiter'),
+        getSchemaTpl('extractValue'),
+        getSchemaTpl('autoFill'),
+
+        getSchemaTpl('creatable'),
+        getSchemaTpl('createBtnLabel', {
+          visibleOn: 'data.creatable'
+        }),
+        getSchemaTpl('api', {
+          label: '新增选项接口',
+          name: 'addApi',
+          visibleOn: 'data.creatable'
+        }),
+        {
+          name: 'addControls',
+          visibleOn: 'data.creatable',
+          pipeIn: defaultValue([
+            {
+              type: 'input-text',
+              name: 'label',
+              label: false,
+              placeholder: '请输入名称'
+            }
+          ]),
+          asFormItem: true,
+          children: (params: any) => ( // params: {value, onChange, data}
+            <Button
+              size="sm"
+              level="danger"
+              className="m-b"
+              onClick={() => {
+                let defaultValue = {
+                  type: 'dialog',
+                  body: [
+                    {
+                      type: 'input-text',
+                      name: 'label',
+                      label: false,
+                      placeholder: '请输入名称'
+                    }
+                  ]
+                };
+                if (params.value && params.value.body && isArray(params.value.body)) {
+                  defaultValue.body = params.value.body;
+                } else if (params.value && isArray(params.value)) {
+                  defaultValue.body = params.value;
+                }
+                this.manager.openSubEditor({
+                  title: '配置新建选项表单项',
+                  value: defaultValue,
+                  onChange: (curValue: any) => {
+                    if (curValue && curValue.body && isArray(curValue.body)) {
+                      /**
+                       * 备注: 需要确保 addControls 为数组类型 才会生效。
+                       * 详细使用说明：https://aisuda.bce.baidu.com/amis/zh-CN/components/form/options#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols
+                       */
+                      return params.onChange(curValue.body, 'addControls');
+                    } else {
+                      return params.onChange([], 'addControls');
+                    }
+                  }
+                });
+              }}
+              block
+            >
+              配置新建选项表单项
+            </Button>
+          )
+        },
+
+        getSchemaTpl('editable'),
+        getSchemaTpl('api', {
+          label: '编辑选项接口',
+          name: 'editApi'
+        }),
+
+        getSchemaTpl('removable'),
+        getSchemaTpl('api', {
+          label: '删除选项接口',
+          name: 'deleteApi'
+        })
+      ]
+    })
+  ];
+}
+
+registerEditorPlugin(SelectControlPlugin);

package/src/plugin/Form/Static.tsx

@@ -0,0 +1,335 @@
+import React from 'react';
+import {Button} from 'amis';
+import {availableLanguages} from 'amis/lib/renderers/Form/Editor';
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicSubRenderInfo,
+  PluginEvent,
+  RendererEventContext,
+  ReplaceEventContext,
+  SubRendererInfo
+} 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);

package/src/plugin/Form/Switch.tsx

@@ -0,0 +1,118 @@
+import {relativeValueRe} from 'amis';
+import {availableLanguages} from 'amis/lib/renderers/Form/Editor';
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+
+export class SwitchControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'switch';
+  $schema = '/schemas/SwitchControlSchema.json';
+
+  order = -400;
+
+  // 组件名称
+  name = '开关';
+  isBaseComponent = true;
+  icon = 'fa fa-toggle-on';
+  description = `开关控件`;
+  docLink = '/amis/zh-CN/components/form/switch';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'switch',
+    option: '开关',
+    name: 'switch',
+    falseValue: false,
+    trueValue: true
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold,
+        label: '开关表单'
+      }
+    ]
+  };
+
+  panelTitle = '开关';
+  panelBody = [
+    getSchemaTpl('switchDefaultValue', {
+      pipeOut: (value: any, origin: any, data: any) =>
+        value ? data.trueValue : undefined
+    }),
+    {
+      type: 'switch',
+      name: 'value',
+      label: '默认勾选',
+      mode: 'inline',
+      className: 'w-full',
+      visibleOn: 'typeof this.value !== "undefined"',
+      pipeOut: (value: any, origin: any, data: any) =>
+        value ? data.trueValue : data.falseValue
+    },
+    {
+      name: 'option',
+      type: 'input-text',
+      label: '选项说明'
+    },
+    {
+      label: '选项位置',
+      name: 'optionAtLeft',
+      type: 'button-group-select',
+      size: 'sm',
+      value: false,
+      options: [
+        {
+          label: '左',
+          value: true
+        },
+
+        {
+          label: '右',
+          value: false
+        }
+      ]
+    },
+    {
+      type: 'input-text',
+      label: '勾选后的值',
+      name: 'trueValue',
+      value: true,
+      pipeOut: valuePipeOut
+    },
+    {
+      type: 'input-text',
+      label: '未勾选的值',
+      name: 'falseValue',
+      value: false,
+      pipeOut: valuePipeOut
+    },
+
+    {
+      name: 'onText',
+      type: 'input-text',
+      label: '开启时的文本'
+    },
+
+    {
+      name: 'offText',
+      type: 'input-text',
+      label: '关闭时的文本'
+    }
+  ];
+}
+
+registerEditorPlugin(SwitchControlPlugin);