✨ feat: 支持 grid 布局

arvinxx · Jun 18, 2021 · 3b1a4b9 · 3b1a4b9
1 parent d807e43
commit 3b1a4b9
Show file tree

Hide file tree

Showing 9 changed files with 301 additions and 73 deletions.
diff --git a/...ents/biz/examples/ImageGallery/Sketch.tsx → .../biz/examples/ImageGallery/SketchDemo.tsx b/...ents/biz/examples/ImageGallery/Sketch.tsx → .../biz/examples/ImageGallery/SketchDemo.tsx
@@ -6,17 +6,17 @@ import AssetGallery from '@arvinxu/image-gallery';
 
 import { sketch } from './sketch';
 
-const Sketch = () => {
+const SketchDemo = () => {
   return (
     <div
       style={{
         background: '#fafafa',
         padding: 24,
       }}
     >
-      <AssetGallery data={sketch} darkBackground={'black'} />
+      <AssetGallery data={sketch} darkBackground={'black'} layout={'grid'} />
     </div>
   );
 };
 
-export default Sketch;
+export default SketchDemo;
diff --git a/docs/components/biz/examples/ImageGallery/sketch.ts b/docs/components/biz/examples/ImageGallery/sketch.ts
@@ -1,5 +1,10 @@
 export const sketch = `
-- 名称: 矩形
+- 标题: 矩形
   sketch: https://gw.alipayobjects.com/os/kitchen/oLQZFZVkmdvqpKRQDCuU.json
   链接: https://gw.alipayobjects.com/zos/antfincdn/G5sZluNGGA/25c4fe16-7d52-4b32-904e-3eccb4a1ff47.png
+
+- 标题: 卡片组件
+  sketch: https://gw.alipayobjects.com/os/kitchen/IiFvADxdyqKABLzWKZWT.json
+  描述: 一个 C2D 组件
+  链接: https://gw.alipayobjects.com/zos/antfincdn/KGTSum12Re/qiapianzujian.png
 `;
diff --git a/docs/components/biz/image-gallery.md b/docs/components/biz/image-gallery.md
@@ -45,6 +45,6 @@ order: 2
 
 复制 Sketch 文件, 使用 [sketch-json](https://github.com/arvinxx/sketch-json) 粘贴到 sketch 中
 
-<code src='./examples/ImageGallery/Sketch.tsx' />
+<code src='./examples/ImageGallery/SketchDemo.tsx' />
 
 <API src='../../../packages/image-gallery/src/index.tsx'></API>
diff --git a/packages/image-gallery/package.json b/packages/image-gallery/package.json
@@ -24,8 +24,13 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
+    "@bedrock-layout/columns": "^2.1.11",
+    "@bedrock-layout/inline": "^2.0.15",
+    "@bedrock-layout/masonry-grid": "^2.0.14",
     "antd": "^4.14.0",
     "copy-to-clipboard": "^3.3.1",
-    "js-yaml": "^4.1.0"
+    "js-yaml": "^4.1.0",
+    "styled-components": "^5.3.0",
+    "use-merge-value": "^1.0.2"
   }
 }
diff --git a/packages/image-gallery/src/AssetCard.tsx b/packages/image-gallery/src/AssetCard.tsx
@@ -14,13 +14,11 @@ import {
 import './style.less';
 
 import CopyButton from './CopyButton';
-import { Asset } from './types';
+import type { Asset } from './types';
 import { copySketch } from './utils/sketch';
 
 export * from './types';
 
-export interface AssetGalleryProps extends Asset {}
-
 const AssetCard: FC<Asset> = ({
   padding,
   url,
@@ -38,7 +36,7 @@ const AssetCard: FC<Asset> = ({
     ? [
         {
           onClick: () => copySketch(sketch),
-          content: '复制为 Sketch 组件',
+          content: '复制 Sketch 组件',
         },
       ]
     : [

diff --git a/packages/image-gallery/src/AssetGallery.tsx b/packages/image-gallery/src/AssetGallery.tsx
@@ -0,0 +1,83 @@
+import type { FC } from 'react';
+import React from 'react';
+import useMergeValue from 'use-merge-value';
+
+import Layout from './Layout';
+
+import AssetCard from './AssetCard';
+
+import { YMLToJSON } from './utils/yml';
+import type { AssetList } from './types';
+import './style.less';
+
+export interface AssetGalleryProps {
+  /**
+   * 图片清单
+   */
+  data: AssetList | string;
+  /**
+   * 暗色背景下默认的背景色
+   * @default #1890ff
+   */
+  darkBackground?: string;
+  /**
+   * 使用的布局方式: 瀑布流与网格
+   * @default masonry
+   */
+  layout?: 'masonry' | 'grid';
+
+  /**
+   * 配置网格
+   */
+  grid?: {
+    /**
+     * 列数
+     */
+    columns?: number;
+    /**
+     * 显示滑杆
+     */
+    showSlider?: boolean;
+  };
+}
+
+const AssetGallery: FC<AssetGalleryProps> = ({
+  data,
+  darkBackground,
+  layout = 'masonry',
+  grid = { columns: 1, showSlider: true },
+}) => {
+  const imageList = typeof data === 'string' ? YMLToJSON(data).data : data;
+
+  const [columns, setColumn] = useMergeValue(grid.columns);
+
+  return (
+    <Layout
+      layout={layout}
+      grid={{ columns, setColumn, showSlider: grid.showSlider }}
+    >
+      {imageList.map((item, index) => {
+        const { description, padding, url, title, dark, sketch } = item;
+
+        const backgroundColor =
+          item.darkBackground || darkBackground || '#1890ff';
+
+        return (
+          <AssetCard
+            key={index}
+            padding={padding}
+            url={url}
+            dark={dark}
+            darkBackground={backgroundColor}
+            title={title}
+            description={description}
+            sketch={sketch}
+          />
+        );
+      })}
+      <canvas id="canvas" style={{ display: 'none' }} />
+    </Layout>
+  );
+};
+
+export default AssetGallery;
diff --git a/packages/image-gallery/src/Layout.tsx b/packages/image-gallery/src/Layout.tsx
@@ -0,0 +1,44 @@
+import type { FC } from 'react';
+import React from 'react';
+import { Columns } from '@bedrock-layout/columns';
+import { Inline } from '@bedrock-layout/inline';
+import { Slider } from 'antd';
+
+interface LayoutProps {
+  layout?: 'grid' | 'masonry';
+  grid?: {
+    columns?: number;
+    setColumn?: (value: number) => void;
+    showSlider?: boolean;
+  };
+}
+
+const Layout: FC<LayoutProps> = ({ children, layout, grid }) => {
+  if (layout === 'grid') {
+    const { columns, setColumn } = grid;
+    return (
+      <div>
+        <Inline justify={'end'} style={{ paddingRight: 8 }}>
+          <Slider
+            style={{ width: 100 }}
+            value={-columns}
+            tooltipVisible={false}
+            onChange={(v) => setColumn(-v)}
+            max={-1}
+            min={-4}
+          />
+        </Inline>
+        <Columns columns={columns}>{children}</Columns>
+      </div>
+    );
+  }
+
+  if (layout === 'masonry')
+    return (
+      <div className={'avx-image-gallery-container avx-image-gallery-masonry'}>
+        {children}
+      </div>
+    );
+};
+
+export default Layout;
diff --git a/packages/image-gallery/src/index.tsx b/packages/image-gallery/src/index.tsx
@@ -1,61 +1,5 @@
-import type { FC } from 'react';
-import React from 'react';
-import AssetCard from './AssetCard';
-
-import './style.less';
-import type { AssetList } from './types';
-import { YMLToJSON } from './utils/yml';
+import AssetGallery from './AssetGallery';
 
 export * from './types';
 
-export interface AssetGalleryProps {
-  /**
-   * 图片清单
-   */
-  data: AssetList | string;
-  /**
-   * 暗色背景下默认的背景色
-   * @default #1890ff
-   */
-  darkBackground?: string;
-  /**
-   * 使用的布局方式: 瀑布流与网格
-   * @default masonry
-   */
-  layout?: 'masonry' | 'grid';
-}
-
-const AssetGallery: FC<AssetGalleryProps> = ({
-  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) => {
-        const { description, padding, url, title, dark, sketch } = item;
-
-        const backgroundColor =
-          item.darkBackground || darkBackground || '#1890ff';
-
-        return (
-          <AssetCard
-            key={index}
-            padding={padding}
-            url={url}
-            dark={dark}
-            darkBackground={backgroundColor}
-            title={title}
-            description={description}
-            sketch={sketch}
-          />
-        );
-      })}
-      <canvas id="canvas" style={{ display: 'none' }} />
-    </div>
-  );
-};
-
 export default AssetGallery;