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

package/src/plugin/Form/InputTime.tsx

@@ -0,0 +1,95 @@
+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 TimeControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-time';
+  $schema = '/schemas/TimeControlSchema.json';
+
+  // 组件名称
+  name = '时间框';
+  isBaseComponent = true;
+  icon = 'fa fa-clock-o';
+  description = `时分秒输入`;
+  docLink = '/amis/zh-CN/components/form/input-time';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-time',
+    label: '时间',
+    name: 'time'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: {
+      ...this.scaffold
+    }
+  };
+
+  panelTitle = '时间框';
+  panelBody = [
+    getSchemaTpl('switchDefaultValue'),
+
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"',
+      placeholder: '请输入相对值',
+      description: '支持 <code>now、+1day、-2weeks</code>这种相对值用法'
+    },
+    {
+      type: 'fieldSet',
+      title: '使用固定值',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      visibleOn: 'typeof this.value !== "undefined"',
+      body: [
+        {
+          type: 'input-time',
+          name: 'value',
+          pipeIn: (value: any) =>
+            relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
+              ? ''
+              : value
+        }
+      ]
+    },
+    {
+      type: 'input-text',
+      name: 'timeFormat',
+      label: '值格式',
+      description:
+        '请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。',
+      pipeIn: defaultValue('HH:mm')
+    },
+    getSchemaTpl('clearable', {
+      pipeIn: defaultValue(true)
+    }),
+    {
+      type: 'input-text',
+      name: 'inputFormat',
+      label: '显示格式',
+      description:
+        '请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。',
+      pipeIn: defaultValue('HH:mm')
+    }
+  ];
+}
+
+registerEditorPlugin(TimeControlPlugin);

package/src/plugin/Form/InputTree.tsx

@@ -0,0 +1,240 @@
+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 TreeControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-tree';
+  $schema = '/schemas/TreeControlSchema.json';
+
+  // 组件名称
+  name = '树选择框';
+  isBaseComponent = true;
+  icon = 'fa fa-list-alt';
+  description = `树型结构来选择，可通过<code>options</code>来配置选项，也可通过<code>source</code>拉取选项`;
+  docLink = '/amis/zh-CN/components/form/input-tree';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-tree',
+    label: '树选择框',
+    name: 'tree',
+    options: [
+      {
+        label: '选项A',
+        value: 'A',
+        children: [
+          {
+            label: '选项C',
+            value: 'C'
+          },
+          {
+            label: '选项D',
+            value: 'D'
+          }
+        ]
+      },
+
+      {
+        label: '选项B',
+        value: 'B'
+      }
+    ]
+  };
+  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('fieldSet', {
+            title: '选项',
+            body: [
+              {
+                $ref: 'options',
+                name: 'options'
+              },
+              getSchemaTpl('source', {
+                sampleBuilder: (schema: any) =>
+                  JSON.stringify(
+                    {
+                      status: 0,
+                      msg: '',
+                      data: {
+                        options: [
+                          {
+                            label: '选项A',
+                            value: 'a',
+                            children: [
+                              {
+                                label: '子选项',
+                                value: 'c'
+                              }
+                            ]
+                          },
+
+                          {
+                            label: '选项B',
+                            value: 'b'
+                          }
+                        ]
+                      }
+                    },
+                    null,
+                    2
+                  )
+              }),
+              {
+                label: '隐藏顶级',
+                name: 'hideRoot',
+                type: 'switch',
+                mode: 'inline',
+                className: 'w-full'
+              },
+              {
+                name: 'showIcon',
+                label: '是否显示图标',
+                type: 'switch',
+                mode: 'inline',
+                className: 'w-full',
+                pipeIn: defaultValue(true)
+              },
+              getSchemaTpl('multiple'),
+              {
+                name: 'cascade',
+                visibleOn: 'data.multiple',
+                label: '不自动选中子节点？',
+                type: 'switch',
+                description: '选中父级时，孩子节点是否自动选中',
+                mode: 'inline',
+                className: 'w-full'
+              },
+              {
+                name: 'withChildren',
+                visibleOn: 'data.cascade !== true && data.multiple',
+                label: '数值是否携带子节点',
+                type: 'switch',
+                disabledOn: 'data.onlyChildren',
+                mode: 'inline',
+                className: 'w-full'
+              },
+              {
+                name: 'onlyChildren',
+                visibleOn: 'data.cascade !== true && data.multiple',
+                label: '数值是否只包含子节点',
+                disabledOn: 'data.withChildren',
+                type: 'switch',
+                mode: 'inline',
+                className: 'w-full'
+              },
+              getSchemaTpl('joinValues'),
+              getSchemaTpl('delimiter'),
+              getSchemaTpl('extractValue'),
+              getSchemaTpl('autoFill')
+            ]
+          })
+        ]
+      },
+      {
+        title: '外观',
+        body: [
+          {
+            label: '顶级文字',
+            name: 'rootLabel',
+            type: 'input-text',
+            pipeIn: defaultValue('顶级'),
+            visibleOn: 'data.hideRoot !== true'
+          },
+
+          {
+            name: 'showIcon',
+            label: '是否显示图标',
+            type: 'switch',
+            mode: 'inline',
+            className: 'w-full',
+            pipeIn: defaultValue(true)
+          },
+
+          {
+            label: '是否显示单选按钮',
+            name: 'showRadio',
+            type: 'switch',
+            mode: 'inline',
+            className: 'w-full',
+            visibleOn: '!data.multiple'
+          }
+        ]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(TreeControlPlugin);

package/src/plugin/Form/InputURL.tsx

@@ -0,0 +1,34 @@
+import {registerEditorPlugin} from '../../manager';
+import {TextControlPlugin} from './InputText';
+
+export class URLControlPlugin extends TextControlPlugin {
+  // 关联渲染器名字
+  rendererName = 'input-url';
+  $schema = '/schemas/TextControlSchema.json';
+  name = 'URL输入框';
+  isBaseComponent = true;
+  icon = 'fa fa-link';
+
+  description = '验证输入是否为合法的 URL';
+  docLink = '/amis/zh-CN/components/form/input-url';
+
+  scaffold = {
+    type: 'input-url',
+    label: '链接',
+    name: 'url'
+  };
+
+  previewSchema = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: {
+      ...this.scaffold
+    }
+  };
+
+  panelTitle = 'URL';
+}
+
+registerEditorPlugin(URLControlPlugin);

package/src/plugin/Form/InputYear.tsx

@@ -0,0 +1,35 @@
+import {registerEditorPlugin} from '../../manager';
+
+import {DateControlPlugin} from './InputDate';
+
+export class YearControlPlugin extends DateControlPlugin {
+  // 关联渲染器名字
+  rendererName = 'input-year';
+  $schema = '/schemas/YearControlSchema.json';
+
+  // 组件名称
+  name = 'Year';
+  isBaseComponent = true;
+  icon = 'fa fa-calendar';
+  description = `年选择`;
+  docLink = '/amis/zh-CN/components/form/input-year';
+  tags = ['表单项'];
+  // @ts-ignore
+  scaffold = {
+    type: 'input-year',
+    name: 'year'
+  };
+  previewSchema: any = {
+    type: 'form',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = 'Year';
+}
+
+registerEditorPlugin(YearControlPlugin);