refactor: next in TypeScript (#206)

packages/antd/package.json

@@ -29,6 +29,7 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
+    "@uform/types": "^0.3.7",
     "@uform/react": "^0.3.7",
     "@uform/utils": "^0.3.7",
     "classnames": "^2.2.6",
@@ -40,4 +41,4 @@
     "access": "public"
   },
   "gitHead": "4d068dad6183e8da294a4c899a158326c0b0b050"
-}
+}

packages/antd/src/components/button.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { FormConsumer } from '@uform/react'
 import { Button } from 'antd'
-import { ISubmitProps } from '../types/components/button'
+import { ISubmitProps } from '../type'
 
 export const Submit = ({ showLoading, ...props }: ISubmitProps) => {
   return (

packages/antd/src/components/grid.tsx

@@ -57,6 +57,7 @@ export class Row extends Component<IRowProps> {
 
     let newChildren = toArr(children)
     const gutterNumber = parseInt(gutter, 10)
+
     if (gutterNumber !== 0) {
       const halfGutterString = `${gutterNumber / 2}px`
       others.style = {

packages/antd/src/components/layout.tsx

@@ -1,25 +1,14 @@
 import React, { Component, useEffect, useRef } from 'react'
 import { createVirtualBox } from '@uform/react'
 import { toArr } from '@uform/utils'
+import { IFormItemGridProps } 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 { IFormItemGridProps, IFormCardProps, IFormBlockProps } from '../type'
-import { TFormLayout } from '../types/components/layout'
-
-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
-  children: React.ReactNode
-}
+import { IFormCardProps, IFormBlockProps } from '../type'
+import { TFormLayout } from '../type'
 
 const normalizeCol = (
   col: { span: number; offset?: number } | number,

packages/antd/src/fields/array.tsx

@@ -3,7 +3,7 @@ import { registerFormField, createArrayField } from '@uform/react'
 import { Icon } from 'antd'
 import styled, { css } from 'styled-components'
 
-export const CircleButton = styled.div.attrs({ className: 'cricle-btn' })`
+export const CircleButton = styled['div'].attrs({ className: 'cricle-btn' })`
   ${props => (!props.hasText ? 'width:30px; height:30px;' : '')}
   margin-right:10px;
   border-radius: ${props => (!props.hasText ? '100px' : 'none')};
@@ -25,7 +25,7 @@ export const CircleButton = styled.div.attrs({ className: 'cricle-btn' })`
 }
 `
 
-export const TextButton = styled.div.attrs({
+export const TextButton = styled['div'].attrs({
   className: 'ant-btn-text'
 })`
   display: inline-block;

packages/antd/src/fields/table.tsx

@@ -228,17 +228,20 @@ const Table = styled(
     }
 
     public getColumns(children) {
-      const columns = []
-      React.Children.forEach(children, child => {
-        if (React.isValidElement(child as React.ReactElement)) {
-          if (
-            child.type === Column ||
-            child.type.displayName === '@schema-table-column'
-          ) {
-            columns.push(child.props)
+      const columns: IColumnProps[] = []
+      React.Children.forEach<React.ReactElement<IColumnProps, typeof Column>>(
+        children,
+        child => {
+          if (React.isValidElement(child)) {
+            if (
+              child.type === Column ||
+              child.type.displayName === '@schema-table-column'
+            ) {
+              columns.push(child.props)
+            }
           }
         }
-      })
+      )
 
       return columns
     }

packages/antd/src/form.tsx

@@ -1,16 +1,15 @@
 import React from 'react'
-import { registerFormWrapper, registerFieldMiddleware } from '@uform/react'
 import classNames from 'classnames'
 import { Row, Col, Popover, Icon } from 'antd'
 import styled from 'styled-components'
+import { registerFormWrapper, registerFieldMiddleware } from '@uform/react'
+import { IFormItemProps, IFormProps } from '@uform/types'
 
 import LOCALE from './locale'
 import { isFn, moveTo, isStr, stringLength } from './utils'
-import { IFormItemProps, IFormProps } from './type'
 
 /**
  * 轻量级 Form，不包含任何数据管理能力
- *
  */
 
 export const {

packages/antd/src/type.tsx

@@ -1,119 +1,72 @@
-import { ISchema } from '@uform/utils'
-// import { ColProps } from 'antd/lib/grid/col'
+import { IFieldProps } from '@uform/react'
+import { ColProps } from 'antd/es/col'
+import { CardProps } from 'antd/es/card'
+import { BaseButtonProps } from 'antd/es/button/button'
 
-export enum LabelAlign {
-  TOP = 'top',
-  INSET = 'inset',
-  LEFT = 'left'
+export interface ISubmitProps extends Omit<BaseButtonProps, 'loading'> {
+  showLoading?: boolean
 }
 
-export enum LabelTextAlign {
-  LEFT = 'left',
-  RIGHT = 'right'
-}
-
-export enum Size {
-  LARGE = 'large',
-  MEDIUM = 'medium',
-  SMALL = 'small'
-}
-
-export interface IFormConsumerProps {
-  // labelCol: ColProps | number
-  labelCol: object | number
-  wrapperCol: object | number
-  autoAddColon: boolean
-  size: Size
+export interface IFormLayoutProps {
+  className: string
   inline: boolean
-  labelAlign: LabelAlign
-  labelTextAlign: LabelTextAlign
+  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
 }
 
+export type TFormLayout = React.FunctionComponent<Partial<IFormLayoutProps>>
+
 export interface IRowProps {
   prefix?: string
   pure?: boolean
   wrap?: boolean
   fixed?: boolean
   hidden?: boolean
-  gutter?: string
   className?: string
-
-  // TODO
   fixedWidth?: string | number
-  style?: object
+  style?: React.CSSProperties
+  component?: keyof JSX.IntrinsicElements | React.ComponentType<any>
+  gutter?: string
   align?: string | number
   justify?: string | number
-  component?: any
   children: React.ReactNode
 }
 
-export interface IColProps {
+type ColSpanType = number | string
+
+export interface ColSize {
+  span?: ColSpanType
+  offset?: ColSpanType
+}
+
+export interface IColProps extends ColProps {
   prefix: string
   pure?: boolean
   className?: string
-  span?: string | number
-  offset?: string | number
   fixedSpan?: string | number
   fixedOffset?: string | number
   hidden?: boolean
-
-  // TODO
   align?: any
-  xxs?: any
-  xs?: any
-  s?: any
-  m?: any
-  l?: any
-  xl?: any
-  component?: any
+  component?: keyof JSX.IntrinsicElements | React.ComponentType<any>
   children?: React.ReactNode
+  xxs?: ColSpanType | ColSize
+  xs?: ColSpanType | ColSize
+  s?: ColSpanType | ColSize
+  m?: ColSpanType | ColSize
+  l?: ColSpanType | ColSize
+  xl?: ColSpanType | ColSize
 }
 
-export interface IFormItemGridProps {
-  name?: string
-  help?: React.ReactNode
-  extra?: React.ReactNode
-  description?: string
-  title?: string
-  cols?: any
-}
-
-export interface IFormCardProps {
+export interface IFormCardProps extends CardProps {
   className?: string
 }
 
-export interface IFormBlockProps {
+export interface IFormBlockProps extends CardProps {
   className?: string
 }
-
-export interface IFormProps extends IFormConsumerProps {
-  className: string
-  style: object
-  layout: string
-  children: React.ReactNode
-  component: string
-  prefix: string
-  maxTipsNum: number
-  onValidateFailed: () => void
-}
-
-export interface IFormItemProps extends IFormConsumerProps {
-  id: string
-  required: boolean
-  label: React.ReactNode
-  prefix: string
-  extra: object
-  maxTipsNum: number
-
-  // TODO
-  validateState: any
-
-  isTableColItem: boolean
-  help: React.ReactNode
-  noMinHeight: boolean
-  children: React.ReactElement
-  className: string
-  style: object
-  type: string
-  schema: ISchema
-}

packages/next/package.json

@@ -25,6 +25,7 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
+    "@uform/types": "^0.3.7",
     "@uform/react": "^0.3.7",
     "@uform/utils": "^0.3.7",
     "classnames": "^2.2.6",
@@ -40,4 +41,4 @@
     "access": "public"
   },
   "gitHead": "4d068dad6183e8da294a4c899a158326c0b0b050"
-}
+}

packages/next/src/components/button.js → packages/next/src/components/button.tsx

@@ -1,8 +1,13 @@
 import React from 'react'
 import { FormConsumer } from '@uform/react'
 import { Button } from '@alifd/next'
+import { ButtonProps } from '@alifd/next/types/button'
 
-export const Submit = ({ showLoading, ...props }) => {
+export interface ISubmitProps extends Omit<ButtonProps, 'loading'> {
+  showLoading?: boolean
+}
+
+export const Submit = ({ showLoading, ...props }: ISubmitProps) => {
   return (
     <FormConsumer selector={['submitting', 'submitted']}>
       {({ status }) => {
@@ -26,10 +31,10 @@ Submit.defaultProps = {
   showLoading: true
 }
 
-export const Reset = props => {
+export const Reset = (props: ButtonProps) => {
   return (
     <FormConsumer>
-      {({ status, reset }) => {
+      {({ reset }) => {
         return (
           <Button {...props} onClick={reset}>
             {props.children || '重置'}