Merge branch 'feature/v2' into develop

yusukeshib · Dec 4, 2017 · ef5b7c7 · ef5b7c7
2 parents 7c58b8c + 875f9a1
commit ef5b7c7
Show file tree

Hide file tree

Showing 101 changed files with 12,951 additions and 3,990 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,4 +1,5 @@
 test/
+demo/
 *.gif
 *.tgz
 webpack.config.js

diff --git a/2017_03_06_13_09_14.gif b/2017_03_06_13_09_14.gif
diff --git a/README.md b/README.md
@@ -5,6 +5,11 @@ react-native is supported.
 
 ![](/2017_03_06_13_09_14.gif?raw=true)
 
+#### Demo
+
+[https://yusukeshibata.github.io/react-pullrefresh/](https://yusukeshibata.github.io/react-pullrefresh/)
+
+
 #### Install
 
   ```sh
@@ -16,154 +21,83 @@ react-native is supported.
   ```javascript
   import PullRefresh from 'react-pullrefresh'
 
-  // custom renderer
-  const renderWaitingComponent = (props) => {
-    return <div style={{backgroundColor:'#00f', color:'#fff'}}>waiting</div>
-  }
-  const renderPullingComponent = (props, step) => {
-    return <div style={{backgroundColor:'#f00', color:'#fff'}}>{step + '/' + props.max}</div>
-  }
-  const renderPulledComponent = (props, step) => {
-    return <div style={{backgroundColor:'#0f0', color:'#fff'}}>{step + '/' + props.max}</div>
-  }
-
   class App extends Component {
-    constructor(props) {
-      super(props)
-        this.state = {
-        }
-      this.onRefresh = this.onRefresh.bind(this)
-    }
-    onRefresh(next) {
-      // some async process...
-      setTimeout(_ => {
-          next()
-          },2000)
+    // onRefresh function canbe async/sync
+    async onRefresh() {
+      await someAsyncFunction()
     }
     // Without children PullRefresh element observe document.body's scroll
-    render() {
-      return (
-          <div className='App'>
-          <PullRefresh zIndex={10000} size={40} max={100} onRefresh={this.onRefresh}/>
-          {range(100).map(i => {
-              return (
-                  <div key={i} className='row'>{i}</div>
-                  )
-              })}
-          </div>
-          )
-    }
-    // With scrollable element children, observe children's scrolling.
     render() {
       return (
           <PullRefresh
-            zIndex={10000}
-            size={40}
-            max={100}
-            waitingComponent={false}
-            pullingComponent={renderPullingComponent}
-            pulledComponent={renderPulledComponent}
-            onRefresh={this.onRefresh}
-            supportDesktop={true}
+            onRefresh={::this.onRefresh}
           >
-          <!-- scrollable child element -->
-          <div className='App' style={{ overflow: 'auto', height: '100%' }}>
-          {range(100).map(i => {
+            {range(100).map(i => {
               return (
                   <div key={i} className='row'>{i}</div>
                   )
-              })}
-          </div>
+            })}
           </PullRefresh>
           )
     }
   }
 
 export default App
 ```
+#### Behaviour difference between v1/v2
+
+TODO:
 
 #### Props
 
-##### offset
-default: 0
+##### render 
+
+TODO:
 
-Y-Offset for layout.
 
 ##### color 
-default: `#000`
 
-##### disabled
-default: `false`
+default: `#787878`
 
-Disable component
+##### bgColor 
 
-##### zIndex
-default: `undefined`
+default: `#ffffff`
 
-specify css z-index.
+##### disabled
 
-##### size
-default: `40`
+disable component
 
-indicator size.
+default: `false`
 
-##### max
-default: `100`
+##### zIndex
 
-max pull down distance.
+specify css z-index.
 
-##### onRefresh
+default: `undefined`
 
-pull event will be fired on touchend,mouseup.  
-first argument is callback function, so must be called.  
+##### onRefresh
 
 ```javascript
-function onRefresh(callback) {
+async function onRefresh() {
   //...some async function
-  callback()
 }
 ```
 
-##### waitingComponent
-
-Specify component you want to render on waiting state.  
-If false is specified, nothing rendered.  
-Component will be layout at the center of 100% width flex-container.
-
-##### pullingComponent
-
-Specify component you want to render on waiting state.  
-If false is specified, nothing rendered.  
-Component will be layout at the center of 100% width flex-container.
-
-##### pulledComponent
-
-Specify component you want to render on state after pulling.  
-If false is specified, nothing rendered.  
-If nothing specified, `pullingComponent` will be used.  
-Component will be layout at the center of 100% width flex-container.
-
-##### supportDesktop
-
-default: `false`
-Enable component on desktop if specified.
-
 ##### style
 
-default:
-```js
-{
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center'
-}
-```
-Overried container style.
+container style.
 
-#### Demo
+default: `undefined`
 
-[https://yusukeshibata.github.io/react-pullrefresh/](https://yusukeshibata.github.io/react-pullrefresh/)
+#### Removed props
 
+* size
+* offset
+* max
+* waitingComponent
+* pullingComponent
+* pulledComponent
+* supportDesktop
 
 #### License
 

diff --git a/V2.md b/V2.md
@@ -0,0 +1 @@
+# V2
diff --git a/demo/.gitignore b/demo/.gitignore
@@ -19,3 +19,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/src/react-pullrefresh/
diff --git a/demo/config/webpack.config.dev.js b/demo/config/webpack.config.dev.js
@@ -34,6 +34,7 @@ module.exports = {
   // This means they will be the "root" imports that are included in JS bundle.
   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
   entry: [
+    require.resolve('regenerator-runtime/runtime'),
     // Include an alternative client for WebpackDevServer. A client's job is to
     // connect to WebpackDevServer by a socket and get notified about changes.
     // When you save a file, the client will either apply hot updates (in case
@@ -93,7 +94,8 @@ module.exports = {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
-      'react-pullrefresh': fs.realpathSync('..')
+      // 'react-pullrefresh': fs.realpathSync('../src')
+      'react-pullrefresh': '../src/react-pullrefresh'
     },
     plugins: [
       // Prevents users from importing files from outside of src/ (or node_modules/).
@@ -132,39 +134,10 @@ module.exports = {
       // When adding a new loader, you must add its `test`
       // as a new entry in the `exclude` list for "file" loader.
 
-      // "file" loader makes sure those assets get served by WebpackDevServer.
-      // When you `import` an asset, you get its (virtual) filename.
-      // In production, they would get copied to the `build` folder.
-      {
-        exclude: [
-          /\.html$/,
-          /\.(js|jsx)$/,
-          /\.css$/,
-          /\.json$/,
-          /\.bmp$/,
-          /\.gif$/,
-          /\.jpe?g$/,
-          /\.png$/,
-        ],
-        loader: require.resolve('file-loader'),
-        options: {
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
-      },
-      // "url" loader works like "file" loader except that it embeds assets
-      // smaller than specified limit in bytes as data URLs to avoid requests.
-      // A missing `test` is equivalent to a match.
-      {
-        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-        loader: require.resolve('url-loader'),
-        options: {
-          limit: 10000,
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
-      },
       // Process JS with Babel.
       {
         test: /\.(js|jsx)$/,
+        // include: [ paths.appSrc, fs.realpathSync('../src') ],
         include: paths.appSrc,
         loader: require.resolve('babel-loader'),
         options: {
@@ -173,6 +146,21 @@ module.exports = {
           // It enables caching results in ./node_modules/.cache/babel-loader/
           // directory for faster rebuilds.
           cacheDirectory: true,
+
+          babelrc: false,
+          presets: [
+            [ 'env' , {
+              targets: {
+                browsers: ['last 2 versions', 'safari >= 7']
+              }
+            }],
+            'react'
+          ],
+          plugins: [
+            'transform-regenerator',
+            'transform-function-bind',
+            'transform-object-rest-spread'
+          ]
         },
       },
       // "postcss" loader applies autoprefixer to our CSS.

diff --git a/demo/config/webpack.config.prod.js b/demo/config/webpack.config.prod.js
@@ -55,7 +55,11 @@ module.exports = {
   // You can exclude the *.map files from the build during deployment.
   devtool: 'source-map',
   // In production, we only want to load the polyfills and the app code.
-  entry: [require.resolve('./polyfills'), paths.appIndexJs],
+  entry: [
+    require.resolve('regenerator-runtime/runtime'),
+    require.resolve('./polyfills'),
+    paths.appIndexJs
+  ],
   output: {
     // The build folder.
     path: paths.appBuild,
@@ -93,7 +97,7 @@ module.exports = {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
-      'react-pullrefresh': fs.realpathSync('..')
+      'react-pullrefresh': '../src/react-pullrefresh'
     },
     plugins: [
       // Prevents users from importing files from outside of src/ (or node_modules/).
@@ -166,8 +170,22 @@ module.exports = {
         include: paths.appSrc,
         loader: require.resolve('babel-loader'),
         options: {
-
           compact: true,
+
+          babelrc: false,
+          presets: [
+            [ 'env' , {
+              targets: {
+                browsers: ['last 2 versions', 'safari >= 7']
+              }
+            }],
+            'react'
+          ],
+          plugins: [
+            'transform-regenerator',
+            'transform-function-bind',
+            'transform-object-rest-spread'
+          ]
         },
       },
       // The notation here is somewhat confusing.

diff --git a/demo/package.json b/demo/package.json
@@ -8,6 +8,10 @@
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",
     "babel-loader": "7.0.0",
+    "babel-plugin-transform-function-bind": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-regenerator": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-react-app": "^3.0.1",
     "babel-runtime": "6.23.0",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
@@ -36,12 +40,14 @@
     "react-dom": "^15.6.1",
     "react-error-overlay": "^1.0.9",
     "style-loader": "0.18.2",
+    "styled-components": "^2.2.3",
     "sw-precache-webpack-plugin": "0.11.3",
     "url-loader": "0.5.9",
     "webpack": "2.6.1",
     "webpack-dev-server": "2.5.0",
     "webpack-manifest-plugin": "1.1.0",
-    "whatwg-fetch": "2.0.3"
+    "whatwg-fetch": "2.0.3",
+    "why-did-you-update": "^0.1.0"
   },
   "scripts": {
     "start": "node scripts/start.js",

diff --git a/demo/public/index.html b/demo/public/index.html
@@ -20,6 +20,11 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <style>
+      body {
+        overflow: hidden;
+      }
+    </style>
   </head>
   <body>
     <noscript>
-Original file line number
+Diff line change
@@ -1,4 +1,5 @@
     test/
+    demo/
     *.gif
     *.tgz
     webpack.config.js
@@ Expand Down @@