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

package/src/plugin/Form/NestedSelect.tsx

@@ -0,0 +1,222 @@
+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 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: '新增子选项'
+        }
+      ]
+    }
+  };
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          getSchemaTpl('switchDefaultValue'),
+          {
+            type: 'input-text',
+            name: 'value',
+            label: '默认值',
+            visibleOn: 'typeof this.value !== "undefined"'
+          },
+
+          getSchemaTpl('clearable'),
+
+          {
+            type: 'switch',
+            name: 'searchable',
+            label: '可否检索',
+            mode: 'inline',
+            className: 'w-full'
+          },
+          {
+            type: 'input-text',
+            name: 'searchPromptText',
+            label: '搜索框占位文本'
+          },
+          {
+            type: 'input-text',
+            name: 'noResultsText',
+            label: '无结果时的文本'
+          },
+          {
+            type: 'switch',
+            name: 'hideNodePathLabel',
+            label: '隐藏选中节点的祖先节点文本信息',
+            mode: 'inline',
+            className: 'w-full'
+          },
+          {
+            type: 'switch',
+            name: 'enableNodePath',
+            label: '节点路径模式',
+            mode: 'inline',
+            className: 'w-full'
+          },
+          {
+            type: 'switch',
+            name: 'onlyChildren',
+            label: '选中父节点时只使用子节点的值',
+            mode: 'inline',
+            className: 'w-full'
+          },
+          {
+            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'),
+
+              {
+                name: 'cascade',
+                visibleOn: 'data.multiple',
+                label: '不自动选中子节点？',
+                description: '选中父级时，孩子节点是否自动选中',
+                type: 'switch',
+                mode: 'inline',
+                className: 'w-full'
+              },
+
+              {
+                name: 'withChildren',
+                visibleOn: 'data.cascade !== true && data.multiple',
+                label: '数值是否携带子节点',
+                type: 'switch',
+                mode: 'inline',
+                className: 'w-full'
+              },
+
+              getSchemaTpl('joinValues'),
+              getSchemaTpl('delimiter'),
+              getSchemaTpl('extractValue'),
+              getSchemaTpl('autoFill')
+            ]
+          })
+        ]
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('className', {
+            label: '菜单类名',
+            name: 'menuClassName'
+          })
+        ]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(NestedSelectControlPlugin);

package/src/plugin/Form/Picker.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import {Button} from 'amis';
+import omit = require('lodash/omit');
+import {availableLanguages} from 'amis/lib/renderers/Form/Editor';
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicSubRenderInfo,
+  BasicToolbarItem,
+  ContextMenuEventContext,
+  ContextMenuItem,
+  RendererEventContext,
+  SubRendererInfo
+} 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 [
+      {
+        type: 'switch',
+        name: 'embed',
+        mode: 'inline',
+        className: 'w-full',
+        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,130 @@
+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';
+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'
+      }
+    ]
+  };
+
+  panelTitle = '单选框';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          getSchemaTpl('switchDefaultValue'),
+          {
+            type: 'radios',
+            name: 'value',
+            label: '默认值',
+            source: '${options}',
+            visibleOn: 'typeof this.value !== "undefined"',
+            multiple: true
+          },
+          {
+            label: '是否默认选择第一个',
+            name: 'selectFirst',
+            type: 'switch',
+            mode: 'inline',
+            className: 'w-full'
+          },
+          getSchemaTpl('fieldSet', {
+            title: '选项',
+            body: [
+              getSchemaTpl('options'),
+              getSchemaTpl('source'),
+
+              getSchemaTpl('joinValues', {
+                visibleOn: true
+              }),
+
+              getSchemaTpl('extractValue'),
+              getSchemaTpl('autoFill')
+            ]
+          })
+        ]
+      },
+      {
+        title: '外观',
+        body: [
+          {
+            label: '选项在一行显示',
+            name: 'inline',
+            type: 'switch',
+            visibleOn: 'data.mode != "inline"',
+            mode: 'inline',
+            className: 'w-full',
+            pipeIn: defaultValue(true)
+          },
+          {
+            label: '每行显示多少列',
+            name: 'columnsCount',
+            hiddenOn:
+              'typeof data.inline === "undefined" || data.inline === true',
+            type: 'input-range',
+            min: 1,
+            max: 6,
+            pipeIn: defaultValue(1)
+          },
+          getSchemaTpl('className', {
+            label: '单个 Radio 的 CSS 类名',
+            name: 'itemClassName'
+          })
+        ]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(RadiosControlPlugin);