@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/TableV2/src/composables/use-styles.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from 'react';
+import type { TableV2Props } from '../table';
+import type { UseColumnsReturn } from './use-columns';
+type UseStyleProps = {
+    columnsTotalWidth: UseColumnsReturn['columnsTotalWidth'];
+    fixedColumnsOnLeft: UseColumnsReturn['fixedColumnsOnLeft'];
+    fixedColumnsOnRight: UseColumnsReturn['fixedColumnsOnRight'];
+    rowsHeight: number;
+};
+export declare const useStyles: (props: TableV2Props, { columnsTotalWidth, rowsHeight, fixedColumnsOnLeft, fixedColumnsOnRight }: UseStyleProps) => {
+    bodyWidth: number;
+    fixedTableHeight: number;
+    mainTableHeight: number;
+    leftTableWidth: number;
+    rightTableWidth: number;
+    windowHeight: number;
+    footerHeight: CSSProperties;
+    emptyStyle: CSSProperties;
+    rootStyle: CSSProperties;
+    headerHeight: number;
+};
+export type UseStyleReturn = ReturnType<typeof useStyles>;
+export {};

package/dist/TableV2/src/composables/use-styles.js

@@ -0,0 +1,90 @@
+import isNumber from 'lodash/isNumber';
+import { useMemo } from 'react';
+import { enforceUnit, sum } from "../utils";
+import { addUnit } from "../../../Util";
+export var useStyles = function useStyles(props, _ref) {
+  var columnsTotalWidth = _ref.columnsTotalWidth,
+    rowsHeight = _ref.rowsHeight,
+    fixedColumnsOnLeft = _ref.fixedColumnsOnLeft,
+    fixedColumnsOnRight = _ref.fixedColumnsOnRight;
+  var bodyWidth = useMemo(function () {
+    var fixed = props.fixed,
+      width = props.width,
+      vScrollbarSize = props.vScrollbarSize;
+    var ret = width - vScrollbarSize;
+    return fixed ? Math.max(Math.round(columnsTotalWidth), ret) : ret;
+  }, [columnsTotalWidth, props.fixed, props.vScrollbarSize, props.width]);
+  var headerHeight = useMemo(function () {
+    return sum(props.headerHeight);
+  }, [props.headerHeight]);
+  var fixedRowsHeight = useMemo(function () {
+    var _props$fixedData;
+    return (((_props$fixedData = props.fixedData) === null || _props$fixedData === void 0 ? void 0 : _props$fixedData.length) || 0) * props.rowHeight;
+  }, [props.fixedData, props.rowHeight]);
+  var mainTableHeight = useMemo(function () {
+    var _props$height = props.height,
+      height = _props$height === void 0 ? 0 : _props$height,
+      _props$maxHeight = props.maxHeight,
+      maxHeight = _props$maxHeight === void 0 ? 0 : _props$maxHeight,
+      footerHeight = props.footerHeight,
+      hScrollbarSize = props.hScrollbarSize;
+    if (maxHeight > 0) {
+      var total = headerHeight + fixedRowsHeight + rowsHeight + hScrollbarSize;
+      return Math.min(total, maxHeight - footerHeight);
+    }
+    return height - footerHeight;
+  }, [headerHeight, fixedRowsHeight, props.footerHeight, props.hScrollbarSize, props.height, props.maxHeight, rowsHeight]);
+  var fixedTableHeight = useMemo(function () {
+    var maxHeight = props.maxHeight;
+    var tableHeight = mainTableHeight;
+    if (isNumber(maxHeight) && maxHeight > 0) {
+      return tableHeight;
+    }
+    var totalHeight = rowsHeight + headerHeight + fixedRowsHeight;
+    return Math.min(tableHeight, totalHeight);
+  }, [headerHeight, fixedRowsHeight, mainTableHeight, props.maxHeight, rowsHeight]);
+  var mapColumn = function mapColumn(column) {
+    return column.width;
+  };
+  var leftTableWidth = useMemo(function () {
+    return sum(fixedColumnsOnLeft.map(mapColumn));
+  }, [fixedColumnsOnLeft]);
+  var rightTableWidth = useMemo(function () {
+    return sum(fixedColumnsOnRight.map(mapColumn));
+  }, [fixedColumnsOnRight]);
+  var windowHeight = useMemo(function () {
+    return mainTableHeight - headerHeight - fixedRowsHeight;
+  }, [mainTableHeight, headerHeight, fixedRowsHeight]);
+  var rootStyle = useMemo(function () {
+    var height = props.height,
+      width = props.width;
+    return enforceUnit({
+      height: height,
+      width: width
+    });
+  }, [props.height, props.width]);
+  var footerHeight = useMemo(function () {
+    return enforceUnit({
+      height: props.footerHeight
+    });
+  }, [props.footerHeight]);
+  var emptyStyle = useMemo(function () {
+    return {
+      top: addUnit(headerHeight),
+      bottom: addUnit(props.footerHeight),
+      width: addUnit(props.width)
+    };
+  }, [headerHeight, props.footerHeight, props.width]);
+  return {
+    bodyWidth: bodyWidth,
+    fixedTableHeight: fixedTableHeight,
+    mainTableHeight: mainTableHeight,
+    leftTableWidth: leftTableWidth,
+    rightTableWidth: rightTableWidth,
+    windowHeight: windowHeight,
+    footerHeight: footerHeight,
+    emptyStyle: emptyStyle,
+    rootStyle: rootStyle,
+    headerHeight: headerHeight
+  };
+};

package/dist/TableV2/src/composables/utils.d.ts

@@ -0,0 +1,3 @@
+import type { CSSProperties } from 'react';
+import type { AnyColumns } from '../types';
+export declare const calcColumnStyle: (column: AnyColumns[number], fixedColumn: boolean, fixed: boolean) => CSSProperties;

package/dist/TableV2/src/composables/utils.js

@@ -0,0 +1,29 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+export var calcColumnStyle = function calcColumnStyle(column, fixedColumn, fixed) {
+  var _column$flexGrow, _column$flexShrink, _column$style;
+  var flex = _objectSpread({
+    flexGrow: 0,
+    flexShrink: 0
+  }, fixed ? {} : {
+    flexGrow: (_column$flexGrow = column.flexGrow) !== null && _column$flexGrow !== void 0 ? _column$flexGrow : 0,
+    flexShrink: (_column$flexShrink = column.flexShrink) !== null && _column$flexShrink !== void 0 ? _column$flexShrink : 1
+  });
+  var style = _objectSpread(_objectSpread(_objectSpread({}, (_column$style = column.style) !== null && _column$style !== void 0 ? _column$style : {}), flex), {}, {
+    flexBasis: 'auto',
+    width: column.width
+  });
+  if (!fixedColumn) {
+    if (column.maxWidth) {
+      style.maxWidth = column.maxWidth;
+    }
+    if (column.minWidth) {
+      style.minWidth = column.minWidth;
+    }
+  }
+  return style;
+};

package/dist/TableV2/src/constants.d.ts

@@ -0,0 +1,18 @@
+export declare enum SortOrder {
+    ASC = "asc",
+    DESC = "desc"
+}
+export declare enum Alignment {
+    LEFT = "left",
+    CENTER = "center",
+    RIGHT = "right"
+}
+export declare enum FixedDir {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare const oppositeOrderMap: {
+    asc: SortOrder;
+    desc: SortOrder;
+};
+export declare const sortOrders: readonly [SortOrder.ASC, SortOrder.DESC];

package/dist/{Tree/Indent.js → TableV2/src/constants.js}

@@ -2,24 +2,21 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import classNames from 'classnames';
-import * as React from 'react';
-var Indent = function Indent(_ref) {
-  var prefixCls = _ref.prefixCls,
-    level = _ref.level,
-    isStart = _ref.isStart,
-    isEnd = _ref.isEnd;
-  var baseClassName = "".concat(prefixCls, "-indent-unit");
-  var list = [];
-  for (var i = 0; i < level; i += 1) {
-    list.push( /*#__PURE__*/React.createElement("span", {
-      key: i,
-      className: classNames(baseClassName, _defineProperty(_defineProperty({}, "".concat(baseClassName, "-start"), isStart[i]), "".concat(baseClassName, "-end"), isEnd[i]))
-    }));
-  }
-  return /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
-    className: "".concat(prefixCls, "-indent")
-  }, list);
-};
-export default /*#__PURE__*/React.memo(Indent);
+export var SortOrder = /*#__PURE__*/function (SortOrder) {
+  SortOrder["ASC"] = "asc";
+  SortOrder["DESC"] = "desc";
+  return SortOrder;
+}({});
+export var Alignment = /*#__PURE__*/function (Alignment) {
+  Alignment["LEFT"] = "left";
+  Alignment["CENTER"] = "center";
+  Alignment["RIGHT"] = "right";
+  return Alignment;
+}({});
+export var FixedDir = /*#__PURE__*/function (FixedDir) {
+  FixedDir["LEFT"] = "left";
+  FixedDir["RIGHT"] = "right";
+  return FixedDir;
+}({});
+export var oppositeOrderMap = _defineProperty(_defineProperty({}, SortOrder.ASC, SortOrder.DESC), SortOrder.DESC, SortOrder.ASC);
+export var sortOrders = [SortOrder.ASC, SortOrder.DESC];

package/dist/TableV2/src/grid.d.ts

@@ -0,0 +1,52 @@
+import { NativeProps } from "../../Types/common";
+import React, { CSSProperties } from 'react';
+import { HeaderSlotProps, TableGridRowSlotParams } from './table';
+import { Column } from './types';
+export type onRowRenderedParams = {
+    rowCacheStart: number;
+    rowCacheEnd: number;
+    rowVisibleStart: number;
+    rowVisibleEnd: number;
+};
+export type TableV2GridProps = {
+    /** 列 column 的配置数组 */
+    columns: Column<any>[];
+    /** 要在表中渲染的数据数组 */
+    data: any[];
+    /** 渲染行在表格主内容上方和 header 下方区域的数据 */
+    fixedData: any[];
+    /** 估计的行高 */
+    estimatedRowHeight: number;
+    /** 表的高度 */
+    height: number;
+    /** 表的宽度 */
+    width: number;
+    headerWidth?: number;
+    /** header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度 */
+    headerHeight?: number | number[];
+    /** footer 的高度，当传入值时，这部分将被计算入 table 的高度里 */
+    footerHeight?: number;
+    /**  */
+    bodyWidth?: number;
+    /**  */
+    rowHeight?: number;
+    /** 为了更好的渲染效果预先多加载的行数 */
+    cache?: number;
+    /**  */
+    useIsScrolling?: boolean;
+    /** 滚动条是否总是显示，不论是否滚动 */
+    scrollbarAlwaysOn?: boolean;
+    /** 滚动条始端 Gap */
+    scrollbarStartGap?: number;
+    /** 滚动条终端 Gap */
+    scrollbarEndGap?: number;
+    containerStyle?: CSSProperties;
+    getRowHeight: (index: number) => number;
+    /** 每行的 key 值，如果不提供，将使用索引 index 代替 */
+    rowKey?: string | symbol | number;
+    headerFormatter?: (props: HeaderSlotProps) => React.ReactNode;
+    rowFormatter?: (props: TableGridRowSlotParams) => React.ReactNode;
+    onRowsRendered?: (params: onRowRenderedParams) => void;
+    onScroll?: (...args: any[]) => void;
+    children?: (params: TableGridRowSlotParams) => React.ReactNode;
+} & NativeProps;

package/dist/TableV2/src/grid.js

@@ -0,0 +1 @@
+export {};

package/dist/TableV2/src/header-cell.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Column } from './types';
+export type TableV2HeaderCell = {
+    className?: string;
+    column?: Column<any>;
+    columnIndex?: number;
+    children?: React.ReactElement | React.ReactElement[];
+};
+export type TableV2HeaderCellPublic = {
+    className?: string;
+    column?: Column<any>;
+    columnIndex?: number;
+};

package/dist/TableV2/src/header-cell.js

@@ -0,0 +1 @@
+export {};

package/dist/TableV2/src/header-row.d.ts

@@ -0,0 +1,10 @@
+import { NativeProps } from "../../Types/common";
+import { CSSProperties } from 'react';
+import { Column, ColumnCellsType, KeyType } from './types';
+export type TableV2HeaderRowProps = {
+    columnsStyles: Record<KeyType, CSSProperties>;
+    columns: Column<any>[];
+    headerIndex?: number | undefined;
+    cellFormatter?: (props: any) => ColumnCellsType;
+    headerFormatter?: (props: any) => ColumnCellsType;
+} & NativeProps;

package/dist/TableV2/src/header-row.js

@@ -0,0 +1 @@
+export {};

package/dist/TableV2/src/header.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { Column } from './types';
+export interface TableV2HeaderProps {
+    className?: string;
+    columns: Column<any>[];
+    fixedHeaderData?: any[];
+    headerData: any[];
+    headerHeight?: number | number[];
+    rowWidth: number;
+    rowHeight?: number;
+    height: number;
+    width: number;
+    dynamic?: (props: any) => React.ReactNode;
+    fixed?: (props: any) => React.ReactNode;
+}

package/dist/TableV2/src/header.js

@@ -0,0 +1 @@
+export {};

package/dist/TableV2/src/private.d.ts

@@ -0,0 +1 @@
+export declare const placeholderSign: unique symbol;

package/dist/TableV2/src/private.js

@@ -0,0 +1 @@
+export var placeholderSign = Symbol('placeholder');

package/dist/TableV2/src/renderers/cell.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TableV2RowCellRenderParam } from '../components';
+import type { UseNamespaceReturn } from '../../../hooks/useClassNames';
+import type { IconSize } from '../../../Icon/typings';
+import type { TableV2Props } from '../table';
+import type { UseTableReturn } from '../use-table';
+type CellRendererProps = TableV2RowCellRenderParam & Pick<TableV2Props, 'cellProps' | 'expandColumnKey' | 'indentSize' | 'rowKey'> & {
+    expandedRowKeys: UseTableReturn['expandedRowKeys'];
+    ns: UseNamespaceReturn;
+    iconSize?: IconSize;
+    children?: React.ReactNode;
+};
+declare const _default: React.NamedExoticComponent<CellRendererProps>;
+export default _default;

package/dist/TableV2/src/renderers/cell.js

@@ -0,0 +1,120 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import get from 'lodash/get';
+import isFunction from 'lodash/isFunction';
+import isObject from 'lodash/isObject';
+import React, { useMemo } from 'react';
+import { ExpandIcon, TableCell } from "../components";
+import { Alignment } from "../constants";
+import { placeholderSign } from "../private";
+import { componentToSlot, enforceUnit, tryCall } from "../utils";
+import classNames from 'classnames';
+var CellRenderer = function CellRenderer(_ref) {
+  var columns = _ref.columns,
+    column = _ref.column,
+    columnIndex = _ref.columnIndex,
+    depth = _ref.depth,
+    expandIconProps = _ref.expandIconProps,
+    isScrolling = _ref.isScrolling,
+    rowData = _ref.rowData,
+    rowIndex = _ref.rowIndex,
+    style = _ref.style,
+    expandedRowKeys = _ref.expandedRowKeys,
+    ns = _ref.ns,
+    _cellProps = _ref.cellProps,
+    expandColumnKey = _ref.expandColumnKey,
+    indentSize = _ref.indentSize,
+    iconSize = _ref.iconSize,
+    rowKey = _ref.rowKey,
+    children = _ref.children;
+  var cellStyle = useMemo(function () {
+    return enforceUnit(style);
+  }, [style]);
+  var cellRenderer = column.cellRenderer,
+    dataKey = column.dataKey,
+    dataGetter = column.dataGetter;
+  var cellData = useMemo(function () {
+    if (column.placeholderSign === placeholderSign) {
+      return undefined;
+    }
+    return isFunction(dataGetter) ? dataGetter({
+      columns: columns,
+      column: column,
+      columnIndex: columnIndex,
+      rowData: rowData,
+      rowIndex: rowIndex
+    }) : get(rowData, dataKey !== null && dataKey !== void 0 ? dataKey : '');
+  }, [dataGetter, columns, column, columnIndex, rowData, rowIndex, dataKey]);
+  var extraCellProps = useMemo(function () {
+    if (column.placeholderSign === placeholderSign) {
+      return {};
+    }
+    return tryCall(_cellProps, {
+      cellData: cellData,
+      columns: columns,
+      column: column,
+      columnIndex: columnIndex,
+      rowIndex: rowIndex,
+      rowData: rowData
+    });
+  }, [_cellProps, cellData, columns, column, columnIndex, rowIndex, rowData]);
+  var cellProps = useMemo(function () {
+    return {
+      className: ns.e('cell-text'),
+      columns: columns,
+      column: column,
+      columnIndex: columnIndex,
+      cellData: cellData,
+      isScrolling: isScrolling,
+      rowData: rowData,
+      rowIndex: rowIndex
+    };
+  }, [ns, columns, column, columnIndex, cellData, isScrolling, rowData, rowIndex]);
+  var columnCellRenderer = componentToSlot(cellRenderer);
+  var Cell = columnCellRenderer ? columnCellRenderer(cellProps) : children || /*#__PURE__*/React.createElement(TableCell, cellProps, cellData);
+  var kls = useMemo(function () {
+    return classNames(ns.e('row-cell'), column.className, ns.is({
+      'align-center': column.align === Alignment.CENTER,
+      'align-right': column.align === Alignment.RIGHT
+    }));
+  }, [ns, column.className, column.align]);
+  var expandable = rowIndex >= 0 && expandColumnKey && column.key === expandColumnKey;
+  var expanded = rowIndex >= 0 && expandedRowKeys.includes(rowData[rowKey]);
+  var IconOrPlaceholder = null;
+  if (expandable) {
+    if (isObject(expandIconProps)) {
+      IconOrPlaceholder = /*#__PURE__*/React.createElement(ExpandIcon, _extends({}, expandIconProps, {
+        className: [ns.e('expand-icon'), ns.is('expanded', expanded)].join(' '),
+        size: iconSize,
+        expanded: expanded,
+        ariaLabel: expanded ? '折叠行' : '展开行',
+        style: {
+          marginInlineStart: "".concat(depth * indentSize, "px")
+        },
+        expandable: true
+      }));
+    } else {
+      IconOrPlaceholder = /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginInlineStart: "".concat(depth * indentSize, "px"),
+          width: iconSize,
+          height: iconSize
+        }
+      });
+    }
+  }
+
+  // 占位符单元格
+  if (column.placeholderSign === placeholderSign) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: ns.em('row-cell', 'placeholder'),
+      style: cellStyle
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: kls,
+    style: cellStyle
+  }, extraCellProps, {
+    role: "cell"
+  }), IconOrPlaceholder, Cell);
+};
+export default /*#__PURE__*/React.memo(CellRenderer);

package/dist/TableV2/src/renderers/empty.d.ts

@@ -0,0 +1,7 @@
+import { BaseProps, NativeProps } from "../../../Types/common";
+import React from 'react';
+declare const Footer: {
+    (props: NativeProps & BaseProps): React.JSX.Element;
+    displayName: string;
+};
+export default Footer;

package/dist/TableV2/src/renderers/empty.js

@@ -0,0 +1,11 @@
+import ElEmpty from "../../../Empty/Empty";
+import React from 'react';
+var Footer = function Footer(props) {
+  var _props$children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: props.className,
+    style: props.style
+  }, (_props$children = props.children) !== null && _props$children !== void 0 ? _props$children : /*#__PURE__*/React.createElement(ElEmpty, null));
+};
+Footer.displayName = 'ElTableV2Empty';
+export default Footer;

package/dist/TableV2/src/renderers/footer.d.ts

@@ -0,0 +1,7 @@
+import { BaseProps, NativeProps } from "../../../Types/common";
+import React from 'react';
+declare const Footer: {
+    (props: NativeProps & BaseProps): React.JSX.Element;
+    displayName: string;
+};
+export default Footer;

package/dist/TableV2/src/renderers/footer.js

@@ -0,0 +1,9 @@
+import React from 'react';
+var Footer = function Footer(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: props.className,
+    style: props.style
+  }, props.children);
+};
+Footer.displayName = 'ElTableV2Footer';
+export default Footer;

package/dist/TableV2/src/renderers/header-cell.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type TableV2HeaderRowCellRendererParams } from '../components';
+import type { UseNamespaceReturn } from '../../../hooks/useClassNames';
+import type { TableV2Props } from '../table';
+import type { UseTableReturn } from '../use-table';
+export type HeaderCellRendererProps = TableV2HeaderRowCellRendererParams & Pick<UseTableReturn, 'onColumnSorted'> & Pick<TableV2Props, 'sortBy' | 'sortState' | 'headerCellProps'> & {
+    ns: UseNamespaceReturn;
+};
+declare const HeaderCellRenderer: React.FC<HeaderCellRendererProps>;
+export default HeaderCellRenderer;
+export type HeaderCellSlotProps = HeaderCellRendererProps & {
+    className: string;
+};

package/dist/TableV2/src/renderers/header-cell.js

@@ -0,0 +1,92 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useMemo } from 'react';
+import { HeaderCell, SortIcon } from "../components";
+// import ColumnResizer from '../table-column-resizer'
+import { Alignment, SortOrder, oppositeOrderMap } from "../constants";
+import { placeholderSign } from "../private";
+import { componentToSlot, enforceUnit, tryCall } from "../utils";
+import classNames from 'classnames';
+var HeaderCellRenderer = function HeaderCellRenderer(props) {
+  var column = props.column,
+    ns = props.ns,
+    style = props.style,
+    onColumnSorted = props.onColumnSorted;
+  var cellStyle = useMemo(function () {
+    return enforceUnit(style);
+  }, [style]);
+  var headerCellRenderer = column.headerCellRenderer,
+    headerClass = column.headerClass,
+    sortable = column.sortable;
+
+  /**
+   * render Cell children
+   */
+
+  var cellProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, props), {}, {
+      className: ns.e('header-cell-text')
+    });
+  }, [props, ns]);
+  var columnCellRenderer = componentToSlot(headerCellRenderer);
+  var Cell = columnCellRenderer ? columnCellRenderer(cellProps) : /*#__PURE__*/React.createElement(HeaderCell, cellProps);
+
+  /**
+   * Render cell container and sort indicator
+   */
+  var sortBy = props.sortBy,
+    sortState = props.sortState,
+    headerCellProps = props.headerCellProps;
+  var sorting, sortOrder, ariaSort;
+  if (sortState) {
+    var order = sortState[column.key];
+    sorting = Boolean(oppositeOrderMap[order]);
+    sortOrder = sorting ? order : SortOrder.ASC;
+  } else {
+    sorting = column.key === (sortBy === null || sortBy === void 0 ? void 0 : sortBy.key);
+    sortOrder = sorting ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.order : SortOrder.ASC;
+  }
+  if (sortOrder === SortOrder.ASC) {
+    ariaSort = 'ascending';
+  } else if (sortOrder === SortOrder.DESC) {
+    ariaSort = 'descending';
+  } else {
+    ariaSort = undefined;
+  }
+  var cellKls = useMemo(function () {
+    return classNames(ns.e('header-cell'), tryCall(headerClass, props, ''), ns.is({
+      'align-center': column.align === Alignment.CENTER,
+      'align-right': column.align === Alignment.RIGHT,
+      sortable: sortable
+    }));
+  }, [ns, headerClass, props, column.align, sortable]);
+  var cellWrapperProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, tryCall(headerCellProps, props)), {}, _defineProperty({
+      onClick: column.sortable ? onColumnSorted : undefined,
+      'aria-sort': sortable ? ariaSort : undefined,
+      className: cellKls,
+      style: cellStyle
+    }, 'data-key', column.key));
+  }, [headerCellProps, props, column.sortable, onColumnSorted, sortable, ariaSort, cellKls, cellStyle, column.key]);
+  if (column.placeholderSign === placeholderSign) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: ns.em('header-row-cell', 'placeholder'),
+      style: cellStyle
+    });
+  }
+
+  // For now we don't deliver resizable column feature since it has some UX issue.
+  return /*#__PURE__*/React.createElement("div", _extends({}, cellWrapperProps, {
+    role: "columnheader"
+  }), Cell, sortable && /*#__PURE__*/React.createElement(SortIcon, {
+    className: [ns.e('sort-icon'), sorting && ns.is('sorting')].filter(Boolean).join(' '),
+    sortOrder: sortOrder,
+    ariaLabel: "\u6392\u5E8F: ".concat(column.title || '')
+  }));
+};
+export default HeaderCellRenderer;

package/dist/TableV2/src/renderers/header.d.ts

@@ -0,0 +1,9 @@
+import { TableV2HeaderRendererParams } from '../components';
+import { UseNamespaceReturn } from "../../../hooks/useClassNames";
+import { FC } from 'react';
+import type { TableV2Props } from '../table';
+type HeaderRendererProps = TableV2HeaderRendererParams & Pick<TableV2Props, 'headerClass' | 'headerProps' | 'headerFormatter' | 'cellFormatter'> & {
+    ns: UseNamespaceReturn;
+};
+declare const HeaderRenderer: FC<HeaderRendererProps>;
+export default HeaderRenderer;