amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Form/NestedSelect.tsx

@@ -0,0 +1,278 @@
+import {RendererAction, RendererEvent} from '../../event-action';
+import {getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BaseEventContext, BasePlugin} from '../../plugin';
+import {getEventControlConfig} from '../../util';
+
+export class NestedSelectControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'nested-select';
+  $schema = '/schemas/NestedSelectControlSchema.json';
+
+  // 组件名称
+  name = '嵌套下拉框';
+  isBaseComponent = true;
+  icon = 'fa fa-indent';
+  description = `适用于选项中含有子项，可通过<code>source</code>拉取选项，支持多选`;
+  docLink = '/amis/zh-CN/components/form/nestedselect';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'nested-select',
+    label: '嵌套下拉框',
+    name: 'nestedSelect',
+    options: [
+      {
+        label: '选项A',
+        value: 'A'
+      },
+
+      {
+        label: '选项B',
+        value: 'B',
+        children: [
+          {
+            label: '选项C',
+            value: 'C'
+          },
+          {
+            label: '选项D',
+            value: 'D'
+          }
+        ]
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '嵌套下拉';
+
+  panelDefinitions = {
+    options: {
+      label: '选项 Options',
+      name: 'options',
+      type: 'combo',
+      multiple: true,
+      multiLine: true,
+      draggable: true,
+      addButtonText: '新增选项',
+      scaffold: {
+        label: '',
+        value: ''
+      },
+      items: [
+        {
+          type: 'group',
+          body: [
+            {
+              type: 'input-text',
+              name: 'label',
+              placeholder: '名称',
+              required: true
+            },
+
+            {
+              type: 'input-text',
+              name: 'value',
+              placeholder: '值',
+              unique: true
+            }
+          ]
+        },
+        {
+          $ref: 'options',
+          label: '子选项',
+          name: 'children',
+          addButtonText: '新增子选项'
+        }
+      ]
+    }
+  };
+
+  // 事件定义
+  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: '选中值'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除选中值'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'reload',
+      actionLabel: '重新加载',
+      description: '触发组件数据刷新并重新渲染'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
+  panelBodyCreator = (context: BaseEventContext) =>
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          getSchemaTpl('switchDefaultValue'),
+          {
+            type: 'input-text',
+            name: 'value',
+            label: '默认值',
+            visibleOn: 'typeof this.value !== "undefined"'
+          },
+
+          getSchemaTpl('clearable'),
+          getSchemaTpl('searchable'),
+
+          {
+            type: 'input-text',
+            name: 'searchPromptText',
+            label: '搜索框占位文本'
+          },
+          {
+            type: 'input-text',
+            name: 'noResultsText',
+            label: '无结果时的文本'
+          },
+          getSchemaTpl('hideNodePathLabel'),
+
+          getSchemaTpl('switch', {
+            name: 'enableNodePath',
+            label: '节点路径模式'
+          }),
+
+          getSchemaTpl('switch', {
+            name: 'onlyChildren',
+            label: '选中父节点时只使用子节点的值'
+          }),
+
+          {
+            type: 'input-text',
+            name: 'pathSeparator',
+            visibleOn: 'this.enableNodePath',
+            label: '节点路径的分隔符'
+          },
+          getSchemaTpl('borderMode'),
+          getSchemaTpl('fieldSet', {
+            title: '选项',
+            body: [
+              {
+                $ref: 'options',
+                name: 'options'
+              },
+              getSchemaTpl('api', {
+                name: 'source',
+                label: '获取选项接口'
+              }),
+              getSchemaTpl('multiple'),
+
+              getSchemaTpl('switch', {
+                name: 'cascade',
+                label: '不自动选中子节点',
+                visibleOn: 'data.multiple',
+                description: '选中父级时，孩子节点是否自动选中'
+              }),
+
+              getSchemaTpl('switch', {
+                name: 'withChildren',
+                label: '数值是否携带子节点',
+                visibleOn: 'data.cascade !== true && data.multiple'
+              }),
+
+              getSchemaTpl('joinValues'),
+              getSchemaTpl('delimiter'),
+              getSchemaTpl('extractValue'),
+              getSchemaTpl('autoFill')
+            ]
+          })
+        ]
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('className', {
+            label: '菜单类名',
+            name: 'menuClassName'
+          })
+        ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+}
+
+registerEditorPlugin(NestedSelectControlPlugin);

package/src/plugin/Form/Picker.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+import {Button} from 'amis';
+import omit = require('lodash/omit');
+import {getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicToolbarItem,
+  ContextMenuEventContext,
+  ContextMenuItem
+} from '../../plugin';
+import {diff} from '../../../src/util';
+
+export class PickerControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'picker';
+  $schema = '/schemas/PickerControlSchema.json';
+
+  // 组件名称
+  name = '列表选取';
+  isBaseComponent = true;
+  icon = 'fa fa-window-restore';
+  description = `通过<code>pickerSchema</code>配置可供选取的数据源进行选择需要的数据，支持多选`;
+  docLink = '/amis/zh-CN/components/form/picker';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'picker',
+    label: '列表选取',
+    name: 'picker',
+    options: [
+      {
+        label: '选项A',
+        value: 'A'
+      },
+
+      {
+        label: '选项B',
+        value: 'B'
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '列表选取';
+  panelBodyCreator = (context: BaseEventContext) => {
+    return [
+      getSchemaTpl('switch', {
+        name: 'embed',
+        label: '开启内嵌模式'
+      }),
+
+      getSchemaTpl('switchDefaultValue'),
+
+      {
+        type: 'input-text',
+        name: 'value',
+        label: '默认值',
+        visibleOn: 'typeof this.value !== "undefined"'
+      },
+
+      getSchemaTpl('fieldSet', {
+        title: '选项',
+        body: [
+          getSchemaTpl('options'),
+          getSchemaTpl('api', {
+            name: 'source',
+            label: '获取选项接口'
+          }),
+
+          {
+            children: (
+              <Button
+                size="sm"
+                level="danger"
+                className="m-b"
+                onClick={this.editDetail.bind(this, context.id)}
+                block
+              >
+                配置选框详情
+              </Button>
+            )
+          },
+
+          {
+            label: 'labelTpl',
+            type: 'textarea',
+            name: 'labelTpl',
+            labelRemark: '已选定数据的展示样式',
+            description:
+              '支持使用 <code>\\${xxx}</code> 来获取变量，或者用 lodash.template 语法来写模板逻辑。<a target="_blank" href="/amis/zh-CN/docs/concepts/template">详情</a>'
+          },
+
+          {
+            type: 'button-group-select',
+            name: 'modalMode',
+            label: '选框类型',
+            value: 'dialog',
+            size: 'xs',
+            options: [
+              {
+                label: '弹框',
+                value: 'dialog'
+              },
+
+              {
+                label: '抽出式弹框',
+                value: 'drawer'
+              }
+            ]
+          },
+
+          getSchemaTpl('multiple'),
+          getSchemaTpl('joinValues'),
+          getSchemaTpl('delimiter'),
+          getSchemaTpl('extractValue'),
+          getSchemaTpl('autoFill')
+        ]
+      })
+    ];
+  };
+
+  buildEditorToolbar(
+    {id, info}: BaseEventContext,
+    toolbars: Array<BasicToolbarItem>
+  ) {
+    if (info.renderer.name === this.rendererName) {
+      toolbars.push({
+        icon: 'fa fa-expand',
+        order: 100,
+        tooltip: '配置选框详情',
+        onClick: this.editDetail.bind(this, id)
+      });
+    }
+  }
+
+  buildEditorContextMenu(
+    {id, schema, region, info}: ContextMenuEventContext,
+    menus: Array<ContextMenuItem>
+  ) {
+    if (info.renderer.name === this.rendererName) {
+      menus.push('|', {
+        label: '配置选框详情',
+        onSelect: this.editDetail.bind(this, id)
+      });
+    }
+  }
+
+  editDetail(id: string) {
+    const manager = this.manager;
+    const store = manager.store;
+    const node = store.getNodeById(id)!;
+    const value = store.getValueOf(id);
+
+    if (!node || !value) {
+      return;
+    }
+
+    const component = node.getComponent();
+
+    const schema = {
+      type: 'crud',
+      mode: 'list',
+      ...(value.pickerSchema || {
+        listItem: {
+          title: '${label}'
+        }
+      }),
+      api: value.source,
+      pickerMode: true,
+      multiple: value.multiple
+    };
+
+    this.manager.openSubEditor({
+      title: '配置选框详情',
+      value: schema,
+      data: {options: component.props.options},
+      onChange: newValue => {
+        newValue = {
+          ...value,
+          pickerSchema: {...newValue},
+          source: newValue.api
+        };
+
+        delete newValue.pickerSchema.api;
+        delete newValue.pickerSchema.type;
+        delete newValue.pickerSchema.pickerMode;
+        delete newValue.pickerSchema.multiple;
+
+        manager.panelChangeValue(newValue, diff(value, newValue));
+      }
+    });
+  }
+}
+
+registerEditorPlugin(PickerControlPlugin);

package/src/plugin/Form/Radios.tsx

@@ -0,0 +1,189 @@
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin, BaseEventContext} from '../../plugin';
+
+import {ValidatorTag} from '../../component/validator';
+import {getEventControlConfig} from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
+import flatten = require('lodash/flatten');
+
+export class RadiosControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'radios';
+  $schema = '/schemas/RadiosControlSchema.json';
+
+  order = -460;
+
+  // 组件名称
+  name = '单选框';
+  isBaseComponent = true;
+  icon = 'fa fa-dot-circle-o';
+  description = `通过<code>options</code>配置选项，可通过<code>source</code>拉取选项`;
+  docLink = '/amis/zh-CN/components/form/radios';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'radios',
+    label: '单选框',
+    name: 'radios',
+    options: [
+      {
+        label: '选项A',
+        value: 'A'
+      },
+
+      {
+        label: '选项B',
+        value: 'B'
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold,
+        value: 'A'
+      }
+    ]
+  };
+
+  notRenderFormZone = true;
+
+  panelTitle = '单选框';
+
+  // 事件定义
+  events: RendererEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '选中值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              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('autoFill')
+              getSchemaTpl('labelRemark'),
+              getSchemaTpl('remark')
+            ]
+          },
+          {
+            title: '选项',
+            body: [
+              getSchemaTpl('optionControl'),
+              getSchemaTpl('switch', {
+                label: '默认选择第一个',
+                name: 'selectFirst',
+                horizontal: {justify: true, left: 5},
+                visibleOn: '!this.options'
+              }),
+              getSchemaTpl('value', {
+                visibleOn: '!this.options && this.selectFirst !== true'
+              })
+            ]
+          },
+          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('validation', {
+            tag: ValidatorTag.All
+          })
+        ])
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('collapseGroup', [
+            getSchemaTpl('style:formItem', {
+              renderer: context.info.renderer,
+              schema: [
+                getSchemaTpl('switch', {
+                  label: '一行选项显示',
+                  name: 'inline',
+                  hiddenOn: 'data.mode === "inline"',
+                  pipeIn: defaultValue(true)
+                }),
+                {
+                  label: '每行选项个数',
+                  name: 'columnsCount',
+                  hiddenOn: 'data.mode === "inline" || data.inline !== false',
+                  type: 'input-range',
+                  min: 1,
+                  max: 6,
+                  pipeIn: defaultValue(1)
+                }
+              ]
+            }),
+            getSchemaTpl('style:classNames', {
+              schema: [
+                getSchemaTpl('className', {
+                  label: '单个选项',
+                  name: 'itemClassName'
+                })
+              ]
+            })
+          ])
+        ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+  };
+}
+
+registerEditorPlugin(RadiosControlPlugin);