@tendaui/components 1.2.4 → 1.3.1

package/global-config/mobile/locale/zh_CN.ts

@@ -1,101 +1,100 @@
-/* eslint-disable no-template-curly-in-string */
 // 文件有效，为国际化做准备
-import 'dayjs/locale/zh-cn';
+import "dayjs/locale/zh-cn";
 
 export default {
   actionSheet: {
-    cancel: '取消',
+    cancel: "取消"
   },
   calendar: {
-    title: '请选择日期',
-    confirm: '确认',
-    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
-    monthTitle: '{year} 年 {month}',
-    months: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'],
+    title: "请选择日期",
+    confirm: "确认",
+    weekdays: ["日", "一", "二", "三", "四", "五", "六"],
+    monthTitle: "{year} 年 {month}",
+    months: ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"]
   },
   cascader: {
-    title: '标题',
-    placeholder: '选择选项',
+    title: "标题",
+    placeholder: "选择选项"
   },
   dropdownMenu: {
-    reset: '重置',
-    confirm: '确定',
+    reset: "重置",
+    confirm: "确定"
   },
   dateTimePicker: {
-    title: '选择时间',
-    cancel: '取消',
-    confirm: '确定',
-    format: 'YYYY-MM-DD',
-    yearLabel: '年',
-    monthLabel: '月',
-    dateLabel: '日',
-    hourLabel: '时',
-    minuteLabel: '分',
-    secondLabel: '秒',
+    title: "选择时间",
+    cancel: "取消",
+    confirm: "确定",
+    format: "YYYY-MM-DD",
+    yearLabel: "年",
+    monthLabel: "月",
+    dateLabel: "日",
+    hourLabel: "时",
+    minuteLabel: "分",
+    secondLabel: "秒"
   },
   form: {
     errorMessage: {
-      date: '请输入正确的${name}',
-      url: '请输入正确的${name}',
-      required: '${name}必填',
-      whitespace: '${name}不能为空',
-      max: '${name}字符长度不能超过 ${validate} 个字符，一个中文等于两个字符',
-      min: '${name}字符长度不能少于 ${validate} 个字符，一个中文等于两个字符',
-      len: '${name}字符长度必须是 ${validate}',
-      enum: '${name}只能是${validate}等',
-      idcard: '请输入正确的${name}',
-      telnumber: '请输入正确的${name}',
-      pattern: '请输入正确的${name}',
-      validator: '${name}不符合要求',
-      boolean: '${name}数据类型必须是布尔类型',
-      number: '${name}必须是数字',
+      date: "请输入正确的${name}",
+      url: "请输入正确的${name}",
+      required: "${name}必填",
+      whitespace: "${name}不能为空",
+      max: "${name}字符长度不能超过 ${validate} 个字符，一个中文等于两个字符",
+      min: "${name}字符长度不能少于 ${validate} 个字符，一个中文等于两个字符",
+      len: "${name}字符长度必须是 ${validate}",
+      enum: "${name}只能是${validate}等",
+      idcard: "请输入正确的${name}",
+      telnumber: "请输入正确的${name}",
+      pattern: "请输入正确的${name}",
+      validator: "${name}不符合要求",
+      boolean: "${name}数据类型必须是布尔类型",
+      number: "${name}必须是数字"
     },
-    colonText: '：',
+    colonText: "："
   },
   picker: {
-    cancel: '取消',
-    confirm: '确认',
+    cancel: "取消",
+    confirm: "确认"
   },
   pullDownRefresh: {
-    loadingTexts: ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'],
+    loadingTexts: ["下拉刷新", "松手刷新", "正在刷新", "刷新完成"]
   },
   rate: {
-    valueText: '{value} 分',
-    noValueText: '未评分',
+    valueText: "{value} 分",
+    noValueText: "未评分"
   },
   tabBar: {
-    newsAriaLabel: '有新的消息',
-    moreNewsAriaLabel: '有很多消息',
-    haveMoreNewsAriaLabel: '有 {value}+ 条消息',
-    haveNewsAriaLabel: '有 {value} 条消息',
+    newsAriaLabel: "有新的消息",
+    moreNewsAriaLabel: "有很多消息",
+    haveMoreNewsAriaLabel: "有 {value}+ 条消息",
+    haveNewsAriaLabel: "有 {value} 条消息"
   },
   table: {
-    empty: '暂无数据',
+    empty: "暂无数据"
   },
   list: {
-    loading: '加载中...',
-    loadingMoreText: '点击加载更多',
-    pulling: '下拉即可刷新...',
-    loosing: '释放即可刷新...',
-    success: '刷新成功',
+    loading: "加载中...",
+    loadingMoreText: "点击加载更多",
+    pulling: "下拉即可刷新...",
+    loosing: "释放即可刷新...",
+    success: "刷新成功"
   },
   upload: {
     progress: {
-      uploadingText: '上传中...',
-      waitingText: '待上传',
-      failText: '上传失败',
-      successText: '上传成功',
-    },
+      uploadingText: "上传中...",
+      waitingText: "待上传",
+      failText: "上传失败",
+      successText: "上传成功"
+    }
   },
   guide: {
-    next: '下一步',
-    skip: '跳过',
-    finish: '完成',
-    back: '返回',
+    next: "下一步",
+    skip: "跳过",
+    finish: "完成",
+    back: "返回"
   },
   qrcode: {
-    expiredText: '二维码过期',
-    refreshText: '点击刷新',
-    scannedText: '已扫描',
-  },
+    expiredText: "二维码过期",
+    refreshText: "点击刷新",
+    scannedText: "已扫描"
+  }
 };

package/global-config/mobile/locale/zh_TW.ts

@@ -1,101 +1,100 @@
-/* eslint-disable no-template-curly-in-string */
 // 文件有效，为国际化做准备
-import 'dayjs/locale/zh-tw';
+import "dayjs/locale/zh-tw";
 
 export default {
   actionSheet: {
-    cancel: '取消',
+    cancel: "取消"
   },
   calendar: {
-    title: '請選擇日期',
-    confirm: '確認',
-    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
-    monthTitle: '{year} 年 {month}',
-    months: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'],
+    title: "請選擇日期",
+    confirm: "確認",
+    weekdays: ["日", "一", "二", "三", "四", "五", "六"],
+    monthTitle: "{year} 年 {month}",
+    months: ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"]
   },
   cascader: {
-    title: '標題',
-    placeholder: '選擇選項',
+    title: "標題",
+    placeholder: "選擇選項"
   },
   dropdownMenu: {
-    reset: '重置',
-    confirm: '確定',
+    reset: "重置",
+    confirm: "確定"
   },
   dateTimePicker: {
-    title: '選擇時間',
-    cancel: '取消',
-    confirm: '確定',
-    format: 'YYYY-MM-DD',
-    yearLabel: '年',
-    monthLabel: '月',
-    dateLabel: '日',
-    hourLabel: '時',
-    minuteLabel: '分',
-    secondLabel: '秒',
+    title: "選擇時間",
+    cancel: "取消",
+    confirm: "確定",
+    format: "YYYY-MM-DD",
+    yearLabel: "年",
+    monthLabel: "月",
+    dateLabel: "日",
+    hourLabel: "時",
+    minuteLabel: "分",
+    secondLabel: "秒"
   },
   form: {
     errorMessage: {
-      date: '請輸入正確的${name}',
-      url: '請輸入正確的${name}',
-      whitespace: '${name}不能為空',
-      required: '${name}必填',
-      max: '${name}字符長度不能超過 ${validate} 個字符，一個中文等於兩個字符',
-      min: '${name}字符長度不能少於 ${validate} 個字符，一個中文等於兩個字符',
-      len: '${name}字符長度必須是 ${validate}',
-      enum: '${name}只能是${validate}等',
-      idcard: '請輸入正確的${name}',
-      telnumber: '請輸入正確的${name}',
-      pattern: '請輸入正確的${name}',
-      validator: '${name}不符合要求',
-      boolean: '${name}數據類型必須是布林類型',
-      number: '${name}必須是數字',
+      date: "請輸入正確的${name}",
+      url: "請輸入正確的${name}",
+      whitespace: "${name}不能為空",
+      required: "${name}必填",
+      max: "${name}字符長度不能超過 ${validate} 個字符，一個中文等於兩個字符",
+      min: "${name}字符長度不能少於 ${validate} 個字符，一個中文等於兩個字符",
+      len: "${name}字符長度必須是 ${validate}",
+      enum: "${name}只能是${validate}等",
+      idcard: "請輸入正確的${name}",
+      telnumber: "請輸入正確的${name}",
+      pattern: "請輸入正確的${name}",
+      validator: "${name}不符合要求",
+      boolean: "${name}數據類型必須是布林類型",
+      number: "${name}必須是數字"
     },
-    colonText: '：',
+    colonText: "："
   },
   picker: {
-    cancel: '取消',
-    confirm: '確認',
+    cancel: "取消",
+    confirm: "確認"
   },
   pullDownRefresh: {
-    loadingTexts: ['下拉刷新', '鬆手刷新', '正在刷新', '刷新完成'],
+    loadingTexts: ["下拉刷新", "鬆手刷新", "正在刷新", "刷新完成"]
   },
   rate: {
-    valueText: '{value} 分',
-    noValueText: '未評分',
+    valueText: "{value} 分",
+    noValueText: "未評分"
   },
   tabBar: {
-    newsAriaLabel: '有新消息',
-    moreNewsAriaLabel: '有很多消息',
-    haveMoreNewsAriaLabel: '有 {value}+ 條消息',
-    haveNewsAriaLabel: '有 {value} 條消息',
+    newsAriaLabel: "有新消息",
+    moreNewsAriaLabel: "有很多消息",
+    haveMoreNewsAriaLabel: "有 {value}+ 條消息",
+    haveNewsAriaLabel: "有 {value} 條消息"
   },
   table: {
-    empty: '暫無數據',
+    empty: "暫無數據"
   },
   list: {
-    loading: '加載中...',
-    loadingMoreText: '點擊加載更多',
-    pulling: '下拉即可刷新...',
-    loosing: '釋放即可刷新...',
-    success: '刷新成功',
+    loading: "加載中...",
+    loadingMoreText: "點擊加載更多",
+    pulling: "下拉即可刷新...",
+    loosing: "釋放即可刷新...",
+    success: "刷新成功"
   },
   upload: {
     progress: {
-      uploadingText: '上傳中...',
-      waitingText: '待上傳',
-      failText: '上傳失敗',
-      successText: '上傳成功',
-    },
+      uploadingText: "上傳中...",
+      waitingText: "待上傳",
+      failText: "上傳失敗",
+      successText: "上傳成功"
+    }
   },
   guide: {
-    next: '下一步',
-    skip: '跳過',
-    finish: '完成',
-    back: '返回',
+    next: "下一步",
+    skip: "跳過",
+    finish: "完成",
+    back: "返回"
   },
   qrcode: {
-    expiredText: '二維碼過期',
-    refreshText: '點擊刷新',
-    scannedText: '已掃描',
-  },
+    expiredText: "二維碼過期",
+    refreshText: "點擊刷新",
+    scannedText: "已掃描"
+  }
 };

package/global-config/t.ts

@@ -1,4 +1,4 @@
-import { isString } from 'lodash-es';
+import { isString } from "lodash-es";
 
 /**
  * 复数规则判断函数
@@ -55,26 +55,26 @@ export function t<T>(pattern: T, ...args: any[]): string {
     if (args.length > 0) {
       const [firstArg, secondArg] = args;
 
-      if (typeof firstArg === 'number') {
-      // 第一个参数是数字，表示 count
+      if (typeof firstArg === "number") {
+        // 第一个参数是数字，表示 count
         count = firstArg;
-        if (secondArg && typeof secondArg === 'object') {
-        // 第二个参数是对象，表示额外的数据
+        if (secondArg && typeof secondArg === "object") {
+          // 第二个参数是对象，表示额外的数据
           data = secondArg;
         } else {
           data.count = count; // 若没有提供第二个参数，则将 count 添加到数据中
         }
-      } else if (typeof firstArg === 'object' && firstArg !== null) {
-      // 第一个参数是对象，表示数据
+      } 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 (text.includes("|")) {
+      const pluralParts = text.split("|").map((part) => part.trim());
 
-      if (typeof count === 'number') {
+      if (typeof count === "number") {
         // 使用 count 进行复数处理
         const pluralIndex = getPluralIndex(count);
 
@@ -82,7 +82,7 @@ export function t<T>(pattern: T, ...args: any[]): string {
         if (pluralIndex < pluralParts.length) {
           text = pluralParts[pluralIndex];
         } else {
-        // 如果索引超出范围，使用最后一个选项
+          // 如果索引超出范围，使用最后一个选项
           text = pluralParts[pluralParts.length - 1];
         }
       } else {
@@ -107,5 +107,5 @@ export function t<T>(pattern: T, ...args: any[]): string {
   }
 
   // 如果不是字符串或函数，返回空字符串
-  return '';
+  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;