client: reduce image reflow

This commit is contained in:
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 { .imgItem {
position: relative;
width: 100%; width: 100%;
height: 60px; height: 60px;
cursor: pointer; cursor: pointer;
border-radius: 0.25rem;
object-fit: cover; img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.25rem;
}
} }
.uploadWrap { .uploadWrap {
@ -15,6 +23,5 @@
max-height: 200px; max-height: 200px;
margin: 12px auto; margin: 12px auto;
border-radius: 0.25rem; 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 { Button, ButtonGroup, Col, Popover, Row, SideSheet, Skeleton, Space, TabPane, Tabs } from '@douyinfe/semi-ui';
import { Upload } from 'components/upload'; import { Upload } from 'components/upload';
import { chunk } from 'helpers/chunk';
import { IsOnMobile } from 'hooks/use-on-mobile'; import { IsOnMobile } from 'hooks/use-on-mobile';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import React, { useCallback, useMemo, useState } from 'react'; import React, { useCallback, useMemo, useState } from 'react';
@ -71,26 +72,26 @@ export const ImageUploader: React.FC<IProps> = ({ images, selectImage, children
images.map((image) => { images.map((image) => {
return ( return (
<TabPane key={image.key} tab={image.title} itemKey={image.key}> <TabPane key={image.key} tab={image.title} itemKey={image.key}>
<Row gutter={6}> {chunk(image.images, 4).map((chunk, index) => {
{image.images.map((url) => { return (
return ( <Row gutter={6} key={index} style={{ marginTop: index === 0 ? 0 : 6 }}>
<Col span={6} key={url}> {chunk.map((url) => {
<LazyLoadImage return (
className={styles.imgItem} <Col span={6} key={url}>
src={url} <div className={styles.imgItem}>
delayTime={300} <LazyLoadImage
placeholder={ src={url}
<Skeleton delayTime={300}
loading placeholder={<Skeleton loading placeholder={<Skeleton.Image style={{ height: 60 }} />} />}
placeholder={<Skeleton.Image className={styles.imgItem} style={{ height: 60 }} />} onClick={setImage(url)}
/> />
} </div>
onClick={setImage(url)} </Col>
/> );
</Col> })}
); </Row>
})} );
</Row> })}
</TabPane> </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;
}