@tendaui/components 1.0.0 → 1.2.3

package/ip-input/utils.ts

@@ -0,0 +1,112 @@
+/**
+ * IP 地址验证和解析工具函数
+ */
+
+/**
+ * 验证 IPv4 地址段（0-255）
+ */
+export function isValidIPv4Segment(segment: string, allowLeadingZeros: boolean = false): boolean {
+  if (!segment || segment.trim() === "") return false;
+
+  // 不允许前导零
+  if (!allowLeadingZeros && segment.length > 1 && segment[0] === "0") {
+    return false;
+  }
+
+  const num = parseInt(segment, 10);
+  return !isNaN(num) && num >= 0 && num <= 255 && num.toString() === segment;
+}
+
+/**
+ * 验证 IPv4 地址
+ */
+export function isValidIPv4(ip: string, allowLeadingZeros: boolean = false): boolean {
+  if (!ip || typeof ip !== "string") return false;
+
+  const segments = ip.split(".");
+  if (segments.length !== 4) return false;
+
+  return segments.every((seg) => isValidIPv4Segment(seg, allowLeadingZeros));
+}
+
+/**
+ * 验证 CIDR 掩码（IPv4: 0-32, IPv6: 0-128）
+ */
+export function isValidCIDRMask(mask: string, isIPv6: boolean = false): boolean {
+  if (!mask || typeof mask !== "string") return false;
+
+  const num = parseInt(mask, 10);
+  if (isNaN(num)) return false;
+
+  const max = isIPv6 ? 128 : 32;
+  return num >= 0 && num <= max;
+}
+
+/**
+ * 验证 IPv6 地址（简化版，使用正则）
+ * 支持压缩表示法 :: 和混合 IPv4/IPv6
+ */
+export function isValidIPv6(ip: string): boolean {
+  if (!ip || typeof ip !== "string") return false;
+
+  // 简化的 IPv6 验证正则
+  // 支持：
+  // - 标准格式：2001:0db8:85a3:0000:0000:8a2e:0370:7334
+  // - 压缩格式：2001:db8::1
+  // - 混合格式：::ffff:192.168.0.1
+  const ipv6Regex =
+    /^(([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]+|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/;
+
+  return ipv6Regex.test(ip);
+}
+
+/**
+ * 从文本中提取 IP 地址
+ */
+export function extractIPFromText(text: string): { ip: string; cidr?: string } | null {
+  if (!text || typeof text !== "string") return null;
+
+  // 尝试提取 IPv4
+  const ipv4Regex = /(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(?:\/(\d{1,2}))?/;
+  const ipv4Match = text.match(ipv4Regex);
+  if (ipv4Match) {
+    const ip = ipv4Match[1];
+    const cidr = ipv4Match[2];
+    if (isValidIPv4(ip, true)) {
+      return { ip, cidr };
+    }
+  }
+
+  // 尝试提取 IPv6
+  const ipv6Regex = /([0-9a-fA-F:]+(?::[0-9a-fA-F:]+)*|::)(?:\/(\d{1,3}))?/;
+  const ipv6Match = text.match(ipv6Regex);
+  if (ipv6Match) {
+    const ip = ipv6Match[1];
+    const cidr = ipv6Match[2];
+    if (isValidIPv6(ip)) {
+      return { ip, cidr };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 解析 IP 地址为段数组（IPv4）
+ */
+export function parseIPv4ToSegments(ip: string): string[] {
+  if (!ip) return ["", "", "", ""];
+  const segments = ip.split(".");
+  return [segments[0] || "", segments[1] || "", segments[2] || "", segments[3] || ""];
+}
+
+/**
+ * 将段数组组合为 IP 地址（IPv4）
+ */
+export function segmentsToIPv4(segments: string[]): string {
+  // 如果所有段都为空，返回空字符串
+  if (segments.every((seg) => !seg || seg.trim() === "")) {
+    return "";
+  }
+  return segments.join(".");
+}

package/layout/Aside.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import classNames from "classnames";
+import useConfig from "../hooks/useConfig";
+import { TdAsideProps } from "./type";
+import { StyledProps } from "../common";
+import useDefaultProps from "../hooks/useDefaultProps";
+export interface AsideProps extends TdAsideProps, StyledProps {
+  /**
+   * 文本内容
+   */
+  children?: React.ReactNode;
+}
+
+const Aside: React.FC<AsideProps> = (props) => {
+  const { width, className, style, children, ...otherAsideProps } = useDefaultProps(props, { width: "232px" });
+
+  const { classPrefix } = useConfig();
+  const asideClassNames = classNames(`${classPrefix}-layout__sider`, className);
+  const asideWidth: string = typeof width === "number" ? `${width}px` : width;
+
+  const asideStyle: React.CSSProperties = {
+    width: asideWidth,
+    maxWidth: asideWidth,
+    minWidth: asideWidth,
+    flex: `0 0 ${asideWidth}`,
+    ...style
+  };
+
+  return (
+    <aside className={asideClassNames} style={asideStyle} {...otherAsideProps}>
+      {children}
+    </aside>
+  );
+};
+
+Aside.displayName = "Aside";
+
+export default Aside;

package/layout/Layout.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import classNames from "classnames";
+import useConfig from "../hooks/useConfig";
+import { StyledProps } from "../common";
+import { TdLayoutProps, TdHeaderProps, TdFooterProps } from "./type";
+import { useMemo } from "react";
+import Aside from "./Aside";
+import parseTNode from "../utils/parseTNode";
+export interface LayoutProps extends TdLayoutProps, StyledProps, React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+export interface HeaderProps extends TdHeaderProps, StyledProps, React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+}
+export interface ContentProps extends StyledProps, React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+}
+export interface FooterProps extends TdFooterProps, StyledProps, React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+}
+
+const Header: React.FC<HeaderProps> = (props) => {
+  const { classPrefix } = useConfig();
+  const { className, style = {}, children, height, ...others } = props;
+  const renderHeight = isNaN(Number(height)) ? height : `${height}px`;
+  const headerClassNames = classNames(`${classPrefix}-layout__header`, className);
+  return (
+    <header className={headerClassNames} style={{ height: renderHeight, ...style }} {...others}>
+      {parseTNode(children)}
+    </header>
+  );
+};
+
+const Footer: React.FC<FooterProps> = (props) => {
+  const { classPrefix } = useConfig();
+  const { className, style = {}, children, height, ...others } = props;
+  const renderHeight = isNaN(Number(height)) ? height : `${height}px`;
+  const footerClassNames = classNames(`${classPrefix}-layout__footer`, className);
+  return (
+    <footer className={footerClassNames} style={{ height: renderHeight, ...style }} {...others}>
+      {parseTNode(children)}
+    </footer>
+  );
+};
+const Content: React.FC<ContentProps> = (props) => {
+  const { classPrefix } = useConfig();
+  const { className, style, children, content, ...others } = props;
+  const contentClassNames = classNames(`${classPrefix}-layout__content`, className);
+  return (
+    <main className={contentClassNames} style={style} {...others}>
+      {parseTNode(content) || parseTNode(children)}
+    </main>
+  );
+};
+
+const Layout: React.FC<LayoutProps> & {
+  Header: typeof Header;
+  Content: typeof Content;
+  Footer: typeof Footer;
+  Aside: typeof Aside;
+} = (props) => {
+  const { direction, className, style, children, ...otherLayoutProps } = props;
+
+  const shouldAsides = useMemo(() => {
+    const asides: React.ReactElement[] = [];
+    React.Children.forEach(children, (child: React.ReactElement) => {
+      if (!child || typeof child !== "object") {
+        return;
+      }
+      if (child.type === Aside) {
+        asides.push(child);
+      }
+    });
+    return !!asides.length;
+  }, [children]);
+
+  const { classPrefix } = useConfig();
+  const layoutClassNames = classNames(
+    `${classPrefix}-layout`,
+    {
+      [`${classPrefix}-layout--with-sider`]: shouldAsides,
+      [`${classPrefix}-layout__direction-${direction}`]: direction
+    },
+    className
+  );
+
+  return (
+    <div className={layoutClassNames} style={style} {...otherLayoutProps}>
+      {parseTNode(children)}
+    </div>
+  );
+};
+
+Layout.Header = Header;
+Layout.Content = Content;
+Layout.Footer = Footer;
+Layout.Aside = Aside;
+
+Header.displayName = "Header";
+Content.displayName = "Content";
+Footer.displayName = "Footer";
+Layout.displayName = "Layout";
+
+export default Layout;

package/layout/defaultProps.ts

@@ -0,0 +1,9 @@
+import { TdAsideProps, TdFooterProps, TdHeaderProps, TdLayoutProps } from "./type";
+
+export const asideDefaultProps: TdAsideProps = {};
+
+export const footerDefaultProps: TdFooterProps = {};
+
+export const headerDefaultProps: TdHeaderProps = {};
+
+export const layoutDefaultProps: TdLayoutProps = {};

package/layout/index.ts

@@ -0,0 +1,9 @@
+import _Layout from "./Layout";
+
+import "./style/index.js";
+
+export type { LayoutProps } from "./Layout";
+export * from "./type";
+
+export const Layout = _Layout;
+export default Layout;

package/layout/style/css.js

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

package/layout/style/index.js

@@ -0,0 +1 @@
+import "../../styles/components/layout/_index.scss";

package/layout/type.ts

@@ -0,0 +1,43 @@
+import { TNode } from "../common";
+
+export interface TdLayoutProps {
+  /**
+   * 【开发中】布局方向
+   */
+  direction?: "vertical" | "horizontal";
+}
+
+export interface TdHeaderProps {
+  /**
+   * 顶栏高度。样式表（class）中定义的默认高度为：64px
+   * @default ''
+   */
+  height?: string;
+}
+
+export interface TdAsideProps {
+  /**
+   * 侧边栏宽度。样式表（class）中定义的默认宽度为：232px
+   * @default ''
+   */
+  width?: string;
+}
+
+export interface TdContentProps {
+  /**
+   * 内容，同 content
+   */
+  children?: TNode;
+  /**
+   * 内容
+   */
+  content?: TNode;
+}
+
+export interface TdFooterProps {
+  /**
+   * 底栏高度。样式表（class）中定义的默认高度为：24px
+   * @default ''
+   */
+  height?: string;
+}

package/list/List.tsx

@@ -0,0 +1,144 @@
+import React, { useImperativeHandle, useMemo, useRef, WheelEvent } from "react";
+import classNames from "classnames";
+import { compact, isString } from "lodash-es";
+import forwardRefWithStatics from "../utils/forwardRefWithStatics";
+import noop from "../utils/noop";
+import parseTNode from "../utils/parseTNode";
+import useConfig from "../hooks/useConfig";
+import useDefaultProps from "../hooks/useDefaultProps";
+import Loading from "../loading";
+import { useLocaleReceiver } from "../locale/LocalReceiver";
+import ListItem from "./ListItem";
+import ListItemMeta from "./ListItemMeta";
+import { listDefaultProps } from "./defaultProps";
+import { useListVirtualScroll } from "./hooks/useListVirtualScroll";
+
+import type { StyledProps } from "../common";
+import type { ListInstanceFunctions, TdListProps } from "./type";
+
+export interface ListProps extends TdListProps, StyledProps {
+  /**
+   * 文本内容
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * 列表组件
+ */
+const List = forwardRefWithStatics(
+  (props: ListProps, ref: React.Ref<ListInstanceFunctions>) => {
+    const {
+      header,
+      footer,
+      asyncLoading,
+      size,
+      split,
+      stripe,
+      layout,
+      children,
+      className,
+      onLoadMore = noop,
+      onScroll = noop,
+      style,
+      scroll
+    } = useDefaultProps<ListProps>(props, listDefaultProps);
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    const { classPrefix } = useConfig();
+    const [local, t] = useLocaleReceiver("list");
+
+    const listItems = useMemo(
+      () => compact(React.Children.map(children, (child: React.ReactElement) => child?.props)) ?? [],
+      [children]
+    );
+
+    const { virtualConfig, cursorStyle, listStyle, isVirtualScroll, onInnerVirtualScroll, scrollToElement } =
+      useListVirtualScroll(scroll, wrapperRef, listItems);
+
+    const COMPONENT_NAME = `${classPrefix}-list`;
+
+    const handleClickLoad = (e: React.MouseEvent<HTMLDivElement>) => {
+      if (asyncLoading === "load-more") {
+        onLoadMore({ e });
+      }
+    };
+
+    const handleScroll = (event: WheelEvent<HTMLDivElement>): void => {
+      const { currentTarget } = event;
+      const { scrollTop, offsetHeight, scrollHeight } = currentTarget;
+      const scrollBottom = scrollHeight - scrollTop - offsetHeight;
+      if (isVirtualScroll) onInnerVirtualScroll(event as unknown as globalThis.WheelEvent);
+      onScroll({ e: event, scrollTop, scrollBottom });
+    };
+
+    const loadElement = isString(asyncLoading) ? (
+      <div
+        className={classNames(`${classPrefix}-list__load`, {
+          [`${classPrefix}-list__load--loading`]: asyncLoading === "loading",
+          [`${classPrefix}-list__load--load-more`]: asyncLoading === "load-more"
+        })}
+        onClick={handleClickLoad}
+      >
+        {asyncLoading === "loading" && (
+          <div>
+            <Loading loading={true} />
+            <span>{t(local.loadingText)}</span>
+          </div>
+        )}
+        {asyncLoading === "load-more" && <span>{t(local.loadingMoreText)}</span>}
+      </div>
+    ) : (
+      asyncLoading
+    );
+
+    useImperativeHandle(ref, () => ({
+      scrollTo: scrollToElement
+    }));
+
+    const renderContent = () => (
+      <>
+        {isVirtualScroll ? (
+          <>
+            <div style={cursorStyle}></div>
+            <ul className={`${COMPONENT_NAME}__inner`} style={listStyle}>
+              {virtualConfig.visibleData.map((item, index) => (
+                <ListItem key={index} {...(item as any)} />
+              ))}
+            </ul>
+          </>
+        ) : (
+          <ul className={`${COMPONENT_NAME}__inner`}>{children}</ul>
+        )}
+      </>
+    );
+
+    return (
+      <div
+        ref={wrapperRef}
+        style={{
+          ...style,
+          position: isVirtualScroll ? "relative" : undefined
+        }}
+        onScroll={handleScroll}
+        className={classNames(`${COMPONENT_NAME}`, className, {
+          [`${COMPONENT_NAME}--split`]: split,
+          [`${COMPONENT_NAME}--stripe`]: stripe,
+          [`${COMPONENT_NAME}--vertical-action`]: layout === "vertical",
+          [`${classPrefix}-size-s`]: size === "small",
+          [`${classPrefix}-size-l`]: size === "large"
+        })}
+      >
+        {header && <div className={`${COMPONENT_NAME}__header`}>{parseTNode(header)}</div>}
+        {renderContent()}
+        {asyncLoading && loadElement}
+        {footer && <div className={`${COMPONENT_NAME}__footer`}>{parseTNode(footer)}</div>}
+      </div>
+    );
+  },
+  { ListItem, ListItemMeta }
+);
+
+List.displayName = "List";
+
+export default List;

package/list/ListItem.tsx

@@ -0,0 +1,36 @@
+import React, { forwardRef } from "react";
+import classNames from "classnames";
+import useConfig from "../hooks/useConfig";
+import { TdListItemProps } from "./type";
+import { StyledProps } from "../common";
+
+export interface ListItemProps extends TdListItemProps, StyledProps {
+  /**
+   * 文本内容
+   */
+  children?: React.ReactNode;
+  content?: React.ReactNode;
+}
+
+/**
+ * 列表组件
+ */
+const ListItem = forwardRef<HTMLLIElement, ListItemProps>((props, ref) => {
+  const { children, className, style, action, content } = props;
+  const { classPrefix } = useConfig();
+
+  const actionElement = action && <ul className={`${classPrefix}-list-item__action`}>{action}</ul>;
+
+  return (
+    <li ref={ref} className={classNames(`${classPrefix}-list-item`, className)} style={style}>
+      <div className={`${classPrefix}-list-item-main`}>
+        {children ? children : content}
+        {actionElement}
+      </div>
+    </li>
+  );
+});
+
+ListItem.displayName = "ListItem";
+
+export default ListItem;

package/list/ListItemMeta.tsx

@@ -0,0 +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;

package/list/defaultProps.ts

@@ -0,0 +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 = {};

package/list/hooks/useListVirtualScroll.ts

@@ -0,0 +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
+  };
+};

package/list/index.ts

@@ -0,0 +1,11 @@
+import _List from "./List";
+
+import "./style/index.js";
+
+export type { ListProps } from "./List";
+export type { ListItemProps } from "./ListItem";
+export type { ListItemMetaProps } from "./ListItemMeta";
+export * from "./type";
+
+export const List = _List;
+export default List;

package/list/style/css.js

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

package/list/style/index.js

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