├── .babelrc
├── .gitignore
├── README-cn.md
├── README.md
├── example
├── App.css
├── App1.jsx
├── App2.jsx
├── App3.jsx
├── App4.jsx
├── README.md
├── index1.html
├── index2.html
├── index3.html
└── index4.html
├── gulpfile.js
├── lib
├── FooterNode.js
├── HeadNode.js
├── ReactPullLoad.js
├── ReactPullLoad.less
├── constants.js
└── index.js
├── package.json
├── postcss.config.js
├── src
├── FooterNode.jsx
├── HeadNode.jsx
├── ReactPullLoad.jsx
├── ReactPullLoad.less
├── constants.js
├── index.d.ts
└── index.js
├── webpack.config.example.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "stage-1", "react"]
3 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | package-lock.json
8 |
9 | # Runtime data
10 | pids
11 | *.pid
12 | *.seed
13 | *.pid.lock
14 |
15 | # Directory for instrumented libs generated by jscoverage/JSCover
16 | lib-cov
17 |
18 | # Coverage directory used by tools like istanbul
19 | coverage
20 |
21 | # nyc test coverage
22 | .nyc_output
23 |
24 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
25 | .grunt
26 |
27 | # Bower dependency directory (https://bower.io/)
28 | bower_components
29 |
30 | # node-waf configuration
31 | .lock-wscript
32 |
33 | # Compiled binary addons (http://nodejs.org/api/addons.html)
34 | build/Release
35 |
36 | # Dependency directories
37 | node_modules/
38 | jspm_packages/
39 |
40 | # Typescript v1 declaration files
41 | typings/
42 |
43 | # Optional npm cache directory
44 | .npm
45 |
46 | # Optional eslint cache
47 | .eslintcache
48 |
49 | # Optional REPL history
50 | .node_repl_history
51 |
52 | # Output of 'npm pack'
53 | *.tgz
54 |
55 | # Yarn Integrity file
56 | .yarn-integrity
57 |
58 | # dotenv environment variables file
59 | .env
60 |
61 | demo
62 |
63 | deploy.config.json
64 |
65 | dist
66 |
67 | .publish
68 |
--------------------------------------------------------------------------------
/README-cn.md:
--------------------------------------------------------------------------------
1 | # [English](./README.md)
2 |
3 | # [react-pullLoad](https://github.com/react-ld/react-pullLoad)
4 |
5 | React 版本的 [pullLoad](https://github.com/lidianhao123/pullLoad) 下拉更新 上拉加载更多 组件
6 |
7 | [pullLoad](https://github.com/lidianhao123/pullLoad) 非 react 版本，支持 require.js 模块化调用
8 |
9 | #### 示例
10 |
11 | [demo1](https://react-ld.github.io/react-pullLoad/index1.html) ReactPullLoad 根节点 DOM 作为容器
12 |
13 | [demo2](https://react-ld.github.io/react-pullLoad/index2.html) ReactPullLoad 根节点 DOM 作为容器
14 |
15 | [demo3](https://react-ld.github.io/react-pullLoad/index3.html) document.body 作为容器 且自定义刷新和加载更多 UI 组件
16 |
17 | [demo4](https://react-ld.github.io/react-pullLoad/index4.html) 禁用下拉刷新功能
18 |
19 | # 当前版本 1.2.0
20 |
21 | 支持 Typescript
22 |
23 | # 简介
24 |
25 | 1. 只依赖 react/react-dom
26 | 2. 样式使用 less 编写
27 | 3. 支持 body 或者组件根 DOM 固定高度作为外部容器 contianer（即可视区域大小）
28 | 4. 触摸事件绑定在内容块 content（即高度为 auto 的 DOM ）
29 | 5. 纯 React 组件方式开发的
30 | 6. 支持自定义刷新和加载更多 UI 组件
31 | 7. 支持代码动态调起刷新和加载更多（组件将展示刷新和加载更多样式）
32 | 8. **只支持移动触摸设备**
33 |
34 | # 功能点
35 |
36 | 1. 下拉距离大于阈值触发刷新动作
37 | 2. 滚动到距底部距离小于阈值加载更多
38 | 3. 支持自定义刷新和加载更多 UI 组件
39 |
40 | # 使用说明
41 |
42 | ```sh
43 | npm install --save react-pullload
44 | ```
45 |
46 | ```js
47 | import ReactPullLoad, { STATS } from "react-pullload";
48 | import "node_modules/react-pullload/dist/ReactPullLoad.css";
49 |
50 | export class App extends Component {
51 | constructor() {
52 | super();
53 | this.state = {
54 | hasMore: true,
55 | data: cData,
56 | action: STATS.init,
57 | index: loadMoreLimitNum //loading more test time limit
58 | };
59 | }
60 |
61 | handleAction = action => {
62 | console.info(action, this.state.action, action === this.state.action);
63 | //new action must do not equel to old action
64 | if (action === this.state.action) {
65 | return false;
66 | }
67 |
68 | if (action === STATS.refreshing) {
69 | //刷新
70 | this.handRefreshing();
71 | } else if (action === STATS.loading) {
72 | //加载更多
73 | this.handLoadMore();
74 | } else {
75 | //DO NOT modify below code
76 | this.setState({
77 | action: action
78 | });
79 | }
80 | };
81 |
82 | handRefreshing = () => {
83 | if (STATS.refreshing === this.state.action) {
84 | return false;
85 | }
86 |
87 | setTimeout(() => {
88 | //refreshing complete
89 | this.setState({
90 | data: cData,
91 | hasMore: true,
92 | action: STATS.refreshed,
93 | index: loadMoreLimitNum
94 | });
95 | }, 3000);
96 |
97 | this.setState({
98 | action: STATS.refreshing
99 | });
100 | };
101 |
102 | handLoadMore = () => {
103 | if (STATS.loading === this.state.action) {
104 | return false;
105 | }
106 | //无更多内容则不执行后面逻辑
107 | if (!this.state.hasMore) {
108 | return;
109 | }
110 |
111 | setTimeout(() => {
112 | if (this.state.index === 0) {
113 | this.setState({
114 | action: STATS.reset,
115 | hasMore: false
116 | });
117 | } else {
118 | this.setState({
119 | data: [...this.state.data, cData[0], cData[0]],
120 | action: STATS.reset,
121 | index: this.state.index - 1
122 | });
123 | }
124 | }, 3000);
125 |
126 | this.setState({
127 | action: STATS.loading
128 | });
129 | };
130 |
131 | render() {
132 | const { data, hasMore } = this.state;
133 |
134 | const fixHeaderStyle = {
135 | position: "fixed",
136 | width: "100%",
137 | height: "50px",
138 | color: "#fff",
139 | lineHeight: "50px",
140 | backgroundColor: "#e24f37",
141 | left: 0,
142 | top: 0,
143 | textAlign: "center",
144 | zIndex: 1
145 | };
146 |
147 | return (
148 |
149 |
fixed header
150 |
158 |
159 |
160 |
161 | {data.map((str, index) => {
162 | return (
163 | -
164 |
165 |
166 | );
167 | })}
168 |
169 |
170 |
141 |
fixed header
142 |
150 |
151 |
152 |
153 | {data.map((str, index) => {
154 | return (
155 | -
156 |
157 |
158 | );
159 | })}
160 |
161 |
162 |
124 |
125 | fixed header
126 |
127 |
137 |
150 |
151 |
93 |
101 |
102 |
103 |
104 | {
105 | data.map( (str, index )=>{
106 | return
110 |
111 |
44 | {content}
45 |
46 | )
47 | }
48 | }
49 |
50 | class FooterNode extends PureComponent{
51 |
52 | static propTypes = {
53 | loaderState: PropTypes.string.isRequired,
54 | hasMore: PropTypes.bool.isRequired
55 | };
56 |
57 | static defaultProps = {
58 | loaderState: STATS.init,
59 | hasMore: true
60 | };
61 |
62 | render(){
63 | const {
64 | loaderState,
65 | hasMore
66 | } = this.props
67 |
68 | let content = ""
69 | // if(hasMore === false){
70 | // content = "没有更多"
71 | // } else if(loaderState == STATS.loading && hasMore === true){
72 | // content = "加载中"
73 | // }
74 | if(loaderState == STATS.loading){
75 | content = "加载中"
76 | } else if(hasMore === false){
77 | content = "没有更多"
78 | }
79 |
80 | return(
81 |
82 | {content}
83 |
84 | )
85 | }
86 | }
87 |
88 | const loadMoreLimitNum = 2;
89 |
90 | const cData = [
91 | "http://img1.gtimg.com/15/1580/158031/15803178_1200x1000_0.jpg",
92 | "http://img1.gtimg.com/15/1580/158031/15803179_1200x1000_0.jpg",
93 | "http://img1.gtimg.com/15/1580/158031/15803181_1200x1000_0.jpg",
94 | "http://img1.gtimg.com/15/1580/158031/15803182_1200x1000_0.jpg",
95 | "http://img1.gtimg.com/15/1580/158031/15803183_1200x1000_0.jpg",
96 | // "http://img1.gtimg.com/15/1580/158031/15803184_1200x1000_0.jpg",
97 | // "http://img1.gtimg.com/15/1580/158031/15803186_1200x1000_0.jpg"
98 | ]
99 |
100 | export class App extends Component{
101 | constructor(){
102 | super();
103 | this.state ={
104 | hasMore: true,
105 | data: cData,
106 | action: STATS.init,
107 | index: loadMoreLimitNum //loading more test time limit
108 | }
109 | }
110 |
111 | handleAction = (action) => {
112 | //new action must do not equel to old action
113 | if(action === this.state.action ||
114 | action === STATS.refreshing && this.state.action === STATS.loading ||
115 | action === STATS.loading && this.state.action === STATS.refreshing){
116 | console.info("It's same action or on loading or on refreshing ",action, this.state.action,action === this.state.action);
117 | return false
118 | }
119 |
120 | if(action === STATS.refreshing){//刷新
121 | setTimeout(()=>{
122 | //refreshing complete
123 | this.setState({
124 | data: cData,
125 | hasMore: true,
126 | action: STATS.refreshed,
127 | index: loadMoreLimitNum
128 | });
129 | }, 3000)
130 | } else if(action === STATS.loading && this.state.hasMore){//加载更多
131 | setTimeout(()=>{
132 | if(this.state.index === 0){
133 | this.setState({
134 | action: STATS.reset,
135 | hasMore: false
136 | });
137 | } else{
138 | this.setState({
139 | data: [...this.state.data, cData[0], cData[0]],
140 | action: STATS.reset,
141 | index: this.state.index - 1
142 | });
143 | }
144 | }, 3000)
145 | }
146 |
147 | //无更多内容，不再加载数据
148 | if(action === STATS.loading && !this.state.hasMore){
149 | return;
150 | }
151 | //DO NOT modify below code
152 | this.setState({
153 | action: action
154 | })
155 | }
156 |
157 | render(){
158 | const {
159 | data,
160 | hasMore
161 | } = this.state
162 |
163 | const fixHeaderStyle = {
164 | position: "fixed",
165 | width: "100%",
166 | height: "50px",
167 | color: "#fff",
168 | lineHeight: "50px",
169 | backgroundColor: "#e24f37",
170 | left: 0,
171 | top: 0,
172 | textAlign: "center",
173 | zIndex: 1
174 | }
175 |
176 | return (
177 |
178 |
179 | fixed header
180 |
181 |
190 |
191 |
192 |
193 | {
194 | data.map( (str, index )=>{
195 | return
199 |
200 |
107 |
108 | fixed header
109 |
110 |
120 |
133 |
134 |
28 | {
29 | loaderState === STATS.loading ? : ""
30 | }
31 |
32 | )
33 | }
34 | }
--------------------------------------------------------------------------------
/src/HeadNode.jsx:
--------------------------------------------------------------------------------
1 |
2 | import React, { PureComponent } from 'react'
3 | import PropTypes from 'prop-types';
4 | import { STATS } from './constants'
5 |
6 | export default class HeadNode extends PureComponent{
7 |
8 | static propTypes = {
9 | loaderState: PropTypes.string.isRequired,
10 | };
11 |
12 | static defaultProps = {
13 | loaderState: STATS.init,
14 | };
15 |
16 | render(){
17 | const {
18 | loaderState
19 | } = this.props
20 |
21 | return(
22 |
23 |
24 |
25 | )
26 | }
27 | }
--------------------------------------------------------------------------------
/src/ReactPullLoad.jsx:
--------------------------------------------------------------------------------
1 |
2 | import React, { Component } from 'react'
3 | import PropTypes from 'prop-types';
4 | import { findDOMNode } from 'react-dom'
5 | import { STATS } from './constants'
6 | import HeadNode from './HeadNode'
7 | import FooterNode from './FooterNode'
8 |
9 | function addEvent(obj, type, fn) {
10 | if (obj.attachEvent) {
11 | obj['e' + type + fn] = fn;
12 | obj[type + fn] = function () { obj['e' + type + fn](window.event); }
13 | obj.attachEvent('on' + type, obj[type + fn]);
14 | } else
15 | obj.addEventListener(type, fn, false, {passive: false});
16 | }
17 | function removeEvent(obj, type, fn) {
18 | if (obj.detachEvent) {
19 | obj.detachEvent('on' + type, obj[type + fn]);
20 | obj[type + fn] = null;
21 | } else
22 | obj.removeEventListener(type, fn, false);
23 | }
24 |
25 | export default class ReactPullLoad extends Component {
26 | static propTypes = {
27 | action: PropTypes.string.isRequired, //用于同步状态
28 | handleAction: PropTypes.func.isRequired, //用于处理状态
29 | hasMore: PropTypes.bool, //是否还有更多内容可加载
30 | offsetScrollTop: PropTypes.number,//必须大于零，使触发刷新往下偏移，隐藏部分顶部内容
31 | downEnough: PropTypes.number, //下拉满足刷新的距离
32 | distanceBottom: PropTypes.number, //距离底部距离触发加载更多
33 | isBlockContainer: PropTypes.bool,
34 |
35 | HeadNode: PropTypes.any, //refresh message react dom
36 | FooterNode: PropTypes.any, //refresh loading react dom
37 | };
38 | //set props default values
39 | static defaultProps = {
40 | hasMore: true,
41 | offsetScrollTop: 1,
42 | downEnough: 100,
43 | distanceBottom: 100,
44 | isBlockContainer: false,
45 | className: "",
46 | HeadNode: HeadNode, //refresh message react dom
47 | FooterNode: FooterNode, //refresh loading react dom
48 | };
49 |
50 | state = {
51 | pullHeight: 0
52 | };
53 |
54 | // container = null;
55 |
56 | componentDidMount() {
57 | const {isBlockContainer, offsetScrollTop, downEnough, distanceBottom} = this.props
58 | this.defaultConfig = {
59 | container: isBlockContainer ? findDOMNode(this) : document.body,
60 | offsetScrollTop: offsetScrollTop,
61 | downEnough: downEnough,
62 | distanceBottom: distanceBottom
63 | };
64 | // console.info("downEnough = ", downEnough, this.defaultConfig.downEnough)
65 | /*
66 | As below reason handle touch event self ( widthout react defualt touch)
67 | Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
68 | */
69 | addEvent(this.refs.container, "touchstart", this.onTouchStart)
70 | addEvent(this.refs.container, "touchmove", this.onTouchMove)
71 | addEvent(this.refs.container, "touchend", this.onTouchEnd)
72 | }
73 |
74 | // 未考虑到 children 及其他 props 改变的情况
75 | // shouldComponentUpdate(nextProps, nextState) {
76 | // if(this.props.action === nextProps.action && this.state.pullHeight === nextState.pullHeight){
77 | // //console.info("[ReactPullLoad] info new action is equal to old action",this.state.pullHeight,nextState.pullHeight);
78 | // return false
79 | // } else{
80 | // return true
81 | // }
82 | // }
83 |
84 | componentWillUnmount() {
85 | removeEvent(this.refs.container, "touchstart", this.onTouchStart)
86 | removeEvent(this.refs.container, "touchmove", this.onTouchMove)
87 | removeEvent(this.refs.container, "touchend", this.onTouchEnd)
88 | }
89 |
90 | componentWillReceiveProps(nextProps) {
91 | if(nextProps.action === STATS.refreshed){
92 | setTimeout(()=>{
93 | this.props.handleAction(STATS.reset)
94 | },1000)
95 | }
96 | }
97 |
98 | getScrollTop = ()=>{
99 | if(this.defaultConfig.container){
100 | if(this.defaultConfig.container === document.body){
101 | return document.documentElement.scrollTop || document.body.scrollTop;
102 | }
103 | return this.defaultConfig.container.scrollTop;
104 | } else{
105 | return 0;
106 | }
107 | }
108 |
109 | setScrollTop = (value)=>{
110 | if(this.defaultConfig.container){
111 | let scrollH = this.defaultConfig.container.scrollHeight;
112 | if(value < 0){ value = 0}
113 | if(value > scrollH){ value = scrollH}
114 | return this.defaultConfig.container.scrollTop = value;
115 | } else{
116 | return 0;
117 | }
118 | }
119 |
120 | // 拖拽的缓动公式 - easeOutSine
121 | easing = (distance) => {
122 | // t: current time, b: begInnIng value, c: change In value, d: duration
123 | var t = distance;
124 | var b = 0;
125 | var d = screen.availHeight; // 允许拖拽的最大距离
126 | var c = d / 2.5; // 提示标签最大有效拖拽距离
127 |
128 | return c * Math.sin(t / d * (Math.PI / 2)) + b;
129 | }
130 |
131 | canRefresh = () => {
132 | return [STATS.refreshing, STATS.loading].indexOf(this.props.action) < 0;
133 | }
134 |
135 | onPullDownMove = (data) => {
136 | if(!this.canRefresh())return false;
137 |
138 | let loaderState, diff = data[0].touchMoveY - data[0].touchStartY;
139 | if (diff < 0) {
140 | diff = 0;
141 | }
142 | diff = this.easing(diff);
143 | if (diff > this.defaultConfig.downEnough) {
144 | loaderState = STATS.enough
145 | } else {
146 | loaderState = STATS.pulling
147 | }
148 | this.setState({
149 | pullHeight: diff,
150 | })
151 | this.props.handleAction(loaderState)
152 | }
153 |
154 | onPullDownRefresh = () => {
155 | if(!this.canRefresh())return false;
156 |
157 | if (this.props.action === STATS.pulling) {
158 | this.setState({pullHeight: 0})
159 | this.props.handleAction(STATS.reset)
160 | } else {
161 | this.setState({
162 | pullHeight: 0,
163 | })
164 | this.props.handleAction(STATS.refreshing)
165 | }
166 | }
167 |
168 | onPullUpMove = (data) => {
169 | if(!this.canRefresh())return false;
170 |
171 | // const { hasMore, onLoadMore} = this.props
172 | // if (this.props.hasMore) {
173 | this.setState({
174 | pullHeight: 0,
175 | })
176 | this.props.handleAction(STATS.loading)
177 | // }
178 | }
179 |
180 | onTouchStart = (event) => {
181 | var targetEvent = event.changedTouches[0];
182 | this.startX = targetEvent.clientX;
183 | this.startY = targetEvent.clientY;
184 | }
185 |
186 | onTouchMove = (event) => {
187 | let scrollTop = this.getScrollTop(),
188 | scrollH = this.defaultConfig.container.scrollHeight,
189 | conH = this.defaultConfig.container === document.body ? document.documentElement.clientHeight : this.defaultConfig.container.offsetHeight,
190 | targetEvent = event.changedTouches[0],
191 | curX = targetEvent.clientX,
192 | curY = targetEvent.clientY,
193 | diffX = curX - this.startX,
194 | diffY = curY - this.startY;
195 |
196 | //判断垂直移动距离是否大于5 && 横向移动距离小于纵向移动距离
197 | if (Math.abs(diffY) > 5 && Math.abs(diffY) > Math.abs(diffX)) {
198 | //滚动距离小于设定值 &&回调onPullDownMove 函数，并且回传位置值
199 | if (diffY > 5 && scrollTop < this.defaultConfig.offsetScrollTop) {
200 | //阻止执行浏览器默认动作
201 | event.preventDefault();
202 | this.onPullDownMove([{
203 | touchStartY: this.startY,
204 | touchMoveY: curY
205 | }]);
206 | } //滚动距离距离底部小于设定值
207 | else if (diffY < 0 && (scrollH - scrollTop - conH) < this.defaultConfig.distanceBottom) {
208 | //阻止执行浏览器默认动作
209 | // event.preventDefault();
210 | this.onPullUpMove([{
211 | touchStartY: this.startY,
212 | touchMoveY: curY
213 | }]);
214 | }
215 | }
216 | }
217 |
218 | onTouchEnd = (event) => {
219 | let scrollTop = this.getScrollTop(),
220 | targetEvent = event.changedTouches[0],
221 | curX = targetEvent.clientX,
222 | curY = targetEvent.clientY,
223 | diffX = curX - this.startX,
224 | diffY = curY - this.startY;
225 |
226 | //判断垂直移动距离是否大于5 && 横向移动距离小于纵向移动距离
227 | if (Math.abs(diffY) > 5 && Math.abs(diffY) > Math.abs(diffX)) {
228 | if (diffY > 5 && scrollTop < this.defaultConfig.offsetScrollTop) {
229 | //回调onPullDownRefresh 函数，即满足刷新条件
230 | this.onPullDownRefresh();
231 | }
232 | }
233 | }
234 |
235 | render() {
236 | const {
237 | children,
238 | action,
239 | handleAction,
240 | hasMore,
241 | className,
242 | offsetScrollTop,
243 | downEnough,
244 | distanceBottom,
245 | isBlockContainer,
246 | HeadNode,
247 | FooterNode,
248 | ...other
249 | } = this.props
250 |
251 | const { pullHeight } = this.state
252 |
253 | const msgStyle = pullHeight ? {
254 | WebkitTransform: `translate3d(0, ${pullHeight}px, 0)`,
255 | transform: `translate3d(0, ${pullHeight}px, 0)`
256 | } : null;
257 |
258 | const boxClassName = `${className} pull-load state-${action}`;
259 |
260 | return (
261 |
264 |
265 |
266 |
267 |
268 | { children }
269 |
270 |
271 |
272 |
273 |