From 3a9429100d6ec78854bd3358421bc73a268d826c Mon Sep 17 00:00:00 2001 From: malikid Date: Fri, 26 May 2017 12:18:02 +0800 Subject: [PATCH 1/3] Replace jQuery.extend with a plain javascript one to avoid 'jQuery.extend is not a function.' --- dist/index.js | 47 +++++++++++++++++++++++++++++++++++++---------- package.json | 1 + src/index.jsx | 17 ++++++++++++++++- 3 files changed, 54 insertions(+), 11 deletions(-) diff --git a/dist/index.js b/dist/index.js index 13a2a27..ac21873 100644 --- a/dist/index.js +++ b/dist/index.js @@ -4,21 +4,23 @@ Object.defineProperty(exports, "__esModule", { value: true }); +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; /** + * 在页面滚动的时候，监听滚动事件，在快要到达底部指定距离的时候，执行相应函数 + * 如果传入 totalPages, 则会在鼠标滚动时 + * + * + */ + var _react = require('react'); var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -var jQuery = require('jquery'); /** - * 在页面滚动的时候，监听滚动事件，在快要到达底部指定距离的时候，执行相应函数 - * 如果传入 totalPages, 则会在鼠标滚动时 - * - * - */ +var jQuery = require('jquery'); var ReactScrollPagination = _react2.default.createClass({ displayName: 'ReactScrollPagination', @@ -195,13 +197,38 @@ var ReactScrollPagination = _react2.default.createClass({ jQuery(window).scroll(this.scrollHandler); }, + extend: function (_extend) { + function extend() { + return _extend.apply(this, arguments); + } + + extend.toString = function () { + return _extend.toString(); + }; + + return extend; + }(function () { + for (var i = 1; i < arguments.length; i++) { + for (var key in arguments[i]) { + if (arguments[i].hasOwnProperty(key)) { + if (_typeof(arguments[0][key]) === 'object' && _typeof(arguments[i][key]) === 'object') { + extend(arguments[0][key], arguments[i][key]); + } else { + arguments[0][key] = arguments[i][key]; + } + } + } + } + return arguments[0]; + }), + render: function render() { // if no totalPages presented, will only do the fetchings if (typeof this.props.totalPages === 'undefined') { return null; } - var acutalPageContentDivStyle = jQuery.extend({}, this.props.innerDivStyle || this.pageContentStyle); + var acutalPageContentDivStyle = this.extend({}, this.props.innerDivStyle || this.pageContentStyle); // always set the opacity for inner div, so they are able to make the transition if (!this.state.showPageStatus) { diff --git a/package.json b/package.json index 2bc3e69..669b871 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "babel-preset-react": "^6.5.0", "eslint": "^2.8.0", "eslint-plugin-flow-vars": "^0.3.0", + "gulp": "^3.9.1", "gulp-babel": "^6.1.2", "jest-cli": "*", "jscs": "^3.0.3", diff --git a/src/index.jsx b/src/index.jsx index bbaab53..3cb7b6f 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -193,13 +193,28 @@ const ReactScrollPagination = React.createClass({ jQuery(window).scroll(this.scrollHandler) }, + extend: function () { + for(var i = 1; i < arguments.length; i++) { + for(var key in arguments[i]) { + if(arguments[i].hasOwnProperty(key)) { + if (typeof arguments[0][key] === 'object' && typeof arguments[i][key] === 'object') { + extend(arguments[0][key], arguments[i][key]) + } else { + arguments[0][key] = arguments[i][key] + } + } + } + } + return arguments[0] + }, + render: function () { // if no totalPages presented, will only do the fetchings if (typeof this.props.totalPages === 'undefined') { return (null) } - let acutalPageContentDivStyle = jQuery.extend({}, this.props.innerDivStyle || this.pageContentStyle) + let acutalPageContentDivStyle = this.extend({}, this.props.innerDivStyle || this.pageContentStyle) // always set the opacity for inner div, so they are able to make the transition if (!this.state.showPageStatus) { From 35f852dc9800234c179ec0c4f2d1dc46379f7218 Mon Sep 17 00:00:00 2001 From: malikid Date: Thu, 1 Jun 2017 01:30:36 +0800 Subject: [PATCH 2/3] Fixed can't work if this component is used in sub container. --- dist/index.js | 27 +++++++++++++++++++-------- src/index.jsx | 29 ++++++++++++++++++++--------- 2 files changed, 39 insertions(+), 17 deletions(-) diff --git a/dist/index.js b/dist/index.js index ac21873..2577e92 100644 --- a/dist/index.js +++ b/dist/index.js @@ -25,9 +25,12 @@ var jQuery = require('jquery'); var ReactScrollPagination = _react2.default.createClass({ displayName: 'ReactScrollPagination', + propTypes: { fetchFunc: _react.PropTypes.func.isRequired, totalPages: _react.PropTypes.number, + windowElement: _react.PropTypes.string, // The element selector which contains the list container and is responsible for scrolling + documentElement: _react.PropTypes.string, // The element selector which contains the list paginationShowTime: _react.PropTypes.oneOfType([_react.PropTypes.number, // How long shall the pagination div shows _react.PropTypes.string]), excludeElement: _react.PropTypes.string, // The element selector which should be excluded from calculation @@ -38,6 +41,7 @@ var ReactScrollPagination = _react2.default.createClass({ triggerAt: _react.PropTypes.oneOfType([_react.PropTypes.number, // The distance to trigger the fetchfunc _react.PropTypes.string]) }, + isolate: { onePageHeight: null, timeoutFuncHandler: null, @@ -48,6 +52,7 @@ var ReactScrollPagination = _react2.default.createClass({ defaultTrigger: 30, defaultExcludeHeight: 0 }, + pageDivStle: { position: 'fixed', bottom: '15px', @@ -55,6 +60,7 @@ var ReactScrollPagination = _react2.default.createClass({ right: 0, textAlign: 'center' }, + pageContentStyle: { display: 'inline-block', background: 'rgba(6, 6, 6, 0.54)', @@ -70,7 +76,11 @@ var ReactScrollPagination = _react2.default.createClass({ OTransition: 'opacity 0.8s', transition: 'opacity 0.8s' }, + getInitialState: function getInitialState() { + this.windowElement = this.props.windowElement || window; + this.documentElement = this.props.documentElement || document; + return { currentPage: 1, totalPages: null, @@ -90,6 +100,7 @@ var ReactScrollPagination = _react2.default.createClass({ _this.setState({ showPageStatus: false }); }, this.isolate.showTime); }, + getShowTime: function getShowTime() { var showTime = this.isolate.defaultShowTime; if (this.props.paginationShowTime) { @@ -144,7 +155,7 @@ var ReactScrollPagination = _react2.default.createClass({ }, getOnePageHeight: function getOnePageHeight() { - var documentHeight = jQuery(document).height(); + var documentHeight = jQuery(this.documentElement).height(); /* * 当totalPages第一次有值时，表明List是初次加载，此时计算页面的高度，并将其作为单页的高度 @@ -157,8 +168,8 @@ var ReactScrollPagination = _react2.default.createClass({ handlePagePosition: function handlePagePosition() { this.getOnePageHeight(); - var windowHeight = jQuery(window).height(); - var scrollTop = jQuery(window).scrollTop() + windowHeight - this.isolate.excludeHeight; + var windowHeight = jQuery(this.windowElement).height(); + var scrollTop = jQuery(this.windowElement).scrollTop() + windowHeight - this.isolate.excludeHeight; if (this.isolate.onePageHeight !== null) { var currentPage = Math.ceil(scrollTop / this.isolate.onePageHeight) || 1; @@ -168,10 +179,10 @@ var ReactScrollPagination = _react2.default.createClass({ }, scrollHandler: function scrollHandler() { - var documentHeight = jQuery(document).height(); + var documentHeight = jQuery(this.documentElement).height(); - var windowHeight = jQuery(window).height(); - var scrollBottom = jQuery(window).scrollTop() + windowHeight; + var windowHeight = jQuery(this.windowElement).height(); + var scrollBottom = jQuery(this.windowElement).scrollTop() + windowHeight; var triggerBottom = scrollBottom + this.isolate.triggerAt; // 当滚动条距离底部距离小于30像素的时候出发请求操作 @@ -189,12 +200,12 @@ var ReactScrollPagination = _react2.default.createClass({ }, componentWillUnmount: function componentWillUnmount() { - jQuery(window).unbind('scroll', this.scrollHandler); + jQuery(this.windowElement).unbind('scroll', this.scrollHandler); }, componentDidMount: function componentDidMount() { this.validateAndSetPropValues(); - jQuery(window).scroll(this.scrollHandler); + jQuery(this.windowElement).scroll(this.scrollHandler); }, extend: function (_extend) { diff --git a/src/index.jsx b/src/index.jsx index 3cb7b6f..16ff350 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -12,9 +12,12 @@ import React, { PropTypes } from 'react' const jQuery = require('jquery') const ReactScrollPagination = React.createClass({ + propTypes: { fetchFunc: PropTypes.func.isRequired, totalPages: PropTypes.number, + windowElement: PropTypes.string, // The element selector which contains the list container and is responsible for scrolling + documentElement: PropTypes.string, // The element selector which contains the list paginationShowTime: PropTypes.oneOfType([ PropTypes.number, // How long shall the pagination div shows PropTypes.string @@ -31,6 +34,7 @@ const ReactScrollPagination = React.createClass({ PropTypes.string ]), }, + isolate: { onePageHeight: null, timeoutFuncHandler: null, @@ -41,6 +45,7 @@ const ReactScrollPagination = React.createClass({ defaultTrigger: 30, defaultExcludeHeight: 0 }, + pageDivStle: { position: 'fixed', bottom: '15px', @@ -48,6 +53,7 @@ const ReactScrollPagination = React.createClass({ right: 0, textAlign: 'center' }, + pageContentStyle: { display: 'inline-block', background: 'rgba(6, 6, 6, 0.54)', @@ -63,7 +69,11 @@ const ReactScrollPagination = React.createClass({ OTransition: 'opacity 0.8s', transition: 'opacity 0.8s' }, + getInitialState: function () { + this.windowElement = this.props.windowElement || window + this.documentElement = this.props.documentElement || document + return { currentPage: 1, totalPages: null, @@ -81,6 +91,7 @@ const ReactScrollPagination = React.createClass({ this.setState({showPageStatus: false}) }, this.isolate.showTime) }, + getShowTime: function () { let showTime = this.isolate.defaultShowTime if (this.props.paginationShowTime) { @@ -126,7 +137,7 @@ const ReactScrollPagination = React.createClass({ let triggerAt = this.isolate.defaultTrigger if (this.props.triggerAt) { - triggerAt= parseInt(this.props.triggerAt) + triggerAt = parseInt(this.props.triggerAt) if (isNaN(triggerAt)) { triggerAt = this.isolate.defaultTrigger @@ -140,7 +151,7 @@ const ReactScrollPagination = React.createClass({ }, getOnePageHeight: function () { - const documentHeight = jQuery(document).height() + const documentHeight = jQuery(this.documentElement).height() /* * 当totalPages第一次有值时，表明List是初次加载，此时计算页面的高度，并将其作为单页的高度 @@ -153,8 +164,8 @@ const ReactScrollPagination = React.createClass({ handlePagePosition: function () { this.getOnePageHeight() - let windowHeight = jQuery(window).height() - let scrollTop = jQuery(window).scrollTop() + windowHeight - this.isolate.excludeHeight + let windowHeight = jQuery(this.windowElement).height() + let scrollTop = jQuery(this.windowElement).scrollTop() + windowHeight - this.isolate.excludeHeight if (this.isolate.onePageHeight !== null) { let currentPage = Math.ceil(scrollTop / this.isolate.onePageHeight) || 1 @@ -164,10 +175,10 @@ const ReactScrollPagination = React.createClass({ }, scrollHandler: function () { - let documentHeight = jQuery(document).height() + let documentHeight = jQuery(this.documentElement).height() - let windowHeight = jQuery(window).height() - let scrollBottom = jQuery(window).scrollTop() + windowHeight + let windowHeight = jQuery(this.windowElement).height() + let scrollBottom = jQuery(this.windowElement).scrollTop() + windowHeight let triggerBottom = scrollBottom + this.isolate.triggerAt // 当滚动条距离底部距离小于30像素的时候出发请求操作 @@ -185,12 +196,12 @@ const ReactScrollPagination = React.createClass({ }, componentWillUnmount: function () { - jQuery(window).unbind('scroll', this.scrollHandler) + jQuery(this.windowElement).unbind('scroll', this.scrollHandler) }, componentDidMount: function () { this.validateAndSetPropValues() - jQuery(window).scroll(this.scrollHandler) + jQuery(this.windowElement).scroll(this.scrollHandler) }, extend: function () { From 6fcc3fa2df426e1004e9fd0384773e86f52e3054 Mon Sep 17 00:00:00 2001 From: malikid Date: Thu, 8 Jun 2017 15:58:05 +0800 Subject: [PATCH 3/3] Added a property for excluding margin at the top --- dist/index.js | 25 ++++++++++++++++++++++++- src/index.jsx | 29 ++++++++++++++++++++++++++++- 2 files changed, 52 insertions(+), 2 deletions(-) diff --git a/dist/index.js b/dist/index.js index 2577e92..aa3b4b6 100644 --- a/dist/index.js +++ b/dist/index.js @@ -33,6 +33,8 @@ var ReactScrollPagination = _react2.default.createClass({ documentElement: _react.PropTypes.string, // The element selector which contains the list paginationShowTime: _react.PropTypes.oneOfType([_react.PropTypes.number, // How long shall the pagination div shows _react.PropTypes.string]), + excludeTopMargin: _react.PropTypes.oneOfType([_react.PropTypes.number, // The height value which should be excluded from scrollTop calculation + _react.PropTypes.string]), excludeElement: _react.PropTypes.string, // The element selector which should be excluded from calculation excludeHeight: _react.PropTypes.oneOfType([_react.PropTypes.number, // the height value which should be excluded from calculation _react.PropTypes.string]), @@ -45,11 +47,13 @@ var ReactScrollPagination = _react2.default.createClass({ isolate: { onePageHeight: null, timeoutFuncHandler: null, + excludeTopMargin: null, excludeHeight: null, triggerAt: null, showTime: null, defaultShowTime: 2000, defaultTrigger: 30, + defaultExcludeTopMargin: 0, defaultExcludeHeight: 0 }, @@ -113,6 +117,24 @@ var ReactScrollPagination = _react2.default.createClass({ return showTime; }, + getExcludeTopMargin: function getExcludeTopMargin() { + // 获取需要减去的高度 + var excludeTopMargin = this.isolate.defaultExcludeTopMargin; + + if (this.props.excludeTopMargin) { + var propsExcludeTopMargin = parseInt(this.props.excludeTopMargin); + if (isNaN(propsExcludeTopMargin)) { + console.error('WARNING: Failed to convert the props "excludeTopMargin" with value: "' + this.props.excludeTopMargin + '" to Number, please verify. Will take "' + this.isolate.defaultExcludeTopMargin + '" by default.'); + } else { + excludeTopMargin = propsExcludeTopMargin; + } + } + + this.isolate.excludeTopMargin = excludeTopMargin; + + return excludeTopMargin; + }, + getExcludeHeight: function getExcludeHeight() { // 获取需要减去的高度 var excludeHeight = this.isolate.defaultExcludeHeight; @@ -169,7 +191,7 @@ var ReactScrollPagination = _react2.default.createClass({ this.getOnePageHeight(); var windowHeight = jQuery(this.windowElement).height(); - var scrollTop = jQuery(this.windowElement).scrollTop() + windowHeight - this.isolate.excludeHeight; + var scrollTop = jQuery(this.windowElement).scrollTop() + windowHeight - this.isolate.excludeHeight - this.isolate.excludeTopMargin; if (this.isolate.onePageHeight !== null) { var currentPage = Math.ceil(scrollTop / this.isolate.onePageHeight) || 1; @@ -195,6 +217,7 @@ var ReactScrollPagination = _react2.default.createClass({ validateAndSetPropValues: function validateAndSetPropValues() { this.isolate.triggerAt = this.getTriggerAt(); + this.isolate.excludeTopMargin = this.getExcludeTopMargin(); this.isolate.excludeHeight = this.getExcludeHeight(); this.isolate.showTime = this.getShowTime(); }, diff --git a/src/index.jsx b/src/index.jsx index 16ff350..097f8ee 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -22,6 +22,10 @@ const ReactScrollPagination = React.createClass({ PropTypes.number, // How long shall the pagination div shows PropTypes.string ]), + excludeTopMargin: PropTypes.oneOfType([ + PropTypes.number, // The height value which should be excluded from scrollTop calculation + PropTypes.string + ]), excludeElement: PropTypes.string, // The element selector which should be excluded from calculation excludeHeight: PropTypes.oneOfType([ PropTypes.number, // the height value which should be excluded from calculation @@ -38,11 +42,13 @@ const ReactScrollPagination = React.createClass({ isolate: { onePageHeight: null, timeoutFuncHandler: null, + excludeTopMargin: null, excludeHeight: null, triggerAt: null, showTime: null, defaultShowTime: 2000, defaultTrigger: 30, + defaultExcludeTopMargin: 0, defaultExcludeHeight: 0 }, @@ -105,6 +111,26 @@ const ReactScrollPagination = React.createClass({ return showTime }, + getExcludeTopMargin: function () { + // 获取需要减去的高度 + let excludeTopMargin = this.isolate.defaultExcludeTopMargin + + if (this.props.excludeTopMargin) { + let propsExcludeTopMargin = parseInt(this.props.excludeTopMargin) + if (isNaN(propsExcludeTopMargin)) { + console.error('WARNING: Failed to convert the props "excludeTopMargin" with value: "' + this.props.excludeTopMargin + + '" to Number, please verify. Will take "' + this.isolate.defaultExcludeTopMargin + '" by default.') + } else { + excludeTopMargin = propsExcludeTopMargin + } + + } + + this.isolate.excludeTopMargin = excludeTopMargin + + return excludeTopMargin + }, + getExcludeHeight: function () { // 获取需要减去的高度 let excludeHeight = this.isolate.defaultExcludeHeight @@ -165,7 +191,7 @@ const ReactScrollPagination = React.createClass({ this.getOnePageHeight() let windowHeight = jQuery(this.windowElement).height() - let scrollTop = jQuery(this.windowElement).scrollTop() + windowHeight - this.isolate.excludeHeight + let scrollTop = jQuery(this.windowElement).scrollTop() + windowHeight - this.isolate.excludeHeight - this.isolate.excludeTopMargin if (this.isolate.onePageHeight !== null) { let currentPage = Math.ceil(scrollTop / this.isolate.onePageHeight) || 1 @@ -191,6 +217,7 @@ const ReactScrollPagination = React.createClass({ validateAndSetPropValues: function () { this.isolate.triggerAt = this.getTriggerAt() + this.isolate.excludeTopMargin = this.getExcludeTopMargin() this.isolate.excludeHeight = this.getExcludeHeight() this.isolate.showTime = this.getShowTime() },