@tendaui/components 1.2.4 → 1.3.0

package/global-config/t.ts

@@ -1,111 +1,111 @@
-import { isString } from 'lodash-es';
-
-/**
- * 复数规则判断函数
- * @param count 数量
- * @returns 返回复数形式的索引 (0: zero/none, 1: one, 2: other/many)
- */
-function getPluralIndex(count: number): number {
-  if (count === 0) return 0; // no items
-  if (count === 1) return 1; // one item
-  return 2; // multiple items
-}
-
-/**
- * @see https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/config-provider/hooks/useConfig.ts#L48
- * 自定义 t function 可能依赖特定库函数，例如 tdesign-vue-next 中使用了 vue 的 h 函数
- * 因此交由各个类库自行实现
- */
-
-/**
- * 国际化函数，支持复数处理和变量替换
- *
- * 示例用法：
- * 1. 基本变量替换：
- *    t('Hello {name}', { name: 'World' }) // => 'Hello World'
- *
- * 2. 复数处理（传入数字）：
- *    t('no apples | one apple | {count} apples', 0) // => 'no apples'
- *    t('no apples | one apple | {count} apples', 1) // => 'one apple'
- *    t('no apples | one apple | {count} apples', 5) // => '5 apples'
- *
- * 3. 复合使用：
- *    t('no items found | found {count} item | found {count} items', 3, { count: 3 }) // => 'found 3 items'
- */
-
-// 类型重载定义
-export function t(pattern: string): string;
-export function t(pattern: string, data: Record<string, any>): string;
-export function t(pattern: string, count: number): string;
-export function t(pattern: string, count: number, data: Record<string, any>): string;
-export function t<T>(pattern: T): string;
-
-/**
- * @param pattern 文本模式，可以是字符串、函数或其他类型
- * @param args 参数列表，支持 (count: number) 或 (count: number, data: object) 或 (data: object)
- * @returns 处理后的文本
- */
-export function t<T>(pattern: T, ...args: any[]): string {
-  if (isString(pattern)) {
-    let text = pattern as string;
-    let count: number | undefined;
-    let data: Record<string, any> = {};
-
-    // 解析参数
-    if (args.length > 0) {
-      const [firstArg, secondArg] = args;
-
-      if (typeof firstArg === 'number') {
-      // 第一个参数是数字，表示 count
-        count = firstArg;
-        if (secondArg && typeof secondArg === 'object') {
-        // 第二个参数是对象，表示额外的数据
-          data = secondArg;
-        } else {
-          data.count = count; // 若没有提供第二个参数，则将 count 添加到数据中
-        }
-      } else if (typeof firstArg === 'object' && firstArg !== null) {
-      // 第一个参数是对象，表示数据
-        data = firstArg;
-      }
-    }
-
-    // 处理复数形式：支持 "no items | one item | {count} items" 格式
-    if (text.includes('|')) {
-      const pluralParts = text.split('|').map((part) => part.trim());
-
-      if (typeof count === 'number') {
-        // 使用 count 进行复数处理
-        const pluralIndex = getPluralIndex(count);
-
-        // 根据复数索引选择对应的文本
-        if (pluralIndex < pluralParts.length) {
-          text = pluralParts[pluralIndex];
-        } else {
-        // 如果索引超出范围，使用最后一个选项
-          text = pluralParts[pluralParts.length - 1];
-        }
-      } else {
-        // 如果没有 count，默认使用第一个选项
-        const [firstPart] = pluralParts;
-        text = firstPart;
-      }
-    }
-
-    // 处理变量替换：{key} 格式
-    if (data && Object.keys(data).length > 0) {
-      const regular = /\{\s*([\w-]+)\s*\}/g;
-      text = text.replace(regular, (match, key) => {
-        if (Object.prototype.hasOwnProperty.call(data, key)) {
-          return String(data[key]);
-        }
-        return match; // 如果找不到对应的键，保留原始占位符
-      });
-    }
-
-    return text as any;
-  }
-
-  // 如果不是字符串或函数，返回空字符串
-  return '';
-}
+import { isString } from "lodash-es";
+
+/**
+ * 复数规则判断函数
+ * @param count 数量
+ * @returns 返回复数形式的索引 (0: zero/none, 1: one, 2: other/many)
+ */
+function getPluralIndex(count: number): number {
+  if (count === 0) return 0; // no items
+  if (count === 1) return 1; // one item
+  return 2; // multiple items
+}
+
+/**
+ * @see https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/config-provider/hooks/useConfig.ts#L48
+ * 自定义 t function 可能依赖特定库函数，例如 tdesign-vue-next 中使用了 vue 的 h 函数
+ * 因此交由各个类库自行实现
+ */
+
+/**
+ * 国际化函数，支持复数处理和变量替换
+ *
+ * 示例用法：
+ * 1. 基本变量替换：
+ *    t('Hello {name}', { name: 'World' }) // => 'Hello World'
+ *
+ * 2. 复数处理（传入数字）：
+ *    t('no apples | one apple | {count} apples', 0) // => 'no apples'
+ *    t('no apples | one apple | {count} apples', 1) // => 'one apple'
+ *    t('no apples | one apple | {count} apples', 5) // => '5 apples'
+ *
+ * 3. 复合使用：
+ *    t('no items found | found {count} item | found {count} items', 3, { count: 3 }) // => 'found 3 items'
+ */
+
+// 类型重载定义
+export function t(pattern: string): string;
+export function t(pattern: string, data: Record<string, any>): string;
+export function t(pattern: string, count: number): string;
+export function t(pattern: string, count: number, data: Record<string, any>): string;
+export function t<T>(pattern: T): string;
+
+/**
+ * @param pattern 文本模式，可以是字符串、函数或其他类型
+ * @param args 参数列表，支持 (count: number) 或 (count: number, data: object) 或 (data: object)
+ * @returns 处理后的文本
+ */
+export function t<T>(pattern: T, ...args: any[]): string {
+  if (isString(pattern)) {
+    let text = pattern as string;
+    let count: number | undefined;
+    let data: Record<string, any> = {};
+
+    // 解析参数
+    if (args.length > 0) {
+      const [firstArg, secondArg] = args;
+
+      if (typeof firstArg === "number") {
+        // 第一个参数是数字，表示 count
+        count = firstArg;
+        if (secondArg && typeof secondArg === "object") {
+          // 第二个参数是对象，表示额外的数据
+          data = secondArg;
+        } else {
+          data.count = count; // 若没有提供第二个参数，则将 count 添加到数据中
+        }
+      } else if (typeof firstArg === "object" && firstArg !== null) {
+        // 第一个参数是对象，表示数据
+        data = firstArg;
+      }
+    }
+
+    // 处理复数形式：支持 "no items | one item | {count} items" 格式
+    if (text.includes("|")) {
+      const pluralParts = text.split("|").map((part) => part.trim());
+
+      if (typeof count === "number") {
+        // 使用 count 进行复数处理
+        const pluralIndex = getPluralIndex(count);
+
+        // 根据复数索引选择对应的文本
+        if (pluralIndex < pluralParts.length) {
+          text = pluralParts[pluralIndex];
+        } else {
+          // 如果索引超出范围，使用最后一个选项
+          text = pluralParts[pluralParts.length - 1];
+        }
+      } else {
+        // 如果没有 count，默认使用第一个选项
+        const [firstPart] = pluralParts;
+        text = firstPart;
+      }
+    }
+
+    // 处理变量替换：{key} 格式
+    if (data && Object.keys(data).length > 0) {
+      const regular = /\{\s*([\w-]+)\s*\}/g;
+      text = text.replace(regular, (match, key) => {
+        if (Object.prototype.hasOwnProperty.call(data, key)) {
+          return String(data[key]);
+        }
+        return match; // 如果找不到对应的键，保留原始占位符
+      });
+    }
+
+    return text as any;
+  }
+
+  // 如果不是字符串或函数，返回空字符串
+  return "";
+}

package/hooks/useDebounce.ts

@@ -0,0 +1,27 @@
+import { useCallback, useRef } from 'react';
+
+/**
+ * 防抖钩子
+ * @param fn 要执行的函数
+ * @param delay 延迟时间（毫秒）
+ * @returns 防抖后的函数
+ */
+export default function useDebounce<T extends (...args: any[]) => any>(
+  fn: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  return useCallback(
+    (...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        fn(...args);
+      }, delay);
+    },
+    [fn, delay]
+  );
+}

package/hooks/useLastest.ts

@@ -1,8 +1,12 @@
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
 
 const useLatest = <T>(value: T) => {
   const ref = useRef(value);
-  ref.current = value;
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
   return ref;
 };
 

package/hooks/useResizeObserve.ts

@@ -31,6 +31,5 @@ export default function useResizeObserver(
         observer = null;
       }
     };
-    // eslint-disable-next-line
   }, [container, enabled]);
 }

package/index.ts

@@ -34,7 +34,7 @@ export * from "./switch";
 export * from "./form";
 export * from "./ip-input";
 export * from "./fireworks";
-// export * from './tooltip';
+export * from "./tooltip";
 export * from "./drawer";
 // export * from './progress';
 // export * from './popconfirm';

package/input/Input.tsx

@@ -11,6 +11,8 @@ import { StyledProps, TNode, TElement } from "../common";
 import { isFunction } from "lodash-es";
 import useConfig from "../hooks/useConfig";
 import { useLocaleReceiver } from "../locale/LocalReceiver";
+import useLengthLimit from "./useLengthLimit";
+
 export interface InputProps extends TdInputProps, StyledProps {
   showInput?: boolean; // 控制透传readonly同时是否展示input 默认保留 因为正常Input需要撑开宽度
   keepWrapperWidth?: boolean; // 控制透传autoWidth之后是否容器宽度也自适应 多选等组件需要用到自适应但也需要保留宽度
@@ -81,6 +83,12 @@ const Input = forwardRef<HTMLInputElement, InputProps>((originalProps, ref) => {
     onCompositionstart,
     onCompositionend,
     onChange: onChangeFromProps,
+    maxlength,
+    maxcharacter,
+    allowInputOverMax = false,
+    status,
+    onValidate,
+    showLimitNumber = true,
     ...restProps
   } = props;
   const composingRef = useRef(false);
@@ -97,6 +105,16 @@ const Input = forwardRef<HTMLInputElement, InputProps>((originalProps, ref) => {
   const isInnerInputReadonly = readonly || !allowInput;
   const isValueEnabled = value && !disabled;
   const isShowClearIcon = ((clearable && isValueEnabled) || showClearIconOnEmpty) && isHover;
+
+  // 使用长度限制 hook
+  const { limitNumber, getValueByLimitNumber, tStatus } = useLengthLimit({
+    value: value === undefined ? undefined : String(value),
+    status,
+    maxlength,
+    maxcharacter,
+    allowInputOverMax,
+    onValidate
+  });
   let suffixIconNew = suffixIcon;
   if (isShowClearIcon)
     suffixIconNew = (
@@ -128,6 +146,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>((originalProps, ref) => {
   const suffixIconContent = renderIcon("t", "suffix", parseTNode(suffixIconNew));
   const labelContent = isFunction(label) ? label() : label;
   const suffixContent = isFunction(suffix) ? suffix() : suffix;
+  const limitNumberNode =
+    limitNumber && showLimitNumber ? <div className={`${classPrefix}-input__limit-number`}>{limitNumber}</div> : null;
 
   const updateInputWidth = () => {
     if (!autoWidth || !inputRef.current) return;
@@ -167,6 +187,17 @@ const Input = forwardRef<HTMLInputElement, InputProps>((originalProps, ref) => {
     setRenderType(type);
   }, [type]);
 
+  // 初始判断长度，如超限自动截断并触发onchange
+  useEffect(() => {
+    if (value) {
+      const limitedValue = getValueByLimitNumber(value);
+      if (limitedValue.length !== value.length && !allowInputOverMax) {
+        onChange?.(limitedValue, { trigger: "initial" });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const innerValue = composingRef.current ? composingValue : value ?? "";
   const formatDisplayValue = format && !isFocused ? format(innerValue) : innerValue;
 
@@ -204,9 +235,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>((originalProps, ref) => {
         [`${classPrefix}-size-s`]: size === "small",
         [`${classPrefix}-size-l`]: size === "large",
         [`${classPrefix}-align-${align}`]: align,
-        [`${classPrefix}-inpu${classPrefix}--prefix`]: prefixIcon || labelContent,
-        [`${classPrefix}-inpu${classPrefix}--suffix`]: suffixIconContent || suffixContent,
-        [`${classPrefix}-inpu${classPrefix}--borderless`]: borderless,
+        [`${classPrefix}-is-${tStatus}`]: tStatus && tStatus !== "default",
+        [`${classPrefix}-input--prefix`]: prefixIcon || labelContent,
+        [`${classPrefix}-input--suffix`]: suffixIconContent || suffixContent || limitNumberNode,
+        [`${classPrefix}-input--borderless`]: borderless,
         [`${classPrefix}-input--focused`]: isFocused
       })}
       onMouseEnter={handleMouseEnter}
@@ -225,7 +257,12 @@ const Input = forwardRef<HTMLInputElement, InputProps>((originalProps, ref) => {
           {innerValue || placeholder}
         </span>
       )}
-      {suffixContent ? <div className={`${classPrefix}-input__suffix`}>{suffixContent}</div> : null}
+      {suffixContent || limitNumberNode ? (
+        <div className={`${classPrefix}-input__suffix`}>
+          {suffixContent}
+          {limitNumberNode}
+        </div>
+      ) : null}
       {suffixIconContent}
     </div>
   );
@@ -256,17 +293,17 @@ const Input = forwardRef<HTMLInputElement, InputProps>((originalProps, ref) => {
     trigger: InputContextTrigger = "input"
   ) {
     let { value: newStr } = e.currentTarget;
+    // 应用长度限制
+    const limitedValue = getValueByLimitNumber(newStr);
     if (composingRef.current) {
-      setComposingValue(newStr);
+      setComposingValue(limitedValue);
     } else {
       // 完成中文输入时同步一次 composingValue
-      setComposingValue(newStr);
-      onChange(newStr, { e, trigger });
+      setComposingValue(limitedValue);
+      onChange(limitedValue, { e, trigger });
     }
   }
 
-  // 添加MouseDown阻止冒泡，防止點擊Clear value會導致彈窗閃爍一下
-  // https://github.com/Tencent/tdesign-react/issues/2320
   function handleMouseDown(e: React.MouseEvent<HTMLSpanElement, globalThis.MouseEvent>) {
     e.stopPropagation();
     // 兼容React16
@@ -378,7 +415,13 @@ const Input = forwardRef<HTMLInputElement, InputProps>((originalProps, ref) => {
       {...restProps}
     >
       {renderInputNode}
-      {tips && <div className={classNames(`${classPrefix}-input__tips`)}>{tips}</div>}
+      {tips && (
+        <div
+          className={classNames(`${classPrefix}-input__tips`, `${classPrefix}-input__tips--${tStatus || "default"}`)}
+        >
+          {tips}
+        </div>
+      )}
     </div>
   );
 });

package/input/_example/auto-width.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import { Input } from "../index";
+
+const AutoWidthInput = () => {
+  const [value, setValue] = useState("自适应宽度");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Input autoWidth value={value} onChange={(val) => setValue(val)} placeholder="宽度随内容变化" />
+      <div style={{ color: "#666", fontSize: "12px" }}>输入更多内容，输入框会自动变宽</div>
+    </div>
+  );
+};
+
+export default AutoWidthInput;

package/input/_example/borderless.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Input } from "../index";
+
+const BorderlessInput = () => (
+  <div style={{ display: "flex", gap: "24px", width: "500px" }}>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>有边框</div>
+      <Input placeholder="有边框" />
+    </div>
+    <div>
+      <div style={{ marginBottom: "8px", color: "#666" }}>无边框</div>
+      <Input borderless placeholder="无边框" />
+    </div>
+  </div>
+);
+
+export default BorderlessInput;

package/input/_example/clearable.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import { Input } from "../index";
+
+const ClearableInput = () => {
+  const [value, setValue] = useState("可清空的内容");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+      <Input clearable value={value} onChange={(val) => setValue(val)} placeholder="输入内容后显示清除按钮" />
+      <div style={{ color: "#666", fontSize: "12px" }}>当前值：{value || "(空)"}</div>
+    </div>
+  );
+};
+
+export default ClearableInput;

package/input/_example/default.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Input } from "../index";
+
+const DefaultInput = () => (
+  <div style={{ width: "500px" }}>
+    <Input placeholder="请输入内容" />
+  </div>
+);
+
+export default DefaultInput;

package/input/_example/disabled-readonly.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Input } from "../index";
+
+const DisabledReadonlyInput = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+    <Input placeholder="正常状态" />
+    <Input disabled placeholder="禁用状态" defaultValue="禁用内容" />
+    <Input readonly placeholder="只读状态" defaultValue="只读内容" />
+  </div>
+);
+
+export default DisabledReadonlyInput;

package/input/_example/events.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { Input } from "../index";
+
+const EventsInput = () => {
+  const [log, setLog] = useState<string[]>([]);
+
+  const addLog = (msg: string) => {
+    setLog((prev) => [...prev.slice(-4), msg]);
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+      <Input
+        placeholder="触发各种事件（查看下方日志）"
+        clearable
+        onChange={(val) => addLog(`onChange: ${val}`)}
+        onFocus={() => addLog("onFocus")}
+        onBlur={() => addLog("onBlur")}
+        onEnter={(val) => addLog(`onEnter: ${val}`)}
+        onClear={() => addLog("onClear")}
+      />
+      <div
+        style={{
+          padding: "12px",
+          background: "var(--tendaui-color-primary-1)",
+          borderRadius: "4px",
+          fontSize: "12px",
+          fontFamily: "monospace"
+        }}
+      >
+        <div style={{ marginBottom: "8px", fontWeight: "bold" }}>事件日志：</div>
+        {log.length === 0 ? (
+          <div style={{ color: "#999" }}>暂无事件触发</div>
+        ) : (
+          log.map((item, index) => <div key={index}>{item}</div>)
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EventsInput;

package/input/_example/group.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Input, InputGroup } from "../index";
+import { IconUser, IconLock } from "@tendaui/icons";
+
+const InputGroupExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+    <InputGroup separate>
+      <Input placeholder="用户名" prefixIcon={<IconUser />} />
+      <Input type="password" placeholder="密码" prefixIcon={<IconLock />} />
+    </InputGroup>
+  </div>
+);
+
+export default InputGroupExample;

package/input/_example/label-suffix.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Input } from "../index";
+
+const LabelSuffixInput = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+    <Input label="http://" placeholder="请输入网址" />
+    <Input suffix=".com" placeholder="请输入域名" />
+    <Input label="http://" suffix=".com" placeholder="请输入域名" />
+  </div>
+);
+
+export default LabelSuffixInput;

package/input/_example/max-length.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Input } from "../index";
+
+const MaxLengthInput = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+    <Input maxlength={10} placeholder="最多输入10个字符" />
+    <Input maxcharacter={20} placeholder="最多输入20个字符（中文算2个）" />
+  </div>
+);
+
+export default MaxLengthInput;

package/input/_example/password.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import { Input } from "../index";
+import { IconLock, IconEyeOpened, IconEyeClosed } from "@tendaui/icons";
+
+const PasswordInput = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <div style={{ width: 500 }}>
+      <Input type={visible ? "text" : "password"} prefixIcon={<IconLock />} placeholder="请输入密码" />
+    </div>
+  );
+};
+
+export default PasswordInput;

package/input/_example/sizes.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Input } from "../index";
+
+const SizesInput = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+    <Input size="small" placeholder="小尺寸" />
+    <Input size="medium" placeholder="中尺寸（默认）" />
+    <Input size="large" placeholder="大尺寸" />
+  </div>
+);
+
+export default SizesInput;

package/input/_example/status.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Input } from "../index";
+
+const StatusInput = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "24px", width: "500px", margin: "8px 0" }}>
+    <Input status="default" placeholder="默认状态" tips="这是一条提示信息" />
+    <Input status="success" placeholder="成功状态" tips="校验通过" />
+    <Input status="warning" placeholder="警告状态" tips="请注意输入内容" />
+    <Input status="error" placeholder="错误状态" tips="输入内容有误" />
+  </div>
+);
+
+export default StatusInput;

package/input/_example/text-align.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Input } from "../index";
+
+const TextAlignInput = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: 500 }}>
+    <Input align="left" placeholder="左对齐" defaultValue="左对齐内容" />
+    <Input align="center" placeholder="居中对齐" defaultValue="居中对齐内容" />
+    <Input align="right" placeholder="右对齐" defaultValue="右对齐内容" />
+  </div>
+);
+
+export default TextAlignInput;

package/input/_example/with-icon.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Input } from "../index";
+import { IconSearch, IconUser } from "@tendaui/icons";
+
+const WithIconInput = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px", width: "500px" }}>
+    <Input prefixIcon={<IconSearch />} placeholder="前置图标" />
+    <Input suffixIcon={<IconSearch />} placeholder="后置图标" />
+    <Input prefixIcon={<IconUser />} suffixIcon={<IconSearch />} placeholder="前后图标" />
+  </div>
+);
+
+export default WithIconInput;

package/input/type.ts

@@ -64,6 +64,9 @@ export interface TdInputProps {
    * 用户最多可以输入的文本长度，一个中文等于一个计数长度。值为空，则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用
    */
   maxlength?: number;
+
+  allowInputOverMax?: boolean;
+  showLimitNumber?: boolean;
   /**
    * 名称
    * @default ''