correct and improve typescript definitions (#274)

alibaba · Aug 25, 2019 · 77e6c21 · 77e6c21
1 parent 4009d78
commit 77e6c21
Show file tree

Hide file tree

Showing 17 changed files with 401 additions and 241 deletions.
diff --git a/packages/antd/src/components/layout.tsx b/packages/antd/src/components/layout.tsx
@@ -27,9 +27,7 @@ const normalizeCol = (
   }
 }
 
-export const FormLayoutItem: React.FC<Partial<IFormItemProps>> = function(
-  props
-) {
+export const FormLayoutItem: React.FC<IFormItemProps> = function(props) {
   return React.createElement(
     FormLayoutConsumer,
     {},
@@ -119,9 +117,13 @@ export const FormItemGrid = createVirtualBox<IFormItemGridPropsAlias>(
       const {
         children: rawChildren,
         cols: rawCols,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         title,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         description,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         help,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         extra,
         ...props
       } = this.props

diff --git a/packages/antd/src/fields/array.tsx b/packages/antd/src/fields/array.tsx
@@ -8,8 +8,8 @@ export const CircleButton = styled['div'].attrs({ className: 'cricle-btn' })`
   margin-right:10px;
   border-radius: ${props => (!props.hasText ? '100px' : 'none')};
   border: ${props => (!props.hasText ? '1px solid #eee' : 'none')};
-  margin-bottom:20px;
-  cursor:pointer;
+  margin-bottom: 20px;
+  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -19,10 +19,9 @@ export const CircleButton = styled['div'].attrs({ className: 'cricle-btn' })`
         background:#f7f4f4;
       }`
       : ''}
-  .op-name{
-    margin-left:3px;
+  .op-name {
+    margin-left: 3px;
   }
-}
 `
 
 export const TextButton = styled['div'].attrs({

diff --git a/packages/antd/src/fields/password.tsx b/packages/antd/src/fields/password.tsx
@@ -158,24 +158,22 @@ interface IStrengthProps {
 }
 
 // 校验强度 UI
-const StrengthFC = styled(
-  ({ strength, className }: IStrengthProps) => (
-    <div {...{ className }}>
-      <div className={'password-strength-wrapper'}>
-        <div className={'div-1 div'} />
-        <div className={'div-2 div'} />
-        <div className={'div-3 div'} />
-        <div className={'div-4 div'} />
-        <div
-          className={'password-strength-bar'}
-          style={{
-            clipPath: `polygon(0 0,${strength}% 0,${strength}% 100%,0 100%)`
-          }}
-        />
-      </div>
+const StrengthFC = styled(({ strength, className }: IStrengthProps) => (
+  <div {...{ className }}>
+    <div className={'password-strength-wrapper'}>
+      <div className={'div-1 div'} />
+      <div className={'div-2 div'} />
+      <div className={'div-3 div'} />
+      <div className={'div-4 div'} />
+      <div
+        className={'password-strength-bar'}
+        style={{
+          clipPath: `polygon(0 0,${strength}% 0,${strength}% 100%,0 100%)`
+        }}
+      />
     </div>
-  )
-)`
+  </div>
+))`
   .password-strength-wrapper {
     background: #e0e0e0;
     margin-bottom: 3px;
@@ -248,6 +246,6 @@ const PasswordFC = (props: Partial<IPasswordProps>) => {
 registerFormField(
   'password',
   connect({
-    getProps: mapStyledProps,
+    getProps: mapStyledProps
   })(PasswordFC)
 )
diff --git a/packages/antd/src/fields/upload.tsx b/packages/antd/src/fields/upload.tsx
@@ -184,7 +184,7 @@ registerFormField(
         this.props.onChange(fileList)
       }
 
-      public onChangeHandler = ({ fileList, file }) => {
+      public onChangeHandler = ({ fileList }) => {
         const { onChange } = this.props
         fileList = toArr(fileList)
         if (
@@ -235,6 +235,7 @@ registerFormField(
       }
 
       public render() {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { listType, locale, onChange, value, ...others } = this.props
 
         if (listType.indexOf('card') > -1) {

diff --git a/packages/antd/src/index.tsx b/packages/antd/src/index.tsx
@@ -20,15 +20,25 @@ export * from '@uform/react'
 export * from './components/formButtonGroup'
 export * from './components/button'
 export * from './components/layout'
+import React from 'react'
+import {
+  SchemaForm as InternalSchemaForm,
+  Field as InternalField
+} from '@uform/react'
+import { SchemaFormProps, FieldProps } from './type'
 
-import { SchemaForm as ReactSchemaForm } from '@uform/react'
-import { mapStyledProps, mapTextComponent } from './utils'
-import { ISchemaFormProps, ISchemaFormExpandProps } from './type'
+export { mapStyledProps, mapTextComponent } from './utils'
 
-export { mapStyledProps, mapTextComponent }
+export default class SchemaForm<V> extends React.Component<SchemaFormProps<V>> {
+  render() {
+    return <InternalSchemaForm {...this.props} />
+  }
+}
 
-export const SchemaForm: React.ComponentClass<
-  ISchemaFormProps & ISchemaFormExpandProps
-> = ReactSchemaForm
-
-export default SchemaForm
+export class Field<V, T extends string> extends React.Component<
+  FieldProps<V, T>
+> {
+  render() {
+    return <InternalField {...this.props} />
+  }
+}
diff --git a/packages/antd/src/type.tsx b/packages/antd/src/type.tsx
@@ -1,13 +1,37 @@
 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 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'
+import {
+  IFormActions,
+  ISchema,
+  IEffects,
+  IFieldError,
+  TextAlign,
+  Size,
+  Layout,
+  TextEl,
+  LabelAlign,
+  IAsyncFormActions
+} from '@uform/types'
+import { SwitchProps } from 'antd/lib/switch'
+import { CheckboxGroupProps } from 'antd/lib/checkbox'
+import {
+  DatePickerProps,
+  RangePickerProps,
+  MonthPickerProps,
+  WeekPickerProps
+} from 'antd/lib/date-picker/interface'
+import { InputNumberProps } from 'antd/lib/input-number'
+import { IPasswordProps } from './fields/password'
+import { RadioGroupProps } from 'antd/lib/radio'
+import { ISliderProps } from './fields/range'
+import { RateProps } from 'antd/lib/rate'
+import { InputProps } from 'antd/lib/input'
+import { TextAreaProps } from 'antd/es/input'
+import { TimePickerProps } from 'antd/lib/time-picker'
+import { TransferProps } from 'antd/lib/transfer'
+import { IUploaderProps } from './fields/upload'
+import { SelectProps } from 'antd/lib/select'
 
 type ColSpanType = number | string
 
@@ -16,56 +40,26 @@ export interface ColSize {
   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?: TLabelAlign
-  wrapperCol?: number
-  labelCol?: number
-  labelTextAlign?: TTextAlign
-  size?: TSize
+  labelAlign?: LabelAlign
+  wrapperCol?: ColProps | number
+  labelCol?: ColProps | number
+  labelTextAlign?: TextAlign
+  size?: Size
   style?: React.CSSProperties
 }
 
 export interface IFormItemGridProps {
   cols?: Array<number | { span: number; offset: number }>
-  description?: TTextEl
+  description?: TextEl
   gutter?: number
-  title?: TTextEl
+  title?: TextEl
 }
 
 export interface IRowProps {
@@ -85,7 +79,7 @@ export interface IRowProps {
 }
 
 export interface IColProps extends ColProps {
-  prefix: string
+  prefix?: string
   pure?: boolean
   className?: string
   fixedSpan?: string | number
@@ -114,9 +108,11 @@ export type TFormCardOrFormBlockProps = Omit<CardProps, 'children'>
 
 export interface IFormTextBox {
   text?: string
-  title?: TTextEl
-  description?: TTextEl
+  name?: string
+  title?: TextEl
+  description?: TextEl
   gutter?: number
+  required?: boolean
 }
 
 export interface IFormButtonGroupProps {
@@ -134,3 +130,57 @@ export interface IFormButtonGroupProps {
 export interface ISubmitProps extends Omit<BaseButtonProps, 'loading'> {
   showLoading?: boolean
 }
+
+export interface SchemaFormProps<V = unknown> {
+  actions?: IFormActions | IAsyncFormActions
+  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
+  autoAddColon?: boolean
+  className?: string
+  inline?: boolean
+  layout?: Layout
+  maxTipsNum?: number
+  labelAlign?: LabelAlign
+  labelTextAlign?: TextAlign
+  labelCol?: ColSize | number
+  wrapperCol?: ColSize | number
+  size?: Size
+  style?: React.CSSProperties
+  prefix?: string
+}
+
+interface InternalFieldTypes {
+  boolean: SwitchProps | SelectProps
+  checkbox: CheckboxGroupProps
+  date: DatePickerProps
+  daterange: RangePickerProps
+  month: MonthPickerProps
+  week: WeekPickerProps
+  year: DatePickerProps
+  number: InputNumberProps | SelectProps
+  password: IPasswordProps
+  radio: RadioGroupProps
+  range: ISliderProps
+  rating: RateProps
+  string: InputProps | SelectProps
+  textarea: TextAreaProps | SelectProps
+  time: TimePickerProps
+  transfer: TransferProps
+  upload: IUploaderProps
+}
+
+export interface FieldProps<V, T extends string> extends ISchema<V> {
+  type?: T
+  name?: string
+  editable?: boolean
+  ['x-props']?: T extends keyof InternalFieldTypes ? InternalFieldTypes[T] : any
+}