client: reduce image reflow

pull/64/head
fantasticit 2022-06-02 23:32:25 +08:00
parent 614e56f15b
commit 4d5f745983
3 changed files with 41 additions and 23 deletions

View File

@ -1,9 +1,17 @@
.imgItem {
position: relative;
width: 100%;
height: 60px;
cursor: pointer;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.25rem;
object-fit: cover;
}
}
.uploadWrap {
@ -15,6 +23,5 @@
max-height: 200px;
margin: 12px auto;
border-radius: 0.25rem;
object-fit: cover;
}
}

View File

@ -1,5 +1,6 @@
import { Button, ButtonGroup, Col, Popover, Row, SideSheet, Skeleton, Space, TabPane, Tabs } from '@douyinfe/semi-ui';
import { Upload } from 'components/upload';
import { chunk } from 'helpers/chunk';
import { IsOnMobile } from 'hooks/use-on-mobile';
import { useToggle } from 'hooks/use-toggle';
import React, { useCallback, useMemo, useState } from 'react';
@ -71,26 +72,26 @@ export const ImageUploader: React.FC<IProps> = ({ images, selectImage, children
images.map((image) => {
return (
<TabPane key={image.key} tab={image.title} itemKey={image.key}>
<Row gutter={6}>
{image.images.map((url) => {
{chunk(image.images, 4).map((chunk, index) => {
return (
<Row gutter={6} key={index} style={{ marginTop: index === 0 ? 0 : 6 }}>
{chunk.map((url) => {
return (
<Col span={6} key={url}>
<div className={styles.imgItem}>
<LazyLoadImage
className={styles.imgItem}
src={url}
delayTime={300}
placeholder={
<Skeleton
loading
placeholder={<Skeleton.Image className={styles.imgItem} style={{ height: 60 }} />}
/>
}
placeholder={<Skeleton loading placeholder={<Skeleton.Image style={{ height: 60 }} />} />}
onClick={setImage(url)}
/>
</div>
</Col>
);
})}
</Row>
);
})}
</TabPane>
);
}),

View File

@ -0,0 +1,10 @@
export function chunk<T>(arr: Array<T>, size = 1) {
const res: Array<T[]> = [];
for (let i = 0; i < arr.length; i += size) {
const slice = arr.slice(i, i + size);
res.push(slice);
}
return res;
}