增加ImageGallery组件

baseComponents/ImageGallery/index.tsx

+import React from 'react';
+import ImageLoader from '../ImageLoader'
+import ImageViewer from '../ImageViewer'
+
+interface ImageLoaderProps {
+  height: string;
+  width: string,
+  divStyle: React.CSSProperties;
+}
+export interface ImageGalleryProps {
+  urls: string[];
+  imageLoaderProps: ImageLoaderProps;
+  wrapperStyle: React.CSSProperties;
+}
+
+interface ImageGalleryState {
+  index: number;
+  isOpen: boolean;
+}
+
+export default class ImageGallery extends React.Component<ImageGalleryProps, ImageGalleryState> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      index: 0,
+      isOpen: false,
+    }
+  }
+
+  handleClick = (idx: number) => {
+    this.setState({ index: idx, isOpen: true })
+  }
+
+  handleClose = () => {
+    this.setState({ isOpen: false })
+  }
+
+  render() {
+    const { urls, imageLoaderProps, wrapperStyle, } = this.props;
+    const { isOpen, index } = this.state;
+    const defaultImageLoaderProps = {
+      width: '90px',
+      height: '90px',
+      divStyle: {
+        textAlign: 'center',
+      },
+      ...imageLoaderProps,
+    };
+    const defaultWrapperStyle = {
+      padding: 6,
+      background: 'white',
+      border: '1px solid #eee',
+      borderRadius: 4,
+      display: 'inline-block',
+      margin: 6
+    }
+
+    return (
+      <>
+        {
+          urls.map((url, idx) => (
+            <div style={defaultWrapperStyle} key={url} >
+              <ImageLoader onClick={() => this.handleClick(idx)} url={url} {...defaultImageLoaderProps} />
+            </div>
+          ))
+        }
+        {isOpen ? <ImageViewer urls={urls} index={index} onClose={this.handleClose} /> : null}
+      </>
+    );
+  }
+}

baseComponents/ImageLoader/index.js

@@ -30,13 +30,15 @@ export default class ImageLoader extends React.Component {
   }
 
   render() {
-    const { width, height, url, divStyle } = this.props;
+    const { width, height, url, divStyle, onClick } = this.props;
     return (<div style={{
       width,
       height,
       lineHeight: height,
       ...divStyle,
-    }}>
+    }}
+    onClick={onClick}
+    >
       <img src={url}
            alt={'预览图片'}
            style={{ visibility: 'hidden'}}