amis-editor 4.1.0-beta.1 → 4.1.0-beta.19

package/src/plugin/Form/ButtonToolbar.tsx

@@ -0,0 +1,121 @@
+import {Button, SchemaObject} from 'amis';
+import flatten from 'lodash/flatten';
+import React from 'react';
+import {ContainerWrapper} from '../../component/ContainerWrapper';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RegionConfig,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {makeHorizontalDeeper} from '../../util';
+
+export class ButtonToolbarControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'button-toolbar';
+  $schema = '/schemas/ButtonToolbarControlSchema.json';
+
+  // 组件名称
+  name = '按钮工具栏';
+  isBaseComponent = true;
+  icon = 'fa fa-ellipsis-h';
+  description = '可以用来放置多个按钮或者按钮组，按钮之间会存在一定的间隔';
+  docLink = '/amis/zh-CN/components/form/button-toolbar';
+  tags = ['表单项', '按钮'];
+  scaffold = {
+    type: 'button-toolbar',
+    buttons: [
+      {
+        type: 'button',
+        label: '按钮1',
+        actionType: 'dialog',
+        dialog: {
+          title: '系统提示',
+          body: '对你点击了'
+        }
+      },
+      {
+        type: 'button',
+        label: '按钮2',
+        actionType: 'dialog',
+        dialog: {
+          title: '系统提示',
+          body: '对你点击了'
+        }
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    wrapWithPanel: false,
+    mode: 'horizontal',
+    body: {
+      ...this.scaffold,
+      label: '按钮工具栏'
+    }
+  };
+
+  // 容器配置
+  regions: Array<RegionConfig> = [
+    {
+      key: 'buttons',
+      label: '按钮集合',
+      preferTag: '按钮',
+      renderMethod: 'renderButtons'
+    }
+  ];
+
+  panelTitle = '工具栏';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          getSchemaTpl('label'),
+          getSchemaTpl('description'),
+
+          getSchemaTpl('remark'),
+          getSchemaTpl('labelRemark')
+        ]
+      },
+
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('formItemMode'),
+          getSchemaTpl('horizontalMode'),
+          getSchemaTpl('horizontal', {
+            label: '',
+            visibleOn:
+              '(data.$$formMode == "horizontal" || data.mode == "horizontal") && data.label !== false && data.horizontal'
+          }),
+
+          getSchemaTpl('className'),
+          getSchemaTpl('className', {
+            label: 'Label CSS 类名',
+            name: 'labelClassName'
+          }),
+          getSchemaTpl('className', {
+            label: 'Input CSS 类名',
+            name: 'inputClassName'
+          }),
+          getSchemaTpl('className', {
+            label: '描述 CSS 类名',
+            name: 'descriptionClassName',
+            visibleOn: 'data.description'
+          })
+        ]
+      },
+
+      {
+        title: '显隐',
+        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(ButtonToolbarControlPlugin);

package/src/plugin/Form/ChainedSelect.tsx

@@ -0,0 +1,70 @@
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+import {getSchemaTpl} from '../../component/schemaTpl';
+
+export class ChainedSelectControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'chained-select';
+  $schema = '/schemas/ChainedSelectControlSchema.json';
+
+  // 组件名称
+  name = '级联下拉框';
+  isBaseComponent = true;
+  icon = 'fa fa-th-list';
+  description =
+    '通过<code>source</code>拉取选项，只要有返回结果，就可以无限级别增加';
+  docLink = '/amis/zh-CN/components/form/chain-select';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'chained-select',
+    label: '级联选择',
+    name: 'chained-select'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    wrapWithPanel: false,
+    mode: 'horizontal',
+    body: {
+      ...this.scaffold
+    }
+  };
+
+  panelTitle = '级联选择';
+  panelBody = [
+    getSchemaTpl('switchDefaultValue'),
+
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"',
+      description: '请填入选项 Options 中 value 值'
+    },
+
+    getSchemaTpl('api', {
+      name: 'source',
+      label: '获取选项接口',
+      description: `<div>可用变量说明</div><ul>
+                                <li><code>value</code>当前值</li>
+                                <li><code>level</code>拉取级别，从 <code>1</code>开始。</li>
+                                <li><code>parentId</code>上一层选中的 <code>value</code> 值</li>
+                                <li><code>parent</code>上一层选中选项，包含 <code>label</code> 和 <code>value</code> 的值。</li>
+                            </ul>`
+    }),
+    getSchemaTpl('joinValues', {
+      visibleOn: true
+    }),
+    getSchemaTpl('delimiter', {
+      visibleOn: 'data.joinValues'
+    }),
+    getSchemaTpl('extractValue')
+  ];
+}
+
+registerEditorPlugin(ChainedSelectControlPlugin);

package/src/plugin/Form/Checkbox.tsx

@@ -0,0 +1,87 @@
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+
+export class CheckboxControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'checkbox';
+  $schema = '/schemas/CheckboxControlSchema.json';
+
+  // 组件名称
+  name = '勾选框';
+  isBaseComponent = true;
+  icon = 'fa fa-check-square-o';
+  description = '勾选框';
+  docLink = '/amis/zh-CN/components/form/checkbox';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'checkbox',
+    option: '勾选框',
+    name: 'checkbox'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    wrapWithPanel: false,
+    mode: 'horizontal',
+    body: [
+      {
+        value: true,
+        ...this.scaffold,
+        label: '勾选表单'
+      }
+    ]
+  };
+
+  panelTitle = '勾选框';
+  panelBody = [
+    {
+      name: 'option',
+      type: 'input-text',
+      label: '选项说明'
+    },
+
+    getSchemaTpl('switchDefaultValue', {
+      name: 'value',
+      pipeOut: (value: any, origin: any, data: any) =>
+        value ? data.trueValue ?? true : 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 ?? true : data.falseValue ?? false
+    },
+
+    {
+      type: 'input-text',
+      label: '勾选后的值',
+      name: 'trueValue',
+      pipeIn: defaultValue(true),
+      pipeOut: valuePipeOut
+    },
+
+    {
+      type: 'input-text',
+      label: '未勾选的值',
+      name: 'falseValue',
+      pipeIn: defaultValue(false),
+      pipeOut: valuePipeOut
+    }
+  ];
+}
+
+registerEditorPlugin(CheckboxControlPlugin);

package/src/plugin/Form/Checkboxes.tsx

@@ -0,0 +1,167 @@
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+
+export class CheckboxesControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'checkboxes';
+  $schema = '/schemas/CheckboxesControlSchema.json';
+
+  order = -470;
+
+  // 组件名称
+  name = '复选框';
+  isBaseComponent = true;
+  icon = 'fa fa-check-square';
+  description =
+    '通过<code>options</code>配置多个勾选框，也可以通过<code>source</code>拉取选项';
+  docLink = '/amis/zh-CN/components/form/checkboxes';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'checkboxes',
+    label: '复选框',
+    name: 'checkboxes',
+    options: [
+      {
+        label: '选项A',
+        value: 'A'
+      },
+
+      {
+        label: '选项B',
+        value: 'B'
+      }
+    ]
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        value: 'A',
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '复选框';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          getSchemaTpl('switchDefaultValue', {
+            visibleOn: '!this.defaultCheckAll'
+          }),
+
+          {
+            type: 'checkboxes',
+            name: 'value',
+            label: '默认值',
+            source: '${options}',
+            visibleOn: 'typeof this.value !== "undefined"',
+            multiple: true
+          },
+          getSchemaTpl('fieldSet', {
+            title: '选项',
+            body: [
+              getSchemaTpl('options'),
+              getSchemaTpl('source'),
+              {
+                name: 'checkAll',
+                label: '是否开启全选功能',
+                type: 'switch',
+                mode: 'inline',
+                className: 'w-full'
+              },
+
+              {
+                name: 'defaultCheckAll',
+                label: '是否默认全选',
+                type: 'switch',
+                mode: 'inline',
+                className: 'w-full',
+                description: '勾选后，默认值的配置将无效。',
+                onChange: (
+                  value: boolean,
+                  oldValue: boolean,
+                  model: any,
+                  form: any
+                ) => value && form.setValueByName('value', undefined)
+              },
+
+              getSchemaTpl('joinValues', {
+                visibleOn: true
+              }),
+              getSchemaTpl('delimiter', {
+                hiddenOn: 'data.joinValues === false'
+              }),
+              getSchemaTpl('extractValue'),
+              getSchemaTpl('autoFill'),
+
+              getSchemaTpl('creatable'),
+              getSchemaTpl('createBtnLabel'),
+              getSchemaTpl('api', {
+                label: '新增选项接口',
+                name: 'addApi'
+              }),
+
+              getSchemaTpl('editable'),
+              getSchemaTpl('api', {
+                label: '编辑选项接口',
+                name: 'editApi'
+              }),
+
+              getSchemaTpl('removable'),
+              getSchemaTpl('api', {
+                label: '删除选项接口',
+                name: 'deleteApi'
+              })
+            ]
+          })
+        ]
+      },
+      {
+        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: '单个 Checkbox 的 CSS 类名',
+            name: 'itemClassName'
+          })
+        ]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(CheckboxesControlPlugin);

package/src/plugin/Form/CodeEditor.tsx

@@ -0,0 +1,91 @@
+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 CodeEditorControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'editor';
+  $schema = '/schemas/EditorControlSchema.json';
+
+  // 组件名称
+  name = '代码编辑器';
+  isBaseComponent = true;
+  icon = 'fa fa-code';
+  description = `代码编辑器，采用 monaco-editor 支持：${availableLanguages
+    .slice(0, 10)
+    .join('，')}等等`;
+  docLink = '/amis/zh-CN/components/form/editor';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'editor',
+    label: '代码编辑器',
+    name: 'editor'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold,
+        value: 'console.log("Hello world.");'
+      }
+    ]
+  };
+
+  panelTitle = 'Editor';
+  panelBody = [
+    {
+      label: '语言',
+      name: 'language',
+      type: 'select',
+      value: 'javascript',
+      searchable: true,
+      options: availableLanguages.concat()
+    },
+
+    {
+      name: 'size',
+      type: 'button-group-select',
+      size: 'xs',
+      pipeIn: defaultValue(''),
+      label: '控件大小',
+      options: [
+        {
+          label: '默认',
+          value: ''
+        },
+        {
+          label: '中',
+          value: 'md'
+        },
+        {
+          label: '大',
+          value: 'lg'
+        },
+        {
+          label: '加大',
+          value: 'xl'
+        },
+        {
+          label: '加加大',
+          value: 'xxl'
+        }
+      ]
+    }
+  ];
+}
+
+registerEditorPlugin(CodeEditorControlPlugin);