feat(form): 增加 taro components 属性的支持,抽象类型 (#3182)

Author: oasis-cloud

src/packages/form/form.taro.tsx

@@ -1,25 +1,11 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
 import classNames from 'classnames'
-import { Form as TForm, FormProps as TFormProps } from '@tarojs/components'
+import { Form as TForm } from '@tarojs/components'
 import { Context } from './context'
 import { SECRET, useForm } from './useform.taro'
 import { ComponentDefaults } from '@/utils/typings'
 import Cell from '@/packages/cell/index.taro'
-import { FormInstance } from '@/packages/form/types'
-
-export interface FormProps extends TFormProps {
-  footer: ReactNode
-  initialValues: any
-  name: string
-  form: any
-  disabled: boolean
-  divider: boolean
-  validateTrigger: string | string[] | false
-  labelPosition: 'top' | 'left' | 'right'
-  starPosition: 'left' | 'right'
-  onFinish: (values: any) => void
-  onFinishFailed: (values: any, errorFields: any) => void
-}
+import { TaroFormProps, FormInstance } from '@/types'
 
 const defaultProps = {
   ...ComponentDefaults,
@@ -28,17 +14,19 @@ const defaultProps = {
   disabled: false,
   divider: false,
   validateTrigger: 'onChange',
+  onReset: () => {},
+  onSubmit: () => {},
   onFinish: (values) => {},
   onFinishFailed: (values, errorFields) => {},
-} as FormProps
+} as TaroFormProps
 
 const PositionInfo: any = {
   top: 'form-layout-top',
   left: 'form-layout-left',
   right: 'form-layout-right',
 }
 
-export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
+export const Form = React.forwardRef<FormInstance, Partial<TaroFormProps>>(
   (props, ref) => {
     const classPrefix = 'nut-form'
     const {
@@ -54,6 +42,8 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
       validateTrigger,
       labelPosition,
       starPosition,
+      onReset,
+      onSubmit,
       form,
       ...rest
     } = {
@@ -97,11 +87,13 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
           e.preventDefault()
           e.stopPropagation()
           submit()
+          onSubmit?.()
         }}
         onReset={(e) => {
           e.preventDefault()
           e.stopPropagation()
           resetFields()
+          onReset?.()
         }}
       >
         <Cell.Group divider={divider}>

src/packages/form/form.tsx

@@ -1,24 +1,10 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
 import classNames from 'classnames'
 import { Context } from './context'
 import { SECRET, useForm } from './useform'
-import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { ComponentDefaults } from '@/utils/typings'
 import Cell from '@/packages/cell'
-import { FormInstance } from '@/packages/form/types'
-
-export interface FormProps extends BasicComponent {
-  footer: ReactNode
-  initialValues: any
-  name: string
-  form: any
-  disabled: boolean
-  divider: boolean
-  validateTrigger: string | string[] | false
-  labelPosition: 'top' | 'left' | 'right'
-  starPosition: 'left' | 'right'
-  onFinish: (values: any) => void
-  onFinishFailed: (values: any, errorFields: any) => void
-}
+import { WebFormProps, FormInstance } from '@/types'
 
 const defaultProps = {
   ...ComponentDefaults,
@@ -27,17 +13,19 @@ const defaultProps = {
   disabled: false,
   divider: false,
   validateTrigger: 'onChange',
+  onReset: () => {},
+  onSubmit: () => {},
   onFinish: (values) => {},
   onFinishFailed: (values, errorFields) => {},
-} as FormProps
+} as WebFormProps
 
 const PositionInfo: any = {
   top: 'form-layout-top',
   left: 'form-layout-left',
   right: 'form-layout-right',
 }
 
-export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
+export const Form = React.forwardRef<FormInstance, Partial<WebFormProps>>(
   (props, ref) => {
     const classPrefix = 'nut-form'
     const {
@@ -50,6 +38,8 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
       disabled,
       onFinish,
       onFinishFailed,
+      onSubmit,
+      onReset,
       validateTrigger,
       labelPosition,
       starPosition,
@@ -94,11 +84,13 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
           e.preventDefault()
           e.stopPropagation()
           submit()
+          onSubmit?.()
         }}
         onReset={(e) => {
           e.preventDefault()
           e.stopPropagation()
           resetFields()
+          onReset?.()
         }}
       >
         <Cell.Group divider={divider}>

src/packages/form/index.taro.ts

@@ -1,20 +1,20 @@
 import React from 'react'
-import { Form, FormProps } from './form.taro'
+import { Form } from './form.taro'
 import { FormItem } from '../formitem/formitem.taro'
-import { FormInstance } from './types'
 import { useForm, useWatch } from '@/packages/form/useform.taro'
+import { FormInstance, TaroFormProps } from '@/types'
 
-export type { FormProps } from './form.taro'
 export type {
   FormItemRuleWithoutValidator,
   FormInstance,
   FormFieldEntity,
   NamePath,
   Store,
-} from './types'
+  TaroFormProps as FormProps,
+} from '@/types'
 
 type CompoundedComponent = React.ForwardRefExoticComponent<
-  Partial<FormProps> &
+  Partial<TaroFormProps> &
     Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> &
     React.RefAttributes<FormInstance>
 > & {

src/packages/form/index.ts

@@ -1,20 +1,20 @@
 import React from 'react'
-import { Form, FormProps } from './form'
+import { Form } from './form'
 import { FormItem } from '../formitem/formitem'
-import { FormInstance } from './types'
 import { useForm, useWatch } from '@/packages/form/useform'
+import { FormInstance, WebFormProps } from '@/types'
 
-export type { FormProps } from './form'
 export type {
   FormItemRuleWithoutValidator,
   FormInstance,
   FormFieldEntity,
   NamePath,
   Store,
-} from './types'
+  WebFormProps as FormProps,
+} from '@/types'
 
 type CompoundedComponent = React.ForwardRefExoticComponent<
-  Partial<FormProps> &
+  Partial<WebFormProps> &
     Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> &
     React.RefAttributes<FormInstance>
 > & {

src/packages/form/types.ts

@@ -7,7 +7,7 @@ import {
   FormInstance,
   NamePath,
   Store,
-} from './types'
+} from '@/types'
 
 export const SECRET = 'NUT_FORM_INTERNAL'
 type UpdateItem = { entity: FormFieldEntity; condition: any }

src/packages/form/useform.taro.ts

@@ -7,7 +7,7 @@ import {
   FormInstance,
   NamePath,
   Store,
-} from './types'
+} from '@/types'
 
 export const SECRET = 'NUT_FORM_INTERNAL'
 type UpdateItem = { entity: FormFieldEntity; condition: any }

src/packages/form/useform.ts

@@ -1,43 +1,12 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
 import { Text, View } from '@tarojs/components'
-import { BaseFormField } from './types'
 import { Context } from '../form/context'
 import Cell from '@/packages/cell/index.taro'
-import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { ComponentDefaults } from '@/utils/typings'
 import { isForwardRefComponent } from '@/utils/is-forward-ref-component'
 import { toArray } from '@/utils/to-array'
 import { SECRET } from '@/packages/form/useform.taro'
-
-type TextAlign =
-  | 'start'
-  | 'end'
-  | 'left'
-  | 'right'
-  | 'center'
-  | 'justify'
-  | 'match-parent'
-
-type ShouldUpdate = (prevValue: any, curValue: any) => boolean
-
-export interface FormItemProps
-  extends Omit<BasicComponent, 'children'>,
-    BaseFormField {
-  required: boolean
-  initialValue: any
-  trigger: string
-  valuePropName: string
-  getValueFromEvent: (...args: any) => any
-  onClick: (
-    event: React.MouseEvent,
-    componentRef: React.MutableRefObject<any>
-  ) => void
-  errorMessageAlign: TextAlign
-  validateTrigger: string | string[]
-  shouldUpdate: boolean
-  noStyle: boolean
-  children: ReactNode | ((obj: any) => React.ReactNode)
-  align?: 'flex-start' | 'center' | 'flex-end'
-}
+import { TaroFormItemProps } from '@/types'
 
 const defaultProps = {
   ...ComponentDefaults,
@@ -48,10 +17,10 @@ const defaultProps = {
   errorMessageAlign: 'left',
   shouldUpdate: false,
   noStyle: false,
-} as FormItemProps
+} as TaroFormItemProps
 
 export class FormItem extends React.Component<
-  Partial<FormItemProps>,
+  Partial<TaroFormItemProps>,
   { resetCount: number }
 > {
   static defaultProps = defaultProps
@@ -66,7 +35,7 @@ export class FormItem extends React.Component<
 
   private eventOff: any
 
-  constructor(props: FormItemProps) {
+  constructor(props: TaroFormItemProps) {
     super(props)
     this.componentRef = React.createRef()
     this.state = {

src/packages/formitem/formitem.taro.tsx

@@ -1,11 +1,11 @@
-import React, { ReactNode } from 'react'
-import { BaseFormField } from './types'
+import React from 'react'
 import { Context } from '../form/context'
 import Cell from '@/packages/cell'
-import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { ComponentDefaults } from '@/utils/typings'
 import { isForwardRefComponent } from '@/utils/is-forward-ref-component'
 import { toArray } from '@/utils/to-array'
 import { SECRET } from '@/packages/form/useform'
+import { WebFormItemProps } from '@/types'
 
 type TextAlign =
   | 'start'
@@ -16,28 +16,6 @@ type TextAlign =
   | 'justify'
   | 'match-parent'
 
-type ShouldUpdate = (prevValue: any, curValue: any) => boolean
-
-export interface FormItemProps
-  extends Omit<BasicComponent, 'children'>,
-    BaseFormField {
-  required: boolean
-  initialValue: any
-  trigger: string
-  valuePropName: string
-  getValueFromEvent: (...args: any) => any
-  onClick: (
-    event: React.MouseEvent,
-    componentRef: React.MutableRefObject<any>
-  ) => void
-  errorMessageAlign: TextAlign
-  validateTrigger: string | string[]
-  shouldUpdate: boolean
-  noStyle: boolean
-  children: ReactNode | ((obj: any) => React.ReactNode)
-  align?: 'flex-start' | 'center' | 'flex-end'
-}
-
 const defaultProps = {
   ...ComponentDefaults,
   required: false,
@@ -47,10 +25,10 @@ const defaultProps = {
   errorMessageAlign: 'left',
   shouldUpdate: false,
   noStyle: false,
-} as FormItemProps
+} as WebFormItemProps
 
 export class FormItem extends React.Component<
-  Partial<FormItemProps>,
+  Partial<WebFormItemProps>,
   { resetCount: number }
 > {
   static defaultProps = defaultProps
@@ -65,7 +43,7 @@ export class FormItem extends React.Component<
 
   private eventOff: any
 
-  constructor(props: FormItemProps) {
+  constructor(props: WebFormItemProps) {
     super(props)
     this.componentRef = React.createRef()
     this.state = {