diff --git a/.npmignore b/.npmignore index 22f0c5c..1b62d44 100644 --- 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 index c06279a..7e48b72 100644 Binary files a/2017_03_06_13_09_14.gif and b/2017_03_06_13_09_14.gif differ diff --git a/README.md b/README.md index ea2b7e9..2bbaea6 100644 --- 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,64 +21,22 @@ react-native is supported. ```javascript import PullRefresh from 'react-pullrefresh' - // custom renderer - const renderWaitingComponent = (props) => { - return
waiting
- } - const renderPullingComponent = (props, step) => { - return
{step + '/' + props.max}
- } - const renderPulledComponent = (props, step) => { - return
{step + '/' + props.max}
- } - 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 ( -
- - {range(100).map(i => { - return ( -
{i}
- ) - })} -
- ) - } - // With scrollable element children, observe children's scrolling. render() { return ( - -
- {range(100).map(i => { + {range(100).map(i => { return (
{i}
) - })} -
+ })} ) } @@ -81,89 +44,60 @@ react-native is supported. 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 new file mode 100644 index 0000000..4305763 --- /dev/null +++ b/V2.md @@ -0,0 +1 @@ +# V2 diff --git a/demo/.gitignore b/demo/.gitignore index d30f40e..0d1c614 100644 --- 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 index 0983ad1..5605f8d 100644 --- 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 index b7a1e7f..8d26c5d 100644 --- 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 index f88e955..6a4208e 100644 --- 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 index 7bee027..f98b93a 100644 --- 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`. --> React App +