chore: add tsconfig for develop and demo

Tencent · Jun 24, 2024 · 5b68b76 · 5b68b76
1 parent b6f90f3
commit 5b68b76
Show file tree

Hide file tree

Showing 33 changed files with 223 additions and 171 deletions.
diff --git a/src/back-top/_example/baseList.tsx b/src/back-top/_example/baseList.tsx
@@ -1,16 +1,17 @@
 import React, { useState } from 'react';
 import { BackTop, List } from 'tdesign-react';
+import type { CSSProperties } from 'react';
 
 export default function BasicBackTop() {
   const [container, setContainer] = useState(null);
 
-  const style = {
+  const style: CSSProperties = {
     position: 'absolute',
     insetInlineEnd: 24,
     insetBlockEnd: 80,
   };
 
-  const listWrapStyle = {
+  const listWrapStyle: CSSProperties = {
     width: '100%',
     height: '280px',
     position: 'relative',

diff --git a/src/back-top/_example/baseListSmall.tsx b/src/back-top/_example/baseListSmall.tsx
@@ -1,16 +1,17 @@
 import React, { useState } from 'react';
 import { BackTop, List } from 'tdesign-react';
+import type { CSSProperties } from 'react';
 
 export default function BasicBackTop() {
   const [container, setContainer] = useState(null);
 
-  const style = {
+  const style: CSSProperties = {
     position: 'absolute',
     insetInlineEnd: 24,
     insetBlockEnd: 80,
   };
 
-  const listWrapStyle = {
+  const listWrapStyle: CSSProperties = {
     width: '100%',
     height: '280px',
     position: 'relative',

diff --git a/src/back-top/_example/custom.tsx b/src/back-top/_example/custom.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { BackTop, Space } from 'tdesign-react';
+import type { CSSProperties } from 'react';
 
 export default function BasicBackTop() {
-  const style = {
+  const style: CSSProperties = {
     position: 'relative',
     insetInlineEnd: 0,
     insetBlockEnd: 0,

diff --git a/src/back-top/_example/shape.tsx b/src/back-top/_example/shape.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { BackTop, Space } from 'tdesign-react';
+import type { CSSProperties } from 'react';
 
 export default function BasicBackTop() {
-  const style = {
+  const style: CSSProperties = {
     position: 'relative',
     insetInlineEnd: 0,
     insetBlockEnd: 0,

diff --git a/src/back-top/_example/size.tsx b/src/back-top/_example/size.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { BackTop, Space } from 'tdesign-react';
+import type { CSSProperties } from 'react';
 
 export default function BasicBackTop() {
-  const style = {
+  const style: CSSProperties = {
     position: 'relative',
     insetInlineEnd: 0,
     insetBlockEnd: 0,

diff --git a/src/back-top/_example/theme.tsx b/src/back-top/_example/theme.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { BackTop, Space } from 'tdesign-react';
+import type { CSSProperties } from 'react';
 
 export default function BasicBackTop() {
-  const style = {
+  const style: CSSProperties = {
     position: 'relative',
     insetInlineEnd: 0,
     insetBlockEnd: 0,

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

diff --git a/src/image/_example/fill-mode.tsx b/src/image/_example/fill-mode.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Image, Space } from 'tdesign-react';
 
+import type { ImageProps } from 'tdesign-react';
+
 export default function FillModeImage() {
   const [src, setSrc] = useState('');
 
@@ -16,19 +18,17 @@ export default function FillModeImage() {
 
   return (
     <Space breakLine size={16}>
-      {
-        ['fill', 'contain', 'cover', 'none', 'scale-down'].map(item => (
-          <Space direction="vertical" align="left" key={item}>
-            <Image
-              src={src}
-              fit={item}
-              // fallback='https://tdesign.gtimg.com/demo/demo-image-1.png'
-              style={{width: 120, height: 120}}
-            />
-            {item}
-          </Space>
-        ))
-      }
+      {['fill', 'contain', 'cover', 'none', 'scale-down'].map((item: ImageProps['fit']) => (
+        <Space direction="vertical" align="start" key={item}>
+          <Image
+            src={src}
+            fit={item}
+            // fallback='https://tdesign.gtimg.com/demo/demo-image-1.png'
+            style={{ width: 120, height: 120 }}
+          />
+          {item}
+        </Space>
+      ))}
     </Space>
   );
 }
diff --git a/src/image/_example/fill-position.tsx b/src/image/_example/fill-position.tsx
@@ -2,104 +2,106 @@ import React from 'react';
 import { Image, Space } from 'tdesign-react';
 
 export default function FillPositionImage() {
-  return (<Space direction="vertical" style={{ width: '100%' }}>
-    <Space breakLine>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="cover"
-          position="center"
-          style={{width: 120, height: 120}}
-        />
-        cover center
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <Space breakLine>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="cover"
+            position="center"
+            style={{ width: 120, height: 120 }}
+          />
+          cover center
+        </Space>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="cover"
+            style={{ width: 120, height: 120 }}
+            position="left"
+          />
+          cover left
+        </Space>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="cover"
+            style={{ width: 120, height: 120 }}
+            position="right"
+          />
+          cover right
+        </Space>
       </Space>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="cover"
-          style={{width: 120, height: 120}}
-          position="left"
-        />
-        cover left
+      <Space style={{ marginTop: 20 }} breakLine>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="cover"
+            style={{ width: 280, height: 120 }}
+            position="top"
+          />
+          cover top
+        </Space>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="cover"
+            style={{ width: 280, height: 120 }}
+            position="bottom"
+          />
+          cover bottom
+        </Space>
       </Space>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="cover"
-          style={{width: 120, height: 120}}
-          position="right"
-        />
-        cover right
+      <Space style={{ marginTop: 20 }} breakLine>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="contain"
+            style={{ width: 120, height: 200 }}
+            position="top"
+          />
+          contain top
+        </Space>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="contain"
+            style={{ width: 120, height: 200 }}
+            position="bottom"
+          />
+          contain bottom
+        </Space>
+        <Space direction="vertical" align="start">
+          <Image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="contain"
+            style={{ width: 120, height: 200 }}
+            position="center"
+          />
+          contain center
+        </Space>
+        <Space style={{ marginTop: 20 }} breakLine>
+          <Space direction="vertical" align="start">
+            <Image
+              src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+              fit="contain"
+              style={{ width: 280, height: 120 }}
+              position="left"
+            />
+            contain left
+          </Space>
+          <Space direction="vertical" align="start">
+            <Image
+              src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+              fit="contain"
+              style={{ width: 280, height: 120 }}
+              position="right"
+            />
+            contain right
+          </Space>
+        </Space>
       </Space>
     </Space>
-    <Space style={{marginTop: 20}} breakLine>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="cover"
-          style={{width: 280, height: 120}}
-          position="top"
-        />
-        cover top
-      </Space>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="cover"
-          style={{width: 280, height: 120}}
-          position="bottom"
-        />
-        cover bottom
-      </Space>
-    </Space>
-    <Space style={{marginTop: 20}} breakLine>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="contain"
-          style={{width: 120, height: 200}}
-          position="top"
-        />
-        contain top
-      </Space>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="contain"
-          style={{width: 120, height: 200}}
-          position="bottom"
-        />
-        contain bottom
-      </Space>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="contain"
-          style={{width: 120, height: 200}}
-          position="center"
-        />
-        contain center
-      </Space>
-      <Space style={{marginTop: 20}} breakLine>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="contain"
-          style={{width: 280, height: 120}}
-          position="left"
-        />
-        contain left
-      </Space>
-      <Space direction="vertical" align="left">
-        <Image
-          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
-          fit="contain"
-          style={{width: 280, height: 120}}
-          position="right"
-        />
-        contain right
-      </Space>
-    </Space>
-    </Space>
-  </Space>);
+  );
 }
diff --git a/src/menu/_example/closable-side.tsx b/src/menu/_example/closable-side.tsx
@@ -2,10 +2,12 @@ import React, { useState } from 'react';
 import { Menu, Button } from 'tdesign-react';
 import { AppIcon, CodeIcon, FileIcon, UserIcon, ViewListIcon, MailIcon, RollbackIcon } from 'tdesign-icons-react';
 
+import type { MenuValue } from 'tdesign-react';
+
 const { SubMenu, MenuItem } = Menu;
 
 function ClosableSide() {
-  const [active, setActive] = useState('1-1');
+  const [active, setActive] = useState<MenuValue>('1-1');
   const [collapsed, setCollapsed] = useState(true);
 
   return (

diff --git a/src/menu/_example/custom-header.tsx b/src/menu/_example/custom-header.tsx
@@ -2,11 +2,13 @@ import React, { Fragment, useState } from 'react';
 import { Menu, Button } from 'tdesign-react';
 import { SearchIcon, MailIcon, UserIcon, EllipsisIcon } from 'tdesign-icons-react';
 
+import type { MenuValue } from 'tdesign-react';
+
 const { HeadMenu, MenuItem } = Menu;
 
 function Single() {
-  const [active, setActive] = useState('0');
-  const [darkActive, setDarkActive] = useState('1');
+  const [active, setActive] = useState<MenuValue>('0');
+  const [darkActive, setDarkActive] = useState<MenuValue>('1');
 
   const operations = () => (
     <div className="tdesign-demo-menu__operations">

diff --git a/src/menu/_example/custom-side.tsx b/src/menu/_example/custom-side.tsx
@@ -1,11 +1,13 @@
 import React, { Fragment, useState } from 'react';
 import { Menu } from 'tdesign-react';
 
+import type { MenuValue } from 'tdesign-react';
+
 const { MenuItem } = Menu;
 
 function CustomSide() {
-  const [active, setActive] = useState('0');
-  const [darkActive, setDarkActive] = useState('1');
+  const [active, setActive] = useState<MenuValue>('0');
+  const [darkActive, setDarkActive] = useState<MenuValue>('1');
 
   return (
     <Fragment>