zyAdmin/node_modules/vxe-table/es/table/module/keyboard/mixin.js

import XEUtils from 'xe-utils';
import { getRefElem } from '../../src/util';
import { getAbsolutePos, addClass, removeClass, hasControlKey } from '../../../ui/src/dom';
function getCheckboxRangeRows($xeTable, evnt, params, targetTrElem, trRect, offsetClientTop, moveRange) {
    const props = $xeTable;
    const reactData = $xeTable;
    const internalData = $xeTable;
    const { showOverflow } = props;
    const { fullAllDataRowIdData, isResizeCellHeight } = internalData;
    const rowOpts = $xeTable.computeRowOpts;
    const cellOpts = $xeTable.computeCellOpts;
    const defaultRowHeight = $xeTable.computeDefaultRowHeight;
    const { row } = params;
    let countHeight = 0;
    let rangeRows = [];
    let moveSize = 0;
    const isDown = moveRange > 0;
    const { scrollYLoad } = reactData;
    const { afterFullData } = internalData;
    if (isDown) {
        moveSize = offsetClientTop + moveRange;
    }
    else {
        moveSize = (trRect.height - offsetClientTop) + Math.abs(moveRange);
    }
    if (scrollYLoad) {
        const _rowIndex = $xeTable.getVTRowIndex(row);
        const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
        if (!isCustomCellHeight && showOverflow) {
            if (isDown) {
                rangeRows = afterFullData.slice(_rowIndex, _rowIndex + Math.ceil(moveSize / defaultRowHeight));
            }
            else {
                rangeRows = afterFullData.slice(_rowIndex - Math.floor(moveSize / defaultRowHeight), _rowIndex + 1);
            }
        }
        else {
            if (isDown) {
                for (let i = _rowIndex; i < afterFullData.length; i++) {
                    const item = afterFullData[i];
                    const rowid = $xeTable.getRowid(item);
                    const rowRest = fullAllDataRowIdData[rowid] || {};
                    countHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
                    rangeRows.push(item);
                    if (countHeight > moveSize) {
                        return rangeRows;
                    }
                }
            }
            else {
                for (let len = _rowIndex; len >= 0; len--) {
                    const item = afterFullData[len];
                    const rowid = $xeTable.getRowid(item);
                    const rowRest = fullAllDataRowIdData[rowid] || {};
                    countHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
                    rangeRows.push(item);
                    if (countHeight > moveSize) {
                        return rangeRows;
                    }
                }
            }
        }
    }
    else {
        const siblingProp = isDown ? 'next' : 'previous';
        while (targetTrElem && countHeight < moveSize) {
            const rowNodeRest = $xeTable.getRowNode(targetTrElem);
            if (rowNodeRest) {
                rangeRows.push(rowNodeRest.item);
                countHeight += targetTrElem.offsetHeight;
                targetTrElem = targetTrElem[`${siblingProp}ElementSibling`];
            }
        }
    }
    return rangeRows;
}
function handleMoveSelected($xeTable, evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow) {
    const internalData = $xeTable;
    const { afterFullData, visibleColumn } = internalData;
    const params = Object.assign({}, args);
    const _rowIndex = $xeTable.getVTRowIndex(params.row);
    const _columnIndex = $xeTable.getVTColumnIndex(params.column);
    evnt.preventDefault();
    if (isUpArrow && _rowIndex > 0) {
        // 移动到上一行
        params.rowIndex = _rowIndex - 1;
        params.row = afterFullData[params.rowIndex];
    }
    else if (isDwArrow && _rowIndex < afterFullData.length - 1) {
        // 移动到下一行
        params.rowIndex = _rowIndex + 1;
        params.row = afterFullData[params.rowIndex];
    }
    else if (isLeftArrow && _columnIndex) {
        // 移动到左侧单元格
        params.columnIndex = _columnIndex - 1;
        params.column = visibleColumn[params.columnIndex];
    }
    else if (isRightArrow && _columnIndex < visibleColumn.length - 1) {
        // 移动到右侧单元格
        params.columnIndex = _columnIndex + 1;
        params.column = visibleColumn[params.columnIndex];
    }
    $xeTable.scrollToRow(params.row, params.column).then(() => {
        params.cell = $xeTable.getCellElement(params.row, params.column);
        $xeTable.handleSelected(params, evnt);
    });
    return params;
}
function handleCheckboxRangeEvent($xeTable, evnt, params) {
    const internalData = $xeTable;
    const { elemStore } = internalData;
    const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
    const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
    const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
    const { column, cell } = params;
    if (column.type === 'checkbox') {
        let bodyWrapperElem = bodyScrollElem;
        if (leftScrollElem && column.fixed === 'left') {
            bodyWrapperElem = leftScrollElem;
        }
        else if (rightScrollElem && column.fixed === 'right') {
            bodyWrapperElem = rightScrollElem;
        }
        if (!bodyWrapperElem) {
            return;
        }
        const bodyRect = bodyWrapperElem.getBoundingClientRect();
        const el = $xeTable.$refs.refElem;
        const disX = evnt.clientX;
        const disY = evnt.clientY;
        const checkboxRangeElem = bodyWrapperElem.querySelector('.vxe-table--checkbox-range');
        const trElem = cell.parentNode;
        const selectRecords = $xeTable.getCheckboxRecords();
        let lastRangeRows = [];
        const marginSize = 1;
        const startTop = evnt.clientY - bodyRect.y + bodyWrapperElem.scrollTop;
        const startLeft = evnt.clientX - bodyRect.x + bodyWrapperElem.scrollLeft;
        const startScrollTop = bodyWrapperElem.scrollTop;
        const rowHeight = trElem.offsetHeight;
        const trRect = trElem.getBoundingClientRect();
        const offsetClientTop = disY - trRect.y;
        let mouseScrollTimeout = null;
        let isMouseScrollDown = false;
        let mouseScrollSpaceSize = 1;
        const triggerEvent = (type, evnt) => {
            $xeTable.dispatchEvent(`checkbox-range-${type}`, {
                records: () => $xeTable.getCheckboxRecords(),
                reserves: () => $xeTable.getCheckboxReserveRecords()
            }, evnt);
        };
        const handleChecked = (evnt) => {
            const { clientX, clientY } = evnt;
            const offsetLeft = clientX - disX;
            const offsetTop = clientY - disY + (bodyWrapperElem.scrollTop - startScrollTop);
            let rangeHeight = Math.abs(offsetTop);
            let rangeWidth = Math.abs(offsetLeft);
            let rangeTop = startTop;
            let rangeLeft = startLeft;
            if (offsetTop < marginSize) {
                // 向上
                rangeTop += offsetTop;
                if (rangeTop < marginSize) {
                    rangeTop = marginSize;
                    rangeHeight = startTop;
                }
            }
            else {
                // 向下
                rangeHeight = Math.min(rangeHeight, bodyWrapperElem.scrollHeight - startTop - marginSize);
            }
            if (offsetLeft < marginSize) {
                // 向左
                rangeLeft += offsetLeft;
                if (rangeWidth > startLeft) {
                    rangeLeft = marginSize;
                    rangeWidth = startLeft;
                }
            }
            else {
                // 向右
                rangeWidth = Math.min(rangeWidth, bodyWrapperElem.clientWidth - startLeft - marginSize);
            }
            checkboxRangeElem.style.height = `${rangeHeight}px`;
            checkboxRangeElem.style.width = `${rangeWidth}px`;
            checkboxRangeElem.style.left = `${rangeLeft}px`;
            checkboxRangeElem.style.top = `${rangeTop}px`;
            checkboxRangeElem.style.display = 'block';
            const rangeRows = getCheckboxRangeRows($xeTable, evnt, params, trElem, trRect, offsetClientTop, offsetTop < marginSize ? -rangeHeight : rangeHeight);
            // 至少滑动 10px 才能有效匹配
            if (rangeHeight > 10 && rangeRows.length !== lastRangeRows.length) {
                const isControlKey = hasControlKey(evnt);
                lastRangeRows = rangeRows;
                if (isControlKey) {
                    rangeRows.forEach((row) => {
                        $xeTable.handleBatchSelectRows([row], selectRecords.indexOf(row) === -1);
                    });
                }
                else {
                    $xeTable.setAllCheckboxRow(false);
                    $xeTable.handleCheckedCheckboxRow(rangeRows, true, false);
                }
                triggerEvent('change', evnt);
            }
        };
        // 停止鼠标滚动
        const stopMouseScroll = () => {
            clearTimeout(mouseScrollTimeout);
            mouseScrollTimeout = null;
        };
        // 开始鼠标滚动
        const startMouseScroll = (evnt) => {
            stopMouseScroll();
            mouseScrollTimeout = setTimeout(() => {
                if (mouseScrollTimeout) {
                    const { scrollLeft, scrollTop, clientHeight, scrollHeight } = bodyWrapperElem;
                    const topSize = Math.ceil(mouseScrollSpaceSize * 50 / rowHeight);
                    if (isMouseScrollDown) {
                        if (scrollTop + clientHeight < scrollHeight) {
                            $xeTable.scrollTo(scrollLeft, scrollTop + topSize);
                            startMouseScroll(evnt);
                            handleChecked(evnt);
                        }
                        else {
                            stopMouseScroll();
                        }
                    }
                    else {
                        if (scrollTop) {
                            $xeTable.scrollTo(scrollLeft, scrollTop - topSize);
                            startMouseScroll(evnt);
                            handleChecked(evnt);
                        }
                        else {
                            stopMouseScroll();
                        }
                    }
                }
            }, 50);
        };
        addClass(el, 'drag--range');
        document.onmousemove = evnt => {
            evnt.preventDefault();
            evnt.stopPropagation();
            const { clientY } = evnt;
            const { boundingTop } = getAbsolutePos(bodyWrapperElem);
            // 如果超过可视区，触发滚动
            if (clientY < boundingTop) {
                isMouseScrollDown = false;
                mouseScrollSpaceSize = boundingTop - clientY;
                if (!mouseScrollTimeout) {
                    startMouseScroll(evnt);
                }
            }
            else if (clientY > boundingTop + bodyWrapperElem.clientHeight) {
                isMouseScrollDown = true;
                mouseScrollSpaceSize = clientY - boundingTop - bodyWrapperElem.clientHeight;
                if (!mouseScrollTimeout) {
                    startMouseScroll(evnt);
                }
            }
            else if (mouseScrollTimeout) {
                stopMouseScroll();
            }
            handleChecked(evnt);
        };
        document.onmouseup = (evnt) => {
            stopMouseScroll();
            removeClass(el, 'drag--range');
            checkboxRangeElem.removeAttribute('style');
            document.onmousemove = null;
            document.onmouseup = null;
            triggerEvent('end', evnt);
        };
        triggerEvent('start', evnt);
    }
}
export default {
    methods: {
        // 处理 Tab 键移动
        moveTabSelected(args, isLeft, evnt) {
            const $xeTable = this;
            const props = $xeTable;
            const internalData = $xeTable;
            const { editConfig } = props;
            const { afterFullData, visibleColumn } = internalData;
            const editOpts = $xeTable.computeEditOpts;
            const rowOpts = $xeTable.computeRowOpts;
            const currentRowOpts = $xeTable.computeCurrentRowOpts;
            const columnOpts = $xeTable.computeColumnOpts;
            const currentColumnOpts = $xeTable.computeCurrentColumnOpts;
            let targetRow;
            let targetRowIndex;
            let targetColumnIndex;
            const params = Object.assign({}, args);
            const _rowIndex = $xeTable.getVTRowIndex(params.row);
            const _columnIndex = $xeTable.getVTColumnIndex(params.column);
            evnt.preventDefault();
            if (isLeft) {
                // 向左
                if (_columnIndex <= 0) {
                    // 如果已经是第一列，则移动到上一行
                    if (_rowIndex > 0) {
                        targetRowIndex = _rowIndex - 1;
                        targetRow = afterFullData[targetRowIndex];
                        targetColumnIndex = visibleColumn.length - 1;
                    }
                }
                else {
                    targetColumnIndex = _columnIndex - 1;
                }
            }
            else {
                if (_columnIndex >= visibleColumn.length - 1) {
                    // 如果已经是第一列，则移动到上一行
                    if (_rowIndex < afterFullData.length - 1) {
                        targetRowIndex = _rowIndex + 1;
                        targetRow = afterFullData[targetRowIndex];
                        targetColumnIndex = 0;
                    }
                }
                else {
                    targetColumnIndex = _columnIndex + 1;
                }
            }
            const targetColumn = visibleColumn[targetColumnIndex];
            if (targetColumn) {
                if (targetRow) {
                    params.rowIndex = targetRowIndex;
                    params.row = targetRow;
                }
                else {
                    params.rowIndex = _rowIndex;
                }
                params.columnIndex = targetColumnIndex;
                params.column = targetColumn;
                params.cell = $xeTable.getCellElement(params.row, params.column);
                if (rowOpts.isCurrent && currentRowOpts.isFollowSelected) {
                    $xeTable.triggerCurrentRowEvent(evnt, params);
                }
                if (columnOpts.isCurrent && currentColumnOpts.isFollowSelected) {
                    $xeTable.triggerCurrentColumnEvent(evnt, params);
                }
                if (editConfig) {
                    if (editOpts.trigger === 'click' || editOpts.trigger === 'dblclick') {
                        if (editOpts.mode === 'row') {
                            $xeTable.handleEdit(params, evnt);
                        }
                        else {
                            $xeTable.scrollToRow(params.row, params.column)
                                .then(() => {
                                $xeTable.handleSelected(params, evnt);
                            });
                        }
                    }
                }
                else {
                    $xeTable.scrollToRow(params.row, params.column)
                        .then(() => {
                        $xeTable.handleSelected(params, evnt);
                    });
                }
            }
        },
        // 处理当前行方向键移动
        moveCurrentRow(isUpArrow, isDwArrow, evnt) {
            const $xeTable = this;
            const props = $xeTable;
            const reactData = $xeTable;
            const internalData = $xeTable;
            const { treeConfig } = props;
            const { currentRow } = reactData;
            const { afterFullData } = internalData;
            const treeOpts = $xeTable.computeTreeOpts;
            const childrenField = treeOpts.children || treeOpts.childrenField;
            let targetRow;
            if (currentRow) {
                if (treeConfig) {
                    const { index, items } = XEUtils.findTree(afterFullData, item => item === currentRow, { children: childrenField });
                    if (isUpArrow && index > 0) {
                        targetRow = items[index - 1];
                    }
                    else if (isDwArrow && index < items.length - 1) {
                        targetRow = items[index + 1];
                    }
                }
                else {
                    const _rowIndex = $xeTable.getVTRowIndex(currentRow);
                    if (isUpArrow && _rowIndex > 0) {
                        targetRow = afterFullData[_rowIndex - 1];
                    }
                    else if (isDwArrow && _rowIndex < afterFullData.length - 1) {
                        targetRow = afterFullData[_rowIndex + 1];
                    }
                }
            }
            else {
                targetRow = afterFullData[0];
            }
            if (targetRow) {
                evnt.preventDefault();
                const params = {
                    $table: $xeTable,
                    row: targetRow,
                    rowIndex: $xeTable.getRowIndex(targetRow),
                    $rowIndex: $xeTable.getVMRowIndex(targetRow)
                };
                $xeTable.scrollToRow(targetRow)
                    .then(() => $xeTable.triggerCurrentRowEvent(evnt, params));
            }
        },
        // 处理当前列方向键移动
        moveCurrentColumn(isLeftArrow, isRightArrow, evnt) {
            const $xeTable = this;
            const reactData = $xeTable;
            const internalData = $xeTable;
            const { currentColumn } = reactData;
            const { visibleColumn } = internalData;
            let targetCol = null;
            if (currentColumn) {
                const _columnIndex = $xeTable.getVTColumnIndex(currentColumn);
                if (isLeftArrow && _columnIndex > 0) {
                    targetCol = visibleColumn[_columnIndex - 1];
                }
                else if (isRightArrow && _columnIndex < visibleColumn.length - 1) {
                    targetCol = visibleColumn[_columnIndex + 1];
                }
            }
            else {
                targetCol = visibleColumn[0];
            }
            if (targetCol) {
                evnt.preventDefault();
                const params = {
                    $table: $xeTable,
                    column: targetCol,
                    columnIndex: $xeTable.getColumnIndex(targetCol),
                    $columnIndex: $xeTable.getVMColumnIndex(targetCol)
                };
                $xeTable.scrollToColumn(targetCol)
                    .then(() => $xeTable.triggerCurrentColumnEvent(evnt, params));
            }
        },
        // 处理可编辑方向键移动
        moveArrowSelected(args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
            const $xeTable = this;
            const props = $xeTable;
            const { highlightCurrentRow, highlightCurrentColumn } = props;
            const rowOpts = $xeTable.computeRowOpts;
            const currentRowOpts = $xeTable.computeCurrentRowOpts;
            const columnOpts = $xeTable.computeColumnOpts;
            const currentColumnOpts = $xeTable.computeCurrentColumnOpts;
            const params = handleMoveSelected($xeTable, evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow);
            if (rowOpts.isCurrent || highlightCurrentRow) {
                if (currentRowOpts.isFollowSelected) {
                    $xeTable.triggerCurrentRowEvent(evnt, params);
                }
                else {
                    // 当前行按键上下移动
                    if ((isUpArrow || isDwArrow) && (rowOpts.isCurrent || highlightCurrentRow)) {
                        $xeTable.moveCurrentRow(isUpArrow, isDwArrow, evnt);
                    }
                }
            }
            if (columnOpts.isCurrent || highlightCurrentColumn) {
                if (currentColumnOpts.isFollowSelected) {
                    $xeTable.triggerCurrentColumnEvent(evnt, params);
                }
                else {
                    // 当前行按键左右移动
                    if ((isLeftArrow || isRightArrow) && (columnOpts.isCurrent || highlightCurrentColumn)) {
                        $xeTable.moveCurrentColumn(isLeftArrow, isRightArrow, evnt);
                    }
                }
            }
        },
        moveEnterSelected(args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
            const $xeTable = this;
            const props = $xeTable;
            const { highlightCurrentRow, highlightCurrentColumn } = props;
            const rowOpts = $xeTable.computeRowOpts;
            const currentRowOpts = $xeTable.computeCurrentRowOpts;
            const columnOpts = $xeTable.computeColumnOpts;
            const currentColumnOpts = $xeTable.computeCurrentColumnOpts;
            const params = handleMoveSelected($xeTable, evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow);
            if (((rowOpts.isCurrent || highlightCurrentRow) && currentRowOpts.isFollowSelected)) {
                $xeTable.triggerCurrentRowEvent(evnt, params);
            }
            if ((columnOpts.isCurrent || highlightCurrentColumn) && currentColumnOpts.isFollowSelected) {
                $xeTable.triggerCurrentColumnEvent(evnt, params);
            }
        },
        // 处理可编辑方向键移动
        moveSelected(args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
            const $xeTable = this;
            handleMoveSelected($xeTable, evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow);
        },
        handleCellMousedownEvent(evnt, params) {
            const $xeTable = this;
            const props = $xeTable;
            const { editConfig, checkboxConfig, mouseConfig } = props;
            const checkboxOpts = $xeTable.computeCheckboxOpts;
            const mouseOpts = $xeTable.computeMouseOpts;
            const editOpts = $xeTable.computeEditOpts;
            if (mouseConfig && mouseOpts.area && $xeTable.triggerCellAreaModnEvent) {
                return $xeTable.triggerCellAreaModnEvent(evnt, params);
            }
            else {
                if (checkboxConfig && checkboxOpts.range) {
                    handleCheckboxRangeEvent($xeTable, evnt, params);
                }
                if (mouseConfig && mouseOpts.selected) {
                    if (!editConfig || editOpts.mode === 'cell') {
                        $xeTable.handleSelected(params, evnt);
                    }
                }
            }
        }
    }
};