├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── LICENSE ├── README.md ├── bower.json ├── dist ├── react-rotating-text.js └── react-rotating-text.min.js ├── example └── src │ ├── .gitignore │ ├── ReactRotatingText.css │ ├── example.js │ ├── example.less │ └── index.html ├── gulpfile.js ├── lib └── ReactRotatingText.js ├── package.json ├── src ├── ReactRotatingText.css └── ReactRotatingText.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | root = true 4 | 5 | [*] 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = false 9 | insert_final_newline = true 10 | indent_style = tab 11 | 12 | [*.json] 13 | indent_style = space 14 | indent_size = 2 15 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .publish/* 2 | dist/* 3 | example/dist/* 4 | lib/* 5 | node_modules/* 6 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "node": true 6 | }, 7 | "plugins": [ 8 | "react" 9 | ], 10 | "rules": { 11 | "curly": [2, "multi-line"], 12 | "quotes": [2, "single", "avoid-escape"], 13 | "react/display-name": 0, 14 | "react/jsx-boolean-value": 1, 15 | "jsx-quotes": 1, 16 | "react/jsx-no-undef": 1, 17 | "react/jsx-sort-props": 0, 18 | "react/jsx-sort-prop-types": 1, 19 | "react/jsx-uses-react": 1, 20 | "react/jsx-uses-vars": 1, 21 | "react/no-did-mount-set-state": 1, 22 | "react/no-did-update-set-state": 1, 23 | "react/no-multi-comp": 1, 24 | "react/no-unknown-property": 1, 25 | "react/prop-types": 1, 26 | "react/react-in-jsx-scope": 1, 27 | "react/self-closing-comp": 1, 28 | "react/wrap-multilines": 1, 29 | "semi": 2, 30 | "strict": 0 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Coverage tools 11 | lib-cov 12 | coverage 13 | coverage.html 14 | .cover* 15 | 16 | # Dependency directory 17 | node_modules 18 | 19 | # Example build directory 20 | example/dist 21 | .publish 22 | 23 | # Editor and other tmp files 24 | *.swp 25 | *.un~ 26 | *.iml 27 | *.ipr 28 | *.iws 29 | *.sublime-* 30 | .idea/ 31 | *.DS_Store 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Adrian Li. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-rotating-text 2 | 3 | ![effect showcase](http://i.imgur.com/AC5g7KD.gif) 4 | 5 | A simple component to create a typewriter effect where strings are typed out and then deleted. Simply pass in an array of strings and the component will rotate through all of them. 6 | 7 | 8 | ## Demo & Examples 9 | 10 | Live demo: [adrianmcli.github.io/react-rotating-text](http://adrianmcli.github.io/react-rotating-text/) 11 | 12 | To build the examples locally, run: 13 | 14 | ``` 15 | npm install 16 | npm start 17 | ``` 18 | 19 | Then open [`localhost:8000`](http://localhost:8000) in a browser. 20 | 21 | 22 | ## Installation 23 | 24 | The easiest way to use react-rotating-text is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), [Brunch](http://brunch.io/), etc). 25 | 26 | You can also use the standalone build by including `dist/react-rotating-text.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable. 27 | 28 | ``` 29 | npm install react-rotating-text --save 30 | ``` 31 | 32 | 33 | ## Usage 34 | 35 | Simply require the component and then pass in an array of strings into the `items` prop: 36 | 37 | ```jsx 38 | var ReactRotatingText = require('react-rotating-text'); 39 | 40 | 41 | ``` 42 | 43 | In order to have a blinking cursor, you'll need to apply some CSS to the `react-rotating-text-cursor` class: 44 | 45 | ```css 46 | .react-rotating-text-cursor { 47 | animation: blinking-cursor 0.8s cubic-bezier(0.68, 0.01, 0.01, 0.99) 0s infinite; 48 | } 49 | 50 | @keyframes blinking-cursor { 51 | 0% { 52 | opacity: 0; 53 | } 54 | 50% { 55 | opacity: 1; 56 | } 57 | 100% { 58 | opacity: 0; 59 | } 60 | } 61 | ``` 62 | 63 | Don't forget to put in vendor prefixes should you need them. A full example is available in `example/dist/ReactRotatingText.css`. 64 | 65 | ### Properties 66 | 67 | **items (*array*)** 68 | *(default: ['first', 'second', 'third'])* 69 | The array of strings to be cycled through. 70 | 71 | **color (*string*)** 72 | *(default: 'inherit')* 73 | This specifies the color of the text. 74 | 75 | **cursor (*boolean*)** 76 | *(default: true)* 77 | If set to true, it will display the cursor after the text. 78 | 79 | **pause (*integer*)** 80 | *(default: 1500)* 81 | The number of milliseconds to pause after the text has just finished being typed out. 82 | 83 | **emptyPause (*integer*)** 84 | *(default: 1000)* 85 | The number of milliseconds to pause while no text is being displayed (i.e. after deleting has just finished). 86 | 87 | **eraseMode (*string*)** 88 | *(default: 'erase')* 89 | This specifies the erasing mode. May be set to "erase" or "overwrite". 90 | 91 | **typingInterval (*integer*)** 92 | *(default: 50)* 93 | The number of milliseconds between each typing action. 94 | 95 | **deletingInterval (*integer*)** 96 | *(default: 50)* 97 | The number of milliseconds between each deleting action. 98 | 99 | ### Events 100 | 101 | #### onTypingStart 102 | A callback function to call when typing starts for current item. 103 | 104 | #### onTypingEnd 105 | A callback function to call when typing ends for current item. 106 | 107 | #### onDeletingStart 108 | A callback function to call when deleting starts for current item. 109 | 110 | #### onDeletingEnd 111 | A callback function to call when deleting finishes for current item. 112 | 113 | Example: 114 | ``` 115 | console.log(`Typing Started`)} /> 116 | ``` 117 | 118 | ### Notes 119 | 120 | Enhancements and pull requests are welcomed. 121 | 122 | 123 | ## Development (`src`, `lib` and the build process) 124 | 125 | **NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system. 126 | 127 | To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`). 128 | 129 | ## License 130 | 131 | The MIT License (MIT) 132 | 133 | Copyright (c) 2016 Adrian Li. 134 | 135 | Permission is hereby granted, free of charge, to any person obtaining a copy 136 | of this software and associated documentation files (the "Software"), to deal 137 | in the Software without restriction, including without limitation the rights 138 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 139 | copies of the Software, and to permit persons to whom the Software is 140 | furnished to do so, subject to the following conditions: 141 | 142 | The above copyright notice and this permission notice shall be included in all 143 | copies or substantial portions of the Software. 144 | 145 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 146 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 147 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 148 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 149 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 150 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 151 | SOFTWARE. 152 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-rotating-text", 3 | "version": "0.0.0", 4 | "description": "A simple react component to display an array of words/sentences with a typewriter effect.", 5 | "main": "dist/react-rotating-text.min.js", 6 | "homepage": "https://github.com/adrianmc/react-rotating-text", 7 | "authors": [ 8 | "Adrian Li" 9 | ], 10 | "moduleType": [ 11 | "amd", 12 | "globals", 13 | "node" 14 | ], 15 | "keywords": [ 16 | "react", 17 | "react-component" 18 | ], 19 | "license": "MIT", 20 | "ignore": [ 21 | ".editorconfig", 22 | ".gitignore", 23 | "package.json", 24 | "src", 25 | "node_modules", 26 | "example", 27 | "test" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /dist/react-rotating-text.js: -------------------------------------------------------------------------------- 1 | (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ReactRotatingText = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 117 | args[_key - 1] = arguments[_key]; 118 | } 119 | 120 | var argIndex = 0; 121 | var message = 'Warning: ' + format.replace(/%s/g, function () { 122 | return args[argIndex++]; 123 | }); 124 | if (typeof console !== 'undefined') { 125 | console.error(message); 126 | } 127 | try { 128 | // --- Welcome to debugging React --- 129 | // This error was thrown as a convenience so that you can use this stack 130 | // to find the callsite that caused this warning to fire. 131 | throw new Error(message); 132 | } catch (x) {} 133 | }; 134 | 135 | warning = function warning(condition, format) { 136 | if (format === undefined) { 137 | throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); 138 | } 139 | 140 | if (format.indexOf('Failed Composite propType: ') === 0) { 141 | return; // Ignore CompositeComponent proptype check. 142 | } 143 | 144 | if (!condition) { 145 | for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { 146 | args[_key2 - 2] = arguments[_key2]; 147 | } 148 | 149 | printWarning.apply(undefined, [format].concat(args)); 150 | } 151 | }; 152 | } 153 | 154 | module.exports = warning; 155 | },{"./emptyFunction":1}],4:[function(require,module,exports){ 156 | (function (global){ 157 | /** 158 | * lodash (Custom Build) 159 | * Build: `lodash modularize exports="npm" -o ./` 160 | * Copyright jQuery Foundation and other contributors 161 | * Released under MIT license 162 | * Based on Underscore.js 1.8.3 163 | * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors 164 | */ 165 | 166 | /** Used as references for various `Number` constants. */ 167 | var MAX_SAFE_INTEGER = 9007199254740991; 168 | 169 | /** `Object#toString` result references. */ 170 | var argsTag = '[object Arguments]', 171 | funcTag = '[object Function]', 172 | genTag = '[object GeneratorFunction]', 173 | mapTag = '[object Map]', 174 | objectTag = '[object Object]', 175 | promiseTag = '[object Promise]', 176 | setTag = '[object Set]', 177 | stringTag = '[object String]', 178 | weakMapTag = '[object WeakMap]'; 179 | 180 | var dataViewTag = '[object DataView]'; 181 | 182 | /** 183 | * Used to match `RegExp` 184 | * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns). 185 | */ 186 | var reRegExpChar = /[\\^$.*+?()[\]{}|]/g; 187 | 188 | /** Used to detect host constructors (Safari). */ 189 | var reIsHostCtor = /^\[object .+?Constructor\]$/; 190 | 191 | /** Used to detect unsigned integer values. */ 192 | var reIsUint = /^(?:0|[1-9]\d*)$/; 193 | 194 | /** Used to compose unicode character classes. */ 195 | var rsAstralRange = '\\ud800-\\udfff', 196 | rsComboMarksRange = '\\u0300-\\u036f\\ufe20-\\ufe23', 197 | rsComboSymbolsRange = '\\u20d0-\\u20f0', 198 | rsVarRange = '\\ufe0e\\ufe0f'; 199 | 200 | /** Used to compose unicode capture groups. */ 201 | var rsAstral = '[' + rsAstralRange + ']', 202 | rsCombo = '[' + rsComboMarksRange + rsComboSymbolsRange + ']', 203 | rsFitz = '\\ud83c[\\udffb-\\udfff]', 204 | rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')', 205 | rsNonAstral = '[^' + rsAstralRange + ']', 206 | rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}', 207 | rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]', 208 | rsZWJ = '\\u200d'; 209 | 210 | /** Used to compose unicode regexes. */ 211 | var reOptMod = rsModifier + '?', 212 | rsOptVar = '[' + rsVarRange + ']?', 213 | rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*', 214 | rsSeq = rsOptVar + reOptMod + rsOptJoin, 215 | rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')'; 216 | 217 | /** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */ 218 | var reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g'); 219 | 220 | /** Used to detect strings with [zero-width joiners or code points from the astral planes](http://eev.ee/blog/2015/09/12/dark-corners-of-unicode/). */ 221 | var reHasUnicode = RegExp('[' + rsZWJ + rsAstralRange + rsComboMarksRange + rsComboSymbolsRange + rsVarRange + ']'); 222 | 223 | /** Detect free variable `global` from Node.js. */ 224 | var freeGlobal = typeof global == 'object' && global && global.Object === Object && global; 225 | 226 | /** Detect free variable `self`. */ 227 | var freeSelf = typeof self == 'object' && self && self.Object === Object && self; 228 | 229 | /** Used as a reference to the global object. */ 230 | var root = freeGlobal || freeSelf || Function('return this')(); 231 | 232 | /** 233 | * A specialized version of `_.map` for arrays without support for iteratee 234 | * shorthands. 235 | * 236 | * @private 237 | * @param {Array} [array] The array to iterate over. 238 | * @param {Function} iteratee The function invoked per iteration. 239 | * @returns {Array} Returns the new mapped array. 240 | */ 241 | function arrayMap(array, iteratee) { 242 | var index = -1, 243 | length = array ? array.length : 0, 244 | result = Array(length); 245 | 246 | while (++index < length) { 247 | result[index] = iteratee(array[index], index, array); 248 | } 249 | return result; 250 | } 251 | 252 | /** 253 | * Converts an ASCII `string` to an array. 254 | * 255 | * @private 256 | * @param {string} string The string to convert. 257 | * @returns {Array} Returns the converted array. 258 | */ 259 | function asciiToArray(string) { 260 | return string.split(''); 261 | } 262 | 263 | /** 264 | * The base implementation of `_.times` without support for iteratee shorthands 265 | * or max array length checks. 266 | * 267 | * @private 268 | * @param {number} n The number of times to invoke `iteratee`. 269 | * @param {Function} iteratee The function invoked per iteration. 270 | * @returns {Array} Returns the array of results. 271 | */ 272 | function baseTimes(n, iteratee) { 273 | var index = -1, 274 | result = Array(n); 275 | 276 | while (++index < n) { 277 | result[index] = iteratee(index); 278 | } 279 | return result; 280 | } 281 | 282 | /** 283 | * The base implementation of `_.values` and `_.valuesIn` which creates an 284 | * array of `object` property values corresponding to the property names 285 | * of `props`. 286 | * 287 | * @private 288 | * @param {Object} object The object to query. 289 | * @param {Array} props The property names to get values for. 290 | * @returns {Object} Returns the array of property values. 291 | */ 292 | function baseValues(object, props) { 293 | return arrayMap(props, function(key) { 294 | return object[key]; 295 | }); 296 | } 297 | 298 | /** 299 | * Gets the value at `key` of `object`. 300 | * 301 | * @private 302 | * @param {Object} [object] The object to query. 303 | * @param {string} key The key of the property to get. 304 | * @returns {*} Returns the property value. 305 | */ 306 | function getValue(object, key) { 307 | return object == null ? undefined : object[key]; 308 | } 309 | 310 | /** 311 | * Checks if `string` contains Unicode symbols. 312 | * 313 | * @private 314 | * @param {string} string The string to inspect. 315 | * @returns {boolean} Returns `true` if a symbol is found, else `false`. 316 | */ 317 | function hasUnicode(string) { 318 | return reHasUnicode.test(string); 319 | } 320 | 321 | /** 322 | * Checks if `value` is a host object in IE < 9. 323 | * 324 | * @private 325 | * @param {*} value The value to check. 326 | * @returns {boolean} Returns `true` if `value` is a host object, else `false`. 327 | */ 328 | function isHostObject(value) { 329 | // Many host objects are `Object` objects that can coerce to strings 330 | // despite having improperly defined `toString` methods. 331 | var result = false; 332 | if (value != null && typeof value.toString != 'function') { 333 | try { 334 | result = !!(value + ''); 335 | } catch (e) {} 336 | } 337 | return result; 338 | } 339 | 340 | /** 341 | * Converts `iterator` to an array. 342 | * 343 | * @private 344 | * @param {Object} iterator The iterator to convert. 345 | * @returns {Array} Returns the converted array. 346 | */ 347 | function iteratorToArray(iterator) { 348 | var data, 349 | result = []; 350 | 351 | while (!(data = iterator.next()).done) { 352 | result.push(data.value); 353 | } 354 | return result; 355 | } 356 | 357 | /** 358 | * Converts `map` to its key-value pairs. 359 | * 360 | * @private 361 | * @param {Object} map The map to convert. 362 | * @returns {Array} Returns the key-value pairs. 363 | */ 364 | function mapToArray(map) { 365 | var index = -1, 366 | result = Array(map.size); 367 | 368 | map.forEach(function(value, key) { 369 | result[++index] = [key, value]; 370 | }); 371 | return result; 372 | } 373 | 374 | /** 375 | * Creates a unary function that invokes `func` with its argument transformed. 376 | * 377 | * @private 378 | * @param {Function} func The function to wrap. 379 | * @param {Function} transform The argument transform. 380 | * @returns {Function} Returns the new function. 381 | */ 382 | function overArg(func, transform) { 383 | return function(arg) { 384 | return func(transform(arg)); 385 | }; 386 | } 387 | 388 | /** 389 | * Converts `set` to an array of its values. 390 | * 391 | * @private 392 | * @param {Object} set The set to convert. 393 | * @returns {Array} Returns the values. 394 | */ 395 | function setToArray(set) { 396 | var index = -1, 397 | result = Array(set.size); 398 | 399 | set.forEach(function(value) { 400 | result[++index] = value; 401 | }); 402 | return result; 403 | } 404 | 405 | /** 406 | * Converts `string` to an array. 407 | * 408 | * @private 409 | * @param {string} string The string to convert. 410 | * @returns {Array} Returns the converted array. 411 | */ 412 | function stringToArray(string) { 413 | return hasUnicode(string) 414 | ? unicodeToArray(string) 415 | : asciiToArray(string); 416 | } 417 | 418 | /** 419 | * Converts a Unicode `string` to an array. 420 | * 421 | * @private 422 | * @param {string} string The string to convert. 423 | * @returns {Array} Returns the converted array. 424 | */ 425 | function unicodeToArray(string) { 426 | return string.match(reUnicode) || []; 427 | } 428 | 429 | /** Used for built-in method references. */ 430 | var funcProto = Function.prototype, 431 | objectProto = Object.prototype; 432 | 433 | /** Used to detect overreaching core-js shims. */ 434 | var coreJsData = root['__core-js_shared__']; 435 | 436 | /** Used to detect methods masquerading as native. */ 437 | var maskSrcKey = (function() { 438 | var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || ''); 439 | return uid ? ('Symbol(src)_1.' + uid) : ''; 440 | }()); 441 | 442 | /** Used to resolve the decompiled source of functions. */ 443 | var funcToString = funcProto.toString; 444 | 445 | /** Used to check objects for own properties. */ 446 | var hasOwnProperty = objectProto.hasOwnProperty; 447 | 448 | /** 449 | * Used to resolve the 450 | * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) 451 | * of values. 452 | */ 453 | var objectToString = objectProto.toString; 454 | 455 | /** Used to detect if a method is native. */ 456 | var reIsNative = RegExp('^' + 457 | funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&') 458 | .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$' 459 | ); 460 | 461 | /** Built-in value references. */ 462 | var Symbol = root.Symbol, 463 | iteratorSymbol = Symbol ? Symbol.iterator : undefined, 464 | propertyIsEnumerable = objectProto.propertyIsEnumerable; 465 | 466 | /* Built-in method references for those with the same name as other `lodash` methods. */ 467 | var nativeKeys = overArg(Object.keys, Object); 468 | 469 | /* Built-in method references that are verified to be native. */ 470 | var DataView = getNative(root, 'DataView'), 471 | Map = getNative(root, 'Map'), 472 | Promise = getNative(root, 'Promise'), 473 | Set = getNative(root, 'Set'), 474 | WeakMap = getNative(root, 'WeakMap'); 475 | 476 | /** Used to detect maps, sets, and weakmaps. */ 477 | var dataViewCtorString = toSource(DataView), 478 | mapCtorString = toSource(Map), 479 | promiseCtorString = toSource(Promise), 480 | setCtorString = toSource(Set), 481 | weakMapCtorString = toSource(WeakMap); 482 | 483 | /** 484 | * Creates an array of the enumerable property names of the array-like `value`. 485 | * 486 | * @private 487 | * @param {*} value The value to query. 488 | * @param {boolean} inherited Specify returning inherited property names. 489 | * @returns {Array} Returns the array of property names. 490 | */ 491 | function arrayLikeKeys(value, inherited) { 492 | // Safari 8.1 makes `arguments.callee` enumerable in strict mode. 493 | // Safari 9 makes `arguments.length` enumerable in strict mode. 494 | var result = (isArray(value) || isArguments(value)) 495 | ? baseTimes(value.length, String) 496 | : []; 497 | 498 | var length = result.length, 499 | skipIndexes = !!length; 500 | 501 | for (var key in value) { 502 | if ((inherited || hasOwnProperty.call(value, key)) && 503 | !(skipIndexes && (key == 'length' || isIndex(key, length)))) { 504 | result.push(key); 505 | } 506 | } 507 | return result; 508 | } 509 | 510 | /** 511 | * The base implementation of `getTag`. 512 | * 513 | * @private 514 | * @param {*} value The value to query. 515 | * @returns {string} Returns the `toStringTag`. 516 | */ 517 | function baseGetTag(value) { 518 | return objectToString.call(value); 519 | } 520 | 521 | /** 522 | * The base implementation of `_.isNative` without bad shim checks. 523 | * 524 | * @private 525 | * @param {*} value The value to check. 526 | * @returns {boolean} Returns `true` if `value` is a native function, 527 | * else `false`. 528 | */ 529 | function baseIsNative(value) { 530 | if (!isObject(value) || isMasked(value)) { 531 | return false; 532 | } 533 | var pattern = (isFunction(value) || isHostObject(value)) ? reIsNative : reIsHostCtor; 534 | return pattern.test(toSource(value)); 535 | } 536 | 537 | /** 538 | * The base implementation of `_.keys` which doesn't treat sparse arrays as dense. 539 | * 540 | * @private 541 | * @param {Object} object The object to query. 542 | * @returns {Array} Returns the array of property names. 543 | */ 544 | function baseKeys(object) { 545 | if (!isPrototype(object)) { 546 | return nativeKeys(object); 547 | } 548 | var result = []; 549 | for (var key in Object(object)) { 550 | if (hasOwnProperty.call(object, key) && key != 'constructor') { 551 | result.push(key); 552 | } 553 | } 554 | return result; 555 | } 556 | 557 | /** 558 | * Copies the values of `source` to `array`. 559 | * 560 | * @private 561 | * @param {Array} source The array to copy values from. 562 | * @param {Array} [array=[]] The array to copy values to. 563 | * @returns {Array} Returns `array`. 564 | */ 565 | function copyArray(source, array) { 566 | var index = -1, 567 | length = source.length; 568 | 569 | array || (array = Array(length)); 570 | while (++index < length) { 571 | array[index] = source[index]; 572 | } 573 | return array; 574 | } 575 | 576 | /** 577 | * Gets the native function at `key` of `object`. 578 | * 579 | * @private 580 | * @param {Object} object The object to query. 581 | * @param {string} key The key of the method to get. 582 | * @returns {*} Returns the function if it's native, else `undefined`. 583 | */ 584 | function getNative(object, key) { 585 | var value = getValue(object, key); 586 | return baseIsNative(value) ? value : undefined; 587 | } 588 | 589 | /** 590 | * Gets the `toStringTag` of `value`. 591 | * 592 | * @private 593 | * @param {*} value The value to query. 594 | * @returns {string} Returns the `toStringTag`. 595 | */ 596 | var getTag = baseGetTag; 597 | 598 | // Fallback for data views, maps, sets, and weak maps in IE 11, 599 | // for data views in Edge < 14, and promises in Node.js. 600 | if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) || 601 | (Map && getTag(new Map) != mapTag) || 602 | (Promise && getTag(Promise.resolve()) != promiseTag) || 603 | (Set && getTag(new Set) != setTag) || 604 | (WeakMap && getTag(new WeakMap) != weakMapTag)) { 605 | getTag = function(value) { 606 | var result = objectToString.call(value), 607 | Ctor = result == objectTag ? value.constructor : undefined, 608 | ctorString = Ctor ? toSource(Ctor) : undefined; 609 | 610 | if (ctorString) { 611 | switch (ctorString) { 612 | case dataViewCtorString: return dataViewTag; 613 | case mapCtorString: return mapTag; 614 | case promiseCtorString: return promiseTag; 615 | case setCtorString: return setTag; 616 | case weakMapCtorString: return weakMapTag; 617 | } 618 | } 619 | return result; 620 | }; 621 | } 622 | 623 | /** 624 | * Checks if `value` is a valid array-like index. 625 | * 626 | * @private 627 | * @param {*} value The value to check. 628 | * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index. 629 | * @returns {boolean} Returns `true` if `value` is a valid index, else `false`. 630 | */ 631 | function isIndex(value, length) { 632 | length = length == null ? MAX_SAFE_INTEGER : length; 633 | return !!length && 634 | (typeof value == 'number' || reIsUint.test(value)) && 635 | (value > -1 && value % 1 == 0 && value < length); 636 | } 637 | 638 | /** 639 | * Checks if `func` has its source masked. 640 | * 641 | * @private 642 | * @param {Function} func The function to check. 643 | * @returns {boolean} Returns `true` if `func` is masked, else `false`. 644 | */ 645 | function isMasked(func) { 646 | return !!maskSrcKey && (maskSrcKey in func); 647 | } 648 | 649 | /** 650 | * Checks if `value` is likely a prototype object. 651 | * 652 | * @private 653 | * @param {*} value The value to check. 654 | * @returns {boolean} Returns `true` if `value` is a prototype, else `false`. 655 | */ 656 | function isPrototype(value) { 657 | var Ctor = value && value.constructor, 658 | proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto; 659 | 660 | return value === proto; 661 | } 662 | 663 | /** 664 | * Converts `func` to its source code. 665 | * 666 | * @private 667 | * @param {Function} func The function to process. 668 | * @returns {string} Returns the source code. 669 | */ 670 | function toSource(func) { 671 | if (func != null) { 672 | try { 673 | return funcToString.call(func); 674 | } catch (e) {} 675 | try { 676 | return (func + ''); 677 | } catch (e) {} 678 | } 679 | return ''; 680 | } 681 | 682 | /** 683 | * Checks if `value` is likely an `arguments` object. 684 | * 685 | * @static 686 | * @memberOf _ 687 | * @since 0.1.0 688 | * @category Lang 689 | * @param {*} value The value to check. 690 | * @returns {boolean} Returns `true` if `value` is an `arguments` object, 691 | * else `false`. 692 | * @example 693 | * 694 | * _.isArguments(function() { return arguments; }()); 695 | * // => true 696 | * 697 | * _.isArguments([1, 2, 3]); 698 | * // => false 699 | */ 700 | function isArguments(value) { 701 | // Safari 8.1 makes `arguments.callee` enumerable in strict mode. 702 | return isArrayLikeObject(value) && hasOwnProperty.call(value, 'callee') && 703 | (!propertyIsEnumerable.call(value, 'callee') || objectToString.call(value) == argsTag); 704 | } 705 | 706 | /** 707 | * Checks if `value` is classified as an `Array` object. 708 | * 709 | * @static 710 | * @memberOf _ 711 | * @since 0.1.0 712 | * @category Lang 713 | * @param {*} value The value to check. 714 | * @returns {boolean} Returns `true` if `value` is an array, else `false`. 715 | * @example 716 | * 717 | * _.isArray([1, 2, 3]); 718 | * // => true 719 | * 720 | * _.isArray(document.body.children); 721 | * // => false 722 | * 723 | * _.isArray('abc'); 724 | * // => false 725 | * 726 | * _.isArray(_.noop); 727 | * // => false 728 | */ 729 | var isArray = Array.isArray; 730 | 731 | /** 732 | * Checks if `value` is array-like. A value is considered array-like if it's 733 | * not a function and has a `value.length` that's an integer greater than or 734 | * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`. 735 | * 736 | * @static 737 | * @memberOf _ 738 | * @since 4.0.0 739 | * @category Lang 740 | * @param {*} value The value to check. 741 | * @returns {boolean} Returns `true` if `value` is array-like, else `false`. 742 | * @example 743 | * 744 | * _.isArrayLike([1, 2, 3]); 745 | * // => true 746 | * 747 | * _.isArrayLike(document.body.children); 748 | * // => true 749 | * 750 | * _.isArrayLike('abc'); 751 | * // => true 752 | * 753 | * _.isArrayLike(_.noop); 754 | * // => false 755 | */ 756 | function isArrayLike(value) { 757 | return value != null && isLength(value.length) && !isFunction(value); 758 | } 759 | 760 | /** 761 | * This method is like `_.isArrayLike` except that it also checks if `value` 762 | * is an object. 763 | * 764 | * @static 765 | * @memberOf _ 766 | * @since 4.0.0 767 | * @category Lang 768 | * @param {*} value The value to check. 769 | * @returns {boolean} Returns `true` if `value` is an array-like object, 770 | * else `false`. 771 | * @example 772 | * 773 | * _.isArrayLikeObject([1, 2, 3]); 774 | * // => true 775 | * 776 | * _.isArrayLikeObject(document.body.children); 777 | * // => true 778 | * 779 | * _.isArrayLikeObject('abc'); 780 | * // => false 781 | * 782 | * _.isArrayLikeObject(_.noop); 783 | * // => false 784 | */ 785 | function isArrayLikeObject(value) { 786 | return isObjectLike(value) && isArrayLike(value); 787 | } 788 | 789 | /** 790 | * Checks if `value` is classified as a `Function` object. 791 | * 792 | * @static 793 | * @memberOf _ 794 | * @since 0.1.0 795 | * @category Lang 796 | * @param {*} value The value to check. 797 | * @returns {boolean} Returns `true` if `value` is a function, else `false`. 798 | * @example 799 | * 800 | * _.isFunction(_); 801 | * // => true 802 | * 803 | * _.isFunction(/abc/); 804 | * // => false 805 | */ 806 | function isFunction(value) { 807 | // The use of `Object#toString` avoids issues with the `typeof` operator 808 | // in Safari 8-9 which returns 'object' for typed array and other constructors. 809 | var tag = isObject(value) ? objectToString.call(value) : ''; 810 | return tag == funcTag || tag == genTag; 811 | } 812 | 813 | /** 814 | * Checks if `value` is a valid array-like length. 815 | * 816 | * **Note:** This method is loosely based on 817 | * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength). 818 | * 819 | * @static 820 | * @memberOf _ 821 | * @since 4.0.0 822 | * @category Lang 823 | * @param {*} value The value to check. 824 | * @returns {boolean} Returns `true` if `value` is a valid length, else `false`. 825 | * @example 826 | * 827 | * _.isLength(3); 828 | * // => true 829 | * 830 | * _.isLength(Number.MIN_VALUE); 831 | * // => false 832 | * 833 | * _.isLength(Infinity); 834 | * // => false 835 | * 836 | * _.isLength('3'); 837 | * // => false 838 | */ 839 | function isLength(value) { 840 | return typeof value == 'number' && 841 | value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER; 842 | } 843 | 844 | /** 845 | * Checks if `value` is the 846 | * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types) 847 | * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) 848 | * 849 | * @static 850 | * @memberOf _ 851 | * @since 0.1.0 852 | * @category Lang 853 | * @param {*} value The value to check. 854 | * @returns {boolean} Returns `true` if `value` is an object, else `false`. 855 | * @example 856 | * 857 | * _.isObject({}); 858 | * // => true 859 | * 860 | * _.isObject([1, 2, 3]); 861 | * // => true 862 | * 863 | * _.isObject(_.noop); 864 | * // => true 865 | * 866 | * _.isObject(null); 867 | * // => false 868 | */ 869 | function isObject(value) { 870 | var type = typeof value; 871 | return !!value && (type == 'object' || type == 'function'); 872 | } 873 | 874 | /** 875 | * Checks if `value` is object-like. A value is object-like if it's not `null` 876 | * and has a `typeof` result of "object". 877 | * 878 | * @static 879 | * @memberOf _ 880 | * @since 4.0.0 881 | * @category Lang 882 | * @param {*} value The value to check. 883 | * @returns {boolean} Returns `true` if `value` is object-like, else `false`. 884 | * @example 885 | * 886 | * _.isObjectLike({}); 887 | * // => true 888 | * 889 | * _.isObjectLike([1, 2, 3]); 890 | * // => true 891 | * 892 | * _.isObjectLike(_.noop); 893 | * // => false 894 | * 895 | * _.isObjectLike(null); 896 | * // => false 897 | */ 898 | function isObjectLike(value) { 899 | return !!value && typeof value == 'object'; 900 | } 901 | 902 | /** 903 | * Checks if `value` is classified as a `String` primitive or object. 904 | * 905 | * @static 906 | * @since 0.1.0 907 | * @memberOf _ 908 | * @category Lang 909 | * @param {*} value The value to check. 910 | * @returns {boolean} Returns `true` if `value` is a string, else `false`. 911 | * @example 912 | * 913 | * _.isString('abc'); 914 | * // => true 915 | * 916 | * _.isString(1); 917 | * // => false 918 | */ 919 | function isString(value) { 920 | return typeof value == 'string' || 921 | (!isArray(value) && isObjectLike(value) && objectToString.call(value) == stringTag); 922 | } 923 | 924 | /** 925 | * Converts `value` to an array. 926 | * 927 | * @static 928 | * @since 0.1.0 929 | * @memberOf _ 930 | * @category Lang 931 | * @param {*} value The value to convert. 932 | * @returns {Array} Returns the converted array. 933 | * @example 934 | * 935 | * _.toArray({ 'a': 1, 'b': 2 }); 936 | * // => [1, 2] 937 | * 938 | * _.toArray('abc'); 939 | * // => ['a', 'b', 'c'] 940 | * 941 | * _.toArray(1); 942 | * // => [] 943 | * 944 | * _.toArray(null); 945 | * // => [] 946 | */ 947 | function toArray(value) { 948 | if (!value) { 949 | return []; 950 | } 951 | if (isArrayLike(value)) { 952 | return isString(value) ? stringToArray(value) : copyArray(value); 953 | } 954 | if (iteratorSymbol && value[iteratorSymbol]) { 955 | return iteratorToArray(value[iteratorSymbol]()); 956 | } 957 | var tag = getTag(value), 958 | func = tag == mapTag ? mapToArray : (tag == setTag ? setToArray : values); 959 | 960 | return func(value); 961 | } 962 | 963 | /** 964 | * Creates an array of the own enumerable property names of `object`. 965 | * 966 | * **Note:** Non-object values are coerced to objects. See the 967 | * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys) 968 | * for more details. 969 | * 970 | * @static 971 | * @since 0.1.0 972 | * @memberOf _ 973 | * @category Object 974 | * @param {Object} object The object to query. 975 | * @returns {Array} Returns the array of property names. 976 | * @example 977 | * 978 | * function Foo() { 979 | * this.a = 1; 980 | * this.b = 2; 981 | * } 982 | * 983 | * Foo.prototype.c = 3; 984 | * 985 | * _.keys(new Foo); 986 | * // => ['a', 'b'] (iteration order is not guaranteed) 987 | * 988 | * _.keys('hi'); 989 | * // => ['0', '1'] 990 | */ 991 | function keys(object) { 992 | return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object); 993 | } 994 | 995 | /** 996 | * Creates an array of the own enumerable string keyed property values of `object`. 997 | * 998 | * **Note:** Non-object values are coerced to objects. 999 | * 1000 | * @static 1001 | * @since 0.1.0 1002 | * @memberOf _ 1003 | * @category Object 1004 | * @param {Object} object The object to query. 1005 | * @returns {Array} Returns the array of property values. 1006 | * @example 1007 | * 1008 | * function Foo() { 1009 | * this.a = 1; 1010 | * this.b = 2; 1011 | * } 1012 | * 1013 | * Foo.prototype.c = 3; 1014 | * 1015 | * _.values(new Foo); 1016 | * // => [1, 2] (iteration order is not guaranteed) 1017 | * 1018 | * _.values('hi'); 1019 | * // => ['h', 'i'] 1020 | */ 1021 | function values(object) { 1022 | return object ? baseValues(object, keys(object)) : []; 1023 | } 1024 | 1025 | module.exports = toArray; 1026 | 1027 | }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) 1028 | },{}],5:[function(require,module,exports){ 1029 | /** 1030 | * Copyright (c) 2013-present, Facebook, Inc. 1031 | * 1032 | * This source code is licensed under the MIT license found in the 1033 | * LICENSE file in the root directory of this source tree. 1034 | */ 1035 | 1036 | 'use strict'; 1037 | 1038 | if ("production" !== 'production') { 1039 | var invariant = require('fbjs/lib/invariant'); 1040 | var warning = require('fbjs/lib/warning'); 1041 | var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret'); 1042 | var loggedTypeFailures = {}; 1043 | } 1044 | 1045 | /** 1046 | * Assert that the values match with the type specs. 1047 | * Error messages are memorized and will only be shown once. 1048 | * 1049 | * @param {object} typeSpecs Map of name to a ReactPropType 1050 | * @param {object} values Runtime values that need to be type-checked 1051 | * @param {string} location e.g. "prop", "context", "child context" 1052 | * @param {string} componentName Name of the component for error messages. 1053 | * @param {?Function} getStack Returns the component stack. 1054 | * @private 1055 | */ 1056 | function checkPropTypes(typeSpecs, values, location, componentName, getStack) { 1057 | if ("production" !== 'production') { 1058 | for (var typeSpecName in typeSpecs) { 1059 | if (typeSpecs.hasOwnProperty(typeSpecName)) { 1060 | var error; 1061 | // Prop type validation may throw. In case they do, we don't want to 1062 | // fail the render phase where it didn't fail before. So we log it. 1063 | // After these have been cleaned up, we'll let them throw. 1064 | try { 1065 | // This is intentionally an invariant that gets caught. It's the same 1066 | // behavior as without this statement except with a better message. 1067 | invariant(typeof typeSpecs[typeSpecName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'the `prop-types` package, but received `%s`.', componentName || 'React class', location, typeSpecName, typeof typeSpecs[typeSpecName]); 1068 | error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret); 1069 | } catch (ex) { 1070 | error = ex; 1071 | } 1072 | 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); 1073 | if (error instanceof Error && !(error.message in loggedTypeFailures)) { 1074 | // Only monitor this failure once because there tends to be a lot of the 1075 | // same error. 1076 | loggedTypeFailures[error.message] = true; 1077 | 1078 | var stack = getStack ? getStack() : ''; 1079 | 1080 | warning(false, 'Failed %s type: %s%s', location, error.message, stack != null ? stack : ''); 1081 | } 1082 | } 1083 | } 1084 | } 1085 | } 1086 | 1087 | module.exports = checkPropTypes; 1088 | 1089 | },{"./lib/ReactPropTypesSecret":9,"fbjs/lib/invariant":2,"fbjs/lib/warning":3}],6:[function(require,module,exports){ 1090 | /** 1091 | * Copyright (c) 2013-present, Facebook, Inc. 1092 | * 1093 | * This source code is licensed under the MIT license found in the 1094 | * LICENSE file in the root directory of this source tree. 1095 | */ 1096 | 1097 | 'use strict'; 1098 | 1099 | var emptyFunction = require('fbjs/lib/emptyFunction'); 1100 | var invariant = require('fbjs/lib/invariant'); 1101 | var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret'); 1102 | 1103 | module.exports = function() { 1104 | function shim(props, propName, componentName, location, propFullName, secret) { 1105 | if (secret === ReactPropTypesSecret) { 1106 | // It is still safe when called from React. 1107 | return; 1108 | } 1109 | invariant( 1110 | false, 1111 | 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 1112 | 'Use PropTypes.checkPropTypes() to call them. ' + 1113 | 'Read more at http://fb.me/use-check-prop-types' 1114 | ); 1115 | }; 1116 | shim.isRequired = shim; 1117 | function getShim() { 1118 | return shim; 1119 | }; 1120 | // Important! 1121 | // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`. 1122 | var ReactPropTypes = { 1123 | array: shim, 1124 | bool: shim, 1125 | func: shim, 1126 | number: shim, 1127 | object: shim, 1128 | string: shim, 1129 | symbol: shim, 1130 | 1131 | any: shim, 1132 | arrayOf: getShim, 1133 | element: shim, 1134 | instanceOf: getShim, 1135 | node: shim, 1136 | objectOf: getShim, 1137 | oneOf: getShim, 1138 | oneOfType: getShim, 1139 | shape: getShim, 1140 | exact: getShim 1141 | }; 1142 | 1143 | ReactPropTypes.checkPropTypes = emptyFunction; 1144 | ReactPropTypes.PropTypes = ReactPropTypes; 1145 | 1146 | return ReactPropTypes; 1147 | }; 1148 | 1149 | },{"./lib/ReactPropTypesSecret":9,"fbjs/lib/emptyFunction":1,"fbjs/lib/invariant":2}],7:[function(require,module,exports){ 1150 | /** 1151 | * Copyright (c) 2013-present, Facebook, Inc. 1152 | * 1153 | * This source code is licensed under the MIT license found in the 1154 | * LICENSE file in the root directory of this source tree. 1155 | */ 1156 | 1157 | 'use strict'; 1158 | 1159 | var emptyFunction = require('fbjs/lib/emptyFunction'); 1160 | var invariant = require('fbjs/lib/invariant'); 1161 | var warning = require('fbjs/lib/warning'); 1162 | var assign = require('object-assign'); 1163 | 1164 | var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret'); 1165 | var checkPropTypes = require('./checkPropTypes'); 1166 | 1167 | module.exports = function(isValidElement, throwOnDirectAccess) { 1168 | /* global Symbol */ 1169 | var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator; 1170 | var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec. 1171 | 1172 | /** 1173 | * Returns the iterator method function contained on the iterable object. 1174 | * 1175 | * Be sure to invoke the function with the iterable as context: 1176 | * 1177 | * var iteratorFn = getIteratorFn(myIterable); 1178 | * if (iteratorFn) { 1179 | * var iterator = iteratorFn.call(myIterable); 1180 | * ... 1181 | * } 1182 | * 1183 | * @param {?object} maybeIterable 1184 | * @return {?function} 1185 | */ 1186 | function getIteratorFn(maybeIterable) { 1187 | var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]); 1188 | if (typeof iteratorFn === 'function') { 1189 | return iteratorFn; 1190 | } 1191 | } 1192 | 1193 | /** 1194 | * Collection of methods that allow declaration and validation of props that are 1195 | * supplied to React components. Example usage: 1196 | * 1197 | * var Props = require('ReactPropTypes'); 1198 | * var MyArticle = React.createClass({ 1199 | * propTypes: { 1200 | * // An optional string prop named "description". 1201 | * description: Props.string, 1202 | * 1203 | * // A required enum prop named "category". 1204 | * category: Props.oneOf(['News','Photos']).isRequired, 1205 | * 1206 | * // A prop named "dialog" that requires an instance of Dialog. 1207 | * dialog: Props.instanceOf(Dialog).isRequired 1208 | * }, 1209 | * render: function() { ... } 1210 | * }); 1211 | * 1212 | * A more formal specification of how these methods are used: 1213 | * 1214 | * type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...) 1215 | * decl := ReactPropTypes.{type}(.isRequired)? 1216 | * 1217 | * Each and every declaration produces a function with the same signature. This 1218 | * allows the creation of custom validation functions. For example: 1219 | * 1220 | * var MyLink = React.createClass({ 1221 | * propTypes: { 1222 | * // An optional string or URI prop named "href". 1223 | * href: function(props, propName, componentName) { 1224 | * var propValue = props[propName]; 1225 | * if (propValue != null && typeof propValue !== 'string' && 1226 | * !(propValue instanceof URI)) { 1227 | * return new Error( 1228 | * 'Expected a string or an URI for ' + propName + ' in ' + 1229 | * componentName 1230 | * ); 1231 | * } 1232 | * } 1233 | * }, 1234 | * render: function() {...} 1235 | * }); 1236 | * 1237 | * @internal 1238 | */ 1239 | 1240 | var ANONYMOUS = '<>'; 1241 | 1242 | // Important! 1243 | // Keep this list in sync with production version in `./factoryWithThrowingShims.js`. 1244 | var ReactPropTypes = { 1245 | array: createPrimitiveTypeChecker('array'), 1246 | bool: createPrimitiveTypeChecker('boolean'), 1247 | func: createPrimitiveTypeChecker('function'), 1248 | number: createPrimitiveTypeChecker('number'), 1249 | object: createPrimitiveTypeChecker('object'), 1250 | string: createPrimitiveTypeChecker('string'), 1251 | symbol: createPrimitiveTypeChecker('symbol'), 1252 | 1253 | any: createAnyTypeChecker(), 1254 | arrayOf: createArrayOfTypeChecker, 1255 | element: createElementTypeChecker(), 1256 | instanceOf: createInstanceTypeChecker, 1257 | node: createNodeChecker(), 1258 | objectOf: createObjectOfTypeChecker, 1259 | oneOf: createEnumTypeChecker, 1260 | oneOfType: createUnionTypeChecker, 1261 | shape: createShapeTypeChecker, 1262 | exact: createStrictShapeTypeChecker, 1263 | }; 1264 | 1265 | /** 1266 | * inlined Object.is polyfill to avoid requiring consumers ship their own 1267 | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is 1268 | */ 1269 | /*eslint-disable no-self-compare*/ 1270 | function is(x, y) { 1271 | // SameValue algorithm 1272 | if (x === y) { 1273 | // Steps 1-5, 7-10 1274 | // Steps 6.b-6.e: +0 != -0 1275 | return x !== 0 || 1 / x === 1 / y; 1276 | } else { 1277 | // Step 6.a: NaN == NaN 1278 | return x !== x && y !== y; 1279 | } 1280 | } 1281 | /*eslint-enable no-self-compare*/ 1282 | 1283 | /** 1284 | * We use an Error-like object for backward compatibility as people may call 1285 | * PropTypes directly and inspect their output. However, we don't use real 1286 | * Errors anymore. We don't inspect their stack anyway, and creating them 1287 | * is prohibitively expensive if they are created too often, such as what 1288 | * happens in oneOfType() for any type before the one that matched. 1289 | */ 1290 | function PropTypeError(message) { 1291 | this.message = message; 1292 | this.stack = ''; 1293 | } 1294 | // Make `instanceof Error` still work for returned errors. 1295 | PropTypeError.prototype = Error.prototype; 1296 | 1297 | function createChainableTypeChecker(validate) { 1298 | if ("production" !== 'production') { 1299 | var manualPropTypeCallCache = {}; 1300 | var manualPropTypeWarningCount = 0; 1301 | } 1302 | function checkType(isRequired, props, propName, componentName, location, propFullName, secret) { 1303 | componentName = componentName || ANONYMOUS; 1304 | propFullName = propFullName || propName; 1305 | 1306 | if (secret !== ReactPropTypesSecret) { 1307 | if (throwOnDirectAccess) { 1308 | // New behavior only for users of `prop-types` package 1309 | invariant( 1310 | false, 1311 | 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 1312 | 'Use `PropTypes.checkPropTypes()` to call them. ' + 1313 | 'Read more at http://fb.me/use-check-prop-types' 1314 | ); 1315 | } else if ("production" !== 'production' && typeof console !== 'undefined') { 1316 | // Old behavior for people using React.PropTypes 1317 | var cacheKey = componentName + ':' + propName; 1318 | if ( 1319 | !manualPropTypeCallCache[cacheKey] && 1320 | // Avoid spamming the console because they are often not actionable except for lib authors 1321 | manualPropTypeWarningCount < 3 1322 | ) { 1323 | warning( 1324 | false, 1325 | 'You are manually calling a React.PropTypes validation ' + 1326 | 'function for the `%s` prop on `%s`. This is deprecated ' + 1327 | 'and will throw in the standalone `prop-types` package. ' + 1328 | 'You may be seeing this warning due to a third-party PropTypes ' + 1329 | 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.', 1330 | propFullName, 1331 | componentName 1332 | ); 1333 | manualPropTypeCallCache[cacheKey] = true; 1334 | manualPropTypeWarningCount++; 1335 | } 1336 | } 1337 | } 1338 | if (props[propName] == null) { 1339 | if (isRequired) { 1340 | if (props[propName] === null) { 1341 | return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.')); 1342 | } 1343 | return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.')); 1344 | } 1345 | return null; 1346 | } else { 1347 | return validate(props, propName, componentName, location, propFullName); 1348 | } 1349 | } 1350 | 1351 | var chainedCheckType = checkType.bind(null, false); 1352 | chainedCheckType.isRequired = checkType.bind(null, true); 1353 | 1354 | return chainedCheckType; 1355 | } 1356 | 1357 | function createPrimitiveTypeChecker(expectedType) { 1358 | function validate(props, propName, componentName, location, propFullName, secret) { 1359 | var propValue = props[propName]; 1360 | var propType = getPropType(propValue); 1361 | if (propType !== expectedType) { 1362 | // `propValue` being instance of, say, date/regexp, pass the 'object' 1363 | // check, but we can offer a more precise error message here rather than 1364 | // 'of type `object`'. 1365 | var preciseType = getPreciseType(propValue); 1366 | 1367 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.')); 1368 | } 1369 | return null; 1370 | } 1371 | return createChainableTypeChecker(validate); 1372 | } 1373 | 1374 | function createAnyTypeChecker() { 1375 | return createChainableTypeChecker(emptyFunction.thatReturnsNull); 1376 | } 1377 | 1378 | function createArrayOfTypeChecker(typeChecker) { 1379 | function validate(props, propName, componentName, location, propFullName) { 1380 | if (typeof typeChecker !== 'function') { 1381 | return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.'); 1382 | } 1383 | var propValue = props[propName]; 1384 | if (!Array.isArray(propValue)) { 1385 | var propType = getPropType(propValue); 1386 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.')); 1387 | } 1388 | for (var i = 0; i < propValue.length; i++) { 1389 | var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret); 1390 | if (error instanceof Error) { 1391 | return error; 1392 | } 1393 | } 1394 | return null; 1395 | } 1396 | return createChainableTypeChecker(validate); 1397 | } 1398 | 1399 | function createElementTypeChecker() { 1400 | function validate(props, propName, componentName, location, propFullName) { 1401 | var propValue = props[propName]; 1402 | if (!isValidElement(propValue)) { 1403 | var propType = getPropType(propValue); 1404 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.')); 1405 | } 1406 | return null; 1407 | } 1408 | return createChainableTypeChecker(validate); 1409 | } 1410 | 1411 | function createInstanceTypeChecker(expectedClass) { 1412 | function validate(props, propName, componentName, location, propFullName) { 1413 | if (!(props[propName] instanceof expectedClass)) { 1414 | var expectedClassName = expectedClass.name || ANONYMOUS; 1415 | var actualClassName = getClassName(props[propName]); 1416 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.')); 1417 | } 1418 | return null; 1419 | } 1420 | return createChainableTypeChecker(validate); 1421 | } 1422 | 1423 | function createEnumTypeChecker(expectedValues) { 1424 | if (!Array.isArray(expectedValues)) { 1425 | "production" !== 'production' ? warning(false, 'Invalid argument supplied to oneOf, expected an instance of array.') : void 0; 1426 | return emptyFunction.thatReturnsNull; 1427 | } 1428 | 1429 | function validate(props, propName, componentName, location, propFullName) { 1430 | var propValue = props[propName]; 1431 | for (var i = 0; i < expectedValues.length; i++) { 1432 | if (is(propValue, expectedValues[i])) { 1433 | return null; 1434 | } 1435 | } 1436 | 1437 | var valuesString = JSON.stringify(expectedValues); 1438 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.')); 1439 | } 1440 | return createChainableTypeChecker(validate); 1441 | } 1442 | 1443 | function createObjectOfTypeChecker(typeChecker) { 1444 | function validate(props, propName, componentName, location, propFullName) { 1445 | if (typeof typeChecker !== 'function') { 1446 | return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.'); 1447 | } 1448 | var propValue = props[propName]; 1449 | var propType = getPropType(propValue); 1450 | if (propType !== 'object') { 1451 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.')); 1452 | } 1453 | for (var key in propValue) { 1454 | if (propValue.hasOwnProperty(key)) { 1455 | var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret); 1456 | if (error instanceof Error) { 1457 | return error; 1458 | } 1459 | } 1460 | } 1461 | return null; 1462 | } 1463 | return createChainableTypeChecker(validate); 1464 | } 1465 | 1466 | function createUnionTypeChecker(arrayOfTypeCheckers) { 1467 | if (!Array.isArray(arrayOfTypeCheckers)) { 1468 | "production" !== 'production' ? warning(false, 'Invalid argument supplied to oneOfType, expected an instance of array.') : void 0; 1469 | return emptyFunction.thatReturnsNull; 1470 | } 1471 | 1472 | for (var i = 0; i < arrayOfTypeCheckers.length; i++) { 1473 | var checker = arrayOfTypeCheckers[i]; 1474 | if (typeof checker !== 'function') { 1475 | warning( 1476 | false, 1477 | 'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' + 1478 | 'received %s at index %s.', 1479 | getPostfixForTypeWarning(checker), 1480 | i 1481 | ); 1482 | return emptyFunction.thatReturnsNull; 1483 | } 1484 | } 1485 | 1486 | function validate(props, propName, componentName, location, propFullName) { 1487 | for (var i = 0; i < arrayOfTypeCheckers.length; i++) { 1488 | var checker = arrayOfTypeCheckers[i]; 1489 | if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret) == null) { 1490 | return null; 1491 | } 1492 | } 1493 | 1494 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.')); 1495 | } 1496 | return createChainableTypeChecker(validate); 1497 | } 1498 | 1499 | function createNodeChecker() { 1500 | function validate(props, propName, componentName, location, propFullName) { 1501 | if (!isNode(props[propName])) { 1502 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.')); 1503 | } 1504 | return null; 1505 | } 1506 | return createChainableTypeChecker(validate); 1507 | } 1508 | 1509 | function createShapeTypeChecker(shapeTypes) { 1510 | function validate(props, propName, componentName, location, propFullName) { 1511 | var propValue = props[propName]; 1512 | var propType = getPropType(propValue); 1513 | if (propType !== 'object') { 1514 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.')); 1515 | } 1516 | for (var key in shapeTypes) { 1517 | var checker = shapeTypes[key]; 1518 | if (!checker) { 1519 | continue; 1520 | } 1521 | var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret); 1522 | if (error) { 1523 | return error; 1524 | } 1525 | } 1526 | return null; 1527 | } 1528 | return createChainableTypeChecker(validate); 1529 | } 1530 | 1531 | function createStrictShapeTypeChecker(shapeTypes) { 1532 | function validate(props, propName, componentName, location, propFullName) { 1533 | var propValue = props[propName]; 1534 | var propType = getPropType(propValue); 1535 | if (propType !== 'object') { 1536 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.')); 1537 | } 1538 | // We need to check all keys in case some are required but missing from 1539 | // props. 1540 | var allKeys = assign({}, props[propName], shapeTypes); 1541 | for (var key in allKeys) { 1542 | var checker = shapeTypes[key]; 1543 | if (!checker) { 1544 | return new PropTypeError( 1545 | 'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' + 1546 | '\nBad object: ' + JSON.stringify(props[propName], null, ' ') + 1547 | '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, ' ') 1548 | ); 1549 | } 1550 | var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret); 1551 | if (error) { 1552 | return error; 1553 | } 1554 | } 1555 | return null; 1556 | } 1557 | 1558 | return createChainableTypeChecker(validate); 1559 | } 1560 | 1561 | function isNode(propValue) { 1562 | switch (typeof propValue) { 1563 | case 'number': 1564 | case 'string': 1565 | case 'undefined': 1566 | return true; 1567 | case 'boolean': 1568 | return !propValue; 1569 | case 'object': 1570 | if (Array.isArray(propValue)) { 1571 | return propValue.every(isNode); 1572 | } 1573 | if (propValue === null || isValidElement(propValue)) { 1574 | return true; 1575 | } 1576 | 1577 | var iteratorFn = getIteratorFn(propValue); 1578 | if (iteratorFn) { 1579 | var iterator = iteratorFn.call(propValue); 1580 | var step; 1581 | if (iteratorFn !== propValue.entries) { 1582 | while (!(step = iterator.next()).done) { 1583 | if (!isNode(step.value)) { 1584 | return false; 1585 | } 1586 | } 1587 | } else { 1588 | // Iterator will provide entry [k,v] tuples rather than values. 1589 | while (!(step = iterator.next()).done) { 1590 | var entry = step.value; 1591 | if (entry) { 1592 | if (!isNode(entry[1])) { 1593 | return false; 1594 | } 1595 | } 1596 | } 1597 | } 1598 | } else { 1599 | return false; 1600 | } 1601 | 1602 | return true; 1603 | default: 1604 | return false; 1605 | } 1606 | } 1607 | 1608 | function isSymbol(propType, propValue) { 1609 | // Native Symbol. 1610 | if (propType === 'symbol') { 1611 | return true; 1612 | } 1613 | 1614 | // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol' 1615 | if (propValue['@@toStringTag'] === 'Symbol') { 1616 | return true; 1617 | } 1618 | 1619 | // Fallback for non-spec compliant Symbols which are polyfilled. 1620 | if (typeof Symbol === 'function' && propValue instanceof Symbol) { 1621 | return true; 1622 | } 1623 | 1624 | return false; 1625 | } 1626 | 1627 | // Equivalent of `typeof` but with special handling for array and regexp. 1628 | function getPropType(propValue) { 1629 | var propType = typeof propValue; 1630 | if (Array.isArray(propValue)) { 1631 | return 'array'; 1632 | } 1633 | if (propValue instanceof RegExp) { 1634 | // Old webkits (at least until Android 4.0) return 'function' rather than 1635 | // 'object' for typeof a RegExp. We'll normalize this here so that /bla/ 1636 | // passes PropTypes.object. 1637 | return 'object'; 1638 | } 1639 | if (isSymbol(propType, propValue)) { 1640 | return 'symbol'; 1641 | } 1642 | return propType; 1643 | } 1644 | 1645 | // This handles more types than `getPropType`. Only used for error messages. 1646 | // See `createPrimitiveTypeChecker`. 1647 | function getPreciseType(propValue) { 1648 | if (typeof propValue === 'undefined' || propValue === null) { 1649 | return '' + propValue; 1650 | } 1651 | var propType = getPropType(propValue); 1652 | if (propType === 'object') { 1653 | if (propValue instanceof Date) { 1654 | return 'date'; 1655 | } else if (propValue instanceof RegExp) { 1656 | return 'regexp'; 1657 | } 1658 | } 1659 | return propType; 1660 | } 1661 | 1662 | // Returns a string that is postfixed to a warning about an invalid type. 1663 | // For example, "undefined" or "of type array" 1664 | function getPostfixForTypeWarning(value) { 1665 | var type = getPreciseType(value); 1666 | switch (type) { 1667 | case 'array': 1668 | case 'object': 1669 | return 'an ' + type; 1670 | case 'boolean': 1671 | case 'date': 1672 | case 'regexp': 1673 | return 'a ' + type; 1674 | default: 1675 | return type; 1676 | } 1677 | } 1678 | 1679 | // Returns class name of the object, if any. 1680 | function getClassName(propValue) { 1681 | if (!propValue.constructor || !propValue.constructor.name) { 1682 | return ANONYMOUS; 1683 | } 1684 | return propValue.constructor.name; 1685 | } 1686 | 1687 | ReactPropTypes.checkPropTypes = checkPropTypes; 1688 | ReactPropTypes.PropTypes = ReactPropTypes; 1689 | 1690 | return ReactPropTypes; 1691 | }; 1692 | 1693 | },{"./checkPropTypes":5,"./lib/ReactPropTypesSecret":9,"fbjs/lib/emptyFunction":1,"fbjs/lib/invariant":2,"fbjs/lib/warning":3,"object-assign":10}],8:[function(require,module,exports){ 1694 | /** 1695 | * Copyright (c) 2013-present, Facebook, Inc. 1696 | * 1697 | * This source code is licensed under the MIT license found in the 1698 | * LICENSE file in the root directory of this source tree. 1699 | */ 1700 | 1701 | if ("production" !== 'production') { 1702 | var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' && 1703 | Symbol.for && 1704 | Symbol.for('react.element')) || 1705 | 0xeac7; 1706 | 1707 | var isValidElement = function(object) { 1708 | return typeof object === 'object' && 1709 | object !== null && 1710 | object.$$typeof === REACT_ELEMENT_TYPE; 1711 | }; 1712 | 1713 | // By explicitly using `prop-types` you are opting into new development behavior. 1714 | // http://fb.me/prop-types-in-prod 1715 | var throwOnDirectAccess = true; 1716 | module.exports = require('./factoryWithTypeCheckers')(isValidElement, throwOnDirectAccess); 1717 | } else { 1718 | // By explicitly using `prop-types` you are opting into new production behavior. 1719 | // http://fb.me/prop-types-in-prod 1720 | module.exports = require('./factoryWithThrowingShims')(); 1721 | } 1722 | 1723 | },{"./factoryWithThrowingShims":6,"./factoryWithTypeCheckers":7}],9:[function(require,module,exports){ 1724 | /** 1725 | * Copyright (c) 2013-present, Facebook, Inc. 1726 | * 1727 | * This source code is licensed under the MIT license found in the 1728 | * LICENSE file in the root directory of this source tree. 1729 | */ 1730 | 1731 | 'use strict'; 1732 | 1733 | var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; 1734 | 1735 | module.exports = ReactPropTypesSecret; 1736 | 1737 | },{}],10:[function(require,module,exports){ 1738 | /* 1739 | object-assign 1740 | (c) Sindre Sorhus 1741 | @license MIT 1742 | */ 1743 | 1744 | 'use strict'; 1745 | /* eslint-disable no-unused-vars */ 1746 | var getOwnPropertySymbols = Object.getOwnPropertySymbols; 1747 | var hasOwnProperty = Object.prototype.hasOwnProperty; 1748 | var propIsEnumerable = Object.prototype.propertyIsEnumerable; 1749 | 1750 | function toObject(val) { 1751 | if (val === null || val === undefined) { 1752 | throw new TypeError('Object.assign cannot be called with null or undefined'); 1753 | } 1754 | 1755 | return Object(val); 1756 | } 1757 | 1758 | function shouldUseNative() { 1759 | try { 1760 | if (!Object.assign) { 1761 | return false; 1762 | } 1763 | 1764 | // Detect buggy property enumeration order in older V8 versions. 1765 | 1766 | // https://bugs.chromium.org/p/v8/issues/detail?id=4118 1767 | var test1 = new String('abc'); // eslint-disable-line no-new-wrappers 1768 | test1[5] = 'de'; 1769 | if (Object.getOwnPropertyNames(test1)[0] === '5') { 1770 | return false; 1771 | } 1772 | 1773 | // https://bugs.chromium.org/p/v8/issues/detail?id=3056 1774 | var test2 = {}; 1775 | for (var i = 0; i < 10; i++) { 1776 | test2['_' + String.fromCharCode(i)] = i; 1777 | } 1778 | var order2 = Object.getOwnPropertyNames(test2).map(function (n) { 1779 | return test2[n]; 1780 | }); 1781 | if (order2.join('') !== '0123456789') { 1782 | return false; 1783 | } 1784 | 1785 | // https://bugs.chromium.org/p/v8/issues/detail?id=3056 1786 | var test3 = {}; 1787 | 'abcdefghijklmnopqrst'.split('').forEach(function (letter) { 1788 | test3[letter] = letter; 1789 | }); 1790 | if (Object.keys(Object.assign({}, test3)).join('') !== 1791 | 'abcdefghijklmnopqrst') { 1792 | return false; 1793 | } 1794 | 1795 | return true; 1796 | } catch (err) { 1797 | // We don't expect any of the above to throw, but better to be safe. 1798 | return false; 1799 | } 1800 | } 1801 | 1802 | module.exports = shouldUseNative() ? Object.assign : function (target, source) { 1803 | var from; 1804 | var to = toObject(target); 1805 | var symbols; 1806 | 1807 | for (var s = 1; s < arguments.length; s++) { 1808 | from = Object(arguments[s]); 1809 | 1810 | for (var key in from) { 1811 | if (hasOwnProperty.call(from, key)) { 1812 | to[key] = from[key]; 1813 | } 1814 | } 1815 | 1816 | if (getOwnPropertySymbols) { 1817 | symbols = getOwnPropertySymbols(from); 1818 | for (var i = 0; i < symbols.length; i++) { 1819 | if (propIsEnumerable.call(from, symbols[i])) { 1820 | to[symbols[i]] = from[symbols[i]]; 1821 | } 1822 | } 1823 | } 1824 | } 1825 | 1826 | return to; 1827 | }; 1828 | 1829 | },{}],11:[function(require,module,exports){ 1830 | (function (global){ 1831 | 'use strict'; 1832 | 1833 | Object.defineProperty(exports, '__esModule', { 1834 | value: true 1835 | }); 1836 | 1837 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 1838 | 1839 | 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; }; })(); 1840 | 1841 | 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); } } }; 1842 | 1843 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 1844 | 1845 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } 1846 | 1847 | 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; } 1848 | 1849 | var React = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null); 1850 | var PropTypes = require('prop-types'); 1851 | var toArray = require('lodash.toarray'); 1852 | 1853 | var ReactRotatingText = (function (_React$Component) { 1854 | _inherits(ReactRotatingText, _React$Component); 1855 | 1856 | function ReactRotatingText(props) { 1857 | _classCallCheck(this, ReactRotatingText); 1858 | 1859 | _get(Object.getPrototypeOf(ReactRotatingText.prototype), 'constructor', this).call(this, props); 1860 | var _props = this.props; 1861 | var items = _props.items; 1862 | var random = _props.random; 1863 | 1864 | this.state = { 1865 | index: random ? Math.floor(Math.random() * Math.floor(items.length)) : 0, 1866 | output: '', 1867 | substrLength: 0 1868 | }; 1869 | this.timeouts = []; 1870 | } 1871 | 1872 | _createClass(ReactRotatingText, [{ 1873 | key: 'componentDidMount', 1874 | value: function componentDidMount() { 1875 | this._animate.bind(this)(); // begin the animation loop 1876 | } 1877 | }, { 1878 | key: 'componentWillUnmount', 1879 | value: function componentWillUnmount() { 1880 | this.timeouts.map(function (x) { 1881 | return clearTimeout(x); 1882 | }); // stop all the loops 1883 | } 1884 | }, { 1885 | key: '_loop', 1886 | value: function _loop(loopingFunc, pause) { 1887 | // save the timeouts so we can stop on unmount 1888 | var timeout = setTimeout(loopingFunc, pause); 1889 | this.timeouts.push(timeout); 1890 | 1891 | // prevent memory leak 1892 | var maxTimeouts = 100; 1893 | if (this.timeouts.length > maxTimeouts) { 1894 | clearTimeout(this.timeouts[0]); 1895 | this.timeouts.shift(); 1896 | } 1897 | } 1898 | }, { 1899 | key: '_type', 1900 | value: function _type(text, callback) { 1901 | var output = this.state.output; 1902 | var typingInterval = this.props.typingInterval; 1903 | 1904 | var loopingFunc = this._type.bind(this, text, callback); 1905 | var word = toArray(text); 1906 | 1907 | // set the string one character longer 1908 | this.setState({ output: word.slice(0, toArray(output).length + 1).join('') }); 1909 | 1910 | // if we're still not done, recursively loop again 1911 | if (output.length < word.length) { 1912 | this._loop(loopingFunc, typingInterval); 1913 | } else { 1914 | if (typeof this.props.onTypingEnd == 'function') { 1915 | this.props.onTypingEnd(); 1916 | } 1917 | callback(); 1918 | } 1919 | } 1920 | }, { 1921 | key: '_erase', 1922 | value: function _erase(callback) { 1923 | var output = this.state.output; 1924 | var deletingInterval = this.props.deletingInterval; 1925 | 1926 | var loopingFunc = this._erase.bind(this, callback); 1927 | var word = toArray(output); 1928 | 1929 | if (typeof this.props.onDeletingStart == 'function') { 1930 | this.props.onDeletingStart(); 1931 | } 1932 | // set the string one character shorter 1933 | this.setState({ output: word.slice(0, word.length - 1).join('') }); 1934 | 1935 | // if we're still not done, recursively loop again 1936 | if (word.length !== 0) { 1937 | this._loop(loopingFunc, deletingInterval); 1938 | } else { 1939 | if (typeof this.props.onDeletingEnd == 'function') { 1940 | this.props.onDeletingEnd(); 1941 | } 1942 | callback(); 1943 | } 1944 | } 1945 | }, { 1946 | key: '_overwrite', 1947 | value: function _overwrite(text, callback) { 1948 | var _state = this.state; 1949 | var output = _state.output; 1950 | var substrLength = _state.substrLength; 1951 | var deletingInterval = this.props.deletingInterval; 1952 | 1953 | var loopingFunc = this._overwrite.bind(this, text, callback); 1954 | var word = toArray(text); 1955 | var out = toArray(output); 1956 | 1957 | this.setState({ 1958 | output: word.slice(0, substrLength).concat(out.slice(substrLength)), 1959 | substrLength: substrLength + 1 1960 | }); 1961 | 1962 | if (word.length !== substrLength) { 1963 | this._loop(loopingFunc, deletingInterval); 1964 | } else { 1965 | this.setState({ 1966 | output: text, 1967 | substrLength: 0 1968 | }); 1969 | callback(); 1970 | } 1971 | } 1972 | }, { 1973 | key: '_animate', 1974 | value: function _animate() { 1975 | var _this = this; 1976 | 1977 | var index = this.state.index; 1978 | var _props2 = this.props; 1979 | var items = _props2.items; 1980 | var pause = _props2.pause; 1981 | var emptyPause = _props2.emptyPause; 1982 | var eraseMode = _props2.eraseMode; 1983 | var random = _props2.random; 1984 | 1985 | var type = this._type; 1986 | var erase = this._erase; 1987 | var overwrite = this._overwrite; 1988 | var loopingFunc = this._animate.bind(this); 1989 | var nextIndex = undefined; 1990 | if (random) { 1991 | nextIndex = Math.floor(Math.random() * Math.floor(items.length)); 1992 | } else { 1993 | nextIndex = index === items.length - 1 ? 0 : index + 1; 1994 | } 1995 | 1996 | var nextWord = function nextWord() { 1997 | _this.setState({ index: nextIndex }); 1998 | _this._loop(loopingFunc, emptyPause); 1999 | }; 2000 | 2001 | if (typeof this.props.onTypingStart == 'function') { 2002 | this.props.onTypingStart(); 2003 | } 2004 | 2005 | type.bind(this)(items[index], function () { 2006 | if (eraseMode === 'overwrite') { 2007 | _this._loop(overwrite.bind(_this, items[nextIndex], nextWord), pause); 2008 | } else { 2009 | _this._loop(erase.bind(_this, nextWord), pause); 2010 | } 2011 | }); 2012 | } 2013 | }, { 2014 | key: 'render', 2015 | value: function render() { 2016 | var _props3 = this.props; 2017 | var color = _props3.color; 2018 | var cursor = _props3.cursor; 2019 | var deletingInterval = _props3.deletingInterval; 2020 | var emptyPause = _props3.emptyPause; 2021 | var items = _props3.items; 2022 | var pause = _props3.pause; 2023 | var eraseMode = _props3.eraseMode; 2024 | var typingInterval = _props3.typingInterval; 2025 | var random = _props3.random; 2026 | 2027 | var other = _objectWithoutProperties(_props3, ['color', 'cursor', 'deletingInterval', 'emptyPause', 'items', 'pause', 'eraseMode', 'typingInterval', 'random']); 2028 | 2029 | return React.createElement( 2030 | 'span', 2031 | _extends({ style: { color: color } }, other, { 2032 | 'aria-label': this.props.items[this.state.index] }), 2033 | this.state.output, 2034 | cursor ? React.createElement( 2035 | 'span', 2036 | { className: 'react-rotating-text-cursor' }, 2037 | '|' 2038 | ) : null 2039 | ); 2040 | } 2041 | }]); 2042 | 2043 | return ReactRotatingText; 2044 | })(React.Component); 2045 | 2046 | ReactRotatingText.propTypes = { 2047 | color: PropTypes.string, 2048 | cursor: PropTypes.bool, 2049 | deletingInterval: PropTypes.number, 2050 | emptyPause: PropTypes.number, 2051 | eraseMode: PropTypes.string, 2052 | items: PropTypes.array, 2053 | pause: PropTypes.number, 2054 | typingInterval: PropTypes.number, 2055 | random: PropTypes.bool, 2056 | onTypingStart: PropTypes.func, 2057 | onTypingEnd: PropTypes.func, 2058 | onDeletingStart: PropTypes.func, 2059 | onDeletingEnd: PropTypes.func 2060 | }; 2061 | 2062 | ReactRotatingText.defaultProps = { 2063 | color: 'inherit', 2064 | cursor: true, 2065 | deletingInterval: 50, 2066 | emptyPause: 1000, 2067 | eraseMode: 'erase', 2068 | items: ['first', 'second', 'third', 'fourth', 'fifth'], 2069 | pause: 1500, 2070 | typingInterval: 50, 2071 | random: false 2072 | }; 2073 | 2074 | exports['default'] = ReactRotatingText; 2075 | module.exports = exports['default']; 2076 | 2077 | }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) 2078 | },{"lodash.toarray":4,"prop-types":8}]},{},[11])(11) 2079 | }); -------------------------------------------------------------------------------- /dist/react-rotating-text.min.js: -------------------------------------------------------------------------------- 1 | !function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.ReactRotatingText=t()}}(function(){return function t(e,n,r){function o(u,a){if(!n[u]){if(!e[u]){var c="function"==typeof require&&require;if(!a&&c)return c(u,!0);if(i)return i(u,!0);var f=new Error("Cannot find module '"+u+"'");throw f.code="MODULE_NOT_FOUND",f}var s=n[u]={exports:{}};e[u][0].call(s.exports,function(t){var n=e[u][1][t];return o(n?n:t)},s,s.exports,t,e,n,r)}return n[u].exports}for(var i="function"==typeof require&&require,u=0;u-1&&t%1==0&&t-1&&t%1==0&&t<=F}function R(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function I(t){return!!t&&"object"==typeof t}function A(t){return"string"==typeof t||!$t(t)&&I(t)&&Tt.call(t)==B}function M(t){if(!t)return[];if(S(t))return A(t)?y(t):m(t);if(_t&&t[_t])return f(t[_t]());var e=Wt(t),n=e==W?s:e==V?p:N;return n(t)}function D(t){return S(t)?h(t):g(t)}function N(t){return t?i(t,D(t)):[]}var F=9007199254740991,q="[object Arguments]",C="[object Function]",L="[object GeneratorFunction]",W="[object Map]",$="[object Object]",U="[object Promise]",V="[object Set]",B="[object String]",J="[object WeakMap]",z="[object DataView]",G=/[\\^$.*+?()[\]{}|]/g,H=/^\[object .+?Constructor\]$/,Y=/^(?:0|[1-9]\d*)$/,K="\\ud800-\\udfff",Q="\\u0300-\\u036f\\ufe20-\\ufe23",X="\\u20d0-\\u20f0",Z="\\ufe0e\\ufe0f",tt="["+K+"]",et="["+Q+X+"]",nt="\\ud83c[\\udffb-\\udfff]",rt="(?:"+et+"|"+nt+")",ot="[^"+K+"]",it="(?:\\ud83c[\\udde6-\\uddff]){2}",ut="[\\ud800-\\udbff][\\udc00-\\udfff]",at="\\u200d",ct=rt+"?",ft="["+Z+"]?",st="(?:"+at+"(?:"+[ot,it,ut].join("|")+")"+ft+ct+")*",lt=ft+ct+st,pt="(?:"+[ot+et+"?",et,it,ut,tt].join("|")+")",yt=RegExp(nt+"(?="+nt+")|"+pt+lt,"g"),dt=RegExp("["+at+K+Q+X+Z+"]"),ht="object"==typeof t&&t&&t.Object===Object&&t,vt="object"==typeof self&&self&&self.Object===Object&&self,bt=ht||vt||Function("return this")(),gt=Function.prototype,mt=Object.prototype,jt=bt["__core-js_shared__"],wt=function(){var t=/[^.]+$/.exec(jt&&jt.keys&&jt.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),Ot=gt.toString,xt=mt.hasOwnProperty,Tt=mt.toString,Pt=RegExp("^"+Ot.call(xt).replace(G,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),St=bt.Symbol,_t=St?St.iterator:void 0,kt=mt.propertyIsEnumerable,Et=l(Object.keys,Object),Rt=j(bt,"DataView"),It=j(bt,"Map"),At=j(bt,"Promise"),Mt=j(bt,"Set"),Dt=j(bt,"WeakMap"),Nt=T(Rt),Ft=T(It),qt=T(At),Ct=T(Mt),Lt=T(Dt),Wt=v;(Rt&&Wt(new Rt(new ArrayBuffer(1)))!=z||It&&Wt(new It)!=W||At&&Wt(At.resolve())!=U||Mt&&Wt(new Mt)!=V||Dt&&Wt(new Dt)!=J)&&(Wt=function(t){var e=Tt.call(t),n=e==$?t.constructor:void 0,r=n?T(n):void 0;if(r)switch(r){case Nt:return z;case Ft:return W;case qt:return U;case Ct:return V;case Lt:return J}return e});var $t=Array.isArray;e.exports=M}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],5:[function(t,e,n){"use strict";function r(t,e,n,r,o){}e.exports=r},{"./lib/ReactPropTypesSecret":9,"fbjs/lib/invariant":2,"fbjs/lib/warning":3}],6:[function(t,e,n){"use strict";var r=t("fbjs/lib/emptyFunction"),o=t("fbjs/lib/invariant"),i=t("./lib/ReactPropTypesSecret");e.exports=function(){function t(t,e,n,r,u,a){a!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function e(){return t}t.isRequired=t;var n={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e};return n.checkPropTypes=r,n.PropTypes=n,n}},{"./lib/ReactPropTypesSecret":9,"fbjs/lib/emptyFunction":1,"fbjs/lib/invariant":2}],7:[function(t,e,n){"use strict";var r=t("fbjs/lib/emptyFunction"),o=t("fbjs/lib/invariant"),i=t("fbjs/lib/warning"),u=t("object-assign"),a=t("./lib/ReactPropTypesSecret"),c=t("./checkPropTypes");e.exports=function(t,e){function n(t){var e=t&&(E&&t[E]||t[R]);if("function"==typeof e)return e}function f(t,e){return t===e?0!==t||1/t===1/e:t!==t&&e!==e}function s(t){this.message=t,this.stack=""}function l(t){function n(n,r,i,u,c,f,l){if(u=u||I,f=f||i,l!==a)if(e)o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else;return null==r[i]?n?new s(null===r[i]?"The "+c+" `"+f+"` is marked as required "+("in `"+u+"`, but its value is `null`."):"The "+c+" `"+f+"` is marked as required in "+("`"+u+"`, but its value is `undefined`.")):null:t(r,i,u,c,f)}var r=n.bind(null,!1);return r.isRequired=n.bind(null,!0),r}function p(t){function e(e,n,r,o,i,u){var a=e[n],c=P(a);if(c!==t){var f=S(a);return new s("Invalid "+o+" `"+i+"` of type "+("`"+f+"` supplied to `"+r+"`, expected ")+("`"+t+"`."))}return null}return l(e)}function y(){return l(r.thatReturnsNull)}function d(t){function e(e,n,r,o,i){if("function"!=typeof t)return new s("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var u=e[n];if(!Array.isArray(u)){var c=P(u);return new s("Invalid "+o+" `"+i+"` of type "+("`"+c+"` supplied to `"+r+"`, expected an array."))}for(var f=0;f=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(n,"__esModule",{value:!0});var a=Object.assign||function(t){for(var e=1;er&&(clearTimeout(this.timeouts[0]),this.timeouts.shift())}},{key:"_type",value:function(t,e){var n=this.state.output,r=this.props.typingInterval,o=this._type.bind(this,t,e),i=p(t);this.setState({output:i.slice(0,p(n).length+1).join("")}),n.length ( 6 |
7 | 8 |
9 | ); 10 | 11 | ReactDOM.render(, document.getElementById('app')); 12 | -------------------------------------------------------------------------------- /example/src/example.less: -------------------------------------------------------------------------------- 1 | @import 'ReactRotatingText.css'; 2 | 3 | /* 4 | // Examples Stylesheet 5 | // ------------------- 6 | */ 7 | 8 | body { 9 | font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 10 | font-size: 14px; 11 | color: #333; 12 | margin: 0; 13 | padding: 0; 14 | } 15 | 16 | a { 17 | color: #08c; 18 | text-decoration: none; 19 | } 20 | 21 | a:hover { 22 | text-decoration: underline; 23 | } 24 | 25 | .container { 26 | margin-left: auto; 27 | margin-right: auto; 28 | max-width: 720px; 29 | padding: 1em; 30 | } 31 | 32 | .footer { 33 | margin-top: 50px; 34 | border-top: 1px solid #eee; 35 | padding: 20px 0; 36 | font-size: 12px; 37 | color: #999; 38 | } 39 | 40 | h1, h2, h3, h4, h5, h6 { 41 | color: #222; 42 | font-weight: 100; 43 | margin: 0.5em 0; 44 | } 45 | 46 | label { 47 | color: #999; 48 | display: inline-block; 49 | font-size: 0.85em; 50 | font-weight: bold; 51 | margin: 1em 0; 52 | text-transform: uppercase; 53 | } 54 | 55 | .hint { 56 | margin: 15px 0; 57 | font-style: italic; 58 | color: #999; 59 | } 60 | 61 | .display-text { 62 | font-size: 48px; 63 | } 64 | -------------------------------------------------------------------------------- /example/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | react-rotating-text 4 | 5 | 6 | 7 |
8 |

react-rotating-text

9 |

View project on GitHub

10 |
11 |
12 | Note: CSS is required to make the cursor blink. See the docs for more information. 13 |
14 |
15 | Copyright © 2016 Adrian Li. 16 |
17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var initGulpTasks = require('react-component-gulp-tasks'); 3 | 4 | /** 5 | * Tasks are added by the react-component-gulp-tasks package 6 | * 7 | * See https://github.com/JedWatson/react-component-gulp-tasks 8 | * for documentation. 9 | * 10 | * You can also add your own additional gulp tasks if you like. 11 | */ 12 | 13 | var taskConfig = { 14 | 15 | component: { 16 | name: 'ReactRotatingText', 17 | dependencies: [ 18 | 'classnames', 19 | 'react', 20 | 'react-dom' 21 | ], 22 | lib: 'lib' 23 | }, 24 | 25 | example: { 26 | src: 'example/src', 27 | dist: 'example/dist', 28 | files: [ 29 | 'index.html', 30 | '.gitignore', 31 | 'ReactRotatingText.css' 32 | ], 33 | scripts: [ 34 | 'example.js' 35 | ], 36 | less: [ 37 | 'example.less' 38 | ] 39 | } 40 | 41 | }; 42 | 43 | initGulpTasks(gulp, taskConfig); -------------------------------------------------------------------------------- /lib/ReactRotatingText.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, '__esModule', { 4 | value: true 5 | }); 6 | 7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8 | 9 | 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; }; })(); 10 | 11 | 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); } } }; 12 | 13 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } 14 | 15 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } 16 | 17 | 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; } 18 | 19 | var React = require('react'); 20 | var PropTypes = require('prop-types'); 21 | var toArray = require('lodash.toarray'); 22 | 23 | var ReactRotatingText = (function (_React$Component) { 24 | _inherits(ReactRotatingText, _React$Component); 25 | 26 | function ReactRotatingText(props) { 27 | _classCallCheck(this, ReactRotatingText); 28 | 29 | _get(Object.getPrototypeOf(ReactRotatingText.prototype), 'constructor', this).call(this, props); 30 | var _props = this.props; 31 | var items = _props.items; 32 | var random = _props.random; 33 | 34 | this.state = { 35 | index: random ? Math.floor(Math.random() * Math.floor(items.length)) : 0, 36 | output: '', 37 | substrLength: 0 38 | }; 39 | this.timeouts = []; 40 | } 41 | 42 | _createClass(ReactRotatingText, [{ 43 | key: 'componentDidMount', 44 | value: function componentDidMount() { 45 | this._animate.bind(this)(); // begin the animation loop 46 | } 47 | }, { 48 | key: 'componentWillUnmount', 49 | value: function componentWillUnmount() { 50 | this.timeouts.map(function (x) { 51 | return clearTimeout(x); 52 | }); // stop all the loops 53 | } 54 | }, { 55 | key: '_loop', 56 | value: function _loop(loopingFunc, pause) { 57 | // save the timeouts so we can stop on unmount 58 | var timeout = setTimeout(loopingFunc, pause); 59 | this.timeouts.push(timeout); 60 | 61 | // prevent memory leak 62 | var maxTimeouts = 100; 63 | if (this.timeouts.length > maxTimeouts) { 64 | clearTimeout(this.timeouts[0]); 65 | this.timeouts.shift(); 66 | } 67 | } 68 | }, { 69 | key: '_type', 70 | value: function _type(text, callback) { 71 | var output = this.state.output; 72 | var typingInterval = this.props.typingInterval; 73 | 74 | var loopingFunc = this._type.bind(this, text, callback); 75 | var word = toArray(text); 76 | 77 | // set the string one character longer 78 | this.setState({ output: word.slice(0, toArray(output).length + 1).join('') }); 79 | 80 | // if we're still not done, recursively loop again 81 | if (output.length < word.length) { 82 | this._loop(loopingFunc, typingInterval); 83 | } else { 84 | if (typeof this.props.onTypingEnd == 'function') { 85 | this.props.onTypingEnd(); 86 | } 87 | callback(); 88 | } 89 | } 90 | }, { 91 | key: '_erase', 92 | value: function _erase(callback) { 93 | var output = this.state.output; 94 | var deletingInterval = this.props.deletingInterval; 95 | 96 | var loopingFunc = this._erase.bind(this, callback); 97 | var word = toArray(output); 98 | 99 | if (typeof this.props.onDeletingStart == 'function') { 100 | this.props.onDeletingStart(); 101 | } 102 | // set the string one character shorter 103 | this.setState({ output: word.slice(0, word.length - 1).join('') }); 104 | 105 | // if we're still not done, recursively loop again 106 | if (word.length !== 0) { 107 | this._loop(loopingFunc, deletingInterval); 108 | } else { 109 | if (typeof this.props.onDeletingEnd == 'function') { 110 | this.props.onDeletingEnd(); 111 | } 112 | callback(); 113 | } 114 | } 115 | }, { 116 | key: '_overwrite', 117 | value: function _overwrite(text, callback) { 118 | var _state = this.state; 119 | var output = _state.output; 120 | var substrLength = _state.substrLength; 121 | var deletingInterval = this.props.deletingInterval; 122 | 123 | var loopingFunc = this._overwrite.bind(this, text, callback); 124 | var word = toArray(text); 125 | var out = toArray(output); 126 | 127 | this.setState({ 128 | output: word.slice(0, substrLength).concat(out.slice(substrLength)), 129 | substrLength: substrLength + 1 130 | }); 131 | 132 | if (word.length !== substrLength) { 133 | this._loop(loopingFunc, deletingInterval); 134 | } else { 135 | this.setState({ 136 | output: text, 137 | substrLength: 0 138 | }); 139 | callback(); 140 | } 141 | } 142 | }, { 143 | key: '_animate', 144 | value: function _animate() { 145 | var _this = this; 146 | 147 | var index = this.state.index; 148 | var _props2 = this.props; 149 | var items = _props2.items; 150 | var pause = _props2.pause; 151 | var emptyPause = _props2.emptyPause; 152 | var eraseMode = _props2.eraseMode; 153 | var random = _props2.random; 154 | 155 | var type = this._type; 156 | var erase = this._erase; 157 | var overwrite = this._overwrite; 158 | var loopingFunc = this._animate.bind(this); 159 | var nextIndex = undefined; 160 | if (random) { 161 | nextIndex = Math.floor(Math.random() * Math.floor(items.length)); 162 | } else { 163 | nextIndex = index === items.length - 1 ? 0 : index + 1; 164 | } 165 | 166 | var nextWord = function nextWord() { 167 | _this.setState({ index: nextIndex }); 168 | _this._loop(loopingFunc, emptyPause); 169 | }; 170 | 171 | if (typeof this.props.onTypingStart == 'function') { 172 | this.props.onTypingStart(); 173 | } 174 | 175 | type.bind(this)(items[index], function () { 176 | if (eraseMode === 'overwrite') { 177 | _this._loop(overwrite.bind(_this, items[nextIndex], nextWord), pause); 178 | } else { 179 | _this._loop(erase.bind(_this, nextWord), pause); 180 | } 181 | }); 182 | } 183 | }, { 184 | key: 'render', 185 | value: function render() { 186 | var _props3 = this.props; 187 | var color = _props3.color; 188 | var cursor = _props3.cursor; 189 | var deletingInterval = _props3.deletingInterval; 190 | var emptyPause = _props3.emptyPause; 191 | var items = _props3.items; 192 | var pause = _props3.pause; 193 | var eraseMode = _props3.eraseMode; 194 | var typingInterval = _props3.typingInterval; 195 | var random = _props3.random; 196 | 197 | var other = _objectWithoutProperties(_props3, ['color', 'cursor', 'deletingInterval', 'emptyPause', 'items', 'pause', 'eraseMode', 'typingInterval', 'random']); 198 | 199 | return React.createElement( 200 | 'span', 201 | _extends({ style: { color: color } }, other, { 202 | 'aria-label': this.props.items[this.state.index] }), 203 | this.state.output, 204 | cursor ? React.createElement( 205 | 'span', 206 | { className: 'react-rotating-text-cursor' }, 207 | '|' 208 | ) : null 209 | ); 210 | } 211 | }]); 212 | 213 | return ReactRotatingText; 214 | })(React.Component); 215 | 216 | ReactRotatingText.propTypes = { 217 | color: PropTypes.string, 218 | cursor: PropTypes.bool, 219 | deletingInterval: PropTypes.number, 220 | emptyPause: PropTypes.number, 221 | eraseMode: PropTypes.string, 222 | items: PropTypes.array, 223 | pause: PropTypes.number, 224 | typingInterval: PropTypes.number, 225 | random: PropTypes.bool, 226 | onTypingStart: PropTypes.func, 227 | onTypingEnd: PropTypes.func, 228 | onDeletingStart: PropTypes.func, 229 | onDeletingEnd: PropTypes.func 230 | }; 231 | 232 | ReactRotatingText.defaultProps = { 233 | color: 'inherit', 234 | cursor: true, 235 | deletingInterval: 50, 236 | emptyPause: 1000, 237 | eraseMode: 'erase', 238 | items: ['first', 'second', 'third', 'fourth', 'fifth'], 239 | pause: 1500, 240 | typingInterval: 50, 241 | random: false 242 | }; 243 | 244 | exports['default'] = ReactRotatingText; 245 | module.exports = exports['default']; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-rotating-text", 3 | "version": "1.4.1", 4 | "description": "A simple react component to display an array of words/sentences with a typewriter effect.", 5 | "main": "lib/ReactRotatingText.js", 6 | "author": "Adrian Li", 7 | "homepage": "https://github.com/adrianmc/react-rotating-text", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/adrianmc/react-rotating-text.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/adrianmc/react-rotating-text/issues" 14 | }, 15 | "license": "MIT", 16 | "dependencies": { 17 | "classnames": "^2.1.2", 18 | "lodash.toarray": "^4.4.0", 19 | "prop-types": "^15.5.10" 20 | }, 21 | "devDependencies": { 22 | "babel-eslint": "^4.1.3", 23 | "escope": "^3.6.0", 24 | "eslint": "^5.15.3", 25 | "eslint-plugin-react": "^3.5.1", 26 | "estraverse-fb": "^1.3.2", 27 | "gulp": "^3.9.0", 28 | "react-component-gulp-tasks": "^0.7.6" 29 | }, 30 | "peerDependencies": { 31 | "react": ">= 15", 32 | "react-dom": ">= 15" 33 | }, 34 | "browserify-shim": { 35 | "react": "global:React" 36 | }, 37 | "scripts": { 38 | "build": "gulp clean && NODE_ENV=production gulp build", 39 | "examples": "gulp dev:server", 40 | "lint": "eslint ./; true", 41 | "publish:site": "NODE_ENV=production gulp publish:examples", 42 | "release": "NODE_ENV=production gulp release", 43 | "start": "gulp dev", 44 | "test": "echo \"no tests yet\" && exit 0", 45 | "watch": "gulp watch:lib" 46 | }, 47 | "keywords": [ 48 | "react", 49 | "react-component" 50 | ] 51 | } -------------------------------------------------------------------------------- /src/ReactRotatingText.css: -------------------------------------------------------------------------------- 1 | .react-rotating-text-cursor { 2 | animation: blinking-cursor 0.8s cubic-bezier(0.68, 0.01, 0.01, 0.99) 0s infinite; 3 | } 4 | 5 | @-moz-keyframes blinking-cursor { 6 | 0% { 7 | opacity: 0; 8 | } 9 | 50% { 10 | opacity: 1; 11 | } 12 | 100% { 13 | opacity: 0; 14 | } 15 | } 16 | 17 | @-webkit-keyframes blinking-cursor { 18 | 0% { 19 | opacity: 0; 20 | } 21 | 50% { 22 | opacity: 1; 23 | } 24 | 100% { 25 | opacity: 0; 26 | } 27 | } 28 | 29 | @-o-keyframes blinking-cursor { 30 | 0% { 31 | opacity: 0; 32 | } 33 | 50% { 34 | opacity: 1; 35 | } 36 | 100% { 37 | opacity: 0; 38 | } 39 | } 40 | 41 | @keyframes blinking-cursor { 42 | 0% { 43 | opacity: 0; 44 | } 45 | 50% { 46 | opacity: 1; 47 | } 48 | 100% { 49 | opacity: 0; 50 | } 51 | } -------------------------------------------------------------------------------- /src/ReactRotatingText.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var PropTypes = require('prop-types'); 3 | var toArray = require('lodash.toarray'); 4 | 5 | class ReactRotatingText extends React.Component { 6 | 7 | constructor(props) { 8 | super(props); 9 | const { items, random } = this.props; 10 | this.state = { 11 | index: random ? Math.floor(Math.random() * Math.floor(items.length)) : 0, 12 | output: '', 13 | substrLength: 0, 14 | }; 15 | this.timeouts = []; 16 | } 17 | 18 | componentDidMount() { 19 | this._animate.bind(this)(); // begin the animation loop 20 | } 21 | 22 | componentWillUnmount() { 23 | this.timeouts.map(x => clearTimeout(x)); // stop all the loops 24 | } 25 | 26 | _loop(loopingFunc, pause) { 27 | // save the timeouts so we can stop on unmount 28 | const timeout = setTimeout(loopingFunc, pause); 29 | this.timeouts.push(timeout); 30 | 31 | // prevent memory leak 32 | const maxTimeouts = 100; 33 | if (this.timeouts.length > maxTimeouts) { 34 | clearTimeout(this.timeouts[0]); 35 | this.timeouts.shift(); 36 | } 37 | } 38 | 39 | _type(text, callback) { 40 | const { output } = this.state; 41 | const { typingInterval } = this.props; 42 | const loopingFunc = this._type.bind(this, text, callback); 43 | const word = toArray(text) 44 | 45 | // set the string one character longer 46 | this.setState({output: word.slice(0, toArray(output).length + 1).join('')}); 47 | 48 | // if we're still not done, recursively loop again 49 | if (output.length < word.length) { 50 | this._loop(loopingFunc, typingInterval); 51 | } else { 52 | if (typeof this.props.onTypingEnd == 'function') { 53 | this.props.onTypingEnd(); 54 | } 55 | callback(); 56 | } 57 | } 58 | 59 | _erase(callback) { 60 | const { output } = this.state; 61 | const { deletingInterval } = this.props; 62 | const loopingFunc = this._erase.bind(this, callback); 63 | const word = toArray(output) 64 | 65 | if (typeof this.props.onDeletingStart == 'function') { 66 | this.props.onDeletingStart(); 67 | } 68 | // set the string one character shorter 69 | this.setState({output: word.slice(0, word.length - 1).join('')}); 70 | 71 | // if we're still not done, recursively loop again 72 | if (word.length !== 0) { 73 | this._loop(loopingFunc, deletingInterval); 74 | } else { 75 | if (typeof this.props.onDeletingEnd == 'function') { 76 | this.props.onDeletingEnd(); 77 | } 78 | callback(); 79 | } 80 | }; 81 | 82 | _overwrite(text, callback) { 83 | const { output, substrLength } = this.state; 84 | const { deletingInterval } = this.props; 85 | const loopingFunc = this._overwrite.bind(this, text, callback); 86 | const word = toArray(text) 87 | const out = toArray(output) 88 | 89 | this.setState({ 90 | output: word.slice(0, substrLength).concat(out.slice(substrLength)), 91 | substrLength: substrLength + 1, 92 | }); 93 | 94 | if (word.length !== substrLength) { 95 | this._loop(loopingFunc, deletingInterval); 96 | } else { 97 | this.setState({ 98 | output: text, 99 | substrLength: 0, 100 | }); 101 | callback(); 102 | } 103 | }; 104 | 105 | _animate() { 106 | const { index } = this.state; 107 | const { items, pause, emptyPause, eraseMode, random } = this.props; 108 | const type = this._type; 109 | const erase = this._erase; 110 | const overwrite = this._overwrite; 111 | const loopingFunc = this._animate.bind(this); 112 | let nextIndex; 113 | if (random) { 114 | nextIndex = Math.floor(Math.random() * Math.floor(items.length)); 115 | } else { 116 | nextIndex = index === items.length - 1 ? 0 : index + 1; 117 | } 118 | 119 | const nextWord = () => { 120 | this.setState({index: nextIndex}); 121 | this._loop(loopingFunc, emptyPause); 122 | }; 123 | 124 | if (typeof this.props.onTypingStart == 'function') { 125 | this.props.onTypingStart(); 126 | } 127 | 128 | type.bind(this)(items[index], () => { 129 | if (eraseMode === 'overwrite') { 130 | this._loop(overwrite.bind(this, items[nextIndex], nextWord), pause); 131 | } else { 132 | this._loop(erase.bind(this, nextWord), pause); 133 | } 134 | }); 135 | }; 136 | 137 | render() { 138 | const { 139 | color, 140 | cursor, 141 | deletingInterval, 142 | emptyPause, 143 | items, 144 | pause, 145 | eraseMode, 146 | typingInterval, 147 | random, 148 | ...other 149 | } = this.props; 150 | 151 | return ( 152 | 154 | { this.state.output } 155 | { cursor ? | : null } 156 | 157 | ); 158 | } 159 | } 160 | 161 | ReactRotatingText.propTypes = { 162 | color: PropTypes.string, 163 | cursor: PropTypes.bool, 164 | deletingInterval: PropTypes.number, 165 | emptyPause: PropTypes.number, 166 | eraseMode: PropTypes.string, 167 | items: PropTypes.array, 168 | pause: PropTypes.number, 169 | typingInterval: PropTypes.number, 170 | random: PropTypes.bool, 171 | onTypingStart: PropTypes.func, 172 | onTypingEnd: PropTypes.func, 173 | onDeletingStart: PropTypes.func, 174 | onDeletingEnd: PropTypes.func, 175 | }; 176 | 177 | ReactRotatingText.defaultProps = { 178 | color: 'inherit', 179 | cursor: true, 180 | deletingInterval: 50, 181 | emptyPause: 1000, 182 | eraseMode: 'erase', 183 | items: ['first', 'second', 'third', 'fourth', 'fifth'], 184 | pause: 1500, 185 | typingInterval: 50, 186 | random: false 187 | }; 188 | 189 | export default ReactRotatingText; 190 | --------------------------------------------------------------------------------