diff --git a/.babelrc b/.babelrc deleted file mode 100644 index d05b16e..0000000 --- a/.babelrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "presets": [ - "react", - "es2015" - ] -} \ No newline at end of file diff --git a/.eslintrc b/.eslintrc index 04d886c..e9b3e0c 100644 --- a/.eslintrc +++ b/.eslintrc @@ -10,10 +10,6 @@ "env" : { "browser" : true }, - "globals" : { - "jQuery": false, - "$": false - }, "rules": { "semi" : [2, "never"], "max-len": [2, 120, 2], diff --git a/.gitignore b/.gitignore index e920c16..dfd1896 100644 --- a/.gitignore +++ b/.gitignore @@ -28,6 +28,10 @@ node_modules # Optional npm cache directory .npm +*~ +*.sw* +yarn.lock +.cache # Optional REPL history .node_repl_history diff --git a/__tests__/index-test.js b/__tests__/index-test.js index d619fa5..cc19a1a 100644 --- a/__tests__/index-test.js +++ b/__tests__/index-test.js @@ -4,7 +4,6 @@ jest.unmock('../src/index.jsx') import React from 'react' import ReactDOM from 'react-dom' -import jQuery from 'jquery' import TestUtils from 'react-dom/test-utils' import ReactScrollPagination from '../src/index.jsx' @@ -34,13 +33,13 @@ describe('ReactScrollPagination', () => { expect(mockConsoleError.calls.count()).toEqual(1) }) - it('Should not display the pagination div if only props "fetchFunc" presented', () => { + it('Should not display the pagination div when no "totalPages" provided', () => { const reactScrollPagination = TestUtils.renderIntoDocument( ) const reactScrollPaginationNode = ReactDOM.findDOMNode(reactScrollPagination) expect(reactScrollPaginationNode).toEqual(null) - expect(mockConsoleWarn.calls.count()).toEqual(0) + expect(mockConsoleWarn.calls.count()).toEqual(1) }) describe('Test the props "paginationShowTime" ', () => { @@ -66,7 +65,7 @@ describe('ReactScrollPagination', () => { describe('Test the props "excludeElement" ', () => { beforeEach(() => { - document.body.innerHTML = '' + document.body.innerHTML = '' }) it('Should take default value if the props is not presented ', ()=> { @@ -192,4 +191,4 @@ describe('ReactScrollPagination', () => { }) }) -}) \ No newline at end of file +}) diff --git a/dist/index.js b/dist/index.js index 3b14d1c..6f4796b 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,2736 +1,14 @@ -(function webpackUniversalModuleDefinition(root, factory) { - if(typeof exports === 'object' && typeof module === 'object') - module.exports = factory(require("React"), require("jQuery")); - else if(typeof define === 'function' && define.amd) - define(["React", "jQuery"], factory); - else if(typeof exports === 'object') - exports["ReactScrollPagination"] = factory(require("React"), require("jQuery")); - else - root["ReactScrollPagination"] = factory(root["React"], root["jQuery"]); -})(this, function(__WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_19__) { -return /******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 6); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports) { - -// shim for using process in browser -var process = module.exports = {}; - -// cached from whatever global is present so that test runners that stub it -// don't break things. But we need to wrap it in a try catch in case it is -// wrapped in strict mode code which doesn't define any globals. It's inside a -// function because try/catches deoptimize in certain engines. - -var cachedSetTimeout; -var cachedClearTimeout; - -function defaultSetTimout() { - throw new Error('setTimeout has not been defined'); -} -function defaultClearTimeout () { - throw new Error('clearTimeout has not been defined'); -} -(function () { - try { - if (typeof setTimeout === 'function') { - cachedSetTimeout = setTimeout; - } else { - cachedSetTimeout = defaultSetTimout; - } - } catch (e) { - cachedSetTimeout = defaultSetTimout; - } - try { - if (typeof clearTimeout === 'function') { - cachedClearTimeout = clearTimeout; - } else { - cachedClearTimeout = defaultClearTimeout; - } - } catch (e) { - cachedClearTimeout = defaultClearTimeout; - } -} ()) -function runTimeout(fun) { - if (cachedSetTimeout === setTimeout) { - //normal enviroments in sane situations - return setTimeout(fun, 0); - } - // if setTimeout wasn't available but was latter defined - if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) { - cachedSetTimeout = setTimeout; - return setTimeout(fun, 0); - } - try { - // when when somebody has screwed with setTimeout but no I.E. maddness - return cachedSetTimeout(fun, 0); - } catch(e){ - try { - // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally - return cachedSetTimeout.call(null, fun, 0); - } catch(e){ - // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error - return cachedSetTimeout.call(this, fun, 0); - } - } - - -} -function runClearTimeout(marker) { - if (cachedClearTimeout === clearTimeout) { - //normal enviroments in sane situations - return clearTimeout(marker); - } - // if clearTimeout wasn't available but was latter defined - if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) { - cachedClearTimeout = clearTimeout; - return clearTimeout(marker); - } - try { - // when when somebody has screwed with setTimeout but no I.E. maddness - return cachedClearTimeout(marker); - } catch (e){ - try { - // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally - return cachedClearTimeout.call(null, marker); - } catch (e){ - // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error. - // Some versions of I.E. have different rules for clearTimeout vs setTimeout - return cachedClearTimeout.call(this, marker); - } - } - - - -} -var queue = []; -var draining = false; -var currentQueue; -var queueIndex = -1; - -function cleanUpNextTick() { - if (!draining || !currentQueue) { - return; - } - draining = false; - if (currentQueue.length) { - queue = currentQueue.concat(queue); - } else { - queueIndex = -1; - } - if (queue.length) { - drainQueue(); - } -} - -function drainQueue() { - if (draining) { - return; - } - var timeout = runTimeout(cleanUpNextTick); - draining = true; - - var len = queue.length; - while(len) { - currentQueue = queue; - queue = []; - while (++queueIndex < len) { - if (currentQueue) { - currentQueue[queueIndex].run(); - } - } - queueIndex = -1; - len = queue.length; - } - currentQueue = null; - draining = false; - runClearTimeout(timeout); -} - -process.nextTick = function (fun) { - var args = new Array(arguments.length - 1); - if (arguments.length > 1) { - for (var i = 1; i < arguments.length; i++) { - args[i - 1] = arguments[i]; - } - } - queue.push(new Item(fun, args)); - if (queue.length === 1 && !draining) { - runTimeout(drainQueue); - } -}; - -// v8 likes predictible objects -function Item(fun, array) { - this.fun = fun; - this.array = array; -} -Item.prototype.run = function () { - this.fun.apply(null, this.array); -}; -process.title = 'browser'; -process.browser = true; -process.env = {}; -process.argv = []; -process.version = ''; // empty string to avoid regexp issues -process.versions = {}; - -function noop() {} - -process.on = noop; -process.addListener = noop; -process.once = noop; -process.off = noop; -process.removeListener = noop; -process.removeAllListeners = noop; -process.emit = noop; -process.prependListener = noop; -process.prependOnceListener = noop; - -process.listeners = function (name) { return [] } - -process.binding = function (name) { - throw new Error('process.binding is not supported'); -}; - -process.cwd = function () { return '/' }; -process.chdir = function (dir) { - throw new Error('process.chdir is not supported'); -}; -process.umask = function() { return 0; }; - - -/***/ }), -/* 1 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -/** - * Copyright (c) 2013-present, Facebook, Inc. +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.ReactScrollPagination=t():e.ReactScrollPagination=t()}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(e,t,n){e.exports=n(5)()},function(e,t,n){"use strict";e.exports=n(3)},function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return y}));var r,o=n(1),i=n(0),u=n.n(i);function l(e){return(l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t,n,o){r||(r="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103);var i=e&&e.defaultProps,u=arguments.length-3;if(t||0===u||(t={children:void 0}),1===u)t.children=o;else if(u>1){for(var l=new Array(u),a=0;a0&&null===this.isolate.onePageHeight&&(this.isolate.onePageHeight=e-this.isolate.excludeHeight)}},{key:"handlePagePosition",value:function(){this.getOnePageHeight();var e=this.scrollTop()+this.windowHeight()-this.isolate.excludeHeight;if(null!==this.isolate.onePageHeight){var t=Math.ceil(e/this.isolate.onePageHeight)||1;this.setState({currentPage:t}),this.showPagePositionDiv()}}},{key:"windowHeight",value:function(){return Math.max(document.body.clientHeight,window.innerWidth)}},{key:"documentHeight",value:function(){return Math.max(this.windowHeight(),document.documentElement.clientHeight,document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight)}},{key:"scrollTop",value:function(){return window.pageYOffset||document.documentElement.scrollTop}},{key:"scrollHandler",value:function(){this.scrollTop()+window.innerHeight+this.isolate.triggerAt>=this.documentHeight()&&this.props.fetchFunc(),this.handlePagePosition()}},{key:"validateAndSetPropValues",value:function(){this.isolate.triggerAt=this.getTriggerAt(),this.isolate.excludeHeight=this.getExcludeHeight(),this.isolate.showTime=this.getShowTime()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("scroll",this.scrollHandler)}},{key:"componentDidMount",value:function(){this.validateAndSetPropValues(),window.addEventListener("scroll",this.scrollHandler),this.props.fetchFunc||console.error("ERROR: the mandatory property 'fetchNext' isn't defined"),this.haveToRender()||console.warn("ERROR: the optional property 'totalPages' isn't defined, so the component won't be rendered")}},{key:"haveToRender",value:function(){return void 0!==this.props.totalPages&&null!==this.props.totalPages}},{key:"render",value:function(){if(!this.haveToRender())return null;var e=Object.assign({},this.props.innerDivStyle||this.pageContentStyle);return this.state.showPageStatus||(e.opacity=0),a("div",{style:this.props.outterDivStyle||this.pageDivStle},void 0,a("div",{style:e,className:"react-scroll-pagination-inner-div"},void 0,a("span",{},void 0,this.state.currentPage),"/",a("span",{},void 0,this.props.totalPages||1)))}}])&&c(n.prototype,r),o&&c(n,o),u}(o.Component);y.defaultProps={totalPages:null},y.propTypes={fetchFunc:u.a.func.isRequired,totalPages:u.a.number,paginationShowTime:u.a.oneOfType([u.a.number,u.a.string]),excludeElement:u.a.string,excludeHeight:u.a.oneOfType([u.a.number,u.a.string]),outterDivStyle:u.a.object,innerDivStyle:u.a.object,triggerAt:u.a.oneOfType([u.a.number,u.a.string])}},function(e,t,n){"use strict"; +/** @license React v16.13.1 + * react.production.min.js * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * - */ - -function makeEmptyFunction(arg) { - return function () { - return arg; - }; -} - -/** - * This function accepts and discards inputs; it has no side effects. This is - * primarily useful idiomatically for overridable function endpoints which - * always need to be callable, since JS lacks a null-call idiom ala Cocoa. - */ -var emptyFunction = function emptyFunction() {}; - -emptyFunction.thatReturns = makeEmptyFunction; -emptyFunction.thatReturnsFalse = makeEmptyFunction(false); -emptyFunction.thatReturnsTrue = makeEmptyFunction(true); -emptyFunction.thatReturnsNull = makeEmptyFunction(null); -emptyFunction.thatReturnsThis = function () { - return this; -}; -emptyFunction.thatReturnsArgument = function (arg) { - return arg; -}; - -module.exports = emptyFunction; - -/***/ }), -/* 2 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; -/* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright (c) 2013-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - */ - - - -/** - * Use invariant() to assert state which your program assumes to be true. - * - * Provide sprintf-style format (only %s is supported) and arguments - * to provide information about what broke and what you were - * expecting. - * - * The invariant message will be stripped in production, but the invariant - * will remain to ensure logic does not differ in production. - */ - -var validateFormat = function validateFormat(format) {}; - -if (process.env.NODE_ENV !== 'production') { - validateFormat = function validateFormat(format) { - if (format === undefined) { - throw new Error('invariant requires an error message argument'); - } - }; -} - -function invariant(condition, format, a, b, c, d, e, f) { - validateFormat(format); - - if (!condition) { - var error; - if (format === undefined) { - error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.'); - } else { - var args = [a, b, c, d, e, f]; - var argIndex = 0; - error = new Error(format.replace(/%s/g, function () { - return args[argIndex++]; - })); - error.name = 'Invariant Violation'; - } - - error.framesToPop = 1; // we don't care about invariant's own frame - throw error; - } -} - -module.exports = invariant; -/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0))) - -/***/ }), -/* 3 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; -/** - * Copyright (c) 2013-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - - - -var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; - -module.exports = ReactPropTypesSecret; - - -/***/ }), -/* 4 */ -/***/ (function(module, exports) { - -module.exports = __WEBPACK_EXTERNAL_MODULE_4__; - -/***/ }), -/* 5 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; -/* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright (c) 2014-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - */ - - - -var emptyFunction = __webpack_require__(1); - -/** - * Similar to invariant but only logs a warning if the condition is not met. - * This can be used to log issues in development environments in critical - * paths. Removing the logging code for production environments will keep the - * same logic and follow the same code paths. - */ - -var warning = emptyFunction; - -if (process.env.NODE_ENV !== 'production') { - var printWarning = function printWarning(format) { - for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } - - var argIndex = 0; - var message = 'Warning: ' + format.replace(/%s/g, function () { - return args[argIndex++]; - }); - if (typeof console !== 'undefined') { - console.error(message); - } - try { - // --- Welcome to debugging React --- - // This error was thrown as a convenience so that you can use this stack - // to find the callsite that caused this warning to fire. - throw new Error(message); - } catch (x) {} - }; - - warning = function warning(condition, format) { - if (format === undefined) { - throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); - } - - if (format.indexOf('Failed Composite propType: ') === 0) { - return; // Ignore CompositeComponent proptype check. - } - - if (!condition) { - for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { - args[_key2 - 2] = arguments[_key2]; - } - - printWarning.apply(undefined, [format].concat(args)); - } - }; -} - -module.exports = warning; -/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0))) - -/***/ }), -/* 6 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _react = __webpack_require__(4); - -var _react2 = _interopRequireDefault(_react); - -var _createReactClass = __webpack_require__(7); - -var _createReactClass2 = _interopRequireDefault(_createReactClass); - -var _propTypes = __webpack_require__(14); - -var _propTypes2 = _interopRequireDefault(_propTypes); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var jQuery = __webpack_require__(19); /** - * 在页面滚动的时候，监听滚动事件，在快要到达底部指定距离的时候，执行相应函数 - * 如果传入 totalPages, 则会在鼠标滚动时 - * - * - */ - -var ReactScrollPagination = (0, _createReactClass2.default)({ - displayName: 'ReactScrollPagination', - - propTypes: { - fetchFunc: _propTypes2.default.func.isRequired, - totalPages: _propTypes2.default.number, - paginationShowTime: _propTypes2.default.oneOfType([_propTypes2.default.number, // How long shall the pagination div shows - _propTypes2.default.string]), - excludeElement: _propTypes2.default.string, // The element selector which should be excluded from calculation - excludeHeight: _propTypes2.default.oneOfType([_propTypes2.default.number, // the height value which should be excluded from calculation - _propTypes2.default.string]), - outterDivStyle: _propTypes2.default.object, // Style of the outter Div element - innerDivStyle: _propTypes2.default.object, // Style of the inner Div element - triggerAt: _propTypes2.default.oneOfType([_propTypes2.default.number, // The distance to trigger the fetchfunc - _propTypes2.default.string]) - }, - isolate: { - onePageHeight: null, - timeoutFuncHandler: null, - excludeHeight: null, - triggerAt: null, - showTime: null, - defaultShowTime: 2000, - defaultTrigger: 30, - defaultExcludeHeight: 0 - }, - pageDivStle: { - position: 'fixed', - bottom: '15px', - left: 0, - right: 0, - textAlign: 'center' - }, - pageContentStyle: { - display: 'inline-block', - background: 'rgba(6, 6, 6, 0.54)', - borderRadius: '5px', - padding: '3px 15px', - minWidth: '80px', - color: '#fff', - textAlign: 'center', - margin: '0 auto', - opacity: 1, - WebkitTransition: 'opacity 0.8s', - MozTransition: 'opacity 0.8s', - OTransition: 'opacity 0.8s', - transition: 'opacity 0.8s' - }, - getInitialState: function getInitialState() { - return { - currentPage: 1, - totalPages: null, - showPageStatus: false - }; - }, - - showPagePositionDiv: function showPagePositionDiv() { - var _this = this; - - if (this.isolate.timeoutFuncHandler) { - clearTimeout(this.isolate.timeoutFuncHandler); - } - this.setState({ showPageStatus: true }); - - this.isolate.timeoutFuncHandler = setTimeout(function () { - _this.setState({ showPageStatus: false }); - }, this.isolate.showTime); - }, - getShowTime: function getShowTime() { - var showTime = this.isolate.defaultShowTime; - if (this.props.paginationShowTime) { - showTime = parseInt(this.props.paginationShowTime); - if (isNaN(showTime)) { - showTime = this.isolate.defaultShowTime; - console.error('WARNING: Failed to convert props "paginationShowTime" to Number with value: "' + this.props.paginationShowTime + '". Will take ' + this.isolate.defaultShowTime + ' by default.'); - } - } - return showTime; - }, - - getExcludeHeight: function getExcludeHeight() { - // 获取需要减去的高度 - var excludeHeight = this.isolate.defaultExcludeHeight; - - if (this.props.excludeHeight) { - var propsExcludeHeight = parseInt(this.props.excludeHeight); - if (isNaN(propsExcludeHeight)) { - console.error('WARNING: Failed to convert the props "excludeHeight" with value: "' + this.props.excludeHeight + '" to Number, please verify. Will take "' + this.isolate.defaultExcludeHeight + '" by default.'); - } else { - excludeHeight = propsExcludeHeight; - } - } else if (this.props.excludeElement && typeof this.props.excludeElement === 'string') { - var excludeEle = jQuery(this.props.excludeElement); - - if (excludeEle.size() === 0) { - console.error('WARNING: Failed to get the element with given selector "' + this.props.excludeElement + '", please veirify. Will take "' + this.isolate.defaultExcludeHeight + '" by default.'); - } else { - excludeHeight = excludeEle.height(); - } - } - this.isolate.excludeHeight = excludeHeight; - - return excludeHeight; - }, - - getTriggerAt: function getTriggerAt() { - var triggerAt = this.isolate.defaultTrigger; - - if (this.props.triggerAt) { - triggerAt = parseInt(this.props.triggerAt); - - if (isNaN(triggerAt)) { - triggerAt = this.isolate.defaultTrigger; - - console.error('WARNING: Failed to convert the props "triggerAt" to number with value: "' + this.props.triggerAt + '". Will take 30px by default.'); - } - } - - return triggerAt; - }, - - getOnePageHeight: function getOnePageHeight() { - var documentHeight = jQuery(document).height(); - - /* - * 当totalPages第一次有值时，表明List是初次加载，此时计算页面的高度，并将其作为单页的高度 - * 如果页面有固定的顶部头，通过 excludeHeight 将其减去 - */ - if (typeof this.props.totalPages === 'number' && this.props.totalPages > 0 && this.isolate.onePageHeight === null) { - this.isolate.onePageHeight = documentHeight - this.isolate.excludeHeight; - } - }, - handlePagePosition: function handlePagePosition() { - this.getOnePageHeight(); - - var windowHeight = jQuery(window).height(); - var scrollTop = jQuery(window).scrollTop() + windowHeight - this.isolate.excludeHeight; - - if (this.isolate.onePageHeight !== null) { - var currentPage = Math.ceil(scrollTop / this.isolate.onePageHeight) || 1; - this.setState({ currentPage: currentPage }); - this.showPagePositionDiv(); - } - }, - - scrollHandler: function scrollHandler() { - var documentHeight = jQuery(document).height(); - - var windowHeight = jQuery(window).height(); - var scrollBottom = jQuery(window).scrollTop() + windowHeight; - var triggerBottom = scrollBottom + this.isolate.triggerAt; - - // 当滚动条距离底部距离小于30像素的时候出发请求操作 - if (triggerBottom >= documentHeight) { - this.props.fetchFunc(); - } - - this.handlePagePosition(); - }, - - validateAndSetPropValues: function validateAndSetPropValues() { - this.isolate.triggerAt = this.getTriggerAt(); - this.isolate.excludeHeight = this.getExcludeHeight(); - this.isolate.showTime = this.getShowTime(); - }, - - componentWillUnmount: function componentWillUnmount() { - jQuery(window).unbind('scroll', this.scrollHandler); - }, - - componentDidMount: function componentDidMount() { - this.validateAndSetPropValues(); - jQuery(window).scroll(this.scrollHandler); - }, - - 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); - - // always set the opacity for inner div, so they are able to make the transition - if (!this.state.showPageStatus) { - acutalPageContentDivStyle.opacity = 0; - } - - return _react2.default.createElement( - 'div', - { style: this.props.outterDivStyle || this.pageDivStle }, - _react2.default.createElement( - 'div', - { style: acutalPageContentDivStyle, className: 'react-scroll-pagination-inner-div' }, - _react2.default.createElement( - 'span', - null, - this.state.currentPage - ), - '/', - _react2.default.createElement( - 'span', - null, - this.props.totalPages || 1 - ) - ) - ); - } -}); - -exports.default = ReactScrollPagination; - -/***/ }), -/* 7 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; -/** - * Copyright (c) 2013-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - */ - - - -var React = __webpack_require__(4); -var factory = __webpack_require__(8); - -if (typeof React === 'undefined') { - throw Error( - 'create-react-class could not find the React object. If you are using script tags, ' + - 'make sure that React is being loaded before create-react-class.' - ); -} - -// Hack to grab NoopUpdateQueue from isomorphic React -var ReactNoopUpdateQueue = new React.Component().updater; - -module.exports = factory( - React.Component, - React.isValidElement, - ReactNoopUpdateQueue -); - - -/***/ }), -/* 8 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; -/* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright (c) 2013-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - */ - - - -var _assign = __webpack_require__(9); - -var emptyObject = __webpack_require__(10); -var _invariant = __webpack_require__(11); - -if (process.env.NODE_ENV !== 'production') { - var warning = __webpack_require__(12); -} - -var MIXINS_KEY = 'mixins'; - -// Helper function to allow the creation of anonymous functions which do not -// have .name set to the name of the variable being assigned to. -function identity(fn) { - return fn; -} - -var ReactPropTypeLocationNames; -if (process.env.NODE_ENV !== 'production') { - ReactPropTypeLocationNames = { - prop: 'prop', - context: 'context', - childContext: 'child context' - }; -} else { - ReactPropTypeLocationNames = {}; -} - -function factory(ReactComponent, isValidElement, ReactNoopUpdateQueue) { - /** - * Policies that describe methods in `ReactClassInterface`. - */ - - var injectedMixins = []; - - /** - * Composite components are higher-level components that compose other composite - * or host components. - * - * To create a new type of `ReactClass`, pass a specification of - * your new class to `React.createClass`. The only requirement of your class - * specification is that you implement a `render` method. - * - * var MyComponent = React.createClass({ - * render: function() { - * return
Hello World
; - * } - * }); - * - * The class specification supports a specific protocol of methods that have - * special meaning (e.g. `render`). See `ReactClassInterface` for - * more the comprehensive protocol. Any other properties and methods in the - * class specification will be available on the prototype. - * - * @interface ReactClassInterface - * @internal - */ - var ReactClassInterface = { - /** - * An array of Mixin objects to include when defining your component. - * - * @type {array} - * @optional - */ - mixins: 'DEFINE_MANY', - - /** - * An object containing properties and methods that should be defined on - * the component's constructor instead of its prototype (static methods). - * - * @type {object} - * @optional - */ - statics: 'DEFINE_MANY', - - /** - * Definition of prop types for this component. - * - * @type {object} - * @optional - */ - propTypes: 'DEFINE_MANY', - - /** - * Definition of context types for this component. - * - * @type {object} - * @optional - */ - contextTypes: 'DEFINE_MANY', - - /** - * Definition of context types this component sets for its children. - * - * @type {object} - * @optional - */ - childContextTypes: 'DEFINE_MANY', - - // ==== Definition methods ==== - - /** - * Invoked when the component is mounted. Values in the mapping will be set on - * `this.props` if that prop is not specified (i.e. using an `in` check). - * - * This method is invoked before `getInitialState` and therefore cannot rely - * on `this.state` or use `this.setState`. - * - * @return {object} - * @optional - */ - getDefaultProps: 'DEFINE_MANY_MERGED', - - /** - * Invoked once before the component is mounted. The return value will be used - * as the initial value of `this.state`. - * - * getInitialState: function() { - * return { - * isOn: false, - * fooBaz: new BazFoo() - * } - * } - * - * @return {object} - * @optional - */ - getInitialState: 'DEFINE_MANY_MERGED', - - /** - * @return {object} - * @optional - */ - getChildContext: 'DEFINE_MANY_MERGED', - - /** - * Uses props from `this.props` and state from `this.state` to render the - * structure of the component. - * - * No guarantees are made about when or how often this method is invoked, so - * it must not have side effects. - * - * render: function() { - * var name = this.props.name; - * return
Hello, {name}!
; - * } - * - * @return {ReactComponent} - * @required - */ - render: 'DEFINE_ONCE', - - // ==== Delegate methods ==== - - /** - * Invoked when the component is initially created and about to be mounted. - * This may have side effects, but any external subscriptions or data created - * by this method must be cleaned up in `componentWillUnmount`. - * - * @optional - */ - componentWillMount: 'DEFINE_MANY', - - /** - * Invoked when the component has been mounted and has a DOM representation. - * However, there is no guarantee that the DOM node is in the document. - * - * Use this as an opportunity to operate on the DOM when the component has - * been mounted (initialized and rendered) for the first time. - * - * @param {DOMElement} rootNode DOM element representing the component. - * @optional - */ - componentDidMount: 'DEFINE_MANY', - - /** - * Invoked before the component receives new props. - * - * Use this as an opportunity to react to a prop transition by updating the - * state using `this.setState`. Current props are accessed via `this.props`. - * - * componentWillReceiveProps: function(nextProps, nextContext) { - * this.setState({ - * likesIncreasing: nextProps.likeCount > this.props.likeCount - * }); - * } - * - * NOTE: There is no equivalent `componentWillReceiveState`. An incoming prop - * transition may cause a state change, but the opposite is not true. If you - * need it, you are probably looking for `componentWillUpdate`. - * - * @param {object} nextProps - * @optional - */ - componentWillReceiveProps: 'DEFINE_MANY', - - /** - * Invoked while deciding if the component should be updated as a result of - * receiving new props, state and/or context. - * - * Use this as an opportunity to `return false` when you're certain that the - * transition to the new props/state/context will not require a component - * update. - * - * shouldComponentUpdate: function(nextProps, nextState, nextContext) { - * return !equal(nextProps, this.props) || - * !equal(nextState, this.state) || - * !equal(nextContext, this.context); - * } - * - * @param {object} nextProps - * @param {?object} nextState - * @param {?object} nextContext - * @return {boolean} True if the component should update. - * @optional - */ - shouldComponentUpdate: 'DEFINE_ONCE', - - /** - * Invoked when the component is about to update due to a transition from - * `this.props`, `this.state` and `this.context` to `nextProps`, `nextState` - * and `nextContext`. - * - * Use this as an opportunity to perform preparation before an update occurs. - * - * NOTE: You **cannot** use `this.setState()` in this method. - * - * @param {object} nextProps - * @param {?object} nextState - * @param {?object} nextContext - * @param {ReactReconcileTransaction} transaction - * @optional - */ - componentWillUpdate: 'DEFINE_MANY', - - /** - * Invoked when the component's DOM representation has been updated. - * - * Use this as an opportunity to operate on the DOM when the component has - * been updated. - * - * @param {object} prevProps - * @param {?object} prevState - * @param {?object} prevContext - * @param {DOMElement} rootNode DOM element representing the component. - * @optional - */ - componentDidUpdate: 'DEFINE_MANY', - - /** - * Invoked when the component is about to be removed from its parent and have - * its DOM representation destroyed. - * - * Use this as an opportunity to deallocate any external resources. - * - * NOTE: There is no `componentDidUnmount` since your component will have been - * destroyed by that point. - * - * @optional - */ - componentWillUnmount: 'DEFINE_MANY', - - // ==== Advanced methods ==== - - /** - * Updates the component's currently mounted DOM representation. - * - * By default, this implements React's rendering and reconciliation algorithm. - * Sophisticated clients may wish to override this. - * - * @param {ReactReconcileTransaction} transaction - * @internal - * @overridable - */ - updateComponent: 'OVERRIDE_BASE' - }; - - /** - * Mapping from class specification keys to special processing functions. - * - * Although these are declared like instance properties in the specification - * when defining classes using `React.createClass`, they are actually static - * and are accessible on the constructor instead of the prototype. Despite - * being static, they must be defined outside of the "statics" key under - * which all other static methods are defined. - */ - var RESERVED_SPEC_KEYS = { - displayName: function(Constructor, displayName) { - Constructor.displayName = displayName; - }, - mixins: function(Constructor, mixins) { - if (mixins) { - for (var i = 0; i < mixins.length; i++) { - mixSpecIntoComponent(Constructor, mixins[i]); - } - } - }, - childContextTypes: function(Constructor, childContextTypes) { - if (process.env.NODE_ENV !== 'production') { - validateTypeDef(Constructor, childContextTypes, 'childContext'); - } - Constructor.childContextTypes = _assign( - {}, - Constructor.childContextTypes, - childContextTypes - ); - }, - contextTypes: function(Constructor, contextTypes) { - if (process.env.NODE_ENV !== 'production') { - validateTypeDef(Constructor, contextTypes, 'context'); - } - Constructor.contextTypes = _assign( - {}, - Constructor.contextTypes, - contextTypes - ); - }, - /** - * Special case getDefaultProps which should move into statics but requires - * automatic merging. - */ - getDefaultProps: function(Constructor, getDefaultProps) { - if (Constructor.getDefaultProps) { - Constructor.getDefaultProps = createMergedResultFunction( - Constructor.getDefaultProps, - getDefaultProps - ); - } else { - Constructor.getDefaultProps = getDefaultProps; - } - }, - propTypes: function(Constructor, propTypes) { - if (process.env.NODE_ENV !== 'production') { - validateTypeDef(Constructor, propTypes, 'prop'); - } - Constructor.propTypes = _assign({}, Constructor.propTypes, propTypes); - }, - statics: function(Constructor, statics) { - mixStaticSpecIntoComponent(Constructor, statics); - }, - autobind: function() {} - }; - - function validateTypeDef(Constructor, typeDef, location) { - for (var propName in typeDef) { - if (typeDef.hasOwnProperty(propName)) { - // use a warning instead of an _invariant so components - // don't show up in prod but only in __DEV__ - if (process.env.NODE_ENV !== 'production') { - warning( - typeof typeDef[propName] === 'function', - '%s: %s type `%s` is invalid; it must be a function, usually from ' + - 'React.PropTypes.', - Constructor.displayName || 'ReactClass', - ReactPropTypeLocationNames[location], - propName - ); - } - } - } - } - - function validateMethodOverride(isAlreadyDefined, name) { - var specPolicy = ReactClassInterface.hasOwnProperty(name) - ? ReactClassInterface[name] - : null; - - // Disallow overriding of base class methods unless explicitly allowed. - if (ReactClassMixin.hasOwnProperty(name)) { - _invariant( - specPolicy === 'OVERRIDE_BASE', - 'ReactClassInterface: You are attempting to override ' + - '`%s` from your class specification. Ensure that your method names ' + - 'do not overlap with React methods.', - name - ); - } - - // Disallow defining methods more than once unless explicitly allowed. - if (isAlreadyDefined) { - _invariant( - specPolicy === 'DEFINE_MANY' || specPolicy === 'DEFINE_MANY_MERGED', - 'ReactClassInterface: You are attempting to define ' + - '`%s` on your component more than once. This conflict may be due ' + - 'to a mixin.', - name - ); - } - } - - /** - * Mixin helper which handles policy validation and reserved - * specification keys when building React classes. - */ - function mixSpecIntoComponent(Constructor, spec) { - if (!spec) { - if (process.env.NODE_ENV !== 'production') { - var typeofSpec = typeof spec; - var isMixinValid = typeofSpec === 'object' && spec !== null; - - if (process.env.NODE_ENV !== 'production') { - warning( - isMixinValid, - "%s: You're attempting to include a mixin that is either null " + - 'or not an object. Check the mixins included by the component, ' + - 'as well as any mixins they include themselves. ' + - 'Expected object but got %s.', - Constructor.displayName || 'ReactClass', - spec === null ? null : typeofSpec - ); - } - } - - return; - } - - _invariant( - typeof spec !== 'function', - "ReactClass: You're attempting to " + - 'use a component class or function as a mixin. Instead, just use a ' + - 'regular object.' - ); - _invariant( - !isValidElement(spec), - "ReactClass: You're attempting to " + - 'use a component as a mixin. Instead, just use a regular object.' - ); - - var proto = Constructor.prototype; - var autoBindPairs = proto.__reactAutoBindPairs; - - // By handling mixins before any other properties, we ensure the same - // chaining order is applied to methods with DEFINE_MANY policy, whether - // mixins are listed before or after these methods in the spec. - if (spec.hasOwnProperty(MIXINS_KEY)) { - RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins); - } - - for (var name in spec) { - if (!spec.hasOwnProperty(name)) { - continue; - } - - if (name === MIXINS_KEY) { - // We have already handled mixins in a special case above. - continue; - } - - var property = spec[name]; - var isAlreadyDefined = proto.hasOwnProperty(name); - validateMethodOverride(isAlreadyDefined, name); - - if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) { - RESERVED_SPEC_KEYS[name](Constructor, property); - } else { - // Setup methods on prototype: - // The following member methods should not be automatically bound: - // 1. Expected ReactClass methods (in the "interface"). - // 2. Overridden methods (that were mixed in). - var isReactClassMethod = ReactClassInterface.hasOwnProperty(name); - var isFunction = typeof property === 'function'; - var shouldAutoBind = - isFunction && - !isReactClassMethod && - !isAlreadyDefined && - spec.autobind !== false; - - if (shouldAutoBind) { - autoBindPairs.push(name, property); - proto[name] = property; - } else { - if (isAlreadyDefined) { - var specPolicy = ReactClassInterface[name]; - - // These cases should already be caught by validateMethodOverride. - _invariant( - isReactClassMethod && - (specPolicy === 'DEFINE_MANY_MERGED' || - specPolicy === 'DEFINE_MANY'), - 'ReactClass: Unexpected spec policy %s for key %s ' + - 'when mixing in component specs.', - specPolicy, - name - ); - - // For methods which are defined more than once, call the existing - // methods before calling the new property, merging if appropriate. - if (specPolicy === 'DEFINE_MANY_MERGED') { - proto[name] = createMergedResultFunction(proto[name], property); - } else if (specPolicy === 'DEFINE_MANY') { - proto[name] = createChainedFunction(proto[name], property); - } - } else { - proto[name] = property; - if (process.env.NODE_ENV !== 'production') { - // Add verbose displayName to the function, which helps when looking - // at profiling tools. - if (typeof property === 'function' && spec.displayName) { - proto[name].displayName = spec.displayName + '_' + name; - } - } - } - } - } - } - } - - function mixStaticSpecIntoComponent(Constructor, statics) { - if (!statics) { - return; - } - for (var name in statics) { - var property = statics[name]; - if (!statics.hasOwnProperty(name)) { - continue; - } - - var isReserved = name in RESERVED_SPEC_KEYS; - _invariant( - !isReserved, - 'ReactClass: You are attempting to define a reserved ' + - 'property, `%s`, that shouldn\'t be on the "statics" key. Define it ' + - 'as an instance property instead; it will still be accessible on the ' + - 'constructor.', - name - ); - - var isInherited = name in Constructor; - _invariant( - !isInherited, - 'ReactClass: You are attempting to define ' + - '`%s` on your component more than once. This conflict may be ' + - 'due to a mixin.', - name - ); - Constructor[name] = property; - } - } - - /** - * Merge two objects, but throw if both contain the same key. - * - * @param {object} one The first object, which is mutated. - * @param {object} two The second object - * @return {object} one after it has been mutated to contain everything in two. - */ - function mergeIntoWithNoDuplicateKeys(one, two) { - _invariant( - one && two && typeof one === 'object' && typeof two === 'object', - 'mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.' - ); - - for (var key in two) { - if (two.hasOwnProperty(key)) { - _invariant( - one[key] === undefined, - 'mergeIntoWithNoDuplicateKeys(): ' + - 'Tried to merge two objects with the same key: `%s`. This conflict ' + - 'may be due to a mixin; in particular, this may be caused by two ' + - 'getInitialState() or getDefaultProps() methods returning objects ' + - 'with clashing keys.', - key - ); - one[key] = two[key]; - } - } - return one; - } - - /** - * Creates a function that invokes two functions and merges their return values. - * - * @param {function} one Function to invoke first. - * @param {function} two Function to invoke second. - * @return {function} Function that invokes the two argument functions. - * @private - */ - function createMergedResultFunction(one, two) { - return function mergedResult() { - var a = one.apply(this, arguments); - var b = two.apply(this, arguments); - if (a == null) { - return b; - } else if (b == null) { - return a; - } - var c = {}; - mergeIntoWithNoDuplicateKeys(c, a); - mergeIntoWithNoDuplicateKeys(c, b); - return c; - }; - } - - /** - * Creates a function that invokes two functions and ignores their return vales. - * - * @param {function} one Function to invoke first. - * @param {function} two Function to invoke second. - * @return {function} Function that invokes the two argument functions. - * @private - */ - function createChainedFunction(one, two) { - return function chainedFunction() { - one.apply(this, arguments); - two.apply(this, arguments); - }; - } - - /** - * Binds a method to the component. - * - * @param {object} component Component whose method is going to be bound. - * @param {function} method Method to be bound. - * @return {function} The bound method. - */ - function bindAutoBindMethod(component, method) { - var boundMethod = method.bind(component); - if (process.env.NODE_ENV !== 'production') { - boundMethod.__reactBoundContext = component; - boundMethod.__reactBoundMethod = method; - boundMethod.__reactBoundArguments = null; - var componentName = component.constructor.displayName; - var _bind = boundMethod.bind; - boundMethod.bind = function(newThis) { - for ( - var _len = arguments.length, - args = Array(_len > 1 ? _len - 1 : 0), - _key = 1; - _key < _len; - _key++ - ) { - args[_key - 1] = arguments[_key]; - } - - // User is trying to bind() an autobound method; we effectively will - // ignore the value of "this" that the user is trying to use, so - // let's warn. - if (newThis !== component && newThis !== null) { - if (process.env.NODE_ENV !== 'production') { - warning( - false, - 'bind(): React component methods may only be bound to the ' + - 'component instance. See %s', - componentName - ); - } - } else if (!args.length) { - if (process.env.NODE_ENV !== 'production') { - warning( - false, - 'bind(): You are binding a component method to the component. ' + - 'React does this for you automatically in a high-performance ' + - 'way, so you can safely remove this call. See %s', - componentName - ); - } - return boundMethod; - } - var reboundMethod = _bind.apply(boundMethod, arguments); - reboundMethod.__reactBoundContext = component; - reboundMethod.__reactBoundMethod = method; - reboundMethod.__reactBoundArguments = args; - return reboundMethod; - }; - } - return boundMethod; - } - - /** - * Binds all auto-bound methods in a component. - * - * @param {object} component Component whose method is going to be bound. - */ - function bindAutoBindMethods(component) { - var pairs = component.__reactAutoBindPairs; - for (var i = 0; i < pairs.length; i += 2) { - var autoBindKey = pairs[i]; - var method = pairs[i + 1]; - component[autoBindKey] = bindAutoBindMethod(component, method); - } - } - - var IsMountedPreMixin = { - componentDidMount: function() { - this.__isMounted = true; - } - }; - - var IsMountedPostMixin = { - componentWillUnmount: function() { - this.__isMounted = false; - } - }; - - /** - * Add more to the ReactClass base class. These are all legacy features and - * therefore not already part of the modern ReactComponent. - */ - var ReactClassMixin = { - /** - * TODO: This will be deprecated because state should always keep a consistent - * type signature and the only use case for this, is to avoid that. - */ - replaceState: function(newState, callback) { - this.updater.enqueueReplaceState(this, newState, callback); - }, - - /** - * Checks whether or not this composite component is mounted. - * @return {boolean} True if mounted, false otherwise. - * @protected - * @final - */ - isMounted: function() { - if (process.env.NODE_ENV !== 'production') { - warning( - this.__didWarnIsMounted, - '%s: isMounted is deprecated. Instead, make sure to clean up ' + - 'subscriptions and pending requests in componentWillUnmount to ' + - 'prevent memory leaks.', - (this.constructor && this.constructor.displayName) || - this.name || - 'Component' - ); - this.__didWarnIsMounted = true; - } - return !!this.__isMounted; - } - }; - - var ReactClassComponent = function() {}; - _assign( - ReactClassComponent.prototype, - ReactComponent.prototype, - ReactClassMixin - ); - - /** - * Creates a composite component class given a class specification. - * See https://facebook.github.io/react/docs/top-level-api.html#react.createclass - * - * @param {object} spec Class specification (which must define `render`). - * @return {function} Component constructor function. - * @public - */ - function createClass(spec) { - // To keep our warnings more understandable, we'll use a little hack here to - // ensure that Constructor.name !== 'Constructor'. This makes sure we don't - // unnecessarily identify a class without displayName as 'Constructor'. - var Constructor = identity(function(props, context, updater) { - // This constructor gets overridden by mocks. The argument is used - // by mocks to assert on what gets mounted. - - if (process.env.NODE_ENV !== 'production') { - warning( - this instanceof Constructor, - 'Something is calling a React component directly. Use a factory or ' + - 'JSX instead. See: https://fb.me/react-legacyfactory' - ); - } - - // Wire up auto-binding - if (this.__reactAutoBindPairs.length) { - bindAutoBindMethods(this); - } - - this.props = props; - this.context = context; - this.refs = emptyObject; - this.updater = updater || ReactNoopUpdateQueue; - - this.state = null; - - // ReactClasses doesn't have constructors. Instead, they use the - // getInitialState and componentWillMount methods for initialization. - - var initialState = this.getInitialState ? this.getInitialState() : null; - if (process.env.NODE_ENV !== 'production') { - // We allow auto-mocks to proceed as if they're returning null. - if ( - initialState === undefined && - this.getInitialState._isMockFunction - ) { - // This is probably bad practice. Consider warning here and - // deprecating this convenience. - initialState = null; - } - } - _invariant( - typeof initialState === 'object' && !Array.isArray(initialState), - '%s.getInitialState(): must return an object or null', - Constructor.displayName || 'ReactCompositeComponent' - ); - - this.state = initialState; - }); - Constructor.prototype = new ReactClassComponent(); - Constructor.prototype.constructor = Constructor; - Constructor.prototype.__reactAutoBindPairs = []; - - injectedMixins.forEach(mixSpecIntoComponent.bind(null, Constructor)); - - mixSpecIntoComponent(Constructor, IsMountedPreMixin); - mixSpecIntoComponent(Constructor, spec); - mixSpecIntoComponent(Constructor, IsMountedPostMixin); - - // Initialize the defaultProps property after all mixins have been merged. - if (Constructor.getDefaultProps) { - Constructor.defaultProps = Constructor.getDefaultProps(); - } - - if (process.env.NODE_ENV !== 'production') { - // This is a tag to indicate that the use of these method names is ok, - // since it's used with createClass. If it's not, then it's likely a - // mistake so we'll warn you to use the static property, property - // initializer or constructor respectively. - if (Constructor.getDefaultProps) { - Constructor.getDefaultProps.isReactClassApproved = {}; - } - if (Constructor.prototype.getInitialState) { - Constructor.prototype.getInitialState.isReactClassApproved = {}; - } - } - - _invariant( - Constructor.prototype.render, - 'createClass(...): Class specification must implement a `render` method.' - ); - - if (process.env.NODE_ENV !== 'production') { - warning( - !Constructor.prototype.componentShouldUpdate, - '%s has a method called ' + - 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + - 'The name is phrased as a question because the function is ' + - 'expected to return a value.', - spec.displayName || 'A component' - ); - warning( - !Constructor.prototype.componentWillRecieveProps, - '%s has a method called ' + - 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', - spec.displayName || 'A component' - ); - } - - // Reduce time spent doing lookups by setting these on the prototype. - for (var methodName in ReactClassInterface) { - if (!Constructor.prototype[methodName]) { - Constructor.prototype[methodName] = null; - } - } - - return Constructor; - } - - return createClass; -} - -module.exports = factory; - -/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0))) - -/***/ }), -/* 9 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; -/* -object-assign -(c) Sindre Sorhus -@license MIT -*/ - - -/* eslint-disable no-unused-vars */ -var getOwnPropertySymbols = Object.getOwnPropertySymbols; -var hasOwnProperty = Object.prototype.hasOwnProperty; -var propIsEnumerable = Object.prototype.propertyIsEnumerable; - -function toObject(val) { - if (val === null || val === undefined) { - throw new TypeError('Object.assign cannot be called with null or undefined'); - } - - return Object(val); -} - -function shouldUseNative() { - try { - if (!Object.assign) { - return false; - } - - // Detect buggy property enumeration order in older V8 versions. - - // https://bugs.chromium.org/p/v8/issues/detail?id=4118 - var test1 = new String('abc'); // eslint-disable-line no-new-wrappers - test1[5] = 'de'; - if (Object.getOwnPropertyNames(test1)[0] === '5') { - return false; - } - - // https://bugs.chromium.org/p/v8/issues/detail?id=3056 - var test2 = {}; - for (var i = 0; i < 10; i++) { - test2['_' + String.fromCharCode(i)] = i; - } - var order2 = Object.getOwnPropertyNames(test2).map(function (n) { - return test2[n]; - }); - if (order2.join('') !== '0123456789') { - return false; - } - - // https://bugs.chromium.org/p/v8/issues/detail?id=3056 - var test3 = {}; - 'abcdefghijklmnopqrst'.split('').forEach(function (letter) { - test3[letter] = letter; - }); - if (Object.keys(Object.assign({}, test3)).join('') !== - 'abcdefghijklmnopqrst') { - return false; - } - - return true; - } catch (err) { - // We don't expect any of the above to throw, but better to be safe. - return false; - } -} - -module.exports = shouldUseNative() ? Object.assign : function (target, source) { - var from; - var to = toObject(target); - var symbols; - - for (var s = 1; s < arguments.length; s++) { - from = Object(arguments[s]); - - for (var key in from) { - if (hasOwnProperty.call(from, key)) { - to[key] = from[key]; - } - } - - if (getOwnPropertySymbols) { - symbols = getOwnPropertySymbols(from); - for (var i = 0; i < symbols.length; i++) { - if (propIsEnumerable.call(from, symbols[i])) { - to[symbols[i]] = from[symbols[i]]; - } - } - } - } - - return to; -}; - - -/***/ }), -/* 10 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; -/* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright (c) 2013-present, Facebook, Inc. + * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. - * - */ - - - -var emptyObject = {}; - -if (process.env.NODE_ENV !== 'production') { - Object.freeze(emptyObject); -} - -module.exports = emptyObject; -/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0))) - -/***/ }), -/* 11 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; -/* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright (c) 2013-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - */ - - - -/** - * Use invariant() to assert state which your program assumes to be true. - * - * Provide sprintf-style format (only %s is supported) and arguments - * to provide information about what broke and what you were - * expecting. - * - * The invariant message will be stripped in production, but the invariant - * will remain to ensure logic does not differ in production. - */ - -var validateFormat = function validateFormat(format) {}; - -if (process.env.NODE_ENV !== 'production') { - validateFormat = function validateFormat(format) { - if (format === undefined) { - throw new Error('invariant requires an error message argument'); - } - }; -} - -function invariant(condition, format, a, b, c, d, e, f) { - validateFormat(format); - - if (!condition) { - var error; - if (format === undefined) { - error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.'); - } else { - var args = [a, b, c, d, e, f]; - var argIndex = 0; - error = new Error(format.replace(/%s/g, function () { - return args[argIndex++]; - })); - error.name = 'Invariant Violation'; - } - - error.framesToPop = 1; // we don't care about invariant's own frame - throw error; - } -} - -module.exports = invariant; -/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0))) - -/***/ }), -/* 12 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; -/* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright (c) 2014-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - */ - - - -var emptyFunction = __webpack_require__(13); - -/** - * Similar to invariant but only logs a warning if the condition is not met. - * This can be used to log issues in development environments in critical - * paths. Removing the logging code for production environments will keep the - * same logic and follow the same code paths. - */ - -var warning = emptyFunction; - -if (process.env.NODE_ENV !== 'production') { - var printWarning = function printWarning(format) { - for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } - - var argIndex = 0; - var message = 'Warning: ' + format.replace(/%s/g, function () { - return args[argIndex++]; - }); - if (typeof console !== 'undefined') { - console.error(message); - } - try { - // --- Welcome to debugging React --- - // This error was thrown as a convenience so that you can use this stack - // to find the callsite that caused this warning to fire. - throw new Error(message); - } catch (x) {} - }; - - warning = function warning(condition, format) { - if (format === undefined) { - throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); - } - - if (format.indexOf('Failed Composite propType: ') === 0) { - return; // Ignore CompositeComponent proptype check. - } - - if (!condition) { - for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { - args[_key2 - 2] = arguments[_key2]; - } - - printWarning.apply(undefined, [format].concat(args)); - } - }; -} - -module.exports = warning; -/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0))) - -/***/ }), -/* 13 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -/** - * Copyright (c) 2013-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * - */ - -function makeEmptyFunction(arg) { - return function () { - return arg; - }; -} - -/** - * This function accepts and discards inputs; it has no side effects. This is - * primarily useful idiomatically for overridable function endpoints which - * always need to be callable, since JS lacks a null-call idiom ala Cocoa. - */ -var emptyFunction = function emptyFunction() {}; - -emptyFunction.thatReturns = makeEmptyFunction; -emptyFunction.thatReturnsFalse = makeEmptyFunction(false); -emptyFunction.thatReturnsTrue = makeEmptyFunction(true); -emptyFunction.thatReturnsNull = makeEmptyFunction(null); -emptyFunction.thatReturnsThis = function () { - return this; -}; -emptyFunction.thatReturnsArgument = function (arg) { - return arg; -}; - -module.exports = emptyFunction; - -/***/ }), -/* 14 */ -/***/ (function(module, exports, __webpack_require__) { - -/* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright (c) 2013-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -if (process.env.NODE_ENV !== 'production') { - var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' && - Symbol.for && - Symbol.for('react.element')) || - 0xeac7; - - var isValidElement = function(object) { - return typeof object === 'object' && - object !== null && - object.$$typeof === REACT_ELEMENT_TYPE; - }; - - // By explicitly using `prop-types` you are opting into new development behavior. - // http://fb.me/prop-types-in-prod - var throwOnDirectAccess = true; - module.exports = __webpack_require__(15)(isValidElement, throwOnDirectAccess); -} else { - // By explicitly using `prop-types` you are opting into new production behavior. - // http://fb.me/prop-types-in-prod - module.exports = __webpack_require__(18)(); -} - -/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0))) - -/***/ }), -/* 15 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; -/* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright (c) 2013-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - - - -var emptyFunction = __webpack_require__(1); -var invariant = __webpack_require__(2); -var warning = __webpack_require__(5); -var assign = __webpack_require__(16); - -var ReactPropTypesSecret = __webpack_require__(3); -var checkPropTypes = __webpack_require__(17); - -module.exports = function(isValidElement, throwOnDirectAccess) { - /* global Symbol */ - var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator; - var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec. - - /** - * Returns the iterator method function contained on the iterable object. - * - * Be sure to invoke the function with the iterable as context: - * - * var iteratorFn = getIteratorFn(myIterable); - * if (iteratorFn) { - * var iterator = iteratorFn.call(myIterable); - * ... - * } - * - * @param {?object} maybeIterable - * @return {?function} - */ - function getIteratorFn(maybeIterable) { - var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]); - if (typeof iteratorFn === 'function') { - return iteratorFn; - } - } - - /** - * Collection of methods that allow declaration and validation of props that are - * supplied to React components. Example usage: - * - * var Props = require('ReactPropTypes'); - * var MyArticle = React.createClass({ - * propTypes: { - * // An optional string prop named "description". - * description: Props.string, - * - * // A required enum prop named "category". - * category: Props.oneOf(['News','Photos']).isRequired, - * - * // A prop named "dialog" that requires an instance of Dialog. - * dialog: Props.instanceOf(Dialog).isRequired - * }, - * render: function() { ... } - * }); - * - * A more formal specification of how these methods are used: - * - * type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...) - * decl := ReactPropTypes.{type}(.isRequired)? - * - * Each and every declaration produces a function with the same signature. This - * allows the creation of custom validation functions. For example: - * - * var MyLink = React.createClass({ - * propTypes: { - * // An optional string or URI prop named "href". - * href: function(props, propName, componentName) { - * var propValue = props[propName]; - * if (propValue != null && typeof propValue !== 'string' && - * !(propValue instanceof URI)) { - * return new Error( - * 'Expected a string or an URI for ' + propName + ' in ' + - * componentName - * ); - * } - * } - * }, - * render: function() {...} - * }); - * - * @internal - */ - - var ANONYMOUS = '<>'; - - // Important! - // Keep this list in sync with production version in `./factoryWithThrowingShims.js`. - var ReactPropTypes = { - array: createPrimitiveTypeChecker('array'), - bool: createPrimitiveTypeChecker('boolean'), - func: createPrimitiveTypeChecker('function'), - number: createPrimitiveTypeChecker('number'), - object: createPrimitiveTypeChecker('object'), - string: createPrimitiveTypeChecker('string'), - symbol: createPrimitiveTypeChecker('symbol'), - - any: createAnyTypeChecker(), - arrayOf: createArrayOfTypeChecker, - element: createElementTypeChecker(), - instanceOf: createInstanceTypeChecker, - node: createNodeChecker(), - objectOf: createObjectOfTypeChecker, - oneOf: createEnumTypeChecker, - oneOfType: createUnionTypeChecker, - shape: createShapeTypeChecker, - exact: createStrictShapeTypeChecker, - }; - - /** - * inlined Object.is polyfill to avoid requiring consumers ship their own - * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is - */ - /*eslint-disable no-self-compare*/ - function is(x, y) { - // SameValue algorithm - if (x === y) { - // Steps 1-5, 7-10 - // Steps 6.b-6.e: +0 != -0 - return x !== 0 || 1 / x === 1 / y; - } else { - // Step 6.a: NaN == NaN - return x !== x && y !== y; - } - } - /*eslint-enable no-self-compare*/ - - /** - * We use an Error-like object for backward compatibility as people may call - * PropTypes directly and inspect their output. However, we don't use real - * Errors anymore. We don't inspect their stack anyway, and creating them - * is prohibitively expensive if they are created too often, such as what - * happens in oneOfType() for any type before the one that matched. - */ - function PropTypeError(message) { - this.message = message; - this.stack = ''; - } - // Make `instanceof Error` still work for returned errors. - PropTypeError.prototype = Error.prototype; - - function createChainableTypeChecker(validate) { - if (process.env.NODE_ENV !== 'production') { - var manualPropTypeCallCache = {}; - var manualPropTypeWarningCount = 0; - } - function checkType(isRequired, props, propName, componentName, location, propFullName, secret) { - componentName = componentName || ANONYMOUS; - propFullName = propFullName || propName; - - if (secret !== ReactPropTypesSecret) { - if (throwOnDirectAccess) { - // New behavior only for users of `prop-types` package - invariant( - false, - 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + - 'Use `PropTypes.checkPropTypes()` to call them. ' + - 'Read more at http://fb.me/use-check-prop-types' - ); - } else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') { - // Old behavior for people using React.PropTypes - var cacheKey = componentName + ':' + propName; - if ( - !manualPropTypeCallCache[cacheKey] && - // Avoid spamming the console because they are often not actionable except for lib authors - manualPropTypeWarningCount < 3 - ) { - warning( - false, - 'You are manually calling a React.PropTypes validation ' + - 'function for the `%s` prop on `%s`. This is deprecated ' + - 'and will throw in the standalone `prop-types` package. ' + - 'You may be seeing this warning due to a third-party PropTypes ' + - 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.', - propFullName, - componentName - ); - manualPropTypeCallCache[cacheKey] = true; - manualPropTypeWarningCount++; - } - } - } - if (props[propName] == null) { - if (isRequired) { - if (props[propName] === null) { - return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.')); - } - return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.')); - } - return null; - } else { - return validate(props, propName, componentName, location, propFullName); - } - } - - var chainedCheckType = checkType.bind(null, false); - chainedCheckType.isRequired = checkType.bind(null, true); - - return chainedCheckType; - } - - function createPrimitiveTypeChecker(expectedType) { - function validate(props, propName, componentName, location, propFullName, secret) { - var propValue = props[propName]; - var propType = getPropType(propValue); - if (propType !== expectedType) { - // `propValue` being instance of, say, date/regexp, pass the 'object' - // check, but we can offer a more precise error message here rather than - // 'of type `object`'. - var preciseType = getPreciseType(propValue); - - return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.')); - } - return null; - } - return createChainableTypeChecker(validate); - } - - function createAnyTypeChecker() { - return createChainableTypeChecker(emptyFunction.thatReturnsNull); - } - - function createArrayOfTypeChecker(typeChecker) { - function validate(props, propName, componentName, location, propFullName) { - if (typeof typeChecker !== 'function') { - return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.'); - } - var propValue = props[propName]; - if (!Array.isArray(propValue)) { - var propType = getPropType(propValue); - return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.')); - } - for (var i = 0; i < propValue.length; i++) { - var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret); - if (error instanceof Error) { - return error; - } - } - return null; - } - return createChainableTypeChecker(validate); - } - - function createElementTypeChecker() { - function validate(props, propName, componentName, location, propFullName) { - var propValue = props[propName]; - if (!isValidElement(propValue)) { - var propType = getPropType(propValue); - return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.')); - } - return null; - } - return createChainableTypeChecker(validate); - } - - function createInstanceTypeChecker(expectedClass) { - function validate(props, propName, componentName, location, propFullName) { - if (!(props[propName] instanceof expectedClass)) { - var expectedClassName = expectedClass.name || ANONYMOUS; - var actualClassName = getClassName(props[propName]); - return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.')); - } - return null; - } - return createChainableTypeChecker(validate); - } - - function createEnumTypeChecker(expectedValues) { - if (!Array.isArray(expectedValues)) { - process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid argument supplied to oneOf, expected an instance of array.') : void 0; - return emptyFunction.thatReturnsNull; - } - - function validate(props, propName, componentName, location, propFullName) { - var propValue = props[propName]; - for (var i = 0; i < expectedValues.length; i++) { - if (is(propValue, expectedValues[i])) { - return null; - } - } - - var valuesString = JSON.stringify(expectedValues); - return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.')); - } - return createChainableTypeChecker(validate); - } - - function createObjectOfTypeChecker(typeChecker) { - function validate(props, propName, componentName, location, propFullName) { - if (typeof typeChecker !== 'function') { - return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.'); - } - var propValue = props[propName]; - var propType = getPropType(propValue); - if (propType !== 'object') { - return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.')); - } - for (var key in propValue) { - if (propValue.hasOwnProperty(key)) { - var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret); - if (error instanceof Error) { - return error; - } - } - } - return null; - } - return createChainableTypeChecker(validate); - } - - function createUnionTypeChecker(arrayOfTypeCheckers) { - if (!Array.isArray(arrayOfTypeCheckers)) { - process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid argument supplied to oneOfType, expected an instance of array.') : void 0; - return emptyFunction.thatReturnsNull; - } - - for (var i = 0; i < arrayOfTypeCheckers.length; i++) { - var checker = arrayOfTypeCheckers[i]; - if (typeof checker !== 'function') { - warning( - false, - 'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' + - 'received %s at index %s.', - getPostfixForTypeWarning(checker), - i - ); - return emptyFunction.thatReturnsNull; - } - } - - function validate(props, propName, componentName, location, propFullName) { - for (var i = 0; i < arrayOfTypeCheckers.length; i++) { - var checker = arrayOfTypeCheckers[i]; - if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret) == null) { - return null; - } - } - - return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.')); - } - return createChainableTypeChecker(validate); - } - - function createNodeChecker() { - function validate(props, propName, componentName, location, propFullName) { - if (!isNode(props[propName])) { - return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.')); - } - return null; - } - return createChainableTypeChecker(validate); - } - - function createShapeTypeChecker(shapeTypes) { - function validate(props, propName, componentName, location, propFullName) { - var propValue = props[propName]; - var propType = getPropType(propValue); - if (propType !== 'object') { - return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.')); - } - for (var key in shapeTypes) { - var checker = shapeTypes[key]; - if (!checker) { - continue; - } - var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret); - if (error) { - return error; - } - } - return null; - } - return createChainableTypeChecker(validate); - } - - function createStrictShapeTypeChecker(shapeTypes) { - function validate(props, propName, componentName, location, propFullName) { - var propValue = props[propName]; - var propType = getPropType(propValue); - if (propType !== 'object') { - return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.')); - } - // We need to check all keys in case some are required but missing from - // props. - var allKeys = assign({}, props[propName], shapeTypes); - for (var key in allKeys) { - var checker = shapeTypes[key]; - if (!checker) { - return new PropTypeError( - 'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' + - '\nBad object: ' + JSON.stringify(props[propName], null, ' ') + - '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, ' ') - ); - } - var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret); - if (error) { - return error; - } - } - return null; - } - - return createChainableTypeChecker(validate); - } - - function isNode(propValue) { - switch (typeof propValue) { - case 'number': - case 'string': - case 'undefined': - return true; - case 'boolean': - return !propValue; - case 'object': - if (Array.isArray(propValue)) { - return propValue.every(isNode); - } - if (propValue === null || isValidElement(propValue)) { - return true; - } - - var iteratorFn = getIteratorFn(propValue); - if (iteratorFn) { - var iterator = iteratorFn.call(propValue); - var step; - if (iteratorFn !== propValue.entries) { - while (!(step = iterator.next()).done) { - if (!isNode(step.value)) { - return false; - } - } - } else { - // Iterator will provide entry [k,v] tuples rather than values. - while (!(step = iterator.next()).done) { - var entry = step.value; - if (entry) { - if (!isNode(entry[1])) { - return false; - } - } - } - } - } else { - return false; - } - - return true; - default: - return false; - } - } - - function isSymbol(propType, propValue) { - // Native Symbol. - if (propType === 'symbol') { - return true; - } - - // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol' - if (propValue['@@toStringTag'] === 'Symbol') { - return true; - } - - // Fallback for non-spec compliant Symbols which are polyfilled. - if (typeof Symbol === 'function' && propValue instanceof Symbol) { - return true; - } - - return false; - } - - // Equivalent of `typeof` but with special handling for array and regexp. - function getPropType(propValue) { - var propType = typeof propValue; - if (Array.isArray(propValue)) { - return 'array'; - } - if (propValue instanceof RegExp) { - // Old webkits (at least until Android 4.0) return 'function' rather than - // 'object' for typeof a RegExp. We'll normalize this here so that /bla/ - // passes PropTypes.object. - return 'object'; - } - if (isSymbol(propType, propValue)) { - return 'symbol'; - } - return propType; - } - - // This handles more types than `getPropType`. Only used for error messages. - // See `createPrimitiveTypeChecker`. - function getPreciseType(propValue) { - if (typeof propValue === 'undefined' || propValue === null) { - return '' + propValue; - } - var propType = getPropType(propValue); - if (propType === 'object') { - if (propValue instanceof Date) { - return 'date'; - } else if (propValue instanceof RegExp) { - return 'regexp'; - } - } - return propType; - } - - // Returns a string that is postfixed to a warning about an invalid type. - // For example, "undefined" or "of type array" - function getPostfixForTypeWarning(value) { - var type = getPreciseType(value); - switch (type) { - case 'array': - case 'object': - return 'an ' + type; - case 'boolean': - case 'date': - case 'regexp': - return 'a ' + type; - default: - return type; - } - } - - // Returns class name of the object, if any. - function getClassName(propValue) { - if (!propValue.constructor || !propValue.constructor.name) { - return ANONYMOUS; - } - return propValue.constructor.name; - } - - ReactPropTypes.checkPropTypes = checkPropTypes; - ReactPropTypes.PropTypes = ReactPropTypes; - - return ReactPropTypes; -}; - -/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0))) - -/***/ }), -/* 16 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; + */var r=n(4),o="function"==typeof Symbol&&Symbol.for,i=o?Symbol.for("react.element"):60103,u=o?Symbol.for("react.portal"):60106,l=o?Symbol.for("react.fragment"):60107,a=o?Symbol.for("react.strict_mode"):60108,c=o?Symbol.for("react.profiler"):60114,s=o?Symbol.for("react.provider"):60109,f=o?Symbol.for("react.context"):60110,p=o?Symbol.for("react.forward_ref"):60112,h=o?Symbol.for("react.suspense"):60113,d=o?Symbol.for("react.memo"):60115,y=o?Symbol.for("react.lazy"):60116,g="function"==typeof Symbol&&Symbol.iterator;function m(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;nH.length&&H.push(e)}function A(e,t,n){return null==e?0:function e(t,n,r,o){var l=typeof t;"undefined"!==l&&"boolean"!==l||(t=null);var a=!1;if(null===t)a=!0;else switch(l){case"string":case"number":a=!0;break;case"object":switch(t.$$typeof){case i:case u:a=!0}}if(a)return r(o,t,""===n?"."+$(t,0):n),1;if(a=0,n=""===n?".":n+":",Array.isArray(t))for(var c=0;c/node_modules/react-addons-test-utils", "/node_modules/jquery" ], - "collectCoverage": true + "collectCoverage": true, + "modulePathIgnorePatterns": [], + "transform": { + "^.+\\.js$": "babel-jest" + } } } diff --git a/src/index.jsx b/src/index.jsx index 9a23b31..767c4be 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -8,13 +8,15 @@ /> */ -import React, { Component } from 'react' -import createReactClass from 'create-react-class' +import { Component } from 'react' import PropTypes from 'prop-types' -const jQuery = require('jquery') -const ReactScrollPagination = createReactClass({ - propTypes: { +export default class ReactScrollPagination extends Component { + static defaultProps = { + totalPages: null, + } + + static propTypes = { fetchFunc: PropTypes.func.isRequired, totalPages: PropTypes.number, paginationShowTime: PropTypes.oneOfType([ @@ -32,8 +34,9 @@ const ReactScrollPagination = createReactClass({ PropTypes.number, // The distance to trigger the fetchfunc PropTypes.string ]), - }, - isolate: { + } + + isolate = { onePageHeight: null, timeoutFuncHandler: null, excludeHeight: null, @@ -42,15 +45,17 @@ const ReactScrollPagination = createReactClass({ defaultShowTime: 2000, defaultTrigger: 30, defaultExcludeHeight: 0 - }, - pageDivStle: { + } + + pageDivStle = { position: 'fixed', bottom: '15px', left: 0, right: 0, textAlign: 'center' - }, - pageContentStyle: { + } + + pageContentStyle = { display: 'inline-block', background: 'rgba(6, 6, 6, 0.54)', borderRadius: '5px', @@ -64,16 +69,21 @@ const ReactScrollPagination = createReactClass({ MozTransition: 'opacity 0.8s', OTransition: 'opacity 0.8s', transition: 'opacity 0.8s' - }, - getInitialState: function () { - return { - currentPage: 1, - totalPages: null, - showPageStatus: false - } - }, + } - showPagePositionDiv: function () { + state = { + currentPage: 1, + totalPages: this.props.totalPages, + showPageStatus: false + } + + constructor(props) { + super(props) + + this.scrollHandler = this.scrollHandler.bind(this) + } + + showPagePositionDiv() { if (this.isolate.timeoutFuncHandler) { clearTimeout(this.isolate.timeoutFuncHandler) } @@ -82,8 +92,9 @@ const ReactScrollPagination = createReactClass({ this.isolate.timeoutFuncHandler = setTimeout(() => { this.setState({showPageStatus: false}) }, this.isolate.showTime) - }, - getShowTime: function () { + } + + getShowTime() { let showTime = this.isolate.defaultShowTime if (this.props.paginationShowTime) { showTime = parseInt(this.props.paginationShowTime) @@ -94,9 +105,9 @@ const ReactScrollPagination = createReactClass({ } } return showTime - }, + } - getExcludeHeight: function () { + getExcludeHeight() { // 获取需要减去的高度 let excludeHeight = this.isolate.defaultExcludeHeight @@ -110,21 +121,20 @@ const ReactScrollPagination = createReactClass({ } } else if (this.props.excludeElement && typeof this.props.excludeElement === 'string') { - let excludeEle = jQuery(this.props.excludeElement) + let excludeEle = document.querySelector(this.props.excludeElement) - if (excludeEle.size() === 0) { + if (excludeEle) { + excludeHeight = excludeEle.offsetHeight + } else { console.error('WARNING: Failed to get the element with given selector "' + this.props.excludeElement + '", please veirify. Will take "' + this.isolate.defaultExcludeHeight + '" by default.') - } else { - excludeHeight = excludeEle.height() } } - this.isolate.excludeHeight = excludeHeight return excludeHeight - }, + } - getTriggerAt: function () { + getTriggerAt() { let triggerAt = this.isolate.defaultTrigger if (this.props.triggerAt) { @@ -139,10 +149,10 @@ const ReactScrollPagination = createReactClass({ } return triggerAt - }, + } - getOnePageHeight: function () { - const documentHeight = jQuery(document).height() + getOnePageHeight() { + const documentHeight = this.documentHeight() /* * 当totalPages第一次有值时，表明List是初次加载，此时计算页面的高度，并将其作为单页的高度 @@ -151,57 +161,80 @@ const ReactScrollPagination = createReactClass({ if (typeof this.props.totalPages === 'number' && this.props.totalPages > 0 && this.isolate.onePageHeight === null) { this.isolate.onePageHeight = documentHeight - this.isolate.excludeHeight } - }, - handlePagePosition: function () { + } + + handlePagePosition() { this.getOnePageHeight() - let windowHeight = jQuery(window).height() - let scrollTop = jQuery(window).scrollTop() + windowHeight - this.isolate.excludeHeight + let scrollBottom = this.scrollTop() + this.windowHeight() - this.isolate.excludeHeight if (this.isolate.onePageHeight !== null) { - let currentPage = Math.ceil(scrollTop / this.isolate.onePageHeight) || 1 + let currentPage = Math.ceil(scrollBottom / this.isolate.onePageHeight) || 1 this.setState({currentPage: currentPage}) this.showPagePositionDiv() } - }, + } + + windowHeight() { + return Math.max(document.body.clientHeight, window.innerWidth) + } - scrollHandler: function () { - let documentHeight = jQuery(document).height() + documentHeight() { + return Math.max(this.windowHeight(), document.documentElement.clientHeight, + document.body.scrollHeight, document.documentElement.scrollHeight, + document.body.offsetHeight, document.documentElement.offsetHeight) + } - let windowHeight = jQuery(window).height() - let scrollBottom = jQuery(window).scrollTop() + windowHeight + scrollTop() { + return window.pageYOffset || document.documentElement.scrollTop + } + + scrollHandler() { + let scrollBottom = this.scrollTop() + window.innerHeight let triggerBottom = scrollBottom + this.isolate.triggerAt // 当滚动条距离底部距离小于30像素的时候出发请求操作 - if (triggerBottom >= documentHeight) { + if (triggerBottom >= this.documentHeight()) { this.props.fetchFunc() } this.handlePagePosition() - }, + } - validateAndSetPropValues: function () { + validateAndSetPropValues() { this.isolate.triggerAt = this.getTriggerAt() this.isolate.excludeHeight = this.getExcludeHeight() this.isolate.showTime = this.getShowTime() - }, + } - componentWillUnmount: function () { - jQuery(window).unbind('scroll', this.scrollHandler) - }, + componentWillUnmount() { + window.removeEventListener('scroll', this.scrollHandler) + } - componentDidMount: function () { + componentDidMount() { this.validateAndSetPropValues() - jQuery(window).scroll(this.scrollHandler) - }, + window.addEventListener('scroll', this.scrollHandler) + + if (!this.props.fetchFunc) { + console.error("ERROR: the mandatory property 'fetchNext' isn't defined") + } + if (!this.haveToRender()) { + console.warn("ERROR: the optional property 'totalPages' isn't defined, so the component won't be rendered") + } - render: function () { + } + + haveToRender() { + return typeof this.props.totalPages !== 'undefined' && this.props.totalPages !== null + } + + render() { // if no totalPages presented, will only do the fetchings - if (typeof this.props.totalPages === 'undefined') { + if (!this.haveToRender()) { return (null) } - let acutalPageContentDivStyle = jQuery.extend({}, this.props.innerDivStyle || this.pageContentStyle) + let acutalPageContentDivStyle = Object.assign({}, this.props.innerDivStyle || this.pageContentStyle) // always set the opacity for inner div, so they are able to make the transition if (!this.state.showPageStatus) { @@ -222,6 +255,4 @@ const ReactScrollPagination = createReactClass({ ) } -}) - -export default ReactScrollPagination +} diff --git a/webpack.config.js b/webpack.config.js index b7e41c9..9bd5b69 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,27 +1,58 @@ module.exports = { - entry: './src/index.jsx', - output: { - filename: 'dist/index.js', - libraryTarget: 'umd', - library: 'ReactScrollPagination' - }, - externals: { - react:'React', - jquery: 'jQuery' - }, - module:{ - rules: [ - { - test: /\.jsx$/, - exclude: /node_modules/, - use: { - loader: 'babel-loader', - options: { - presets: ['es2015', 'stage-0', 'react'], - plugins: ['transform-runtime'] - } - } - } - ] - } -} \ No newline at end of file + entry: './src/index.jsx', + output: { + filename: 'index.js', + libraryTarget: 'umd', + library: 'ReactScrollPagination' + }, + module: { + rules: [ + { + test: /\.(js|jsx)$/, + use: [{ + loader: 'babel-loader', + options: { + babelrc: false, + configFile: false, + compact: false, + cacheDirectory: true, + ignore: [ /cjs/, /node_modules/ ], + presets: [ + [ + "@babel/preset-env", + { + "modules": false, + "targets": { + "browsers": "> 1%", + }, + "useBuiltIns": false, + "forceAllTransforms": true + }, + ], + [ + "@babel/preset-react", + { + runtime: "classic" + } + ] + ], + plugins: [ + [ "@babel/transform-runtime", { + helpers: false, + regenerator: true, + }], + [ + "@babel/plugin-proposal-class-properties", + { + "spec": true, + "loose": true + } + ], + '@babel/plugin-transform-react-inline-elements', + ], + }, + }] + }, + ], + }, +}