diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index 5d12634..0000000 --- a/.editorconfig +++ /dev/null @@ -1,13 +0,0 @@ -# editorconfig.org -root = true - -[*] -indent_style = space -indent_size = 2 -end_of_line = lf -charset = utf-8 -trim_trailing_whitespace = true -insert_final_newline = true - -[*.md] -trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 36a9ddf..0000000 --- a/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ -node_modules -dist -.bcache.json diff --git a/README.md b/README.md deleted file mode 100644 index 84cc270..0000000 --- a/README.md +++ /dev/null @@ -1,24 +0,0 @@ -[ ![Codeship Status for css-modules/browserify-demo](https://codeship.com/projects/b7120830-ed2f-0132-7e77-0eee9d4772fa/status?branch=master)](https://codeship.com/projects/83950) - -# CSS Modules Browserify Demo - -A working demo of [CSS Modules](https://github.com/css-modules/css-modules), using [css-modulesify](https://github.com/css-modules/css-modulesify). - -Brazenly plagiarized from - -**Please note that this is still highly experimental.** - -## Run the example - -```bash -$ npm install -$ npm start -``` - -## Acknowledgements - -Special thanks to [@markdalgleish](https://github.com/markdalgleish) for - -## License - -MIT diff --git a/src/index.html b/index.html similarity index 100% rename from src/index.html rename to index.html diff --git a/index.js b/index.js new file mode 100644 index 0000000..a8b99e3 --- /dev/null +++ b/index.js @@ -0,0 +1,1117 @@ +(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< 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; }; }(); + +var _Logo = require('./Logo.css'); + +var _Logo2 = _interopRequireDefault(_Logo); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + +var Logo = function (_Component) { + _inherits(Logo, _Component); + + function Logo() { + _classCallCheck(this, Logo); + + return _possibleConstructorReturn(this, (Logo.__proto__ || Object.getPrototypeOf(Logo)).apply(this, arguments)); + } + + _createClass(Logo, [{ + key: 'render', + value: function render() { + return _react2.default.createElement('div', { className: _Logo2.default.logo }); + } + }]); + + return Logo; +}(_react.Component); + +exports.default = Logo; +; + +},{"./Logo.css":1,"react":"react"}],3:[function(require,module,exports){ +module.exports = {"niceGray":"#777","root":"_src_components_1_ScopedSelectors_ScopedSelectors__root","text":"_src_components_1_ScopedSelectors_ScopedSelectors__text"} +},{}],4:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _ScopedSelectors = require('./ScopedSelectors.css'); + +var _ScopedSelectors2 = _interopRequireDefault(_ScopedSelectors); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + +var ScopedSelectors = function (_Component) { + _inherits(ScopedSelectors, _Component); + + function ScopedSelectors() { + _classCallCheck(this, ScopedSelectors); + + return _possibleConstructorReturn(this, (ScopedSelectors.__proto__ || Object.getPrototypeOf(ScopedSelectors)).apply(this, arguments)); + } + + _createClass(ScopedSelectors, [{ + key: 'render', + value: function render() { + return _react2.default.createElement( + 'div', + { className: _ScopedSelectors2.default.root }, + _react2.default.createElement( + 'p', + { className: _ScopedSelectors2.default.text }, + 'Scoped Selectors' + ) + ); + } + }]); + + return ScopedSelectors; +}(_react.Component); + +exports.default = ScopedSelectors; +; + +},{"./ScopedSelectors.css":3,"react":"react"}],5:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _ScopedSelectors = require('./ScopedSelectors'); + +var _ScopedSelectors2 = _interopRequireDefault(_ScopedSelectors); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _Snippet = require('../shared/Snippet/Snippet'); + +var _Snippet2 = _interopRequireDefault(_Snippet); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + + +var js = "import styles from './ScopedSelectors.css';\n\nimport React, { Component } from 'react';\n\nexport default class ScopedSelectors extends Component {\n\n render() {\n return (\n
\n

Scoped Selectors

\n
\n );\n }\n\n};\n"; +var css = "@value niceGray: #777;\n\n.root {\n border-width: 2px;\n border-style: solid;\n border-color: niceGray;\n padding: 0 20px;\n margin: 0 6px;\n max-width: 400px;\n}\n\n.text {\n color: niceGray;\n font-size: 24px;\n font-family: helvetica, arial, sans-serif;\n font-weight: 600;\n}\n"; + +var ScopedSelectorsDemo = function (_Component) { + _inherits(ScopedSelectorsDemo, _Component); + + function ScopedSelectorsDemo() { + _classCallCheck(this, ScopedSelectorsDemo); + + return _possibleConstructorReturn(this, (ScopedSelectorsDemo.__proto__ || Object.getPrototypeOf(ScopedSelectorsDemo)).apply(this, arguments)); + } + + _createClass(ScopedSelectorsDemo, [{ + key: 'render', + value: function render() { + var files = [{ name: 'ScopedSelectors.js', source: js }, { name: 'ScopedSelectors.css', source: css }]; + + return _react2.default.createElement( + _Snippet2.default, + { files: files }, + _react2.default.createElement(_ScopedSelectors2.default, null) + ); + } + }]); + + return ScopedSelectorsDemo; +}(_react.Component); + +exports.default = ScopedSelectorsDemo; +; + +},{"../shared/Snippet/Snippet":24,"./ScopedSelectors":4,"react":"react"}],6:[function(require,module,exports){ +module.exports = {"root":"_src_components_2_GlobalSelectors_GlobalSelectors__root"} +},{}],7:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _GlobalSelectors = require('./GlobalSelectors.css'); + +var _GlobalSelectors2 = _interopRequireDefault(_GlobalSelectors); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + +var GlobalSelectors = function (_Component) { + _inherits(GlobalSelectors, _Component); + + function GlobalSelectors() { + _classCallCheck(this, GlobalSelectors); + + return _possibleConstructorReturn(this, (GlobalSelectors.__proto__ || Object.getPrototypeOf(GlobalSelectors)).apply(this, arguments)); + } + + _createClass(GlobalSelectors, [{ + key: 'render', + value: function render() { + return _react2.default.createElement( + 'div', + { className: _GlobalSelectors2.default.root }, + _react2.default.createElement( + 'p', + null, + 'Global Selectors' + ) + ); + } + }]); + + return GlobalSelectors; +}(_react.Component); + +exports.default = GlobalSelectors; +; + +},{"./GlobalSelectors.css":6,"react":"react"}],8:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _GlobalSelectors = require('./GlobalSelectors'); + +var _GlobalSelectors2 = _interopRequireDefault(_GlobalSelectors); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _Snippet = require('../shared/Snippet/Snippet'); + +var _Snippet2 = _interopRequireDefault(_Snippet); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + + +var js = "import styles from './GlobalSelectors.css';\n\nimport React, { Component } from 'react';\n\nexport default class GlobalSelectors extends Component {\n\n render() {\n return (\n
\n

Global Selectors

\n
\n );\n }\n\n};\n"; +var css = ".root {\n border-width: 2px;\n border-style: solid;\n border-color: brown;\n padding: 0 20px;\n margin: 0 6px;\n max-width: 400px;\n}\n\n.root :global p {\n color: brown;\n font-size: 24px;\n font-family: helvetica, arial, sans-serif;\n font-weight: 600;\n}\n"; + +var GlobalSelectorsDemo = function (_Component) { + _inherits(GlobalSelectorsDemo, _Component); + + function GlobalSelectorsDemo() { + _classCallCheck(this, GlobalSelectorsDemo); + + return _possibleConstructorReturn(this, (GlobalSelectorsDemo.__proto__ || Object.getPrototypeOf(GlobalSelectorsDemo)).apply(this, arguments)); + } + + _createClass(GlobalSelectorsDemo, [{ + key: 'render', + value: function render() { + var files = [{ name: 'GlobalSelectors.js', source: js }, { name: 'GlobalSelectors.css', source: css }]; + + return _react2.default.createElement( + _Snippet2.default, + { files: files }, + _react2.default.createElement(_GlobalSelectors2.default, null) + ); + } + }]); + + return GlobalSelectorsDemo; +}(_react.Component); + +exports.default = GlobalSelectorsDemo; +; + +},{"../shared/Snippet/Snippet":24,"./GlobalSelectors":7,"react":"react"}],9:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _StyleVariantA = require('./StyleVariantA/StyleVariantA'); + +var _StyleVariantA2 = _interopRequireDefault(_StyleVariantA); + +var _StyleVariantB = require('./StyleVariantB/StyleVariantB'); + +var _StyleVariantB2 = _interopRequireDefault(_StyleVariantB); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + +var ClassComposition = function (_Component) { + _inherits(ClassComposition, _Component); + + function ClassComposition() { + _classCallCheck(this, ClassComposition); + + return _possibleConstructorReturn(this, (ClassComposition.__proto__ || Object.getPrototypeOf(ClassComposition)).apply(this, arguments)); + } + + _createClass(ClassComposition, [{ + key: 'render', + value: function render() { + return _react2.default.createElement( + 'div', + null, + _react2.default.createElement(_StyleVariantA2.default, null), + _react2.default.createElement('br', null), + _react2.default.createElement(_StyleVariantB2.default, null) + ); + } + }]); + + return ClassComposition; +}(_react.Component); + +exports.default = ClassComposition; +; + +},{"./StyleVariantA/StyleVariantA":12,"./StyleVariantB/StyleVariantB":14,"react":"react"}],10:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _ClassComposition = require('./ClassComposition'); + +var _ClassComposition2 = _interopRequireDefault(_ClassComposition); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _Snippet = require('../shared/Snippet/Snippet'); + +var _Snippet2 = _interopRequireDefault(_Snippet); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + + +var js = "import styles from './StyleVariantA.css';\n\nimport React, { Component } from 'react';\n\nexport default class StyleVariantA extends Component {\n\n render() {\n return (\n
\n

Style Variant A

\n
\n );\n }\n\n};\n"; +var css = ".root {\n composes: box from \"../../shared/styles/layout.css\";\n border-color: red;\n}\n\n.text {\n composes: heading from \"../../shared/styles/typography.css\";\n color: red;\n}\n"; +var layoutCss = ".box {\n border-width: 2px;\n border-style: solid;\n padding: 0 20px;\n margin: 0 6px;\n max-width: 400px;\n}\n"; +var typographyCss = ".heading {\n font-size: 24px;\n font-family: helvetica, arial, sans-serif;\n font-weight: 600;\n}\n"; + +var ClassCompositionDemo = function (_Component) { + _inherits(ClassCompositionDemo, _Component); + + function ClassCompositionDemo() { + _classCallCheck(this, ClassCompositionDemo); + + return _possibleConstructorReturn(this, (ClassCompositionDemo.__proto__ || Object.getPrototypeOf(ClassCompositionDemo)).apply(this, arguments)); + } + + _createClass(ClassCompositionDemo, [{ + key: 'render', + value: function render() { + var files = [{ name: 'StyleVariantA.js', source: js }, { name: 'StyleVariantA.css', source: css }, { name: 'shared/styles/layout.css', source: layoutCss }, { name: 'shared/styles/typography.css', source: typographyCss }]; + + return _react2.default.createElement( + _Snippet2.default, + { files: files }, + _react2.default.createElement(_ClassComposition2.default, null) + ); + } + }]); + + return ClassCompositionDemo; +}(_react.Component); + +exports.default = ClassCompositionDemo; +; + +},{"../shared/Snippet/Snippet":24,"./ClassComposition":9,"react":"react"}],11:[function(require,module,exports){ +require("/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/layout.css") +require("/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/typography.css") +module.exports = {"root":"_src_components_3_ClassComposition_StyleVariantA_StyleVariantA__root _src_components_shared_styles_layout__box","text":"_src_components_3_ClassComposition_StyleVariantA_StyleVariantA__text _src_components_shared_styles_typography__heading"} +},{"/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/layout.css":27,"/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/typography.css":28}],12:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _StyleVariantA = require('./StyleVariantA.css'); + +var _StyleVariantA2 = _interopRequireDefault(_StyleVariantA); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + +var StyleVariantA = function (_Component) { + _inherits(StyleVariantA, _Component); + + function StyleVariantA() { + _classCallCheck(this, StyleVariantA); + + return _possibleConstructorReturn(this, (StyleVariantA.__proto__ || Object.getPrototypeOf(StyleVariantA)).apply(this, arguments)); + } + + _createClass(StyleVariantA, [{ + key: 'render', + value: function render() { + return _react2.default.createElement( + 'div', + { className: _StyleVariantA2.default.root }, + _react2.default.createElement( + 'p', + { className: _StyleVariantA2.default.text }, + 'Style Variant A' + ) + ); + } + }]); + + return StyleVariantA; +}(_react.Component); + +exports.default = StyleVariantA; +; + +},{"./StyleVariantA.css":11,"react":"react"}],13:[function(require,module,exports){ +require("/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/layout.css") +require("/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/typography.css") +module.exports = {"root":"_src_components_3_ClassComposition_StyleVariantB_StyleVariantB__root _src_components_shared_styles_layout__box","text":"_src_components_3_ClassComposition_StyleVariantB_StyleVariantB__text _src_components_shared_styles_typography__heading"} +},{"/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/layout.css":27,"/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/typography.css":28}],14:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _StyleVariantB = require('./StyleVariantB.css'); + +var _StyleVariantB2 = _interopRequireDefault(_StyleVariantB); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + +var StyleVariantB = function (_Component) { + _inherits(StyleVariantB, _Component); + + function StyleVariantB() { + _classCallCheck(this, StyleVariantB); + + return _possibleConstructorReturn(this, (StyleVariantB.__proto__ || Object.getPrototypeOf(StyleVariantB)).apply(this, arguments)); + } + + _createClass(StyleVariantB, [{ + key: 'render', + value: function render() { + return _react2.default.createElement( + 'div', + { className: _StyleVariantB2.default.root }, + _react2.default.createElement( + 'p', + { className: _StyleVariantB2.default.text }, + 'Style Variant B' + ) + ); + } + }]); + + return StyleVariantB; +}(_react.Component); + +exports.default = StyleVariantB; +; + +},{"./StyleVariantB.css":13,"react":"react"}],15:[function(require,module,exports){ +require("/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/layout.css") +require("/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/typography.css") +module.exports = {"root":"_src_components_4_CompositionOverrides_CompositionOverrides__root _src_components_shared_styles_layout__box","text":"_src_components_4_CompositionOverrides_CompositionOverrides__text _src_components_shared_styles_typography__heading"} +},{"/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/layout.css":27,"/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/typography.css":28}],16:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _CompositionOverrides = require('./CompositionOverrides.css'); + +var _CompositionOverrides2 = _interopRequireDefault(_CompositionOverrides); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + +var CompositionOverrides = function (_Component) { + _inherits(CompositionOverrides, _Component); + + function CompositionOverrides() { + _classCallCheck(this, CompositionOverrides); + + return _possibleConstructorReturn(this, (CompositionOverrides.__proto__ || Object.getPrototypeOf(CompositionOverrides)).apply(this, arguments)); + } + + _createClass(CompositionOverrides, [{ + key: 'render', + value: function render() { + return _react2.default.createElement( + 'div', + { className: _CompositionOverrides2.default.root }, + _react2.default.createElement( + 'p', + { className: _CompositionOverrides2.default.text }, + 'Class Composition with Overrides' + ) + ); + } + }]); + + return CompositionOverrides; +}(_react.Component); + +exports.default = CompositionOverrides; +; + +},{"./CompositionOverrides.css":15,"react":"react"}],17:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _CompositionOverrides = require('./CompositionOverrides'); + +var _CompositionOverrides2 = _interopRequireDefault(_CompositionOverrides); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _Snippet = require('../shared/Snippet/Snippet'); + +var _Snippet2 = _interopRequireDefault(_Snippet); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + + +var js = "import styles from './CompositionOverrides.css';\n\nimport React, { Component } from 'react';\n\nexport default class CompositionOverrides extends Component {\n\n render() {\n return (\n
\n

Class Composition with Overrides

\n
\n );\n }\n\n};\n"; +var css = ".root {\n composes: box from \"../shared/styles/layout.css\";\n border-style: dotted;\n border-color: green;\n}\n\n.text {\n composes: heading from \"../shared/styles/typography.css\";\n font-weight: 200;\n color: green;\n}\n"; +var layoutCss = ".box {\n border-width: 2px;\n border-style: solid;\n padding: 0 20px;\n margin: 0 6px;\n max-width: 400px;\n}\n"; +var typographyCss = ".heading {\n font-size: 24px;\n font-family: helvetica, arial, sans-serif;\n font-weight: 600;\n}\n"; + +var CompositionOverridesDemo = function (_Component) { + _inherits(CompositionOverridesDemo, _Component); + + function CompositionOverridesDemo() { + _classCallCheck(this, CompositionOverridesDemo); + + return _possibleConstructorReturn(this, (CompositionOverridesDemo.__proto__ || Object.getPrototypeOf(CompositionOverridesDemo)).apply(this, arguments)); + } + + _createClass(CompositionOverridesDemo, [{ + key: 'render', + value: function render() { + var files = [{ name: 'CompositionOverrides.js', source: js }, { name: 'CompositionOverrides.css', source: css }, { name: 'shared/styles/layout.css', source: layoutCss }, { name: 'shared/styles/typography.css', source: typographyCss }]; + + return _react2.default.createElement( + _Snippet2.default, + { files: files }, + _react2.default.createElement(_CompositionOverrides2.default, null) + ); + } + }]); + + return CompositionOverridesDemo; +}(_react.Component); + +exports.default = CompositionOverridesDemo; +; + +},{"../shared/Snippet/Snippet":24,"./CompositionOverrides":16,"react":"react"}],18:[function(require,module,exports){ +require("/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/animation-values.css") +require("/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/animations.css") +module.exports = {"root":"_src_components_5_ScopedAnimations_ScopedAnimations__root","ball":"_src_components_5_ScopedAnimations_ScopedAnimations__ball _src_components_shared_styles_animations__bounce"} +},{"/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/animation-values.css":25,"/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/animations.css":26}],19:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _ScopedAnimations = require('./ScopedAnimations.css'); + +var _ScopedAnimations2 = _interopRequireDefault(_ScopedAnimations); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + +var ScopedAnimations = function (_Component) { + _inherits(ScopedAnimations, _Component); + + function ScopedAnimations() { + _classCallCheck(this, ScopedAnimations); + + return _possibleConstructorReturn(this, (ScopedAnimations.__proto__ || Object.getPrototypeOf(ScopedAnimations)).apply(this, arguments)); + } + + _createClass(ScopedAnimations, [{ + key: 'render', + value: function render() { + return _react2.default.createElement( + 'div', + { className: _ScopedAnimations2.default.root }, + _react2.default.createElement('div', { className: _ScopedAnimations2.default.ball }) + ); + } + }]); + + return ScopedAnimations; +}(_react.Component); + +exports.default = ScopedAnimations; +; + +},{"./ScopedAnimations.css":18,"react":"react"}],20:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _ScopedAnimations = require('./ScopedAnimations'); + +var _ScopedAnimations2 = _interopRequireDefault(_ScopedAnimations); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _Snippet = require('../shared/Snippet/Snippet'); + +var _Snippet2 = _interopRequireDefault(_Snippet); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + + +var js = "import styles from './ScopedAnimations.css';\n\nimport React, { Component } from 'react';\n\nexport default class ScopedAnimations extends Component {\n\n render() {\n return (\n
\n
\n
\n );\n }\n\n};\n"; +var css = ".root {\n padding: 20px 10px;\n}\n\n.ball {\n composes: bounce from \"../shared/styles/animations.css\";\n width: 40px;\n height: 40px;\n border-radius: 20px;\n background: rebeccapurple;\n}\n"; +var animationsCss = "@value bounceAmount: -20px;\n@value duration as bounceDuration from \"./animation-values.css\";\n\n@keyframes bounce {\n 33% { transform: translateY(bounceAmount); }\n 66% { transform: translateY(0px); }\n}\n\n.bounce {\n animation: bounce bounceDuration infinite ease-in-out;\n}\n"; + +var ScopedAnimationsDemo = function (_Component) { + _inherits(ScopedAnimationsDemo, _Component); + + function ScopedAnimationsDemo() { + _classCallCheck(this, ScopedAnimationsDemo); + + return _possibleConstructorReturn(this, (ScopedAnimationsDemo.__proto__ || Object.getPrototypeOf(ScopedAnimationsDemo)).apply(this, arguments)); + } + + _createClass(ScopedAnimationsDemo, [{ + key: 'render', + value: function render() { + var files = [{ name: 'ScopedAnimations.js', source: js }, { name: 'ScopedAnimations.css', source: css }, { name: 'shared/styles/animations.css', source: animationsCss }]; + + return _react2.default.createElement( + _Snippet2.default, + { files: files }, + _react2.default.createElement(_ScopedAnimations2.default, null) + ); + } + }]); + + return ScopedAnimationsDemo; +}(_react.Component); + +exports.default = ScopedAnimationsDemo; +; + +},{"../shared/Snippet/Snippet":24,"./ScopedAnimations":19,"react":"react"}],21:[function(require,module,exports){ +module.exports = {"app":"_src_components_App__app","hr":"_src_components_App__hr"} +},{}],22:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _App = require('./App.css'); + +var _App2 = _interopRequireDefault(_App); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _Logo = require('./0-Logo/Logo'); + +var _Logo2 = _interopRequireDefault(_Logo); + +var _ScopedSelectorsDemo = require('./1-ScopedSelectors/ScopedSelectorsDemo'); + +var _ScopedSelectorsDemo2 = _interopRequireDefault(_ScopedSelectorsDemo); + +var _GlobalSelectorsDemo = require('./2-GlobalSelectors/GlobalSelectorsDemo'); + +var _GlobalSelectorsDemo2 = _interopRequireDefault(_GlobalSelectorsDemo); + +var _ClassCompositionDemo = require('./3-ClassComposition/ClassCompositionDemo'); + +var _ClassCompositionDemo2 = _interopRequireDefault(_ClassCompositionDemo); + +var _CompositionOverridesDemo = require('./4-CompositionOverrides/CompositionOverridesDemo'); + +var _CompositionOverridesDemo2 = _interopRequireDefault(_CompositionOverridesDemo); + +var _ScopedAnimationsDemo = require('./5-ScopedAnimations/ScopedAnimationsDemo'); + +var _ScopedAnimationsDemo2 = _interopRequireDefault(_ScopedAnimationsDemo); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + +var App = function (_Component) { + _inherits(App, _Component); + + function App() { + _classCallCheck(this, App); + + return _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).apply(this, arguments)); + } + + _createClass(App, [{ + key: 'render', + value: function render() { + return _react2.default.createElement( + 'div', + { className: _App2.default.app }, + _react2.default.createElement(_Logo2.default, null), + _react2.default.createElement( + 'h1', + null, + 'CSS Modules Browserify Demo' + ), + _react2.default.createElement('hr', { className: _App2.default.hr }), + _react2.default.createElement( + 'h2', + null, + 'Scoped Selectors' + ), + _react2.default.createElement( + 'p', + null, + 'In CSS Modules, selectors are scoped by default.' + ), + _react2.default.createElement( + 'p', + null, + 'The following component uses two classes, ', + _react2.default.createElement( + 'strong', + null, + '.root' + ), + ' and ', + _react2.default.createElement( + 'strong', + null, + '.text' + ), + ', both of which would typically be too vague in a larger project.' + ), + _react2.default.createElement( + 'p', + null, + 'CSS Module semantics ensure that these ', + _react2.default.createElement( + 'strong', + null, + 'classes are locally scoped' + ), + ' to the component and don\'t collide with other classes in the global scope.' + ), + _react2.default.createElement(_ScopedSelectorsDemo2.default, null), + _react2.default.createElement('hr', { className: _App2.default.hr }), + _react2.default.createElement( + 'h2', + null, + 'Global Selectors' + ), + _react2.default.createElement( + 'p', + null, + 'Although they should be used as sparingly as possible, ', + _react2.default.createElement( + 'strong', + null, + 'global selectors are still available when required.' + ) + ), + _react2.default.createElement( + 'p', + null, + 'The following component styles all ', + _react2.default.createElement( + 'strong', + null, + '

' + ), + ' tags nested inside it.' + ), + _react2.default.createElement(_GlobalSelectorsDemo2.default, null), + _react2.default.createElement('hr', { className: _App2.default.hr }), + _react2.default.createElement( + 'h2', + null, + 'Class Composition' + ), + _react2.default.createElement( + 'p', + null, + 'Both of the components below have ', + _react2.default.createElement( + 'strong', + null, + 'locally scoped CSS' + ), + ' that is ', + _react2.default.createElement( + 'strong', + null, + 'composed from a common set of CSS Modules.' + ) + ), + _react2.default.createElement( + 'p', + null, + 'Since ', + _react2.default.createElement( + 'strong', + null, + 'CSS Modules can be composed' + ), + ', the resulting markup is optimised by ', + _react2.default.createElement( + 'b', + null, + 'reusing classes between components' + ), + '.' + ), + _react2.default.createElement(_ClassCompositionDemo2.default, null), + _react2.default.createElement('hr', { className: _App2.default.hr }), + _react2.default.createElement( + 'h2', + null, + 'Composition Overrides' + ), + _react2.default.createElement( + 'p', + null, + 'When composing classes, ', + _react2.default.createElement( + 'strong', + null, + 'inherited style properties can be overridden' + ), + ' as you\'d expect.' + ), + _react2.default.createElement( + 'p', + null, + 'The following component composes two different classes, but provides overrides which then take precedence.' + ), + _react2.default.createElement(_CompositionOverridesDemo2.default, null), + _react2.default.createElement('hr', { className: _App2.default.hr }), + _react2.default.createElement( + 'h2', + null, + 'Scoped Animations' + ), + _react2.default.createElement( + 'p', + null, + 'CSS Modules even provide ', + _react2.default.createElement( + 'strong', + null, + 'locally scoped animations' + ), + ', which are typically defined in the global scope.' + ), + _react2.default.createElement( + 'p', + null, + 'The animation\'s keyframes are private to the animations module, only exposed publicly via a class which this component inherits from.' + ), + _react2.default.createElement(_ScopedAnimationsDemo2.default, null) + ); + } + }]); + + return App; +}(_react.Component); + +exports.default = App; +; + +},{"./0-Logo/Logo":2,"./1-ScopedSelectors/ScopedSelectorsDemo":5,"./2-GlobalSelectors/GlobalSelectorsDemo":8,"./3-ClassComposition/ClassCompositionDemo":10,"./4-CompositionOverrides/CompositionOverridesDemo":17,"./5-ScopedAnimations/ScopedAnimationsDemo":20,"./App.css":21,"react":"react"}],23:[function(require,module,exports){ +module.exports = {"root":"_src_components_shared_Snippet_Snippet__root","output":"_src_components_shared_Snippet_Snippet__output","outputContent":"_src_components_shared_Snippet_Snippet__outputContent","file":"_src_components_shared_Snippet_Snippet__file","fileName":"_src_components_shared_Snippet_Snippet__fileName","pre":"_src_components_shared_Snippet_Snippet__pre"} +},{}],24:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +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; }; }(); + +var _Snippet = require('./Snippet.css'); + +var _Snippet2 = _interopRequireDefault(_Snippet); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +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; } + +var Snippet = function (_Component) { + _inherits(Snippet, _Component); + + function Snippet() { + _classCallCheck(this, Snippet); + + return _possibleConstructorReturn(this, (Snippet.__proto__ || Object.getPrototypeOf(Snippet)).apply(this, arguments)); + } + + _createClass(Snippet, [{ + key: 'render', + value: function render() { + return _react2.default.createElement( + 'div', + { className: _Snippet2.default.root }, + _react2.default.createElement( + 'div', + { className: _Snippet2.default.output }, + _react2.default.createElement( + 'div', + { className: _Snippet2.default.fileName }, + 'Output' + ), + _react2.default.createElement( + 'div', + { className: _Snippet2.default.outputContent }, + this.props.children + ) + ), + this.props.files.map(function (file) { + return _react2.default.createElement( + 'div', + { key: file.name, className: _Snippet2.default.file }, + _react2.default.createElement( + 'div', + { className: _Snippet2.default.fileName }, + file.name + ), + _react2.default.createElement( + 'pre', + { className: _Snippet2.default.pre }, + file.source + ) + ); + }) + ); + } + }]); + + return Snippet; +}(_react.Component); + +exports.default = Snippet; +; + +},{"./Snippet.css":23,"react":"react"}],25:[function(require,module,exports){ +module.exports = {"duration":"0.6s"} +},{}],26:[function(require,module,exports){ +require("/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/animation-values.css") +module.exports = {"bounceAmount":"-20px","bounceDuration":"0.6s","bounce":"_src_components_shared_styles_animations__bounce"} +},{"/Users/josh/projects/css-modules/browserify-demo/src/components/shared/styles/animation-values.css":25}],27:[function(require,module,exports){ +module.exports = {"box":"_src_components_shared_styles_layout__box"} +},{}],28:[function(require,module,exports){ +module.exports = {"heading":"_src_components_shared_styles_typography__heading"} +},{}],29:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _App = require('./components/App'); + +var _App2 = _interopRequireDefault(_App); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +if (typeof document !== 'undefined') { + _reactDom2.default.render(_react2.default.createElement(_App2.default, null), document.getElementById('outlet')); +} + +exports.default = _App2.default; + +},{"./components/App":22,"react":"react","react-dom":"react-dom"}]},{},[29]); diff --git a/src/components/0-Logo/logo.svg b/logo.svg similarity index 100% rename from src/components/0-Logo/logo.svg rename to logo.svg diff --git a/main.css b/main.css new file mode 100644 index 0000000..393812e --- /dev/null +++ b/main.css @@ -0,0 +1,151 @@ +._src_components_App__app { + -webkit-text-size-adjust: none; + -ms-text-size-adjust: none; + text-size-adjust: none; + font-family: helvetica, arial, sans-serif; + line-height: 200%; + padding: 6px 20px 30px; +} + +._src_components_App__hr { + margin: 40px 0; + height: 1px; + border: 0; + background: #ccc; +} +._src_components_0_Logo_Logo__logo { + background-image: url("./logo.svg"); + background-size: 200px 200px; + width: 200px; + height: 200px; +} +._src_components_1_ScopedSelectors_ScopedSelectors__root { + border-width: 2px; + border-style: solid; + border-color: #777; + padding: 0 20px; + margin: 0 6px; + max-width: 400px; +} + +._src_components_1_ScopedSelectors_ScopedSelectors__text { + color: #777; + font-size: 24px; + font-family: helvetica, arial, sans-serif; + font-weight: 600; +} +._src_components_2_GlobalSelectors_GlobalSelectors__root { + border-width: 2px; + border-style: solid; + border-color: brown; + padding: 0 20px; + margin: 0 6px; + max-width: 400px; +} + +._src_components_2_GlobalSelectors_GlobalSelectors__root p { + color: brown; + font-size: 24px; + font-family: helvetica, arial, sans-serif; + font-weight: 600; +} +._src_components_shared_styles_layout__box { + border-width: 2px; + border-style: solid; + padding: 0 20px; + margin: 0 6px; + max-width: 400px; +} +._src_components_shared_styles_typography__heading { + font-size: 24px; + font-family: helvetica, arial, sans-serif; + font-weight: 600; +} +._src_components_4_CompositionOverrides_CompositionOverrides__root { + border-style: dotted; + border-color: green; +} + +._src_components_4_CompositionOverrides_CompositionOverrides__text { + font-weight: 200; + color: green; +} + +@-webkit-keyframes _src_components_shared_styles_animations__bounce { + 33% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } + 66% { -webkit-transform: translateY(0px); transform: translateY(0px); } +} + +@keyframes _src_components_shared_styles_animations__bounce { + 33% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } + 66% { -webkit-transform: translateY(0px); transform: translateY(0px); } +} + +._src_components_shared_styles_animations__bounce { + -webkit-animation: _src_components_shared_styles_animations__bounce 0.6s infinite ease-in-out; + animation: _src_components_shared_styles_animations__bounce 0.6s infinite ease-in-out; +} +._src_components_5_ScopedAnimations_ScopedAnimations__root { + padding: 20px 10px; +} + +._src_components_5_ScopedAnimations_ScopedAnimations__ball { + width: 40px; + height: 40px; + border-radius: 20px; + background: rgb(102, 51, 153); +} +._src_components_shared_Snippet_Snippet__root { + margin-top: 32px; +} + +._src_components_shared_Snippet_Snippet__output { + background: white; + color: #333; + max-width: 700px; + border-radius: 10px; + margin-bottom: 20px; + border: 1px solid #003957; + border-top-width: 0; +} + +._src_components_shared_Snippet_Snippet__outputContent { + padding: 40px 30px; +} + +._src_components_shared_Snippet_Snippet__file { + background: #003957; + color: rgba(255, 255, 255, 0.9); + max-width: 700px; + border-radius: 10px; + margin-bottom: 20px; +} + +._src_components_shared_Snippet_Snippet__fileName { + background: #011E2D; + color: #00B37D; + padding: 10px 20px; + border-radius: 10px 10px 0 0; +} + +._src_components_shared_Snippet_Snippet__pre { + overflow: auto; + font-family: menlo, consolas, monospace; + font-size: 14px; + line-height: 20px; + padding: 5px 20px 20px; +} +._src_components_3_ClassComposition_StyleVariantA_StyleVariantA__root { + border-color: red; +} + +._src_components_3_ClassComposition_StyleVariantA_StyleVariantA__text { + color: red; +} +._src_components_3_ClassComposition_StyleVariantB_StyleVariantB__root { + border-color: blue; +} + +._src_components_3_ClassComposition_StyleVariantB_StyleVariantB__text { + color: blue; +} diff --git a/monobrow/babel.js b/monobrow/babel.js deleted file mode 100644 index 1b89ca3..0000000 --- a/monobrow/babel.js +++ /dev/null @@ -1,7 +0,0 @@ -const babelify = require('babelify') - -module.exports = function setup (b, opts) { - b.transform(babelify, { - presets: [ 'es2015', 'react' ] - }) -} diff --git a/monobrow/config.js b/monobrow/config.js deleted file mode 100644 index dad8c02..0000000 --- a/monobrow/config.js +++ /dev/null @@ -1,22 +0,0 @@ -const m = require('monobrow') - -module.exports = { - entry: 'src/index.js', - output: { - dir: 'dist', - vendor: 'vendor.js' - }, - - vendor: [ - 'react', - 'react-dom' - ], - - // disable browserify-incremental as css-modulesify is not yet compatible - inc: false, - - packs: [ - require('./babel'), - require('./css-modules'), - ] -} diff --git a/monobrow/css-modules.js b/monobrow/css-modules.js deleted file mode 100644 index 90d1fa5..0000000 --- a/monobrow/css-modules.js +++ /dev/null @@ -1,11 +0,0 @@ -module.exports = function setup (b, opts) { - b.plugin('css-modulesify', { - output: 'dist/main.css', - postcssBefore: [ - require('postcss-color-rebeccapurple') - ], - postcssAfter: [ - require('autoprefixer') - ] - }) -} diff --git a/package.json b/package.json deleted file mode 100644 index 3af7f3f..0000000 --- a/package.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "name": "browserify-demo", - "version": "1.0.1", - "description": "A working demo of CSS Modules using browserify", - "main": "index.js", - "scripts": { - "test": "npm run build", - "clean": "rm -rf dist && mkdir dist", - "browserify": "browserify -t [babelify --presets es2015 --presets react] -p [css-modulesify --before postcss-color-rebeccapurple --after autoprefixer --autoprefixer.browsers \"> 5%\" -o dist/main.css --json dist/css-modules.json] -o dist/index.js src/index.js", - "watchify": "watchify -v -t [babelify --presets es2015 --presets react] -p [css-modulesify --after postcss-color-rebeccapurple --after autoprefixer --autoprefixer.browsers \"> 5%\" -o dist/main.css] -o dist/index.js src/index.js", - "copy": "cp src/index.html dist/index.html && cp src/components/0-Logo/logo.svg dist/logo.svg", - "build-app": "monobrow -c monobrow/config.js", - "build": "npm run clean && npm run copy && npm run build-app", - "budo": "budo src/index.js:index.js --open --dir=dist -- -t [babelify --presets es2015 --presets react] -p [css-modulesify --after postcss-color-rebeccapurple --after autoprefixer --autoprefixer.browsers \"> 5%\" -o dist/main.css --json dist/css-modules.json] -o dist/index.js src/index.js", - "start": "npm run clean && npm run copy && npm run budo", - "deploy": "npm run build && gh-pages -d dist -m \"Updates --skip-ci\"" - }, - "repository": { - "type": "git", - "url": "https://github.com/css-modules/browserify-demo.git" - }, - "author": "Josh Johnston", - "license": "MIT", - "bugs": { - "url": "https://github.com/css-modules/browserify-demo/issues" - }, - "homepage": "https://github.com/css-modules/browserify-demo", - "devDependencies": { - "autoprefixer": "^6.0.3", - "babel-preset-es2015": "^6.18.0", - "babel-preset-react": "^6.16.0", - "babelify": "^7.3.0", - "brfs": "git://github.com/joshwnj/brfs#ignore-option", - "browserify": "^14.3.0", - "budo": "^9.3.0", - "css-modulesify": "^0.28.0", - "gh-pages": "^0.12.0", - "hyperscript": "^2.0.2", - "monobrow": "^2.9.1", - "postcss-color-rebeccapurple": "^2.0.0", - "postcss-modules-extract-imports": "^1.0.0", - "postcss-modules-local-by-default": "^1.0.0", - "postcss-modules-scope": "^1.0.0", - "react": "^15.4.1", - "react-dom": "^15.4.1", - "watchify": "^3.2.2" - }, - "browserify": { - "transform": [ - [ - "brfs", - { - "ignore": "\\.(json|css)$" - } - ] - ] - } -} diff --git a/src/components/0-Logo/Logo.css b/src/components/0-Logo/Logo.css deleted file mode 100644 index 237ceb2..0000000 --- a/src/components/0-Logo/Logo.css +++ /dev/null @@ -1,6 +0,0 @@ -.logo { - background-image: url("./logo.svg"); - background-size: 200px 200px; - width: 200px; - height: 200px; -} diff --git a/src/components/0-Logo/Logo.js b/src/components/0-Logo/Logo.js deleted file mode 100644 index d981f13..0000000 --- a/src/components/0-Logo/Logo.js +++ /dev/null @@ -1,9 +0,0 @@ -import styles from './Logo.css'; - -import React, { Component } from 'react'; - -export default class Logo extends Component { - render() { - return

; - } -}; diff --git a/src/components/1-ScopedSelectors/ScopedSelectors.css b/src/components/1-ScopedSelectors/ScopedSelectors.css deleted file mode 100644 index 3c933b8..0000000 --- a/src/components/1-ScopedSelectors/ScopedSelectors.css +++ /dev/null @@ -1,17 +0,0 @@ -@value niceGray: #777; - -.root { - border-width: 2px; - border-style: solid; - border-color: niceGray; - padding: 0 20px; - margin: 0 6px; - max-width: 400px; -} - -.text { - color: niceGray; - font-size: 24px; - font-family: helvetica, arial, sans-serif; - font-weight: 600; -} diff --git a/src/components/1-ScopedSelectors/ScopedSelectors.js b/src/components/1-ScopedSelectors/ScopedSelectors.js deleted file mode 100644 index 6996a88..0000000 --- a/src/components/1-ScopedSelectors/ScopedSelectors.js +++ /dev/null @@ -1,15 +0,0 @@ -import styles from './ScopedSelectors.css'; - -import React, { Component } from 'react'; - -export default class ScopedSelectors extends Component { - - render() { - return ( -
-

Scoped Selectors

-
- ); - } - -}; diff --git a/src/components/1-ScopedSelectors/ScopedSelectorsDemo.js b/src/components/1-ScopedSelectors/ScopedSelectorsDemo.js deleted file mode 100644 index 0318c70..0000000 --- a/src/components/1-ScopedSelectors/ScopedSelectorsDemo.js +++ /dev/null @@ -1,26 +0,0 @@ -import ScopedSelectors from './ScopedSelectors'; - -import React, { Component } from 'react'; - -import Snippet from '../shared/Snippet/Snippet'; - -const fs = require('fs'); -const js = fs.readFileSync(__dirname + '/ScopedSelectors.js', 'utf8'); -const css = fs.readFileSync(__dirname + '/ScopedSelectors.css', 'utf8'); - -export default class ScopedSelectorsDemo extends Component { - - render() { - const files = [ - { name: 'ScopedSelectors.js', source: js }, - { name: 'ScopedSelectors.css', source: css } - ]; - - return ( - - - - ); - } - -}; diff --git a/src/components/2-GlobalSelectors/GlobalSelectors.css b/src/components/2-GlobalSelectors/GlobalSelectors.css deleted file mode 100644 index da6e590..0000000 --- a/src/components/2-GlobalSelectors/GlobalSelectors.css +++ /dev/null @@ -1,15 +0,0 @@ -.root { - border-width: 2px; - border-style: solid; - border-color: brown; - padding: 0 20px; - margin: 0 6px; - max-width: 400px; -} - -.root :global p { - color: brown; - font-size: 24px; - font-family: helvetica, arial, sans-serif; - font-weight: 600; -} diff --git a/src/components/2-GlobalSelectors/GlobalSelectors.js b/src/components/2-GlobalSelectors/GlobalSelectors.js deleted file mode 100644 index f771541..0000000 --- a/src/components/2-GlobalSelectors/GlobalSelectors.js +++ /dev/null @@ -1,15 +0,0 @@ -import styles from './GlobalSelectors.css'; - -import React, { Component } from 'react'; - -export default class GlobalSelectors extends Component { - - render() { - return ( -
-

Global Selectors

-
- ); - } - -}; diff --git a/src/components/2-GlobalSelectors/GlobalSelectorsDemo.js b/src/components/2-GlobalSelectors/GlobalSelectorsDemo.js deleted file mode 100644 index 9a8ebba..0000000 --- a/src/components/2-GlobalSelectors/GlobalSelectorsDemo.js +++ /dev/null @@ -1,26 +0,0 @@ -import GlobalSelectors from './GlobalSelectors'; - -import React, { Component } from 'react'; - -import Snippet from '../shared/Snippet/Snippet'; - -const fs = require('fs'); -const js = fs.readFileSync(__dirname + '/GlobalSelectors.js', 'utf8'); -const css = fs.readFileSync(__dirname + '/GlobalSelectors.css', 'utf8'); - -export default class GlobalSelectorsDemo extends Component { - - render() { - const files = [ - { name: 'GlobalSelectors.js', source: js }, - { name: 'GlobalSelectors.css', source: css } - ]; - - return ( - - - - ); - } - -}; diff --git a/src/components/3-ClassComposition/ClassComposition.js b/src/components/3-ClassComposition/ClassComposition.js deleted file mode 100644 index 9eca3da..0000000 --- a/src/components/3-ClassComposition/ClassComposition.js +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Component } from 'react'; - -import StyleVariantA from './StyleVariantA/StyleVariantA'; -import StyleVariantB from './StyleVariantB/StyleVariantB'; - -export default class ClassComposition extends Component { - - render() { - return ( -
- -
- -
- ); - } - -}; diff --git a/src/components/3-ClassComposition/ClassCompositionDemo.js b/src/components/3-ClassComposition/ClassCompositionDemo.js deleted file mode 100644 index 88d14bb..0000000 --- a/src/components/3-ClassComposition/ClassCompositionDemo.js +++ /dev/null @@ -1,30 +0,0 @@ -import ClassComposition from './ClassComposition'; - -import React, { Component } from 'react'; - -import Snippet from '../shared/Snippet/Snippet'; - -const fs = require('fs'); -const js = fs.readFileSync(__dirname + '/StyleVariantA/StyleVariantA.js', 'utf8'); -const css = fs.readFileSync(__dirname + '/StyleVariantA/StyleVariantA.css', 'utf8'); -const layoutCss = fs.readFileSync(__dirname + '/../shared/styles/layout.css', 'utf8'); -const typographyCss = fs.readFileSync(__dirname + '/../shared/styles/typography.css', 'utf8'); - -export default class ClassCompositionDemo extends Component { - - render() { - const files = [ - { name: 'StyleVariantA.js', source: js }, - { name: 'StyleVariantA.css', source: css }, - { name: 'shared/styles/layout.css', source: layoutCss }, - { name: 'shared/styles/typography.css', source: typographyCss } - ]; - - return ( - - - - ); - } - -}; diff --git a/src/components/3-ClassComposition/StyleVariantA/StyleVariantA.css b/src/components/3-ClassComposition/StyleVariantA/StyleVariantA.css deleted file mode 100644 index 369cbb3..0000000 --- a/src/components/3-ClassComposition/StyleVariantA/StyleVariantA.css +++ /dev/null @@ -1,9 +0,0 @@ -.root { - composes: box from "../../shared/styles/layout.css"; - border-color: red; -} - -.text { - composes: heading from "../../shared/styles/typography.css"; - color: red; -} diff --git a/src/components/3-ClassComposition/StyleVariantA/StyleVariantA.js b/src/components/3-ClassComposition/StyleVariantA/StyleVariantA.js deleted file mode 100644 index c94871a..0000000 --- a/src/components/3-ClassComposition/StyleVariantA/StyleVariantA.js +++ /dev/null @@ -1,15 +0,0 @@ -import styles from './StyleVariantA.css'; - -import React, { Component } from 'react'; - -export default class StyleVariantA extends Component { - - render() { - return ( -
-

Style Variant A

-
- ); - } - -}; diff --git a/src/components/3-ClassComposition/StyleVariantB/StyleVariantB.css b/src/components/3-ClassComposition/StyleVariantB/StyleVariantB.css deleted file mode 100644 index 6c64c33..0000000 --- a/src/components/3-ClassComposition/StyleVariantB/StyleVariantB.css +++ /dev/null @@ -1,9 +0,0 @@ -.root { - composes: box from "../../shared/styles/layout.css"; - border-color: blue; -} - -.text { - composes: heading from "../../shared/styles/typography.css"; - color: blue; -} diff --git a/src/components/3-ClassComposition/StyleVariantB/StyleVariantB.js b/src/components/3-ClassComposition/StyleVariantB/StyleVariantB.js deleted file mode 100644 index e5e79d6..0000000 --- a/src/components/3-ClassComposition/StyleVariantB/StyleVariantB.js +++ /dev/null @@ -1,15 +0,0 @@ -import styles from './StyleVariantB.css'; - -import React, { Component } from 'react'; - -export default class StyleVariantB extends Component { - - render() { - return ( -
-

Style Variant B

-
- ); - } - -}; diff --git a/src/components/4-CompositionOverrides/CompositionOverrides.css b/src/components/4-CompositionOverrides/CompositionOverrides.css deleted file mode 100644 index 5d16b06..0000000 --- a/src/components/4-CompositionOverrides/CompositionOverrides.css +++ /dev/null @@ -1,11 +0,0 @@ -.root { - composes: box from "../shared/styles/layout.css"; - border-style: dotted; - border-color: green; -} - -.text { - composes: heading from "../shared/styles/typography.css"; - font-weight: 200; - color: green; -} diff --git a/src/components/4-CompositionOverrides/CompositionOverrides.js b/src/components/4-CompositionOverrides/CompositionOverrides.js deleted file mode 100644 index deda179..0000000 --- a/src/components/4-CompositionOverrides/CompositionOverrides.js +++ /dev/null @@ -1,15 +0,0 @@ -import styles from './CompositionOverrides.css'; - -import React, { Component } from 'react'; - -export default class CompositionOverrides extends Component { - - render() { - return ( -
-

Class Composition with Overrides

-
- ); - } - -}; diff --git a/src/components/4-CompositionOverrides/CompositionOverridesDemo.js b/src/components/4-CompositionOverrides/CompositionOverridesDemo.js deleted file mode 100644 index 644f2b2..0000000 --- a/src/components/4-CompositionOverrides/CompositionOverridesDemo.js +++ /dev/null @@ -1,30 +0,0 @@ -import CompositionOverrides from './CompositionOverrides'; - -import React, { Component } from 'react'; - -import Snippet from '../shared/Snippet/Snippet'; - -const fs = require('fs'); -const js = fs.readFileSync(__dirname + '/CompositionOverrides.js', 'utf8'); -const css = fs.readFileSync(__dirname + '/CompositionOverrides.css', 'utf8'); -const layoutCss = fs.readFileSync(__dirname + '/../shared/styles/layout.css', 'utf8'); -const typographyCss = fs.readFileSync(__dirname + '/../shared/styles/typography.css', 'utf8'); - -export default class CompositionOverridesDemo extends Component { - - render() { - const files = [ - { name: 'CompositionOverrides.js', source: js }, - { name: 'CompositionOverrides.css', source: css }, - { name: 'shared/styles/layout.css', source: layoutCss }, - { name: 'shared/styles/typography.css', source: typographyCss } - ]; - - return ( - - - - ); - } - -}; diff --git a/src/components/5-ScopedAnimations/ScopedAnimations.css b/src/components/5-ScopedAnimations/ScopedAnimations.css deleted file mode 100644 index 11f2384..0000000 --- a/src/components/5-ScopedAnimations/ScopedAnimations.css +++ /dev/null @@ -1,11 +0,0 @@ -.root { - padding: 20px 10px; -} - -.ball { - composes: bounce from "../shared/styles/animations.css"; - width: 40px; - height: 40px; - border-radius: 20px; - background: rebeccapurple; -} diff --git a/src/components/5-ScopedAnimations/ScopedAnimations.js b/src/components/5-ScopedAnimations/ScopedAnimations.js deleted file mode 100644 index 5fe9ccd..0000000 --- a/src/components/5-ScopedAnimations/ScopedAnimations.js +++ /dev/null @@ -1,15 +0,0 @@ -import styles from './ScopedAnimations.css'; - -import React, { Component } from 'react'; - -export default class ScopedAnimations extends Component { - - render() { - return ( -
-
-
- ); - } - -}; diff --git a/src/components/5-ScopedAnimations/ScopedAnimationsDemo.js b/src/components/5-ScopedAnimations/ScopedAnimationsDemo.js deleted file mode 100644 index f863f04..0000000 --- a/src/components/5-ScopedAnimations/ScopedAnimationsDemo.js +++ /dev/null @@ -1,28 +0,0 @@ -import ScopedAnimations from './ScopedAnimations'; - -import React, { Component } from 'react'; - -import Snippet from '../shared/Snippet/Snippet'; - -const fs = require('fs'); -const js = fs.readFileSync(__dirname + '/ScopedAnimations.js', 'utf8'); -const css = fs.readFileSync(__dirname + '/ScopedAnimations.css', 'utf8'); -const animationsCss = fs.readFileSync(__dirname + '/../shared/styles/animations.css', 'utf8'); - -export default class ScopedAnimationsDemo extends Component { - - render() { - const files = [ - { name: 'ScopedAnimations.js', source: js }, - { name: 'ScopedAnimations.css', source: css }, - { name: 'shared/styles/animations.css', source: animationsCss } - ]; - - return ( - - - - ); - } - -}; diff --git a/src/components/App.css b/src/components/App.css deleted file mode 100644 index 1d29fc0..0000000 --- a/src/components/App.css +++ /dev/null @@ -1,13 +0,0 @@ -.app { - text-size-adjust: none; - font-family: helvetica, arial, sans-serif; - line-height: 200%; - padding: 6px 20px 30px; -} - -.hr { - margin: 40px 0; - height: 1px; - border: 0; - background: #ccc; -} diff --git a/src/components/App.js b/src/components/App.js deleted file mode 100644 index e81b94d..0000000 --- a/src/components/App.js +++ /dev/null @@ -1,59 +0,0 @@ -import styles from './App.css'; - -import React, { Component } from 'react'; - -import Logo from './0-Logo/Logo'; -import ScopedSelectorsDemo from './1-ScopedSelectors/ScopedSelectorsDemo'; -import GlobalSelectorsDemo from './2-GlobalSelectors/GlobalSelectorsDemo'; -import ClassCompositionDemo from './3-ClassComposition/ClassCompositionDemo'; -import CompositionOverridesDemo from './4-CompositionOverrides/CompositionOverridesDemo'; -import ScopedAnimationsDemo from './5-ScopedAnimations/ScopedAnimationsDemo'; - -export default class App extends Component { - - render() { - return ( -
- -

CSS Modules Browserify Demo

- -
- -

Scoped Selectors

-

In CSS Modules, selectors are scoped by default.

-

The following component uses two classes, .root and .text, both of which would typically be too vague in a larger project.

-

CSS Module semantics ensure that these classes are locally scoped to the component and don't collide with other classes in the global scope.

- - -
- -

Global Selectors

-

Although they should be used as sparingly as possible, global selectors are still available when required.

-

The following component styles all <p> tags nested inside it.

- - -
- -

Class Composition

-

Both of the components below have locally scoped CSS that is composed from a common set of CSS Modules.

-

Since CSS Modules can be composed, the resulting markup is optimised by reusing classes between components.

- - -
- -

Composition Overrides

-

When composing classes, inherited style properties can be overridden as you'd expect.

-

The following component composes two different classes, but provides overrides which then take precedence.

- - -
- -

Scoped Animations

-

CSS Modules even provide locally scoped animations, which are typically defined in the global scope.

-

The animation's keyframes are private to the animations module, only exposed publicly via a class which this component inherits from.

- - -
- ); - } -}; diff --git a/src/components/shared/Snippet/Snippet.css b/src/components/shared/Snippet/Snippet.css deleted file mode 100644 index da7dadc..0000000 --- a/src/components/shared/Snippet/Snippet.css +++ /dev/null @@ -1,40 +0,0 @@ -.root { - margin-top: 32px; -} - -.output { - background: white; - color: #333; - max-width: 700px; - border-radius: 10px; - margin-bottom: 20px; - border: 1px solid #003957; - border-top-width: 0; -} - -.outputContent { - padding: 40px 30px; -} - -.file { - background: #003957; - color: rgba(255, 255, 255, 0.9); - max-width: 700px; - border-radius: 10px; - margin-bottom: 20px; -} - -.fileName { - background: #011E2D; - color: #00B37D; - padding: 10px 20px; - border-radius: 10px 10px 0 0; -} - -.pre { - overflow: auto; - font-family: menlo, consolas, monospace; - font-size: 14px; - line-height: 20px; - padding: 5px 20px 20px; -} diff --git a/src/components/shared/Snippet/Snippet.js b/src/components/shared/Snippet/Snippet.js deleted file mode 100644 index 624c196..0000000 --- a/src/components/shared/Snippet/Snippet.js +++ /dev/null @@ -1,31 +0,0 @@ -import styles from './Snippet.css'; - -import React, { Component } from 'react'; - -export default class Snippet extends Component { - - render() { - return ( -
- -
-
Output
-
- { this.props.children } -
-
- - { - this.props.files.map(file => ( -
-
{ file.name }
-
{ file.source }
-
- )) - } - -
- ); - } - -}; diff --git a/src/components/shared/styles/animation-values.css b/src/components/shared/styles/animation-values.css deleted file mode 100644 index b501fdf..0000000 --- a/src/components/shared/styles/animation-values.css +++ /dev/null @@ -1 +0,0 @@ -@value duration: 0.6s; diff --git a/src/components/shared/styles/animations.css b/src/components/shared/styles/animations.css deleted file mode 100644 index c130051..0000000 --- a/src/components/shared/styles/animations.css +++ /dev/null @@ -1,11 +0,0 @@ -@value bounceAmount: -20px; -@value duration as bounceDuration from "./animation-values.css"; - -@keyframes bounce { - 33% { transform: translateY(bounceAmount); } - 66% { transform: translateY(0px); } -} - -.bounce { - animation: bounce bounceDuration infinite ease-in-out; -} diff --git a/src/components/shared/styles/layout.css b/src/components/shared/styles/layout.css deleted file mode 100644 index c7d1f6a..0000000 --- a/src/components/shared/styles/layout.css +++ /dev/null @@ -1,7 +0,0 @@ -.box { - border-width: 2px; - border-style: solid; - padding: 0 20px; - margin: 0 6px; - max-width: 400px; -} diff --git a/src/components/shared/styles/typography.css b/src/components/shared/styles/typography.css deleted file mode 100644 index fd7babe..0000000 --- a/src/components/shared/styles/typography.css +++ /dev/null @@ -1,5 +0,0 @@ -.heading { - font-size: 24px; - font-family: helvetica, arial, sans-serif; - font-weight: 600; -} diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 228b014..0000000 --- a/src/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './components/App'; - -if (typeof document !== 'undefined') { - ReactDOM.render(, document.getElementById('outlet')); -} - -export default App; diff --git a/vendor.js b/vendor.js new file mode 100644 index 0000000..15c0ba1 --- /dev/null +++ b/vendor.js @@ -0,0 +1,20804 @@ +require=(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 camelize('background-color') + * < "backgroundColor" + * + * @param {string} string + * @return {string} + */ +function camelize(string) { + return string.replace(_hyphenPattern, function (_, character) { + return character.toUpperCase(); + }); +} + +module.exports = camelize; +},{}],4:[function(require,module,exports){ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @typechecks + */ + +'use strict'; + +var camelize = require('./camelize'); + +var msPattern = /^-ms-/; + +/** + * Camelcases a hyphenated CSS property name, for example: + * + * > camelizeStyleName('background-color') + * < "backgroundColor" + * > camelizeStyleName('-moz-transition') + * < "MozTransition" + * > camelizeStyleName('-ms-transition') + * < "msTransition" + * + * As Andi Smith suggests + * (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix + * is converted to lowercase `ms`. + * + * @param {string} string + * @return {string} + */ +function camelizeStyleName(string) { + return camelize(string.replace(msPattern, 'ms-')); +} + +module.exports = camelizeStyleName; +},{"./camelize":3}],5:[function(require,module,exports){ +'use strict'; + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * + */ + +var isTextNode = require('./isTextNode'); + +/*eslint-disable no-bitwise */ + +/** + * Checks if a given DOM node contains or is another DOM node. + */ +function containsNode(outerNode, innerNode) { + if (!outerNode || !innerNode) { + return false; + } else if (outerNode === innerNode) { + return true; + } else if (isTextNode(outerNode)) { + return false; + } else if (isTextNode(innerNode)) { + return containsNode(outerNode, innerNode.parentNode); + } else if ('contains' in outerNode) { + return outerNode.contains(innerNode); + } else if (outerNode.compareDocumentPosition) { + return !!(outerNode.compareDocumentPosition(innerNode) & 16); + } else { + return false; + } +} + +module.exports = containsNode; +},{"./isTextNode":18}],6:[function(require,module,exports){ +(function (process){ +'use strict'; + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @typechecks + */ + +var invariant = require('./invariant'); + +/** + * Convert array-like objects to arrays. + * + * This API assumes the caller knows the contents of the data type. For less + * well defined inputs use createArrayFromMixed. + * + * @param {object|function|filelist} obj + * @return {array} + */ +function toArray(obj) { + var length = obj.length; + + // Some browsers builtin objects can report typeof 'function' (e.g. NodeList + // in old versions of Safari). + !(!Array.isArray(obj) && (typeof obj === 'object' || typeof obj === 'function')) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'toArray: Array-like object expected') : invariant(false) : void 0; + + !(typeof length === 'number') ? process.env.NODE_ENV !== 'production' ? invariant(false, 'toArray: Object needs a length property') : invariant(false) : void 0; + + !(length === 0 || length - 1 in obj) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'toArray: Object should have keys for indices') : invariant(false) : void 0; + + !(typeof obj.callee !== 'function') ? process.env.NODE_ENV !== 'production' ? invariant(false, 'toArray: Object can\'t be `arguments`. Use rest params ' + '(function(...args) {}) or Array.from() instead.') : invariant(false) : void 0; + + // Old IE doesn't give collections access to hasOwnProperty. Assume inputs + // without method will throw during the slice call and skip straight to the + // fallback. + if (obj.hasOwnProperty) { + try { + return Array.prototype.slice.call(obj); + } catch (e) { + // IE < 9 does not support Array#slice on collections objects + } + } + + // Fall back to copying key by key. This assumes all keys have a value, + // so will not preserve sparsely populated inputs. + var ret = Array(length); + for (var ii = 0; ii < length; ii++) { + ret[ii] = obj[ii]; + } + return ret; +} + +/** + * Perform a heuristic test to determine if an object is "array-like". + * + * A monk asked Joshu, a Zen master, "Has a dog Buddha nature?" + * Joshu replied: "Mu." + * + * This function determines if its argument has "array nature": it returns + * true if the argument is an actual array, an `arguments' object, or an + * HTMLCollection (e.g. node.childNodes or node.getElementsByTagName()). + * + * It will return false for other array-like objects like Filelist. + * + * @param {*} obj + * @return {boolean} + */ +function hasArrayNature(obj) { + return ( + // not null/false + !!obj && ( + // arrays are objects, NodeLists are functions in Safari + typeof obj == 'object' || typeof obj == 'function') && + // quacks like an array + 'length' in obj && + // not window + !('setInterval' in obj) && + // no DOM node should be considered an array-like + // a 'select' element has 'length' and 'item' properties on IE8 + typeof obj.nodeType != 'number' && ( + // a real array + Array.isArray(obj) || + // arguments + 'callee' in obj || + // HTMLCollection/NodeList + 'item' in obj) + ); +} + +/** + * Ensure that the argument is an array by wrapping it in an array if it is not. + * Creates a copy of the argument if it is already an array. + * + * This is mostly useful idiomatically: + * + * var createArrayFromMixed = require('createArrayFromMixed'); + * + * function takesOneOrMoreThings(things) { + * things = createArrayFromMixed(things); + * ... + * } + * + * This allows you to treat `things' as an array, but accept scalars in the API. + * + * If you need to convert an array-like object, like `arguments`, into an array + * use toArray instead. + * + * @param {*} obj + * @return {array} + */ +function createArrayFromMixed(obj) { + if (!hasArrayNature(obj)) { + return [obj]; + } else if (Array.isArray(obj)) { + return obj.slice(); + } else { + return toArray(obj); + } +} + +module.exports = createArrayFromMixed; +}).call(this,require('_process')) +},{"./invariant":16,"_process":25}],7:[function(require,module,exports){ +(function (process){ +'use strict'; + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @typechecks + */ + +/*eslint-disable fb-www/unsafe-html*/ + +var ExecutionEnvironment = require('./ExecutionEnvironment'); + +var createArrayFromMixed = require('./createArrayFromMixed'); +var getMarkupWrap = require('./getMarkupWrap'); +var invariant = require('./invariant'); + +/** + * Dummy container used to render all markup. + */ +var dummyNode = ExecutionEnvironment.canUseDOM ? document.createElement('div') : null; + +/** + * Pattern used by `getNodeName`. + */ +var nodeNamePattern = /^\s*<(\w+)/; + +/** + * Extracts the `nodeName` of the first element in a string of markup. + * + * @param {string} markup String of markup. + * @return {?string} Node name of the supplied markup. + */ +function getNodeName(markup) { + var nodeNameMatch = markup.match(nodeNamePattern); + return nodeNameMatch && nodeNameMatch[1].toLowerCase(); +} + +/** + * Creates an array containing the nodes rendered from the supplied markup. The + * optionally supplied `handleScript` function will be invoked once for each + * element that is rendered. If no `handleScript` function is supplied, + * an exception is thrown if any elements are rendered. + * + * @param {string} markup A string of valid HTML markup. + * @param {?function} handleScript Invoked once for each rendered . + * @return {array} An array of rendered nodes. + */ +function createNodesFromMarkup(markup, handleScript) { + var node = dummyNode; + !!!dummyNode ? process.env.NODE_ENV !== 'production' ? invariant(false, 'createNodesFromMarkup dummy not initialized') : invariant(false) : void 0; + var nodeName = getNodeName(markup); + + var wrap = nodeName && getMarkupWrap(nodeName); + if (wrap) { + node.innerHTML = wrap[1] + markup + wrap[2]; + + var wrapDepth = wrap[0]; + while (wrapDepth--) { + node = node.lastChild; + } + } else { + node.innerHTML = markup; + } + + var scripts = node.getElementsByTagName('script'); + if (scripts.length) { + !handleScript ? process.env.NODE_ENV !== 'production' ? invariant(false, 'createNodesFromMarkup(...): Unexpected element rendered.') : invariant(false) : void 0; + createArrayFromMixed(scripts).forEach(handleScript); + } + + var nodes = Array.from(node.childNodes); + while (node.lastChild) { + node.removeChild(node.lastChild); + } + return nodes; +} + +module.exports = createNodesFromMarkup; +}).call(this,require('_process')) +},{"./ExecutionEnvironment":2,"./createArrayFromMixed":6,"./getMarkupWrap":12,"./invariant":16,"_process":25}],8:[function(require,module,exports){ +"use strict"; + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * + */ + +function makeEmptyFunction(arg) { + return function () { + return arg; + }; +} + +/** + * This function accepts and discards inputs; it has no side effects. This is + * primarily useful idiomatically for overridable function endpoints which + * always need to be callable, since JS lacks a null-call idiom ala Cocoa. + */ +var emptyFunction = function emptyFunction() {}; + +emptyFunction.thatReturns = makeEmptyFunction; +emptyFunction.thatReturnsFalse = makeEmptyFunction(false); +emptyFunction.thatReturnsTrue = makeEmptyFunction(true); +emptyFunction.thatReturnsNull = makeEmptyFunction(null); +emptyFunction.thatReturnsThis = function () { + return this; +}; +emptyFunction.thatReturnsArgument = function (arg) { + return arg; +}; + +module.exports = emptyFunction; +},{}],9:[function(require,module,exports){ +(function (process){ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var emptyObject = {}; + +if (process.env.NODE_ENV !== 'production') { + Object.freeze(emptyObject); +} + +module.exports = emptyObject; +}).call(this,require('_process')) +},{"_process":25}],10:[function(require,module,exports){ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +/** + * @param {DOMElement} node input/textarea to focus + */ + +function focusNode(node) { + // IE8 can throw "Can't move focus to the control because it is invisible, + // not enabled, or of a type that does not accept the focus." for all kinds of + // reasons that are too expensive and fragile to test. + try { + node.focus(); + } catch (e) {} +} + +module.exports = focusNode; +},{}],11:[function(require,module,exports){ +'use strict'; + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @typechecks + */ + +/* eslint-disable fb-www/typeof-undefined */ + +/** + * Same as document.activeElement but wraps in a try-catch block. In IE it is + * not safe to call document.activeElement if there is nothing focused. + * + * The activeElement will be null only if the document or document body is not + * yet defined. + * + * @param {?DOMDocument} doc Defaults to current document. + * @return {?DOMElement} + */ +function getActiveElement(doc) /*?DOMElement*/{ + doc = doc || (typeof document !== 'undefined' ? document : undefined); + if (typeof doc === 'undefined') { + return null; + } + try { + return doc.activeElement || doc.body; + } catch (e) { + return doc.body; + } +} + +module.exports = getActiveElement; +},{}],12:[function(require,module,exports){ +(function (process){ +'use strict'; + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +/*eslint-disable fb-www/unsafe-html */ + +var ExecutionEnvironment = require('./ExecutionEnvironment'); + +var invariant = require('./invariant'); + +/** + * Dummy container used to detect which wraps are necessary. + */ +var dummyNode = ExecutionEnvironment.canUseDOM ? document.createElement('div') : null; + +/** + * Some browsers cannot use `innerHTML` to render certain elements standalone, + * so we wrap them, render the wrapped nodes, then extract the desired node. + * + * In IE8, certain elements cannot render alone, so wrap all elements ('*'). + */ + +var shouldWrap = {}; + +var selectWrap = [1, '']; +var tableWrap = [1, '', '
']; +var trWrap = [3, '', '
']; + +var svgWrap = [1, '', '']; + +var markupWrap = { + '*': [1, '?
', '
'], + + 'area': [1, '', ''], + 'col': [2, '', '
'], + 'legend': [1, '
', '
'], + 'param': [1, '', ''], + 'tr': [2, '', '
'], + + 'optgroup': selectWrap, + 'option': selectWrap, + + 'caption': tableWrap, + 'colgroup': tableWrap, + 'tbody': tableWrap, + 'tfoot': tableWrap, + 'thead': tableWrap, + + 'td': trWrap, + 'th': trWrap +}; + +// Initialize the SVG elements since we know they'll always need to be wrapped +// consistently. If they are created inside a
they will be initialized in +// the wrong namespace (and will not display). +var svgElements = ['circle', 'clipPath', 'defs', 'ellipse', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'text', 'tspan']; +svgElements.forEach(function (nodeName) { + markupWrap[nodeName] = svgWrap; + shouldWrap[nodeName] = true; +}); + +/** + * Gets the markup wrap configuration for the supplied `nodeName`. + * + * NOTE: This lazily detects which wraps are necessary for the current browser. + * + * @param {string} nodeName Lowercase `nodeName`. + * @return {?array} Markup wrap configuration, if applicable. + */ +function getMarkupWrap(nodeName) { + !!!dummyNode ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Markup wrapping node not initialized') : invariant(false) : void 0; + if (!markupWrap.hasOwnProperty(nodeName)) { + nodeName = '*'; + } + if (!shouldWrap.hasOwnProperty(nodeName)) { + if (nodeName === '*') { + dummyNode.innerHTML = ''; + } else { + dummyNode.innerHTML = '<' + nodeName + '>'; + } + shouldWrap[nodeName] = !dummyNode.firstChild; + } + return shouldWrap[nodeName] ? markupWrap[nodeName] : null; +} + +module.exports = getMarkupWrap; +}).call(this,require('_process')) +},{"./ExecutionEnvironment":2,"./invariant":16,"_process":25}],13:[function(require,module,exports){ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @typechecks + */ + +'use strict'; + +/** + * Gets the scroll position of the supplied element or window. + * + * The return values are unbounded, unlike `getScrollPosition`. This means they + * may be negative or exceed the element boundaries (which is possible using + * inertial scrolling). + * + * @param {DOMWindow|DOMElement} scrollable + * @return {object} Map with `x` and `y` keys. + */ + +function getUnboundedScrollPosition(scrollable) { + if (scrollable.Window && scrollable instanceof scrollable.Window) { + return { + x: scrollable.pageXOffset || scrollable.document.documentElement.scrollLeft, + y: scrollable.pageYOffset || scrollable.document.documentElement.scrollTop + }; + } + return { + x: scrollable.scrollLeft, + y: scrollable.scrollTop + }; +} + +module.exports = getUnboundedScrollPosition; +},{}],14:[function(require,module,exports){ +'use strict'; + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @typechecks + */ + +var _uppercasePattern = /([A-Z])/g; + +/** + * Hyphenates a camelcased string, for example: + * + * > hyphenate('backgroundColor') + * < "background-color" + * + * For CSS style names, use `hyphenateStyleName` instead which works properly + * with all vendor prefixes, including `ms`. + * + * @param {string} string + * @return {string} + */ +function hyphenate(string) { + return string.replace(_uppercasePattern, '-$1').toLowerCase(); +} + +module.exports = hyphenate; +},{}],15:[function(require,module,exports){ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @typechecks + */ + +'use strict'; + +var hyphenate = require('./hyphenate'); + +var msPattern = /^ms-/; + +/** + * Hyphenates a camelcased CSS property name, for example: + * + * > hyphenateStyleName('backgroundColor') + * < "background-color" + * > hyphenateStyleName('MozTransition') + * < "-moz-transition" + * > hyphenateStyleName('msTransition') + * < "-ms-transition" + * + * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix + * is converted to `-ms-`. + * + * @param {string} string + * @return {string} + */ +function hyphenateStyleName(string) { + return hyphenate(string).replace(msPattern, '-ms-'); +} + +module.exports = hyphenateStyleName; +},{"./hyphenate":14}],16:[function(require,module,exports){ +(function (process){ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +/** + * Use invariant() to assert state which your program assumes to be true. + * + * Provide sprintf-style format (only %s is supported) and arguments + * to provide information about what broke and what you were + * expecting. + * + * The invariant message will be stripped in production, but the invariant + * will remain to ensure logic does not differ in production. + */ + +var validateFormat = function validateFormat(format) {}; + +if (process.env.NODE_ENV !== 'production') { + validateFormat = function validateFormat(format) { + if (format === undefined) { + throw new Error('invariant requires an error message argument'); + } + }; +} + +function invariant(condition, format, a, b, c, d, e, f) { + validateFormat(format); + + if (!condition) { + var error; + if (format === undefined) { + error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.'); + } else { + var args = [a, b, c, d, e, f]; + var argIndex = 0; + error = new Error(format.replace(/%s/g, function () { + return args[argIndex++]; + })); + error.name = 'Invariant Violation'; + } + + error.framesToPop = 1; // we don't care about invariant's own frame + throw error; + } +} + +module.exports = invariant; +}).call(this,require('_process')) +},{"_process":25}],17:[function(require,module,exports){ +'use strict'; + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @typechecks + */ + +/** + * @param {*} object The object to check. + * @return {boolean} Whether or not the object is a DOM node. + */ +function isNode(object) { + var doc = object ? object.ownerDocument || object : document; + var defaultView = doc.defaultView || window; + return !!(object && (typeof defaultView.Node === 'function' ? object instanceof defaultView.Node : typeof object === 'object' && typeof object.nodeType === 'number' && typeof object.nodeName === 'string')); +} + +module.exports = isNode; +},{}],18:[function(require,module,exports){ +'use strict'; + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @typechecks + */ + +var isNode = require('./isNode'); + +/** + * @param {*} object The object to check. + * @return {boolean} Whether or not the object is a DOM text node. + */ +function isTextNode(object) { + return isNode(object) && object.nodeType == 3; +} + +module.exports = isTextNode; +},{"./isNode":17}],19:[function(require,module,exports){ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * + * @typechecks static-only + */ + +'use strict'; + +/** + * Memoizes the return value of a function that accepts one string argument. + */ + +function memoizeStringOnly(callback) { + var cache = {}; + return function (string) { + if (!cache.hasOwnProperty(string)) { + cache[string] = callback.call(this, string); + } + return cache[string]; + }; +} + +module.exports = memoizeStringOnly; +},{}],20:[function(require,module,exports){ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @typechecks + */ + +'use strict'; + +var ExecutionEnvironment = require('./ExecutionEnvironment'); + +var performance; + +if (ExecutionEnvironment.canUseDOM) { + performance = window.performance || window.msPerformance || window.webkitPerformance; +} + +module.exports = performance || {}; +},{"./ExecutionEnvironment":2}],21:[function(require,module,exports){ +'use strict'; + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @typechecks + */ + +var performance = require('./performance'); + +var performanceNow; + +/** + * Detect if we can use `window.performance.now()` and gracefully fallback to + * `Date.now()` if it doesn't exist. We need to support Firefox < 15 for now + * because of Facebook's testing infrastructure. + */ +if (performance.now) { + performanceNow = function performanceNow() { + return performance.now(); + }; +} else { + performanceNow = function performanceNow() { + return Date.now(); + }; +} + +module.exports = performanceNow; +},{"./performance":20}],22:[function(require,module,exports){ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @typechecks + * + */ + +/*eslint-disable no-self-compare */ + +'use strict'; + +var hasOwnProperty = Object.prototype.hasOwnProperty; + +/** + * inlined Object.is polyfill to avoid requiring consumers ship their own + * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is + */ +function is(x, y) { + // SameValue algorithm + if (x === y) { + // Steps 1-5, 7-10 + // Steps 6.b-6.e: +0 != -0 + // Added the nonzero y check to make Flow happy, but it is redundant + return x !== 0 || y !== 0 || 1 / x === 1 / y; + } else { + // Step 6.a: NaN == NaN + return x !== x && y !== y; + } +} + +/** + * Performs equality by iterating through keys on an object and returning false + * when any key has values which are not strictly equal between the arguments. + * Returns true when the values of all keys are strictly equal. + */ +function shallowEqual(objA, objB) { + if (is(objA, objB)) { + return true; + } + + if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) { + return false; + } + + var keysA = Object.keys(objA); + var keysB = Object.keys(objB); + + if (keysA.length !== keysB.length) { + return false; + } + + // Test for A's keys different from B. + for (var i = 0; i < keysA.length; i++) { + if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) { + return false; + } + } + + return true; +} + +module.exports = shallowEqual; +},{}],23:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2014-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var emptyFunction = require('./emptyFunction'); + +/** + * Similar to invariant but only logs a warning if the condition is not met. + * This can be used to log issues in development environments in critical + * paths. Removing the logging code for production environments will keep the + * same logic and follow the same code paths. + */ + +var warning = emptyFunction; + +if (process.env.NODE_ENV !== 'production') { + (function () { + var printWarning = function printWarning(format) { + for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + var argIndex = 0; + var message = 'Warning: ' + format.replace(/%s/g, function () { + return args[argIndex++]; + }); + if (typeof console !== 'undefined') { + console.error(message); + } + try { + // --- Welcome to debugging React --- + // This error was thrown as a convenience so that you can use this stack + // to find the callsite that caused this warning to fire. + throw new Error(message); + } catch (x) {} + }; + + warning = function warning(condition, format) { + if (format === undefined) { + throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); + } + + if (format.indexOf('Failed Composite propType: ') === 0) { + return; // Ignore CompositeComponent proptype check. + } + + if (!condition) { + for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { + args[_key2 - 2] = arguments[_key2]; + } + + printWarning.apply(undefined, [format].concat(args)); + } + }; + })(); +} + +module.exports = warning; +}).call(this,require('_process')) +},{"./emptyFunction":8,"_process":25}],24:[function(require,module,exports){ +/* +object-assign +(c) Sindre Sorhus +@license MIT +*/ + +'use strict'; +/* eslint-disable no-unused-vars */ +var getOwnPropertySymbols = Object.getOwnPropertySymbols; +var hasOwnProperty = Object.prototype.hasOwnProperty; +var propIsEnumerable = Object.prototype.propertyIsEnumerable; + +function toObject(val) { + if (val === null || val === undefined) { + throw new TypeError('Object.assign cannot be called with null or undefined'); + } + + return Object(val); +} + +function shouldUseNative() { + try { + if (!Object.assign) { + return false; + } + + // Detect buggy property enumeration order in older V8 versions. + + // https://bugs.chromium.org/p/v8/issues/detail?id=4118 + var test1 = new String('abc'); // eslint-disable-line no-new-wrappers + test1[5] = 'de'; + if (Object.getOwnPropertyNames(test1)[0] === '5') { + return false; + } + + // https://bugs.chromium.org/p/v8/issues/detail?id=3056 + var test2 = {}; + for (var i = 0; i < 10; i++) { + test2['_' + String.fromCharCode(i)] = i; + } + var order2 = Object.getOwnPropertyNames(test2).map(function (n) { + return test2[n]; + }); + if (order2.join('') !== '0123456789') { + return false; + } + + // https://bugs.chromium.org/p/v8/issues/detail?id=3056 + var test3 = {}; + 'abcdefghijklmnopqrst'.split('').forEach(function (letter) { + test3[letter] = letter; + }); + if (Object.keys(Object.assign({}, test3)).join('') !== + 'abcdefghijklmnopqrst') { + return false; + } + + return true; + } catch (err) { + // We don't expect any of the above to throw, but better to be safe. + return false; + } +} + +module.exports = shouldUseNative() ? Object.assign : function (target, source) { + var from; + var to = toObject(target); + var symbols; + + for (var s = 1; s < arguments.length; s++) { + from = Object(arguments[s]); + + for (var key in from) { + if (hasOwnProperty.call(from, key)) { + to[key] = from[key]; + } + } + + if (getOwnPropertySymbols) { + symbols = getOwnPropertySymbols(from); + for (var i = 0; i < symbols.length; i++) { + if (propIsEnumerable.call(from, symbols[i])) { + to[symbols[i]] = from[symbols[i]]; + } + } + } + } + + return to; +}; + +},{}],25:[function(require,module,exports){ +// shim for using process in browser +var process = module.exports = {}; + +// cached from whatever global is present so that test runners that stub it +// don't break things. But we need to wrap it in a try catch in case it is +// wrapped in strict mode code which doesn't define any globals. It's inside a +// function because try/catches deoptimize in certain engines. + +var cachedSetTimeout; +var cachedClearTimeout; + +function defaultSetTimout() { + throw new Error('setTimeout has not been defined'); +} +function defaultClearTimeout () { + throw new Error('clearTimeout has not been defined'); +} +(function () { + try { + if (typeof setTimeout === 'function') { + cachedSetTimeout = setTimeout; + } else { + cachedSetTimeout = defaultSetTimout; + } + } catch (e) { + cachedSetTimeout = defaultSetTimout; + } + try { + if (typeof clearTimeout === 'function') { + cachedClearTimeout = clearTimeout; + } else { + cachedClearTimeout = defaultClearTimeout; + } + } catch (e) { + cachedClearTimeout = defaultClearTimeout; + } +} ()) +function runTimeout(fun) { + if (cachedSetTimeout === setTimeout) { + //normal enviroments in sane situations + return setTimeout(fun, 0); + } + // if setTimeout wasn't available but was latter defined + if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) { + cachedSetTimeout = setTimeout; + return setTimeout(fun, 0); + } + try { + // when when somebody has screwed with setTimeout but no I.E. maddness + return cachedSetTimeout(fun, 0); + } catch(e){ + try { + // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally + return cachedSetTimeout.call(null, fun, 0); + } catch(e){ + // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error + return cachedSetTimeout.call(this, fun, 0); + } + } + + +} +function runClearTimeout(marker) { + if (cachedClearTimeout === clearTimeout) { + //normal enviroments in sane situations + return clearTimeout(marker); + } + // if clearTimeout wasn't available but was latter defined + if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) { + cachedClearTimeout = clearTimeout; + return clearTimeout(marker); + } + try { + // when when somebody has screwed with setTimeout but no I.E. maddness + return cachedClearTimeout(marker); + } catch (e){ + try { + // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally + return cachedClearTimeout.call(null, marker); + } catch (e){ + // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error. + // Some versions of I.E. have different rules for clearTimeout vs setTimeout + return cachedClearTimeout.call(this, marker); + } + } + + + +} +var queue = []; +var draining = false; +var currentQueue; +var queueIndex = -1; + +function cleanUpNextTick() { + if (!draining || !currentQueue) { + return; + } + draining = false; + if (currentQueue.length) { + queue = currentQueue.concat(queue); + } else { + queueIndex = -1; + } + if (queue.length) { + drainQueue(); + } +} + +function drainQueue() { + if (draining) { + return; + } + var timeout = runTimeout(cleanUpNextTick); + draining = true; + + var len = queue.length; + while(len) { + currentQueue = queue; + queue = []; + while (++queueIndex < len) { + if (currentQueue) { + currentQueue[queueIndex].run(); + } + } + queueIndex = -1; + len = queue.length; + } + currentQueue = null; + draining = false; + runClearTimeout(timeout); +} + +process.nextTick = function (fun) { + var args = new Array(arguments.length - 1); + if (arguments.length > 1) { + for (var i = 1; i < arguments.length; i++) { + args[i - 1] = arguments[i]; + } + } + queue.push(new Item(fun, args)); + if (queue.length === 1 && !draining) { + runTimeout(drainQueue); + } +}; + +// v8 likes predictible objects +function Item(fun, array) { + this.fun = fun; + this.array = array; +} +Item.prototype.run = function () { + this.fun.apply(null, this.array); +}; +process.title = 'browser'; +process.browser = true; +process.env = {}; +process.argv = []; +process.version = ''; // empty string to avoid regexp issues +process.versions = {}; + +function noop() {} + +process.on = noop; +process.addListener = noop; +process.once = noop; +process.off = noop; +process.removeListener = noop; +process.removeAllListeners = noop; +process.emit = noop; +process.prependListener = noop; +process.prependOnceListener = noop; + +process.listeners = function (name) { return [] } + +process.binding = function (name) { + throw new Error('process.binding is not supported'); +}; + +process.cwd = function () { return '/' }; +process.chdir = function (dir) { + throw new Error('process.chdir is not supported'); +}; +process.umask = function() { return 0; }; + +},{}],26:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +'use strict'; + +if (process.env.NODE_ENV !== 'production') { + var invariant = require('fbjs/lib/invariant'); + var warning = require('fbjs/lib/warning'); + var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret'); + var loggedTypeFailures = {}; +} + +/** + * Assert that the values match with the type specs. + * Error messages are memorized and will only be shown once. + * + * @param {object} typeSpecs Map of name to a ReactPropType + * @param {object} values Runtime values that need to be type-checked + * @param {string} location e.g. "prop", "context", "child context" + * @param {string} componentName Name of the component for error messages. + * @param {?Function} getStack Returns the component stack. + * @private + */ +function checkPropTypes(typeSpecs, values, location, componentName, getStack) { + if (process.env.NODE_ENV !== 'production') { + for (var typeSpecName in typeSpecs) { + if (typeSpecs.hasOwnProperty(typeSpecName)) { + var error; + // Prop type validation may throw. In case they do, we don't want to + // fail the render phase where it didn't fail before. So we log it. + // After these have been cleaned up, we'll let them throw. + try { + // This is intentionally an invariant that gets caught. It's the same + // behavior as without this statement except with a better message. + invariant(typeof typeSpecs[typeSpecName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'React.PropTypes.', componentName || 'React class', location, typeSpecName); + error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret); + } catch (ex) { + error = ex; + } + 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); + if (error instanceof Error && !(error.message in loggedTypeFailures)) { + // Only monitor this failure once because there tends to be a lot of the + // same error. + loggedTypeFailures[error.message] = true; + + var stack = getStack ? getStack() : ''; + + warning(false, 'Failed %s type: %s%s', location, error.message, stack != null ? stack : ''); + } + } + } + } +} + +module.exports = checkPropTypes; + +}).call(this,require('_process')) +},{"./lib/ReactPropTypesSecret":29,"_process":25,"fbjs/lib/invariant":16,"fbjs/lib/warning":23}],27:[function(require,module,exports){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +'use strict'; + +// React 15.5 references this module, and assumes PropTypes are still callable in production. +// Therefore we re-export development-only version with all the PropTypes checks here. +// However if one is migrating to the `prop-types` npm library, they will go through the +// `index.js` entry point, and it will branch depending on the environment. +var factory = require('./factoryWithTypeCheckers'); +module.exports = function(isValidElement) { + // It is still allowed in 15.5. + var throwOnDirectAccess = false; + return factory(isValidElement, throwOnDirectAccess); +}; + +},{"./factoryWithTypeCheckers":28}],28:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +'use strict'; + +var emptyFunction = require('fbjs/lib/emptyFunction'); +var invariant = require('fbjs/lib/invariant'); +var warning = require('fbjs/lib/warning'); + +var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret'); +var checkPropTypes = require('./checkPropTypes'); + +module.exports = function(isValidElement, throwOnDirectAccess) { + /* global Symbol */ + var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator; + var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec. + + /** + * Returns the iterator method function contained on the iterable object. + * + * Be sure to invoke the function with the iterable as context: + * + * var iteratorFn = getIteratorFn(myIterable); + * if (iteratorFn) { + * var iterator = iteratorFn.call(myIterable); + * ... + * } + * + * @param {?object} maybeIterable + * @return {?function} + */ + function getIteratorFn(maybeIterable) { + var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]); + if (typeof iteratorFn === 'function') { + return iteratorFn; + } + } + + /** + * Collection of methods that allow declaration and validation of props that are + * supplied to React components. Example usage: + * + * var Props = require('ReactPropTypes'); + * var MyArticle = React.createClass({ + * propTypes: { + * // An optional string prop named "description". + * description: Props.string, + * + * // A required enum prop named "category". + * category: Props.oneOf(['News','Photos']).isRequired, + * + * // A prop named "dialog" that requires an instance of Dialog. + * dialog: Props.instanceOf(Dialog).isRequired + * }, + * render: function() { ... } + * }); + * + * A more formal specification of how these methods are used: + * + * type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...) + * decl := ReactPropTypes.{type}(.isRequired)? + * + * Each and every declaration produces a function with the same signature. This + * allows the creation of custom validation functions. For example: + * + * var MyLink = React.createClass({ + * propTypes: { + * // An optional string or URI prop named "href". + * href: function(props, propName, componentName) { + * var propValue = props[propName]; + * if (propValue != null && typeof propValue !== 'string' && + * !(propValue instanceof URI)) { + * return new Error( + * 'Expected a string or an URI for ' + propName + ' in ' + + * componentName + * ); + * } + * } + * }, + * render: function() {...} + * }); + * + * @internal + */ + + var ANONYMOUS = '<>'; + + // Important! + // Keep this list in sync with production version in `./factoryWithThrowingShims.js`. + var ReactPropTypes = { + array: createPrimitiveTypeChecker('array'), + bool: createPrimitiveTypeChecker('boolean'), + func: createPrimitiveTypeChecker('function'), + number: createPrimitiveTypeChecker('number'), + object: createPrimitiveTypeChecker('object'), + string: createPrimitiveTypeChecker('string'), + symbol: createPrimitiveTypeChecker('symbol'), + + any: createAnyTypeChecker(), + arrayOf: createArrayOfTypeChecker, + element: createElementTypeChecker(), + instanceOf: createInstanceTypeChecker, + node: createNodeChecker(), + objectOf: createObjectOfTypeChecker, + oneOf: createEnumTypeChecker, + oneOfType: createUnionTypeChecker, + shape: createShapeTypeChecker + }; + + /** + * inlined Object.is polyfill to avoid requiring consumers ship their own + * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is + */ + /*eslint-disable no-self-compare*/ + function is(x, y) { + // SameValue algorithm + if (x === y) { + // Steps 1-5, 7-10 + // Steps 6.b-6.e: +0 != -0 + return x !== 0 || 1 / x === 1 / y; + } else { + // Step 6.a: NaN == NaN + return x !== x && y !== y; + } + } + /*eslint-enable no-self-compare*/ + + /** + * We use an Error-like object for backward compatibility as people may call + * PropTypes directly and inspect their output. However, we don't use real + * Errors anymore. We don't inspect their stack anyway, and creating them + * is prohibitively expensive if they are created too often, such as what + * happens in oneOfType() for any type before the one that matched. + */ + function PropTypeError(message) { + this.message = message; + this.stack = ''; + } + // Make `instanceof Error` still work for returned errors. + PropTypeError.prototype = Error.prototype; + + function createChainableTypeChecker(validate) { + if (process.env.NODE_ENV !== 'production') { + var manualPropTypeCallCache = {}; + var manualPropTypeWarningCount = 0; + } + function checkType(isRequired, props, propName, componentName, location, propFullName, secret) { + componentName = componentName || ANONYMOUS; + propFullName = propFullName || propName; + + if (secret !== ReactPropTypesSecret) { + if (throwOnDirectAccess) { + // New behavior only for users of `prop-types` package + invariant( + false, + 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + + 'Use `PropTypes.checkPropTypes()` to call them. ' + + 'Read more at http://fb.me/use-check-prop-types' + ); + } else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') { + // Old behavior for people using React.PropTypes + var cacheKey = componentName + ':' + propName; + if ( + !manualPropTypeCallCache[cacheKey] && + // Avoid spamming the console because they are often not actionable except for lib authors + manualPropTypeWarningCount < 3 + ) { + warning( + false, + 'You are manually calling a React.PropTypes validation ' + + 'function for the `%s` prop on `%s`. This is deprecated ' + + 'and will throw in the standalone `prop-types` package. ' + + 'You may be seeing this warning due to a third-party PropTypes ' + + 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.', + propFullName, + componentName + ); + manualPropTypeCallCache[cacheKey] = true; + manualPropTypeWarningCount++; + } + } + } + if (props[propName] == null) { + if (isRequired) { + if (props[propName] === null) { + return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.')); + } + return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.')); + } + return null; + } else { + return validate(props, propName, componentName, location, propFullName); + } + } + + var chainedCheckType = checkType.bind(null, false); + chainedCheckType.isRequired = checkType.bind(null, true); + + return chainedCheckType; + } + + function createPrimitiveTypeChecker(expectedType) { + function validate(props, propName, componentName, location, propFullName, secret) { + var propValue = props[propName]; + var propType = getPropType(propValue); + if (propType !== expectedType) { + // `propValue` being instance of, say, date/regexp, pass the 'object' + // check, but we can offer a more precise error message here rather than + // 'of type `object`'. + var preciseType = getPreciseType(propValue); + + return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.')); + } + return null; + } + return createChainableTypeChecker(validate); + } + + function createAnyTypeChecker() { + return createChainableTypeChecker(emptyFunction.thatReturnsNull); + } + + function createArrayOfTypeChecker(typeChecker) { + function validate(props, propName, componentName, location, propFullName) { + if (typeof typeChecker !== 'function') { + return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.'); + } + var propValue = props[propName]; + if (!Array.isArray(propValue)) { + var propType = getPropType(propValue); + return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.')); + } + for (var i = 0; i < propValue.length; i++) { + var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret); + if (error instanceof Error) { + return error; + } + } + return null; + } + return createChainableTypeChecker(validate); + } + + function createElementTypeChecker() { + function validate(props, propName, componentName, location, propFullName) { + var propValue = props[propName]; + if (!isValidElement(propValue)) { + var propType = getPropType(propValue); + return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.')); + } + return null; + } + return createChainableTypeChecker(validate); + } + + function createInstanceTypeChecker(expectedClass) { + function validate(props, propName, componentName, location, propFullName) { + if (!(props[propName] instanceof expectedClass)) { + var expectedClassName = expectedClass.name || ANONYMOUS; + var actualClassName = getClassName(props[propName]); + return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.')); + } + return null; + } + return createChainableTypeChecker(validate); + } + + function createEnumTypeChecker(expectedValues) { + if (!Array.isArray(expectedValues)) { + process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid argument supplied to oneOf, expected an instance of array.') : void 0; + return emptyFunction.thatReturnsNull; + } + + function validate(props, propName, componentName, location, propFullName) { + var propValue = props[propName]; + for (var i = 0; i < expectedValues.length; i++) { + if (is(propValue, expectedValues[i])) { + return null; + } + } + + var valuesString = JSON.stringify(expectedValues); + return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.')); + } + return createChainableTypeChecker(validate); + } + + function createObjectOfTypeChecker(typeChecker) { + function validate(props, propName, componentName, location, propFullName) { + if (typeof typeChecker !== 'function') { + return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.'); + } + var propValue = props[propName]; + var propType = getPropType(propValue); + if (propType !== 'object') { + return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.')); + } + for (var key in propValue) { + if (propValue.hasOwnProperty(key)) { + var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret); + if (error instanceof Error) { + return error; + } + } + } + return null; + } + return createChainableTypeChecker(validate); + } + + function createUnionTypeChecker(arrayOfTypeCheckers) { + if (!Array.isArray(arrayOfTypeCheckers)) { + process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid argument supplied to oneOfType, expected an instance of array.') : void 0; + return emptyFunction.thatReturnsNull; + } + + for (var i = 0; i < arrayOfTypeCheckers.length; i++) { + var checker = arrayOfTypeCheckers[i]; + if (typeof checker !== 'function') { + warning( + false, + 'Invalid argument supplid to oneOfType. Expected an array of check functions, but ' + + 'received %s at index %s.', + getPostfixForTypeWarning(checker), + i + ); + return emptyFunction.thatReturnsNull; + } + } + + function validate(props, propName, componentName, location, propFullName) { + for (var i = 0; i < arrayOfTypeCheckers.length; i++) { + var checker = arrayOfTypeCheckers[i]; + if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret) == null) { + return null; + } + } + + return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.')); + } + return createChainableTypeChecker(validate); + } + + function createNodeChecker() { + function validate(props, propName, componentName, location, propFullName) { + if (!isNode(props[propName])) { + return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.')); + } + return null; + } + return createChainableTypeChecker(validate); + } + + function createShapeTypeChecker(shapeTypes) { + function validate(props, propName, componentName, location, propFullName) { + var propValue = props[propName]; + var propType = getPropType(propValue); + if (propType !== 'object') { + return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.')); + } + for (var key in shapeTypes) { + var checker = shapeTypes[key]; + if (!checker) { + continue; + } + var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret); + if (error) { + return error; + } + } + return null; + } + return createChainableTypeChecker(validate); + } + + function isNode(propValue) { + switch (typeof propValue) { + case 'number': + case 'string': + case 'undefined': + return true; + case 'boolean': + return !propValue; + case 'object': + if (Array.isArray(propValue)) { + return propValue.every(isNode); + } + if (propValue === null || isValidElement(propValue)) { + return true; + } + + var iteratorFn = getIteratorFn(propValue); + if (iteratorFn) { + var iterator = iteratorFn.call(propValue); + var step; + if (iteratorFn !== propValue.entries) { + while (!(step = iterator.next()).done) { + if (!isNode(step.value)) { + return false; + } + } + } else { + // Iterator will provide entry [k,v] tuples rather than values. + while (!(step = iterator.next()).done) { + var entry = step.value; + if (entry) { + if (!isNode(entry[1])) { + return false; + } + } + } + } + } else { + return false; + } + + return true; + default: + return false; + } + } + + function isSymbol(propType, propValue) { + // Native Symbol. + if (propType === 'symbol') { + return true; + } + + // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol' + if (propValue['@@toStringTag'] === 'Symbol') { + return true; + } + + // Fallback for non-spec compliant Symbols which are polyfilled. + if (typeof Symbol === 'function' && propValue instanceof Symbol) { + return true; + } + + return false; + } + + // Equivalent of `typeof` but with special handling for array and regexp. + function getPropType(propValue) { + var propType = typeof propValue; + if (Array.isArray(propValue)) { + return 'array'; + } + if (propValue instanceof RegExp) { + // Old webkits (at least until Android 4.0) return 'function' rather than + // 'object' for typeof a RegExp. We'll normalize this here so that /bla/ + // passes PropTypes.object. + return 'object'; + } + if (isSymbol(propType, propValue)) { + return 'symbol'; + } + return propType; + } + + // This handles more types than `getPropType`. Only used for error messages. + // See `createPrimitiveTypeChecker`. + function getPreciseType(propValue) { + if (typeof propValue === 'undefined' || propValue === null) { + return '' + propValue; + } + var propType = getPropType(propValue); + if (propType === 'object') { + if (propValue instanceof Date) { + return 'date'; + } else if (propValue instanceof RegExp) { + return 'regexp'; + } + } + return propType; + } + + // Returns a string that is postfixed to a warning about an invalid type. + // For example, "undefined" or "of type array" + function getPostfixForTypeWarning(value) { + var type = getPreciseType(value); + switch (type) { + case 'array': + case 'object': + return 'an ' + type; + case 'boolean': + case 'date': + case 'regexp': + return 'a ' + type; + default: + return type; + } + } + + // Returns class name of the object, if any. + function getClassName(propValue) { + if (!propValue.constructor || !propValue.constructor.name) { + return ANONYMOUS; + } + return propValue.constructor.name; + } + + ReactPropTypes.checkPropTypes = checkPropTypes; + ReactPropTypes.PropTypes = ReactPropTypes; + + return ReactPropTypes; +}; + +}).call(this,require('_process')) +},{"./checkPropTypes":26,"./lib/ReactPropTypesSecret":29,"_process":25,"fbjs/lib/emptyFunction":8,"fbjs/lib/invariant":16,"fbjs/lib/warning":23}],29:[function(require,module,exports){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +'use strict'; + +var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; + +module.exports = ReactPropTypesSecret; + +},{}],30:[function(require,module,exports){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var ARIADOMPropertyConfig = { + Properties: { + // Global States and Properties + 'aria-current': 0, // state + 'aria-details': 0, + 'aria-disabled': 0, // state + 'aria-hidden': 0, // state + 'aria-invalid': 0, // state + 'aria-keyshortcuts': 0, + 'aria-label': 0, + 'aria-roledescription': 0, + // Widget Attributes + 'aria-autocomplete': 0, + 'aria-checked': 0, + 'aria-expanded': 0, + 'aria-haspopup': 0, + 'aria-level': 0, + 'aria-modal': 0, + 'aria-multiline': 0, + 'aria-multiselectable': 0, + 'aria-orientation': 0, + 'aria-placeholder': 0, + 'aria-pressed': 0, + 'aria-readonly': 0, + 'aria-required': 0, + 'aria-selected': 0, + 'aria-sort': 0, + 'aria-valuemax': 0, + 'aria-valuemin': 0, + 'aria-valuenow': 0, + 'aria-valuetext': 0, + // Live Region Attributes + 'aria-atomic': 0, + 'aria-busy': 0, + 'aria-live': 0, + 'aria-relevant': 0, + // Drag-and-Drop Attributes + 'aria-dropeffect': 0, + 'aria-grabbed': 0, + // Relationship Attributes + 'aria-activedescendant': 0, + 'aria-colcount': 0, + 'aria-colindex': 0, + 'aria-colspan': 0, + 'aria-controls': 0, + 'aria-describedby': 0, + 'aria-errormessage': 0, + 'aria-flowto': 0, + 'aria-labelledby': 0, + 'aria-owns': 0, + 'aria-posinset': 0, + 'aria-rowcount': 0, + 'aria-rowindex': 0, + 'aria-rowspan': 0, + 'aria-setsize': 0 + }, + DOMAttributeNames: {}, + DOMPropertyNames: {} +}; + +module.exports = ARIADOMPropertyConfig; +},{}],31:[function(require,module,exports){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var ReactDOMComponentTree = require('./ReactDOMComponentTree'); + +var focusNode = require('fbjs/lib/focusNode'); + +var AutoFocusUtils = { + focusDOMComponent: function () { + focusNode(ReactDOMComponentTree.getNodeFromInstance(this)); + } +}; + +module.exports = AutoFocusUtils; +},{"./ReactDOMComponentTree":62,"fbjs/lib/focusNode":10}],32:[function(require,module,exports){ +/** + * Copyright 2013-present Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var EventPropagators = require('./EventPropagators'); +var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment'); +var FallbackCompositionState = require('./FallbackCompositionState'); +var SyntheticCompositionEvent = require('./SyntheticCompositionEvent'); +var SyntheticInputEvent = require('./SyntheticInputEvent'); + +var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space +var START_KEYCODE = 229; + +var canUseCompositionEvent = ExecutionEnvironment.canUseDOM && 'CompositionEvent' in window; + +var documentMode = null; +if (ExecutionEnvironment.canUseDOM && 'documentMode' in document) { + documentMode = document.documentMode; +} + +// Webkit offers a very useful `textInput` event that can be used to +// directly represent `beforeInput`. The IE `textinput` event is not as +// useful, so we don't use it. +var canUseTextInputEvent = ExecutionEnvironment.canUseDOM && 'TextEvent' in window && !documentMode && !isPresto(); + +// In IE9+, we have access to composition events, but the data supplied +// by the native compositionend event may be incorrect. Japanese ideographic +// spaces, for instance (\u3000) are not recorded correctly. +var useFallbackCompositionData = ExecutionEnvironment.canUseDOM && (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11); + +/** + * Opera <= 12 includes TextEvent in window, but does not fire + * text input events. Rely on keypress instead. + */ +function isPresto() { + var opera = window.opera; + return typeof opera === 'object' && typeof opera.version === 'function' && parseInt(opera.version(), 10) <= 12; +} + +var SPACEBAR_CODE = 32; +var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE); + +// Events and their corresponding property names. +var eventTypes = { + beforeInput: { + phasedRegistrationNames: { + bubbled: 'onBeforeInput', + captured: 'onBeforeInputCapture' + }, + dependencies: ['topCompositionEnd', 'topKeyPress', 'topTextInput', 'topPaste'] + }, + compositionEnd: { + phasedRegistrationNames: { + bubbled: 'onCompositionEnd', + captured: 'onCompositionEndCapture' + }, + dependencies: ['topBlur', 'topCompositionEnd', 'topKeyDown', 'topKeyPress', 'topKeyUp', 'topMouseDown'] + }, + compositionStart: { + phasedRegistrationNames: { + bubbled: 'onCompositionStart', + captured: 'onCompositionStartCapture' + }, + dependencies: ['topBlur', 'topCompositionStart', 'topKeyDown', 'topKeyPress', 'topKeyUp', 'topMouseDown'] + }, + compositionUpdate: { + phasedRegistrationNames: { + bubbled: 'onCompositionUpdate', + captured: 'onCompositionUpdateCapture' + }, + dependencies: ['topBlur', 'topCompositionUpdate', 'topKeyDown', 'topKeyPress', 'topKeyUp', 'topMouseDown'] + } +}; + +// Track whether we've ever handled a keypress on the space key. +var hasSpaceKeypress = false; + +/** + * Return whether a native keypress event is assumed to be a command. + * This is required because Firefox fires `keypress` events for key commands + * (cut, copy, select-all, etc.) even though no character is inserted. + */ +function isKeypressCommand(nativeEvent) { + return (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) && + // ctrlKey && altKey is equivalent to AltGr, and is not a command. + !(nativeEvent.ctrlKey && nativeEvent.altKey); +} + +/** + * Translate native top level events into event types. + * + * @param {string} topLevelType + * @return {object} + */ +function getCompositionEventType(topLevelType) { + switch (topLevelType) { + case 'topCompositionStart': + return eventTypes.compositionStart; + case 'topCompositionEnd': + return eventTypes.compositionEnd; + case 'topCompositionUpdate': + return eventTypes.compositionUpdate; + } +} + +/** + * Does our fallback best-guess model think this event signifies that + * composition has begun? + * + * @param {string} topLevelType + * @param {object} nativeEvent + * @return {boolean} + */ +function isFallbackCompositionStart(topLevelType, nativeEvent) { + return topLevelType === 'topKeyDown' && nativeEvent.keyCode === START_KEYCODE; +} + +/** + * Does our fallback mode think that this event is the end of composition? + * + * @param {string} topLevelType + * @param {object} nativeEvent + * @return {boolean} + */ +function isFallbackCompositionEnd(topLevelType, nativeEvent) { + switch (topLevelType) { + case 'topKeyUp': + // Command keys insert or clear IME input. + return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1; + case 'topKeyDown': + // Expect IME keyCode on each keydown. If we get any other + // code we must have exited earlier. + return nativeEvent.keyCode !== START_KEYCODE; + case 'topKeyPress': + case 'topMouseDown': + case 'topBlur': + // Events are not possible without cancelling IME. + return true; + default: + return false; + } +} + +/** + * Google Input Tools provides composition data via a CustomEvent, + * with the `data` property populated in the `detail` object. If this + * is available on the event object, use it. If not, this is a plain + * composition event and we have nothing special to extract. + * + * @param {object} nativeEvent + * @return {?string} + */ +function getDataFromCustomEvent(nativeEvent) { + var detail = nativeEvent.detail; + if (typeof detail === 'object' && 'data' in detail) { + return detail.data; + } + return null; +} + +// Track the current IME composition fallback object, if any. +var currentComposition = null; + +/** + * @return {?object} A SyntheticCompositionEvent. + */ +function extractCompositionEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) { + var eventType; + var fallbackData; + + if (canUseCompositionEvent) { + eventType = getCompositionEventType(topLevelType); + } else if (!currentComposition) { + if (isFallbackCompositionStart(topLevelType, nativeEvent)) { + eventType = eventTypes.compositionStart; + } + } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) { + eventType = eventTypes.compositionEnd; + } + + if (!eventType) { + return null; + } + + if (useFallbackCompositionData) { + // The current composition is stored statically and must not be + // overwritten while composition continues. + if (!currentComposition && eventType === eventTypes.compositionStart) { + currentComposition = FallbackCompositionState.getPooled(nativeEventTarget); + } else if (eventType === eventTypes.compositionEnd) { + if (currentComposition) { + fallbackData = currentComposition.getData(); + } + } + } + + var event = SyntheticCompositionEvent.getPooled(eventType, targetInst, nativeEvent, nativeEventTarget); + + if (fallbackData) { + // Inject data generated from fallback path into the synthetic event. + // This matches the property of native CompositionEventInterface. + event.data = fallbackData; + } else { + var customData = getDataFromCustomEvent(nativeEvent); + if (customData !== null) { + event.data = customData; + } + } + + EventPropagators.accumulateTwoPhaseDispatches(event); + return event; +} + +/** + * @param {string} topLevelType Record from `EventConstants`. + * @param {object} nativeEvent Native browser event. + * @return {?string} The string corresponding to this `beforeInput` event. + */ +function getNativeBeforeInputChars(topLevelType, nativeEvent) { + switch (topLevelType) { + case 'topCompositionEnd': + return getDataFromCustomEvent(nativeEvent); + case 'topKeyPress': + /** + * If native `textInput` events are available, our goal is to make + * use of them. However, there is a special case: the spacebar key. + * In Webkit, preventing default on a spacebar `textInput` event + * cancels character insertion, but it *also* causes the browser + * to fall back to its default spacebar behavior of scrolling the + * page. + * + * Tracking at: + * https://code.google.com/p/chromium/issues/detail?id=355103 + * + * To avoid this issue, use the keypress event as if no `textInput` + * event is available. + */ + var which = nativeEvent.which; + if (which !== SPACEBAR_CODE) { + return null; + } + + hasSpaceKeypress = true; + return SPACEBAR_CHAR; + + case 'topTextInput': + // Record the characters to be added to the DOM. + var chars = nativeEvent.data; + + // If it's a spacebar character, assume that we have already handled + // it at the keypress level and bail immediately. Android Chrome + // doesn't give us keycodes, so we need to blacklist it. + if (chars === SPACEBAR_CHAR && hasSpaceKeypress) { + return null; + } + + return chars; + + default: + // For other native event types, do nothing. + return null; + } +} + +/** + * For browsers that do not provide the `textInput` event, extract the + * appropriate string to use for SyntheticInputEvent. + * + * @param {string} topLevelType Record from `EventConstants`. + * @param {object} nativeEvent Native browser event. + * @return {?string} The fallback string for this `beforeInput` event. + */ +function getFallbackBeforeInputChars(topLevelType, nativeEvent) { + // If we are currently composing (IME) and using a fallback to do so, + // try to extract the composed characters from the fallback object. + // If composition event is available, we extract a string only at + // compositionevent, otherwise extract it at fallback events. + if (currentComposition) { + if (topLevelType === 'topCompositionEnd' || !canUseCompositionEvent && isFallbackCompositionEnd(topLevelType, nativeEvent)) { + var chars = currentComposition.getData(); + FallbackCompositionState.release(currentComposition); + currentComposition = null; + return chars; + } + return null; + } + + switch (topLevelType) { + case 'topPaste': + // If a paste event occurs after a keypress, throw out the input + // chars. Paste events should not lead to BeforeInput events. + return null; + case 'topKeyPress': + /** + * As of v27, Firefox may fire keypress events even when no character + * will be inserted. A few possibilities: + * + * - `which` is `0`. Arrow keys, Esc key, etc. + * + * - `which` is the pressed key code, but no char is available. + * Ex: 'AltGr + d` in Polish. There is no modified character for + * this key combination and no character is inserted into the + * document, but FF fires the keypress for char code `100` anyway. + * No `input` event will occur. + * + * - `which` is the pressed key code, but a command combination is + * being used. Ex: `Cmd+C`. No character is inserted, and no + * `input` event will occur. + */ + if (nativeEvent.which && !isKeypressCommand(nativeEvent)) { + return String.fromCharCode(nativeEvent.which); + } + return null; + case 'topCompositionEnd': + return useFallbackCompositionData ? null : nativeEvent.data; + default: + return null; + } +} + +/** + * Extract a SyntheticInputEvent for `beforeInput`, based on either native + * `textInput` or fallback behavior. + * + * @return {?object} A SyntheticInputEvent. + */ +function extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) { + var chars; + + if (canUseTextInputEvent) { + chars = getNativeBeforeInputChars(topLevelType, nativeEvent); + } else { + chars = getFallbackBeforeInputChars(topLevelType, nativeEvent); + } + + // If no characters are being inserted, no BeforeInput event should + // be fired. + if (!chars) { + return null; + } + + var event = SyntheticInputEvent.getPooled(eventTypes.beforeInput, targetInst, nativeEvent, nativeEventTarget); + + event.data = chars; + EventPropagators.accumulateTwoPhaseDispatches(event); + return event; +} + +/** + * Create an `onBeforeInput` event to match + * http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents. + * + * This event plugin is based on the native `textInput` event + * available in Chrome, Safari, Opera, and IE. This event fires after + * `onKeyPress` and `onCompositionEnd`, but before `onInput`. + * + * `beforeInput` is spec'd but not implemented in any browsers, and + * the `input` event does not provide any useful information about what has + * actually been added, contrary to the spec. Thus, `textInput` is the best + * available event to identify the characters that have actually been inserted + * into the target node. + * + * This plugin is also responsible for emitting `composition` events, thus + * allowing us to share composition fallback code for both `beforeInput` and + * `composition` event types. + */ +var BeforeInputEventPlugin = { + + eventTypes: eventTypes, + + extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) { + return [extractCompositionEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget), extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget)]; + } +}; + +module.exports = BeforeInputEventPlugin; +},{"./EventPropagators":48,"./FallbackCompositionState":49,"./SyntheticCompositionEvent":113,"./SyntheticInputEvent":117,"fbjs/lib/ExecutionEnvironment":2}],33:[function(require,module,exports){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +/** + * CSS properties which accept numbers but are not in units of "px". + */ + +var isUnitlessNumber = { + animationIterationCount: true, + borderImageOutset: true, + borderImageSlice: true, + borderImageWidth: true, + boxFlex: true, + boxFlexGroup: true, + boxOrdinalGroup: true, + columnCount: true, + flex: true, + flexGrow: true, + flexPositive: true, + flexShrink: true, + flexNegative: true, + flexOrder: true, + gridRow: true, + gridColumn: true, + fontWeight: true, + lineClamp: true, + lineHeight: true, + opacity: true, + order: true, + orphans: true, + tabSize: true, + widows: true, + zIndex: true, + zoom: true, + + // SVG-related properties + fillOpacity: true, + floodOpacity: true, + stopOpacity: true, + strokeDasharray: true, + strokeDashoffset: true, + strokeMiterlimit: true, + strokeOpacity: true, + strokeWidth: true +}; + +/** + * @param {string} prefix vendor-specific prefix, eg: Webkit + * @param {string} key style name, eg: transitionDuration + * @return {string} style name prefixed with `prefix`, properly camelCased, eg: + * WebkitTransitionDuration + */ +function prefixKey(prefix, key) { + return prefix + key.charAt(0).toUpperCase() + key.substring(1); +} + +/** + * Support style names that may come passed in prefixed by adding permutations + * of vendor prefixes. + */ +var prefixes = ['Webkit', 'ms', 'Moz', 'O']; + +// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an +// infinite loop, because it iterates over the newly added props too. +Object.keys(isUnitlessNumber).forEach(function (prop) { + prefixes.forEach(function (prefix) { + isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop]; + }); +}); + +/** + * Most style properties can be unset by doing .style[prop] = '' but IE8 + * doesn't like doing that with shorthand properties so for the properties that + * IE8 breaks on, which are listed here, we instead unset each of the + * individual properties. See http://bugs.jquery.com/ticket/12385. + * The 4-value 'clock' properties like margin, padding, border-width seem to + * behave without any problems. Curiously, list-style works too without any + * special prodding. + */ +var shorthandPropertyExpansions = { + background: { + backgroundAttachment: true, + backgroundColor: true, + backgroundImage: true, + backgroundPositionX: true, + backgroundPositionY: true, + backgroundRepeat: true + }, + backgroundPosition: { + backgroundPositionX: true, + backgroundPositionY: true + }, + border: { + borderWidth: true, + borderStyle: true, + borderColor: true + }, + borderBottom: { + borderBottomWidth: true, + borderBottomStyle: true, + borderBottomColor: true + }, + borderLeft: { + borderLeftWidth: true, + borderLeftStyle: true, + borderLeftColor: true + }, + borderRight: { + borderRightWidth: true, + borderRightStyle: true, + borderRightColor: true + }, + borderTop: { + borderTopWidth: true, + borderTopStyle: true, + borderTopColor: true + }, + font: { + fontStyle: true, + fontVariant: true, + fontWeight: true, + fontSize: true, + lineHeight: true, + fontFamily: true + }, + outline: { + outlineWidth: true, + outlineStyle: true, + outlineColor: true + } +}; + +var CSSProperty = { + isUnitlessNumber: isUnitlessNumber, + shorthandPropertyExpansions: shorthandPropertyExpansions +}; + +module.exports = CSSProperty; +},{}],34:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var CSSProperty = require('./CSSProperty'); +var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment'); +var ReactInstrumentation = require('./ReactInstrumentation'); + +var camelizeStyleName = require('fbjs/lib/camelizeStyleName'); +var dangerousStyleValue = require('./dangerousStyleValue'); +var hyphenateStyleName = require('fbjs/lib/hyphenateStyleName'); +var memoizeStringOnly = require('fbjs/lib/memoizeStringOnly'); +var warning = require('fbjs/lib/warning'); + +var processStyleName = memoizeStringOnly(function (styleName) { + return hyphenateStyleName(styleName); +}); + +var hasShorthandPropertyBug = false; +var styleFloatAccessor = 'cssFloat'; +if (ExecutionEnvironment.canUseDOM) { + var tempStyle = document.createElement('div').style; + try { + // IE8 throws "Invalid argument." if resetting shorthand style properties. + tempStyle.font = ''; + } catch (e) { + hasShorthandPropertyBug = true; + } + // IE8 only supports accessing cssFloat (standard) as styleFloat + if (document.documentElement.style.cssFloat === undefined) { + styleFloatAccessor = 'styleFloat'; + } +} + +if (process.env.NODE_ENV !== 'production') { + // 'msTransform' is correct, but the other prefixes should be capitalized + var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/; + + // style values shouldn't contain a semicolon + var badStyleValueWithSemicolonPattern = /;\s*$/; + + var warnedStyleNames = {}; + var warnedStyleValues = {}; + var warnedForNaNValue = false; + + var warnHyphenatedStyleName = function (name, owner) { + if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) { + return; + } + + warnedStyleNames[name] = true; + process.env.NODE_ENV !== 'production' ? warning(false, 'Unsupported style property %s. Did you mean %s?%s', name, camelizeStyleName(name), checkRenderMessage(owner)) : void 0; + }; + + var warnBadVendoredStyleName = function (name, owner) { + if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) { + return; + } + + warnedStyleNames[name] = true; + process.env.NODE_ENV !== 'production' ? warning(false, 'Unsupported vendor-prefixed style property %s. Did you mean %s?%s', name, name.charAt(0).toUpperCase() + name.slice(1), checkRenderMessage(owner)) : void 0; + }; + + var warnStyleValueWithSemicolon = function (name, value, owner) { + if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) { + return; + } + + warnedStyleValues[value] = true; + process.env.NODE_ENV !== 'production' ? warning(false, 'Style property values shouldn\'t contain a semicolon.%s ' + 'Try "%s: %s" instead.', checkRenderMessage(owner), name, value.replace(badStyleValueWithSemicolonPattern, '')) : void 0; + }; + + var warnStyleValueIsNaN = function (name, value, owner) { + if (warnedForNaNValue) { + return; + } + + warnedForNaNValue = true; + process.env.NODE_ENV !== 'production' ? warning(false, '`NaN` is an invalid value for the `%s` css style property.%s', name, checkRenderMessage(owner)) : void 0; + }; + + var checkRenderMessage = function (owner) { + if (owner) { + var name = owner.getName(); + if (name) { + return ' Check the render method of `' + name + '`.'; + } + } + return ''; + }; + + /** + * @param {string} name + * @param {*} value + * @param {ReactDOMComponent} component + */ + var warnValidStyle = function (name, value, component) { + var owner; + if (component) { + owner = component._currentElement._owner; + } + if (name.indexOf('-') > -1) { + warnHyphenatedStyleName(name, owner); + } else if (badVendoredStyleNamePattern.test(name)) { + warnBadVendoredStyleName(name, owner); + } else if (badStyleValueWithSemicolonPattern.test(value)) { + warnStyleValueWithSemicolon(name, value, owner); + } + + if (typeof value === 'number' && isNaN(value)) { + warnStyleValueIsNaN(name, value, owner); + } + }; +} + +/** + * Operations for dealing with CSS properties. + */ +var CSSPropertyOperations = { + + /** + * Serializes a mapping of style properties for use as inline styles: + * + * > createMarkupForStyles({width: '200px', height: 0}) + * "width:200px;height:0;" + * + * Undefined values are ignored so that declarative programming is easier. + * The result should be HTML-escaped before insertion into the DOM. + * + * @param {object} styles + * @param {ReactDOMComponent} component + * @return {?string} + */ + createMarkupForStyles: function (styles, component) { + var serialized = ''; + for (var styleName in styles) { + if (!styles.hasOwnProperty(styleName)) { + continue; + } + var styleValue = styles[styleName]; + if (process.env.NODE_ENV !== 'production') { + warnValidStyle(styleName, styleValue, component); + } + if (styleValue != null) { + serialized += processStyleName(styleName) + ':'; + serialized += dangerousStyleValue(styleName, styleValue, component) + ';'; + } + } + return serialized || null; + }, + + /** + * Sets the value for multiple styles on a node. If a value is specified as + * '' (empty string), the corresponding style property will be unset. + * + * @param {DOMElement} node + * @param {object} styles + * @param {ReactDOMComponent} component + */ + setValueForStyles: function (node, styles, component) { + if (process.env.NODE_ENV !== 'production') { + ReactInstrumentation.debugTool.onHostOperation({ + instanceID: component._debugID, + type: 'update styles', + payload: styles + }); + } + + var style = node.style; + for (var styleName in styles) { + if (!styles.hasOwnProperty(styleName)) { + continue; + } + if (process.env.NODE_ENV !== 'production') { + warnValidStyle(styleName, styles[styleName], component); + } + var styleValue = dangerousStyleValue(styleName, styles[styleName], component); + if (styleName === 'float' || styleName === 'cssFloat') { + styleName = styleFloatAccessor; + } + if (styleValue) { + style[styleName] = styleValue; + } else { + var expansion = hasShorthandPropertyBug && CSSProperty.shorthandPropertyExpansions[styleName]; + if (expansion) { + // Shorthand property that IE8 won't like unsetting, so unset each + // component to placate it + for (var individualStyleName in expansion) { + style[individualStyleName] = ''; + } + } else { + style[styleName] = ''; + } + } + } + } + +}; + +module.exports = CSSPropertyOperations; +}).call(this,require('_process')) +},{"./CSSProperty":33,"./ReactInstrumentation":91,"./dangerousStyleValue":130,"_process":25,"fbjs/lib/ExecutionEnvironment":2,"fbjs/lib/camelizeStyleName":4,"fbjs/lib/hyphenateStyleName":15,"fbjs/lib/memoizeStringOnly":19,"fbjs/lib/warning":23}],35:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * + */ + +'use strict'; + +var _prodInvariant = require('./reactProdInvariant'); + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +var PooledClass = require('./PooledClass'); + +var invariant = require('fbjs/lib/invariant'); + +/** + * A specialized pseudo-event module to help keep track of components waiting to + * be notified when their DOM representations are available for use. + * + * This implements `PooledClass`, so you should never need to instantiate this. + * Instead, use `CallbackQueue.getPooled()`. + * + * @class ReactMountReady + * @implements PooledClass + * @internal + */ + +var CallbackQueue = function () { + function CallbackQueue(arg) { + _classCallCheck(this, CallbackQueue); + + this._callbacks = null; + this._contexts = null; + this._arg = arg; + } + + /** + * Enqueues a callback to be invoked when `notifyAll` is invoked. + * + * @param {function} callback Invoked when `notifyAll` is invoked. + * @param {?object} context Context to call `callback` with. + * @internal + */ + + + CallbackQueue.prototype.enqueue = function enqueue(callback, context) { + this._callbacks = this._callbacks || []; + this._callbacks.push(callback); + this._contexts = this._contexts || []; + this._contexts.push(context); + }; + + /** + * Invokes all enqueued callbacks and clears the queue. This is invoked after + * the DOM representation of a component has been created or updated. + * + * @internal + */ + + + CallbackQueue.prototype.notifyAll = function notifyAll() { + var callbacks = this._callbacks; + var contexts = this._contexts; + var arg = this._arg; + if (callbacks && contexts) { + !(callbacks.length === contexts.length) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Mismatched list of contexts in callback queue') : _prodInvariant('24') : void 0; + this._callbacks = null; + this._contexts = null; + for (var i = 0; i < callbacks.length; i++) { + callbacks[i].call(contexts[i], arg); + } + callbacks.length = 0; + contexts.length = 0; + } + }; + + CallbackQueue.prototype.checkpoint = function checkpoint() { + return this._callbacks ? this._callbacks.length : 0; + }; + + CallbackQueue.prototype.rollback = function rollback(len) { + if (this._callbacks && this._contexts) { + this._callbacks.length = len; + this._contexts.length = len; + } + }; + + /** + * Resets the internal queue. + * + * @internal + */ + + + CallbackQueue.prototype.reset = function reset() { + this._callbacks = null; + this._contexts = null; + }; + + /** + * `PooledClass` looks for this. + */ + + + CallbackQueue.prototype.destructor = function destructor() { + this.reset(); + }; + + return CallbackQueue; +}(); + +module.exports = PooledClass.addPoolingTo(CallbackQueue); +}).call(this,require('_process')) +},{"./PooledClass":53,"./reactProdInvariant":148,"_process":25,"fbjs/lib/invariant":16}],36:[function(require,module,exports){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var EventPluginHub = require('./EventPluginHub'); +var EventPropagators = require('./EventPropagators'); +var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment'); +var ReactDOMComponentTree = require('./ReactDOMComponentTree'); +var ReactUpdates = require('./ReactUpdates'); +var SyntheticEvent = require('./SyntheticEvent'); + +var getEventTarget = require('./getEventTarget'); +var isEventSupported = require('./isEventSupported'); +var isTextInputElement = require('./isTextInputElement'); + +var eventTypes = { + change: { + phasedRegistrationNames: { + bubbled: 'onChange', + captured: 'onChangeCapture' + }, + dependencies: ['topBlur', 'topChange', 'topClick', 'topFocus', 'topInput', 'topKeyDown', 'topKeyUp', 'topSelectionChange'] + } +}; + +/** + * For IE shims + */ +var activeElement = null; +var activeElementInst = null; +var activeElementValue = null; +var activeElementValueProp = null; + +/** + * SECTION: handle `change` event + */ +function shouldUseChangeEvent(elem) { + var nodeName = elem.nodeName && elem.nodeName.toLowerCase(); + return nodeName === 'select' || nodeName === 'input' && elem.type === 'file'; +} + +var doesChangeEventBubble = false; +if (ExecutionEnvironment.canUseDOM) { + // See `handleChange` comment below + doesChangeEventBubble = isEventSupported('change') && (!document.documentMode || document.documentMode > 8); +} + +function manualDispatchChangeEvent(nativeEvent) { + var event = SyntheticEvent.getPooled(eventTypes.change, activeElementInst, nativeEvent, getEventTarget(nativeEvent)); + EventPropagators.accumulateTwoPhaseDispatches(event); + + // If change and propertychange bubbled, we'd just bind to it like all the + // other events and have it go through ReactBrowserEventEmitter. Since it + // doesn't, we manually listen for the events and so we have to enqueue and + // process the abstract event manually. + // + // Batching is necessary here in order to ensure that all event handlers run + // before the next rerender (including event handlers attached to ancestor + // elements instead of directly on the input). Without this, controlled + // components don't work properly in conjunction with event bubbling because + // the component is rerendered and the value reverted before all the event + // handlers can run. See https://github.com/facebook/react/issues/708. + ReactUpdates.batchedUpdates(runEventInBatch, event); +} + +function runEventInBatch(event) { + EventPluginHub.enqueueEvents(event); + EventPluginHub.processEventQueue(false); +} + +function startWatchingForChangeEventIE8(target, targetInst) { + activeElement = target; + activeElementInst = targetInst; + activeElement.attachEvent('onchange', manualDispatchChangeEvent); +} + +function stopWatchingForChangeEventIE8() { + if (!activeElement) { + return; + } + activeElement.detachEvent('onchange', manualDispatchChangeEvent); + activeElement = null; + activeElementInst = null; +} + +function getTargetInstForChangeEvent(topLevelType, targetInst) { + if (topLevelType === 'topChange') { + return targetInst; + } +} +function handleEventsForChangeEventIE8(topLevelType, target, targetInst) { + if (topLevelType === 'topFocus') { + // stopWatching() should be a noop here but we call it just in case we + // missed a blur event somehow. + stopWatchingForChangeEventIE8(); + startWatchingForChangeEventIE8(target, targetInst); + } else if (topLevelType === 'topBlur') { + stopWatchingForChangeEventIE8(); + } +} + +/** + * SECTION: handle `input` event + */ +var isInputEventSupported = false; +if (ExecutionEnvironment.canUseDOM) { + // IE9 claims to support the input event but fails to trigger it when + // deleting text, so we ignore its input events. + // IE10+ fire input events to often, such when a placeholder + // changes or when an input with a placeholder is focused. + isInputEventSupported = isEventSupported('input') && (!document.documentMode || document.documentMode > 11); +} + +/** + * (For IE <=11) Replacement getter/setter for the `value` property that gets + * set on the active element. + */ +var newValueProp = { + get: function () { + return activeElementValueProp.get.call(this); + }, + set: function (val) { + // Cast to a string so we can do equality checks. + activeElementValue = '' + val; + activeElementValueProp.set.call(this, val); + } +}; + +/** + * (For IE <=11) Starts tracking propertychange events on the passed-in element + * and override the value property so that we can distinguish user events from + * value changes in JS. + */ +function startWatchingForValueChange(target, targetInst) { + activeElement = target; + activeElementInst = targetInst; + activeElementValue = target.value; + activeElementValueProp = Object.getOwnPropertyDescriptor(target.constructor.prototype, 'value'); + + // Not guarded in a canDefineProperty check: IE8 supports defineProperty only + // on DOM elements + Object.defineProperty(activeElement, 'value', newValueProp); + if (activeElement.attachEvent) { + activeElement.attachEvent('onpropertychange', handlePropertyChange); + } else { + activeElement.addEventListener('propertychange', handlePropertyChange, false); + } +} + +/** + * (For IE <=11) Removes the event listeners from the currently-tracked element, + * if any exists. + */ +function stopWatchingForValueChange() { + if (!activeElement) { + return; + } + + // delete restores the original property definition + delete activeElement.value; + + if (activeElement.detachEvent) { + activeElement.detachEvent('onpropertychange', handlePropertyChange); + } else { + activeElement.removeEventListener('propertychange', handlePropertyChange, false); + } + + activeElement = null; + activeElementInst = null; + activeElementValue = null; + activeElementValueProp = null; +} + +/** + * (For IE <=11) Handles a propertychange event, sending a `change` event if + * the value of the active element has changed. + */ +function handlePropertyChange(nativeEvent) { + if (nativeEvent.propertyName !== 'value') { + return; + } + var value = nativeEvent.srcElement.value; + if (value === activeElementValue) { + return; + } + activeElementValue = value; + + manualDispatchChangeEvent(nativeEvent); +} + +/** + * If a `change` event should be fired, returns the target's ID. + */ +function getTargetInstForInputEvent(topLevelType, targetInst) { + if (topLevelType === 'topInput') { + // In modern browsers (i.e., not IE8 or IE9), the input event is exactly + // what we want so fall through here and trigger an abstract event + return targetInst; + } +} + +function handleEventsForInputEventIE(topLevelType, target, targetInst) { + if (topLevelType === 'topFocus') { + // In IE8, we can capture almost all .value changes by adding a + // propertychange handler and looking for events with propertyName + // equal to 'value' + // In IE9-11, propertychange fires for most input events but is buggy and + // doesn't fire when text is deleted, but conveniently, selectionchange + // appears to fire in all of the remaining cases so we catch those and + // forward the event if the value has changed + // In either case, we don't want to call the event handler if the value + // is changed from JS so we redefine a setter for `.value` that updates + // our activeElementValue variable, allowing us to ignore those changes + // + // stopWatching() should be a noop here but we call it just in case we + // missed a blur event somehow. + stopWatchingForValueChange(); + startWatchingForValueChange(target, targetInst); + } else if (topLevelType === 'topBlur') { + stopWatchingForValueChange(); + } +} + +// For IE8 and IE9. +function getTargetInstForInputEventIE(topLevelType, targetInst) { + if (topLevelType === 'topSelectionChange' || topLevelType === 'topKeyUp' || topLevelType === 'topKeyDown') { + // On the selectionchange event, the target is just document which isn't + // helpful for us so just check activeElement instead. + // + // 99% of the time, keydown and keyup aren't necessary. IE8 fails to fire + // propertychange on the first input event after setting `value` from a + // script and fires only keydown, keypress, keyup. Catching keyup usually + // gets it and catching keydown lets us fire an event for the first + // keystroke if user does a key repeat (it'll be a little delayed: right + // before the second keystroke). Other input methods (e.g., paste) seem to + // fire selectionchange normally. + if (activeElement && activeElement.value !== activeElementValue) { + activeElementValue = activeElement.value; + return activeElementInst; + } + } +} + +/** + * SECTION: handle `click` event + */ +function shouldUseClickEvent(elem) { + // Use the `click` event to detect changes to checkbox and radio inputs. + // This approach works across all browsers, whereas `change` does not fire + // until `blur` in IE8. + return elem.nodeName && elem.nodeName.toLowerCase() === 'input' && (elem.type === 'checkbox' || elem.type === 'radio'); +} + +function getTargetInstForClickEvent(topLevelType, targetInst) { + if (topLevelType === 'topClick') { + return targetInst; + } +} + +function handleControlledInputBlur(inst, node) { + // TODO: In IE, inst is occasionally null. Why? + if (inst == null) { + return; + } + + // Fiber and ReactDOM keep wrapper state in separate places + var state = inst._wrapperState || node._wrapperState; + + if (!state || !state.controlled || node.type !== 'number') { + return; + } + + // If controlled, assign the value attribute to the current value on blur + var value = '' + node.value; + if (node.getAttribute('value') !== value) { + node.setAttribute('value', value); + } +} + +/** + * This plugin creates an `onChange` event that normalizes change events + * across form elements. This event fires at a time when it's possible to + * change the element's value without seeing a flicker. + * + * Supported elements are: + * - input (see `isTextInputElement`) + * - textarea + * - select + */ +var ChangeEventPlugin = { + + eventTypes: eventTypes, + + extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) { + var targetNode = targetInst ? ReactDOMComponentTree.getNodeFromInstance(targetInst) : window; + + var getTargetInstFunc, handleEventFunc; + if (shouldUseChangeEvent(targetNode)) { + if (doesChangeEventBubble) { + getTargetInstFunc = getTargetInstForChangeEvent; + } else { + handleEventFunc = handleEventsForChangeEventIE8; + } + } else if (isTextInputElement(targetNode)) { + if (isInputEventSupported) { + getTargetInstFunc = getTargetInstForInputEvent; + } else { + getTargetInstFunc = getTargetInstForInputEventIE; + handleEventFunc = handleEventsForInputEventIE; + } + } else if (shouldUseClickEvent(targetNode)) { + getTargetInstFunc = getTargetInstForClickEvent; + } + + if (getTargetInstFunc) { + var inst = getTargetInstFunc(topLevelType, targetInst); + if (inst) { + var event = SyntheticEvent.getPooled(eventTypes.change, inst, nativeEvent, nativeEventTarget); + event.type = 'change'; + EventPropagators.accumulateTwoPhaseDispatches(event); + return event; + } + } + + if (handleEventFunc) { + handleEventFunc(topLevelType, targetNode, targetInst); + } + + // When blurring, set the value attribute for number inputs + if (topLevelType === 'topBlur') { + handleControlledInputBlur(targetInst, targetNode); + } + } + +}; + +module.exports = ChangeEventPlugin; +},{"./EventPluginHub":45,"./EventPropagators":48,"./ReactDOMComponentTree":62,"./ReactUpdates":106,"./SyntheticEvent":115,"./getEventTarget":138,"./isEventSupported":145,"./isTextInputElement":146,"fbjs/lib/ExecutionEnvironment":2}],37:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var DOMLazyTree = require('./DOMLazyTree'); +var Danger = require('./Danger'); +var ReactDOMComponentTree = require('./ReactDOMComponentTree'); +var ReactInstrumentation = require('./ReactInstrumentation'); + +var createMicrosoftUnsafeLocalFunction = require('./createMicrosoftUnsafeLocalFunction'); +var setInnerHTML = require('./setInnerHTML'); +var setTextContent = require('./setTextContent'); + +function getNodeAfter(parentNode, node) { + // Special case for text components, which return [open, close] comments + // from getHostNode. + if (Array.isArray(node)) { + node = node[1]; + } + return node ? node.nextSibling : parentNode.firstChild; +} + +/** + * Inserts `childNode` as a child of `parentNode` at the `index`. + * + * @param {DOMElement} parentNode Parent node in which to insert. + * @param {DOMElement} childNode Child node to insert. + * @param {number} index Index at which to insert the child. + * @internal + */ +var insertChildAt = createMicrosoftUnsafeLocalFunction(function (parentNode, childNode, referenceNode) { + // We rely exclusively on `insertBefore(node, null)` instead of also using + // `appendChild(node)`. (Using `undefined` is not allowed by all browsers so + // we are careful to use `null`.) + parentNode.insertBefore(childNode, referenceNode); +}); + +function insertLazyTreeChildAt(parentNode, childTree, referenceNode) { + DOMLazyTree.insertTreeBefore(parentNode, childTree, referenceNode); +} + +function moveChild(parentNode, childNode, referenceNode) { + if (Array.isArray(childNode)) { + moveDelimitedText(parentNode, childNode[0], childNode[1], referenceNode); + } else { + insertChildAt(parentNode, childNode, referenceNode); + } +} + +function removeChild(parentNode, childNode) { + if (Array.isArray(childNode)) { + var closingComment = childNode[1]; + childNode = childNode[0]; + removeDelimitedText(parentNode, childNode, closingComment); + parentNode.removeChild(closingComment); + } + parentNode.removeChild(childNode); +} + +function moveDelimitedText(parentNode, openingComment, closingComment, referenceNode) { + var node = openingComment; + while (true) { + var nextNode = node.nextSibling; + insertChildAt(parentNode, node, referenceNode); + if (node === closingComment) { + break; + } + node = nextNode; + } +} + +function removeDelimitedText(parentNode, startNode, closingComment) { + while (true) { + var node = startNode.nextSibling; + if (node === closingComment) { + // The closing comment is removed by ReactMultiChild. + break; + } else { + parentNode.removeChild(node); + } + } +} + +function replaceDelimitedText(openingComment, closingComment, stringText) { + var parentNode = openingComment.parentNode; + var nodeAfterComment = openingComment.nextSibling; + if (nodeAfterComment === closingComment) { + // There are no text nodes between the opening and closing comments; insert + // a new one if stringText isn't empty. + if (stringText) { + insertChildAt(parentNode, document.createTextNode(stringText), nodeAfterComment); + } + } else { + if (stringText) { + // Set the text content of the first node after the opening comment, and + // remove all following nodes up until the closing comment. + setTextContent(nodeAfterComment, stringText); + removeDelimitedText(parentNode, nodeAfterComment, closingComment); + } else { + removeDelimitedText(parentNode, openingComment, closingComment); + } + } + + if (process.env.NODE_ENV !== 'production') { + ReactInstrumentation.debugTool.onHostOperation({ + instanceID: ReactDOMComponentTree.getInstanceFromNode(openingComment)._debugID, + type: 'replace text', + payload: stringText + }); + } +} + +var dangerouslyReplaceNodeWithMarkup = Danger.dangerouslyReplaceNodeWithMarkup; +if (process.env.NODE_ENV !== 'production') { + dangerouslyReplaceNodeWithMarkup = function (oldChild, markup, prevInstance) { + Danger.dangerouslyReplaceNodeWithMarkup(oldChild, markup); + if (prevInstance._debugID !== 0) { + ReactInstrumentation.debugTool.onHostOperation({ + instanceID: prevInstance._debugID, + type: 'replace with', + payload: markup.toString() + }); + } else { + var nextInstance = ReactDOMComponentTree.getInstanceFromNode(markup.node); + if (nextInstance._debugID !== 0) { + ReactInstrumentation.debugTool.onHostOperation({ + instanceID: nextInstance._debugID, + type: 'mount', + payload: markup.toString() + }); + } + } + }; +} + +/** + * Operations for updating with DOM children. + */ +var DOMChildrenOperations = { + + dangerouslyReplaceNodeWithMarkup: dangerouslyReplaceNodeWithMarkup, + + replaceDelimitedText: replaceDelimitedText, + + /** + * Updates a component's children by processing a series of updates. The + * update configurations are each expected to have a `parentNode` property. + * + * @param {array} updates List of update configurations. + * @internal + */ + processUpdates: function (parentNode, updates) { + if (process.env.NODE_ENV !== 'production') { + var parentNodeDebugID = ReactDOMComponentTree.getInstanceFromNode(parentNode)._debugID; + } + + for (var k = 0; k < updates.length; k++) { + var update = updates[k]; + switch (update.type) { + case 'INSERT_MARKUP': + insertLazyTreeChildAt(parentNode, update.content, getNodeAfter(parentNode, update.afterNode)); + if (process.env.NODE_ENV !== 'production') { + ReactInstrumentation.debugTool.onHostOperation({ + instanceID: parentNodeDebugID, + type: 'insert child', + payload: { toIndex: update.toIndex, content: update.content.toString() } + }); + } + break; + case 'MOVE_EXISTING': + moveChild(parentNode, update.fromNode, getNodeAfter(parentNode, update.afterNode)); + if (process.env.NODE_ENV !== 'production') { + ReactInstrumentation.debugTool.onHostOperation({ + instanceID: parentNodeDebugID, + type: 'move child', + payload: { fromIndex: update.fromIndex, toIndex: update.toIndex } + }); + } + break; + case 'SET_MARKUP': + setInnerHTML(parentNode, update.content); + if (process.env.NODE_ENV !== 'production') { + ReactInstrumentation.debugTool.onHostOperation({ + instanceID: parentNodeDebugID, + type: 'replace children', + payload: update.content.toString() + }); + } + break; + case 'TEXT_CONTENT': + setTextContent(parentNode, update.content); + if (process.env.NODE_ENV !== 'production') { + ReactInstrumentation.debugTool.onHostOperation({ + instanceID: parentNodeDebugID, + type: 'replace text', + payload: update.content.toString() + }); + } + break; + case 'REMOVE_NODE': + removeChild(parentNode, update.fromNode); + if (process.env.NODE_ENV !== 'production') { + ReactInstrumentation.debugTool.onHostOperation({ + instanceID: parentNodeDebugID, + type: 'remove child', + payload: { fromIndex: update.fromIndex } + }); + } + break; + } + } + } + +}; + +module.exports = DOMChildrenOperations; +}).call(this,require('_process')) +},{"./DOMLazyTree":38,"./Danger":42,"./ReactDOMComponentTree":62,"./ReactInstrumentation":91,"./createMicrosoftUnsafeLocalFunction":129,"./setInnerHTML":150,"./setTextContent":151,"_process":25}],38:[function(require,module,exports){ +/** + * Copyright 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var DOMNamespaces = require('./DOMNamespaces'); +var setInnerHTML = require('./setInnerHTML'); + +var createMicrosoftUnsafeLocalFunction = require('./createMicrosoftUnsafeLocalFunction'); +var setTextContent = require('./setTextContent'); + +var ELEMENT_NODE_TYPE = 1; +var DOCUMENT_FRAGMENT_NODE_TYPE = 11; + +/** + * In IE (8-11) and Edge, appending nodes with no children is dramatically + * faster than appending a full subtree, so we essentially queue up the + * .appendChild calls here and apply them so each node is added to its parent + * before any children are added. + * + * In other browsers, doing so is slower or neutral compared to the other order + * (in Firefox, twice as slow) so we only do this inversion in IE. + * + * See https://github.com/spicyj/innerhtml-vs-createelement-vs-clonenode. + */ +var enableLazy = typeof document !== 'undefined' && typeof document.documentMode === 'number' || typeof navigator !== 'undefined' && typeof navigator.userAgent === 'string' && /\bEdge\/\d/.test(navigator.userAgent); + +function insertTreeChildren(tree) { + if (!enableLazy) { + return; + } + var node = tree.node; + var children = tree.children; + if (children.length) { + for (var i = 0; i < children.length; i++) { + insertTreeBefore(node, children[i], null); + } + } else if (tree.html != null) { + setInnerHTML(node, tree.html); + } else if (tree.text != null) { + setTextContent(node, tree.text); + } +} + +var insertTreeBefore = createMicrosoftUnsafeLocalFunction(function (parentNode, tree, referenceNode) { + // DocumentFragments aren't actually part of the DOM after insertion so + // appending children won't update the DOM. We need to ensure the fragment + // is properly populated first, breaking out of our lazy approach for just + // this level. Also, some plugins (like Flash Player) will read + // nodes immediately upon insertion into the DOM, so + // must also be populated prior to insertion into the DOM. + if (tree.node.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE || tree.node.nodeType === ELEMENT_NODE_TYPE && tree.node.nodeName.toLowerCase() === 'object' && (tree.node.namespaceURI == null || tree.node.namespaceURI === DOMNamespaces.html)) { + insertTreeChildren(tree); + parentNode.insertBefore(tree.node, referenceNode); + } else { + parentNode.insertBefore(tree.node, referenceNode); + insertTreeChildren(tree); + } +}); + +function replaceChildWithTree(oldNode, newTree) { + oldNode.parentNode.replaceChild(newTree.node, oldNode); + insertTreeChildren(newTree); +} + +function queueChild(parentTree, childTree) { + if (enableLazy) { + parentTree.children.push(childTree); + } else { + parentTree.node.appendChild(childTree.node); + } +} + +function queueHTML(tree, html) { + if (enableLazy) { + tree.html = html; + } else { + setInnerHTML(tree.node, html); + } +} + +function queueText(tree, text) { + if (enableLazy) { + tree.text = text; + } else { + setTextContent(tree.node, text); + } +} + +function toString() { + return this.node.nodeName; +} + +function DOMLazyTree(node) { + return { + node: node, + children: [], + html: null, + text: null, + toString: toString + }; +} + +DOMLazyTree.insertTreeBefore = insertTreeBefore; +DOMLazyTree.replaceChildWithTree = replaceChildWithTree; +DOMLazyTree.queueChild = queueChild; +DOMLazyTree.queueHTML = queueHTML; +DOMLazyTree.queueText = queueText; + +module.exports = DOMLazyTree; +},{"./DOMNamespaces":39,"./createMicrosoftUnsafeLocalFunction":129,"./setInnerHTML":150,"./setTextContent":151}],39:[function(require,module,exports){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var DOMNamespaces = { + html: 'http://www.w3.org/1999/xhtml', + mathml: 'http://www.w3.org/1998/Math/MathML', + svg: 'http://www.w3.org/2000/svg' +}; + +module.exports = DOMNamespaces; +},{}],40:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var _prodInvariant = require('./reactProdInvariant'); + +var invariant = require('fbjs/lib/invariant'); + +function checkMask(value, bitmask) { + return (value & bitmask) === bitmask; +} + +var DOMPropertyInjection = { + /** + * Mapping from normalized, camelcased property names to a configuration that + * specifies how the associated DOM property should be accessed or rendered. + */ + MUST_USE_PROPERTY: 0x1, + HAS_BOOLEAN_VALUE: 0x4, + HAS_NUMERIC_VALUE: 0x8, + HAS_POSITIVE_NUMERIC_VALUE: 0x10 | 0x8, + HAS_OVERLOADED_BOOLEAN_VALUE: 0x20, + + /** + * Inject some specialized knowledge about the DOM. This takes a config object + * with the following properties: + * + * isCustomAttribute: function that given an attribute name will return true + * if it can be inserted into the DOM verbatim. Useful for data-* or aria-* + * attributes where it's impossible to enumerate all of the possible + * attribute names, + * + * Properties: object mapping DOM property name to one of the + * DOMPropertyInjection constants or null. If your attribute isn't in here, + * it won't get written to the DOM. + * + * DOMAttributeNames: object mapping React attribute name to the DOM + * attribute name. Attribute names not specified use the **lowercase** + * normalized name. + * + * DOMAttributeNamespaces: object mapping React attribute name to the DOM + * attribute namespace URL. (Attribute names not specified use no namespace.) + * + * DOMPropertyNames: similar to DOMAttributeNames but for DOM properties. + * Property names not specified use the normalized name. + * + * DOMMutationMethods: Properties that require special mutation methods. If + * `value` is undefined, the mutation method should unset the property. + * + * @param {object} domPropertyConfig the config as described above. + */ + injectDOMPropertyConfig: function (domPropertyConfig) { + var Injection = DOMPropertyInjection; + var Properties = domPropertyConfig.Properties || {}; + var DOMAttributeNamespaces = domPropertyConfig.DOMAttributeNamespaces || {}; + var DOMAttributeNames = domPropertyConfig.DOMAttributeNames || {}; + var DOMPropertyNames = domPropertyConfig.DOMPropertyNames || {}; + var DOMMutationMethods = domPropertyConfig.DOMMutationMethods || {}; + + if (domPropertyConfig.isCustomAttribute) { + DOMProperty._isCustomAttributeFunctions.push(domPropertyConfig.isCustomAttribute); + } + + for (var propName in Properties) { + !!DOMProperty.properties.hasOwnProperty(propName) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'injectDOMPropertyConfig(...): You\'re trying to inject DOM property \'%s\' which has already been injected. You may be accidentally injecting the same DOM property config twice, or you may be injecting two configs that have conflicting property names.', propName) : _prodInvariant('48', propName) : void 0; + + var lowerCased = propName.toLowerCase(); + var propConfig = Properties[propName]; + + var propertyInfo = { + attributeName: lowerCased, + attributeNamespace: null, + propertyName: propName, + mutationMethod: null, + + mustUseProperty: checkMask(propConfig, Injection.MUST_USE_PROPERTY), + hasBooleanValue: checkMask(propConfig, Injection.HAS_BOOLEAN_VALUE), + hasNumericValue: checkMask(propConfig, Injection.HAS_NUMERIC_VALUE), + hasPositiveNumericValue: checkMask(propConfig, Injection.HAS_POSITIVE_NUMERIC_VALUE), + hasOverloadedBooleanValue: checkMask(propConfig, Injection.HAS_OVERLOADED_BOOLEAN_VALUE) + }; + !(propertyInfo.hasBooleanValue + propertyInfo.hasNumericValue + propertyInfo.hasOverloadedBooleanValue <= 1) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'DOMProperty: Value can be one of boolean, overloaded boolean, or numeric value, but not a combination: %s', propName) : _prodInvariant('50', propName) : void 0; + + if (process.env.NODE_ENV !== 'production') { + DOMProperty.getPossibleStandardName[lowerCased] = propName; + } + + if (DOMAttributeNames.hasOwnProperty(propName)) { + var attributeName = DOMAttributeNames[propName]; + propertyInfo.attributeName = attributeName; + if (process.env.NODE_ENV !== 'production') { + DOMProperty.getPossibleStandardName[attributeName] = propName; + } + } + + if (DOMAttributeNamespaces.hasOwnProperty(propName)) { + propertyInfo.attributeNamespace = DOMAttributeNamespaces[propName]; + } + + if (DOMPropertyNames.hasOwnProperty(propName)) { + propertyInfo.propertyName = DOMPropertyNames[propName]; + } + + if (DOMMutationMethods.hasOwnProperty(propName)) { + propertyInfo.mutationMethod = DOMMutationMethods[propName]; + } + + DOMProperty.properties[propName] = propertyInfo; + } + } +}; + +/* eslint-disable max-len */ +var ATTRIBUTE_NAME_START_CHAR = ':A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD'; +/* eslint-enable max-len */ + +/** + * DOMProperty exports lookup objects that can be used like functions: + * + * > DOMProperty.isValid['id'] + * true + * > DOMProperty.isValid['foobar'] + * undefined + * + * Although this may be confusing, it performs better in general. + * + * @see http://jsperf.com/key-exists + * @see http://jsperf.com/key-missing + */ +var DOMProperty = { + + ID_ATTRIBUTE_NAME: 'data-reactid', + ROOT_ATTRIBUTE_NAME: 'data-reactroot', + + ATTRIBUTE_NAME_START_CHAR: ATTRIBUTE_NAME_START_CHAR, + ATTRIBUTE_NAME_CHAR: ATTRIBUTE_NAME_START_CHAR + '\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040', + + /** + * Map from property "standard name" to an object with info about how to set + * the property in the DOM. Each object contains: + * + * attributeName: + * Used when rendering markup or with `*Attribute()`. + * attributeNamespace + * propertyName: + * Used on DOM node instances. (This includes properties that mutate due to + * external factors.) + * mutationMethod: + * If non-null, used instead of the property or `setAttribute()` after + * initial render. + * mustUseProperty: + * Whether the property must be accessed and mutated as an object property. + * hasBooleanValue: + * Whether the property should be removed when set to a falsey value. + * hasNumericValue: + * Whether the property must be numeric or parse as a numeric and should be + * removed when set to a falsey value. + * hasPositiveNumericValue: + * Whether the property must be positive numeric or parse as a positive + * numeric and should be removed when set to a falsey value. + * hasOverloadedBooleanValue: + * Whether the property can be used as a flag as well as with a value. + * Removed when strictly equal to false; present without a value when + * strictly equal to true; present with a value otherwise. + */ + properties: {}, + + /** + * Mapping from lowercase property names to the properly cased version, used + * to warn in the case of missing properties. Available only in __DEV__. + * + * autofocus is predefined, because adding it to the property whitelist + * causes unintended side effects. + * + * @type {Object} + */ + getPossibleStandardName: process.env.NODE_ENV !== 'production' ? { autofocus: 'autoFocus' } : null, + + /** + * All of the isCustomAttribute() functions that have been injected. + */ + _isCustomAttributeFunctions: [], + + /** + * Checks whether a property name is a custom attribute. + * @method + */ + isCustomAttribute: function (attributeName) { + for (var i = 0; i < DOMProperty._isCustomAttributeFunctions.length; i++) { + var isCustomAttributeFn = DOMProperty._isCustomAttributeFunctions[i]; + if (isCustomAttributeFn(attributeName)) { + return true; + } + } + return false; + }, + + injection: DOMPropertyInjection +}; + +module.exports = DOMProperty; +}).call(this,require('_process')) +},{"./reactProdInvariant":148,"_process":25,"fbjs/lib/invariant":16}],41:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var DOMProperty = require('./DOMProperty'); +var ReactDOMComponentTree = require('./ReactDOMComponentTree'); +var ReactInstrumentation = require('./ReactInstrumentation'); + +var quoteAttributeValueForBrowser = require('./quoteAttributeValueForBrowser'); +var warning = require('fbjs/lib/warning'); + +var VALID_ATTRIBUTE_NAME_REGEX = new RegExp('^[' + DOMProperty.ATTRIBUTE_NAME_START_CHAR + '][' + DOMProperty.ATTRIBUTE_NAME_CHAR + ']*$'); +var illegalAttributeNameCache = {}; +var validatedAttributeNameCache = {}; + +function isAttributeNameSafe(attributeName) { + if (validatedAttributeNameCache.hasOwnProperty(attributeName)) { + return true; + } + if (illegalAttributeNameCache.hasOwnProperty(attributeName)) { + return false; + } + if (VALID_ATTRIBUTE_NAME_REGEX.test(attributeName)) { + validatedAttributeNameCache[attributeName] = true; + return true; + } + illegalAttributeNameCache[attributeName] = true; + process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid attribute name: `%s`', attributeName) : void 0; + return false; +} + +function shouldIgnoreValue(propertyInfo, value) { + return value == null || propertyInfo.hasBooleanValue && !value || propertyInfo.hasNumericValue && isNaN(value) || propertyInfo.hasPositiveNumericValue && value < 1 || propertyInfo.hasOverloadedBooleanValue && value === false; +} + +/** + * Operations for dealing with DOM properties. + */ +var DOMPropertyOperations = { + + /** + * Creates markup for the ID property. + * + * @param {string} id Unescaped ID. + * @return {string} Markup string. + */ + createMarkupForID: function (id) { + return DOMProperty.ID_ATTRIBUTE_NAME + '=' + quoteAttributeValueForBrowser(id); + }, + + setAttributeForID: function (node, id) { + node.setAttribute(DOMProperty.ID_ATTRIBUTE_NAME, id); + }, + + createMarkupForRoot: function () { + return DOMProperty.ROOT_ATTRIBUTE_NAME + '=""'; + }, + + setAttributeForRoot: function (node) { + node.setAttribute(DOMProperty.ROOT_ATTRIBUTE_NAME, ''); + }, + + /** + * Creates markup for a property. + * + * @param {string} name + * @param {*} value + * @return {?string} Markup string, or null if the property was invalid. + */ + createMarkupForProperty: function (name, value) { + var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ? DOMProperty.properties[name] : null; + if (propertyInfo) { + if (shouldIgnoreValue(propertyInfo, value)) { + return ''; + } + var attributeName = propertyInfo.attributeName; + if (propertyInfo.hasBooleanValue || propertyInfo.hasOverloadedBooleanValue && value === true) { + return attributeName + '=""'; + } + return attributeName + '=' + quoteAttributeValueForBrowser(value); + } else if (DOMProperty.isCustomAttribute(name)) { + if (value == null) { + return ''; + } + return name + '=' + quoteAttributeValueForBrowser(value); + } + return null; + }, + + /** + * Creates markup for a custom property. + * + * @param {string} name + * @param {*} value + * @return {string} Markup string, or empty string if the property was invalid. + */ + createMarkupForCustomAttribute: function (name, value) { + if (!isAttributeNameSafe(name) || value == null) { + return ''; + } + return name + '=' + quoteAttributeValueForBrowser(value); + }, + + /** + * Sets the value for a property on a node. + * + * @param {DOMElement} node + * @param {string} name + * @param {*} value + */ + setValueForProperty: function (node, name, value) { + var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ? DOMProperty.properties[name] : null; + if (propertyInfo) { + var mutationMethod = propertyInfo.mutationMethod; + if (mutationMethod) { + mutationMethod(node, value); + } else if (shouldIgnoreValue(propertyInfo, value)) { + this.deleteValueForProperty(node, name); + return; + } else if (propertyInfo.mustUseProperty) { + // Contrary to `setAttribute`, object properties are properly + // `toString`ed by IE8/9. + node[propertyInfo.propertyName] = value; + } else { + var attributeName = propertyInfo.attributeName; + var namespace = propertyInfo.attributeNamespace; + // `setAttribute` with objects becomes only `[object]` in IE8/9, + // ('' + value) makes it output the correct toString()-value. + if (namespace) { + node.setAttributeNS(namespace, attributeName, '' + value); + } else if (propertyInfo.hasBooleanValue || propertyInfo.hasOverloadedBooleanValue && value === true) { + node.setAttribute(attributeName, ''); + } else { + node.setAttribute(attributeName, '' + value); + } + } + } else if (DOMProperty.isCustomAttribute(name)) { + DOMPropertyOperations.setValueForAttribute(node, name, value); + return; + } + + if (process.env.NODE_ENV !== 'production') { + var payload = {}; + payload[name] = value; + ReactInstrumentation.debugTool.onHostOperation({ + instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID, + type: 'update attribute', + payload: payload + }); + } + }, + + setValueForAttribute: function (node, name, value) { + if (!isAttributeNameSafe(name)) { + return; + } + if (value == null) { + node.removeAttribute(name); + } else { + node.setAttribute(name, '' + value); + } + + if (process.env.NODE_ENV !== 'production') { + var payload = {}; + payload[name] = value; + ReactInstrumentation.debugTool.onHostOperation({ + instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID, + type: 'update attribute', + payload: payload + }); + } + }, + + /** + * Deletes an attributes from a node. + * + * @param {DOMElement} node + * @param {string} name + */ + deleteValueForAttribute: function (node, name) { + node.removeAttribute(name); + if (process.env.NODE_ENV !== 'production') { + ReactInstrumentation.debugTool.onHostOperation({ + instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID, + type: 'remove attribute', + payload: name + }); + } + }, + + /** + * Deletes the value for a property on a node. + * + * @param {DOMElement} node + * @param {string} name + */ + deleteValueForProperty: function (node, name) { + var propertyInfo = DOMProperty.properties.hasOwnProperty(name) ? DOMProperty.properties[name] : null; + if (propertyInfo) { + var mutationMethod = propertyInfo.mutationMethod; + if (mutationMethod) { + mutationMethod(node, undefined); + } else if (propertyInfo.mustUseProperty) { + var propName = propertyInfo.propertyName; + if (propertyInfo.hasBooleanValue) { + node[propName] = false; + } else { + node[propName] = ''; + } + } else { + node.removeAttribute(propertyInfo.attributeName); + } + } else if (DOMProperty.isCustomAttribute(name)) { + node.removeAttribute(name); + } + + if (process.env.NODE_ENV !== 'production') { + ReactInstrumentation.debugTool.onHostOperation({ + instanceID: ReactDOMComponentTree.getInstanceFromNode(node)._debugID, + type: 'remove attribute', + payload: name + }); + } + } + +}; + +module.exports = DOMPropertyOperations; +}).call(this,require('_process')) +},{"./DOMProperty":40,"./ReactDOMComponentTree":62,"./ReactInstrumentation":91,"./quoteAttributeValueForBrowser":147,"_process":25,"fbjs/lib/warning":23}],42:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var _prodInvariant = require('./reactProdInvariant'); + +var DOMLazyTree = require('./DOMLazyTree'); +var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment'); + +var createNodesFromMarkup = require('fbjs/lib/createNodesFromMarkup'); +var emptyFunction = require('fbjs/lib/emptyFunction'); +var invariant = require('fbjs/lib/invariant'); + +var Danger = { + + /** + * Replaces a node with a string of markup at its current position within its + * parent. The markup must render into a single root node. + * + * @param {DOMElement} oldChild Child node to replace. + * @param {string} markup Markup to render in place of the child node. + * @internal + */ + dangerouslyReplaceNodeWithMarkup: function (oldChild, markup) { + !ExecutionEnvironment.canUseDOM ? process.env.NODE_ENV !== 'production' ? invariant(false, 'dangerouslyReplaceNodeWithMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString() for server rendering.') : _prodInvariant('56') : void 0; + !markup ? process.env.NODE_ENV !== 'production' ? invariant(false, 'dangerouslyReplaceNodeWithMarkup(...): Missing markup.') : _prodInvariant('57') : void 0; + !(oldChild.nodeName !== 'HTML') ? process.env.NODE_ENV !== 'production' ? invariant(false, 'dangerouslyReplaceNodeWithMarkup(...): Cannot replace markup of the node. This is because browser quirks make this unreliable and/or slow. If you want to render to the root you must use server rendering. See ReactDOMServer.renderToString().') : _prodInvariant('58') : void 0; + + if (typeof markup === 'string') { + var newChild = createNodesFromMarkup(markup, emptyFunction)[0]; + oldChild.parentNode.replaceChild(newChild, oldChild); + } else { + DOMLazyTree.replaceChildWithTree(oldChild, markup); + } + } + +}; + +module.exports = Danger; +}).call(this,require('_process')) +},{"./DOMLazyTree":38,"./reactProdInvariant":148,"_process":25,"fbjs/lib/ExecutionEnvironment":2,"fbjs/lib/createNodesFromMarkup":7,"fbjs/lib/emptyFunction":8,"fbjs/lib/invariant":16}],43:[function(require,module,exports){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +/** + * Module that is injectable into `EventPluginHub`, that specifies a + * deterministic ordering of `EventPlugin`s. A convenient way to reason about + * plugins, without having to package every one of them. This is better than + * having plugins be ordered in the same order that they are injected because + * that ordering would be influenced by the packaging order. + * `ResponderEventPlugin` must occur before `SimpleEventPlugin` so that + * preventing default on events is convenient in `SimpleEventPlugin` handlers. + */ + +var DefaultEventPluginOrder = ['ResponderEventPlugin', 'SimpleEventPlugin', 'TapEventPlugin', 'EnterLeaveEventPlugin', 'ChangeEventPlugin', 'SelectEventPlugin', 'BeforeInputEventPlugin']; + +module.exports = DefaultEventPluginOrder; +},{}],44:[function(require,module,exports){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var EventPropagators = require('./EventPropagators'); +var ReactDOMComponentTree = require('./ReactDOMComponentTree'); +var SyntheticMouseEvent = require('./SyntheticMouseEvent'); + +var eventTypes = { + mouseEnter: { + registrationName: 'onMouseEnter', + dependencies: ['topMouseOut', 'topMouseOver'] + }, + mouseLeave: { + registrationName: 'onMouseLeave', + dependencies: ['topMouseOut', 'topMouseOver'] + } +}; + +var EnterLeaveEventPlugin = { + + eventTypes: eventTypes, + + /** + * For almost every interaction we care about, there will be both a top-level + * `mouseover` and `mouseout` event that occurs. Only use `mouseout` so that + * we do not extract duplicate events. However, moving the mouse into the + * browser from outside will not fire a `mouseout` event. In this case, we use + * the `mouseover` top-level event. + */ + extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) { + if (topLevelType === 'topMouseOver' && (nativeEvent.relatedTarget || nativeEvent.fromElement)) { + return null; + } + if (topLevelType !== 'topMouseOut' && topLevelType !== 'topMouseOver') { + // Must not be a mouse in or mouse out - ignoring. + return null; + } + + var win; + if (nativeEventTarget.window === nativeEventTarget) { + // `nativeEventTarget` is probably a window object. + win = nativeEventTarget; + } else { + // TODO: Figure out why `ownerDocument` is sometimes undefined in IE8. + var doc = nativeEventTarget.ownerDocument; + if (doc) { + win = doc.defaultView || doc.parentWindow; + } else { + win = window; + } + } + + var from; + var to; + if (topLevelType === 'topMouseOut') { + from = targetInst; + var related = nativeEvent.relatedTarget || nativeEvent.toElement; + to = related ? ReactDOMComponentTree.getClosestInstanceFromNode(related) : null; + } else { + // Moving to a node from outside the window. + from = null; + to = targetInst; + } + + if (from === to) { + // Nothing pertains to our managed components. + return null; + } + + var fromNode = from == null ? win : ReactDOMComponentTree.getNodeFromInstance(from); + var toNode = to == null ? win : ReactDOMComponentTree.getNodeFromInstance(to); + + var leave = SyntheticMouseEvent.getPooled(eventTypes.mouseLeave, from, nativeEvent, nativeEventTarget); + leave.type = 'mouseleave'; + leave.target = fromNode; + leave.relatedTarget = toNode; + + var enter = SyntheticMouseEvent.getPooled(eventTypes.mouseEnter, to, nativeEvent, nativeEventTarget); + enter.type = 'mouseenter'; + enter.target = toNode; + enter.relatedTarget = fromNode; + + EventPropagators.accumulateEnterLeaveDispatches(leave, enter, from, to); + + return [leave, enter]; + } + +}; + +module.exports = EnterLeaveEventPlugin; +},{"./EventPropagators":48,"./ReactDOMComponentTree":62,"./SyntheticMouseEvent":119}],45:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var _prodInvariant = require('./reactProdInvariant'); + +var EventPluginRegistry = require('./EventPluginRegistry'); +var EventPluginUtils = require('./EventPluginUtils'); +var ReactErrorUtils = require('./ReactErrorUtils'); + +var accumulateInto = require('./accumulateInto'); +var forEachAccumulated = require('./forEachAccumulated'); +var invariant = require('fbjs/lib/invariant'); + +/** + * Internal store for event listeners + */ +var listenerBank = {}; + +/** + * Internal queue of events that have accumulated their dispatches and are + * waiting to have their dispatches executed. + */ +var eventQueue = null; + +/** + * Dispatches an event and releases it back into the pool, unless persistent. + * + * @param {?object} event Synthetic event to be dispatched. + * @param {boolean} simulated If the event is simulated (changes exn behavior) + * @private + */ +var executeDispatchesAndRelease = function (event, simulated) { + if (event) { + EventPluginUtils.executeDispatchesInOrder(event, simulated); + + if (!event.isPersistent()) { + event.constructor.release(event); + } + } +}; +var executeDispatchesAndReleaseSimulated = function (e) { + return executeDispatchesAndRelease(e, true); +}; +var executeDispatchesAndReleaseTopLevel = function (e) { + return executeDispatchesAndRelease(e, false); +}; + +var getDictionaryKey = function (inst) { + // Prevents V8 performance issue: + // https://github.com/facebook/react/pull/7232 + return '.' + inst._rootNodeID; +}; + +function isInteractive(tag) { + return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea'; +} + +function shouldPreventMouseEvent(name, type, props) { + switch (name) { + case 'onClick': + case 'onClickCapture': + case 'onDoubleClick': + case 'onDoubleClickCapture': + case 'onMouseDown': + case 'onMouseDownCapture': + case 'onMouseMove': + case 'onMouseMoveCapture': + case 'onMouseUp': + case 'onMouseUpCapture': + return !!(props.disabled && isInteractive(type)); + default: + return false; + } +} + +/** + * This is a unified interface for event plugins to be installed and configured. + * + * Event plugins can implement the following properties: + * + * `extractEvents` {function(string, DOMEventTarget, string, object): *} + * Required. When a top-level event is fired, this method is expected to + * extract synthetic events that will in turn be queued and dispatched. + * + * `eventTypes` {object} + * Optional, plugins that fire events must publish a mapping of registration + * names that are used to register listeners. Values of this mapping must + * be objects that contain `registrationName` or `phasedRegistrationNames`. + * + * `executeDispatch` {function(object, function, string)} + * Optional, allows plugins to override how an event gets dispatched. By + * default, the listener is simply invoked. + * + * Each plugin that is injected into `EventsPluginHub` is immediately operable. + * + * @public + */ +var EventPluginHub = { + + /** + * Methods for injecting dependencies. + */ + injection: { + + /** + * @param {array} InjectedEventPluginOrder + * @public + */ + injectEventPluginOrder: EventPluginRegistry.injectEventPluginOrder, + + /** + * @param {object} injectedNamesToPlugins Map from names to plugin modules. + */ + injectEventPluginsByName: EventPluginRegistry.injectEventPluginsByName + + }, + + /** + * Stores `listener` at `listenerBank[registrationName][key]`. Is idempotent. + * + * @param {object} inst The instance, which is the source of events. + * @param {string} registrationName Name of listener (e.g. `onClick`). + * @param {function} listener The callback to store. + */ + putListener: function (inst, registrationName, listener) { + !(typeof listener === 'function') ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Expected %s listener to be a function, instead got type %s', registrationName, typeof listener) : _prodInvariant('94', registrationName, typeof listener) : void 0; + + var key = getDictionaryKey(inst); + var bankForRegistrationName = listenerBank[registrationName] || (listenerBank[registrationName] = {}); + bankForRegistrationName[key] = listener; + + var PluginModule = EventPluginRegistry.registrationNameModules[registrationName]; + if (PluginModule && PluginModule.didPutListener) { + PluginModule.didPutListener(inst, registrationName, listener); + } + }, + + /** + * @param {object} inst The instance, which is the source of events. + * @param {string} registrationName Name of listener (e.g. `onClick`). + * @return {?function} The stored callback. + */ + getListener: function (inst, registrationName) { + // TODO: shouldPreventMouseEvent is DOM-specific and definitely should not + // live here; needs to be moved to a better place soon + var bankForRegistrationName = listenerBank[registrationName]; + if (shouldPreventMouseEvent(registrationName, inst._currentElement.type, inst._currentElement.props)) { + return null; + } + var key = getDictionaryKey(inst); + return bankForRegistrationName && bankForRegistrationName[key]; + }, + + /** + * Deletes a listener from the registration bank. + * + * @param {object} inst The instance, which is the source of events. + * @param {string} registrationName Name of listener (e.g. `onClick`). + */ + deleteListener: function (inst, registrationName) { + var PluginModule = EventPluginRegistry.registrationNameModules[registrationName]; + if (PluginModule && PluginModule.willDeleteListener) { + PluginModule.willDeleteListener(inst, registrationName); + } + + var bankForRegistrationName = listenerBank[registrationName]; + // TODO: This should never be null -- when is it? + if (bankForRegistrationName) { + var key = getDictionaryKey(inst); + delete bankForRegistrationName[key]; + } + }, + + /** + * Deletes all listeners for the DOM element with the supplied ID. + * + * @param {object} inst The instance, which is the source of events. + */ + deleteAllListeners: function (inst) { + var key = getDictionaryKey(inst); + for (var registrationName in listenerBank) { + if (!listenerBank.hasOwnProperty(registrationName)) { + continue; + } + + if (!listenerBank[registrationName][key]) { + continue; + } + + var PluginModule = EventPluginRegistry.registrationNameModules[registrationName]; + if (PluginModule && PluginModule.willDeleteListener) { + PluginModule.willDeleteListener(inst, registrationName); + } + + delete listenerBank[registrationName][key]; + } + }, + + /** + * Allows registered plugins an opportunity to extract events from top-level + * native browser events. + * + * @return {*} An accumulation of synthetic events. + * @internal + */ + extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) { + var events; + var plugins = EventPluginRegistry.plugins; + for (var i = 0; i < plugins.length; i++) { + // Not every plugin in the ordering may be loaded at runtime. + var possiblePlugin = plugins[i]; + if (possiblePlugin) { + var extractedEvents = possiblePlugin.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget); + if (extractedEvents) { + events = accumulateInto(events, extractedEvents); + } + } + } + return events; + }, + + /** + * Enqueues a synthetic event that should be dispatched when + * `processEventQueue` is invoked. + * + * @param {*} events An accumulation of synthetic events. + * @internal + */ + enqueueEvents: function (events) { + if (events) { + eventQueue = accumulateInto(eventQueue, events); + } + }, + + /** + * Dispatches all synthetic events on the event queue. + * + * @internal + */ + processEventQueue: function (simulated) { + // Set `eventQueue` to null before processing it so that we can tell if more + // events get enqueued while processing. + var processingEventQueue = eventQueue; + eventQueue = null; + if (simulated) { + forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseSimulated); + } else { + forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel); + } + !!eventQueue ? process.env.NODE_ENV !== 'production' ? invariant(false, 'processEventQueue(): Additional events were enqueued while processing an event queue. Support for this has not yet been implemented.') : _prodInvariant('95') : void 0; + // This would be a good time to rethrow if any of the event handlers threw. + ReactErrorUtils.rethrowCaughtError(); + }, + + /** + * These are needed for tests only. Do not use! + */ + __purge: function () { + listenerBank = {}; + }, + + __getListenerBank: function () { + return listenerBank; + } + +}; + +module.exports = EventPluginHub; +}).call(this,require('_process')) +},{"./EventPluginRegistry":46,"./EventPluginUtils":47,"./ReactErrorUtils":82,"./accumulateInto":126,"./forEachAccumulated":134,"./reactProdInvariant":148,"_process":25,"fbjs/lib/invariant":16}],46:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * + */ + +'use strict'; + +var _prodInvariant = require('./reactProdInvariant'); + +var invariant = require('fbjs/lib/invariant'); + +/** + * Injectable ordering of event plugins. + */ +var eventPluginOrder = null; + +/** + * Injectable mapping from names to event plugin modules. + */ +var namesToPlugins = {}; + +/** + * Recomputes the plugin list using the injected plugins and plugin ordering. + * + * @private + */ +function recomputePluginOrdering() { + if (!eventPluginOrder) { + // Wait until an `eventPluginOrder` is injected. + return; + } + for (var pluginName in namesToPlugins) { + var pluginModule = namesToPlugins[pluginName]; + var pluginIndex = eventPluginOrder.indexOf(pluginName); + !(pluginIndex > -1) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'EventPluginRegistry: Cannot inject event plugins that do not exist in the plugin ordering, `%s`.', pluginName) : _prodInvariant('96', pluginName) : void 0; + if (EventPluginRegistry.plugins[pluginIndex]) { + continue; + } + !pluginModule.extractEvents ? process.env.NODE_ENV !== 'production' ? invariant(false, 'EventPluginRegistry: Event plugins must implement an `extractEvents` method, but `%s` does not.', pluginName) : _prodInvariant('97', pluginName) : void 0; + EventPluginRegistry.plugins[pluginIndex] = pluginModule; + var publishedEvents = pluginModule.eventTypes; + for (var eventName in publishedEvents) { + !publishEventForPlugin(publishedEvents[eventName], pluginModule, eventName) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.', eventName, pluginName) : _prodInvariant('98', eventName, pluginName) : void 0; + } + } +} + +/** + * Publishes an event so that it can be dispatched by the supplied plugin. + * + * @param {object} dispatchConfig Dispatch configuration for the event. + * @param {object} PluginModule Plugin publishing the event. + * @return {boolean} True if the event was successfully published. + * @private + */ +function publishEventForPlugin(dispatchConfig, pluginModule, eventName) { + !!EventPluginRegistry.eventNameDispatchConfigs.hasOwnProperty(eventName) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'EventPluginHub: More than one plugin attempted to publish the same event name, `%s`.', eventName) : _prodInvariant('99', eventName) : void 0; + EventPluginRegistry.eventNameDispatchConfigs[eventName] = dispatchConfig; + + var phasedRegistrationNames = dispatchConfig.phasedRegistrationNames; + if (phasedRegistrationNames) { + for (var phaseName in phasedRegistrationNames) { + if (phasedRegistrationNames.hasOwnProperty(phaseName)) { + var phasedRegistrationName = phasedRegistrationNames[phaseName]; + publishRegistrationName(phasedRegistrationName, pluginModule, eventName); + } + } + return true; + } else if (dispatchConfig.registrationName) { + publishRegistrationName(dispatchConfig.registrationName, pluginModule, eventName); + return true; + } + return false; +} + +/** + * Publishes a registration name that is used to identify dispatched events and + * can be used with `EventPluginHub.putListener` to register listeners. + * + * @param {string} registrationName Registration name to add. + * @param {object} PluginModule Plugin publishing the event. + * @private + */ +function publishRegistrationName(registrationName, pluginModule, eventName) { + !!EventPluginRegistry.registrationNameModules[registrationName] ? process.env.NODE_ENV !== 'production' ? invariant(false, 'EventPluginHub: More than one plugin attempted to publish the same registration name, `%s`.', registrationName) : _prodInvariant('100', registrationName) : void 0; + EventPluginRegistry.registrationNameModules[registrationName] = pluginModule; + EventPluginRegistry.registrationNameDependencies[registrationName] = pluginModule.eventTypes[eventName].dependencies; + + if (process.env.NODE_ENV !== 'production') { + var lowerCasedName = registrationName.toLowerCase(); + EventPluginRegistry.possibleRegistrationNames[lowerCasedName] = registrationName; + + if (registrationName === 'onDoubleClick') { + EventPluginRegistry.possibleRegistrationNames.ondblclick = registrationName; + } + } +} + +/** + * Registers plugins so that they can extract and dispatch events. + * + * @see {EventPluginHub} + */ +var EventPluginRegistry = { + + /** + * Ordered list of injected plugins. + */ + plugins: [], + + /** + * Mapping from event name to dispatch config + */ + eventNameDispatchConfigs: {}, + + /** + * Mapping from registration name to plugin module + */ + registrationNameModules: {}, + + /** + * Mapping from registration name to event name + */ + registrationNameDependencies: {}, + + /** + * Mapping from lowercase registration names to the properly cased version, + * used to warn in the case of missing event handlers. Available + * only in __DEV__. + * @type {Object} + */ + possibleRegistrationNames: process.env.NODE_ENV !== 'production' ? {} : null, + // Trust the developer to only use possibleRegistrationNames in __DEV__ + + /** + * Injects an ordering of plugins (by plugin name). This allows the ordering + * to be decoupled from injection of the actual plugins so that ordering is + * always deterministic regardless of packaging, on-the-fly injection, etc. + * + * @param {array} InjectedEventPluginOrder + * @internal + * @see {EventPluginHub.injection.injectEventPluginOrder} + */ + injectEventPluginOrder: function (injectedEventPluginOrder) { + !!eventPluginOrder ? process.env.NODE_ENV !== 'production' ? invariant(false, 'EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React.') : _prodInvariant('101') : void 0; + // Clone the ordering so it cannot be dynamically mutated. + eventPluginOrder = Array.prototype.slice.call(injectedEventPluginOrder); + recomputePluginOrdering(); + }, + + /** + * Injects plugins to be used by `EventPluginHub`. The plugin names must be + * in the ordering injected by `injectEventPluginOrder`. + * + * Plugins can be injected as part of page initialization or on-the-fly. + * + * @param {object} injectedNamesToPlugins Map from names to plugin modules. + * @internal + * @see {EventPluginHub.injection.injectEventPluginsByName} + */ + injectEventPluginsByName: function (injectedNamesToPlugins) { + var isOrderingDirty = false; + for (var pluginName in injectedNamesToPlugins) { + if (!injectedNamesToPlugins.hasOwnProperty(pluginName)) { + continue; + } + var pluginModule = injectedNamesToPlugins[pluginName]; + if (!namesToPlugins.hasOwnProperty(pluginName) || namesToPlugins[pluginName] !== pluginModule) { + !!namesToPlugins[pluginName] ? process.env.NODE_ENV !== 'production' ? invariant(false, 'EventPluginRegistry: Cannot inject two different event plugins using the same name, `%s`.', pluginName) : _prodInvariant('102', pluginName) : void 0; + namesToPlugins[pluginName] = pluginModule; + isOrderingDirty = true; + } + } + if (isOrderingDirty) { + recomputePluginOrdering(); + } + }, + + /** + * Looks up the plugin for the supplied event. + * + * @param {object} event A synthetic event. + * @return {?object} The plugin that created the supplied event. + * @internal + */ + getPluginModuleForEvent: function (event) { + var dispatchConfig = event.dispatchConfig; + if (dispatchConfig.registrationName) { + return EventPluginRegistry.registrationNameModules[dispatchConfig.registrationName] || null; + } + if (dispatchConfig.phasedRegistrationNames !== undefined) { + // pulling phasedRegistrationNames out of dispatchConfig helps Flow see + // that it is not undefined. + var phasedRegistrationNames = dispatchConfig.phasedRegistrationNames; + + for (var phase in phasedRegistrationNames) { + if (!phasedRegistrationNames.hasOwnProperty(phase)) { + continue; + } + var pluginModule = EventPluginRegistry.registrationNameModules[phasedRegistrationNames[phase]]; + if (pluginModule) { + return pluginModule; + } + } + } + return null; + }, + + /** + * Exposed for unit testing. + * @private + */ + _resetEventPlugins: function () { + eventPluginOrder = null; + for (var pluginName in namesToPlugins) { + if (namesToPlugins.hasOwnProperty(pluginName)) { + delete namesToPlugins[pluginName]; + } + } + EventPluginRegistry.plugins.length = 0; + + var eventNameDispatchConfigs = EventPluginRegistry.eventNameDispatchConfigs; + for (var eventName in eventNameDispatchConfigs) { + if (eventNameDispatchConfigs.hasOwnProperty(eventName)) { + delete eventNameDispatchConfigs[eventName]; + } + } + + var registrationNameModules = EventPluginRegistry.registrationNameModules; + for (var registrationName in registrationNameModules) { + if (registrationNameModules.hasOwnProperty(registrationName)) { + delete registrationNameModules[registrationName]; + } + } + + if (process.env.NODE_ENV !== 'production') { + var possibleRegistrationNames = EventPluginRegistry.possibleRegistrationNames; + for (var lowerCasedName in possibleRegistrationNames) { + if (possibleRegistrationNames.hasOwnProperty(lowerCasedName)) { + delete possibleRegistrationNames[lowerCasedName]; + } + } + } + } + +}; + +module.exports = EventPluginRegistry; +}).call(this,require('_process')) +},{"./reactProdInvariant":148,"_process":25,"fbjs/lib/invariant":16}],47:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var _prodInvariant = require('./reactProdInvariant'); + +var ReactErrorUtils = require('./ReactErrorUtils'); + +var invariant = require('fbjs/lib/invariant'); +var warning = require('fbjs/lib/warning'); + +/** + * Injected dependencies: + */ + +/** + * - `ComponentTree`: [required] Module that can convert between React instances + * and actual node references. + */ +var ComponentTree; +var TreeTraversal; +var injection = { + injectComponentTree: function (Injected) { + ComponentTree = Injected; + if (process.env.NODE_ENV !== 'production') { + process.env.NODE_ENV !== 'production' ? warning(Injected && Injected.getNodeFromInstance && Injected.getInstanceFromNode, 'EventPluginUtils.injection.injectComponentTree(...): Injected ' + 'module is missing getNodeFromInstance or getInstanceFromNode.') : void 0; + } + }, + injectTreeTraversal: function (Injected) { + TreeTraversal = Injected; + if (process.env.NODE_ENV !== 'production') { + process.env.NODE_ENV !== 'production' ? warning(Injected && Injected.isAncestor && Injected.getLowestCommonAncestor, 'EventPluginUtils.injection.injectTreeTraversal(...): Injected ' + 'module is missing isAncestor or getLowestCommonAncestor.') : void 0; + } + } +}; + +function isEndish(topLevelType) { + return topLevelType === 'topMouseUp' || topLevelType === 'topTouchEnd' || topLevelType === 'topTouchCancel'; +} + +function isMoveish(topLevelType) { + return topLevelType === 'topMouseMove' || topLevelType === 'topTouchMove'; +} +function isStartish(topLevelType) { + return topLevelType === 'topMouseDown' || topLevelType === 'topTouchStart'; +} + +var validateEventDispatches; +if (process.env.NODE_ENV !== 'production') { + validateEventDispatches = function (event) { + var dispatchListeners = event._dispatchListeners; + var dispatchInstances = event._dispatchInstances; + + var listenersIsArr = Array.isArray(dispatchListeners); + var listenersLen = listenersIsArr ? dispatchListeners.length : dispatchListeners ? 1 : 0; + + var instancesIsArr = Array.isArray(dispatchInstances); + var instancesLen = instancesIsArr ? dispatchInstances.length : dispatchInstances ? 1 : 0; + + process.env.NODE_ENV !== 'production' ? warning(instancesIsArr === listenersIsArr && instancesLen === listenersLen, 'EventPluginUtils: Invalid `event`.') : void 0; + }; +} + +/** + * Dispatch the event to the listener. + * @param {SyntheticEvent} event SyntheticEvent to handle + * @param {boolean} simulated If the event is simulated (changes exn behavior) + * @param {function} listener Application-level callback + * @param {*} inst Internal component instance + */ +function executeDispatch(event, simulated, listener, inst) { + var type = event.type || 'unknown-event'; + event.currentTarget = EventPluginUtils.getNodeFromInstance(inst); + if (simulated) { + ReactErrorUtils.invokeGuardedCallbackWithCatch(type, listener, event); + } else { + ReactErrorUtils.invokeGuardedCallback(type, listener, event); + } + event.currentTarget = null; +} + +/** + * Standard/simple iteration through an event's collected dispatches. + */ +function executeDispatchesInOrder(event, simulated) { + var dispatchListeners = event._dispatchListeners; + var dispatchInstances = event._dispatchInstances; + if (process.env.NODE_ENV !== 'production') { + validateEventDispatches(event); + } + if (Array.isArray(dispatchListeners)) { + for (var i = 0; i < dispatchListeners.length; i++) { + if (event.isPropagationStopped()) { + break; + } + // Listeners and Instances are two parallel arrays that are always in sync. + executeDispatch(event, simulated, dispatchListeners[i], dispatchInstances[i]); + } + } else if (dispatchListeners) { + executeDispatch(event, simulated, dispatchListeners, dispatchInstances); + } + event._dispatchListeners = null; + event._dispatchInstances = null; +} + +/** + * Standard/simple iteration through an event's collected dispatches, but stops + * at the first dispatch execution returning true, and returns that id. + * + * @return {?string} id of the first dispatch execution who's listener returns + * true, or null if no listener returned true. + */ +function executeDispatchesInOrderStopAtTrueImpl(event) { + var dispatchListeners = event._dispatchListeners; + var dispatchInstances = event._dispatchInstances; + if (process.env.NODE_ENV !== 'production') { + validateEventDispatches(event); + } + if (Array.isArray(dispatchListeners)) { + for (var i = 0; i < dispatchListeners.length; i++) { + if (event.isPropagationStopped()) { + break; + } + // Listeners and Instances are two parallel arrays that are always in sync. + if (dispatchListeners[i](event, dispatchInstances[i])) { + return dispatchInstances[i]; + } + } + } else if (dispatchListeners) { + if (dispatchListeners(event, dispatchInstances)) { + return dispatchInstances; + } + } + return null; +} + +/** + * @see executeDispatchesInOrderStopAtTrueImpl + */ +function executeDispatchesInOrderStopAtTrue(event) { + var ret = executeDispatchesInOrderStopAtTrueImpl(event); + event._dispatchInstances = null; + event._dispatchListeners = null; + return ret; +} + +/** + * Execution of a "direct" dispatch - there must be at most one dispatch + * accumulated on the event or it is considered an error. It doesn't really make + * sense for an event with multiple dispatches (bubbled) to keep track of the + * return values at each dispatch execution, but it does tend to make sense when + * dealing with "direct" dispatches. + * + * @return {*} The return value of executing the single dispatch. + */ +function executeDirectDispatch(event) { + if (process.env.NODE_ENV !== 'production') { + validateEventDispatches(event); + } + var dispatchListener = event._dispatchListeners; + var dispatchInstance = event._dispatchInstances; + !!Array.isArray(dispatchListener) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'executeDirectDispatch(...): Invalid `event`.') : _prodInvariant('103') : void 0; + event.currentTarget = dispatchListener ? EventPluginUtils.getNodeFromInstance(dispatchInstance) : null; + var res = dispatchListener ? dispatchListener(event) : null; + event.currentTarget = null; + event._dispatchListeners = null; + event._dispatchInstances = null; + return res; +} + +/** + * @param {SyntheticEvent} event + * @return {boolean} True iff number of dispatches accumulated is greater than 0. + */ +function hasDispatches(event) { + return !!event._dispatchListeners; +} + +/** + * General utilities that are useful in creating custom Event Plugins. + */ +var EventPluginUtils = { + isEndish: isEndish, + isMoveish: isMoveish, + isStartish: isStartish, + + executeDirectDispatch: executeDirectDispatch, + executeDispatchesInOrder: executeDispatchesInOrder, + executeDispatchesInOrderStopAtTrue: executeDispatchesInOrderStopAtTrue, + hasDispatches: hasDispatches, + + getInstanceFromNode: function (node) { + return ComponentTree.getInstanceFromNode(node); + }, + getNodeFromInstance: function (node) { + return ComponentTree.getNodeFromInstance(node); + }, + isAncestor: function (a, b) { + return TreeTraversal.isAncestor(a, b); + }, + getLowestCommonAncestor: function (a, b) { + return TreeTraversal.getLowestCommonAncestor(a, b); + }, + getParentInstance: function (inst) { + return TreeTraversal.getParentInstance(inst); + }, + traverseTwoPhase: function (target, fn, arg) { + return TreeTraversal.traverseTwoPhase(target, fn, arg); + }, + traverseEnterLeave: function (from, to, fn, argFrom, argTo) { + return TreeTraversal.traverseEnterLeave(from, to, fn, argFrom, argTo); + }, + + injection: injection +}; + +module.exports = EventPluginUtils; +}).call(this,require('_process')) +},{"./ReactErrorUtils":82,"./reactProdInvariant":148,"_process":25,"fbjs/lib/invariant":16,"fbjs/lib/warning":23}],48:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var EventPluginHub = require('./EventPluginHub'); +var EventPluginUtils = require('./EventPluginUtils'); + +var accumulateInto = require('./accumulateInto'); +var forEachAccumulated = require('./forEachAccumulated'); +var warning = require('fbjs/lib/warning'); + +var getListener = EventPluginHub.getListener; + +/** + * Some event types have a notion of different registration names for different + * "phases" of propagation. This finds listeners by a given phase. + */ +function listenerAtPhase(inst, event, propagationPhase) { + var registrationName = event.dispatchConfig.phasedRegistrationNames[propagationPhase]; + return getListener(inst, registrationName); +} + +/** + * Tags a `SyntheticEvent` with dispatched listeners. Creating this function + * here, allows us to not have to bind or create functions for each event. + * Mutating the event's members allows us to not have to create a wrapping + * "dispatch" object that pairs the event with the listener. + */ +function accumulateDirectionalDispatches(inst, phase, event) { + if (process.env.NODE_ENV !== 'production') { + process.env.NODE_ENV !== 'production' ? warning(inst, 'Dispatching inst must not be null') : void 0; + } + var listener = listenerAtPhase(inst, event, phase); + if (listener) { + event._dispatchListeners = accumulateInto(event._dispatchListeners, listener); + event._dispatchInstances = accumulateInto(event._dispatchInstances, inst); + } +} + +/** + * Collect dispatches (must be entirely collected before dispatching - see unit + * tests). Lazily allocate the array to conserve memory. We must loop through + * each event and perform the traversal for each one. We cannot perform a + * single traversal for the entire collection of events because each event may + * have a different target. + */ +function accumulateTwoPhaseDispatchesSingle(event) { + if (event && event.dispatchConfig.phasedRegistrationNames) { + EventPluginUtils.traverseTwoPhase(event._targetInst, accumulateDirectionalDispatches, event); + } +} + +/** + * Same as `accumulateTwoPhaseDispatchesSingle`, but skips over the targetID. + */ +function accumulateTwoPhaseDispatchesSingleSkipTarget(event) { + if (event && event.dispatchConfig.phasedRegistrationNames) { + var targetInst = event._targetInst; + var parentInst = targetInst ? EventPluginUtils.getParentInstance(targetInst) : null; + EventPluginUtils.traverseTwoPhase(parentInst, accumulateDirectionalDispatches, event); + } +} + +/** + * Accumulates without regard to direction, does not look for phased + * registration names. Same as `accumulateDirectDispatchesSingle` but without + * requiring that the `dispatchMarker` be the same as the dispatched ID. + */ +function accumulateDispatches(inst, ignoredDirection, event) { + if (event && event.dispatchConfig.registrationName) { + var registrationName = event.dispatchConfig.registrationName; + var listener = getListener(inst, registrationName); + if (listener) { + event._dispatchListeners = accumulateInto(event._dispatchListeners, listener); + event._dispatchInstances = accumulateInto(event._dispatchInstances, inst); + } + } +} + +/** + * Accumulates dispatches on an `SyntheticEvent`, but only for the + * `dispatchMarker`. + * @param {SyntheticEvent} event + */ +function accumulateDirectDispatchesSingle(event) { + if (event && event.dispatchConfig.registrationName) { + accumulateDispatches(event._targetInst, null, event); + } +} + +function accumulateTwoPhaseDispatches(events) { + forEachAccumulated(events, accumulateTwoPhaseDispatchesSingle); +} + +function accumulateTwoPhaseDispatchesSkipTarget(events) { + forEachAccumulated(events, accumulateTwoPhaseDispatchesSingleSkipTarget); +} + +function accumulateEnterLeaveDispatches(leave, enter, from, to) { + EventPluginUtils.traverseEnterLeave(from, to, accumulateDispatches, leave, enter); +} + +function accumulateDirectDispatches(events) { + forEachAccumulated(events, accumulateDirectDispatchesSingle); +} + +/** + * A small set of propagation patterns, each of which will accept a small amount + * of information, and generate a set of "dispatch ready event objects" - which + * are sets of events that have already been annotated with a set of dispatched + * listener functions/ids. The API is designed this way to discourage these + * propagation strategies from actually executing the dispatches, since we + * always want to collect the entire set of dispatches before executing event a + * single one. + * + * @constructor EventPropagators + */ +var EventPropagators = { + accumulateTwoPhaseDispatches: accumulateTwoPhaseDispatches, + accumulateTwoPhaseDispatchesSkipTarget: accumulateTwoPhaseDispatchesSkipTarget, + accumulateDirectDispatches: accumulateDirectDispatches, + accumulateEnterLeaveDispatches: accumulateEnterLeaveDispatches +}; + +module.exports = EventPropagators; +}).call(this,require('_process')) +},{"./EventPluginHub":45,"./EventPluginUtils":47,"./accumulateInto":126,"./forEachAccumulated":134,"_process":25,"fbjs/lib/warning":23}],49:[function(require,module,exports){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var _assign = require('object-assign'); + +var PooledClass = require('./PooledClass'); + +var getTextContentAccessor = require('./getTextContentAccessor'); + +/** + * This helper class stores information about text content of a target node, + * allowing comparison of content before and after a given event. + * + * Identify the node where selection currently begins, then observe + * both its text content and its current position in the DOM. Since the + * browser may natively replace the target node during composition, we can + * use its position to find its replacement. + * + * @param {DOMEventTarget} root + */ +function FallbackCompositionState(root) { + this._root = root; + this._startText = this.getText(); + this._fallbackText = null; +} + +_assign(FallbackCompositionState.prototype, { + destructor: function () { + this._root = null; + this._startText = null; + this._fallbackText = null; + }, + + /** + * Get current text of input. + * + * @return {string} + */ + getText: function () { + if ('value' in this._root) { + return this._root.value; + } + return this._root[getTextContentAccessor()]; + }, + + /** + * Determine the differing substring between the initially stored + * text content and the current content. + * + * @return {string} + */ + getData: function () { + if (this._fallbackText) { + return this._fallbackText; + } + + var start; + var startValue = this._startText; + var startLength = startValue.length; + var end; + var endValue = this.getText(); + var endLength = endValue.length; + + for (start = 0; start < startLength; start++) { + if (startValue[start] !== endValue[start]) { + break; + } + } + + var minEnd = startLength - start; + for (end = 1; end <= minEnd; end++) { + if (startValue[startLength - end] !== endValue[endLength - end]) { + break; + } + } + + var sliceTail = end > 1 ? 1 - end : undefined; + this._fallbackText = endValue.slice(start, sliceTail); + return this._fallbackText; + } +}); + +PooledClass.addPoolingTo(FallbackCompositionState); + +module.exports = FallbackCompositionState; +},{"./PooledClass":53,"./getTextContentAccessor":142,"object-assign":24}],50:[function(require,module,exports){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var DOMProperty = require('./DOMProperty'); + +var MUST_USE_PROPERTY = DOMProperty.injection.MUST_USE_PROPERTY; +var HAS_BOOLEAN_VALUE = DOMProperty.injection.HAS_BOOLEAN_VALUE; +var HAS_NUMERIC_VALUE = DOMProperty.injection.HAS_NUMERIC_VALUE; +var HAS_POSITIVE_NUMERIC_VALUE = DOMProperty.injection.HAS_POSITIVE_NUMERIC_VALUE; +var HAS_OVERLOADED_BOOLEAN_VALUE = DOMProperty.injection.HAS_OVERLOADED_BOOLEAN_VALUE; + +var HTMLDOMPropertyConfig = { + isCustomAttribute: RegExp.prototype.test.bind(new RegExp('^(data|aria)-[' + DOMProperty.ATTRIBUTE_NAME_CHAR + ']*$')), + Properties: { + /** + * Standard Properties + */ + accept: 0, + acceptCharset: 0, + accessKey: 0, + action: 0, + allowFullScreen: HAS_BOOLEAN_VALUE, + allowTransparency: 0, + alt: 0, + // specifies target context for links with `preload` type + as: 0, + async: HAS_BOOLEAN_VALUE, + autoComplete: 0, + // autoFocus is polyfilled/normalized by AutoFocusUtils + // autoFocus: HAS_BOOLEAN_VALUE, + autoPlay: HAS_BOOLEAN_VALUE, + capture: HAS_BOOLEAN_VALUE, + cellPadding: 0, + cellSpacing: 0, + charSet: 0, + challenge: 0, + checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, + cite: 0, + classID: 0, + className: 0, + cols: HAS_POSITIVE_NUMERIC_VALUE, + colSpan: 0, + content: 0, + contentEditable: 0, + contextMenu: 0, + controls: HAS_BOOLEAN_VALUE, + coords: 0, + crossOrigin: 0, + data: 0, // For `` acts as `src`. + dateTime: 0, + 'default': HAS_BOOLEAN_VALUE, + defer: HAS_BOOLEAN_VALUE, + dir: 0, + disabled: HAS_BOOLEAN_VALUE, + download: HAS_OVERLOADED_BOOLEAN_VALUE, + draggable: 0, + encType: 0, + form: 0, + formAction: 0, + formEncType: 0, + formMethod: 0, + formNoValidate: HAS_BOOLEAN_VALUE, + formTarget: 0, + frameBorder: 0, + headers: 0, + height: 0, + hidden: HAS_BOOLEAN_VALUE, + high: 0, + href: 0, + hrefLang: 0, + htmlFor: 0, + httpEquiv: 0, + icon: 0, + id: 0, + inputMode: 0, + integrity: 0, + is: 0, + keyParams: 0, + keyType: 0, + kind: 0, + label: 0, + lang: 0, + list: 0, + loop: HAS_BOOLEAN_VALUE, + low: 0, + manifest: 0, + marginHeight: 0, + marginWidth: 0, + max: 0, + maxLength: 0, + media: 0, + mediaGroup: 0, + method: 0, + min: 0, + minLength: 0, + // Caution; `option.selected` is not updated if `select.multiple` is + // disabled with `removeAttribute`. + multiple: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, + muted: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, + name: 0, + nonce: 0, + noValidate: HAS_BOOLEAN_VALUE, + open: HAS_BOOLEAN_VALUE, + optimum: 0, + pattern: 0, + placeholder: 0, + playsInline: HAS_BOOLEAN_VALUE, + poster: 0, + preload: 0, + profile: 0, + radioGroup: 0, + readOnly: HAS_BOOLEAN_VALUE, + referrerPolicy: 0, + rel: 0, + required: HAS_BOOLEAN_VALUE, + reversed: HAS_BOOLEAN_VALUE, + role: 0, + rows: HAS_POSITIVE_NUMERIC_VALUE, + rowSpan: HAS_NUMERIC_VALUE, + sandbox: 0, + scope: 0, + scoped: HAS_BOOLEAN_VALUE, + scrolling: 0, + seamless: HAS_BOOLEAN_VALUE, + selected: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, + shape: 0, + size: HAS_POSITIVE_NUMERIC_VALUE, + sizes: 0, + span: HAS_POSITIVE_NUMERIC_VALUE, + spellCheck: 0, + src: 0, + srcDoc: 0, + srcLang: 0, + srcSet: 0, + start: HAS_NUMERIC_VALUE, + step: 0, + style: 0, + summary: 0, + tabIndex: 0, + target: 0, + title: 0, + // Setting .type throws on non- tags + type: 0, + useMap: 0, + value: 0, + width: 0, + wmode: 0, + wrap: 0, + + /** + * RDFa Properties + */ + about: 0, + datatype: 0, + inlist: 0, + prefix: 0, + // property is also supported for OpenGraph in meta tags. + property: 0, + resource: 0, + 'typeof': 0, + vocab: 0, + + /** + * Non-standard Properties + */ + // autoCapitalize and autoCorrect are supported in Mobile Safari for + // keyboard hints. + autoCapitalize: 0, + autoCorrect: 0, + // autoSave allows WebKit/Blink to persist values of input fields on page reloads + autoSave: 0, + // color is for Safari mask-icon link + color: 0, + // itemProp, itemScope, itemType are for + // Microdata support. See http://schema.org/docs/gs.html + itemProp: 0, + itemScope: HAS_BOOLEAN_VALUE, + itemType: 0, + // itemID and itemRef are for Microdata support as well but + // only specified in the WHATWG spec document. See + // https://html.spec.whatwg.org/multipage/microdata.html#microdata-dom-api + itemID: 0, + itemRef: 0, + // results show looking glass icon and recent searches on input + // search fields in WebKit/Blink + results: 0, + // IE-only attribute that specifies security restrictions on an iframe + // as an alternative to the sandbox attribute on IE<10 + security: 0, + // IE-only attribute that controls focus behavior + unselectable: 0 + }, + DOMAttributeNames: { + acceptCharset: 'accept-charset', + className: 'class', + htmlFor: 'for', + httpEquiv: 'http-equiv' + }, + DOMPropertyNames: {}, + DOMMutationMethods: { + value: function (node, value) { + if (value == null) { + return node.removeAttribute('value'); + } + + // Number inputs get special treatment due to some edge cases in + // Chrome. Let everything else assign the value attribute as normal. + // https://github.com/facebook/react/issues/7253#issuecomment-236074326 + if (node.type !== 'number' || node.hasAttribute('value') === false) { + node.setAttribute('value', '' + value); + } else if (node.validity && !node.validity.badInput && node.ownerDocument.activeElement !== node) { + // Don't assign an attribute if validation reports bad + // input. Chrome will clear the value. Additionally, don't + // operate on inputs that have focus, otherwise Chrome might + // strip off trailing decimal places and cause the user's + // cursor position to jump to the beginning of the input. + // + // In ReactDOMInput, we have an onBlur event that will trigger + // this function again when focus is lost. + node.setAttribute('value', '' + value); + } + } + } +}; + +module.exports = HTMLDOMPropertyConfig; +},{"./DOMProperty":40}],51:[function(require,module,exports){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * + */ + +'use strict'; + +/** + * Escape and wrap key so it is safe to use as a reactid + * + * @param {string} key to be escaped. + * @return {string} the escaped key. + */ + +function escape(key) { + var escapeRegex = /[=:]/g; + var escaperLookup = { + '=': '=0', + ':': '=2' + }; + var escapedString = ('' + key).replace(escapeRegex, function (match) { + return escaperLookup[match]; + }); + + return '$' + escapedString; +} + +/** + * Unescape and unwrap key for human-readable display + * + * @param {string} key to unescape. + * @return {string} the unescaped key. + */ +function unescape(key) { + var unescapeRegex = /(=0|=2)/g; + var unescaperLookup = { + '=0': '=', + '=2': ':' + }; + var keySubstring = key[0] === '.' && key[1] === '$' ? key.substring(2) : key.substring(1); + + return ('' + keySubstring).replace(unescapeRegex, function (match) { + return unescaperLookup[match]; + }); +} + +var KeyEscapeUtils = { + escape: escape, + unescape: unescape +}; + +module.exports = KeyEscapeUtils; +},{}],52:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var _prodInvariant = require('./reactProdInvariant'); + +var ReactPropTypesSecret = require('./ReactPropTypesSecret'); +var propTypesFactory = require('prop-types/factory'); + +var React = require('react/lib/React'); +var PropTypes = propTypesFactory(React.isValidElement); + +var invariant = require('fbjs/lib/invariant'); +var warning = require('fbjs/lib/warning'); + +var hasReadOnlyValue = { + 'button': true, + 'checkbox': true, + 'image': true, + 'hidden': true, + 'radio': true, + 'reset': true, + 'submit': true +}; + +function _assertSingleLink(inputProps) { + !(inputProps.checkedLink == null || inputProps.valueLink == null) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Cannot provide a checkedLink and a valueLink. If you want to use checkedLink, you probably don\'t want to use valueLink and vice versa.') : _prodInvariant('87') : void 0; +} +function _assertValueLink(inputProps) { + _assertSingleLink(inputProps); + !(inputProps.value == null && inputProps.onChange == null) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Cannot provide a valueLink and a value or onChange event. If you want to use value or onChange, you probably don\'t want to use valueLink.') : _prodInvariant('88') : void 0; +} + +function _assertCheckedLink(inputProps) { + _assertSingleLink(inputProps); + !(inputProps.checked == null && inputProps.onChange == null) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Cannot provide a checkedLink and a checked property or onChange event. If you want to use checked or onChange, you probably don\'t want to use checkedLink') : _prodInvariant('89') : void 0; +} + +var propTypes = { + value: function (props, propName, componentName) { + if (!props[propName] || hasReadOnlyValue[props.type] || props.onChange || props.readOnly || props.disabled) { + return null; + } + return new Error('You provided a `value` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultValue`. Otherwise, ' + 'set either `onChange` or `readOnly`.'); + }, + checked: function (props, propName, componentName) { + if (!props[propName] || props.onChange || props.readOnly || props.disabled) { + return null; + } + return new Error('You provided a `checked` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultChecked`. Otherwise, ' + 'set either `onChange` or `readOnly`.'); + }, + onChange: PropTypes.func +}; + +var loggedTypeFailures = {}; +function getDeclarationErrorAddendum(owner) { + if (owner) { + var name = owner.getName(); + if (name) { + return ' Check the render method of `' + name + '`.'; + } + } + return ''; +} + +/** + * Provide a linked `value` attribute for controlled forms. You should not use + * this outside of the ReactDOM controlled form components. + */ +var LinkedValueUtils = { + checkPropTypes: function (tagName, props, owner) { + for (var propName in propTypes) { + if (propTypes.hasOwnProperty(propName)) { + var error = propTypes[propName](props, propName, tagName, 'prop', null, ReactPropTypesSecret); + } + if (error instanceof Error && !(error.message in loggedTypeFailures)) { + // Only monitor this failure once because there tends to be a lot of the + // same error. + loggedTypeFailures[error.message] = true; + + var addendum = getDeclarationErrorAddendum(owner); + process.env.NODE_ENV !== 'production' ? warning(false, 'Failed form propType: %s%s', error.message, addendum) : void 0; + } + } + }, + + /** + * @param {object} inputProps Props for form component + * @return {*} current value of the input either from value prop or link. + */ + getValue: function (inputProps) { + if (inputProps.valueLink) { + _assertValueLink(inputProps); + return inputProps.valueLink.value; + } + return inputProps.value; + }, + + /** + * @param {object} inputProps Props for form component + * @return {*} current checked status of the input either from checked prop + * or link. + */ + getChecked: function (inputProps) { + if (inputProps.checkedLink) { + _assertCheckedLink(inputProps); + return inputProps.checkedLink.value; + } + return inputProps.checked; + }, + + /** + * @param {object} inputProps Props for form component + * @param {SyntheticEvent} event change event to handle + */ + executeOnChange: function (inputProps, event) { + if (inputProps.valueLink) { + _assertValueLink(inputProps); + return inputProps.valueLink.requestChange(event.target.value); + } else if (inputProps.checkedLink) { + _assertCheckedLink(inputProps); + return inputProps.checkedLink.requestChange(event.target.checked); + } else if (inputProps.onChange) { + return inputProps.onChange.call(undefined, event); + } + } +}; + +module.exports = LinkedValueUtils; +}).call(this,require('_process')) +},{"./ReactPropTypesSecret":99,"./reactProdInvariant":148,"_process":25,"fbjs/lib/invariant":16,"fbjs/lib/warning":23,"prop-types/factory":27,"react/lib/React":157}],53:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * + */ + +'use strict'; + +var _prodInvariant = require('./reactProdInvariant'); + +var invariant = require('fbjs/lib/invariant'); + +/** + * Static poolers. Several custom versions for each potential number of + * arguments. A completely generic pooler is easy to implement, but would + * require accessing the `arguments` object. In each of these, `this` refers to + * the Class itself, not an instance. If any others are needed, simply add them + * here, or in their own files. + */ +var oneArgumentPooler = function (copyFieldsFrom) { + var Klass = this; + if (Klass.instancePool.length) { + var instance = Klass.instancePool.pop(); + Klass.call(instance, copyFieldsFrom); + return instance; + } else { + return new Klass(copyFieldsFrom); + } +}; + +var twoArgumentPooler = function (a1, a2) { + var Klass = this; + if (Klass.instancePool.length) { + var instance = Klass.instancePool.pop(); + Klass.call(instance, a1, a2); + return instance; + } else { + return new Klass(a1, a2); + } +}; + +var threeArgumentPooler = function (a1, a2, a3) { + var Klass = this; + if (Klass.instancePool.length) { + var instance = Klass.instancePool.pop(); + Klass.call(instance, a1, a2, a3); + return instance; + } else { + return new Klass(a1, a2, a3); + } +}; + +var fourArgumentPooler = function (a1, a2, a3, a4) { + var Klass = this; + if (Klass.instancePool.length) { + var instance = Klass.instancePool.pop(); + Klass.call(instance, a1, a2, a3, a4); + return instance; + } else { + return new Klass(a1, a2, a3, a4); + } +}; + +var standardReleaser = function (instance) { + var Klass = this; + !(instance instanceof Klass) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Trying to release an instance into a pool of a different type.') : _prodInvariant('25') : void 0; + instance.destructor(); + if (Klass.instancePool.length < Klass.poolSize) { + Klass.instancePool.push(instance); + } +}; + +var DEFAULT_POOL_SIZE = 10; +var DEFAULT_POOLER = oneArgumentPooler; + +/** + * Augments `CopyConstructor` to be a poolable class, augmenting only the class + * itself (statically) not adding any prototypical fields. Any CopyConstructor + * you give this may have a `poolSize` property, and will look for a + * prototypical `destructor` on instances. + * + * @param {Function} CopyConstructor Constructor that can be used to reset. + * @param {Function} pooler Customizable pooler. + */ +var addPoolingTo = function (CopyConstructor, pooler) { + // Casting as any so that flow ignores the actual implementation and trusts + // it to match the type we declared + var NewKlass = CopyConstructor; + NewKlass.instancePool = []; + NewKlass.getPooled = pooler || DEFAULT_POOLER; + if (!NewKlass.poolSize) { + NewKlass.poolSize = DEFAULT_POOL_SIZE; + } + NewKlass.release = standardReleaser; + return NewKlass; +}; + +var PooledClass = { + addPoolingTo: addPoolingTo, + oneArgumentPooler: oneArgumentPooler, + twoArgumentPooler: twoArgumentPooler, + threeArgumentPooler: threeArgumentPooler, + fourArgumentPooler: fourArgumentPooler +}; + +module.exports = PooledClass; +}).call(this,require('_process')) +},{"./reactProdInvariant":148,"_process":25,"fbjs/lib/invariant":16}],54:[function(require,module,exports){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var _assign = require('object-assign'); + +var EventPluginRegistry = require('./EventPluginRegistry'); +var ReactEventEmitterMixin = require('./ReactEventEmitterMixin'); +var ViewportMetrics = require('./ViewportMetrics'); + +var getVendorPrefixedEventName = require('./getVendorPrefixedEventName'); +var isEventSupported = require('./isEventSupported'); + +/** + * Summary of `ReactBrowserEventEmitter` event handling: + * + * - Top-level delegation is used to trap most native browser events. This + * may only occur in the main thread and is the responsibility of + * ReactEventListener, which is injected and can therefore support pluggable + * event sources. This is the only work that occurs in the main thread. + * + * - We normalize and de-duplicate events to account for browser quirks. This + * may be done in the worker thread. + * + * - Forward these native events (with the associated top-level type used to + * trap it) to `EventPluginHub`, which in turn will ask plugins if they want + * to extract any synthetic events. + * + * - The `EventPluginHub` will then process each event by annotating them with + * "dispatches", a sequence of listeners and IDs that care about that event. + * + * - The `EventPluginHub` then dispatches the events. + * + * Overview of React and the event system: + * + * +------------+ . + * | DOM | . + * +------------+ . + * | . + * v . + * +------------+ . + * | ReactEvent | . + * | Listener | . + * +------------+ . +-----------+ + * | . +--------+|SimpleEvent| + * | . | |Plugin | + * +-----|------+ . v +-----------+ + * | | | . +--------------+ +------------+ + * | +-----------.--->|EventPluginHub| | Event | + * | | . | | +-----------+ | Propagators| + * | ReactEvent | . | | |TapEvent | |------------| + * | Emitter | . | |<---+|Plugin | |other plugin| + * | | . | | +-----------+ | utilities | + * | +-----------.--->| | +------------+ + * | | | . +--------------+ + * +-----|------+ . ^ +-----------+ + * | . | |Enter/Leave| + * + . +-------+|Plugin | + * +-------------+ . +-----------+ + * | application | . + * |-------------| . + * | | . + * | | . + * +-------------+ . + * . + * React Core . General Purpose Event Plugin System + */ + +var hasEventPageXY; +var alreadyListeningTo = {}; +var isMonitoringScrollValue = false; +var reactTopListenersCounter = 0; + +// For events like 'submit' which don't consistently bubble (which we trap at a +// lower node than `document`), binding at `document` would cause duplicate +// events so we don't include them here +var topEventMapping = { + topAbort: 'abort', + topAnimationEnd: getVendorPrefixedEventName('animationend') || 'animationend', + topAnimationIteration: getVendorPrefixedEventName('animationiteration') || 'animationiteration', + topAnimationStart: getVendorPrefixedEventName('animationstart') || 'animationstart', + topBlur: 'blur', + topCanPlay: 'canplay', + topCanPlayThrough: 'canplaythrough', + topChange: 'change', + topClick: 'click', + topCompositionEnd: 'compositionend', + topCompositionStart: 'compositionstart', + topCompositionUpdate: 'compositionupdate', + topContextMenu: 'contextmenu', + topCopy: 'copy', + topCut: 'cut', + topDoubleClick: 'dblclick', + topDrag: 'drag', + topDragEnd: 'dragend', + topDragEnter: 'dragenter', + topDragExit: 'dragexit', + topDragLeave: 'dragleave', + topDragOver: 'dragover', + topDragStart: 'dragstart', + topDrop: 'drop', + topDurationChange: 'durationchange', + topEmptied: 'emptied', + topEncrypted: 'encrypted', + topEnded: 'ended', + topError: 'error', + topFocus: 'focus', + topInput: 'input', + topKeyDown: 'keydown', + topKeyPress: 'keypress', + topKeyUp: 'keyup', + topLoadedData: 'loadeddata', + topLoadedMetadata: 'loadedmetadata', + topLoadStart: 'loadstart', + topMouseDown: 'mousedown', + topMouseMove: 'mousemove', + topMouseOut: 'mouseout', + topMouseOver: 'mouseover', + topMouseUp: 'mouseup', + topPaste: 'paste', + topPause: 'pause', + topPlay: 'play', + topPlaying: 'playing', + topProgress: 'progress', + topRateChange: 'ratechange', + topScroll: 'scroll', + topSeeked: 'seeked', + topSeeking: 'seeking', + topSelectionChange: 'selectionchange', + topStalled: 'stalled', + topSuspend: 'suspend', + topTextInput: 'textInput', + topTimeUpdate: 'timeupdate', + topTouchCancel: 'touchcancel', + topTouchEnd: 'touchend', + topTouchMove: 'touchmove', + topTouchStart: 'touchstart', + topTransitionEnd: getVendorPrefixedEventName('transitionend') || 'transitionend', + topVolumeChange: 'volumechange', + topWaiting: 'waiting', + topWheel: 'wheel' +}; + +/** + * To ensure no conflicts with other potential React instances on the page + */ +var topListenersIDKey = '_reactListenersID' + String(Math.random()).slice(2); + +function getListeningForDocument(mountAt) { + // In IE8, `mountAt` is a host object and doesn't have `hasOwnProperty` + // directly. + if (!Object.prototype.hasOwnProperty.call(mountAt, topListenersIDKey)) { + mountAt[topListenersIDKey] = reactTopListenersCounter++; + alreadyListeningTo[mountAt[topListenersIDKey]] = {}; + } + return alreadyListeningTo[mountAt[topListenersIDKey]]; +} + +/** + * `ReactBrowserEventEmitter` is used to attach top-level event listeners. For + * example: + * + * EventPluginHub.putListener('myID', 'onClick', myFunction); + * + * This would allocate a "registration" of `('onClick', myFunction)` on 'myID'. + * + * @internal + */ +var ReactBrowserEventEmitter = _assign({}, ReactEventEmitterMixin, { + + /** + * Injectable event backend + */ + ReactEventListener: null, + + injection: { + /** + * @param {object} ReactEventListener + */ + injectReactEventListener: function (ReactEventListener) { + ReactEventListener.setHandleTopLevel(ReactBrowserEventEmitter.handleTopLevel); + ReactBrowserEventEmitter.ReactEventListener = ReactEventListener; + } + }, + + /** + * Sets whether or not any created callbacks should be enabled. + * + * @param {boolean} enabled True if callbacks should be enabled. + */ + setEnabled: function (enabled) { + if (ReactBrowserEventEmitter.ReactEventListener) { + ReactBrowserEventEmitter.ReactEventListener.setEnabled(enabled); + } + }, + + /** + * @return {boolean} True if callbacks are enabled. + */ + isEnabled: function () { + return !!(ReactBrowserEventEmitter.ReactEventListener && ReactBrowserEventEmitter.ReactEventListener.isEnabled()); + }, + + /** + * We listen for bubbled touch events on the document object. + * + * Firefox v8.01 (and possibly others) exhibited strange behavior when + * mounting `onmousemove` events at some node that was not the document + * element. The symptoms were that if your mouse is not moving over something + * contained within that mount point (for example on the background) the + * top-level listeners for `onmousemove` won't be called. However, if you + * register the `mousemove` on the document object, then it will of course + * catch all `mousemove`s. This along with iOS quirks, justifies restricting + * top-level listeners to the document object only, at least for these + * movement types of events and possibly all events. + * + * @see http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html + * + * Also, `keyup`/`keypress`/`keydown` do not bubble to the window on IE, but + * they bubble to document. + * + * @param {string} registrationName Name of listener (e.g. `onClick`). + * @param {object} contentDocumentHandle Document which owns the container + */ + listenTo: function (registrationName, contentDocumentHandle) { + var mountAt = contentDocumentHandle; + var isListening = getListeningForDocument(mountAt); + var dependencies = EventPluginRegistry.registrationNameDependencies[registrationName]; + + for (var i = 0; i < dependencies.length; i++) { + var dependency = dependencies[i]; + if (!(isListening.hasOwnProperty(dependency) && isListening[dependency])) { + if (dependency === 'topWheel') { + if (isEventSupported('wheel')) { + ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent('topWheel', 'wheel', mountAt); + } else if (isEventSupported('mousewheel')) { + ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent('topWheel', 'mousewheel', mountAt); + } else { + // Firefox needs to capture a different mouse scroll event. + // @see http://www.quirksmode.org/dom/events/tests/scroll.html + ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent('topWheel', 'DOMMouseScroll', mountAt); + } + } else if (dependency === 'topScroll') { + + if (isEventSupported('scroll', true)) { + ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent('topScroll', 'scroll', mountAt); + } else { + ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent('topScroll', 'scroll', ReactBrowserEventEmitter.ReactEventListener.WINDOW_HANDLE); + } + } else if (dependency === 'topFocus' || dependency === 'topBlur') { + + if (isEventSupported('focus', true)) { + ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent('topFocus', 'focus', mountAt); + ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent('topBlur', 'blur', mountAt); + } else if (isEventSupported('focusin')) { + // IE has `focusin` and `focusout` events which bubble. + // @see http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html + ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent('topFocus', 'focusin', mountAt); + ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent('topBlur', 'focusout', mountAt); + } + + // to make sure blur and focus event listeners are only attached once + isListening.topBlur = true; + isListening.topFocus = true; + } else if (topEventMapping.hasOwnProperty(dependency)) { + ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(dependency, topEventMapping[dependency], mountAt); + } + + isListening[dependency] = true; + } + } + }, + + trapBubbledEvent: function (topLevelType, handlerBaseName, handle) { + return ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(topLevelType, handlerBaseName, handle); + }, + + trapCapturedEvent: function (topLevelType, handlerBaseName, handle) { + return ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(topLevelType, handlerBaseName, handle); + }, + + /** + * Protect against document.createEvent() returning null + * Some popup blocker extensions appear to do this: + * https://github.com/facebook/react/issues/6887 + */ + supportsEventPageXY: function () { + if (!document.createEvent) { + return false; + } + var ev = document.createEvent('MouseEvent'); + return ev != null && 'pageX' in ev; + }, + + /** + * Listens to window scroll and resize events. We cache scroll values so that + * application code can access them without triggering reflows. + * + * ViewportMetrics is only used by SyntheticMouse/TouchEvent and only when + * pageX/pageY isn't supported (legacy browsers). + * + * NOTE: Scroll events do not bubble. + * + * @see http://www.quirksmode.org/dom/events/scroll.html + */ + ensureScrollValueMonitoring: function () { + if (hasEventPageXY === undefined) { + hasEventPageXY = ReactBrowserEventEmitter.supportsEventPageXY(); + } + if (!hasEventPageXY && !isMonitoringScrollValue) { + var refresh = ViewportMetrics.refreshScrollValues; + ReactBrowserEventEmitter.ReactEventListener.monitorScrollValue(refresh); + isMonitoringScrollValue = true; + } + } + +}); + +module.exports = ReactBrowserEventEmitter; +},{"./EventPluginRegistry":46,"./ReactEventEmitterMixin":83,"./ViewportMetrics":125,"./getVendorPrefixedEventName":143,"./isEventSupported":145,"object-assign":24}],55:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2014-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var ReactReconciler = require('./ReactReconciler'); + +var instantiateReactComponent = require('./instantiateReactComponent'); +var KeyEscapeUtils = require('./KeyEscapeUtils'); +var shouldUpdateReactComponent = require('./shouldUpdateReactComponent'); +var traverseAllChildren = require('./traverseAllChildren'); +var warning = require('fbjs/lib/warning'); + +var ReactComponentTreeHook; + +if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'test') { + // Temporary hack. + // Inline requires don't work well with Jest: + // https://github.com/facebook/react/issues/7240 + // Remove the inline requires when we don't need them anymore: + // https://github.com/facebook/react/pull/7178 + ReactComponentTreeHook = require('react/lib/ReactComponentTreeHook'); +} + +function instantiateChild(childInstances, child, name, selfDebugID) { + // We found a component instance. + var keyUnique = childInstances[name] === undefined; + if (process.env.NODE_ENV !== 'production') { + if (!ReactComponentTreeHook) { + ReactComponentTreeHook = require('react/lib/ReactComponentTreeHook'); + } + if (!keyUnique) { + process.env.NODE_ENV !== 'production' ? warning(false, 'flattenChildren(...): Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, only ' + 'the first child will be used.%s', KeyEscapeUtils.unescape(name), ReactComponentTreeHook.getStackAddendumByID(selfDebugID)) : void 0; + } + } + if (child != null && keyUnique) { + childInstances[name] = instantiateReactComponent(child, true); + } +} + +/** + * ReactChildReconciler provides helpers for initializing or updating a set of + * children. Its output is suitable for passing it onto ReactMultiChild which + * does diffed reordering and insertion. + */ +var ReactChildReconciler = { + /** + * Generates a "mount image" for each of the supplied children. In the case + * of `ReactDOMComponent`, a mount image is a string of markup. + * + * @param {?object} nestedChildNodes Nested child maps. + * @return {?object} A set of child instances. + * @internal + */ + instantiateChildren: function (nestedChildNodes, transaction, context, selfDebugID // 0 in production and for roots + ) { + if (nestedChildNodes == null) { + return null; + } + var childInstances = {}; + + if (process.env.NODE_ENV !== 'production') { + traverseAllChildren(nestedChildNodes, function (childInsts, child, name) { + return instantiateChild(childInsts, child, name, selfDebugID); + }, childInstances); + } else { + traverseAllChildren(nestedChildNodes, instantiateChild, childInstances); + } + return childInstances; + }, + + /** + * Updates the rendered children and returns a new set of children. + * + * @param {?object} prevChildren Previously initialized set of children. + * @param {?object} nextChildren Flat child element maps. + * @param {ReactReconcileTransaction} transaction + * @param {object} context + * @return {?object} A new set of child instances. + * @internal + */ + updateChildren: function (prevChildren, nextChildren, mountImages, removedNodes, transaction, hostParent, hostContainerInfo, context, selfDebugID // 0 in production and for roots + ) { + // We currently don't have a way to track moves here but if we use iterators + // instead of for..in we can zip the iterators and check if an item has + // moved. + // TODO: If nothing has changed, return the prevChildren object so that we + // can quickly bailout if nothing has changed. + if (!nextChildren && !prevChildren) { + return; + } + var name; + var prevChild; + for (name in nextChildren) { + if (!nextChildren.hasOwnProperty(name)) { + continue; + } + prevChild = prevChildren && prevChildren[name]; + var prevElement = prevChild && prevChild._currentElement; + var nextElement = nextChildren[name]; + if (prevChild != null && shouldUpdateReactComponent(prevElement, nextElement)) { + ReactReconciler.receiveComponent(prevChild, nextElement, transaction, context); + nextChildren[name] = prevChild; + } else { + if (prevChild) { + removedNodes[name] = ReactReconciler.getHostNode(prevChild); + ReactReconciler.unmountComponent(prevChild, false); + } + // The child must be instantiated before it's mounted. + var nextChildInstance = instantiateReactComponent(nextElement, true); + nextChildren[name] = nextChildInstance; + // Creating mount image now ensures refs are resolved in right order + // (see https://github.com/facebook/react/pull/7101 for explanation). + var nextChildMountImage = ReactReconciler.mountComponent(nextChildInstance, transaction, hostParent, hostContainerInfo, context, selfDebugID); + mountImages.push(nextChildMountImage); + } + } + // Unmount children that are no longer present. + for (name in prevChildren) { + if (prevChildren.hasOwnProperty(name) && !(nextChildren && nextChildren.hasOwnProperty(name))) { + prevChild = prevChildren[name]; + removedNodes[name] = ReactReconciler.getHostNode(prevChild); + ReactReconciler.unmountComponent(prevChild, false); + } + } + }, + + /** + * Unmounts all rendered children. This should be used to clean up children + * when this component is unmounted. + * + * @param {?object} renderedChildren Previously initialized set of children. + * @internal + */ + unmountChildren: function (renderedChildren, safely) { + for (var name in renderedChildren) { + if (renderedChildren.hasOwnProperty(name)) { + var renderedChild = renderedChildren[name]; + ReactReconciler.unmountComponent(renderedChild, safely); + } + } + } + +}; + +module.exports = ReactChildReconciler; +}).call(this,require('_process')) +},{"./KeyEscapeUtils":51,"./ReactReconciler":101,"./instantiateReactComponent":144,"./shouldUpdateReactComponent":152,"./traverseAllChildren":153,"_process":25,"fbjs/lib/warning":23,"react/lib/ReactComponentTreeHook":161}],56:[function(require,module,exports){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var DOMChildrenOperations = require('./DOMChildrenOperations'); +var ReactDOMIDOperations = require('./ReactDOMIDOperations'); + +/** + * Abstracts away all functionality of the reconciler that requires knowledge of + * the browser context. TODO: These callers should be refactored to avoid the + * need for this injection. + */ +var ReactComponentBrowserEnvironment = { + + processChildrenUpdates: ReactDOMIDOperations.dangerouslyProcessChildrenUpdates, + + replaceNodeWithMarkup: DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup + +}; + +module.exports = ReactComponentBrowserEnvironment; +},{"./DOMChildrenOperations":37,"./ReactDOMIDOperations":66}],57:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2014-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * + */ + +'use strict'; + +var _prodInvariant = require('./reactProdInvariant'); + +var invariant = require('fbjs/lib/invariant'); + +var injected = false; + +var ReactComponentEnvironment = { + + /** + * Optionally injectable hook for swapping out mount images in the middle of + * the tree. + */ + replaceNodeWithMarkup: null, + + /** + * Optionally injectable hook for processing a queue of child updates. Will + * later move into MultiChildComponents. + */ + processChildrenUpdates: null, + + injection: { + injectEnvironment: function (environment) { + !!injected ? process.env.NODE_ENV !== 'production' ? invariant(false, 'ReactCompositeComponent: injectEnvironment() can only be called once.') : _prodInvariant('104') : void 0; + ReactComponentEnvironment.replaceNodeWithMarkup = environment.replaceNodeWithMarkup; + ReactComponentEnvironment.processChildrenUpdates = environment.processChildrenUpdates; + injected = true; + } + } + +}; + +module.exports = ReactComponentEnvironment; +}).call(this,require('_process')) +},{"./reactProdInvariant":148,"_process":25,"fbjs/lib/invariant":16}],58:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var _prodInvariant = require('./reactProdInvariant'), + _assign = require('object-assign'); + +var React = require('react/lib/React'); +var ReactComponentEnvironment = require('./ReactComponentEnvironment'); +var ReactCurrentOwner = require('react/lib/ReactCurrentOwner'); +var ReactErrorUtils = require('./ReactErrorUtils'); +var ReactInstanceMap = require('./ReactInstanceMap'); +var ReactInstrumentation = require('./ReactInstrumentation'); +var ReactNodeTypes = require('./ReactNodeTypes'); +var ReactReconciler = require('./ReactReconciler'); + +if (process.env.NODE_ENV !== 'production') { + var checkReactTypeSpec = require('./checkReactTypeSpec'); +} + +var emptyObject = require('fbjs/lib/emptyObject'); +var invariant = require('fbjs/lib/invariant'); +var shallowEqual = require('fbjs/lib/shallowEqual'); +var shouldUpdateReactComponent = require('./shouldUpdateReactComponent'); +var warning = require('fbjs/lib/warning'); + +var CompositeTypes = { + ImpureClass: 0, + PureClass: 1, + StatelessFunctional: 2 +}; + +function StatelessComponent(Component) {} +StatelessComponent.prototype.render = function () { + var Component = ReactInstanceMap.get(this)._currentElement.type; + var element = Component(this.props, this.context, this.updater); + warnIfInvalidElement(Component, element); + return element; +}; + +function warnIfInvalidElement(Component, element) { + if (process.env.NODE_ENV !== 'production') { + process.env.NODE_ENV !== 'production' ? warning(element === null || element === false || React.isValidElement(element), '%s(...): A valid React element (or null) must be returned. You may have ' + 'returned undefined, an array or some other invalid object.', Component.displayName || Component.name || 'Component') : void 0; + process.env.NODE_ENV !== 'production' ? warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component') : void 0; + } +} + +function shouldConstruct(Component) { + return !!(Component.prototype && Component.prototype.isReactComponent); +} + +function isPureComponent(Component) { + return !!(Component.prototype && Component.prototype.isPureReactComponent); +} + +// Separated into a function to contain deoptimizations caused by try/finally. +function measureLifeCyclePerf(fn, debugID, timerType) { + if (debugID === 0) { + // Top-level wrappers (see ReactMount) and empty components (see + // ReactDOMEmptyComponent) are invisible to hooks and devtools. + // Both are implementation details that should go away in the future. + return fn(); + } + + ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID, timerType); + try { + return fn(); + } finally { + ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID, timerType); + } +} + +/** + * ------------------ The Life-Cycle of a Composite Component ------------------ + * + * - constructor: Initialization of state. The instance is now retained. + * - componentWillMount + * - render + * - [children's constructors] + * - [children's componentWillMount and render] + * - [children's componentDidMount] + * - componentDidMount + * + * Update Phases: + * - componentWillReceiveProps (only called if parent updated) + * - shouldComponentUpdate + * - componentWillUpdate + * - render + * - [children's constructors or receive props phases] + * - componentDidUpdate + * + * - componentWillUnmount + * - [children's componentWillUnmount] + * - [children destroyed] + * - (destroyed): The instance is now blank, released by React and ready for GC. + * + * ----------------------------------------------------------------------------- + */ + +/** + * An incrementing ID assigned to each component when it is mounted. This is + * used to enforce the order in which `ReactUpdates` updates dirty components. + * + * @private + */ +var nextMountID = 1; + +/** + * @lends {ReactCompositeComponent.prototype} + */ +var ReactCompositeComponent = { + + /** + * Base constructor for all composite component. + * + * @param {ReactElement} element + * @final + * @internal + */ + construct: function (element) { + this._currentElement = element; + this._rootNodeID = 0; + this._compositeType = null; + this._instance = null; + this._hostParent = null; + this._hostContainerInfo = null; + + // See ReactUpdateQueue + this._updateBatchNumber = null; + this._pendingElement = null; + this._pendingStateQueue = null; + this._pendingReplaceState = false; + this._pendingForceUpdate = false; + + this._renderedNodeType = null; + this._renderedComponent = null; + this._context = null; + this._mountOrder = 0; + this._topLevelWrapper = null; + + // See ReactUpdates and ReactUpdateQueue. + this._pendingCallbacks = null; + + // ComponentWillUnmount shall only be called once + this._calledComponentWillUnmount = false; + + if (process.env.NODE_ENV !== 'production') { + this._warnedAboutRefsInRender = false; + } + }, + + /** + * Initializes the component, renders markup, and registers event listeners. + * + * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction + * @param {?object} hostParent + * @param {?object} hostContainerInfo + * @param {?object} context + * @return {?string} Rendered markup to be inserted into the DOM. + * @final + * @internal + */ + mountComponent: function (transaction, hostParent, hostContainerInfo, context) { + var _this = this; + + this._context = context; + this._mountOrder = nextMountID++; + this._hostParent = hostParent; + this._hostContainerInfo = hostContainerInfo; + + var publicProps = this._currentElement.props; + var publicContext = this._processContext(context); + + var Component = this._currentElement.type; + + var updateQueue = transaction.getUpdateQueue(); + + // Initialize the public class + var doConstruct = shouldConstruct(Component); + var inst = this._constructComponent(doConstruct, publicProps, publicContext, updateQueue); + var renderedElement; + + // Support functional components + if (!doConstruct && (inst == null || inst.render == null)) { + renderedElement = inst; + warnIfInvalidElement(Component, renderedElement); + !(inst === null || inst === false || React.isValidElement(inst)) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.', Component.displayName || Component.name || 'Component') : _prodInvariant('105', Component.displayName || Component.name || 'Component') : void 0; + inst = new StatelessComponent(Component); + this._compositeType = CompositeTypes.StatelessFunctional; + } else { + if (isPureComponent(Component)) { + this._compositeType = CompositeTypes.PureClass; + } else { + this._compositeType = CompositeTypes.ImpureClass; + } + } + + if (process.env.NODE_ENV !== 'production') { + // This will throw later in _renderValidatedComponent, but add an early + // warning now to help debugging + if (inst.render == null) { + process.env.NODE_ENV !== 'production' ? warning(false, '%s(...): No `render` method found on the returned component ' + 'instance: you may have forgotten to define `render`.', Component.displayName || Component.name || 'Component') : void 0; + } + + var propsMutated = inst.props !== publicProps; + var componentName = Component.displayName || Component.name || 'Component'; + + process.env.NODE_ENV !== 'production' ? warning(inst.props === undefined || !propsMutated, '%s(...): When calling super() in `%s`, make sure to pass ' + 'up the same props that your component\'s constructor was passed.', componentName, componentName) : void 0; + } + + // These should be set up in the constructor, but as a convenience for + // simpler class abstractions, we set them up after the fact. + inst.props = publicProps; + inst.context = publicContext; + inst.refs = emptyObject; + inst.updater = updateQueue; + + this._instance = inst; + + // Store a reference from the instance back to the internal representation + ReactInstanceMap.set(inst, this); + + if (process.env.NODE_ENV !== 'production') { + // Since plain JS classes are defined without any special initialization + // logic, we can not catch common errors early. Therefore, we have to + // catch them here, at initialization time, instead. + process.env.NODE_ENV !== 'production' ? warning(!inst.getInitialState || inst.getInitialState.isReactClassApproved || inst.state, 'getInitialState was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Did you mean to define a state property instead?', this.getName() || 'a component') : void 0; + process.env.NODE_ENV !== 'production' ? warning(!inst.getDefaultProps || inst.getDefaultProps.isReactClassApproved, 'getDefaultProps was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Use a static property to define defaultProps instead.', this.getName() || 'a component') : void 0; + process.env.NODE_ENV !== 'production' ? warning(!inst.propTypes, 'propTypes was defined as an instance property on %s. Use a static ' + 'property to define propTypes instead.', this.getName() || 'a component') : void 0; + process.env.NODE_ENV !== 'production' ? warning(!inst.contextTypes, 'contextTypes was defined as an instance property on %s. Use a ' + 'static property to define contextTypes instead.', this.getName() || 'a component') : void 0; + process.env.NODE_ENV !== 'production' ? warning(typeof inst.componentShouldUpdate !== 'function', '%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', this.getName() || 'A component') : void 0; + process.env.NODE_ENV !== 'production' ? warning(typeof inst.componentDidUnmount !== 'function', '%s has a method called ' + 'componentDidUnmount(). But there is no such lifecycle method. ' + 'Did you mean componentWillUnmount()?', this.getName() || 'A component') : void 0; + process.env.NODE_ENV !== 'production' ? warning(typeof inst.componentWillRecieveProps !== 'function', '%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', this.getName() || 'A component') : void 0; + } + + var initialState = inst.state; + if (initialState === undefined) { + inst.state = initialState = null; + } + !(typeof initialState === 'object' && !Array.isArray(initialState)) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s.state: must be set to an object or null', this.getName() || 'ReactCompositeComponent') : _prodInvariant('106', this.getName() || 'ReactCompositeComponent') : void 0; + + this._pendingStateQueue = null; + this._pendingReplaceState = false; + this._pendingForceUpdate = false; + + var markup; + if (inst.unstable_handleError) { + markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context); + } else { + markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context); + } + + if (inst.componentDidMount) { + if (process.env.NODE_ENV !== 'production') { + transaction.getReactMountReady().enqueue(function () { + measureLifeCyclePerf(function () { + return inst.componentDidMount(); + }, _this._debugID, 'componentDidMount'); + }); + } else { + transaction.getReactMountReady().enqueue(inst.componentDidMount, inst); + } + } + + return markup; + }, + + _constructComponent: function (doConstruct, publicProps, publicContext, updateQueue) { + if (process.env.NODE_ENV !== 'production') { + ReactCurrentOwner.current = this; + try { + return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue); + } finally { + ReactCurrentOwner.current = null; + } + } else { + return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue); + } + }, + + _constructComponentWithoutOwner: function (doConstruct, publicProps, publicContext, updateQueue) { + var Component = this._currentElement.type; + + if (doConstruct) { + if (process.env.NODE_ENV !== 'production') { + return measureLifeCyclePerf(function () { + return new Component(publicProps, publicContext, updateQueue); + }, this._debugID, 'ctor'); + } else { + return new Component(publicProps, publicContext, updateQueue); + } + } + + // This can still be an instance in case of factory components + // but we'll count this as time spent rendering as the more common case. + if (process.env.NODE_ENV !== 'production') { + return measureLifeCyclePerf(function () { + return Component(publicProps, publicContext, updateQueue); + }, this._debugID, 'render'); + } else { + return Component(publicProps, publicContext, updateQueue); + } + }, + + performInitialMountWithErrorHandling: function (renderedElement, hostParent, hostContainerInfo, transaction, context) { + var markup; + var checkpoint = transaction.checkpoint(); + try { + markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context); + } catch (e) { + // Roll back to checkpoint, handle error (which may add items to the transaction), and take a new checkpoint + transaction.rollback(checkpoint); + this._instance.unstable_handleError(e); + if (this._pendingStateQueue) { + this._instance.state = this._processPendingState(this._instance.props, this._instance.context); + } + checkpoint = transaction.checkpoint(); + + this._renderedComponent.unmountComponent(true); + transaction.rollback(checkpoint); + + // Try again - we've informed the component about the error, so they can render an error message this time. + // If this throws again, the error will bubble up (and can be caught by a higher error boundary). + markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context); + } + return markup; + }, + + performInitialMount: function (renderedElement, hostParent, hostContainerInfo, transaction, context) { + var inst = this._instance; + + var debugID = 0; + if (process.env.NODE_ENV !== 'production') { + debugID = this._debugID; + } + + if (inst.componentWillMount) { + if (process.env.NODE_ENV !== 'production') { + measureLifeCyclePerf(function () { + return inst.componentWillMount(); + }, debugID, 'componentWillMount'); + } else { + inst.componentWillMount(); + } + // When mounting, calls to `setState` by `componentWillMount` will set + // `this._pendingStateQueue` without triggering a re-render. + if (this._pendingStateQueue) { + inst.state = this._processPendingState(inst.props, inst.context); + } + } + + // If not a stateless component, we now render + if (renderedElement === undefined) { + renderedElement = this._renderValidatedComponent(); + } + + var nodeType = ReactNodeTypes.getType(renderedElement); + this._renderedNodeType = nodeType; + var child = this._instantiateReactComponent(renderedElement, nodeType !== ReactNodeTypes.EMPTY /* shouldHaveDebugID */ + ); + this._renderedComponent = child; + + var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID); + + if (process.env.NODE_ENV !== 'production') { + if (debugID !== 0) { + var childDebugIDs = child._debugID !== 0 ? [child._debugID] : []; + ReactInstrumentation.debugTool.onSetChildren(debugID, childDebugIDs); + } + } + + return markup; + }, + + getHostNode: function () { + return ReactReconciler.getHostNode(this._renderedComponent); + }, + + /** + * Releases any resources allocated by `mountComponent`. + * + * @final + * @internal + */ + unmountComponent: function (safely) { + if (!this._renderedComponent) { + return; + } + + var inst = this._instance; + + if (inst.componentWillUnmount && !inst._calledComponentWillUnmount) { + inst._calledComponentWillUnmount = true; + + if (safely) { + var name = this.getName() + '.componentWillUnmount()'; + ReactErrorUtils.invokeGuardedCallback(name, inst.componentWillUnmount.bind(inst)); + } else { + if (process.env.NODE_ENV !== 'production') { + measureLifeCyclePerf(function () { + return inst.componentWillUnmount(); + }, this._debugID, 'componentWillUnmount'); + } else { + inst.componentWillUnmount(); + } + } + } + + if (this._renderedComponent) { + ReactReconciler.unmountComponent(this._renderedComponent, safely); + this._renderedNodeType = null; + this._renderedComponent = null; + this._instance = null; + } + + // Reset pending fields + // Even if this component is scheduled for another update in ReactUpdates, + // it would still be ignored because these fields are reset. + this._pendingStateQueue = null; + this._pendingReplaceState = false; + this._pendingForceUpdate = false; + this._pendingCallbacks = null; + this._pendingElement = null; + + // These fields do not really need to be reset since this object is no + // longer accessible. + this._context = null; + this._rootNodeID = 0; + this._topLevelWrapper = null; + + // Delete the reference from the instance to this internal representation + // which allow the internals to be properly cleaned up even if the user + // leaks a reference to the public instance. + ReactInstanceMap.remove(inst); + + // Some existing components rely on inst.props even after they've been + // destroyed (in event handlers). + // TODO: inst.props = null; + // TODO: inst.state = null; + // TODO: inst.context = null; + }, + + /** + * Filters the context object to only contain keys specified in + * `contextTypes` + * + * @param {object} context + * @return {?object} + * @private + */ + _maskContext: function (context) { + var Component = this._currentElement.type; + var contextTypes = Component.contextTypes; + if (!contextTypes) { + return emptyObject; + } + var maskedContext = {}; + for (var contextName in contextTypes) { + maskedContext[contextName] = context[contextName]; + } + return maskedContext; + }, + + /** + * Filters the context object to only contain keys specified in + * `contextTypes`, and asserts that they are valid. + * + * @param {object} context + * @return {?object} + * @private + */ + _processContext: function (context) { + var maskedContext = this._maskContext(context); + if (process.env.NODE_ENV !== 'production') { + var Component = this._currentElement.type; + if (Component.contextTypes) { + this._checkContextTypes(Component.contextTypes, maskedContext, 'context'); + } + } + return maskedContext; + }, + + /** + * @param {object} currentContext + * @return {object} + * @private + */ + _processChildContext: function (currentContext) { + var Component = this._currentElement.type; + var inst = this._instance; + var childContext; + + if (inst.getChildContext) { + if (process.env.NODE_ENV !== 'production') { + ReactInstrumentation.debugTool.onBeginProcessingChildContext(); + try { + childContext = inst.getChildContext(); + } finally { + ReactInstrumentation.debugTool.onEndProcessingChildContext(); + } + } else { + childContext = inst.getChildContext(); + } + } + + if (childContext) { + !(typeof Component.childContextTypes === 'object') ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s.getChildContext(): childContextTypes must be defined in order to use getChildContext().', this.getName() || 'ReactCompositeComponent') : _prodInvariant('107', this.getName() || 'ReactCompositeComponent') : void 0; + if (process.env.NODE_ENV !== 'production') { + this._checkContextTypes(Component.childContextTypes, childContext, 'child context'); + } + for (var name in childContext) { + !(name in Component.childContextTypes) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', this.getName() || 'ReactCompositeComponent', name) : _prodInvariant('108', this.getName() || 'ReactCompositeComponent', name) : void 0; + } + return _assign({}, currentContext, childContext); + } + return currentContext; + }, + + /** + * Assert that the context types are valid + * + * @param {object} typeSpecs Map of context field to a ReactPropType + * @param {object} values Runtime values that need to be type-checked + * @param {string} location e.g. "prop", "context", "child context" + * @private + */ + _checkContextTypes: function (typeSpecs, values, location) { + if (process.env.NODE_ENV !== 'production') { + checkReactTypeSpec(typeSpecs, values, location, this.getName(), null, this._debugID); + } + }, + + receiveComponent: function (nextElement, transaction, nextContext) { + var prevElement = this._currentElement; + var prevContext = this._context; + + this._pendingElement = null; + + this.updateComponent(transaction, prevElement, nextElement, prevContext, nextContext); + }, + + /** + * If any of `_pendingElement`, `_pendingStateQueue`, or `_pendingForceUpdate` + * is set, update the component. + * + * @param {ReactReconcileTransaction} transaction + * @internal + */ + performUpdateIfNecessary: function (transaction) { + if (this._pendingElement != null) { + ReactReconciler.receiveComponent(this, this._pendingElement, transaction, this._context); + } else if (this._pendingStateQueue !== null || this._pendingForceUpdate) { + this.updateComponent(transaction, this._currentElement, this._currentElement, this._context, this._context); + } else { + this._updateBatchNumber = null; + } + }, + + /** + * Perform an update to a mounted component. The componentWillReceiveProps and + * shouldComponentUpdate methods are called, then (assuming the update isn't + * skipped) the remaining update lifecycle methods are called and the DOM + * representation is updated. + * + * By default, this implements React's rendering and reconciliation algorithm. + * Sophisticated clients may wish to override this. + * + * @param {ReactReconcileTransaction} transaction + * @param {ReactElement} prevParentElement + * @param {ReactElement} nextParentElement + * @internal + * @overridable + */ + updateComponent: function (transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext) { + var inst = this._instance; + !(inst != null) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Attempted to update component `%s` that has already been unmounted (or failed to mount).', this.getName() || 'ReactCompositeComponent') : _prodInvariant('136', this.getName() || 'ReactCompositeComponent') : void 0; + + var willReceive = false; + var nextContext; + + // Determine if the context has changed or not + if (this._context === nextUnmaskedContext) { + nextContext = inst.context; + } else { + nextContext = this._processContext(nextUnmaskedContext); + willReceive = true; + } + + var prevProps = prevParentElement.props; + var nextProps = nextParentElement.props; + + // Not a simple state update but a props update + if (prevParentElement !== nextParentElement) { + willReceive = true; + } + + // An update here will schedule an update but immediately set + // _pendingStateQueue which will ensure that any state updates gets + // immediately reconciled instead of waiting for the next batch. + if (willReceive && inst.componentWillReceiveProps) { + if (process.env.NODE_ENV !== 'production') { + measureLifeCyclePerf(function () { + return inst.componentWillReceiveProps(nextProps, nextContext); + }, this._debugID, 'componentWillReceiveProps'); + } else { + inst.componentWillReceiveProps(nextProps, nextContext); + } + } + + var nextState = this._processPendingState(nextProps, nextContext); + var shouldUpdate = true; + + if (!this._pendingForceUpdate) { + if (inst.shouldComponentUpdate) { + if (process.env.NODE_ENV !== 'production') { + shouldUpdate = measureLifeCyclePerf(function () { + return inst.shouldComponentUpdate(nextProps, nextState, nextContext); + }, this._debugID, 'shouldComponentUpdate'); + } else { + shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext); + } + } else { + if (this._compositeType === CompositeTypes.PureClass) { + shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEqual(inst.state, nextState); + } + } + } + + if (process.env.NODE_ENV !== 'production') { + process.env.NODE_ENV !== 'production' ? warning(shouldUpdate !== undefined, '%s.shouldComponentUpdate(): Returned undefined instead of a ' + 'boolean value. Make sure to return true or false.', this.getName() || 'ReactCompositeComponent') : void 0; + } + + this._updateBatchNumber = null; + if (shouldUpdate) { + this._pendingForceUpdate = false; + // Will set `this.props`, `this.state` and `this.context`. + this._performComponentUpdate(nextParentElement, nextProps, nextState, nextContext, transaction, nextUnmaskedContext); + } else { + // If it's determined that a component should not update, we still want + // to set props and state but we shortcut the rest of the update. + this._currentElement = nextParentElement; + this._context = nextUnmaskedContext; + inst.props = nextProps; + inst.state = nextState; + inst.context = nextContext; + } + }, + + _processPendingState: function (props, context) { + var inst = this._instance; + var queue = this._pendingStateQueue; + var replace = this._pendingReplaceState; + this._pendingReplaceState = false; + this._pendingStateQueue = null; + + if (!queue) { + return inst.state; + } + + if (replace && queue.length === 1) { + return queue[0]; + } + + var nextState = _assign({}, replace ? queue[0] : inst.state); + for (var i = replace ? 1 : 0; i < queue.length; i++) { + var partial = queue[i]; + _assign(nextState, typeof partial === 'function' ? partial.call(inst, nextState, props, context) : partial); + } + + return nextState; + }, + + /** + * Merges new props and state, notifies delegate methods of update and + * performs update. + * + * @param {ReactElement} nextElement Next element + * @param {object} nextProps Next public object to set as properties. + * @param {?object} nextState Next object to set as state. + * @param {?object} nextContext Next public object to set as context. + * @param {ReactReconcileTransaction} transaction + * @param {?object} unmaskedContext + * @private + */ + _performComponentUpdate: function (nextElement, nextProps, nextState, nextContext, transaction, unmaskedContext) { + var _this2 = this; + + var inst = this._instance; + + var hasComponentDidUpdate = Boolean(inst.componentDidUpdate); + var prevProps; + var prevState; + var prevContext; + if (hasComponentDidUpdate) { + prevProps = inst.props; + prevState = inst.state; + prevContext = inst.context; + } + + if (inst.componentWillUpdate) { + if (process.env.NODE_ENV !== 'production') { + measureLifeCyclePerf(function () { + return inst.componentWillUpdate(nextProps, nextState, nextContext); + }, this._debugID, 'componentWillUpdate'); + } else { + inst.componentWillUpdate(nextProps, nextState, nextContext); + } + } + + this._currentElement = nextElement; + this._context = unmaskedContext; + inst.props = nextProps; + inst.state = nextState; + inst.context = nextContext; + + this._updateRenderedComponent(transaction, unmaskedContext); + + if (hasComponentDidUpdate) { + if (process.env.NODE_ENV !== 'production') { + transaction.getReactMountReady().enqueue(function () { + measureLifeCyclePerf(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), _this2._debugID, 'componentDidUpdate'); + }); + } else { + transaction.getReactMountReady().enqueue(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), inst); + } + } + }, + + /** + * Call the component's `render` method and update the DOM accordingly. + * + * @param {ReactReconcileTransaction} transaction + * @internal + */ + _updateRenderedComponent: function (transaction, context) { + var prevComponentInstance = this._renderedComponent; + var prevRenderedElement = prevComponentInstance._currentElement; + var nextRenderedElement = this._renderValidatedComponent(); + + var debugID = 0; + if (process.env.NODE_ENV !== 'production') { + debugID = this._debugID; + } + + if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) { + ReactReconciler.receiveComponent(prevComponentInstance, nextRenderedElement, transaction, this._processChildContext(context)); + } else { + var oldHostNode = ReactReconciler.getHostNode(prevComponentInstance); + ReactReconciler.unmountComponent(prevComponentInstance, false); + + var nodeType = ReactNodeTypes.getType(nextRenderedElement); + this._renderedNodeType = nodeType; + var child = this._instantiateReactComponent(nextRenderedElement, nodeType !== ReactNodeTypes.EMPTY /* shouldHaveDebugID */ + ); + this._renderedComponent = child; + + var nextMarkup = ReactReconciler.mountComponent(child, transaction, this._hostParent, this._hostContainerInfo, this._processChildContext(context), debugID); + + if (process.env.NODE_ENV !== 'production') { + if (debugID !== 0) { + var childDebugIDs = child._debugID !== 0 ? [child._debugID] : []; + ReactInstrumentation.debugTool.onSetChildren(debugID, childDebugIDs); + } + } + + this._replaceNodeWithMarkup(oldHostNode, nextMarkup, prevComponentInstance); + } + }, + + /** + * Overridden in shallow rendering. + * + * @protected + */ + _replaceNodeWithMarkup: function (oldHostNode, nextMarkup, prevInstance) { + ReactComponentEnvironment.replaceNodeWithMarkup(oldHostNode, nextMarkup, prevInstance); + }, + + /** + * @protected + */ + _renderValidatedComponentWithoutOwnerOrContext: function () { + var inst = this._instance; + var renderedElement; + + if (process.env.NODE_ENV !== 'production') { + renderedElement = measureLifeCyclePerf(function () { + return inst.render(); + }, this._debugID, 'render'); + } else { + renderedElement = inst.render(); + } + + if (process.env.NODE_ENV !== 'production') { + // We allow auto-mocks to proceed as if they're returning null. + if (renderedElement === undefined && inst.render._isMockFunction) { + // This is probably bad practice. Consider warning here and + // deprecating this convenience. + renderedElement = null; + } + } + + return renderedElement; + }, + + /** + * @private + */ + _renderValidatedComponent: function () { + var renderedElement; + if (process.env.NODE_ENV !== 'production' || this._compositeType !== CompositeTypes.StatelessFunctional) { + ReactCurrentOwner.current = this; + try { + renderedElement = this._renderValidatedComponentWithoutOwnerOrContext(); + } finally { + ReactCurrentOwner.current = null; + } + } else { + renderedElement = this._renderValidatedComponentWithoutOwnerOrContext(); + } + !( + // TODO: An `isValidNode` function would probably be more appropriate + renderedElement === null || renderedElement === false || React.isValidElement(renderedElement)) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.', this.getName() || 'ReactCompositeComponent') : _prodInvariant('109', this.getName() || 'ReactCompositeComponent') : void 0; + + return renderedElement; + }, + + /** + * Lazily allocates the refs object and stores `component` as `ref`. + * + * @param {string} ref Reference name. + * @param {component} component Component to store as `ref`. + * @final + * @private + */ + attachRef: function (ref, component) { + var inst = this.getPublicInstance(); + !(inst != null) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Stateless function components cannot have refs.') : _prodInvariant('110') : void 0; + var publicComponentInstance = component.getPublicInstance(); + if (process.env.NODE_ENV !== 'production') { + var componentName = component && component.getName ? component.getName() : 'a component'; + process.env.NODE_ENV !== 'production' ? warning(publicComponentInstance != null || component._compositeType !== CompositeTypes.StatelessFunctional, 'Stateless function components cannot be given refs ' + '(See ref "%s" in %s created by %s). ' + 'Attempts to access this ref will fail.', ref, componentName, this.getName()) : void 0; + } + var refs = inst.refs === emptyObject ? inst.refs = {} : inst.refs; + refs[ref] = publicComponentInstance; + }, + + /** + * Detaches a reference name. + * + * @param {string} ref Name to dereference. + * @final + * @private + */ + detachRef: function (ref) { + var refs = this.getPublicInstance().refs; + delete refs[ref]; + }, + + /** + * Get a text description of the component that can be used to identify it + * in error messages. + * @return {string} The name or null. + * @internal + */ + getName: function () { + var type = this._currentElement.type; + var constructor = this._instance && this._instance.constructor; + return type.displayName || constructor && constructor.displayName || type.name || constructor && constructor.name || null; + }, + + /** + * Get the publicly accessible representation of this component - i.e. what + * is exposed by refs and returned by render. Can be null for stateless + * components. + * + * @return {ReactComponent} the public component instance. + * @internal + */ + getPublicInstance: function () { + var inst = this._instance; + if (this._compositeType === CompositeTypes.StatelessFunctional) { + return null; + } + return inst; + }, + + // Stub + _instantiateReactComponent: null + +}; + +module.exports = ReactCompositeComponent; +}).call(this,require('_process')) +},{"./ReactComponentEnvironment":57,"./ReactErrorUtils":82,"./ReactInstanceMap":90,"./ReactInstrumentation":91,"./ReactNodeTypes":96,"./ReactReconciler":101,"./checkReactTypeSpec":128,"./reactProdInvariant":148,"./shouldUpdateReactComponent":152,"_process":25,"fbjs/lib/emptyObject":9,"fbjs/lib/invariant":16,"fbjs/lib/shallowEqual":22,"fbjs/lib/warning":23,"object-assign":24,"react/lib/React":157,"react/lib/ReactCurrentOwner":162}],59:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +/* globals __REACT_DEVTOOLS_GLOBAL_HOOK__*/ + +'use strict'; + +var ReactDOMComponentTree = require('./ReactDOMComponentTree'); +var ReactDefaultInjection = require('./ReactDefaultInjection'); +var ReactMount = require('./ReactMount'); +var ReactReconciler = require('./ReactReconciler'); +var ReactUpdates = require('./ReactUpdates'); +var ReactVersion = require('./ReactVersion'); + +var findDOMNode = require('./findDOMNode'); +var getHostComponentFromComposite = require('./getHostComponentFromComposite'); +var renderSubtreeIntoContainer = require('./renderSubtreeIntoContainer'); +var warning = require('fbjs/lib/warning'); + +ReactDefaultInjection.inject(); + +var ReactDOM = { + findDOMNode: findDOMNode, + render: ReactMount.render, + unmountComponentAtNode: ReactMount.unmountComponentAtNode, + version: ReactVersion, + + /* eslint-disable camelcase */ + unstable_batchedUpdates: ReactUpdates.batchedUpdates, + unstable_renderSubtreeIntoContainer: renderSubtreeIntoContainer +}; + +// Inject the runtime into a devtools global hook regardless of browser. +// Allows for debugging when the hook is injected on the page. +if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject === 'function') { + __REACT_DEVTOOLS_GLOBAL_HOOK__.inject({ + ComponentTree: { + getClosestInstanceFromNode: ReactDOMComponentTree.getClosestInstanceFromNode, + getNodeFromInstance: function (inst) { + // inst is an internal instance (but could be a composite) + if (inst._renderedComponent) { + inst = getHostComponentFromComposite(inst); + } + if (inst) { + return ReactDOMComponentTree.getNodeFromInstance(inst); + } else { + return null; + } + } + }, + Mount: ReactMount, + Reconciler: ReactReconciler + }); +} + +if (process.env.NODE_ENV !== 'production') { + var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment'); + if (ExecutionEnvironment.canUseDOM && window.top === window.self) { + + // First check if devtools is not installed + if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') { + // If we're in Chrome or Firefox, provide a download link if not installed. + if (navigator.userAgent.indexOf('Chrome') > -1 && navigator.userAgent.indexOf('Edge') === -1 || navigator.userAgent.indexOf('Firefox') > -1) { + // Firefox does not have the issue with devtools loaded over file:// + var showFileUrlMessage = window.location.protocol.indexOf('http') === -1 && navigator.userAgent.indexOf('Firefox') === -1; + console.debug('Download the React DevTools ' + (showFileUrlMessage ? 'and use an HTTP server (instead of a file: URL) ' : '') + 'for a better development experience: ' + 'https://fb.me/react-devtools'); + } + } + + var testFunc = function testFn() {}; + process.env.NODE_ENV !== 'production' ? warning((testFunc.name || testFunc.toString()).indexOf('testFn') !== -1, 'It looks like you\'re using a minified copy of the development build ' + 'of React. When deploying React apps to production, make sure to use ' + 'the production build which skips development warnings and is faster. ' + 'See https://fb.me/react-minification for more details.') : void 0; + + // If we're in IE8, check to see if we are in compatibility mode and provide + // information on preventing compatibility mode + var ieCompatibilityMode = document.documentMode && document.documentMode < 8; + + process.env.NODE_ENV !== 'production' ? warning(!ieCompatibilityMode, 'Internet Explorer is running in compatibility mode; please add the ' + 'following tag to your HTML to prevent this from happening: ' + '') : void 0; + + var expectedFeatures = [ + // shims + Array.isArray, Array.prototype.every, Array.prototype.forEach, Array.prototype.indexOf, Array.prototype.map, Date.now, Function.prototype.bind, Object.keys, String.prototype.trim]; + + for (var i = 0; i < expectedFeatures.length; i++) { + if (!expectedFeatures[i]) { + process.env.NODE_ENV !== 'production' ? warning(false, 'One or more ES5 shims expected by React are not available: ' + 'https://fb.me/react-warning-polyfills') : void 0; + break; + } + } + } +} + +if (process.env.NODE_ENV !== 'production') { + var ReactInstrumentation = require('./ReactInstrumentation'); + var ReactDOMUnknownPropertyHook = require('./ReactDOMUnknownPropertyHook'); + var ReactDOMNullInputValuePropHook = require('./ReactDOMNullInputValuePropHook'); + var ReactDOMInvalidARIAHook = require('./ReactDOMInvalidARIAHook'); + + ReactInstrumentation.debugTool.addHook(ReactDOMUnknownPropertyHook); + ReactInstrumentation.debugTool.addHook(ReactDOMNullInputValuePropHook); + ReactInstrumentation.debugTool.addHook(ReactDOMInvalidARIAHook); +} + +module.exports = ReactDOM; +}).call(this,require('_process')) +},{"./ReactDOMComponentTree":62,"./ReactDOMInvalidARIAHook":68,"./ReactDOMNullInputValuePropHook":69,"./ReactDOMUnknownPropertyHook":76,"./ReactDefaultInjection":79,"./ReactInstrumentation":91,"./ReactMount":94,"./ReactReconciler":101,"./ReactUpdates":106,"./ReactVersion":107,"./findDOMNode":132,"./getHostComponentFromComposite":139,"./renderSubtreeIntoContainer":149,"_process":25,"fbjs/lib/ExecutionEnvironment":2,"fbjs/lib/warning":23}],60:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +/* global hasOwnProperty:true */ + +'use strict'; + +var _prodInvariant = require('./reactProdInvariant'), + _assign = require('object-assign'); + +var AutoFocusUtils = require('./AutoFocusUtils'); +var CSSPropertyOperations = require('./CSSPropertyOperations'); +var DOMLazyTree = require('./DOMLazyTree'); +var DOMNamespaces = require('./DOMNamespaces'); +var DOMProperty = require('./DOMProperty'); +var DOMPropertyOperations = require('./DOMPropertyOperations'); +var EventPluginHub = require('./EventPluginHub'); +var EventPluginRegistry = require('./EventPluginRegistry'); +var ReactBrowserEventEmitter = require('./ReactBrowserEventEmitter'); +var ReactDOMComponentFlags = require('./ReactDOMComponentFlags'); +var ReactDOMComponentTree = require('./ReactDOMComponentTree'); +var ReactDOMInput = require('./ReactDOMInput'); +var ReactDOMOption = require('./ReactDOMOption'); +var ReactDOMSelect = require('./ReactDOMSelect'); +var ReactDOMTextarea = require('./ReactDOMTextarea'); +var ReactInstrumentation = require('./ReactInstrumentation'); +var ReactMultiChild = require('./ReactMultiChild'); +var ReactServerRenderingTransaction = require('./ReactServerRenderingTransaction'); + +var emptyFunction = require('fbjs/lib/emptyFunction'); +var escapeTextContentForBrowser = require('./escapeTextContentForBrowser'); +var invariant = require('fbjs/lib/invariant'); +var isEventSupported = require('./isEventSupported'); +var shallowEqual = require('fbjs/lib/shallowEqual'); +var validateDOMNesting = require('./validateDOMNesting'); +var warning = require('fbjs/lib/warning'); + +var Flags = ReactDOMComponentFlags; +var deleteListener = EventPluginHub.deleteListener; +var getNode = ReactDOMComponentTree.getNodeFromInstance; +var listenTo = ReactBrowserEventEmitter.listenTo; +var registrationNameModules = EventPluginRegistry.registrationNameModules; + +// For quickly matching children type, to test if can be treated as content. +var CONTENT_TYPES = { 'string': true, 'number': true }; + +var STYLE = 'style'; +var HTML = '__html'; +var RESERVED_PROPS = { + children: null, + dangerouslySetInnerHTML: null, + suppressContentEditableWarning: null +}; + +// Node type for document fragments (Node.DOCUMENT_FRAGMENT_NODE). +var DOC_FRAGMENT_TYPE = 11; + +function getDeclarationErrorAddendum(internalInstance) { + if (internalInstance) { + var owner = internalInstance._currentElement._owner || null; + if (owner) { + var name = owner.getName(); + if (name) { + return ' This DOM node was rendered by `' + name + '`.'; + } + } + } + return ''; +} + +function friendlyStringify(obj) { + if (typeof obj === 'object') { + if (Array.isArray(obj)) { + return '[' + obj.map(friendlyStringify).join(', ') + ']'; + } else { + var pairs = []; + for (var key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + var keyEscaped = /^[a-z$_][\w$_]*$/i.test(key) ? key : JSON.stringify(key); + pairs.push(keyEscaped + ': ' + friendlyStringify(obj[key])); + } + } + return '{' + pairs.join(', ') + '}'; + } + } else if (typeof obj === 'string') { + return JSON.stringify(obj); + } else if (typeof obj === 'function') { + return '[function object]'; + } + // Differs from JSON.stringify in that undefined because undefined and that + // inf and nan don't become null + return String(obj); +} + +var styleMutationWarning = {}; + +function checkAndWarnForMutatedStyle(style1, style2, component) { + if (style1 == null || style2 == null) { + return; + } + if (shallowEqual(style1, style2)) { + return; + } + + var componentName = component._tag; + var owner = component._currentElement._owner; + var ownerName; + if (owner) { + ownerName = owner.getName(); + } + + var hash = ownerName + '|' + componentName; + + if (styleMutationWarning.hasOwnProperty(hash)) { + return; + } + + styleMutationWarning[hash] = true; + + process.env.NODE_ENV !== 'production' ? warning(false, '`%s` was passed a style object that has previously been mutated. ' + 'Mutating `style` is deprecated. Consider cloning it beforehand. Check ' + 'the `render` %s. Previous style: %s. Mutated style: %s.', componentName, owner ? 'of `' + ownerName + '`' : 'using <' + componentName + '>', friendlyStringify(style1), friendlyStringify(style2)) : void 0; +} + +/** + * @param {object} component + * @param {?object} props + */ +function assertValidProps(component, props) { + if (!props) { + return; + } + // Note the use of `==` which checks for null or undefined. + if (voidElementTags[component._tag]) { + !(props.children == null && props.dangerouslySetInnerHTML == null) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.%s', component._tag, component._currentElement._owner ? ' Check the render method of ' + component._currentElement._owner.getName() + '.' : '') : _prodInvariant('137', component._tag, component._currentElement._owner ? ' Check the render method of ' + component._currentElement._owner.getName() + '.' : '') : void 0; + } + if (props.dangerouslySetInnerHTML != null) { + !(props.children == null) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.') : _prodInvariant('60') : void 0; + !(typeof props.dangerouslySetInnerHTML === 'object' && HTML in props.dangerouslySetInnerHTML) ? process.env.NODE_ENV !== 'production' ? invariant(false, '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information.') : _prodInvariant('61') : void 0; + } + if (process.env.NODE_ENV !== 'production') { + process.env.NODE_ENV !== 'production' ? warning(props.innerHTML == null, 'Directly setting property `innerHTML` is not permitted. ' + 'For more information, lookup documentation on `dangerouslySetInnerHTML`.') : void 0; + process.env.NODE_ENV !== 'production' ? warning(props.suppressContentEditableWarning || !props.contentEditable || props.children == null, 'A component is `contentEditable` and contains `children` managed by ' + 'React. It is now your responsibility to guarantee that none of ' + 'those nodes are unexpectedly modified or duplicated. This is ' + 'probably not intentional.') : void 0; + process.env.NODE_ENV !== 'production' ? warning(props.onFocusIn == null && props.onFocusOut == null, 'React uses onFocus and onBlur instead of onFocusIn and onFocusOut. ' + 'All React events are normalized to bubble, so onFocusIn and onFocusOut ' + 'are not needed/supported by React.') : void 0; + } + !(props.style == null || typeof props.style === 'object') ? process.env.NODE_ENV !== 'production' ? invariant(false, 'The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + \'em\'}} when using JSX.%s', getDeclarationErrorAddendum(component)) : _prodInvariant('62', getDeclarationErrorAddendum(component)) : void 0; +} + +function enqueuePutListener(inst, registrationName, listener, transaction) { + if (transaction instanceof ReactServerRenderingTransaction) { + return; + } + if (process.env.NODE_ENV !== 'production') { + // IE8 has no API for event capturing and the `onScroll` event doesn't + // bubble. + process.env.NODE_ENV !== 'production' ? warning(registrationName !== 'onScroll' || isEventSupported('scroll', true), 'This browser doesn\'t support the `onScroll` event') : void 0; + } + var containerInfo = inst._hostContainerInfo; + var isDocumentFragment = containerInfo._node && containerInfo._node.nodeType === DOC_FRAGMENT_TYPE; + var doc = isDocumentFragment ? containerInfo._node : containerInfo._ownerDocument; + listenTo(registrationName, doc); + transaction.getReactMountReady().enqueue(putListener, { + inst: inst, + registrationName: registrationName, + listener: listener + }); +} + +function putListener() { + var listenerToPut = this; + EventPluginHub.putListener(listenerToPut.inst, listenerToPut.registrationName, listenerToPut.listener); +} + +function inputPostMount() { + var inst = this; + ReactDOMInput.postMountWrapper(inst); +} + +function textareaPostMount() { + var inst = this; + ReactDOMTextarea.postMountWrapper(inst); +} + +function optionPostMount() { + var inst = this; + ReactDOMOption.postMountWrapper(inst); +} + +var setAndValidateContentChildDev = emptyFunction; +if (process.env.NODE_ENV !== 'production') { + setAndValidateContentChildDev = function (content) { + var hasExistingContent = this._contentDebugID != null; + var debugID = this._debugID; + // This ID represents the inlined child that has no backing instance: + var contentDebugID = -debugID; + + if (content == null) { + if (hasExistingContent) { + ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID); + } + this._contentDebugID = null; + return; + } + + validateDOMNesting(null, String(content), this, this._ancestorInfo); + this._contentDebugID = contentDebugID; + if (hasExistingContent) { + ReactInstrumentation.debugTool.onBeforeUpdateComponent(contentDebugID, content); + ReactInstrumentation.debugTool.onUpdateComponent(contentDebugID); + } else { + ReactInstrumentation.debugTool.onBeforeMountComponent(contentDebugID, content, debugID); + ReactInstrumentation.debugTool.onMountComponent(contentDebugID); + ReactInstrumentation.debugTool.onSetChildren(debugID, [contentDebugID]); + } + }; +} + +// There are so many media events, it makes sense to just +// maintain a list rather than create a `trapBubbledEvent` for each +var mediaEvents = { + topAbort: 'abort', + topCanPlay: 'canplay', + topCanPlayThrough: 'canplaythrough', + topDurationChange: 'durationchange', + topEmptied: 'emptied', + topEncrypted: 'encrypted', + topEnded: 'ended', + topError: 'error', + topLoadedData: 'loadeddata', + topLoadedMetadata: 'loadedmetadata', + topLoadStart: 'loadstart', + topPause: 'pause', + topPlay: 'play', + topPlaying: 'playing', + topProgress: 'progress', + topRateChange: 'ratechange', + topSeeked: 'seeked', + topSeeking: 'seeking', + topStalled: 'stalled', + topSuspend: 'suspend', + topTimeUpdate: 'timeupdate', + topVolumeChange: 'volumechange', + topWaiting: 'waiting' +}; + +function trapBubbledEventsLocal() { + var inst = this; + // If a component renders to null or if another component fatals and causes + // the state of the tree to be corrupted, `node` here can be null. + !inst._rootNodeID ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Must be mounted to trap events') : _prodInvariant('63') : void 0; + var node = getNode(inst); + !node ? process.env.NODE_ENV !== 'production' ? invariant(false, 'trapBubbledEvent(...): Requires node to be rendered.') : _prodInvariant('64') : void 0; + + switch (inst._tag) { + case 'iframe': + case 'object': + inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topLoad', 'load', node)]; + break; + case 'video': + case 'audio': + + inst._wrapperState.listeners = []; + // Create listener for each media event + for (var event in mediaEvents) { + if (mediaEvents.hasOwnProperty(event)) { + inst._wrapperState.listeners.push(ReactBrowserEventEmitter.trapBubbledEvent(event, mediaEvents[event], node)); + } + } + break; + case 'source': + inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topError', 'error', node)]; + break; + case 'img': + inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topError', 'error', node), ReactBrowserEventEmitter.trapBubbledEvent('topLoad', 'load', node)]; + break; + case 'form': + inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topReset', 'reset', node), ReactBrowserEventEmitter.trapBubbledEvent('topSubmit', 'submit', node)]; + break; + case 'input': + case 'select': + case 'textarea': + inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topInvalid', 'invalid', node)]; + break; + } +} + +function postUpdateSelectWrapper() { + ReactDOMSelect.postUpdateWrapper(this); +} + +// For HTML, certain tags should omit their close tag. We keep a whitelist for +// those special-case tags. + +var omittedCloseTags = { + 'area': true, + 'base': true, + 'br': true, + 'col': true, + 'embed': true, + 'hr': true, + 'img': true, + 'input': true, + 'keygen': true, + 'link': true, + 'meta': true, + 'param': true, + 'source': true, + 'track': true, + 'wbr': true +}; + +var newlineEatingTags = { + 'listing': true, + 'pre': true, + 'textarea': true +}; + +// For HTML, certain tags cannot have children. This has the same purpose as +// `omittedCloseTags` except that `menuitem` should still have its closing tag. + +var voidElementTags = _assign({ + 'menuitem': true +}, omittedCloseTags); + +// We accept any tag to be rendered but since this gets injected into arbitrary +// HTML, we want to make sure that it's a safe tag. +// http://www.w3.org/TR/REC-xml/#NT-Name + +var VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\.\-\d]*$/; // Simplified subset +var validatedTagCache = {}; +var hasOwnProperty = {}.hasOwnProperty; + +function validateDangerousTag(tag) { + if (!hasOwnProperty.call(validatedTagCache, tag)) { + !VALID_TAG_REGEX.test(tag) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Invalid tag: %s', tag) : _prodInvariant('65', tag) : void 0; + validatedTagCache[tag] = true; + } +} + +function isCustomComponent(tagName, props) { + return tagName.indexOf('-') >= 0 || props.is != null; +} + +var globalIdCounter = 1; + +/** + * Creates a new React class that is idempotent and capable of containing other + * React components. It accepts event listeners and DOM properties that are + * valid according to `DOMProperty`. + * + * - Event listeners: `onClick`, `onMouseDown`, etc. + * - DOM properties: `className`, `name`, `title`, etc. + * + * The `style` property functions differently from the DOM API. It accepts an + * object mapping of style properties to values. + * + * @constructor ReactDOMComponent + * @extends ReactMultiChild + */ +function ReactDOMComponent(element) { + var tag = element.type; + validateDangerousTag(tag); + this._currentElement = element; + this._tag = tag.toLowerCase(); + this._namespaceURI = null; + this._renderedChildren = null; + this._previousStyle = null; + this._previousStyleCopy = null; + this._hostNode = null; + this._hostParent = null; + this._rootNodeID = 0; + this._domID = 0; + this._hostContainerInfo = null; + this._wrapperState = null; + this._topLevelWrapper = null; + this._flags = 0; + if (process.env.NODE_ENV !== 'production') { + this._ancestorInfo = null; + setAndValidateContentChildDev.call(this, null); + } +} + +ReactDOMComponent.displayName = 'ReactDOMComponent'; + +ReactDOMComponent.Mixin = { + + /** + * Generates root tag markup then recurses. This method has side effects and + * is not idempotent. + * + * @internal + * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction + * @param {?ReactDOMComponent} the parent component instance + * @param {?object} info about the host container + * @param {object} context + * @return {string} The computed markup. + */ + mountComponent: function (transaction, hostParent, hostContainerInfo, context) { + this._rootNodeID = globalIdCounter++; + this._domID = hostContainerInfo._idCounter++; + this._hostParent = hostParent; + this._hostContainerInfo = hostContainerInfo; + + var props = this._currentElement.props; + + switch (this._tag) { + case 'audio': + case 'form': + case 'iframe': + case 'img': + case 'link': + case 'object': + case 'source': + case 'video': + this._wrapperState = { + listeners: null + }; + transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this); + break; + case 'input': + ReactDOMInput.mountWrapper(this, props, hostParent); + props = ReactDOMInput.getHostProps(this, props); + transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this); + break; + case 'option': + ReactDOMOption.mountWrapper(this, props, hostParent); + props = ReactDOMOption.getHostProps(this, props); + break; + case 'select': + ReactDOMSelect.mountWrapper(this, props, hostParent); + props = ReactDOMSelect.getHostProps(this, props); + transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this); + break; + case 'textarea': + ReactDOMTextarea.mountWrapper(this, props, hostParent); + props = ReactDOMTextarea.getHostProps(this, props); + transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this); + break; + } + + assertValidProps(this, props); + + // We create tags in the namespace of their parent container, except HTML + // tags get no namespace. + var namespaceURI; + var parentTag; + if (hostParent != null) { + namespaceURI = hostParent._namespaceURI; + parentTag = hostParent._tag; + } else if (hostContainerInfo._tag) { + namespaceURI = hostContainerInfo._namespaceURI; + parentTag = hostContainerInfo._tag; + } + if (namespaceURI == null || namespaceURI === DOMNamespaces.svg && parentTag === 'foreignobject') { + namespaceURI = DOMNamespaces.html; + } + if (namespaceURI === DOMNamespaces.html) { + if (this._tag === 'svg') { + namespaceURI = DOMNamespaces.svg; + } else if (this._tag === 'math') { + namespaceURI = DOMNamespaces.mathml; + } + } + this._namespaceURI = namespaceURI; + + if (process.env.NODE_ENV !== 'production') { + var parentInfo; + if (hostParent != null) { + parentInfo = hostParent._ancestorInfo; + } else if (hostContainerInfo._tag) { + parentInfo = hostContainerInfo._ancestorInfo; + } + if (parentInfo) { + // parentInfo should always be present except for the top-level + // component when server rendering + validateDOMNesting(this._tag, null, this, parentInfo); + } + this._ancestorInfo = validateDOMNesting.updatedAncestorInfo(parentInfo, this._tag, this); + } + + var mountImage; + if (transaction.useCreateElement) { + var ownerDocument = hostContainerInfo._ownerDocument; + var el; + if (namespaceURI === DOMNamespaces.html) { + if (this._tag === 'script') { + // Create the script via .innerHTML so its "parser-inserted" flag is + // set to true and it does not execute + var div = ownerDocument.createElement('div'); + var type = this._currentElement.type; + div.innerHTML = '<' + type + '>'; + el = div.removeChild(div.firstChild); + } else if (props.is) { + el = ownerDocument.createElement(this._currentElement.type, props.is); + } else { + // Separate else branch instead of using `props.is || undefined` above becuase of a Firefox bug. + // See discussion in https://github.com/facebook/react/pull/6896 + // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240 + el = ownerDocument.createElement(this._currentElement.type); + } + } else { + el = ownerDocument.createElementNS(namespaceURI, this._currentElement.type); + } + ReactDOMComponentTree.precacheNode(this, el); + this._flags |= Flags.hasCachedChildNodes; + if (!this._hostParent) { + DOMPropertyOperations.setAttributeForRoot(el); + } + this._updateDOMProperties(null, props, transaction); + var lazyTree = DOMLazyTree(el); + this._createInitialChildren(transaction, props, context, lazyTree); + mountImage = lazyTree; + } else { + var tagOpen = this._createOpenTagMarkupAndPutListeners(transaction, props); + var tagContent = this._createContentMarkup(transaction, props, context); + if (!tagContent && omittedCloseTags[this._tag]) { + mountImage = tagOpen + '/>'; + } else { + mountImage = tagOpen + '>' + tagContent + ''; + } + } + + switch (this._tag) { + case 'input': + transaction.getReactMountReady().enqueue(inputPostMount, this); + if (props.autoFocus) { + transaction.getReactMountReady().enqueue(AutoFocusUtils.focusDOMComponent, this); + } + break; + case 'textarea': + transaction.getReactMountReady().enqueue(textareaPostMount, this); + if (props.autoFocus) { + transaction.getReactMountReady().enqueue(AutoFocusUtils.focusDOMComponent, this); + } + break; + case 'select': + if (props.autoFocus) { + transaction.getReactMountReady().enqueue(AutoFocusUtils.focusDOMComponent, this); + } + break; + case 'button': + if (props.autoFocus) { + transaction.getReactMountReady().enqueue(AutoFocusUtils.focusDOMComponent, this); + } + break; + case 'option': + transaction.getReactMountReady().enqueue(optionPostMount, this); + break; + } + + return mountImage; + }, + + /** + * Creates markup for the open tag and all attributes. + * + * This method has side effects because events get registered. + * + * Iterating over object properties is faster than iterating over arrays. + * @see http://jsperf.com/obj-vs-arr-iteration + * + * @private + * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction + * @param {object} props + * @return {string} Markup of opening tag. + */ + _createOpenTagMarkupAndPutListeners: function (transaction, props) { + var ret = '<' + this._currentElement.type; + + for (var propKey in props) { + if (!props.hasOwnProperty(propKey)) { + continue; + } + var propValue = props[propKey]; + if (propValue == null) { + continue; + } + if (registrationNameModules.hasOwnProperty(propKey)) { + if (propValue) { + enqueuePutListener(this, propKey, propValue, transaction); + } + } else { + if (propKey === STYLE) { + if (propValue) { + if (process.env.NODE_ENV !== 'production') { + // See `_updateDOMProperties`. style block + this._previousStyle = propValue; + } + propValue = this._previousStyleCopy = _assign({}, props.style); + } + propValue = CSSPropertyOperations.createMarkupForStyles(propValue, this); + } + var markup = null; + if (this._tag != null && isCustomComponent(this._tag, props)) { + if (!RESERVED_PROPS.hasOwnProperty(propKey)) { + markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue); + } + } else { + markup = DOMPropertyOperations.createMarkupForProperty(propKey, propValue); + } + if (markup) { + ret += ' ' + markup; + } + } + } + + // For static pages, no need to put React ID and checksum. Saves lots of + // bytes. + if (transaction.renderToStaticMarkup) { + return ret; + } + + if (!this._hostParent) { + ret += ' ' + DOMPropertyOperations.createMarkupForRoot(); + } + ret += ' ' + DOMPropertyOperations.createMarkupForID(this._domID); + return ret; + }, + + /** + * Creates markup for the content between the tags. + * + * @private + * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction + * @param {object} props + * @param {object} context + * @return {string} Content markup. + */ + _createContentMarkup: function (transaction, props, context) { + var ret = ''; + + // Intentional use of != to avoid catching zero/false. + var innerHTML = props.dangerouslySetInnerHTML; + if (innerHTML != null) { + if (innerHTML.__html != null) { + ret = innerHTML.__html; + } + } else { + var contentToUse = CONTENT_TYPES[typeof props.children] ? props.children : null; + var childrenToUse = contentToUse != null ? null : props.children; + if (contentToUse != null) { + // TODO: Validate that text is allowed as a child of this node + ret = escapeTextContentForBrowser(contentToUse); + if (process.env.NODE_ENV !== 'production') { + setAndValidateContentChildDev.call(this, contentToUse); + } + } else if (childrenToUse != null) { + var mountImages = this.mountChildren(childrenToUse, transaction, context); + ret = mountImages.join(''); + } + } + if (newlineEatingTags[this._tag] && ret.charAt(0) === '\n') { + // text/html ignores the first character in these tags if it's a newline + // Prefer to break application/xml over text/html (for now) by adding + // a newline specifically to get eaten by the parser. (Alternately for + // textareas, replacing "^\n" with "\r\n" doesn't get eaten, and the first + // \r is normalized out by HTMLTextAreaElement#value.) + // See: + // See: + // See: + // See: Parsing of "textarea" "listing" and "pre" elements + // from + return '\n' + ret; + } else { + return ret; + } + }, + + _createInitialChildren: function (transaction, props, context, lazyTree) { + // Intentional use of != to avoid catching zero/false. + var innerHTML = props.dangerouslySetInnerHTML; + if (innerHTML != null) { + if (innerHTML.__html != null) { + DOMLazyTree.queueHTML(lazyTree, innerHTML.__html); + } + } else { + var contentToUse = CONTENT_TYPES[typeof props.children] ? props.children : null; + var childrenToUse = contentToUse != null ? null : props.children; + // TODO: Validate that text is allowed as a child of this node + if (contentToUse != null) { + // Avoid setting textContent when the text is empty. In IE11 setting + // textContent on a text area will cause the placeholder to not + // show within the textarea until it has been focused and blurred again. + // https://github.com/facebook/react/issues/6731#issuecomment-254874553 + if (contentToUse !== '') { + if (process.env.NODE_ENV !== 'production') { + setAndValidateContentChildDev.call(this, contentToUse); + } + DOMLazyTree.queueText(lazyTree, contentToUse); + } + } else if (childrenToUse != null) { + var mountImages = this.mountChildren(childrenToUse, transaction, context); + for (var i = 0; i < mountImages.length; i++) { + DOMLazyTree.queueChild(lazyTree, mountImages[i]); + } + } + } + }, + + /** + * Receives a next element and updates the component. + * + * @internal + * @param {ReactElement} nextElement + * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction + * @param {object} context + */ + receiveComponent: function (nextElement, transaction, context) { + var prevElement = this._currentElement; + this._currentElement = nextElement; + this.updateComponent(transaction, prevElement, nextElement, context); + }, + + /** + * Updates a DOM component after it has already been allocated and + * attached to the DOM. Reconciles the root DOM node, then recurses. + * + * @param {ReactReconcileTransaction} transaction + * @param {ReactElement} prevElement + * @param {ReactElement} nextElement + * @internal + * @overridable + */ + updateComponent: function (transaction, prevElement, nextElement, context) { + var lastProps = prevElement.props; + var nextProps = this._currentElement.props; + + switch (this._tag) { + case 'input': + lastProps = ReactDOMInput.getHostProps(this, lastProps); + nextProps = ReactDOMInput.getHostProps(this, nextProps); + break; + case 'option': + lastProps = ReactDOMOption.getHostProps(this, lastProps); + nextProps = ReactDOMOption.getHostProps(this, nextProps); + break; + case 'select': + lastProps = ReactDOMSelect.getHostProps(this, lastProps); + nextProps = ReactDOMSelect.getHostProps(this, nextProps); + break; + case 'textarea': + lastProps = ReactDOMTextarea.getHostProps(this, lastProps); + nextProps = ReactDOMTextarea.getHostProps(this, nextProps); + break; + } + + assertValidProps(this, nextProps); + this._updateDOMProperties(lastProps, nextProps, transaction); + this._updateDOMChildren(lastProps, nextProps, transaction, context); + + switch (this._tag) { + case 'input': + // Update the wrapper around inputs *after* updating props. This has to + // happen after `_updateDOMProperties`. Otherwise HTML5 input validations + // raise warnings and prevent the new value from being assigned. + ReactDOMInput.updateWrapper(this); + break; + case 'textarea': + ReactDOMTextarea.updateWrapper(this); + break; + case 'select': + // host component that allows setting these optional + * props: `checked`, `value`, `defaultChecked`, and `defaultValue`. + * + * If `checked` or `value` are not supplied (or null/undefined), user actions + * that affect the checked state or value will trigger updates to the element. + * + * If they are supplied (and not null/undefined), the rendered element will not + * trigger updates to the element. Instead, the props must change in order for + * the rendered element to be updated. + * + * The rendered element will be initialized as unchecked (or `defaultChecked`) + * with an empty value (or `defaultValue`). + * + * @see http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html + */ +var ReactDOMInput = { + getHostProps: function (inst, props) { + var value = LinkedValueUtils.getValue(props); + var checked = LinkedValueUtils.getChecked(props); + + var hostProps = _assign({ + // Make sure we set .type before any other properties (setting .value + // before .type means .value is lost in IE11 and below) + type: undefined, + // Make sure we set .step before .value (setting .value before .step + // means .value is rounded on mount, based upon step precision) + step: undefined, + // Make sure we set .min & .max before .value (to ensure proper order + // in corner cases such as min or max deriving from value, e.g. Issue #7170) + min: undefined, + max: undefined + }, props, { + defaultChecked: undefined, + defaultValue: undefined, + value: value != null ? value : inst._wrapperState.initialValue, + checked: checked != null ? checked : inst._wrapperState.initialChecked, + onChange: inst._wrapperState.onChange + }); + + return hostProps; + }, + + mountWrapper: function (inst, props) { + if (process.env.NODE_ENV !== 'production') { + LinkedValueUtils.checkPropTypes('input', props, inst._currentElement._owner); + + var owner = inst._currentElement._owner; + + if (props.valueLink !== undefined && !didWarnValueLink) { + process.env.NODE_ENV !== 'production' ? warning(false, '`valueLink` prop on `input` is deprecated; set `value` and `onChange` instead.') : void 0; + didWarnValueLink = true; + } + if (props.checkedLink !== undefined && !didWarnCheckedLink) { + process.env.NODE_ENV !== 'production' ? warning(false, '`checkedLink` prop on `input` is deprecated; set `value` and `onChange` instead.') : void 0; + didWarnCheckedLink = true; + } + if (props.checked !== undefined && props.defaultChecked !== undefined && !didWarnCheckedDefaultChecked) { + process.env.NODE_ENV !== 'production' ? warning(false, '%s contains an input of type %s with both checked and defaultChecked props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the checked prop, or the defaultChecked prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components', owner && owner.getName() || 'A component', props.type) : void 0; + didWarnCheckedDefaultChecked = true; + } + if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValueDefaultValue) { + process.env.NODE_ENV !== 'production' ? warning(false, '%s contains an input of type %s with both value and defaultValue props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components', owner && owner.getName() || 'A component', props.type) : void 0; + didWarnValueDefaultValue = true; + } + } + + var defaultValue = props.defaultValue; + inst._wrapperState = { + initialChecked: props.checked != null ? props.checked : props.defaultChecked, + initialValue: props.value != null ? props.value : defaultValue, + listeners: null, + onChange: _handleChange.bind(inst), + controlled: isControlled(props) + }; + }, + + updateWrapper: function (inst) { + var props = inst._currentElement.props; + + if (process.env.NODE_ENV !== 'production') { + var controlled = isControlled(props); + var owner = inst._currentElement._owner; + + if (!inst._wrapperState.controlled && controlled && !didWarnUncontrolledToControlled) { + process.env.NODE_ENV !== 'production' ? warning(false, '%s is changing an uncontrolled input of type %s to be controlled. ' + 'Input elements should not switch from uncontrolled to controlled (or vice versa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components', owner && owner.getName() || 'A component', props.type) : void 0; + didWarnUncontrolledToControlled = true; + } + if (inst._wrapperState.controlled && !controlled && !didWarnControlledToUncontrolled) { + process.env.NODE_ENV !== 'production' ? warning(false, '%s is changing a controlled input of type %s to be uncontrolled. ' + 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components', owner && owner.getName() || 'A component', props.type) : void 0; + didWarnControlledToUncontrolled = true; + } + } + + // TODO: Shouldn't this be getChecked(props)? + var checked = props.checked; + if (checked != null) { + DOMPropertyOperations.setValueForProperty(ReactDOMComponentTree.getNodeFromInstance(inst), 'checked', checked || false); + } + + var node = ReactDOMComponentTree.getNodeFromInstance(inst); + var value = LinkedValueUtils.getValue(props); + if (value != null) { + if (value === 0 && node.value === '') { + node.value = '0'; + // Note: IE9 reports a number inputs as 'text', so check props instead. + } else if (props.type === 'number') { + // Simulate `input.valueAsNumber`. IE9 does not support it + var valueAsNumber = parseFloat(node.value, 10) || 0; + + // eslint-disable-next-line + if (value != valueAsNumber) { + // Cast `value` to a string to ensure the value is set correctly. While + // browsers typically do this as necessary, jsdom doesn't. + node.value = '' + value; + } + // eslint-disable-next-line + } else if (value != node.value) { + // Cast `value` to a string to ensure the value is set correctly. While + // browsers typically do this as necessary, jsdom doesn't. + node.value = '' + value; + } + } else { + if (props.value == null && props.defaultValue != null) { + // In Chrome, assigning defaultValue to certain input types triggers input validation. + // For number inputs, the display value loses trailing decimal points. For email inputs, + // Chrome raises "The specified value is not a valid email address". + // + // Here we check to see if the defaultValue has actually changed, avoiding these problems + // when the user is inputting text + // + // https://github.com/facebook/react/issues/7253 + if (node.defaultValue !== '' + props.defaultValue) { + node.defaultValue = '' + props.defaultValue; + } + } + if (props.checked == null && props.defaultChecked != null) { + node.defaultChecked = !!props.defaultChecked; + } + } + }, + + postMountWrapper: function (inst) { + var props = inst._currentElement.props; + + // This is in postMount because we need access to the DOM node, which is not + // available until after the component has mounted. + var node = ReactDOMComponentTree.getNodeFromInstance(inst); + + // Detach value from defaultValue. We won't do anything if we're working on + // submit or reset inputs as those values & defaultValues are linked. They + // are not resetable nodes so this operation doesn't matter and actually + // removes browser-default values (eg "Submit Query") when no value is + // provided. + + switch (props.type) { + case 'submit': + case 'reset': + break; + case 'color': + case 'date': + case 'datetime': + case 'datetime-local': + case 'month': + case 'time': + case 'week': + // This fixes the no-show issue on iOS Safari and Android Chrome: + // https://github.com/facebook/react/issues/7233 + node.value = ''; + node.value = node.defaultValue; + break; + default: + node.value = node.value; + break; + } + + // Normally, we'd just do `node.checked = node.checked` upon initial mount, less this bug + // this is needed to work around a chrome bug where setting defaultChecked + // will sometimes influence the value of checked (even after detachment). + // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=608416 + // We need to temporarily unset name to avoid disrupting radio button groups. + var name = node.name; + if (name !== '') { + node.name = ''; + } + node.defaultChecked = !node.defaultChecked; + node.defaultChecked = !node.defaultChecked; + if (name !== '') { + node.name = name; + } + } +}; + +function _handleChange(event) { + var props = this._currentElement.props; + + var returnValue = LinkedValueUtils.executeOnChange(props, event); + + // Here we use asap to wait until all updates have propagated, which + // is important when using controlled components within layers: + // https://github.com/facebook/react/issues/1698 + ReactUpdates.asap(forceUpdateIfMounted, this); + + var name = props.name; + if (props.type === 'radio' && name != null) { + var rootNode = ReactDOMComponentTree.getNodeFromInstance(this); + var queryRoot = rootNode; + + while (queryRoot.parentNode) { + queryRoot = queryRoot.parentNode; + } + + // If `rootNode.form` was non-null, then we could try `form.elements`, + // but that sometimes behaves strangely in IE8. We could also try using + // `form.getElementsByName`, but that will only return direct children + // and won't include inputs that use the HTML5 `form=` attribute. Since + // the input might not even be in a form, let's just use the global + // `querySelectorAll` to ensure we don't miss anything. + var group = queryRoot.querySelectorAll('input[name=' + JSON.stringify('' + name) + '][type="radio"]'); + + for (var i = 0; i < group.length; i++) { + var otherNode = group[i]; + if (otherNode === rootNode || otherNode.form !== rootNode.form) { + continue; + } + // This will throw if radio buttons rendered by different copies of React + // and the same name are rendered into the same form (same as #1939). + // That's probably okay; we don't support it just as we don't support + // mixing React radio buttons with non-React ones. + var otherInstance = ReactDOMComponentTree.getInstanceFromNode(otherNode); + !otherInstance ? process.env.NODE_ENV !== 'production' ? invariant(false, 'ReactDOMInput: Mixing React and non-React radio inputs with the same `name` is not supported.') : _prodInvariant('90') : void 0; + // If this is a controlled radio button group, forcing the input that + // was previously checked to update will cause it to be come re-checked + // as appropriate. + ReactUpdates.asap(forceUpdateIfMounted, otherInstance); + } + } + + return returnValue; +} + +module.exports = ReactDOMInput; +}).call(this,require('_process')) +},{"./DOMPropertyOperations":41,"./LinkedValueUtils":52,"./ReactDOMComponentTree":62,"./ReactUpdates":106,"./reactProdInvariant":148,"_process":25,"fbjs/lib/invariant":16,"fbjs/lib/warning":23,"object-assign":24}],68:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var DOMProperty = require('./DOMProperty'); +var ReactComponentTreeHook = require('react/lib/ReactComponentTreeHook'); + +var warning = require('fbjs/lib/warning'); + +var warnedProperties = {}; +var rARIA = new RegExp('^(aria)-[' + DOMProperty.ATTRIBUTE_NAME_CHAR + ']*$'); + +function validateProperty(tagName, name, debugID) { + if (warnedProperties.hasOwnProperty(name) && warnedProperties[name]) { + return true; + } + + if (rARIA.test(name)) { + var lowerCasedName = name.toLowerCase(); + var standardName = DOMProperty.getPossibleStandardName.hasOwnProperty(lowerCasedName) ? DOMProperty.getPossibleStandardName[lowerCasedName] : null; + + // If this is an aria-* attribute, but is not listed in the known DOM + // DOM properties, then it is an invalid aria-* attribute. + if (standardName == null) { + warnedProperties[name] = true; + return false; + } + // aria-* attributes should be lowercase; suggest the lowercase version. + if (name !== standardName) { + process.env.NODE_ENV !== 'production' ? warning(false, 'Unknown ARIA attribute %s. Did you mean %s?%s', name, standardName, ReactComponentTreeHook.getStackAddendumByID(debugID)) : void 0; + warnedProperties[name] = true; + return true; + } + } + + return true; +} + +function warnInvalidARIAProps(debugID, element) { + var invalidProps = []; + + for (var key in element.props) { + var isValid = validateProperty(element.type, key, debugID); + if (!isValid) { + invalidProps.push(key); + } + } + + var unknownPropString = invalidProps.map(function (prop) { + return '`' + prop + '`'; + }).join(', '); + + if (invalidProps.length === 1) { + process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid aria prop %s on <%s> tag. ' + 'For details, see https://fb.me/invalid-aria-prop%s', unknownPropString, element.type, ReactComponentTreeHook.getStackAddendumByID(debugID)) : void 0; + } else if (invalidProps.length > 1) { + process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid aria props %s on <%s> tag. ' + 'For details, see https://fb.me/invalid-aria-prop%s', unknownPropString, element.type, ReactComponentTreeHook.getStackAddendumByID(debugID)) : void 0; + } +} + +function handleElement(debugID, element) { + if (element == null || typeof element.type !== 'string') { + return; + } + if (element.type.indexOf('-') >= 0 || element.props.is) { + return; + } + + warnInvalidARIAProps(debugID, element); +} + +var ReactDOMInvalidARIAHook = { + onBeforeMountComponent: function (debugID, element) { + if (process.env.NODE_ENV !== 'production') { + handleElement(debugID, element); + } + }, + onBeforeUpdateComponent: function (debugID, element) { + if (process.env.NODE_ENV !== 'production') { + handleElement(debugID, element); + } + } +}; + +module.exports = ReactDOMInvalidARIAHook; +}).call(this,require('_process')) +},{"./DOMProperty":40,"_process":25,"fbjs/lib/warning":23,"react/lib/ReactComponentTreeHook":161}],69:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var ReactComponentTreeHook = require('react/lib/ReactComponentTreeHook'); + +var warning = require('fbjs/lib/warning'); + +var didWarnValueNull = false; + +function handleElement(debugID, element) { + if (element == null) { + return; + } + if (element.type !== 'input' && element.type !== 'textarea' && element.type !== 'select') { + return; + } + if (element.props != null && element.props.value === null && !didWarnValueNull) { + process.env.NODE_ENV !== 'production' ? warning(false, '`value` prop on `%s` should not be null. ' + 'Consider using the empty string to clear the component or `undefined` ' + 'for uncontrolled components.%s', element.type, ReactComponentTreeHook.getStackAddendumByID(debugID)) : void 0; + + didWarnValueNull = true; + } +} + +var ReactDOMNullInputValuePropHook = { + onBeforeMountComponent: function (debugID, element) { + handleElement(debugID, element); + }, + onBeforeUpdateComponent: function (debugID, element) { + handleElement(debugID, element); + } +}; + +module.exports = ReactDOMNullInputValuePropHook; +}).call(this,require('_process')) +},{"_process":25,"fbjs/lib/warning":23,"react/lib/ReactComponentTreeHook":161}],70:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ + +'use strict'; + +var _assign = require('object-assign'); + +var React = require('react/lib/React'); +var ReactDOMComponentTree = require('./ReactDOMComponentTree'); +var ReactDOMSelect = require('./ReactDOMSelect'); + +var warning = require('fbjs/lib/warning'); +var didWarnInvalidOptionChildren = false; + +function flattenChildren(children) { + var content = ''; + + // Flatten children and warn if they aren't strings or numbers; + // invalid types are ignored. + React.Children.forEach(children, function (child) { + if (child == null) { + return; + } + if (typeof child === 'string' || typeof child === 'number') { + content += child; + } else if (!didWarnInvalidOptionChildren) { + didWarnInvalidOptionChildren = true; + process.env.NODE_ENV !== 'production' ? warning(false, 'Only strings and numbers are supported as