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

Commit f74b0a2

Browse files
arvinxxarvinxx
committed
✨ feat: 支持解析 YAML 语法
BREAKING CHANGE: 调整 props imageList 成 data, 并支持传入字符串
1 parent 00c052b commit f74b0a2

File tree

8 files changed

+215
-8
lines changed

8 files changed

+215
-8
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const Demo = () => {
1414
padding: 24,
1515
}}
1616
>
17-
<ImageGallery imageList={images} darkBackground={'black'} />
17+
<ImageGallery data={images} darkBackground={'black'} />
1818
</div>
1919
);
2020
};

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* compact: true
3+
*/
4+
import React from 'react';
5+
import ImageGallery from '@arvinxu/image-gallery';
6+
7+
import { yml } from './yml';
8+
9+
const YAMLDemo = () => {
10+
return (
11+
<div
12+
style={{
13+
background: '#fafafa',
14+
padding: 24,
15+
}}
16+
>
17+
<ImageGallery data={yml} darkBackground={'black'} />
18+
</div>
19+
);
20+
};
21+
22+
export default YAMLDemo;

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
export const yml = `
2+
素材列表:
3+
- 标题: 渐变色 Logo
4+
描述: 渐变色
5+
链接: https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg
6+
7+
- 标题: 黑色 Logo
8+
描述: 亮色背景下使用
9+
链接: https://gw.alipayobjects.com/zos/antfincdn/FEuGy%26pKf2/black-logo.svg
10+
11+
- 标题: 黑色方形 Logo
12+
描述: 亮色背景下使用
13+
链接: https://gw.alipayobjects.com/zos/antfincdn/iCZHoHFqZM/squre-black.svg
14+
15+
- 标题: 白色方形 Logo
16+
描述: 亮色背景下使用
17+
反色: true
18+
链接: https://gw.alipayobjects.com/zos/antfincdn/9IE%24pNh%26d3/squre-white.svg
19+
20+
- 标题: 白色 Logo
21+
描述: 暗色背景下使用
22+
反色: true
23+
padding: 12
24+
反色背景色: black
25+
链接: https://gw.alipayobjects.com/zos/antfincdn/5qY87lPw9U/white-logo.svg
26+
27+
- 标题: 白色 Logo
28+
描述: 暗色背景下使用
29+
反色: true
30+
反色背景色: "#1fadd3"
31+
链接: https://gw.alipayobjects.com/zos/antfincdn/3vXiuFe18O/black-white.svg
32+
33+
- 标题: 黑色 Logo
34+
描述: 亮色背景下使用
35+
链接: https://gw.alipayobjects.com/zos/antfincdn/fmXECsJXUY/light.svg
36+
`;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,15 @@ order: 2
2222

2323
## 演示
2424

25+
### 使用 JSON
26+
2527
组件库的 Logo 物料
2628
<code src='./examples/ImageGallery/Demo.tsx' />
2729

30+
### 使用 YML
31+
32+
`v2.0.0` 开始支持使用 YAML 语法
33+
34+
<code src='./examples/ImageGallery/YAMLDemo.tsx' />
35+
2836
<API src='../../../packages/image-gallery/src/index.tsx'></API>

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@ import { copySVG, copyPngFromSvg, downloadSVG, downloadPng } from './utils';
66

77
import './style.less';
88
import type { ImageList } from './types';
9+
import { YMLToJSON } from './utils/yml';
910

1011
export * from './types';
1112

1213
export interface ImageGalleryProps {
1314
/**
1415
* 图片清单
1516
*/
16-
imageList: ImageList;
17+
data: ImageList | string;
1718
/**
1819
* 暗色背景下默认的背景色
1920
* @default #1890ff
@@ -27,10 +28,12 @@ export interface ImageGalleryProps {
2728
}
2829

2930
const ImageGallery: FC<ImageGalleryProps> = ({
30-
imageList,
31+
data,
3132
darkBackground,
3233
layout = 'masonry',
3334
}) => {
35+
const imageList = typeof data === 'string' ? YMLToJSON(data).data : data;
36+
3437
return (
3538
<div className={`avx-image-gallery-container avx-image-gallery-${layout}`}>
3639
{imageList.map((item, index) => {

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

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
interface ImageEntry {
1+
export interface ImageEntry {
22
title: string;
3-
description: string;
3+
/**
4+
* 图片 url
5+
*/
6+
url: string;
7+
description?: string;
48

59
dark?: boolean;
610
/**
@@ -12,10 +16,33 @@ interface ImageEntry {
1216
* 允许添加间距
1317
*/
1418
padding?: number | string;
19+
}
20+
21+
export type ImageList = ImageEntry[];
22+
23+
export interface ImageGalleryData {
24+
data: ImageList;
25+
}
26+
27+
export interface ImageEntryYML {
28+
标题: string;
29+
描述?: string;
30+
31+
反色?: boolean;
32+
/**
33+
* 如果需要反色的话
34+
* 可以设置反色的颜色
35+
*/
36+
反色背景色?: string;
1537
/**
1638
* 图片 url
1739
*/
18-
url: string;
40+
链接: string;
41+
/**
42+
* 允许添加间距
43+
*/
44+
padding?: number | string;
45+
}
46+
export interface ImageGalleryYML {
47+
素材列表: ImageEntryYML[];
1948
}
20-
21-
export type ImageList = ImageEntry[];

‎packages/image-gallery/src/utils/yml.test.ts‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { YMLToJSON } from './yml';
2+
3+
describe('YML 数据转换', () => {
4+
it('正常转换', () => {
5+
const yml = `
6+
素材列表:
7+
- 标题: 渐变色 Logo
8+
描述: 渐变色
9+
链接: https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg
10+
- 标题: 黑色 Logo
11+
描述: 亮色背景下使用
12+
链接: https://gw.alipayobjects.com/zos/antfincdn/FEuGy%26pKf2/black-logo.svg
13+
- 标题: 黑色方形 Logo
14+
描述: 亮色背景下使用
15+
链接: https://gw.alipayobjects.com/zos/antfincdn/iCZHoHFqZM/squre-black.svg
16+
- 标题: 白色方形 Logo
17+
描述: 亮色背景下使用
18+
反色: true
19+
链接: https://gw.alipayobjects.com/zos/antfincdn/9IE%24pNh%26d3/squre-white.svg
20+
- 标题: 白色 Logo
21+
描述: 暗色背景下使用
22+
反色: true
23+
padding: 12
24+
反色背景色: black
25+
链接: https://gw.alipayobjects.com/zos/antfincdn/5qY87lPw9U/white-logo.svg
26+
- 标题: 白色 Logo
27+
描述: 暗色背景下使用
28+
反色: true
29+
反色背景色: "#1fadd3"
30+
链接: https://gw.alipayobjects.com/zos/antfincdn/3vXiuFe18O/black-white.svg
31+
- 标题: 黑色 Logo
32+
描述: 亮色背景下使用
33+
链接: https://gw.alipayobjects.com/zos/antfincdn/fmXECsJXUY/light.svg
34+
35+
`;
36+
37+
expect(YMLToJSON(yml)).toEqual({
38+
data: [
39+
{
40+
description: '渐变色',
41+
title: '渐变色 Logo',
42+
url: 'https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg',
43+
},
44+
{
45+
description: '亮色背景下使用',
46+
title: '黑色 Logo',
47+
url: 'https://gw.alipayobjects.com/zos/antfincdn/FEuGy%26pKf2/black-logo.svg',
48+
},
49+
{
50+
description: '亮色背景下使用',
51+
title: '黑色方形 Logo',
52+
url: 'https://gw.alipayobjects.com/zos/antfincdn/iCZHoHFqZM/squre-black.svg',
53+
},
54+
{
55+
dark: true,
56+
description: '亮色背景下使用',
57+
title: '白色方形 Logo',
58+
url: 'https://gw.alipayobjects.com/zos/antfincdn/9IE%24pNh%26d3/squre-white.svg',
59+
},
60+
{
61+
dark: true,
62+
darkBackground: 'black',
63+
description: '暗色背景下使用',
64+
padding: 12,
65+
title: '白色 Logo',
66+
url: 'https://gw.alipayobjects.com/zos/antfincdn/5qY87lPw9U/white-logo.svg',
67+
},
68+
{
69+
dark: true,
70+
darkBackground: '#1fadd3',
71+
description: '暗色背景下使用',
72+
title: '白色 Logo',
73+
url: 'https://gw.alipayobjects.com/zos/antfincdn/3vXiuFe18O/black-white.svg',
74+
},
75+
{
76+
description: '亮色背景下使用',
77+
title: '黑色 Logo',
78+
url: 'https://gw.alipayobjects.com/zos/antfincdn/fmXECsJXUY/light.svg',
79+
},
80+
],
81+
});
82+
});
83+
});

‎packages/image-gallery/src/utils/yml.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { load } from 'js-yaml';
2+
import type { ImageGalleryData, ImageGalleryYML, ImageEntry } from '../types';
3+
4+
/**
5+
* YML 转 JSON
6+
* @param yml
7+
* @constructor
8+
*/
9+
export const YMLToJSON = (yml: string): ImageGalleryData => {
10+
try {
11+
const { 素材列表 } = load(yml) as ImageGalleryYML;
12+
13+
return {
14+
data: 素材列表.map(
15+
(item): ImageEntry => ({
16+
title: item.标题,
17+
description: item.描述,
18+
dark: item.反色,
19+
padding: item.padding,
20+
url: item.链接,
21+
darkBackground: item.反色背景色,
22+
}),
23+
),
24+
};
25+
} catch (e) {
26+
throw Error(`YML 不符合规范: \n${e}`);
27+
}
28+
};

0 commit comments

Comments
 (0)