tdesign-vue
Version:
265 lines (261 loc) • 9.02 kB
JavaScript
/**
* tdesign v1.14.1
* (c) 2025 tdesign
* @license MIT
*/
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { toRefs, ref } from '@vue/composition-api';
import { get } from 'lodash-es';
import useDefaultValue from '../../hooks/useDefaultValue.js';
import { on, off } from '../../utils/dom.js';
import { ARROW_DOWN_REG, ARROW_UP_REG, SPACE_REG, SHIFT_REG, ESCAPE_REG, CLEAR_REG, ALL_REG } from '../../_common/js/common.js';
import 'vue';
import 'raf';
import '../../utils/easing.js';
function useRowHighlight(props, tableRef) {
var _toRefs = toRefs(props),
data = _toRefs.data,
activeRowType = _toRefs.activeRowType,
activeRowKeys = _toRefs.activeRowKeys,
defaultActiveRowKeys = _toRefs.defaultActiveRowKeys,
disableSpaceInactiveRow = _toRefs.disableSpaceInactiveRow;
var currentOperationRowIndex = ref(-1);
var isShiftPressed = ref(false);
var shiftSelectionState = ref(false);
var areaSelectionStartIndex = ref(-1);
var _useDefaultValue = useDefaultValue(activeRowKeys, defaultActiveRowKeys.value, props.onActiveChange, "active-row-keys", "active-change"),
_useDefaultValue2 = _slicedToArray(_useDefaultValue, 2),
tActiveRow = _useDefaultValue2[0],
setTActiveRow = _useDefaultValue2[1];
var handleInactive = function handleInactive(ctx) {
var row = ctx.row;
var rowValue = get(row, props.rowKey);
if (activeRowType.value === "single") {
setTActiveRow([], {
type: "inactive",
activeRowList: [],
currentRowData: row
});
} else if (activeRowType.value === "multiple") {
var newActiveRowKeys = tActiveRow.value.filter(function (t) {
return t !== rowValue;
});
setTActiveRow(newActiveRowKeys, {
type: "inactive",
activeRowList: [],
currentRowData: row
});
}
};
var handleActive = function handleActive(ctx) {
var row = ctx.row;
var rowValue = get(row, props.rowKey);
if (activeRowType.value === "single") {
setTActiveRow([rowValue], {
activeRowList: [{
row: row,
rowIndex: ctx.index
}],
currentRowData: row,
type: "active"
});
} else {
var newActiveRowKeys = tActiveRow.value.concat(rowValue);
var activeRowList = [];
for (var i = 0, len = data.value.length; i < len; i++) {
var row2 = data.value[i];
if (newActiveRowKeys.includes(get(row2, props.rowKey))) {
activeRowList.push({
row: row2,
rowIndex: i
});
}
}
setTActiveRow(newActiveRowKeys, {
activeRowList: activeRowList,
currentRowData: row,
type: "active"
});
}
};
var handleShiftActive = function handleShiftActive(ctx) {
document.getSelection().removeAllRanges();
var row = ctx.row;
var currentIndex = currentOperationRowIndex.value;
var startIndex = Math.min(areaSelectionStartIndex.value, currentIndex);
var endIndex = Math.max(areaSelectionStartIndex.value, currentIndex);
var newActiveRowData = [];
for (var i = startIndex; i <= endIndex; i++) {
newActiveRowData.push({
row: data.value[i],
rowIndex: i
});
}
var newActiveRowKeys = newActiveRowData.map(function (item) {
return get(item.row, props.rowKey);
});
setTActiveRow(newActiveRowKeys, {
activeRowList: newActiveRowData,
type: "active",
currentRowData: row
});
};
var getActiveRowList = function getActiveRowList() {
var list = [];
for (var i = 0, len = data.value.length; i < len; i++) {
var row = data.value[i];
var rowValue = get(row, props.rowKey);
if (tActiveRow.value.includes(rowValue)) {
list.push({
row: row,
rowIndex: i
});
}
}
return list;
};
var onHighlightRow = function onHighlightRow(ctx, extra) {
if (!activeRowType.value) return;
var row = ctx.row,
index = ctx.index;
var rowValue = get(row, props.rowKey);
if (isShiftPressed.value) {
currentOperationRowIndex.value = index;
handleShiftActive(ctx);
shiftSelectionState.value = true;
} else if (tActiveRow.value.includes(rowValue) && (extra === null || extra === void 0 ? void 0 : extra.action) !== "active") {
handleInactive(ctx);
currentOperationRowIndex.value = index;
} else {
handleActive(ctx);
currentOperationRowIndex.value = index;
}
};
var clearActive = function clearActive() {
var _props$onActiveRowAct;
setTActiveRow([], {
activeRowList: [],
currentRowData: void 0,
type: "inactive"
});
(_props$onActiveRowAct = props.onActiveRowAction) === null || _props$onActiveRowAct === void 0 || _props$onActiveRowAct.call(props, {
action: "clear",
activeRowList: []
});
currentOperationRowIndex.value = -1;
};
var setAllActive = function setAllActive() {
var _props$onActiveRowAct2;
var activeKeys = data.value.map(function (item) {
return get(item, props.rowKey);
});
var activeRowList = data.value.map(function (row, rowIndex) {
return {
row: row,
rowIndex: rowIndex
};
});
setTActiveRow(activeKeys, {
activeRowList: activeRowList,
currentRowData: void 0,
type: "active"
});
(_props$onActiveRowAct2 = props.onActiveRowAction) === null || _props$onActiveRowAct2 === void 0 || _props$onActiveRowAct2.call(props, {
action: "select-all",
activeRowList: activeRowList
});
currentOperationRowIndex.value = -1;
};
var clearShiftAreaSelection = function clearShiftAreaSelection() {
shiftSelectionState.value = false;
};
var keyboardDownListener = function keyboardDownListener(e) {
var _e$key;
var code = e.code || ((_e$key = e.key) === null || _e$key === void 0 ? void 0 : _e$key.trim());
if (ARROW_DOWN_REG.test(code)) {
e.preventDefault();
var index = Math.min(data.value.length - 1, currentOperationRowIndex.value + 1);
if (activeRowType.value === "single") {
onHighlightRow({
row: data.value[index],
index: index,
e: e
}, {
action: "active"
});
} else {
currentOperationRowIndex.value = index;
}
} else if (ARROW_UP_REG.test(code)) {
e.preventDefault();
var _index = Math.max(0, currentOperationRowIndex.value - 1);
if (activeRowType.value === "single") {
onHighlightRow({
row: data.value[_index],
index: _index,
e: e
}, {
action: "active"
});
} else {
currentOperationRowIndex.value = _index;
}
} else if (SPACE_REG.test(code)) {
e.preventDefault();
var _index2 = currentOperationRowIndex.value;
if (shiftSelectionState.value) {
var _props$onActiveRowAct3;
(_props$onActiveRowAct3 = props.onActiveRowAction) === null || _props$onActiveRowAct3 === void 0 || _props$onActiveRowAct3.call(props, {
action: "shift-area-selection",
activeRowList: getActiveRowList()
});
} else if (!disableSpaceInactiveRow.value) {
onHighlightRow({
row: data.value[_index2],
index: _index2,
e: e
});
} else {
var _props$onActiveRowAct4;
(_props$onActiveRowAct4 = props.onActiveRowAction) === null || _props$onActiveRowAct4 === void 0 || _props$onActiveRowAct4.call(props, {
action: "space-one-selection",
activeRowList: getActiveRowList()
});
}
} else if (SHIFT_REG.test(code)) {
isShiftPressed.value = true;
areaSelectionStartIndex.value = currentOperationRowIndex.value;
} else if (ESCAPE_REG.test(code) || CLEAR_REG.test(code)) {
clearActive();
clearShiftAreaSelection();
} else if (ALL_REG.test(code)) {
setAllActive();
}
if (!SPACE_REG.test(code)) {
clearShiftAreaSelection();
}
};
var keyboardUpListener = function keyboardUpListener(e) {
var _e$key2;
var code = ((_e$key2 = e.key) === null || _e$key2 === void 0 ? void 0 : _e$key2.trim()) || e.code;
if (SHIFT_REG.test(code)) {
isShiftPressed.value = false;
}
};
var addHighlightKeyboardListener = function addHighlightKeyboardListener() {
on(tableRef.value, "keydown", keyboardDownListener);
on(tableRef.value, "keyup", keyboardUpListener);
};
var removeHighlightKeyboardListener = function removeHighlightKeyboardListener() {
off(tableRef.value, "keydown", keyboardDownListener);
off(tableRef.value, "keyup", keyboardUpListener);
};
return {
tActiveRow: tActiveRow,
onHighlightRow: onHighlightRow,
addHighlightKeyboardListener: addHighlightKeyboardListener,
removeHighlightKeyboardListener: removeHighlightKeyboardListener
};
}
export { useRowHighlight as default, useRowHighlight };
//# sourceMappingURL=useRowHighlight.js.map