@fe6/water-pro
Version:
An enterprise-class UI design language and Vue-based implementation
238 lines (184 loc) • 8.91 kB
JavaScript
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import _regeneratorRuntime from "@babel/runtime/regenerator";
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
/** @format */
import { __awaiter } from "tslib";
import { computed, unref, ref, nextTick, watch } from 'vue';
import { isBoolean } from '@fe6/shared';
import { getViewportOffset } from '../../../_util/dom';
import { useWindowSizeFn } from '../../../_util/hooks/use-window-size-fn';
import { useDebounce } from '../../../_util/hooks/use-debounce';
import { useModalContext } from '../../../modal-pro';
import { onMountedOrActivated } from './on-mounted-or-activated';
export function useTableScroll(propsRef, tableElRef, columnsRef, rowSelectionRef, getDataSourceRef) {
var tableHeightRef = ref(null);
var modalFn = useModalContext(); // Greater than animation time 280
var _useDebounce = useDebounce(redoHeight, 100),
_useDebounce2 = _slicedToArray(_useDebounce, 1),
debounceRedoHeight = _useDebounce2[0];
var getCanResize = computed(function () {
var _unref = unref(propsRef),
canResize = _unref.canResize,
scroll = _unref.scroll;
return canResize && !(scroll || {}).y;
});
watch(function () {
var _a;
return [unref(getCanResize), (_a = unref(getDataSourceRef)) === null || _a === void 0 ? void 0 : _a.length];
}, function () {
debounceRedoHeight();
}, {
flush: 'post'
});
function redoHeight() {
nextTick(function () {
calcTableHeight();
});
}
function setHeight(heigh) {
var _a;
tableHeightRef.value = heigh; // Solve the problem of modal adaptive height calculation when the form is placed in the modal
(_a = modalFn === null || modalFn === void 0 ? void 0 : modalFn.redoModalHeight) === null || _a === void 0 ? void 0 : _a.call(modalFn);
} // No need to repeat queries
var paginationEl;
var footerEl;
var bodyEl;
function calcTableHeight() {
var _a;
return __awaiter(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _unref2, resizeHeightOffset, pagination, maxHeight, tableData, table, tableEl, headEl, _getViewportOffset, bottomIncludeBody, paddingHeight, borderHeight, paginationHeight, offsetHeight, footerHeight, _offsetHeight, headerHeight, height;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_unref2 = unref(propsRef), resizeHeightOffset = _unref2.resizeHeightOffset, pagination = _unref2.pagination, maxHeight = _unref2.maxHeight;
tableData = unref(getDataSourceRef);
table = unref(tableElRef);
if (table) {
_context.next = 5;
break;
}
return _context.abrupt("return");
case 5:
tableEl = table.$el;
if (tableEl) {
_context.next = 8;
break;
}
return _context.abrupt("return");
case 8:
if (!bodyEl) {
bodyEl = tableEl.querySelector('.ant-table-body');
}
bodyEl.style.height = 'unset';
if (!(!unref(getCanResize) || tableData.length === 0)) {
_context.next = 12;
break;
}
return _context.abrupt("return");
case 12:
_context.next = 14;
return nextTick();
case 14:
// Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
headEl = tableEl.querySelector('.ant-table-thead');
if (headEl) {
_context.next = 17;
break;
}
return _context.abrupt("return");
case 17:
// Table height from bottom
_getViewportOffset = getViewportOffset(headEl), bottomIncludeBody = _getViewportOffset.bottomIncludeBody; // Table height from bottom height-custom offset
paddingHeight = 32;
borderHeight = 0; // Pager height
paginationHeight = 2;
if (!isBoolean(pagination)) {
if (!paginationEl) {
paginationEl = tableEl.querySelector('.ant-pagination');
}
if (paginationEl) {
offsetHeight = paginationEl.offsetHeight;
paginationHeight += offsetHeight || 0;
} else {
// TODO First fix 24
paginationHeight += 24;
}
}
footerHeight = 0;
if (!isBoolean(pagination)) {
if (!footerEl) {
footerEl = tableEl.querySelector('.ant-table-footer');
} else {
_offsetHeight = footerEl.offsetHeight;
footerHeight += _offsetHeight || 0;
}
}
headerHeight = 0;
if (headEl) {
headerHeight = headEl.offsetHeight;
}
height = bottomIncludeBody - (resizeHeightOffset || 0) - paddingHeight - borderHeight - paginationHeight - footerHeight - headerHeight;
height = (_a = height > maxHeight ? maxHeight : height) !== null && _a !== void 0 ? _a : height;
setHeight(height);
bodyEl.style.height = "".concat(height, "px");
case 30:
case "end":
return _context.stop();
}
}
}, _callee);
}));
}
useWindowSizeFn(calcTableHeight, 280);
onMountedOrActivated(function () {
calcTableHeight();
nextTick(function () {
debounceRedoHeight();
});
});
var getScrollX = computed(function () {
var _a, _b;
var width = 0;
if (unref(rowSelectionRef)) {
width += 60;
} // TODO props ?? 0;
var NORMAL_WIDTH = 150;
var columns = unref(columnsRef).filter(function (item) {
return !item.defaultHidden;
});
columns.forEach(function (item) {
width += Number.parseInt(item.width) || 0;
});
var unsetWidthColumns = columns.filter(function (item) {
return !Reflect.has(item, 'width');
});
var len = unsetWidthColumns.length;
if (len !== 0) {
width += len * NORMAL_WIDTH;
}
var table = unref(tableElRef);
var tableWidth = (_b = (_a = table === null || table === void 0 ? void 0 : table.$el) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
return tableWidth > width ? '100%' : width;
});
var getScrollRef = computed(function () {
var tableHeight = unref(tableHeightRef);
var _unref3 = unref(propsRef),
canResize = _unref3.canResize,
scroll = _unref3.scroll;
return _extends({
x: unref(getScrollX),
y: canResize ? tableHeight : null,
scrollToFirstRowOnChange: false
}, scroll);
});
return {
getScrollRef: getScrollRef,
redoHeight: redoHeight
};
}