feat: support react18 types (#3087)

alibaba · May 3, 2022 · e4917f9 · e4917f9
1 parent 4f13df3
commit e4917f9
Show file tree

Hide file tree

Showing 95 changed files with 3,439 additions and 2,867 deletions.
diff --git a/docs/guide/scenes/VerifyCode.tsx b/docs/guide/scenes/VerifyCode.tsx
@@ -9,60 +9,55 @@ interface IVerifyCodeProps {
   style?: React.CSSProperties
 }
 
-export const VerifyCode: React.FC<IVerifyCodeProps> = ({
-  value,
-  onChange,
-  readyPost,
-  phoneNumber,
-  ...props
-}) => {
-  const [lastTime, setLastTime] = useState(0)
+export const VerifyCode: React.FC<React.PropsWithChildren<IVerifyCodeProps>> =
+  ({ value, onChange, readyPost, phoneNumber, ...props }) => {
+    const [lastTime, setLastTime] = useState(0)
 
-  const counting = (time = 20) => {
-    if (time < 0) return
-    setLastTime(time)
-    setTimeout(() => {
-      counting(time - 1)
-    }, 1000)
-  }
+    const counting = (time = 20) => {
+      if (time < 0) return
+      setLastTime(time)
+      setTimeout(() => {
+        counting(time - 1)
+      }, 1000)
+    }
 
-  return (
-    <div
-      style={{ display: 'inline-flex', width: '100%', alignItems: 'center' }}
-    >
-      <Input
-        {...props}
-        style={{ marginRight: 5, ...props.style }}
-        value={value}
-        onChange={onChange}
-      />
+    return (
       <div
-        style={{
-          flexShrink: 0,
-          color: '#999',
-          width: 100,
-          height: 35,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
+        style={{ display: 'inline-flex', width: '100%', alignItems: 'center' }}
       >
-        {lastTime === 0 && (
-          <Button
-            disabled={!readyPost}
-            block
-            onClick={() => {
-              if (phoneNumber) {
-                console.log(`post code by phone number ${phoneNumber}`)
-              }
-              counting()
-            }}
-          >
-            发送验证码
-          </Button>
-        )}
-        {lastTime > 0 && <span>剩余{lastTime}秒</span>}
+        <Input
+          {...props}
+          style={{ marginRight: 5, ...props.style }}
+          value={value}
+          onChange={onChange}
+        />
+        <div
+          style={{
+            flexShrink: 0,
+            color: '#999',
+            width: 100,
+            height: 35,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {lastTime === 0 && (
+            <Button
+              disabled={!readyPost}
+              block
+              onClick={() => {
+                if (phoneNumber) {
+                  console.log(`post code by phone number ${phoneNumber}`)
+                }
+                counting()
+              }}
+            >
+              发送验证码
+            </Button>
+          )}
+          {lastTime > 0 && <span>剩余{lastTime}秒</span>}
+        </div>
       </div>
-    </div>
-  )
-}
+    )
+  }
diff --git a/docs/site/QrCode.tsx b/docs/site/QrCode.tsx
@@ -6,7 +6,9 @@ export interface IQrCodeProps {
   link?: string
 }
 
-export const QrCode: React.FC<IQrCodeProps> = (props) => {
+export const QrCode: React.FC<React.PropsWithChildren<IQrCodeProps>> = (
+  props
+) => {
   return (
     <div className="qrcode">
       <div className="qrcode-title">

diff --git a/docs/site/Section.tsx b/docs/site/Section.tsx
@@ -8,7 +8,9 @@ export interface ISectionProps {
   scale?: number
 }
 
-export const Section: React.FC<ISectionProps> = (props) => {
+export const Section: React.FC<React.PropsWithChildren<ISectionProps>> = (
+  props
+) => {
   return (
     <section className="site-section" style={props.style}>
       <div className="site-section-title" style={props.titleStyle}>

diff --git a/global.config.ts b/global.config.ts
@@ -2,25 +2,10 @@ import prettyFormat from 'pretty-format'
 
 global['prettyFormat'] = prettyFormat
 
-global['sleep'] = (time) => {
+global['sleep'] = (time: number) => {
   return new Promise((resolve) => setTimeout(resolve, time))
 }
 
-global['requestAnimationFrame'] = (fn) => setTimeout(fn)
+global['requestAnimationFrame'] = (fn: () => void) => setTimeout(fn, 0)
 
-global.document.documentElement.style['grid-column-gap'] = true
-
-// 把 console.error 转换成 error，方便断言
-;(() => {
-  const spy = jest.spyOn(console, 'error')
-  beforeAll(() => {
-    spy.mockImplementation((message) => {
-      console.log(message)
-      throw new Error(message)
-    })
-  })
-
-  afterAll(() => {
-    spy.mockRestore()
-  })
-})()
+global['document'].documentElement.style['grid-column-gap'] = true
diff --git a/package.json b/package.json
@@ -43,8 +43,8 @@
     "lint": "eslint ."
   },
   "resolutions": {
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@mapbox/hast-util-to-jsx": "~1.0.0",
     "yargs": "^16.x",
     "commander": "^6.x"
@@ -63,8 +63,8 @@
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^24.0.18",
     "@types/node": "^12.6.8",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^4.9.1",
     "@typescript-eslint/parser": "^4.8.2",
     "@umijs/plugin-sass": "^1.1.1",
@@ -125,8 +125,8 @@
     "pretty-quick": "^3.1.0",
     "querystring": "^0.2.1",
     "raw-loader": "^4.0.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-mde": "^11.5.0",
     "react-test-renderer": "^16.11.0",
     "rimraf": "^3.0.0",

diff --git a/packages/antd/src/array-base/index.tsx b/packages/antd/src/array-base/index.tsx
@@ -40,11 +40,15 @@ export interface IArrayBaseItemProps {
 }
 
 export type ArrayBaseMixins = {
-  Addition?: React.FC<IArrayBaseAdditionProps>
-  Remove?: React.FC<AntdIconProps & { index?: number }>
-  MoveUp?: React.FC<AntdIconProps & { index?: number }>
-  MoveDown?: React.FC<AntdIconProps & { index?: number }>
-  SortHandle?: React.FC<AntdIconProps & { index?: number }>
+  Addition?: React.FC<React.PropsWithChildren<IArrayBaseAdditionProps>>
+  Remove?: React.FC<React.PropsWithChildren<AntdIconProps & { index?: number }>>
+  MoveUp?: React.FC<React.PropsWithChildren<AntdIconProps & { index?: number }>>
+  MoveDown?: React.FC<
+    React.PropsWithChildren<AntdIconProps & { index?: number }>
+  >
+  SortHandle?: React.FC<
+    React.PropsWithChildren<AntdIconProps & { index?: number }>
+  >
   Index?: React.FC
   useArray?: () => IArrayBaseContext
   useIndex?: (index?: number) => number
@@ -59,9 +63,9 @@ export interface IArrayBaseProps {
   onMoveUp?: (index: number) => void
 }
 
-type ComposedArrayBase = React.FC<IArrayBaseProps> &
+type ComposedArrayBase = React.FC<React.PropsWithChildren<IArrayBaseProps>> &
   ArrayBaseMixins & {
-    Item?: React.FC<IArrayBaseItemProps>
+    Item?: React.FC<React.PropsWithChildren<IArrayBaseItemProps>>
     mixin?: <T extends JSXComponent>(target: T) => T & ArrayBaseMixins
   }
 

diff --git a/packages/antd/src/array-cards/index.tsx b/packages/antd/src/array-cards/index.tsx
@@ -13,7 +13,8 @@ import { ISchema } from '@formily/json-schema'
 import { usePrefixCls } from '../__builtins__'
 import { ArrayBase, ArrayBaseMixins } from '../array-base'
 
-type ComposedArrayCards = React.FC<CardProps> & ArrayBaseMixins
+type ComposedArrayCards = React.FC<React.PropsWithChildren<CardProps>> &
+  ArrayBaseMixins
 
 const isAdditionComponent = (schema: ISchema) => {
   return schema['x-component']?.indexOf('Addition') > -1

diff --git a/packages/antd/src/array-collapse/index.tsx b/packages/antd/src/array-collapse/index.tsx
@@ -23,9 +23,11 @@ import { usePrefixCls } from '../__builtins__'
 export interface IArrayCollapseProps extends CollapseProps {
   defaultOpenPanelCount?: number
 }
-type ComposedArrayCollapse = React.FC<IArrayCollapseProps> &
+type ComposedArrayCollapse = React.FC<
+  React.PropsWithChildren<IArrayCollapseProps>
+> &
   ArrayBaseMixins & {
-    CollapsePanel?: React.FC<CollapsePanelProps>
+    CollapsePanel?: React.FC<React.PropsWithChildren<CollapsePanelProps>>
   }
 
 const isAdditionComponent = (schema: ISchema) => {
@@ -221,7 +223,9 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
   }
 )
 
-const CollapsePanel: React.FC<CollapsePanelProps> = ({ children }) => {
+const CollapsePanel: React.FC<React.PropsWithChildren<CollapsePanelProps>> = ({
+  children,
+}) => {
   return <Fragment>{children}</Fragment>
 }
 

diff --git a/packages/antd/src/array-items/index.tsx b/packages/antd/src/array-items/index.tsx
@@ -5,14 +5,22 @@ import {
   observer,
   useFieldSchema,
   RecursionField,
+  ReactFC,
 } from '@formily/react'
 import cls from 'classnames'
-import { SortableContainer, SortableElement } from 'react-sortable-hoc'
+import {
+  SortableContainer,
+  SortableElement,
+  SortableContainerProps,
+  SortableElementProps,
+} from 'react-sortable-hoc'
 import { ISchema } from '@formily/json-schema'
 import { usePrefixCls } from '../__builtins__'
 import { ArrayBase, ArrayBaseMixins } from '../array-base'
 
-type ComposedArrayItems = React.FC<React.HTMLAttributes<HTMLDivElement>> &
+type ComposedArrayItems = React.FC<
+  React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>
+> &
   ArrayBaseMixins & {
     Item?: React.FC<
       React.HTMLAttributes<HTMLDivElement> & {
@@ -21,7 +29,9 @@ type ComposedArrayItems = React.FC<React.HTMLAttributes<HTMLDivElement>> &
     >
   }
 
-const SortableItem = SortableElement(
+const SortableItem: ReactFC<
+  React.HTMLAttributes<HTMLDivElement> & SortableElementProps
+> = SortableElement(
   (props: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>) => {
     const prefixCls = usePrefixCls('formily-array-items')
     return (
@@ -30,9 +40,11 @@ const SortableItem = SortableElement(
       </div>
     )
   }
-)
+) as any
 
-const SortableList = SortableContainer(
+const SortableList: ReactFC<
+  React.HTMLAttributes<HTMLDivElement> & SortableContainerProps
+> = SortableContainer(
   (props: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>) => {
     const prefixCls = usePrefixCls('formily-array-items')
     return (
@@ -41,7 +53,7 @@ const SortableList = SortableContainer(
       </div>
     )
   }
-)
+) as any
 
 const isAdditionComponent = (schema: ISchema) => {
   return schema['x-component']?.indexOf('Addition') > -1

diff --git a/packages/antd/src/array-table/index.tsx b/packages/antd/src/array-table/index.tsx
@@ -11,6 +11,7 @@ import {
   observer,
   useFieldSchema,
   RecursionField,
+  ReactFC,
 } from '@formily/react'
 import { isArr, isBool } from '@formily/shared'
 import { Schema } from '@formily/json-schema'
@@ -36,9 +37,9 @@ interface IStatusSelectProps extends SelectProps<any> {
   pageSize?: number
 }
 
-type ComposedArrayTable = React.FC<TableProps<any>> &
+type ComposedArrayTable = React.FC<React.PropsWithChildren<TableProps<any>>> &
   ArrayBaseMixins & {
-    Column?: React.FC<ColumnProps<any>>
+    Column?: React.FC<React.PropsWithChildren<ColumnProps<any>>>
   }
 
 const SortableRow = SortableElement((props: any) => <tr {...props} />)
@@ -144,7 +145,7 @@ const schedulerRequest = {
   request: null,
 }
 
-const StatusSelect: React.FC<IStatusSelectProps> = observer(
+const StatusSelect: ReactFC<IStatusSelectProps> = observer(
   (props) => {
     const field = useField<ArrayField>()
     const prefixCls = usePrefixCls('formily-array-table')
@@ -157,10 +158,11 @@ const StatusSelect: React.FC<IStatusSelectProps> = observer(
       )
     }
     const options = props.options?.map(({ label, value }) => {
+      const val = Number(value)
       const hasError = errors.some(({ address }) => {
         const currentIndex = parseIndex(address)
-        const startIndex = (value - 1) * props.pageSize
-        const endIndex = value * props.pageSize
+        const startIndex = (val - 1) * props.pageSize
+        const endIndex = val * props.pageSize
         return currentIndex >= startIndex && currentIndex <= endIndex
       })
       return {
@@ -196,7 +198,7 @@ const StatusSelect: React.FC<IStatusSelectProps> = observer(
   }
 )
 
-const ArrayTablePagination: React.FC<IArrayTablePaginationProps> = (props) => {
+const ArrayTablePagination: ReactFC<IArrayTablePaginationProps> = (props) => {
   const [current, setCurrent] = useState(1)
   const prefixCls = usePrefixCls('formily-array-table')
   const pageSize = props.pageSize || 10
@@ -315,7 +317,7 @@ export const ArrayTable: ComposedArrayTable = observer(
                           return ref.current?.querySelector('tbody')
                         }}
                         onSortStart={({ node }) => {
-                          addTdStyles(node)
+                          addTdStyles(node as HTMLElement)
                         }}
                         onSortEnd={({ oldIndex, newIndex }) => {
                           field.move(oldIndex, newIndex)