├── .babelrc
├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── demo
├── app.css
├── index.html
├── index.js
└── routes
│ ├── ExampleView1.js
│ ├── ExampleView2.js
│ └── Home.js
├── devServer.js
├── dist
├── index.html
└── main.js
├── package-lock.json
├── package.json
├── src
├── ReactReFresh.js
└── spinner.css
├── webpack.config.js
└── webpack.config.prod.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react"],
3 | "env": {
4 | "development": {
5 | "presets": ["react-hmre"]
6 | }
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "ecmaFeatures": {
3 | "jsx": true,
4 | "modules": true
5 | },
6 | "env": {
7 | "browser": true,
8 | "node": true
9 | },
10 | "parser": "babel-eslint",
11 | "rules": {
12 | "quotes": [2, "single"],
13 | "strict": [2, "never"],
14 | "babel/generator-star-spacing": 1,
15 | "babel/new-cap": 1,
16 | "babel/object-shorthand": 1,
17 | "babel/arrow-parens": 1,
18 | "babel/no-await-in-loop": 1,
19 | "react/jsx-uses-react": 2,
20 | "react/jsx-uses-vars": 2,
21 | "react/react-in-jsx-scope": 2
22 | },
23 | "plugins": [
24 | "babel",
25 | "react"
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 |
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 |
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 |
20 | # node-waf configuration
21 | .lock-wscript
22 |
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 |
26 | # Dependency directory
27 | node_modules
28 |
29 | # Optional npm cache directory
30 | .npm
31 |
32 | # Optional REPL history
33 | .node_repl_history
34 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Go7hic
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ReactReFresh
2 | 一个简单的上拉下拉刷新组件
3 |
4 | ## 使用
5 |
6 | - git clone
7 | - npm install
8 |
9 | - npm run start
10 |
11 | - npm run build
12 |
--------------------------------------------------------------------------------
/demo/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #EEEEEE;
3 | }
4 |
5 | .title {
6 | font-size: large;
7 | height: 50px;
8 | line-height: 50px;
9 | }
10 |
11 | .tableView {
12 | height: calc( 100vh - 100px );
13 | overflow-y: scroll;
14 | }
15 |
16 | .tableView .list-group-item:first-child,
17 | .tableView .list-group-item:last-child {
18 | border-radius: 0px;
19 | }
20 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | React Refresh Infinite TableView
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/demo/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { render } from 'react-dom'
3 | import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'
4 |
5 | import Home from './routes/Home.js'
6 |
7 | render((
8 |
9 |
10 |
11 | ), document.getElementById('root'))
12 |
--------------------------------------------------------------------------------
/demo/routes/ExampleView1.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 |
4 | // use default loading spinners
5 | import ReactRefresh from '../../src/ReactReFresh.js'
6 |
7 | export default class ExampleView1 extends ReactRefresh {
8 |
9 | constructor(props) {
10 | super(props)
11 | }
12 |
13 | render() {
14 | var cells = this.props.dataSource.map(function(item, index) {
15 | return
16 | {item}
17 |
18 | })
19 |
20 | return (
21 | // remember to invoke viewDidScroll from superclass(InfinitScrollView)
22 |
23 | {cells}
24 |
25 | )
26 | }
27 |
28 | }
29 |
--------------------------------------------------------------------------------
/demo/routes/ExampleView2.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 |
4 | // customize loading Indicators
5 | import ReactReFresh from '../../src/ReactReFresh.js'
6 |
7 | export default class ExampleView2 extends ReactReFresh {
8 |
9 | constructor(props) {
10 | super(props)
11 | }
12 |
13 | render() {
14 |
15 | var cells = this.props.dataSource.map(function(item, index) {
16 | return
17 | {item}
18 |
19 | })
20 |
21 | return (
22 | // remember to invoke viewDidScroll from superclass(InfinitScrollView)
23 |
24 | {this.refreshIndicator()}
25 | {cells}
26 | {this.loadMoreIndicator()}
27 |
28 | )
29 | }
30 |
31 | // customize your Refresh Indicator here
32 | refreshIndicator() {
33 | if (this.state.isRefreshing) {
34 | return (
35 | 😁...
36 | )
37 | }
38 | return
39 | }
40 |
41 | // customize your Load-more Indicator here
42 | loadMoreIndicator() {
43 | if (this.state.isLoadingMore) {
44 | return (
45 | ...😁
46 | )
47 | }
48 | return
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/demo/routes/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import '../../node_modules/bootstrap/dist/css/bootstrap.css'
3 | import '../app.css'
4 |
5 | import ExampleView1 from './ExampleView1.js'
6 | import ExampleView2 from './ExampleView2.js'
7 |
8 | export default class Home extends React.Component {
9 |
10 | constructor(props) {
11 | super(props)
12 |
13 | // initial data for tableviews
14 | var data1 = this.initData()
15 | var data2 = this.initData()
16 | this.state = {data1: data1, data2: data2}
17 |
18 | // recommend that you bind your event handlers in the constructor so they are only bound once for every instance
19 | // https://facebook.github.io/react/docs/reusable-components.html#no-autobinding
20 | this.handleScrollToTop1 = this.handleScrollToTop1.bind(this)
21 | this.handleScrollToBottom1 = this.handleScrollToBottom1.bind(this)
22 |
23 | this.handleScrollToTop2 = this.handleScrollToTop2.bind(this)
24 | this.handleScrollToBottom2 = this.handleScrollToBottom2.bind(this)
25 | }
26 |
27 | render() {
28 | return (
29 |
30 |
31 |
Default
32 |
Custom
33 |
34 |
35 |
40 |
46 |
47 |