manniru
8/25/2015 - 12:13 PM
material-ui.js
(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<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
(function (process){
'use strict';
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var Typography = require('./styles/typography');
var IconButton = require('./icon-button');
var NavigationMenu = require('./svg-icons/navigation/menu');
var Paper = require('./paper');
var AppBar = React.createClass({
displayName: 'AppBar',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
onLeftIconButtonTouchTap: React.PropTypes.func,
onRightIconButtonTouchTap: React.PropTypes.func,
showMenuIconButton: React.PropTypes.bool,
style: React.PropTypes.object,
iconClassNameLeft: React.PropTypes.string,
iconClassNameRight: React.PropTypes.string,
iconElementLeft: React.PropTypes.element,
iconElementRight: React.PropTypes.element,
iconStyleRight: React.PropTypes.object,
title: React.PropTypes.node,
zDepth: React.PropTypes.number
},
getDefaultProps: function getDefaultProps() {
return {
showMenuIconButton: true,
title: '',
zDepth: 1
};
},
componentDidMount: function componentDidMount() {
if (process.env.NODE_ENV !== 'production') {
if (this.props.iconElementLeft && this.props.iconClassNameLeft) {
console.warn('Properties iconClassNameLeft and iconElementLeft cannot be simultaneously ' + 'defined. Please use one or the other.');
}
if (this.props.iconElementRight && this.props.iconClassNameRight) {
console.warn('Properties iconClassNameRight and iconElementRight cannot be simultaneously ' + 'defined. Please use one or the other.');
}
}
},
getStyles: function getStyles() {
var spacing = this.context.muiTheme.spacing;
var themeVariables = this.context.muiTheme.component.appBar;
var iconButtonSize = this.context.muiTheme.component.button.iconButtonSize;
var flatButtonSize = 36;
var styles = {
root: {
zIndex: 5,
width: '100%',
display: '-webkit-box; display: -webkit-flex; display: flex',
minHeight: themeVariables.height,
backgroundColor: themeVariables.color,
paddingLeft: spacing.desktopGutter,
paddingRight: spacing.desktopGutter
},
title: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
margin: 0,
paddingTop: 0,
letterSpacing: 0,
fontSize: 24,
fontWeight: Typography.fontWeightNormal,
color: themeVariables.textColor,
lineHeight: themeVariables.height + 'px'
},
mainElement: {
boxFlex: 1,
flex: '1'
},
iconButton: {
style: {
marginTop: (themeVariables.height - iconButtonSize) / 2,
marginRight: 8,
marginLeft: -16
},
iconStyle: {
fill: themeVariables.textColor,
color: themeVariables.textColor
}
},
flatButton: {
color: themeVariables.textColor,
backgroundColor: 'transparent',
marginTop: (iconButtonSize - flatButtonSize) / 2 + 2
}
};
return styles;
},
render: function render() {
var props = this.props;
var menuElementLeft = undefined;
var menuElementRight = undefined;
var styles = this.getStyles();
var title = props.title;
var iconRightStyle = this.mergeAndPrefix(styles.iconButton.style, {
marginRight: -16,
marginLeft: 'auto'
}, props.iconStyleRight);
var titleElement = undefined;
if (title) {
// If the title is a string, wrap in an h1 tag.
// If not, just use it as a node.
titleElement = typeof title === 'string' || title instanceof String ? React.createElement(
'h1',
{ style: this.mergeAndPrefix(styles.title, styles.mainElement) },
title
) : React.createElement(
'div',
{ style: this.mergeAndPrefix(styles.mainElement) },
title
);
}
if (props.showMenuIconButton) {
var iconElementLeft = props.iconElementLeft;
if (iconElementLeft) {
switch (iconElementLeft.type.displayName) {
case 'IconButton':
iconElementLeft = React.cloneElement(iconElementLeft, {
iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle)
});
break;
}
menuElementLeft = React.createElement(
'div',
{ style: styles.iconButton.style },
iconElementLeft
);
} else {
var child = props.iconClassNameLeft ? '' : React.createElement(NavigationMenu, { style: this.mergeAndPrefix(styles.iconButton.iconStyle) });
menuElementLeft = React.createElement(
IconButton,
{
style: this.mergeAndPrefix(styles.iconButton.style),
iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle),
iconClassName: props.iconClassNameLeft,
onTouchTap: this._onLeftIconButtonTouchTap },
child
);
}
}
if (props.iconElementRight) {
var iconElementRight = props.iconElementRight;
switch (iconElementRight.type.displayName) {
case 'IconButton':
iconElementRight = React.cloneElement(iconElementRight, {
iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle)
});
break;
case 'FlatButton':
iconElementRight = React.cloneElement(iconElementRight, {
style: this.mergeStyles(styles.flatButton, iconElementRight.props.style)
});
break;
}
menuElementRight = React.createElement(
'div',
{ style: iconRightStyle },
iconElementRight
);
} else if (props.iconClassNameRight) {
menuElementRight = React.createElement(IconButton, {
style: iconRightStyle,
iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle),
iconClassName: props.iconClassNameRight,
onTouchTap: this._onRightIconButtonTouchTap });
}
return React.createElement(
Paper,
{
rounded: false,
className: props.className,
style: this.mergeAndPrefix(styles.root, props.style),
zDepth: props.zDepth },
menuElementLeft,
titleElement,
menuElementRight,
props.children
);
},
_onLeftIconButtonTouchTap: function _onLeftIconButtonTouchTap(event) {
if (this.props.onLeftIconButtonTouchTap) {
this.props.onLeftIconButtonTouchTap(event);
}
},
_onRightIconButtonTouchTap: function _onRightIconButtonTouchTap(event) {
if (this.props.onRightIconButtonTouchTap) {
this.props.onRightIconButtonTouchTap(event);
}
}
});
module.exports = AppBar;
}).call(this,require('_process'))
},{"./icon-button":34,"./mixins/style-propable":52,"./paper":56,"./styles/typography":76,"./svg-icons/navigation/menu":86,"_process":138,"react":312}],2:[function(require,module,exports){
'use strict';
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var AppCanvas = React.createClass({
displayName: 'AppCanvas',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
render: function render() {
var _this = this;
var styles = {
height: '100%',
backgroundColor: this.context.muiTheme.palette.canvasColor,
WebkitFontSmoothing: 'antialiased'
};
var newChildren = React.Children.map(this.props.children, function (currentChild) {
if (!currentChild) {
// If undefined, skip it
return null;
}
switch (currentChild.type.displayName) {
case 'AppBar':
return React.cloneElement(currentChild, {
style: _this.mergeStyles({
position: 'fixed'
}, currentChild.props.style)
});
default:
return currentChild;
}
}, this);
return React.createElement(
'div',
{ style: styles },
newChildren
);
}
});
module.exports = AppCanvas;
},{"./mixins/style-propable":52,"react":312}],3:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var StylePropable = require('./mixins/style-propable');
var Colors = require('./styles/colors');
var Avatar = React.createClass({
displayName: 'Avatar',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
backgroundColor: React.PropTypes.string,
color: React.PropTypes.string,
icon: React.PropTypes.element,
size: React.PropTypes.number,
src: React.PropTypes.string,
style: React.PropTypes.object
},
getDefaultProps: function getDefaultProps() {
return {
backgroundColor: Colors.grey400,
color: Colors.white,
size: 40
};
},
render: function render() {
var _props = this.props;
var backgroundColor = _props.backgroundColor;
var color = _props.color;
var icon = _props.icon;
var size = _props.size;
var src = _props.src;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['backgroundColor', 'color', 'icon', 'size', 'src', 'style']);
var styles = {
root: {
height: size,
width: size,
userSelect: 'none',
borderRadius: '50%',
display: 'inline-block'
}
};
if (src) {
var borderColor = this.context.muiTheme.component.avatar.borderColor;
if (borderColor) {
styles.root = this.mergeStyles(styles.root, {
height: size - 2,
width: size - 2,
border: 'solid 1px ' + borderColor
});
}
return React.createElement('img', _extends({}, other, { src: src, style: this.mergeAndPrefix(styles.root, style) }));
} else {
styles.root = this.mergeStyles(styles.root, {
backgroundColor: backgroundColor,
textAlign: 'center',
lineHeight: size + 'px',
fontSize: size / 2 + 4,
color: color
});
var styleIcon = {
margin: 8
};
var iconElement = icon ? React.cloneElement(icon, {
color: color,
style: this.mergeStyles(styleIcon, icon.props.style)
}) : null;
return React.createElement(
'div',
_extends({}, other, { style: this.mergeAndPrefix(styles.root, style) }),
iconElement,
this.props.children
);
}
}
});
module.exports = Avatar;
},{"./mixins/style-propable":52,"./styles/colors":69,"react/addons":140}],4:[function(require,module,exports){
'use strict';
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var AutoPrefix = require('./styles/auto-prefix');
/**
* BeforeAfterWrapper
* An alternative for the ::before and ::after css pseudo-elements for
* components whose styles are defined in javascript instead of css.
*
* Usage: For the element that we want to apply before and after elements to,
* wrap its children with BeforeAfterWrapper. For example:
*
* <Paper>
* <Paper> <div> // See notice
* <BeforeAfterWrapper> renders <div/> // before element
* [children of paper] ------> [children of paper]
* </BeforeAfterWrapper> <div/> // after element
* </Paper> </div>
* </Paper>
*
* Notice: Notice that this div bundles together our elements. If the element
* that we want to apply before and after elements is a HTML tag (i.e. a
* div, p, or button tag), we can avoid this extra nesting by passing using
* the BeforeAfterWrapper in place of said tag like so:
*
* <p>
* <BeforeAfterWrapper> do this instead <BeforeAfterWrapper elementType='p'>
* [children of p] ------> [children of p]
* </BeforeAfterWrapper> </BeforeAfterWrapper>
* </p>
*
* BeforeAfterWrapper features spread functionality. This means that we can
* pass HTML tag properties directly into the BeforeAfterWrapper tag.
*
* When using BeforeAfterWrapper, ensure that the parent of the beforeElement
* and afterElement have a defined style position.
*/
var BeforeAfterWrapper = React.createClass({
displayName: 'BeforeAfterWrapper',
mixins: [StylePropable],
propTypes: {
beforeStyle: React.PropTypes.object,
afterStyle: React.PropTypes.object,
beforeElementType: React.PropTypes.string,
afterElementType: React.PropTypes.string,
elementType: React.PropTypes.string
},
getDefaultProps: function getDefaultProps() {
return {
beforeElementType: 'div',
afterElementType: 'div',
elementType: 'div'
};
},
render: function render() {
var _props = this.props;
var beforeStyle = _props.beforeStyle;
var afterStyle = _props.afterStyle;
var beforeElementType = _props.beforeElementType;
var afterElementType = _props.afterElementType;
var elementType = _props.elementType;
var other = _objectWithoutProperties(_props, ['beforeStyle', 'afterStyle', 'beforeElementType', 'afterElementType', 'elementType']);
var beforeElement = undefined,
afterElement = undefined;
beforeStyle = AutoPrefix.all({ boxSizing: 'border-box' });
afterStyle = AutoPrefix.all({ boxSizing: 'border-box' });
if (this.props.beforeStyle) beforeElement = React.createElement(this.props.beforeElementType, {
style: this.mergeAndPrefix(beforeStyle, this.props.beforeStyle),
key: "::before"
});
if (this.props.afterStyle) afterElement = React.createElement(this.props.afterElementType, {
style: this.mergeAndPrefix(afterStyle, this.props.afterStyle),
key: "::after"
});
var children = [beforeElement, this.props.children, afterElement];
var props = other;
props.style = this.props.style;
return React.createElement(this.props.elementType, props, children);
}
});
module.exports = BeforeAfterWrapper;
},{"./mixins/style-propable":52,"./styles/auto-prefix":68,"react":312}],5:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var Styles = require('../utils/styles');
var FlatButtonLabel = React.createClass({
displayName: 'FlatButtonLabel',
mixins: [PureRenderMixin],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
label: React.PropTypes.node,
style: React.PropTypes.object
},
getContextProps: function getContextProps() {
var theme = this.context.muiTheme;
return {
spacingDesktopGutterLess: theme.spacing.desktopGutterLess
};
},
render: function render() {
var _props = this.props;
var label = _props.label;
var style = _props.style;
var contextProps = this.getContextProps();
var mergedRootStyles = Styles.mergeAndPrefix({
position: 'relative',
padding: '0 ' + contextProps.spacingDesktopGutterLess + 'px'
}, style);
return React.createElement(
'span',
{ style: mergedRootStyles },
label
);
}
});
module.exports = FlatButtonLabel;
},{"../utils/styles":136,"react/addons":140}],6:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var CardActions = React.createClass({
displayName: 'CardActions',
mixins: [StylePropable],
getStyles: function getStyles() {
return {
root: {
padding: 8,
position: 'relative'
}
};
},
propTypes: {
expandable: React.PropTypes.bool,
showExpandableButton: React.PropTypes.bool
},
render: function render() {
var styles = this.getStyles();
var children = React.Children.map(this.props.children, function (child) {
return React.cloneElement(child, {
style: { marginRight: 8 }
});
});
var mergedStyles = this.mergeAndPrefix(styles.root, this.props.style);
return React.createElement(
'div',
_extends({}, this.props, { style: mergedStyles }),
children
);
}
});
module.exports = CardActions;
},{"../mixins/style-propable":52,"react":312}],7:[function(require,module,exports){
'use strict';
var React = require('react');
var Extend = require('../utils/extend');
var OpenIcon = require('../svg-icons/hardware/keyboard-arrow-up');
var CloseIcon = require('../svg-icons/hardware/keyboard-arrow-down');
var IconButton = require('../icon-button');
var StylePropable = require('../mixins/style-propable');
var CardExpandable = React.createClass({
displayName: 'CardExpandable',
mixins: [StylePropable],
getStyles: function getStyles() {
var contextProps = this.getContextProps();
var directionStyle = contextProps.isRtl ? {
left: 4
} : {
right: 4
};
return {
root: Extend({
top: 0,
bottom: 0,
margin: 'auto',
position: 'absolute'
}, directionStyle)
};
},
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
onExpanding: React.PropTypes.func.isRequired,
expanded: React.PropTypes.bool
},
getContextProps: function getContextProps() {
var theme = this.context.muiTheme;
return {
isRtl: theme.isRtl
};
},
_onExpanding: function _onExpanding() {
if (this.props.expanded === true) this.props.onExpanding(false);else this.props.onExpanding(true);
},
render: function render() {
var styles = this.getStyles();
var expandable = undefined;
if (this.props.expanded === true) expandable = React.createElement(OpenIcon, null);else expandable = React.createElement(CloseIcon, null);
var mergedStyles = this.mergeAndPrefix(styles.root, this.props.style);
var expandableBtn = React.createElement(
IconButton,
{
style: mergedStyles,
onClick: this._onExpanding },
expandable
);
return expandableBtn;
}
});
module.exports = CardExpandable;
},{"../icon-button":34,"../mixins/style-propable":52,"../svg-icons/hardware/keyboard-arrow-down":78,"../svg-icons/hardware/keyboard-arrow-up":79,"../utils/extend":129,"react":312}],8:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = require('react');
var Styles = require('../styles');
var Avatar = require('../avatar');
var StylePropable = require('../mixins/style-propable');
var CardHeader = React.createClass({
displayName: 'CardHeader',
mixins: [StylePropable],
propTypes: {
title: React.PropTypes.string,
titleColor: React.PropTypes.string,
titleStyle: React.PropTypes.object,
subtitle: React.PropTypes.string,
subtitleColor: React.PropTypes.string,
subtitleStyle: React.PropTypes.object,
textStyle: React.PropTypes.object,
expandable: React.PropTypes.bool,
showExpandableButton: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
titleColor: Styles.Colors.darkBlack,
subtitleColor: Styles.Colors.lightBlack
};
},
getStyles: function getStyles() {
return {
root: {
height: 72,
padding: 16,
fontWeight: Styles.Typography.fontWeightMedium,
boxSizing: 'border-box',
position: 'relative'
},
text: {
display: 'inline-block',
verticalAlign: 'top'
},
avatar: {
marginRight: 16
},
title: {
color: this.props.titleColor,
display: 'block',
fontSize: 15
},
subtitle: {
color: this.props.subtitleColor,
display: 'block',
fontSize: 14
}
};
},
render: function render() {
var styles = this.getStyles();
var rootStyle = this.mergeAndPrefix(styles.root, this.props.style);
var textStyle = this.mergeAndPrefix(styles.text, this.props.textStyle);
var titleStyle = this.mergeAndPrefix(styles.title, this.props.titleStyle);
var subtitleStyle = this.mergeAndPrefix(styles.subtitle, this.props.subtitleStyle);
var avatar = this.props.avatar;
if (React.isValidElement(this.props.avatar)) {
var avatarMergedStyle = this.mergeStyles(styles.avatar, avatar.props.style);
avatar = React.cloneElement(avatar, { style: avatarMergedStyle });
} else avatar = React.createElement(Avatar, { src: this.props.avatar, style: styles.avatar });
return React.createElement(
'div',
_extends({}, this.props, { style: rootStyle }),
avatar,
React.createElement(
'div',
{ style: textStyle },
React.createElement(
'span',
{ style: titleStyle },
this.props.title
),
React.createElement(
'span',
{ style: subtitleStyle },
this.props.subtitle
)
),
this.props.children
);
}
});
module.exports = CardHeader;
},{"../avatar":3,"../mixins/style-propable":52,"../styles":70,"react":312}],9:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = require('react');
var Styles = require('../styles');
var StylePropable = require('../mixins/style-propable');
var CardMedia = React.createClass({
displayName: 'CardMedia',
mixins: [StylePropable],
propTypes: {
overlay: React.PropTypes.node,
style: React.PropTypes.object,
overlayStyle: React.PropTypes.object,
overlayContainerStyle: React.PropTypes.object,
overlayContentStyle: React.PropTypes.object,
mediaStyle: React.PropTypes.object,
expandable: React.PropTypes.bool
},
getStyles: function getStyles() {
return {
root: {
position: 'relative'
},
overlayContainer: {
position: 'absolute',
top: 0,
bottom: 0,
right: 0,
left: 0
},
overlay: {
height: '100%',
position: 'relative'
},
overlayContent: {
position: 'absolute',
bottom: 0,
right: 0,
left: 0,
paddingTop: 8,
background: Styles.Colors.lightBlack
},
media: {},
mediaChild: {
verticalAlign: 'top',
maxWidth: '100%',
minWidth: '100%'
}
};
},
render: function render() {
var _this = this;
var styles = this.getStyles();
var rootStyle = this.mergeAndPrefix(styles.root, this.props.style);
var mediaStyle = this.mergeAndPrefix(styles.media, this.props.mediaStyle);
var overlayContainerStyle = this.mergeAndPrefix(styles.overlayContainer, this.props.overlayContainerStyle);
var overlayContentStyle = this.mergeAndPrefix(styles.overlayContent, this.props.overlayContentStyle);
var overlayStyle = this.mergeAndPrefix(styles.overlay, this.props.overlayStyle);
var children = React.Children.map(this.props.children, function (child) {
return React.cloneElement(child, { style: _this.mergeAndPrefix(styles.mediaChild, child.props.style) });
});
var overlayChildren = React.Children.map(this.props.overlay, function (child) {
if (child.type.displayName === 'CardHeader' || child.type.displayName === 'CardTitle') {
return React.cloneElement(child, {
titleColor: Styles.Colors.darkWhite,
subtitleColor: Styles.Colors.lightWhite
});
} else if (child.type.displayName === 'CardText') {
return React.cloneElement(child, {
color: Styles.Colors.darkWhite
});
} else {
return child;
}
});
return React.createElement(
'div',
_extends({}, this.props, { style: rootStyle }),
React.createElement(
'div',
{ style: mediaStyle },
children
),
this.props.overlay ? React.createElement(
'div',
{ style: overlayContainerStyle },
React.createElement(
'div',
{ style: overlayStyle },
React.createElement(
'div',
{ style: overlayContentStyle },
overlayChildren
)
)
) : ''
);
}
});
module.exports = CardMedia;
},{"../mixins/style-propable":52,"../styles":70,"react":312}],10:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = require('react');
var Styles = require('../styles');
var StylePropable = require('../mixins/style-propable');
var CardText = React.createClass({
displayName: 'CardText',
mixins: [StylePropable],
propTypes: {
color: React.PropTypes.string,
style: React.PropTypes.object,
expandable: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
color: Styles.Colors.ck
};
},
getStyles: function getStyles() {
return {
root: {
padding: 16,
fontSize: '14px',
color: this.props.color
}
};
},
render: function render() {
var styles = this.getStyles();
var rootStyle = this.mergeAndPrefix(styles.root, this.props.style);
return React.createElement(
'div',
_extends({}, this.props, { style: rootStyle }),
this.props.children
);
}
});
module.exports = CardText;
},{"../mixins/style-propable":52,"../styles":70,"react":312}],11:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = require('react');
var Styles = require('../styles');
var StylePropable = require('../mixins/style-propable');
var CardTitle = React.createClass({
displayName: 'CardTitle',
mixins: [StylePropable],
propTypes: {
title: React.PropTypes.string,
titleColor: React.PropTypes.string,
titleStyle: React.PropTypes.object,
subtitle: React.PropTypes.string,
subtitleColor: React.PropTypes.string,
subtitleStyle: React.PropTypes.object,
expandable: React.PropTypes.bool,
showExpandableButton: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
titleColor: Styles.Colors.darkBlack,
subtitleColor: Styles.Colors.lightBlack
};
},
getStyles: function getStyles() {
return {
root: {
padding: 16,
position: 'relative'
},
title: {
fontSize: 24,
color: this.props.titleColor,
display: 'block',
lineHeight: '36px'
},
subtitle: {
fontSize: 14,
color: this.props.subtitleColor,
display: 'block'
}
};
},
render: function render() {
var styles = this.getStyles();
var rootStyle = this.mergeAndPrefix(styles.root, this.props.style);
var titleStyle = this.mergeAndPrefix(styles.title, this.props.titleStyle);
var subtitleStyle = this.mergeAndPrefix(styles.subtitle, this.props.subtitleStyle);
return React.createElement(
'div',
_extends({}, this.props, { style: rootStyle }),
React.createElement(
'span',
{ style: titleStyle },
this.props.title
),
React.createElement(
'span',
{ style: subtitleStyle },
this.props.subtitle
),
this.props.children
);
}
});
module.exports = CardTitle;
},{"../mixins/style-propable":52,"../styles":70,"react":312}],12:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var Paper = require('../paper');
var StylePropable = require('../mixins/style-propable');
var CardExpandable = require('./card-expandable');
var Card = React.createClass({
displayName: 'Card',
mixins: [StylePropable],
getInitialState: function getInitialState() {
return { expanded: this.props.initiallyExpanded ? true : false };
},
propTypes: {
style: React.PropTypes.object,
expandable: React.PropTypes.bool,
initiallyExpanded: React.PropTypes.bool,
onExpandChange: React.PropTypes.func
},
_onExpandable: function _onExpandable(value) {
this.setState({ expanded: value });
if (this.props.onExpandChange) this.props.onExpandChange(value);
},
render: function render() {
var _this = this;
var lastElement = undefined;
var newChildren = React.Children.map(this.props.children, function (currentChild) {
if (!currentChild) {
return null;
}
if (_this.state.expanded === false && currentChild.props.expandable === true) return;
if (currentChild.props.showExpandableButton === true) {
lastElement = React.cloneElement(currentChild, {}, currentChild.props.children, React.createElement(CardExpandable, { expanded: _this.state.expanded, onExpanding: _this._onExpandable }));
} else {
lastElement = currentChild;
}
return lastElement;
}, this);
// If the last element is text or a title we should add
// 8px padding to the bottom of the card
var addBottomPadding = lastElement && (lastElement.type.displayName === "CardText" || lastElement.type.displayName === "CardTitle");
var _props = this.props;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['style']);
var mergedStyles = this.mergeAndPrefix({
overflow: 'hidden',
zIndex: 1
}, style);
return React.createElement(
Paper,
_extends({}, other, { style: mergedStyles }),
React.createElement(
'div',
{ style: { paddingBottom: addBottomPadding ? 8 : 0 } },
newChildren
)
);
}
});
module.exports = Card;
},{"../mixins/style-propable":52,"../paper":56,"./card-expandable":7,"react":312}],13:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var EnhancedSwitch = require('./enhanced-switch');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var CheckboxOutline = require('./svg-icons/toggle/check-box-outline-blank');
var CheckboxChecked = require('./svg-icons/toggle/check-box');
var Checkbox = React.createClass({
displayName: 'Checkbox',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
checked: React.PropTypes.bool,
checkedIcon: React.PropTypes.element,
defaultChecked: React.PropTypes.bool,
iconStyle: React.PropTypes.object,
labelStyle: React.PropTypes.object,
onCheck: React.PropTypes.func,
unCheckedIcon: React.PropTypes.element
},
getInitialState: function getInitialState() {
return {
switched: this.props.checked || this.props.defaultChecked || this.props.valueLink && this.props.valueLink.value || false
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.checkbox;
},
getStyles: function getStyles() {
var checkboxSize = 24;
var styles = {
icon: {
height: checkboxSize,
width: checkboxSize
},
check: {
position: 'absolute',
opacity: 0,
transform: 'scale(0)',
transitionOrigin: '50% 50%',
transition: Transitions.easeOut('450ms', 'opacity', '0ms') + ', ' + Transitions.easeOut('0ms', 'transform', '450ms'),
fill: this.getTheme().checkedColor
},
box: {
position: 'absolute',
opacity: 1,
fill: this.getTheme().boxColor,
transition: Transitions.easeOut('2s', null, '200ms')
},
checkWhenSwitched: {
opacity: 1,
transform: 'scale(1)',
transition: Transitions.easeOut('0ms', 'opacity', '0ms') + ', ' + Transitions.easeOut('800ms', 'transform', '0ms')
},
boxWhenSwitched: {
transition: Transitions.easeOut('100ms', null, '0ms'),
fill: this.getTheme().checkedColor
},
checkWhenDisabled: {
fill: this.getTheme().disabledColor
},
boxWhenDisabled: {
fill: this.getTheme().disabledColor
},
label: {
color: this.props.disabled ? this.getTheme().labelDisabledColor : this.getTheme().labelColor
}
};
return styles;
},
render: function render() {
var _props = this.props;
var iconStyle = _props.iconStyle;
var onCheck = _props.onCheck;
var checkedIcon = _props.checkedIcon;
var unCheckedIcon = _props.unCheckedIcon;
var other = _objectWithoutProperties(_props, ['iconStyle', 'onCheck', 'checkedIcon', 'unCheckedIcon']);
var styles = this.getStyles();
var boxStyles = this.mergeAndPrefix(styles.box, this.state.switched && styles.boxWhenSwitched, iconStyle, this.props.disabled && styles.boxWhenDisabled);
var checkStyles = this.mergeAndPrefix(styles.check, this.state.switched && styles.checkWhenSwitched, iconStyle, this.props.disabled && styles.checkWhenDisabled);
var checkedElement = checkedIcon ? React.cloneElement(checkedIcon, {
style: this.mergeAndPrefix(checkStyles, checkedIcon.props.style)
}) : React.createElement(CheckboxChecked, {
style: checkStyles
});
var unCheckedElement = unCheckedIcon ? React.cloneElement(unCheckedIcon, {
style: this.mergeAndPrefix(boxStyles, unCheckedIcon.props.style)
}) : React.createElement(CheckboxOutline, {
style: boxStyles
});
var checkboxElement = React.createElement(
'div',
null,
unCheckedElement,
checkedElement
);
var rippleColor = this.state.switched ? checkStyles.fill : boxStyles.fill;
var mergedIconStyle = this.mergeAndPrefix(styles.icon, iconStyle);
var labelStyle = this.mergeAndPrefix(styles.label, this.props.labelStyle);
var enhancedSwitchProps = {
ref: "enhancedSwitch",
inputType: "checkbox",
switched: this.state.switched,
switchElement: checkboxElement,
rippleColor: rippleColor,
iconStyle: mergedIconStyle,
onSwitch: this._handleCheck,
labelStyle: labelStyle,
onParentShouldUpdate: this._handleStateChange,
defaultSwitched: this.props.defaultChecked,
labelPosition: this.props.labelPosition ? this.props.labelPosition : "right"
};
return React.createElement(EnhancedSwitch, _extends({}, other, enhancedSwitchProps));
},
isChecked: function isChecked() {
return this.refs.enhancedSwitch.isSwitched();
},
setChecked: function setChecked(newCheckedValue) {
this.refs.enhancedSwitch.setSwitched(newCheckedValue);
},
_handleCheck: function _handleCheck(e, isInputChecked) {
if (this.props.onCheck) this.props.onCheck(e, isInputChecked);
},
_handleStateChange: function _handleStateChange(newSwitched) {
this.setState({ switched: newSwitched });
}
});
module.exports = Checkbox;
},{"./enhanced-switch":29,"./mixins/style-propable":52,"./styles/transitions":75,"./svg-icons/toggle/check-box":88,"./svg-icons/toggle/check-box-outline-blank":87,"react":312}],14:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var AutoPrefix = require('./styles/auto-prefix');
var Transitions = require("./styles/transitions");
var CircularProgress = React.createClass({
displayName: 'CircularProgress',
mixins: [StylePropable],
propTypes: {
mode: React.PropTypes.oneOf(["determinate", "indeterminate"]),
value: React.PropTypes.number,
min: React.PropTypes.number,
max: React.PropTypes.number,
size: React.PropTypes.number,
color: React.PropTypes.string,
innerStyle: React.PropTypes.object
},
contextTypes: {
muiTheme: React.PropTypes.object
},
_getRelativeValue: function _getRelativeValue() {
var value = this.props.value;
var min = this.props.min;
var max = this.props.max;
var clampedValue = Math.min(Math.max(min, value), max);
var rangeValue = max - min;
var relValue = Math.round(clampedValue / rangeValue * 10000) / 10000;
return relValue * 100;
},
componentDidMount: function componentDidMount() {
var wrapper = React.findDOMNode(this.refs.wrapper);
var path = React.findDOMNode(this.refs.path);
this._scalePath(path);
this._rotateWrapper(wrapper);
},
_scalePath: function _scalePath(path, step) {
step = step || 0;
step %= 3;
setTimeout(this._scalePath.bind(this, path, step + 1), step ? 750 : 250);
if (!this.isMounted()) return;
if (this.props.mode !== "indeterminate") return;
if (step === 0) {
path.style.strokeDasharray = "1, 200";
path.style.strokeDashoffset = 0;
path.style.transitionDuration = "0ms";
} else if (step === 1) {
path.style.strokeDasharray = "89, 200";
path.style.strokeDashoffset = -35;
path.style.transitionDuration = "750ms";
} else {
path.style.strokeDasharray = "89,200";
path.style.strokeDashoffset = -124;
path.style.transitionDuration = "850ms";
}
},
_rotateWrapper: function _rotateWrapper(wrapper) {
setTimeout(this._rotateWrapper.bind(this, wrapper), 10050);
if (!this.isMounted()) return;
if (this.props.mode !== "indeterminate") return;
AutoPrefix.set(wrapper.style, "transform", null);
AutoPrefix.set(wrapper.style, "transform", "rotate(0deg)");
wrapper.style.transitionDuration = "0ms";
setTimeout(function () {
AutoPrefix.set(wrapper.style, "transform", "rotate(1800deg)");
wrapper.style.transitionDuration = "10s";
//wrapper.style.webkitTransitionTimingFunction = "linear";
AutoPrefix.set(wrapper.style, "transitionTimingFunction", "linear");
}, 50);
},
getDefaultProps: function getDefaultProps() {
return {
mode: "indeterminate",
value: 0,
min: 0,
max: 100,
size: 1
};
},
getTheme: function getTheme() {
return this.context.muiTheme.palette;
},
getStyles: function getStyles(zoom) {
zoom *= 1.4;
var size = "50px";
var margin = Math.round((50 * zoom - 50) / 2);
if (margin < 0) margin = 0;
var styles = {
root: {
position: "relative",
margin: margin + "px",
display: "inline-block",
width: size,
height: size
},
wrapper: {
width: size,
height: size,
margin: "5px",
display: "inline-block",
transition: Transitions.create("transform", "20s", null, "linear")
},
svg: {
height: size,
position: "relative",
transform: "scale(" + zoom + ")",
width: size
},
path: {
strokeDasharray: "89,200",
strokeDashoffset: 0,
stroke: this.props.color || this.getTheme().primary1Color,
strokeLinecap: "round",
transition: Transitions.create("all", "1.5s", null, "ease-in-out")
}
};
AutoPrefix.set(styles.wrapper, "transitionTimingFunction", "linear");
if (this.props.mode === "determinate") {
var relVal = this._getRelativeValue();
styles.path.transition = Transitions.create("all", "0.3s", null, "linear");
styles.path.strokeDasharray = Math.round(relVal * 1.25) + ",200";
}
return styles;
},
render: function render() {
var _props = this.props;
var style = _props.style;
var innerStyle = _props.innerStyle;
var size = _props.size;
var other = _objectWithoutProperties(_props, ['style', 'innerStyle', 'size']);
var styles = this.getStyles(size || 1);
return React.createElement(
'div',
_extends({}, other, { style: this.mergeAndPrefix(styles.root, style) }),
React.createElement(
'div',
{ ref: 'wrapper', style: this.mergeAndPrefix(styles.wrapper, innerStyle) },
React.createElement(
'svg',
{ style: this.mergeAndPrefix(styles.svg) },
React.createElement('circle', { ref: 'path', style: this.mergeAndPrefix(styles.path), cx: '25', cy: '25',
r: '20', fill: 'none', strokeWidth: '2.5', strokeMiterlimit: '10' })
)
)
);
}
});
module.exports = CircularProgress;
},{"./mixins/style-propable":52,"./styles/auto-prefix":68,"./styles/transitions":75,"react":312}],15:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var BeforeAfterWrapper = require('./before-after-wrapper');
var ClearFix = React.createClass({
displayName: 'ClearFix',
render: function render() {
var _props = this.props;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['style']);
var before = function before() {
return {
content: "' '",
display: 'table'
};
};
var after = before();
after.clear = 'both';
return React.createElement(
BeforeAfterWrapper,
_extends({}, other, {
beforeStyle: before(),
afterStyle: after,
style: this.props.style }),
this.props.children
);
}
});
module.exports = ClearFix;
},{"./before-after-wrapper":4,"react":312}],16:[function(require,module,exports){
'use strict';
var React = require('react');
var DateTime = require('../utils/date-time');
var DayButton = require('./day-button');
var ClearFix = require('../clearfix');
var CalendarMonth = React.createClass({
displayName: 'CalendarMonth',
propTypes: {
displayDate: React.PropTypes.object.isRequired,
onDayTouchTap: React.PropTypes.func,
selectedDate: React.PropTypes.object.isRequired,
minDate: React.PropTypes.object,
maxDate: React.PropTypes.object,
shouldDisableDate: React.PropTypes.func,
autoOk: React.PropTypes.bool
},
render: function render() {
var styles = {
lineHeight: '32px',
textAlign: 'center',
padding: '8px 14px 0 14px'
};
return React.createElement(
'div',
{ style: styles },
this._getWeekElements()
);
},
isSelectedDateDisabled: function isSelectedDateDisabled() {
return this._selectedDateDisabled;
},
_getWeekElements: function _getWeekElements() {
var _this = this;
var weekArray = DateTime.getWeekArray(this.props.displayDate);
return weekArray.map(function (week, i) {
return React.createElement(
ClearFix,
{ key: i },
_this._getDayElements(week, i)
);
}, this);
},
_getDayElements: function _getDayElements(week, i) {
var _this2 = this;
return week.map(function (day, j) {
var isSameDate = DateTime.isEqualDate(_this2.props.selectedDate, day);
var disabled = _this2._shouldDisableDate(day);
var selected = !disabled && isSameDate;
if (isSameDate) {
if (disabled) {
_this2._selectedDateDisabled = true;
} else {
_this2._selectedDateDisabled = false;
}
}
return React.createElement(DayButton, {
key: 'db' + i + j,
date: day,
onTouchTap: _this2._handleDayTouchTap,
selected: selected,
disabled: disabled });
}, this);
},
_handleDayTouchTap: function _handleDayTouchTap(e, date) {
if (this.props.onDayTouchTap) this.props.onDayTouchTap(e, date);
},
_shouldDisableDate: function _shouldDisableDate(day) {
if (day === null) return false;
var disabled = !DateTime.isBetweenDates(day, this.props.minDate, this.props.maxDate);
if (!disabled && this.props.shouldDisableDate) disabled = this.props.shouldDisableDate(day);
return disabled;
}
});
module.exports = CalendarMonth;
},{"../clearfix":15,"../utils/date-time":126,"./day-button":23,"react":312}],17:[function(require,module,exports){
'use strict';
var React = require('react');
var DateTime = require('../utils/date-time');
var IconButton = require('../icon-button');
var Toolbar = require('../toolbar/toolbar');
var ToolbarGroup = require('../toolbar/toolbar-group');
var NavigationChevronLeft = require('../svg-icons/navigation/chevron-left');
var NavigationChevronLeftDouble = require('../svg-icons/navigation-chevron-left-double');
var NavigationChevronRight = require('../svg-icons/navigation/chevron-right');
var NavigationChevronRightDouble = require('../svg-icons/navigation-chevron-right-double');
var SlideInTransitionGroup = require('../transition-groups/slide-in');
var CalendarToolbar = React.createClass({
displayName: 'CalendarToolbar',
propTypes: {
displayDate: React.PropTypes.object.isRequired,
onMonthChange: React.PropTypes.func,
onYearChange: React.PropTypes.func,
prevYear: React.PropTypes.bool,
nextYear: React.PropTypes.bool,
prevMonth: React.PropTypes.bool,
nextMonth: React.PropTypes.bool,
hideYearChangeButtons: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
prevYear: true,
nextYear: true,
prevMonth: true,
nextMonth: true,
hideYearChangeButtons: false
};
},
getInitialState: function getInitialState() {
return {
transitionDirection: 'up'
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
var direction = undefined;
if (nextProps.displayDate !== this.props.displayDate) {
direction = nextProps.displayDate > this.props.displayDate ? 'up' : 'down';
this.setState({
transitionDirection: direction
});
}
},
_styles: function _styles() {
return {
root: {
position: 'relative',
padding: 0,
backgroundColor: 'inherit'
},
title: {
position: 'absolute',
top: '17px',
lineHeight: '14px',
fontSize: '14px',
height: '14px',
width: '100%',
fontWeight: '500',
textAlign: 'center'
}
};
},
render: function render() {
var month = DateTime.getFullMonth(this.props.displayDate);
var year = this.props.displayDate.getFullYear();
var prevYearChangeButton = this._getPrevYearChangeButton();
var nextYearChangeButton = this._getNextYearChangeButton();
var styles = this._styles();
return React.createElement(
Toolbar,
{ className: 'mui-date-picker-calendar-toolbar', style: styles.root, noGutter: true },
React.createElement(
SlideInTransitionGroup,
{
style: styles.title,
direction: this.state.transitionDirection },
React.createElement(
'div',
{ key: month + '_' + year },
month,
' ',
year
)
),
React.createElement(
ToolbarGroup,
{ key: 0, float: 'left' },
prevYearChangeButton,
React.createElement(
IconButton,
{
style: styles.button,
disabled: !this.props.prevMonth,
onTouchTap: this._prevMonthTouchTap },
React.createElement(NavigationChevronLeft, null)
)
),
React.createElement(
ToolbarGroup,
{ key: 1, float: 'right' },
React.createElement(
IconButton,
{
style: styles.button,
disabled: !this.props.nextMonth,
onTouchTap: this._nextMonthTouchTap },
React.createElement(NavigationChevronRight, null)
),
nextYearChangeButton
)
);
},
_getPrevYearChangeButton: function _getPrevYearChangeButton() {
var style = {
display: this.props.hideYearChangeButtons ? 'none' : ''
};
return React.createElement(
IconButton,
{
style: style,
disabled: !this.props.prevYear,
onTouchTap: this._prevYearTouchTap },
React.createElement(NavigationChevronLeftDouble, null)
);
},
_getNextYearChangeButton: function _getNextYearChangeButton() {
var style = {
display: this.props.hideYearChangeButtons ? 'none' : ''
};
return React.createElement(
IconButton,
{
style: style,
disabled: !this.props.nextYear,
onTouchTap: this._nextYearTouchTap },
React.createElement(NavigationChevronRightDouble, null)
);
},
_prevYearTouchTap: function _prevYearTouchTap() {
if (this.props.onYearChange && this.props.prevYear) this.props.onYearChange(-1);
},
_nextYearTouchTap: function _nextYearTouchTap() {
if (this.props.onYearChange && this.props.nextYear) this.props.onYearChange(1);
},
_prevMonthTouchTap: function _prevMonthTouchTap() {
if (this.props.onMonthChange && this.props.prevMonth) this.props.onMonthChange(-1);
},
_nextMonthTouchTap: function _nextMonthTouchTap() {
if (this.props.onMonthChange && this.props.nextMonth) this.props.onMonthChange(1);
}
});
module.exports = CalendarToolbar;
},{"../icon-button":34,"../svg-icons/navigation-chevron-left-double":80,"../svg-icons/navigation-chevron-right-double":81,"../svg-icons/navigation/chevron-left":84,"../svg-icons/navigation/chevron-right":85,"../toolbar/toolbar":117,"../toolbar/toolbar-group":114,"../transition-groups/slide-in":122,"../utils/date-time":126,"react":312}],18:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var Colors = require('../styles/colors');
var DateTime = require('../utils/date-time');
var YearButton = require('./year-button');
var CalendarYear = React.createClass({
displayName: 'CalendarYear',
mixins: [StylePropable],
propTypes: {
displayDate: React.PropTypes.object.isRequired,
onYearTouchTap: React.PropTypes.func,
selectedDate: React.PropTypes.object.isRequired,
minDate: React.PropTypes.object,
maxDate: React.PropTypes.object
},
componentDidMount: function componentDidMount() {
this._scrollToSelectedYear();
},
componentDidUpdate: function componentDidUpdate() {
this._scrollToSelectedYear();
},
render: function render() {
var years = this._getYears();
var styles = {
position: 'relative',
height: 'inherit',
lineHeight: '36px',
textAlign: 'center',
padding: '8px 14px 0 14px',
backgroundColor: Colors.white,
overflowX: 'hidden',
overflowY: 'scroll'
};
return React.createElement(
'div',
{ style: styles },
years
);
},
_getYears: function _getYears() {
var minYear = this.props.minDate.getFullYear();
var maxYear = this.props.maxDate.getFullYear();
var years = [];
var dateCheck = DateTime.clone(this.props.selectedDate);
for (var year = minYear; year <= maxYear; year++) {
dateCheck.setFullYear(year);
if (!DateTime.isBetweenDates(dateCheck, this.props.minDate, this.props.maxDate)) continue;
var selected = this.props.selectedDate.getFullYear() === year;
var selectedProps = {};
if (selected) {
selectedProps = { ref: 'selectedYearButton' };
}
var yearButton = React.createElement(YearButton, _extends({
key: 'yb' + year,
year: year,
onTouchTap: this._handleYearTouchTap,
selected: selected
}, selectedProps));
years.push(yearButton);
}
return years;
},
_scrollToSelectedYear: function _scrollToSelectedYear() {
if (this.refs.selectedYearButton === undefined) return;
var container = this.getDOMNode();
var yearButtonNode = this.refs.selectedYearButton.getDOMNode();
var containerHeight = container.clientHeight;
var yearButtonNodeHeight = yearButtonNode.clientHeight || 32;
var scrollYOffset = yearButtonNode.offsetTop + yearButtonNodeHeight / 2 - containerHeight / 2;
container.scrollTop = scrollYOffset;
},
_handleYearTouchTap: function _handleYearTouchTap(e, year) {
if (this.props.onYearTouchTap) this.props.onYearTouchTap(e, year);
}
});
module.exports = CalendarYear;
},{"../mixins/style-propable":52,"../styles/colors":69,"../utils/date-time":126,"./year-button":24,"react":312}],19:[function(require,module,exports){
'use strict';
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var WindowListenable = require('../mixins/window-listenable');
var DateTime = require('../utils/date-time');
var KeyCode = require('../utils/key-code');
var Transitions = require('../styles/transitions');
var CalendarMonth = require('./calendar-month');
var CalendarYear = require('./calendar-year');
var CalendarToolbar = require('./calendar-toolbar');
var DateDisplay = require('./date-display');
var SlideInTransitionGroup = require('../transition-groups/slide-in');
var ClearFix = require('../clearfix');
var Calendar = React.createClass({
displayName: 'Calendar',
mixins: [StylePropable, WindowListenable],
propTypes: {
initialDate: React.PropTypes.object,
isActive: React.PropTypes.bool,
minDate: React.PropTypes.object,
maxDate: React.PropTypes.object,
shouldDisableDate: React.PropTypes.func,
hideToolbarYearChange: React.PropTypes.bool,
shouldShowMonthDayPickerFirst: React.PropTypes.bool,
shouldShowYearPickerFirst: React.PropTypes.bool,
showYearSelector: React.PropTypes.bool,
onDayTouchTap: React.PropTypes.func
},
windowListeners: {
'keydown': '_handleWindowKeyDown'
},
getDefaultProps: function getDefaultProps() {
return {
initialDate: new Date(),
minDate: DateTime.addYears(new Date(), -100),
maxDate: DateTime.addYears(new Date(), 100),
hideToolbarYearChange: false,
shouldShowMonthDayPickerFirst: true,
shouldShowYearPickerFirst: false,
showYearSelector: false
};
},
getInitialState: function getInitialState() {
return {
displayDate: DateTime.getFirstDayOfMonth(this.props.initialDate),
selectedDate: this.props.initialDate,
transitionDirection: 'left',
displayMonthDay: this.props.shouldShowMonthDayPickerFirst || this.props.shouldShowYearPickerFirst || true,
transitionEnter: true
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (nextProps.initialDate !== this.props.initialDate) {
var d = nextProps.initialDate || new Date();
this.setState({
displayDate: DateTime.getFirstDayOfMonth(d),
selectedDate: d
});
}
if (nextProps.shouldShowMonthDayPickerFirst) {
this.setState({ displayMonthDay: nextProps.shouldShowMonthDayPickerFirst });
}
},
render: function render() {
var yearCount = DateTime.yearDiff(this.props.maxDate, this.props.minDate) + 1;
var weekCount = DateTime.getWeekArray(this.state.displayDate).length;
var toolbarInteractions = this._getToolbarInteractions();
var hideYearChangeButtons = this.props.hideToolbarYearChange || !this.props.showYearSelector;
var isMultiYearRange = yearCount > 2; // Want a year range greater than 1. Ex. [2014,2016] has a count of 3
var isLandscape = this.props.mode === 'landscape';
var styles = {
root: {
fontSize: 12
},
calendarContainer: {
width: isLandscape ? 280 : '100%',
height: weekCount === 5 ? 268 : weekCount === 6 ? 308 : 228,
float: isLandscape ? 'right' : 'none',
transition: Transitions.easeOut('150ms', 'height'),
overflow: 'hidden'
},
yearContainer: {
width: 280,
overflow: 'hidden',
height: yearCount < 6 ? yearCount * 56 + 10 : weekCount === 5 ? 268 : weekCount === 6 ? 308 : 228,
float: isLandscape ? 'right' : 'none'
},
dateDisplay: {
width: isLandscape ? 280 : '100%',
height: '100%',
float: isLandscape ? 'left' : 'none'
},
weekTitle: {
padding: '0 14px',
lineHeight: '12px',
opacity: '0.5',
height: 12,
fontWeight: '500',
margin: 0
},
weekTitleDay: {
listStyle: 'none',
float: 'left',
width: 32,
textAlign: 'center',
margin: '0 2px'
}
};
if (this.state.displayMonthDay || !this.props.showYearSelector) {
styles.yearContainer.display = 'none';
} else {
styles.calendarContainer.display = 'none';
}
return React.createElement(
ClearFix,
{ style: this.mergeAndPrefix(styles.root) },
React.createElement(DateDisplay, {
style: styles.dateDisplay,
selectedDate: this.state.selectedDate,
handleMonthDayClick: this._handleMonthDayClick,
handleYearClick: this._handleYearClick,
yearSelectionAvailable: this.props.showYearSelector && isMultiYearRange,
monthDaySelected: this.state.displayMonthDay,
mode: this.props.mode,
weekCount: weekCount }),
React.createElement(
'div',
{ style: styles.calendarContainer },
React.createElement(CalendarToolbar, {
displayDate: this.state.displayDate,
onMonthChange: this._handleMonthChange,
onYearChange: this._handleYearChange,
prevMonth: toolbarInteractions.prevMonth,
nextMonth: toolbarInteractions.nextMonth,
prevYear: toolbarInteractions.prevYear,
nextYear: toolbarInteractions.nextYear,
hideYearChangeButtons: hideYearChangeButtons }),
React.createElement(
ClearFix,
{
elementType: 'ul',
style: styles.weekTitle },
React.createElement(
'li',
{ style: styles.weekTitleDay },
'S'
),
React.createElement(
'li',
{ style: styles.weekTitleDay },
'M'
),
React.createElement(
'li',
{ style: styles.weekTitleDay },
'T'
),
React.createElement(
'li',
{ style: styles.weekTitleDay },
'W'
),
React.createElement(
'li',
{ style: styles.weekTitleDay },
'T'
),
React.createElement(
'li',
{ style: styles.weekTitleDay },
'F'
),
React.createElement(
'li',
{ style: styles.weekTitleDay },
'S'
)
),
React.createElement(
SlideInTransitionGroup,
{
direction: this.state.transitionDirection },
React.createElement(CalendarMonth, {
key: this.state.displayDate.toDateString(),
ref: 'calendar',
displayDate: this.state.displayDate,
onDayTouchTap: this._handleDayTouchTap,
selectedDate: this.state.selectedDate,
minDate: this.props.minDate,
maxDate: this.props.maxDate,
shouldDisableDate: this.props.shouldDisableDate })
)
),
React.createElement(
'div',
{ style: styles.yearContainer },
this._yearSelector()
)
);
},
_yearSelector: function _yearSelector() {
if (this.props.showYearSelector) {
return React.createElement(CalendarYear, {
key: 'years',
displayDate: this.state.displayDate,
onYearTouchTap: this._handleYearTouchTap,
selectedDate: this.state.selectedDate,
minDate: this.props.minDate,
maxDate: this.props.maxDate });
}
},
getSelectedDate: function getSelectedDate() {
return this.state.selectedDate;
},
isSelectedDateDisabled: function isSelectedDateDisabled() {
return this.refs.calendar.isSelectedDateDisabled();
},
_addSelectedDays: function _addSelectedDays(days) {
this._setSelectedDate(DateTime.addDays(this.state.selectedDate, days));
},
_addSelectedMonths: function _addSelectedMonths(months) {
this._setSelectedDate(DateTime.addMonths(this.state.selectedDate, months));
},
_addSelectedYears: function _addSelectedYears(years) {
this._setSelectedDate(DateTime.addYears(this.state.selectedDate, years));
},
_setDisplayDate: function _setDisplayDate(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 _setSelectedDate(date) {
var adjustedDate = date;
if (DateTime.isBeforeDate(date, this.props.minDate)) {
adjustedDate = this.props.minDate;
} else if (DateTime.isAfterDate(date, this.props.maxDate)) {
adjustedDate = this.props.maxDate;
}
var newDisplayDate = DateTime.getFirstDayOfMonth(adjustedDate);
if (newDisplayDate !== this.state.displayDate) {
this._setDisplayDate(newDisplayDate, adjustedDate);
} else {
this.setState({
selectedDate: adjustedDate
});
}
},
_handleDayTouchTap: function _handleDayTouchTap(e, date) {
this._setSelectedDate(date);
if (this.props.onDayTouchTap) this.props.onDayTouchTap(e, date);
},
_handleMonthChange: function _handleMonthChange(months) {
this._addSelectedMonths(months);
},
_handleYearChange: function _handleYearChange(years) {
this._addSelectedYears(years);
},
_handleYearTouchTap: function _handleYearTouchTap(e, year) {
var date = DateTime.clone(this.state.selectedDate);
date.setFullYear(year);
this._setSelectedDate(date, e);
},
_getToolbarInteractions: function _getToolbarInteractions() {
return {
prevMonth: DateTime.monthDiff(this.state.selectedDate, this.props.minDate) > 0,
nextMonth: DateTime.monthDiff(this.state.selectedDate, this.props.maxDate) < 0,
prevYear: DateTime.yearDiff(this.state.selectedDate, this.props.minDate) > 0,
nextYear: DateTime.yearDiff(this.state.selectedDate, this.props.maxDate) < 0
};
},
_handleMonthDayClick: function _handleMonthDayClick() {
this.setState({ displayMonthDay: true });
},
_handleYearClick: function _handleYearClick() {
this.setState({ displayMonthDay: false });
},
_handleWindowKeyDown: function _handleWindowKeyDown(e) {
if (this.props.isActive) {
switch (e.keyCode) {
case KeyCode.UP:
if (e.altKey && e.shiftKey) {
this._addSelectedYears(-1);
} else if (e.shiftKey) {
this._addSelectedMonths(-1);
} else {
this._addSelectedDays(-7);
}
break;
case KeyCode.DOWN:
if (e.altKey && e.shiftKey) {
this._addSelectedYears(1);
} else if (e.shiftKey) {
this._addSelectedMonths(1);
} else {
this._addSelectedDays(7);
}
break;
case KeyCode.RIGHT:
if (e.altKey && e.shiftKey) {
this._addSelectedYears(1);
} else if (e.shiftKey) {
this._addSelectedMonths(1);
} else {
this._addSelectedDays(1);
}
break;
case KeyCode.LEFT:
if (e.altKey && e.shiftKey) {
this._addSelectedYears(-1);
} else if (e.shiftKey) {
this._addSelectedMonths(-1);
} else {
this._addSelectedDays(-1);
}
break;
}
}
}
});
module.exports = Calendar;
},{"../clearfix":15,"../mixins/style-propable":52,"../mixins/window-listenable":54,"../styles/transitions":75,"../transition-groups/slide-in":122,"../utils/date-time":126,"../utils/key-code":132,"./calendar-month":16,"./calendar-toolbar":17,"./calendar-year":18,"./date-display":20,"react":312}],20:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var DateTime = require('../utils/date-time');
var Transitions = require('../styles/transitions');
var AutoPrefix = require('../styles/auto-prefix');
var SlideInTransitionGroup = require('../transition-groups/slide-in');
var DateDisplay = React.createClass({
displayName: 'DateDisplay',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
selectedDate: React.PropTypes.object.isRequired,
weekCount: React.PropTypes.number,
yearSelectionAvailable: React.PropTypes.bool,
monthDaySelected: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
weekCount: 4,
yearSelectionAvailable: true,
monthDaySelected: true
};
},
getInitialState: function getInitialState() {
return {
transitionDirection: 'up',
selectedYear: !this.props.monthDaySelected
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
var direction = undefined;
if (nextProps.selectedDate !== this.props.selectedDate) {
direction = nextProps.selectedDate > this.props.selectedDate ? 'up' : 'down';
this.setState({
transitionDirection: direction
});
}
if (nextProps.monthDaySelected !== undefined) {
this.setState({ selectedYear: !nextProps.monthDaySelected });
}
},
getTheme: function getTheme() {
return this.context.muiTheme.component.datePicker;
},
render: function render() {
var _props = this.props;
var selectedDate = _props.selectedDate;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['selectedDate', 'style']);
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();
var isLandscape = this.props.mode === 'landscape';
var dateYPosition = 0;
var dayYPosition = 30;
var yearYPosition = 95;
if (isLandscape) {
dateYPosition = this.props.weekCount === 5 ? 14 : this.props.weekCount === 6 ? 34 : 8;
yearYPosition = this.props.weekCount === 4 ? 114 : 150;
if (this.props.weekCount > 4) dayYPosition = 50;
}
var styles = {
root: {
textAlign: 'center',
position: 'relative'
},
dateContainer: {
backgroundColor: this.getTheme().color,
height: isLandscape ? this.props.weekCount * 40 + 36 : 150,
padding: '16px 0',
transition: Transitions.easeOut(),
boxSizing: 'border-box'
},
date: {
position: 'relative',
color: this.getTheme().textColor,
transition: Transitions.easeOut(),
transform: 'translate3d(0,' + dateYPosition + 'px,0)'
},
dowContainer: {
height: 32,
backgroundColor: this.getTheme().selectColor,
borderRadius: isLandscape ? '2px 0 0 0' : '2px 2px 0 0',
paddingTop: 9,
boxSizing: 'border-box'
},
dow: {
fontSize: 13,
lineHeight: '13px',
height: '100%',
color: this.getTheme().selectTextColor
},
day: {
root: {
position: 'absolute',
lineHeight: isLandscape ? '76px' : '58px',
fontSize: isLandscape ? 76 : 58,
height: isLandscape ? 76 : 58,
width: '100%',
opacity: this.state.selectedYear ? 0.7 : 1.0,
transition: Transitions.easeOut(),
transform: 'translate3d(0,' + dayYPosition + 'px,0)'
},
title: {
width: 100,
marginLeft: 'auto',
marginRight: 'auto',
cursor: !this.state.selectedYear ? 'default' : 'pointer'
}
},
month: {
root: {
position: 'absolute',
top: isLandscape ? 0 : 1,
fontSize: isLandscape ? 26 : 22,
lineHeight: isLandscape ? '26px' : '22px',
height: isLandscape ? 26 : 22,
width: '100%',
textTransform: 'uppercase',
opacity: this.state.selectedYear ? 0.7 : 1.0
},
title: {
width: 100,
marginLeft: 'auto',
marginRight: 'auto',
cursor: !this.state.selectedYear ? 'default' : 'pointer'
}
},
year: {
root: {
position: 'absolute',
margin: 0,
fontSize: isLandscape ? 26 : 22,
lineHeight: isLandscape ? '26px' : '22px',
height: isLandscape ? 26 : 22,
width: '100%',
textTransform: 'uppercase',
opacity: this.state.selectedYear ? 1.0 : 0.7,
transition: Transitions.easeOut(),
transform: 'translate3d(0,' + yearYPosition + 'px,0)'
},
title: {
width: 100,
marginLeft: 'auto',
marginRight: 'auto',
cursor: !this.props.yearSelectionAvailable || this.state.selectedYear ? 'default' : 'pointer'
}
}
};
return React.createElement(
'div',
_extends({}, other, { style: this.mergeAndPrefix(styles.root, this.props.style) }),
React.createElement(
'div',
{ style: styles.dowContainer },
React.createElement(
SlideInTransitionGroup,
{
style: styles.dow,
direction: this.state.transitionDirection },
React.createElement(
'div',
{ key: dayOfWeek },
dayOfWeek
)
)
),
React.createElement(
'div',
{ style: AutoPrefix.all(styles.dateContainer) },
React.createElement(
'div',
{ style: AutoPrefix.all(styles.date) },
React.createElement(
SlideInTransitionGroup,
{
style: styles.month.root,
direction: this.state.transitionDirection },
React.createElement(
'div',
{ key: month, style: styles.month.title, onTouchTap: this._handleMonthDayClick },
month
)
),
React.createElement(
SlideInTransitionGroup,
{
style: styles.day.root,
direction: this.state.transitionDirection },
React.createElement(
'div',
{ key: day, style: styles.day.title, onTouchTap: this._handleMonthDayClick },
day
)
),
React.createElement(
SlideInTransitionGroup,
{
style: styles.year.root,
direction: this.state.transitionDirection },
React.createElement(
'div',
{ key: year, style: styles.year.title, onTouchTap: this._handleYearClick },
year
)
)
)
)
);
},
_handleMonthDayClick: function _handleMonthDayClick() {
if (this.props.handleMonthDayClick && this.state.selectedYear) {
this.props.handleMonthDayClick();
}
if (this.props.yearSelectionAvailable) this.setState({ selectedYear: false });
},
_handleYearClick: function _handleYearClick() {
if (this.props.handleYearClick && !this.state.selectedYear && this.props.yearSelectionAvailable) {
this.props.handleYearClick();
}
if (this.props.yearSelectionAvailable) this.setState({ selectedYear: true });
}
});
module.exports = DateDisplay;
},{"../mixins/style-propable":52,"../styles/auto-prefix":68,"../styles/transitions":75,"../transition-groups/slide-in":122,"../utils/date-time":126,"react":312}],21:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var WindowListenable = require('../mixins/window-listenable');
var CssEvent = require('../utils/css-event');
var KeyCode = require('../utils/key-code');
var Calendar = require('./calendar');
var Dialog = require('../dialog');
var FlatButton = require('../flat-button');
var DatePickerDialog = React.createClass({
displayName: 'DatePickerDialog',
mixins: [StylePropable, WindowListenable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
initialDate: React.PropTypes.object,
onAccept: React.PropTypes.func,
onShow: React.PropTypes.func,
onDismiss: React.PropTypes.func,
onClickAway: React.PropTypes.func,
minDate: React.PropTypes.object,
maxDate: React.PropTypes.object,
shouldDisableDate: React.PropTypes.func,
hideToolbarYearChange: React.PropTypes.bool,
showYearSelector: React.PropTypes.bool
},
windowListeners: {
keyup: '_handleWindowKeyUp'
},
getInitialState: function getInitialState() {
return {
isCalendarActive: false,
showMonthDayPicker: true
};
},
render: function render() {
var _props = this.props;
var initialDate = _props.initialDate;
var onAccept = _props.onAccept;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['initialDate', 'onAccept', 'style']);
var styles = {
root: {
fontSize: 14,
color: this.context.muiTheme.component.datePicker.calendarTextColor
},
dialogContent: {
width: this.props.mode === 'landscape' ? 560 : 280
},
dialogBodyContent: {
padding: 0
},
actions: {
marginRight: 8
}
};
var actions = [React.createElement(FlatButton, {
key: 0,
label: 'Cancel',
secondary: true,
style: styles.actions,
onTouchTap: this._handleCancelTouchTap })];
if (!this.props.autoOk) {
actions.push(React.createElement(FlatButton, {
key: 1,
label: 'OK',
secondary: true,
disabled: this.refs.calendar !== undefined && this.refs.calendar.isSelectedDateDisabled(),
style: styles.actions,
onTouchTap: this._handleOKTouchTap }));
}
return React.createElement(
Dialog,
_extends({}, other, {
ref: 'dialog',
style: styles.root,
contentStyle: styles.dialogContent,
bodyStyle: styles.dialogBodyContent,
actions: actions,
onDismiss: this._handleDialogDismiss,
onShow: this._handleDialogShow,
onClickAway: this._handleDialogClickAway,
repositionOnUpdate: false }),
React.createElement(Calendar, {
ref: 'calendar',
onDayTouchTap: this._onDayTouchTap,
initialDate: this.props.initialDate,
isActive: this.state.isCalendarActive,
minDate: this.props.minDate,
maxDate: this.props.maxDate,
shouldDisableDate: this.props.shouldDisableDate,
shouldShowMonthDayPickerFirst: this.state.showMonthDayPicker,
hideToolbarYearChange: this.props.hideToolbarYearChange,
showYearSelector: this.props.showYearSelector,
mode: this.props.mode })
);
},
show: function show() {
this.refs.dialog.show();
},
dismiss: function dismiss() {
this.refs.dialog.dismiss();
},
_onDayTouchTap: function _onDayTouchTap() {
if (this.props.autoOk) {
setTimeout(this._handleOKTouchTap, 300);
}
},
_handleCancelTouchTap: function _handleCancelTouchTap() {
this.dismiss();
},
_handleOKTouchTap: function _handleOKTouchTap() {
if (this.props.onAccept && !this.refs.calendar.isSelectedDateDisabled()) {
this.props.onAccept(this.refs.calendar.getSelectedDate());
}
this.dismiss();
},
_handleDialogShow: function _handleDialogShow() {
this.setState({
isCalendarActive: true
});
if (this.props.onShow) this.props.onShow();
},
_handleDialogDismiss: function _handleDialogDismiss() {
var _this = this;
CssEvent.onTransitionEnd(this.refs.dialog.getDOMNode(), function () {
_this.setState({
isCalendarActive: false,
showMonthDayPicker: true
});
});
if (this.props.onDismiss) this.props.onDismiss();
},
_handleDialogClickAway: function _handleDialogClickAway() {
var _this2 = this;
CssEvent.onTransitionEnd(this.refs.dialog.getDOMNode(), function () {
_this2.setState({
isCalendarActive: false,
showMonthDayPicker: true
});
});
if (this.props.onClickAway) this.props.onClickAway();
},
_handleWindowKeyUp: function _handleWindowKeyUp(e) {
if (this.state.isCalendarActive) {
switch (e.keyCode) {
case KeyCode.ENTER:
this._handleOKTouchTap();
break;
}
}
}
});
module.exports = DatePickerDialog;
},{"../dialog":25,"../flat-button":31,"../mixins/style-propable":52,"../mixins/window-listenable":54,"../utils/css-event":125,"../utils/key-code":132,"./calendar":19,"react":312}],22:[function(require,module,exports){
(function (process){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var WindowListenable = require('../mixins/window-listenable');
var DateTime = require('../utils/date-time');
var DatePickerDialog = require('./date-picker-dialog');
var TextField = require('../text-field');
var DatePicker = React.createClass({
displayName: 'DatePicker',
mixins: [StylePropable, WindowListenable],
propTypes: {
autoOk: React.PropTypes.bool,
defaultDate: React.PropTypes.object,
formatDate: React.PropTypes.func,
hideToolbarYearChange: React.PropTypes.bool,
maxDate: React.PropTypes.object,
minDate: React.PropTypes.object,
mode: React.PropTypes.oneOf(['portrait', 'landscape', 'inline']),
onDismiss: React.PropTypes.func,
onChange: React.PropTypes.func,
onFocus: React.PropTypes.func,
onShow: React.PropTypes.func,
onTouchTap: React.PropTypes.func,
shouldDisableDate: React.PropTypes.func,
showYearSelector: React.PropTypes.bool,
style: React.PropTypes.object,
textFieldStyle: React.PropTypes.object
},
windowListeners: {
keyup: '_handleWindowKeyUp'
},
getDefaultProps: function getDefaultProps() {
return {
formatDate: DateTime.format,
autoOk: false,
showYearSelector: false
};
},
getInitialState: function getInitialState() {
return {
date: this._isControlled() ? this._getControlledDate() : this.props.defaultDate,
dialogDate: new Date()
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (this._isControlled()) {
var newDate = this._getControlledDate(nextProps);
if (!DateTime.isEqualDate(this.state.date, newDate)) {
this.setState({
date: newDate
});
}
}
},
render: function render() {
var _props = this.props;
var autoOk = _props.autoOk;
var defaultDate = _props.defaultDate;
var formatDate = _props.formatDate;
var maxDate = _props.maxDate;
var minDate = _props.minDate;
var mode = _props.mode;
var onDismiss = _props.onDismiss;
var onFocus = _props.onFocus;
var onShow = _props.onShow;
var onTouchTap = _props.onTouchTap;
var showYearSelector = _props.showYearSelector;
var style = _props.style;
var textFieldStyle = _props.textFieldStyle;
var valueLink = _props.valueLink;
var other = _objectWithoutProperties(_props, ['autoOk', 'defaultDate', 'formatDate', 'maxDate', 'minDate', 'mode', 'onDismiss', 'onFocus', 'onShow', 'onTouchTap', 'showYearSelector', 'style', 'textFieldStyle', 'valueLink']);
return React.createElement(
'div',
{ style: style },
React.createElement(TextField, _extends({}, other, {
style: textFieldStyle,
ref: 'input',
value: this.state.date ? formatDate(this.state.date) : undefined,
onFocus: this._handleInputFocus,
onTouchTap: this._handleInputTouchTap })),
React.createElement(DatePickerDialog, {
ref: 'dialogWindow',
mode: mode,
initialDate: this.state.dialogDate,
onAccept: this._handleDialogAccept,
onShow: onShow,
onDismiss: this._handleDialogDismiss,
minDate: minDate,
maxDate: maxDate,
autoOk: autoOk,
showYearSelector: showYearSelector,
shouldDisableDate: this.props.shouldDisableDate,
hideToolbarYearChange: this.props.hideToolbarYearChange })
);
},
getDate: function getDate() {
return this.state.date;
},
setDate: function setDate(d) {
if (process.env.NODE_ENV !== 'production' && this._isControlled()) {
console.error('Cannot call DatePicker.setDate when value or valueLink is defined as a property.');
}
this.setState({
date: d
});
},
/**
* Open the date-picker dialog programmatically from a parent.
*/
openDialog: function openDialog() {
this.setState({
dialogDate: this.getDate()
}, this.refs.dialogWindow.show);
},
/**
* Alias for `openDialog()` for an api consistent with TextField.
*/
focus: function focus() {
this.openDialog();
},
_handleDialogAccept: function _handleDialogAccept(d) {
if (!this._isControlled()) {
this.setDate(d);
}
if (this.props.onChange) this.props.onChange(null, d);
if (this.props.valueLink) this.props.valueLink.requestChange(d);
},
_handleDialogDismiss: function _handleDialogDismiss() {
if (this.props.onDismiss) this.props.onDismiss();
},
_handleInputFocus: function _handleInputFocus(e) {
e.target.blur();
if (this.props.onFocus) this.props.onFocus(e);
},
_handleInputTouchTap: function _handleInputTouchTap(e) {
this.openDialog();
if (this.props.onTouchTap) this.props.onTouchTap(e);
},
_handleWindowKeyUp: function _handleWindowKeyUp() {
//TO DO: open the dialog if input has focus
},
_isControlled: function _isControlled() {
return this.props.hasOwnProperty('value') || this.props.hasOwnProperty('valueLink');
},
_getControlledDate: function _getControlledDate() {
var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0];
if (DateTime.isDateObject(props.value)) {
return props.value;
} else if (props.valueLink && DateTime.isDateObject(props.valueLink.value)) {
return props.valueLink.value;
}
}
});
module.exports = DatePicker;
}).call(this,require('_process'))
},{"../mixins/style-propable":52,"../mixins/window-listenable":54,"../text-field":101,"../utils/date-time":126,"./date-picker-dialog":21,"_process":138,"react":312}],23:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var Transition = require('../styles/transitions');
var DateTime = require('../utils/date-time');
var EnhancedButton = require('../enhanced-button');
var DayButton = React.createClass({
displayName: 'DayButton',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
date: React.PropTypes.object,
onTouchTap: React.PropTypes.func,
selected: React.PropTypes.bool,
disabled: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
selected: false,
disabled: false
};
},
getInitialState: function getInitialState() {
return {
hover: false
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.datePicker;
},
render: function render() {
var _props = this.props;
var date = _props.date;
var onTouchTap = _props.onTouchTap;
var selected = _props.selected;
var other = _objectWithoutProperties(_props, ['date', 'onTouchTap', 'selected']);
var styles = {
root: {
boxSizing: 'border-box',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
position: 'relative',
float: 'left',
width: 36,
padding: '4px 2px'
},
label: {
position: 'relative',
color: this.context.muiTheme.palette.textColor
},
buttonState: {
position: 'absolute',
height: 32,
width: 32,
opacity: 0,
borderRadius: '50%',
transform: 'scale(0)',
transition: Transition.easeOut(),
backgroundColor: this.getTheme().selectColor
}
};
if (this.state.hover) {
styles.label.color = this.getTheme().selectTextColor;
styles.buttonState.opacity = '0.6';
styles.buttonState.transform = 'scale(1)';
}
if (this.props.selected) {
styles.label.color = this.getTheme().selectTextColor;
styles.buttonState.opacity = 1;
styles.buttonState.transform = 'scale(1)';
} else if (this.props.disabled) {
styles.root.opacity = '0.6';
}
if (DateTime.isEqualDate(this.props.date, new Date()) && !this.props.selected) {
styles.label.color = this.getTheme().color;
}
return this.props.date ? React.createElement(
EnhancedButton,
_extends({}, other, {
style: styles.root,
hoverStyle: styles.hover,
disabled: this.props.disabled,
disableFocusRipple: true,
disableTouchRipple: true,
onMouseEnter: this._handleMouseEnter,
onMouseLeave: this._handleMouseLeave,
onTouchTap: this._handleTouchTap,
onKeyboardFocus: this._handleKeyboardFocus }),
React.createElement('div', { style: styles.buttonState }),
React.createElement(
'span',
{ style: styles.label },
this.props.date.getDate()
)
) : React.createElement('span', { style: styles.root });
},
_handleMouseEnter: function _handleMouseEnter() {
if (!this.props.disabled) this.setState({ hover: true });
},
_handleMouseLeave: function _handleMouseLeave() {
if (!this.props.disabled) this.setState({ hover: false });
},
_handleTouchTap: function _handleTouchTap(e) {
if (!this.props.disabled && this.props.onTouchTap) this.props.onTouchTap(e, this.props.date);
},
_handleKeyboardFocus: function _handleKeyboardFocus(e, keyboardFocused) {
if (!this.props.disabled && this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, keyboardFocused, this.props.date);
}
});
module.exports = DayButton;
},{"../enhanced-button":28,"../mixins/style-propable":52,"../styles/transitions":75,"../utils/date-time":126,"react":312}],24:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var EnhancedButton = require('../enhanced-button');
var YearButton = React.createClass({
displayName: 'YearButton',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
year: React.PropTypes.number,
onTouchTap: React.PropTypes.func,
selected: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
selected: false
};
},
getInitialState: function getInitialState() {
return {
hover: false
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.datePicker;
},
render: function render() {
var _props = this.props;
var className = _props.className;
var year = _props.year;
var onTouchTap = _props.onTouchTap;
var selected = _props.selected;
var other = _objectWithoutProperties(_props, ['className', 'year', 'onTouchTap', 'selected']);
var styles = {
root: {
boxSizing: 'border-box',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
position: 'relative',
display: 'block',
margin: '0 auto',
width: 36,
fontSize: 14,
padding: '8px 2px'
},
label: {
position: 'relative',
top: -1,
color: this.context.muiTheme.palette.textColor
},
buttonState: {
position: 'absolute',
height: 32,
width: 32,
opacity: 0,
borderRadius: '50%',
transform: 'scale(0)',
backgroundColor: this.getTheme().selectColor
}
};
if (this.state.hover) {
styles.label.color = this.getTheme().selectTextColor;
styles.buttonState.opacity = 0.6;
styles.buttonState.transform = 'scale(1.5)';
}
if (selected) {
styles.label.color = this.getTheme().selectTextColor;
styles.buttonState.opacity = 1;
styles.buttonState.transform = 'scale(1.5)';
}
if (year === new Date().getFullYear()) {
styles.root.color = this.getTheme().color;
}
return React.createElement(
EnhancedButton,
_extends({}, other, {
style: styles.root,
disableFocusRipple: true,
disableTouchRipple: true,
onMouseEnter: this._handleMouseEnter,
onMouseLeave: this._handleMouseLeave,
onTouchTap: this._handleTouchTap }),
React.createElement('div', { style: styles.buttonState }),
React.createElement(
'span',
{ style: styles.label },
year
)
);
},
_handleMouseEnter: function _handleMouseEnter() {
this.setState({ hover: true });
},
_handleMouseLeave: function _handleMouseLeave() {
this.setState({ hover: false });
},
_handleTouchTap: function _handleTouchTap(e) {
if (this.props.onTouchTap) this.props.onTouchTap(e, this.props.year);
}
});
module.exports = YearButton;
},{"../enhanced-button":28,"../mixins/style-propable":52,"react":312}],25:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var WindowListenable = require('./mixins/window-listenable');
var CssEvent = require('./utils/css-event');
var KeyCode = require('./utils/key-code');
var Transitions = require('./styles/transitions');
var StylePropable = require('./mixins/style-propable');
var FlatButton = require('./flat-button');
var Overlay = require('./overlay');
var Paper = require('./paper');
var ReactTransitionGroup = React.addons.TransitionGroup;
var TransitionItem = React.createClass({
displayName: 'TransitionItem',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
getInitialState: function getInitialState() {
return {
style: {}
};
},
componentWillEnter: function componentWillEnter(callback) {
var spacing = this.context.muiTheme.spacing;
this.setState({
style: {
opacity: 1,
transform: 'translate3d(0, ' + spacing.desktopKeylineIncrement + 'px, 0)'
}
});
setTimeout(callback, 450); // matches transition duration
},
componentWillLeave: function componentWillLeave(callback) {
var _this = this;
this.setState({
style: {
opacity: 0,
transform: 'translate3d(0, 0, 0)'
}
});
setTimeout((function () {
if (_this.isMounted()) callback();
}).bind(this), 450); // matches transition duration
},
render: function render() {
var _props = this.props;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['style']);
return React.createElement(
'div',
_extends({}, other, { style: this.mergeAndPrefix(this.state.style, style) }),
this.props.children
);
}
});
var Dialog = React.createClass({
displayName: 'Dialog',
mixins: [WindowListenable, StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
actions: React.PropTypes.array,
autoDetectWindowHeight: React.PropTypes.bool,
autoScrollBodyContent: React.PropTypes.bool,
bodyStyle: React.PropTypes.object,
contentClassName: React.PropTypes.string,
contentStyle: React.PropTypes.object,
modal: React.PropTypes.bool,
openImmediately: React.PropTypes.bool,
onClickAway: React.PropTypes.func,
onDismiss: React.PropTypes.func,
onShow: React.PropTypes.func,
repositionOnUpdate: React.PropTypes.bool,
title: React.PropTypes.node
},
windowListeners: {
keyup: '_handleWindowKeyUp',
resize: '_positionDialog'
},
getDefaultProps: function getDefaultProps() {
return {
autoDetectWindowHeight: false,
autoScrollBodyContent: false,
actions: [],
modal: false,
repositionOnUpdate: true
};
},
getInitialState: function getInitialState() {
return {
open: this.props.openImmediately || false
};
},
componentDidMount: function componentDidMount() {
this._positionDialog();
if (this.props.openImmediately) {
this.refs.dialogOverlay.preventScrolling();
this._onShow();
}
},
componentDidUpdate: function componentDidUpdate() {
this._positionDialog();
},
getStyles: function getStyles() {
var spacing = this.context.muiTheme.spacing;
var main = {
position: 'fixed',
boxSizing: 'border-box',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
zIndex: 10,
top: 0,
left: -10000,
width: '100%',
height: '100%',
transition: Transitions.easeOut('0ms', 'left', '450ms')
};
var content = {
boxSizing: 'border-box',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
transition: Transitions.easeOut(),
position: 'relative',
width: '75%',
maxWidth: spacing.desktopKeylineIncrement * 12,
margin: '0 auto',
zIndex: 10
};
var body = {
padding: spacing.desktopGutter,
overflowY: this.props.autoScrollBodyContent ? 'auto' : 'hidden',
overflowX: 'hidden'
};
var gutter = spacing.desktopGutter + 'px ';
var title = {
margin: 0,
padding: gutter + gutter + '0 ' + gutter,
color: this.context.muiTheme.palette.textColor,
fontSize: 24,
lineHeight: '32px',
fontWeight: '400'
};
if (this.state.open) {
main = this.mergeAndPrefix(main, {
left: 0,
transition: Transitions.easeOut('0ms', 'left', '0ms')
});
}
return {
main: this.mergeAndPrefix(main, this.props.style),
content: this.mergeAndPrefix(content, this.props.contentStyle),
paper: {
background: this.context.muiTheme.canvasColor
},
body: this.mergeStyles(body, this.props.bodyStyle),
title: this.mergeStyles(title, this.props.titleStyle)
};
},
render: function render() {
var styles = this.getStyles();
var actions = this._getActionsContainer(this.props.actions);
var title = undefined;
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',
{ style: styles.title },
this.props.title
) : this.props.title;
}
return React.createElement(
'div',
{ ref: 'container', style: styles.main },
React.createElement(
ReactTransitionGroup,
{ component: 'div', ref: 'dialogWindow' },
this.state.open && React.createElement(
TransitionItem,
{
className: this.props.contentClassName,
style: styles.content },
React.createElement(
Paper,
{
style: styles.paper,
zDepth: 4 },
title,
React.createElement(
'div',
{ ref: 'dialogContent', style: styles.body },
this.props.children
),
actions
)
)
),
React.createElement(Overlay, {
ref: 'dialogOverlay',
show: this.state.open,
autoLockScrolling: false,
onTouchTap: this._handleOverlayTouchTap })
);
},
isOpen: function isOpen() {
return this.state.open;
},
dismiss: function dismiss() {
var _this2 = this;
CssEvent.onTransitionEnd(this.getDOMNode(), (function () {
_this2.refs.dialogOverlay.allowScrolling();
}).bind(this));
this.setState({ open: false });
this._onDismiss();
},
show: function show() {
this.refs.dialogOverlay.preventScrolling();
this.setState({ open: true }, this._onShow);
},
_getAction: function _getAction(actionJSON, key) {
var _this3 = this;
var styles = { marginRight: 8 };
var props = {
key: key,
secondary: true,
onClick: actionJSON.onClick,
onTouchTap: function onTouchTap() {
if (actionJSON.onTouchTap) {
actionJSON.onTouchTap.call(undefined);
}
if (!(actionJSON.onClick || actionJSON.onTouchTap)) {
_this3.dismiss();
}
},
label: actionJSON.text,
style: styles
};
if (actionJSON.ref) {
props.ref = actionJSON.ref;
props.keyboardFocused = actionJSON.ref === this.props.actionFocus;
}
return React.createElement(FlatButton, props);
},
_getActionsContainer: function _getActionsContainer(actions) {
var actionContainer = undefined;
var actionObjects = [];
var actionStyle = {
boxSizing: 'border-box',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
padding: 8,
marginBottom: 8,
width: '100%',
textAlign: 'right'
};
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);
}
actionObjects.push(currentAction);
}
actionContainer = React.createElement(
'div',
{ style: actionStyle },
actionObjects
);
}
return actionContainer;
},
_positionDialog: function _positionDialog() {
if (this.state.open) {
var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var container = this.getDOMNode();
var dialogWindow = this.refs.dialogWindow.getDOMNode();
var dialogContent = this.refs.dialogContent.getDOMNode();
var minPaddingTop = 16;
//Reset the height in case the window was resized.
dialogWindow.style.height = '';
dialogContent.style.height = '';
var dialogWindowHeight = dialogWindow.offsetHeight;
var paddingTop = (clientHeight - dialogWindowHeight) / 2 - 64;
if (paddingTop < minPaddingTop) paddingTop = minPaddingTop;
//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 = paddingTop + 'px';
}
// Force a height if the dialog is taller than clientHeight
if (this.props.autoDetectWindowHeight || this.props.autoScrollBodyContent) {
var styles = this.getStyles();
var maxDialogContentHeight = clientHeight - 2 * (styles.body.padding + 64);
if (this.props.title) maxDialogContentHeight -= dialogContent.previousSibling.offsetHeight;
if (this.props.actions) maxDialogContentHeight -= dialogContent.nextSibling.offsetHeight;
dialogContent.style.maxHeight = maxDialogContentHeight + 'px';
}
}
},
_onShow: function _onShow() {
if (this.props.onShow) this.props.onShow();
},
_onDismiss: function _onDismiss() {
if (this.props.onDismiss) this.props.onDismiss();
},
_handleOverlayTouchTap: function _handleOverlayTouchTap(e) {
if (this.props.modal) {
e.stopPropagation();
} else {
this.dismiss();
if (this.props.onClickAway) this.props.onClickAway();
}
},
_handleWindowKeyUp: function _handleWindowKeyUp(e) {
if (e.keyCode === KeyCode.ESC && !this.props.modal) {
this.dismiss();
}
}
});
module.exports = Dialog;
},{"./flat-button":31,"./mixins/style-propable":52,"./mixins/window-listenable":54,"./overlay":55,"./paper":56,"./styles/transitions":75,"./utils/css-event":125,"./utils/key-code":132,"react/addons":140}],26:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var ClickAwayable = require('./mixins/click-awayable');
var FontIcon = require('./font-icon');
var Menu = require('./menu/menu');
var DropDownIcon = React.createClass({
displayName: 'DropDownIcon',
mixins: [StylePropable, ClickAwayable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
onChange: React.PropTypes.func,
menuItems: React.PropTypes.array.isRequired,
closeOnMenuItemTouchTap: React.PropTypes.bool,
iconStyle: React.PropTypes.object,
iconClassName: React.PropTypes.string,
iconLigature: React.PropTypes.string
},
getInitialState: function getInitialState() {
return {
open: false
};
},
getDefaultProps: function getDefaultProps() {
return {
closeOnMenuItemTouchTap: true
};
},
componentDidMount: function componentDidMount() {
// This component can be deprecated once ./menu/menu has been deprecated.
// if (process.env.NODE_ENV !== 'production') {
// console.warn('DropDownIcon has been deprecated. Use IconMenu instead.');
// }
},
componentClickAway: function componentClickAway() {
this.setState({ open: false });
},
getStyles: function getStyles() {
var spacing = this.context.muiTheme.spacing;
var iconWidth = 48;
var styles = {
root: {
display: 'inline-block',
width: iconWidth + 'px !important',
position: 'relative',
height: spacing.desktopToolbarHeight,
fontSize: spacing.desktopDropDownMenuFontSize,
cursor: 'pointer'
},
menu: {
transition: Transitions.easeOut(),
right: '-14px !important',
top: '9px !important',
opacity: this.state.open ? 1 : 0
},
menuItem: { // similair to drop down menu's menu item styles
paddingRight: spacing.iconSize + spacing.desktopGutterLess * 2,
height: spacing.desktopDropDownMenuItemHeight,
lineHeight: spacing.desktopDropDownMenuItemHeight + 'px'
}
};
return styles;
},
render: function render() {
var _props = this.props;
var style = _props.style;
var children = _props.children;
var menuItems = _props.menuItems;
var closeOnMenuItemTouchTap = _props.closeOnMenuItemTouchTap;
var iconStyle = _props.iconStyle;
var iconClassName = _props.iconClassName;
var other = _objectWithoutProperties(_props, ['style', 'children', 'menuItems', 'closeOnMenuItemTouchTap', 'iconStyle', 'iconClassName']);
var styles = this.getStyles();
return React.createElement(
'div',
_extends({}, other, { style: this.mergeAndPrefix(styles.root, this.props.style) }),
React.createElement(
'div',
{ onTouchTap: this._onControlClick },
React.createElement(
FontIcon,
{
className: iconClassName,
style: iconStyle },
this.props.iconLigature
),
this.props.children
),
React.createElement(Menu, {
ref: 'menuItems',
style: this.mergeAndPrefix(styles.menu),
menuItems: menuItems,
menuItemStyle: styles.menuItem,
hideable: true,
visible: this.state.open,
onItemTap: this._onMenuItemClick })
);
},
_onControlClick: function _onControlClick() {
this.setState({ open: !this.state.open });
},
_onMenuItemClick: function _onMenuItemClick(e, key, payload) {
if (this.props.onChange) this.props.onChange(e, key, payload);
if (this.props.closeOnMenuItemTouchTap) {
this.setState({ open: false });
}
}
});
module.exports = DropDownIcon;
},{"./font-icon":33,"./menu/menu":45,"./mixins/click-awayable":49,"./mixins/style-propable":52,"./styles/transitions":75,"react":312}],27:[function(require,module,exports){
(function (process){
'use strict';
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var KeyCode = require('./utils/key-code');
var DropDownArrow = require('./svg-icons/navigation/arrow-drop-down');
var Paper = require('./paper');
var Menu = require('./menu/menu');
var ClearFix = require('./clearfix');
var DropDownMenu = React.createClass({
displayName: 'DropDownMenu',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
// The nested styles for drop-down-menu are modified by toolbar and possibly
// other user components, so it will give full access to its js styles rather
// than just the parent.
propTypes: {
className: React.PropTypes.string,
displayMember: React.PropTypes.string,
valueMember: React.PropTypes.string,
autoWidth: React.PropTypes.bool,
disabled: React.PropTypes.bool,
onChange: React.PropTypes.func,
menuItems: React.PropTypes.array.isRequired,
menuItemStyle: React.PropTypes.object,
underlineStyle: React.PropTypes.object,
iconStyle: React.PropTypes.object,
labelStyle: React.PropTypes.object,
selectedIndex: React.PropTypes.number
},
getDefaultProps: function getDefaultProps() {
return {
autoWidth: true,
disabled: false,
valueMember: 'payload',
displayMember: 'text'
};
},
getInitialState: function getInitialState() {
return {
open: false,
selectedIndex: this._isControlled() ? null : this.props.selectedIndex || 0
};
},
componentDidMount: function componentDidMount() {
if (this.props.autoWidth) this._setWidth();
if (this.props.hasOwnProperty('selectedIndex')) this._setSelectedIndex(this.props);
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (this.props.autoWidth) this._setWidth();
if (nextProps.hasOwnProperty('value') || nextProps.hasOwnProperty('valueLink')) {
return;
} else if (nextProps.hasOwnProperty('selectedIndex')) {
this._setSelectedIndex(nextProps);
}
},
getStyles: function getStyles() {
var disabled = this.props.disabled;
var zIndex = 5; // As AppBar
var spacing = this.context.muiTheme.spacing;
var accentColor = this.context.muiTheme.component.dropDownMenu.accentColor;
var backgroundColor = this.context.muiTheme.component.menu.backgroundColor;
var styles = {
root: {
transition: Transitions.easeOut(),
position: 'relative',
display: 'inline-block',
height: spacing.desktopSubheaderHeight,
fontSize: spacing.desktopDropDownMenuFontSize,
outline: 'none'
},
control: {
cursor: disabled ? 'not-allowed' : 'pointer',
position: 'static',
height: '100%'
},
controlBg: {
transition: Transitions.easeOut(),
backgroundColor: backgroundColor,
height: '100%',
width: '100%',
opacity: 0
},
icon: {
position: 'absolute',
top: (spacing.desktopToolbarHeight - 24) / 2,
right: spacing.desktopGutterLess,
fill: this.context.muiTheme.component.dropDownMenu.accentColor
},
label: {
transition: Transitions.easeOut(),
lineHeight: spacing.desktopToolbarHeight + 'px',
position: 'absolute',
paddingLeft: spacing.desktopGutter,
top: 0,
opacity: 1,
color: disabled ? this.context.muiTheme.palette.disabledColor : this.context.muiTheme.palette.textColor
},
underline: {
borderTop: 'solid 1px ' + accentColor,
margin: '-1px ' + spacing.desktopGutter + 'px'
},
menu: {
zIndex: zIndex + 1
},
menuItem: {
paddingRight: spacing.iconSize + spacing.desktopGutterLess + spacing.desktopGutterMini,
height: spacing.desktopDropDownMenuItemHeight,
lineHeight: spacing.desktopDropDownMenuItemHeight + 'px',
whiteSpace: 'nowrap'
},
rootWhenOpen: {
opacity: 1
},
labelWhenOpen: {
opacity: 0,
top: spacing.desktopToolbarHeight / 2
},
overlay: {
height: '100%',
width: '100%',
position: 'fixed',
top: 0,
left: 0,
zIndex: zIndex
}
};
return styles;
},
getInputNode: function getInputNode() {
var root = this.refs.root;
var item = this.props.menuItems[this.state.selectedIndex];
if (item) {
root.value = item[this.props.displayMember];
}
return root;
},
render: function render() {
var _this = this;
var styles = this.getStyles();
var selectedIndex = this._isControlled() ? null : this.state.selectedIndex;
var displayValue = "";
if (selectedIndex) {
if (process.env.NODE_ENV !== 'production') {
console.assert(!!this.props.menuItems[selectedIndex], 'SelectedIndex of ' + selectedIndex + ' does not exist in menuItems.');
}
} else {
if (this.props.valueMember && this._isControlled()) {
var value = this.props.hasOwnProperty('value') ? this.props.value : this.props.valueLink.value;
if (value) {
for (var i = 0; i < this.props.menuItems.length; i++) {
if (this.props.menuItems[i][this.props.valueMember] === value) {
selectedIndex = i;
}
}
}
}
}
var selectedItem = this.props.menuItems[selectedIndex];
if (selectedItem) {
displayValue = selectedItem[this.props.displayMember];
}
var menuItems = this.props.menuItems.map(function (item) {
item.text = item[_this.props.displayMember];
item.payload = item[_this.props.valueMember];
return item;
});
return React.createElement(
'div',
{
ref: 'root',
onKeyDown: this._onKeyDown,
onFocus: this.props.onFocus,
onBlur: this.props.onBlur,
className: this.props.className,
style: this.mergeAndPrefix(styles.root, this.state.open && styles.rootWhenOpen, this.props.style) },
React.createElement(
ClearFix,
{ style: this.mergeAndPrefix(styles.control), onTouchTap: this._onControlClick },
React.createElement(Paper, { style: this.mergeAndPrefix(styles.controlBg), zDepth: 0 }),
React.createElement(
'div',
{ style: this.mergeAndPrefix(styles.label, this.state.open && styles.labelWhenOpen, this.props.labelStyle) },
displayValue
),
React.createElement(DropDownArrow, { style: this.mergeAndPrefix(styles.icon, this.props.iconStyle) }),
React.createElement('div', { style: this.mergeAndPrefix(styles.underline, this.props.underlineStyle) })
),
React.createElement(Menu, {
ref: 'menuItems',
autoWidth: this.props.autoWidth,
selectedIndex: selectedIndex,
menuItems: menuItems,
style: styles.menu,
menuItemStyle: this.mergeAndPrefix(styles.menuItem, this.props.menuItemStyle),
hideable: true,
visible: this.state.open,
onRequestClose: this._onMenuRequestClose,
onItemTap: this._onMenuItemClick }),
this.state.open && React.createElement('div', { style: styles.overlay, onTouchTap: this._handleOverlayTouchTap })
);
},
_setWidth: function _setWidth() {
var el = React.findDOMNode(this);
var menuItemsDom = React.findDOMNode(this.refs.menuItems);
if (!this.props.style || !this.props.style.hasOwnProperty('width')) {
el.style.width = 'auto';
el.style.width = menuItemsDom.offsetWidth + 'px';
}
},
_setSelectedIndex: function _setSelectedIndex(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 _onControlClick() {
if (!this.props.disabled) {
this.setState({ open: !this.state.open });
}
},
_onKeyDown: function _onKeyDown(e) {
switch (e.which) {
case KeyCode.UP:
if (!this.state.open) {
this._selectPreviousItem();
} else {
if (e.altKey) {
this.setState({ open: false });
}
}
break;
case KeyCode.DOWN:
if (!this.state.open) {
if (e.altKey) {
this.setState({ open: true });
} else {
this._selectNextItem();
}
}
break;
case KeyCode.ENTER:
case KeyCode.SPACE:
this.setState({ open: true });
break;
default:
return; //important
}
e.preventDefault();
},
_onMenuItemClick: function _onMenuItemClick(e, key, payload) {
if (this.props.onChange && this.state.selectedIndex !== key) {
var selectedItem = this.props.menuItems[key];
if (selectedItem) {
e.target.value = selectedItem[this.props.valueMember];
}
if (this.props.valueLink) {
this.props.valueLink.requestChange(e.target.value);
} else {
this.props.onChange(e, key, payload);
}
}
this.setState({
selectedIndex: key,
value: e.target.value,
open: false
});
},
_onMenuRequestClose: function _onMenuRequestClose() {
this.setState({ open: false });
},
_selectPreviousItem: function _selectPreviousItem() {
this.setState({ selectedIndex: Math.max(this.state.selectedIndex - 1, 0) });
},
_selectNextItem: function _selectNextItem() {
this.setState({ selectedIndex: Math.min(this.state.selectedIndex + 1, this.props.menuItems.length - 1) });
},
_handleOverlayTouchTap: function _handleOverlayTouchTap() {
this.setState({
open: false
});
},
_isControlled: function _isControlled() {
return this.props.hasOwnProperty('value') || this.props.hasOwnProperty('valueLink');
}
});
module.exports = DropDownMenu;
}).call(this,require('_process'))
},{"./clearfix":15,"./menu/menu":45,"./mixins/style-propable":52,"./paper":56,"./styles/transitions":75,"./svg-icons/navigation/arrow-drop-down":82,"./utils/key-code":132,"_process":138,"react":312}],28:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var StylePropable = require('./mixins/style-propable');
var Colors = require('./styles/colors');
var Children = require('./utils/children');
var Events = require('./utils/events');
var KeyCode = require('./utils/key-code');
var FocusRipple = require('./ripples/focus-ripple');
var TouchRipple = require('./ripples/touch-ripple');
var styleInjected = false;
var listening = false;
var tabPressed = false;
function injectStyle() {
if (!styleInjected) {
// Remove inner padding and border in Firefox 4+.
var style = document.createElement("style");
style.innerHTML = '\n button::-moz-focus-inner,\n input::-moz-focus-inner {\n border: 0;\n padding: 0;\n }\n ';
document.body.appendChild(style);
styleInjected = true;
}
}
function listenForTabPresses() {
if (!listening) {
Events.on(window, 'keydown', function (e) {
tabPressed = e.keyCode === KeyCode.TAB;
});
listening = true;
}
}
var EnhancedButton = React.createClass({
displayName: 'EnhancedButton',
mixins: [PureRenderMixin, StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
centerRipple: React.PropTypes.bool,
containerElement: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
disabled: React.PropTypes.bool,
disableFocusRipple: React.PropTypes.bool,
disableKeyboardFocus: React.PropTypes.bool,
disableTouchRipple: React.PropTypes.bool,
keyboardFocused: React.PropTypes.bool,
linkButton: React.PropTypes.bool,
focusRippleColor: React.PropTypes.string,
touchRippleColor: React.PropTypes.string,
focusRippleOpacity: React.PropTypes.number,
touchRippleOpacity: React.PropTypes.number,
onBlur: React.PropTypes.func,
onFocus: React.PropTypes.func,
onKeyboardFocus: React.PropTypes.func,
onKeyDown: React.PropTypes.func,
onKeyUp: React.PropTypes.func,
onTouchTap: React.PropTypes.func,
tabIndex: React.PropTypes.number
},
getDefaultProps: function getDefaultProps() {
return {
containerElement: 'button',
onBlur: function onBlur() {},
onFocus: function onFocus() {},
onKeyboardFocus: function onKeyboardFocus() {},
onKeyDown: function onKeyDown() {},
onKeyUp: function onKeyUp() {},
onTouchTap: function onTouchTap() {},
tabIndex: 0,
type: 'button'
};
},
getInitialState: function getInitialState() {
return {
isKeyboardFocused: !this.props.disabled && this.props.keyboardFocused && !this.props.disableKeyboardFocus
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if ((nextProps.disabled || nextProps.disableKeyboardFocus) && this.state.isKeyboardFocused) {
this.setState({ isKeyboardFocused: false });
if (nextProps.onKeyboardFocus) {
nextProps.onKeyboardFocus(null, false);
}
}
},
componentDidMount: function componentDidMount() {
injectStyle();
listenForTabPresses();
},
render: function render() {
var _props = this.props;
var centerRipple = _props.centerRipple;
var children = _props.children;
var containerElement = _props.containerElement;
var disabled = _props.disabled;
var disableFocusRipple = _props.disableFocusRipple;
var disableKeyboardFocus = _props.disableKeyboardFocus;
var disableTouchRipple = _props.disableTouchRipple;
var focusRippleColor = _props.focusRippleColor;
var focusRippleOpacity = _props.focusRippleOpacity;
var linkButton = _props.linkButton;
var touchRippleColor = _props.touchRippleColor;
var touchRippleOpacity = _props.touchRippleOpacity;
var onBlur = _props.onBlur;
var onFocus = _props.onFocus;
var onKeyUp = _props.onKeyUp;
var onKeyDown = _props.onKeyDown;
var onTouchTap = _props.onTouchTap;
var style = _props.style;
var tabIndex = _props.tabIndex;
var type = _props.type;
var other = _objectWithoutProperties(_props, ['centerRipple', 'children', 'containerElement', 'disabled', 'disableFocusRipple', 'disableKeyboardFocus', 'disableTouchRipple', 'focusRippleColor', 'focusRippleOpacity', 'linkButton', 'touchRippleColor', 'touchRippleOpacity', 'onBlur', 'onFocus', 'onKeyUp', 'onKeyDown', 'onTouchTap', 'style', 'tabIndex', 'type']);
var mergedStyles = this.mergeAndPrefix({
border: 10,
background: 'none',
boxSizing: 'border-box',
display: 'inline-block',
font: 'inherit',
fontFamily: this.context.muiTheme.contentFontFamily,
tapHighlightColor: Colors.transparent,
appearance: linkButton ? null : 'button',
cursor: disabled ? 'default' : 'pointer',
textDecoration: 'none',
outline: 'none'
}, style);
if (disabled && linkButton) {
return React.createElement(
'span',
_extends({}, other, {
style: mergedStyles }),
children
);
}
var buttonProps = _extends({}, other, {
style: mergedStyles,
disabled: disabled,
onBlur: this._handleBlur,
onFocus: this._handleFocus,
onTouchTap: this._handleTouchTap,
onKeyUp: this._handleKeyUp,
onKeyDown: this._handleKeyDown,
tabIndex: tabIndex,
type: type
});
var buttonChildren = this._createButtonChildren();
return React.isValidElement(containerElement) ? React.cloneElement(containerElement, buttonProps, buttonChildren) : React.createElement(linkButton ? 'a' : containerElement, buttonProps, buttonChildren);
},
isKeyboardFocused: function isKeyboardFocused() {
return this.state.isKeyboardFocused;
},
removeKeyboardFocus: function removeKeyboardFocus(e) {
if (this.state.isKeyboardFocused) {
this.setState({ isKeyboardFocused: false });
this.props.onKeyboardFocus(e, false);
}
},
setKeyboardFocus: function setKeyboardFocus(e) {
if (!this.state.isKeyboardFocused) {
this.setState({ isKeyboardFocused: true });
this.props.onKeyboardFocus(e, true);
}
},
_cancelFocusTimeout: function _cancelFocusTimeout() {
if (this._focusTimeout) {
clearTimeout(this._focusTimeout);
this._focusTimeout = null;
}
},
_createButtonChildren: function _createButtonChildren() {
var _props2 = this.props;
var centerRipple = _props2.centerRipple;
var children = _props2.children;
var disabled = _props2.disabled;
var disableFocusRipple = _props2.disableFocusRipple;
var disableKeyboardFocus = _props2.disableKeyboardFocus;
var disableTouchRipple = _props2.disableTouchRipple;
var focusRippleColor = _props2.focusRippleColor;
var focusRippleOpacity = _props2.focusRippleOpacity;
var touchRippleColor = _props2.touchRippleColor;
var touchRippleOpacity = _props2.touchRippleOpacity;
var isKeyboardFocused = this.state.isKeyboardFocused;
//Focus Ripple
var focusRipple = isKeyboardFocused && !disabled && !disableFocusRipple && !disableKeyboardFocus ? React.createElement(FocusRipple, {
color: focusRippleColor,
opacity: focusRippleOpacity,
show: isKeyboardFocused
}) : undefined;
//Touch Ripple
var touchRipple = !disabled && !disableTouchRipple ? React.createElement(
TouchRipple,
{
centerRipple: centerRipple,
color: touchRippleColor,
opacity: touchRippleOpacity },
children
) : undefined;
return Children.create({
focusRipple: focusRipple,
touchRipple: touchRipple,
children: touchRipple ? undefined : children
});
},
_handleKeyDown: function _handleKeyDown(e) {
if (!this.props.disabled && !this.props.disableKeyboardFocus) {
if (e.keyCode === KeyCode.ENTER && this.state.isKeyboardFocused) {
this._handleTouchTap(e);
}
}
this.props.onKeyDown(e);
},
_handleKeyUp: function _handleKeyUp(e) {
if (!this.props.disabled && e.keyCode === KeyCode.SPACE && this.state.isKeyboardFocused) {
this._handleTouchTap(e);
}
this.props.onKeyUp(e);
},
_handleBlur: function _handleBlur(e) {
this._cancelFocusTimeout();
this.removeKeyboardFocus(e);
this.props.onBlur(e);
},
_handleFocus: function _handleFocus(e) {
var _this = this;
if (!this.props.disabled && !this.props.disableKeyboardFocus) {
//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 (tabPressed) {
_this.setKeyboardFocus(e);
}
}, 150);
this.props.onFocus(e);
}
},
_handleTouchTap: function _handleTouchTap(e) {
this._cancelFocusTimeout();
if (!this.props.disabled) {
tabPressed = false;
this.removeKeyboardFocus(e);
this.props.onTouchTap(e);
}
}
});
module.exports = EnhancedButton;
},{"./mixins/style-propable":52,"./ripples/focus-ripple":62,"./ripples/touch-ripple":64,"./styles/colors":69,"./utils/children":123,"./utils/events":128,"./utils/key-code":132,"react/addons":140}],29:[function(require,module,exports){
(function (process){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var KeyCode = require('./utils/key-code');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var UniqueId = require('./utils/unique-id');
var WindowListenable = require('./mixins/window-listenable');
var ClearFix = require('./clearfix');
var FocusRipple = require('./ripples/focus-ripple');
var TouchRipple = require('./ripples/touch-ripple');
var Paper = require('./paper');
var EnhancedSwitch = React.createClass({
displayName: 'EnhancedSwitch',
mixins: [WindowListenable, StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
id: React.PropTypes.string,
inputType: React.PropTypes.string.isRequired,
switchElement: React.PropTypes.element.isRequired,
onParentShouldUpdate: React.PropTypes.func.isRequired,
switched: React.PropTypes.bool.isRequired,
rippleStyle: React.PropTypes.object,
rippleColor: React.PropTypes.string,
iconStyle: React.PropTypes.object,
thumbStyle: React.PropTypes.object,
trackStyle: React.PropTypes.object,
labelStyle: React.PropTypes.object,
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'
},
getInitialState: function getInitialState() {
return {
isKeyboardFocused: false,
parentWidth: 100
};
},
getEvenWidth: function getEvenWidth() {
return parseInt(window.getComputedStyle(React.findDOMNode(this.refs.root)).getPropertyValue('width'), 10);
},
componentDidMount: function componentDidMount() {
var inputNode = React.findDOMNode(this.refs.checkbox);
if (!this.props.switched || inputNode.checked !== this.props.switched) {
this.props.onParentShouldUpdate(inputNode.checked);
}
window.addEventListener("resize", this._handleResize);
this._handleResize();
},
componentWillUnmount: function componentWillUnmount() {
window.removeEventListener("resize", this._handleResize);
},
componentWillReceiveProps: function componentWillReceiveProps(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;
} else if (hasNewDefaultProp) {
newState.switched = nextProps.defaultSwitched;
}
if (newState.switched !== undefined && newState.switched !== this.props.switched) {
this.props.onParentShouldUpdate(newState.switched);
}
},
getTheme: function getTheme() {
return this.context.muiTheme.palette;
},
getStyles: function getStyles() {
var spacing = this.context.muiTheme.spacing;
var switchWidth = 60 - spacing.desktopGutterLess;
var labelWidth = 'calc(100% - 60px)';
var styles = {
root: {
position: 'relative',
cursor: this.props.disabled ? 'default' : 'pointer',
overflow: 'visible',
display: 'table',
height: 'auto',
width: '100%'
},
input: {
position: 'absolute',
cursor: this.props.disabled ? 'default' : 'pointer',
pointerEvents: 'all',
opacity: 0,
width: '100%',
height: '100%',
zIndex: 2,
left: 0,
boxSizing: 'border-box',
padding: 0,
margin: 0
},
controls: {
width: '100%',
height: '100%'
},
label: {
float: 'left',
position: 'relative',
display: 'block',
width: labelWidth,
lineHeight: '24px',
color: this.getTheme().textColor
},
wrap: {
transition: Transitions.easeOut(),
float: 'left',
position: 'relative',
display: 'block',
width: switchWidth,
marginRight: this.props.labelPosition === 'right' ? spacing.desktopGutterLess : 0,
marginLeft: this.props.labelPosition === 'left' ? spacing.desktopGutterLess : 0
},
ripple: {
height: '200%',
width: '200%',
top: -12,
left: -12
}
};
return styles;
},
render: function render() {
var _props = this.props;
var type = _props.type;
var name = _props.name;
var value = _props.value;
var label = _props.label;
var onSwitch = _props.onSwitch;
var defaultSwitched = _props.defaultSwitched;
var onBlur = _props.onBlur;
var onFocus = _props.onFocus;
var onMouseUp = _props.onMouseUp;
var onMouseDown = _props.onMouseDown;
var onMouseLeave = _props.onMouseLeave;
var onTouchStart = _props.onTouchStart;
var onTouchEnd = _props.onTouchEnd;
var disableTouchRipple = _props.disableTouchRipple;
var disableFocusRipple = _props.disableFocusRipple;
var className = _props.className;
var other = _objectWithoutProperties(_props, ['type', 'name', 'value', 'label', 'onSwitch', 'defaultSwitched', 'onBlur', 'onFocus', 'onMouseUp', 'onMouseDown', 'onMouseLeave', 'onTouchStart', 'onTouchEnd', 'disableTouchRipple', 'disableFocusRipple', 'className']);
var styles = this.getStyles();
var wrapStyles = this.mergeAndPrefix(styles.wrap, this.props.iconStyle);
var rippleStyle = this.mergeAndPrefix(styles.ripple, this.props.rippleStyle);
var rippleColor = this.props.hasOwnProperty('rippleColor') ? this.props.rippleColor : this.getTheme().primary1Color;
if (this.props.thumbStyle) {
wrapStyles.marginLeft /= 2;
wrapStyles.marginRight /= 2;
}
var inputId = this.props.id || UniqueId.generate();
var labelStyle = this.mergeAndPrefix(styles.label, this.props.labelStyle);
var labelElement = this.props.label ? React.createElement(
'label',
{ style: labelStyle, htmlFor: inputId },
this.props.label
) : null;
var inputProps = {
ref: "checkbox",
type: this.props.inputType,
style: this.mergeAndPrefix(styles.input),
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.onMouseLeave = this._handleMouseLeave;
inputProps.onTouchStart = this._handleTouchStart;
inputProps.onTouchEnd = this._handleTouchEnd;
}
if (!this.props.hasOwnProperty('checkedLink')) {
inputProps.onChange = this._handleChange;
}
var inputElement = React.createElement('input', _extends({}, other, inputProps));
var touchRipple = React.createElement(TouchRipple, {
ref: 'touchRipple',
key: 'touchRipple',
style: rippleStyle,
color: rippleColor,
centerRipple: true });
var focusRipple = React.createElement(FocusRipple, {
key: 'focusRipple',
innerStyle: rippleStyle,
color: rippleColor,
show: this.state.isKeyboardFocused });
var ripples = [hideTouchRipple ? null : touchRipple, this.props.disabled || disableFocusRipple ? null : focusRipple];
// If toggle component (indicated by whether the style includes thumb) manually lay out
// elements in order to nest ripple elements
var switchElement = !this.props.thumbStyle ? React.createElement(
'div',
{ style: wrapStyles },
this.props.switchElement,
ripples
) : React.createElement(
'div',
{ style: wrapStyles },
React.createElement('div', { style: this.props.trackStyle }),
React.createElement(
Paper,
{ style: this.props.thumbStyle, zDepth: 1, circle: true },
' ',
ripples,
' '
)
);
var labelPositionExist = this.props.labelPosition;
// Position is left if not defined or invalid.
var elementsInOrder = labelPositionExist && this.props.labelPosition.toUpperCase() === "RIGHT" ? React.createElement(
ClearFix,
{ style: this.mergeAndPrefix(styles.controls) },
switchElement,
labelElement
) : React.createElement(
ClearFix,
{ style: this.mergeAndPrefix(styles.controls) },
labelElement,
switchElement
);
return React.createElement(
'div',
{ ref: 'root', className: className, style: this.mergeAndPrefix(styles.root, this.props.style) },
inputElement,
elementsInOrder
);
},
isSwitched: function isSwitched() {
return React.findDOMNode(this.refs.checkbox).checked;
},
// no callback here because there is no event
setSwitched: function setSwitched(newSwitchedValue) {
if (!this.props.hasOwnProperty('checked') || this.props.checked === false) {
this.props.onParentShouldUpdate(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 getValue() {
return React.findDOMNode(this.refs.checkbox).value;
},
isKeyboardFocused: function isKeyboardFocused() {
return this.state.isKeyboardFocused;
},
_handleChange: function _handleChange(e) {
this._tabPressed = false;
this.setState({
isKeyboardFocused: false
});
var isInputChecked = React.findDOMNode(this.refs.checkbox).checked;
if (!this.props.hasOwnProperty('checked')) {
this.props.onParentShouldUpdate(isInputChecked);
}
if (this.props.onSwitch) {
this.props.onSwitch(e, isInputChecked);
}
},
// Checkbox inputs only use SPACE to change their state. Using ENTER will
// update the ui but not the input.
_handleWindowKeydown: function _handleWindowKeydown(e) {
if (e.keyCode === KeyCode.TAB) {
this._tabPressed = true;
}
if (e.keyCode === KeyCode.SPACE && this.state.isKeyboardFocused) {
this._handleChange(e);
}
},
_handleWindowKeyup: function _handleWindowKeyup(e) {
if (e.keyCode === KeyCode.SPACE && this.state.isKeyboardFocused) {
this._handleChange(e);
}
},
/**
* 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.
*/
_handleMouseDown: function _handleMouseDown(e) {
//only listen to left clicks
if (e.button === 0) {
this.refs.touchRipple.start(e);
}
},
_handleMouseUp: function _handleMouseUp() {
this.refs.touchRipple.end();
},
_handleMouseLeave: function _handleMouseLeave() {
this.refs.touchRipple.end();
},
_handleTouchStart: function _handleTouchStart(e) {
this.refs.touchRipple.start(e);
},
_handleTouchEnd: function _handleTouchEnd() {
this.refs.touchRipple.end();
},
_handleBlur: function _handleBlur(e) {
this.setState({
isKeyboardFocused: false
});
if (this.props.onBlur) {
this.props.onBlur(e);
}
},
_handleFocus: function _handleFocus(e) {
var _this = this;
//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
});
}
}, 150);
if (this.props.onFocus) {
this.props.onFocus(e);
}
},
_handleResize: function _handleResize() {
this.setState({ parentWidth: this.getEvenWidth() });
}
});
module.exports = EnhancedSwitch;
}).call(this,require('_process'))
},{"./clearfix":15,"./mixins/style-propable":52,"./mixins/window-listenable":54,"./paper":56,"./ripples/focus-ripple":62,"./ripples/touch-ripple":64,"./styles/transitions":75,"./utils/key-code":132,"./utils/unique-id":137,"_process":138,"react":312}],30:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var AutoPrefix = require('./styles/auto-prefix');
var EnhancedTextarea = React.createClass({
displayName: 'EnhancedTextarea',
mixins: [StylePropable],
propTypes: {
onChange: React.PropTypes.func,
onHeightChange: React.PropTypes.func,
textareaStyle: React.PropTypes.object,
rows: React.PropTypes.number
},
getDefaultProps: function getDefaultProps() {
return {
rows: 1
};
},
getInitialState: function getInitialState() {
return {
height: this.props.rows * 24
};
},
componentDidMount: function componentDidMount() {
this._syncHeightWithShadow();
},
getStyles: function getStyles() {
var styles = {
root: {
width: '100%',
resize: 'none',
overflow: 'hidden',
font: 'inherit',
padding: 0
}
};
return styles;
},
render: function render() {
var _props = this.props;
var onChange = _props.onChange;
var onHeightChange = _props.onHeightChange;
var rows = _props.rows;
var style = _props.style;
var textareaStyle = _props.textareaStyle;
var valueLink = _props.valueLink;
var other = _objectWithoutProperties(_props, ['onChange', 'onHeightChange', 'rows', 'style', 'textareaStyle', 'valueLink']);
var styles = this.getStyles().root;
var textAreaStyles = {
width: '100%',
resize: 'none',
overflow: 'hidden',
font: 'inherit',
padding: 0
};
var inputStyles = this.mergeAndPrefix(styles, {
height: this.state.height + 'px'
});
inputStyles = this.mergeAndPrefix(inputStyles, textareaStyle);
// Overflow also needed to here to remove the extra row
// added to textareas in Firefox.
var shadowStyles = this.mergeAndPrefix(textAreaStyles, {
position: 'absolute',
opacity: 0
});
if (this.props.hasOwnProperty('valueLink')) {
other.value = this.props.valueLink.value;
}
if (this.props.disabled) {
style.cursor = 'default';
}
return React.createElement(
'div',
{ style: this.props.style },
React.createElement('textarea', {
ref: 'shadow',
style: AutoPrefix.all(shadowStyles),
tabIndex: '-1',
rows: this.props.rows,
defaultValue: this.props.defaultValue,
readOnly: true,
value: this.props.value,
valueLink: this.props.valueLink }),
React.createElement('textarea', _extends({}, other, {
ref: 'input',
rows: this.props.rows,
style: AutoPrefix.all(inputStyles),
onChange: this._handleChange }))
);
},
getInputNode: function getInputNode() {
return React.findDOMNode(this.refs.input);
},
setValue: function setValue(value) {
this.getInputNode().value = value;
this._syncHeightWithShadow(value);
},
_syncHeightWithShadow: function _syncHeightWithShadow(newValue, e) {
var shadow = React.findDOMNode(this.refs.shadow);
var currentHeight = this.state.height;
var newHeight = undefined;
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 _handleChange(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 componentWillReceiveProps(nextProps) {
if (nextProps.value !== this.props.value) {
this._syncHeightWithShadow(nextProps.value);
}
}
});
module.exports = EnhancedTextarea;
},{"./mixins/style-propable":52,"./styles/auto-prefix":68,"react":312}],31:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var Transitions = require('./styles/transitions');
var Children = require('./utils/children');
var ColorManipulator = require('./utils/color-manipulator');
var ImmutabilityHelper = require('./utils/immutability-helper');
var Typography = require('./styles/typography');
var EnhancedButton = require('./enhanced-button');
var FlatButtonLabel = require('./buttons/flat-button-label');
function validateLabel(props, propName, componentName) {
if (!props.children && !props.label) {
return new Error('Required prop label or children was not ' + 'specified in ' + componentName + '.');
}
}
var FlatButton = React.createClass({
displayName: 'FlatButton',
mixins: [PureRenderMixin],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
disabled: React.PropTypes.bool,
hoverColor: React.PropTypes.string,
label: validateLabel,
labelPosition: React.PropTypes.oneOf(['before', 'after']),
labelStyle: React.PropTypes.object,
onKeyboardFocus: React.PropTypes.func,
onMouseEnter: React.PropTypes.func,
onMouseLeave: React.PropTypes.func,
onTouchStart: React.PropTypes.func,
primary: React.PropTypes.bool,
rippleColor: React.PropTypes.string,
secondary: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
labelStyle: {},
labelPosition: 'before',
onKeyboardFocus: function onKeyboardFocus() {},
onMouseEnter: function onMouseEnter() {},
onMouseLeave: function onMouseLeave() {},
onTouchStart: function onTouchStart() {}
};
},
getInitialState: function getInitialState() {
return {
hovered: false,
isKeyboardFocused: false,
touch: false
};
},
getContextProps: function getContextProps() {
var theme = this.context.muiTheme;
var buttonTheme = theme.component.button;
var flatButtonTheme = theme.component.flatButton;
return {
buttonColor: flatButtonTheme.color,
buttonHeight: buttonTheme.height,
buttonMinWidth: buttonTheme.minWidth,
disabledTextColor: flatButtonTheme.disabledTextColor,
primaryTextColor: flatButtonTheme.primaryTextColor,
secondaryTextColor: flatButtonTheme.secondaryTextColor,
textColor: flatButtonTheme.textColor
};
},
render: function render() {
var _props = this.props;
var children = _props.children;
var disabled = _props.disabled;
var hoverColor = _props.hoverColor;
var label = _props.label;
var labelStyle = _props.labelStyle;
var labelPosition = _props.labelPosition;
var onKeyboardFocus = _props.onKeyboardFocus;
var onMouseLeave = _props.onMouseLeave;
var onMouseEnter = _props.onMouseEnter;
var onTouchStart = _props.onTouchStart;
var primary = _props.primary;
var rippleColor = _props.rippleColor;
var secondary = _props.secondary;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['children', 'disabled', 'hoverColor', 'label', 'labelStyle', 'labelPosition', 'onKeyboardFocus', 'onMouseLeave', 'onMouseEnter', 'onTouchStart', 'primary', 'rippleColor', 'secondary', 'style']);
var contextProps = this.getContextProps();
var defaultColor = disabled ? contextProps.disabledTextColor : primary ? contextProps.primaryTextColor : secondary ? contextProps.secondaryTextColor : contextProps.textColor;
var defaultHoverColor = ColorManipulator.fade(ColorManipulator.lighten(defaultColor, 0.4), 0.15);
var defaultRippleColor = ColorManipulator.fade(defaultColor, 0.8);
var buttonHoverColor = hoverColor || defaultHoverColor;
var buttonRippleColor = rippleColor || defaultRippleColor;
var hovered = (this.state.hovered || this.state.isKeyboardFocused) && !disabled;
var mergedRootStyles = ImmutabilityHelper.merge({
color: defaultColor,
transition: Transitions.easeOut(),
fontSize: Typography.fontStyleButtonFontSize,
letterSpacing: 0,
textTransform: 'uppercase',
fontWeight: Typography.fontWeightMedium,
borderRadius: 2,
userSelect: 'none',
position: 'relative',
overflow: 'hidden',
backgroundColor: hovered ? buttonHoverColor : contextProps.buttonColor,
lineHeight: contextProps.buttonHeight + 'px',
minWidth: contextProps.buttonMinWidth,
padding: 0,
margin: 0,
//This is need so that ripples do not bleed past border radius.
//See: http://stackoverflow.com/questions/17298739
transform: 'translate3d(0, 0, 0)'
}, style);
var labelElement = label ? React.createElement(FlatButtonLabel, { label: label, style: labelStyle }) : undefined;
// Place label before or after children.
var childrenFragment = labelPosition === 'before' ? { labelElement: labelElement, children: children } : { children: children, labelElement: labelElement };
var enhancedButtonChildren = Children.create(childrenFragment);
return React.createElement(
EnhancedButton,
_extends({}, other, {
disabled: disabled,
focusRippleColor: buttonRippleColor,
onKeyboardFocus: this._handleKeyboardFocus,
onMouseLeave: this._handleMouseLeave,
onMouseEnter: this._handleMouseEnter,
onTouchStart: this._handleTouchStart,
style: mergedRootStyles,
touchRippleColor: buttonRippleColor }),
enhancedButtonChildren
);
},
_handleKeyboardFocus: function _handleKeyboardFocus(e, isKeyboardFocused) {
this.setState({ isKeyboardFocused: isKeyboardFocused });
this.props.onKeyboardFocus(e, isKeyboardFocused);
},
_handleMouseEnter: function _handleMouseEnter(e) {
//Cancel hover styles for touch devices
if (!this.state.touch) this.setState({ hovered: true });
this.props.onMouseEnter(e);
},
_handleMouseLeave: function _handleMouseLeave(e) {
this.setState({ hovered: false });
this.props.onMouseLeave(e);
},
_handleTouchStart: function _handleTouchStart(e) {
this.setState({ touch: true });
this.props.onTouchStart(e);
}
});
module.exports = FlatButton;
},{"./buttons/flat-button-label":5,"./enhanced-button":28,"./styles/transitions":75,"./styles/typography":76,"./utils/children":123,"./utils/color-manipulator":124,"./utils/immutability-helper":130,"react/addons":140}],32:[function(require,module,exports){
(function (process){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var ColorManipulator = require('./utils/color-manipulator');
var EnhancedButton = require('./enhanced-button');
var FontIcon = require('./font-icon');
var Paper = require('./paper');
var Children = require('./utils/children');
var getZDepth = function getZDepth(disabled) {
var zDepth = disabled ? 0 : 2;
return {
zDepth: zDepth,
initialZDepth: zDepth
};
};
var FloatingActionButton = React.createClass({
displayName: 'FloatingActionButton',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
backgroundColor: React.PropTypes.string,
disabled: React.PropTypes.bool,
disabledColor: React.PropTypes.string,
iconClassName: React.PropTypes.string,
iconStyle: React.PropTypes.object,
mini: React.PropTypes.bool,
onMouseDown: React.PropTypes.func,
onMouseUp: React.PropTypes.func,
onMouseLeave: React.PropTypes.func,
onTouchEnd: React.PropTypes.func,
onTouchStart: React.PropTypes.func,
secondary: React.PropTypes.bool
},
getInitialState: function getInitialState() {
var zDepth = this.props.disabled ? 0 : 2;
return {
hovered: false,
initialZDepth: zDepth,
touch: false,
zDepth: zDepth
};
},
componentWillMount: function componentWillMount() {
this.setState(getZDepth(this.props.disabled));
},
componentWillReceiveProps: function componentWillReceiveProps(newProps) {
if (newProps.disabled !== this.props.disabled) {
this.setState(getZDepth(newProps.disabled));
}
},
componentDidMount: function componentDidMount() {
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);
}
}
},
_getBackgroundColor: function _getBackgroundColor() {
return this.props.disabled ? this.props.disabledColor || this.getTheme().disabledColor : this.props.backgroundColor ? this.props.backgroundColor : this.props.secondary ? this.getTheme().secondaryColor : this.getTheme().color;
},
getTheme: function getTheme() {
return this.context.muiTheme.component.floatingActionButton;
},
_getIconColor: function _getIconColor() {
return this.props.disabled ? this.getTheme().disabledTextColor : this.props.secondary ? this.getTheme().secondaryIconColor : this.getTheme().iconColor;
},
getStyles: function getStyles() {
var themeVariables = this.context.muiTheme.component.floatingActionButton;
var styles = {
root: {
transition: Transitions.easeOut(),
display: 'inline-block'
},
container: {
transition: Transitions.easeOut(),
position: 'relative',
height: themeVariables.buttonSize,
width: themeVariables.buttonSize,
padding: 0,
overflow: 'hidden',
backgroundColor: this._getBackgroundColor(),
borderRadius: '50%',
textAlign: 'center',
verticalAlign: 'bottom',
//This is need so that ripples do not bleed
//past border radius.
//See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
transform: 'translate3d(0, 0, 0)'
},
containerWhenMini: {
height: themeVariables.miniSize,
width: themeVariables.miniSize
},
overlay: {
transition: Transitions.easeOut(),
top: 0
},
overlayWhenHovered: {
backgroundColor: ColorManipulator.fade(this._getIconColor(), 0.4)
},
icon: {
height: themeVariables.buttonSize,
lineHeight: themeVariables.buttonSize + 'px',
fill: themeVariables.iconColor,
color: this._getIconColor()
},
iconWhenMini: {
height: themeVariables.miniSize,
lineHeight: themeVariables.miniSize + 'px'
}
};
return styles;
},
render: function render() {
var _props = this.props;
var disabled = _props.disabled;
var mini = _props.mini;
var secondary = _props.secondary;
var iconStyle = _props.iconStyle;
var iconClassName = _props.iconClassName;
var other = _objectWithoutProperties(_props, ['disabled', 'mini', 'secondary', 'iconStyle', 'iconClassName']);
var styles = this.getStyles();
var iconElement = undefined;
if (iconClassName) {
iconElement = React.createElement(FontIcon, {
className: iconClassName,
style: this.mergeAndPrefix(styles.icon, mini && styles.iconWhenMini, iconStyle) });
}
var children = Children.extend(this.props.children, {
style: this.mergeAndPrefix(styles.icon, mini && styles.iconWhenMini, iconStyle)
});
var buttonEventHandlers = disabled ? null : {
onMouseDown: this._handleMouseDown,
onMouseUp: this._handleMouseUp,
onMouseLeave: this._handleMouseLeave,
onMouseEnter: this._handleMouseEnter,
onTouchStart: this._handleTouchStart,
onTouchEnd: this._handleTouchEnd,
onKeyboardFocus: this._handleKeyboardFocus
};
return React.createElement(
Paper,
{
style: this.mergeAndPrefix(styles.root, this.props.style),
zDepth: this.state.zDepth,
circle: true },
React.createElement(
EnhancedButton,
_extends({}, other, buttonEventHandlers, {
ref: 'container',
disabled: disabled,
style: this.mergeAndPrefix(styles.container, this.props.mini && styles.containerWhenMini),
focusRippleColor: styles.icon.color,
touchRippleColor: styles.icon.color }),
React.createElement(
'div',
{
ref: 'overlay',
style: this.mergeAndPrefix(styles.overlay, this.state.hovered && !this.props.disabled && styles.overlayWhenHovered) },
iconElement,
children
)
)
);
},
_handleMouseDown: function _handleMouseDown(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 _handleMouseUp(e) {
this.setState({ zDepth: this.state.initialZDepth });
if (this.props.onMouseUp) this.props.onMouseUp(e);
},
_handleMouseLeave: function _handleMouseLeave(e) {
if (!this.refs.container.isKeyboardFocused()) this.setState({ zDepth: this.state.initialZDepth, hovered: false });
if (this.props.onMouseLeave) this.props.onMouseLeave(e);
},
_handleMouseEnter: function _handleMouseEnter(e) {
if (!this.refs.container.isKeyboardFocused() && !this.state.touch) {
this.setState({ hovered: true });
}
if (this.props.onMouseEnter) this.props.onMouseEnter(e);
},
_handleTouchStart: function _handleTouchStart(e) {
this.setState({
touch: true,
zDepth: this.state.initialZDepth + 1
});
if (this.props.onTouchStart) this.props.onTouchStart(e);
},
_handleTouchEnd: function _handleTouchEnd(e) {
this.setState({ zDepth: this.state.initialZDepth });
if (this.props.onTouchEnd) this.props.onTouchEnd(e);
},
_handleKeyboardFocus: function _handleKeyboardFocus(e, keyboardFocused) {
if (keyboardFocused && !this.props.disabled) {
this.setState({ zDepth: this.state.initialZDepth + 1 });
React.findDOMNode(this.refs.overlay).style.backgroundColor = ColorManipulator.fade(this.getStyles().icon.color, 0.4);
} else if (!this.state.hovered) {
this.setState({ zDepth: this.state.initialZDepth });
React.findDOMNode(this.refs.overlay).style.backgroundColor = 'transparent';
}
}
});
module.exports = FloatingActionButton;
}).call(this,require('_process'))
},{"./enhanced-button":28,"./font-icon":33,"./mixins/style-propable":52,"./paper":56,"./styles/transitions":75,"./utils/children":123,"./utils/color-manipulator":124,"_process":138,"react":312}],33:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var FontIcon = React.createClass({
displayName: 'FontIcon',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
color: React.PropTypes.string,
hoverColor: React.PropTypes.string,
onMouseLeave: React.PropTypes.func,
onMouseEnter: React.PropTypes.func
},
getInitialState: function getInitialState() {
return {
hovered: false
};
},
render: function render() {
var _props = this.props;
var color = _props.color;
var hoverColor = _props.hoverColor;
var onMouseLeave = _props.onMouseLeave;
var onMouseEnter = _props.onMouseEnter;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['color', 'hoverColor', 'onMouseLeave', 'onMouseEnter', 'style']);
var spacing = this.context.muiTheme.spacing;
var offColor = color ? color : style && style.color ? style.color : this.context.muiTheme.palette.textColor;
var onColor = hoverColor ? hoverColor : offColor;
var mergedStyles = this.mergeAndPrefix({
position: 'relative',
fontSize: spacing.iconSize,
display: 'inline-block',
userSelect: 'none',
transition: Transitions.easeOut()
}, style, {
color: this.state.hovered ? onColor : offColor
});
return React.createElement('span', _extends({}, other, {
onMouseLeave: this._handleMouseLeave,
onMouseEnter: this._handleMouseEnter,
style: mergedStyles }));
},
_handleMouseLeave: function _handleMouseLeave(e) {
// hover is needed only when a hoverColor is defined
if (this.props.hoverColor !== undefined) this.setState({ hovered: false });
if (this.props.onMouseLeave) {
this.props.onMouseLeave(e);
}
},
_handleMouseEnter: function _handleMouseEnter(e) {
// hover is needed only when a hoverColor is defined
if (this.props.hoverColor !== undefined) this.setState({ hovered: true });
if (this.props.onMouseEnter) {
this.props.onMouseEnter(e);
}
}
});
module.exports = FontIcon;
},{"./mixins/style-propable":52,"./styles/transitions":75,"react":312}],34:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var PropTypes = require('./utils/prop-types');
var EnhancedButton = require('./enhanced-button');
var FontIcon = require('./font-icon');
var Tooltip = require('./tooltip');
var Children = require('./utils/children');
var IconButton = React.createClass({
displayName: 'IconButton',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
iconClassName: React.PropTypes.string,
iconStyle: React.PropTypes.object,
onBlur: React.PropTypes.func,
onFocus: React.PropTypes.func,
onKeyboardFocus: React.PropTypes.func,
tooltip: React.PropTypes.string,
tooltipStyles: React.PropTypes.object,
tooltipPosition: PropTypes.cornersAndCenter,
touch: React.PropTypes.bool
},
getInitialState: function getInitialState() {
return {
tooltipShown: false
};
},
getDefaultProps: function getDefaultProps() {
return {
iconStyle: {},
tooltipPosition: 'bottom-center'
};
},
getStyles: function getStyles() {
var spacing = this.context.muiTheme.spacing;
var palette = this.context.muiTheme.palette;
var styles = {
root: {
position: 'relative',
boxSizing: 'border-box',
transition: Transitions.easeOut(),
padding: spacing.iconSize / 2,
width: spacing.iconSize * 2,
height: spacing.iconSize * 2,
fontSize: 0
},
tooltip: {
boxSizing: 'border-box'
},
icon: {
color: palette.textColor,
fill: palette.textColor
},
overlay: {
position: 'relative',
top: 0,
width: '100%',
height: '100%',
background: palette.disabledColor
},
disabled: {
color: palette.disabledColor,
fill: palette.disabledColor
}
};
return styles;
},
render: function render() {
var _props = this.props;
var disabled = _props.disabled;
var iconClassName = _props.iconClassName;
var tooltip = _props.tooltip;
var touch = _props.touch;
var iconStyle = _props.iconStyle;
var other = _objectWithoutProperties(_props, ['disabled', 'iconClassName', 'tooltip', 'touch', 'iconStyle']);
var fonticon = undefined;
var styles = this.getStyles();
var tooltipPosition = this.props.tooltipPosition.split('-');
var tooltipElement = tooltip ? React.createElement(Tooltip, {
ref: 'tooltip',
label: tooltip,
show: this.state.tooltipShown,
touch: touch,
style: this.mergeStyles(styles.tooltip, this.props.tooltipStyles),
verticalPosition: tooltipPosition[0],
horizontalPosition: tooltipPosition[1] }) : null;
if (iconClassName) {
var iconHoverColor = iconStyle.iconHoverColor;
var iconStyleFontIcon = _objectWithoutProperties(iconStyle, ['iconHoverColor']);
fonticon = React.createElement(
FontIcon,
{
className: iconClassName,
hoverColor: disabled ? null : iconHoverColor,
style: this.mergeStyles(styles.icon, disabled ? styles.disabled : {}, iconStyleFontIcon) },
this.props.children
);
}
var childrenStyle = disabled ? this.mergeStyles(iconStyle, styles.disabled) : iconStyle;
return React.createElement(
EnhancedButton,
_extends({}, other, {
ref: 'button',
centerRipple: true,
disabled: disabled,
style: this.mergeStyles(styles.root, this.props.style),
onBlur: this._handleBlur,
onFocus: this._handleFocus,
onMouseLeave: this._handleMouseLeave,
onMouseEnter: this._handleMouseEnter,
onKeyboardFocus: this._handleKeyboardFocus }),
tooltipElement,
fonticon,
Children.extend(this.props.children, {
style: childrenStyle
})
);
},
setKeyboardFocus: function setKeyboardFocus() {
this.refs.button.setKeyboardFocus();
},
_showTooltip: function _showTooltip() {
if (!this.props.disabled && this.props.tooltip) {
this.setState({ tooltipShown: true });
}
},
_hideTooltip: function _hideTooltip() {
if (this.props.tooltip) this.setState({ tooltipShown: false });
},
_handleBlur: function _handleBlur(e) {
this._hideTooltip();
if (this.props.onBlur) this.props.onBlur(e);
},
_handleFocus: function _handleFocus(e) {
this._showTooltip();
if (this.props.onFocus) this.props.onFocus(e);
},
_handleMouseLeave: function _handleMouseLeave(e) {
if (!this.refs.button.isKeyboardFocused()) this._hideTooltip();
if (this.props.onMouseLeave) this.props.onMouseLeave(e);
},
_handleMouseEnter: function _handleMouseEnter(e) {
this._showTooltip();
if (this.props.onMouseEnter) this.props.onMouseEnter(e);
},
_handleKeyboardFocus: function _handleKeyboardFocus(e, keyboardFocused) {
if (keyboardFocused && !this.props.disabled) {
this._showTooltip();
if (this.props.onFocus) this.props.onFocus(e);
} else if (!this.state.hovered) {
this._hideTooltip();
if (this.props.onBlur) this.props.onBlur(e);
}
if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, keyboardFocused);
}
});
module.exports = IconButton;
},{"./enhanced-button":28,"./font-icon":33,"./mixins/style-propable":52,"./styles/transitions":75,"./tooltip":118,"./utils/children":123,"./utils/prop-types":135,"react":312}],35:[function(require,module,exports){
'use strict';
module.exports = {
AppBar: require('./app-bar'),
AppCanvas: require('./app-canvas'),
Avatar: require('./avatar'),
BeforeAfterWrapper: require('./before-after-wrapper'),
Card: require('./card/card'),
CardActions: require('./card/card-actions'),
CardExpandable: require('./card/card-expandable'),
CardHeader: require('./card/card-header'),
CardMedia: require('./card/card-media'),
CardText: require('./card/card-text'),
CardTitle: require('./card/card-title'),
Checkbox: require('./checkbox'),
CircularProgress: require('./circular-progress'),
ClearFix: require('./clearfix'),
DatePicker: require('./date-picker/date-picker'),
DatePickerDialog: require('./date-picker/date-picker-dialog'),
Dialog: require('./dialog'),
DropDownIcon: require('./drop-down-icon'),
DropDownMenu: require('./drop-down-menu'),
EnhancedButton: require('./enhanced-button'),
FlatButton: require('./flat-button'),
FloatingActionButton: require('./floating-action-button'),
FontIcon: require('./font-icon'),
IconButton: require('./icon-button'),
IconMenu: require('./menus/icon-menu'),
LeftNav: require('./left-nav'),
LinearProgress: require('./linear-progress'),
List: require('./lists/list'),
ListDivider: require('./lists/list-divider'),
ListItem: require('./lists/list-item'),
Menu: require('./menu/menu'),
MenuItem: require('./menu/menu-item'),
Mixins: require('./mixins/'),
Overlay: require('./overlay'),
Paper: require('./paper'),
RadioButton: require('./radio-button'),
RadioButtonGroup: require('./radio-button-group'),
RaisedButton: require('./raised-button'),
RefreshIndicator: require('./refresh-indicator'),
Ripples: require('./ripples/'),
SelectField: require('./select-field'),
Slider: require('./slider'),
SvgIcon: require('./svg-icon'),
Icons: {
NavigationMenu: require('./svg-icons/navigation/menu'),
NavigationChevronLeft: require('./svg-icons/navigation/chevron-left'),
NavigationChevronRight: require('./svg-icons/navigation/chevron-right')
},
Styles: require('./styles/'),
Snackbar: require('./snackbar'),
Tab: require('./tabs/tab'),
Tabs: require('./tabs/tabs'),
Table: require('./table/table'),
TableBody: require('./table/table-body'),
TableFooter: require('./table/table-footer'),
TableHeader: require('./table/table-header'),
TableHeaderColumn: require('./table/table-header-column'),
TableRow: require('./table/table-row'),
TableRowColumn: require('./table/table-row-column'),
Theme: require('./theme'),
Toggle: require('./toggle'),
TimePicker: require('./time-picker'),
TextField: require('./text-field'),
Toolbar: require('./toolbar/toolbar'),
ToolbarGroup: require('./toolbar/toolbar-group'),
ToolbarSeparator: require('./toolbar/toolbar-separator'),
ToolbarTitle: require('./toolbar/toolbar-title'),
Tooltip: require('./tooltip'),
Utils: require('./utils/')
};
},{"./app-bar":1,"./app-canvas":2,"./avatar":3,"./before-after-wrapper":4,"./card/card":12,"./card/card-actions":6,"./card/card-expandable":7,"./card/card-header":8,"./card/card-media":9,"./card/card-text":10,"./card/card-title":11,"./checkbox":13,"./circular-progress":14,"./clearfix":15,"./date-picker/date-picker":22,"./date-picker/date-picker-dialog":21,"./dialog":25,"./drop-down-icon":26,"./drop-down-menu":27,"./enhanced-button":28,"./flat-button":31,"./floating-action-button":32,"./font-icon":33,"./icon-button":34,"./left-nav":37,"./linear-progress":38,"./lists/list":41,"./lists/list-divider":39,"./lists/list-item":40,"./menu/menu":45,"./menu/menu-item":44,"./menus/icon-menu":47,"./mixins/":51,"./overlay":55,"./paper":56,"./radio-button":58,"./radio-button-group":57,"./raised-button":59,"./refresh-indicator":60,"./ripples/":63,"./select-field":65,"./slider":66,"./snackbar":67,"./styles/":70,"./svg-icon":77,"./svg-icons/navigation/chevron-left":84,"./svg-icons/navigation/chevron-right":85,"./svg-icons/navigation/menu":86,"./table/table":97,"./table/table-body":91,"./table/table-footer":92,"./table/table-header":94,"./table/table-header-column":93,"./table/table-row":96,"./table/table-row-column":95,"./tabs/tab":98,"./tabs/tabs":100,"./text-field":101,"./theme":102,"./time-picker":109,"./toggle":113,"./toolbar/toolbar":117,"./toolbar/toolbar-group":114,"./toolbar/toolbar-separator":115,"./toolbar/toolbar-title":116,"./tooltip":118,"./utils/":131}],36:[function(require,module,exports){
'use strict';
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var Transitions = require('./styles/transitions');
var StylePropable = require('./mixins/style-propable');
var InkBar = React.createClass({
displayName: 'InkBar',
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
color: React.PropTypes.string,
left: React.PropTypes.string.isRequired,
width: React.PropTypes.string.isRequired
},
mixins: [StylePropable],
render: function render() {
var _props = this.props;
var color = _props.color;
var left = _props.left;
var width = _props.width;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['color', 'left', 'width', 'style']);
var colorStyle = color ? { backgroundColor: color } : undefined;
var styles = this.mergeAndPrefix({
left: left,
width: width,
bottom: 0,
display: 'block',
backgroundColor: this.context.muiTheme.component.inkBar.backgroundColor,
height: 2,
marginTop: -2,
position: 'relative',
transition: Transitions.easeOut('1s', 'left')
}, this.props.style, colorStyle);
return React.createElement(
'div',
{ style: styles },
' '
);
}
});
module.exports = InkBar;
},{"./mixins/style-propable":52,"./styles/transitions":75,"react":312}],37:[function(require,module,exports){
'use strict';
var React = require('react');
var KeyCode = require('./utils/key-code');
var StylePropable = require('./mixins/style-propable');
var AutoPrefix = require('./styles/auto-prefix');
var Transitions = require('./styles/transitions');
var WindowListenable = require('./mixins/window-listenable');
var Overlay = require('./overlay');
var Paper = require('./paper');
var Menu = require('./menu/menu');
var openNavEventHandler = null;
var LeftNav = React.createClass({
displayName: 'LeftNav',
mixins: [StylePropable, WindowListenable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
className: React.PropTypes.string,
disableSwipeToOpen: React.PropTypes.bool,
docked: React.PropTypes.bool,
header: React.PropTypes.element,
menuItems: React.PropTypes.array.isRequired,
onChange: React.PropTypes.func,
onNavOpen: React.PropTypes.func,
onNavClose: React.PropTypes.func,
openRight: React.PropTypes.bool,
selectedIndex: React.PropTypes.number,
menuItemClassName: React.PropTypes.string,
menuItemClassNameSubheader: React.PropTypes.string,
menuItemClassNameLink: React.PropTypes.string
},
windowListeners: {
'keyup': '_onWindowKeyUp',
'resize': '_onWindowResize'
},
getDefaultProps: function getDefaultProps() {
return {
disableSwipeToOpen: false,
docked: true
};
},
getInitialState: function getInitialState() {
this._maybeSwiping = false;
this._touchStartX = null;
this._touchStartY = null;
this._swipeStartX = null;
return {
open: this.props.docked,
swiping: null
};
},
componentDidMount: function componentDidMount() {
this._updateMenuHeight();
this._enableSwipeHandling();
},
componentDidUpdate: function componentDidUpdate() {
this._updateMenuHeight();
this._enableSwipeHandling();
},
componentWillUnmount: function componentWillUnmount() {
this._disableSwipeHandling();
},
toggle: function toggle() {
this.setState({ open: !this.state.open });
return this;
},
close: function close() {
this.setState({ open: false });
if (this.props.onNavClose) this.props.onNavClose();
return this;
},
open: function open() {
this.setState({ open: true });
if (this.props.onNavOpen) this.props.onNavOpen();
return this;
},
getThemePalette: function getThemePalette() {
return this.context.muiTheme.palette;
},
getTheme: function getTheme() {
return this.context.muiTheme.component.leftNav;
},
getStyles: function getStyles() {
var x = this._getTranslateMultiplier() * (this.state.open ? 0 : this._getMaxTranslateX());
var styles = {
root: {
height: '100%',
width: this.getTheme().width,
position: 'fixed',
zIndex: 10,
left: 0,
top: 0,
transform: 'translate3d(' + x + 'px, 0, 0)',
transition: !this.state.swiping && Transitions.easeOut(),
backgroundColor: this.getTheme().color,
overflow: 'hidden'
},
menu: {
overflowY: 'auto',
overflowX: 'hidden',
height: '100%',
borderRadius: '0'
},
menuItem: {
height: this.context.muiTheme.spacing.desktopLeftNavMenuItemHeight,
lineHeight: this.context.muiTheme.spacing.desktopLeftNavMenuItemHeight + 'px'
},
rootWhenOpenRight: {
left: 'auto',
right: 0
}
};
styles.menuItemLink = this.mergeAndPrefix(styles.menuItem, {
display: 'block',
textDecoration: 'none',
color: this.getThemePalette().textColor
});
styles.menuItemSubheader = this.mergeAndPrefix(styles.menuItem, {
overflow: 'hidden'
});
return styles;
},
render: function render() {
var selectedIndex = this.props.selectedIndex;
var overlay = undefined;
var styles = this.getStyles();
if (!this.props.docked) {
overlay = React.createElement(Overlay, {
ref: 'overlay',
show: this.state.open || !!this.state.swiping,
transitionEnabled: !this.state.swiping,
onTouchTap: this._onOverlayTouchTap
});
}
return React.createElement(
'div',
{ className: this.props.className },
overlay,
React.createElement(
Paper,
{
ref: 'clickAwayableElement',
zDepth: 2,
rounded: false,
transitionEnabled: !this.state.swiping,
style: this.mergeAndPrefix(styles.root, this.props.openRight && styles.rootWhenOpenRight, this.props.style) },
this.props.header,
React.createElement(Menu, {
ref: 'menuItems',
style: this.mergeAndPrefix(styles.menu),
zDepth: 0,
menuItems: this.props.menuItems,
menuItemStyle: this.mergeAndPrefix(styles.menuItem),
menuItemStyleLink: this.mergeAndPrefix(styles.menuItemLink),
menuItemStyleSubheader: this.mergeAndPrefix(styles.menuItemSubheader),
menuItemClassName: this.props.menuItemClassName,
menuItemClassNameSubheader: this.props.menuItemClassNameSubheader,
menuItemClassNameLink: this.props.menuItemClassNameLink,
selectedIndex: selectedIndex,
onItemTap: this._onMenuItemClick })
)
);
},
_updateMenuHeight: function _updateMenuHeight() {
if (this.props.header) {
var container = React.findDOMNode(this.refs.clickAwayableElement);
var menu = React.findDOMNode(this.refs.menuItems);
var menuHeight = container.clientHeight - menu.offsetTop;
menu.style.height = menuHeight + 'px';
}
},
_onMenuItemClick: function _onMenuItemClick(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 _onOverlayTouchTap() {
this.close();
},
_onWindowKeyUp: function _onWindowKeyUp(e) {
if (e.keyCode === KeyCode.ESC && !this.props.docked && this.state.open) {
this.close();
}
},
_onWindowResize: function _onWindowResize() {
this._updateMenuHeight();
},
_getMaxTranslateX: function _getMaxTranslateX() {
return this.getTheme().width + 10;
},
_getTranslateMultiplier: function _getTranslateMultiplier() {
return this.props.openRight ? 1 : -1;
},
_enableSwipeHandling: function _enableSwipeHandling() {
if (!this.props.docked) {
document.body.addEventListener('touchstart', this._onBodyTouchStart);
if (!openNavEventHandler) {
openNavEventHandler = this._onBodyTouchStart;
}
} else {
this._disableSwipeHandling();
}
},
_disableSwipeHandling: function _disableSwipeHandling() {
document.body.removeEventListener('touchstart', this._onBodyTouchStart);
if (openNavEventHandler === this._onBodyTouchStart) {
openNavEventHandler = null;
}
},
_onBodyTouchStart: function _onBodyTouchStart(e) {
if (!this.state.open && (openNavEventHandler !== this._onBodyTouchStart || this.props.disableSwipeToOpen)) {
return;
}
var touchStartX = e.touches[0].pageX;
var touchStartY = e.touches[0].pageY;
this._maybeSwiping = true;
this._touchStartX = touchStartX;
this._touchStartY = touchStartY;
document.body.addEventListener('touchmove', this._onBodyTouchMove);
document.body.addEventListener('touchend', this._onBodyTouchEnd);
document.body.addEventListener('touchcancel', this._onBodyTouchEnd);
},
_setPosition: function _setPosition(translateX) {
var leftNav = React.findDOMNode(this.refs.clickAwayableElement);
leftNav.style[AutoPrefix.single('transform')] = 'translate3d(' + this._getTranslateMultiplier() * translateX + 'px, 0, 0)';
this.refs.overlay.setOpacity(1 - translateX / this._getMaxTranslateX());
},
_getTranslateX: function _getTranslateX(currentX) {
return Math.min(Math.max(this.state.swiping === 'closing' ? this._getTranslateMultiplier() * (currentX - this._swipeStartX) : this._getMaxTranslateX() - this._getTranslateMultiplier() * (this._swipeStartX - currentX), 0), this._getMaxTranslateX());
},
_onBodyTouchMove: function _onBodyTouchMove(e) {
var currentX = e.touches[0].pageX;
var currentY = e.touches[0].pageY;
if (this.state.swiping) {
e.preventDefault();
this._setPosition(this._getTranslateX(currentX));
} else if (this._maybeSwiping) {
var dXAbs = Math.abs(currentX - this._touchStartX);
var dYAbs = Math.abs(currentY - this._touchStartY);
// If the user has moved his thumb ten pixels in either direction,
// we can safely make an assumption about whether he was intending
// to swipe or scroll.
var threshold = 10;
if (dXAbs > threshold && dYAbs <= threshold) {
this._swipeStartX = currentX;
this.setState({
swiping: this.state.open ? 'closing' : 'opening'
});
this._setPosition(this._getTranslateX(currentX));
} else if (dXAbs <= threshold && dYAbs > threshold) {
this._onBodyTouchEnd();
}
}
},
_onBodyTouchEnd: function _onBodyTouchEnd(e) {
if (this.state.swiping) {
var currentX = e.changedTouches[0].pageX;
var translateRatio = this._getTranslateX(currentX) / this._getMaxTranslateX();
this._maybeSwiping = false;
var swiping = this.state.swiping;
this.setState({
swiping: null
});
// We have to open or close after setting swiping to null,
// because only then CSS transition is enabled.
if (translateRatio > 0.5) {
if (swiping === 'opening') {
this._setPosition(this._getMaxTranslateX());
} else {
this.close();
}
} else {
if (swiping === 'opening') {
this.open();
} else {
this._setPosition(0);
}
}
} else {
this._maybeSwiping = false;
}
document.body.removeEventListener('touchmove', this._onBodyTouchMove);
document.body.removeEventListener('touchend', this._onBodyTouchEnd);
document.body.removeEventListener('touchcancel', this._onBodyTouchEnd);
}
});
module.exports = LeftNav;
},{"./menu/menu":45,"./mixins/style-propable":52,"./mixins/window-listenable":54,"./overlay":55,"./paper":56,"./styles/auto-prefix":68,"./styles/transitions":75,"./utils/key-code":132,"react":312}],38:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var Transitions = require("./styles/transitions");
var LinearProgress = React.createClass({
displayName: 'LinearProgress',
mixins: [StylePropable],
propTypes: {
mode: React.PropTypes.oneOf(["determinate", "indeterminate"]),
value: React.PropTypes.number,
min: React.PropTypes.number,
max: React.PropTypes.number
},
contextTypes: {
muiTheme: React.PropTypes.object
},
_getRelativeValue: function _getRelativeValue() {
var value = this.props.value;
var min = this.props.min;
var max = this.props.max;
var clampedValue = Math.min(Math.max(min, value), max);
var rangeValue = max - min;
var relValue = Math.round(clampedValue / rangeValue * 10000) / 10000;
return relValue * 100;
},
componentDidMount: function componentDidMount() {
var _this = this;
var bar1 = React.findDOMNode(this.refs.bar1);
var bar2 = React.findDOMNode(this.refs.bar2);
this._barUpdate(0, bar1, [[-35, 100], [100, -90]]);
setTimeout(function () {
_this._barUpdate(0, bar2, [[-200, 100], [107, -8]]);
}, 850);
},
_barUpdate: function _barUpdate(step, barElement, stepValues) {
step = step || 0;
step %= 4;
setTimeout(this._barUpdate.bind(this, step + 1, barElement, stepValues), 420);
if (!this.isMounted()) return;
if (this.props.mode !== "indeterminate") return;
if (step === 0) {
barElement.style.left = stepValues[0][0] + "%";
barElement.style.right = stepValues[0][1] + "%";
} else if (step === 1) {
barElement.style.transitionDuration = "840ms";
} else if (step === 2) {
barElement.style.left = stepValues[1][0] + "%";
barElement.style.right = stepValues[1][1] + "%";
} else if (step === 3) {
barElement.style.transitionDuration = "0ms";
}
},
getDefaultProps: function getDefaultProps() {
return {
mode: "indeterminate",
value: 0,
min: 0,
max: 100
};
},
getTheme: function getTheme() {
return this.context.muiTheme.palette;
},
getStyles: function getStyles() {
var styles = {
root: {
position: "relative",
height: 4,
display: "block",
width: "100%",
backgroundColor: this.getTheme().primary3Color,
borderRadius: 2,
margin: 0,
overflow: "hidden"
},
bar: {
height: "100%"
},
barFragment1: {},
barFragment2: {}
};
if (this.props.mode === "indeterminate") {
styles.barFragment1 = {
position: "absolute",
backgroundColor: this.getTheme().primary1Color,
top: 0,
left: 0,
bottom: 0,
transition: Transitions.create("all", "840ms", null, "cubic-bezier(0.650, 0.815, 0.735, 0.395)")
};
styles.barFragment2 = {
position: "absolute",
backgroundColor: this.getTheme().primary1Color,
top: 0,
left: 0,
bottom: 0,
transition: Transitions.create("all", "840ms", null, "cubic-bezier(0.165, 0.840, 0.440, 1.000)")
};
} else {
styles.bar.backgroundColor = this.getTheme().primary1Color;
styles.bar.transition = Transitions.create("width", ".3s", null, "linear");
styles.bar.width = this._getRelativeValue() + "%";
}
return styles;
},
render: function render() {
var _props = this.props;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['style']);
var styles = this.getStyles();
return React.createElement(
'div',
_extends({}, other, { style: this.mergeAndPrefix(styles.root, style) }),
React.createElement(
'div',
{ style: this.mergeAndPrefix(styles.bar) },
React.createElement('div', { ref: 'bar1', style: this.mergeAndPrefix(styles.barFragment1) }),
React.createElement('div', { ref: 'bar2', style: this.mergeAndPrefix(styles.barFragment2) })
)
);
}
});
module.exports = LinearProgress;
},{"./mixins/style-propable":52,"./styles/transitions":75,"react":312}],39:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var StylePropable = require('../mixins/style-propable');
var ListDivider = React.createClass({
displayName: 'ListDivider',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
inset: React.PropTypes.bool
},
render: function render() {
var _props = this.props;
var inset = _props.inset;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['inset', 'style']);
var mergedStyles = this.mergeAndPrefix({
margin: 0,
marginTop: -1,
marginLeft: inset ? 72 : 0,
height: 1,
border: 'none',
backgroundColor: this.context.muiTheme.palette.borderColor
}, style);
return React.createElement('hr', _extends({}, other, { style: mergedStyles }));
}
});
module.exports = ListDivider;
},{"../mixins/style-propable":52,"react/addons":140}],40:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var ColorManipulator = require('../utils/color-manipulator');
var StylePropable = require('../mixins/style-propable');
var Colors = require('../styles/colors');
var Transitions = require('../styles/transitions');
var Typography = require('../styles/typography');
var EnhancedButton = require('../enhanced-button');
var IconButton = require('../icon-button');
var OpenIcon = require('../svg-icons/navigation/arrow-drop-up');
var CloseIcon = require('../svg-icons/navigation/arrow-drop-down');
var NestedList = require('./nested-list');
var ListItem = React.createClass({
displayName: 'ListItem',
mixins: [PureRenderMixin, StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
autoGenerateNestedIndicator: React.PropTypes.bool,
disabled: React.PropTypes.bool,
disableKeyboardFocus: React.PropTypes.bool,
initiallyOpen: React.PropTypes.bool,
innerDivStyle: React.PropTypes.object,
insetChildren: React.PropTypes.bool,
innerStyle: React.PropTypes.object,
leftAvatar: React.PropTypes.element,
leftCheckbox: React.PropTypes.element,
leftIcon: React.PropTypes.element,
nestedLevel: React.PropTypes.number,
nestedItems: React.PropTypes.arrayOf(React.PropTypes.element),
onKeyboardFocus: React.PropTypes.func,
onMouseEnter: React.PropTypes.func,
onMouseLeave: React.PropTypes.func,
onNestedListToggle: React.PropTypes.func,
onTouchStart: React.PropTypes.func,
rightAvatar: React.PropTypes.element,
rightIcon: React.PropTypes.element,
rightIconButton: React.PropTypes.element,
rightToggle: React.PropTypes.element,
primaryText: React.PropTypes.node,
secondaryText: React.PropTypes.node,
secondaryTextLines: React.PropTypes.oneOf([1, 2])
},
getDefaultProps: function getDefaultProps() {
return {
autoGenerateNestedIndicator: true,
initiallyOpen: false,
nestedItems: [],
nestedLevel: 0,
onKeyboardFocus: function onKeyboardFocus() {},
onMouseEnter: function onMouseEnter() {},
onMouseLeave: function onMouseLeave() {},
onNestedListToggle: function onNestedListToggle() {},
onTouchStart: function onTouchStart() {},
secondaryTextLines: 1
};
},
getInitialState: function getInitialState() {
return {
hovered: false,
isKeyboardFocused: false,
open: this.props.initiallyOpen,
rightIconButtonHovered: false,
rightIconButtonKeyboardFocused: false,
touch: false
};
},
render: function render() {
var _props = this.props;
var autoGenerateNestedIndicator = _props.autoGenerateNestedIndicator;
var children = _props.children;
var disabled = _props.disabled;
var disableKeyboardFocus = _props.disableKeyboardFocus;
var innerDivStyle = _props.innerDivStyle;
var insetChildren = _props.insetChildren;
var leftAvatar = _props.leftAvatar;
var leftCheckbox = _props.leftCheckbox;
var leftIcon = _props.leftIcon;
var nestedItems = _props.nestedItems;
var nestedLevel = _props.nestedLevel;
var onKeyboardFocus = _props.onKeyboardFocus;
var onMouseLeave = _props.onMouseLeave;
var onMouseEnter = _props.onMouseEnter;
var onTouchStart = _props.onTouchStart;
var rightAvatar = _props.rightAvatar;
var rightIcon = _props.rightIcon;
var rightIconButton = _props.rightIconButton;
var rightToggle = _props.rightToggle;
var primaryText = _props.primaryText;
var secondaryText = _props.secondaryText;
var secondaryTextLines = _props.secondaryTextLines;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['autoGenerateNestedIndicator', 'children', 'disabled', 'disableKeyboardFocus', 'innerDivStyle', 'insetChildren', 'leftAvatar', 'leftCheckbox', 'leftIcon', 'nestedItems', 'nestedLevel', 'onKeyboardFocus', 'onMouseLeave', 'onMouseEnter', 'onTouchStart', 'rightAvatar', 'rightIcon', 'rightIconButton', 'rightToggle', 'primaryText', 'secondaryText', 'secondaryTextLines', 'style']);
var textColor = this.context.muiTheme.palette.textColor;
var hoverColor = ColorManipulator.fade(textColor, 0.1);
var singleAvatar = !secondaryText && (leftAvatar || rightAvatar);
var singleNoAvatar = !secondaryText && !(leftAvatar || rightAvatar);
var twoLine = secondaryText && secondaryTextLines === 1;
var threeLine = secondaryText && secondaryTextLines > 1;
var hasCheckbox = leftCheckbox || rightToggle;
var styles = {
root: {
backgroundColor: (this.state.isKeyboardFocused || this.state.hovered) && !this.state.rightIconButtonHovered && !this.state.rightIconButtonKeyboardFocused ? hoverColor : null,
color: textColor,
display: 'block',
fontSize: 16,
lineHeight: '16px',
position: 'relative',
transition: Transitions.easeOut()
},
//This inner div is needed so that ripples will span the entire container
innerDiv: {
marginLeft: nestedLevel * this.context.muiTheme.component.listItem.nestedLevelDepth,
paddingLeft: leftIcon || leftAvatar || leftCheckbox || insetChildren ? 72 : 16,
paddingRight: rightIcon || rightAvatar || rightIconButton ? 56 : rightToggle ? 72 : 16,
paddingBottom: singleAvatar ? 20 : 16,
paddingTop: singleNoAvatar || threeLine ? 16 : 20,
position: 'relative'
},
icons: {
height: 24,
width: 24,
display: 'block',
position: 'absolute',
top: twoLine ? 12 : singleAvatar ? 4 : 0,
padding: 12
},
leftIcon: {
color: Colors.grey600,
fill: Colors.grey600,
left: 4
},
rightIcon: {
color: Colors.grey400,
fill: Colors.grey400,
right: 4
},
avatars: {
position: 'absolute',
top: singleAvatar ? 8 : 16
},
label: {
cursor: 'pointer'
},
leftAvatar: {
left: 16
},
rightAvatar: {
right: 16
},
leftCheckbox: {
position: 'absolute',
display: 'block',
width: 24,
top: twoLine ? 24 : singleAvatar ? 16 : 12,
left: 16
},
primaryText: {
margin: 0
},
rightIconButton: {
position: 'absolute',
display: 'block',
top: twoLine ? 12 : singleAvatar ? 4 : 0,
right: 4
},
rightToggle: {
position: 'absolute',
display: 'block',
width: 54,
top: twoLine ? 25 : singleAvatar ? 17 : 13,
right: 8
},
secondaryText: {
fontSize: 14,
lineHeight: threeLine ? '18px' : '16px',
height: threeLine ? 36 : 16,
margin: 0,
marginTop: 4,
color: Typography.textLightBlack,
//needed for 2 and 3 line ellipsis
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: threeLine ? null : 'nowrap',
display: threeLine ? '-webkit-box' : null,
WebkitLineClamp: threeLine ? 2 : null,
WebkitBoxOrient: threeLine ? 'vertical' : null
}
};
var contentChildren = [];
if (leftIcon) {
this._pushElement(contentChildren, leftIcon, this.mergeStyles(styles.icons, styles.leftIcon));
}
if (rightIcon) {
this._pushElement(contentChildren, rightIcon, this.mergeStyles(styles.icons, styles.rightIcon));
}
if (leftAvatar) {
this._pushElement(contentChildren, leftAvatar, this.mergeStyles(styles.avatars, styles.leftAvatar));
}
if (rightAvatar) {
this._pushElement(contentChildren, rightAvatar, this.mergeStyles(styles.avatars, styles.rightAvatar));
}
if (leftCheckbox) {
this._pushElement(contentChildren, leftCheckbox, this.mergeStyles(styles.leftCheckbox));
}
//RightIconButtonElement
var hasNestListItems = nestedItems.length;
var hasRightElement = rightAvatar || rightIcon || rightIconButton || rightToggle;
var needsNestedIndicator = hasNestListItems && autoGenerateNestedIndicator && !hasRightElement;
if (rightIconButton || needsNestedIndicator) {
var rightIconButtonElement = rightIconButton;
var rightIconButtonHandlers = {
onKeyboardFocus: this._handleRightIconButtonKeyboardFocus,
onMouseEnter: this._handleRightIconButtonMouseEnter,
onMouseLeave: this._handleRightIconButtonMouseLeave,
onTouchTap: this._handleRightIconButtonTouchTap,
onMouseDown: this._handleRightIconButtonMouseUp,
onMouseUp: this._handleRightIconButtonMouseUp
};
// Create a nested list indicator icon if we don't have an icon on the right
if (needsNestedIndicator) {
rightIconButtonElement = this.state.open ? React.createElement(
IconButton,
null,
React.createElement(OpenIcon, null)
) : React.createElement(
IconButton,
null,
React.createElement(CloseIcon, null)
);
rightIconButtonHandlers.onTouchTap = this._handleNestedListToggle;
}
this._pushElement(contentChildren, rightIconButtonElement, this.mergeStyles(styles.rightIconButton), rightIconButtonHandlers);
}
if (rightToggle) {
this._pushElement(contentChildren, rightToggle, this.mergeStyles(styles.rightToggle));
}
if (primaryText) {
var secondaryTextElement = this._createTextElement(styles.primaryText, primaryText, 'primaryText');
contentChildren.push(secondaryTextElement);
}
if (secondaryText) {
var secondaryTextElement = this._createTextElement(styles.secondaryText, secondaryText, 'secondaryText');
contentChildren.push(secondaryTextElement);
}
var nestedList = nestedItems.length ? React.createElement(
NestedList,
{ nestedLevel: nestedLevel + 1, open: this.state.open },
nestedItems
) : undefined;
return hasCheckbox ? this._createLabelElement(styles, contentChildren) : disabled ? this._createDisabledElement(styles, contentChildren) : React.createElement(
'div',
null,
React.createElement(
EnhancedButton,
_extends({}, other, {
disabled: disabled,
disableKeyboardFocus: disableKeyboardFocus || this.state.rightIconButtonKeyboardFocused,
linkButton: true,
onKeyboardFocus: this._handleKeyboardFocus,
onMouseLeave: this._handleMouseLeave,
onMouseEnter: this._handleMouseEnter,
onTouchStart: this._handleTouchStart,
ref: 'enhancedButton',
style: this.mergeAndPrefix(styles.root, style) }),
React.createElement(
'div',
{ style: this.mergeAndPrefix(styles.innerDiv, innerDivStyle) },
contentChildren
)
),
nestedList
);
},
applyFocusState: function applyFocusState(focusState) {
var button = this.refs.enhancedButton;
var buttonEl = React.findDOMNode(button);
if (button) {
switch (focusState) {
case 'none':
buttonEl.blur();
break;
case 'focused':
buttonEl.focus();
break;
case 'keyboard-focused':
button.setKeyboardFocus();
buttonEl.focus();
break;
}
}
},
_createDisabledElement: function _createDisabledElement(styles, contentChildren) {
var _props2 = this.props;
var innerDivStyle = _props2.innerDivStyle;
var style = _props2.style;
var mergedDivStyles = this.mergeAndPrefix(styles.root, styles.innerDiv, innerDivStyle, style);
return React.createElement('div', { style: mergedDivStyles }, contentChildren);
},
_createLabelElement: function _createLabelElement(styles, contentChildren) {
var _props3 = this.props;
var innerDivStyle = _props3.innerDivStyle;
var style = _props3.style;
var mergedLabelStyles = this.mergeAndPrefix(styles.root, styles.innerDiv, innerDivStyle, styles.label, style);
return React.createElement('label', { style: mergedLabelStyles }, contentChildren);
},
_createTextElement: function _createTextElement(styles, data, key) {
var isAnElement = React.isValidElement(data);
var mergedStyles = isAnElement ? this.mergeStyles(styles, data.props.style) : null;
return isAnElement ? React.cloneElement(data, {
key: key,
style: mergedStyles
}) : React.createElement(
'div',
{ key: key, style: styles },
data
);
},
_handleKeyboardFocus: function _handleKeyboardFocus(e, isKeyboardFocused) {
this.setState({ isKeyboardFocused: isKeyboardFocused });
this.props.onKeyboardFocus(e, isKeyboardFocused);
},
_handleMouseEnter: function _handleMouseEnter(e) {
if (!this.state.touch) this.setState({ hovered: true });
this.props.onMouseEnter(e);
},
_handleMouseLeave: function _handleMouseLeave(e) {
this.setState({ hovered: false });
this.props.onMouseLeave(e);
},
_handleNestedListToggle: function _handleNestedListToggle(e) {
e.stopPropagation();
this.setState({ open: !this.state.open });
this.props.onNestedListToggle(this);
},
_handleRightIconButtonKeyboardFocus: function _handleRightIconButtonKeyboardFocus(e, isKeyboardFocused) {
var iconButton = this.props.rightIconButton;
var newState = {};
newState.rightIconButtonKeyboardFocused = isKeyboardFocused;
if (isKeyboardFocused) newState.isKeyboardFocused = false;
this.setState(newState);
if (iconButton && iconButton.props.onKeyboardFocus) iconButton.props.onKeyboardFocus(e, isKeyboardFocused);
},
_handleRightIconButtonMouseDown: function _handleRightIconButtonMouseDown(e) {
var iconButton = this.props.rightIconButton;
e.stopPropagation();
if (iconButton && iconButton.props.onMouseDown) iconButton.props.onMouseDown(e);
},
_handleRightIconButtonMouseLeave: function _handleRightIconButtonMouseLeave(e) {
var iconButton = this.props.rightIconButton;
this.setState({ rightIconButtonHovered: false });
if (iconButton && iconButton.props.onMouseLeave) iconButton.props.onMouseLeave(e);
},
_handleRightIconButtonMouseEnter: function _handleRightIconButtonMouseEnter(e) {
var iconButton = this.props.rightIconButton;
this.setState({ rightIconButtonHovered: true });
if (iconButton && iconButton.props.onMouseEnter) iconButton.props.onMouseEnter(e);
},
_handleRightIconButtonMouseUp: function _handleRightIconButtonMouseUp(e) {
var iconButton = this.props.rightIconButton;
e.stopPropagation();
if (iconButton && iconButton.props.onMouseUp) iconButton.props.onMouseUp(e);
},
_handleRightIconButtonTouchTap: function _handleRightIconButtonTouchTap(e) {
var iconButton = this.props.rightIconButton;
//Stop the event from bubbling up to the list-item
e.stopPropagation();
if (iconButton && iconButton.props.onTouchTap) iconButton.props.onTouchTap(e);
},
_handleTouchStart: function _handleTouchStart(e) {
this.setState({ touch: true });
this.props.onTouchStart(e);
},
_pushElement: function _pushElement(children, element, baseStyles, additionalProps) {
if (element) {
var styles = this.mergeStyles(baseStyles, element.props.style);
children.push(React.cloneElement(element, _extends({
key: children.length,
style: styles
}, additionalProps)));
}
}
});
module.exports = ListItem;
},{"../enhanced-button":28,"../icon-button":34,"../mixins/style-propable":52,"../styles/colors":69,"../styles/transitions":75,"../styles/typography":76,"../svg-icons/navigation/arrow-drop-down":82,"../svg-icons/navigation/arrow-drop-up":83,"../utils/color-manipulator":124,"./nested-list":42,"react/addons":140}],41:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var PropTypes = require('../utils/prop-types');
var StylePropable = require('../mixins/style-propable');
var Typography = require('../styles/typography');
var Paper = require('../paper');
var List = React.createClass({
displayName: 'List',
mixins: [PureRenderMixin, StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
insetSubheader: React.PropTypes.bool,
subheader: React.PropTypes.string,
subheaderStyle: React.PropTypes.object,
zDepth: PropTypes.zDepth
},
getDefaultProps: function getDefaultProps() {
return {
zDepth: 0
};
},
render: function render() {
var _props = this.props;
var children = _props.children;
var insetSubheader = _props.insetSubheader;
var style = _props.style;
var subheader = _props.subheader;
var subheaderStyle = _props.subheaderStyle;
var zDepth = _props.zDepth;
var other = _objectWithoutProperties(_props, ['children', 'insetSubheader', 'style', 'subheader', 'subheaderStyle', 'zDepth']);
var styles = {
root: {
padding: 0,
paddingBottom: 8,
paddingTop: subheader ? 0 : 8
},
subheader: {
color: Typography.textLightBlack,
fontSize: 14,
fontWeight: Typography.fontWeightMedium,
lineHeight: '48px',
paddingLeft: insetSubheader ? 72 : 16
}
};
var subheaderElement = undefined;
if (subheader) {
var mergedSubheaderStyles = this.mergeAndPrefix(styles.subheader, subheaderStyle);
subheaderElement = React.createElement(
'div',
{ style: mergedSubheaderStyles },
subheader
);
}
return React.createElement(
Paper,
_extends({}, other, {
style: this.mergeStyles(styles.root, style),
zDepth: zDepth }),
subheaderElement,
children
);
}
});
module.exports = List;
},{"../mixins/style-propable":52,"../paper":56,"../styles/typography":76,"../utils/prop-types":135,"react/addons":140}],42:[function(require,module,exports){
'use strict';
var React = require('react');
var ImmutabilityHelper = require('../utils/immutability-helper');
var List = require('./list');
var NestedList = React.createClass({
displayName: 'NestedList',
propTypes: {
nestedLevel: React.PropTypes.number,
open: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
nestedLevel: 1,
open: false
};
},
render: function render() {
var _props = this.props;
var children = _props.children;
var open = _props.open;
var nestedLevel = _props.nestedLevel;
var style = _props.style;
var styles = {
root: {
display: open ? null : 'none'
}
};
return React.createElement(
List,
{ style: ImmutabilityHelper.merge(styles.root, style) },
React.Children.map(children, function (child) {
return React.isValidElement(child) ? React.cloneElement(child, {
nestedLevel: nestedLevel + 1
}) : child;
})
);
}
});
module.exports = NestedList;
},{"../utils/immutability-helper":130,"./list":41,"react":312}],43:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var LinkMenuItem = React.createClass({
displayName: 'LinkMenuItem',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
index: React.PropTypes.number.isRequired,
payload: React.PropTypes.string.isRequired,
text: React.PropTypes.string.isRequired,
target: React.PropTypes.string,
active: React.PropTypes.bool,
disabled: React.PropTypes.bool,
className: React.PropTypes.string
},
getDefaultProps: function getDefaultProps() {
return {
active: false,
disabled: false
};
},
getInitialState: function getInitialState() {
return {
hovered: false
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.menuItem;
},
getStyles: function getStyles() {
var style = {
root: {
userSelect: 'none',
cursor: 'pointer',
display: 'block',
lineHeight: this.getTheme().height + 'px',
paddingLeft: this.getTheme().padding,
paddingRight: this.getTheme().padding
},
rootWhenHovered: {
backgroundColor: this.getTheme().hoverColor
},
rootWhenSelected: {
color: this.getTheme().selectedTextColor
},
rootWhenDisabled: {
cursor: 'default',
color: this.context.muiTheme.palette.disabledColor
}
};
return style;
},
render: function render() {
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;
var styles = this.getStyles();
var linkStyles = this.mergeAndPrefix(styles.root, this.props.selected && styles.rootWhenSelected, this.props.selected && styles.rootWhenSelected, this.props.active && !this.props.disabled && styles.rootWhenHovered, this.props.style, this.props.disabled && styles.rootWhenDisabled);
return React.createElement(
'a',
_extends({
key: this.props.index,
target: this.props.target,
style: linkStyles }, link, {
className: this.props.className,
onClick: onClickHandler,
onMouseEnter: this._handleMouseEnter,
onMouseLeave: this._handleMouseLeave }),
this.props.text
);
},
_stopLink: function _stopLink(event) {
event.preventDefault();
},
_handleMouseEnter: function _handleMouseEnter(e) {
this.setState({ hovered: true });
if (!this.props.disabled && this.props.onMouseEnter) this.props.onMouseEnter(e);
},
_handleMouseLeave: function _handleMouseLeave(e) {
this.setState({ hovered: false });
if (!this.props.disabled && this.props.onMouseLeave) this.props.onMouseLeave(e);
}
});
module.exports = LinkMenuItem;
},{"../mixins/style-propable":52,"react":312}],44:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var FontIcon = require('../font-icon');
var Toggle = require('../toggle');
var Types = {
LINK: 'LINK',
SUBHEADER: 'SUBHEADER',
NESTED: 'NESTED'
};
var MenuItem = React.createClass({
displayName: 'MenuItem',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
index: React.PropTypes.number.isRequired,
className: React.PropTypes.string,
iconClassName: React.PropTypes.string,
iconRightClassName: React.PropTypes.string,
iconStyle: React.PropTypes.object,
iconRightStyle: React.PropTypes.object,
attribute: React.PropTypes.string,
number: React.PropTypes.string,
data: React.PropTypes.string,
toggle: React.PropTypes.bool,
disabled: React.PropTypes.bool,
onTouchTap: React.PropTypes.func,
onToggle: React.PropTypes.func,
selected: React.PropTypes.bool,
active: React.PropTypes.bool
},
statics: {
Types: Types
},
getDefaultProps: function getDefaultProps() {
return {
toggle: false,
disabled: false,
active: false
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.menuItem;
},
getSpacing: function getSpacing() {
return this.context.muiTheme.spacing;
},
getStyles: function getStyles() {
var styles = {
root: {
userSelect: 'none',
cursor: 'pointer',
lineHeight: this.getTheme().height + 'px',
paddingLeft: this.getTheme().padding,
paddingRight: this.getTheme().padding,
color: this.context.muiTheme.palette.textColor
},
number: {
float: 'right',
width: 24,
textAlign: 'center'
},
attribute: {
float: 'right'
},
iconRight: {
lineHeight: this.getTheme().height + 'px',
float: 'right'
},
icon: {
float: 'left',
lineHeight: this.getTheme().height + 'px',
marginRight: this.getSpacing().desktopGutter
},
data: {
display: 'block',
paddingLeft: this.getSpacing().desktopGutter * 2,
lineHeight: this.getTheme().dataHeight + 'px',
height: this.getTheme().dataHeight + 'px',
verticalAlign: 'top',
top: -12,
position: 'relative',
fontWeight: 300,
color: this.context.muiTheme.palette.textColor
},
toggle: {
marginTop: (this.getTheme().height - this.context.muiTheme.component.radioButton.size) / 2,
float: 'right',
width: 42
},
rootWhenHovered: {
backgroundColor: this.getTheme().hoverColor
},
rootWhenSelected: {
color: this.getTheme().selectedTextColor
},
rootWhenDisabled: {
cursor: 'default',
color: this.context.muiTheme.palette.disabledColor
}
};
return styles;
},
render: function render() {
var icon = undefined;
var data = undefined;
var iconRight = undefined;
var attribute = undefined;
var number = undefined;
var toggleElement = undefined;
var styles = this.getStyles();
if (this.props.iconClassName) icon = React.createElement(FontIcon, { style: this.mergeAndPrefix(styles.icon, this.props.iconStyle, this.props.selected && styles.rootWhenSelected), className: this.props.iconClassName });
if (this.props.iconRightClassName) iconRight = React.createElement(FontIcon, { style: this.mergeAndPrefix(styles.iconRight, this.props.iconRightStyle), className: this.props.iconRightClassName });
if (this.props.data) data = React.createElement(
'span',
{ style: this.mergeAndPrefix(styles.data) },
this.props.data
);
if (this.props.number !== undefined) number = React.createElement(
'span',
{ style: this.mergeAndPrefix(styles.number) },
this.props.number
);
if (this.props.attribute !== undefined) attribute = React.createElement(
'span',
{ style: this.mergeAndPrefix(styles.style) },
this.props.attribute
);
if (this.props.icon) icon = this.props.icon;
if (this.props.toggle) {
var _props = this.props;
var toggle = _props.toggle;
var onTouchTap = _props.onTouchTap;
var onToggle = _props.onToggle;
var onMouseEnter = _props.onMouseEnter;
var onMouseLeave = _props.onMouseLeave;
var children = _props.children;
var label = _props.label;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['toggle', 'onTouchTap', 'onToggle', 'onMouseEnter', 'onMouseLeave', 'children', 'label', 'style']);
toggleElement = React.createElement(Toggle, _extends({}, other, { onToggle: this._handleToggle, style: styles.toggle }));
}
return React.createElement(
'div',
{
key: this.props.index,
className: this.props.className,
onTouchTap: this._handleTouchTap,
onMouseEnter: this._handleMouseEnter,
onMouseLeave: this._handleMouseLeave,
style: this.mergeAndPrefix(styles.root, this.props.selected && styles.rootWhenSelected, this.props.active && !this.props.disabled && styles.rootWhenHovered, this.props.style, this.props.disabled && styles.rootWhenDisabled) },
icon,
this.props.children,
data,
attribute,
number,
toggleElement,
iconRight
);
},
_handleTouchTap: function _handleTouchTap(e) {
if (!this.props.disabled && this.props.onTouchTap) this.props.onTouchTap(e, this.props.index);
},
_handleToggle: function _handleToggle(e, toggled) {
if (!this.props.disabled && this.props.onToggle) this.props.onToggle(e, this.props.index, toggled);
},
_handleMouseEnter: function _handleMouseEnter(e) {
if (!this.props.disabled && this.props.onMouseEnter) this.props.onMouseEnter(e, this.props.index);
},
_handleMouseLeave: function _handleMouseLeave(e) {
if (!this.props.disabled && this.props.onMouseLeave) this.props.onMouseLeave(e, this.props.index);
}
});
module.exports = MenuItem;
},{"../font-icon":33,"../mixins/style-propable":52,"../toggle":113,"react":312}],45:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var CssEvent = require('../utils/css-event');
var KeyLine = require('../utils/key-line');
var KeyCode = require('../utils/key-code');
var StylePropable = require('../mixins/style-propable');
var Transitions = require('../styles/transitions');
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: [ClickAwayable, StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
index: React.PropTypes.number.isRequired,
text: React.PropTypes.string,
menuItems: React.PropTypes.array.isRequired,
zDepth: React.PropTypes.number,
disabled: React.PropTypes.bool,
active: React.PropTypes.bool,
onItemTap: React.PropTypes.func,
menuItemStyle: React.PropTypes.object
},
getDefaultProps: function getDefaultProps() {
return {
disabled: false
};
},
getInitialState: function getInitialState() {
return {
open: false,
activeIndex: 0
};
},
componentClickAway: function componentClickAway() {
this._closeNestedMenu();
},
componentDidMount: function componentDidMount() {
this._positionNestedMenu();
var el = this.getDOMNode();
el.focus();
},
componentDidUpdate: function componentDidUpdate() {
this._positionNestedMenu();
},
getSpacing: function getSpacing() {
return this.context.muiTheme.spacing;
},
getStyles: function getStyles() {
var styles = {
root: {
userSelect: 'none',
cursor: 'pointer',
lineHeight: this.getTheme().height + 'px',
color: this.context.muiTheme.palette.textColor
},
icon: {
float: 'left',
lineHeight: this.getTheme().height + 'px',
marginRight: this.getSpacing().desktopGutter
},
toggle: {
marginTop: (this.getTheme().height - this.context.muiTheme.component.radioButton.size) / 2,
float: 'right',
width: 42
},
rootWhenHovered: {
backgroundColor: this.getTheme().hoverColor
},
rootWhenSelected: {
color: this.getTheme().selectedTextColor
},
rootWhenDisabled: {
cursor: 'default',
color: this.context.muiTheme.palette.disabledColor
}
};
return styles;
},
getTheme: function getTheme() {
return this.context.muiTheme.component.menuItem;
},
render: function render() {
var styles = this.getStyles();
styles = this.mergeAndPrefix(styles.root, this.props.active && !this.props.disabled && styles.rootWhenHovered, {
position: 'relative'
}, this.props.style);
var iconCustomArrowDropRight = {
marginRight: this.getSpacing().desktopGutterMini * -1,
color: this.context.muiTheme.component.dropDownMenu.accentColor
};
var _props = this.props;
var index = _props.index;
var menuItemStyle = _props.menuItemStyle;
var other = _objectWithoutProperties(_props, ['index', 'menuItemStyle']);
return React.createElement(
'div',
{
ref: 'root',
style: styles,
onMouseEnter: this._openNestedMenu,
onMouseLeave: this._closeNestedMenu,
onMouseOver: this._handleMouseOver,
onMouseOut: this._handleMouseOut },
React.createElement(
MenuItem,
{
index: index,
style: menuItemStyle,
disabled: this.props.disabled,
iconRightStyle: iconCustomArrowDropRight,
iconRightClassName: 'muidocs-icon-custom-arrow-drop-right',
onTouchTap: this._onParentItemTap },
this.props.text
),
React.createElement(Menu, _extends({}, other, {
ref: 'nestedMenu',
menuItems: this.props.menuItems,
menuItemStyle: menuItemStyle,
onItemTap: this._onMenuItemTap,
hideable: true,
visible: this.state.open,
onRequestClose: this._closeNestedMenu,
zDepth: this.props.zDepth + 1 }))
);
},
toggleNestedMenu: function toggleNestedMenu() {
if (!this.props.disabled) this.setState({ open: !this.state.open });
},
isOpen: function isOpen() {
return this.state.open;
},
_positionNestedMenu: function _positionNestedMenu() {
var el = React.findDOMNode(this);
var nestedMenu = React.findDOMNode(this.refs.nestedMenu);
nestedMenu.style.left = el.offsetWidth + 'px';
},
_openNestedMenu: function _openNestedMenu() {
if (!this.props.disabled) this.setState({ open: true });
},
_closeNestedMenu: function _closeNestedMenu() {
this.setState({ open: false });
React.findDOMNode(this).focus();
},
_onParentItemTap: function _onParentItemTap() {
this.toggleNestedMenu();
},
_onMenuItemTap: function _onMenuItemTap(e, index, menuItem) {
if (this.props.onItemTap) this.props.onItemTap(e, index, menuItem);
this._closeNestedMenu();
},
_handleMouseOver: function _handleMouseOver(e) {
if (!this.props.disabled && this.props.onMouseOver) this.props.onMouseOver(e, this.props.index);
},
_handleMouseOut: function _handleMouseOut(e) {
if (!this.props.disabled && this.props.onMouseOut) this.props.onMouseOut(e, this.props.index);
}
});
/****************
* Menu Component
****************/
var Menu = React.createClass({
displayName: 'Menu',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
autoWidth: React.PropTypes.bool,
onItemTap: React.PropTypes.func,
onToggle: React.PropTypes.func,
onRequestClose: React.PropTypes.func,
menuItems: React.PropTypes.array.isRequired,
selectedIndex: React.PropTypes.number,
hideable: React.PropTypes.bool,
visible: React.PropTypes.bool,
zDepth: React.PropTypes.number,
menuItemStyle: React.PropTypes.object,
menuItemStyleSubheader: React.PropTypes.object,
menuItemStyleLink: React.PropTypes.object,
menuItemClassName: React.PropTypes.string,
menuItemClassNameSubheader: React.PropTypes.string,
menuItemClassNameLink: React.PropTypes.string
},
getInitialState: function getInitialState() {
return {
nestedMenuShown: false,
activeIndex: 0
};
},
getDefaultProps: function getDefaultProps() {
return {
autoWidth: true,
hideable: false,
visible: true,
zDepth: 1,
onRequestClose: function onRequestClose() {}
};
},
componentDidMount: function componentDidMount() {
var el = React.findDOMNode(this);
//Set the menu width
this._setKeyWidth(el);
//Show or Hide the menu according to visibility
this._renderVisibility();
},
componentDidUpdate: function componentDidUpdate(prevProps) {
if (this.props.visible !== prevProps.visible || this.props.menuItems.length !== prevProps.menuItems.length) {
this._renderVisibility();
}
},
componentWillReceiveProps: function componentWillReceiveProps() {
//Set the menu width
this._setKeyWidth(React.findDOMNode(this));
},
getTheme: function getTheme() {
return this.context.muiTheme.component.menu;
},
getSpacing: function getSpacing() {
return this.context.muiTheme.spacing;
},
getStyles: function getStyles() {
var styles = {
root: {
backgroundColor: this.getTheme().containerBackgroundColor,
paddingTop: this.getSpacing().desktopGutterMini,
paddingBottom: this.getSpacing().desktopGutterMini,
transition: Transitions.easeOut(null, 'height'),
outline: 'none !important'
},
subheader: {
paddingLeft: this.context.muiTheme.component.menuSubheader.padding,
paddingRight: this.context.muiTheme.component.menuSubheader.padding
},
hideable: {
overflow: 'hidden',
position: 'absolute',
top: 0,
zIndex: 1
},
item: {
height: 34
}
};
return styles;
},
render: function render() {
var styles = this.getStyles();
return React.createElement(
Paper,
{
ref: 'paperContainer',
tabIndex: '0',
onKeyDown: this._onKeyDown,
zDepth: this.props.zDepth,
style: this.mergeAndPrefix(styles.root, this.props.hideable && styles.hideable, this.props.style) },
this._getChildren()
);
},
_getChildren: function _getChildren() {
var menuItem = undefined,
itemComponent = undefined,
isDisabled = undefined;
var styles = this.getStyles();
this._children = [];
//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];
isDisabled = menuItem.disabled === undefined ? false : menuItem.disabled;
var _menuItem = menuItem;
var icon = _menuItem.icon;
var data = _menuItem.data;
var attribute = _menuItem.attribute;
var number = _menuItem.number;
var toggle = _menuItem.toggle;
var onTouchTap = _menuItem.onTouchTap;
var other = _objectWithoutProperties(_menuItem, ['icon', 'data', 'attribute', 'number', 'toggle', 'onTouchTap']);
switch (menuItem.type) {
case MenuItem.Types.LINK:
itemComponent = React.createElement(LinkMenuItem, {
key: i,
index: i,
active: this.state.activeIndex === i,
text: menuItem.text,
disabled: isDisabled,
className: this.props.menuItemClassNameLink,
style: this.props.menuItemStyleLink,
payload: menuItem.payload,
target: menuItem.target });
break;
case MenuItem.Types.SUBHEADER:
itemComponent = React.createElement(SubheaderMenuItem, {
key: i,
index: i,
className: this.props.menuItemClassNameSubheader,
style: this.mergeAndPrefix(styles.subheader, this.props.menuItemStyleSubheader),
firstChild: i === 0,
text: menuItem.text });
break;
case MenuItem.Types.NESTED:
var _props2 = this.props,
ref = _props2.ref,
key = _props2.key,
index = _props2.index,
zDepth = _props2.zDepth,
other = _objectWithoutProperties(_props2, ['ref', 'key', 'index', 'zDepth']);
itemComponent = React.createElement(NestedMenuItem, _extends({}, other, {
ref: i,
key: i,
index: i,
nested: true,
active: this.state.activeIndex === i,
text: menuItem.text,
disabled: isDisabled,
menuItems: menuItem.items,
menuItemStyle: this.props.menuItemStyle,
zDepth: this.props.zDepth,
onMouseEnter: this._onItemActivated,
onMouseLeave: this._onItemDeactivated,
onItemTap: this._onNestedItemTap }));
this._nestedChildren.push(i);
break;
default:
itemComponent = React.createElement(
MenuItem,
_extends({}, other, {
selected: this.props.selectedIndex === i,
key: i,
index: i,
active: this.state.activeIndex === i,
icon: menuItem.icon,
data: menuItem.data,
className: this.props.menuItemClassName,
style: this.props.menuItemStyle,
attribute: menuItem.attribute,
number: menuItem.number,
toggle: menuItem.toggle,
onToggle: this.props.onToggle,
disabled: isDisabled,
onTouchTap: this._onItemTap,
onMouseEnter: this._onItemActivated,
onMouseLeave: this._onItemDeactivated
}),
menuItem.text
);
}
this._children.push(itemComponent);
}
return this._children;
},
_setKeyWidth: function _setKeyWidth(el) {
//Update the menu width
var menuWidth = '100%';
if (this.props.autoWidth) {
el.style.width = 'auto';
menuWidth = KeyLine.getIncrementalDim(el.offsetWidth) + 'px';
}
el.style.width = menuWidth;
},
_renderVisibility: function _renderVisibility() {
if (this.props.hideable) {
if (this.props.visible) this._expandHideableMenu();else this._collapseHideableMenu();
}
},
_expandHideableMenu: function _expandHideableMenu() {
var _this = this;
var el = React.findDOMNode(this);
var container = React.findDOMNode(this.refs.paperContainer);
var padding = this.getSpacing().desktopGutterMini;
var height = this._getHiddenMenuHeight(el, padding);
//Add transition
if (!el.style.transition) {
el.style.transition = Transitions.easeOut();
}
this._nextAnimationFrame(function () {
container.style.overflow = 'hidden';
// Yeild to the DOM, then apply height and padding. This makes the transition smoother.
el.style.paddingTop = padding + 'px';
el.style.paddingBottom = padding + 'px';
el.style.height = height + 'px';
el.style.opacity = 1;
//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) container.style.overflow = 'visible';
el.style.transition = null;
el.focus();
});
});
},
_getHiddenMenuHeight: function _getHiddenMenuHeight(el, padding) {
//Add padding to the offset height, because it is not yet set in the style.
var height = padding * 2;
//Hide the element and allow the browser to automatically resize it.
el.style.visibility = 'hidden';
el.style.height = 'auto';
//Determine the height of the menu.
height += el.offsetHeight;
//Unhide the menu with the height set back to zero.
el.style.height = '0px';
el.style.visibility = 'visible';
return height;
},
_collapseHideableMenu: function _collapseHideableMenu() {
var el = React.findDOMNode(this);
var container = React.findDOMNode(this.refs.paperContainer);
var originalOpacity = el.style.opacity;
//Add transition
if (!el.style.transition && originalOpacity !== '') {
el.style.transition = Transitions.easeOut();
}
this._nextAnimationFrame(function () {
//Set the overflow to hidden so that animation works properly
container.style.overflow = 'hidden';
//Close the menu
el.style.opacity = 0;
el.style.height = '0px';
el.style.paddingTop = '0px';
el.style.paddingBottom = '0px';
var end = function end() {
el.style.transition = null;
};
if (originalOpacity === '') end();else CssEvent.onTransitionEnd(el, end);
});
},
_nextAnimationFrame: function _nextAnimationFrame(func) {
if (window.requestAnimationFrame) {
return window.requestAnimationFrame(func);
}
return setTimeout(func, 16);
},
_onNestedItemTap: function _onNestedItemTap(e, index, menuItem) {
if (this.props.onItemTap) this.props.onItemTap(e, index, menuItem);
},
_onItemTap: function _onItemTap(e, index) {
if (this.props.onItemTap) this.props.onItemTap(e, index, this.props.menuItems[index]);
},
_onItemToggle: function _onItemToggle(e, index, toggled) {
if (this.props.onItemToggle) this.props.onItemToggle(e, index, this.props.menuItems[index], toggled);
},
_onItemActivated: function _onItemActivated(e, index) {
this.setState({ activeIndex: index });
},
_onItemDeactivated: function _onItemDeactivated(e, index) {
if (this.state.activeKey === index) this.setState({ activeIndex: 0 });
},
_onKeyDown: function _onKeyDown(e) {
if (!(this.state.open || this.props.visible)) return;
var nested = this._children[this.state.activeIndex];
if (nested && nested.props.nested && this.refs[this.state.activeIndex].isOpen()) return;
switch (e.which) {
case KeyCode.UP:
this._activatePreviousItem();
break;
case KeyCode.DOWN:
this._activateNextItem();
break;
case KeyCode.RIGHT:
this._tryToggleNested(this.state.activeIndex);
break;
case KeyCode.LEFT:
this._close();
break;
case KeyCode.ESC:
this._close();
break;
case KeyCode.TAB:
this._close();
return; // so the tab key can propagate
case KeyCode.ENTER:
case KeyCode.SPACE:
e.stopPropagation(); // needs called before the close
this._triggerSelection(e);
break;
default:
return; //important
}
e.preventDefault();
e.stopPropagation();
},
_activatePreviousItem: function _activatePreviousItem() {
var active = this.state.activeIndex || 0;
active = Math.max(active - 1, 0);
this.setState({ activeIndex: active });
},
_activateNextItem: function _activateNextItem() {
var active = this.state.activeIndex || 0;
active = Math.min(active + 1, this._children.length - 1);
this.setState({ activeIndex: active });
},
_triggerSelection: function _triggerSelection(e) {
var index = this.state.activeIndex || 0;
this._onItemTap(e, index);
},
_close: function _close() {
this.props.onRequestClose();
},
_tryToggleNested: function _tryToggleNested(index) {
var item = this.refs[index];
if (item && item.toggleNestedMenu) item.toggleNestedMenu();
}
});
module.exports = Menu;
},{"../mixins/click-awayable":49,"../mixins/style-propable":52,"../paper":56,"../styles/transitions":75,"../utils/css-event":125,"../utils/key-code":132,"../utils/key-line":133,"./link-menu-item":43,"./menu-item":44,"./subheader-menu-item":46,"react":312}],46:[function(require,module,exports){
'use strict';
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var Typography = require('../styles/typography');
var SubheaderMenuItem = React.createClass({
displayName: 'SubheaderMenuItem',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
index: React.PropTypes.number.isRequired,
text: React.PropTypes.string.isRequired,
firstChild: React.PropTypes.bool,
className: React.PropTypes.string
},
getTheme: function getTheme() {
return this.context.muiTheme.component.menuSubheader;
},
getSpacing: function getSpacing() {
return this.context.muiTheme.spacing;
},
getStyles: function getStyles() {
var gutterMini = this.getSpacing().desktopGutterMini;
var subheaderHeight = this.getSpacing().desktopSubheaderHeight;
var styles = {
root: {
boxSizing: 'border-box',
fontSize: '13px',
letterSpacing: 0,
fontWeight: Typography.fontWeightMedium,
margin: 0,
height: subheaderHeight + gutterMini,
lineHeight: subheaderHeight + 'px',
color: this.getTheme().textColor,
borderTop: 'solid 1px ' + this.getTheme().borderColor,
paddingTop: gutterMini,
marginTop: gutterMini
},
rootWhenFirstChild: {
height: subheaderHeight,
borderTop: 'none',
paddingTop: 0,
marginTop: 0
}
};
return styles;
},
render: function render() {
return React.createElement(
'div',
{
key: this.props.index,
className: this.props.className,
style: this.mergeAndPrefix(this.getStyles().root, this.props.firstChild && this.getStyles().rootWhenFirstChild, this.props.style) },
this.props.text
);
}
});
module.exports = SubheaderMenuItem;
},{"../mixins/style-propable":52,"../styles/typography":76,"react":312}],47:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var ReactTransitionGroup = React.addons.TransitionGroup;
var ClickAwayable = require('../mixins/click-awayable');
var StylePropable = require('../mixins/style-propable');
var Events = require('../utils/events');
var PropTypes = require('../utils/prop-types');
var Menu = require('../menus/menu');
var IconMenu = React.createClass({
displayName: 'IconMenu',
mixins: [StylePropable, ClickAwayable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
closeOnItemTouchTap: React.PropTypes.bool,
iconButtonElement: React.PropTypes.element.isRequired,
openDirection: PropTypes.corners,
onItemTouchTap: React.PropTypes.func,
onKeyboardFocus: React.PropTypes.func,
onMouseDown: React.PropTypes.func,
onMouseLeave: React.PropTypes.func,
onMouseEnter: React.PropTypes.func,
onMouseUp: React.PropTypes.func,
onTouchTap: React.PropTypes.func,
menuStyle: React.PropTypes.object,
touchTapCloseDelay: React.PropTypes.number
},
getDefaultProps: function getDefaultProps() {
return {
closeOnItemTouchTap: true,
openDirection: 'bottom-left',
onItemTouchTap: function onItemTouchTap() {},
onKeyboardFocus: function onKeyboardFocus() {},
onMouseDown: function onMouseDown() {},
onMouseLeave: function onMouseLeave() {},
onMouseEnter: function onMouseEnter() {},
onMouseUp: function onMouseUp() {},
onTouchTap: function onTouchTap() {},
touchTapCloseDelay: 200
};
},
getInitialState: function getInitialState() {
return {
iconButtonRef: this.props.iconButtonElement.props.ref || 'iconButton',
menuInitiallyKeyboardFocused: false,
open: false
};
},
componentWillUnmount: function componentWillUnmount() {
if (this._timeout) clearTimeout(this._timeout);
},
componentClickAway: function componentClickAway() {
this.close();
},
render: function render() {
var _this = this;
var _props = this.props;
var closeOnItemTouchTap = _props.closeOnItemTouchTap;
var iconButtonElement = _props.iconButtonElement;
var openDirection = _props.openDirection;
var onItemTouchTap = _props.onItemTouchTap;
var onKeyboardFocus = _props.onKeyboardFocus;
var onMouseDown = _props.onMouseDown;
var onMouseLeave = _props.onMouseLeave;
var onMouseEnter = _props.onMouseEnter;
var onMouseUp = _props.onMouseUp;
var onTouchTap = _props.onTouchTap;
var menuStyle = _props.menuStyle;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['closeOnItemTouchTap', 'iconButtonElement', 'openDirection', 'onItemTouchTap', 'onKeyboardFocus', 'onMouseDown', 'onMouseLeave', 'onMouseEnter', 'onMouseUp', 'onTouchTap', 'menuStyle', 'style']);
var open = this.state.open;
var openDown = openDirection.split('-')[0] === 'bottom';
var openLeft = openDirection.split('-')[1] === 'left';
var styles = {
root: {
display: 'inline-block',
position: 'relative'
},
menu: {
top: openDown ? 12 : null,
bottom: !openDown ? 12 : null,
left: !openLeft ? 12 : null,
right: openLeft ? 12 : null
}
};
var mergedRootStyles = this.mergeAndPrefix(styles.root, style);
var mergedMenuStyles = this.mergeStyles(styles.menu, menuStyle);
var iconButton = React.cloneElement(iconButtonElement, {
onKeyboardFocus: this.props.onKeyboardFocus,
onTouchTap: (function (e) {
_this.open(Events.isKeyboard(e));
if (iconButtonElement.props.onTouchTap) iconButtonElement.props.onTouchTap(e);
}).bind(this),
ref: this.state.iconButtonRef
});
var menu = open ? React.createElement(
Menu,
_extends({}, other, {
animated: true,
initiallyKeyboardFocused: this.state.menuInitiallyKeyboardFocused,
onEscKeyDown: this._handleMenuEscKeyDown,
onItemTouchTap: this._handleItemTouchTap,
openDirection: openDirection,
style: mergedMenuStyles }),
this.props.children
) : null;
return React.createElement(
'div',
{
onMouseDown: onMouseDown,
onMouseLeave: onMouseLeave,
onMouseEnter: onMouseEnter,
onMouseUp: onMouseUp,
onTouchTap: onTouchTap,
style: mergedRootStyles },
iconButton,
React.createElement(
ReactTransitionGroup,
null,
menu
)
);
},
isOpen: function isOpen() {
return this.state.open;
},
close: function close(isKeyboard) {
var _this2 = this;
if (this.state.open) {
this.setState({ open: false }, function () {
//Set focus on the icon button when the menu close
if (isKeyboard) {
var iconButton = _this2.refs[_this2.state.iconButtonRef];
React.findDOMNode(iconButton).focus();
iconButton.setKeyboardFocus();
}
});
}
},
open: function open(menuInitiallyKeyboardFocused) {
if (!this.state.open) {
this.setState({
open: true,
menuInitiallyKeyboardFocused: menuInitiallyKeyboardFocused
});
}
},
_handleItemTouchTap: function _handleItemTouchTap(e, child) {
var _this3 = this;
if (this.props.closeOnItemTouchTap) {
(function () {
var isKeyboard = Events.isKeyboard(e);
_this3._timeout = setTimeout(function () {
_this3.close(isKeyboard);
}, _this3.props.touchTapCloseDelay);
})();
}
this.props.onItemTouchTap(e, child);
},
_handleMenuEscKeyDown: function _handleMenuEscKeyDown() {
this.close(true);
}
});
module.exports = IconMenu;
},{"../menus/menu":48,"../mixins/click-awayable":49,"../mixins/style-propable":52,"../utils/events":128,"../utils/prop-types":135,"react/addons":140}],48:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var update = React.addons.update;
var Controllable = require('../mixins/controllable');
var StylePropable = require('../mixins/style-propable');
var AutoPrefix = require('../styles/auto-prefix');
var Transitions = require('../styles/transitions');
var KeyCode = require('../utils/key-code');
var PropTypes = require('../utils/prop-types');
var List = require('../lists/list');
var Paper = require('../paper');
var Menu = React.createClass({
displayName: 'Menu',
mixins: [StylePropable, Controllable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
animated: React.PropTypes.bool,
autoWidth: React.PropTypes.bool,
desktop: React.PropTypes.bool,
initiallyKeyboardFocused: React.PropTypes.bool,
listStyle: React.PropTypes.object,
maxHeight: React.PropTypes.number,
multiple: React.PropTypes.bool,
onEscKeyDown: React.PropTypes.func,
onItemTouchTap: React.PropTypes.func,
onKeyDown: React.PropTypes.func,
openDirection: PropTypes.corners,
selectedMenuItemStyle: React.PropTypes.object,
width: PropTypes.stringOrNumber,
zDepth: PropTypes.zDepth
},
getDefaultProps: function getDefaultProps() {
return {
animated: false,
autoWidth: true,
maxHeight: null,
onEscKeyDown: function onEscKeyDown() {},
onItemTouchTap: function onItemTouchTap() {},
onKeyDown: function onKeyDown() {},
openDirection: 'bottom-left',
zDepth: 1
};
},
getInitialState: function getInitialState() {
var selectedIndex = this._getSelectedIndex(this.props);
return {
focusIndex: selectedIndex >= 0 ? selectedIndex : 0,
isKeyboardFocused: this.props.initiallyKeyboardFocused,
keyWidth: this.props.desktop ? 64 : 56
};
},
componentDidEnter: function componentDidEnter() {
this._animateOpen();
},
componentDidMount: function componentDidMount() {
if (this.props.autoWidth) this._setWidth();
if (!this.props.animated) this._animateOpen();
this._setScollPosition();
},
componentDidUpdate: function componentDidUpdate() {
if (this.props.autoWidth) this._setWidth();
},
componentWillLeave: function componentWillLeave(callback) {
var _this = this;
var rootStyle = React.findDOMNode(this).style;
AutoPrefix.set(rootStyle, 'transition', Transitions.easeOut('250ms', ['opacity', 'transform']));
AutoPrefix.set(rootStyle, 'transform', 'translate3d(0,-8px,0)');
rootStyle.opacity = 0;
setTimeout((function () {
if (_this.isMounted()) callback();
}).bind(this), 250);
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
var selectedIndex = this._getSelectedIndex(nextProps);
this.setState({
focusIndex: selectedIndex >= 0 ? selectedIndex : 0,
keyWidth: nextProps.desktop ? 64 : 56
});
},
render: function render() {
var _this2 = this;
var _props = this.props;
var animated = _props.animated;
var autoWidth = _props.autoWidth;
var children = _props.children;
var desktop = _props.desktop;
var initiallyKeyboardFocused = _props.initiallyKeyboardFocused;
var listStyle = _props.listStyle;
var maxHeight = _props.maxHeight;
var multiple = _props.multiple;
var openDirection = _props.openDirection;
var selectedMenuItemStyle = _props.selectedMenuItemStyle;
var style = _props.style;
var value = _props.value;
var valueLink = _props.valueLink;
var width = _props.width;
var zDepth = _props.zDepth;
var other = _objectWithoutProperties(_props, ['animated', 'autoWidth', 'children', 'desktop', 'initiallyKeyboardFocused', 'listStyle', 'maxHeight', 'multiple', 'openDirection', 'selectedMenuItemStyle', 'style', 'value', 'valueLink', 'width', 'zDepth']);
var openDown = openDirection.split('-')[0] === 'bottom';
var openLeft = openDirection.split('-')[1] === 'left';
var styles = {
root: {
//Nested div bacause the List scales x faster than
//it scales y
transition: animated ? Transitions.easeOut('250ms', 'transform') : null,
position: 'absolute',
zIndex: 10,
top: openDown ? 0 : null,
bottom: !openDown ? 0 : null,
left: !openLeft ? 0 : null,
right: openLeft ? 0 : null,
transform: 'scaleX(0)',
transformOrigin: openLeft ? 'right' : 'left'
},
list: {
display: 'table-cell',
paddingBottom: desktop ? 16 : 8,
paddingTop: desktop ? 16 : 8,
userSelect: 'none',
width: width
},
menuItemContainer: {
transition: animated ? Transitions.easeOut(null, 'opacity') : null,
opacity: 0
},
paper: {
transition: animated ? Transitions.easeOut('500ms', ['transform', 'opacity']) : null,
transform: 'scaleY(0)',
transformOrigin: openDown ? 'top' : 'bottom',
opacity: 0,
maxHeight: maxHeight,
overflowY: maxHeight ? 'scroll' : null
},
selectedMenuItem: {
color: this.context.muiTheme.palette.accent1Color
}
};
var mergedRootStyles = this.mergeAndPrefix(styles.root, style);
var mergedListStyles = this.mergeStyles(styles.list, listStyle);
//Cascade children opacity
var cumulativeDelay = openDown ? 175 : 325;
var cascadeChildrenCount = this._getCascadeChildrenCount();
var cumulativeDelayIncrement = Math.ceil(150 / cascadeChildrenCount);
var menuItemIndex = 0;
var newChildren = React.Children.map(children, (function (child) {
var childIsADivider = child.type.displayName === 'MenuDivider';
var childIsDisabled = child.props.disabled;
var childrenContainerStyles = {};
if (animated) {
var focusIndex = _this2.state.focusIndex;
var transitionDelay = 0;
//Only cascade the visible menu items
if (menuItemIndex >= focusIndex - 1 && menuItemIndex <= focusIndex + cascadeChildrenCount - 1) {
cumulativeDelay = openDown ? cumulativeDelay + cumulativeDelayIncrement : cumulativeDelay - cumulativeDelayIncrement;
transitionDelay = cumulativeDelay;
}
childrenContainerStyles = _this2.mergeAndPrefix(styles.menuItemContainer, {
transitionDelay: transitionDelay + 'ms'
});
}
var clonedChild = childIsADivider ? child : childIsDisabled ? React.cloneElement(child, { desktop: desktop }) : _this2._cloneMenuItem(child, menuItemIndex, styles);
if (!childIsADivider && !childIsDisabled) menuItemIndex++;
return animated ? React.createElement(
'div',
{ style: childrenContainerStyles },
clonedChild
) : clonedChild;
}).bind(this));
return React.createElement(
'div',
{
onKeyDown: this._handleKeyDown,
style: mergedRootStyles },
React.createElement(
Paper,
{
ref: 'scrollContainer',
style: styles.paper,
zDepth: zDepth },
React.createElement(
List,
_extends({}, other, {
ref: 'list',
style: mergedListStyles }),
newChildren
)
)
);
},
setKeyboardFocused: function setKeyboardFocused(keyboardFocused) {
this.setState({
isKeyboardFocused: keyboardFocused
});
},
_animateOpen: function _animateOpen() {
var rootStyle = React.findDOMNode(this).style;
var scrollContainerStyle = React.findDOMNode(this.refs.scrollContainer).style;
var menuContainers = React.findDOMNode(this.refs.list).childNodes;
AutoPrefix.set(rootStyle, 'transform', 'scaleX(1)');
AutoPrefix.set(scrollContainerStyle, 'transform', 'scaleY(1)');
scrollContainerStyle.opacity = 1;
for (var i = 0; i < menuContainers.length; ++i) {
menuContainers[i].style.opacity = 1;
}
},
_cloneMenuItem: function _cloneMenuItem(child, childIndex, styles) {
var _this3 = this;
var _props2 = this.props;
var desktop = _props2.desktop;
var selectedMenuItemStyle = _props2.selectedMenuItemStyle;
var selected = this._isChildSelected(child, this.props);
var selectedChildrenStyles = {};
if (selected) {
selectedChildrenStyles = this.mergeStyles(styles.selectedMenuItem, selectedMenuItemStyle);
}
var mergedChildrenStyles = this.mergeStyles(child.props.style || {}, selectedChildrenStyles);
var isFocused = childIndex === this.state.focusIndex;
var focusState = 'none';
if (isFocused) {
focusState = this.state.isKeyboardFocused ? 'keyboard-focused' : 'focused';
}
return React.cloneElement(child, {
desktop: desktop,
focusState: focusState,
onTouchTap: function onTouchTap(e) {
_this3._handleMenuItemTouchTap(e, child);
if (child.props.onTouchTap) child.props.onTouchTap(e);
},
ref: isFocused ? 'focusedMenuItem' : null,
style: mergedChildrenStyles
});
},
_decrementKeyboardFocusIndex: function _decrementKeyboardFocusIndex() {
var index = this.state.focusIndex;
index--;
if (index < 0) index = 0;
this._setFocusIndex(index, true);
},
_getCascadeChildrenCount: function _getCascadeChildrenCount() {
var _props3 = this.props;
var children = _props3.children;
var desktop = _props3.desktop;
var maxHeight = _props3.maxHeight;
var count = 1;
var currentHeight = desktop ? 16 : 8;
var menuItemHeight = desktop ? 32 : 48;
//MaxHeight isn't set - cascade all of the children
if (!maxHeight) return React.Children.count(children);
//Count all the children that will fit inside the
//max menu height
React.Children.forEach(children, function (child) {
if (currentHeight < maxHeight) {
var childIsADivider = child.type.displayName === 'MenuDivider';
currentHeight += childIsADivider ? 16 : menuItemHeight;
count++;
}
});
return count;
},
_getMenuItemCount: function _getMenuItemCount() {
var menuItemCount = 0;
React.Children.forEach(this.props.children, function (child) {
var childIsADivider = child.type.displayName === 'MenuDivider';
var childIsDisabled = child.props.disabled;
if (!childIsADivider && !childIsDisabled) menuItemCount++;
});
return menuItemCount;
},
_getSelectedIndex: function _getSelectedIndex(props) {
var _this4 = this;
var children = props.children;
var selectedIndex = -1;
var menuItemIndex = 0;
React.Children.forEach(children, (function (child) {
var childIsADivider = child.type.displayName === 'MenuDivider';
if (_this4._isChildSelected(child, props)) selectedIndex = menuItemIndex;
if (!childIsADivider) menuItemIndex++;
}).bind(this));
return selectedIndex;
},
_handleKeyDown: function _handleKeyDown(e) {
switch (e.keyCode) {
case KeyCode.DOWN:
e.preventDefault();
this._incrementKeyboardFocusIndex();
break;
case KeyCode.ESC:
this.props.onEscKeyDown(e);
break;
case KeyCode.TAB:
e.preventDefault();
if (e.shiftKey) {
this._decrementKeyboardFocusIndex();
} else {
this._incrementKeyboardFocusIndex();
}
break;
case KeyCode.UP:
e.preventDefault();
this._decrementKeyboardFocusIndex();
break;
}
this.props.onKeyDown(e);
},
_handleMenuItemTouchTap: function _handleMenuItemTouchTap(e, item) {
var multiple = this.props.multiple;
var valueLink = this.getValueLink(this.props);
var menuValue = valueLink.value;
var itemValue = item.props.value;
if (multiple) {
var index = menuValue.indexOf(itemValue);
var newMenuValue = index === -1 ? update(menuValue, { $push: [itemValue] }) : update(menuValue, { $splice: [[index, 1]] });
valueLink.requestChange(e, newMenuValue);
} else if (!multiple && itemValue !== menuValue) {
valueLink.requestChange(e, itemValue);
}
this.props.onItemTouchTap(e, item);
},
_incrementKeyboardFocusIndex: function _incrementKeyboardFocusIndex() {
var index = this.state.focusIndex;
var maxIndex = this._getMenuItemCount() - 1;
index++;
if (index > maxIndex) index = maxIndex;
this._setFocusIndex(index, true);
},
_isChildSelected: function _isChildSelected(child, props) {
var multiple = props.multiple;
var menuValue = this.getValueLink(props).value;
var childValue = child.props.value;
return multiple && menuValue.length && menuValue.indexOf(childValue) !== -1 || !multiple && menuValue && menuValue === childValue;
},
_setFocusIndex: function _setFocusIndex(newIndex, isKeyboardFocused) {
this.setState({
focusIndex: newIndex,
isKeyboardFocused: isKeyboardFocused
});
},
_setScollPosition: function _setScollPosition() {
var desktop = this.props.desktop;
var focusedMenuItem = this.refs.focusedMenuItem;
var menuItemHeight = desktop ? 32 : 48;
if (focusedMenuItem) {
var selectedOffSet = React.findDOMNode(focusedMenuItem).offsetTop;
//Make the focused item be the 2nd item in the list the
//user sees
var scrollTop = selectedOffSet - menuItemHeight;
if (scrollTop < menuItemHeight) scrollTop = 0;
React.findDOMNode(this.refs.scrollContainer).scrollTop = scrollTop;
}
},
_setWidth: function _setWidth() {
var el = React.findDOMNode(this);
var listEl = React.findDOMNode(this.refs.list);
var elWidth = el.offsetWidth;
var keyWidth = this.state.keyWidth;
var minWidth = keyWidth * 1.5;
var keyIncrements = elWidth / keyWidth;
var newWidth = undefined;
keyIncrements = keyIncrements <= 1.5 ? 1.5 : Math.ceil(keyIncrements);
newWidth = keyIncrements * keyWidth;
if (newWidth < minWidth) newWidth = minWidth;
el.style.width = newWidth + 'px';
listEl.style.width = newWidth + 'px';
}
});
module.exports = Menu;
},{"../lists/list":41,"../mixins/controllable":50,"../mixins/style-propable":52,"../paper":56,"../styles/auto-prefix":68,"../styles/transitions":75,"../utils/key-code":132,"../utils/prop-types":135,"react/addons":140}],49:[function(require,module,exports){
'use strict';
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 componentDidMount() {
if (!this.manuallyBindClickAway) this._bindClickAway();
},
componentWillUnmount: function componentWillUnmount() {
this._unbindClickAway();
},
_checkClickAway: function _checkClickAway(event) {
var el = React.findDOMNode(this);
// Check if the target is inside the current component
if (event.target !== el && !Dom.isDescendant(el, event.target) && document.documentElement.contains(event.target)) {
if (this.componentClickAway) this.componentClickAway();
}
},
_bindClickAway: function _bindClickAway() {
// On touch-enabled devices, both events fire, and the handler is called twice,
// but it's fine since all operations for which the mixin is used
// are idempotent.
Events.on(document, 'mouseup', this._checkClickAway);
Events.on(document, 'touchend', this._checkClickAway);
},
_unbindClickAway: function _unbindClickAway() {
Events.off(document, 'mouseup', this._checkClickAway);
Events.off(document, 'touchend', this._checkClickAway);
}
};
},{"../utils/dom":127,"../utils/events":128,"react":312}],50:[function(require,module,exports){
'use strict';
var React = require('react/addons');
module.exports = {
propTypes: {
onChange: React.PropTypes.func,
value: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.array]),
valueLink: React.PropTypes.shape({
value: React.PropTypes.string.isRequired,
requestChange: React.PropTypes.func.isRequired
})
},
getDefaultProps: function getDefaultProps() {
return {
onChange: function onChange() {}
};
},
getValueLink: function getValueLink(props) {
return props.valueLink || {
value: props.value,
requestChange: props.onChange
};
}
};
},{"react/addons":140}],51:[function(require,module,exports){
'use strict';
module.exports = {
ClickAwayable: require('./click-awayable'),
WindowListenable: require('./window-listenable'),
StylePropable: require('./style-propable'),
StyleResizable: require('./style-resizable')
};
},{"./click-awayable":49,"./style-propable":52,"./style-resizable":53,"./window-listenable":54}],52:[function(require,module,exports){
'use strict';
var React = require('react');
var ImmutabilityHelper = require('../utils/immutability-helper');
var Styles = require('../utils/styles');
// This mixin isn't necessary and will be removed in v0.11
/**
* @params:
* styles = Current styles.
* props = New style properties that will override the current style.
*/
module.exports = {
propTypes: {
style: React.PropTypes.object
},
//Moved this function to ImmutabilityHelper.merge
mergeStyles: function mergeStyles() {
return ImmutabilityHelper.merge.apply(this, arguments);
},
//Moved this function to /utils/styles.js
mergeAndPrefix: function mergeAndPrefix() {
return Styles.mergeAndPrefix.apply(this, arguments);
}
};
},{"../utils/immutability-helper":130,"../utils/styles":136,"react":312}],53:[function(require,module,exports){
'use strict';
var Events = require('../utils/events');
var Sizes = {
SMALL: 1,
MEDIUM: 2,
LARGE: 3
};
module.exports = {
statics: {
Sizes: Sizes
},
getInitialState: function getInitialState() {
return {
deviceSize: Sizes.SMALL
};
},
componentDidMount: function componentDidMount() {
this._updateDeviceSize();
if (!this.manuallyBindResize) this._bindResize();
},
componentWillUnmount: function componentWillUnmount() {
this._unbindResize();
},
isDeviceSize: function isDeviceSize(desiredSize) {
return this.state.deviceSize >= desiredSize;
},
_updateDeviceSize: function _updateDeviceSize() {
var width = window.innerWidth;
if (width >= 992) this.setState({ deviceSize: Sizes.LARGE });else if (width >= 768) this.setState({ deviceSize: Sizes.MEDIUM });else this.setState({ deviceSize: Sizes.SMALL }); // width >= 375
},
_bindResize: function _bindResize() {
Events.on(window, 'resize', this._updateDeviceSize);
},
_unbindResize: function _unbindResize() {
Events.off(window, 'resize', this._updateDeviceSize);
}
};
},{"../utils/events":128}],54:[function(require,module,exports){
'use strict';
var Events = require('../utils/events');
module.exports = {
componentDidMount: function componentDidMount() {
var listeners = this.windowListeners;
for (var eventName in listeners) {
var callbackName = listeners[eventName];
Events.on(window, eventName, this[callbackName]);
}
},
componentWillUnmount: function componentWillUnmount() {
var listeners = this.windowListeners;
for (var eventName in listeners) {
var callbackName = listeners[eventName];
Events.off(window, eventName, this[callbackName]);
}
}
};
},{"../utils/events":128}],55:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var Colors = require('./styles/colors');
var Overlay = React.createClass({
displayName: 'Overlay',
_originalBodyOverflow: '',
mixins: [StylePropable],
propTypes: {
autoLockScrolling: React.PropTypes.bool,
show: React.PropTypes.bool,
transitionEnabled: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
autoLockScrolling: true,
transitionEnabled: true
};
},
componentDidMount: function componentDidMount() {
this._originalBodyOverflow = document.getElementsByTagName('body')[0].style.oveflow;
},
componentDidUpdate: function componentDidUpdate() {
if (this.props.autoLockScrolling) {
if (this.props.show) {
this._preventScrolling();
} else {
this._allowScrolling();
}
}
},
componentWillUnmount: function componentWillUnmount() {
this._allowScrolling();
},
setOpacity: function setOpacity(opacity) {
var overlay = React.findDOMNode(this);
overlay.style.opacity = opacity;
},
getStyles: function getStyles() {
var styles = {
root: {
position: 'fixed',
height: '100%',
width: '100%',
zIndex: 9,
top: 0,
left: '-100%',
opacity: 0,
backgroundColor: Colors.lightBlack,
WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
// Two ways to promote overlay to its own render layer
willChange: 'opacity',
transform: 'translateZ(0)',
transition: this.props.transitionEnabled && Transitions.easeOut('0ms', 'left', '400ms') + ',' + Transitions.easeOut('400ms', 'opacity')
},
rootWhenShown: {
left: '0',
opacity: 1,
transition: this.props.transitionEnabled && Transitions.easeOut('0ms', 'left') + ',' + Transitions.easeOut('400ms', 'opacity')
}
};
return styles;
},
render: function render() {
var _props = this.props;
var show = _props.show;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['show', 'style']);
var styles = this.mergeAndPrefix(this.getStyles().root, this.props.style, this.props.show && this.getStyles().rootWhenShown);
return React.createElement('div', _extends({}, other, { style: styles }));
},
preventScrolling: function preventScrolling() {
if (!this.props.autoLockScrolling) this._preventScrolling();
},
allowScrolling: function allowScrolling() {
if (!this.props.autoLockScrolling) this._allowScrolling();
},
_preventScrolling: function _preventScrolling() {
var body = document.getElementsByTagName('body')[0];
body.style.overflow = 'hidden';
},
_allowScrolling: function _allowScrolling() {
var body = document.getElementsByTagName('body')[0];
body.style.overflow = this._originalBodyOverflow || '';
}
});
module.exports = Overlay;
},{"./mixins/style-propable":52,"./styles/colors":69,"./styles/transitions":75,"react":312}],56:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var StylePropable = require('./mixins/style-propable');
var PropTypes = require('./utils/prop-types');
var Transitions = require('./styles/transitions');
var Paper = React.createClass({
displayName: 'Paper',
mixins: [PureRenderMixin, StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
circle: React.PropTypes.bool,
rounded: React.PropTypes.bool,
transitionEnabled: React.PropTypes.bool,
zDepth: PropTypes.zDepth
},
getDefaultProps: function getDefaultProps() {
return {
circle: false,
rounded: true,
transitionEnabled: true,
zDepth: 1
};
},
render: function render() {
var _props = this.props;
var children = _props.children;
var circle = _props.circle;
var rounded = _props.rounded;
var style = _props.style;
var transitionEnabled = _props.transitionEnabled;
var zDepth = _props.zDepth;
var other = _objectWithoutProperties(_props, ['children', 'circle', 'rounded', 'style', 'transitionEnabled', 'zDepth']);
var styles = {
backgroundColor: this.context.muiTheme.component.paper.backgroundColor,
transition: transitionEnabled && Transitions.easeOut(),
boxSizing: 'border-box',
fontFamily: this.context.muiTheme.contentFontFamily,
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
boxShadow: this._getZDepthShadows(zDepth),
borderRadius: circle ? '50%' : rounded ? '2px' : '0px'
};
return React.createElement(
'div',
_extends({}, other, { style: this.mergeAndPrefix(styles, style) }),
children
);
},
_getZDepthShadows: function _getZDepthShadows(zDepth) {
var shadows = [null, '0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24)', '0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23)', '0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23)', '0 14px 45px rgba(0, 0, 0, 0.25), 0 10px 18px rgba(0, 0, 0, 0.22)', '0 19px 60px rgba(0, 0, 0, 0.30), 0 15px 20px rgba(0, 0, 0, 0.22)'];
return shadows[zDepth];
}
});
module.exports = Paper;
},{"./mixins/style-propable":52,"./styles/transitions":75,"./utils/prop-types":135,"react/addons":140}],57:[function(require,module,exports){
(function (process){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var RadioButton = require('./radio-button');
var RadioButtonGroup = React.createClass({
displayName: 'RadioButtonGroup',
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 _hasCheckAttribute(radioButton) {
return radioButton.props.hasOwnProperty('checked') && radioButton.props.checked;
},
getInitialState: function getInitialState() {
return {
numberCheckedRadioButtons: 0,
selected: this.props.valueSelected || this.props.defaultSelected || ''
};
},
componentWillMount: function componentWillMount() {
var _this = this;
var cnt = 0;
React.Children.forEach(this.props.children, function (option) {
if (_this._hasCheckAttribute(option)) cnt++;
}, this);
this.setState({ numberCheckedRadioButtons: cnt });
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (nextProps.hasOwnProperty('valueSelected')) {
this.setState({ selected: nextProps.valueSelected });
}
},
render: function render() {
var _this2 = this;
var options = React.Children.map(this.props.children, function (option) {
var _option$props = option.props;
var name = _option$props.name;
var value = _option$props.value;
var label = _option$props.label;
var onCheck = _option$props.onCheck;
var other = _objectWithoutProperties(_option$props, ['name', 'value', 'label', 'onCheck']);
return React.createElement(RadioButton, _extends({}, other, {
ref: option.props.value,
name: _this2.props.name,
key: option.props.value,
value: option.props.value,
label: option.props.label,
labelPosition: _this2.props.labelPosition,
onCheck: _this2._onChange,
checked: option.props.value === _this2.state.selected }));
}, this);
return React.createElement(
'div',
{
style: this.props.style,
className: this.props.className || '' },
options
);
},
_updateRadioButtons: function _updateRadioButtons(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 _onChange(e, newSelection) {
this._updateRadioButtons(newSelection);
// Successful update
if (this.state.numberCheckedRadioButtons === 0) {
if (this.props.onChange) this.props.onChange(e, newSelection);
}
},
getSelectedValue: function getSelectedValue() {
return this.state.selected;
},
setSelectedValue: function setSelectedValue(newSelectionValue) {
this._updateRadioButtons(newSelectionValue);
},
clearValue: function clearValue() {
this.setSelectedValue('');
}
});
module.exports = RadioButtonGroup;
}).call(this,require('_process'))
},{"./radio-button":58,"_process":138,"react":312}],58:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var EnhancedSwitch = require('./enhanced-switch');
var RadioButtonOff = require('./svg-icons/toggle/radio-button-unchecked');
var RadioButtonOn = require('./svg-icons/toggle/radio-button-checked');
var RadioButton = React.createClass({
displayName: 'RadioButton',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
iconStyle: React.PropTypes.object,
labelStyle: React.PropTypes.object,
onCheck: React.PropTypes.func
},
getTheme: function getTheme() {
return this.context.muiTheme.component.radioButton;
},
getStyles: function getStyles() {
var styles = {
icon: {
height: this.getTheme().size,
width: this.getTheme().size
},
target: {
transition: Transitions.easeOut(),
position: 'absolute',
opacity: 1,
transform: 'scale(1)',
fill: this.getTheme().borderColor
},
fill: {
position: 'absolute',
opacity: 1,
transform: 'scale(0)',
transformOrigin: '50% 50%',
transition: Transitions.easeOut(),
fill: this.getTheme().checkedColor
},
targetWhenChecked: {
opacity: 0,
transform: 'scale(0)'
},
fillWhenChecked: {
opacity: 1,
transform: 'scale(1)'
},
targetWhenDisabled: {
fill: this.getTheme().disabledColor
},
fillWhenDisabled: {
fill: this.getTheme().disabledColor
},
label: {
color: this.props.disabled ? this.getTheme().labelDisabledColor : this.getTheme().labelColor
}
};
return styles;
},
render: function render() {
var _props = this.props;
var onCheck = _props.onCheck;
var other = _objectWithoutProperties(_props, ['onCheck']);
var styles = this.getStyles();
var onStyles = this.mergeAndPrefix(styles.target, this.props.checked && styles.targetWhenChecked, this.props.iconStyle, this.props.disabled && styles.targetWhenDisabled);
var offStyles = this.mergeAndPrefix(styles.fill, this.props.checked && styles.fillWhenChecked, this.props.iconStyle, this.props.disabled && styles.fillWhenDisabled);
var radioButtonElement = React.createElement(
'div',
null,
React.createElement(RadioButtonOff, { style: onStyles }),
React.createElement(RadioButtonOn, { style: offStyles })
);
var rippleColor = this.props.checked ? this.getTheme().checkedColor : this.getTheme().borderColor;
var iconStyle = this.mergeAndPrefix(styles.icon, this.props.iconStyle);
var labelStyle = this.mergeAndPrefix(styles.label, this.props.labelStyle);
var enhancedSwitchProps = {
ref: "enhancedSwitch",
inputType: "radio",
switched: this.props.checked || false,
switchElement: radioButtonElement,
rippleColor: rippleColor,
iconStyle: iconStyle,
labelStyle: labelStyle,
onSwitch: this._handleCheck,
onParentShouldUpdate: this._handleStateChange,
labelPosition: this.props.labelPosition ? this.props.labelPosition : "right"
};
return React.createElement(EnhancedSwitch, _extends({}, other, enhancedSwitchProps));
},
// Only called when selected, not when unselected.
_handleCheck: function _handleCheck(e) {
if (this.props.onCheck) this.props.onCheck(e, this.props.value);
},
_handleStateChange: function _handleStateChange() {},
isChecked: function isChecked() {
return this.refs.enhancedSwitch.isSwitched();
},
// Use RadioButtonGroup.setSelectedValue(newSelectionValue) to set a
// RadioButton's checked value.
setChecked: function setChecked(newCheckedValue) {
this.refs.enhancedSwitch.setSwitched(newCheckedValue);
},
getValue: function getValue() {
return this.refs.enhancedSwitch.getValue();
}
});
module.exports = RadioButton;
},{"./enhanced-switch":29,"./mixins/style-propable":52,"./styles/transitions":75,"./svg-icons/toggle/radio-button-checked":89,"./svg-icons/toggle/radio-button-unchecked":90,"react":312}],59:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var ColorManipulator = require('./utils/color-manipulator');
var Typography = require('./styles/typography');
var EnhancedButton = require('./enhanced-button');
var Paper = require('./paper');
function validateLabel(props, propName, componentName) {
if (!props.children && !props.label) {
return new Error('Required prop label or children was not ' + 'specified in ' + componentName + '.');
}
}
var RaisedButton = React.createClass({
displayName: 'RaisedButton',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
label: validateLabel,
onMouseDown: React.PropTypes.func,
onMouseUp: React.PropTypes.func,
onMouseLeave: React.PropTypes.func,
onTouchEnd: React.PropTypes.func,
onTouchStart: React.PropTypes.func,
primary: React.PropTypes.bool,
secondary: React.PropTypes.bool,
labelStyle: React.PropTypes.object,
backgroundColor: React.PropTypes.string,
labelColor: React.PropTypes.string,
disabledBackgroundColor: React.PropTypes.string,
disabledLabelColor: React.PropTypes.string,
fullWidth: React.PropTypes.bool
},
getInitialState: function getInitialState() {
var zDepth = this.props.disabled ? 0 : 1;
return {
hovered: false,
touched: false,
initialZDepth: zDepth,
zDepth: zDepth
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
var zDepth = nextProps.disabled ? 0 : 1;
this.setState({
zDepth: zDepth,
initialZDepth: zDepth
});
},
_getBackgroundColor: function _getBackgroundColor() {
var disabledColor = this.props.disabledBackgroundColor ? this.props.disabledBackgroundColor : this.getTheme().disabledColor;
return this.props.disabled ? disabledColor : this.props.backgroundColor ? this.props.backgroundColor : this.props.primary ? this.getTheme().primaryColor : this.props.secondary ? this.getTheme().secondaryColor : this.getTheme().color;
},
_getLabelColor: function _getLabelColor() {
var disabledColor = this.props.disabledLabelColor ? this.props.disabledLabelColor : this.getTheme().disabledTextColor;
return this.props.disabled ? disabledColor : this.props.labelColor ? this.props.labelColor : this.props.primary ? this.getTheme().primaryTextColor : this.props.secondary ? this.getTheme().secondaryTextColor : this.getTheme().textColor;
},
getThemeButton: function getThemeButton() {
return this.context.muiTheme.component.button;
},
getTheme: function getTheme() {
return this.context.muiTheme.component.raisedButton;
},
getStyles: function getStyles() {
var amount = this.props.primary || this.props.secondary ? 0.4 : 0.08;
var styles = {
root: {
backgroundColor: 'none',
display: 'inline-block',
minWidth: this.props.fullWidth ? '100%' : this.getThemeButton().minWidth,
height: this.getThemeButton().height,
transition: Transitions.easeOut()
},
container: {
position: 'relative',
height: '100%',
width: '100%',
padding: 0,
overflow: 'hidden',
borderRadius: 2,
transition: Transitions.easeOut(),
backgroundColor: this._getBackgroundColor(),
//This is need so that ripples do not bleed
//past border radius.
//See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
transform: 'translate3d(0, 0, 0)'
},
label: {
position: 'relative',
opacity: 1,
fontSize: '14px',
letterSpacing: 0,
textTransform: 'uppercase',
fontWeight: Typography.fontWeightMedium,
margin: 0,
padding: '0px ' + this.context.muiTheme.spacing.desktopGutterLess + 'px',
userSelect: 'none',
lineHeight: this.props.style && this.props.style.height ? this.props.style.height : this.getThemeButton().height + 'px',
color: this._getLabelColor()
},
overlay: {
transition: Transitions.easeOut(),
top: 0
},
overlayWhenHovered: {
backgroundColor: ColorManipulator.fade(this._getLabelColor(), amount)
}
};
return styles;
},
render: function render() {
var _props = this.props;
var disabled = _props.disabled;
var label = _props.label;
var primary = _props.primary;
var secondary = _props.secondary;
var other = _objectWithoutProperties(_props, ['disabled', 'label', 'primary', 'secondary']);
var styles = this.getStyles();
var labelElement = undefined;
if (label) {
labelElement = React.createElement(
'span',
{ style: this.mergeAndPrefix(styles.label, this.props.labelStyle) },
label
);
}
var rippleColor = styles.label.color;
var rippleOpacity = !(primary || secondary) ? 0.1 : 0.16;
var buttonEventHandlers = disabled ? null : {
onMouseDown: this._handleMouseDown,
onMouseUp: this._handleMouseUp,
onMouseLeave: this._handleMouseLeave,
onMouseEnter: this._handleMouseEnter,
onTouchStart: this._handleTouchStart,
onTouchEnd: this._handleTouchEnd,
onKeyboardFocus: this._handleKeyboardFocus
};
return React.createElement(
Paper,
{
style: this.mergeAndPrefix(styles.root, this.props.style),
zDepth: this.state.zDepth },
React.createElement(
EnhancedButton,
_extends({}, other, buttonEventHandlers, {
ref: 'container',
disabled: disabled,
style: this.mergeAndPrefix(styles.container),
focusRippleColor: rippleColor,
touchRippleColor: rippleColor,
focusRippleOpacity: rippleOpacity,
touchRippleOpacity: rippleOpacity }),
React.createElement(
'div',
{ ref: 'overlay', style: this.mergeAndPrefix(styles.overlay, this.state.hovered && !this.props.disabled && styles.overlayWhenHovered) },
labelElement,
this.props.children
)
)
);
},
_handleMouseDown: function _handleMouseDown(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 _handleMouseUp(e) {
this.setState({ zDepth: this.state.initialZDepth });
if (this.props.onMouseUp) this.props.onMouseUp(e);
},
_handleMouseLeave: function _handleMouseLeave(e) {
if (!this.refs.container.isKeyboardFocused()) this.setState({ zDepth: this.state.initialZDepth, hovered: false });
if (this.props.onMouseLeave) this.props.onMouseLeave(e);
},
_handleMouseEnter: function _handleMouseEnter(e) {
if (!this.refs.container.isKeyboardFocused() && !this.state.touch) {
this.setState({ hovered: true });
}
if (this.props.onMouseEnter) this.props.onMouseEnter(e);
},
_handleTouchStart: function _handleTouchStart(e) {
this.setState({
touch: true,
zDepth: this.state.initialZDepth + 1
});
if (this.props.onTouchStart) this.props.onTouchStart(e);
},
_handleTouchEnd: function _handleTouchEnd(e) {
this.setState({ zDepth: this.state.initialZDepth });
if (this.props.onTouchEnd) this.props.onTouchEnd(e);
},
_handleKeyboardFocus: function _handleKeyboardFocus(e, keyboardFocused) {
if (keyboardFocused && !this.props.disabled) {
this.setState({ zDepth: this.state.initialZDepth + 1 });
var amount = this.props.primary || this.props.secondary ? 0.4 : 0.08;
React.findDOMNode(this.refs.overlay).style.backgroundColor = ColorManipulator.fade(this.mergeAndPrefix(this.getStyles().label, this.props.labelStyle).color, amount);
} else if (!this.state.hovered) {
this.setState({ zDepth: this.state.initialZDepth });
React.findDOMNode(this.refs.overlay).style.backgroundColor = 'transparent';
}
}
});
module.exports = RaisedButton;
},{"./enhanced-button":28,"./mixins/style-propable":52,"./paper":56,"./styles/transitions":75,"./styles/typography":76,"./utils/color-manipulator":124,"react":312}],60:[function(require,module,exports){
'use strict';
var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var StylePropable = require('./mixins/style-propable');
var AutoPrefix = require('./styles/auto-prefix');
var Transitions = require("./styles/transitions");
var Paper = require('./paper');
var VIEWBOX_SIZE = 32;
var RefreshIndicator = _react2['default'].createClass({
displayName: 'RefreshIndicator',
mixins: [StylePropable],
propTypes: {
left: _react2['default'].PropTypes.number.isRequired,
percentage: _react2['default'].PropTypes.number,
size: _react2['default'].PropTypes.number,
status: _react2['default'].PropTypes.oneOf(['ready', 'loading', 'hide']),
style: _react2['default'].PropTypes.object,
top: _react2['default'].PropTypes.number.isRequired
},
getDefaultProps: function getDefaultProps() {
return {
percentage: 0,
size: 40,
status: 'hide'
};
},
contextTypes: {
muiTheme: _react2['default'].PropTypes.object
},
componentDidMount: function componentDidMount() {
this.componentDidUpdate();
},
componentDidUpdate: function componentDidUpdate() {
this._scalePath(_react2['default'].findDOMNode(this.refs.path), 0);
this._rotateWrapper(_react2['default'].findDOMNode(this.refs.wrapper));
},
render: function render() {
var rootStyle = this._getRootStyle();
return _react2['default'].createElement(
Paper,
{
circle: true,
style: this.mergeAndPrefix(rootStyle, this.props.style),
ref: 'indicatorCt'
},
this._renderChildren()
);
},
_renderChildren: function _renderChildren() {
var paperSize = this._getPaperSize();
var childrenCmp = null;
if (this.props.status !== 'ready') {
var circleStyle = this._getCircleStyle(paperSize);
childrenCmp = _react2['default'].createElement(
'div',
{ ref: 'wrapper', style: this.mergeAndPrefix({
transition: Transitions.create('transform', '20s', null, 'linear'),
width: '100%',
height: '100%'
})
},
_react2['default'].createElement(
'svg',
{ style: {
width: paperSize,
height: paperSize
},
viewBox: '0 0 ' + VIEWBOX_SIZE + ' ' + VIEWBOX_SIZE
},
_react2['default'].createElement('circle', _extends({ ref: 'path',
style: this.mergeAndPrefix(circleStyle.style, {
transition: Transitions.create('all', '1.5s', null, 'ease-in-out')
})
}, circleStyle.attr))
)
);
} else {
var circleStyle = this._getCircleStyle(paperSize);
var polygonStyle = this._getPolygonStyle(paperSize);
childrenCmp = _react2['default'].createElement(
'svg',
{ style: {
width: paperSize,
height: paperSize
},
viewBox: '0 0 ' + VIEWBOX_SIZE + ' ' + VIEWBOX_SIZE
},
_react2['default'].createElement('circle', _extends({
style: this.mergeAndPrefix(circleStyle.style)
}, circleStyle.attr)),
_react2['default'].createElement('polygon', _extends({
style: this.mergeAndPrefix(polygonStyle.style)
}, polygonStyle.attr))
);
}
return childrenCmp;
},
_getTheme: function _getTheme() {
return this.context.muiTheme.component.refreshIndicator;
},
_getPaddingSize: function _getPaddingSize() {
var padding = this.props.size * 0.1;
return padding;
},
_getPaperSize: function _getPaperSize() {
return this.props.size - this._getPaddingSize() * 2;
},
_getCircleAttr: function _getCircleAttr() {
return {
radiu: VIEWBOX_SIZE / 2 - 5,
originX: VIEWBOX_SIZE / 2,
originY: VIEWBOX_SIZE / 2,
strokeWidth: 3
};
},
_getArcDeg: function _getArcDeg() {
var p = this.props.percentage / 100;
var beginDeg = p * 120;
var endDeg = p * 410;
return [beginDeg, endDeg];
},
_getFactor: function _getFactor() {
var p = this.props.percentage / 100;
var p1 = Math.min(1, p / 0.4);
return p1;
},
_getRootStyle: function _getRootStyle() {
var padding = this._getPaddingSize();
return {
position: "absolute",
zIndex: 2,
width: this.props.size,
height: this.props.size,
padding: padding,
top: -10000,
left: -10000,
transform: 'translate3d(' + (10000 + this.props.left) + 'px, ' + (10000 + this.props.top) + 'px, 0)',
opacity: this.props.status === 'hide' ? 0 : 1,
transition: this.props.status === 'hide' ? Transitions.create('all', '.3s', 'ease-out') : 'none'
};
},
_getCircleStyle: function _getCircleStyle() {
var isLoading = this.props.status === 'loading';
var p1 = isLoading ? 1 : this._getFactor();
var circle = this._getCircleAttr();
var perimeter = Math.PI * 2 * circle.radiu;
var _getArcDeg2 = this._getArcDeg();
var _getArcDeg22 = _slicedToArray(_getArcDeg2, 2);
var beginDeg = _getArcDeg22[0];
var endDeg = _getArcDeg22[1];
var arcLen = (endDeg - beginDeg) * perimeter / 360;
var dashOffset = -beginDeg * perimeter / 360;
var theme = this._getTheme();
return {
style: {
strokeDasharray: arcLen + ', ' + (perimeter - arcLen),
strokeDashoffset: dashOffset,
stroke: isLoading || this.props.percentage === 100 ? theme.loadingStrokeColor : theme.strokeColor,
strokeLinecap: 'round',
opacity: p1,
strokeWidth: circle.strokeWidth * p1,
fill: 'none'
},
attr: {
cx: circle.originX,
cy: circle.originY,
r: circle.radiu
}
};
},
_getPolygonStyle: function _getPolygonStyle() {
var p1 = this._getFactor();
var circle = this._getCircleAttr();
var triangleCx = circle.originX + circle.radiu;
var triangleCy = circle.originY;
var dx = circle.strokeWidth * 7 / 4 * p1;
var trianglePath = triangleCx - dx + ',' + triangleCy + ' ' + (triangleCx + dx) + ',' + triangleCy + ' ' + triangleCx + ',' + (triangleCy + dx);
var _getArcDeg3 = this._getArcDeg();
var _getArcDeg32 = _slicedToArray(_getArcDeg3, 2);
var endDeg = _getArcDeg32[1];
var theme = this._getTheme();
return {
style: {
fill: this.props.percentage === 100 ? theme.loadingStrokeColor : theme.strokeColor,
transform: 'rotate(' + endDeg + 'deg)',
transformOrigin: circle.originX + 'px ' + circle.originY + 'px',
opacity: p1
},
attr: {
points: trianglePath
}
};
},
_scalePath: function _scalePath(path, step) {
if (this.props.status !== 'loading' || !this.isMounted()) return;
var currStep = (step || 0) % 3;
clearTimeout(this._timer1);
this._timer1 = setTimeout(this._scalePath.bind(this, path, currStep + 1), currStep ? 750 : 250);
var circle = this._getCircleAttr();
var perimeter = Math.PI * 2 * circle.radiu;
var arcLen = perimeter * 0.64;
if (currStep === 0) {
path.style.strokeDasharray = '1, 200';
path.style.strokeDashoffset = 0;
path.style[this.prefixed('transitionDuration')] = '0ms';
} else if (currStep === 1) {
path.style.strokeDasharray = arcLen + ', 200';
path.style.strokeDashoffset = -15;
path.style[this.prefixed('transitionDuration')] = '750ms';
} else {
path.style.strokeDasharray = arcLen + ',200';
path.style.strokeDashoffset = -(perimeter - 1);
path.style[this.prefixed('transitionDuration')] = '850ms';
}
},
_rotateWrapper: function _rotateWrapper(wrapper) {
var _this = this;
if (this.props.status !== 'loading' || !this.isMounted()) return;
clearTimeout(this._timer2);
this._timer2 = setTimeout(this._rotateWrapper.bind(this, wrapper), 10050);
AutoPrefix.set(wrapper.style, "transform", null);
AutoPrefix.set(wrapper.style, "transform", "rotate(0deg)");
AutoPrefix.set(wrapper.style, "transitionDuration", "0ms");
setTimeout(function () {
if (_this.isMounted()) {
AutoPrefix.set(wrapper.style, "transform", "rotate(1800deg)");
wrapper.style.transitionDuration = "10s";
AutoPrefix.set(wrapper.style, "transitionTimingFunction", "linear");
}
}, 50);
},
prefixed: function prefixed(key) {
return AutoPrefix.single(key);
}
});
module.exports = RefreshIndicator;
},{"./mixins/style-propable":52,"./paper":56,"./styles/auto-prefix":68,"./styles/transitions":75,"react":312}],61:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var StylePropable = require('../mixins/style-propable');
var AutoPrefix = require('../styles/auto-prefix');
var Transitions = require('../styles/transitions');
var Colors = require('../styles/colors');
var CircleRipple = React.createClass({
displayName: 'CircleRipple',
mixins: [PureRenderMixin, StylePropable],
propTypes: {
color: React.PropTypes.string,
opacity: React.PropTypes.number
},
getDefaultProps: function getDefaultProps() {
return {
color: Colors.darkBlack,
opacity: 0.16
};
},
componentWillAppear: function componentWillAppear(callback) {
this._initializeAnimation(callback);
},
componentWillEnter: function componentWillEnter(callback) {
this._initializeAnimation(callback);
},
componentDidAppear: function componentDidAppear() {
this._animate();
},
componentDidEnter: function componentDidEnter() {
this._animate();
},
componentWillLeave: function componentWillLeave(callback) {
var _this = this;
var style = React.findDOMNode(this).style;
style.opacity = 0;
setTimeout((function () {
if (_this.isMounted()) callback();
}).bind(this), 2000);
},
render: function render() {
var _props = this.props;
var color = _props.color;
var opacity = _props.opacity;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['color', 'opacity', 'style']);
var mergedStyles = this.mergeAndPrefix({
position: 'absolute',
top: 0,
left: 0,
height: '100%',
width: '100%',
borderRadius: '50%',
backgroundColor: color
}, style);
return React.createElement('div', _extends({}, other, { style: mergedStyles }));
},
_animate: function _animate() {
var style = React.findDOMNode(this).style;
var transitionValue = Transitions.easeOut('2s', 'opacity') + ',' + Transitions.easeOut('1s', 'transform');
AutoPrefix.set(style, 'transition', transitionValue);
AutoPrefix.set(style, 'transform', 'scale(1)');
},
_initializeAnimation: function _initializeAnimation(callback) {
var _this2 = this;
var style = React.findDOMNode(this).style;
style.opacity = this.props.opacity;
AutoPrefix.set(style, 'transform', 'scale(0)');
setTimeout((function () {
if (_this2.isMounted()) callback();
}).bind(this), 0);
}
});
module.exports = CircleRipple;
},{"../mixins/style-propable":52,"../styles/auto-prefix":68,"../styles/colors":69,"../styles/transitions":75,"react/addons":140}],62:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var StylePropable = require('../mixins/style-propable');
var AutoPrefix = require('../styles/auto-prefix');
var Colors = require('../styles/colors');
var Transitions = require('../styles/transitions');
var ScaleInTransitionGroup = require('../transition-groups/scale-in');
var pulsateDuration = 750;
var FocusRipple = React.createClass({
displayName: 'FocusRipple',
mixins: [PureRenderMixin, StylePropable],
propTypes: {
color: React.PropTypes.string,
innerStyle: React.PropTypes.object,
opacity: React.PropTypes.number,
show: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
color: Colors.darkBlack
};
},
componentDidMount: function componentDidMount() {
if (this.props.show) {
this._setRippleSize();
this._pulsate();
}
},
componentDidUpdate: function componentDidUpdate() {
if (this.props.show) {
this._setRippleSize();
this._pulsate();
} else {
if (this._timeout) clearTimeout(this._timeout);
}
},
render: function render() {
var _props = this.props;
var show = _props.show;
var style = _props.style;
var mergedRootStyles = this.mergeStyles({
height: '100%',
width: '100%',
position: 'absolute',
top: 0,
left: 0
}, style);
var ripple = show ? this._getRippleElement(this.props) : null;
return React.createElement(
ScaleInTransitionGroup,
{
maxScale: 0.85,
style: mergedRootStyles },
ripple
);
},
_getRippleElement: function _getRippleElement(props) {
var color = props.color;
var innerStyle = props.innerStyle;
var opacity = props.opacity;
var innerStyles = this.mergeAndPrefix({
position: 'absolute',
height: '100%',
width: '100%',
borderRadius: '50%',
opacity: opacity ? opacity : 0.16,
backgroundColor: color,
transition: Transitions.easeOut(pulsateDuration + 'ms', 'transform', null, Transitions.easeInOutFunction)
}, innerStyle);
return React.createElement('div', { ref: 'innerCircle', style: innerStyles });
},
_pulsate: function _pulsate() {
if (!this.isMounted()) return;
var innerCircle = React.findDOMNode(this.refs.innerCircle);
if (!innerCircle) return;
var startScale = 'scale(1)';
var endScale = 'scale(0.85)';
var currentScale = innerCircle.style[AutoPrefix.single('transform')];
var nextScale = undefined;
currentScale = currentScale || startScale;
nextScale = currentScale === startScale ? endScale : startScale;
innerCircle.style[AutoPrefix.single('transform')] = nextScale;
this._timeout = setTimeout(this._pulsate, pulsateDuration);
},
_setRippleSize: function _setRippleSize() {
var el = React.findDOMNode(this.refs.innerCircle);
var height = el.offsetHeight;
var width = el.offsetWidth;
var size = Math.max(height, width);
var oldTop = 0;
// For browsers that don't support endsWith()
if (el.style.top.indexOf('px', el.style.top.length - 2) !== -1) {
oldTop = parseInt(el.style.top);
}
el.style.height = size + 'px';
el.style.top = height / 2 - size / 2 + oldTop + 'px';
}
});
module.exports = FocusRipple;
},{"../mixins/style-propable":52,"../styles/auto-prefix":68,"../styles/colors":69,"../styles/transitions":75,"../transition-groups/scale-in":120,"react/addons":140}],63:[function(require,module,exports){
'use strict';
module.exports = {
CircleRipple: require('./circle-ripple'),
FocusRipple: require('./focus-ripple'),
TouchRipple: require('./touch-ripple')
};
},{"./circle-ripple":61,"./focus-ripple":62,"./touch-ripple":64}],64:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var ReactTransitionGroup = React.addons.TransitionGroup;
var StylePropable = require('../mixins/style-propable');
var Dom = require('../utils/dom');
var ImmutabilityHelper = require('../utils/immutability-helper');
var CircleRipple = require('./circle-ripple');
var TouchRipple = React.createClass({
displayName: 'TouchRipple',
mixins: [PureRenderMixin, StylePropable],
propTypes: {
centerRipple: React.PropTypes.bool,
color: React.PropTypes.string,
opacity: React.PropTypes.number
},
getInitialState: function getInitialState() {
return {
//This prop allows us to only render the ReactTransitionGroup
//on the first click of the component, making the inital
//render faster
hasRipples: false,
nextKey: 0,
ripples: []
};
},
render: function render() {
var _props = this.props;
var children = _props.children;
var style = _props.style;
var _state = this.state;
var hasRipples = _state.hasRipples;
var ripples = _state.ripples;
var rippleGroup = undefined;
if (hasRipples) {
var mergedStyles = this.mergeAndPrefix({
height: '100%',
width: '100%',
position: 'absolute',
top: 0,
left: 0,
overflow: 'hidden'
}, style);
rippleGroup = React.createElement(
ReactTransitionGroup,
{ style: mergedStyles },
ripples
);
}
return React.createElement(
'div',
{
onMouseUp: this._handleMouseUp,
onMouseDown: this._handleMouseDown,
onMouseLeave: this._handleMouseLeave,
onTouchStart: this._handleTouchStart,
onTouchEnd: this._handleTouchEnd },
rippleGroup,
children
);
},
start: function start(e, isRippleTouchGenerated) {
var ripples = this.state.ripples;
//Do nothing if we're starting a click-event-generated ripple
//while having touch-generated ripples
if (!isRippleTouchGenerated) {
for (var i = 0; i < ripples.length; i++) {
if (ripples[i].props.touchGenerated) return;
}
}
//Add a ripple to the ripples array
ripples = ImmutabilityHelper.push(ripples, React.createElement(CircleRipple, {
key: this.state.nextKey,
style: !this.props.centerRipple ? this._getRippleStyle(e) : {},
color: this.props.color,
opacity: this.props.opacity,
touchGenerated: isRippleTouchGenerated }));
this.setState({
hasRipples: true,
nextKey: this.state.nextKey + 1,
ripples: ripples
});
},
end: function end() {
var currentRipples = this.state.ripples;
this.setState({
ripples: ImmutabilityHelper.shift(currentRipples)
});
},
_handleMouseDown: function _handleMouseDown(e) {
//only listen to left clicks
if (e.button === 0) this.start(e, false);
},
_handleMouseUp: function _handleMouseUp() {
this.end();
},
_handleMouseLeave: function _handleMouseLeave() {
this.end();
},
_handleTouchStart: function _handleTouchStart(e) {
this.start(e, true);
},
_handleTouchEnd: function _handleTouchEnd() {
this.end();
},
_getRippleStyle: function _getRippleStyle(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 _calcDiag(a, b) {
return Math.sqrt(a * a + b * b);
}
});
module.exports = TouchRipple;
},{"../mixins/style-propable":52,"../utils/dom":127,"../utils/immutability-helper":130,"./circle-ripple":61,"react/addons":140}],65:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var TextField = require('./text-field');
var DropDownMenu = require('./drop-down-menu');
var SelectField = React.createClass({
displayName: 'SelectField',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
errorText: React.PropTypes.string,
floatingLabelText: React.PropTypes.string,
selectFieldRoot: React.PropTypes.string,
underlineStyle: React.PropTypes.object,
labelStyle: React.PropTypes.object,
errorStyle: React.PropTypes.object,
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,
rows: React.PropTypes.number,
inputStyle: React.PropTypes.object,
iconStyle: React.PropTypes.object,
floatingLabelStyle: React.PropTypes.object,
autoWidth: React.PropTypes.bool,
menuItems: React.PropTypes.array.isRequired,
menuItemStyle: React.PropTypes.object,
selectedIndex: React.PropTypes.number
},
getDefaultProps: function getDefaultProps() {
return {
fullWidth: false
};
},
getStyles: function getStyles() {
var styles = {
root: {
height: 46,
position: 'relative',
width: '100%',
top: 16,
fontSize: 16
},
label: {
paddingLeft: 0,
top: 4,
width: '100%'
},
icon: {
top: 20,
right: 0
},
underline: {
borderTop: 'none'
},
input: {},
error: {}
};
if (!this.props.floatingLabelText) {
if (this.props.hintText) {
styles.root.top = -5;
styles.label.top = 1;
styles.icon.top = 17;
} else {
styles.root.top = -8;
}
} else {
styles.error.bottom = -15;
}
return styles;
},
render: function render() {
var styles = this.getStyles();
var _props = this.props;
var style = _props.style;
var labelStyle = _props.labelStyle;
var iconStyle = _props.iconStyle;
var underlineStyle = _props.underlineStyle;
var errorStyle = _props.errorStyle;
var selectFieldRoot = _props.selectFieldRoot;
var menuItems = _props.menuItems;
var disabled = _props.disabled;
var floatingLabelText = _props.floatingLabelText;
var floatingLabelStyle = _props.floatingLabelStyle;
var hintText = _props.hintText;
var fullWidth = _props.fullWidth;
var errorText = _props.errorText;
var other = _objectWithoutProperties(_props, ['style', 'labelStyle', 'iconStyle', 'underlineStyle', 'errorStyle', 'selectFieldRoot', 'menuItems', 'disabled', 'floatingLabelText', 'floatingLabelStyle', 'hintText', 'fullWidth', 'errorText']);
var textFieldProps = {
style: this.mergeAndPrefix(styles.input, style),
floatingLabelText: floatingLabelText,
floatingLabelStyle: floatingLabelStyle,
hintText: !hintText && !floatingLabelText ? ' ' : hintText,
fullWidth: fullWidth,
errorText: errorText,
errorStyle: this.mergeAndPrefix(styles.error, errorStyle)
};
var dropDownMenuProps = {
menuItems: menuItems,
disabled: disabled,
style: this.mergeAndPrefix(styles.root, selectFieldRoot),
labelStyle: this.mergeAndPrefix(styles.label, labelStyle),
iconStyle: this.mergeAndPrefix(styles.icon, iconStyle),
underlineStyle: this.mergeAndPrefix(styles.underline),
autoWidth: false
};
return React.createElement(
TextField,
textFieldProps,
React.createElement(DropDownMenu, _extends({}, dropDownMenuProps, other))
);
}
});
module.exports = SelectField;
},{"./drop-down-menu":27,"./mixins/style-propable":52,"./text-field":101,"react":312}],66:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var Draggable = require('react-draggable2');
var Transitions = require('./styles/transitions');
var FocusRipple = require('./ripples/focus-ripple');
/**
* Verifies min/max range.
* @param {Object} props Properties of the React component.
* @param {String} propName Name of the property to validate.
* @param {String} componentName Name of the component whose property is being validated.
* @returns {Object} Returns an Error if min >= max otherwise null.
*/
var minMaxPropType = function minMaxPropType(props, propName, componentName) {
var error = React.PropTypes.number(props, propName, componentName);
if (error !== null) return error;
if (props.min >= props.max) {
var errorMsg = propName === 'min' ? 'min should be less than max' : 'max should be greater than min';
return new Error(errorMsg);
}
};
/**
* Verifies value is within the min/max range.
* @param {Object} props Properties of the React component.
* @param {String} propName Name of the property to validate.
* @param {String} componentName Name of the component whose property is being validated.
* @returns {Object} Returns an Error if the value is not within the range otherwise null.
*/
var valueInRangePropType = function valueInRangePropType(props, propName, componentName) {
var error = React.PropTypes.number(props, propName, componentName);
if (error !== null) return error;
var value = props[propName];
if (value < props.min || props.max < value) {
return new Error(propName + ' should be within the range specified by min and max');
}
};
var Slider = React.createClass({
displayName: 'Slider',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
name: React.PropTypes.string.isRequired,
defaultValue: valueInRangePropType,
description: React.PropTypes.string,
disabled: React.PropTypes.bool,
error: React.PropTypes.string,
max: minMaxPropType,
min: minMaxPropType,
required: React.PropTypes.bool,
step: React.PropTypes.number,
onBlur: React.PropTypes.func,
onChange: React.PropTypes.func,
onDragStart: React.PropTypes.func,
onDragStop: React.PropTypes.func,
onFocus: React.PropTypes.func,
value: valueInRangePropType
},
getDefaultProps: function getDefaultProps() {
return {
defaultValue: 0,
disabled: false,
max: 1,
min: 0,
required: true,
step: 0.01
};
},
getInitialState: function getInitialState() {
var value = this.props.value;
if (value === undefined) {
value = this.props.defaultValue;
}
var percent = (value - this.props.min) / (this.props.max - this.props.min);
if (isNaN(percent)) percent = 0;
return {
active: false,
dragging: false,
focused: false,
hovered: false,
percent: percent,
value: value
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (nextProps.value !== undefined) {
this.setValue(nextProps.value);
}
},
getTheme: function getTheme() {
return this.context.muiTheme.component.slider;
},
getStyles: function getStyles() {
var fillGutter = this.getTheme().handleSize / 2;
var disabledGutter = this.getTheme().trackSize + this.getTheme().handleSizeDisabled / 2;
var calcDisabledSpacing = this.props.disabled ? ' - ' + disabledGutter + 'px' : '';
var styles = {
root: {
touchCallout: 'none',
userSelect: 'none',
cursor: 'default',
height: this.getTheme().handleSizeActive,
position: 'relative',
marginTop: 24,
marginBottom: 48
},
track: {
position: 'absolute',
top: (this.getTheme().handleSizeActive - this.getTheme().trackSize) / 2,
left: 0,
width: '100%',
height: this.getTheme().trackSize
},
filledAndRemaining: {
position: 'absolute',
top: 0,
height: '100%',
transition: Transitions.easeOut(null, 'margin')
},
handle: {
boxSizing: 'border-box',
position: 'absolute',
cursor: 'pointer',
pointerEvents: 'inherit',
top: (this.getTheme().handleSizeActive - this.getTheme().trackSize) / 2 + 'px',
left: '0%',
zIndex: 1,
margin: this.getTheme().trackSize / 2 + 'px 0 0 0',
width: this.getTheme().handleSize,
height: this.getTheme().handleSize,
backgroundColor: this.getTheme().selectionColor,
backgroundClip: 'padding-box',
border: '0px solid transparent',
borderRadius: '50%',
transform: 'translate(-50%, -50%)',
transition: Transitions.easeOut('450ms', 'background') + ',' + Transitions.easeOut('450ms', 'border-color') + ',' + Transitions.easeOut('450ms', 'width') + ',' + Transitions.easeOut('450ms', 'height'),
overflow: 'visible'
},
handleWhenDisabled: {
boxSizing: 'content-box',
cursor: 'not-allowed',
backgroundColor: this.getTheme().trackColor,
width: this.getTheme().handleSizeDisabled,
height: this.getTheme().handleSizeDisabled,
border: 'none'
},
handleWhenPercentZero: {
border: this.getTheme().trackSize + 'px solid ' + this.getTheme().handleColorZero,
backgroundColor: this.getTheme().handleFillColor,
boxShadow: 'none'
},
handleWhenPercentZeroAndDisabled: {
cursor: 'not-allowed',
width: this.getTheme().handleSizeDisabled,
height: this.getTheme().handleSizeDisabled
},
handleWhenPercentZeroAndFocused: {
border: this.getTheme().trackSize + 'px solid ' + this.getTheme().trackColorSelected
},
handleWhenActive: {
width: this.getTheme().handleSizeActive,
height: this.getTheme().handleSizeActive
},
ripple: {
height: this.getTheme().handleSize,
width: this.getTheme().handleSize,
overflow: 'visible'
},
rippleWhenPercentZero: {
top: -this.getTheme().trackSize,
left: -this.getTheme().trackSize
},
rippleInner: {
height: '300%',
width: '300%',
top: -this.getTheme().handleSize,
left: -this.getTheme().handleSize
}
};
styles.filled = this.mergeAndPrefix(styles.filledAndRemaining, {
left: 0,
backgroundColor: this.props.disabled ? this.getTheme().trackColor : this.getTheme().selectionColor,
marginRight: fillGutter,
width: 'calc(' + this.state.percent * 100 + '%' + calcDisabledSpacing + ')'
});
styles.remaining = this.mergeAndPrefix(styles.filledAndRemaining, {
right: 0,
backgroundColor: this.getTheme().trackColor,
marginLeft: fillGutter,
width: 'calc(' + (1 - this.state.percent) * 100 + '%' + calcDisabledSpacing + ')'
});
return styles;
},
render: function render() {
var others = _objectWithoutProperties(this.props, []);
var percent = this.state.percent;
if (percent > 1) percent = 1;else if (percent < 0) percent = 0;
var styles = this.getStyles();
var sliderStyles = this.mergeAndPrefix(styles.root, this.props.style);
var handleStyles = percent === 0 ? this.mergeAndPrefix(styles.handle, styles.handleWhenPercentZero, this.state.active && styles.handleWhenActive, this.state.focused && { outline: 'none' }, (this.state.hovered || this.state.focused) && !this.props.disabled && styles.handleWhenPercentZeroAndFocused, this.props.disabled && styles.handleWhenPercentZeroAndDisabled) : this.mergeAndPrefix(styles.handle, this.state.active && styles.handleWhenActive, this.state.focused && { outline: 'none' }, this.props.disabled && styles.handleWhenDisabled);
var rippleStyle = this.mergeAndPrefix(styles.ripple, percent === 0 && styles.rippleWhenPercentZero);
var remainingStyles = styles.remaining;
if ((this.state.hovered || this.state.focused) && !this.props.disabled) {
remainingStyles.backgroundColor = this.getTheme().trackColorSelected;
}
var rippleShowCondition = (this.state.hovered || this.state.focused) && !this.state.active;
var rippleColor = this.state.percent === 0 ? this.getTheme().handleColorZero : this.getTheme().rippleColor;
var focusRipple = undefined;
if (!this.props.disabled && !this.props.disableFocusRipple) {
focusRipple = React.createElement(FocusRipple, {
ref: 'focusRipple',
key: 'focusRipple',
style: rippleStyle,
innerStyle: styles.rippleInner,
show: rippleShowCondition,
color: rippleColor });
}
return React.createElement(
'div',
_extends({}, others, { 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',
{ style: sliderStyles,
onFocus: this._onFocus,
onBlur: this._onBlur,
onMouseDown: this._onMouseDown,
onMouseEnter: this._onMouseEnter,
onMouseLeave: this._onMouseLeave,
onMouseUp: this._onMouseUp },
React.createElement(
'div',
{ ref: 'track', style: styles.track },
React.createElement('div', { style: styles.filled }),
React.createElement('div', { style: remainingStyles }),
React.createElement(
Draggable,
{ axis: 'x', bound: 'point',
cancel: this.props.disabled ? '*' : null,
start: { x: percent * 100 + '%' },
constrain: this._constrain(),
onStart: this._onDragStart,
onStop: this._onDragStop,
onDrag: this._onDragUpdate,
onMouseDown: this._onMouseDownKnob },
React.createElement(
'div',
{ style: handleStyles, tabIndex: 0 },
focusRipple
)
)
)
),
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 getValue() {
return this.state.value;
},
setValue: function setValue(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 getPercent() {
return this.state.percent;
},
setPercent: function setPercent(percent) {
var value = this._alignValue(this._percentToValue(percent));
this.setState({ value: value, percent: percent });
},
clearValue: function clearValue() {
this.setValue(this.props.min);
},
_alignValue: function _alignValue(val) {
var _props = this.props;
var step = _props.step;
var min = _props.min;
var valModStep = (val - min) % step;
var alignValue = val - valModStep;
if (Math.abs(valModStep) * 2 >= step) {
alignValue += valModStep > 0 ? step : -step;
}
return parseFloat(alignValue.toFixed(5));
},
_constrain: function _constrain() {
var _this = this;
var _props2 = this.props;
var min = _props2.min;
var max = _props2.max;
var step = _props2.step;
return function (pos) {
var pixelMax = React.findDOMNode(_this.refs.track).clientWidth;
var pixelStep = pixelMax / ((max - min) / step);
var cursor = min;
var i = undefined;
for (i = 0; i < (max - min) / step; i++) {
var distance = pos.left - cursor;
var nextDistance = cursor + pixelStep - pos.left;
if (Math.abs(distance) > Math.abs(nextDistance)) {
cursor += pixelStep;
} else {
break;
}
}
return {
left: cursor
};
};
},
_onFocus: function _onFocus(e) {
this.setState({ focused: true });
if (this.props.onFocus) this.props.onFocus(e);
},
_onBlur: function _onBlur(e) {
this.setState({ focused: false, active: false });
if (this.props.onBlur) this.props.onBlur(e);
},
_onMouseDown: function _onMouseDown(e) {
if (!this.props.disabled) this._pos = e.clientX;
},
_onMouseEnter: function _onMouseEnter() {
this.setState({ hovered: true });
},
_onMouseLeave: function _onMouseLeave() {
this.setState({ hovered: false });
},
_onMouseUp: function _onMouseUp(e) {
if (!this.props.disabled) this.setState({ active: false });
if (!this.state.dragging && Math.abs(this._pos - e.clientX) < 5) {
var pos = e.clientX - React.findDOMNode(this).getBoundingClientRect().left;
this._dragX(e, pos);
}
this._pos = undefined;
},
_onMouseDownKnob: function _onMouseDownKnob() {
if (!this.props.disabled) this.setState({ active: true });
},
_onDragStart: function _onDragStart(e, ui) {
this.setState({
dragging: true,
active: true
});
if (this.props.onDragStart) this.props.onDragStart(e, ui);
},
_onDragStop: function _onDragStop(e, ui) {
this.setState({
dragging: false,
active: false
});
if (this.props.onDragStop) this.props.onDragStop(e, ui);
},
_onDragUpdate: function _onDragUpdate(e, ui) {
if (!this.state.dragging) return;
if (!this.props.disabled) this._dragX(e, ui.position.left);
},
_dragX: function _dragX(e, pos) {
var max = React.findDOMNode(this.refs.track).clientWidth;
if (pos < 0) pos = 0;else if (pos > max) pos = max;
if (pos === this.props.min) {
return this._updateWithChangeEvent(e, 0);
}
this._updateWithChangeEvent(e, pos / max);
},
_updateWithChangeEvent: function _updateWithChangeEvent(e, percent) {
if (this.state.percent === percent) return;
this.setPercent(percent);
var value = this._alignValue(this._percentToValue(percent));
if (this.props.onChange) this.props.onChange(e, value);
},
_percentToValue: function _percentToValue(percent) {
return percent * (this.props.max - this.props.min) + this.props.min;
}
});
module.exports = Slider;
},{"./mixins/style-propable":52,"./ripples/focus-ripple":62,"./styles/transitions":75,"react":312,"react-draggable2":139}],67:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var CssEvent = require('./utils/css-event');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var ClickAwayable = require('./mixins/click-awayable');
var FlatButton = require('./flat-button');
var Snackbar = React.createClass({
displayName: 'Snackbar',
mixins: [StylePropable, ClickAwayable],
manuallyBindClickAway: true,
// ID of the active timer.
_autoHideTimerId: undefined,
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
message: React.PropTypes.string.isRequired,
action: React.PropTypes.string,
autoHideDuration: React.PropTypes.number,
onActionTouchTap: React.PropTypes.func,
onShow: React.PropTypes.func,
onDismiss: React.PropTypes.func,
openOnMount: React.PropTypes.bool
},
getInitialState: function getInitialState() {
return {
open: this.props.openOnMount || false
};
},
componentDidMount: function componentDidMount() {
if (this.props.openOnMount) {
this._setAutoHideTimer();
this._bindClickAway();
}
},
componentClickAway: function componentClickAway() {
this.dismiss();
},
componentDidUpdate: function componentDidUpdate(prevProps, prevState) {
var _this = this;
if (prevState.open !== this.state.open) {
if (this.state.open) {
this._setAutoHideTimer();
//Only Bind clickaway after transition finishes
CssEvent.onTransitionEnd(React.findDOMNode(this), function () {
_this._bindClickAway();
});
} else {
this._unbindClickAway();
}
}
},
componentWillUnmount: function componentWillUnmount() {
this._clearAutoHideTimer();
this._unbindClickAway();
},
getTheme: function getTheme() {
return this.context.muiTheme.component.snackbar;
},
getSpacing: function getSpacing() {
return this.context.muiTheme.spacing;
},
getStyles: function getStyles() {
var styles = {
root: {
color: this.getTheme().textColor,
backgroundColor: this.getTheme().backgroundColor,
borderRadius: 2,
padding: '0px ' + this.getSpacing().desktopGutter + 'px',
height: this.getSpacing().desktopSubheaderHeight,
lineHeight: this.getSpacing().desktopSubheaderHeight + 'px',
minWidth: 288,
maxWidth: 568,
position: 'fixed',
zIndex: 10,
bottom: this.getSpacing().desktopGutter,
marginLeft: this.getSpacing().desktopGutter,
left: 0,
opacity: 0,
visibility: 'hidden',
transform: 'translate3d(0, 20px, 0)',
transition: Transitions.easeOut('0ms', 'left', '400ms') + ',' + Transitions.easeOut('400ms', 'opacity') + ',' + Transitions.easeOut('400ms', 'transform') + ',' + Transitions.easeOut('400ms', 'visibility')
},
action: {
color: this.getTheme().actionColor,
float: 'right',
marginTop: 6,
marginRight: -16,
marginLeft: this.getSpacing().desktopGutter,
backgroundColor: 'transparent'
},
rootWhenOpen: {
opacity: 1,
visibility: 'visible',
transform: 'translate3d(0, 0, 0)',
transition: Transitions.easeOut('0ms', 'left', '0ms') + ',' + Transitions.easeOut('400ms', 'opacity', '0ms') + ',' + Transitions.easeOut('400ms', 'transform', '0ms') + ',' + Transitions.easeOut('400ms', 'visibility', '0ms')
}
};
return styles;
},
render: function render() {
var _props = this.props;
var action = _props.action;
var message = _props.message;
var onActionTouchTap = _props.onActionTouchTap;
var style = _props.style;
var others = _objectWithoutProperties(_props, ['action', 'message', 'onActionTouchTap', 'style']);
var styles = this.getStyles();
var rootStyles = this.state.open ? this.mergeStyles(styles.root, styles.rootWhenOpen, style) : this.mergeStyles(styles.root, style);
var actionButton = undefined;
if (action) {
actionButton = React.createElement(FlatButton, {
style: styles.action,
label: action,
onTouchTap: onActionTouchTap });
}
return React.createElement(
'span',
_extends({}, others, { style: rootStyles }),
React.createElement(
'span',
null,
message
),
actionButton
);
},
show: function show() {
this.setState({ open: true });
if (this.props.onShow) this.props.onShow();
},
dismiss: function dismiss() {
this._clearAutoHideTimer();
this.setState({ open: false });
if (this.props.onDismiss) this.props.onDismiss();
},
_clearAutoHideTimer: function _clearAutoHideTimer() {
if (this._autoHideTimerId !== undefined) {
this._autoHideTimerId = clearTimeout(this._autoHideTimerId);
}
},
_setAutoHideTimer: function _setAutoHideTimer() {
var _this2 = this;
if (this.props.autoHideDuration > 0) {
this._clearAutoHideTimer();
this._autoHideTimerId = setTimeout(function () {
_this2.dismiss();
}, this.props.autoHideDuration);
}
}
});
module.exports = Snackbar;
},{"./flat-button":31,"./mixins/click-awayable":49,"./mixins/style-propable":52,"./styles/transitions":75,"./utils/css-event":125,"react":312}],68:[function(require,module,exports){
'use strict';
var isBrowser = typeof window !== 'undefined';
var Modernizr = isBrowser ? require('../utils/modernizr.custom') : undefined;
//Keep track of already prefixed keys so we can skip Modernizr prefixing
var prefixedKeys = {};
module.exports = {
all: function all(styles) {
var prefixedStyle = {};
for (var key in styles) {
prefixedStyle[this.single(key)] = styles[key];
}
return prefixedStyle;
},
set: function set(style, key, value) {
style[this.single(key)] = value;
},
single: function single(key) {
//If a browser doesn't exist, we can't prefix with Modernizr so
//just return the key
if (!isBrowser) return key;
//Check if we've prefixed this key before, just return it
if (prefixedKeys.hasOwnProperty(key)) return prefixedKeys[key];
//Key hasn't been prefixed yet, prefix with Modernizr
var prefKey = Modernizr.prefixed(key);
// Windows 7 Firefox has an issue with the implementation of Modernizr.prefixed
// and is capturing 'false' as the CSS property name instead of the non-prefixed version.
if (prefKey === false) return key;
//Save the key off for the future and return the prefixed key
prefixedKeys[key] = prefKey;
return prefKey;
},
singleHyphened: function singleHyphened(key) {
var str = this.single(key);
return !str ? key : str.replace(/([A-Z])/g, function (str, m1) {
return '-' + m1.toLowerCase();
}).replace(/^ms-/, '-ms-');
}
};
},{"../utils/modernizr.custom":134}],69:[function(require,module,exports){
// To include this file in your project:
// let mui = require('mui');
// let Colors = mui.Styles.Colors;
'use strict';
module.exports = {
red50: '#ffebee',
red100: '#ffcdd2',
red200: '#ef9a9a',
red300: '#e57373',
red400: '#ef5350',
red500: '#f44336',
red600: '#e53935',
red700: '#d32f2f',
red800: '#c62828',
red900: '#b71c1c',
redA100: '#ff8a80',
redA200: '#ff5252',
redA400: '#ff1744',
redA700: '#d50000',
pink50: '#fce4ec',
pink100: '#f8bbd0',
pink200: '#f48fb1',
pink300: '#f06292',
pink400: '#ec407a',
pink500: '#e91e63',
pink600: '#d81b60',
pink700: '#c2185b',
pink800: '#ad1457',
pink900: '#880e4f',
pinkA100: '#ff80ab',
pinkA200: '#ff4081',
pinkA400: '#f50057',
pinkA700: '#c51162',
purple50: '#f3e5f5',
purple100: '#e1bee7',
purple200: '#ce93d8',
purple300: '#ba68c8',
purple400: '#ab47bc',
purple500: '#9c27b0',
purple600: '#8e24aa',
purple700: '#7b1fa2',
purple800: '#6a1b9a',
purple900: '#4a148c',
purpleA100: '#ea80fc',
purpleA200: '#e040fb',
purpleA400: '#d500f9',
purpleA700: '#aa00ff',
deepPurple50: '#ede7f6',
deepPurple100: '#d1c4e9',
deepPurple200: '#b39ddb',
deepPurple300: '#9575cd',
deepPurple400: '#7e57c2',
deepPurple500: '#673ab7',
deepPurple600: '#5e35b1',
deepPurple700: '#512da8',
deepPurple800: '#4527a0',
deepPurple900: '#311b92',
deepPurpleA100: '#b388ff',
deepPurpleA200: '#7c4dff',
deepPurpleA400: '#651fff',
deepPurpleA700: '#6200ea',
indigo50: '#e8eaf6',
indigo100: '#c5cae9',
indigo200: '#9fa8da',
indigo300: '#7986cb',
indigo400: '#5c6bc0',
indigo500: '#3f51b5',
indigo600: '#3949ab',
indigo700: '#303f9f',
indigo800: '#283593',
indigo900: '#1a237e',
indigoA100: '#8c9eff',
indigoA200: '#536dfe',
indigoA400: '#3d5afe',
indigoA700: '#304ffe',
blue50: '#e3f2fd',
blue100: '#bbdefb',
blue200: '#90caf9',
blue300: '#64b5f6',
blue400: '#42a5f5',
blue500: '#2196f3',
blue600: '#1e88e5',
blue700: '#1976d2',
blue800: '#1565c0',
blue900: '#0d47a1',
blueA100: '#82b1ff',
blueA200: '#448aff',
blueA400: '#2979ff',
blueA700: '#2962ff',
lightBlue50: '#e1f5fe',
lightBlue100: '#b3e5fc',
lightBlue200: '#81d4fa',
lightBlue300: '#4fc3f7',
lightBlue400: '#29b6f6',
lightBlue500: '#03a9f4',
lightBlue600: '#039be5',
lightBlue700: '#0288d1',
lightBlue800: '#0277bd',
lightBlue900: '#01579b',
lightBlueA100: '#80d8ff',
lightBlueA200: '#40c4ff',
lightBlueA400: '#00b0ff',
lightBlueA700: '#0091ea',
cyan50: '#e0f7fa',
cyan100: '#b2ebf2',
cyan200: '#80deea',
cyan300: '#4dd0e1',
cyan400: '#26c6da',
cyan500: '#00bcd4',
cyan600: '#00acc1',
cyan700: '#0097a7',
cyan800: '#00838f',
cyan900: '#006064',
cyanA100: '#84ffff',
cyanA200: '#18ffff',
cyanA400: '#00e5ff',
cyanA700: '#00b8d4',
teal50: '#e0f2f1',
teal100: '#b2dfdb',
teal200: '#80cbc4',
teal300: '#4db6ac',
teal400: '#26a69a',
teal500: '#009688',
teal600: '#00897b',
teal700: '#00796b',
teal800: '#00695c',
teal900: '#004d40',
tealA100: '#a7ffeb',
tealA200: '#64ffda',
tealA400: '#1de9b6',
tealA700: '#00bfa5',
green50: '#e8f5e9',
green100: '#c8e6c9',
green200: '#a5d6a7',
green300: '#81c784',
green400: '#66bb6a',
green500: '#4caf50',
green600: '#43a047',
green700: '#388e3c',
green800: '#2e7d32',
green900: '#1b5e20',
greenA100: '#b9f6ca',
greenA200: '#69f0ae',
greenA400: '#00e676',
greenA700: '#00c853',
lightGreen50: '#f1f8e9',
lightGreen100: '#dcedc8',
lightGreen200: '#c5e1a5',
lightGreen300: '#aed581',
lightGreen400: '#9ccc65',
lightGreen500: '#8bc34a',
lightGreen600: '#7cb342',
lightGreen700: '#689f38',
lightGreen800: '#558b2f',
lightGreen900: '#33691e',
lightGreenA100: '#ccff90',
lightGreenA200: '#b2ff59',
lightGreenA400: '#76ff03',
lightGreenA700: '#64dd17',
lime50: '#f9fbe7',
lime100: '#f0f4c3',
lime200: '#e6ee9c',
lime300: '#dce775',
lime400: '#d4e157',
lime500: '#cddc39',
lime600: '#c0ca33',
lime700: '#afb42b',
lime800: '#9e9d24',
lime900: '#827717',
limeA100: '#f4ff81',
limeA200: '#eeff41',
limeA400: '#c6ff00',
limeA700: '#aeea00',
yellow50: '#fffde7',
yellow100: '#fff9c4',
yellow200: '#fff59d',
yellow300: '#fff176',
yellow400: '#ffee58',
yellow500: '#ffeb3b',
yellow600: '#fdd835',
yellow700: '#fbc02d',
yellow800: '#f9a825',
yellow900: '#f57f17',
yellowA100: '#ffff8d',
yellowA200: '#ffff00',
yellowA400: '#ffea00',
yellowA700: '#ffd600',
amber50: '#fff8e1',
amber100: '#ffecb3',
amber200: '#ffe082',
amber300: '#ffd54f',
amber400: '#ffca28',
amber500: '#ffc107',
amber600: '#ffb300',
amber700: '#ffa000',
amber800: '#ff8f00',
amber900: '#ff6f00',
amberA100: '#ffe57f',
amberA200: '#ffd740',
amberA400: '#ffc400',
amberA700: '#ffab00',
orange50: '#fff3e0',
orange100: '#ffe0b2',
orange200: '#ffcc80',
orange300: '#ffb74d',
orange400: '#ffa726',
orange500: '#ff9800',
orange600: '#fb8c00',
orange700: '#f57c00',
orange800: '#ef6c00',
orange900: '#e65100',
orangeA100: '#ffd180',
orangeA200: '#ffab40',
orangeA400: '#ff9100',
orangeA700: '#ff6d00',
deepOrange50: '#fbe9e7',
deepOrange100: '#ffccbc',
deepOrange200: '#ffab91',
deepOrange300: '#ff8a65',
deepOrange400: '#ff7043',
deepOrange500: '#ff5722',
deepOrange600: '#f4511e',
deepOrange700: '#e64a19',
deepOrange800: '#d84315',
deepOrange900: '#bf360c',
deepOrangeA100: '#ff9e80',
deepOrangeA200: '#ff6e40',
deepOrangeA400: '#ff3d00',
deepOrangeA700: '#dd2c00',
brown50: '#efebe9',
brown100: '#d7ccc8',
brown200: '#bcaaa4',
brown300: '#a1887f',
brown400: '#8d6e63',
brown500: '#795548',
brown600: '#6d4c41',
brown700: '#5d4037',
brown800: '#4e342e',
brown900: '#3e2723',
blueGrey50: '#eceff1',
blueGrey100: '#cfd8dc',
blueGrey200: '#b0bec5',
blueGrey300: '#90a4ae',
blueGrey400: '#78909c',
blueGrey500: '#607d8b',
blueGrey600: '#546e7a',
blueGrey700: '#455a64',
blueGrey800: '#37474f',
blueGrey900: '#263238',
grey50: '#fafafa',
grey100: '#f5f5f5',
grey200: '#eeeeee',
grey300: '#e0e0e0',
grey400: '#bdbdbd',
grey500: '#9e9e9e',
grey600: '#757575',
grey700: '#616161',
grey800: '#424242',
grey900: '#212121',
black: '#000000',
white: '#ffffff',
transparent: 'rgba(0, 0, 0, 0)',
fullBlack: 'rgba(0, 0, 0, 1)',
darkBlack: 'rgba(0, 0, 0, 0.87)',
lightBlack: 'rgba(0, 0, 0, 0.54)',
minBlack: 'rgba(0, 0, 0, 0.26)',
faintBlack: 'rgba(0, 0, 0, 0.12)',
fullWhite: 'rgba(255, 255, 255, 1)',
darkWhite: 'rgba(255, 255, 255, 0.87)',
lightWhite: 'rgba(255, 255, 255, 0.54)'
};
},{}],70:[function(require,module,exports){
'use strict';
module.exports = {
AutoPrefix: require('./auto-prefix'),
Colors: require('./colors'),
Spacing: require('./spacing'),
ThemeManager: require('./theme-manager'),
Transitions: require('./transitions'),
Typography: require('./typography')
};
},{"./auto-prefix":68,"./colors":69,"./spacing":71,"./theme-manager":72,"./transitions":75,"./typography":76}],71:[function(require,module,exports){
"use strict";
module.exports = {
iconSize: 24,
desktopGutter: 24,
desktopGutterMore: 32,
desktopGutterLess: 16,
desktopGutterMini: 8,
desktopKeylineIncrement: 64,
desktopDropDownMenuItemHeight: 32,
desktopDropDownMenuFontSize: 15,
desktopLeftNavMenuItemHeight: 48,
desktopSubheaderHeight: 48,
desktopToolbarHeight: 56
};
},{}],72:[function(require,module,exports){
'use strict';
var Extend = require('../utils/extend');
var Types = {
LIGHT: require('./themes/light-theme'),
DARK: require('./themes/dark-theme')
};
var ThemeManager = function ThemeManager() {
return {
//In most cases, theme variables remain static thoughout the life of an
//app. If you plan on mutating theme variables after the theme has been
//intialized, set static to false. This will allow components to update
//when theme variables change. For more information see issue #1176
'static': true,
types: Types,
template: Types.LIGHT,
spacing: Types.LIGHT.spacing,
contentFontFamily: 'Roboto, sans-serif',
palette: Types.LIGHT.getPalette(),
component: Types.LIGHT.getComponentThemes(Types.LIGHT.getPalette()),
getCurrentTheme: function getCurrentTheme() {
return this;
},
// Component gets updated to reflect palette changes.
setTheme: function setTheme(newTheme) {
this.setSpacing(newTheme.spacing);
this.setContentFontFamily(newTheme.contentFontFamily);
this.setPalette(newTheme.getPalette());
this.setComponentThemes(newTheme.getComponentThemes(newTheme.getPalette()));
},
setSpacing: function setSpacing(newSpacing) {
this.spacing = Extend(this.spacing, newSpacing);
this.component = Extend(this.component, this.template.getComponentThemes(this.palette, this.spacing));
},
setContentFontFamily: function setContentFontFamily(newContentFontFamily) {
if (typeof newContentFontFamily !== "undefined" && newContentFontFamily !== null) {
this.contentFontFamily = newContentFontFamily;
this.component = Extend(this.component, this.template.getComponentThemes(this.palette, this.spacing));
}
},
setPalette: function setPalette(newPalette) {
this.palette = Extend(this.palette, newPalette);
this.component = Extend(this.component, this.template.getComponentThemes(this.palette));
},
setComponentThemes: function setComponentThemes(overrides) {
this.component = Extend(this.component, overrides);
},
setIsRtl: function setIsRtl(isRtl) {
this.isRtl = !!isRtl;
}
};
};
module.exports = ThemeManager;
},{"../utils/extend":129,"./themes/dark-theme":73,"./themes/light-theme":74}],73:[function(require,module,exports){
'use strict';
var Colors = require('../colors');
var ColorManipulator = require('../../utils/color-manipulator');
var DarkTheme = {
getPalette: function getPalette() {
return {
textColor: Colors.fullWhite,
canvasColor: '#303030',
borderColor: ColorManipulator.fade(Colors.fullWhite, 0.3), //Colors.grey300
disabledColor: ColorManipulator.fade(Colors.fullWhite, 0.3),
primary1Color: Colors.teal200
};
},
getComponentThemes: function getComponentThemes(palette) {
var cardColor = Colors.grey800;
return {
avatar: {
borderColor: 'rgba(0, 0, 0, 0.5)'
},
floatingActionButton: {
disabledColor: ColorManipulator.fade(palette.textColor, 0.12)
},
leftNav: {
color: cardColor
},
menu: {
backgroundColor: cardColor,
containerBackgroundColor: cardColor
},
menuItem: {
hoverColor: 'rgba(255, 255, 255, .03)'
},
menuSubheader: {
borderColor: 'rgba(255, 255, 255, 0.3)'
},
paper: {
backgroundColor: cardColor
},
raisedButton: {
color: Colors.grey500
},
toggle: {
thumbOnColor: Colors.cyan200,
thumbOffColor: Colors.grey400,
thumbDisabledColor: Colors.grey800,
thumbRequiredColor: Colors.cyan200,
trackOnColor: ColorManipulator.fade(Colors.cyan200, 0.5),
trackOffColor: 'rgba(255, 255, 255, 0.3)',
trackDisabledColor: 'rgba(255, 255, 255, 0.1)'
},
refreshIndicator: {
strokeColor: Colors.grey700,
loadingStrokeColor: Colors.teal300
},
slider: {
trackColor: Colors.minBlack,
handleColorZero: cardColor,
handleFillColor: cardColor,
selectionColor: Colors.cyan200
}
};
}
};
module.exports = DarkTheme;
},{"../../utils/color-manipulator":124,"../colors":69}],74:[function(require,module,exports){
'use strict';
var Colors = require('../colors');
var Spacing = require('../spacing');
var ColorManipulator = require('../../utils/color-manipulator');
/**
* Light Theme is the default theme used in material-ui. It is guaranteed to
* have all theme variables needed for every component. Variables not defined
* in a custom theme will default to these values.
*/
var LightTheme = {
spacing: Spacing,
contentFontFamily: 'Roboto, sans-serif',
getPalette: function getPalette() {
return {
primary1Color: Colors.cyan500,
primary2Color: Colors.cyan700,
primary3Color: Colors.cyan100,
accent1Color: Colors.pinkA200,
accent2Color: Colors.pinkA400,
accent3Color: Colors.pinkA100,
textColor: Colors.darkBlack,
canvasColor: Colors.white,
borderColor: Colors.grey300,
disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3)
};
},
getComponentThemes: function getComponentThemes(palette, spacing) {
spacing = spacing || Spacing;
var obj = {
appBar: {
color: palette.primary1Color,
textColor: Colors.darkWhite,
height: spacing.desktopKeylineIncrement
},
avatar: {
borderColor: 'rgba(0, 0, 0, 0.08)'
},
button: {
height: 36,
minWidth: 88,
iconButtonSize: spacing.iconSize * 2
},
checkbox: {
boxColor: palette.textColor,
checkedColor: palette.primary1Color,
requiredColor: palette.primary1Color,
disabledColor: palette.disabledColor,
labelColor: palette.textColor,
labelDisabledColor: palette.disabledColor
},
datePicker: {
color: palette.primary1Color,
textColor: Colors.white,
calendarTextColor: palette.textColor,
selectColor: palette.primary2Color,
selectTextColor: Colors.white
},
dropDownMenu: {
accentColor: palette.borderColor
},
flatButton: {
color: palette.canvasColor,
textColor: palette.textColor,
primaryTextColor: palette.accent1Color,
secondaryTextColor: palette.primary1Color
},
floatingActionButton: {
buttonSize: 56,
miniSize: 40,
color: palette.accent1Color,
iconColor: Colors.white,
secondaryColor: palette.primary1Color,
secondaryIconColor: Colors.white
},
inkBar: {
backgroundColor: palette.accent1Color
},
leftNav: {
width: spacing.desktopKeylineIncrement * 4,
color: Colors.white
},
listItem: {
nestedLevelDepth: 18
},
menu: {
backgroundColor: Colors.white,
containerBackgroundColor: Colors.white
},
menuItem: {
dataHeight: 32,
height: 48,
hoverColor: 'rgba(0, 0, 0, .035)',
padding: spacing.desktopGutter,
selectedTextColor: palette.accent1Color
},
menuSubheader: {
padding: spacing.desktopGutter,
borderColor: palette.borderColor,
textColor: palette.primary1Color
},
paper: {
backgroundColor: Colors.white
},
radioButton: {
borderColor: palette.textColor,
backgroundColor: Colors.white,
checkedColor: palette.primary1Color,
requiredColor: palette.primary1Color,
disabledColor: palette.disabledColor,
size: 24,
labelColor: palette.textColor,
labelDisabledColor: palette.disabledColor
},
raisedButton: {
color: Colors.white,
textColor: palette.textColor,
primaryColor: palette.accent1Color,
primaryTextColor: Colors.white,
secondaryColor: palette.primary1Color,
secondaryTextColor: Colors.white
},
refreshIndicator: {
strokeColor: Colors.grey300,
loadingStrokeColor: palette.primary1Color
},
slider: {
trackSize: 2,
trackColor: Colors.minBlack,
trackColorSelected: Colors.grey500,
handleSize: 12,
handleSizeDisabled: 8,
handleSizeActive: 18,
handleColorZero: Colors.grey400,
handleFillColor: Colors.white,
selectionColor: palette.primary3Color,
rippleColor: palette.primary1Color
},
snackbar: {
textColor: Colors.white,
backgroundColor: '#323232',
actionColor: palette.accent1Color
},
table: {
backgroundColor: Colors.white
},
tableHeader: {
borderColor: palette.borderColor
},
tableHeaderColumn: {
textColor: Colors.lightBlack,
height: 56,
spacing: 24
},
tableFooter: {
borderColor: palette.borderColor,
textColor: Colors.lightBlack
},
tableRow: {
hoverColor: Colors.grey200,
stripeColor: ColorManipulator.lighten(palette.primary1Color, 0.55),
selectedColor: Colors.grey300,
textColor: Colors.darkBlack,
borderColor: palette.borderColor
},
tableRowColumn: {
height: 48,
spacing: 24
},
timePicker: {
color: Colors.white,
textColor: Colors.grey600,
accentColor: palette.primary1Color,
clockColor: Colors.black,
selectColor: palette.primary2Color,
selectTextColor: Colors.white
},
toggle: {
thumbOnColor: palette.primary1Color,
thumbOffColor: Colors.grey50,
thumbDisabledColor: Colors.grey400,
thumbRequiredColor: palette.primary1Color,
trackOnColor: ColorManipulator.fade(palette.primary1Color, 0.5),
trackOffColor: Colors.minBlack,
trackDisabledColor: Colors.faintBlack,
labelColor: palette.textColor,
labelDisabledColor: palette.disabledColor
},
toolbar: {
backgroundColor: ColorManipulator.darken('#eeeeee', 0.05),
height: 56,
titleFontSize: 20,
iconColor: 'rgba(0, 0, 0, .40)',
separatorColor: 'rgba(0, 0, 0, .175)',
menuHoverColor: 'rgba(0, 0, 0, .10)'
},
tabs: {
backgroundColor: palette.primary1Color
},
textField: {
textColor: palette.textColor,
hintColor: palette.disabledColor,
floatingLabelColor: palette.textColor,
disabledTextColor: palette.disabledColor,
errorColor: Colors.red500,
focusColor: palette.primary1Color,
backgroundColor: 'transparent',
borderColor: palette.borderColor
}
};
// Properties based on previous properties
obj.flatButton.disabledTextColor = ColorManipulator.fade(obj.flatButton.textColor, 0.3);
obj.floatingActionButton.disabledColor = ColorManipulator.darken(Colors.white, 0.1);
obj.floatingActionButton.disabledTextColor = ColorManipulator.fade(palette.textColor, 0.3);
obj.raisedButton.disabledColor = ColorManipulator.darken(obj.raisedButton.color, 0.1);
obj.raisedButton.disabledTextColor = ColorManipulator.fade(obj.raisedButton.textColor, 0.3);
obj.toggle.trackRequiredColor = ColorManipulator.fade(obj.toggle.thumbRequiredColor, 0.5);
return obj;
}
};
module.exports = LightTheme;
},{"../../utils/color-manipulator":124,"../colors":69,"../spacing":71}],75:[function(require,module,exports){
'use strict';
var AutoPrefix = require('./auto-prefix');
module.exports = {
easeOutFunction: 'cubic-bezier(0.23, 1, 0.32, 1)',
easeInOutFunction: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
easeOut: function easeOut(duration, property, delay, easeFunction) {
easeFunction = easeFunction || this.easeOutFunction;
if (property && Object.prototype.toString.call(property) === '[object Array]') {
var transitions = '';
for (var i = 0; i < property.length; i++) {
if (transitions) transitions += ',';
transitions += this.create(duration, property[i], delay, easeFunction);
}
return transitions;
} else {
return this.create(duration, property, delay, easeFunction);
}
},
create: function create(duration, property, delay, easeFunction) {
duration = duration || '450ms';
property = property || 'all';
delay = delay || '0ms';
easeFunction = easeFunction || "linear";
return AutoPrefix.singleHyphened(property) + ' ' + duration + ' ' + easeFunction + ' ' + delay;
}
};
},{"./auto-prefix":68}],76:[function(require,module,exports){
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var Colors = require('./colors');
var Typography = function Typography() {
_classCallCheck(this, Typography);
// text colors
this.textFullBlack = Colors.fullBlack;
this.textDarkBlack = Colors.darkBlack;
this.textLightBlack = Colors.lightBlack;
this.textMinBlack = Colors.minBlack;
this.textFullWhite = Colors.fullWhite;
this.textDarkWhite = Colors.darkWhite;
this.textLightWhite = Colors.lightWhite;
// font weight
this.fontWeightLight = 300;
this.fontWeightNormal = 400;
this.fontWeightMedium = 500;
this.fontStyleButtonFontSize = 14;
};
module.exports = new Typography();
},{"./colors":69}],77:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var SvgIcon = React.createClass({
displayName: 'SvgIcon',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
color: React.PropTypes.string,
hoverColor: React.PropTypes.string,
onMouseEnter: React.PropTypes.func,
onMouseLeave: React.PropTypes.func,
viewBox: React.PropTypes.string
},
getInitialState: function getInitialState() {
return {
hovered: false
};
},
getDefaultProps: function getDefaultProps() {
return {
onMouseEnter: function onMouseEnter() {},
onMouseLeave: function onMouseLeave() {},
viewBox: '0 0 24 24'
};
},
render: function render() {
var _props = this.props;
var children = _props.children;
var color = _props.color;
var hoverColor = _props.hoverColor;
var onMouseEnter = _props.onMouseEnter;
var onMouseLeave = _props.onMouseLeave;
var style = _props.style;
var viewBox = _props.viewBox;
var other = _objectWithoutProperties(_props, ['children', 'color', 'hoverColor', 'onMouseEnter', 'onMouseLeave', 'style', 'viewBox']);
var offColor = color ? color : style && style.fill ? style.fill : this.context.muiTheme.palette.textColor;
var onColor = hoverColor ? hoverColor : offColor;
var mergedStyles = this.mergeAndPrefix({
display: 'inline-block',
height: 24,
width: 24,
userSelect: 'none',
transition: Transitions.easeOut()
}, style, {
// Make sure our fill color overrides fill provided in props.style
fill: this.state.hovered ? onColor : offColor
});
var events = hoverColor ? {
onMouseEnter: this._handleMouseEnter,
onMouseLeave: this._handleMouseLeave
} : {};
return React.createElement(
'svg',
_extends({}, other, events, {
style: mergedStyles,
viewBox: viewBox }),
children
);
},
_handleMouseLeave: function _handleMouseLeave(e) {
this.setState({ hovered: false });
this.props.onMouseLeave(e);
},
_handleMouseEnter: function _handleMouseEnter(e) {
this.setState({ hovered: true });
this.props.onMouseEnter(e);
}
});
module.exports = SvgIcon;
},{"./mixins/style-propable":52,"./styles/transitions":75,"react":312}],78:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var SvgIcon = require('../../svg-icon');
var HardwareKeyboardArrowDown = React.createClass({
displayName: 'HardwareKeyboardArrowDown',
mixins: [PureRenderMixin],
render: function render() {
return React.createElement(
SvgIcon,
this.props,
React.createElement('path', { d: 'M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z' })
);
}
});
module.exports = HardwareKeyboardArrowDown;
},{"../../svg-icon":77,"react/addons":140}],79:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var SvgIcon = require('../../svg-icon');
var HardwareKeyboardArrowUp = React.createClass({
displayName: 'HardwareKeyboardArrowUp',
mixins: [PureRenderMixin],
render: function render() {
return React.createElement(
SvgIcon,
this.props,
React.createElement('path', { d: 'M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z' })
);
}
});
module.exports = HardwareKeyboardArrowUp;
},{"../../svg-icon":77,"react/addons":140}],80:[function(require,module,exports){
'use strict';
var React = require('react');
var SvgIcon = require('../svg-icon');
var NavigationChevronLeftDouble = React.createClass({
displayName: 'NavigationChevronLeftDouble',
render: function render() {
return React.createElement(
SvgIcon,
this.props,
React.createElement('path', { d: 'M11.41 7.41 L10 6 l-6 6 6 6 1.41-1.41 L6.83 12z' }),
React.createElement('path', { d: 'M18.41 7.41 L17 6 l-6 6 6 6 1.41-1.41 L13.83 12z' })
);
}
});
module.exports = NavigationChevronLeftDouble;
},{"../svg-icon":77,"react":312}],81:[function(require,module,exports){
'use strict';
var React = require('react');
var SvgIcon = require('../svg-icon');
var NavigationChevronRightDouble = React.createClass({
displayName: 'NavigationChevronRightDouble',
render: function render() {
return React.createElement(
SvgIcon,
this.props,
React.createElement('path', { d: 'M6 6 L4.59 7.41 9.17 12 l-4.58 4.59 L6 18 l6 -6z' }),
React.createElement('path', { d: 'M13 6 L11.59 7.41 16.17 12 l-4.58 4.59 L13 18 l6 -6z' })
);
}
});
module.exports = NavigationChevronRightDouble;
},{"../svg-icon":77,"react":312}],82:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var SvgIcon = require('../../svg-icon');
var NavigationArrowDropDown = React.createClass({
displayName: 'NavigationArrowDropDown',
mixins: [PureRenderMixin],
render: function render() {
return React.createElement(
SvgIcon,
this.props,
React.createElement('path', { d: 'M7 10l5 5 5-5z' })
);
}
});
module.exports = NavigationArrowDropDown;
},{"../../svg-icon":77,"react/addons":140}],83:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var SvgIcon = require('../../svg-icon');
var NavigationArrowDropUp = React.createClass({
displayName: 'NavigationArrowDropUp',
mixins: [PureRenderMixin],
render: function render() {
return React.createElement(
SvgIcon,
this.props,
React.createElement('path', { d: 'M7 14l5-5 5 5z' })
);
}
});
module.exports = NavigationArrowDropUp;
},{"../../svg-icon":77,"react/addons":140}],84:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var SvgIcon = require('../../svg-icon');
var NavigationChevronLeft = React.createClass({
displayName: 'NavigationChevronLeft',
mixins: [PureRenderMixin],
render: function render() {
return React.createElement(
SvgIcon,
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":77,"react/addons":140}],85:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var SvgIcon = require('../../svg-icon');
var NavigationChevronRight = React.createClass({
displayName: 'NavigationChevronRight',
mixins: [PureRenderMixin],
render: function render() {
return React.createElement(
SvgIcon,
this.props,
React.createElement('path', { d: 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z' })
);
}
});
module.exports = NavigationChevronRight;
},{"../../svg-icon":77,"react/addons":140}],86:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var SvgIcon = require('../../svg-icon');
var NavigationMenu = React.createClass({
displayName: 'NavigationMenu',
mixins: [PureRenderMixin],
render: function render() {
return React.createElement(
SvgIcon,
this.props,
React.createElement('path', { d: 'M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z' })
);
}
});
module.exports = NavigationMenu;
},{"../../svg-icon":77,"react/addons":140}],87:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var SvgIcon = require('../../svg-icon');
var ToggleCheckBoxOutlineBlank = React.createClass({
displayName: 'ToggleCheckBoxOutlineBlank',
mixins: [PureRenderMixin],
render: function render() {
return React.createElement(
SvgIcon,
this.props,
React.createElement('path', { d: 'M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z' })
);
}
});
module.exports = ToggleCheckBoxOutlineBlank;
},{"../../svg-icon":77,"react/addons":140}],88:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var SvgIcon = require('../../svg-icon');
var ToggleCheckBox = React.createClass({
displayName: 'ToggleCheckBox',
mixins: [PureRenderMixin],
render: function render() {
return React.createElement(
SvgIcon,
this.props,
React.createElement('path', { d: 'M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' })
);
}
});
module.exports = ToggleCheckBox;
},{"../../svg-icon":77,"react/addons":140}],89:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var SvgIcon = require('../../svg-icon');
var ToggleRadioButtonChecked = React.createClass({
displayName: 'ToggleRadioButtonChecked',
mixins: [PureRenderMixin],
render: function render() {
return React.createElement(
SvgIcon,
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 = ToggleRadioButtonChecked;
},{"../../svg-icon":77,"react/addons":140}],90:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var SvgIcon = require('../../svg-icon');
var ToggleRadioButtonUnchecked = React.createClass({
displayName: 'ToggleRadioButtonUnchecked',
mixins: [PureRenderMixin],
render: function render() {
return React.createElement(
SvgIcon,
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 = ToggleRadioButtonUnchecked;
},{"../../svg-icon":77,"react/addons":140}],91:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var Checkbox = require('../checkbox');
var TableRowColumn = require('./table-row-column');
var ClickAwayable = require('../mixins/click-awayable');
var StylePropable = require('../mixins/style-propable');
var TableBody = React.createClass({
displayName: 'TableBody',
mixins: [ClickAwayable, StylePropable],
propTypes: {
allRowsSelected: React.PropTypes.bool,
deselectOnClickaway: React.PropTypes.bool,
displayRowCheckbox: React.PropTypes.bool,
multiSelectable: React.PropTypes.bool,
onCellClick: React.PropTypes.func,
onCellHover: React.PropTypes.func,
onCellHoverExit: React.PropTypes.func,
onRowHover: React.PropTypes.func,
onRowHoverExit: React.PropTypes.func,
onRowSelection: React.PropTypes.func,
preScanRows: React.PropTypes.bool,
selectable: React.PropTypes.bool,
showRowHover: React.PropTypes.bool,
stripedRows: React.PropTypes.bool,
style: React.PropTypes.object
},
getDefaultProps: function getDefaultProps() {
return {
allRowsSelected: false,
deselectOnClickaway: true,
displayRowCheckbox: true,
multiSelectable: false,
preScanRows: true,
selectable: true
};
},
getInitialState: function getInitialState() {
return {
selectedRows: this._calculatePreselectedRows(this.props)
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
var newState = {};
if (this.props.allRowsSelected && !nextProps.allRowsSelected) {
var lastSelectedRow = this.state.selectedRows.length ? this.state.selectedRows[this.state.selectedRows.length - 1] : undefined;
newState.selectedRows = [lastSelectedRow];
} else {
newState.selectedRows = this._calculatePreselectedRows(nextProps);
}
this.setState(newState);
},
componentClickAway: function componentClickAway() {
if (this.props.deselectOnClickaway && this.state.selectedRows.length) {
this.setState({ selectedRows: [] });
}
},
render: function render() {
var _props = this.props;
var className = _props.className;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['className', 'style']);
var classes = 'mui-table-body';
if (className) classes += ' ' + className;
var rows = this._createRows();
return React.createElement(
'tbody',
{ className: classes, style: style },
rows
);
},
_createRows: function _createRows() {
var _this = this;
var numChildren = React.Children.count(this.props.children);
var rowNumber = 0;
var handlers = {
onCellClick: this._onCellClick,
onCellHover: this._onCellHover,
onCellHoverExit: this._onCellHoverExit,
onRowHover: this._onRowHover,
onRowHoverExit: this._onRowHoverExit,
onRowClick: this._onRowClick
};
return React.Children.map(this.props.children, function (child) {
if (React.isValidElement(child)) {
var _ret = (function () {
var props = {
displayRowCheckbox: _this.props.displayRowCheckbox,
hoverable: _this.props.showRowHover,
selected: _this._isRowSelected(rowNumber),
striped: _this.props.stripedRows && rowNumber % 2 === 0,
rowNumber: rowNumber++
};
var checkboxColumn = _this._createRowCheckboxColumn(props);
if (rowNumber === numChildren) {
props.displayBorder = false;
}
var children = [checkboxColumn];
React.Children.forEach(child.props.children, function (child) {
children.push(child);
});
return {
v: React.cloneElement(child, _extends({}, props, handlers), children)
};
})();
if (typeof _ret === 'object') return _ret.v;
}
});
},
_createRowCheckboxColumn: function _createRowCheckboxColumn(rowProps) {
if (!this.props.displayRowCheckbox) return null;
var key = rowProps.rowNumber + '-cb';
var checkbox = React.createElement(Checkbox, {
ref: 'rowSelectCB',
name: key,
value: 'selected',
disabled: !this.props.selectable,
checked: rowProps.selected });
return React.createElement(
TableRowColumn,
{
key: key,
columnNumber: 0,
style: { width: 24 } },
checkbox
);
},
_calculatePreselectedRows: function _calculatePreselectedRows(props) {
// Determine what rows are 'pre-selected'.
var preSelectedRows = [];
if (props.selectable && props.preScanRows) {
(function () {
var index = 0;
React.Children.forEach(props.children, function (child) {
if (React.isValidElement(child)) {
if (child.props.selected && (preSelectedRows.length === 0 || props.multiSelectable)) {
preSelectedRows.push(index);
}
index++;
}
});
})();
}
return preSelectedRows;
},
_isRowSelected: function _isRowSelected(rowNumber) {
if (this.props.allRowsSelected) {
return true;
}
for (var i = 0; i < this.state.selectedRows.length; i++) {
var selection = this.state.selectedRows[i];
if (typeof selection === 'object') {
if (this._isValueInRange(rowNumber, selection)) return true;
} else {
if (selection === rowNumber) return true;
}
}
return false;
},
_isValueInRange: function _isValueInRange(value, range) {
if (!range) return false;
if (range.start <= value && value <= range.end || range.end <= value && value <= range.start) {
return true;
}
return false;
},
_onRowClick: function _onRowClick(e, rowNumber) {
e.stopPropagation();
if (this.props.selectable) {
// Prevent text selection while selecting rows.
window.getSelection().removeAllRanges();
this._processRowSelection(e, rowNumber);
}
},
_processRowSelection: function _processRowSelection(e, rowNumber) {
var selectedRows = this.state.selectedRows;
if (e.shiftKey && this.props.multiSelectable && selectedRows.length) {
var lastIndex = selectedRows.length - 1;
var lastSelection = selectedRows[lastIndex];
if (typeof lastSelection === 'object') {
lastSelection.end = rowNumber;
} else {
selectedRows.splice(lastIndex, 1, { start: lastSelection, end: rowNumber });
}
} else if ((e.ctrlKey && !e.metaKey || e.metaKey && !e.ctrlKey) && this.props.multiSelectable) {
var idx = selectedRows.indexOf(rowNumber);
if (idx < 0) {
var foundRange = false;
for (var i = 0; i < selectedRows.length; i++) {
var range = selectedRows[i];
if (typeof range !== 'object') continue;
if (this._isValueInRange(rowNumber, range)) {
var _selectedRows;
foundRange = true;
var values = this._splitRange(range, rowNumber);
(_selectedRows = selectedRows).splice.apply(_selectedRows, [i, 1].concat(_toConsumableArray(values)));
}
}
if (!foundRange) selectedRows.push(rowNumber);
} else {
selectedRows.splice(idx, 1);
}
} else {
if (selectedRows.length === 1 && selectedRows[0] === rowNumber) {
selectedRows = [];
} else {
selectedRows = [rowNumber];
}
}
this.setState({ selectedRows: selectedRows });
if (this.props.onRowSelection) this.props.onRowSelection(this._flattenRanges(selectedRows));
},
_splitRange: function _splitRange(range, splitPoint) {
var splitValues = [];
var startOffset = range.start - splitPoint;
var endOffset = range.end - splitPoint;
// Process start half
splitValues.push.apply(splitValues, _toConsumableArray(this._genRangeOfValues(splitPoint, startOffset)));
// Process end half
splitValues.push.apply(splitValues, _toConsumableArray(this._genRangeOfValues(splitPoint, endOffset)));
return splitValues;
},
_genRangeOfValues: function _genRangeOfValues(start, offset) {
var values = [];
var dir = offset > 0 ? -1 : 1; // This forces offset to approach 0 from either direction.
while (offset !== 0) {
values.push(start + offset);
offset += dir;
}
return values;
},
_flattenRanges: function _flattenRanges(selectedRows) {
var rows = [];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = selectedRows[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var selection = _step.value;
if (typeof selection === 'object') {
var values = this._genRangeOfValues(selection.end, selection.start - selection.end);
rows.push.apply(rows, [selection.end].concat(_toConsumableArray(values)));
} else {
rows.push(selection);
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator['return']) {
_iterator['return']();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
return rows.sort();
},
_onCellClick: function _onCellClick(e, rowNumber, columnNumber) {
e.stopPropagation();
if (this.props.onCellClick) this.props.onCellClick(rowNumber, this._getColumnId(columnNumber));
},
_onCellHover: function _onCellHover(e, rowNumber, columnNumber) {
if (this.props.onCellHover) this.props.onCellHover(rowNumber, this._getColumnId(columnNumber));
this._onRowHover(e, rowNumber);
},
_onCellHoverExit: function _onCellHoverExit(e, rowNumber, columnNumber) {
if (this.props.onCellHoverExit) this.props.onCellHoverExit(rowNumber, this._getColumnId(columnNumber));
this._onRowHoverExit(e, rowNumber);
},
_onRowHover: function _onRowHover(e, rowNumber) {
if (this.props.onRowHover) this.props.onRowHover(rowNumber);
},
_onRowHoverExit: function _onRowHoverExit(e, rowNumber) {
if (this.props.onRowHoverExit) this.props.onRowHoverExit(rowNumber);
},
_getColumnId: function _getColumnId(columnNumber) {
var columnId = columnNumber;
if (this.props.displayRowCheckbox) columnId--;
return columnId;
}
});
module.exports = TableBody;
},{"../checkbox":13,"../mixins/click-awayable":49,"../mixins/style-propable":52,"./table-row-column":95,"react":312}],92:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var TableRowColumn = require('./table-row-column');
var StylePropable = require('../mixins/style-propable');
var TableFooter = React.createClass({
displayName: 'TableFooter',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
adjustForCheckbox: React.PropTypes.bool,
style: React.PropTypes.object
},
getDefaultProps: function getDefaultProps() {
return {
adjustForCheckbox: true
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.tableFooter;
},
getStyles: function getStyles() {
var styles = {
cell: {
borderTop: '1px solid ' + this.getTheme().borderColor,
verticalAlign: 'bottom',
padding: 20,
textAlign: 'left',
whiteSpace: 'nowrap'
}
};
return styles;
},
render: function render() {
var _props = this.props;
var className = _props.className;
var other = _objectWithoutProperties(_props, ['className']);
var classes = 'mui-table-footer';
if (className) classes += ' ' + className;
var footerRows = this._createRows();
return React.createElement(
'tfoot',
_extends({ className: classes }, other),
footerRows
);
},
_createRows: function _createRows() {
var _this = this;
var rowNumber = 0;
return React.Children.map(this.props.children, function (child) {
return _this._createRow(child, rowNumber++);
});
},
_createRow: function _createRow(child, rowNumber) {
var styles = this.getStyles();
var props = {
className: 'mui-table-footer-row',
displayBorder: false,
key: 'f-' + rowNumber,
rowNumber: rowNumber,
style: this.mergeAndPrefix(styles.cell, child.props.style)
};
var children = [this._getCheckboxPlaceholder(props)];
React.Children.forEach(child.props.children, function (child) {
children.push(child);
});
return React.cloneElement(child, props, children);
},
_getCheckboxPlaceholder: function _getCheckboxPlaceholder(props) {
if (!this.props.adjustForCheckbox) return null;
var key = 'fpcb' + props.rowNumber;
return React.createElement(TableRowColumn, { key: key, style: { width: 24 } });
}
});
module.exports = TableFooter;
},{"../mixins/style-propable":52,"./table-row-column":95,"react":312}],93:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var Tooltip = require('../tooltip');
var TableHeaderColumn = React.createClass({
displayName: 'TableHeaderColumn',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
columnNumber: React.PropTypes.number,
onClick: React.PropTypes.func,
style: React.PropTypes.object,
tooltip: React.PropTypes.string,
tooltipStyle: React.PropTypes.object
},
getInitialState: function getInitialState() {
return {
hovered: false
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.tableHeaderColumn;
},
getStyles: function getStyles() {
var theme = this.getTheme();
var styles = {
root: {
fontWeight: 'normal',
fontSize: 12,
paddingLeft: theme.spacing,
paddingRight: theme.spacing,
height: theme.height,
textAlign: 'left',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
color: this.getTheme().textColor,
position: 'relative'
},
tooltip: {
boxSizing: 'border-box',
marginTop: theme.height / 2
}
};
return styles;
},
render: function render() {
var styles = this.getStyles();
var handlers = {
onMouseEnter: this._onMouseEnter,
onMouseLeave: this._onMouseLeave,
onClick: this._onClick
};
var _props = this.props;
var className = _props.className;
var columnNumber = _props.columnNumber;
var onClick = _props.onClick;
var style = _props.style;
var tooltip = _props.tooltip;
var tooltipStyle = _props.tooltipStyle;
var other = _objectWithoutProperties(_props, ['className', 'columnNumber', 'onClick', 'style', 'tooltip', 'tooltipStyle']);
var classes = 'mui-table-header-column';
if (className) classes += ' ' + className;
if (this.props.tooltip !== undefined) {
tooltip = React.createElement(Tooltip, {
label: this.props.tooltip,
show: this.state.hovered,
style: this.mergeAndPrefix(styles.tooltip, tooltipStyle) });
}
return React.createElement(
'th',
_extends({
key: this.props.key,
className: classes,
style: this.mergeAndPrefix(styles.root, style)
}, handlers, other),
tooltip,
this.props.children
);
},
_onMouseEnter: function _onMouseEnter() {
if (this.props.tooltip !== undefined) this.setState({ hovered: true });
},
_onMouseLeave: function _onMouseLeave() {
if (this.props.tooltip !== undefined) this.setState({ hovered: false });
},
_onClick: function _onClick(e) {
if (this.props.onClick) this.props.onClick(e, this.props.columnNumber);
}
});
module.exports = TableHeaderColumn;
},{"../mixins/style-propable":52,"../tooltip":118,"react":312}],94:[function(require,module,exports){
'use strict';
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var Checkbox = require('../checkbox');
var StylePropable = require('../mixins/style-propable');
var TableHeaderColumn = require('./table-header-column');
var TableHeader = React.createClass({
displayName: 'TableHeader',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
adjustForCheckbox: React.PropTypes.bool,
displaySelectAll: React.PropTypes.bool,
enableSelectAll: React.PropTypes.bool,
onSelectAll: React.PropTypes.func,
selectAllSelected: React.PropTypes.bool,
style: React.PropTypes.object
},
getDefaultProps: function getDefaultProps() {
return {
adjustForCheckbox: true,
displaySelectAll: true,
enableSelectAll: true,
selectAllSelected: false
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.tableHeader;
},
getStyles: function getStyles() {
var styles = {
root: {
borderBottom: '1px solid ' + this.getTheme().borderColor
}
};
return styles;
},
render: function render() {
var _props = this.props;
var className = _props.className;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['className', 'style']);
var classes = 'mui-table-header';
if (className) classes += ' ' + className;
var superHeaderRows = this._createSuperHeaderRows();
var baseHeaderRow = this._createBaseHeaderRow();
return React.createElement(
'thead',
{ className: classes, style: this.mergeAndPrefix(this.getStyles().root, style) },
superHeaderRows,
baseHeaderRow
);
},
_createSuperHeaderRows: function _createSuperHeaderRows() {
var numChildren = React.Children.count(this.props.children);
if (numChildren === 1) return undefined;
var superHeaders = [];
for (var index = 0; index < numChildren - 1; index++) {
var child = this.props.children[index];
if (!React.isValidElement(child)) continue;
var props = {
className: 'mui-table-super-header-row',
displayRowCheckbox: false,
key: 'sh' + index,
rowNumber: index
};
superHeaders.push(this._createSuperHeaderRow(child, props));
}
if (superHeaders.length) return superHeaders;
},
_createSuperHeaderRow: function _createSuperHeaderRow(child, props) {
var children = [];
if (this.props.adjustForCheckbox) {
children.push(this._getCheckboxPlaceholder(props));
}
React.Children.forEach(child.props.children, function (child) {
children.push(child);
});
return React.cloneElement(child, props, children);
},
_createBaseHeaderRow: function _createBaseHeaderRow() {
var numChildren = React.Children.count(this.props.children);
var child = numChildren === 1 ? this.props.children : this.props.children[numChildren - 1];
var props = {
className: 'mui-table-header-row',
key: 'h' + numChildren,
rowNumber: numChildren
};
var children = [this._getSelectAllCheckboxColumn(props)];
React.Children.forEach(child.props.children, function (child) {
children.push(child);
});
return React.cloneElement(child, props, children);
},
_getCheckboxPlaceholder: function _getCheckboxPlaceholder(props) {
if (!this.props.adjustForCheckbox) return null;
var key = 'hpcb' + props.rowNumber;
return React.createElement(TableHeaderColumn, { key: key, style: { width: 24 } });
},
_getSelectAllCheckboxColumn: function _getSelectAllCheckboxColumn(props) {
if (!this.props.displaySelectAll) return this._getCheckboxPlaceholder(props);
var checkbox = React.createElement(Checkbox, {
key: 'selectallcb',
name: 'selectallcb',
value: 'selected',
disabled: !this.props.enableSelectAll,
checked: this.props.selectAllSelected,
onCheck: this._onSelectAll });
return React.createElement(
TableHeaderColumn,
{ style: { width: 24 } },
checkbox
);
},
_onSelectAll: function _onSelectAll(e, checked) {
if (this.props.onSelectAll) this.props.onSelectAll(checked);
}
});
module.exports = TableHeader;
},{"../checkbox":13,"../mixins/style-propable":52,"./table-header-column":93,"react":312}],95:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var TableRowColumn = React.createClass({
displayName: 'TableRowColumn',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
columnNumber: React.PropTypes.number,
hoverable: React.PropTypes.bool,
onClick: React.PropTypes.func,
onHover: React.PropTypes.func,
onHoverExit: React.PropTypes.func,
style: React.PropTypes.object
},
getDefaultProps: function getDefaultProps() {
return {
hoverable: false
};
},
getInitialState: function getInitialState() {
return {
hovered: false
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.tableRowColumn;
},
getStyles: function getStyles() {
var theme = this.getTheme();
var styles = {
root: {
paddingLeft: theme.spacing,
paddingRight: theme.spacing,
height: theme.height,
textAlign: 'left',
fontSize: 13,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
}
};
if (React.Children.count(this.props.children) === 1 && !isNaN(this.props.children)) {
styles.textAlign = 'right';
}
return styles;
},
render: function render() {
var _props = this.props;
var className = _props.className;
var columnNumber = _props.columnNumber;
var hoverable = _props.hoverable;
var onClick = _props.onClick;
var onHover = _props.onHover;
var onHoverExit = _props.onHoverExit;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['className', 'columnNumber', 'hoverable', 'onClick', 'onHover', 'onHoverExit', 'style']);
var styles = this.getStyles();
var handlers = {
onClick: this._onClick,
onMouseEnter: this._onMouseEnter,
onMouseLeave: this._onMouseLeave
};
var classes = 'mui-table-row-column';
if (className) classes += ' ' + className;
return React.createElement(
'td',
_extends({
key: this.props.key,
className: classes,
style: this.mergeAndPrefix(styles.root, style)
}, handlers, other),
this.props.children
);
},
_onClick: function _onClick(e) {
if (this.props.onClick) this.props.onClick(e, this.props.columnNumber);
},
_onMouseEnter: function _onMouseEnter(e) {
if (this.props.hoverable) {
this.setState({ hovered: true });
if (this.props.onHover) this.props.onHover(e, this.props.columnNumber);
}
},
_onMouseLeave: function _onMouseLeave(e) {
if (this.props.hoverable) {
this.setState({ hovered: false });
if (this.props.onHoverExit) this.props.onHoverExit(e, this.props.columnNumber);
}
}
});
module.exports = TableRowColumn;
},{"../mixins/style-propable":52,"react":312}],96:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var TableRow = React.createClass({
displayName: 'TableRow',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
displayBorder: React.PropTypes.bool,
hoverable: React.PropTypes.bool,
onCellClick: React.PropTypes.func,
onCellHover: React.PropTypes.func,
onCellHoverExit: React.PropTypes.func,
onRowClick: React.PropTypes.func,
onRowHover: React.PropTypes.func,
onRowHoverExit: React.PropTypes.func,
rowNumber: React.PropTypes.number,
selectable: React.PropTypes.bool,
selected: React.PropTypes.bool,
striped: React.PropTypes.bool,
style: React.PropTypes.object
},
getDefaultProps: function getDefaultProps() {
return {
displayBorder: true,
displayRowCheckbox: true,
hoverable: false,
selectable: true,
selected: false,
striped: false
};
},
getInitialState: function getInitialState() {
return {
hovered: false
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.tableRow;
},
getStyles: function getStyles() {
var theme = this.getTheme();
var cellBgColor = 'inherit';
if (this.state.hovered) {
cellBgColor = theme.hoverColor;
} else if (this.props.selected) {
cellBgColor = theme.selectedColor;
} else if (this.props.striped) {
cellBgColor = theme.stripeColor;
}
var styles = {
root: {
borderBottom: '1px solid ' + this.getTheme().borderColor,
color: this.getTheme().textColor
},
cell: {
backgroundColor: cellBgColor
}
};
if (!this.props.displayBorder) {
styles.root.borderBottom = '';
}
return styles;
},
render: function render() {
var _props = this.props;
var className = _props.className;
var displayBorder = _props.displayBorder;
var hoverable = _props.hoverable;
var onCellClick = _props.onCellClick;
var onCellHover = _props.onCellHover;
var onCellHoverExit = _props.onCellHoverExit;
var onRowClick = _props.onRowClick;
var onRowHover = _props.onRowHover;
var onRowHoverExit = _props.onRowHoverExit;
var rowNumber = _props.rowNumber;
var selectable = _props.selectable;
var selected = _props.selected;
var striped = _props.striped;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['className', 'displayBorder', 'hoverable', 'onCellClick', 'onCellHover', 'onCellHoverExit', 'onRowClick', 'onRowHover', 'onRowHoverExit', 'rowNumber', 'selectable', 'selected', 'striped', 'style']);
var classes = 'mui-table-row';
if (className) classes += ' ' + className;
var rowColumns = this._createColumns();
return React.createElement(
'tr',
_extends({
className: classes,
style: this.mergeAndPrefix(this.getStyles().root, style)
}, other),
rowColumns
);
},
_createColumns: function _createColumns() {
var _this = this;
var columnNumber = 1;
return React.Children.map(this.props.children, function (child) {
if (React.isValidElement(child)) {
return _this._createColumn(child, columnNumber++);
}
});
},
_createColumn: function _createColumn(child, columnNumber) {
var key = this.props.rowNumber + '-' + columnNumber;
var styles = this.getStyles();
var handlers = {
onClick: this._onCellClick,
onHover: this._onCellHover,
onHoverExit: this._onCellHoverExit
};
return React.cloneElement(child, _extends({
columnNumber: columnNumber,
hoverable: this.props.hoverable,
key: child.props.key || key,
style: this.mergeAndPrefix(styles.cell, child.props.style)
}, handlers));
},
_onRowClick: function _onRowClick(e) {
if (this.props.onRowClick) this.props.onRowClick(e, this.props.rowNumber);
},
_onRowHover: function _onRowHover(e) {
if (this.props.onRowHover) this.props.onRowHover(e, this.props.rowNumber);
},
_onRowHoverExit: function _onRowHoverExit(e) {
if (this.props.onRowHoverExit) this.props.onRowHoverExit(e, this.props.rowNumber);
},
_onCellClick: function _onCellClick(e, columnIndex) {
if (this.props.selectable && this.props.onCellClick) this.props.onCellClick(e, this.props.rowNumber, columnIndex);
e.ctrlKey = true;
this._onRowClick(e);
},
_onCellHover: function _onCellHover(e, columnIndex) {
if (this.props.hoverable) {
this.setState({ hovered: true });
if (this.props.onCellHover) this.props.onCellHover(e, this.props.rowNumber, columnIndex);
this._onRowHover(e);
}
},
_onCellHoverExit: function _onCellHoverExit(e, columnIndex) {
if (this.props.hoverable) {
this.setState({ hovered: false });
if (this.props.onCellHoverExit) this.props.onCellHoverExit(e, this.props.rowNumber, columnIndex);
this._onRowHoverExit(e);
}
}
});
module.exports = TableRow;
},{"../mixins/style-propable":52,"react":312}],97:[function(require,module,exports){
'use strict';
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var Table = React.createClass({
displayName: 'Table',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
allRowsSelected: React.PropTypes.bool,
fixedFooter: React.PropTypes.bool,
fixedHeader: React.PropTypes.bool,
height: React.PropTypes.string,
multiSelectable: React.PropTypes.bool,
onCellClick: React.PropTypes.func,
onCellHover: React.PropTypes.func,
onCellHoverExit: React.PropTypes.func,
onRowHover: React.PropTypes.func,
onRowHoverExit: React.PropTypes.func,
onRowSelection: React.PropTypes.func,
selectable: React.PropTypes.bool,
style: React.PropTypes.object
},
getDefaultProps: function getDefaultProps() {
return {
allRowsSelected: false,
fixedFooter: true,
fixedHeader: true,
height: 'inherit',
multiSelectable: false,
selectable: true
};
},
getInitialState: function getInitialState() {
return {
allRowsSelected: this.props.allRowsSelected
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.table;
},
getStyles: function getStyles() {
var styles = {
root: {
backgroundColor: this.getTheme().backgroundColor,
padding: '0 ' + this.context.muiTheme.spacing.desktopGutter + 'px',
width: '100%',
borderCollapse: 'collapse',
borderSpacing: 0,
tableLayout: 'fixed'
},
bodyTable: {
height: this.props.fixedHeader || this.props.fixedFooter ? this.props.height : 'auto',
overflowX: 'hidden',
overflowY: 'auto'
},
tableWrapper: {
height: this.props.fixedHeader || this.props.fixedFooter ? 'auto' : this.props.height,
overflow: 'auto'
}
};
return styles;
},
render: function render() {
var _props = this.props;
var children = _props.children;
var className = _props.className;
var fixedFooter = _props.fixedFooter;
var fixedHeader = _props.fixedHeader;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['children', 'className', 'fixedFooter', 'fixedHeader', 'style']);
var classes = 'mui-table';
if (className) classes += ' ' + className;
var styles = this.getStyles();
var tHead = undefined,
tFoot = undefined,
tBody = undefined;
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var child = _step.value;
if (!React.isValidElement(child)) continue;
var displayName = child.type.displayName;
if (displayName === 'TableBody') {
tBody = this._createTableBody(child);
} else if (displayName === 'TableHeader') {
tHead = this._createTableHeader(child);
} else if (displayName === 'TableFooter') {
tFoot = this._createTableFooter(child);
}
}
// If we could not find a table-header and a table-body, do not attempt to display anything.
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator['return']) {
_iterator['return']();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
if (!tBody && !tHead) return null;
var mergedTableStyle = this.mergeAndPrefix(styles.root, style);
var headerTable = undefined,
footerTable = undefined;
var inlineHeader = undefined,
inlineFooter = undefined;
if (fixedHeader) {
headerTable = React.createElement(
'div',
{ className: 'mui-header-table' },
React.createElement(
'table',
{ className: className, style: mergedTableStyle },
tHead
)
);
} else {
inlineHeader = tHead;
}
if (tFoot !== undefined) {
if (fixedFooter) {
footerTable = React.createElement(
'div',
{ className: 'mui-footer-table' },
React.createElement(
'table',
{ className: className, style: mergedTableStyle },
tFoot
)
);
} else {
inlineFooter = tFoot;
}
}
return React.createElement(
'div',
{ className: 'mui-table-wrapper', style: styles.tableWrapper },
headerTable,
React.createElement(
'div',
{ className: 'mui-body-table', style: styles.bodyTable },
React.createElement(
'table',
{ className: classes, style: mergedTableStyle },
inlineHeader,
inlineFooter,
tBody
)
),
footerTable
);
},
_createTableHeader: function _createTableHeader(base) {
return React.cloneElement(base, {
enableSelectAll: base.props.enableSelectAll && this.props.selectable && this.props.multiSelectable,
onSelectAll: this._onSelectAll,
selectAllSelected: this.state.allRowsSelected
});
},
_createTableBody: function _createTableBody(base) {
return React.cloneElement(base, {
allRowsSelected: this.state.allRowsSelected,
multiSelectable: this.props.multiSelectable,
onCellClick: this._onCellClick,
onCellHover: this._onCellHover,
onCellHoverExit: this._onCellHoverExit,
onRowHover: this._onRowHover,
onRowHoverExit: this._onRowHoverExit,
onRowSelection: this._onRowSelection,
selectable: this.props.selectable,
style: this.mergeAndPrefix({ height: this.props.height }, base.props.style)
});
},
_createTableFooter: function _createTableFooter(base) {
return base;
},
_onCellClick: function _onCellClick(rowNumber, columnNumber) {
if (this.props.onCellClick) this.props.onCellClick(rowNumber, columnNumber);
},
_onCellHover: function _onCellHover(rowNumber, columnNumber) {
if (this.props.onCellHover) this.props.onCellHover(rowNumber, columnNumber);
},
_onCellHoverExit: function _onCellHoverExit(rowNumber, columnNumber) {
if (this.props.onCellHoverExit) this.props.onCellHoverExit(rowNumber, columnNumber);
},
_onRowHover: function _onRowHover(rowNumber) {
if (this.props.onRowHover) this.props.onRowHover(rowNumber);
},
_onRowHoverExit: function _onRowHoverExit(rowNumber) {
if (this.props.onRowHoverExit) this.props.onRowHoverExit(rowNumber);
},
_onRowSelection: function _onRowSelection(selectedRows) {
if (this.state.allRowsSelected) this.setState({ allRowsSelected: false });
if (this.props.onRowSelection) this.props.onRowSelection(selectedRows);
},
_onSelectAll: function _onSelectAll() {
if (this.props.onRowSelection && !this.state.allRowsSelected) this.props.onRowSelection('all');
this.setState({ allRowsSelected: !this.state.allRowsSelected });
}
});
module.exports = Table;
},{"../mixins/style-propable":52,"react":312}],98:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var Tab = React.createClass({
displayName: 'Tab',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
onTouchTap: React.PropTypes.func,
label: React.PropTypes.string,
onActive: React.PropTypes.func,
selected: React.PropTypes.bool,
width: React.PropTypes.string,
value: React.PropTypes.string
},
getDefaultProps: function getDefaultProps() {
return {
onActive: function onActive() {},
onTouchTap: function onTouchTap() {}
};
},
render: function render() {
var _props = this.props;
var label = _props.label;
var onActive = _props.onActive;
var onTouchTap = _props.onTouchTap;
var selected = _props.selected;
var style = _props.style;
var value = _props.value;
var width = _props.width;
var other = _objectWithoutProperties(_props, ['label', 'onActive', 'onTouchTap', 'selected', 'style', 'value', 'width']);
var styles = this.mergeAndPrefix({
display: 'table-cell',
cursor: 'pointer',
textAlign: 'center',
verticalAlign: 'middle',
height: 48,
color: selected ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,0.6)',
outline: 'none',
fontSize: 14,
fontWeight: 500,
whiteSpace: 'initial',
fontFamily: this.context.muiTheme.contentFontFamily,
boxSizing: 'border-box',
width: width
}, style);
return React.createElement(
'div',
_extends({}, other, {
style: styles,
onTouchTap: this._handleTouchTap }),
label
);
},
_handleTouchTap: function _handleTouchTap(e) {
this.props.onTouchTap(this.props.value, e, this);
}
});
module.exports = Tab;
},{"../mixins/style-propable":52,"react":312}],99:[function(require,module,exports){
'use strict';
var React = require('react');
var TabTemplate = React.createClass({
displayName: 'TabTemplate',
render: function render() {
var styles = {
'height': 0,
'overflow': 'hidden',
'width': '100%',
'position': 'relative',
'textAlign': 'initial'
};
if (this.props.selected) {
delete styles.height;
delete styles.overflow;
}
return React.createElement(
'div',
{ style: styles },
this.props.children
);
}
});
module.exports = TabTemplate;
},{"react":312}],100:[function(require,module,exports){
(function (process){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var TabTemplate = require('./tabTemplate');
var InkBar = require('../ink-bar');
var StylePropable = require('../mixins/style-propable');
var Controllable = require('../mixins/controllable');
var Tabs = React.createClass({
displayName: 'Tabs',
mixins: [StylePropable, Controllable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
contentContainerStyle: React.PropTypes.object,
initialSelectedIndex: React.PropTypes.number,
inkBarStyle: React.PropTypes.object,
tabItemContainerStyle: React.PropTypes.object
},
getDefaultProps: function getDefaultProps() {
return {
initialSelectedIndex: 0
};
},
getInitialState: function getInitialState() {
var valueLink = this.getValueLink(this.props);
var initialIndex = this.props.initialSelectedIndex;
return {
selectedIndex: valueLink.value ? this._getSelectedIndex(this.props) : initialIndex < this.getTabCount() ? initialIndex : 0
};
},
getEvenWidth: function getEvenWidth() {
return parseInt(window.getComputedStyle(React.findDOMNode(this)).getPropertyValue('width'), 10);
},
getTabCount: function getTabCount() {
return React.Children.count(this.props.children);
},
componentWillReceiveProps: function componentWillReceiveProps(newProps) {
var valueLink = this.getValueLink(newProps);
if (valueLink.value) {
this.setState({ selectedIndex: this._getSelectedIndex(newProps) });
}
},
render: function render() {
var _this = this;
var _props = this.props;
var children = _props.children;
var contentContainerStyle = _props.contentContainerStyle;
var initialSelectedIndex = _props.initialSelectedIndex;
var inkBarStyle = _props.inkBarStyle;
var style = _props.style;
var tabWidth = _props.tabWidth;
var tabItemContainerStyle = _props.tabItemContainerStyle;
var other = _objectWithoutProperties(_props, ['children', 'contentContainerStyle', 'initialSelectedIndex', 'inkBarStyle', 'style', 'tabWidth', 'tabItemContainerStyle']);
var themeVariables = this.context.muiTheme.component.tabs;
var styles = {
tabItemContainer: {
margin: 0,
padding: 0,
width: '100%',
height: 48,
backgroundColor: themeVariables.backgroundColor,
whiteSpace: 'nowrap',
display: 'table'
}
};
var valueLink = this.getValueLink(this.props);
var tabValue = valueLink.value;
var tabContent = [];
var width = 100 / this.getTabCount() + '%';
var left = 'calc(' + width + '*' + this.state.selectedIndex + ')';
var tabs = React.Children.map(children, function (tab, index) {
if (tab.type.displayName === "Tab") {
if (!tab.props.value && tabValue && process.env.NODE_ENV !== 'production') {
console.error('Tabs value prop has been passed, but Tab ' + index + ' does not have a value prop. Needs value if Tabs is going' + ' to be a controlled component.');
}
tabContent.push(tab.props.children ? React.createElement(TabTemplate, {
key: index,
selected: _this._getSelected(tab, index)
}, tab.props.children) : undefined);
return React.cloneElement(tab, {
key: index,
selected: _this._getSelected(tab, index),
tabIndex: index,
width: width,
onTouchTap: _this._handleTabTouchTap
});
} else {
var type = tab.type.displayName || tab.type;
console.error('Tabs only accepts Tab Components as children. Found ' + type + ' as child number ' + (index + 1) + ' of Tabs');
}
}, this);
var inkBar = this.state.selectedIndex !== -1 ? React.createElement(InkBar, {
left: left,
width: width,
style: inkBarStyle }) : null;
var inkBarContainerWidth = tabItemContainerStyle ? tabItemContainerStyle.width : '100%';
return React.createElement(
'div',
_extends({}, other, {
style: this.mergeAndPrefix(style) }),
React.createElement(
'div',
{ style: this.mergeAndPrefix(styles.tabItemContainer, tabItemContainerStyle) },
tabs
),
React.createElement(
'div',
{ style: { width: inkBarContainerWidth } },
inkBar
),
React.createElement(
'div',
{ style: this.mergeAndPrefix(contentContainerStyle) },
tabContent
)
);
},
_getSelectedIndex: function _getSelectedIndex(props) {
var valueLink = this.getValueLink(props);
var selectedIndex = -1;
React.Children.forEach(props.children, function (tab, index) {
if (valueLink.value === tab.props.value) {
selectedIndex = index;
}
});
return selectedIndex;
},
_handleTabTouchTap: function _handleTabTouchTap(value, e, tab) {
var valueLink = this.getValueLink(this.props);
var tabIndex = tab.props.tabIndex;
if (valueLink.value && valueLink.value !== value || this.state.selectedIndex !== tabIndex) {
valueLink.requestChange(value, e, tab);
}
this.setState({ selectedIndex: tabIndex });
tab.props.onActive(tab);
},
_getSelected: function _getSelected(tab, index) {
var valueLink = this.getValueLink(this.props);
return valueLink.value ? valueLink.value === tab.props.value : this.state.selectedIndex === index;
}
});
module.exports = Tabs;
}).call(this,require('_process'))
},{"../ink-bar":36,"../mixins/controllable":50,"../mixins/style-propable":52,"./tabTemplate":99,"_process":138,"react/addons":140}],101:[function(require,module,exports){
(function (process){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var ColorManipulator = require('./utils/color-manipulator');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var UniqueId = require('./utils/unique-id');
var EnhancedTextarea = require('./enhanced-textarea');
/**
* Check if a value is valid to be displayed inside an input.
*
* @param The value to check.
* @returns True if the string provided is valid, false otherwise.
*/
function isValid(value) {
return value || value === 0;
}
var TextField = React.createClass({
displayName: 'TextField',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
errorStyle: React.PropTypes.object,
errorText: React.PropTypes.string,
floatingLabelStyle: React.PropTypes.object,
floatingLabelText: React.PropTypes.string,
fullWidth: React.PropTypes.bool,
hintText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
id: React.PropTypes.string,
inputStyle: React.PropTypes.object,
multiLine: React.PropTypes.bool,
onBlur: React.PropTypes.func,
onChange: React.PropTypes.func,
onEnterKeyDown: React.PropTypes.func,
onFocus: React.PropTypes.func,
onKeyDown: React.PropTypes.func,
rows: React.PropTypes.number,
type: React.PropTypes.string,
underlineStyle: React.PropTypes.object,
underlineFocusStyle: React.PropTypes.object
},
getDefaultProps: function getDefaultProps() {
return {
fullWidth: false,
type: 'text',
rows: 1
};
},
getContextProps: function getContextProps() {
var theme = this.context.muiTheme;
return {
isRtl: theme.isRtl
};
},
getInitialState: function getInitialState() {
var props = this.props.children ? this.props.children.props : this.props;
return {
errorText: this.props.errorText,
hasValue: isValid(props.value) || isValid(props.defaultValue) || props.valueLink && isValid(props.valueLink.value)
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.textField;
},
componentDidMount: function componentDidMount() {
this._uniqueId = UniqueId.generate();
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
var newState = {};
newState.errorText = nextProps.errorText;
if (nextProps.children && nextProps.children.props) {
nextProps = nextProps.children.props;
}
var hasValueLinkProp = nextProps.hasOwnProperty('valueLink');
var hasValueProp = nextProps.hasOwnProperty('value');
var hasNewDefaultValue = nextProps.defaultValue !== this.props.defaultValue;
if (hasValueLinkProp) {
newState.hasValue = isValid(nextProps.valueLink.value);
} else if (hasValueProp) {
newState.hasValue = isValid(nextProps.value);
} else if (hasNewDefaultValue) {
newState.hasValue = isValid(nextProps.defaultValue);
}
if (newState) this.setState(newState);
},
getStyles: function getStyles() {
var props = this.props;
var theme = this.getTheme();
var contextProps = this.getContextProps();
var styles = {
root: {
fontSize: 16,
lineHeight: '24px',
width: props.fullWidth ? '100%' : 256,
height: (props.rows - 1) * 24 + (props.floatingLabelText ? 72 : 48),
display: 'inline-block',
position: 'relative',
fontFamily: this.context.muiTheme.contentFontFamily,
transition: Transitions.easeOut('200ms', 'height')
},
error: {
position: 'relative',
bottom: 5,
fontSize: 12,
lineHeight: '12px',
color: theme.errorColor,
transition: Transitions.easeOut()
},
hint: {
position: 'absolute',
lineHeight: '22px',
opacity: 1,
color: theme.hintColor,
transition: Transitions.easeOut(),
bottom: 12
},
input: {
tapHighlightColor: 'rgba(0,0,0,0)',
padding: 0,
position: 'relative',
width: '100%',
height: '100%',
border: 'none',
outline: 'none',
backgroundColor: theme.backgroundColor,
color: props.disabled ? theme.disabledTextColor : theme.textColor,
font: 'inherit'
},
underline: {
border: 'none',
borderBottom: 'solid 1px ' + theme.borderColor,
position: 'absolute',
width: '100%',
bottom: 8,
margin: 0,
MozBoxSizing: 'content-box',
boxSizing: 'content-box',
height: 0
},
underlineAfter: {
position: 'absolute',
width: '100%',
overflow: 'hidden',
userSelect: 'none',
cursor: 'default',
bottom: 8,
borderBottom: 'dotted 2px ' + theme.disabledTextColor
},
underlineFocus: {
borderBottom: 'solid 2px',
borderColor: theme.focusColor,
transform: 'scaleX(0)',
transition: Transitions.easeOut()
}
};
styles.error = this.mergeAndPrefix(styles.error, props.errorStyle);
styles.underline = this.mergeAndPrefix(styles.underline, props.underlineStyle);
styles.floatingLabel = this.mergeStyles(styles.hint, {
lineHeight: '22px',
top: 38,
bottom: 'none',
opacity: 1,
transform: 'scale(1) translate3d(0, 0, 0)',
transformOrigin: contextProps.isRtl ? 'right top' : 'left top'
});
styles.textarea = this.mergeStyles(styles.input, {
marginTop: props.floatingLabelText ? 36 : 12,
marginBottom: props.floatingLabelText ? -36 : -12,
boxSizing: 'border-box',
font: 'inherit'
});
styles.focusUnderline = this.mergeStyles(styles.underline, styles.underlineFocus, props.underlineFocusStyle);
if (this.state.isFocused) {
styles.floatingLabel.color = theme.focusColor;
styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(2px, -28px, 0)';
styles.focusUnderline.transform = 'scaleX(1)';
}
if (this.state.hasValue) {
styles.floatingLabel.color = ColorManipulator.fade(props.disabled ? theme.disabledTextColor : theme.floatingLabelColor, 0.5);
styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(2px, -28px, 0)';
styles.hint.opacity = 0;
}
if (props.floatingLabelText) {
styles.hint.opacity = 0;
styles.input.boxSizing = 'border-box';
if (this.state.isFocused && !this.state.hasValue) styles.hint.opacity = 1;
}
if (props.style && props.style.height) {
styles.hint.lineHeight = props.style.height;
}
if (this.state.errorText && this.state.isFocused) styles.floatingLabel.color = styles.error.color;
if (props.floatingLabelText && !props.multiLine) styles.input.paddingTop = 26;
if (this.state.errorText) {
styles.focusUnderline.borderColor = styles.error.color;
styles.focusUnderline.transform = 'scaleX(1)';
}
return styles;
},
render: function render() {
var _props = this.props;
var className = _props.className;
var errorStyle = _props.errorStyle;
var errorText = _props.errorText;
var floatingLabelText = _props.floatingLabelText;
var fullWidth = _props.fullWidth;
var hintText = _props.hintText;
var id = _props.id;
var multiLine = _props.multiLine;
var onBlur = _props.onBlur;
var onChange = _props.onChange;
var onFocus = _props.onFocus;
var type = _props.type;
var rows = _props.rows;
var other = _objectWithoutProperties(_props, ['className', 'errorStyle', 'errorText', 'floatingLabelText', 'fullWidth', 'hintText', 'id', 'multiLine', 'onBlur', 'onChange', 'onFocus', 'type', 'rows']);
var styles = this.getStyles();
var inputId = id || this._uniqueId;
var errorTextElement = this.state.errorText ? React.createElement(
'div',
{ style: styles.error },
this.state.errorText
) : null;
var hintTextElement = hintText ? React.createElement(
'div',
{ style: this.mergeAndPrefix(styles.hint) },
hintText
) : null;
var floatingLabelTextElement = floatingLabelText ? React.createElement(
'label',
{
style: this.mergeAndPrefix(styles.floatingLabel, this.props.floatingLabelStyle),
htmlFor: inputId },
floatingLabelText
) : null;
var inputProps = undefined;
var inputElement = undefined;
inputProps = {
id: inputId,
ref: this._getRef(),
style: this.mergeAndPrefix(styles.input, this.props.inputStyle),
onBlur: this._handleInputBlur,
onFocus: this._handleInputFocus,
disabled: this.props.disabled,
onKeyDown: this._handleInputKeyDown
};
if (!this.props.hasOwnProperty('valueLink')) {
inputProps.onChange = this._handleInputChange;
}
if (this.props.children) {
inputElement = React.cloneElement(this.props.children, _extends({}, inputProps, this.props.children.props));
} else {
inputElement = multiLine ? React.createElement(EnhancedTextarea, _extends({}, other, inputProps, {
rows: rows,
onHeightChange: this._handleTextAreaHeightChange,
textareaStyle: this.mergeAndPrefix(styles.textarea) })) : React.createElement('input', _extends({}, other, inputProps, {
type: type }));
}
var underlineElement = this.props.disabled ? React.createElement('div', { style: this.mergeAndPrefix(styles.underlineAfter) }) : React.createElement('hr', { style: this.mergeAndPrefix(styles.underline) });
var focusUnderlineElement = React.createElement('hr', { style: this.mergeAndPrefix(styles.focusUnderline) });
return React.createElement(
'div',
{ className: className, style: this.mergeAndPrefix(styles.root, this.props.style) },
floatingLabelTextElement,
hintTextElement,
inputElement,
underlineElement,
focusUnderlineElement,
errorTextElement
);
},
blur: function blur() {
if (this.isMounted()) this._getInputNode().blur();
},
clearValue: function clearValue() {
this.setValue('');
},
focus: function focus() {
if (this.isMounted()) this._getInputNode().focus();
},
getValue: function getValue() {
return this.isMounted() ? this._getInputNode().value : undefined;
},
setErrorText: function setErrorText(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 setValue(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()) {
if (this.props.multiLine) {
this.refs[this._getRef()].setValue(newValue);
} else {
this._getInputNode().value = newValue;
}
this.setState({ hasValue: isValid(newValue) });
}
},
_getRef: function _getRef() {
return this.props.ref ? this.props.ref : 'input';
},
_getInputNode: function _getInputNode() {
return this.props.children || this.props.multiLine ? this.refs[this._getRef()].getInputNode() : React.findDOMNode(this.refs[this._getRef()]);
},
_handleInputBlur: function _handleInputBlur(e) {
this.setState({ isFocused: false });
if (this.props.onBlur) this.props.onBlur(e);
},
_handleInputChange: function _handleInputChange(e) {
this.setState({ hasValue: isValid(e.target.value) });
if (this.props.onChange) this.props.onChange(e);
},
_handleInputFocus: function _handleInputFocus(e) {
if (this.props.disabled) return;
this.setState({ isFocused: true });
if (this.props.onFocus) this.props.onFocus(e);
},
_handleInputKeyDown: function _handleInputKeyDown(e) {
if (e.keyCode === 13 && this.props.onEnterKeyDown) this.props.onEnterKeyDown(e);
if (this.props.onKeyDown) this.props.onKeyDown(e);
},
_handleTextAreaHeightChange: function _handleTextAreaHeightChange(e, height) {
var newHeight = height + 24;
if (this.props.floatingLabelText) newHeight += 24;
React.findDOMNode(this).style.height = newHeight + 'px';
},
_isControlled: function _isControlled() {
return this.props.hasOwnProperty('value') || this.props.hasOwnProperty('valueLink');
}
});
module.exports = TextField;
}).call(this,require('_process'))
},{"./enhanced-textarea":30,"./mixins/style-propable":52,"./styles/transitions":75,"./utils/color-manipulator":124,"./utils/unique-id":137,"_process":138,"react":312}],102:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = require('react');
var ThemeManager = require('./styles/theme-manager');
var Theme = React.createClass({
displayName: 'Theme',
propTypes: {
theme: React.PropTypes.object
},
childContextTypes: {
muiTheme: React.PropTypes.object.isRequired,
muiThemeManager: React.PropTypes.object.isRequired
},
getChildContext: function getChildContext() {
return {
muiTheme: this.themeManager.getCurrentTheme(),
muiThemeManager: this.themeManager
};
},
componentWillMount: function componentWillMount() {
this.themeManager = new ThemeManager();
if (this.props.theme) {
this.themeManager.setTheme(this.props.theme);
}
},
render: function render() {
return this.props.children({
muiTheme: this.themeManager.getCurrentTheme(),
muiThemeManager: this.themeManager
});
}
});
function getDisplayName(Component) {
return Component.displayName || Component.name || 'Component';
}
function theme(customTheme) {
return function (Component) {
return React.createClass({
displayName: 'Theme(' + getDisplayName(Component) + ')',
render: function render() {
return React.createElement(
Theme,
{ theme: customTheme },
(function (props) {
return React.createElement(Component, _extends({}, this.props, props));
}).bind(this)
);
}
});
};
}
module.exports = Theme;
module.exports.theme = theme;
},{"./styles/theme-manager":72,"react":312}],103:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var EnhancedButton = require('../enhanced-button');
var Transitions = require('../styles/transitions');
var ClockButton = React.createClass({
displayName: 'ClockButton',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
position: React.PropTypes.oneOf(['left', 'right'])
},
getDefaultProps: function getDefaultProps() {
return {
position: "left"
};
},
_handleTouchTap: function _handleTouchTap() {
this.setState({
selected: true
});
this.props.onTouchTap();
},
getTheme: function getTheme() {
return this.context.muiTheme.component.timePicker;
},
render: function render() {
var _props = this.props;
var className = _props.className;
var other = _objectWithoutProperties(_props, ['className']);
var styles = {
root: {
position: "absolute",
bottom: 65,
pointerEvents: "auto",
height: 50,
width: 50,
borderRadius: "100%"
},
label: {
position: "absolute",
top: 17,
left: 14
},
select: {
position: 'absolute',
height: 50,
width: 50,
top: 0,
left: 0,
opacity: 0,
borderRadius: '50%',
transform: 'scale(0)',
transition: Transitions.easeOut(),
backgroundColor: this.getTheme().accentColor
}
};
if (this.props.selected) {
styles.label.color = this.getTheme().selectTextColor;
styles.select.opacity = 1;
styles.select.transform = 'scale(1)';
}
if (this.props.position === "right") {
styles.root.right = "5px";
} else {
styles.root.left = "5px";
}
return React.createElement(
EnhancedButton,
_extends({}, other, {
style: this.mergeAndPrefix(styles.root),
disableFocusRipple: true,
disableTouchRipple: true,
onTouchTap: this._handleTouchTap }),
React.createElement('span', { style: this.mergeAndPrefix(styles.select) }),
React.createElement(
'span',
{ style: this.mergeAndPrefix(styles.label) },
this.props.children
)
);
}
});
module.exports = ClockButton;
},{"../enhanced-button":28,"../mixins/style-propable":52,"../styles/transitions":75,"react":312}],104:[function(require,module,exports){
'use strict';
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var ClockNumber = require("./clock-number");
var ClockPointer = require("./clock-pointer");
function rad2deg(rad) {
return rad * 57.29577951308232;
}
function getTouchEventOffsetValues(e) {
var el = e.target;
var boundingRect = el.getBoundingClientRect();
var offset = {
offsetX: e.clientX - boundingRect.left,
offsetY: e.clientY - boundingRect.top
};
return offset;
}
var ClockHours = React.createClass({
displayName: 'ClockHours',
mixins: [StylePropable],
propTypes: {
initialHours: React.PropTypes.number,
onChange: React.PropTypes.func,
format: React.PropTypes.oneOf(['ampm', '24hr'])
},
center: { x: 0, y: 0 },
basePoint: { x: 0, y: 0 },
isMousePressed: function isMousePressed(e) {
if (typeof e.buttons === "undefined") {
return e.nativeEvent.which;
}
return e.buttons;
},
getDefaultProps: function getDefaultProps() {
return {
initialHours: new Date().getHours(),
onChange: function onChange() {},
format: 'ampm'
};
},
componentDidMount: function componentDidMount() {
var clockElement = React.findDOMNode(this.refs.mask);
this.center = {
x: clockElement.offsetWidth / 2,
y: clockElement.offsetHeight / 2
};
this.basePoint = {
x: this.center.x,
y: 0
};
},
handleUp: function handleUp(e) {
e.preventDefault();
this.setClock(e.nativeEvent, true);
},
handleMove: function handleMove(e) {
e.preventDefault();
if (this.isMousePressed(e) !== 1) return;
this.setClock(e.nativeEvent, false);
},
handleTouchMove: function handleTouchMove(e) {
e.preventDefault();
this.setClock(e.changedTouches[0], false);
},
handleTouchEnd: function handleTouchEnd(e) {
e.preventDefault();
this.setClock(e.changedTouches[0], true);
},
setClock: function setClock(e, finish) {
if (typeof e.offsetX === 'undefined') {
var offset = getTouchEventOffsetValues(e);
e.offsetX = offset.offsetX;
e.offsetY = offset.offsetY;
}
var hours = this.getHours(e.offsetX, e.offsetY);
this.props.onChange(hours, finish);
},
getHours: function getHours(offsetX, offsetY) {
var step = 30;
var x = offsetX - this.center.x;
var y = offsetY - this.center.y;
var cx = this.basePoint.x - this.center.x;
var cy = this.basePoint.y - this.center.y;
var atan = Math.atan2(cx, cy) - Math.atan2(x, y);
var deg = rad2deg(atan);
deg = Math.round(deg / step) * step;
deg %= 360;
var value = Math.floor(deg / step) || 0;
var delta = Math.pow(x, 2) + Math.pow(y, 2);
var distance = Math.sqrt(delta);
value = value || 12;
if (this.props.format === "24hr") {
if (distance < 90) {
value += 12;
value %= 24;
}
} else {
value %= 12;
}
return value;
},
_getSelected: function _getSelected() {
var hour = this.props.initialHours;
if (this.props.format === "ampm") {
hour %= 12;
hour = hour || 12;
}
return hour;
},
_getHourNumbers: function _getHourNumbers() {
var _this = this;
var style = {
pointerEvents: "none"
};
var hourSize = this.props.format === 'ampm' ? 12 : 24;
var hours = [];
for (var i = 1; i <= hourSize; i++) {
hours.push(i % 24);
}
return hours.map(function (hour) {
var isSelected = _this._getSelected() === hour;
return React.createElement(ClockNumber, { key: hour, style: style, isSelected: isSelected, type: 'hour',
value: hour });
});
},
render: function render() {
var styles = {
root: {
height: "100%",
width: "100%",
borderRadius: "100%",
position: "relative",
pointerEvents: "none",
boxSizing: "border-box"
},
hitMask: {
height: "100%",
width: "100%",
pointerEvents: "auto"
}
};
var hours = this._getSelected();
var numbers = this._getHourNumbers();
return React.createElement(
'div',
{ ref: 'clock', style: this.mergeAndPrefix(styles.root) },
React.createElement(ClockPointer, { hasSelected: true, value: hours, type: 'hour' }),
numbers,
React.createElement('div', { ref: 'mask', style: this.mergeAndPrefix(styles.hitMask), onTouchMove: this.handleTouchMove,
onTouchEnd: this.handleTouchEnd, onMouseUp: this.handleUp, onMouseMove: this.handleMove })
);
}
});
module.exports = ClockHours;
},{"../mixins/style-propable":52,"./clock-number":106,"./clock-pointer":107,"react":312}],105:[function(require,module,exports){
'use strict';
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var ClockNumber = require("./clock-number");
var ClockPointer = require("./clock-pointer");
function rad2deg(rad) {
return rad * 57.29577951308232;
}
function getTouchEventOffsetValues(e) {
var el = e.target;
var boundingRect = el.getBoundingClientRect();
var offset = {
offsetX: e.clientX - boundingRect.left,
offsetY: e.clientY - boundingRect.top
};
return offset;
}
var ClockMinutes = React.createClass({
displayName: 'ClockMinutes',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
initialMinutes: React.PropTypes.number,
onChange: React.PropTypes.func
},
center: { x: 0, y: 0 },
basePoint: { x: 0, y: 0 },
isMousePressed: function isMousePressed(e) {
if (typeof e.buttons === "undefined") {
return e.nativeEvent.which;
}
return e.buttons;
},
getDefaultProps: function getDefaultProps() {
return {
initialMinutes: new Date().getMinutes(),
onChange: function onChange() {}
};
},
componentDidMount: function componentDidMount() {
var clockElement = React.findDOMNode(this.refs.mask);
this.center = {
x: clockElement.offsetWidth / 2,
y: clockElement.offsetHeight / 2
};
this.basePoint = {
x: this.center.x,
y: 0
};
},
handleUp: function handleUp(e) {
e.preventDefault();
this.setClock(e.nativeEvent, true);
},
handleMove: function handleMove(e) {
e.preventDefault();
if (this.isMousePressed(e) !== 1) return;
this.setClock(e.nativeEvent, false);
},
handleTouch: function handleTouch(e) {
e.preventDefault();
this.setClock(e.changedTouches[0], false);
},
setClock: function setClock(e, finish) {
if (typeof e.offsetX === 'undefined') {
var offset = getTouchEventOffsetValues(e);
e.offsetX = offset.offsetX;
e.offsetY = offset.offsetY;
}
var minutes = this.getMinutes(e.offsetX, e.offsetY);
this.props.onChange(minutes, finish);
},
getMinutes: function getMinutes(offsetX, offsetY) {
var step = 6;
var x = offsetX - this.center.x;
var y = offsetY - this.center.y;
var cx = this.basePoint.x - this.center.x;
var cy = this.basePoint.y - this.center.y;
var atan = Math.atan2(cx, cy) - Math.atan2(x, y);
var deg = rad2deg(atan);
deg = Math.round(deg / step) * step;
deg %= 360;
var value = Math.floor(deg / step) || 0;
return value;
},
_getMinuteNumbers: function _getMinuteNumbers() {
var minutes = [];
for (var i = 0; i < 12; i++) {
minutes.push(i * 5);
}
var selectedMinutes = this.props.initialMinutes;
var hasSelected = false;
var numbers = minutes.map(function (minute) {
var isSelected = selectedMinutes === minute;
if (isSelected) hasSelected = true;
return React.createElement(ClockNumber, { key: minute, isSelected: isSelected, type: 'minute', value: minute });
});
return {
numbers: numbers,
hasSelected: hasSelected,
selected: selectedMinutes
};
},
render: function render() {
var styles = {
root: {
height: "100%",
width: "100%",
borderRadius: "100%",
position: "relative",
pointerEvents: "none",
boxSizing: "border-box"
},
hitMask: {
height: "100%",
width: "100%",
pointerEvents: "auto"
}
};
var minutes = this._getMinuteNumbers();
return React.createElement(
'div',
{ ref: 'clock', style: this.mergeAndPrefix(styles.root) },
React.createElement(ClockPointer, { value: minutes.selected, type: 'minute' }),
minutes.numbers,
React.createElement('div', { ref: 'mask', style: this.mergeAndPrefix(styles.hitMask), hasSelected: minutes.hasSelected,
onTouchMove: this.handleTouch, onTouchEnd: this.handleTouch,
onMouseUp: this.handleUp, onMouseMove: this.handleMove })
);
}
});
module.exports = ClockMinutes;
},{"../mixins/style-propable":52,"./clock-number":106,"./clock-pointer":107,"react":312}],106:[function(require,module,exports){
'use strict';
var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var ClockNumber = React.createClass({
displayName: 'ClockNumber',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
value: React.PropTypes.number,
type: React.PropTypes.oneOf(['hour', 'minute']),
onSelected: React.PropTypes.func,
isSelected: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
value: 0,
type: 'minute',
isSelected: false
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.timePicker;
},
render: function render() {
var pos = this.props.value;
var inner = false;
if (this.props.type === "hour") {
inner = pos < 1 || pos > 12;
pos %= 12;
} else {
pos = pos / 5;
}
var positions = [[0, 5], [54.5, 16.6], [94.4, 59.5], [109, 114], [94.4, 168.5], [54.5, 208.4], [0, 223], [-54.5, 208.4], [-94.4, 168.5], [-109, 114], [-94.4, 59.5], [-54.5, 19.6]];
var innerPositions = [[0, 40], [36.9, 49.9], [64, 77], [74, 114], [64, 151], [37, 178], [0, 188], [-37, 178], [-64, 151], [-74, 114], [-64, 77], [-37, 50]];
var styles = {
root: {
display: "inline-block",
position: "absolute",
width: 32,
height: 32,
borderRadius: "100%",
left: 'calc(50% - 16px)',
top: 10,
textAlign: "center",
paddingTop: 5,
userSelect: "none", /* Chrome all / Safari all */
fontSize: "1.1em",
pointerEvents: "none",
boxSizing: "border-box"
}
};
if (this.props.isSelected) {
styles.root.backgroundColor = this.getTheme().accentColor;
styles.root.color = this.getTheme().selectTextColor;
}
var transformPos = positions[pos];
if (inner) {
styles.root.width = "28px";
styles.root.height = "28px";
styles.root.left = 'calc(50% - 14px)';
transformPos = innerPositions[pos];
}
var _transformPos = transformPos;
var _transformPos2 = _slicedToArray(_transformPos, 2);
var x = _transformPos2[0];
var y = _transformPos2[1];
styles.root.transform = "translate(" + x + "px, " + y + "px)";
return React.createElement(
'span',
{ style: this.mergeAndPrefix(styles.root) },
this.props.value
);
}
});
module.exports = ClockNumber;
},{"../mixins/style-propable":52,"react":312}],107:[function(require,module,exports){
'use strict';
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var ClockPointer = React.createClass({
displayName: 'ClockPointer',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
value: React.PropTypes.number,
type: React.PropTypes.oneOf(['hour', 'minute'])
},
getInitialState: function getInitialState() {
return {
inner: this.isInner(this.props.value)
};
},
getDefaultProps: function getDefaultProps() {
return {
value: null,
type: 'minute',
hasSelected: false
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
this.setState({
inner: this.isInner(nextProps.value)
});
},
isInner: function isInner(value) {
if (this.props.type !== "hour") {
return false;
}
return value < 1 || value > 12;
},
getAngle: function getAngle() {
if (this.props.type === "hour") {
return this.calcAngle(this.props.value, 12);
}
return this.calcAngle(this.props.value, 60);
},
calcAngle: function calcAngle(value, base) {
value %= base;
var angle = 360 / base * value;
return angle;
},
getTheme: function getTheme() {
return this.context.muiTheme.component.timePicker;
},
render: function render() {
if (this.props.value === null) {
return React.createElement('span', null);
}
var angle = this.getAngle();
var styles = {
root: {
height: "30%",
background: this.getTheme().accentColor,
width: 2,
left: 'calc(50% - 1px)',
position: "absolute",
bottom: "50%",
transformOrigin: "bottom",
pointerEvents: "none",
transform: "rotateZ(" + angle + "deg)"
},
mark: {
background: this.getTheme().selectTextColor,
border: "4px solid " + this.getTheme().accentColor,
width: 7,
height: 7,
position: "absolute",
top: -5,
left: -6,
borderRadius: "100%"
}
};
if (!this.state.inner) {
styles.root.height = "40%";
}
if (this.props.hasSelected) {
styles.mark.display = "none";
}
return React.createElement(
'div',
{ style: this.mergeAndPrefix(styles.root) },
React.createElement('div', { style: styles.mark })
);
}
});
module.exports = ClockPointer;
},{"../mixins/style-propable":52,"react":312}],108:[function(require,module,exports){
'use strict';
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var TimeDisplay = require("./time-display");
var ClockButton = require("./clock-button");
var ClockHours = require("./clock-hours");
var ClockMinutes = require("./clock-minutes");
var Clock = React.createClass({
displayName: 'Clock',
mixins: [StylePropable],
propTypes: {
initialTime: React.PropTypes.object,
mode: React.PropTypes.oneOf(['hour', 'minute']),
format: React.PropTypes.oneOf(['ampm', '24hr']),
isActive: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
initialTime: new Date()
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
this.setState({
selectedTime: nextProps.initialTime
});
},
getInitialState: function getInitialState() {
return {
selectedTime: this.props.initialTime,
mode: 'hour'
};
},
_setMode: function _setMode(mode) {
var _this = this;
setTimeout(function () {
_this.setState({
mode: mode
});
}, 100);
},
_setAffix: function _setAffix(affix) {
if (affix === this._getAffix()) return;
var hours = this.state.selectedTime.getHours();
if (affix === "am") {
this.handleChangeHours(hours - 12, affix);
return;
}
this.handleChangeHours(hours + 12, affix);
},
_getAffix: function _getAffix() {
if (this.props.format !== "ampm") return "";
var hours = this.state.selectedTime.getHours();
if (hours < 12) {
return "am";
}
return "pm";
},
_getButtons: function _getButtons() {
var buttons = [];
var isAM = this._getIsAM();
if (this.props.format === 'ampm') {
buttons = [React.createElement(
ClockButton,
{ position: 'left', onTouchTap: this._setAffix.bind(this, "am"), selected: isAM },
"AM"
), React.createElement(
ClockButton,
{ position: 'right', onTouchTap: this._setAffix.bind(this, "pm"), selected: !isAM },
"PM"
)];
}
return buttons;
},
_getIsAM: function _getIsAM() {
return this._getAffix() === "am";
},
render: function render() {
var clock = null;
var buttons = this._getButtons();
var styles = {
root: {},
container: {
height: 280,
padding: 10
}
};
if (this.state.mode === "hour") {
clock = React.createElement(ClockHours, { key: 'hours',
format: this.props.format,
onChange: this.handleChangeHours,
initialHours: this.state.selectedTime.getHours() });
} else {
clock = React.createElement(ClockMinutes, { key: 'minutes',
onChange: this.handleChangeMinutes,
initialMinutes: this.state.selectedTime.getMinutes() });
}
return React.createElement(
'div',
{ style: styles.root },
React.createElement(TimeDisplay, {
selectedTime: this.state.selectedTime,
mode: this.state.mode,
format: this.props.format,
affix: this._getAffix(),
onSelectHour: this._setMode.bind(this, 'hour'),
onSelectMin: this._setMode.bind(this, 'minute') }),
React.createElement(
'div',
{ style: styles.container },
clock
),
buttons
);
},
handleChangeHours: function handleChangeHours(hours, finished) {
var _this2 = this;
var time = new Date(this.state.selectedTime);
var affix = undefined;
if (typeof finished === 'string') {
affix = finished;
finished = undefined;
}
if (!affix) {
affix = this._getAffix();
}
if (affix === 'pm' && hours < 12) {
hours += 12;
}
time.setHours(hours);
this.setState({
selectedTime: time
});
if (finished) {
setTimeout(function () {
_this2.setState({
mode: 'minute'
});
}, 100);
}
},
handleChangeMinutes: function handleChangeMinutes(minutes) {
var time = new Date(this.state.selectedTime);
time.setMinutes(minutes);
this.setState({
selectedTime: time
});
},
getSelectedTime: function getSelectedTime() {
return this.state.selectedTime;
}
});
module.exports = Clock;
},{"../mixins/style-propable":52,"./clock-button":103,"./clock-hours":104,"./clock-minutes":105,"./time-display":110,"react":312}],109:[function(require,module,exports){
'use strict';
module.exports = require('./time-picker');
},{"./time-picker":112}],110:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var TimeDisplay = React.createClass({
displayName: 'TimeDisplay',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
selectedTime: React.PropTypes.object.isRequired,
format: React.PropTypes.oneOf(['ampm', '24hr']),
mode: React.PropTypes.oneOf(['hour', 'minute']),
affix: React.PropTypes.oneOf(['', 'pm', 'am'])
},
getInitialState: function getInitialState() {
return {
transitionDirection: 'up'
};
},
getDefaultProps: function getDefaultProps() {
return {
mode: 'hour',
affix: ''
};
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
var direction = undefined;
if (nextProps.selectedTime !== this.props.selectedTime) {
direction = nextProps.selectedTime > this.props.selectedTime ? 'up' : 'down';
this.setState({
transitionDirection: direction
});
}
},
sanitizeTime: function sanitizeTime() {
var hour = this.props.selectedTime.getHours();
var min = this.props.selectedTime.getMinutes().toString();
if (this.props.format === "ampm") {
hour %= 12;
hour = hour || 12;
}
hour = hour.toString();
if (hour.length < 2) hour = "0" + hour;
if (min.length < 2) min = "0" + min;
return [hour, min];
},
getTheme: function getTheme() {
return this.context.muiTheme.component.timePicker;
},
render: function render() {
var _props = this.props;
var selectedTime = _props.selectedTime;
var mode = _props.mode;
var other = _objectWithoutProperties(_props, ['selectedTime', 'mode']);
var styles = {
root: {
textAlign: "center",
position: "relative",
width: 280,
height: "100%"
},
time: {
margin: "6px 0",
lineHeight: "58px",
height: 58,
fontSize: "58px"
},
box: {
padding: "16px 0",
backgroundColor: this.getTheme().color,
color: this.getTheme().textColor
},
hour: {},
minute: {}
};
var _sanitizeTime = this.sanitizeTime();
var _sanitizeTime2 = _slicedToArray(_sanitizeTime, 2);
var hour = _sanitizeTime2[0];
var min = _sanitizeTime2[1];
styles[mode].color = this.getTheme().accentColor;
return React.createElement(
'div',
_extends({}, other, { style: this.mergeAndPrefix(styles.root) }),
React.createElement(
'div',
{ style: this.mergeAndPrefix(styles.box) },
React.createElement(
'div',
{ style: this.mergeAndPrefix(styles.time) },
React.createElement(
'span',
{ style: this.mergeAndPrefix(styles.hour), onTouchTap: this.props.onSelectHour },
hour
),
React.createElement(
'span',
null,
':'
),
React.createElement(
'span',
{ style: this.mergeAndPrefix(styles.minute), onTouchTap: this.props.onSelectMin },
min
)
),
React.createElement(
'span',
{ key: "affix" },
this.props.affix.toUpperCase()
)
)
);
}
});
module.exports = TimeDisplay;
},{"../mixins/style-propable":52,"react":312}],111:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var WindowListenable = require('../mixins/window-listenable');
var KeyCode = require('../utils/key-code');
var Clock = require('./clock');
var Dialog = require('../dialog');
var FlatButton = require('../flat-button');
var TimePickerDialog = React.createClass({
displayName: 'TimePickerDialog',
mixins: [StylePropable, WindowListenable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
initialTime: React.PropTypes.object,
onAccept: React.PropTypes.func,
onShow: React.PropTypes.func,
onDismiss: React.PropTypes.func
},
windowListeners: {
keyup: '_handleWindowKeyUp'
},
getTheme: function getTheme() {
return this.context.muiTheme.component.timePicker;
},
render: function render() {
var _props = this.props;
var initialTime = _props.initialTime;
var onAccept = _props.onAccept;
var format = _props.format;
var other = _objectWithoutProperties(_props, ['initialTime', 'onAccept', 'format']);
var styles = {
root: {
fontSize: 14,
color: this.getTheme().clockColor
},
dialogContent: {
width: 280
},
body: {
padding: 0
}
};
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 })];
return React.createElement(
Dialog,
_extends({}, other, {
ref: 'dialogWindow',
style: this.mergeAndPrefix(styles.root),
bodyStyle: this.mergeAndPrefix(styles.body),
actions: actions,
contentStyle: styles.dialogContent,
onDismiss: this._handleDialogDismiss,
onShow: this._handleDialogShow,
repositionOnUpdate: false }),
React.createElement(Clock, {
ref: 'clock',
format: format,
initialTime: initialTime })
);
},
show: function show() {
this.refs.dialogWindow.show();
},
dismiss: function dismiss() {
this.refs.dialogWindow.dismiss();
},
_handleCancelTouchTap: function _handleCancelTouchTap() {
this.dismiss();
},
_handleOKTouchTap: function _handleOKTouchTap() {
this.dismiss();
if (this.props.onAccept) {
this.props.onAccept(this.refs.clock.getSelectedTime());
}
},
_handleDialogShow: function _handleDialogShow() {
if (this.props.onShow) {
this.props.onShow();
}
},
_handleDialogDismiss: function _handleDialogDismiss() {
if (this.props.onDismiss) {
this.props.onDismiss();
}
},
_handleWindowKeyUp: function _handleWindowKeyUp(e) {
if (this.refs.dialogWindow.isOpen()) {
switch (e.keyCode) {
case KeyCode.ENTER:
this._handleOKTouchTap();
break;
}
}
}
});
module.exports = TimePickerDialog;
},{"../dialog":25,"../flat-button":31,"../mixins/style-propable":52,"../mixins/window-listenable":54,"../utils/key-code":132,"./clock":108,"react":312}],112:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var WindowListenable = require('../mixins/window-listenable');
var TimePickerDialog = require('./time-picker-dialog');
var TextField = require('../text-field');
var emptyTime = new Date();
emptyTime.setHours(0);
emptyTime.setMinutes(0);
var TimePicker = React.createClass({
displayName: 'TimePicker',
mixins: [StylePropable, WindowListenable],
propTypes: {
defaultTime: React.PropTypes.object,
format: React.PropTypes.oneOf(['ampm', '24hr']),
pedantic: React.PropTypes.bool,
onFocus: React.PropTypes.func,
onTouchTap: React.PropTypes.func,
onChange: React.PropTypes.func,
onShow: React.PropTypes.func,
onDismiss: React.PropTypes.func
},
windowListeners: {
'keyup': '_handleWindowKeyUp'
},
getDefaultProps: function getDefaultProps() {
return {
defaultTime: null,
format: 'ampm',
pedantic: false
};
},
getInitialState: function getInitialState() {
return {
time: this.props.defaultTime || emptyTime,
dialogTime: new Date()
};
},
formatTime: function formatTime(date) {
var hours = date.getHours();
var mins = date.getMinutes().toString();
if (this.props.format === "ampm") {
var isAM = hours < 12;
hours = hours % 12;
var additional = isAM ? " am" : " pm";
hours = (hours || 12).toString();
if (mins.length < 2) mins = "0" + mins;
if (this.props.pedantic) {
// Treat midday/midnight specially http://www.nist.gov/pml/div688/times.cfm
if (hours === "12" && mins === "00") {
return additional === " pm" ? "12 noon" : "12 midnight";
}
}
return hours + (mins === "00" ? "" : ":" + mins) + additional;
}
hours = hours.toString();
if (hours.length < 2) hours = "0" + hours;
if (mins.length < 2) mins = "0" + mins;
return hours + ":" + mins;
},
render: function render() {
var _props = this.props;
var format = _props.format;
var onFocus = _props.onFocus;
var onTouchTap = _props.onTouchTap;
var onShow = _props.onShow;
var onDismiss = _props.onDismiss;
var other = _objectWithoutProperties(_props, ['format', 'onFocus', 'onTouchTap', 'onShow', 'onDismiss']);
var defaultInputValue = undefined;
if (this.props.defaultTime) {
defaultInputValue = this.formatTime(this.props.defaultTime);
}
return React.createElement(
'div',
null,
React.createElement(TextField, _extends({}, other, {
ref: 'input',
defaultValue: defaultInputValue,
onFocus: this._handleInputFocus,
onTouchTap: this._handleInputTouchTap })),
React.createElement(TimePickerDialog, {
ref: 'dialogWindow',
initialTime: this.state.dialogTime,
onAccept: this._handleDialogAccept,
onShow: onShow,
onDismiss: onDismiss,
format: format })
);
},
getTime: function getTime() {
return this.state.time;
},
setTime: function setTime(t) {
this.setState({
time: t
});
this.refs.input.setValue(this.formatTime(t));
},
_handleDialogAccept: function _handleDialogAccept(t) {
this.setTime(t);
if (this.props.onChange) this.props.onChange(null, t);
},
_handleInputFocus: function _handleInputFocus(e) {
e.target.blur();
if (this.props.onFocus) this.props.onFocus(e);
},
_handleInputTouchTap: function _handleInputTouchTap(e) {
e.preventDefault();
this.setState({
dialogTime: this.getTime()
});
this.refs.dialogWindow.show();
if (this.props.onTouchTap) this.props.onTouchTap(e);
}
});
module.exports = TimePicker;
},{"../mixins/style-propable":52,"../mixins/window-listenable":54,"../text-field":101,"./time-picker-dialog":111,"react":312}],113:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var Paper = require('./paper');
var EnhancedSwitch = require('./enhanced-switch');
var Toggle = React.createClass({
displayName: 'Toggle',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
elementStyle: React.PropTypes.object,
labelStyle: React.PropTypes.object,
onToggle: React.PropTypes.func,
toggled: React.PropTypes.bool,
defaultToggled: React.PropTypes.bool
},
getInitialState: function getInitialState() {
return {
switched: this.props.toggled || this.props.defaultToggled || this.props.valueLink && this.props.valueLink.value || false
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.toggle;
},
getStyles: function getStyles() {
var toggleSize = 20;
var toggleTrackWidth = 36;
var styles = {
icon: {
width: 36,
padding: '4px 0px 6px 2px'
},
toggleElement: {
width: toggleTrackWidth
},
track: {
transition: Transitions.easeOut(),
width: '100%',
height: 14,
borderRadius: 30,
backgroundColor: this.getTheme().trackOffColor
},
thumb: {
transition: Transitions.easeOut(),
position: 'absolute',
top: 1,
left: 0,
width: toggleSize,
height: toggleSize,
lineHeight: '24px',
borderRadius: '50%',
backgroundColor: this.getTheme().thumbOffColor
},
trackWhenSwitched: {
backgroundColor: this.getTheme().trackOnColor
},
thumbWhenSwitched: {
backgroundColor: this.getTheme().thumbOnColor,
left: '100%'
},
trackWhenDisabled: {
backgroundColor: this.getTheme().trackDisabledColor
},
thumbWhenDisabled: {
backgroundColor: this.getTheme().thumbDisabledColor
},
label: {
color: this.props.disabled ? this.getTheme().labelDisabledColor : this.getTheme().labelColor
}
};
return styles;
},
render: function render() {
var _props = this.props;
var onToggle = _props.onToggle;
var other = _objectWithoutProperties(_props, ['onToggle']);
var styles = this.getStyles();
var trackStyles = this.mergeAndPrefix(styles.track, this.props.trackStyle, this.state.switched && styles.trackWhenSwitched, this.props.disabled && styles.trackWhenDisabled);
var thumbStyles = this.mergeAndPrefix(styles.thumb, this.props.thumbStyle, this.state.switched && styles.thumbWhenSwitched, this.props.disabled && styles.thumbWhenDisabled);
if (this.state.switched) {
thumbStyles.marginLeft = '-' + thumbStyles.width;
}
var toggleElementStyles = this.mergeAndPrefix(styles.toggleElement, this.props.elementStyle);
var toggleElement = React.createElement(
'div',
{ style: toggleElementStyles },
React.createElement('div', { style: trackStyles }),
React.createElement(Paper, { style: thumbStyles, circle: true, zDepth: 1 })
);
var customRippleStyle = this.mergeAndPrefix({
top: -10,
left: -10
}, this.props.rippleStyle);
var rippleColor = this.state.switched ? this.getTheme().thumbOnColor : this.context.muiTheme.component.textColor;
var iconStyle = this.mergeAndPrefix(styles.icon, this.props.iconStyle);
var labelStyle = this.mergeAndPrefix(styles.label, this.props.labelStyle);
var enhancedSwitchProps = {
ref: "enhancedSwitch",
inputType: "checkbox",
switchElement: toggleElement,
rippleStyle: customRippleStyle,
rippleColor: rippleColor,
iconStyle: iconStyle,
trackStyle: trackStyles,
thumbStyle: thumbStyles,
labelStyle: labelStyle,
switched: this.state.switched,
onSwitch: this._handleToggle,
onParentShouldUpdate: this._handleStateChange,
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, _extends({}, other, enhancedSwitchProps));
},
isToggled: function isToggled() {
return this.refs.enhancedSwitch.isSwitched();
},
setToggled: function setToggled(newToggledValue) {
this.refs.enhancedSwitch.setSwitched(newToggledValue);
},
_handleToggle: function _handleToggle(e, isInputChecked) {
if (this.props.onToggle) this.props.onToggle(e, isInputChecked);
},
_handleStateChange: function _handleStateChange(newSwitched) {
this.setState({ switched: newSwitched });
}
});
module.exports = Toggle;
},{"./enhanced-switch":29,"./mixins/style-propable":52,"./paper":56,"./styles/transitions":75,"react":312}],114:[function(require,module,exports){
'use strict';
var React = require('react');
var Colors = require('../styles/colors');
var StylePropable = require('../mixins/style-propable');
var ToolbarGroup = React.createClass({
displayName: 'ToolbarGroup',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
className: React.PropTypes.string,
float: React.PropTypes.string
},
getDefaultProps: function getDefaultProps() {
return {
float: 'left'
};
},
getTheme: function getTheme() {
return this.context.muiTheme.component.toolbar;
},
getSpacing: function getSpacing() {
return this.context.muiTheme.spacing.desktopGutter;
},
getStyles: function getStyles() {
var marginHorizontal = this.getSpacing();
var marginVertical = (this.getTheme().height - this.context.muiTheme.component.button.height) / 2;
var styles = {
root: {
position: 'relative',
float: this.props.float
},
dropDownMenu: {
root: {
float: 'left',
color: Colors.lightBlack, // removes hover color change, we want to keep it
display: 'inline-block',
marginRight: this.getSpacing()
},
controlBg: {
backgroundColor: this.getTheme().menuHoverColor,
borderRadius: 0
},
underline: {
display: 'none'
}
},
button: {
float: 'left',
margin: marginVertical + 'px ' + marginHorizontal + 'px',
position: 'relative'
},
icon: {
root: {
float: 'left',
cursor: 'pointer',
color: this.getTheme().iconColor,
lineHeight: this.getTheme().height + 'px',
paddingLeft: this.getSpacing()
},
hover: {
color: Colors.darkBlack
}
},
span: {
float: 'left',
color: this.getTheme().iconColor,
lineHeight: this.getTheme().height + 'px'
}
};
return styles;
},
render: function render() {
var _this = this;
var styles = this.getStyles();
if (this.props.firstChild) styles.marginLeft = -24;
if (this.props.lastChild) styles.marginRight = -24;
var newChildren = React.Children.map(this.props.children, function (currentChild) {
if (!currentChild) {
return null;
}
switch (currentChild.type.displayName) {
case 'DropDownMenu':
return React.cloneElement(currentChild, {
style: _this.mergeStyles(styles.dropDownMenu.root, currentChild.props.style),
styleControlBg: styles.dropDownMenu.controlBg,
styleUnderline: styles.dropDownMenu.underline
});
case 'DropDownIcon':
return React.cloneElement(currentChild, {
style: _this.mergeStyles({ float: 'left' }, currentChild.props.style),
iconStyle: styles.icon.root,
onMouseEnter: _this._handleMouseEnterDropDownMenu,
onMouseLeave: _this._handleMouseLeaveDropDownMenu
});
case 'RaisedButton':case 'FlatButton':
return React.cloneElement(currentChild, {
style: _this.mergeStyles(styles.button, currentChild.props.style)
});
case 'FontIcon':
return React.cloneElement(currentChild, {
style: _this.mergeStyles(styles.icon.root, currentChild.props.style),
onMouseEnter: _this._handleMouseEnterFontIcon,
onMouseLeave: _this._handleMouseLeaveFontIcon
});
case 'ToolbarSeparator':case 'ToolbarTitle':
return React.cloneElement(currentChild, {
style: _this.mergeStyles(styles.span, currentChild.props.style)
});
default:
return currentChild;
}
}, this);
return React.createElement(
'div',
{ className: this.props.className, style: this.mergeAndPrefix(styles.root, this.props.style) },
newChildren
);
},
_handleMouseEnterDropDownMenu: function _handleMouseEnterDropDownMenu(e) {
e.target.style.zIndex = this.getStyles().icon.hover.zIndex;
e.target.style.color = this.getStyles().icon.hover.color;
},
_handleMouseLeaveDropDownMenu: function _handleMouseLeaveDropDownMenu(e) {
e.target.style.zIndex = 'auto';
e.target.style.color = this.getStyles().icon.root.color;
},
_handleMouseEnterFontIcon: function _handleMouseEnterFontIcon(e) {
e.target.style.zIndex = this.getStyles().icon.hover.zIndex;
e.target.style.color = this.getStyles().icon.hover.color;
},
_handleMouseLeaveFontIcon: function _handleMouseLeaveFontIcon(e) {
e.target.style.zIndex = 'auto';
e.target.style.color = this.getStyles().icon.root.color;
}
});
module.exports = ToolbarGroup;
},{"../mixins/style-propable":52,"../styles/colors":69,"react":312}],115:[function(require,module,exports){
'use strict';
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var ToolbarSeparator = React.createClass({
displayName: 'ToolbarSeparator',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
getTheme: function getTheme() {
return this.context.muiTheme.component.toolbar;
},
getSpacing: function getSpacing() {
return this.context.muiTheme.spacing;
},
render: function render() {
var styles = this.mergeAndPrefix({
backgroundColor: this.getTheme().separatorColor,
display: 'inline-block',
height: this.getSpacing().desktopGutterMore,
marginLeft: this.getSpacing().desktopGutter,
position: 'relative',
top: (this.getTheme().height - this.getSpacing().desktopGutterMore) / 2,
width: 1
}, this.props.style);
return React.createElement('span', { className: this.props.className, style: styles });
}
});
module.exports = ToolbarSeparator;
},{"../mixins/style-propable":52,"react":312}],116:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var ToolbarTitle = React.createClass({
displayName: 'ToolbarTitle',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
text: React.PropTypes.string
},
getTheme: function getTheme() {
return this.context.muiTheme.component.toolbar;
},
render: function render() {
var _props = this.props;
var style = _props.style;
var text = _props.text;
var other = _objectWithoutProperties(_props, ['style', 'text']);
var styles = this.mergeAndPrefix({
paddingRight: this.context.muiTheme.spacing.desktopGutterLess,
lineHeight: this.getTheme().height + 'px',
fontSize: this.getTheme().titleFontSize + 'px',
display: 'inline-block',
position: 'relative'
}, style);
return React.createElement(
'span',
_extends({ style: styles }, other),
text
);
}
});
module.exports = ToolbarTitle;
},{"../mixins/style-propable":52,"react":312}],117:[function(require,module,exports){
'use strict';
var React = require('react');
var StylePropable = require('../mixins/style-propable');
var Toolbar = React.createClass({
displayName: 'Toolbar',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
className: React.PropTypes.string,
style: React.PropTypes.object
},
getTheme: function getTheme() {
return this.context.muiTheme.component.toolbar;
},
getStyles: function getStyles() {
return this.mergeAndPrefix({
boxSizing: 'border-box',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
backgroundColor: this.getTheme().backgroundColor,
height: this.getTheme().height,
width: '100%',
padding: this.props.noGutter ? 0 : '0px ' + this.context.muiTheme.spacing.desktopGutter + 'px'
}, this.props.style);
},
render: function render() {
return React.createElement(
'div',
{ className: this.props.className, style: this.getStyles() },
this.props.children
);
}
});
module.exports = Toolbar;
},{"../mixins/style-propable":52,"react":312}],118:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/transitions');
var Colors = require('./styles/colors');
var Tooltip = React.createClass({
displayName: 'Tooltip',
mixins: [StylePropable],
contextTypes: {
muiTheme: React.PropTypes.object
},
propTypes: {
className: React.PropTypes.string,
label: React.PropTypes.string.isRequired,
show: React.PropTypes.bool,
touch: React.PropTypes.bool,
verticalPosition: React.PropTypes.oneOf(['top', 'bottom']),
horizontalPosition: React.PropTypes.oneOf(['left', 'right', 'center'])
},
componentDidMount: function componentDidMount() {
this._setRippleSize();
this._setTooltipPosition();
},
componentWillReceiveProps: function componentWillReceiveProps() {
this._setTooltipPosition();
},
componentDidUpdate: function componentDidUpdate() {
this._setRippleSize();
},
getInitialState: function getInitialState() {
return {
offsetWidth: null
};
},
getStyles: function getStyles() {
var verticalPosition = this.props.verticalPosition;
var horizontalPosition = this.props.horizontalPosition;
var touchMarginOffset = this.props.touch ? 10 : 0;
var touchOffsetTop = this.props.touch ? -20 : -10;
var offset = verticalPosition === 'bottom' ? 14 + touchMarginOffset : -14 - touchMarginOffset;
var styles = {
root: {
position: 'absolute',
fontFamily: this.context.muiTheme.contentFontFamily,
fontSize: '10px',
lineHeight: '22px',
padding: '0 8px',
color: Colors.white,
overflow: 'hidden',
top: -10000,
borderRadius: 2,
userSelect: 'none',
opacity: 0,
right: horizontalPosition === 'left' ? 12 : null,
left: horizontalPosition === 'center' ? (this.state.offsetWidth - 48) / 2 * -1 : null,
transition: Transitions.easeOut('0ms', 'top', '450ms') + ',' + Transitions.easeOut('450ms', 'transform', '0ms') + ',' + Transitions.easeOut('450ms', 'opacity', '0ms')
},
label: {
position: 'relative',
whiteSpace: 'nowrap'
},
ripple: {
position: 'absolute',
left: horizontalPosition === 'center' ? '50%' : horizontalPosition === 'left' ? '100%' : '0%',
top: verticalPosition === 'bottom' ? 0 : '100%',
transform: 'translate(-50%, -50%)',
borderRadius: '50%',
backgroundColor: 'transparent',
transition: Transitions.easeOut('0ms', 'width', '450ms') + ',' + Transitions.easeOut('0ms', 'height', '450ms') + ',' + Transitions.easeOut('450ms', 'backgroundColor', '0ms')
},
rootWhenShown: {
top: verticalPosition === 'top' ? touchOffsetTop : 36,
opacity: 0.9,
transform: 'translate3d(0px, ' + offset + 'px, 0px)',
transition: Transitions.easeOut('0ms', 'top', '0ms') + ',' + Transitions.easeOut('450ms', 'transform', '0ms') + ',' + Transitions.easeOut('450ms', 'opacity', '0ms')
},
rootWhenTouched: {
fontSize: '14px',
lineHeight: '32px',
padding: '0 16px'
},
rippleWhenShown: {
backgroundColor: Colors.grey700,
transition: Transitions.easeOut('450ms', 'width', '0ms') + ',' + Transitions.easeOut('450ms', 'height', '0ms') + ',' + Transitions.easeOut('450ms', 'backgroundColor', '0ms')
}
};
return styles;
},
render: function render() {
var _props = this.props;
var label = _props.label;
var other = _objectWithoutProperties(_props, ['label']);
var styles = this.getStyles();
return React.createElement(
'div',
_extends({}, other, {
style: this.mergeAndPrefix(styles.root, this.props.show && styles.rootWhenShown, this.props.touch && styles.rootWhenTouched, this.props.style) }),
React.createElement('div', {
ref: 'ripple',
style: this.mergeAndPrefix(styles.ripple, this.props.show && styles.rippleWhenShown) }),
React.createElement(
'span',
{ style: this.mergeAndPrefix(styles.label) },
this.props.label
)
);
},
_setRippleSize: function _setRippleSize() {
var ripple = React.findDOMNode(this.refs.ripple);
var tooltip = window.getComputedStyle(React.findDOMNode(this));
var tooltipWidth = parseInt(tooltip.getPropertyValue("width"), 10) / (this.props.horizontalPosition === 'center' ? 2 : 1);
var tooltipHeight = parseInt(tooltip.getPropertyValue("height"), 10);
var rippleDiameter = Math.ceil(Math.sqrt(Math.pow(tooltipHeight, 2) + Math.pow(tooltipWidth, 2)) * 2);
if (this.props.show) {
ripple.style.height = rippleDiameter + 'px';
ripple.style.width = rippleDiameter + 'px';
} else {
ripple.style.width = '0px';
ripple.style.height = '0px';
}
},
_setTooltipPosition: function _setTooltipPosition() {
var tooltip = React.findDOMNode(this);
this.setState({ offsetWidth: tooltip.offsetWidth });
}
});
module.exports = Tooltip;
},{"./mixins/style-propable":52,"./styles/colors":69,"./styles/transitions":75,"react":312}],119:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var StylePropable = require('../mixins/style-propable');
var AutoPrefix = require('../styles/auto-prefix');
var Transitions = require('../styles/transitions');
var ScaleInChild = React.createClass({
displayName: 'ScaleInChild',
mixins: [PureRenderMixin, StylePropable],
propTypes: {
enterDelay: React.PropTypes.number,
maxScale: React.PropTypes.number,
minScale: React.PropTypes.number
},
getDefaultProps: function getDefaultProps() {
return {
enterDelay: 0,
maxScale: 1,
minScale: 0
};
},
componentWillAppear: function componentWillAppear(callback) {
this._initializeAnimation(callback);
},
componentWillEnter: function componentWillEnter(callback) {
this._initializeAnimation(callback);
},
componentDidAppear: function componentDidAppear() {
this._animate();
},
componentDidEnter: function componentDidEnter() {
this._animate();
},
componentWillLeave: function componentWillLeave(callback) {
var _this = this;
var style = React.findDOMNode(this).style;
style.opacity = '0';
AutoPrefix.set(style, 'transform', 'scale(' + this.props.minScale + ')');
setTimeout((function () {
if (_this.isMounted()) callback();
}).bind(this), 450);
},
render: function render() {
var _props = this.props;
var children = _props.children;
var enterDelay = _props.enterDelay;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['children', 'enterDelay', 'style']);
var mergedRootStyles = this.mergeAndPrefix({
position: 'absolute',
height: '100%',
width: '100%',
top: 0,
left: 0,
transition: Transitions.easeOut(null, ['transform', 'opacity'])
}, style);
return React.createElement(
'div',
_extends({}, other, { style: mergedRootStyles }),
children
);
},
_animate: function _animate() {
var style = React.findDOMNode(this).style;
style.opacity = '1';
AutoPrefix.set(style, 'transform', 'scale(' + this.props.maxScale + ')');
},
_initializeAnimation: function _initializeAnimation(callback) {
var _this2 = this;
var style = React.findDOMNode(this).style;
style.opacity = '0';
AutoPrefix.set(style, 'transform', 'scale(0)');
setTimeout((function () {
if (_this2.isMounted()) callback();
}).bind(this), this.props.enterDelay);
}
});
module.exports = ScaleInChild;
},{"../mixins/style-propable":52,"../styles/auto-prefix":68,"../styles/transitions":75,"react/addons":140}],120:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var ReactTransitionGroup = React.addons.TransitionGroup;
var StylePropable = require('../mixins/style-propable');
var ScaleInChild = require('./scale-in-child');
var ScaleIn = React.createClass({
displayName: 'ScaleIn',
mixins: [PureRenderMixin, StylePropable],
propTypes: {
childStyle: React.PropTypes.object,
enterDelay: React.PropTypes.number,
maxScale: React.PropTypes.number,
minScale: React.PropTypes.number
},
getDefaultProps: function getDefaultProps() {
return {
enterDelay: 0
};
},
render: function render() {
var _props = this.props;
var children = _props.children;
var childStyle = _props.childStyle;
var enterDelay = _props.enterDelay;
var maxScale = _props.maxScale;
var minScale = _props.minScale;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['children', 'childStyle', 'enterDelay', 'maxScale', 'minScale', 'style']);
var mergedRootStyles = this.mergeAndPrefix({
position: 'relative',
overflow: 'hidden',
height: '100%'
}, style);
var newChildren = React.Children.map(children, function (child) {
return React.createElement(
ScaleInChild,
{
key: child.key,
enterDelay: enterDelay,
maxScale: maxScale,
minScale: minScale,
style: childStyle },
child
);
});
return React.createElement(
ReactTransitionGroup,
_extends({}, other, {
style: mergedRootStyles,
component: 'div' }),
newChildren
);
}
});
module.exports = ScaleIn;
},{"../mixins/style-propable":52,"./scale-in-child":119,"react/addons":140}],121:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var StylePropable = require('../mixins/style-propable');
var AutoPrefix = require('../styles/auto-prefix');
var Transitions = require('../styles/transitions');
var SlideInChild = React.createClass({
displayName: 'SlideInChild',
mixins: [StylePropable],
propTypes: {
enterDelay: React.PropTypes.number,
//This callback is needed bacause
//the direction could change when leaving the dom
getLeaveDirection: React.PropTypes.func.isRequired
},
getDefaultProps: function getDefaultProps() {
return {
enterDelay: 0
};
},
componentWillEnter: function componentWillEnter(callback) {
var _this = this;
var style = React.findDOMNode(this).style;
var x = this.props.direction === 'left' ? '100%' : this.props.direction === 'right' ? '-100%' : '0';
var y = this.props.direction === 'up' ? '100%' : this.props.direction === 'down' ? '-100%' : '0';
style.opacity = '0';
AutoPrefix.set(style, 'transform', 'translate3d(' + x + ',' + y + ',0)');
setTimeout((function () {
if (_this.isMounted()) callback();
}).bind(this), this.props.enterDelay);
},
componentDidEnter: function componentDidEnter() {
var style = React.findDOMNode(this).style;
style.opacity = '1';
AutoPrefix.set(style, 'transform', 'translate3d(0,0,0)');
},
componentWillLeave: function componentWillLeave(callback) {
var _this2 = this;
var style = React.findDOMNode(this).style;
var direction = this.props.getLeaveDirection();
var x = direction === 'left' ? '-100%' : direction === 'right' ? '100%' : '0';
var y = direction === 'up' ? '-100%' : direction === 'down' ? '100%' : '0';
style.opacity = '0';
AutoPrefix.set(style, 'transform', 'translate3d(' + x + ',' + y + ',0)');
setTimeout((function () {
if (_this2.isMounted()) callback();
}).bind(this), 450);
},
render: function render() {
var _props = this.props;
var children = _props.children;
var enterDelay = _props.enterDelay;
var getLeaveDirection = _props.getLeaveDirection;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['children', 'enterDelay', 'getLeaveDirection', 'style']);
var mergedRootStyles = this.mergeAndPrefix({
position: 'absolute',
height: '100%',
width: '100%',
top: 0,
left: 0,
transition: Transitions.easeOut(null, ['transform', 'opacity'])
}, style);
return React.createElement(
'div',
_extends({}, other, { style: mergedRootStyles }),
children
);
}
});
module.exports = SlideInChild;
},{"../mixins/style-propable":52,"../styles/auto-prefix":68,"../styles/transitions":75,"react/addons":140}],122:[function(require,module,exports){
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var React = require('react/addons');
var ReactTransitionGroup = React.addons.TransitionGroup;
var StylePropable = require('../mixins/style-propable');
var SlideInChild = require('./slide-in-child');
var SlideIn = React.createClass({
displayName: 'SlideIn',
mixins: [StylePropable],
propTypes: {
enterDelay: React.PropTypes.number,
childStyle: React.PropTypes.object,
direction: React.PropTypes.oneOf(['left', 'right', 'up', 'down'])
},
getDefaultProps: function getDefaultProps() {
return {
enterDelay: 0,
direction: 'left'
};
},
render: function render() {
var _this = this;
var _props = this.props;
var enterDelay = _props.enterDelay;
var children = _props.children;
var childStyle = _props.childStyle;
var direction = _props.direction;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['enterDelay', 'children', 'childStyle', 'direction', 'style']);
var mergedRootStyles = this.mergeAndPrefix({
position: 'relative',
overflow: 'hidden',
height: '100%'
}, style);
var newChildren = React.Children.map(children, function (child) {
return React.createElement(
SlideInChild,
{
key: child.key,
direction: direction,
enterDelay: enterDelay,
getLeaveDirection: _this._getLeaveDirection,
style: childStyle },
child
);
}, this);
return React.createElement(
ReactTransitionGroup,
_extends({}, other, {
style: mergedRootStyles,
component: 'div' }),
newChildren
);
},
_getLeaveDirection: function _getLeaveDirection() {
return this.props.direction;
}
});
module.exports = SlideIn;
},{"../mixins/style-propable":52,"./slide-in-child":121,"react/addons":140}],123:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var createFragment = React.addons.createFragment;
module.exports = {
create: function create(fragments) {
var newFragments = {};
var validChildrenCount = 0;
var firstKey = undefined;
//Only create non-empty key fragments
for (var key in fragments) {
var currentChild = fragments[key];
if (currentChild) {
if (validChildrenCount === 0) firstKey = key;
newFragments[key] = currentChild;
validChildrenCount++;
}
}
if (validChildrenCount === 0) return undefined;
if (validChildrenCount === 1) return newFragments[firstKey];
return createFragment(newFragments);
},
extend: function extend(children, extendedProps, extendedChildren) {
return React.isValidElement(children) ? React.Children.map(children, function (child) {
var newProps = typeof extendedProps === 'function' ? extendedProps(child) : extendedProps;
var newChildren = typeof extendedChildren === 'function' ? extendedChildren(child) : extendedChildren ? extendedChildren : child.props.children;
return React.cloneElement(child, newProps, newChildren);
}) : children;
}
};
},{"react/addons":140}],124:[function(require,module,exports){
'use strict';
module.exports = {
/**
* The relative brightness of any point in a colorspace, normalized to 0 for
* darkest black and 1 for lightest white. RGB colors only. Does not take
* into account alpha values.
*
* TODO:
* - Take into account alpha values.
* - Identify why there are minor discrepancies for some use cases
* (i.e. #F0F & #FFF). Note that these cases rarely occur.
*
* Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
*/
_luminance: function _luminance(color) {
color = this._decomposeColor(color);
if (color.type.indexOf('rgb') > -1) {
var rgb = color.values.map(function (val) {
val /= 255; // normalized
return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
});
return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
} else {
var message = 'Calculating the relative luminance is not available for ' + 'HSL and HSLA.';
console.error(message);
return -1;
}
},
/**
* @params:
* additionalValue = An extra value that has been calculated but not included
* with the original color object, such as an alpha value.
*/
_convertColorToString: function _convertColorToString(color, additonalValue) {
var str = color.type + '(' + parseInt(color.values[0]) + ',' + parseInt(color.values[1]) + ',' + parseInt(color.values[2]);
if (additonalValue !== undefined) {
str += ',' + additonalValue + ')';
} else if (color.values.length === 4) {
str += ',' + color.values[3] + ')';
} else {
str += ')';
}
return str;
},
// Converts a color from hex format to rgb format.
_convertHexToRGB: function _convertHexToRGB(color) {
if (color.length === 4) {
var extendedColor = '#';
for (var i = 1; i < color.length; i++) {
extendedColor += color.charAt(i) + color.charAt(i);
}
color = extendedColor;
}
var values = {
r: parseInt(color.substr(1, 2), 16),
g: parseInt(color.substr(3, 2), 16),
b: parseInt(color.substr(5, 2), 16)
};
return 'rgb(' + values.r + ',' + values.g + ',' + values.b + ')';
},
// Returns the type and values of a color of any given type.
_decomposeColor: function _decomposeColor(color) {
if (color.charAt(0) === '#') {
return this._decomposeColor(this._convertHexToRGB(color));
}
var marker = color.indexOf('(');
var type = color.substring(0, marker);
var values = color.substring(marker + 1, color.length - 1).split(',');
return { type: type, values: values };
},
// Set the absolute transparency of a color.
// Any existing alpha values are overwritten.
fade: function fade(color, amount) {
color = this._decomposeColor(color);
if (color.type === 'rgb' || color.type === 'hsl') color.type += 'a';
return this._convertColorToString(color, amount);
},
// Desaturates rgb and sets opacity to 0.15
lighten: function lighten(color, amount) {
color = this._decomposeColor(color);
if (color.type.indexOf('hsl') > -1) {
color.values[2] += amount;
return this._decomposeColor(this._convertColorToString(color));
} else if (color.type.indexOf('rgb') > -1) {
for (var i = 0; i < 3; i++) {
color.values[i] *= 1 + amount;
if (color.values[i] > 255) color.values[i] = 255;
}
}
if (color.type.indexOf('a') <= -1) color.type += 'a';
return this._convertColorToString(color, '0.15');
},
darken: function darken(color, amount) {
color = this._decomposeColor(color);
if (color.type.indexOf('hsl') > -1) {
color.values[2] += amount;
return this._decomposeColor(this._convertColorToString(color));
} else if (color.type.indexOf('rgb') > -1) {
for (var i = 0; i < 3; i++) {
color.values[i] *= 1 - amount;
if (color.values[i] < 0) color.values[i] = 0;
}
}
return this._convertColorToString(color);
},
// Calculates the contrast ratio between two colors.
//
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
contrastRatio: function contrastRatio(background, foreground) {
var lumA = this._luminance(background);
var lumB = this._luminance(foreground);
if (lumA >= lumB) {
return ((lumA + 0.05) / (lumB + 0.05)).toFixed(2);
} else {
return ((lumB + 0.05) / (lumA + 0.05)).toFixed(2);
}
},
/**
* Determines how readable a color combination is based on its level.
* Levels are defined from @LeaVerou:
* https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/contrast-ratio.js
*/
contrastRatioLevel: function contrastRatioLevel(background, foreground) {
var levels = {
'fail': {
range: [0, 3],
color: 'hsl(0, 100%, 40%)'
},
'aa-large': {
range: [3, 4.5],
color: 'hsl(40, 100%, 45%)'
},
'aa': {
range: [4.5, 7],
color: 'hsl(80, 60%, 45%)'
},
'aaa': {
range: [7, 22],
color: 'hsl(95, 60%, 41%)'
}
};
var ratio = this.contrastRatio(background, foreground);
for (var level in levels) {
var range = levels[level].range;
if (ratio >= range[0] && ratio <= range[1]) return level;
}
}
};
},{}],125:[function(require,module,exports){
'use strict';
var Events = require('./events');
module.exports = {
_testSupportedProps: function _testSupportedProps(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 transitionEndEventName() {
return this._testSupportedProps({
'transition': 'transitionend',
'OTransition': 'otransitionend',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
});
},
animationEndEventName: function animationEndEventName() {
return this._testSupportedProps({
'animation': 'animationend',
'-o-animation': 'oAnimationEnd',
'-moz-animation': 'animationend',
'-webkit-animation': 'webkitAnimationEnd'
});
},
onTransitionEnd: function onTransitionEnd(el, callback) {
var transitionEnd = this.transitionEndEventName();
Events.once(el, transitionEnd, function () {
return callback();
});
},
onAnimationEnd: function onAnimationEnd(el, callback) {
var animationEnd = this.animationEndEventName();
Events.once(el, animationEnd, function () {
return callback();
});
}
};
},{"./events":128}],126:[function(require,module,exports){
'use strict';
module.exports = {
addDays: function addDays(d, days) {
var newDate = this.clone(d);
newDate.setDate(d.getDate() + days);
return newDate;
},
addMonths: function addMonths(d, months) {
var newDate = this.clone(d);
newDate.setMonth(d.getMonth() + months);
return newDate;
},
addYears: function addYears(d, years) {
var newDate = this.clone(d);
newDate.setFullYear(d.getFullYear() + years);
return newDate;
},
clone: function clone(d) {
return new Date(d.getTime());
},
cloneAsDate: function cloneAsDate(d) {
var clonedDate = this.clone(d);
clonedDate.setHours(0, 0, 0, 0);
return clonedDate;
},
getDaysInMonth: function getDaysInMonth(d) {
var resultDate = this.getFirstDayOfMonth(d);
resultDate.setMonth(resultDate.getMonth() + 1);
resultDate.setDate(resultDate.getDate() - 1);
return resultDate.getDate();
},
getFirstDayOfMonth: function getFirstDayOfMonth(d) {
return new Date(d.getFullYear(), d.getMonth(), 1);
},
getFullMonth: function getFullMonth(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 getShortMonth(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 getDayOfWeek(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 getWeekArray(d) {
var dayArray = [];
var daysInMonth = this.getDaysInMonth(d);
var daysInWeek = undefined;
var emptyDays = undefined;
var firstDayOfWeek = undefined;
var week = undefined;
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 format(date) {
var m = date.getMonth() + 1;
var d = date.getDate();
var y = date.getFullYear();
return m + '/' + d + '/' + y;
},
isEqualDate: function isEqualDate(d1, d2) {
return d1 && d2 && d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
},
isBeforeDate: function isBeforeDate(d1, d2) {
var date1 = this.cloneAsDate(d1);
var date2 = this.cloneAsDate(d2);
return date1.getTime() < date2.getTime();
},
isAfterDate: function isAfterDate(d1, d2) {
var date1 = this.cloneAsDate(d1);
var date2 = this.cloneAsDate(d2);
return date1.getTime() > date2.getTime();
},
isBetweenDates: function isBetweenDates(dateToCheck, startDate, endDate) {
return !this.isBeforeDate(dateToCheck, startDate) && !this.isAfterDate(dateToCheck, endDate);
},
isDateObject: function isDateObject(d) {
return d instanceof Date;
},
monthDiff: function monthDiff(d1, d2) {
var m = undefined;
m = (d1.getFullYear() - d2.getFullYear()) * 12;
m += d1.getMonth();
m -= d2.getMonth();
return m;
},
yearDiff: function yearDiff(d1, d2) {
return ~ ~(this.monthDiff(d1, d2) / 12);
}
};
},{}],127:[function(require,module,exports){
'use strict';
module.exports = {
isDescendant: function isDescendant(parent, child) {
var node = child.parentNode;
while (node !== null) {
if (node === parent) return true;
node = node.parentNode;
}
return false;
},
offset: function offset(el) {
var rect = el.getBoundingClientRect();
return {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
};
},
getStyleAttributeAsNumber: function getStyleAttributeAsNumber(el, attr) {
var attrStyle = el.style[attr];
var attrNum = 0;
if (attrStyle && attrStyle.length) {
attrNum = parseInt(attrStyle);
}
return attrNum;
},
addClass: function addClass(el, className) {
if (el.classList) el.classList.add(className);else el.className += ' ' + className;
},
removeClass: function removeClass(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 hasClass(el, className) {
if (el.classList) return el.classList.contains(className);else return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
},
toggleClass: function toggleClass(el, className) {
if (this.hasClass(el, className)) this.removeClass(el, className);else this.addClass(el, className);
},
forceRedraw: function forceRedraw(el) {
var originalDisplay = el.style.display;
el.style.display = 'none';
el.style.display = originalDisplay;
},
withoutTransition: function withoutTransition(el, callback) {
var originalTransition = el.style.transition;
//turn off transition
el.style.transition = null;
callback();
//force a redraw
this.forceRedraw(el);
//put the transition back
el.style.transition = originalTransition;
}
};
},{}],128:[function(require,module,exports){
'use strict';
module.exports = {
once: function once(el, type, callback) {
var typeArray = type.split(' ');
var recursiveFunction = function recursiveFunction(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);
}
},
on: function on(el, type, callback) {
if (el.addEventListener) {
el.addEventListener(type, callback);
} else {
// IE8+ Support
el.attachEvent('on' + type, function () {
callback.call(el);
});
}
},
off: function off(el, type, callback) {
if (el.removeEventListener) {
el.removeEventListener(type, callback);
} else {
// IE8+ Support
el.detachEvent('on' + type, callback);
}
},
isKeyboard: function isKeyboard(e) {
return ['keydown', 'keypress', 'keyup'].indexOf(e.type) !== -1;
}
};
},{}],129:[function(require,module,exports){
'use strict';
function isObject(obj) {
return typeof obj === 'object' && obj !== null;
}
/**
* A recursive merge between two objects.
*
* @param base - the object whose properties are to be overwritten. It
* should be either the root level or some nested level.
* @param override - an object containing properties to be overwritten. It
* should have the same structure as the object object.
*/
var extend = function extend(base, override) {
var mergedObject = {};
//Loop through each key in the base object
Object.keys(base).forEach(function (key) {
var baseProp = base[key];
var overrideProp = undefined;
if (isObject(override)) overrideProp = override[key];
//Recursive call extend if the prop is another object, else just copy it over
mergedObject[key] = isObject(baseProp) && !Array.isArray(baseProp) ? extend(baseProp, overrideProp) : baseProp;
});
//Loop through each override key and override the props in the
//base object
if (isObject(override)) {
Object.keys(override).forEach(function (overrideKey) {
var overrideProp = override[overrideKey];
//Only copy over props that are not objects
if (!isObject(overrideProp) || Array.isArray(overrideProp)) {
mergedObject[overrideKey] = overrideProp;
}
});
}
return mergedObject;
};
module.exports = extend;
},{}],130:[function(require,module,exports){
'use strict';
var React = require('react/addons');
var update = React.addons.update;
function mergeSingle(objA, objB) {
if (!objA) return objB;
if (!objB) return objA;
return update(objA, { $merge: objB });
}
module.exports = {
merge: function merge() {
var args = Array.prototype.slice.call(arguments, 0);
var base = args[0];
for (var i = 1; i < args.length; i++) {
if (args[i]) {
base = mergeSingle(base, args[i]);
}
}
return base;
},
mergeItem: function mergeItem(obj, key, newValueObject) {
var command = {};
command[key] = { $merge: newValueObject };
return update(obj, command);
},
push: function push(array, obj) {
var newObj = Array.isArray(obj) ? obj : [obj];
return update(array, { $push: newObj });
},
shift: function shift(array) {
return update(array, { $splice: [[0, 1]] });
}
};
},{"react/addons":140}],131:[function(require,module,exports){
'use strict';
module.exports = {
ColorManipulator: require('./color-manipulator'),
CssEvent: require('./css-event'),
Dom: require('./dom'),
Events: require('./events'),
Extend: require('./extend'),
ImmutabilityHelper: require('./immutability-helper'),
KeyCode: require('./key-code'),
KeyLine: require('./key-line'),
UniqueId: require('./unique-id'),
Styles: require('./styles')
};
},{"./color-manipulator":124,"./css-event":125,"./dom":127,"./events":128,"./extend":129,"./immutability-helper":130,"./key-code":132,"./key-line":133,"./styles":136,"./unique-id":137}],132:[function(require,module,exports){
"use strict";
module.exports = {
DOWN: 40,
ESC: 27,
ENTER: 13,
LEFT: 37,
RIGHT: 39,
SPACE: 32,
TAB: 9,
UP: 38
};
},{}],133:[function(require,module,exports){
"use strict";
module.exports = {
Desktop: {
GUTTER: 24,
GUTTER_LESS: 16,
INCREMENT: 64,
MENU_ITEM_HEIGHT: 32
},
getIncrementalDim: function getIncrementalDim(dim) {
return Math.ceil(dim / this.Desktop.INCREMENT) * this.Desktop.INCREMENT;
}
};
},{}],134:[function(require,module,exports){
/* Modernizr 2.8.3 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-borderradius-boxshadow-opacity-csstransforms-csstransforms3d-csstransitions-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes
*/
'use strict';
module.exports = (function (window, document, undefined) {
var version = '2.8.3',
Modernizr = {},
docElement = document.documentElement,
mod = 'modernizr',
modElem = document.createElement(mod),
mStyle = modElem.style,
prefixes = ' -webkit- -moz- -o- -ms- '.split(' '),
omPrefixes = 'Webkit Moz O ms',
cssomPrefixes = omPrefixes.split(' '),
domPrefixes = omPrefixes.toLowerCase().split(' '),
tests = {},
classes = [],
slice = classes.slice,
featureName = undefined,
injectElementWithStyles = function injectElementWithStyles(rule, callback, nodes, testnames) {
var style = undefined,
ret = undefined,
node = undefined,
docOverflow = undefined,
div = document.createElement('div'),
body = document.body,
fakeBody = body || document.createElement('body');
if (parseInt(nodes, 10)) {
while (nodes--) {
node = document.createElement('div');
node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
div.appendChild(node);
}
}
style = ['­', '<style id="s', mod, '">', rule, '</style>'].join('');
div.id = mod;
(body ? div : fakeBody).innerHTML += style;
fakeBody.appendChild(div);
if (!body) {
fakeBody.style.background = '';
fakeBody.style.overflow = 'hidden';
docOverflow = docElement.style.overflow;
docElement.style.overflow = 'hidden';
docElement.appendChild(fakeBody);
}
ret = callback(div, rule);
if (!body) {
fakeBody.parentNode.removeChild(fakeBody);
docElement.style.overflow = docOverflow;
} else {
div.parentNode.removeChild(div);
}
return !!ret;
},
_hasOwnProperty = ({}).hasOwnProperty,
hasOwnProp = undefined;
function is(obj, type) {
return typeof obj === type;
}
if (!is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined')) {
hasOwnProp = function (object, property) {
return _hasOwnProperty.call(object, property);
};
} else {
hasOwnProp = function (object, property) {
return property in object && is(object.constructor.prototype[property], 'undefined');
};
}
if (!Function.prototype.bind) {
Function.prototype.bind = function bind(that) {
var target = this;
if (typeof target != "function") {
throw new TypeError();
}
var args = slice.call(arguments, 1),
bound = function bound() {
if (this instanceof bound) {
var F = function F() {};
F.prototype = target.prototype;
var _self = new F();
var result = target.apply(_self, args.concat(slice.call(arguments)));
if (Object(result) === result) {
return result;
}
return _self;
} else {
return target.apply(that, args.concat(slice.call(arguments)));
}
};
return bound;
};
}
function setCss(str) {
mStyle.cssText = str;
}
function setCssAll(str1, str2) {
return setCss(prefixes.join(str1 + ';') + (str2 || ''));
}
function contains(str, substr) {
return !! ~('' + str).indexOf(substr);
}
function testProps(props, prefixed) {
for (var i in props) {
var prop = props[i];
if (!contains(prop, "-") && mStyle[prop] !== undefined) {
return prefixed == 'pfx' ? prop : true;
}
}
return false;
}
function testDOMProps(props, obj, elem) {
for (var i in props) {
var item = obj[props[i]];
if (item !== undefined) {
if (elem === false) return props[i];
if (is(item, 'function')) {
return item.bind(elem || obj);
}
return item;
}
}
return false;
}
function testPropsAll(prop, prefixed, elem) {
var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1),
props = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' ');
if (is(prefixed, "string") || is(prefixed, "undefined")) {
return testProps(props, prefixed);
} else {
props = (prop + ' ' + domPrefixes.join(ucProp + ' ') + ucProp).split(' ');
return testDOMProps(props, prefixed, elem);
}
}
tests.borderradius = function () {
return testPropsAll('borderRadius');
};
tests.boxshadow = function () {
return testPropsAll('boxShadow');
};
tests.opacity = function () {
setCssAll('opacity:.55');
return (/^0.55$/.test(mStyle.opacity)
);
};
tests.csstransforms = function () {
return !!testPropsAll('transform');
};
tests.csstransforms3d = function () {
var ret = !!testPropsAll('perspective');
if (ret && 'webkitPerspective' in docElement.style) {
injectElementWithStyles('@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}', function (node) {
ret = node.offsetLeft === 9 && node.offsetHeight === 3;
});
}
return ret;
};
tests.csstransitions = function () {
return testPropsAll('transition');
};
for (var feature in tests) {
if (hasOwnProp(tests, feature)) {
featureName = feature.toLowerCase();
Modernizr[featureName] = tests[feature]();
classes.push((Modernizr[featureName] ? '' : 'no-') + featureName);
}
}
Modernizr.addTest = function (feature, test) {
if (typeof feature == 'object') {
for (var key in feature) {
if (hasOwnProp(feature, key)) {
Modernizr.addTest(key, feature[key]);
}
}
} else {
feature = feature.toLowerCase();
if (Modernizr[feature] !== undefined) {
return Modernizr;
}
test = typeof test == 'function' ? test() : test;
if (typeof enableClasses !== "undefined" && enableClasses) {
docElement.className += ' ' + (test ? '' : 'no-') + feature;
}
Modernizr[feature] = test;
}
return Modernizr;
};
setCss('');
Modernizr._version = version;
Modernizr._prefixes = prefixes;
Modernizr._domPrefixes = domPrefixes;
Modernizr._cssomPrefixes = cssomPrefixes;
Modernizr.testProp = function (prop) {
return testProps([prop]);
};
Modernizr.testAllProps = testPropsAll;
Modernizr.testStyles = injectElementWithStyles;
Modernizr.prefixed = function (prop, obj, elem) {
if (!obj) {
return testPropsAll(prop, 'pfx');
} else {
return testPropsAll(prop, obj, elem);
}
};
return Modernizr;
})(window, window.document);
},{}],135:[function(require,module,exports){
'use strict';
var React = require('react');
module.exports = {
corners: React.PropTypes.oneOf(['bottom-left', 'bottom-right', 'top-left', 'top-right']),
cornersAndCenter: React.PropTypes.oneOf(['bottom-center', 'bottom-left', 'bottom-right', 'top-center', 'top-left', 'top-right']),
stringOrNumber: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
zDepth: React.PropTypes.oneOf([0, 1, 2, 3, 4, 5])
};
},{"react":312}],136:[function(require,module,exports){
'use strict';
var AutoPrefix = require('../styles/auto-prefix');
var ImmutabilityHelper = require('../utils/immutability-helper');
module.exports = {
mergeAndPrefix: function mergeAndPrefix() {
var mergedStyles = ImmutabilityHelper.merge.apply(this, arguments);
return AutoPrefix.all(mergedStyles);
}
};
},{"../styles/auto-prefix":68,"../utils/immutability-helper":130}],137:[function(require,module,exports){
"use strict";
var index = 0;
module.exports = {
generate: function generate() {
return "mui-id-" + index++;
}
};
},{}],138:[function(require,module,exports){
// shim for using process in browser
var process = module.exports = {};
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
function cleanUpNextTick() {
draining = false;
if (currentQueue.length) {
queue = currentQueue.concat(queue);
} else {
queueIndex = -1;
}
if (queue.length) {
drainQueue();
}
}
function drainQueue() {
if (draining) {
return;
}
var timeout = setTimeout(cleanUpNextTick);
draining = true;
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
currentQueue[queueIndex].run();
}
queueIndex = -1;
len = queue.length;
}
currentQueue = null;
draining = false;
clearTimeout(timeout);
}
process.nextTick = function (fun) {
var args = new Array(arguments.length - 1);
if (arguments.length > 1) {
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
}
queue.push(new Item(fun, args));
if (queue.length === 1 && !draining) {
setTimeout(drainQueue, 0);
}
};
// v8 likes predictible objects
function Item(fun, array) {
this.fun = fun;
this.array = array;
}
Item.prototype.run = function () {
this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};
function noop() {}
process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.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');
};
process.umask = function() { return 0; };
},{}],139:[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 (
* <Draggable handle=".handle">
* <div>
* <div className="handle">Click me to drag</div>
* <div>This is some other content</div>
* </div>
* </Draggable>
* );
* }
* });
* ```
*/
handle: React.PropTypes.string,
/**
* `cancel` specifies a selector to be used to prevent drag initialization.
*
* Example:
*
* ```jsx
* var App = React.createClass({
* render: function () {
* return(
* <Draggable cancel=".cancel">
* <div>
* <div className="cancel">You can't drag from here</div>
* <div>Dragging here works fine</div>
* </div>
* </Draggable>
* );
* }
* });
* ```
*/
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 (
* <Draggable grid={[25, 25]}>
* <div>I snap to a 25 x 25 grid</div>
* </Draggable>
* );
* }
* });
* ```
*/
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 (
* <Draggable constrain={constrain}>
* <div>I snap to a 25 x 25 grid</div>
* </Draggable>
* );
* }
* });
* ```
*/
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 (
* <Draggable start={{x: 25, y: 25}}>
* <div>I start with left: 25px; top: 25px;</div>
* </Draggable>
* );
* }
* });
* ```
*/
start: React.PropTypes.object,
/**
* `zIndex` specifies the zIndex to use while dragging.
*
* Example:
*
* ```jsx
* var App = React.createClass({
* render: function () {
* return (
* <Draggable zIndex={100}>
* <div>I have a zIndex</div>
* </Draggable>
* );
* }
* });
* ```
*/
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":140}],140:[function(require,module,exports){
module.exports = require('./lib/ReactWithAddons');
},{"./lib/ReactWithAddons":240}],141:[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":274}],142:[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":155,"./EventPropagators":160,"./ExecutionEnvironment":161,"./FallbackCompositionState":162,"./SyntheticCompositionEvent":246,"./SyntheticInputEvent":250,"./keyOf":297}],143:[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":290,"_process":138}],144:[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;
},{}],145:[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":144,"./ExecutionEnvironment":161,"./camelizeStyleName":261,"./dangerousStyleValue":268,"./hyphenateStyleName":288,"./memoizeStringOnly":299,"./warning":311,"_process":138}],146:[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":168,"./PooledClass":169,"./invariant":290,"_process":138}],147:[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":155,"./EventPluginHub":157,"./EventPropagators":160,"./ExecutionEnvironment":161,"./ReactUpdates":239,"./SyntheticEvent":248,"./isEventSupported":291,"./isTextInputElement":293,"./keyOf":297}],148:[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;
},{}],149:[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<object>} updates List of update configurations.
* @param {array<string>} 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 <tbody> when using tables, ' +
'nesting tags like <form>, <p>, or <a>, or using non-SVG elements ' +
'in an <svg> 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":152,"./ReactMultiChildUpdateTypes":218,"./invariant":290,"./setTextContent":305,"_process":138}],150:[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 `<propName> in <element>`.)
* @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":290,"_process":138}],151:[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":150,"./quoteAttributeValueForBrowser":303,"./warning":311,"_process":138}],152:[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<string>} markupList List of markup strings to render.
* @return {array<DOMElement>} 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 <script> tags.
);
for (var j = 0; j < renderNodes.length; ++j) {
var renderNode = renderNodes[j];
if (renderNode.hasAttribute &&
renderNode.hasAttribute(RESULT_INDEX_ATTR)) {
resultIndex = +renderNode.getAttribute(RESULT_INDEX_ATTR);
renderNode.removeAttribute(RESULT_INDEX_ATTR);
("production" !== process.env.NODE_ENV ? invariant(
!resultList.hasOwnProperty(resultIndex),
'Danger: Assigning to an already-occupied result index.'
) : invariant(!resultList.hasOwnProperty(resultIndex)));
resultList[resultIndex] = renderNode;
// This should match resultList.length and markupList.length when
// we're done.
resultListAssignmentCount += 1;
} else if ("production" !== process.env.NODE_ENV) {
console.error(
'Danger: Discarding unexpected node:',
renderNode
);
}
}
}
// Although resultList was populated out of order, it should now be a dense
// array.
("production" !== process.env.NODE_ENV ? invariant(
resultListAssignmentCount === resultList.length,
'Danger: Did not assign to every index of resultList.'
) : invariant(resultListAssignmentCount === resultList.length));
("production" !== process.env.NODE_ENV ? invariant(
resultList.length === markupList.length,
'Danger: Expected markup to render %s nodes, but rendered %s.',
markupList.length,
resultList.length
) : invariant(resultList.length === markupList.length));
return resultList;
},
/**
* Replaces a node with a string of markup at its current position within its
* parent. The markup must render into a single root node.
*
* @param {DOMElement} oldChild Child node to replace.
* @param {string} markup Markup to render in place of the child node.
* @internal
*/
dangerouslyReplaceNodeWithMarkup: function(oldChild, markup) {
("production" !== process.env.NODE_ENV ? invariant(
ExecutionEnvironment.canUseDOM,
'dangerouslyReplaceNodeWithMarkup(...): 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));
("production" !== process.env.NODE_ENV ? invariant(markup, 'dangerouslyReplaceNodeWithMarkup(...): Missing markup.') : invariant(markup));
("production" !== process.env.NODE_ENV ? invariant(
oldChild.tagName.toLowerCase() !== 'html',
'dangerouslyReplaceNodeWithMarkup(...): Cannot replace markup of the ' +
'<html> node. This is because browser quirks make this unreliable ' +
'and/or slow. If you want to render to the root you must use ' +
'server rendering. See React.renderToString().'
) : invariant(oldChild.tagName.toLowerCase() !== 'html'));
var newChild = createNodesFromMarkup(markup, emptyFunction)[0];
oldChild.parentNode.replaceChild(newChild, oldChild);
}
};
module.exports = Danger;
}).call(this,require('_process'))
},{"./ExecutionEnvironment":161,"./createNodesFromMarkup":266,"./emptyFunction":269,"./getMarkupWrap":282,"./invariant":290,"_process":138}],153:[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 DefaultEventPluginOrder
*/
'use strict';
var keyOf = require("./keyOf");
/**
* Module that is injectable into `EventPluginHub`, that specifies a
* deterministic ordering of `EventPlugin`s. A convenient way to reason about
* plugins, without having to package every one of them. This is better than
* having plugins be ordered in the same order that they are injected because
* that ordering would be influenced by the packaging order.
* `ResponderEventPlugin` must occur before `SimpleEventPlugin` so that
* preventing default on events is convenient in `SimpleEventPlugin` handlers.
*/
var DefaultEventPluginOrder = [
keyOf({ResponderEventPlugin: null}),
keyOf({SimpleEventPlugin: null}),
keyOf({TapEventPlugin: null}),
keyOf({EnterLeaveEventPlugin: null}),
keyOf({ChangeEventPlugin: null}),
keyOf({SelectEventPlugin: null}),
keyOf({BeforeInputEventPlugin: null}),
keyOf({AnalyticsEventPlugin: null}),
keyOf({MobileSafariClickEventPlugin: null})
];
module.exports = DefaultEventPluginOrder;
},{"./keyOf":297}],154:[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 EnterLeaveEventPlugin
* @typechecks static-only
*/
'use strict';
var EventConstants = require("./EventConstants");
var EventPropagators = require("./EventPropagators");
var SyntheticMouseEvent = require("./SyntheticMouseEvent");
var ReactMount = require("./ReactMount");
var keyOf = require("./keyOf");
var topLevelTypes = EventConstants.topLevelTypes;
var getFirstReactDOM = ReactMount.getFirstReactDOM;
var eventTypes = {
mouseEnter: {
registrationName: keyOf({onMouseEnter: null}),
dependencies: [
topLevelTypes.topMouseOut,
topLevelTypes.topMouseOver
]
},
mouseLeave: {
registrationName: keyOf({onMouseLeave: null}),
dependencies: [
topLevelTypes.topMouseOut,
topLevelTypes.topMouseOver
]
}
};
var extractedEvents = [null, null];
var EnterLeaveEventPlugin = {
eventTypes: eventTypes,
/**
* For almost every interaction we care about, there will be both a top-level
* `mouseover` and `mouseout` event that occurs. Only use `mouseout` so that
* we do not extract duplicate events. However, moving the mouse into the
* browser from outside will not fire a `mouseout` event. In this case, we use
* the `mouseover` top-level event.
*
* @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 (topLevelType === topLevelTypes.topMouseOver &&
(nativeEvent.relatedTarget || nativeEvent.fromElement)) {
return null;
}
if (topLevelType !== topLevelTypes.topMouseOut &&
topLevelType !== topLevelTypes.topMouseOver) {
// Must not be a mouse in or mouse out - ignoring.
return null;
}
var win;
if (topLevelTarget.window === topLevelTarget) {
// `topLevelTarget` is probably a window object.
win = topLevelTarget;
} else {
// TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.
var doc = topLevelTarget.ownerDocument;
if (doc) {
win = doc.defaultView || doc.parentWindow;
} else {
win = window;
}
}
var from, to;
if (topLevelType === topLevelTypes.topMouseOut) {
from = topLevelTarget;
to =
getFirstReactDOM(nativeEvent.relatedTarget || nativeEvent.toElement) ||
win;
} else {
from = win;
to = topLevelTarget;
}
if (from === to) {
// Nothing pertains to our managed components.
return null;
}
var fromID = from ? ReactMount.getID(from) : '';
var toID = to ? ReactMount.getID(to) : '';
var leave = SyntheticMouseEvent.getPooled(
eventTypes.mouseLeave,
fromID,
nativeEvent
);
leave.type = 'mouseleave';
leave.target = from;
leave.relatedTarget = to;
var enter = SyntheticMouseEvent.getPooled(
eventTypes.mouseEnter,
toID,
nativeEvent
);
enter.type = 'mouseenter';
enter.target = to;
enter.relatedTarget = from;
EventPropagators.accumulateEnterLeaveDispatches(leave, enter, fromID, toID);
extractedEvents[0] = leave;
extractedEvents[1] = enter;
return extractedEvents;
}
};
module.exports = EnterLeaveEventPlugin;
},{"./EventConstants":155,"./EventPropagators":160,"./ReactMount":216,"./SyntheticMouseEvent":252,"./keyOf":297}],155:[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 EventConstants
*/
'use strict';
var keyMirror = require("./keyMirror");
var PropagationPhases = keyMirror({bubbled: null, captured: null});
/**
* Types of raw signals from the browser caught at the top level.
*/
var topLevelTypes = keyMirror({
topBlur: null,
topChange: null,
topClick: null,
topCompositionEnd: null,
topCompositionStart: null,
topCompositionUpdate: null,
topContextMenu: null,
topCopy: null,
topCut: null,
topDoubleClick: null,
topDrag: null,
topDragEnd: null,
topDragEnter: null,
topDragExit: null,
topDragLeave: null,
topDragOver: null,
topDragStart: null,
topDrop: null,
topError: null,
topFocus: null,
topInput: null,
topKeyDown: null,
topKeyPress: null,
topKeyUp: null,
topLoad: null,
topMouseDown: null,
topMouseMove: null,
topMouseOut: null,
topMouseOver: null,
topMouseUp: null,
topPaste: null,
topReset: null,
topScroll: null,
topSelectionChange: null,
topSubmit: null,
topTextInput: null,
topTouchCancel: null,
topTouchEnd: null,
topTouchMove: null,
topTouchStart: null,
topWheel: null
});
var EventConstants = {
topLevelTypes: topLevelTypes,
PropagationPhases: PropagationPhases
};
module.exports = EventConstants;
},{"./keyMirror":296}],156:[function(require,module,exports){
(function (process){
/**
* Copyright 2013-2015, 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 EventListener
* @typechecks
*/
var emptyFunction = require("./emptyFunction");
/**
* Upstream version of event listener. Does not take into account specific
* nature of platform.
*/
var EventListener = {
/**
* Listen to DOM events during the bubble phase.
*
* @param {DOMEventTarget} target DOM element to register listener on.
* @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
* @param {function} callback Callback function.
* @return {object} Object with a `remove` method.
*/
listen: function(target, eventType, callback) {
if (target.addEventListener) {
target.addEventListener(eventType, callback, false);
return {
remove: function() {
target.removeEventListener(eventType, callback, false);
}
};
} else if (target.attachEvent) {
target.attachEvent('on' + eventType, callback);
return {
remove: function() {
target.detachEvent('on' + eventType, callback);
}
};
}
},
/**
* Listen to DOM events during the capture phase.
*
* @param {DOMEventTarget} target DOM element to register listener on.
* @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
* @param {function} callback Callback function.
* @return {object} Object with a `remove` method.
*/
capture: function(target, eventType, callback) {
if (!target.addEventListener) {
if ("production" !== process.env.NODE_ENV) {
console.error(
'Attempted to listen to events during the capture phase on a ' +
'browser that does not support the capture phase. Your application ' +
'will not receive some events.'
);
}
return {
remove: emptyFunction
};
} else {
target.addEventListener(eventType, callback, true);
return {
remove: function() {
target.removeEventListener(eventType, callback, true);
}
};
}
},
registerDefault: function() {}
};
module.exports = EventListener;
}).call(this,require('_process'))
},{"./emptyFunction":269,"_process":138}],157:[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 EventPluginHub
*/
'use strict';
var EventPluginRegistry = require("./EventPluginRegistry");
var EventPluginUtils = require("./EventPluginUtils");
var accumulateInto = require("./accumulateInto");
var forEachAccumulated = require("./forEachAccumulated");
var invariant = require("./invariant");
/**
* Internal store for event listeners
*/
var listenerBank = {};
/**
* Internal queue of events that have accumulated their dispatches and are
* waiting to have their dispatches executed.
*/
var eventQueue = null;
/**
* Dispatches an event and releases it back into the pool, unless persistent.
*
* @param {?object} event Synthetic event to be dispatched.
* @private
*/
var executeDispatchesAndRelease = function(event) {
if (event) {
var executeDispatch = EventPluginUtils.executeDispatch;
// Plugins can provide custom behavior when dispatching events.
var PluginModule = EventPluginRegistry.getPluginModuleForEvent(event);
if (PluginModule && PluginModule.executeDispatch) {
executeDispatch = PluginModule.executeDispatch;
}
EventPluginUtils.executeDispatchesInOrder(event, executeDispatch);
if (!event.isPersistent()) {
event.constructor.release(event);
}
}
};
/**
* - `InstanceHandle`: [required] Module that performs logical traversals of DOM
* hierarchy given ids of the logical DOM elements involved.
*/
var InstanceHandle = null;
function validateInstanceHandle() {
var valid =
InstanceHandle &&
InstanceHandle.traverseTwoPhase &&
InstanceHandle.traverseEnterLeave;
("production" !== process.env.NODE_ENV ? invariant(
valid,
'InstanceHandle not injected before use!'
) : invariant(valid));
}
/**
* This is a unified interface for event plugins to be installed and configured.
*
* Event plugins can implement the following properties:
*
* `extractEvents` {function(string, DOMEventTarget, string, object): *}
* Required. When a top-level event is fired, this method is expected to
* extract synthetic events that will in turn be queued and dispatched.
*
* `eventTypes` {object}
* Optional, plugins that fire events must publish a mapping of registration
* names that are used to register listeners. Values of this mapping must
* be objects that contain `registrationName` or `phasedRegistrationNames`.
*
* `executeDispatch` {function(object, function, string)}
* Optional, allows plugins to override how an event gets dispatched. By
* default, the listener is simply invoked.
*
* Each plugin that is injected into `EventsPluginHub` is immediately operable.
*
* @public
*/
var EventPluginHub = {
/**
* Methods for injecting dependencies.
*/
injection: {
/**
* @param {object} InjectedMount
* @public
*/
injectMount: EventPluginUtils.injection.injectMount,
/**
* @param {object} InjectedInstanceHandle
* @public
*/
injectInstanceHandle: function(InjectedInstanceHandle) {
InstanceHandle = InjectedInstanceHandle;
if ("production" !== process.env.NODE_ENV) {
validateInstanceHandle();
}
},
getInstanceHandle: function() {
if ("production" !== process.env.NODE_ENV) {
validateInstanceHandle();
}
return InstanceHandle;
},
/**
* @param {array} InjectedEventPluginOrder
* @public
*/
injectEventPluginOrder: EventPluginRegistry.injectEventPluginOrder,
/**
* @param {object} injectedNamesToPlugins Map from names to plugin modules.
*/
injectEventPluginsByName: EventPluginRegistry.injectEventPluginsByName
},
eventNameDispatchConfigs: EventPluginRegistry.eventNameDispatchConfigs,
registrationNameModules: EventPluginRegistry.registrationNameModules,
/**
* Stores `listener` at `listenerBank[registrationName][id]`. Is idempotent.
*
* @param {string} id ID of the DOM element.
* @param {string} registrationName Name of listener (e.g. `onClick`).
* @param {?function} listener The callback to store.
*/
putListener: function(id, registrationName, listener) {
("production" !== process.env.NODE_ENV ? invariant(
!listener || typeof listener === 'function',
'Expected %s listener to be a function, instead got type %s',
registrationName, typeof listener
) : invariant(!listener || typeof listener === 'function'));
var bankForRegistrationName =
listenerBank[registrationName] || (listenerBank[registrationName] = {});
bankForRegistrationName[id] = listener;
},
/**
* @param {string} id ID of the DOM element.
* @param {string} registrationName Name of listener (e.g. `onClick`).
* @return {?function} The stored callback.
*/
getListener: function(id, registrationName) {
var bankForRegistrationName = listenerBank[registrationName];
return bankForRegistrationName && bankForRegistrationName[id];
},
/**
* Deletes a listener from the registration bank.
*
* @param {string} id ID of the DOM element.
* @param {string} registrationName Name of listener (e.g. `onClick`).
*/
deleteListener: function(id, registrationName) {
var bankForRegistrationName = listenerBank[registrationName];
if (bankForRegistrationName) {
delete bankForRegistrationName[id];
}
},
/**
* Deletes all listeners for the DOM element with the supplied ID.
*
* @param {string} id ID of the DOM element.
*/
deleteAllListeners: function(id) {
for (var registrationName in listenerBank) {
delete listenerBank[registrationName][id];
}
},
/**
* Allows registered plugins an opportunity to extract events from top-level
* native browser events.
*
* @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.
* @internal
*/
extractEvents: function(
topLevelType,
topLevelTarget,
topLevelTargetID,
nativeEvent) {
var events;
var plugins = EventPluginRegistry.plugins;
for (var i = 0, l = plugins.length; i < l; i++) {
// Not every plugin in the ordering may be loaded at runtime.
var possiblePlugin = plugins[i];
if (possiblePlugin) {
var extractedEvents = possiblePlugin.extractEvents(
topLevelType,
topLevelTarget,
topLevelTargetID,
nativeEvent
);
if (extractedEvents) {
events = accumulateInto(events, extractedEvents);
}
}
}
return events;
},
/**
* Enqueues a synthetic event that should be dispatched when
* `processEventQueue` is invoked.
*
* @param {*} events An accumulation of synthetic events.
* @internal
*/
enqueueEvents: function(events) {
if (events) {
eventQueue = accumulateInto(eventQueue, events);
}
},
/**
* Dispatches all synthetic events on the event queue.
*
* @internal
*/
processEventQueue: function() {
// Set `eventQueue` to null before processing it so that we can tell if more
// events get enqueued while processing.
var processingEventQueue = eventQueue;
eventQueue = null;
forEachAccumulated(processingEventQueue, executeDispatchesAndRelease);
("production" !== process.env.NODE_ENV ? invariant(
!eventQueue,
'processEventQueue(): Additional events were enqueued while processing ' +
'an event queue. Support for this has not yet been implemented.'
) : invariant(!eventQueue));
},
/**
* These are needed for tests only. Do not use!
*/
__purge: function() {
listenerBank = {};
},
__getListenerBank: function() {
return listenerBank;
}
};
module.exports = EventPluginHub;
}).call(this,require('_process'))
},{"./EventPluginRegistry":158,"./EventPluginUtils":159,"./accumulateInto":258,"./forEachAccumulated":275,"./invariant":290,"_process":138}],158:[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 EventPluginRegistry
* @typechecks static-only
*/
'use strict';
var invariant = require("./invariant");
/**
* Injectable ordering of event plugins.
*/
var EventPluginOrder = null;
/**
* Injectable mapping from names to event plugin modules.
*/
var namesToPlugins = {};
/**
* Recomputes the plugin list using the injected plugins and plugin ordering.
*
* @private
*/
function recomputePluginOrdering() {
if (!EventPluginOrder) {
// Wait until an `EventPluginOrder` is injected.
return;
}
for (var pluginName in namesToPlugins) {
var PluginModule = namesToPlugins[pluginName];
var pluginIndex = EventPluginOrder.indexOf(pluginName);
("production" !== process.env.NODE_ENV ? invariant(
pluginIndex > -1,
'EventPluginRegistry: Cannot inject event plugins that do not exist in ' +
'the plugin ordering, `%s`.',
pluginName
) : invariant(pluginIndex > -1));
if (EventPluginRegistry.plugins[pluginIndex]) {
continue;
}
("production" !== process.env.NODE_ENV ? invariant(
PluginModule.extractEvents,
'EventPluginRegistry: Event plugins must implement an `extractEvents` ' +
'method, but `%s` does not.',
pluginName
) : invariant(PluginModule.extractEvents));
EventPluginRegistry.plugins[pluginIndex] = PluginModule;
var publishedEvents = PluginModule.eventTypes;
for (var eventName in publishedEvents) {
("production" !== process.env.NODE_ENV ? invariant(
publishEventForPlugin(
publishedEvents[eventName],
PluginModule,
eventName
),
'EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.',
eventName,
pluginName
) : invariant(publishEventForPlugin(
publishedEvents[eventName],
PluginModule,
eventName
)));
}
}
}
/**
* Publishes an event so that it can be dispatched by the supplied plugin.
*
* @param {object} dispatchConfig Dispatch configuration for the event.
* @param {object} PluginModule Plugin publishing the event.
* @return {boolean} True if the event was successfully published.
* @private
*/
function publishEventForPlugin(dispatchConfig, PluginModule, eventName) {
("production" !== process.env.NODE_ENV ? invariant(
!EventPluginRegistry.eventNameDispatchConfigs.hasOwnProperty(eventName),
'EventPluginHub: More than one plugin attempted to publish the same ' +
'event name, `%s`.',
eventName
) : invariant(!EventPluginRegistry.eventNameDispatchConfigs.hasOwnProperty(eventName)));
EventPluginRegistry.eventNameDispatchConfigs[eventName] = dispatchConfig;
var phasedRegistrationNames = dispatchConfig.phasedRegistrationNames;
if (phasedRegistrationNames) {
for (var phaseName in phasedRegistrationNames) {
if (phasedRegistrationNames.hasOwnProperty(phaseName)) {
var phasedRegistrationName = phasedRegistrationNames[phaseName];
publishRegistrationName(
phasedRegistrationName,
PluginModule,
eventName
);
}
}
return true;
} else if (dispatchConfig.registrationName) {
publishRegistrationName(
dispatchConfig.registrationName,
PluginModule,
eventName
);
return true;
}
return false;
}
/**
* Publishes a registration name that is used to identify dispatched events and
* can be used with `EventPluginHub.putListener` to register listeners.
*
* @param {string} registrationName Registration name to add.
* @param {object} PluginModule Plugin publishing the event.
* @private
*/
function publishRegistrationName(registrationName, PluginModule, eventName) {
("production" !== process.env.NODE_ENV ? invariant(
!EventPluginRegistry.registrationNameModules[registrationName],
'EventPluginHub: More than one plugin attempted to publish the same ' +
'registration name, `%s`.',
registrationName
) : invariant(!EventPluginRegistry.registrationNameModules[registrationName]));
EventPluginRegistry.registrationNameModules[registrationName] = PluginModule;
EventPluginRegistry.registrationNameDependencies[registrationName] =
PluginModule.eventTypes[eventName].dependencies;
}
/**
* Registers plugins so that they can extract and dispatch events.
*
* @see {EventPluginHub}
*/
var EventPluginRegistry = {
/**
* Ordered list of injected plugins.
*/
plugins: [],
/**
* Mapping from event name to dispatch config
*/
eventNameDispatchConfigs: {},
/**
* Mapping from registration name to plugin module
*/
registrationNameModules: {},
/**
* Mapping from registration name to event name
*/
registrationNameDependencies: {},
/**
* Injects an ordering of plugins (by plugin name). This allows the ordering
* to be decoupled from injection of the actual plugins so that ordering is
* always deterministic regardless of packaging, on-the-fly injection, etc.
*
* @param {array} InjectedEventPluginOrder
* @internal
* @see {EventPluginHub.injection.injectEventPluginOrder}
*/
injectEventPluginOrder: function(InjectedEventPluginOrder) {
("production" !== process.env.NODE_ENV ? invariant(
!EventPluginOrder,
'EventPluginRegistry: Cannot inject event plugin ordering more than ' +
'once. You are likely trying to load more than one copy of React.'
) : invariant(!EventPluginOrder));
// Clone the ordering so it cannot be dynamically mutated.
EventPluginOrder = Array.prototype.slice.call(InjectedEventPluginOrder);
recomputePluginOrdering();
},
/**
* Injects plugins to be used by `EventPluginHub`. The plugin names must be
* in the ordering injected by `injectEventPluginOrder`.
*
* Plugins can be injected as part of page initialization or on-the-fly.
*
* @param {object} injectedNamesToPlugins Map from names to plugin modules.
* @internal
* @see {EventPluginHub.injection.injectEventPluginsByName}
*/
injectEventPluginsByName: function(injectedNamesToPlugins) {
var isOrderingDirty = false;
for (var pluginName in injectedNamesToPlugins) {
if (!injectedNamesToPlugins.hasOwnProperty(pluginName)) {
continue;
}
var PluginModule = injectedNamesToPlugins[pluginName];
if (!namesToPlugins.hasOwnProperty(pluginName) ||
namesToPlugins[pluginName] !== PluginModule) {
("production" !== process.env.NODE_ENV ? invariant(
!namesToPlugins[pluginName],
'EventPluginRegistry: Cannot inject two different event plugins ' +
'using the same name, `%s`.',
pluginName
) : invariant(!namesToPlugins[pluginName]));
namesToPlugins[pluginName] = PluginModule;
isOrderingDirty = true;
}
}
if (isOrderingDirty) {
recomputePluginOrdering();
}
},
/**
* Looks up the plugin for the supplied event.
*
* @param {object} event A synthetic event.
* @return {?object} The plugin that created the supplied event.
* @internal
*/
getPluginModuleForEvent: function(event) {
var dispatchConfig = event.dispatchConfig;
if (dispatchConfig.registrationName) {
return EventPluginRegistry.registrationNameModules[
dispatchConfig.registrationName
] || null;
}
for (var phase in dispatchConfig.phasedRegistrationNames) {
if (!dispatchConfig.phasedRegistrationNames.hasOwnProperty(phase)) {
continue;
}
var PluginModule = EventPluginRegistry.registrationNameModules[
dispatchConfig.phasedRegistrationNames[phase]
];
if (PluginModule) {
return PluginModule;
}
}
return null;
},
/**
* Exposed for unit testing.
* @private
*/
_resetEventPlugins: function() {
EventPluginOrder = null;
for (var pluginName in namesToPlugins) {
if (namesToPlugins.hasOwnProperty(pluginName)) {
delete namesToPlugins[pluginName];
}
}
EventPluginRegistry.plugins.length = 0;
var eventNameDispatchConfigs = EventPluginRegistry.eventNameDispatchConfigs;
for (var eventName in eventNameDispatchConfigs) {
if (eventNameDispatchConfigs.hasOwnProperty(eventName)) {
delete eventNameDispatchConfigs[eventName];
}
}
var registrationNameModules = EventPluginRegistry.registrationNameModules;
for (var registrationName in registrationNameModules) {
if (registrationNameModules.hasOwnProperty(registrationName)) {
delete registrationNameModules[registrationName];
}
}
}
};
module.exports = EventPluginRegistry;
}).call(this,require('_process'))
},{"./invariant":290,"_process":138}],159:[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 EventPluginUtils
*/
'use strict';
var EventConstants = require("./EventConstants");
var invariant = require("./invariant");
/**
* Injected dependencies:
*/
/**
* - `Mount`: [required] Module that can convert between React dom IDs and
* actual node references.
*/
var injection = {
Mount: null,
injectMount: function(InjectedMount) {
injection.Mount = InjectedMount;
if ("production" !== process.env.NODE_ENV) {
("production" !== process.env.NODE_ENV ? invariant(
InjectedMount && InjectedMount.getNode,
'EventPluginUtils.injection.injectMount(...): Injected Mount module ' +
'is missing getNode.'
) : invariant(InjectedMount && InjectedMount.getNode));
}
}
};
var topLevelTypes = EventConstants.topLevelTypes;
function isEndish(topLevelType) {
return topLevelType === topLevelTypes.topMouseUp ||
topLevelType === topLevelTypes.topTouchEnd ||
topLevelType === topLevelTypes.topTouchCancel;
}
function isMoveish(topLevelType) {
return topLevelType === topLevelTypes.topMouseMove ||
topLevelType === topLevelTypes.topTouchMove;
}
function isStartish(topLevelType) {
return topLevelType === topLevelTypes.topMouseDown ||
topLevelType === topLevelTypes.topTouchStart;
}
var validateEventDispatches;
if ("production" !== process.env.NODE_ENV) {
validateEventDispatches = function(event) {
var dispatchListeners = event._dispatchListeners;
var dispatchIDs = event._dispatchIDs;
var listenersIsArr = Array.isArray(dispatchListeners);
var idsIsArr = Array.isArray(dispatchIDs);
var IDsLen = idsIsArr ? dispatchIDs.length : dispatchIDs ? 1 : 0;
var listenersLen = listenersIsArr ?
dispatchListeners.length :
dispatchListeners ? 1 : 0;
("production" !== process.env.NODE_ENV ? invariant(
idsIsArr === listenersIsArr && IDsLen === listenersLen,
'EventPluginUtils: Invalid `event`.'
) : invariant(idsIsArr === listenersIsArr && IDsLen === listenersLen));
};
}
/**
* Invokes `cb(event, listener, id)`. Avoids using call if no scope is
* provided. The `(listener,id)` pair effectively forms the "dispatch" but are
* kept separate to conserve memory.
*/
function forEachEventDispatch(event, cb) {
var dispatchListeners = event._dispatchListeners;
var dispatchIDs = event._dispatchIDs;
if ("production" !== process.env.NODE_ENV) {
validateEventDispatches(event);
}
if (Array.isArray(dispatchListeners)) {
for (var i = 0; i < dispatchListeners.length; i++) {
if (event.isPropagationStopped()) {
break;
}
// Listeners and IDs are two parallel arrays that are always in sync.
cb(event, dispatchListeners[i], dispatchIDs[i]);
}
} else if (dispatchListeners) {
cb(event, dispatchListeners, dispatchIDs);
}
}
/**
* Default implementation of PluginModule.executeDispatch().
* @param {SyntheticEvent} SyntheticEvent to handle
* @param {function} Application-level callback
* @param {string} domID DOM id to pass to the callback.
*/
function executeDispatch(event, listener, domID) {
event.currentTarget = injection.Mount.getNode(domID);
var returnValue = listener(event, domID);
event.currentTarget = null;
return returnValue;
}
/**
* Standard/simple iteration through an event's collected dispatches.
*/
function executeDispatchesInOrder(event, cb) {
forEachEventDispatch(event, cb);
event._dispatchListeners = null;
event._dispatchIDs = null;
}
/**
* Standard/simple iteration through an event's collected dispatches, but stops
* at the first dispatch execution returning true, and returns that id.
*
* @return id of the first dispatch execution who's listener returns true, or
* null if no listener returned true.
*/
function executeDispatchesInOrderStopAtTrueImpl(event) {
var dispatchListeners = event._dispatchListeners;
var dispatchIDs = event._dispatchIDs;
if ("production" !== process.env.NODE_ENV) {
validateEventDispatches(event);
}
if (Array.isArray(dispatchListeners)) {
for (var i = 0; i < dispatchListeners.length; i++) {
if (event.isPropagationStopped()) {
break;
}
// Listeners and IDs are two parallel arrays that are always in sync.
if (dispatchListeners[i](event, dispatchIDs[i])) {
return dispatchIDs[i];
}
}
} else if (dispatchListeners) {
if (dispatchListeners(event, dispatchIDs)) {
return dispatchIDs;
}
}
return null;
}
/**
* @see executeDispatchesInOrderStopAtTrueImpl
*/
function executeDispatchesInOrderStopAtTrue(event) {
var ret = executeDispatchesInOrderStopAtTrueImpl(event);
event._dispatchIDs = null;
event._dispatchListeners = null;
return ret;
}
/**
* Execution of a "direct" dispatch - there must be at most one dispatch
* accumulated on the event or it is considered an error. It doesn't really make
* sense for an event with multiple dispatches (bubbled) to keep track of the
* return values at each dispatch execution, but it does tend to make sense when
* dealing with "direct" dispatches.
*
* @return The return value of executing the single dispatch.
*/
function executeDirectDispatch(event) {
if ("production" !== process.env.NODE_ENV) {
validateEventDispatches(event);
}
var dispatchListener = event._dispatchListeners;
var dispatchID = event._dispatchIDs;
("production" !== process.env.NODE_ENV ? invariant(
!Array.isArray(dispatchListener),
'executeDirectDispatch(...): Invalid `event`.'
) : invariant(!Array.isArray(dispatchListener)));
var res = dispatchListener ?
dispatchListener(event, dispatchID) :
null;
event._dispatchListeners = null;
event._dispatchIDs = null;
return res;
}
/**
* @param {SyntheticEvent} event
* @return {bool} True iff number of dispatches accumulated is greater than 0.
*/
function hasDispatches(event) {
return !!event._dispatchListeners;
}
/**
* General utilities that are useful in creating custom Event Plugins.
*/
var EventPluginUtils = {
isEndish: isEndish,
isMoveish: isMoveish,
isStartish: isStartish,
executeDirectDispatch: executeDirectDispatch,
executeDispatch: executeDispatch,
executeDispatchesInOrder: executeDispatchesInOrder,
executeDispatchesInOrderStopAtTrue: executeDispatchesInOrderStopAtTrue,
hasDispatches: hasDispatches,
injection: injection,
useTouchEvents: false
};
module.exports = EventPluginUtils;
}).call(this,require('_process'))
},{"./EventConstants":155,"./invariant":290,"_process":138}],160:[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 EventPropagators
*/
'use strict';
var EventConstants = require("./EventConstants");
var EventPluginHub = require("./EventPluginHub");
var accumulateInto = require("./accumulateInto");
var forEachAccumulated = require("./forEachAccumulated");
var PropagationPhases = EventConstants.PropagationPhases;
var getListener = EventPluginHub.getListener;
/**
* Some event types have a notion of different registration names for different
* "phases" of propagation. This finds listeners by a given phase.
*/
function listenerAtPhase(id, event, propagationPhase) {
var registrationName =
event.dispatchConfig.phasedRegistrationNames[propagationPhase];
return getListener(id, registrationName);
}
/**
* Tags a `SyntheticEvent` with dispatched listeners. Creating this function
* here, allows us to not have to bind or create functions for each event.
* Mutating the event's members allows us to not have to create a wrapping
* "dispatch" object that pairs the event with the listener.
*/
function accumulateDirectionalDispatches(domID, upwards, event) {
if ("production" !== process.env.NODE_ENV) {
if (!domID) {
throw new Error('Dispatching id must not be null');
}
}
var phase = upwards ? PropagationPhases.bubbled : PropagationPhases.captured;
var listener = listenerAtPhase(domID, event, phase);
if (listener) {
event._dispatchListeners =
accumulateInto(event._dispatchListeners, listener);
event._dispatchIDs = accumulateInto(event._dispatchIDs, domID);
}
}
/**
* Collect dispatches (must be entirely collected before dispatching - see unit
* tests). Lazily allocate the array to conserve memory. We must loop through
* each event and perform the traversal for each one. We can not perform a
* single traversal for the entire collection of events because each event may
* have a different target.
*/
function accumulateTwoPhaseDispatchesSingle(event) {
if (event && event.dispatchConfig.phasedRegistrationNames) {
EventPluginHub.injection.getInstanceHandle().traverseTwoPhase(
event.dispatchMarker,
accumulateDirectionalDispatches,
event
);
}
}
/**
* Accumulates without regard to direction, does not look for phased
* registration names. Same as `accumulateDirectDispatchesSingle` but without
* requiring that the `dispatchMarker` be the same as the dispatched ID.
*/
function accumulateDispatches(id, ignoredDirection, event) {
if (event && event.dispatchConfig.registrationName) {
var registrationName = event.dispatchConfig.registrationName;
var listener = getListener(id, registrationName);
if (listener) {
event._dispatchListeners =
accumulateInto(event._dispatchListeners, listener);
event._dispatchIDs = accumulateInto(event._dispatchIDs, id);
}
}
}
/**
* Accumulates dispatches on an `SyntheticEvent`, but only for the
* `dispatchMarker`.
* @param {SyntheticEvent} event
*/
function accumulateDirectDispatchesSingle(event) {
if (event && event.dispatchConfig.registrationName) {
accumulateDispatches(event.dispatchMarker, null, event);
}
}
function accumulateTwoPhaseDispatches(events) {
forEachAccumulated(events, accumulateTwoPhaseDispatchesSingle);
}
function accumulateEnterLeaveDispatches(leave, enter, fromID, toID) {
EventPluginHub.injection.getInstanceHandle().traverseEnterLeave(
fromID,
toID,
accumulateDispatches,
leave,
enter
);
}
function accumulateDirectDispatches(events) {
forEachAccumulated(events, accumulateDirectDispatchesSingle);
}
/**
* A small set of propagation patterns, each of which will accept a small amount
* of information, and generate a set of "dispatch ready event objects" - which
* are sets of events that have already been annotated with a set of dispatched
* listener functions/ids. The API is designed this way to discourage these
* propagation strategies from actually executing the dispatches, since we
* always want to collect the entire set of dispatches before executing event a
* single one.
*
* @constructor EventPropagators
*/
var EventPropagators = {
accumulateTwoPhaseDispatches: accumulateTwoPhaseDispatches,
accumulateDirectDispatches: accumulateDirectDispatches,
accumulateEnterLeaveDispatches: accumulateEnterLeaveDispatches
};
module.exports = EventPropagators;
}).call(this,require('_process'))
},{"./EventConstants":155,"./EventPluginHub":157,"./accumulateInto":258,"./forEachAccumulated":275,"_process":138}],161:[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 ExecutionEnvironment
*/
/*jslint evil: true */
"use strict";
var canUseDOM = !!(
(typeof window !== 'undefined' &&
window.document && window.document.createElement)
);
/**
* Simple, lightweight module assisting with the detection and context of
* Worker. Helps avoid circular dependencies and allows code to reason about
* whether or not they are in a Worker, even if they never include the main
* `ReactWorker` dependency.
*/
var ExecutionEnvironment = {
canUseDOM: canUseDOM,
canUseWorkers: typeof Worker !== 'undefined',
canUseEventListeners:
canUseDOM && !!(window.addEventListener || window.attachEvent),
canUseViewport: canUseDOM && !!window.screen,
isInWorker: !canUseDOM // For now, this is true - might change in the future.
};
module.exports = ExecutionEnvironment;
},{}],162:[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 FallbackCompositionState
* @typechecks static-only
*/
'use strict';
var PooledClass = require("./PooledClass");
var assign = require("./Object.assign");
var getTextContentAccessor = require("./getTextContentAccessor");
/**
* This helper class stores information about text content of a target node,
* allowing comparison of content before and after a given event.
*
* Identify the node where selection currently begins, then observe
* both its text content and its current position in the DOM. Since the
* browser may natively replace the target node during composition, we can
* use its position to find its replacement.
*
* @param {DOMEventTarget} root
*/
function FallbackCompositionState(root) {
this._root = root;
this._startText = this.getText();
this._fallbackText = null;
}
assign(FallbackCompositionState.prototype, {
/**
* Get current text of input.
*
* @return {string}
*/
getText: function() {
if ('value' in this._root) {
return this._root.value;
}
return this._root[getTextContentAccessor()];
},
/**
* Determine the differing substring between the initially stored
* text content and the current content.
*
* @return {string}
*/
getData: function() {
if (this._fallbackText) {
return this._fallbackText;
}
var start;
var startValue = this._startText;
var startLength = startValue.length;
var end;
var endValue = this.getText();
var endLength = endValue.length;
for (start = 0; start < startLength; start++) {
if (startValue[start] !== endValue[start]) {
break;
}
}
var minEnd = startLength - start;
for (end = 1; end <= minEnd; end++) {
if (startValue[startLength - end] !== endValue[endLength - end]) {
break;
}
}
var sliceTail = end > 1 ? 1 - end : undefined;
this._fallbackText = endValue.slice(start, sliceTail);
return this._fallbackText;
}
});
PooledClass.addPoolingTo(FallbackCompositionState);
module.exports = FallbackCompositionState;
},{"./Object.assign":168,"./PooledClass":169,"./getTextContentAccessor":285}],163:[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 HTMLDOMPropertyConfig
*/
/*jslint bitwise: true*/
'use strict';
var DOMProperty = require("./DOMProperty");
var ExecutionEnvironment = require("./ExecutionEnvironment");
var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE;
var MUST_USE_PROPERTY = DOMProperty.injection.MUST_USE_PROPERTY;
var HAS_BOOLEAN_VALUE = DOMProperty.injection.HAS_BOOLEAN_VALUE;
var HAS_SIDE_EFFECTS = DOMProperty.injection.HAS_SIDE_EFFECTS;
var HAS_NUMERIC_VALUE = DOMProperty.injection.HAS_NUMERIC_VALUE;
var HAS_POSITIVE_NUMERIC_VALUE =
DOMProperty.injection.HAS_POSITIVE_NUMERIC_VALUE;
var HAS_OVERLOADED_BOOLEAN_VALUE =
DOMProperty.injection.HAS_OVERLOADED_BOOLEAN_VALUE;
var hasSVG;
if (ExecutionEnvironment.canUseDOM) {
var implementation = document.implementation;
hasSVG = (
implementation &&
implementation.hasFeature &&
implementation.hasFeature(
'http://www.w3.org/TR/SVG11/feature#BasicStructure',
'1.1'
)
);
}
var HTMLDOMPropertyConfig = {
isCustomAttribute: RegExp.prototype.test.bind(
/^(data|aria)-[a-z_][a-z\d_.\-]*$/
),
Properties: {
/**
* Standard Properties
*/
accept: null,
acceptCharset: null,
accessKey: null,
action: null,
allowFullScreen: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
allowTransparency: MUST_USE_ATTRIBUTE,
alt: null,
async: HAS_BOOLEAN_VALUE,
autoComplete: null,
// autoFocus is polyfilled/normalized by AutoFocusMixin
// autoFocus: HAS_BOOLEAN_VALUE,
autoPlay: HAS_BOOLEAN_VALUE,
cellPadding: null,
cellSpacing: null,
charSet: MUST_USE_ATTRIBUTE,
checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
classID: MUST_USE_ATTRIBUTE,
// To set className on SVG elements, it's necessary to use .setAttribute;
// this works on HTML elements too in all browsers except IE8. Conveniently,
// IE8 doesn't support SVG and so we can simply use the attribute in
// browsers that support SVG and the property in browsers that don't,
// regardless of whether the element is HTML or SVG.
className: hasSVG ? MUST_USE_ATTRIBUTE : MUST_USE_PROPERTY,
cols: MUST_USE_ATTRIBUTE | HAS_POSITIVE_NUMERIC_VALUE,
colSpan: null,
content: null,
contentEditable: null,
contextMenu: MUST_USE_ATTRIBUTE,
controls: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
coords: null,
crossOrigin: null,
data: null, // For `<object />` acts as `src`.
dateTime: MUST_USE_ATTRIBUTE,
defer: HAS_BOOLEAN_VALUE,
dir: null,
disabled: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
download: HAS_OVERLOADED_BOOLEAN_VALUE,
draggable: null,
encType: null,
form: MUST_USE_ATTRIBUTE,
formAction: MUST_USE_ATTRIBUTE,
formEncType: MUST_USE_ATTRIBUTE,
formMethod: MUST_USE_ATTRIBUTE,
formNoValidate: HAS_BOOLEAN_VALUE,
formTarget: MUST_USE_ATTRIBUTE,
frameBorder: MUST_USE_ATTRIBUTE,
headers: null,
height: MUST_USE_ATTRIBUTE,
hidden: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
high: null,
href: null,
hrefLang: null,
htmlFor: null,
httpEquiv: null,
icon: null,
id: MUST_USE_PROPERTY,
label: null,
lang: null,
list: MUST_USE_ATTRIBUTE,
loop: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
low: null,
manifest: MUST_USE_ATTRIBUTE,
marginHeight: null,
marginWidth: null,
max: null,
maxLength: MUST_USE_ATTRIBUTE,
media: MUST_USE_ATTRIBUTE,
mediaGroup: null,
method: null,
min: null,
multiple: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
muted: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
name: null,
noValidate: HAS_BOOLEAN_VALUE,
open: HAS_BOOLEAN_VALUE,
optimum: null,
pattern: null,
placeholder: null,
poster: null,
preload: null,
radioGroup: null,
readOnly: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
rel: null,
required: HAS_BOOLEAN_VALUE,
role: MUST_USE_ATTRIBUTE,
rows: MUST_USE_ATTRIBUTE | HAS_POSITIVE_NUMERIC_VALUE,
rowSpan: null,
sandbox: null,
scope: null,
scoped: HAS_BOOLEAN_VALUE,
scrolling: null,
seamless: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
selected: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
shape: null,
size: MUST_USE_ATTRIBUTE | HAS_POSITIVE_NUMERIC_VALUE,
sizes: MUST_USE_ATTRIBUTE,
span: HAS_POSITIVE_NUMERIC_VALUE,
spellCheck: null,
src: null,
srcDoc: MUST_USE_PROPERTY,
srcSet: MUST_USE_ATTRIBUTE,
start: HAS_NUMERIC_VALUE,
step: null,
style: null,
tabIndex: null,
target: null,
title: null,
type: null,
useMap: null,
value: MUST_USE_PROPERTY | HAS_SIDE_EFFECTS,
width: MUST_USE_ATTRIBUTE,
wmode: MUST_USE_ATTRIBUTE,
/**
* Non-standard Properties
*/
// autoCapitalize and autoCorrect are supported in Mobile Safari for
// keyboard hints.
autoCapitalize: null,
autoCorrect: null,
// itemProp, itemScope, itemType are for
// Microdata support. See http://schema.org/docs/gs.html
itemProp: MUST_USE_ATTRIBUTE,
itemScope: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
itemType: MUST_USE_ATTRIBUTE,
// itemID and itemRef are for Microdata support as well but
// only specified in the the WHATWG spec document. See
// https://html.spec.whatwg.org/multipage/microdata.html#microdata-dom-api
itemID: MUST_USE_ATTRIBUTE,
itemRef: MUST_USE_ATTRIBUTE,
// property is supported for OpenGraph in meta tags.
property: null,
// IE-only attribute that controls focus behavior
unselectable: MUST_USE_ATTRIBUTE
},
DOMAttributeNames: {
acceptCharset: 'accept-charset',
className: 'class',
htmlFor: 'for',
httpEquiv: 'http-equiv'
},
DOMPropertyNames: {
autoCapitalize: 'autocapitalize',
autoComplete: 'autocomplete',
autoCorrect: 'autocorrect',
autoFocus: 'autofocus',
autoPlay: 'autoplay',
// `encoding` is equivalent to `enctype`, IE8 lacks an `enctype` setter.
// http://www.w3.org/TR/html5/forms.html#dom-fs-encoding
encType: 'encoding',
hrefLang: 'hreflang',
radioGroup: 'radiogroup',
spellCheck: 'spellcheck',
srcDoc: 'srcdoc',
srcSet: 'srcset'
}
};
module.exports = HTMLDOMPropertyConfig;
},{"./DOMProperty":150,"./ExecutionEnvironment":161}],164:[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 LinkedStateMixin
* @typechecks static-only
*/
'use strict';
var ReactLink = require("./ReactLink");
var ReactStateSetters = require("./ReactStateSetters");
/**
* A simple mixin around ReactLink.forState().
*/
var LinkedStateMixin = {
/**
* Create a ReactLink that's linked to part of this component's state. The
* ReactLink will have the current value of this.state[key] and will call
* setState() when a change is requested.
*
* @param {string} key state key to update. Note: you may want to use keyOf()
* if you're using Google Closure Compiler advanced mode.
* @return {ReactLink} ReactLink instance linking to the state.
*/
linkState: function(key) {
return new ReactLink(
this.state[key],
ReactStateSetters.createStateKeySetter(this, key)
);
}
};
module.exports = LinkedStateMixin;
},{"./ReactLink":214,"./ReactStateSetters":233}],165:[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 LinkedValueUtils
* @typechecks static-only
*/
'use strict';
var ReactPropTypes = require("./ReactPropTypes");
var invariant = require("./invariant");
var hasReadOnlyValue = {
'button': true,
'checkbox': true,
'image': true,
'hidden': true,
'radio': true,
'reset': true,
'submit': true
};
function _assertSingleLink(input) {
("production" !== process.env.NODE_ENV ? invariant(
input.props.checkedLink == null || input.props.valueLink == null,
'Cannot provide a checkedLink and a valueLink. If you want to use ' +
'checkedLink, you probably don\'t want to use valueLink and vice versa.'
) : invariant(input.props.checkedLink == null || input.props.valueLink == null));
}
function _assertValueLink(input) {
_assertSingleLink(input);
("production" !== process.env.NODE_ENV ? invariant(
input.props.value == null && input.props.onChange == null,
'Cannot provide a valueLink and a value or onChange event. If you want ' +
'to use value or onChange, you probably don\'t want to use valueLink.'
) : invariant(input.props.value == null && input.props.onChange == null));
}
function _assertCheckedLink(input) {
_assertSingleLink(input);
("production" !== process.env.NODE_ENV ? invariant(
input.props.checked == null && input.props.onChange == null,
'Cannot provide a checkedLink and a checked property or onChange event. ' +
'If you want to use checked or onChange, you probably don\'t want to ' +
'use checkedLink'
) : invariant(input.props.checked == null && input.props.onChange == null));
}
/**
* @param {SyntheticEvent} e change event to handle
*/
function _handleLinkedValueChange(e) {
/*jshint validthis:true */
this.props.valueLink.requestChange(e.target.value);
}
/**
* @param {SyntheticEvent} e change event to handle
*/
function _handleLinkedCheckChange(e) {
/*jshint validthis:true */
this.props.checkedLink.requestChange(e.target.checked);
}
/**
* Provide a linked `value` attribute for controlled forms. You should not use
* this outside of the ReactDOM controlled form components.
*/
var LinkedValueUtils = {
Mixin: {
propTypes: {
value: function(props, propName, componentName) {
if (!props[propName] ||
hasReadOnlyValue[props.type] ||
props.onChange ||
props.readOnly ||
props.disabled) {
return null;
}
return new Error(
'You provided a `value` prop to a form field without an ' +
'`onChange` handler. This will render a read-only field. If ' +
'the field should be mutable use `defaultValue`. Otherwise, ' +
'set either `onChange` or `readOnly`.'
);
},
checked: function(props, propName, componentName) {
if (!props[propName] ||
props.onChange ||
props.readOnly ||
props.disabled) {
return null;
}
return new Error(
'You provided a `checked` prop to a form field without an ' +
'`onChange` handler. This will render a read-only field. If ' +
'the field should be mutable use `defaultChecked`. Otherwise, ' +
'set either `onChange` or `readOnly`.'
);
},
onChange: ReactPropTypes.func
}
},
/**
* @param {ReactComponent} input Form component
* @return {*} current value of the input either from value prop or link.
*/
getValue: function(input) {
if (input.props.valueLink) {
_assertValueLink(input);
return input.props.valueLink.value;
}
return input.props.value;
},
/**
* @param {ReactComponent} input Form component
* @return {*} current checked status of the input either from checked prop
* or link.
*/
getChecked: function(input) {
if (input.props.checkedLink) {
_assertCheckedLink(input);
return input.props.checkedLink.value;
}
return input.props.checked;
},
/**
* @param {ReactComponent} input Form component
* @return {function} change callback either from onChange prop or link.
*/
getOnChange: function(input) {
if (input.props.valueLink) {
_assertValueLink(input);
return _handleLinkedValueChange;
} else if (input.props.checkedLink) {
_assertCheckedLink(input);
return _handleLinkedCheckChange;
}
return input.props.onChange;
}
};
module.exports = LinkedValueUtils;
}).call(this,require('_process'))
},{"./ReactPropTypes":225,"./invariant":290,"_process":138}],166:[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 LocalEventTrapMixin
*/
'use strict';
var ReactBrowserEventEmitter = require("./ReactBrowserEventEmitter");
var accumulateInto = require("./accumulateInto");
var forEachAccumulated = require("./forEachAccumulated");
var invariant = require("./invariant");
function remove(event) {
event.remove();
}
var LocalEventTrapMixin = {
trapBubbledEvent:function(topLevelType, handlerBaseName) {
("production" !== process.env.NODE_ENV ? invariant(this.isMounted(), 'Must be mounted to trap events') : invariant(this.isMounted()));
// If a component renders to null or if another component fatals and causes
// the state of the tree to be corrupted, `node` here can be null.
var node = this.getDOMNode();
("production" !== process.env.NODE_ENV ? invariant(
node,
'LocalEventTrapMixin.trapBubbledEvent(...): Requires node to be rendered.'
) : invariant(node));
var listener = ReactBrowserEventEmitter.trapBubbledEvent(
topLevelType,
handlerBaseName,
node
);
this._localEventListeners =
accumulateInto(this._localEventListeners, listener);
},
// trapCapturedEvent would look nearly identical. We don't implement that
// method because it isn't currently needed.
componentWillUnmount:function() {
if (this._localEventListeners) {
forEachAccumulated(this._localEventListeners, remove);
}
}
};
module.exports = LocalEventTrapMixin;
}).call(this,require('_process'))
},{"./ReactBrowserEventEmitter":172,"./accumulateInto":258,"./forEachAccumulated":275,"./invariant":290,"_process":138}],167:[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 MobileSafariClickEventPlugin
* @typechecks static-only
*/
'use strict';
var EventConstants = require("./EventConstants");
var emptyFunction = require("./emptyFunction");
var topLevelTypes = EventConstants.topLevelTypes;
/**
* Mobile Safari does not fire properly bubble click events on non-interactive
* elements, which means delegated click listeners do not fire. The workaround
* for this bug involves attaching an empty click listener on the target node.
*
* This particular plugin works around the bug by attaching an empty click
* listener on `touchstart` (which does fire on every element).
*/
var MobileSafariClickEventPlugin = {
eventTypes: 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 {*} An accumulation of synthetic events.
* @see {EventPluginHub.extractEvents}
*/
extractEvents: function(
topLevelType,
topLevelTarget,
topLevelTargetID,
nativeEvent) {
if (topLevelType === topLevelTypes.topTouchStart) {
var target = nativeEvent.target;
if (target && !target.onclick) {
target.onclick = emptyFunction;
}
}
}
};
module.exports = MobileSafariClickEventPlugin;
},{"./EventConstants":155,"./emptyFunction":269}],168:[function(require,module,exports){
/**
* 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 Object.assign
*/
// https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.assign
'use strict';
function assign(target, sources) {
if (target == null) {
throw new TypeError('Object.assign target cannot be null or undefined');
}
var to = Object(target);
var hasOwnProperty = Object.prototype.hasOwnProperty;
for (var nextIndex = 1; nextIndex < arguments.length; nextIndex++) {
var nextSource = arguments[nextIndex];
if (nextSource == null) {
continue;
}
var from = Object(nextSource);
// We don't currently support accessors nor proxies. Therefore this
// copy cannot throw. If we ever supported this then we must handle
// exceptions and side-effects. We don't support symbols so they won't
// be transferred.
for (var key in from) {
if (hasOwnProperty.call(from, key)) {
to[key] = from[key];
}
}
}
return to;
}
module.exports = assign;
},{}],169:[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 PooledClass
*/
'use strict';
var invariant = require("./invariant");
/**
* Static poolers. Several custom versions for each potential number of
* arguments. A completely generic pooler is easy to implement, but would
* require accessing the `arguments` object. In each of these, `this` refers to
* the Class itself, not an instance. If any others are needed, simply add them
* here, or in their own files.
*/
var oneArgumentPooler = function(copyFieldsFrom) {
var Klass = this;
if (Klass.instancePool.length) {
var instance = Klass.instancePool.pop();
Klass.call(instance, copyFieldsFrom);
return instance;
} else {
return new Klass(copyFieldsFrom);
}
};
var twoArgumentPooler = function(a1, a2) {
var Klass = this;
if (Klass.instancePool.length) {
var instance = Klass.instancePool.pop();
Klass.call(instance, a1, a2);
return instance;
} else {
return new Klass(a1, a2);
}
};
var threeArgumentPooler = function(a1, a2, a3) {
var Klass = this;
if (Klass.instancePool.length) {
var instance = Klass.instancePool.pop();
Klass.call(instance, a1, a2, a3);
return instance;
} else {
return new Klass(a1, a2, a3);
}
};
var fiveArgumentPooler = function(a1, a2, a3, a4, a5) {
var Klass = this;
if (Klass.instancePool.length) {
var instance = Klass.instancePool.pop();
Klass.call(instance, a1, a2, a3, a4, a5);
return instance;
} else {
return new Klass(a1, a2, a3, a4, a5);
}
};
var standardReleaser = function(instance) {
var Klass = this;
("production" !== process.env.NODE_ENV ? invariant(
instance instanceof Klass,
'Trying to release an instance into a pool of a different type.'
) : invariant(instance instanceof Klass));
if (instance.destructor) {
instance.destructor();
}
if (Klass.instancePool.length < Klass.poolSize) {
Klass.instancePool.push(instance);
}
};
var DEFAULT_POOL_SIZE = 10;
var DEFAULT_POOLER = oneArgumentPooler;
/**
* Augments `CopyConstructor` to be a poolable class, augmenting only the class
* itself (statically) not adding any prototypical fields. Any CopyConstructor
* you give this may have a `poolSize` property, and will look for a
* prototypical `destructor` on instances (optional).
*
* @param {Function} CopyConstructor Constructor that can be used to reset.
* @param {Function} pooler Customizable pooler.
*/
var addPoolingTo = function(CopyConstructor, pooler) {
var NewKlass = CopyConstructor;
NewKlass.instancePool = [];
NewKlass.getPooled = pooler || DEFAULT_POOLER;
if (!NewKlass.poolSize) {
NewKlass.poolSize = DEFAULT_POOL_SIZE;
}
NewKlass.release = standardReleaser;
return NewKlass;
};
var PooledClass = {
addPoolingTo: addPoolingTo,
oneArgumentPooler: oneArgumentPooler,
twoArgumentPooler: twoArgumentPooler,
threeArgumentPooler: threeArgumentPooler,
fiveArgumentPooler: fiveArgumentPooler
};
module.exports = PooledClass;
}).call(this,require('_process'))
},{"./invariant":290,"_process":138}],170:[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 React
*/
/* globals __REACT_DEVTOOLS_GLOBAL_HOOK__*/
'use strict';
var EventPluginUtils = require("./EventPluginUtils");
var ReactChildren = require("./ReactChildren");
var ReactComponent = require("./ReactComponent");
var ReactClass = require("./ReactClass");
var ReactContext = require("./ReactContext");
var ReactCurrentOwner = require("./ReactCurrentOwner");
var ReactElement = require("./ReactElement");
var ReactElementValidator = require("./ReactElementValidator");
var ReactDOM = require("./ReactDOM");
var ReactDOMTextComponent = require("./ReactDOMTextComponent");
var ReactDefaultInjection = require("./ReactDefaultInjection");
var ReactInstanceHandles = require("./ReactInstanceHandles");
var ReactMount = require("./ReactMount");
var ReactPerf = require("./ReactPerf");
var ReactPropTypes = require("./ReactPropTypes");
var ReactReconciler = require("./ReactReconciler");
var ReactServerRendering = require("./ReactServerRendering");
var assign = require("./Object.assign");
var findDOMNode = require("./findDOMNode");
var onlyChild = require("./onlyChild");
ReactDefaultInjection.inject();
var createElement = ReactElement.createElement;
var createFactory = ReactElement.createFactory;
var cloneElement = ReactElement.cloneElement;
if ("production" !== process.env.NODE_ENV) {
createElement = ReactElementValidator.createElement;
createFactory = ReactElementValidator.createFactory;
cloneElement = ReactElementValidator.cloneElement;
}
var render = ReactPerf.measure('React', 'render', ReactMount.render);
var React = {
Children: {
map: ReactChildren.map,
forEach: ReactChildren.forEach,
count: ReactChildren.count,
only: onlyChild
},
Component: ReactComponent,
DOM: ReactDOM,
PropTypes: ReactPropTypes,
initializeTouchEvents: function(shouldUseTouch) {
EventPluginUtils.useTouchEvents = shouldUseTouch;
},
createClass: ReactClass.createClass,
createElement: createElement,
cloneElement: cloneElement,
createFactory: createFactory,
createMixin: function(mixin) {
// Currently a noop. Will be used to validate and trace mixins.
return mixin;
},
constructAndRenderComponent: ReactMount.constructAndRenderComponent,
constructAndRenderComponentByID: ReactMount.constructAndRenderComponentByID,
findDOMNode: findDOMNode,
render: render,
renderToString: ReactServerRendering.renderToString,
renderToStaticMarkup: ReactServerRendering.renderToStaticMarkup,
unmountComponentAtNode: ReactMount.unmountComponentAtNode,
isValidElement: ReactElement.isValidElement,
withContext: ReactContext.withContext,
// Hook for JSX spread, don't use this for anything else.
__spread: assign
};
// Inject the runtime into a devtools global hook regardless of browser.
// Allows for debugging when the hook is injected on the page.
if (
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject === 'function') {
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject({
CurrentOwner: ReactCurrentOwner,
InstanceHandles: ReactInstanceHandles,
Mount: ReactMount,
Reconciler: ReactReconciler,
TextComponent: ReactDOMTextComponent
});
}
if ("production" !== process.env.NODE_ENV) {
var ExecutionEnvironment = require("./ExecutionEnvironment");
if (ExecutionEnvironment.canUseDOM && window.top === window.self) {
// If we're in Chrome, look for the devtools marker and provide a download
// link if not installed.
if (navigator.userAgent.indexOf('Chrome') > -1) {
if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
console.debug(
'Download the React DevTools for a better development experience: ' +
'https://fb.me/react-devtools'
);
}
}
var expectedFeatures = [
// shims
Array.isArray,
Array.prototype.every,
Array.prototype.forEach,
Array.prototype.indexOf,
Array.prototype.map,
Date.now,
Function.prototype.bind,
Object.keys,
String.prototype.split,
String.prototype.trim,
// shams
Object.create,
Object.freeze
];
for (var i = 0; i < expectedFeatures.length; i++) {
if (!expectedFeatures[i]) {
console.error(
'One or more ES5 shim/shams expected by React are not available: ' +
'https://fb.me/react-warning-polyfills'
);
break;
}
}
}
}
React.version = '0.13.3';
module.exports = React;
}).call(this,require('_process'))
},{"./EventPluginUtils":159,"./ExecutionEnvironment":161,"./Object.assign":168,"./ReactChildren":176,"./ReactClass":177,"./ReactComponent":178,"./ReactContext":183,"./ReactCurrentOwner":184,"./ReactDOM":185,"./ReactDOMTextComponent":196,"./ReactDefaultInjection":199,"./ReactElement":202,"./ReactElementValidator":203,"./ReactInstanceHandles":211,"./ReactMount":216,"./ReactPerf":221,"./ReactPropTypes":225,"./ReactReconciler":228,"./ReactServerRendering":231,"./findDOMNode":272,"./onlyChild":300,"_process":138}],171:[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 ReactBrowserComponentMixin
*/
'use strict';
var findDOMNode = require("./findDOMNode");
var ReactBrowserComponentMixin = {
/**
* Returns the DOM node rendered by this component.
*
* @return {DOMElement} The root node of this component.
* @final
* @protected
*/
getDOMNode: function() {
return findDOMNode(this);
}
};
module.exports = ReactBrowserComponentMixin;
},{"./findDOMNode":272}],172:[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 ReactBrowserEventEmitter
* @typechecks static-only
*/
'use strict';
var EventConstants = require("./EventConstants");
var EventPluginHub = require("./EventPluginHub");
var EventPluginRegistry = require("./EventPluginRegistry");
var ReactEventEmitterMixin = require("./ReactEventEmitterMixin");
var ViewportMetrics = require("./ViewportMetrics");
var assign = require("./Object.assign");
var isEventSupported = require("./isEventSupported");
/**
* Summary of `ReactBrowserEventEmitter` event handling:
*
* - Top-level delegation is used to trap most native browser events. This
* may only occur in the main thread and is the responsibility of
* ReactEventListener, which is injected and can therefore support pluggable
* event sources. This is the only work that occurs in the main thread.
*
* - We normalize and de-duplicate events to account for browser quirks. This
* may be done in the worker thread.
*
* - Forward these native events (with the associated top-level type used to
* trap it) to `EventPluginHub`, which in turn will ask plugins if they want
* to extract any synthetic events.
*
* - The `EventPluginHub` will then process each event by annotating them with
* "dispatches", a sequence of listeners and IDs that care about that event.
*
* - The `EventPluginHub` then dispatches the events.
*
* Overview of React and the event system:
*
* +------------+ .
* | DOM | .
* +------------+ .
* | .
* v .
* +------------+ .
* | ReactEvent | .
* | Listener | .
* +------------+ . +-----------+
* | . +--------+|SimpleEvent|
* | . | |Plugin |
* +-----|------+ . v +-----------+
* | | | . +--------------+ +------------+
* | +-----------.--->|EventPluginHub| | Event |
* | | . | | +-----------+ | Propagators|
* | ReactEvent | . | | |TapEvent | |------------|
* | Emitter | . | |<---+|Plugin | |other plugin|
* | | . | | +-----------+ | utilities |
* | +-----------.--->| | +------------+
* | | | . +--------------+
* +-----|------+ . ^ +-----------+
* | . | |Enter/Leave|
* + . +-------+|Plugin |
* +-------------+ . +-----------+
* | application | .
* |-------------| .
* | | .
* | | .
* +-------------+ .
* .
* React Core . General Purpose Event Plugin System
*/
var alreadyListeningTo = {};
var isMonitoringScrollValue = false;
var reactTopListenersCounter = 0;
// For events like 'submit' which don't consistently bubble (which we trap at a
// lower node than `document`), binding at `document` would cause duplicate
// events so we don't include them here
var topEventMapping = {
topBlur: 'blur',
topChange: 'change',
topClick: 'click',
topCompositionEnd: 'compositionend',
topCompositionStart: 'compositionstart',
topCompositionUpdate: 'compositionupdate',
topContextMenu: 'contextmenu',
topCopy: 'copy',
topCut: 'cut',
topDoubleClick: 'dblclick',
topDrag: 'drag',
topDragEnd: 'dragend',
topDragEnter: 'dragenter',
topDragExit: 'dragexit',
topDragLeave: 'dragleave',
topDragOver: 'dragover',
topDragStart: 'dragstart',
topDrop: 'drop',
topFocus: 'focus',
topInput: 'input',
topKeyDown: 'keydown',
topKeyPress: 'keypress',
topKeyUp: 'keyup',
topMouseDown: 'mousedown',
topMouseMove: 'mousemove',
topMouseOut: 'mouseout',
topMouseOver: 'mouseover',
topMouseUp: 'mouseup',
topPaste: 'paste',
topScroll: 'scroll',
topSelectionChange: 'selectionchange',
topTextInput: 'textInput',
topTouchCancel: 'touchcancel',
topTouchEnd: 'touchend',
topTouchMove: 'touchmove',
topTouchStart: 'touchstart',
topWheel: 'wheel'
};
/**
* To ensure no conflicts with other potential React instances on the page
*/
var topListenersIDKey = '_reactListenersID' + String(Math.random()).slice(2);
function getListeningForDocument(mountAt) {
// In IE8, `mountAt` is a host object and doesn't have `hasOwnProperty`
// directly.
if (!Object.prototype.hasOwnProperty.call(mountAt, topListenersIDKey)) {
mountAt[topListenersIDKey] = reactTopListenersCounter++;
alreadyListeningTo[mountAt[topListenersIDKey]] = {};
}
return alreadyListeningTo[mountAt[topListenersIDKey]];
}
/**
* `ReactBrowserEventEmitter` is used to attach top-level event listeners. For
* example:
*
* ReactBrowserEventEmitter.putListener('myID', 'onClick', myFunction);
*
* This would allocate a "registration" of `('onClick', myFunction)` on 'myID'.
*
* @internal
*/
var ReactBrowserEventEmitter = assign({}, ReactEventEmitterMixin, {
/**
* Injectable event backend
*/
ReactEventListener: null,
injection: {
/**
* @param {object} ReactEventListener
*/
injectReactEventListener: function(ReactEventListener) {
ReactEventListener.setHandleTopLevel(
ReactBrowserEventEmitter.handleTopLevel
);
ReactBrowserEventEmitter.ReactEventListener = ReactEventListener;
}
},
/**
* Sets whether or not any created callbacks should be enabled.
*
* @param {boolean} enabled True if callbacks should be enabled.
*/
setEnabled: function(enabled) {
if (ReactBrowserEventEmitter.ReactEventListener) {
ReactBrowserEventEmitter.ReactEventListener.setEnabled(enabled);
}
},
/**
* @return {boolean} True if callbacks are enabled.
*/
isEnabled: function() {
return !!(
(ReactBrowserEventEmitter.ReactEventListener && ReactBrowserEventEmitter.ReactEventListener.isEnabled())
);
},
/**
* We listen for bubbled touch events on the document object.
*
* Firefox v8.01 (and possibly others) exhibited strange behavior when
* mounting `onmousemove` events at some node that was not the document
* element. The symptoms were that if your mouse is not moving over something
* contained within that mount point (for example on the background) the
* top-level listeners for `onmousemove` won't be called. However, if you
* register the `mousemove` on the document object, then it will of course
* catch all `mousemove`s. This along with iOS quirks, justifies restricting
* top-level listeners to the document object only, at least for these
* movement types of events and possibly all events.
*
* @see http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
*
* Also, `keyup`/`keypress`/`keydown` do not bubble to the window on IE, but
* they bubble to document.
*
* @param {string} registrationName Name of listener (e.g. `onClick`).
* @param {object} contentDocumentHandle Document which owns the container
*/
listenTo: function(registrationName, contentDocumentHandle) {
var mountAt = contentDocumentHandle;
var isListening = getListeningForDocument(mountAt);
var dependencies = EventPluginRegistry.
registrationNameDependencies[registrationName];
var topLevelTypes = EventConstants.topLevelTypes;
for (var i = 0, l = dependencies.length; i < l; i++) {
var dependency = dependencies[i];
if (!(
(isListening.hasOwnProperty(dependency) && isListening[dependency])
)) {
if (dependency === topLevelTypes.topWheel) {
if (isEventSupported('wheel')) {
ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
topLevelTypes.topWheel,
'wheel',
mountAt
);
} else if (isEventSupported('mousewheel')) {
ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
topLevelTypes.topWheel,
'mousewheel',
mountAt
);
} else {
// Firefox needs to capture a different mouse scroll event.
// @see http://www.quirksmode.org/dom/events/tests/scroll.html
ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
topLevelTypes.topWheel,
'DOMMouseScroll',
mountAt
);
}
} else if (dependency === topLevelTypes.topScroll) {
if (isEventSupported('scroll', true)) {
ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(
topLevelTypes.topScroll,
'scroll',
mountAt
);
} else {
ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
topLevelTypes.topScroll,
'scroll',
ReactBrowserEventEmitter.ReactEventListener.WINDOW_HANDLE
);
}
} else if (dependency === topLevelTypes.topFocus ||
dependency === topLevelTypes.topBlur) {
if (isEventSupported('focus', true)) {
ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(
topLevelTypes.topFocus,
'focus',
mountAt
);
ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(
topLevelTypes.topBlur,
'blur',
mountAt
);
} else if (isEventSupported('focusin')) {
// IE has `focusin` and `focusout` events which bubble.
// @see http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html
ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
topLevelTypes.topFocus,
'focusin',
mountAt
);
ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
topLevelTypes.topBlur,
'focusout',
mountAt
);
}
// to make sure blur and focus event listeners are only attached once
isListening[topLevelTypes.topBlur] = true;
isListening[topLevelTypes.topFocus] = true;
} else if (topEventMapping.hasOwnProperty(dependency)) {
ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
dependency,
topEventMapping[dependency],
mountAt
);
}
isListening[dependency] = true;
}
}
},
trapBubbledEvent: function(topLevelType, handlerBaseName, handle) {
return ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
topLevelType,
handlerBaseName,
handle
);
},
trapCapturedEvent: function(topLevelType, handlerBaseName, handle) {
return ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(
topLevelType,
handlerBaseName,
handle
);
},
/**
* Listens to window scroll and resize events. We cache scroll values so that
* application code can access them without triggering reflows.
*
* NOTE: Scroll events do not bubble.
*
* @see http://www.quirksmode.org/dom/events/scroll.html
*/
ensureScrollValueMonitoring: function() {
if (!isMonitoringScrollValue) {
var refresh = ViewportMetrics.refreshScrollValues;
ReactBrowserEventEmitter.ReactEventListener.monitorScrollValue(refresh);
isMonitoringScrollValue = true;
}
},
eventNameDispatchConfigs: EventPluginHub.eventNameDispatchConfigs,
registrationNameModules: EventPluginHub.registrationNameModules,
putListener: EventPluginHub.putListener,
getListener: EventPluginHub.getListener,
deleteListener: EventPluginHub.deleteListener,
deleteAllListeners: EventPluginHub.deleteAllListeners
});
module.exports = ReactBrowserEventEmitter;
},{"./EventConstants":155,"./EventPluginHub":157,"./EventPluginRegistry":158,"./Object.assign":168,"./ReactEventEmitterMixin":206,"./ViewportMetrics":257,"./isEventSupported":291}],173:[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.
*
* @typechecks
* @providesModule ReactCSSTransitionGroup
*/
'use strict';
var React = require("./React");
var assign = require("./Object.assign");
var ReactTransitionGroup = React.createFactory(
require("./ReactTransitionGroup")
);
var ReactCSSTransitionGroupChild = React.createFactory(
require("./ReactCSSTransitionGroupChild")
);
var ReactCSSTransitionGroup = React.createClass({
displayName: 'ReactCSSTransitionGroup',
propTypes: {
transitionName: React.PropTypes.string.isRequired,
transitionAppear: React.PropTypes.bool,
transitionEnter: React.PropTypes.bool,
transitionLeave: React.PropTypes.bool
},
getDefaultProps: function() {
return {
transitionAppear: false,
transitionEnter: true,
transitionLeave: true
};
},
_wrapChild: function(child) {
// We need to provide this childFactory so that
// ReactCSSTransitionGroupChild can receive updates to name, enter, and
// leave while it is leaving.
return ReactCSSTransitionGroupChild(
{
name: this.props.transitionName,
appear: this.props.transitionAppear,
enter: this.props.transitionEnter,
leave: this.props.transitionLeave
},
child
);
},
render: function() {
return (
ReactTransitionGroup(
assign({}, this.props, {childFactory: this._wrapChild})
)
);
}
});
module.exports = ReactCSSTransitionGroup;
},{"./Object.assign":168,"./React":170,"./ReactCSSTransitionGroupChild":174,"./ReactTransitionGroup":237}],174:[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.
*
* @typechecks
* @providesModule ReactCSSTransitionGroupChild
*/
'use strict';
var React = require("./React");
var CSSCore = require("./CSSCore");
var ReactTransitionEvents = require("./ReactTransitionEvents");
var onlyChild = require("./onlyChild");
var warning = require("./warning");
// We don't remove the element from the DOM until we receive an animationend or
// transitionend event. If the user screws up and forgets to add an animation
// their node will be stuck in the DOM forever, so we detect if an animation
// does not start and if it doesn't, we just call the end listener immediately.
var TICK = 17;
var NO_EVENT_TIMEOUT = 5000;
var noEventListener = null;
if ("production" !== process.env.NODE_ENV) {
noEventListener = function() {
("production" !== process.env.NODE_ENV ? warning(
false,
'transition(): tried to perform an animation without ' +
'an animationend or transitionend event after timeout (' +
'%sms). You should either disable this ' +
'transition in JS or add a CSS animation/transition.',
NO_EVENT_TIMEOUT
) : null);
};
}
var ReactCSSTransitionGroupChild = React.createClass({
displayName: 'ReactCSSTransitionGroupChild',
transition: function(animationType, finishCallback) {
var node = this.getDOMNode();
var className = this.props.name + '-' + animationType;
var activeClassName = className + '-active';
var noEventTimeout = null;
var endListener = function(e) {
if (e && e.target !== node) {
return;
}
if ("production" !== process.env.NODE_ENV) {
clearTimeout(noEventTimeout);
}
CSSCore.removeClass(node, className);
CSSCore.removeClass(node, activeClassName);
ReactTransitionEvents.removeEndEventListener(node, endListener);
// Usually this optional callback is used for informing an owner of
// a leave animation and telling it to remove the child.
if (finishCallback) {
finishCallback();
}
};
ReactTransitionEvents.addEndEventListener(node, endListener);
CSSCore.addClass(node, className);
// Need to do this to actually trigger a transition.
this.queueClass(activeClassName);
if ("production" !== process.env.NODE_ENV) {
noEventTimeout = setTimeout(noEventListener, NO_EVENT_TIMEOUT);
}
},
queueClass: function(className) {
this.classNameQueue.push(className);
if (!this.timeout) {
this.timeout = setTimeout(this.flushClassNameQueue, TICK);
}
},
flushClassNameQueue: function() {
if (this.isMounted()) {
this.classNameQueue.forEach(
CSSCore.addClass.bind(CSSCore, this.getDOMNode())
);
}
this.classNameQueue.length = 0;
this.timeout = null;
},
componentWillMount: function() {
this.classNameQueue = [];
},
componentWillUnmount: function() {
if (this.timeout) {
clearTimeout(this.timeout);
}
},
componentWillAppear: function(done) {
if (this.props.appear) {
this.transition('appear', done);
} else {
done();
}
},
componentWillEnter: function(done) {
if (this.props.enter) {
this.transition('enter', done);
} else {
done();
}
},
componentWillLeave: function(done) {
if (this.props.leave) {
this.transition('leave', done);
} else {
done();
}
},
render: function() {
return onlyChild(this.props.children);
}
});
module.exports = ReactCSSTransitionGroupChild;
}).call(this,require('_process'))
},{"./CSSCore":143,"./React":170,"./ReactTransitionEvents":236,"./onlyChild":300,"./warning":311,"_process":138}],175:[function(require,module,exports){
/**
* 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 ReactChildReconciler
* @typechecks static-only
*/
'use strict';
var ReactReconciler = require("./ReactReconciler");
var flattenChildren = require("./flattenChildren");
var instantiateReactComponent = require("./instantiateReactComponent");
var shouldUpdateReactComponent = require("./shouldUpdateReactComponent");
/**
* ReactChildReconciler provides helpers for initializing or updating a set of
* children. Its output is suitable for passing it onto ReactMultiChild which
* does diffed reordering and insertion.
*/
var ReactChildReconciler = {
/**
* Generates a "mount image" for each of the supplied children. In the case
* of `ReactDOMComponent`, a mount image is a string of markup.
*
* @param {?object} nestedChildNodes Nested child maps.
* @return {?object} A set of child instances.
* @internal
*/
instantiateChildren: function(nestedChildNodes, transaction, context) {
var children = flattenChildren(nestedChildNodes);
for (var name in children) {
if (children.hasOwnProperty(name)) {
var child = children[name];
// The rendered children must be turned into instances as they're
// mounted.
var childInstance = instantiateReactComponent(child, null);
children[name] = childInstance;
}
}
return children;
},
/**
* Updates the rendered children and returns a new set of children.
*
* @param {?object} prevChildren Previously initialized set of children.
* @param {?object} nextNestedChildNodes Nested child maps.
* @param {ReactReconcileTransaction} transaction
* @param {object} context
* @return {?object} A new set of child instances.
* @internal
*/
updateChildren: function(
prevChildren,
nextNestedChildNodes,
transaction,
context) {
// We currently don't have a way to track moves here but if we use iterators
// instead of for..in we can zip the iterators and check if an item has
// moved.
// TODO: If nothing has changed, return the prevChildren object so that we
// can quickly bailout if nothing has changed.
var nextChildren = flattenChildren(nextNestedChildNodes);
if (!nextChildren && !prevChildren) {
return null;
}
var name;
for (name in nextChildren) {
if (!nextChildren.hasOwnProperty(name)) {
continue;
}
var prevChild = prevChildren && prevChildren[name];
var prevElement = prevChild && prevChild._currentElement;
var nextElement = nextChildren[name];
if (shouldUpdateReactComponent(prevElement, nextElement)) {
ReactReconciler.receiveComponent(
prevChild, nextElement, transaction, context
);
nextChildren[name] = prevChild;
} else {
if (prevChild) {
ReactReconciler.unmountComponent(prevChild, name);
}
// The child must be instantiated before it's mounted.
var nextChildInstance = instantiateReactComponent(
nextElement,
null
);
nextChildren[name] = nextChildInstance;
}
}
// Unmount children that are no longer present.
for (name in prevChildren) {
if (prevChildren.hasOwnProperty(name) &&
!(nextChildren && nextChildren.hasOwnProperty(name))) {
ReactReconciler.unmountComponent(prevChildren[name]);
}
}
return nextChildren;
},
/**
* Unmounts all rendered children. This should be used to clean up children
* when this component is unmounted.
*
* @param {?object} renderedChildren Previously initialized set of children.
* @internal
*/
unmountChildren: function(renderedChildren) {
for (var name in renderedChildren) {
var renderedChild = renderedChildren[name];
ReactReconciler.unmountComponent(renderedChild);
}
}
};
module.exports = ReactChildReconciler;
},{"./ReactReconciler":228,"./flattenChildren":273,"./instantiateReactComponent":289,"./shouldUpdateReactComponent":307}],176:[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 ReactChildren
*/
'use strict';
var PooledClass = require("./PooledClass");
var ReactFragment = require("./ReactFragment");
var traverseAllChildren = require("./traverseAllChildren");
var warning = require("./warning");
var twoArgumentPooler = PooledClass.twoArgumentPooler;
var threeArgumentPooler = PooledClass.threeArgumentPooler;
/**
* PooledClass representing the bookkeeping associated with performing a child
* traversal. Allows avoiding binding callbacks.
*
* @constructor ForEachBookKeeping
* @param {!function} forEachFunction Function to perform traversal with.
* @param {?*} forEachContext Context to perform context with.
*/
function ForEachBookKeeping(forEachFunction, forEachContext) {
this.forEachFunction = forEachFunction;
this.forEachContext = forEachContext;
}
PooledClass.addPoolingTo(ForEachBookKeeping, twoArgumentPooler);
function forEachSingleChild(traverseContext, child, name, i) {
var forEachBookKeeping = traverseContext;
forEachBookKeeping.forEachFunction.call(
forEachBookKeeping.forEachContext, child, i);
}
/**
* Iterates through children that are typically specified as `props.children`.
*
* The provided forEachFunc(child, index) will be called for each
* leaf child.
*
* @param {?*} children Children tree container.
* @param {function(*, int)} forEachFunc.
* @param {*} forEachContext Context for forEachContext.
*/
function forEachChildren(children, forEachFunc, forEachContext) {
if (children == null) {
return children;
}
var traverseContext =
ForEachBookKeeping.getPooled(forEachFunc, forEachContext);
traverseAllChildren(children, forEachSingleChild, traverseContext);
ForEachBookKeeping.release(traverseContext);
}
/**
* PooledClass representing the bookkeeping associated with performing a child
* mapping. Allows avoiding binding callbacks.
*
* @constructor MapBookKeeping
* @param {!*} mapResult Object containing the ordered map of results.
* @param {!function} mapFunction Function to perform mapping with.
* @param {?*} mapContext Context to perform mapping with.
*/
function MapBookKeeping(mapResult, mapFunction, mapContext) {
this.mapResult = mapResult;
this.mapFunction = mapFunction;
this.mapContext = mapContext;
}
PooledClass.addPoolingTo(MapBookKeeping, threeArgumentPooler);
function mapSingleChildIntoContext(traverseContext, child, name, i) {
var mapBookKeeping = traverseContext;
var mapResult = mapBookKeeping.mapResult;
var keyUnique = !mapResult.hasOwnProperty(name);
if ("production" !== process.env.NODE_ENV) {
("production" !== process.env.NODE_ENV ? warning(
keyUnique,
'ReactChildren.map(...): Encountered two children with the same key, ' +
'`%s`. Child keys must be unique; when two children share a key, only ' +
'the first child will be used.',
name
) : null);
}
if (keyUnique) {
var mappedChild =
mapBookKeeping.mapFunction.call(mapBookKeeping.mapContext, child, i);
mapResult[name] = mappedChild;
}
}
/**
* Maps children that are typically specified as `props.children`.
*
* The provided mapFunction(child, key, index) will be called for each
* leaf child.
*
* TODO: This may likely break any calls to `ReactChildren.map` that were
* previously relying on the fact that we guarded against null children.
*
* @param {?*} children Children tree container.
* @param {function(*, int)} mapFunction.
* @param {*} mapContext Context for mapFunction.
* @return {object} Object containing the ordered map of results.
*/
function mapChildren(children, func, context) {
if (children == null) {
return children;
}
var mapResult = {};
var traverseContext = MapBookKeeping.getPooled(mapResult, func, context);
traverseAllChildren(children, mapSingleChildIntoContext, traverseContext);
MapBookKeeping.release(traverseContext);
return ReactFragment.create(mapResult);
}
function forEachSingleChildDummy(traverseContext, child, name, i) {
return null;
}
/**
* Count the number of children that are typically specified as
* `props.children`.
*
* @param {?*} children Children tree container.
* @return {number} The number of children.
*/
function countChildren(children, context) {
return traverseAllChildren(children, forEachSingleChildDummy, null);
}
var ReactChildren = {
forEach: forEachChildren,
map: mapChildren,
count: countChildren
};
module.exports = ReactChildren;
}).call(this,require('_process'))
},{"./PooledClass":169,"./ReactFragment":208,"./traverseAllChildren":309,"./warning":311,"_process":138}],177:[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 ReactClass
*/
'use strict';
var ReactComponent = require("./ReactComponent");
var ReactCurrentOwner = require("./ReactCurrentOwner");
var ReactElement = require("./ReactElement");
var ReactErrorUtils = require("./ReactErrorUtils");
var ReactInstanceMap = require("./ReactInstanceMap");
var ReactLifeCycle = require("./ReactLifeCycle");
var ReactPropTypeLocations = require("./ReactPropTypeLocations");
var ReactPropTypeLocationNames = require("./ReactPropTypeLocationNames");
var ReactUpdateQueue = require("./ReactUpdateQueue");
var assign = require("./Object.assign");
var invariant = require("./invariant");
var keyMirror = require("./keyMirror");
var keyOf = require("./keyOf");
var warning = require("./warning");
var MIXINS_KEY = keyOf({mixins: null});
/**
* Policies that describe methods in `ReactClassInterface`.
*/
var SpecPolicy = keyMirror({
/**
* These methods may be defined only once by the class specification or mixin.
*/
DEFINE_ONCE: null,
/**
* These methods may be defined by both the class specification and mixins.
* Subsequent definitions will be chained. These methods must return void.
*/
DEFINE_MANY: null,
/**
* These methods are overriding the base class.
*/
OVERRIDE_BASE: null,
/**
* These methods are similar to DEFINE_MANY, except we assume they return
* objects. We try to merge the keys of the return values of all the mixed in
* functions. If there is a key conflict we throw.
*/
DEFINE_MANY_MERGED: null
});
var injectedMixins = [];
/**
* Composite components are higher-level components that compose other composite
* or native components.
*
* To create a new type of `ReactClass`, pass a specification of
* your new class to `React.createClass`. The only requirement of your class
* specification is that you implement a `render` method.
*
* var MyComponent = React.createClass({
* render: function() {
* return <div>Hello World</div>;
* }
* });
*
* 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 <div>Hello, {name}!</div>;
* }
*
* @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: https://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":168,"./ReactComponent":178,"./ReactCurrentOwner":184,"./ReactElement":202,"./ReactErrorUtils":205,"./ReactInstanceMap":212,"./ReactLifeCycle":213,"./ReactPropTypeLocationNames":223,"./ReactPropTypeLocations":224,"./ReactUpdateQueue":238,"./invariant":290,"./keyMirror":296,"./keyOf":297,"./warning":311,"_process":138}],178:[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',
'Use React.findDOMNode(component) instead.'
],
isMounted: [
'isMounted',
'Instead, make sure to clean up subscriptions and pending requests in ' +
'componentWillUnmount to prevent memory leaks.'
],
replaceProps: [
'replaceProps',
'Instead, call React.render again at the top level.'
],
replaceState: [
'replaceState',
'Refactor your code to use setState instead (see ' +
'https://github.com/facebook/react/issues/3236).'
],
setProps: [
'setProps',
'Instead, call React.render again at the top level.'
]
};
var defineDeprecationWarning = function(methodName, info) {
try {
Object.defineProperty(ReactComponent.prototype, methodName, {
get: function() {
("production" !== process.env.NODE_ENV ? warning(
false,
'%s(...) is deprecated in plain JavaScript React classes. %s',
info[0],
info[1]
) : 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":238,"./invariant":290,"./warning":311,"_process":138}],179:[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":189,"./ReactMount":216}],180:[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":290,"_process":138}],181:[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 <div className={this.props.className}>foo</div>;
* }
* });
*
* 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":306}],182:[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 childContext;
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);
}
}
childContext = this._getValidatedChildContext(context);
renderedElement = this._renderValidatedComponent(childContext);
} finally {
ReactLifeCycle.currentlyMountingInstance = previouslyMounting;
}
this._renderedComponent = this._instantiateReactComponent(
renderedElement,
this._currentElement.type // The wrapping type
);
var markup = ReactReconciler.mountComponent(
this._renderedComponent,
rootID,
transaction,
this._mergeChildContext(context, childContext)
);
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
*/
_getValidatedChildContext: 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 childContext;
}
return null;
},
_mergeChildContext: function(currentContext, childContext) {
if (childContext) {
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;
}
if (replace && queue.length === 1) {
return queue[0];
}
var nextState = assign({}, replace ? queue[0] : inst.state);
for (var i = replace ? 1 : 0; i < queue.length; i++) {
var partial = queue[i];
assign(
nextState,
typeof partial === 'function' ?
partial.call(inst, nextState, props, context) :
partial
);
}
return nextState;
},
/**
* Merges new props and state, notifies delegate methods of update and
* performs update.
*
* @param {ReactElement} nextElement Next element
* @param {object} nextProps Next public object to set as properties.
* @param {?object} nextState Next object to set as state.
* @param {?object} nextContext Next public object to set as context.
* @param {ReactReconcileTransaction} transaction
* @param {?object} unmaskedContext
* @private
*/
_performComponentUpdate: function(
nextElement,
nextProps,
nextState,
nextContext,
transaction,
unmaskedContext
) {
var 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 childContext = this._getValidatedChildContext();
var nextRenderedElement = this._renderValidatedComponent(childContext);
if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) {
ReactReconciler.receiveComponent(
prevComponentInstance,
nextRenderedElement,
transaction,
this._mergeChildContext(context, childContext)
);
} 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._mergeChildContext(context, childContext)
);
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(childContext) {
var renderedComponent;
var previousContext = ReactContext.current;
ReactContext.current = this._mergeChildContext(
this._currentElement._context,
childContext
);
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":168,"./ReactComponentEnvironment":180,"./ReactContext":183,"./ReactCurrentOwner":184,"./ReactElement":202,"./ReactElementValidator":203,"./ReactInstanceMap":212,"./ReactLifeCycle":213,"./ReactNativeComponent":219,"./ReactPerf":221,"./ReactPropTypeLocationNames":223,"./ReactPropTypeLocations":224,"./ReactReconciler":228,"./ReactUpdates":239,"./emptyObject":270,"./invariant":290,"./shouldUpdateReactComponent":307,"./warning":311,"_process":138}],183:[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 <div>{children}</div>;
* }
*
* @param {object} newContext New context to merge into the existing context
* @param {function} scopedCallback Callback to run with the new context
* @return {ReactComponent|array<ReactComponent>}
*/
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":168,"./emptyObject":270,"./warning":311,"_process":138}],184:[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;
},{}],185:[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',
clipPath: 'clipPath',
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":202,"./ReactElementValidator":203,"./mapObject":298,"_process":138}],186:[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 <button> native component that does not receive mouse events
* when `disabled` is set.
*/
var ReactDOMButton = ReactClass.createClass({
displayName: 'ReactDOMButton',
tagName: 'BUTTON',
mixins: [AutoFocusMixin, ReactBrowserComponentMixin],
render: function() {
var props = {};
// Copy the props; except the mouse listeners if we're disabled
for (var key in this.props) {
if (this.props.hasOwnProperty(key) &&
(!this.props.disabled || !mouseListenerNames[key])) {
props[key] = this.props[key];
}
}
return button(props, this.props.children);
}
});
module.exports = ReactDOMButton;
},{"./AutoFocusMixin":141,"./ReactBrowserComponentMixin":171,"./ReactClass":177,"./ReactElement":202,"./keyMirror":296}],187:[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 ReactDOMComponent
* @typechecks static-only
*/
/* global hasOwnProperty:true */
'use strict';
var CSSPropertyOperations = require("./CSSPropertyOperations");
var DOMProperty = require("./DOMProperty");
var DOMPropertyOperations = require("./DOMPropertyOperations");
var ReactBrowserEventEmitter = require("./ReactBrowserEventEmitter");
var ReactComponentBrowserEnvironment =
require("./ReactComponentBrowserEnvironment");
var ReactMount = require("./ReactMount");
var ReactMultiChild = require("./ReactMultiChild");
var ReactPerf = require("./ReactPerf");
var assign = require("./Object.assign");
var escapeTextContentForBrowser = require("./escapeTextContentForBrowser");
var invariant = require("./invariant");
var isEventSupported = require("./isEventSupported");
var keyOf = require("./keyOf");
var warning = require("./warning");
var deleteListener = ReactBrowserEventEmitter.deleteListener;
var listenTo = ReactBrowserEventEmitter.listenTo;
var registrationNameModules = ReactBrowserEventEmitter.registrationNameModules;
// For quickly matching children type, to test if can be treated as content.
var CONTENT_TYPES = {'string': true, 'number': true};
var STYLE = keyOf({style: null});
var ELEMENT_NODE_TYPE = 1;
/**
* Optionally injectable operations for mutating the DOM
*/
var BackendIDOperations = null;
/**
* @param {?object} props
*/
function assertValidProps(props) {
if (!props) {
return;
}
// Note the use of `==` which checks for null or undefined.
if (props.dangerouslySetInnerHTML != null) {
("production" !== process.env.NODE_ENV ? invariant(
props.children == null,
'Can only set one of `children` or `props.dangerouslySetInnerHTML`.'
) : invariant(props.children == null));
("production" !== process.env.NODE_ENV ? invariant(
typeof props.dangerouslySetInnerHTML === 'object' &&
'__html' in props.dangerouslySetInnerHTML,
'`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
'Please visit https://fb.me/react-invariant-dangerously-set-inner-html ' +
'for more information.'
) : invariant(typeof props.dangerouslySetInnerHTML === 'object' &&
'__html' in props.dangerouslySetInnerHTML));
}
if ("production" !== process.env.NODE_ENV) {
("production" !== process.env.NODE_ENV ? warning(
props.innerHTML == null,
'Directly setting property `innerHTML` is not permitted. ' +
'For more information, lookup documentation on `dangerouslySetInnerHTML`.'
) : null);
("production" !== process.env.NODE_ENV ? warning(
!props.contentEditable || props.children == null,
'A component is `contentEditable` and contains `children` managed by ' +
'React. It is now your responsibility to guarantee that none of ' +
'those nodes are unexpectedly modified or duplicated. This is ' +
'probably not intentional.'
) : null);
}
("production" !== process.env.NODE_ENV ? invariant(
props.style == null || typeof props.style === 'object',
'The `style` prop expects a mapping from style properties to values, ' +
'not a string. For example, style={{marginRight: spacing + \'em\'}} when ' +
'using JSX.'
) : invariant(props.style == null || typeof props.style === 'object'));
}
function putListener(id, registrationName, listener, transaction) {
if ("production" !== process.env.NODE_ENV) {
// IE8 has no API for event capturing and the `onScroll` event doesn't
// bubble.
("production" !== process.env.NODE_ENV ? warning(
registrationName !== 'onScroll' || isEventSupported('scroll', true),
'This browser doesn\'t support the `onScroll` event'
) : null);
}
var container = ReactMount.findReactContainerForID(id);
if (container) {
var doc = container.nodeType === ELEMENT_NODE_TYPE ?
container.ownerDocument :
container;
listenTo(registrationName, doc);
}
transaction.getPutListenerQueue().enqueuePutListener(
id,
registrationName,
listener
);
}
// For HTML, certain tags should omit their close tag. We keep a whitelist for
// those special cased tags.
var omittedCloseTags = {
'area': true,
'base': true,
'br': true,
'col': true,
'embed': true,
'hr': true,
'img': true,
'input': true,
'keygen': true,
'link': true,
'meta': true,
'param': true,
'source': true,
'track': true,
'wbr': true
// NOTE: menuitem's close tag should be omitted, but that causes problems.
};
// We accept any tag to be rendered but since this gets injected into abitrary
// HTML, we want to make sure that it's a safe tag.
// http://www.w3.org/TR/REC-xml/#NT-Name
var VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\.\-\d]*$/; // Simplified subset
var validatedTagCache = {};
var hasOwnProperty = {}.hasOwnProperty;
function validateDangerousTag(tag) {
if (!hasOwnProperty.call(validatedTagCache, tag)) {
("production" !== process.env.NODE_ENV ? invariant(VALID_TAG_REGEX.test(tag), 'Invalid tag: %s', tag) : invariant(VALID_TAG_REGEX.test(tag)));
validatedTagCache[tag] = true;
}
}
/**
* Creates a new React class that is idempotent and capable of containing other
* React components. It accepts event listeners and DOM properties that are
* valid according to `DOMProperty`.
*
* - Event listeners: `onClick`, `onMouseDown`, etc.
* - DOM properties: `className`, `name`, `title`, etc.
*
* The `style` property functions differently from the DOM API. It accepts an
* object mapping of style properties to values.
*
* @constructor ReactDOMComponent
* @extends ReactMultiChild
*/
function ReactDOMComponent(tag) {
validateDangerousTag(tag);
this._tag = tag;
this._renderedChildren = null;
this._previousStyleCopy = null;
this._rootNodeID = null;
}
ReactDOMComponent.displayName = 'ReactDOMComponent';
ReactDOMComponent.Mixin = {
construct: function(element) {
this._currentElement = element;
},
/**
* Generates root tag markup then recurses. This method has side effects and
* is not idempotent.
*
* @internal
* @param {string} rootID The root DOM ID for this node.
* @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
* @return {string} The computed markup.
*/
mountComponent: function(rootID, transaction, context) {
this._rootNodeID = rootID;
assertValidProps(this._currentElement.props);
var closeTag = omittedCloseTags[this._tag] ? '' : '</' + this._tag + '>';
return (
this._createOpenTagMarkupAndPutListeners(transaction) +
this._createContentMarkup(transaction, context) +
closeTag
);
},
/**
* Creates markup for the open tag and all attributes.
*
* This method has side effects because events get registered.
*
* Iterating over object properties is faster than iterating over arrays.
* @see http://jsperf.com/obj-vs-arr-iteration
*
* @private
* @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
* @return {string} Markup of opening tag.
*/
_createOpenTagMarkupAndPutListeners: function(transaction) {
var props = this._currentElement.props;
var ret = '<' + this._tag;
for (var propKey in props) {
if (!props.hasOwnProperty(propKey)) {
continue;
}
var propValue = props[propKey];
if (propValue == null) {
continue;
}
if (registrationNameModules.hasOwnProperty(propKey)) {
putListener(this._rootNodeID, propKey, propValue, transaction);
} else {
if (propKey === STYLE) {
if (propValue) {
propValue = this._previousStyleCopy = assign({}, props.style);
}
propValue = CSSPropertyOperations.createMarkupForStyles(propValue);
}
var markup =
DOMPropertyOperations.createMarkupForProperty(propKey, propValue);
if (markup) {
ret += ' ' + markup;
}
}
}
// For static pages, no need to put React ID and checksum. Saves lots of
// bytes.
if (transaction.renderToStaticMarkup) {
return ret + '>';
}
var markupForID = DOMPropertyOperations.createMarkupForID(this._rootNodeID);
return ret + ' ' + markupForID + '>';
},
/**
* Creates markup for the content between the tags.
*
* @private
* @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
* @param {object} context
* @return {string} Content markup.
*/
_createContentMarkup: function(transaction, context) {
var prefix = '';
if (this._tag === 'listing' ||
this._tag === 'pre' ||
this._tag === 'textarea') {
// Add an initial newline because browsers ignore the first newline in
// a <listing>, <pre>, or <textarea> as an "authoring convenience" -- see
// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody.
prefix = '\n';
}
var props = this._currentElement.props;
// Intentional use of != to avoid catching zero/false.
var innerHTML = props.dangerouslySetInnerHTML;
if (innerHTML != null) {
if (innerHTML.__html != null) {
return prefix + innerHTML.__html;
}
} else {
var contentToUse =
CONTENT_TYPES[typeof props.children] ? props.children : null;
var childrenToUse = contentToUse != null ? null : props.children;
if (contentToUse != null) {
return prefix + escapeTextContentForBrowser(contentToUse);
} else if (childrenToUse != null) {
var mountImages = this.mountChildren(
childrenToUse,
transaction,
context
);
return prefix + mountImages.join('');
}
}
return prefix;
},
receiveComponent: function(nextElement, transaction, context) {
var prevElement = this._currentElement;
this._currentElement = nextElement;
this.updateComponent(transaction, prevElement, nextElement, context);
},
/**
* Updates a native DOM component after it has already been allocated and
* attached to the DOM. Reconciles the root DOM node, then recurses.
*
* @param {ReactReconcileTransaction} transaction
* @param {ReactElement} prevElement
* @param {ReactElement} nextElement
* @internal
* @overridable
*/
updateComponent: function(transaction, prevElement, nextElement, context) {
assertValidProps(this._currentElement.props);
this._updateDOMProperties(prevElement.props, transaction);
this._updateDOMChildren(prevElement.props, transaction, context);
},
/**
* Reconciles the properties by detecting differences in property values and
* updating the DOM as necessary. This function is probably the single most
* critical path for performance optimization.
*
* TODO: Benchmark whether checking for changed values in memory actually
* improves performance (especially statically positioned elements).
* TODO: Benchmark the effects of putting this at the top since 99% of props
* do not change for a given reconciliation.
* TODO: Benchmark areas that can be improved with caching.
*
* @private
* @param {object} lastProps
* @param {ReactReconcileTransaction} transaction
*/
_updateDOMProperties: function(lastProps, transaction) {
var nextProps = this._currentElement.props;
var propKey;
var styleName;
var styleUpdates;
for (propKey in lastProps) {
if (nextProps.hasOwnProperty(propKey) ||
!lastProps.hasOwnProperty(propKey)) {
continue;
}
if (propKey === STYLE) {
var lastStyle = this._previousStyleCopy;
for (styleName in lastStyle) {
if (lastStyle.hasOwnProperty(styleName)) {
styleUpdates = styleUpdates || {};
styleUpdates[styleName] = '';
}
}
this._previousStyleCopy = null;
} else if (registrationNameModules.hasOwnProperty(propKey)) {
deleteListener(this._rootNodeID, propKey);
} else if (
DOMProperty.isStandardName[propKey] ||
DOMProperty.isCustomAttribute(propKey)) {
BackendIDOperations.deletePropertyByID(
this._rootNodeID,
propKey
);
}
}
for (propKey in nextProps) {
var nextProp = nextProps[propKey];
var lastProp = propKey === STYLE ?
this._previousStyleCopy :
lastProps[propKey];
if (!nextProps.hasOwnProperty(propKey) || nextProp === lastProp) {
continue;
}
if (propKey === STYLE) {
if (nextProp) {
nextProp = this._previousStyleCopy = assign({}, nextProp);
} else {
this._previousStyleCopy = null;
}
if (lastProp) {
// Unset styles on `lastProp` but not on `nextProp`.
for (styleName in lastProp) {
if (lastProp.hasOwnProperty(styleName) &&
(!nextProp || !nextProp.hasOwnProperty(styleName))) {
styleUpdates = styleUpdates || {};
styleUpdates[styleName] = '';
}
}
// Update styles that changed since `lastProp`.
for (styleName in nextProp) {
if (nextProp.hasOwnProperty(styleName) &&
lastProp[styleName] !== nextProp[styleName]) {
styleUpdates = styleUpdates || {};
styleUpdates[styleName] = nextProp[styleName];
}
}
} else {
// Relies on `updateStylesByID` not mutating `styleUpdates`.
styleUpdates = nextProp;
}
} else if (registrationNameModules.hasOwnProperty(propKey)) {
putListener(this._rootNodeID, propKey, nextProp, transaction);
} else if (
DOMProperty.isStandardName[propKey] ||
DOMProperty.isCustomAttribute(propKey)) {
BackendIDOperations.updatePropertyByID(
this._rootNodeID,
propKey,
nextProp
);
}
}
if (styleUpdates) {
BackendIDOperations.updateStylesByID(
this._rootNodeID,
styleUpdates
);
}
},
/**
* Reconciles the children with the various properties that affect the
* children content.
*
* @param {object} lastProps
* @param {ReactReconcileTransaction} transaction
*/
_updateDOMChildren: function(lastProps, transaction, context) {
var nextProps = this._currentElement.props;
var lastContent =
CONTENT_TYPES[typeof lastProps.children] ? lastProps.children : null;
var nextContent =
CONTENT_TYPES[typeof nextProps.children] ? nextProps.children : null;
var lastHtml =
lastProps.dangerouslySetInnerHTML &&
lastProps.dangerouslySetInnerHTML.__html;
var nextHtml =
nextProps.dangerouslySetInnerHTML &&
nextProps.dangerouslySetInnerHTML.__html;
// Note the use of `!=` which checks for null or undefined.
var lastChildren = lastContent != null ? null : lastProps.children;
var nextChildren = nextContent != null ? null : nextProps.children;
// If we're switching from children to content/html or vice versa, remove
// the old content
var lastHasContentOrHtml = lastContent != null || lastHtml != null;
var nextHasContentOrHtml = nextContent != null || nextHtml != null;
if (lastChildren != null && nextChildren == null) {
this.updateChildren(null, transaction, context);
} else if (lastHasContentOrHtml && !nextHasContentOrHtml) {
this.updateTextContent('');
}
if (nextContent != null) {
if (lastContent !== nextContent) {
this.updateTextContent('' + nextContent);
}
} else if (nextHtml != null) {
if (lastHtml !== nextHtml) {
BackendIDOperations.updateInnerHTMLByID(
this._rootNodeID,
nextHtml
);
}
} else if (nextChildren != null) {
this.updateChildren(nextChildren, transaction, context);
}
},
/**
* Destroys all event registrations for this instance. Does not remove from
* the DOM. That must be done by the parent.
*
* @internal
*/
unmountComponent: function() {
this.unmountChildren();
ReactBrowserEventEmitter.deleteAllListeners(this._rootNodeID);
ReactComponentBrowserEnvironment.unmountIDFromEnvironment(this._rootNodeID);
this._rootNodeID = null;
}
};
ReactPerf.measureMethods(ReactDOMComponent, 'ReactDOMComponent', {
mountComponent: 'mountComponent',
updateComponent: 'updateComponent'
});
assign(
ReactDOMComponent.prototype,
ReactDOMComponent.Mixin,
ReactMultiChild.Mixin
);
ReactDOMComponent.injection = {
injectIDOperations: function(IDOperations) {
ReactDOMComponent.BackendIDOperations = BackendIDOperations = IDOperations;
}
};
module.exports = ReactDOMComponent;
}).call(this,require('_process'))
},{"./CSSPropertyOperations":145,"./DOMProperty":150,"./DOMPropertyOperations":151,"./Object.assign":168,"./ReactBrowserEventEmitter":172,"./ReactComponentBrowserEnvironment":179,"./ReactMount":216,"./ReactMultiChild":217,"./ReactPerf":221,"./escapeTextContentForBrowser":271,"./invariant":290,"./isEventSupported":291,"./keyOf":297,"./warning":311,"_process":138}],188:[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 ReactDOMForm
*/
'use strict';
var EventConstants = require("./EventConstants");
var LocalEventTrapMixin = require("./LocalEventTrapMixin");
var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
var ReactClass = require("./ReactClass");
var ReactElement = require("./ReactElement");
var form = ReactElement.createFactory('form');
/**
* Since onSubmit doesn't bubble OR capture on the top level in IE8, we need
* to capture it on the <form> element itself. There are lots of hacks we could
* do to accomplish this, but the most reliable is to make <form> a
* composite component and use `componentDidMount` to attach the event handlers.
*/
var ReactDOMForm = ReactClass.createClass({
displayName: 'ReactDOMForm',
tagName: 'FORM',
mixins: [ReactBrowserComponentMixin, LocalEventTrapMixin],
render: function() {
// TODO: Instead of using `ReactDOM` directly, we should use JSX. However,
// `jshint` fails to parse JSX so in order for linting to work in the open
// source repo, we need to just use `ReactDOM.form`.
return form(this.props);
},
componentDidMount: function() {
this.trapBubbledEvent(EventConstants.topLevelTypes.topReset, 'reset');
this.trapBubbledEvent(EventConstants.topLevelTypes.topSubmit, 'submit');
}
});
module.exports = ReactDOMForm;
},{"./EventConstants":155,"./LocalEventTrapMixin":166,"./ReactBrowserComponentMixin":171,"./ReactClass":177,"./ReactElement":202}],189:[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 ReactDOMIDOperations
* @typechecks static-only
*/
/*jslint evil: true */
'use strict';
var CSSPropertyOperations = require("./CSSPropertyOperations");
var DOMChildrenOperations = require("./DOMChildrenOperations");
var DOMPropertyOperations = require("./DOMPropertyOperations");
var ReactMount = require("./ReactMount");
var ReactPerf = require("./ReactPerf");
var invariant = require("./invariant");
var setInnerHTML = require("./setInnerHTML");
/**
* Errors for properties that should not be updated with `updatePropertyById()`.
*
* @type {object}
* @private
*/
var INVALID_PROPERTY_ERRORS = {
dangerouslySetInnerHTML:
'`dangerouslySetInnerHTML` must be set using `updateInnerHTMLByID()`.',
style: '`style` must be set using `updateStylesByID()`.'
};
/**
* Operations used to process updates to DOM nodes. This is made injectable via
* `ReactDOMComponent.BackendIDOperations`.
*/
var ReactDOMIDOperations = {
/**
* Updates a DOM node with new property values. This should only be used to
* update DOM properties in `DOMProperty`.
*
* @param {string} id ID of the node to update.
* @param {string} name A valid property name, see `DOMProperty`.
* @param {*} value New value of the property.
* @internal
*/
updatePropertyByID: function(id, name, value) {
var node = ReactMount.getNode(id);
("production" !== process.env.NODE_ENV ? invariant(
!INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
'updatePropertyByID(...): %s',
INVALID_PROPERTY_ERRORS[name]
) : invariant(!INVALID_PROPERTY_ERRORS.hasOwnProperty(name)));
// If we're updating to null or undefined, we should remove the property
// from the DOM node instead of inadvertantly setting to a string. This
// brings us in line with the same behavior we have on initial render.
if (value != null) {
DOMPropertyOperations.setValueForProperty(node, name, value);
} else {
DOMPropertyOperations.deleteValueForProperty(node, name);
}
},
/**
* Updates a DOM node to remove a property. This should only be used to remove
* DOM properties in `DOMProperty`.
*
* @param {string} id ID of the node to update.
* @param {string} name A property name to remove, see `DOMProperty`.
* @internal
*/
deletePropertyByID: function(id, name, value) {
var node = ReactMount.getNode(id);
("production" !== process.env.NODE_ENV ? invariant(
!INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
'updatePropertyByID(...): %s',
INVALID_PROPERTY_ERRORS[name]
) : invariant(!INVALID_PROPERTY_ERRORS.hasOwnProperty(name)));
DOMPropertyOperations.deleteValueForProperty(node, name, value);
},
/**
* Updates a DOM node with new style values. If a value is specified as '',
* the corresponding style property will be unset.
*
* @param {string} id ID of the node to update.
* @param {object} styles Mapping from styles to values.
* @internal
*/
updateStylesByID: function(id, styles) {
var node = ReactMount.getNode(id);
CSSPropertyOperations.setValueForStyles(node, styles);
},
/**
* Updates a DOM node's innerHTML.
*
* @param {string} id ID of the node to update.
* @param {string} html An HTML string.
* @internal
*/
updateInnerHTMLByID: function(id, html) {
var node = ReactMount.getNode(id);
setInnerHTML(node, html);
},
/**
* Updates a DOM node's text content set by `props.content`.
*
* @param {string} id ID of the node to update.
* @param {string} content Text content.
* @internal
*/
updateTextContentByID: function(id, content) {
var node = ReactMount.getNode(id);
DOMChildrenOperations.updateTextContent(node, content);
},
/**
* Replaces a DOM node that exists in the document with markup.
*
* @param {string} id ID of child to be replaced.
* @param {string} markup Dangerous markup to inject in place of child.
* @internal
* @see {Danger.dangerouslyReplaceNodeWithMarkup}
*/
dangerouslyReplaceNodeWithMarkupByID: function(id, markup) {
var node = ReactMount.getNode(id);
DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup);
},
/**
* Updates a component's children by processing a series of updates.
*
* @param {array<object>} updates List of update configurations.
* @param {array<string>} markup List of markup strings.
* @internal
*/
dangerouslyProcessChildrenUpdates: function(updates, markup) {
for (var i = 0; i < updates.length; i++) {
updates[i].parentNode = ReactMount.getNode(updates[i].parentID);
}
DOMChildrenOperations.processUpdates(updates, markup);
}
};
ReactPerf.measureMethods(ReactDOMIDOperations, 'ReactDOMIDOperations', {
updatePropertyByID: 'updatePropertyByID',
deletePropertyByID: 'deletePropertyByID',
updateStylesByID: 'updateStylesByID',
updateInnerHTMLByID: 'updateInnerHTMLByID',
updateTextContentByID: 'updateTextContentByID',
dangerouslyReplaceNodeWithMarkupByID: 'dangerouslyReplaceNodeWithMarkupByID',
dangerouslyProcessChildrenUpdates: 'dangerouslyProcessChildrenUpdates'
});
module.exports = ReactDOMIDOperations;
}).call(this,require('_process'))
},{"./CSSPropertyOperations":145,"./DOMChildrenOperations":149,"./DOMPropertyOperations":151,"./ReactMount":216,"./ReactPerf":221,"./invariant":290,"./setInnerHTML":304,"_process":138}],190:[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 ReactDOMIframe
*/
'use strict';
var EventConstants = require("./EventConstants");
var LocalEventTrapMixin = require("./LocalEventTrapMixin");
var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
var ReactClass = require("./ReactClass");
var ReactElement = require("./ReactElement");
var iframe = ReactElement.createFactory('iframe');
/**
* Since onLoad doesn't bubble OR capture on the top level in IE8, we need to
* capture it on the <iframe> element itself. There are lots of hacks we could
* do to accomplish this, but the most reliable is to make <iframe> a composite
* component and use `componentDidMount` to attach the event handlers.
*/
var ReactDOMIframe = ReactClass.createClass({
displayName: 'ReactDOMIframe',
tagName: 'IFRAME',
mixins: [ReactBrowserComponentMixin, LocalEventTrapMixin],
render: function() {
return iframe(this.props);
},
componentDidMount: function() {
this.trapBubbledEvent(EventConstants.topLevelTypes.topLoad, 'load');
}
});
module.exports = ReactDOMIframe;
},{"./EventConstants":155,"./LocalEventTrapMixin":166,"./ReactBrowserComponentMixin":171,"./ReactClass":177,"./ReactElement":202}],191:[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 ReactDOMImg
*/
'use strict';
var EventConstants = require("./EventConstants");
var LocalEventTrapMixin = require("./LocalEventTrapMixin");
var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
var ReactClass = require("./ReactClass");
var ReactElement = require("./ReactElement");
var img = ReactElement.createFactory('img');
/**
* Since onLoad doesn't bubble OR capture on the top level in IE8, we need to
* capture it on the <img> element itself. There are lots of hacks we could do
* to accomplish this, but the most reliable is to make <img> a composite
* component and use `componentDidMount` to attach the event handlers.
*/
var ReactDOMImg = ReactClass.createClass({
displayName: 'ReactDOMImg',
tagName: 'IMG',
mixins: [ReactBrowserComponentMixin, LocalEventTrapMixin],
render: function() {
return img(this.props);
},
componentDidMount: function() {
this.trapBubbledEvent(EventConstants.topLevelTypes.topLoad, 'load');
this.trapBubbledEvent(EventConstants.topLevelTypes.topError, 'error');
}
});
module.exports = ReactDOMImg;
},{"./EventConstants":155,"./LocalEventTrapMixin":166,"./ReactBrowserComponentMixin":171,"./ReactClass":177,"./ReactElement":202}],192:[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 ReactDOMInput
*/
'use strict';
var AutoFocusMixin = require("./AutoFocusMixin");
var DOMPropertyOperations = require("./DOMPropertyOperations");
var LinkedValueUtils = require("./LinkedValueUtils");
var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
var ReactClass = require("./ReactClass");
var ReactElement = require("./ReactElement");
var ReactMount = require("./ReactMount");
var ReactUpdates = require("./ReactUpdates");
var assign = require("./Object.assign");
var invariant = require("./invariant");
var input = ReactElement.createFactory('input');
var instancesByReactID = {};
function forceUpdateIfMounted() {
/*jshint validthis:true */
if (this.isMounted()) {
this.forceUpdate();
}
}
/**
* Implements an <input> native component that allows setting these optional
* props: `checked`, `value`, `defaultChecked`, and `defaultValue`.
*
* If `checked` or `value` are not supplied (or null/undefined), user actions
* that affect the checked state or value will trigger updates to the element.
*
* If they are supplied (and not null/undefined), the rendered element will not
* trigger updates to the element. Instead, the props must change in order for
* the rendered element to be updated.
*
* The rendered element will be initialized as unchecked (or `defaultChecked`)
* with an empty value (or `defaultValue`).
*
* @see http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
*/
var ReactDOMInput = ReactClass.createClass({
displayName: 'ReactDOMInput',
tagName: 'INPUT',
mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
getInitialState: function() {
var defaultValue = this.props.defaultValue;
return {
initialChecked: this.props.defaultChecked || false,
initialValue: defaultValue != null ? defaultValue : null
};
},
render: function() {
// Clone `this.props` so we don't mutate the input.
var props = assign({}, this.props);
props.defaultChecked = null;
props.defaultValue = null;
var value = LinkedValueUtils.getValue(this);
props.value = value != null ? value : this.state.initialValue;
var checked = LinkedValueUtils.getChecked(this);
props.checked = checked != null ? checked : this.state.initialChecked;
props.onChange = this._handleChange;
return input(props, this.props.children);
},
componentDidMount: function() {
var id = ReactMount.getID(this.getDOMNode());
instancesByReactID[id] = this;
},
componentWillUnmount: function() {
var rootNode = this.getDOMNode();
var id = ReactMount.getID(rootNode);
delete instancesByReactID[id];
},
componentDidUpdate: function(prevProps, prevState, prevContext) {
var rootNode = this.getDOMNode();
if (this.props.checked != null) {
DOMPropertyOperations.setValueForProperty(
rootNode,
'checked',
this.props.checked || false
);
}
var value = LinkedValueUtils.getValue(this);
if (value != null) {
// Cast `value` to a string to ensure the value is set correctly. While
// browsers typically do this as necessary, jsdom doesn't.
DOMPropertyOperations.setValueForProperty(rootNode, 'value', '' + value);
}
},
_handleChange: function(event) {
var returnValue;
var onChange = LinkedValueUtils.getOnChange(this);
if (onChange) {
returnValue = onChange.call(this, event);
}
// Here we use asap to wait until all updates have propagated, which
// is important when using controlled components within layers:
// https://github.com/facebook/react/issues/1698
ReactUpdates.asap(forceUpdateIfMounted, this);
var name = this.props.name;
if (this.props.type === 'radio' && name != null) {
var rootNode = this.getDOMNode();
var queryRoot = rootNode;
while (queryRoot.parentNode) {
queryRoot = queryRoot.parentNode;
}
// If `rootNode.form` was non-null, then we could try `form.elements`,
// but that sometimes behaves strangely in IE8. We could also try using
// `form.getElementsByName`, but that will only return direct children
// and won't include inputs that use the HTML5 `form=` attribute. Since
// the input might not even be in a form, let's just use the global
// `querySelectorAll` to ensure we don't miss anything.
var group = queryRoot.querySelectorAll(
'input[name=' + JSON.stringify('' + name) + '][type="radio"]');
for (var i = 0, groupLen = group.length; i < groupLen; i++) {
var otherNode = group[i];
if (otherNode === rootNode ||
otherNode.form !== rootNode.form) {
continue;
}
var otherID = ReactMount.getID(otherNode);
("production" !== process.env.NODE_ENV ? invariant(
otherID,
'ReactDOMInput: Mixing React and non-React radio inputs with the ' +
'same `name` is not supported.'
) : invariant(otherID));
var otherInstance = instancesByReactID[otherID];
("production" !== process.env.NODE_ENV ? invariant(
otherInstance,
'ReactDOMInput: Unknown radio button ID %s.',
otherID
) : invariant(otherInstance));
// If this is a controlled radio button group, forcing the input that
// was previously checked to update will cause it to be come re-checked
// as appropriate.
ReactUpdates.asap(forceUpdateIfMounted, otherInstance);
}
}
return returnValue;
}
});
module.exports = ReactDOMInput;
}).call(this,require('_process'))
},{"./AutoFocusMixin":141,"./DOMPropertyOperations":151,"./LinkedValueUtils":165,"./Object.assign":168,"./ReactBrowserComponentMixin":171,"./ReactClass":177,"./ReactElement":202,"./ReactMount":216,"./ReactUpdates":239,"./invariant":290,"_process":138}],193:[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 ReactDOMOption
*/
'use strict';
var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
var ReactClass = require("./ReactClass");
var ReactElement = require("./ReactElement");
var warning = require("./warning");
var option = ReactElement.createFactory('option');
/**
* Implements an <option> native component that warns when `selected` is set.
*/
var ReactDOMOption = ReactClass.createClass({
displayName: 'ReactDOMOption',
tagName: 'OPTION',
mixins: [ReactBrowserComponentMixin],
componentWillMount: function() {
// TODO (yungsters): Remove support for `selected` in <option>.
if ("production" !== process.env.NODE_ENV) {
("production" !== process.env.NODE_ENV ? warning(
this.props.selected == null,
'Use the `defaultValue` or `value` props on <select> instead of ' +
'setting `selected` on <option>.'
) : null);
}
},
render: function() {
return option(this.props, this.props.children);
}
});
module.exports = ReactDOMOption;
}).call(this,require('_process'))
},{"./ReactBrowserComponentMixin":171,"./ReactClass":177,"./ReactElement":202,"./warning":311,"_process":138}],194:[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 ReactDOMSelect
*/
'use strict';
var AutoFocusMixin = require("./AutoFocusMixin");
var LinkedValueUtils = require("./LinkedValueUtils");
var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
var ReactClass = require("./ReactClass");
var ReactElement = require("./ReactElement");
var ReactUpdates = require("./ReactUpdates");
var assign = require("./Object.assign");
var select = ReactElement.createFactory('select');
function updateOptionsIfPendingUpdateAndMounted() {
/*jshint validthis:true */
if (this._pendingUpdate) {
this._pendingUpdate = false;
var value = LinkedValueUtils.getValue(this);
if (value != null && this.isMounted()) {
updateOptions(this, value);
}
}
}
/**
* Validation function for `value` and `defaultValue`.
* @private
*/
function selectValueType(props, propName, componentName) {
if (props[propName] == null) {
return null;
}
if (props.multiple) {
if (!Array.isArray(props[propName])) {
return new Error(
("The `" + propName + "` prop supplied to <select> must be an array if ") +
("`multiple` is true.")
);
}
} else {
if (Array.isArray(props[propName])) {
return new Error(
("The `" + propName + "` prop supplied to <select> must be a scalar ") +
("value if `multiple` is false.")
);
}
}
}
/**
* @param {ReactComponent} component Instance of ReactDOMSelect
* @param {*} propValue A stringable (with `multiple`, a list of stringables).
* @private
*/
function updateOptions(component, propValue) {
var selectedValue, i, l;
var options = component.getDOMNode().options;
if (component.props.multiple) {
selectedValue = {};
for (i = 0, l = propValue.length; i < l; i++) {
selectedValue['' + propValue[i]] = true;
}
for (i = 0, l = options.length; i < l; i++) {
var selected = selectedValue.hasOwnProperty(options[i].value);
if (options[i].selected !== selected) {
options[i].selected = selected;
}
}
} else {
// Do not set `select.value` as exact behavior isn't consistent across all
// browsers for all cases.
selectedValue = '' + propValue;
for (i = 0, l = options.length; i < l; i++) {
if (options[i].value === selectedValue) {
options[i].selected = true;
return;
}
}
if (options.length) {
options[0].selected = true;
}
}
}
/**
* Implements a <select> native component that allows optionally setting the
* props `value` and `defaultValue`. If `multiple` is false, the prop must be a
* stringable. If `multiple` is true, the prop must be an array of stringables.
*
* If `value` is not supplied (or null/undefined), user actions that change the
* selected option will trigger updates to the rendered options.
*
* If it is supplied (and not null/undefined), the rendered options will not
* update in response to user actions. Instead, the `value` prop must change in
* order for the rendered options to update.
*
* If `defaultValue` is provided, any options with the supplied values will be
* selected.
*/
var ReactDOMSelect = ReactClass.createClass({
displayName: 'ReactDOMSelect',
tagName: 'SELECT',
mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
propTypes: {
defaultValue: selectValueType,
value: selectValueType
},
render: function() {
// Clone `this.props` so we don't mutate the input.
var props = assign({}, this.props);
props.onChange = this._handleChange;
props.value = null;
return select(props, this.props.children);
},
componentWillMount: function() {
this._pendingUpdate = false;
},
componentDidMount: function() {
var value = LinkedValueUtils.getValue(this);
if (value != null) {
updateOptions(this, value);
} else if (this.props.defaultValue != null) {
updateOptions(this, this.props.defaultValue);
}
},
componentDidUpdate: function(prevProps) {
var value = LinkedValueUtils.getValue(this);
if (value != null) {
this._pendingUpdate = false;
updateOptions(this, value);
} else if (!prevProps.multiple !== !this.props.multiple) {
// For simplicity, reapply `defaultValue` if `multiple` is toggled.
if (this.props.defaultValue != null) {
updateOptions(this, this.props.defaultValue);
} else {
// Revert the select back to its default unselected state.
updateOptions(this, this.props.multiple ? [] : '');
}
}
},
_handleChange: function(event) {
var returnValue;
var onChange = LinkedValueUtils.getOnChange(this);
if (onChange) {
returnValue = onChange.call(this, event);
}
this._pendingUpdate = true;
ReactUpdates.asap(updateOptionsIfPendingUpdateAndMounted, this);
return returnValue;
}
});
module.exports = ReactDOMSelect;
},{"./AutoFocusMixin":141,"./LinkedValueUtils":165,"./Object.assign":168,"./ReactBrowserComponentMixin":171,"./ReactClass":177,"./ReactElement":202,"./ReactUpdates":239}],195:[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 ReactDOMSelection
*/
'use strict';
var ExecutionEnvironment = require("./ExecutionEnvironment");
var getNodeForCharacterOffset = require("./getNodeForCharacterOffset");
var getTextContentAccessor = require("./getTextContentAccessor");
/**
* While `isCollapsed` is available on the Selection object and `collapsed`
* is available on the Range object, IE11 sometimes gets them wrong.
* If the anchor/focus nodes and offsets are the same, the range is collapsed.
*/
function isCollapsed(anchorNode, anchorOffset, focusNode, focusOffset) {
return anchorNode === focusNode && anchorOffset === focusOffset;
}
/**
* Get the appropriate anchor and focus node/offset pairs for IE.
*
* The catch here is that IE's selection API doesn't provide information
* about whether the selection is forward or backward, so we have to
* behave as though it's always forward.
*
* IE text differs from modern selection in that it behaves as though
* block elements end with a new line. This means character offsets will
* differ between the two APIs.
*
* @param {DOMElement} node
* @return {object}
*/
function getIEOffsets(node) {
var selection = document.selection;
var selectedRange = selection.createRange();
var selectedLength = selectedRange.text.length;
// Duplicate selection so we can move range without breaking user selection.
var fromStart = selectedRange.duplicate();
fromStart.moveToElementText(node);
fromStart.setEndPoint('EndToStart', selectedRange);
var startOffset = fromStart.text.length;
var endOffset = startOffset + selectedLength;
return {
start: startOffset,
end: endOffset
};
}
/**
* @param {DOMElement} node
* @return {?object}
*/
function getModernOffsets(node) {
var selection = window.getSelection && window.getSelection();
if (!selection || selection.rangeCount === 0) {
return null;
}
var anchorNode = selection.anchorNode;
var anchorOffset = selection.anchorOffset;
var focusNode = selection.focusNode;
var focusOffset = selection.focusOffset;
var currentRange = selection.getRangeAt(0);
// If the node and offset values are the same, the selection is collapsed.
// `Selection.isCollapsed` is available natively, but IE sometimes gets
// this value wrong.
var isSelectionCollapsed = isCollapsed(
selection.anchorNode,
selection.anchorOffset,
selection.focusNode,
selection.focusOffset
);
var rangeLength = isSelectionCollapsed ? 0 : currentRange.toString().length;
var tempRange = currentRange.cloneRange();
tempRange.selectNodeContents(node);
tempRange.setEnd(currentRange.startContainer, currentRange.startOffset);
var isTempRangeCollapsed = isCollapsed(
tempRange.startContainer,
tempRange.startOffset,
tempRange.endContainer,
tempRange.endOffset
);
var start = isTempRangeCollapsed ? 0 : tempRange.toString().length;
var end = start + rangeLength;
// Detect whether the selection is backward.
var detectionRange = document.createRange();
detectionRange.setStart(anchorNode, anchorOffset);
detectionRange.setEnd(focusNode, focusOffset);
var isBackward = detectionRange.collapsed;
return {
start: isBackward ? end : start,
end: isBackward ? start : end
};
}
/**
* @param {DOMElement|DOMTextNode} node
* @param {object} offsets
*/
function setIEOffsets(node, offsets) {
var range = document.selection.createRange().duplicate();
var start, end;
if (typeof offsets.end === 'undefined') {
start = offsets.start;
end = start;
} else if (offsets.start > offsets.end) {
start = offsets.end;
end = offsets.start;
} else {
start = offsets.start;
end = offsets.end;
}
range.moveToElementText(node);
range.moveStart('character', start);
range.setEndPoint('EndToStart', range);
range.moveEnd('character', end - start);
range.select();
}
/**
* In modern non-IE browsers, we can support both forward and backward
* selections.
*
* Note: IE10+ supports the Selection object, but it does not support
* the `extend` method, which means that even in modern IE, it's not possible
* to programatically create a backward selection. Thus, for all IE
* versions, we use the old IE API to create our selections.
*
* @param {DOMElement|DOMTextNode} node
* @param {object} offsets
*/
function setModernOffsets(node, offsets) {
if (!window.getSelection) {
return;
}
var selection = window.getSelection();
var length = node[getTextContentAccessor()].length;
var start = Math.min(offsets.start, length);
var end = typeof offsets.end === 'undefined' ?
start : Math.min(offsets.end, length);
// IE 11 uses modern selection, but doesn't support the extend method.
// Flip backward selections, so we can set with a single range.
if (!selection.extend && start > end) {
var temp = end;
end = start;
start = temp;
}
var startMarker = getNodeForCharacterOffset(node, start);
var endMarker = getNodeForCharacterOffset(node, end);
if (startMarker && endMarker) {
var range = document.createRange();
range.setStart(startMarker.node, startMarker.offset);
selection.removeAllRanges();
if (start > end) {
selection.addRange(range);
selection.extend(endMarker.node, endMarker.offset);
} else {
range.setEnd(endMarker.node, endMarker.offset);
selection.addRange(range);
}
}
}
var useIEOffsets = (
ExecutionEnvironment.canUseDOM &&
'selection' in document &&
!('getSelection' in window)
);
var ReactDOMSelection = {
/**
* @param {DOMElement} node
*/
getOffsets: useIEOffsets ? getIEOffsets : getModernOffsets,
/**
* @param {DOMElement|DOMTextNode} node
* @param {object} offsets
*/
setOffsets: useIEOffsets ? setIEOffsets : setModernOffsets
};
module.exports = ReactDOMSelection;
},{"./ExecutionEnvironment":161,"./getNodeForCharacterOffset":283,"./getTextContentAccessor":285}],196:[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 ReactDOMTextComponent
* @typechecks static-only
*/
'use strict';
var DOMPropertyOperations = require("./DOMPropertyOperations");
var ReactComponentBrowserEnvironment =
require("./ReactComponentBrowserEnvironment");
var ReactDOMComponent = require("./ReactDOMComponent");
var assign = require("./Object.assign");
var escapeTextContentForBrowser = require("./escapeTextContentForBrowser");
/**
* Text nodes violate a couple assumptions that React makes about components:
*
* - When mounting text into the DOM, adjacent text nodes are merged.
* - Text nodes cannot be assigned a React root ID.
*
* This component is used to wrap strings in elements so that they can undergo
* the same reconciliation that is applied to elements.
*
* TODO: Investigate representing React components in the DOM with text nodes.
*
* @class ReactDOMTextComponent
* @extends ReactComponent
* @internal
*/
var ReactDOMTextComponent = function(props) {
// This constructor and its argument is currently used by mocks.
};
assign(ReactDOMTextComponent.prototype, {
/**
* @param {ReactText} text
* @internal
*/
construct: function(text) {
// TODO: This is really a ReactText (ReactNode), not a ReactElement
this._currentElement = text;
this._stringText = '' + text;
// Properties
this._rootNodeID = null;
this._mountIndex = 0;
},
/**
* Creates the markup for this text node. This node is not intended to have
* any features besides containing text content.
*
* @param {string} rootID DOM ID of the root node.
* @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
* @return {string} Markup for this text node.
* @internal
*/
mountComponent: function(rootID, transaction, context) {
this._rootNodeID = rootID;
var escapedText = escapeTextContentForBrowser(this._stringText);
if (transaction.renderToStaticMarkup) {
// Normally we'd wrap this in a `span` for the reasons stated above, but
// since this is a situation where React won't take over (static pages),
// we can simply return the text as it is.
return escapedText;
}
return (
'<span ' + DOMPropertyOperations.createMarkupForID(rootID) + '>' +
escapedText +
'</span>'
);
},
/**
* Updates this component by updating the text content.
*
* @param {ReactText} nextText The next text content
* @param {ReactReconcileTransaction} transaction
* @internal
*/
receiveComponent: function(nextText, transaction) {
if (nextText !== this._currentElement) {
this._currentElement = nextText;
var nextStringText = '' + nextText;
if (nextStringText !== this._stringText) {
// TODO: Save this as pending props and use performUpdateIfNecessary
// and/or updateComponent to do the actual update for consistency with
// other component types?
this._stringText = nextStringText;
ReactDOMComponent.BackendIDOperations.updateTextContentByID(
this._rootNodeID,
nextStringText
);
}
}
},
unmountComponent: function() {
ReactComponentBrowserEnvironment.unmountIDFromEnvironment(this._rootNodeID);
}
});
module.exports = ReactDOMTextComponent;
},{"./DOMPropertyOperations":151,"./Object.assign":168,"./ReactComponentBrowserEnvironment":179,"./ReactDOMComponent":187,"./escapeTextContentForBrowser":271}],197:[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 ReactDOMTextarea
*/
'use strict';
var AutoFocusMixin = require("./AutoFocusMixin");
var DOMPropertyOperations = require("./DOMPropertyOperations");
var LinkedValueUtils = require("./LinkedValueUtils");
var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
var ReactClass = require("./ReactClass");
var ReactElement = require("./ReactElement");
var ReactUpdates = require("./ReactUpdates");
var assign = require("./Object.assign");
var invariant = require("./invariant");
var warning = require("./warning");
var textarea = ReactElement.createFactory('textarea');
function forceUpdateIfMounted() {
/*jshint validthis:true */
if (this.isMounted()) {
this.forceUpdate();
}
}
/**
* Implements a <textarea> native component that allows setting `value`, and
* `defaultValue`. This differs from the traditional DOM API because value is
* usually set as PCDATA children.
*
* If `value` is not supplied (or null/undefined), user actions that affect the
* value will trigger updates to the element.
*
* If `value` is supplied (and not null/undefined), the rendered element will
* not trigger updates to the element. Instead, the `value` prop must change in
* order for the rendered element to be updated.
*
* The rendered element will be initialized with an empty value, the prop
* `defaultValue` if specified, or the children content (deprecated).
*/
var ReactDOMTextarea = ReactClass.createClass({
displayName: 'ReactDOMTextarea',
tagName: 'TEXTAREA',
mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
getInitialState: function() {
var defaultValue = this.props.defaultValue;
// TODO (yungsters): Remove support for children content in <textarea>.
var children = this.props.children;
if (children != null) {
if ("production" !== process.env.NODE_ENV) {
("production" !== process.env.NODE_ENV ? warning(
false,
'Use the `defaultValue` or `value` props instead of setting ' +
'children on <textarea>.'
) : null);
}
("production" !== process.env.NODE_ENV ? invariant(
defaultValue == null,
'If you supply `defaultValue` on a <textarea>, do not pass children.'
) : invariant(defaultValue == null));
if (Array.isArray(children)) {
("production" !== process.env.NODE_ENV ? invariant(
children.length <= 1,
'<textarea> can only have at most one child.'
) : invariant(children.length <= 1));
children = children[0];
}
defaultValue = '' + children;
}
if (defaultValue == null) {
defaultValue = '';
}
var value = LinkedValueUtils.getValue(this);
return {
// We save the initial value so that `ReactDOMComponent` doesn't update
// `textContent` (unnecessary since we update value).
// The initial value can be a boolean or object so that's why it's
// forced to be a string.
initialValue: '' + (value != null ? value : defaultValue)
};
},
render: function() {
// Clone `this.props` so we don't mutate the input.
var props = assign({}, this.props);
("production" !== process.env.NODE_ENV ? invariant(
props.dangerouslySetInnerHTML == null,
'`dangerouslySetInnerHTML` does not make sense on <textarea>.'
) : invariant(props.dangerouslySetInnerHTML == null));
props.defaultValue = null;
props.value = null;
props.onChange = this._handleChange;
// Always set children to the same thing. In IE9, the selection range will
// get reset if `textContent` is mutated.
return textarea(props, this.state.initialValue);
},
componentDidUpdate: function(prevProps, prevState, prevContext) {
var value = LinkedValueUtils.getValue(this);
if (value != null) {
var rootNode = this.getDOMNode();
// Cast `value` to a string to ensure the value is set correctly. While
// browsers typically do this as necessary, jsdom doesn't.
DOMPropertyOperations.setValueForProperty(rootNode, 'value', '' + value);
}
},
_handleChange: function(event) {
var returnValue;
var onChange = LinkedValueUtils.getOnChange(this);
if (onChange) {
returnValue = onChange.call(this, event);
}
ReactUpdates.asap(forceUpdateIfMounted, this);
return returnValue;
}
});
module.exports = ReactDOMTextarea;
}).call(this,require('_process'))
},{"./AutoFocusMixin":141,"./DOMPropertyOperations":151,"./LinkedValueUtils":165,"./Object.assign":168,"./ReactBrowserComponentMixin":171,"./ReactClass":177,"./ReactElement":202,"./ReactUpdates":239,"./invariant":290,"./warning":311,"_process":138}],198:[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 ReactDefaultBatchingStrategy
*/
'use strict';
var ReactUpdates = require("./ReactUpdates");
var Transaction = require("./Transaction");
var assign = require("./Object.assign");
var emptyFunction = require("./emptyFunction");
var RESET_BATCHED_UPDATES = {
initialize: emptyFunction,
close: function() {
ReactDefaultBatchingStrategy.isBatchingUpdates = false;
}
};
var FLUSH_BATCHED_UPDATES = {
initialize: emptyFunction,
close: ReactUpdates.flushBatchedUpdates.bind(ReactUpdates)
};
var TRANSACTION_WRAPPERS = [FLUSH_BATCHED_UPDATES, RESET_BATCHED_UPDATES];
function ReactDefaultBatchingStrategyTransaction() {
this.reinitializeTransaction();
}
assign(
ReactDefaultBatchingStrategyTransaction.prototype,
Transaction.Mixin,
{
getTransactionWrappers: function() {
return TRANSACTION_WRAPPERS;
}
}
);
var transaction = new ReactDefaultBatchingStrategyTransaction();
var ReactDefaultBatchingStrategy = {
isBatchingUpdates: false,
/**
* Call the provided function in a context within which calls to `setState`
* and friends are batched such that components aren't updated unnecessarily.
*/
batchedUpdates: function(callback, a, b, c, d) {
var alreadyBatchingUpdates = ReactDefaultBatchingStrategy.isBatchingUpdates;
ReactDefaultBatchingStrategy.isBatchingUpdates = true;
// The code is written this way to avoid extra allocations
if (alreadyBatchingUpdates) {
callback(a, b, c, d);
} else {
transaction.perform(callback, null, a, b, c, d);
}
}
};
module.exports = ReactDefaultBatchingStrategy;
},{"./Object.assign":168,"./ReactUpdates":239,"./Transaction":256,"./emptyFunction":269}],199:[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 ReactDefaultInjection
*/
'use strict';
var BeforeInputEventPlugin = require("./BeforeInputEventPlugin");
var ChangeEventPlugin = require("./ChangeEventPlugin");
var ClientReactRootIndex = require("./ClientReactRootIndex");
var DefaultEventPluginOrder = require("./DefaultEventPluginOrder");
var EnterLeaveEventPlugin = require("./EnterLeaveEventPlugin");
var ExecutionEnvironment = require("./ExecutionEnvironment");
var HTMLDOMPropertyConfig = require("./HTMLDOMPropertyConfig");
var MobileSafariClickEventPlugin = require("./MobileSafariClickEventPlugin");
var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
var ReactClass = require("./ReactClass");
var ReactComponentBrowserEnvironment =
require("./ReactComponentBrowserEnvironment");
var ReactDefaultBatchingStrategy = require("./ReactDefaultBatchingStrategy");
var ReactDOMComponent = require("./ReactDOMComponent");
var ReactDOMButton = require("./ReactDOMButton");
var ReactDOMForm = require("./ReactDOMForm");
var ReactDOMImg = require("./ReactDOMImg");
var ReactDOMIDOperations = require("./ReactDOMIDOperations");
var ReactDOMIframe = require("./ReactDOMIframe");
var ReactDOMInput = require("./ReactDOMInput");
var ReactDOMOption = require("./ReactDOMOption");
var ReactDOMSelect = require("./ReactDOMSelect");
var ReactDOMTextarea = require("./ReactDOMTextarea");
var ReactDOMTextComponent = require("./ReactDOMTextComponent");
var ReactElement = require("./ReactElement");
var ReactEventListener = require("./ReactEventListener");
var ReactInjection = require("./ReactInjection");
var ReactInstanceHandles = require("./ReactInstanceHandles");
var ReactMount = require("./ReactMount");
var ReactReconcileTransaction = require("./ReactReconcileTransaction");
var SelectEventPlugin = require("./SelectEventPlugin");
var ServerReactRootIndex = require("./ServerReactRootIndex");
var SimpleEventPlugin = require("./SimpleEventPlugin");
var SVGDOMPropertyConfig = require("./SVGDOMPropertyConfig");
var createFullPageComponent = require("./createFullPageComponent");
function autoGenerateWrapperClass(type) {
return ReactClass.createClass({
tagName: type.toUpperCase(),
render: function() {
return new ReactElement(
type,
null,
null,
null,
null,
this.props
);
}
});
}
function inject() {
ReactInjection.EventEmitter.injectReactEventListener(
ReactEventListener
);
/**
* Inject modules for resolving DOM hierarchy and plugin ordering.
*/
ReactInjection.EventPluginHub.injectEventPluginOrder(DefaultEventPluginOrder);
ReactInjection.EventPluginHub.injectInstanceHandle(ReactInstanceHandles);
ReactInjection.EventPluginHub.injectMount(ReactMount);
/**
* Some important event plugins included by default (without having to require
* them).
*/
ReactInjection.EventPluginHub.injectEventPluginsByName({
SimpleEventPlugin: SimpleEventPlugin,
EnterLeaveEventPlugin: EnterLeaveEventPlugin,
ChangeEventPlugin: ChangeEventPlugin,
MobileSafariClickEventPlugin: MobileSafariClickEventPlugin,
SelectEventPlugin: SelectEventPlugin,
BeforeInputEventPlugin: BeforeInputEventPlugin
});
ReactInjection.NativeComponent.injectGenericComponentClass(
ReactDOMComponent
);
ReactInjection.NativeComponent.injectTextComponentClass(
ReactDOMTextComponent
);
ReactInjection.NativeComponent.injectAutoWrapper(
autoGenerateWrapperClass
);
// This needs to happen before createFullPageComponent() otherwise the mixin
// won't be included.
ReactInjection.Class.injectMixin(ReactBrowserComponentMixin);
ReactInjection.NativeComponent.injectComponentClasses({
'button': ReactDOMButton,
'form': ReactDOMForm,
'iframe': ReactDOMIframe,
'img': ReactDOMImg,
'input': ReactDOMInput,
'option': ReactDOMOption,
'select': ReactDOMSelect,
'textarea': ReactDOMTextarea,
'html': createFullPageComponent('html'),
'head': createFullPageComponent('head'),
'body': createFullPageComponent('body')
});
ReactInjection.DOMProperty.injectDOMPropertyConfig(HTMLDOMPropertyConfig);
ReactInjection.DOMProperty.injectDOMPropertyConfig(SVGDOMPropertyConfig);
ReactInjection.EmptyComponent.injectEmptyComponent('noscript');
ReactInjection.Updates.injectReconcileTransaction(
ReactReconcileTransaction
);
ReactInjection.Updates.injectBatchingStrategy(
ReactDefaultBatchingStrategy
);
ReactInjection.RootIndex.injectCreateReactRootIndex(
ExecutionEnvironment.canUseDOM ?
ClientReactRootIndex.createReactRootIndex :
ServerReactRootIndex.createReactRootIndex
);
ReactInjection.Component.injectEnvironment(ReactComponentBrowserEnvironment);
ReactInjection.DOMComponent.injectIDOperations(ReactDOMIDOperations);
if ("production" !== process.env.NODE_ENV) {
var url = (ExecutionEnvironment.canUseDOM && window.location.href) || '';
if ((/[?&]react_perf\b/).test(url)) {
var ReactDefaultPerf = require("./ReactDefaultPerf");
ReactDefaultPerf.start();
}
}
}
module.exports = {
inject: inject
};
}).call(this,require('_process'))
},{"./BeforeInputEventPlugin":142,"./ChangeEventPlugin":147,"./ClientReactRootIndex":148,"./DefaultEventPluginOrder":153,"./EnterLeaveEventPlugin":154,"./ExecutionEnvironment":161,"./HTMLDOMPropertyConfig":163,"./MobileSafariClickEventPlugin":167,"./ReactBrowserComponentMixin":171,"./ReactClass":177,"./ReactComponentBrowserEnvironment":179,"./ReactDOMButton":186,"./ReactDOMComponent":187,"./ReactDOMForm":188,"./ReactDOMIDOperations":189,"./ReactDOMIframe":190,"./ReactDOMImg":191,"./ReactDOMInput":192,"./ReactDOMOption":193,"./ReactDOMSelect":194,"./ReactDOMTextComponent":196,"./ReactDOMTextarea":197,"./ReactDefaultBatchingStrategy":198,"./ReactDefaultPerf":200,"./ReactElement":202,"./ReactEventListener":207,"./ReactInjection":209,"./ReactInstanceHandles":211,"./ReactMount":216,"./ReactReconcileTransaction":227,"./SVGDOMPropertyConfig":241,"./SelectEventPlugin":242,"./ServerReactRootIndex":243,"./SimpleEventPlugin":244,"./createFullPageComponent":265,"_process":138}],200:[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 ReactDefaultPerf
* @typechecks static-only
*/
'use strict';
var DOMProperty = require("./DOMProperty");
var ReactDefaultPerfAnalysis = require("./ReactDefaultPerfAnalysis");
var ReactMount = require("./ReactMount");
var ReactPerf = require("./ReactPerf");
var performanceNow = require("./performanceNow");
function roundFloat(val) {
return Math.floor(val * 100) / 100;
}
function addValue(obj, key, val) {
obj[key] = (obj[key] || 0) + val;
}
var ReactDefaultPerf = {
_allMeasurements: [], // last item in the list is the current one
_mountStack: [0],
_injected: false,
start: function() {
if (!ReactDefaultPerf._injected) {
ReactPerf.injection.injectMeasure(ReactDefaultPerf.measure);
}
ReactDefaultPerf._allMeasurements.length = 0;
ReactPerf.enableMeasure = true;
},
stop: function() {
ReactPerf.enableMeasure = false;
},
getLastMeasurements: function() {
return ReactDefaultPerf._allMeasurements;
},
printExclusive: function(measurements) {
measurements = measurements || ReactDefaultPerf._allMeasurements;
var summary = ReactDefaultPerfAnalysis.getExclusiveSummary(measurements);
console.table(summary.map(function(item) {
return {
'Component class name': item.componentName,
'Total inclusive time (ms)': roundFloat(item.inclusive),
'Exclusive mount time (ms)': roundFloat(item.exclusive),
'Exclusive render time (ms)': roundFloat(item.render),
'Mount time per instance (ms)': roundFloat(item.exclusive / item.count),
'Render time per instance (ms)': roundFloat(item.render / item.count),
'Instances': item.count
};
}));
// TODO: ReactDefaultPerfAnalysis.getTotalTime() does not return the correct
// number.
},
printInclusive: function(measurements) {
measurements = measurements || ReactDefaultPerf._allMeasurements;
var summary = ReactDefaultPerfAnalysis.getInclusiveSummary(measurements);
console.table(summary.map(function(item) {
return {
'Owner > component': item.componentName,
'Inclusive time (ms)': roundFloat(item.time),
'Instances': item.count
};
}));
console.log(
'Total time:',
ReactDefaultPerfAnalysis.getTotalTime(measurements).toFixed(2) + ' ms'
);
},
getMeasurementsSummaryMap: function(measurements) {
var summary = ReactDefaultPerfAnalysis.getInclusiveSummary(
measurements,
true
);
return summary.map(function(item) {
return {
'Owner > component': item.componentName,
'Wasted time (ms)': item.time,
'Instances': item.count
};
});
},
printWasted: function(measurements) {
measurements = measurements || ReactDefaultPerf._allMeasurements;
console.table(ReactDefaultPerf.getMeasurementsSummaryMap(measurements));
console.log(
'Total time:',
ReactDefaultPerfAnalysis.getTotalTime(measurements).toFixed(2) + ' ms'
);
},
printDOM: function(measurements) {
measurements = measurements || ReactDefaultPerf._allMeasurements;
var summary = ReactDefaultPerfAnalysis.getDOMSummary(measurements);
console.table(summary.map(function(item) {
var result = {};
result[DOMProperty.ID_ATTRIBUTE_NAME] = item.id;
result['type'] = item.type;
result['args'] = JSON.stringify(item.args);
return result;
}));
console.log(
'Total time:',
ReactDefaultPerfAnalysis.getTotalTime(measurements).toFixed(2) + ' ms'
);
},
_recordWrite: function(id, fnName, totalTime, args) {
// TODO: totalTime isn't that useful since it doesn't count paints/reflows
var writes =
ReactDefaultPerf
._allMeasurements[ReactDefaultPerf._allMeasurements.length - 1]
.writes;
writes[id] = writes[id] || [];
writes[id].push({
type: fnName,
time: totalTime,
args: args
});
},
measure: function(moduleName, fnName, func) {
return function() {for (var args=[],$__0=0,$__1=arguments.length;$__0<$__1;$__0++) args.push(arguments[$__0]);
var totalTime;
var rv;
var start;
if (fnName === '_renderNewRootComponent' ||
fnName === 'flushBatchedUpdates') {
// A "measurement" is a set of metrics recorded for each flush. We want
// to group the metrics for a given flush together so we can look at the
// components that rendered and the DOM operations that actually
// happened to determine the amount of "wasted work" performed.
ReactDefaultPerf._allMeasurements.push({
exclusive: {},
inclusive: {},
render: {},
counts: {},
writes: {},
displayNames: {},
totalTime: 0
});
start = performanceNow();
rv = func.apply(this, args);
ReactDefaultPerf._allMeasurements[
ReactDefaultPerf._allMeasurements.length - 1
].totalTime = performanceNow() - start;
return rv;
} else if (fnName === '_mountImageIntoNode' ||
moduleName === 'ReactDOMIDOperations') {
start = performanceNow();
rv = func.apply(this, args);
totalTime = performanceNow() - start;
if (fnName === '_mountImageIntoNode') {
var mountID = ReactMount.getID(args[1]);
ReactDefaultPerf._recordWrite(mountID, fnName, totalTime, args[0]);
} else if (fnName === 'dangerouslyProcessChildrenUpdates') {
// special format
args[0].forEach(function(update) {
var writeArgs = {};
if (update.fromIndex !== null) {
writeArgs.fromIndex = update.fromIndex;
}
if (update.toIndex !== null) {
writeArgs.toIndex = update.toIndex;
}
if (update.textContent !== null) {
writeArgs.textContent = update.textContent;
}
if (update.markupIndex !== null) {
writeArgs.markup = args[1][update.markupIndex];
}
ReactDefaultPerf._recordWrite(
update.parentID,
update.type,
totalTime,
writeArgs
);
});
} else {
// basic format
ReactDefaultPerf._recordWrite(
args[0],
fnName,
totalTime,
Array.prototype.slice.call(args, 1)
);
}
return rv;
} else if (moduleName === 'ReactCompositeComponent' && (
(// TODO: receiveComponent()?
(fnName === 'mountComponent' ||
fnName === 'updateComponent' || fnName === '_renderValidatedComponent')))) {
if (typeof this._currentElement.type === 'string') {
return func.apply(this, args);
}
var rootNodeID = fnName === 'mountComponent' ?
args[0] :
this._rootNodeID;
var isRender = fnName === '_renderValidatedComponent';
var isMount = fnName === 'mountComponent';
var mountStack = ReactDefaultPerf._mountStack;
var entry = ReactDefaultPerf._allMeasurements[
ReactDefaultPerf._allMeasurements.length - 1
];
if (isRender) {
addValue(entry.counts, rootNodeID, 1);
} else if (isMount) {
mountStack.push(0);
}
start = performanceNow();
rv = func.apply(this, args);
totalTime = performanceNow() - start;
if (isRender) {
addValue(entry.render, rootNodeID, totalTime);
} else if (isMount) {
var subMountTime = mountStack.pop();
mountStack[mountStack.length - 1] += totalTime;
addValue(entry.exclusive, rootNodeID, totalTime - subMountTime);
addValue(entry.inclusive, rootNodeID, totalTime);
} else {
addValue(entry.inclusive, rootNodeID, totalTime);
}
entry.displayNames[rootNodeID] = {
current: this.getName(),
owner: this._currentElement._owner ?
this._currentElement._owner.getName() :
'<root>'
};
return rv;
} else {
return func.apply(this, args);
}
};
}
};
module.exports = ReactDefaultPerf;
},{"./DOMProperty":150,"./ReactDefaultPerfAnalysis":201,"./ReactMount":216,"./ReactPerf":221,"./performanceNow":302}],201:[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 ReactDefaultPerfAnalysis
*/
var assign = require("./Object.assign");
// Don't try to save users less than 1.2ms (a number I made up)
var DONT_CARE_THRESHOLD = 1.2;
var DOM_OPERATION_TYPES = {
'_mountImageIntoNode': 'set innerHTML',
INSERT_MARKUP: 'set innerHTML',
MOVE_EXISTING: 'move',
REMOVE_NODE: 'remove',
TEXT_CONTENT: 'set textContent',
'updatePropertyByID': 'update attribute',
'deletePropertyByID': 'delete attribute',
'updateStylesByID': 'update styles',
'updateInnerHTMLByID': 'set innerHTML',
'dangerouslyReplaceNodeWithMarkupByID': 'replace'
};
function getTotalTime(measurements) {
// TODO: return number of DOM ops? could be misleading.
// TODO: measure dropped frames after reconcile?
// TODO: log total time of each reconcile and the top-level component
// class that triggered it.
var totalTime = 0;
for (var i = 0; i < measurements.length; i++) {
var measurement = measurements[i];
totalTime += measurement.totalTime;
}
return totalTime;
}
function getDOMSummary(measurements) {
var items = [];
for (var i = 0; i < measurements.length; i++) {
var measurement = measurements[i];
var id;
for (id in measurement.writes) {
measurement.writes[id].forEach(function(write) {
items.push({
id: id,
type: DOM_OPERATION_TYPES[write.type] || write.type,
args: write.args
});
});
}
}
return items;
}
function getExclusiveSummary(measurements) {
var candidates = {};
var displayName;
for (var i = 0; i < measurements.length; i++) {
var measurement = measurements[i];
var allIDs = assign(
{},
measurement.exclusive,
measurement.inclusive
);
for (var id in allIDs) {
displayName = measurement.displayNames[id].current;
candidates[displayName] = candidates[displayName] || {
componentName: displayName,
inclusive: 0,
exclusive: 0,
render: 0,
count: 0
};
if (measurement.render[id]) {
candidates[displayName].render += measurement.render[id];
}
if (measurement.exclusive[id]) {
candidates[displayName].exclusive += measurement.exclusive[id];
}
if (measurement.inclusive[id]) {
candidates[displayName].inclusive += measurement.inclusive[id];
}
if (measurement.counts[id]) {
candidates[displayName].count += measurement.counts[id];
}
}
}
// Now make a sorted array with the results.
var arr = [];
for (displayName in candidates) {
if (candidates[displayName].exclusive >= DONT_CARE_THRESHOLD) {
arr.push(candidates[displayName]);
}
}
arr.sort(function(a, b) {
return b.exclusive - a.exclusive;
});
return arr;
}
function getInclusiveSummary(measurements, onlyClean) {
var candidates = {};
var inclusiveKey;
for (var i = 0; i < measurements.length; i++) {
var measurement = measurements[i];
var allIDs = assign(
{},
measurement.exclusive,
measurement.inclusive
);
var cleanComponents;
if (onlyClean) {
cleanComponents = getUnchangedComponents(measurement);
}
for (var id in allIDs) {
if (onlyClean && !cleanComponents[id]) {
continue;
}
var displayName = measurement.displayNames[id];
// Inclusive time is not useful for many components without knowing where
// they are instantiated. So we aggregate inclusive time with both the
// owner and current displayName as the key.
inclusiveKey = displayName.owner + ' > ' + displayName.current;
candidates[inclusiveKey] = candidates[inclusiveKey] || {
componentName: inclusiveKey,
time: 0,
count: 0
};
if (measurement.inclusive[id]) {
candidates[inclusiveKey].time += measurement.inclusive[id];
}
if (measurement.counts[id]) {
candidates[inclusiveKey].count += measurement.counts[id];
}
}
}
// Now make a sorted array with the results.
var arr = [];
for (inclusiveKey in candidates) {
if (candidates[inclusiveKey].time >= DONT_CARE_THRESHOLD) {
arr.push(candidates[inclusiveKey]);
}
}
arr.sort(function(a, b) {
return b.time - a.time;
});
return arr;
}
function getUnchangedComponents(measurement) {
// For a given reconcile, look at which components did not actually
// render anything to the DOM and return a mapping of their ID to
// the amount of time it took to render the entire subtree.
var cleanComponents = {};
var dirtyLeafIDs = Object.keys(measurement.writes);
var allIDs = assign({}, measurement.exclusive, measurement.inclusive);
for (var id in allIDs) {
var isDirty = false;
// For each component that rendered, see if a component that triggered
// a DOM op is in its subtree.
for (var i = 0; i < dirtyLeafIDs.length; i++) {
if (dirtyLeafIDs[i].indexOf(id) === 0) {
isDirty = true;
break;
}
}
if (!isDirty && measurement.counts[id] > 0) {
cleanComponents[id] = true;
}
}
return cleanComponents;
}
var ReactDefaultPerfAnalysis = {
getExclusiveSummary: getExclusiveSummary,
getInclusiveSummary: getInclusiveSummary,
getDOMSummary: getDOMSummary,
getTotalTime: getTotalTime
};
module.exports = ReactDefaultPerfAnalysis;
},{"./Object.assign":168}],202:[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 ReactElement
*/
'use strict';
var ReactContext = require("./ReactContext");
var ReactCurrentOwner = require("./ReactCurrentOwner");
var assign = require("./Object.assign");
var warning = require("./warning");
var RESERVED_PROPS = {
key: true,
ref: true
};
/**
* Warn for mutations.
*
* @internal
* @param {object} object
* @param {string} key
*/
function defineWarningProperty(object, key) {
Object.defineProperty(object, key, {
configurable: false,
enumerable: true,
get: function() {
if (!this._store) {
return null;
}
return this._store[key];
},
set: function(value) {
("production" !== process.env.NODE_ENV ? warning(
false,
'Don\'t set the %s property of the React element. Instead, ' +
'specify the correct value when initially creating the element.',
key
) : null);
this._store[key] = value;
}
});
}
/**
* This is updated to true if the membrane is successfully created.
*/
var useMutationMembrane = false;
/**
* Warn for mutations.
*
* @internal
* @param {object} element
*/
function defineMutationMembrane(prototype) {
try {
var pseudoFrozenProperties = {
props: true
};
for (var key in pseudoFrozenProperties) {
defineWarningProperty(prototype, key);
}
useMutationMembrane = true;
} catch (x) {
// IE will fail on defineProperty
}
}
/**
* Base constructor for all React elements. This is only used to make this
* work with a dynamic instanceof check. Nothing should live on this prototype.
*
* @param {*} type
* @param {string|object} ref
* @param {*} key
* @param {*} props
* @internal
*/
var ReactElement = function(type, key, ref, owner, context, props) {
// Built-in properties that belong on the element
this.type = type;
this.key = key;
this.ref = ref;
// Record the component responsible for creating this element.
this._owner = owner;
// TODO: Deprecate withContext, and then the context becomes accessible
// through the owner.
this._context = context;
if ("production" !== process.env.NODE_ENV) {
// The validation flag and props are currently mutative. We put them on
// an external backing store so that we can freeze the whole object.
// This can be replaced with a WeakMap once they are implemented in
// commonly used development environments.
this._store = {props: props, originalProps: assign({}, props)};
// To make comparing ReactElements easier for testing purposes, we make
// the validation flag non-enumerable (where possible, which should
// include every environment we run tests in), so the test framework
// ignores it.
try {
Object.defineProperty(this._store, 'validated', {
configurable: false,
enumerable: false,
writable: true
});
} catch (x) {
}
this._store.validated = false;
// We're not allowed to set props directly on the object so we early
// return and rely on the prototype membrane to forward to the backing
// store.
if (useMutationMembrane) {
Object.freeze(this);
return;
}
}
this.props = props;
};
// We intentionally don't expose the function on the constructor property.
// ReactElement should be indistinguishable from a plain object.
ReactElement.prototype = {
_isReactElement: true
};
if ("production" !== process.env.NODE_ENV) {
defineMutationMembrane(ReactElement.prototype);
}
ReactElement.createElement = function(type, config, children) {
var propName;
// Reserved names are extracted
var props = {};
var key = null;
var ref = null;
if (config != null) {
ref = config.ref === undefined ? null : config.ref;
key = config.key === undefined ? null : '' + config.key;
// Remaining properties are added to a new props object
for (propName in config) {
if (config.hasOwnProperty(propName) &&
!RESERVED_PROPS.hasOwnProperty(propName)) {
props[propName] = config[propName];
}
}
}
// Children can be more than one argument, and those are transferred onto
// the newly allocated props object.
var childrenLength = arguments.length - 2;
if (childrenLength === 1) {
props.children = children;
} else if (childrenLength > 1) {
var childArray = Array(childrenLength);
for (var i = 0; i < childrenLength; i++) {
childArray[i] = arguments[i + 2];
}
props.children = childArray;
}
// Resolve default props
if (type && type.defaultProps) {
var defaultProps = type.defaultProps;
for (propName in defaultProps) {
if (typeof props[propName] === 'undefined') {
props[propName] = defaultProps[propName];
}
}
}
return new ReactElement(
type,
key,
ref,
ReactCurrentOwner.current,
ReactContext.current,
props
);
};
ReactElement.createFactory = function(type) {
var factory = ReactElement.createElement.bind(null, type);
// Expose the type on the factory and the prototype so that it can be
// easily accessed on elements. E.g. <Foo />.type === Foo.type.
// This should not be named `constructor` since this may not be the function
// that created the element, and it may not even be a constructor.
// Legacy hook TODO: Warn if this is accessed
factory.type = type;
return factory;
};
ReactElement.cloneAndReplaceProps = function(oldElement, newProps) {
var newElement = new ReactElement(
oldElement.type,
oldElement.key,
oldElement.ref,
oldElement._owner,
oldElement._context,
newProps
);
if ("production" !== process.env.NODE_ENV) {
// If the key on the original is valid, then the clone is valid
newElement._store.validated = oldElement._store.validated;
}
return newElement;
};
ReactElement.cloneElement = function(element, config, children) {
var propName;
// Original props are copied
var props = assign({}, element.props);
// Reserved names are extracted
var key = element.key;
var ref = element.ref;
// Owner will be preserved, unless ref is overridden
var owner = element._owner;
if (config != null) {
if (config.ref !== undefined) {
// Silently steal the ref from the parent.
ref = config.ref;
owner = ReactCurrentOwner.current;
}
if (config.key !== undefined) {
key = '' + config.key;
}
// Remaining properties override existing props
for (propName in config) {
if (config.hasOwnProperty(propName) &&
!RESERVED_PROPS.hasOwnProperty(propName)) {
props[propName] = config[propName];
}
}
}
// Children can be more than one argument, and those are transferred onto
// the newly allocated props object.
var childrenLength = arguments.length - 2;
if (childrenLength === 1) {
props.children = children;
} else if (childrenLength > 1) {
var childArray = Array(childrenLength);
for (var i = 0; i < childrenLength; i++) {
childArray[i] = arguments[i + 2];
}
props.children = childArray;
}
return new ReactElement(
element.type,
key,
ref,
owner,
element._context,
props
);
};
/**
* @param {?object} object
* @return {boolean} True if `object` is a valid component.
* @final
*/
ReactElement.isValidElement = function(object) {
// ReactTestUtils is often used outside of beforeEach where as React is
// within it. This leads to two different instances of React on the same
// page. To identify a element from a different React instance we use
// a flag instead of an instanceof check.
var isElement = !!(object && object._isReactElement);
// if (isElement && !(object instanceof ReactElement)) {
// This is an indicator that you're using multiple versions of React at the
// same time. This will screw with ownership and stuff. Fix it, please.
// TODO: We could possibly warn here.
// }
return isElement;
};
module.exports = ReactElement;
}).call(this,require('_process'))
},{"./Object.assign":168,"./ReactContext":183,"./ReactCurrentOwner":184,"./warning":311,"_process":138}],203:[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 ReactElementValidator
*/
/**
* ReactElementValidator provides a wrapper around a element factory
* which validates the props passed to the element. This is intended to be
* used only in DEV and could be replaced by a static type checker for languages
* that support it.
*/
'use strict';
var ReactElement = require("./ReactElement");
var ReactFragment = require("./ReactFragment");
var ReactPropTypeLocations = require("./ReactPropTypeLocations");
var ReactPropTypeLocationNames = require("./ReactPropTypeLocationNames");
var ReactCurrentOwner = require("./ReactCurrentOwner");
var ReactNativeComponent = require("./ReactNativeComponent");
var getIteratorFn = require("./getIteratorFn");
var invariant = require("./invariant");
var warning = require("./warning");
function getDeclarationErrorAddendum() {
if (ReactCurrentOwner.current) {
var name = ReactCurrentOwner.current.getName();
if (name) {
return ' Check the render method of `' + name + '`.';
}
}
return '';
}
/**
* Warn if there's no key explicitly set on dynamic arrays of children or
* object keys are not valid. This allows us to keep track of children between
* updates.
*/
var ownerHasKeyUseWarning = {};
var loggedTypeFailures = {};
var NUMERIC_PROPERTY_REGEX = /^\d+$/;
/**
* Gets the instance's name for use in warnings.
*
* @internal
* @return {?string} Display name or undefined
*/
function getName(instance) {
var publicInstance = instance && instance.getPublicInstance();
if (!publicInstance) {
return undefined;
}
var constructor = publicInstance.constructor;
if (!constructor) {
return undefined;
}
return constructor.displayName || constructor.name || undefined;
}
/**
* Gets the current owner's displayName for use in warnings.
*
* @internal
* @return {?string} Display name or undefined
*/
function getCurrentOwnerDisplayName() {
var current = ReactCurrentOwner.current;
return (
current && getName(current) || undefined
);
}
/**
* Warn if the element doesn't have an explicit key assigned to it.
* This element is in an array. The array could grow and shrink or be
* reordered. All children that haven't already been validated are required to
* have a "key" property assigned to it.
*
* @internal
* @param {ReactElement} element Element that requires a key.
* @param {*} parentType element's parent's type.
*/
function validateExplicitKey(element, parentType) {
if (element._store.validated || element.key != null) {
return;
}
element._store.validated = true;
warnAndMonitorForKeyUse(
'Each child in an array or iterator should have a unique "key" prop.',
element,
parentType
);
}
/**
* Warn if the key is being defined as an object property but has an incorrect
* value.
*
* @internal
* @param {string} name Property name of the key.
* @param {ReactElement} element Component that requires a key.
* @param {*} parentType element's parent's type.
*/
function validatePropertyKey(name, element, parentType) {
if (!NUMERIC_PROPERTY_REGEX.test(name)) {
return;
}
warnAndMonitorForKeyUse(
'Child objects should have non-numeric keys so ordering is preserved.',
element,
parentType
);
}
/**
* Shared warning and monitoring code for the key warnings.
*
* @internal
* @param {string} message The base warning that gets output.
* @param {ReactElement} element Component that requires a key.
* @param {*} parentType element's parent's type.
*/
function warnAndMonitorForKeyUse(message, element, parentType) {
var ownerName = getCurrentOwnerDisplayName();
var parentName = typeof parentType === 'string' ?
parentType : parentType.displayName || parentType.name;
var useName = ownerName || parentName;
var memoizer = ownerHasKeyUseWarning[message] || (
(ownerHasKeyUseWarning[message] = {})
);
if (memoizer.hasOwnProperty(useName)) {
return;
}
memoizer[useName] = true;
var parentOrOwnerAddendum =
ownerName ? (" Check the render method of " + ownerName + ".") :
parentName ? (" Check the React.render call using <" + parentName + ">.") :
'';
// Usually the current owner is the offender, but if it accepts children as a
// property, it may be the creator of the child that's responsible for
// assigning it a key.
var childOwnerAddendum = '';
if (element &&
element._owner &&
element._owner !== ReactCurrentOwner.current) {
// Name of the component that originally created this child.
var childOwnerName = getName(element._owner);
childOwnerAddendum = (" It was passed a child from " + childOwnerName + ".");
}
("production" !== process.env.NODE_ENV ? warning(
false,
message + '%s%s See https://fb.me/react-warning-keys for more information.',
parentOrOwnerAddendum,
childOwnerAddendum
) : null);
}
/**
* Ensure that every element either is passed in a static location, in an
* array with an explicit keys property defined, or in an object literal
* with valid key property.
*
* @internal
* @param {ReactNode} node Statically passed child of any type.
* @param {*} parentType node's parent's type.
*/
function validateChildKeys(node, parentType) {
if (Array.isArray(node)) {
for (var i = 0; i < node.length; i++) {
var child = node[i];
if (ReactElement.isValidElement(child)) {
validateExplicitKey(child, parentType);
}
}
} else if (ReactElement.isValidElement(node)) {
// This element was passed in a valid location.
node._store.validated = true;
} else if (node) {
var iteratorFn = getIteratorFn(node);
// Entry iterators provide implicit keys.
if (iteratorFn) {
if (iteratorFn !== node.entries) {
var iterator = iteratorFn.call(node);
var step;
while (!(step = iterator.next()).done) {
if (ReactElement.isValidElement(step.value)) {
validateExplicitKey(step.value, parentType);
}
}
}
} else if (typeof node === 'object') {
var fragment = ReactFragment.extractIfFragment(node);
for (var key in fragment) {
if (fragment.hasOwnProperty(key)) {
validatePropertyKey(key, fragment[key], parentType);
}
}
}
}
}
/**
* Assert that the props are valid
*
* @param {string} componentName Name of the component for error messages.
* @param {object} propTypes Map of prop name to a ReactPropType
* @param {object} props
* @param {string} location e.g. "prop", "context", "child context"
* @private
*/
function checkPropTypes(componentName, propTypes, props, location) {
for (var propName in propTypes) {
if (propTypes.hasOwnProperty(propName)) {
var error;
// Prop type validation may throw. In case they do, we don't want to
// fail the render phase where it didn't fail before. So we log it.
// After these have been cleaned up, we'll let them throw.
try {
// This is intentionally an invariant that gets caught. It's the same
// behavior as without this statement except with a better message.
("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 && !(error.message in loggedTypeFailures)) {
// Only monitor this failure once because there tends to be a lot of the
// same error.
loggedTypeFailures[error.message] = true;
var addendum = getDeclarationErrorAddendum(this);
("production" !== process.env.NODE_ENV ? warning(false, 'Failed propType: %s%s', error.message, addendum) : null);
}
}
}
}
var warnedPropsMutations = {};
/**
* Warn about mutating props when setting `propName` on `element`.
*
* @param {string} propName The string key within props that was set
* @param {ReactElement} element
*/
function warnForPropsMutation(propName, element) {
var type = element.type;
var elementName = typeof type === 'string' ? type : type.displayName;
var ownerName = element._owner ?
element._owner.getPublicInstance().constructor.displayName : null;
var warningKey = propName + '|' + elementName + '|' + ownerName;
if (warnedPropsMutations.hasOwnProperty(warningKey)) {
return;
}
warnedPropsMutations[warningKey] = true;
var elementInfo = '';
if (elementName) {
elementInfo = ' <' + elementName + ' />';
}
var ownerInfo = '';
if (ownerName) {
ownerInfo = ' The element was created by ' + ownerName + '.';
}
("production" !== process.env.NODE_ENV ? warning(
false,
'Don\'t set .props.%s of the React component%s. Instead, specify the ' +
'correct value when initially creating the element or use ' +
'React.cloneElement to make a new element with updated props.%s',
propName,
elementInfo,
ownerInfo
) : null);
}
// Inline Object.is polyfill
function is(a, b) {
if (a !== a) {
// NaN
return b !== b;
}
if (a === 0 && b === 0) {
// +-0
return 1 / a === 1 / b;
}
return a === b;
}
/**
* Given an element, check if its props have been mutated since element
* creation (or the last call to this function). In particular, check if any
* new props have been added, which we can't directly catch by defining warning
* properties on the props object.
*
* @param {ReactElement} element
*/
function checkAndWarnForMutatedProps(element) {
if (!element._store) {
// Element was created using `new ReactElement` directly or with
// `ReactElement.createElement`; skip mutation checking
return;
}
var originalProps = element._store.originalProps;
var props = element.props;
for (var propName in props) {
if (props.hasOwnProperty(propName)) {
if (!originalProps.hasOwnProperty(propName) ||
!is(originalProps[propName], props[propName])) {
warnForPropsMutation(propName, element);
// Copy over the new value so that the two props objects match again
originalProps[propName] = props[propName];
}
}
}
}
/**
* Given an element, validate that its props follow the propTypes definition,
* provided by the type.
*
* @param {ReactElement} element
*/
function validatePropTypes(element) {
if (element.type == null) {
// This has already warned. Don't throw.
return;
}
// Extract the component class from the element. Converts string types
// to a composite class which may have propTypes.
// TODO: Validating a string's propTypes is not decoupled from the
// rendering target which is problematic.
var componentClass = ReactNativeComponent.getComponentClassForElement(
element
);
var name = componentClass.displayName || componentClass.name;
if (componentClass.propTypes) {
checkPropTypes(
name,
componentClass.propTypes,
element.props,
ReactPropTypeLocations.prop
);
}
if (typeof componentClass.getDefaultProps === 'function') {
("production" !== process.env.NODE_ENV ? warning(
componentClass.getDefaultProps.isReactClassApproved,
'getDefaultProps is only used on classic React.createClass ' +
'definitions. Use a static property named `defaultProps` instead.'
) : null);
}
}
var ReactElementValidator = {
checkAndWarnForMutatedProps: checkAndWarnForMutatedProps,
createElement: function(type, props, children) {
// We warn in this case but don't throw. We expect the element creation to
// succeed and there will likely be errors in render.
("production" !== process.env.NODE_ENV ? warning(
type != null,
'React.createElement: type should not be null or undefined. It should ' +
'be a string (for DOM elements) or a ReactClass (for composite ' +
'components).'
) : null);
var element = ReactElement.createElement.apply(this, arguments);
// The result can be nullish if a mock or a custom function is used.
// TODO: Drop this when these are no longer allowed as the type argument.
if (element == null) {
return element;
}
for (var i = 2; i < arguments.length; i++) {
validateChildKeys(arguments[i], type);
}
validatePropTypes(element);
return element;
},
createFactory: function(type) {
var validatedFactory = ReactElementValidator.createElement.bind(
null,
type
);
// Legacy hook TODO: Warn if this is accessed
validatedFactory.type = type;
if ("production" !== process.env.NODE_ENV) {
try {
Object.defineProperty(
validatedFactory,
'type',
{
enumerable: false,
get: function() {
("production" !== process.env.NODE_ENV ? warning(
false,
'Factory.type is deprecated. Access the class directly ' +
'before passing it to createFactory.'
) : null);
Object.defineProperty(this, 'type', {
value: type
});
return type;
}
}
);
} catch (x) {
// IE will fail on defineProperty (es5-shim/sham too)
}
}
return validatedFactory;
},
cloneElement: function(element, props, children) {
var newElement = ReactElement.cloneElement.apply(this, arguments);
for (var i = 2; i < arguments.length; i++) {
validateChildKeys(arguments[i], newElement.type);
}
validatePropTypes(newElement);
return newElement;
}
};
module.exports = ReactElementValidator;
}).call(this,require('_process'))
},{"./ReactCurrentOwner":184,"./ReactElement":202,"./ReactFragment":208,"./ReactNativeComponent":219,"./ReactPropTypeLocationNames":223,"./ReactPropTypeLocations":224,"./getIteratorFn":281,"./invariant":290,"./warning":311,"_process":138}],204:[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 ReactEmptyComponent
*/
'use strict';
var ReactElement = require("./ReactElement");
var ReactInstanceMap = require("./ReactInstanceMap");
var invariant = require("./invariant");
var component;
// This registry keeps track of the React IDs of the components that rendered to
// `null` (in reality a placeholder such as `noscript`)
var nullComponentIDsRegistry = {};
var ReactEmptyComponentInjection = {
injectEmptyComponent: function(emptyComponent) {
component = ReactElement.createFactory(emptyComponent);
}
};
var ReactEmptyComponentType = function() {};
ReactEmptyComponentType.prototype.componentDidMount = function() {
var internalInstance = ReactInstanceMap.get(this);
// TODO: Make sure we run these methods in the correct order, we shouldn't
// need this check. We're going to assume if we're here it means we ran
// componentWillUnmount already so there is no internal instance (it gets
// removed as part of the unmounting process).
if (!internalInstance) {
return;
}
registerNullComponentID(internalInstance._rootNodeID);
};
ReactEmptyComponentType.prototype.componentWillUnmount = function() {
var internalInstance = ReactInstanceMap.get(this);
// TODO: Get rid of this check. See TODO in componentDidMount.
if (!internalInstance) {
return;
}
deregisterNullComponentID(internalInstance._rootNodeID);
};
ReactEmptyComponentType.prototype.render = function() {
("production" !== process.env.NODE_ENV ? invariant(
component,
'Trying to return null from a render, but no null placeholder component ' +
'was injected.'
) : invariant(component));
return component();
};
var emptyElement = ReactElement.createElement(ReactEmptyComponentType);
/**
* Mark the component as having rendered to null.
* @param {string} id Component's `_rootNodeID`.
*/
function registerNullComponentID(id) {
nullComponentIDsRegistry[id] = true;
}
/**
* Unmark the component as having rendered to null: it renders to something now.
* @param {string} id Component's `_rootNodeID`.
*/
function deregisterNullComponentID(id) {
delete nullComponentIDsRegistry[id];
}
/**
* @param {string} id Component's `_rootNodeID`.
* @return {boolean} True if the component is rendered to null.
*/
function isNullComponentID(id) {
return !!nullComponentIDsRegistry[id];
}
var ReactEmptyComponent = {
emptyElement: emptyElement,
injection: ReactEmptyComponentInjection,
isNullComponentID: isNullComponentID
};
module.exports = ReactEmptyComponent;
}).call(this,require('_process'))
},{"./ReactElement":202,"./ReactInstanceMap":212,"./invariant":290,"_process":138}],205:[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 ReactErrorUtils
* @typechecks
*/
"use strict";
var ReactErrorUtils = {
/**
* Creates a guarded version of a function. This is supposed to make debugging
* of event handlers easier. To aid debugging with the browser's debugger,
* this currently simply returns the original function.
*
* @param {function} func Function to be executed
* @param {string} name The name of the guard
* @return {function}
*/
guard: function(func, name) {
return func;
}
};
module.exports = ReactErrorUtils;
},{}],206:[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 ReactEventEmitterMixin
*/
'use strict';
var EventPluginHub = require("./EventPluginHub");
function runEventQueueInBatch(events) {
EventPluginHub.enqueueEvents(events);
EventPluginHub.processEventQueue();
}
var ReactEventEmitterMixin = {
/**
* Streams a fired top-level event to `EventPluginHub` where plugins have the
* opportunity to create `ReactEvent`s to be dispatched.
*
* @param {string} topLevelType Record from `EventConstants`.
* @param {object} topLevelTarget The listening component root node.
* @param {string} topLevelTargetID ID of `topLevelTarget`.
* @param {object} nativeEvent Native environment event.
*/
handleTopLevel: function(
topLevelType,
topLevelTarget,
topLevelTargetID,
nativeEvent) {
var events = EventPluginHub.extractEvents(
topLevelType,
topLevelTarget,
topLevelTargetID,
nativeEvent
);
runEventQueueInBatch(events);
}
};
module.exports = ReactEventEmitterMixin;
},{"./EventPluginHub":157}],207:[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 ReactEventListener
* @typechecks static-only
*/
'use strict';
var EventListener = require("./EventListener");
var ExecutionEnvironment = require("./ExecutionEnvironment");
var PooledClass = require("./PooledClass");
var ReactInstanceHandles = require("./ReactInstanceHandles");
var ReactMount = require("./ReactMount");
var ReactUpdates = require("./ReactUpdates");
var assign = require("./Object.assign");
var getEventTarget = require("./getEventTarget");
var getUnboundedScrollPosition = require("./getUnboundedScrollPosition");
/**
* Finds the parent React component of `node`.
*
* @param {*} node
* @return {?DOMEventTarget} Parent container, or `null` if the specified node
* is not nested.
*/
function findParent(node) {
// TODO: It may be a good idea to cache this to prevent unnecessary DOM
// traversal, but caching is difficult to do correctly without using a
// mutation observer to listen for all DOM changes.
var nodeID = ReactMount.getID(node);
var rootID = ReactInstanceHandles.getReactRootIDFromNodeID(nodeID);
var container = ReactMount.findReactContainerForID(rootID);
var parent = ReactMount.getFirstReactDOM(container);
return parent;
}
// Used to store ancestor hierarchy in top level callback
function TopLevelCallbackBookKeeping(topLevelType, nativeEvent) {
this.topLevelType = topLevelType;
this.nativeEvent = nativeEvent;
this.ancestors = [];
}
assign(TopLevelCallbackBookKeeping.prototype, {
destructor: function() {
this.topLevelType = null;
this.nativeEvent = null;
this.ancestors.length = 0;
}
});
PooledClass.addPoolingTo(
TopLevelCallbackBookKeeping,
PooledClass.twoArgumentPooler
);
function handleTopLevelImpl(bookKeeping) {
var topLevelTarget = ReactMount.getFirstReactDOM(
getEventTarget(bookKeeping.nativeEvent)
) || window;
// Loop through the hierarchy, in case there's any nested components.
// It's important that we build the array of ancestors before calling any
// event handlers, because event handlers can modify the DOM, leading to
// inconsistencies with ReactMount's node cache. See #1105.
var ancestor = topLevelTarget;
while (ancestor) {
bookKeeping.ancestors.push(ancestor);
ancestor = findParent(ancestor);
}
for (var i = 0, l = bookKeeping.ancestors.length; i < l; i++) {
topLevelTarget = bookKeeping.ancestors[i];
var topLevelTargetID = ReactMount.getID(topLevelTarget) || '';
ReactEventListener._handleTopLevel(
bookKeeping.topLevelType,
topLevelTarget,
topLevelTargetID,
bookKeeping.nativeEvent
);
}
}
function scrollValueMonitor(cb) {
var scrollPosition = getUnboundedScrollPosition(window);
cb(scrollPosition);
}
var ReactEventListener = {
_enabled: true,
_handleTopLevel: null,
WINDOW_HANDLE: ExecutionEnvironment.canUseDOM ? window : null,
setHandleTopLevel: function(handleTopLevel) {
ReactEventListener._handleTopLevel = handleTopLevel;
},
setEnabled: function(enabled) {
ReactEventListener._enabled = !!enabled;
},
isEnabled: function() {
return ReactEventListener._enabled;
},
/**
* Traps top-level events by using event bubbling.
*
* @param {string} topLevelType Record from `EventConstants`.
* @param {string} handlerBaseName Event name (e.g. "click").
* @param {object} handle Element on which to attach listener.
* @return {object} An object with a remove function which will forcefully
* remove the listener.
* @internal
*/
trapBubbledEvent: function(topLevelType, handlerBaseName, handle) {
var element = handle;
if (!element) {
return null;
}
return EventListener.listen(
element,
handlerBaseName,
ReactEventListener.dispatchEvent.bind(null, topLevelType)
);
},
/**
* Traps a top-level event by using event capturing.
*
* @param {string} topLevelType Record from `EventConstants`.
* @param {string} handlerBaseName Event name (e.g. "click").
* @param {object} handle Element on which to attach listener.
* @return {object} An object with a remove function which will forcefully
* remove the listener.
* @internal
*/
trapCapturedEvent: function(topLevelType, handlerBaseName, handle) {
var element = handle;
if (!element) {
return null;
}
return EventListener.capture(
element,
handlerBaseName,
ReactEventListener.dispatchEvent.bind(null, topLevelType)
);
},
monitorScrollValue: function(refresh) {
var callback = scrollValueMonitor.bind(null, refresh);
EventListener.listen(window, 'scroll', callback);
},
dispatchEvent: function(topLevelType, nativeEvent) {
if (!ReactEventListener._enabled) {
return;
}
var bookKeeping = TopLevelCallbackBookKeeping.getPooled(
topLevelType,
nativeEvent
);
try {
// Event queue being processed in the same cycle allows
// `preventDefault`.
ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);
} finally {
TopLevelCallbackBookKeeping.release(bookKeeping);
}
}
};
module.exports = ReactEventListener;
},{"./EventListener":156,"./ExecutionEnvironment":161,"./Object.assign":168,"./PooledClass":169,"./ReactInstanceHandles":211,"./ReactMount":216,"./ReactUpdates":239,"./getEventTarget":280,"./getUnboundedScrollPosition":286}],208:[function(require,module,exports){
(function (process){
/**
* Copyright 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 ReactFragment
*/
'use strict';
var ReactElement = require("./ReactElement");
var warning = require("./warning");
/**
* We used to allow keyed objects to serve as a collection of ReactElements,
* or nested sets. This allowed us a way to explicitly key a set a fragment of
* components. This is now being replaced with an opaque data structure.
* The upgrade path is to call React.addons.createFragment({ key: value }) to
* create a keyed fragment. The resulting data structure is opaque, for now.
*/
if ("production" !== process.env.NODE_ENV) {
var fragmentKey = '_reactFragment';
var didWarnKey = '_reactDidWarn';
var canWarnForReactFragment = false;
try {
// Feature test. Don't even try to issue this warning if we can't use
// enumerable: false.
var dummy = function() {
return 1;
};
Object.defineProperty(
{},
fragmentKey,
{enumerable: false, value: true}
);
Object.defineProperty(
{},
'key',
{enumerable: true, get: dummy}
);
canWarnForReactFragment = true;
} catch (x) { }
var proxyPropertyAccessWithWarning = function(obj, key) {
Object.defineProperty(obj, key, {
enumerable: true,
get: function() {
("production" !== process.env.NODE_ENV ? warning(
this[didWarnKey],
'A ReactFragment is an opaque type. Accessing any of its ' +
'properties is deprecated. Pass it to one of the React.Children ' +
'helpers.'
) : null);
this[didWarnKey] = true;
return this[fragmentKey][key];
},
set: function(value) {
("production" !== process.env.NODE_ENV ? warning(
this[didWarnKey],
'A ReactFragment is an immutable opaque type. Mutating its ' +
'properties is deprecated.'
) : null);
this[didWarnKey] = true;
this[fragmentKey][key] = value;
}
});
};
var issuedWarnings = {};
var didWarnForFragment = function(fragment) {
// We use the keys and the type of the value as a heuristic to dedupe the
// warning to avoid spamming too much.
var fragmentCacheKey = '';
for (var key in fragment) {
fragmentCacheKey += key + ':' + (typeof fragment[key]) + ',';
}
var alreadyWarnedOnce = !!issuedWarnings[fragmentCacheKey];
issuedWarnings[fragmentCacheKey] = true;
return alreadyWarnedOnce;
};
}
var ReactFragment = {
// Wrap a keyed object in an opaque proxy that warns you if you access any
// of its properties.
create: function(object) {
if ("production" !== process.env.NODE_ENV) {
if (typeof object !== 'object' || !object || Array.isArray(object)) {
("production" !== process.env.NODE_ENV ? warning(
false,
'React.addons.createFragment only accepts a single object.',
object
) : null);
return object;
}
if (ReactElement.isValidElement(object)) {
("production" !== process.env.NODE_ENV ? warning(
false,
'React.addons.createFragment does not accept a ReactElement ' +
'without a wrapper object.'
) : null);
return object;
}
if (canWarnForReactFragment) {
var proxy = {};
Object.defineProperty(proxy, fragmentKey, {
enumerable: false,
value: object
});
Object.defineProperty(proxy, didWarnKey, {
writable: true,
enumerable: false,
value: false
});
for (var key in object) {
proxyPropertyAccessWithWarning(proxy, key);
}
Object.preventExtensions(proxy);
return proxy;
}
}
return object;
},
// Extract the original keyed object from the fragment opaque type. Warn if
// a plain object is passed here.
extract: function(fragment) {
if ("production" !== process.env.NODE_ENV) {
if (canWarnForReactFragment) {
if (!fragment[fragmentKey]) {
("production" !== process.env.NODE_ENV ? warning(
didWarnForFragment(fragment),
'Any use of a keyed object should be wrapped in ' +
'React.addons.createFragment(object) before being passed as a ' +
'child.'
) : null);
return fragment;
}
return fragment[fragmentKey];
}
}
return fragment;
},
// Check if this is a fragment and if so, extract the keyed object. If it
// is a fragment-like object, warn that it should be wrapped. Ignore if we
// can't determine what kind of object this is.
extractIfFragment: function(fragment) {
if ("production" !== process.env.NODE_ENV) {
if (canWarnForReactFragment) {
// If it is the opaque type, return the keyed object.
if (fragment[fragmentKey]) {
return fragment[fragmentKey];
}
// Otherwise, check each property if it has an element, if it does
// it is probably meant as a fragment, so we can warn early. Defer,
// the warning to extract.
for (var key in fragment) {
if (fragment.hasOwnProperty(key) &&
ReactElement.isValidElement(fragment[key])) {
// This looks like a fragment object, we should provide an
// early warning.
return ReactFragment.extract(fragment);
}
}
}
}
return fragment;
}
};
module.exports = ReactFragment;
}).call(this,require('_process'))
},{"./ReactElement":202,"./warning":311,"_process":138}],209:[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 ReactInjection
*/
'use strict';
var DOMProperty = require("./DOMProperty");
var EventPluginHub = require("./EventPluginHub");
var ReactComponentEnvironment = require("./ReactComponentEnvironment");
var ReactClass = require("./ReactClass");
var ReactEmptyComponent = require("./ReactEmptyComponent");
var ReactBrowserEventEmitter = require("./ReactBrowserEventEmitter");
var ReactNativeComponent = require("./ReactNativeComponent");
var ReactDOMComponent = require("./ReactDOMComponent");
var ReactPerf = require("./ReactPerf");
var ReactRootIndex = require("./ReactRootIndex");
var ReactUpdates = require("./ReactUpdates");
var ReactInjection = {
Component: ReactComponentEnvironment.injection,
Class: ReactClass.injection,
DOMComponent: ReactDOMComponent.injection,
DOMProperty: DOMProperty.injection,
EmptyComponent: ReactEmptyComponent.injection,
EventPluginHub: EventPluginHub.injection,
EventEmitter: ReactBrowserEventEmitter.injection,
NativeComponent: ReactNativeComponent.injection,
Perf: ReactPerf.injection,
RootIndex: ReactRootIndex.injection,
Updates: ReactUpdates.injection
};
module.exports = ReactInjection;
},{"./DOMProperty":150,"./EventPluginHub":157,"./ReactBrowserEventEmitter":172,"./ReactClass":177,"./ReactComponentEnvironment":180,"./ReactDOMComponent":187,"./ReactEmptyComponent":204,"./ReactNativeComponent":219,"./ReactPerf":221,"./ReactRootIndex":230,"./ReactUpdates":239}],210:[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 ReactInputSelection
*/
'use strict';
var ReactDOMSelection = require("./ReactDOMSelection");
var containsNode = require("./containsNode");
var focusNode = require("./focusNode");
var getActiveElement = require("./getActiveElement");
function isInDocument(node) {
return containsNode(document.documentElement, node);
}
/**
* @ReactInputSelection: React input selection module. Based on Selection.js,
* but modified to be suitable for react and has a couple of bug fixes (doesn't
* assume buttons have range selections allowed).
* Input selection module for React.
*/
var ReactInputSelection = {
hasSelectionCapabilities: function(elem) {
return elem && (
((elem.nodeName === 'INPUT' && elem.type === 'text') ||
elem.nodeName === 'TEXTAREA' || elem.contentEditable === 'true')
);
},
getSelectionInformation: function() {
var focusedElem = getActiveElement();
return {
focusedElem: focusedElem,
selectionRange:
ReactInputSelection.hasSelectionCapabilities(focusedElem) ?
ReactInputSelection.getSelection(focusedElem) :
null
};
},
/**
* @restoreSelection: If any selection information was potentially lost,
* restore it. This is useful when performing operations that could remove dom
* nodes and place them back in, resulting in focus being lost.
*/
restoreSelection: function(priorSelectionInformation) {
var curFocusedElem = getActiveElement();
var priorFocusedElem = priorSelectionInformation.focusedElem;
var priorSelectionRange = priorSelectionInformation.selectionRange;
if (curFocusedElem !== priorFocusedElem &&
isInDocument(priorFocusedElem)) {
if (ReactInputSelection.hasSelectionCapabilities(priorFocusedElem)) {
ReactInputSelection.setSelection(
priorFocusedElem,
priorSelectionRange
);
}
focusNode(priorFocusedElem);
}
},
/**
* @getSelection: Gets the selection bounds of a focused textarea, input or
* contentEditable node.
* -@input: Look up selection bounds of this input
* -@return {start: selectionStart, end: selectionEnd}
*/
getSelection: function(input) {
var selection;
if ('selectionStart' in input) {
// Modern browser with input or textarea.
selection = {
start: input.selectionStart,
end: input.selectionEnd
};
} else if (document.selection && input.nodeName === 'INPUT') {
// IE8 input.
var range = document.selection.createRange();
// There can only be one selection per document in IE, so it must
// be in our element.
if (range.parentElement() === input) {
selection = {
start: -range.moveStart('character', -input.value.length),
end: -range.moveEnd('character', -input.value.length)
};
}
} else {
// Content editable or old IE textarea.
selection = ReactDOMSelection.getOffsets(input);
}
return selection || {start: 0, end: 0};
},
/**
* @setSelection: Sets the selection bounds of a textarea or input and focuses
* the input.
* -@input Set selection bounds of this input or textarea
* -@offsets Object of same form that is returned from get*
*/
setSelection: function(input, offsets) {
var start = offsets.start;
var end = offsets.end;
if (typeof end === 'undefined') {
end = start;
}
if ('selectionStart' in input) {
input.selectionStart = start;
input.selectionEnd = Math.min(end, input.value.length);
} else if (document.selection && input.nodeName === 'INPUT') {
var range = input.createTextRange();
range.collapse(true);
range.moveStart('character', start);
range.moveEnd('character', end - start);
range.select();
} else {
ReactDOMSelection.setOffsets(input, offsets);
}
}
};
module.exports = ReactInputSelection;
},{"./ReactDOMSelection":195,"./containsNode":263,"./focusNode":274,"./getActiveElement":276}],211:[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 ReactInstanceHandles
* @typechecks static-only
*/
'use strict';
var ReactRootIndex = require("./ReactRootIndex");
var invariant = require("./invariant");
var SEPARATOR = '.';
var SEPARATOR_LENGTH = SEPARATOR.length;
/**
* Maximum depth of traversals before we consider the possibility of a bad ID.
*/
var MAX_TREE_DEPTH = 100;
/**
* Creates a DOM ID prefix to use when mounting React components.
*
* @param {number} index A unique integer
* @return {string} React root ID.
* @internal
*/
function getReactRootIDString(index) {
return SEPARATOR + index.toString(36);
}
/**
* Checks if a character in the supplied ID is a separator or the end.
*
* @param {string} id A React DOM ID.
* @param {number} index Index of the character to check.
* @return {boolean} True if the character is a separator or end of the ID.
* @private
*/
function isBoundary(id, index) {
return id.charAt(index) === SEPARATOR || index === id.length;
}
/**
* Checks if the supplied string is a valid React DOM ID.
*
* @param {string} id A React DOM ID, maybe.
* @return {boolean} True if the string is a valid React DOM ID.
* @private
*/
function isValidID(id) {
return id === '' || (
id.charAt(0) === SEPARATOR && id.charAt(id.length - 1) !== SEPARATOR
);
}
/**
* Checks if the first ID is an ancestor of or equal to the second ID.
*
* @param {string} ancestorID
* @param {string} descendantID
* @return {boolean} True if `ancestorID` is an ancestor of `descendantID`.
* @internal
*/
function isAncestorIDOf(ancestorID, descendantID) {
return (
descendantID.indexOf(ancestorID) === 0 &&
isBoundary(descendantID, ancestorID.length)
);
}
/**
* Gets the parent ID of the supplied React DOM ID, `id`.
*
* @param {string} id ID of a component.
* @return {string} ID of the parent, or an empty string.
* @private
*/
function getParentID(id) {
return id ? id.substr(0, id.lastIndexOf(SEPARATOR)) : '';
}
/**
* Gets the next DOM ID on the tree path from the supplied `ancestorID` to the
* supplied `destinationID`. If they are equal, the ID is returned.
*
* @param {string} ancestorID ID of an ancestor node of `destinationID`.
* @param {string} destinationID ID of the destination node.
* @return {string} Next ID on the path from `ancestorID` to `destinationID`.
* @private
*/
function getNextDescendantID(ancestorID, destinationID) {
("production" !== process.env.NODE_ENV ? invariant(
isValidID(ancestorID) && isValidID(destinationID),
'getNextDescendantID(%s, %s): Received an invalid React DOM ID.',
ancestorID,
destinationID
) : invariant(isValidID(ancestorID) && isValidID(destinationID)));
("production" !== process.env.NODE_ENV ? invariant(
isAncestorIDOf(ancestorID, destinationID),
'getNextDescendantID(...): React has made an invalid assumption about ' +
'the DOM hierarchy. Expected `%s` to be an ancestor of `%s`.',
ancestorID,
destinationID
) : invariant(isAncestorIDOf(ancestorID, destinationID)));
if (ancestorID === destinationID) {
return ancestorID;
}
// Skip over the ancestor and the immediate separator. Traverse until we hit
// another separator or we reach the end of `destinationID`.
var start = ancestorID.length + SEPARATOR_LENGTH;
var i;
for (i = start; i < destinationID.length; i++) {
if (isBoundary(destinationID, i)) {
break;
}
}
return destinationID.substr(0, i);
}
/**
* Gets the nearest common ancestor ID of two IDs.
*
* Using this ID scheme, the nearest common ancestor ID is the longest common
* prefix of the two IDs that immediately preceded a "marker" in both strings.
*
* @param {string} oneID
* @param {string} twoID
* @return {string} Nearest common ancestor ID, or the empty string if none.
* @private
*/
function getFirstCommonAncestorID(oneID, twoID) {
var minLength = Math.min(oneID.length, twoID.length);
if (minLength === 0) {
return '';
}
var lastCommonMarkerIndex = 0;
// Use `<=` to traverse until the "EOL" of the shorter string.
for (var i = 0; i <= minLength; i++) {
if (isBoundary(oneID, i) && isBoundary(twoID, i)) {
lastCommonMarkerIndex = i;
} else if (oneID.charAt(i) !== twoID.charAt(i)) {
break;
}
}
var longestCommonID = oneID.substr(0, lastCommonMarkerIndex);
("production" !== process.env.NODE_ENV ? invariant(
isValidID(longestCommonID),
'getFirstCommonAncestorID(%s, %s): Expected a valid React DOM ID: %s',
oneID,
twoID,
longestCommonID
) : invariant(isValidID(longestCommonID)));
return longestCommonID;
}
/**
* Traverses the parent path between two IDs (either up or down). The IDs must
* not be the same, and there must exist a parent path between them. If the
* callback returns `false`, traversal is stopped.
*
* @param {?string} start ID at which to start traversal.
* @param {?string} stop ID at which to end traversal.
* @param {function} cb Callback to invoke each ID with.
* @param {?boolean} skipFirst Whether or not to skip the first node.
* @param {?boolean} skipLast Whether or not to skip the last node.
* @private
*/
function traverseParentPath(start, stop, cb, arg, skipFirst, skipLast) {
start = start || '';
stop = stop || '';
("production" !== process.env.NODE_ENV ? invariant(
start !== stop,
'traverseParentPath(...): Cannot traverse from and to the same ID, `%s`.',
start
) : invariant(start !== stop));
var traverseUp = isAncestorIDOf(stop, start);
("production" !== process.env.NODE_ENV ? invariant(
traverseUp || isAncestorIDOf(start, stop),
'traverseParentPath(%s, %s, ...): Cannot traverse from two IDs that do ' +
'not have a parent path.',
start,
stop
) : invariant(traverseUp || isAncestorIDOf(start, stop)));
// Traverse from `start` to `stop` one depth at a time.
var depth = 0;
var traverse = traverseUp ? getParentID : getNextDescendantID;
for (var id = start; /* until break */; id = traverse(id, stop)) {
var ret;
if ((!skipFirst || id !== start) && (!skipLast || id !== stop)) {
ret = cb(id, traverseUp, arg);
}
if (ret === false || id === stop) {
// Only break //after// visiting `stop`.
break;
}
("production" !== process.env.NODE_ENV ? invariant(
depth++ < MAX_TREE_DEPTH,
'traverseParentPath(%s, %s, ...): Detected an infinite loop while ' +
'traversing the React DOM ID tree. This may be due to malformed IDs: %s',
start, stop
) : invariant(depth++ < MAX_TREE_DEPTH));
}
}
/**
* Manages the IDs assigned to DOM representations of React components. This
* uses a specific scheme in order to traverse the DOM efficiently (e.g. in
* order to simulate events).
*
* @internal
*/
var ReactInstanceHandles = {
/**
* Constructs a React root ID
* @return {string} A React root ID.
*/
createReactRootID: function() {
return getReactRootIDString(ReactRootIndex.createReactRootIndex());
},
/**
* Constructs a React ID by joining a root ID with a name.
*
* @param {string} rootID Root ID of a parent component.
* @param {string} name A component's name (as flattened children).
* @return {string} A React ID.
* @internal
*/
createReactID: function(rootID, name) {
return rootID + name;
},
/**
* Gets the DOM ID of the React component that is the root of the tree that
* contains the React component with the supplied DOM ID.
*
* @param {string} id DOM ID of a React component.
* @return {?string} DOM ID of the React component that is the root.
* @internal
*/
getReactRootIDFromNodeID: function(id) {
if (id && id.charAt(0) === SEPARATOR && id.length > 1) {
var index = id.indexOf(SEPARATOR, 1);
return index > -1 ? id.substr(0, index) : id;
}
return null;
},
/**
* Traverses the ID hierarchy and invokes the supplied `cb` on any IDs that
* should would receive a `mouseEnter` or `mouseLeave` event.
*
* NOTE: Does not invoke the callback on the nearest common ancestor because
* nothing "entered" or "left" that element.
*
* @param {string} leaveID ID being left.
* @param {string} enterID ID being entered.
* @param {function} cb Callback to invoke on each entered/left ID.
* @param {*} upArg Argument to invoke the callback with on left IDs.
* @param {*} downArg Argument to invoke the callback with on entered IDs.
* @internal
*/
traverseEnterLeave: function(leaveID, enterID, cb, upArg, downArg) {
var ancestorID = getFirstCommonAncestorID(leaveID, enterID);
if (ancestorID !== leaveID) {
traverseParentPath(leaveID, ancestorID, cb, upArg, false, true);
}
if (ancestorID !== enterID) {
traverseParentPath(ancestorID, enterID, cb, downArg, true, false);
}
},
/**
* Simulates the traversal of a two-phase, capture/bubble event dispatch.
*
* NOTE: This traversal happens on IDs without touching the DOM.
*
* @param {string} targetID ID of the target node.
* @param {function} cb Callback to invoke.
* @param {*} arg Argument to invoke the callback with.
* @internal
*/
traverseTwoPhase: function(targetID, cb, arg) {
if (targetID) {
traverseParentPath('', targetID, cb, arg, true, false);
traverseParentPath(targetID, '', cb, arg, false, true);
}
},
/**
* Traverse a node ID, calling the supplied `cb` for each ancestor ID. For
* example, passing `.0.$row-0.1` would result in `cb` getting called
* with `.0`, `.0.$row-0`, and `.0.$row-0.1`.
*
* NOTE: This traversal happens on IDs without touching the DOM.
*
* @param {string} targetID ID of the target node.
* @param {function} cb Callback to invoke.
* @param {*} arg Argument to invoke the callback with.
* @internal
*/
traverseAncestors: function(targetID, cb, arg) {
traverseParentPath('', targetID, cb, arg, true, false);
},
/**
* Exposed for unit testing.
* @private
*/
_getFirstCommonAncestorID: getFirstCommonAncestorID,
/**
* Exposed for unit testing.
* @private
*/
_getNextDescendantID: getNextDescendantID,
isAncestorIDOf: isAncestorIDOf,
SEPARATOR: SEPARATOR
};
module.exports = ReactInstanceHandles;
}).call(this,require('_process'))
},{"./ReactRootIndex":230,"./invariant":290,"_process":138}],212:[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 ReactInstanceMap
*/
'use strict';
/**
* `ReactInstanceMap` maintains a mapping from a public facing stateful
* instance (key) and the internal representation (value). This allows public
* methods to accept the user facing instance as an argument and map them back
* to internal methods.
*/
// TODO: Replace this with ES6: var ReactInstanceMap = new Map();
var ReactInstanceMap = {
/**
* This API should be called `delete` but we'd have to make sure to always
* transform these to strings for IE support. When this transform is fully
* supported we can rename it.
*/
remove: function(key) {
key._reactInternalInstance = undefined;
},
get: function(key) {
return key._reactInternalInstance;
},
has: function(key) {
return key._reactInternalInstance !== undefined;
},
set: function(key, value) {
key._reactInternalInstance = value;
}
};
module.exports = ReactInstanceMap;
},{}],213:[function(require,module,exports){
/**
* Copyright 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 ReactLifeCycle
*/
'use strict';
/**
* This module manages the bookkeeping when a component is in the process
* of being mounted or being unmounted. This is used as a way to enforce
* invariants (or warnings) when it is not recommended to call
* setState/forceUpdate.
*
* currentlyMountingInstance: During the construction phase, it is not possible
* to trigger an update since the instance is not fully mounted yet. However, we
* currently allow this as a convenience for mutating the initial state.
*
* currentlyUnmountingInstance: During the unmounting phase, the instance is
* still mounted and can therefore schedule an update. However, this is not
* recommended and probably an error since it's about to be unmounted.
* Therefore we still want to trigger in an error for that case.
*/
var ReactLifeCycle = {
currentlyMountingInstance: null,
currentlyUnmountingInstance: null
};
module.exports = ReactLifeCycle;
},{}],214:[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 ReactLink
* @typechecks static-only
*/
'use strict';
/**
* ReactLink encapsulates a common pattern in which a component wants to modify
* a prop received from its parent. ReactLink allows the parent to pass down a
* value coupled with a callback that, when invoked, expresses an intent to
* modify that value. For example:
*
* React.createClass({
* getInitialState: function() {
* return {value: ''};
* },
* render: function() {
* var valueLink = new ReactLink(this.state.value, this._handleValueChange);
* return <input valueLink={valueLink} />;
* },
* this._handleValueChange: function(newValue) {
* this.setState({value: newValue});
* }
* });
*
* We have provided some sugary mixins to make the creation and
* consumption of ReactLink easier; see LinkedValueUtils and LinkedStateMixin.
*/
var React = require("./React");
/**
* @param {*} value current value of the link
* @param {function} requestChange callback to request a change
*/
function ReactLink(value, requestChange) {
this.value = value;
this.requestChange = requestChange;
}
/**
* Creates a PropType that enforces the ReactLink API and optionally checks the
* type of the value being passed inside the link. Example:
*
* MyComponent.propTypes = {
* tabIndexLink: ReactLink.PropTypes.link(React.PropTypes.number)
* }
*/
function createLinkTypeChecker(linkType) {
var shapes = {
value: typeof linkType === 'undefined' ?
React.PropTypes.any.isRequired :
linkType.isRequired,
requestChange: React.PropTypes.func.isRequired
};
return React.PropTypes.shape(shapes);
}
ReactLink.PropTypes = {
link: createLinkTypeChecker
};
module.exports = ReactLink;
},{"./React":170}],215:[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 ReactMarkupChecksum
*/
'use strict';
var adler32 = require("./adler32");
var ReactMarkupChecksum = {
CHECKSUM_ATTR_NAME: 'data-react-checksum',
/**
* @param {string} markup Markup string
* @return {string} Markup string with checksum attribute attached
*/
addChecksumToMarkup: function(markup) {
var checksum = adler32(markup);
return markup.replace(
'>',
' ' + ReactMarkupChecksum.CHECKSUM_ATTR_NAME + '="' + checksum + '">'
);
},
/**
* @param {string} markup to use
* @param {DOMElement} element root React element
* @returns {boolean} whether or not the markup is the same
*/
canReuseMarkup: function(markup, element) {
var existingChecksum = element.getAttribute(
ReactMarkupChecksum.CHECKSUM_ATTR_NAME
);
existingChecksum = existingChecksum && parseInt(existingChecksum, 10);
var markupChecksum = adler32(markup);
return markupChecksum === existingChecksum;
}
};
module.exports = ReactMarkupChecksum;
},{"./adler32":259}],216:[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 ReactMount
*/
'use strict';
var DOMProperty = require("./DOMProperty");
var ReactBrowserEventEmitter = require("./ReactBrowserEventEmitter");
var ReactCurrentOwner = require("./ReactCurrentOwner");
var ReactElement = require("./ReactElement");
var ReactElementValidator = require("./ReactElementValidator");
var ReactEmptyComponent = require("./ReactEmptyComponent");
var ReactInstanceHandles = require("./ReactInstanceHandles");
var ReactInstanceMap = require("./ReactInstanceMap");
var ReactMarkupChecksum = require("./ReactMarkupChecksum");
var ReactPerf = require("./ReactPerf");
var ReactReconciler = require("./ReactReconciler");
var ReactUpdateQueue = require("./ReactUpdateQueue");
var ReactUpdates = require("./ReactUpdates");
var emptyObject = require("./emptyObject");
var containsNode = require("./containsNode");
var getReactRootElementInContainer = require("./getReactRootElementInContainer");
var instantiateReactComponent = require("./instantiateReactComponent");
var invariant = require("./invariant");
var setInnerHTML = require("./setInnerHTML");
var shouldUpdateReactComponent = require("./shouldUpdateReactComponent");
var warning = require("./warning");
var SEPARATOR = ReactInstanceHandles.SEPARATOR;
var ATTR_NAME = DOMProperty.ID_ATTRIBUTE_NAME;
var nodeCache = {};
var ELEMENT_NODE_TYPE = 1;
var DOC_NODE_TYPE = 9;
/** Mapping from reactRootID to React component instance. */
var instancesByReactRootID = {};
/** Mapping from reactRootID to `container` nodes. */
var containersByReactRootID = {};
if ("production" !== process.env.NODE_ENV) {
/** __DEV__-only mapping from reactRootID to root elements. */
var rootElementsByReactRootID = {};
}
// Used to store breadth-first search state in findComponentRoot.
var findComponentRootReusableArray = [];
/**
* Finds the index of the first character
* that's not common between the two given strings.
*
* @return {number} the index of the character where the strings diverge
*/
function firstDifferenceIndex(string1, string2) {
var minLen = Math.min(string1.length, string2.length);
for (var i = 0; i < minLen; i++) {
if (string1.charAt(i) !== string2.charAt(i)) {
return i;
}
}
return string1.length === string2.length ? -1 : minLen;
}
/**
* @param {DOMElement} container DOM element that may contain a React component.
* @return {?string} A "reactRoot" ID, if a React component is rendered.
*/
function getReactRootID(container) {
var rootElement = getReactRootElementInContainer(container);
return rootElement && ReactMount.getID(rootElement);
}
/**
* Accessing node[ATTR_NAME] or calling getAttribute(ATTR_NAME) on a form
* element can return its control whose name or ID equals ATTR_NAME. All
* DOM nodes support `getAttributeNode` but this can also get called on
* other objects so just return '' if we're given something other than a
* DOM node (such as window).
*
* @param {?DOMElement|DOMWindow|DOMDocument|DOMTextNode} node DOM node.
* @return {string} ID of the supplied `domNode`.
*/
function getID(node) {
var id = internalGetID(node);
if (id) {
if (nodeCache.hasOwnProperty(id)) {
var cached = nodeCache[id];
if (cached !== node) {
("production" !== process.env.NODE_ENV ? invariant(
!isValid(cached, id),
'ReactMount: Two valid but unequal nodes with the same `%s`: %s',
ATTR_NAME, id
) : invariant(!isValid(cached, id)));
nodeCache[id] = node;
}
} else {
nodeCache[id] = node;
}
}
return id;
}
function internalGetID(node) {
// If node is something like a window, document, or text node, none of
// which support attributes or a .getAttribute method, gracefully return
// the empty string, as if the attribute were missing.
return node && node.getAttribute && node.getAttribute(ATTR_NAME) || '';
}
/**
* Sets the React-specific ID of the given node.
*
* @param {DOMElement} node The DOM node whose ID will be set.
* @param {string} id The value of the ID attribute.
*/
function setID(node, id) {
var oldID = internalGetID(node);
if (oldID !== id) {
delete nodeCache[oldID];
}
node.setAttribute(ATTR_NAME, id);
nodeCache[id] = node;
}
/**
* Finds the node with the supplied React-generated DOM ID.
*
* @param {string} id A React-generated DOM ID.
* @return {DOMElement} DOM node with the suppled `id`.
* @internal
*/
function getNode(id) {
if (!nodeCache.hasOwnProperty(id) || !isValid(nodeCache[id], id)) {
nodeCache[id] = ReactMount.findReactNodeByID(id);
}
return nodeCache[id];
}
/**
* Finds the node with the supplied public React instance.
*
* @param {*} instance A public React instance.
* @return {?DOMElement} DOM node with the suppled `id`.
* @internal
*/
function getNodeFromInstance(instance) {
var id = ReactInstanceMap.get(instance)._rootNodeID;
if (ReactEmptyComponent.isNullComponentID(id)) {
return null;
}
if (!nodeCache.hasOwnProperty(id) || !isValid(nodeCache[id], id)) {
nodeCache[id] = ReactMount.findReactNodeByID(id);
}
return nodeCache[id];
}
/**
* A node is "valid" if it is contained by a currently mounted container.
*
* This means that the node does not have to be contained by a document in
* order to be considered valid.
*
* @param {?DOMElement} node The candidate DOM node.
* @param {string} id The expected ID of the node.
* @return {boolean} Whether the node is contained by a mounted container.
*/
function isValid(node, id) {
if (node) {
("production" !== process.env.NODE_ENV ? invariant(
internalGetID(node) === id,
'ReactMount: Unexpected modification of `%s`',
ATTR_NAME
) : invariant(internalGetID(node) === id));
var container = ReactMount.findReactContainerForID(id);
if (container && containsNode(container, node)) {
return true;
}
}
return false;
}
/**
* Causes the cache to forget about one React-specific ID.
*
* @param {string} id The ID to forget.
*/
function purgeID(id) {
delete nodeCache[id];
}
var deepestNodeSoFar = null;
function findDeepestCachedAncestorImpl(ancestorID) {
var ancestor = nodeCache[ancestorID];
if (ancestor && isValid(ancestor, ancestorID)) {
deepestNodeSoFar = ancestor;
} else {
// This node isn't populated in the cache, so presumably none of its
// descendants are. Break out of the loop.
return false;
}
}
/**
* Return the deepest cached node whose ID is a prefix of `targetID`.
*/
function findDeepestCachedAncestor(targetID) {
deepestNodeSoFar = null;
ReactInstanceHandles.traverseAncestors(
targetID,
findDeepestCachedAncestorImpl
);
var foundNode = deepestNodeSoFar;
deepestNodeSoFar = null;
return foundNode;
}
/**
* Mounts this component and inserts it into the DOM.
*
* @param {ReactComponent} componentInstance The instance to mount.
* @param {string} rootID DOM ID of the root node.
* @param {DOMElement} container DOM element to mount into.
* @param {ReactReconcileTransaction} transaction
* @param {boolean} shouldReuseMarkup If true, do not insert markup
*/
function mountComponentIntoNode(
componentInstance,
rootID,
container,
transaction,
shouldReuseMarkup) {
var markup = ReactReconciler.mountComponent(
componentInstance, rootID, transaction, emptyObject
);
componentInstance._isTopLevel = true;
ReactMount._mountImageIntoNode(markup, container, shouldReuseMarkup);
}
/**
* Batched mount.
*
* @param {ReactComponent} componentInstance The instance to mount.
* @param {string} rootID DOM ID of the root node.
* @param {DOMElement} container DOM element to mount into.
* @param {boolean} shouldReuseMarkup If true, do not insert markup
*/
function batchedMountComponentIntoNode(
componentInstance,
rootID,
container,
shouldReuseMarkup) {
var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
transaction.perform(
mountComponentIntoNode,
null,
componentInstance,
rootID,
container,
transaction,
shouldReuseMarkup
);
ReactUpdates.ReactReconcileTransaction.release(transaction);
}
/**
* Mounting is the process of initializing a React component by creating its
* representative DOM elements and inserting them into a supplied `container`.
* Any prior content inside `container` is destroyed in the process.
*
* ReactMount.render(
* component,
* document.getElementById('container')
* );
*
* <div id="container"> <-- Supplied `container`.
* <div data-reactid=".3"> <-- Rendered reactRoot of React
* // ... component.
* </div>
* </div>
*
* Inside of `container`, the first element rendered is the "reactRoot".
*/
var ReactMount = {
/** Exposed for debugging purposes **/
_instancesByReactRootID: instancesByReactRootID,
/**
* This is a hook provided to support rendering React components while
* ensuring that the apparent scroll position of its `container` does not
* change.
*
* @param {DOMElement} container The `container` being rendered into.
* @param {function} renderCallback This must be called once to do the render.
*/
scrollMonitor: function(container, renderCallback) {
renderCallback();
},
/**
* Take a component that's already mounted into the DOM and replace its props
* @param {ReactComponent} prevComponent component instance already in the DOM
* @param {ReactElement} nextElement component instance to render
* @param {DOMElement} container container to render into
* @param {?function} callback function triggered on completion
*/
_updateRootComponent: function(
prevComponent,
nextElement,
container,
callback) {
if ("production" !== process.env.NODE_ENV) {
ReactElementValidator.checkAndWarnForMutatedProps(nextElement);
}
ReactMount.scrollMonitor(container, function() {
ReactUpdateQueue.enqueueElementInternal(prevComponent, nextElement);
if (callback) {
ReactUpdateQueue.enqueueCallbackInternal(prevComponent, callback);
}
});
if ("production" !== process.env.NODE_ENV) {
// Record the root element in case it later gets transplanted.
rootElementsByReactRootID[getReactRootID(container)] =
getReactRootElementInContainer(container);
}
return prevComponent;
},
/**
* Register a component into the instance map and starts scroll value
* monitoring
* @param {ReactComponent} nextComponent component instance to render
* @param {DOMElement} container container to render into
* @return {string} reactRoot ID prefix
*/
_registerComponent: function(nextComponent, container) {
("production" !== process.env.NODE_ENV ? invariant(
container && (
(container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE)
),
'_registerComponent(...): Target container is not a DOM element.'
) : invariant(container && (
(container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE)
)));
ReactBrowserEventEmitter.ensureScrollValueMonitoring();
var reactRootID = ReactMount.registerContainer(container);
instancesByReactRootID[reactRootID] = nextComponent;
return reactRootID;
},
/**
* Render a new component into the DOM.
* @param {ReactElement} nextElement element to render
* @param {DOMElement} container container to render into
* @param {boolean} shouldReuseMarkup if we should skip the markup insertion
* @return {ReactComponent} nextComponent
*/
_renderNewRootComponent: function(
nextElement,
container,
shouldReuseMarkup
) {
// Various parts of our code (such as ReactCompositeComponent's
// _renderValidatedComponent) assume that calls to render aren't nested;
// verify that that's the case.
("production" !== process.env.NODE_ENV ? warning(
ReactCurrentOwner.current == null,
'_renderNewRootComponent(): Render methods should be a pure function ' +
'of props and state; triggering nested component updates from ' +
'render is not allowed. If necessary, trigger nested updates in ' +
'componentDidUpdate.'
) : null);
var componentInstance = instantiateReactComponent(nextElement, null);
var reactRootID = ReactMount._registerComponent(
componentInstance,
container
);
// The initial render is synchronous but any updates that happen during
// rendering, in componentWillMount or componentDidMount, will be batched
// according to the current batching strategy.
ReactUpdates.batchedUpdates(
batchedMountComponentIntoNode,
componentInstance,
reactRootID,
container,
shouldReuseMarkup
);
if ("production" !== process.env.NODE_ENV) {
// Record the root element in case it later gets transplanted.
rootElementsByReactRootID[reactRootID] =
getReactRootElementInContainer(container);
}
return componentInstance;
},
/**
* Renders a React component into the DOM in the supplied `container`.
*
* If the React component was previously rendered into `container`, this will
* perform an update on it and only mutate the DOM as necessary to reflect the
* latest React component.
*
* @param {ReactElement} nextElement Component element to render.
* @param {DOMElement} container DOM element to render into.
* @param {?function} callback function triggered on completion
* @return {ReactComponent} Component instance rendered in `container`.
*/
render: function(nextElement, container, callback) {
("production" !== process.env.NODE_ENV ? invariant(
ReactElement.isValidElement(nextElement),
'React.render(): Invalid component element.%s',
(
typeof nextElement === 'string' ?
' Instead of passing an element string, make sure to instantiate ' +
'it by passing it to React.createElement.' :
typeof nextElement === 'function' ?
' Instead of passing a component class, make sure to instantiate ' +
'it by passing it to React.createElement.' :
// Check if it quacks like an element
nextElement != null && nextElement.props !== undefined ?
' This may be caused by unintentionally loading two independent ' +
'copies of React.' :
''
)
) : invariant(ReactElement.isValidElement(nextElement)));
var prevComponent = instancesByReactRootID[getReactRootID(container)];
if (prevComponent) {
var prevElement = prevComponent._currentElement;
if (shouldUpdateReactComponent(prevElement, nextElement)) {
return ReactMount._updateRootComponent(
prevComponent,
nextElement,
container,
callback
).getPublicInstance();
} else {
ReactMount.unmountComponentAtNode(container);
}
}
var reactRootElement = getReactRootElementInContainer(container);
var containerHasReactMarkup =
reactRootElement && ReactMount.isRenderedByReact(reactRootElement);
if ("production" !== process.env.NODE_ENV) {
if (!containerHasReactMarkup || reactRootElement.nextSibling) {
var rootElementSibling = reactRootElement;
while (rootElementSibling) {
if (ReactMount.isRenderedByReact(rootElementSibling)) {
("production" !== process.env.NODE_ENV ? warning(
false,
'render(): Target node has markup rendered by React, but there ' +
'are unrelated nodes as well. This is most commonly caused by ' +
'white-space inserted around server-rendered markup.'
) : null);
break;
}
rootElementSibling = rootElementSibling.nextSibling;
}
}
}
var shouldReuseMarkup = containerHasReactMarkup && !prevComponent;
var component = ReactMount._renderNewRootComponent(
nextElement,
container,
shouldReuseMarkup
).getPublicInstance();
if (callback) {
callback.call(component);
}
return component;
},
/**
* Constructs a component instance of `constructor` with `initialProps` and
* renders it into the supplied `container`.
*
* @param {function} constructor React component constructor.
* @param {?object} props Initial props of the component instance.
* @param {DOMElement} container DOM element to render into.
* @return {ReactComponent} Component instance rendered in `container`.
*/
constructAndRenderComponent: function(constructor, props, container) {
var element = ReactElement.createElement(constructor, props);
return ReactMount.render(element, container);
},
/**
* Constructs a component instance of `constructor` with `initialProps` and
* renders it into a container node identified by supplied `id`.
*
* @param {function} componentConstructor React component constructor
* @param {?object} props Initial props of the component instance.
* @param {string} id ID of the DOM element to render into.
* @return {ReactComponent} Component instance rendered in the container node.
*/
constructAndRenderComponentByID: function(constructor, props, id) {
var domNode = document.getElementById(id);
("production" !== process.env.NODE_ENV ? invariant(
domNode,
'Tried to get element with id of "%s" but it is not present on the page.',
id
) : invariant(domNode));
return ReactMount.constructAndRenderComponent(constructor, props, domNode);
},
/**
* Registers a container node into which React components will be rendered.
* This also creates the "reactRoot" ID that will be assigned to the element
* rendered within.
*
* @param {DOMElement} container DOM element to register as a container.
* @return {string} The "reactRoot" ID of elements rendered within.
*/
registerContainer: function(container) {
var reactRootID = getReactRootID(container);
if (reactRootID) {
// If one exists, make sure it is a valid "reactRoot" ID.
reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(reactRootID);
}
if (!reactRootID) {
// No valid "reactRoot" ID found, create one.
reactRootID = ReactInstanceHandles.createReactRootID();
}
containersByReactRootID[reactRootID] = container;
return reactRootID;
},
/**
* Unmounts and destroys the React component rendered in the `container`.
*
* @param {DOMElement} container DOM element containing a React component.
* @return {boolean} True if a component was found in and unmounted from
* `container`
*/
unmountComponentAtNode: function(container) {
// Various parts of our code (such as ReactCompositeComponent's
// _renderValidatedComponent) assume that calls to render aren't nested;
// verify that that's the case. (Strictly speaking, unmounting won't cause a
// render but we still don't expect to be in a render call here.)
("production" !== process.env.NODE_ENV ? warning(
ReactCurrentOwner.current == null,
'unmountComponentAtNode(): Render methods should be a pure function of ' +
'props and state; triggering nested component updates from render is ' +
'not allowed. If necessary, trigger nested updates in ' +
'componentDidUpdate.'
) : null);
("production" !== process.env.NODE_ENV ? invariant(
container && (
(container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE)
),
'unmountComponentAtNode(...): Target container is not a DOM element.'
) : invariant(container && (
(container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE)
)));
var reactRootID = getReactRootID(container);
var component = instancesByReactRootID[reactRootID];
if (!component) {
return false;
}
ReactMount.unmountComponentFromNode(component, container);
delete instancesByReactRootID[reactRootID];
delete containersByReactRootID[reactRootID];
if ("production" !== process.env.NODE_ENV) {
delete rootElementsByReactRootID[reactRootID];
}
return true;
},
/**
* Unmounts a component and removes it from the DOM.
*
* @param {ReactComponent} instance React component instance.
* @param {DOMElement} container DOM element to unmount from.
* @final
* @internal
* @see {ReactMount.unmountComponentAtNode}
*/
unmountComponentFromNode: function(instance, container) {
ReactReconciler.unmountComponent(instance);
if (container.nodeType === DOC_NODE_TYPE) {
container = container.documentElement;
}
// http://jsperf.com/emptying-a-node
while (container.lastChild) {
container.removeChild(container.lastChild);
}
},
/**
* Finds the container DOM element that contains React component to which the
* supplied DOM `id` belongs.
*
* @param {string} id The ID of an element rendered by a React component.
* @return {?DOMElement} DOM element that contains the `id`.
*/
findReactContainerForID: function(id) {
var reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(id);
var container = containersByReactRootID[reactRootID];
if ("production" !== process.env.NODE_ENV) {
var rootElement = rootElementsByReactRootID[reactRootID];
if (rootElement && rootElement.parentNode !== container) {
("production" !== process.env.NODE_ENV ? invariant(
// Call internalGetID here because getID calls isValid which calls
// findReactContainerForID (this function).
internalGetID(rootElement) === reactRootID,
'ReactMount: Root element ID differed from reactRootID.'
) : invariant(// Call internalGetID here because getID calls isValid which calls
// findReactContainerForID (this function).
internalGetID(rootElement) === reactRootID));
var containerChild = container.firstChild;
if (containerChild &&
reactRootID === internalGetID(containerChild)) {
// If the container has a new child with the same ID as the old
// root element, then rootElementsByReactRootID[reactRootID] is
// just stale and needs to be updated. The case that deserves a
// warning is when the container is empty.
rootElementsByReactRootID[reactRootID] = containerChild;
} else {
("production" !== process.env.NODE_ENV ? warning(
false,
'ReactMount: Root element has been removed from its original ' +
'container. New container:', rootElement.parentNode
) : null);
}
}
}
return container;
},
/**
* Finds an element rendered by React with the supplied ID.
*
* @param {string} id ID of a DOM node in the React component.
* @return {DOMElement} Root DOM node of the React component.
*/
findReactNodeByID: function(id) {
var reactRoot = ReactMount.findReactContainerForID(id);
return ReactMount.findComponentRoot(reactRoot, id);
},
/**
* True if the supplied `node` is rendered by React.
*
* @param {*} node DOM Element to check.
* @return {boolean} True if the DOM Element appears to be rendered by React.
* @internal
*/
isRenderedByReact: function(node) {
if (node.nodeType !== 1) {
// Not a DOMElement, therefore not a React component
return false;
}
var id = ReactMount.getID(node);
return id ? id.charAt(0) === SEPARATOR : false;
},
/**
* Traverses up the ancestors of the supplied node to find a node that is a
* DOM representation of a React component.
*
* @param {*} node
* @return {?DOMEventTarget}
* @internal
*/
getFirstReactDOM: function(node) {
var current = node;
while (current && current.parentNode !== current) {
if (ReactMount.isRenderedByReact(current)) {
return current;
}
current = current.parentNode;
}
return null;
},
/**
* Finds a node with the supplied `targetID` inside of the supplied
* `ancestorNode`. Exploits the ID naming scheme to perform the search
* quickly.
*
* @param {DOMEventTarget} ancestorNode Search from this root.
* @pararm {string} targetID ID of the DOM representation of the component.
* @return {DOMEventTarget} DOM node with the supplied `targetID`.
* @internal
*/
findComponentRoot: function(ancestorNode, targetID) {
var firstChildren = findComponentRootReusableArray;
var childIndex = 0;
var deepestAncestor = findDeepestCachedAncestor(targetID) || ancestorNode;
firstChildren[0] = deepestAncestor.firstChild;
firstChildren.length = 1;
while (childIndex < firstChildren.length) {
var child = firstChildren[childIndex++];
var targetChild;
while (child) {
var childID = ReactMount.getID(child);
if (childID) {
// Even if we find the node we're looking for, we finish looping
// through its siblings to ensure they're cached so that we don't have
// to revisit this node again. Otherwise, we make n^2 calls to getID
// when visiting the many children of a single node in order.
if (targetID === childID) {
targetChild = child;
} else if (ReactInstanceHandles.isAncestorIDOf(childID, targetID)) {
// If we find a child whose ID is an ancestor of the given ID,
// then we can be sure that we only want to search the subtree
// rooted at this child, so we can throw out the rest of the
// search state.
firstChildren.length = childIndex = 0;
firstChildren.push(child.firstChild);
}
} else {
// If this child had no ID, then there's a chance that it was
// injected automatically by the browser, as when a `<table>`
// element sprouts an extra `<tbody>` child as a side effect of
// `.innerHTML` parsing. Optimistically continue down this
// branch, but not before examining the other siblings.
firstChildren.push(child.firstChild);
}
child = child.nextSibling;
}
if (targetChild) {
// Emptying firstChildren/findComponentRootReusableArray is
// not necessary for correctness, but it helps the GC reclaim
// any nodes that were left at the end of the search.
firstChildren.length = 0;
return targetChild;
}
}
firstChildren.length = 0;
("production" !== process.env.NODE_ENV ? invariant(
false,
'findComponentRoot(..., %s): Unable to find element. This probably ' +
'means the DOM was unexpectedly mutated (e.g., by the browser), ' +
'usually due to forgetting a <tbody> when using tables, nesting tags ' +
'like <form>, <p>, or <a>, or using non-SVG elements in an <svg> ' +
'parent. ' +
'Try inspecting the child nodes of the element with React ID `%s`.',
targetID,
ReactMount.getID(ancestorNode)
) : invariant(false));
},
_mountImageIntoNode: function(markup, container, shouldReuseMarkup) {
("production" !== process.env.NODE_ENV ? invariant(
container && (
(container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE)
),
'mountComponentIntoNode(...): Target container is not valid.'
) : invariant(container && (
(container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE)
)));
if (shouldReuseMarkup) {
var rootElement = getReactRootElementInContainer(container);
if (ReactMarkupChecksum.canReuseMarkup(markup, rootElement)) {
return;
} else {
var checksum = rootElement.getAttribute(
ReactMarkupChecksum.CHECKSUM_ATTR_NAME
);
rootElement.removeAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME);
var rootMarkup = rootElement.outerHTML;
rootElement.setAttribute(
ReactMarkupChecksum.CHECKSUM_ATTR_NAME,
checksum
);
var diffIndex = firstDifferenceIndex(markup, rootMarkup);
var difference = ' (client) ' +
markup.substring(diffIndex - 20, diffIndex + 20) +
'\n (server) ' + rootMarkup.substring(diffIndex - 20, diffIndex + 20);
("production" !== process.env.NODE_ENV ? invariant(
container.nodeType !== DOC_NODE_TYPE,
'You\'re trying to render a component to the document using ' +
'server rendering but the checksum was invalid. This usually ' +
'means you rendered a different component type or props on ' +
'the client from the one on the server, or your render() ' +
'methods are impure. React cannot handle this case due to ' +
'cross-browser quirks by rendering at the document root. You ' +
'should look for environment dependent code in your components ' +
'and ensure the props are the same client and server side:\n%s',
difference
) : invariant(container.nodeType !== DOC_NODE_TYPE));
if ("production" !== process.env.NODE_ENV) {
("production" !== process.env.NODE_ENV ? warning(
false,
'React attempted to reuse markup in a container but the ' +
'checksum was invalid. This generally means that you are ' +
'using server rendering and the markup generated on the ' +
'server was not what the client was expecting. React injected ' +
'new markup to compensate which works but you have lost many ' +
'of the benefits of server rendering. Instead, figure out ' +
'why the markup being generated is different on the client ' +
'or server:\n%s',
difference
) : null);
}
}
}
("production" !== process.env.NODE_ENV ? invariant(
container.nodeType !== DOC_NODE_TYPE,
'You\'re trying to render a component to the document but ' +
'you didn\'t use server rendering. We can\'t do this ' +
'without using server rendering due to cross-browser quirks. ' +
'See React.renderToString() for server rendering.'
) : invariant(container.nodeType !== DOC_NODE_TYPE));
setInnerHTML(container, markup);
},
/**
* React ID utilities.
*/
getReactRootID: getReactRootID,
getID: getID,
setID: setID,
getNode: getNode,
getNodeFromInstance: getNodeFromInstance,
purgeID: purgeID
};
ReactPerf.measureMethods(ReactMount, 'ReactMount', {
_renderNewRootComponent: '_renderNewRootComponent',
_mountImageIntoNode: '_mountImageIntoNode'
});
module.exports = ReactMount;
}).call(this,require('_process'))
},{"./DOMProperty":150,"./ReactBrowserEventEmitter":172,"./ReactCurrentOwner":184,"./ReactElement":202,"./ReactElementValidator":203,"./ReactEmptyComponent":204,"./ReactInstanceHandles":211,"./ReactInstanceMap":212,"./ReactMarkupChecksum":215,"./ReactPerf":221,"./ReactReconciler":228,"./ReactUpdateQueue":238,"./ReactUpdates":239,"./containsNode":263,"./emptyObject":270,"./getReactRootElementInContainer":284,"./instantiateReactComponent":289,"./invariant":290,"./setInnerHTML":304,"./shouldUpdateReactComponent":307,"./warning":311,"_process":138}],217:[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 ReactMultiChild
* @typechecks static-only
*/
'use strict';
var ReactComponentEnvironment = require("./ReactComponentEnvironment");
var ReactMultiChildUpdateTypes = require("./ReactMultiChildUpdateTypes");
var ReactReconciler = require("./ReactReconciler");
var ReactChildReconciler = require("./ReactChildReconciler");
/**
* Updating children of a component may trigger recursive updates. The depth is
* used to batch recursive updates to render markup more efficiently.
*
* @type {number}
* @private
*/
var updateDepth = 0;
/**
* Queue of update configuration objects.
*
* Each object has a `type` property that is in `ReactMultiChildUpdateTypes`.
*
* @type {array<object>}
* @private
*/
var updateQueue = [];
/**
* Queue of markup to be rendered.
*
* @type {array<string>}
* @private
*/
var markupQueue = [];
/**
* Enqueues markup to be rendered and inserted at a supplied index.
*
* @param {string} parentID ID of the parent component.
* @param {string} markup Markup that renders into an element.
* @param {number} toIndex Destination index.
* @private
*/
function enqueueMarkup(parentID, markup, toIndex) {
// NOTE: Null values reduce hidden classes.
updateQueue.push({
parentID: parentID,
parentNode: null,
type: ReactMultiChildUpdateTypes.INSERT_MARKUP,
markupIndex: markupQueue.push(markup) - 1,
textContent: null,
fromIndex: null,
toIndex: toIndex
});
}
/**
* Enqueues moving an existing element to another index.
*
* @param {string} parentID ID of the parent component.
* @param {number} fromIndex Source index of the existing element.
* @param {number} toIndex Destination index of the element.
* @private
*/
function enqueueMove(parentID, fromIndex, toIndex) {
// NOTE: Null values reduce hidden classes.
updateQueue.push({
parentID: parentID,
parentNode: null,
type: ReactMultiChildUpdateTypes.MOVE_EXISTING,
markupIndex: null,
textContent: null,
fromIndex: fromIndex,
toIndex: toIndex
});
}
/**
* Enqueues removing an element at an index.
*
* @param {string} parentID ID of the parent component.
* @param {number} fromIndex Index of the element to remove.
* @private
*/
function enqueueRemove(parentID, fromIndex) {
// NOTE: Null values reduce hidden classes.
updateQueue.push({
parentID: parentID,
parentNode: null,
type: ReactMultiChildUpdateTypes.REMOVE_NODE,
markupIndex: null,
textContent: null,
fromIndex: fromIndex,
toIndex: null
});
}
/**
* Enqueues setting the text content.
*
* @param {string} parentID ID of the parent component.
* @param {string} textContent Text content to set.
* @private
*/
function enqueueTextContent(parentID, textContent) {
// NOTE: Null values reduce hidden classes.
updateQueue.push({
parentID: parentID,
parentNode: null,
type: ReactMultiChildUpdateTypes.TEXT_CONTENT,
markupIndex: null,
textContent: textContent,
fromIndex: null,
toIndex: null
});
}
/**
* Processes any enqueued updates.
*
* @private
*/
function processQueue() {
if (updateQueue.length) {
ReactComponentEnvironment.processChildrenUpdates(
updateQueue,
markupQueue
);
clearQueue();
}
}
/**
* Clears any enqueued updates.
*
* @private
*/
function clearQueue() {
updateQueue.length = 0;
markupQueue.length = 0;
}
/**
* ReactMultiChild are capable of reconciling multiple children.
*
* @class ReactMultiChild
* @internal
*/
var ReactMultiChild = {
/**
* Provides common functionality for components that must reconcile multiple
* children. This is used by `ReactDOMComponent` to mount, update, and
* unmount child components.
*
* @lends {ReactMultiChild.prototype}
*/
Mixin: {
/**
* Generates a "mount image" for each of the supplied children. In the case
* of `ReactDOMComponent`, a mount image is a string of markup.
*
* @param {?object} nestedChildren Nested child maps.
* @return {array} An array of mounted representations.
* @internal
*/
mountChildren: function(nestedChildren, transaction, context) {
var children = ReactChildReconciler.instantiateChildren(
nestedChildren, transaction, context
);
this._renderedChildren = children;
var mountImages = [];
var index = 0;
for (var name in children) {
if (children.hasOwnProperty(name)) {
var child = children[name];
// Inlined for performance, see `ReactInstanceHandles.createReactID`.
var rootID = this._rootNodeID + name;
var mountImage = ReactReconciler.mountComponent(
child,
rootID,
transaction,
context
);
child._mountIndex = index;
mountImages.push(mountImage);
index++;
}
}
return mountImages;
},
/**
* Replaces any rendered children with a text content string.
*
* @param {string} nextContent String of content.
* @internal
*/
updateTextContent: function(nextContent) {
updateDepth++;
var errorThrown = true;
try {
var prevChildren = this._renderedChildren;
// Remove any rendered children.
ReactChildReconciler.unmountChildren(prevChildren);
// TODO: The setTextContent operation should be enough
for (var name in prevChildren) {
if (prevChildren.hasOwnProperty(name)) {
this._unmountChildByName(prevChildren[name], name);
}
}
// Set new text content.
this.setTextContent(nextContent);
errorThrown = false;
} finally {
updateDepth--;
if (!updateDepth) {
if (errorThrown) {
clearQueue();
} else {
processQueue();
}
}
}
},
/**
* Updates the rendered children with new children.
*
* @param {?object} nextNestedChildren Nested child maps.
* @param {ReactReconcileTransaction} transaction
* @internal
*/
updateChildren: function(nextNestedChildren, transaction, context) {
updateDepth++;
var errorThrown = true;
try {
this._updateChildren(nextNestedChildren, transaction, context);
errorThrown = false;
} finally {
updateDepth--;
if (!updateDepth) {
if (errorThrown) {
clearQueue();
} else {
processQueue();
}
}
}
},
/**
* Improve performance by isolating this hot code path from the try/catch
* block in `updateChildren`.
*
* @param {?object} nextNestedChildren Nested child maps.
* @param {ReactReconcileTransaction} transaction
* @final
* @protected
*/
_updateChildren: function(nextNestedChildren, transaction, context) {
var prevChildren = this._renderedChildren;
var nextChildren = ReactChildReconciler.updateChildren(
prevChildren, nextNestedChildren, transaction, context
);
this._renderedChildren = nextChildren;
if (!nextChildren && !prevChildren) {
return;
}
var name;
// `nextIndex` will increment for each child in `nextChildren`, but
// `lastIndex` will be the last index visited in `prevChildren`.
var lastIndex = 0;
var nextIndex = 0;
for (name in nextChildren) {
if (!nextChildren.hasOwnProperty(name)) {
continue;
}
var prevChild = prevChildren && prevChildren[name];
var nextChild = nextChildren[name];
if (prevChild === nextChild) {
this.moveChild(prevChild, nextIndex, lastIndex);
lastIndex = Math.max(prevChild._mountIndex, lastIndex);
prevChild._mountIndex = nextIndex;
} else {
if (prevChild) {
// Update `lastIndex` before `_mountIndex` gets unset by unmounting.
lastIndex = Math.max(prevChild._mountIndex, lastIndex);
this._unmountChildByName(prevChild, name);
}
// The child must be instantiated before it's mounted.
this._mountChildByNameAtIndex(
nextChild, name, nextIndex, transaction, context
);
}
nextIndex++;
}
// Remove children that are no longer present.
for (name in prevChildren) {
if (prevChildren.hasOwnProperty(name) &&
!(nextChildren && nextChildren.hasOwnProperty(name))) {
this._unmountChildByName(prevChildren[name], name);
}
}
},
/**
* Unmounts all rendered children. This should be used to clean up children
* when this component is unmounted.
*
* @internal
*/
unmountChildren: function() {
var renderedChildren = this._renderedChildren;
ReactChildReconciler.unmountChildren(renderedChildren);
this._renderedChildren = null;
},
/**
* Moves a child component to the supplied index.
*
* @param {ReactComponent} child Component to move.
* @param {number} toIndex Destination index of the element.
* @param {number} lastIndex Last index visited of the siblings of `child`.
* @protected
*/
moveChild: function(child, toIndex, lastIndex) {
// If the index of `child` is less than `lastIndex`, then it needs to
// be moved. Otherwise, we do not need to move it because a child will be
// inserted or moved before `child`.
if (child._mountIndex < lastIndex) {
enqueueMove(this._rootNodeID, child._mountIndex, toIndex);
}
},
/**
* Creates a child component.
*
* @param {ReactComponent} child Component to create.
* @param {string} mountImage Markup to insert.
* @protected
*/
createChild: function(child, mountImage) {
enqueueMarkup(this._rootNodeID, mountImage, child._mountIndex);
},
/**
* Removes a child component.
*
* @param {ReactComponent} child Child to remove.
* @protected
*/
removeChild: function(child) {
enqueueRemove(this._rootNodeID, child._mountIndex);
},
/**
* Sets this text content string.
*
* @param {string} textContent Text content to set.
* @protected
*/
setTextContent: function(textContent) {
enqueueTextContent(this._rootNodeID, textContent);
},
/**
* Mounts a child with the supplied name.
*
* NOTE: This is part of `updateChildren` and is here for readability.
*
* @param {ReactComponent} child Component to mount.
* @param {string} name Name of the child.
* @param {number} index Index at which to insert the child.
* @param {ReactReconcileTransaction} transaction
* @private
*/
_mountChildByNameAtIndex: function(
child,
name,
index,
transaction,
context) {
// Inlined for performance, see `ReactInstanceHandles.createReactID`.
var rootID = this._rootNodeID + name;
var mountImage = ReactReconciler.mountComponent(
child,
rootID,
transaction,
context
);
child._mountIndex = index;
this.createChild(child, mountImage);
},
/**
* Unmounts a rendered child by name.
*
* NOTE: This is part of `updateChildren` and is here for readability.
*
* @param {ReactComponent} child Component to unmount.
* @param {string} name Name of the child in `this._renderedChildren`.
* @private
*/
_unmountChildByName: function(child, name) {
this.removeChild(child);
child._mountIndex = null;
}
}
};
module.exports = ReactMultiChild;
},{"./ReactChildReconciler":175,"./ReactComponentEnvironment":180,"./ReactMultiChildUpdateTypes":218,"./ReactReconciler":228}],218:[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 ReactMultiChildUpdateTypes
*/
'use strict';
var keyMirror = require("./keyMirror");
/**
* When a component's children are updated, a series of update configuration
* objects are created in order to batch and serialize the required changes.
*
* Enumerates all the possible types of update configurations.
*
* @internal
*/
var ReactMultiChildUpdateTypes = keyMirror({
INSERT_MARKUP: null,
MOVE_EXISTING: null,
REMOVE_NODE: null,
TEXT_CONTENT: null
});
module.exports = ReactMultiChildUpdateTypes;
},{"./keyMirror":296}],219:[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 ReactNativeComponent
*/
'use strict';
var assign = require("./Object.assign");
var invariant = require("./invariant");
var autoGenerateWrapperClass = null;
var genericComponentClass = null;
// This registry keeps track of wrapper classes around native tags
var tagToComponentClass = {};
var textComponentClass = null;
var ReactNativeComponentInjection = {
// This accepts a class that receives the tag string. This is a catch all
// that can render any kind of tag.
injectGenericComponentClass: function(componentClass) {
genericComponentClass = componentClass;
},
// This accepts a text component class that takes the text string to be
// rendered as props.
injectTextComponentClass: function(componentClass) {
textComponentClass = componentClass;
},
// This accepts a keyed object with classes as values. Each key represents a
// tag. That particular tag will use this class instead of the generic one.
injectComponentClasses: function(componentClasses) {
assign(tagToComponentClass, componentClasses);
},
// Temporary hack since we expect DOM refs to behave like composites,
// for this release.
injectAutoWrapper: function(wrapperFactory) {
autoGenerateWrapperClass = wrapperFactory;
}
};
/**
* Get a composite component wrapper class for a specific tag.
*
* @param {ReactElement} element The tag for which to get the class.
* @return {function} The React class constructor function.
*/
function getComponentClassForElement(element) {
if (typeof element.type === 'function') {
return element.type;
}
var tag = element.type;
var componentClass = tagToComponentClass[tag];
if (componentClass == null) {
tagToComponentClass[tag] = componentClass = autoGenerateWrapperClass(tag);
}
return componentClass;
}
/**
* Get a native internal component class for a specific tag.
*
* @param {ReactElement} element The element to create.
* @return {function} The internal class constructor function.
*/
function createInternalComponent(element) {
("production" !== process.env.NODE_ENV ? invariant(
genericComponentClass,
'There is no registered component for the tag %s',
element.type
) : invariant(genericComponentClass));
return new genericComponentClass(element.type, element.props);
}
/**
* @param {ReactText} text
* @return {ReactComponent}
*/
function createInstanceForText(text) {
return new textComponentClass(text);
}
/**
* @param {ReactComponent} component
* @return {boolean}
*/
function isTextComponent(component) {
return component instanceof textComponentClass;
}
var ReactNativeComponent = {
getComponentClassForElement: getComponentClassForElement,
createInternalComponent: createInternalComponent,
createInstanceForText: createInstanceForText,
isTextComponent: isTextComponent,
injection: ReactNativeComponentInjection
};
module.exports = ReactNativeComponent;
}).call(this,require('_process'))
},{"./Object.assign":168,"./invariant":290,"_process":138}],220:[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 ReactOwner
*/
'use strict';
var invariant = require("./invariant");
/**
* ReactOwners are capable of storing references to owned components.
*
* All components are capable of //being// referenced by owner components, but
* only ReactOwner components are capable of //referencing// owned components.
* The named reference is known as a "ref".
*
* Refs are available when mounted and updated during reconciliation.
*
* var MyComponent = React.createClass({
* render: function() {
* return (
* <div onClick={this.handleClick}>
* <CustomComponent ref="custom" />
* </div>
* );
* },
* handleClick: function() {
* this.refs.custom.handleClick();
* },
* componentDidMount: function() {
* this.refs.custom.initialize();
* }
* });
*
* Refs should rarely be used. When refs are used, they should only be done to
* control data that is not handled by React's data flow.
*
* @class ReactOwner
*/
var ReactOwner = {
/**
* @param {?object} object
* @return {boolean} True if `object` is a valid owner.
* @final
*/
isValidOwner: function(object) {
return !!(
(object &&
typeof object.attachRef === 'function' && typeof object.detachRef === 'function')
);
},
/**
* Adds a component by ref to an owner component.
*
* @param {ReactComponent} component Component to reference.
* @param {string} ref Name by which to refer to the component.
* @param {ReactOwner} owner Component on which to record the ref.
* @final
* @internal
*/
addComponentAsRefTo: function(component, ref, owner) {
("production" !== process.env.NODE_ENV ? invariant(
ReactOwner.isValidOwner(owner),
'addComponentAsRefTo(...): Only a ReactOwner can have refs. This ' +
'usually means that you\'re trying to add a ref to a component that ' +
'doesn\'t have an owner (that is, was not created inside of another ' +
'component\'s `render` method). Try rendering this component inside of ' +
'a new top-level component which will hold the ref.'
) : invariant(ReactOwner.isValidOwner(owner)));
owner.attachRef(ref, component);
},
/**
* Removes a component by ref from an owner component.
*
* @param {ReactComponent} component Component to dereference.
* @param {string} ref Name of the ref to remove.
* @param {ReactOwner} owner Component on which the ref is recorded.
* @final
* @internal
*/
removeComponentAsRefFrom: function(component, ref, owner) {
("production" !== process.env.NODE_ENV ? invariant(
ReactOwner.isValidOwner(owner),
'removeComponentAsRefFrom(...): Only a ReactOwner can have refs. This ' +
'usually means that you\'re trying to remove a ref to a component that ' +
'doesn\'t have an owner (that is, was not created inside of another ' +
'component\'s `render` method). Try rendering this component inside of ' +
'a new top-level component which will hold the ref.'
) : invariant(ReactOwner.isValidOwner(owner)));
// Check that `component` is still the current ref because we do not want to
// detach the ref if another component stole it.
if (owner.getPublicInstance().refs[ref] === component.getPublicInstance()) {
owner.detachRef(ref);
}
}
};
module.exports = ReactOwner;
}).call(this,require('_process'))
},{"./invariant":290,"_process":138}],221:[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 ReactPerf
* @typechecks static-only
*/
'use strict';
/**
* ReactPerf is a general AOP system designed to measure performance. This
* module only has the hooks: see ReactDefaultPerf for the analysis tool.
*/
var ReactPerf = {
/**
* Boolean to enable/disable measurement. Set to false by default to prevent
* accidental logging and perf loss.
*/
enableMeasure: false,
/**
* Holds onto the measure function in use. By default, don't measure
* anything, but we'll override this if we inject a measure function.
*/
storedMeasure: _noMeasure,
/**
* @param {object} object
* @param {string} objectName
* @param {object<string>} methodNames
*/
measureMethods: function(object, objectName, methodNames) {
if ("production" !== process.env.NODE_ENV) {
for (var key in methodNames) {
if (!methodNames.hasOwnProperty(key)) {
continue;
}
object[key] = ReactPerf.measure(
objectName,
methodNames[key],
object[key]
);
}
}
},
/**
* Use this to wrap methods you want to measure. Zero overhead in production.
*
* @param {string} objName
* @param {string} fnName
* @param {function} func
* @return {function}
*/
measure: function(objName, fnName, func) {
if ("production" !== process.env.NODE_ENV) {
var measuredFunc = null;
var wrapper = function() {
if (ReactPerf.enableMeasure) {
if (!measuredFunc) {
measuredFunc = ReactPerf.storedMeasure(objName, fnName, func);
}
return measuredFunc.apply(this, arguments);
}
return func.apply(this, arguments);
};
wrapper.displayName = objName + '_' + fnName;
return wrapper;
}
return func;
},
injection: {
/**
* @param {function} measure
*/
injectMeasure: function(measure) {
ReactPerf.storedMeasure = measure;
}
}
};
/**
* Simply passes through the measured function, without measuring it.
*
* @param {string} objName
* @param {string} fnName
* @param {function} func
* @return {function}
*/
function _noMeasure(objName, fnName, func) {
return func;
}
module.exports = ReactPerf;
}).call(this,require('_process'))
},{"_process":138}],222:[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 ReactPropTransferer
*/
'use strict';
var assign = require("./Object.assign");
var emptyFunction = require("./emptyFunction");
var joinClasses = require("./joinClasses");
/**
* Creates a transfer strategy that will merge prop values using the supplied
* `mergeStrategy`. If a prop was previously unset, this just sets it.
*
* @param {function} mergeStrategy
* @return {function}
*/
function createTransferStrategy(mergeStrategy) {
return function(props, key, value) {
if (!props.hasOwnProperty(key)) {
props[key] = value;
} else {
props[key] = mergeStrategy(props[key], value);
}
};
}
var transferStrategyMerge = createTransferStrategy(function(a, b) {
// `merge` overrides the first object's (`props[key]` above) keys using the
// second object's (`value`) keys. An object's style's existing `propA` would
// get overridden. Flip the order here.
return assign({}, b, a);
});
/**
* Transfer strategies dictate how props are transferred by `transferPropsTo`.
* NOTE: if you add any more exceptions to this list you should be sure to
* update `cloneWithProps()` accordingly.
*/
var TransferStrategies = {
/**
* Never transfer `children`.
*/
children: emptyFunction,
/**
* Transfer the `className` prop by merging them.
*/
className: createTransferStrategy(joinClasses),
/**
* Transfer the `style` prop (which is an object) by merging them.
*/
style: transferStrategyMerge
};
/**
* Mutates the first argument by transferring the properties from the second
* argument.
*
* @param {object} props
* @param {object} newProps
* @return {object}
*/
function transferInto(props, newProps) {
for (var thisKey in newProps) {
if (!newProps.hasOwnProperty(thisKey)) {
continue;
}
var transferStrategy = TransferStrategies[thisKey];
if (transferStrategy && TransferStrategies.hasOwnProperty(thisKey)) {
transferStrategy(props, thisKey, newProps[thisKey]);
} else if (!props.hasOwnProperty(thisKey)) {
props[thisKey] = newProps[thisKey];
}
}
return props;
}
/**
* ReactPropTransferer are capable of transferring props to another component
* using a `transferPropsTo` method.
*
* @class ReactPropTransferer
*/
var ReactPropTransferer = {
/**
* Merge two props objects using TransferStrategies.
*
* @param {object} oldProps original props (they take precedence)
* @param {object} newProps new props to merge in
* @return {object} a new object containing both sets of props merged.
*/
mergeProps: function(oldProps, newProps) {
return transferInto(assign({}, oldProps), newProps);
}
};
module.exports = ReactPropTransferer;
},{"./Object.assign":168,"./emptyFunction":269,"./joinClasses":295}],223:[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 ReactPropTypeLocationNames
*/
'use strict';
var ReactPropTypeLocationNames = {};
if ("production" !== process.env.NODE_ENV) {
ReactPropTypeLocationNames = {
prop: 'prop',
context: 'context',
childContext: 'child context'
};
}
module.exports = ReactPropTypeLocationNames;
}).call(this,require('_process'))
},{"_process":138}],224:[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 ReactPropTypeLocations
*/
'use strict';
var keyMirror = require("./keyMirror");
var ReactPropTypeLocations = keyMirror({
prop: null,
context: null,
childContext: null
});
module.exports = ReactPropTypeLocations;
},{"./keyMirror":296}],225:[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 ReactPropTypes
*/
'use strict';
var ReactElement = require("./ReactElement");
var ReactFragment = require("./ReactFragment");
var ReactPropTypeLocationNames = require("./ReactPropTypeLocationNames");
var emptyFunction = require("./emptyFunction");
/**
* Collection of methods that allow declaration and validation of props that are
* supplied to React components. Example usage:
*
* var Props = require('ReactPropTypes');
* var MyArticle = React.createClass({
* propTypes: {
* // An optional string prop named "description".
* description: Props.string,
*
* // A required enum prop named "category".
* category: Props.oneOf(['News','Photos']).isRequired,
*
* // A prop named "dialog" that requires an instance of Dialog.
* dialog: Props.instanceOf(Dialog).isRequired
* },
* render: function() { ... }
* });
*
* A more formal specification of how these methods are used:
*
* type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
* decl := ReactPropTypes.{type}(.isRequired)?
*
* Each and every declaration produces a function with the same signature. This
* allows the creation of custom validation functions. For example:
*
* var MyLink = React.createClass({
* propTypes: {
* // An optional string or URI prop named "href".
* href: function(props, propName, componentName) {
* var propValue = props[propName];
* if (propValue != null && typeof propValue !== 'string' &&
* !(propValue instanceof URI)) {
* return new Error(
* 'Expected a string or an URI for ' + propName + ' in ' +
* componentName
* );
* }
* }
* },
* render: function() {...}
* });
*
* @internal
*/
var ANONYMOUS = '<<anonymous>>';
var elementTypeChecker = createElementTypeChecker();
var nodeTypeChecker = createNodeChecker();
var ReactPropTypes = {
array: createPrimitiveTypeChecker('array'),
bool: createPrimitiveTypeChecker('boolean'),
func: createPrimitiveTypeChecker('function'),
number: createPrimitiveTypeChecker('number'),
object: createPrimitiveTypeChecker('object'),
string: createPrimitiveTypeChecker('string'),
any: createAnyTypeChecker(),
arrayOf: createArrayOfTypeChecker,
element: elementTypeChecker,
instanceOf: createInstanceTypeChecker,
node: nodeTypeChecker,
objectOf: createObjectOfTypeChecker,
oneOf: createEnumTypeChecker,
oneOfType: createUnionTypeChecker,
shape: createShapeTypeChecker
};
function createChainableTypeChecker(validate) {
function checkType(isRequired, props, propName, componentName, location) {
componentName = componentName || ANONYMOUS;
if (props[propName] == null) {
var locationName = ReactPropTypeLocationNames[location];
if (isRequired) {
return new Error(
("Required " + locationName + " `" + propName + "` was not specified in ") +
("`" + componentName + "`.")
);
}
return null;
} else {
return validate(props, propName, componentName, location);
}
}
var chainedCheckType = checkType.bind(null, false);
chainedCheckType.isRequired = checkType.bind(null, true);
return chainedCheckType;
}
function createPrimitiveTypeChecker(expectedType) {
function validate(props, propName, componentName, location) {
var propValue = props[propName];
var propType = getPropType(propValue);
if (propType !== expectedType) {
var locationName = ReactPropTypeLocationNames[location];
// `propValue` being instance of, say, date/regexp, pass the 'object'
// check, but we can offer a more precise error message here rather than
// 'of type `object`'.
var preciseType = getPreciseType(propValue);
return new Error(
("Invalid " + locationName + " `" + propName + "` of type `" + preciseType + "` ") +
("supplied to `" + componentName + "`, expected `" + expectedType + "`.")
);
}
return null;
}
return createChainableTypeChecker(validate);
}
function createAnyTypeChecker() {
return createChainableTypeChecker(emptyFunction.thatReturns(null));
}
function createArrayOfTypeChecker(typeChecker) {
function validate(props, propName, componentName, location) {
var propValue = props[propName];
if (!Array.isArray(propValue)) {
var locationName = ReactPropTypeLocationNames[location];
var propType = getPropType(propValue);
return new Error(
("Invalid " + locationName + " `" + propName + "` of type ") +
("`" + propType + "` supplied to `" + componentName + "`, expected an array.")
);
}
for (var i = 0; i < propValue.length; i++) {
var error = typeChecker(propValue, i, componentName, location);
if (error instanceof Error) {
return error;
}
}
return null;
}
return createChainableTypeChecker(validate);
}
function createElementTypeChecker() {
function validate(props, propName, componentName, location) {
if (!ReactElement.isValidElement(props[propName])) {
var locationName = ReactPropTypeLocationNames[location];
return new Error(
("Invalid " + locationName + " `" + propName + "` supplied to ") +
("`" + componentName + "`, expected a ReactElement.")
);
}
return null;
}
return createChainableTypeChecker(validate);
}
function createInstanceTypeChecker(expectedClass) {
function validate(props, propName, componentName, location) {
if (!(props[propName] instanceof expectedClass)) {
var locationName = ReactPropTypeLocationNames[location];
var expectedClassName = expectedClass.name || ANONYMOUS;
return new Error(
("Invalid " + locationName + " `" + propName + "` supplied to ") +
("`" + componentName + "`, expected instance of `" + expectedClassName + "`.")
);
}
return null;
}
return createChainableTypeChecker(validate);
}
function createEnumTypeChecker(expectedValues) {
function validate(props, propName, componentName, location) {
var propValue = props[propName];
for (var i = 0; i < expectedValues.length; i++) {
if (propValue === expectedValues[i]) {
return null;
}
}
var locationName = ReactPropTypeLocationNames[location];
var valuesString = JSON.stringify(expectedValues);
return new Error(
("Invalid " + locationName + " `" + propName + "` of value `" + propValue + "` ") +
("supplied to `" + componentName + "`, expected one of " + valuesString + ".")
);
}
return createChainableTypeChecker(validate);
}
function createObjectOfTypeChecker(typeChecker) {
function validate(props, propName, componentName, location) {
var propValue = props[propName];
var propType = getPropType(propValue);
if (propType !== 'object') {
var locationName = ReactPropTypeLocationNames[location];
return new Error(
("Invalid " + locationName + " `" + propName + "` of type ") +
("`" + propType + "` supplied to `" + componentName + "`, expected an object.")
);
}
for (var key in propValue) {
if (propValue.hasOwnProperty(key)) {
var error = typeChecker(propValue, key, componentName, location);
if (error instanceof Error) {
return error;
}
}
}
return null;
}
return createChainableTypeChecker(validate);
}
function createUnionTypeChecker(arrayOfTypeCheckers) {
function validate(props, propName, componentName, location) {
for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
var checker = arrayOfTypeCheckers[i];
if (checker(props, propName, componentName, location) == null) {
return null;
}
}
var locationName = ReactPropTypeLocationNames[location];
return new Error(
("Invalid " + locationName + " `" + propName + "` supplied to ") +
("`" + componentName + "`.")
);
}
return createChainableTypeChecker(validate);
}
function createNodeChecker() {
function validate(props, propName, componentName, location) {
if (!isNode(props[propName])) {
var locationName = ReactPropTypeLocationNames[location];
return new Error(
("Invalid " + locationName + " `" + propName + "` supplied to ") +
("`" + componentName + "`, expected a ReactNode.")
);
}
return null;
}
return createChainableTypeChecker(validate);
}
function createShapeTypeChecker(shapeTypes) {
function validate(props, propName, componentName, location) {
var propValue = props[propName];
var propType = getPropType(propValue);
if (propType !== 'object') {
var locationName = ReactPropTypeLocationNames[location];
return new Error(
("Invalid " + locationName + " `" + propName + "` of type `" + propType + "` ") +
("supplied to `" + componentName + "`, expected `object`.")
);
}
for (var key in shapeTypes) {
var checker = shapeTypes[key];
if (!checker) {
continue;
}
var error = checker(propValue, key, componentName, location);
if (error) {
return error;
}
}
return null;
}
return createChainableTypeChecker(validate);
}
function isNode(propValue) {
switch (typeof propValue) {
case 'number':
case 'string':
case 'undefined':
return true;
case 'boolean':
return !propValue;
case 'object':
if (Array.isArray(propValue)) {
return propValue.every(isNode);
}
if (propValue === null || ReactElement.isValidElement(propValue)) {
return true;
}
propValue = ReactFragment.extractIfFragment(propValue);
for (var k in propValue) {
if (!isNode(propValue[k])) {
return false;
}
}
return true;
default:
return false;
}
}
// Equivalent of `typeof` but with special handling for array and regexp.
function getPropType(propValue) {
var propType = typeof propValue;
if (Array.isArray(propValue)) {
return 'array';
}
if (propValue instanceof RegExp) {
// Old webkits (at least until Android 4.0) return 'function' rather than
// 'object' for typeof a RegExp. We'll normalize this here so that /bla/
// passes PropTypes.object.
return 'object';
}
return propType;
}
// This handles more types than `getPropType`. Only used for error messages.
// See `createPrimitiveTypeChecker`.
function getPreciseType(propValue) {
var propType = getPropType(propValue);
if (propType === 'object') {
if (propValue instanceof Date) {
return 'date';
} else if (propValue instanceof RegExp) {
return 'regexp';
}
}
return propType;
}
module.exports = ReactPropTypes;
},{"./ReactElement":202,"./ReactFragment":208,"./ReactPropTypeLocationNames":223,"./emptyFunction":269}],226:[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 ReactPutListenerQueue
*/
'use strict';
var PooledClass = require("./PooledClass");
var ReactBrowserEventEmitter = require("./ReactBrowserEventEmitter");
var assign = require("./Object.assign");
function ReactPutListenerQueue() {
this.listenersToPut = [];
}
assign(ReactPutListenerQueue.prototype, {
enqueuePutListener: function(rootNodeID, propKey, propValue) {
this.listenersToPut.push({
rootNodeID: rootNodeID,
propKey: propKey,
propValue: propValue
});
},
putListeners: function() {
for (var i = 0; i < this.listenersToPut.length; i++) {
var listenerToPut = this.listenersToPut[i];
ReactBrowserEventEmitter.putListener(
listenerToPut.rootNodeID,
listenerToPut.propKey,
listenerToPut.propValue
);
}
},
reset: function() {
this.listenersToPut.length = 0;
},
destructor: function() {
this.reset();
}
});
PooledClass.addPoolingTo(ReactPutListenerQueue);
module.exports = ReactPutListenerQueue;
},{"./Object.assign":168,"./PooledClass":169,"./ReactBrowserEventEmitter":172}],227:[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 ReactReconcileTransaction
* @typechecks static-only
*/
'use strict';
var CallbackQueue = require("./CallbackQueue");
var PooledClass = require("./PooledClass");
var ReactBrowserEventEmitter = require("./ReactBrowserEventEmitter");
var ReactInputSelection = require("./ReactInputSelection");
var ReactPutListenerQueue = require("./ReactPutListenerQueue");
var Transaction = require("./Transaction");
var assign = require("./Object.assign");
/**
* Ensures that, when possible, the selection range (currently selected text
* input) is not disturbed by performing the transaction.
*/
var SELECTION_RESTORATION = {
/**
* @return {Selection} Selection information.
*/
initialize: ReactInputSelection.getSelectionInformation,
/**
* @param {Selection} sel Selection information returned from `initialize`.
*/
close: ReactInputSelection.restoreSelection
};
/**
* Suppresses events (blur/focus) that could be inadvertently dispatched due to
* high level DOM manipulations (like temporarily removing a text input from the
* DOM).
*/
var EVENT_SUPPRESSION = {
/**
* @return {boolean} The enabled status of `ReactBrowserEventEmitter` before
* the reconciliation.
*/
initialize: function() {
var currentlyEnabled = ReactBrowserEventEmitter.isEnabled();
ReactBrowserEventEmitter.setEnabled(false);
return currentlyEnabled;
},
/**
* @param {boolean} previouslyEnabled Enabled status of
* `ReactBrowserEventEmitter` before the reconciliation occured. `close`
* restores the previous value.
*/
close: function(previouslyEnabled) {
ReactBrowserEventEmitter.setEnabled(previouslyEnabled);
}
};
/**
* Provides a queue for collecting `componentDidMount` and
* `componentDidUpdate` callbacks during the the transaction.
*/
var ON_DOM_READY_QUEUEING = {
/**
* Initializes the internal `onDOMReady` queue.
*/
initialize: function() {
this.reactMountReady.reset();
},
/**
* After DOM is flushed, invoke all registered `onDOMReady` callbacks.
*/
close: function() {
this.reactMountReady.notifyAll();
}
};
var PUT_LISTENER_QUEUEING = {
initialize: function() {
this.putListenerQueue.reset();
},
close: function() {
this.putListenerQueue.putListeners();
}
};
/**
* Executed within the scope of the `Transaction` instance. Consider these as
* being member methods, but with an implied ordering while being isolated from
* each other.
*/
var TRANSACTION_WRAPPERS = [
PUT_LISTENER_QUEUEING,
SELECTION_RESTORATION,
EVENT_SUPPRESSION,
ON_DOM_READY_QUEUEING
];
/**
* Currently:
* - The order that these are listed in the transaction is critical:
* - Suppresses events.
* - Restores selection range.
*
* Future:
* - Restore document/overflow scroll positions that were unintentionally
* modified via DOM insertions above the top viewport boundary.
* - Implement/integrate with customized constraint based layout system and keep
* track of which dimensions must be remeasured.
*
* @class ReactReconcileTransaction
*/
function ReactReconcileTransaction() {
this.reinitializeTransaction();
// Only server-side rendering really needs this option (see
// `ReactServerRendering`), but server-side uses
// `ReactServerRenderingTransaction` instead. This option is here so that it's
// accessible and defaults to false when `ReactDOMComponent` and
// `ReactTextComponent` checks it in `mountComponent`.`
this.renderToStaticMarkup = false;
this.reactMountReady = CallbackQueue.getPooled(null);
this.putListenerQueue = ReactPutListenerQueue.getPooled();
}
var Mixin = {
/**
* @see Transaction
* @abstract
* @final
* @return {array<object>} List of operation wrap proceedures.
* TODO: conve