mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
added lazy loading to NodeImageSwiperBlock
This commit is contained in:
parent
991f829216
commit
10bb6f01b5
17 changed files with 210 additions and 106 deletions
|
@ -1,7 +1,7 @@
|
|||
import React, { FC, useMemo } from 'react';
|
||||
|
||||
import { ImageUpload } from '~/components/upload/ImageUpload';
|
||||
import { ImagePresets } from '~/constants/urls';
|
||||
import { imagePresets } from '~/constants/urls';
|
||||
import { UploadStatus } from '~/store/uploader/UploaderStore';
|
||||
import { IFile } from '~/types';
|
||||
import { getURL } from '~/utils/dom';
|
||||
|
@ -18,8 +18,18 @@ interface SortableImageGridProps {
|
|||
className?: string;
|
||||
size?: number;
|
||||
}
|
||||
const renderItem = ({ item, onDelete }: { item: IFile; onDelete: (fileId: number) => void }) => (
|
||||
<ImageUpload id={item.id} thumb={getURL(item, ImagePresets.cover)} onDrop={onDelete} />
|
||||
const renderItem = ({
|
||||
item,
|
||||
onDelete,
|
||||
}: {
|
||||
item: IFile;
|
||||
onDelete: (fileId: number) => void;
|
||||
}) => (
|
||||
<ImageUpload
|
||||
id={item.id}
|
||||
thumb={getURL(item, imagePresets.cover)}
|
||||
onDrop={onDelete}
|
||||
/>
|
||||
);
|
||||
|
||||
const renderLocked = ({
|
||||
|
@ -29,7 +39,12 @@ const renderLocked = ({
|
|||
locked: UploadStatus;
|
||||
onDelete: (fileId: number) => void;
|
||||
}) => (
|
||||
<ImageUpload thumb={locked.thumbnail} onDrop={onDelete} progress={locked.progress} uploading />
|
||||
<ImageUpload
|
||||
thumb={locked.thumbnail}
|
||||
onDrop={onDelete}
|
||||
progress={locked.progress}
|
||||
uploading
|
||||
/>
|
||||
);
|
||||
|
||||
const SortableImageGrid: FC<SortableImageGridProps> = ({
|
||||
|
@ -46,8 +61,8 @@ const SortableImageGrid: FC<SortableImageGridProps> = ({
|
|||
<SortableGrid
|
||||
items={items}
|
||||
locked={locked}
|
||||
getID={it => it.id}
|
||||
getLockedID={it => it.id}
|
||||
getID={(it) => it.id}
|
||||
getLockedID={(it) => it.id}
|
||||
renderItem={renderItem}
|
||||
renderItemProps={props}
|
||||
renderLocked={renderLocked}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue