概述

该文档提供了代码库的概述，希望能够鼓励新的贡献者。请提出问题或鼓励我们在您认为会帮助您的地方添加更多详细信息。

说明#

公开API#

  • FixedDataTableRoot.js
    • 提供公共出口
  • FixedDataTableContainer.js
    • 组件树的顶层
    • 用Redux存储包装实际表组件
  • FixedDataTable.js
    • 对表行使用FixedDataTableBufferedRows
    • 将FixedDataTableRow用于表的表头和表尾
  • FixedDataTableCellDefault.js
    • 提供单元格
    • 默认FDT单元组件
  • FixedDataTableColumn.js
    • 提供专栏
    • 配置用于呈现标头和单元格的模板
    • 还配置列详细信息，例如宽度，可调整大小，可重新排序，固定等
  • FixedDataTableColumnGroup.js
    • 提供ColumnGroup
    • 配置渲染头的模板
    • 还配置列组是否固定

表渲染/组件树#

  • FixedDataTableBufferedRows.js
    • 呈现可见的表行（加上一些缓冲的行）
    • 使用FixedDataTableRow
  • FixedDataTableRow.js
    • 渲染一行
    • 也用于表头和表尾
    • 呈现FixedDataTableCellGroup，每个固定，滚动和fixedRight列
  • FixedDataTableCellGroup.js
    • 渲染一个包含一行单元格的div
    • 还处理单元格回收
    • 单个单元格的渲染是通过FixedDataTableCell完成的
  • FixedDataTableCell.js
    • 使用指定的单元格或标题组件渲染单个单元格
    • 处理列重新排序显示逻辑
    • 还呈现列调整大小和重新排序句柄

附加组件#

  • Scrollbar.js
    • 渲染表格的水平和垂直滚动条
    • 由FixedDataTable.js使用
  • ColumnResizerLine.js
    • 调整列大小时渲染显示的行
    • 由FixedDataTable.js使用
  • FixedDataTableColumnReorderHandle.js
    • 渲染用于重新排序列的旋钮
    • 由FixedDataTableCell.js使用

国家管理#

  • scrollAnchor.js
    • 查找垂直滚动条“锚定”
    • 滚动锚确定第一行/最后一行的索引和距表边缘的偏移量
  • computeRenderedRows.js
    • 使用滚动锚点查找视口中显示的行范围
    • 它还使用以下命令更新这些行的高度 updateRowHeight
  • updateRowHeight.js
    • 更新行高度，对其进行缓存并保持总滚动高度同步
  • columnStateHelper.js
    • 查找水平滚动偏移
    • 还管理列的重新排序和大小调整

选择器#

  • ariaAttributes.js
    • 计算要提供给我们的列，行，单元格等的aria角色和属性
  • columnTemplates.js
    • 查找单元格的属性和模板（渲染器），并将其分类为有用的格式
    • 与convertColumnElementsToData共享许多逻辑，并依赖columnWidths
    • 确实需要重构/清理/消除
  • columnWidths.js
    • 查找每列（和列组（如果存在）的宽度）
    • 还计算弯曲宽度
    • 确定最大水平滚动
  • roughHeights.js
    • 计算内容查看视口的尺寸估算值
    • 考虑滚动条的存在，因此给出最小/最大尺寸
    • 还决定缓冲行的数量
  • scrollbarsVisible.js
    • 计算滚动条状态（即，它应该可见还是不需要）
    • 还计算视口可用的高度
  • tableHeights.js
    • 计算表格的不同组件（完整表格，视口，滚动条等）的高度和偏移量

助手#

  • ReactTouchHandler.js
    • 处理触摸事件并将其转换为滚动事件
    • 由FixedDataTable.js使用
    • 半实验
  • FixedDataTableTranslateDOMPosition.js
    • 填充Facebook的translationDOMPositionXY的助手，以用于服务器端渲染
  • convertColumnElementsToData.js
    • 解析列（作为React组件传递）
    • 提供表头，表尾和内容的模板（单元格渲染器）
    • 还提取柱特定属性（如width，pureRendering等）
  • shallowEqualSelector.js
    • 创建仅在对参数进行浅等式检查失败时才重新计算的选择器
    • 用于创建我们的大多数选择器

公开API索引#

  • 表格（FixedDataTableContainer.js）
  • 单元格（FixedDataTableCellDefault.js）
  • 列（FixedDataTableColumnColumn.js）
  • ColumnGroup（FixedDataTableColumnColumnGroup.js）