@tendaui/components 1.0.0 → 1.0.2

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

@@ -0,0 +1,101 @@
+/* eslint-disable no-template-curly-in-string */
+// 文件有效，为国际化做准备
+import 'dayjs/locale/zh-tw';
+
+export default {
+  actionSheet: {
+    cancel: '取消',
+  },
+  calendar: {
+    title: '請選擇日期',
+    confirm: '確認',
+    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
+    monthTitle: '{year} 年 {month}',
+    months: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'],
+  },
+  cascader: {
+    title: '標題',
+    placeholder: '選擇選項',
+  },
+  dropdownMenu: {
+    reset: '重置',
+    confirm: '確定',
+  },
+  dateTimePicker: {
+    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}必須是數字',
+    },
+    colonText: '：',
+  },
+  picker: {
+    cancel: '取消',
+    confirm: '確認',
+  },
+  pullDownRefresh: {
+    loadingTexts: ['下拉刷新', '鬆手刷新', '正在刷新', '刷新完成'],
+  },
+  rate: {
+    valueText: '{value} 分',
+    noValueText: '未評分',
+  },
+  tabBar: {
+    newsAriaLabel: '有新消息',
+    moreNewsAriaLabel: '有很多消息',
+    haveMoreNewsAriaLabel: '有 {value}+ 條消息',
+    haveNewsAriaLabel: '有 {value} 條消息',
+  },
+  table: {
+    empty: '暫無數據',
+  },
+  list: {
+    loading: '加載中...',
+    loadingMoreText: '點擊加載更多',
+    pulling: '下拉即可刷新...',
+    loosing: '釋放即可刷新...',
+    success: '刷新成功',
+  },
+  upload: {
+    progress: {
+      uploadingText: '上傳中...',
+      waitingText: '待上傳',
+      failText: '上傳失敗',
+      successText: '上傳成功',
+    },
+  },
+  guide: {
+    next: '下一步',
+    skip: '跳過',
+    finish: '完成',
+    back: '返回',
+  },
+  qrcode: {
+    expiredText: '二維碼過期',
+    refreshText: '點擊刷新',
+    scannedText: '已掃描',
+  },
+};

package/global-config/t.ts

@@ -0,0 +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 '';
+}

package/hooks/useControlled.ts

@@ -29,10 +29,10 @@ const useControlled: <P extends unknown[], R extends object, K extends keyof R>(
   if (isControlled) return [value, onChange || (() => {})];
   return [
     internalValue,
-    (newValue, ...args) => {
+    ((newValue: any, ...args: any[]) => {
       setInternalValue(newValue);
-      onChange?.(newValue, ...args);
-    }
+      onChange?.(newValue, ...(args as any));
+    }) as any
   ];
 };
 

package/hooks/useDeepEffect.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from "react";
+import { isEqualWith } from "lodash-es";
+
+/**
+ * 与 useEffect 用法一致，但对依赖数组进行深比较
+ * - 只在依赖真正变化时才会触发副作用函数
+ * - 适用于依赖为复杂对象的场景
+ */
+function useDeepEffect(effect: React.EffectCallback, deps: React.DependencyList) {
+  const isInitial = useRef(true);
+  const prevDeps = useRef(deps);
+
+  useEffect(() => {
+    const isSame = isEqualWith(prevDeps.current, deps, (value1, value2) => {
+      // 函数类型比较字符串表示
+      if (typeof value1 === "function" && typeof value2 === "function") {
+        return value1.toString() === value2.toString();
+      }
+      // 其他类型使用默认比较
+      return undefined;
+    });
+
+    if (isInitial.current || !isSame) {
+      effect();
+    }
+
+    isInitial.current = false;
+    prevDeps.current = deps;
+  }, [effect, deps]);
+}
+
+export default useDeepEffect;

package/hooks/useGlobalIcon.ts

@@ -1,10 +1,17 @@
 import useConfig from "./useConfig";
-import Icon from "@tendaui/icons";
+import Icon, { IconProps } from "@tendaui/icons";
+import React from "react";
+
+// 通过 convertIcon 创建的图标组件类型，不需要 svg 和 type 属性
+type ConvertedIconComponent = React.ForwardRefExoticComponent<
+  Omit<IconProps, "svg" | "type"> & React.RefAttributes<HTMLSpanElement>
+>;
+
 // 从 globalConfig 获取 icon 配置用于覆盖组件内置 icon
-export default function useGlobalIcon(tdIcon: Record<string, typeof Icon>) {
+export default function useGlobalIcon(tdIcon: Record<string, ConvertedIconComponent>) {
   const { icon: globalIcon } = useConfig();
 
-  const resultIcon: Record<string, typeof Icon> = {};
+  const resultIcon: Record<string, ConvertedIconComponent> = {};
 
   Object.keys(tdIcon).forEach((key) => {
     resultIcon[key] = globalIcon?.[key] || tdIcon[key];

package/hooks/useLastest.ts

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

package/hooks/useResizeObserve.ts

@@ -0,0 +1,36 @@
+import useIsomorphicLayoutEffect from "./useLayoutEffect";
+import { canUseDocument } from "../utils/dom";
+import useLatest from "./useLastest";
+
+export default function useResizeObserver(
+  container: React.MutableRefObject<HTMLElement | null>,
+  callback: (data: ResizeObserverEntry[]) => void,
+  enabled = true
+) {
+  const callbackRef = useLatest(callback);
+
+  useIsomorphicLayoutEffect(() => {
+    const isSupport = canUseDocument && window.ResizeObserver;
+    const element = container.current;
+    let observer: ResizeObserver = null;
+
+    if (!enabled) return;
+
+    if (isSupport && element) {
+      const resizeCallback: ResizeObserverCallback = (entries) => {
+        callbackRef.current(entries);
+      };
+      observer = new ResizeObserver(resizeCallback);
+      observer.observe(element);
+    }
+
+    return () => {
+      if (observer && element) {
+        observer.unobserve(element);
+        observer.disconnect?.();
+        observer = null;
+      }
+    };
+    // eslint-disable-next-line
+  }, [container, enabled]);
+}

package/index.ts

@@ -6,10 +6,11 @@ export * from "./input";
 // export * from './input-adornment';
 export * from "./alert";
 export * from "./badge";
-// export * from './radio';
+export * from "./radio";
 export * from "./checkbox";
-// export * from './input-number';
+export * from "./input-number";
 export * from "./config-provider";
+export * from "./layout";
 // export * from './steps';
 // export * from './sticky-tool';
 // export * from './message';
@@ -18,7 +19,7 @@ export * from "./tag";
 export * from "./tag-input";
 export * from "./select";
 export * from "./select-input";
-// export * from './list';
+export * from "./list";
 // export * from './tabs';
 export * from "./notification";
 // export * from './pagination';
@@ -26,20 +27,22 @@ export * from "./notification";
 export * from "./dialog";
 // export * from './tree';
 // export * from './tree-select';
-// export * from './divider';
+// export * from "./divider";
 export * from "./switch";
 // export * from './anchor';
 // export * from './calendar';
 export * from "./form";
+export * from "./ip-input";
+export * from "./fireworks";
 // export * from './tooltip';
-// export * from './drawer';
+export * from "./drawer";
 // export * from './progress';
 // export * from './popconfirm';
 // export * from './textarea';
 // export * from './breadcrumb';
 // export * from './affix';
 // export * from './dropdown';
-// export * from './slider';
+export * from "./slider";
 // export * from './auto-complete';
 // export * from './cascader';
 // export * from './time-picker';
@@ -50,7 +53,7 @@ export * from "./form";
 // export * from './transfer';
 // export * from './avatar';
 // export * from './skeleton';
-// export * from './color-picker';
+export * from "./color-picker";
 // export * from './card';
 // export * from './collapse';
 // export * from './range-input';

package/input/Input.tsx

@@ -10,6 +10,7 @@ import useDefaultProps from "../hooks/useDefaultProps";
 import { StyledProps, TNode, TElement } from "../common";
 import { isFunction } from "lodash-es";
 import useConfig from "../hooks/useConfig";
+import { useLocaleReceiver } from "../locale/LocalReceiver";
 export interface InputProps extends TdInputProps, StyledProps {
   showInput?: boolean; // 控制透传readonly同时是否展示input 默认保留 因为正常Input需要撑开宽度
   keepWrapperWidth?: boolean; // 控制透传autoWidth之后是否容器宽度也自适应 多选等组件需要用到自适应但也需要保留宽度
@@ -36,12 +37,14 @@ const renderIcon = (classPrefix: string, type: "prefix" | "suffix", icon: TNode
 const Input = forwardRef<HTMLInputElement, InputProps>((originalProps, ref) => {
   const props = useDefaultProps<InputProps>(originalProps, inputDefaultProps as Partial<InputProps>);
   const { classPrefix } = useConfig();
+  const [local, t] = useLocaleReceiver("input");
+  const placeholderText = t(local.placeholder);
 
   const {
     type,
     autoWidth,
     borderless,
-    placeholder = "请输入内容",
+    placeholder = placeholderText,
     disabled,
     size,
     className,

package/input/defaultProps.ts

@@ -1,6 +1,5 @@
 export const inputDefaultProps = {
   align: "left" as "left" | "center" | "right",
-  allowInputOverMax: false,
   autoWidth: false,
   autocomplete: undefined,
   autofocus: false,
@@ -13,7 +12,6 @@ export const inputDefaultProps = {
   // 是否只读，在只读模式下，输入框不能输入，且没有清除按钮，优先级高于 allowInput、clearable
   readonly: false,
   showClearIconOnEmpty: false,
-  showLimitNumber: false,
   size: "medium",
   spellCheck: false,
   status: "default",

package/input/type.ts

@@ -16,7 +16,6 @@ export interface TdInputProps {
    * 超出 `maxlength` 或 `maxcharacter` 之后是否允许继续输入
    * @default false
    */
-  allowInputOverMax?: boolean;
   /**
    * 宽度随内容自适应
    * @default false
@@ -88,11 +87,7 @@ export interface TdInputProps {
    * @default false
    */
   showClearIconOnEmpty?: boolean;
-  /**
-   * 是否在输入框右侧显示字数统计
-   * @default false
-   */
-  showLimitNumber?: boolean;
+
   /**
    * 输入框尺寸
    * @default medium

package/input-number/InputNumber.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef, useImperativeHandle, useRef, ForwardedRef } from "react";
+import {
+  IconChevronDown as TdChevronDownIcon,
+  IconMinusStroked as TdRemoveIcon,
+  IconChevronUp as TdChevronUpIcon,
+  IconPlus as TdAddIcon
+} from "@tendaui/icons";
+import classNames from "classnames";
+import Input from "../input";
+import Button from "../button";
+import useInputNumber from "./useInputNumber";
+import useGlobalIcon from "../hooks/useGlobalIcon";
+import { inputNumberDefaultProps } from "./defaultProps";
+import { InputNumberValue, TdInputNumberProps } from "./type";
+import { StyledProps } from "../common";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+export interface InputNumberProps<T = InputNumberValue> extends TdInputNumberProps<T>, StyledProps {}
+
+export interface InputNumberRef {
+  currentElement: ForwardedRef<HTMLDivElement>;
+  inputElement: ForwardedRef<HTMLDivElement>;
+}
+
+// https://fettblog.eu/typescript-react-generic-forward-refs/
+function TdInputNumber<T extends InputNumberValue = InputNumberValue>(
+  originalProps: InputNumberProps<T>,
+  ref: ForwardedRef<InputNumberRef>
+) {
+  const { ChevronDownIcon, RemoveIcon, ChevronUpIcon, AddIcon } = useGlobalIcon({
+    ChevronDownIcon: TdChevronDownIcon,
+    RemoveIcon: TdRemoveIcon,
+    ChevronUpIcon: TdChevronUpIcon,
+    AddIcon: TdAddIcon
+  });
+  const props = useDefaultProps<InputNumberProps<T>>(
+    originalProps,
+    inputNumberDefaultProps as Partial<InputNumberProps<T>>
+  );
+  const {
+    classPrefix,
+    wrapClasses,
+    addClasses,
+    reduceClasses,
+    listeners,
+    isError,
+    inputRef,
+    userInput,
+    handleAdd,
+    handleReduce,
+    onInnerInputChange
+  } = useInputNumber(props);
+
+  const wrapRef = useRef(null);
+
+  const status = isError ? "error" : props.status;
+  const iconSize = props.size === "medium" ? "default" : props.size;
+  const addIcon =
+    props.theme === "column" ? <ChevronUpIcon size={iconSize as any} /> : <AddIcon size={iconSize as any} />;
+  const reduceIcon =
+    props.theme === "column" ? <ChevronDownIcon size={iconSize as any} /> : <RemoveIcon size={iconSize as any} />;
+
+  useImperativeHandle(ref, () => ({
+    currentElement: wrapRef.current,
+    inputElement: inputRef.current
+  }));
+
+  return (
+    <div className={classNames(wrapClasses, props.className)} style={props.style} ref={wrapRef}>
+      {props.theme !== "normal" && (
+        <Button
+          className={reduceClasses}
+          disabled={props.disabled}
+          onClick={handleReduce}
+          variant="outline"
+          shape="square"
+          icon={reduceIcon}
+        />
+      )}
+      <Input
+        ref={inputRef}
+        autocomplete="off"
+        disabled={props.disabled}
+        readonly={props.readonly}
+        placeholder={props.placeholder}
+        autoWidth={props.autoWidth}
+        align={props.align || (props.theme === "row" ? "center" : undefined)}
+        status={status}
+        label={props.label}
+        suffix={props.suffix}
+        value={userInput}
+        onChange={onInnerInputChange}
+        size={props.size}
+        {...listeners}
+        {...(props.inputProps || {})}
+      />
+      {props.theme !== "normal" && (
+        <Button
+          className={addClasses}
+          disabled={props.disabled}
+          onClick={handleAdd}
+          variant="outline"
+          shape="square"
+          icon={addIcon}
+        />
+      )}
+      {props.tips && (
+        <div className={classNames(`${classPrefix}-input__tips`, `${classPrefix}-input__tips--${status}`)}>
+          {props.tips}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export type InputNumberOuterForwardRef = {
+  <T>(props: InputNumberProps<T> & { ref?: ForwardedRef<InputNumberRef> }): ReturnType<typeof TdInputNumber>;
+} & React.ForwardRefExoticComponent<InputNumberProps>;
+
+const InputNumber = forwardRef<InputNumberRef, InputNumberProps<InputNumberValue>>(TdInputNumber);
+
+InputNumber.displayName = "InputNumber";
+
+export default InputNumber;

package/input-number/defaultProps.ts

@@ -0,0 +1,17 @@
+import { TdInputNumberProps } from "./type";
+
+export const inputNumberDefaultProps: TdInputNumberProps = {
+  allowInputOverLimit: true,
+  autoWidth: false,
+  decimalPlaces: undefined,
+  disabled: undefined,
+  largeNumber: false,
+  max: Infinity,
+  min: -Infinity,
+  placeholder: undefined,
+  readonly: undefined,
+  size: "medium",
+  status: "default",
+  step: 1,
+  theme: "row"
+};

package/input-number/index.ts

@@ -0,0 +1,9 @@
+import _InputNumber from "./InputNumber";
+
+import "./style/index.js";
+
+export type { InputNumberProps } from "./InputNumber";
+export * from "./type";
+
+export const InputNumber = _InputNumber;
+export default InputNumber;

package/input-number/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/input-number/style/index.js

@@ -0,0 +1 @@
+import "../../styles/components/input-number/_index.scss";