♻️ refactor: 重构组件

arvinxx · Mar 18, 2021 · aa096f7 · aa096f7
1 parent 414b418
commit aa096f7
Show file tree

Hide file tree

Showing 7 changed files with 188 additions and 93 deletions.
diff --git a/docs/components/biz/examples/ImageGallery/Demo.tsx b/docs/components/biz/examples/ImageGallery/Demo.tsx
@@ -1,15 +1,10 @@
 import React from 'react';
 import ImageGallery from '@arvinxu/image-gallery';
 
-const images = [
-  {
-    title: '组件库 Logo',
-    description: '首选使用',
-    url: 'https://gw.alipayobjects.com/zos/antfincdn/25czckBZI1/1.svg',
-  },
-];
+import { images } from './data';
+
 const Demo = () => {
-  return <ImageGallery imageList={images} />;
+  return <ImageGallery imageList={images} darkBackground={'black'} />;
 };
 
 export default Demo;
diff --git a/docs/components/biz/examples/ImageGallery/data.ts b/docs/components/biz/examples/ImageGallery/data.ts
@@ -0,0 +1,49 @@
+import { ImageList } from '@arvinxu/image-gallery';
+
+export const images: ImageList = [
+  {
+    title: '渐变色 Logo',
+    description: '渐变色',
+    url: 'https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg',
+  },
+  {
+    title: '黑色 Logo',
+    description: '亮色背景下使用',
+    url:
+      'https://gw.alipayobjects.com/zos/antfincdn/FEuGy%26pKf2/black-logo.svg',
+  },
+  {
+    title: '黑色方形 Logo',
+    description: '亮色背景下使用',
+    url:
+      'https://gw.alipayobjects.com/zos/antfincdn/iCZHoHFqZM/squre-black.svg',
+  },
+  {
+    title: '白色方形 Logo',
+    description: '亮色背景下使用',
+    dark: true,
+    url:
+      'https://gw.alipayobjects.com/zos/antfincdn/9IE%24pNh%26d3/squre-white.svg',
+  },
+  {
+    title: '白色 Logo',
+    description: '暗色背景下使用',
+    dark: true,
+    padding: 12,
+    darkBackground: 'black',
+    url: 'https://gw.alipayobjects.com/zos/antfincdn/5qY87lPw9U/white-logo.svg',
+  },
+  {
+    title: '白色 Logo',
+    description: '暗色背景下使用',
+    dark: true,
+    darkBackground: '#1fadd3',
+    url:
+      'https://gw.alipayobjects.com/zos/antfincdn/3vXiuFe18O/black-white.svg',
+  },
+  {
+    title: '黑色 Logo',
+    description: '亮色背景下使用',
+    url: 'https://gw.alipayobjects.com/zos/antfincdn/fmXECsJXUY/light.svg',
+  },
+];
diff --git a/docs/components/biz/image-gallery.md b/docs/components/biz/image-gallery.md
@@ -22,6 +22,7 @@ order: 2
 
 ## 演示
 
+组件库的 Logo 物料
 <code src='./examples/ImageGallery/Demo.tsx' />
 
 <API src='../../../packages/image-gallery/src/index.tsx'></API>
diff --git a/packages/image-gallery/src/index.tsx b/packages/image-gallery/src/index.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react';
+import React from 'react';
 import { Button, Card, Dropdown, Menu } from 'antd';
 import { EllipsisOutlined } from '@ant-design/icons';
 
@@ -11,77 +12,97 @@ import type { ImageList } from './types';
 export * from './types';
 
 export interface ImageGalleryProps {
+  /**
+   * 图片清单
+   */
   imageList: ImageList;
+
+  /**
+   * 暗色背景下默认的背景色
+   * @default #1890ff
+   */
+  darkBackground?: string;
+  /**
+   * 使用的布局方式: 瀑布流与网格
+   * @default masonry
+   */
+  layout?: 'masonry' | 'grid';
 }
 
-const ImageGallery: FC<ImageGalleryProps> = ({ imageList }) => {
+const ImageGallery: FC<ImageGalleryProps> = ({ imageList, darkBackground }) => {
   const { copyPng, copySVG } = useCopy();
   const { downloadPng, downloadSVG } = useDownload();
 
   return (
-    <div className="masonry">
-      {imageList.map((item, index) => (
-        <div key={index} className="item">
-          <Card
-            cover={
-              <div>
-                <img
+    <div className="avx-image-gallery-container avx-image-gallery-masonry">
+      {imageList.map((item, index) => {
+        const { padding } = item;
+        const backgroundColor =
+          item.darkBackground || darkBackground || '#1890ff';
+
+        return (
+          <div key={index} className="avx-image-gallery-item">
+            <Card
+              cover={
+                <div
+                  className="avx-image-gallery-image-ctn"
                   style={{
-                    width: '100%',
-                    height: '100%',
-                    background: item.dark ? '#3978f7' : undefined,
+                    background: item.dark ? backgroundColor : undefined,
                     borderBottom: item.dark ? undefined : '1px solid #f3f3f3',
-                    padding: 24,
-                    cursor: 'pointer',
                   }}
-                  src={item.url}
-                  alt={item.title}
-                  onClick={() => window.open(item.url)}
-                />
-              </div>
-            }
-            actions={[
-              <Button
-                type={'link'}
-                className="link"
-                onClick={() => copySVG(item.url)}
-              >
-                复制SVG
-              </Button>,
+                >
+                  <img
+                    className="avx-image-gallery-image"
+                    style={{ padding }}
+                    src={item.url}
+                    alt={item.title}
+                    onClick={() => window.open(item.url)}
+                  />
+                </div>
+              }
+              actions={[
+                <Button
+                  type={'link'}
+                  className="avx-image-gallery-link"
+                  onClick={() => copySVG(item.url)}
+                >
+                  复制SVG
+                </Button>,
 
-              <Button
-                type={'link'}
-                className="link"
-                onClick={() => copyPng(item.url)}
-              >
-                复制PNG
-              </Button>,
-              <Dropdown
-                overlay={
-                  <Menu>
-                    <Menu.Item
-                      onClick={() => downloadPng(item.url, item.title)}
-                    >
-                      下载PNG
-                    </Menu.Item>
-                    <Menu.Item
-                      onClick={() => downloadSVG(item.url, item.title)}
-                    >
-                      下载SVG
-                    </Menu.Item>
-                  </Menu>
-                }
-              >
-                <Button type={'link'} className="link">
-                  <EllipsisOutlined key="ellipsis" />
-                </Button>
-              </Dropdown>,
-            ]}
-          >
-            <Card.Meta title={item.title} description={item.description} />
-          </Card>
-        </div>
-      ))}
+                <Button
+                  type={'link'}
+                  className="avx-image-gallery-link"
+                  onClick={() => copyPng(item.url)}
+                >
+                  复制PNG
+                </Button>,
+                <Dropdown
+                  overlay={
+                    <Menu>
+                      <Menu.Item
+                        onClick={() => downloadPng(item.url, item.title)}
+                      >
+                        下载PNG
+                      </Menu.Item>
+                      <Menu.Item
+                        onClick={() => downloadSVG(item.url, item.title)}
+                      >
+                        下载SVG
+                      </Menu.Item>
+                    </Menu>
+                  }
+                >
+                  <Button type={'link'} className="avx-image-gallery-link">
+                    <EllipsisOutlined key="ellipsis" />
+                  </Button>
+                </Dropdown>,
+              ]}
+            >
+              <Card.Meta title={item.title} description={item.description} />
+            </Card>
+          </div>
+        );
+      })}
       <canvas id="canvas" style={{ display: 'none' }} />
     </div>
   );

diff --git a/packages/image-gallery/src/style.less b/packages/image-gallery/src/style.less
@@ -1,34 +1,37 @@
-#mountNode {
-  padding: 8px;
-}
+.avx-image-gallery {
+  &-masonry {
+    column-count: 4;
+    column-gap: 0;
 
-.masonry {
-  column-count: 4;
-  column-gap: 0;
-}
+    @media (max-width: 400px) {
+      column-count: 2;
+    }
 
-@media (max-width: 400px) {
-  .masonry {
-    column-count: 2;
+    @media (max-width: 1200px) {
+      column-count: 3;
+    }
   }
-}
 
-@media (max-width: 1200px) {
-  .masonry {
-    column-count: 3;
+  &-item {
+    break-inside: avoid;
+    box-sizing: border-box;
+    padding: 8px;
   }
-}
+  &-image {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
 
-.item {
-  break-inside: avoid;
-  box-sizing: border-box;
-  padding: 8px;
-}
+    &-ctn {
+      padding: 24px;
+    }
+  }
 
-.link {
-  padding: 4px 0;
-}
+  &-link {
+    padding: 4px 0;
+  }
 
-.ant-card-actions {
-  background: #fafafa;
+  .ant-card-actions {
+    background: #fafafa;
+  }
 }
diff --git a/packages/image-gallery/src/types.ts b/packages/image-gallery/src/types.ts
@@ -3,6 +3,18 @@ interface ImageEntry {
   description: string;
 
   dark?: boolean;
+  /**
+   * 如果需要反色的话
+   * 可以设置反色的颜色
+   */
+  darkBackground?: string;
+  /**
+   * 允许添加间距
+   */
+  padding?: number | string;
+  /**
+   * 图片 url
+   */
   url: string;
 }
 

diff --git a/packages/image-gallery/tests/__snapshots__/index.test.tsx.snap b/packages/image-gallery/tests/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ImageGallery 默认状态 1`] = `
+<div>
+  <div
+    class="avx-image-gallery-container avx-image-gallery-masonry"
+  >
+    <canvas
+      id="canvas"
+      style="display: none;"
+    />
+  </div>
+</div>
+`;