fastlion-amis
Version:
一种MIS页面生成工具
924 lines • 82 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var theme_1 = require("../theme");
// import { autobind } from '../utils/helper'
// import Modal from './Modal'
var icons_1 = require("./icons");
var UnionImgContent_1 = tslib_1.__importDefault(require("./Lion/UnionImgContent"));
var MediaShowList_1 = tslib_1.__importDefault(require("./Lion/MediaShowList"));
var msgsub_1 = tslib_1.__importDefault(require("../renderers/Lion/utils/msgsub"));
var lodash_1 = require("lodash");
var react_rnd_1 = require("react-rnd");
var lodash_2 = require("lodash");
var DragModal_1 = tslib_1.__importDefault(require("./DragModal"));
var icons_2 = require("@ant-design/icons");
var antd_1 = require("antd");
var react_pdf_1 = require("react-pdf");
var shell_1 = require("../utils/shell");
var utils_1 = require("../renderers/Lion/utils/utils");
var helper_1 = require("../utils/helper");
var types_1 = require("../types");
var tools_1 = require("../utils/shell/tools");
var dayjs_1 = tslib_1.__importDefault(require("dayjs"));
// import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.js';
// import pdfjsWorker from './pdf.worker.min.js';
// https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/pdf.js/2.12.313/pdf.worker.min.js
react_pdf_1.pdfjs.GlobalWorkerOptions.workerSrc = "https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/pdf.js/".concat(react_pdf_1.pdfjs.version, "/pdf.worker.min.js");
var limitSize = 10 * 1024 * 1024;
// 初始状态
var initState = {
isOpened: false,
index: -1,
items: [],
unionImgShow: false,
unionSelecting: false,
mediaListShow: true,
imgRotate: 0,
selectList: [],
unionList: [],
totalUnionList: [],
selectUnionImgIndex: 0,
};
// 弹窗最小的高度和宽度 同步设置
var toolHigh = 40;
// const previewHeight = 64 + toolHigh;
// 文件名部分暂时去除，移至拖拽弹窗
var previewHeight = 64 + toolHigh;
var clientHalfHeight = document.documentElement.clientHeight / 2;
var minHeight = clientHalfHeight - previewHeight;
// const minClientWidth = document.body.clientWidth * 0.502;
// 950 由((670 (A4纸大概宽度) / (5/6) + 160(左侧预览)) - 14 （旷量宽度） 得来
var minWidth = 950;
// 默认宽度是源自 pdf显示宽度为800逆推而来
var initModalWidth = 1120;
// const defaultMove = { x: 0, y: 0 };
var ImageGallery = function (props) {
var _a;
var children = props.children;
// const [states, setStates] = useState(initState);
var _b = (0, react_1.useState)(false), visible = _b[0], setVisible = _b[1];
var _c = (0, react_1.useState)(false), currentIsImg = _c[0], setIsImg = _c[1];
var _d = (0, react_1.useState)(false), currentIsXlsx = _d[0], setCurrentIsXlsx = _d[1];
var _e = (0, react_1.useState)(false), currentIsKKFile = _e[0], setIsKKFileView = _e[1];
var pcPreviewRef = (0, react_1.useRef)(null);
var _f = (0, react_1.useState)({}), previewInfo = _f[0], setPreviewInfo = _f[1];
/** events */
var handleImageEnlarge = function (info) {
var index = info.index, list = info.list;
var matchItem = list === null || list === void 0 ? void 0 : list[index];
if (Number((matchItem === null || matchItem === void 0 ? void 0 : matchItem.fileSize) > limitSize)) {
antd_1.message.info('大于10M的文件请下载后查看');
return false;
}
setPreviewInfo(info);
setVisible(true);
if (matchItem) {
var isKKFile = matchItem.previewType === 1;
// 如果是kkfile 默认全屏
setIsKKFileView(isKKFile);
if (!isKKFile) {
setIsImg(!matchItem.isNotImg);
setCurrentIsXlsx(matchItem.previewType === 0 && (0, utils_1.isXlsx)(matchItem.previewTitle));
}
}
requestAnimationFrame(function () {
var _a;
(_a = pcPreviewRef.current) === null || _a === void 0 ? void 0 : _a.handleGetOriginSize();
handleFileSelect(matchItem);
});
};
var onClose = function () {
setVisible(false);
};
var handlePreviewKeydown = function (e) {
var _a, _b, _c, _d;
// 对应 ↑↓
var filesKeyCode = [38, 40];
// 对应 ←→
var pdfFileKeyCode = [37, 39];
var keyCode = e.keyCode;
// 文件上下个切换
if (filesKeyCode.includes(keyCode)) {
if (keyCode === 40) {
(_a = pcPreviewRef.current) === null || _a === void 0 ? void 0 : _a.handleNext();
}
else {
(_b = pcPreviewRef.current) === null || _b === void 0 ? void 0 : _b.handlePrev();
}
}
// 文件预览左右按键实现 上下页切换
if (pdfFileKeyCode.includes(keyCode)) {
if (keyCode === 39) {
(_c = pcPreviewRef.current) === null || _c === void 0 ? void 0 : _c.handlePdfNext();
}
else {
(_d = pcPreviewRef.current) === null || _d === void 0 ? void 0 : _d.handlePdfPrev();
}
}
};
// 子组件文件切换，触发父组件切换
var handleFileSelect = function (file) {
var _a = (file !== null && file !== void 0 ? file : {}).title, title = _a === void 0 ? '' : _a;
var modal = document.querySelector('.preview-modal');
var viceTitle = modal === null || modal === void 0 ? void 0 : modal.querySelector('.vice-title');
if (viceTitle) {
viceTitle.innerHTML = title;
}
};
// 切换全屏的时候，触发重新铺满桌面
// const handleToggleMaxSize = () => {
// // pcPreviewRef.current?.resizeEnd();
// }
/** fileViewer */
var PcPreview = (0, react_1.forwardRef)(function (props, ref) {
var _a, _b, _c, _d, _e, _f, _g, _h;
// const [selectedAttachment, setSelectAttachment] = useState<IAttachmentItem>({});
var onFileSelect = props.onFileSelect, previewInfo = props.previewInfo;
var _j = (0, react_1.useState)([]), allAttachment = _j[0], setAllAttachment = _j[1];
var _k = (0, react_1.useState)(1), pageNumber = _k[0], setPageNumber = _k[1];
var _l = (0, react_1.useState)(1), scale = _l[0], setScale = _l[1];
// const [states, setStates] = useState({ ...initState, index: index ?? initState.index });
var _m = (0, react_1.useState)(initState), states = _m[0], setStates = _m[1];
var _o = (0, react_1.useState)(1), pageIndex = _o[0], setPageIndex = _o[1];
var _p = (0, react_1.useState)(), FileHigh = _p[0], setFileHigh = _p[1];
var _q = (0, react_1.useState)(), FileWidth = _q[0], setFileWidth = _q[1];
var _r = (0, react_1.useState)(false), downloadLoading = _r[0], setDownloadLoading = _r[1];
var _s = (0, react_1.useState)(0), rotate = _s[0], setRotate = _s[1];
var previewRef = (0, react_1.useRef)(null);
var dragRef = (0, react_1.useRef)(null);
var previewTitleHigh = (0, react_1.useRef)(0);
var _t = (0, react_1.useState)(false), dragging = _t[0], setDragging = _t[1];
var _u = (0, react_1.useState)('100%'), maxImgWidth = _u[0], setMaxImgWidth = _u[1];
var _v = (0, react_1.useState)({ width: '100%', height: '100%' }), previewImgInfo = _v[0], setPreviewImgInfo = _v[1];
var currentAttachment = (0, react_1.useRef)({});
var currentPdfIndex = (0, react_1.useRef)(1);
var currentVisiblePdf = (0, react_1.useRef)([]);
var mainContentRef = (0, react_1.useRef)(null);
var thumbContentRef = (0, react_1.useRef)(null);
var _w = (0, react_1.useState)(true), mainContentLoading = _w[0], setMainContentLoading = _w[1];
var currentPdfScale = (0, react_1.useRef)(1);
var initPdfInfo = (0, react_1.useRef)({ width: 0, height: 0 });
var thumbInitPdfInfo = (0, react_1.useRef)({ width: undefined, height: 70 });
var currentThumbInfoRef = (0, react_1.useRef)({ width: undefined, height: 70, });
var currentPdfSizeInfo = (0, react_1.useRef)({ width: 0, height: 0 });
var pdfScaleHandler = function (toScale, type) {
var _a;
if (mainContentRef.current) {
var pdfPageList = mainContentRef.current.querySelectorAll('.preview-pdf-page .react-pdf__Page');
var width_1, height_1, formattedWidth_1, formattedHeight_1;
var pdfRenderContainer = document.querySelector('.pdf-render-container');
var _b = (((_a = previewRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {}).width, bodyWidth = _b === void 0 ? 0 : _b;
var thumbContainer = pdfRenderContainer === null || pdfRenderContainer === void 0 ? void 0 : pdfRenderContainer.querySelector('.pdf-side-content');
// 目标宽度，为pdf区域的5/6宽度
var targetWidth_1 = (Number(bodyWidth) - Number(thumbContainer === null || thumbContainer === void 0 ? void 0 : thumbContainer.clientWidth)) * (5 / 6);
var _c = initPdfInfo.current, initWidth_1 = _c.width, initHeight_1 = _c.height;
Array.from(pdfPageList).forEach(function (item, index) {
var page = item.parentElement;
var itemSvgBox = item === null || item === void 0 ? void 0 : item.querySelector('.react-pdf__Page__svg');
var itemTextContent = item === null || item === void 0 ? void 0 : item.querySelector('.react-pdf__Page__textContent');
var itemSvg = itemSvgBox === null || itemSvgBox === void 0 ? void 0 : itemSvgBox.querySelector('svg');
var _a = itemSvgBox !== null && itemSvgBox !== void 0 ? itemSvgBox : {}, svgWidth = _a.clientWidth, svgHeight = _a.clientHeight;
if (type === 'initial') {
formattedWidth_1 = initWidth_1 || svgWidth;
formattedHeight_1 = initHeight_1 || svgHeight;
}
else if (type === 'full') {
// 配置全屏
formattedWidth_1 = targetWidth_1;
formattedHeight_1 = (formattedWidth_1 / svgWidth) * svgHeight;
}
else {
width_1 = "".concat(svgWidth);
height_1 = "".concat(svgHeight);
formattedWidth_1 = Number(width_1.replaceAll('px', ''));
formattedHeight_1 = Number(height_1.replaceAll('px', ''));
}
var diffWidth = Number((formattedWidth_1)) * toScale;
var diffHeight = Number((formattedHeight_1)) * toScale;
var finalWidth = formattedWidth_1 + diffWidth;
var finalHeight = formattedHeight_1 + diffHeight;
if (page) {
page.style.minHeight = 'unset';
}
currentPdfSizeInfo.current = {
width: finalWidth,
height: finalHeight
};
if (itemSvgBox) {
itemSvgBox.style.width = finalWidth + 'px';
itemSvgBox.style.height = finalHeight + 'px';
}
if (itemSvg) {
itemSvg.setAttribute('width', finalWidth);
itemSvg.setAttribute('height', finalHeight);
}
if (itemTextContent) {
itemTextContent.style.width = finalWidth + 'px';
itemTextContent.style.height = finalHeight + 'px';
}
});
}
};
var handleThumbScale = function () {
var _a;
// 左侧缩略图缩放 比例约为弹窗的16%宽度，最小160px
if (thumbContentRef.current) {
var thumbPageList = thumbContentRef.current.querySelectorAll('.aside-preview-item');
var _b = (((_a = previewRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {}).width, bodyWidth = _b === void 0 ? 0 : _b;
// 侧边栏宽度约为弹窗的16%的宽度，最小160px，宽度过小则不进行缩放
var asideWidth_1 = Number(bodyWidth * 0.16 <= 160 ? 160 : Number(bodyWidth * 0.16).toFixed(2));
if (asideWidth_1 < 160)
return;
thumbContentRef.current.style.width = asideWidth_1 + 'px';
var scaleRatio_1 = asideWidth_1 / 160;
var width_2, height_2, formattedWidth_2, formattedHeight_2;
var _c = thumbInitPdfInfo.current, svgWidth_1 = _c.width, svgHeight_1 = _c.height;
Array.from(thumbPageList).forEach(function (item) {
var pdfPageItem = item.querySelector('.preview-pdf-page');
var pdfItem = pdfPageItem === null || pdfPageItem === void 0 ? void 0 : pdfPageItem.querySelector('.react-pdf__Page');
var svgPageItem = pdfItem === null || pdfItem === void 0 ? void 0 : pdfItem.querySelector('.react-pdf__Page__svg');
var svgItem = svgPageItem === null || svgPageItem === void 0 ? void 0 : svgPageItem.querySelector('svg');
width_2 = "".concat(svgWidth_1);
height_2 = "".concat(svgHeight_1);
formattedWidth_2 = Number(width_2.replaceAll('px', ''));
formattedHeight_2 = Number(height_2.replaceAll('px', ''));
var diffWidth = Number((formattedWidth_2)) * scaleRatio_1;
var finalWidth = diffWidth;
var finalHeight = Number(formattedHeight_2) * scaleRatio_1;
currentThumbInfoRef.current = {
width: finalWidth,
height: finalHeight
};
if (pdfPageItem) {
pdfPageItem.style.width = (asideWidth_1 - 40) + 'px';
pdfPageItem.style.minHeight = (finalHeight) + 'px';
}
if (svgPageItem) {
svgPageItem.style.width = finalWidth + 'px';
svgPageItem.style.height = (finalHeight) + 'px';
}
if (svgItem) {
svgItem.setAttribute('width', finalWidth);
svgItem.setAttribute('height', finalHeight);
}
});
}
};
// 获取对应区间的缩放值
var getScaleNum = function (scale, newScale) {
var _a;
var initScale = scale;
// 如果从默认值1开始，先和newScale相加，判断是走哪个档位
if (scale === 1) {
initScale = newScale > 0 ? 1.2 : 0.8;
}
else if (scale > 1) {
// 大于1的情况下，继续放大的值会比较大
var diffScale = (scale > 2.5 ? 3 : 0.5) * (newScale > 0 ? 1 : -1);
initScale = (initScale + diffScale) < 0 ? 1.1 : (initScale + diffScale);
}
else if (scale < 1) {
// 小于1的情况下，继续缩小的值会比较小
if (newScale > 0) {
initScale = initScale + 0.2;
}
else {
initScale = initScale - 0.1 < 0.1 ? 0.1 : initScale - 0.1;
}
}
var finalScale = Number(initScale.toFixed(1));
// 缩放比例小于1.2 则强制居中，避免看不见内容
if (finalScale < 1.2) {
(_a = dragRef.current) === null || _a === void 0 ? void 0 : _a.updatePosition({ x: 0, y: 0 });
}
return finalScale;
};
var onWheel = function (e) {
var _a, _b;
// 其他格式，需要加ctrl + 滚轮
var fileType = (_b = (_a = currentAttachment.current) === null || _a === void 0 ? void 0 : _a.previewTitle) !== null && _b !== void 0 ? _b : '';
if (e.ctrlKey) {
if ((0, utils_1.isPdf)(fileType)) {
e.stopPropagation();
e.preventDefault();
var toScale = e.deltaY > 0 ? -0.3 : 0.3;
pdfScaleHandler(toScale);
}
}
else {
if (!(0, utils_1.isPdf)(fileType)) {
e.stopPropagation();
// e.preventDefault();
// 往下滚 缩小
if (e.deltaY > 0) {
setScale(function (oldScale) { return getScaleNum(oldScale, -1); });
}
// 往上滚 放大
else {
setScale(function (oldScale) { return getScaleNum(oldScale, 1); });
}
}
}
};
var handleScaleByButton = function (toScale) {
if ((0, utils_1.isPdf)(currentItemFileType)) {
pdfScaleHandler(toScale);
}
else {
// setScale((value) => Number(Number(value + toScale <= 0.2 ? 0.2 : value + toScale).toFixed(1)))
setScale(function (value) { return getScaleNum(value, toScale); });
}
};
(0, react_1.useImperativeHandle)(ref, function () { return ({
handleNext: handleNext,
handlePrev: handlePrev,
handlePdfNext: handlePdfNext,
handlePdfPrev: handlePdfPrev,
handleGetOriginSize: handleGetOriginSize,
handleRescaleRatio: handleRescaleRatio,
resizeEnd: resizeEnd
}); });
var handleRescaleRatio = function (isInit) {
setTimeout(function () {
var _a, _b;
// const { width: bodyWidth = 0 } = previewRef.current?.getBoundingClientRect() || {};
var pdfRenderContainer = document.querySelector('.pdf-render-container');
var firstPage = pdfRenderContainer === null || pdfRenderContainer === void 0 ? void 0 : pdfRenderContainer.querySelector('.main-item-container .preview-pdf-page.is-content-1 .react-pdf__Page');
var pdfWidth = (_a = firstPage === null || firstPage === void 0 ? void 0 : firstPage.clientWidth) !== null && _a !== void 0 ? _a : 0;
var pdfHeight = (_b = firstPage === null || firstPage === void 0 ? void 0 : firstPage.clientHeight) !== null && _b !== void 0 ? _b : 0;
// 目标宽度为主内容容器宽度的5/6;
// const scale = pdfWidth > 0 ? Number((Number((bodyWidth - (pdfSideContent?.clientWidth ?? 0)) / pdfWidth) || 1).toFixed(2)) : 1;
if (pdfWidth || pdfHeight) {
currentPdfSizeInfo.current = {
width: pdfWidth,
height: pdfHeight
};
}
handleThumbScale();
pdfScaleHandler(0, 'full');
}, 100);
};
var resizeEnd = (0, lodash_2.throttle)(function () {
var _a, _b, _c, _d;
var _e = ((_a = previewRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {}, _f = _e.height, bodyHigh = _f === void 0 ? 0 : _f, _g = _e.width, bodyWidth = _g === void 0 ? 0 : _g;
// 文件高度 = 整个Modal高度 - title高度 - 底部操作栏高度(文件名+文件列表（文件数量大于1才有）+ 底部工具栏) - padding等边距
var finalHeight = bodyHigh - previewTitleHigh.current - (states.mediaListShow && ((_b = previewInfo.list) === null || _b === void 0 ? void 0 : _b.length) > 1 ? (previewHeight) : (toolHigh));
if ((0, utils_1.isPdf)((_d = (_c = currentAttachment.current) === null || _c === void 0 ? void 0 : _c.previewTitle) !== null && _d !== void 0 ? _d : '')) {
setFileWidth(bodyWidth);
setFileHigh(finalHeight);
// pdf文件默认要宽度占满，需计算缩放值，暂时不进行缩放
// 2025-07-28 需要将文档宽度设置为100%
handleRescaleRatio();
// 即时计算缩略图宽度
// handleThumbScale();
}
else {
// 初始化缩放值
setFileWidth(bodyWidth);
setFileHigh(finalHeight);
handleResetMoveData();
}
}, 300);
var previewRefFn = (0, react_1.useCallback)(function (e) {
var _a;
if (e) {
// 找到content来进行计算
var contentDom = helper_1.domUtils.closest(e, '.ant-modal-content');
previewRef.current = contentDom;
previewTitleHigh.current = ((_a = contentDom.querySelector('.ant-modal-header')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
}
}, []);
var handleResetMoveData = function () {
setTimeout(function () {
var _a;
setScale(1);
setRotate(0);
currentPdfScale.current = 1;
(_a = dragRef.current) === null || _a === void 0 ? void 0 : _a.updatePosition({ x: 0, y: 0 });
}, 30);
};
var handleUnionImgShow = function (show) {
var _a;
var selectList = states.selectList, items = states.items;
// 分割为20一个的数组
var totalUnionList = (0, lodash_2.chunk)(selectList, 20);
// 在并图开始与还原时，需要更新顶部标题文件名
handleFileSelect({ title: show ? '' : (_a = currentAttachment.current) === null || _a === void 0 ? void 0 : _a.previewTitle });
if (show) {
if (selectList.length < 2) {
msgsub_1.default._warning('请至少选择2张图片进行并图');
return;
}
// if (selectList.length > 20) {
// MSG._warning('最多可选20张进行并图')
// return
// }
var unionList_1 = items.filter(function (_, mediaIndex) { return totalUnionList[0].includes(mediaIndex); });
setStates(function (data) { return (tslib_1.__assign(tslib_1.__assign({}, data), { unionImgShow: show, unionList: unionList_1, totalUnionList: totalUnionList, selectUnionImgIndex: 0 })); });
}
else {
setStates(function (data) { return (tslib_1.__assign(tslib_1.__assign({}, data), { unionImgShow: show, unionList: [], totalUnionList: [], selectUnionImgIndex: 0 })); });
requestAnimationFrame(function () {
handleResetMoveData();
});
}
};
// 切换缩略图列表是否展示
var handleToggleMediaListShow = function () {
setStates(function (data) { return (tslib_1.__assign(tslib_1.__assign({}, data), { mediaListShow: !data.mediaListShow })); });
};
// 并图勾选中
var handleUnionSelecting = function (show) {
if (!states.mediaListShow)
return;
setStates(function (data) { return (tslib_1.__assign(tslib_1.__assign({}, data), { unionSelecting: show })); });
};
// 多选
var handleMediaListSelect = function (index) {
var unionSelecting = states.unionSelecting, _a = states.selectList, selectList = _a === void 0 ? [] : _a;
if (unionSelecting) {
var newSelectList_1 = tslib_1.__spreadArray([], selectList, true);
if (newSelectList_1.includes(index)) {
newSelectList_1 = newSelectList_1.filter(function (item) { return item !== index; });
}
else {
newSelectList_1.push(index);
}
setStates(function (data) { return (tslib_1.__assign(tslib_1.__assign({}, data), { selectList: newSelectList_1 })); });
}
else {
if (index === states.index)
return;
var targetItem = allAttachment[index];
var fileSize = targetItem.fileSize;
if (fileSize > limitSize) {
antd_1.message.info('大于10M的文件请下载后查看');
return false;
}
// setSelectAttachment(() => allAttachment[index]);
setMainContentLoading(true);
currentAttachment.current = targetItem;
// currentAttachment.current = {...targetItem, originalSrc: 'https://sasdev.sanfu.com/saas_dev' + targetItem.originalSrc};
setFileHigh(0);
setPageIndex(index);
setPageNumber(1);
initPdfInfo.current = {
width: 0,
height: 0
};
currentPdfSizeInfo.current = {
width: 0,
height: 0
};
thumbInitPdfInfo.current = {
width: undefined,
height: 70
};
currentThumbInfoRef.current = {
width: undefined,
height: 70
};
currentPdfIndex.current = 1;
currentVisiblePdf.current = [1];
onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(targetItem);
setStates(function (data) { return (tslib_1.__assign(tslib_1.__assign({}, data), { index: index })); });
// setThumbLoading(true);
if (targetItem['isNotImg']) {
resizeEnd();
}
}
};
//全选
var handleSelectAll = function (selectList) {
// const selectList = states.items?.map((_, index) => index);
setStates(function (data) { return (tslib_1.__assign(tslib_1.__assign({}, data), { selectList: selectList })); });
};
//反选
var handleSelectReverse = function (deSelectList) {
setStates(function (data) { return (tslib_1.__assign(tslib_1.__assign({}, data), { selectList: deSelectList })); });
};
// 切换到下一个文件
var handleNext = function () {
var index = states.index, items = states.items, unionImgShow = states.unionImgShow, unionList = states.unionList, selectUnionImgIndex = states.selectUnionImgIndex, totalUnionList = states.totalUnionList;
// 如果是并图模式
if (unionImgShow && (unionList === null || unionList === void 0 ? void 0 : unionList.length)) {
if (selectUnionImgIndex >= totalUnionList.length - 1)
return;
var nextIndex_1 = selectUnionImgIndex + 1;
var newUnionList_1 = items.filter(function (_, mediaIndex) { return totalUnionList[nextIndex_1].includes(mediaIndex); });
setStates(function (data) { return (tslib_1.__assign(tslib_1.__assign({}, data), { index: nextIndex_1, selectUnionImgIndex: nextIndex_1, unionList: newUnionList_1 })); });
}
else {
if (index >= items.length - 1)
return;
setFileHigh(0);
var nextIndex_2 = index + 1;
var matchItem = items[nextIndex_2];
if (Number((matchItem === null || matchItem === void 0 ? void 0 : matchItem.fileSize) > limitSize)) {
antd_1.message.info('大于10M的文件请下载后查看');
return false;
}
// setSelectAttachment(matchItem);
currentAttachment.current = matchItem;
setPageIndex(1);
currentPdfIndex.current = 1;
initPdfInfo.current = {
width: 0,
height: 0
};
currentPdfSizeInfo.current = {
width: 0,
height: 0
};
thumbInitPdfInfo.current = {
width: undefined,
height: 70
};
currentThumbInfoRef.current = {
width: undefined,
height: 70
};
setPageNumber(1);
setStates(function (data) { return (tslib_1.__assign(tslib_1.__assign({}, data), { index: nextIndex_2 })); });
onFileSelect(matchItem);
if (matchItem['isNotImg']) {
resizeEnd();
}
}
};
// 切换到上一个文件
var handlePrev = function () {
var index = states.index, items = states.items, unionImgShow = states.unionImgShow, unionList = states.unionList, selectUnionImgIndex = states.selectUnionImgIndex, totalUnionList = states.totalUnionList;
// 如果是并图模式
if (unionImgShow && (unionList === null || unionList === void 0 ? void 0 : unionList.length)) {
if (selectUnionImgIndex === 0)
return;
var prevIndex_1 = selectUnionImgIndex - 1;
var newUnionList_2 = items.filter(function (_, mediaIndex) { return totalUnionList[prevIndex_1].includes(mediaIndex); });
setStates(function (data) { return (tslib_1.__assign(tslib_1.__assign({}, data), { index: prevIndex_1, selectUnionImgIndex: prevIndex_1, unionList: newUnionList_2 })); });
}
else {
if (index === 0)
return;
setFileHigh(0);
var prevIndex_2 = index - 1;
var matchItem = items[prevIndex_2];
// setSelectAttachment(matchItem);
if (Number((matchItem === null || matchItem === void 0 ? void 0 : matchItem.fileSize) > limitSize)) {
antd_1.message.info('大于10M的文件请下载后查看');
return false;
}
currentAttachment.current = matchItem;
initPdfInfo.current = {
width: 0,
height: 0
};
currentPdfSizeInfo.current = {
width: 0,
height: 0
};
thumbInitPdfInfo.current = {
width: undefined,
height: 70
};
currentThumbInfoRef.current = {
width: undefined,
height: 70
};
setPageIndex(1);
currentPdfIndex.current = 1;
setPageNumber(1);
setStates(function (data) { return (tslib_1.__assign(tslib_1.__assign({}, data), { index: prevIndex_2 })); });
onFileSelect(matchItem);
if (matchItem['isNotImg']) {
resizeEnd();
}
}
};
// 切换到文件的下一页
var handlePdfNext = function () {
if (currentIsNotImg) {
setPageIndex(function (index) { return index + 1 > pageNumber ? index : index + 1; });
currentPdfIndex.current = 1;
setPageNumber(1);
}
};
// 切换到文件的上一页
var handlePdfPrev = function () {
if (currentIsNotImg) {
setPageIndex(function (index) { return index - 1 > pageNumber ? index : index - 1; });
currentPdfIndex.current = 1;
setPageNumber(1);
}
};
var handleGetOriginSize = function (isResetMaxWidth) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
if ((0, utils_1.isPdf)(currentItemFileType)) {
handleResetPdfSize();
return [2 /*return*/];
}
handleResetMoveData();
// 获取原始尺寸
if (!currentIsNotImg) {
// 如果是显示原始尺寸
if (isResetMaxWidth) {
setMaxImgWidth(undefined);
setPreviewImgInfo({
width: undefined,
height: undefined
});
}
// setScale(1);
}
else {
requestAnimationFrame(function () {
resizeEnd();
});
}
return [2 /*return*/];
});
}); };
var handleInitFirstPageSize = function () {
// const { width: bodyWidth = 0 } = previewRef.current?.getBoundingClientRect() || {};
setTimeout(function () {
var _a, _b, _c;
var pdfRenderContainer = document.querySelector('.pdf-render-container');
var firstPage = pdfRenderContainer === null || pdfRenderContainer === void 0 ? void 0 : pdfRenderContainer.querySelector('.main-item-container .preview-pdf-page.is-content-1 .react-pdf__Page');
var pdfWidth = (_a = firstPage === null || firstPage === void 0 ? void 0 : firstPage.clientWidth) !== null && _a !== void 0 ? _a : 0;
var pdfHeight = (_b = firstPage === null || firstPage === void 0 ? void 0 : firstPage.clientHeight) !== null && _b !== void 0 ? _b : 0;
// const thumbContainer = pdfRenderContainer?.querySelector('.pdf-side-content');
// const pdfRatio = pdfWidth / pdfHeight;
var thumbPdfRenderContainer = document.querySelector('.aside-item-container');
var thumbFirstPage = thumbPdfRenderContainer === null || thumbPdfRenderContainer === void 0 ? void 0 : thumbPdfRenderContainer.querySelector('.preview-pdf-page.is-aside-1 .react-pdf__Page');
// const finalWidth = (Number(FileWidth) - Number(thumbContainer?.clientWidth)) * (4 / 5);
// const scaleRatio = finalWidth / pdfWidth;
// debugger;
initPdfInfo.current = {
width: pdfWidth,
height: pdfHeight
};
thumbInitPdfInfo.current = {
width: thumbFirstPage === null || thumbFirstPage === void 0 ? void 0 : thumbFirstPage.clientWidth,
height: (_c = thumbFirstPage === null || thumbFirstPage === void 0 ? void 0 : thumbFirstPage.clientHeight) !== null && _c !== void 0 ? _c : 70
};
handleThumbScale();
pdfScaleHandler(0, 'full');
// currentPdfSizeInfo.current = {
// width: FileWidth,
// height: FileHigh
// }
}, 300);
};
// 适应图片大小
var handleSetImgMatch = function () {
var _a, _b;
// 如果是图片
if (!currentIsNotImg) {
setMaxImgWidth('100%');
var _c = (_a = previewRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), width = _c.width, height = _c.height;
// const finalHeight = height - (states.mediaListShow && previewInfo?.list?.length > 1 ? previewHeight : toolHigh) - previewTitleHigh.current + 4;
var finalHeight = height - previewTitleHigh.current - (states.mediaListShow && ((_b = previewInfo.list) === null || _b === void 0 ? void 0 : _b.length) > 1 ? (previewHeight) : (toolHigh));
setFileHigh(finalHeight);
setPreviewImgInfo({
width: Number(width) > 0 ? width + 'px' : undefined,
height: Number(finalHeight) > 0 ? finalHeight + 'px' : undefined
});
}
else {
requestAnimationFrame(function () {
if ((0, utils_1.isPdf)(currentItemFileType)) {
// handleResetPdfSize();
handleRescaleRatio();
}
else {
resizeEnd();
}
});
}
handleResetMoveData();
};
var handleImgLoad = function () {
handleSetImgMatch();
};
(0, react_1.useEffect)(function () {
var _a, _b;
if (previewInfo) {
var _c = previewInfo.list, list_1 = _c === void 0 ? [] : _c, _d = previewInfo.index, index_1 = _d === void 0 ? 0 : _d;
var matchItem = (_a = list_1 === null || list_1 === void 0 ? void 0 : list_1[index_1]) !== null && _a !== void 0 ? _a : {};
// setSelectAttachment(matchItem);
currentAttachment.current = tslib_1.__assign(tslib_1.__assign({}, matchItem), {
// originalSrc: (!matchItem.isNotImg ? '' : 'https://sasdev.sanfu.com/saas_dev') + matchItem.originalSrc
originalSrc: matchItem.originalSrc });
setAllAttachment(list_1);
setStates(function (data) { return (tslib_1.__assign(tslib_1.__assign({}, data), { items: list_1 !== null && list_1 !== void 0 ? list_1 : [], index: index_1 })); });
if (matchItem['isNotImg']) {
resizeEnd();
}
}
(_b = document.querySelector('.preview-pdf-container')) === null || _b === void 0 ? void 0 : _b.addEventListener('wheel', onWheel, { passive: false });
document.body.addEventListener(types_1.ResizeEvent.DIALOGRESIZEENDEVENT, resizeEnd);
return function () {
var _a;
(_a = document.querySelector('.preview-pdf-container')) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', onWheel);
document.body.removeEventListener(types_1.ResizeEvent.DIALOGRESIZEENDEVENT, resizeEnd);
};
}, []);
// 当前选中的文件
// const currentItem = useMemo(() => {
// return states.items?.[states.index] ?? {}
// }, [states.index, states.items]);
// 当前是否不是图片
var currentIsNotImg = (0, react_1.useMemo)(function () {
return currentAttachment.current.isNotImg;
}, [currentAttachment.current]);
var currentIsKKFile = (0, react_1.useMemo)(function () {
var _a;
return ((_a = currentAttachment.current) === null || _a === void 0 ? void 0 : _a.previewType) === 1;
}, [currentAttachment.current]);
// 当前文件类型
var currentItemFileType = (0, react_1.useMemo)(function () {
var fileType = (0, utils_1.getFileType)(currentAttachment.current.previewTitle);
return "file.".concat(fileType);
}, [currentAttachment.current]);
// 生成className
var genItemClassName = (0, react_1.useMemo)(function () {
var items = states.items;
// 是否所有都是图片
var isAllImg = items.every(function (item) { return !(item === null || item === void 0 ? void 0 : item.isNotImg); });
// 所有都是图片的话，左右就都显示，切换上下个图片， 有文件的话，图片就不显示切换，文件显示切换
// return isAllImg ? false : !items[index]?.isNotImg;
// 如果当前是图片，且全部都是图片，但是就一张图片，就不显示左右箭头
var isMoreClassName = items.length > 1 ? [] : ['hidden'];
var prevClassName = isAllImg ? isMoreClassName : [];
var nextClassName = isAllImg ? isMoreClassName : [];
// 如果当前是图片，且全部都是图片，但是如果是在第一个或者最后一个，则disable
if (isAllImg) {
if (states.index < 1) {
prevClassName.push('hidden');
}
else {
prevClassName = prevClassName.filter(function (item) { return item !== 'hidden'; });
}
if (states.index >= items.length - 1) {
nextClassName.push('hidden');
}
else {
nextClassName = nextClassName.filter(function (item) { return item !== 'hidden'; });
}
}
else {
// const { isNotImg } = currentItem;
// 如果是文件与图片混合的情况
// 如果当前是文件
if (currentIsNotImg) {
if (states.items.length > 1) {
if (states.index < 1) {
prevClassName.push('hidden');
}
else {
prevClassName = prevClassName.filter(function (item) { return item !== 'hidden'; });
}
if (states.index >= items.length - 1 && pageIndex === pageNumber) {
nextClassName.push('hidden');
}
else {
nextClassName = nextClassName.filter(function (item) { return item !== 'hidden'; });
}
}
else {
if (pageIndex === 1) {
prevClassName.push('hidden');
}
else {
prevClassName = prevClassName.filter(function (item) { return item !== 'hidden'; });
}
if (pageIndex === pageNumber) {
nextClassName.push('hidden');
}
else {
nextClassName = nextClassName.filter(function (item) { return item !== 'hidden'; });
}
}
}
else {
// 当前是图片，且在第一张或最后一张，就隐藏上一个/下一个按钮
if (states.index < 1) {
prevClassName.push('hidden');
}
else {
prevClassName = prevClassName.filter(function (item) { return item !== 'hidden'; });
}
if (states.index >= items.length - 1) {
nextClassName.push('hidden');
}
else {
nextClassName = nextClassName.filter(function (item) { return item !== 'hidden'; });
}
}
}
return {
prev: prevClassName.join(' '),
next: nextClassName.join(' '),
};
}, [states.index, states.items, currentAttachment.current, pageIndex, pageNumber, currentIsNotImg]);
var handleFileToggle = function (index, type) {
// const { isNotImg } = currentItem;
// 如果是文件，在非第一个文件，在第一页的时候，可以且到上一个文件，同理，在最后一页的时候，可以切到下一个文件
currentIsNotImg ? (type === 'next' ?
((pageIndex === pageNumber && states.index < states.items.length - 1) ? handleNext() : handlePdfNext())
:
((pageIndex === 1 && states.index >= 1) ? handlePrev() : handlePdfPrev()))
: (type === 'next' ? handleNext() : handlePrev());
};
// 渲染当前索引
var handleGenPreviewIndex = (0, react_1.useMemo)(function () {
var _a;
var items = states.items;
var isAllImg = items.every(function (item) { return !(item === null || item === void 0 ? void 0 : item.isNotImg); });
return (react_1.default.createElement("div", { className: "preview-tools-item preview-tools-item-index" }, isAllImg ?
react_1.default.createElement(react_1.default.Fragment, null,
states.index + 1,
"\u00A0/\u00A0", (_a = states.items) === null || _a === void 0 ? void 0 :
_a.length) : react_1.default.createElement(react_1.default.Fragment, null, (0, utils_1.isPdf)(currentItemFileType) ? (react_1.default.createElement(react_1.default.Fragment, null,
currentPdfIndex.current <= 1 ? 1 : currentPdfIndex.current,
"\u00A0/\u00A0",
pageNumber)) : (react_1.default.createElement(react_1.default.Fragment, null, "1\u00A0/\u00A01")))));
}, [states.items, states.index, pageIndex, pageNumber, currentAttachment.current, currentIsNotImg, currentItemFileType, currentPdfIndex.current]);
var handleJumpToTarget = function (index, isAside) {
if (!isAside)
return;
var container = document.querySelector('.pdf-main-content');
var targetItem = container === null || container === void 0 ? void 0 : container.querySelector(".preview-pdf-page.is-content-".concat(index));
var offsetTop = (targetItem !== null && targetItem !== void 0 ? targetItem : {}).offsetTop;
currentVisiblePdf.current = Array.from(new Set(currentVisiblePdf.current.concat(index)));
setPageIndex(index);
currentPdfIndex.current = index;
container === null || container === void 0 ? void 0 : container.scrollTo({ top: offsetTop, behavior: 'auto', left: 0 });
};
var observedPages = (0, react_1.useRef)([]);
var observedContent = (0, react_1.useRef)([]);
var handleAsideSelected = function (currentIndex) {
var sideContainer = document.querySelector('.pdf-side-content');
var thumbContainer = sideContainer === null || sideContainer === void 0 ? void 0 : sideContainer.querySelector('.pdf-side-content .aside-item-container');
var targetItem = thumbContainer === null || thumbContainer === void 0 ? void 0 : thumbContainer.querySelector(".aside-preview-item.item-".concat(currentIndex));
var previewItems = thumbContainer === null || thumbContainer === void 0 ? void 0 : thumbContainer.querySelectorAll('.aside-preview-item');
if (previewItems) {
Array.from(previewItems).forEach(function (item) {
item.classList.remove('active');
});
}
if (targetItem) {
var offsetTop = targetItem.offsetTop, clientHeight = targetItem.clientHeight;
sideContainer === null || sideContainer === void 0 ? void 0 : sideContainer.scrollTo({ top: offsetTop - 32 - (clientHeight / 2), left: 0, behavior: 'smooth' });
targetItem === null || targetItem === void 0 ? void 0 : targetItem.classList.add('active');
}
// setPageIndex(currentIndex);
};
// useEffect(() => {
// console.log('debug-observedContent.current', observedContent.current);
// const index = observedContent.current[0];
// currentPdfIndex.current = index;
// setPageIndex(index);
// handleAsideSelected(index);
// }, [observedContent.current]);
var ObserverPage = function (_a) {
var index = _a.index, height = _a.height, _b = _a.isAside, isAside = _b === void 0 ? false : _b, _c = _a.style, style = _c === void 0 ? {} : _c, width = _a.width;
var pageRef = (0, react_1.useRef)(null);
var _d = (0, react_1.useState)(-1), targetIndex = _d[0], setTargetIndex = _d[1];
(0, react_1.useEffect)(function () {
var observer;
if (pageRef.current) {
// 创建实例
observer = new IntersectionObserver(function (_a) {
var entry = _a[0];
if (entry.isIntersecting) {
if (!isAside) {
// 显示对应页码的内容
setTargetIndex(index);
//
var uniqueArr = Array.from(new Set(observedContent.current.concat(index)));
var filteredArr = uniqueArr.filter(function (item) { return Math.abs(item - index) <= 3; });
observedContent.current = (0, lodash_1.orderBy)(filteredArr);
// observedContent.current = orderBy(Array.from(new Set(observedContent.current.concat(index))));
// observedContent.current = orderBy(Array.from(new Set(observedContent.current.concat(index))));
var len = observedContent.current.length;
var targetIdx = len < 2 ? 0 : 1;
var finalIndex = observedContent.current[targetIdx];
// if (targetIdx === 0 && len >= 2 && (Number(observedContent.current[targetIdx + 1]) - Number(observedContent.current[targetIdx]) > 3)) {
// // // setTargetIndex(targetIndex + 1);
// // finalIndex = observedContent.current[1];
// // const cacheArr = Array.from(observedContent.current);
// // cacheArr.shift();
// // observedContent.current = cacheArr;
// }
currentPdfIndex.current = finalIndex;
setPageIndex(finalIndex);
handleAsideSelected(finalIndex);
// handleAsideSelected(index);
// currentPdfIndex.current = index;
// setPageIndex(index);
}
else {
se