mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
308 lines (307 loc) • 10.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useVirtualScrolling = exports.useDirection = exports.sortTableHandle = exports.setUUIDbyDataSource = exports.initControlDataSource = exports.getUUID = exports.getElData = exports.draggableClassName = exports.cleanUUIDbyData = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _sortablejs = _interopRequireDefault(require("sortablejs"));
var _lodashEs = require("lodash");
var _vue = require("vue");
require("@vueuse/core");
var _excluded = ["_uuid", "index", "_sortIndex"];
var draggableClassName = 'draggable-item';
exports.draggableClassName = draggableClassName;
var sortTableHandle = function sortTableHandle(ele, _onEnd) {
var sortTable = new _sortablejs.default(ele, {
handle: ".".concat(draggableClassName),
draggable: '.ant-table-row',
animation: 200,
ghostClass: 'draggable-ghost',
sort: true,
onEnd: function onEnd(_ref) {
var oldIndex = _ref.oldIndex,
newIndex = _ref.newIndex;
_onEnd(oldIndex, newIndex);
}
});
return sortTable;
};
/**
* 方向操作
*/
exports.sortTableHandle = sortTableHandle;
var useDirection = function useDirection(cb) {
var keyDown = function keyDown(e) {
// 判断当前标签页状态, 标签未激活禁止操作
var isHidden = document.hidden;
if (isHidden) return;
var keyCode = e.keyCode;
switch (keyCode) {
case 37:
cb('left');
break;
case 38:
cb('up');
break;
case 39:
cb('right');
break;
case 40:
case 13:
cb('down');
break;
}
};
(0, _vue.onMounted)(function () {
document.addEventListener('keydown', keyDown);
});
(0, _vue.onBeforeUnmount)(function () {
document.removeEventListener('keydown', keyDown);
});
};
exports.useDirection = useDirection;
var getUUID = function getUUID() {
return (0, _lodashEs.uniqueId)('control');
};
exports.getUUID = getUUID;
var setUUIDbyDataSource = function setUUIDbyDataSource(data) {
return (0, _lodashEs.isArray)(data) ? (0, _lodashEs.cloneDeep)(data).map(function (item, index) {
if (item._sortIndex === undefined) {
item['_sortIndex'] = index;
}
if (item._uuid) {
return item;
} else {
var uuid = getUUID();
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
index: index + 1,
_uuid: uuid
});
}
}) : data;
};
exports.setUUIDbyDataSource = setUUIDbyDataSource;
var cleanUUIDbyData = function cleanUUIDbyData(data) {
return (0, _lodashEs.isArray)(data) ? (0, _lodashEs.cloneDeep)(data).map(function (item) {
var _uuid = item._uuid,
index = item.index,
_sortIndex = item._sortIndex,
extra = (0, _objectWithoutProperties2.default)(item, _excluded);
return extra;
}) : data;
};
exports.cleanUUIDbyData = cleanUUIDbyData;
var initControlDataSource = function initControlDataSource() {
var controlDataMap = (0, _vue.ref)(new Map());
var setControlData = function setControlData(data) {
if ((0, _lodashEs.isArray)(data)) {
controlDataMap.value.clear();
data.forEach(function (item) {
if (item._uuid) {
controlDataMap.value.set(item._uuid, (0, _lodashEs.omit)(item, ['_uuid']));
}
});
}
};
var getControlData = function getControlData(record) {
var _uuid = record._uuid;
if (_uuid && controlDataMap.value.has(_uuid)) {
return controlDataMap.value.get(_uuid);
}
return undefined;
};
return {
setControlData: setControlData,
getControlData: getControlData
};
};
exports.initControlDataSource = initControlDataSource;
var getElData = function getElData(target) {
var _target$className;
var currentEl = target;
var off = true;
var position = [];
if (!target || !(target !== null && target !== void 0 && target.className) || !(target !== null && target !== void 0 && (_target$className = target.className) !== null && _target$className !== void 0 && _target$className.includes)) return [];
if (target.className.includes('ant-table-cell')) {
var _target$querySelector;
var _dataset = (_target$querySelector = target.querySelector('.j-row-click')) === null || _target$querySelector === void 0 ? void 0 : _target$querySelector.dataset;
position = ['td', Number(_dataset.index), _dataset.name];
} else if (target.className.includes('j-row-click')) {
var _dataset2 = target.dataset;
position = ['td', Number(_dataset2.index), _dataset2.name];
} else {
while (off) {
if (!currentEl.parentNode.className || currentEl.parentNode.className.includes('ant-table-cell')) {
off = false;
} else if (currentEl.parentNode.className.includes('j-row-click')) {
off = false;
var _dataset3 = currentEl.parentNode.dataset;
position = ['td', Number(_dataset3.index), _dataset3.name];
} else {
currentEl = currentEl.parentNode;
}
}
}
return position;
};
exports.getElData = getElData;
var useVirtualScrolling = function useVirtualScrolling(target, dataSource, height, cb) {
var buffer = 200;
var renderTable = (0, _vue.ref)([]);
var currentData = (0, _vue.ref)(dataSource || []);
var top = (0, _vue.ref)();
var bottom = (0, _vue.ref)();
var start = (0, _vue.ref)(0);
var end = (0, _vue.ref)();
var toTop = (0, _vue.ref)(0);
var scrollBox = (0, _vue.ref)();
var sizes = (0, _vue.ref)({});
var itemHeight = 46;
var offsetMap = (0, _vue.computed)(function () {
var total = 0;
var res = currentData.value.reduce(function (prev, current) {
var key = current['_uuid'];
prev[key] = total;
var curSize = sizes.value[key] || itemHeight;
total += curSize;
return prev;
}, {});
return res;
});
var setTop = function setTop() {
var _scrollBox$value;
toTop.value = target.getBoundingClientRect().top - ((_scrollBox$value = scrollBox.value) === null || _scrollBox$value === void 0 ? void 0 : _scrollBox$value.getBoundingClientRect().top) + scrollBox.value.offsetTop;
};
var getItemOffsetTop = function getItemOffsetTop(index) {
var item = currentData.value[index];
if (item) {
var key = item['_uuid'];
return offsetMap.value[key] || 0;
}
return 0;
};
var updateSizes = function updateSizes() {
var rows = target.querySelectorAll('.ant-table-row');
Array.from(rows).forEach(function (row, index) {
var item = renderTable.value[index];
if (!item) return;
// 计算表格行的高度
var offsetHeight = row.offsetHeight;
var key = item['_uuid'];
if (sizes.value[key] !== offsetHeight) {
sizes.value[key] = offsetHeight;
}
});
};
var calcRenderData = function calcRenderData() {
var _top = scrollBox.value.scrollTop - toTop.value - buffer;
var _bottom = scrollBox.value.scrollTop + scrollBox.value.offsetHeight + buffer - toTop.value;
if (_bottom < height) {
_bottom = height;
}
var _start;
var _end;
var l = 0;
var r = currentData.value.length - 1;
var mid = 0;
while (l <= r) {
mid = Math.floor((l + r) / 2);
var mindVal = getItemOffsetTop(mid);
if (mindVal < _top) {
var mindNextVal = getItemOffsetTop(mid + 1);
if (mindNextVal > _top) break;
l = mid + 1;
} else {
r = mid - 1;
}
}
_start = mid;
_end = currentData.value.length - 1;
for (var i = _start + 1; i < currentData.value.length; i++) {
var offsetTop = getItemOffsetTop(i);
if (offsetTop >= _bottom) {
_end = i;
break;
}
}
if (_start % 2) {
_start = _start - 1;
}
top.value = _top;
bottom.value = _bottom;
start.value = _start;
end.value = _end;
console.log(currentData.value);
renderTable.value = currentData.value.slice(_start, _end + 1);
cb === null || cb === void 0 ? void 0 : cb(renderTable.value);
};
var getItemSize = function getItemSize(index) {
if (index <= -1) return 0;
var item = currentData.value[index];
if (item) {
var key = item['_uuid'];
return sizes.value[key] || itemHeight;
}
return itemHeight;
};
var calcPosition = function calcPosition() {
var last = currentData.value.length - 1;
var warpHeight = getItemOffsetTop(last) + getItemSize(last);
var offsetTop = getItemOffsetTop(start.value);
var tableEl = target.querySelector('.ant-table-body');
if (!tableEl) return;
if (!tableEl.warpEl) {
var warpEl = document.createElement('div');
var innerEl = document.createElement('div');
warpEl.appendChild(innerEl);
innerEl.appendChild(tableEl.children[0]);
tableEl.insertBefore(warpEl, tableEl.firstChild);
tableEl.warpEl = warpEl;
tableEl.innerEl = innerEl;
}
if (tableEl.warpEl) {
tableEl.warpEl.style.height = warpHeight + 'px';
tableEl.innerEl.style.transform = "translateY(".concat(offsetTop, "px)");
}
};
var onScroll = function onScroll() {
// 移动选中状态项
// 删除编辑项
// 更新当前尺寸
updateSizes();
// 计算数据
calcRenderData();
// 计算位置
calcPosition();
};
var initScroll = function initScroll() {
scrollBox.value.addEventListener('scroll', onScroll);
setTop();
setTimeout(function () {
onScroll();
}, 2000);
};
var update = function update() {
var newData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
console.log('update');
currentData.value = newData;
setTop();
onScroll();
};
if (height) {
scrollBox.value = target === null || target === void 0 ? void 0 : target.querySelector('.ant-table-body');
initScroll();
}
(0, _vue.watch)(dataSource, function () {
console.log('dataSource');
update(dataSource);
}, {
deep: true
});
return {
update: update
};
};
exports.useVirtualScrolling = useVirtualScrolling;