@antv/s2
Version:
effective spreadsheet render core lib
117 lines (116 loc) • 4.09 kB
TypeScript
import type { SpreadSheet } from '../../sheet-type';
declare enum StickyState {
/** 未吸顶 (表格在视口下方或已完全滚出) */
UN_STICKY = "UN_STICKY",
/** 完全吸顶 (表头固定在视口顶部) */
STICKY = "STICKY",
/** 吸顶边缘 (表格底部即将离开视口, 表头跟随滚出) */
STICKY_EDGE = "STICKY_EDGE"
}
/**
* Window 级别表头吸顶控制器
*
* 在 s2-core 层级通过双实例 + DOM 代理包装实现框架无关的表头吸顶功能
* 当表格高度超出页面可视区域时, 表头会自动吸附在视口顶部
*/
export declare class StickyHeaderController {
private spreadsheet;
/** 吸顶表头的 S2 实例 (仅渲染表头) */
private stickyS2;
/** 吸顶表头的容器 DOM */
private wrapperElement;
/** 吸顶表头 S2 的挂载容器 */
private stickyContainer;
private stickyState;
/** 解除事件监听的回调集合 */
private disposers;
/** 用户配置 */
private options;
/** 缓存的滚动容器 */
private scrollContainer;
/** 布局同步防回环锁 */
private isSyncing;
constructor(spreadsheet: SpreadSheet);
getStickyState(): StickyState;
private resolveOptions;
private init;
/**
* 创建吸顶表头容器 DOM
*/
private createDOM;
/**
* 压缩 S2 数据配置, 仅保留渲染表头的必要数据
*
* columns 中指定了列头所使用的维值的 key, 在数据项中对应的值组合起来即为一个列头
* 对于相同列头值的数据, 只保留一项即可
*/
private minimizeDataCfg;
/**
* 生成吸顶表头的 Options
*
* 当 enableInteraction 为 true 时, 保留 resize/tooltip/headerActionIcons 等配置
* 仅禁用刷选/多选等不适用于表头的交互
*/
private applyStickyOptions;
/**
* 基于主表当前配置, 生成吸顶表头的配置
*/
private toStickyConfig;
/**
* 创建吸顶 S2 实例
*
* 核心: 通过 spreadsheet.constructor 创建同类型的 S2 实例 (PivotSheet / TableSheet)
* 确保和主表使用相同的渲染逻辑
*/
private createStickyS2;
/**
* 渲染吸顶 S2 并调整到表头大小
*/
private renderStickyS2;
private getOffsetTop;
/**
* 沿 DOM 树向上查找最近的**实际正在滚动**的祖先容器
*
* 仅当某个祖先同时满足以下两个条件时才返回:
* 1. CSS overflow/overflow-y/overflow-x 为 auto | scroll | overlay
* 2. scrollHeight > clientHeight (内容确实溢出, 正在产生滚动)
*
* 这样可以跳过 Ant Tabs 等 overflow:auto 但内容未溢出的容器
*/
private getScrollParent;
private resolveScrollContainer;
private isWindowScroll;
/**
* 获取主表的位置和尺寸信息
*/
private getTableBox;
/**
* 核心: 计算三态样式并应用到吸顶容器
*
* 同时支持 window 滚动和 div 容器滚动两种场景:
* - window: 使用 position:fixed, top 为视口偏移
* - div: 使用 position:absolute, top 为相对 S2 容器的偏移
*/
private syncStyle;
private bindScrollListener;
/**
* 横向滚动同步: 主表横滑时, 吸顶 S2 的表头跟着同步横滑
* 布局变更同步: 当主表列宽/表格大小变化时, 重新渲染吸顶表头
*/
private bindSyncListeners;
/**
* 交互桥接: 监听副表的语义事件, 转译为主表的等效操作
*
* - Resize: 提取 style 应用到主表, 主表 render 后 onLayoutChange 自动同步副表
* - Sort: RANGE_SORT 是命令事件, 主表 facet 内部直接处理
* - Collapse: ROW_CELL_COLLAPSED__PRIVATE 是命令事件, PivotSheet 内部直接处理
*/
private bindInteractionBridge;
/**
* 折叠/展开后滚动到表格顶部
* 折叠操作会大幅改变表格高度, 原位置可能导致用户迷失
*/
private scrollToTableTop;
destroy(): void;
}
export {};