@tendaui/components 1.2.4 → 1.3.0

package/table/Ellipsis.tsx

@@ -0,0 +1,73 @@
+import React, { useRef, useState, MouseEvent } from "react";
+import classNames from "classnames";
+
+import type { TNode } from "../common";
+import { isNodeOverflow } from "../_util/scroll";
+import { Tooltip } from "@tendaui/react";
+import useDebounce from "../hooks/useDebounce";
+
+export interface EllipsisProps {
+  content?: string | TNode;
+  children?: string | TNode;
+  popupContent?: string | number | TNode;
+  placement?: string;
+  attach?: () => HTMLElement;
+  tooltipProps?: any;
+  zIndex?: number;
+  overlayClassName?: string;
+  classPrefix?: string;
+}
+
+/** 超出省略显示 */
+export default function Ellipsis(props: EllipsisProps) {
+  const { classPrefix = "td" } = props;
+  const root = useRef<HTMLDivElement>(null);
+  const [isOverflow, setIsOverflow] = useState(false);
+
+  const ellipsisClasses = classNames([`${classPrefix}-table__ellipsis`, `${classPrefix}-text-ellipsis`]);
+
+  const innerEllipsisClassName: any = [`${classPrefix}-table__ellipsis-content`, props.overlayClassName];
+
+  // 当表格数据量大时，不希望默认渲染全量的 Popup，期望在用户 mouseenter 的时候再显示
+  const onTriggerMouseenter = () => {
+    if (!root.current) return;
+    setIsOverflow(isNodeOverflow(root.current));
+  };
+
+  const onTriggerMouseleave = () => {
+    setIsOverflow(isNodeOverflow(root.current));
+  };
+
+  // 使用 debounce 有两个原因：1. 避免 safari/firefox 等浏览器不显示省略浮层；2. 避免省略列快速滚动时，出现一堆的省略浮层
+  const onMouseAround = useDebounce((e: MouseEvent<HTMLDivElement>) => {
+    e.type === "mouseleave" ? onTriggerMouseleave() : onTriggerMouseenter();
+  }, 80);
+
+  const cellNode = props.content || props.children;
+  const ellipsisContent = (
+    <div ref={root} className={ellipsisClasses} onMouseEnter={onMouseAround} onMouseLeave={onMouseAround}>
+      {cellNode}
+    </div>
+  );
+  let content = null;
+  const { tooltipProps } = props;
+  if (isOverflow) {
+    const rProps = {
+      content: props.popupContent || cellNode,
+      destroyOnClose: true,
+      zIndex: props.zIndex,
+      attach: props.attach,
+      placement: props.placement,
+      overlayClassName: tooltipProps?.overlayClassName
+        ? innerEllipsisClassName.concat(tooltipProps.overlayClassName)
+        : innerEllipsisClassName,
+      ...(props.tooltipProps || {})
+    };
+    content = <Tooltip {...rProps}>{ellipsisContent}</Tooltip>;
+  } else {
+    content = ellipsisContent;
+  }
+  return content;
+}
+
+Ellipsis.displayName = "Ellipsis";

package/table/_example/alignment.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const AlignmentExample = () => (
+  <Table
+    columns={[
+      { colKey: "name", title: "左对齐", width: 120, align: "left" },
+      { colKey: "age", title: "居中", width: 100, align: "center" },
+      { colKey: "score", title: "右对齐", width: 100, align: "right" },
+      { colKey: "email", title: "默认（左对齐）", width: 240 }
+    ]}
+    data={baseData}
+    bordered
+  />
+);
+
+export default AlignmentExample;

package/table/_example/auto-width.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const AutoWidthExample = () => (
+  <Table
+    columns={[
+      { colKey: "name", title: "姓名" },
+      { colKey: "age", title: "年龄" },
+      { colKey: "email", title: "邮箱" },
+      { colKey: "address", title: "地址" }
+    ]}
+    data={baseData}
+    bordered
+    tableLayout="auto"
+  />
+);
+
+export default AutoWidthExample;

package/table/_example/bordered-stripe-hover.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseColumns: BaseTableCol<UserData>[] = [
+  { colKey: "name", title: "姓名", width: 120 },
+  { colKey: "age", title: "年龄", width: 80, align: "center" },
+  { colKey: "email", title: "邮箱", width: 240 },
+  { colKey: "address", title: "地址" }
+];
+
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const BorderedStripeHoverExample = () => <Table columns={baseColumns} data={baseData} bordered stripe hover />;
+
+export default BorderedStripeHoverExample;

package/table/_example/bordered.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseColumns: BaseTableCol<UserData>[] = [
+  { colKey: "name", title: "姓名", width: 120 },
+  { colKey: "age", title: "年龄", width: 80, align: "center" },
+  { colKey: "email", title: "邮箱", width: 240 },
+  { colKey: "address", title: "地址" }
+];
+
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const BorderedExample = () => <Table columns={baseColumns} data={baseData} bordered />;
+
+export default BorderedExample;

package/table/_example/cell-click.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseColumns: BaseTableCol<UserData>[] = [
+  { colKey: "name", title: "姓名", width: 120 },
+  { colKey: "age", title: "年龄", width: 80, align: "center" },
+  { colKey: "email", title: "邮箱", width: 240 },
+  { colKey: "address", title: "地址" }
+];
+
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const CellClickExample = () => (
+  <Table
+    columns={baseColumns}
+    data={baseData}
+    bordered
+    onCellClick={({ row, col, rowIndex, colIndex }) => {
+      console.log("点击单元格:", { row, col, rowIndex, colIndex });
+      window.alert(`点击了第 ${rowIndex + 1} 行，第 ${colIndex + 1} 列，值：${row[col.colKey]}`);
+    }}
+  />
+);
+
+export default CellClickExample;

package/table/_example/complex.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const ComplexExample = () => (
+  <Table
+    columns={[
+      { colKey: "name", title: "姓名", width: 120 },
+      { colKey: "age", title: "年龄", width: 80, align: "center" },
+      {
+        colKey: "status",
+        title: "状态",
+        width: 100,
+        align: "center",
+        cell: ({ row }) => (
+          <span
+            style={{
+              color: row.status === "active" ? "#52c41a" : "#ff4d4f",
+              fontWeight: "bold"
+            }}
+          >
+            {row.status === "active" ? "✓ 活跃" : "✗ 非活跃"}
+          </span>
+        )
+      },
+      {
+        colKey: "score",
+        title: "分数",
+        width: 120,
+        align: "right",
+        cell: ({ row }) => (
+          <span style={{ color: row.score >= 90 ? "#1890ff" : "#666", fontWeight: "bold" }}>{row.score} 分</span>
+        )
+      },
+      {
+        colKey: "email",
+        title: "邮箱",
+        width: 200,
+        ellipsis: true
+      },
+      { colKey: "address", title: "地址", width: 250, ellipsis: true }
+    ]}
+    data={baseData}
+    bordered
+    stripe
+    hover
+    size="medium"
+    onRowClick={({ row }) => {
+      console.log("点击行:", row);
+    }}
+  />
+);
+
+export default ComplexExample;

package/table/_example/custom-cell.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const CustomCellExample = () => (
+  <Table
+    columns={[
+      { colKey: "name", title: "姓名", width: 120 },
+      {
+        colKey: "status",
+        title: "状态",
+        width: 100,
+        align: "center",
+        cell: ({ row }) => (
+          <span
+            style={{
+              color: row.status === "active" ? "#52c41a" : "#ff4d4f",
+              fontWeight: "bold"
+            }}
+          >
+            {row.status === "active" ? "活跃" : "非活跃"}
+          </span>
+        )
+      },
+      {
+        colKey: "score",
+        title: "分数",
+        width: 100,
+        align: "center",
+        cell: ({ row }) => <span style={{ color: row.score >= 90 ? "#1890ff" : "#666" }}>{row.score}</span>
+      },
+      { colKey: "email", title: "邮箱", width: 240 },
+      { colKey: "address", title: "地址" }
+    ]}
+    data={baseData}
+    bordered
+  />
+);
+
+export default CustomCellExample;

package/table/_example/custom-empty.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseColumns: BaseTableCol<UserData>[] = [
+  { colKey: "name", title: "姓名", width: 120 },
+  { colKey: "age", title: "年龄", width: 80, align: "center" },
+  { colKey: "email", title: "邮箱", width: 240 },
+  { colKey: "address", title: "地址" }
+];
+
+const CustomEmptyExample = () => (
+  <Table
+    columns={baseColumns}
+    data={[]}
+    empty={
+      <div style={{ padding: "40px", textAlign: "center", color: "#999" }}>
+        <div style={{ fontSize: "48px", marginBottom: "16px" }}>📭</div>
+        <div>暂无数据，请稍后再试</div>
+      </div>
+    }
+  />
+);
+
+export default CustomEmptyExample;

package/table/_example/custom-row-class-name.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseColumns: BaseTableCol<UserData>[] = [
+  { colKey: "name", title: "姓名", width: 120 },
+  { colKey: "age", title: "年龄", width: 80, align: "center" },
+  { colKey: "email", title: "邮箱", width: 240 },
+  { colKey: "address", title: "地址" }
+];
+
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const CustomRowClassNameExample = () => (
+  <Table
+    columns={baseColumns}
+    data={baseData}
+    bordered
+    rowClassName={({ row, rowIndex }) => {
+      if (row.status === "active") {
+        return "table-row-active";
+      }
+      if (rowIndex % 2 === 0) {
+        return "table-row-even";
+      }
+      return "";
+    }}
+  />
+);
+
+export default CustomRowClassNameExample;

package/table/_example/default.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseColumns: BaseTableCol<UserData>[] = [
+  { colKey: "name", title: "姓名", width: 120 },
+  { colKey: "age", title: "年龄", width: 80, align: "center" },
+  { colKey: "email", title: "邮箱", width: 240 },
+  { colKey: "address", title: "地址" }
+];
+
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const DefaultExample = () => <Table columns={baseColumns} data={baseData} />;
+
+export default DefaultExample;

package/table/_example/ellipsis.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseData: UserData[] = [
+  {
+    id: 1,
+    name: "张三",
+    age: 25,
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区北京市朝阳区",
+    status: "active",
+    score: 95
+  },
+  { id: 2, name: "李四", age: 30, email: "lisi@example.com", address: "上海市浦东新区", status: "active", score: 88 },
+  { id: 3, name: "王五", age: 28, email: "wangwu@example.com", address: "广州市天河区", status: "inactive", score: 92 },
+  { id: 4, name: "赵六", age: 35, email: "zhaoliu@example.com", address: "深圳市南山区", status: "active", score: 87 },
+  { id: 5, name: "钱七", age: 22, email: "qianqi@example.com", address: "杭州市西湖区", status: "inactive", score: 90 }
+];
+
+const EllipsisExample = () => (
+  <Table
+    columns={[
+      { colKey: "name", title: "姓名", width: 120 },
+      { colKey: "age", title: "年龄", width: 80, align: "center" },
+      {
+        colKey: "email",
+        title: "邮箱",
+        width: 150,
+        ellipsis: true
+      },
+      {
+        colKey: "address",
+        title: "地址（省略）",
+        width: 200,
+        ellipsis: true
+      }
+    ]}
+    data={baseData}
+    bordered
+  />
+);
+
+export default EllipsisExample;

package/table/_example/empty.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Table from "../index";
+import type { BaseTableCol, TableRowData } from "../type";
+
+// 示例数据类型
+interface UserData extends TableRowData {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  address: string;
+  status: "active" | "inactive";
+  score: number;
+}
+
+// 基础数据
+const baseColumns: BaseTableCol<UserData>[] = [
+  { colKey: "name", title: "姓名", width: 120 },
+  { colKey: "age", title: "年龄", width: 80, align: "center" },
+  { colKey: "email", title: "邮箱", width: 240 },
+  { colKey: "address", title: "地址" }
+];
+
+const EmptyExample = () => (
+  <Table columns={baseColumns} data={[]} empty={<div style={{ padding: "40px", textAlign: "center" }}>暂无数据</div>} />
+);
+
+export default EmptyExample;