Merge pull request #1 from bu1ka/container-with-overflow

Added support container with overflow

Author: Aljullu

src/components/App/App.jsx

@@ -16,6 +16,7 @@ export default class App extends React.Component {
       afterLoadText: 'afterLoad triggered',
       beforeLoadText: 'beforeLoad triggered',
       direction: 'vertical',
+      containerWithOverflow: false,
       effect: '',
       showLowResImages: true,
       threshold: 100
@@ -48,7 +49,7 @@ export default class App extends React.Component {
 
   render() {
     const {afterLoadText, beforeLoadText, direction,
-      effect, showLowResImages, threshold} = this.state;
+      effect, showLowResImages, threshold, containerWithOverflow} = this.state;
 
     return (
       <div className={'app ' + direction}>
@@ -114,6 +115,21 @@ export default class App extends React.Component {
               </label>
             </p>
           </fieldset>
+          <fieldset className="app-controls-fieldset">
+            <p>
+              <label>
+                <input className="app-controls-checkbox"
+                  type="checkbox"
+                  onChange={() => {
+                    this.setState({
+                      containerWithOverflow: !this.state.containerWithOverflow
+                    });
+                  }}
+                  defaultChecked={this.state.containerWithOverflow} />
+                Container with overflow
+              </label>
+            </p>
+          </fieldset>
           <br />
           <fieldset className="app-controls-fieldset">
             <p>
@@ -142,6 +158,7 @@ export default class App extends React.Component {
         <Gallery
           afterLoadText={afterLoadText}
           beforeLoadText={beforeLoadText}
+          containerWithOverflow={containerWithOverflow}
           direction={direction}
           effect={effect}
           showLowResImages={showLowResImages}

src/components/Gallery/Gallery.jsx

@@ -21,11 +21,12 @@ export class Gallery extends React.Component {
 
   render() {
     const {afterLoadText, beforeLoadText, effect, direction,
-      scrollPosition, showLowResImages, threshold} = this.props;
+      scrollPosition, showLowResImages, threshold, containerWithOverflow
+    } = this.props;
     const photos = getPhotos();
 
     return (
-      <div className={ 'gallery ' + direction }>
+      <div className={ `gallery ${direction} ${containerWithOverflow ? 'with-overflow' : ''}` }>
         {photos.map((photo) =>
           <LazyLoadImage
             alt={photo.src}
@@ -47,6 +48,10 @@ export class Gallery extends React.Component {
   }
 }
 
+Gallery.defaultProps = {
+  containerWithOverflow: false
+};
+
 Gallery.propTypes = {
   afterLoadText: PropTypes.string.isRequired,
   beforeLoadText: PropTypes.string.isRequired,
@@ -55,7 +60,8 @@ Gallery.propTypes = {
   effect: PropTypes.oneOf([
     'black-and-white', 'blur', 'opacity', '']).isRequired,
   showLowResImages: PropTypes.bool.isRequired,
-  threshold: PropTypes.number.isRequired
+  threshold: PropTypes.number.isRequired,
+  containerWithOverflow: PropTypes.bool
 };
 
 export default trackWindowScroll(Gallery);

src/components/Gallery/gallery.css

@@ -8,6 +8,19 @@
   white-space: nowrap;
 }
 
+.with-overflow {
+  max-height: 500px;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
+.horizontal.with-overflow {
+  max-height: none;
+  max-width: 990px;
+  overflow-x: scroll;
+  overflow-y: auto;
+}
+
 .gallery.horizontal .gallery-img-wrapper {
   margin-left: 10px;
 }