@tendaui/components 1.0.0

package/utils/helper.ts

@@ -0,0 +1,161 @@
+import { camelCase, isNumber } from "lodash-es";
+
+export function omit(obj: object, fields: string[]): object {
+  const shallowCopy = {
+    ...obj
+  };
+  for (let i = 0; i < fields.length; i++) {
+    const key = fields[i];
+    delete shallowCopy[key];
+  }
+  return shallowCopy;
+}
+
+export function removeEmptyAttrs<T>(obj: T): Partial<T> {
+  const newObj = {};
+
+  Object.keys(obj).forEach((key) => {
+    if (typeof obj[key] !== "undefined" || obj[key] === null) {
+      newObj[key] = obj[key];
+    }
+  });
+
+  return newObj;
+}
+
+export function getTabElementByValue(
+  tabs: Array<{ id: string; [key: string]: unknown }> = [],
+  value: string
+): { id: string; [key: string]: unknown } | null {
+  const [result] = tabs.filter((item) => {
+    const { id } = item;
+    return id === value;
+  });
+  return result || null;
+}
+
+export function firstUpperCase(str: string): string {
+  return str.toLowerCase().replace(/( |^)[a-z]/g, (char: string) => char.toUpperCase());
+}
+
+export type Gradients = { [percent: string]: string };
+export type FromTo = { from: string; to: string };
+export type LinearGradient = { direction?: string } & (Gradients | FromTo);
+export function getBackgroundColor(color: string | string[] | LinearGradient): string {
+  if (typeof color === "string") {
+    return color;
+  }
+  if (Array.isArray(color)) {
+    if (color[0] && color[0][0] === "#") {
+      color.unshift("90deg");
+    }
+    return `linear-gradient( ${color.join(",")} )`;
+  }
+  const { from, to, direction = "to right", ...rest } = color;
+  let keys = Object.keys(rest);
+  if (keys.length) {
+    keys = keys.sort((a, b) => parseFloat(a.substr(0, a.length - 1)) - parseFloat(b.substr(0, b.length - 1)));
+    const tempArr = keys.map((key: string) => `${rest[key]} ${key}`);
+    return `linear-gradient(${direction}, ${tempArr.join(",")})`;
+  }
+  return `linear-gradient(${direction}, ${from}, ${to})`;
+}
+
+// keyboard-event => onKeyboardEvent
+export function getPropsApiByEvent(eventName: string) {
+  return camelCase(`on-${eventName}`);
+}
+
+/**
+ * 兼容样式中支持 number/string 类型的传值 得出最后的结果。
+ * @param param number 或 string 类型的可用于样式上的值
+ * @returns 可使用的样式值。
+ */
+export function pxCompat(param: string | number) {
+  return typeof param === "number" ? `${param}px` : param;
+}
+
+/**
+ * 获取元素相对于容器(祖先)的偏移量
+ * @param element 目标元素
+ * @param container 容器元素
+ * @returns 相对于容器的偏移量
+ */
+export function getOffsetTopToContainer(element: HTMLElement, container: HTMLElement) {
+  let { offsetTop } = element;
+
+  let current = element.offsetParent as HTMLElement;
+  while (current && current !== container) {
+    offsetTop += current.offsetTop;
+    current = current.offsetParent as HTMLElement;
+  }
+  return offsetTop;
+}
+
+export function getIEVersion() {
+  if (typeof navigator === "undefined" || !navigator) return Number.MAX_SAFE_INTEGER;
+
+  const { userAgent } = navigator;
+  // 判断是否IE<11浏览器
+  const isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
+  // 判断是否IE11浏览器
+  const isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
+  if (isIE) {
+    const reIE = new RegExp("MSIE (\\d+\\.\\d+);");
+    const match = userAgent.match(reIE);
+    if (!match) return -1;
+    const fIEVersion = parseFloat(match[1]);
+    return fIEVersion < 7 ? 6 : fIEVersion;
+  }
+  if (isIE11) {
+    // IE11
+    return 11;
+  }
+  // 不是ie浏览器
+  return Number.MAX_SAFE_INTEGER;
+}
+
+/**
+ * 计算字符串字符的长度并可以截取字符串。
+ * @param str 传入字符串
+ * @param maxCharacter 规定最大字符串长度
+ * @returns 当没有传入maxCharacter时返回字符串字符长度，当传入maxCharacter时返回截取之后的字符串和长度。
+ */
+export function getCharacterLength(
+  str: string,
+  maxCharacter?: number
+): number | { length: number; characters: string } {
+  const hasMaxCharacter = isNumber(maxCharacter);
+  if (!str || str.length === 0) {
+    if (hasMaxCharacter) {
+      return {
+        length: 0,
+        characters: str
+      };
+    }
+    return 0;
+  }
+  let len = 0;
+  for (let i = 0; i < str.length; i++) {
+    let currentStringLength = 0;
+    if (str.charCodeAt(i) > 127) {
+      currentStringLength = 2;
+    } else {
+      currentStringLength = 1;
+    }
+    if (hasMaxCharacter && len + currentStringLength > maxCharacter) {
+      return {
+        length: len,
+        characters: str.slice(0, i)
+      };
+    }
+    len += currentStringLength;
+  }
+  if (hasMaxCharacter) {
+    return {
+      length: len,
+      characters: str
+    };
+  }
+  return len;
+}

package/utils/isFragment.ts

@@ -0,0 +1,22 @@
+// Source from:
+// https://github.com/react-component/util/blob/master/src/React/isFragment.ts
+
+const REACT_ELEMENT_TYPE_18 = Symbol.for("react.element");
+const REACT_ELEMENT_TYPE_19 = Symbol.for("react.transitional.element");
+const REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+
+/**
+ * Compatible with React 18 or 19 to check if node is a Fragment.
+ */
+export default function isFragment(object: React.ReactElement | null | undefined): boolean {
+  return (
+    // Base object type
+    object &&
+    typeof object === "object" &&
+    // React Element type
+    ((object as { $$typeof: symbol }).$$typeof === REACT_ELEMENT_TYPE_18 ||
+      (object as { $$typeof: symbol }).$$typeof === REACT_ELEMENT_TYPE_19) &&
+    // React Fragment type
+    (object as { type: symbol }).type === REACT_FRAGMENT_TYPE
+  );
+}

package/utils/listener.ts

@@ -0,0 +1,37 @@
+import { canUseDocument } from "./dom";
+
+type EventHandler = (element: Node, event: string, handler: EventListenerOrEventListenerObject) => void;
+
+export const on = ((): EventHandler => {
+  if (canUseDocument && document.addEventListener) {
+    return (element: Node, event: string, handler: EventListenerOrEventListenerObject): void => {
+      if (element && event && handler) {
+        element.addEventListener(event, handler, false);
+      }
+    };
+  }
+  return (element: Node, event: string, handler: EventListenerOrEventListenerObject): void => {
+    if (element && event && handler) {
+      (
+        element as unknown as { attachEvent: (event: string, handler: EventListenerOrEventListenerObject) => void }
+      ).attachEvent(`on${event}`, handler);
+    }
+  };
+})();
+
+export const off = ((): EventHandler => {
+  if (canUseDocument && document.removeEventListener) {
+    return (element: Node, event: string, handler: EventListenerOrEventListenerObject): void => {
+      if (element && event) {
+        element.removeEventListener(event, handler, false);
+      }
+    };
+  }
+  return (element: Node, event: string, handler: EventListenerOrEventListenerObject): void => {
+    if (element && event) {
+      (
+        element as unknown as { detachEvent: (event: string, handler: EventListenerOrEventListenerObject) => void }
+      ).detachEvent(`on${event}`, handler);
+    }
+  };
+})();

package/utils/noop.ts

@@ -0,0 +1,3 @@
+const noop = () => {};
+
+export default noop;

package/utils/parentTNode.ts

@@ -0,0 +1,38 @@
+import React, { ReactElement, ReactNode } from "react";
+import { isFunction } from "lodash-es";
+import { TNode } from "../common";
+
+// 解析 TNode 数据结构
+export default function parseTNode<T = unknown>(
+  renderNode: TNode | TNode<T> | undefined,
+  renderParams?: T,
+  defaultNode?: ReactNode
+): ReactNode {
+  let node: ReactNode = null;
+
+  if (typeof renderNode === "function") {
+    node = renderNode(renderParams);
+  } else if (renderNode === true) {
+    node = defaultNode;
+  } else if (renderNode !== null) {
+    node = renderNode ?? defaultNode;
+  }
+  return node as ReactNode;
+}
+
+/**
+ * 解析各种数据类型的 TNode
+ * 函数类型：content={(props) => <Icon></Icon>}
+ * 组件类型：content={<Button>click me</Button>} 这种方式可以避免函数重复渲染，对应的 props 已经注入
+ * 字符类型
+ */
+export function parseContentTNode<T>(tnode: TNode<T>, props: T) {
+  if (isFunction(tnode)) return tnode(props) as ReactNode;
+  if (!tnode || ["string", "number", "boolean"].includes(typeof tnode)) return tnode as ReactNode;
+  try {
+    return React.cloneElement(tnode as ReactElement, { ...props });
+  } catch {
+    console.warn("parseContentTNode", `${tnode} is not a valid ReactNode`);
+    return null;
+  }
+}

package/utils/parseTNode.ts

@@ -0,0 +1,38 @@
+import React, { ReactElement, ReactNode } from "react";
+import { isFunction } from "lodash-es";
+import { TNode } from "../common";
+
+// 解析 TNode 数据结构
+export default function parseTNode<T = Record<string, unknown>>(
+  renderNode: TNode<T> | undefined,
+  renderParams?: T,
+  defaultNode?: ReactNode
+): ReactNode {
+  let node: ReactNode = null;
+
+  if (typeof renderNode === "function") {
+    node = renderNode(renderParams);
+  } else if (renderNode === true) {
+    node = defaultNode;
+  } else if (renderNode !== null) {
+    node = renderNode ?? defaultNode;
+  }
+  return node as ReactNode;
+}
+
+/**
+ * 解析各种数据类型的 TNode
+ * 函数类型：content={(props) => <Icon></Icon>}
+ * 组件类型：content={<Button>click me</Button>} 这种方式可以避免函数重复渲染，对应的 props 已经注入
+ * 字符类型
+ */
+export function parseContentTNode<T>(tnode: TNode<T>, props: T) {
+  if (isFunction(tnode)) return tnode(props) as ReactNode;
+  if (!tnode || ["string", "number", "boolean"].includes(typeof tnode)) return tnode as ReactNode;
+  try {
+    return React.cloneElement(tnode as ReactElement, { ...props });
+  } catch {
+    console.warn("parseContentTNode", `${tnode} is not a valid ReactNode`);
+    return null;
+  }
+}

package/utils/react-render.ts

@@ -0,0 +1,108 @@
+// Implementation reference from: https://github.com/react-component/util/blob/master/src/React/render.ts
+import type * as React from "react";
+import * as ReactDOM from "react-dom";
+import type { Root } from "react-dom/client";
+
+// Let compiler not to search module usage
+const fullClone = {
+  ...ReactDOM
+} as typeof ReactDOM & {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: {
+    usingClientEntryPoint?: boolean;
+  };
+  createRoot?: CreateRoot;
+};
+
+type CreateRoot = (container: ContainerType) => Root;
+
+const { version, render: reactRender, unmountComponentAtNode } = fullClone;
+
+let legacyCreateRoot: CreateRoot;
+try {
+  const mainVersion = Number((version || "").split(".")[0]);
+  if (mainVersion >= 18 && mainVersion < 19) {
+    legacyCreateRoot = fullClone.createRoot;
+  }
+  if (process.env.NODE_ENV !== "production" && mainVersion >= 19) {
+    console.warn(
+      "TDesign warning: Please import react-19-adapter in React 19, See link: https://github.com/Tencent/tdesign-react/blob/develop/packages/tdesign-react/site/docs/getting-started.md#如何在-react-19-中使用"
+    );
+  }
+} catch {
+  // Do nothing;
+}
+
+function toggleWarning(skip: boolean) {
+  const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = fullClone;
+
+  if (
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED &&
+    typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === "object"
+  ) {
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
+  }
+}
+
+const MARK = "__td_react_root__";
+
+// ========================== Render ==========================
+type ContainerType = (Element | DocumentFragment) & {
+  [MARK]?: Root;
+};
+
+function modernRender(node: React.ReactElement, container: ContainerType) {
+  toggleWarning(true);
+  const root = container[MARK] || legacyCreateRoot(container);
+  toggleWarning(false);
+
+  root.render(node);
+
+  container[MARK] = root;
+}
+
+function legacyRender(node: React.ReactElement, container: ContainerType) {
+  reactRender(node, container);
+}
+
+export function render(node: React.ReactElement, container: ContainerType) {
+  if (legacyCreateRoot) {
+    modernRender(node, container);
+    return;
+  }
+
+  legacyRender?.(node, container);
+}
+
+// ========================= Unmount ==========================
+async function modernUnmount(container: ContainerType) {
+  // Delay to unmount to avoid React 18 sync warning
+  return Promise.resolve().then(() => {
+    container[MARK]?.unmount();
+
+    delete container[MARK];
+  });
+}
+
+function legacyUnmount(container: ContainerType) {
+  unmountComponentAtNode(container);
+}
+
+export async function unmount(container: ContainerType) {
+  if (legacyCreateRoot !== undefined) {
+    // Delay to unmount to avoid React 18 sync warning
+    return modernUnmount(container);
+  }
+
+  legacyUnmount(container);
+}
+
+/**
+ * @deprecated Set React render function for compatible usage.
+ * This is internal usage only compatible with React 19.
+ * And will be removed in next major version.
+ */
+export function renderAdapter(render?: CreateRoot) {
+  if (render) {
+    legacyCreateRoot = render;
+  }
+}

package/utils/ref.ts

@@ -0,0 +1,6 @@
+export function getRefDom<T = HTMLElement>(domRef: React.RefObject<T>) {
+  if (domRef.current && typeof domRef.current === "object" && "currentElement" in domRef.current) {
+    return domRef.current.currentElement;
+  }
+  return domRef.current;
+}

package/utils/refs.ts

@@ -0,0 +1,81 @@
+// Source from:
+// https://github.com/react-component/util/blob/master/src/ref.ts
+
+import { isValidElement } from "react";
+import { ForwardRef, isMemo } from "react-is";
+import isFragment from "./isFragment";
+
+// 判断是否支持 ref 透传
+export const supportRef = (nodeOrComponent: unknown): boolean => {
+  if (!nodeOrComponent) {
+    return false;
+  }
+
+  // React 19 no need `forwardRef` anymore. So just pass if is a React element.
+
+  if (
+    isReactElement(nodeOrComponent as React.ReactNode) &&
+    Object.prototype.propertyIsEnumerable.call((nodeOrComponent as React.ReactElement).props, "ref")
+  ) {
+    return true;
+  }
+
+  const type = isMemo(nodeOrComponent)
+    ? (nodeOrComponent as { type: { type: unknown } }).type.type
+    : (nodeOrComponent as { type: unknown }).type;
+
+  // Function component node
+  if (
+    typeof type === "function" &&
+    !(type as { prototype?: { render?: unknown } }).prototype?.render &&
+    (type as { $$typeof?: symbol }).$$typeof !== ForwardRef
+  ) {
+    return false;
+  }
+
+  // Class component
+  if (
+    typeof nodeOrComponent === "function" &&
+    !(nodeOrComponent as { prototype?: { render?: unknown } }).prototype?.render &&
+    (nodeOrComponent as { $$typeof?: symbol }).$$typeof !== ForwardRef
+  ) {
+    return false;
+  }
+  return true;
+};
+
+// 获取 ref 中的 dom 元素
+export function getRefDom<T = HTMLElement>(domRef: React.RefObject<T>) {
+  if (domRef.current && typeof domRef.current === "object" && "currentElement" in domRef.current) {
+    return (domRef.current as { currentElement: HTMLElement }).currentElement;
+  }
+  return domRef.current;
+}
+
+interface RefAttributes<T> extends React.Attributes {
+  ref: React.Ref<T>;
+}
+
+function isReactElement(node: React.ReactNode) {
+  return isValidElement(node) && !isFragment(node);
+}
+
+export const supportNodeRef = <T = HTMLElement>(node: React.ReactNode): node is React.ReactElement & RefAttributes<T> =>
+  isReactElement(node) && supportRef(node);
+
+/**
+ * In React 19. `ref` is not a property from node.
+ * But a property from `props.ref`.
+ * To check if `props.ref` exist or fallback to `ref`.
+ */
+export const getNodeRef = <T = HTMLElement>(node: React.ReactNode): React.Ref<T> | null => {
+  if (node && isReactElement(node)) {
+    const ele = node as React.ReactElement & { ref?: React.Ref<T> };
+
+    // Source from:
+    // https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/getReactNodeRef/getReactNodeRef.ts
+
+    return Object.prototype.propertyIsEnumerable.call(ele.props, "ref") ? ele.props.ref : ele.ref;
+  }
+  return null;
+};

package/utils/style.ts

@@ -0,0 +1,60 @@
+import { canUseDocument } from "./dom";
+export const getCssVarsValue = (name: string, element?: HTMLElement) => {
+  if (!canUseDocument) return;
+
+  const el = element || document.documentElement;
+  return getComputedStyle(el).getPropertyValue(name);
+};
+
+const trim = (str: string): string => (str || "").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, "");
+
+export function hasClass(el: Element, cls: string) {
+  if (!el || !cls) return false;
+  if (cls.indexOf(" ") !== -1) throw new Error("className should not contain space.");
+  if (el.classList) {
+    return el.classList.contains(cls);
+  }
+  return ` ${el.className} `.indexOf(` ${cls} `) > -1;
+}
+
+export const addClass = function (el: Element, cls: string) {
+  if (!el) return;
+  let curClass = el.className;
+  const classes = (cls || "").split(" ");
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else if (!hasClass(el, clsName)) {
+      curClass += ` ${clsName}`;
+    }
+  }
+  if (!el.classList) {
+    // eslint-disable-next-line
+    el.className = curClass;
+  }
+};
+
+export const removeClass = function (el: Element, cls: string) {
+  if (!el || !cls) return;
+  const classes = cls.split(" ");
+  let curClass = ` ${el.className} `;
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else if (hasClass(el, clsName)) {
+      curClass = curClass.replace(` ${clsName} `, " ");
+    }
+  }
+  if (!el.classList) {
+    // eslint-disable-next-line
+    el.className = trim(curClass);
+  }
+};

package/utils/transition.ts

@@ -0,0 +1,28 @@
+export interface IAnimationTransitionParams {
+  classPrefix: string;
+  expandAnimation?: boolean;
+  fadeAnimation?: boolean;
+}
+
+export const getTransitionParams = ({ classPrefix, expandAnimation, fadeAnimation }: IAnimationTransitionParams) => {
+  if (!fadeAnimation) return {};
+
+  const popupAnimationClassPrefix = expandAnimation
+    ? `${classPrefix}-popup--animation-expand`
+    : `${classPrefix}-popup--animation`;
+
+  return {
+    // 与公共 className 保持一致
+    classNames: {
+      appear: `${popupAnimationClassPrefix}-enter ${popupAnimationClassPrefix}-enter-active`,
+      appearActive: `${popupAnimationClassPrefix}-enter-active`,
+      appearDone: `${popupAnimationClassPrefix}-enter-active ${popupAnimationClassPrefix}-enter-to`,
+      enter: `${popupAnimationClassPrefix}-enter ${popupAnimationClassPrefix}-enter-active`,
+      enterActive: `${popupAnimationClassPrefix}-enter-active`,
+      enterDone: `${popupAnimationClassPrefix}-enter-active ${popupAnimationClassPrefix}-enter-to`,
+      exit: `${popupAnimationClassPrefix}-leave ${popupAnimationClassPrefix}-leave-active`,
+      exitActive: `${popupAnimationClassPrefix}-leave-active`,
+      exitDone: `${popupAnimationClassPrefix}-leave-active ${popupAnimationClassPrefix}-leave-to`
+    }
+  };
+};