@tendaui/components 1.0.0 → 1.0.2

package/table/defaultProps.ts

@@ -0,0 +1,14 @@
+import { BaseTableProps } from "./type";
+
+export const tableDefaultProps: BaseTableProps = {
+  columns: [],
+  data: [],
+  rowKey: "id",
+  showHeader: true,
+  bordered: false,
+  stripe: false,
+  hover: false,
+  size: "medium",
+  tableLayout: "fixed",
+  verticalAlign: "middle"
+};

package/table/hooks/index.ts

@@ -0,0 +1,4 @@
+export { default as useTableClassName } from "./useTableClassName";
+export type { TableClassName } from "./useTableClassName";
+export { default as useTableStyle, formatCSSUnit } from "./useTableStyle";
+export type { TableStyleResult } from "./useTableStyle";

package/table/hooks/useTableClassName.ts

@@ -0,0 +1,63 @@
+import { useMemo } from "react";
+import useConfig from "../../hooks/useConfig";
+
+export interface TableClassName {
+  table: string;
+  content: string;
+  tableElm: string;
+  header: string;
+  body: string;
+  empty: string;
+  emptyRow: string;
+  bordered: string;
+  stripe: string;
+  hover: string;
+  sizeSmall: string;
+  sizeMedium: string;
+  sizeLarge: string;
+  layoutFixed: string;
+  layoutAuto: string;
+  verticalAlignTop: string;
+  verticalAlignMiddle: string;
+  verticalAlignBottom: string;
+  alignLeft: string;
+  alignCenter: string;
+  alignRight: string;
+  ellipsis: string;
+  cellEllipsis: string;
+}
+
+export default function useTableClassName() {
+  const { classPrefix } = useConfig();
+
+  const classNames = useMemo<TableClassName>(
+    () => ({
+      table: `${classPrefix}-table`,
+      content: `${classPrefix}-table__content`,
+      tableElm: `${classPrefix}-table__table`,
+      header: `${classPrefix}-table__header`,
+      body: `${classPrefix}-table__body`,
+      empty: `${classPrefix}-table__empty`,
+      emptyRow: `${classPrefix}-table__empty-row`,
+      bordered: `${classPrefix}-table--bordered`,
+      stripe: `${classPrefix}-table--stripe`,
+      hover: `${classPrefix}-table--hover`,
+      sizeSmall: `${classPrefix}-table--size-small`,
+      sizeMedium: `${classPrefix}-table--size-medium`,
+      sizeLarge: `${classPrefix}-table--size-large`,
+      layoutFixed: `${classPrefix}-table--layout-fixed`,
+      layoutAuto: `${classPrefix}-table--layout-auto`,
+      verticalAlignTop: `${classPrefix}-vertical-align-top`,
+      verticalAlignMiddle: `${classPrefix}-vertical-align-middle`,
+      verticalAlignBottom: `${classPrefix}-vertical-align-bottom`,
+      alignLeft: `${classPrefix}-align-left`,
+      alignCenter: `${classPrefix}-align-center`,
+      alignRight: `${classPrefix}-align-right`,
+      ellipsis: `${classPrefix}-table__ellipsis`,
+      cellEllipsis: `${classPrefix}-table__cell--ellipsis`
+    }),
+    [classPrefix]
+  );
+
+  return classNames;
+}

package/table/hooks/useTableStyle.ts

@@ -0,0 +1,93 @@
+import { useMemo } from "react";
+import classNames from "classnames";
+import { BaseTableProps } from "../type";
+import useTableClassName from "./useTableClassName";
+
+export interface TableStyleResult {
+  tableClasses: string;
+  tableContentStyles: React.CSSProperties;
+  tableElementStyles: React.CSSProperties;
+}
+
+/**
+ * 格式化 CSS 单位
+ */
+export function formatCSSUnit(unit: string | number | undefined): string | undefined {
+  if (!unit) return undefined;
+  if (typeof unit === "string") {
+    // 如果已经是字符串且包含单位，直接返回
+    if (/px|em|rem|%|vh|vw/.test(unit)) {
+      return unit;
+    }
+    // 如果是纯数字字符串，添加 px
+    if (!isNaN(Number(unit))) {
+      return `${unit}px`;
+    }
+    return unit;
+  }
+  // 数字类型，添加 px
+  return `${unit}px`;
+}
+
+export default function useTableStyle(props: BaseTableProps): TableStyleResult {
+  const {
+    bordered = false,
+    stripe = false,
+    hover = false,
+    size = "medium",
+    tableLayout = "fixed",
+    verticalAlign = "middle",
+    height,
+    maxHeight,
+    className,
+    style
+  } = props;
+
+  const tableClassNames = useTableClassName();
+
+  // 构建表格类名
+  const tableClasses = useMemo(
+    () =>
+      classNames(
+        tableClassNames.table,
+        {
+          [tableClassNames.bordered]: bordered,
+          [tableClassNames.stripe]: stripe,
+          [tableClassNames.hover]: hover,
+          [tableClassNames.sizeSmall]: size === "small",
+          [tableClassNames.sizeMedium]: size === "medium",
+          [tableClassNames.sizeLarge]: size === "large",
+          [tableClassNames.layoutFixed]: tableLayout === "fixed",
+          [tableClassNames.layoutAuto]: tableLayout === "auto",
+          [tableClassNames.verticalAlignTop]: verticalAlign === "top",
+          [tableClassNames.verticalAlignMiddle]: verticalAlign === "middle",
+          [tableClassNames.verticalAlignBottom]: verticalAlign === "bottom"
+        },
+        className
+      ),
+    [bordered, stripe, hover, size, tableLayout, verticalAlign, className, tableClassNames]
+  );
+
+  // 表格内容区样式
+  const tableContentStyles = useMemo<React.CSSProperties>(() => {
+    const styles: React.CSSProperties = {};
+    if (maxHeight) {
+      styles.maxHeight = formatCSSUnit(maxHeight);
+    }
+    if (height) {
+      styles.height = formatCSSUnit(height);
+    }
+    return styles;
+  }, [height, maxHeight]);
+
+  // 表格元素样式
+  const tableElementStyles = useMemo<React.CSSProperties>(() => {
+    return style || {};
+  }, [style]);
+
+  return {
+    tableClasses,
+    tableContentStyles,
+    tableElementStyles
+  };
+}

package/table/index.ts

@@ -0,0 +1,7 @@
+import _Table from "./Table";
+import "./style/index";
+
+export type { TableProps } from "./Table";
+export type * from "./type";
+export const Table = _Table;
+export default Table;

package/table/style/css.js

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

package/table/style/index.js

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

package/table/type.ts

@@ -0,0 +1,192 @@
+import { ReactNode, MouseEvent } from "react";
+
+// HTMLTableCellElement 是浏览器全局类型，无需导入
+
+/**
+ * 表格行数据类型
+ */
+export type TableRowData = Record<string, unknown>;
+
+/**
+ * 列对齐方式
+ */
+export type TableColumnAlign = "left" | "center" | "right";
+
+/**
+ * 表格尺寸
+ */
+export type TableSize = "small" | "medium" | "large";
+
+/**
+ * 表格布局方式
+ */
+export type TableLayout = "auto" | "fixed";
+
+/**
+ * 单元格参数
+ */
+export interface BaseTableCellParams<T extends TableRowData = TableRowData> {
+  row: T;
+  rowIndex: number;
+  col: BaseTableCol<T>;
+  colIndex: number;
+  e?: React.MouseEvent<HTMLElement>;
+}
+
+/**
+ * 表头单元格参数
+ */
+export interface BaseTableHeadCellParams<T extends TableRowData = TableRowData> {
+  col: BaseTableCol<T>;
+  colIndex: number;
+}
+
+/**
+ * 表格列配置
+ */
+export interface BaseTableCol<T extends TableRowData = TableRowData> {
+  /**
+   * 列标识，必需
+   */
+  colKey: string;
+  /**
+   * 列标题
+   */
+  title?: string | ReactNode | ((params: BaseTableHeadCellParams<T>) => ReactNode);
+  /**
+   * 列宽度
+   */
+  width?: string | number;
+  /**
+   * 列最小宽度
+   */
+  minWidth?: string | number;
+  /**
+   * 列对齐方式
+   */
+  align?: TableColumnAlign;
+  /**
+   * 自定义单元格渲染
+   */
+  cell?: string | ReactNode | ((params: BaseTableCellParams<T>) => ReactNode);
+  /**
+   * 自定义表头渲染
+   */
+  render?: (params: BaseTableHeadCellParams<T> | BaseTableCellParams<T>) => ReactNode;
+  /**
+   * 是否固定列
+   */
+  fixed?: "left" | "right";
+  /**
+   * 列类名
+   */
+  className?: string | ((params: BaseTableCellParams<T>) => string);
+  /**
+   * 列属性
+   */
+  attrs?: Record<string, unknown> | ((params: BaseTableCellParams<T>) => Record<string, unknown>);
+  /**
+   * 是否省略文本
+   */
+  ellipsis?: boolean | { content?: ReactNode; props?: Record<string, unknown> };
+  /**
+   * 子列（多级表头）
+   */
+  children?: BaseTableCol<T>[];
+}
+
+/**
+ * 基础表格属性
+ */
+export interface BaseTableProps<T extends TableRowData = TableRowData> {
+  /**
+   * 列配置
+   * @default []
+   */
+  columns?: BaseTableCol<T>[];
+  /**
+   * 数据源
+   * @default []
+   */
+  data?: T[];
+  /**
+   * 行唯一标识字段名
+   * @default 'id'
+   */
+  rowKey?: string;
+  /**
+   * 是否显示表头
+   * @default true
+   */
+  showHeader?: boolean;
+  /**
+   * 是否显示边框
+   * @default false
+   */
+  bordered?: boolean;
+  /**
+   * 是否显示斑马纹
+   * @default false
+   */
+  stripe?: boolean;
+  /**
+   * 是否显示悬浮效果
+   * @default false
+   */
+  hover?: boolean;
+  /**
+   * 表格尺寸
+   * @default 'medium'
+   */
+  size?: TableSize;
+  /**
+   * 表格布局方式
+   * @default 'fixed'
+   */
+  tableLayout?: TableLayout;
+  /**
+   * 垂直对齐方式
+   * @default 'middle'
+   */
+  verticalAlign?: "top" | "middle" | "bottom";
+  /**
+   * 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px
+   */
+  height?: string | number;
+  /**
+   * 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px
+   */
+  maxHeight?: string | number;
+  /**
+   * 空数据展示内容
+   */
+  empty?: ReactNode;
+  /**
+   * 单元格为空时的展示内容
+   */
+  cellEmptyContent?: ReactNode | ((params: BaseTableCellParams<T>) => ReactNode);
+  /**
+   * 行类名
+   */
+  rowClassName?: string | ((params: { row: T; rowIndex: number }) => string);
+  /**
+   * 行属性
+   */
+  rowAttributes?: Record<string, unknown> | ((params: { row: T; rowIndex: number }) => Record<string, unknown>);
+  /**
+   * 行点击事件
+   */
+  onRowClick?: (params: { row: T; rowIndex: number; e: MouseEvent<HTMLTableRowElement> }) => void;
+  /**
+   * 单元格点击事件
+   */
+  onCellClick?: (params: BaseTableCellParams<T>) => void;
+  /**
+   * 自定义类名
+   */
+  className?: string;
+  /**
+   * 自定义样式
+   */
+  style?: React.CSSProperties;
+}

package/tag/Tag.tsx

@@ -70,7 +70,7 @@ export const TagFunction: ForwardRefRenderFunction<HTMLDivElement, TagProps> = (
     <CloseIcon
       onClick={(e) => {
         if (disabled) return;
-        onClose({ e });
+        onClose({ e: e as any });
       }}
       className={`${tagClassPrefix}__icon-close`}
     />

package/tag-input/hooks/useTagList.tsx

@@ -103,7 +103,7 @@ export default function useTagList(props: TagInputProps) {
         value: tagValue,
         count: tagValue.length - minCollapsedNum,
         collapsedTags: tagValue.slice(minCollapsedNum, tagValue.length),
-        collapsedSelectedItems: options.slice(minCollapsedNum, tagValue.length),
+        collapsedSelectedItems: (options.slice(minCollapsedNum, tagValue.length) as TagInputValue),
         onClose
       };
       const more = isFunction(collapsedItems) ? collapsedItems(params) : collapsedItems;

package/utils/dom.ts

@@ -27,3 +27,7 @@ export const getAttach = (
   }
   return document.body;
 };
+
+export const isWindow = (obj: unknown): obj is Window => {
+  return obj !== null && obj !== undefined && obj === (obj as Window).window;
+};

package/utils/forwardRefWithStatics.ts

@@ -5,8 +5,5 @@ export default function forwardRefWithStatics<P, T = HTMLElement, S = Record<str
   component: React.ForwardRefRenderFunction<T, P>,
   statics?: S
 ): React.FunctionComponent<P & RefAttributes<T>> & S {
-  return hoistNonReactStatics(
-    forwardRef(component as React.ForwardRefRenderFunction<T, P>),
-    statics as S
-  ) as React.FunctionComponent<P & RefAttributes<T>> & S;
+  return hoistNonReactStatics(forwardRef(component as any), statics as any) as any;
 }