office-viewer 0.2.0 → 0.3.0

package/lib/excel/render/Line.d.ts

@@ -0,0 +1,6 @@
+export interface Line {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}

package/lib/excel/render/Rect.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 矩形定义
+ */
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * 判断点是否在矩形内
+ */
+export declare function pointInRect(x: number, y: number, rect: Rect): boolean;
+/**
+ * 判断两个矩形是否相交
+ */
+export declare function rectIntersect(rect1: Rect, rect2: Rect): boolean;

package/lib/excel/render/Rect.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 判断点是否在矩形内
+ */
+function pointInRect(x, y, rect) {
+    return (x >= rect.x &&
+        x <= rect.x + rect.width &&
+        y >= rect.y &&
+        y <= rect.y + rect.height);
+}
+/**
+ * 判断两个矩形是否相交
+ */
+function rectIntersect(rect1, rect2) {
+    return (rect1.x < rect2.x + rect2.width &&
+        rect1.x + rect1.width > rect2.x &&
+        rect1.y < rect2.y + rect2.height &&
+        rect1.y + rect1.height > rect2.y);
+}
+
+exports.pointInRect = pointInRect;
+exports.rectIntersect = rectIntersect;

package/lib/excel/render/ScrollBar.d.ts

@@ -0,0 +1,54 @@
+/**
+ * 模拟滚动条，目前暂时只支持浏览模式，也就是最大高宽是固定的
+ */
+import type { Workbook } from '../Workbook';
+export type ScrollBarOptions = {
+    /**
+     * 是否自动隐藏
+     */
+    autoHide: boolean;
+    scrollBarSize: number;
+};
+export declare class ScrollBar {
+    /**
+     * 容器
+     */
+    container: HTMLElement;
+    /**
+     * 当前 workbook
+     */
+    workbook: Workbook;
+    /**
+     * 垂直滚动条的轨道
+     */
+    yScrollBarTruck: HTMLElement;
+    /**
+     * 定义垂直滚动条最大高度
+     */
+    yScrollBarTotal: HTMLElement;
+    /**
+     * 垂直滚动条内容区域
+     */
+    yScrollBarContent: HTMLElement;
+    /**
+     * 水平滚动条的轨道
+     */
+    xScrollBarTruck: HTMLElement;
+    /**
+     * 水平滚动条最大宽度
+     */
+    xScrollBarTotal: HTMLElement;
+    /**
+     * 水平滚动条
+     */
+    xScrollBarContent: HTMLElement;
+    /**
+     * 滚动条配置项
+     */
+    scrollOptions: ScrollBarOptions;
+    constructor(container: HTMLElement, workbook: Workbook, scrollOptions?: Partial<ScrollBarOptions>);
+    /**
+     * 同步滚动条
+     */
+    sync(): void;
+}

package/lib/excel/render/ScrollBar.js

@@ -0,0 +1,141 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var H = require('../../util/H.js');
+
+/**
+ * 模拟滚动条，目前暂时只支持浏览模式，也就是最大高宽是固定的
+ */
+var defaultOptions = {
+    autoHide: true,
+    scrollBarSize: 15
+};
+var ScrollBar = /** @class */ (function () {
+    function ScrollBar(container, workbook, scrollOptions) {
+        var _this = this;
+        this.container = container;
+        this.workbook = workbook;
+        this.scrollOptions = tslib.__assign(tslib.__assign({}, defaultOptions), scrollOptions);
+        workbook.uiEvent.on('AFTER_SCROLL', function () {
+            _this.sync();
+        });
+        workbook.uiEvent.on('SWITCH_SHEET', function () {
+            _this.sync();
+        });
+        var scrollBarSize = this.scrollOptions.scrollBarSize;
+        container.style.position = 'relative';
+        var yScrollBarContent = H.H('div', {
+            className: 'ov-excel-scrollbar-content-y',
+            style: {
+                width: "".concat(scrollBarSize, "px")
+            }
+        });
+        this.yScrollBarContent = yScrollBarContent;
+        yScrollBarContent.addEventListener('scroll', function (event) {
+            var currentSheet = _this.workbook.getActiveSheet();
+            var sheetScrollTop = currentSheet.getScrollTop();
+            var scrollBarTop = yScrollBarContent.scrollTop;
+            if (Math.round(sheetScrollTop) !== Math.round(scrollBarTop)) {
+                currentSheet.setScrollTop(yScrollBarContent.scrollTop);
+                _this.workbook.uiEvent.emit('SCROLL_Y', yScrollBarContent.scrollTop);
+            }
+            event.preventDefault();
+            event.stopPropagation();
+        });
+        // 避免误触发选中事件
+        yScrollBarContent.addEventListener('mousedown', function (event) {
+            event.stopPropagation();
+        });
+        var yScrollBarTotal = H.H('div', {
+            className: 'ov-excel-scrollbar-total-y',
+            style: {
+                width: "".concat(scrollBarSize, "px")
+            },
+            parent: yScrollBarContent
+        });
+        this.yScrollBarTotal = yScrollBarTotal;
+        var yScrollBarTruck = H.H('div', {
+            className: 'ov-excel-scrollbar-y',
+            style: {
+                width: "".concat(scrollBarSize, "px")
+            },
+            parent: container
+        }, yScrollBarContent);
+        this.yScrollBarTruck = yScrollBarTruck;
+        var xScrollBarContent = H.H('div', {
+            className: 'ov-excel-scrollbar-content-x',
+            style: {
+                height: "".concat(scrollBarSize, "px")
+            }
+        });
+        this.xScrollBarContent = xScrollBarContent;
+        xScrollBarContent.addEventListener('scroll', function (event) {
+            var currentSheet = _this.workbook.getActiveSheet();
+            var sheetScrollLeft = currentSheet.getScrollLeft();
+            var scrollBarLeft = yScrollBarContent.scrollTop;
+            if (Math.round(sheetScrollLeft) !== Math.round(scrollBarLeft)) {
+                currentSheet.setScrollLeft(xScrollBarContent.scrollLeft);
+                _this.workbook.uiEvent.emit('SCROLL_X', xScrollBarContent.scrollLeft);
+            }
+            event.preventDefault();
+            event.stopPropagation();
+        });
+        // 避免误触发选中事件
+        xScrollBarContent.addEventListener('mousedown', function (event) {
+            event.stopPropagation();
+        });
+        var xScrollBarTotal = H.H('div', {
+            className: 'ov-excel-scrollbar-total-x',
+            style: {
+                height: "".concat(scrollBarSize, "px")
+            },
+            parent: xScrollBarContent
+        });
+        this.xScrollBarTotal = xScrollBarTotal;
+        var xScrollBarTruck = H.H('div', {
+            className: 'ov-excel-scrollbar-x',
+            style: {
+                height: "".concat(scrollBarSize, "px")
+            },
+            parent: container
+        }, xScrollBarContent);
+        this.xScrollBarTruck = xScrollBarTruck;
+        this.sync();
+    }
+    /**
+     * 同步滚动条
+     */
+    ScrollBar.prototype.sync = function () {
+        var currentSheet = this.workbook.getActiveSheet();
+        var scrollBarSize = this.scrollOptions.scrollBarSize;
+        var _a = this.workbook.getViewpointSize(), width = _a.width, height = _a.height;
+        var scrollLeft = currentSheet.getScrollLeft();
+        var scrollTop = currentSheet.getScrollTop();
+        var _b = currentSheet.getRowColSize(), rowHeaderWidth = _b.rowHeaderWidth, colHeaderHeight = _b.colHeaderHeight;
+        this.xScrollBarContent.style.width = "".concat(width, "px");
+        this.yScrollBarContent.style.height = "".concat(height, "px");
+        var totalWidth = Math.max(width + scrollLeft, currentSheet.getTotalWidth() + rowHeaderWidth + scrollBarSize);
+        var totalHeight = Math.max(height + scrollTop, currentSheet.getTotalHeight() + colHeaderHeight + scrollBarSize);
+        if (totalWidth <= width) {
+            this.xScrollBarTruck.style.display = 'none';
+        }
+        else {
+            this.xScrollBarTruck.style.display = 'block';
+        }
+        if (totalHeight <= height) {
+            this.yScrollBarTruck.style.display = 'none';
+        }
+        else {
+            this.yScrollBarTruck.style.display = 'block';
+        }
+        this.xScrollBarTotal.style.width = "".concat(totalWidth, "px");
+        this.xScrollBarContent.scrollLeft = scrollLeft;
+        this.yScrollBarTotal.style.height = "".concat(totalHeight, "px");
+        this.yScrollBarContent.scrollTop = scrollTop;
+    };
+    return ScrollBar;
+}());
+
+exports.ScrollBar = ScrollBar;

package/lib/excel/render/SelectionCanvas.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 选区使用的 canvas，独立是为了提高渲染性能，在选取变的时候只有这里变化
+ */
+import { Workbook } from '../Workbook';
+import { ExcelRenderOptions } from '../sheet/ExcelRenderOptions';
+import { IDataProvider } from '../types/IDataProvider';
+import { Canvas } from './Canvas';
+import { SheetSelection } from './selection/SheetSelection';
+export declare class SelectionCanvas extends Canvas {
+    workbook: Workbook;
+    dataProvider: IDataProvider;
+    renderOptions: ExcelRenderOptions;
+    /**
+     * 选区的信息
+     */
+    selection?: SheetSelection;
+    /**
+     * 临时行线网格线位置
+     */
+    tmpRowGridLineY?: number;
+    /**
+     * 临时列线网格线位置
+     */
+    tmpColGridLineX?: number;
+    constructor(workbook: Workbook, dataProvider: IDataProvider);
+    handleChangeSelection(selection: SheetSelection): void;
+    dragRowGridLine(y: number): void;
+    dragColGridLine(x: number): void;
+    clearTmpGridLine(): void;
+    draw(): void;
+    clearSelection(): void;
+    drawTmpGridLine(): void;
+}

package/lib/excel/render/SelectionCanvas.js

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var Canvas = require('./Canvas.js');
+var drawCellRanges = require('./selection/drawCellRanges.js');
+
+/**
+ * 选区使用的 canvas，独立是为了提高渲染性能，在选取变的时候只有这里变化
+ */
+var SelectionCanvas = /** @class */ (function (_super) {
+    tslib.__extends(SelectionCanvas, _super);
+    function SelectionCanvas(workbook, dataProvider) {
+        var _this = this;
+        var _a = workbook.getViewpointSize(), width = _a.width, height = _a.height;
+        _this = _super.call(this, width, height, workbook.renderOptions.scale || 1, 'ov-excel-selection-canvas ov-excel-canvas') || this;
+        _this.workbook = workbook;
+        _this.renderOptions = workbook.renderOptions;
+        _this.dataProvider = dataProvider;
+        workbook.uiEvent.on('CHANGE_SELECTION', _this.handleChangeSelection.bind(_this));
+        workbook.uiEvent.on('AFTER_SCROLL', _this.draw.bind(_this));
+        workbook.uiEvent.on('SWITCH_SHEET', _this.draw.bind(_this));
+        workbook.uiEvent.on('DRAG_ROW_GRID_LINE', _this.dragRowGridLine.bind(_this));
+        workbook.uiEvent.on('DRAG_COL_GRID_LINE', _this.dragColGridLine.bind(_this));
+        workbook.uiEvent.on('DRAG_COL_GRID_LINE_END', function (col, width) {
+            var sheet = _this.workbook.getActiveSheet();
+            sheet.setColWidth(col, width);
+            _this.clearTmpGridLine();
+            workbook.uiEvent.emit('UPDATE_COL_WIDTH', col, width);
+            _this.draw();
+        });
+        workbook.uiEvent.on('DRAG_ROW_GRID_LINE_END', function (row, height) {
+            var sheet = _this.workbook.getActiveSheet();
+            sheet.setRowHeight(row, height);
+            _this.clearTmpGridLine();
+            workbook.uiEvent.emit('UPDATE_ROW_HEIGHT', row, height);
+            _this.draw();
+        });
+        return _this;
+    }
+    SelectionCanvas.prototype.handleChangeSelection = function (selection) {
+        this.selection = selection;
+        this.draw();
+    };
+    SelectionCanvas.prototype.dragRowGridLine = function (y) {
+        if (y !== this.tmpRowGridLineY) {
+            this.tmpRowGridLineY = y;
+            this.draw();
+        }
+    };
+    SelectionCanvas.prototype.dragColGridLine = function (x) {
+        if (x !== this.tmpColGridLineX) {
+            this.tmpColGridLineX = x;
+            this.draw();
+        }
+    };
+    SelectionCanvas.prototype.clearTmpGridLine = function () {
+        this.tmpRowGridLineY = 0;
+        this.tmpColGridLineX = 0;
+        this.draw();
+    };
+    SelectionCanvas.prototype.draw = function () {
+        this.clear();
+        this.drawTmpGridLine();
+        if (this.selection) {
+            drawCellRanges.drawCellRanges(this.workbook, this, this.selection);
+        }
+    };
+    SelectionCanvas.prototype.clearSelection = function () {
+        this.selection = undefined;
+        this.draw();
+    };
+    SelectionCanvas.prototype.drawTmpGridLine = function () {
+        var _a = this.workbook.getViewpointSize(), width = _a.width, height = _a.height;
+        if (this.tmpColGridLineX) {
+            this.drawLine({
+                x1: this.tmpColGridLineX,
+                y1: 0,
+                x2: this.tmpColGridLineX,
+                y2: height
+            }, this.renderOptions.dragGridLineColor);
+        }
+        if (this.tmpRowGridLineY) {
+            this.drawLine({
+                x1: 0,
+                y1: this.tmpRowGridLineY,
+                x2: width,
+                y2: this.tmpRowGridLineY
+            }, this.renderOptions.dragGridLineColor);
+        }
+    };
+    return SelectionCanvas;
+}(Canvas.Canvas));
+
+exports.SelectionCanvas = SelectionCanvas;

package/lib/excel/render/SheetCanvas.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 内容区 Canvas 封装，方便图形绘制
+ */
+import type { Workbook } from '../Workbook';
+import { IDataProvider } from '../types/IDataProvider';
+import { CellInfo } from '../types/CellInfo';
+import { Canvas } from './Canvas';
+import { LinkPosition } from './cell/LinkPosition';
+import { CellInfoWithSize } from './cell/CellInfoWithSize';
+import { ExcelRender } from './ExcelRender';
+export interface Line {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
+export declare class SheetCanvas extends Canvas {
+    workbook: Workbook;
+    dataProvider: IDataProvider;
+    debugFontBoundingBox: boolean;
+    constructor(workbook: Workbook, dataProvider: IDataProvider);
+    /**
+     * 绘制单元格
+     * @param font
+     * @param text
+     * @param x
+     * @param y
+     * @param width
+     * @param height
+     */
+    drawCell(excelRender: ExcelRender, cellInfo: CellInfo, x: number, y: number, width: number, height: number, indentSize: number, padding: number, needClear?: boolean, linkPositionCache?: LinkPosition[]): void;
+    autoClip(cellInfoMap: Map<string, CellInfoWithSize>): void;
+}

package/lib/excel/render/SheetCanvas.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var Canvas = require('./Canvas.js');
+var drawCell = require('./cell/drawCell.js');
+var autoClip = require('./cell/autoClip.js');
+
+/**
+ * 内容区 Canvas 封装，方便图形绘制
+ */
+var SheetCanvas = /** @class */ (function (_super) {
+    tslib.__extends(SheetCanvas, _super);
+    function SheetCanvas(workbook, dataProvider) {
+        var _this = this;
+        var _a = workbook.getViewpointSize(), width = _a.width, height = _a.height;
+        _this = _super.call(this, width, height, workbook.renderOptions.scale || 1, 'ov-excel-content-canvas ov-excel-canvas') || this;
+        // 调试的时候开启，会绘制文字的包围盒
+        _this.debugFontBoundingBox = false;
+        _this.workbook = workbook;
+        _this.dataProvider = dataProvider;
+        return _this;
+    }
+    /**
+     * 绘制单元格
+     * @param font
+     * @param text
+     * @param x
+     * @param y
+     * @param width
+     * @param height
+     */
+    SheetCanvas.prototype.drawCell = function (excelRender, cellInfo, x, y, width, height, indentSize, padding, needClear, linkPositionCache) {
+        if (needClear === void 0) { needClear = false; }
+        if (linkPositionCache === void 0) { linkPositionCache = []; }
+        var sheet = this.workbook.getActiveSheet();
+        drawCell.drawCell(excelRender, sheet, this, this.dataProvider, cellInfo, x, y, width, height, indentSize, padding, needClear, linkPositionCache);
+    };
+    SheetCanvas.prototype.autoClip = function (cellInfoMap) {
+        autoClip.autoClip(this.ctx, this.dataProvider, cellInfoMap);
+    };
+    return SheetCanvas;
+}(Canvas.Canvas));
+
+exports.SheetCanvas = SheetCanvas;

package/lib/excel/render/__test__/autoWrapText.test.d.ts

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

package/lib/excel/render/__test__/tokenizer.test.d.ts

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

package/lib/excel/render/autoFilter/AutoFilterIconUI.d.ts

@@ -0,0 +1,33 @@
+import { CT_AutoFilter } from '../../../openxml/ExcelTypes';
+import { Sheet } from '../../sheet/Sheet';
+import { RangeRef } from '../../types/RangeRef';
+import { AutoFilterMenuUI } from './AutoFilterMenuUI';
+export declare class AutoFilterIconUI {
+    /**
+     * 过滤图标容器
+     */
+    filterIconContainer: HTMLElement;
+    /**
+     * 过滤图标
+     */
+    filterIcon: HTMLElement;
+    /**
+     * 过滤界面
+     */
+    filterMenu: AutoFilterMenuUI;
+    sheet: Sheet;
+    rangeRef: RangeRef;
+    colIndex: number;
+    autoFilter: CT_AutoFilter;
+    constructor(sheet: Sheet, dataContainer: HTMLElement, autoFilter: CT_AutoFilter, rangeRef: RangeRef, colIndex: number, fid: string, headerRowCount?: number);
+    /**
+     * 更新过滤图标
+     */
+    syncFilterIcon(): void;
+    getFilterIcon(): string;
+    updatePosition(x: number, y: number, height: number, width: number): void;
+    handleClick(): void;
+    showMenu(): void;
+    hideMenu(): void;
+    hide(): void;
+}

package/lib/excel/render/autoFilter/AutoFilterIconUI.js

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var H = require('../../../util/H.js');
+var onClickOutside = require('../../../util/onClickOutside.js');
+var Icons = require('../Icons.js');
+var AutoFilterMenuUI = require('./AutoFilterMenuUI.js');
+var hasFilterColumn = require('./filterColumn/hasFilterColumn.js');
+var getColumnSortOrder = require('./sortState/getColumnSortOrder.js');
+
+var AutoFilterIconUI = /** @class */ (function () {
+    function AutoFilterIconUI(sheet, dataContainer, autoFilter, rangeRef, colIndex, fid, headerRowCount) {
+        if (headerRowCount === void 0) { headerRowCount = 1; }
+        var _this = this;
+        this.sheet = sheet;
+        this.rangeRef = rangeRef;
+        this.colIndex = colIndex;
+        this.autoFilter = autoFilter;
+        var filterIconContainer = H.H('div', {
+            className: 'ov-excel-auto-filter-icon-container',
+            parent: dataContainer
+        });
+        filterIconContainer.dataset.fid = fid;
+        this.filterIconContainer = filterIconContainer;
+        // 默认隐藏
+        filterIconContainer.style.display = 'none';
+        var filterIcon = H.H('div', {
+            className: 'ov-excel-auto-filter-icon',
+            parent: filterIconContainer
+        });
+        filterIcon.innerHTML = this.getFilterIcon();
+        this.filterIcon = filterIcon;
+        this.filterMenu = new AutoFilterMenuUI.AutoFilterMenuUI(this, filterIconContainer, sheet, autoFilter, rangeRef, colIndex, headerRowCount);
+        filterIcon.addEventListener('click', this.handleClick.bind(this));
+        onClickOutside.onClickOutside(filterIconContainer, function () {
+            _this.hideMenu();
+        });
+    }
+    /**
+     * 更新过滤图标
+     */
+    AutoFilterIconUI.prototype.syncFilterIcon = function () {
+        this.filterIcon.innerHTML = this.getFilterIcon();
+    };
+    AutoFilterIconUI.prototype.getFilterIcon = function () {
+        var columnSortState = getColumnSortOrder.getColumnSortOrder(this.colIndex, this.rangeRef, this.autoFilter.sortState);
+        var filterIconSrc = Icons.Icons.filter;
+        var filterColumn = hasFilterColumn.hasFilterColumn(this.autoFilter, this.colIndex);
+        if (filterColumn) {
+            filterIconSrc = Icons.Icons.hasFilter;
+        }
+        if (columnSortState === 'asc') {
+            filterIconSrc = Icons.Icons.filterUp;
+        }
+        else if (columnSortState === 'desc') {
+            filterIconSrc = Icons.Icons.filterDown;
+        }
+        return filterIconSrc;
+    };
+    AutoFilterIconUI.prototype.updatePosition = function (x, y, height, width) {
+        this.filterIconContainer.style.display = 'block';
+        this.filterIconContainer.style.left = "".concat(x, "px");
+        this.filterIconContainer.style.top = "".concat(y, "px");
+        this.filterIconContainer.style.width = "".concat(width, "px");
+        this.filterIconContainer.style.height = "".concat(height, "px");
+        this.filterIcon.style.width = "".concat(height - 4, "px");
+    };
+    AutoFilterIconUI.prototype.handleClick = function () {
+        var lastAutoFilter = this.sheet.getLastAutoFilterIcon();
+        if (lastAutoFilter) {
+            lastAutoFilter.hideMenu();
+        }
+        this.sheet.setLastAutoFilterIcon(this);
+        this.showMenu();
+    };
+    AutoFilterIconUI.prototype.showMenu = function () {
+        this.filterMenu.show();
+    };
+    AutoFilterIconUI.prototype.hideMenu = function () {
+        this.filterMenu.hide();
+    };
+    AutoFilterIconUI.prototype.hide = function () {
+        this.filterIconContainer.style.display = 'none';
+    };
+    return AutoFilterIconUI;
+}());
+
+exports.AutoFilterIconUI = AutoFilterIconUI;

package/lib/excel/render/autoFilter/AutoFilterMenuUI.d.ts

@@ -0,0 +1,13 @@
+import { CT_AutoFilter } from '../../../openxml/ExcelTypes';
+import { Sheet } from '../../sheet/Sheet';
+import { RangeRef } from '../../types/RangeRef';
+import type { AutoFilterIconUI } from './AutoFilterIconUI';
+export declare class AutoFilterMenuUI {
+    menuContainer: HTMLElement;
+    sheet: Sheet;
+    autoFilter: CT_AutoFilter;
+    colIndex: number;
+    constructor(autoFilterIcon: AutoFilterIconUI, container: HTMLElement, sheet: Sheet, autoFilter: CT_AutoFilter, rangeRef: RangeRef, colIndex: number, headerRowCount?: number);
+    hide(): void;
+    show(): void;
+}

package/lib/excel/render/autoFilter/AutoFilterMenuUI.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var H = require('../../../util/H.js');
+var FilterColumnUI = require('./filterColumn/FilterColumnUI.js');
+var SortStateUI = require('./sortState/SortStateUI.js');
+
+var AutoFilterMenuUI = /** @class */ (function () {
+    function AutoFilterMenuUI(autoFilterIcon, container, sheet, autoFilter, rangeRef, colIndex, headerRowCount) {
+        if (headerRowCount === void 0) { headerRowCount = 1; }
+        var menuContainer = H.H('div', {
+            className: 'ov-excel-auto-filter-menu',
+            parent: container
+        });
+        this.menuContainer = menuContainer;
+        new SortStateUI.SortStateUI(autoFilterIcon, menuContainer, sheet, autoFilter, rangeRef, colIndex, headerRowCount);
+        new FilterColumnUI.FilterColumnUI(autoFilterIcon, menuContainer, sheet, autoFilter, rangeRef, colIndex, headerRowCount);
+        this.autoFilter = autoFilter;
+        this.colIndex = colIndex;
+        this.sheet = sheet;
+        menuContainer.addEventListener('mousedown', function (e) {
+            e.stopPropagation();
+        });
+        menuContainer.addEventListener('wheel', function (e) {
+            e.stopPropagation();
+        });
+    }
+    AutoFilterMenuUI.prototype.hide = function () {
+        this.menuContainer.style.display = 'none';
+    };
+    AutoFilterMenuUI.prototype.show = function () {
+        this.menuContainer.style.display = 'flex';
+    };
+    return AutoFilterMenuUI;
+}());
+
+exports.AutoFilterMenuUI = AutoFilterMenuUI;