fix(view):更换虚拟列表支持库，以解决缩放存在的问题。
This commit is contained in:
徐涛
parent
925b055318
commit
3e6b89ab39
|
|
@ -29,7 +29,7 @@
|
|||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-use": "^17.4.0",
|
||||
"react-window": "^1.8.8",
|
||||
"react-virtuoso": "^4.1.0",
|
||||
"use-immer": "^0.8.1",
|
||||
"zustand": "^4.2.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ specifiers:
|
|||
react: ^18.2.0
|
||||
react-dom: ^18.2.0
|
||||
react-use: ^17.4.0
|
||||
react-window: ^1.8.8
|
||||
react-virtuoso: ^4.1.0
|
||||
typescript: ^4.6.4
|
||||
use-immer: ^0.8.1
|
||||
vite: ^4.0.0
|
||||
|
|
@ -53,7 +53,7 @@ dependencies:
|
|||
react: 18.2.0
|
||||
react-dom: 18.2.0_react@18.2.0
|
||||
react-use: 17.4.0_biqbaboplfbrettd7655fr4n2y
|
||||
react-window: 1.8.8_biqbaboplfbrettd7655fr4n2y
|
||||
react-virtuoso: 4.1.0_biqbaboplfbrettd7655fr4n2y
|
||||
use-immer: 0.8.1_immer@9.0.19+react@18.2.0
|
||||
zustand: 4.3.6_immer@9.0.19+react@18.2.0
|
||||
|
||||
|
|
@ -1526,10 +1526,6 @@ packages:
|
|||
resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
|
||||
dev: false
|
||||
|
||||
/memoize-one/5.2.1:
|
||||
resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
|
||||
dev: false
|
||||
|
||||
/ms/2.1.2:
|
||||
resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
|
||||
dev: true
|
||||
|
|
@ -1750,15 +1746,13 @@ packages:
|
|||
tslib: 2.5.0
|
||||
dev: false
|
||||
|
||||
/react-window/1.8.8_biqbaboplfbrettd7655fr4n2y:
|
||||
resolution: {integrity: sha512-D4IiBeRtGXziZ1n0XklnFGu7h9gU684zepqyKzgPNzrsrk7xOCxni+TCckjg2Nr/DiaEEGVVmnhYSlT2rB47dQ==}
|
||||
engines: {node: '>8.0.0'}
|
||||
/react-virtuoso/4.1.0_biqbaboplfbrettd7655fr4n2y:
|
||||
resolution: {integrity: sha512-Vcq5WXn18PvPT55kdeGQ8BN3K95XyPe7hum8zG6Tx7g1CtUYVsQKN7fouMxBSy+XymEDB5ynGy8JWhuqyLLtPw==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
|
||||
react: '>=16 || >=17 || >= 18'
|
||||
react-dom: '>=16 || >=17 || >= 18'
|
||||
dependencies:
|
||||
'@babel/runtime': 7.21.0
|
||||
memoize-one: 5.2.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0_react@18.2.0
|
||||
dev: false
|
||||
|
|
|
|||
|
|
@ -1,35 +1,34 @@
|
|||
//@ts-nocheck
|
||||
import EventEmitter from 'events';
|
||||
import { indexOf, isEmpty, length, map, mergeLeft, pluck, range } from 'ramda';
|
||||
import { indexOf, isEmpty, length, map, pluck, range } from 'ramda';
|
||||
import { FC, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
|
||||
import { VariableSizeList } from 'react-window';
|
||||
import { ListRange, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
|
||||
import { EventBusContext } from '../EventBus';
|
||||
import { sortedFilesSelector, useFileListStore } from '../states/files';
|
||||
import { useZoomState } from '../states/zoom';
|
||||
|
||||
export const ContinuationView: FC = () => {
|
||||
const files = useFileListStore(sortedFilesSelector());
|
||||
const zoom = useZoomState.use.currentZoom();
|
||||
const viewHeight = useZoomState.use.viewHeight();
|
||||
const { currentZoom: zoom, viewWidth, viewHeight } = useZoomState();
|
||||
const updateActives = useFileListStore.use.updateActiveFiles();
|
||||
const fileCount = useMemo(() => length(files), [files]);
|
||||
const ebus = useContext<EventEmitter>(EventBusContext);
|
||||
const virtualListRef = useRef<VariableSizeList | null>();
|
||||
const virtualListRef = useRef<VirtuosoHandle | null>(null);
|
||||
const handleOnRenderAction = useCallback(
|
||||
({ visibleStartIndex, visibleStopIndex }) => {
|
||||
updateActives(map(i => files[i].filename, range(visibleStartIndex, visibleStopIndex + 1)));
|
||||
({ startIndex, endIndex }: ListRange) => {
|
||||
updateActives(map(i => files[i].filename, range(startIndex, endIndex + 1)));
|
||||
},
|
||||
[files]
|
||||
);
|
||||
const fileHeights = useMemo(() => map(item => item.height * (zoom / 100), files), [files, zoom]);
|
||||
const maxImageWidth = useMemo(() => viewWidth * (zoom / 100), [viewWidth, zoom]);
|
||||
|
||||
useEffect(() => {
|
||||
ebus?.addListener('navigate_offset', ({ filename }) => {
|
||||
let index = indexOf(filename, pluck('filename', files));
|
||||
virtualListRef.current?.scrollToItem(index);
|
||||
virtualListRef.current?.scrollToIndex({ index, align: 'start', behavior: 'smooth' });
|
||||
});
|
||||
ebus?.addListener('reset_views', () => {
|
||||
virtualListRef.current?.scrollTo(0);
|
||||
virtualListRef.current?.scrollTo({ top: 0 });
|
||||
});
|
||||
return () => {
|
||||
ebus?.removeAllListeners('navigate_offset');
|
||||
|
|
@ -46,29 +45,27 @@ export const ContinuationView: FC = () => {
|
|||
}}
|
||||
>
|
||||
{!isEmpty(files) && (
|
||||
<VariableSizeList
|
||||
itemData={files}
|
||||
itemCount={fileCount}
|
||||
itemSize={index => fileHeights[index]}
|
||||
itemKey={index => files[index].id}
|
||||
height={viewHeight}
|
||||
width="100%"
|
||||
<Virtuoso
|
||||
style={{ height: viewHeight }}
|
||||
ref={virtualListRef}
|
||||
onItemsRendered={handleOnRenderAction}
|
||||
>
|
||||
{({ index, style, data }) => (
|
||||
totalCount={fileCount}
|
||||
computeItemKey={index => files[index].id}
|
||||
rangeChanged={handleOnRenderAction}
|
||||
itemContent={index => (
|
||||
<div
|
||||
style={mergeLeft(style, {
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start'
|
||||
})}
|
||||
alignItems: 'flex-start',
|
||||
width: '100%',
|
||||
height: files[index].height * (maxImageWidth / files[index].width)
|
||||
}}
|
||||
>
|
||||
<img src={data[index].path} style={{ width: data[index].width * (zoom / 100) }} />
|
||||
<img src={files[index].path} style={{ width: maxImageWidth }} />
|
||||
</div>
|
||||
)}
|
||||
</VariableSizeList>
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
//@ts-nocheck
|
||||
import { Box, Center, Text, Tooltip } from '@mantine/core';
|
||||
import EventEmitter from 'events';
|
||||
import { head, includes, indexOf, isEmpty, length, mergeLeft, not, pluck } from 'ramda';
|
||||
import { head, includes, indexOf, isEmpty, length, not, pluck } from 'ramda';
|
||||
import { FC, useCallback, useContext, useLayoutEffect, useMemo, useRef } from 'react';
|
||||
import { useMeasure } from 'react-use';
|
||||
import { FixedSizeList } from 'react-window';
|
||||
import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
|
||||
import { EventBusContext } from '../EventBus';
|
||||
import { sortedFilesSelector, useFileListStore } from '../states/files';
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ export const FileList: FC = () => {
|
|||
const ebus = useContext<EventEmitter>(EventBusContext);
|
||||
const filesCount = useMemo(() => length(files), [files]);
|
||||
const [parentRef, { height: parentHeight }] = useMeasure();
|
||||
const listRef = useRef<FixedSizeList | null>();
|
||||
const listRef = useRef<VirtuosoHandle | null>(null);
|
||||
const handleFileSelectAction = useCallback(
|
||||
(filename: string) => {
|
||||
ebus.emit('navigate_offset', { filename });
|
||||
|
|
@ -25,7 +25,11 @@ export const FileList: FC = () => {
|
|||
useLayoutEffect(() => {
|
||||
let firstActived = head(activeFiles);
|
||||
let firstActivedIndex = indexOf(firstActived, pluck('filename', files));
|
||||
listRef.current?.scrollToItem(firstActivedIndex, 'smart');
|
||||
listRef.current?.scrollToIndex({
|
||||
index: firstActivedIndex,
|
||||
align: 'center',
|
||||
behavior: 'auto'
|
||||
});
|
||||
}, [activeFiles]);
|
||||
|
||||
return (
|
||||
|
|
@ -37,29 +41,30 @@ export const FileList: FC = () => {
|
|||
ref={parentRef}
|
||||
>
|
||||
{!isEmpty(files) && (
|
||||
<FixedSizeList itemCount={filesCount} itemSize={35} height={parentHeight} ref={listRef}>
|
||||
{({ index, style }) => (
|
||||
<Virtuoso
|
||||
style={{ height: parentHeight }}
|
||||
totalCount={filesCount}
|
||||
ref={listRef}
|
||||
itemContent={index => (
|
||||
<Box
|
||||
bg={includes(files[index].filename, activeFiles) && 'grape'}
|
||||
key={index}
|
||||
px={4}
|
||||
py={2}
|
||||
onClick={() => handleFileSelectAction(files[index].filename)}
|
||||
sx={theme =>
|
||||
mergeLeft(style, {
|
||||
sx={theme => ({
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
color: not(includes(files[index].filename, activeFiles)) && theme.colors.red
|
||||
}
|
||||
})
|
||||
}
|
||||
})}
|
||||
>
|
||||
<Tooltip label={files[index].filename}>
|
||||
<Tooltip label={files[index].filename} zIndex={999}>
|
||||
<Text truncate>{files[index].filename}</Text>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
)}
|
||||
</FixedSizeList>
|
||||
/>
|
||||
)}
|
||||
{isEmpty(files) && (
|
||||
<Center h="100%">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user