fix: [dropdown]typescript类型报错 fix #1008

kingdee · Dec 13, 2024 · 89253cf · 89253cf
1 parent 03dd096
commit 89253cf
Show file tree

Hide file tree

Showing 13 changed files with 111 additions and 81 deletions.
diff --git a/components/dropdown/demo/arrow.md b/components/dropdown/demo/arrow.md
@@ -5,12 +5,14 @@ title: 箭头
 
 通过添加 `arrow` 属性，给下拉框添加箭头。
 
-```jsx
+```tsx
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Dropdown, Button } from '@kdcloudjs/kdesign'
+import type { IDropdownProps } from '@kdcloudjs/kdesign'
+
 const Demo: React.FC = () => {
-  const menu = (
+  const menu: IDropdownProps['menu'] = (
     <Dropdown.Menu>
       <Dropdown.Item>
         <a target="_blank" rel="noopener noreferrer" href="https://www.kingdee.com/">
@@ -29,7 +31,7 @@ const Demo: React.FC = () => {
       </Dropdown.Item>
       <Dropdown.Item>
         <a target="_blank" rel="noopener noreferrer" href="https://www.jdy.com/">
-        jdy
+          jdy
         </a>
       </Dropdown.Item>
     </Dropdown.Menu>

diff --git a/components/dropdown/demo/basic.md b/components/dropdown/demo/basic.md
@@ -5,13 +5,14 @@ title: 基本
 
 基本下拉菜单。
 
-```jsx
+```tsx
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Dropdown, Icon } from '@kdcloudjs/kdesign'
+import type { IDropdownProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const menu = (
+  const menu: IDropdownProps['menu'] = (
     <Dropdown.Menu>
       <Dropdown.Item>
         <a target="_blank" rel="noopener noreferrer" href="https://www.kingdee.com/">
@@ -30,7 +31,7 @@ const Demo: React.FC = () => {
       </Dropdown.Item>
       <Dropdown.Item>
         <a target="_blank" rel="noopener noreferrer" href="https://www.jdy.com/">
-        jdy
+          jdy
         </a>
       </Dropdown.Item>
       <Dropdown.Item danger>a danger item</Dropdown.Item>
@@ -39,7 +40,11 @@ const Demo: React.FC = () => {
 
   return (
     <Dropdown menu={menu}>
-      <a href="true" className="kd-dropdown-link" style={{ width: '100px', display: 'block' }} onClick={(e) => e.preventDefault()}>
+      <a
+        href="true"
+        className="kd-dropdown-link"
+        style={{ width: '100px', display: 'block' }}
+        onClick={(e) => e.preventDefault()}>
         hover me <Icon type="arrow-down" />
       </a>
     </Dropdown>

diff --git a/components/dropdown/demo/contrllvisible.md b/components/dropdown/demo/contrllvisible.md
@@ -3,35 +3,40 @@ order: 7
 title: 联动受控显隐
 ---
 
-visible的受外部控制，并且被的Menu的onClick事件修改。
+visible 的受外部控制，并且被的 Menu 的 onClick 事件修改。
 
-```jsx
+```tsx
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Dropdown, Icon } from '@kdcloudjs/kdesign'
+import type { IDropdownProps, IDropdownMenuProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const [visible, setVisible] = React.useState<boolean>(false)
+  const [visible, setVisible] = React.useState<IDropdownProps['visible']>(false)
 
-  const handleMenuClick = (key) => {
+  const handleMenuClick: IDropdownMenuProps['onClick'] = (key) => {
     if (key === '1') {
       setVisible(false)
     }
   }
 
-  const handleVisibleChange = (flag) => {
+  const handleVisibleChange: IDropdownProps['onVisibleChange'] = (flag) => {
     setVisible(flag)
   }
 
-  const menu = (
+  const menu: IDropdownProps['menu'] = (
     <Dropdown.Menu onClick={handleMenuClick}>
       <Dropdown.Item key="1">隐藏</Dropdown.Item>
     </Dropdown.Menu>
   )
 
   return (
     <Dropdown menu={menu} onVisibleChange={handleVisibleChange} visible={visible}>
-      <a href="true" className="kd-dropdown-link" style={{ width: '100px', display: 'block' }} onClick={(e) => e.preventDefault()}>
+      <a
+        href="true"
+        className="kd-dropdown-link"
+        style={{ width: '100px', display: 'block' }}
+        onClick={(e) => e.preventDefault()}>
         Hover me <Icon type="arrow-down" />
       </a>
     </Dropdown>

diff --git a/components/dropdown/demo/event.md b/components/dropdown/demo/event.md
@@ -5,20 +5,21 @@ title: 菜单项点击事件
 
 每个菜单项根据 key 进行不同的操作。
 
-```jsx
+```tsx
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Dropdown, Icon, Message } from '@kdcloudjs/kdesign'
+import type { IDropdownProps, IDropdownMenuProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const handleItemClick = (key) => {
+  const handleItemClick: IDropdownMenuProps['onClick'] = (key) => {
     Message.success({
       content: `click on Item ${key}`,
       closable: true,
     })
   }
 
-  const menu = (
+  const menu: IDropdownProps['menu'] = (
     <Dropdown.Menu onClick={handleItemClick}>
       <Dropdown.Item key="1">菜单1</Dropdown.Item>
       <Dropdown.Item key="2">菜单2</Dropdown.Item>
@@ -28,7 +29,11 @@ const Demo: React.FC = () => {
 
   return (
     <Dropdown menu={menu}>
-      <a href="true" style={{ width: '250px', display: 'block' }} className="kd-dropdown-link" onClick={(e) => e.preventDefault()}>
+      <a
+        href="true"
+        style={{ width: '250px', display: 'block' }}
+        className="kd-dropdown-link"
+        onClick={(e) => e.preventDefault()}>
         Click each item <Icon type="arrow-down" />
       </a>
     </Dropdown>

diff --git a/components/dropdown/demo/item.md b/components/dropdown/demo/item.md
@@ -5,13 +5,14 @@ title: 菜单项
 
 通过 `Item` 添加 `divided`（分隔线） 和 `disabled`（禁用）菜单项
 
-```jsx
+```tsx
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Dropdown, Icon } from '@kdcloudjs/kdesign'
+import type { IDropdownProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const menu = (
+  const menu: IDropdownProps['menu'] = (
     <Dropdown.Menu>
       <Dropdown.Item>
         <a target="_blank" rel="noopener noreferrer" href="https://www.kingdee.com/">
@@ -37,7 +38,11 @@ const Demo: React.FC = () => {
   )
   return (
     <Dropdown menu={menu}>
-      <a href="true" className="kd-dropdown-link" style={{ width: '100px', display: 'block' }} onClick={(e) => e.preventDefault()}>
+      <a
+        href="true"
+        className="kd-dropdown-link"
+        style={{ width: '100px', display: 'block' }}
+        onClick={(e) => e.preventDefault()}>
         Hover me <Icon type="arrow-down" />
       </a>
     </Dropdown>

diff --git a/components/dropdown/demo/menu-option.md b/components/dropdown/demo/menu-option.md
@@ -3,15 +3,16 @@ order: 7
 title: 配置菜单
 ---
 
-menu可以是一个对象数组
+menu 可以是一个对象数组
 
-```jsx
+```tsx
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Dropdown, Icon } from '@kdcloudjs/kdesign'
+import type { IDropdownProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const menu = [
+  const menu: IDropdownProps['menu'] = [
     {
       key: 1,
       label: '菜单1',
@@ -38,13 +39,17 @@ const Demo: React.FC = () => {
     },
   ]
 
-  const handleItemClick = (key) => {
+  const handleItemClick: IDropdownProps['onClick'] = (key) => {
     console.log(key)
   }
 
   return (
     <Dropdown menu={menu} onItemClick={handleItemClick}>
-      <a href="true" className="kd-dropdown-link" style={{ width: '100px', display: 'block' }} onClick={(e) => e.preventDefault()}>
+      <a
+        href="true"
+        className="kd-dropdown-link"
+        style={{ width: '100px', display: 'block' }}
+        onClick={(e) => e.preventDefault()}>
         Hover me <Icon type="arrow-down" />
       </a>
     </Dropdown>

diff --git a/components/dropdown/demo/placement.md b/components/dropdown/demo/placement.md
@@ -5,13 +5,14 @@ title: 弹出位置
 
 通过 `placement` 属性设置，支持 12 个弹出位置。
 
-```jsx
+```tsx
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Dropdown, Button } from '@kdcloudjs/kdesign'
+import type { IDropdownProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const menu = (
+  const menu: IDropdownProps['menu'] = (
     <Dropdown.Menu>
       <Dropdown.Item>
         <a target="_blank" rel="noopener noreferrer" href="https://www.kingdee.com/">
@@ -30,7 +31,7 @@ const Demo: React.FC = () => {
       </Dropdown.Item>
       <Dropdown.Item>
         <a target="_blank" rel="noopener noreferrer" href="https://www.jdy.com/">
-        jdy
+          jdy
         </a>
       </Dropdown.Item>
     </Dropdown.Menu>

diff --git a/components/dropdown/demo/trigger.md b/components/dropdown/demo/trigger.md
@@ -5,13 +5,14 @@ title: 触发方式
 
 提供了 `hover`、`click`、 `focus` 和 `contextMenu` 4 种触发方式，默认是 `hover` 触发菜单
 
-```jsx
+```tsx
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Dropdown, Button } from '@kdcloudjs/kdesign'
+import type { IDropdownProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
-  const menu = (
+  const menu: IDropdownProps['menu'] = (
     <Dropdown.Menu>
       <Dropdown.Item>
         <a target="_blank" rel="noopener noreferrer" href="https://www.kingdee.com/">
@@ -36,30 +37,28 @@ const Demo: React.FC = () => {
     </Dropdown.Menu>
   )
 
-  const triggers = ['hover', 'click', 'focus', 'contextMenu']
+  const triggers: IDropdownProps['trigger'] = ['hover', 'click', 'focus', 'contextMenu']
 
   return (
     <>
       {triggers.map((trigger) => (
-          <Dropdown key={trigger} menu={menu} trigger={trigger}>
-            {trigger === 'contextMenu' ? (
-              <div
-                style={{
-                  textAlign: 'center',
-                  height: 100,
-                  width: 200,
-                  lineHeight: '100px',
-                  background: '#f7f7f7',
-                  color: '#777',
-                }}>
-                Right Click on here
-              </div>
-            ) : (
-              <Button style={{ display: 'block', width: 120, marginBottom: 20 }}>
-                {trigger} me
-              </Button>
-            )}
-          </Dropdown>
+        <Dropdown key={trigger} menu={menu} trigger={trigger}>
+          {trigger === 'contextMenu' ? (
+            <div
+              style={{
+                textAlign: 'center',
+                height: 100,
+                width: 200,
+                lineHeight: '100px',
+                background: '#f7f7f7',
+                color: '#777',
+              }}>
+              Right Click on here
+            </div>
+          ) : (
+            <Button style={{ display: 'block', width: 120, marginBottom: 20 }}>{trigger} me</Button>
+          )}
+        </Dropdown>
       ))}
     </>
   )

diff --git a/components/dropdown/demo/visible.md b/components/dropdown/demo/visible.md
@@ -3,37 +3,37 @@ order: 6
 title: 受控显隐
 ---
 
-外部控制visible的值，以控制下拉框的显示隐藏。
+外部控制 visible 的值，以控制下拉框的显示隐藏。
 
-```jsx
+```tsx
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Dropdown, Icon, Switch, Input } from '@kdcloudjs/kdesign'
+import { Dropdown, Switch, Input } from '@kdcloudjs/kdesign'
+import type { IDropdownProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
   const [visible, setVisible] = React.useState<boolean>(false)
 
-  const changeVisible = (flag: boolean) => {
-    setVisible(flag)
-  }
-
-  const menu = (
-    <Dropdown.Menu >
+  const menu: IDropdownProps['menu'] = (
+    <Dropdown.Menu>
       <Dropdown.Item key="1">不隐藏</Dropdown.Item>
       <Dropdown.Item key="2">不隐藏</Dropdown.Item>
       <Dropdown.Item key="3">隐藏</Dropdown.Item>
     </Dropdown.Menu>
   )
 
-
   return (
     <>
-    <div>
-      <Switch onChange={changeVisible} />
-    </div>
-    <Dropdown menu={menu} visible={visible}>
-      <Input borderType="bordered" prefix="KDesign" suffix="Kdesign" />
-    </Dropdown>
+      <div>
+        <Switch
+          onChange={(flag: boolean) => {
+            setVisible(flag)
+          }}
+        />
+      </div>
+      <Dropdown menu={menu} visible={visible}>
+        <Input borderType="bordered" prefix="KDesign" suffix="Kdesign" />
+      </Dropdown>
     </>
   )
 }