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

package/src/plugin/Form/ListSelect.tsx

@@ -0,0 +1,73 @@
+import {getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+
+export class ListControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'list-select';
+  $schema = '/schemas/ListControlSchema.json';
+
+  order = -430;
+
+  // 组件名称
+  name = '列表选择';
+  isBaseComponent = true;
+  icon = 'fa fa-ellipsis-h';
+  description = `单选或者多选，支持<code>source</code>拉取选项，选项可配置图片，也可以自定义<code>HTML</code>配置`;
+  docLink = '/amis/zh-CN/components/form/list-select';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'list-select',
+    label: '列表',
+    name: 'list',
+    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('switchDefaultValue'),
+    {
+      type: 'list-select',
+      name: 'value',
+      label: '默认值',
+      description: '请填入选项 Options 中 value 值',
+      source: '${options}',
+      visibleOn: 'typeof this.value !== "undefined"'
+    },
+    getSchemaTpl('fieldSet', {
+      title: '选项',
+      body: [
+        getSchemaTpl('multiple'),
+        getSchemaTpl('joinValues'),
+        getSchemaTpl('delimiter'),
+        getSchemaTpl('extractValue'),
+        getSchemaTpl('options'),
+        getSchemaTpl('source')
+      ]
+    })
+  ];
+}
+
+registerEditorPlugin(ListControlPlugin);

package/src/plugin/Form/LocationPicker.tsx

@@ -0,0 +1,62 @@
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+
+export class LocationControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'location-picker';
+  $schema = '/schemas/LocationControlSchema.json';
+
+  // 组件名称
+  name = '地理位置选择';
+  isBaseComponent = true;
+  icon = 'fa fa-location-arrow';
+  description = `地理位置选择`;
+  docLink = '/amis/zh-CN/components/form/location-picker';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'location-picker',
+    name: 'location'
+  };
+
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '地理位置选择';
+  panelBody = [
+    {
+      name: 'clearable',
+      label: '是否可清除',
+      type: 'switch',
+      mode: 'inline',
+      className: 'block'
+    },
+    {
+      type: 'input-text',
+      name: 'ak',
+      label: '百度地图的 AK',
+      description:
+        '请从<a href="http://lbsyun.baidu.com/" target="_blank">百度地图开放平台</a>获取'
+    },
+    {
+      type: 'select',
+      name: 'coordinatesType',
+      label: '坐标格式',
+      value: 'bd09',
+      options: [
+        {label: '百度坐标', value: 'bd09'},
+        {label: '国测局坐标', value: 'gcj02'}
+      ]
+    }
+  ];
+}
+
+registerEditorPlugin(LocationControlPlugin);

package/src/plugin/Form/MatrixCheckboxes.tsx

@@ -0,0 +1,136 @@
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+
+export class MatrixControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'matrix-checkboxes';
+  $schema = '/schemas/MatrixControlSchema.json';
+
+  // 组件名称
+  name = '矩阵开关';
+  isBaseComponent = true;
+  icon = 'fa fa-th-large';
+  description = `可配置行单选，列单选，以及全部选项只能单选或者全部选项多选`;
+  docLink = '/amis/zh-CN/components/form/matrix-checkboxes';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'matrix-checkboxes',
+    name: 'matrix',
+    label: '矩阵开关',
+    rowLabel: '行标题说明',
+    columns: [
+      {
+        label: '列1'
+      },
+      {
+        label: '列2'
+      }
+    ],
+    rows: [
+      {
+        label: '行1'
+      },
+      {
+        label: '行2'
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '矩阵开关';
+  panelBody = [
+    getSchemaTpl('api', {
+      name: 'source',
+      label: '获取矩阵数据接口'
+    }),
+    getSchemaTpl('multiple', {
+      value: true
+    }),
+    {
+      type: 'button-group-select',
+      name: 'singleSelectMode',
+      label: '单选模式',
+      description: '行级、列级或者单个单元单选',
+      size: 'xs',
+      mode: 'inline',
+      className: 'w-full',
+      visibleOn: '!this.multiple',
+      options: [
+        {
+          label: '行级',
+          value: 'row'
+        },
+
+        {
+          label: '列级',
+          value: 'column'
+        },
+
+        {
+          label: '单个单元',
+          value: 'cell'
+        }
+      ],
+      pipeIn: defaultValue('column')
+    },
+    getSchemaTpl('fieldSet', {
+      title: '矩阵配置',
+      body: [
+        {
+          label: '列配置',
+          name: 'columns',
+          type: 'combo',
+          multiple: true,
+          addButtonText: '添加一列',
+          scaffold: {
+            label: '列说明'
+          },
+          items: [
+            {
+              type: 'input-text',
+              name: 'label',
+              placeholder: '列说明'
+            }
+          ]
+        },
+
+        {
+          name: 'rowLabel',
+          label: '行标题文字',
+          type: 'input-text'
+        },
+
+        {
+          label: '行配置',
+          name: 'rows',
+          type: 'combo',
+          multiple: true,
+          scaffold: {
+            label: '行说明'
+          },
+          addButtonText: '添加一行',
+          items: [
+            {
+              type: 'input-text',
+              name: 'label',
+              placeholder: '行说明'
+            }
+          ]
+        }
+      ]
+    })
+  ];
+}
+
+registerEditorPlugin(MatrixControlPlugin);

package/src/plugin/Form/NestedSelect.tsx

@@ -0,0 +1,211 @@
+import {getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} 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,209 @@
+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 [
+      {
+        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);