(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o 0) { var fn = queue.shift(); fn(); } } }, true); return function nextTick(fn) { queue.push(fn); window.postMessage('process-tick', '*'); }; } return function nextTick(fn) { setTimeout(fn, 0); }; })(); process.title = 'browser'; process.browser = true; process.env = {}; process.argv = []; function noop() {} process.on = noop; process.addListener = noop; process.once = noop; process.off = noop; process.removeListener = noop; process.removeAllListeners = noop; process.emit = noop; process.binding = function (name) { throw new Error('process.binding is not supported'); }; // TODO(shtylman) process.cwd = function () { return '/' }; process.chdir = function (dir) { throw new Error('process.chdir is not supported'); }; },{}],3:[function(require,module,exports){ module.exports = { AppBar: require('./js/app-bar'), AppCanvas: require('./js/app-canvas'), Checkbox: require('./js/checkbox'), DatePicker: require('./js/date-picker/date-picker'), Dialog: require('./js/dialog'), DialogWindow: require('./js/dialog-window'), DropDownIcon: require('./js/drop-down-icon'), DropDownMenu: require('./js/drop-down-menu'), EnhancedButton: require('./js/enhanced-button'), FlatButton: require('./js/flat-button'), FloatingActionButton: require('./js/floating-action-button'), FontIcon: require('./js/font-icon'), IconButton: require('./js/icon-button'), Input: require('./js/input'), LeftNav: require('./js/left-nav'), Menu: require('./js/menu/menu'), MenuItem: require('./js/menu/menu-item'), Mixins: { Classable: require('./js/mixins/classable'), ClickAwayable: require('./js/mixins/click-awayable'), WindowListenable: require('./js/mixins/window-listenable') }, Paper: require('./js/paper'), RadioButton: require('./js/radio-button'), RadioButtonGroup: require('./js/radio-button-group'), RaisedButton: require('./js/raised-button'), Slider: require('./js/slider'), SvgIcon: require('./js/svg-icons/svg-icon'), Icons: { NavigationMenu: require('./js/svg-icons/navigation-menu'), NavigationChevronLeft: require('./js/svg-icons/navigation-chevron-left'), NavigationChevronRight: require('./js/svg-icons/navigation-chevron-right') }, Tab: require('./js/tabs/tab'), Tabs: require('./js/tabs/tabs'), Toggle: require('./js/toggle'), Snackbar: require('./js/snackbar'), TextField: require('./js/text-field'), Toolbar: require('./js/toolbar'), ToolbarGroup: require('./js/toolbar-group'), Tooltip: require('./js/tooltip'), Utils: { CssEvent: require('./js/utils/css-event'), Dom: require('./js/utils/dom'), Events: require('./js/utils/events'), KeyCode: require('./js/utils/key-code'), KeyLine: require('./js/utils/key-line') } }; },{"./js/app-bar":4,"./js/app-canvas":5,"./js/checkbox":6,"./js/date-picker/date-picker":12,"./js/dialog":15,"./js/dialog-window":14,"./js/drop-down-icon":16,"./js/drop-down-menu":17,"./js/enhanced-button":18,"./js/flat-button":21,"./js/floating-action-button":22,"./js/font-icon":23,"./js/icon-button":24,"./js/input":26,"./js/left-nav":27,"./js/menu/menu":30,"./js/menu/menu-item":29,"./js/mixins/classable":32,"./js/mixins/click-awayable":33,"./js/mixins/window-listenable":34,"./js/paper":36,"./js/radio-button":38,"./js/radio-button-group":37,"./js/raised-button":39,"./js/slider":43,"./js/snackbar":44,"./js/svg-icons/navigation-chevron-left":46,"./js/svg-icons/navigation-chevron-right":47,"./js/svg-icons/navigation-menu":48,"./js/svg-icons/svg-icon":49,"./js/tabs/tab":54,"./js/tabs/tabs":56,"./js/text-field":57,"./js/toggle":58,"./js/toolbar":60,"./js/toolbar-group":59,"./js/tooltip":61,"./js/utils/css-event":63,"./js/utils/dom":65,"./js/utils/events":66,"./js/utils/key-code":67,"./js/utils/key-line":68}],4:[function(require,module,exports){ (function (process){ var React = require('react'); var Classable = require('./mixins/classable'); var IconButton = require('./icon-button'); var NavigationMenu = require('./svg-icons/navigation-menu'); var Paper = require('./paper'); var AppBar = React.createClass({displayName: "AppBar", mixins: [Classable], propTypes: { onMenuIconButtonTouchTap: React.PropTypes.func, showMenuIconButton: React.PropTypes.bool, iconClassNameLeft: React.PropTypes.string, iconElementLeft: React.PropTypes.element, iconElementRight: React.PropTypes.element, title : React.PropTypes.node, zDepth: React.PropTypes.number, }, getDefaultProps: function() { return { showMenuIconButton: true, title: '', zDepth: 1 } }, componentDidMount: function() { if (process.env.NODE_ENV !== 'production' && (this.props.iconElementLeft && this.props.iconClassNameLeft)) { var warning = 'Properties iconClassNameLeft and iconElementLeft cannot be simultaneously ' + 'defined. Please use one or the other.'; console.warn(warning); } }, render: function() { var $__0= this.props,onTouchTap=$__0.onTouchTap,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{onTouchTap:1}); var classes = this.getClasses('mui-app-bar'), title, menuElementLeft, menuElementRight; if (this.props.title) { // If the title is a string, wrap in an h1 tag. // If not, just use it as a node. title = Object.prototype.toString.call(this.props.title) === '[object String]' ? React.createElement("h1", {className: "mui-app-bar-title"}, this.props.title) : this.props.title; } if (this.props.showMenuIconButton) { if (this.props.iconElementLeft) { menuElementLeft = ( React.createElement("div", {className: "mui-app-bar-navigation-icon-button"}, this.props.iconElementLeft ) ); } else { var child = (this.props.iconClassNameLeft) ? '' : React.createElement(NavigationMenu, null); menuElementLeft = ( React.createElement(IconButton, { className: "mui-app-bar-navigation-icon-button", iconClassName: this.props.iconClassNameLeft, onTouchTap: this._onMenuIconButtonTouchTap}, child ) ); } } menuElementRight = (this.props.children) ? this.props.children : (this.props.iconElementRight) ? this.props.iconElementRight : ''; return ( React.createElement(Paper, {rounded: false, className: classes, zDepth: this.props.zDepth}, menuElementLeft, title, menuElementRight ) ); }, _onMenuIconButtonTouchTap: function(e) { if (this.props.onMenuIconButtonTouchTap) this.props.onMenuIconButtonTouchTap(e); } }); module.exports = AppBar; }).call(this,require('_process')) },{"./icon-button":24,"./mixins/classable":32,"./paper":36,"./svg-icons/navigation-menu":48,"_process":2,"react":248}],5:[function(require,module,exports){ var React = require('react'), Classable = require('./mixins/classable'); var AppCanvas = React.createClass({displayName: "AppCanvas", mixins: [Classable], propTypes: { predefinedLayout: React.PropTypes.number }, render: function() { var classes = this.getClasses({ 'mui-app-canvas': true, 'mui-predefined-layout-1': this.props.predefinedLayout === 1 }); return ( React.createElement("div", {className: classes}, this.props.children ) ); } }); module.exports = AppCanvas; },{"./mixins/classable":32,"react":248}],6:[function(require,module,exports){ var React = require('react'); var EnhancedSwitch = require('./enhanced-switch'); var Classable = require('./mixins/classable'); var CheckboxOutline = require('./svg-icons/toggle-check-box-outline-blank'); var CheckboxChecked = require('./svg-icons/toggle-check-box-checked'); var Checkbox = React.createClass({displayName: "Checkbox", mixins: [Classable], propTypes: { onCheck: React.PropTypes.func, }, render: function() { var $__0= this.props,onCheck=$__0.onCheck,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{onCheck:1}); var classes = this.getClasses("mui-checkbox"); var checkboxElement = ( React.createElement("div", null, React.createElement(CheckboxOutline, {className: "mui-checkbox-box"}), React.createElement(CheckboxChecked, {className: "mui-checkbox-check"}) ) ); var enhancedSwitchProps = { ref: "enhancedSwitch", inputType: "checkbox", switchElement: checkboxElement, className: classes, iconClassName: "mui-checkbox-icon", onSwitch: this._handleCheck, labelPosition: (this.props.labelPosition) ? this.props.labelPosition : "right" }; return ( React.createElement(EnhancedSwitch, React.__spread({}, other, enhancedSwitchProps)) ); }, isChecked: function() { return this.refs.enhancedSwitch.isSwitched(); }, setChecked: function(newCheckedValue) { this.refs.enhancedSwitch.setSwitched(newCheckedValue); }, _handleCheck: function(e, isInputChecked) { if (this.props.onCheck) this.props.onCheck(e, isInputChecked); } }); module.exports = Checkbox; },{"./enhanced-switch":19,"./mixins/classable":32,"./svg-icons/toggle-check-box-checked":50,"./svg-icons/toggle-check-box-outline-blank":51,"react":248}],7:[function(require,module,exports){ var React = require('react'); var Classable = require('../mixins/classable'); var DateTime = require('../utils/date-time'); var DayButton = require('./day-button'); var CalendarMonth = React.createClass({displayName: "CalendarMonth", mixins: [Classable], propTypes: { displayDate: React.PropTypes.object.isRequired, onDayTouchTap: React.PropTypes.func, selectedDate: React.PropTypes.object.isRequired, maxDate: React.PropTypes.object, minDate: React.PropTypes.object, autoOk: React.PropTypes.bool }, render: function() { var classes = this.getClasses('mui-date-picker-calendar-month'); return ( React.createElement("div", {className: classes}, this._getWeekElements() ) ); }, _getWeekElements: function() { var weekArray = DateTime.getWeekArray(this.props.displayDate); return weekArray.map(function(week, i) { return ( React.createElement("div", { key: i, className: "mui-date-picker-calendar-month-week"}, this._getDayElements(week) ) ); }, this); }, _isDisabled: function(day){ var minDate = this.props.minDate; var maxDate = this.props.maxDate; if(minDate != null && day < minDate){ return true; } if(maxDate != null && day > maxDate){ return true; } return false; }, _getDayElements: function(week) { return week.map(function(day, i) { var selected = DateTime.isEqualDate(this.props.selectedDate, day); var disabled = this._isDisabled(day); return ( React.createElement(DayButton, { key: i, date: day, disabled: disabled, onTouchTap: this._handleDayTouchTap, selected: selected}) ); }, this); }, _handleDayTouchTap: function(e, date) { if (this.props.onDayTouchTap) this.props.onDayTouchTap(e, date); } }); module.exports = CalendarMonth; },{"../mixins/classable":32,"../utils/date-time":64,"./day-button":13,"react":248}],8:[function(require,module,exports){ var React = require('react'); var DateTime = require('../utils/date-time'); var IconButton = require('../icon-button'); var NavigationChevronLeft = require('../svg-icons/navigation-chevron-left'); var NavigationChevronRight = require('../svg-icons/navigation-chevron-right'); var SlideInTransitionGroup = require('../transition-groups/slide-in'); var CalendarToolbar = React.createClass({displayName: "CalendarToolbar", propTypes: { displayDate: React.PropTypes.object.isRequired, onLeftTouchTap: React.PropTypes.func, onRightTouchTap: React.PropTypes.func, maxDate: React.PropTypes.object, minDate: React.PropTypes.object }, getDefaultProps: function () { return { maxDate: null, minDate: null }; }, getInitialState: function() { return { transitionDirection: 'up' }; }, componentWillReceiveProps: function(nextProps) { var direction; if (nextProps.displayDate !== this.props.displayDate) { direction = nextProps.displayDate > this.props.displayDate ? 'up' : 'down'; this.setState({ transitionDirection: direction }); } }, _isDisabled: function(direction){ var date = this.props.displayDate; var minDate = this.props.minDate; var maxDate = this.props.maxDate; if(direction == "left" && minDate){ if(date.getFullYear() < minDate.getFullYear()) return true; if(date.getFullYear() == minDate.getFullYear()){ return date.getMonth() <= minDate.getMonth(); } }else if(direction == "right" && maxDate){ if(date.getFullYear() > maxDate.getFullYear()) return true; if(date.getFullYear() == maxDate.getFullYear()){ return date.getMonth() >= maxDate.getMonth(); } } return false; }, render: function() { var month = DateTime.getFullMonth(this.props.displayDate); var year = this.props.displayDate.getFullYear(); var disableLeft = this._isDisabled("left"); var disableRight = this._isDisabled("right"); return ( React.createElement("div", {className: "mui-date-picker-calendar-toolbar"}, React.createElement(SlideInTransitionGroup, { className: "mui-date-picker-calendar-toolbar-title", direction: this.state.transitionDirection}, React.createElement("div", {key: month + '_' + year}, month, " ", year) ), React.createElement(IconButton, { disabled: disableLeft, className: "mui-date-picker-calendar-toolbar-button-left", onTouchTap: this.props.onLeftTouchTap}, React.createElement(NavigationChevronLeft, null) ), React.createElement(IconButton, { disabled: disableRight, className: "mui-date-picker-calendar-toolbar-button-right", onTouchTap: this.props.onRightTouchTap}, React.createElement(NavigationChevronRight, null) ) ) ); } }); module.exports = CalendarToolbar; },{"../icon-button":24,"../svg-icons/navigation-chevron-left":46,"../svg-icons/navigation-chevron-right":47,"../transition-groups/slide-in":62,"../utils/date-time":64,"react":248}],9:[function(require,module,exports){ var React = require('react'); var Classable = require('../mixins/classable'); var WindowListenable = require('../mixins/window-listenable'); var DateTime = require('../utils/date-time'); var KeyCode = require('../utils/key-code'); var CalendarMonth = require('./calendar-month'); var CalendarToolbar = require('./calendar-toolbar'); var DateDisplay = require('./date-display'); var SlideInTransitionGroup = require('../transition-groups/slide-in'); var Calendar = React.createClass({displayName: "Calendar", mixins: [Classable, WindowListenable], propTypes: { initialDate: React.PropTypes.object, isActive: React.PropTypes.bool, maxDate: React.PropTypes.object, minDate: React.PropTypes.object, onSelectedDate: React.PropTypes.func }, windowListeners: { 'keydown': '_handleWindowKeyDown' }, getDefaultProps: function() { return { initialDate: new Date(), maxDate: null, minDate: null }; }, getInitialState: function() { return { displayDate: DateTime.getFirstDayOfMonth(this.props.initialDate), selectedDate: this.props.initialDate, transitionDirection: 'left' }; }, componentWillReceiveProps: function(nextProps) { if (nextProps.initialDate !== this.props.initialDate) { var d = nextProps.initialDate || new Date(); this.setState({ displayDate: DateTime.getFirstDayOfMonth(d), selectedDate: d }); } }, render: function() { var weekCount = DateTime.getWeekArray(this.state.displayDate).length; var classes = this.getClasses('mui-date-picker-calendar', { 'mui-is-4week': weekCount === 4, 'mui-is-5week': weekCount === 5, 'mui-is-6week': weekCount === 6 }); return ( React.createElement("div", {className: classes}, React.createElement(DateDisplay, { className: "mui-date-picker-calendar-date-display", selectedDate: this.state.selectedDate}), React.createElement("div", { className: "mui-date-picker-calendar-container"}, React.createElement(CalendarToolbar, { minDate: this.props.minDate, maxDate: this.props.maxDate, displayDate: this.state.displayDate, onLeftTouchTap: this._handleLeftTouchTap, onRightTouchTap: this._handleRightTouchTap}), React.createElement("ul", {className: "mui-date-picker-calendar-week-title"}, React.createElement("li", {className: "mui-date-picker-calendar-week-title-day"}, "S"), React.createElement("li", {className: "mui-date-picker-calendar-week-title-day"}, "M"), React.createElement("li", {className: "mui-date-picker-calendar-week-title-day"}, "T"), React.createElement("li", {className: "mui-date-picker-calendar-week-title-day"}, "W"), React.createElement("li", {className: "mui-date-picker-calendar-week-title-day"}, "T"), React.createElement("li", {className: "mui-date-picker-calendar-week-title-day"}, "F"), React.createElement("li", {className: "mui-date-picker-calendar-week-title-day"}, "S") ), React.createElement(SlideInTransitionGroup, { direction: this.state.transitionDirection}, React.createElement(CalendarMonth, { minDate: this.props.minDate, maxDate: this.props.maxDate, key: this.state.displayDate.toDateString(), displayDate: this.state.displayDate, onDayTouchTap: this._handleDayTouchTap, selectedDate: this.state.selectedDate}) ) ) ) ); }, getSelectedDate: function() { return this.state.selectedDate; }, _addDisplayDate: function(m) { var newDisplayDate = DateTime.clone(this.state.displayDate); newDisplayDate.setMonth(newDisplayDate.getMonth() + m); this._setDisplayDate(newDisplayDate); }, _addSelectedDays: function(days) { this._setSelectedDate(DateTime.addDays(this.state.selectedDate, days)); }, _addSelectedMonths: function(months) { this._setSelectedDate(DateTime.addMonths(this.state.selectedDate, months)); }, _setDisplayDate: function(d, newSelectedDate) { var newDisplayDate = DateTime.getFirstDayOfMonth(d); var direction = newDisplayDate > this.state.displayDate ? 'left' : 'right'; if (newDisplayDate !== this.state.displayDate) { this.setState({ displayDate: newDisplayDate, transitionDirection: direction, selectedDate: newSelectedDate || this.state.selectedDate }); } }, _setSelectedDate: function(d) { var newDisplayDate = DateTime.getFirstDayOfMonth(d); if (newDisplayDate !== this.state.displayDate) { this._setDisplayDate(newDisplayDate, d); } else { this.setState({ selectedDate: d }); } if(this.props.onSelectedDate) this.props.onSelectedDate(d); }, _handleDayTouchTap: function(e, date) { this._setSelectedDate(date); }, _handleLeftTouchTap: function() { this._addDisplayDate(-1); }, _handleRightTouchTap: function() { this._addDisplayDate(1); }, _handleWindowKeyDown: function(e) { var newSelectedDate; if (this.props.isActive) { switch (e.keyCode) { case KeyCode.UP: if (e.shiftKey) { this._addSelectedMonths(-1); } else { this._addSelectedDays(-7); } break; case KeyCode.DOWN: if (e.shiftKey) { this._addSelectedMonths(1); } else { this._addSelectedDays(7); } break; case KeyCode.RIGHT: if (e.shiftKey) { this._addSelectedMonths(1); } else { this._addSelectedDays(1); } break; case KeyCode.LEFT: if (e.shiftKey) { this._addSelectedMonths(-1); } else { this._addSelectedDays(-1); } break; } } } }); module.exports = Calendar; },{"../mixins/classable":32,"../mixins/window-listenable":34,"../transition-groups/slide-in":62,"../utils/date-time":64,"../utils/key-code":67,"./calendar-month":7,"./calendar-toolbar":8,"./date-display":10,"react":248}],10:[function(require,module,exports){ var React = require('react'); var Classable = require('../mixins/classable'); var DateTime = require('../utils/date-time'); var SlideInTransitionGroup = require('../transition-groups/slide-in'); var DateDisplay = React.createClass({displayName: "DateDisplay", mixins: [Classable], propTypes: { selectedDate: React.PropTypes.object.isRequired }, getInitialState: function() { return { transitionDirection: 'up' }; }, componentWillReceiveProps: function(nextProps) { var direction; if (nextProps.selectedDate !== this.props.selectedDate) { direction = nextProps.selectedDate > this.props.selectedDate ? 'up' : 'down'; this.setState({ transitionDirection: direction }); } }, render: function() { var $__0= this.props,selectedDate=$__0.selectedDate,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{selectedDate:1}); var classes = this.getClasses('mui-date-picker-date-display'); var dayOfWeek = DateTime.getDayOfWeek(this.props.selectedDate); var month = DateTime.getShortMonth(this.props.selectedDate); var day = this.props.selectedDate.getDate(); var year = this.props.selectedDate.getFullYear(); return ( React.createElement("div", React.__spread({}, other, {className: classes}), React.createElement(SlideInTransitionGroup, { className: "mui-date-picker-date-display-dow", direction: this.state.transitionDirection}, React.createElement("div", {key: dayOfWeek}, dayOfWeek) ), React.createElement("div", {className: "mui-date-picker-date-display-date"}, React.createElement(SlideInTransitionGroup, { className: "mui-date-picker-date-display-month", direction: this.state.transitionDirection}, React.createElement("div", {key: month}, month) ), React.createElement(SlideInTransitionGroup, { className: "mui-date-picker-date-display-day", direction: this.state.transitionDirection}, React.createElement("div", {key: day}, day) ), React.createElement(SlideInTransitionGroup, { className: "mui-date-picker-date-display-year", direction: this.state.transitionDirection}, React.createElement("div", {key: year}, year) ) ) ) ); } }); module.exports = DateDisplay; },{"../mixins/classable":32,"../transition-groups/slide-in":62,"../utils/date-time":64,"react":248}],11:[function(require,module,exports){ var React = require('react'); var Classable = require('../mixins/classable'); var WindowListenable = require('../mixins/window-listenable'); var KeyCode = require('../utils/key-code'); var Calendar = require('./calendar'); var DialogWindow = require('../dialog-window'); var FlatButton = require('../flat-button'); var DatePickerDialog = React.createClass({displayName: "DatePickerDialog", mixins: [Classable, WindowListenable], propTypes: { initialDate: React.PropTypes.object, onAccept: React.PropTypes.func, onShow: React.PropTypes.func, onDismiss: React.PropTypes.func, minDate: React.PropTypes.object, maxDate: React.PropTypes.object, }, windowListeners: { 'keyup': '_handleWindowKeyUp' }, getInitialState: function() { return { isCalendarActive: false }; }, render: function() { var $__0= this.props,initialDate=$__0.initialDate,onAccept=$__0.onAccept,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{initialDate:1,onAccept:1}); var classes = this.getClasses('mui-date-picker-dialog'); var actions = [ React.createElement(FlatButton, { key: 0, label: "Cancel", secondary: true, onTouchTap: this._handleCancelTouchTap}), React.createElement(FlatButton, { key: 1, label: "OK", secondary: true, onTouchTap: this._handleOKTouchTap}) ]; if(this.props.autoOk){ actions = actions.slice(0, 1); } return ( React.createElement(DialogWindow, React.__spread({}, other, {ref: "dialogWindow", className: classes, actions: actions, contentClassName: "mui-date-picker-dialog-window", onDismiss: this._handleDialogDismiss, onShow: this._handleDialogShow, repositionOnUpdate: false}), React.createElement(Calendar, { minDate: this.props.minDate, maxDate: this.props.maxDate, ref: "calendar", onSelectedDate: this._onSelectedDate, initialDate: this.props.initialDate, isActive: this.state.isCalendarActive}) ) ); }, show: function() { this.refs.dialogWindow.show(); }, dismiss: function() { this.refs.dialogWindow.dismiss(); }, _onSelectedDate: function(){ if(this.props.autoOk){ setTimeout(this._handleOKTouchTap.bind(this), 300); } }, _handleCancelTouchTap: function() { this.dismiss(); }, _handleOKTouchTap: function() { this.dismiss(); if (this.props.onAccept) { this.props.onAccept(this.refs.calendar.getSelectedDate()); } }, _handleDialogShow: function() { this.setState({ isCalendarActive: true }); if(this.props.onShow) { this.props.onShow(); } }, _handleDialogDismiss: function() { this.setState({ isCalendarActive: false }); if(this.props.onDismiss) { this.props.onDismiss(); } }, _handleWindowKeyUp: function(e) { if (this.refs.dialogWindow.isOpen()) { switch (e.keyCode) { case KeyCode.ENTER: this._handleOKTouchTap(); break; } } } }); module.exports = DatePickerDialog; },{"../dialog-window":14,"../flat-button":21,"../mixins/classable":32,"../mixins/window-listenable":34,"../utils/key-code":67,"./calendar":9,"react":248}],12:[function(require,module,exports){ var React = require('react'); var Classable = require('../mixins/classable'); var WindowListenable = require('../mixins/window-listenable'); var DateTime = require('../utils/date-time'); var KeyCode = require('../utils/key-code'); var DatePickerDialog = require('./date-picker-dialog'); var TextField = require('../text-field'); var DatePicker = React.createClass({displayName: "DatePicker", mixins: [Classable, WindowListenable], propTypes: { defaultDate: React.PropTypes.object, formatDate: React.PropTypes.func, mode: React.PropTypes.oneOf(['portrait', 'landscape', 'inline']), onFocus: React.PropTypes.func, onTouchTap: React.PropTypes.func, onChange: React.PropTypes.func, onShow: React.PropTypes.func, onDismiss: React.PropTypes.func, minDate: React.PropTypes.object, maxDate: React.PropTypes.object, autoOk: React.PropTypes.bool, }, windowListeners: { 'keyup': '_handleWindowKeyUp' }, getDefaultProps: function() { return { formatDate: DateTime.format, minDate: null, maxDate: null, autoOk: false }; }, getInitialState: function() { return { date: this.props.defaultDate, dialogDate: new Date() }; }, render: function() { var $__0= this.props,formatDate=$__0.formatDate,mode=$__0.mode,onFocus=$__0.onFocus,onTouchTap=$__0.onTouchTap,onShow=$__0.onShow,onDismiss=$__0.onDismiss,minDate=$__0.minDate,maxDate=$__0.maxDate,autoOk=$__0.autoOk,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{formatDate:1,mode:1,onFocus:1,onTouchTap:1,onShow:1,onDismiss:1,minDate:1,maxDate:1,autoOk:1}); var classes = this.getClasses('mui-date-picker', { 'mui-is-landscape': this.props.mode === 'landscape', 'mui-is-inline': this.props.mode === 'inline' }); var defaultInputValue; if (this.props.defaultDate) { defaultInputValue = this.props.formatDate(this.props.defaultDate); } return ( React.createElement("div", {className: classes}, React.createElement(TextField, React.__spread({}, other, {ref: "input", defaultValue: defaultInputValue, onFocus: this._handleInputFocus, onTouchTap: this._handleInputTouchTap})), React.createElement(DatePickerDialog, { minDate: minDate, maxDate: maxDate, autoOk: autoOk, ref: "dialogWindow", initialDate: this.state.dialogDate, onAccept: this._handleDialogAccept, onShow: onShow, onDismiss: onDismiss}) ) ); }, getDate: function() { return this.state.date; }, setDate: function(d) { this.setState({ date: d }); this.refs.input.setValue(this.props.formatDate(d)); }, _handleDialogAccept: function(d) { this.setDate(d); if (this.props.onChange) this.props.onChange(null, d); }, _handleInputFocus: function(e) { e.target.blur(); if (this.props.onFocus) this.props.onFocus(e); }, _handleInputTouchTap: function(e) { this.setState({ dialogDate: this.getDate() }); this.refs.dialogWindow.show(); if (this.props.onTouchTap) this.props.onTouchTap(e); }, _handleWindowKeyUp: function(e) { //TO DO: open the dialog if input has focus } }); module.exports = DatePicker; },{"../mixins/classable":32,"../mixins/window-listenable":34,"../text-field":57,"../utils/date-time":64,"../utils/key-code":67,"./date-picker-dialog":11,"react":248}],13:[function(require,module,exports){ var React = require('react'); var Classable = require('../mixins/classable'); var DateTime = require('../utils/date-time'); var EnhancedButton = require('../enhanced-button'); var DayButton = React.createClass({displayName: "DayButton", mixins: [Classable], propTypes: { date: React.PropTypes.object, onTouchTap: React.PropTypes.func, selected: React.PropTypes.bool }, render: function() { var $__0= this.props,className=$__0.className,date=$__0.date,onTouchTap=$__0.onTouchTap,selected=$__0.selected,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{className:1,date:1,onTouchTap:1,selected:1}); var classes = this.getClasses('mui-date-picker-day-button', { 'mui-is-current-date': DateTime.isEqualDate(this.props.date, new Date()), 'mui-is-selected': this.props.selected }); return this.props.date ? ( React.createElement(EnhancedButton, React.__spread({}, other, {className: classes, disableFocusRipple: true, disableTouchRipple: true, onTouchTap: this._handleTouchTap}), React.createElement("div", {className: "mui-date-picker-day-button-select"}), React.createElement("span", {className: "mui-date-picker-day-button-label"}, this.props.date.getDate()) ) ) : ( React.createElement("span", {className: classes}) ); }, _handleTouchTap: function(e) { if (this.props.onTouchTap) this.props.onTouchTap(e, this.props.date); } }); module.exports = DayButton; },{"../enhanced-button":18,"../mixins/classable":32,"../utils/date-time":64,"react":248}],14:[function(require,module,exports){ var React = require('react'); var WindowListenable = require('./mixins/window-listenable'); var CssEvent = require('./utils/css-event'); var KeyCode = require('./utils/key-code'); var Classable = require('./mixins/classable'); var FlatButton = require('./flat-button'); var Overlay = require('./overlay'); var Paper = require('./paper'); var DialogWindow = React.createClass({displayName: "DialogWindow", mixins: [Classable, WindowListenable], propTypes: { actions: React.PropTypes.array, actionFocus: React.PropTypes.string, contentClassName: React.PropTypes.string, openImmediately: React.PropTypes.bool, onClickAway: React.PropTypes.func, onDismiss: React.PropTypes.func, onShow: React.PropTypes.func, repositionOnUpdate: React.PropTypes.bool, modal: React.PropTypes.bool }, windowListeners: { 'keyup': '_handleWindowKeyUp' }, getDefaultProps: function() { return { actions: [], repositionOnUpdate: true, modal: false }; }, getInitialState: function() { return { open: this.props.openImmediately || false }; }, componentDidMount: function() { this._positionDialog(); if (this.props.openImmediately) { this.refs.dialogOverlay.preventScrolling(); this._onShow(); this._focusOnAction(); } }, componentDidUpdate: function (prevProps, prevState) { this._positionDialog(); this._focusOnAction(); }, render: function() { var classes = this.getClasses('mui-dialog-window', { 'mui-is-shown': this.state.open }); var contentClasses = 'mui-dialog-window-contents'; var actions = this._getActionsContainer(this.props.actions); if (this.props.contentClassName) { contentClasses += ' ' + this.props.contentClassName; } return ( React.createElement("div", {className: classes}, React.createElement(Paper, {ref: "dialogWindow", className: contentClasses, zDepth: 4}, this.props.children, actions ), React.createElement(Overlay, {ref: "dialogOverlay", show: this.state.open, autoLockScrolling: false, onTouchTap: this._handleOverlayTouchTap}) ) ); }, isOpen: function() { return this.state.open; }, dismiss: function() { CssEvent.onTransitionEnd(React.findDOMNode(this), function() { this.refs.dialogOverlay.allowScrolling(); }.bind(this)); this.setState({ open: false }); this._onDismiss(); }, show: function() { this.refs.dialogOverlay.preventScrolling(); this._focusOnAction(); this.setState({ open: true }); this._onShow(); }, _addClassName: function(reactObject, className) { var originalClassName = reactObject.props.className; var newClassname = originalClassName ? originalClassName + ' ' + className : className; return React.cloneElement(reactObject, { className: newClassname }); }, _getAction: function(actionJSON, key) { var props = { key: key, secondary: true, onClick: actionJSON.onClick ? actionJSON.onClick : this.dismiss, label: actionJSON.text }; if (actionJSON.ref) { props.ref = actionJSON.ref; props.keyboardFocused = actionJSON.ref === this.props.actionFocus; } return ( React.createElement(FlatButton, React.__spread({}, props)) ); }, _getActionsContainer: function(actions) { var actionContainer; var actionObjects = []; if (actions.length) { for (var i = 0; i < actions.length; i++) { var currentAction = actions[i]; //if the current action isn't a react object, create one if (!React.isValidElement(currentAction)) { currentAction = this._getAction(currentAction, i); } currentAction = this._addClassName(currentAction, 'mui-dialog-window-action'); actionObjects.push(currentAction); }; actionContainer = ( React.createElement("div", {className: "mui-dialog-window-actions"}, actionObjects ) ); } return actionContainer; }, _positionDialog: function() { var container, dialogWindow, containerHeight, dialogWindowHeight; if (this.state.open) { container = React.findDOMNode(this), dialogWindow = React.findDOMNode(this.refs.dialogWindow), containerHeight = container.offsetHeight, //Reset the height in case the window was resized. dialogWindow.style.height = ''; dialogWindowHeight = dialogWindow.offsetHeight; //Vertically center the dialog window, but make sure it doesn't //transition to that position. if (this.props.repositionOnUpdate || !container.style.paddingTop) { container.style.paddingTop = ((containerHeight - dialogWindowHeight) / 2) - 64 + 'px'; } } }, _focusOnAction: function() { if (this.props.actionFocus) { React.findDOMNode(this.refs[this.props.actionFocus]).focus(); } }, _onShow: function() { if (this.props.onShow) this.props.onShow(); }, _onDismiss: function() { if (this.props.onDismiss) this.props.onDismiss(); }, _handleOverlayTouchTap: function() { if (!this.props.modal) { this.dismiss(); if (this.props.onClickAway) this.props.onClickAway(); } }, _handleWindowKeyUp: function(e) { if (!this.props.modal && e.keyCode == KeyCode.ESC) { this.dismiss(); } } }); module.exports = DialogWindow; },{"./flat-button":21,"./mixins/classable":32,"./mixins/window-listenable":34,"./overlay":35,"./paper":36,"./utils/css-event":63,"./utils/key-code":67,"react":248}],15:[function(require,module,exports){ var React = require('react'); var Classable = require('./mixins/classable'); var DialogWindow = require('./dialog-window'); var Dialog = React.createClass({displayName: "Dialog", mixins: [Classable], propTypes: { title: React.PropTypes.node }, render: function() { var $__0= this.props,className=$__0.className,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{className:1}); var classes = this.getClasses('mui-dialog'); var title; if (this.props.title) { // If the title is a string, wrap in an h3 tag. // If not, just use it as a node. title = Object.prototype.toString.call(this.props.title) === '[object String]' ? React.createElement("h3", {className: "mui-dialog-title"}, this.props.title) : this.props.title; } return ( React.createElement(DialogWindow, React.__spread({}, other, {ref: "dialogWindow", className: classes}), title, React.createElement("div", {ref: "dialogContent", className: "mui-dialog-content"}, this.props.children ) ) ); }, dismiss: function() { this.refs.dialogWindow.dismiss(); }, show: function() { this.refs.dialogWindow.show(); } }); module.exports = Dialog; },{"./dialog-window":14,"./mixins/classable":32,"react":248}],16:[function(require,module,exports){ var React = require('react'); var Classable = require('./mixins/classable'); var ClickAwayable = require('./mixins/click-awayable'); var KeyLine = require('./utils/key-line'); var Paper = require('./paper'); var FontIcon = require('./font-icon'); var Menu = require('./menu/menu'); var DropDownIcon = React.createClass({displayName: "DropDownIcon", mixins: [Classable, ClickAwayable], propTypes: { onChange: React.PropTypes.func, menuItems: React.PropTypes.array.isRequired, closeOnMenuItemClick: React.PropTypes.bool }, getInitialState: function() { return { open: false } }, getDefaultProps: function() { return { closeOnMenuItemClick: true } }, componentClickAway: function() { this.setState({ open: false }); }, render: function() { var classes = this.getClasses('mui-drop-down-icon', { 'mui-open': this.state.open }); var icon; if (this.props.iconClassName) icon = React.createElement(FontIcon, {className: this.props.iconClassName}); return ( React.createElement("div", {className: classes}, React.createElement("div", {className: "mui-menu-control", onClick: this._onControlClick}, icon, this.props.children ), React.createElement(Menu, {ref: "menuItems", menuItems: this.props.menuItems, hideable: true, visible: this.state.open, onItemClick: this._onMenuItemClick}) ) ); }, _onControlClick: function(e) { this.setState({ open: !this.state.open }); }, _onMenuItemClick: function(e, key, payload) { if (this.props.onChange) this.props.onChange(e, key, payload); if (this.props.closeOnMenuItemClick) { this.setState({ open: false }); } } }); module.exports = DropDownIcon; },{"./font-icon":23,"./menu/menu":30,"./mixins/classable":32,"./mixins/click-awayable":33,"./paper":36,"./utils/key-line":68,"react":248}],17:[function(require,module,exports){ (function (process){ var React = require('react'); var Classable = require('./mixins/classable'); var ClickAwayable = require('./mixins/click-awayable'); var DropDownArrow = require('./svg-icons/drop-down-arrow'); var Paper = require('./paper'); var Menu = require('./menu/menu'); var DropDownMenu = React.createClass({displayName: "DropDownMenu", mixins: [Classable, ClickAwayable], propTypes: { autoWidth: React.PropTypes.bool, onChange: React.PropTypes.func, menuItems: React.PropTypes.array.isRequired }, getDefaultProps: function() { return { autoWidth: true }; }, getInitialState: function() { return { open: false, selectedIndex: this.props.selectedIndex || 0 } }, componentClickAway: function() { this.setState({ open: false }); }, componentDidMount: function() { if (this.props.autoWidth) this._setWidth(); if (this.props.hasOwnProperty('selectedIndex')) this._setSelectedIndex(this.props); }, componentWillReceiveProps: function(nextProps) { if (this.props.hasOwnProperty('selectedIndex')) this._setSelectedIndex(nextProps); }, render: function() { var classes = this.getClasses('mui-drop-down-menu', { 'mui-open': this.state.open }); return ( React.createElement("div", {className: classes}, React.createElement("div", {className: "mui-menu-control", onClick: this._onControlClick}, React.createElement(Paper, {className: "mui-menu-control-bg", zDepth: 0}), React.createElement("div", {className: "mui-menu-label"}, this.props.menuItems[this.state.selectedIndex].text ), React.createElement(DropDownArrow, {className: "mui-menu-drop-down-icon"}), React.createElement("div", {className: "mui-menu-control-underline"}) ), React.createElement(Menu, { ref: "menuItems", autoWidth: this.props.autoWidth, selectedIndex: this.state.selectedIndex, menuItems: this.props.menuItems, hideable: true, visible: this.state.open, onItemClick: this._onMenuItemClick}) ) ); }, _setWidth: function() { var el = React.findDOMNode(this), menuItemsDom = React.findDOMNode(this.refs.menuItems); el.style.width = menuItemsDom.offsetWidth + 'px'; }, _setSelectedIndex: function(props) { var selectedIndex = props.selectedIndex; if (process.env.NODE_ENV !== 'production' && selectedIndex < 0) { console.warn('Cannot set selectedIndex to a negative index.', selectedIndex); } this.setState({selectedIndex: (selectedIndex > -1) ? selectedIndex : 0}); }, _onControlClick: function(e) { this.setState({ open: !this.state.open }); }, _onMenuItemClick: function(e, key, payload) { if (this.props.onChange && this.state.selectedIndex !== key) this.props.onChange(e, key, payload); this.setState({ selectedIndex: key, open: false }); } }); module.exports = DropDownMenu; }).call(this,require('_process')) },{"./menu/menu":30,"./mixins/classable":32,"./mixins/click-awayable":33,"./paper":36,"./svg-icons/drop-down-arrow":45,"_process":2,"react":248}],18:[function(require,module,exports){ var React = require('react'); var KeyCode = require('./utils/key-code'); var Classable = require('./mixins/classable'); var WindowListenable = require('./mixins/window-listenable'); var FocusRipple = require('./ripples/focus-ripple'); var TouchRipple = require('./ripples/touch-ripple'); var EnhancedButton = React.createClass({displayName: "EnhancedButton", mixins: [Classable, WindowListenable], propTypes: { centerRipple: React.PropTypes.bool, className: React.PropTypes.string, disabled: React.PropTypes.bool, disableFocusRipple: React.PropTypes.bool, disableTouchRipple: React.PropTypes.bool, keyboardFocused: React.PropTypes.bool, linkButton: React.PropTypes.bool, onBlur: React.PropTypes.func, onFocus: React.PropTypes.func, onTouchTap: React.PropTypes.func }, windowListeners: { 'keydown': '_handleWindowKeydown', 'keyup': '_handleWindowKeyup' }, getInitialState: function() { return { isKeyboardFocused: !this.props.disabled && this.props.keyboardFocused }; }, render: function() { var $__0= this.props,centerRipple=$__0.centerRipple,disabled=$__0.disabled,disableFocusRipple=$__0.disableFocusRipple,disableTouchRipple=$__0.disableTouchRipple,linkButton=$__0.linkButton,onBlur=$__0.onBlur,onFocus=$__0.onFocus,onTouchTap=$__0.onTouchTap,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{centerRipple:1,disabled:1,disableFocusRipple:1,disableTouchRipple:1,linkButton:1,onBlur:1,onFocus:1,onTouchTap:1}); var classes = this.getClasses('mui-enhanced-button', { 'mui-is-disabled': disabled, 'mui-is-keyboard-focused': this.state.isKeyboardFocused, 'mui-is-link-button': linkButton }); var touchRipple = ( React.createElement(TouchRipple, { ref: "touchRipple", key: "touchRipple", centerRipple: centerRipple}, this.props.children ) ); var focusRipple = ( React.createElement(FocusRipple, { key: "focusRipple", show: this.state.isKeyboardFocused}) ); var buttonProps = { className: classes, disabled: disabled, onBlur: this._handleBlur, onFocus: this._handleFocus, onTouchTap: this._handleTouchTap }; var buttonChildren = [ disabled || disableTouchRipple ? this.props.children : touchRipple, disabled || disableFocusRipple ? null : focusRipple ]; if (disabled && linkButton) { return ( React.createElement("span", React.__spread({}, other, {className: classes, disabled: disabled}), this.props.children ) ); } return linkButton ? ( React.createElement("a", React.__spread({}, other, buttonProps), buttonChildren ) ) : ( React.createElement("button", React.__spread({}, other, buttonProps), buttonChildren ) ); }, isKeyboardFocused: function() { return this.state.isKeyboardFocused; }, _handleWindowKeydown: function(e) { if (!this.props.disabled) { if (e.keyCode == KeyCode.TAB) this._tabPressed = true; if (e.keyCode == KeyCode.ENTER && this.state.isKeyboardFocused) { this._handleTouchTap(e); } } }, _handleWindowKeyup: function(e) { if (!this.props.disabled && e.keyCode == KeyCode.SPACE && this.state.isKeyboardFocused) { this._handleTouchTap(e); } }, _handleBlur: function(e) { this._cancelFocusTimeout(); if (!this.props.disabled) { this.setState({ isKeyboardFocused: false }); if (this.props.onBlur) this.props.onBlur(e); } }, _handleFocus: function(e) { if (!this.props.disabled) { //setTimeout is needed because the focus event fires first //Wait so that we can capture if this was a keyboard focus //or touch focus this._focusTimeout = setTimeout(function() { if (this._tabPressed) { this.setState({ isKeyboardFocused: true }); } }.bind(this), 150); if (this.props.onFocus) this.props.onFocus(e); } }, _handleTouchTap: function(e) { this._cancelFocusTimeout(); if (!this.props.disabled) { this._tabPressed = false; this.setState({ isKeyboardFocused: false }); if (this.props.onTouchTap) this.props.onTouchTap(e); } }, _cancelFocusTimeout: function () { if (this._focusTimeout) { clearTimeout(this._focusTimeout); this._focusTimeout = null; } } }); module.exports = EnhancedButton; },{"./mixins/classable":32,"./mixins/window-listenable":34,"./ripples/focus-ripple":41,"./ripples/touch-ripple":42,"./utils/key-code":67,"react":248}],19:[function(require,module,exports){ (function (process){ var React = require('react'); var KeyCode = require('./utils/key-code'); var Classable = require('./mixins/classable'); var UniqueId = require('./utils/unique-id'); var WindowListenable = require('./mixins/window-listenable'); var FocusRipple = require('./ripples/focus-ripple'); var TouchRipple = require('./ripples/touch-ripple'); var Paper = require('./paper'); var EnhancedSwitch = React.createClass({displayName: "EnhancedSwitch", mixins: [Classable, WindowListenable], propTypes: { id: React.PropTypes.string, inputType: React.PropTypes.string.isRequired, switchElement: React.PropTypes.element.isRequired, iconClassName: React.PropTypes.string.isRequired, name: React.PropTypes.string, value: React.PropTypes.string, label: React.PropTypes.string, onSwitch: React.PropTypes.func, required: React.PropTypes.bool, disabled: React.PropTypes.bool, defaultSwitched: React.PropTypes.bool, labelPosition: React.PropTypes.oneOf(['left', 'right']), disableFocusRipple: React.PropTypes.bool, disableTouchRipple: React.PropTypes.bool }, windowListeners: { 'keydown': '_handleWindowKeydown', 'keyup': '_handleWindowKeyup' }, getDefaultProps: function() { return { iconClassName: '' }; }, getInitialState: function() { return { switched: this.props.defaultSwitched || (this.props.valueLink && this.props.valueLink.value), isKeyboardFocused: false }; }, componentDidMount: function() { var inputNode = React.findDOMNode(this.refs.checkbox); this.setState({switched: inputNode.checked}); }, componentWillReceiveProps: function(nextProps) { var hasCheckedLinkProp = nextProps.hasOwnProperty('checkedLink'); var hasCheckedProp = nextProps.hasOwnProperty('checked'); var hasToggledProp = nextProps.hasOwnProperty('toggled'); var hasNewDefaultProp = (nextProps.hasOwnProperty('defaultSwitched') && (nextProps.defaultSwitched != this.props.defaultSwitched)); var newState = {}; if (hasCheckedProp) { newState.switched = nextProps.checked; } else if (hasToggledProp) { newState.switched = nextProps.toggled; } else if (hasCheckedLinkProp) { newState.switched = nextProps.checkedLink.value; } if (newState) this.setState(newState); }, render: function() { var $__0= this.props,type=$__0.type,name=$__0.name,value=$__0.value,label=$__0.label,onSwitch=$__0.onSwitch,defaultSwitched=$__0.defaultSwitched,onBlur=$__0.onBlur,onFocus=$__0.onFocus,onMouseUp=$__0.onMouseUp,onMouseDown=$__0.onMouseDown,onMouseOut=$__0.onMouseOut,onTouchStart=$__0.onTouchStart,onTouchEnd=$__0.onTouchEnd,disableTouchRipple=$__0.disableTouchRipple,disableFocusRipple=$__0.disableFocusRipple,iconClassName=$__0.iconClassName,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{type:1,name:1,value:1,label:1,onSwitch:1,defaultSwitched:1,onBlur:1,onFocus:1,onMouseUp:1,onMouseDown:1,onMouseOut:1,onTouchStart:1,onTouchEnd:1,disableTouchRipple:1,disableFocusRipple:1,iconClassName:1}); var classes = this.getClasses('mui-enhanced-switch', { 'mui-is-switched': this.state.switched, 'mui-is-disabled': this.props.disabled, 'mui-is-required': this.props.required }); var inputId = this.props.id || UniqueId.generate(); var labelElement = this.props.label ? ( React.createElement("label", {className: "mui-switch-label", htmlFor: inputId}, this.props.label ) ) : null; var inputProps = { ref: "checkbox", type: this.props.inputType, name: this.props.name, value: this.props.value, defaultChecked: this.props.defaultSwitched, onBlur: this._handleBlur, onFocus: this._handleFocus, }; var hideTouchRipple = this.props.disabled || disableTouchRipple; if(!hideTouchRipple) { inputProps.onMouseUp = this._handleMouseUp; inputProps.onMouseDown = this._handleMouseDown; inputProps.onMouseOut = this._handleMouseOut; inputProps.onTouchStart = this._handleTouchStart; inputProps.onTouchEnd = this._handleTouchEnd; } if (!this.props.hasOwnProperty('checkedLink')) { inputProps.onChange = this._handleChange; } var inputElement = ( React.createElement("input", React.__spread({}, other, inputProps, {className: "mui-enhanced-switch-input"})) ); var touchRipple = ( React.createElement(TouchRipple, { ref: "touchRipple", key: "touchRipple", centerRipple: true}) ); var focusRipple = ( React.createElement(FocusRipple, { key: "focusRipple", show: this.state.isKeyboardFocused}) ); var ripples = [ hideTouchRipple ? null : touchRipple, this.props.disabled || disableFocusRipple ? null : focusRipple ]; iconClassName += ' mui-enhanced-switch-wrap'; var switchElement = (this.props.iconClassName.indexOf("toggle") == -1) ? ( React.createElement("div", {className: iconClassName}, this.props.switchElement, ripples ) ) : ( React.createElement("div", {className: iconClassName}, React.createElement("div", {className: "mui-toggle-track"}), React.createElement(Paper, {className: "mui-toggle-thumb", zDepth: 1}, " ", ripples, " ") ) ); var labelPositionExist = this.props.labelPosition; // Position is left if not defined or invalid. var elementsInOrder = (labelPositionExist && (this.props.labelPosition.toUpperCase() === "RIGHT")) ? ( React.createElement("div", null, switchElement, labelElement ) ) : ( React.createElement("div", null, labelElement, switchElement ) ); return ( React.createElement("div", {className: classes}, inputElement, elementsInOrder ) ); }, isSwitched: function() { return React.findDOMNode(this.refs.checkbox).checked; }, // no callback here because there is no event setSwitched: function(newSwitchedValue) { if (!this.props.hasOwnProperty('checked') || this.props.checked === false) { this.setState({switched: newSwitchedValue}); React.findDOMNode(this.refs.checkbox).checked = newSwitchedValue; } else if (process.env.NODE_ENV !== 'production') { var message = 'Cannot call set method while checked is defined as a property.'; console.error(message); } }, getValue: function() { return React.findDOMNode(this.refs.checkbox).value; }, isKeyboardFocused: function() { return this.state.isKeyboardFocused; }, _handleChange: function(e) { this._tabPressed = false; this.setState({ isKeyboardFocused: false }); var isInputChecked = React.findDOMNode(this.refs.checkbox).checked; if (!this.props.hasOwnProperty('checked')) this.setState({switched: isInputChecked}); if (this.props.onSwitch) this.props.onSwitch(e, isInputChecked); }, /** * Because both the ripples and the checkbox input cannot share pointer * events, the checkbox input takes control of pointer events and calls * ripple animations manually. */ // Checkbox inputs only use SPACE to change their state. Using ENTER will // update the ui but not the input. _handleWindowKeydown: function(e) { if (e.keyCode == KeyCode.TAB) this._tabPressed = true; if (e.keyCode == KeyCode.SPACE && this.state.isKeyboardFocused) { this._handleChange(e); } }, _handleWindowKeyup: function(e) { if (e.keyCode == KeyCode.SPACE && this.state.isKeyboardFocused) { this._handleChange(e); } }, _handleMouseDown: function(e) { //only listen to left clicks if (e.button === 0) this.refs.touchRipple.start(e); }, _handleMouseUp: function(e) { this.refs.touchRipple.end(); }, _handleMouseOut: function(e) { this.refs.touchRipple.end(); }, _handleTouchStart: function(e) { this.refs.touchRipple.start(e); }, _handleTouchEnd: function(e) { this.refs.touchRipple.end(); }, _handleBlur: function(e) { this.setState({ isKeyboardFocused: false }); if (this.props.onBlur) this.props.onBlur(e); }, _handleFocus: function(e) { //setTimeout is needed becuase the focus event fires first //Wait so that we can capture if this was a keyboard focus //or touch focus setTimeout(function() { if (this._tabPressed) { this.setState({ isKeyboardFocused: true }); } }.bind(this), 150); if (this.props.onFocus) this.props.onFocus(e); } }); module.exports = EnhancedSwitch; }).call(this,require('_process')) },{"./mixins/classable":32,"./mixins/window-listenable":34,"./paper":36,"./ripples/focus-ripple":41,"./ripples/touch-ripple":42,"./utils/key-code":67,"./utils/unique-id":69,"_process":2,"react":248}],20:[function(require,module,exports){ var React = require('react'); var Classable = require('./mixins/classable'); var EnhancedTextarea = React.createClass({displayName: "EnhancedTextarea", mixins: [Classable], propTypes: { onChange: React.PropTypes.func, onHeightChange: React.PropTypes.func, textareaClassName: React.PropTypes.string, rows: React.PropTypes.number }, getDefaultProps: function() { return { rows: 1 }; }, getInitialState: function() { return { height: this.props.rows * 24 }; }, componentDidMount: function() { this._syncHeightWithShadow(); }, render: function() { var $__0= this.props,className=$__0.className,onChange=$__0.onChange,onHeightChange=$__0.onHeightChange,textareaClassName=$__0.textareaClassName,rows=$__0.rows,valueLink=$__0.valueLink,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{className:1,onChange:1,onHeightChange:1,textareaClassName:1,rows:1,valueLink:1}); var classes = this.getClasses('mui-enhanced-textarea'); var textareaClassName = 'mui-enhanced-textarea-input'; var style = { height: this.state.height + 'px' }; if (this.props.textareaClassName) { textareaClassName += ' ' + this.props.textareaClassName; } if (this.props.hasOwnProperty('valueLink')) { other.value = this.props.valueLink.value; } return ( React.createElement("div", {className: classes}, React.createElement("textarea", { ref: "shadow", className: "mui-enhanced-textarea-shadow", tabIndex: "-1", rows: this.props.rows, defaultValue: this.props.defaultValue, readOnly: true, value: this.props.value}), React.createElement("textarea", React.__spread({}, other, {ref: "input", className: textareaClassName, rows: this.props.rows, style: style, onChange: this._handleChange})) ) ); }, getInputNode: function() { return React.findDOMNode(this.refs.input); }, _syncHeightWithShadow: function(newValue, e) { var shadow = React.findDOMNode(this.refs.shadow); var currentHeight = this.state.height; var newHeight; if (newValue !== undefined) shadow.value = newValue; newHeight = shadow.scrollHeight; if (currentHeight !== newHeight) { this.setState({height: newHeight}); if (this.props.onHeightChange) this.props.onHeightChange(e, newHeight); } }, _handleChange: function(e) { this._syncHeightWithShadow(e.target.value); if (this.props.hasOwnProperty('valueLink')) { this.props.valueLink.requestChange(e.target.value); } if (this.props.onChange) this.props.onChange(e); }, componentWillReceiveProps: function(nextProps) { if (nextProps.value != this.props.value) { this._syncHeightWithShadow(nextProps.value); } } }); module.exports = EnhancedTextarea; },{"./mixins/classable":32,"react":248}],21:[function(require,module,exports){ var React = require('react'); var Classable = require('./mixins/classable'); var EnhancedButton = require('./enhanced-button'); var FlatButton = React.createClass({displayName: "FlatButton", mixins: [Classable], propTypes: { className: React.PropTypes.string, label: function(props, propName, componentName){ if (!props.children && !props.label) { return new Error('Warning: Required prop `label` or `children` was not specified in `'+ componentName + '`.') } }, primary: React.PropTypes.bool, secondary: React.PropTypes.bool }, render: function() { var $__0= this.props,label=$__0.label,primary=$__0.primary,secondary=$__0.secondary,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{label:1,primary:1,secondary:1}); var classes = this.getClasses('mui-flat-button', { 'mui-is-primary': !this.props.disabled && primary, 'mui-is-secondary': !this.props.disabled && !primary && secondary }); var children; if (label) children = React.createElement("span", {className: "mui-flat-button-label"}, label); else children = this.props.children; return ( React.createElement(EnhancedButton, React.__spread({}, other, {className: classes}), children ) ); } }); module.exports = FlatButton; },{"./enhanced-button":18,"./mixins/classable":32,"react":248}],22:[function(require,module,exports){ (function (process){ var React = require('react'); var Classable = require('./mixins/classable'); var EnhancedButton = require('./enhanced-button'); var FontIcon = require('./font-icon'); var Paper = require('./paper'); var getZDepth = function(disabled) { var zDepth = disabled ? 0 : 2; return { zDepth: zDepth, initialZDepth: zDepth }; }; var RaisedButton = React.createClass({displayName: "RaisedButton", mixins: [Classable], propTypes: { className: React.PropTypes.string, iconClassName: React.PropTypes.string, mini: React.PropTypes.bool, onMouseDown: React.PropTypes.func, onMouseUp: React.PropTypes.func, onMouseOut: React.PropTypes.func, onTouchEnd: React.PropTypes.func, onTouchStart: React.PropTypes.func, secondary: React.PropTypes.bool }, componentWillMount: function() { this.setState(getZDepth(this.props.disabled)); }, componentWillReceiveProps: function(newProps) { if(newProps.disabled !== this.props.disabled){ this.setState(getZDepth(newProps.disabled)); } }, componentDidMount: function() { if (process.env.NODE_ENV !== 'production') { if (this.props.iconClassName && this.props.children) { var warning = 'You have set both an iconClassName and a child icon. ' + 'It is recommended you use only one method when adding ' + 'icons to FloatingActionButtons.'; console.warn(warning); } } }, render: function() { var $__0= this.props,icon=$__0.icon,mini=$__0.mini,secondary=$__0.secondary,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{icon:1,mini:1,secondary:1}); var classes = this.getClasses('mui-floating-action-button', { 'mui-is-mini': mini, 'mui-is-secondary': !this.props.disabled && secondary }); var icon; if (this.props.iconClassName) icon = React.createElement(FontIcon, {className: "mui-floating-action-button-icon " + this.props.iconClassName}) return ( React.createElement(Paper, { className: classes, innerClassName: "mui-floating-action-button-inner", zDepth: this.state.zDepth, circle: true}, React.createElement(EnhancedButton, React.__spread({}, other, {className: "mui-floating-action-button-container", onMouseDown: this._handleMouseDown, onMouseUp: this._handleMouseUp, onMouseOut: this._handleMouseOut, onTouchStart: this._handleTouchStart, onTouchEnd: this._handleTouchEnd}), icon, this.props.children ) ) ); }, _handleMouseDown: function(e) { //only listen to left clicks if (e.button === 0) { this.setState({ zDepth: this.state.initialZDepth + 1 }); } if (this.props.onMouseDown) this.props.onMouseDown(e); }, _handleMouseUp: function(e) { this.setState({ zDepth: this.state.initialZDepth }); if (this.props.onMouseUp) this.props.onMouseUp(e); }, _handleMouseOut: function(e) { this.setState({ zDepth: this.state.initialZDepth }); if (this.props.onMouseOut) this.props.onMouseOut(e); }, _handleTouchStart: function(e) { this.setState({ zDepth: this.state.initialZDepth + 1 }); if (this.props.onTouchStart) this.props.onTouchStart(e); }, _handleTouchEnd: function(e) { this.setState({ zDepth: this.state.initialZDepth }); if (this.props.onTouchEnd) this.props.onTouchEnd(e); } }); module.exports = RaisedButton; }).call(this,require('_process')) },{"./enhanced-button":18,"./font-icon":23,"./mixins/classable":32,"./paper":36,"_process":2,"react":248}],23:[function(require,module,exports){ var React = require('react'); var Classable = require('./mixins/classable'); var FontIcon = React.createClass({displayName: "FontIcon", mixins: [Classable], render: function() { var $__0= this.props,className=$__0.className,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{className:1}); var classes = this.getClasses('mui-font-icon'); return ( React.createElement("span", React.__spread({}, other, {className: classes})) ); } }); module.exports = FontIcon; },{"./mixins/classable":32,"react":248}],24:[function(require,module,exports){ (function (process){ var React = require('react'); var Classable = require('./mixins/classable'); var EnhancedButton = require('./enhanced-button'); var FontIcon = require('./font-icon'); var Tooltip = require('./tooltip'); var IconButton = React.createClass({displayName: "IconButton", mixins: [Classable], propTypes: { className: React.PropTypes.string, disabled: React.PropTypes.bool, iconClassName: React.PropTypes.string, onBlur: React.PropTypes.func, onFocus: React.PropTypes.func, tooltip: React.PropTypes.string, touch: React.PropTypes.bool }, getInitialState: function() { return { tooltipShown: false }; }, componentDidMount: function() { if (this.props.tooltip) { this._positionTooltip(); } if (process.env.NODE_ENV !== 'production') { if (this.props.iconClassName && this.props.children) { var warning = 'You have set both an iconClassName and a child icon. ' + 'It is recommended you use only one method when adding ' + 'icons to IconButtons.'; console.warn(warning); } } }, render: function() { var $__0= this.props,tooltip=$__0.tooltip,touch=$__0.touch,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{tooltip:1,touch:1}); var classes = this.getClasses('mui-icon-button'); var tooltip; var fonticon; if (this.props.tooltip) { tooltip = ( React.createElement(Tooltip, { ref: "tooltip", className: "mui-icon-button-tooltip", label: tooltip, show: this.state.tooltipShown, touch: touch}) ); } if (this.props.iconClassName) { fonticon = ( React.createElement(FontIcon, {className: this.props.iconClassName}) ); } return ( React.createElement(EnhancedButton, React.__spread({}, other, {ref: "button", centerRipple: true, className: classes, onBlur: this._handleBlur, onFocus: this._handleFocus, onMouseOut: this._handleMouseOut, onMouseOver: this._handleMouseOver}), tooltip, fonticon, this.props.children ) ); }, _positionTooltip: function() { var tooltip = React.findDOMNode(this.refs.tooltip); var tooltipWidth = tooltip.offsetWidth; var buttonWidth = 48; tooltip.style.left = (tooltipWidth - buttonWidth) / 2 * -1 + 'px'; }, _showTooltip: function() { if (!this.props.disabled && this.props.tooltip) { this.setState({ tooltipShown: true }); } }, _hideTooltip: function() { this.setState({ tooltipShown: false }); }, _handleBlur: function(e) { this._hideTooltip(); if (this.props.onBlur) this.props.onBlur(e); }, _handleFocus: function(e) { this._showTooltip(); if (this.props.onFocus) this.props.onFocus(e); }, _handleMouseOut: function(e) { if (!this.refs.button.isKeyboardFocused()) this._hideTooltip(); if (this.props.onMouseOut) this.props.onMouseOut(e); }, _handleMouseOver: function(e) { this._showTooltip(); if (this.props.onMouseOver) this.props.onMouseOver(e); } }); module.exports = IconButton; }).call(this,require('_process')) },{"./enhanced-button":18,"./font-icon":23,"./mixins/classable":32,"./tooltip":61,"_process":2,"react":248}],25:[function(require,module,exports){ var React = require('react'); var InkBar = React.createClass({displayName: "InkBar", propTypes: { position: React.PropTypes.string }, render: function() { var styles = { left: this.props.left, width: this.props.width } return ( React.createElement("div", {className: "mui-ink-bar", style: styles}, " " ) ); } }); module.exports = InkBar; },{"react":248}],26:[function(require,module,exports){ (function (process){ var React = require('react'); var Classable = require('./mixins/classable'); var ClassNames = require('classnames'); var Input = React.createClass({displayName: "Input", propTypes: { multiline: React.PropTypes.bool, inlinePlaceholder: React.PropTypes.bool, rows: React.PropTypes.number, inputStyle: React.PropTypes.string, error: React.PropTypes.string, description: React.PropTypes.string, placeholder: React.PropTypes.string, type: React.PropTypes.string, onChange: React.PropTypes.func }, mixins: [Classable], getInitialState: function() { return { value: this.props.defaultValue, rows: this.props.rows }; }, getDefaultProps: function() { return { multiline: false, type: "text" }; }, componentDidMount: function() { if (process.env.NODE_ENV !== 'production') { console.warn('Input has been deprecated. Please use TextField instead. See http://material-ui.com/#/components/text-fields'); } }, render: function() { var classes = this.getClasses('mui-input', { 'mui-floating': this.props.inputStyle === 'floating', 'mui-text': this.props.type === 'text', 'mui-error': this.props.error || false, 'mui-disabled': !!this.props.disabled, }); var placeholder = this.props.inlinePlaceholder ? this.props.placeholder : ""; var inputIsNotEmpty = !!this.state.value; var inputClassName = ClassNames({ 'mui-is-not-empty': inputIsNotEmpty }); var textareaClassName = ClassNames({ 'mui-input-textarea': true, 'mui-is-not-empty': inputIsNotEmpty }); var inputElement = this.props.multiline ? this.props.valueLink ? React.createElement("textarea", React.__spread({}, this.props, {ref: "input", className: textareaClassName, placeholder: placeholder, rows: this.state.rows})) : React.createElement("textarea", React.__spread({}, this.props, {ref: "input", value: this.state.value, className: textareaClassName, placeholder: placeholder, rows: this.state.rows, onChange: this._onTextAreaChange})) : this.props.valueLink ? React.createElement("input", React.__spread({}, this.props, {ref: "input", className: inputClassName, placeholder: placeholder})) : React.createElement("input", React.__spread({}, this.props, {ref: "input", className: inputClassName, value: this.state.value, placeholder: placeholder, onChange: this._onInputChange})); var placeholderSpan = this.props.inlinePlaceholder ? null : React.createElement("span", {className: "mui-input-placeholder", onClick: this._onPlaceholderClick}, this.props.placeholder ); return ( React.createElement("div", {ref: this.props.ref, className: classes}, inputElement, placeholderSpan, React.createElement("span", {className: "mui-input-highlight"}), React.createElement("span", {className: "mui-input-bar"}), React.createElement("span", {className: "mui-input-description"}, this.props.description), React.createElement("span", {className: "mui-input-error"}, this.props.error) ) ); }, getValue: function() { return this.state.value; }, setValue: function(txt) { this.setState({value: txt}); }, clearValue: function() { this.setValue(''); }, blur: function() { if(this.isMounted()) React.findDOMNode(this.refs.input).blur(); }, focus: function() { if (this.isMounted()) React.findDOMNode(this.refs.input).focus(); }, _onInputChange: function(e) { var value = e.target.value; this.setState({value: value}); if (this.props.onChange) this.props.onChange(e, value); }, _onPlaceholderClick: function(e) { this.focus(); }, _onTextAreaChange: function(e) { this._onInputChange(e); this._onLineBreak(e); }, _onLineBreak: function(e) { var value = e.target.value; var lines = value.split('\n').length; if (lines > this.state.rows) { if (this.state.rows !== 20) { this.setState({ rows: ((this.state.rows) + 1)}); } } } }); module.exports = Input; }).call(this,require('_process')) },{"./mixins/classable":32,"_process":2,"classnames":70,"react":248}],27:[function(require,module,exports){ var React = require('react'), KeyCode = require('./utils/key-code'), Classable = require('./mixins/classable'), WindowListenable = require('./mixins/window-listenable'), Overlay = require('./overlay'), Paper = require('./paper'), Menu = require('./menu/menu'); var LeftNav = React.createClass({displayName: "LeftNav", mixins: [Classable, WindowListenable], propTypes: { docked: React.PropTypes.bool, header: React.PropTypes.element, onChange: React.PropTypes.func, menuItems: React.PropTypes.array.isRequired, selectedIndex: React.PropTypes.number, onNavOpen: React.PropTypes.func, onNavClose: React.PropTypes.func }, windowListeners: { 'keyup': '_onWindowKeyUp' }, getDefaultProps: function() { return { docked: true }; }, getInitialState: function() { return { open: this.props.docked }; }, toggle: function() { this.setState({ open: !this.state.open }); return this; }, close: function() { this.setState({ open: false }); if (this.props.onNavClose) this.props.onNavClose(); return this; }, open: function() { this.setState({ open: true }); if (this.props.onNavOpen) this.props.onNavOpen(); return this; }, render: function() { var classes = this.getClasses('mui-left-nav', { 'mui-closed': !this.state.open }), selectedIndex = this.props.selectedIndex, overlay; if (!this.props.docked) overlay = React.createElement(Overlay, {show: this.state.open, onTouchTap: this._onOverlayTouchTap}); return ( React.createElement("div", {className: classes}, overlay, React.createElement(Paper, { ref: "clickAwayableElement", className: "mui-left-nav-menu", zDepth: 2, rounded: false}, this.props.header, React.createElement(Menu, { ref: "menuItems", zDepth: 0, menuItems: this.props.menuItems, selectedIndex: selectedIndex, onItemClick: this._onMenuItemClick}) ) ) ); }, _onMenuItemClick: function(e, key, payload) { if (this.props.onChange && this.props.selectedIndex !== key) { this.props.onChange(e, key, payload); } if (!this.props.docked) this.close(); }, _onOverlayTouchTap: function() { this.close(); }, _onWindowKeyUp: function(e) { if (e.keyCode == KeyCode.ESC && !this.props.docked && this.state.open) { this.close(); } } }); module.exports = LeftNav; },{"./menu/menu":30,"./mixins/classable":32,"./mixins/window-listenable":34,"./overlay":35,"./paper":36,"./utils/key-code":67,"react":248}],28:[function(require,module,exports){ var React = require('react'); var Classable = require('../mixins/classable'); var LinkMenuItem = React.createClass({displayName: "LinkMenuItem", mixins: [Classable], propTypes: { index: React.PropTypes.number.isRequired, payload: React.PropTypes.string.isRequired, text: React.PropTypes.string.isRequired, target: React.PropTypes.string, disabled: React.PropTypes.bool }, getDefaultProps: function() { return { disabled: false }; }, render: function() { var classes = this.getClasses('mui-menu-item', { 'mui-is-disabled': this.props.disabled }); var onClickHandler = (this.props.disabled) ? this._stopLink : undefined; // Prevent context menu 'Open In New Tab/Window' var linkAttribute = (this.props.disabled) ? 'data-href' : 'href'; var link = {}; link[linkAttribute] = this.props.payload return ( React.createElement("a", React.__spread({key: this.props.index, className: classes}, link, {target: this.props.target, onClick: onClickHandler}), this.props.text) ); }, _stopLink: function(event) { event.preventDefault(); } }); module.exports = LinkMenuItem; },{"../mixins/classable":32,"react":248}],29:[function(require,module,exports){ var React = require('react'); var Classable = require('../mixins/classable'); var FontIcon = require('../font-icon'); var Toggle = require('../toggle'); var Types = { LINK: 'LINK', SUBHEADER: 'SUBHEADER', NESTED: 'NESTED' }; var MenuItem = React.createClass({displayName: "MenuItem", mixins: [Classable], propTypes: { index: React.PropTypes.number.isRequired, iconClassName: React.PropTypes.string, iconRightClassName: React.PropTypes.string, attribute: React.PropTypes.string, number: React.PropTypes.string, data: React.PropTypes.string, toggle: React.PropTypes.bool, disabled: React.PropTypes.bool, onTouchTap: React.PropTypes.func, onClick: React.PropTypes.func, onToggle: React.PropTypes.func, selected: React.PropTypes.bool }, statics: { Types: Types }, getDefaultProps: function() { return { toggle: false, disabled: false }; }, render: function() { var classes = this.getClasses('mui-menu-item', { 'mui-is-selected': this.props.selected, 'mui-is-disabled': this.props.disabled }); var icon; var data; var iconRight; var attribute; var number; var toggle; if (this.props.iconClassName) icon = React.createElement(FontIcon, {className: 'mui-menu-item-icon ' + this.props.iconClassName}); if (this.props.iconRightClassName) iconRight = React.createElement(FontIcon, {className: 'mui-menu-item-icon-right ' + this.props.iconRightClassName}); if (this.props.data) data = React.createElement("span", {className: "mui-menu-item-data"}, this.props.data); if (this.props.number !== undefined) number = React.createElement("span", {className: "mui-menu-item-number"}, this.props.number); if (this.props.attribute !== undefined) attribute = React.createElement("span", {className: "mui-menu-item-attribute"}, this.props.attribute); if (this.props.toggle) { var $__0= this.props,toggle=$__0.toggle,onClick=$__0.onClick,onToggle=$__0.onToggle,children=$__0.children,label=$__0.label,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{toggle:1,onClick:1,onToggle:1,children:1,label:1}); toggle = React.createElement(Toggle, React.__spread({}, other, {onToggle: this._handleToggle})); } return ( React.createElement("div", { key: this.props.index, className: classes, onTouchTap: this._handleTouchTap, onClick: this._handleOnClick}, icon, this.props.children, data, attribute, number, toggle, iconRight ) ); }, _handleTouchTap: function(e) { if (!this.props.disabled && this.props.onTouchTap) this.props.onTouchTap(e, this.props.index); }, _handleOnClick: function(e) { if (!this.props.disabled && this.props.onClick) this.props.onClick(e, this.props.index); }, _handleToggle: function(e, toggled) { if (!this.props.disabled && this.props.onToggle) this.props.onToggle(e, this.props.index, toggled); } }); module.exports = MenuItem; },{"../font-icon":23,"../mixins/classable":32,"../toggle":58,"react":248}],30:[function(require,module,exports){ var React = require('react'); var CssEvent = require('../utils/css-event'); var Dom = require('../utils/dom'); var KeyLine = require('../utils/key-line'); var Classable = require('../mixins/classable'); var ClickAwayable = require('../mixins/click-awayable'); var Paper = require('../paper'); var MenuItem = require('./menu-item'); var LinkMenuItem = require('./link-menu-item'); var SubheaderMenuItem = require('./subheader-menu-item'); /*********************** * Nested Menu Component ***********************/ var NestedMenuItem = React.createClass({displayName: "NestedMenuItem", mixins: [Classable, ClickAwayable], propTypes: { index: React.PropTypes.number.isRequired, text: React.PropTypes.string, menuItems: React.PropTypes.array.isRequired, zDepth: React.PropTypes.number, disabled: React.PropTypes.bool, onItemClick: React.PropTypes.func, onItemTap: React.PropTypes.func }, getDefaultProps: function() { return { disabled: false }; }, getInitialState: function() { return { open: false } }, componentClickAway: function() { this._closeNestedMenu(); }, componentDidMount: function() { this._positionNestedMenu(); }, componentDidUpdate: function(prevProps, prevState) { this._positionNestedMenu(); }, render: function() { var classes = this.getClasses('mui-nested-menu-item', { 'mui-open': this.state.open, 'mui-is-disabled': this.props.disabled }); return ( React.createElement("div", {className: classes, onMouseEnter: this._openNestedMenu, onMouseLeave: this._closeNestedMenu}, React.createElement(MenuItem, {index: this.props.index, disabled: this.props.disabled, iconRightClassName: "muidocs-icon-custom-arrow-drop-right", onClick: this._onParentItemClick}, this.props.text ), React.createElement(Menu, { ref: "nestedMenu", menuItems: this.props.menuItems, onItemClick: this._onMenuItemClick, onItemTap: this._onMenuItemTap, hideable: true, visible: this.state.open, zDepth: this.props.zDepth + 1}) ) ); }, _positionNestedMenu: function() { var el = React.findDOMNode(this), nestedMenu = React.findDOMNode(this.refs.nestedMenu); nestedMenu.style.left = el.offsetWidth + 'px'; }, _openNestedMenu: function() { if (!this.props.disabled) this.setState({ open: true }); }, _closeNestedMenu: function() { this.setState({ open: false }); }, _toggleNestedMenu: function() { if (!this.props.disabled) this.setState({ open: !this.state.open }); }, _onParentItemClick: function() { this._toggleNestedMenu(); }, _onMenuItemClick: function(e, index, menuItem) { if (this.props.onItemClick) this.props.onItemClick(e, index, menuItem); this._closeNestedMenu(); }, _onMenuItemTap: function(e, index, menuItem) { if (this.props.onItemTap) this.props.onItemTap(e, index, menuItem); this._closeNestedMenu(); } }); /**************** * Menu Component ****************/ var Menu = React.createClass({displayName: "Menu", mixins: [Classable], propTypes: { autoWidth: React.PropTypes.bool, onItemTap: React.PropTypes.func, onItemClick: React.PropTypes.func, onToggleClick: React.PropTypes.func, menuItems: React.PropTypes.array.isRequired, selectedIndex: React.PropTypes.number, hideable: React.PropTypes.bool, visible: React.PropTypes.bool, zDepth: React.PropTypes.number }, getInitialState: function() { return { nestedMenuShown: false } }, getDefaultProps: function() { return { autoWidth: true, hideable: false, visible: true, zDepth: 1 }; }, componentDidMount: function() { var el = React.findDOMNode(this); //Set the menu width this._setKeyWidth(el); //Save the initial menu height for later this._initialMenuHeight = el.offsetHeight + KeyLine.Desktop.GUTTER_LESS; //Show or Hide the menu according to visibility this._renderVisibility(); }, componentDidUpdate: function(prevProps, prevState) { if (this.props.visible !== prevProps.visible) this._renderVisibility(); }, render: function() { var classes = this.getClasses('mui-menu', { 'mui-menu-hideable': this.props.hideable, 'mui-visible': this.props.visible }); return ( React.createElement(Paper, {ref: "paperContainer", zDepth: this.props.zDepth, className: classes}, this._getChildren() ) ); }, _getChildren: function() { var children = [], menuItem, itemComponent, isSelected, isDisabled; //This array is used to keep track of all nested menu refs this._nestedChildren = []; for (var i=0; i < this.props.menuItems.length; i++) { menuItem = this.props.menuItems[i]; isSelected = i === this.props.selectedIndex; isDisabled = (menuItem.disabled === undefined) ? false : menuItem.disabled; var $__0= menuItem,icon=$__0.icon,data=$__0.data,attribute=$__0.attribute,number=$__0.number,toggle=$__0.toggle,onClick=$__0.onClick,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{icon:1,data:1,attribute:1,number:1,toggle:1,onClick:1}); switch (menuItem.type) { case MenuItem.Types.LINK: itemComponent = ( React.createElement(LinkMenuItem, { key: i, index: i, payload: menuItem.payload, target: menuItem.target, text: menuItem.text, disabled: isDisabled}) ); break; case MenuItem.Types.SUBHEADER: itemComponent = ( React.createElement(SubheaderMenuItem, { key: i, index: i, text: menuItem.text}) ); break; case MenuItem.Types.NESTED: itemComponent = ( React.createElement(NestedMenuItem, { ref: i, key: i, index: i, text: menuItem.text, disabled: isDisabled, menuItems: menuItem.items, zDepth: this.props.zDepth, onItemClick: this._onNestedItemClick, onItemTap: this._onNestedItemClick}) ); this._nestedChildren.push(i); break; default: itemComponent = ( React.createElement(MenuItem, React.__spread({}, other, {selected: isSelected, key: i, index: i, icon: menuItem.icon, data: menuItem.data, attribute: menuItem.attribute, number: menuItem.number, toggle: menuItem.toggle, disabled: isDisabled, onClick: this._onItemClick, onTouchTap: this._onItemTap}), menuItem.text ) ); } children.push(itemComponent); } return children; }, _setKeyWidth: function(el) { var menuWidth = this.props.autoWidth ? KeyLine.getIncrementalDim(el.offsetWidth) + 'px' : '100%'; //Update the menu width Dom.withoutTransition(el, function() { el.style.width = menuWidth; }); }, _renderVisibility: function() { var el; if (this.props.hideable) { el = React.findDOMNode(this); var innerContainer = React.findDOMNode(this.refs.paperContainer.getInnerContainer()); if (this.props.visible) { //Open the menu el.style.height = this._initialMenuHeight + 'px'; //Set the overflow to visible after the animation is done so //that other nested menus can be shown CssEvent.onTransitionEnd(el, function() { //Make sure the menu is open before setting the overflow. //This is to accout for fast clicks if (this.props.visible) innerContainer.style.overflow = 'visible'; }.bind(this)); } else { //Close the menu el.style.height = '0px'; //Set the overflow to hidden so that animation works properly innerContainer.style.overflow = 'hidden'; } } }, _onNestedItemClick: function(e, index, menuItem) { if (this.props.onItemClick) this.props.onItemClick(e, index, menuItem); }, _onNestedItemTap: function(e, index, menuItem) { if (this.props.onItemTap) this.props.onItemTap(e, index, menuItem); }, _onItemClick: function(e, index) { if (this.props.onItemClick) this.props.onItemClick(e, index, this.props.menuItems[index]); }, _onItemTap: function(e, index) { if (this.props.onItemTap) this.props.onItemTap(e, index, this.props.menuItems[index]); }, _onItemToggle: function(e, index, toggled) { if (this.props.onItemToggle) this.props.onItemToggle(e, index, this.props.menuItems[index], toggled); } }); module.exports = Menu; },{"../mixins/classable":32,"../mixins/click-awayable":33,"../paper":36,"../utils/css-event":63,"../utils/dom":65,"../utils/key-line":68,"./link-menu-item":28,"./menu-item":29,"./subheader-menu-item":31,"react":248}],31:[function(require,module,exports){ var React = require('react'); var SubheaderMenuItem = React.createClass({displayName: "SubheaderMenuItem", propTypes: { index: React.PropTypes.number.isRequired, text: React.PropTypes.string.isRequired }, render: function() { return ( React.createElement("div", {key: this.props.index, className: "mui-subheader"}, this.props.text) ); } }); module.exports = SubheaderMenuItem; },{"react":248}],32:[function(require,module,exports){ var React = require('react'); var classNames = require('classnames'); module.exports = { propTypes: { className: React.PropTypes.string }, getDefaultProps: function(){ return { className: '' } }, getClasses: function(initialClasses, additionalClassObj) { var classString = ''; //Initialize the classString with the classNames that were passed in if (this.props.className.length) classString += ' ' + this.props.className; //Add in initial classes if (typeof initialClasses === 'object') { classString += ' ' + classNames(initialClasses); } else { classString += ' ' + initialClasses; } //Add in additional classes if (additionalClassObj) classString += ' ' + classNames(additionalClassObj); //Convert the class string into an object and run it through the class set return classNames(this.getClassSet(classString)); }, getClassSet: function(classString) { var classObj = {}; if (classString) { classString.split(' ').forEach(function(className) { if (className) classObj[className] = true; }); } return classObj; } } },{"classnames":70,"react":248}],33:[function(require,module,exports){ var React = require('react'); var Events = require('../utils/events'); var Dom = require('../utils/dom'); module.exports = { //When the component mounts, listen to click events and check if we need to //Call the componentClickAway function. componentDidMount: function() { if (!this.manuallyBindClickAway) this._bindClickAway(); }, componentWillUnmount: function() { this._unbindClickAway(); }, _checkClickAway: function(e) { var el = React.findDOMNode(this); // Check if the target is inside the current component if (this.isMounted() && e.target != el && !Dom.isDescendant(el, e.target) && document.documentElement.contains(e.target)) { if (this.componentClickAway) this.componentClickAway(); } }, _bindClickAway: function() { Events.on(document, 'click', this._checkClickAway); }, _unbindClickAway: function() { Events.off(document, 'click', this._checkClickAway); } }; },{"../utils/dom":65,"../utils/events":66,"react":248}],34:[function(require,module,exports){ var Events = require('../utils/events'); module.exports = { componentDidMount: function() { var listeners = this.windowListeners; for (var eventName in listeners) { var callbackName = listeners[eventName]; Events.on(window, eventName, this[callbackName]); } }, componentWillUnmount: function() { var listeners = this.windowListeners; for (var eventName in listeners) { var callbackName = listeners[eventName]; Events.off(window, eventName, this[callbackName]); } } } },{"../utils/events":66}],35:[function(require,module,exports){ var React = require('react'), Classable = require('./mixins/classable'); var Overlay = React.createClass({displayName: "Overlay", mixins: [Classable], propTypes: { show: React.PropTypes.bool, autoLockScrolling: React.PropTypes.bool }, getDefaultProps: function() { return { autoLockScrolling: true }; }, componentDidUpdate: function(prevProps, prevState) { if (this.props.autoLockScrolling) (this.props.show) ? this._preventScrolling() : this._allowScrolling(); }, render: function() { var $__0= this.props,className=$__0.className,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{className:1}), classes = this.getClasses('mui-overlay', { 'mui-is-shown': this.props.show }); return ( React.createElement("div", React.__spread({}, other, {className: classes})) ); }, preventScrolling: function() { if (!this.props.autoLockScrolling) this._preventScrolling(); }, allowScrolling: function() { if (!this.props.autoLockScrolling) this._allowScrolling(); }, _preventScrolling: function() { var body = document.getElementsByTagName('body')[0]; body.style.overflow = 'hidden'; }, _allowScrolling: function() { var body = document.getElementsByTagName('body')[0]; body.style.overflow = ''; } }); module.exports = Overlay; },{"./mixins/classable":32,"react":248}],36:[function(require,module,exports){ var React = require('react'), Classable = require('./mixins/classable'); var Paper = React.createClass({displayName: "Paper", mixins: [Classable], propTypes: { circle: React.PropTypes.bool, innerClassName: React.PropTypes.string, innerStyle: React.PropTypes.object, rounded: React.PropTypes.bool, zDepth: React.PropTypes.oneOf([0,1,2,3,4,5]) }, getDefaultProps: function() { return { innerClassName: '', rounded: true, zDepth: 1 }; }, render: function() { var $__0= this.props,className=$__0.className,circle=$__0.circle,innerClassName=$__0.innerClassName,rounded=$__0.rounded,zDepth=$__0.zDepth,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{className:1,circle:1,innerClassName:1,rounded:1,zDepth:1}), classes = this.getClasses( 'mui-paper ' + 'mui-z-depth-' + this.props.zDepth, { 'mui-rounded': this.props.rounded, 'mui-circle': this.props.circle }), insideClasses = this.props.innerClassName + ' ' + 'mui-paper-container ' + 'mui-z-depth-bottom'; return ( React.createElement("div", React.__spread({}, other, {className: classes}), React.createElement("div", {ref: "innerContainer", className: insideClasses, style: this.props.innerStyle || {}}, this.props.children ) ) ); }, getInnerContainer: function() { return this.refs.innerContainer; } }); module.exports = Paper; },{"./mixins/classable":32,"react":248}],37:[function(require,module,exports){ (function (process){ var React = require('react'); var Paper = require('./paper'); var Classable = require('./mixins/classable'); var EnhancedSwitch = require('./enhanced-switch'); var RadioButton = require('./radio-button'); var RadioButtonGroup = React.createClass({displayName: "RadioButtonGroup", mixins: [Classable], propTypes: { name: React.PropTypes.string.isRequired, valueSelected: React.PropTypes.string, defaultSelected: React.PropTypes.string, labelPosition: React.PropTypes.oneOf(['left', 'right']), onChange: React.PropTypes.func }, _hasCheckAttribute: function(radioButton) { return radioButton.props.hasOwnProperty('checked') && radioButton.props.checked; }, getInitialState: function() { return { numberCheckedRadioButtons: 0, selected: this.props.valueSelected || this.props.defaultSelected || '' }; }, componentWillMount: function() { var cnt = 0; this.props.children.forEach(function(option) { if (this._hasCheckAttribute(option)) cnt++; }, this); this.setState({numberCheckedRadioButtons: cnt}); }, componentWillReceiveProps: function(nextProps) { if (nextProps.hasOwnProperty('valueSelected')) { this.setState({selected: nextProps.valueSelected}); } }, render: function() { var options = this.props.children.map(function(option) { var $__0= option.props,name=$__0.name,value=$__0.value,label=$__0.label,onCheck=$__0.onCheck,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{name:1,value:1,label:1,onCheck:1}); return React.createElement(RadioButton, React.__spread({}, other, {ref: option.props.value, name: this.props.name, key: option.props.value, value: option.props.value, label: option.props.label, labelPosition: this.props.labelPosition, onCheck: this._onChange, checked: option.props.value == this.state.selected})) }, this); return ( React.createElement("div", null, options ) ); }, _updateRadioButtons: function(newSelection) { if (this.state.numberCheckedRadioButtons == 0) { this.setState({selected: newSelection}); } else if (process.env.NODE_ENV !== 'production') { var message = "Cannot select a different radio button while another radio button " + "has the 'checked' property set to true."; console.error(message); } }, _onChange: function(e, newSelection) { this._updateRadioButtons(newSelection); // Successful update if (this.state.numberCheckedRadioButtons == 0) { if (this.props.onChange) this.props.onChange(e, newSelection); } }, getSelectedValue: function() { return this.state.selected; }, setSelectedValue: function(newSelection) { this._updateRadioButtons(newSelection); }, clearValue: function() { this.setSelectedValue(''); } }); module.exports = RadioButtonGroup; }).call(this,require('_process')) },{"./enhanced-switch":19,"./mixins/classable":32,"./paper":36,"./radio-button":38,"_process":2,"react":248}],38:[function(require,module,exports){ var React = require('react'); var Classable = require('./mixins/classable'); var EnhancedSwitch = require('./enhanced-switch'); var RadioButtonOff = require('./svg-icons/toggle-radio-button-off'); var RadioButtonOn = require('./svg-icons/toggle-radio-button-on'); var RadioButton = React.createClass({displayName: "RadioButton", mixins: [Classable], propTypes: { onCheck: React.PropTypes.func }, render: function() { var $__0= this.props,onCheck=$__0.onCheck,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{onCheck:1}); var radioButtonElement = ( React.createElement("div", null, React.createElement(RadioButtonOff, {className: "mui-radio-button-target"}), React.createElement(RadioButtonOn, {className: "mui-radio-button-fill"}) ) ); var enhancedSwitchProps = { ref: "enhancedSwitch", inputType: "radio", switchElement: radioButtonElement, className: "mui-radio-button", iconClassName: "mui-radio-button-icon", onSwitch: this._handleCheck, labelPosition: (this.props.labelPosition) ? this.props.labelPosition : "right" }; return ( React.createElement(EnhancedSwitch, React.__spread({}, other, enhancedSwitchProps)) ); }, // Only called when selected, not when unselected. _handleCheck: function(e) { if (this.props.onCheck) this.props.onCheck(e, this.props.value); }, isChecked: function() { return this.refs.enhancedSwitch.isSwitched(); }, setChecked: function(newCheckedValue) { this.refs.enhancedSwitch.setSwitched(newCheckedValue); this.setState({switched: newCheckedValue}); }, getValue: function() { return this.refs.enhancedSwitch.getValue(); } }); module.exports = RadioButton; },{"./enhanced-switch":19,"./mixins/classable":32,"./svg-icons/toggle-radio-button-off":52,"./svg-icons/toggle-radio-button-on":53,"react":248}],39:[function(require,module,exports){ var React = require('react'); var Classable = require('./mixins/classable'); var EnhancedButton = require('./enhanced-button'); var Paper = require('./paper'); var RaisedButton = React.createClass({displayName: "RaisedButton", mixins: [Classable], propTypes: { className: React.PropTypes.string, label: function(props, propName, componentName){ if (!props.children && !props.label) { return new Error('Warning: Required prop `label` or `children` was not specified in `'+ componentName + '`.') } }, onMouseDown: React.PropTypes.func, onMouseUp: React.PropTypes.func, onMouseOut: React.PropTypes.func, onTouchEnd: React.PropTypes.func, onTouchStart: React.PropTypes.func, primary: React.PropTypes.bool, secondary: React.PropTypes.bool }, getInitialState: function() { var zDepth = this.props.disabled ? 0 : 1; return { zDepth: zDepth, initialZDepth: zDepth }; }, componentWillReceiveProps: function(nextProps) { var zDepth = nextProps.disabled ? 0 : 1; this.setState({ zDepth: zDepth, initialZDepth: zDepth }); }, render: function() { var $__0= this.props,label=$__0.label,primary=$__0.primary,secondary=$__0.secondary,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{label:1,primary:1,secondary:1}); var classes = this.getClasses('mui-raised-button', { 'mui-is-primary': !this.props.disabled && primary, 'mui-is-secondary': !this.props.disabled && !primary && secondary }); var children; if (label) children = React.createElement("span", {className: "mui-raised-button-label"}, label); else children = this.props.children; return ( React.createElement(Paper, {className: classes, zDepth: this.state.zDepth}, React.createElement(EnhancedButton, React.__spread({}, other, {className: "mui-raised-button-container", onMouseUp: this._handleMouseUp, onMouseDown: this._handleMouseDown, onMouseOut: this._handleMouseOut, onTouchStart: this._handleTouchStart, onTouchEnd: this._handleTouchEnd}), children ) ) ); }, _handleMouseDown: function(e) { //only listen to left clicks if (e.button === 0) { this.setState({ zDepth: this.state.initialZDepth + 1 }); } if (this.props.onMouseDown) this.props.onMouseDown(e); }, _handleMouseUp: function(e) { this.setState({ zDepth: this.state.initialZDepth }); if (this.props.onMouseUp) this.props.onMouseUp(e); }, _handleMouseOut: function(e) { this.setState({ zDepth: this.state.initialZDepth }); if (this.props.onMouseOut) this.props.onMouseOut(e); }, _handleTouchStart: function(e) { this.setState({ zDepth: this.state.initialZDepth + 1 }); if (this.props.onTouchStart) this.props.onTouchStart(e); }, _handleTouchEnd: function(e) { this.setState({ zDepth: this.state.initialZDepth }); if (this.props.onTouchEnd) this.props.onTouchEnd(e); } }); module.exports = RaisedButton; },{"./enhanced-button":18,"./mixins/classable":32,"./paper":36,"react":248}],40:[function(require,module,exports){ var React = require('react'); var Classable = require('../mixins/classable'); var RippleCircle = React.createClass({displayName: "RippleCircle", mixins: [Classable], propTypes: { className: React.PropTypes.string, started: React.PropTypes.bool, ending: React.PropTypes.bool }, render: function() { var $__0= this.props,innerClassName=$__0.innerClassName,started=$__0.started,ending=$__0.ending,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{innerClassName:1,started:1,ending:1}); var classes = this.getClasses('mui-ripple-circle', { 'mui-is-started': this.props.started, 'mui-is-ending': this.props.ending }); return ( React.createElement("div", React.__spread({}, other, {className: classes}), React.createElement("div", {className: "mui-ripple-circle-inner"}) ) ); } }); module.exports = RippleCircle; },{"../mixins/classable":32,"react":248}],41:[function(require,module,exports){ var React = require('react'); var Classable = require('../mixins/classable'); var FocusRipple = React.createClass({displayName: "FocusRipple", mixins: [Classable], propTypes: { show: React.PropTypes.bool }, componentDidMount: function() { this._setRippleSize(); }, render: function() { var classes = this.getClasses('mui-focus-ripple', { 'mui-is-shown': this.props.show }); return ( React.createElement("div", {className: classes}, React.createElement("div", {className: "mui-focus-ripple-inner"}) ) ); }, _setRippleSize: function() { var el = React.findDOMNode(this); var height = el.offsetHeight; var width = el.offsetWidth; var size = Math.max(height, width); el.style.height = size + 'px'; el.style.top = (size / 2 * -1) + (height / 2) + 'px'; } }); module.exports = FocusRipple; },{"../mixins/classable":32,"react":248}],42:[function(require,module,exports){ var React = require('react'); var Classable = require('../mixins/classable'); var Dom = require('../utils/dom'); var RippleCircle = require('./circle'); var TouchRipple = React.createClass({displayName: "TouchRipple", mixins: [Classable], propTypes: { centerRipple: React.PropTypes.bool, className: React.PropTypes.string }, getInitialState: function() { return { ripples: [{ key: 0, started: false, ending: false }], touchInProgress: false }; }, render: function() { var classes = this.getClasses('mui-touch-ripple'); return ( React.createElement("div", { onMouseUp: this._handleMouseUp, onMouseDown: this._handleMouseDown, onMouseOut: this._handleMouseOut, onTouchStart: this._handleTouchStart, onTouchEnd: this._handleTouchEnd}, React.createElement("div", {className: classes}, this._getRippleElements() ), this.props.children ) ); }, start: function(e) { var ripples = this.state.ripples; var nextKey = ripples[ripples.length-1].key + 1; var style = !this.props.centerRipple ? this._getRippleStyle(e) : {}; var ripple; //Start the next unstarted ripple for (var i = 0; i < ripples.length; i++) { ripple = ripples[i]; if (!ripple.started) { ripple.started = true; ripple.style = style; break; } }; //Add an unstarted ripple at the end ripples.push({ key: nextKey, started: false, ending: false }); //Re-render this.setState({ ripples: ripples }); }, end: function() { var ripples = this.state.ripples; var ripple; var endingRipple; //End the the next un-ended ripple for (var i = 0; i < ripples.length; i++) { ripple = ripples[i]; if (ripple.started && !ripple.ending) { ripple.ending = true; endingRipple = ripple; break; } }; //Only update if a ripple was found if (endingRipple) { //Re-render this.setState({ ripples: ripples }); //Wait 2 seconds and remove the ripple from DOM setTimeout(function() { ripples.shift(); if (this.isMounted()) { this.setState({ ripples: ripples }); } }.bind(this), 2000); } }, _handleMouseDown: function(e) { //only listen to left clicks if (e.button === 0 && !this.state.touchInProgress) this.start(e); }, _handleMouseUp: function(e) { if (!this.state.touchInProgress) this.end(); }, _handleMouseOut: function(e) { if (!this.state.touchInProgress) this.end(); }, _handleTouchStart: function(e) { this.start(e); }, _handleTouchEnd: function(e) { this.setState({ touchInProgress: true }); setTimeout(function () { if (this.isMounted()) { this.setState({ touchInProgress: false }); } }.bind(this), 100); this.end(); }, _getRippleStyle: function(e) { var style = {}; var el = React.findDOMNode(this); var elHeight = el.offsetHeight; var elWidth = el.offsetWidth; var offset = Dom.offset(el); var isTouchEvent = e.touches && e.touches.length; var pageX = isTouchEvent ? e.touches[0].pageX : e.pageX; var pageY = isTouchEvent ? e.touches[0].pageY : e.pageY; var pointerX = pageX - offset.left; var pointerY = pageY - offset.top; var topLeftDiag = this._calcDiag(pointerX, pointerY); var topRightDiag = this._calcDiag(elWidth - pointerX, pointerY); var botRightDiag = this._calcDiag(elWidth - pointerX, elHeight - pointerY); var botLeftDiag = this._calcDiag(pointerX, elHeight - pointerY); var rippleRadius = Math.max( topLeftDiag, topRightDiag, botRightDiag, botLeftDiag ); var rippleSize = rippleRadius * 2; var left = pointerX - rippleRadius; var top = pointerY - rippleRadius; style.height = rippleSize + 'px'; style.width = rippleSize + 'px'; style.top = top + 'px'; style.left = left + 'px'; return style; }, _calcDiag: function(a, b) { return Math.sqrt((a * a) + (b * b)); }, _getRippleElements: function() { return this.state.ripples.map(function(ripple) { return ( React.createElement(RippleCircle, { key: ripple.key, started: ripple.started, ending: ripple.ending, style: ripple.style}) ); }.bind(this)); } }); module.exports = TouchRipple; },{"../mixins/classable":32,"../utils/dom":65,"./circle":40,"react":248}],43:[function(require,module,exports){ var React = require('react'), Paper = require('./paper'), Classable = require('./mixins/classable'), Draggable = require('react-draggable2'); var Slider = React.createClass({displayName: "Slider", propTypes: { required: React.PropTypes.bool, disabled: React.PropTypes.bool, min: React.PropTypes.number, max: React.PropTypes.number, step: React.PropTypes.number, error: React.PropTypes.string, description: React.PropTypes.string, name: React.PropTypes.string.isRequired, onChange: React.PropTypes.func, onDragStart: React.PropTypes.func, onDragStop: React.PropTypes.func }, mixins: [Classable], getDefaultProps: function() { return { required: true, disabled: false, defaultValue: 0, min: 0, max: 1, dragging: false }; }, getInitialState: function() { var value = this.props.value; if (value == null) value = this.props.defaultValue; var percent = (value - this.props.min) / (this.props.max - this.props.min); if (isNaN(percent)) percent = 0; return { value: value, percent: percent } }, componentWillReceiveProps: function(nextProps) { if (nextProps.value != null) { this.setValue(nextProps.value); } }, render: function() { var classes = this.getClasses('mui-input', { 'mui-error': this.props.error != null }); var sliderClasses = this.getClasses('mui-slider', { 'mui-slider-zero': this.state.percent == 0, 'mui-disabled': this.props.disabled }); var percent = this.state.percent; if (percent > 1) percent = 1; else if (percent < 0) percent = 0; return ( React.createElement("div", {className: classes, style: this.props.style}, React.createElement("span", {className: "mui-input-highlight"}), React.createElement("span", {className: "mui-input-bar"}), React.createElement("span", {className: "mui-input-description"}, this.props.description), React.createElement("span", {className: "mui-input-error"}, this.props.error), React.createElement("div", {className: sliderClasses, onClick: this._onClick}, React.createElement("div", {ref: "track", className: "mui-slider-track"}, React.createElement(Draggable, {axis: "x", bound: "point", cancel: this.props.disabled ? '*' : null, start: {x: (percent * 100) + '%'}, onStart: this._onDragStart, onStop: this._onDragStop, onDrag: this._onDragUpdate}, React.createElement("div", {className: "mui-slider-handle", tabIndex: 0}) ), React.createElement("div", {className: "mui-slider-selection mui-slider-selection-low", style: {width: (percent * 100) + '%'}}, React.createElement("div", {className: "mui-slider-selection-fill"}) ), React.createElement("div", {className: "mui-slider-selection mui-slider-selection-high", style: {width: ((1 - percent) * 100) + '%'}}, React.createElement("div", {className: "mui-slider-selection-fill"}) ) ) ), React.createElement("input", {ref: "input", type: "hidden", name: this.props.name, value: this.state.value, required: this.props.required, min: this.props.min, max: this.props.max, step: this.props.step}) ) ); }, getValue: function() { return this.state.value; }, setValue: function(i) { // calculate percentage var percent = (i - this.props.min) / (this.props.max - this.props.min); if (isNaN(percent)) percent = 0; // update state this.setState({ value: i, percent: percent }); }, getPercent: function() { return this.state.percent; }, setPercent: function (percent) { var value = this._percentToValue(percent); this.setState({value: value, percent: percent}); }, clearValue: function() { this.setValue(0); }, _onClick: function (e) { // let draggable handle the slider if (this.state.dragging || this.props.disabled) return; var value = this.state.value; var node = React.findDOMNode(this.refs.track); var boundingClientRect = node.getBoundingClientRect(); var offset = e.clientX - boundingClientRect.left; this._updateWithChangeEvent(e, offset / node.clientWidth); }, _onDragStart: function(e, ui) { this.setState({ dragging: true }); if (this.props.onDragStart) this.props.onDragStart(e, ui); }, _onDragStop: function(e, ui) { this.setState({ dragging: false }); if (this.props.onDragStop) this.props.onDragStop(e, ui); }, _onDragUpdate: function(e, ui) { if (!this.state.dragging) return; if (!this.props.disabled) this._dragX(e, ui.position.left); }, _dragX: function(e, pos) { var max = React.findDOMNode(this.refs.track).clientWidth; if (pos < 0) pos = 0; else if (pos > max) pos = max; this._updateWithChangeEvent(e, pos / max); }, _updateWithChangeEvent: function(e, percent) { if (this.state.percent === percent) return; this.setPercent(percent); var value = this._percentToValue(percent); if (this.props.onChange) this.props.onChange(e, value); }, _percentToValue: function(percent) { return percent * (this.props.max - this.props.min) + this.props.min; } }); module.exports = Slider; },{"./mixins/classable":32,"./paper":36,"react":248,"react-draggable2":71}],44:[function(require,module,exports){ var React = require('react'); var CssEvent = require('./utils/css-event'); var Classable = require('./mixins/classable'); var ClickAwayable = require('./mixins/click-awayable'); var FlatButton = require('./flat-button'); var Snackbar = React.createClass({displayName: "Snackbar", mixins: [Classable, ClickAwayable], manuallyBindClickAway: true, propTypes: { action: React.PropTypes.string, message: React.PropTypes.string.isRequired, openOnMount: React.PropTypes.bool, onActionTouchTap: React.PropTypes.func }, getInitialState: function() { return { open: this.props.openOnMount || false }; }, componentClickAway: function() { this.dismiss(); }, componentDidUpdate: function(prevProps, prevState) { if (prevState.open != this.state.open) { if (this.state.open) { //Only Bind clickaway after transition finishes CssEvent.onTransitionEnd(React.findDOMNode(this), function() { this._bindClickAway(); }.bind(this)); } else { this._unbindClickAway(); } } }, render: function() { var classes = this.getClasses('mui-snackbar', { 'mui-is-open': this.state.open }); var action; if (this.props.action) { action = ( React.createElement(FlatButton, { className: "mui-snackbar-action", label: this.props.action, onTouchTap: this.props.onActionTouchTap}) ); } return ( React.createElement("span", {className: classes}, React.createElement("span", {className: "mui-snackbar-message"}, this.props.message), action ) ); }, show: function() { this.setState({ open: true }); }, dismiss: function() { this.setState({ open: false }); } }); module.exports = Snackbar; },{"./flat-button":21,"./mixins/classable":32,"./mixins/click-awayable":33,"./utils/css-event":63,"react":248}],45:[function(require,module,exports){ var React = require('react'); var SvgIcon = require('./svg-icon'); var DropDownArrow = React.createClass({displayName: "DropDownArrow", render: function() { return ( React.createElement(SvgIcon, React.__spread({}, this.props), React.createElement("polygon", {points: "7,9.5 12,14.5 17,9.5 "}) ) ); } }); module.exports = DropDownArrow; },{"./svg-icon":49,"react":248}],46:[function(require,module,exports){ var React = require('react'); var SvgIcon = require('./svg-icon'); var NavigationChevronLeft = React.createClass({displayName: "NavigationChevronLeft", render: function() { return ( React.createElement(SvgIcon, React.__spread({}, this.props), React.createElement("path", {d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"}) ) ); } }); module.exports = NavigationChevronLeft; },{"./svg-icon":49,"react":248}],47:[function(require,module,exports){ var React = require('react'); var SvgIcon = require('./svg-icon'); var NavigationChevronLeft = React.createClass({displayName: "NavigationChevronLeft", render: function() { return ( React.createElement(SvgIcon, React.__spread({}, this.props), React.createElement("path", {d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}) ) ); } }); module.exports = NavigationChevronLeft; },{"./svg-icon":49,"react":248}],48:[function(require,module,exports){ var React = require('react'); var SvgIcon = require('./svg-icon'); var NavigationMenu = React.createClass({displayName: "NavigationMenu", render: function() { return ( React.createElement(SvgIcon, React.__spread({}, this.props), React.createElement("path", {d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"}) ) ); } }); module.exports = NavigationMenu; },{"./svg-icon":49,"react":248}],49:[function(require,module,exports){ var React = require('react'); var Classable = require('../mixins/classable'); var SvgIcon = React.createClass({displayName: "SvgIcon", mixins: [Classable], render: function() { var classes = this.getClasses('mui-svg-icon'); return ( React.createElement("svg", React.__spread({}, this.props, {className: classes, viewBox: "0 0 24 24"}), this.props.children ) ); } }); module.exports = SvgIcon; },{"../mixins/classable":32,"react":248}],50:[function(require,module,exports){ var React = require('react'); var SvgIcon = require('./svg-icon'); var ToggleCheckBoxChecked = React.createClass({displayName: "ToggleCheckBoxChecked", render: function() { return ( React.createElement(SvgIcon, React.__spread({}, this.props), React.createElement("path", {d: "M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M10,17l-5-5l1.4-1.4 l3.6,3.6l7.6-7.6L19,8L10,17z"}) ) ); } }); module.exports = ToggleCheckBoxChecked; },{"./svg-icon":49,"react":248}],51:[function(require,module,exports){ var React = require('react'); var SvgIcon = require('./svg-icon'); var ToggleCheckBoxOutlineBlank = React.createClass({displayName: "ToggleCheckBoxOutlineBlank", render: function() { return ( React.createElement(SvgIcon, React.__spread({}, this.props), React.createElement("path", {d: "M19,5v14H5V5H19 M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z"}) ) ); } }); module.exports = ToggleCheckBoxOutlineBlank; },{"./svg-icon":49,"react":248}],52:[function(require,module,exports){ var React = require('react'); var SvgIcon = require('./svg-icon'); var RadioButtonOff = React.createClass({displayName: "RadioButtonOff", render: function() { return ( React.createElement(SvgIcon, React.__spread({}, this.props), React.createElement("path", {d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"}) ) ); } }); module.exports = RadioButtonOff; },{"./svg-icon":49,"react":248}],53:[function(require,module,exports){ var React = require('react'); var SvgIcon = require('./svg-icon'); var RadioButtonOn = React.createClass({displayName: "RadioButtonOn", render: function() { return ( React.createElement(SvgIcon, React.__spread({}, this.props), React.createElement("path", {d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"}) ) ); } }); module.exports = RadioButtonOn; },{"./svg-icon":49,"react":248}],54:[function(require,module,exports){ var React = require('react'); var Classable = require('../mixins/classable'); var TabTemplate = require('./tabTemplate'); var Tab = React.createClass({displayName: "Tab", mixins: [Classable], propTypes: { handleTouchTap: React.PropTypes.func, selected: React.PropTypes.bool }, handleTouchTap: function(){ this.props.handleTouchTap(this.props.tabIndex, this); }, render: function(){ var styles = { width: this.props.width }; var classes = this.getClasses('mui-tab-item', { 'mui-tab-is-active': this.props.selected }); return ( React.createElement("div", {className: classes, style: styles, onTouchTap: this.handleTouchTap, routeName: this.props.route}, this.props.label ) ) } }); module.exports = Tab; },{"../mixins/classable":32,"./tabTemplate":55,"react":248}],55:[function(require,module,exports){ var React = require('react'); var TabTemplate = React.createClass({displayName: "TabTemplate", render: function(){ return ( React.createElement("div", {className: "mui-tab-template"}, this.props.children ) ); }, }); module.exports = TabTemplate; },{"react":248}],56:[function(require,module,exports){ var React = require('react/addons'); var Tab = require('./tab'); var TabTemplate = require('./tabTemplate'); var InkBar = require('../ink-bar'); var Tabs = React.createClass({displayName: "Tabs", propTypes: { initialSelectedIndex: React.PropTypes.number, onActive: React.PropTypes.func, tabWidth: React.PropTypes.number }, getInitialState: function(){ var selectedIndex = 0; if (this.props.initialSelectedIndex && this.props.initialSelectedIndex < this.props.children.length) { selectedIndex = this.props.initialSelectedIndex; } return { selectedIndex: selectedIndex }; }, getEvenWidth: function(){ return ( parseInt(window .getComputedStyle(React.findDOMNode(this)) .getPropertyValue('width'), 10) ); }, componentDidMount: function(){ if(this.props.tabWidth) { if(!(this.props.children.length * this.props.tabWidth > this.getEvenWidth())){ this.setState({ width: this.props.tabWidth, fixed: false }); return; } } this.setState({ width: this.getEvenWidth(), fixed: true }); }, handleTouchTap: function(tabIndex, tab){ if (this.props.onChange && this.state.selectedIndex !== tabIndex) { this.props.onChange(tabIndex, tab); } this.setState({selectedIndex: tabIndex}); //default CB is _onActive. Can be updated in tab.jsx if(tab.props.onActive) tab.props.onActive(tab); }, render: function(){ var _this = this; var width = this.state.fixed ? this.state.width/this.props.children.length : this.props.tabWidth; var left = width * this.state.selectedIndex || 0; var currentTemplate; var tabs = React.Children.map(this.props.children, function(tab, index){ if(tab.type.displayName === "Tab"){ if(_this.state.selectedIndex === index) currentTemplate = tab.props.children; return React.addons.cloneWithProps(tab, { key: index, selected: _this.state.selectedIndex === index, tabIndex: index, width: width, handleTouchTap: _this.handleTouchTap }) } else { var type = tab.type.displayName || tab.type; throw "Tabs only accepts Tab Components as children. Found " + type + " as child number " + (index + 1) + " of Tabs"; } }); return ( React.createElement("div", {className: "mui-tabs-container"}, React.createElement("div", {className: "mui-tab-item-container"}, tabs ), React.createElement(InkBar, {left: left, width: width}), React.createElement(TabTemplate, null, currentTemplate ) ) ) }, }); module.exports = Tabs; },{"../ink-bar":25,"./tab":54,"./tabTemplate":55,"react/addons":76}],57:[function(require,module,exports){ (function (process){ var React = require('react'); var Classable = require('./mixins/classable'); var UniqueId = require('./utils/unique-id'); var EnhancedTextarea = require('./enhanced-textarea'); var TextField = React.createClass({displayName: "TextField", mixins: [Classable], propTypes: { errorText: React.PropTypes.string, floatingLabelText: React.PropTypes.string, hintText: React.PropTypes.string, id: React.PropTypes.string, multiLine: React.PropTypes.bool, onBlur: React.PropTypes.func, onChange: React.PropTypes.func, onFocus: React.PropTypes.func, onKeyDown: React.PropTypes.func, onEnterKeyDown: React.PropTypes.func, type: React.PropTypes.string }, getDefaultProps: function() { return { type: 'text' }; }, getInitialState: function() { return { errorText: this.props.errorText, hasValue: this.props.value || this.props.defaultValue || (this.props.valueLink && this.props.valueLink.value) }; }, componentWillReceiveProps: function(nextProps) { var hasErrorProp = nextProps.hasOwnProperty('errorText'); var hasValueLinkProp = nextProps.hasOwnProperty('valueLink'); var hasValueProp = nextProps.hasOwnProperty('value'); var hasNewDefaultValue = nextProps.defaultValue !== this.props.defaultValue; var newState = {}; if (hasValueProp) { newState.hasValue = nextProps.value; } else if (hasValueLinkProp) { newState.hasValue = nextProps.valueLink.value; } else if (hasNewDefaultValue) { newState.hasValue = nextProps.defaultValue; } if (hasErrorProp) newState.errorText = nextProps.errorText; if (newState) this.setState(newState); }, render: function() { var $__0= this.props,className=$__0.className,errorText=$__0.errorText,floatingLabelText=$__0.floatingLabelText,hintText=$__0.hintText,id=$__0.id,multiLine=$__0.multiLine,onBlur=$__0.onBlur,onChange=$__0.onChange,onFocus=$__0.onFocus,type=$__0.type,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{className:1,errorText:1,floatingLabelText:1,hintText:1,id:1,multiLine:1,onBlur:1,onChange:1,onFocus:1,type:1}); var classes = this.getClasses('mui-text-field', { 'mui-has-error': this.props.errorText, 'mui-has-floating-labels': this.props.floatingLabelText, 'mui-has-value': this.state.hasValue, 'mui-is-disabled': this.props.disabled, 'mui-is-focused': this.state.isFocused, 'mui-is-multiLine': this.props.multiLine }); var inputId = this.props.id || UniqueId.generate(); var errorTextElement = this.state.errorText ? ( React.createElement("div", {className: "mui-text-field-error"}, this.state.errorText) ) : null; var hintTextElement = this.props.hintText ? ( React.createElement("div", {className: "mui-text-field-hint"}, this.props.hintText) ) : null; var floatingLabelTextElement = this.props.floatingLabelText ? ( React.createElement("label", { className: "mui-text-field-floating-label", htmlFor: inputId}, this.props.floatingLabelText ) ) : null; var inputProps; var inputElement; inputProps = { ref: 'input', className: 'mui-text-field-input', id: inputId, onBlur: this._handleInputBlur, onFocus: this._handleInputFocus, onKeyDown: this._handleInputKeyDown }; if (!this.props.hasOwnProperty('valueLink')) { inputProps.onChange = this._handleInputChange; } inputElement = this.props.multiLine ? ( React.createElement(EnhancedTextarea, React.__spread({}, other, inputProps, {onHeightChange: this._handleTextAreaHeightChange, textareaClassName: "mui-text-field-textarea"})) ) : ( React.createElement("input", React.__spread({}, other, inputProps, {type: this.props.type})) ); return ( React.createElement("div", {className: classes}, floatingLabelTextElement, hintTextElement, inputElement, React.createElement("hr", {className: "mui-text-field-underline"}), React.createElement("hr", {className: "mui-text-field-focus-underline"}), errorTextElement ) ); }, blur: function() { if (this.isMounted()) this._getInputNode().blur(); }, clearValue: function() { this.setValue(''); }, focus: function() { if (this.isMounted()) this._getInputNode().focus(); }, getValue: function() { return this.isMounted() ? this._getInputNode().value : undefined; }, setErrorText: function(newErrorText) { if (process.env.NODE_ENV !== 'production' && this.props.hasOwnProperty('errorText')) { console.error('Cannot call TextField.setErrorText when errorText is defined as a property.'); } else if (this.isMounted()) { this.setState({errorText: newErrorText}); } }, setValue: function(newValue) { if (process.env.NODE_ENV !== 'production' && this._isControlled()) { console.error('Cannot call TextField.setValue when value or valueLink is defined as a property.'); } else if (this.isMounted()) { this._getInputNode().value = newValue; this.setState({hasValue: newValue}); } }, _getInputNode: function() { return this.props.multiLine ? this.refs.input.getInputNode() : React.findDOMNode(this.refs.input); }, _handleInputBlur: function(e) { this.setState({isFocused: false}); if (this.props.onBlur) this.props.onBlur(e); }, _handleInputChange: function(e) { this.setState({hasValue: e.target.value}); if (this.props.onChange) this.props.onChange(e); }, _handleInputFocus: function(e) { this.setState({isFocused: true}); if (this.props.onFocus) this.props.onFocus(e); }, _handleInputKeyDown: function(e) { if (e.keyCode === 13 && this.props.onEnterKeyDown) this.props.onEnterKeyDown(e); if (this.props.onKeyDown) this.props.onKeyDown(e); }, _handleTextAreaHeightChange: function(e, height) { var newHeight = height + 24; if (this.props.floatingLabelText) newHeight += 24; React.findDOMNode(this).style.height = newHeight + 'px'; }, _isControlled: function() { return this.props.hasOwnProperty('value') || this.props.hasOwnProperty('valueLink'); } }); module.exports = TextField; }).call(this,require('_process')) },{"./enhanced-textarea":20,"./mixins/classable":32,"./utils/unique-id":69,"_process":2,"react":248}],58:[function(require,module,exports){ var React = require('react'); var Classable = require('./mixins/classable'); var Paper = require('./paper'); var EnhancedSwitch = require('./enhanced-switch'); var Toggle = React.createClass({displayName: "Toggle", mixins: [Classable], propTypes: { onToggle: React.PropTypes.func, toggled: React.PropTypes.bool, defaultToggled: React.PropTypes.bool }, render: function() { var $__0= this.props,onToggle=$__0.onToggle,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{onToggle:1}); var toggleElement = ( React.createElement("div", null, React.createElement("div", {className: "mui-toggle-track"}), React.createElement(Paper, {className: "mui-toggle-thumb", zDepth: 1}) ) ); var enhancedSwitchProps = { ref: "enhancedSwitch", inputType: "checkbox", switchElement: toggleElement, className: "mui-toggle", iconClassName: "mui-toggle-icon", onSwitch: this._handleToggle, defaultSwitched: this.props.defaultToggled, labelPosition: (this.props.labelPosition) ? this.props.labelPosition : "left" }; if (this.props.hasOwnProperty('toggled')) enhancedSwitchProps.checked = this.props.toggled; return ( React.createElement(EnhancedSwitch, React.__spread({}, other, enhancedSwitchProps)) ); }, isToggled: function() { return this.refs.enhancedSwitch.isSwitched(); }, setToggled: function(newToggledValue) { this.refs.enhancedSwitch.setSwitched(newToggledValue); }, _handleToggle: function(e, isInputChecked) { if (this.props.onToggle) this.props.onToggle(e, isInputChecked); } }); module.exports = Toggle; },{"./enhanced-switch":19,"./mixins/classable":32,"./paper":36,"react":248}],59:[function(require,module,exports){ var Classable = require('./mixins/classable'); var React = require('react'); var ToolbarGroup = React.createClass({displayName: "ToolbarGroup", propTypes: { float: React.PropTypes.string }, mixins: [Classable], render: function() { var classes = this.getClasses('mui-toolbar-group', { 'mui-left': this.props.float === 'left', 'mui-right': this.props.float === 'right' }); return ( React.createElement("div", {className: classes}, this.props.children ) ); } }); module.exports = ToolbarGroup; },{"./mixins/classable":32,"react":248}],60:[function(require,module,exports){ var Classable = require('./mixins/classable'); var React = require('react'); var Toolbar = React.createClass({displayName: "Toolbar", mixins: [Classable], render: function() { var classes = this.getClasses('mui-toolbar', { }); return ( React.createElement("div", {className: classes}, this.props.children ) ); } }); module.exports = Toolbar; },{"./mixins/classable":32,"react":248}],61:[function(require,module,exports){ var React = require('react'); var Classable = require('./mixins/classable'); var Tooltip = React.createClass({displayName: "Tooltip", mixins: [Classable], propTypes: { className: React.PropTypes.string, label: React.PropTypes.string.isRequired, show: React.PropTypes.bool, touch: React.PropTypes.bool }, componentDidMount: function() { this._setRippleSize(); }, componentDidUpdate: function(prevProps, prevState) { this._setRippleSize(); }, render: function() { var $__0= this.props,className=$__0.className,label=$__0.label,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{className:1,label:1}); var classes = this.getClasses('mui-tooltip', { 'mui-is-shown': this.props.show, 'mui-is-touch': this.props.touch }); return ( React.createElement("div", React.__spread({}, other, {className: classes}), React.createElement("div", {ref: "ripple", className: "mui-tooltip-ripple"}), React.createElement("span", {className: "mui-tooltip-label"}, this.props.label) ) ); }, _setRippleSize: function() { var ripple = React.findDOMNode(this.refs.ripple); var tooltipSize = React.findDOMNode(this).offsetWidth; var ripplePadding = this.props.touch ? 45 : 20; var rippleSize = tooltipSize + ripplePadding + 'px'; if (this.props.show) { ripple.style.height = rippleSize; ripple.style.width = rippleSize; } else { ripple.style.width = '0px'; ripple.style.height = '0px'; } } }); module.exports = Tooltip; },{"./mixins/classable":32,"react":248}],62:[function(require,module,exports){ var React = require('react/addons'); var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; var Classable = require('../mixins/classable'); var SlideIn = React.createClass({displayName: "SlideIn", mixins: [Classable], propTypes: { direction: React.PropTypes.oneOf(['left', 'right', 'up', 'down']) }, getDefaultProps: function() { return { direction: 'left' }; }, render: function() { var $__0= this.props,className=$__0.className,direction=$__0.direction,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{className:1,direction:1}); var classes = this.getClasses('mui-transition-slide-in'); classes += ' mui-is-' + this.props.direction; //Add a custom className to every child React.Children.forEach(this.props.children, function(child) { child.props.className = child.props.className ? child.props.className + ' mui-transition-slide-in-child': 'mui-transition-slide-in-child'; }); return ( React.createElement(ReactCSSTransitionGroup, React.__spread({}, other, {className: classes, transitionName: "mui-transition-slide-in", component: "div"}), this.props.children ) ); } }); module.exports = SlideIn; },{"../mixins/classable":32,"react/addons":76}],63:[function(require,module,exports){ var Events = require('./events'); module.exports = { _testSupportedProps: function(props) { var i, undefined, el = document.createElement('div'); for (i in props) { if (props.hasOwnProperty(i) && el.style[i] !== undefined) { return props[i]; } } }, //Returns the correct event name to use transitionEndEventName: function() { return this._testSupportedProps({ 'transition':'transitionend', 'OTransition':'otransitionend', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' }); }, animationEndEventName: function() { return this._testSupportedProps({ 'animation': 'animationend', '-o-animation': 'oAnimationEnd', '-moz-animation': 'animationend', '-webkit-animation': 'webkitAnimationEnd' }); }, onTransitionEnd: function (el, callback) { var transitionEnd = this.transitionEndEventName(); Events.once(el, transitionEnd, function() { return callback(); }); }, onAnimationEnd: function (el, callback) { var animationEnd = this.animationEndEventName(); Events.once(el, animationEnd, function() { return callback(); }); } }; },{"./events":66}],64:[function(require,module,exports){ module.exports = { addDays: function(d, days) { var newDate = this.clone(d); newDate.setDate(d.getDate() + days); return newDate; }, addMonths: function(d, months) { var newDate = this.clone(d); newDate.setMonth(d.getMonth() + months); return newDate; }, clone: function(d) { return new Date(d.getTime()); }, getDaysInMonth: function(d) { var resultDate = this.getFirstDayOfMonth(d); resultDate.setMonth(resultDate.getMonth() + 1); resultDate.setDate(resultDate.getDate() - 1); return resultDate.getDate(); }, getFirstDayOfMonth: function(d) { return new Date(d.getFullYear(), d.getMonth(), 1); }, getFullMonth: function(d) { var month = d.getMonth(); switch (month) { case 0: return 'January'; case 1: return 'February'; case 2: return 'March'; case 3: return 'April'; case 4: return 'May'; case 5: return 'June'; case 6: return 'July'; case 7: return 'August'; case 8: return 'September'; case 9: return 'October'; case 10: return 'November'; case 11: return 'December'; } }, getShortMonth: function(d) { var month = d.getMonth(); switch (month) { case 0: return 'Jan'; case 1: return 'Feb'; case 2: return 'Mar'; case 3: return 'Apr'; case 4: return 'May'; case 5: return 'Jun'; case 6: return 'Jul'; case 7: return 'Aug'; case 8: return 'Sep'; case 9: return 'Oct'; case 10: return 'Nov'; case 11: return 'Dec'; } }, getDayOfWeek: function(d) { var dow = d.getDay(); switch (dow) { case 0: return 'Sunday'; case 1: return 'Monday'; case 2: return 'Tuesday'; case 3: return 'Wednesday'; case 4: return 'Thursday'; case 5: return 'Friday'; case 6: return 'Saturday'; } }, getWeekArray: function(d) { var dayArray = []; var daysInMonth = this.getDaysInMonth(d); var daysInWeek; var emptyDays; var firstDayOfWeek; var week; var weekArray = []; for (var i = 1; i <= daysInMonth; i++) { dayArray.push(new Date(d.getFullYear(), d.getMonth(), i)); }; while (dayArray.length) { firstDayOfWeek = dayArray[0].getDay(); daysInWeek = 7 - firstDayOfWeek; emptyDays = 7 - daysInWeek; week = dayArray.splice(0, daysInWeek); for (var i = 0; i < emptyDays; i++) { week.unshift(null); }; weekArray.push(week); } return weekArray; }, format: function(date) { var m = date.getMonth() + 1; var d = date.getDate(); var y = date.getFullYear(); return m + '/' + d + '/' + y; }, isEqualDate: function(d1, d2) { return d1 && d2 && (d1.getFullYear() === d2.getFullYear()) && (d1.getMonth() === d2.getMonth()) && (d1.getDate() === d2.getDate()); }, monthDiff: function(d1, d2) { var m; m = (d1.getFullYear() - d2.getFullYear()) * 12; m += d1.getMonth(); m -= d2.getMonth(); return m; } } },{}],65:[function(require,module,exports){ module.exports = { isDescendant: function(parent, child) { var node = child.parentNode; while (node != null) { if (node == parent) return true; node = node.parentNode; } return false; }, offset: function(el) { var rect = el.getBoundingClientRect(); return { top: rect.top + document.body.scrollTop, left: rect.left + document.body.scrollLeft }; }, addClass: function(el, className) { if (el.classList) el.classList.add(className); else el.className += ' ' + className; }, removeClass: function(el, className) { if (el.classList) el.classList.remove(className); else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); }, hasClass: function(el, className) { if (el.classList) return el.classList.contains(className); else return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); }, toggleClass: function(el, className) { if (this.hasClass(el, className)) this.removeClass(el, className); else this.addClass(el, className); }, forceRedraw: function(el) { var originalDisplay = el.style.display; el.style.display = 'none'; el.offsetHeight; el.style.display = originalDisplay; }, withoutTransition: function(el, callback) { //turn off transition el.style.transition = 'none'; callback(); //force a redraw this.forceRedraw(el); //put the transition back el.style.transition = ''; } } },{}],66:[function(require,module,exports){ module.exports = { once: function(el, type, callback) { var typeArray = type.split(' '); var recursiveFunction = function(e){ e.target.removeEventListener(e.type, recursiveFunction); return callback(e); }; for (var i = typeArray.length - 1; i >= 0; i--) { this.on(el, typeArray[i], recursiveFunction); } }, // IE8+ Support on: function(el, type, callback) { if(el.addEventListener) { el.addEventListener(type, callback); } else { el.attachEvent('on' + type, function() { callback.call(el); }); } }, // IE8+ Support off: function(el, type, callback) { if(el.removeEventListener) { el.removeEventListener(type, callback); } else { el.detachEvent('on' + type, callback); } } }; },{}],67:[function(require,module,exports){ module.exports = { DOWN: 40, ESC: 27, ENTER: 13, LEFT: 37, RIGHT: 39, SPACE: 32, TAB: 9, UP: 38 } },{}],68:[function(require,module,exports){ module.exports = { Desktop: { GUTTER: 24, GUTTER_LESS: 16, INCREMENT: 64, MENU_ITEM_HEIGHT: 32 }, getIncrementalDim: function(dim) { return Math.ceil(dim / this.Desktop.INCREMENT) * this.Desktop.INCREMENT; } } },{}],69:[function(require,module,exports){ var index = 0; module.exports = { generate: function() { return "mui-id-" + (index++); } }; },{}],70:[function(require,module,exports){ /*! Copyright (c) 2015 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ function classNames() { var classes = ''; var arg; for (var i = 0; i < arguments.length; i++) { arg = arguments[i]; if (!arg) { continue; } if ('string' === typeof arg || 'number' === typeof arg) { classes += ' ' + arg; } else if (Object.prototype.toString.call(arg) === '[object Array]') { classes += ' ' + classNames.apply(null, arg); } else if ('object' === typeof arg) { for (var key in arg) { if (!arg.hasOwnProperty(key) || !arg[key]) { continue; } classes += ' ' + key; } } } return classes.substr(1); } // safely export classNames for node / browserify if (typeof module !== 'undefined' && module.exports) { module.exports = classNames; } // safely export classNames for RequireJS if (typeof define !== 'undefined' && define.amd) { define('classnames', [], function() { return classNames; }); } },{}],71:[function(require,module,exports){ 'use strict'; var React = require('react/addons'); var emptyFunction = function () {}; // for accessing browser globals var root = typeof window !== 'undefined' ? window : this; var bodyElement; if (typeof document !== 'undefined' && 'body' in document) { bodyElement = document.body; } function updateBoundState (state, bound) { if (!bound) return state; bound = String(bound); var boundTop = !!~bound.indexOf('top'); var boundRight = !!~bound.indexOf('right'); var boundBottom = !!~bound.indexOf('bottom'); var boundLeft = !!~bound.indexOf('left'); var boundAll = !!~bound.indexOf('all') || !(boundTop || boundRight || boundBottom || boundLeft); var boundBox = !~bound.indexOf('point'); state.boundTop = boundAll || boundTop; state.boundRight = boundAll || boundRight; state.boundBottom = boundAll || boundBottom; state.boundLeft = boundAll || boundLeft; state.boundBox = boundBox; return state; }; function createUIEvent(draggable) { return { position: { top: draggable.state.offsetTop, left: draggable.state.offsetLeft } }; } function canDragY(draggable) { return draggable.props.axis === 'both' || draggable.props.axis === 'y'; } function canDragX(draggable) { return draggable.props.axis === 'both' || draggable.props.axis === 'x'; } function isFunction(func) { return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]' } // @credits https://gist.github.com/rogozhnikoff/a43cfed27c41e4e68cdc function findInArray(array, callback) { for (var i = 0, length = array.length, element = null; i < length, element = array[i]; i++) { if (callback.apply(callback, [element, i, array])) return element; } } function matchesSelector(el, selector) { var method = findInArray([ 'matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector' ], function(method){ return isFunction(el[method]); }); return el[method].call(el, selector); } // @credits: http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript/4819886#4819886 var isTouchDevice = 'ontouchstart' in root // works on most browsers || 'onmsgesturechange' in root; // works on ie10 on ms surface // look ::handleDragStart //function isMultiTouch(e) { // return e.touches && Array.isArray(e.touches) && e.touches.length > 1 //} /** * simple abstraction for dragging events names * */ var dragEventFor = (function () { var eventsFor = { touch: { start: 'touchstart', move: 'touchmove', end: 'touchend' }, mouse: { start: 'mousedown', move: 'mousemove', end: 'mouseup' } }; return eventsFor[isTouchDevice ? 'touch' : 'mouse']; })(); /** * get {clientX, clientY} positions of control * */ function getControlPosition(e) { var position = (e.touches && e.touches[0]) || e; return { clientX: position.clientX, clientY: position.clientY } } function addEvent(el, event, handler) { if (!el) { return; } if (el.attachEvent) { el.attachEvent('on' + event, handler); } else if (el.addEventListener) { el.addEventListener(event, handler, true); } else { el['on' + event] = handler; } } function removeEvent(el, event, handler) { if (!el) { return; } if (el.detachEvent) { el.detachEvent('on' + event, handler); } else if (el.removeEventListener) { el.removeEventListener(event, handler, true); } else { el['on' + event] = null; } } module.exports = React.createClass({ displayName: 'Draggable', mixins: [React.addons.PureRenderMixin], propTypes: { /** * `axis` determines which axis the draggable can move. * * 'both' allows movement horizontally and vertically. * 'x' limits movement to horizontal axis. * 'y' limits movement to vertical axis. * * Defaults to 'both'. */ axis: React.PropTypes.oneOf(['both', 'x', 'y']), /** * `handle` specifies a selector to be used as the handle that initiates drag. * * Example: * * ```jsx * var App = React.createClass({ * render: function () { * return ( * *
*
Click me to drag
*
This is some other content
*
*
* ); * } * }); * ``` */ handle: React.PropTypes.string, /** * `cancel` specifies a selector to be used to prevent drag initialization. * * Example: * * ```jsx * var App = React.createClass({ * render: function () { * return( * *
*
You can't drag from here
*
Dragging here works fine
*
*
* ); * } * }); * ``` */ cancel: React.PropTypes.string, /** * `bound` determines whether to bound the movement to the parent box. * * The property takes a list of space-separated strings. The Draggable * is bounded by the nearest DOMNode.offsetParent. To set the offset * parent, give it a position value other than 'static'. * * Optionally choose one or more bounds from: * 'top' bounds movement to the top edge of the parent box. * 'right' bounds movement to the right edge of the parent box. * 'bottom' bounds movement to the bottom edge of the parent box. * 'left' bounds movement to the left edge of the parent box. * 'all' bounds movement to all edges (default if not specified). * * Optionally choose one anchor from: * 'point' to constrain only the top-left corner. * 'box' to constrain the entire box (default if not specified). * * You may use more than one bound, e.g. 'top left point'. Set to a * falsy value to disable. * * Defaults to 'all box'. */ bound: React.PropTypes.string, /** * `grid` specifies the x and y that dragging should snap to. * * Example: * * ```jsx * var App = React.createClass({ * render: function () { * return ( * *
I snap to a 25 x 25 grid
*
* ); * } * }); * ``` */ grid: React.PropTypes.arrayOf(React.PropTypes.number), /** * `constrain` takes a function to constrain the dragging. * * Example: * * ```jsx * function constrain (snap) { * function constrainOffset (offset, prev) { * var delta = offset - prev; * if (Math.abs(delta) >= snap) { * return prev + (delta < 0 ? -snap : snap); * } * return prev; * } * return function (pos) { * return { * top: constrainOffset(pos.top, pos.prevTop), * left: constrainOffset(pos.left, pos.prevLeft) * }; * }; * } * var App = React.createClass({ * render: function () { * return ( * *
I snap to a 25 x 25 grid
*
* ); * } * }); * ``` */ constrain: React.PropTypes.func, /** * `start` specifies the x and y that the dragged item should start at * * Example: * * ```jsx * var App = React.createClass({ * render: function () { * return ( * *
I start with left: 25px; top: 25px;
*
* ); * } * }); * ``` */ start: React.PropTypes.object, /** * `zIndex` specifies the zIndex to use while dragging. * * Example: * * ```jsx * var App = React.createClass({ * render: function () { * return ( * *
I have a zIndex
*
* ); * } * }); * ``` */ zIndex: React.PropTypes.number, /** * `useChild` determines whether to use the first child as root. * * If false, a div is created. This option is required if any children * have a ref. * * Defaults to true. */ useChild: React.PropTypes.bool, /** * Called when dragging starts. * * Example: * * ```js * function (event, ui) {} * ``` * * `event` is the Event that was triggered. * `ui` is an object: * * ```js * { * position: {top: 0, left: 0} * } * ``` */ onStart: React.PropTypes.func, /** * Called while dragging. * * Example: * * ```js * function (event, ui) {} * ``` * * `event` is the Event that was triggered. * `ui` is an object: * * ```js * { * position: {top: 0, left: 0} * } * ``` */ onDrag: React.PropTypes.func, /** * Called when dragging stops. * * Example: * * ```js * function (event, ui) {} * ``` * * `event` is the Event that was triggered. * `ui` is an object: * * ```js * { * position: {top: 0, left: 0} * } * ``` */ onStop: React.PropTypes.func, /** * A workaround option which can be passed if onMouseDown needs to be accessed, since it'll always be blocked (due to that there's internal use of onMouseDown) * */ onMouseDown: React.PropTypes.func }, getDefaultProps: function () { return { axis: 'both', bound: null, handle: null, cancel: null, grid: null, start: {}, zIndex: NaN, useChild: true, onStart: emptyFunction, onDrag: emptyFunction, onStop: emptyFunction, onMouseDown: emptyFunction }; }, getInitialState: function () { var state = { // Whether or not currently dragging dragging: false, // Pointer offset on screen clientX: 0, clientY: 0, // DOMNode offset relative to parent offsetLeft: this.props.start.x || 0, offsetTop: this.props.start.y || 0 }; updateBoundState(state, this.props.bound); return state; }, componentWillReceiveProps: function (nextProps) { var state = updateBoundState({}, nextProps.bound); if (nextProps.start) { if (nextProps.start.x != null) { state.offsetLeft = nextProps.start.x || 0; } if (nextProps.start.y != null) { state.offsetTop = nextProps.start.y || 0; } } this.setState(state); }, componentWillUnmount: function() { // Remove any leftover event handlers removeEvent(root, dragEventFor['move'], this.handleDrag); removeEvent(root, dragEventFor['end'], this.handleDragEnd); }, handleDragStart: function (e) { // todo: write right implementation to prevent multitouch drag // prevent multi-touch events // if (isMultiTouch(e)) { // this.handleDragEnd.apply(e, arguments); // return // } // Make it possible to attach event handlers on top of this one this.props.onMouseDown(e); // Short circuit if handle or cancel prop was provided and selector doesn't match if ((this.props.handle && !matchesSelector(e.target, this.props.handle)) || (this.props.cancel && matchesSelector(e.target, this.props.cancel))) { return; } var dragPoint = getControlPosition(e); // Initiate dragging this.setState({ dragging: true, clientX: dragPoint.clientX, clientY: dragPoint.clientY }); // Call event handler this.props.onStart(e, createUIEvent(this)); // Add event handlers addEvent(root, dragEventFor['move'], this.handleDrag); addEvent(root, dragEventFor['end'], this.handleDragEnd); // Add dragging class to body element if (bodyElement) bodyElement.className += ' react-draggable-dragging'; }, handleDragEnd: function (e) { // Short circuit if not currently dragging if (!this.state.dragging) { return; } // Turn off dragging this.setState({ dragging: false }); // Call event handler this.props.onStop(e, createUIEvent(this)); // Remove event handlers removeEvent(root, dragEventFor['move'], this.handleDrag); removeEvent(root, dragEventFor['end'], this.handleDragEnd); // Remove dragging class from body element if (bodyElement) { var className = bodyElement.className; bodyElement.className = className.replace(/(?:^|\s+)react-draggable-dragging\b/, ' '); } }, handleDrag: function (e) { var dragPoint = getControlPosition(e); var offsetLeft = this._toPixels(this.state.offsetLeft); var offsetTop = this._toPixels(this.state.offsetTop); var state = { offsetLeft: offsetLeft, offsetTop: offsetTop }; // Get parent DOM node var node = this.getDOMNode(); var offsetParent = node.offsetParent; var offset, boundingValue; if (canDragX(this)) { // Calculate updated position offset = offsetLeft + dragPoint.clientX - this.state.clientX; // Bound movement to parent box if (this.state.boundLeft) { boundingValue = state.offsetLeft - node.offsetLeft; if (offset < boundingValue) { offset = boundingValue; } } if (this.state.boundRight) { boundingValue += offsetParent.clientWidth; if (this.state.boundBox) { boundingValue -= node.offsetWidth; } if (offset > boundingValue) { offset = boundingValue; } } // Update left state.offsetLeft = offset; } if (canDragY(this)) { // Calculate updated position offset = offsetTop + dragPoint.clientY - this.state.clientY; // Bound movement to parent box if (this.state.boundTop) { boundingValue = state.offsetTop - node.offsetTop; if (offset < boundingValue) { offset = boundingValue; } } if (this.state.boundBottom) { boundingValue += offsetParent.clientHeight; if (this.state.boundBox) { boundingValue -= node.offsetHeight; } if (offset > boundingValue) { offset = boundingValue; } } // Update top state.offsetTop = offset; } var constrain = this.props.constrain; var grid = this.props.grid; // Backwards-compatibility for snap to grid if (!constrain && Array.isArray(grid)) { var constrainOffset = function (offset, prev, snap) { var delta = offset - prev; if (Math.abs(delta) >= snap) { return prev + parseInt(delta / snap, 10) * snap; } return prev; }; constrain = function (pos) { return { left: constrainOffset(pos.left, pos.prevLeft, grid[0]), top: constrainOffset(pos.top, pos.prevTop, grid[1]) }; }; } // Constrain if function has been provided var positions; if (constrain) { // Constrain positions positions = constrain({ prevLeft: this.state.offsetLeft, prevTop: this.state.offsetTop, left: state.offsetLeft, top: state.offsetTop }); if (positions) { // Update left if ('left' in positions && !isNaN(positions.left)) { state.offsetLeft = positions.left; } // Update top if ('top' in positions && !isNaN(positions.top)) { state.offsetTop = positions.top; } } } // Save new state state.clientX = this.state.clientX + (state.offsetLeft - offsetLeft); state.clientY = this.state.clientY + (state.offsetTop - offsetTop); this.setState(state); // Call event handler this.props.onDrag(e, createUIEvent(this)); }, onTouchStart: function (e) { e.preventDefault(); // prevent for scroll return this.handleDragStart.apply(this, arguments); }, render: function () { var style = { top: this.state.offsetTop, left: this.state.offsetLeft }; // Set zIndex if currently dragging and prop has been provided if (this.state.dragging && !isNaN(this.props.zIndex)) { style.zIndex = this.props.zIndex; } var props = { style: style, className: 'react-draggable', onMouseDown: this.handleDragStart, onTouchStart: this.onTouchStart, onMouseUp: this.handleDragEnd, onTouchEnd: this.handleDragEnd }; // Reuse the child provided // This makes it flexible to use whatever element is wanted (div, ul, etc) if (this.props.useChild) { return React.addons.cloneWithProps(React.Children.only(this.props.children), props); } return React.DOM.div(props, this.props.children); }, _toPixels: function (value) { // Support percentages if (typeof value == 'string' && value.slice(-1) == '%') { return parseInt((+value.replace('%', '') / 100) * this.getDOMNode().offsetParent.clientWidth, 10) || 0; } // Invalid values become zero var i = parseInt(value, 10); if (isNaN(i) || !isFinite(i)) return 0; return i; } }); },{"react/addons":76}],72:[function(require,module,exports){ /** * Copyright 2013-2014, 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 ResponderEventPlugin */ "use strict"; var EventConstants = require('react/lib/EventConstants'); var EventPluginUtils = require('react/lib/EventPluginUtils'); var EventPropagators = require('react/lib/EventPropagators'); var SyntheticEvent = require('react/lib/SyntheticEvent'); var accumulateInto = require('react/lib/accumulateInto'); var keyOf = require('react/lib/keyOf'); var isStartish = EventPluginUtils.isStartish; var isMoveish = EventPluginUtils.isMoveish; var isEndish = EventPluginUtils.isEndish; var executeDirectDispatch = EventPluginUtils.executeDirectDispatch; var hasDispatches = EventPluginUtils.hasDispatches; var executeDispatchesInOrderStopAtTrue = EventPluginUtils.executeDispatchesInOrderStopAtTrue; /** * ID of element that should respond to touch/move types of interactions, as * indicated explicitly by relevant callbacks. */ var responderID = null; var isPressing = false; var eventTypes = { /** * On a `touchStart`/`mouseDown`, is it desired that this element become the * responder? */ startShouldSetResponder: { phasedRegistrationNames: { bubbled: keyOf({onStartShouldSetResponder: null}), captured: keyOf({onStartShouldSetResponderCapture: null}) } }, /** * On a `scroll`, is it desired that this element become the responder? This * is usually not needed, but should be used to retroactively infer that a * `touchStart` had occured during momentum scroll. During a momentum scroll, * a touch start will be immediately followed by a scroll event if the view is * currently scrolling. */ scrollShouldSetResponder: { phasedRegistrationNames: { bubbled: keyOf({onScrollShouldSetResponder: null}), captured: keyOf({onScrollShouldSetResponderCapture: null}) } }, /** * On a `touchMove`/`mouseMove`, is it desired that this element become the * responder? */ moveShouldSetResponder: { phasedRegistrationNames: { bubbled: keyOf({onMoveShouldSetResponder: null}), captured: keyOf({onMoveShouldSetResponderCapture: null}) } }, /** * Direct responder events dispatched directly to responder. Do not bubble. */ responderMove: {registrationName: keyOf({onResponderMove: null})}, responderRelease: {registrationName: keyOf({onResponderRelease: null})}, responderTerminationRequest: { registrationName: keyOf({onResponderTerminationRequest: null}) }, responderGrant: {registrationName: keyOf({onResponderGrant: null})}, responderReject: {registrationName: keyOf({onResponderReject: null})}, responderTerminate: {registrationName: keyOf({onResponderTerminate: null})} }; /** * Performs negotiation between any existing/current responder, checks to see if * any new entity is interested in becoming responder, performs that handshake * and returns any events that must be emitted to notify the relevant parties. * * A note about event ordering in the `EventPluginHub`. * * Suppose plugins are injected in the following order: * * `[R, S, C]` * * To help illustrate the example, assume `S` is `SimpleEventPlugin` (for * `onClick` etc) and `R` is `ResponderEventPlugin`. * * "Deferred-Dispatched Events": * * - The current event plugin system will traverse the list of injected plugins, * in order, and extract events by collecting the plugin's return value of * `extractEvents()`. * - These events that are returned from `extractEvents` are "deferred * dispatched events". * - When returned from `extractEvents`, deferred-dispatched events contain an * "accumulation" of deferred dispatches. * - These deferred dispatches are accumulated/collected before they are * returned, but processed at a later time by the `EventPluginHub` (hence the * name deferred). * * In the process of returning their deferred-dispatched events, event plugins * themselves can dispatch events on-demand without returning them from * `extractEvents`. Plugins might want to do this, so that they can use event * dispatching as a tool that helps them decide which events should be extracted * in the first place. * * "On-Demand-Dispatched Events": * * - On-demand-dispatched events are not returned from `extractEvents`. * - On-demand-dispatched events are dispatched during the process of returning * the deferred-dispatched events. * - They should not have side effects. * - They should be avoided, and/or eventually be replaced with another * abstraction that allows event plugins to perform multiple "rounds" of event * extraction. * * Therefore, the sequence of event dispatches becomes: * * - `R`s on-demand events (if any) (dispatched by `R` on-demand) * - `S`s on-demand events (if any) (dispatched by `S` on-demand) * - `C`s on-demand events (if any) (dispatched by `C` on-demand) * - `R`s extracted events (if any) (dispatched by `EventPluginHub`) * - `S`s extracted events (if any) (dispatched by `EventPluginHub`) * - `C`s extracted events (if any) (dispatched by `EventPluginHub`) * * In the case of `ResponderEventPlugin`: If the `startShouldSetResponder` * on-demand dispatch returns `true` (and some other details are satisfied) the * `onResponderGrant` deferred dispatched event is returned from * `extractEvents`. The sequence of dispatch executions in this case * will appear as follows: * * - `startShouldSetResponder` (`ResponderEventPlugin` dispatches on-demand) * - `touchStartCapture` (`EventPluginHub` dispatches as usual) * - `touchStart` (`EventPluginHub` dispatches as usual) * - `responderGrant/Reject` (`EventPluginHub` dispatches as usual) * * @param {string} topLevelType Record from `EventConstants`. * @param {string} topLevelTargetID ID of deepest React rendered element. * @param {object} nativeEvent Native browser event. * @return {*} An accumulation of synthetic events. */ function setResponderAndExtractTransfer( topLevelType, topLevelTargetID, nativeEvent) { var shouldSetEventType = isStartish(topLevelType) ? eventTypes.startShouldSetResponder : isMoveish(topLevelType) ? eventTypes.moveShouldSetResponder : eventTypes.scrollShouldSetResponder; var bubbleShouldSetFrom = responderID || topLevelTargetID; var shouldSetEvent = SyntheticEvent.getPooled( shouldSetEventType, bubbleShouldSetFrom, nativeEvent ); EventPropagators.accumulateTwoPhaseDispatches(shouldSetEvent); var wantsResponderID = executeDispatchesInOrderStopAtTrue(shouldSetEvent); if (!shouldSetEvent.isPersistent()) { shouldSetEvent.constructor.release(shouldSetEvent); } if (!wantsResponderID || wantsResponderID === responderID) { return null; } var extracted; var grantEvent = SyntheticEvent.getPooled( eventTypes.responderGrant, wantsResponderID, nativeEvent ); EventPropagators.accumulateDirectDispatches(grantEvent); if (responderID) { var terminationRequestEvent = SyntheticEvent.getPooled( eventTypes.responderTerminationRequest, responderID, nativeEvent ); EventPropagators.accumulateDirectDispatches(terminationRequestEvent); var shouldSwitch = !hasDispatches(terminationRequestEvent) || executeDirectDispatch(terminationRequestEvent); if (!terminationRequestEvent.isPersistent()) { terminationRequestEvent.constructor.release(terminationRequestEvent); } if (shouldSwitch) { var terminateType = eventTypes.responderTerminate; var terminateEvent = SyntheticEvent.getPooled( terminateType, responderID, nativeEvent ); EventPropagators.accumulateDirectDispatches(terminateEvent); extracted = accumulateInto(extracted, [grantEvent, terminateEvent]); responderID = wantsResponderID; } else { var rejectEvent = SyntheticEvent.getPooled( eventTypes.responderReject, wantsResponderID, nativeEvent ); EventPropagators.accumulateDirectDispatches(rejectEvent); extracted = accumulateInto(extracted, rejectEvent); } } else { extracted = accumulateInto(extracted, grantEvent); responderID = wantsResponderID; } return extracted; } /** * A transfer is a negotiation between a currently set responder and the next * element to claim responder status. Any start event could trigger a transfer * of responderID. Any move event could trigger a transfer, so long as there is * currently a responder set (in other words as long as the user is pressing * down). * * @param {string} topLevelType Record from `EventConstants`. * @return {boolean} True if a transfer of responder could possibly occur. */ function canTriggerTransfer(topLevelType) { return topLevelType === EventConstants.topLevelTypes.topScroll || isStartish(topLevelType) || (isPressing && isMoveish(topLevelType)); } /** * Event plugin for formalizing the negotiation between claiming locks on * receiving touches. */ var ResponderEventPlugin = { getResponderID: function() { return responderID; }, eventTypes: eventTypes, /** * @param {string} topLevelType Record from `EventConstants`. * @param {DOMEventTarget} topLevelTarget The listening component root node. * @param {string} topLevelTargetID ID of `topLevelTarget`. * @param {object} nativeEvent Native browser event. * @return {*} An accumulation of synthetic events. * @see {EventPluginHub.extractEvents} */ extractEvents: function( topLevelType, topLevelTarget, topLevelTargetID, nativeEvent) { var extracted; // Must have missed an end event - reset the state here. if (responderID && isStartish(topLevelType)) { responderID = null; } if (isStartish(topLevelType)) { isPressing = true; } else if (isEndish(topLevelType)) { isPressing = false; } if (canTriggerTransfer(topLevelType)) { var transfer = setResponderAndExtractTransfer( topLevelType, topLevelTargetID, nativeEvent ); if (transfer) { extracted = accumulateInto(extracted, transfer); } } // Now that we know the responder is set correctly, we can dispatch // responder type events (directly to the responder). var type = isMoveish(topLevelType) ? eventTypes.responderMove : isEndish(topLevelType) ? eventTypes.responderRelease : isStartish(topLevelType) ? eventTypes.responderStart : null; if (type) { var gesture = SyntheticEvent.getPooled( type, responderID || '', nativeEvent ); EventPropagators.accumulateDirectDispatches(gesture); extracted = accumulateInto(extracted, gesture); } if (type === eventTypes.responderRelease) { responderID = null; } return extracted; } }; module.exports = ResponderEventPlugin; },{"react/lib/EventConstants":91,"react/lib/EventPluginUtils":95,"react/lib/EventPropagators":96,"react/lib/SyntheticEvent":184,"react/lib/accumulateInto":194,"react/lib/keyOf":233}],73:[function(require,module,exports){ /** * Copyright 2013-2014 Facebook, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * * @providesModule TapEventPlugin * @typechecks static-only */ "use strict"; var EventConstants = require('react/lib/EventConstants'); var EventPluginUtils = require('react/lib/EventPluginUtils'); var EventPropagators = require('react/lib/EventPropagators'); var SyntheticUIEvent = require('react/lib/SyntheticUIEvent'); var TouchEventUtils = require('./TouchEventUtils'); var ViewportMetrics = require('react/lib/ViewportMetrics'); var keyOf = require('react/lib/keyOf'); var topLevelTypes = EventConstants.topLevelTypes; var isStartish = EventPluginUtils.isStartish; var isEndish = EventPluginUtils.isEndish; var isTouch = function(topLevelType) { var touchTypes = [ topLevelTypes.topTouchCancel, topLevelTypes.topTouchEnd, topLevelTypes.topTouchStart, topLevelTypes.topTouchMove ]; return touchTypes.indexOf(topLevelType) >= 0; } /** * Number of pixels that are tolerated in between a `touchStart` and `touchEnd` * in order to still be considered a 'tap' event. */ var tapMoveThreshold = 10; var ignoreMouseThreshold = 750; var startCoords = {x: null, y: null}; var lastTouchEvent = null; var Axis = { x: {page: 'pageX', client: 'clientX', envScroll: 'currentPageScrollLeft'}, y: {page: 'pageY', client: 'clientY', envScroll: 'currentPageScrollTop'} }; function getAxisCoordOfEvent(axis, nativeEvent) { var singleTouch = TouchEventUtils.extractSingleTouch(nativeEvent); if (singleTouch) { return singleTouch[axis.page]; } return axis.page in nativeEvent ? nativeEvent[axis.page] : nativeEvent[axis.client] + ViewportMetrics[axis.envScroll]; } function getDistance(coords, nativeEvent) { var pageX = getAxisCoordOfEvent(Axis.x, nativeEvent); var pageY = getAxisCoordOfEvent(Axis.y, nativeEvent); return Math.pow( Math.pow(pageX - coords.x, 2) + Math.pow(pageY - coords.y, 2), 0.5 ); } var dependencies = [ topLevelTypes.topMouseDown, topLevelTypes.topMouseMove, topLevelTypes.topMouseUp ]; if (EventPluginUtils.useTouchEvents) { dependencies.push( topLevelTypes.topTouchEnd, topLevelTypes.topTouchStart, topLevelTypes.topTouchMove ); } var eventTypes = { touchTap: { phasedRegistrationNames: { bubbled: keyOf({onTouchTap: null}), captured: keyOf({onTouchTapCapture: null}) }, dependencies: dependencies } }; var TapEventPlugin = { tapMoveThreshold: tapMoveThreshold, ignoreMouseThreshold: ignoreMouseThreshold, eventTypes: eventTypes, /** * @param {string} topLevelType Record from `EventConstants`. * @param {DOMEventTarget} topLevelTarget The listening component root node. * @param {string} topLevelTargetID ID of `topLevelTarget`. * @param {object} nativeEvent Native browser event. * @return {*} An accumulation of synthetic events. * @see {EventPluginHub.extractEvents} */ extractEvents: function( topLevelType, topLevelTarget, topLevelTargetID, nativeEvent) { if (isTouch(topLevelType)) { lastTouchEvent = nativeEvent.timeStamp; } else { if (lastTouchEvent && (nativeEvent.timeStamp - lastTouchEvent) < ignoreMouseThreshold) { return null; } } if (!isStartish(topLevelType) && !isEndish(topLevelType)) { return null; } var event = null; var distance = getDistance(startCoords, nativeEvent); if (isEndish(topLevelType) && distance < tapMoveThreshold) { event = SyntheticUIEvent.getPooled( eventTypes.touchTap, topLevelTargetID, nativeEvent ); } if (isStartish(topLevelType)) { startCoords.x = getAxisCoordOfEvent(Axis.x, nativeEvent); startCoords.y = getAxisCoordOfEvent(Axis.y, nativeEvent); } else if (isEndish(topLevelType)) { startCoords.x = 0; startCoords.y = 0; } EventPropagators.accumulateTwoPhaseDispatches(event); return event; } }; module.exports = TapEventPlugin; },{"./TouchEventUtils":74,"react/lib/EventConstants":91,"react/lib/EventPluginUtils":95,"react/lib/EventPropagators":96,"react/lib/SyntheticUIEvent":190,"react/lib/ViewportMetrics":193,"react/lib/keyOf":233}],74:[function(require,module,exports){ /** * Copyright 2013-2014 Facebook, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * * @providesModule TouchEventUtils */ var TouchEventUtils = { /** * Utility function for common case of extracting out the primary touch from a * touch event. * - `touchEnd` events usually do not have the `touches` property. * http://stackoverflow.com/questions/3666929/ * mobile-sarai-touchend-event-not-firing-when-last-touch-is-removed * * @param {Event} nativeEvent Native event that may or may not be a touch. * @return {TouchesObject?} an object with pageX and pageY or null. */ extractSingleTouch: function(nativeEvent) { var touches = nativeEvent.touches; var changedTouches = nativeEvent.changedTouches; var hasTouches = touches && touches.length > 0; var hasChangedTouches = changedTouches && changedTouches.length > 0; return !hasTouches && hasChangedTouches ? changedTouches[0] : hasTouches ? touches[0] : nativeEvent; } }; module.exports = TouchEventUtils; },{}],75:[function(require,module,exports){ module.exports = function injectTapEventPlugin () { var React = require("react"); React.initializeTouchEvents(true); require('react/lib/EventPluginHub').injection.injectEventPluginsByName({ "ResponderEventPlugin": require('./ResponderEventPlugin.js'), "TapEventPlugin": require('./TapEventPlugin.js') }); }; },{"./ResponderEventPlugin.js":72,"./TapEventPlugin.js":73,"react":248,"react/lib/EventPluginHub":93}],76:[function(require,module,exports){ module.exports = require('./lib/ReactWithAddons'); },{"./lib/ReactWithAddons":176}],77:[function(require,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 AutoFocusMixin * @typechecks static-only */ 'use strict'; var focusNode = require("./focusNode"); var AutoFocusMixin = { componentDidMount: function() { if (this.props.autoFocus) { focusNode(this.getDOMNode()); } } }; module.exports = AutoFocusMixin; },{"./focusNode":210}],78:[function(require,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 BeforeInputEventPlugin * @typechecks static-only */ 'use strict'; var EventConstants = require("./EventConstants"); var EventPropagators = require("./EventPropagators"); var ExecutionEnvironment = require("./ExecutionEnvironment"); var FallbackCompositionState = require("./FallbackCompositionState"); var SyntheticCompositionEvent = require("./SyntheticCompositionEvent"); var SyntheticInputEvent = require("./SyntheticInputEvent"); var keyOf = require("./keyOf"); var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space var START_KEYCODE = 229; var canUseCompositionEvent = ( ExecutionEnvironment.canUseDOM && 'CompositionEvent' in window ); var documentMode = null; if (ExecutionEnvironment.canUseDOM && 'documentMode' in document) { documentMode = document.documentMode; } // Webkit offers a very useful `textInput` event that can be used to // directly represent `beforeInput`. The IE `textinput` event is not as // useful, so we don't use it. var canUseTextInputEvent = ( ExecutionEnvironment.canUseDOM && 'TextEvent' in window && !documentMode && !isPresto() ); // In IE9+, we have access to composition events, but the data supplied // by the native compositionend event may be incorrect. Japanese ideographic // spaces, for instance (\u3000) are not recorded correctly. var useFallbackCompositionData = ( ExecutionEnvironment.canUseDOM && ( (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11) ) ); /** * Opera <= 12 includes TextEvent in window, but does not fire * text input events. Rely on keypress instead. */ function isPresto() { var opera = window.opera; return ( typeof opera === 'object' && typeof opera.version === 'function' && parseInt(opera.version(), 10) <= 12 ); } var SPACEBAR_CODE = 32; var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE); var topLevelTypes = EventConstants.topLevelTypes; // Events and their corresponding property names. var eventTypes = { beforeInput: { phasedRegistrationNames: { bubbled: keyOf({onBeforeInput: null}), captured: keyOf({onBeforeInputCapture: null}) }, dependencies: [ topLevelTypes.topCompositionEnd, topLevelTypes.topKeyPress, topLevelTypes.topTextInput, topLevelTypes.topPaste ] }, compositionEnd: { phasedRegistrationNames: { bubbled: keyOf({onCompositionEnd: null}), captured: keyOf({onCompositionEndCapture: null}) }, dependencies: [ topLevelTypes.topBlur, topLevelTypes.topCompositionEnd, topLevelTypes.topKeyDown, topLevelTypes.topKeyPress, topLevelTypes.topKeyUp, topLevelTypes.topMouseDown ] }, compositionStart: { phasedRegistrationNames: { bubbled: keyOf({onCompositionStart: null}), captured: keyOf({onCompositionStartCapture: null}) }, dependencies: [ topLevelTypes.topBlur, topLevelTypes.topCompositionStart, topLevelTypes.topKeyDown, topLevelTypes.topKeyPress, topLevelTypes.topKeyUp, topLevelTypes.topMouseDown ] }, compositionUpdate: { phasedRegistrationNames: { bubbled: keyOf({onCompositionUpdate: null}), captured: keyOf({onCompositionUpdateCapture: null}) }, dependencies: [ topLevelTypes.topBlur, topLevelTypes.topCompositionUpdate, topLevelTypes.topKeyDown, topLevelTypes.topKeyPress, topLevelTypes.topKeyUp, topLevelTypes.topMouseDown ] } }; // Track whether we've ever handled a keypress on the space key. var hasSpaceKeypress = false; /** * Return whether a native keypress event is assumed to be a command. * This is required because Firefox fires `keypress` events for key commands * (cut, copy, select-all, etc.) even though no character is inserted. */ function isKeypressCommand(nativeEvent) { return ( (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) && // ctrlKey && altKey is equivalent to AltGr, and is not a command. !(nativeEvent.ctrlKey && nativeEvent.altKey) ); } /** * Translate native top level events into event types. * * @param {string} topLevelType * @return {object} */ function getCompositionEventType(topLevelType) { switch (topLevelType) { case topLevelTypes.topCompositionStart: return eventTypes.compositionStart; case topLevelTypes.topCompositionEnd: return eventTypes.compositionEnd; case topLevelTypes.topCompositionUpdate: return eventTypes.compositionUpdate; } } /** * Does our fallback best-guess model think this event signifies that * composition has begun? * * @param {string} topLevelType * @param {object} nativeEvent * @return {boolean} */ function isFallbackCompositionStart(topLevelType, nativeEvent) { return ( topLevelType === topLevelTypes.topKeyDown && nativeEvent.keyCode === START_KEYCODE ); } /** * Does our fallback mode think that this event is the end of composition? * * @param {string} topLevelType * @param {object} nativeEvent * @return {boolean} */ function isFallbackCompositionEnd(topLevelType, nativeEvent) { switch (topLevelType) { case topLevelTypes.topKeyUp: // Command keys insert or clear IME input. return (END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1); case topLevelTypes.topKeyDown: // Expect IME keyCode on each keydown. If we get any other // code we must have exited earlier. return (nativeEvent.keyCode !== START_KEYCODE); case topLevelTypes.topKeyPress: case topLevelTypes.topMouseDown: case topLevelTypes.topBlur: // Events are not possible without cancelling IME. return true; default: return false; } } /** * Google Input Tools provides composition data via a CustomEvent, * with the `data` property populated in the `detail` object. If this * is available on the event object, use it. If not, this is a plain * composition event and we have nothing special to extract. * * @param {object} nativeEvent * @return {?string} */ function getDataFromCustomEvent(nativeEvent) { var detail = nativeEvent.detail; if (typeof detail === 'object' && 'data' in detail) { return detail.data; } return null; } // Track the current IME composition fallback object, if any. var currentComposition = null; /** * @param {string} topLevelType Record from `EventConstants`. * @param {DOMEventTarget} topLevelTarget The listening component root node. * @param {string} topLevelTargetID ID of `topLevelTarget`. * @param {object} nativeEvent Native browser event. * @return {?object} A SyntheticCompositionEvent. */ function extractCompositionEvent( topLevelType, topLevelTarget, topLevelTargetID, nativeEvent ) { var eventType; var fallbackData; if (canUseCompositionEvent) { eventType = getCompositionEventType(topLevelType); } else if (!currentComposition) { if (isFallbackCompositionStart(topLevelType, nativeEvent)) { eventType = eventTypes.compositionStart; } } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) { eventType = eventTypes.compositionEnd; } if (!eventType) { return null; } if (useFallbackCompositionData) { // The current composition is stored statically and must not be // overwritten while composition continues. if (!currentComposition && eventType === eventTypes.compositionStart) { currentComposition = FallbackCompositionState.getPooled(topLevelTarget); } else if (eventType === eventTypes.compositionEnd) { if (currentComposition) { fallbackData = currentComposition.getData(); } } } var event = SyntheticCompositionEvent.getPooled( eventType, topLevelTargetID, nativeEvent ); if (fallbackData) { // Inject data generated from fallback path into the synthetic event. // This matches the property of native CompositionEventInterface. event.data = fallbackData; } else { var customData = getDataFromCustomEvent(nativeEvent); if (customData !== null) { event.data = customData; } } EventPropagators.accumulateTwoPhaseDispatches(event); return event; } /** * @param {string} topLevelType Record from `EventConstants`. * @param {object} nativeEvent Native browser event. * @return {?string} The string corresponding to this `beforeInput` event. */ function getNativeBeforeInputChars(topLevelType, nativeEvent) { switch (topLevelType) { case topLevelTypes.topCompositionEnd: return getDataFromCustomEvent(nativeEvent); case topLevelTypes.topKeyPress: /** * If native `textInput` events are available, our goal is to make * use of them. However, there is a special case: the spacebar key. * In Webkit, preventing default on a spacebar `textInput` event * cancels character insertion, but it *also* causes the browser * to fall back to its default spacebar behavior of scrolling the * page. * * Tracking at: * https://code.google.com/p/chromium/issues/detail?id=355103 * * To avoid this issue, use the keypress event as if no `textInput` * event is available. */ var which = nativeEvent.which; if (which !== SPACEBAR_CODE) { return null; } hasSpaceKeypress = true; return SPACEBAR_CHAR; case topLevelTypes.topTextInput: // Record the characters to be added to the DOM. var chars = nativeEvent.data; // If it's a spacebar character, assume that we have already handled // it at the keypress level and bail immediately. Android Chrome // doesn't give us keycodes, so we need to blacklist it. if (chars === SPACEBAR_CHAR && hasSpaceKeypress) { return null; } return chars; default: // For other native event types, do nothing. return null; } } /** * For browsers that do not provide the `textInput` event, extract the * appropriate string to use for SyntheticInputEvent. * * @param {string} topLevelType Record from `EventConstants`. * @param {object} nativeEvent Native browser event. * @return {?string} The fallback string for this `beforeInput` event. */ function getFallbackBeforeInputChars(topLevelType, nativeEvent) { // If we are currently composing (IME) and using a fallback to do so, // try to extract the composed characters from the fallback object. if (currentComposition) { if ( topLevelType === topLevelTypes.topCompositionEnd || isFallbackCompositionEnd(topLevelType, nativeEvent) ) { var chars = currentComposition.getData(); FallbackCompositionState.release(currentComposition); currentComposition = null; return chars; } return null; } switch (topLevelType) { case topLevelTypes.topPaste: // If a paste event occurs after a keypress, throw out the input // chars. Paste events should not lead to BeforeInput events. return null; case topLevelTypes.topKeyPress: /** * As of v27, Firefox may fire keypress events even when no character * will be inserted. A few possibilities: * * - `which` is `0`. Arrow keys, Esc key, etc. * * - `which` is the pressed key code, but no char is available. * Ex: 'AltGr + d` in Polish. There is no modified character for * this key combination and no character is inserted into the * document, but FF fires the keypress for char code `100` anyway. * No `input` event will occur. * * - `which` is the pressed key code, but a command combination is * being used. Ex: `Cmd+C`. No character is inserted, and no * `input` event will occur. */ if (nativeEvent.which && !isKeypressCommand(nativeEvent)) { return String.fromCharCode(nativeEvent.which); } return null; case topLevelTypes.topCompositionEnd: return useFallbackCompositionData ? null : nativeEvent.data; default: return null; } } /** * Extract a SyntheticInputEvent for `beforeInput`, based on either native * `textInput` or fallback behavior. * * @param {string} topLevelType Record from `EventConstants`. * @param {DOMEventTarget} topLevelTarget The listening component root node. * @param {string} topLevelTargetID ID of `topLevelTarget`. * @param {object} nativeEvent Native browser event. * @return {?object} A SyntheticInputEvent. */ function extractBeforeInputEvent( topLevelType, topLevelTarget, topLevelTargetID, nativeEvent ) { var chars; if (canUseTextInputEvent) { chars = getNativeBeforeInputChars(topLevelType, nativeEvent); } else { chars = getFallbackBeforeInputChars(topLevelType, nativeEvent); } // If no characters are being inserted, no BeforeInput event should // be fired. if (!chars) { return null; } var event = SyntheticInputEvent.getPooled( eventTypes.beforeInput, topLevelTargetID, nativeEvent ); event.data = chars; EventPropagators.accumulateTwoPhaseDispatches(event); return event; } /** * Create an `onBeforeInput` event to match * http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents. * * This event plugin is based on the native `textInput` event * available in Chrome, Safari, Opera, and IE. This event fires after * `onKeyPress` and `onCompositionEnd`, but before `onInput`. * * `beforeInput` is spec'd but not implemented in any browsers, and * the `input` event does not provide any useful information about what has * actually been added, contrary to the spec. Thus, `textInput` is the best * available event to identify the characters that have actually been inserted * into the target node. * * This plugin is also responsible for emitting `composition` events, thus * allowing us to share composition fallback code for both `beforeInput` and * `composition` event types. */ var BeforeInputEventPlugin = { eventTypes: eventTypes, /** * @param {string} topLevelType Record from `EventConstants`. * @param {DOMEventTarget} topLevelTarget The listening component root node. * @param {string} topLevelTargetID ID of `topLevelTarget`. * @param {object} nativeEvent Native browser event. * @return {*} An accumulation of synthetic events. * @see {EventPluginHub.extractEvents} */ extractEvents: function( topLevelType, topLevelTarget, topLevelTargetID, nativeEvent ) { return [ extractCompositionEvent( topLevelType, topLevelTarget, topLevelTargetID, nativeEvent ), extractBeforeInputEvent( topLevelType, topLevelTarget, topLevelTargetID, nativeEvent ) ]; } }; module.exports = BeforeInputEventPlugin; },{"./EventConstants":91,"./EventPropagators":96,"./ExecutionEnvironment":97,"./FallbackCompositionState":98,"./SyntheticCompositionEvent":182,"./SyntheticInputEvent":186,"./keyOf":233}],79:[function(require,module,exports){ (function (process){ /** * 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 CSSCore * @typechecks */ var invariant = require("./invariant"); /** * The CSSCore module specifies the API (and implements most of the methods) * that should be used when dealing with the display of elements (via their * CSS classes and visibility on screen. It is an API focused on mutating the * display and not reading it as no logical state should be encoded in the * display of elements. */ var CSSCore = { /** * Adds the class passed in to the element if it doesn't already have it. * * @param {DOMElement} element the element to set the class on * @param {string} className the CSS className * @return {DOMElement} the element passed in */ addClass: function(element, className) { ("production" !== process.env.NODE_ENV ? invariant( !/\s/.test(className), 'CSSCore.addClass takes only a single class name. "%s" contains ' + 'multiple classes.', className ) : invariant(!/\s/.test(className))); if (className) { if (element.classList) { element.classList.add(className); } else if (!CSSCore.hasClass(element, className)) { element.className = element.className + ' ' + className; } } return element; }, /** * Removes the class passed in from the element * * @param {DOMElement} element the element to set the class on * @param {string} className the CSS className * @return {DOMElement} the element passed in */ removeClass: function(element, className) { ("production" !== process.env.NODE_ENV ? invariant( !/\s/.test(className), 'CSSCore.removeClass takes only a single class name. "%s" contains ' + 'multiple classes.', className ) : invariant(!/\s/.test(className))); if (className) { if (element.classList) { element.classList.remove(className); } else if (CSSCore.hasClass(element, className)) { element.className = element.className .replace(new RegExp('(^|\\s)' + className + '(?:\\s|$)', 'g'), '$1') .replace(/\s+/g, ' ') // multiple spaces to one .replace(/^\s*|\s*$/g, ''); // trim the ends } } return element; }, /** * Helper to add or remove a class from an element based on a condition. * * @param {DOMElement} element the element to set the class on * @param {string} className the CSS className * @param {*} bool condition to whether to add or remove the class * @return {DOMElement} the element passed in */ conditionClass: function(element, className, bool) { return (bool ? CSSCore.addClass : CSSCore.removeClass)(element, className); }, /** * Tests whether the element has the class specified. * * @param {DOMNode|DOMWindow} element the element to set the class on * @param {string} className the CSS className * @return {boolean} true if the element has the class, false if not */ hasClass: function(element, className) { ("production" !== process.env.NODE_ENV ? invariant( !/\s/.test(className), 'CSS.hasClass takes only a single class name.' ) : invariant(!/\s/.test(className))); if (element.classList) { return !!className && element.classList.contains(className); } return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1; } }; module.exports = CSSCore; }).call(this,require('_process')) },{"./invariant":226,"_process":2}],80:[function(require,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 CSSProperty */ 'use strict'; /** * CSS properties which accept numbers but are not in units of "px". */ var isUnitlessNumber = { boxFlex: true, boxFlexGroup: true, columnCount: true, flex: true, flexGrow: true, flexPositive: true, flexShrink: true, flexNegative: true, fontWeight: true, lineClamp: true, lineHeight: true, opacity: true, order: true, orphans: true, widows: true, zIndex: true, zoom: true, // SVG-related properties fillOpacity: true, strokeDashoffset: true, strokeOpacity: true, strokeWidth: true }; /** * @param {string} prefix vendor-specific prefix, eg: Webkit * @param {string} key style name, eg: transitionDuration * @return {string} style name prefixed with `prefix`, properly camelCased, eg: * WebkitTransitionDuration */ function prefixKey(prefix, key) { return prefix + key.charAt(0).toUpperCase() + key.substring(1); } /** * Support style names that may come passed in prefixed by adding permutations * of vendor prefixes. */ var prefixes = ['Webkit', 'ms', 'Moz', 'O']; // Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an // infinite loop, because it iterates over the newly added props too. Object.keys(isUnitlessNumber).forEach(function(prop) { prefixes.forEach(function(prefix) { isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop]; }); }); /** * Most style properties can be unset by doing .style[prop] = '' but IE8 * doesn't like doing that with shorthand properties so for the properties that * IE8 breaks on, which are listed here, we instead unset each of the * individual properties. See http://bugs.jquery.com/ticket/12385. * The 4-value 'clock' properties like margin, padding, border-width seem to * behave without any problems. Curiously, list-style works too without any * special prodding. */ var shorthandPropertyExpansions = { background: { backgroundImage: true, backgroundPosition: true, backgroundRepeat: true, backgroundColor: true }, border: { borderWidth: true, borderStyle: true, borderColor: true }, borderBottom: { borderBottomWidth: true, borderBottomStyle: true, borderBottomColor: true }, borderLeft: { borderLeftWidth: true, borderLeftStyle: true, borderLeftColor: true }, borderRight: { borderRightWidth: true, borderRightStyle: true, borderRightColor: true }, borderTop: { borderTopWidth: true, borderTopStyle: true, borderTopColor: true }, font: { fontStyle: true, fontVariant: true, fontWeight: true, fontSize: true, lineHeight: true, fontFamily: true } }; var CSSProperty = { isUnitlessNumber: isUnitlessNumber, shorthandPropertyExpansions: shorthandPropertyExpansions }; module.exports = CSSProperty; },{}],81:[function(require,module,exports){ (function (process){ /** * 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 CSSPropertyOperations * @typechecks static-only */ 'use strict'; var CSSProperty = require("./CSSProperty"); var ExecutionEnvironment = require("./ExecutionEnvironment"); var camelizeStyleName = require("./camelizeStyleName"); var dangerousStyleValue = require("./dangerousStyleValue"); var hyphenateStyleName = require("./hyphenateStyleName"); var memoizeStringOnly = require("./memoizeStringOnly"); var warning = require("./warning"); var processStyleName = memoizeStringOnly(function(styleName) { return hyphenateStyleName(styleName); }); var styleFloatAccessor = 'cssFloat'; if (ExecutionEnvironment.canUseDOM) { // IE8 only supports accessing cssFloat (standard) as styleFloat if (document.documentElement.style.cssFloat === undefined) { styleFloatAccessor = 'styleFloat'; } } if ("production" !== process.env.NODE_ENV) { // 'msTransform' is correct, but the other prefixes should be capitalized var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/; // style values shouldn't contain a semicolon var badStyleValueWithSemicolonPattern = /;\s*$/; var warnedStyleNames = {}; var warnedStyleValues = {}; var warnHyphenatedStyleName = function(name) { if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) { return; } warnedStyleNames[name] = true; ("production" !== process.env.NODE_ENV ? warning( false, 'Unsupported style property %s. Did you mean %s?', name, camelizeStyleName(name) ) : null); }; var warnBadVendoredStyleName = function(name) { if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) { return; } warnedStyleNames[name] = true; ("production" !== process.env.NODE_ENV ? warning( false, 'Unsupported vendor-prefixed style property %s. Did you mean %s?', name, name.charAt(0).toUpperCase() + name.slice(1) ) : null); }; var warnStyleValueWithSemicolon = function(name, value) { if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) { return; } warnedStyleValues[value] = true; ("production" !== process.env.NODE_ENV ? warning( false, 'Style property values shouldn\'t contain a semicolon. ' + 'Try "%s: %s" instead.', name, value.replace(badStyleValueWithSemicolonPattern, '') ) : null); }; /** * @param {string} name * @param {*} value */ var warnValidStyle = function(name, value) { if (name.indexOf('-') > -1) { warnHyphenatedStyleName(name); } else if (badVendoredStyleNamePattern.test(name)) { warnBadVendoredStyleName(name); } else if (badStyleValueWithSemicolonPattern.test(value)) { warnStyleValueWithSemicolon(name, value); } }; } /** * Operations for dealing with CSS properties. */ var CSSPropertyOperations = { /** * Serializes a mapping of style properties for use as inline styles: * * > createMarkupForStyles({width: '200px', height: 0}) * "width:200px;height:0;" * * Undefined values are ignored so that declarative programming is easier. * The result should be HTML-escaped before insertion into the DOM. * * @param {object} styles * @return {?string} */ createMarkupForStyles: function(styles) { var serialized = ''; for (var styleName in styles) { if (!styles.hasOwnProperty(styleName)) { continue; } var styleValue = styles[styleName]; if ("production" !== process.env.NODE_ENV) { warnValidStyle(styleName, styleValue); } if (styleValue != null) { serialized += processStyleName(styleName) + ':'; serialized += dangerousStyleValue(styleName, styleValue) + ';'; } } return serialized || null; }, /** * Sets the value for multiple styles on a node. If a value is specified as * '' (empty string), the corresponding style property will be unset. * * @param {DOMElement} node * @param {object} styles */ setValueForStyles: function(node, styles) { var style = node.style; for (var styleName in styles) { if (!styles.hasOwnProperty(styleName)) { continue; } if ("production" !== process.env.NODE_ENV) { warnValidStyle(styleName, styles[styleName]); } var styleValue = dangerousStyleValue(styleName, styles[styleName]); if (styleName === 'float') { styleName = styleFloatAccessor; } if (styleValue) { style[styleName] = styleValue; } else { var expansion = CSSProperty.shorthandPropertyExpansions[styleName]; if (expansion) { // Shorthand property that IE8 won't like unsetting, so unset each // component to placate it for (var individualStyleName in expansion) { style[individualStyleName] = ''; } } else { style[styleName] = ''; } } } } }; module.exports = CSSPropertyOperations; }).call(this,require('_process')) },{"./CSSProperty":80,"./ExecutionEnvironment":97,"./camelizeStyleName":197,"./dangerousStyleValue":204,"./hyphenateStyleName":224,"./memoizeStringOnly":235,"./warning":247,"_process":2}],82:[function(require,module,exports){ (function (process){ /** * 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 CallbackQueue */ 'use strict'; var PooledClass = require("./PooledClass"); var assign = require("./Object.assign"); var invariant = require("./invariant"); /** * A specialized pseudo-event module to help keep track of components waiting to * be notified when their DOM representations are available for use. * * This implements `PooledClass`, so you should never need to instantiate this. * Instead, use `CallbackQueue.getPooled()`. * * @class ReactMountReady * @implements PooledClass * @internal */ function CallbackQueue() { this._callbacks = null; this._contexts = null; } assign(CallbackQueue.prototype, { /** * Enqueues a callback to be invoked when `notifyAll` is invoked. * * @param {function} callback Invoked when `notifyAll` is invoked. * @param {?object} context Context to call `callback` with. * @internal */ enqueue: function(callback, context) { this._callbacks = this._callbacks || []; this._contexts = this._contexts || []; this._callbacks.push(callback); this._contexts.push(context); }, /** * Invokes all enqueued callbacks and clears the queue. This is invoked after * the DOM representation of a component has been created or updated. * * @internal */ notifyAll: function() { var callbacks = this._callbacks; var contexts = this._contexts; if (callbacks) { ("production" !== process.env.NODE_ENV ? invariant( callbacks.length === contexts.length, 'Mismatched list of contexts in callback queue' ) : invariant(callbacks.length === contexts.length)); this._callbacks = null; this._contexts = null; for (var i = 0, l = callbacks.length; i < l; i++) { callbacks[i].call(contexts[i]); } callbacks.length = 0; contexts.length = 0; } }, /** * Resets the internal queue. * * @internal */ reset: function() { this._callbacks = null; this._contexts = null; }, /** * `PooledClass` looks for this. */ destructor: function() { this.reset(); } }); PooledClass.addPoolingTo(CallbackQueue); module.exports = CallbackQueue; }).call(this,require('_process')) },{"./Object.assign":104,"./PooledClass":105,"./invariant":226,"_process":2}],83:[function(require,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 ChangeEventPlugin */ 'use strict'; var EventConstants = require("./EventConstants"); var EventPluginHub = require("./EventPluginHub"); var EventPropagators = require("./EventPropagators"); var ExecutionEnvironment = require("./ExecutionEnvironment"); var ReactUpdates = require("./ReactUpdates"); var SyntheticEvent = require("./SyntheticEvent"); var isEventSupported = require("./isEventSupported"); var isTextInputElement = require("./isTextInputElement"); var keyOf = require("./keyOf"); var topLevelTypes = EventConstants.topLevelTypes; var eventTypes = { change: { phasedRegistrationNames: { bubbled: keyOf({onChange: null}), captured: keyOf({onChangeCapture: null}) }, dependencies: [ topLevelTypes.topBlur, topLevelTypes.topChange, topLevelTypes.topClick, topLevelTypes.topFocus, topLevelTypes.topInput, topLevelTypes.topKeyDown, topLevelTypes.topKeyUp, topLevelTypes.topSelectionChange ] } }; /** * For IE shims */ var activeElement = null; var activeElementID = null; var activeElementValue = null; var activeElementValueProp = null; /** * SECTION: handle `change` event */ function shouldUseChangeEvent(elem) { return ( elem.nodeName === 'SELECT' || (elem.nodeName === 'INPUT' && elem.type === 'file') ); } var doesChangeEventBubble = false; if (ExecutionEnvironment.canUseDOM) { // See `handleChange` comment below doesChangeEventBubble = isEventSupported('change') && ( (!('documentMode' in document) || document.documentMode > 8) ); } function manualDispatchChangeEvent(nativeEvent) { var event = SyntheticEvent.getPooled( eventTypes.change, activeElementID, nativeEvent ); EventPropagators.accumulateTwoPhaseDispatches(event); // If change and propertychange bubbled, we'd just bind to it like all the // other events and have it go through ReactBrowserEventEmitter. Since it // doesn't, we manually listen for the events and so we have to enqueue and // process the abstract event manually. // // Batching is necessary here in order to ensure that all event handlers run // before the next rerender (including event handlers attached to ancestor // elements instead of directly on the input). Without this, controlled // components don't work properly in conjunction with event bubbling because // the component is rerendered and the value reverted before all the event // handlers can run. See https://github.com/facebook/react/issues/708. ReactUpdates.batchedUpdates(runEventInBatch, event); } function runEventInBatch(event) { EventPluginHub.enqueueEvents(event); EventPluginHub.processEventQueue(); } function startWatchingForChangeEventIE8(target, targetID) { activeElement = target; activeElementID = targetID; activeElement.attachEvent('onchange', manualDispatchChangeEvent); } function stopWatchingForChangeEventIE8() { if (!activeElement) { return; } activeElement.detachEvent('onchange', manualDispatchChangeEvent); activeElement = null; activeElementID = null; } function getTargetIDForChangeEvent( topLevelType, topLevelTarget, topLevelTargetID) { if (topLevelType === topLevelTypes.topChange) { return topLevelTargetID; } } function handleEventsForChangeEventIE8( topLevelType, topLevelTarget, topLevelTargetID) { if (topLevelType === topLevelTypes.topFocus) { // stopWatching() should be a noop here but we call it just in case we // missed a blur event somehow. stopWatchingForChangeEventIE8(); startWatchingForChangeEventIE8(topLevelTarget, topLevelTargetID); } else if (topLevelType === topLevelTypes.topBlur) { stopWatchingForChangeEventIE8(); } } /** * SECTION: handle `input` event */ var isInputEventSupported = false; if (ExecutionEnvironment.canUseDOM) { // IE9 claims to support the input event but fails to trigger it when // deleting text, so we ignore its input events isInputEventSupported = isEventSupported('input') && ( (!('documentMode' in document) || document.documentMode > 9) ); } /** * (For old IE.) Replacement getter/setter for the `value` property that gets * set on the active element. */ var newValueProp = { get: function() { return activeElementValueProp.get.call(this); }, set: function(val) { // Cast to a string so we can do equality checks. activeElementValue = '' + val; activeElementValueProp.set.call(this, val); } }; /** * (For old IE.) Starts tracking propertychange events on the passed-in element * and override the value property so that we can distinguish user events from * value changes in JS. */ function startWatchingForValueChange(target, targetID) { activeElement = target; activeElementID = targetID; activeElementValue = target.value; activeElementValueProp = Object.getOwnPropertyDescriptor( target.constructor.prototype, 'value' ); Object.defineProperty(activeElement, 'value', newValueProp); activeElement.attachEvent('onpropertychange', handlePropertyChange); } /** * (For old IE.) Removes the event listeners from the currently-tracked element, * if any exists. */ function stopWatchingForValueChange() { if (!activeElement) { return; } // delete restores the original property definition delete activeElement.value; activeElement.detachEvent('onpropertychange', handlePropertyChange); activeElement = null; activeElementID = null; activeElementValue = null; activeElementValueProp = null; } /** * (For old IE.) Handles a propertychange event, sending a `change` event if * the value of the active element has changed. */ function handlePropertyChange(nativeEvent) { if (nativeEvent.propertyName !== 'value') { return; } var value = nativeEvent.srcElement.value; if (value === activeElementValue) { return; } activeElementValue = value; manualDispatchChangeEvent(nativeEvent); } /** * If a `change` event should be fired, returns the target's ID. */ function getTargetIDForInputEvent( topLevelType, topLevelTarget, topLevelTargetID) { if (topLevelType === topLevelTypes.topInput) { // In modern browsers (i.e., not IE8 or IE9), the input event is exactly // what we want so fall through here and trigger an abstract event return topLevelTargetID; } } // For IE8 and IE9. function handleEventsForInputEventIE( topLevelType, topLevelTarget, topLevelTargetID) { if (topLevelType === topLevelTypes.topFocus) { // In IE8, we can capture almost all .value changes by adding a // propertychange handler and looking for events with propertyName // equal to 'value' // In IE9, propertychange fires for most input events but is buggy and // doesn't fire when text is deleted, but conveniently, selectionchange // appears to fire in all of the remaining cases so we catch those and // forward the event if the value has changed // In either case, we don't want to call the event handler if the value // is changed from JS so we redefine a setter for `.value` that updates // our activeElementValue variable, allowing us to ignore those changes // // stopWatching() should be a noop here but we call it just in case we // missed a blur event somehow. stopWatchingForValueChange(); startWatchingForValueChange(topLevelTarget, topLevelTargetID); } else if (topLevelType === topLevelTypes.topBlur) { stopWatchingForValueChange(); } } // For IE8 and IE9. function getTargetIDForInputEventIE( topLevelType, topLevelTarget, topLevelTargetID) { if (topLevelType === topLevelTypes.topSelectionChange || topLevelType === topLevelTypes.topKeyUp || topLevelType === topLevelTypes.topKeyDown) { // On the selectionchange event, the target is just document which isn't // helpful for us so just check activeElement instead. // // 99% of the time, keydown and keyup aren't necessary. IE8 fails to fire // propertychange on the first input event after setting `value` from a // script and fires only keydown, keypress, keyup. Catching keyup usually // gets it and catching keydown lets us fire an event for the first // keystroke if user does a key repeat (it'll be a little delayed: right // before the second keystroke). Other input methods (e.g., paste) seem to // fire selectionchange normally. if (activeElement && activeElement.value !== activeElementValue) { activeElementValue = activeElement.value; return activeElementID; } } } /** * SECTION: handle `click` event */ function shouldUseClickEvent(elem) { // Use the `click` event to detect changes to checkbox and radio inputs. // This approach works across all browsers, whereas `change` does not fire // until `blur` in IE8. return ( elem.nodeName === 'INPUT' && (elem.type === 'checkbox' || elem.type === 'radio') ); } function getTargetIDForClickEvent( topLevelType, topLevelTarget, topLevelTargetID) { if (topLevelType === topLevelTypes.topClick) { return topLevelTargetID; } } /** * This plugin creates an `onChange` event that normalizes change events * across form elements. This event fires at a time when it's possible to * change the element's value without seeing a flicker. * * Supported elements are: * - input (see `isTextInputElement`) * - textarea * - select */ var ChangeEventPlugin = { eventTypes: eventTypes, /** * @param {string} topLevelType Record from `EventConstants`. * @param {DOMEventTarget} topLevelTarget The listening component root node. * @param {string} topLevelTargetID ID of `topLevelTarget`. * @param {object} nativeEvent Native browser event. * @return {*} An accumulation of synthetic events. * @see {EventPluginHub.extractEvents} */ extractEvents: function( topLevelType, topLevelTarget, topLevelTargetID, nativeEvent) { var getTargetIDFunc, handleEventFunc; if (shouldUseChangeEvent(topLevelTarget)) { if (doesChangeEventBubble) { getTargetIDFunc = getTargetIDForChangeEvent; } else { handleEventFunc = handleEventsForChangeEventIE8; } } else if (isTextInputElement(topLevelTarget)) { if (isInputEventSupported) { getTargetIDFunc = getTargetIDForInputEvent; } else { getTargetIDFunc = getTargetIDForInputEventIE; handleEventFunc = handleEventsForInputEventIE; } } else if (shouldUseClickEvent(topLevelTarget)) { getTargetIDFunc = getTargetIDForClickEvent; } if (getTargetIDFunc) { var targetID = getTargetIDFunc( topLevelType, topLevelTarget, topLevelTargetID ); if (targetID) { var event = SyntheticEvent.getPooled( eventTypes.change, targetID, nativeEvent ); EventPropagators.accumulateTwoPhaseDispatches(event); return event; } } if (handleEventFunc) { handleEventFunc( topLevelType, topLevelTarget, topLevelTargetID ); } } }; module.exports = ChangeEventPlugin; },{"./EventConstants":91,"./EventPluginHub":93,"./EventPropagators":96,"./ExecutionEnvironment":97,"./ReactUpdates":175,"./SyntheticEvent":184,"./isEventSupported":227,"./isTextInputElement":229,"./keyOf":233}],84:[function(require,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 ClientReactRootIndex * @typechecks */ 'use strict'; var nextReactRootIndex = 0; var ClientReactRootIndex = { createReactRootIndex: function() { return nextReactRootIndex++; } }; module.exports = ClientReactRootIndex; },{}],85:[function(require,module,exports){ (function (process){ /** * 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 = require("./Danger"); var ReactMultiChildUpdateTypes = require("./ReactMultiChildUpdateTypes"); var setTextContent = require("./setTextContent"); var invariant = require("./invariant"); /** * 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`. parentNode.insertBefore( childNode, parentNode.childNodes[index] || null ); } /** * 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; ("production" !== process.env.NODE_ENV ? invariant( updatedChild, '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(updatedChild)); initialChildren = initialChildren || {}; initialChildren[parentID] = initialChildren[parentID] || []; initialChildren[parentID][updatedIndex] = updatedChild; updatedChildren = updatedChildren || []; updatedChildren.push(updatedChild); } } var renderedMarkup = Danger.dangerouslyRenderMarkup(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.TEXT_CONTENT: setTextContent( update.parentNode, update.textContent ); break; case ReactMultiChildUpdateTypes.REMOVE_NODE: // Already removed by the for-loop above. break; } } } }; module.exports = DOMChildrenOperations; }).call(this,require('_process')) },{"./Danger":88,"./ReactMultiChildUpdateTypes":154,"./invariant":226,"./setTextContent":241,"_process":2}],86:[function(require,module,exports){ (function (process){ /** * 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 */ /*jslint bitwise: true */ 'use strict'; var invariant = require("./invariant"); function checkMask(value, bitmask) { return (value & bitmask) === bitmask; } var DOMPropertyInjection = { /** * Mapping from normalized, camelcased property names to a configuration that * specifies how the associated DOM property should be accessed or rendered. */ MUST_USE_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. * * 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 Properties = domPropertyConfig.Properties || {}; 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) { ("production" !== process.env.NODE_ENV ? invariant( !DOMProperty.isStandardName.hasOwnProperty(propName), '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(!DOMProperty.isStandardName.hasOwnProperty(propName))); DOMProperty.isStandardName[propName] = true; var lowerCased = propName.toLowerCase(); DOMProperty.getPossibleStandardName[lowerCased] = propName; if (DOMAttributeNames.hasOwnProperty(propName)) { var attributeName = DOMAttributeNames[propName]; DOMProperty.getPossibleStandardName[attributeName] = propName; DOMProperty.getAttributeName[propName] = attributeName; } else { DOMProperty.getAttributeName[propName] = lowerCased; } DOMProperty.getPropertyName[propName] = DOMPropertyNames.hasOwnProperty(propName) ? DOMPropertyNames[propName] : propName; if (DOMMutationMethods.hasOwnProperty(propName)) { DOMProperty.getMutationMethod[propName] = DOMMutationMethods[propName]; } else { DOMProperty.getMutationMethod[propName] = null; } var propConfig = Properties[propName]; DOMProperty.mustUseAttribute[propName] = checkMask(propConfig, DOMPropertyInjection.MUST_USE_ATTRIBUTE); DOMProperty.mustUseProperty[propName] = checkMask(propConfig, DOMPropertyInjection.MUST_USE_PROPERTY); DOMProperty.hasSideEffects[propName] = checkMask(propConfig, DOMPropertyInjection.HAS_SIDE_EFFECTS); DOMProperty.hasBooleanValue[propName] = checkMask(propConfig, DOMPropertyInjection.HAS_BOOLEAN_VALUE); DOMProperty.hasNumericValue[propName] = checkMask(propConfig, DOMPropertyInjection.HAS_NUMERIC_VALUE); DOMProperty.hasPositiveNumericValue[propName] = checkMask(propConfig, DOMPropertyInjection.HAS_POSITIVE_NUMERIC_VALUE); DOMProperty.hasOverloadedBooleanValue[propName] = checkMask(propConfig, DOMPropertyInjection.HAS_OVERLOADED_BOOLEAN_VALUE); ("production" !== process.env.NODE_ENV ? invariant( !DOMProperty.mustUseAttribute[propName] || !DOMProperty.mustUseProperty[propName], 'DOMProperty: Cannot require using both attribute and property: %s', propName ) : invariant(!DOMProperty.mustUseAttribute[propName] || !DOMProperty.mustUseProperty[propName])); ("production" !== process.env.NODE_ENV ? invariant( DOMProperty.mustUseProperty[propName] || !DOMProperty.hasSideEffects[propName], 'DOMProperty: Properties that have side effects must use property: %s', propName ) : invariant(DOMProperty.mustUseProperty[propName] || !DOMProperty.hasSideEffects[propName])); ("production" !== process.env.NODE_ENV ? invariant( !!DOMProperty.hasBooleanValue[propName] + !!DOMProperty.hasNumericValue[propName] + !!DOMProperty.hasOverloadedBooleanValue[propName] <= 1, 'DOMProperty: Value can be one of boolean, overloaded boolean, or ' + 'numeric value, but not a combination: %s', propName ) : invariant(!!DOMProperty.hasBooleanValue[propName] + !!DOMProperty.hasNumericValue[propName] + !!DOMProperty.hasOverloadedBooleanValue[propName] <= 1)); } } }; 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', /** * Checks whether a property name is a standard property. * @type {Object} */ isStandardName: {}, /** * Mapping from lowercase property names to the properly cased version, used * to warn in the case of missing properties. * @type {Object} */ getPossibleStandardName: {}, /** * Mapping from normalized names to attribute names that differ. Attribute * names are used when rendering markup or with `*Attribute()`. * @type {Object} */ getAttributeName: {}, /** * Mapping from normalized names to properties on DOM node instances. * (This includes properties that mutate due to external factors.) * @type {Object} */ getPropertyName: {}, /** * Mapping from normalized names to mutation methods. This will only exist if * mutation cannot be set simply by the property or `setAttribute()`. * @type {Object} */ getMutationMethod: {}, /** * Whether the property must be accessed and mutated as an object property. * @type {Object} */ mustUseAttribute: {}, /** * Whether the property must be accessed and mutated using `*Attribute()`. * (This includes anything that fails ` in `.) * @type {Object} */ mustUseProperty: {}, /** * Whether or not setting a value causes side effects such as triggering * resources to be loaded or text selection changes. We must ensure that * the value is only set if it has changed. * @type {Object} */ hasSideEffects: {}, /** * Whether the property should be removed when set to a falsey value. * @type {Object} */ hasBooleanValue: {}, /** * Whether the property must be numeric or parse as a * numeric and should be removed when set to a falsey value. * @type {Object} */ hasNumericValue: {}, /** * Whether the property must be positive numeric or parse as a positive * numeric and should be removed when set to a falsey value. * @type {Object} */ hasPositiveNumericValue: {}, /** * 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. * @type {Object} */ hasOverloadedBooleanValue: {}, /** * 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; }).call(this,require('_process')) },{"./invariant":226,"_process":2}],87:[function(require,module,exports){ (function (process){ /** * 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 = require("./DOMProperty"); var quoteAttributeValueForBrowser = require("./quoteAttributeValueForBrowser"); var warning = require("./warning"); function shouldIgnoreValue(name, value) { return value == null || (DOMProperty.hasBooleanValue[name] && !value) || (DOMProperty.hasNumericValue[name] && isNaN(value)) || (DOMProperty.hasPositiveNumericValue[name] && (value < 1)) || (DOMProperty.hasOverloadedBooleanValue[name] && value === false); } if ("production" !== process.env.NODE_ENV) { 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. ("production" !== process.env.NODE_ENV ? warning( standardName == null, 'Unknown DOM property %s. Did you mean %s?', name, standardName ) : null); }; } /** * 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); }, /** * 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) { if (DOMProperty.isStandardName.hasOwnProperty(name) && DOMProperty.isStandardName[name]) { if (shouldIgnoreValue(name, value)) { return ''; } var attributeName = DOMProperty.getAttributeName[name]; if (DOMProperty.hasBooleanValue[name] || (DOMProperty.hasOverloadedBooleanValue[name] && value === true)) { return attributeName; } return attributeName + '=' + quoteAttributeValueForBrowser(value); } else if (DOMProperty.isCustomAttribute(name)) { if (value == null) { return ''; } return name + '=' + quoteAttributeValueForBrowser(value); } else if ("production" !== process.env.NODE_ENV) { warnUnknownProperty(name); } return null; }, /** * Sets the value for a property on a node. * * @param {DOMElement} node * @param {string} name * @param {*} value */ setValueForProperty: function(node, name, value) { if (DOMProperty.isStandardName.hasOwnProperty(name) && DOMProperty.isStandardName[name]) { var mutationMethod = DOMProperty.getMutationMethod[name]; if (mutationMethod) { mutationMethod(node, value); } else if (shouldIgnoreValue(name, value)) { this.deleteValueForProperty(node, name); } else if (DOMProperty.mustUseAttribute[name]) { // `setAttribute` with objects becomes only `[object]` in IE8/9, // ('' + value) makes it output the correct toString()-value. node.setAttribute(DOMProperty.getAttributeName[name], '' + value); } else { var propName = DOMProperty.getPropertyName[name]; // Must explicitly cast values for HAS_SIDE_EFFECTS-properties to the // property type before comparing; only `value` does and is string. if (!DOMProperty.hasSideEffects[name] || ('' + node[propName]) !== ('' + value)) { // Contrary to `setAttribute`, object properties are properly // `toString`ed by IE8/9. node[propName] = value; } } } else if (DOMProperty.isCustomAttribute(name)) { if (value == null) { node.removeAttribute(name); } else { node.setAttribute(name, '' + value); } } else if ("production" !== process.env.NODE_ENV) { warnUnknownProperty(name); } }, /** * Deletes the value for a property on a node. * * @param {DOMElement} node * @param {string} name */ deleteValueForProperty: function(node, name) { if (DOMProperty.isStandardName.hasOwnProperty(name) && DOMProperty.isStandardName[name]) { var mutationMethod = DOMProperty.getMutationMethod[name]; if (mutationMethod) { mutationMethod(node, undefined); } else if (DOMProperty.mustUseAttribute[name]) { node.removeAttribute(DOMProperty.getAttributeName[name]); } else { var propName = DOMProperty.getPropertyName[name]; var defaultValue = DOMProperty.getDefaultValueForProperty( node.nodeName, propName ); if (!DOMProperty.hasSideEffects[name] || ('' + node[propName]) !== defaultValue) { node[propName] = defaultValue; } } } else if (DOMProperty.isCustomAttribute(name)) { node.removeAttribute(name); } else if ("production" !== process.env.NODE_ENV) { warnUnknownProperty(name); } } }; module.exports = DOMPropertyOperations; }).call(this,require('_process')) },{"./DOMProperty":86,"./quoteAttributeValueForBrowser":239,"./warning":247,"_process":2}],88:[function(require,module,exports){ (function (process){ /** * 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 */ /*jslint evil: true, sub: true */ 'use strict'; var ExecutionEnvironment = require("./ExecutionEnvironment"); var createNodesFromMarkup = require("./createNodesFromMarkup"); var emptyFunction = require("./emptyFunction"); var getMarkupWrap = require("./getMarkupWrap"); var invariant = require("./invariant"); 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) { ("production" !== process.env.NODE_ENV ? invariant( ExecutionEnvironment.canUseDOM, 'dangerouslyRenderMarkup(...): Cannot render markup in a worker ' + 'thread. Make sure `window` and `document` are available globally ' + 'before requiring React when unit testing or use ' + 'React.renderToString for server rendering.' ) : invariant(ExecutionEnvironment.canUseDOM)); var nodeName; var markupByNodeName = {}; // Group markup by `nodeName` if a wrap is necessary, else by '*'. for (var i = 0; i < markupList.length; i++) { ("production" !== process.env.NODE_ENV ? invariant( markupList[i], 'dangerouslyRenderMarkup(...): Missing markup.' ) : invariant(markupList[i])); 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

Hello World
; * } * }); * * The class specification supports a specific protocol of methods that have * special meaning (e.g. `render`). See `ReactClassInterface` for * more the comprehensive protocol. Any other properties and methods in the * class specification will available on the prototype. * * @interface ReactClassInterface * @internal */ var ReactClassInterface = { /** * An array of Mixin objects to include when defining your component. * * @type {array} * @optional */ mixins: SpecPolicy.DEFINE_MANY, /** * An object containing properties and methods that should be defined on * the component's constructor instead of its prototype (static methods). * * @type {object} * @optional */ statics: SpecPolicy.DEFINE_MANY, /** * Definition of prop types for this component. * * @type {object} * @optional */ propTypes: SpecPolicy.DEFINE_MANY, /** * Definition of context types for this component. * * @type {object} * @optional */ contextTypes: SpecPolicy.DEFINE_MANY, /** * Definition of context types this component sets for its children. * * @type {object} * @optional */ childContextTypes: SpecPolicy.DEFINE_MANY, // ==== Definition methods ==== /** * Invoked when the component is mounted. Values in the mapping will be set on * `this.props` if that prop is not specified (i.e. using an `in` check). * * This method is invoked before `getInitialState` and therefore cannot rely * on `this.state` or use `this.setState`. * * @return {object} * @optional */ getDefaultProps: SpecPolicy.DEFINE_MANY_MERGED, /** * Invoked once before the component is mounted. The return value will be used * as the initial value of `this.state`. * * getInitialState: function() { * return { * isOn: false, * fooBaz: new BazFoo() * } * } * * @return {object} * @optional */ getInitialState: SpecPolicy.DEFINE_MANY_MERGED, /** * @return {object} * @optional */ getChildContext: SpecPolicy.DEFINE_MANY_MERGED, /** * Uses props from `this.props` and state from `this.state` to render the * structure of the component. * * No guarantees are made about when or how often this method is invoked, so * it must not have side effects. * * render: function() { * var name = this.props.name; * return
Hello, {name}!
; * } * * @return {ReactComponent} * @nosideeffects * @required */ render: SpecPolicy.DEFINE_ONCE, // ==== Delegate methods ==== /** * Invoked when the component is initially created and about to be mounted. * This may have side effects, but any external subscriptions or data created * by this method must be cleaned up in `componentWillUnmount`. * * @optional */ componentWillMount: SpecPolicy.DEFINE_MANY, /** * Invoked when the component has been mounted and has a DOM representation. * However, there is no guarantee that the DOM node is in the document. * * Use this as an opportunity to operate on the DOM when the component has * been mounted (initialized and rendered) for the first time. * * @param {DOMElement} rootNode DOM element representing the component. * @optional */ componentDidMount: SpecPolicy.DEFINE_MANY, /** * Invoked before the component receives new props. * * Use this as an opportunity to react to a prop transition by updating the * state using `this.setState`. Current props are accessed via `this.props`. * * componentWillReceiveProps: function(nextProps, nextContext) { * this.setState({ * likesIncreasing: nextProps.likeCount > this.props.likeCount * }); * } * * NOTE: There is no equivalent `componentWillReceiveState`. An incoming prop * transition may cause a state change, but the opposite is not true. If you * need it, you are probably looking for `componentWillUpdate`. * * @param {object} nextProps * @optional */ componentWillReceiveProps: SpecPolicy.DEFINE_MANY, /** * Invoked while deciding if the component should be updated as a result of * receiving new props, state and/or context. * * Use this as an opportunity to `return false` when you're certain that the * transition to the new props/state/context will not require a component * update. * * shouldComponentUpdate: function(nextProps, nextState, nextContext) { * return !equal(nextProps, this.props) || * !equal(nextState, this.state) || * !equal(nextContext, this.context); * } * * @param {object} nextProps * @param {?object} nextState * @param {?object} nextContext * @return {boolean} True if the component should update. * @optional */ shouldComponentUpdate: SpecPolicy.DEFINE_ONCE, /** * Invoked when the component is about to update due to a transition from * `this.props`, `this.state` and `this.context` to `nextProps`, `nextState` * and `nextContext`. * * Use this as an opportunity to perform preparation before an update occurs. * * NOTE: You **cannot** use `this.setState()` in this method. * * @param {object} nextProps * @param {?object} nextState * @param {?object} nextContext * @param {ReactReconcileTransaction} transaction * @optional */ componentWillUpdate: SpecPolicy.DEFINE_MANY, /** * Invoked when the component's DOM representation has been updated. * * Use this as an opportunity to operate on the DOM when the component has * been updated. * * @param {object} prevProps * @param {?object} prevState * @param {?object} prevContext * @param {DOMElement} rootNode DOM element representing the component. * @optional */ componentDidUpdate: SpecPolicy.DEFINE_MANY, /** * Invoked when the component is about to be removed from its parent and have * its DOM representation destroyed. * * Use this as an opportunity to deallocate any external resources. * * NOTE: There is no `componentDidUnmount` since your component will have been * destroyed by that point. * * @optional */ componentWillUnmount: SpecPolicy.DEFINE_MANY, // ==== Advanced methods ==== /** * Updates the component's currently mounted DOM representation. * * By default, this implements React's rendering and reconciliation algorithm. * Sophisticated clients may wish to override this. * * @param {ReactReconcileTransaction} transaction * @internal * @overridable */ updateComponent: SpecPolicy.OVERRIDE_BASE }; /** * Mapping from class specification keys to special processing functions. * * Although these are declared like instance properties in the specification * when defining classes using `React.createClass`, they are actually static * and are accessible on the constructor instead of the prototype. Despite * being static, they must be defined outside of the "statics" key under * which all other static methods are defined. */ var RESERVED_SPEC_KEYS = { displayName: function(Constructor, displayName) { Constructor.displayName = displayName; }, mixins: function(Constructor, mixins) { if (mixins) { for (var i = 0; i < mixins.length; i++) { mixSpecIntoComponent(Constructor, mixins[i]); } } }, childContextTypes: function(Constructor, childContextTypes) { if ("production" !== process.env.NODE_ENV) { validateTypeDef( Constructor, childContextTypes, ReactPropTypeLocations.childContext ); } Constructor.childContextTypes = assign( {}, Constructor.childContextTypes, childContextTypes ); }, contextTypes: function(Constructor, contextTypes) { if ("production" !== process.env.NODE_ENV) { validateTypeDef( Constructor, contextTypes, ReactPropTypeLocations.context ); } Constructor.contextTypes = assign( {}, Constructor.contextTypes, contextTypes ); }, /** * Special case getDefaultProps which should move into statics but requires * automatic merging. */ getDefaultProps: function(Constructor, getDefaultProps) { if (Constructor.getDefaultProps) { Constructor.getDefaultProps = createMergedResultFunction( Constructor.getDefaultProps, getDefaultProps ); } else { Constructor.getDefaultProps = getDefaultProps; } }, propTypes: function(Constructor, propTypes) { if ("production" !== process.env.NODE_ENV) { validateTypeDef( Constructor, propTypes, ReactPropTypeLocations.prop ); } Constructor.propTypes = assign( {}, Constructor.propTypes, propTypes ); }, statics: function(Constructor, statics) { mixStaticSpecIntoComponent(Constructor, statics); } }; function validateTypeDef(Constructor, typeDef, location) { for (var propName in typeDef) { if (typeDef.hasOwnProperty(propName)) { // use a warning instead of an invariant so components // don't show up in prod but not in __DEV__ ("production" !== process.env.NODE_ENV ? warning( typeof typeDef[propName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'React.PropTypes.', Constructor.displayName || 'ReactClass', ReactPropTypeLocationNames[location], propName ) : null); } } } function validateMethodOverride(proto, name) { var specPolicy = ReactClassInterface.hasOwnProperty(name) ? ReactClassInterface[name] : null; // Disallow overriding of base class methods unless explicitly allowed. if (ReactClassMixin.hasOwnProperty(name)) { ("production" !== process.env.NODE_ENV ? invariant( specPolicy === SpecPolicy.OVERRIDE_BASE, 'ReactClassInterface: You are attempting to override ' + '`%s` from your class specification. Ensure that your method names ' + 'do not overlap with React methods.', name ) : invariant(specPolicy === SpecPolicy.OVERRIDE_BASE)); } // Disallow defining methods more than once unless explicitly allowed. if (proto.hasOwnProperty(name)) { ("production" !== process.env.NODE_ENV ? invariant( specPolicy === SpecPolicy.DEFINE_MANY || specPolicy === SpecPolicy.DEFINE_MANY_MERGED, 'ReactClassInterface: You are attempting to define ' + '`%s` on your component more than once. This conflict may be due ' + 'to a mixin.', name ) : invariant(specPolicy === SpecPolicy.DEFINE_MANY || specPolicy === SpecPolicy.DEFINE_MANY_MERGED)); } } /** * Mixin helper which handles policy validation and reserved * specification keys when building React classses. */ function mixSpecIntoComponent(Constructor, spec) { if (!spec) { return; } ("production" !== process.env.NODE_ENV ? invariant( typeof spec !== 'function', 'ReactClass: You\'re attempting to ' + 'use a component class as a mixin. Instead, just use a regular object.' ) : invariant(typeof spec !== 'function')); ("production" !== process.env.NODE_ENV ? invariant( !ReactElement.isValidElement(spec), 'ReactClass: You\'re attempting to ' + 'use a component as a mixin. Instead, just use a regular object.' ) : invariant(!ReactElement.isValidElement(spec))); var proto = Constructor.prototype; // By handling mixins before any other properties, we ensure the same // chaining order is applied to methods with DEFINE_MANY policy, whether // mixins are listed before or after these methods in the spec. if (spec.hasOwnProperty(MIXINS_KEY)) { RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins); } for (var name in spec) { if (!spec.hasOwnProperty(name)) { continue; } if (name === MIXINS_KEY) { // We have already handled mixins in a special case above continue; } var property = spec[name]; validateMethodOverride(proto, name); if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) { RESERVED_SPEC_KEYS[name](Constructor, property); } else { // Setup methods on prototype: // The following member methods should not be automatically bound: // 1. Expected ReactClass methods (in the "interface"). // 2. Overridden methods (that were mixed in). var isReactClassMethod = ReactClassInterface.hasOwnProperty(name); var isAlreadyDefined = proto.hasOwnProperty(name); var markedDontBind = property && property.__reactDontBind; var isFunction = typeof property === 'function'; var shouldAutoBind = isFunction && !isReactClassMethod && !isAlreadyDefined && !markedDontBind; if (shouldAutoBind) { if (!proto.__reactAutoBindMap) { proto.__reactAutoBindMap = {}; } proto.__reactAutoBindMap[name] = property; proto[name] = property; } else { if (isAlreadyDefined) { var specPolicy = ReactClassInterface[name]; // These cases should already be caught by validateMethodOverride ("production" !== process.env.NODE_ENV ? invariant( isReactClassMethod && ( (specPolicy === SpecPolicy.DEFINE_MANY_MERGED || specPolicy === SpecPolicy.DEFINE_MANY) ), 'ReactClass: Unexpected spec policy %s for key %s ' + 'when mixing in component specs.', specPolicy, name ) : invariant(isReactClassMethod && ( (specPolicy === SpecPolicy.DEFINE_MANY_MERGED || specPolicy === SpecPolicy.DEFINE_MANY) ))); // For methods which are defined more than once, call the existing // methods before calling the new property, merging if appropriate. if (specPolicy === SpecPolicy.DEFINE_MANY_MERGED) { proto[name] = createMergedResultFunction(proto[name], property); } else if (specPolicy === SpecPolicy.DEFINE_MANY) { proto[name] = createChainedFunction(proto[name], property); } } else { proto[name] = property; if ("production" !== process.env.NODE_ENV) { // Add verbose displayName to the function, which helps when looking // at profiling tools. if (typeof property === 'function' && spec.displayName) { proto[name].displayName = spec.displayName + '_' + name; } } } } } } } function mixStaticSpecIntoComponent(Constructor, statics) { if (!statics) { return; } for (var name in statics) { var property = statics[name]; if (!statics.hasOwnProperty(name)) { continue; } var isReserved = name in RESERVED_SPEC_KEYS; ("production" !== process.env.NODE_ENV ? invariant( !isReserved, 'ReactClass: You are attempting to define a reserved ' + 'property, `%s`, that shouldn\'t be on the "statics" key. Define it ' + 'as an instance property instead; it will still be accessible on the ' + 'constructor.', name ) : invariant(!isReserved)); var isInherited = name in Constructor; ("production" !== process.env.NODE_ENV ? invariant( !isInherited, 'ReactClass: You are attempting to define ' + '`%s` on your component more than once. This conflict may be ' + 'due to a mixin.', name ) : invariant(!isInherited)); Constructor[name] = property; } } /** * Merge two objects, but throw if both contain the same key. * * @param {object} one The first object, which is mutated. * @param {object} two The second object * @return {object} one after it has been mutated to contain everything in two. */ function mergeIntoWithNoDuplicateKeys(one, two) { ("production" !== process.env.NODE_ENV ? invariant( one && two && typeof one === 'object' && typeof two === 'object', 'mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.' ) : invariant(one && two && typeof one === 'object' && typeof two === 'object')); for (var key in two) { if (two.hasOwnProperty(key)) { ("production" !== process.env.NODE_ENV ? invariant( one[key] === undefined, 'mergeIntoWithNoDuplicateKeys(): ' + 'Tried to merge two objects with the same key: `%s`. This conflict ' + 'may be due to a mixin; in particular, this may be caused by two ' + 'getInitialState() or getDefaultProps() methods returning objects ' + 'with clashing keys.', key ) : invariant(one[key] === undefined)); one[key] = two[key]; } } return one; } /** * Creates a function that invokes two functions and merges their return values. * * @param {function} one Function to invoke first. * @param {function} two Function to invoke second. * @return {function} Function that invokes the two argument functions. * @private */ function createMergedResultFunction(one, two) { return function mergedResult() { var a = one.apply(this, arguments); var b = two.apply(this, arguments); if (a == null) { return b; } else if (b == null) { return a; } var c = {}; mergeIntoWithNoDuplicateKeys(c, a); mergeIntoWithNoDuplicateKeys(c, b); return c; }; } /** * Creates a function that invokes two functions and ignores their return vales. * * @param {function} one Function to invoke first. * @param {function} two Function to invoke second. * @return {function} Function that invokes the two argument functions. * @private */ function createChainedFunction(one, two) { return function chainedFunction() { one.apply(this, arguments); two.apply(this, arguments); }; } /** * Binds a method to the component. * * @param {object} component Component whose method is going to be bound. * @param {function} method Method to be bound. * @return {function} The bound method. */ function bindAutoBindMethod(component, method) { var boundMethod = method.bind(component); if ("production" !== process.env.NODE_ENV) { boundMethod.__reactBoundContext = component; boundMethod.__reactBoundMethod = method; boundMethod.__reactBoundArguments = null; var componentName = component.constructor.displayName; var _bind = boundMethod.bind; /* eslint-disable block-scoped-var, no-undef */ boundMethod.bind = function(newThis ) {for (var args=[],$__0=1,$__1=arguments.length;$__0<$__1;$__0++) args.push(arguments[$__0]); // User is trying to bind() an autobound method; we effectively will // ignore the value of "this" that the user is trying to use, so // let's warn. if (newThis !== component && newThis !== null) { ("production" !== process.env.NODE_ENV ? warning( false, 'bind(): React component methods may only be bound to the ' + 'component instance. See %s', componentName ) : null); } else if (!args.length) { ("production" !== process.env.NODE_ENV ? warning( false, 'bind(): You are binding a component method to the component. ' + 'React does this for you automatically in a high-performance ' + 'way, so you can safely remove this call. See %s', componentName ) : null); return boundMethod; } var reboundMethod = _bind.apply(boundMethod, arguments); reboundMethod.__reactBoundContext = component; reboundMethod.__reactBoundMethod = method; reboundMethod.__reactBoundArguments = args; return reboundMethod; /* eslint-enable */ }; } return boundMethod; } /** * Binds all auto-bound methods in a component. * * @param {object} component Component whose method is going to be bound. */ function bindAutoBindMethods(component) { for (var autoBindKey in component.__reactAutoBindMap) { if (component.__reactAutoBindMap.hasOwnProperty(autoBindKey)) { var method = component.__reactAutoBindMap[autoBindKey]; component[autoBindKey] = bindAutoBindMethod( component, ReactErrorUtils.guard( method, component.constructor.displayName + '.' + autoBindKey ) ); } } } var typeDeprecationDescriptor = { enumerable: false, get: function() { var displayName = this.displayName || this.name || 'Component'; ("production" !== process.env.NODE_ENV ? warning( false, '%s.type is deprecated. Use %s directly to access the class.', displayName, displayName ) : null); Object.defineProperty(this, 'type', { value: this }); return this; } }; /** * Add more to the ReactClass base class. These are all legacy features and * therefore not already part of the modern ReactComponent. */ var ReactClassMixin = { /** * TODO: This will be deprecated because state should always keep a consistent * type signature and the only use case for this, is to avoid that. */ replaceState: function(newState, callback) { ReactUpdateQueue.enqueueReplaceState(this, newState); if (callback) { ReactUpdateQueue.enqueueCallback(this, callback); } }, /** * Checks whether or not this composite component is mounted. * @return {boolean} True if mounted, false otherwise. * @protected * @final */ isMounted: function() { if ("production" !== process.env.NODE_ENV) { var owner = ReactCurrentOwner.current; if (owner !== null) { ("production" !== process.env.NODE_ENV ? warning( owner._warnedAboutRefsInRender, '%s is accessing isMounted inside its render() function. ' + 'render() should be a pure function of props and state. It should ' + 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', owner.getName() || 'A component' ) : null); owner._warnedAboutRefsInRender = true; } } var internalInstance = ReactInstanceMap.get(this); return ( internalInstance && internalInstance !== ReactLifeCycle.currentlyMountingInstance ); }, /** * Sets a subset of the props. * * @param {object} partialProps Subset of the next props. * @param {?function} callback Called after props are updated. * @final * @public * @deprecated */ setProps: function(partialProps, callback) { ReactUpdateQueue.enqueueSetProps(this, partialProps); if (callback) { ReactUpdateQueue.enqueueCallback(this, callback); } }, /** * Replace all the props. * * @param {object} newProps Subset of the next props. * @param {?function} callback Called after props are updated. * @final * @public * @deprecated */ replaceProps: function(newProps, callback) { ReactUpdateQueue.enqueueReplaceProps(this, newProps); if (callback) { ReactUpdateQueue.enqueueCallback(this, callback); } } }; var ReactClassComponent = function() {}; assign( ReactClassComponent.prototype, ReactComponent.prototype, ReactClassMixin ); /** * Module for creating composite components. * * @class ReactClass */ var ReactClass = { /** * Creates a composite component class given a class specification. * * @param {object} spec Class specification (which must define `render`). * @return {function} Component constructor function. * @public */ createClass: function(spec) { var Constructor = function(props, context) { // This constructor is overridden by mocks. The argument is used // by mocks to assert on what gets mounted. if ("production" !== process.env.NODE_ENV) { ("production" !== process.env.NODE_ENV ? warning( this instanceof Constructor, 'Something is calling a React component directly. Use a factory or ' + 'JSX instead. See: http://fb.me/react-legacyfactory' ) : null); } // Wire up auto-binding if (this.__reactAutoBindMap) { bindAutoBindMethods(this); } this.props = props; this.context = context; this.state = null; // ReactClasses doesn't have constructors. Instead, they use the // getInitialState and componentWillMount methods for initialization. var initialState = this.getInitialState ? this.getInitialState() : null; if ("production" !== process.env.NODE_ENV) { // We allow auto-mocks to proceed as if they're returning null. if (typeof initialState === 'undefined' && this.getInitialState._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience. initialState = null; } } ("production" !== process.env.NODE_ENV ? invariant( typeof initialState === 'object' && !Array.isArray(initialState), '%s.getInitialState(): must return an object or null', Constructor.displayName || 'ReactCompositeComponent' ) : invariant(typeof initialState === 'object' && !Array.isArray(initialState))); this.state = initialState; }; Constructor.prototype = new ReactClassComponent(); Constructor.prototype.constructor = Constructor; injectedMixins.forEach( mixSpecIntoComponent.bind(null, Constructor) ); mixSpecIntoComponent(Constructor, spec); // Initialize the defaultProps property after all mixins have been merged if (Constructor.getDefaultProps) { Constructor.defaultProps = Constructor.getDefaultProps(); } if ("production" !== process.env.NODE_ENV) { // This is a tag to indicate that the use of these method names is ok, // since it's used with createClass. If it's not, then it's likely a // mistake so we'll warn you to use the static property, property // initializer or constructor respectively. if (Constructor.getDefaultProps) { Constructor.getDefaultProps.isReactClassApproved = {}; } if (Constructor.prototype.getInitialState) { Constructor.prototype.getInitialState.isReactClassApproved = {}; } } ("production" !== process.env.NODE_ENV ? invariant( Constructor.prototype.render, 'createClass(...): Class specification must implement a `render` method.' ) : invariant(Constructor.prototype.render)); if ("production" !== process.env.NODE_ENV) { ("production" !== process.env.NODE_ENV ? warning( !Constructor.prototype.componentShouldUpdate, '%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', spec.displayName || 'A component' ) : null); } // Reduce time spent doing lookups by setting these on the prototype. for (var methodName in ReactClassInterface) { if (!Constructor.prototype[methodName]) { Constructor.prototype[methodName] = null; } } // Legacy hook Constructor.type = Constructor; if ("production" !== process.env.NODE_ENV) { try { Object.defineProperty(Constructor, 'type', typeDeprecationDescriptor); } catch (x) { // IE will fail on defineProperty (es5-shim/sham too) } } return Constructor; }, injection: { injectMixin: function(mixin) { injectedMixins.push(mixin); } } }; module.exports = ReactClass; }).call(this,require('_process')) },{"./Object.assign":104,"./ReactComponent":114,"./ReactCurrentOwner":120,"./ReactElement":138,"./ReactErrorUtils":141,"./ReactInstanceMap":148,"./ReactLifeCycle":149,"./ReactPropTypeLocationNames":159,"./ReactPropTypeLocations":160,"./ReactUpdateQueue":174,"./invariant":226,"./keyMirror":232,"./keyOf":233,"./warning":247,"_process":2}],114:[function(require,module,exports){ (function (process){ /** * 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 ReactComponent */ 'use strict'; var ReactUpdateQueue = require("./ReactUpdateQueue"); var invariant = require("./invariant"); var warning = require("./warning"); /** * Base class helpers for the updating state of a component. */ function ReactComponent(props, context) { this.props = props; this.context = context; } /** * Sets a subset of the state. Always use this to mutate * state. You should treat `this.state` as immutable. * * There is no guarantee that `this.state` will be immediately updated, so * accessing `this.state` after calling this method may return the old value. * * There is no guarantee that calls to `setState` will run synchronously, * as they may eventually be batched together. You can provide an optional * callback that will be executed when the call to setState is actually * completed. * * When a function is provided to setState, it will be called at some point in * the future (not synchronously). It will be called with the up to date * component arguments (state, props, context). These values can be different * from this.* because your function may be called after receiveProps but before * shouldComponentUpdate, and this new state, props, and context will not yet be * assigned to this. * * @param {object|function} partialState Next partial state or function to * produce next partial state to be merged with current state. * @param {?function} callback Called after state is updated. * @final * @protected */ ReactComponent.prototype.setState = function(partialState, callback) { ("production" !== process.env.NODE_ENV ? invariant( typeof partialState === 'object' || typeof partialState === 'function' || partialState == null, 'setState(...): takes an object of state variables to update or a ' + 'function which returns an object of state variables.' ) : invariant(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)); if ("production" !== process.env.NODE_ENV) { ("production" !== process.env.NODE_ENV ? warning( partialState != null, 'setState(...): You passed an undefined or null state object; ' + 'instead, use forceUpdate().' ) : null); } ReactUpdateQueue.enqueueSetState(this, partialState); if (callback) { ReactUpdateQueue.enqueueCallback(this, callback); } }; /** * Forces an update. This should only be invoked when it is known with * certainty that we are **not** in a DOM transaction. * * You may want to call this when you know that some deeper aspect of the * component's state has changed but `setState` was not called. * * This will not invoke `shouldComponentUpdate`, but it will invoke * `componentWillUpdate` and `componentDidUpdate`. * * @param {?function} callback Called after update is complete. * @final * @protected */ ReactComponent.prototype.forceUpdate = function(callback) { ReactUpdateQueue.enqueueForceUpdate(this); if (callback) { ReactUpdateQueue.enqueueCallback(this, callback); } }; /** * Deprecated APIs. These APIs used to exist on classic React classes but since * we would like to deprecate them, we're not going to move them over to this * modern base class. Instead, we define a getter that warns if it's accessed. */ if ("production" !== process.env.NODE_ENV) { var deprecatedAPIs = { getDOMNode: 'getDOMNode', isMounted: 'isMounted', replaceProps: 'replaceProps', replaceState: 'replaceState', setProps: 'setProps' }; var defineDeprecationWarning = function(methodName, displayName) { try { Object.defineProperty(ReactComponent.prototype, methodName, { get: function() { ("production" !== process.env.NODE_ENV ? warning( false, '%s(...) is deprecated in plain JavaScript React classes.', displayName ) : null); return undefined; } }); } catch (x) { // IE will fail on defineProperty (es5-shim/sham too) } }; for (var fnName in deprecatedAPIs) { if (deprecatedAPIs.hasOwnProperty(fnName)) { defineDeprecationWarning(fnName, deprecatedAPIs[fnName]); } } } module.exports = ReactComponent; }).call(this,require('_process')) },{"./ReactUpdateQueue":174,"./invariant":226,"./warning":247,"_process":2}],115:[function(require,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 ReactComponentBrowserEnvironment */ /*jslint evil: true */ 'use strict'; var ReactDOMIDOperations = require("./ReactDOMIDOperations"); var ReactMount = require("./ReactMount"); /** * 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; },{"./ReactDOMIDOperations":125,"./ReactMount":152}],116:[function(require,module,exports){ (function (process){ /** * Copyright 2014-2015, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule ReactComponentEnvironment */ 'use strict'; var invariant = require("./invariant"); var injected = false; var ReactComponentEnvironment = { /** * Optionally injectable environment dependent cleanup hook. (server vs. * browser etc). Example: A browser system caches DOM nodes based on component * ID and must remove that cache entry when this instance is unmounted. */ unmountIDFromEnvironment: null, /** * Optionally injectable hook for swapping out mount images in the middle of * the tree. */ replaceNodeWithMarkupByID: null, /** * Optionally injectable hook for processing a queue of child updates. Will * later move into MultiChildComponents. */ processChildrenUpdates: null, injection: { injectEnvironment: function(environment) { ("production" !== process.env.NODE_ENV ? invariant( !injected, 'ReactCompositeComponent: injectEnvironment() can only be called once.' ) : invariant(!injected)); ReactComponentEnvironment.unmountIDFromEnvironment = environment.unmountIDFromEnvironment; ReactComponentEnvironment.replaceNodeWithMarkupByID = environment.replaceNodeWithMarkupByID; ReactComponentEnvironment.processChildrenUpdates = environment.processChildrenUpdates; injected = true; } } }; module.exports = ReactComponentEnvironment; }).call(this,require('_process')) },{"./invariant":226,"_process":2}],117:[function(require,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 ReactComponentWithPureRenderMixin */ 'use strict'; var shallowEqual = require("./shallowEqual"); /** * If your React component's render function is "pure", e.g. it will render the * same result given the same props and state, provide this Mixin for a * considerable performance boost. * * Most React components have pure render functions. * * Example: * * var ReactComponentWithPureRenderMixin = * require('ReactComponentWithPureRenderMixin'); * React.createClass({ * mixins: [ReactComponentWithPureRenderMixin], * * render: function() { * return
foo
; * } * }); * * Note: This only checks shallow equality for props and state. If these contain * complex data structures this mixin may have false-negatives for deeper * differences. Only mixin to components which have simple props and state, or * use `forceUpdate()` when you know deep data structures have changed. */ var ReactComponentWithPureRenderMixin = { shouldComponentUpdate: function(nextProps, nextState) { return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState); } }; module.exports = ReactComponentWithPureRenderMixin; },{"./shallowEqual":242}],118:[function(require,module,exports){ (function (process){ /** * 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 ReactCompositeComponent */ 'use strict'; var ReactComponentEnvironment = require("./ReactComponentEnvironment"); var ReactContext = require("./ReactContext"); var ReactCurrentOwner = require("./ReactCurrentOwner"); var ReactElement = require("./ReactElement"); var ReactElementValidator = require("./ReactElementValidator"); var ReactInstanceMap = require("./ReactInstanceMap"); var ReactLifeCycle = require("./ReactLifeCycle"); var ReactNativeComponent = require("./ReactNativeComponent"); var ReactPerf = require("./ReactPerf"); var ReactPropTypeLocations = require("./ReactPropTypeLocations"); var ReactPropTypeLocationNames = require("./ReactPropTypeLocationNames"); var ReactReconciler = require("./ReactReconciler"); var ReactUpdates = require("./ReactUpdates"); var assign = require("./Object.assign"); var emptyObject = require("./emptyObject"); var invariant = require("./invariant"); var shouldUpdateReactComponent = require("./shouldUpdateReactComponent"); var warning = require("./warning"); function getDeclarationErrorAddendum(component) { var owner = component._currentElement._owner || null; if (owner) { var name = owner.getName(); if (name) { return ' Check the render method of `' + name + '`.'; } } return ''; } /** * ------------------ The Life-Cycle of a Composite Component ------------------ * * - constructor: Initialization of state. The instance is now retained. * - componentWillMount * - render * - [children's constructors] * - [children's componentWillMount and render] * - [children's componentDidMount] * - componentDidMount * * Update Phases: * - componentWillReceiveProps (only called if parent updated) * - shouldComponentUpdate * - componentWillUpdate * - render * - [children's constructors or receive props phases] * - componentDidUpdate * * - componentWillUnmount * - [children's componentWillUnmount] * - [children destroyed] * - (destroyed): The instance is now blank, released by React and ready for GC. * * ----------------------------------------------------------------------------- */ /** * An incrementing ID assigned to each component when it is mounted. This is * used to enforce the order in which `ReactUpdates` updates dirty components. * * @private */ var nextMountID = 1; /** * @lends {ReactCompositeComponent.prototype} */ var ReactCompositeComponentMixin = { /** * Base constructor for all composite component. * * @param {ReactElement} element * @final * @internal */ construct: function(element) { this._currentElement = element; this._rootNodeID = null; this._instance = null; // See ReactUpdateQueue this._pendingElement = null; this._pendingStateQueue = null; this._pendingReplaceState = false; this._pendingForceUpdate = false; this._renderedComponent = null; this._context = null; this._mountOrder = 0; this._isTopLevel = false; // See ReactUpdates and ReactUpdateQueue. this._pendingCallbacks = null; }, /** * Initializes the component, renders markup, and registers event listeners. * * @param {string} rootID DOM ID of the root node. * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction * @return {?string} Rendered markup to be inserted into the DOM. * @final * @internal */ mountComponent: function(rootID, transaction, context) { this._context = context; this._mountOrder = nextMountID++; this._rootNodeID = rootID; var publicProps = this._processProps(this._currentElement.props); var publicContext = this._processContext(this._currentElement._context); var Component = ReactNativeComponent.getComponentClassForElement( this._currentElement ); // Initialize the public class var inst = new Component(publicProps, publicContext); if ("production" !== process.env.NODE_ENV) { // This will throw later in _renderValidatedComponent, but add an early // warning now to help debugging ("production" !== process.env.NODE_ENV ? warning( inst.render != null, '%s(...): No `render` method found on the returned component ' + 'instance: you may have forgotten to define `render` in your ' + 'component or you may have accidentally tried to render an element ' + 'whose type is a function that isn\'t a React component.', Component.displayName || Component.name || 'Component' ) : null); } // These should be set up in the constructor, but as a convenience for // simpler class abstractions, we set them up after the fact. inst.props = publicProps; inst.context = publicContext; inst.refs = emptyObject; this._instance = inst; // Store a reference from the instance back to the internal representation ReactInstanceMap.set(inst, this); if ("production" !== process.env.NODE_ENV) { this._warnIfContextsDiffer(this._currentElement._context, context); } if ("production" !== process.env.NODE_ENV) { // Since plain JS classes are defined without any special initialization // logic, we can not catch common errors early. Therefore, we have to // catch them here, at initialization time, instead. ("production" !== process.env.NODE_ENV ? warning( !inst.getInitialState || inst.getInitialState.isReactClassApproved, 'getInitialState was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Did you mean to define a state property instead?', this.getName() || 'a component' ) : null); ("production" !== process.env.NODE_ENV ? warning( !inst.getDefaultProps || inst.getDefaultProps.isReactClassApproved, 'getDefaultProps was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Use a static property to define defaultProps instead.', this.getName() || 'a component' ) : null); ("production" !== process.env.NODE_ENV ? warning( !inst.propTypes, 'propTypes was defined as an instance property on %s. Use a static ' + 'property to define propTypes instead.', this.getName() || 'a component' ) : null); ("production" !== process.env.NODE_ENV ? warning( !inst.contextTypes, 'contextTypes was defined as an instance property on %s. Use a ' + 'static property to define contextTypes instead.', this.getName() || 'a component' ) : null); ("production" !== process.env.NODE_ENV ? warning( typeof inst.componentShouldUpdate !== 'function', '%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', (this.getName() || 'A component') ) : null); } var initialState = inst.state; if (initialState === undefined) { inst.state = initialState = null; } ("production" !== process.env.NODE_ENV ? invariant( typeof initialState === 'object' && !Array.isArray(initialState), '%s.state: must be set to an object or null', this.getName() || 'ReactCompositeComponent' ) : invariant(typeof initialState === 'object' && !Array.isArray(initialState))); this._pendingStateQueue = null; this._pendingReplaceState = false; this._pendingForceUpdate = false; var renderedElement; var previouslyMounting = ReactLifeCycle.currentlyMountingInstance; ReactLifeCycle.currentlyMountingInstance = this; try { if (inst.componentWillMount) { inst.componentWillMount(); // When mounting, calls to `setState` by `componentWillMount` will set // `this._pendingStateQueue` without triggering a re-render. if (this._pendingStateQueue) { inst.state = this._processPendingState(inst.props, inst.context); } } renderedElement = this._renderValidatedComponent(); } finally { ReactLifeCycle.currentlyMountingInstance = previouslyMounting; } this._renderedComponent = this._instantiateReactComponent( renderedElement, this._currentElement.type // The wrapping type ); var markup = ReactReconciler.mountComponent( this._renderedComponent, rootID, transaction, this._processChildContext(context) ); if (inst.componentDidMount) { transaction.getReactMountReady().enqueue(inst.componentDidMount, inst); } return markup; }, /** * Releases any resources allocated by `mountComponent`. * * @final * @internal */ unmountComponent: function() { var inst = this._instance; if (inst.componentWillUnmount) { var previouslyUnmounting = ReactLifeCycle.currentlyUnmountingInstance; ReactLifeCycle.currentlyUnmountingInstance = this; try { inst.componentWillUnmount(); } finally { ReactLifeCycle.currentlyUnmountingInstance = previouslyUnmounting; } } ReactReconciler.unmountComponent(this._renderedComponent); this._renderedComponent = null; // Reset pending fields this._pendingStateQueue = null; this._pendingReplaceState = false; this._pendingForceUpdate = false; this._pendingCallbacks = null; this._pendingElement = null; // These fields do not really need to be reset since this object is no // longer accessible. this._context = null; this._rootNodeID = null; // Delete the reference from the instance to this internal representation // which allow the internals to be properly cleaned up even if the user // leaks a reference to the public instance. ReactInstanceMap.remove(inst); // Some existing components rely on inst.props even after they've been // destroyed (in event handlers). // TODO: inst.props = null; // TODO: inst.state = null; // TODO: inst.context = null; }, /** * Schedule a partial update to the props. Only used for internal testing. * * @param {object} partialProps Subset of the next props. * @param {?function} callback Called after props are updated. * @final * @internal */ _setPropsInternal: function(partialProps, callback) { // This is a deoptimized path. We optimize for always having an element. // This creates an extra internal element. var element = this._pendingElement || this._currentElement; this._pendingElement = ReactElement.cloneAndReplaceProps( element, assign({}, element.props, partialProps) ); ReactUpdates.enqueueUpdate(this, callback); }, /** * Filters the context object to only contain keys specified in * `contextTypes` * * @param {object} context * @return {?object} * @private */ _maskContext: function(context) { var maskedContext = null; // This really should be getting the component class for the element, // but we know that we're not going to need it for built-ins. if (typeof this._currentElement.type === 'string') { return emptyObject; } var contextTypes = this._currentElement.type.contextTypes; if (!contextTypes) { return emptyObject; } maskedContext = {}; for (var contextName in contextTypes) { maskedContext[contextName] = context[contextName]; } return maskedContext; }, /** * Filters the context object to only contain keys specified in * `contextTypes`, and asserts that they are valid. * * @param {object} context * @return {?object} * @private */ _processContext: function(context) { var maskedContext = this._maskContext(context); if ("production" !== process.env.NODE_ENV) { var Component = ReactNativeComponent.getComponentClassForElement( this._currentElement ); if (Component.contextTypes) { this._checkPropTypes( Component.contextTypes, maskedContext, ReactPropTypeLocations.context ); } } return maskedContext; }, /** * @param {object} currentContext * @return {object} * @private */ _processChildContext: function(currentContext) { var inst = this._instance; var childContext = inst.getChildContext && inst.getChildContext(); if (childContext) { ("production" !== process.env.NODE_ENV ? invariant( typeof inst.constructor.childContextTypes === 'object', '%s.getChildContext(): childContextTypes must be defined in order to ' + 'use getChildContext().', this.getName() || 'ReactCompositeComponent' ) : invariant(typeof inst.constructor.childContextTypes === 'object')); if ("production" !== process.env.NODE_ENV) { this._checkPropTypes( inst.constructor.childContextTypes, childContext, ReactPropTypeLocations.childContext ); } for (var name in childContext) { ("production" !== process.env.NODE_ENV ? invariant( name in inst.constructor.childContextTypes, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', this.getName() || 'ReactCompositeComponent', name ) : invariant(name in inst.constructor.childContextTypes)); } return assign({}, currentContext, childContext); } return currentContext; }, /** * Processes props by setting default values for unspecified props and * asserting that the props are valid. Does not mutate its argument; returns * a new props object with defaults merged in. * * @param {object} newProps * @return {object} * @private */ _processProps: function(newProps) { if ("production" !== process.env.NODE_ENV) { var Component = ReactNativeComponent.getComponentClassForElement( this._currentElement ); if (Component.propTypes) { this._checkPropTypes( Component.propTypes, newProps, ReactPropTypeLocations.prop ); } } return newProps; }, /** * Assert that the props are valid * * @param {object} propTypes Map of prop name to a ReactPropType * @param {object} props * @param {string} location e.g. "prop", "context", "child context" * @private */ _checkPropTypes: function(propTypes, props, location) { // TODO: Stop validating prop types here and only use the element // validation. var componentName = this.getName(); for (var propName in propTypes) { if (propTypes.hasOwnProperty(propName)) { var error; try { // This is intentionally an invariant that gets caught. It's the same // behavior as without this statement except with a better message. ("production" !== process.env.NODE_ENV ? invariant( typeof propTypes[propName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually ' + 'from React.PropTypes.', componentName || 'React class', ReactPropTypeLocationNames[location], propName ) : invariant(typeof propTypes[propName] === 'function')); error = propTypes[propName](props, propName, componentName, location); } catch (ex) { error = ex; } if (error instanceof Error) { // We may want to extend this logic for similar errors in // React.render calls, so I'm abstracting it away into // a function to minimize refactoring in the future var addendum = getDeclarationErrorAddendum(this); if (location === ReactPropTypeLocations.prop) { // Preface gives us something to blacklist in warning module ("production" !== process.env.NODE_ENV ? warning( false, 'Failed Composite propType: %s%s', error.message, addendum ) : null); } else { ("production" !== process.env.NODE_ENV ? warning( false, 'Failed Context Types: %s%s', error.message, addendum ) : null); } } } } }, receiveComponent: function(nextElement, transaction, nextContext) { var prevElement = this._currentElement; var prevContext = this._context; this._pendingElement = null; this.updateComponent( transaction, prevElement, nextElement, prevContext, nextContext ); }, /** * If any of `_pendingElement`, `_pendingStateQueue`, or `_pendingForceUpdate` * is set, update the component. * * @param {ReactReconcileTransaction} transaction * @internal */ performUpdateIfNecessary: function(transaction) { if (this._pendingElement != null) { ReactReconciler.receiveComponent( this, this._pendingElement || this._currentElement, transaction, this._context ); } if (this._pendingStateQueue !== null || this._pendingForceUpdate) { if ("production" !== process.env.NODE_ENV) { ReactElementValidator.checkAndWarnForMutatedProps( this._currentElement ); } this.updateComponent( transaction, this._currentElement, this._currentElement, this._context, this._context ); } }, /** * Compare two contexts, warning if they are different * TODO: Remove this check when owner-context is removed */ _warnIfContextsDiffer: function(ownerBasedContext, parentBasedContext) { ownerBasedContext = this._maskContext(ownerBasedContext); parentBasedContext = this._maskContext(parentBasedContext); var parentKeys = Object.keys(parentBasedContext).sort(); var displayName = this.getName() || 'ReactCompositeComponent'; for (var i = 0; i < parentKeys.length; i++) { var key = parentKeys[i]; ("production" !== process.env.NODE_ENV ? warning( ownerBasedContext[key] === parentBasedContext[key], 'owner-based and parent-based contexts differ ' + '(values: `%s` vs `%s`) for key (%s) while mounting %s ' + '(see: http://fb.me/react-context-by-parent)', ownerBasedContext[key], parentBasedContext[key], key, displayName ) : null); } }, /** * Perform an update to a mounted component. The componentWillReceiveProps and * shouldComponentUpdate methods are called, then (assuming the update isn't * skipped) the remaining update lifecycle methods are called and the DOM * representation is updated. * * By default, this implements React's rendering and reconciliation algorithm. * Sophisticated clients may wish to override this. * * @param {ReactReconcileTransaction} transaction * @param {ReactElement} prevParentElement * @param {ReactElement} nextParentElement * @internal * @overridable */ updateComponent: function( transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext ) { var inst = this._instance; var nextContext = inst.context; var nextProps = inst.props; // Distinguish between a props update versus a simple state update if (prevParentElement !== nextParentElement) { nextContext = this._processContext(nextParentElement._context); nextProps = this._processProps(nextParentElement.props); if ("production" !== process.env.NODE_ENV) { if (nextUnmaskedContext != null) { this._warnIfContextsDiffer( nextParentElement._context, nextUnmaskedContext ); } } // An update here will schedule an update but immediately set // _pendingStateQueue which will ensure that any state updates gets // immediately reconciled instead of waiting for the next batch. if (inst.componentWillReceiveProps) { inst.componentWillReceiveProps(nextProps, nextContext); } } var nextState = this._processPendingState(nextProps, nextContext); var shouldUpdate = this._pendingForceUpdate || !inst.shouldComponentUpdate || inst.shouldComponentUpdate(nextProps, nextState, nextContext); if ("production" !== process.env.NODE_ENV) { ("production" !== process.env.NODE_ENV ? warning( typeof shouldUpdate !== 'undefined', '%s.shouldComponentUpdate(): Returned undefined instead of a ' + 'boolean value. Make sure to return true or false.', this.getName() || 'ReactCompositeComponent' ) : null); } if (shouldUpdate) { this._pendingForceUpdate = false; // Will set `this.props`, `this.state` and `this.context`. this._performComponentUpdate( nextParentElement, nextProps, nextState, nextContext, transaction, nextUnmaskedContext ); } else { // If it's determined that a component should not update, we still want // to set props and state but we shortcut the rest of the update. this._currentElement = nextParentElement; this._context = nextUnmaskedContext; inst.props = nextProps; inst.state = nextState; inst.context = nextContext; } }, _processPendingState: function(props, context) { var inst = this._instance; var queue = this._pendingStateQueue; var replace = this._pendingReplaceState; this._pendingReplaceState = false; this._pendingStateQueue = null; if (!queue) { return inst.state; } var nextState = assign({}, replace ? queue[0] : inst.state); for (var i = replace ? 1 : 0; i < queue.length; i++) { var partial = queue[i]; assign( nextState, typeof partial === 'function' ? partial.call(inst, nextState, props, context) : partial ); } return nextState; }, /** * Merges new props and state, notifies delegate methods of update and * performs update. * * @param {ReactElement} nextElement Next element * @param {object} nextProps Next public object to set as properties. * @param {?object} nextState Next object to set as state. * @param {?object} nextContext Next public object to set as context. * @param {ReactReconcileTransaction} transaction * @param {?object} unmaskedContext * @private */ _performComponentUpdate: function( nextElement, nextProps, nextState, nextContext, transaction, unmaskedContext ) { var inst = this._instance; var prevProps = inst.props; var prevState = inst.state; var prevContext = inst.context; if (inst.componentWillUpdate) { inst.componentWillUpdate(nextProps, nextState, nextContext); } this._currentElement = nextElement; this._context = unmaskedContext; inst.props = nextProps; inst.state = nextState; inst.context = nextContext; this._updateRenderedComponent(transaction, unmaskedContext); if (inst.componentDidUpdate) { transaction.getReactMountReady().enqueue( inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), inst ); } }, /** * Call the component's `render` method and update the DOM accordingly. * * @param {ReactReconcileTransaction} transaction * @internal */ _updateRenderedComponent: function(transaction, context) { var prevComponentInstance = this._renderedComponent; var prevRenderedElement = prevComponentInstance._currentElement; var nextRenderedElement = this._renderValidatedComponent(); if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) { ReactReconciler.receiveComponent( prevComponentInstance, nextRenderedElement, transaction, this._processChildContext(context) ); } else { // These two IDs are actually the same! But nothing should rely on that. var thisID = this._rootNodeID; var prevComponentID = prevComponentInstance._rootNodeID; ReactReconciler.unmountComponent(prevComponentInstance); this._renderedComponent = this._instantiateReactComponent( nextRenderedElement, this._currentElement.type ); var nextMarkup = ReactReconciler.mountComponent( this._renderedComponent, thisID, transaction, this._processChildContext(context) ); this._replaceNodeWithMarkupByID(prevComponentID, nextMarkup); } }, /** * @protected */ _replaceNodeWithMarkupByID: function(prevComponentID, nextMarkup) { ReactComponentEnvironment.replaceNodeWithMarkupByID( prevComponentID, nextMarkup ); }, /** * @protected */ _renderValidatedComponentWithoutOwnerOrContext: function() { var inst = this._instance; var renderedComponent = inst.render(); if ("production" !== process.env.NODE_ENV) { // We allow auto-mocks to proceed as if they're returning null. if (typeof renderedComponent === 'undefined' && inst.render._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience. renderedComponent = null; } } return renderedComponent; }, /** * @private */ _renderValidatedComponent: function() { var renderedComponent; var previousContext = ReactContext.current; ReactContext.current = this._processChildContext( this._currentElement._context ); ReactCurrentOwner.current = this; try { renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext(); } finally { ReactContext.current = previousContext; ReactCurrentOwner.current = null; } ("production" !== process.env.NODE_ENV ? invariant( // TODO: An `isValidNode` function would probably be more appropriate renderedComponent === null || renderedComponent === false || ReactElement.isValidElement(renderedComponent), '%s.render(): A valid ReactComponent must be returned. You may have ' + 'returned undefined, an array or some other invalid object.', this.getName() || 'ReactCompositeComponent' ) : invariant(// TODO: An `isValidNode` function would probably be more appropriate renderedComponent === null || renderedComponent === false || ReactElement.isValidElement(renderedComponent))); return renderedComponent; }, /** * Lazily allocates the refs object and stores `component` as `ref`. * * @param {string} ref Reference name. * @param {component} component Component to store as `ref`. * @final * @private */ attachRef: function(ref, component) { var inst = this.getPublicInstance(); var refs = inst.refs === emptyObject ? (inst.refs = {}) : inst.refs; refs[ref] = component.getPublicInstance(); }, /** * Detaches a reference name. * * @param {string} ref Name to dereference. * @final * @private */ detachRef: function(ref) { var refs = this.getPublicInstance().refs; delete refs[ref]; }, /** * Get a text description of the component that can be used to identify it * in error messages. * @return {string} The name or null. * @internal */ getName: function() { var type = this._currentElement.type; var constructor = this._instance && this._instance.constructor; return ( type.displayName || (constructor && constructor.displayName) || type.name || (constructor && constructor.name) || null ); }, /** * Get the publicly accessible representation of this component - i.e. what * is exposed by refs and returned by React.render. Can be null for stateless * components. * * @return {ReactComponent} the public component instance. * @internal */ getPublicInstance: function() { return this._instance; }, // Stub _instantiateReactComponent: null }; ReactPerf.measureMethods( ReactCompositeComponentMixin, 'ReactCompositeComponent', { mountComponent: 'mountComponent', updateComponent: 'updateComponent', _renderValidatedComponent: '_renderValidatedComponent' } ); var ReactCompositeComponent = { Mixin: ReactCompositeComponentMixin }; module.exports = ReactCompositeComponent; }).call(this,require('_process')) },{"./Object.assign":104,"./ReactComponentEnvironment":116,"./ReactContext":119,"./ReactCurrentOwner":120,"./ReactElement":138,"./ReactElementValidator":139,"./ReactInstanceMap":148,"./ReactLifeCycle":149,"./ReactNativeComponent":155,"./ReactPerf":157,"./ReactPropTypeLocationNames":159,"./ReactPropTypeLocations":160,"./ReactReconciler":164,"./ReactUpdates":175,"./emptyObject":206,"./invariant":226,"./shouldUpdateReactComponent":243,"./warning":247,"_process":2}],119:[function(require,module,exports){ (function (process){ /** * 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 ReactContext */ 'use strict'; var assign = require("./Object.assign"); var emptyObject = require("./emptyObject"); var warning = require("./warning"); var didWarn = false; /** * Keeps track of the current context. * * The context is automatically passed down the component ownership hierarchy * and is accessible via `this.context` on ReactCompositeComponents. */ var ReactContext = { /** * @internal * @type {object} */ current: emptyObject, /** * Temporarily extends the current context while executing scopedCallback. * * A typical use case might look like * * render: function() { * var children = ReactContext.withContext({foo: 'foo'}, () => ( * * )); * return
{children}
; * } * * @param {object} newContext New context to merge into the existing context * @param {function} scopedCallback Callback to run with the new context * @return {ReactComponent|array} */ withContext: function(newContext, scopedCallback) { if ("production" !== process.env.NODE_ENV) { ("production" !== process.env.NODE_ENV ? warning( didWarn, 'withContext is deprecated and will be removed in a future version. ' + 'Use a wrapper component with getChildContext instead.' ) : null); didWarn = true; } var result; var previousContext = ReactContext.current; ReactContext.current = assign({}, previousContext, newContext); try { result = scopedCallback(); } finally { ReactContext.current = previousContext; } return result; } }; module.exports = ReactContext; }).call(this,require('_process')) },{"./Object.assign":104,"./emptyObject":206,"./warning":247,"_process":2}],120:[function(require,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. * * The depth indicate how many composite components are above this render level. */ var ReactCurrentOwner = { /** * @internal * @type {ReactComponent} */ current: null }; module.exports = ReactCurrentOwner; },{}],121:[function(require,module,exports){ (function (process){ /** * 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 * @typechecks static-only */ 'use strict'; var ReactElement = require("./ReactElement"); var ReactElementValidator = require("./ReactElementValidator"); var mapObject = require("./mapObject"); /** * Create a factory that creates HTML tag elements. * * @param {string} tag Tag name (e.g. `div`). * @private */ function createDOMFactory(tag) { if ("production" !== process.env.NODE_ENV) { return ReactElementValidator.createFactory(tag); } return ReactElement.createFactory(tag); } /** * Creates a mapping from supported HTML tags to `ReactDOMComponent` classes. * This is also accessible via `React.DOM`. * * @public */ var ReactDOM = mapObject({ a: 'a', abbr: 'abbr', address: 'address', area: 'area', article: 'article', aside: 'aside', audio: 'audio', b: 'b', base: 'base', bdi: 'bdi', bdo: 'bdo', big: 'big', blockquote: 'blockquote', body: 'body', br: 'br', button: 'button', canvas: 'canvas', caption: 'caption', cite: 'cite', code: 'code', col: 'col', colgroup: 'colgroup', data: 'data', datalist: 'datalist', dd: 'dd', del: 'del', details: 'details', dfn: 'dfn', dialog: 'dialog', div: 'div', dl: 'dl', dt: 'dt', em: 'em', embed: 'embed', fieldset: 'fieldset', figcaption: 'figcaption', figure: 'figure', footer: 'footer', form: 'form', h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', head: 'head', header: 'header', hr: 'hr', html: 'html', i: 'i', iframe: 'iframe', img: 'img', input: 'input', ins: 'ins', kbd: 'kbd', keygen: 'keygen', label: 'label', legend: 'legend', li: 'li', link: 'link', main: 'main', map: 'map', mark: 'mark', menu: 'menu', menuitem: 'menuitem', meta: 'meta', meter: 'meter', nav: 'nav', noscript: 'noscript', object: 'object', ol: 'ol', optgroup: 'optgroup', option: 'option', output: 'output', p: 'p', param: 'param', picture: 'picture', pre: 'pre', progress: 'progress', q: 'q', rp: 'rp', rt: 'rt', ruby: 'ruby', s: 's', samp: 'samp', script: 'script', section: 'section', select: 'select', small: 'small', source: 'source', span: 'span', strong: 'strong', style: 'style', sub: 'sub', summary: 'summary', sup: 'sup', table: 'table', tbody: 'tbody', td: 'td', textarea: 'textarea', tfoot: 'tfoot', th: 'th', thead: 'thead', time: 'time', title: 'title', tr: 'tr', track: 'track', u: 'u', ul: 'ul', 'var': 'var', video: 'video', wbr: 'wbr', // SVG circle: 'circle', defs: 'defs', ellipse: 'ellipse', g: 'g', line: 'line', linearGradient: 'linearGradient', mask: 'mask', path: 'path', pattern: 'pattern', polygon: 'polygon', polyline: 'polyline', radialGradient: 'radialGradient', rect: 'rect', stop: 'stop', svg: 'svg', text: 'text', tspan: 'tspan' }, createDOMFactory); module.exports = ReactDOM; }).call(this,require('_process')) },{"./ReactElement":138,"./ReactElementValidator":139,"./mapObject":234,"_process":2}],122:[function(require,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 ReactDOMButton */ 'use strict'; var AutoFocusMixin = require("./AutoFocusMixin"); var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin"); var ReactClass = require("./ReactClass"); var ReactElement = require("./ReactElement"); var keyMirror = require("./keyMirror"); var button = ReactElement.createFactory('button'); var mouseListenerNames = keyMirror({ onClick: true, onDoubleClick: true, onMouseDown: true, onMouseMove: true, onMouseUp: true, onClickCapture: true, onDoubleClickCapture: true, onMouseDownCapture: true, onMouseMoveCapture: true, onMouseUpCapture: true }); /** * Implements a