@tendaui/components 1.2.4 → 1.3.0

package/list/ListItemMeta.tsx

@@ -1,40 +1,40 @@
-import React, { forwardRef } from "react";
-import classNames from "classnames";
-import useConfig from "../hooks/useConfig";
-import { TdListItemMetaProps } from "./type";
-import { StyledProps } from "../common";
-
-export interface ListItemMetaProps extends TdListItemMetaProps, StyledProps {}
-/**
- * 列表组件
- */
-const ListItemMeta = forwardRef<HTMLDivElement, ListItemMetaProps>((props, ref) => {
-  const { title, image, description, className, style } = props;
-  const { classPrefix } = useConfig();
-
-  const renderAvatar = () => {
-    if (image && typeof image === "string") {
-      return (
-        <div className={`${classPrefix}-list-item__meta-avatar`}>
-          <img src={image} alt="" />
-        </div>
-      );
-    }
-    return <div className={`${classPrefix}-list-item__meta-avatar`}>{image}</div>;
-  };
-  return (
-    <div ref={ref} className={classNames(`${classPrefix}-list-item__meta`, className)} style={style}>
-      {image && renderAvatar()}
-      <div className={`${classPrefix}-list-item__meta-content`}>
-        <h3 className={`${classPrefix}-list-item__meta-title`}>{title}</h3>
-        <div className={`${classPrefix}-list-item__meta-description`}>
-          {typeof description === "string" ? <p>{description}</p> : description}
-        </div>
-      </div>
-    </div>
-  );
-});
-
-ListItemMeta.displayName = "ListItemMeta";
-
-export default ListItemMeta;
+import React, { forwardRef } from "react";
+import classNames from "classnames";
+import useConfig from "../hooks/useConfig";
+import { TdListItemMetaProps } from "./type";
+import { StyledProps } from "../common";
+
+export interface ListItemMetaProps extends TdListItemMetaProps, StyledProps {}
+/**
+ * 列表组件
+ */
+const ListItemMeta = forwardRef<HTMLDivElement, ListItemMetaProps>((props, ref) => {
+  const { title, image, description, className, style } = props;
+  const { classPrefix } = useConfig();
+
+  const renderAvatar = () => {
+    if (image && typeof image === "string") {
+      return (
+        <div className={`${classPrefix}-list-item__meta-avatar`}>
+          <img src={image} alt="" />
+        </div>
+      );
+    }
+    return <div className={`${classPrefix}-list-item__meta-avatar`}>{image}</div>;
+  };
+  return (
+    <div ref={ref} className={classNames(`${classPrefix}-list-item__meta`, className)} style={style}>
+      {image && renderAvatar()}
+      <div className={`${classPrefix}-list-item__meta-content`}>
+        <h3 className={`${classPrefix}-list-item__meta-title`}>{title}</h3>
+        <div className={`${classPrefix}-list-item__meta-description`}>
+          {typeof description === "string" ? <p>{description}</p> : description}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+ListItemMeta.displayName = "ListItemMeta";
+
+export default ListItemMeta;

package/list/_example/async-loading.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import { List } from "../index";
+
+const { ListItem } = List;
+
+const AsyncLoadingList = () => {
+  const [asyncLoading, setAsyncLoading] = useState<React.ReactNode>("");
+
+  const listData = [
+    { id: 1, content: "列表内容列表内容列表内容" },
+    { id: 2, content: "列表内容列表内容列表内容" },
+    { id: 3, content: "列表内容列表内容列表内容" },
+    { id: 4, content: "列表内容列表内容列表内容" }
+  ];
+
+  const handleAsyncLoading = (val: string) => {
+    if (val === "loading-custom") {
+      setAsyncLoading(<div style={{ textAlign: "center", padding: "12px", color: "#999" }}>没有更多数据了</div>);
+    } else {
+      setAsyncLoading(val);
+    }
+  };
+
+  const onLoadMore = () => {
+    console.log("加载更多");
+    handleAsyncLoading("loading");
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+        <button onClick={() => handleAsyncLoading("load-more")}>显示加载更多</button>
+        <button onClick={() => handleAsyncLoading("loading")}>显示加载中</button>
+        <button onClick={() => handleAsyncLoading("loading-custom")}>自定义底部</button>
+        <button onClick={() => handleAsyncLoading("")}>隐藏加载状态</button>
+      </div>
+      <List asyncLoading={asyncLoading} onLoadMore={onLoadMore}>
+        {listData.map((item) => (
+          <ListItem key={item.id}>{item.content}</ListItem>
+        ))}
+      </List>
+    </div>
+  );
+};
+
+export default AsyncLoadingList;

package/list/_example/default.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { List } from "../index";
+
+const { ListItem } = List;
+
+const DefaultList = () => {
+  const listData = [
+    { id: 1, content: "列表内容的描述性文字" },
+    { id: 2, content: "列表内容的描述性文字" },
+    { id: 3, content: "列表内容的描述性文字" },
+    { id: 4, content: "列表内容的描述性文字" }
+  ];
+
+  return (
+    <List>
+      {listData.map((item) => (
+        <ListItem key={item.id}>{item.content}</ListItem>
+      ))}
+    </List>
+  );
+};
+
+export default DefaultList;

package/list/_example/header-footer.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { List } from "../index";
+
+const { ListItem } = List;
+
+const HeaderFooterList = () => {
+  const listData = [
+    { id: 1, content: "列表内容列表内容列表内容" },
+    { id: 2, content: "列表内容列表内容列表内容" },
+    { id: 3, content: "列表内容列表内容列表内容" },
+    { id: 4, content: "列表内容列表内容列表内容" }
+  ];
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <div>
+        <h4 style={{ marginBottom: "16px", color: "#666" }}>字符串头部/底部</h4>
+        <List header="这里是 Header" footer="这里是 Footer">
+          {listData.map((item) => (
+            <ListItem key={item.id}>{item.content}</ListItem>
+          ))}
+        </List>
+      </div>
+
+      <div>
+        <h4 style={{ marginBottom: "16px", color: "#666" }}>自定义头部/底部</h4>
+        <List
+          header={<div style={{ fontWeight: "bold", color: "var(--td-brand-color)" }}>自定义 Header</div>}
+          footer={<div style={{ textAlign: "center", color: "#999" }}>自定义 Footer</div>}
+        >
+          {listData.map((item) => (
+            <ListItem key={item.id}>{item.content}</ListItem>
+          ))}
+        </List>
+      </div>
+    </div>
+  );
+};
+
+export default HeaderFooterList;

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/list/defaultProps.ts

@@ -1,11 +1,11 @@
-/**
- * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * */
-
-import { TdListProps, TdListItemProps, TdListItemMetaProps } from "./type";
-
-export const listDefaultProps: TdListProps = { layout: "horizontal", size: "medium", split: false, stripe: false };
-
-export const listItemDefaultProps: TdListItemProps = {};
-
-export const listItemMetaDefaultProps: TdListItemMetaProps = {};
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdListProps, TdListItemProps, TdListItemMetaProps } from "./type";
+
+export const listDefaultProps: TdListProps = { layout: "horizontal", size: "medium", split: false, stripe: false };
+
+export const listItemDefaultProps: TdListItemProps = {};
+
+export const listItemMetaDefaultProps: TdListItemMetaProps = {};

package/list/hooks/useListVirtualScroll.ts

@@ -1,82 +1,82 @@
-import React, { useMemo } from "react";
-// import log from "@tdesign/common-js/log/index";
-import useVirtualScroll from "../../hooks/useVirtualScroll";
-import { TdListProps } from "../type";
-import { Styles, type ScrollToElementParams } from "../../common";
-const log = console.log;
-export const useListVirtualScroll = (
-  scroll: TdListProps["scroll"],
-  listRef: React.MutableRefObject<HTMLElement>,
-  listItems: any[]
-) => {
-  const virtualScrollParams = useMemo(
-    () => ({
-      data: listItems,
-      scroll
-    }),
-    [listItems, scroll]
-  );
-  const virtualConfig = useVirtualScroll(listRef, virtualScrollParams);
-  const { isVirtualScroll } = virtualConfig;
-  let lastScrollY = -1;
-
-  const onInnerVirtualScroll = (e: WheelEvent) => {
-    const target = (e.target || e.srcElement) as HTMLElement;
-    const top = target.scrollTop;
-    if (lastScrollY !== top) {
-      virtualConfig.isVirtualScroll && virtualConfig.handleScroll();
-    } else {
-      lastScrollY = -1;
-    }
-    lastScrollY = top;
-  };
-
-  const cursorStyle = useMemo(
-    () =>
-      ({
-        position: "absolute",
-        width: "1px",
-        height: "1px",
-        transition: "transform 0.2s",
-        transform: `translate(0, ${virtualConfig.scrollHeight}px)`,
-        msTransform: `translate(0, ${virtualConfig.scrollHeight}px)`,
-        MozTransform: `translate(0, ${virtualConfig.scrollHeight}px)`,
-        WebkitTransform: `translate(0, ${virtualConfig.scrollHeight}px)`
-      }) as Styles,
-    [virtualConfig.scrollHeight]
-  );
-
-  const listStyle = useMemo(
-    () =>
-      ({
-        transform: `translate(0, ${virtualConfig.translateY}px)`,
-        msTransform: `translate(0, ${virtualConfig.translateY}px)`,
-        MozTransform: `translate(0, ${virtualConfig.translateY}px)`,
-        WebkitTransform: `translate(0, ${virtualConfig.translateY}px)`
-      }) as Styles,
-    [virtualConfig.translateY]
-  );
-
-  const handleScrollTo = (params: ScrollToElementParams) => {
-    const { index, key } = params;
-    const targetIndex = index === 0 ? index : index ?? Number(key);
-    if (!targetIndex && targetIndex !== 0) {
-      console.error("List", "scrollTo: `index` or `key` must exist.");
-      return;
-    }
-    if (targetIndex < 0 || targetIndex >= listItems.length) {
-      console.error("List", `${targetIndex} does not exist in data, check \`index\` or \`key\` please.`);
-      return;
-    }
-    virtualConfig.scrollToElement({ ...params, index: targetIndex - 1 });
-  };
-
-  return {
-    virtualConfig,
-    cursorStyle,
-    listStyle,
-    isVirtualScroll,
-    onInnerVirtualScroll,
-    scrollToElement: handleScrollTo
-  };
-};
+import React, { useMemo } from "react";
+// import log from "@tdesign/common-js/log/index";
+import useVirtualScroll from "../../hooks/useVirtualScroll";
+import { TdListProps } from "../type";
+import { Styles, type ScrollToElementParams } from "../../common";
+const log = console.log;
+export const useListVirtualScroll = (
+  scroll: TdListProps["scroll"],
+  listRef: React.MutableRefObject<HTMLElement>,
+  listItems: any[]
+) => {
+  const virtualScrollParams = useMemo(
+    () => ({
+      data: listItems,
+      scroll
+    }),
+    [listItems, scroll]
+  );
+  const virtualConfig = useVirtualScroll(listRef, virtualScrollParams);
+  const { isVirtualScroll } = virtualConfig;
+  let lastScrollY = -1;
+
+  const onInnerVirtualScroll = (e: WheelEvent) => {
+    const target = (e.target || e.srcElement) as HTMLElement;
+    const top = target.scrollTop;
+    if (lastScrollY !== top) {
+      virtualConfig.isVirtualScroll && virtualConfig.handleScroll();
+    } else {
+      lastScrollY = -1;
+    }
+    lastScrollY = top;
+  };
+
+  const cursorStyle = useMemo(
+    () =>
+      ({
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        transition: "transform 0.2s",
+        transform: `translate(0, ${virtualConfig.scrollHeight}px)`,
+        msTransform: `translate(0, ${virtualConfig.scrollHeight}px)`,
+        MozTransform: `translate(0, ${virtualConfig.scrollHeight}px)`,
+        WebkitTransform: `translate(0, ${virtualConfig.scrollHeight}px)`
+      }) as Styles,
+    [virtualConfig.scrollHeight]
+  );
+
+  const listStyle = useMemo(
+    () =>
+      ({
+        transform: `translate(0, ${virtualConfig.translateY}px)`,
+        msTransform: `translate(0, ${virtualConfig.translateY}px)`,
+        MozTransform: `translate(0, ${virtualConfig.translateY}px)`,
+        WebkitTransform: `translate(0, ${virtualConfig.translateY}px)`
+      }) as Styles,
+    [virtualConfig.translateY]
+  );
+
+  const handleScrollTo = (params: ScrollToElementParams) => {
+    const { index, key } = params;
+    const targetIndex = index === 0 ? index : index ?? Number(key);
+    if (!targetIndex && targetIndex !== 0) {
+      console.error("List", "scrollTo: `index` or `key` must exist.");
+      return;
+    }
+    if (targetIndex < 0 || targetIndex >= listItems.length) {
+      console.error("List", `${targetIndex} does not exist in data, check \`index\` or \`key\` please.`);
+      return;
+    }
+    virtualConfig.scrollToElement({ ...params, index: targetIndex - 1 });
+  };
+
+  return {
+    virtualConfig,
+    cursorStyle,
+    listStyle,
+    isVirtualScroll,
+    onInnerVirtualScroll,
+    scrollToElement: handleScrollTo
+  };
+};

package/list/style/css.js

@@ -1 +1 @@
-import "./index.css";
+import "./index.css";

package/list/style/index.js

@@ -1 +1 @@
-import "../../styles/components/list/_index.scss";
+import "../../styles/components/list/_index.scss";