@tendaui/components 1.2.3 → 1.3.0

package/tab/_example/placement.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { Tabs, TabPanel } from "../index";
+
+const PlacementExample = () => {
+  const [placement, setPlacement] = useState<"top" | "bottom" | "left" | "right">('top');
+  const [activeTab, setActiveTab] = useState("tab1");
+
+  return (
+    <div>
+      <div style={{ marginBottom: "16px" }}>
+        <span style={{ marginRight: "8px" }}>选项卡位置：</span>
+        <select value={placement} onChange={(e) => setPlacement(e.target.value as any)}>
+          <option value="top">顶部</option>
+          <option value="bottom">底部</option>
+          <option value="left">左侧</option>
+          <option value="right">右侧</option>
+        </select>
+      </div>
+      <div style={{ height: "200px", border: "1px solid #eee" }}>
+        <Tabs value={activeTab} onChange={(val) => setActiveTab(val as string)} placement={placement}>
+          <TabPanel label="选项卡一" value="tab1">
+            <div style={{ padding: "16px" }}>选项卡一的内容</div>
+          </TabPanel>
+          <TabPanel label="选项卡二" value="tab2">
+            <div style={{ padding: "16px" }}>选项卡二的内容</div>
+          </TabPanel>
+          <TabPanel label="选项卡三" value="tab3">
+            <div style={{ padding: "16px" }}>选项卡三的内容</div>
+          </TabPanel>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default PlacementExample;

package/tab/_example/removable.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { Tabs, TabPanel } from "../index";
+
+const RemovableExample = () => {
+  const [activeTab, setActiveTab] = useState("tab1");
+  const [tabs, setTabs] = useState([
+    { label: "选项卡一", value: "tab1" },
+    { label: "选项卡二", value: "tab2" },
+    { label: "选项卡三", value: "tab3" }
+  ]);
+
+  const handleRemove = (options: { value: string | number; index: number }) => {
+    const newTabs = tabs.filter((tab) => tab.value !== options.value);
+    setTabs(newTabs);
+    if (activeTab === options.value && newTabs.length > 0) {
+      setActiveTab(newTabs[0].value);
+    }
+  };
+
+  return (
+    <Tabs value={activeTab} onChange={(val) => setActiveTab(val as string)} onRemove={handleRemove}>
+      {tabs.map((tab) => (
+        <TabPanel key={tab.value} label={tab.label} value={tab.value} removable>
+          <div style={{ padding: "16px" }}>{tab.label} 的内容</div>
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+};
+
+export default RemovableExample;

package/tab/_example/sizes.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Tabs, TabPanel } from "../index";
+
+const SizesExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>中尺寸（默认）</div>
+      <Tabs defaultValue="tab1" size="medium">
+        <TabPanel label="选项卡一" value="tab1">
+          <div style={{ padding: "16px" }}>中尺寸内容</div>
+        </TabPanel>
+        <TabPanel label="选项卡二" value="tab2">
+          <div style={{ padding: "16px" }}>中尺寸内容</div>
+        </TabPanel>
+      </Tabs>
+    </div>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>大尺寸</div>
+      <Tabs defaultValue="tab1" size="large">
+        <TabPanel label="选项卡一" value="tab1">
+          <div style={{ padding: "16px" }}>大尺寸内容</div>
+        </TabPanel>
+        <TabPanel label="选项卡二" value="tab2">
+          <div style={{ padding: "16px" }}>大尺寸内容</div>
+        </TabPanel>
+      </Tabs>
+    </div>
+  </div>
+);
+
+export default SizesExample;

package/tab/_example/with-action.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import { Tabs, TabPanel } from "../index";
+
+const WithActionExample = () => {
+  const [activeTab, setActiveTab] = useState("tab1");
+
+  return (
+    <Tabs
+      value={activeTab}
+      onChange={(val) => setActiveTab(val as string)}
+      action={<button style={{ marginRight: "8px", cursor: "pointer" }}>操作按钮</button>}
+    >
+      <TabPanel label="选项卡一" value="tab1">
+        <div style={{ padding: "16px" }}>选项卡一的内容</div>
+      </TabPanel>
+      <TabPanel label="选项卡二" value="tab2">
+        <div style={{ padding: "16px" }}>选项卡二的内容</div>
+      </TabPanel>
+      <TabPanel label="选项卡三" value="tab3">
+        <div style={{ padding: "16px" }}>选项卡三的内容</div>
+      </TabPanel>
+    </Tabs>
+  );
+};
+
+export default WithActionExample;

package/table/Cell.tsx

@@ -3,6 +3,7 @@ import classNames from "classnames";
 import { isFunction, get } from "lodash-es";
 import useConfig from "../hooks/useConfig";
 import { BaseTableCellParams, TableRowData } from "./type";
+import Ellipsis from "./Ellipsis";
 
 export interface CellProps<T extends TableRowData = TableRowData> {
   cellParams: BaseTableCellParams<T>;
@@ -58,13 +59,9 @@ const Cell = <T extends TableRowData = TableRowData>(props: CellProps<T>) => {
   // 处理省略文本
   const isEllipsis = Boolean(col.ellipsis);
   const cellContent = isEllipsis ? (
-    <div
-      className={`${classPrefix}-table__ellipsis`}
-      title={String(cellNode)}
-      style={{ width: "100%", overflow: "hidden" }}
-    >
+    <Ellipsis classPrefix={classPrefix}>
       {cellNode}
-    </div>
+    </Ellipsis>
   ) : (
     cellNode
   );

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;