@pdftron/webviewer-react-toolkit
Version:
A React component library for integrating with PDFTron WebViewer API.
41 lines (40 loc) • 2.64 kB
JavaScript
import React, { forwardRef, memo, useCallback, useEffect, useMemo } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { FixedSizeGrid } from 'react-window';
import { getItemIndex } from '../../utils';
var MemoGridItem = memo(function (_a) {
var columnIndex = _a.columnIndex, rowIndex = _a.rowIndex, style = _a.style, data = _a.data;
var index = getItemIndex(rowIndex, columnIndex, data.columnCount);
var file = data.files[index];
if (!file)
return null;
return data.renderItem(file, index, style);
});
var MemoGrid = memo(forwardRef(function (_a, ref) {
var width = _a.width, height = _a.height, files = _a.files, padding = _a.padding, renderItem = _a.renderItem, onColumnCountChange = _a.onColumnCountChange, size = _a.size;
var modifiedHeight = height - 2 * padding;
var modifiedWidth = width - 2 * padding;
var data = useMemo(function () {
var columnCount = Math.floor(modifiedWidth / size.width);
if (columnCount > files.length)
columnCount = files.length;
return { files: files, renderItem: renderItem, columnCount: columnCount };
}, [modifiedWidth, size.width, files, renderItem]);
useEffect(function () {
onColumnCountChange(data.columnCount);
}, [onColumnCountChange, data.columnCount]);
return (React.createElement(FixedSizeGrid, { ref: ref, columnWidth: size.width, rowHeight: size.height, height: modifiedHeight, width: modifiedWidth, style: { padding: padding, height: height, width: width }, columnCount: data.columnCount, rowCount: Math.ceil(files.length / data.columnCount), itemData: data, itemKey: function (_a) {
var _b, _c;
var columnIndex = _a.columnIndex, rowIndex = _a.rowIndex;
var index = getItemIndex(rowIndex, columnIndex, data.columnCount);
return (_c = (_b = files[index]) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : index;
} }, MemoGridItem));
}));
export var MemoAutoSizer = memo(forwardRef(function (_a, ref) {
var files = _a.files, padding = _a.padding, size = _a.size, renderItem = _a.renderItem, onColumnCountChange = _a.onColumnCountChange;
var onRenderGrid = useCallback(function (_a) {
var width = _a.width, height = _a.height;
return (React.createElement(MemoGrid, { padding: padding, ref: ref, width: width, height: height, files: files, size: size, renderItem: renderItem, onColumnCountChange: onColumnCountChange }));
}, [padding, ref, files, size, renderItem, onColumnCountChange]);
return React.createElement(AutoSizer, null, onRenderGrid);
}));