@gmfe/table-x 2.14.30-beta.4 → 2.14.30

package/src/hoc/two_level_header_table_x/table_x.js

@@ -1,169 +0,0 @@
-import React, { useMemo } from 'react'
-import PropTypes from 'prop-types'
-import { useTable } from 'react-table'
-import { Empty, Loading, afterScroll, __DEFAULT_COLUMN } from '../../util'
-import classNames from 'classnames'
-import _ from 'lodash'
-import TwoLevelTHead from './thead'
-import Tr from './tr'
-import { rebuildNestedColumnsFromFlat } from './rebuild_helper'
-import { transformColumnsForTwoLevel } from './transform_helper'
-
-const defaultColumn = __DEFAULT_COLUMN
-
-/**
- * 支持两级表头的 TableX 组件
- *
- * 接收：
- *   - columns: 处理后的扁平 columns（经过 select、diy HOC 处理，每个 subColumn 都带有 parentKey、parentHeader、parentFixed 属性）
- *
- * 功能：
- *   1. 根据 parentKey 重建嵌套结构
- *   2. 转换为 react-table 格式
- *   3. 使用 TwoLevelTHead 渲染两级表头
- */
-const TwoLevelTableX = ({
-  columns,
-  data,
-  loading,
-  SubComponent,
-  keyField = 'value',
-  className,
-  tiled = false,
-  onScroll,
-  isTrDisable = () => false,
-  isTrHighlight = () => false,
-  ...rest
-}) => {
-  const rebuiltColumns = useMemo(() => {
-    return rebuildNestedColumnsFromFlat(columns)
-  }, [columns])
-
-  const { transformedColumns, firstLevelHeaders } = useMemo(() => {
-    return transformColumnsForTwoLevel(rebuiltColumns)
-  }, [rebuiltColumns])
-
-  const visibleColumns = useMemo(() => {
-    return transformedColumns.filter(c => c.show !== false)
-  }, [transformedColumns])
-
-  const {
-    getTableProps,
-    headerGroups,
-    getTableBodyProps,
-    rows,
-    prepareRow
-  } = useTable({
-    columns: visibleColumns,
-    data,
-    defaultColumn
-  })
-
-  let totalWidth = 0
-  if (rows[0] && rows[0].cells.length > 0) {
-    prepareRow(rows[0])
-    const last = rows[0].cells[rows[0].cells.length - 1].column
-    totalWidth = last.totalLeft + last.totalWidth
-  }
-
-  const gtp = getTableProps()
-  const tableStyle =
-    totalWidth > 0
-      ? { width: '100%', minWidth: totalWidth + 'px' }
-      : { width: '100%' }
-
-  const tableProps = {
-    ...gtp,
-    style: tableStyle,
-    className: classNames(
-      'gm-table-x-table',
-      'gm-table-x-table-two-level',
-      gtp.className
-    )
-  }
-
-  const gtbp = getTableBodyProps()
-  const tableBodyProps = {
-    ...gtbp,
-    className: 'gm-table-x-tbody'
-  }
-
-  const handleScroll = e => {
-    onScroll && onScroll(e)
-    afterScroll()
-  }
-
-  const RenderRow = ({ index, style }) => {
-    const row = rows[index]
-    prepareRow(row)
-
-    return (
-      <Tr
-        key={row.index}
-        row={row}
-        SubComponent={SubComponent}
-        keyField={keyField}
-        style={style}
-        totalWidth={totalWidth}
-        isTrDisable={isTrDisable}
-        isTrHighlight={isTrHighlight}
-      />
-    )
-  }
-
-  return (
-    <div
-      {...rest}
-      className={classNames(
-        'gm-table-x',
-        {
-          'gm-table-x-empty': data.length === 0,
-          'gm-table-x-tiled': tiled
-        },
-        className
-      )}
-      onScroll={handleScroll}
-    >
-      <table {...tableProps}>
-        <TwoLevelTHead
-          headerGroups={headerGroups}
-          firstLevelHeaders={firstLevelHeaders}
-          totalWidth={totalWidth}
-        />
-        <tbody {...tableBodyProps}>
-          {_.map(rows, row =>
-            RenderRow({
-              index: row.index,
-              style: {}
-            })
-          )}
-        </tbody>
-      </table>
-      {loading && <Loading style={{ marginTop: '92px' }} />}
-      {!loading && data.length === 0 && <Empty />}
-    </div>
-  )
-}
-
-TwoLevelTableX.propTypes = {
-  columns: PropTypes.array.isRequired,
-  data: PropTypes.array.isRequired,
-  loading: PropTypes.bool,
-  SubComponent: PropTypes.func,
-  keyField: PropTypes.string,
-  tiled: PropTypes.bool,
-  isTrDisable: PropTypes.func,
-  isTrHighlight: PropTypes.func,
-  onScroll: PropTypes.func,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-TwoLevelTableX.defaultProps = {
-  keyField: 'value',
-  tiled: false,
-  isTrDisable: () => false,
-  isTrHighlight: () => false
-}
-
-export default TwoLevelTableX

package/src/hoc/two_level_header_table_x/td.js

@@ -1,126 +0,0 @@
-import classNames from 'classnames'
-import { getColumnStyle } from '../../util'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-// cell.render('Cell') 是一个react组件,如果这个组件return undefined,那就就会报错
-// 这里是为了兼容 cell.render('Cell') 返回undefined的情况
-class TdCatchErr extends React.Component {
-  state = {
-    hasError: false
-  }
-
-  static getDerivedStateFromError(error) {
-    // 捕获子组件树中的错误，返回新的 state
-    return { hasError: true }
-  }
-
-  componentDidCatch(error, errorInfo) {
-    // 静默处理错误，不打印日志
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return null
-    }
-    const children = this.props.children
-    // 如果 children 是 undefined 或 null，返回 null（React 允许返回 null）
-    if (children === undefined || children === null) {
-      return null
-    }
-    return children
-  }
-}
-
-// 创建一个包装组件，用于包装 Cell 组件的 type，确保它总是返回有效值
-// 这个组件会包装原始的 Cell 组件，如果原始组件返回 undefined，就返回 null
-const SafeCellWrapper = OriginalComponent => {
-  return function WrappedCell(props) {
-    try {
-      const result = OriginalComponent(props)
-      // 如果原始组件返回 undefined，返回 null
-      return result === undefined ? null : result
-    } catch (error) {
-      return null
-    }
-  }
-}
-
-// 错误边界组件，专门用于捕获 Cell 组件返回 undefined 的错误
-class SafeCellErrorBoundary extends React.Component {
-  state = {
-    hasError: false
-  }
-
-  static getDerivedStateFromError(error) {
-    return { hasError: true }
-  }
-
-  componentDidCatch(error, errorInfo) {
-    // 静默处理错误
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return null
-    }
-    return this.props.children
-  }
-}
-
-const Td = ({ cell, totalWidth }) => {
-  const cp = cell.getCellProps()
-  const { tdClassName } = cell.column
-  const tdProps = {
-    ...cp,
-    className: classNames('gm-table-x-td', tdClassName, {
-      'gm-table-x-fixed-left': cell.column.fixed === 'left',
-      'gm-table-x-fixed-right': cell.column.fixed === 'right'
-    }),
-    style: {
-      ...cp.style,
-      ...getColumnStyle(cell.column)
-    }
-  }
-
-  if (cell.column.fixed === 'left') {
-    // 用到 fixed，可以利用 totalLeft
-    tdProps.style.left = cell.column.totalLeft
-  } else if (cell.column.fixed === 'right') {
-    tdProps.style.right =
-      totalWidth - cell.column.totalLeft - cell.column.totalWidth
-  }
-
-  // 如果 Cell 返回 undefined，转换为 null（null 不会报错，undefined 会）
-  let cellContent = cell.render('Cell')
-
-  // cellContent 是一个 React 元素，但它的 type（组件）在渲染时可能返回 undefined
-  // 我们需要用一个包装组件来替换原始的 type，确保总是返回有效值
-  if (cellContent && React.isValidElement(cellContent)) {
-    // 创建一个新的 React 元素，用包装组件替换原始的 type
-    const OriginalComponent = cellContent.type
-    const WrappedComponent = SafeCellWrapper(OriginalComponent)
-    cellContent = React.createElement(
-      SafeCellErrorBoundary,
-      null,
-      React.createElement(WrappedComponent, cellContent.props)
-    )
-  } else if (cellContent === undefined || cellContent === null) {
-    cellContent = null
-  }
-
-  return (
-    <td {...tdProps}>
-      <TdCatchErr>{cellContent}</TdCatchErr>
-    </td>
-  )
-}
-
-Td.whyDidYouRender = true
-
-Td.propTypes = {
-  cell: PropTypes.object.isRequired,
-  totalWidth: PropTypes.number.isRequired
-}
-
-export default React.memo(Td)

package/src/hoc/two_level_header_table_x/thead.js

@@ -1,293 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import classNames from 'classnames'
-import Th from '../../base/th'
-import { getColumnStyle, SortHeader } from '../../util'
-
-/**
- * 二级表头组件
- * 渲染两级表头：
- * - 第一行：一级表头（有子列的显示一级表头，没有子列的占两行）
- * - 第二行：二级表头（只有有子列的一级表头才显示）
- */
-const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
-  const hasNestedHeaders = headerGroups.length > 1
-  const firstLevelGroup = hasNestedHeaders ? headerGroups[0] : null
-  const secondLevelGroup = hasNestedHeaders ? headerGroups[1] : headerGroups[0]
-
-  // 构建第一级表头的渲染信息
-  const firstLevelCells = []
-  let secondLevelIndex = 0 // 在第二级表头中的索引
-
-  firstLevelHeaders.forEach((firstLevelHeader, idx) => {
-    if (firstLevelHeader.hasSubColumns) {
-      // 有子列：从第二级表头中获取对应的列
-      const subColumnCount = firstLevelHeader.subColumnCount
-      const subColumns = secondLevelGroup.headers.slice(
-        secondLevelIndex,
-        secondLevelIndex + subColumnCount
-      )
-
-      // 获取对应的第一级分组列对象
-      const groupColumn = firstLevelGroup
-        ? firstLevelGroup.headers.find(col => {
-            // 通过 id 或 Header 匹配
-            return (
-              col.id === firstLevelHeader.id ||
-              (col.columns && col.columns.length === subColumnCount)
-            )
-          }) || firstLevelGroup.headers[idx]
-        : null
-
-      // 计算分组列的总宽度（所有子列的宽度之和）
-      let totalSubWidth = 0
-      subColumns.forEach(subCol => {
-        const style = getColumnStyle(subCol)
-        const width = parseFloat(style.width) || subCol.totalWidth || 0
-        totalSubWidth += width
-      })
-
-      firstLevelCells.push({
-        type: 'group',
-        header: firstLevelHeader,
-        colSpan: subColumnCount,
-        subColumns: subColumns,
-        totalWidth: totalSubWidth, // 添加总宽度
-        column: groupColumn,
-        secondLevelStartIndex: secondLevelIndex
-      })
-
-      secondLevelIndex += subColumnCount
-    } else {
-      let singleColumn = null
-
-      // 优先从 firstLevelGroup 中查找单列（用于 getHeaderProps 等）
-      if (firstLevelGroup) {
-        singleColumn = firstLevelGroup.headers.find(col => {
-          // 通过 id 或 accessor 匹配
-          const matchId = col.id === firstLevelHeader.id
-          const matchAccessor =
-            col.accessor === firstLevelHeader.accessor ||
-            (typeof col.accessor === 'function' &&
-              typeof firstLevelHeader.accessor === 'function' &&
-              col.accessor.toString() === firstLevelHeader.accessor.toString())
-          return matchId || matchAccessor
-        })
-      }
-
-      // 如果 firstLevelGroup 中没找到，从 secondLevelGroup 获取
-      if (!singleColumn) {
-        singleColumn = secondLevelGroup.headers[secondLevelIndex]
-      }
-      firstLevelCells.push({
-        type: 'single',
-        header: firstLevelHeader,
-        colSpan: 1,
-        rowSpan: 2, // 明确设置为 2，占两行
-        column: singleColumn,
-        secondLevelIndex: secondLevelIndex
-      })
-
-      secondLevelIndex += 1
-    }
-  })
-
-  return (
-    <thead className='gm-table-x-thead gm-table-x-thead-two-level'>
-      {/* 第一级表头行 */}
-      <tr className='gm-table-x-tr gm-table-x-tr-first-level'>
-        {firstLevelCells.map((cell, idx) => {
-          const { column, header, colSpan, rowSpan, type } = cell
-
-          // 对于分组列，使用分组列对象；对于单列，使用单列对象
-          const headerColumn = column
-          const hp = headerColumn ? headerColumn.getHeaderProps() : {}
-          const { thClassName, style } = headerColumn || {}
-
-          // 计算样式
-          let cellStyle = {
-            ...hp.style,
-            ...style
-          }
-
-          const fixed =
-            type === 'group'
-              ? header.fixed // 分组列直接使用 header.fixed，不 fallback 到 headerColumn
-              : headerColumn?.fixed !== undefined
-              ? headerColumn.fixed
-              : header.fixed
-
-          // 判断是否是最后一列（通过检查是否是 firstLevelCells 的最后一个元素）
-          const isLastCell = idx === firstLevelCells.length - 1
-
-          if (type === 'group') {
-            const { flex, width, minWidth, maxWidth, ...restStyle } = cellStyle
-            cellStyle = restStyle
-          } else if (headerColumn) {
-            const columnStyle = getColumnStyle(headerColumn)
-            const { flex, ...restColumnStyle } = columnStyle
-            cellStyle = {
-              ...cellStyle,
-              ...restColumnStyle // 只使用 width 和 maxWidth，不使用 flex
-            }
-
-            // 如果有固定列，确保宽度不被压缩
-            if (fixed === 'left' || fixed === 'right') {
-              const width = restColumnStyle.width
-              if (width) {
-                cellStyle.minWidth = width
-              }
-            }
-          }
-          if (fixed === 'left') {
-            if (
-              type === 'group' &&
-              cell.subColumns &&
-              cell.subColumns.length > 0
-            ) {
-              cellStyle.left = cell.subColumns[0].totalLeft
-            } else if (headerColumn) {
-              cellStyle.left = headerColumn.totalLeft
-            }
-          } else if (fixed === 'right') {
-            // 对于分组列，使用最后一个子列的位置
-            if (
-              type === 'group' &&
-              cell.subColumns &&
-              cell.subColumns.length > 0
-            ) {
-              const lastSubCol = cell.subColumns[cell.subColumns.length - 1]
-              // 如果是最后一列，直接设置 right: 0
-              if (isLastCell) {
-                cellStyle.right = 0
-              } else {
-                cellStyle.right =
-                  totalWidth - lastSubCol.totalLeft - lastSubCol.totalWidth
-              }
-            } else if (headerColumn) {
-              // 如果是最后一列，直接设置 right: 0
-              if (isLastCell) {
-                cellStyle.right = 0
-              } else {
-                cellStyle.right =
-                  totalWidth - headerColumn.totalLeft - headerColumn.totalWidth
-              }
-            }
-          }
-          const {
-            colSpan: hpColSpan,
-            rowSpan: hpRowSpan,
-            key: hpKey,
-            ...restHp
-          } = hp || {}
-          const finalRowSpan =
-            rowSpan !== undefined ? Number(rowSpan) : undefined
-          const finalColSpan =
-            colSpan !== undefined
-              ? Number(colSpan)
-              : hpColSpan !== undefined
-              ? Number(hpColSpan)
-              : undefined
-
-          const thProps = {
-            ...restHp,
-            ...(finalColSpan !== undefined && { colSpan: finalColSpan }),
-            ...(finalRowSpan !== undefined && { rowSpan: finalRowSpan }), // 只有定义了才添加
-            className: classNames(
-              'gm-table-x-th',
-              'gm-table-x-th-first-level',
-              hp?.className,
-              thClassName,
-              {
-                'gm-table-x-fixed-left': fixed === 'left',
-                'gm-table-x-fixed-right': fixed === 'right'
-              }
-            ),
-            style: cellStyle
-          }
-
-          // 生成唯一的 key：结合 id/accessor 和索引，确保即使 id/accessor 相同，key 也是唯一的
-          // 如果有 hpKey，也加上索引以确保唯一性（因为 hpKey 可能也会重复）
-          const baseKey = hpKey || header.id || header.accessor
-          const headerKey = baseKey ? `${baseKey}-${idx}` : `header-${idx}`
-          return (
-            <th key={headerKey} {...thProps}>
-              {typeof header.Header === 'function' ? (
-                <header.Header />
-              ) : (
-                header.Header
-              )}
-              {headerColumn?.canSort && (
-                <SortHeader
-                  {...headerColumn.getSortByToggleProps()}
-                  type={
-                    headerColumn.isSorted
-                      ? headerColumn.isSortedDesc
-                        ? 'desc'
-                        : 'asc'
-                      : null
-                  }
-                />
-              )}
-            </th>
-          )
-        })}
-      </tr>
-
-      {/* 第二级表头行（只有有子列的情况才显示） */}
-      {hasNestedHeaders && secondLevelGroup && (
-        <tr className='gm-table-x-tr gm-table-x-tr-second-level'>
-          {secondLevelGroup.headers.map((column, idx) => {
-            // 找到这个列对应的第一级表头
-            const correspondingFirstLevel = firstLevelCells.find(cell => {
-              if (cell.type === 'single') {
-                return cell.secondLevelIndex === idx
-              } else if (cell.type === 'group') {
-                return (
-                  idx >= cell.secondLevelStartIndex &&
-                  idx < cell.secondLevelStartIndex + cell.colSpan
-                )
-              }
-              return false
-            })
-
-            if (
-              correspondingFirstLevel &&
-              correspondingFirstLevel.type === 'single'
-            ) {
-              return null
-            }
-            // 生成唯一的 key：结合 id/accessor 和索引，确保即使 id/accessor 相同，key 也是唯一的
-            const columnKey = column.id
-              ? `${column.id}-${idx}`
-              : column.accessor
-              ? `${column.accessor}-${idx}`
-              : `col-${idx}`
-            return (
-              <Th
-                key={columnKey}
-                column={{
-                  ...column,
-                  // column.fixed 已经在 transformColumnsForTwoLevel 中正确设置
-                  thClassName: classNames(
-                    column.thClassName,
-                    'gm-table-x-th-second-level'
-                  )
-                }}
-                totalWidth={totalWidth}
-              />
-            )
-          })}
-        </tr>
-      )}
-    </thead>
-  )
-}
-
-TwoLevelTHead.propTypes = {
-  headerGroups: PropTypes.array.isRequired,
-  firstLevelHeaders: PropTypes.array.isRequired,
-  totalWidth: PropTypes.number.isRequired
-}
-
-export default React.memo(TwoLevelTHead)

package/src/hoc/two_level_header_table_x/tr.js

@@ -1,53 +0,0 @@
-import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-import Td from './td'
-
-const Tr = ({
-  row,
-  SubComponent,
-  keyField,
-  style,
-  totalWidth,
-  isTrDisable,
-  isTrHighlight
-}) => {
-  const props = {
-    ...row.getRowProps(),
-    style,
-    className: classNames('gm-table-x-tr', {
-      'gm-table-x-tr-disable': isTrDisable(row.original, row.index),
-      'gm-table-x-tr-highlight': isTrHighlight(row.original, row.index),
-      'gm-table-x-tr-odd': row.index % 2 === 0,
-      'gm-table-x-tr-even': row.index % 2 !== 0
-    })
-  }
-
-  // 目前视为了 sortable 用。值可能是 undefined，keyField 没作用的情况
-  const dataId = row.original[keyField]
-
-  return (
-    <>
-      <tr data-id={dataId} {...props}>
-        {row.cells.map((cell, cellIndex) => (
-          <Td key={cellIndex} cell={cell} totalWidth={totalWidth} />
-        ))}
-      </tr>
-      {SubComponent && SubComponent(row)}
-    </>
-  )
-}
-
-Tr.whyDidYouRender = true
-
-Tr.propTypes = {
-  row: PropTypes.object.isRequired,
-  SubComponent: PropTypes.func,
-  keyField: PropTypes.string.isRequired,
-  style: PropTypes.object.isRequired,
-  totalWidth: PropTypes.number.isRequired,
-  isTrDisable: PropTypes.func,
-  isTrHighlight: PropTypes.func
-}
-
-export default React.memo(Tr)