diff --git a/apps/storybook/src/setting-form.stories.tsx b/apps/storybook/src/setting-form.stories.tsx index 4061a383..cccb4148 100644 --- 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 index 1ab4e757..05eae644 100644 --- 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; + /** * 组件属性类型 */ @@ -107,6 +116,10 @@ export interface IComponentProp { * 动态设置表单项是否展示 */ getVisible?: (form: any) => boolean; + /** + * 表单值校验逻辑 + */ + validate?: ComponentPropValidate; /** * 标记属性是否已废弃 */ diff --git a/packages/setting-form/src/form-item.tsx b/packages/setting-form/src/form-item.tsx index 92b7a856..54082280 100644 --- 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; + 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(