@tendaui/components 1.2.4 → 1.3.1

package/list/_example/multiline.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { List } from "../index";
+
+const { ListItem, ListItemMeta } = List;
+
+const MultilineList = () => {
+  const listData = [
+    { id: 1, title: "列表主标题", content: "这是一段较长的描述文字，用于展示多行文本的效果。" },
+    { id: 2, title: "列表主标题", content: "这是一段较长的描述文字，用于展示多行文本的效果。" },
+    { id: 3, title: "列表主标题", content: "这是一段较长的描述文字，用于展示多行文本的效果。" }
+  ];
+
+  return (
+    <List>
+      {listData.map((item) => (
+        <ListItem key={item.id}>
+          <ListItemMeta title={item.title} description={item.content} />
+        </ListItem>
+      ))}
+    </List>
+  );
+};
+
+export default MultilineList;

package/list/_example/scroll-loading.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import { List } from "../index";
+
+const { ListItem, ListItemMeta } = List;
+
+interface ListItemData {
+  id: number;
+  content: string;
+  icon: string;
+  title: string;
+}
+
+const ScrollLoadingList = () => {
+  const [listData, setListData] = useState<ListItemData[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [pageNum, setPageNum] = useState(1);
+
+  const dataSource: ListItemData[] = [];
+  const total = 100;
+  const pageSize = 20;
+
+  for (let i = 0; i < total; i++) {
+    dataSource.push({
+      id: i,
+      content: "列表内容列表内容列表内容",
+      icon: "https://tdesign.gtimg.com/list-icon.png",
+      title: `列表标题 ${i + 1}`
+    });
+  }
+
+  const fetchData = async (pageInfo: { pageNum: number; pageSize: number }) => {
+    if (isLoading) return;
+    setIsLoading(true);
+    setTimeout(() => {
+      const { pageNum, pageSize } = pageInfo;
+      const newDataSource = dataSource.slice((pageNum - 1) * pageSize, pageNum * pageSize);
+      setListData((prev) => prev.concat(newDataSource));
+      setPageNum(pageNum);
+      setIsLoading(false);
+    }, 500);
+  };
+
+  const handleScroll = ({ scrollBottom }: { scrollTop: number; scrollBottom: number }) => {
+    if (!scrollBottom && listData.length < total) {
+      fetchData({ pageNum: pageNum + 1, pageSize });
+    }
+  };
+
+  useEffect(() => {
+    fetchData({ pageNum, pageSize });
+  }, []);
+
+  return (
+    <List
+      asyncLoading={isLoading ? "loading" : ""}
+      size="small"
+      style={{ height: "300px", overflow: "auto" }}
+      onScroll={handleScroll}
+    >
+      {listData.map((item) => (
+        <ListItem key={item.id}>
+          <ListItemMeta image={item.icon} title={item.title} description={item.content} />
+        </ListItem>
+      ))}
+    </List>
+  );
+};
+
+export default ScrollLoadingList;

package/list/_example/sizes.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { List } from "../index";
+
+const { ListItem } = List;
+
+const SizesList = () => {
+  const listData = [
+    { id: 1, content: "列表内容列表内容列表内容" },
+    { id: 2, content: "列表内容列表内容列表内容" },
+    { id: 3, content: "列表内容列表内容列表内容" }
+  ];
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
+      <div>
+        <h4 style={{ marginBottom: "16px", color: "#666" }}>小尺寸</h4>
+        <List size="small">
+          {listData.map((item) => (
+            <ListItem key={item.id}>{item.content}</ListItem>
+          ))}
+        </List>
+      </div>
+
+      <div>
+        <h4 style={{ marginBottom: "16px", color: "#666" }}>中尺寸（默认）</h4>
+        <List size="medium">
+          {listData.map((item) => (
+            <ListItem key={item.id}>{item.content}</ListItem>
+          ))}
+        </List>
+      </div>
+
+      <div>
+        <h4 style={{ marginBottom: "16px", color: "#666" }}>大尺寸</h4>
+        <List size="large">
+          {listData.map((item) => (
+            <ListItem key={item.id}>{item.content}</ListItem>
+          ))}
+        </List>
+      </div>
+    </div>
+  );
+};
+
+export default SizesList;

package/list/_example/split.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { List } from "../index";
+
+const { ListItem } = List;
+
+const SplitList = () => {
+  const listData = [
+    { id: 1, content: "列表内容列表内容列表内容" },
+    { id: 2, content: "列表内容列表内容列表内容" },
+    { id: 3, content: "列表内容列表内容列表内容" },
+    { id: 4, content: "列表内容列表内容列表内容" }
+  ];
+
+  return (
+    <div style={{ display: "flex", gap: "32px" }}>
+      <div style={{ flex: 1 }}>
+        <h4 style={{ marginBottom: "16px", color: "#666" }}>无分割线</h4>
+        <List split={false}>
+          {listData.map((item) => (
+            <ListItem key={item.id}>{item.content}</ListItem>
+          ))}
+        </List>
+      </div>
+      <div style={{ flex: 1 }}>
+        <h4 style={{ marginBottom: "16px", color: "#666" }}>有分割线</h4>
+        <List split={true}>
+          {listData.map((item) => (
+            <ListItem key={item.id}>{item.content}</ListItem>
+          ))}
+        </List>
+      </div>
+    </div>
+  );
+};
+
+export default SplitList;

package/list/_example/stripe.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { List } from "../index";
+
+const { ListItem } = List;
+
+const StripeList = () => {
+  const listData = [
+    { id: 1, content: "列表内容列表内容列表内容" },
+    { id: 2, content: "列表内容列表内容列表内容" },
+    { id: 3, content: "列表内容列表内容列表内容" },
+    { id: 4, content: "列表内容列表内容列表内容" },
+    { id: 5, content: "列表内容列表内容列表内容" }
+  ];
+
+  return (
+    <List stripe={true} split={false}>
+      {listData.map((item) => (
+        <ListItem key={item.id}>{item.content}</ListItem>
+      ))}
+    </List>
+  );
+};
+
+export default StripeList;

package/list/_example/virtual-scroll.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useRef, useState } from "react";
+import { List } from "../index";
+
+const { ListItem, ListItemMeta } = List;
+
+interface ListItemData {
+  content: string;
+}
+
+const VirtualScrollList = () => {
+  const [data, setData] = useState<ListItemData[]>([]);
+  const listRef = useRef<any>(null);
+
+  const handleScrollTo = () => {
+    listRef.current?.scrollTo({
+      index: 30,
+      behavior: "smooth"
+    });
+  };
+
+  useEffect(() => {
+    const list: ListItemData[] = [];
+    for (let i = 0; i < 3000; i++) {
+      list.push({ content: `第${i + 1}个列表内容的描述性文字` });
+    }
+    setTimeout(() => setData(list), 0);
+  }, []);
+
+  const imageUrl = "https://tdesign.gtimg.com/site/avatar.jpg";
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <List
+        ref={listRef}
+        style={{ height: "300px" }}
+        scroll={{ type: "virtual", rowHeight: 80, bufferSize: 10, threshold: 10 }}
+      >
+        {data.map((item, index) => (
+          <ListItem key={index}>
+            <ListItemMeta image={imageUrl} title="列表标题" description={item.content} />
+          </ListItem>
+        ))}
+      </List>
+      <div>
+        <button onClick={handleScrollTo}>滚动到第 30 项</button>
+      </div>
+    </div>
+  );
+};
+
+export default VirtualScrollList;

package/list/_example/with-image.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { List } from "../index";
+
+const { ListItem, ListItemMeta } = List;
+
+const WithImageList = () => {
+  const avatarUrl = "https://tdesign.gtimg.com/site/avatar.jpg";
+  const listData = [
+    { id: 1, title: "列表主内容", content: "列表内容列表内容列表内容" },
+    { id: 2, title: "列表主内容", content: "列表内容列表内容列表内容" },
+    { id: 3, title: "列表主内容", content: "列表内容列表内容列表内容" },
+    { id: 4, title: "列表主内容", content: "列表内容列表内容列表内容" }
+  ];
+
+  return (
+    <List>
+      {listData.map((item) => (
+        <ListItem key={item.id}>
+          <ListItemMeta image={avatarUrl} title={item.title} description={item.content} />
+        </ListItem>
+      ))}
+    </List>
+  );
+};
+
+export default WithImageList;

package/loading/_example/default.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { Loading } from "../index";
+
+const DefaultLoading = () => <Loading />;
+
+export default DefaultLoading;

package/loading/_example/delay.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from "react";
+import { Loading, Button } from "@tendaui/react";
+
+const DelayLoading = () => {
+  const [data, setData] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const loadData = (time?: number) => {
+    setLoading(true);
+    setData("");
+    const timer = setTimeout(() => {
+      setLoading(false);
+      setData("数据加载完成，短时间的数据加载并未出现 loading");
+      clearTimeout(timer);
+    }, time || 100);
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      loadData();
+    }, 0);
+  }, []);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div style={{ color: "#666", fontSize: "12px" }}>
+        设置 delay=500ms，当加载时间小于 500ms 时不显示 loading，避免闪烁
+      </div>
+      <Loading loading={loading} delay={500} size="small" showOverlay>
+        <div
+          style={{
+            padding: "20px",
+            background: "#f5f5f5",
+            borderRadius: "4px",
+            minHeight: "60px"
+          }}
+        >
+          {data || "等待加载..."}
+        </div>
+      </Loading>
+      <div style={{ display: "flex", gap: "8px" }}>
+        <Button size="small" onClick={() => loadData()}>
+          快速加载（无 loading）
+        </Button>
+        <Button size="small" onClick={() => loadData(1000)}>
+          慢速加载（显示 loading）
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default DelayLoading;

package/loading/_example/fullscreen.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { Loading, Button } from "@tendaui/react";
+
+const FullscreenLoading = () => {
+  const [loading, setLoading] = useState(false);
+
+  const showLoading = () => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  };
+
+  return (
+    <>
+      <Loading loading={loading} fullscreen preventScrollThrough={true} text="全屏加载中..." />
+      <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+        <div style={{ color: "#666" }}>点击按钮显示全屏加载，2秒后自动关闭</div>
+        <div>
+          <Button theme="primary" onClick={showLoading}>
+            显示全屏加载
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FullscreenLoading;

package/loading/_example/inherit-color.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Loading } from "@tendaui/react";
+const InheritColorExample = () => (
+  <div style={{ display: "flex", gap: "24px" }}>
+    <div style={{ color: "var(--td-brand-color)" }}>
+      <Loading inheritColor />
+      <div style={{ marginTop: "8px", fontSize: "12px" }}>继承品牌色</div>
+    </div>
+    <div style={{ color: "var(--td-success-color)" }}>
+      <Loading inheritColor />
+      <div style={{ marginTop: "8px", fontSize: "12px" }}>继承成功色</div>
+    </div>
+    <div style={{ color: "var(--td-warning-color)" }}>
+      <Loading inheritColor />
+      <div style={{ marginTop: "8px", fontSize: "12px" }}>继承警告色</div>
+    </div>
+    <div style={{ color: "var(--td-danger-color)" }}>
+      <Loading inheritColor />
+      <div style={{ marginTop: "8px", fontSize: "12px" }}>继承错误色</div>
+    </div>
+  </div>
+);
+
+export default InheritColorExample;

package/loading/_example/no-overlay.tsx

@@ -0,0 +1,15 @@
+import React, { useState } from "react";
+import { Loading, Button } from "@tendaui/react";
+
+const NoOverlayExample = () => {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Button onClick={() => setLoading(!loading)}>{loading ? "停止加载" : "开始加载（无遮罩）"}</Button>
+      <Loading loading={loading} showOverlay={false} text="加载中..." />
+    </div>
+  );
+};
+
+export default NoOverlayExample;

package/loading/_example/sizes.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Loading } from "../index";
+
+const SizesLoading = () => (
+  <div style={{ display: "flex", gap: "32px", alignItems: "center" }}>
+    <div style={{ textAlign: "center" }}>
+      <Loading size="small" />
+      <div style={{ marginTop: "8px", color: "#666", fontSize: "12px" }}>small</div>
+    </div>
+    <div style={{ textAlign: "center" }}>
+      <Loading size="medium" />
+      <div style={{ marginTop: "8px", color: "#666", fontSize: "12px" }}>medium</div>
+    </div>
+    <div style={{ textAlign: "center" }}>
+      <Loading size="large" />
+      <div style={{ marginTop: "8px", color: "#666", fontSize: "12px" }}>large</div>
+    </div>
+    <div style={{ textAlign: "center" }}>
+      <Loading size="40px" />
+      <div style={{ marginTop: "8px", color: "#666", fontSize: "12px" }}>40px</div>
+    </div>
+  </div>
+);
+
+export default SizesLoading;

package/loading/_example/with-text.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Loading } from "../index";
+
+const WithTextLoading = () => (
+  <div style={{ display: "flex", gap: "32px" }}>
+    <Loading text="加载中..." />
+    <Loading text="数据处理中..." />
+    <Loading text="请稍候..." />
+  </div>
+);
+
+export default WithTextLoading;

package/loading/_example/wrapper.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import { Loading, Switch } from "@tendaui/react";
+
+const WrapperLoading = () => {
+  const [loading, setLoading] = useState(true);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+        <span>加载状态：</span>
+        <Switch value={loading} onChange={(val) => setLoading(val as boolean)} />
+      </div>
+      <Loading loading={loading} showOverlay>
+        <div
+          style={{
+            padding: "40px",
+            background: "#f5f5f5",
+            borderRadius: "8px",
+            textAlign: "center"
+          }}
+        >
+          <h3>内容区域</h3>
+          <p>这是被 Loading 包裹的内容</p>
+          <p>当 loading 为 true 时会显示遮罩层和加载指示符</p>
+        </div>
+      </Loading>
+    </div>
+  );
+};
+
+export default WrapperLoading;

package/notification/_example/default.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { NotificationProvider, useNotification, Button } from "@tendaui/react";
+
+const DefaultDemo = () => {
+  const NotificationDemo = () => {
+    const { success, error, warning, info } = useNotification();
+    return (
+      <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+        <Button theme="success" onClick={() => success({ title: "成功提示", message: "操作成功完成！" })}>
+          成功通知
+        </Button>
+        <Button theme="danger" onClick={() => error({ title: "错误提示", message: "操作发生错误！" })}>
+          错误通知
+        </Button>
+        <Button theme="warning" onClick={() => warning({ title: "警告提示", message: "请注意这个警告！" })}>
+          警告通知
+        </Button>
+        <Button theme="primary" onClick={() => info({ title: "信息提示", message: "这是一条信息通知" })}>
+          信息通知
+        </Button>
+      </div>
+    );
+  };
+  return (
+    <NotificationProvider>
+      <NotificationDemo />
+    </NotificationProvider>
+  );
+};
+
+export default DefaultDemo;

package/notification/_example/long-content.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { NotificationProvider, useNotification, Button } from "@tendaui/react";
+
+const LongContentDemo = () => {
+  const LongContentNotificationDemo = () => {
+    const { info, success } = useNotification();
+
+    const showLongTitle = () => {
+      success({
+        title: "这是一个非常长的标题，用于测试标题过长时的显示效果和换行情况",
+        message: "通知内容"
+      });
+    };
+
+    const showLongMessage = () => {
+      info({
+        title: "系统通知",
+        message:
+          "这是一段非常长的通知内容，用于测试内容过长时的显示效果。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+      });
+    };
+
+    return (
+      <div style={{ display: "flex", gap: "12px" }}>
+        <Button onClick={showLongTitle}>长标题通知</Button>
+        <Button onClick={showLongMessage}>长内容通知</Button>
+      </div>
+    );
+  };
+  return (
+    <NotificationProvider>
+      <LongContentNotificationDemo />
+    </NotificationProvider>
+  );
+};
+
+export default LongContentDemo;

package/notification/_example/stacking.tsx

@@ -0,0 +1,40 @@
+import React, { useRef } from "react";
+import { NotificationProvider, useNotification, Button } from "@tendaui/react";
+
+const StackingDemo = () => {
+  const StackingNotificationDemo = () => {
+    const { success, error, warning, info } = useNotification();
+    const index = useRef(1);
+
+    const showMultiple = () => {
+      success({ title: "成功", message: `第 ${index.current++} 条通知` });
+      setTimeout(() => {
+        error({ title: "错误", message: `第 ${index.current++} 条通知` });
+      }, 200);
+      setTimeout(() => {
+        warning({ title: "警告", message: `第 ${index.current++} 条通知` });
+      }, 400);
+      setTimeout(() => {
+        info({ title: "信息", message: `第 ${index.current++} 条通知` });
+      }, 600);
+    };
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+        <div style={{ color: "#666", fontSize: "12px" }}>点击按钮快速显示多条通知，观察堆叠效果</div>
+        <div>
+          <Button theme="primary" onClick={showMultiple}>
+            显示多条通知
+          </Button>
+        </div>
+      </div>
+    );
+  };
+  return (
+    <NotificationProvider>
+      <StackingNotificationDemo />
+    </NotificationProvider>
+  );
+};
+
+export default StackingDemo;

package/notification/_example/types.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { NotificationProvider, useNotification, Button } from "@tendaui/react";
+
+const TypesDemo = () => {
+  const TypesNotificationDemo = () => {
+    const { success, error, warning, info } = useNotification();
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        <div>
+          <h4 style={{ marginBottom: "12px", color: "#666" }}>成功通知</h4>
+          <Button
+            theme="success"
+            onClick={() =>
+              success({
+                title: "操作成功",
+                message: "您的数据已成功保存到服务器"
+              })
+            }
+          >
+            显示成功通知
+          </Button>
+        </div>
+
+        <div>
+          <h4 style={{ marginBottom: "12px", color: "#666" }}>错误通知</h4>
+          <Button
+            theme="danger"
+            onClick={() =>
+              error({
+                title: "操作失败",
+                message: "网络连接失败，请检查网络设置后重试"
+              })
+            }
+          >
+            显示错误通知
+          </Button>
+        </div>
+
+        <div>
+          <h4 style={{ marginBottom: "12px", color: "#666" }}>警告通知</h4>
+          <Button
+            theme="warning"
+            onClick={() =>
+              warning({
+                title: "警告",
+                message: "您的账户余额不足，请及时充值"
+              })
+            }
+          >
+            显示警告通知
+          </Button>
+        </div>
+
+        <div>
+          <h4 style={{ marginBottom: "12px", color: "#666" }}>信息通知</h4>
+          <Button
+            theme="primary"
+            onClick={() =>
+              info({
+                title: "系统通知",
+                message: "系统将于今晚 22:00 进行维护升级"
+              })
+            }
+          >
+            显示信息通知
+          </Button>
+        </div>
+      </div>
+    );
+  };
+  return (
+    <NotificationProvider>
+      <TypesNotificationDemo />
+    </NotificationProvider>
+  );
+};
+
+export default TypesDemo;