refactor: refactoring and add typings (#243)

docs/API/createFormActions.md

@@ -12,25 +12,25 @@ interface FormActions {
     setFieldState: (
       name: Path | IFormPathMatcher,
       callback: (fieldState: IFieldState) => void
-    ) => Promise<void>
-    //获取表单字段状态,callback为可选参数
-    getFieldState: (name: Path | IFormPathMatcher, callback: (fieldState: IFieldState) => void) => void
-    getFieldState: (name: Path | IFormPathMatcher) => IFieldState
+    ) => Promise<void> | void
+    //获取表单字段状态
+    getFieldState: (
+      name: Path | IFormPathMatcher, callback?: (fieldState: IFieldState) => void
+    ) => Promise<IFieldState | void> | IFieldState | void
     //设置表单状态，目前只支持设置formState.values
-    setFormState: (callback: (fieldState: IFormState) => void) => Promise<void>
+    setFormState: (callback: (fieldState: IFormState) => void) => Promise<void> | void
     //获取表单状态
-    getFormState: (callback: (fieldState: IFormState) => void) => void
-    getFormState: () => IFormState
+    getFormState: (callback?: (fieldState: IFormState) => void) => Promise<IFormState | void> | (IFormState | void)
     //获取表单Schema
-    getSchema: (path: Path) => ISchema
+    getSchema: (path: Path) => Promise<ISchema> | ISchema
     //重置表单
-    reset: (forceClear?: boolean | { forceClear?: boolean; validate?: boolean },validate : boolean = true) => void
+    reset: (forceClear?: boolean | { forceClear?: boolean; validate?: boolean },validate : boolean = true) => Promise<void> | void
     //提交表单
-    submit: () => Promise<IFormState>
+    submit: () => Promise<IFormState> | IFormState
     //校验表单
-    validate: () => Promise<IFormState>
+    validate: () => Promise<IFormState | IFormState['errors']> | (IFormState | IFormState['errors'])
     //获取表单Schema
-    dispatch: <T = any>(type: string, payload: T) => void
+    dispatch: <T = any>(type: string, payload: T) => Promise<void> | void
 }
 
 type createFormActions: () => FormActions

packages/antd/src/components/button.tsx

@@ -23,7 +23,7 @@ export const Submit = ({ showLoading, ...props }: ISubmitProps) => {
   )
 }
 
-export const Reset = props => {
+export const Reset: React.FC<Omit<ISubmitProps, 'showLoading'>> = props => {
   return (
     <FormConsumer>
       {({ reset }) => {

packages/antd/src/components/formButtonGroup.tsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 import { Row, Col } from './grid'
 import { FormLayoutConsumer } from '../form'
+import { IFormButtonGroupProps } from '../type'
 import Sticky from 'react-stikky'
 import cls from 'classnames'
 import styled from 'styled-components'
@@ -61,20 +62,7 @@ const isElementInViewport = (
   )
 }
 
-export interface IFormButtonGroupProps {
-  sticky?: boolean
-  style?: React.CSSProperties
-  itemStyle?: React.CSSProperties
-  className?: string
-
-  triggerDistance?: any
-  offsetDistance?: any
-  zIndex?: number
-  span?: number
-  offset?: number
-}
-
-export const FormButtonGroup = styled(
+export const FormButtonGroup: React.FC<IFormButtonGroupProps> = styled(
   class FormButtonGroup extends Component<IFormButtonGroupProps> {
     public static defaultProps = {
       span: 24
@@ -112,7 +100,6 @@ export const FormButtonGroup = styled(
                   <Sticky
                     edge={'bottom'}
                     triggerDistance={this.props.triggerDistance}
-                    offsetDistance={this.props.offsetDistance}
                     zIndex={this.props.zIndex}
                     getStickyBoundary={this.getStickyBoundaryHandler(FormRef)}
                     style={{

packages/antd/src/components/layout.tsx

@@ -1,14 +1,20 @@
 import React, { Component, useEffect, useRef } from 'react'
 import { createVirtualBox, createControllerBox } from '@uform/react'
 import { toArr } from '@uform/utils'
-import { IFormItemGridProps } from '@uform/types'
+import { IFormItemGridProps, IFormItemProps } from '@uform/types'
 import { Card, Row, Col } from 'antd'
 import styled from 'styled-components'
 import cls from 'classnames'
 
 import { FormLayoutConsumer, FormItem, FormLayoutProvider } from '../form'
-import { IFormCardProps, IFormBlockProps } from '../type'
-import { TFormLayout } from '../type'
+import {
+  IFormTextBox,
+  IFormCardProps,
+  IFormBlockProps,
+  IFormLayoutProps,
+  TFormCardOrFormBlockProps,
+  IFormItemGridProps as IFormItemGridPropsAlias
+} from '../type'
 
 const normalizeCol = (
   col: { span: number; offset?: number } | number,
@@ -21,7 +27,9 @@ const normalizeCol = (
   }
 }
 
-export const FormLayoutItem = function(props: any) {
+export const FormLayoutItem: React.FC<Partial<IFormItemProps>> = function(
+  props
+) {
   return React.createElement(
     FormLayoutConsumer,
     {},
@@ -50,7 +58,7 @@ export const FormLayoutItem = function(props: any) {
   )
 }
 
-export const FormLayout = createVirtualBox(
+export const FormLayout = createVirtualBox<IFormLayoutProps>(
   'layout',
   ({ children, ...props }) => {
     return (
@@ -77,9 +85,9 @@ export const FormLayout = createVirtualBox(
       </FormLayoutConsumer>
     )
   }
-) as TFormLayout
+)
 
-export const FormItemGrid = createVirtualBox(
+export const FormItemGrid = createVirtualBox<IFormItemGridPropsAlias>(
   'grid',
   class extends Component<IFormItemGridProps> {
     public render() {
@@ -102,7 +110,7 @@ export const FormItemGrid = createVirtualBox(
           extra,
           help,
           ...props
-        },
+        } as IFormItemGridProps,
         children
       )
     }
@@ -158,7 +166,7 @@ export const FormItemGrid = createVirtualBox(
   }
 )
 
-export const FormCard = createVirtualBox(
+export const FormCard = createVirtualBox<TFormCardOrFormBlockProps>(
   'card',
   styled(
     class extends Component<IFormCardProps> {
@@ -187,7 +195,7 @@ export const FormCard = createVirtualBox(
   `
 )
 
-export const FormBlock = createVirtualBox(
+export const FormBlock = createVirtualBox<TFormCardOrFormBlockProps>(
   'block',
   styled(
     class extends Component<IFormBlockProps> {
@@ -228,7 +236,7 @@ export const FormBlock = createVirtualBox(
   `
 )
 
-export const FormTextBox = createControllerBox(
+export const FormTextBox = createControllerBox<IFormTextBox>(
   'text-box',
   styled(({ children, schema, className }) => {
     const { title, help, text, name, extra, ...props } = schema['x-props']

packages/antd/src/index.tsx

@@ -15,12 +15,20 @@ import './fields/table'
 import './fields/textarea'
 import './fields/password'
 import './fields/cards'
-import { mapStyledProps, mapTextComponent } from './utils'
-import { SchemaForm } from '@uform/react'
 
 export * from '@uform/react'
 export * from './components/formButtonGroup'
 export * from './components/button'
 export * from './components/layout'
+
+import { SchemaForm as ReactSchemaForm } from '@uform/react'
+import { mapStyledProps, mapTextComponent } from './utils'
+import { ISchemaFormProps, ISchemaFormExpandProps } from './type'
+
 export { mapStyledProps, mapTextComponent }
+
+export const SchemaForm: React.ComponentClass<
+  ISchemaFormProps & ISchemaFormExpandProps
+> = ReactSchemaForm
+
 export default SchemaForm

packages/antd/src/type.tsx

@@ -1,26 +1,72 @@
-import { IFieldProps } from '@uform/react'
 import { ColProps } from 'antd/es/col'
 import { CardProps } from 'antd/es/card'
 import { BaseButtonProps } from 'antd/es/button/button'
+import { IFormActions, ISchema, IEffects, IFieldError } from '@uform/types'
 
-export interface ISubmitProps extends Omit<BaseButtonProps, 'loading'> {
-  showLoading?: boolean
+export type TTextAlign = 'left' | 'right'
+export type TSize = 'small' | 'medium' | 'large'
+export type TLayout = 'horizontal' | 'vertical' | 'inline'
+export type TTextEl = string | JSX.Element | null
+export type TLabelAlign = 'left' | 'top' | 'inset'
+
+type ColSpanType = number | string
+
+export interface ColSize {
+  span?: ColSpanType
+  offset?: ColSpanType
+}
+
+export interface ISchemaFormExpandProps {
+  autoAddColon?: boolean
+  className?: string
+  inline?: boolean
+  layout?: TLayout
+  maxTipsNum?: number
+  labelAlign?: TLabelAlign
+  labelTextAlign?: TTextAlign
+  labelCol?: ColSize | number
+  wrapperCol?: ColSize | number
+  size?: TSize
+  style?: React.CSSProperties
+  prefix?: string
+}
+
+export interface ILocaleMessages {
+  [key: string]: string | ILocaleMessages
+}
+
+export interface ISchemaFormProps<V = unknown> {
+  actions?: IFormActions
+  initialValues?: V
+  defaultValue?: V
+  value?: V
+  editable?: boolean | ((name: string) => boolean)
+  effects?: IEffects
+  locale?: ILocaleMessages
+  schema?: ISchema
+  onChange?: (values: V) => void
+  onReset?: (values: V) => void
+  onSubmit?: (values: V) => void
+  onValidateFailed?: (fieldErrors: IFieldError[]) => void
 }
 
 export interface IFormLayoutProps {
-  className: string
-  inline: boolean
-  labelAlign: 'left' | 'top' | 'inset'
-  wrapperCol: number
-  labelCol: number
-  labelTextAlign: 'left' | 'right'
-  size: 'small' | 'medium' | 'large'
-  style: React.CSSProperties
-  name: string
-  render: (fieldProps: IFieldProps) => string | JSX.Element | null
+  className?: string
+  inline?: boolean
+  labelAlign?: TLabelAlign
+  wrapperCol?: number
+  labelCol?: number
+  labelTextAlign?: TTextAlign
+  size?: TSize
+  style?: React.CSSProperties
 }
 
-export type TFormLayout = React.FunctionComponent<Partial<IFormLayoutProps>>
+export interface IFormItemGridProps {
+  cols?: Array<number | { span: number; offset: number }>
+  description?: TTextEl
+  gutter?: number
+  title?: TTextEl
+}
 
 export interface IRowProps {
   prefix?: string
@@ -38,13 +84,6 @@ export interface IRowProps {
   children: React.ReactNode
 }
 
-type ColSpanType = number | string
-
-export interface ColSize {
-  span?: ColSpanType
-  offset?: ColSpanType
-}
-
 export interface IColProps extends ColProps {
   prefix: string
   pure?: boolean
@@ -70,3 +109,28 @@ export interface IFormCardProps extends CardProps {
 export interface IFormBlockProps extends CardProps {
   className?: string
 }
+
+export type TFormCardOrFormBlockProps = Omit<CardProps, 'children'>
+
+export interface IFormTextBox {
+  text?: string
+  title?: TTextEl
+  description?: TTextEl
+  gutter?: number
+}
+
+export interface IFormButtonGroupProps {
+  sticky?: boolean
+  style?: React.CSSProperties
+  itemStyle?: React.CSSProperties
+  className?: string
+
+  triggerDistance?: number
+  zIndex?: number
+  span?: number
+  offset?: number
+}
+
+export interface ISubmitProps extends Omit<BaseButtonProps, 'loading'> {
+  showLoading?: boolean
+}

packages/core/src/form.ts

@@ -129,7 +129,7 @@ export class Form {
   public setFieldState = (
     path: Path | IFormPathMatcher,
     callback?: (fieldState: IFieldState) => void
-  ) => {
+  ): Promise<void> => {
     if (this.destructed) {
       return
     }
@@ -519,7 +519,7 @@ export class Form {
     return formState
   }
 
-  public validate() {
+  public validate(): Promise<IFormState | IFormState['errors']> {
     return this.internalValidate(this.state.values, true).then(() => {
       return new Promise((resolve, reject) => {
         this.formNotify()
@@ -541,7 +541,7 @@ export class Form {
   }
 
   public submit() {
-    return this.validate().then(formState => {
+    return this.validate().then((formState: IFormState) => {
       this.dispatchEffect('onFormSubmit', formState)
       if (isFn(this.options.onSubmit)) {
         this.options.onSubmit({ formState })

packages/next/src/components/button.tsx

@@ -1,11 +1,7 @@
 import React from 'react'
 import { FormConsumer } from '@uform/react'
 import { Button } from '@alifd/next'
-import { ButtonProps } from '@alifd/next/types/button'
-
-export interface ISubmitProps extends Omit<ButtonProps, 'loading'> {
-  showLoading?: boolean
-}
+import { ISubmitProps } from '../type'
 
 export const Submit = ({ showLoading, ...props }: ISubmitProps) => {
   return (
@@ -31,7 +27,7 @@ Submit.defaultProps = {
   showLoading: true
 }
 
-export const Reset = (props: ButtonProps) => {
+export const Reset: React.FC<Omit<ISubmitProps, 'showLoading'>> = props => {
   return (
     <FormConsumer>
       {({ reset }) => {