fix: [transfer] 修复ts类型报错 fix #965

kingdee · Dec 6, 2024 · 6be1448 · 6be1448
1 parent eb86ca0
commit 6be1448
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 71 deletions.
diff --git a/components/index.tsx b/components/index.tsx
@@ -94,6 +94,7 @@ export { default as Tooltip } from './tooltip'
 export { default as Tabs } from './tabs'
 
 export { default as Transfer } from './transfer'
+export type { TransferProps as ITransferProps, ITransferRef } from './transfer'
 
 export { default as Tree } from './tree'
 

diff --git a/components/transfer/__tests__/index.test.tsx b/components/transfer/__tests__/index.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { render, mount } from 'enzyme'
-import Transfer, { TransferItem, TransferRenderParam } from '../index'
+import { render, mount, ReactWrapper } from 'enzyme'
+import Transfer, { TransferItem, TransferRenderParam, ITransferRef } from '../index'
 import Operation from '../operation'
 import ConfigProvider from '../../config-provider/index'
 import Button from '../../button'
@@ -10,7 +10,7 @@ import TransferList from '../list'
 import mountTest from '../../../tests/shared/mountTest'
 import { act } from 'react-dom/test-utils'
 
-const headerText = (wrapper: any, index = 0) => {
+const headerText = (wrapper: ReactWrapper, index = 0) => {
   const text = wrapper
     .find(TransferList)
     .at(index)
@@ -164,7 +164,7 @@ describe('Transfer', () => {
   // 5.displayName
   it('should have displayName static property', () => {
     const wrapper = mount(<Transfer dataSource={[]}></Transfer>)
-    expect((wrapper.type() as any).displayName).toBe('Transfer')
+    expect((wrapper.type() as React.ComponentType).displayName).toBe('Transfer')
   })
 
   // #region 6.API
@@ -449,7 +449,7 @@ describe('Transfer', () => {
   // 7.methods
   // clearSearch
   it('should clear keywords at correct position when using "clearSearch" method', () => {
-    const ref = React.createRef()
+    const ref = React.createRef<ITransferRef>()
     const wrapper = mount(<Transfer ref={ref} showSearch={true} {...listCommonProps} />)
     // clear left
     wrapper
@@ -458,7 +458,7 @@ describe('Transfer', () => {
       .simulate('change', { target: { value: '123' } })
     expect(wrapper.find('.kd-input').at(0).prop('value')).toEqual('123')
     act(() => {
-      ;(ref.current as any).clearSearch('left')
+      ref.current?.clearSearch('left')
     })
     wrapper.update()
     expect(wrapper.find('.kd-input').at(0).prop('value')).toEqual('')
@@ -469,7 +469,7 @@ describe('Transfer', () => {
       .simulate('change', { target: { value: '123' } })
     expect(wrapper.find('.kd-input').at(1).prop('value')).toEqual('123')
     act(() => {
-      ;(ref.current as any).clearSearch('right')
+      ref.current?.clearSearch('right')
     })
     wrapper.update()
     expect(wrapper.find('.kd-input').at(1).prop('value')).toEqual('')
@@ -485,7 +485,7 @@ describe('Transfer', () => {
     expect(wrapper.find('.kd-input').at(0).prop('value')).toEqual('123')
     expect(wrapper.find('.kd-input').at(1).prop('value')).toEqual('456')
     act(() => {
-      ;(ref.current as any).clearSearch()
+      ref.current?.clearSearch()
     })
     wrapper.update()
     expect(wrapper.find('.kd-input').at(0).prop('value')).toEqual('')

diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md
@@ -11,36 +11,32 @@ title: 基本用法
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Transfer } from '@kdcloudjs/kdesign'
-import type { TransferItem } from '@kdcloudjs/kdesign'
+import type { ITransferProps } from '@kdcloudjs/kdesign'
 
-
-const Demo: React.FC = () => {
-  const mockData = []
+const Demo = () => {
+  const mockData: ITransferProps['dataSource'] = []
   for (let i = 1; i < 20; i++) {
     mockData.push({
       key: i.toString(),
       title: `选项${i}`,
       description: `选项描述${i}`,
-      disabled: i % 6 === 0,
+      disabled: i % 6 === 0
     })
   }
-  const oriTargetKeys = mockData.filter((item) => +item.key % 3 >= 1).map((item) => item.key)
-
-  const [targetKeys, setTargetKeys] = React.useState<Array<TransferItem>>(oriTargetKeys)
-  const [selectedKeys, setSelectedKeys] = React.useState<Array<TransferItem>>([])
-  const handleChange = (nextTargetKeys, direction, moveKeys) => {
+  const oriTargetKeys: ITransferProps['targetKeys'] = mockData.filter((item) => + item.key % 3 >= 1).map((item) => item.key)
+  const [targetKeys, setTargetKeys] = React.useState(oriTargetKeys)
+  const [selectedKeys, setSelectedKeys] = React.useState<ITransferProps['selectedKeys']>([])
+  const handleChange: ITransferProps['onChange'] = (nextTargetKeys, direction, moveKeys) => {
     setTargetKeys(nextTargetKeys)
     console.log('targetKeys: ', nextTargetKeys)
     console.log('direction: ', direction)
     console.log('moveKeys: ', moveKeys)
   }
-
-  const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
+  const handleSelectChange: ITransferProps['onSelectChange'] = (sourceSelectedKeys, targetSelectedKeys) => {
     setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys])
     console.log('sourceSelectedKeys: ', sourceSelectedKeys)
     console.log('targetSelectedKeys: ', targetSelectedKeys)
   }
-
   return (
     <Transfer
       dataSource={mockData}
@@ -49,10 +45,12 @@ const Demo: React.FC = () => {
       onChange={handleChange}
       onSelectChange={handleSelectChange}
       render={(item) => item.title}
-      style={{ marginBottom: 16 }}
+      style={{
+        marginBottom: 16
+      }}
     />
   )
 }
 
 ReactDOM.render(<Demo />, mountNode)
-```
+```
diff --git a/components/transfer/demo/oneway.md b/components/transfer/demo/oneway.md
@@ -9,10 +9,10 @@ title: 单向模式
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Transfer } from '@kdcloudjs/kdesign'
-import type { TransferItem } from '@kdcloudjs/kdesign'
+import type { ITransferProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const mockData = []
+  const mockData: ITransferProps['dataSource'] = []
   for (let i = 1; i < 20; i++) {
     mockData.push({
       key: i.toString(),
@@ -23,16 +23,16 @@ const Demo: React.FC = () => {
   }
   const oriTargetKeys = mockData.filter((item) => +item.key % 3 >= 1).map((item) => item.key)
 
-  const [targetKeys, setTargetKeys] = React.useState<Array<TransferItem>>(oriTargetKeys)
-  const [selectedKeys, setSelectedKeys] = React.useState<Array<TransferItem>>([])
-  const handleChange = (nextTargetKeys, direction, moveKeys) => {
+  const [targetKeys, setTargetKeys] = React.useState<ITransferProps['targetKeys']>(oriTargetKeys)
+  const [selectedKeys, setSelectedKeys] = React.useState<ITransferProps['selectedKeys']>([])
+  const handleChange: ITransferProps['onChange'] = (nextTargetKeys, direction, moveKeys) => {
     setTargetKeys(nextTargetKeys)
     console.log('targetKeys: ', nextTargetKeys)
     console.log('direction: ', direction)
     console.log('moveKeys: ', moveKeys)
   }
 
-  const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
+  const handleSelectChange: ITransferProps['onSelectChange'] = (sourceSelectedKeys, targetSelectedKeys) => {
     setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys])
     console.log('sourceSelectedKeys: ', sourceSelectedKeys)
     console.log('targetSelectedKeys: ', targetSelectedKeys)
@@ -53,4 +53,4 @@ const Demo: React.FC = () => {
 }
 
 ReactDOM.render(<Demo />, mountNode)
-```
+```
diff --git a/components/transfer/demo/pagination.md b/components/transfer/demo/pagination.md
@@ -9,11 +9,11 @@ title: 分页
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Transfer } from '@kdcloudjs/kdesign'
-import type { TransferItem } from '@kdcloudjs/kdesign'
+import type { ITransferProps } from '@kdcloudjs/kdesign'
 
 
 const Demo: React.FC = () => {
-  const mockData = []
+  const mockData: ITransferProps['dataSource'] = []
   for (let i = 1; i < 20; i++) {
     mockData.push({
       key: i.toString(),
@@ -24,13 +24,13 @@ const Demo: React.FC = () => {
   }
   const oriTargetKeys = mockData.filter((item) => +item.key % 3 >= 1).map((item) => item.key)
 
-  const [targetKeys, setTargetKeys] = React.useState<Array<TransferItem>>(oriTargetKeys)
-  const [selectedKeys, setSelectedKeys] = React.useState<Array<TransferItem>>([])
-  const handleChange = (nextTargetKeys) => {
+  const [targetKeys, setTargetKeys] = React.useState<ITransferProps['targetKeys']>(oriTargetKeys)
+  const [selectedKeys, setSelectedKeys] = React.useState<ITransferProps['selectedKeys']>([])
+  const handleChange: ITransferProps['onChange'] = (nextTargetKeys) => {
     setTargetKeys(nextTargetKeys)
   }
 
-  const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
+  const handleSelectChange: ITransferProps['onSelectChange'] = (sourceSelectedKeys, targetSelectedKeys) => {
     setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys])
   }
 
@@ -49,4 +49,4 @@ const Demo: React.FC = () => {
 }
 
 ReactDOM.render(<Demo />, mountNode)
-```
+```
diff --git a/components/transfer/demo/render-item.md b/components/transfer/demo/render-item.md
@@ -9,10 +9,10 @@ title: 自定义渲染行数据
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Transfer } from '@kdcloudjs/kdesign'
-import type { TransferItem } from '@kdcloudjs/kdesign'
+import type { ITransferProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const mockData = []
+  const mockData: ITransferProps['dataSource'] = []
   for (let i = 1; i < 20; i++) {
     mockData.push({
       key: i.toString(),
@@ -23,17 +23,17 @@ const Demo: React.FC = () => {
   }
   const oriTargetKeys = mockData.filter((item) => +item.key % 3 >= 1).map((item) => item.key)
 
-  const [targetKeys, setTargetKeys] = React.useState<Array<TransferItem>>(oriTargetKeys)
-  const [selectedKeys, setSelectedKeys] = React.useState<Array<TransferItem>>([])
-  const handleChange = (nextTargetKeys) => {
+  const [targetKeys, setTargetKeys] = React.useState<ITransferProps['targetKeys']>(oriTargetKeys)
+  const [selectedKeys, setSelectedKeys] = React.useState<ITransferProps['selectedKeys']>([])
+  const handleChange: ITransferProps['onChange'] = (nextTargetKeys) => {
     setTargetKeys(nextTargetKeys)
   }
 
-  const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
+  const handleSelectChange: ITransferProps['onSelectChange'] = (sourceSelectedKeys, targetSelectedKeys) => {
     setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys])
   }
 
-  const renderItem = (item) => {
+  const renderItem: ITransferProps['render'] = (item) => {
     const customLabel = (
       <span className="custom-item">
         {item.title} - {item.description}
@@ -59,4 +59,4 @@ const Demo: React.FC = () => {
 }
 
 ReactDOM.render(<Demo />, mountNode)
-```
+```
diff --git a/components/transfer/demo/senior.md b/components/transfer/demo/senior.md
@@ -9,18 +9,19 @@ title: 高级功能
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Transfer, Button } from '@kdcloudjs/kdesign'
+import type { ITransferProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const mockData = []
-  const oriTargetKeys = []
+  const mockData: ITransferProps['dataSource'] = []
+  const oriTargetKeys: ITransferProps['targetKeys'] = []
 
-  const [targetKeys, setTargetKeys] = React.useState(oriTargetKeys)
-  const [selectedKeys, setSelectedKeys] = React.useState<Array<TransferItem>>([])
-  const handleChange = (nextTargetKeys) => {
+  const [targetKeys, setTargetKeys] = React.useState<ITransferProps['targetKeys']>(oriTargetKeys)
+  const [selectedKeys, setSelectedKeys] = React.useState<ITransferProps['selectedKeys']>([])
+  const handleChange: ITransferProps['onChange'] = (nextTargetKeys) => {
     setTargetKeys(nextTargetKeys)
   }
 
-  const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
+  const handleSelectChange: ITransferProps['onSelectChange'] = (sourceSelectedKeys, targetSelectedKeys) => {
     setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys])
   }
 
@@ -29,7 +30,7 @@ const Demo: React.FC = () => {
     height: '400px',
   }
 
-  const noDataContent = ({ direction }) => {
+  const noDataContent: ITransferProps['noDataContent'] = ({ direction }) => {
     if (direction === 'left') {
       return <div>Source is empty~</div>
     } else {
@@ -62,4 +63,4 @@ const Demo: React.FC = () => {
 }
 
 ReactDOM.render(<Demo />, mountNode)
-```
+```
diff --git a/components/transfer/demo/show-search.md b/components/transfer/demo/show-search.md
@@ -9,9 +9,10 @@ title: 带搜索框
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Transfer } from '@kdcloudjs/kdesign'
+import type { ITransferProps, ITransferRef } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const mockData = []
+  const mockData: ITransferProps['dataSource'] = []
   for (let i = 1; i < 20; i++) {
     mockData.push({
       key: i.toString(),
@@ -22,17 +23,21 @@ const Demo: React.FC = () => {
   }
   const oriTargetKeys = mockData.filter((item) => +item.key % 3 >= 1).map((item) => item.key)
 
-  const [targetKeys, setTargetKeys] = React.useState(oriTargetKeys)
-  const [selectedKeys, setSelectedKeys] = React.useState<Array<TransferItem>>([])
-  const handleChange = (nextTargetKeys) => {
+  const [targetKeys, setTargetKeys] = React.useState<ITransferProps['targetKeys']>(oriTargetKeys)
+  const [selectedKeys, setSelectedKeys] = React.useState<ITransferProps['selectedKeys']>([])
+  const transerDom = React.useRef<ITransferRef>(null)
+  React.useEffect(() => {
+    transerDom.current?.clearSearch()
+  }, [])
+  const handleChange: ITransferProps['onChange'] = (nextTargetKeys) => {
     setTargetKeys(nextTargetKeys)
   }
 
-  const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
+  const handleSelectChange: ITransferProps['onSelectChange'] = (sourceSelectedKeys, targetSelectedKeys) => {
     setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys])
   }
 
-  const filterOption = (inputValue, option) => {
+  const filterOption: ITransferProps['filterOption'] = (inputValue, option) => {
     return option.title.includes(inputValue)
   }
 

diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
@@ -1,6 +1,6 @@
 import Transfer from './transfer'
 
-export { TransferProps } from './transfer'
+export { TransferProps, ITransferRef } from './transfer'
 
 export { TransferListProps } from './list'
 

diff --git a/components/transfer/interface.ts b/components/transfer/interface.ts
@@ -9,7 +9,7 @@ export type RenderResult = React.ReactElement | RenderResultObject | string | nu
 
 export interface TransferItem {
   key: string
-  title?: string
+  title: string
   description?: string
   disabled?: boolean
   [name: string]: any

diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx
@@ -46,7 +46,11 @@ export interface TransferListProps {
   pagination?: PaginationType
 }
 
-const ITransferList = (props: TransferListProps, ref: any) => {
+export interface ListRef {
+  onClear: () => void
+}
+
+const ITransferList = (props: TransferListProps, ref: React.Ref<ListRef>) => {
   const {
     prefixCls,
     dataSource,
@@ -281,7 +285,7 @@ const ITransferList = (props: TransferListProps, ref: any) => {
   )
 }
 
-const TransferList = React.forwardRef<unknown, TransferListProps>(ITransferList)
+const TransferList = React.forwardRef<ListRef, TransferListProps>(ITransferList)
 
 TransferList.defaultProps = {
   dataSource: [],