✨ feat: 支持解析 YAML 语法

BREAKING CHANGE: 调整 props imageList 成 data, 并支持传入字符串

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

@@ -14,7 +14,7 @@ const Demo = () => {
         padding: 24,
       }}
     >
-      <ImageGallery imageList={images} darkBackground={'black'} />
+      <ImageGallery data={images} darkBackground={'black'} />
     </div>
   );
 };

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

@@ -0,0 +1,22 @@
+/**
+ * compact: true
+ */
+import React from 'react';
+import ImageGallery from '@arvinxu/image-gallery';
+
+import { yml } from './yml';
+
+const YAMLDemo = () => {
+  return (
+    <div
+      style={{
+        background: '#fafafa',
+        padding: 24,
+      }}
+    >
+      <ImageGallery data={yml} darkBackground={'black'} />
+    </div>
+  );
+};
+
+export default YAMLDemo;

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

@@ -0,0 +1,36 @@
+export const yml = `
+素材列表:
+- 标题: 渐变色 Logo
+  描述: 渐变色
+  链接: https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg
+
+- 标题: 黑色 Logo
+  描述: 亮色背景下使用
+  链接: https://gw.alipayobjects.com/zos/antfincdn/FEuGy%26pKf2/black-logo.svg
+
+- 标题: 黑色方形 Logo
+  描述: 亮色背景下使用
+  链接: https://gw.alipayobjects.com/zos/antfincdn/iCZHoHFqZM/squre-black.svg
+
+- 标题: 白色方形 Logo
+  描述: 亮色背景下使用
+  反色: true
+  链接: https://gw.alipayobjects.com/zos/antfincdn/9IE%24pNh%26d3/squre-white.svg
+
+- 标题: 白色 Logo
+  描述: 暗色背景下使用
+  反色: true
+  padding: 12
+  反色背景色: black
+  链接: https://gw.alipayobjects.com/zos/antfincdn/5qY87lPw9U/white-logo.svg
+
+- 标题: 白色 Logo
+  描述: 暗色背景下使用
+  反色: true
+  反色背景色: "#1fadd3"
+  链接: https://gw.alipayobjects.com/zos/antfincdn/3vXiuFe18O/black-white.svg
+
+- 标题: 黑色 Logo
+  描述: 亮色背景下使用
+  链接: https://gw.alipayobjects.com/zos/antfincdn/fmXECsJXUY/light.svg
+`;

docs/components/biz/image-gallery.md

@@ -22,7 +22,15 @@ order: 2
 
 ## 演示
 
+### 使用 JSON
+
 组件库的 Logo 物料
 <code src='./examples/ImageGallery/Demo.tsx' />
 
+### 使用 YML
+
+`v2.0.0` 开始支持使用 YAML 语法
+
+<code src='./examples/ImageGallery/YAMLDemo.tsx' />
+
 <API src='../../../packages/image-gallery/src/index.tsx'></API>

packages/image-gallery/src/index.tsx

@@ -6,14 +6,15 @@ import { copySVG, copyPngFromSvg, downloadSVG, downloadPng } from './utils';
 
 import './style.less';
 import type { ImageList } from './types';
+import { YMLToJSON } from './utils/yml';
 
 export * from './types';
 
 export interface ImageGalleryProps {
   /**
    * 图片清单
    */
-  imageList: ImageList;
+  data: ImageList | string;
   /**
    * 暗色背景下默认的背景色
    * @default #1890ff
@@ -27,10 +28,12 @@ export interface ImageGalleryProps {
 }
 
 const ImageGallery: FC<ImageGalleryProps> = ({
-  imageList,
+  data,
   darkBackground,
   layout = 'masonry',
 }) => {
+  const imageList = typeof data === 'string' ? YMLToJSON(data).data : data;
+
   return (
     <div className={`avx-image-gallery-container avx-image-gallery-${layout}`}>
       {imageList.map((item, index) => {

packages/image-gallery/src/types.ts

@@ -1,6 +1,10 @@
-interface ImageEntry {
+export interface ImageEntry {
   title: string;
-  description: string;
+  /**
+   * 图片 url
+   */
+  url: string;
+  description?: string;
 
   dark?: boolean;
   /**
@@ -12,10 +16,33 @@ interface ImageEntry {
    * 允许添加间距
    */
   padding?: number | string;
+}
+
+export type ImageList = ImageEntry[];
+
+export interface ImageGalleryData {
+  data: ImageList;
+}
+
+export interface ImageEntryYML {
+  标题: string;
+  描述?: string;
+
+  反色?: boolean;
+  /**
+   * 如果需要反色的话
+   * 可以设置反色的颜色
+   */
+  反色背景色?: string;
   /**
    * 图片 url
    */
-  url: string;
+  链接: string;
+  /**
+   * 允许添加间距
+   */
+  padding?: number | string;
+}
+export interface ImageGalleryYML {
+  素材列表: ImageEntryYML[];
 }
-
-export type ImageList = ImageEntry[];

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

@@ -0,0 +1,83 @@
+import { YMLToJSON } from './yml';
+
+describe('YML 数据转换', () => {
+  it('正常转换', () => {
+    const yml = `
+素材列表:
+- 标题: 渐变色 Logo
+  描述: 渐变色
+  链接: https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg
+- 标题: 黑色 Logo
+  描述: 亮色背景下使用
+  链接: https://gw.alipayobjects.com/zos/antfincdn/FEuGy%26pKf2/black-logo.svg
+- 标题: 黑色方形 Logo
+  描述: 亮色背景下使用
+  链接: https://gw.alipayobjects.com/zos/antfincdn/iCZHoHFqZM/squre-black.svg
+- 标题: 白色方形 Logo
+  描述: 亮色背景下使用
+  反色: true
+  链接: https://gw.alipayobjects.com/zos/antfincdn/9IE%24pNh%26d3/squre-white.svg
+- 标题: 白色 Logo
+  描述: 暗色背景下使用
+  反色: true
+  padding: 12
+  反色背景色: black
+  链接: https://gw.alipayobjects.com/zos/antfincdn/5qY87lPw9U/white-logo.svg
+- 标题: 白色 Logo
+  描述: 暗色背景下使用
+  反色: true
+  反色背景色: "#1fadd3"
+  链接: https://gw.alipayobjects.com/zos/antfincdn/3vXiuFe18O/black-white.svg
+- 标题: 黑色 Logo
+  描述: 亮色背景下使用
+  链接: https://gw.alipayobjects.com/zos/antfincdn/fmXECsJXUY/light.svg
+
+`;
+
+    expect(YMLToJSON(yml)).toEqual({
+      data: [
+        {
+          description: '渐变色',
+          title: '渐变色 Logo',
+          url: 'https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg',
+        },
+        {
+          description: '亮色背景下使用',
+          title: '黑色 Logo',
+          url: 'https://gw.alipayobjects.com/zos/antfincdn/FEuGy%26pKf2/black-logo.svg',
+        },
+        {
+          description: '亮色背景下使用',
+          title: '黑色方形 Logo',
+          url: 'https://gw.alipayobjects.com/zos/antfincdn/iCZHoHFqZM/squre-black.svg',
+        },
+        {
+          dark: true,
+          description: '亮色背景下使用',
+          title: '白色方形 Logo',
+          url: 'https://gw.alipayobjects.com/zos/antfincdn/9IE%24pNh%26d3/squre-white.svg',
+        },
+        {
+          dark: true,
+          darkBackground: 'black',
+          description: '暗色背景下使用',
+          padding: 12,
+          title: '白色 Logo',
+          url: 'https://gw.alipayobjects.com/zos/antfincdn/5qY87lPw9U/white-logo.svg',
+        },
+        {
+          dark: true,
+          darkBackground: '#1fadd3',
+          description: '暗色背景下使用',
+          title: '白色 Logo',
+          url: 'https://gw.alipayobjects.com/zos/antfincdn/3vXiuFe18O/black-white.svg',
+        },
+        {
+          description: '亮色背景下使用',
+          title: '黑色 Logo',
+          url: 'https://gw.alipayobjects.com/zos/antfincdn/fmXECsJXUY/light.svg',
+        },
+      ],
+    });
+  });
+});

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

@@ -0,0 +1,28 @@
+import { load } from 'js-yaml';
+import type { ImageGalleryData, ImageGalleryYML, ImageEntry } from '../types';
+
+/**
+ * YML 转 JSON
+ * @param yml
+ * @constructor
+ */
+export const YMLToJSON = (yml: string): ImageGalleryData => {
+  try {
+    const { 素材列表 } = load(yml) as ImageGalleryYML;
+
+    return {
+      data: 素材列表.map(
+        (item): ImageEntry => ({
+          title: item.标题,
+          description: item.描述,
+          dark: item.反色,
+          padding: item.padding,
+          url: item.链接,
+          darkBackground: item.反色背景色,
+        }),
+      ),
+    };
+  } catch (e) {
+    throw Error(`YML 不符合规范: \n${e}`);
+  }
+};