From c911e947ce2a09e6b524006f31b4323d72709877 Mon Sep 17 00:00:00 2001 From: haohao_peng Date: Wed, 27 Nov 2024 22:17:10 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20[alert]=20=E4=BF=AE=E5=A4=8Dts=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E6=8A=A5=E9=94=99=20fix=20#972?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/alert/__tests__/index.test.tsx | 4 +-- components/alert/demo/banner.md | 16 +++++----- components/alert/demo/basic.md | 8 +++-- components/alert/demo/custom.md | 31 +++++++++++------- components/alert/demo/icon.md | 38 ++++++++++++++--------- components/alert/demo/postion.md | 9 +++--- components/alert/demo/time.md | 10 +++--- components/index.tsx | 1 + 8 files changed, 70 insertions(+), 47 deletions(-) diff --git a/components/alert/__tests__/index.test.tsx b/components/alert/__tests__/index.test.tsx index eaa6139a..72828ea1 100644 --- 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() 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() - 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 index 58a83b24..5d7a6199 100644 --- 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(0) - const [banner, setBanner] = React.useState(false) - const ref = React.createRef() - const inputRef = React.createRef() + const [delayTime, setDelayTime] = React.useState(0) + const [banner, setBanner] = React.useState(false) + const ref = React.createRef() + const inputRef = React.createRef() const map = { success: '成功提示', warning: '警告提示', error: '错误提示', info: '信息通知', } - const getMessage = (type) => { + type Itype = Exclude + const getMessage = (type: Itype) => { return `这是${map[type]}类型的反馈浮层` } - const [msg, setMsg] = React.useState(getMessage('success')) + const [msg, setMsg] = React.useState(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 index d24ba8af..04945097 100644 --- 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 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 ( ) diff --git a/components/alert/demo/custom.md b/components/alert/demo/custom.md index a603ba19..fa2b5bbe 100644 --- a/components/alert/demo/custom.md +++ b/components/alert/demo/custom.md @@ -9,46 +9,50 @@ 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(0) - const [msg, setMsg] = React.useState('') - const messages = ['这是第一条信息', '这是第二条信息', '这是第三条信息'].map( + const [msg, setMsg] = React.useState('') + const messages: Array = ['这是第一条信息', '这是第二条信息', '这是第三条信息'].map( (msg) => `${msg}, 可以自定义设置显示的信息标识图标、关闭图标、关闭图标旁边区域的位置元素`, ) - const icon = ( + const icon: IAlertProps['icon'] = (
+ }} + > {' '} {' '}
) - const closeNode = ( + const closeNode: IAlertProps['closeNode'] = (
setMsgIdx(-1)} style={{ marginRight: 10, cursor: 'pointer', - }}> + }} + >
) - 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'] = (
setMsg(messages[msgIdx])}> + onClick={() => setMsg(messages[msgIdx])} + > 查看 { marginRight: 10, cursor: 'pointer', }} - onClick={() => setMsgIdx(-1)}> + onClick={() => setMsgIdx(-1)} + > 忽略全部 { style={{ marginRight: 5, cursor: 'pointer', - }}> + }} + > {`${msgIdx + 1}/${messages.length}`} @@ -73,7 +79,8 @@ const Demo: React.FC = () => { style={{ marginRight: 5, cursor: 'pointer', - }}> + }} + >
diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md index 48b734a9..75de91f7 100644 --- 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 + + 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 ( { - const [bannerOffset, setBannerOffset] = React.useState([0, 0]) - const [banner, setBanner] = React.useState(false) + type Itype = Exclude + const [bannerOffset, setBannerOffset] = React.useState>([0, 0]) + const [banner, setBanner] = React.useState(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 index ecf73e43..454b7e63 100644 --- 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(0) - const ref = React.useRef(null) + type Itype = Exclude + const [delayTime, setDelayTime] = React.useState(0) + const ref = React.useRef(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 = () => { - {Object.keys(map).map((type) => { + {Object.keys(map).map((type: Itype) => { return })} diff --git a/components/index.tsx b/components/index.tsx index d7868317..dc4ea6c6 100644 --- 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'