feat: imagePreview

components/image-preview/PropsType.tsx

@@ -0,0 +1,12 @@
+export interface ImageSrc { url: string; originUrl: string }
+
+export default interface PropsType {
+  images: Array<ImageSrc> | Array<string>;
+  visible: boolean;
+  activeIndex?: number;
+  showPagination?: boolean;
+  maxScale?: number;
+  minScale?: number;
+  onChange?: Function;
+  onClose?: Function;
+}

components/image-preview/__tests__/index.test.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import ImagePreview from '../index';
+
+const images = [
+  'https://static.zhongan.com/website/health/zarm/images/banners/1.png',
+  'https://static.zhongan.com/website/health/zarm/images/banners/2.png',
+  'https://static.zhongan.com/website/health/zarm/images/banners/3.png',
+];
+
+const originImages = [
+  {
+    url: 'https://cdn-health.zhongan.com/zarm/imagePreview/compress_1.png',
+    originUrl: 'https://static.zhongan.com/website/health/zarm/images/banners/1.png',
+  },
+  {
+    url: 'https://cdn-health.zhongan.com/zarm/imagePreview/compress_2.png',
+    originUrl: 'https://static.zhongan.com/website/health/zarm/images/banners/2.png',
+  }, {
+    url: 'https://cdn-health.zhongan.com/zarm/imagePreview/compress_3.png',
+    originUrl: 'https://static.zhongan.com/website/health/zarm/images/banners/3.png',
+  },
+];
+
+describe('ImagePreview', () => {
+  it('renders correctly', () => {
+    const wrapper = render(<ImagePreview checked onChange={jest.fn()} images={images} />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('renders correctly with origin', () => {
+    const wrapper = render(<ImagePreview checked onChange={jest.fn()} images={originImages} />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});

components/image-preview/demo.md

@@ -0,0 +1,128 @@
+# ImagePreview 图片预览
+
+
+
+## 基本用法
+```jsx
+import { useState } from 'react';
+import { Cell, Button, ImagePreview, NoticeBar } from 'zarm';
+
+const originImages = [
+  {
+    url: 'https://cdn-health.zhongan.com/zarm/imagePreview/1-small.jpg',
+    originUrl: 'https://cdn-health.zhongan.com/zarm/imagePreview/1.jpg'
+  },
+  {
+    url: 'https://cdn-health.zhongan.com/zarm/imagePreview/2-small.jpg',
+    originUrl:'https://cdn-health.zhongan.com/zarm/imagePreview/2.jpg',
+  }, {
+    url: 'https://cdn-health.zhongan.com/zarm/imagePreview/3-small.jpg',
+    originUrl: 'https://cdn-health.zhongan.com/zarm/imagePreview/3.jpg',
+  }
+];
+
+const commonImages = [
+   'https://static.zhongan.com/website/health/zarm/images/banners/1.png',
+   'https://static.zhongan.com/website/health/zarm/images/banners/2.png',
+   'https://static.zhongan.com/website/health/zarm/images/banners/3.png',
+];
+
+function Demo() {
+  const [visibleState, setVisibleState] = useState({
+    origin: false,
+    common: false,
+    picture: false,
+  });
+
+  const open = (key) => {
+    setVisibleState({
+      ...visibleState,
+      [key]: true
+    });
+  }
+
+  const hide = (key) => {
+    setVisibleState({
+      ...visibleState,
+      [key]: false,
+    });
+  }
+
+  return (
+    <>
+      <NoticeBar>建议在手机下体验</NoticeBar>
+      <Cell
+        description={
+          <Button size="xs" onClick={() => open('common')}>开启</Button>
+        }>
+          普通
+        </Cell>
+      <Cell
+        description={
+          <Button size="xs" onClick={() => open('origin')}>开启</Button>
+        }>
+          有查看原始图片功能
+      </Cell>
+      <ImagePreview visible={visibleState.origin} images={originImages} onClose={() => hide('origin')}  maxScale={5} /> 
+      <ImagePreview visible={visibleState.common} images={commonImages} onClose={() => hide('common')} maxScale={10}/>
+    </>
+  );
+} 
+ReactDOM.render(<Demo />, mountNode);
+```
+
+
+## 预览指定图片
+```jsx
+import { useState } from 'react';
+import { ImagePreview, Cell } from 'zarm';
+
+const commonImages = [
+   'https://static.zhongan.com/website/health/zarm/images/banners/1.png',
+   'https://static.zhongan.com/website/health/zarm/images/banners/2.png',
+   'https://static.zhongan.com/website/health/zarm/images/banners/3.png',
+];
+
+function Demo() {
+  const [visible, setVisible] = useState(false);
+  const [pictureIndex, setPictureIndex] = useState(0);
+
+  const hide = () => {
+    setVisible(false);
+  }
+
+  const show = (index) => {
+    setVisible(true);
+    setPictureIndex(index);
+  }
+
+  return (
+    <>
+      <Cell>
+        {
+          commonImages.map((pic, index) => (
+            <div className="picture-item" onClick={() => show(index)} key={+index}>
+              <img src={pic} />
+            </div>
+          ))
+        }
+      </Cell>
+      <ImagePreview visible={visible} images={commonImages} onClose={() => hide()} activeIndex={pictureIndex} /> 
+    </>
+  );  
+} 
+ReactDOM.render(<Demo />, mountNode);
+
+```
+
+| 属性 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| visible | boolean | false | 是否显示 |
+| minScale | number | 1 | 图片最小缩放比例，1 为最小值 |
+| maxScale | number | 3 | 图片最大缩放比例 |
+| images | Array<string> \| Array<{url: string; originUrl: string;}> | - | 图片地址 |
+| activeIndex | number | 0 | 当前展示的图片是第几张，从0开始 |
+| showPagination | boolean | true | 是否显示分页器 |
+| onChange | (activeIndex?: number) => void | - | 图片切换时候回调 |
+| onClose | () => void | - | 关闭时候回调 |
+