add getProgress feature

examples/index.html

@@ -41,9 +41,7 @@ <h1>Basic Example with error message</h1>
       </div>
     </div> <!-- /container -->
 
-    <script src="https://unpkg.com/react@15.3.0/dist/react.js" defer></script>
-    <script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js" defer></script>
-    <script src="/react-preload.js" defer></script>
-    <script src="/examples.js" defer></script>
+    <!--<script src="https://unpkg.com/react@15.3.0/dist/react.js" defer></script>-->
+    <!--<script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js" defer></script>-->
 </body>
 </html>

examples/src/Examples.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Preload from 'react-preload';
+import Preload from '../../modules/index';
 import Spinner from './Spinner';
 
 const imgBase = 'https://picsum.photos/800/600?';
@@ -28,6 +28,11 @@ export class Example1 extends React.Component {
         })
     }
 
+    _getProgress = (completedCount, total) => {
+        const percent = (Math.round(completedCount/total * 10000)/100).toFixed(2) + '%'
+        console.log(percent);
+    }
+
     render() {
         const images = [
             `${imgBase}text=1-${this.state.cacheBreaker}`,
@@ -38,7 +43,7 @@ export class Example1 extends React.Component {
 
         return (
             <div>
-            <button
+                <button
                     onClick={this._handleClickNewImages}
                     type="button"
                     className="btn btn-primary"
@@ -48,6 +53,7 @@ export class Example1 extends React.Component {
                     onError={this._handleImageLoadError}
                     onSuccess={this._handleImageLoadSuccess}
                     loadingIndicator={<Spinner />}
+                    getProgress={this._getProgress}
                     mountChildren
                     resolveOnError
                 >

examples/src/index.js

@@ -1,3 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
 import ExamplePlayer from './ExamplePlayer';
 import { Example1 } from './Examples';
 

modules/ImageHelper.js

@@ -4,11 +4,13 @@ const reflect = p => p.then(v => ({v, status: 'fulfilled' }),
                             e => ({e, status: 'rejected' }));
 
 const ImageHelper = {
-    loadImage(url, options) {
+    completedCount: 0,
+    loadImage(url, options, callback) {
         const image = ImageCache.get(url, options);
 
         return new Promise((resolve, reject) => {
             const handleSuccess = () => {
+                callback && callback(++this.completedCount);
                 resolve(image);
             };
             const handleError = () => {
@@ -48,16 +50,16 @@ const ImageHelper = {
         });
     },
 
-    loadImages(urls, options) {
-        const promises = urls.map(url =>  reflect(this.loadImage(url, options)));
+    loadImages(urls, options, callback) {
+        if (this.completedCount !== 0) this.completedCount = 0; // 重置0
+        const promises = urls.map(url => reflect(this.loadImage(url, options, callback)));
         return Promise.all(promises).then((promises) => {
             return promises.map((p) => {
-                if(p.status !== 'fulfilled') {
+                if (p.status !== 'fulfilled') {
                     throw new Exception('One or more images failed to load');
                 }
                 return p;
-            }
-        )
+            });
         });
     },
 

modules/Preload.js

@@ -22,6 +22,9 @@ const propTypes = {
     // Success callback
     onSuccess: PropTypes.func,
 
+    // getProgress
+    getProgress: PropTypes.func,
+
     // Whether or not we should still show the content
     // even if there is a preloading error
     resolveOnError: PropTypes.bool,
@@ -37,6 +40,7 @@ const defaultProps = {
     autoResolveDelay: 0,
     onError: null,
     onSuccess: null,
+    getProgress: null,
     resolveOnError: true,
     mountChildren: true,
 };
@@ -87,7 +91,7 @@ class Preload extends React.Component {
 
     loadImages = () => {
         const { images, autoResolveDelay } = this.props;
-        ImageHelper.loadImages(images).then(
+        ImageHelper.loadImages(images, {}, this.updateProgress).then(
             this._handleSuccess,
             this._handleError,
         );
@@ -100,6 +104,10 @@ class Preload extends React.Component {
         }
     }
 
+    updateProgress = (completedCount) => {
+        this.props.getProgress(completedCount, this.props.images.length);
+    }
+
     _handleAutoResolve = () => {
         this._handleSuccess({ didAutoResolve: true });
     };

package.json

@@ -43,7 +43,9 @@
     "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.10.0",
-    "react-dom": "^15.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "react": "^15.0.0",
+    "react-dom": "^15.6.2",
     "react-test-renderer": "^16.4.2",
     "webpack": "^4.16.5",
     "webpack-cli": "^3.1.0",

webpack.config.js

@@ -1,27 +1,38 @@
 var path = require('path');
 var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = [{
-  devtool: 'source-map',
-  entry: {
-    'react-preload': './modules/index',
-    'examples': './examples/src/index',
-  },
-  output: {
-    path: path.resolve('dist'),
-    filename: '[name].js',
-    libraryTarget: 'var',
-    library: 'ReactPreload'
-  },
-  externals: {
-    react: 'React',
-    'react-dom': 'ReactDOM',
-    'react-preload': 'ReactPreload',
-  },
-  module: {
-    rules: [{
-      test: /\.js$/,
-      use: 'babel-loader'
-    }]
-  }
+    devtool: 'source-map',
+    entry: {
+        // 'react-preload': './modules/index',
+        // 'examples': './examples/src/index',
+        main: ['./examples/src/index'],
+        vendor: ['react', 'react-dom'],
+    },
+    output: {
+        path: path.resolve('dist'),
+        filename: '[name].js',
+        // libraryTarget: 'var',
+        // library: 'ReactPreload'
+    },
+    externals: {
+        // 'react': 'React',
+        // 'react-dom': 'ReactDOM',
+        // 'react-preload': 'ReactPreload',
+    },
+    module: {
+        rules: [{
+            test: /\.js$/,
+            use: 'babel-loader'
+        }]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: './examples/index.html',
+            chunks: ['main', 'vendor'],
+        }),
+    ]
+
 }];