docs: 更新 tsx demo 类型定义

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

Hide file tree

Showing 115 changed files with 751 additions and 556 deletions.
diff --git a/src/guide/_example/base.tsx b/src/guide/_example/base.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';
+import { Button, Drawer, Guide, GuideStep, Input, Row } from 'tdesign-react';
 
 const classStyles = `
 <style>
@@ -52,13 +52,13 @@ export default function BasicGuide() {
     document.head.insertAdjacentHTML('beforeend', classStyles);
   }, []);
 
-  const steps = [
+  const steps: GuideStep[] = [
     {
       element: '.main-title-base',
       title: '新手引导标题',
       body: '新手引导的说明文案',
       placement: 'bottom-right',
-      stepOverlayClass: 't-test-guide-step-overlay'
+      stepOverlayClass: 't-test-guide-step-overlay',
     },
     {
       element: '.label-field-base',

diff --git a/src/guide/_example/custom-popup.tsx b/src/guide/_example/custom-popup.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { ArrowUpIcon } from 'tdesign-icons-react';
-import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';
+import { Button, Drawer, Guide, GuideStep, Input, Row } from 'tdesign-react';
 
 const classStyles = `
 <style>
@@ -153,25 +153,25 @@ export default function CustomPopupGuide() {
     console.log(e, current, total);
   };
 
-  const steps = [
+  const steps: GuideStep[] = [
     {
       element: '.main-title-custom-popup',
       title: '新手引导标题',
-      description: '新手引导的说明文案',
+      // description: '新手引导的说明文案',
       placement: 'bottom-right',
       content: <MyPopup />,
     },
     {
       element: '.label-field-1-custom-popup',
       title: '新手引导标题',
-      description: '新手引导的说明文案',
+      // description: '新手引导的说明文案',
       placement: 'bottom',
       content: <MyPopup />,
     },
     {
       element: '.label-field-2-custom-popup',
       title: '新手引导标题',
-      description: '新手引导的说明文案',
+      // description: '新手引导的说明文案',
       placement: 'bottom-left',
       content: <MyPopup />,
     },

diff --git a/src/guide/_example/no-mask.tsx b/src/guide/_example/no-mask.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';
+import { Button, Drawer, Guide, GuideStep, Input, Row } from 'tdesign-react';
 
 const classStyles = `
 <style>
@@ -53,7 +53,7 @@ export default function NoMaskGuide() {
     document.head.insertAdjacentHTML('beforeend', classStyles);
   }, []);
 
-  const steps = [
+  const steps: GuideStep[] = [
     {
       element: '.main-title-no-mask',
       title: '新手引导标题',

diff --git a/src/guide/_example/popup-dialog.tsx b/src/guide/_example/popup-dialog.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Button, Drawer, Guide, Input, Row } from 'tdesign-react';
+import { Button, Drawer, Guide, GuideStep, Input, Row } from 'tdesign-react';
 
 const classStyles = `
 <style>
@@ -87,7 +87,7 @@ export default function PopupDialogGuide() {
     document.head.insertAdjacentHTML('beforeend', classStyles);
   }, []);
 
-  const steps = [
+  const steps: GuideStep[] = [
     {
       element: '.main-title-popup-dialog',
       title: '新手引导标题',

diff --git a/src/input-number/_example/center.tsx b/src/input-number/_example/center.tsx
@@ -1,10 +1,10 @@
 import React, { useState, useMemo } from 'react';
-import { InputNumber, Space } from 'tdesign-react';
+import { InputNumber, InputNumberValue, Space } from 'tdesign-react';
 
 export default function InputNumberExample() {
-  const [value1, setValue1] = useState('');
+  const [value1, setValue1] = useState<InputNumberValue>('');
   const [value2, setValue2] = useState(100);
-  const [decimalValue, setDecimalValue] = useState(3.41);
+  const [decimalValue, setDecimalValue] = useState<InputNumberValue>(3.41);
   const [error, setError] = useState();
 
   const tips = useMemo(() => {

diff --git a/src/input-number/_example/format.tsx b/src/input-number/_example/format.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { InputNumber, Space } from 'tdesign-react';
+import { InputNumber, InputNumberValue, Space } from 'tdesign-react';
 
 export default function InputNumberExample() {
-  const [value, setValue] = useState(0);
-  const [value1, setValue1] = useState(0);
+  const [value, setValue] = useState<InputNumberValue>(0);
+  const [value1, setValue1] = useState<InputNumberValue>(0);
 
   return (
     <Space direction="vertical">

diff --git a/src/input-number/_example/status.tsx b/src/input-number/_example/status.tsx
@@ -1,13 +1,15 @@
 import React, { useState } from 'react';
 import { Form, InputNumber, Space, Radio } from 'tdesign-react';
 
+type AlignType = 'hide' | 'align-left' | 'align-input';
+
 const { FormItem } = Form;
 export default function Status() {
-  const [type, setType] = useState('align-input');
+  const [type, setType] = useState<AlignType>('align-input');
 
   return (
     <Space direction="vertical">
-      <Radio.Group value={type} onChange={setType} variant="default-filled">
+      <Radio.Group value={type} onChange={(val: AlignType) => setType(val)} variant="default-filled">
         <Radio.Button value="hide">隐藏文本提示</Radio.Button>
         <Radio.Button value="align-left">文本提示左对齐</Radio.Button>
         <Radio.Button value="align-input">文本提示对齐输入框</Radio.Button>

diff --git a/src/input-number/_example/step.tsx b/src/input-number/_example/step.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { InputNumber } from 'tdesign-react';
+import { InputNumber, InputNumberValue } from 'tdesign-react';
 
 export default function InputNumberExample() {
-  const [value, setValue] = useState(3.2);
+  const [value, setValue] = useState<InputNumberValue>(3.2);
 
   return <InputNumber max={15} min={-5} step={1.2} decimalPlaces={2} value={value} onChange={setValue} />;
 }
diff --git a/src/input/_example/format.tsx b/src/input/_example/format.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Input } from 'tdesign-react';
+import { Input, InputProps } from 'tdesign-react';
 
 export default function InputExample() {
   const [value, setValue] = useState('');
@@ -9,7 +9,7 @@ export default function InputExample() {
     return str;
   }
 
-  const inputStatus = isNaN(+value) ? 'error' : '';
+  const inputStatus: InputProps['status'] = isNaN(+value) ? 'error' : 'default';
   const tips = inputStatus ? '请输入数字' : '';
 
   return (

diff --git a/src/list/_example/asyncLoading.tsx b/src/list/_example/asyncLoading.tsx
@@ -1,11 +1,10 @@
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { List, Radio } from 'tdesign-react';
 
 const { ListItem } = List;
 
 export default function BasicList() {
-
-  const [asyncLoading, setAsyncLoading] = useState('');
+  const [asyncLoading, setAsyncLoading] = useState<ReactNode>('');
 
   const listData = [
     { id: 1, content: '列表内容列表内容列表内容' },
@@ -15,24 +14,24 @@ export default function BasicList() {
   ];
   const handleAsyncLoading = (val) => {
     if (val === 'loading-custom') {
-      setAsyncLoading(<div style={{ textAlign: 'center', marginTop: 12, }}> 没有更多数据了 </div>);
+      setAsyncLoading(<div style={{ textAlign: 'center', marginTop: 12 }}> 没有更多数据了 </div>);
     } else {
       setAsyncLoading(val);
     }
   };
 
   const onLoadMore = (e) => {
     console.log(e);
-    handleAsyncLoading('loading')
-  }
+    handleAsyncLoading('loading');
+  };
 
   return (
     <>
-      <Radio.Group size='large' onChange={(value) => handleAsyncLoading(value)}>
-        <Radio.Button value='load-more'>加载更多</Radio.Button>
-        <Radio.Button value='loading'>加载中</Radio.Button>
-        <Radio.Button value='loading-custom'>自定义加载更多</Radio.Button>
-        <Radio.Button value=''>加载完成</Radio.Button>
+      <Radio.Group size="large" onChange={(value) => handleAsyncLoading(value)}>
+        <Radio.Button value="load-more">加载更多</Radio.Button>
+        <Radio.Button value="loading">加载中</Radio.Button>
+        <Radio.Button value="loading-custom">自定义加载更多</Radio.Button>
+        <Radio.Button value="">加载完成</Radio.Button>
       </Radio.Group>
       <div style={{ marginBottom: '16px' }}></div>
       <List asyncLoading={asyncLoading} onLoadMore={({ e }) => onLoadMore(e)}>

diff --git a/src/loading/_example/delay.tsx b/src/loading/_example/delay.tsx
@@ -5,7 +5,7 @@ export default function LoadingDelay() {
   const [data, setData] = useState('');
   const [loading, setLoading] = useState(false);
 
-  const loadingData = (time) => {
+  const loadingData = (time?: number) => {
     setLoading(true);
     setData('');
     const timer = setTimeout(() => {
@@ -33,7 +33,7 @@ export default function LoadingDelay() {
       </div>
 
       <div className="tdesign-demo-block-row">
-        <Button onClick={loadingData} size="small">
+        <Button onClick={() => loadingData()} size="small">
           快速重新加载数据（无loading）
         </Button>
         <Button onClick={() => loadingData(1000)} size="small">

diff --git a/src/message/_example/close.tsx b/src/message/_example/close.tsx
@@ -10,7 +10,7 @@ export default function () {
       <Message duration={0} theme="info" closeBtn={'关闭'}>
         自定义关闭按钮（文字）
       </Message>
-      <Message duration={0} theme="info" closeBtn={(close) => <div onClick={close}>x</div>}>
+      <Message duration={0} theme="info" closeBtn={<div>x</div>}>
         自定义关闭按钮（函数）
       </Message>
       <Message duration={0} theme="info" closeBtn={<div onClick={() => console.log('close')}>x</div>}>

diff --git a/src/message/_example/methods.tsx b/src/message/_example/methods.tsx
@@ -8,7 +8,7 @@ export default function () {
         onClick={() => {
           MessagePlugin.info({
             content: 'This is info Message',
-            close: true,
+            closeBtn: true,
           });
         }}
       >
@@ -19,7 +19,7 @@ export default function () {
         onClick={() => {
           MessagePlugin.success({
             content: 'This is success Message',
-            close: true,
+            closeBtn: true,
           });
         }}
       >
@@ -30,7 +30,7 @@ export default function () {
         onClick={() => {
           MessagePlugin.warning({
             content: 'This is warning Message',
-            close: true,
+            closeBtn: true,
           });
         }}
       >
@@ -41,7 +41,7 @@ export default function () {
         onClick={() => {
           MessagePlugin.error({
             content: 'This is error Message',
-            close: true,
+            closeBtn: true,
           });
         }}
       >
@@ -52,7 +52,7 @@ export default function () {
         onClick={() => {
           MessagePlugin.question({
             content: 'This is question Message',
-            close: true,
+            closeBtn: true,
           });
         }}
       >
@@ -63,7 +63,7 @@ export default function () {
         onClick={() => {
           MessagePlugin.loading({
             content: 'This is loading Message',
-            close: true,
+            closeBtn: true,
           });
         }}
       >

diff --git a/src/message/_example/offset.tsx b/src/message/_example/offset.tsx
@@ -1,67 +1,67 @@
-import React, { useState } from 'react';
-import { Button, MessagePlugin, Input, Space } from 'tdesign-react';
+import React, { CSSProperties, useState } from 'react';
+import { Button, MessagePlugin, Input, Space, InputValue } from 'tdesign-react';
 
-const placementStyle = {
+const placementStyle: CSSProperties = {
   position: 'relative',
   margin: '0 auto',
   width: '500px',
   height: '260px',
 };
-const placementCenterStyle = {
+const placementCenterStyle: CSSProperties = {
   position: 'absolute',
   right: '42%',
   bottom: '42%',
 };
-const placementTopStyle = {
+const placementTopStyle: CSSProperties = {
   position: 'absolute',
   top: '0',
   left: '42%',
 };
-const placementTopLeftStyle = {
+const placementTopLeftStyle: CSSProperties = {
   position: 'absolute',
   top: '0',
   left: '70px',
 };
-const placementTopRightStyle = {
+const placementTopRightStyle: CSSProperties = {
   position: 'absolute',
   top: '0',
   right: '70px',
 };
-const placementBottomStyle = {
+const placementBottomStyle: CSSProperties = {
   position: 'absolute',
   bottom: '0',
   left: '42%',
 };
-const placementBottomLeftStyle = {
+const placementBottomLeftStyle: CSSProperties = {
   position: 'absolute',
   bottom: '0',
   left: '70px',
 };
-const placementBottomRightStyle = {
+const placementBottomRightStyle: CSSProperties = {
   position: 'absolute',
   bottom: '0',
   right: '70px',
 };
-const placementLeftStyle = {
+const placementLeftStyle: CSSProperties = {
   position: 'absolute',
   left: '0',
   top: '42%',
 };
-const placementRightStyle = {
+const placementRightStyle: CSSProperties = {
   position: 'absolute',
   right: '0',
   top: '42%',
 };
 
 export default function () {
-  const [offsetX, setOffsetX] = useState(0);
-  const [offsetY, setOffsetY] = useState(0);
+  const [offsetX, setOffsetX] = useState<InputValue>('0');
+  const [offsetY, setOffsetY] = useState<InputValue>('0');
 
   return (
     <Space direction="vertical">
       <Space>
         <Input
-          theme="column"
+          // theme="column"
           style={{ width: 200 }}
           placeholder={'请输入横向偏移量'}
           value={offsetX}
@@ -70,7 +70,7 @@ export default function () {
           }}
         />
         <Input
-          theme="column"
+          // theme="column"
           style={{ width: 200, marginLeft: 16 }}
           placeholder={'请输入纵向偏移量'}
           value={offsetY}