diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..0db15815 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,43 @@ +# Change Log +All notable changes to this project will be documented in this file. +This project adheres to [Semantic Versioning](http://semver.org/). +This change log adheres to standards from [Keep a CHANGELOG](http://keepachangelog.com). + +## [0.7.0] - 2017-08-25 +### Changed +* Allowed the dateTime property to accept an existing Moment instance, to allow preservation of UTC flag. + +## [0.6.0] - 2017-03-23 +### Changed +* Do not format inputValue when onChange to solve [issue](https://github.com/MYOB-Technology/myob_widgets/issues/460) +[0.6.0]: https://github.com/MYOB-Technology/react-bootstrap-datetimepicker/compare/v0.5.2...v0.6.0 + +## [0.5.2] - 2017-01-25 +### Changed +* Made min and max dates soft disable fields such that they will still be greyed out but but still be able to be clicked +[0.5.2]: https://github.com/MYOB-Technology/react-bootstrap-datetimepicker/compare/v0.4.2...v0.5.2 + +## [0.4.2] - 2016-11-11 +### Fixed +* Initialise the DateTimeField's inputValue to dateTime, even if defaultText is set + +[0.4.2]: https://github.com/MYOB-Technology/react-bootstrap-datetimepicker/compare/v0.4.0...v0.4.2 + +## [0.2.3] - 2016-06-07 +### Changed +* Removed the assumption that dates typed in the input field will be separated by either a ‘/’ for date mode and a space for month mode. + +[0.2.3]: https://github.com/MYOB-Technology/react-bootstrap-datetimepicker/compare/v0.2.2...v0.2.3 + +## [0.2.0] - 2016-04-22 +### Added +* 'onBlur', 'onEnterKeyDown', 'name', and 'tabIndex' props to DateTimeField + +### Fixed +* When selecting a month, it does not reset the error styles of the input +* Auto-evaluates year at 2 digits when both YY and YYYY formats are accepted + +### Changed +* The DateTimeField now assumes that dates typed in the input field will be separated by either a ‘/’ or a space. + +[0.2.0]: https://github.com/MYOB-Technology/react-bootstrap-datetimepicker/compare/v0.1.0...v0.2.0 diff --git a/README.md b/README.md index d3960fc4..eb77f1f1 100644 --- a/README.md +++ b/README.md @@ -6,15 +6,17 @@ This project is a port of https://github.com/Eonasdan/bootstrap-datetimepicker f Usage =============================== -Installation : -``` -npm install react-bootstrap-datetimepicker -``` +Installation : `npm install --save @myob/react-bootstrap-datetimepicker` Then + ```javascript +//ES5 var DateTimeField = require('react-bootstrap-datetimepicker'); +//ES6 +import DateTimeField from "react-bootstrap-datetimepicker" + ... render: function() { @@ -31,28 +33,72 @@ DateTimeField | Name | Type | Default | Description | | ------------ | ------- | ------- | ----------- | -| **dateTime** | string | moment().format('x') | Represents the inital dateTime, this string is then parsed by moment.js | +| **dateTime** | string or moment | moment().format('x') | Represents the initial dateTime. If this is a string it will be parsed by moment.js using **format**, otherwise an existing moment instance may be used. | | **format** | string | "x" | Defines the format moment.js should use to parse and output the date to onChange | -| **inputFormat** | string | "MM/DD/YY h:mm A" | Defines the way the date is represented in the HTML input. It must be a format understanable by moment.js | +| **inputFormat** | string or array | *see default format table below* | Defines the *accepted* date formats in the HTML input. It must be a format understandable by moment.js | +| **inputDisplayFormat** | string | When there is **_no inputFormat given_**:
*see default format table below*.

When an **_inputFormat_** is given and it is a **string**: it takes the inputFormat.

When the **_inputFormat_** is an **array**: it takes the first inputFormat. | Defines the *display* format of the date in the HTML input. It must be a format understandable by moment.js.

If there is an **_inputFormat_** given, the inputDisplayFormat must be one of the formats listed in the inputFormat| | **onChange** | function | x => console.log(x) | Callback trigger when the date changes. `x` is the new datetime value. | +| **onBlur** | function | () => {} | Callback trigger when the date field blurs. | +| **onEnterKeyDown** | function | () => {} | Callback trigger when the Enter key is pressed. | | **showToday** | boolean | true | Highlights today's date | | **size** | string | "md" | Changes the size of the date picker input field. Sizes: "sm", "md", "lg" | | **daysOfWeekDisabled** | array of integer | [] | Disables clicking on some days. Goes from 0 (Sunday) to 6 (Saturday). | | **viewMode** | string or number | 'days' | The default view to display when the picker is shown. ('years', 'months', 'days') | | **inputProps** | object | undefined | Defines additional attributes for the input element of the component. | +| **inputRef** | string or function | inputDateTime | Allows a custom reference to be passed to the input field. | | **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. | | **maxDate** | moment | undefined | The latest date allowed for entry in the calendar view. | -| **mode** | string | undefined | Allows to selectively display only the time picker ('time') or the date picker ('date') | -| **defaultText** | string | {dateTime} | Sets the initial value. Could be an empty string, or helper text. | +| **mode** | string | undefined | Allows to selectively display only the time picker ('time'), date picker ('date'), or month picker ('month') | +| **defaultText** | string | undefined | Sets the input's placeholder value. Could be an empty string, or helper text. | +| **name** | string | undefined | Sets the name of the input element. | +| **tabIndex** | string | undefined | Sets the tabIndex of the input element. | + + +Default Format Based on Mode +======== + +| Mode | Format | +| ------------ | ------- | +| **time** | "h:mm A" | +| **date** | "MM/DD/YY" | +| **month** | "MM/YY" | +| *none given* | "MM/DD/YY h:mm A" | + +Release Process +======== +Once your pull request has been merged to master: + +1. Make sure you have the latest changes by running `git pull` on the master branch. +2. *(Optional)* Check that your changes are reflected in the lib/react-bootstrap-datetimepicker.js file by running `npm run build-npm` and checking the file manually from the lib folder. +3. When you're happy with your changes, run on your console: + + npm run patch-release + #OR + npm run minor-release + #OR + npm run major-release + +Please respect [semantic versioning](http://semver.org/)! + +If the release command fails, then please read what the release command does (see `package.json`), and figure out which step of the process went wrong, so that you can re-try just that bit. If you get stuck, ping #ex-myob-widgets for help! + +Local linking to another project +======== +1. Run `npm run build-npm` from the react-bootstrap-datetimepicker console. +2. In your other project's **package.json**, +Use `"@myob/react-bootstrap-datetimepicker": "#{local_path}/react-bootstrap-datetimepicker"` instead of `"@myob/react-bootstrap-datetimepicker": "0.0.25"` in the dependency list. +3. Run `npm install @myob/react-bootstrap-datetimepicker` from the same folder level as the package.json. Update Warning =============================== Starting from 0.0.6, the 3 github repositories `react-bootstrap-datetimepicker`, `react-bootstrap-datetimepicker-npm` and `react-bootstrap-datetimepicker-bower` are merged in a single one. The build process changed but the API is the same. However now the package exports DateTimeField directly, no need to do : + ```javascript var DateTimeField = require('react-bootstrap-datetimepicker').DateTimeField; ``` instead use : + ```javascript var DateTimeField = require('react-bootstrap-datetimepicker'); ``` diff --git a/bower.json b/bower.json index 36d867b6..cc91b190 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "react-bootstrap-datetimepicker", - "version": "0.0.22", + "version": "0.0.23", "main": [ "./dist/react-bootstrap-datetimepicker.min.js" ], diff --git a/dist/react-bootstrap-datetimepicker.js b/dist/react-bootstrap-datetimepicker.js index 6fa6d9d3..4ac8e9c5 100644 --- a/dist/react-bootstrap-datetimepicker.js +++ b/dist/react-bootstrap-datetimepicker.js @@ -7,7 +7,7 @@ exports["ReactBootstrapDatetimepicker"] = factory(require("React"), require("moment")); else root["ReactBootstrapDatetimepicker"] = factory(root["React"], root["moment"]); -})(this, function(__WEBPACK_EXTERNAL_MODULE_38__, __WEBPACK_EXTERNAL_MODULE_39__) { +})(this, function(__WEBPACK_EXTERNAL_MODULE_38__, __WEBPACK_EXTERNAL_MODULE_180__) { return /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -83,90 +83,115 @@ return /******/ (function(modules) { // webpackBootstrap var _react2 = _interopRequireDefault(_react); - var _moment = __webpack_require__(39); + var _reactDom = __webpack_require__(39); + + var _reactDom2 = _interopRequireDefault(_reactDom); + + var _moment = __webpack_require__(180); var _moment2 = _interopRequireDefault(_moment); - var _classnames = __webpack_require__(40); + var _classnames = __webpack_require__(181); var _classnames2 = _interopRequireDefault(_classnames); - var _DateTimePickerJs = __webpack_require__(41); + var _DateTimePickerJs = __webpack_require__(182); var _DateTimePickerJs2 = _interopRequireDefault(_DateTimePickerJs); - var _ConstantsJs = __webpack_require__(51); + var _ConstantsJs = __webpack_require__(189); var _ConstantsJs2 = _interopRequireDefault(_ConstantsJs); var DateTimeField = (function (_Component) { _inherits(DateTimeField, _Component); - function DateTimeField() { + _createClass(DateTimeField, null, [{ + key: "defaultProps", + value: { + dateTime: (0, _moment2["default"])().format("x"), + format: "x", + showToday: true, + viewMode: "days", + daysOfWeekDisabled: [], + inputRef: 'inputDateTime', + size: _ConstantsJs2["default"].SIZE_MEDIUM, + mode: _ConstantsJs2["default"].MODE_DATETIME, + onChange: function onChange(x) { + console.log(x); + } + }, + enumerable: true + }]); + + function DateTimeField(props) { var _this = this; _classCallCheck(this, DateTimeField); - _get(Object.getPrototypeOf(DateTimeField.prototype), "constructor", this).apply(this, arguments); + _get(Object.getPrototypeOf(DateTimeField.prototype), "constructor", this).call(this, props); - this.resolvePropsInputFormat = function () { - if (_this.props.inputFormat) { - return _this.props.inputFormat; - } + this.getDefaultDateFormat = function () { switch (_this.props.mode) { case _ConstantsJs2["default"].MODE_TIME: return "h:mm A"; case _ConstantsJs2["default"].MODE_DATE: return "MM/DD/YY"; + case _ConstantsJs2["default"].MODE_MONTH: + return "MM/YY"; default: return "MM/DD/YY h:mm A"; } }; - this.state = { - showDatePicker: this.props.mode !== _ConstantsJs2["default"].MODE_TIME, - showTimePicker: this.props.mode === _ConstantsJs2["default"].MODE_TIME, - inputFormat: this.resolvePropsInputFormat(), - buttonIcon: this.props.mode === _ConstantsJs2["default"].MODE_TIME ? "glyphicon-time" : "glyphicon-calendar", - widgetStyle: { - display: "block", - position: "absolute", - left: -9999, - zIndex: "9999 !important" - }, - viewDate: (0, _moment2["default"])(this.props.dateTime, this.props.format, true).startOf("month"), - selectedDate: (0, _moment2["default"])(this.props.dateTime, this.props.format, true), - inputValue: typeof this.props.defaultText !== "undefined" ? this.props.defaultText : (0, _moment2["default"])(this.props.dateTime, this.props.format, true).format(this.resolvePropsInputFormat()) + this.resolvePropsInputDisplayFormat = function () { + var props = arguments.length <= 0 || arguments[0] === undefined ? _this.props : arguments[0]; + + if (props.inputDisplayFormat) { + return props.inputDisplayFormat; + } else if (props.inputFormat && typeof props.inputFormat === 'string') { + return props.inputFormat; + } else if (props.inputFormat && Array.isArray(props.inputFormat)) { + return props.inputFormat[0]; + } + return _this.getDefaultDateFormat(); + }; + + this.resolvePropsInputFormat = function () { + if (_this.props.inputFormat) { + return _this.props.inputFormat; + } + return _this.getDefaultDateFormat(); }; this.componentWillReceiveProps = function (nextProps) { + var state = {}; - if (nextProps.inputFormat !== _this.props.inputFormat) { - state.inputFormat = nextProps.inputFormat; - state.inputValue = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat); - } + state.inputDisplayFormat = _this.resolvePropsInputDisplayFormat(nextProps); - if (nextProps.dateTime !== _this.props.dateTime && (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).isValid()) { + if ((0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).isValid()) { state.viewDate = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).startOf("month"); state.selectedDate = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true); - state.inputValue = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).format(nextProps.inputFormat ? nextProps.inputFormat : _this.state.inputFormat); + state.inputValue = (0, _moment2["default"])(nextProps.dateTime, nextProps.format, true).format(state.inputDisplayFormat); } return _this.setState(state); }; this.onChange = function (event) { - var value = event.target == null ? event : event.target.value; - if ((0, _moment2["default"])(value, _this.state.inputFormat, true).isValid()) { - _this.setState({ - selectedDate: (0, _moment2["default"])(value, _this.state.inputFormat, true), - viewDate: (0, _moment2["default"])(value, _this.state.inputFormat, true).startOf("month") - }); - } + _this.formatValueForEvent('onChange', event); + }; + + this.onBlur = function (event) { + _this.formatValueForEvent('onBlur', event); + }; + + this.checkIsValid = function (value) { + return (0, _moment2["default"])(value, _this.state.inputFormat, true).isValid() || value === _this.props.defaultText || value === ''; + }; + this.setIsValid = function (isValid) { return _this.setState({ - inputValue: value - }, function () { - return this.props.onChange((0, _moment2["default"])(this.state.inputValue, this.state.inputFormat, true).format(this.props.format), value); + isValid: isValid }); }; @@ -174,44 +199,63 @@ return /******/ (function(modules) { // webpackBootstrap return (0, _moment2["default"])(_this.state.inputValue, _this.props.inputFormat, true).format(_this.props.format); }; + this.setSelectedMonth = function (e) { + var target = e.target; + + if (target.className && !target.className.match(/disabled/g)) { + return _this.setState({ + selectedDate: (0, _moment2["default"])(_this.state.viewDate.clone().toDate()).month(e.target.innerHTML).date(1).hour(_this.state.selectedDate.hours()).minute(_this.state.selectedDate.minutes()) + }, function () { + this.closePicker(); + this.props.onChange(this.state.selectedDate.format(this.props.format)); + return this.setState({ + inputValue: this.state.selectedDate.format(this.state.inputDisplayFormat) + }); + }); + } + }; + this.setSelectedDate = function (e) { var target = e.target; if (target.className && !target.className.match(/disabled/g)) { + _this.setIsValid(true); var month = undefined; if (target.className.indexOf("new") >= 0) month = _this.state.viewDate.month() + 1;else if (target.className.indexOf("old") >= 0) month = _this.state.viewDate.month() - 1;else month = _this.state.viewDate.month(); return _this.setState({ - selectedDate: _this.state.viewDate.clone().month(month).date(parseInt(e.target.innerHTML)).hour(_this.state.selectedDate.hours()).minute(_this.state.selectedDate.minutes()) + selectedDate: (0, _moment2["default"])(_this.state.viewDate.clone().toDate()).month(month).date(parseInt(e.target.innerHTML)).hour(_this.state.selectedDate.hours()).minute(_this.state.selectedDate.minutes()) }, function () { this.closePicker(); this.props.onChange(this.state.selectedDate.format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.state.inputFormat) + inputValue: this.state.selectedDate.format(this.state.inputDisplayFormat) }); }); } }; this.setSelectedHour = function (e) { + _this.setIsValid(true); return _this.setState({ selectedDate: _this.state.selectedDate.clone().hour(parseInt(e.target.innerHTML)).minute(_this.state.selectedDate.minutes()) }, function () { this.closePicker(); this.props.onChange(this.state.selectedDate.format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.state.inputFormat) + inputValue: this.state.selectedDate.format(this.state.inputDisplayFormat) }); }); }; this.setSelectedMinute = function (e) { + _this.setIsValid(true); return _this.setState({ selectedDate: _this.state.selectedDate.clone().hour(_this.state.selectedDate.hours()).minute(parseInt(e.target.innerHTML)) }, function () { this.closePicker(); this.props.onChange(this.state.selectedDate.format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.state.inputFormat) + inputValue: this.state.selectedDate.format(this.state.inputDisplayFormat) }); }); }; @@ -234,7 +278,7 @@ return /******/ (function(modules) { // webpackBootstrap }, function () { this.props.onChange(this.state.selectedDate.format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat()) + inputValue: this.state.selectedDate.format(this.resolvePropsInputDisplayFormat()) }); }); }; @@ -245,7 +289,7 @@ return /******/ (function(modules) { // webpackBootstrap }, function () { this.props.onChange(this.state.selectedDate.format(this.props.format)); return this.setState({ - inputValue: this.state.selectedDate.format(this.resolvePropsInputFormat()) + inputValue: this.state.selectedDate.format(this.resolvePropsInputDisplayFormat()) }); }); }; @@ -274,7 +318,7 @@ return /******/ (function(modules) { // webpackBootstrap }, function () { _this.props.onChange(_this.state.selectedDate.format(_this.props.format)); return _this.setState({ - inputValue: _this.state.selectedDate.format(_this.resolvePropsInputFormat()) + inputValue: _this.state.selectedDate.format(_this.resolvePropsInputDisplayFormat()) }); }); }; @@ -285,7 +329,7 @@ return /******/ (function(modules) { // webpackBootstrap }, function () { _this.props.onChange(_this.state.selectedDate.format(_this.props.format)); return _this.setState({ - inputValue: _this.state.selectedDate.format(_this.resolvePropsInputFormat()) + inputValue: _this.state.selectedDate.format(_this.resolvePropsInputDisplayFormat()) }); }); }; @@ -310,9 +354,9 @@ return /******/ (function(modules) { // webpackBootstrap this.togglePeriod = function () { if (_this.state.selectedDate.hour() > 12) { - return _this.onChange(_this.state.selectedDate.clone().subtract(12, "hours").format(_this.state.inputFormat)); + return _this.onChange(_this.state.selectedDate.clone().subtract(12, "hours").format(_this.state.inputDisplayFormat)); } else { - return _this.onChange(_this.state.selectedDate.clone().add(12, "hours").format(_this.state.inputFormat)); + return _this.onChange(_this.state.selectedDate.clone().add(12, "hours").format(_this.state.inputDisplayFormat)); } }; @@ -323,60 +367,97 @@ return /******/ (function(modules) { // webpackBootstrap }); }; - this.onClick = function () { + this.setToday = function () { + var today = (0, _moment2["default"])(); + _this.setIsValid(true); + return _this.setState({ + selectedDate: today + }, function () { + this.closePicker(); + this.props.onChange(today); + return this.setState({ + inputValue: this.state.selectedDate.format(this.resolvePropsInputDisplayFormat()) + }); + }); + }; + + this.calculatePosition = function (options) { var classes = undefined, gBCR = undefined, offset = undefined, placePosition = undefined, scrollTop = undefined, - styles = undefined; + styles = undefined, + widgetOffsetHeight = undefined, + clientHeight = undefined, + height = undefined; + + classes = {}; + if (options) { + classes["months"] = options.monthsDisplayed; + classes["years"] = options.yearsDisplayed; + classes["days"] = options.daysDisplayed; + classes["time"] = options.timeDisplayed; + } + gBCR = _this.refs.dtpbutton.getBoundingClientRect(); + + offset = { + top: gBCR.top + window.pageYOffset - document.documentElement.clientTop, + left: 0 + }; + offset.top = offset.top + _this.refs.datetimepicker.offsetHeight; + //Support for both old version of react and new version (v1.4.2) of react + //The new version of react return the child refs as a component rather than a DomNode + widgetOffsetHeight = _this.refs.widget.offsetHeight || _reactDom2["default"].findDOMNode(_this.refs.widget).offsetHeight; + clientHeight = _this.refs.widget.clientHeight || _reactDom2["default"].findDOMNode(_this.refs.widget).clientHeight; + height = _this.refs.widget.height || _reactDom2["default"].findDOMNode(_this.refs.widget).height; + + scrollTop = window.pageYOffset !== undefined ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; + placePosition = _this.props.direction === "up" ? "top" : _this.props.direction === "bottom" ? "bottom" : _this.props.direction === "auto" ? offset.top + widgetOffsetHeight > window.offsetHeight + scrollTop && widgetOffsetHeight + _this.refs.datetimepicker.offsetHeight > offset.top ? "top" : "bottom" : void 0; + if (placePosition === "top") { + offset.top = -widgetOffsetHeight - 2; + classes.top = true; + classes.bottom = false; + } else { + offset.top = 35; + classes.top = false; + classes.bottom = true; + } + styles = { + display: "block", + position: "absolute", + top: offset.top, + left: offset.left, + right: 40 + }; + return _this.setState({ + widgetStyle: styles, + widgetClasses: classes + }); + }; + + this.onClick = function () { + var displayOptions = {}; + if (_this.state.showPicker) { return _this.closePicker(); } else { _this.setState({ showPicker: true }); - gBCR = _this.refs.dtpbutton.getBoundingClientRect(); - classes = { - "bootstrap-datetimepicker-widget": true, - "dropdown-menu": true - }; - offset = { - top: gBCR.top + window.pageYOffset - document.documentElement.clientTop, - left: gBCR.left + window.pageXOffset - document.documentElement.clientLeft - }; - offset.top = offset.top + _this.refs.datetimepicker.offsetHeight; - scrollTop = window.pageYOffset !== undefined ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; - placePosition = _this.props.direction === "up" ? "top" : _this.props.direction === "bottom" ? "bottom" : _this.props.direction === "auto" ? offset.top + _this.refs.widget.offsetHeight > window.offsetHeight + scrollTop && _this.refs.widget.offsetHeight + _this.refs.datetimepicker.offsetHeight > offset.top ? "top" : "bottom" : void 0; - if (placePosition === "top") { - offset.top = -_this.refs.widget.offsetHeight - _this.clientHeight - 2; - classes.top = true; - classes.bottom = false; - classes["pull-right"] = true; - } else { - offset.top = 40; - classes.top = false; - classes.bottom = true; - classes["pull-right"] = true; - } - styles = { - display: "block", - position: "absolute", - top: offset.top, - left: "auto", - right: 40 - }; - return _this.setState({ - widgetStyle: styles, - widgetClasses: classes - }); + displayOptions.yearsDisplayed = _this.props.mode === 'year'; + displayOptions.monthsDisplayed = _this.props.mode === 'month'; + displayOptions.daysDisplayed = _this.props.mode === 'date'; + displayOptions.timeDisplayed = _this.props.mode === 'time'; + + _this.calculatePosition(displayOptions); } }; this.closePicker = function () { var style = _extends({}, _this.state.widgetStyle); style.left = -9999; - style.display = "none"; + style.display = "block"; return _this.setState({ showPicker: false, widgetStyle: style @@ -409,14 +490,56 @@ return /******/ (function(modules) { // webpackBootstrap return _react2["default"].createElement("span", null); } }; + + var dateTime = props.dateTime ? props.dateTime : (0, _moment2["default"])().format(props.format); + this.state = { + showDatePicker: props.mode !== _ConstantsJs2["default"].MODE_TIME, + showTimePicker: props.mode === _ConstantsJs2["default"].MODE_TIME, + inputDisplayFormat: this.resolvePropsInputDisplayFormat(), + inputFormat: this.resolvePropsInputFormat(), + buttonIcon: props.mode === _ConstantsJs2["default"].MODE_TIME ? "glyphicon-time" : "glyphicon-calendar", + widgetStyle: { + display: "block", + position: "absolute", + left: -9999, + zIndex: "9999 !important" + }, + viewDate: (0, _moment2["default"])(dateTime, props.format, true).startOf("month"), + selectedDate: (0, _moment2["default"])(dateTime, props.format, true), + inputValue: typeof props.defaultText !== "undefined" ? undefined : (0, _moment2["default"])(dateTime, props.format, true).format(this.resolvePropsInputDisplayFormat()), + isValid: true + }; } _createClass(DateTimeField, [{ + key: "formatValueForEvent", + value: function formatValueForEvent(eventName, event) { + var value = event.target == null ? event : event.target.value; + + this.setIsValid(this.checkIsValid(value)); + if ((0, _moment2["default"])(value, this.state.inputFormat, true).isValid()) { + this.setState({ + selectedDate: (0, _moment2["default"])(value, this.state.inputFormat, true), + viewDate: (0, _moment2["default"])(value, this.state.inputFormat, true).startOf("month") + }); + } + + if ((0, _moment2["default"])(value, this.state.inputFormat, true).isValid()) { + value = (0, _moment2["default"])(value, this.state.inputFormat, true).format(this.state.inputDisplayFormat); + } + + return this.setState({ + inputValue: value + }, function () { + return this.props[eventName]((0, _moment2["default"])(this.state.inputValue, this.state.inputFormat, true).format(this.props.format), value); + }); + } + }, { key: "render", value: function render() { return _react2["default"].createElement( "div", - null, + { className: "bootstrap-datetimepicker-wrap" }, this.renderOverlay(), _react2["default"].createElement(_DateTimePickerJs2["default"], { addDecade: this.addDecade, @@ -430,11 +553,13 @@ return /******/ (function(modules) { // webpackBootstrap mode: this.props.mode, ref: "widget", selectedDate: this.state.selectedDate, + setSelectedMonth: this.setSelectedMonth, setSelectedDate: this.setSelectedDate, setSelectedHour: this.setSelectedHour, setSelectedMinute: this.setSelectedMinute, setViewMonth: this.setViewMonth, setViewYear: this.setViewYear, + setToday: this.setToday, showDatePicker: this.state.showDatePicker, showTimePicker: this.state.showTimePicker, showToday: this.props.showToday, @@ -448,12 +573,13 @@ return /******/ (function(modules) { // webpackBootstrap viewDate: this.state.viewDate, viewMode: this.props.viewMode, widgetClasses: this.state.widgetClasses, - widgetStyle: this.state.widgetStyle + widgetStyle: this.state.widgetStyle, + calculatePosition: this.calculatePosition }), _react2["default"].createElement( "div", - { className: "input-group date " + this.size(), ref: "datetimepicker" }, - _react2["default"].createElement("input", _extends({ className: "form-control", onChange: this.onChange, type: "text", value: this.state.inputValue }, this.props.inputProps)), + { className: (0, _classnames2["default"])("input-group date " + this.size(), { "has-error": !this.state.isValid }), ref: "datetimepicker" }, + _react2["default"].createElement("input", _extends({ className: "form-control", onChange: this.onChange, onBlur: this.onBlur, type: "text", value: this.state.inputValue }, this.props.inputProps, { ref: this.props.inputRef, placeholder: this.props.defaultText })), _react2["default"].createElement( "span", { className: "input-group-addon", onBlur: this.onBlur, onClick: this.onClick, ref: "dtpbutton" }, @@ -463,37 +589,24 @@ return /******/ (function(modules) { // webpackBootstrap ); } }], [{ - key: "defaultProps", - value: { - dateTime: (0, _moment2["default"])().format("x"), - format: "x", - showToday: true, - viewMode: "days", - daysOfWeekDisabled: [], - size: _ConstantsJs2["default"].SIZE_MEDIUM, - mode: _ConstantsJs2["default"].MODE_DATETIME, - onChange: function onChange(x) { - console.log(x); - } - }, - enumerable: true - }, { key: "propTypes", value: { dateTime: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), onChange: _react.PropTypes.func, format: _react.PropTypes.string, inputProps: _react.PropTypes.object, - inputFormat: _react.PropTypes.string, + inputFormat: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.arrayOf(_react.PropTypes.string)]), + inputDisplayFormat: _react.PropTypes.string, defaultText: _react.PropTypes.string, - mode: _react.PropTypes.oneOf([_ConstantsJs2["default"].MODE_DATE, _ConstantsJs2["default"].MODE_DATETIME, _ConstantsJs2["default"].MODE_TIME]), + mode: _react.PropTypes.oneOf([_ConstantsJs2["default"].MODE_DATE, _ConstantsJs2["default"].MODE_MONTH, _ConstantsJs2["default"].MODE_DATETIME, _ConstantsJs2["default"].MODE_TIME]), minDate: _react.PropTypes.object, maxDate: _react.PropTypes.object, direction: _react.PropTypes.string, showToday: _react.PropTypes.bool, viewMode: _react.PropTypes.string, size: _react.PropTypes.oneOf([_ConstantsJs2["default"].SIZE_SMALL, _ConstantsJs2["default"].SIZE_MEDIUM, _ConstantsJs2["default"].SIZE_LARGE]), - daysOfWeekDisabled: _react.PropTypes.arrayOf(_react.PropTypes.number) + daysOfWeekDisabled: _react.PropTypes.arrayOf(_react.PropTypes.number), + isValid: _react.PropTypes.bool }, enumerable: true }]); @@ -865,207 +978,18140 @@ return /******/ (function(modules) { // webpackBootstrap }; /***/ }, -/* 25 */ -/***/ function(module, exports) { +/* 25 */ +/***/ function(module, exports) { + + module.exports = function(it){ + return typeof it === 'object' ? it !== null : typeof it === 'function'; + }; + +/***/ }, +/* 26 */ +/***/ function(module, exports, __webpack_require__) { + + var isObject = __webpack_require__(25); + module.exports = function(it){ + if(!isObject(it))throw TypeError(it + ' is not an object!'); + return it; + }; + +/***/ }, +/* 27 */ +/***/ function(module, exports, __webpack_require__) { + + "use strict"; + + var _Object$defineProperty = __webpack_require__(28)["default"]; + + exports["default"] = (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; + }; + })(); + + exports.__esModule = true; + +/***/ }, +/* 28 */ +/***/ function(module, exports, __webpack_require__) { + + module.exports = { "default": __webpack_require__(29), __esModule: true }; + +/***/ }, +/* 29 */ +/***/ function(module, exports, __webpack_require__) { + + var $ = __webpack_require__(5); + module.exports = function defineProperty(it, key, desc){ + return $.setDesc(it, key, desc); + }; + +/***/ }, +/* 30 */ +/***/ function(module, exports) { + + "use strict"; + + exports["default"] = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + }; + + exports.__esModule = true; + +/***/ }, +/* 31 */ +/***/ function(module, exports, __webpack_require__) { + + "use strict"; + + var _Object$assign = __webpack_require__(32)["default"]; + + exports["default"] = _Object$assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + exports.__esModule = true; + +/***/ }, +/* 32 */ +/***/ function(module, exports, __webpack_require__) { + + module.exports = { "default": __webpack_require__(33), __esModule: true }; + +/***/ }, +/* 33 */ +/***/ function(module, exports, __webpack_require__) { + + __webpack_require__(34); + module.exports = __webpack_require__(14).Object.assign; + +/***/ }, +/* 34 */ +/***/ function(module, exports, __webpack_require__) { + + // 19.1.3.1 Object.assign(target, source) + var $export = __webpack_require__(12); + + $export($export.S + $export.F, 'Object', {assign: __webpack_require__(35)}); + +/***/ }, +/* 35 */ +/***/ function(module, exports, __webpack_require__) { + + // 19.1.2.1 Object.assign(target, source, ...) + var $ = __webpack_require__(5) + , toObject = __webpack_require__(36) + , IObject = __webpack_require__(8); + + // should work with symbols and should have deterministic property order (V8 bug) + module.exports = __webpack_require__(17)(function(){ + var a = Object.assign + , A = {} + , B = {} + , S = Symbol() + , K = 'abcdefghijklmnopqrst'; + A[S] = 7; + K.split('').forEach(function(k){ B[k] = k; }); + return a({}, A)[S] != 7 || Object.keys(a({}, B)).join('') != K; + }) ? function assign(target, source){ // eslint-disable-line no-unused-vars + var T = toObject(target) + , $$ = arguments + , $$len = $$.length + , index = 1 + , getKeys = $.getKeys + , getSymbols = $.getSymbols + , isEnum = $.isEnum; + while($$len > index){ + var S = IObject($$[index++]) + , keys = getSymbols ? getKeys(S).concat(getSymbols(S)) : getKeys(S) + , length = keys.length + , j = 0 + , key; + while(length > j)if(isEnum.call(S, key = keys[j++]))T[key] = S[key]; + } + return T; + } : Object.assign; + +/***/ }, +/* 36 */ +/***/ function(module, exports, __webpack_require__) { + + // 7.1.13 ToObject(argument) + var defined = __webpack_require__(10); + module.exports = function(it){ + return Object(defined(it)); + }; + +/***/ }, +/* 37 */ +/***/ function(module, exports) { + + "use strict"; + + exports["default"] = function (obj) { + return obj && obj.__esModule ? obj : { + "default": obj + }; + }; + + exports.__esModule = true; + +/***/ }, +/* 38 */ +/***/ function(module, exports) { + + module.exports = __WEBPACK_EXTERNAL_MODULE_38__; + +/***/ }, +/* 39 */ +/***/ function(module, exports, __webpack_require__) { + + 'use strict'; + + module.exports = __webpack_require__(40); + + +/***/ }, +/* 40 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule ReactDOM + */ + + /* globals __REACT_DEVTOOLS_GLOBAL_HOOK__*/ + + 'use strict'; + + var ReactCurrentOwner = __webpack_require__(41); + var ReactDOMTextComponent = __webpack_require__(42); + var ReactDefaultInjection = __webpack_require__(107); + var ReactInstanceHandles = __webpack_require__(81); + var ReactMount = __webpack_require__(64); + var ReactPerf = __webpack_require__(54); + var ReactReconciler = __webpack_require__(86); + var ReactUpdates = __webpack_require__(90); + var ReactVersion = __webpack_require__(178); + + var findDOMNode = __webpack_require__(127); + var renderSubtreeIntoContainer = __webpack_require__(179); + var warning = __webpack_require__(61); + + ReactDefaultInjection.inject(); + + var render = ReactPerf.measure('React', 'render', ReactMount.render); + + var React = { + findDOMNode: findDOMNode, + render: 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. + /* eslint-enable camelcase */ + if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject === 'function') { + __REACT_DEVTOOLS_GLOBAL_HOOK__.inject({ + CurrentOwner: ReactCurrentOwner, + InstanceHandles: ReactInstanceHandles, + Mount: ReactMount, + Reconciler: ReactReconciler, + TextComponent: ReactDOMTextComponent + }); + } + + if (false) { + 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) { + console.debug('Download the React DevTools for a better development experience: ' + 'https://fb.me/react-devtools'); + } + } + + // 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: ' + '') : undefined; + + 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.split, String.prototype.trim, + + // shams + Object.create, Object.freeze]; + + for (var i = 0; i < expectedFeatures.length; i++) { + if (!expectedFeatures[i]) { + console.error('One or more ES5 shim/shams expected by React are not available: ' + 'https://fb.me/react-warning-polyfills'); + break; + } + } + } + } + + module.exports = React; + +/***/ }, +/* 41 */ +/***/ function(module, exports) { + + /** + * Copyright 2013-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. + * + * @providesModule ReactCurrentOwner + */ + + 'use strict'; + + /** + * Keeps track of the current owner. + * + * The current owner is the component who should own any components that are + * currently being constructed. + */ + var ReactCurrentOwner = { + + /** + * @internal + * @type {ReactComponent} + */ + current: null + + }; + + module.exports = ReactCurrentOwner; + +/***/ }, +/* 42 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule ReactDOMTextComponent + * @typechecks static-only + */ + + 'use strict'; + + var DOMChildrenOperations = __webpack_require__(43); + var DOMPropertyOperations = __webpack_require__(58); + var ReactComponentBrowserEnvironment = __webpack_require__(62); + var ReactMount = __webpack_require__(64); + + var assign = __webpack_require__(75); + var escapeTextContentForBrowser = __webpack_require__(57); + var setTextContent = __webpack_require__(56); + var validateDOMNesting = __webpack_require__(106); + + /** + * Text nodes violate a couple assumptions that React makes about components: + * + * - When mounting text into the DOM, adjacent text nodes are merged. + * - Text nodes cannot be assigned a React root ID. + * + * This component is used to wrap strings in elements so that they can undergo + * the same reconciliation that is applied to elements. + * + * TODO: Investigate representing React components in the DOM with text nodes. + * + * @class ReactDOMTextComponent + * @extends ReactComponent + * @internal + */ + var ReactDOMTextComponent = function (props) { + // This constructor and its argument is currently used by mocks. + }; + + assign(ReactDOMTextComponent.prototype, { + + /** + * @param {ReactText} text + * @internal + */ + construct: function (text) { + // TODO: This is really a ReactText (ReactNode), not a ReactElement + this._currentElement = text; + this._stringText = '' + text; + + // Properties + this._rootNodeID = null; + this._mountIndex = 0; + }, + + /** + * Creates the markup for this text node. This node is not intended to have + * any features besides containing text content. + * + * @param {string} rootID DOM ID of the root node. + * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction + * @return {string} Markup for this text node. + * @internal + */ + mountComponent: function (rootID, transaction, context) { + if (false) { + if (context[validateDOMNesting.ancestorInfoContextKey]) { + validateDOMNesting('span', null, context[validateDOMNesting.ancestorInfoContextKey]); + } + } + + this._rootNodeID = rootID; + if (transaction.useCreateElement) { + var ownerDocument = context[ReactMount.ownerDocumentContextKey]; + var el = ownerDocument.createElement('span'); + DOMPropertyOperations.setAttributeForID(el, rootID); + // Populate node cache + ReactMount.getID(el); + setTextContent(el, this._stringText); + return el; + } else { + var escapedText = escapeTextContentForBrowser(this._stringText); + + if (transaction.renderToStaticMarkup) { + // Normally we'd wrap this in a `span` for the reasons stated above, but + // since this is a situation where React won't take over (static pages), + // we can simply return the text as it is. + return escapedText; + } + + return '' + escapedText + ''; + } + }, + + /** + * Updates this component by updating the text content. + * + * @param {ReactText} nextText The next text content + * @param {ReactReconcileTransaction} transaction + * @internal + */ + receiveComponent: function (nextText, transaction) { + if (nextText !== this._currentElement) { + this._currentElement = nextText; + var nextStringText = '' + nextText; + if (nextStringText !== this._stringText) { + // TODO: Save this as pending props and use performUpdateIfNecessary + // and/or updateComponent to do the actual update for consistency with + // other component types? + this._stringText = nextStringText; + var node = ReactMount.getNode(this._rootNodeID); + DOMChildrenOperations.updateTextContent(node, nextStringText); + } + } + }, + + unmountComponent: function () { + ReactComponentBrowserEnvironment.unmountIDFromEnvironment(this._rootNodeID); + } + + }); + + module.exports = ReactDOMTextComponent; + +/***/ }, +/* 43 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule DOMChildrenOperations + * @typechecks static-only + */ + + 'use strict'; + + var Danger = __webpack_require__(44); + var ReactMultiChildUpdateTypes = __webpack_require__(52); + var ReactPerf = __webpack_require__(54); + + var setInnerHTML = __webpack_require__(55); + var setTextContent = __webpack_require__(56); + var invariant = __webpack_require__(49); + + /** + * 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 + */ + function insertChildAt(parentNode, childNode, index) { + // By exploiting arrays returning `undefined` for an undefined index, we can + // rely exclusively on `insertBefore(node, null)` instead of also using + // `appendChild(node)`. However, using `undefined` is not allowed by all + // browsers so we must replace it with `null`. + + // fix render order error in safari + // IE8 will throw error when index out of list size. + var beforeChild = index >= parentNode.childNodes.length ? null : parentNode.childNodes.item(index); + + parentNode.insertBefore(childNode, beforeChild); + } + + /** + * Operations for updating with DOM children. + */ + var DOMChildrenOperations = { + + dangerouslyReplaceNodeWithMarkup: Danger.dangerouslyReplaceNodeWithMarkup, + + updateTextContent: setTextContent, + + /** + * 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. + * @param {array} markupList List of markup strings. + * @internal + */ + processUpdates: function (updates, markupList) { + var update; + // Mapping from parent IDs to initial child orderings. + var initialChildren = null; + // List of children that will be moved or removed. + var updatedChildren = null; + + for (var i = 0; i < updates.length; i++) { + update = updates[i]; + if (update.type === ReactMultiChildUpdateTypes.MOVE_EXISTING || update.type === ReactMultiChildUpdateTypes.REMOVE_NODE) { + var updatedIndex = update.fromIndex; + var updatedChild = update.parentNode.childNodes[updatedIndex]; + var parentID = update.parentID; + + !updatedChild ? false ? invariant(false, 'processUpdates(): Unable to find child %s of element. This ' + 'probably means the DOM was unexpectedly mutated (e.g., by the ' + 'browser), usually due to forgetting a when using tables, ' + 'nesting tags like
,

, or , or using non-SVG elements ' + 'in an parent. Try inspecting the child nodes of the element ' + 'with React ID `%s`.', updatedIndex, parentID) : invariant(false) : undefined; + + initialChildren = initialChildren || {}; + initialChildren[parentID] = initialChildren[parentID] || []; + initialChildren[parentID][updatedIndex] = updatedChild; + + updatedChildren = updatedChildren || []; + updatedChildren.push(updatedChild); + } + } + + var renderedMarkup; + // markupList is either a list of markup or just a list of elements + if (markupList.length && typeof markupList[0] === 'string') { + renderedMarkup = Danger.dangerouslyRenderMarkup(markupList); + } else { + renderedMarkup = markupList; + } + + // Remove updated children first so that `toIndex` is consistent. + if (updatedChildren) { + for (var j = 0; j < updatedChildren.length; j++) { + updatedChildren[j].parentNode.removeChild(updatedChildren[j]); + } + } + + for (var k = 0; k < updates.length; k++) { + update = updates[k]; + switch (update.type) { + case ReactMultiChildUpdateTypes.INSERT_MARKUP: + insertChildAt(update.parentNode, renderedMarkup[update.markupIndex], update.toIndex); + break; + case ReactMultiChildUpdateTypes.MOVE_EXISTING: + insertChildAt(update.parentNode, initialChildren[update.parentID][update.fromIndex], update.toIndex); + break; + case ReactMultiChildUpdateTypes.SET_MARKUP: + setInnerHTML(update.parentNode, update.content); + break; + case ReactMultiChildUpdateTypes.TEXT_CONTENT: + setTextContent(update.parentNode, update.content); + break; + case ReactMultiChildUpdateTypes.REMOVE_NODE: + // Already removed by the for-loop above. + break; + } + } + } + + }; + + ReactPerf.measureMethods(DOMChildrenOperations, 'DOMChildrenOperations', { + updateTextContent: 'updateTextContent' + }); + + module.exports = DOMChildrenOperations; + +/***/ }, +/* 44 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule Danger + * @typechecks static-only + */ + + 'use strict'; + + var ExecutionEnvironment = __webpack_require__(45); + + var createNodesFromMarkup = __webpack_require__(46); + var emptyFunction = __webpack_require__(51); + var getMarkupWrap = __webpack_require__(50); + var invariant = __webpack_require__(49); + + var OPEN_TAG_NAME_EXP = /^(<[^ \/>]+)/; + var RESULT_INDEX_ATTR = 'data-danger-index'; + + /** + * Extracts the `nodeName` from a string of markup. + * + * NOTE: Extracting the `nodeName` does not require a regular expression match + * because we make assumptions about React-generated markup (i.e. there are no + * spaces surrounding the opening tag and there is at least one attribute). + * + * @param {string} markup String of markup. + * @return {string} Node name of the supplied markup. + * @see http://jsperf.com/extract-nodename + */ + function getNodeName(markup) { + return markup.substring(1, markup.indexOf(' ')); + } + + var Danger = { + + /** + * Renders markup into an array of nodes. The markup is expected to render + * into a list of root nodes. Also, the length of `resultList` and + * `markupList` should be the same. + * + * @param {array} markupList List of markup strings to render. + * @return {array} List of rendered nodes. + * @internal + */ + dangerouslyRenderMarkup: function (markupList) { + !ExecutionEnvironment.canUseDOM ? false ? invariant(false, 'dangerouslyRenderMarkup(...): 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.') : invariant(false) : undefined; + var nodeName; + var markupByNodeName = {}; + // Group markup by `nodeName` if a wrap is necessary, else by '*'. + for (var i = 0; i < markupList.length; i++) { + !markupList[i] ? false ? invariant(false, 'dangerouslyRenderMarkup(...): Missing markup.') : invariant(false) : undefined; + nodeName = getNodeName(markupList[i]); + nodeName = getMarkupWrap(nodeName) ? nodeName : '*'; + markupByNodeName[nodeName] = markupByNodeName[nodeName] || []; + markupByNodeName[nodeName][i] = markupList[i]; + } + var resultList = []; + var resultListAssignmentCount = 0; + for (nodeName in markupByNodeName) { + if (!markupByNodeName.hasOwnProperty(nodeName)) { + continue; + } + var markupListByNodeName = markupByNodeName[nodeName]; + + // This for-in loop skips the holes of the sparse array. The order of + // iteration should follow the order of assignment, which happens to match + // numerical index order, but we don't rely on that. + var resultIndex; + for (resultIndex in markupListByNodeName) { + if (markupListByNodeName.hasOwnProperty(resultIndex)) { + var markup = markupListByNodeName[resultIndex]; + + // Push the requested markup with an additional RESULT_INDEX_ATTR + // attribute. If the markup does not start with a < character, it + // will be discarded below (with an appropriate console.error). + markupListByNodeName[resultIndex] = markup.replace(OPEN_TAG_NAME_EXP, + // This index will be parsed back out below. + '$1 ' + RESULT_INDEX_ATTR + '="' + resultIndex + '" '); + } + } + + // Render each group of markup with similar wrapping `nodeName`. + var renderNodes = createNodesFromMarkup(markupListByNodeName.join(''), emptyFunction // Do nothing special with ', '
']; + 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 ? false ? invariant(false, 'Markup wrapping node not initialized') : invariant(false) : undefined; + 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; + +/***/ }, +/* 51 */ +/***/ function(module, exports) { + + /** + * Copyright 2013-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. + * + * @providesModule emptyFunction + */ + + "use strict"; + + 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. + */ + 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; + +/***/ }, +/* 52 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule ReactMultiChildUpdateTypes + */ + + 'use strict'; + + var keyMirror = __webpack_require__(53); + + /** + * When a component's children are updated, a series of update configuration + * objects are created in order to batch and serialize the required changes. + * + * Enumerates all the possible types of update configurations. + * + * @internal + */ + var ReactMultiChildUpdateTypes = keyMirror({ + INSERT_MARKUP: null, + MOVE_EXISTING: null, + REMOVE_NODE: null, + SET_MARKUP: null, + TEXT_CONTENT: null + }); + + module.exports = ReactMultiChildUpdateTypes; + +/***/ }, +/* 53 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule keyMirror + * @typechecks static-only + */ + + 'use strict'; + + var invariant = __webpack_require__(49); + + /** + * Constructs an enumeration with keys equal to their value. + * + * For example: + * + * var COLORS = keyMirror({blue: null, red: null}); + * var myColor = COLORS.blue; + * var isColorValid = !!COLORS[myColor]; + * + * The last line could not be performed if the values of the generated enum were + * not equal to their keys. + * + * Input: {key1: val1, key2: val2} + * Output: {key1: key1, key2: key2} + * + * @param {object} obj + * @return {object} + */ + var keyMirror = function (obj) { + var ret = {}; + var key; + !(obj instanceof Object && !Array.isArray(obj)) ? false ? invariant(false, 'keyMirror(...): Argument must be an object.') : invariant(false) : undefined; + for (key in obj) { + if (!obj.hasOwnProperty(key)) { + continue; + } + ret[key] = key; + } + return ret; + }; + + module.exports = keyMirror; + +/***/ }, +/* 54 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule ReactPerf + * @typechecks static-only + */ + + 'use strict'; + + /** + * ReactPerf is a general AOP system designed to measure performance. This + * module only has the hooks: see ReactDefaultPerf for the analysis tool. + */ + var ReactPerf = { + /** + * Boolean to enable/disable measurement. Set to false by default to prevent + * accidental logging and perf loss. + */ + enableMeasure: false, + + /** + * Holds onto the measure function in use. By default, don't measure + * anything, but we'll override this if we inject a measure function. + */ + storedMeasure: _noMeasure, + + /** + * @param {object} object + * @param {string} objectName + * @param {object} methodNames + */ + measureMethods: function (object, objectName, methodNames) { + if (false) { + for (var key in methodNames) { + if (!methodNames.hasOwnProperty(key)) { + continue; + } + object[key] = ReactPerf.measure(objectName, methodNames[key], object[key]); + } + } + }, + + /** + * Use this to wrap methods you want to measure. Zero overhead in production. + * + * @param {string} objName + * @param {string} fnName + * @param {function} func + * @return {function} + */ + measure: function (objName, fnName, func) { + if (false) { + var measuredFunc = null; + var wrapper = function () { + if (ReactPerf.enableMeasure) { + if (!measuredFunc) { + measuredFunc = ReactPerf.storedMeasure(objName, fnName, func); + } + return measuredFunc.apply(this, arguments); + } + return func.apply(this, arguments); + }; + wrapper.displayName = objName + '_' + fnName; + return wrapper; + } + return func; + }, + + injection: { + /** + * @param {function} measure + */ + injectMeasure: function (measure) { + ReactPerf.storedMeasure = measure; + } + } + }; + + /** + * Simply passes through the measured function, without measuring it. + * + * @param {string} objName + * @param {string} fnName + * @param {function} func + * @return {function} + */ + function _noMeasure(objName, fnName, func) { + return func; + } + + module.exports = ReactPerf; + +/***/ }, +/* 55 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule setInnerHTML + */ + + /* globals MSApp */ + + 'use strict'; + + var ExecutionEnvironment = __webpack_require__(45); + + var WHITESPACE_TEST = /^[ \r\n\t\f]/; + var NONVISIBLE_TEST = /<(!--|link|noscript|meta|script|style)[ \r\n\t\f\/>]/; + + /** + * Set the innerHTML property of a node, ensuring that whitespace is preserved + * even in IE8. + * + * @param {DOMElement} node + * @param {string} html + * @internal + */ + var setInnerHTML = function (node, html) { + node.innerHTML = html; + }; + + // Win8 apps: Allow all html to be inserted + if (typeof MSApp !== 'undefined' && MSApp.execUnsafeLocalFunction) { + setInnerHTML = function (node, html) { + MSApp.execUnsafeLocalFunction(function () { + node.innerHTML = html; + }); + }; + } + + if (ExecutionEnvironment.canUseDOM) { + // IE8: When updating a just created node with innerHTML only leading + // whitespace is removed. When updating an existing node with innerHTML + // whitespace in root TextNodes is also collapsed. + // @see quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html + + // Feature detection; only IE8 is known to behave improperly like this. + var testElement = document.createElement('div'); + testElement.innerHTML = ' '; + if (testElement.innerHTML === '') { + setInnerHTML = function (node, html) { + // Magic theory: IE8 supposedly differentiates between added and updated + // nodes when processing innerHTML, innerHTML on updated nodes suffers + // from worse whitespace behavior. Re-adding a node like this triggers + // the initial and more favorable whitespace behavior. + // TODO: What to do on a detached node? + if (node.parentNode) { + node.parentNode.replaceChild(node, node); + } + + // We also implement a workaround for non-visible tags disappearing into + // thin air on IE8, this only happens if there is no visible text + // in-front of the non-visible tags. Piggyback on the whitespace fix + // and simply check if any non-visible tags appear in the source. + if (WHITESPACE_TEST.test(html) || html[0] === '<' && NONVISIBLE_TEST.test(html)) { + // Recover leading whitespace by temporarily prepending any character. + // \uFEFF has the potential advantage of being zero-width/invisible. + // UglifyJS drops U+FEFF chars when parsing, so use String.fromCharCode + // in hopes that this is preserved even if "\uFEFF" is transformed to + // the actual Unicode character (by Babel, for example). + // https://github.com/mishoo/UglifyJS2/blob/v2.4.20/lib/parse.js#L216 + node.innerHTML = String.fromCharCode(0xFEFF) + html; + + // deleteData leaves an empty `TextNode` which offsets the index of all + // children. Definitely want to avoid this. + var textNode = node.firstChild; + if (textNode.data.length === 1) { + node.removeChild(textNode); + } else { + textNode.deleteData(0, 1); + } + } else { + node.innerHTML = html; + } + }; + } + } + + module.exports = setInnerHTML; + +/***/ }, +/* 56 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule setTextContent + */ + + 'use strict'; + + var ExecutionEnvironment = __webpack_require__(45); + var escapeTextContentForBrowser = __webpack_require__(57); + var setInnerHTML = __webpack_require__(55); + + /** + * Set the textContent property of a node, ensuring that whitespace is preserved + * even in IE8. innerText is a poor substitute for textContent and, among many + * issues, inserts
instead of the literal newline chars. innerHTML behaves + * as it should. + * + * @param {DOMElement} node + * @param {string} text + * @internal + */ + var setTextContent = function (node, text) { + node.textContent = text; + }; + + if (ExecutionEnvironment.canUseDOM) { + if (!('textContent' in document.documentElement)) { + setTextContent = function (node, text) { + setInnerHTML(node, escapeTextContentForBrowser(text)); + }; + } + } + + module.exports = setTextContent; + +/***/ }, +/* 57 */ +/***/ function(module, exports) { + + /** + * Copyright 2013-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. + * + * @providesModule escapeTextContentForBrowser + */ + + 'use strict'; + + var ESCAPE_LOOKUP = { + '&': '&', + '>': '>', + '<': '<', + '"': '"', + '\'': ''' + }; + + var ESCAPE_REGEX = /[&><"']/g; + + function escaper(match) { + return ESCAPE_LOOKUP[match]; + } + + /** + * Escapes text to prevent scripting attacks. + * + * @param {*} text Text value to escape. + * @return {string} An escaped string. + */ + function escapeTextContentForBrowser(text) { + return ('' + text).replace(ESCAPE_REGEX, escaper); + } + + module.exports = escapeTextContentForBrowser; + +/***/ }, +/* 58 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule DOMPropertyOperations + * @typechecks static-only + */ + + 'use strict'; + + var DOMProperty = __webpack_require__(59); + var ReactPerf = __webpack_require__(54); + + var quoteAttributeValueForBrowser = __webpack_require__(60); + var warning = __webpack_require__(61); + + // Simplified subset + var VALID_ATTRIBUTE_NAME_REGEX = /^[a-zA-Z_][\w\.\-]*$/; + 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; + false ? warning(false, 'Invalid attribute name: `%s`', attributeName) : undefined; + return false; + } + + function shouldIgnoreValue(propertyInfo, value) { + return value == null || propertyInfo.hasBooleanValue && !value || propertyInfo.hasNumericValue && isNaN(value) || propertyInfo.hasPositiveNumericValue && value < 1 || propertyInfo.hasOverloadedBooleanValue && value === false; + } + + if (false) { + var reactProps = { + children: true, + dangerouslySetInnerHTML: true, + key: true, + ref: true + }; + var warnedProperties = {}; + + var warnUnknownProperty = function (name) { + if (reactProps.hasOwnProperty(name) && reactProps[name] || warnedProperties.hasOwnProperty(name) && warnedProperties[name]) { + return; + } + + warnedProperties[name] = true; + var lowerCasedName = name.toLowerCase(); + + // data-* attributes should be lowercase; suggest the lowercase version + var standardName = DOMProperty.isCustomAttribute(lowerCasedName) ? lowerCasedName : DOMProperty.getPossibleStandardName.hasOwnProperty(lowerCasedName) ? DOMProperty.getPossibleStandardName[lowerCasedName] : null; + + // For now, only warn when we have a suggested correction. This prevents + // logging too much when using transferPropsTo. + process.env.NODE_ENV !== 'production' ? warning(standardName == null, 'Unknown DOM property %s. Did you mean %s?', name, standardName) : undefined; + }; + } + + /** + * 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); + }, + + /** + * 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); + } else if (false) { + warnUnknownProperty(name); + } + 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); + } else if (propertyInfo.mustUseAttribute) { + 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 { + var propName = propertyInfo.propertyName; + // Must explicitly cast values for HAS_SIDE_EFFECTS-properties to the + // property type before comparing; only `value` does and is string. + if (!propertyInfo.hasSideEffects || '' + node[propName] !== '' + value) { + // Contrary to `setAttribute`, object properties are properly + // `toString`ed by IE8/9. + node[propName] = value; + } + } + } else if (DOMProperty.isCustomAttribute(name)) { + DOMPropertyOperations.setValueForAttribute(node, name, value); + } else if (false) { + warnUnknownProperty(name); + } + }, + + setValueForAttribute: function (node, name, value) { + if (!isAttributeNameSafe(name)) { + return; + } + if (value == null) { + node.removeAttribute(name); + } else { + node.setAttribute(name, '' + value); + } + }, + + /** + * 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.mustUseAttribute) { + node.removeAttribute(propertyInfo.attributeName); + } else { + var propName = propertyInfo.propertyName; + var defaultValue = DOMProperty.getDefaultValueForProperty(node.nodeName, propName); + if (!propertyInfo.hasSideEffects || '' + node[propName] !== defaultValue) { + node[propName] = defaultValue; + } + } + } else if (DOMProperty.isCustomAttribute(name)) { + node.removeAttribute(name); + } else if (false) { + warnUnknownProperty(name); + } + } + + }; + + ReactPerf.measureMethods(DOMPropertyOperations, 'DOMPropertyOperations', { + setValueForProperty: 'setValueForProperty', + setValueForAttribute: 'setValueForAttribute', + deleteValueForProperty: 'deleteValueForProperty' + }); + + module.exports = DOMPropertyOperations; + +/***/ }, +/* 59 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule DOMProperty + * @typechecks static-only + */ + + 'use strict'; + + var invariant = __webpack_require__(49); + + 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_ATTRIBUTE: 0x1, + MUST_USE_PROPERTY: 0x2, + HAS_SIDE_EFFECTS: 0x4, + HAS_BOOLEAN_VALUE: 0x8, + HAS_NUMERIC_VALUE: 0x10, + HAS_POSITIVE_NUMERIC_VALUE: 0x20 | 0x10, + HAS_OVERLOADED_BOOLEAN_VALUE: 0x40, + + /** + * 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) ? false ? 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) : invariant(false) : undefined; + + var lowerCased = propName.toLowerCase(); + var propConfig = Properties[propName]; + + var propertyInfo = { + attributeName: lowerCased, + attributeNamespace: null, + propertyName: propName, + mutationMethod: null, + + mustUseAttribute: checkMask(propConfig, Injection.MUST_USE_ATTRIBUTE), + mustUseProperty: checkMask(propConfig, Injection.MUST_USE_PROPERTY), + hasSideEffects: checkMask(propConfig, Injection.HAS_SIDE_EFFECTS), + 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.mustUseAttribute || !propertyInfo.mustUseProperty) ? false ? invariant(false, 'DOMProperty: Cannot require using both attribute and property: %s', propName) : invariant(false) : undefined; + !(propertyInfo.mustUseProperty || !propertyInfo.hasSideEffects) ? false ? invariant(false, 'DOMProperty: Properties that have side effects must use property: %s', propName) : invariant(false) : undefined; + !(propertyInfo.hasBooleanValue + propertyInfo.hasNumericValue + propertyInfo.hasOverloadedBooleanValue <= 1) ? false ? invariant(false, 'DOMProperty: Value can be one of boolean, overloaded boolean, or ' + 'numeric value, but not a combination: %s', propName) : invariant(false) : undefined; + + if (false) { + DOMProperty.getPossibleStandardName[lowerCased] = propName; + } + + if (DOMAttributeNames.hasOwnProperty(propName)) { + var attributeName = DOMAttributeNames[propName]; + propertyInfo.attributeName = attributeName; + if (false) { + 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; + } + } + }; + var defaultValueCache = {}; + + /** + * 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', + + /** + * 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. + * mustUseAttribute: + * Whether the property must be accessed and mutated using `*Attribute()`. + * (This includes anything that fails ` in `.) + * mustUseProperty: + * Whether the property must be accessed and mutated as an object property. + * hasSideEffects: + * Whether or not setting a value causes side effects such as triggering + * resources to be loaded or text selection changes. If true, we read from + * the DOM before updating to ensure that the value is only set if it has + * changed. + * 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__. + * @type {Object} + */ + getPossibleStandardName: false ? {} : 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; + }, + + /** + * Returns the default property value for a DOM property (i.e., not an + * attribute). Most default values are '' or false, but not all. Worse yet, + * some (in particular, `type`) vary depending on the type of element. + * + * TODO: Is it better to grab all the possible properties when creating an + * element to avoid having to create the same element twice? + */ + getDefaultValueForProperty: function (nodeName, prop) { + var nodeDefaults = defaultValueCache[nodeName]; + var testElement; + if (!nodeDefaults) { + defaultValueCache[nodeName] = nodeDefaults = {}; + } + if (!(prop in nodeDefaults)) { + testElement = document.createElement(nodeName); + nodeDefaults[prop] = testElement[prop]; + } + return nodeDefaults[prop]; + }, + + injection: DOMPropertyInjection + }; + + module.exports = DOMProperty; + +/***/ }, +/* 60 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule quoteAttributeValueForBrowser + */ + + 'use strict'; + + var escapeTextContentForBrowser = __webpack_require__(57); + + /** + * Escapes attribute value to prevent scripting attacks. + * + * @param {*} value Value to escape. + * @return {string} An escaped string. + */ + function quoteAttributeValueForBrowser(value) { + return '"' + escapeTextContentForBrowser(value) + '"'; + } + + module.exports = quoteAttributeValueForBrowser; + +/***/ }, +/* 61 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * 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. + * + * @providesModule warning + */ + + 'use strict'; + + var emptyFunction = __webpack_require__(51); + + /** + * 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 (false) { + warning = function (condition, format) { + for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { + args[_key - 2] = arguments[_key]; + } + + 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) { + 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) {} + } + }; + } + + module.exports = warning; + +/***/ }, +/* 62 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule ReactComponentBrowserEnvironment + */ + + 'use strict'; + + var ReactDOMIDOperations = __webpack_require__(63); + var ReactMount = __webpack_require__(64); + + /** + * 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, + + replaceNodeWithMarkupByID: ReactDOMIDOperations.dangerouslyReplaceNodeWithMarkupByID, + + /** + * If a particular environment requires that some resources be cleaned up, + * specify this in the injected Mixin. In the DOM, we would likely want to + * purge any cached node ID lookups. + * + * @private + */ + unmountIDFromEnvironment: function (rootNodeID) { + ReactMount.purgeID(rootNodeID); + } + + }; + + module.exports = ReactComponentBrowserEnvironment; + +/***/ }, +/* 63 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule ReactDOMIDOperations + * @typechecks static-only + */ + + 'use strict'; + + var DOMChildrenOperations = __webpack_require__(43); + var DOMPropertyOperations = __webpack_require__(58); + var ReactMount = __webpack_require__(64); + var ReactPerf = __webpack_require__(54); + + var invariant = __webpack_require__(49); + + /** + * Errors for properties that should not be updated with `updatePropertyByID()`. + * + * @type {object} + * @private + */ + var INVALID_PROPERTY_ERRORS = { + dangerouslySetInnerHTML: '`dangerouslySetInnerHTML` must be set using `updateInnerHTMLByID()`.', + style: '`style` must be set using `updateStylesByID()`.' + }; + + /** + * Operations used to process updates to DOM nodes. + */ + var ReactDOMIDOperations = { + + /** + * Updates a DOM node with new property values. This should only be used to + * update DOM properties in `DOMProperty`. + * + * @param {string} id ID of the node to update. + * @param {string} name A valid property name, see `DOMProperty`. + * @param {*} value New value of the property. + * @internal + */ + updatePropertyByID: function (id, name, value) { + var node = ReactMount.getNode(id); + !!INVALID_PROPERTY_ERRORS.hasOwnProperty(name) ? false ? invariant(false, 'updatePropertyByID(...): %s', INVALID_PROPERTY_ERRORS[name]) : invariant(false) : undefined; + + // If we're updating to null or undefined, we should remove the property + // from the DOM node instead of inadvertantly setting to a string. This + // brings us in line with the same behavior we have on initial render. + if (value != null) { + DOMPropertyOperations.setValueForProperty(node, name, value); + } else { + DOMPropertyOperations.deleteValueForProperty(node, name); + } + }, + + /** + * Replaces a DOM node that exists in the document with markup. + * + * @param {string} id ID of child to be replaced. + * @param {string} markup Dangerous markup to inject in place of child. + * @internal + * @see {Danger.dangerouslyReplaceNodeWithMarkup} + */ + dangerouslyReplaceNodeWithMarkupByID: function (id, markup) { + var node = ReactMount.getNode(id); + DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup); + }, + + /** + * Updates a component's children by processing a series of updates. + * + * @param {array} updates List of update configurations. + * @param {array} markup List of markup strings. + * @internal + */ + dangerouslyProcessChildrenUpdates: function (updates, markup) { + for (var i = 0; i < updates.length; i++) { + updates[i].parentNode = ReactMount.getNode(updates[i].parentID); + } + DOMChildrenOperations.processUpdates(updates, markup); + } + }; + + ReactPerf.measureMethods(ReactDOMIDOperations, 'ReactDOMIDOperations', { + dangerouslyReplaceNodeWithMarkupByID: 'dangerouslyReplaceNodeWithMarkupByID', + dangerouslyProcessChildrenUpdates: 'dangerouslyProcessChildrenUpdates' + }); + + module.exports = ReactDOMIDOperations; + +/***/ }, +/* 64 */ +/***/ function(module, exports, __webpack_require__) { + + /** + * Copyright 2013-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. + * + * @providesModule ReactMount + */ + + 'use strict'; + + var DOMProperty = __webpack_require__(59); + var ReactBrowserEventEmitter = __webpack_require__(65); + var ReactCurrentOwner = __webpack_require__(41); + var ReactDOMFeatureFlags = __webpack_require__(77); + var ReactElement = __webpack_require__(78); + var ReactEmptyComponentRegistry = __webpack_require__(80); + var ReactInstanceHandles = __webpack_require__(81); + var ReactInstanceMap = __webpack_require__(83); + var ReactMarkupChecksum = __webpack_require__(84); + var ReactPerf = __webpack_require__(54); + var ReactReconciler = __webpack_require__(86); + var ReactUpdateQueue = __webpack_require__(89); + var ReactUpdates = __webpack_require__(90); + + var assign = __webpack_require__(75); + var emptyObject = __webpack_require__(94); + var containsNode = __webpack_require__(95); + var instantiateReactComponent = __webpack_require__(98); + var invariant = __webpack_require__(49); + var setInnerHTML = __webpack_require__(55); + var shouldUpdateReactComponent = __webpack_require__(103); + var validateDOMNesting = __webpack_require__(106); + var warning = __webpack_require__(61); + + var ATTR_NAME = DOMProperty.ID_ATTRIBUTE_NAME; + var nodeCache = {}; + + var ELEMENT_NODE_TYPE = 1; + var DOC_NODE_TYPE = 9; + var DOCUMENT_FRAGMENT_NODE_TYPE = 11; + + var ownerDocumentContextKey = '__ReactMount_ownerDocument$' + Math.random().toString(36).slice(2); + + /** Mapping from reactRootID to React component instance. */ + var instancesByReactRootID = {}; + + /** Mapping from reactRootID to `container` nodes. */ + var containersByReactRootID = {}; + + if (false) { + /** __DEV__-only mapping from reactRootID to root elements. */ + var rootElementsByReactRootID = {}; + } + + // Used to store breadth-first search state in findComponentRoot. + var findComponentRootReusableArray = []; + + /** + * Finds the index of the first character + * that's not common between the two given strings. + * + * @return {number} the index of the character where the strings diverge + */ + function firstDifferenceIndex(string1, string2) { + var minLen = Math.min(string1.length, string2.length); + for (var i = 0; i < minLen; i++) { + if (string1.charAt(i) !== string2.charAt(i)) { + return i; + } + } + return string1.length === string2.length ? -1 : minLen; + } + + /** + * @param {DOMElement|DOMDocument} container DOM element that may contain + * a React component + * @return {?*} DOM element that may have the reactRoot ID, or null. + */ + function getReactRootElementInContainer(container) { + if (!container) { + return null; + } + + if (container.nodeType === DOC_NODE_TYPE) { + return container.documentElement; + } else { + return container.firstChild; + } + } + + /** + * @param {DOMElement} container DOM element that may contain a React component. + * @return {?string} A "reactRoot" ID, if a React component is rendered. + */ + function getReactRootID(container) { + var rootElement = getReactRootElementInContainer(container); + return rootElement && ReactMount.getID(rootElement); + } + + /** + * Accessing node[ATTR_NAME] or calling getAttribute(ATTR_NAME) on a form + * element can return its control whose name or ID equals ATTR_NAME. All + * DOM nodes support `getAttributeNode` but this can also get called on + * other objects so just return '' if we're given something other than a + * DOM node (such as window). + * + * @param {?DOMElement|DOMWindow|DOMDocument|DOMTextNode} node DOM node. + * @return {string} ID of the supplied `domNode`. + */ + function getID(node) { + var id = internalGetID(node); + if (id) { + if (nodeCache.hasOwnProperty(id)) { + var cached = nodeCache[id]; + if (cached !== node) { + !!isValid(cached, id) ? false ? invariant(false, 'ReactMount: Two valid but unequal nodes with the same `%s`: %s', ATTR_NAME, id) : invariant(false) : undefined; + + nodeCache[id] = node; + } + } else { + nodeCache[id] = node; + } + } + + return id; + } + + function internalGetID(node) { + // If node is something like a window, document, or text node, none of + // which support attributes or a .getAttribute method, gracefully return + // the empty string, as if the attribute were missing. + return node && node.getAttribute && node.getAttribute(ATTR_NAME) || ''; + } + + /** + * Sets the React-specific ID of the given node. + * + * @param {DOMElement} node The DOM node whose ID will be set. + * @param {string} id The value of the ID attribute. + */ + function setID(node, id) { + var oldID = internalGetID(node); + if (oldID !== id) { + delete nodeCache[oldID]; + } + node.setAttribute(ATTR_NAME, id); + nodeCache[id] = node; + } + + /** + * Finds the node with the supplied React-generated DOM ID. + * + * @param {string} id A React-generated DOM ID. + * @return {DOMElement} DOM node with the suppled `id`. + * @internal + */ + function getNode(id) { + if (!nodeCache.hasOwnProperty(id) || !isValid(nodeCache[id], id)) { + nodeCache[id] = ReactMount.findReactNodeByID(id); + } + return nodeCache[id]; + } + + /** + * Finds the node with the supplied public React instance. + * + * @param {*} instance A public React instance. + * @return {?DOMElement} DOM node with the suppled `id`. + * @internal + */ + function getNodeFromInstance(instance) { + var id = ReactInstanceMap.get(instance)._rootNodeID; + if (ReactEmptyComponentRegistry.isNullComponentID(id)) { + return null; + } + if (!nodeCache.hasOwnProperty(id) || !isValid(nodeCache[id], id)) { + nodeCache[id] = ReactMount.findReactNodeByID(id); + } + return nodeCache[id]; + } + + /** + * A node is "valid" if it is contained by a currently mounted container. + * + * This means that the node does not have to be contained by a document in + * order to be considered valid. + * + * @param {?DOMElement} node The candidate DOM node. + * @param {string} id The expected ID of the node. + * @return {boolean} Whether the node is contained by a mounted container. + */ + function isValid(node, id) { + if (node) { + !(internalGetID(node) === id) ? false ? invariant(false, 'ReactMount: Unexpected modification of `%s`', ATTR_NAME) : invariant(false) : undefined; + + var container = ReactMount.findReactContainerForID(id); + if (container && containsNode(container, node)) { + return true; + } + } + + return false; + } + + /** + * Causes the cache to forget about one React-specific ID. + * + * @param {string} id The ID to forget. + */ + function purgeID(id) { + delete nodeCache[id]; + } + + var deepestNodeSoFar = null; + function findDeepestCachedAncestorImpl(ancestorID) { + var ancestor = nodeCache[ancestorID]; + if (ancestor && isValid(ancestor, ancestorID)) { + deepestNodeSoFar = ancestor; + } else { + // This node isn't populated in the cache, so presumably none of its + // descendants are. Break out of the loop. + return false; + } + } + + /** + * Return the deepest cached node whose ID is a prefix of `targetID`. + */ + function findDeepestCachedAncestor(targetID) { + deepestNodeSoFar = null; + ReactInstanceHandles.traverseAncestors(targetID, findDeepestCachedAncestorImpl); + + var foundNode = deepestNodeSoFar; + deepestNodeSoFar = null; + return foundNode; + } + + /** + * Mounts this component and inserts it into the DOM. + * + * @param {ReactComponent} componentInstance The instance to mount. + * @param {string} rootID DOM ID of the root node. + * @param {DOMElement} container DOM element to mount into. + * @param {ReactReconcileTransaction} transaction + * @param {boolean} shouldReuseMarkup If true, do not insert markup + */ + function mountComponentIntoNode(componentInstance, rootID, container, transaction, shouldReuseMarkup, context) { + if (ReactDOMFeatureFlags.useCreateElement) { + context = assign({}, context); + if (container.nodeType === DOC_NODE_TYPE) { + context[ownerDocumentContextKey] = container; + } else { + context[ownerDocumentContextKey] = container.ownerDocument; + } + } + if (false) { + if (context === emptyObject) { + context = {}; + } + var tag = container.nodeName.toLowerCase(); + context[validateDOMNesting.ancestorInfoContextKey] = validateDOMNesting.updatedAncestorInfo(null, tag, null); + } + var markup = ReactReconciler.mountComponent(componentInstance, rootID, transaction, context); + componentInstance._renderedComponent._topLevelWrapper = componentInstance; + ReactMount._mountImageIntoNode(markup, container, shouldReuseMarkup, transaction); + } + + /** + * Batched mount. + * + * @param {ReactComponent} componentInstance The instance to mount. + * @param {string} rootID DOM ID of the root node. + * @param {DOMElement} container DOM element to mount into. + * @param {boolean} shouldReuseMarkup If true, do not insert markup + */ + function batchedMountComponentIntoNode(componentInstance, rootID, container, shouldReuseMarkup, context) { + var transaction = ReactUpdates.ReactReconcileTransaction.getPooled( + /* forceHTML */shouldReuseMarkup); + transaction.perform(mountComponentIntoNode, null, componentInstance, rootID, container, transaction, shouldReuseMarkup, context); + ReactUpdates.ReactReconcileTransaction.release(transaction); + } + + /** + * Unmounts a component and removes it from the DOM. + * + * @param {ReactComponent} instance React component instance. + * @param {DOMElement} container DOM element to unmount from. + * @final + * @internal + * @see {ReactMount.unmountComponentAtNode} + */ + function unmountComponentFromNode(instance, container) { + ReactReconciler.unmountComponent(instance); + + if (container.nodeType === DOC_NODE_TYPE) { + container = container.documentElement; + } + + // http://jsperf.com/emptying-a-node + while (container.lastChild) { + container.removeChild(container.lastChild); + } + } + + /** + * True if the supplied DOM node has a direct React-rendered child that is + * not a React root element. Useful for warning in `render`, + * `unmountComponentAtNode`, etc. + * + * @param {?DOMElement} node The candidate DOM node. + * @return {boolean} True if the DOM element contains a direct child that was + * rendered by React but is not a root element. + * @internal + */ + function hasNonRootReactChild(node) { + var reactRootID = getReactRootID(node); + return reactRootID ? reactRootID !== ReactInstanceHandles.getReactRootIDFromNodeID(reactRootID) : false; + } + + /** + * Returns the first (deepest) ancestor of a node which is rendered by this copy + * of React. + */ + function findFirstReactDOMImpl(node) { + // This node might be from another React instance, so we make sure not to + // examine the node cache here + for (; node && node.parentNode !== node; node = node.parentNode) { + if (node.nodeType !== 1) { + // Not a DOMElement, therefore not a React component + continue; + } + var nodeID = internalGetID(node); + if (!nodeID) { + continue; + } + var reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(nodeID); + + // If containersByReactRootID contains the container we find by crawling up + // the tree, we know that this instance of React rendered the node. + // nb. isValid's strategy (with containsNode) does not work because render + // trees may be nested and we don't want a false positive in that case. + var current = node; + var lastID; + do { + lastID = internalGetID(current); + current = current.parentNode; + if (current == null) { + // The passed-in node has been detached from the container it was + // originally rendered into. + return null; + } + } while (lastID !== reactRootID); + + if (current === containersByReactRootID[reactRootID]) { + return node; + } + } + return null; + } + + /** + * Temporary (?) hack so that we can store all top-level pending updates on + * composites instead of having to worry about different types of components + * here. + */ + var TopLevelWrapper = function () {}; + TopLevelWrapper.prototype.isReactComponent = {}; + if (false) { + TopLevelWrapper.displayName = 'TopLevelWrapper'; + } + TopLevelWrapper.prototype.render = function () { + // this.props is actually a ReactElement + return this.props; + }; + + /** + * Mounting is the process of initializing a React component by creating its + * representative DOM elements and inserting them into a supplied `container`. + * Any prior content inside `container` is destroyed in the process. + * + * ReactMount.render( + * component, + * document.getElementById('container') + * ); + * + *
<-- Supplied `container`. + *
<-- Rendered reactRoot of React + * // ... component. + *
+ *
+ * + * Inside of `container`, the first element rendered is the "reactRoot". + */ + var ReactMount = { + + TopLevelWrapper: TopLevelWrapper, + + /** Exposed for debugging purposes **/ + _instancesByReactRootID: instancesByReactRootID, + + /** + * This is a hook provided to support rendering React components while + * ensuring that the apparent scroll position of its `container` does not + * change. + * + * @param {DOMElement} container The `container` being rendered into. + * @param {function} renderCallback This must be called once to do the render. + */ + scrollMonitor: function (container, renderCallback) { + renderCallback(); + }, + + /** + * Take a component that's already mounted into the DOM and replace its props + * @param {ReactComponent} prevComponent component instance already in the DOM + * @param {ReactElement} nextElement component instance to render + * @param {DOMElement} container container to render into + * @param {?function} callback function triggered on completion + */ + _updateRootComponent: function (prevComponent, nextElement, container, callback) { + ReactMount.scrollMonitor(container, function () { + ReactUpdateQueue.enqueueElementInternal(prevComponent, nextElement); + if (callback) { + ReactUpdateQueue.enqueueCallbackInternal(prevComponent, callback); + } + }); + + if (false) { + // Record the root element in case it later gets transplanted. + rootElementsByReactRootID[getReactRootID(container)] = getReactRootElementInContainer(container); + } + + return prevComponent; + }, + + /** + * Register a component into the instance map and starts scroll value + * monitoring + * @param {ReactComponent} nextComponent component instance to render + * @param {DOMElement} container container to render into + * @return {string} reactRoot ID prefix + */ + _registerComponent: function (nextComponent, container) { + !(container && (container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE || container.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE)) ? false ? invariant(false, '_registerComponent(...): Target container is not a DOM element.') : invariant(false) : undefined; + + ReactBrowserEventEmitter.ensureScrollValueMonitoring(); + + var reactRootID = ReactMount.registerContainer(container); + instancesByReactRootID[reactRootID] = nextComponent; + return reactRootID; + }, + + /** + * Render a new component into the DOM. + * @param {ReactElement} nextElement element to render + * @param {DOMElement} container container to render into + * @param {boolean} shouldReuseMarkup if we should skip the markup insertion + * @return {ReactComponent} nextComponent + */ + _renderNewRootComponent: function (nextElement, container, shouldReuseMarkup, context) { + // Various parts of our code (such as ReactCompositeComponent's + // _renderValidatedComponent) assume that calls to render aren't nested; + // verify that that's the case. + false ? warning(ReactCurrentOwner.current == null, '_renderNewRootComponent(): Render methods should be a pure function ' + 'of props and state; triggering nested component updates from ' + 'render is not allowed. If necessary, trigger nested updates in ' + 'componentDidUpdate. Check the render method of %s.', ReactCurrentOwner.current && ReactCurrentOwner.current.getName() || 'ReactCompositeComponent') : undefined; + + var componentInstance = instantiateReactComponent(nextElement, null); + var reactRootID = ReactMount._registerComponent(componentInstance, container); + + // The initial render is synchronous but any updates that happen during + // rendering, in componentWillMount or componentDidMount, will be batched + // according to the current batching strategy. + + ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, reactRootID, container, shouldReuseMarkup, context); + + if (false) { + // Record the root element in case it later gets transplanted. + rootElementsByReactRootID[reactRootID] = getReactRootElementInContainer(container); + } + + return componentInstance; + }, + + /** + * Renders a React component into the DOM in the supplied `container`. + * + * If the React component was previously rendered into `container`, this will + * perform an update on it and only mutate the DOM as necessary to reflect the + * latest React component. + * + * @param {ReactComponent} parentComponent The conceptual parent of this render tree. + * @param {ReactElement} nextElement Component element to render. + * @param {DOMElement} container DOM element to render into. + * @param {?function} callback function triggered on completion + * @return {ReactComponent} Component instance rendered in `container`. + */ + renderSubtreeIntoContainer: function (parentComponent, nextElement, container, callback) { + !(parentComponent != null && parentComponent._reactInternalInstance != null) ? false ? invariant(false, 'parentComponent must be a valid React Component') : invariant(false) : undefined; + return ReactMount._renderSubtreeIntoContainer(parentComponent, nextElement, container, callback); + }, + + _renderSubtreeIntoContainer: function (parentComponent, nextElement, container, callback) { + !ReactElement.isValidElement(nextElement) ? false ? invariant(false, 'ReactDOM.render(): Invalid component element.%s', typeof nextElement === 'string' ? ' Instead of passing an element string, make sure to instantiate ' + 'it by passing it to React.createElement.' : typeof nextElement === 'function' ? ' Instead of passing a component class, make sure to instantiate ' + 'it by passing it to React.createElement.' : + // Check if it quacks like an element + nextElement != null && nextElement.props !== undefined ? ' This may be caused by unintentionally loading two independent ' + 'copies of React.' : '') : invariant(false) : undefined; + + false ? warning(!container || !container.tagName || container.tagName.toUpperCase() !== 'BODY', 'render(): Rendering components directly into document.body is ' + 'discouraged, since its children are often manipulated by third-party ' + 'scripts and browser extensions. This may lead to subtle ' + 'reconciliation issues. Try rendering into a container element created ' + 'for your app.') : undefined; + + var nextWrappedElement = new ReactElement(TopLevelWrapper, null, null, null, null, null, nextElement); + + var prevComponent = instancesByReactRootID[getReactRootID(container)]; + + if (prevComponent) { + var prevWrappedElement = prevComponent._currentElement; + var prevElement = prevWrappedElement.props; + if (shouldUpdateReactComponent(prevElement, nextElement)) { + var publicInst = prevComponent._renderedComponent.getPublicInstance(); + var updatedCallback = callback && function () { + callback.call(publicInst); + }; + ReactMount._updateRootComponent(prevComponent, nextWrappedElement, container, updatedCallback); + return publicInst; + } else { + ReactMount.unmountComponentAtNode(container); + } + } + + var reactRootElement = getReactRootElementInContainer(container); + var containerHasReactMarkup = reactRootElement && !!internalGetID(reactRootElement); + var containerHasNonRootReactChild = hasNonRootReactChild(container); + + if (false) { + process.env.NODE_ENV !== 'production' ? warning(!containerHasNonRootReactChild, 'render(...): Replacing React-rendered children with a new root ' + 'component. If you intended to update the children of this node, ' + 'you should instead have the existing children update their state ' + 'and render the new components instead of calling ReactDOM.render.') : undefined; + + if (!containerHasReactMarkup || reactRootElement.nextSibling) { + var rootElementSibling = reactRootElement; + while (rootElementSibling) { + if (internalGetID(rootElementSibling)) { + process.env.NODE_ENV !== 'production' ? warning(false, 'render(): Target node has markup rendered by React, but there ' + 'are unrelated nodes as well. This is most commonly caused by ' + 'white-space inserted around server-rendered markup.') : undefined; + break; + } + rootElementSibling = rootElementSibling.nextSibling; + } + } + } + + var shouldReuseMarkup = containerHasReactMarkup && !prevComponent && !containerHasNonRootReactChild; + var component = ReactMount._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, parentComponent != null ? parentComponent._reactInternalInstance._processChildContext(parentComponent._reactInternalInstance._context) : emptyObject)._renderedComponent.getPublicInstance(); + if (callback) { + callback.call(component); + } + return component; + }, + + /** + * Renders a React component into the DOM in the supplied `container`. + * + * If the React component was previously rendered into `container`, this will + * perform an update on it and only mutate the DOM as necessary to reflect the + * latest React component. + * + * @param {ReactElement} nextElement Component element to render. + * @param {DOMElement} container DOM element to render into. + * @param {?function} callback function triggered on completion + * @return {ReactComponent} Component instance rendered in `container`. + */ + render: function (nextElement, container, callback) { + return ReactMount._renderSubtreeIntoContainer(null, nextElement, container, callback); + }, + + /** + * Registers a container node into which React components will be rendered. + * This also creates the "reactRoot" ID that will be assigned to the element + * rendered within. + * + * @param {DOMElement} container DOM element to register as a container. + * @return {string} The "reactRoot" ID of elements rendered within. + */ + registerContainer: function (container) { + var reactRootID = getReactRootID(container); + if (reactRootID) { + // If one exists, make sure it is a valid "reactRoot" ID. + reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(reactRootID); + } + if (!reactRootID) { + // No valid "reactRoot" ID found, create one. + reactRootID = ReactInstanceHandles.createReactRootID(); + } + containersByReactRootID[reactRootID] = container; + return reactRootID; + }, + + /** + * Unmounts and destroys the React component rendered in the `container`. + * + * @param {DOMElement} container DOM element containing a React component. + * @return {boolean} True if a component was found in and unmounted from + * `container` + */ + unmountComponentAtNode: function (container) { + // Various parts of our code (such as ReactCompositeComponent's + // _renderValidatedComponent) assume that calls to render aren't nested; + // verify that that's the case. (Strictly speaking, unmounting won't cause a + // render but we still don't expect to be in a render call here.) + false ? warning(ReactCurrentOwner.current == null, 'unmountComponentAtNode(): Render methods should be a pure function ' + 'of props and state; triggering nested component updates from render ' + 'is not allowed. If necessary, trigger nested updates in ' + 'componentDidUpdate. Check the render method of %s.', ReactCurrentOwner.current && ReactCurrentOwner.current.getName() || 'ReactCompositeComponent') : undefined; + + !(container && (container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE || container.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE)) ? false ? invariant(false, 'unmountComponentAtNode(...): Target container is not a DOM element.') : invariant(false) : undefined; + + var reactRootID = getReactRootID(container); + var component = instancesByReactRootID[reactRootID]; + if (!component) { + // Check if the node being unmounted was rendered by React, but isn't a + // root node. + var containerHasNonRootReactChild = hasNonRootReactChild(container); + + // Check if the container itself is a React root node. + var containerID = internalGetID(container); + var isContainerReactRoot = containerID && containerID === ReactInstanceHandles.getReactRootIDFromNodeID(containerID); + + if (false) { + process.env.NODE_ENV !== 'production' ? warning(!containerHasNonRootReactChild, 'unmountComponentAtNode(): The node you\'re attempting to unmount ' + 'was rendered by React and is not a top-level container. %s', isContainerReactRoot ? 'You may have accidentally passed in a React root node instead ' + 'of its container.' : 'Instead, have the parent component update its state and ' + 'rerender in order to remove this component.') : undefined; + } + + return false; + } + ReactUpdates.batchedUpdates(unmountComponentFromNode, component, container); + delete instancesByReactRootID[reactRootID]; + delete containersByReactRootID[reactRootID]; + if (false) { + delete rootElementsByReactRootID[reactRootID]; + } + return true; + }, + + /** + * Finds the container DOM element that contains React component to which the + * supplied DOM `id` belongs. + * + * @param {string} id The ID of an element rendered by a React component. + * @return {?DOMElement} DOM element that contains the `id`. + */ + findReactContainerForID: function (id) { + var reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(id); + var container = containersByReactRootID[reactRootID]; + + if (false) { + var rootElement = rootElementsByReactRootID[reactRootID]; + if (rootElement && rootElement.parentNode !== container) { + process.env.NODE_ENV !== 'production' ? warning( + // Call internalGetID here because getID calls isValid which calls + // findReactContainerForID (this function). + internalGetID(rootElement) === reactRootID, 'ReactMount: Root element ID differed from reactRootID.') : undefined; + var containerChild = container.firstChild; + if (containerChild && reactRootID === internalGetID(containerChild)) { + // If the container has a new child with the same ID as the old + // root element, then rootElementsByReactRootID[reactRootID] is + // just stale and needs to be updated. The case that deserves a + // warning is when the container is empty. + rootElementsByReactRootID[reactRootID] = containerChild; + } else { + process.env.NODE_ENV !== 'production' ? warning(false, 'ReactMount: Root element has been removed from its original ' + 'container. New container: %s', rootElement.parentNode) : undefined; + } + } + } + + return container; + }, + + /** + * Finds an element rendered by React with the supplied ID. + * + * @param {string} id ID of a DOM node in the React component. + * @return {DOMElement} Root DOM node of the React component. + */ + findReactNodeByID: function (id) { + var reactRoot = ReactMount.findReactContainerForID(id); + return ReactMount.findComponentRoot(reactRoot, id); + }, + + /** + * Traverses up the ancestors of the supplied node to find a node that is a + * DOM representation of a React component rendered by this copy of React. + * + * @param {*} node + * @return {?DOMEventTarget} + * @internal + */ + getFirstReactDOM: function (node) { + return findFirstReactDOMImpl(node); + }, + + /** + * Finds a node with the supplied `targetID` inside of the supplied + * `ancestorNode`. Exploits the ID naming scheme to perform the search + * quickly. + * + * @param {DOMEventTarget} ancestorNode Search from this root. + * @pararm {string} targetID ID of the DOM representation of the component. + * @return {DOMEventTarget} DOM node with the supplied `targetID`. + * @internal + */ + findComponentRoot: function (ancestorNode, targetID) { + var firstChildren = findComponentRootReusableArray; + var childIndex = 0; + + var deepestAncestor = findDeepestCachedAncestor(targetID) || ancestorNode; + + if (false) { + // This will throw on the next line; give an early warning + process.env.NODE_ENV !== 'production' ? warning(deepestAncestor != null, 'React can\'t find the root component node for data-reactid value ' + '`%s`. If you\'re seeing this message, it probably means that ' + 'you\'ve loaded two copies of React on the page. At this time, only ' + 'a single copy of React can be loaded at a time.', targetID) : undefined; + } + + firstChildren[0] = deepestAncestor.firstChild; + firstChildren.length = 1; + + while (childIndex < firstChildren.length) { + var child = firstChildren[childIndex++]; + var targetChild; + + while (child) { + var childID = ReactMount.getID(child); + if (childID) { + // Even if we find the node we're looking for, we finish looping + // through its siblings to ensure they're cached so that we don't have + // to revisit this node again. Otherwise, we make n^2 calls to getID + // when visiting the many children of a single node in order. + + if (targetID === childID) { + targetChild = child; + } else if (ReactInstanceHandles.isAncestorIDOf(childID, targetID)) { + // If we find a child whose ID is an ancestor of the given ID, + // then we can be sure that we only want to search the subtree + // rooted at this child, so we can throw out the rest of the + // search state. + firstChildren.length = childIndex = 0; + firstChildren.push(child.firstChild); + } + } else { + // If this child had no ID, then there's a chance that it was + // injected automatically by the browser, as when a `` + // element sprouts an extra `` child as a side effect of + // `.innerHTML` parsing. Optimistically continue down this + // branch, but not before examining the other siblings. + firstChildren.push(child.firstChild); + } + + child = child.nextSibling; + } + + if (targetChild) { + // Emptying firstChildren/findComponentRootReusableArray is + // not necessary for correctness, but it helps the GC reclaim + // any nodes that were left at the end of the search. + firstChildren.length = 0; + + return targetChild; + } + } + + firstChildren.length = 0; + + true ? false ? invariant(false, 'findComponentRoot(..., %s): Unable to find element. This probably ' + 'means the DOM was unexpectedly mutated (e.g., by the browser), ' + 'usually due to forgetting a when using tables, nesting tags ' + 'like ,

, or , or using non-SVG elements in an ' + 'parent. ' + 'Try inspecting the child nodes of the element with React ID `%s`.', targetID, ReactMount.getID(ancestorNode)) : invariant(false) : undefined; + }, + + _mountImageIntoNode: function (markup, container, shouldReuseMarkup, transaction) { + !(container && (container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE || container.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE)) ? false ? invariant(false, 'mountComponentIntoNode(...): Target container is not valid.') : invariant(false) : undefined; + + if (shouldReuseMarkup) { + var rootElement = getReactRootElementInContainer(container); + if (ReactMarkupChecksum.canReuseMarkup(markup, rootElement)) { + return; + } else { + var checksum = rootElement.getAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME); + rootElement.removeAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME); + + var rootMarkup = rootElement.outerHTML; + rootElement.setAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME, checksum); + + var normalizedMarkup = markup; + if (false) { + // because rootMarkup is retrieved from the DOM, various normalizations + // will have occurred which will not be present in `markup`. Here, + // insert markup into a

or