@tendaui/components 1.0.0 → 1.2.3

package/tab/TabPanel.tsx

@@ -0,0 +1,42 @@
+import React, { useRef } from "react";
+import classNames from "classnames";
+import type { TdTabPanelProps } from "./type";
+import { StyledProps } from "../common";
+import { useTabClass } from "./useTabClass";
+import { tabPanelDefaultProps } from "./defaultProps";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+export interface TabPanelProps extends TdTabPanelProps, StyledProps {
+  children?: React.ReactNode;
+  isActive?: boolean;
+}
+
+const TabPanel: React.FC<TabPanelProps> = (props) => {
+  const { className, lazy, isActive, destroyOnHide, style } = useDefaultProps<TabPanelProps>(
+    props,
+    tabPanelDefaultProps
+  );
+  const { tdTabPanelClassPrefix } = useTabClass();
+  const lazyRenderRef = useRef(lazy);
+
+  if (lazy && isActive && lazyRenderRef.current) {
+    lazyRenderRef.current = false;
+  }
+
+  if ((!isActive && destroyOnHide) || lazyRenderRef.current) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames(tdTabPanelClassPrefix, className)}
+      style={{ display: !isActive ? "none" : undefined, ...style }}
+    >
+      {props.children || props.panel}
+    </div>
+  );
+};
+
+TabPanel.displayName = "TabPanel";
+
+export default TabPanel;

package/tab/Tabs.tsx

@@ -0,0 +1,71 @@
+import { TabValue, TdTabsProps } from "./type";
+import forwardRefWithStatics from "../utils/forwardRefWithStatics";
+import TabNav from "./TabNav";
+import TabPanel from "./TabPanel";
+import classNames from "classnames";
+import React from "react";
+import { useTabClass } from "./useTabClass";
+import { StyledProps } from "../common";
+import { tabsDefaultProps } from "./defaultProps";
+import useDefaultProps from "../hooks/useDefaultProps";
+import useControlled from "../hooks/useControlled";
+
+export interface TabsProps extends TdTabsProps, StyledProps {
+  children?: React.ReactNode;
+}
+const Tabs = forwardRefWithStatics(
+  (originalProps: TabsProps, ref: React.Ref<HTMLDivElement>) => {
+    const props = useDefaultProps<TabsProps>(originalProps, tabsDefaultProps);
+    const { children, list, placement, dragSort, className, style, onRemove } = props;
+    const [value, onChange] = useControlled(props, "value", props.onChange);
+    const { tdTabsClassPrefix, tdTabsClassGenerator, tdClassGenerator } = useTabClass();
+    const targetClassNameRegExpStr = `^${tdTabsClassPrefix}(__nav-item|__nav-item-wrapper|__nav-item-text-wrapper)`;
+    const memoChildren = React.useMemo<React.ReactNode | React.ReactNode[]>(() => {
+      if (!list || list.length === 0) {
+        return children;
+      }
+      return list.map<React.ReactNode>((panelProps) => <TabPanel key={panelProps.value} {...panelProps} />);
+    }, [children, list]);
+
+    const itemList = React.Children.map(memoChildren, (child: React.ReactElement<any>) => {
+      if (child && child.type === TabPanel) {
+        return child.props;
+      }
+      return null;
+    });
+
+    const handleChange = React.useCallback(
+      (v: TabValue) => {
+        onChange?.(v);
+      },
+      [onChange]
+    );
+
+    const headerNode = React.useMemo<React.ReactNode>(
+      () => (
+        <div className={classNames(tdTabsClassGenerator("header"), tdClassGenerator(`is-${placement}`))}>
+          <TabNav {...props} activeValue={value} onRemove={onRemove} itemList={itemList} onChange={handleChange} />
+        </div>
+      ),
+      [props, value, onRemove, itemList, handleChange, placement, tdTabsClassGenerator, tdClassGenerator]
+    );
+
+    return (
+      <div ref={ref} className={classNames(tdTabsClassPrefix, className)} style={style}>
+        {headerNode}
+        <div className={classNames(tdTabsClassGenerator("content"), tdClassGenerator(`is-${placement}`))}>
+          {React.Children.map(memoChildren, (child: any) => {
+            if (child && child.type === TabPanel) {
+              return <TabPanel {...child.props} isActive={child.props.value === value} />;
+            }
+            return null;
+          })}
+        </div>
+      </div>
+    );
+  },
+  { TabPanel }
+);
+Tabs.displayName = "Tabs";
+
+export default Tabs;

package/tab/defaultProps.ts

@@ -0,0 +1,19 @@
+import { TdTabsProps, TdTabPanelProps } from "./type";
+
+export const tabsDefaultProps: TdTabsProps = {
+  addable: false,
+  disabled: false,
+  dragSort: false,
+  placement: "top",
+  scrollPosition: "auto",
+  size: "medium",
+  theme: "normal"
+};
+
+export const tabPanelDefaultProps: TdTabPanelProps = {
+  destroyOnHide: true,
+  disabled: false,
+  draggable: true,
+  lazy: false,
+  removable: false
+};

package/tab/index.ts

@@ -0,0 +1,7 @@
+import _Tabs from "./Tabs";
+import TabPanel from "./TabPanel";
+import "./style/index";
+export * from "./type";
+export const Tabs = _Tabs;
+export { TabPanel };
+export default Tabs;

package/tab/style/index.js

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

package/tab/type.ts

@@ -0,0 +1,125 @@
+import { TNode } from "../common";
+import { MouseEvent } from "react";
+
+export interface TdTabsProps {
+  /**
+   * 选项卡右侧的操作区域
+   */
+  action?: TNode;
+  /**
+   * 选项卡是否可增加
+   * @default false
+   */
+  addable?: boolean;
+  /**
+   * 是否禁用选项卡
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 是否开启拖拽调整顺序
+   * @default false
+   */
+  dragSort?: boolean;
+  /**
+   * 选项卡列表
+   */
+  list?: Array<TdTabPanelProps>;
+  /**
+   * 选项卡位置
+   * @default top
+   */
+  placement?: "left" | "top" | "bottom" | "right";
+  /**
+   * Tab较多的时候，选中滑块滚动最终停留的位置
+   * @default auto
+   */
+  scrollPosition?: "auto" | "start" | "center" | "end";
+  /**
+   * 组件尺寸
+   * @default medium
+   */
+  size?: "medium" | "large";
+  /**
+   * 选项卡风格，包含 默认风格 和 卡片风格两种
+   * @default normal
+   */
+  theme?: "normal" | "card";
+  /**
+   * 激活的选项卡值
+   */
+  value?: TabValue;
+  /**
+   * 激活的选项卡值，非受控属性
+   */
+  defaultValue?: TabValue;
+  /**
+   * 添加选项卡时触发
+   */
+  onAdd?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 激活的选项卡发生变化时触发
+   */
+  onChange?: (value: TabValue) => void;
+  /**
+   * 拖拽排序时触发
+   */
+  onDragSort?: (context: TabsDragSortContext) => void;
+  /**
+   * 删除选项卡时触发
+   */
+  onRemove?: (options: { value: TabValue; index: number; e: MouseEvent<HTMLSpanElement> }) => void;
+}
+
+export interface TdTabPanelProps {
+  /**
+   * 选项卡内容隐藏时是否销毁
+   * @default true
+   */
+  destroyOnHide?: boolean;
+  /**
+   * 是否禁用当前选项卡
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 选项卡组件开启允许拖动排序时，当前选项卡是否允许拖动
+   * @default true
+   */
+  draggable?: boolean;
+  /**
+   * 选项卡名称，可自定义选项卡导航内容
+   */
+  label?: TNode;
+  /**
+   * 是否启用选项卡懒加载
+   * @default false
+   */
+  lazy?: boolean;
+  /**
+   * 用于自定义选项卡面板内容
+   */
+  panel?: TNode;
+  /**
+   * 当前选项卡是否允许移除
+   * @default false
+   */
+  removable?: boolean;
+  /**
+   * 选项卡的值，唯一标识
+   */
+  value?: TabValue;
+  /**
+   * 点击删除按钮时触发
+   */
+  onRemove?: (options: { value: TabValue; e: MouseEvent<HTMLSpanElement> }) => void;
+}
+
+export type TabValue = string | number;
+
+export interface TabsDragSortContext {
+  currentIndex: number;
+  current: TabValue;
+  targetIndex: number;
+  target: TabValue;
+}

package/tab/useTabClass.ts

@@ -0,0 +1,20 @@
+import useConfig from "../hooks/useConfig";
+
+export const useTabClass = () => {
+  const { classPrefix } = useConfig();
+  const tdTabsClassPrefix = `${classPrefix}-tabs`;
+  const tdTabPanelClassPrefix = `${classPrefix}-tab-panel`;
+  const tdClassGenerator = (append: string) => `${classPrefix}-${append}`;
+  const tdTabsClassGenerator = (append: string) => `${tdTabsClassPrefix}__${append}`;
+  const tdTabPanelClassGenerator = (append: string) => `${tdTabPanelClassPrefix}__${append}`;
+  const tdSizeClassGenerator = (size: "medium" | "large") => `${classPrefix}-size-${size === "large" ? "l" : "m"}`;
+
+  return {
+    tdTabsClassPrefix,
+    tdTabPanelClassPrefix,
+    tdClassGenerator,
+    tdTabsClassGenerator,
+    tdTabPanelClassGenerator,
+    tdSizeClassGenerator
+  };
+};

package/table/Cell.tsx

@@ -0,0 +1,109 @@
+import React, { MouseEvent } from "react";
+import classNames from "classnames";
+import { isFunction, get } from "lodash-es";
+import useConfig from "../hooks/useConfig";
+import { BaseTableCellParams, TableRowData } from "./type";
+
+export interface CellProps<T extends TableRowData = TableRowData> {
+  cellParams: BaseTableCellParams<T>;
+  cellEmptyContent?: React.ReactNode | ((params: BaseTableCellParams<T>) => React.ReactNode);
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+}
+
+/**
+ * 渲染单元格内容
+ */
+export function renderCell<T extends TableRowData = TableRowData>(
+  params: BaseTableCellParams<T>,
+  extra?: {
+    cellEmptyContent?: React.ReactNode | ((params: BaseTableCellParams<T>) => React.ReactNode);
+  }
+): React.ReactNode {
+  const { col, row } = params;
+
+  // 如果列配置了自定义渲染函数
+  if (isFunction(col.cell)) {
+    return col.cell(params);
+  }
+
+  if (isFunction(col.render)) {
+    return col.render(params);
+  }
+
+  // 如果列配置了字符串或 ReactNode
+  if (col.cell && !isFunction(col.cell)) {
+    return col.cell;
+  }
+
+  // 默认从 row 数据中获取值
+  const value = get(row, col.colKey) as React.ReactNode;
+
+  // 处理空值
+  if (value === undefined || value === null || value === "") {
+    if (extra?.cellEmptyContent) {
+      return isFunction(extra.cellEmptyContent) ? extra.cellEmptyContent(params) : extra.cellEmptyContent;
+    }
+  }
+
+  return value;
+}
+
+const Cell = <T extends TableRowData = TableRowData>(props: CellProps<T>) => {
+  const { cellParams, cellEmptyContent, onClick } = props;
+  const { col, colIndex } = cellParams;
+  const { classPrefix } = useConfig();
+
+  const cellNode = renderCell(cellParams, { cellEmptyContent });
+
+  // 处理省略文本
+  const isEllipsis = Boolean(col.ellipsis);
+  const cellContent = isEllipsis ? (
+    <div
+      className={`${classPrefix}-table__ellipsis`}
+      title={String(cellNode)}
+      style={{ width: "100%", overflow: "hidden" }}
+    >
+      {cellNode}
+    </div>
+  ) : (
+    cellNode
+  );
+
+  // 处理类名
+  const customClasses = isFunction(col.className) ? col.className(cellParams) : col.className;
+
+  const classes = classNames(customClasses, {
+    [`${classPrefix}-table__cell--ellipsis`]: isEllipsis,
+    [`${classPrefix}-align-left`]: col.align === "left" || !col.align,
+    [`${classPrefix}-align-center`]: col.align === "center",
+    [`${classPrefix}-align-right`]: col.align === "right"
+  });
+
+  // 处理属性
+  const attrs = isFunction(col.attrs) ? col.attrs(cellParams) : col.attrs || {};
+
+  // 处理单元格样式
+  const cellStyle: React.CSSProperties = {};
+  if (col.width) {
+    cellStyle.width = typeof col.width === "number" ? `${col.width}px` : col.width;
+  }
+  if (col.minWidth) {
+    cellStyle.minWidth = typeof col.minWidth === "number" ? `${col.minWidth}px` : col.minWidth;
+  }
+
+  return (
+    <td
+      key={col.colKey || colIndex}
+      className={classes || undefined}
+      style={Object.keys(cellStyle).length > 0 ? cellStyle : undefined}
+      {...attrs}
+      onClick={onClick}
+    >
+      {cellContent}
+    </td>
+  );
+};
+
+Cell.displayName = "Cell";
+
+export default Cell;

package/table/TBody.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { get } from "lodash-es";
+import useConfig from "../hooks/useConfig";
+import { useLocaleReceiver } from "../locale/LocalReceiver";
+import { TableRowData, BaseTableCol, BaseTableCellParams } from "./type";
+import TR from "./TR";
+
+export interface TBodyProps<T extends TableRowData = TableRowData> {
+  data: T[];
+  columns: BaseTableCol<T>[];
+  rowKey: string;
+  rowClassName?: string | ((params: { row: T; rowIndex: number }) => string);
+  rowAttributes?: Record<string, unknown> | ((params: { row: T; rowIndex: number }) => Record<string, unknown>);
+  cellEmptyContent?: React.ReactNode | ((params: BaseTableCellParams<T>) => React.ReactNode);
+  empty?: React.ReactNode;
+  onRowClick?: (params: { row: T; rowIndex: number; e: React.MouseEvent<HTMLTableRowElement> }) => void;
+  onCellClick?: (params: BaseTableCellParams<T>) => void;
+}
+
+const TBody = <T extends TableRowData = TableRowData>(props: TBodyProps<T>) => {
+  const { data, columns, rowKey, rowClassName, rowAttributes, cellEmptyContent, empty, onRowClick, onCellClick } =
+    props;
+  const { classPrefix } = useConfig();
+  const [local, t] = useLocaleReceiver("table");
+  const emptyText = typeof local.empty === "string" ? t(local.empty) : local.empty;
+
+  // 空数据渲染
+  const renderEmpty = () => {
+    if (empty !== undefined) {
+      return (
+        <tr className={`${classPrefix}-table__empty-row`}>
+          <td colSpan={columns.length}>
+            <div className={`${classPrefix}-table__empty`}>{empty}</div>
+          </td>
+        </tr>
+      );
+    }
+    return (
+      <tr className={`${classPrefix}-table__empty-row`}>
+        <td colSpan={columns.length}>
+          <div className={`${classPrefix}-table__empty`}>{emptyText}</div>
+        </td>
+      </tr>
+    );
+  };
+
+  // 如果没有数据，显示空状态
+  if (!data || data.length === 0) {
+    return <tbody className={`${classPrefix}-table__body`}>{renderEmpty()}</tbody>;
+  }
+
+  // 渲染数据行
+  const rows = data.map((row, rowIndex) => {
+    const rowKeyValue = get(row, rowKey);
+    const key = typeof rowKeyValue === "string" || typeof rowKeyValue === "number" ? rowKeyValue : rowIndex;
+    return (
+      <TR
+        key={key}
+        row={row}
+        rowIndex={rowIndex}
+        columns={columns}
+        rowKey={rowKey}
+        rowClassName={rowClassName}
+        rowAttributes={rowAttributes}
+        cellEmptyContent={cellEmptyContent}
+        onRowClick={onRowClick}
+        onCellClick={onCellClick}
+      />
+    );
+  });
+
+  return <tbody className={`${classPrefix}-table__body`}>{rows}</tbody>;
+};
+
+TBody.displayName = "TBody";
+
+export default TBody;

package/table/THead.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import classNames from "classnames";
+import { isFunction } from "lodash-es";
+import useConfig from "../hooks/useConfig";
+import { BaseTableCol, TableRowData, BaseTableHeadCellParams } from "./type";
+
+export interface THeadProps<T extends TableRowData = TableRowData> {
+  columns: BaseTableCol<T>[];
+}
+
+/**
+ * 渲染表头标题
+ */
+function renderTitle<T extends TableRowData = TableRowData>(col: BaseTableCol<T>, colIndex: number): React.ReactNode {
+  const params: BaseTableHeadCellParams<T> = { col, colIndex };
+
+  if (isFunction(col.title)) {
+    return col.title(params);
+  }
+
+  return col.title || "";
+}
+
+const THead = <T extends TableRowData = TableRowData>(props: THeadProps<T>) => {
+  const { columns } = props;
+  const { classPrefix } = useConfig();
+
+  const thList = columns.map((col, colIndex) => {
+    const title = renderTitle(col, colIndex);
+    const customClasses = isFunction(col.className)
+      ? col.className({ row: {} as T, rowIndex: -1, col, colIndex })
+      : col.className;
+
+    const classes = classNames(customClasses, {
+      [`${classPrefix}-align-left`]: col.align === "left" || !col.align,
+      [`${classPrefix}-align-center`]: col.align === "center",
+      [`${classPrefix}-align-right`]: col.align === "right"
+    });
+
+    const attrs = isFunction(col.attrs) ? col.attrs({ row: {} as T, rowIndex: -1, col, colIndex }) : col.attrs || {};
+
+    return (
+      <th
+        key={col.colKey || colIndex}
+        className={classes || undefined}
+        style={col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : undefined}
+        {...attrs}
+      >
+        {title}
+      </th>
+    );
+  });
+
+  return (
+    <thead className={`${classPrefix}-table__header`}>
+      <tr>{thList}</tr>
+    </thead>
+  );
+};
+
+THead.displayName = "THead";
+
+export default THead;

package/table/TR.tsx

@@ -0,0 +1,78 @@
+import React, { MouseEvent } from "react";
+import classNames from "classnames";
+import { isFunction } from "lodash-es";
+import { TableRowData, BaseTableCol, BaseTableCellParams } from "./type";
+import Cell from "./Cell";
+
+export interface TRProps<T extends TableRowData = TableRowData> {
+  row: T;
+  rowIndex: number;
+  columns: BaseTableCol<T>[];
+  rowKey: string;
+  rowClassName?: string | ((params: { row: T; rowIndex: number }) => string);
+  rowAttributes?: Record<string, unknown> | ((params: { row: T; rowIndex: number }) => Record<string, unknown>);
+  cellEmptyContent?: React.ReactNode | ((params: BaseTableCellParams<T>) => React.ReactNode);
+  onRowClick?: (params: { row: T; rowIndex: number; e: MouseEvent<HTMLTableRowElement> }) => void;
+  onCellClick?: (params: BaseTableCellParams<T>) => void;
+}
+
+const TR = <T extends TableRowData = TableRowData>(props: TRProps<T>) => {
+  const { row, rowIndex, columns, rowClassName, rowAttributes, cellEmptyContent, onRowClick, onCellClick } = props;
+
+  // 处理行类名
+  const customRowClassName = isFunction(rowClassName) ? rowClassName({ row, rowIndex }) : rowClassName;
+
+  const rowClasses = classNames(customRowClassName);
+
+  // 处理行属性
+  const customRowAttributes = isFunction(rowAttributes) ? rowAttributes({ row, rowIndex }) : rowAttributes || {};
+
+  // 处理单元格点击
+  const handleCellClick = (e: React.MouseEvent<HTMLElement>, col: BaseTableCol<T>, colIndex: number) => {
+    if (onCellClick) {
+      onCellClick({
+        row,
+        rowIndex,
+        col,
+        colIndex,
+        e
+      });
+    }
+  };
+
+  // 处理行点击
+  const handleRowClick = (e: MouseEvent<HTMLTableRowElement>) => {
+    if (onRowClick) {
+      onRowClick({ row, rowIndex, e });
+    }
+  };
+
+  // 渲染单元格
+  const cells = columns.map((col, colIndex) => {
+    const cellParams: BaseTableCellParams<T> = {
+      row,
+      rowIndex,
+      col,
+      colIndex
+    };
+
+    return (
+      <Cell
+        key={col.colKey || colIndex}
+        cellParams={cellParams}
+        cellEmptyContent={cellEmptyContent}
+        onClick={(e) => handleCellClick(e, col, colIndex)}
+      />
+    );
+  });
+
+  return (
+    <tr className={rowClasses || undefined} {...customRowAttributes} onClick={handleRowClick}>
+      {cells}
+    </tr>
+  );
+};
+
+TR.displayName = "TR";
+
+export default TR;

package/table/Table.tsx

@@ -0,0 +1,73 @@
+import React, { forwardRef } from "react";
+import useConfig from "../hooks/useConfig";
+import useDefaultProps from "../hooks/useDefaultProps";
+import { BaseTableProps, TableRowData } from "./type";
+import { tableDefaultProps } from "./defaultProps";
+import { useTableStyle, formatCSSUnit } from "./hooks";
+import THead from "./THead";
+import TBody from "./TBody";
+
+export interface TableProps<T extends TableRowData = TableRowData>
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick">,
+    BaseTableProps<T> {}
+
+const TableComponent = forwardRef<HTMLDivElement, TableProps<TableRowData>>((originalProps, ref) => {
+  const props = useDefaultProps<TableProps<TableRowData>>(originalProps, tableDefaultProps);
+  const {
+    columns = [],
+    data = [],
+    rowKey = "id",
+    showHeader = true,
+    empty,
+    cellEmptyContent,
+    rowClassName,
+    rowAttributes,
+    onRowClick,
+    onCellClick,
+    ...restProps
+  } = props;
+
+  const { classPrefix } = useConfig();
+  const { tableClasses, tableContentStyles, tableElementStyles } = useTableStyle(props);
+
+  return (
+    <div ref={ref} className={tableClasses} style={tableElementStyles} {...restProps}>
+      <div className={`${classPrefix}-table__content`} style={tableContentStyles}>
+        <table className={`${classPrefix}-table__table`} style={{ tableLayout: props.tableLayout || "fixed" }}>
+          <colgroup>
+            {columns.map((col, index) => {
+              const colStyle: React.CSSProperties = {};
+              if (col.width) {
+                colStyle.width = formatCSSUnit(col.width);
+              }
+              if (col.minWidth) {
+                colStyle.minWidth = formatCSSUnit(col.minWidth);
+              }
+              return <col key={col.colKey || index} style={colStyle} />;
+            })}
+          </colgroup>
+          {showHeader && <THead columns={columns} />}
+          <TBody
+            data={data}
+            columns={columns}
+            rowKey={rowKey}
+            rowClassName={rowClassName}
+            rowAttributes={rowAttributes}
+            cellEmptyContent={cellEmptyContent}
+            empty={empty}
+            onRowClick={onRowClick}
+            onCellClick={onCellClick}
+          />
+        </table>
+      </div>
+    </div>
+  );
+});
+
+TableComponent.displayName = "Table";
+
+const Table = TableComponent as <T extends TableRowData = TableRowData>(
+  props: TableProps<T> & React.RefAttributes<HTMLDivElement>
+) => React.ReactElement;
+
+export default Table;