amis-editor 4.2.0-beta.0 → 5.1.8

package/src/plugin/Form/InputText.tsx

@@ -3,30 +3,54 @@ import {
   BasePlugin,
   BasicSubRenderInfo,
   RendererEventContext,
-  SubRendererInfo
+  SubRendererInfo,
+  BaseEventContext
 } from '../../plugin';
-import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {
+  defaultValue,
+  getSchemaTpl,
+  setSchemaTpl
+} from '../../component/schemaTpl';
+import {ValidatorTag} from '../../component/validator';
+import {tipedLabel} from '../../component/control/BaseControl';
+import {getEventControlConfig} from '../../util';
+
+const isText = 'data.type === "input-text"';
+const isPassword = 'data.type === "input-password"';
+const isEmail = 'data.type === "input-email"';
+const isUrl = 'data.type === "input-url"';
+function isTextShow(value: string, name: boolean): boolean {
+  return ['input-text'].includes(value) ? !!name : false;
+}
 
 export class TextControlPlugin extends BasePlugin {
   // 关联渲染器名字
   rendererName = 'input-text';
+
   $schema = '/schemas/TextControlSchema.json';
 
   order = -500;
-
+  // 添加源对应组件中文名称 & type字段
+  searchKeywords =
+    '文本框、邮箱框、input-email、URL框、input-url、密码框、input-password';
   // 组件名称
   name = '文本框';
+
   isBaseComponent = true;
   icon = 'fa fa-terminal';
-  description =
-    '配置<code>options</code>可以实现选择选项，效果同<code>select</code>';
-  docLink = '/amis/zh-CN/components/form/input-text';
+
+  description = '文本输入框，支持普通文本、密码、URL、邮箱等多种内容输入';
+
+  docLink = '/amis/zh-CN/components/form/text';
+
   tags = ['表单项'];
+
   scaffold = {
     type: 'input-text',
     label: '文本',
     name: 'text'
   };
+
   previewSchema: any = {
     type: 'form',
     className: 'text-left',
@@ -39,148 +63,302 @@ export class TextControlPlugin extends BasePlugin {
     ]
   };
 
+  notRenderFormZone = true;
+
   panelTitle = '文本框';
-  panelBody = [
-    getSchemaTpl('switchDefaultValue'),
-    {
-      type: 'input-text',
-      name: 'value',
-      label: '默认值',
-      visibleOn: 'typeof this.value !== "undefined"'
-    },
-    getSchemaTpl('hint'),
-    getSchemaTpl('showCounter'),
 
+  events = [
+    // {
+    //   eventName: 'click',
+    //   eventLabel: '点击',
+    //   description: '点击事件'
+    // },
     {
-      name: 'addOn',
-      label: '启用 addOn',
-      type: 'switch',
-      mode: 'inline',
-      className: 'w-full',
-      pipeIn: (value: any) => !!value,
-      pipeOut: (value: any) =>
-        value
-          ? {
-              label: '按钮',
-              type: 'button'
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '输入框内容变化',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '输入值'
             }
-          : null
+          }
+        }
+      ]
     },
-
     {
-      type: 'combo',
-      multiLine: true,
-      name: 'addOn',
-      visibleOn: 'data.addOn',
-      items: [
+      eventName: 'focus',
+      eventLabel: '获取焦点',
+      description: '输入框获取焦点',
+      dataSchema: [
         {
-          name: 'type',
-          label: '类型',
-          type: 'button-group-select',
-          size: 'xs',
-          options: [
-            {
-              label: '文本',
-              value: 'text'
-            },
-
-            {
-              label: '按钮',
-              value: 'button'
-            },
-
-            {
-              label: '提交',
-              value: 'submit'
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '输入值'
             }
-          ]
-        },
-
-        {
-          name: 'label',
-          label: '文字',
-          type: 'input-text',
-          visibleOn: 'this.type === "text"'
-        },
-
-        {
-          name: 'icon',
-          label: 'Icon',
-          type: 'icon-picker',
-          visibleOn: 'this.type === "text"'
-        },
-
-        getSchemaTpl('className', {
-          visibleOn: 'this.type === "text"'
-        }),
-
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'blur',
+      eventLabel: '失去焦点',
+      description: '输入框失去焦点',
+      dataSchema: [
         {
-          name: 'position',
-          label: '位置',
-          type: 'button-group-select',
-          size: 'xs',
-          pipeIn: defaultValue('right'),
-          options: [
-            {
-              label: '左边',
-              value: 'left'
-            },
-
-            {
-              label: '右边',
-              value: 'right'
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '输入值'
             }
-          ]
+          }
         }
       ]
-    },
+    }
+    // 貌似无效，先下掉
+    // {
+    //   eventName: 'enter',
+    //   eventLabel: '回车',
+    //   description: '按键回车'
+    // }
+  ];
 
+  actions = [
     {
-      name: 'autoComplete',
-      label: '自动补全',
-      mode: 'inline',
-      className: 'w-full',
-      type: 'switch',
-      pipeIn: (value: any) => value !== false,
-      pipeOut: (value: any) => (value ? '' : false),
-      onChange: (value: any, oldValue: any, model: any, form: any) => {
-        if (oldValue === '' || oldValue) {
-          form.setValues({
-            __options: form.data.options,
-            options: []
-          });
-        } else {
-          form.setValues({
-            options: form.data.__options
-          });
-        }
-      }
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清空输入框内容'
     },
-
-    getSchemaTpl('options', {
-      visibleOn: 'data.autoComplete !== false',
-      description: '设置选项后，输入时会下拉这些选项供用户参考。'
-    }),
-
-    getSchemaTpl('source', {
-      visibleOn: 'data.autoComplete !== false'
-    }),
-
-    getSchemaTpl('api', {
-      name: 'autoComplete',
-      label: '自动补全接口',
-      description:
-        '每次输入新内容后，将调用接口，根据接口返回更新选项。当前用户输入值在 `\\${term}` 中。',
-      visibleOn: 'data.autoComplete !== false'
-    }),
-    getSchemaTpl('multiple', {
-      visibleOn: 'data.options || data.source || data.autoComplete'
-    }),
-    getSchemaTpl('joinValues'),
-    getSchemaTpl('delimiter'),
-    getSchemaTpl('extractValue'),
-    getSchemaTpl('autoFill')
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'reload',
+      actionLabel: '重新加载',
+      description: '触发组件数据刷新并重新渲染'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
   ];
+
+  panelJustify = true;
+
+  panelBodyCreator = (context: BaseEventContext) => {
+    const renderer: any = context.info.renderer;
+
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              getSchemaTpl('formItemName', {
+                required: true
+              }),
+              getSchemaTpl('label'),
+              getSchemaTpl('inputType', {
+                value: this.scaffold.type,
+                onChange: (
+                  value: string,
+                  oldValue: string,
+                  model: any,
+                  form: any
+                ) => {
+                  const {
+                    showCounter,
+                    validations,
+                    validationErrors = {},
+                    autoComplete
+                  } = form.data;
+
+                  const is_old_email = oldValue === 'input-email';
+                  const is_old_url = oldValue === 'input-url';
+
+                  if (is_old_email) {
+                    validations && delete validations.isEmail;
+                    validationErrors && delete validationErrors.isEmail;
+                  }
+
+                  if (is_old_url) {
+                    validations && delete validations.isUrl;
+                    validationErrors && delete validationErrors.isUrl;
+                  }
+
+                  form.setValues({
+                    type: value,
+                    showCounter: ['input-url', 'input-email'].includes(value)
+                      ? undefined
+                      : !!showCounter,
+                    autoComplete: ['input-text'].includes(value)
+                      ? autoComplete
+                      : undefined
+                  });
+                  form.changeValue('validations', {...validations});
+                  form.changeValue('validationErrors', {...validationErrors});
+                }
+              }),
+              getSchemaTpl('value'),
+              getSchemaTpl('clearable'),
+              // getSchemaTpl('multiple',{
+              //   visibleOn: `${isText} || ${isUrl}`
+              // }),
+              getSchemaTpl('showCounter', {
+                visibleOn: `${isText} || ${isPassword}`
+              }),
+              {
+                name: 'addOn',
+                label: tipedLabel('AddOn', '输入框左侧或右侧的附加挂件'),
+                type: 'ae-Switch-More',
+                mode: 'normal',
+                formType: 'extend',
+                title: 'AddOn',
+                bulk: false,
+                defaultData: {
+                  label: '按钮',
+                  type: 'button'
+                },
+                form: {
+                  body: [
+                    {
+                      name: 'type',
+                      label: '类型',
+                      type: 'button-group-select',
+                      inputClassName: 'items-center',
+                      pipeIn: defaultValue('button'),
+                      options: [
+                        {
+                          label: '文本',
+                          value: 'text'
+                        },
+
+                        {
+                          label: '按钮',
+                          value: 'button'
+                        },
+
+                        {
+                          label: '提交',
+                          value: 'submit'
+                        }
+                      ]
+                    },
+                    getSchemaTpl('horizontal-align', {
+                      name: 'position',
+                      pipeIn: defaultValue('right')
+                    }),
+                    {
+                      name: 'label',
+                      label: '文字',
+                      type: 'input-text'
+                    },
+                    getSchemaTpl('icon')
+                  ]
+                }
+              },
+
+              // {
+              //   type: 'ae-Switch-More',
+              //   mode: 'normal',
+              //   label: tipedLabel(
+              //     '自动补全',
+              //     '根据输入内容，调用接口提供选项。当前输入值可用${term}变量'
+              //     ),
+              //   visibleOn: isText,
+              //   formType: 'extend',
+              //   defaultData: {
+              //     autoComplete: {
+              //       method: 'get',
+              //       url: ''
+              //     }
+              //   },
+              //   form: {
+              //     body: [
+              //       getSchemaTpl('apiControl', {
+              //         name: 'autoComplete',
+              //         label: '接口',
+              //         description: '',
+              //         visibleOn: 'data.autoComplete !== false',
+              //         footer: []
+              //       })
+              //     ]
+              //   }
+              // },
+              getSchemaTpl('labelRemark'),
+              getSchemaTpl('remark'),
+              getSchemaTpl('placeholder'),
+              getSchemaTpl('description')
+            ]
+          },
+          getSchemaTpl('status', {
+            isFormItem: true,
+            readonly: true
+          }),
+          getSchemaTpl('validation', {
+            tag: (data: any) => {
+              switch (data.type) {
+                case 'input-password':
+                  return ValidatorTag.Password;
+                case 'input-email':
+                  return ValidatorTag.Email;
+                case 'input-url':
+                  return ValidatorTag.URL;
+                default:
+                  return ValidatorTag.Text;
+              }
+            }
+          })
+          // {
+          //   title: '高级',
+          //   body: [
+          //     getSchemaTpl('autoFill')
+          //   ]
+          // }
+        ])
+      },
+      {
+        title: '外观',
+        body: getSchemaTpl('collapseGroup', [
+          getSchemaTpl('style:formItem', {renderer}),
+          getSchemaTpl('style:classNames', {
+            schema: [
+              getSchemaTpl('className', {
+                label: '描述',
+                name: 'descriptionClassName',
+                visibleOn: 'this.description'
+              }),
+              getSchemaTpl('className', {
+                name: 'addOn.className',
+                label: 'AddOn',
+                visibleOn: 'this.addOn && this.addOn.type === "text"'
+              })
+            ]
+          })
+        ])
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+  };
 }
 
 registerEditorPlugin(TextControlPlugin);

package/src/plugin/Form/InputTime.tsx

@@ -1,9 +1,7 @@
-import {relativeValueRe} from 'amis';
-import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {BasePlugin} from '../../plugin';
+import {DateControlPlugin} from './InputDate';
 
-export class TimeControlPlugin extends BasePlugin {
+export class TimeControlPlugin extends DateControlPlugin {
   // 关联渲染器名字
   rendererName = 'input-time';
   $schema = '/schemas/TimeControlSchema.json';
@@ -20,6 +18,8 @@ export class TimeControlPlugin extends BasePlugin {
     label: '时间',
     name: 'time'
   };
+
+  disabledRendererPlugin = true;
   previewSchema: any = {
     type: 'form',
     className: 'text-left',
@@ -31,55 +31,6 @@ export class TimeControlPlugin extends BasePlugin {
   };
 
   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/InputTimeRange.tsx

@@ -0,0 +1,41 @@
+import {registerEditorPlugin} from '../../manager';
+
+import {DateRangeControlPlugin} from './InputDateRange';
+
+export class TimeRangeControlPlugin extends DateRangeControlPlugin {
+  // 关联渲染器名字
+  rendererName = 'input-time-range';
+  $schema = '/schemas/DateRangeControlSchema.json';
+
+  order = -440;
+
+  // 组件名称
+  icon = 'fa fa-calendar';
+  name = '日期范围';
+  isBaseComponent = true;
+  description =
+    '时间范围选择，可通过<code>minDate</code>、<code>maxDate</code>设定最小、最大日期';
+  docLink = '/amis/zh-CN/components/form/time-range';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-time-range',
+    label: '日期范围',
+    name: 'time-range'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  disabledRendererPlugin = true;
+  notRenderFormZone = true;
+}
+
+registerEditorPlugin(TimeRangeControlPlugin);