Skip to content
This repository was archived by the owner on Apr 11, 2025. It is now read-only.

Commit aa096f7

Browse files
arvinxxarvinxx
committed
♻️ refactor: 重构组件
1 parent 414b418 commit aa096f7

File tree

7 files changed

+188
-93
lines changed

7 files changed

+188
-93
lines changed

‎docs/components/biz/examples/ImageGallery/Demo.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
import React from 'react';
22
import ImageGallery from '@arvinxu/image-gallery';
33

4-
const images = [
5-
{
6-
title: '组件库 Logo',
7-
description: '首选使用',
8-
url: 'https://gw.alipayobjects.com/zos/antfincdn/25czckBZI1/1.svg',
9-
},
10-
];
4+
import { images } from './data';
5+
116
const Demo = () => {
12-
return <ImageGallery imageList={images} />;
7+
return <ImageGallery imageList={images} darkBackground={'black'} />;
138
};
149

1510
export default Demo;

‎docs/components/biz/examples/ImageGallery/data.ts

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { ImageList } from '@arvinxu/image-gallery';
2+
3+
export const images: ImageList = [
4+
{
5+
title: '渐变色 Logo',
6+
description: '渐变色',
7+
url: 'https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg',
8+
},
9+
{
10+
title: '黑色 Logo',
11+
description: '亮色背景下使用',
12+
url:
13+
'https://gw.alipayobjects.com/zos/antfincdn/FEuGy%26pKf2/black-logo.svg',
14+
},
15+
{
16+
title: '黑色方形 Logo',
17+
description: '亮色背景下使用',
18+
url:
19+
'https://gw.alipayobjects.com/zos/antfincdn/iCZHoHFqZM/squre-black.svg',
20+
},
21+
{
22+
title: '白色方形 Logo',
23+
description: '亮色背景下使用',
24+
dark: true,
25+
url:
26+
'https://gw.alipayobjects.com/zos/antfincdn/9IE%24pNh%26d3/squre-white.svg',
27+
},
28+
{
29+
title: '白色 Logo',
30+
description: '暗色背景下使用',
31+
dark: true,
32+
padding: 12,
33+
darkBackground: 'black',
34+
url: 'https://gw.alipayobjects.com/zos/antfincdn/5qY87lPw9U/white-logo.svg',
35+
},
36+
{
37+
title: '白色 Logo',
38+
description: '暗色背景下使用',
39+
dark: true,
40+
darkBackground: '#1fadd3',
41+
url:
42+
'https://gw.alipayobjects.com/zos/antfincdn/3vXiuFe18O/black-white.svg',
43+
},
44+
{
45+
title: '黑色 Logo',
46+
description: '亮色背景下使用',
47+
url: 'https://gw.alipayobjects.com/zos/antfincdn/fmXECsJXUY/light.svg',
48+
},
49+
];

‎docs/components/biz/image-gallery.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ order: 2
2222

2323
## 演示
2424

25+
组件库的 Logo 物料
2526
<code src='./examples/ImageGallery/Demo.tsx' />
2627

2728
<API src='../../../packages/image-gallery/src/index.tsx'></API>

‎packages/image-gallery/src/index.tsx

Lines changed: 81 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { FC } from 'react';
2+
import React from 'react';
23
import { Button, Card, Dropdown, Menu } from 'antd';
34
import { EllipsisOutlined } from '@ant-design/icons';
45

@@ -11,77 +12,97 @@ import type { ImageList } from './types';
1112
export * from './types';
1213

1314
export interface ImageGalleryProps {
15+
/**
16+
* 图片清单
17+
*/
1418
imageList: ImageList;
19+
20+
/**
21+
* 暗色背景下默认的背景色
22+
* @default #1890ff
23+
*/
24+
darkBackground?: string;
25+
/**
26+
* 使用的布局方式: 瀑布流与网格
27+
* @default masonry
28+
*/
29+
layout?: 'masonry' | 'grid';
1530
}
1631

17-
const ImageGallery: FC<ImageGalleryProps> = ({ imageList }) => {
32+
const ImageGallery: FC<ImageGalleryProps> = ({ imageList, darkBackground }) => {
1833
const { copyPng, copySVG } = useCopy();
1934
const { downloadPng, downloadSVG } = useDownload();
2035

2136
return (
22-
<div className="masonry">
23-
{imageList.map((item, index) => (
24-
<div key={index} className="item">
25-
<Card
26-
cover={
27-
<div>
28-
<img
37+
<div className="avx-image-gallery-container avx-image-gallery-masonry">
38+
{imageList.map((item, index) => {
39+
const { padding } = item;
40+
const backgroundColor =
41+
item.darkBackground || darkBackground || '#1890ff';
42+
43+
return (
44+
<div key={index} className="avx-image-gallery-item">
45+
<Card
46+
cover={
47+
<div
48+
className="avx-image-gallery-image-ctn"
2949
style={{
30-
width: '100%',
31-
height: '100%',
32-
background: item.dark ? '#3978f7' : undefined,
50+
background: item.dark ? backgroundColor : undefined,
3351
borderBottom: item.dark ? undefined : '1px solid #f3f3f3',
34-
padding: 24,
35-
cursor: 'pointer',
3652
}}
37-
src={item.url}
38-
alt={item.title}
39-
onClick={() => window.open(item.url)}
40-
/>
41-
</div>
42-
}
43-
actions={[
44-
<Button
45-
type={'link'}
46-
className="link"
47-
onClick={() => copySVG(item.url)}
48-
>
49-
复制SVG
50-
</Button>,
53+
>
54+
<img
55+
className="avx-image-gallery-image"
56+
style={{ padding }}
57+
src={item.url}
58+
alt={item.title}
59+
onClick={() => window.open(item.url)}
60+
/>
61+
</div>
62+
}
63+
actions={[
64+
<Button
65+
type={'link'}
66+
className="avx-image-gallery-link"
67+
onClick={() => copySVG(item.url)}
68+
>
69+
复制SVG
70+
</Button>,
5171

52-
<Button
53-
type={'link'}
54-
className="link"
55-
onClick={() => copyPng(item.url)}
56-
>
57-
复制PNG
58-
</Button>,
59-
<Dropdown
60-
overlay={
61-
<Menu>
62-
<Menu.Item
63-
onClick={() => downloadPng(item.url, item.title)}
64-
>
65-
下载PNG
66-
</Menu.Item>
67-
<Menu.Item
68-
onClick={() => downloadSVG(item.url, item.title)}
69-
>
70-
下载SVG
71-
</Menu.Item>
72-
</Menu>
73-
}
74-
>
75-
<Button type={'link'} className="link">
76-
<EllipsisOutlined key="ellipsis" />
77-
</Button>
78-
</Dropdown>,
79-
]}
80-
>
81-
<Card.Meta title={item.title} description={item.description} />
82-
</Card>
83-
</div>
84-
))}
72+
<Button
73+
type={'link'}
74+
className="avx-image-gallery-link"
75+
onClick={() => copyPng(item.url)}
76+
>
77+
复制PNG
78+
</Button>,
79+
<Dropdown
80+
overlay={
81+
<Menu>
82+
<Menu.Item
83+
onClick={() => downloadPng(item.url, item.title)}
84+
>
85+
下载PNG
86+
</Menu.Item>
87+
<Menu.Item
88+
onClick={() => downloadSVG(item.url, item.title)}
89+
>
90+
下载SVG
91+
</Menu.Item>
92+
</Menu>
93+
}
94+
>
95+
<Button type={'link'} className="avx-image-gallery-link">
96+
<EllipsisOutlined key="ellipsis" />
97+
</Button>
98+
</Dropdown>,
99+
]}
100+
>
101+
<Card.Meta title={item.title} description={item.description} />
102+
</Card>
103+
</div>
104+
);
105+
})}
85106
<canvas id="canvas" style={{ display: 'none' }} />
86107
</div>
87108
);

‎packages/image-gallery/src/style.less

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,37 @@
1-
#mountNode {
2-
padding: 8px;
3-
}
1+
.avx-image-gallery {
2+
&-masonry {
3+
column-count: 4;
4+
column-gap: 0;
45

5-
.masonry {
6-
column-count: 4;
7-
column-gap: 0;
8-
}
6+
@media (max-width: 400px) {
7+
column-count: 2;
8+
}
99

10-
@media (max-width: 400px) {
11-
.masonry {
12-
column-count: 2;
10+
@media (max-width: 1200px) {
11+
column-count: 3;
12+
}
1313
}
14-
}
1514

16-
@media (max-width: 1200px) {
17-
.masonry {
18-
column-count: 3;
15+
&-item {
16+
break-inside: avoid;
17+
box-sizing: border-box;
18+
padding: 8px;
1919
}
20-
}
20+
&-image {
21+
width: 100%;
22+
height: 100%;
23+
cursor: pointer;
2124

22-
.item {
23-
break-inside: avoid;
24-
box-sizing: border-box;
25-
padding: 8px;
26-
}
25+
&-ctn {
26+
padding: 24px;
27+
}
28+
}
2729

28-
.link {
29-
padding: 4px 0;
30-
}
30+
&-link {
31+
padding: 4px 0;
32+
}
3133

32-
.ant-card-actions {
33-
background: #fafafa;
34+
.ant-card-actions {
35+
background: #fafafa;
36+
}
3437
}

‎packages/image-gallery/src/types.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,18 @@ interface ImageEntry {
33
description: string;
44

55
dark?: boolean;
6+
/**
7+
* 如果需要反色的话
8+
* 可以设置反色的颜色
9+
*/
10+
darkBackground?: string;
11+
/**
12+
* 允许添加间距
13+
*/
14+
padding?: number | string;
15+
/**
16+
* 图片 url
17+
*/
618
url: string;
719
}
820

‎packages/image-gallery/tests/__snapshots__/index.test.tsx.snap

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`ImageGallery 默认状态 1`] = `
4+
<div>
5+
<div
6+
class="avx-image-gallery-container avx-image-gallery-masonry"
7+
>
8+
<canvas
9+
id="canvas"
10+
style="display: none;"
11+
/>
12+
</div>
13+
</div>
14+
`;

0 commit comments

Comments
 (0)