Merge pull request #7 from gauravchl/development

0.2.0

demo/src/index.jsx

@@ -2,20 +2,19 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ImageStory from '../../src/index.jsx';
 
-let HelloWorld = React.createClass({
 
-  getInitialState() {
-    return {
-      images: images,
-    };
-  },
+class Demo extends React.Component {
+  constructor() {
+    super();
+    this.state = { images };
+  }
 
 
   toggleImage(index) {
     let { images } = this.state;
     images[index].selected = !images[index].selected;
-    this.setState({images});
-  },
+    this.setState({ images });
+  }
 
 
   getAllImages() {
@@ -44,44 +43,53 @@ let HelloWorld = React.createClass({
     }
 
 
-    let images = this.state.images.map((img, index) => { return (
-      <div key={index} style={Object.assign({}, {backgroundImage: `url(${img.src})`}, wrapStyle)} onClick={() => this.toggleImage(index)}>
-        {img.selected ? <div style={markStyle}>&#10004;</div> : null}
-      </div>
-    )})
+    const images = this.state.images.map((img, index) => {
+      return (
+        <div
+          key={index}
+          style={{ ...wrapStyle, backgroundImage: `url(${img.src})` }}
+          onClick={() => this.toggleImage(index)}>
+
+          { img.selected
+            ? <div style={markStyle}>&#10004;</div>
+            : null
+          }
+
+        </div>
+      )
+    })
 
     return <div style={{display: 'flex', justifyContent: 'space-between', margin: '22px auto', maxWidth: 1200}}>{images}</div>
-  },
+  }
 
 
   render() {
     let { images } = this.state;
     let selectedImages = images.filter((img) => img.selected).map((img) => img.src);
     return (
-      <div style={{paddingBottom: 52}}>
+      <div style={{ paddingBottom: 52 }}>
         <Header/>
 
         {this.getAllImages()}
         <br/>
         <br/>
         <ImageStory
           onImageSelect={(e, img) => window.open(img)}
-          rootStyle={{margin: '0 auto'}}
+          rootStyle={{ margin: '0 auto' }}
           onLoad={() => console.log('Images loaded')}
           images={selectedImages} />
         <Footer/>
       </div>
     )
-  },
-});
+  }
+}
+
 
 document.addEventListener('DOMContentLoaded', () => {
-  ReactDOM.render(<HelloWorld/>, document.getElementById('main'));
+  ReactDOM.render(<Demo />, document.getElementById('main'));
 });
 
 
-
-
 const images = [
   {
     src: 'https://images.unsplash.com/photo-1480914362564-9f2c2634e266?dpr=2&auto=compress,format&fit=crop&w=568&h=379&q=80&cs=tinysrgb&crop=',
@@ -119,8 +127,6 @@ const images = [
 ]
 
 
-
-
 const Header = function() {
   let style = {
     background: '#f5f5f5',

demo/sw.js

@@ -1,5 +1,5 @@
 var APP_PREFIX = 'react-smart-gallery'
-var VERSION = '0.0.0.3'
+var VERSION = '0.0.0.4'
 var CACHE_NAME = APP_PREFIX + VERSION
 var URLS = [
   './',