feat: support validate on formItem (#145)

Co-authored-by: ccloli <8115912+ccloli@users.noreply.github.com>
NetEase · May 8, 2024 · f7c837a · f7c837a
1 parent f64d178
commit f7c837a
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 3 deletions.
diff --git a/apps/storybook/src/setting-form.stories.tsx b/apps/storybook/src/setting-form.stories.tsx
@@ -4,6 +4,7 @@ import { IComponentPrototype } from '@music163/tango-helpers';
 import { BorderSetter, DisplaySetter } from '@music163/tango-designer/src/setters/style-setter';
 import { JsxSetter } from '@music163/tango-designer/src/setters/jsx-setter';
 import { RenderSetter, TableCellSetter } from '@music163/tango-designer/src/setters/render-setter';
+import { NumberSetter } from '@music163/tango-designer/src/setters/number-setter';
 import { Box } from 'coral-system';
 import { JsonView } from '@music163/tango-ui';
 import { toJS } from 'mobx';
@@ -37,6 +38,11 @@ register({
   component: TableCellSetter,
 });
 
+register({
+  name: 'numberSetter',
+  component: NumberSetter,
+});
+
 createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/c/font_2891794_cou9i7556tl.js',
 });
@@ -274,6 +280,22 @@ const prototype: IComponentPrototype = {
       title: 'invalidSetter',
       setter: 'invalidSetter',
     },
+    {
+      name: 'validate',
+      title: 'validate',
+      setter: 'numberSetter',
+      validate: (value) => {
+        if (!value && value !== 0) {
+          return '必填';
+        }
+        if (value < 0) {
+          return '必须大于 0';
+        }
+        if (value > 10) {
+          return '必须小于等于 10';
+        }
+      },
+    },
   ],
 };
 

diff --git a/packages/helpers/src/types/prototype.ts b/packages/helpers/src/types/prototype.ts
@@ -19,6 +19,15 @@ export type ComponentDndRulesType = IComponentDndRules;
  */
 export type ComponentPrototypeType = IComponentPrototype;
 
+/**
+ * 组件校验规则
+ */
+export type ComponentPropValidate = (
+  value: any,
+  field: any,
+  trigger: string,
+) => string | Promise<string>;
+
 /**
  * 组件属性类型
  */
@@ -107,6 +116,10 @@ export interface IComponentProp<T = any> {
    * 动态设置表单项是否展示
    */
   getVisible?: (form: any) => boolean;
+  /**
+   * 表单值校验逻辑
+   */
+  validate?: ComponentPropValidate;
   /**
    * 标记属性是否已废弃
    */

diff --git a/packages/setting-form/src/form-item.tsx b/packages/setting-form/src/form-item.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import { clone, IComponentProp, useBoolean } from '@music163/tango-helpers';
+import { clone, ComponentPropValidate, IComponentProp, useBoolean } from '@music163/tango-helpers';
 import { isWrappedByExpressionContainer } from '@music163/tango-core';
 import { ToggleButton, CodeOutlined } from '@music163/tango-ui';
 import { InputProps } from 'antd';
@@ -58,7 +58,7 @@ export interface IFormItemCreateOptions {
   /**
    * 默认的表单值校验逻辑
    */
-  validate?: (value: string) => string | Promise<any>;
+  validate?: ComponentPropValidate;
 }
 
 const defaultGetSetterProps = () => ({});
@@ -86,6 +86,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
     extra,
     footer,
     noStyle,
+    validate,
   }: FormItemProps) {
     const { disableSwitchExpressionSetter, showItemSubtitle } = useFormVariable();
     const model = useFormModel();
@@ -99,7 +100,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
     const setterName = isVariable ? 'expressionSetter' : setter;
 
     field.setConfig({
-      validate: options.validate,
+      validate: validate || options.validate,
     });
 
     const baseComponentProps = clone(