@tendaui/components 1.2.4 → 1.3.0

package/styles/utilities/_animation.scss

@@ -1,58 +1,58 @@
-@use "../_vars.scss" as *;
-@use "../_vars.scss" as *;
-
-@keyframes t-fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes t-fade-out {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes t-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.#{$prefix}-icon-loading {
-  animation: t-spin 1s linear infinite;
-}
-
-// 动态生成 keyframes 动画
-@mixin anim-g-attr-change($name, $attr, $from, $to) {
-  @keyframes #{$name} {
-    from {
-      #{$attr}: #{$from};
-    }
-    to {
-      #{$attr}: #{$to};
-    }
-  }
-}
-
-@keyframes t-zoom-out {
-  from {
-    transform: scale(0.2);
-  }
-
-  to {
-    transform: scale(1);
-  }
-}
+@use "../_vars.scss" as *;
+@use "../_vars.scss" as *;
+
+@keyframes t-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes t-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes t-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.#{$prefix}-icon-loading {
+  animation: t-spin 1s linear infinite;
+}
+
+// 动态生成 keyframes 动画
+@mixin anim-g-attr-change($name, $attr, $from, $to) {
+  @keyframes #{$name} {
+    from {
+      #{$attr}: #{$from};
+    }
+    to {
+      #{$attr}: #{$to};
+    }
+  }
+}
+
+@keyframes t-zoom-out {
+  from {
+    transform: scale(0.2);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}

package/styles/utilities/_tips.scss

@@ -1,10 +1,10 @@
-@use "../_vars.scss" as *;
-@use "../mixins/_text.scss" as *;
-.#{$prefix}-tips {
-  font-size: $font-size-s;
-}
-
-@include tips-text-status(default);
-@include tips-text-status(error);
-@include tips-text-status(warning);
-@include tips-text-status(success);
+@use "../_vars.scss" as *;
+@use "../mixins/_text.scss" as *;
+.#{$prefix}-tips {
+  font-size: $font-size-s;
+}
+
+@include tips-text-status(default);
+@include tips-text-status(error);
+@include tips-text-status(warning);
+@include tips-text-status(success);

package/switch/_example/async-change.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import { Switch } from "@tendaui/react";
+
+const AsyncExample = () => {
+  const [checked, setChecked] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleChange = (val: boolean) => {
+    setLoading(true);
+    // 模拟异步请求
+    setTimeout(() => {
+      setChecked(val);
+      setLoading(false);
+    }, 1000);
+  };
+
+  return (
+    <div>
+      <Switch value={checked} loading={loading} onChange={(val) => handleChange(val as boolean)} />
+      <div style={{ color: "#666", fontSize: "12px" }}>点击切换，模拟 1 秒异步请求</div>
+    </div>
+  );
+};
+
+export default AsyncExample;

package/switch/_example/before-change.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import { Switch } from "@tendaui/react";
+
+const BeforeChangeExample = () => {
+  const [checked, setChecked] = useState(false);
+
+  const beforeChange = () => {
+    return new Promise<boolean>((resolve) => {
+      const confirmed = window.confirm("确定要切换状态吗？");
+      resolve(confirmed);
+    });
+  };
+
+  return (
+    <div>
+      <Switch value={checked} beforeChange={beforeChange} onChange={(val) => setChecked(val as boolean)} />
+      <div style={{ color: "#666", fontSize: "12px" }}>切换前会弹出确认框，确认后才会切换</div>
+    </div>
+  );
+};
+
+export default BeforeChangeExample;

package/switch/_example/controlled.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import { Switch } from "@tendaui/react";
+
+const ControlledExample = () => {
+  const [checked, setChecked] = useState(true);
+  return (
+    <div>
+      <Switch value={checked} onChange={(val) => setChecked(val as boolean)} />
+      <div style={{ color: "#666" }}>当前状态：{checked ? "开启" : "关闭"}</div>
+    </div>
+  );
+};
+
+export default ControlledExample;

package/switch/_example/custom-value.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import { Switch } from "@tendaui/react";
+
+const CustomValueExample = () => {
+  const [value1, setValue1] = useState<string | number | boolean>(1);
+  const [value2, setValue2] = useState<string | number | boolean>("open");
+  return (
+    <div>
+      <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
+        <Switch customValue={[1, 0]} value={value1} onChange={(val) => setValue1(val)} />
+        <span style={{ color: "#666" }}>数字值: {String(value1)}</span>
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
+        <Switch customValue={["open", "close"]} value={value2} onChange={(val) => setValue2(val)} />
+        <span style={{ color: "#666" }}>字符串值: {String(value2)}</span>
+      </div>
+    </div>
+  );
+};
+
+export default CustomValueExample;

package/switch/_example/default.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { Switch } from "@tendaui/react";
+
+const DefaultExample = () => <Switch defaultValue={true} />;
+
+export default DefaultExample;

package/switch/_example/disabled.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Switch } from "@tendaui/react";
+
+const DisabledExample = () => (
+  <div style={{ display: "flex", gap: "24px" }}>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch defaultValue={false} />
+      <span style={{ color: "#666", fontSize: "12px" }}>正常关闭</span>
+    </div>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch defaultValue={true} />
+      <span style={{ color: "#666", fontSize: "12px" }}>正常开启</span>
+    </div>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch disabled defaultValue={false} />
+      <span style={{ color: "#666", fontSize: "12px" }}>禁用关闭</span>
+    </div>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch disabled defaultValue={true} />
+      <span style={{ color: "#666", fontSize: "12px" }}>禁用开启</span>
+    </div>
+  </div>
+);
+
+export default DisabledExample;

package/switch/_example/loading.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Switch } from "@tendaui/react";
+
+const LoadingExample = () => (
+  <div style={{ display: "flex", gap: "24px" }}>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch loading defaultValue={false} />
+      <span style={{ color: "#666", fontSize: "12px" }}>加载中（关）</span>
+    </div>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch loading defaultValue={true} />
+      <span style={{ color: "#666", fontSize: "12px" }}>加载中（开）</span>
+    </div>
+  </div>
+);
+
+export default LoadingExample;

package/switch/_example/sizes.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Switch } from "@tendaui/react";
+
+const SizesExample = () => (
+  <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch size="small" defaultValue={true} />
+      <span style={{ color: "#666", fontSize: "12px" }}>小</span>
+    </div>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch size="medium" defaultValue={true} />
+      <span style={{ color: "#666", fontSize: "12px" }}>中（默认）</span>
+    </div>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+      <Switch size="large" defaultValue={true} />
+      <span style={{ color: "#666", fontSize: "12px" }}>大</span>
+    </div>
+  </div>
+);
+
+export default SizesExample;

package/switch/_example/with-label.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Switch } from "@tendaui/react";
+
+const WithLabelExample = () => (
+  <div>
+    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+      <Switch label={["开", "关"]} defaultValue={true} />
+      <span style={{ color: "#666" }}>数组形式</span>
+    </div>
+    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+      <Switch label={["ON", "OFF"]} defaultValue={false} />
+      <span style={{ color: "#666" }}>英文标签</span>
+    </div>
+    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+      <Switch label={["1", "0"]} defaultValue={true} />
+      <span style={{ color: "#666" }}>数字标签</span>
+    </div>
+  </div>
+);
+
+export default WithLabelExample;

package/tab/TabPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useState, useEffect } from "react";
 import classNames from "classnames";
 import type { TdTabPanelProps } from "./type";
 import { StyledProps } from "../common";
@@ -17,13 +17,16 @@ const TabPanel: React.FC<TabPanelProps> = (props) => {
     tabPanelDefaultProps
   );
   const { tdTabPanelClassPrefix } = useTabClass();
-  const lazyRenderRef = useRef(lazy);
+  const [shouldRender, setShouldRender] = useState(!lazy);
 
-  if (lazy && isActive && lazyRenderRef.current) {
-    lazyRenderRef.current = false;
-  }
+  // 当标签激活且是延迟渲染时，设置为应该渲染
+  useEffect(() => {
+    if (lazy && isActive) {
+      setShouldRender(true);
+    }
+  }, [lazy, isActive]);
 
-  if ((!isActive && destroyOnHide) || lazyRenderRef.current) {
+  if ((!isActive && destroyOnHide) || !shouldRender) {
     return null;
   }
 

package/tab/_example/addable.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { Tabs, TabPanel } from "../index";
+
+const AddableExample = () => {
+  const [activeTab, setActiveTab] = useState("tab1");
+  const [tabs, setTabs] = useState([
+    { label: "选项卡一", value: "tab1" },
+    { label: "选项卡二", value: "tab2" }
+  ]);
+  const [tabCount, setTabCount] = useState(2);
+
+  const handleAdd = () => {
+    const newTabValue = `tab${tabCount + 1}`;
+    const newTab = { label: `选项卡${tabCount + 1}`, value: newTabValue };
+    setTabs([...tabs, newTab]);
+    setTabCount(tabCount + 1);
+    setActiveTab(newTabValue);
+  };
+
+  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)}
+      addable
+      onAdd={handleAdd}
+      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 AddableExample;

package/tab/_example/card-theme.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import { Tabs, TabPanel } from "../index";
+
+const CardThemeExample = () => {
+  const [activeTab, setActiveTab] = useState("tab1");
+
+  return (
+    <Tabs value={activeTab} onChange={(val) => setActiveTab(val as string)} theme="card">
+      <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 CardThemeExample;

package/tab/_example/default.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import { Tabs, TabPanel } from "../index";
+
+const DefaultExample = () => {
+  const [activeTab, setActiveTab] = useState("tab1");
+
+  return (
+    <Tabs value={activeTab} onChange={(val) => setActiveTab(val as string)}>
+      <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 DefaultExample;

package/tab/_example/disabled.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { Tabs, TabPanel } from "../index";
+
+const DisabledExample = () => {
+  const [activeTab, setActiveTab] = useState("tab1");
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>部分禁用</div>
+        <Tabs value={activeTab} onChange={(val) => setActiveTab(val as string)}>
+          <TabPanel label="选项卡一" value="tab1">
+            <div style={{ padding: "16px" }}>选项卡一的内容</div>
+          </TabPanel>
+          <TabPanel label="选项卡二（禁用）" value="tab2" disabled>
+            <div style={{ padding: "16px" }}>选项卡二的内容</div>
+          </TabPanel>
+          <TabPanel label="选项卡三" value="tab3">
+            <div style={{ padding: "16px" }}>选项卡三的内容</div>
+          </TabPanel>
+        </Tabs>
+      </div>
+      <div>
+        <div style={{ marginBottom: "8px", color: "#666" }}>全部禁用</div>
+        <Tabs value="tab1" disabled>
+          <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 DisabledExample;

package/tab/_example/lazy.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import { Tabs, TabPanel } from "../index";
+
+const LazyExample = () => {
+  const [activeTab, setActiveTab] = useState("tab1");
+
+  return (
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>懒加载模式下，只有在选项卡被激活时才会渲染内容</div>
+      <Tabs value={activeTab} onChange={(val) => setActiveTab(val as string)}>
+        <TabPanel label="选项卡一" value="tab1" lazy>
+          <div style={{ padding: "16px" }}>选项卡一的内容（懒加载）</div>
+        </TabPanel>
+        <TabPanel label="选项卡二" value="tab2" lazy>
+          <div style={{ padding: "16px" }}>选项卡二的内容（懒加载）</div>
+        </TabPanel>
+        <TabPanel label="选项卡三" value="tab3" lazy>
+          <div style={{ padding: "16px" }}>选项卡三的内容（懒加载）</div>
+        </TabPanel>
+      </Tabs>
+    </div>
+  );
+};
+
+export default LazyExample;

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
   );