fix(all components): fix all components

Tencent · May 3, 2024 · fe5aebc · fe5aebc
1 parent 0db3d56
commit fe5aebc
Show file tree

Hide file tree

Showing 103 changed files with 543 additions and 375 deletions.
diff --git a/src/affix/_example/container.tsx b/src/affix/_example/container.tsx
@@ -1,12 +1,12 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Affix, Button } from 'tdesign-react';
+import { Affix, Button, type AffixProps } from 'tdesign-react';
 
 export default function ContainerExample() {
   const [container, setContainer] = useState(null);
   const [affixed, setAffixed] = useState(false);
   const affixRef = useRef(null);
 
-  const handleFixedChange = (affixed, { top }) => {
+  const handleFixedChange: AffixProps['onFixedChange'] = (affixed, { top }) => {
     console.log('top', top);
     setAffixed(affixed);
   };

diff --git a/src/anchor/_example/base.tsx b/src/anchor/_example/base.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Anchor, type TdAnchorProps } from 'tdesign-react';
+import { Anchor, type AnchorProps } from 'tdesign-react';
 
 const { AnchorItem } = Anchor;
 
 export default function AnchorBase() {
-  const handleClick = ({ e, href, title }) => {
+  const handleClick: AnchorProps['onClick'] = ({ e, href, title }) => {
     console.log('handleClick', e, href, title);
   };
-  const handleChange: TdAnchorProps['onChange'] = (currentLink, prevLink) => {
+  const handleChange: AnchorProps['onChange'] = (currentLink, prevLink) => {
     console.log('currentLink', currentLink, 'prevLink', prevLink);
   };
   return (

diff --git a/src/auto-complete/_example/base.tsx b/src/auto-complete/_example/base.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Space, AutoComplete, Button } from 'tdesign-react';
+import { Space, AutoComplete, Button, type AutoCompleteProps } from 'tdesign-react';
 import { SearchIcon } from 'tdesign-icons-react';
 
 const classStyles = `
@@ -13,15 +13,15 @@ const classStyles = `
 </style>
 `;
 
-let timer = null;
+let timer: ReturnType<typeof setTimeout> = null;
 const AutoCompleteBase = () => {
   const [value, setValue] = useState('');
   const [value2, setValue2] = useState('');
   const [options, setOptions] = useState(['第一个默认联想词', '第二个默认联想词', '第三个默认联想词']);
   const [options2] = useState(['第一个默认联想词', '第二个默认联想词', '第三个默认联想词']);
 
   // 输入框内容发生变化时进行搜索，100ms 搜索一次
-  const onChange = (val) => {
+  const onChange: AutoCompleteProps['onChange'] = (val) => {
     setValue(val);
     clearTimeout(timer);
     timer = setTimeout(() => {

diff --git a/src/auto-complete/_example/filter.tsx b/src/auto-complete/_example/filter.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Space, AutoComplete } from 'tdesign-react';
+import { Space, AutoComplete, type AutoCompleteProps } from 'tdesign-react';
 import escapeRegExp from 'lodash/escapeRegExp';
 
 const LIST = ['第一个 AutoComplete 默认联想词', '第二个 AutoComplete 默认联想词', '第三个 AutoComplete 默认联想词'];
@@ -8,10 +8,10 @@ const AutoCompleteBaseFilter = () => {
   const [value1, setValue1] = useState('');
   const [value2, setValue2] = useState('');
 
-  function filterWords(keyword, option) {
+  const filterWords: AutoCompleteProps['filter'] = (keyword, option: string) => {
     const regExp = new RegExp(escapeRegExp(keyword));
-    return regExp.test(option.text);
-  }
+    return regExp.test(option);
+  };
 
   return (
     <Space style={{ width: '100%' }}>

diff --git a/src/auto-complete/_example/trigger-element.tsx b/src/auto-complete/_example/trigger-element.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { AutoComplete, Textarea } from 'tdesign-react';
+import { AutoComplete, Textarea, type AutoCompleteProps } from 'tdesign-react';
 
-let timer = null;
+let timer: ReturnType<typeof setTimeout> = null;
 
 const AutoCompleteTriggerElement = () => {
   const [value, setValue] = useState('');
@@ -12,7 +12,7 @@ const AutoCompleteTriggerElement = () => {
   ]);
 
   // 输入框内容发生变化时进行搜索，200ms 搜索一次
-  function onChange(val) {
+  const onChange: AutoCompleteProps['onChange'] = (val) => {
     setValue(val);
     clearTimeout(timer);
     timer = setTimeout(() => {
@@ -21,20 +21,11 @@ const AutoCompleteTriggerElement = () => {
       setOptions([`${pureValue}First ${text}`, `${pureValue}Second ${text}`, `${pureValue}Third ${text}`]);
       clearTimeout(timer);
     }, 200);
-  }
+  };
 
   return (
-    <AutoComplete
-      value={value}
-      options={options}
-      onChange={onChange}
-      highlightKeyword
-    >
-      <Textarea
-        value={value}
-        onChange={setValue}
-        placeholder="自定义联想词触发元素"
-      />
+    <AutoComplete value={value} options={options} onChange={onChange} highlightKeyword>
+      <Textarea value={value} onChange={setValue} placeholder="自定义联想词触发元素" />
     </AutoComplete>
   );
 };

diff --git a/src/calendar/_example/card.tsx b/src/calendar/_example/card.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import { Button, Calendar, Select, Switch, Space } from 'tdesign-react';
 
+type Theme = 'card' | 'full';
+
 export default function CalendarExample() {
   const ref = React.useRef(null);
-  const [theme, setTheme] = React.useState('card');
+  const [theme, setTheme] = React.useState<Theme>('card');
   const [fillWithZero, setFillWithZero] = React.useState(false);
   const toCurrent = React.useCallback(() => {
     ref.current.toCurrent();
@@ -24,7 +26,7 @@ export default function CalendarExample() {
             { label: '卡片风格', value: 'card' },
             { label: '全屏风格', value: 'full' },
           ]}
-          onChange={(value) => setTheme(value)}
+          onChange={(value: Theme) => setTheme(value)}
         />
         <Button theme="primary" style={{ marginLeft: '12px' }} onClick={toCurrent}>
           回到今天

diff --git a/src/calendar/_example/cell-append.tsx b/src/calendar/_example/cell-append.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { Calendar, Tag } from 'tdesign-react';
+import { Calendar, Tag, type CalendarCell } from 'tdesign-react';
 import dayjs from 'dayjs';
 
 export default function CalendarExample() {
-  const getShow = (data) =>
+  const getShow = (data: CalendarCell) =>
     data.mode === 'month'
       ? dayjs().format('YYYY-MM-DD') === data.formattedDate
       : data.date.getMonth() === new Date().getMonth();

diff --git a/src/calendar/_example/cell.tsx b/src/calendar/_example/cell.tsx
@@ -1,19 +1,26 @@
 import React from 'react';
-import { Calendar, Tag, Space } from 'tdesign-react';
+import { Calendar, Tag, Space, type CalendarCell } from 'tdesign-react';
 import dayjs from 'dayjs';
 
+type TagTheme = 'default' | 'danger' | 'warning' | 'success' | 'primary';
+
+interface DataList {
+  label: string;
+  value: TagTheme;
+}
+
 export default function CalendarExample() {
-  const displayNum = React.useCallback((date) => {
+  const displayNum = React.useCallback((date: CalendarCell) => {
     if (date.mode === 'month') {
       return date.date.getDate();
     }
     return date.date.getMonth() + 1;
   }, []);
 
-  const isShow = (data) =>
+  const isShow = (data: CalendarCell) =>
     data.mode === 'month' ? dayjs(data.formattedDate).date() === 15 : dayjs(data.formattedDate).month() === 7;
 
-  const dataList = [
+  const dataList: DataList[] = [
     {
       value: 'danger',
       label: '错误事件',

diff --git a/src/calendar/_example/controller-config.tsx b/src/calendar/_example/controller-config.tsx
@@ -112,54 +112,54 @@ export default function CalendarExample() {
           <legend>控件全局</legend>
           <p>
             <label>是否显示（全部控件）：</label>
-            <Switch value={visible} onChange={setVisible} />
+            <Switch value={visible} onChange={(val) => setVisible(val)} />
           </p>
           <br />
           <p>
             <label>是否禁用（全部控件）：</label>
-            <Switch value={disabled} onChange={setDisabled} />
+            <Switch value={disabled} onChange={(val) => setDisabled(val)} />
           </p>
           <br />
         </fieldset>
         <fieldset>
           <legend>控件局部</legend>
           <p>
             <label>是否显示“模式切换”控件：</label>
-            <Switch value={modeVisible} onChange={setModeVisible} />
+            <Switch value={modeVisible} onChange={(val) => setModeVisible(val)} />
             <label>是否禁用“模式切换”控件：</label>
-            <Switch value={modeDisabled} onChange={setModeDisabled} />
+            <Switch value={modeDisabled} onChange={(val) => setModeDisabled(val)} />
           </p>
           <br />
           <p>
             <label>是否显示“年份选择”控件：</label>
-            <Switch value={yearVisible} onChange={setYearVisible} />
+            <Switch value={yearVisible} onChange={(val) => setYearVisible(val)} />
             <label>是否禁用“年份选择”控件：</label>
-            <Switch value={yearDisabled} onChange={setYearDisabled} />
+            <Switch value={yearDisabled} onChange={(val) => setYearDisabled(val)} />
           </p>
           <br />
           <p>
             <label>是否显示“月份选择”控件：</label>
-            <Switch value={monthVisible} onChange={setMonthVisible} />
+            <Switch value={monthVisible} onChange={(val) => setMonthVisible(val)} />
             <label>是否禁用“月份选择”控件：</label>
-            <Switch value={monthDisabled} onChange={setMonthDisabled} />
+            <Switch value={monthDisabled} onChange={(val) => setMonthDisabled(val)} />
           </p>
           <br />
           <p>
             <label>是否禁用“隐藏周末”控件：</label>
-            <Switch value={weekendHideButtonDisabled} onChange={setWeekendHideButtonDisabled} />
+            <Switch value={weekendHideButtonDisabled} onChange={(val) => setWeekendHideButtonDisabled(val)} />
             <label>是否禁用“显示周末”控件：</label>
-            <Switch value={weekendShowButtonDisabled} onChange={setWeekendShowButtonDisabled} />
+            <Switch value={weekendShowButtonDisabled} onChange={(val) => setWeekendShowButtonDisabled(val)} />
             <label>是否显示“隐藏\显示周末”控件：</label>
-            <Switch value={weekendToggleVisible} onChange={setWeekendToggleVisible} />
+            <Switch value={weekendToggleVisible} onChange={(val) => setWeekendToggleVisible(val)} />
           </p>
           <br />
           <p>
             <label>是否显示“今天\本月”控件：</label>
-            <Switch value={currentVisible} onChange={setCurrentVisible} />
+            <Switch value={currentVisible} onChange={(val) => setCurrentVisible(val)} />
             <label>是否禁用“今天”按钮控件：</label>
-            <Switch value={currentDayButtonDisabled} onChange={setCurrentDayButtonDisabled} />
+            <Switch value={currentDayButtonDisabled} onChange={(val) => setCurrentDayButtonDisabled(val)} />
             <label>是否禁用“本月”按钮控件：</label>
-            <Switch value={currentMonthButtonDisabled} onChange={setCurrentMonthButtonDisabled} />
+            <Switch value={currentMonthButtonDisabled} onChange={(val) => setCurrentMonthButtonDisabled(val)} />
           </p>
           <br />
           <Calendar

diff --git a/src/calendar/_example/event-props-api.tsx b/src/calendar/_example/event-props-api.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Alert, Switch, Calendar, List } from 'tdesign-react';
+import { Alert, Switch, Calendar, List, type CalendarProps, type CalendarCell } from 'tdesign-react';
 
 const { ListItem } = List;
 
 export default function CalendarExample() {
   const [preventCellContextmenu, setPreventCellContextmenu] = React.useState(false);
   const [histories, setHistories] = React.useState([]);
 
-  const getDateStr = React.useCallback((calendarCell) => {
+  const getDateStr = React.useCallback((calendarCell: CalendarCell) => {
     const y = calendarCell.date.getFullYear();
     const m = calendarCell.date.getMonth() + 1;
     const d = calendarCell.date.getDate();
@@ -16,39 +16,39 @@ export default function CalendarExample() {
   }, []);
 
   const appendHistories = React.useCallback(
-    (content, data) => {
+    (content: string, data: CalendarCell) => {
       histories.unshift(`${content}`);
       setHistories([...histories]);
       console.info(data);
     },
     [histories, setHistories],
   );
 
-  const onCellClick = React.useCallback(
+  const onCellClick = React.useCallback<CalendarProps['onCellClick']>(
     (cellEmitData) => {
       const output = getDateStr(cellEmitData.cell);
       appendHistories(`鼠标左键单击单元格 ${output}`, cellEmitData.cell);
     },
     [getDateStr, appendHistories],
   );
 
-  const onCellDoubleClick = React.useCallback(
+  const onCellDoubleClick = React.useCallback<CalendarProps['onCellDoubleClick']>(
     (cellEmitData) => {
       const output = getDateStr(cellEmitData.cell);
       appendHistories(`鼠标双击单元格 ${output}`, cellEmitData.cell);
     },
     [getDateStr, appendHistories],
   );
 
-  const onCellRightClick = React.useCallback(
+  const onCellRightClick = React.useCallback<CalendarProps['onCellRightClick']>(
     (cellEmitData) => {
       const output = getDateStr(cellEmitData.cell);
       appendHistories(`鼠标右键单击单元格 ${output}`, cellEmitData.cell);
     },
     [getDateStr, appendHistories],
   );
 
-  const onControllerChange = React.useCallback(
+  const onControllerChange = React.useCallback<CalendarProps['onControllerChange']>(
     (data) => {
       appendHistories('控件值变化', data);
     },

diff --git a/src/calendar/_example/events.tsx b/src/calendar/_example/events.tsx
@@ -1,34 +1,34 @@
 import React from 'react';
-import { Switch, Calendar } from 'tdesign-react';
+import { Switch, Calendar, type CalendarProps } from 'tdesign-react';
 
 export default function CalendarExample() {
   const [preventCellContextmenu, setPreventCellContextmenu] = React.useState(false);
 
-  const cellClick = (options) => {
+  const cellClick: CalendarProps['onCellClick'] = (options) => {
     console.log(`鼠标左键单击单元格 ${options.cell.formattedDate}`);
   };
 
-  const cellDoubleClick = (options) => {
+  const cellDoubleClick: CalendarProps['onCellDoubleClick'] = (options) => {
     console.log(`鼠标双击单元格 ${options.cell.formattedDate}`);
   };
 
-  const cellRightClick = (options) => {
+  const cellRightClick: CalendarProps['onCellRightClick'] = (options) => {
     console.log(`鼠标右键点击元格 ${options.cell.formattedDate}`);
   };
 
-  const controllerChange = (data) => {
+  const controllerChange: CalendarProps['onControllerChange'] = (data) => {
     console.log('控件值变化', data);
   };
 
-  const monthChange = (data) => {
+  const monthChange: CalendarProps['onMonthChange'] = (data) => {
     console.log('月份变化', data);
   };
 
   return (
     <div>
       <div style={{ margin: '12px 0' }}>
         <label>禁用单元格右键菜单：</label>
-        <Switch value={preventCellContextmenu} onChange={setPreventCellContextmenu} />
+        <Switch value={preventCellContextmenu} onChange={(val) => setPreventCellContextmenu(val)} />
       </div>
       <Calendar
         preventCellContextmenu={preventCellContextmenu}

diff --git a/src/calendar/_example/filter.tsx b/src/calendar/_example/filter.tsx
@@ -8,7 +8,7 @@ export default function CalendarExample() {
     <div>
       <div style={{ margin: '12px 0' }}>
         <label>{`${isShowWeekendDefault ? '显示' : '隐藏'}周末`}</label>
-        <Switch value={isShowWeekendDefault} onChange={setIsShowWeekendDefault} />
+        <Switch value={isShowWeekendDefault} onChange={(val) => setIsShowWeekendDefault(val)} />
       </div>
       <Calendar isShowWeekendDefault={isShowWeekendDefault} />
     </div>

diff --git a/src/calendar/_example/first-day-of-week.tsx b/src/calendar/_example/first-day-of-week.tsx
@@ -24,7 +24,7 @@ export default function CalendarExample() {
             { label: '周六', value: 6 },
             { label: '周日', value: 7 },
           ]}
-          onChange={(value) => setFirstDayOfWeek(value)}
+          onChange={(value: number) => setFirstDayOfWeek(value)}
         />
       </Space>
       <Calendar firstDayOfWeek={firstDayOfWeek} />

diff --git a/src/calendar/_example/mode.tsx b/src/calendar/_example/mode.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import { Select, Calendar, Space } from 'tdesign-react';
 
+type Mode = 'year' | 'month';
+
 export default function CalendarExample() {
-  const [mode, setMode] = React.useState('year');
+  const [mode, setMode] = React.useState<Mode>('year');
 
   return (
     <div>
@@ -19,7 +21,7 @@ export default function CalendarExample() {
             { label: '月历', value: 'year' },
             { label: '日历', value: 'month' },
           ]}
-          onChange={(value) => setMode(value)}
+          onChange={(value: Mode) => setMode(value)}
         />
       </Space>
       <Calendar mode={mode} />