@tendaui/components 1.0.0 → 1.0.2

package/list/type.ts

@@ -0,0 +1,93 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode, TScroll, ScrollToElementParams } from "../common";
+import { MouseEvent, WheelEvent } from "react";
+
+export interface TdListProps {
+  /**
+   * 自定义加载中。值为空不显示加载中，值为 'loading' 显示加载中状态，值为 'load-more' 显示加载更多状态。值类型为函数，则表示自定义加载状态呈现内容
+   */
+  asyncLoading?: TNode;
+  /**
+   * 底部
+   */
+  footer?: TNode;
+  /**
+   * 头部
+   */
+  header?: TNode;
+  /**
+   * 排列方式（待设计稿输出）
+   * @default horizontal
+   */
+  layout?: "horizontal" | "vertical";
+  /**
+   * 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`
+   */
+  scroll?: TScroll;
+  /**
+   * 尺寸
+   * @default medium
+   */
+  size?: "small" | "medium" | "large";
+  /**
+   * 是否展示分割线
+   * @default false
+   */
+  split?: boolean;
+  /**
+   * 是否展示斑马纹
+   * @default false
+   */
+  stripe?: boolean;
+  /**
+   * 点击加载更多时触发
+   */
+  onLoadMore?: (options: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 列表滚动时触发，scrollTop 表示顶部滚动距离，scrollBottom 表示底部滚动距离
+   */
+  onScroll?: (options: { e: Event | WheelEvent<HTMLDivElement>; scrollTop: number; scrollBottom: number }) => void;
+}
+
+/** 组件实例方法 */
+export interface ListInstanceFunctions {
+  /**
+   * 虚拟滚动场景下，支持指定滚动到具体的节点
+   */
+  scrollTo?: (scrollToParams: ScrollToElementParams) => void;
+}
+
+export interface TdListItemProps {
+  /**
+   * 操作栏
+   */
+  action?: TNode;
+  /**
+   * 内容，同 content
+   */
+  children?: TNode;
+  /**
+   * 内容
+   */
+  content?: TNode;
+}
+
+export interface TdListItemMetaProps {
+  /**
+   * 列表项内容
+   */
+  description?: TNode;
+  /**
+   * 列表项图片
+   */
+  image?: TNode;
+  /**
+   * 列表项标题
+   */
+  title?: TNode;
+}

package/locale/LocalReceiver.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { t as commonT } from "../global-config/t";
+import { ConfigContext, Locale } from "../config-provider";
+
+export interface Placement {
+  [propName: string]: string | number;
+}
+
+export type TransformPattern = string | Function | Array<string>;
+
+export function useLocaleReceiver<T extends keyof Locale>(componentName: T, defaultLocale?: Locale[T] | Function) {
+  const { globalConfig } = React.useContext(ConfigContext);
+
+  function transformLocale(pattern: TransformPattern, placement?: Placement): string;
+  function transformLocale(pattern: TransformPattern, placement?: number, data?: Placement): string;
+  function transformLocale(pattern: TransformPattern, ...args: any[]): string | Array<string> {
+    const REGEXP = /\{\s*([\w-]+)\s*\}/g;
+    const placement = args[0];
+
+    if (Array.isArray(pattern)) {
+      return pattern.map((p, index) => {
+        const translated = p.replace(REGEXP, (_: string, key: string) => {
+          if (placement) return String(placement[index][key]);
+          return "";
+        });
+        return translated;
+      });
+    }
+    if (typeof pattern === "function") {
+      return pattern(placement);
+    }
+
+    // use commonT for plural
+    const data = args[1];
+    if (data) {
+      return commonT(pattern, placement, data);
+    }
+    return commonT(pattern, placement);
+  }
+
+  /** @TypeA => 确保此参数是属于 globalConfig[componentName] 下的子属性 */
+  const componentLocale = React.useMemo<Locale[T] | Function>(() => {
+    const locale = defaultLocale || {};
+    const connectLocaleByName = globalConfig[componentName];
+
+    const localeFromContext = componentName && globalConfig ? connectLocaleByName : {};
+
+    return {
+      ...(typeof locale === "function" ? (locale as Function)() : locale),
+      ...(localeFromContext || {})
+    };
+  }, [componentName, defaultLocale, globalConfig]);
+
+  return [componentLocale, transformLocale] as [Locale[T], Function];
+}

package/locale/ar_KW.ts

@@ -0,0 +1,7 @@
+import { GlobalConfigProvider } from "../config-provider/type";
+
+// TODO: Import from @tdesign/common-js when available
+const arKW = {} as GlobalConfigProvider;
+
+// 需要 GlobalConfigProvider 保证数据类型正确
+export default arKW;

package/locale/en_US.ts

@@ -0,0 +1,7 @@
+import { GlobalConfigProvider } from "../config-provider/type";
+
+// TODO: Import from @tdesign/common-js when available
+const enUS = {} as GlobalConfigProvider;
+
+// 需要 GlobalConfigProvider 保证数据类型正确，本次提交就检查出了英文字段缺少
+export default enUS;

package/locale/it_IT.ts

@@ -0,0 +1,6 @@
+import { GlobalConfigProvider } from "../config-provider/type";
+// TODO: Import from @tdesign/common-js when available
+const itIT = {} as GlobalConfigProvider;
+
+// 需要 GlobalConfigProvider 保证数据类型正确
+export default itIT as unknown as GlobalConfigProvider;

package/locale/ja_JP.ts

@@ -0,0 +1,6 @@
+import { GlobalConfigProvider } from "../config-provider/type";
+// TODO: Import from @tdesign/common-js when available
+const jaJP = {} as GlobalConfigProvider;
+
+// 需要 GlobalConfigProvider 保证数据类型正确
+export default jaJP as unknown as GlobalConfigProvider;

package/locale/ko_KR.ts

@@ -0,0 +1,6 @@
+import { GlobalConfigProvider } from "../config-provider/type";
+// TODO: Import from @tdesign/common-js when available
+const koKR = {} as GlobalConfigProvider;
+
+// 需要 GlobalConfigProvider 保证数据类型正确
+export default koKR as unknown as GlobalConfigProvider;

package/locale/ru_RU.ts

@@ -0,0 +1,6 @@
+import { GlobalConfigProvider } from "../config-provider/type";
+// TODO: Import from @tdesign/common-js when available
+const ruRU = {} as GlobalConfigProvider;
+
+// 需要 GlobalConfigProvider 保证数据类型正确
+export default ruRU as unknown as GlobalConfigProvider;

package/locale/zh_CN.ts

@@ -0,0 +1,5 @@
+import zhCN from "../global-config/locale/zh_CN";
+import { GlobalConfigProvider } from "../config-provider/type";
+
+// 需要 GlobalConfigProvider 保证数据类型正确
+export default zhCN as unknown as GlobalConfigProvider;

package/locale/zh_TW.ts

@@ -0,0 +1,7 @@
+import { GlobalConfigProvider } from "../config-provider/type";
+
+// TODO: Import from @tdesign/common-js when available
+const zhTW = {} as GlobalConfigProvider;
+
+// 需要 GlobalConfigProvider 保证数据类型正确
+export default zhTW;

package/notification/NotifyContainer.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react";
-import { TdNotificationProps } from "./type";
+import { TdNotificationProps, HeightItem } from "./type";
 import NotificationItem from "./NotifyItem";
 import useConfig from "../hooks/useConfig";
 export const GAP = 14;
@@ -32,7 +32,7 @@ const NotificationContainer = ({
     onHoverEnd();
   }, [onHoverEnd]);
 
-  const [heights, setHeights] = useState<{ toastId: string; height: number }[]>([]);
+  const [heights, setHeights] = useState<HeightItem[]>([]);
 
   const { classPrefix: prefix } = useConfig();
 

package/notification/NotifyContext.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useState, useRef, useCallback, useContext } from "react";
 import { createPortal } from "react-dom";
 import NotifyContainer from "./NotifyContainer";
+import { TdNotificationProps } from "./type";
 
 // 1. 定义类型
 type NotificationType = "success" | "error" | "warning" | "info";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tendaui/components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "TendaUI React Components - Source code",
   "main": "index.ts",
   "module": "index.ts",
@@ -46,7 +46,10 @@
   ],
   "sideEffects": [
     "**/*.scss",
-    "**/*.css"
+    "**/*.css",
+    "**/style/index.js",
+    "**/style/css.js",
+    "**/style/all.js"
   ],
-  "gitHead": "31b15457f07146ef1604c713b32addd944fbb6dd"
+  "gitHead": "77c5b16410848a6dfee573581b602633306540cb"
 }

package/popup/Popup.tsx

@@ -8,7 +8,7 @@ import useDefaultProps from "../hooks/useDefaultProps";
 import useMutationObserver from "../hooks/useMutationObserver";
 import useWindowSize from "../hooks/useWindowSize";
 import useTrigger from "./hooks/useTrigger";
-import type { TdPopupProps } from "./type";
+import type { TdPopupProps, PopupVisibleChangeContext } from "./type";
 import usePopper from "../hooks/usePopper";
 import { popupDefaultProps } from "./defaultProps";
 import classNames from "classnames";
@@ -62,7 +62,28 @@ const Popup = forwardRef<PopupRef, PopupProps>((originalProps, ref) => {
 
   // 全局配置
   const { height: windowHeight, width: windowWidth } = useWindowSize();
-  const [visible, onVisibleChange] = useControlled(props, "visible", props.onVisibleChange);
+  const handleVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
+    props.onVisibleChange?.(visible, context);
+  };
+  const [visible, onVisibleChangeInternal] = useControlled(props, "visible", handleVisibleChange);
+  // 适配 useTrigger 的类型
+  const onVisibleChangeForTrigger = (
+    visible: boolean,
+    context: {
+      e?:
+        | React.MouseEvent<HTMLElement>
+        | React.TouchEvent<HTMLElement>
+        | React.FocusEvent<HTMLElement>
+        | React.KeyboardEvent<HTMLElement>;
+      trigger: string;
+    }
+  ) => {
+    const popupContext: PopupVisibleChangeContext = {
+      e: context.e as any,
+      trigger: context.trigger as any
+    };
+    onVisibleChangeInternal(visible, popupContext);
+  };
   // 记录 popup 元素
   // 如果内容为 null 或 undefined，且 hideEmptyPopup 为 true，则不展示 popup
   const [popupElement, setPopupElement] = useState(null);
@@ -101,7 +122,7 @@ const Popup = forwardRef<PopupRef, PopupProps>((originalProps, ref) => {
     trigger,
     visible,
     delay,
-    onVisibleChange
+    onVisibleChange: onVisibleChangeForTrigger
   });
   // 传入popperjs 配置选项
   const popperOptions = props.popperOptions as Options;
@@ -110,7 +131,7 @@ const Popup = forwardRef<PopupRef, PopupProps>((originalProps, ref) => {
   void _ignored;
 
   // popperRef 表示 popper 实例
-  popperRef.current = usePopper(getRefDom(triggerRef), popupElement, {
+  popperRef.current = usePopper(getRefDom(triggerRef) as HTMLElement | null, popupElement, {
     placement: popperPlacement as Placement,
     ...restPopperOptions
   });
@@ -125,8 +146,9 @@ const Popup = forwardRef<PopupRef, PopupProps>((originalProps, ref) => {
 
   const updateTimeRef = useRef(null);
   // 监听 trigger 节点或内容变化动态更新 popup 定位
-  useMutationObserver(getRefDom(triggerRef), () => {
-    const isDisplayNone = getCssVarsValue("display", getRefDom(triggerRef)) === "none";
+  useMutationObserver(getRefDom(triggerRef) as HTMLElement | null, () => {
+    const triggerDom = getRefDom(triggerRef) as HTMLElement | null;
+    const isDisplayNone = triggerDom ? getCssVarsValue("display", triggerDom) === "none" : true;
     if (visible && !isDisplayNone) {
       clearTimeout(updateTimeRef.current);
       updateTimeRef.current = setTimeout(() => popperRef.current?.update?.(), 0);
@@ -177,8 +199,9 @@ const Popup = forwardRef<PopupRef, PopupProps>((originalProps, ref) => {
 
   // 整理浮层样式
   function getOverlayStyle(overlayStyle: TdPopupProps["overlayStyle"]) {
-    if (getRefDom(triggerRef) && popupRef.current && typeof overlayStyle === "function") {
-      return { ...overlayStyle(getRefDom(triggerRef), popupRef.current) };
+    const triggerDom = getRefDom(triggerRef) as HTMLElement | null;
+    if (triggerDom && popupRef.current && typeof overlayStyle === "function") {
+      return { ...overlayStyle(triggerDom, popupRef.current) };
     }
     return { ...overlayStyle };
   }
@@ -194,7 +217,7 @@ const Popup = forwardRef<PopupRef, PopupProps>((originalProps, ref) => {
       onExited={handleExited}
       classNames={`${classPrefix}-portal`}
     >
-      <Portal triggerNode={getRefDom(triggerRef)} attach="body" ref={portalRef}>
+      <Portal triggerNode={getRefDom(triggerRef) as HTMLElement | null} attach="body" ref={portalRef}>
         <CSSTransition appear timeout={0} in={visible} nodeRef={popupRef} classNames={`${classPrefix}-popup`}>
           <div
             ref={(node) => {
@@ -247,7 +270,8 @@ const Popup = forwardRef<PopupRef, PopupProps>((originalProps, ref) => {
     getPopupElement: () => popupRef.current,
     getPortalElement: () => portalRef.current,
     getPopupContentElement: () => contentRef.current,
-    setVisible: (visible: boolean) => onVisibleChange(visible, { trigger: "document" })
+    setVisible: (visible: boolean) =>
+      onVisibleChangeInternal(visible, { trigger: "document" } as PopupVisibleChangeContext)
   }));
   // 这里使用 React.Fragment 包裹 triggerNode 和 overlay，确保返回一个单一的父节点
   // 这样可以避免在渲染时出现多个根节点的错误

package/radio/Radio.tsx

@@ -0,0 +1,24 @@
+import React, { Ref, forwardRef } from "react";
+import forwardRefWithStatics from "../utils/forwardRefWithStatics";
+import Check, { CheckProps } from "../common/Check";
+import RadioGroup from "./RadioGroup";
+import { radioDefaultProps } from "./defaultProps";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+export type RadioProps = Omit<CheckProps, "type">;
+const RadioButton = forwardRef<HTMLLabelElement, RadioProps>((props, ref) => (
+  <Check ref={ref} type="radio-button" {...useDefaultProps<RadioProps>(props, radioDefaultProps)} />
+));
+RadioButton.displayName = "RadioButton";
+const Radio = forwardRefWithStatics(
+  (props: RadioProps, ref: Ref<HTMLLabelElement>) => (
+    <Check ref={ref} type="radio" {...useDefaultProps<RadioProps>(props, radioDefaultProps)} />
+  ),
+  {
+    Group: RadioGroup,
+    Button: RadioButton
+  }
+);
+Radio.displayName = "Radio";
+
+export default Radio;

package/radio/RadioGroup.tsx

@@ -0,0 +1,159 @@
+import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import observe from "../common/observe";
+import { CheckContext, type CheckContextValue } from "../common/Check";
+import useCommonClassName from "../hooks/useCommonClassName";
+
+import useConfig from "../hooks/useConfig";
+import useControlled from "../hooks/useControlled";
+import useDefaultProps from "../hooks/useDefaultProps";
+import useMutationObserver from "../hooks/useMutationObserver";
+
+import Radio from "./Radio";
+import { radioGroupDefaultProps } from "./defaultProps";
+import useKeyboard from "./useKeyboard";
+
+import type { StyledProps } from "../common";
+import type { TdRadioGroupProps } from "./type";
+
+/**
+ * RadioGroup 组件所接收的属性
+ */
+export interface RadioGroupProps extends TdRadioGroupProps, StyledProps {
+  children?: ReactNode;
+}
+
+/**
+ * 单选选项组，里面可以嵌套 <Radio />
+ */
+
+const RadioGroup: React.FC<RadioGroupProps> = (originalProps) => {
+  const { classPrefix } = useConfig();
+  const props = useDefaultProps<RadioGroupProps>(originalProps, radioGroupDefaultProps);
+  const { disabled, readonly, children, onChange, size, variant, options = [], className, style, theme } = props;
+  const [internalValue, setInternalValue] = useControlled(props, "value", onChange);
+  const [barStyle, setBarStyle] = useState<Partial<CSSProperties> | null>(null);
+
+  const radioGroupRef = useRef<HTMLDivElement>(null);
+  const observerRef = useRef<IntersectionObserver>(null);
+  const handleKeyboardChange = (value: any, context: { e: KeyboardEvent }) => {
+    setInternalValue(value, { e: context.e as any, name: props.name });
+  };
+  useKeyboard(radioGroupRef, handleKeyboardChange);
+
+  const checkedRadioCls = `.${classPrefix}-radio-button.${classPrefix}-is-checked`;
+  const { SIZE: sizeMap } = useCommonClassName();
+
+  const context: CheckContextValue = {
+    inject: (checkProps) => {
+      if (typeof checkProps.checked !== "undefined") {
+        return checkProps;
+      }
+      const { value: checkValue } = checkProps;
+      return {
+        ...checkProps,
+        name: props.name,
+        // 有一个允许取消，就可以取消选中
+        allowUncheck: checkProps.allowUncheck || props.allowUncheck,
+        checked: internalValue === checkProps.value,
+        disabled: checkProps.disabled || disabled,
+        readonly: checkProps.readonly || readonly,
+        onChange(checked, { e }) {
+          if (typeof checkProps.onChange === "function") {
+            checkProps.onChange(checked, { e });
+          }
+          setInternalValue(checked ? checkValue : undefined, { e, name: props.name });
+        }
+      };
+    }
+  };
+
+  const calcBarStyle = () => {
+    if (!variant.includes("filled")) return;
+    const checkedRadio = radioGroupRef.current.querySelector?.(checkedRadioCls) as HTMLElement;
+    if (!checkedRadio) {
+      setBarStyle(null);
+      return;
+    }
+    const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = checkedRadio;
+    setBarStyle({
+      width: `${offsetWidth}px`,
+      height: `${offsetHeight}px`,
+      left: `${offsetLeft}px`,
+      top: `${offsetTop}px`
+    });
+  };
+
+  // 针对子元素更新的场景，包括 value 变化等
+  useMutationObserver(radioGroupRef.current, (mutations) => {
+    // 排除高亮元素自身的变化，避免重复触发
+    const filteredMutations = mutations.filter((mutation) => {
+      const target = mutation.target as HTMLElement;
+      return !target.classList?.contains(`${classPrefix}-radio-group__bg-block`);
+    });
+    if (filteredMutations.length > 0) {
+      calcBarStyle();
+    }
+  });
+
+  useEffect(() => {
+    calcBarStyle();
+    if (!radioGroupRef.current) return;
+    // 针对父元素初始化时隐藏导致无法正确计算尺寸的问题
+    const observer = observe(radioGroupRef.current, null, calcBarStyle, 0);
+    observerRef.current = observer;
+    return () => {
+      observerRef.current?.disconnect();
+      observerRef.current = null;
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const renderBlock = () => {
+    if (!variant.includes("filled") || !barStyle) {
+      return null;
+    }
+    return <div style={barStyle} className={`${classPrefix}-radio-group__bg-block`}></div>;
+  };
+
+  const renderOptions = () => {
+    const Comp = theme === "button" ? Radio.Button : Radio;
+    return options.map((item, index) => {
+      let label: ReactNode;
+      let value: string | number | boolean;
+      let disabled: boolean | undefined;
+      if (typeof item === "string" || typeof item === "number") {
+        label = item;
+        value = item;
+      } else {
+        label = item.label;
+        value = item.value;
+        disabled = item.disabled;
+      }
+      return (
+        <Comp value={value} key={index} disabled={disabled}>
+          {label}
+        </Comp>
+      );
+    });
+  };
+  return (
+    <CheckContext.Provider value={context}>
+      <div
+        ref={radioGroupRef}
+        style={style}
+        className={classNames(`${classPrefix}-radio-group`, sizeMap[size], className, {
+          [`${classPrefix}-radio-group__outline`]: variant === "outline",
+          [`${classPrefix}-radio-group--filled`]: variant.includes("filled"),
+          [`${classPrefix}-radio-group--primary-filled`]: variant === "primary-filled"
+        })}
+      >
+        {children || renderOptions()}
+        {renderBlock()}
+      </div>
+    </CheckContext.Provider>
+  );
+};
+
+RadioGroup.displayName = "RadioGroup";
+
+export default RadioGroup;

package/radio/defaultProps.ts

@@ -0,0 +1,18 @@
+import { TdRadioProps, TdRadioGroupProps } from "./type";
+
+export const radioDefaultProps: TdRadioProps = {
+  allowUncheck: false,
+  defaultChecked: false,
+  disabled: undefined,
+  readonly: undefined,
+  value: undefined
+};
+
+export const radioGroupDefaultProps: TdRadioGroupProps = {
+  allowUncheck: false,
+  disabled: undefined,
+  readonly: undefined,
+  size: "medium",
+  variant: "outline",
+  theme: "radio"
+};

package/radio/index.ts

@@ -0,0 +1,12 @@
+import _Radio from "./Radio";
+
+import "./style/index.js";
+
+export type { RadioProps } from "./Radio";
+export type { RadioGroupProps } from "./RadioGroup";
+export * from "./type";
+
+export const Radio = _Radio;
+export const RadioGroup = _Radio.Group;
+
+export default Radio;

package/radio/style/index.js

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