fix: [alert] 修复ts类型报错 fix kingdee#972

albyben · Nov 27, 2024 · c911e94 · c911e94
1 parent df747bd
commit c911e94
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 47 deletions.
diff --git a/components/alert/__tests__/index.test.tsx b/components/alert/__tests__/index.test.tsx
@@ -25,7 +25,7 @@ describe('Alert', () => {
   it('warns if type is wrong', () => {
     const mockWarn = jest.fn()
     jest.spyOn(console, 'warn').mockImplementation(mockWarn)
-    const type = 'who am I' as any as AlertType
+    const type = 'who am I' as AlertType
     render(<Alert type={type} delayOffTime={0} />)
     expect(mockWarn).toHaveBeenCalledTimes(1)
     expect(mockWarn.mock.calls[0][0]).toMatch("Warning: [kdesign]-alert: cannot found alert type 'who am I'")
@@ -46,7 +46,7 @@ describe('Alert', () => {
   // 5. displayName
   it('should have displayName static property', () => {
     const wrapper = mount(<Alert type={'success'} delayOffTime={0}></Alert>)
-    expect((wrapper.type() as any).displayName).toBe('Alert')
+    expect((wrapper.type() as React.ComponentType).displayName).toBe('Alert')
   })
 
   // 6.API Test

diff --git a/components/alert/demo/banner.md b/components/alert/demo/banner.md
@@ -9,22 +9,24 @@ order: 4
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { InputNumber, Input, Button, Alert } from '@kdcloudjs/kdesign'
+import type { IAlertProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const [delayTime, setDelayTime] = React.useState<number>(0)
-  const [banner, setBanner] = React.useState<boolean>(false)
-  const ref = React.createRef()
-  const inputRef = React.createRef()
+  const [delayTime, setDelayTime] = React.useState<IAlertProps['delayOffTime']>(0)
+  const [banner, setBanner] = React.useState<IAlertProps['banner']>(false)
+  const ref = React.createRef<HTMLInputElement>()
+  const inputRef = React.createRef<HTMLInputElement>()
   const map = {
     success: '成功提示',
     warning: '警告提示',
     error: '错误提示',
     info: '信息通知',
   }
-  const getMessage = (type) => {
+  type Itype = Exclude<IAlertProps['type'], undefined>
+  const getMessage = (type: Itype) => {
     return `这是${map[type]}类型的反馈浮层`
   }
-  const [msg, setMsg] = React.useState<string>(getMessage('success'))
+  const [msg, setMsg] = React.useState<IAlertProps['message']>(getMessage('success'))
   const demoButtonStyle = { margin: '0px 8px 8px 0' }
   const inputStyle = { marginBottom: 8, marginRight: 8, width: 230 }
   const handleTimeClick = () => {
@@ -34,7 +36,7 @@ const Demo: React.FC = () => {
     inputRef.current &&
       setMsg((msg) => {
         console.log(msg)
-        return inputRef.current.value || ''
+        return inputRef.current?.value || ''
       })
   }
   const handleClick = () => {

diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md
@@ -9,20 +9,22 @@ order: 0
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Alert } from '@kdcloudjs/kdesign'
+import type { IAlertProps } from '@kdcloudjs/kdesign'
 
-const Demo:React.FC = () => {
+const Demo: React.FC = () => {
+  type Itype = Exclude<IAlertProps['type'], undefined>
   const map = {
     success: '成功提示',
     warning: '警告提示',
     error: '错误提示',
     info: '信息通知',
   }
-  const getMessage = (type) => {
+  const getMessage = (type: Itype) => {
     return `这是${map[type]}类型的反馈浮层`
   }
   return (
     <>
-      {Object.keys(map).map((type) => {
+      {Object.keys(map).map((type: Itype) => {
         return (
           <Alert key={type} message={getMessage(type)} type={type} delayOffTime={0} closable={true} showIcon={true} />
         )

diff --git a/components/alert/demo/custom.md b/components/alert/demo/custom.md
@@ -9,62 +9,68 @@ order: 5
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Alert, Icon } from '@kdcloudjs/kdesign'
+import type { IAlertProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
   const [msgIdx, setMsgIdx] = React.useState<number>(0)
-  const [msg, setMsg] = React.useState<string>('')
-  const messages = ['这是第一条信息', '这是第二条信息', '这是第三条信息'].map(
+  const [msg, setMsg] = React.useState<IAlertProps['message']>('')
+  const messages: Array<IAlertProps['message']> = ['这是第一条信息', '这是第二条信息', '这是第三条信息'].map(
     (msg) => `${msg}, 可以自定义设置显示的信息标识图标、关闭图标、关闭图标旁边区域的位置元素`,
   )
-  const icon = (
+  const icon: IAlertProps['icon'] = (
     <div
       style={{
         display: 'flex',
-      }}>
+      }}
+    >
       {' '}
       <Icon type={'right'} />{' '}
     </div>
   )
-  const closeNode = (
+  const closeNode: IAlertProps['closeNode'] = (
     <div
       onClick={() => setMsgIdx(-1)}
       style={{
         marginRight: 10,
         cursor: 'pointer',
-      }}>
+      }}
+    >
       <Icon type={'close-solid'} />
     </div>
   )
-  const handleMessage = (direction) => {
+  const handleMessage = (direction: number) => {
     setMsgIdx((idx) => {
       const newIdx = idx + direction
       return newIdx >= 0 ? (newIdx < messages.length ? newIdx : idx) : idx
     })
   }
-  const extra = (
+  const extra: IAlertProps['extra'] = (
     <div>
       <span
         style={{
           marginRight: 10,
           cursor: 'pointer',
         }}
-        onClick={() => setMsg(messages[msgIdx])}>
+        onClick={() => setMsg(messages[msgIdx])}
+      >
         查看
       </span>
       <span
         style={{
           marginRight: 10,
           cursor: 'pointer',
         }}
-        onClick={() => setMsgIdx(-1)}>
+        onClick={() => setMsgIdx(-1)}
+      >
         忽略全部
       </span>
       <span
         onClick={() => handleMessage(-1)}
         style={{
           marginRight: 5,
           cursor: 'pointer',
-        }}>
+        }}
+      >
         <Icon type={'arrow-left'} />
       </span>
       <span>{`${msgIdx + 1}/${messages.length}`}</span>
@@ -73,7 +79,8 @@ const Demo: React.FC = () => {
         style={{
           marginRight: 5,
           cursor: 'pointer',
-        }}>
+        }}
+      >
         <Icon type={'arrow-right'} />
       </span>
     </div>

diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md
@@ -9,37 +9,45 @@ order: 1
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Alert } from '@kdcloudjs/kdesign'
+import type { IAlertProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  function zip(...arrs) {
-    return arrs.reduce((prevArr, nextArr, index) => {
-      const ret = []
-      prevArr.forEach((el) => {
-        nextArr.forEach((ele) => {
-          if (index === 1) {
-            ret.push([el, ele])
-          } else {
-            ret.push([...el, ele])
-          }
+  type IArr = boolean[][]
+  type Itype = Exclude<IAlertProps['type'], undefined>
+
+  function zip(...arrs: boolean[][]): IArr {
+    return arrs.reduce(
+      (prevArr, nextArr, index) => {
+        const ret: IArr = []
+        prevArr.forEach((el) => {
+          nextArr.forEach((ele) => {
+            if (index === 1) {
+              ret.push([el as any, ele])
+            } else {
+              ret.push([...(el as boolean[]), ele])
+            }
+          })
         })
-      })
-      return ret
-    })
+        return ret
+      },
+      [[]] as IArr,
+    )
   }
+
   const map = {
     success: '成功提示',
     warning: '警告提示',
     error: '错误提示',
     info: '信息通知',
   }
-  const getMessage = (type, showIcon, closable) => {
+  const getMessage = (type: Itype, showIcon: boolean, closable: boolean) => {
     return `这是${map[type]}类型的反馈浮层, ${showIcon ? '有' : '没有'}显示信息标识图标, ${
       closable ? '有' : '没有'
     }显示关闭图标`
   }
   return (
     <>
-      {Object.keys(map).map((type) => {
+      {Object.keys(map).map((type: Itype) => {
         return zip([true, false], [true, false]).map(([showIcon, closable], index) => {
           return (
             <Alert

diff --git a/components/alert/demo/postion.md b/components/alert/demo/postion.md
@@ -9,19 +9,20 @@ order: 3
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Alert, InputNumber, Button } from '@kdcloudjs/kdesign'
-import type {BannerOffsetType} from '@kdcloudjs/kdesign'
+import type { IAlertProps } from '@kdcloudjs/kdesign'
 import { debounce } from 'lodash'
 
 const Demo: React.FC = () => {
-  const [bannerOffset, setBannerOffset] = React.useState<BannerOffsetType>([0, 0])
-  const [banner, setBanner] = React.useState<boolean>(false)
+  type Itype = Exclude<IAlertProps['type'], undefined>
+  const [bannerOffset, setBannerOffset] = React.useState<Exclude<IAlertProps['bannerOffset'], undefined>>([0, 0])
+  const [banner, setBanner] = React.useState<IAlertProps['banner']>(false)
   const map = {
     success: '成功提示',
     warning: '警告提示',
     error: '错误提示',
     info: '信息通知',
   }
-  const getMessage = (type) => {
+  const getMessage = (type: Itype) => {
     return `这是${map[type]}类型的反馈浮层`
   }
   const demoButtonStyle = { margin: '0px 8px 8px 0' }

diff --git a/components/alert/demo/time.md b/components/alert/demo/time.md
@@ -9,17 +9,19 @@ order: 2
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Alert, InputNumber, Button } from '@kdcloudjs/kdesign'
+import type { IAlertProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const [delayTime, setDelayTime] = React.useState<number>(0)
-  const ref = React.useRef(null)
+  type Itype = Exclude<IAlertProps['type'], undefined>
+  const [delayTime, setDelayTime] = React.useState<IAlertProps['delayOffTime']>(0)
+  const ref = React.useRef<HTMLInputElement>(null)
   const map = {
     success: '成功提示',
     warning: '警告提示',
     error: '错误提示',
     info: '信息通知',
   }
-  const getMessage = (type) => {
+  const getMessage = (type: Itype) => {
     return `这是${map[type]}类型的反馈浮层`
   }
   const demoButtonStyle = { margin: '0px 8px 8px 0' }
@@ -39,7 +41,7 @@ const Demo: React.FC = () => {
       <Button type="primary" style={demoButtonStyle} onClick={handleTimeClick}>
         设置反馈浮层消息持续时间
       </Button>
-      {Object.keys(map).map((type) => {
+      {Object.keys(map).map((type: Itype) => {
         return <Alert key={type} message={getMessage(type)} type={type} delayOffTime={delayTime} />
       })}
     </>

diff --git a/components/index.tsx b/components/index.tsx
@@ -15,6 +15,7 @@ if (
 }
 /* @remove-on-es-build-end */
 export { default as Alert } from './alert'
+export type { IAlertProps } from './alert'
 
 export { default as Breadcrumb } from './breadcrumb'