├── .eslintrc ├── .gitignore ├── .npmrc ├── .stylelintrc ├── .travis.yml ├── README.md ├── dist ├── index.css └── index.js ├── examples ├── build │ ├── Toast.js │ └── index.html └── src │ ├── Example.css │ ├── Loading.jsx │ └── index.html ├── mock.js ├── package.json ├── src ├── Loading.css ├── Loading.jsx └── index.js ├── webpack.config.development.js └── webpack.config.production.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "rules": { 4 | "indent": [ 5 | 2, 6 | 2, { 7 | "SwitchCase": 1 8 | } 9 | ], 10 | "quotes": [ 11 | 2, 12 | "single" 13 | ], 14 | "linebreak-style": [ 15 | 2, 16 | "unix" 17 | ], 18 | "semi": [ 19 | 2, 20 | "never" 21 | ], 22 | "comma-spacing": [1, { 23 | "before": false, 24 | "after": true 25 | }], 26 | "key-spacing": [1, { 27 | "beforeColon": false, 28 | "afterColon": true 29 | }], 30 | "max-len": [1, 120, 4], 31 | "object-curly-spacing": [1, "always"], 32 | "eol-last": 1, 33 | "jsx-quotes": 1, 34 | "react/display-name": 0, 35 | "react/jsx-boolean-value": 1, 36 | "react/jsx-closing-bracket-location": [ 37 | 1, { 38 | "selfClosing": "tag-aligned", 39 | "nonEmpty": "after-props" 40 | } 41 | ], 42 | "react/jsx-curly-spacing": 1, 43 | "react/jsx-indent-props": [ 44 | 1, 45 | 2 46 | ], 47 | "react/jsx-max-props-per-line": 1, 48 | "react/jsx-no-duplicate-props": 1, 49 | "react/jsx-no-literals": 0, 50 | "react/jsx-no-undef": 1, 51 | "react/jsx-sort-prop-types": 0, 52 | "react/jsx-sort-props": 0, 53 | "react/jsx-uses-react": 1, 54 | "react/jsx-uses-vars": 1, 55 | "react/no-danger": 1, 56 | "react/no-did-mount-set-state": 1, 57 | "react/no-did-update-set-state": 1, 58 | "react/no-direct-mutation-state": 1, 59 | "react/no-multi-comp": 1, 60 | "react/no-set-state": 0, 61 | "react/no-unknown-property": 1, 62 | "react/prop-types": 1, 63 | "react/react-in-jsx-scope": 1, 64 | "react/require-extension": 1, 65 | "react/self-closing-comp": 1, 66 | "react/sort-comp": 1, 67 | "react/wrap-multilines": 1 68 | }, 69 | "env": { 70 | "es6": true, 71 | "browser": true, 72 | "node": true 73 | }, 74 | "extends": "eslint:recommended", 75 | "ecmaFeatures": { 76 | "jsx": true, 77 | "modules": true, 78 | "experimentalObjectRestSpread": true 79 | }, 80 | "plugins": [ 81 | "react" 82 | ], 83 | "globals": { 84 | "Highcharts": false, 85 | "module": false 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | examples/build 3 | npm-debug.log 4 | package-lock.json 5 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-wordpress", 3 | "rules": { 4 | "number-leading-zero": 0, 5 | "block-closing-brace-newline-before": [2, "always"], 6 | "block-opening-brace-space-before": [2, "always"], 7 | "color-hex-case": [2, "lower"], 8 | "color-hex-length": [2, "short"], 9 | "color-no-invalid-hex": 2, 10 | "declaration-colon-space-after": [2, "always"], 11 | "declaration-colon-space-before": [2, "never"], 12 | "declaration-no-important": 2, 13 | "function-comma-space-before": [2, "never"], 14 | "function-comma-space-after": [2, "never"], 15 | "indentation": [2, 2], 16 | "number-leading-zero": [0, "never"], 17 | "number-zero-length-no-unit": 0, 18 | "value-list-comma-space-after": [2, "always"], 19 | "property-no-vendor-prefix": 0, 20 | "rule-properties-order": [ 21 | 2, 22 | [ 23 | "position", 24 | "top", 25 | "right", 26 | "bottom", 27 | "left", 28 | "z-index", 29 | "display", 30 | "float", 31 | "width", 32 | "height", 33 | "max-width", 34 | "max-height", 35 | "min-width", 36 | "min-height", 37 | "padding", 38 | "padding-top", 39 | "padding-right", 40 | "padding-bottom", 41 | "padding-left", 42 | "margin", 43 | "margin-top", 44 | "margin-right", 45 | "margin-bottom", 46 | "margin-left", 47 | "margin-collapse", 48 | "margin-top-collapse", 49 | "margin-right-collapse", 50 | "margin-bottom-collapse", 51 | "margin-left-collapse", 52 | "overflow", 53 | "overflow-x", 54 | "overflow-y", 55 | "clip", 56 | "clear", 57 | "font", 58 | "font-family", 59 | "font-size", 60 | "font-smoothing", 61 | "osx-font-smoothing", 62 | "font-style", 63 | "font-weight", 64 | "hyphens", 65 | "src", 66 | "line-height", 67 | "letter-spacing", 68 | "word-spacing", 69 | "color", 70 | "text-align", 71 | "text-decoration", 72 | "text-indent", 73 | "text-overflow", 74 | "text-rendering", 75 | "text-size-adjust", 76 | "text-shadow", 77 | "text-transform", 78 | "word-break", 79 | "word-wrap", 80 | "white-space", 81 | "vertical-align", 82 | "list-style", 83 | "list-style-type", 84 | "list-style-position", 85 | "list-style-image", 86 | "pointer-events", 87 | "cursor", 88 | "background", 89 | "background-attachment", 90 | "background-color", 91 | "background-image", 92 | "background-position", 93 | "background-repeat", 94 | "background-size", 95 | "border", 96 | "border-collapse", 97 | "border-top", 98 | "border-right", 99 | "border-bottom", 100 | "border-left", 101 | "border-color", 102 | "border-image", 103 | "border-top-color", 104 | "border-right-color", 105 | "border-bottom-color", 106 | "border-left-color", 107 | "border-spacing", 108 | "border-style", 109 | "border-top-style", 110 | "border-right-style", 111 | "border-bottom-style", 112 | "border-left-style", 113 | "border-width", 114 | "border-top-width", 115 | "border-right-width", 116 | "border-bottom-width", 117 | "border-left-width", 118 | "border-radius", 119 | "border-top-right-radius", 120 | "border-bottom-right-radius", 121 | "border-bottom-left-radius", 122 | "border-top-left-radius", 123 | "border-radius-topright", 124 | "border-radius-bottomright", 125 | "border-radius-bottomleft", 126 | "border-radius-topleft", 127 | "content", 128 | "quotes", 129 | "outline", 130 | "outline-offset", 131 | "opacity", 132 | "filter", 133 | "visibility", 134 | "size", 135 | "zoom", 136 | "transform", 137 | "box-align", 138 | "box-flex", 139 | "box-orient", 140 | "box-pack", 141 | "box-shadow", 142 | "box-sizing", 143 | "table-layout", 144 | "animation", 145 | "animation-delay", 146 | "animation-duration", 147 | "animation-iteration-count", 148 | "animation-name", 149 | "animation-play-state", 150 | "animation-timing-function", 151 | "animation-fill-mode", 152 | "transition", 153 | "transition-delay", 154 | "transition-duration", 155 | "transition-property", 156 | "transition-timing-function", 157 | "background-clip", 158 | "backface-visibility", 159 | "resize", 160 | "appearance", 161 | "user-select", 162 | "interpolation-mode", 163 | "direction", 164 | "marks", 165 | "page", 166 | "set-link-source", 167 | "unicode-bidi", 168 | "speak" 169 | ] 170 | ] 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "5.1.0" 4 | script: 5 | - npm install 6 | - npm run build 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Loading Bar 2 | 3 | [![Build Status](https://travis-ci.org/lonelyclick/react-loading-bar.svg?branch=master)](https://travis-ci.org/lonelyclick/react-loading-bar) 4 | 5 | ## Usage 6 | 7 | ``` 8 | npm install react-loading-bar --save 9 | ``` 10 | 11 | 12 | ``` 13 | import React, { Component } from 'react' 14 | import Loading from 'react-loading-bar' 15 | import 'react-loading-bar/dist/index.css' 16 | 17 | export default class LoadingExample extends Component { 18 | state = { 19 | show: false 20 | } 21 | 22 | onShow = ()=> { 23 | this.setState({ show: true }) 24 | } 25 | 26 | onHide = ()=> { 27 | this.setState({ show: false }) 28 | } 29 | 30 | render() { 31 | return ( 32 |
33 | 37 | 38 | 43 | 44 | 49 |
50 | ) 51 | } 52 | } 53 | ``` 54 | 55 | Support UMD 56 | 57 | ## Demo 58 | 59 | [React Loading Bar Example](http://lonelyclick.github.io/examples/loadingbar.html "react-loading-bar") 60 | 61 | ## Option Change 62 | 63 | ``` 64 | 70 | ``` 71 | 72 | If change set `false`, will do nothing, default `true` 73 | 74 | ## License 75 | 76 | MIT 77 | -------------------------------------------------------------------------------- /dist/index.css: -------------------------------------------------------------------------------- 1 | .Loading__loading___1m_fZ { 2 | pointer-events: none; 3 | transition: 400ms linear all; 4 | } 5 | 6 | .Loading__bar___21yOt { 7 | position: fixed; 8 | top: 0; 9 | left: 0; 10 | z-index: 10002; 11 | display: none; 12 | width: 100%; 13 | height: 2px; 14 | background: #29d; 15 | border-radius: 0 1px 1px 0; 16 | transition: width 350ms; 17 | } 18 | 19 | .Loading__peg___3Y_28 { 20 | position: absolute; 21 | top: 0; 22 | right: 0; 23 | width: 70px; 24 | height: 2px; 25 | border-radius: 50%; 26 | opacity: .45; 27 | box-shadow: #29d 1px 0 6px 1px; 28 | } 29 | 30 | .Loading__spinner___11Pm4 { 31 | position: fixed; 32 | top: 5px; 33 | left: 5px; 34 | z-index: 10002; 35 | pointer-events: none; 36 | transition: 350ms linear all; 37 | } 38 | 39 | .Loading__icon___3OOyu { 40 | width: 14px; 41 | height: 14px; 42 | border: solid #29d; 43 | border-width: 0 2px 2px 0; 44 | border-radius: 50%; 45 | -webkit-animation: Loading__loading-bar-spinner___1hKY9 400ms linear infinite; 46 | animation: Loading__loading-bar-spinner___1hKY9 400ms linear infinite; 47 | } 48 | 49 | @-webkit-keyframes Loading__loading-bar-spinner___1hKY9 { 50 | 0% { 51 | -webkit-transform: rotate(0); 52 | transform: rotate(0); 53 | } 54 | 55 | 100% { 56 | -webkit-transform: rotate(360deg); 57 | transform: rotate(360deg); 58 | } 59 | } 60 | 61 | @keyframes Loading__loading-bar-spinner___1hKY9 { 62 | 0% { 63 | -webkit-transform: rotate(0); 64 | transform: rotate(0); 65 | } 66 | 67 | 100% { 68 | -webkit-transform: rotate(360deg); 69 | transform: rotate(360deg); 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(require("react")); 4 | else if(typeof define === 'function' && define.amd) 5 | define(["react"], factory); 6 | else if(typeof exports === 'object') 7 | exports["ReactLoadingBar"] = factory(require("react")); 8 | else 9 | root["ReactLoadingBar"] = factory(root["React"]); 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_2__) { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) 20 | /******/ return installedModules[moduleId].exports; 21 | 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ exports: {}, 25 | /******/ id: moduleId, 26 | /******/ loaded: false 27 | /******/ }; 28 | 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | 32 | /******/ // Flag the module as loaded 33 | /******/ module.loaded = true; 34 | 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | 39 | 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | 46 | /******/ // __webpack_public_path__ 47 | /******/ __webpack_require__.p = ""; 48 | 49 | /******/ // Load entry module and return exports 50 | /******/ return __webpack_require__(0); 51 | /******/ }) 52 | /************************************************************************/ 53 | /******/ ([ 54 | /* 0 */ 55 | /***/ (function(module, exports, __webpack_require__) { 56 | 57 | 'use strict'; 58 | 59 | Object.defineProperty(exports, '__esModule', { 60 | value: true 61 | }); 62 | 63 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 64 | 65 | var _Loading = __webpack_require__(1); 66 | 67 | var _Loading2 = _interopRequireDefault(_Loading); 68 | 69 | exports['default'] = _Loading2['default']; 70 | module.exports = exports['default']; 71 | 72 | /***/ }), 73 | /* 1 */ 74 | /***/ (function(module, exports, __webpack_require__) { 75 | 76 | 'use strict'; 77 | 78 | Object.defineProperty(exports, '__esModule', { 79 | value: true 80 | }); 81 | 82 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 83 | 84 | var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; 85 | 86 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 87 | 88 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } 89 | 90 | function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 91 | 92 | var _react = __webpack_require__(2); 93 | 94 | var _react2 = _interopRequireDefault(_react); 95 | 96 | var _propTypes = __webpack_require__(3); 97 | 98 | var _propTypes2 = _interopRequireDefault(_propTypes); 99 | 100 | var _shallowequal = __webpack_require__(12); 101 | 102 | var _shallowequal2 = _interopRequireDefault(_shallowequal); 103 | 104 | var _LoadingCss = __webpack_require__(17); 105 | 106 | var _LoadingCss2 = _interopRequireDefault(_LoadingCss); 107 | 108 | var Loading = (function (_Component) { 109 | _inherits(Loading, _Component); 110 | 111 | function Loading() { 112 | _classCallCheck(this, Loading); 113 | 114 | _get(Object.getPrototypeOf(Loading.prototype), 'constructor', this).apply(this, arguments); 115 | 116 | this.state = { 117 | size: 0, 118 | disappearDelayHide: false, // when dispappear, first transition then display none 119 | percent: 0, 120 | appearDelayWidth: 0 // when appear, first display block then transition width 121 | }; 122 | } 123 | 124 | _createClass(Loading, [{ 125 | key: 'componentWillReceiveProps', 126 | value: function componentWillReceiveProps(nextProps) { 127 | var show = nextProps.show; 128 | var change = nextProps.change; 129 | 130 | if (!change) { 131 | return; 132 | } 133 | if (show) { 134 | this.show(); 135 | } else { 136 | this.hide(); 137 | } 138 | } 139 | }, { 140 | key: 'shouldComponentUpdate', 141 | value: function shouldComponentUpdate(nextProps, nextState) { 142 | return nextProps.change || !(0, _shallowequal2['default'])(nextState, this.state); 143 | } 144 | }, { 145 | key: 'show', 146 | value: function show() { 147 | var _this = this; 148 | 149 | var _state = this.state; 150 | var size = _state.size; 151 | var percent = _state.percent; 152 | 153 | var appearDelayWidth = size === 0; 154 | percent = this.calculatePercent(percent); 155 | 156 | this.setState({ 157 | size: ++size, 158 | appearDelayWidth: appearDelayWidth, 159 | percent: percent 160 | }); 161 | 162 | if (appearDelayWidth) { 163 | setTimeout(function () { 164 | _this.setState({ 165 | appearDelayWidth: false 166 | }); 167 | }); 168 | } 169 | } 170 | }, { 171 | key: 'hide', 172 | value: function hide() { 173 | var _this2 = this; 174 | 175 | var size = this.state.size; 176 | 177 | if (--size < 0) { 178 | this.setState({ size: 0 }); 179 | return; 180 | } 181 | 182 | this.setState({ 183 | size: 0, 184 | disappearDelayHide: true, 185 | percent: 1 186 | }); 187 | 188 | setTimeout(function () { 189 | _this2.setState({ 190 | disappearDelayHide: false, 191 | percent: 0 192 | }); 193 | }, 500); 194 | } 195 | }, { 196 | key: 'getBarStyle', 197 | value: function getBarStyle() { 198 | var _state2 = this.state; 199 | var disappearDelayHide = _state2.disappearDelayHide; 200 | var appearDelayWidth = _state2.appearDelayWidth; 201 | var percent = _state2.percent; 202 | var color = this.props.color; 203 | 204 | return { 205 | background: color, 206 | width: appearDelayWidth ? 0 : percent * 100 + '%', 207 | display: disappearDelayHide || percent > 0 ? 'block' : 'none' 208 | }; 209 | } 210 | }, { 211 | key: 'getSpinnerStyle', 212 | value: function getSpinnerStyle() { 213 | var size = this.state.size; 214 | var color = this.props.color; 215 | 216 | return { 217 | display: size > 0 ? 'block' : 'none', 218 | borderColor: color 219 | }; 220 | } 221 | }, { 222 | key: 'calculatePercent', 223 | value: function calculatePercent(percent) { 224 | percent = percent || 0; 225 | var random = 0; 226 | 227 | if (percent >= 0 && percent < 0.25) { 228 | random = (Math.random() * (5 - 3 + 1) + 10) / 100; 229 | } else if (percent >= 0.25 && percent < 0.65) { 230 | random = Math.random() * 3 / 100; 231 | } else if (percent >= 0.65 && percent < 0.9) { 232 | random = Math.random() * 2 / 100; 233 | } else if (percent >= 0.9 && percent < 0.99) { 234 | random = 0.005; 235 | } else { 236 | random = 0; 237 | } 238 | 239 | percent += random; 240 | return percent; 241 | } 242 | }, { 243 | key: 'render', 244 | value: function render() { 245 | return _react2['default'].createElement( 246 | 'div', 247 | null, 248 | _react2['default'].createElement( 249 | 'div', 250 | { className: _LoadingCss2['default'].loading }, 251 | _react2['default'].createElement( 252 | 'div', 253 | { 254 | className: _LoadingCss2['default'].bar, 255 | style: this.getBarStyle() }, 256 | _react2['default'].createElement('div', { className: _LoadingCss2['default'].peg }) 257 | ) 258 | ), 259 | this.props.showSpinner && _react2['default'].createElement( 260 | 'div', 261 | { className: _LoadingCss2['default'].spinner }, 262 | _react2['default'].createElement('div', { 263 | className: _LoadingCss2['default'].icon, 264 | style: this.getSpinnerStyle() 265 | }) 266 | ) 267 | ); 268 | } 269 | }], [{ 270 | key: 'propTypes', 271 | value: { 272 | change: _propTypes2['default'].bool, 273 | color: _propTypes2['default'].string.isRequired, 274 | show: _propTypes2['default'].bool, 275 | showSpinner: _propTypes2['default'].bool 276 | }, 277 | enumerable: true 278 | }, { 279 | key: 'defaultProps', 280 | value: { 281 | change: true, 282 | showSpinner: true 283 | }, 284 | enumerable: true 285 | }]); 286 | 287 | return Loading; 288 | })(_react.Component); 289 | 290 | exports['default'] = Loading; 291 | module.exports = exports['default']; 292 | 293 | /***/ }), 294 | /* 2 */ 295 | /***/ (function(module, exports) { 296 | 297 | module.exports = __WEBPACK_EXTERNAL_MODULE_2__; 298 | 299 | /***/ }), 300 | /* 3 */ 301 | /***/ (function(module, exports, __webpack_require__) { 302 | 303 | /* WEBPACK VAR INJECTION */(function(process) {/** 304 | * Copyright 2013-present, Facebook, Inc. 305 | * All rights reserved. 306 | * 307 | * This source code is licensed under the BSD-style license found in the 308 | * LICENSE file in the root directory of this source tree. An additional grant 309 | * of patent rights can be found in the PATENTS file in the same directory. 310 | */ 311 | 312 | if (process.env.NODE_ENV !== 'production') { 313 | var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' && 314 | Symbol.for && 315 | Symbol.for('react.element')) || 316 | 0xeac7; 317 | 318 | var isValidElement = function(object) { 319 | return typeof object === 'object' && 320 | object !== null && 321 | object.$$typeof === REACT_ELEMENT_TYPE; 322 | }; 323 | 324 | // By explicitly using `prop-types` you are opting into new development behavior. 325 | // http://fb.me/prop-types-in-prod 326 | var throwOnDirectAccess = true; 327 | module.exports = __webpack_require__(5)(isValidElement, throwOnDirectAccess); 328 | } else { 329 | // By explicitly using `prop-types` you are opting into new production behavior. 330 | // http://fb.me/prop-types-in-prod 331 | module.exports = __webpack_require__(11)(); 332 | } 333 | 334 | /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4))) 335 | 336 | /***/ }), 337 | /* 4 */ 338 | /***/ (function(module, exports) { 339 | 340 | // shim for using process in browser 341 | var process = module.exports = {}; 342 | 343 | // cached from whatever global is present so that test runners that stub it 344 | // don't break things. But we need to wrap it in a try catch in case it is 345 | // wrapped in strict mode code which doesn't define any globals. It's inside a 346 | // function because try/catches deoptimize in certain engines. 347 | 348 | var cachedSetTimeout; 349 | var cachedClearTimeout; 350 | 351 | function defaultSetTimout() { 352 | throw new Error('setTimeout has not been defined'); 353 | } 354 | function defaultClearTimeout () { 355 | throw new Error('clearTimeout has not been defined'); 356 | } 357 | (function () { 358 | try { 359 | if (typeof setTimeout === 'function') { 360 | cachedSetTimeout = setTimeout; 361 | } else { 362 | cachedSetTimeout = defaultSetTimout; 363 | } 364 | } catch (e) { 365 | cachedSetTimeout = defaultSetTimout; 366 | } 367 | try { 368 | if (typeof clearTimeout === 'function') { 369 | cachedClearTimeout = clearTimeout; 370 | } else { 371 | cachedClearTimeout = defaultClearTimeout; 372 | } 373 | } catch (e) { 374 | cachedClearTimeout = defaultClearTimeout; 375 | } 376 | } ()) 377 | function runTimeout(fun) { 378 | if (cachedSetTimeout === setTimeout) { 379 | //normal enviroments in sane situations 380 | return setTimeout(fun, 0); 381 | } 382 | // if setTimeout wasn't available but was latter defined 383 | if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) { 384 | cachedSetTimeout = setTimeout; 385 | return setTimeout(fun, 0); 386 | } 387 | try { 388 | // when when somebody has screwed with setTimeout but no I.E. maddness 389 | return cachedSetTimeout(fun, 0); 390 | } catch(e){ 391 | try { 392 | // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally 393 | return cachedSetTimeout.call(null, fun, 0); 394 | } catch(e){ 395 | // 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 396 | return cachedSetTimeout.call(this, fun, 0); 397 | } 398 | } 399 | 400 | 401 | } 402 | function runClearTimeout(marker) { 403 | if (cachedClearTimeout === clearTimeout) { 404 | //normal enviroments in sane situations 405 | return clearTimeout(marker); 406 | } 407 | // if clearTimeout wasn't available but was latter defined 408 | if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) { 409 | cachedClearTimeout = clearTimeout; 410 | return clearTimeout(marker); 411 | } 412 | try { 413 | // when when somebody has screwed with setTimeout but no I.E. maddness 414 | return cachedClearTimeout(marker); 415 | } catch (e){ 416 | try { 417 | // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally 418 | return cachedClearTimeout.call(null, marker); 419 | } catch (e){ 420 | // 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. 421 | // Some versions of I.E. have different rules for clearTimeout vs setTimeout 422 | return cachedClearTimeout.call(this, marker); 423 | } 424 | } 425 | 426 | 427 | 428 | } 429 | var queue = []; 430 | var draining = false; 431 | var currentQueue; 432 | var queueIndex = -1; 433 | 434 | function cleanUpNextTick() { 435 | if (!draining || !currentQueue) { 436 | return; 437 | } 438 | draining = false; 439 | if (currentQueue.length) { 440 | queue = currentQueue.concat(queue); 441 | } else { 442 | queueIndex = -1; 443 | } 444 | if (queue.length) { 445 | drainQueue(); 446 | } 447 | } 448 | 449 | function drainQueue() { 450 | if (draining) { 451 | return; 452 | } 453 | var timeout = runTimeout(cleanUpNextTick); 454 | draining = true; 455 | 456 | var len = queue.length; 457 | while(len) { 458 | currentQueue = queue; 459 | queue = []; 460 | while (++queueIndex < len) { 461 | if (currentQueue) { 462 | currentQueue[queueIndex].run(); 463 | } 464 | } 465 | queueIndex = -1; 466 | len = queue.length; 467 | } 468 | currentQueue = null; 469 | draining = false; 470 | runClearTimeout(timeout); 471 | } 472 | 473 | process.nextTick = function (fun) { 474 | var args = new Array(arguments.length - 1); 475 | if (arguments.length > 1) { 476 | for (var i = 1; i < arguments.length; i++) { 477 | args[i - 1] = arguments[i]; 478 | } 479 | } 480 | queue.push(new Item(fun, args)); 481 | if (queue.length === 1 && !draining) { 482 | runTimeout(drainQueue); 483 | } 484 | }; 485 | 486 | // v8 likes predictible objects 487 | function Item(fun, array) { 488 | this.fun = fun; 489 | this.array = array; 490 | } 491 | Item.prototype.run = function () { 492 | this.fun.apply(null, this.array); 493 | }; 494 | process.title = 'browser'; 495 | process.browser = true; 496 | process.env = {}; 497 | process.argv = []; 498 | process.version = ''; // empty string to avoid regexp issues 499 | process.versions = {}; 500 | 501 | function noop() {} 502 | 503 | process.on = noop; 504 | process.addListener = noop; 505 | process.once = noop; 506 | process.off = noop; 507 | process.removeListener = noop; 508 | process.removeAllListeners = noop; 509 | process.emit = noop; 510 | 511 | process.binding = function (name) { 512 | throw new Error('process.binding is not supported'); 513 | }; 514 | 515 | process.cwd = function () { return '/' }; 516 | process.chdir = function (dir) { 517 | throw new Error('process.chdir is not supported'); 518 | }; 519 | process.umask = function() { return 0; }; 520 | 521 | 522 | /***/ }), 523 | /* 5 */ 524 | /***/ (function(module, exports, __webpack_require__) { 525 | 526 | /* WEBPACK VAR INJECTION */(function(process) {/** 527 | * Copyright 2013-present, Facebook, Inc. 528 | * All rights reserved. 529 | * 530 | * This source code is licensed under the BSD-style license found in the 531 | * LICENSE file in the root directory of this source tree. An additional grant 532 | * of patent rights can be found in the PATENTS file in the same directory. 533 | */ 534 | 535 | 'use strict'; 536 | 537 | var emptyFunction = __webpack_require__(6); 538 | var invariant = __webpack_require__(7); 539 | var warning = __webpack_require__(8); 540 | 541 | var ReactPropTypesSecret = __webpack_require__(9); 542 | var checkPropTypes = __webpack_require__(10); 543 | 544 | module.exports = function(isValidElement, throwOnDirectAccess) { 545 | /* global Symbol */ 546 | var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator; 547 | var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec. 548 | 549 | /** 550 | * Returns the iterator method function contained on the iterable object. 551 | * 552 | * Be sure to invoke the function with the iterable as context: 553 | * 554 | * var iteratorFn = getIteratorFn(myIterable); 555 | * if (iteratorFn) { 556 | * var iterator = iteratorFn.call(myIterable); 557 | * ... 558 | * } 559 | * 560 | * @param {?object} maybeIterable 561 | * @return {?function} 562 | */ 563 | function getIteratorFn(maybeIterable) { 564 | var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]); 565 | if (typeof iteratorFn === 'function') { 566 | return iteratorFn; 567 | } 568 | } 569 | 570 | /** 571 | * Collection of methods that allow declaration and validation of props that are 572 | * supplied to React components. Example usage: 573 | * 574 | * var Props = require('ReactPropTypes'); 575 | * var MyArticle = React.createClass({ 576 | * propTypes: { 577 | * // An optional string prop named "description". 578 | * description: Props.string, 579 | * 580 | * // A required enum prop named "category". 581 | * category: Props.oneOf(['News','Photos']).isRequired, 582 | * 583 | * // A prop named "dialog" that requires an instance of Dialog. 584 | * dialog: Props.instanceOf(Dialog).isRequired 585 | * }, 586 | * render: function() { ... } 587 | * }); 588 | * 589 | * A more formal specification of how these methods are used: 590 | * 591 | * type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...) 592 | * decl := ReactPropTypes.{type}(.isRequired)? 593 | * 594 | * Each and every declaration produces a function with the same signature. This 595 | * allows the creation of custom validation functions. For example: 596 | * 597 | * var MyLink = React.createClass({ 598 | * propTypes: { 599 | * // An optional string or URI prop named "href". 600 | * href: function(props, propName, componentName) { 601 | * var propValue = props[propName]; 602 | * if (propValue != null && typeof propValue !== 'string' && 603 | * !(propValue instanceof URI)) { 604 | * return new Error( 605 | * 'Expected a string or an URI for ' + propName + ' in ' + 606 | * componentName 607 | * ); 608 | * } 609 | * } 610 | * }, 611 | * render: function() {...} 612 | * }); 613 | * 614 | * @internal 615 | */ 616 | 617 | var ANONYMOUS = '<>'; 618 | 619 | // Important! 620 | // Keep this list in sync with production version in `./factoryWithThrowingShims.js`. 621 | var ReactPropTypes = { 622 | array: createPrimitiveTypeChecker('array'), 623 | bool: createPrimitiveTypeChecker('boolean'), 624 | func: createPrimitiveTypeChecker('function'), 625 | number: createPrimitiveTypeChecker('number'), 626 | object: createPrimitiveTypeChecker('object'), 627 | string: createPrimitiveTypeChecker('string'), 628 | symbol: createPrimitiveTypeChecker('symbol'), 629 | 630 | any: createAnyTypeChecker(), 631 | arrayOf: createArrayOfTypeChecker, 632 | element: createElementTypeChecker(), 633 | instanceOf: createInstanceTypeChecker, 634 | node: createNodeChecker(), 635 | objectOf: createObjectOfTypeChecker, 636 | oneOf: createEnumTypeChecker, 637 | oneOfType: createUnionTypeChecker, 638 | shape: createShapeTypeChecker 639 | }; 640 | 641 | /** 642 | * inlined Object.is polyfill to avoid requiring consumers ship their own 643 | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is 644 | */ 645 | /*eslint-disable no-self-compare*/ 646 | function is(x, y) { 647 | // SameValue algorithm 648 | if (x === y) { 649 | // Steps 1-5, 7-10 650 | // Steps 6.b-6.e: +0 != -0 651 | return x !== 0 || 1 / x === 1 / y; 652 | } else { 653 | // Step 6.a: NaN == NaN 654 | return x !== x && y !== y; 655 | } 656 | } 657 | /*eslint-enable no-self-compare*/ 658 | 659 | /** 660 | * We use an Error-like object for backward compatibility as people may call 661 | * PropTypes directly and inspect their output. However, we don't use real 662 | * Errors anymore. We don't inspect their stack anyway, and creating them 663 | * is prohibitively expensive if they are created too often, such as what 664 | * happens in oneOfType() for any type before the one that matched. 665 | */ 666 | function PropTypeError(message) { 667 | this.message = message; 668 | this.stack = ''; 669 | } 670 | // Make `instanceof Error` still work for returned errors. 671 | PropTypeError.prototype = Error.prototype; 672 | 673 | function createChainableTypeChecker(validate) { 674 | if (process.env.NODE_ENV !== 'production') { 675 | var manualPropTypeCallCache = {}; 676 | var manualPropTypeWarningCount = 0; 677 | } 678 | function checkType(isRequired, props, propName, componentName, location, propFullName, secret) { 679 | componentName = componentName || ANONYMOUS; 680 | propFullName = propFullName || propName; 681 | 682 | if (secret !== ReactPropTypesSecret) { 683 | if (throwOnDirectAccess) { 684 | // New behavior only for users of `prop-types` package 685 | invariant( 686 | false, 687 | 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 688 | 'Use `PropTypes.checkPropTypes()` to call them. ' + 689 | 'Read more at http://fb.me/use-check-prop-types' 690 | ); 691 | } else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') { 692 | // Old behavior for people using React.PropTypes 693 | var cacheKey = componentName + ':' + propName; 694 | if ( 695 | !manualPropTypeCallCache[cacheKey] && 696 | // Avoid spamming the console because they are often not actionable except for lib authors 697 | manualPropTypeWarningCount < 3 698 | ) { 699 | warning( 700 | false, 701 | 'You are manually calling a React.PropTypes validation ' + 702 | 'function for the `%s` prop on `%s`. This is deprecated ' + 703 | 'and will throw in the standalone `prop-types` package. ' + 704 | 'You may be seeing this warning due to a third-party PropTypes ' + 705 | 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.', 706 | propFullName, 707 | componentName 708 | ); 709 | manualPropTypeCallCache[cacheKey] = true; 710 | manualPropTypeWarningCount++; 711 | } 712 | } 713 | } 714 | if (props[propName] == null) { 715 | if (isRequired) { 716 | if (props[propName] === null) { 717 | return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.')); 718 | } 719 | return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.')); 720 | } 721 | return null; 722 | } else { 723 | return validate(props, propName, componentName, location, propFullName); 724 | } 725 | } 726 | 727 | var chainedCheckType = checkType.bind(null, false); 728 | chainedCheckType.isRequired = checkType.bind(null, true); 729 | 730 | return chainedCheckType; 731 | } 732 | 733 | function createPrimitiveTypeChecker(expectedType) { 734 | function validate(props, propName, componentName, location, propFullName, secret) { 735 | var propValue = props[propName]; 736 | var propType = getPropType(propValue); 737 | if (propType !== expectedType) { 738 | // `propValue` being instance of, say, date/regexp, pass the 'object' 739 | // check, but we can offer a more precise error message here rather than 740 | // 'of type `object`'. 741 | var preciseType = getPreciseType(propValue); 742 | 743 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.')); 744 | } 745 | return null; 746 | } 747 | return createChainableTypeChecker(validate); 748 | } 749 | 750 | function createAnyTypeChecker() { 751 | return createChainableTypeChecker(emptyFunction.thatReturnsNull); 752 | } 753 | 754 | function createArrayOfTypeChecker(typeChecker) { 755 | function validate(props, propName, componentName, location, propFullName) { 756 | if (typeof typeChecker !== 'function') { 757 | return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.'); 758 | } 759 | var propValue = props[propName]; 760 | if (!Array.isArray(propValue)) { 761 | var propType = getPropType(propValue); 762 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.')); 763 | } 764 | for (var i = 0; i < propValue.length; i++) { 765 | var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret); 766 | if (error instanceof Error) { 767 | return error; 768 | } 769 | } 770 | return null; 771 | } 772 | return createChainableTypeChecker(validate); 773 | } 774 | 775 | function createElementTypeChecker() { 776 | function validate(props, propName, componentName, location, propFullName) { 777 | var propValue = props[propName]; 778 | if (!isValidElement(propValue)) { 779 | var propType = getPropType(propValue); 780 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.')); 781 | } 782 | return null; 783 | } 784 | return createChainableTypeChecker(validate); 785 | } 786 | 787 | function createInstanceTypeChecker(expectedClass) { 788 | function validate(props, propName, componentName, location, propFullName) { 789 | if (!(props[propName] instanceof expectedClass)) { 790 | var expectedClassName = expectedClass.name || ANONYMOUS; 791 | var actualClassName = getClassName(props[propName]); 792 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.')); 793 | } 794 | return null; 795 | } 796 | return createChainableTypeChecker(validate); 797 | } 798 | 799 | function createEnumTypeChecker(expectedValues) { 800 | if (!Array.isArray(expectedValues)) { 801 | process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid argument supplied to oneOf, expected an instance of array.') : void 0; 802 | return emptyFunction.thatReturnsNull; 803 | } 804 | 805 | function validate(props, propName, componentName, location, propFullName) { 806 | var propValue = props[propName]; 807 | for (var i = 0; i < expectedValues.length; i++) { 808 | if (is(propValue, expectedValues[i])) { 809 | return null; 810 | } 811 | } 812 | 813 | var valuesString = JSON.stringify(expectedValues); 814 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.')); 815 | } 816 | return createChainableTypeChecker(validate); 817 | } 818 | 819 | function createObjectOfTypeChecker(typeChecker) { 820 | function validate(props, propName, componentName, location, propFullName) { 821 | if (typeof typeChecker !== 'function') { 822 | return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.'); 823 | } 824 | var propValue = props[propName]; 825 | var propType = getPropType(propValue); 826 | if (propType !== 'object') { 827 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.')); 828 | } 829 | for (var key in propValue) { 830 | if (propValue.hasOwnProperty(key)) { 831 | var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret); 832 | if (error instanceof Error) { 833 | return error; 834 | } 835 | } 836 | } 837 | return null; 838 | } 839 | return createChainableTypeChecker(validate); 840 | } 841 | 842 | function createUnionTypeChecker(arrayOfTypeCheckers) { 843 | if (!Array.isArray(arrayOfTypeCheckers)) { 844 | process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid argument supplied to oneOfType, expected an instance of array.') : void 0; 845 | return emptyFunction.thatReturnsNull; 846 | } 847 | 848 | for (var i = 0; i < arrayOfTypeCheckers.length; i++) { 849 | var checker = arrayOfTypeCheckers[i]; 850 | if (typeof checker !== 'function') { 851 | warning( 852 | false, 853 | 'Invalid argument supplid to oneOfType. Expected an array of check functions, but ' + 854 | 'received %s at index %s.', 855 | getPostfixForTypeWarning(checker), 856 | i 857 | ); 858 | return emptyFunction.thatReturnsNull; 859 | } 860 | } 861 | 862 | function validate(props, propName, componentName, location, propFullName) { 863 | for (var i = 0; i < arrayOfTypeCheckers.length; i++) { 864 | var checker = arrayOfTypeCheckers[i]; 865 | if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret) == null) { 866 | return null; 867 | } 868 | } 869 | 870 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.')); 871 | } 872 | return createChainableTypeChecker(validate); 873 | } 874 | 875 | function createNodeChecker() { 876 | function validate(props, propName, componentName, location, propFullName) { 877 | if (!isNode(props[propName])) { 878 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.')); 879 | } 880 | return null; 881 | } 882 | return createChainableTypeChecker(validate); 883 | } 884 | 885 | function createShapeTypeChecker(shapeTypes) { 886 | function validate(props, propName, componentName, location, propFullName) { 887 | var propValue = props[propName]; 888 | var propType = getPropType(propValue); 889 | if (propType !== 'object') { 890 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.')); 891 | } 892 | for (var key in shapeTypes) { 893 | var checker = shapeTypes[key]; 894 | if (!checker) { 895 | continue; 896 | } 897 | var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret); 898 | if (error) { 899 | return error; 900 | } 901 | } 902 | return null; 903 | } 904 | return createChainableTypeChecker(validate); 905 | } 906 | 907 | function isNode(propValue) { 908 | switch (typeof propValue) { 909 | case 'number': 910 | case 'string': 911 | case 'undefined': 912 | return true; 913 | case 'boolean': 914 | return !propValue; 915 | case 'object': 916 | if (Array.isArray(propValue)) { 917 | return propValue.every(isNode); 918 | } 919 | if (propValue === null || isValidElement(propValue)) { 920 | return true; 921 | } 922 | 923 | var iteratorFn = getIteratorFn(propValue); 924 | if (iteratorFn) { 925 | var iterator = iteratorFn.call(propValue); 926 | var step; 927 | if (iteratorFn !== propValue.entries) { 928 | while (!(step = iterator.next()).done) { 929 | if (!isNode(step.value)) { 930 | return false; 931 | } 932 | } 933 | } else { 934 | // Iterator will provide entry [k,v] tuples rather than values. 935 | while (!(step = iterator.next()).done) { 936 | var entry = step.value; 937 | if (entry) { 938 | if (!isNode(entry[1])) { 939 | return false; 940 | } 941 | } 942 | } 943 | } 944 | } else { 945 | return false; 946 | } 947 | 948 | return true; 949 | default: 950 | return false; 951 | } 952 | } 953 | 954 | function isSymbol(propType, propValue) { 955 | // Native Symbol. 956 | if (propType === 'symbol') { 957 | return true; 958 | } 959 | 960 | // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol' 961 | if (propValue['@@toStringTag'] === 'Symbol') { 962 | return true; 963 | } 964 | 965 | // Fallback for non-spec compliant Symbols which are polyfilled. 966 | if (typeof Symbol === 'function' && propValue instanceof Symbol) { 967 | return true; 968 | } 969 | 970 | return false; 971 | } 972 | 973 | // Equivalent of `typeof` but with special handling for array and regexp. 974 | function getPropType(propValue) { 975 | var propType = typeof propValue; 976 | if (Array.isArray(propValue)) { 977 | return 'array'; 978 | } 979 | if (propValue instanceof RegExp) { 980 | // Old webkits (at least until Android 4.0) return 'function' rather than 981 | // 'object' for typeof a RegExp. We'll normalize this here so that /bla/ 982 | // passes PropTypes.object. 983 | return 'object'; 984 | } 985 | if (isSymbol(propType, propValue)) { 986 | return 'symbol'; 987 | } 988 | return propType; 989 | } 990 | 991 | // This handles more types than `getPropType`. Only used for error messages. 992 | // See `createPrimitiveTypeChecker`. 993 | function getPreciseType(propValue) { 994 | if (typeof propValue === 'undefined' || propValue === null) { 995 | return '' + propValue; 996 | } 997 | var propType = getPropType(propValue); 998 | if (propType === 'object') { 999 | if (propValue instanceof Date) { 1000 | return 'date'; 1001 | } else if (propValue instanceof RegExp) { 1002 | return 'regexp'; 1003 | } 1004 | } 1005 | return propType; 1006 | } 1007 | 1008 | // Returns a string that is postfixed to a warning about an invalid type. 1009 | // For example, "undefined" or "of type array" 1010 | function getPostfixForTypeWarning(value) { 1011 | var type = getPreciseType(value); 1012 | switch (type) { 1013 | case 'array': 1014 | case 'object': 1015 | return 'an ' + type; 1016 | case 'boolean': 1017 | case 'date': 1018 | case 'regexp': 1019 | return 'a ' + type; 1020 | default: 1021 | return type; 1022 | } 1023 | } 1024 | 1025 | // Returns class name of the object, if any. 1026 | function getClassName(propValue) { 1027 | if (!propValue.constructor || !propValue.constructor.name) { 1028 | return ANONYMOUS; 1029 | } 1030 | return propValue.constructor.name; 1031 | } 1032 | 1033 | ReactPropTypes.checkPropTypes = checkPropTypes; 1034 | ReactPropTypes.PropTypes = ReactPropTypes; 1035 | 1036 | return ReactPropTypes; 1037 | }; 1038 | 1039 | /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4))) 1040 | 1041 | /***/ }), 1042 | /* 6 */ 1043 | /***/ (function(module, exports) { 1044 | 1045 | "use strict"; 1046 | 1047 | /** 1048 | * Copyright (c) 2013-present, Facebook, Inc. 1049 | * All rights reserved. 1050 | * 1051 | * This source code is licensed under the BSD-style license found in the 1052 | * LICENSE file in the root directory of this source tree. An additional grant 1053 | * of patent rights can be found in the PATENTS file in the same directory. 1054 | * 1055 | * 1056 | */ 1057 | 1058 | function makeEmptyFunction(arg) { 1059 | return function () { 1060 | return arg; 1061 | }; 1062 | } 1063 | 1064 | /** 1065 | * This function accepts and discards inputs; it has no side effects. This is 1066 | * primarily useful idiomatically for overridable function endpoints which 1067 | * always need to be callable, since JS lacks a null-call idiom ala Cocoa. 1068 | */ 1069 | var emptyFunction = function emptyFunction() {}; 1070 | 1071 | emptyFunction.thatReturns = makeEmptyFunction; 1072 | emptyFunction.thatReturnsFalse = makeEmptyFunction(false); 1073 | emptyFunction.thatReturnsTrue = makeEmptyFunction(true); 1074 | emptyFunction.thatReturnsNull = makeEmptyFunction(null); 1075 | emptyFunction.thatReturnsThis = function () { 1076 | return this; 1077 | }; 1078 | emptyFunction.thatReturnsArgument = function (arg) { 1079 | return arg; 1080 | }; 1081 | 1082 | module.exports = emptyFunction; 1083 | 1084 | /***/ }), 1085 | /* 7 */ 1086 | /***/ (function(module, exports, __webpack_require__) { 1087 | 1088 | /* WEBPACK VAR INJECTION */(function(process) {/** 1089 | * Copyright (c) 2013-present, Facebook, Inc. 1090 | * All rights reserved. 1091 | * 1092 | * This source code is licensed under the BSD-style license found in the 1093 | * LICENSE file in the root directory of this source tree. An additional grant 1094 | * of patent rights can be found in the PATENTS file in the same directory. 1095 | * 1096 | */ 1097 | 1098 | 'use strict'; 1099 | 1100 | /** 1101 | * Use invariant() to assert state which your program assumes to be true. 1102 | * 1103 | * Provide sprintf-style format (only %s is supported) and arguments 1104 | * to provide information about what broke and what you were 1105 | * expecting. 1106 | * 1107 | * The invariant message will be stripped in production, but the invariant 1108 | * will remain to ensure logic does not differ in production. 1109 | */ 1110 | 1111 | var validateFormat = function validateFormat(format) {}; 1112 | 1113 | if (process.env.NODE_ENV !== 'production') { 1114 | validateFormat = function validateFormat(format) { 1115 | if (format === undefined) { 1116 | throw new Error('invariant requires an error message argument'); 1117 | } 1118 | }; 1119 | } 1120 | 1121 | function invariant(condition, format, a, b, c, d, e, f) { 1122 | validateFormat(format); 1123 | 1124 | if (!condition) { 1125 | var error; 1126 | if (format === undefined) { 1127 | error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.'); 1128 | } else { 1129 | var args = [a, b, c, d, e, f]; 1130 | var argIndex = 0; 1131 | error = new Error(format.replace(/%s/g, function () { 1132 | return args[argIndex++]; 1133 | })); 1134 | error.name = 'Invariant Violation'; 1135 | } 1136 | 1137 | error.framesToPop = 1; // we don't care about invariant's own frame 1138 | throw error; 1139 | } 1140 | } 1141 | 1142 | module.exports = invariant; 1143 | /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4))) 1144 | 1145 | /***/ }), 1146 | /* 8 */ 1147 | /***/ (function(module, exports, __webpack_require__) { 1148 | 1149 | /* WEBPACK VAR INJECTION */(function(process) {/** 1150 | * Copyright 2014-2015, Facebook, Inc. 1151 | * All rights reserved. 1152 | * 1153 | * This source code is licensed under the BSD-style license found in the 1154 | * LICENSE file in the root directory of this source tree. An additional grant 1155 | * of patent rights can be found in the PATENTS file in the same directory. 1156 | * 1157 | */ 1158 | 1159 | 'use strict'; 1160 | 1161 | var emptyFunction = __webpack_require__(6); 1162 | 1163 | /** 1164 | * Similar to invariant but only logs a warning if the condition is not met. 1165 | * This can be used to log issues in development environments in critical 1166 | * paths. Removing the logging code for production environments will keep the 1167 | * same logic and follow the same code paths. 1168 | */ 1169 | 1170 | var warning = emptyFunction; 1171 | 1172 | if (process.env.NODE_ENV !== 'production') { 1173 | var printWarning = function printWarning(format) { 1174 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 1175 | args[_key - 1] = arguments[_key]; 1176 | } 1177 | 1178 | var argIndex = 0; 1179 | var message = 'Warning: ' + format.replace(/%s/g, function () { 1180 | return args[argIndex++]; 1181 | }); 1182 | if (typeof console !== 'undefined') { 1183 | console.error(message); 1184 | } 1185 | try { 1186 | // --- Welcome to debugging React --- 1187 | // This error was thrown as a convenience so that you can use this stack 1188 | // to find the callsite that caused this warning to fire. 1189 | throw new Error(message); 1190 | } catch (x) {} 1191 | }; 1192 | 1193 | warning = function warning(condition, format) { 1194 | if (format === undefined) { 1195 | throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); 1196 | } 1197 | 1198 | if (format.indexOf('Failed Composite propType: ') === 0) { 1199 | return; // Ignore CompositeComponent proptype check. 1200 | } 1201 | 1202 | if (!condition) { 1203 | for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { 1204 | args[_key2 - 2] = arguments[_key2]; 1205 | } 1206 | 1207 | printWarning.apply(undefined, [format].concat(args)); 1208 | } 1209 | }; 1210 | } 1211 | 1212 | module.exports = warning; 1213 | /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4))) 1214 | 1215 | /***/ }), 1216 | /* 9 */ 1217 | /***/ (function(module, exports) { 1218 | 1219 | /** 1220 | * Copyright 2013-present, Facebook, Inc. 1221 | * All rights reserved. 1222 | * 1223 | * This source code is licensed under the BSD-style license found in the 1224 | * LICENSE file in the root directory of this source tree. An additional grant 1225 | * of patent rights can be found in the PATENTS file in the same directory. 1226 | */ 1227 | 1228 | 'use strict'; 1229 | 1230 | var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; 1231 | 1232 | module.exports = ReactPropTypesSecret; 1233 | 1234 | 1235 | /***/ }), 1236 | /* 10 */ 1237 | /***/ (function(module, exports, __webpack_require__) { 1238 | 1239 | /* WEBPACK VAR INJECTION */(function(process) {/** 1240 | * Copyright 2013-present, Facebook, Inc. 1241 | * All rights reserved. 1242 | * 1243 | * This source code is licensed under the BSD-style license found in the 1244 | * LICENSE file in the root directory of this source tree. An additional grant 1245 | * of patent rights can be found in the PATENTS file in the same directory. 1246 | */ 1247 | 1248 | 'use strict'; 1249 | 1250 | if (process.env.NODE_ENV !== 'production') { 1251 | var invariant = __webpack_require__(7); 1252 | var warning = __webpack_require__(8); 1253 | var ReactPropTypesSecret = __webpack_require__(9); 1254 | var loggedTypeFailures = {}; 1255 | } 1256 | 1257 | /** 1258 | * Assert that the values match with the type specs. 1259 | * Error messages are memorized and will only be shown once. 1260 | * 1261 | * @param {object} typeSpecs Map of name to a ReactPropType 1262 | * @param {object} values Runtime values that need to be type-checked 1263 | * @param {string} location e.g. "prop", "context", "child context" 1264 | * @param {string} componentName Name of the component for error messages. 1265 | * @param {?Function} getStack Returns the component stack. 1266 | * @private 1267 | */ 1268 | function checkPropTypes(typeSpecs, values, location, componentName, getStack) { 1269 | if (process.env.NODE_ENV !== 'production') { 1270 | for (var typeSpecName in typeSpecs) { 1271 | if (typeSpecs.hasOwnProperty(typeSpecName)) { 1272 | var error; 1273 | // Prop type validation may throw. In case they do, we don't want to 1274 | // fail the render phase where it didn't fail before. So we log it. 1275 | // After these have been cleaned up, we'll let them throw. 1276 | try { 1277 | // This is intentionally an invariant that gets caught. It's the same 1278 | // behavior as without this statement except with a better message. 1279 | invariant(typeof typeSpecs[typeSpecName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'React.PropTypes.', componentName || 'React class', location, typeSpecName); 1280 | error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret); 1281 | } catch (ex) { 1282 | error = ex; 1283 | } 1284 | warning(!error || error instanceof Error, '%s: type specification of %s `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error); 1285 | if (error instanceof Error && !(error.message in loggedTypeFailures)) { 1286 | // Only monitor this failure once because there tends to be a lot of the 1287 | // same error. 1288 | loggedTypeFailures[error.message] = true; 1289 | 1290 | var stack = getStack ? getStack() : ''; 1291 | 1292 | warning(false, 'Failed %s type: %s%s', location, error.message, stack != null ? stack : ''); 1293 | } 1294 | } 1295 | } 1296 | } 1297 | } 1298 | 1299 | module.exports = checkPropTypes; 1300 | 1301 | /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4))) 1302 | 1303 | /***/ }), 1304 | /* 11 */ 1305 | /***/ (function(module, exports, __webpack_require__) { 1306 | 1307 | /** 1308 | * Copyright 2013-present, Facebook, Inc. 1309 | * All rights reserved. 1310 | * 1311 | * This source code is licensed under the BSD-style license found in the 1312 | * LICENSE file in the root directory of this source tree. An additional grant 1313 | * of patent rights can be found in the PATENTS file in the same directory. 1314 | */ 1315 | 1316 | 'use strict'; 1317 | 1318 | var emptyFunction = __webpack_require__(6); 1319 | var invariant = __webpack_require__(7); 1320 | var ReactPropTypesSecret = __webpack_require__(9); 1321 | 1322 | module.exports = function() { 1323 | function shim(props, propName, componentName, location, propFullName, secret) { 1324 | if (secret === ReactPropTypesSecret) { 1325 | // It is still safe when called from React. 1326 | return; 1327 | } 1328 | invariant( 1329 | false, 1330 | 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 1331 | 'Use PropTypes.checkPropTypes() to call them. ' + 1332 | 'Read more at http://fb.me/use-check-prop-types' 1333 | ); 1334 | }; 1335 | shim.isRequired = shim; 1336 | function getShim() { 1337 | return shim; 1338 | }; 1339 | // Important! 1340 | // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`. 1341 | var ReactPropTypes = { 1342 | array: shim, 1343 | bool: shim, 1344 | func: shim, 1345 | number: shim, 1346 | object: shim, 1347 | string: shim, 1348 | symbol: shim, 1349 | 1350 | any: shim, 1351 | arrayOf: getShim, 1352 | element: shim, 1353 | instanceOf: getShim, 1354 | node: shim, 1355 | objectOf: getShim, 1356 | oneOf: getShim, 1357 | oneOfType: getShim, 1358 | shape: getShim 1359 | }; 1360 | 1361 | ReactPropTypes.checkPropTypes = emptyFunction; 1362 | ReactPropTypes.PropTypes = ReactPropTypes; 1363 | 1364 | return ReactPropTypes; 1365 | }; 1366 | 1367 | 1368 | /***/ }), 1369 | /* 12 */ 1370 | /***/ (function(module, exports, __webpack_require__) { 1371 | 1372 | 'use strict'; 1373 | 1374 | var fetchKeys = __webpack_require__(13); 1375 | 1376 | module.exports = function shallowEqual(objA, objB, compare, compareContext) { 1377 | 1378 | var ret = compare ? compare.call(compareContext, objA, objB) : void 0; 1379 | 1380 | if (ret !== void 0) { 1381 | return !!ret; 1382 | } 1383 | 1384 | if (objA === objB) { 1385 | return true; 1386 | } 1387 | 1388 | if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) { 1389 | return false; 1390 | } 1391 | 1392 | var keysA = fetchKeys(objA); 1393 | var keysB = fetchKeys(objB); 1394 | 1395 | var len = keysA.length; 1396 | if (len !== keysB.length) { 1397 | return false; 1398 | } 1399 | 1400 | compareContext = compareContext || null; 1401 | 1402 | // Test for A's keys different from B. 1403 | var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB); 1404 | for (var i = 0; i < len; i++) { 1405 | var key = keysA[i]; 1406 | if (!bHasOwnProperty(key)) { 1407 | return false; 1408 | } 1409 | var valueA = objA[key]; 1410 | var valueB = objB[key]; 1411 | 1412 | var _ret = compare ? compare.call(compareContext, valueA, valueB, key) : void 0; 1413 | if (_ret === false || _ret === void 0 && valueA !== valueB) { 1414 | return false; 1415 | } 1416 | } 1417 | 1418 | return true; 1419 | }; 1420 | 1421 | /***/ }), 1422 | /* 13 */ 1423 | /***/ (function(module, exports, __webpack_require__) { 1424 | 1425 | /** 1426 | * lodash 3.1.2 (Custom Build) 1427 | * Build: `lodash modern modularize exports="npm" -o ./` 1428 | * Copyright 2012-2015 The Dojo Foundation 1429 | * Based on Underscore.js 1.8.3 1430 | * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors 1431 | * Available under MIT license 1432 | */ 1433 | var getNative = __webpack_require__(14), 1434 | isArguments = __webpack_require__(15), 1435 | isArray = __webpack_require__(16); 1436 | 1437 | /** Used to detect unsigned integer values. */ 1438 | var reIsUint = /^\d+$/; 1439 | 1440 | /** Used for native method references. */ 1441 | var objectProto = Object.prototype; 1442 | 1443 | /** Used to check objects for own properties. */ 1444 | var hasOwnProperty = objectProto.hasOwnProperty; 1445 | 1446 | /* Native method references for those with the same name as other `lodash` methods. */ 1447 | var nativeKeys = getNative(Object, 'keys'); 1448 | 1449 | /** 1450 | * Used as the [maximum length](http://ecma-international.org/ecma-262/6.0/#sec-number.max_safe_integer) 1451 | * of an array-like value. 1452 | */ 1453 | var MAX_SAFE_INTEGER = 9007199254740991; 1454 | 1455 | /** 1456 | * The base implementation of `_.property` without support for deep paths. 1457 | * 1458 | * @private 1459 | * @param {string} key The key of the property to get. 1460 | * @returns {Function} Returns the new function. 1461 | */ 1462 | function baseProperty(key) { 1463 | return function(object) { 1464 | return object == null ? undefined : object[key]; 1465 | }; 1466 | } 1467 | 1468 | /** 1469 | * Gets the "length" property value of `object`. 1470 | * 1471 | * **Note:** This function is used to avoid a [JIT bug](https://bugs.webkit.org/show_bug.cgi?id=142792) 1472 | * that affects Safari on at least iOS 8.1-8.3 ARM64. 1473 | * 1474 | * @private 1475 | * @param {Object} object The object to query. 1476 | * @returns {*} Returns the "length" value. 1477 | */ 1478 | var getLength = baseProperty('length'); 1479 | 1480 | /** 1481 | * Checks if `value` is array-like. 1482 | * 1483 | * @private 1484 | * @param {*} value The value to check. 1485 | * @returns {boolean} Returns `true` if `value` is array-like, else `false`. 1486 | */ 1487 | function isArrayLike(value) { 1488 | return value != null && isLength(getLength(value)); 1489 | } 1490 | 1491 | /** 1492 | * Checks if `value` is a valid array-like index. 1493 | * 1494 | * @private 1495 | * @param {*} value The value to check. 1496 | * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index. 1497 | * @returns {boolean} Returns `true` if `value` is a valid index, else `false`. 1498 | */ 1499 | function isIndex(value, length) { 1500 | value = (typeof value == 'number' || reIsUint.test(value)) ? +value : -1; 1501 | length = length == null ? MAX_SAFE_INTEGER : length; 1502 | return value > -1 && value % 1 == 0 && value < length; 1503 | } 1504 | 1505 | /** 1506 | * Checks if `value` is a valid array-like length. 1507 | * 1508 | * **Note:** This function is based on [`ToLength`](http://ecma-international.org/ecma-262/6.0/#sec-tolength). 1509 | * 1510 | * @private 1511 | * @param {*} value The value to check. 1512 | * @returns {boolean} Returns `true` if `value` is a valid length, else `false`. 1513 | */ 1514 | function isLength(value) { 1515 | return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER; 1516 | } 1517 | 1518 | /** 1519 | * A fallback implementation of `Object.keys` which creates an array of the 1520 | * own enumerable property names of `object`. 1521 | * 1522 | * @private 1523 | * @param {Object} object The object to query. 1524 | * @returns {Array} Returns the array of property names. 1525 | */ 1526 | function shimKeys(object) { 1527 | var props = keysIn(object), 1528 | propsLength = props.length, 1529 | length = propsLength && object.length; 1530 | 1531 | var allowIndexes = !!length && isLength(length) && 1532 | (isArray(object) || isArguments(object)); 1533 | 1534 | var index = -1, 1535 | result = []; 1536 | 1537 | while (++index < propsLength) { 1538 | var key = props[index]; 1539 | if ((allowIndexes && isIndex(key, length)) || hasOwnProperty.call(object, key)) { 1540 | result.push(key); 1541 | } 1542 | } 1543 | return result; 1544 | } 1545 | 1546 | /** 1547 | * Checks if `value` is the [language type](https://es5.github.io/#x8) of `Object`. 1548 | * (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) 1549 | * 1550 | * @static 1551 | * @memberOf _ 1552 | * @category Lang 1553 | * @param {*} value The value to check. 1554 | * @returns {boolean} Returns `true` if `value` is an object, else `false`. 1555 | * @example 1556 | * 1557 | * _.isObject({}); 1558 | * // => true 1559 | * 1560 | * _.isObject([1, 2, 3]); 1561 | * // => true 1562 | * 1563 | * _.isObject(1); 1564 | * // => false 1565 | */ 1566 | function isObject(value) { 1567 | // Avoid a V8 JIT bug in Chrome 19-20. 1568 | // See https://code.google.com/p/v8/issues/detail?id=2291 for more details. 1569 | var type = typeof value; 1570 | return !!value && (type == 'object' || type == 'function'); 1571 | } 1572 | 1573 | /** 1574 | * Creates an array of the own enumerable property names of `object`. 1575 | * 1576 | * **Note:** Non-object values are coerced to objects. See the 1577 | * [ES spec](http://ecma-international.org/ecma-262/6.0/#sec-object.keys) 1578 | * for more details. 1579 | * 1580 | * @static 1581 | * @memberOf _ 1582 | * @category Object 1583 | * @param {Object} object The object to query. 1584 | * @returns {Array} Returns the array of property names. 1585 | * @example 1586 | * 1587 | * function Foo() { 1588 | * this.a = 1; 1589 | * this.b = 2; 1590 | * } 1591 | * 1592 | * Foo.prototype.c = 3; 1593 | * 1594 | * _.keys(new Foo); 1595 | * // => ['a', 'b'] (iteration order is not guaranteed) 1596 | * 1597 | * _.keys('hi'); 1598 | * // => ['0', '1'] 1599 | */ 1600 | var keys = !nativeKeys ? shimKeys : function(object) { 1601 | var Ctor = object == null ? undefined : object.constructor; 1602 | if ((typeof Ctor == 'function' && Ctor.prototype === object) || 1603 | (typeof object != 'function' && isArrayLike(object))) { 1604 | return shimKeys(object); 1605 | } 1606 | return isObject(object) ? nativeKeys(object) : []; 1607 | }; 1608 | 1609 | /** 1610 | * Creates an array of the own and inherited enumerable property names of `object`. 1611 | * 1612 | * **Note:** Non-object values are coerced to objects. 1613 | * 1614 | * @static 1615 | * @memberOf _ 1616 | * @category Object 1617 | * @param {Object} object The object to query. 1618 | * @returns {Array} Returns the array of property names. 1619 | * @example 1620 | * 1621 | * function Foo() { 1622 | * this.a = 1; 1623 | * this.b = 2; 1624 | * } 1625 | * 1626 | * Foo.prototype.c = 3; 1627 | * 1628 | * _.keysIn(new Foo); 1629 | * // => ['a', 'b', 'c'] (iteration order is not guaranteed) 1630 | */ 1631 | function keysIn(object) { 1632 | if (object == null) { 1633 | return []; 1634 | } 1635 | if (!isObject(object)) { 1636 | object = Object(object); 1637 | } 1638 | var length = object.length; 1639 | length = (length && isLength(length) && 1640 | (isArray(object) || isArguments(object)) && length) || 0; 1641 | 1642 | var Ctor = object.constructor, 1643 | index = -1, 1644 | isProto = typeof Ctor == 'function' && Ctor.prototype === object, 1645 | result = Array(length), 1646 | skipIndexes = length > 0; 1647 | 1648 | while (++index < length) { 1649 | result[index] = (index + ''); 1650 | } 1651 | for (var key in object) { 1652 | if (!(skipIndexes && isIndex(key, length)) && 1653 | !(key == 'constructor' && (isProto || !hasOwnProperty.call(object, key)))) { 1654 | result.push(key); 1655 | } 1656 | } 1657 | return result; 1658 | } 1659 | 1660 | module.exports = keys; 1661 | 1662 | 1663 | /***/ }), 1664 | /* 14 */ 1665 | /***/ (function(module, exports) { 1666 | 1667 | /** 1668 | * lodash 3.9.1 (Custom Build) 1669 | * Build: `lodash modern modularize exports="npm" -o ./` 1670 | * Copyright 2012-2015 The Dojo Foundation 1671 | * Based on Underscore.js 1.8.3 1672 | * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors 1673 | * Available under MIT license 1674 | */ 1675 | 1676 | /** `Object#toString` result references. */ 1677 | var funcTag = '[object Function]'; 1678 | 1679 | /** Used to detect host constructors (Safari > 5). */ 1680 | var reIsHostCtor = /^\[object .+?Constructor\]$/; 1681 | 1682 | /** 1683 | * Checks if `value` is object-like. 1684 | * 1685 | * @private 1686 | * @param {*} value The value to check. 1687 | * @returns {boolean} Returns `true` if `value` is object-like, else `false`. 1688 | */ 1689 | function isObjectLike(value) { 1690 | return !!value && typeof value == 'object'; 1691 | } 1692 | 1693 | /** Used for native method references. */ 1694 | var objectProto = Object.prototype; 1695 | 1696 | /** Used to resolve the decompiled source of functions. */ 1697 | var fnToString = Function.prototype.toString; 1698 | 1699 | /** Used to check objects for own properties. */ 1700 | var hasOwnProperty = objectProto.hasOwnProperty; 1701 | 1702 | /** 1703 | * Used to resolve the [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring) 1704 | * of values. 1705 | */ 1706 | var objToString = objectProto.toString; 1707 | 1708 | /** Used to detect if a method is native. */ 1709 | var reIsNative = RegExp('^' + 1710 | fnToString.call(hasOwnProperty).replace(/[\\^$.*+?()[\]{}|]/g, '\\$&') 1711 | .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$' 1712 | ); 1713 | 1714 | /** 1715 | * Gets the native function at `key` of `object`. 1716 | * 1717 | * @private 1718 | * @param {Object} object The object to query. 1719 | * @param {string} key The key of the method to get. 1720 | * @returns {*} Returns the function if it's native, else `undefined`. 1721 | */ 1722 | function getNative(object, key) { 1723 | var value = object == null ? undefined : object[key]; 1724 | return isNative(value) ? value : undefined; 1725 | } 1726 | 1727 | /** 1728 | * Checks if `value` is classified as a `Function` object. 1729 | * 1730 | * @static 1731 | * @memberOf _ 1732 | * @category Lang 1733 | * @param {*} value The value to check. 1734 | * @returns {boolean} Returns `true` if `value` is correctly classified, else `false`. 1735 | * @example 1736 | * 1737 | * _.isFunction(_); 1738 | * // => true 1739 | * 1740 | * _.isFunction(/abc/); 1741 | * // => false 1742 | */ 1743 | function isFunction(value) { 1744 | // The use of `Object#toString` avoids issues with the `typeof` operator 1745 | // in older versions of Chrome and Safari which return 'function' for regexes 1746 | // and Safari 8 equivalents which return 'object' for typed array constructors. 1747 | return isObject(value) && objToString.call(value) == funcTag; 1748 | } 1749 | 1750 | /** 1751 | * Checks if `value` is the [language type](https://es5.github.io/#x8) of `Object`. 1752 | * (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) 1753 | * 1754 | * @static 1755 | * @memberOf _ 1756 | * @category Lang 1757 | * @param {*} value The value to check. 1758 | * @returns {boolean} Returns `true` if `value` is an object, else `false`. 1759 | * @example 1760 | * 1761 | * _.isObject({}); 1762 | * // => true 1763 | * 1764 | * _.isObject([1, 2, 3]); 1765 | * // => true 1766 | * 1767 | * _.isObject(1); 1768 | * // => false 1769 | */ 1770 | function isObject(value) { 1771 | // Avoid a V8 JIT bug in Chrome 19-20. 1772 | // See https://code.google.com/p/v8/issues/detail?id=2291 for more details. 1773 | var type = typeof value; 1774 | return !!value && (type == 'object' || type == 'function'); 1775 | } 1776 | 1777 | /** 1778 | * Checks if `value` is a native function. 1779 | * 1780 | * @static 1781 | * @memberOf _ 1782 | * @category Lang 1783 | * @param {*} value The value to check. 1784 | * @returns {boolean} Returns `true` if `value` is a native function, else `false`. 1785 | * @example 1786 | * 1787 | * _.isNative(Array.prototype.push); 1788 | * // => true 1789 | * 1790 | * _.isNative(_); 1791 | * // => false 1792 | */ 1793 | function isNative(value) { 1794 | if (value == null) { 1795 | return false; 1796 | } 1797 | if (isFunction(value)) { 1798 | return reIsNative.test(fnToString.call(value)); 1799 | } 1800 | return isObjectLike(value) && reIsHostCtor.test(value); 1801 | } 1802 | 1803 | module.exports = getNative; 1804 | 1805 | 1806 | /***/ }), 1807 | /* 15 */ 1808 | /***/ (function(module, exports) { 1809 | 1810 | /** 1811 | * lodash (Custom Build) 1812 | * Build: `lodash modularize exports="npm" -o ./` 1813 | * Copyright jQuery Foundation and other contributors 1814 | * Released under MIT license 1815 | * Based on Underscore.js 1.8.3 1816 | * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors 1817 | */ 1818 | 1819 | /** Used as references for various `Number` constants. */ 1820 | var MAX_SAFE_INTEGER = 9007199254740991; 1821 | 1822 | /** `Object#toString` result references. */ 1823 | var argsTag = '[object Arguments]', 1824 | funcTag = '[object Function]', 1825 | genTag = '[object GeneratorFunction]'; 1826 | 1827 | /** Used for built-in method references. */ 1828 | var objectProto = Object.prototype; 1829 | 1830 | /** Used to check objects for own properties. */ 1831 | var hasOwnProperty = objectProto.hasOwnProperty; 1832 | 1833 | /** 1834 | * Used to resolve the 1835 | * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) 1836 | * of values. 1837 | */ 1838 | var objectToString = objectProto.toString; 1839 | 1840 | /** Built-in value references. */ 1841 | var propertyIsEnumerable = objectProto.propertyIsEnumerable; 1842 | 1843 | /** 1844 | * Checks if `value` is likely an `arguments` object. 1845 | * 1846 | * @static 1847 | * @memberOf _ 1848 | * @since 0.1.0 1849 | * @category Lang 1850 | * @param {*} value The value to check. 1851 | * @returns {boolean} Returns `true` if `value` is an `arguments` object, 1852 | * else `false`. 1853 | * @example 1854 | * 1855 | * _.isArguments(function() { return arguments; }()); 1856 | * // => true 1857 | * 1858 | * _.isArguments([1, 2, 3]); 1859 | * // => false 1860 | */ 1861 | function isArguments(value) { 1862 | // Safari 8.1 makes `arguments.callee` enumerable in strict mode. 1863 | return isArrayLikeObject(value) && hasOwnProperty.call(value, 'callee') && 1864 | (!propertyIsEnumerable.call(value, 'callee') || objectToString.call(value) == argsTag); 1865 | } 1866 | 1867 | /** 1868 | * Checks if `value` is array-like. A value is considered array-like if it's 1869 | * not a function and has a `value.length` that's an integer greater than or 1870 | * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`. 1871 | * 1872 | * @static 1873 | * @memberOf _ 1874 | * @since 4.0.0 1875 | * @category Lang 1876 | * @param {*} value The value to check. 1877 | * @returns {boolean} Returns `true` if `value` is array-like, else `false`. 1878 | * @example 1879 | * 1880 | * _.isArrayLike([1, 2, 3]); 1881 | * // => true 1882 | * 1883 | * _.isArrayLike(document.body.children); 1884 | * // => true 1885 | * 1886 | * _.isArrayLike('abc'); 1887 | * // => true 1888 | * 1889 | * _.isArrayLike(_.noop); 1890 | * // => false 1891 | */ 1892 | function isArrayLike(value) { 1893 | return value != null && isLength(value.length) && !isFunction(value); 1894 | } 1895 | 1896 | /** 1897 | * This method is like `_.isArrayLike` except that it also checks if `value` 1898 | * is an object. 1899 | * 1900 | * @static 1901 | * @memberOf _ 1902 | * @since 4.0.0 1903 | * @category Lang 1904 | * @param {*} value The value to check. 1905 | * @returns {boolean} Returns `true` if `value` is an array-like object, 1906 | * else `false`. 1907 | * @example 1908 | * 1909 | * _.isArrayLikeObject([1, 2, 3]); 1910 | * // => true 1911 | * 1912 | * _.isArrayLikeObject(document.body.children); 1913 | * // => true 1914 | * 1915 | * _.isArrayLikeObject('abc'); 1916 | * // => false 1917 | * 1918 | * _.isArrayLikeObject(_.noop); 1919 | * // => false 1920 | */ 1921 | function isArrayLikeObject(value) { 1922 | return isObjectLike(value) && isArrayLike(value); 1923 | } 1924 | 1925 | /** 1926 | * Checks if `value` is classified as a `Function` object. 1927 | * 1928 | * @static 1929 | * @memberOf _ 1930 | * @since 0.1.0 1931 | * @category Lang 1932 | * @param {*} value The value to check. 1933 | * @returns {boolean} Returns `true` if `value` is a function, else `false`. 1934 | * @example 1935 | * 1936 | * _.isFunction(_); 1937 | * // => true 1938 | * 1939 | * _.isFunction(/abc/); 1940 | * // => false 1941 | */ 1942 | function isFunction(value) { 1943 | // The use of `Object#toString` avoids issues with the `typeof` operator 1944 | // in Safari 8-9 which returns 'object' for typed array and other constructors. 1945 | var tag = isObject(value) ? objectToString.call(value) : ''; 1946 | return tag == funcTag || tag == genTag; 1947 | } 1948 | 1949 | /** 1950 | * Checks if `value` is a valid array-like length. 1951 | * 1952 | * **Note:** This method is loosely based on 1953 | * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength). 1954 | * 1955 | * @static 1956 | * @memberOf _ 1957 | * @since 4.0.0 1958 | * @category Lang 1959 | * @param {*} value The value to check. 1960 | * @returns {boolean} Returns `true` if `value` is a valid length, else `false`. 1961 | * @example 1962 | * 1963 | * _.isLength(3); 1964 | * // => true 1965 | * 1966 | * _.isLength(Number.MIN_VALUE); 1967 | * // => false 1968 | * 1969 | * _.isLength(Infinity); 1970 | * // => false 1971 | * 1972 | * _.isLength('3'); 1973 | * // => false 1974 | */ 1975 | function isLength(value) { 1976 | return typeof value == 'number' && 1977 | value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER; 1978 | } 1979 | 1980 | /** 1981 | * Checks if `value` is the 1982 | * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types) 1983 | * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) 1984 | * 1985 | * @static 1986 | * @memberOf _ 1987 | * @since 0.1.0 1988 | * @category Lang 1989 | * @param {*} value The value to check. 1990 | * @returns {boolean} Returns `true` if `value` is an object, else `false`. 1991 | * @example 1992 | * 1993 | * _.isObject({}); 1994 | * // => true 1995 | * 1996 | * _.isObject([1, 2, 3]); 1997 | * // => true 1998 | * 1999 | * _.isObject(_.noop); 2000 | * // => true 2001 | * 2002 | * _.isObject(null); 2003 | * // => false 2004 | */ 2005 | function isObject(value) { 2006 | var type = typeof value; 2007 | return !!value && (type == 'object' || type == 'function'); 2008 | } 2009 | 2010 | /** 2011 | * Checks if `value` is object-like. A value is object-like if it's not `null` 2012 | * and has a `typeof` result of "object". 2013 | * 2014 | * @static 2015 | * @memberOf _ 2016 | * @since 4.0.0 2017 | * @category Lang 2018 | * @param {*} value The value to check. 2019 | * @returns {boolean} Returns `true` if `value` is object-like, else `false`. 2020 | * @example 2021 | * 2022 | * _.isObjectLike({}); 2023 | * // => true 2024 | * 2025 | * _.isObjectLike([1, 2, 3]); 2026 | * // => true 2027 | * 2028 | * _.isObjectLike(_.noop); 2029 | * // => false 2030 | * 2031 | * _.isObjectLike(null); 2032 | * // => false 2033 | */ 2034 | function isObjectLike(value) { 2035 | return !!value && typeof value == 'object'; 2036 | } 2037 | 2038 | module.exports = isArguments; 2039 | 2040 | 2041 | /***/ }), 2042 | /* 16 */ 2043 | /***/ (function(module, exports) { 2044 | 2045 | /** 2046 | * lodash 3.0.4 (Custom Build) 2047 | * Build: `lodash modern modularize exports="npm" -o ./` 2048 | * Copyright 2012-2015 The Dojo Foundation 2049 | * Based on Underscore.js 1.8.3 2050 | * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors 2051 | * Available under MIT license 2052 | */ 2053 | 2054 | /** `Object#toString` result references. */ 2055 | var arrayTag = '[object Array]', 2056 | funcTag = '[object Function]'; 2057 | 2058 | /** Used to detect host constructors (Safari > 5). */ 2059 | var reIsHostCtor = /^\[object .+?Constructor\]$/; 2060 | 2061 | /** 2062 | * Checks if `value` is object-like. 2063 | * 2064 | * @private 2065 | * @param {*} value The value to check. 2066 | * @returns {boolean} Returns `true` if `value` is object-like, else `false`. 2067 | */ 2068 | function isObjectLike(value) { 2069 | return !!value && typeof value == 'object'; 2070 | } 2071 | 2072 | /** Used for native method references. */ 2073 | var objectProto = Object.prototype; 2074 | 2075 | /** Used to resolve the decompiled source of functions. */ 2076 | var fnToString = Function.prototype.toString; 2077 | 2078 | /** Used to check objects for own properties. */ 2079 | var hasOwnProperty = objectProto.hasOwnProperty; 2080 | 2081 | /** 2082 | * Used to resolve the [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring) 2083 | * of values. 2084 | */ 2085 | var objToString = objectProto.toString; 2086 | 2087 | /** Used to detect if a method is native. */ 2088 | var reIsNative = RegExp('^' + 2089 | fnToString.call(hasOwnProperty).replace(/[\\^$.*+?()[\]{}|]/g, '\\$&') 2090 | .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$' 2091 | ); 2092 | 2093 | /* Native method references for those with the same name as other `lodash` methods. */ 2094 | var nativeIsArray = getNative(Array, 'isArray'); 2095 | 2096 | /** 2097 | * Used as the [maximum length](http://ecma-international.org/ecma-262/6.0/#sec-number.max_safe_integer) 2098 | * of an array-like value. 2099 | */ 2100 | var MAX_SAFE_INTEGER = 9007199254740991; 2101 | 2102 | /** 2103 | * Gets the native function at `key` of `object`. 2104 | * 2105 | * @private 2106 | * @param {Object} object The object to query. 2107 | * @param {string} key The key of the method to get. 2108 | * @returns {*} Returns the function if it's native, else `undefined`. 2109 | */ 2110 | function getNative(object, key) { 2111 | var value = object == null ? undefined : object[key]; 2112 | return isNative(value) ? value : undefined; 2113 | } 2114 | 2115 | /** 2116 | * Checks if `value` is a valid array-like length. 2117 | * 2118 | * **Note:** This function is based on [`ToLength`](http://ecma-international.org/ecma-262/6.0/#sec-tolength). 2119 | * 2120 | * @private 2121 | * @param {*} value The value to check. 2122 | * @returns {boolean} Returns `true` if `value` is a valid length, else `false`. 2123 | */ 2124 | function isLength(value) { 2125 | return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER; 2126 | } 2127 | 2128 | /** 2129 | * Checks if `value` is classified as an `Array` object. 2130 | * 2131 | * @static 2132 | * @memberOf _ 2133 | * @category Lang 2134 | * @param {*} value The value to check. 2135 | * @returns {boolean} Returns `true` if `value` is correctly classified, else `false`. 2136 | * @example 2137 | * 2138 | * _.isArray([1, 2, 3]); 2139 | * // => true 2140 | * 2141 | * _.isArray(function() { return arguments; }()); 2142 | * // => false 2143 | */ 2144 | var isArray = nativeIsArray || function(value) { 2145 | return isObjectLike(value) && isLength(value.length) && objToString.call(value) == arrayTag; 2146 | }; 2147 | 2148 | /** 2149 | * Checks if `value` is classified as a `Function` object. 2150 | * 2151 | * @static 2152 | * @memberOf _ 2153 | * @category Lang 2154 | * @param {*} value The value to check. 2155 | * @returns {boolean} Returns `true` if `value` is correctly classified, else `false`. 2156 | * @example 2157 | * 2158 | * _.isFunction(_); 2159 | * // => true 2160 | * 2161 | * _.isFunction(/abc/); 2162 | * // => false 2163 | */ 2164 | function isFunction(value) { 2165 | // The use of `Object#toString` avoids issues with the `typeof` operator 2166 | // in older versions of Chrome and Safari which return 'function' for regexes 2167 | // and Safari 8 equivalents which return 'object' for typed array constructors. 2168 | return isObject(value) && objToString.call(value) == funcTag; 2169 | } 2170 | 2171 | /** 2172 | * Checks if `value` is the [language type](https://es5.github.io/#x8) of `Object`. 2173 | * (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) 2174 | * 2175 | * @static 2176 | * @memberOf _ 2177 | * @category Lang 2178 | * @param {*} value The value to check. 2179 | * @returns {boolean} Returns `true` if `value` is an object, else `false`. 2180 | * @example 2181 | * 2182 | * _.isObject({}); 2183 | * // => true 2184 | * 2185 | * _.isObject([1, 2, 3]); 2186 | * // => true 2187 | * 2188 | * _.isObject(1); 2189 | * // => false 2190 | */ 2191 | function isObject(value) { 2192 | // Avoid a V8 JIT bug in Chrome 19-20. 2193 | // See https://code.google.com/p/v8/issues/detail?id=2291 for more details. 2194 | var type = typeof value; 2195 | return !!value && (type == 'object' || type == 'function'); 2196 | } 2197 | 2198 | /** 2199 | * Checks if `value` is a native function. 2200 | * 2201 | * @static 2202 | * @memberOf _ 2203 | * @category Lang 2204 | * @param {*} value The value to check. 2205 | * @returns {boolean} Returns `true` if `value` is a native function, else `false`. 2206 | * @example 2207 | * 2208 | * _.isNative(Array.prototype.push); 2209 | * // => true 2210 | * 2211 | * _.isNative(_); 2212 | * // => false 2213 | */ 2214 | function isNative(value) { 2215 | if (value == null) { 2216 | return false; 2217 | } 2218 | if (isFunction(value)) { 2219 | return reIsNative.test(fnToString.call(value)); 2220 | } 2221 | return isObjectLike(value) && reIsHostCtor.test(value); 2222 | } 2223 | 2224 | module.exports = isArray; 2225 | 2226 | 2227 | /***/ }), 2228 | /* 17 */ 2229 | /***/ (function(module, exports) { 2230 | 2231 | // removed by extract-text-webpack-plugin 2232 | module.exports = {"loading":"Loading__loading___1m_fZ","bar":"Loading__bar___21yOt","peg":"Loading__peg___3Y_28","spinner":"Loading__spinner___11Pm4","icon":"Loading__icon___3OOyu","loading-bar-spinner":"Loading__loading-bar-spinner___1hKY9"}; 2233 | 2234 | /***/ }) 2235 | /******/ ]) 2236 | }); 2237 | ; -------------------------------------------------------------------------------- /examples/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | React Loading Bar Example 11 | 12 | 13 |

React Loading Bar Example

14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/src/Example.css: -------------------------------------------------------------------------------- 1 | .exampleComponent { 2 | button { 3 | display: inline-block; 4 | margin-right: 8px; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/src/Loading.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import ReactDOM from 'react-dom' 3 | 4 | import Loading from '../../dist/index' 5 | import styles from './Example.css' 6 | 7 | class LoadingExample extends Component { 8 | state = { 9 | show: false 10 | } 11 | 12 | onShow = ()=> { 13 | this.setState({ show: true }) 14 | } 15 | 16 | onHide = ()=> { 17 | this.setState({ show: false }) 18 | } 19 | 20 | render() { 21 | return ( 22 |
23 | 27 | 28 | 33 | 34 | 39 | 40 |
41 | ) 42 | } 43 | } 44 | 45 | ReactDOM.render(, document.getElementById('loadingbar')) 46 | -------------------------------------------------------------------------------- /examples/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | React Loading Bar Example 11 | 12 | 13 |

React Loading Bar Example

14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /mock.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const koa = require('koa') 4 | const logger = require('koa-logger') 5 | const route = require('koa-route') 6 | const fs = require('fs') 7 | const staticCache = require('koa-static-cache') 8 | const mount = require('koa-mount') 9 | const app = koa() 10 | 11 | const backendPort = 3000 12 | let deploy = 'examples' 13 | 14 | app.use(logger()) 15 | 16 | app.use(mount('/', staticCache(__dirname))) 17 | 18 | app.use(route.get('*', function* () { 19 | this.type = 'html' 20 | this.body = yield function (done) { 21 | fs.readFile(`${deploy}/build/index.html`, 'utf8', done) 22 | } 23 | })) 24 | 25 | app.listen(backendPort, function () { 26 | /* eslint-disable no-console */ 27 | console.log(`Backend Koa Server Listen At: ${backendPort}`) 28 | /* eslint-enable no-console */ 29 | }) 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-loading-bar", 3 | "version": "0.0.7", 4 | "description": "react loading bar", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "start": "webpack --config webpack.config.development.js --watch", 8 | "build": "webpack --config webpack.config.production.js", 9 | "eslint": "eslint src/*.jsx", 10 | "lintfix": "eslint --fix src/*.jsx" 11 | }, 12 | "files": [ 13 | "dist/" 14 | ], 15 | "author": "lonelyclick", 16 | "license": "MIT", 17 | "dependencies": { 18 | "shallowequal": "^0.2.2" 19 | }, 20 | "peerDependencies": { 21 | "react": "^15.0.0 || ^16.0.0", 22 | "react-dom": "^15.0.0 || ^16.0.0" 23 | }, 24 | "repository": { 25 | "type": "git", 26 | "url": "https://github.com/lonelyclick/react-loading-bar.git" 27 | }, 28 | "devDependencies": { 29 | "autoprefixer": "^6.0.3", 30 | "autoprefixer-loader": "^3.1.0", 31 | "babel": "^5.8.29", 32 | "babel-core": "^5.8.29", 33 | "babel-eslint": "^4.1.3", 34 | "babel-loader": "^5.3.2", 35 | "css-loader": "^0.21.0", 36 | "eslint": "^1.7.3", 37 | "eslint-config-airbnb": "0.1.0", 38 | "eslint-loader": "^1.1.0", 39 | "eslint-plugin-react": "^3.6.3", 40 | "extract-text-webpack-plugin": "^0.8.2", 41 | "file-loader": "^0.8.4", 42 | "html-webpack-plugin": "^1.6.2", 43 | "koa": "^1.1.2", 44 | "koa-logger": "^1.3.0", 45 | "koa-mount": "^1.3.0", 46 | "koa-request": "^1.0.0", 47 | "koa-route": "^2.4.2", 48 | "koa-static": "^1.5.1", 49 | "koa-static-cache": "^3.1.2", 50 | "postcss": "^5.0.10", 51 | "postcss-color-rebeccapurple": "^2.0.0", 52 | "postcss-loader": "^0.7.0", 53 | "postcss-reporter": "^1.3.0", 54 | "precss": "^1.3.0", 55 | "prop-types": "^15.5.10", 56 | "lite-server": "^2.3.0", 57 | "react": "^15.6.1", 58 | "react-dom": "^15.6.1", 59 | "style-loader": "^0.13.0", 60 | "url-loader": "^0.5.6", 61 | "webpack": "^1.12.2" 62 | }, 63 | "directories": { 64 | "example": "examples" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/Loading.css: -------------------------------------------------------------------------------- 1 | $base-color: #29d; 2 | $bar-z-index: 10002; 3 | $icon-border-radius: 50%; 4 | 5 | .loading { 6 | pointer-events: none; 7 | transition: 400ms linear all; 8 | } 9 | 10 | .bar { 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | z-index: $bar-z-index; 15 | display: none; 16 | width: 100%; 17 | height: 2px; 18 | background: $base-color; 19 | border-radius: 0 1px 1px 0; 20 | transition: width 350ms; 21 | } 22 | 23 | .peg { 24 | position: absolute; 25 | top: 0; 26 | right: 0; 27 | width: 70px; 28 | height: 2px; 29 | border-radius: $icon-border-radius; 30 | opacity: .45; 31 | box-shadow: $base-color 1px 0 6px 1px; 32 | } 33 | 34 | .spinner { 35 | position: fixed; 36 | top: 5px; 37 | left: 5px; 38 | z-index: $bar-z-index; 39 | pointer-events: none; 40 | transition: 350ms linear all; 41 | } 42 | 43 | .icon { 44 | width: 14px; 45 | height: 14px; 46 | border: solid $base-color; 47 | border-width: 0 2px 2px 0; 48 | border-radius: $icon-border-radius; 49 | animation: loading-bar-spinner 400ms linear infinite; 50 | } 51 | 52 | @keyframes loading-bar-spinner { 53 | 0% { 54 | transform: rotate(0); 55 | } 56 | 57 | 100% { 58 | transform: rotate(360deg); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/Loading.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import PropTypes from 'prop-types'; 3 | import shallowEqual from 'shallowequal' 4 | 5 | import styles from './Loading.css' 6 | 7 | export default class Loading extends Component { 8 | static propTypes = { 9 | change: PropTypes.bool, 10 | color: PropTypes.string.isRequired, 11 | show: PropTypes.bool, 12 | showSpinner: PropTypes.bool 13 | } 14 | 15 | static defaultProps = { 16 | change: true, 17 | showSpinner: true 18 | } 19 | 20 | state = { 21 | size: 0, 22 | disappearDelayHide: false, // when dispappear, first transition then display none 23 | percent: 0, 24 | appearDelayWidth: 0 // when appear, first display block then transition width 25 | } 26 | 27 | componentDidUpdate(prevProps) { 28 | const { show, change } = this.props 29 | 30 | if (!change || prevProps.show === show) { 31 | return 32 | } 33 | 34 | if (show) { 35 | this.show() 36 | } else { 37 | this.hide() 38 | } 39 | } 40 | 41 | shouldComponentUpdate(nextProps, nextState) { 42 | return nextProps.change || !shallowEqual(nextState, this.state) 43 | } 44 | 45 | show() { 46 | let { size, percent } = this.state 47 | 48 | const appearDelayWidth = size === 0 49 | percent = this.calculatePercent(percent) 50 | 51 | this.setState({ 52 | size: ++size, 53 | appearDelayWidth, 54 | percent 55 | }) 56 | 57 | if (appearDelayWidth) { 58 | setTimeout(() => { 59 | this.setState({ 60 | appearDelayWidth: false 61 | }) 62 | }) 63 | } 64 | } 65 | 66 | hide() { 67 | let { size } = this.state 68 | 69 | if (--size < 0) { 70 | this.setState({ size: 0 }) 71 | return 72 | } 73 | 74 | this.setState({ 75 | size: 0, 76 | disappearDelayHide: true, 77 | percent: 1 78 | }) 79 | 80 | setTimeout(() => { 81 | this.setState({ 82 | disappearDelayHide: false, 83 | percent: 0 84 | }) 85 | }, 500) 86 | } 87 | 88 | getBarStyle() { 89 | const { disappearDelayHide, appearDelayWidth, percent } = this.state 90 | const { color } = this.props 91 | 92 | return { 93 | background: color, 94 | width: appearDelayWidth ? 0 : `${percent * 100}%`, 95 | display: disappearDelayHide || percent > 0 ? 'block': 'none' 96 | } 97 | } 98 | 99 | getSpinnerStyle() { 100 | const { size } = this.state 101 | const { color } = this.props 102 | 103 | return { 104 | display: size > 0 ? 'block': 'none', 105 | borderColor: color 106 | } 107 | } 108 | 109 | calculatePercent(percent) { 110 | percent = percent || 0 111 | let random = 0 112 | 113 | if (percent >= 0 && percent < 0.25) { 114 | random = (Math.random() * (5 - 3 + 1) + 10) / 100 115 | } else if (percent >= 0.25 && percent < 0.65) { 116 | random = (Math.random() * 3) / 100 117 | } else if (percent >= 0.65 && percent < 0.9) { 118 | random = (Math.random() * 2) / 100 119 | } else if (percent >= 0.9 && percent < 0.99) { 120 | random = 0.005 121 | } else { 122 | random = 0 123 | } 124 | 125 | percent += random 126 | return percent 127 | } 128 | 129 | render() { 130 | return ( 131 |
132 |
133 |
136 |
137 |
138 |
139 | {this.props.showSpinner && 140 |
141 |
145 |
146 | } 147 |
148 | ) 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export default from './Loading' 2 | -------------------------------------------------------------------------------- /webpack.config.development.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const path = require('path') 4 | const HtmlWebpackPlugin = require('html-webpack-plugin') 5 | 6 | const deployLocation = 'examples' 7 | 8 | module.exports = { 9 | entry: { 10 | index: './examples/src/Loading.jsx' 11 | }, 12 | color: true, 13 | progress: true, 14 | output: { 15 | filename: 'build/[name].js', 16 | path: path.join(__dirname, deployLocation), 17 | publicPath: `/${deployLocation}` 18 | }, 19 | colors: true, 20 | resolve: { 21 | extensions: ['', '.js', '.jsx'] 22 | }, 23 | module: { 24 | loaders: [ 25 | { 26 | test: /\.jsx?$/, 27 | exclude: /(node_modules)/, 28 | loaders: [ 29 | 'babel?stage=0' 30 | ] 31 | }, 32 | { 33 | test: /\.(png|jpg|jpeg|gif)$/, 34 | loader: 'file?name=/assets/[name].[ext]' 35 | }, 36 | { 37 | test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, 38 | loader: 'url?limit=10000&mimetype=application/font-woff&name=/assets/[name].[ext]' 39 | }, 40 | { 41 | test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, 42 | loader: 'url?limit=10000&mimetype=application/font-woff&name=/assets/[name].[ext]' 43 | }, 44 | { 45 | test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 46 | loader: 'url?limit=10000&mimetype=application/octet-stream&name=/assets/[name].[ext]' 47 | }, 48 | { 49 | test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 50 | loader: 'file?name=/assets/[name].[hash].[ext]' 51 | }, 52 | { 53 | test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 54 | loader: 'url?limit=10000&mimetype=image/svg+xml&name=/assets/[name].[ext]' 55 | }, 56 | { 57 | test: /\.css$/, 58 | /* eslint-disable max-len */ 59 | loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader' 60 | /* eslint-enable max-len */ 61 | } 62 | ] 63 | }, 64 | postcss: [ 65 | require('autoprefixer'), 66 | require('postcss-color-rebeccapurple'), 67 | require('precss'), 68 | require('postcss-reporter') 69 | ], 70 | plugins: [ 71 | new HtmlWebpackPlugin({ 72 | template: './examples/src/index.html', 73 | inject: 'body', 74 | filename: 'build/index.html' 75 | }) 76 | ] 77 | } 78 | 79 | if (process.argv.indexOf('--enable-eslint') !== -1) { 80 | module.exports.module.preLoaders = [ 81 | { 82 | test: /\.(js|jsx)$/, 83 | loader: 'eslint-loader', 84 | exclude: /node_modules/ 85 | } 86 | ] 87 | 88 | module.exports.eslint = { 89 | configFile: '.eslintrc', 90 | plugins: [ 91 | 'react' 92 | ] 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /webpack.config.production.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const path = require('path') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | 6 | const cssPath = '/[name].css' 7 | const deployLocation = 'dist' 8 | 9 | module.exports = { 10 | entry: { 11 | index: './src/index.js' 12 | }, 13 | colors: true, 14 | resolve: { 15 | extensions: ['', '.js', '.jsx'] 16 | }, 17 | output: { 18 | filename: '/[name].js', 19 | path: path.join(__dirname, deployLocation), 20 | library: 'ReactLoadingBar', 21 | libraryTarget: 'umd' 22 | }, 23 | externals: { 24 | 'react': { 25 | 'commonjs': 'react', 26 | 'commonjs2': 'react', 27 | 'amd': 'react', 28 | 'root': 'React' 29 | }, 30 | 'react-dom': { 31 | 'commonjs': 'react-dom', 32 | 'commonjs2': 'react-dom', 33 | 'amd': 'react-dom', 34 | 'root': 'ReactDOM' 35 | } 36 | }, 37 | module: { 38 | loaders: [ 39 | { 40 | test: /\.js$/, exclude: /node_modules/, loader: 'babel?stage=0' 41 | }, 42 | { 43 | test: /\.jsx$/, exclude: /node_modules/, loader: 'babel?stage=0' 44 | }, 45 | { 46 | test: /\.css$/, 47 | /* eslint-disable max-len */ 48 | loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') 49 | /* eslint-enable max-len */ 50 | } 51 | ] 52 | }, 53 | plugins: [ 54 | new ExtractTextPlugin(cssPath) 55 | ], 56 | postcss: [ 57 | require('autoprefixer'), 58 | require('postcss-color-rebeccapurple'), 59 | require('precss'), 60 | require('postcss-reporter') 61 | ] 62 | } 63 | --------------------------------------------------------------------------------