├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .npmignore
├── 2017_03_06_13_09_14.gif
├── README.md
├── V2.md
├── demo
├── .gitignore
├── README.md
├── config
│ ├── env.js
│ ├── jest
│ │ ├── cssTransform.js
│ │ └── fileTransform.js
│ ├── paths.js
│ ├── polyfills.js
│ ├── webpack.config.dev.js
│ ├── webpack.config.prod.js
│ └── webpackDevServer.config.js
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── scripts
│ ├── build.js
│ ├── start.js
│ └── test.js
├── src
│ ├── App.js
│ ├── index.css
│ ├── index.js
│ └── registerServiceWorker.js
└── yarn.lock
├── index.js
├── package.json
├── src
├── component
│ ├── index.js
│ └── index.native.js
├── index.js
└── spring.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [ "env" , {
4 | "targets": {
5 | "browsers": ["last 2 versions", "safari >= 7"]
6 | }
7 | }],
8 | "react"
9 | ],
10 | "plugins": [
11 | "transform-object-rest-spread",
12 | "transform-function-bind"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 |
11 | [*.md]
12 | trim_trailing_whitespace = false
13 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "plugins": [
4 | ],
5 | "parserOptions": {
6 | "ecmaVersion": 6,
7 | "sourceType": "module",
8 | "ecmaFeatures": {
9 | "jsx": true
10 | }
11 | },
12 | "env": {
13 | "browser": true,
14 | "amd": true,
15 | "es6": true,
16 | "node": true,
17 | "mocha": true
18 | },
19 | "rules": {
20 | "space-before-function-paren": [1, {"anonymous": "never", "named": "never"}],
21 | "comma-spacing": [1, { "before": false, "after": true }],
22 | "space-infix-ops": 1,
23 | "semi": [1, "never" ],
24 | "comma-dangle": 1,
25 | "quotes": [ 1, "single" ],
26 | "no-undef": 1,
27 | "no-extra-semi": 1,
28 | "no-trailing-spaces": [1, { "skipBlankLines": true }],
29 | "no-unreachable": 1
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 |
6 | # misc
7 | .DS_Store
8 | npm-debug.log
9 |
10 | # build files
11 | *.tgz
12 | *.log
13 | /lib/
14 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /test/
2 | /demo/
3 | *.gif
4 | *.tgz
5 | .babelrc
6 | /src/
7 | *.md
8 |
--------------------------------------------------------------------------------
/2017_03_06_13_09_14.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yusukeshib/react-pullrefresh/48dac7afe8f3246f5403e2f0f38e936b17fe3f31/2017_03_06_13_09_14.gif
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-pullrefresh
2 |
3 | Pull to reflesh material design component.
4 | react-native is supported.
5 |
6 | 
7 |
8 | #### Demo
9 |
10 | [https://yusukeshibata.github.io/react-pullrefresh/](https://yusukeshibata.github.io/react-pullrefresh/)
11 |
12 |
13 | #### Install
14 |
15 | ```sh
16 | npm install react-pullrefresh
17 | ```
18 |
19 | #### Usage
20 |
21 | ```javascript
22 | import PullRefresh from 'react-pullrefresh'
23 |
24 | class App extends Component {
25 | // onRefresh function canbe async/sync
26 | async onRefresh() {
27 | await someAsyncFunction()
28 | }
29 | // Without children PullRefresh element observe document.body's scroll
30 | render() {
31 | return (
32 |
35 | {range(100).map(i => {
36 | return (
37 | {i}
38 | )
39 | })}
40 |
41 | )
42 | }
43 | }
44 |
45 | export default App
46 | ```
47 | #### Behaviour difference between v1/v2
48 |
49 | TODO:
50 |
51 | #### Props
52 |
53 | ##### render
54 |
55 | TODO:
56 |
57 |
58 | ##### color
59 |
60 | default: `#787878`
61 |
62 | ##### bgColor
63 |
64 | default: `#ffffff`
65 |
66 | ##### disabled
67 |
68 | disable component
69 |
70 | default: `false`
71 |
72 | ##### zIndex
73 |
74 | specify css z-index.
75 |
76 | default: `undefined`
77 |
78 | ##### onRefresh
79 |
80 | ```javascript
81 | async function onRefresh() {
82 | //...some async function
83 | }
84 | ```
85 |
86 | ##### style
87 |
88 | container style.
89 |
90 | default: `undefined`
91 |
92 | #### Removed props
93 |
94 | * size
95 | * offset
96 | * max
97 | * waitingComponent
98 | * pullingComponent
99 | * pulledComponent
100 | * supportDesktop
101 |
102 | #### License
103 |
104 | MIT
105 |
--------------------------------------------------------------------------------
/V2.md:
--------------------------------------------------------------------------------
1 | # V2
2 |
--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
23 | /src/react-pullrefresh/
24 |
--------------------------------------------------------------------------------
/demo/config/env.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const fs = require('fs');
4 | const path = require('path');
5 | const paths = require('./paths');
6 |
7 | // Make sure that including paths.js after env.js will read .env variables.
8 | delete require.cache[require.resolve('./paths')];
9 |
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 | throw new Error(
13 | 'The NODE_ENV environment variable is required but was not specified.'
14 | );
15 | }
16 |
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 | `${paths.dotenv}.${NODE_ENV}.local`,
20 | `${paths.dotenv}.${NODE_ENV}`,
21 | // Don't include `.env.local` for `test` environment
22 | // since normally you expect tests to produce the same
23 | // results for everyone
24 | NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 | paths.dotenv,
26 | ].filter(Boolean);
27 |
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 | if (fs.existsSync(dotenvFile)) {
34 | require('dotenv').config({
35 | path: dotenvFile,
36 | });
37 | }
38 | });
39 |
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 | .split(path.delimiter)
52 | .filter(folder => folder && !path.isAbsolute(folder))
53 | .map(folder => path.resolve(appDirectory, folder))
54 | .join(path.delimiter);
55 |
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 |
60 | function getClientEnvironment(publicUrl) {
61 | const raw = Object.keys(process.env)
62 | .filter(key => REACT_APP.test(key))
63 | .reduce(
64 | (env, key) => {
65 | env[key] = process.env[key];
66 | return env;
67 | },
68 | {
69 | // Useful for determining whether we’re running in production mode.
70 | // Most importantly, it switches React into the correct mode.
71 | NODE_ENV: process.env.NODE_ENV || 'development',
72 | // Useful for resolving the correct path to static assets in `public`.
73 | // For example,
.
74 | // This should only be used as an escape hatch. Normally you would put
75 | // images into the `src` and `import` them in code to get their paths.
76 | PUBLIC_URL: publicUrl,
77 | }
78 | );
79 | // Stringify all values so we can feed into Webpack DefinePlugin
80 | const stringified = {
81 | 'process.env': Object.keys(raw).reduce((env, key) => {
82 | env[key] = JSON.stringify(raw[key]);
83 | return env;
84 | }, {}),
85 | };
86 |
87 | return { raw, stringified };
88 | }
89 |
90 | module.exports = getClientEnvironment;
91 |
--------------------------------------------------------------------------------
/demo/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // This is a custom Jest transformer turning style imports into empty objects.
4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
5 |
6 | module.exports = {
7 | process() {
8 | return 'module.exports = {};';
9 | },
10 | getCacheKey() {
11 | // The output is always the same.
12 | return 'cssTransform';
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/demo/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 |
5 | // This is a custom Jest transformer turning file imports into filenames.
6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
7 |
8 | module.exports = {
9 | process(src, filename) {
10 | return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/demo/config/paths.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 | const fs = require('fs');
5 | const url = require('url');
6 |
7 | // Make sure any symlinks in the project folder are resolved:
8 | // https://github.com/facebookincubator/create-react-app/issues/637
9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 |
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 |
14 | function ensureSlash(path, needsSlash) {
15 | const hasSlash = path.endsWith('/');
16 | if (hasSlash && !needsSlash) {
17 | return path.substr(path, path.length - 1);
18 | } else if (!hasSlash && needsSlash) {
19 | return `${path}/`;
20 | } else {
21 | return path;
22 | }
23 | }
24 |
25 | const getPublicUrl = appPackageJson =>
26 | envPublicUrl || require(appPackageJson).homepage;
27 |
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right