Created
July 19, 2016 13:23
-
-
Save nathanmarks/34e204dd4ae9c42b06508a742883e5bc to your computer and use it in GitHub Desktop.
This file has been truncated, but you can view the full file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function webpackUniversalModuleDefinition(root, factory) { | |
if(typeof exports === 'object' && typeof module === 'object') | |
module.exports = factory(require("react"), require("react-dom"), require("react-addons-transition-group"), require("react-addons-create-fragment")); | |
else if(typeof define === 'function' && define.amd) | |
define(["react", "react-dom", "react-addons-transition-group", "react-addons-create-fragment"], factory); | |
else if(typeof exports === 'object') | |
exports["MaterialUI"] = factory(require("react"), require("react-dom"), require("react-addons-transition-group"), require("react-addons-create-fragment")); | |
else | |
root["MaterialUI"] = factory(root["React"], root["ReactDOM"], root["React.addons.TransitionGroup"], root["React.addons.createFragment"]); | |
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_26__, __WEBPACK_EXTERNAL_MODULE_272__) { | |
return /******/ (function(modules) { // webpackBootstrap | |
/******/ // The module cache | |
/******/ var installedModules = {}; | |
/******/ // The require function | |
/******/ function __webpack_require__(moduleId) { | |
/******/ // Check if module is in cache | |
/******/ if(installedModules[moduleId]) | |
/******/ return installedModules[moduleId].exports; | |
/******/ // Create a new module (and put it into the cache) | |
/******/ var module = installedModules[moduleId] = { | |
/******/ exports: {}, | |
/******/ id: moduleId, | |
/******/ loaded: false | |
/******/ }; | |
/******/ // Execute the module function | |
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); | |
/******/ // Flag the module as loaded | |
/******/ module.loaded = true; | |
/******/ // Return the exports of the module | |
/******/ return module.exports; | |
/******/ } | |
/******/ // expose the modules object (__webpack_modules__) | |
/******/ __webpack_require__.m = modules; | |
/******/ // expose the module cache | |
/******/ __webpack_require__.c = installedModules; | |
/******/ // __webpack_public_path__ | |
/******/ __webpack_require__.p = ""; | |
/******/ // Load entry module and return exports | |
/******/ return __webpack_require__(0); | |
/******/ }) | |
/************************************************************************/ | |
/******/ ([ | |
/* 0 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _index = __webpack_require__(184); | |
Object.keys(_index).forEach(function (key) { | |
if (key === "default") return; | |
Object.defineProperty(exports, key, { | |
enumerable: true, | |
get: function get() { | |
return _index[key]; | |
} | |
}); | |
}); | |
var _styles = __webpack_require__(195); | |
Object.keys(_styles).forEach(function (key) { | |
if (key === "default") return; | |
Object.defineProperty(exports, key, { | |
enumerable: true, | |
get: function get() { | |
return _styles[key]; | |
} | |
}); | |
}); | |
var _reactTapEventPlugin = __webpack_require__(255); | |
var _reactTapEventPlugin2 = _interopRequireDefault(_reactTapEventPlugin); | |
console.log(__WEBPACK_EXTERNAL_MODULE_26__); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
(0, _reactTapEventPlugin2.default)(); | |
/***/ }, | |
/* 1 */ | |
/***/ function(module, exports) { | |
module.exports = __WEBPACK_EXTERNAL_MODULE_1__; | |
/***/ }, | |
/* 2 */ | |
/***/ function(module, exports) { | |
module.exports = 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; | |
}; | |
/***/ }, | |
/* 3 */ | |
/***/ function(module, exports) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = { | |
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 property + ' ' + duration + ' ' + easeFunction + ' ' + delay; | |
} | |
}; | |
/***/ }, | |
/* 4 */ | |
/***/ function(module, exports) { | |
module.exports = __WEBPACK_EXTERNAL_MODULE_4__; | |
/***/ }, | |
/* 5 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _SvgIcon = __webpack_require__(161); | |
var _SvgIcon2 = _interopRequireDefault(_SvgIcon); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _SvgIcon2.default; | |
/***/ }, | |
/* 6 */ | |
/***/ function(module, exports, __webpack_require__) { | |
/** | |
* Copyright 2014-2015, Facebook, Inc. | |
* All rights reserved. | |
* | |
* This source code is licensed under the BSD-style license found in the | |
* LICENSE file in the root directory of this source tree. An additional grant | |
* of patent rights can be found in the PATENTS file in the same directory. | |
*/ | |
'use strict'; | |
/** | |
* Similar to invariant but only logs a warning if the condition is not met. | |
* This can be used to log issues in development environments in critical | |
* paths. Removing the logging code for production environments will keep the | |
* same logic and follow the same code paths. | |
*/ | |
var warning = function() {}; | |
if (true) { | |
warning = function(condition, format, args) { | |
var len = arguments.length; | |
args = new Array(len > 2 ? len - 2 : 0); | |
for (var key = 2; key < len; key++) { | |
args[key - 2] = arguments[key]; | |
} | |
if (format === undefined) { | |
throw new Error( | |
'`warning(condition, format, ...args)` requires a warning ' + | |
'message argument' | |
); | |
} | |
if (format.length < 10 || (/^[s\W]*$/).test(format)) { | |
throw new Error( | |
'The warning format should be able to uniquely identify this ' + | |
'warning. Please, use a more descriptive format than: ' + format | |
); | |
} | |
if (!condition) { | |
var argIndex = 0; | |
var message = 'Warning: ' + | |
format.replace(/%s/g, function() { | |
return args[argIndex++]; | |
}); | |
if (typeof console !== 'undefined') { | |
console.error(message); | |
} | |
try { | |
// This error was thrown as a convenience so that you can use this stack | |
// to find the callsite that caused this warning to fire. | |
throw new Error(message); | |
} catch(x) {} | |
} | |
}; | |
} | |
module.exports = warning; | |
/***/ }, | |
/* 7 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
exports.__esModule = true; | |
var _shouldUpdate = __webpack_require__(269); | |
var _shouldUpdate2 = _interopRequireDefault(_shouldUpdate); | |
var _shallowEqual = __webpack_require__(16); | |
var _shallowEqual2 = _interopRequireDefault(_shallowEqual); | |
var _createHelper = __webpack_require__(97); | |
var _createHelper2 = _interopRequireDefault(_createHelper); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
var pure = (0, _shouldUpdate2.default)(function (props, nextProps) { | |
return !(0, _shallowEqual2.default)(props, nextProps); | |
}); | |
exports.default = (0, _createHelper2.default)(pure, 'pure', true, true); | |
/***/ }, | |
/* 8 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _Paper = __webpack_require__(140); | |
var _Paper2 = _interopRequireDefault(_Paper); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _Paper2.default; | |
/***/ }, | |
/* 9 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _react = __webpack_require__(1); | |
var horizontal = _react.PropTypes.oneOf(['left', 'middle', 'right']); | |
var vertical = _react.PropTypes.oneOf(['top', 'center', 'bottom']); | |
exports.default = { | |
corners: _react.PropTypes.oneOf(['bottom-left', 'bottom-right', 'top-left', 'top-right']), | |
horizontal: horizontal, | |
vertical: vertical, | |
origin: _react.PropTypes.shape({ | |
horizontal: horizontal, | |
vertical: vertical | |
}), | |
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]) | |
}; | |
/***/ }, | |
/* 10 */ | |
/***/ function(module, exports) { | |
// Source: http://jsfiddle.net/vWx8V/ | |
// http://stackoverflow.com/questions/5603195/full-list-of-javascript-keycodes | |
/** | |
* Conenience method returns corresponding value for given keyName or keyCode. | |
* | |
* @param {Mixed} keyCode {Number} or keyName {String} | |
* @return {Mixed} | |
* @api public | |
*/ | |
exports = module.exports = function(searchInput) { | |
// Keyboard Events | |
if (searchInput && 'object' === typeof searchInput) { | |
var hasKeyCode = searchInput.which || searchInput.keyCode || searchInput.charCode | |
if (hasKeyCode) searchInput = hasKeyCode | |
} | |
// Numbers | |
if ('number' === typeof searchInput) return names[searchInput] | |
// Everything else (cast to string) | |
var search = String(searchInput) | |
// check codes | |
var foundNamedKey = codes[search.toLowerCase()] | |
if (foundNamedKey) return foundNamedKey | |
// check aliases | |
var foundNamedKey = aliases[search.toLowerCase()] | |
if (foundNamedKey) return foundNamedKey | |
// weird character? | |
if (search.length === 1) return search.charCodeAt(0) | |
return undefined | |
} | |
/** | |
* Get by name | |
* | |
* exports.code['enter'] // => 13 | |
*/ | |
var codes = exports.code = exports.codes = { | |
'backspace': 8, | |
'tab': 9, | |
'enter': 13, | |
'shift': 16, | |
'ctrl': 17, | |
'alt': 18, | |
'pause/break': 19, | |
'caps lock': 20, | |
'esc': 27, | |
'space': 32, | |
'page up': 33, | |
'page down': 34, | |
'end': 35, | |
'home': 36, | |
'left': 37, | |
'up': 38, | |
'right': 39, | |
'down': 40, | |
'insert': 45, | |
'delete': 46, | |
'command': 91, | |
'left command': 91, | |
'right command': 93, | |
'numpad *': 106, | |
'numpad +': 107, | |
'numpad -': 109, | |
'numpad .': 110, | |
'numpad /': 111, | |
'num lock': 144, | |
'scroll lock': 145, | |
'my computer': 182, | |
'my calculator': 183, | |
';': 186, | |
'=': 187, | |
',': 188, | |
'-': 189, | |
'.': 190, | |
'/': 191, | |
'`': 192, | |
'[': 219, | |
'\\': 220, | |
']': 221, | |
"'": 222 | |
} | |
// Helper aliases | |
var aliases = exports.aliases = { | |
'windows': 91, | |
'⇧': 16, | |
'⌥': 18, | |
'⌃': 17, | |
'⌘': 91, | |
'ctl': 17, | |
'control': 17, | |
'option': 18, | |
'pause': 19, | |
'break': 19, | |
'caps': 20, | |
'return': 13, | |
'escape': 27, | |
'spc': 32, | |
'pgup': 33, | |
'pgdn': 34, | |
'ins': 45, | |
'del': 46, | |
'cmd': 91 | |
} | |
/*! | |
* Programatically add the following | |
*/ | |
// lower case chars | |
for (i = 97; i < 123; i++) codes[String.fromCharCode(i)] = i - 32 | |
// numbers | |
for (var i = 48; i < 58; i++) codes[i - 48] = i | |
// function keys | |
for (i = 1; i < 13; i++) codes['f'+i] = i + 111 | |
// numpad keys | |
for (i = 0; i < 10; i++) codes['numpad '+i] = i + 96 | |
/** | |
* Get by code | |
* | |
* exports.name[13] // => 'Enter' | |
*/ | |
var names = exports.names = exports.title = {} // title for backward compat | |
// Create reverse mapping | |
for (i in codes) names[codes[i]] = i | |
// Add aliases | |
for (var alias in aliases) { | |
codes[alias] = aliases[alias] | |
} | |
/***/ }, | |
/* 11 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _childUtils = __webpack_require__(24); | |
var _events = __webpack_require__(47); | |
var _events2 = _interopRequireDefault(_events); | |
var _keycode = __webpack_require__(10); | |
var _keycode2 = _interopRequireDefault(_keycode); | |
var _FocusRipple = __webpack_require__(43); | |
var _FocusRipple2 = _interopRequireDefault(_FocusRipple); | |
var _TouchRipple = __webpack_require__(83); | |
var _TouchRipple2 = _interopRequireDefault(_TouchRipple); | |
var _deprecatedPropType = __webpack_require__(15); | |
var _deprecatedPropType2 = _interopRequireDefault(_deprecatedPropType); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var 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) { | |
_events2.default.on(window, 'keydown', function (event) { | |
tabPressed = (0, _keycode2.default)(event) === 'tab'; | |
}); | |
listening = true; | |
} | |
} | |
var EnhancedButton = function (_Component) { | |
_inherits(EnhancedButton, _Component); | |
function EnhancedButton() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, EnhancedButton); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(EnhancedButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { isKeyboardFocused: false }, _this.handleKeyDown = function (event) { | |
if (!_this.props.disabled && !_this.props.disableKeyboardFocus) { | |
if ((0, _keycode2.default)(event) === 'enter' && _this.state.isKeyboardFocused) { | |
_this.handleTouchTap(event); | |
} | |
if ((0, _keycode2.default)(event) === 'esc' && _this.state.isKeyboardFocused) { | |
_this.removeKeyboardFocus(event); | |
} | |
} | |
_this.props.onKeyDown(event); | |
}, _this.handleKeyUp = function (event) { | |
if (!_this.props.disabled && !_this.props.disableKeyboardFocus) { | |
if ((0, _keycode2.default)(event) === 'space' && _this.state.isKeyboardFocused) { | |
_this.handleTouchTap(event); | |
} | |
} | |
_this.props.onKeyUp(event); | |
}, _this.handleBlur = function (event) { | |
_this.cancelFocusTimeout(); | |
_this.removeKeyboardFocus(event); | |
_this.props.onBlur(event); | |
}, _this.handleFocus = function (event) { | |
if (event) event.persist(); | |
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(event); | |
tabPressed = false; | |
} | |
}, 150); | |
_this.props.onFocus(event); | |
} | |
}, _this.handleClick = function (event) { | |
if (!_this.props.disabled) { | |
tabPressed = false; | |
_this.props.onClick(event); | |
} | |
}, _this.handleTouchTap = function (event) { | |
_this.cancelFocusTimeout(); | |
if (!_this.props.disabled) { | |
tabPressed = false; | |
_this.removeKeyboardFocus(event); | |
_this.props.onTouchTap(event); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(EnhancedButton, [{ | |
key: 'componentWillMount', | |
value: function componentWillMount() { | |
var _props = this.props; | |
var disabled = _props.disabled; | |
var disableKeyboardFocus = _props.disableKeyboardFocus; | |
var keyboardFocused = _props.keyboardFocused; | |
if (!disabled && keyboardFocused && !disableKeyboardFocus) { | |
this.setState({ isKeyboardFocused: true }); | |
} | |
} | |
}, { | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
injectStyle(); | |
listenForTabPresses(); | |
if (this.state.isKeyboardFocused) { | |
this.refs.enhancedButton.focus(); | |
this.props.onKeyboardFocus(null, true); | |
} | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
if ((nextProps.disabled || nextProps.disableKeyboardFocus) && this.state.isKeyboardFocused) { | |
this.setState({ isKeyboardFocused: false }); | |
if (nextProps.onKeyboardFocus) { | |
nextProps.onKeyboardFocus(null, false); | |
} | |
} | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
clearTimeout(this.focusTimeout); | |
} | |
}, { | |
key: 'isKeyboardFocused', | |
value: function isKeyboardFocused() { | |
return this.state.isKeyboardFocused; | |
} | |
}, { | |
key: 'removeKeyboardFocus', | |
value: function removeKeyboardFocus(event) { | |
if (this.state.isKeyboardFocused) { | |
this.setState({ isKeyboardFocused: false }); | |
this.props.onKeyboardFocus(event, false); | |
} | |
} | |
}, { | |
key: 'setKeyboardFocus', | |
value: function setKeyboardFocus(event) { | |
if (!this.state.isKeyboardFocused) { | |
this.setState({ isKeyboardFocused: true }); | |
this.props.onKeyboardFocus(event, true); | |
} | |
} | |
}, { | |
key: 'cancelFocusTimeout', | |
value: function cancelFocusTimeout() { | |
if (this.focusTimeout) { | |
clearTimeout(this.focusTimeout); | |
this.focusTimeout = null; | |
} | |
} | |
}, { | |
key: 'createButtonChildren', | |
value: 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 ? _react2.default.createElement(_FocusRipple2.default, { | |
color: focusRippleColor, | |
opacity: focusRippleOpacity, | |
show: isKeyboardFocused | |
}) : undefined; | |
// Touch Ripple | |
var touchRipple = !disabled && !disableTouchRipple ? _react2.default.createElement( | |
_TouchRipple2.default, | |
{ | |
centerRipple: centerRipple, | |
color: touchRippleColor, | |
opacity: touchRippleOpacity | |
}, | |
children | |
) : undefined; | |
return (0, _childUtils.createChildFragment)({ | |
focusRipple: focusRipple, | |
touchRipple: touchRipple, | |
children: touchRipple ? undefined : children | |
}); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props3 = this.props; | |
var centerRipple = _props3.centerRipple; | |
var // eslint-disable-line no-unused-vars | |
children = _props3.children; | |
var containerElement = _props3.containerElement; | |
var disabled = _props3.disabled; | |
var disableFocusRipple = _props3.disableFocusRipple; | |
var disableKeyboardFocus = _props3.disableKeyboardFocus; | |
var // eslint-disable-line no-unused-vars | |
disableTouchRipple = _props3.disableTouchRipple; | |
var // eslint-disable-line no-unused-vars | |
focusRippleColor = _props3.focusRippleColor; | |
var // eslint-disable-line no-unused-vars | |
focusRippleOpacity = _props3.focusRippleOpacity; | |
var // eslint-disable-line no-unused-vars | |
href = _props3.href; | |
var linkButton = _props3.linkButton; | |
var // eslint-disable-line no-unused-vars | |
touchRippleColor = _props3.touchRippleColor; | |
var // eslint-disable-line no-unused-vars | |
touchRippleOpacity = _props3.touchRippleOpacity; | |
var // eslint-disable-line no-unused-vars | |
onBlur = _props3.onBlur; | |
var // eslint-disable-line no-unused-vars | |
onClick = _props3.onClick; | |
var // eslint-disable-line no-unused-vars | |
onFocus = _props3.onFocus; | |
var // eslint-disable-line no-unused-vars | |
onKeyUp = _props3.onKeyUp; | |
var // eslint-disable-line no-unused-vars | |
onKeyDown = _props3.onKeyDown; | |
var // eslint-disable-line no-unused-vars | |
onTouchTap = _props3.onTouchTap; | |
var // eslint-disable-line no-unused-vars | |
style = _props3.style; | |
var tabIndex = _props3.tabIndex; | |
var type = _props3.type; | |
var other = _objectWithoutProperties(_props3, ['centerRipple', 'children', 'containerElement', 'disabled', 'disableFocusRipple', 'disableKeyboardFocus', 'disableTouchRipple', 'focusRippleColor', 'focusRippleOpacity', 'href', 'linkButton', 'touchRippleColor', 'touchRippleOpacity', 'onBlur', 'onClick', 'onFocus', 'onKeyUp', 'onKeyDown', 'onTouchTap', 'style', 'tabIndex', 'type']); | |
var _context$muiTheme = this.context.muiTheme; | |
var prepareStyles = _context$muiTheme.prepareStyles; | |
var enhancedButton = _context$muiTheme.enhancedButton; | |
var mergedStyles = (0, _simpleAssign2.default)({ | |
border: 10, | |
boxSizing: 'border-box', | |
display: 'inline-block', | |
fontFamily: this.context.muiTheme.baseTheme.fontFamily, | |
WebkitTapHighlightColor: enhancedButton.tapHighlightColor, // Remove mobile color flashing (deprecated) | |
cursor: disabled ? 'default' : 'pointer', | |
textDecoration: 'none', | |
margin: 0, | |
padding: 0, | |
outline: 'none', | |
fontSize: 'inherit', | |
fontWeight: 'inherit', | |
/** | |
* This is needed 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: disableTouchRipple && disableFocusRipple ? null : 'translate3d(0, 0, 0)', | |
verticalAlign: other.hasOwnProperty('href') ? 'middle' : null | |
}, style); | |
// Passing both background:none & backgroundColor can break due to object iteration order | |
if (!mergedStyles.backgroundColor && !mergedStyles.background) { | |
mergedStyles.background = 'none'; | |
} | |
if (disabled && href) { | |
return _react2.default.createElement( | |
'span', | |
_extends({}, other, { | |
style: mergedStyles | |
}), | |
children | |
); | |
} | |
var buttonProps = _extends({}, other, { | |
style: prepareStyles(mergedStyles), | |
ref: 'enhancedButton', | |
disabled: disabled, | |
href: href, | |
onBlur: this.handleBlur, | |
onClick: this.handleClick, | |
onFocus: this.handleFocus, | |
onTouchTap: this.handleTouchTap, | |
onKeyUp: this.handleKeyUp, | |
onKeyDown: this.handleKeyDown, | |
tabIndex: tabIndex, | |
type: type | |
}); | |
var buttonChildren = this.createButtonChildren(); | |
return _react2.default.isValidElement(containerElement) ? _react2.default.cloneElement(containerElement, buttonProps, buttonChildren) : _react2.default.createElement(href ? 'a' : containerElement, buttonProps, buttonChildren); | |
} | |
}]); | |
return EnhancedButton; | |
}(_react.Component); | |
EnhancedButton.propTypes = { | |
centerRipple: _react.PropTypes.bool, | |
children: _react.PropTypes.node, | |
containerElement: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]), | |
disableFocusRipple: _react.PropTypes.bool, | |
disableKeyboardFocus: _react.PropTypes.bool, | |
disableTouchRipple: _react.PropTypes.bool, | |
disabled: _react.PropTypes.bool, | |
focusRippleColor: _react.PropTypes.string, | |
focusRippleOpacity: _react.PropTypes.number, | |
href: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.bool]), | |
keyboardFocused: _react.PropTypes.bool, | |
linkButton: (0, _deprecatedPropType2.default)(_react.PropTypes.bool, 'LinkButton is no longer required when the `href` property is provided.'), | |
onBlur: _react.PropTypes.func, | |
onClick: _react.PropTypes.func, | |
onFocus: _react.PropTypes.func, | |
onKeyDown: _react.PropTypes.func, | |
onKeyUp: _react.PropTypes.func, | |
onKeyboardFocus: _react.PropTypes.func, | |
onMouseDown: _react.PropTypes.func, | |
onMouseEnter: _react.PropTypes.func, | |
onMouseLeave: _react.PropTypes.func, | |
onMouseUp: _react.PropTypes.func, | |
onTouchEnd: _react.PropTypes.func, | |
onTouchStart: _react.PropTypes.func, | |
onTouchTap: _react.PropTypes.func, | |
style: _react.PropTypes.object, | |
tabIndex: _react.PropTypes.number, | |
touchRippleColor: _react.PropTypes.string, | |
touchRippleOpacity: _react.PropTypes.number, | |
type: _react.PropTypes.string | |
}; | |
EnhancedButton.defaultProps = { | |
containerElement: 'button', | |
onBlur: function onBlur() {}, | |
onClick: function onClick() {}, | |
onFocus: function onFocus() {}, | |
onKeyDown: function onKeyDown() {}, | |
onKeyUp: function onKeyUp() {}, | |
onKeyboardFocus: function onKeyboardFocus() {}, | |
onMouseDown: function onMouseDown() {}, | |
onMouseEnter: function onMouseEnter() {}, | |
onMouseLeave: function onMouseLeave() {}, | |
onMouseUp: function onMouseUp() {}, | |
onTouchEnd: function onTouchEnd() {}, | |
onTouchStart: function onTouchStart() {}, | |
onTouchTap: function onTouchTap() {}, | |
tabIndex: 0, | |
type: 'button' | |
}; | |
EnhancedButton.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = EnhancedButton; | |
/***/ }, | |
/* 12 */ | |
/***/ function(module, exports) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.convertColorToString = convertColorToString; | |
exports.convertHexToRGB = convertHexToRGB; | |
exports.decomposeColor = decomposeColor; | |
exports.getContrastRatio = getContrastRatio; | |
exports.getLuminance = getLuminance; | |
exports.emphasize = emphasize; | |
exports.fade = fade; | |
exports.darken = darken; | |
exports.lighten = lighten; | |
/** | |
* Returns a number whose value is limited to the given range. | |
* | |
* @param {number} value The value to be clamped | |
* @param {number} min The lower boundary of the output range | |
* @param {number} max The upper boundary of the output range | |
* @returns {number} A number in the range [min, max] | |
*/ | |
function clamp(value, min, max) { | |
if (value < min) { | |
return min; | |
} | |
if (value > max) { | |
return max; | |
} | |
return value; | |
} | |
/** | |
* Converts a color object with type and values to a string. | |
* | |
* @param {object} color - Decomposed color | |
* @param {string} color.type - One of, 'rgb', 'rgba', 'hsl', 'hsla' | |
* @param {array} color.values - [n,n,n] or [n,n,n,n] | |
* @returns {string} A CSS color string | |
*/ | |
function convertColorToString(color) { | |
var type = color.type; | |
var values = color.values; | |
if (type.indexOf('rgb') > -1) { | |
// Only convert the first 3 values to int (i.e. not alpha) | |
for (var i = 0; i < 3; i++) { | |
values[i] = parseInt(values[i]); | |
} | |
} | |
var colorString = void 0; | |
if (type.indexOf('hsl') > -1) { | |
colorString = color.type + '(' + values[0] + ', ' + values[1] + '%, ' + values[2] + '%'; | |
} else { | |
colorString = color.type + '(' + values[0] + ', ' + values[1] + ', ' + values[2]; | |
} | |
if (values.length === 4) { | |
colorString += ', ' + color.values[3] + ')'; | |
} else { | |
colorString += ')'; | |
} | |
return colorString; | |
} | |
/** | |
* Converts a color from CSS hex format to CSS rgb format. | |
* | |
* @param {string} color - Hex color, i.e. #nnn or #nnnnnn | |
* @returns {string} A CSS rgb color string | |
*/ | |
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 an object with the type and values of a color. | |
* | |
* Note: Does not support rgb % values. | |
* | |
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() | |
* @returns {{type: string, values: number[]}} A MUI color object | |
*/ | |
function decomposeColor(color) { | |
if (color.charAt(0) === '#') { | |
return decomposeColor(convertHexToRGB(color)); | |
} | |
var marker = color.indexOf('('); | |
var type = color.substring(0, marker); | |
var values = color.substring(marker + 1, color.length - 1).split(','); | |
values = values.map(function (value) { | |
return parseFloat(value); | |
}); | |
return { type: type, values: values }; | |
} | |
/** | |
* Calculates the contrast ratio between two colors. | |
* | |
* Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef | |
* | |
* @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() | |
* @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() | |
* @returns {number} A contrast ratio value in the range 0 - 21 with 2 digit precision. | |
*/ | |
function getContrastRatio(foreground, background) { | |
var lumA = getLuminance(foreground); | |
var lumB = getLuminance(background); | |
var contrastRatio = (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05); | |
return Number(contrastRatio.toFixed(2)); // Truncate at two digits | |
} | |
/** | |
* The relative brightness of any point in a color space, | |
* normalized to 0 for darkest black and 1 for lightest white. | |
* | |
* Formula: https://www.w3.org/WAI/GL/wiki/Relative_luminance | |
* | |
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() | |
* @returns {number} The relative brightness of the color in the range 0 - 1 | |
*/ | |
function getLuminance(color) { | |
color = 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 Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3)); // Truncate at 3 digits | |
} else if (color.type.indexOf('hsl') > -1) { | |
return color.values[2] / 100; | |
} | |
} | |
/** | |
* Darken or lighten a colour, depending on its luminance. | |
* Light colors are darkened, dark colors are lightened. | |
* | |
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() | |
* @param {number} coefficient=0.15 - multiplier in the range 0 - 1 | |
* @returns {string} A CSS color string. Hex input values are returned as rgb | |
*/ | |
function emphasize(color) { | |
var coefficient = arguments.length <= 1 || arguments[1] === undefined ? 0.15 : arguments[1]; | |
return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient); | |
} | |
/** | |
* Set the absolute transparency of a color. | |
* Any existing alpha values are overwritten. | |
* | |
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() | |
* @param {number} value - value to set the alpha channel to in the range 0 -1 | |
* @returns {string} A CSS color string. Hex input values are returned as rgb | |
*/ | |
function fade(color, value) { | |
color = decomposeColor(color); | |
value = clamp(value, 0, 1); | |
if (color.type === 'rgb' || color.type === 'hsl') { | |
color.type += 'a'; | |
} | |
color.values[3] = value; | |
return convertColorToString(color); | |
} | |
/** | |
* Darkens a color. | |
* | |
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() | |
* @param {number} coefficient - multiplier in the range 0 - 1 | |
* @returns {string} A CSS color string. Hex input values are returned as rgb | |
*/ | |
function darken(color, coefficient) { | |
color = decomposeColor(color); | |
coefficient = clamp(coefficient, 0, 1); | |
if (color.type.indexOf('hsl') > -1) { | |
color.values[2] *= 1 - coefficient; | |
} else if (color.type.indexOf('rgb') > -1) { | |
for (var i = 0; i < 3; i++) { | |
color.values[i] *= 1 - coefficient; | |
} | |
} | |
return convertColorToString(color); | |
} | |
/** | |
* Lightens a color. | |
* | |
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() | |
* @param {number} coefficient - multiplier in the range 0 - 1 | |
* @returns {string} A CSS color string. Hex input values are returned as rgb | |
*/ | |
function lighten(color, coefficient) { | |
color = decomposeColor(color); | |
coefficient = clamp(coefficient, 0, 1); | |
if (color.type.indexOf('hsl') > -1) { | |
color.values[2] += (100 - color.values[2]) * coefficient; | |
} else if (color.type.indexOf('rgb') > -1) { | |
for (var i = 0; i < 3; i++) { | |
color.values[i] += (255 - color.values[i]) * coefficient; | |
} | |
} | |
return convertColorToString(color); | |
} | |
/***/ }, | |
/* 13 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _shallowEqual = __webpack_require__(249); | |
var _shallowEqual2 = _interopRequireDefault(_shallowEqual); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function on(target, eventName, callback, capture) { | |
if (target.addEventListener) { | |
target.addEventListener(eventName, callback, capture); | |
} else if (target.attachEvent) { | |
// IE8+ Support | |
target.attachEvent('on' + eventName, function () { | |
callback.call(target); | |
}); | |
} | |
} | |
function off(target, eventName, callback, capture) { | |
if (target.removeEventListener) { | |
target.removeEventListener(eventName, callback, capture); | |
} else if (target.detachEvent) { | |
// IE8+ Support | |
target.detachEvent('on' + eventName, callback); | |
} | |
} | |
function forEachListener(props, iteratee) { | |
for (var name in props) { | |
if (name.substring(0, 2) === 'on' && props[name] instanceof Function) { | |
var _eventName = name.substring(2).toLowerCase(); | |
iteratee(_eventName, props[name]); | |
} | |
} | |
} | |
var EventListener = function (_Component) { | |
_inherits(EventListener, _Component); | |
function EventListener() { | |
_classCallCheck(this, EventListener); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(EventListener).apply(this, arguments)); | |
} | |
_createClass(EventListener, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
this.addListeners(); | |
} | |
}, { | |
key: 'shouldComponentUpdate', | |
value: function shouldComponentUpdate(nextProps) { | |
return !(0, _shallowEqual2.default)(this.props, nextProps); | |
} | |
}, { | |
key: 'componentWillUpdate', | |
value: function componentWillUpdate() { | |
this.removeListeners(); | |
} | |
}, { | |
key: 'componentDidUpdate', | |
value: function componentDidUpdate() { | |
this.addListeners(); | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
this.removeListeners(); | |
} | |
}, { | |
key: 'addListeners', | |
value: function addListeners() { | |
var _this2 = this; | |
var _props = this.props; | |
var capture = _props.capture; | |
var target = _props.target; | |
if (target) { | |
(function () { | |
var element = target; | |
if (typeof target === 'string') { | |
element = window[target]; | |
} | |
forEachListener(_this2.props, function (eventName, listener) { | |
return on(element, eventName, listener, capture); | |
}); | |
})(); | |
} | |
} | |
}, { | |
key: 'removeListeners', | |
value: function removeListeners() { | |
var _this3 = this; | |
var _props2 = this.props; | |
var capture = _props2.capture; | |
var target = _props2.target; | |
if (target) { | |
(function () { | |
var element = target; | |
if (typeof target === 'string') { | |
element = window[target]; | |
} | |
forEachListener(_this3.props, function (eventName, listener) { | |
return off(element, eventName, listener, capture); | |
}); | |
})(); | |
} | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
return this.props.children || null; | |
} | |
}]); | |
return EventListener; | |
}(_react.Component); | |
EventListener.propTypes = { | |
/** | |
* Whether to use capturing listeners. | |
*/ | |
capture: _react.PropTypes.bool.isRequired, | |
/** | |
* You can provide a children too. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The DOM target to listen to. | |
*/ | |
target: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.object, _react2.default.PropTypes.string]) | |
}; | |
EventListener.defaultProps = { | |
capture: false | |
}; | |
exports.default = EventListener; | |
/***/ }, | |
/* 14 */ | |
/***/ function(module, exports) { | |
"use strict"; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = { | |
set: function set(style, key, value) { | |
style[key] = value; | |
} | |
}; | |
/***/ }, | |
/* 15 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = deprecated; | |
var _warning = __webpack_require__(6); | |
var _warning2 = _interopRequireDefault(_warning); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function deprecated(propType, explanation) { | |
return function validate(props, propName, componentName) { | |
if (props[propName] != null) { | |
true ? (0, _warning2.default)(false, '"' + propName + '" property of "' + componentName + '" has been deprecated.\n' + explanation) : void 0; | |
} | |
return propType(props, propName, componentName); | |
}; | |
} | |
/***/ }, | |
/* 16 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
exports.__esModule = true; | |
var _shallowEqual = __webpack_require__(217); | |
var _shallowEqual2 = _interopRequireDefault(_shallowEqual); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _shallowEqual2.default; | |
/***/ }, | |
/* 17 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.dateTimeFormat = dateTimeFormat; | |
exports.addDays = addDays; | |
exports.addMonths = addMonths; | |
exports.addYears = addYears; | |
exports.cloneDate = cloneDate; | |
exports.cloneAsDate = cloneAsDate; | |
exports.getDaysInMonth = getDaysInMonth; | |
exports.getFirstDayOfMonth = getFirstDayOfMonth; | |
exports.getFirstDayOfWeek = getFirstDayOfWeek; | |
exports.getWeekArray = getWeekArray; | |
exports.localizedWeekday = localizedWeekday; | |
exports.formatIso = formatIso; | |
exports.isEqualDate = isEqualDate; | |
exports.isBeforeDate = isBeforeDate; | |
exports.isAfterDate = isAfterDate; | |
exports.isBetweenDates = isBetweenDates; | |
exports.monthDiff = monthDiff; | |
exports.yearDiff = yearDiff; | |
var _warning = __webpack_require__(6); | |
var _warning2 = _interopRequireDefault(_warning); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
var dayAbbreviation = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; | |
var dayList = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; | |
var monthList = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; | |
var monthLongList = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; | |
function dateTimeFormat(locale, options) { | |
true ? (0, _warning2.default)(locale === 'en-US', 'The ' + locale + ' locale is not supported by the built-in DateTimeFormat.\n Use the `DateTimeFormat` prop to supply an alternative implementation.') : void 0; | |
this.format = function (date) { | |
if (options.month === 'short' && options.weekday === 'short' && options.day === '2-digit') { | |
return dayList[date.getDay()] + ', ' + monthList[date.getMonth()] + ' ' + date.getDate(); | |
} else if (options.day === 'numeric' && options.month === 'numeric' && options.year === 'numeric') { | |
return date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear(); | |
} else if (options.month === 'long' && options.year === 'numeric') { | |
return monthLongList[date.getMonth()] + ' ' + date.getFullYear(); | |
} else if (options.weekday === 'narrow') { | |
return dayAbbreviation[date.getDay()]; | |
} else { | |
true ? (0, _warning2.default)(false, 'Wrong usage of DateTimeFormat') : void 0; | |
} | |
}; | |
} | |
function addDays(d, days) { | |
var newDate = cloneDate(d); | |
newDate.setDate(d.getDate() + days); | |
return newDate; | |
} | |
function addMonths(d, months) { | |
var newDate = cloneDate(d); | |
newDate.setMonth(d.getMonth() + months); | |
return newDate; | |
} | |
function addYears(d, years) { | |
var newDate = cloneDate(d); | |
newDate.setFullYear(d.getFullYear() + years); | |
return newDate; | |
} | |
function cloneDate(d) { | |
return new Date(d.getTime()); | |
} | |
function cloneAsDate(d) { | |
var clonedDate = cloneDate(d); | |
clonedDate.setHours(0, 0, 0, 0); | |
return clonedDate; | |
} | |
function getDaysInMonth(d) { | |
var resultDate = getFirstDayOfMonth(d); | |
resultDate.setMonth(resultDate.getMonth() + 1); | |
resultDate.setDate(resultDate.getDate() - 1); | |
return resultDate.getDate(); | |
} | |
function getFirstDayOfMonth(d) { | |
return new Date(d.getFullYear(), d.getMonth(), 1); | |
} | |
function getFirstDayOfWeek() { | |
var now = new Date(); | |
return new Date(now.setDate(now.getDate() - now.getDay())); | |
} | |
function getWeekArray(d, firstDayOfWeek) { | |
var dayArray = []; | |
var daysInMonth = getDaysInMonth(d); | |
var weekArray = []; | |
var week = []; | |
for (var i = 1; i <= daysInMonth; i++) { | |
dayArray.push(new Date(d.getFullYear(), d.getMonth(), i)); | |
} | |
var addWeek = function addWeek(week) { | |
var emptyDays = 7 - week.length; | |
for (var _i = 0; _i < emptyDays; ++_i) { | |
week[weekArray.length ? 'push' : 'unshift'](null); | |
} | |
weekArray.push(week); | |
}; | |
dayArray.forEach(function (day) { | |
if (week.length > 0 && day.getDay() === firstDayOfWeek) { | |
addWeek(week); | |
week = []; | |
} | |
week.push(day); | |
if (dayArray.indexOf(day) === dayArray.length - 1) { | |
addWeek(week); | |
} | |
}); | |
return weekArray; | |
} | |
function localizedWeekday(DateTimeFormat, locale, day, firstDayOfWeek) { | |
var weekdayFormatter = new DateTimeFormat(locale, { weekday: 'narrow' }); | |
var firstDayDate = getFirstDayOfWeek(); | |
return weekdayFormatter.format(addDays(firstDayDate, day + firstDayOfWeek)); | |
} | |
// Convert date to ISO 8601 (YYYY-MM-DD) date string, accounting for current timezone | |
function formatIso(date) { | |
return new Date(date.toDateString() + ' 12:00:00 +0000').toISOString().substring(0, 10); | |
} | |
function isEqualDate(d1, d2) { | |
return d1 && d2 && d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate(); | |
} | |
function isBeforeDate(d1, d2) { | |
var date1 = cloneAsDate(d1); | |
var date2 = cloneAsDate(d2); | |
return date1.getTime() < date2.getTime(); | |
} | |
function isAfterDate(d1, d2) { | |
var date1 = cloneAsDate(d1); | |
var date2 = cloneAsDate(d2); | |
return date1.getTime() > date2.getTime(); | |
} | |
function isBetweenDates(dateToCheck, startDate, endDate) { | |
return !isBeforeDate(dateToCheck, startDate) && !isAfterDate(dateToCheck, endDate); | |
} | |
function monthDiff(d1, d2) { | |
var m = void 0; | |
m = (d1.getFullYear() - d2.getFullYear()) * 12; | |
m += d1.getMonth(); | |
m -= d2.getMonth(); | |
return m; | |
} | |
function yearDiff(d1, d2) { | |
return ~~(monthDiff(d1, d2) / 12); | |
} | |
/***/ }, | |
/* 18 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactDom = __webpack_require__(4); | |
var _reactDom2 = _interopRequireDefault(_reactDom); | |
var _reactEventListener = __webpack_require__(13); | |
var _reactEventListener2 = _interopRequireDefault(_reactEventListener); | |
var _RenderToLayer = __webpack_require__(81); | |
var _RenderToLayer2 = _interopRequireDefault(_RenderToLayer); | |
var _propTypes = __webpack_require__(9); | |
var _propTypes2 = _interopRequireDefault(_propTypes); | |
var _Paper = __webpack_require__(8); | |
var _Paper2 = _interopRequireDefault(_Paper); | |
var _lodash = __webpack_require__(248); | |
var _lodash2 = _interopRequireDefault(_lodash); | |
var _PopoverAnimationDefault = __webpack_require__(141); | |
var _PopoverAnimationDefault2 = _interopRequireDefault(_PopoverAnimationDefault); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var Popover = function (_Component) { | |
_inherits(Popover, _Component); | |
function Popover(props, context) { | |
_classCallCheck(this, Popover); | |
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Popover).call(this, props, context)); | |
_this.renderLayer = function () { | |
var _this$props = _this.props; | |
var animated = _this$props.animated; | |
var // eslint-disable-line no-unused-vars | |
animation = _this$props.animation; | |
var children = _this$props.children; | |
var style = _this$props.style; | |
var other = _objectWithoutProperties(_this$props, ['animated', 'animation', 'children', 'style']); | |
var Animation = animation || _PopoverAnimationDefault2.default; | |
var styleRoot = style; | |
if (!Animation) { | |
Animation = _Paper2.default; | |
styleRoot = { | |
position: 'fixed' | |
}; | |
if (!_this.state.open) { | |
return null; | |
} | |
} | |
return _react2.default.createElement( | |
Animation, | |
_extends({}, other, { style: styleRoot, open: _this.state.open && !_this.state.closing }), | |
children | |
); | |
}; | |
_this.componentClickAway = function () { | |
_this.requestClose('clickAway'); | |
}; | |
_this.setPlacement = function (scrolling) { | |
if (!_this.state.open) { | |
return; | |
} | |
var anchorEl = _this.props.anchorEl || _this.anchorEl; | |
if (!_this.refs.layer.getLayer()) { | |
return; | |
} | |
var targetEl = _this.refs.layer.getLayer().children[0]; | |
if (!targetEl) { | |
return; | |
} | |
var _this$props2 = _this.props; | |
var targetOrigin = _this$props2.targetOrigin; | |
var anchorOrigin = _this$props2.anchorOrigin; | |
var anchor = _this.getAnchorPosition(anchorEl); | |
var target = _this.getTargetPosition(targetEl); | |
var targetPosition = { | |
top: anchor[anchorOrigin.vertical] - target[targetOrigin.vertical], | |
left: anchor[anchorOrigin.horizontal] - target[targetOrigin.horizontal] | |
}; | |
if (scrolling && _this.props.autoCloseWhenOffScreen) { | |
_this.autoCloseWhenOffScreen(anchor); | |
} | |
if (_this.props.canAutoPosition) { | |
target = _this.getTargetPosition(targetEl); // update as height may have changed | |
targetPosition = _this.applyAutoPositionIfNeeded(anchor, target, targetOrigin, anchorOrigin, targetPosition); | |
} | |
targetEl.style.top = Math.max(0, targetPosition.top) + 'px'; | |
targetEl.style.left = Math.max(0, targetPosition.left) + 'px'; | |
targetEl.style.maxHeight = window.innerHeight + 'px'; | |
}; | |
_this.handleResize = (0, _lodash2.default)(_this.setPlacement, 100); | |
_this.handleScroll = (0, _lodash2.default)(_this.setPlacement.bind(_this, true), 50); | |
_this.state = { | |
open: props.open, | |
closing: false | |
}; | |
return _this; | |
} | |
_createClass(Popover, [{ | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
var _this2 = this; | |
if (nextProps.open !== this.state.open) { | |
if (nextProps.open) { | |
this.anchorEl = nextProps.anchorEl || this.props.anchorEl; | |
this.setState({ | |
open: true, | |
closing: false | |
}); | |
} else { | |
if (nextProps.animated) { | |
this.setState({ closing: true }); | |
this.timeout = setTimeout(function () { | |
_this2.setState({ | |
open: false | |
}); | |
}, 500); | |
} else { | |
this.setState({ | |
open: false | |
}); | |
} | |
} | |
} | |
} | |
}, { | |
key: 'componentDidUpdate', | |
value: function componentDidUpdate() { | |
this.setPlacement(); | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
clearTimeout(this.timeout); | |
} | |
}, { | |
key: 'requestClose', | |
value: function requestClose(reason) { | |
if (this.props.onRequestClose) { | |
this.props.onRequestClose(reason); | |
} | |
} | |
}, { | |
key: '_resizeAutoPosition', | |
value: function _resizeAutoPosition() { | |
this.setPlacement(); | |
} | |
}, { | |
key: 'getAnchorPosition', | |
value: function getAnchorPosition(el) { | |
if (!el) { | |
el = _reactDom2.default.findDOMNode(this); | |
} | |
var rect = el.getBoundingClientRect(); | |
var a = { | |
top: rect.top, | |
left: rect.left, | |
width: el.offsetWidth, | |
height: el.offsetHeight | |
}; | |
a.right = rect.right || a.left + a.width; | |
a.bottom = rect.bottom || a.top + a.height; | |
a.middle = a.left + (a.right - a.left) / 2; | |
a.center = a.top + (a.bottom - a.top) / 2; | |
return a; | |
} | |
}, { | |
key: 'getTargetPosition', | |
value: function getTargetPosition(targetEl) { | |
return { | |
top: 0, | |
center: targetEl.offsetHeight / 2, | |
bottom: targetEl.offsetHeight, | |
left: 0, | |
middle: targetEl.offsetWidth / 2, | |
right: targetEl.offsetWidth | |
}; | |
} | |
}, { | |
key: 'autoCloseWhenOffScreen', | |
value: function autoCloseWhenOffScreen(anchorPosition) { | |
if (anchorPosition.top < 0 || anchorPosition.top > window.innerHeight || anchorPosition.left < 0 || anchorPosition.left > window.innerWidth) { | |
this.requestClose('offScreen'); | |
} | |
} | |
}, { | |
key: 'getOverlapMode', | |
value: function getOverlapMode(anchor, target, median) { | |
if ([anchor, target].indexOf(median) >= 0) return 'auto'; | |
if (anchor === target) return 'inclusive'; | |
return 'exclusive'; | |
} | |
}, { | |
key: 'getPositions', | |
value: function getPositions(anchor, target) { | |
var a = _extends({}, anchor); | |
var t = _extends({}, target); | |
var positions = { | |
x: ['left', 'right'].filter(function (p) { | |
return p !== t.horizontal; | |
}), | |
y: ['top', 'bottom'].filter(function (p) { | |
return p !== t.vertical; | |
}) | |
}; | |
var overlap = { | |
x: this.getOverlapMode(a.horizontal, t.horizontal, 'middle'), | |
y: this.getOverlapMode(a.vertical, t.vertical, 'center') | |
}; | |
positions.x.splice(overlap.x === 'auto' ? 0 : 1, 0, 'middle'); | |
positions.y.splice(overlap.y === 'auto' ? 0 : 1, 0, 'center'); | |
if (overlap.y !== 'auto') { | |
a.vertical = a.vertical === 'top' ? 'bottom' : 'top'; | |
if (overlap.y === 'inclusive') { | |
t.vertical = t.vertical; | |
} | |
} | |
if (overlap.x !== 'auto') { | |
a.horizontal = a.horizontal === 'left' ? 'right' : 'left'; | |
if (overlap.y === 'inclusive') { | |
t.horizontal = t.horizontal; | |
} | |
} | |
return { | |
positions: positions, | |
anchorPos: a | |
}; | |
} | |
}, { | |
key: 'applyAutoPositionIfNeeded', | |
value: function applyAutoPositionIfNeeded(anchor, target, targetOrigin, anchorOrigin, targetPosition) { | |
var _getPositions = this.getPositions(anchorOrigin, targetOrigin); | |
var positions = _getPositions.positions; | |
var anchorPos = _getPositions.anchorPos; | |
if (targetPosition.top < 0 || targetPosition.top + target.bottom > window.innerHeight) { | |
var newTop = anchor[anchorPos.vertical] - target[positions.y[0]]; | |
if (newTop + target.bottom <= window.innerHeight) targetPosition.top = Math.max(0, newTop);else { | |
newTop = anchor[anchorPos.vertical] - target[positions.y[1]]; | |
if (newTop + target.bottom <= window.innerHeight) targetPosition.top = Math.max(0, newTop); | |
} | |
} | |
if (targetPosition.left < 0 || targetPosition.left + target.right > window.innerWidth) { | |
var newLeft = anchor[anchorPos.horizontal] - target[positions.x[0]]; | |
if (newLeft + target.right <= window.innerWidth) targetPosition.left = Math.max(0, newLeft);else { | |
newLeft = anchor[anchorPos.horizontal] - target[positions.x[1]]; | |
if (newLeft + target.right <= window.innerWidth) targetPosition.left = Math.max(0, newLeft); | |
} | |
} | |
return targetPosition; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
return _react2.default.createElement( | |
'div', | |
{ style: { display: 'none' } }, | |
_react2.default.createElement(_reactEventListener2.default, { | |
target: 'window', | |
onScroll: this.handleScroll, | |
onResize: this.handleResize | |
}), | |
_react2.default.createElement(_RenderToLayer2.default, { | |
ref: 'layer', | |
open: this.state.open, | |
componentClickAway: this.componentClickAway, | |
useLayerForClickAway: this.props.useLayerForClickAway, | |
render: this.renderLayer | |
}) | |
); | |
} | |
}]); | |
return Popover; | |
}(_react.Component); | |
Popover.propTypes = { | |
/** | |
* This is the DOM element that will be used to set the position of the | |
* popover. | |
*/ | |
anchorEl: _react.PropTypes.object, | |
/** | |
* This is the point on the anchor where the popover's | |
* `targetOrigin` will attach to. | |
* Options: | |
* vertical: [top, middle, bottom]; | |
* horizontal: [left, center, right]. | |
*/ | |
anchorOrigin: _propTypes2.default.origin, | |
/** | |
* If true, the popover will apply transitions when | |
* it is added to the DOM. | |
*/ | |
animated: _react.PropTypes.bool, | |
/** | |
* Override the default animation component used. | |
*/ | |
animation: _react.PropTypes.func, | |
/** | |
* If true, the popover will hide when the anchor is scrolled off the screen. | |
*/ | |
autoCloseWhenOffScreen: _react.PropTypes.bool, | |
/** | |
* If true, the popover (potentially) ignores `targetOrigin` | |
* and `anchorOrigin` to make itself fit on screen, | |
* which is useful for mobile devices. | |
*/ | |
canAutoPosition: _react.PropTypes.bool, | |
/** | |
* The content of the popover. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The CSS class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* Callback function fired when the popover is requested to be closed. | |
* | |
* @param {string} reason The reason for the close request. Possibles values | |
* are 'clickAway' and 'offScreen'. | |
*/ | |
onRequestClose: _react.PropTypes.func, | |
/** | |
* If true, the popover is visible. | |
*/ | |
open: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* This is the point on the popover which will attach to | |
* the anchor's origin. | |
* Options: | |
* vertical: [top, middle, bottom]; | |
* horizontal: [left, center, right]. | |
*/ | |
targetOrigin: _propTypes2.default.origin, | |
/** | |
* If true, the popover will render on top of an invisible | |
* layer, which will prevent clicks to the underlying | |
* elements, and trigger an `onRequestClose('clickAway')` call. | |
*/ | |
useLayerForClickAway: _react.PropTypes.bool, | |
/** | |
* The zDepth of the popover. | |
*/ | |
zDepth: _propTypes2.default.zDepth | |
}; | |
Popover.defaultProps = { | |
anchorOrigin: { | |
vertical: 'bottom', | |
horizontal: 'left' | |
}, | |
animated: true, | |
autoCloseWhenOffScreen: true, | |
canAutoPosition: true, | |
onRequestClose: function onRequestClose() {}, | |
open: false, | |
style: { | |
overflowY: 'auto' | |
}, | |
targetOrigin: { | |
vertical: 'top', | |
horizontal: 'left' | |
}, | |
useLayerForClickAway: true, | |
zDepth: 1 | |
}; | |
Popover.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = Popover; | |
/***/ }, | |
/* 19 */ | |
/***/ function(module, exports, __webpack_require__) { | |
/** | |
* Copyright (c) 2013-present, Facebook, Inc. | |
* All rights reserved. | |
* | |
* This source code is licensed under the BSD-style license found in the | |
* LICENSE file in the root directory of this source tree. An additional grant | |
* of patent rights can be found in the PATENTS file in the same directory. | |
* | |
*/ | |
'use strict'; | |
/** | |
* Use invariant() to assert state which your program assumes to be true. | |
* | |
* Provide sprintf-style format (only %s is supported) and arguments | |
* to provide information about what broke and what you were | |
* expecting. | |
* | |
* The invariant message will be stripped in production, but the invariant | |
* will remain to ensure logic does not differ in production. | |
*/ | |
function invariant(condition, format, a, b, c, d, e, f) { | |
if (true) { | |
if (format === undefined) { | |
throw new Error('invariant requires an error message argument'); | |
} | |
} | |
if (!condition) { | |
var error; | |
if (format === undefined) { | |
error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.'); | |
} else { | |
var args = [a, b, c, d, e, f]; | |
var argIndex = 0; | |
error = new Error(format.replace(/%s/g, function () { | |
return args[argIndex++]; | |
})); | |
error.name = 'Invariant Violation'; | |
} | |
error.framesToPop = 1; // we don't care about invariant's own frame | |
throw error; | |
} | |
} | |
module.exports = invariant; | |
/***/ }, | |
/* 20 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _IconButton = __webpack_require__(133); | |
var _IconButton2 = _interopRequireDefault(_IconButton); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _IconButton2.default; | |
/***/ }, | |
/* 21 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _TextField = __webpack_require__(169); | |
var _TextField2 = _interopRequireDefault(_TextField); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _TextField2.default; | |
/***/ }, | |
/* 22 */ | |
/***/ function(module, exports) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.addHours = addHours; | |
exports.addMinutes = addMinutes; | |
exports.addSeconds = addSeconds; | |
exports.formatTime = formatTime; | |
exports.rad2deg = rad2deg; | |
exports.getTouchEventOffsetValues = getTouchEventOffsetValues; | |
exports.isInner = isInner; | |
function addHours(d, hours) { | |
var newDate = clone(d); | |
newDate.setHours(d.getHours() + hours); | |
return newDate; | |
} | |
function addMinutes(d, minutes) { | |
var newDate = clone(d); | |
newDate.setMinutes(d.getMinutes() + minutes); | |
return newDate; | |
} | |
function addSeconds(d, seconds) { | |
var newDate = clone(d); | |
newDate.setSeconds(d.getMinutes() + seconds); | |
return newDate; | |
} | |
function clone(d) { | |
return new Date(d.getTime()); | |
} | |
/** | |
* @param date [Date] A Date object. | |
* @param format [String] One of 'ampm', '24hr', defaults to 'ampm'. | |
* @param pedantic [Boolean] Check time-picker/time-picker.jsx file. | |
* | |
* @return String A string representing the formatted time. | |
*/ | |
function formatTime(date) { | |
var format = arguments.length <= 1 || arguments[1] === undefined ? 'ampm' : arguments[1]; | |
var pedantic = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2]; | |
if (!date) return ''; | |
var hours = date.getHours(); | |
var mins = date.getMinutes().toString(); | |
if (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 (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; | |
} | |
function rad2deg(rad) { | |
return rad * 57.29577951308232; | |
} | |
function getTouchEventOffsetValues(event) { | |
var el = event.target; | |
var boundingRect = el.getBoundingClientRect(); | |
return { | |
offsetX: event.clientX - boundingRect.left, | |
offsetY: event.clientY - boundingRect.top | |
}; | |
} | |
function isInner(props) { | |
if (props.type !== 'hour') { | |
return false; | |
} | |
return props.value < 1 || props.value > 12; | |
} | |
/***/ }, | |
/* 23 */ | |
/***/ function(module, exports) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var red50 = exports.red50 = '#ffebee'; | |
var red100 = exports.red100 = '#ffcdd2'; | |
var red200 = exports.red200 = '#ef9a9a'; | |
var red300 = exports.red300 = '#e57373'; | |
var red400 = exports.red400 = '#ef5350'; | |
var red500 = exports.red500 = '#f44336'; | |
var red600 = exports.red600 = '#e53935'; | |
var red700 = exports.red700 = '#d32f2f'; | |
var red800 = exports.red800 = '#c62828'; | |
var red900 = exports.red900 = '#b71c1c'; | |
var redA100 = exports.redA100 = '#ff8a80'; | |
var redA200 = exports.redA200 = '#ff5252'; | |
var redA400 = exports.redA400 = '#ff1744'; | |
var redA700 = exports.redA700 = '#d50000'; | |
var pink50 = exports.pink50 = '#fce4ec'; | |
var pink100 = exports.pink100 = '#f8bbd0'; | |
var pink200 = exports.pink200 = '#f48fb1'; | |
var pink300 = exports.pink300 = '#f06292'; | |
var pink400 = exports.pink400 = '#ec407a'; | |
var pink500 = exports.pink500 = '#e91e63'; | |
var pink600 = exports.pink600 = '#d81b60'; | |
var pink700 = exports.pink700 = '#c2185b'; | |
var pink800 = exports.pink800 = '#ad1457'; | |
var pink900 = exports.pink900 = '#880e4f'; | |
var pinkA100 = exports.pinkA100 = '#ff80ab'; | |
var pinkA200 = exports.pinkA200 = '#ff4081'; | |
var pinkA400 = exports.pinkA400 = '#f50057'; | |
var pinkA700 = exports.pinkA700 = '#c51162'; | |
var purple50 = exports.purple50 = '#f3e5f5'; | |
var purple100 = exports.purple100 = '#e1bee7'; | |
var purple200 = exports.purple200 = '#ce93d8'; | |
var purple300 = exports.purple300 = '#ba68c8'; | |
var purple400 = exports.purple400 = '#ab47bc'; | |
var purple500 = exports.purple500 = '#9c27b0'; | |
var purple600 = exports.purple600 = '#8e24aa'; | |
var purple700 = exports.purple700 = '#7b1fa2'; | |
var purple800 = exports.purple800 = '#6a1b9a'; | |
var purple900 = exports.purple900 = '#4a148c'; | |
var purpleA100 = exports.purpleA100 = '#ea80fc'; | |
var purpleA200 = exports.purpleA200 = '#e040fb'; | |
var purpleA400 = exports.purpleA400 = '#d500f9'; | |
var purpleA700 = exports.purpleA700 = '#aa00ff'; | |
var deepPurple50 = exports.deepPurple50 = '#ede7f6'; | |
var deepPurple100 = exports.deepPurple100 = '#d1c4e9'; | |
var deepPurple200 = exports.deepPurple200 = '#b39ddb'; | |
var deepPurple300 = exports.deepPurple300 = '#9575cd'; | |
var deepPurple400 = exports.deepPurple400 = '#7e57c2'; | |
var deepPurple500 = exports.deepPurple500 = '#673ab7'; | |
var deepPurple600 = exports.deepPurple600 = '#5e35b1'; | |
var deepPurple700 = exports.deepPurple700 = '#512da8'; | |
var deepPurple800 = exports.deepPurple800 = '#4527a0'; | |
var deepPurple900 = exports.deepPurple900 = '#311b92'; | |
var deepPurpleA100 = exports.deepPurpleA100 = '#b388ff'; | |
var deepPurpleA200 = exports.deepPurpleA200 = '#7c4dff'; | |
var deepPurpleA400 = exports.deepPurpleA400 = '#651fff'; | |
var deepPurpleA700 = exports.deepPurpleA700 = '#6200ea'; | |
var indigo50 = exports.indigo50 = '#e8eaf6'; | |
var indigo100 = exports.indigo100 = '#c5cae9'; | |
var indigo200 = exports.indigo200 = '#9fa8da'; | |
var indigo300 = exports.indigo300 = '#7986cb'; | |
var indigo400 = exports.indigo400 = '#5c6bc0'; | |
var indigo500 = exports.indigo500 = '#3f51b5'; | |
var indigo600 = exports.indigo600 = '#3949ab'; | |
var indigo700 = exports.indigo700 = '#303f9f'; | |
var indigo800 = exports.indigo800 = '#283593'; | |
var indigo900 = exports.indigo900 = '#1a237e'; | |
var indigoA100 = exports.indigoA100 = '#8c9eff'; | |
var indigoA200 = exports.indigoA200 = '#536dfe'; | |
var indigoA400 = exports.indigoA400 = '#3d5afe'; | |
var indigoA700 = exports.indigoA700 = '#304ffe'; | |
var blue50 = exports.blue50 = '#e3f2fd'; | |
var blue100 = exports.blue100 = '#bbdefb'; | |
var blue200 = exports.blue200 = '#90caf9'; | |
var blue300 = exports.blue300 = '#64b5f6'; | |
var blue400 = exports.blue400 = '#42a5f5'; | |
var blue500 = exports.blue500 = '#2196f3'; | |
var blue600 = exports.blue600 = '#1e88e5'; | |
var blue700 = exports.blue700 = '#1976d2'; | |
var blue800 = exports.blue800 = '#1565c0'; | |
var blue900 = exports.blue900 = '#0d47a1'; | |
var blueA100 = exports.blueA100 = '#82b1ff'; | |
var blueA200 = exports.blueA200 = '#448aff'; | |
var blueA400 = exports.blueA400 = '#2979ff'; | |
var blueA700 = exports.blueA700 = '#2962ff'; | |
var lightBlue50 = exports.lightBlue50 = '#e1f5fe'; | |
var lightBlue100 = exports.lightBlue100 = '#b3e5fc'; | |
var lightBlue200 = exports.lightBlue200 = '#81d4fa'; | |
var lightBlue300 = exports.lightBlue300 = '#4fc3f7'; | |
var lightBlue400 = exports.lightBlue400 = '#29b6f6'; | |
var lightBlue500 = exports.lightBlue500 = '#03a9f4'; | |
var lightBlue600 = exports.lightBlue600 = '#039be5'; | |
var lightBlue700 = exports.lightBlue700 = '#0288d1'; | |
var lightBlue800 = exports.lightBlue800 = '#0277bd'; | |
var lightBlue900 = exports.lightBlue900 = '#01579b'; | |
var lightBlueA100 = exports.lightBlueA100 = '#80d8ff'; | |
var lightBlueA200 = exports.lightBlueA200 = '#40c4ff'; | |
var lightBlueA400 = exports.lightBlueA400 = '#00b0ff'; | |
var lightBlueA700 = exports.lightBlueA700 = '#0091ea'; | |
var cyan50 = exports.cyan50 = '#e0f7fa'; | |
var cyan100 = exports.cyan100 = '#b2ebf2'; | |
var cyan200 = exports.cyan200 = '#80deea'; | |
var cyan300 = exports.cyan300 = '#4dd0e1'; | |
var cyan400 = exports.cyan400 = '#26c6da'; | |
var cyan500 = exports.cyan500 = '#00bcd4'; | |
var cyan600 = exports.cyan600 = '#00acc1'; | |
var cyan700 = exports.cyan700 = '#0097a7'; | |
var cyan800 = exports.cyan800 = '#00838f'; | |
var cyan900 = exports.cyan900 = '#006064'; | |
var cyanA100 = exports.cyanA100 = '#84ffff'; | |
var cyanA200 = exports.cyanA200 = '#18ffff'; | |
var cyanA400 = exports.cyanA400 = '#00e5ff'; | |
var cyanA700 = exports.cyanA700 = '#00b8d4'; | |
var teal50 = exports.teal50 = '#e0f2f1'; | |
var teal100 = exports.teal100 = '#b2dfdb'; | |
var teal200 = exports.teal200 = '#80cbc4'; | |
var teal300 = exports.teal300 = '#4db6ac'; | |
var teal400 = exports.teal400 = '#26a69a'; | |
var teal500 = exports.teal500 = '#009688'; | |
var teal600 = exports.teal600 = '#00897b'; | |
var teal700 = exports.teal700 = '#00796b'; | |
var teal800 = exports.teal800 = '#00695c'; | |
var teal900 = exports.teal900 = '#004d40'; | |
var tealA100 = exports.tealA100 = '#a7ffeb'; | |
var tealA200 = exports.tealA200 = '#64ffda'; | |
var tealA400 = exports.tealA400 = '#1de9b6'; | |
var tealA700 = exports.tealA700 = '#00bfa5'; | |
var green50 = exports.green50 = '#e8f5e9'; | |
var green100 = exports.green100 = '#c8e6c9'; | |
var green200 = exports.green200 = '#a5d6a7'; | |
var green300 = exports.green300 = '#81c784'; | |
var green400 = exports.green400 = '#66bb6a'; | |
var green500 = exports.green500 = '#4caf50'; | |
var green600 = exports.green600 = '#43a047'; | |
var green700 = exports.green700 = '#388e3c'; | |
var green800 = exports.green800 = '#2e7d32'; | |
var green900 = exports.green900 = '#1b5e20'; | |
var greenA100 = exports.greenA100 = '#b9f6ca'; | |
var greenA200 = exports.greenA200 = '#69f0ae'; | |
var greenA400 = exports.greenA400 = '#00e676'; | |
var greenA700 = exports.greenA700 = '#00c853'; | |
var lightGreen50 = exports.lightGreen50 = '#f1f8e9'; | |
var lightGreen100 = exports.lightGreen100 = '#dcedc8'; | |
var lightGreen200 = exports.lightGreen200 = '#c5e1a5'; | |
var lightGreen300 = exports.lightGreen300 = '#aed581'; | |
var lightGreen400 = exports.lightGreen400 = '#9ccc65'; | |
var lightGreen500 = exports.lightGreen500 = '#8bc34a'; | |
var lightGreen600 = exports.lightGreen600 = '#7cb342'; | |
var lightGreen700 = exports.lightGreen700 = '#689f38'; | |
var lightGreen800 = exports.lightGreen800 = '#558b2f'; | |
var lightGreen900 = exports.lightGreen900 = '#33691e'; | |
var lightGreenA100 = exports.lightGreenA100 = '#ccff90'; | |
var lightGreenA200 = exports.lightGreenA200 = '#b2ff59'; | |
var lightGreenA400 = exports.lightGreenA400 = '#76ff03'; | |
var lightGreenA700 = exports.lightGreenA700 = '#64dd17'; | |
var lime50 = exports.lime50 = '#f9fbe7'; | |
var lime100 = exports.lime100 = '#f0f4c3'; | |
var lime200 = exports.lime200 = '#e6ee9c'; | |
var lime300 = exports.lime300 = '#dce775'; | |
var lime400 = exports.lime400 = '#d4e157'; | |
var lime500 = exports.lime500 = '#cddc39'; | |
var lime600 = exports.lime600 = '#c0ca33'; | |
var lime700 = exports.lime700 = '#afb42b'; | |
var lime800 = exports.lime800 = '#9e9d24'; | |
var lime900 = exports.lime900 = '#827717'; | |
var limeA100 = exports.limeA100 = '#f4ff81'; | |
var limeA200 = exports.limeA200 = '#eeff41'; | |
var limeA400 = exports.limeA400 = '#c6ff00'; | |
var limeA700 = exports.limeA700 = '#aeea00'; | |
var yellow50 = exports.yellow50 = '#fffde7'; | |
var yellow100 = exports.yellow100 = '#fff9c4'; | |
var yellow200 = exports.yellow200 = '#fff59d'; | |
var yellow300 = exports.yellow300 = '#fff176'; | |
var yellow400 = exports.yellow400 = '#ffee58'; | |
var yellow500 = exports.yellow500 = '#ffeb3b'; | |
var yellow600 = exports.yellow600 = '#fdd835'; | |
var yellow700 = exports.yellow700 = '#fbc02d'; | |
var yellow800 = exports.yellow800 = '#f9a825'; | |
var yellow900 = exports.yellow900 = '#f57f17'; | |
var yellowA100 = exports.yellowA100 = '#ffff8d'; | |
var yellowA200 = exports.yellowA200 = '#ffff00'; | |
var yellowA400 = exports.yellowA400 = '#ffea00'; | |
var yellowA700 = exports.yellowA700 = '#ffd600'; | |
var amber50 = exports.amber50 = '#fff8e1'; | |
var amber100 = exports.amber100 = '#ffecb3'; | |
var amber200 = exports.amber200 = '#ffe082'; | |
var amber300 = exports.amber300 = '#ffd54f'; | |
var amber400 = exports.amber400 = '#ffca28'; | |
var amber500 = exports.amber500 = '#ffc107'; | |
var amber600 = exports.amber600 = '#ffb300'; | |
var amber700 = exports.amber700 = '#ffa000'; | |
var amber800 = exports.amber800 = '#ff8f00'; | |
var amber900 = exports.amber900 = '#ff6f00'; | |
var amberA100 = exports.amberA100 = '#ffe57f'; | |
var amberA200 = exports.amberA200 = '#ffd740'; | |
var amberA400 = exports.amberA400 = '#ffc400'; | |
var amberA700 = exports.amberA700 = '#ffab00'; | |
var orange50 = exports.orange50 = '#fff3e0'; | |
var orange100 = exports.orange100 = '#ffe0b2'; | |
var orange200 = exports.orange200 = '#ffcc80'; | |
var orange300 = exports.orange300 = '#ffb74d'; | |
var orange400 = exports.orange400 = '#ffa726'; | |
var orange500 = exports.orange500 = '#ff9800'; | |
var orange600 = exports.orange600 = '#fb8c00'; | |
var orange700 = exports.orange700 = '#f57c00'; | |
var orange800 = exports.orange800 = '#ef6c00'; | |
var orange900 = exports.orange900 = '#e65100'; | |
var orangeA100 = exports.orangeA100 = '#ffd180'; | |
var orangeA200 = exports.orangeA200 = '#ffab40'; | |
var orangeA400 = exports.orangeA400 = '#ff9100'; | |
var orangeA700 = exports.orangeA700 = '#ff6d00'; | |
var deepOrange50 = exports.deepOrange50 = '#fbe9e7'; | |
var deepOrange100 = exports.deepOrange100 = '#ffccbc'; | |
var deepOrange200 = exports.deepOrange200 = '#ffab91'; | |
var deepOrange300 = exports.deepOrange300 = '#ff8a65'; | |
var deepOrange400 = exports.deepOrange400 = '#ff7043'; | |
var deepOrange500 = exports.deepOrange500 = '#ff5722'; | |
var deepOrange600 = exports.deepOrange600 = '#f4511e'; | |
var deepOrange700 = exports.deepOrange700 = '#e64a19'; | |
var deepOrange800 = exports.deepOrange800 = '#d84315'; | |
var deepOrange900 = exports.deepOrange900 = '#bf360c'; | |
var deepOrangeA100 = exports.deepOrangeA100 = '#ff9e80'; | |
var deepOrangeA200 = exports.deepOrangeA200 = '#ff6e40'; | |
var deepOrangeA400 = exports.deepOrangeA400 = '#ff3d00'; | |
var deepOrangeA700 = exports.deepOrangeA700 = '#dd2c00'; | |
var brown50 = exports.brown50 = '#efebe9'; | |
var brown100 = exports.brown100 = '#d7ccc8'; | |
var brown200 = exports.brown200 = '#bcaaa4'; | |
var brown300 = exports.brown300 = '#a1887f'; | |
var brown400 = exports.brown400 = '#8d6e63'; | |
var brown500 = exports.brown500 = '#795548'; | |
var brown600 = exports.brown600 = '#6d4c41'; | |
var brown700 = exports.brown700 = '#5d4037'; | |
var brown800 = exports.brown800 = '#4e342e'; | |
var brown900 = exports.brown900 = '#3e2723'; | |
var blueGrey50 = exports.blueGrey50 = '#eceff1'; | |
var blueGrey100 = exports.blueGrey100 = '#cfd8dc'; | |
var blueGrey200 = exports.blueGrey200 = '#b0bec5'; | |
var blueGrey300 = exports.blueGrey300 = '#90a4ae'; | |
var blueGrey400 = exports.blueGrey400 = '#78909c'; | |
var blueGrey500 = exports.blueGrey500 = '#607d8b'; | |
var blueGrey600 = exports.blueGrey600 = '#546e7a'; | |
var blueGrey700 = exports.blueGrey700 = '#455a64'; | |
var blueGrey800 = exports.blueGrey800 = '#37474f'; | |
var blueGrey900 = exports.blueGrey900 = '#263238'; | |
var grey50 = exports.grey50 = '#fafafa'; | |
var grey100 = exports.grey100 = '#f5f5f5'; | |
var grey200 = exports.grey200 = '#eeeeee'; | |
var grey300 = exports.grey300 = '#e0e0e0'; | |
var grey400 = exports.grey400 = '#bdbdbd'; | |
var grey500 = exports.grey500 = '#9e9e9e'; | |
var grey600 = exports.grey600 = '#757575'; | |
var grey700 = exports.grey700 = '#616161'; | |
var grey800 = exports.grey800 = '#424242'; | |
var grey900 = exports.grey900 = '#212121'; | |
var black = exports.black = '#000000'; | |
var white = exports.white = '#ffffff'; | |
var transparent = exports.transparent = 'rgba(0, 0, 0, 0)'; | |
var fullBlack = exports.fullBlack = 'rgba(0, 0, 0, 1)'; | |
var darkBlack = exports.darkBlack = 'rgba(0, 0, 0, 0.87)'; | |
var lightBlack = exports.lightBlack = 'rgba(0, 0, 0, 0.54)'; | |
var minBlack = exports.minBlack = 'rgba(0, 0, 0, 0.26)'; | |
var faintBlack = exports.faintBlack = 'rgba(0, 0, 0, 0.12)'; | |
var fullWhite = exports.fullWhite = 'rgba(255, 255, 255, 1)'; | |
var darkWhite = exports.darkWhite = 'rgba(255, 255, 255, 0.87)'; | |
var lightWhite = exports.lightWhite = 'rgba(255, 255, 255, 0.54)'; | |
/***/ }, | |
/* 24 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.createChildFragment = createChildFragment; | |
exports.extendChildren = extendChildren; | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactAddonsCreateFragment = __webpack_require__(272); | |
var _reactAddonsCreateFragment2 = _interopRequireDefault(_reactAddonsCreateFragment); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function createChildFragment(fragments) { | |
var newFragments = {}; | |
var validChildrenCount = 0; | |
var firstKey = void 0; | |
// 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 (0, _reactAddonsCreateFragment2.default)(newFragments); | |
} | |
function extendChildren(children, extendedProps, extendedChildren) { | |
return _react2.default.isValidElement(children) ? _react2.default.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 _react2.default.cloneElement(child, newProps, newChildren); | |
}) : children; | |
} | |
/***/ }, | |
/* 25 */ | |
/***/ function(module, exports) { | |
/** | |
* Copyright (c) 2013-present, Facebook, Inc. | |
* All rights reserved. | |
* | |
* This source code is licensed under the BSD-style license found in the | |
* LICENSE file in the root directory of this source tree. An additional grant | |
* of patent rights can be found in the PATENTS file in the same directory. | |
* | |
* @providesModule reactProdInvariant | |
*/ | |
'use strict'; | |
/** | |
* WARNING: DO NOT manually require this module. | |
* This is a replacement for `invariant(...)` used by the error code system | |
* and will _only_ be required by the corresponding babel pass. | |
* It always throws. | |
*/ | |
function reactProdInvariant(code) { | |
var argCount = arguments.length - 1; | |
var message = 'Minified React error #' + code + '; visit ' + 'http://facebook.github.io/react/docs/error-decoder.html?invariant=' + code; | |
for (var argIdx = 0; argIdx < argCount; argIdx++) { | |
message += '&args[]=' + encodeURIComponent(arguments[argIdx + 1]); | |
} | |
message += ' for the full message or use the non-minified dev environment' + ' for full errors and additional helpful warnings.'; | |
var error = new Error(message); | |
error.name = 'Invariant Violation'; | |
error.framesToPop = 1; // we don't care about reactProdInvariant's own frame | |
throw error; | |
} | |
module.exports = reactProdInvariant; | |
/***/ }, | |
/* 26 */ | |
/***/ function(module, exports) { | |
module.exports = __WEBPACK_EXTERNAL_MODULE_26__; | |
/***/ }, | |
/* 27 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _FlatButton = __webpack_require__(126); | |
var _FlatButton2 = _interopRequireDefault(_FlatButton); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _FlatButton2.default; | |
/***/ }, | |
/* 28 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactDom = __webpack_require__(4); | |
var _reactDom2 = _interopRequireDefault(_reactDom); | |
var _shallowEqual = __webpack_require__(16); | |
var _shallowEqual2 = _interopRequireDefault(_shallowEqual); | |
var _ClickAwayListener = __webpack_require__(41); | |
var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener); | |
var _autoPrefix = __webpack_require__(14); | |
var _autoPrefix2 = _interopRequireDefault(_autoPrefix); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _keycode = __webpack_require__(10); | |
var _keycode2 = _interopRequireDefault(_keycode); | |
var _propTypes = __webpack_require__(9); | |
var _propTypes2 = _interopRequireDefault(_propTypes); | |
var _List = __webpack_require__(35); | |
var _List2 = _interopRequireDefault(_List); | |
var _deprecatedPropType = __webpack_require__(15); | |
var _deprecatedPropType2 = _interopRequireDefault(_deprecatedPropType); | |
var _warning = __webpack_require__(6); | |
var _warning2 = _interopRequireDefault(_warning); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var animated = props.animated; | |
var desktop = props.desktop; | |
var maxHeight = props.maxHeight; | |
var _props$openDirection = props.openDirection; | |
var openDirection = _props$openDirection === undefined ? 'bottom-left' : _props$openDirection; | |
var width = props.width; | |
var openDown = openDirection.split('-')[0] === 'bottom'; | |
var openLeft = openDirection.split('-')[1] === 'left'; | |
var muiTheme = context.muiTheme; | |
var styles = { | |
root: { | |
// Nested div bacause the List scales x faster than it scales y | |
transition: animated ? _transitions2.default.easeOut('250ms', 'transform') : null, | |
zIndex: muiTheme.zIndex.menu, | |
top: openDown ? 0 : null, | |
bottom: !openDown ? 0 : null, | |
left: !openLeft ? 0 : null, | |
right: openLeft ? 0 : null, | |
transform: animated ? 'scaleX(0)' : null, | |
transformOrigin: openLeft ? 'right' : 'left', | |
opacity: 0, | |
maxHeight: maxHeight, | |
overflowY: maxHeight ? 'auto' : null | |
}, | |
divider: { | |
marginTop: 7, | |
marginBottom: 8 | |
}, | |
list: { | |
display: 'table-cell', | |
paddingBottom: desktop ? 16 : 8, | |
paddingTop: desktop ? 16 : 8, | |
userSelect: 'none', | |
width: width | |
}, | |
menuItemContainer: { | |
transition: animated ? _transitions2.default.easeOut(null, 'opacity') : null, | |
opacity: 0 | |
}, | |
selectedMenuItem: { | |
color: muiTheme.baseTheme.palette.accent1Color | |
} | |
}; | |
return styles; | |
} | |
var Menu = function (_Component) { | |
_inherits(Menu, _Component); | |
function Menu(props, context) { | |
_classCallCheck(this, Menu); | |
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Menu).call(this, props, context)); | |
_initialiseProps.call(_this); | |
var filteredChildren = _this.getFilteredChildren(props.children); | |
var selectedIndex = _this.getSelectedIndex(props, filteredChildren); | |
_this.state = { | |
focusIndex: props.disableAutoFocus ? -1 : selectedIndex >= 0 ? selectedIndex : 0, | |
isKeyboardFocused: props.initiallyKeyboardFocused, | |
keyWidth: props.desktop ? 64 : 56 | |
}; | |
return _this; | |
} | |
_createClass(Menu, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
if (this.props.autoWidth) this.setWidth(); | |
if (!this.props.animated) this.animateOpen(); | |
this.setScollPosition(); | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
var filteredChildren = this.getFilteredChildren(nextProps.children); | |
var selectedIndex = this.getSelectedIndex(nextProps, filteredChildren); | |
this.setState({ | |
focusIndex: nextProps.disableAutoFocus ? -1 : selectedIndex >= 0 ? selectedIndex : 0, | |
keyWidth: nextProps.desktop ? 64 : 56 | |
}); | |
} | |
}, { | |
key: 'shouldComponentUpdate', | |
value: function shouldComponentUpdate(nextProps, nextState) { | |
return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.state, nextState); | |
} | |
}, { | |
key: 'componentDidUpdate', | |
value: function componentDidUpdate() { | |
if (this.props.autoWidth) this.setWidth(); | |
} | |
}, { | |
key: 'getValueLink', | |
// Do not use outside of this component, it will be removed once valueLink is deprecated | |
value: function getValueLink(props) { | |
return props.valueLink || { | |
value: props.value, | |
requestChange: props.onChange | |
}; | |
} | |
}, { | |
key: 'setKeyboardFocused', | |
value: function setKeyboardFocused(keyboardFocused) { | |
this.setState({ | |
isKeyboardFocused: keyboardFocused | |
}); | |
} | |
}, { | |
key: 'getFilteredChildren', | |
value: function getFilteredChildren(children) { | |
var filteredChildren = []; | |
_react2.default.Children.forEach(children, function (child) { | |
if (child) { | |
filteredChildren.push(child); | |
} | |
}); | |
return filteredChildren; | |
} | |
}, { | |
key: 'animateOpen', | |
value: function animateOpen() { | |
var rootStyle = _reactDom2.default.findDOMNode(this).style; | |
var scrollContainerStyle = _reactDom2.default.findDOMNode(this.refs.scrollContainer).style; | |
var menuContainers = _reactDom2.default.findDOMNode(this.refs.list).childNodes; | |
_autoPrefix2.default.set(rootStyle, 'transform', 'scaleX(1)'); | |
_autoPrefix2.default.set(scrollContainerStyle, 'transform', 'scaleY(1)'); | |
scrollContainerStyle.opacity = 1; | |
for (var i = 0; i < menuContainers.length; ++i) { | |
menuContainers[i].style.opacity = 1; | |
} | |
} | |
}, { | |
key: 'cloneMenuItem', | |
value: function cloneMenuItem(child, childIndex, styles, index) { | |
var _this2 = this; | |
var _props = this.props; | |
var desktop = _props.desktop; | |
var selectedMenuItemStyle = _props.selectedMenuItemStyle; | |
var selected = this.isChildSelected(child, this.props); | |
var selectedChildrenStyles = {}; | |
if (selected) { | |
selectedChildrenStyles = (0, _simpleAssign2.default)(styles.selectedMenuItem, selectedMenuItemStyle); | |
} | |
var mergedChildrenStyles = (0, _simpleAssign2.default)({}, child.props.style, selectedChildrenStyles); | |
var isFocused = childIndex === this.state.focusIndex; | |
var focusState = 'none'; | |
if (isFocused) { | |
focusState = this.state.isKeyboardFocused ? 'keyboard-focused' : 'focused'; | |
} | |
return _react2.default.cloneElement(child, { | |
desktop: desktop, | |
focusState: focusState, | |
onTouchTap: function onTouchTap(event) { | |
_this2.handleMenuItemTouchTap(event, child, index); | |
if (child.props.onTouchTap) child.props.onTouchTap(event); | |
}, | |
ref: isFocused ? 'focusedMenuItem' : null, | |
style: mergedChildrenStyles | |
}); | |
} | |
}, { | |
key: 'decrementKeyboardFocusIndex', | |
value: function decrementKeyboardFocusIndex() { | |
var index = this.state.focusIndex; | |
index--; | |
if (index < 0) index = 0; | |
this.setFocusIndex(index, true); | |
} | |
}, { | |
key: 'getCascadeChildrenCount', | |
value: function getCascadeChildrenCount(filteredChildren) { | |
var _props2 = this.props; | |
var desktop = _props2.desktop; | |
var maxHeight = _props2.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 filteredChildren.length; | |
// Count all the children that will fit inside the max menu height | |
filteredChildren.forEach(function (child) { | |
if (currentHeight < maxHeight) { | |
var childIsADivider = child.type && child.type.muiName === 'Divider'; | |
currentHeight += childIsADivider ? 16 : menuItemHeight; | |
count++; | |
} | |
}); | |
return count; | |
} | |
}, { | |
key: 'getMenuItemCount', | |
value: function getMenuItemCount(filteredChildren) { | |
var menuItemCount = 0; | |
filteredChildren.forEach(function (child) { | |
var childIsADivider = child.type && child.type.muiName === 'Divider'; | |
var childIsDisabled = child.props.disabled; | |
if (!childIsADivider && !childIsDisabled) menuItemCount++; | |
}); | |
return menuItemCount; | |
} | |
}, { | |
key: 'getSelectedIndex', | |
value: function getSelectedIndex(props, filteredChildren) { | |
var _this3 = this; | |
var selectedIndex = -1; | |
var menuItemIndex = 0; | |
filteredChildren.forEach(function (child) { | |
var childIsADivider = child.type && child.type.muiName === 'Divider'; | |
if (_this3.isChildSelected(child, props)) selectedIndex = menuItemIndex; | |
if (!childIsADivider) menuItemIndex++; | |
}); | |
return selectedIndex; | |
} | |
}, { | |
key: 'handleMenuItemTouchTap', | |
value: function handleMenuItemTouchTap(event, item, index) { | |
var children = this.props.children; | |
var multiple = this.props.multiple; | |
var valueLink = this.getValueLink(this.props); | |
var menuValue = valueLink.value; | |
var itemValue = item.props.value; | |
var focusIndex = _react2.default.isValidElement(children) ? 0 : children.indexOf(item); | |
this.setFocusIndex(focusIndex, false); | |
if (multiple) { | |
var itemIndex = menuValue.indexOf(itemValue); | |
var _menuValue = _toArray(menuValue); | |
var newMenuValue = _menuValue; | |
if (itemIndex === -1) { | |
newMenuValue.push(itemValue); | |
} else { | |
newMenuValue.splice(itemIndex, 1); | |
} | |
valueLink.requestChange(event, newMenuValue); | |
} else if (!multiple && itemValue !== menuValue) { | |
valueLink.requestChange(event, itemValue); | |
} | |
this.props.onItemTouchTap(event, item, index); | |
} | |
}, { | |
key: 'incrementKeyboardFocusIndex', | |
value: function incrementKeyboardFocusIndex(filteredChildren) { | |
var index = this.state.focusIndex; | |
var maxIndex = this.getMenuItemCount(filteredChildren) - 1; | |
index++; | |
if (index > maxIndex) index = maxIndex; | |
this.setFocusIndex(index, true); | |
} | |
}, { | |
key: 'isChildSelected', | |
value: function isChildSelected(child, props) { | |
var menuValue = this.getValueLink(props).value; | |
var childValue = child.props.value; | |
if (props.multiple) { | |
return menuValue.length && menuValue.indexOf(childValue) !== -1; | |
} else { | |
return child.props.hasOwnProperty('value') && menuValue === childValue; | |
} | |
} | |
}, { | |
key: 'setFocusIndex', | |
value: function setFocusIndex(newIndex, isKeyboardFocused) { | |
this.setState({ | |
focusIndex: newIndex, | |
isKeyboardFocused: isKeyboardFocused | |
}); | |
} | |
}, { | |
key: 'setScollPosition', | |
value: function setScollPosition() { | |
var desktop = this.props.desktop; | |
var focusedMenuItem = this.refs.focusedMenuItem; | |
var menuItemHeight = desktop ? 32 : 48; | |
if (focusedMenuItem) { | |
var selectedOffSet = _reactDom2.default.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; | |
_reactDom2.default.findDOMNode(this.refs.scrollContainer).scrollTop = scrollTop; | |
} | |
} | |
}, { | |
key: 'setWidth', | |
value: function setWidth() { | |
var el = _reactDom2.default.findDOMNode(this); | |
var listEl = _reactDom2.default.findDOMNode(this.refs.list); | |
var elWidth = el.offsetWidth; | |
var keyWidth = this.state.keyWidth; | |
var minWidth = keyWidth * 1.5; | |
var keyIncrements = elWidth / keyWidth; | |
var newWidth = void 0; | |
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'; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _this4 = this; | |
var _props3 = this.props; | |
var animated = _props3.animated; | |
var autoWidth = _props3.autoWidth; | |
var // eslint-disable-line no-unused-vars | |
children = _props3.children; | |
var desktop = _props3.desktop; | |
var initiallyKeyboardFocused = _props3.initiallyKeyboardFocused; | |
var // eslint-disable-line no-unused-vars | |
listStyle = _props3.listStyle; | |
var maxHeight = _props3.maxHeight; | |
var // eslint-disable-line no-unused-vars | |
multiple = _props3.multiple; | |
var _props3$openDirection = _props3.openDirection; | |
var // eslint-disable-line no-unused-vars | |
openDirection = _props3$openDirection === undefined ? 'bottom-left' : _props3$openDirection; | |
var selectedMenuItemStyle = _props3.selectedMenuItemStyle; | |
var // eslint-disable-line no-unused-vars | |
style = _props3.style; | |
var value = _props3.value; | |
var // eslint-disable-line no-unused-vars | |
valueLink = _props3.valueLink; | |
var // eslint-disable-line no-unused-vars | |
width = _props3.width; | |
var // eslint-disable-line no-unused-vars | |
zDepth = _props3.zDepth; | |
var other = _objectWithoutProperties(_props3, ['animated', 'autoWidth', 'children', 'desktop', 'initiallyKeyboardFocused', 'listStyle', 'maxHeight', 'multiple', 'openDirection', 'selectedMenuItemStyle', 'style', 'value', 'valueLink', 'width', 'zDepth']); | |
true ? (0, _warning2.default)(typeof zDepth === 'undefined', 'Menu no longer supports `zDepth`. Instead, wrap it in `Paper` ' + 'or another component that provides `zDepth`.') : void 0; | |
var focusIndex = this.state.focusIndex; | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style); | |
var mergedListStyles = (0, _simpleAssign2.default)(styles.list, listStyle); | |
var openDown = openDirection.split('-')[0] === 'bottom'; | |
var filteredChildren = this.getFilteredChildren(children); | |
// Cascade children opacity | |
var cumulativeDelay = openDown ? 175 : 325; | |
var cascadeChildrenCount = this.getCascadeChildrenCount(filteredChildren); | |
var cumulativeDelayIncrement = Math.ceil(150 / cascadeChildrenCount); | |
var menuItemIndex = 0; | |
var newChildren = _react2.default.Children.map(filteredChildren, function (child, index) { | |
var childIsADivider = child.type && child.type.muiName === 'Divider'; | |
var childIsDisabled = child.props.disabled; | |
var childrenContainerStyles = {}; | |
if (animated) { | |
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 = (0, _simpleAssign2.default)({}, styles.menuItemContainer, { | |
transitionDelay: transitionDelay + 'ms' | |
}); | |
} | |
var clonedChild = childIsADivider ? _react2.default.cloneElement(child, { style: styles.divider }) : childIsDisabled ? _react2.default.cloneElement(child, { desktop: desktop }) : _this4.cloneMenuItem(child, menuItemIndex, styles, index); | |
if (!childIsADivider && !childIsDisabled) menuItemIndex++; | |
return animated ? _react2.default.createElement( | |
'div', | |
{ style: prepareStyles(childrenContainerStyles) }, | |
clonedChild | |
) : clonedChild; | |
}); | |
return _react2.default.createElement( | |
_ClickAwayListener2.default, | |
{ onClickAway: this.handleClickAway }, | |
_react2.default.createElement( | |
'div', | |
{ | |
onKeyDown: this.handleKeyDown, | |
style: prepareStyles(mergedRootStyles), | |
ref: 'scrollContainer' | |
}, | |
_react2.default.createElement( | |
_List2.default, | |
_extends({}, other, { | |
ref: 'list', | |
style: mergedListStyles | |
}), | |
newChildren | |
) | |
) | |
); | |
} | |
}]); | |
return Menu; | |
}(_react.Component); | |
Menu.propTypes = { | |
/** | |
* If true, the menu will apply transitions when it | |
* is added to the DOM. In order for transitions to | |
* work, wrap the menu inside a `ReactTransitionGroup`. | |
*/ | |
animated: (0, _deprecatedPropType2.default)(_react.PropTypes.bool, 'Instead, use a [Popover](/#/components/popover).'), | |
/** | |
* If true, the width of the menu will be set automatically | |
* according to the widths of its children, | |
* using proper keyline increments (64px for desktop, | |
* 56px otherwise). | |
*/ | |
autoWidth: _react.PropTypes.bool, | |
/** | |
* The content of the menu. This is usually used to pass `MenuItem` | |
* elements. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* If true, the menu item will render with compact desktop styles. | |
*/ | |
desktop: _react.PropTypes.bool, | |
/** | |
* If true, the menu will not be auto-focused. | |
*/ | |
disableAutoFocus: _react.PropTypes.bool, | |
/** | |
* If true, the menu will be keyboard-focused initially. | |
*/ | |
initiallyKeyboardFocused: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the underlying `List` element. | |
*/ | |
listStyle: _react.PropTypes.object, | |
/** | |
* The maximum height of the menu in pixels. If specified, | |
* the menu will be scrollable if it is taller than the provided | |
* height. | |
*/ | |
maxHeight: _react.PropTypes.number, | |
/** | |
* If true, `value` must be an array and the menu will support | |
* multiple selections. | |
*/ | |
multiple: _react.PropTypes.bool, | |
/** | |
* Callback function fired when a menu item with `value` not | |
* equal to the current `value` of the menu is touch-tapped. | |
* | |
* @param {object} event TouchTap event targeting the menu item. | |
* @param {any} value If `multiple` is true, the menu's `value` | |
* array with either the menu item's `value` added (if | |
* it wasn't already selected) or omitted (if it was already selected). | |
* Otherwise, the `value` of the menu item. | |
*/ | |
onChange: _react.PropTypes.func, | |
/** | |
* Callback function fired when the menu is focused and the *Esc* key | |
* is pressed. | |
* | |
* @param {object} event `keydown` event targeting the menu. | |
*/ | |
onEscKeyDown: _react.PropTypes.func, | |
/** | |
* Callback function fired when a menu item is touch-tapped. | |
* | |
* @param {object} event TouchTap event targeting the menu item. | |
* @param {object} menuItem The menu item. | |
* @param {number} index The index of the menu item. | |
*/ | |
onItemTouchTap: _react.PropTypes.func, | |
/** | |
* Callback function fired when the menu is focused and a key | |
* is pressed. | |
* | |
* @param {object} event `keydown` event targeting the menu. | |
*/ | |
onKeyDown: _react.PropTypes.func, | |
/** | |
* This is the placement of the menu relative to the `IconButton`. | |
*/ | |
openDirection: (0, _deprecatedPropType2.default)(_propTypes2.default.corners, 'Instead, use a [Popover](/#/components/popover).'), | |
/** | |
* Override the inline-styles of selected menu items. | |
*/ | |
selectedMenuItemStyle: _react.PropTypes.object, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* If `multiple` is true, an array of the `value`s of the selected | |
* menu items. Otherwise, the `value` of the selected menu item. | |
* If provided, the menu will be a controlled component. | |
* This component also supports valueLink. | |
*/ | |
value: _react.PropTypes.any, | |
/** | |
* ValueLink for the menu's `value`. | |
*/ | |
valueLink: _react.PropTypes.object, | |
/** | |
* The width of the menu. If not specified, the menu's width | |
* will be set according to the widths of its children, using | |
* proper keyline increments (64px for desktop, 56px otherwise). | |
*/ | |
width: _propTypes2.default.stringOrNumber, | |
/** | |
* @ignore | |
* Menu no longer supports `zDepth`. Instead, wrap it in `Paper` | |
* or another component that provides zDepth. | |
*/ | |
zDepth: _propTypes2.default.zDepth | |
}; | |
Menu.defaultProps = { | |
autoWidth: true, | |
desktop: false, | |
disableAutoFocus: false, | |
initiallyKeyboardFocused: false, | |
maxHeight: null, | |
multiple: false, | |
onChange: function onChange() {}, | |
onEscKeyDown: function onEscKeyDown() {}, | |
onItemTouchTap: function onItemTouchTap() {}, | |
onKeyDown: function onKeyDown() {} | |
}; | |
Menu.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
var _initialiseProps = function _initialiseProps() { | |
var _this5 = this; | |
this.handleClickAway = function (event) { | |
if (event.defaultPrevented) { | |
return; | |
} | |
_this5.setFocusIndex(-1, false); | |
}; | |
this.handleKeyDown = function (event) { | |
var filteredChildren = _this5.getFilteredChildren(_this5.props.children); | |
switch ((0, _keycode2.default)(event)) { | |
case 'down': | |
event.preventDefault(); | |
_this5.incrementKeyboardFocusIndex(filteredChildren); | |
break; | |
case 'esc': | |
_this5.props.onEscKeyDown(event); | |
break; | |
case 'tab': | |
event.preventDefault(); | |
if (event.shiftKey) { | |
_this5.decrementKeyboardFocusIndex(); | |
} else { | |
_this5.incrementKeyboardFocusIndex(filteredChildren); | |
} | |
break; | |
case 'up': | |
event.preventDefault(); | |
_this5.decrementKeyboardFocusIndex(); | |
break; | |
} | |
_this5.props.onKeyDown(event); | |
}; | |
}; | |
exports.default = Menu; | |
/***/ }, | |
/* 29 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var tableRowColumn = context.muiTheme.tableRowColumn; | |
var styles = { | |
root: { | |
paddingLeft: tableRowColumn.spacing, | |
paddingRight: tableRowColumn.spacing, | |
height: tableRowColumn.height, | |
textAlign: 'left', | |
fontSize: 13, | |
overflow: 'hidden', | |
whiteSpace: 'nowrap', | |
textOverflow: 'ellipsis' | |
} | |
}; | |
if (_react2.default.Children.count(props.children) === 1 && !isNaN(props.children)) { | |
styles.textAlign = 'right'; | |
} | |
return styles; | |
} | |
var TableRowColumn = function (_Component) { | |
_inherits(TableRowColumn, _Component); | |
function TableRowColumn() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, TableRowColumn); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRowColumn)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
hovered: false | |
}, _this.onClick = function (event) { | |
if (_this.props.onClick) _this.props.onClick(event, _this.props.columnNumber); | |
}, _this.onMouseEnter = function (event) { | |
if (_this.props.hoverable) { | |
_this.setState({ hovered: true }); | |
if (_this.props.onHover) _this.props.onHover(event, _this.props.columnNumber); | |
} | |
}, _this.onMouseLeave = function (event) { | |
if (_this.props.hoverable) { | |
_this.setState({ hovered: false }); | |
if (_this.props.onHoverExit) _this.props.onHoverExit(event, _this.props.columnNumber); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(TableRowColumn, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var children = _props.children; | |
var className = _props.className; | |
var columnNumber = _props.columnNumber; | |
var // eslint-disable-line no-unused-vars | |
hoverable = _props.hoverable; | |
var // eslint-disable-line no-unused-vars | |
onClick = _props.onClick; | |
var // eslint-disable-line no-unused-vars | |
onHover = _props.onHover; | |
var // eslint-disable-line no-unused-vars | |
onHoverExit = _props.onHoverExit; | |
var // eslint-disable-line no-unused-vars | |
style = _props.style; | |
var other = _objectWithoutProperties(_props, ['children', 'className', 'columnNumber', 'hoverable', 'onClick', 'onHover', 'onHoverExit', 'style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var handlers = { | |
onClick: this.onClick, | |
onMouseEnter: this.onMouseEnter, | |
onMouseLeave: this.onMouseLeave | |
}; | |
return _react2.default.createElement( | |
'td', | |
_extends({ | |
className: className, | |
style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) | |
}, handlers, other), | |
children | |
); | |
} | |
}]); | |
return TableRowColumn; | |
}(_react.Component); | |
TableRowColumn.propTypes = { | |
children: _react.PropTypes.node, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* @ignore | |
* Number to identify the header row. This property | |
* is automatically populated when used with TableHeader. | |
*/ | |
columnNumber: _react.PropTypes.number, | |
/** | |
* @ignore | |
* If true, this column responds to hover events. | |
*/ | |
hoverable: _react.PropTypes.bool, | |
/** | |
* @ignore | |
* Callback function for click event. | |
*/ | |
onClick: _react.PropTypes.func, | |
/** | |
* @ignore | |
* Callback function for hover event. | |
*/ | |
onHover: _react.PropTypes.func, | |
/** | |
* @ignore | |
* Callback function for hover exit event. | |
*/ | |
onHoverExit: _react.PropTypes.func, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
TableRowColumn.defaultProps = { | |
hoverable: false | |
}; | |
TableRowColumn.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = TableRowColumn; | |
/***/ }, | |
/* 30 */ | |
/***/ function(module, exports) { | |
"use strict"; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
// helper to capitalize strings | |
exports.default = function (str) { | |
return str.charAt(0).toUpperCase() + str.slice(1); | |
}; | |
module.exports = exports["default"]; | |
/***/ }, | |
/* 31 */ | |
/***/ function(module, exports) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
// returns a style object with a single concated prefixed value string | |
exports.default = function (property, value) { | |
var replacer = arguments.length <= 2 || arguments[2] === undefined ? function (prefix, value) { | |
return prefix + value; | |
} : arguments[2]; | |
return _defineProperty({}, property, ['-webkit-', '-moz-', ''].map(function (prefix) { | |
return replacer(prefix, value); | |
})); | |
}; | |
module.exports = exports['default']; | |
/***/ }, | |
/* 32 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _Checkbox = __webpack_require__(107); | |
var _Checkbox2 = _interopRequireDefault(_Checkbox); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _Checkbox2.default; | |
/***/ }, | |
/* 33 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _Dialog = __webpack_require__(121); | |
var _Dialog2 = _interopRequireDefault(_Dialog); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _Dialog2.default; | |
/***/ }, | |
/* 34 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _FontIcon = __webpack_require__(130); | |
var _FontIcon2 = _interopRequireDefault(_FontIcon); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _FontIcon2.default; | |
/***/ }, | |
/* 35 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _propTypes = __webpack_require__(9); | |
var _propTypes2 = _interopRequireDefault(_propTypes); | |
var _Subheader = __webpack_require__(68); | |
var _Subheader2 = _interopRequireDefault(_Subheader); | |
var _deprecatedPropType = __webpack_require__(15); | |
var _deprecatedPropType2 = _interopRequireDefault(_deprecatedPropType); | |
var _warning = __webpack_require__(6); | |
var _warning2 = _interopRequireDefault(_warning); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var List = function (_Component) { | |
_inherits(List, _Component); | |
function List() { | |
_classCallCheck(this, List); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(List).apply(this, arguments)); | |
} | |
_createClass(List, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var children = _props.children; | |
var _props$insetSubheader = _props.insetSubheader; | |
var insetSubheader = _props$insetSubheader === undefined ? false : _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']); | |
true ? (0, _warning2.default)(typeof zDepth === 'undefined', 'List no longer supports `zDepth`. Instead, wrap it in `Paper` ' + 'or another component that provides zDepth.') : void 0; | |
var hasSubheader = false; | |
if (subheader) { | |
hasSubheader = true; | |
} else { | |
var firstChild = _react2.default.Children.toArray(children)[0]; | |
if (_react2.default.isValidElement(firstChild) && firstChild.type === _Subheader2.default) { | |
hasSubheader = true; | |
} | |
} | |
var styles = { | |
root: { | |
padding: 0, | |
paddingBottom: 8, | |
paddingTop: hasSubheader ? 0 : 8 | |
} | |
}; | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { | |
style: (0, _simpleAssign2.default)(styles.root, style) | |
}), | |
subheader && _react2.default.createElement( | |
_Subheader2.default, | |
{ inset: insetSubheader, style: subheaderStyle }, | |
subheader | |
), | |
children | |
); | |
} | |
}]); | |
return List; | |
}(_react.Component); | |
List.propTypes = { | |
/** | |
* These are usually `ListItem`s that are passed to | |
* be part of the list. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* If true, the subheader will be indented by 72px. | |
*/ | |
insetSubheader: (0, _deprecatedPropType2.default)(_react.PropTypes.bool, 'Refer to the `subheader` property.'), | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The subheader string that will be displayed at the top of the list. | |
*/ | |
subheader: (0, _deprecatedPropType2.default)(_react.PropTypes.node, 'Instead, nest the `Subheader` component directly inside the `List`.'), | |
/** | |
* Override the inline-styles of the subheader element. | |
*/ | |
subheaderStyle: (0, _deprecatedPropType2.default)(_react.PropTypes.object, 'Refer to the `subheader` property.'), | |
/** | |
* @ignore | |
* ** Breaking change ** List no longer supports `zDepth`. Instead, wrap it in `Paper` | |
* or another component that provides zDepth. | |
*/ | |
zDepth: _propTypes2.default.zDepth | |
}; | |
List.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = List; | |
/***/ }, | |
/* 36 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactDom = __webpack_require__(4); | |
var _reactDom2 = _interopRequireDefault(_reactDom); | |
var _shallowEqual = __webpack_require__(16); | |
var _shallowEqual2 = _interopRequireDefault(_shallowEqual); | |
var _colorManipulator = __webpack_require__(12); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _EnhancedButton = __webpack_require__(11); | |
var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); | |
var _IconButton = __webpack_require__(20); | |
var _IconButton2 = _interopRequireDefault(_IconButton); | |
var _expandLess = __webpack_require__(204); | |
var _expandLess2 = _interopRequireDefault(_expandLess); | |
var _expandMore = __webpack_require__(205); | |
var _expandMore2 = _interopRequireDefault(_expandMore); | |
var _NestedList = __webpack_require__(138); | |
var _NestedList2 = _interopRequireDefault(_NestedList); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context, state) { | |
var insetChildren = props.insetChildren; | |
var leftAvatar = props.leftAvatar; | |
var leftCheckbox = props.leftCheckbox; | |
var leftIcon = props.leftIcon; | |
var nestedLevel = props.nestedLevel; | |
var rightAvatar = props.rightAvatar; | |
var rightIcon = props.rightIcon; | |
var rightIconButton = props.rightIconButton; | |
var rightToggle = props.rightToggle; | |
var secondaryText = props.secondaryText; | |
var secondaryTextLines = props.secondaryTextLines; | |
var muiTheme = context.muiTheme; | |
var listItem = muiTheme.listItem; | |
var textColor = muiTheme.baseTheme.palette.textColor; | |
var hoverColor = (0, _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 styles = { | |
root: { | |
backgroundColor: (state.isKeyboardFocused || state.hovered) && !state.rightIconButtonHovered && !state.rightIconButtonKeyboardFocused ? hoverColor : null, | |
color: textColor, | |
display: 'block', | |
fontSize: 16, | |
lineHeight: '16px', | |
position: 'relative', | |
transition: _transitions2.default.easeOut() | |
}, | |
// This inner div is needed so that ripples will span the entire container | |
innerDiv: { | |
marginLeft: nestedLevel * 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, | |
margin: 12 | |
}, | |
leftIcon: { | |
color: listItem.leftIconColor, | |
fill: listItem.leftIconColor, | |
left: 4 | |
}, | |
rightIcon: { | |
color: listItem.rightIconColor, | |
fill: listItem.rightIconColor, | |
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: {}, | |
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: listItem.secondaryTextColor, | |
// 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 | |
} | |
}; | |
return styles; | |
} | |
var ListItem = function (_Component) { | |
_inherits(ListItem, _Component); | |
function ListItem() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, ListItem); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ListItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
hovered: false, | |
isKeyboardFocused: false, | |
open: _this.props.initiallyOpen, | |
rightIconButtonHovered: false, | |
rightIconButtonKeyboardFocused: false, | |
touch: false | |
}, _this.handleKeyboardFocus = function (event, isKeyboardFocused) { | |
_this.setState({ isKeyboardFocused: isKeyboardFocused }); | |
_this.props.onKeyboardFocus(event, isKeyboardFocused); | |
}, _this.handleMouseEnter = function (event) { | |
if (!_this.state.touch) _this.setState({ hovered: true }); | |
_this.props.onMouseEnter(event); | |
}, _this.handleMouseLeave = function (event) { | |
_this.setState({ hovered: false }); | |
_this.props.onMouseLeave(event); | |
}, _this.handleNestedListToggle = function (event) { | |
event.stopPropagation(); | |
_this.setState({ open: !_this.state.open }); | |
_this.props.onNestedListToggle(_this); | |
}, _this.handleRightIconButtonKeyboardFocus = function (event, isKeyboardFocused) { | |
if (isKeyboardFocused) { | |
_this.setState({ | |
isKeyboardFocused: false, | |
rightIconButtonKeyboardFocused: isKeyboardFocused | |
}); | |
} | |
var iconButton = _this.props.rightIconButton; | |
if (iconButton && iconButton.props.onKeyboardFocus) iconButton.props.onKeyboardFocus(event, isKeyboardFocused); | |
}, _this.handleRightIconButtonMouseLeave = function (event) { | |
var iconButton = _this.props.rightIconButton; | |
_this.setState({ rightIconButtonHovered: false }); | |
if (iconButton && iconButton.props.onMouseLeave) iconButton.props.onMouseLeave(event); | |
}, _this.handleRightIconButtonMouseEnter = function (event) { | |
var iconButton = _this.props.rightIconButton; | |
_this.setState({ rightIconButtonHovered: true }); | |
if (iconButton && iconButton.props.onMouseEnter) iconButton.props.onMouseEnter(event); | |
}, _this.handleRightIconButtonMouseUp = function (event) { | |
var iconButton = _this.props.rightIconButton; | |
event.stopPropagation(); | |
if (iconButton && iconButton.props.onMouseUp) iconButton.props.onMouseUp(event); | |
}, _this.handleRightIconButtonTouchTap = function (event) { | |
var iconButton = _this.props.rightIconButton; | |
// Stop the event from bubbling up to the list-item | |
event.stopPropagation(); | |
if (iconButton && iconButton.props.onTouchTap) iconButton.props.onTouchTap(event); | |
}, _this.handleTouchStart = function (event) { | |
_this.setState({ touch: true }); | |
_this.props.onTouchStart(event); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(ListItem, [{ | |
key: 'shouldComponentUpdate', | |
value: function shouldComponentUpdate(nextProps, nextState) { | |
return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.state, nextState); | |
} | |
// This method is needed by the `MenuItem` component. | |
}, { | |
key: 'applyFocusState', | |
value: function applyFocusState(focusState) { | |
var button = this.refs.enhancedButton; | |
if (button) { | |
var buttonEl = _reactDom2.default.findDOMNode(button); | |
switch (focusState) { | |
case 'none': | |
buttonEl.blur(); | |
break; | |
case 'focused': | |
buttonEl.focus(); | |
break; | |
case 'keyboard-focused': | |
button.setKeyboardFocus(); | |
buttonEl.focus(); | |
break; | |
} | |
} | |
} | |
}, { | |
key: 'createDisabledElement', | |
value: function createDisabledElement(styles, contentChildren, additionalProps) { | |
var _props = this.props; | |
var innerDivStyle = _props.innerDivStyle; | |
var style = _props.style; | |
var mergedDivStyles = (0, _simpleAssign2.default)({}, styles.root, styles.innerDiv, innerDivStyle, style); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, additionalProps, { | |
style: this.context.muiTheme.prepareStyles(mergedDivStyles) | |
}), | |
contentChildren | |
); | |
} | |
}, { | |
key: 'createLabelElement', | |
value: function createLabelElement(styles, contentChildren, additionalProps) { | |
var _props2 = this.props; | |
var innerDivStyle = _props2.innerDivStyle; | |
var style = _props2.style; | |
var mergedLabelStyles = (0, _simpleAssign2.default)({}, styles.root, styles.innerDiv, innerDivStyle, styles.label, style); | |
return _react2.default.createElement( | |
'label', | |
_extends({}, additionalProps, { | |
style: this.context.muiTheme.prepareStyles(mergedLabelStyles) | |
}), | |
contentChildren | |
); | |
} | |
}, { | |
key: 'createTextElement', | |
value: function createTextElement(styles, data, key) { | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
if (_react2.default.isValidElement(data)) { | |
var style = (0, _simpleAssign2.default)({}, styles, data.props.style); | |
if (typeof data.type === 'string') { | |
// if element is a native dom node | |
style = prepareStyles(style); | |
} | |
return _react2.default.cloneElement(data, { | |
key: key, | |
style: style | |
}); | |
} | |
return _react2.default.createElement( | |
'div', | |
{ key: key, style: prepareStyles(styles) }, | |
data | |
); | |
} | |
}, { | |
key: 'pushElement', | |
value: function pushElement(children, element, baseStyles, additionalProps) { | |
if (element) { | |
var styles = (0, _simpleAssign2.default)({}, baseStyles, element.props.style); | |
children.push(_react2.default.cloneElement(element, _extends({ | |
key: children.length, | |
style: styles | |
}, additionalProps))); | |
} | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props3 = this.props; | |
var autoGenerateNestedIndicator = _props3.autoGenerateNestedIndicator; | |
var children = _props3.children; | |
var disabled = _props3.disabled; | |
var disableKeyboardFocus = _props3.disableKeyboardFocus; | |
var innerDivStyle = _props3.innerDivStyle; | |
var insetChildren = _props3.insetChildren; | |
var // eslint-disable-line no-unused-vars | |
leftAvatar = _props3.leftAvatar; | |
var leftCheckbox = _props3.leftCheckbox; | |
var leftIcon = _props3.leftIcon; | |
var nestedItems = _props3.nestedItems; | |
var nestedLevel = _props3.nestedLevel; | |
var nestedListStyle = _props3.nestedListStyle; | |
var onKeyboardFocus = _props3.onKeyboardFocus; | |
var // eslint-disable-line no-unused-vars | |
onMouseLeave = _props3.onMouseLeave; | |
var // eslint-disable-line no-unused-vars | |
onMouseEnter = _props3.onMouseEnter; | |
var // eslint-disable-line no-unused-vars | |
onTouchStart = _props3.onTouchStart; | |
var // eslint-disable-line no-unused-vars | |
onTouchTap = _props3.onTouchTap; | |
var rightAvatar = _props3.rightAvatar; | |
var rightIcon = _props3.rightIcon; | |
var rightIconButton = _props3.rightIconButton; | |
var rightToggle = _props3.rightToggle; | |
var primaryText = _props3.primaryText; | |
var primaryTogglesNestedList = _props3.primaryTogglesNestedList; | |
var secondaryText = _props3.secondaryText; | |
var secondaryTextLines = _props3.secondaryTextLines; | |
var // eslint-disable-line no-unused-vars | |
style = _props3.style; | |
var other = _objectWithoutProperties(_props3, ['autoGenerateNestedIndicator', 'children', 'disabled', 'disableKeyboardFocus', 'innerDivStyle', 'insetChildren', 'leftAvatar', 'leftCheckbox', 'leftIcon', 'nestedItems', 'nestedLevel', 'nestedListStyle', 'onKeyboardFocus', 'onMouseLeave', 'onMouseEnter', 'onTouchStart', 'onTouchTap', 'rightAvatar', 'rightIcon', 'rightIconButton', 'rightToggle', 'primaryText', 'primaryTogglesNestedList', 'secondaryText', 'secondaryTextLines', 'style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context, this.state); | |
var contentChildren = [children]; | |
if (leftIcon) { | |
this.pushElement(contentChildren, leftIcon, (0, _simpleAssign2.default)({}, styles.icons, styles.leftIcon)); | |
} | |
if (rightIcon) { | |
this.pushElement(contentChildren, rightIcon, (0, _simpleAssign2.default)({}, styles.icons, styles.rightIcon)); | |
} | |
if (leftAvatar) { | |
this.pushElement(contentChildren, leftAvatar, (0, _simpleAssign2.default)({}, styles.avatars, styles.leftAvatar)); | |
} | |
if (rightAvatar) { | |
this.pushElement(contentChildren, rightAvatar, (0, _simpleAssign2.default)({}, styles.avatars, styles.rightAvatar)); | |
} | |
if (leftCheckbox) { | |
this.pushElement(contentChildren, leftCheckbox, (0, _simpleAssign2.default)({}, 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 ? _react2.default.createElement( | |
_IconButton2.default, | |
null, | |
_react2.default.createElement(_expandLess2.default, null) | |
) : _react2.default.createElement( | |
_IconButton2.default, | |
null, | |
_react2.default.createElement(_expandMore2.default, null) | |
); | |
rightIconButtonHandlers.onTouchTap = this.handleNestedListToggle; | |
} | |
this.pushElement(contentChildren, rightIconButtonElement, (0, _simpleAssign2.default)({}, styles.rightIconButton), rightIconButtonHandlers); | |
} | |
if (rightToggle) { | |
this.pushElement(contentChildren, rightToggle, (0, _simpleAssign2.default)({}, styles.rightToggle)); | |
} | |
if (primaryText) { | |
var primaryTextElement = this.createTextElement(styles.primaryText, primaryText, 'primaryText'); | |
contentChildren.push(primaryTextElement); | |
} | |
if (secondaryText) { | |
var secondaryTextElement = this.createTextElement(styles.secondaryText, secondaryText, 'secondaryText'); | |
contentChildren.push(secondaryTextElement); | |
} | |
var nestedList = nestedItems.length ? _react2.default.createElement( | |
_NestedList2.default, | |
{ nestedLevel: nestedLevel + 1, open: this.state.open, style: nestedListStyle }, | |
nestedItems | |
) : undefined; | |
var hasCheckbox = leftCheckbox || rightToggle; | |
return _react2.default.createElement( | |
'div', | |
null, | |
hasCheckbox ? this.createLabelElement(styles, contentChildren, other) : disabled ? this.createDisabledElement(styles, contentChildren, other) : _react2.default.createElement( | |
_EnhancedButton2.default, | |
_extends({ | |
containerElement: 'span' | |
}, other, { | |
disabled: disabled, | |
disableKeyboardFocus: disableKeyboardFocus || this.state.rightIconButtonKeyboardFocused, | |
onKeyboardFocus: this.handleKeyboardFocus, | |
onMouseLeave: this.handleMouseLeave, | |
onMouseEnter: this.handleMouseEnter, | |
onTouchStart: this.handleTouchStart, | |
onTouchTap: primaryTogglesNestedList ? this.handleNestedListToggle : onTouchTap, | |
ref: 'enhancedButton', | |
style: (0, _simpleAssign2.default)({}, styles.root, style) | |
}), | |
_react2.default.createElement( | |
'div', | |
{ style: prepareStyles((0, _simpleAssign2.default)(styles.innerDiv, innerDivStyle)) }, | |
contentChildren | |
) | |
), | |
nestedList | |
); | |
} | |
}]); | |
return ListItem; | |
}(_react.Component); | |
ListItem.muiName = 'ListItem'; | |
ListItem.propTypes = { | |
/** | |
* If true, generate a nested-list-indicator icon when nested list | |
* items are detected. Note that an indicator will not be created | |
* if a `rightIcon` or `rightIconButton` has been provided to | |
* the element. | |
*/ | |
autoGenerateNestedIndicator: _react.PropTypes.bool, | |
/** | |
* Children passed into the `ListItem`. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* If true, the element will not be able to be focused by the keyboard. | |
*/ | |
disableKeyboardFocus: _react.PropTypes.bool, | |
/** | |
* If true, the element will not be clickable | |
* and will not display hover effects. | |
* This is automatically disabled if either `leftCheckbox` | |
* or `rightToggle` is set. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* If true, the nested `ListItem`s are initially displayed. | |
*/ | |
initiallyOpen: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the inner div element. | |
*/ | |
innerDivStyle: _react.PropTypes.object, | |
/** | |
* If true, the children will be indented by 72px. | |
* This is useful if there is no left avatar or left icon. | |
*/ | |
insetChildren: _react.PropTypes.bool, | |
/** | |
* This is the `Avatar` element to be displayed on the left side. | |
*/ | |
leftAvatar: _react.PropTypes.element, | |
/** | |
* This is the `Checkbox` element to be displayed on the left side. | |
*/ | |
leftCheckbox: _react.PropTypes.element, | |
/** | |
* This is the `SvgIcon` or `FontIcon` to be displayed on the left side. | |
*/ | |
leftIcon: _react.PropTypes.element, | |
/** | |
* An array of `ListItem`s to nest underneath the current `ListItem`. | |
*/ | |
nestedItems: _react.PropTypes.arrayOf(_react.PropTypes.element), | |
/** | |
* Controls how deep a `ListItem` appears. | |
* This property is automatically managed, so modify at your own risk. | |
*/ | |
nestedLevel: _react.PropTypes.number, | |
/** | |
* Override the inline-styles of the nested items' `NestedList`. | |
*/ | |
nestedListStyle: _react.PropTypes.object, | |
/** | |
* Callback function fired when the `ListItem` is focused or blurred by the keyboard. | |
* | |
* @param {object} event `focus` or `blur` event targeting the `ListItem`. | |
* @param {boolean} isKeyboardFocused If true, the `ListItem` is focused. | |
*/ | |
onKeyboardFocus: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse enters the `ListItem`. | |
* | |
* @param {object} event `mouseenter` event targeting the `ListItem`. | |
*/ | |
onMouseEnter: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse leaves the `ListItem`. | |
* | |
* @param {object} event `mouseleave` event targeting the `ListItem`. | |
*/ | |
onMouseLeave: _react.PropTypes.func, | |
/** | |
* Callbak function fired when the `ListItem` toggles its nested list. | |
* | |
* @param {object} listItem The `ListItem`. | |
*/ | |
onNestedListToggle: _react.PropTypes.func, | |
/** | |
* Callback function fired when the `ListItem` is touched. | |
* | |
* @param {object} event `touchstart` event targeting the `ListItem`. | |
*/ | |
onTouchStart: _react.PropTypes.func, | |
/** | |
* Callback function fired when the `ListItem` is touch-tapped. | |
* | |
* @param {object} event TouchTap event targeting the `ListItem`. | |
*/ | |
onTouchTap: _react.PropTypes.func, | |
/** | |
* This is the block element that contains the primary text. | |
* If a string is passed in, a div tag will be rendered. | |
*/ | |
primaryText: _react.PropTypes.node, | |
/** | |
* If true, clicking or tapping the primary text of the `ListItem` | |
* toggles the nested list. | |
*/ | |
primaryTogglesNestedList: _react.PropTypes.bool, | |
/** | |
* This is the `Avatar` element to be displayed on the right side. | |
*/ | |
rightAvatar: _react.PropTypes.element, | |
/** | |
* This is the `SvgIcon` or `FontIcon` to be displayed on the right side. | |
*/ | |
rightIcon: _react.PropTypes.element, | |
/** | |
* This is the `IconButton` to be displayed on the right side. | |
* Hovering over this button will remove the `ListItem` hover. | |
* Also, clicking on this button will not trigger a | |
* ripple on the `ListItem`; the event will be stopped and prevented | |
* from bubbling up to cause a `ListItem` click. | |
*/ | |
rightIconButton: _react.PropTypes.element, | |
/** | |
* This is the `Toggle` element to display on the right side. | |
*/ | |
rightToggle: _react.PropTypes.element, | |
/** | |
* This is the block element that contains the secondary text. | |
* If a string is passed in, a div tag will be rendered. | |
*/ | |
secondaryText: _react.PropTypes.node, | |
/** | |
* Can be 1 or 2. This is the number of secondary | |
* text lines before ellipsis will show. | |
*/ | |
secondaryTextLines: _react.PropTypes.oneOf([1, 2]), | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
ListItem.defaultProps = { | |
autoGenerateNestedIndicator: true, | |
disableKeyboardFocus: false, | |
disabled: false, | |
initiallyOpen: false, | |
insetChildren: false, | |
nestedItems: [], | |
nestedLevel: 0, | |
onKeyboardFocus: function onKeyboardFocus() {}, | |
onMouseEnter: function onMouseEnter() {}, | |
onMouseLeave: function onMouseLeave() {}, | |
onNestedListToggle: function onNestedListToggle() {}, | |
onTouchStart: function onTouchStart() {}, | |
primaryTogglesNestedList: false, | |
secondaryTextLines: 1 | |
}; | |
ListItem.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = ListItem; | |
/***/ }, | |
/* 37 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactDom = __webpack_require__(4); | |
var _reactDom2 = _interopRequireDefault(_reactDom); | |
var _shallowEqual = __webpack_require__(16); | |
var _shallowEqual2 = _interopRequireDefault(_shallowEqual); | |
var _Popover = __webpack_require__(18); | |
var _Popover2 = _interopRequireDefault(_Popover); | |
var _check = __webpack_require__(201); | |
var _check2 = _interopRequireDefault(_check); | |
var _ListItem = __webpack_require__(36); | |
var _ListItem2 = _interopRequireDefault(_ListItem); | |
var _Menu = __webpack_require__(28); | |
var _Menu2 = _interopRequireDefault(_Menu); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var nestedMenuStyle = { | |
position: 'relative' | |
}; | |
function getStyles(props, context) { | |
var disabledColor = context.muiTheme.baseTheme.palette.disabledColor; | |
var textColor = context.muiTheme.baseTheme.palette.textColor; | |
var leftIndent = props.desktop ? 64 : 72; | |
var sidePadding = props.desktop ? 24 : 16; | |
var styles = { | |
root: { | |
color: props.disabled ? disabledColor : textColor, | |
lineHeight: props.desktop ? '32px' : '48px', | |
fontSize: props.desktop ? 15 : 16, | |
whiteSpace: 'nowrap' | |
}, | |
innerDivStyle: { | |
paddingLeft: props.leftIcon || props.insetChildren || props.checked ? leftIndent : sidePadding, | |
paddingRight: sidePadding, | |
paddingBottom: 0, | |
paddingTop: 0 | |
}, | |
secondaryText: { | |
float: 'right' | |
}, | |
leftIconDesktop: { | |
margin: 0, | |
left: 24, | |
top: 4 | |
}, | |
rightIconDesktop: { | |
margin: 0, | |
right: 24, | |
top: 4, | |
fill: context.muiTheme.menuItem.rightIconDesktopFill | |
} | |
}; | |
return styles; | |
} | |
var MenuItem = function (_Component) { | |
_inherits(MenuItem, _Component); | |
function MenuItem() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, MenuItem); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(MenuItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
open: false | |
}, _this.cloneMenuItem = function (item) { | |
return _react2.default.cloneElement(item, { | |
onTouchTap: function onTouchTap(event) { | |
if (!item.props.menuItems) { | |
_this.handleRequestClose(); | |
} | |
if (item.props.onTouchTap) { | |
item.props.onTouchTap(event); | |
} | |
}, | |
onRequestClose: _this.handleRequestClose | |
}); | |
}, _this.handleTouchTap = function (event) { | |
event.preventDefault(); | |
_this.setState({ | |
open: true, | |
anchorEl: _reactDom2.default.findDOMNode(_this) | |
}); | |
if (_this.props.onTouchTap) { | |
_this.props.onTouchTap(event); | |
} | |
}, _this.handleRequestClose = function () { | |
_this.setState({ | |
open: false, | |
anchorEl: null | |
}); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(MenuItem, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
this.applyFocusState(); | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
if (this.state.open && nextProps.focusState === 'none') { | |
this.handleRequestClose(); | |
} | |
} | |
}, { | |
key: 'shouldComponentUpdate', | |
value: function shouldComponentUpdate(nextProps, nextState) { | |
return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.state, nextState); | |
} | |
}, { | |
key: 'componentDidUpdate', | |
value: function componentDidUpdate() { | |
this.applyFocusState(); | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
if (this.state.open) { | |
this.setState({ | |
open: false | |
}); | |
} | |
} | |
}, { | |
key: 'applyFocusState', | |
value: function applyFocusState() { | |
this.refs.listItem.applyFocusState(this.props.focusState); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var checked = _props.checked; | |
var children = _props.children; | |
var desktop = _props.desktop; | |
var disabled = _props.disabled; | |
var focusState = _props.focusState; | |
var // eslint-disable-line no-unused-vars | |
innerDivStyle = _props.innerDivStyle; | |
var insetChildren = _props.insetChildren; | |
var leftIcon = _props.leftIcon; | |
var menuItems = _props.menuItems; | |
var rightIcon = _props.rightIcon; | |
var secondaryText = _props.secondaryText; | |
var style = _props.style; | |
var value = _props.value; | |
var other = _objectWithoutProperties(_props, ['checked', 'children', 'desktop', 'disabled', 'focusState', 'innerDivStyle', 'insetChildren', 'leftIcon', 'menuItems', 'rightIcon', 'secondaryText', 'style', 'value']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style); | |
var mergedInnerDivStyles = (0, _simpleAssign2.default)(styles.innerDivStyle, innerDivStyle); | |
// Left Icon | |
var leftIconElement = leftIcon ? leftIcon : checked ? _react2.default.createElement(_check2.default, null) : null; | |
if (leftIconElement && desktop) { | |
var mergedLeftIconStyles = (0, _simpleAssign2.default)(styles.leftIconDesktop, leftIconElement.props.style); | |
leftIconElement = _react2.default.cloneElement(leftIconElement, { style: mergedLeftIconStyles }); | |
} | |
// Right Icon | |
var rightIconElement = void 0; | |
if (rightIcon) { | |
var mergedRightIconStyles = desktop ? (0, _simpleAssign2.default)(styles.rightIconDesktop, rightIcon.props.style) : rightIcon.props.style; | |
rightIconElement = _react2.default.cloneElement(rightIcon, { style: mergedRightIconStyles }); | |
} | |
// Secondary Text | |
var secondaryTextElement = void 0; | |
if (secondaryText) { | |
var secondaryTextIsAnElement = _react2.default.isValidElement(secondaryText); | |
var mergedSecondaryTextStyles = secondaryTextIsAnElement ? (0, _simpleAssign2.default)(styles.secondaryText, secondaryText.props.style) : null; | |
secondaryTextElement = secondaryTextIsAnElement ? _react2.default.cloneElement(secondaryText, { style: mergedSecondaryTextStyles }) : _react2.default.createElement( | |
'div', | |
{ style: prepareStyles(styles.secondaryText) }, | |
secondaryText | |
); | |
} | |
var childMenuPopover = void 0; | |
if (menuItems) { | |
childMenuPopover = _react2.default.createElement( | |
_Popover2.default, | |
{ | |
anchorOrigin: { horizontal: 'right', vertical: 'top' }, | |
anchorEl: this.state.anchorEl, | |
open: this.state.open, | |
useLayerForClickAway: false, | |
onRequestClose: this.handleRequestClose | |
}, | |
_react2.default.createElement( | |
_Menu2.default, | |
{ desktop: desktop, disabled: disabled, style: nestedMenuStyle }, | |
_react2.default.Children.map(menuItems, this.cloneMenuItem) | |
) | |
); | |
other.onTouchTap = this.handleTouchTap; | |
} | |
return _react2.default.createElement( | |
_ListItem2.default, | |
_extends({}, other, { | |
disabled: disabled, | |
innerDivStyle: mergedInnerDivStyles, | |
insetChildren: insetChildren, | |
leftIcon: leftIconElement, | |
ref: 'listItem', | |
rightIcon: rightIconElement, | |
style: mergedRootStyles | |
}), | |
children, | |
secondaryTextElement, | |
childMenuPopover | |
); | |
} | |
}]); | |
return MenuItem; | |
}(_react.Component); | |
MenuItem.muiName = 'MenuItem'; | |
MenuItem.propTypes = { | |
/** | |
* If true, a left check mark will be rendered. | |
*/ | |
checked: _react.PropTypes.bool, | |
/** | |
* Elements passed as children to the underlying `ListItem`. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* @ignore | |
* If true, the menu item will render with compact desktop | |
* styles. | |
*/ | |
desktop: _react.PropTypes.bool, | |
/** | |
* If true, the menu item will be disabled. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* The focus state of the menu item. This prop is used to set the focus | |
* state of the underlying `ListItem`. | |
*/ | |
focusState: _react.PropTypes.oneOf(['none', 'focused', 'keyboard-focused']), | |
/** | |
* Override the inline-styles of the inner div. | |
*/ | |
innerDivStyle: _react.PropTypes.object, | |
/** | |
* If true, the children will be indented. | |
* This is only needed when there is no `leftIcon`. | |
*/ | |
insetChildren: _react.PropTypes.bool, | |
/** | |
* The `SvgIcon` or `FontIcon` to be displayed on the left side. | |
*/ | |
leftIcon: _react.PropTypes.element, | |
/** | |
* `MenuItem` elements to nest within the menu item. | |
*/ | |
menuItems: _react.PropTypes.node, | |
/** | |
* Callback function fired when the menu item is touch-tapped. | |
* | |
* @param {object} event TouchTap event targeting the menu item. | |
*/ | |
onTouchTap: _react.PropTypes.func, | |
/** | |
* Can be used to render primary text within the menu item. | |
*/ | |
primaryText: _react.PropTypes.node, | |
/** | |
* The `SvgIcon` or `FontIcon` to be displayed on the right side. | |
*/ | |
rightIcon: _react.PropTypes.element, | |
/** | |
* Can be used to render secondary text within the menu item. | |
*/ | |
secondaryText: _react.PropTypes.node, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The value of the menu item. | |
*/ | |
value: _react.PropTypes.any | |
}; | |
MenuItem.defaultProps = { | |
checked: false, | |
desktop: false, | |
disabled: false, | |
focusState: 'none', | |
insetChildren: false | |
}; | |
MenuItem.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = MenuItem; | |
/***/ }, | |
/* 38 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _MenuItem = __webpack_require__(37); | |
var _MenuItem2 = _interopRequireDefault(_MenuItem); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _MenuItem2.default; | |
/***/ }, | |
/* 39 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _Paper = __webpack_require__(8); | |
var _Paper2 = _interopRequireDefault(_Paper); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _propTypes = __webpack_require__(9); | |
var _propTypes2 = _interopRequireDefault(_propTypes); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context, state) { | |
var targetOrigin = props.targetOrigin; | |
var open = state.open; | |
var muiTheme = context.muiTheme; | |
var horizontal = targetOrigin.horizontal.replace('middle', 'vertical'); | |
return { | |
root: { | |
opacity: open ? 1 : 0, | |
transform: open ? 'scaleY(1)' : 'scaleY(0)', | |
transformOrigin: horizontal + ' ' + targetOrigin.vertical, | |
position: 'fixed', | |
zIndex: muiTheme.zIndex.popover, | |
transition: _transitions2.default.easeOut('450ms', ['transform', 'opacity']), | |
maxHeight: '100%' | |
} | |
}; | |
} | |
var PopoverAnimationVertical = function (_Component) { | |
_inherits(PopoverAnimationVertical, _Component); | |
function PopoverAnimationVertical() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, PopoverAnimationVertical); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(PopoverAnimationVertical)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
open: false | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(PopoverAnimationVertical, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
this.setState({ open: true }); // eslint-disable-line react/no-did-mount-set-state | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
this.setState({ | |
open: nextProps.open | |
}); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var className = _props.className; | |
var style = _props.style; | |
var zDepth = _props.zDepth; | |
var styles = getStyles(this.props, this.context, this.state); | |
return _react2.default.createElement( | |
_Paper2.default, | |
{ | |
style: (0, _simpleAssign2.default)(styles.root, style), | |
zDepth: zDepth, | |
className: className | |
}, | |
this.props.children | |
); | |
} | |
}]); | |
return PopoverAnimationVertical; | |
}(_react.Component); | |
PopoverAnimationVertical.propTypes = { | |
children: _react.PropTypes.node, | |
className: _react.PropTypes.string, | |
open: _react.PropTypes.bool.isRequired, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
targetOrigin: _propTypes2.default.origin, | |
zDepth: _propTypes2.default.zDepth | |
}; | |
PopoverAnimationVertical.defaultProps = { | |
style: {}, | |
zDepth: 1 | |
}; | |
PopoverAnimationVertical.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = PopoverAnimationVertical; | |
/***/ }, | |
/* 40 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _Tooltip = __webpack_require__(82); | |
var _Tooltip2 = _interopRequireDefault(_Tooltip); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var tableHeaderColumn = context.muiTheme.tableHeaderColumn; | |
return { | |
root: { | |
fontWeight: 'normal', | |
fontSize: 12, | |
paddingLeft: tableHeaderColumn.spacing, | |
paddingRight: tableHeaderColumn.spacing, | |
height: tableHeaderColumn.height, | |
textAlign: 'left', | |
whiteSpace: 'nowrap', | |
textOverflow: 'ellipsis', | |
color: tableHeaderColumn.textColor, | |
position: 'relative' | |
}, | |
tooltip: { | |
boxSizing: 'border-box', | |
marginTop: tableHeaderColumn.height / 2 | |
} | |
}; | |
} | |
var TableHeaderColumn = function (_Component) { | |
_inherits(TableHeaderColumn, _Component); | |
function TableHeaderColumn() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, TableHeaderColumn); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableHeaderColumn)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
hovered: false | |
}, _this.onMouseEnter = function () { | |
if (_this.props.tooltip !== undefined) _this.setState({ hovered: true }); | |
}, _this.onMouseLeave = function () { | |
if (_this.props.tooltip !== undefined) _this.setState({ hovered: false }); | |
}, _this.onClick = function (event) { | |
if (_this.props.onClick) _this.props.onClick(event, _this.props.columnNumber); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(TableHeaderColumn, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var children = _props.children; | |
var className = _props.className; | |
var columnNumber = _props.columnNumber; | |
var // eslint-disable-line no-unused-vars | |
onClick = _props.onClick; | |
var // eslint-disable-line no-unused-vars | |
style = _props.style; | |
var tooltip = _props.tooltip; | |
var tooltipStyle = _props.tooltipStyle; | |
var other = _objectWithoutProperties(_props, ['children', 'className', 'columnNumber', 'onClick', 'style', 'tooltip', 'tooltipStyle']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var handlers = { | |
onMouseEnter: this.onMouseEnter, | |
onMouseLeave: this.onMouseLeave, | |
onClick: this.onClick | |
}; | |
var tooltipNode = void 0; | |
if (tooltip !== undefined) { | |
tooltipNode = _react2.default.createElement(_Tooltip2.default, { | |
label: tooltip, | |
show: this.state.hovered, | |
style: (0, _simpleAssign2.default)(styles.tooltip, tooltipStyle) | |
}); | |
} | |
return _react2.default.createElement( | |
'th', | |
_extends({ | |
className: className, | |
style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) | |
}, handlers, other), | |
tooltipNode, | |
children | |
); | |
} | |
}]); | |
return TableHeaderColumn; | |
}(_react.Component); | |
TableHeaderColumn.propTypes = { | |
children: _react.PropTypes.node, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* Number to identify the header row. This property | |
* is automatically populated when used with TableHeader. | |
*/ | |
columnNumber: _react.PropTypes.number, | |
/** | |
* @ignore | |
* Callback function for click event. | |
*/ | |
onClick: _react.PropTypes.func, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The string to supply to the tooltip. If not | |
* string is supplied no tooltip will be shown. | |
*/ | |
tooltip: _react.PropTypes.string, | |
/** | |
* Additional styling that can be applied to the tooltip. | |
*/ | |
tooltipStyle: _react.PropTypes.object | |
}; | |
TableHeaderColumn.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = TableHeaderColumn; | |
/***/ }, | |
/* 41 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _reactDom = __webpack_require__(4); | |
var _reactDom2 = _interopRequireDefault(_reactDom); | |
var _events = __webpack_require__(47); | |
var _events2 = _interopRequireDefault(_events); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var isDescendant = function isDescendant(el, target) { | |
if (target !== null) { | |
return el === target || isDescendant(el, target.parentNode); | |
} | |
return false; | |
}; | |
var clickAwayEvents = ['mouseup', 'touchend']; | |
var bind = function bind(callback) { | |
return clickAwayEvents.forEach(function (event) { | |
return _events2.default.on(document, event, callback); | |
}); | |
}; | |
var unbind = function unbind(callback) { | |
return clickAwayEvents.forEach(function (event) { | |
return _events2.default.off(document, event, callback); | |
}); | |
}; | |
var ClickAwayListener = function (_Component) { | |
_inherits(ClickAwayListener, _Component); | |
function ClickAwayListener() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, ClickAwayListener); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ClickAwayListener)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClickAway = function (event) { | |
if (event.defaultPrevented) { | |
return; | |
} | |
var el = _reactDom2.default.findDOMNode(_this); | |
if (document.documentElement.contains(event.target) && !isDescendant(el, event.target)) { | |
_this.props.onClickAway(event); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(ClickAwayListener, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
if (this.props.onClickAway) { | |
bind(this.handleClickAway); | |
} | |
} | |
}, { | |
key: 'componentDidUpdate', | |
value: function componentDidUpdate(prevProps) { | |
if (prevProps.onClickAway !== this.props.onClickAway) { | |
unbind(this.handleClickAway); | |
if (this.props.onClickAway) { | |
bind(this.handleClickAway); | |
} | |
} | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
unbind(this.handleClickAway); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
return this.props.children; | |
} | |
}]); | |
return ClickAwayListener; | |
}(_react.Component); | |
ClickAwayListener.propTypes = { | |
children: _react.PropTypes.node, | |
onClickAway: _react.PropTypes.any | |
}; | |
exports.default = ClickAwayListener; | |
/***/ }, | |
/* 42 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactEventListener = __webpack_require__(13); | |
var _reactEventListener2 = _interopRequireDefault(_reactEventListener); | |
var _keycode = __webpack_require__(10); | |
var _keycode2 = _interopRequireDefault(_keycode); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _FocusRipple = __webpack_require__(43); | |
var _FocusRipple2 = _interopRequireDefault(_FocusRipple); | |
var _TouchRipple = __webpack_require__(83); | |
var _TouchRipple2 = _interopRequireDefault(_TouchRipple); | |
var _Paper = __webpack_require__(8); | |
var _Paper2 = _interopRequireDefault(_Paper); | |
var _warning = __webpack_require__(6); | |
var _warning2 = _interopRequireDefault(_warning); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var baseTheme = context.muiTheme.baseTheme; | |
return { | |
root: { | |
position: 'relative', | |
cursor: props.disabled ? 'default' : 'pointer', | |
overflow: 'visible', | |
display: 'table', | |
height: 'auto', | |
width: '100%' | |
}, | |
input: { | |
position: 'absolute', | |
cursor: props.disabled ? 'default' : 'pointer', | |
pointerEvents: 'all', | |
opacity: 0, | |
width: '100%', | |
height: '100%', | |
zIndex: 2, | |
left: 0, | |
boxSizing: 'border-box', | |
padding: 0, | |
margin: 0 | |
}, | |
controls: { | |
display: 'flex', | |
width: '100%', | |
height: '100%' | |
}, | |
label: { | |
float: 'left', | |
position: 'relative', | |
display: 'block', | |
width: 'calc(100% - 60px)', | |
lineHeight: '24px', | |
color: baseTheme.palette.textColor, | |
fontFamily: baseTheme.fontFamily | |
}, | |
wrap: { | |
transition: _transitions2.default.easeOut(), | |
float: 'left', | |
position: 'relative', | |
display: 'block', | |
flexShrink: 0, | |
width: 60 - baseTheme.spacing.desktopGutterLess, | |
marginRight: props.labelPosition === 'right' ? baseTheme.spacing.desktopGutterLess : 0, | |
marginLeft: props.labelPosition === 'left' ? baseTheme.spacing.desktopGutterLess : 0 | |
}, | |
ripple: { | |
color: props.rippleColor || baseTheme.palette.primary1Color, | |
height: '200%', | |
width: '200%', | |
top: -12, | |
left: -12 | |
} | |
}; | |
} | |
var EnhancedSwitch = function (_Component) { | |
_inherits(EnhancedSwitch, _Component); | |
function EnhancedSwitch() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, EnhancedSwitch); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(EnhancedSwitch)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
isKeyboardFocused: false | |
}, _this.handleChange = function (event) { | |
_this.tabPressed = false; | |
_this.setState({ | |
isKeyboardFocused: false | |
}); | |
var isInputChecked = _this.refs.checkbox.checked; | |
if (!_this.props.hasOwnProperty('checked') && _this.props.onParentShouldUpdate) { | |
_this.props.onParentShouldUpdate(isInputChecked); | |
} | |
if (_this.props.onSwitch) { | |
_this.props.onSwitch(event, isInputChecked); | |
} | |
}, _this.handleKeyDown = function (event) { | |
var code = (0, _keycode2.default)(event); | |
if (code === 'tab') { | |
_this.tabPressed = true; | |
} | |
if (_this.state.isKeyboardFocused && code === 'space') { | |
_this.handleChange(event); | |
} | |
}, _this.handleKeyUp = function (event) { | |
if (_this.state.isKeyboardFocused && (0, _keycode2.default)(event) === 'space') { | |
_this.handleChange(event); | |
} | |
}, _this.handleMouseDown = function (event) { | |
// only listen to left clicks | |
if (event.button === 0) { | |
_this.refs.touchRipple.start(event); | |
} | |
}, _this.handleMouseUp = function () { | |
_this.refs.touchRipple.end(); | |
}, _this.handleMouseLeave = function () { | |
_this.refs.touchRipple.end(); | |
}, _this.handleTouchStart = function (event) { | |
_this.refs.touchRipple.start(event); | |
}, _this.handleTouchEnd = function () { | |
_this.refs.touchRipple.end(); | |
}, _this.handleBlur = function (event) { | |
_this.setState({ | |
isKeyboardFocused: false | |
}); | |
if (_this.props.onBlur) { | |
_this.props.onBlur(event); | |
} | |
}, _this.handleFocus = function (event) { | |
// 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(event); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(EnhancedSwitch, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
var inputNode = this.refs.checkbox; | |
if ((!this.props.switched || inputNode.checked !== this.props.switched) && this.props.onParentShouldUpdate) { | |
this.props.onParentShouldUpdate(inputNode.checked); | |
} | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
var hasCheckedProp = nextProps.hasOwnProperty('checked'); | |
var hasToggledProp = nextProps.hasOwnProperty('toggled'); | |
var hasNewDefaultProp = nextProps.hasOwnProperty('defaultChecked') && nextProps.defaultChecked !== this.props.defaultChecked; | |
if (hasCheckedProp || hasToggledProp || hasNewDefaultProp) { | |
var switched = nextProps.checked || nextProps.toggled || nextProps.defaultChecked || false; | |
this.setState({ | |
switched: switched | |
}); | |
if (this.props.onParentShouldUpdate && switched !== this.props.switched) { | |
this.props.onParentShouldUpdate(switched); | |
} | |
} | |
} | |
}, { | |
key: 'isSwitched', | |
value: function isSwitched() { | |
return this.refs.checkbox.checked; | |
} | |
// no callback here because there is no event | |
}, { | |
key: 'setSwitched', | |
value: function setSwitched(newSwitchedValue) { | |
if (!this.props.hasOwnProperty('checked') || this.props.checked === false) { | |
if (this.props.onParentShouldUpdate) { | |
this.props.onParentShouldUpdate(newSwitchedValue); | |
} | |
this.refs.checkbox.checked = newSwitchedValue; | |
} else { | |
true ? (0, _warning2.default)(false, 'Cannot call set method while checked is defined as a property.') : void 0; | |
} | |
} | |
}, { | |
key: 'getValue', | |
value: function getValue() { | |
return this.refs.checkbox.value; | |
} | |
// Checkbox inputs only use SPACE to change their state. Using ENTER will | |
// update the ui but not the input. | |
/** | |
* 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. | |
*/ | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var name = _props.name; | |
var value = _props.value; | |
var iconStyle = _props.iconStyle; | |
var inputStyle = _props.inputStyle; | |
var inputType = _props.inputType; | |
var label = _props.label; | |
var labelStyle = _props.labelStyle; | |
var labelPosition = _props.labelPosition; | |
var onSwitch = _props.onSwitch; | |
var // eslint-disable-line no-unused-vars | |
onBlur = _props.onBlur; | |
var // eslint-disable-line no-unused-vars | |
onFocus = _props.onFocus; | |
var // eslint-disable-line no-unused-vars | |
onMouseUp = _props.onMouseUp; | |
var // eslint-disable-line no-unused-vars | |
onMouseDown = _props.onMouseDown; | |
var // eslint-disable-line no-unused-vars | |
onMouseLeave = _props.onMouseLeave; | |
var // eslint-disable-line no-unused-vars | |
onTouchStart = _props.onTouchStart; | |
var // eslint-disable-line no-unused-vars | |
onTouchEnd = _props.onTouchEnd; | |
var // eslint-disable-line no-unused-vars | |
disabled = _props.disabled; | |
var disableTouchRipple = _props.disableTouchRipple; | |
var disableFocusRipple = _props.disableFocusRipple; | |
var className = _props.className; | |
var rippleStyle = _props.rippleStyle; | |
var style = _props.style; | |
var switched = _props.switched; | |
var // eslint-disable-line no-unused-vars | |
switchElement = _props.switchElement; | |
var thumbStyle = _props.thumbStyle; | |
var trackStyle = _props.trackStyle; | |
var other = _objectWithoutProperties(_props, ['name', 'value', 'iconStyle', 'inputStyle', 'inputType', 'label', 'labelStyle', 'labelPosition', 'onSwitch', 'onBlur', 'onFocus', 'onMouseUp', 'onMouseDown', 'onMouseLeave', 'onTouchStart', 'onTouchEnd', 'disabled', 'disableTouchRipple', 'disableFocusRipple', 'className', 'rippleStyle', 'style', 'switched', 'switchElement', 'thumbStyle', 'trackStyle']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var wrapStyles = (0, _simpleAssign2.default)(styles.wrap, iconStyle); | |
var mergedRippleStyle = (0, _simpleAssign2.default)(styles.ripple, rippleStyle); | |
if (thumbStyle) { | |
wrapStyles.marginLeft /= 2; | |
wrapStyles.marginRight /= 2; | |
} | |
var labelElement = label && _react2.default.createElement( | |
'label', | |
{ style: prepareStyles((0, _simpleAssign2.default)(styles.label, labelStyle)) }, | |
label | |
); | |
var showTouchRipple = !disabled && !disableTouchRipple; | |
var showFocusRipple = !disabled && !disableFocusRipple; | |
var touchRipple = _react2.default.createElement(_TouchRipple2.default, { | |
ref: 'touchRipple', | |
key: 'touchRipple', | |
style: mergedRippleStyle, | |
color: mergedRippleStyle.color, | |
muiTheme: this.context.muiTheme, | |
centerRipple: true | |
}); | |
var focusRipple = _react2.default.createElement(_FocusRipple2.default, { | |
key: 'focusRipple', | |
innerStyle: mergedRippleStyle, | |
color: mergedRippleStyle.color, | |
muiTheme: this.context.muiTheme, | |
show: this.state.isKeyboardFocused | |
}); | |
var ripples = [showTouchRipple ? touchRipple : null, showFocusRipple ? focusRipple : null]; | |
var inputElement = _react2.default.createElement('input', _extends({}, other, { | |
ref: 'checkbox', | |
type: inputType, | |
style: prepareStyles((0, _simpleAssign2.default)(styles.input, inputStyle)), | |
name: name, | |
value: value, | |
disabled: disabled, | |
onBlur: this.handleBlur, | |
onFocus: this.handleFocus, | |
onChange: this.handleChange, | |
onMouseUp: showTouchRipple && this.handleMouseUp, | |
onMouseDown: showTouchRipple && this.handleMouseDown, | |
onMouseLeave: showTouchRipple && this.handleMouseLeave, | |
onTouchStart: showTouchRipple && this.handleTouchStart, | |
onTouchEnd: showTouchRipple && this.handleTouchEnd | |
})); | |
// If toggle component (indicated by whether the style includes thumb) manually lay out | |
// elements in order to nest ripple elements | |
var switchOrThumbElement = !thumbStyle ? _react2.default.createElement( | |
'div', | |
{ style: prepareStyles(wrapStyles) }, | |
switchElement, | |
ripples | |
) : _react2.default.createElement( | |
'div', | |
{ style: prepareStyles(wrapStyles) }, | |
_react2.default.createElement('div', { style: prepareStyles((0, _simpleAssign2.default)({}, trackStyle)) }), | |
_react2.default.createElement( | |
_Paper2.default, | |
{ style: thumbStyle, zDepth: 1, circle: true }, | |
' ', | |
ripples, | |
' ' | |
) | |
); | |
var elementsInOrder = labelPosition === 'right' ? _react2.default.createElement( | |
'div', | |
{ style: styles.controls }, | |
switchOrThumbElement, | |
labelElement | |
) : _react2.default.createElement( | |
'div', | |
{ style: styles.controls }, | |
labelElement, | |
switchOrThumbElement | |
); | |
return _react2.default.createElement( | |
'div', | |
{ ref: 'root', className: className, style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, | |
_react2.default.createElement(_reactEventListener2.default, { | |
target: 'window', | |
onKeyDown: this.handleKeyDown, | |
onKeyUp: this.handleKeyUp | |
}), | |
inputElement, | |
elementsInOrder | |
); | |
} | |
}]); | |
return EnhancedSwitch; | |
}(_react.Component); | |
EnhancedSwitch.propTypes = { | |
checked: _react.PropTypes.bool, | |
className: _react.PropTypes.string, | |
defaultChecked: _react.PropTypes.bool, | |
disableFocusRipple: _react.PropTypes.bool, | |
disableTouchRipple: _react.PropTypes.bool, | |
disabled: _react.PropTypes.bool, | |
iconStyle: _react.PropTypes.object, | |
inputStyle: _react.PropTypes.object, | |
inputType: _react.PropTypes.string.isRequired, | |
label: _react.PropTypes.node, | |
labelPosition: _react.PropTypes.oneOf(['left', 'right']), | |
labelStyle: _react.PropTypes.object, | |
name: _react.PropTypes.string, | |
onBlur: _react.PropTypes.func, | |
onFocus: _react.PropTypes.func, | |
onMouseDown: _react.PropTypes.func, | |
onMouseLeave: _react.PropTypes.func, | |
onMouseUp: _react.PropTypes.func, | |
onParentShouldUpdate: _react.PropTypes.func, | |
onSwitch: _react.PropTypes.func, | |
onTouchEnd: _react.PropTypes.func, | |
onTouchStart: _react.PropTypes.func, | |
rippleColor: _react.PropTypes.string, | |
rippleStyle: _react.PropTypes.object, | |
style: _react.PropTypes.object, | |
switchElement: _react.PropTypes.element.isRequired, | |
switched: _react.PropTypes.bool.isRequired, | |
thumbStyle: _react.PropTypes.object, | |
trackStyle: _react.PropTypes.object, | |
value: _react.PropTypes.string | |
}; | |
EnhancedSwitch.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = EnhancedSwitch; | |
/***/ }, | |
/* 43 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactDom = __webpack_require__(4); | |
var _reactDom2 = _interopRequireDefault(_reactDom); | |
var _shallowEqual = __webpack_require__(16); | |
var _shallowEqual2 = _interopRequireDefault(_shallowEqual); | |
var _autoPrefix = __webpack_require__(14); | |
var _autoPrefix2 = _interopRequireDefault(_autoPrefix); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _ScaleIn = __webpack_require__(190); | |
var _ScaleIn2 = _interopRequireDefault(_ScaleIn); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var pulsateDuration = 750; | |
var FocusRipple = function (_Component) { | |
_inherits(FocusRipple, _Component); | |
function FocusRipple() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, FocusRipple); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(FocusRipple)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.pulsate = function () { | |
var innerCircle = _reactDom2.default.findDOMNode(_this.refs.innerCircle); | |
if (!innerCircle) return; | |
var startScale = 'scale(1)'; | |
var endScale = 'scale(0.85)'; | |
var currentScale = innerCircle.style.transform || startScale; | |
var nextScale = currentScale === startScale ? endScale : startScale; | |
_autoPrefix2.default.set(innerCircle.style, 'transform', nextScale); | |
_this.timeout = setTimeout(_this.pulsate, pulsateDuration); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(FocusRipple, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
if (this.props.show) { | |
this.setRippleSize(); | |
this.pulsate(); | |
} | |
} | |
}, { | |
key: 'shouldComponentUpdate', | |
value: function shouldComponentUpdate(nextProps, nextState) { | |
return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.state, nextState); | |
} | |
}, { | |
key: 'componentDidUpdate', | |
value: function componentDidUpdate() { | |
if (this.props.show) { | |
this.setRippleSize(); | |
this.pulsate(); | |
} else { | |
if (this.timeout) clearTimeout(this.timeout); | |
} | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
clearTimeout(this.timeout); | |
} | |
}, { | |
key: 'getRippleElement', | |
value: function getRippleElement(props) { | |
var color = props.color; | |
var innerStyle = props.innerStyle; | |
var opacity = props.opacity; | |
var _context$muiTheme = this.context.muiTheme; | |
var prepareStyles = _context$muiTheme.prepareStyles; | |
var ripple = _context$muiTheme.ripple; | |
var innerStyles = (0, _simpleAssign2.default)({ | |
position: 'absolute', | |
height: '100%', | |
width: '100%', | |
borderRadius: '50%', | |
opacity: opacity ? opacity : 0.16, | |
backgroundColor: color || ripple.color, | |
transition: _transitions2.default.easeOut(pulsateDuration + 'ms', 'transform', null, _transitions2.default.easeInOutFunction) | |
}, innerStyle); | |
return _react2.default.createElement('div', { ref: 'innerCircle', style: prepareStyles((0, _simpleAssign2.default)({}, innerStyles)) }); | |
} | |
}, { | |
key: 'setRippleSize', | |
value: function setRippleSize() { | |
var el = _reactDom2.default.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'; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var show = _props.show; | |
var style = _props.style; | |
var mergedRootStyles = (0, _simpleAssign2.default)({ | |
height: '100%', | |
width: '100%', | |
position: 'absolute', | |
top: 0, | |
left: 0 | |
}, style); | |
var ripple = show ? this.getRippleElement(this.props) : null; | |
return _react2.default.createElement( | |
_ScaleIn2.default, | |
{ | |
maxScale: 0.85, | |
style: mergedRootStyles | |
}, | |
ripple | |
); | |
} | |
}]); | |
return FocusRipple; | |
}(_react.Component); | |
FocusRipple.propTypes = { | |
color: _react.PropTypes.string, | |
innerStyle: _react.PropTypes.object, | |
opacity: _react.PropTypes.number, | |
show: _react.PropTypes.bool, | |
style: _react.PropTypes.object | |
}; | |
FocusRipple.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = FocusRipple; | |
/***/ }, | |
/* 44 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactAddonsTransitionGroup = __webpack_require__(26); | |
var _reactAddonsTransitionGroup2 = _interopRequireDefault(_reactAddonsTransitionGroup); | |
var _SlideInChild = __webpack_require__(192); | |
var _SlideInChild2 = _interopRequireDefault(_SlideInChild); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var SlideIn = function (_Component) { | |
_inherits(SlideIn, _Component); | |
function SlideIn() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, SlideIn); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(SlideIn)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.getLeaveDirection = function () { | |
return _this.props.direction; | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(SlideIn, [{ | |
key: 'render', | |
value: function render() { | |
var _this2 = 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 prepareStyles = this.context.muiTheme.prepareStyles; | |
var mergedRootStyles = (0, _simpleAssign2.default)({}, { | |
position: 'relative', | |
overflow: 'hidden', | |
height: '100%' | |
}, style); | |
var newChildren = _react2.default.Children.map(children, function (child) { | |
return _react2.default.createElement( | |
_SlideInChild2.default, | |
{ | |
key: child.key, | |
direction: direction, | |
enterDelay: enterDelay, | |
getLeaveDirection: _this2.getLeaveDirection, | |
style: childStyle | |
}, | |
child | |
); | |
}, this); | |
return _react2.default.createElement( | |
_reactAddonsTransitionGroup2.default, | |
_extends({}, other, { | |
style: prepareStyles(mergedRootStyles), | |
component: 'div' | |
}), | |
newChildren | |
); | |
} | |
}]); | |
return SlideIn; | |
}(_react.Component); | |
SlideIn.propTypes = { | |
childStyle: _react.PropTypes.object, | |
children: _react.PropTypes.node, | |
direction: _react.PropTypes.oneOf(['left', 'right', 'up', 'down']), | |
enterDelay: _react.PropTypes.number, | |
style: _react.PropTypes.object | |
}; | |
SlideIn.defaultProps = { | |
enterDelay: 0, | |
direction: 'left' | |
}; | |
SlideIn.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = SlideIn; | |
/***/ }, | |
/* 45 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = getMuiTheme; | |
var _lodash = __webpack_require__(92); | |
var _lodash2 = _interopRequireDefault(_lodash); | |
var _colorManipulator = __webpack_require__(12); | |
var _lightBaseTheme = __webpack_require__(84); | |
var _lightBaseTheme2 = _interopRequireDefault(_lightBaseTheme); | |
var _zIndex = __webpack_require__(86); | |
var _zIndex2 = _interopRequireDefault(_zIndex); | |
var _autoprefixer = __webpack_require__(211); | |
var _autoprefixer2 = _interopRequireDefault(_autoprefixer); | |
var _callOnce = __webpack_require__(212); | |
var _callOnce2 = _interopRequireDefault(_callOnce); | |
var _rtl = __webpack_require__(213); | |
var _rtl2 = _interopRequireDefault(_rtl); | |
var _compose = __webpack_require__(264); | |
var _compose2 = _interopRequireDefault(_compose); | |
var _typography = __webpack_require__(85); | |
var _typography2 = _interopRequireDefault(_typography); | |
var _colors = __webpack_require__(23); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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); } } | |
/** | |
* Get the MUI theme corresponding to a base theme. | |
* It's possible to override the computed theme values | |
* by providing a second argument. The calculated | |
* theme will be deeply merged with the second argument. | |
*/ | |
function getMuiTheme(muiTheme) { | |
for (var _len = arguments.length, more = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | |
more[_key - 1] = arguments[_key]; | |
} | |
muiTheme = _lodash2.default.apply(undefined, [{ | |
zIndex: _zIndex2.default, | |
isRtl: false, | |
userAgent: undefined | |
}, _lightBaseTheme2.default, muiTheme].concat(more)); | |
var _muiTheme = muiTheme; | |
var spacing = _muiTheme.spacing; | |
var fontFamily = _muiTheme.fontFamily; | |
var palette = _muiTheme.palette; | |
var baseTheme = { spacing: spacing, fontFamily: fontFamily, palette: palette }; | |
muiTheme = (0, _lodash2.default)({ | |
appBar: { | |
color: palette.primary1Color, | |
textColor: palette.alternateTextColor, | |
height: spacing.desktopKeylineIncrement, | |
titleFontWeight: _typography2.default.fontWeightNormal, | |
padding: spacing.desktopGutter | |
}, | |
avatar: { | |
color: palette.canvasColor, | |
backgroundColor: (0, _colorManipulator.emphasize)(palette.canvasColor, 0.26), | |
borderColor: 'rgba(128, 128, 128, 0.15)' | |
}, | |
badge: { | |
color: palette.alternateTextColor, | |
textColor: palette.textColor, | |
primaryColor: palette.accent1Color, | |
primaryTextColor: palette.alternateTextColor, | |
secondaryColor: palette.primary1Color, | |
secondaryTextColor: palette.alternateTextColor, | |
fontWeight: _typography2.default.fontWeightMedium | |
}, | |
button: { | |
height: 36, | |
minWidth: 88, | |
iconButtonSize: spacing.iconSize * 2 | |
}, | |
card: { | |
titleColor: (0, _colorManipulator.fade)(palette.textColor, 0.87), | |
subtitleColor: (0, _colorManipulator.fade)(palette.textColor, 0.54), | |
fontWeight: _typography2.default.fontWeightMedium | |
}, | |
cardMedia: { | |
color: _colors.darkWhite, | |
overlayContentBackground: _colors.lightBlack, | |
titleColor: _colors.darkWhite, | |
subtitleColor: _colors.lightWhite | |
}, | |
cardText: { | |
textColor: palette.textColor | |
}, | |
checkbox: { | |
boxColor: palette.textColor, | |
checkedColor: palette.primary1Color, | |
requiredColor: palette.primary1Color, | |
disabledColor: palette.disabledColor, | |
labelColor: palette.textColor, | |
labelDisabledColor: palette.disabledColor | |
}, | |
chip: { | |
backgroundColor: (0, _colorManipulator.emphasize)(palette.canvasColor, 0.12), | |
deleteIconColor: (0, _colorManipulator.fade)(palette.textColor, 0.26), | |
textColor: (0, _colorManipulator.fade)(palette.textColor, 0.87), | |
fontSize: 14, | |
fontWeight: _typography2.default.fontWeightNormal, | |
shadow: '0 1px 6px ' + (0, _colorManipulator.fade)(palette.shadowColor, 0.12) + ',\n 0 1px 4px ' + (0, _colorManipulator.fade)(palette.shadowColor, 0.12) | |
}, | |
datePicker: { | |
color: palette.primary1Color, | |
textColor: palette.alternateTextColor, | |
calendarTextColor: palette.textColor, | |
selectColor: palette.primary2Color, | |
selectTextColor: palette.alternateTextColor, | |
calendarYearBackgroundColor: _colors.white | |
}, | |
dialog: { | |
titleFontSize: 22, | |
bodyFontSize: 16, | |
bodyColor: (0, _colorManipulator.fade)(palette.textColor, 0.6) | |
}, | |
dropDownMenu: { | |
accentColor: palette.borderColor | |
}, | |
enhancedButton: { | |
tapHighlightColor: _colors.transparent | |
}, | |
flatButton: { | |
color: _colors.transparent, | |
buttonFilterColor: '#999999', | |
disabledTextColor: (0, _colorManipulator.fade)(palette.textColor, 0.3), | |
textColor: palette.textColor, | |
primaryTextColor: palette.primary1Color, | |
secondaryTextColor: palette.accent1Color, | |
fontSize: _typography2.default.fontStyleButtonFontSize, | |
fontWeight: _typography2.default.fontWeightMedium | |
}, | |
floatingActionButton: { | |
buttonSize: 56, | |
miniSize: 40, | |
color: palette.primary1Color, | |
iconColor: palette.alternateTextColor, | |
secondaryColor: palette.accent1Color, | |
secondaryIconColor: palette.alternateTextColor, | |
disabledTextColor: palette.disabledColor, | |
disabledColor: (0, _colorManipulator.emphasize)(palette.canvasColor, 0.12) | |
}, | |
gridTile: { | |
textColor: _colors.white | |
}, | |
icon: { | |
color: palette.canvasColor, | |
backgroundColor: palette.primary1Color | |
}, | |
inkBar: { | |
backgroundColor: palette.accent1Color | |
}, | |
drawer: { | |
width: spacing.desktopKeylineIncrement * 4, | |
color: palette.canvasColor | |
}, | |
listItem: { | |
nestedLevelDepth: 18, | |
secondaryTextColor: _colors.lightBlack, | |
leftIconColor: _colors.grey600, | |
rightIconColor: _colors.grey600 | |
}, | |
menu: { | |
backgroundColor: palette.canvasColor, | |
containerBackgroundColor: palette.canvasColor | |
}, | |
menuItem: { | |
dataHeight: 32, | |
height: 48, | |
hoverColor: (0, _colorManipulator.fade)(palette.textColor, 0.035), | |
padding: spacing.desktopGutter, | |
selectedTextColor: palette.accent1Color, | |
rightIconDesktopFill: _colors.grey600 | |
}, | |
menuSubheader: { | |
padding: spacing.desktopGutter, | |
borderColor: palette.borderColor, | |
textColor: palette.primary1Color | |
}, | |
overlay: { | |
backgroundColor: _colors.lightBlack | |
}, | |
paper: { | |
color: palette.textColor, | |
backgroundColor: palette.canvasColor, | |
zDepthShadows: [[1, 6, 0.12, 1, 4, 0.12], [3, 10, 0.16, 3, 10, 0.23], [10, 30, 0.19, 6, 10, 0.23], [14, 45, 0.25, 10, 18, 0.22], [19, 60, 0.30, 15, 20, 0.22]].map(function (d) { | |
return '0 ' + d[0] + 'px ' + d[1] + 'px ' + (0, _colorManipulator.fade)(palette.shadowColor, d[2]) + ',\n 0 ' + d[3] + 'px ' + d[4] + 'px ' + (0, _colorManipulator.fade)(palette.shadowColor, d[5]); | |
}) | |
}, | |
radioButton: { | |
borderColor: palette.textColor, | |
backgroundColor: palette.alternateTextColor, | |
checkedColor: palette.primary1Color, | |
requiredColor: palette.primary1Color, | |
disabledColor: palette.disabledColor, | |
size: 24, | |
labelColor: palette.textColor, | |
labelDisabledColor: palette.disabledColor | |
}, | |
raisedButton: { | |
color: palette.alternateTextColor, | |
textColor: palette.textColor, | |
primaryColor: palette.primary1Color, | |
primaryTextColor: palette.alternateTextColor, | |
secondaryColor: palette.accent1Color, | |
secondaryTextColor: palette.alternateTextColor, | |
disabledColor: (0, _colorManipulator.darken)(palette.alternateTextColor, 0.1), | |
disabledTextColor: (0, _colorManipulator.fade)(palette.textColor, 0.3), | |
fontSize: _typography2.default.fontStyleButtonFontSize, | |
fontWeight: _typography2.default.fontWeightMedium | |
}, | |
refreshIndicator: { | |
strokeColor: palette.borderColor, | |
loadingStrokeColor: palette.primary1Color | |
}, | |
ripple: { | |
color: (0, _colorManipulator.fade)(palette.textColor, 0.87) | |
}, | |
slider: { | |
trackSize: 2, | |
trackColor: palette.primary3Color, | |
trackColorSelected: palette.accent3Color, | |
handleSize: 12, | |
handleSizeDisabled: 8, | |
handleSizeActive: 18, | |
handleColorZero: palette.primary3Color, | |
handleFillColor: palette.alternateTextColor, | |
selectionColor: palette.primary1Color, | |
rippleColor: palette.primary1Color | |
}, | |
snackbar: { | |
textColor: palette.alternateTextColor, | |
backgroundColor: palette.textColor, | |
actionColor: palette.accent1Color | |
}, | |
subheader: { | |
color: (0, _colorManipulator.fade)(palette.textColor, 0.54), | |
fontWeight: _typography2.default.fontWeightMedium | |
}, | |
stepper: { | |
backgroundColor: 'transparent', | |
hoverBackgroundColor: (0, _colorManipulator.fade)(_colors.black, 0.06), | |
iconColor: palette.primary1Color, | |
hoveredIconColor: _colors.grey700, | |
inactiveIconColor: _colors.grey500, | |
textColor: (0, _colorManipulator.fade)(_colors.black, 0.87), | |
disabledTextColor: (0, _colorManipulator.fade)(_colors.black, 0.26), | |
connectorLineColor: _colors.grey400 | |
}, | |
table: { | |
backgroundColor: palette.canvasColor | |
}, | |
tableFooter: { | |
borderColor: palette.borderColor, | |
textColor: palette.accent3Color | |
}, | |
tableHeader: { | |
borderColor: palette.borderColor | |
}, | |
tableHeaderColumn: { | |
textColor: palette.accent3Color, | |
height: 56, | |
spacing: 24 | |
}, | |
tableRow: { | |
hoverColor: palette.accent2Color, | |
stripeColor: (0, _colorManipulator.fade)((0, _colorManipulator.lighten)(palette.primary1Color, 0.5), 0.4), | |
selectedColor: palette.borderColor, | |
textColor: palette.textColor, | |
borderColor: palette.borderColor, | |
height: 48 | |
}, | |
tableRowColumn: { | |
height: 48, | |
spacing: 24 | |
}, | |
tabs: { | |
backgroundColor: palette.primary1Color, | |
textColor: (0, _colorManipulator.fade)(palette.alternateTextColor, 0.7), | |
selectedTextColor: palette.alternateTextColor | |
}, | |
textField: { | |
textColor: palette.textColor, | |
hintColor: palette.disabledColor, | |
floatingLabelColor: palette.textColor, | |
disabledTextColor: palette.disabledColor, | |
errorColor: _colors.red500, | |
focusColor: palette.primary1Color, | |
backgroundColor: 'transparent', | |
borderColor: palette.borderColor | |
}, | |
timePicker: { | |
color: palette.alternateTextColor, | |
textColor: palette.accent3Color, | |
accentColor: palette.primary1Color, | |
clockColor: palette.textColor, | |
clockCircleColor: palette.clockCircleColor, | |
headerColor: palette.pickerHeaderColor || palette.primary1Color, | |
selectColor: palette.primary2Color, | |
selectTextColor: palette.alternateTextColor | |
}, | |
toggle: { | |
thumbOnColor: palette.primary1Color, | |
thumbOffColor: palette.accent2Color, | |
thumbDisabledColor: palette.borderColor, | |
thumbRequiredColor: palette.primary1Color, | |
trackOnColor: (0, _colorManipulator.fade)(palette.primary1Color, 0.5), | |
trackOffColor: palette.primary3Color, | |
trackDisabledColor: palette.primary3Color, | |
labelColor: palette.textColor, | |
labelDisabledColor: palette.disabledColor, | |
trackRequiredColor: (0, _colorManipulator.fade)(palette.primary1Color, 0.5) | |
}, | |
toolbar: { | |
color: (0, _colorManipulator.fade)(palette.textColor, 0.54), | |
hoverColor: (0, _colorManipulator.fade)(palette.textColor, 0.87), | |
backgroundColor: (0, _colorManipulator.darken)(palette.accent2Color, 0.05), | |
height: 56, | |
titleFontSize: 20, | |
iconColor: (0, _colorManipulator.fade)(palette.textColor, 0.4), | |
separatorColor: (0, _colorManipulator.fade)(palette.textColor, 0.175), | |
menuHoverColor: (0, _colorManipulator.fade)(palette.textColor, 0.1) | |
}, | |
tooltip: { | |
color: _colors.white, | |
rippleBackgroundColor: _colors.grey700 | |
} | |
}, muiTheme, { | |
baseTheme: baseTheme, // To provide backward compatibility. | |
rawTheme: baseTheme }); | |
// To provide backward compatibility. | |
var transformers = [_autoprefixer2.default, _rtl2.default, _callOnce2.default].map(function (t) { | |
return t(muiTheme); | |
}).filter(function (t) { | |
return t; | |
}); | |
muiTheme.prepareStyles = _compose2.default.apply(undefined, _toConsumableArray(transformers)); | |
return muiTheme; | |
} | |
/***/ }, | |
/* 46 */ | |
/***/ function(module, exports) { | |
"use strict"; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = { | |
iconSize: 24, | |
desktopGutter: 24, | |
desktopGutterMore: 32, | |
desktopGutterLess: 16, | |
desktopGutterMini: 8, | |
desktopKeylineIncrement: 64, | |
desktopDropDownMenuItemHeight: 32, | |
desktopDropDownMenuFontSize: 15, | |
desktopDrawerMenuItemHeight: 48, | |
desktopSubheaderHeight: 48, | |
desktopToolbarHeight: 56 | |
}; | |
/***/ }, | |
/* 47 */ | |
/***/ function(module, exports) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = { | |
once: function once(el, type, callback) { | |
var typeArray = type ? type.split(' ') : []; | |
var recursiveFunction = function recursiveFunction(event) { | |
event.target.removeEventListener(event.type, recursiveFunction); | |
return callback(event); | |
}; | |
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(event) { | |
return ['keydown', 'keypress', 'keyup'].indexOf(event.type) !== -1; | |
} | |
}; | |
/***/ }, | |
/* 48 */ | |
/***/ function(module, exports, __webpack_require__) { | |
/** | |
* Copyright 2014-2015, Facebook, Inc. | |
* All rights reserved. | |
* | |
* This source code is licensed under the BSD-style license found in the | |
* LICENSE file in the root directory of this source tree. An additional grant | |
* of patent rights can be found in the PATENTS file in the same directory. | |
* | |
*/ | |
'use strict'; | |
var emptyFunction = __webpack_require__(88); | |
/** | |
* Similar to invariant but only logs a warning if the condition is not met. | |
* This can be used to log issues in development environments in critical | |
* paths. Removing the logging code for production environments will keep the | |
* same logic and follow the same code paths. | |
*/ | |
var warning = emptyFunction; | |
if (true) { | |
warning = function warning(condition, format) { | |
for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { | |
args[_key - 2] = arguments[_key]; | |
} | |
if (format === undefined) { | |
throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); | |
} | |
if (format.indexOf('Failed Composite propType: ') === 0) { | |
return; // Ignore CompositeComponent proptype check. | |
} | |
if (!condition) { | |
var argIndex = 0; | |
var message = 'Warning: ' + format.replace(/%s/g, function () { | |
return args[argIndex++]; | |
}); | |
if (typeof console !== 'undefined') { | |
console.error(message); | |
} | |
try { | |
// --- Welcome to debugging React --- | |
// This error was thrown as a convenience so that you can use this stack | |
// to find the callsite that caused this warning to fire. | |
throw new Error(message); | |
} catch (x) {} | |
} | |
}; | |
} | |
module.exports = warning; | |
/***/ }, | |
/* 49 */ | |
/***/ function(module, exports) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = function (value) { | |
if (Array.isArray(value)) value = value.join(','); | |
return value.match(/-webkit-|-moz-|-ms-/) !== null; | |
}; | |
module.exports = exports['default']; | |
/***/ }, | |
/* 50 */ | |
/***/ function(module, exports, __webpack_require__) { | |
/** | |
* Copyright 2013-present, Facebook, Inc. | |
* All rights reserved. | |
* | |
* This source code is licensed under the BSD-style license found in the | |
* LICENSE file in the root directory of this source tree. An additional grant | |
* of patent rights can be found in the PATENTS file in the same directory. | |
* | |
* @providesModule EventConstants | |
*/ | |
'use strict'; | |
var keyMirror = __webpack_require__(216); | |
var PropagationPhases = keyMirror({ bubbled: null, captured: null }); | |
/** | |
* Types of raw signals from the browser caught at the top level. | |
*/ | |
var topLevelTypes = keyMirror({ | |
topAbort: null, | |
topAnimationEnd: null, | |
topAnimationIteration: null, | |
topAnimationStart: null, | |
topBlur: null, | |
topCanPlay: null, | |
topCanPlayThrough: 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, | |
topDurationChange: null, | |
topEmptied: null, | |
topEncrypted: null, | |
topEnded: null, | |
topError: null, | |
topFocus: null, | |
topInput: null, | |
topInvalid: null, | |
topKeyDown: null, | |
topKeyPress: null, | |
topKeyUp: null, | |
topLoad: null, | |
topLoadedData: null, | |
topLoadedMetadata: null, | |
topLoadStart: null, | |
topMouseDown: null, | |
topMouseMove: null, | |
topMouseOut: null, | |
topMouseOver: null, | |
topMouseUp: null, | |
topPaste: null, | |
topPause: null, | |
topPlay: null, | |
topPlaying: null, | |
topProgress: null, | |
topRateChange: null, | |
topReset: null, | |
topScroll: null, | |
topSeeked: null, | |
topSeeking: null, | |
topSelectionChange: null, | |
topStalled: null, | |
topSubmit: null, | |
topSuspend: null, | |
topTextInput: null, | |
topTimeUpdate: null, | |
topTouchCancel: null, | |
topTouchEnd: null, | |
topTouchMove: null, | |
topTouchStart: null, | |
topTransitionEnd: null, | |
topVolumeChange: null, | |
topWaiting: null, | |
topWheel: null | |
}); | |
var EventConstants = { | |
topLevelTypes: topLevelTypes, | |
PropagationPhases: PropagationPhases | |
}; | |
module.exports = EventConstants; | |
/***/ }, | |
/* 51 */ | |
/***/ function(module, exports, __webpack_require__) { | |
/** | |
* Copyright 2013-present, Facebook, Inc. | |
* All rights reserved. | |
* | |
* This source code is licensed under the BSD-style license found in the | |
* LICENSE file in the root directory of this source tree. An additional grant | |
* of patent rights can be found in the PATENTS file in the same directory. | |
* | |
* @providesModule EventPluginUtils | |
*/ | |
'use strict'; | |
var _prodInvariant = __webpack_require__(25); | |
var EventConstants = __webpack_require__(50); | |
var ReactErrorUtils = __webpack_require__(94); | |
var invariant = __webpack_require__(19); | |
var warning = __webpack_require__(48); | |
/** | |
* Injected dependencies: | |
*/ | |
/** | |
* - `ComponentTree`: [required] Module that can convert between React instances | |
* and actual node references. | |
*/ | |
var ComponentTree; | |
var TreeTraversal; | |
var injection = { | |
injectComponentTree: function (Injected) { | |
ComponentTree = Injected; | |
if (true) { | |
true ? warning(Injected && Injected.getNodeFromInstance && Injected.getInstanceFromNode, 'EventPluginUtils.injection.injectComponentTree(...): Injected ' + 'module is missing getNodeFromInstance or getInstanceFromNode.') : void 0; | |
} | |
}, | |
injectTreeTraversal: function (Injected) { | |
TreeTraversal = Injected; | |
if (true) { | |
true ? warning(Injected && Injected.isAncestor && Injected.getLowestCommonAncestor, 'EventPluginUtils.injection.injectTreeTraversal(...): Injected ' + 'module is missing isAncestor or getLowestCommonAncestor.') : void 0; | |
} | |
} | |
}; | |
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 (true) { | |
validateEventDispatches = function (event) { | |
var dispatchListeners = event._dispatchListeners; | |
var dispatchInstances = event._dispatchInstances; | |
var listenersIsArr = Array.isArray(dispatchListeners); | |
var listenersLen = listenersIsArr ? dispatchListeners.length : dispatchListeners ? 1 : 0; | |
var instancesIsArr = Array.isArray(dispatchInstances); | |
var instancesLen = instancesIsArr ? dispatchInstances.length : dispatchInstances ? 1 : 0; | |
true ? warning(instancesIsArr === listenersIsArr && instancesLen === listenersLen, 'EventPluginUtils: Invalid `event`.') : void 0; | |
}; | |
} | |
/** | |
* Dispatch the event to the listener. | |
* @param {SyntheticEvent} event SyntheticEvent to handle | |
* @param {boolean} simulated If the event is simulated (changes exn behavior) | |
* @param {function} listener Application-level callback | |
* @param {*} inst Internal component instance | |
*/ | |
function executeDispatch(event, simulated, listener, inst) { | |
var type = event.type || 'unknown-event'; | |
event.currentTarget = EventPluginUtils.getNodeFromInstance(inst); | |
if (simulated) { | |
ReactErrorUtils.invokeGuardedCallbackWithCatch(type, listener, event); | |
} else { | |
ReactErrorUtils.invokeGuardedCallback(type, listener, event); | |
} | |
event.currentTarget = null; | |
} | |
/** | |
* Standard/simple iteration through an event's collected dispatches. | |
*/ | |
function executeDispatchesInOrder(event, simulated) { | |
var dispatchListeners = event._dispatchListeners; | |
var dispatchInstances = event._dispatchInstances; | |
if (true) { | |
validateEventDispatches(event); | |
} | |
if (Array.isArray(dispatchListeners)) { | |
for (var i = 0; i < dispatchListeners.length; i++) { | |
if (event.isPropagationStopped()) { | |
break; | |
} | |
// Listeners and Instances are two parallel arrays that are always in sync. | |
executeDispatch(event, simulated, dispatchListeners[i], dispatchInstances[i]); | |
} | |
} else if (dispatchListeners) { | |
executeDispatch(event, simulated, dispatchListeners, dispatchInstances); | |
} | |
event._dispatchListeners = null; | |
event._dispatchInstances = null; | |
} | |
/** | |
* Standard/simple iteration through an event's collected dispatches, but stops | |
* at the first dispatch execution returning true, and returns that id. | |
* | |
* @return {?string} id of the first dispatch execution who's listener returns | |
* true, or null if no listener returned true. | |
*/ | |
function executeDispatchesInOrderStopAtTrueImpl(event) { | |
var dispatchListeners = event._dispatchListeners; | |
var dispatchInstances = event._dispatchInstances; | |
if (true) { | |
validateEventDispatches(event); | |
} | |
if (Array.isArray(dispatchListeners)) { | |
for (var i = 0; i < dispatchListeners.length; i++) { | |
if (event.isPropagationStopped()) { | |
break; | |
} | |
// Listeners and Instances are two parallel arrays that are always in sync. | |
if (dispatchListeners[i](event, dispatchInstances[i])) { | |
return dispatchInstances[i]; | |
} | |
} | |
} else if (dispatchListeners) { | |
if (dispatchListeners(event, dispatchInstances)) { | |
return dispatchInstances; | |
} | |
} | |
return null; | |
} | |
/** | |
* @see executeDispatchesInOrderStopAtTrueImpl | |
*/ | |
function executeDispatchesInOrderStopAtTrue(event) { | |
var ret = executeDispatchesInOrderStopAtTrueImpl(event); | |
event._dispatchInstances = null; | |
event._dispatchListeners = null; | |
return ret; | |
} | |
/** | |
* Execution of a "direct" dispatch - there must be at most one dispatch | |
* accumulated on the event or it is considered an error. It doesn't really make | |
* sense for an event with multiple dispatches (bubbled) to keep track of the | |
* return values at each dispatch execution, but it does tend to make sense when | |
* dealing with "direct" dispatches. | |
* | |
* @return {*} The return value of executing the single dispatch. | |
*/ | |
function executeDirectDispatch(event) { | |
if (true) { | |
validateEventDispatches(event); | |
} | |
var dispatchListener = event._dispatchListeners; | |
var dispatchInstance = event._dispatchInstances; | |
!!Array.isArray(dispatchListener) ? true ? invariant(false, 'executeDirectDispatch(...): Invalid `event`.') : _prodInvariant('103') : void 0; | |
event.currentTarget = dispatchListener ? EventPluginUtils.getNodeFromInstance(dispatchInstance) : null; | |
var res = dispatchListener ? dispatchListener(event) : null; | |
event.currentTarget = null; | |
event._dispatchListeners = null; | |
event._dispatchInstances = null; | |
return res; | |
} | |
/** | |
* @param {SyntheticEvent} event | |
* @return {boolean} True iff number of dispatches accumulated is greater than 0. | |
*/ | |
function hasDispatches(event) { | |
return !!event._dispatchListeners; | |
} | |
/** | |
* General utilities that are useful in creating custom Event Plugins. | |
*/ | |
var EventPluginUtils = { | |
isEndish: isEndish, | |
isMoveish: isMoveish, | |
isStartish: isStartish, | |
executeDirectDispatch: executeDirectDispatch, | |
executeDispatchesInOrder: executeDispatchesInOrder, | |
executeDispatchesInOrderStopAtTrue: executeDispatchesInOrderStopAtTrue, | |
hasDispatches: hasDispatches, | |
getInstanceFromNode: function (node) { | |
return ComponentTree.getInstanceFromNode(node); | |
}, | |
getNodeFromInstance: function (node) { | |
return ComponentTree.getNodeFromInstance(node); | |
}, | |
isAncestor: function (a, b) { | |
return TreeTraversal.isAncestor(a, b); | |
}, | |
getLowestCommonAncestor: function (a, b) { | |
return TreeTraversal.getLowestCommonAncestor(a, b); | |
}, | |
getParentInstance: function (inst) { | |
return TreeTraversal.getParentInstance(inst); | |
}, | |
traverseTwoPhase: function (target, fn, arg) { | |
return TreeTraversal.traverseTwoPhase(target, fn, arg); | |
}, | |
traverseEnterLeave: function (from, to, fn, argFrom, argTo) { | |
return TreeTraversal.traverseEnterLeave(from, to, fn, argFrom, argTo); | |
}, | |
injection: injection | |
}; | |
module.exports = EventPluginUtils; | |
/***/ }, | |
/* 52 */ | |
/***/ function(module, exports) { | |
module.exports = function(module) { | |
if(!module.webpackPolyfill) { | |
module.deprecate = function() {}; | |
module.paths = []; | |
// module.parent = undefined by default | |
module.children = []; | |
module.webpackPolyfill = 1; | |
} | |
return module; | |
} | |
/***/ }, | |
/* 53 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _Avatar = __webpack_require__(102); | |
var _Avatar2 = _interopRequireDefault(_Avatar); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _Avatar2.default; | |
/***/ }, | |
/* 54 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles() { | |
return { | |
root: { | |
padding: 8, | |
position: 'relative' | |
}, | |
action: { | |
marginRight: 8 | |
} | |
}; | |
} | |
var CardActions = function (_Component) { | |
_inherits(CardActions, _Component); | |
function CardActions() { | |
_classCallCheck(this, CardActions); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(CardActions).apply(this, arguments)); | |
} | |
_createClass(CardActions, [{ | |
key: 'render', | |
value: function render() { | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var children = _react2.default.Children.map(this.props.children, function (child) { | |
if (_react2.default.isValidElement(child)) { | |
return _react2.default.cloneElement(child, { | |
style: (0, _simpleAssign2.default)({}, styles.action, child.props.style) | |
}); | |
} | |
}); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, this.props, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, this.props.style)) }), | |
children | |
); | |
} | |
}]); | |
return CardActions; | |
}(_react.Component); | |
CardActions.propTypes = { | |
/** | |
* If true, a click on this card component expands the card. | |
*/ | |
actAsExpander: _react.PropTypes.bool, | |
/** | |
* Can be used to render elements inside the Card Action. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* If true, this card component is expandable. | |
*/ | |
expandable: _react.PropTypes.bool, | |
/** | |
* If true, this card component will include a button to expand the card. | |
*/ | |
showExpandableButton: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
CardActions.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = CardActions; | |
/***/ }, | |
/* 55 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _keyboardArrowUp = __webpack_require__(199); | |
var _keyboardArrowUp2 = _interopRequireDefault(_keyboardArrowUp); | |
var _keyboardArrowDown = __webpack_require__(198); | |
var _keyboardArrowDown2 = _interopRequireDefault(_keyboardArrowDown); | |
var _IconButton = __webpack_require__(20); | |
var _IconButton2 = _interopRequireDefault(_IconButton); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles() { | |
return { | |
root: { | |
top: 0, | |
bottom: 0, | |
right: 4, | |
margin: 'auto', | |
position: 'absolute' | |
} | |
}; | |
} | |
var CardExpandable = function (_Component) { | |
_inherits(CardExpandable, _Component); | |
function CardExpandable() { | |
_classCallCheck(this, CardExpandable); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(CardExpandable).apply(this, arguments)); | |
} | |
_createClass(CardExpandable, [{ | |
key: 'render', | |
value: function render() { | |
var styles = getStyles(this.props, this.context); | |
return _react2.default.createElement( | |
_IconButton2.default, | |
{ | |
style: (0, _simpleAssign2.default)(styles.root, this.props.style), | |
onTouchTap: this.props.onExpanding | |
}, | |
this.props.expanded ? _react2.default.createElement(_keyboardArrowUp2.default, null) : _react2.default.createElement(_keyboardArrowDown2.default, null) | |
); | |
} | |
}]); | |
return CardExpandable; | |
}(_react.Component); | |
CardExpandable.propTypes = { | |
expanded: _react.PropTypes.bool, | |
onExpanding: _react.PropTypes.func.isRequired, | |
style: _react.PropTypes.object | |
}; | |
CardExpandable.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = CardExpandable; | |
/***/ }, | |
/* 56 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _Avatar = __webpack_require__(53); | |
var _Avatar2 = _interopRequireDefault(_Avatar); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var card = context.muiTheme.card; | |
return { | |
root: { | |
padding: 16, | |
fontWeight: card.fontWeight, | |
boxSizing: 'border-box', | |
position: 'relative', | |
whiteSpace: 'nowrap' | |
}, | |
text: { | |
display: 'inline-block', | |
verticalAlign: 'top', | |
whiteSpace: 'normal', | |
paddingRight: '90px' | |
}, | |
avatar: { | |
marginRight: 16 | |
}, | |
title: { | |
color: props.titleColor || card.titleColor, | |
display: 'block', | |
fontSize: 15 | |
}, | |
subtitle: { | |
color: props.subtitleColor || card.subtitleColor, | |
display: 'block', | |
fontSize: 14 | |
} | |
}; | |
} | |
var CardHeader = function (_Component) { | |
_inherits(CardHeader, _Component); | |
function CardHeader() { | |
_classCallCheck(this, CardHeader); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(CardHeader).apply(this, arguments)); | |
} | |
_createClass(CardHeader, [{ | |
key: 'render', | |
value: function render() { | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var rootStyle = (0, _simpleAssign2.default)(styles.root, this.props.style); | |
var textStyle = (0, _simpleAssign2.default)(styles.text, this.props.textStyle); | |
var titleStyle = (0, _simpleAssign2.default)(styles.title, this.props.titleStyle); | |
var subtitleStyle = (0, _simpleAssign2.default)(styles.subtitle, this.props.subtitleStyle); | |
var avatar = this.props.avatar; | |
if (_react2.default.isValidElement(this.props.avatar)) { | |
avatar = _react2.default.cloneElement(avatar, { | |
style: (0, _simpleAssign2.default)(styles.avatar, avatar.props.style) | |
}); | |
} else if (avatar !== null) { | |
avatar = _react2.default.createElement(_Avatar2.default, { src: this.props.avatar, style: styles.avatar }); | |
} | |
var _props = this.props; | |
var title = _props.title; | |
var subtitle = _props.subtitle; | |
var other = _objectWithoutProperties(_props, ['title', 'subtitle']); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { style: prepareStyles(rootStyle) }), | |
avatar, | |
_react2.default.createElement( | |
'div', | |
{ style: prepareStyles(textStyle) }, | |
_react2.default.createElement( | |
'span', | |
{ style: prepareStyles(titleStyle) }, | |
title | |
), | |
_react2.default.createElement( | |
'span', | |
{ style: prepareStyles(subtitleStyle) }, | |
subtitle | |
) | |
), | |
this.props.children | |
); | |
} | |
}]); | |
return CardHeader; | |
}(_react.Component); | |
CardHeader.muiName = 'CardHeader'; | |
CardHeader.propTypes = { | |
/** | |
* If true, a click on this card component expands the card. | |
*/ | |
actAsExpander: _react.PropTypes.bool, | |
/** | |
* This is the [Avatar](/#/components/avatar) element to be displayed on the Card Header. | |
* If `avatar` is an `Avatar` or other element, it will be rendered. | |
* If `avatar` is a string, it will be used as the image `src` for an `Avatar`. | |
*/ | |
avatar: _react.PropTypes.node, | |
/** | |
* Can be used to render elements inside the Card Header. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* If true, this card component is expandable. | |
*/ | |
expandable: _react.PropTypes.bool, | |
/** | |
* If true, this card component will include a button to expand the card. | |
*/ | |
showExpandableButton: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* Can be used to render a subtitle in Card Header. | |
*/ | |
subtitle: _react.PropTypes.node, | |
/** | |
* Override the subtitle color. | |
*/ | |
subtitleColor: _react.PropTypes.string, | |
/** | |
* Override the inline-styles of the subtitle. | |
*/ | |
subtitleStyle: _react.PropTypes.object, | |
/** | |
* Override the inline-styles of the text. | |
*/ | |
textStyle: _react.PropTypes.object, | |
/** | |
* Can be used to render a title in Card Header. | |
*/ | |
title: _react.PropTypes.node, | |
/** | |
* Override the title color. | |
*/ | |
titleColor: _react.PropTypes.string, | |
/** | |
* Override the inline-styles of the title. | |
*/ | |
titleStyle: _react.PropTypes.object | |
}; | |
CardHeader.defaultProps = { | |
avatar: null | |
}; | |
CardHeader.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = CardHeader; | |
/***/ }, | |
/* 57 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var cardMedia = context.muiTheme.cardMedia; | |
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: cardMedia.overlayContentBackground | |
}, | |
media: {}, | |
mediaChild: { | |
verticalAlign: 'top', | |
maxWidth: '100%', | |
minWidth: '100%', | |
width: '100%' | |
} | |
}; | |
} | |
var CardMedia = function (_Component) { | |
_inherits(CardMedia, _Component); | |
function CardMedia() { | |
_classCallCheck(this, CardMedia); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(CardMedia).apply(this, arguments)); | |
} | |
_createClass(CardMedia, [{ | |
key: 'render', | |
value: function render() { | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var rootStyle = (0, _simpleAssign2.default)(styles.root, this.props.style); | |
var mediaStyle = (0, _simpleAssign2.default)(styles.media, this.props.mediaStyle); | |
var overlayContainerStyle = (0, _simpleAssign2.default)(styles.overlayContainer, this.props.overlayContainerStyle); | |
var overlayContentStyle = (0, _simpleAssign2.default)(styles.overlayContent, this.props.overlayContentStyle); | |
var overlayStyle = (0, _simpleAssign2.default)(styles.overlay, this.props.overlayStyle); | |
var titleColor = this.context.muiTheme.cardMedia.titleColor; | |
var subtitleColor = this.context.muiTheme.cardMedia.subtitleColor; | |
var color = this.context.muiTheme.cardMedia.color; | |
var children = _react2.default.Children.map(this.props.children, function (child) { | |
return _react2.default.cloneElement(child, { | |
style: prepareStyles((0, _simpleAssign2.default)({}, styles.mediaChild, child.props.style)) | |
}); | |
}); | |
var overlayChildren = _react2.default.Children.map(this.props.overlay, function (child) { | |
if (child.type.muiName === 'CardHeader' || child.type.muiName === 'CardTitle') { | |
return _react2.default.cloneElement(child, { | |
titleColor: titleColor, | |
subtitleColor: subtitleColor | |
}); | |
} else if (child.type.muiName === 'CardText') { | |
return _react2.default.cloneElement(child, { | |
color: color | |
}); | |
} else { | |
return child; | |
} | |
}); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, this.props, { style: prepareStyles(rootStyle) }), | |
_react2.default.createElement( | |
'div', | |
{ style: prepareStyles(mediaStyle) }, | |
children | |
), | |
this.props.overlay ? _react2.default.createElement( | |
'div', | |
{ style: prepareStyles(overlayContainerStyle) }, | |
_react2.default.createElement( | |
'div', | |
{ style: prepareStyles(overlayStyle) }, | |
_react2.default.createElement( | |
'div', | |
{ style: prepareStyles(overlayContentStyle) }, | |
overlayChildren | |
) | |
) | |
) : '' | |
); | |
} | |
}]); | |
return CardMedia; | |
}(_react.Component); | |
CardMedia.propTypes = { | |
/** | |
* If true, a click on this card component expands the card. | |
*/ | |
actAsExpander: _react.PropTypes.bool, | |
/** | |
* Can be used to render elements inside the Card Media. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* If true, this card component is expandable. | |
*/ | |
expandable: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the Card Media. | |
*/ | |
mediaStyle: _react.PropTypes.object, | |
/** | |
* Can be used to render overlay element in Card Media. | |
*/ | |
overlay: _react.PropTypes.node, | |
/** | |
* Override the inline-styles of the overlay container. | |
*/ | |
overlayContainerStyle: _react.PropTypes.object, | |
/** | |
* Override the inline-styles of the overlay content. | |
*/ | |
overlayContentStyle: _react.PropTypes.object, | |
/** | |
* Override the inline-styles of the overlay element. | |
*/ | |
overlayStyle: _react.PropTypes.object, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
CardMedia.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = CardMedia; | |
/***/ }, | |
/* 58 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var cardText = context.muiTheme.cardText; | |
return { | |
root: { | |
padding: 16, | |
fontSize: 14, | |
color: props.color || cardText.textColor | |
} | |
}; | |
} | |
var CardText = function (_Component) { | |
_inherits(CardText, _Component); | |
function CardText() { | |
_classCallCheck(this, CardText); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(CardText).apply(this, arguments)); | |
} | |
_createClass(CardText, [{ | |
key: 'render', | |
value: function render() { | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var rootStyle = (0, _simpleAssign2.default)(styles.root, this.props.style); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, this.props, { style: prepareStyles(rootStyle) }), | |
this.props.children | |
); | |
} | |
}]); | |
return CardText; | |
}(_react.Component); | |
CardText.muiName = 'CardText'; | |
CardText.propTypes = { | |
/** | |
* If true, a click on this card component expands the card. | |
*/ | |
actAsExpander: _react.PropTypes.bool, | |
/** | |
* Can be used to render elements inside the Card Text. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* Override the CardText color. | |
*/ | |
color: _react.PropTypes.string, | |
/** | |
* If true, this card component is expandable. | |
*/ | |
expandable: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
CardText.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = CardText; | |
/***/ }, | |
/* 59 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var card = context.muiTheme.card; | |
return { | |
root: { | |
padding: 16, | |
position: 'relative' | |
}, | |
title: { | |
fontSize: 24, | |
color: props.titleColor || card.titleColor, | |
display: 'block', | |
lineHeight: '36px' | |
}, | |
subtitle: { | |
fontSize: 14, | |
color: props.subtitleColor || card.subtitleColor, | |
display: 'block' | |
} | |
}; | |
} | |
var CardTitle = function (_Component) { | |
_inherits(CardTitle, _Component); | |
function CardTitle() { | |
_classCallCheck(this, CardTitle); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(CardTitle).apply(this, arguments)); | |
} | |
_createClass(CardTitle, [{ | |
key: 'render', | |
value: function render() { | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var rootStyle = (0, _simpleAssign2.default)({}, styles.root, this.props.style); | |
var titleStyle = (0, _simpleAssign2.default)({}, styles.title, this.props.titleStyle); | |
var subtitleStyle = (0, _simpleAssign2.default)({}, styles.subtitle, this.props.subtitleStyle); | |
var _props = this.props; | |
var title = _props.title; | |
var subtitle = _props.subtitle; | |
var other = _objectWithoutProperties(_props, ['title', 'subtitle']); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { style: prepareStyles(rootStyle) }), | |
_react2.default.createElement( | |
'span', | |
{ style: prepareStyles(titleStyle) }, | |
title | |
), | |
_react2.default.createElement( | |
'span', | |
{ style: prepareStyles(subtitleStyle) }, | |
subtitle | |
), | |
this.props.children | |
); | |
} | |
}]); | |
return CardTitle; | |
}(_react.Component); | |
CardTitle.muiName = 'CardTitle'; | |
CardTitle.propTypes = { | |
/** | |
* If true, a click on this card component expands the card. | |
*/ | |
actAsExpander: _react.PropTypes.bool, | |
/** | |
* Can be used to render elements inside the Card Title. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* If true, this card component is expandable. | |
*/ | |
expandable: _react.PropTypes.bool, | |
/** | |
* If true, this card component will include a button to expand the card. | |
*/ | |
showExpandableButton: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* Can be used to render a subtitle in the Card Title. | |
*/ | |
subtitle: _react.PropTypes.node, | |
/** | |
* Override the subtitle color. | |
*/ | |
subtitleColor: _react.PropTypes.string, | |
/** | |
* Override the inline-styles of the subtitle. | |
*/ | |
subtitleStyle: _react.PropTypes.object, | |
/** | |
* Can be used to render a title in the Card Title. | |
*/ | |
title: _react.PropTypes.node, | |
/** | |
* Override the title color. | |
*/ | |
titleColor: _react.PropTypes.string, | |
/** | |
* Override the inline-styles of the title. | |
*/ | |
titleStyle: _react.PropTypes.object | |
}; | |
CardTitle.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = CardTitle; | |
/***/ }, | |
/* 60 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _Divider = __webpack_require__(122); | |
var _Divider2 = _interopRequireDefault(_Divider); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _Divider2.default; | |
/***/ }, | |
/* 61 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = exports.MenuItem = exports.DropDownMenu = undefined; | |
var _DropDownMenu2 = __webpack_require__(125); | |
var _DropDownMenu3 = _interopRequireDefault(_DropDownMenu2); | |
var _MenuItem2 = __webpack_require__(37); | |
var _MenuItem3 = _interopRequireDefault(_MenuItem2); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.DropDownMenu = _DropDownMenu3.default; | |
exports.MenuItem = _MenuItem3.default; | |
exports.default = _DropDownMenu3.default; | |
/***/ }, | |
/* 62 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
function getStyles(props, context) { | |
var _titleBar; | |
var _context$muiTheme = context.muiTheme; | |
var baseTheme = _context$muiTheme.baseTheme; | |
var gridTile = _context$muiTheme.gridTile; | |
var actionPos = props.actionIcon && props.actionPosition; | |
var styles = { | |
root: { | |
position: 'relative', | |
display: 'block', | |
height: '100%', | |
overflow: 'hidden' | |
}, | |
titleBar: (_titleBar = { | |
position: 'absolute', | |
left: 0, | |
right: 0 | |
}, _defineProperty(_titleBar, props.titlePosition, 0), _defineProperty(_titleBar, 'height', props.subtitle ? 68 : 48), _defineProperty(_titleBar, 'background', props.titleBackground), _defineProperty(_titleBar, 'display', 'flex'), _defineProperty(_titleBar, 'alignItems', 'center'), _titleBar), | |
titleWrap: { | |
flexGrow: 1, | |
marginLeft: actionPos !== 'left' ? baseTheme.spacing.desktopGutterLess : 0, | |
marginRight: actionPos === 'left' ? baseTheme.spacing.desktopGutterLess : 0, | |
color: gridTile.textColor, | |
overflow: 'hidden' | |
}, | |
title: { | |
fontSize: '16px', | |
textOverflow: 'ellipsis', | |
overflow: 'hidden', | |
whiteSpace: 'nowrap' | |
}, | |
subtitle: { | |
fontSize: '12px', | |
textOverflow: 'ellipsis', | |
overflow: 'hidden', | |
whiteSpace: 'nowrap' | |
}, | |
actionIcon: { | |
order: actionPos === 'left' ? -1 : 1 | |
}, | |
childImg: { | |
height: '100%', | |
transform: 'translateX(-50%)', | |
position: 'relative', | |
left: '50%' | |
} | |
}; | |
return styles; | |
} | |
var GridTile = function (_Component) { | |
_inherits(GridTile, _Component); | |
function GridTile() { | |
_classCallCheck(this, GridTile); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(GridTile).apply(this, arguments)); | |
} | |
_createClass(GridTile, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
this.ensureImageCover(); | |
} | |
}, { | |
key: 'componentDidUpdate', | |
value: function componentDidUpdate() { | |
this.ensureImageCover(); | |
} | |
}, { | |
key: 'ensureImageCover', | |
value: function ensureImageCover() { | |
var imgEl = this.refs.img; | |
if (imgEl) { | |
(function () { | |
var fit = function fit() { | |
if (imgEl.offsetWidth < imgEl.parentNode.offsetWidth) { | |
imgEl.style.height = 'auto'; | |
imgEl.style.left = '0'; | |
imgEl.style.width = '100%'; | |
imgEl.style.top = '50%'; | |
imgEl.style.transform = imgEl.style.WebkitTransform = 'translateY(-50%)'; | |
} | |
imgEl.removeEventListener('load', fit); | |
imgEl = null; // prevent closure memory leak | |
}; | |
if (imgEl.complete) { | |
fit(); | |
} else { | |
imgEl.addEventListener('load', fit); | |
} | |
})(); | |
} | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var title = _props.title; | |
var subtitle = _props.subtitle; | |
var titlePosition = _props.titlePosition; | |
var // eslint-disable-line no-unused-vars | |
titleBackground = _props.titleBackground; | |
var // eslint-disable-line no-unused-vars | |
actionIcon = _props.actionIcon; | |
var // eslint-disable-line no-unused-vars | |
actionPosition = _props.actionPosition; | |
var // eslint-disable-line no-unused-vars | |
style = _props.style; | |
var children = _props.children; | |
var containerElement = _props.containerElement; | |
var other = _objectWithoutProperties(_props, ['title', 'subtitle', 'titlePosition', 'titleBackground', 'actionIcon', 'actionPosition', 'style', 'children', 'containerElement']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style); | |
var titleBar = null; | |
if (title) { | |
titleBar = _react2.default.createElement( | |
'div', | |
{ key: 'titlebar', style: prepareStyles(styles.titleBar) }, | |
_react2.default.createElement( | |
'div', | |
{ style: prepareStyles(styles.titleWrap) }, | |
_react2.default.createElement( | |
'div', | |
{ style: prepareStyles(styles.title) }, | |
title | |
), | |
subtitle ? _react2.default.createElement( | |
'div', | |
{ style: prepareStyles(styles.subtitle) }, | |
subtitle | |
) : null | |
), | |
actionIcon ? _react2.default.createElement( | |
'div', | |
{ style: prepareStyles(styles.actionIcon) }, | |
actionIcon | |
) : null | |
); | |
} | |
var newChildren = children; | |
// if there is a single image passed as children | |
// clone it and add our styles | |
if (_react2.default.Children.count(children) === 1) { | |
newChildren = _react2.default.Children.map(children, function (child) { | |
if (child.type === 'img') { | |
return _react2.default.cloneElement(child, { | |
key: 'img', | |
ref: 'img', | |
style: prepareStyles((0, _simpleAssign2.default)({}, styles.childImg, child.props.style)) | |
}); | |
} else { | |
return child; | |
} | |
}); | |
} | |
var containerProps = _extends({ | |
style: prepareStyles(mergedRootStyles) | |
}, other); | |
return _react2.default.isValidElement(containerElement) ? _react2.default.cloneElement(containerElement, containerProps, [newChildren, titleBar]) : _react2.default.createElement(containerElement, containerProps, [newChildren, titleBar]); | |
} | |
}]); | |
return GridTile; | |
}(_react.Component); | |
GridTile.propTypes = { | |
/** | |
* An IconButton element to be used as secondary action target | |
* (primary action target is the tile itself). | |
*/ | |
actionIcon: _react.PropTypes.element, | |
/** | |
* Position of secondary action IconButton. | |
*/ | |
actionPosition: _react.PropTypes.oneOf(['left', 'right']), | |
/** | |
* Theoretically you can pass any node as children, but the main use case is to pass an img, | |
* in whichcase GridTile takes care of making the image "cover" available space | |
* (similar to background-size: cover or to object-fit:cover). | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* Width of the tile in number of grid cells. | |
*/ | |
cols: _react.PropTypes.number, | |
/** | |
* Either a string used as tag name for the tile root element, or a ReactElement. | |
* This is useful when you have, for example, a custom implementation of | |
* a navigation link (that knows about your routes) and you want to use it as the primary tile action. | |
* In case you pass a ReactElement, please ensure that it passes all props, | |
* accepts styles overrides and render it's children. | |
*/ | |
containerElement: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]), | |
/** | |
* Height of the tile in number of grid cells. | |
*/ | |
rows: _react.PropTypes.number, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* String or element serving as subtitle (support text). | |
*/ | |
subtitle: _react.PropTypes.node, | |
/** | |
* Title to be displayed on tile. | |
*/ | |
title: _react.PropTypes.node, | |
/** | |
* Style used for title bar background. | |
* Useful for setting custom gradients for example | |
*/ | |
titleBackground: _react.PropTypes.string, | |
/** | |
* Position of the title bar (container of title, subtitle and action icon). | |
*/ | |
titlePosition: _react.PropTypes.oneOf(['top', 'bottom']) | |
}; | |
GridTile.defaultProps = { | |
titlePosition: 'bottom', | |
titleBackground: 'rgba(0, 0, 0, 0.4)', | |
actionPosition: 'right', | |
cols: 1, | |
rows: 1, | |
containerElement: 'div' | |
}; | |
GridTile.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = GridTile; | |
/***/ }, | |
/* 63 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.MakeSelectable = undefined; | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _colorManipulator = __webpack_require__(12); | |
var _deprecatedPropType = __webpack_require__(15); | |
var _deprecatedPropType2 = _interopRequireDefault(_deprecatedPropType); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var MakeSelectable = exports.MakeSelectable = function MakeSelectable(Component) { | |
var _class, _temp2; | |
return _temp2 = _class = function (_Component) { | |
_inherits(_class, _Component); | |
function _class() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, _class); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(_class)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.hasSelectedDescendant = function (previousValue, child) { | |
if (_react2.default.isValidElement(child) && child.props.nestedItems && child.props.nestedItems.length > 0) { | |
return child.props.nestedItems.reduce(_this.hasSelectedDescendant, previousValue); | |
} | |
return previousValue || _this.isChildSelected(child, _this.props); | |
}, _this.handleItemTouchTap = function (event, item) { | |
var valueLink = _this.getValueLink(_this.props); | |
var itemValue = item.props.value; | |
if (itemValue !== valueLink.value) { | |
valueLink.requestChange(event, itemValue); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(_class, [{ | |
key: 'getValueLink', | |
value: function getValueLink(props) { | |
return props.valueLink || { | |
value: props.value, | |
requestChange: props.onChange | |
}; | |
} | |
}, { | |
key: 'extendChild', | |
value: function extendChild(child, styles, selectedItemStyle) { | |
var _this2 = this; | |
if (child && child.type && child.type.muiName === 'ListItem') { | |
var selected = this.isChildSelected(child, this.props); | |
var selectedChildrenStyles = void 0; | |
if (selected) { | |
selectedChildrenStyles = (0, _simpleAssign2.default)({}, styles, selectedItemStyle); | |
} | |
var mergedChildrenStyles = (0, _simpleAssign2.default)({}, child.props.style, selectedChildrenStyles); | |
this.keyIndex += 1; | |
return _react2.default.cloneElement(child, { | |
onTouchTap: function onTouchTap(event) { | |
_this2.handleItemTouchTap(event, child); | |
if (child.props.onTouchTap) { | |
child.props.onTouchTap(event); | |
} | |
}, | |
key: this.keyIndex, | |
style: mergedChildrenStyles, | |
nestedItems: child.props.nestedItems.map(function (child) { | |
return _this2.extendChild(child, styles, selectedItemStyle); | |
}), | |
initiallyOpen: this.isInitiallyOpen(child) | |
}); | |
} else { | |
return child; | |
} | |
} | |
}, { | |
key: 'isInitiallyOpen', | |
value: function isInitiallyOpen(child) { | |
if (child.props.initiallyOpen) { | |
return child.props.initiallyOpen; | |
} | |
return this.hasSelectedDescendant(false, child); | |
} | |
}, { | |
key: 'isChildSelected', | |
value: function isChildSelected(child, props) { | |
return this.getValueLink(props).value === child.props.value; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _this3 = this; | |
var _props = this.props; | |
var children = _props.children; | |
var selectedItemStyle = _props.selectedItemStyle; | |
this.keyIndex = 0; | |
var styles = {}; | |
if (!selectedItemStyle) { | |
var textColor = this.context.muiTheme.baseTheme.palette.textColor; | |
styles.backgroundColor = (0, _colorManipulator.fade)(textColor, 0.2); | |
} | |
return _react2.default.createElement( | |
Component, | |
_extends({}, this.props, this.state), | |
_react2.default.Children.map(children, function (child) { | |
return _this3.extendChild(child, styles, selectedItemStyle); | |
}) | |
); | |
} | |
}]); | |
return _class; | |
}(Component), _class.propTypes = { | |
children: _react.PropTypes.node, | |
onChange: _react.PropTypes.func, | |
selectedItemStyle: _react.PropTypes.object, | |
value: _react.PropTypes.any, | |
valueLink: (0, _deprecatedPropType2.default)(_react.PropTypes.shape({ | |
value: _react.PropTypes.any, | |
requestChange: _react.PropTypes.func | |
}), 'This property is deprecated due to his low popularity. Use the value and onChange property.') | |
}, _class.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}, _temp2; | |
}; | |
exports.default = MakeSelectable; | |
/***/ }, | |
/* 64 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = exports.MenuItem = exports.Menu = undefined; | |
var _Menu2 = __webpack_require__(28); | |
var _Menu3 = _interopRequireDefault(_Menu2); | |
var _MenuItem2 = __webpack_require__(38); | |
var _MenuItem3 = _interopRequireDefault(_MenuItem2); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.Menu = _Menu3.default; | |
exports.MenuItem = _MenuItem3.default; | |
exports.default = _Menu3.default; | |
/***/ }, | |
/* 65 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _RadioButton = __webpack_require__(66); | |
var _RadioButton2 = _interopRequireDefault(_RadioButton); | |
var _warning = __webpack_require__(6); | |
var _warning2 = _interopRequireDefault(_warning); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var RadioButtonGroup = function (_Component) { | |
_inherits(RadioButtonGroup, _Component); | |
function RadioButtonGroup() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, RadioButtonGroup); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioButtonGroup)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
numberCheckedRadioButtons: 0, | |
selected: _this.props.valueSelected || _this.props.defaultSelected || '' | |
}, _this.handleChange = function (event, newSelection) { | |
_this.updateRadioButtons(newSelection); | |
// Successful update | |
if (_this.state.numberCheckedRadioButtons === 0) { | |
if (_this.props.onChange) _this.props.onChange(event, newSelection); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(RadioButtonGroup, [{ | |
key: 'componentWillMount', | |
value: function componentWillMount() { | |
var _this2 = this; | |
var cnt = 0; | |
_react2.default.Children.forEach(this.props.children, function (option) { | |
if (_this2.hasCheckAttribute(option)) cnt++; | |
}, this); | |
this.setState({ numberCheckedRadioButtons: cnt }); | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
if (nextProps.hasOwnProperty('valueSelected')) { | |
this.setState({ | |
selected: nextProps.valueSelected | |
}); | |
} | |
} | |
}, { | |
key: 'hasCheckAttribute', | |
value: function hasCheckAttribute(radioButton) { | |
return radioButton.props.hasOwnProperty('checked') && radioButton.props.checked; | |
} | |
}, { | |
key: 'updateRadioButtons', | |
value: function updateRadioButtons(newSelection) { | |
if (this.state.numberCheckedRadioButtons === 0) { | |
this.setState({ selected: newSelection }); | |
} else { | |
true ? (0, _warning2.default)(false, 'Cannot select a different radio button while another radio button\n has the \'checked\' property set to true.') : void 0; | |
} | |
} | |
}, { | |
key: 'getSelectedValue', | |
value: function getSelectedValue() { | |
return this.state.selected; | |
} | |
}, { | |
key: 'setSelectedValue', | |
value: function setSelectedValue(newSelectionValue) { | |
this.updateRadioButtons(newSelectionValue); | |
} | |
}, { | |
key: 'clearValue', | |
value: function clearValue() { | |
this.setSelectedValue(''); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _this3 = this; | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var options = _react2.default.Children.map(this.props.children, function (option) { | |
var _option$props = option.props; | |
var name = _option$props.name; | |
var // eslint-disable-line no-unused-vars | |
value = _option$props.value; | |
var // eslint-disable-line no-unused-vars | |
label = _option$props.label; | |
var // eslint-disable-line no-unused-vars | |
onCheck = _option$props.onCheck; | |
var other = _objectWithoutProperties(_option$props, ['name', 'value', 'label', 'onCheck']); | |
return _react2.default.createElement(_RadioButton2.default, _extends({}, other, { | |
ref: option.props.value, | |
name: _this3.props.name, | |
key: option.props.value, | |
value: option.props.value, | |
label: option.props.label, | |
labelPosition: _this3.props.labelPosition, | |
onCheck: _this3.handleChange, | |
checked: option.props.value === _this3.state.selected | |
})); | |
}, this); | |
return _react2.default.createElement( | |
'div', | |
{ | |
style: prepareStyles((0, _simpleAssign2.default)({}, this.props.style)), | |
className: this.props.className | |
}, | |
options | |
); | |
} | |
}]); | |
return RadioButtonGroup; | |
}(_react.Component); | |
RadioButtonGroup.propTypes = { | |
/** | |
* Should be used to pass `RadioButton` components. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The CSS class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* The `value` property (case-sensitive) of the radio button that will be | |
* selected by default. This takes precedence over the `checked` property | |
* of the `RadioButton` elements. | |
*/ | |
defaultSelected: _react.PropTypes.string, | |
/** | |
* Where the label will be placed for all child radio buttons. | |
* This takes precedence over the `labelPosition` property of the | |
* `RadioButton` elements. | |
*/ | |
labelPosition: _react.PropTypes.oneOf(['left', 'right']), | |
/** | |
* The name that will be applied to all child radio buttons. | |
*/ | |
name: _react.PropTypes.string.isRequired, | |
/** | |
* Callback function that is fired when a radio button has | |
* been checked. | |
* | |
* @param {object} event `change` event targeting the selected | |
* radio button. | |
* @param {string} value The `value` of the selected radio button. | |
*/ | |
onChange: _react.PropTypes.func, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The `value` of the currently selected radio button. | |
*/ | |
valueSelected: _react.PropTypes.string | |
}; | |
RadioButtonGroup.defaultProps = { | |
style: {} | |
}; | |
RadioButtonGroup.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = RadioButtonGroup; | |
/***/ }, | |
/* 66 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = exports.RadioButtonGroup = exports.RadioButton = undefined; | |
var _RadioButton2 = __webpack_require__(143); | |
var _RadioButton3 = _interopRequireDefault(_RadioButton2); | |
var _RadioButtonGroup2 = __webpack_require__(65); | |
var _RadioButtonGroup3 = _interopRequireDefault(_RadioButtonGroup2); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.RadioButton = _RadioButton3.default; | |
exports.RadioButtonGroup = _RadioButtonGroup3.default; | |
exports.default = _RadioButton3.default; | |
/***/ }, | |
/* 67 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _checkCircle = __webpack_require__(197); | |
var _checkCircle2 = _interopRequireDefault(_checkCircle); | |
var _SvgIcon = __webpack_require__(5); | |
var _SvgIcon2 = _interopRequireDefault(_SvgIcon); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var getStyles = function getStyles(_ref, _ref2) { | |
var active = _ref.active; | |
var completed = _ref.completed; | |
var disabled = _ref.disabled; | |
var muiTheme = _ref2.muiTheme; | |
var stepper = _ref2.stepper; | |
var _muiTheme$stepper = muiTheme.stepper; | |
var textColor = _muiTheme$stepper.textColor; | |
var disabledTextColor = _muiTheme$stepper.disabledTextColor; | |
var iconColor = _muiTheme$stepper.iconColor; | |
var inactiveIconColor = _muiTheme$stepper.inactiveIconColor; | |
var orientation = stepper.orientation; | |
var styles = { | |
root: { | |
height: orientation === 'horizontal' ? 72 : 64, | |
color: textColor, | |
display: 'flex', | |
alignItems: 'center', | |
fontSize: 14, | |
paddingLeft: 14, | |
paddingRight: 14 | |
}, | |
icon: { | |
color: iconColor, | |
display: 'block', | |
fontSize: 24, | |
width: 24, | |
height: 24 | |
}, | |
iconContainer: { | |
display: 'flex', | |
alignItems: 'center', | |
paddingRight: 8, | |
width: 24 | |
} | |
}; | |
if (active) { | |
styles.root.fontWeight = 500; | |
} | |
if (!completed && !active) { | |
styles.icon.color = inactiveIconColor; | |
} | |
if (disabled) { | |
styles.icon.color = inactiveIconColor; | |
styles.root.color = disabledTextColor; | |
} | |
return styles; | |
}; | |
var StepLabel = function (_Component) { | |
_inherits(StepLabel, _Component); | |
function StepLabel() { | |
_classCallCheck(this, StepLabel); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(StepLabel).apply(this, arguments)); | |
} | |
_createClass(StepLabel, [{ | |
key: 'renderIcon', | |
value: function renderIcon(completed, icon, styles) { | |
var iconType = typeof icon === 'undefined' ? 'undefined' : _typeof(icon); | |
if (iconType === 'number' || iconType === 'string') { | |
if (completed) { | |
return _react2.default.createElement(_checkCircle2.default, { | |
color: styles.icon.color, | |
style: styles.icon | |
}); | |
} | |
return _react2.default.createElement( | |
_SvgIcon2.default, | |
{ color: styles.icon.color, style: styles.icon }, | |
_react2.default.createElement('circle', { cx: '12', cy: '12', r: '10' }), | |
_react2.default.createElement( | |
'text', | |
{ | |
x: '12', | |
y: '16', | |
textAnchor: 'middle', | |
fontSize: '12', | |
fill: '#fff' | |
}, | |
icon | |
) | |
); | |
} | |
return icon; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var children = _props.children; | |
var completed = _props.completed; | |
var userIcon = _props.icon; | |
var style = _props.style; | |
var other = _objectWithoutProperties(_props, ['children', 'completed', 'icon', 'style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var icon = this.renderIcon(completed, userIcon, styles); | |
return _react2.default.createElement( | |
'span', | |
_extends({ style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, other), | |
icon && _react2.default.createElement( | |
'span', | |
{ style: prepareStyles(styles.iconContainer) }, | |
icon | |
), | |
children | |
); | |
} | |
}]); | |
return StepLabel; | |
}(_react.Component); | |
StepLabel.muiName = 'StepLabel'; | |
StepLabel.propTypes = { | |
/** | |
* Sets active styling. Overrides disabled coloring. | |
*/ | |
active: _react.PropTypes.bool, | |
/** | |
* The label text node | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* Sets completed styling. Overrides disabled coloring. | |
*/ | |
completed: _react.PropTypes.bool, | |
/** | |
* Sets disabled styling. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* The icon displayed by the step label. | |
*/ | |
icon: _react.PropTypes.oneOfType([_react.PropTypes.element, _react.PropTypes.string, _react.PropTypes.number]), | |
/** | |
* Override the inline-style of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
StepLabel.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired, | |
stepper: _react.PropTypes.object | |
}; | |
exports.default = StepLabel; | |
/***/ }, | |
/* 68 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _Subheader = __webpack_require__(160); | |
var _Subheader2 = _interopRequireDefault(_Subheader); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _Subheader2.default; | |
/***/ }, | |
/* 69 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _Checkbox = __webpack_require__(32); | |
var _Checkbox2 = _interopRequireDefault(_Checkbox); | |
var _TableRowColumn = __webpack_require__(29); | |
var _TableRowColumn2 = _interopRequireDefault(_TableRowColumn); | |
var _ClickAwayListener = __webpack_require__(41); | |
var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var TableBody = function (_Component) { | |
_inherits(TableBody, _Component); | |
function TableBody() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, TableBody); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableBody)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
selectedRows: _this.calculatePreselectedRows(_this.props) | |
}, _this.handleClickAway = function () { | |
if (_this.props.deselectOnClickaway && _this.state.selectedRows.length) { | |
_this.setState({ | |
selectedRows: [] | |
}); | |
if (_this.props.onRowSelection) { | |
_this.props.onRowSelection([]); | |
} | |
} | |
}, _this.onRowClick = function (event, rowNumber) { | |
event.stopPropagation(); | |
if (_this.props.selectable) { | |
// Prevent text selection while selecting rows. | |
window.getSelection().removeAllRanges(); | |
_this.processRowSelection(event, rowNumber); | |
} | |
}, _this.onCellClick = function (event, rowNumber, columnNumber) { | |
event.stopPropagation(); | |
if (_this.props.onCellClick) _this.props.onCellClick(rowNumber, _this.getColumnId(columnNumber), event); | |
}, _this.onCellHover = function (event, rowNumber, columnNumber) { | |
if (_this.props.onCellHover) _this.props.onCellHover(rowNumber, _this.getColumnId(columnNumber), event); | |
_this.onRowHover(event, rowNumber); | |
}, _this.onCellHoverExit = function (event, rowNumber, columnNumber) { | |
if (_this.props.onCellHoverExit) _this.props.onCellHoverExit(rowNumber, _this.getColumnId(columnNumber), event); | |
_this.onRowHoverExit(event, rowNumber); | |
}, _this.onRowHover = function (event, rowNumber) { | |
if (_this.props.onRowHover) _this.props.onRowHover(rowNumber); | |
}, _this.onRowHoverExit = function (event, rowNumber) { | |
if (_this.props.onRowHoverExit) _this.props.onRowHoverExit(rowNumber); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(TableBody, [{ | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
if (this.props.allRowsSelected && !nextProps.allRowsSelected) { | |
this.setState({ | |
selectedRows: this.state.selectedRows.length > 0 ? [this.state.selectedRows[this.state.selectedRows.length - 1]] : [] | |
}); | |
// TODO: should else be conditional, not run any time props other than allRowsSelected change? | |
} else { | |
this.setState({ | |
selectedRows: this.calculatePreselectedRows(nextProps) | |
}); | |
} | |
} | |
}, { | |
key: 'createRows', | |
value: function createRows() { | |
var _this2 = this; | |
var numChildren = _react2.default.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 _react2.default.Children.map(this.props.children, function (child) { | |
if (_react2.default.isValidElement(child)) { | |
var _ret2 = function () { | |
var props = { | |
displayRowCheckbox: _this2.props.displayRowCheckbox, | |
hoverable: _this2.props.showRowHover, | |
selected: _this2.isRowSelected(rowNumber), | |
striped: _this2.props.stripedRows && rowNumber % 2 === 0, | |
rowNumber: rowNumber++ | |
}; | |
var checkboxColumn = _this2.createRowCheckboxColumn(props); | |
if (rowNumber === numChildren) { | |
props.displayBorder = false; | |
} | |
var children = [checkboxColumn]; | |
_react2.default.Children.forEach(child.props.children, function (child) { | |
children.push(child); | |
}); | |
return { | |
v: _react2.default.cloneElement(child, _extends({}, props, handlers), children) | |
}; | |
}(); | |
if ((typeof _ret2 === 'undefined' ? 'undefined' : _typeof(_ret2)) === "object") return _ret2.v; | |
} | |
}); | |
} | |
}, { | |
key: 'createRowCheckboxColumn', | |
value: function createRowCheckboxColumn(rowProps) { | |
if (!this.props.displayRowCheckbox) return null; | |
var key = rowProps.rowNumber + '-cb'; | |
var checkbox = _react2.default.createElement(_Checkbox2.default, { | |
ref: 'rowSelectCB', | |
name: key, | |
value: 'selected', | |
disabled: !this.props.selectable, | |
checked: rowProps.selected | |
}); | |
return _react2.default.createElement( | |
_TableRowColumn2.default, | |
{ | |
key: key, | |
columnNumber: 0, | |
style: { width: 24 } | |
}, | |
checkbox | |
); | |
} | |
}, { | |
key: 'calculatePreselectedRows', | |
value: function calculatePreselectedRows(props) { | |
// Determine what rows are 'pre-selected'. | |
var preSelectedRows = []; | |
if (props.selectable && props.preScanRows) { | |
(function () { | |
var index = 0; | |
_react2.default.Children.forEach(props.children, function (child) { | |
if (_react2.default.isValidElement(child)) { | |
if (child.props.selected && (preSelectedRows.length === 0 || props.multiSelectable)) { | |
preSelectedRows.push(index); | |
} | |
index++; | |
} | |
}); | |
})(); | |
} | |
return preSelectedRows; | |
} | |
}, { | |
key: 'isRowSelected', | |
value: 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 === 'undefined' ? 'undefined' : _typeof(selection)) === 'object') { | |
if (this.isValueInRange(rowNumber, selection)) return true; | |
} else { | |
if (selection === rowNumber) return true; | |
} | |
} | |
return false; | |
} | |
}, { | |
key: 'isValueInRange', | |
value: 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; | |
} | |
}, { | |
key: 'processRowSelection', | |
value: function processRowSelection(event, rowNumber) { | |
var selectedRows = this.state.selectedRows; | |
if (event.shiftKey && this.props.multiSelectable && selectedRows.length) { | |
var lastIndex = selectedRows.length - 1; | |
var lastSelection = selectedRows[lastIndex]; | |
if ((typeof lastSelection === 'undefined' ? 'undefined' : _typeof(lastSelection)) === 'object') { | |
lastSelection.end = rowNumber; | |
} else { | |
selectedRows.splice(lastIndex, 1, { start: lastSelection, end: rowNumber }); | |
} | |
} else if ((event.ctrlKey && !event.metaKey || event.metaKey && !event.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 === 'undefined' ? 'undefined' : _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)); | |
} | |
}, { | |
key: 'splitRange', | |
value: 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; | |
} | |
}, { | |
key: 'genRangeOfValues', | |
value: 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; | |
} | |
}, { | |
key: 'flattenRanges', | |
value: 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 === 'undefined' ? 'undefined' : _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(); | |
} | |
}, { | |
key: 'getColumnId', | |
value: function getColumnId(columnNumber) { | |
var columnId = columnNumber; | |
if (this.props.displayRowCheckbox) columnId--; | |
return columnId; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var className = _props.className; | |
var style = _props.style; | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var rows = this.createRows(); | |
return _react2.default.createElement( | |
_ClickAwayListener2.default, | |
{ onClickAway: this.handleClickAway }, | |
_react2.default.createElement( | |
'tbody', | |
{ className: className, style: prepareStyles((0, _simpleAssign2.default)({}, style)) }, | |
rows | |
) | |
); | |
} | |
}]); | |
return TableBody; | |
}(_react.Component); | |
TableBody.muiName = 'TableBody'; | |
TableBody.propTypes = { | |
/** | |
* @ignore | |
* Set to true to indicate that all rows should be selected. | |
*/ | |
allRowsSelected: _react.PropTypes.bool, | |
/** | |
* Children passed to table body. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* Controls whether or not to deselect all selected | |
* rows after clicking outside the table. | |
*/ | |
deselectOnClickaway: _react.PropTypes.bool, | |
/** | |
* Controls the display of the row checkbox. The default value is true. | |
*/ | |
displayRowCheckbox: _react.PropTypes.bool, | |
/** | |
* @ignore | |
* If true, multiple table rows can be selected. | |
* CTRL/CMD+Click and SHIFT+Click are valid actions. | |
* The default value is false. | |
*/ | |
multiSelectable: _react.PropTypes.bool, | |
/** | |
* @ignore | |
* Callback function for when a cell is clicked. | |
*/ | |
onCellClick: _react.PropTypes.func, | |
/** | |
* @ignore | |
* Called when a table cell is hovered. rowNumber | |
* is the row number of the hovered row and columnId | |
* is the column number or the column key of the cell. | |
*/ | |
onCellHover: _react.PropTypes.func, | |
/** | |
* @ignore | |
* Called when a table cell is no longer hovered. | |
* rowNumber is the row number of the row and columnId | |
* is the column number or the column key of the cell. | |
*/ | |
onCellHoverExit: _react.PropTypes.func, | |
/** | |
* @ignore | |
* Called when a table row is hovered. | |
* rowNumber is the row number of the hovered row. | |
*/ | |
onRowHover: _react.PropTypes.func, | |
/** | |
* @ignore | |
* Called when a table row is no longer | |
* hovered. rowNumber is the row number of the row | |
* that is no longer hovered. | |
*/ | |
onRowHoverExit: _react.PropTypes.func, | |
/** | |
* @ignore | |
* Called when a row is selected. selectedRows is an | |
* array of all row selections. IF all rows have been selected, | |
* the string "all" will be returned instead to indicate that | |
* all rows have been selected. | |
*/ | |
onRowSelection: _react.PropTypes.func, | |
/** | |
* Controls whether or not the rows are pre-scanned to determine | |
* initial state. If your table has a large number of rows and | |
* you are experiencing a delay in rendering, turn off this property. | |
*/ | |
preScanRows: _react.PropTypes.bool, | |
/** | |
* @ignore | |
* If true, table rows can be selected. If multiple | |
* row selection is desired, enable multiSelectable. | |
* The default value is true. | |
*/ | |
selectable: _react.PropTypes.bool, | |
/** | |
* If true, table rows will be highlighted when | |
* the cursor is hovering over the row. The default | |
* value is false. | |
*/ | |
showRowHover: _react.PropTypes.bool, | |
/** | |
* If true, every other table row starting | |
* with the first row will be striped. The default value is false. | |
*/ | |
stripedRows: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
TableBody.defaultProps = { | |
allRowsSelected: false, | |
deselectOnClickaway: true, | |
displayRowCheckbox: true, | |
multiSelectable: false, | |
preScanRows: true, | |
selectable: true, | |
style: {} | |
}; | |
TableBody.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = TableBody; | |
/***/ }, | |
/* 70 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _TableRowColumn = __webpack_require__(29); | |
var _TableRowColumn2 = _interopRequireDefault(_TableRowColumn); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var tableFooter = context.muiTheme.tableFooter; | |
return { | |
cell: { | |
borderTop: '1px solid ' + tableFooter.borderColor, | |
verticalAlign: 'bottom', | |
padding: 20, | |
textAlign: 'left', | |
whiteSpace: 'nowrap' | |
} | |
}; | |
} | |
var TableFooter = function (_Component) { | |
_inherits(TableFooter, _Component); | |
function TableFooter() { | |
_classCallCheck(this, TableFooter); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(TableFooter).apply(this, arguments)); | |
} | |
_createClass(TableFooter, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var adjustForCheckbox = _props.adjustForCheckbox; | |
var children = _props.children; | |
var className = _props.className; | |
var style = _props.style; | |
var other = _objectWithoutProperties(_props, ['adjustForCheckbox', 'children', 'className', 'style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var footerRows = _react2.default.Children.map(children, function (child, rowNumber) { | |
var newChildProps = { | |
displayBorder: false, | |
key: 'f-' + rowNumber, | |
rowNumber: rowNumber, | |
style: (0, _simpleAssign2.default)({}, styles.cell, child.props.style) | |
}; | |
var newDescendants = void 0; | |
if (adjustForCheckbox) { | |
newDescendants = [_react2.default.createElement(_TableRowColumn2.default, { key: 'fpcb' + rowNumber, style: { width: 24 } })].concat(_toConsumableArray(_react2.default.Children.toArray(child.props.children))); | |
} | |
return _react2.default.cloneElement(child, newChildProps, newDescendants); | |
}); | |
return _react2.default.createElement( | |
'tfoot', | |
_extends({ className: className, style: prepareStyles((0, _simpleAssign2.default)({}, style)) }, other), | |
footerRows | |
); | |
} | |
}]); | |
return TableFooter; | |
}(_react.Component); | |
TableFooter.muiName = 'TableFooter'; | |
TableFooter.propTypes = { | |
/** | |
* @ignore | |
* Controls whether or not header rows should be adjusted | |
* for a checkbox column. If the select all checkbox is true, | |
* this property will not influence the number of columns. | |
* This is mainly useful for "super header" rows so that | |
* the checkbox column does not create an offset that needs | |
* to be accounted for manually. | |
*/ | |
adjustForCheckbox: _react.PropTypes.bool, | |
/** | |
* Children passed to table footer. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
TableFooter.defaultProps = { | |
adjustForCheckbox: true, | |
style: {} | |
}; | |
TableFooter.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = TableFooter; | |
/***/ }, | |
/* 71 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _Checkbox = __webpack_require__(32); | |
var _Checkbox2 = _interopRequireDefault(_Checkbox); | |
var _TableHeaderColumn = __webpack_require__(40); | |
var _TableHeaderColumn2 = _interopRequireDefault(_TableHeaderColumn); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var tableHeader = context.muiTheme.tableHeader; | |
return { | |
root: { | |
borderBottom: '1px solid ' + tableHeader.borderColor | |
} | |
}; | |
} | |
var TableHeader = function (_Component) { | |
_inherits(TableHeader, _Component); | |
function TableHeader() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, TableHeader); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableHeader)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleCheckAll = function (event, checked) { | |
if (_this.props.onSelectAll) _this.props.onSelectAll(checked); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(TableHeader, [{ | |
key: 'createSuperHeaderRows', | |
value: function createSuperHeaderRows() { | |
var numChildren = _react2.default.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 (!_react2.default.isValidElement(child)) continue; | |
var props = { | |
key: 'sh' + index, | |
rowNumber: index | |
}; | |
superHeaders.push(this.createSuperHeaderRow(child, props)); | |
} | |
if (superHeaders.length) return superHeaders; | |
} | |
}, { | |
key: 'createSuperHeaderRow', | |
value: function createSuperHeaderRow(child, props) { | |
var children = []; | |
if (this.props.adjustForCheckbox) { | |
children.push(this.getCheckboxPlaceholder(props)); | |
} | |
_react2.default.Children.forEach(child.props.children, function (child) { | |
children.push(child); | |
}); | |
return _react2.default.cloneElement(child, props, children); | |
} | |
}, { | |
key: 'createBaseHeaderRow', | |
value: function createBaseHeaderRow() { | |
var numChildren = _react2.default.Children.count(this.props.children); | |
var child = numChildren === 1 ? this.props.children : this.props.children[numChildren - 1]; | |
var props = { | |
key: 'h' + numChildren, | |
rowNumber: numChildren | |
}; | |
var children = [this.getSelectAllCheckboxColumn(props)]; | |
_react2.default.Children.forEach(child.props.children, function (child) { | |
children.push(child); | |
}); | |
return _react2.default.cloneElement(child, props, children); | |
} | |
}, { | |
key: 'getCheckboxPlaceholder', | |
value: function getCheckboxPlaceholder(props) { | |
if (!this.props.adjustForCheckbox) return null; | |
var key = 'hpcb' + props.rowNumber; | |
return _react2.default.createElement(_TableHeaderColumn2.default, { key: key, style: { width: 24 } }); | |
} | |
}, { | |
key: 'getSelectAllCheckboxColumn', | |
value: function getSelectAllCheckboxColumn(props) { | |
if (!this.props.displaySelectAll) return this.getCheckboxPlaceholder(props); | |
var checkbox = _react2.default.createElement(_Checkbox2.default, { | |
key: 'selectallcb', | |
name: 'selectallcb', | |
value: 'selected', | |
disabled: !this.props.enableSelectAll, | |
checked: this.props.selectAllSelected, | |
onCheck: this.handleCheckAll | |
}); | |
var key = 'hpcb' + props.rowNumber; | |
return _react2.default.createElement( | |
_TableHeaderColumn2.default, | |
{ key: key, style: { width: 24 } }, | |
checkbox | |
); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var className = _props.className; | |
var style = _props.style; | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var superHeaderRows = this.createSuperHeaderRows(); | |
var baseHeaderRow = this.createBaseHeaderRow(); | |
return _react2.default.createElement( | |
'thead', | |
{ className: className, style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, | |
superHeaderRows, | |
baseHeaderRow | |
); | |
} | |
}]); | |
return TableHeader; | |
}(_react.Component); | |
TableHeader.muiName = 'TableHeader'; | |
TableHeader.propTypes = { | |
/** | |
* Controls whether or not header rows should be | |
* adjusted for a checkbox column. If the select all | |
* checkbox is true, this property will not influence | |
* the number of columns. This is mainly useful for | |
* "super header" rows so that the checkbox column | |
* does not create an offset that needs to be accounted | |
* for manually. | |
*/ | |
adjustForCheckbox: _react.PropTypes.bool, | |
/** | |
* Children passed to table header. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* Controls whether or not the select all checkbox is displayed. | |
*/ | |
displaySelectAll: _react.PropTypes.bool, | |
/** | |
* If set to true, the select all button will be interactable. | |
* If set to false, the button will not be interactable. | |
* To hide the checkbox, set displaySelectAll to false. | |
*/ | |
enableSelectAll: _react.PropTypes.bool, | |
/** | |
* @ignore | |
* Callback when select all has been checked. | |
*/ | |
onSelectAll: _react.PropTypes.func, | |
/** | |
* @ignore | |
* True when select all has been checked. | |
*/ | |
selectAllSelected: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
TableHeader.defaultProps = { | |
adjustForCheckbox: true, | |
displaySelectAll: true, | |
enableSelectAll: true, | |
selectAllSelected: false | |
}; | |
TableHeader.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = TableHeader; | |
/***/ }, | |
/* 72 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context, state) { | |
var tableRow = context.muiTheme.tableRow; | |
var cellBgColor = 'inherit'; | |
if (props.hovered || state.hovered) { | |
cellBgColor = tableRow.hoverColor; | |
} else if (props.selected) { | |
cellBgColor = tableRow.selectedColor; | |
} else if (props.striped) { | |
cellBgColor = tableRow.stripeColor; | |
} | |
return { | |
root: { | |
borderBottom: props.displayBorder && '1px solid ' + tableRow.borderColor, | |
color: tableRow.textColor, | |
height: tableRow.height | |
}, | |
cell: { | |
backgroundColor: cellBgColor | |
} | |
}; | |
} | |
var TableRow = function (_Component) { | |
_inherits(TableRow, _Component); | |
function TableRow() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, TableRow); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRow)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
hovered: false | |
}, _this.onCellClick = function (event, columnIndex) { | |
if (_this.props.selectable && _this.props.onCellClick) { | |
_this.props.onCellClick(event, _this.props.rowNumber, columnIndex); | |
} | |
event.ctrlKey = true; | |
_this.onRowClick(event); | |
}, _this.onCellHover = function (event, columnIndex) { | |
if (_this.props.hoverable) { | |
_this.setState({ hovered: true }); | |
if (_this.props.onCellHover) _this.props.onCellHover(event, _this.props.rowNumber, columnIndex); | |
_this.onRowHover(event); | |
} | |
}, _this.onCellHoverExit = function (event, columnIndex) { | |
if (_this.props.hoverable) { | |
_this.setState({ hovered: false }); | |
if (_this.props.onCellHoverExit) _this.props.onCellHoverExit(event, _this.props.rowNumber, columnIndex); | |
_this.onRowHoverExit(event); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(TableRow, [{ | |
key: 'onRowClick', | |
value: function onRowClick(event) { | |
if (this.props.selectable && this.props.onRowClick) this.props.onRowClick(event, this.props.rowNumber); | |
} | |
}, { | |
key: 'onRowHover', | |
value: function onRowHover(event) { | |
if (this.props.onRowHover) this.props.onRowHover(event, this.props.rowNumber); | |
} | |
}, { | |
key: 'onRowHoverExit', | |
value: function onRowHoverExit(event) { | |
if (this.props.onRowHoverExit) this.props.onRowHoverExit(event, this.props.rowNumber); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _this2 = this; | |
var _props = this.props; | |
var className = _props.className; | |
var displayBorder = _props.displayBorder; | |
var // eslint-disable-line no-unused-vars | |
hoverable = _props.hoverable; | |
var // eslint-disable-line no-unused-vars | |
onCellClick = _props.onCellClick; | |
var // eslint-disable-line no-unused-vars | |
onCellHover = _props.onCellHover; | |
var // eslint-disable-line no-unused-vars | |
onCellHoverExit = _props.onCellHoverExit; | |
var // eslint-disable-line no-unused-vars | |
onRowClick = _props.onRowClick; | |
var // eslint-disable-line no-unused-vars | |
onRowHover = _props.onRowHover; | |
var // eslint-disable-line no-unused-vars | |
onRowHoverExit = _props.onRowHoverExit; | |
var // eslint-disable-line no-unused-vars | |
rowNumber = _props.rowNumber; | |
var // eslint-disable-line no-unused-vars | |
selectable = _props.selectable; | |
var // eslint-disable-line no-unused-vars | |
selected = _props.selected; | |
var // eslint-disable-line no-unused-vars | |
striped = _props.striped; | |
var // eslint-disable-line no-unused-vars | |
style = _props.style; | |
var other = _objectWithoutProperties(_props, ['className', 'displayBorder', 'hoverable', 'onCellClick', 'onCellHover', 'onCellHoverExit', 'onRowClick', 'onRowHover', 'onRowHoverExit', 'rowNumber', 'selectable', 'selected', 'striped', 'style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context, this.state); | |
var rowColumns = _react2.default.Children.map(this.props.children, function (child, columnNumber) { | |
if (_react2.default.isValidElement(child)) { | |
return _react2.default.cloneElement(child, { | |
columnNumber: columnNumber, | |
hoverable: _this2.props.hoverable, | |
key: _this2.props.rowNumber + '-' + columnNumber, | |
onClick: _this2.onCellClick, | |
onHover: _this2.onCellHover, | |
onHoverExit: _this2.onCellHoverExit, | |
style: (0, _simpleAssign2.default)({}, styles.cell, child.props.style) | |
}); | |
} | |
}); | |
return _react2.default.createElement( | |
'tr', | |
_extends({ | |
className: className, | |
style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) | |
}, other), | |
rowColumns | |
); | |
} | |
}]); | |
return TableRow; | |
}(_react.Component); | |
TableRow.propTypes = { | |
/** | |
* Children passed to table row. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* If true, row border will be displayed for the row. | |
* If false, no border will be drawn. | |
*/ | |
displayBorder: _react.PropTypes.bool, | |
/** | |
* Controls whether or not the row reponseds to hover events. | |
*/ | |
hoverable: _react.PropTypes.bool, | |
/** | |
* Controls whether or not the row should be rendered as being | |
* hovered. This property is evaluated in addition to this.state.hovered | |
* and can be used to synchronize the hovered state with some other | |
* external events. | |
*/ | |
hovered: _react.PropTypes.bool, | |
/** | |
* @ignore | |
* Called when a row cell is clicked. | |
* rowNumber is the row number and columnId is | |
* the column number or the column key. | |
*/ | |
onCellClick: _react.PropTypes.func, | |
/** | |
* @ignore | |
* Called when a table cell is hovered. | |
* rowNumber is the row number of the hovered row | |
* and columnId is the column number or the column key of the cell. | |
*/ | |
onCellHover: _react.PropTypes.func, | |
/** | |
* @ignore | |
* Called when a table cell is no longer hovered. | |
* rowNumber is the row number of the row and columnId | |
* is the column number or the column key of the cell. | |
*/ | |
onCellHoverExit: _react.PropTypes.func, | |
/** | |
* @ignore | |
* Called when row is clicked. | |
*/ | |
onRowClick: _react.PropTypes.func, | |
/** | |
* @ignore | |
* Called when a table row is hovered. | |
* rowNumber is the row number of the hovered row. | |
*/ | |
onRowHover: _react.PropTypes.func, | |
/** | |
* @ignore | |
* Called when a table row is no longer hovered. | |
* rowNumber is the row number of the row that is no longer hovered. | |
*/ | |
onRowHoverExit: _react.PropTypes.func, | |
/** | |
* Number to identify the row. This property is | |
* automatically populated when used with the TableBody component. | |
*/ | |
rowNumber: _react.PropTypes.number, | |
/** | |
* If true, table rows can be selected. If multiple row | |
* selection is desired, enable multiSelectable. | |
* The default value is true. | |
*/ | |
selectable: _react.PropTypes.bool, | |
/** | |
* Indicates that a particular row is selected. | |
* This property can be used to programmatically select rows. | |
*/ | |
selected: _react.PropTypes.bool, | |
/** | |
* Indicates whether or not the row is striped. | |
*/ | |
striped: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
TableRow.defaultProps = { | |
displayBorder: true, | |
hoverable: false, | |
hovered: false, | |
selectable: true, | |
selected: false, | |
striped: false | |
}; | |
TableRow.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = TableRow; | |
/***/ }, | |
/* 73 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _EnhancedButton = __webpack_require__(11); | |
var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var tabs = context.muiTheme.tabs; | |
return { | |
root: { | |
color: props.selected ? tabs.selectedTextColor : tabs.textColor, | |
fontWeight: 500, | |
fontSize: 14, | |
width: props.width, | |
textTransform: 'uppercase', | |
padding: 0 | |
}, | |
button: { | |
display: 'flex', | |
flexDirection: 'column', | |
alignItems: 'center', | |
justifyContent: 'center', | |
height: props.label && props.icon ? 72 : 48 | |
} | |
}; | |
} | |
var Tab = function (_Component) { | |
_inherits(Tab, _Component); | |
function Tab() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, Tab); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tab)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleTouchTap = function (event) { | |
if (_this.props.onTouchTap) { | |
_this.props.onTouchTap(_this.props.value, event, _this); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(Tab, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var | |
/* eslint-disable no-unused-vars */ | |
onActive = _props.onActive; | |
var onTouchTap = _props.onTouchTap; | |
var selected = _props.selected; | |
var value = _props.value; | |
var width = _props.width; | |
var | |
/* eslint-enable no-unused-vars */ | |
label = _props.label; | |
var style = _props.style; | |
var icon = _props.icon; | |
var other = _objectWithoutProperties(_props, ['onActive', 'onTouchTap', 'selected', 'value', 'width', 'label', 'style', 'icon']); | |
var styles = getStyles(this.props, this.context); | |
var iconElement = void 0; | |
if (icon && _react2.default.isValidElement(icon)) { | |
var iconProps = { | |
style: { | |
fontSize: 24, | |
color: styles.root.color, | |
marginBottom: label ? 5 : 0 | |
} | |
}; | |
// If it's svg icon set color via props | |
if (icon.type.muiName !== 'FontIcon') { | |
iconProps.color = styles.root.color; | |
} | |
iconElement = _react2.default.cloneElement(icon, iconProps); | |
} | |
var rippleOpacity = 0.3; | |
var rippleColor = this.context.muiTheme.tabs.selectedTextColor; | |
return _react2.default.createElement( | |
_EnhancedButton2.default, | |
_extends({}, other, { | |
style: (0, _simpleAssign2.default)(styles.root, style), | |
focusRippleColor: rippleColor, | |
touchRippleColor: rippleColor, | |
focusRippleOpacity: rippleOpacity, | |
touchRippleOpacity: rippleOpacity, | |
onTouchTap: this.handleTouchTap | |
}), | |
_react2.default.createElement( | |
'div', | |
{ style: styles.button }, | |
iconElement, | |
label | |
) | |
); | |
} | |
}]); | |
return Tab; | |
}(_react.Component); | |
Tab.muiName = 'Tab'; | |
Tab.propTypes = { | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* Sets the icon of the tab, you can pass `FontIcon` or `SvgIcon` elements. | |
*/ | |
icon: _react.PropTypes.node, | |
/** | |
* Sets the text value of the tab item to the string specified. | |
*/ | |
label: _react.PropTypes.node, | |
/** | |
* Fired when the active tab changes by touch or tap. | |
* Use this event to specify any functionality when an active tab changes. | |
* For example - we are using this to route to home when the third tab becomes active. | |
* This function will always recieve the active tab as it\'s first argument. | |
*/ | |
onActive: _react.PropTypes.func, | |
/** | |
* @ignore | |
* This property is overriden by the Tabs component. | |
*/ | |
onTouchTap: _react.PropTypes.func, | |
/** | |
* @ignore | |
* Defines if the current tab is selected or not. | |
* The Tabs component is responsible for setting this property. | |
*/ | |
selected: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* If value prop passed to Tabs component, this value prop is also required. | |
* It assigns a value to the tab so that it can be selected by the Tabs. | |
*/ | |
value: _react.PropTypes.any, | |
/** | |
* @ignore | |
* This property is overriden by the Tabs component. | |
*/ | |
width: _react.PropTypes.string | |
}; | |
Tab.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = Tab; | |
/***/ }, | |
/* 74 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _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 = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _timeUtils = __webpack_require__(22); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
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' | |
} | |
}; | |
var muiTheme = context.muiTheme; | |
var pos = props.value; | |
if (props.type === 'hour') { | |
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]]; | |
if (props.isSelected) { | |
styles.root.backgroundColor = muiTheme.timePicker.accentColor; | |
styles.root.color = muiTheme.timePicker.selectTextColor; | |
} | |
var transformPos = positions[pos]; | |
if ((0, _timeUtils.isInner)(props)) { | |
styles.root.width = 28; | |
styles.root.height = 28; | |
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 styles; | |
} | |
var ClockNumber = function (_Component) { | |
_inherits(ClockNumber, _Component); | |
function ClockNumber() { | |
_classCallCheck(this, ClockNumber); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(ClockNumber).apply(this, arguments)); | |
} | |
_createClass(ClockNumber, [{ | |
key: 'render', | |
value: function render() { | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var clockNumber = this.props.value === 0 ? '00' : this.props.value; | |
return _react2.default.createElement( | |
'span', | |
{ style: prepareStyles(styles.root) }, | |
clockNumber | |
); | |
} | |
}]); | |
return ClockNumber; | |
}(_react.Component); | |
ClockNumber.propTypes = { | |
isSelected: _react.PropTypes.bool, | |
onSelected: _react.PropTypes.func, | |
type: _react.PropTypes.oneOf(['hour', 'minute']), | |
value: _react.PropTypes.number | |
}; | |
ClockNumber.defaultProps = { | |
value: 0, | |
type: 'minute', | |
isSelected: false | |
}; | |
ClockNumber.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = ClockNumber; | |
/***/ }, | |
/* 75 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _timeUtils = __webpack_require__(22); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function calcAngle(value, base) { | |
value %= base; | |
var angle = 360 / base * value; | |
return angle; | |
} | |
function getStyles(props, context, state) { | |
var hasSelected = props.hasSelected; | |
var type = props.type; | |
var value = props.value; | |
var inner = state.inner; | |
var timePicker = context.muiTheme.timePicker; | |
var angle = type === 'hour' ? calcAngle(value, 12) : calcAngle(value, 60); | |
var styles = { | |
root: { | |
height: inner ? '30%' : '40%', | |
background: timePicker.accentColor, | |
width: 2, | |
left: 'calc(50% - 1px)', | |
position: 'absolute', | |
bottom: '50%', | |
transformOrigin: 'bottom', | |
pointerEvents: 'none', | |
transform: 'rotateZ(' + angle + 'deg)' | |
}, | |
mark: { | |
background: timePicker.selectTextColor, | |
border: '4px solid ' + timePicker.accentColor, | |
display: hasSelected && 'none', | |
width: 7, | |
height: 7, | |
position: 'absolute', | |
top: -5, | |
left: -6, | |
borderRadius: '100%' | |
} | |
}; | |
return styles; | |
} | |
var ClockPointer = function (_Component) { | |
_inherits(ClockPointer, _Component); | |
function ClockPointer() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, ClockPointer); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ClockPointer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
inner: (0, _timeUtils.isInner)(_this.props) | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(ClockPointer, [{ | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
this.setState({ | |
inner: (0, _timeUtils.isInner)(nextProps) | |
}); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
if (this.props.value === null) { | |
return _react2.default.createElement('span', null); | |
} | |
var styles = getStyles(this.props, this.context, this.state); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
return _react2.default.createElement( | |
'div', | |
{ style: prepareStyles(styles.root) }, | |
_react2.default.createElement('div', { style: prepareStyles(styles.mark) }) | |
); | |
} | |
}]); | |
return ClockPointer; | |
}(_react.Component); | |
ClockPointer.propTypes = { | |
hasSelected: _react.PropTypes.bool, | |
type: _react.PropTypes.oneOf(['hour', 'minute']), | |
value: _react.PropTypes.number | |
}; | |
ClockPointer.defaultProps = { | |
value: null, | |
type: 'minute', | |
hasSelected: false | |
}; | |
ClockPointer.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = ClockPointer; | |
/***/ }, | |
/* 76 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var firstChild = props.firstChild; | |
var lastChild = props.lastChild; | |
var _context$muiTheme = context.muiTheme; | |
var baseTheme = _context$muiTheme.baseTheme; | |
var button = _context$muiTheme.button; | |
var toolbar = _context$muiTheme.toolbar; | |
var marginHorizontal = baseTheme.spacing.desktopGutter; | |
var marginVertical = (toolbar.height - button.height) / 2; | |
var styles = { | |
root: { | |
position: 'relative', | |
marginLeft: firstChild ? -marginHorizontal : undefined, | |
marginRight: lastChild ? -marginHorizontal : undefined, | |
display: 'flex', | |
justifyContent: 'space-between' | |
}, | |
dropDownMenu: { | |
root: { | |
color: toolbar.color, // removes hover color change, we want to keep it | |
marginRight: baseTheme.spacing.desktopGutter, | |
flex: 1, | |
whiteSpace: 'nowrap' | |
}, | |
controlBg: { | |
backgroundColor: toolbar.menuHoverColor, | |
borderRadius: 0 | |
}, | |
underline: { | |
display: 'none' | |
} | |
}, | |
button: { | |
margin: marginVertical + 'px ' + marginHorizontal + 'px', | |
position: 'relative' | |
}, | |
icon: { | |
root: { | |
cursor: 'pointer', | |
color: toolbar.iconColor, | |
lineHeight: toolbar.height + 'px', | |
paddingLeft: baseTheme.spacing.desktopGutter | |
}, | |
hover: { | |
color: toolbar.hoverColor | |
} | |
}, | |
span: { | |
color: toolbar.iconColor, | |
lineHeight: toolbar.height + 'px' | |
} | |
}; | |
return styles; | |
} | |
var ToolbarGroup = function (_Component) { | |
_inherits(ToolbarGroup, _Component); | |
function ToolbarGroup() { | |
_classCallCheck(this, ToolbarGroup); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(ToolbarGroup).apply(this, arguments)); | |
} | |
_createClass(ToolbarGroup, [{ | |
key: 'handleMouseEnterFontIcon', | |
value: function handleMouseEnterFontIcon(style) { | |
return function (event) { | |
event.target.style.zIndex = style.hover.zIndex; | |
event.target.style.color = style.hover.color; | |
}; | |
} | |
}, { | |
key: 'handleMouseLeaveFontIcon', | |
value: function handleMouseLeaveFontIcon(style) { | |
return function (event) { | |
event.target.style.zIndex = 'auto'; | |
event.target.style.color = style.root.color; | |
}; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _this2 = this; | |
var _props = this.props; | |
var children = _props.children; | |
var className = _props.className; | |
var style = _props.style; | |
var other = _objectWithoutProperties(_props, ['children', 'className', 'style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var newChildren = _react2.default.Children.map(children, function (currentChild) { | |
if (!currentChild) { | |
return null; | |
} | |
if (!currentChild.type) { | |
return currentChild; | |
} | |
switch (currentChild.type.muiName) { | |
case 'DropDownMenu': | |
return _react2.default.cloneElement(currentChild, { | |
style: (0, _simpleAssign2.default)({}, styles.dropDownMenu.root, currentChild.props.style), | |
styleControlBg: styles.dropDownMenu.controlBg, | |
styleUnderline: styles.dropDownMenu.underline | |
}); | |
case 'RaisedButton': | |
case 'FlatButton': | |
return _react2.default.cloneElement(currentChild, { | |
style: (0, _simpleAssign2.default)({}, styles.button, currentChild.props.style) | |
}); | |
case 'FontIcon': | |
return _react2.default.cloneElement(currentChild, { | |
style: (0, _simpleAssign2.default)({}, styles.icon.root, currentChild.props.style), | |
onMouseEnter: _this2.handleMouseEnterFontIcon(styles.icon), | |
onMouseLeave: _this2.handleMouseLeaveFontIcon(styles.icon) | |
}); | |
case 'ToolbarSeparator': | |
case 'ToolbarTitle': | |
return _react2.default.cloneElement(currentChild, { | |
style: (0, _simpleAssign2.default)({}, styles.span, currentChild.props.style) | |
}); | |
default: | |
return currentChild; | |
} | |
}, this); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { className: className, style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, style)) }), | |
newChildren | |
); | |
} | |
}]); | |
return ToolbarGroup; | |
}(_react.Component); | |
ToolbarGroup.propTypes = { | |
/** | |
* Can be any node or number of nodes. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* Set this to true for if the `ToolbarGroup` is the first child of `Toolbar` | |
* to prevent setting the left gap. | |
*/ | |
firstChild: _react.PropTypes.bool, | |
/** | |
* Determines the side the `ToolbarGroup` will snap to. Either 'left' or 'right'. | |
*/ | |
float: _react.PropTypes.oneOf(['left', 'right']), | |
/** | |
* Set this to true for if the `ToolbarGroup` is the last child of `Toolbar` | |
* to prevent setting the right gap. | |
*/ | |
lastChild: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
ToolbarGroup.defaultProps = { | |
firstChild: false, | |
lastChild: false | |
}; | |
ToolbarGroup.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = ToolbarGroup; | |
/***/ }, | |
/* 77 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var _context$muiTheme = context.muiTheme; | |
var baseTheme = _context$muiTheme.baseTheme; | |
var toolbar = _context$muiTheme.toolbar; | |
return { | |
root: { | |
backgroundColor: toolbar.separatorColor, | |
display: 'inline-block', | |
height: baseTheme.spacing.desktopGutterMore, | |
marginLeft: baseTheme.spacing.desktopGutter, | |
position: 'relative', | |
top: (toolbar.height - baseTheme.spacing.desktopGutterMore) / 2, | |
width: 1 | |
} | |
}; | |
} | |
var ToolbarSeparator = function (_Component) { | |
_inherits(ToolbarSeparator, _Component); | |
function ToolbarSeparator() { | |
_classCallCheck(this, ToolbarSeparator); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(ToolbarSeparator).apply(this, arguments)); | |
} | |
_createClass(ToolbarSeparator, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var className = _props.className; | |
var style = _props.style; | |
var other = _objectWithoutProperties(_props, ['className', 'style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
return _react2.default.createElement('span', _extends({}, other, { className: className, style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, style)) })); | |
} | |
}]); | |
return ToolbarSeparator; | |
}(_react.Component); | |
ToolbarSeparator.muiName = 'ToolbarSeparator'; | |
ToolbarSeparator.propTypes = { | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
ToolbarSeparator.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = ToolbarSeparator; | |
/***/ }, | |
/* 78 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var _context$muiTheme = context.muiTheme; | |
var baseTheme = _context$muiTheme.baseTheme; | |
var toolbar = _context$muiTheme.toolbar; | |
return { | |
root: { | |
paddingRight: baseTheme.spacing.desktopGutterLess, | |
lineHeight: toolbar.height + 'px', | |
fontSize: toolbar.titleFontSize, | |
position: 'relative', | |
textOverflow: 'ellipsis', | |
whiteSpace: 'nowrap', | |
overflow: 'hidden' | |
} | |
}; | |
} | |
var ToolbarTitle = function (_Component) { | |
_inherits(ToolbarTitle, _Component); | |
function ToolbarTitle() { | |
_classCallCheck(this, ToolbarTitle); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(ToolbarTitle).apply(this, arguments)); | |
} | |
_createClass(ToolbarTitle, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var className = _props.className; | |
var style = _props.style; | |
var text = _props.text; | |
var other = _objectWithoutProperties(_props, ['className', 'style', 'text']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
return _react2.default.createElement( | |
'span', | |
_extends({}, other, { className: className, style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, style)) }), | |
text | |
); | |
} | |
}]); | |
return ToolbarTitle; | |
}(_react.Component); | |
ToolbarTitle.muiName = 'ToolbarTitle'; | |
ToolbarTitle.propTypes = { | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The text to be displayed. | |
*/ | |
text: _react.PropTypes.string | |
}; | |
ToolbarTitle.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = ToolbarTitle; | |
/***/ }, | |
/* 79 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _BeforeAfterWrapper = __webpack_require__(186); | |
var _BeforeAfterWrapper2 = _interopRequireDefault(_BeforeAfterWrapper); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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 styles = { | |
before: { | |
content: "' '", | |
display: 'table' | |
}, | |
after: { | |
content: "' '", | |
clear: 'both', | |
display: 'table' | |
} | |
}; | |
var ClearFix = function ClearFix(_ref) { | |
var style = _ref.style; | |
var children = _ref.children; | |
var other = _objectWithoutProperties(_ref, ['style', 'children']); | |
return _react2.default.createElement( | |
_BeforeAfterWrapper2.default, | |
_extends({}, other, { | |
beforeStyle: styles.before, | |
afterStyle: styles.after, | |
style: style | |
}), | |
children | |
); | |
}; | |
ClearFix.muiName = 'ClearFix'; | |
ClearFix.propTypes = { | |
children: _react.PropTypes.node, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
exports.default = ClearFix; | |
/***/ }, | |
/* 80 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _AutoLockScrolling = __webpack_require__(185); | |
var _AutoLockScrolling2 = _interopRequireDefault(_AutoLockScrolling); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var overlay = context.muiTheme.overlay; | |
var style = { | |
root: { | |
position: 'fixed', | |
height: '100%', | |
width: '100%', | |
top: 0, | |
left: '-100%', | |
opacity: 0, | |
backgroundColor: overlay.backgroundColor, | |
WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)', // Remove mobile color flashing (deprecated) | |
// Two ways to promote overlay to its own render layer | |
willChange: 'opacity', | |
transform: 'translateZ(0)', | |
transition: props.transitionEnabled && _transitions2.default.easeOut('0ms', 'left', '400ms') + ', ' + _transitions2.default.easeOut('400ms', 'opacity') | |
} | |
}; | |
if (props.show) { | |
(0, _simpleAssign2.default)(style.root, { | |
left: 0, | |
opacity: 1, | |
transition: _transitions2.default.easeOut('0ms', 'left') + ', ' + _transitions2.default.easeOut('400ms', 'opacity') | |
}); | |
} | |
return style; | |
} | |
var Overlay = function (_Component) { | |
_inherits(Overlay, _Component); | |
function Overlay() { | |
_classCallCheck(this, Overlay); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(Overlay).apply(this, arguments)); | |
} | |
_createClass(Overlay, [{ | |
key: 'setOpacity', | |
value: function setOpacity(opacity) { | |
this.refs.overlay.style.opacity = opacity; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var autoLockScrolling = _props.autoLockScrolling; | |
var show = _props.show; | |
var style = _props.style; | |
var other = _objectWithoutProperties(_props, ['autoLockScrolling', 'show', 'style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { ref: 'overlay', style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), | |
autoLockScrolling && _react2.default.createElement(_AutoLockScrolling2.default, { lock: show }) | |
); | |
} | |
}]); | |
return Overlay; | |
}(_react.Component); | |
Overlay.propTypes = { | |
autoLockScrolling: _react.PropTypes.bool, | |
show: _react.PropTypes.bool.isRequired, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
transitionEnabled: _react.PropTypes.bool | |
}; | |
Overlay.defaultProps = { | |
autoLockScrolling: true, | |
transitionEnabled: true, | |
style: {} | |
}; | |
Overlay.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = Overlay; | |
/***/ }, | |
/* 81 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _reactDom = __webpack_require__(4); | |
var _reactDom2 = _interopRequireDefault(_reactDom); | |
var _dom = __webpack_require__(87); | |
var _dom2 = _interopRequireDefault(_dom); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
// heavily inspired by https://github.com/Khan/react-components/blob/master/js/layered-component-mixin.jsx | |
var RenderToLayer = function (_Component) { | |
_inherits(RenderToLayer, _Component); | |
function RenderToLayer() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, RenderToLayer); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RenderToLayer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.onClickAway = function (event) { | |
if (event.defaultPrevented) { | |
return; | |
} | |
if (!_this.props.componentClickAway) { | |
return; | |
} | |
if (!_this.props.open) { | |
return; | |
} | |
var el = _this.layer; | |
if (event.target !== el && event.target === window || document.documentElement.contains(event.target) && !_dom2.default.isDescendant(el, event.target)) { | |
_this.props.componentClickAway(event); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(RenderToLayer, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
this.renderLayer(); | |
} | |
}, { | |
key: 'componentDidUpdate', | |
value: function componentDidUpdate() { | |
this.renderLayer(); | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
this.unrenderLayer(); | |
} | |
}, { | |
key: 'getLayer', | |
value: function getLayer() { | |
return this.layer; | |
} | |
}, { | |
key: 'unrenderLayer', | |
value: function unrenderLayer() { | |
if (!this.layer) { | |
return; | |
} | |
if (this.props.useLayerForClickAway) { | |
this.layer.style.position = 'relative'; | |
this.layer.removeEventListener('touchstart', this.onClickAway); | |
this.layer.removeEventListener('click', this.onClickAway); | |
} else { | |
window.removeEventListener('touchstart', this.onClickAway); | |
window.removeEventListener('click', this.onClickAway); | |
} | |
_reactDom2.default.unmountComponentAtNode(this.layer); | |
document.body.removeChild(this.layer); | |
this.layer = null; | |
} | |
}, { | |
key: 'renderLayer', | |
value: function renderLayer() { | |
var _this2 = this; | |
var _props = this.props; | |
var open = _props.open; | |
var render = _props.render; | |
if (open) { | |
if (!this.layer) { | |
this.layer = document.createElement('div'); | |
document.body.appendChild(this.layer); | |
if (this.props.useLayerForClickAway) { | |
this.layer.addEventListener('touchstart', this.onClickAway); | |
this.layer.addEventListener('click', this.onClickAway); | |
this.layer.style.position = 'fixed'; | |
this.layer.style.top = 0; | |
this.layer.style.bottom = 0; | |
this.layer.style.left = 0; | |
this.layer.style.right = 0; | |
this.layer.style.zIndex = this.context.muiTheme.zIndex.layer; | |
} else { | |
setTimeout(function () { | |
window.addEventListener('touchstart', _this2.onClickAway); | |
window.addEventListener('click', _this2.onClickAway); | |
}, 0); | |
} | |
} | |
// By calling this method in componentDidMount() and | |
// componentDidUpdate(), you're effectively creating a "wormhole" that | |
// funnels React's hierarchical updates through to a DOM node on an | |
// entirely different part of the page. | |
var layerElement = render(); | |
if (layerElement === null) { | |
this.layerElement = _reactDom2.default.unstable_renderSubtreeIntoContainer(this, null, this.layer); | |
} else { | |
this.layerElement = _reactDom2.default.unstable_renderSubtreeIntoContainer(this, layerElement, this.layer); | |
} | |
} else { | |
this.unrenderLayer(); | |
} | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
return null; | |
} | |
}]); | |
return RenderToLayer; | |
}(_react.Component); | |
RenderToLayer.propTypes = { | |
componentClickAway: _react.PropTypes.func, | |
open: _react.PropTypes.bool.isRequired, | |
render: _react.PropTypes.func.isRequired, | |
useLayerForClickAway: _react.PropTypes.bool | |
}; | |
RenderToLayer.defaultProps = { | |
useLayerForClickAway: true | |
}; | |
RenderToLayer.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = RenderToLayer; | |
/***/ }, | |
/* 82 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context, state) { | |
var verticalPosition = props.verticalPosition; | |
var horizontalPosition = props.horizontalPosition; | |
var touchMarginOffset = props.touch ? 10 : 0; | |
var touchOffsetTop = props.touch ? -20 : -10; | |
var offset = verticalPosition === 'bottom' ? 14 + touchMarginOffset : -14 - touchMarginOffset; | |
var _context$muiTheme = context.muiTheme; | |
var baseTheme = _context$muiTheme.baseTheme; | |
var zIndex = _context$muiTheme.zIndex; | |
var tooltip = _context$muiTheme.tooltip; | |
var styles = { | |
root: { | |
position: 'absolute', | |
fontFamily: baseTheme.fontFamily, | |
fontSize: '10px', | |
lineHeight: '22px', | |
padding: '0 8px', | |
zIndex: zIndex.tooltip, | |
color: tooltip.color, | |
overflow: 'hidden', | |
top: -10000, | |
borderRadius: 2, | |
userSelect: 'none', | |
opacity: 0, | |
right: horizontalPosition === 'left' ? 12 : null, | |
left: horizontalPosition === 'center' ? (state.offsetWidth - 48) / 2 * -1 : null, | |
transition: _transitions2.default.easeOut('0ms', 'top', '450ms') + ', ' + _transitions2.default.easeOut('450ms', 'transform', '0ms') + ', ' + _transitions2.default.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: _transitions2.default.easeOut('0ms', 'width', '450ms') + ', ' + _transitions2.default.easeOut('0ms', 'height', '450ms') + ', ' + _transitions2.default.easeOut('450ms', 'backgroundColor', '0ms') | |
}, | |
rootWhenShown: { | |
top: verticalPosition === 'top' ? touchOffsetTop : 36, | |
opacity: 0.9, | |
transform: 'translate3d(0px, ' + offset + 'px, 0px)', | |
transition: _transitions2.default.easeOut('0ms', 'top', '0ms') + ', ' + _transitions2.default.easeOut('450ms', 'transform', '0ms') + ', ' + _transitions2.default.easeOut('450ms', 'opacity', '0ms') | |
}, | |
rootWhenTouched: { | |
fontSize: '14px', | |
lineHeight: '32px', | |
padding: '0 16px' | |
}, | |
rippleWhenShown: { | |
backgroundColor: tooltip.rippleBackgroundColor, | |
transition: _transitions2.default.easeOut('450ms', 'width', '0ms') + ', ' + _transitions2.default.easeOut('450ms', 'height', '0ms') + ', ' + _transitions2.default.easeOut('450ms', 'backgroundColor', '0ms') | |
} | |
}; | |
return styles; | |
} | |
var Tooltip = function (_Component) { | |
_inherits(Tooltip, _Component); | |
function Tooltip() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, Tooltip); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tooltip)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
offsetWidth: null | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(Tooltip, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
this.setRippleSize(); | |
this.setTooltipPosition(); | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps() { | |
this.setTooltipPosition(); | |
} | |
}, { | |
key: 'componentDidUpdate', | |
value: function componentDidUpdate() { | |
this.setRippleSize(); | |
} | |
}, { | |
key: 'setRippleSize', | |
value: function setRippleSize() { | |
var ripple = this.refs.ripple; | |
var tooltip = this.refs.tooltip; | |
var tooltipWidth = parseInt(tooltip.offsetWidth, 10) / (this.props.horizontalPosition === 'center' ? 2 : 1); | |
var tooltipHeight = parseInt(tooltip.offsetHeight, 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'; | |
} | |
} | |
}, { | |
key: 'setTooltipPosition', | |
value: function setTooltipPosition() { | |
this.setState({ offsetWidth: this.refs.tooltip.offsetWidth }); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var _props = this.props; | |
var label = _props.label; | |
var other = _objectWithoutProperties(_props, ['label']); | |
var styles = getStyles(this.props, this.context, this.state); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { | |
ref: 'tooltip', | |
style: prepareStyles((0, _simpleAssign2.default)(styles.root, this.props.show && styles.rootWhenShown, this.props.touch && styles.rootWhenTouched, this.props.style)) | |
}), | |
_react2.default.createElement('div', { | |
ref: 'ripple', | |
style: prepareStyles((0, _simpleAssign2.default)(styles.ripple, this.props.show && styles.rippleWhenShown)) | |
}), | |
_react2.default.createElement( | |
'span', | |
{ style: prepareStyles(styles.label) }, | |
label | |
) | |
); | |
} | |
}]); | |
return Tooltip; | |
}(_react.Component); | |
Tooltip.propTypes = { | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
horizontalPosition: _react.PropTypes.oneOf(['left', 'right', 'center']), | |
label: _react.PropTypes.node.isRequired, | |
show: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
touch: _react.PropTypes.bool, | |
verticalPosition: _react.PropTypes.oneOf(['top', 'bottom']) | |
}; | |
Tooltip.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = Tooltip; | |
/***/ }, | |
/* 83 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactDom = __webpack_require__(4); | |
var _reactDom2 = _interopRequireDefault(_reactDom); | |
var _reactAddonsTransitionGroup = __webpack_require__(26); | |
var _reactAddonsTransitionGroup2 = _interopRequireDefault(_reactAddonsTransitionGroup); | |
var _dom = __webpack_require__(87); | |
var _dom2 = _interopRequireDefault(_dom); | |
var _CircleRipple = __webpack_require__(187); | |
var _CircleRipple2 = _interopRequireDefault(_CircleRipple); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); } | |
// Remove the first element of the array | |
var shift = function shift(_ref) { | |
var _ref2 = _toArray(_ref); | |
var newArray = _ref2.slice(1); | |
return newArray; | |
}; | |
var TouchRipple = function (_Component) { | |
_inherits(TouchRipple, _Component); | |
function TouchRipple(props, context) { | |
_classCallCheck(this, TouchRipple); | |
// Touch start produces a mouse down event for compat reasons. To avoid | |
// showing ripples twice we skip showing a ripple for the first mouse down | |
// after a touch start. Note we don't store ignoreNextMouseDown in this.state | |
// to avoid re-rendering when we change it. | |
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(TouchRipple).call(this, props, context)); | |
_this.handleMouseDown = function (event) { | |
// only listen to left clicks | |
if (event.button === 0) { | |
_this.start(event, false); | |
} | |
}; | |
_this.handleMouseUp = function () { | |
_this.end(); | |
}; | |
_this.handleMouseLeave = function () { | |
_this.end(); | |
}; | |
_this.handleTouchStart = function (event) { | |
event.stopPropagation(); | |
// If the user is swiping (not just tapping), save the position so we can | |
// abort ripples if the user appears to be scrolling. | |
if (_this.props.abortOnScroll && event.touches) { | |
_this.startListeningForScrollAbort(event); | |
_this.startTime = Date.now(); | |
} | |
_this.start(event, true); | |
}; | |
_this.handleTouchEnd = function () { | |
_this.end(); | |
}; | |
_this.handleTouchMove = function (event) { | |
// Stop trying to abort if we're already 300ms into the animation | |
var timeSinceStart = Math.abs(Date.now() - _this.startTime); | |
if (timeSinceStart > 300) { | |
_this.stopListeningForScrollAbort(); | |
return; | |
} | |
// If the user is scrolling... | |
var deltaY = Math.abs(event.touches[0].clientY - _this.firstTouchY); | |
var deltaX = Math.abs(event.touches[0].clientX - _this.firstTouchX); | |
// Call it a scroll after an arbitrary 6px (feels reasonable in testing) | |
if (deltaY > 6 || deltaX > 6) { | |
var currentRipples = _this.state.ripples; | |
var ripple = currentRipples[0]; | |
// This clone will replace the ripple in ReactTransitionGroup with a | |
// version that will disappear immediately when removed from the DOM | |
var abortedRipple = _react2.default.cloneElement(ripple, { aborted: true }); | |
// Remove the old ripple and replace it with the new updated one | |
currentRipples = shift(currentRipples); | |
currentRipples = [].concat(_toConsumableArray(currentRipples), [abortedRipple]); | |
_this.setState({ ripples: currentRipples }, function () { | |
// Call end after we've set the ripple to abort otherwise the setState | |
// in end() merges with this and the ripple abort fails | |
_this.end(); | |
}); | |
} | |
}; | |
_this.ignoreNextMouseDown = false; | |
_this.state = { | |
// 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: [] | |
}; | |
return _this; | |
} | |
_createClass(TouchRipple, [{ | |
key: 'start', | |
value: function start(event, isRippleTouchGenerated) { | |
var theme = this.context.muiTheme.ripple; | |
if (this.ignoreNextMouseDown && !isRippleTouchGenerated) { | |
this.ignoreNextMouseDown = false; | |
return; | |
} | |
var ripples = this.state.ripples; | |
// Add a ripple to the ripples array | |
ripples = [].concat(_toConsumableArray(ripples), [_react2.default.createElement(_CircleRipple2.default, { | |
key: this.state.nextKey, | |
style: !this.props.centerRipple ? this.getRippleStyle(event) : {}, | |
color: this.props.color || theme.color, | |
opacity: this.props.opacity, | |
touchGenerated: isRippleTouchGenerated | |
})]); | |
this.ignoreNextMouseDown = isRippleTouchGenerated; | |
this.setState({ | |
hasRipples: true, | |
nextKey: this.state.nextKey + 1, | |
ripples: ripples | |
}); | |
} | |
}, { | |
key: 'end', | |
value: function end() { | |
var currentRipples = this.state.ripples; | |
this.setState({ | |
ripples: shift(currentRipples) | |
}); | |
if (this.props.abortOnScroll) { | |
this.stopListeningForScrollAbort(); | |
} | |
} | |
// Check if the user seems to be scrolling and abort the animation if so | |
}, { | |
key: 'startListeningForScrollAbort', | |
value: function startListeningForScrollAbort(event) { | |
this.firstTouchY = event.touches[0].clientY; | |
this.firstTouchX = event.touches[0].clientX; | |
// Note that when scolling Chrome throttles this event to every 200ms | |
// Also note we don't listen for scroll events directly as there's no general | |
// way to cover cases like scrolling within containers on the page | |
document.body.addEventListener('touchmove', this.handleTouchMove); | |
} | |
}, { | |
key: 'stopListeningForScrollAbort', | |
value: function stopListeningForScrollAbort() { | |
document.body.removeEventListener('touchmove', this.handleTouchMove); | |
} | |
}, { | |
key: 'getRippleStyle', | |
value: function getRippleStyle(event) { | |
var style = {}; | |
var el = _reactDom2.default.findDOMNode(this); | |
var elHeight = el.offsetHeight; | |
var elWidth = el.offsetWidth; | |
var offset = _dom2.default.offset(el); | |
var isTouchEvent = event.touches && event.touches.length; | |
var pageX = isTouchEvent ? event.touches[0].pageX : event.pageX; | |
var pageY = isTouchEvent ? event.touches[0].pageY : event.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; | |
} | |
}, { | |
key: 'calcDiag', | |
value: function calcDiag(a, b) { | |
return Math.sqrt(a * a + b * b); | |
} | |
}, { | |
key: 'render', | |
value: 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 prepareStyles = this.context.muiTheme.prepareStyles; | |
var rippleGroup = void 0; | |
if (hasRipples) { | |
var mergedStyles = (0, _simpleAssign2.default)({ | |
height: '100%', | |
width: '100%', | |
position: 'absolute', | |
top: 0, | |
left: 0, | |
overflow: 'hidden' | |
}, style); | |
rippleGroup = _react2.default.createElement( | |
_reactAddonsTransitionGroup2.default, | |
{ style: prepareStyles(mergedStyles) }, | |
ripples | |
); | |
} | |
return _react2.default.createElement( | |
'div', | |
{ | |
onMouseUp: this.handleMouseUp, | |
onMouseDown: this.handleMouseDown, | |
onMouseLeave: this.handleMouseLeave, | |
onTouchStart: this.handleTouchStart, | |
onTouchEnd: this.handleTouchEnd | |
}, | |
rippleGroup, | |
children | |
); | |
} | |
}]); | |
return TouchRipple; | |
}(_react.Component); | |
TouchRipple.propTypes = { | |
abortOnScroll: _react.PropTypes.bool, | |
centerRipple: _react.PropTypes.bool, | |
children: _react.PropTypes.node, | |
color: _react.PropTypes.string, | |
opacity: _react.PropTypes.number, | |
style: _react.PropTypes.object | |
}; | |
TouchRipple.defaultProps = { | |
abortOnScroll: true | |
}; | |
TouchRipple.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = TouchRipple; | |
/***/ }, | |
/* 84 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _colors = __webpack_require__(23); | |
var _colorManipulator = __webpack_require__(12); | |
var _spacing = __webpack_require__(46); | |
var _spacing2 = _interopRequireDefault(_spacing); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
/** | |
* 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. | |
*/ | |
exports.default = { | |
spacing: _spacing2.default, | |
fontFamily: 'Roboto, sans-serif', | |
palette: { | |
primary1Color: _colors.cyan500, | |
primary2Color: _colors.cyan700, | |
primary3Color: _colors.grey400, | |
accent1Color: _colors.pinkA200, | |
accent2Color: _colors.grey100, | |
accent3Color: _colors.grey500, | |
textColor: _colors.darkBlack, | |
alternateTextColor: _colors.white, | |
canvasColor: _colors.white, | |
borderColor: _colors.grey300, | |
disabledColor: (0, _colorManipulator.fade)(_colors.darkBlack, 0.3), | |
pickerHeaderColor: _colors.cyan500, | |
clockCircleColor: (0, _colorManipulator.fade)(_colors.darkBlack, 0.07), | |
shadowColor: _colors.fullBlack | |
} | |
}; /** | |
* NB: If you update this file, please also update `docs/src/app/customization/Themes.js` | |
*/ | |
/***/ }, | |
/* 85 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _colors = __webpack_require__(23); | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
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; | |
}; | |
exports.default = new Typography(); | |
/***/ }, | |
/* 86 */ | |
/***/ function(module, exports) { | |
"use strict"; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = { | |
menu: 1000, | |
appBar: 1100, | |
drawerOverlay: 1200, | |
drawer: 1300, | |
dialogOverlay: 1400, | |
dialog: 1500, | |
layer: 2000, | |
popover: 2100, | |
snackbar: 2900, | |
tooltip: 3000 | |
}; | |
/***/ }, | |
/* 87 */ | |
/***/ function(module, exports) { | |
"use strict"; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = { | |
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 | |
}; | |
} | |
}; | |
/***/ }, | |
/* 88 */ | |
/***/ function(module, exports) { | |
"use strict"; | |
/** | |
* Copyright (c) 2013-present, Facebook, Inc. | |
* All rights reserved. | |
* | |
* This source code is licensed under the BSD-style license found in the | |
* LICENSE file in the root directory of this source tree. An additional grant | |
* of patent rights can be found in the PATENTS file in the same directory. | |
* | |
* | |
*/ | |
function makeEmptyFunction(arg) { | |
return function () { | |
return arg; | |
}; | |
} | |
/** | |
* This function accepts and discards inputs; it has no side effects. This is | |
* primarily useful idiomatically for overridable function endpoints which | |
* always need to be callable, since JS lacks a null-call idiom ala Cocoa. | |
*/ | |
var emptyFunction = function emptyFunction() {}; | |
emptyFunction.thatReturns = makeEmptyFunction; | |
emptyFunction.thatReturnsFalse = makeEmptyFunction(false); | |
emptyFunction.thatReturnsTrue = makeEmptyFunction(true); | |
emptyFunction.thatReturnsNull = makeEmptyFunction(null); | |
emptyFunction.thatReturnsThis = function () { | |
return this; | |
}; | |
emptyFunction.thatReturnsArgument = function (arg) { | |
return arg; | |
}; | |
module.exports = emptyFunction; | |
/***/ }, | |
/* 89 */ | |
/***/ function(module, exports) { | |
'use strict'; | |
var uppercasePattern = /[A-Z]/g; | |
var msPattern = /^ms-/; | |
function hyphenateStyleName(string) { | |
return string | |
.replace(uppercasePattern, '-$&') | |
.toLowerCase() | |
.replace(msPattern, '-ms-'); | |
} | |
module.exports = hyphenateStyleName; | |
/***/ }, | |
/* 90 */ | |
/***/ function(module, exports) { | |
"use strict"; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = { "Webkit": { "transform": true, "transformOrigin": true, "transformOriginX": true, "transformOriginY": true, "backfaceVisibility": true, "perspective": true, "perspectiveOrigin": true, "transformStyle": true, "transformOriginZ": true, "animation": true, "animationDelay": true, "animationDirection": true, "animationFillMode": true, "animationDuration": true, "animationIterationCount": true, "animationName": true, "animationPlayState": true, "animationTimingFunction": true, "appearance": true, "userSelect": true, "fontKerning": true, "textEmphasisPosition": true, "textEmphasis": true, "textEmphasisStyle": true, "textEmphasisColor": true, "boxDecorationBreak": true, "clipPath": true, "maskImage": true, "maskMode": true, "maskRepeat": true, "maskPosition": true, "maskClip": true, "maskOrigin": true, "maskSize": true, "maskComposite": true, "mask": true, "maskBorderSource": true, "maskBorderMode": true, "maskBorderSlice": true, "maskBorderWidth": true, "maskBorderOutset": true, "maskBorderRepeat": true, "maskBorder": true, "maskType": true, "textDecorationStyle": true, "textDecorationSkip": true, "textDecorationLine": true, "textDecorationColor": true, "filter": true, "fontFeatureSettings": true, "breakAfter": true, "breakBefore": true, "breakInside": true, "columnCount": true, "columnFill": true, "columnGap": true, "columnRule": true, "columnRuleColor": true, "columnRuleStyle": true, "columnRuleWidth": true, "columns": true, "columnSpan": true, "columnWidth": true, "flex": true, "flexBasis": true, "flexDirection": true, "flexGrow": true, "flexFlow": true, "flexShrink": true, "flexWrap": true, "alignContent": true, "alignItems": true, "alignSelf": true, "justifyContent": true, "order": true, "transition": true, "transitionDelay": true, "transitionDuration": true, "transitionProperty": true, "transitionTimingFunction": true, "backdropFilter": true, "scrollSnapType": true, "scrollSnapPointsX": true, "scrollSnapPointsY": true, "scrollSnapDestination": true, "scrollSnapCoordinate": true, "shapeImageThreshold": true, "shapeImageMargin": true, "shapeImageOutside": true, "hyphens": true, "flowInto": true, "flowFrom": true, "regionFragment": true, "textSizeAdjust": true, "borderImage": true, "borderImageOutset": true, "borderImageRepeat": true, "borderImageSlice": true, "borderImageSource": true, "borderImageWidth": true, "tabSize": true, "objectFit": true, "objectPosition": true }, "Moz": { "appearance": true, "userSelect": true, "boxSizing": true, "textAlignLast": true, "textDecorationStyle": true, "textDecorationSkip": true, "textDecorationLine": true, "textDecorationColor": true, "tabSize": true, "hyphens": true, "fontFeatureSettings": true, "breakAfter": true, "breakBefore": true, "breakInside": true, "columnCount": true, "columnFill": true, "columnGap": true, "columnRule": true, "columnRuleColor": true, "columnRuleStyle": true, "columnRuleWidth": true, "columns": true, "columnSpan": true, "columnWidth": true }, "ms": { "flex": true, "flexBasis": false, "flexDirection": true, "flexGrow": false, "flexFlow": true, "flexShrink": false, "flexWrap": true, "alignContent": false, "alignItems": false, "alignSelf": false, "justifyContent": false, "order": false, "transform": true, "transformOrigin": true, "transformOriginX": true, "transformOriginY": true, "userSelect": true, "wrapFlow": true, "wrapThrough": true, "wrapMargin": true, "scrollSnapType": true, "scrollSnapPointsX": true, "scrollSnapPointsY": true, "scrollSnapDestination": true, "scrollSnapCoordinate": true, "touchAction": true, "hyphens": true, "flowInto": true, "flowFrom": true, "breakBefore": true, "breakAfter": true, "breakInside": true, "regionFragment": true, "gridTemplateColumns": true, "gridTemplateRows": true, "gridTemplateAreas": true, "gridTemplate": true, "gridAutoColumns": true, "gridAutoRows": true, "gridAutoFlow": true, "grid": true, "gridRowStart": true, "gridColumnStart": true, "gridRowEnd": true, "gridRow": true, "gridColumn": true, "gridColumnEnd": true, "gridColumnGap": true, "gridRowGap": true, "gridArea": true, "gridGap": true, "textSizeAdjust": true } }; | |
module.exports = exports["default"]; | |
/***/ }, | |
/* 91 */ | |
/***/ function(module, exports) { | |
"use strict"; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
// light polyfill for Object.assign | |
exports.default = function (base) { | |
var extend = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; | |
return Object.keys(extend).reduce(function (out, key) { | |
out[key] = extend[key]; | |
return out; | |
}, base); | |
}; | |
module.exports = exports["default"]; | |
/***/ }, | |
/* 92 */ | |
/***/ function(module, exports, __webpack_require__) { | |
/** | |
* lodash 4.3.0 (Custom Build) <https://lodash.com/> | |
* Build: `lodash modularize exports="npm" -o ./` | |
* Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/> | |
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE> | |
* Copyright 2009-2016 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors | |
* Available under MIT license <https://lodash.com/license> | |
*/ | |
var Stack = __webpack_require__(243), | |
baseClone = __webpack_require__(241), | |
isPlainObject = __webpack_require__(245), | |
keysIn = __webpack_require__(246), | |
rest = __webpack_require__(247); | |
/** Used as references for various `Number` constants. */ | |
var MAX_SAFE_INTEGER = 9007199254740991; | |
/** `Object#toString` result references. */ | |
var argsTag = '[object Arguments]', | |
arrayTag = '[object Array]', | |
boolTag = '[object Boolean]', | |
dateTag = '[object Date]', | |
errorTag = '[object Error]', | |
funcTag = '[object Function]', | |
genTag = '[object GeneratorFunction]', | |
mapTag = '[object Map]', | |
numberTag = '[object Number]', | |
objectTag = '[object Object]', | |
regexpTag = '[object RegExp]', | |
setTag = '[object Set]', | |
stringTag = '[object String]', | |
weakMapTag = '[object WeakMap]'; | |
var arrayBufferTag = '[object ArrayBuffer]', | |
float32Tag = '[object Float32Array]', | |
float64Tag = '[object Float64Array]', | |
int8Tag = '[object Int8Array]', | |
int16Tag = '[object Int16Array]', | |
int32Tag = '[object Int32Array]', | |
uint8Tag = '[object Uint8Array]', | |
uint8ClampedTag = '[object Uint8ClampedArray]', | |
uint16Tag = '[object Uint16Array]', | |
uint32Tag = '[object Uint32Array]'; | |
/** Used to detect unsigned integer values. */ | |
var reIsUint = /^(?:0|[1-9]\d*)$/; | |
/** Used to identify `toStringTag` values of typed arrays. */ | |
var typedArrayTags = {}; | |
typedArrayTags[float32Tag] = typedArrayTags[float64Tag] = | |
typedArrayTags[int8Tag] = typedArrayTags[int16Tag] = | |
typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] = | |
typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] = | |
typedArrayTags[uint32Tag] = true; | |
typedArrayTags[argsTag] = typedArrayTags[arrayTag] = | |
typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] = | |
typedArrayTags[dateTag] = typedArrayTags[errorTag] = | |
typedArrayTags[funcTag] = typedArrayTags[mapTag] = | |
typedArrayTags[numberTag] = typedArrayTags[objectTag] = | |
typedArrayTags[regexpTag] = typedArrayTags[setTag] = | |
typedArrayTags[stringTag] = typedArrayTags[weakMapTag] = false; | |
/** | |
* A specialized version of `_.forEach` for arrays without support for | |
* iteratee shorthands. | |
* | |
* @private | |
* @param {Array} array The array to iterate over. | |
* @param {Function} iteratee The function invoked per iteration. | |
* @returns {Array} Returns `array`. | |
*/ | |
function arrayEach(array, iteratee) { | |
var index = -1, | |
length = array.length; | |
while (++index < length) { | |
if (iteratee(array[index], index, array) === false) { | |
break; | |
} | |
} | |
return array; | |
} | |
/** | |
* Checks if `value` is a valid array-like index. | |
* | |
* @private | |
* @param {*} value The value to check. | |
* @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index. | |
* @returns {boolean} Returns `true` if `value` is a valid index, else `false`. | |
*/ | |
function isIndex(value, length) { | |
value = (typeof value == 'number' || reIsUint.test(value)) ? +value : -1; | |
length = length == null ? MAX_SAFE_INTEGER : length; | |
return value > -1 && value % 1 == 0 && value < length; | |
} | |
/** Used for built-in method references. */ | |
var objectProto = Object.prototype; | |
/** Used to check objects for own properties. */ | |
var hasOwnProperty = objectProto.hasOwnProperty; | |
/** | |
* Used to resolve the [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring) | |
* of values. | |
*/ | |
var objectToString = objectProto.toString; | |
/** Built-in value references. */ | |
var propertyIsEnumerable = objectProto.propertyIsEnumerable; | |
/** | |
* This function is like `assignValue` except that it doesn't assign `undefined` values. | |
* | |
* @private | |
* @param {Object} object The object to modify. | |
* @param {string} key The key of the property to assign. | |
* @param {*} value The value to assign. | |
*/ | |
function assignMergeValue(object, key, value) { | |
if ((value !== undefined && !eq(object[key], value)) || | |
(typeof key == 'number' && value === undefined && !(key in object))) { | |
object[key] = value; | |
} | |
} | |
/** | |
* Assigns `value` to `key` of `object` if the existing value is not equivalent | |
* using [`SameValueZero`](http://ecma-international.org/ecma-262/6.0/#sec-samevaluezero) | |
* for equality comparisons. | |
* | |
* @private | |
* @param {Object} object The object to modify. | |
* @param {string} key The key of the property to assign. | |
* @param {*} value The value to assign. | |
*/ | |
function assignValue(object, key, value) { | |
var objValue = object[key]; | |
if ((!eq(objValue, value) || | |
(eq(objValue, objectProto[key]) && !hasOwnProperty.call(object, key))) || | |
(value === undefined && !(key in object))) { | |
object[key] = value; | |
} | |
} | |
/** | |
* The base implementation of `_.merge` without support for multiple sources. | |
* | |
* @private | |
* @param {Object} object The destination object. | |
* @param {Object} source The source object. | |
* @param {number} srcIndex The index of `source`. | |
* @param {Function} [customizer] The function to customize merged values. | |
* @param {Object} [stack] Tracks traversed source values and their merged counterparts. | |
*/ | |
function baseMerge(object, source, srcIndex, customizer, stack) { | |
if (object === source) { | |
return; | |
} | |
var props = (isArray(source) || isTypedArray(source)) | |
? undefined | |
: keysIn(source); | |
arrayEach(props || source, function(srcValue, key) { | |
if (props) { | |
key = srcValue; | |
srcValue = source[key]; | |
} | |
if (isObject(srcValue)) { | |
stack || (stack = new Stack); | |
baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack); | |
} | |
else { | |
var newValue = customizer | |
? customizer(object[key], srcValue, (key + ''), object, source, stack) | |
: undefined; | |
if (newValue === undefined) { | |
newValue = srcValue; | |
} | |
assignMergeValue(object, key, newValue); | |
} | |
}); | |
} | |
/** | |
* A specialized version of `baseMerge` for arrays and objects which performs | |
* deep merges and tracks traversed objects enabling objects with circular | |
* references to be merged. | |
* | |
* @private | |
* @param {Object} object The destination object. | |
* @param {Object} source The source object. | |
* @param {string} key The key of the value to merge. | |
* @param {number} srcIndex The index of `source`. | |
* @param {Function} mergeFunc The function to merge values. | |
* @param {Function} [customizer] The function to customize assigned values. | |
* @param {Object} [stack] Tracks traversed source values and their merged counterparts. | |
*/ | |
function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customizer, stack) { | |
var objValue = object[key], | |
srcValue = source[key], | |
stacked = stack.get(srcValue); | |
if (stacked) { | |
assignMergeValue(object, key, stacked); | |
return; | |
} | |
var newValue = customizer | |
? customizer(objValue, srcValue, (key + ''), object, source, stack) | |
: undefined; | |
var isCommon = newValue === undefined; | |
if (isCommon) { | |
newValue = srcValue; | |
if (isArray(srcValue) || isTypedArray(srcValue)) { | |
if (isArray(objValue)) { | |
newValue = objValue; | |
} | |
else if (isArrayLikeObject(objValue)) { | |
newValue = copyArray(objValue); | |
} | |
else { | |
isCommon = false; | |
newValue = baseClone(srcValue, true); | |
} | |
} | |
else if (isPlainObject(srcValue) || isArguments(srcValue)) { | |
if (isArguments(objValue)) { | |
newValue = toPlainObject(objValue); | |
} | |
else if (!isObject(objValue) || (srcIndex && isFunction(objValue))) { | |
isCommon = false; | |
newValue = baseClone(srcValue, true); | |
} | |
else { | |
newValue = objValue; | |
} | |
} | |
else { | |
isCommon = false; | |
} | |
} | |
stack.set(srcValue, newValue); | |
if (isCommon) { | |
// Recursively merge objects and arrays (susceptible to call stack limits). | |
mergeFunc(newValue, srcValue, srcIndex, customizer, stack); | |
} | |
assignMergeValue(object, key, newValue); | |
} | |
/** | |
* The base implementation of `_.property` without support for deep paths. | |
* | |
* @private | |
* @param {string} key The key of the property to get. | |
* @returns {Function} Returns the new function. | |
*/ | |
function baseProperty(key) { | |
return function(object) { | |
return object == null ? undefined : object[key]; | |
}; | |
} | |
/** | |
* Copies the values of `source` to `array`. | |
* | |
* @private | |
* @param {Array} source The array to copy values from. | |
* @param {Array} [array=[]] The array to copy values to. | |
* @returns {Array} Returns `array`. | |
*/ | |
function copyArray(source, array) { | |
var index = -1, | |
length = source.length; | |
array || (array = Array(length)); | |
while (++index < length) { | |
array[index] = source[index]; | |
} | |
return array; | |
} | |
/** | |
* Copies properties of `source` to `object`. | |
* | |
* @private | |
* @param {Object} source The object to copy properties from. | |
* @param {Array} props The property names to copy. | |
* @param {Object} [object={}] The object to copy properties to. | |
* @returns {Object} Returns `object`. | |
*/ | |
function copyObject(source, props, object) { | |
return copyObjectWith(source, props, object); | |
} | |
/** | |
* This function is like `copyObject` except that it accepts a function to | |
* customize copied values. | |
* | |
* @private | |
* @param {Object} source The object to copy properties from. | |
* @param {Array} props The property names to copy. | |
* @param {Object} [object={}] The object to copy properties to. | |
* @param {Function} [customizer] The function to customize copied values. | |
* @returns {Object} Returns `object`. | |
*/ | |
function copyObjectWith(source, props, object, customizer) { | |
object || (object = {}); | |
var index = -1, | |
length = props.length; | |
while (++index < length) { | |
var key = props[index]; | |
var newValue = customizer | |
? customizer(object[key], source[key], key, object, source) | |
: source[key]; | |
assignValue(object, key, newValue); | |
} | |
return object; | |
} | |
/** | |
* Creates a function like `_.assign`. | |
* | |
* @private | |
* @param {Function} assigner The function to assign values. | |
* @returns {Function} Returns the new assigner function. | |
*/ | |
function createAssigner(assigner) { | |
return rest(function(object, sources) { | |
var index = -1, | |
length = sources.length, | |
customizer = length > 1 ? sources[length - 1] : undefined, | |
guard = length > 2 ? sources[2] : undefined; | |
customizer = typeof customizer == 'function' | |
? (length--, customizer) | |
: undefined; | |
if (guard && isIterateeCall(sources[0], sources[1], guard)) { | |
customizer = length < 3 ? undefined : customizer; | |
length = 1; | |
} | |
object = Object(object); | |
while (++index < length) { | |
var source = sources[index]; | |
if (source) { | |
assigner(object, source, index, customizer); | |
} | |
} | |
return object; | |
}); | |
} | |
/** | |
* Gets the "length" property value of `object`. | |
* | |
* **Note:** This function is used to avoid a [JIT bug](https://bugs.webkit.org/show_bug.cgi?id=142792) | |
* that affects Safari on at least iOS 8.1-8.3 ARM64. | |
* | |
* @private | |
* @param {Object} object The object to query. | |
* @returns {*} Returns the "length" value. | |
*/ | |
var getLength = baseProperty('length'); | |
/** | |
* Checks if the given arguments are from an iteratee call. | |
* | |
* @private | |
* @param {*} value The potential iteratee value argument. | |
* @param {*} index The potential iteratee index or key argument. | |
* @param {*} object The potential iteratee object argument. | |
* @returns {boolean} Returns `true` if the arguments are from an iteratee call, else `false`. | |
*/ | |
function isIterateeCall(value, index, object) { | |
if (!isObject(object)) { | |
return false; | |
} | |
var type = typeof index; | |
if (type == 'number' | |
? (isArrayLike(object) && isIndex(index, object.length)) | |
: (type == 'string' && index in object)) { | |
return eq(object[index], value); | |
} | |
return false; | |
} | |
/** | |
* Performs a [`SameValueZero`](http://ecma-international.org/ecma-262/6.0/#sec-samevaluezero) | |
* comparison between two values to determine if they are equivalent. | |
* | |
* @static | |
* @memberOf _ | |
* @category Lang | |
* @param {*} value The value to compare. | |
* @param {*} other The other value to compare. | |
* @returns {boolean} Returns `true` if the values are equivalent, else `false`. | |
* @example | |
* | |
* var object = { 'user': 'fred' }; | |
* var other = { 'user': 'fred' }; | |
* | |
* _.eq(object, object); | |
* // => true | |
* | |
* _.eq(object, other); | |
* // => false | |
* | |
* _.eq('a', 'a'); | |
* // => true | |
* | |
* _.eq('a', Object('a')); | |
* // => false | |
* | |
* _.eq(NaN, NaN); | |
* // => true | |
*/ | |
function eq(value, other) { | |
return value === other || (value !== value && other !== other); | |
} | |
/** | |
* Checks if `value` is likely an `arguments` object. | |
* | |
* @static | |
* @memberOf _ | |
* @category Lang | |
* @param {*} value The value to check. | |
* @returns {boolean} Returns `true` if `value` is correctly classified, else `false`. | |
* @example | |
* | |
* _.isArguments(function() { return arguments; }()); | |
* // => true | |
* | |
* _.isArguments([1, 2, 3]); | |
* // => false | |
*/ | |
function isArguments(value) { | |
// Safari 8.1 incorrectly makes `arguments.callee` enumerable in strict mode. | |
return isArrayLikeObject(value) && hasOwnProperty.call(value, 'callee') && | |
(!propertyIsEnumerable.call(value, 'callee') || objectToString.call(value) == argsTag); | |
} | |
/** | |
* Checks if `value` is classified as an `Array` object. | |
* | |
* @static | |
* @memberOf _ | |
* @type {Function} | |
* @category Lang | |
* @param {*} value The value to check. | |
* @returns {boolean} Returns `true` if `value` is correctly classified, else `false`. | |
* @example | |
* | |
* _.isArray([1, 2, 3]); | |
* // => true | |
* | |
* _.isArray(document.body.children); | |
* // => false | |
* | |
* _.isArray('abc'); | |
* // => false | |
* | |
* _.isArray(_.noop); | |
* // => false | |
*/ | |
var isArray = Array.isArray; | |
/** | |
* Checks if `value` is array-like. A value is considered array-like if it's | |
* not a function and has a `value.length` that's an integer greater than or | |
* equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`. | |
* | |
* @static | |
* @memberOf _ | |
* @category Lang | |
* @param {*} value The value to check. | |
* @returns {boolean} Returns `true` if `value` is array-like, else `false`. | |
* @example | |
* | |
* _.isArrayLike([1, 2, 3]); | |
* // => true | |
* | |
* _.isArrayLike(document.body.children); | |
* // => true | |
* | |
* _.isArrayLike('abc'); | |
* // => true | |
* | |
* _.isArrayLike(_.noop); | |
* // => false | |
*/ | |
function isArrayLike(value) { | |
return value != null && | |
!(typeof value == 'function' && isFunction(value)) && isLength(getLength(value)); | |
} | |
/** | |
* This method is like `_.isArrayLike` except that it also checks if `value` | |
* is an object. | |
* | |
* @static | |
* @memberOf _ | |
* @category Lang | |
* @param {*} value The value to check. | |
* @returns {boolean} Returns `true` if `value` is an array-like object, else `false`. | |
* @example | |
* | |
* _.isArrayLikeObject([1, 2, 3]); | |
* // => true | |
* | |
* _.isArrayLikeObject(document.body.children); | |
* // => true | |
* | |
* _.isArrayLikeObject('abc'); | |
* // => false | |
* | |
* _.isArrayLikeObject(_.noop); | |
* // => false | |
*/ | |
function isArrayLikeObject(value) { | |
return isObjectLike(value) && isArrayLike(value); | |
} | |
/** | |
* Checks if `value` is classified as a `Function` object. | |
* | |
* @static | |
* @memberOf _ | |
* @category Lang | |
* @param {*} value The value to check. | |
* @returns {boolean} Returns `true` if `value` is correctly classified, else `false`. | |
* @example | |
* | |
* _.isFunction(_); | |
* // => true | |
* | |
* _.isFunction(/abc/); | |
* // => false | |
*/ | |
function isFunction(value) { | |
// The use of `Object#toString` avoids issues with the `typeof` operator | |
// in Safari 8 which returns 'object' for typed array constructors, and | |
// PhantomJS 1.9 which returns 'function' for `NodeList` instances. | |
var tag = isObject(value) ? objectToString.call(value) : ''; | |
return tag == funcTag || tag == genTag; | |
} | |
/** | |
* Checks if `value` is a valid array-like length. | |
* | |
* **Note:** This function is loosely based on [`ToLength`](http://ecma-international.org/ecma-262/6.0/#sec-tolength). | |
* | |
* @static | |
* @memberOf _ | |
* @category Lang | |
* @param {*} value The value to check. | |
* @returns {boolean} Returns `true` if `value` is a valid length, else `false`. | |
* @example | |
* | |
* _.isLength(3); | |
* // => true | |
* | |
* _.isLength(Number.MIN_VALUE); | |
* // => false | |
* | |
* _.isLength(Infinity); | |
* // => false | |
* | |
* _.isLength('3'); | |
* // => false | |
*/ | |
function isLength(value) { | |
return typeof value == 'number' && | |
value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER; | |
} | |
/** | |
* Checks if `value` is the [language type](https://es5.github.io/#x8) of `Object`. | |
* (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) | |
* | |
* @static | |
* @memberOf _ | |
* @category Lang | |
* @param {*} value The value to check. | |
* @returns {boolean} Returns `true` if `value` is an object, else `false`. | |
* @example | |
* | |
* _.isObject({}); | |
* // => true | |
* | |
* _.isObject([1, 2, 3]); | |
* // => true | |
* | |
* _.isObject(_.noop); | |
* // => true | |
* | |
* _.isObject(null); | |
* // => false | |
*/ | |
function isObject(value) { | |
var type = typeof value; | |
return !!value && (type == 'object' || type == 'function'); | |
} | |
/** | |
* Checks if `value` is object-like. A value is object-like if it's not `null` | |
* and has a `typeof` result of "object". | |
* | |
* @static | |
* @memberOf _ | |
* @category Lang | |
* @param {*} value The value to check. | |
* @returns {boolean} Returns `true` if `value` is object-like, else `false`. | |
* @example | |
* | |
* _.isObjectLike({}); | |
* // => true | |
* | |
* _.isObjectLike([1, 2, 3]); | |
* // => true | |
* | |
* _.isObjectLike(_.noop); | |
* // => false | |
* | |
* _.isObjectLike(null); | |
* // => false | |
*/ | |
function isObjectLike(value) { | |
return !!value && typeof value == 'object'; | |
} | |
/** | |
* Checks if `value` is classified as a typed array. | |
* | |
* @static | |
* @memberOf _ | |
* @category Lang | |
* @param {*} value The value to check. | |
* @returns {boolean} Returns `true` if `value` is correctly classified, else `false`. | |
* @example | |
* | |
* _.isTypedArray(new Uint8Array); | |
* // => true | |
* | |
* _.isTypedArray([]); | |
* // => false | |
*/ | |
function isTypedArray(value) { | |
return isObjectLike(value) && | |
isLength(value.length) && !!typedArrayTags[objectToString.call(value)]; | |
} | |
/** | |
* Converts `value` to a plain object flattening inherited enumerable | |
* properties of `value` to own properties of the plain object. | |
* | |
* @static | |
* @memberOf _ | |
* @category Lang | |
* @param {*} value The value to convert. | |
* @returns {Object} Returns the converted plain object. | |
* @example | |
* | |
* function Foo() { | |
* this.b = 2; | |
* } | |
* | |
* Foo.prototype.c = 3; | |
* | |
* _.assign({ 'a': 1 }, new Foo); | |
* // => { 'a': 1, 'b': 2 } | |
* | |
* _.assign({ 'a': 1 }, _.toPlainObject(new Foo)); | |
* // => { 'a': 1, 'b': 2, 'c': 3 } | |
*/ | |
function toPlainObject(value) { | |
return copyObject(value, keysIn(value)); | |
} | |
/** | |
* Recursively merges own and inherited enumerable properties of source objects | |
* into the destination object. Source properties that resolve to `undefined` | |
* are skipped if a destination value exists. Array and plain object properties | |
* are merged recursively. Other objects and value types are overridden by | |
* assignment. Source objects are applied from left to right. Subsequent | |
* sources overwrite property assignments of previous sources. | |
* | |
* **Note:** This method mutates `object`. | |
* | |
* @static | |
* @memberOf _ | |
* @category Object | |
* @param {Object} object The destination object. | |
* @param {...Object} [sources] The source objects. | |
* @returns {Object} Returns `object`. | |
* @example | |
* | |
* var users = { | |
* 'data': [{ 'user': 'barney' }, { 'user': 'fred' }] | |
* }; | |
* | |
* var ages = { | |
* 'data': [{ 'age': 36 }, { 'age': 40 }] | |
* }; | |
* | |
* _.merge(users, ages); | |
* // => { 'data': [{ 'user': 'barney', 'age': 36 }, { 'user': 'fred', 'age': 40 }] } | |
*/ | |
var merge = createAssigner(function(object, source, srcIndex) { | |
baseMerge(object, source, srcIndex); | |
}); | |
module.exports = merge; | |
/***/ }, | |
/* 93 */ | |
/***/ function(module, exports, __webpack_require__) { | |
/** | |
* Copyright 2013-present, Facebook, Inc. | |
* All rights reserved. | |
* | |
* This source code is licensed under the BSD-style license found in the | |
* LICENSE file in the root directory of this source tree. An additional grant | |
* of patent rights can be found in the PATENTS file in the same directory. | |
* | |
* @providesModule EventPluginHub | |
*/ | |
'use strict'; | |
var _prodInvariant = __webpack_require__(25); | |
var EventPluginRegistry = __webpack_require__(256); | |
var EventPluginUtils = __webpack_require__(51); | |
var ReactErrorUtils = __webpack_require__(94); | |
var accumulateInto = __webpack_require__(95); | |
var forEachAccumulated = __webpack_require__(96); | |
var invariant = __webpack_require__(19); | |
/** | |
* Internal store for event listeners | |
*/ | |
var listenerBank = {}; | |
/** | |
* Internal queue of events that have accumulated their dispatches and are | |
* waiting to have their dispatches executed. | |
*/ | |
var eventQueue = null; | |
/** | |
* Dispatches an event and releases it back into the pool, unless persistent. | |
* | |
* @param {?object} event Synthetic event to be dispatched. | |
* @param {boolean} simulated If the event is simulated (changes exn behavior) | |
* @private | |
*/ | |
var executeDispatchesAndRelease = function (event, simulated) { | |
if (event) { | |
EventPluginUtils.executeDispatchesInOrder(event, simulated); | |
if (!event.isPersistent()) { | |
event.constructor.release(event); | |
} | |
} | |
}; | |
var executeDispatchesAndReleaseSimulated = function (e) { | |
return executeDispatchesAndRelease(e, true); | |
}; | |
var executeDispatchesAndReleaseTopLevel = function (e) { | |
return executeDispatchesAndRelease(e, false); | |
}; | |
/** | |
* This is a unified interface for event plugins to be installed and configured. | |
* | |
* Event plugins can implement the following properties: | |
* | |
* `extractEvents` {function(string, DOMEventTarget, string, object): *} | |
* Required. When a top-level event is fired, this method is expected to | |
* extract synthetic events that will in turn be queued and dispatched. | |
* | |
* `eventTypes` {object} | |
* Optional, plugins that fire events must publish a mapping of registration | |
* names that are used to register listeners. Values of this mapping must | |
* be objects that contain `registrationName` or `phasedRegistrationNames`. | |
* | |
* `executeDispatch` {function(object, function, string)} | |
* Optional, allows plugins to override how an event gets dispatched. By | |
* default, the listener is simply invoked. | |
* | |
* Each plugin that is injected into `EventsPluginHub` is immediately operable. | |
* | |
* @public | |
*/ | |
var EventPluginHub = { | |
/** | |
* Methods for injecting dependencies. | |
*/ | |
injection: { | |
/** | |
* @param {array} InjectedEventPluginOrder | |
* @public | |
*/ | |
injectEventPluginOrder: EventPluginRegistry.injectEventPluginOrder, | |
/** | |
* @param {object} injectedNamesToPlugins Map from names to plugin modules. | |
*/ | |
injectEventPluginsByName: EventPluginRegistry.injectEventPluginsByName | |
}, | |
/** | |
* Stores `listener` at `listenerBank[registrationName][id]`. Is idempotent. | |
* | |
* @param {object} inst The instance, which is the source of events. | |
* @param {string} registrationName Name of listener (e.g. `onClick`). | |
* @param {function} listener The callback to store. | |
*/ | |
putListener: function (inst, registrationName, listener) { | |
!(typeof listener === 'function') ? true ? invariant(false, 'Expected %s listener to be a function, instead got type %s', registrationName, typeof listener) : _prodInvariant('94', registrationName, typeof listener) : void 0; | |
var bankForRegistrationName = listenerBank[registrationName] || (listenerBank[registrationName] = {}); | |
bankForRegistrationName[inst._rootNodeID] = listener; | |
var PluginModule = EventPluginRegistry.registrationNameModules[registrationName]; | |
if (PluginModule && PluginModule.didPutListener) { | |
PluginModule.didPutListener(inst, registrationName, listener); | |
} | |
}, | |
/** | |
* @param {object} inst The instance, which is the source of events. | |
* @param {string} registrationName Name of listener (e.g. `onClick`). | |
* @return {?function} The stored callback. | |
*/ | |
getListener: function (inst, registrationName) { | |
var bankForRegistrationName = listenerBank[registrationName]; | |
return bankForRegistrationName && bankForRegistrationName[inst._rootNodeID]; | |
}, | |
/** | |
* Deletes a listener from the registration bank. | |
* | |
* @param {object} inst The instance, which is the source of events. | |
* @param {string} registrationName Name of listener (e.g. `onClick`). | |
*/ | |
deleteListener: function (inst, registrationName) { | |
var PluginModule = EventPluginRegistry.registrationNameModules[registrationName]; | |
if (PluginModule && PluginModule.willDeleteListener) { | |
PluginModule.willDeleteListener(inst, registrationName); | |
} | |
var bankForRegistrationName = listenerBank[registrationName]; | |
// TODO: This should never be null -- when is it? | |
if (bankForRegistrationName) { | |
delete bankForRegistrationName[inst._rootNodeID]; | |
} | |
}, | |
/** | |
* Deletes all listeners for the DOM element with the supplied ID. | |
* | |
* @param {object} inst The instance, which is the source of events. | |
*/ | |
deleteAllListeners: function (inst) { | |
for (var registrationName in listenerBank) { | |
if (!listenerBank.hasOwnProperty(registrationName)) { | |
continue; | |
} | |
if (!listenerBank[registrationName][inst._rootNodeID]) { | |
continue; | |
} | |
var PluginModule = EventPluginRegistry.registrationNameModules[registrationName]; | |
if (PluginModule && PluginModule.willDeleteListener) { | |
PluginModule.willDeleteListener(inst, registrationName); | |
} | |
delete listenerBank[registrationName][inst._rootNodeID]; | |
} | |
}, | |
/** | |
* Allows registered plugins an opportunity to extract events from top-level | |
* native browser events. | |
* | |
* @return {*} An accumulation of synthetic events. | |
* @internal | |
*/ | |
extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) { | |
var events; | |
var plugins = EventPluginRegistry.plugins; | |
for (var i = 0; i < plugins.length; i++) { | |
// Not every plugin in the ordering may be loaded at runtime. | |
var possiblePlugin = plugins[i]; | |
if (possiblePlugin) { | |
var extractedEvents = possiblePlugin.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget); | |
if (extractedEvents) { | |
events = accumulateInto(events, extractedEvents); | |
} | |
} | |
} | |
return events; | |
}, | |
/** | |
* Enqueues a synthetic event that should be dispatched when | |
* `processEventQueue` is invoked. | |
* | |
* @param {*} events An accumulation of synthetic events. | |
* @internal | |
*/ | |
enqueueEvents: function (events) { | |
if (events) { | |
eventQueue = accumulateInto(eventQueue, events); | |
} | |
}, | |
/** | |
* Dispatches all synthetic events on the event queue. | |
* | |
* @internal | |
*/ | |
processEventQueue: function (simulated) { | |
// Set `eventQueue` to null before processing it so that we can tell if more | |
// events get enqueued while processing. | |
var processingEventQueue = eventQueue; | |
eventQueue = null; | |
if (simulated) { | |
forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseSimulated); | |
} else { | |
forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel); | |
} | |
!!eventQueue ? true ? invariant(false, 'processEventQueue(): Additional events were enqueued while processing an event queue. Support for this has not yet been implemented.') : _prodInvariant('95') : void 0; | |
// This would be a good time to rethrow if any of the event handlers threw. | |
ReactErrorUtils.rethrowCaughtError(); | |
}, | |
/** | |
* These are needed for tests only. Do not use! | |
*/ | |
__purge: function () { | |
listenerBank = {}; | |
}, | |
__getListenerBank: function () { | |
return listenerBank; | |
} | |
}; | |
module.exports = EventPluginHub; | |
/***/ }, | |
/* 94 */ | |
/***/ function(module, exports, __webpack_require__) { | |
/** | |
* Copyright 2013-present, Facebook, Inc. | |
* All rights reserved. | |
* | |
* This source code is licensed under the BSD-style license found in the | |
* LICENSE file in the root directory of this source tree. An additional grant | |
* of patent rights can be found in the PATENTS file in the same directory. | |
* | |
* @providesModule ReactErrorUtils | |
*/ | |
'use strict'; | |
var caughtError = null; | |
/** | |
* Call a function while guarding against errors that happens within it. | |
* | |
* @param {?String} name of the guard to use for logging or debugging | |
* @param {Function} func The function to invoke | |
* @param {*} a First argument | |
* @param {*} b Second argument | |
*/ | |
function invokeGuardedCallback(name, func, a, b) { | |
try { | |
return func(a, b); | |
} catch (x) { | |
if (caughtError === null) { | |
caughtError = x; | |
} | |
return undefined; | |
} | |
} | |
var ReactErrorUtils = { | |
invokeGuardedCallback: invokeGuardedCallback, | |
/** | |
* Invoked by ReactTestUtils.Simulate so that any errors thrown by the event | |
* handler are sure to be rethrown by rethrowCaughtError. | |
*/ | |
invokeGuardedCallbackWithCatch: invokeGuardedCallback, | |
/** | |
* During execution of guarded functions we will capture the first error which | |
* we will rethrow to be handled by the top level error handler. | |
*/ | |
rethrowCaughtError: function () { | |
if (caughtError) { | |
var error = caughtError; | |
caughtError = null; | |
throw error; | |
} | |
} | |
}; | |
if (true) { | |
/** | |
* To help development we can get better devtools integration by simulating a | |
* real browser event. | |
*/ | |
if (typeof window !== 'undefined' && typeof window.dispatchEvent === 'function' && typeof document !== 'undefined' && typeof document.createEvent === 'function') { | |
var fakeNode = document.createElement('react'); | |
ReactErrorUtils.invokeGuardedCallback = function (name, func, a, b) { | |
var boundFunc = func.bind(null, a, b); | |
var evtType = 'react-' + name; | |
fakeNode.addEventListener(evtType, boundFunc, false); | |
var evt = document.createEvent('Event'); | |
evt.initEvent(evtType, false, false); | |
fakeNode.dispatchEvent(evt); | |
fakeNode.removeEventListener(evtType, boundFunc, false); | |
}; | |
} | |
} | |
module.exports = ReactErrorUtils; | |
/***/ }, | |
/* 95 */ | |
/***/ function(module, exports, __webpack_require__) { | |
/** | |
* Copyright 2014-present, Facebook, Inc. | |
* All rights reserved. | |
* | |
* This source code is licensed under the BSD-style license found in the | |
* LICENSE file in the root directory of this source tree. An additional grant | |
* of patent rights can be found in the PATENTS file in the same directory. | |
* | |
* @providesModule accumulateInto | |
*/ | |
'use strict'; | |
var _prodInvariant = __webpack_require__(25); | |
var invariant = __webpack_require__(19); | |
/** | |
* | |
* Accumulates items that must not be null or undefined into the first one. This | |
* is used to conserve memory by avoiding array allocations, and thus sacrifices | |
* API cleanness. Since `current` can be null before being passed in and not | |
* null after this function, make sure to assign it back to `current`: | |
* | |
* `a = accumulateInto(a, b);` | |
* | |
* This API should be sparingly used. Try `accumulate` for something cleaner. | |
* | |
* @return {*|array<*>} An accumulation of items. | |
*/ | |
function accumulateInto(current, next) { | |
!(next != null) ? true ? invariant(false, 'accumulateInto(...): Accumulated items must not be null or undefined.') : _prodInvariant('30') : void 0; | |
if (current == null) { | |
return next; | |
} | |
// Both are not empty. Warning: Never call x.concat(y) when you are not | |
// certain that x is an Array (x could be a string with concat method). | |
var currentIsArray = Array.isArray(current); | |
var nextIsArray = Array.isArray(next); | |
if (currentIsArray && nextIsArray) { | |
current.push.apply(current, next); | |
return current; | |
} | |
if (currentIsArray) { | |
current.push(next); | |
return current; | |
} | |
if (nextIsArray) { | |
// A bit too dangerous to mutate `next`. | |
return [current].concat(next); | |
} | |
return [current, next]; | |
} | |
module.exports = accumulateInto; | |
/***/ }, | |
/* 96 */ | |
/***/ function(module, exports) { | |
/** | |
* Copyright 2013-present, Facebook, Inc. | |
* All rights reserved. | |
* | |
* This source code is licensed under the BSD-style license found in the | |
* LICENSE file in the root directory of this source tree. An additional grant | |
* of patent rights can be found in the PATENTS file in the same directory. | |
* | |
* @providesModule forEachAccumulated | |
*/ | |
'use strict'; | |
/** | |
* @param {array} arr an "accumulation" of items which is either an Array or | |
* a single item. Useful when paired with the `accumulate` module. This is a | |
* simple utility that allows us to reason about a collection of items, but | |
* handling the case when there is exactly one item (and we do not need to | |
* allocate an array). | |
*/ | |
var forEachAccumulated = function (arr, cb, scope) { | |
if (Array.isArray(arr)) { | |
arr.forEach(cb, scope); | |
} else if (arr) { | |
cb.call(scope, arr); | |
} | |
}; | |
module.exports = forEachAccumulated; | |
/***/ }, | |
/* 97 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
exports.__esModule = true; | |
var createHelper = function createHelper(func, helperName) { | |
var setDisplayName = arguments.length <= 2 || arguments[2] === undefined ? true : arguments[2]; | |
var noArgs = arguments.length <= 3 || arguments[3] === undefined ? false : arguments[3]; | |
if (("development") !== 'production' && setDisplayName) { | |
var _ret = function () { | |
/* eslint-disable global-require */ | |
var wrapDisplayName = __webpack_require__(271).default; | |
/* eslint-enable global-require */ | |
if (noArgs) { | |
return { | |
v: function v(BaseComponent) { | |
var Component = func(BaseComponent); | |
Component.displayName = wrapDisplayName(BaseComponent, helperName); | |
return Component; | |
} | |
}; | |
} | |
return { | |
v: function v() { | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
if (args.length > func.length) { | |
/* eslint-disable */ | |
console.error( | |
/* eslint-enable */ | |
'Too many arguments passed to ' + helperName + '(). It should called ' + ('like so: ' + helperName + '(...args)(BaseComponent).')); | |
} | |
return function (BaseComponent) { | |
var Component = func.apply(undefined, args)(BaseComponent); | |
Component.displayName = wrapDisplayName(BaseComponent, helperName); | |
return Component; | |
}; | |
} | |
}; | |
}(); | |
if (typeof _ret === "object") return _ret.v; | |
} | |
return func; | |
}; | |
exports.default = createHelper; | |
/***/ }, | |
/* 98 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _IconButton = __webpack_require__(20); | |
var _IconButton2 = _interopRequireDefault(_IconButton); | |
var _menu = __webpack_require__(206); | |
var _menu2 = _interopRequireDefault(_menu); | |
var _Paper = __webpack_require__(8); | |
var _Paper2 = _interopRequireDefault(_Paper); | |
var _propTypes = __webpack_require__(9); | |
var _propTypes2 = _interopRequireDefault(_propTypes); | |
var _warning = __webpack_require__(6); | |
var _warning2 = _interopRequireDefault(_warning); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var _context$muiTheme = context.muiTheme; | |
var appBar = _context$muiTheme.appBar; | |
var iconButtonSize = _context$muiTheme.button.iconButtonSize; | |
var zIndex = _context$muiTheme.zIndex; | |
var flatButtonSize = 36; | |
var styles = { | |
root: { | |
position: 'relative', | |
zIndex: zIndex.appBar, | |
width: '100%', | |
display: 'flex', | |
backgroundColor: appBar.color, | |
paddingLeft: appBar.padding, | |
paddingRight: appBar.padding | |
}, | |
title: { | |
whiteSpace: 'nowrap', | |
overflow: 'hidden', | |
textOverflow: 'ellipsis', | |
margin: 0, | |
paddingTop: 0, | |
letterSpacing: 0, | |
fontSize: 24, | |
fontWeight: appBar.titleFontWeight, | |
color: appBar.textColor, | |
height: appBar.height, | |
lineHeight: appBar.height + 'px' | |
}, | |
mainElement: { | |
boxFlex: 1, | |
flex: '1' | |
}, | |
iconButtonStyle: { | |
marginTop: (appBar.height - iconButtonSize) / 2, | |
marginRight: 8, | |
marginLeft: -16 | |
}, | |
iconButtonIconStyle: { | |
fill: appBar.textColor, | |
color: appBar.textColor | |
}, | |
flatButton: { | |
color: appBar.textColor, | |
marginTop: (iconButtonSize - flatButtonSize) / 2 + 1 | |
} | |
}; | |
return styles; | |
} | |
var AppBar = function (_Component) { | |
_inherits(AppBar, _Component); | |
function AppBar() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, AppBar); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(AppBar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleTouchTapLeftIconButton = function (event) { | |
if (_this.props.onLeftIconButtonTouchTap) { | |
_this.props.onLeftIconButtonTouchTap(event); | |
} | |
}, _this.handleTouchTapRightIconButton = function (event) { | |
if (_this.props.onRightIconButtonTouchTap) { | |
_this.props.onRightIconButtonTouchTap(event); | |
} | |
}, _this.handleTitleTouchTap = function (event) { | |
if (_this.props.onTitleTouchTap) { | |
_this.props.onTitleTouchTap(event); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(AppBar, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
true ? (0, _warning2.default)(!this.props.iconElementLeft || !this.props.iconClassNameLeft, 'Properties iconElementLeft\n and iconClassNameLeft cannot be simultaneously defined. Please use one or the other.') : void 0; | |
true ? (0, _warning2.default)(!this.props.iconElementRight || !this.props.iconClassNameRight, 'Properties iconElementRight\n and iconClassNameRight cannot be simultaneously defined. Please use one or the other.') : void 0; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var title = _props.title; | |
var titleStyle = _props.titleStyle; | |
var iconStyleRight = _props.iconStyleRight; | |
var showMenuIconButton = _props.showMenuIconButton; | |
var iconElementLeft = _props.iconElementLeft; | |
var iconElementRight = _props.iconElementRight; | |
var iconClassNameLeft = _props.iconClassNameLeft; | |
var iconClassNameRight = _props.iconClassNameRight; | |
var className = _props.className; | |
var style = _props.style; | |
var zDepth = _props.zDepth; | |
var children = _props.children; | |
var other = _objectWithoutProperties(_props, ['title', 'titleStyle', 'iconStyleRight', 'showMenuIconButton', 'iconElementLeft', 'iconElementRight', 'iconClassNameLeft', 'iconClassNameRight', 'className', 'style', 'zDepth', 'children']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var menuElementLeft = void 0; | |
var menuElementRight = void 0; | |
// If the title is a string, wrap in an h1 tag. | |
// If not, wrap in a div tag. | |
var titleComponent = typeof title === 'string' || title instanceof String ? 'h1' : 'div'; | |
var titleElement = _react2.default.createElement(titleComponent, { | |
onTouchTap: this.handleTitleTouchTap, | |
style: prepareStyles((0, _simpleAssign2.default)(styles.title, styles.mainElement, titleStyle)) | |
}, title); | |
if (showMenuIconButton) { | |
var iconElementLeftNode = iconElementLeft; | |
if (iconElementLeft) { | |
if (iconElementLeft.type.muiName === 'IconButton') { | |
iconElementLeftNode = _react2.default.cloneElement(iconElementLeft, { | |
iconStyle: (0, _simpleAssign2.default)({}, styles.iconButtonIconStyle, iconElementLeft.props.iconStyle) | |
}); | |
} | |
menuElementLeft = _react2.default.createElement( | |
'div', | |
{ style: prepareStyles((0, _simpleAssign2.default)({}, styles.iconButtonStyle)) }, | |
iconElementLeftNode | |
); | |
} else { | |
var child = iconClassNameLeft ? '' : _react2.default.createElement(_menu2.default, { style: (0, _simpleAssign2.default)({}, styles.iconButtonIconStyle) }); | |
menuElementLeft = _react2.default.createElement( | |
_IconButton2.default, | |
{ | |
style: styles.iconButtonStyle, | |
iconStyle: styles.iconButtonIconStyle, | |
iconClassName: iconClassNameLeft, | |
onTouchTap: this.handleTouchTapLeftIconButton | |
}, | |
child | |
); | |
} | |
} | |
var iconRightStyle = (0, _simpleAssign2.default)({}, styles.iconButtonStyle, { | |
marginRight: -16, | |
marginLeft: 'auto' | |
}, iconStyleRight); | |
if (iconElementRight) { | |
var iconElementRightNode = iconElementRight; | |
switch (iconElementRight.type.muiName) { | |
case 'IconMenu': | |
case 'IconButton': | |
iconElementRightNode = _react2.default.cloneElement(iconElementRight, { | |
iconStyle: (0, _simpleAssign2.default)({}, styles.iconButtonIconStyle, iconElementRight.props.iconStyle) | |
}); | |
break; | |
case 'FlatButton': | |
iconElementRightNode = _react2.default.cloneElement(iconElementRight, { | |
style: (0, _simpleAssign2.default)({}, styles.flatButton, iconElementRight.props.style) | |
}); | |
break; | |
default: | |
} | |
menuElementRight = _react2.default.createElement( | |
'div', | |
{ style: prepareStyles(iconRightStyle) }, | |
iconElementRightNode | |
); | |
} else if (iconClassNameRight) { | |
menuElementRight = _react2.default.createElement(_IconButton2.default, { | |
style: iconRightStyle, | |
iconStyle: styles.iconButtonIconStyle, | |
iconClassName: iconClassNameRight, | |
onTouchTap: this.handleTouchTapRightIconButton | |
}); | |
} | |
return _react2.default.createElement( | |
_Paper2.default, | |
_extends({}, other, { | |
rounded: false, | |
className: className, | |
style: (0, _simpleAssign2.default)({}, styles.root, style), | |
zDepth: zDepth | |
}), | |
menuElementLeft, | |
titleElement, | |
menuElementRight, | |
children | |
); | |
} | |
}]); | |
return AppBar; | |
}(_react.Component); | |
AppBar.muiName = 'AppBar'; | |
AppBar.propTypes = { | |
/** | |
* Can be used to render a tab inside an app bar for instance. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* Applied to the app bar's root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* The classname of the icon on the left of the app bar. | |
* If you are using a stylesheet for your icons, enter the class name for the icon to be used here. | |
*/ | |
iconClassNameLeft: _react.PropTypes.string, | |
/** | |
* Similiar to the iconClassNameLeft prop except that | |
* it applies to the icon displayed on the right of the app bar. | |
*/ | |
iconClassNameRight: _react.PropTypes.string, | |
/** | |
* The custom element to be displayed on the left side of the | |
* app bar such as an SvgIcon. | |
*/ | |
iconElementLeft: _react.PropTypes.element, | |
/** | |
* Similiar to the iconElementLeft prop except that this element is displayed on the right of the app bar. | |
*/ | |
iconElementRight: _react.PropTypes.element, | |
/** | |
* Override the inline-styles of the element displayed on the right side of the app bar. | |
*/ | |
iconStyleRight: _react.PropTypes.object, | |
/** | |
* Callback function for when the left icon is selected via a touch tap. | |
* | |
* @param {object} event TouchTap event targeting the left `IconButton`. | |
*/ | |
onLeftIconButtonTouchTap: _react.PropTypes.func, | |
/** | |
* Callback function for when the right icon is selected via a touch tap. | |
* | |
* @param {object} event TouchTap event targeting the right `IconButton`. | |
*/ | |
onRightIconButtonTouchTap: _react.PropTypes.func, | |
/** | |
* Callback function for when the title text is selected via a touch tap. | |
* | |
* @param {object} event TouchTap event targeting the `title` node. | |
*/ | |
onTitleTouchTap: _react.PropTypes.func, | |
/** | |
* Determines whether or not to display the Menu icon next to the title. | |
* Setting this prop to false will hide the icon. | |
*/ | |
showMenuIconButton: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The title to display on the app bar. | |
*/ | |
title: _react.PropTypes.node, | |
/** | |
* Override the inline-styles of the app bar's title element. | |
*/ | |
titleStyle: _react.PropTypes.object, | |
/** | |
* The zDepth of the component. | |
* The shadow of the app bar is also dependent on this property. | |
*/ | |
zDepth: _propTypes2.default.zDepth | |
}; | |
AppBar.defaultProps = { | |
showMenuIconButton: true, | |
title: '', | |
zDepth: 1 | |
}; | |
AppBar.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = AppBar; | |
/***/ }, | |
/* 99 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _AppBar = __webpack_require__(98); | |
var _AppBar2 = _interopRequireDefault(_AppBar); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _AppBar2.default; | |
/***/ }, | |
/* 100 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactDom = __webpack_require__(4); | |
var _reactDom2 = _interopRequireDefault(_reactDom); | |
var _keycode = __webpack_require__(10); | |
var _keycode2 = _interopRequireDefault(_keycode); | |
var _TextField = __webpack_require__(21); | |
var _TextField2 = _interopRequireDefault(_TextField); | |
var _Menu = __webpack_require__(64); | |
var _Menu2 = _interopRequireDefault(_Menu); | |
var _MenuItem = __webpack_require__(38); | |
var _MenuItem2 = _interopRequireDefault(_MenuItem); | |
var _Divider = __webpack_require__(60); | |
var _Divider2 = _interopRequireDefault(_Divider); | |
var _Popover = __webpack_require__(18); | |
var _Popover2 = _interopRequireDefault(_Popover); | |
var _propTypes = __webpack_require__(9); | |
var _propTypes2 = _interopRequireDefault(_propTypes); | |
var _warning = __webpack_require__(6); | |
var _warning2 = _interopRequireDefault(_warning); | |
var _deprecatedPropType = __webpack_require__(15); | |
var _deprecatedPropType2 = _interopRequireDefault(_deprecatedPropType); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context, state) { | |
var anchorEl = state.anchorEl; | |
var fullWidth = props.fullWidth; | |
var styles = { | |
root: { | |
display: 'inline-block', | |
position: 'relative', | |
width: fullWidth ? '100%' : 256 | |
}, | |
menu: { | |
width: '100%' | |
}, | |
list: { | |
display: 'block', | |
width: fullWidth ? '100%' : 256 | |
}, | |
innerDiv: { | |
overflow: 'hidden' | |
} | |
}; | |
if (anchorEl && fullWidth) { | |
styles.popover = { | |
width: anchorEl.clientWidth | |
}; | |
} | |
return styles; | |
} | |
var AutoComplete = function (_Component) { | |
_inherits(AutoComplete, _Component); | |
function AutoComplete() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, AutoComplete); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(AutoComplete)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
anchorEl: null, | |
focusTextField: true, | |
open: false, | |
searchText: undefined | |
}, _this.handleRequestClose = function () { | |
// Only take into account the Popover clickAway when we are | |
// not focusing the TextField. | |
if (!_this.state.focusTextField) { | |
_this.close(); | |
} | |
}, _this.handleMouseDown = function (event) { | |
// Keep the TextField focused | |
event.preventDefault(); | |
}, _this.handleItemTouchTap = function (event, child) { | |
var dataSource = _this.props.dataSource; | |
var index = parseInt(child.key, 10); | |
var chosenRequest = dataSource[index]; | |
var searchText = typeof chosenRequest === 'string' ? chosenRequest : chosenRequest.text; | |
_this.props.onNewRequest(chosenRequest, index); | |
_this.timerTouchTapCloseId = setTimeout(function () { | |
_this.setState({ | |
searchText: searchText | |
}); | |
_this.close(); | |
_this.timerTouchTapCloseId = null; | |
}, _this.props.menuCloseDelay); | |
}, _this.handleEscKeyDown = function () { | |
_this.close(); | |
}, _this.handleKeyDown = function (event) { | |
if (_this.props.onKeyDown) _this.props.onKeyDown(event); | |
switch ((0, _keycode2.default)(event)) { | |
case 'enter': | |
_this.close(); | |
var searchText = _this.state.searchText; | |
if (searchText !== '') { | |
_this.props.onNewRequest(searchText, -1); | |
} | |
break; | |
case 'esc': | |
_this.close(); | |
break; | |
case 'down': | |
event.preventDefault(); | |
_this.setState({ | |
open: true, | |
focusTextField: false, | |
anchorEl: _reactDom2.default.findDOMNode(_this.refs.searchTextField) | |
}); | |
break; | |
default: | |
break; | |
} | |
}, _this.handleChange = function (event) { | |
var searchText = event.target.value; | |
// Make sure that we have a new searchText. | |
// Fix an issue with a Cordova Webview | |
if (searchText === _this.state.searchText) { | |
return; | |
} | |
_this.setState({ | |
searchText: searchText, | |
open: true, | |
anchorEl: _reactDom2.default.findDOMNode(_this.refs.searchTextField) | |
}, function () { | |
_this.props.onUpdateInput(searchText, _this.props.dataSource); | |
}); | |
}, _this.handleBlur = function (event) { | |
if (_this.state.focusTextField && _this.timerTouchTapCloseId === null) { | |
_this.close(); | |
} | |
if (_this.props.onBlur) { | |
_this.props.onBlur(event); | |
} | |
}, _this.handleFocus = function (event) { | |
if (!_this.state.open && (_this.props.triggerUpdateOnFocus || _this.props.openOnFocus)) { | |
_this.setState({ | |
open: true, | |
anchorEl: _reactDom2.default.findDOMNode(_this.refs.searchTextField) | |
}); | |
} | |
_this.setState({ | |
focusTextField: true | |
}); | |
if (_this.props.onFocus) { | |
_this.props.onFocus(event); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(AutoComplete, [{ | |
key: 'componentWillMount', | |
value: function componentWillMount() { | |
this.requestsList = []; | |
this.setState({ | |
open: this.props.open, | |
searchText: this.props.searchText | |
}); | |
this.timerTouchTapCloseId = null; | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
if (this.props.searchText !== nextProps.searchText) { | |
this.setState({ | |
searchText: nextProps.searchText | |
}); | |
} | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
clearTimeout(this.timerTouchTapCloseId); | |
} | |
}, { | |
key: 'close', | |
value: function close() { | |
this.setState({ | |
open: false, | |
anchorEl: null | |
}); | |
} | |
}, { | |
key: 'setValue', | |
value: function setValue(textValue) { | |
true ? (0, _warning2.default)(false, 'setValue() is deprecated, use the searchText property.') : void 0; | |
this.setState({ | |
searchText: textValue | |
}); | |
} | |
}, { | |
key: 'getValue', | |
value: function getValue() { | |
true ? (0, _warning2.default)(false, 'getValue() is deprecated.') : void 0; | |
return this.state.searchText; | |
} | |
}, { | |
key: 'blur', | |
value: function blur() { | |
this.refs.searchTextField.blur(); | |
} | |
}, { | |
key: 'focus', | |
value: function focus() { | |
this.refs.searchTextField.focus(); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var anchorOrigin = _props.anchorOrigin; | |
var animated = _props.animated; | |
var style = _props.style; | |
var errorStyle = _props.errorStyle; | |
var floatingLabelText = _props.floatingLabelText; | |
var hintText = _props.hintText; | |
var filter = _props.filter; | |
var fullWidth = _props.fullWidth; | |
var menuStyle = _props.menuStyle; | |
var menuProps = _props.menuProps; | |
var listStyle = _props.listStyle; | |
var targetOrigin = _props.targetOrigin; | |
var disableFocusRipple = _props.disableFocusRipple; | |
var triggerUpdateOnFocus = _props.triggerUpdateOnFocus; | |
var // eslint-disable-line no-unused-vars | |
openOnFocus = _props.openOnFocus; | |
var // eslint-disable-line no-unused-vars | |
maxSearchResults = _props.maxSearchResults; | |
var dataSource = _props.dataSource; | |
var other = _objectWithoutProperties(_props, ['anchorOrigin', 'animated', 'style', 'errorStyle', 'floatingLabelText', 'hintText', 'filter', 'fullWidth', 'menuStyle', 'menuProps', 'listStyle', 'targetOrigin', 'disableFocusRipple', 'triggerUpdateOnFocus', 'openOnFocus', 'maxSearchResults', 'dataSource']); | |
var _state = this.state; | |
var open = _state.open; | |
var anchorEl = _state.anchorEl; | |
var searchText = _state.searchText; | |
var focusTextField = _state.focusTextField; | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context, this.state); | |
var requestsList = []; | |
dataSource.every(function (item, index) { | |
switch (typeof item === 'undefined' ? 'undefined' : _typeof(item)) { | |
case 'string': | |
if (filter(searchText, item, item)) { | |
requestsList.push({ | |
text: item, | |
value: _react2.default.createElement(_MenuItem2.default, { | |
innerDivStyle: styles.innerDiv, | |
value: item, | |
primaryText: item, | |
disableFocusRipple: disableFocusRipple, | |
key: index | |
}) | |
}); | |
} | |
break; | |
case 'object': | |
if (item && typeof item.text === 'string') { | |
if (filter(searchText, item.text, item)) { | |
if (item.value.type && (item.value.type.muiName === _MenuItem2.default.muiName || item.value.type.muiName === _Divider2.default.muiName)) { | |
requestsList.push({ | |
text: item.text, | |
value: _react2.default.cloneElement(item.value, { | |
key: index, | |
disableFocusRipple: disableFocusRipple | |
}) | |
}); | |
} else { | |
requestsList.push({ | |
text: item.text, | |
value: _react2.default.createElement(_MenuItem2.default, { | |
innerDivStyle: styles.innerDiv, | |
primaryText: item.value, | |
disableFocusRipple: disableFocusRipple, | |
key: index | |
}) | |
}); | |
} | |
} | |
} | |
break; | |
default: | |
// Do nothing | |
} | |
return !(maxSearchResults && maxSearchResults > 0 && requestsList.length === maxSearchResults); | |
}); | |
this.requestsList = requestsList; | |
var menu = open && requestsList.length > 0 && _react2.default.createElement( | |
_Menu2.default, | |
_extends({}, menuProps, { | |
ref: 'menu', | |
autoWidth: false, | |
disableAutoFocus: focusTextField, | |
onEscKeyDown: this.handleEscKeyDown, | |
initiallyKeyboardFocused: true, | |
onItemTouchTap: this.handleItemTouchTap, | |
onMouseDown: this.handleMouseDown, | |
style: (0, _simpleAssign2.default)(styles.menu, menuStyle), | |
listStyle: (0, _simpleAssign2.default)(styles.list, listStyle) | |
}), | |
requestsList.map(function (i) { | |
return i.value; | |
}) | |
); | |
return _react2.default.createElement( | |
'div', | |
{ style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, | |
_react2.default.createElement(_TextField2.default, _extends({}, other, { | |
ref: 'searchTextField', | |
autoComplete: 'off', | |
value: searchText, | |
onChange: this.handleChange, | |
onBlur: this.handleBlur, | |
onFocus: this.handleFocus, | |
onKeyDown: this.handleKeyDown, | |
floatingLabelText: floatingLabelText, | |
hintText: hintText, | |
fullWidth: fullWidth, | |
multiLine: false, | |
errorStyle: errorStyle | |
})), | |
_react2.default.createElement( | |
_Popover2.default, | |
{ | |
style: styles.popover, | |
canAutoPosition: false, | |
anchorOrigin: anchorOrigin, | |
targetOrigin: targetOrigin, | |
open: open, | |
anchorEl: anchorEl, | |
useLayerForClickAway: false, | |
onRequestClose: this.handleRequestClose, | |
animated: animated | |
}, | |
menu | |
) | |
); | |
} | |
}]); | |
return AutoComplete; | |
}(_react.Component); | |
AutoComplete.propTypes = { | |
/** | |
* Location of the anchor for the auto complete. | |
*/ | |
anchorOrigin: _propTypes2.default.origin, | |
/** | |
* If true, the auto complete is animated as it is toggled. | |
*/ | |
animated: _react.PropTypes.bool, | |
/** | |
* Array of strings or nodes used to populate the list. | |
*/ | |
dataSource: _react.PropTypes.array.isRequired, | |
/** | |
* Disables focus ripple when true. | |
*/ | |
disableFocusRipple: _react.PropTypes.bool, | |
/** | |
* Override style prop for error. | |
*/ | |
errorStyle: _react.PropTypes.object, | |
/** | |
* The error content to display. | |
*/ | |
errorText: _react.PropTypes.node, | |
/** | |
* Callback function used to filter the auto complete. | |
* | |
* @param {string} searchText The text to search for within `dataSource`. | |
* @param {string} key `dataSource` element, or `text` property on that element if it's not a string. | |
* @returns {boolean} `true` indicates the auto complete list will include `key` when the input is `searchText`. | |
*/ | |
filter: _react.PropTypes.func, | |
/** | |
* The content to use for adding floating label element. | |
*/ | |
floatingLabelText: _react.PropTypes.node, | |
/** | |
* If true, the field receives the property `width: 100%`. | |
*/ | |
fullWidth: _react.PropTypes.bool, | |
/** | |
* The hint content to display. | |
*/ | |
hintText: _react.PropTypes.node, | |
/** | |
* Override style for list. | |
*/ | |
listStyle: _react.PropTypes.object, | |
/** | |
* The max number of search results to be shown. | |
* By default it shows all the items which matches filter. | |
*/ | |
maxSearchResults: _react.PropTypes.number, | |
/** | |
* Delay for closing time of the menu. | |
*/ | |
menuCloseDelay: _react.PropTypes.number, | |
/** | |
* Props to be passed to menu. | |
*/ | |
menuProps: _react.PropTypes.object, | |
/** | |
* Override style for menu. | |
*/ | |
menuStyle: _react.PropTypes.object, | |
/** | |
* Callback function that is fired when the `TextField` loses focus. | |
* | |
* @param {object} event `blur` event targeting the `TextField`. | |
*/ | |
onBlur: _react.PropTypes.func, | |
/** | |
* Callback function that is fired when the `TextField` gains focus. | |
* | |
* @param {object} event `focus` event targeting the `TextField`. | |
*/ | |
onFocus: _react.PropTypes.func, | |
/** | |
* Callback function that is fired when the `TextField` receives a keydown event. | |
*/ | |
onKeyDown: _react.PropTypes.func, | |
/** | |
* Callback function that is fired when a list item is selected, or enter is pressed in the `TextField`. | |
* | |
* @param {string} chosenRequest Either the `TextField` input value, if enter is pressed in the `TextField`, | |
* or the text value of the corresponding list item that was selected. | |
* @param {number} index The index in `dataSource` of the list item selected, or `-1` if enter is pressed in the | |
* `TextField`. | |
*/ | |
onNewRequest: _react.PropTypes.func, | |
/** | |
* Callback function that is fired when the user updates the `TextField`. | |
* | |
* @param {string} searchText The auto-complete's `searchText` value. | |
* @param {array} dataSource The auto-complete's `dataSource` array. | |
*/ | |
onUpdateInput: _react.PropTypes.func, | |
/** | |
* Auto complete menu is open if true. | |
*/ | |
open: _react.PropTypes.bool, | |
/** | |
* If true, the list item is showed when a focus event triggers. | |
*/ | |
openOnFocus: _react.PropTypes.bool, | |
/** | |
* Text being input to auto complete. | |
*/ | |
searchText: _react.PropTypes.string, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* Origin for location of target. | |
*/ | |
targetOrigin: _propTypes2.default.origin, | |
/** | |
* If true, will update when focus event triggers. | |
*/ | |
triggerUpdateOnFocus: (0, _deprecatedPropType2.default)(_react.PropTypes.bool, 'Instead, use openOnFocus') | |
}; | |
AutoComplete.defaultProps = { | |
anchorOrigin: { | |
vertical: 'bottom', | |
horizontal: 'left' | |
}, | |
animated: true, | |
disableFocusRipple: true, | |
filter: function filter(searchText, key) { | |
return searchText !== '' && key.indexOf(searchText) !== -1; | |
}, | |
fullWidth: false, | |
open: false, | |
openOnFocus: false, | |
onUpdateInput: function onUpdateInput() {}, | |
onNewRequest: function onNewRequest() {}, | |
searchText: '', | |
menuCloseDelay: 300, | |
targetOrigin: { | |
vertical: 'top', | |
horizontal: 'left' | |
} | |
}; | |
AutoComplete.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
AutoComplete.levenshteinDistance = function (searchText, key) { | |
var current = []; | |
var prev = void 0; | |
var value = void 0; | |
for (var i = 0; i <= key.length; i++) { | |
for (var j = 0; j <= searchText.length; j++) { | |
if (i && j) { | |
if (searchText.charAt(j - 1) === key.charAt(i - 1)) value = prev;else value = Math.min(current[j], current[j - 1], prev) + 1; | |
} else { | |
value = i + j; | |
} | |
prev = current[j]; | |
current[j] = value; | |
} | |
} | |
return current.pop(); | |
}; | |
AutoComplete.noFilter = function () { | |
return true; | |
}; | |
AutoComplete.defaultFilter = AutoComplete.caseSensitiveFilter = function (searchText, key) { | |
return searchText !== '' && key.indexOf(searchText) !== -1; | |
}; | |
AutoComplete.caseInsensitiveFilter = function (searchText, key) { | |
return key.toLowerCase().indexOf(searchText.toLowerCase()) !== -1; | |
}; | |
AutoComplete.levenshteinDistanceFilter = function (distanceLessThan) { | |
if (distanceLessThan === undefined) { | |
return AutoComplete.levenshteinDistance; | |
} else if (typeof distanceLessThan !== 'number') { | |
throw 'Error: AutoComplete.levenshteinDistanceFilter is a filter generator, not a filter!'; | |
} | |
return function (s, k) { | |
return AutoComplete.levenshteinDistance(s, k) < distanceLessThan; | |
}; | |
}; | |
AutoComplete.fuzzyFilter = function (searchText, key) { | |
var compareString = key.toLowerCase(); | |
searchText = searchText.toLowerCase(); | |
var searchTextIndex = 0; | |
for (var index = 0; index < key.length; index++) { | |
if (compareString[index] === searchText[searchTextIndex]) { | |
searchTextIndex += 1; | |
} | |
} | |
return searchTextIndex === searchText.length; | |
}; | |
AutoComplete.Item = _MenuItem2.default; | |
AutoComplete.Divider = _Divider2.default; | |
exports.default = AutoComplete; | |
/***/ }, | |
/* 101 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _AutoComplete = __webpack_require__(100); | |
var _AutoComplete2 = _interopRequireDefault(_AutoComplete); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _AutoComplete2.default; | |
/***/ }, | |
/* 102 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var backgroundColor = props.backgroundColor; | |
var color = props.color; | |
var size = props.size; | |
var src = props.src; | |
var avatar = context.muiTheme.avatar; | |
var styles = { | |
root: { | |
color: color || avatar.color, | |
backgroundColor: backgroundColor || avatar.backgroundColor, | |
userSelect: 'none', | |
display: 'inline-block', | |
textAlign: 'center', | |
lineHeight: size + 'px', | |
fontSize: size / 2, | |
borderRadius: '50%', | |
height: size, | |
width: size | |
}, | |
icon: { | |
color: color || avatar.color, | |
width: size * 0.6, | |
height: size * 0.6, | |
fontSize: size * 0.6, | |
margin: size * 0.2 | |
} | |
}; | |
if (src && avatar.borderColor) { | |
(0, _simpleAssign2.default)(styles.root, { | |
background: 'url(' + src + ')', | |
backgroundSize: size, | |
backgroundOrigin: 'border-box', | |
border: 'solid 1px ' + avatar.borderColor, | |
height: size - 2, | |
width: size - 2 | |
}); | |
} | |
return styles; | |
} | |
var Avatar = function (_Component) { | |
_inherits(Avatar, _Component); | |
function Avatar() { | |
_classCallCheck(this, Avatar); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(Avatar).apply(this, arguments)); | |
} | |
_createClass(Avatar, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var icon = _props.icon; | |
var src = _props.src; | |
var style = _props.style; | |
var className = _props.className; | |
var other = _objectWithoutProperties(_props, ['icon', 'src', 'style', 'className']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
if (src) { | |
return _react2.default.createElement('div', _extends({}, other, { | |
style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)), | |
className: className | |
})); | |
} else { | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { | |
style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)), | |
className: className | |
}), | |
icon && _react2.default.cloneElement(icon, { | |
color: styles.icon.color, | |
style: (0, _simpleAssign2.default)(styles.icon, icon.props.style) | |
}), | |
this.props.children | |
); | |
} | |
} | |
}]); | |
return Avatar; | |
}(_react.Component); | |
Avatar.muiName = 'Avatar'; | |
Avatar.propTypes = { | |
/** | |
* The backgroundColor of the avatar. Does not apply to image avatars. | |
*/ | |
backgroundColor: _react.PropTypes.string, | |
/** | |
* Can be used, for instance, to render a letter inside the avatar. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The css class name of the root `div` or `img` element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* The icon or letter's color. | |
*/ | |
color: _react.PropTypes.string, | |
/** | |
* This is the SvgIcon or FontIcon to be used inside the avatar. | |
*/ | |
icon: _react.PropTypes.element, | |
/** | |
* This is the size of the avatar in pixels. | |
*/ | |
size: _react.PropTypes.number, | |
/** | |
* If passed in, this component will render an img element. Otherwise, a div will be rendered. | |
*/ | |
src: _react.PropTypes.string, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
Avatar.defaultProps = { | |
size: 40 | |
}; | |
Avatar.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = Avatar; | |
/***/ }, | |
/* 103 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var primary = props.primary; | |
var secondary = props.secondary; | |
var badge = context.muiTheme.badge; | |
var badgeBackgroundColor = void 0; | |
var badgeTextColor = void 0; | |
if (primary) { | |
badgeBackgroundColor = badge.primaryColor; | |
badgeTextColor = badge.primaryTextColor; | |
} else if (secondary) { | |
badgeBackgroundColor = badge.secondaryColor; | |
badgeTextColor = badge.secondaryTextColor; | |
} else { | |
badgeBackgroundColor = badge.color; | |
badgeTextColor = badge.textColor; | |
} | |
var radius = 12; | |
var radius2x = Math.floor(2 * radius); | |
return { | |
root: { | |
position: 'relative', | |
display: 'inline-block', | |
padding: radius2x + 'px ' + radius2x + 'px ' + radius + 'px ' + radius + 'px' | |
}, | |
badge: { | |
display: 'flex', | |
flexDirection: 'row', | |
flexWrap: 'wrap', | |
justifyContent: 'center', | |
alignContent: 'center', | |
alignItems: 'center', | |
position: 'absolute', | |
top: 0, | |
right: 0, | |
fontWeight: badge.fontWeight, | |
fontSize: radius, | |
width: radius2x, | |
height: radius2x, | |
borderRadius: '50%', | |
backgroundColor: badgeBackgroundColor, | |
color: badgeTextColor | |
} | |
}; | |
} | |
var Badge = function (_Component) { | |
_inherits(Badge, _Component); | |
function Badge() { | |
_classCallCheck(this, Badge); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(Badge).apply(this, arguments)); | |
} | |
_createClass(Badge, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var style = _props.style; | |
var children = _props.children; | |
var badgeContent = _props.badgeContent; | |
var badgeStyle = _props.badgeStyle; | |
var other = _objectWithoutProperties(_props, ['style', 'children', 'badgeContent', 'badgeStyle']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, style)) }), | |
children, | |
_react2.default.createElement( | |
'span', | |
{ style: prepareStyles((0, _simpleAssign2.default)({}, styles.badge, badgeStyle)) }, | |
badgeContent | |
) | |
); | |
} | |
}]); | |
return Badge; | |
}(_react.Component); | |
Badge.propTypes = { | |
/** | |
* This is the content rendered within the badge. | |
*/ | |
badgeContent: _react.PropTypes.node.isRequired, | |
/** | |
* Override the inline-styles of the badge element. | |
*/ | |
badgeStyle: _react.PropTypes.object, | |
/** | |
* The badge will be added relativelty to this node. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* If true, the badge will use the primary badge colors. | |
*/ | |
primary: _react.PropTypes.bool, | |
/** | |
* If true, the badge will use the secondary badge colors. | |
*/ | |
secondary: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
Badge.defaultProps = { | |
primary: false, | |
secondary: false | |
}; | |
Badge.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = Badge; | |
/***/ }, | |
/* 104 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _Badge = __webpack_require__(103); | |
var _Badge2 = _interopRequireDefault(_Badge); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _Badge2.default; | |
/***/ }, | |
/* 105 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _Paper = __webpack_require__(8); | |
var _Paper2 = _interopRequireDefault(_Paper); | |
var _CardExpandable = __webpack_require__(55); | |
var _CardExpandable2 = _interopRequireDefault(_CardExpandable); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var Card = function (_Component) { | |
_inherits(Card, _Component); | |
function Card() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, Card); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Card)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { expanded: null }, _this.handleExpanding = function (event) { | |
event.preventDefault(); | |
var newExpandedState = !_this.state.expanded; | |
// no automatic state update when the component is controlled | |
if (_this.props.expanded === null) { | |
_this.setState({ expanded: newExpandedState }); | |
} | |
if (_this.props.onExpandChange) _this.props.onExpandChange(newExpandedState); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(Card, [{ | |
key: 'componentWillMount', | |
value: function componentWillMount() { | |
this.setState({ | |
expanded: this.props.expanded === null ? this.props.initiallyExpanded === true : this.props.expanded | |
}); | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
// update the state when the component is controlled. | |
if (nextProps.expanded !== null) this.setState({ expanded: nextProps.expanded }); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _this2 = this; | |
var lastElement = void 0; | |
var expanded = this.state.expanded; | |
var newChildren = _react2.default.Children.map(this.props.children, function (currentChild) { | |
var doClone = false; | |
var newChild = undefined; | |
var newProps = {}; | |
var element = currentChild; | |
if (!currentChild || !currentChild.props) { | |
return null; | |
} | |
if (expanded === false && currentChild.props.expandable === true) return; | |
if (currentChild.props.actAsExpander === true) { | |
doClone = true; | |
newProps.onTouchTap = _this2.handleExpanding; | |
newProps.style = (0, _simpleAssign2.default)({ cursor: 'pointer' }, currentChild.props.style); | |
} | |
if (currentChild.props.showExpandableButton === true) { | |
doClone = true; | |
newChild = _react2.default.createElement(_CardExpandable2.default, { expanded: expanded, onExpanding: _this2.handleExpanding }); | |
} | |
if (doClone) { | |
element = _react2.default.cloneElement(currentChild, newProps, currentChild.props.children, newChild); | |
} | |
return element; | |
}, 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.muiName === 'CardText' || lastElement.type.muiName === 'CardTitle'); | |
var _props = this.props; | |
var style = _props.style; | |
var containerStyle = _props.containerStyle; | |
var other = _objectWithoutProperties(_props, ['style', 'containerStyle']); | |
var mergedStyles = (0, _simpleAssign2.default)({ | |
zIndex: 1 | |
}, style); | |
var containerMergedStyles = (0, _simpleAssign2.default)({ | |
paddingBottom: addBottomPadding ? 8 : 0 | |
}, containerStyle); | |
return _react2.default.createElement( | |
_Paper2.default, | |
_extends({}, other, { style: mergedStyles }), | |
_react2.default.createElement( | |
'div', | |
{ style: containerMergedStyles }, | |
newChildren | |
) | |
); | |
} | |
}]); | |
return Card; | |
}(_react.Component); | |
Card.propTypes = { | |
/** | |
* If true, a click on this card component expands the card. Can be set on any child of the `Card` component. | |
*/ | |
actAsExpander: _react.PropTypes.bool, | |
/** | |
* Can be used to render elements inside the Card. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* Override the inline-styles of the container element. | |
*/ | |
containerStyle: _react.PropTypes.object, | |
/** | |
* If true, this card component is expandable. Can be set on any child of the `Card` component. | |
*/ | |
expandable: _react.PropTypes.bool, | |
/** | |
* Whether this card is expanded. | |
* If `true` or `false` the component is controlled. | |
* if `null` the component is uncontrolled. | |
*/ | |
expanded: _react.PropTypes.bool, | |
/** | |
* Whether this card is initially expanded. | |
*/ | |
initiallyExpanded: _react.PropTypes.bool, | |
/** | |
* Callback function fired when the `expandable` state of the card has changed. | |
* | |
* @param {boolean} newExpandedState Represents the new `expanded` state of the card. | |
*/ | |
onExpandChange: _react.PropTypes.func, | |
/** | |
* If true, this card component will include a button to expand the card. `CardTitle`, | |
* `CardHeader` and `CardActions` implement `showExpandableButton`. Any child component | |
* of `Card` can implements `showExpandableButton` or forwards the property to a child | |
* component supporting it. | |
*/ | |
showExpandableButton: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
Card.defaultProps = { | |
expanded: null, | |
expandable: false, | |
initiallyExpanded: false, | |
actAsExpander: false | |
}; | |
exports.default = Card; | |
/***/ }, | |
/* 106 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = exports.CardExpandable = exports.CardActions = exports.CardText = exports.CardMedia = exports.CardTitle = exports.CardHeader = exports.Card = undefined; | |
var _Card2 = __webpack_require__(105); | |
var _Card3 = _interopRequireDefault(_Card2); | |
var _CardHeader2 = __webpack_require__(56); | |
var _CardHeader3 = _interopRequireDefault(_CardHeader2); | |
var _CardTitle2 = __webpack_require__(59); | |
var _CardTitle3 = _interopRequireDefault(_CardTitle2); | |
var _CardMedia2 = __webpack_require__(57); | |
var _CardMedia3 = _interopRequireDefault(_CardMedia2); | |
var _CardText2 = __webpack_require__(58); | |
var _CardText3 = _interopRequireDefault(_CardText2); | |
var _CardActions2 = __webpack_require__(54); | |
var _CardActions3 = _interopRequireDefault(_CardActions2); | |
var _CardExpandable2 = __webpack_require__(55); | |
var _CardExpandable3 = _interopRequireDefault(_CardExpandable2); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.Card = _Card3.default; | |
exports.CardHeader = _CardHeader3.default; | |
exports.CardTitle = _CardTitle3.default; | |
exports.CardMedia = _CardMedia3.default; | |
exports.CardText = _CardText3.default; | |
exports.CardActions = _CardActions3.default; | |
exports.CardExpandable = _CardExpandable3.default; | |
exports.default = _Card3.default; | |
/***/ }, | |
/* 107 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _EnhancedSwitch = __webpack_require__(42); | |
var _EnhancedSwitch2 = _interopRequireDefault(_EnhancedSwitch); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _checkBoxOutlineBlank = __webpack_require__(207); | |
var _checkBoxOutlineBlank2 = _interopRequireDefault(_checkBoxOutlineBlank); | |
var _checkBox = __webpack_require__(208); | |
var _checkBox2 = _interopRequireDefault(_checkBox); | |
var _deprecatedPropType = __webpack_require__(15); | |
var _deprecatedPropType2 = _interopRequireDefault(_deprecatedPropType); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var checkbox = context.muiTheme.checkbox; | |
var checkboxSize = 24; | |
return { | |
icon: { | |
height: checkboxSize, | |
width: checkboxSize | |
}, | |
check: { | |
position: 'absolute', | |
opacity: 0, | |
transform: 'scale(0)', | |
transitionOrigin: '50% 50%', | |
transition: _transitions2.default.easeOut('450ms', 'opacity', '0ms') + ', ' + _transitions2.default.easeOut('0ms', 'transform', '450ms'), | |
fill: checkbox.checkedColor | |
}, | |
box: { | |
position: 'absolute', | |
opacity: 1, | |
fill: checkbox.boxColor, | |
transition: _transitions2.default.easeOut('2s', null, '200ms') | |
}, | |
checkWhenSwitched: { | |
opacity: 1, | |
transform: 'scale(1)', | |
transition: _transitions2.default.easeOut('0ms', 'opacity', '0ms') + ', ' + _transitions2.default.easeOut('800ms', 'transform', '0ms') | |
}, | |
boxWhenSwitched: { | |
transition: _transitions2.default.easeOut('100ms', null, '0ms'), | |
fill: checkbox.checkedColor | |
}, | |
checkWhenDisabled: { | |
fill: checkbox.disabledColor | |
}, | |
boxWhenDisabled: { | |
fill: props.checked ? 'transparent' : checkbox.disabledColor | |
}, | |
label: { | |
color: props.disabled ? checkbox.labelDisabledColor : checkbox.labelColor | |
} | |
}; | |
} | |
var Checkbox = function (_Component) { | |
_inherits(Checkbox, _Component); | |
function Checkbox() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, Checkbox); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Checkbox)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { switched: false }, _this.handleCheck = function (event, isInputChecked) { | |
if (_this.props.onCheck) _this.props.onCheck(event, isInputChecked); | |
}, _this.handleStateChange = function (newSwitched) { | |
_this.setState({ switched: newSwitched }); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(Checkbox, [{ | |
key: 'componentWillMount', | |
value: function componentWillMount() { | |
var _props = this.props; | |
var checked = _props.checked; | |
var defaultChecked = _props.defaultChecked; | |
var valueLink = _props.valueLink; | |
if (checked || defaultChecked || valueLink && valueLink.value) { | |
this.setState({ switched: true }); | |
} | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
this.setState({ | |
switched: this.props.checked !== nextProps.checked ? nextProps.checked : this.state.switched | |
}); | |
} | |
}, { | |
key: 'isChecked', | |
value: function isChecked() { | |
return this.refs.enhancedSwitch.isSwitched(); | |
} | |
}, { | |
key: 'setChecked', | |
value: function setChecked(newCheckedValue) { | |
this.refs.enhancedSwitch.setSwitched(newCheckedValue); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props2 = this.props; | |
var iconStyle = _props2.iconStyle; | |
var onCheck = _props2.onCheck; | |
var // eslint-disable-line no-unused-vars | |
checkedIcon = _props2.checkedIcon; | |
var uncheckedIcon = _props2.uncheckedIcon; | |
var unCheckedIcon = _props2.unCheckedIcon; | |
var other = _objectWithoutProperties(_props2, ['iconStyle', 'onCheck', 'checkedIcon', 'uncheckedIcon', 'unCheckedIcon']); | |
var styles = getStyles(this.props, this.context); | |
var boxStyles = (0, _simpleAssign2.default)(styles.box, this.state.switched && styles.boxWhenSwitched, iconStyle, this.props.disabled && styles.boxWhenDisabled); | |
var checkStyles = (0, _simpleAssign2.default)(styles.check, this.state.switched && styles.checkWhenSwitched, iconStyle, this.props.disabled && styles.checkWhenDisabled); | |
var checkedElement = checkedIcon ? _react2.default.cloneElement(checkedIcon, { | |
style: (0, _simpleAssign2.default)(checkStyles, checkedIcon.props.style) | |
}) : _react2.default.createElement(_checkBox2.default, { | |
style: checkStyles | |
}); | |
var unCheckedElement = unCheckedIcon || uncheckedIcon ? _react2.default.cloneElement(unCheckedIcon || uncheckedIcon, { | |
style: (0, _simpleAssign2.default)(boxStyles, (unCheckedIcon || uncheckedIcon).props.style) | |
}) : _react2.default.createElement(_checkBoxOutlineBlank2.default, { | |
style: boxStyles | |
}); | |
var checkboxElement = _react2.default.createElement( | |
'div', | |
null, | |
unCheckedElement, | |
checkedElement | |
); | |
var rippleColor = this.state.switched ? checkStyles.fill : boxStyles.fill; | |
var mergedIconStyle = (0, _simpleAssign2.default)(styles.icon, iconStyle); | |
var labelStyle = (0, _simpleAssign2.default)(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, | |
labelPosition: this.props.labelPosition | |
}; | |
return _react2.default.createElement(_EnhancedSwitch2.default, _extends({}, other, enhancedSwitchProps)); | |
} | |
}]); | |
return Checkbox; | |
}(_react.Component); | |
Checkbox.propTypes = { | |
/** | |
* Checkbox is checked if true. | |
*/ | |
checked: _react.PropTypes.bool, | |
/** | |
* The SvgIcon to use for the checked state. | |
* This is useful to create icon toggles. | |
*/ | |
checkedIcon: _react.PropTypes.element, | |
/** | |
* The default state of our checkbox component. | |
* **Warning:** This cannot be used in conjunction with `checked`. | |
* Decide between using a controlled or uncontrolled input element and remove one of these props. | |
* More info: https://fb.me/react-controlled-components | |
*/ | |
defaultChecked: _react.PropTypes.bool, | |
/** | |
* Disabled if true. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* Overrides the inline-styles of the icon element. | |
*/ | |
iconStyle: _react.PropTypes.object, | |
/** | |
* Overrides the inline-styles of the input element. | |
*/ | |
inputStyle: _react.PropTypes.object, | |
/** | |
* Where the label will be placed next to the checkbox. | |
*/ | |
labelPosition: _react.PropTypes.oneOf(['left', 'right']), | |
/** | |
* Overrides the inline-styles of the Checkbox element label. | |
*/ | |
labelStyle: _react.PropTypes.object, | |
/** | |
* Callback function that is fired when the checkbox is checked. | |
* | |
* @param {object} event `change` event targeting the underlying checkbox `input`. | |
* @param {boolean} isInputChecked The `checked` value of the underlying checkbox `input`. | |
*/ | |
onCheck: _react.PropTypes.func, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The SvgIcon to use for the unchecked state. | |
* This is useful to create icon toggles. | |
*/ | |
unCheckedIcon: (0, _deprecatedPropType2.default)(_react.PropTypes.element, 'Use uncheckedIcon instead.'), | |
/** | |
* The SvgIcon to use for the unchecked state. | |
* This is useful to create icon toggles. | |
*/ | |
uncheckedIcon: _react.PropTypes.element, | |
/** | |
* ValueLink for when using controlled checkbox. | |
*/ | |
valueLink: _react.PropTypes.object | |
}; | |
Checkbox.defaultProps = { | |
labelPosition: 'right', | |
disabled: false | |
}; | |
Checkbox.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = Checkbox; | |
/***/ }, | |
/* 108 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _autoPrefix = __webpack_require__(14); | |
var _autoPrefix2 = _interopRequireDefault(_autoPrefix); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getRelativeValue(value, min, 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; | |
} | |
function getStyles(props, context) { | |
var max = props.max; | |
var min = props.min; | |
var size = props.size; | |
var value = props.value; | |
var palette = context.muiTheme.baseTheme.palette; | |
var zoom = size * 1.4; | |
var baseSize = 50; | |
var margin = Math.round((50 * zoom - 50) / 2); | |
if (margin < 0) margin = 0; | |
var styles = { | |
root: { | |
position: 'relative', | |
margin: margin, | |
display: 'inline-block', | |
width: baseSize, | |
height: baseSize | |
}, | |
wrapper: { | |
width: baseSize, | |
height: baseSize, | |
display: 'inline-block', | |
transition: _transitions2.default.create('transform', '20s', null, 'linear'), | |
transitionTimingFunction: 'linear' | |
}, | |
svg: { | |
height: baseSize, | |
position: 'relative', | |
transform: 'scale(' + zoom + ')', | |
width: baseSize | |
}, | |
path: { | |
strokeDasharray: '89, 200', | |
strokeDashoffset: 0, | |
stroke: props.color || palette.primary1Color, | |
strokeLinecap: 'round', | |
transition: _transitions2.default.create('all', '1.5s', null, 'ease-in-out') | |
} | |
}; | |
if (props.mode === 'determinate') { | |
var relVal = getRelativeValue(value, min, max); | |
styles.path.transition = _transitions2.default.create('all', '0.3s', null, 'linear'); | |
styles.path.strokeDasharray = Math.round(relVal * 1.25) + ', 200'; | |
} | |
return styles; | |
} | |
var CircularProgress = function (_Component) { | |
_inherits(CircularProgress, _Component); | |
function CircularProgress() { | |
_classCallCheck(this, CircularProgress); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(CircularProgress).apply(this, arguments)); | |
} | |
_createClass(CircularProgress, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
this.scalePath(this.refs.path); | |
this.rotateWrapper(this.refs.wrapper); | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
clearTimeout(this.scalePathTimer); | |
clearTimeout(this.rotateWrapperTimer); | |
} | |
}, { | |
key: 'scalePath', | |
value: function scalePath(path, step) { | |
var _this2 = this; | |
if (this.props.mode !== 'indeterminate') return; | |
step = step || 0; | |
step %= 3; | |
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'; | |
} | |
this.scalePathTimer = setTimeout(function () { | |
return _this2.scalePath(path, step + 1); | |
}, step ? 750 : 250); | |
} | |
}, { | |
key: 'rotateWrapper', | |
value: function rotateWrapper(wrapper) { | |
var _this3 = this; | |
if (this.props.mode !== 'indeterminate') return; | |
_autoPrefix2.default.set(wrapper.style, 'transform', 'rotate(0deg)'); | |
_autoPrefix2.default.set(wrapper.style, 'transitionDuration', '0ms'); | |
setTimeout(function () { | |
_autoPrefix2.default.set(wrapper.style, 'transform', 'rotate(1800deg)'); | |
_autoPrefix2.default.set(wrapper.style, 'transitionDuration', '10s'); | |
_autoPrefix2.default.set(wrapper.style, 'transitionTimingFunction', 'linear'); | |
}, 50); | |
this.rotateWrapperTimer = setTimeout(function () { | |
return _this3.rotateWrapper(wrapper); | |
}, 10050); | |
} | |
}, { | |
key: 'render', | |
value: 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 prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), | |
_react2.default.createElement( | |
'div', | |
{ ref: 'wrapper', style: prepareStyles((0, _simpleAssign2.default)(styles.wrapper, innerStyle)) }, | |
_react2.default.createElement( | |
'svg', | |
{ style: prepareStyles(styles.svg) }, | |
_react2.default.createElement('circle', { | |
ref: 'path', | |
style: prepareStyles(styles.path), | |
cx: '25', | |
cy: '25', | |
r: '20', | |
fill: 'none', | |
strokeWidth: '2.5', | |
strokeMiterlimit: '20' | |
}) | |
) | |
) | |
); | |
} | |
}]); | |
return CircularProgress; | |
}(_react.Component); | |
CircularProgress.propTypes = { | |
/** | |
* Override the progress's color. | |
*/ | |
color: _react.PropTypes.string, | |
/** | |
* Style for inner wrapper div. | |
*/ | |
innerStyle: _react.PropTypes.object, | |
/** | |
* The max value of progress, only works in determinate mode. | |
*/ | |
max: _react.PropTypes.number, | |
/** | |
* The min value of progress, only works in determinate mode. | |
*/ | |
min: _react.PropTypes.number, | |
/** | |
* The mode of show your progress, indeterminate | |
* for when there is no value for progress. | |
*/ | |
mode: _react.PropTypes.oneOf(['determinate', 'indeterminate']), | |
/** | |
* The size of the progress. | |
*/ | |
size: _react.PropTypes.number, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The value of progress, only works in determinate mode. | |
*/ | |
value: _react.PropTypes.number | |
}; | |
CircularProgress.defaultProps = { | |
mode: 'indeterminate', | |
value: 0, | |
min: 0, | |
max: 100, | |
size: 1 | |
}; | |
CircularProgress.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = CircularProgress; | |
/***/ }, | |
/* 109 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _CircularProgress = __webpack_require__(108); | |
var _CircularProgress2 = _interopRequireDefault(_CircularProgress); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _CircularProgress2.default; | |
/***/ }, | |
/* 110 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactEventListener = __webpack_require__(13); | |
var _reactEventListener2 = _interopRequireDefault(_reactEventListener); | |
var _keycode = __webpack_require__(10); | |
var _keycode2 = _interopRequireDefault(_keycode); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _CalendarActionButtons = __webpack_require__(111); | |
var _CalendarActionButtons2 = _interopRequireDefault(_CalendarActionButtons); | |
var _CalendarMonth = __webpack_require__(112); | |
var _CalendarMonth2 = _interopRequireDefault(_CalendarMonth); | |
var _CalendarYear = __webpack_require__(114); | |
var _CalendarYear2 = _interopRequireDefault(_CalendarYear); | |
var _CalendarToolbar = __webpack_require__(113); | |
var _CalendarToolbar2 = _interopRequireDefault(_CalendarToolbar); | |
var _DateDisplay = __webpack_require__(115); | |
var _DateDisplay2 = _interopRequireDefault(_DateDisplay); | |
var _SlideIn = __webpack_require__(44); | |
var _SlideIn2 = _interopRequireDefault(_SlideIn); | |
var _ClearFix = __webpack_require__(79); | |
var _ClearFix2 = _interopRequireDefault(_ClearFix); | |
var _dateUtils = __webpack_require__(17); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
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); } } | |
var daysArray = [].concat(_toConsumableArray(Array(7))); | |
var Calendar = function (_Component) { | |
_inherits(Calendar, _Component); | |
function Calendar() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, Calendar); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Calendar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
displayDate: undefined, | |
displayMonthDay: true, | |
selectedDate: undefined, | |
transitionDirection: 'left', | |
transitionEnter: true | |
}, _this.handleTouchTapDay = function (event, date) { | |
_this.setSelectedDate(date); | |
if (_this.props.onTouchTapDay) _this.props.onTouchTapDay(event, date); | |
}, _this.handleMonthChange = function (months) { | |
_this.setState({ | |
transitionDirection: months >= 0 ? 'left' : 'right', | |
displayDate: (0, _dateUtils.addMonths)(_this.state.displayDate, months) | |
}); | |
}, _this.handleTouchTapYear = function (event, year) { | |
var date = (0, _dateUtils.cloneDate)(_this.state.selectedDate); | |
date.setFullYear(year); | |
_this.setSelectedDate(date, event); | |
}, _this.handleTouchTapDateDisplayMonthDay = function () { | |
_this.setState({ | |
displayMonthDay: true | |
}); | |
}, _this.handleTouchTapDateDisplayYear = function () { | |
_this.setState({ | |
displayMonthDay: false | |
}); | |
}, _this.handleWindowKeyDown = function (event) { | |
if (_this.props.open) { | |
switch ((0, _keycode2.default)(event)) { | |
case 'up': | |
if (event.altKey && event.shiftKey) { | |
_this.addSelectedYears(-1); | |
} else if (event.shiftKey) { | |
_this.addSelectedMonths(-1); | |
} else { | |
_this.addSelectedDays(-7); | |
} | |
break; | |
case 'down': | |
if (event.altKey && event.shiftKey) { | |
_this.addSelectedYears(1); | |
} else if (event.shiftKey) { | |
_this.addSelectedMonths(1); | |
} else { | |
_this.addSelectedDays(7); | |
} | |
break; | |
case 'right': | |
if (event.altKey && event.shiftKey) { | |
_this.addSelectedYears(1); | |
} else if (event.shiftKey) { | |
_this.addSelectedMonths(1); | |
} else { | |
_this.addSelectedDays(1); | |
} | |
break; | |
case 'left': | |
if (event.altKey && event.shiftKey) { | |
_this.addSelectedYears(-1); | |
} else if (event.shiftKey) { | |
_this.addSelectedMonths(-1); | |
} else { | |
_this.addSelectedDays(-1); | |
} | |
break; | |
} | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(Calendar, [{ | |
key: 'componentWillMount', | |
value: function componentWillMount() { | |
this.setState({ | |
displayDate: (0, _dateUtils.getFirstDayOfMonth)(this.props.initialDate), | |
selectedDate: this.props.initialDate | |
}); | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
if (nextProps.initialDate !== this.props.initialDate) { | |
var date = nextProps.initialDate || new Date(); | |
this.setState({ | |
displayDate: (0, _dateUtils.getFirstDayOfMonth)(date), | |
selectedDate: date | |
}); | |
} | |
} | |
}, { | |
key: 'getSelectedDate', | |
value: function getSelectedDate() { | |
return this.state.selectedDate; | |
} | |
}, { | |
key: 'isSelectedDateDisabled', | |
value: function isSelectedDateDisabled() { | |
if (!this.state.displayMonthDay) { | |
return false; | |
} | |
return this.refs.calendar.isSelectedDateDisabled(); | |
} | |
}, { | |
key: 'addSelectedDays', | |
value: function addSelectedDays(days) { | |
this.setSelectedDate((0, _dateUtils.addDays)(this.state.selectedDate, days)); | |
} | |
}, { | |
key: 'addSelectedMonths', | |
value: function addSelectedMonths(months) { | |
this.setSelectedDate((0, _dateUtils.addMonths)(this.state.selectedDate, months)); | |
} | |
}, { | |
key: 'addSelectedYears', | |
value: function addSelectedYears(years) { | |
this.setSelectedDate((0, _dateUtils.addYears)(this.state.selectedDate, years)); | |
} | |
}, { | |
key: 'setDisplayDate', | |
value: function setDisplayDate(date, newSelectedDate) { | |
var newDisplayDate = (0, _dateUtils.getFirstDayOfMonth)(date); | |
var direction = newDisplayDate > this.state.displayDate ? 'left' : 'right'; | |
if (newDisplayDate !== this.state.displayDate) { | |
this.setState({ | |
displayDate: newDisplayDate, | |
transitionDirection: direction, | |
selectedDate: newSelectedDate || this.state.selectedDate | |
}); | |
} | |
} | |
}, { | |
key: 'setSelectedDate', | |
value: function setSelectedDate(date) { | |
var adjustedDate = date; | |
if ((0, _dateUtils.isBeforeDate)(date, this.props.minDate)) { | |
adjustedDate = this.props.minDate; | |
} else if ((0, _dateUtils.isAfterDate)(date, this.props.maxDate)) { | |
adjustedDate = this.props.maxDate; | |
} | |
var newDisplayDate = (0, _dateUtils.getFirstDayOfMonth)(adjustedDate); | |
if (newDisplayDate !== this.state.displayDate) { | |
this.setDisplayDate(newDisplayDate, adjustedDate); | |
} else { | |
this.setState({ | |
selectedDate: adjustedDate | |
}); | |
} | |
} | |
}, { | |
key: 'getToolbarInteractions', | |
value: function getToolbarInteractions() { | |
return { | |
prevMonth: (0, _dateUtils.monthDiff)(this.state.displayDate, this.props.minDate) > 0, | |
nextMonth: (0, _dateUtils.monthDiff)(this.state.displayDate, this.props.maxDate) < 0 | |
}; | |
} | |
}, { | |
key: 'yearSelector', | |
value: function yearSelector() { | |
if (!this.props.disableYearSelection) return _react2.default.createElement(_CalendarYear2.default, { | |
key: 'years', | |
displayDate: this.state.displayDate, | |
onTouchTapYear: this.handleTouchTapYear, | |
selectedDate: this.state.selectedDate, | |
minDate: this.props.minDate, | |
maxDate: this.props.maxDate | |
}); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var weekCount = (0, _dateUtils.getWeekArray)(this.state.displayDate, this.props.firstDayOfWeek).length; | |
var toolbarInteractions = this.getToolbarInteractions(); | |
var isLandscape = this.props.mode === 'landscape'; | |
var calendarTextColor = this.context.muiTheme.datePicker.calendarTextColor; | |
var styles = { | |
root: { | |
color: calendarTextColor, | |
userSelect: 'none', | |
width: isLandscape ? 479 : 310 | |
}, | |
calendar: { | |
display: 'flex', | |
flexDirection: 'column' | |
}, | |
calendarContainer: { | |
display: 'flex', | |
alignContent: 'space-between', | |
justifyContent: 'space-between', | |
flexDirection: 'column', | |
fontSize: 12, | |
fontWeight: 400, | |
padding: '0px 8px', | |
transition: _transitions2.default.easeOut(), | |
width: isLandscape ? 294 : 'auto' | |
}, | |
yearContainer: { | |
display: 'flex', | |
justifyContent: 'space-between', | |
flexDirection: 'column', | |
height: 272, | |
marginTop: 10, | |
overflow: 'hidden', | |
width: 310 | |
}, | |
dateDisplay: { | |
width: isLandscape ? 125 : 270, | |
height: isLandscape ? 290 : 'auto', | |
float: isLandscape ? 'left' : 'none', | |
fontWeight: 'bolder' | |
}, | |
weekTitle: { | |
display: 'flex', | |
flexDirection: 'row', | |
justifyContent: 'space-between', | |
fontWeight: '500', | |
height: 20, | |
lineHeight: '15px', | |
opacity: '0.5', | |
textAlign: 'center' | |
}, | |
weekTitleDay: { | |
width: 42 | |
}, | |
transitionSlide: { | |
height: 214 | |
} | |
}; | |
var weekTitleDayStyle = prepareStyles(styles.weekTitleDay); | |
var weekTitleStyle = prepareStyles(styles.weekTitle); | |
var calendarContainerStyle = prepareStyles(styles.calendarContainer); | |
var yearContainerStyle = prepareStyles(styles.yearContainer); | |
var _props = this.props; | |
var cancelLabel = _props.cancelLabel; | |
var DateTimeFormat = _props.DateTimeFormat; | |
var firstDayOfWeek = _props.firstDayOfWeek; | |
var locale = _props.locale; | |
var okLabel = _props.okLabel; | |
var onTouchTapCancel = _props.onTouchTapCancel; | |
var // eslint-disable-line no-unused-vars | |
onTouchTapOk = _props.onTouchTapOk; | |
var // eslint-disable-line no-unused-vars | |
wordings = _props.wordings; | |
return _react2.default.createElement( | |
_ClearFix2.default, | |
{ style: styles.root }, | |
_react2.default.createElement(_reactEventListener2.default, { | |
target: 'window', | |
onKeyDown: this.handleWindowKeyDown | |
}), | |
_react2.default.createElement(_DateDisplay2.default, { | |
DateTimeFormat: DateTimeFormat, | |
disableYearSelection: this.props.disableYearSelection, | |
onTouchTapMonthDay: this.handleTouchTapDateDisplayMonthDay, | |
onTouchTapYear: this.handleTouchTapDateDisplayYear, | |
locale: locale, | |
monthDaySelected: this.state.displayMonthDay, | |
mode: this.props.mode, | |
selectedDate: this.state.selectedDate, | |
weekCount: weekCount | |
}), | |
_react2.default.createElement( | |
'div', | |
{ style: styles.calendar }, | |
this.state.displayMonthDay && _react2.default.createElement( | |
'div', | |
{ style: calendarContainerStyle }, | |
_react2.default.createElement(_CalendarToolbar2.default, { | |
DateTimeFormat: DateTimeFormat, | |
locale: locale, | |
displayDate: this.state.displayDate, | |
onMonthChange: this.handleMonthChange, | |
prevMonth: toolbarInteractions.prevMonth, | |
nextMonth: toolbarInteractions.nextMonth | |
}), | |
_react2.default.createElement( | |
'div', | |
{ style: weekTitleStyle }, | |
daysArray.map(function (event, i) { | |
return _react2.default.createElement( | |
'span', | |
{ key: i, style: weekTitleDayStyle }, | |
(0, _dateUtils.localizedWeekday)(DateTimeFormat, locale, i, firstDayOfWeek) | |
); | |
}) | |
), | |
_react2.default.createElement( | |
_SlideIn2.default, | |
{ direction: this.state.transitionDirection, style: styles.transitionSlide }, | |
_react2.default.createElement(_CalendarMonth2.default, { | |
displayDate: this.state.displayDate, | |
firstDayOfWeek: this.props.firstDayOfWeek, | |
key: this.state.displayDate.toDateString(), | |
minDate: this.props.minDate, | |
maxDate: this.props.maxDate, | |
onTouchTapDay: this.handleTouchTapDay, | |
ref: 'calendar', | |
selectedDate: this.state.selectedDate, | |
shouldDisableDate: this.props.shouldDisableDate | |
}) | |
) | |
), | |
!this.state.displayMonthDay && _react2.default.createElement( | |
'div', | |
{ style: yearContainerStyle }, | |
this.yearSelector() | |
), | |
okLabel && _react2.default.createElement(_CalendarActionButtons2.default, { | |
autoOk: this.props.autoOk, | |
cancelLabel: cancelLabel, | |
okLabel: okLabel, | |
onTouchTapCancel: onTouchTapCancel, | |
onTouchTapOk: onTouchTapOk, | |
wordings: wordings | |
}) | |
) | |
); | |
} | |
}]); | |
return Calendar; | |
}(_react.Component); | |
Calendar.propTypes = { | |
DateTimeFormat: _react.PropTypes.func.isRequired, | |
autoOk: _react.PropTypes.bool, | |
cancelLabel: _react.PropTypes.node, | |
disableYearSelection: _react.PropTypes.bool, | |
firstDayOfWeek: _react.PropTypes.number, | |
initialDate: _react.PropTypes.object, | |
locale: _react.PropTypes.string.isRequired, | |
maxDate: _react.PropTypes.object, | |
minDate: _react.PropTypes.object, | |
mode: _react.PropTypes.oneOf(['portrait', 'landscape']), | |
okLabel: _react.PropTypes.node, | |
onTouchTapCancel: _react.PropTypes.func, | |
onTouchTapDay: _react.PropTypes.func, | |
onTouchTapOk: _react.PropTypes.func, | |
open: _react.PropTypes.bool, | |
shouldDisableDate: _react.PropTypes.func, | |
wordings: _react.PropTypes.object | |
}; | |
Calendar.defaultProps = { | |
DateTimeFormat: _dateUtils.dateTimeFormat, | |
disableYearSelection: false, | |
initialDate: new Date(), | |
locale: 'en-US', | |
minDate: (0, _dateUtils.addYears)(new Date(), -100), | |
maxDate: (0, _dateUtils.addYears)(new Date(), 100) | |
}; | |
Calendar.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = Calendar; | |
/***/ }, | |
/* 111 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _FlatButton = __webpack_require__(27); | |
var _FlatButton2 = _interopRequireDefault(_FlatButton); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var CalendarActionButton = function (_Component) { | |
_inherits(CalendarActionButton, _Component); | |
function CalendarActionButton() { | |
_classCallCheck(this, CalendarActionButton); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(CalendarActionButton).apply(this, arguments)); | |
} | |
_createClass(CalendarActionButton, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var cancelLabel = _props.cancelLabel; | |
var okLabel = _props.okLabel; | |
var wordings = _props.wordings; | |
var styles = { | |
root: { | |
display: 'flex', | |
flexDirection: 'row', | |
justifyContent: 'flex-end', | |
margin: 0, | |
maxHeight: 48, | |
padding: 0 | |
}, | |
flatButtons: { | |
fontsize: 14, | |
margin: '4px 8px 8px 0px', | |
maxHeight: 36, | |
minWidth: 64, | |
padding: 0 | |
} | |
}; | |
return _react2.default.createElement( | |
'div', | |
{ style: styles.root }, | |
_react2.default.createElement(_FlatButton2.default, { | |
label: wordings ? wordings.cancel : cancelLabel, | |
onTouchTap: this.props.onTouchTapCancel, | |
primary: true, | |
style: styles.flatButtons | |
}), | |
!this.props.autoOk && _react2.default.createElement(_FlatButton2.default, { | |
disabled: this.refs.calendar !== undefined && this.refs.calendar.isSelectedDateDisabled(), | |
label: wordings ? wordings.ok : okLabel, | |
onTouchTap: this.props.onTouchTapOk, | |
primary: true, | |
style: styles.flatButtons | |
}) | |
); | |
} | |
}]); | |
return CalendarActionButton; | |
}(_react.Component); | |
CalendarActionButton.propTypes = { | |
autoOk: _react.PropTypes.bool, | |
cancelLabel: _react.PropTypes.node, | |
okLabel: _react.PropTypes.node, | |
onTouchTapCancel: _react.PropTypes.func, | |
onTouchTapOk: _react.PropTypes.func, | |
wordings: _react.PropTypes.object | |
}; | |
exports.default = CalendarActionButton; | |
/***/ }, | |
/* 112 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _dateUtils = __webpack_require__(17); | |
var _DayButton = __webpack_require__(118); | |
var _DayButton2 = _interopRequireDefault(_DayButton); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var CalendarMonth = function (_Component) { | |
_inherits(CalendarMonth, _Component); | |
function CalendarMonth() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, CalendarMonth); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(CalendarMonth)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleTouchTapDay = function (event, date) { | |
if (_this.props.onTouchTapDay) _this.props.onTouchTapDay(event, date); | |
}, _this.styles = { | |
root: { | |
display: 'flex', | |
flexDirection: 'column', | |
justifyContent: 'flex-start', | |
fontWeight: 400, | |
height: 228, | |
lineHeight: 2, | |
position: 'relative', | |
textAlign: 'center', | |
MozPaddingStart: 0 | |
}, | |
week: { | |
display: 'flex', | |
flexDirection: 'row', | |
justifyContent: 'space-around', | |
height: 34, | |
marginBottom: 2 | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(CalendarMonth, [{ | |
key: 'isSelectedDateDisabled', | |
value: function isSelectedDateDisabled() { | |
return this.selectedDateDisabled; | |
} | |
}, { | |
key: 'shouldDisableDate', | |
value: function shouldDisableDate(day) { | |
if (day === null) return false; | |
var disabled = !(0, _dateUtils.isBetweenDates)(day, this.props.minDate, this.props.maxDate); | |
if (!disabled && this.props.shouldDisableDate) disabled = this.props.shouldDisableDate(day); | |
return disabled; | |
} | |
}, { | |
key: 'getWeekElements', | |
value: function getWeekElements() { | |
var _this2 = this; | |
var weekArray = (0, _dateUtils.getWeekArray)(this.props.displayDate, this.props.firstDayOfWeek); | |
return weekArray.map(function (week, i) { | |
return _react2.default.createElement( | |
'div', | |
{ key: i, style: _this2.styles.week }, | |
_this2.getDayElements(week, i) | |
); | |
}, this); | |
} | |
}, { | |
key: 'getDayElements', | |
value: function getDayElements(week, i) { | |
var _this3 = this; | |
return week.map(function (day, j) { | |
var isSameDate = (0, _dateUtils.isEqualDate)(_this3.props.selectedDate, day); | |
var disabled = _this3.shouldDisableDate(day); | |
var selected = !disabled && isSameDate; | |
if (isSameDate) { | |
_this3.selectedDateDisabled = disabled; | |
} | |
return _react2.default.createElement(_DayButton2.default, { | |
date: day, | |
disabled: disabled, | |
key: 'db' + (i + j), | |
onTouchTap: _this3.handleTouchTapDay, | |
selected: selected | |
}); | |
}, this); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
return _react2.default.createElement( | |
'div', | |
{ style: this.styles.root }, | |
this.getWeekElements() | |
); | |
} | |
}]); | |
return CalendarMonth; | |
}(_react.Component); | |
CalendarMonth.propTypes = { | |
autoOk: _react.PropTypes.bool, | |
displayDate: _react.PropTypes.object.isRequired, | |
firstDayOfWeek: _react.PropTypes.number, | |
maxDate: _react.PropTypes.object, | |
minDate: _react.PropTypes.object, | |
onTouchTapDay: _react.PropTypes.func, | |
selectedDate: _react.PropTypes.object.isRequired, | |
shouldDisableDate: _react.PropTypes.func | |
}; | |
exports.default = CalendarMonth; | |
/***/ }, | |
/* 113 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _IconButton = __webpack_require__(20); | |
var _IconButton2 = _interopRequireDefault(_IconButton); | |
var _chevronLeft = __webpack_require__(202); | |
var _chevronLeft2 = _interopRequireDefault(_chevronLeft); | |
var _chevronRight = __webpack_require__(203); | |
var _chevronRight2 = _interopRequireDefault(_chevronRight); | |
var _SlideIn = __webpack_require__(44); | |
var _SlideIn2 = _interopRequireDefault(_SlideIn); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var styles = { | |
root: { | |
display: 'flex', | |
justifyContent: 'space-between', | |
backgroundColor: 'inherit', | |
height: 48 | |
}, | |
titleDiv: { | |
fontSize: 14, | |
fontWeight: '500', | |
textAlign: 'center', | |
width: '100%' | |
}, | |
titleText: { | |
height: 'inherit', | |
paddingTop: 12 | |
} | |
}; | |
var CalendarToolbar = function (_Component) { | |
_inherits(CalendarToolbar, _Component); | |
function CalendarToolbar() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, CalendarToolbar); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(CalendarToolbar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
transitionDirection: 'up' | |
}, _this.handleTouchTapPrevMonth = function () { | |
if (_this.props.onMonthChange && _this.props.prevMonth) _this.props.onMonthChange(-1); | |
}, _this.handleTouchTapNextMonth = function () { | |
if (_this.props.onMonthChange && _this.props.nextMonth) _this.props.onMonthChange(1); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(CalendarToolbar, [{ | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
if (nextProps.displayDate !== this.props.displayDate) { | |
var direction = nextProps.displayDate > this.props.displayDate ? 'left' : 'right'; | |
this.setState({ | |
transitionDirection: direction | |
}); | |
} | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var DateTimeFormat = _props.DateTimeFormat; | |
var locale = _props.locale; | |
var displayDate = _props.displayDate; | |
var dateTimeFormatted = new DateTimeFormat(locale, { | |
month: 'long', | |
year: 'numeric' | |
}).format(displayDate); | |
var nextButtonIcon = this.context.muiTheme.isRtl ? _react2.default.createElement(_chevronLeft2.default, null) : _react2.default.createElement(_chevronRight2.default, null); | |
var prevButtonIcon = this.context.muiTheme.isRtl ? _react2.default.createElement(_chevronRight2.default, null) : _react2.default.createElement(_chevronLeft2.default, null); | |
return _react2.default.createElement( | |
'div', | |
{ style: styles.root }, | |
_react2.default.createElement( | |
_IconButton2.default, | |
{ | |
disabled: !this.props.prevMonth, | |
onTouchTap: this.handleTouchTapPrevMonth | |
}, | |
prevButtonIcon | |
), | |
_react2.default.createElement( | |
_SlideIn2.default, | |
{ | |
direction: this.state.transitionDirection, | |
style: styles.titleDiv | |
}, | |
_react2.default.createElement( | |
'div', | |
{ key: dateTimeFormatted, style: styles.titleText }, | |
dateTimeFormatted | |
) | |
), | |
_react2.default.createElement( | |
_IconButton2.default, | |
{ | |
disabled: !this.props.nextMonth, | |
onTouchTap: this.handleTouchTapNextMonth | |
}, | |
nextButtonIcon | |
) | |
); | |
} | |
}]); | |
return CalendarToolbar; | |
}(_react.Component); | |
CalendarToolbar.propTypes = { | |
DateTimeFormat: _react.PropTypes.func.isRequired, | |
displayDate: _react.PropTypes.object.isRequired, | |
locale: _react.PropTypes.string.isRequired, | |
nextMonth: _react.PropTypes.bool, | |
onMonthChange: _react.PropTypes.func, | |
prevMonth: _react.PropTypes.bool | |
}; | |
CalendarToolbar.defaultProps = { | |
nextMonth: true, | |
prevMonth: true | |
}; | |
CalendarToolbar.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = CalendarToolbar; | |
/***/ }, | |
/* 114 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactDom = __webpack_require__(4); | |
var _reactDom2 = _interopRequireDefault(_reactDom); | |
var _YearButton = __webpack_require__(119); | |
var _YearButton2 = _interopRequireDefault(_YearButton); | |
var _dateUtils = __webpack_require__(17); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var CalendarYear = function (_Component) { | |
_inherits(CalendarYear, _Component); | |
function CalendarYear() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, CalendarYear); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(CalendarYear)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleTouchTapYear = function (event, year) { | |
if (_this.props.onTouchTapYear) _this.props.onTouchTapYear(event, year); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(CalendarYear, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
this.scrollToSelectedYear(); | |
} | |
}, { | |
key: 'componentDidUpdate', | |
value: function componentDidUpdate() { | |
this.scrollToSelectedYear(); | |
} | |
}, { | |
key: 'getYears', | |
value: function getYears() { | |
var minYear = this.props.minDate.getFullYear(); | |
var maxYear = this.props.maxDate.getFullYear(); | |
var years = []; | |
var dateCheck = (0, _dateUtils.cloneDate)(this.props.selectedDate); | |
for (var year = minYear; year <= maxYear; year++) { | |
dateCheck.setFullYear(year); | |
var selected = this.props.selectedDate.getFullYear() === year; | |
var selectedProps = {}; | |
if (selected) { | |
selectedProps = { ref: 'selectedYearButton' }; | |
} | |
var yearButton = _react2.default.createElement(_YearButton2.default, _extends({ | |
key: 'yb' + year, | |
onTouchTap: this.handleTouchTapYear, | |
selected: selected, | |
year: year | |
}, selectedProps)); | |
years.push(yearButton); | |
} | |
return years; | |
} | |
}, { | |
key: 'scrollToSelectedYear', | |
value: function scrollToSelectedYear() { | |
if (this.refs.selectedYearButton === undefined) return; | |
var container = _reactDom2.default.findDOMNode(this); | |
var yearButtonNode = _reactDom2.default.findDOMNode(this.refs.selectedYearButton); | |
var containerHeight = container.clientHeight; | |
var yearButtonNodeHeight = yearButtonNode.clientHeight || 32; | |
var scrollYOffset = yearButtonNode.offsetTop + yearButtonNodeHeight / 2 - containerHeight / 2; | |
container.scrollTop = scrollYOffset; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var years = this.getYears(); | |
var backgroundColor = this.context.muiTheme.datePicker.calendarYearBackgroundColor; | |
var styles = { | |
backgroundColor: backgroundColor, | |
height: 'inherit', | |
lineHeight: '35px', | |
overflowX: 'hidden', | |
overflowY: 'scroll', | |
position: 'relative', | |
display: 'flex', | |
flexDirection: 'column', | |
justifyContent: 'center' | |
}; | |
return _react2.default.createElement( | |
'div', | |
{ style: styles }, | |
_react2.default.createElement( | |
'div', | |
null, | |
years | |
) | |
); | |
} | |
}]); | |
return CalendarYear; | |
}(_react.Component); | |
CalendarYear.propTypes = { | |
displayDate: _react.PropTypes.object.isRequired, | |
maxDate: _react.PropTypes.object, | |
minDate: _react.PropTypes.object, | |
onTouchTapYear: _react.PropTypes.func, | |
selectedDate: _react.PropTypes.object.isRequired, | |
wordings: _react.PropTypes.object | |
}; | |
CalendarYear.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = CalendarYear; | |
/***/ }, | |
/* 115 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _SlideIn = __webpack_require__(44); | |
var _SlideIn2 = _interopRequireDefault(_SlideIn); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context, state) { | |
var datePicker = context.muiTheme.datePicker; | |
var selectedYear = state.selectedYear; | |
var isLandscape = props.mode === 'landscape'; | |
var styles = { | |
root: { | |
width: isLandscape ? 125 : 270, | |
height: isLandscape ? 290 : 'auto', | |
float: isLandscape ? 'left' : 'none', | |
fontWeight: 700, | |
display: 'inline-block', | |
backgroundColor: datePicker.selectColor, | |
borderTopLeftRadius: 2, | |
borderTopRightRadius: isLandscape ? 0 : 2, | |
borderBottomLeftRadius: isLandscape ? 2 : 0, | |
color: datePicker.textColor, | |
padding: 20 | |
}, | |
monthDay: { | |
display: 'block', | |
fontSize: 36, | |
lineHeight: '36px', | |
height: props.mode === 'landscape' ? '100%' : 38, | |
opacity: selectedYear ? 0.7 : 1, | |
transition: _transitions2.default.easeOut(), | |
width: '100%', | |
fontWeight: '500' | |
}, | |
monthDayTitle: { | |
cursor: !selectedYear ? 'default' : 'pointer', | |
width: '100%', | |
display: 'block' | |
}, | |
year: { | |
margin: 0, | |
fontSize: 16, | |
fontWeight: '500', | |
lineHeight: '16px', | |
height: 16, | |
opacity: selectedYear ? 1 : 0.7, | |
transition: _transitions2.default.easeOut(), | |
marginBottom: 10 | |
}, | |
yearTitle: { | |
cursor: !selectedYear && !props.disableYearSelection ? 'pointer' : 'default' | |
} | |
}; | |
return styles; | |
} | |
var DateDisplay = function (_Component) { | |
_inherits(DateDisplay, _Component); | |
function DateDisplay() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, DateDisplay); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DateDisplay)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
selectedYear: !_this.props.monthDaySelected, | |
transitionDirection: 'up' | |
}, _this.handleTouchTapMonthDay = function () { | |
if (_this.props.onTouchTapMonthDay && _this.state.selectedYear) { | |
_this.props.onTouchTapMonthDay(); | |
} | |
_this.setState({ selectedYear: false }); | |
}, _this.handleTouchTapYear = function () { | |
if (_this.props.onTouchTapYear && !_this.props.disableYearSelection && !_this.state.selectedYear) { | |
_this.props.onTouchTapYear(); | |
} | |
if (!_this.props.disableYearSelection) { | |
_this.setState({ selectedYear: true }); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(DateDisplay, [{ | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
if (nextProps.selectedDate !== this.props.selectedDate) { | |
var direction = nextProps.selectedDate > this.props.selectedDate ? 'up' : 'down'; | |
this.setState({ | |
transitionDirection: direction | |
}); | |
} | |
if (nextProps.monthDaySelected !== undefined) { | |
this.setState({ | |
selectedYear: !nextProps.monthDaySelected | |
}); | |
} | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var DateTimeFormat = _props.DateTimeFormat; | |
var locale = _props.locale; | |
var selectedDate = _props.selectedDate; | |
var style = _props.style; | |
var other = _objectWithoutProperties(_props, ['DateTimeFormat', 'locale', 'selectedDate', 'style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context, this.state); | |
var year = selectedDate.getFullYear(); | |
var dateTimeFormatted = new DateTimeFormat(locale, { | |
month: 'short', | |
weekday: 'short', | |
day: '2-digit' | |
}).format(selectedDate); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { style: prepareStyles(styles.root, style) }), | |
_react2.default.createElement( | |
_SlideIn2.default, | |
{ | |
style: styles.year, | |
direction: this.state.transitionDirection | |
}, | |
_react2.default.createElement( | |
'div', | |
{ key: year, style: styles.yearTitle, onTouchTap: this.handleTouchTapYear }, | |
year | |
) | |
), | |
_react2.default.createElement( | |
_SlideIn2.default, | |
{ | |
style: styles.monthDay, | |
direction: this.state.transitionDirection | |
}, | |
_react2.default.createElement( | |
'div', | |
{ | |
key: dateTimeFormatted, | |
onTouchTap: this.handleTouchTapMonthDay, | |
style: styles.monthDayTitle | |
}, | |
dateTimeFormatted | |
) | |
) | |
); | |
} | |
}]); | |
return DateDisplay; | |
}(_react.Component); | |
DateDisplay.propTypes = { | |
DateTimeFormat: _react.PropTypes.func.isRequired, | |
disableYearSelection: _react.PropTypes.bool, | |
locale: _react.PropTypes.string.isRequired, | |
mode: _react.PropTypes.oneOf(['portrait', 'landscape']), | |
monthDaySelected: _react.PropTypes.bool, | |
onTouchTapMonthDay: _react.PropTypes.func, | |
onTouchTapYear: _react.PropTypes.func, | |
selectedDate: _react.PropTypes.object.isRequired, | |
style: _react.PropTypes.object, | |
weekCount: _react.PropTypes.number | |
}; | |
DateDisplay.defaultProps = { | |
disableYearSelection: false, | |
monthDaySelected: true, | |
weekCount: 4 | |
}; | |
DateDisplay.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = DateDisplay; | |
/***/ }, | |
/* 116 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _dateUtils = __webpack_require__(17); | |
var _DatePickerDialog = __webpack_require__(117); | |
var _DatePickerDialog2 = _interopRequireDefault(_DatePickerDialog); | |
var _TextField = __webpack_require__(21); | |
var _TextField2 = _interopRequireDefault(_TextField); | |
var _deprecatedPropType = __webpack_require__(15); | |
var _deprecatedPropType2 = _interopRequireDefault(_deprecatedPropType); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var DatePicker = function (_Component) { | |
_inherits(DatePicker, _Component); | |
function DatePicker() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, DatePicker); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DatePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
date: undefined | |
}, _this.handleAccept = function (date) { | |
if (!_this.isControlled()) { | |
_this.setState({ | |
date: date | |
}); | |
} | |
if (_this.props.onChange) _this.props.onChange(null, date); | |
}, _this.handleFocus = function (event) { | |
event.target.blur(); | |
if (_this.props.onFocus) _this.props.onFocus(event); | |
}, _this.handleTouchTap = function (event) { | |
if (_this.props.onTouchTap) _this.props.onTouchTap(event); | |
if (!_this.props.disabled) setTimeout(function () { | |
_this.openDialog(); | |
}, 0); | |
}, _this.formatDate = function (date) { | |
if (_this.props.locale) { | |
var DateTimeFormat = _this.props.DateTimeFormat || _dateUtils.dateTimeFormat; | |
return new DateTimeFormat(_this.props.locale, { | |
day: 'numeric', | |
month: 'numeric', | |
year: 'numeric' | |
}).format(date); | |
} else { | |
return (0, _dateUtils.formatIso)(date); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(DatePicker, [{ | |
key: 'componentWillMount', | |
value: function componentWillMount() { | |
this.setState({ | |
date: this.isControlled() ? this.getControlledDate() : this.props.defaultDate | |
}); | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
if (this.isControlled()) { | |
var newDate = this.getControlledDate(nextProps); | |
if (!(0, _dateUtils.isEqualDate)(this.state.date, newDate)) { | |
this.setState({ | |
date: newDate | |
}); | |
} | |
} | |
} | |
}, { | |
key: 'getDate', | |
value: function getDate() { | |
return this.state.date; | |
} | |
/** | |
* Open the date-picker dialog programmatically from a parent. | |
*/ | |
}, { | |
key: 'openDialog', | |
value: function openDialog() { | |
/** | |
* if the date is not selected then set it to new date | |
* (get the current system date while doing so) | |
* else set it to the currently selected date | |
*/ | |
if (this.state.date !== undefined) { | |
this.setState({ | |
dialogDate: this.getDate() | |
}, this.refs.dialogWindow.show); | |
} else { | |
this.setState({ | |
dialogDate: new Date() | |
}, this.refs.dialogWindow.show); | |
} | |
} | |
/** | |
* Alias for `openDialog()` for an api consistent with TextField. | |
*/ | |
}, { | |
key: 'focus', | |
value: function focus() { | |
this.openDialog(); | |
} | |
}, { | |
key: 'isControlled', | |
value: function isControlled() { | |
return this.props.hasOwnProperty('value'); | |
} | |
}, { | |
key: 'getControlledDate', | |
value: function getControlledDate() { | |
var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0]; | |
if (props.value instanceof Date) { | |
return props.value; | |
} | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var DateTimeFormat = _props.DateTimeFormat; | |
var autoOk = _props.autoOk; | |
var cancelLabel = _props.cancelLabel; | |
var className = _props.className; | |
var container = _props.container; | |
var defaultDate = _props.defaultDate; | |
var // eslint-disable-line no-unused-vars | |
disableYearSelection = _props.disableYearSelection; | |
var firstDayOfWeek = _props.firstDayOfWeek; | |
var locale = _props.locale; | |
var maxDate = _props.maxDate; | |
var minDate = _props.minDate; | |
var mode = _props.mode; | |
var okLabel = _props.okLabel; | |
var onDismiss = _props.onDismiss; | |
var onFocus = _props.onFocus; | |
var // eslint-disable-line no-unused-vars | |
onShow = _props.onShow; | |
var onTouchTap = _props.onTouchTap; | |
var // eslint-disable-line no-unused-vars | |
shouldDisableDate = _props.shouldDisableDate; | |
var style = _props.style; | |
var textFieldStyle = _props.textFieldStyle; | |
var wordings = _props.wordings; | |
var other = _objectWithoutProperties(_props, ['DateTimeFormat', 'autoOk', 'cancelLabel', 'className', 'container', 'defaultDate', 'disableYearSelection', 'firstDayOfWeek', 'locale', 'maxDate', 'minDate', 'mode', 'okLabel', 'onDismiss', 'onFocus', 'onShow', 'onTouchTap', 'shouldDisableDate', 'style', 'textFieldStyle', 'wordings']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var formatDate = this.props.formatDate || this.formatDate; | |
return _react2.default.createElement( | |
'div', | |
{ className: className, style: prepareStyles((0, _simpleAssign2.default)({}, style)) }, | |
_react2.default.createElement(_TextField2.default, _extends({}, other, { | |
onFocus: this.handleFocus, | |
onTouchTap: this.handleTouchTap, | |
ref: 'input', | |
style: textFieldStyle, | |
value: this.state.date ? formatDate(this.state.date) : '' | |
})), | |
_react2.default.createElement(_DatePickerDialog2.default, { | |
DateTimeFormat: DateTimeFormat, | |
autoOk: autoOk, | |
cancelLabel: cancelLabel, | |
container: container, | |
disableYearSelection: disableYearSelection, | |
firstDayOfWeek: firstDayOfWeek, | |
initialDate: this.state.dialogDate, | |
locale: locale, | |
maxDate: maxDate, | |
minDate: minDate, | |
mode: mode, | |
okLabel: okLabel, | |
onAccept: this.handleAccept, | |
onShow: onShow, | |
onDismiss: onDismiss, | |
ref: 'dialogWindow', | |
shouldDisableDate: shouldDisableDate, | |
wordings: wordings | |
}) | |
); | |
} | |
}]); | |
return DatePicker; | |
}(_react.Component); | |
DatePicker.propTypes = { | |
/** | |
* Constructor for date formatting for the specified `locale`. | |
* The constructor must follow this specification: ECMAScript Internationalization API 1.0 (ECMA-402). | |
* `Intl.DateTimeFormat` is supported by most modern browsers, see http://caniuse.com/#search=intl, | |
* otherwise https://github.com/andyearnshaw/Intl.js is a good polyfill. | |
* | |
* By default, a built-in `DateTimeFormat` is used which supports the 'en-US' `locale`. | |
*/ | |
DateTimeFormat: _react.PropTypes.func, | |
/** | |
* If true, automatically accept and close the picker on select a date. | |
*/ | |
autoOk: _react.PropTypes.bool, | |
/** | |
* Override the default text of the 'Cancel' button. | |
*/ | |
cancelLabel: _react.PropTypes.node, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* Used to control how the Date Picker will be displayed when the input field is focused. | |
* `dialog` (default) displays the DatePicker as a dialog with a modal. | |
* `inline` displays the DatePicker below the input field (similar to auto complete). | |
*/ | |
container: _react.PropTypes.oneOf(['dialog', 'inline']), | |
/** | |
* This is the initial date value of the component. | |
* If either `value` or `valueLink` is provided they will override this | |
* prop with `value` taking precedence. | |
*/ | |
defaultDate: _react.PropTypes.object, | |
/** | |
* Disables the year selection in the date picker. | |
*/ | |
disableYearSelection: _react.PropTypes.bool, | |
/** | |
* Disables the DatePicker. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* Used to change the first day of week. It varies from | |
* Saturday to Monday between different locales. | |
* The allowed range is 0 (Sunday) to 6 (Saturday). | |
* The default is `1`, Monday, as per ISO 8601. | |
*/ | |
firstDayOfWeek: _react.PropTypes.number, | |
/** | |
* This function is called to format the date displayed in the input field, and should return a string. | |
* By default if no `locale` and `DateTimeFormat` is provided date objects are formatted to ISO 8601 YYYY-MM-DD. | |
* | |
* @param {object} date Date object to be formatted. | |
* @returns {any} The formatted date. | |
*/ | |
formatDate: _react.PropTypes.func, | |
/** | |
* Locale used for formatting the `DatePicker` date strings. Other than for 'en-US', you | |
* must provide a `DateTimeFormat` that supports the chosen `locale`. | |
*/ | |
locale: _react.PropTypes.string, | |
/** | |
* The ending of a range of valid dates. The range includes the endDate. | |
* The default value is current date + 100 years. | |
*/ | |
maxDate: _react.PropTypes.object, | |
/** | |
* The beginning of a range of valid dates. The range includes the startDate. | |
* The default value is current date - 100 years. | |
*/ | |
minDate: _react.PropTypes.object, | |
/** | |
* Tells the component to display the picker in portrait or landscape mode. | |
*/ | |
mode: _react.PropTypes.oneOf(['portrait', 'landscape']), | |
/** | |
* Override the default text of the 'OK' button. | |
*/ | |
okLabel: _react.PropTypes.node, | |
/** | |
* Callback function that is fired when the date value changes. | |
* | |
* @param {null} null Since there is no particular event associated with the change, | |
* the first argument will always be null. | |
* @param {object} date The new date. | |
*/ | |
onChange: _react.PropTypes.func, | |
/** | |
* Callback function that is fired when the Date Picker's dialog is dismissed. | |
*/ | |
onDismiss: _react.PropTypes.func, | |
/** | |
* Callback function that is fired when the Date Picker's `TextField` gains focus. | |
* | |
* @param {object} event `focus` event targeting the `TextField`. | |
*/ | |
onFocus: _react.PropTypes.func, | |
/** | |
* Callback function that is fired when the Date Picker's dialog is shown. | |
*/ | |
onShow: _react.PropTypes.func, | |
/** | |
* Callback function that is fired when a touch tap event occurs on the Date Picker's `TextField`. | |
* | |
* @param {object} event TouchTap event targeting the `TextField`. | |
*/ | |
onTouchTap: _react.PropTypes.func, | |
/** | |
* Callback function used to determine if a day's entry should be disabled on the calendar. | |
* | |
* @param {object} day Date object of a day. | |
* @returns {boolean} Indicates whether the day should be disabled. | |
*/ | |
shouldDisableDate: _react.PropTypes.func, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* Override the inline-styles of DatePicker's TextField element. | |
*/ | |
textFieldStyle: _react.PropTypes.object, | |
/** | |
* Sets the date for the Date Picker programmatically. | |
*/ | |
value: _react.PropTypes.any, | |
/** | |
* Wordings used inside the button of the dialog. | |
*/ | |
wordings: (0, _deprecatedPropType2.default)(_react.PropTypes.object, 'Instead, use `cancelLabel` and `okLabel`.') | |
}; | |
DatePicker.defaultProps = { | |
autoOk: false, | |
container: 'dialog', | |
disabled: false, | |
disableYearSelection: false, | |
firstDayOfWeek: 1, | |
style: {} | |
}; | |
DatePicker.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = DatePicker; | |
/***/ }, | |
/* 117 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactEventListener = __webpack_require__(13); | |
var _reactEventListener2 = _interopRequireDefault(_reactEventListener); | |
var _keycode = __webpack_require__(10); | |
var _keycode2 = _interopRequireDefault(_keycode); | |
var _Calendar = __webpack_require__(110); | |
var _Calendar2 = _interopRequireDefault(_Calendar); | |
var _Dialog = __webpack_require__(33); | |
var _Dialog2 = _interopRequireDefault(_Dialog); | |
var _Popover = __webpack_require__(18); | |
var _Popover2 = _interopRequireDefault(_Popover); | |
var _PopoverAnimationVertical = __webpack_require__(39); | |
var _PopoverAnimationVertical2 = _interopRequireDefault(_PopoverAnimationVertical); | |
var _dateUtils = __webpack_require__(17); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var DatePickerDialog = function (_Component) { | |
_inherits(DatePickerDialog, _Component); | |
function DatePickerDialog() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, DatePickerDialog); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DatePickerDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
open: false | |
}, _this.show = function () { | |
if (_this.props.onShow && !_this.state.open) _this.props.onShow(); | |
_this.setState({ | |
open: true | |
}); | |
}, _this.dismiss = function () { | |
if (_this.props.onDismiss && _this.state.open) _this.props.onDismiss(); | |
_this.setState({ | |
open: false | |
}); | |
}, _this.handleTouchTapDay = function () { | |
if (_this.props.autoOk) { | |
setTimeout(_this.handleTouchTapOk, 300); | |
} | |
}, _this.handleTouchTapCancel = function () { | |
_this.dismiss(); | |
}, _this.handleRequestClose = function () { | |
_this.dismiss(); | |
}, _this.handleTouchTapOk = function () { | |
if (_this.props.onAccept && !_this.refs.calendar.isSelectedDateDisabled()) { | |
_this.props.onAccept(_this.refs.calendar.getSelectedDate()); | |
} | |
_this.dismiss(); | |
}, _this.handleWindowKeyUp = function (event) { | |
switch ((0, _keycode2.default)(event)) { | |
case 'enter': | |
_this.handleTouchTapOk(); | |
break; | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(DatePickerDialog, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var DateTimeFormat = _props.DateTimeFormat; | |
var cancelLabel = _props.cancelLabel; | |
var container = _props.container; | |
var disableYearSelection = _props.disableYearSelection; | |
var initialDate = _props.initialDate; | |
var firstDayOfWeek = _props.firstDayOfWeek; | |
var locale = _props.locale; | |
var maxDate = _props.maxDate; | |
var minDate = _props.minDate; | |
var mode = _props.mode; | |
var okLabel = _props.okLabel; | |
var onAccept = _props.onAccept; | |
var // eslint-disable-line no-unused-vars | |
shouldDisableDate = _props.shouldDisableDate; | |
var style = _props.style; | |
var // eslint-disable-line no-unused-vars | |
wordings = _props.wordings; | |
var other = _objectWithoutProperties(_props, ['DateTimeFormat', 'cancelLabel', 'container', 'disableYearSelection', 'initialDate', 'firstDayOfWeek', 'locale', 'maxDate', 'minDate', 'mode', 'okLabel', 'onAccept', 'shouldDisableDate', 'style', 'wordings']); | |
var open = this.state.open; | |
var styles = { | |
dialogContent: { | |
width: mode === 'landscape' ? 479 : 310 | |
}, | |
dialogBodyContent: { | |
padding: 0, | |
minHeight: mode === 'landscape' ? 330 : 434, | |
minWidth: mode === 'landscape' ? 479 : 310 | |
} | |
}; | |
var Container = container === 'inline' ? _Popover2.default : _Dialog2.default; | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { ref: 'root' }), | |
_react2.default.createElement( | |
Container, | |
_extends({}, other, { | |
anchorEl: this.refs.root // For Popover | |
, animation: _PopoverAnimationVertical2.default // For Popover | |
, bodyStyle: styles.dialogBodyContent, | |
contentStyle: styles.dialogContent, | |
ref: 'dialog', | |
repositionOnUpdate: true, | |
open: open, | |
onRequestClose: this.handleRequestClose, | |
style: styles.dialogBodyContent | |
}), | |
_react2.default.createElement(_reactEventListener2.default, { | |
target: 'window', | |
onKeyUp: this.handleWindowKeyUp | |
}), | |
_react2.default.createElement(_Calendar2.default, { | |
autoOk: this.props.autoOk, | |
DateTimeFormat: DateTimeFormat, | |
cancelLabel: cancelLabel, | |
disableYearSelection: disableYearSelection, | |
firstDayOfWeek: firstDayOfWeek, | |
initialDate: initialDate, | |
locale: locale, | |
onTouchTapDay: this.handleTouchTapDay, | |
maxDate: maxDate, | |
minDate: minDate, | |
mode: mode, | |
open: open, | |
ref: 'calendar', | |
onTouchTapCancel: this.handleTouchTapCancel, | |
onTouchTapOk: this.handleTouchTapOk, | |
okLabel: okLabel, | |
shouldDisableDate: shouldDisableDate, | |
wordings: wordings | |
}) | |
) | |
); | |
} | |
}]); | |
return DatePickerDialog; | |
}(_react.Component); | |
DatePickerDialog.propTypes = { | |
DateTimeFormat: _react.PropTypes.func, | |
autoOk: _react.PropTypes.bool, | |
cancelLabel: _react.PropTypes.node, | |
container: _react.PropTypes.oneOf(['dialog', 'inline']), | |
disableYearSelection: _react.PropTypes.bool, | |
firstDayOfWeek: _react.PropTypes.number, | |
initialDate: _react.PropTypes.object, | |
locale: _react.PropTypes.string, | |
maxDate: _react.PropTypes.object, | |
minDate: _react.PropTypes.object, | |
mode: _react.PropTypes.oneOf(['portrait', 'landscape']), | |
okLabel: _react.PropTypes.node, | |
onAccept: _react.PropTypes.func, | |
onDismiss: _react.PropTypes.func, | |
onShow: _react.PropTypes.func, | |
open: _react.PropTypes.bool, | |
shouldDisableDate: _react.PropTypes.func, | |
style: _react.PropTypes.object, | |
wordings: _react.PropTypes.object | |
}; | |
DatePickerDialog.defaultProps = { | |
DateTimeFormat: _dateUtils.dateTimeFormat, | |
container: 'dialog', | |
locale: 'en-US', | |
okLabel: 'OK', | |
cancelLabel: 'Cancel' | |
}; | |
DatePickerDialog.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = DatePickerDialog; | |
/***/ }, | |
/* 118 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _dateUtils = __webpack_require__(17); | |
var _EnhancedButton = __webpack_require__(11); | |
var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context, state) { | |
var date = props.date; | |
var disabled = props.disabled; | |
var selected = props.selected; | |
var hover = state.hover; | |
var _context$muiTheme = context.muiTheme; | |
var baseTheme = _context$muiTheme.baseTheme; | |
var datePicker = _context$muiTheme.datePicker; | |
var labelColor = baseTheme.palette.textColor; | |
var buttonStateOpacity = 0; | |
var buttonStateTransform = 'scale(0)'; | |
if (hover || selected) { | |
labelColor = datePicker.selectTextColor; | |
buttonStateOpacity = selected ? 1 : 0.6; | |
buttonStateTransform = 'scale(1)'; | |
} else if ((0, _dateUtils.isEqualDate)(date, new Date())) { | |
labelColor = datePicker.color; | |
} | |
return { | |
root: { | |
boxSizing: 'border-box', | |
fontWeight: '400', | |
opacity: disabled && '0.6', | |
padding: '4px 0px', | |
position: 'relative', | |
WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated) | |
width: 42 | |
}, | |
label: { | |
color: labelColor, | |
fontWeight: '400', | |
position: 'relative' | |
}, | |
buttonState: { | |
backgroundColor: datePicker.selectColor, | |
borderRadius: '50%', | |
height: 34, | |
left: 4, | |
opacity: buttonStateOpacity, | |
position: 'absolute', | |
top: 0, | |
transform: buttonStateTransform, | |
transition: _transitions2.default.easeOut(), | |
width: 34 | |
} | |
}; | |
} | |
var DayButton = function (_Component) { | |
_inherits(DayButton, _Component); | |
function DayButton() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, DayButton); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DayButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
hover: false | |
}, _this.handleMouseEnter = function () { | |
if (!_this.props.disabled) _this.setState({ hover: true }); | |
}, _this.handleMouseLeave = function () { | |
if (!_this.props.disabled) _this.setState({ hover: false }); | |
}, _this.handleTouchTap = function (event) { | |
if (!_this.props.disabled && _this.props.onTouchTap) _this.props.onTouchTap(event, _this.props.date); | |
}, _this.handleKeyboardFocus = function (event, keyboardFocused) { | |
if (!_this.props.disabled && _this.props.onKeyboardFocus) { | |
_this.props.onKeyboardFocus(event, keyboardFocused, _this.props.date); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(DayButton, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var date = _props.date; | |
var // eslint-disable-line no-unused-vars | |
onTouchTap = _props.onTouchTap; | |
var // eslint-disable-line no-unused-vars | |
selected = _props.selected; | |
var other = _objectWithoutProperties(_props, ['date', 'onTouchTap', 'selected']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context, this.state); | |
return this.props.date ? _react2.default.createElement( | |
_EnhancedButton2.default, | |
_extends({}, other, { | |
disabled: this.props.disabled, | |
disableFocusRipple: true, | |
disableTouchRipple: true, | |
hoverStyle: styles.hover, | |
onKeyboardFocus: this.handleKeyboardFocus, | |
onMouseEnter: this.handleMouseEnter, | |
onMouseLeave: this.handleMouseLeave, | |
onTouchTap: this.handleTouchTap, | |
style: styles.root | |
}), | |
_react2.default.createElement('div', { style: prepareStyles(styles.buttonState) }), | |
_react2.default.createElement( | |
'span', | |
{ style: prepareStyles(styles.label) }, | |
this.props.date.getDate() | |
) | |
) : _react2.default.createElement('span', { style: prepareStyles(styles.root) }); | |
} | |
}]); | |
return DayButton; | |
}(_react.Component); | |
DayButton.propTypes = { | |
date: _react.PropTypes.object, | |
disabled: _react.PropTypes.bool, | |
onKeyboardFocus: _react.PropTypes.func, | |
onTouchTap: _react.PropTypes.func, | |
selected: _react.PropTypes.bool | |
}; | |
DayButton.defaultProps = { | |
selected: false, | |
disabled: false | |
}; | |
DayButton.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = DayButton; | |
/***/ }, | |
/* 119 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _EnhancedButton = __webpack_require__(11); | |
var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context, state) { | |
var selected = props.selected; | |
var year = props.year; | |
var _context$muiTheme = context.muiTheme; | |
var baseTheme = _context$muiTheme.baseTheme; | |
var datePicker = _context$muiTheme.datePicker; | |
var hover = state.hover; | |
return { | |
root: { | |
boxSizing: 'border-box', | |
color: year === new Date().getFullYear() && datePicker.color, | |
display: 'block', | |
fontSize: 14, | |
margin: '0 auto', | |
position: 'relative', | |
textAlign: 'center', | |
lineHeight: 'inherit', | |
WebkitTapHighlightColor: 'rgba(0,0,0,0)' }, | |
// Remove mobile color flashing (deprecated) | |
label: { | |
alignSelf: 'center', | |
color: hover || selected ? datePicker.color : baseTheme.palette.textColor, | |
fontSize: selected ? 26 : 17, | |
fontWeight: hover ? 450 : selected ? 500 : 400, | |
position: 'relative', | |
top: -1 | |
} | |
}; | |
} | |
var YearButton = function (_Component) { | |
_inherits(YearButton, _Component); | |
function YearButton() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, YearButton); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(YearButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
hover: false | |
}, _this.handleMouseEnter = function () { | |
_this.setState({ hover: true }); | |
}, _this.handleMouseLeave = function () { | |
_this.setState({ hover: false }); | |
}, _this.handleTouchTap = function (event) { | |
if (_this.props.onTouchTap) _this.props.onTouchTap(event, _this.props.year); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(YearButton, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var className = _props.className; | |
var // eslint-disable-line no-unused-vars | |
year = _props.year; | |
var onTouchTap = _props.onTouchTap; | |
var // eslint-disable-line no-unused-vars | |
selected = _props.selected; | |
var other = _objectWithoutProperties(_props, ['className', 'year', 'onTouchTap', 'selected']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context, this.state); | |
return _react2.default.createElement( | |
_EnhancedButton2.default, | |
_extends({}, other, { | |
disableFocusRipple: true, | |
disableTouchRipple: true, | |
onMouseEnter: this.handleMouseEnter, | |
onMouseLeave: this.handleMouseLeave, | |
onTouchTap: this.handleTouchTap, | |
style: styles.root | |
}), | |
_react2.default.createElement( | |
'span', | |
{ style: prepareStyles(styles.label) }, | |
year | |
) | |
); | |
} | |
}]); | |
return YearButton; | |
}(_react.Component); | |
YearButton.propTypes = { | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
onTouchTap: _react.PropTypes.func, | |
selected: _react.PropTypes.bool, | |
year: _react.PropTypes.number | |
}; | |
YearButton.defaultProps = { | |
selected: false | |
}; | |
YearButton.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = YearButton; | |
/***/ }, | |
/* 120 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _DatePicker = __webpack_require__(116); | |
var _DatePicker2 = _interopRequireDefault(_DatePicker); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _DatePicker2.default; | |
/***/ }, | |
/* 121 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactDom = __webpack_require__(4); | |
var _reactDom2 = _interopRequireDefault(_reactDom); | |
var _reactEventListener = __webpack_require__(13); | |
var _reactEventListener2 = _interopRequireDefault(_reactEventListener); | |
var _keycode = __webpack_require__(10); | |
var _keycode2 = _interopRequireDefault(_keycode); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _Overlay = __webpack_require__(80); | |
var _Overlay2 = _interopRequireDefault(_Overlay); | |
var _RenderToLayer = __webpack_require__(81); | |
var _RenderToLayer2 = _interopRequireDefault(_RenderToLayer); | |
var _Paper = __webpack_require__(8); | |
var _Paper2 = _interopRequireDefault(_Paper); | |
var _reactAddonsTransitionGroup = __webpack_require__(26); | |
var _reactAddonsTransitionGroup2 = _interopRequireDefault(_reactAddonsTransitionGroup); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var TransitionItem = function (_Component) { | |
_inherits(TransitionItem, _Component); | |
function TransitionItem() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, TransitionItem); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TransitionItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
style: {} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(TransitionItem, [{ | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
clearTimeout(this.enterTimeout); | |
clearTimeout(this.leaveTimeout); | |
} | |
}, { | |
key: 'componentWillEnter', | |
value: function componentWillEnter(callback) { | |
this.componentWillAppear(callback); | |
} | |
}, { | |
key: 'componentWillAppear', | |
value: function componentWillAppear(callback) { | |
var spacing = this.context.muiTheme.baseTheme.spacing; | |
this.setState({ | |
style: { | |
opacity: 1, | |
transform: 'translate3d(0, ' + spacing.desktopKeylineIncrement + 'px, 0)' | |
} | |
}); | |
this.enterTimeout = setTimeout(callback, 450); // matches transition duration | |
} | |
}, { | |
key: 'componentWillLeave', | |
value: function componentWillLeave(callback) { | |
this.setState({ | |
style: { | |
opacity: 0, | |
transform: 'translate3d(0, 0, 0)' | |
} | |
}); | |
this.leaveTimeout = setTimeout(callback, 450); // matches transition duration | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var style = _props.style; | |
var children = _props.children; | |
var other = _objectWithoutProperties(_props, ['style', 'children']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { style: prepareStyles((0, _simpleAssign2.default)({}, this.state.style, style)) }), | |
children | |
); | |
} | |
}]); | |
return TransitionItem; | |
}(_react.Component); | |
TransitionItem.propTypes = { | |
children: _react.PropTypes.node, | |
style: _react.PropTypes.object | |
}; | |
TransitionItem.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
function getStyles(props, context) { | |
var autoScrollBodyContent = props.autoScrollBodyContent; | |
var open = props.open; | |
var _context$muiTheme = context.muiTheme; | |
var _context$muiTheme$bas = _context$muiTheme.baseTheme; | |
var spacing = _context$muiTheme$bas.spacing; | |
var palette = _context$muiTheme$bas.palette; | |
var dialog = _context$muiTheme.dialog; | |
var zIndex = _context$muiTheme.zIndex; | |
var gutter = spacing.desktopGutter; | |
var borderScroll = '1px solid ' + palette.borderColor; | |
return { | |
root: { | |
position: 'fixed', | |
boxSizing: 'border-box', | |
WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated) | |
zIndex: zIndex.dialog, | |
top: 0, | |
left: open ? 0 : -10000, | |
width: '100%', | |
height: '100%', | |
transition: open ? _transitions2.default.easeOut('0ms', 'left', '0ms') : _transitions2.default.easeOut('0ms', 'left', '450ms') | |
}, | |
content: { | |
boxSizing: 'border-box', | |
WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated) | |
transition: _transitions2.default.easeOut(), | |
position: 'relative', | |
width: '75%', | |
maxWidth: spacing.desktopKeylineIncrement * 12, | |
margin: '0 auto', | |
zIndex: zIndex.dialog | |
}, | |
actionsContainer: { | |
boxSizing: 'border-box', | |
WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated) | |
padding: 8, | |
width: '100%', | |
textAlign: 'right', | |
marginTop: autoScrollBodyContent ? -1 : 0, | |
borderTop: autoScrollBodyContent ? borderScroll : 'none' | |
}, | |
overlay: { | |
zIndex: zIndex.dialogOverlay | |
}, | |
title: { | |
margin: 0, | |
padding: gutter + 'px ' + gutter + 'px 20px ' + gutter + 'px', | |
color: palette.textColor, | |
fontSize: dialog.titleFontSize, | |
lineHeight: '32px', | |
fontWeight: 400, | |
marginBottom: autoScrollBodyContent ? -1 : 0, | |
borderBottom: autoScrollBodyContent ? borderScroll : 'none' | |
}, | |
body: { | |
fontSize: dialog.bodyFontSize, | |
color: dialog.bodyColor, | |
padding: (props.title ? 0 : gutter) + 'px ' + gutter + 'px ' + gutter + 'px', | |
boxSizing: 'border-box', | |
overflowY: autoScrollBodyContent ? 'auto' : 'hidden' | |
} | |
}; | |
} | |
var DialogInline = function (_Component2) { | |
_inherits(DialogInline, _Component2); | |
function DialogInline() { | |
var _Object$getPrototypeO2; | |
var _temp2, _this2, _ret2; | |
_classCallCheck(this, DialogInline); | |
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | |
args[_key2] = arguments[_key2]; | |
} | |
return _ret2 = (_temp2 = (_this2 = _possibleConstructorReturn(this, (_Object$getPrototypeO2 = Object.getPrototypeOf(DialogInline)).call.apply(_Object$getPrototypeO2, [this].concat(args))), _this2), _this2.handleTouchTapOverlay = function () { | |
_this2.requestClose(false); | |
}, _this2.handleKeyUp = function (event) { | |
if ((0, _keycode2.default)(event) === 'esc') { | |
_this2.requestClose(false); | |
} | |
}, _this2.handleResize = function () { | |
_this2.positionDialog(); | |
}, _temp2), _possibleConstructorReturn(_this2, _ret2); | |
} | |
_createClass(DialogInline, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
this.positionDialog(); | |
} | |
}, { | |
key: 'componentDidUpdate', | |
value: function componentDidUpdate() { | |
this.positionDialog(); | |
} | |
}, { | |
key: 'positionDialog', | |
value: function positionDialog() { | |
var _props2 = this.props; | |
var actions = _props2.actions; | |
var autoDetectWindowHeight = _props2.autoDetectWindowHeight; | |
var autoScrollBodyContent = _props2.autoScrollBodyContent; | |
var bodyStyle = _props2.bodyStyle; | |
var open = _props2.open; | |
var repositionOnUpdate = _props2.repositionOnUpdate; | |
var title = _props2.title; | |
if (!open) { | |
return; | |
} | |
var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; | |
var container = _reactDom2.default.findDOMNode(this); | |
var dialogWindow = _reactDom2.default.findDOMNode(this.refs.dialogWindow); | |
var dialogContent = _reactDom2.default.findDOMNode(this.refs.dialogContent); | |
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 (repositionOnUpdate || !container.style.paddingTop) { | |
container.style.paddingTop = paddingTop + 'px'; | |
} | |
// Force a height if the dialog is taller than clientHeight | |
if (autoDetectWindowHeight || autoScrollBodyContent) { | |
var styles = getStyles(this.props, this.context); | |
styles.body = (0, _simpleAssign2.default)(styles.body, bodyStyle); | |
var maxDialogContentHeight = clientHeight - 2 * 64; | |
if (title) maxDialogContentHeight -= dialogContent.previousSibling.offsetHeight; | |
if (_react2.default.Children.count(actions)) { | |
maxDialogContentHeight -= dialogContent.nextSibling.offsetHeight; | |
} | |
dialogContent.style.maxHeight = maxDialogContentHeight + 'px'; | |
} | |
} | |
}, { | |
key: 'requestClose', | |
value: function requestClose(buttonClicked) { | |
if (!buttonClicked && this.props.modal) { | |
return; | |
} | |
if (this.props.onRequestClose) { | |
this.props.onRequestClose(!!buttonClicked); | |
} | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props3 = this.props; | |
var actions = _props3.actions; | |
var actionsContainerClassName = _props3.actionsContainerClassName; | |
var actionsContainerStyle = _props3.actionsContainerStyle; | |
var bodyClassName = _props3.bodyClassName; | |
var bodyStyle = _props3.bodyStyle; | |
var children = _props3.children; | |
var className = _props3.className; | |
var contentClassName = _props3.contentClassName; | |
var contentStyle = _props3.contentStyle; | |
var overlayClassName = _props3.overlayClassName; | |
var overlayStyle = _props3.overlayStyle; | |
var open = _props3.open; | |
var titleClassName = _props3.titleClassName; | |
var titleStyle = _props3.titleStyle; | |
var title = _props3.title; | |
var style = _props3.style; | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
styles.root = (0, _simpleAssign2.default)(styles.root, style); | |
styles.content = (0, _simpleAssign2.default)(styles.content, contentStyle); | |
styles.body = (0, _simpleAssign2.default)(styles.body, bodyStyle); | |
styles.actionsContainer = (0, _simpleAssign2.default)(styles.actionsContainer, actionsContainerStyle); | |
styles.overlay = (0, _simpleAssign2.default)(styles.overlay, overlayStyle); | |
styles.title = (0, _simpleAssign2.default)(styles.title, titleStyle); | |
var actionsContainer = _react2.default.Children.count(actions) > 0 && _react2.default.createElement( | |
'div', | |
{ className: actionsContainerClassName, style: prepareStyles(styles.actionsContainer) }, | |
_react2.default.Children.toArray(actions) | |
); | |
var titleElement = title; | |
if (_react2.default.isValidElement(title)) { | |
titleElement = _react2.default.cloneElement(title, { | |
className: title.props.className || titleClassName, | |
style: prepareStyles((0, _simpleAssign2.default)(styles.title, title.props.style)) | |
}); | |
} else if (typeof title === 'string') { | |
titleElement = _react2.default.createElement( | |
'h3', | |
{ className: titleClassName, style: prepareStyles(styles.title) }, | |
title | |
); | |
} | |
return _react2.default.createElement( | |
'div', | |
{ className: className, style: prepareStyles(styles.root) }, | |
open && _react2.default.createElement(_reactEventListener2.default, { | |
target: 'window', | |
onKeyUp: this.handleKeyUp, | |
onResize: this.handleResize | |
}), | |
_react2.default.createElement( | |
_reactAddonsTransitionGroup2.default, | |
{ | |
component: 'div', | |
ref: 'dialogWindow', | |
transitionAppear: true, | |
transitionAppearTimeout: 450, | |
transitionEnter: true, | |
transitionEnterTimeout: 450 | |
}, | |
open && _react2.default.createElement( | |
TransitionItem, | |
{ | |
className: contentClassName, | |
style: styles.content | |
}, | |
_react2.default.createElement( | |
_Paper2.default, | |
{ zDepth: 4 }, | |
titleElement, | |
_react2.default.createElement( | |
'div', | |
{ | |
ref: 'dialogContent', | |
className: bodyClassName, | |
style: prepareStyles(styles.body) | |
}, | |
children | |
), | |
actionsContainer | |
) | |
) | |
), | |
_react2.default.createElement(_Overlay2.default, { | |
show: open, | |
className: overlayClassName, | |
style: styles.overlay, | |
onTouchTap: this.handleTouchTapOverlay | |
}) | |
); | |
} | |
}]); | |
return DialogInline; | |
}(_react.Component); | |
DialogInline.propTypes = { | |
actions: _react.PropTypes.node, | |
actionsContainerClassName: _react.PropTypes.string, | |
actionsContainerStyle: _react.PropTypes.object, | |
autoDetectWindowHeight: _react.PropTypes.bool, | |
autoScrollBodyContent: _react.PropTypes.bool, | |
bodyClassName: _react.PropTypes.string, | |
bodyStyle: _react.PropTypes.object, | |
children: _react.PropTypes.node, | |
className: _react.PropTypes.string, | |
contentClassName: _react.PropTypes.string, | |
contentStyle: _react.PropTypes.object, | |
modal: _react.PropTypes.bool, | |
onRequestClose: _react.PropTypes.func, | |
open: _react.PropTypes.bool.isRequired, | |
overlayClassName: _react.PropTypes.string, | |
overlayStyle: _react.PropTypes.object, | |
repositionOnUpdate: _react.PropTypes.bool, | |
style: _react.PropTypes.object, | |
title: _react.PropTypes.node, | |
titleClassName: _react.PropTypes.string, | |
titleStyle: _react.PropTypes.object | |
}; | |
DialogInline.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
var Dialog = function (_Component3) { | |
_inherits(Dialog, _Component3); | |
function Dialog() { | |
var _Object$getPrototypeO3; | |
var _temp3, _this3, _ret3; | |
_classCallCheck(this, Dialog); | |
for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { | |
args[_key3] = arguments[_key3]; | |
} | |
return _ret3 = (_temp3 = (_this3 = _possibleConstructorReturn(this, (_Object$getPrototypeO3 = Object.getPrototypeOf(Dialog)).call.apply(_Object$getPrototypeO3, [this].concat(args))), _this3), _this3.renderLayer = function () { | |
return _react2.default.createElement(DialogInline, _this3.props); | |
}, _temp3), _possibleConstructorReturn(_this3, _ret3); | |
} | |
_createClass(Dialog, [{ | |
key: 'render', | |
value: function render() { | |
return _react2.default.createElement(_RenderToLayer2.default, { render: this.renderLayer, open: true, useLayerForClickAway: false }); | |
} | |
}]); | |
return Dialog; | |
}(_react.Component); | |
Dialog.propTypes = { | |
/** | |
* Action buttons to display below the Dialog content (`children`). | |
* This property accepts either a React element, or an array of React elements. | |
*/ | |
actions: _react.PropTypes.node, | |
/** | |
* The `className` to add to the actions container's root element. | |
*/ | |
actionsContainerClassName: _react.PropTypes.string, | |
/** | |
* Overrides the inline-styles of the actions container's root element. | |
*/ | |
actionsContainerStyle: _react.PropTypes.object, | |
/** | |
* If set to true, the height of the `Dialog` will be auto detected. A max height | |
* will be enforced so that the content does not extend beyond the viewport. | |
*/ | |
autoDetectWindowHeight: _react.PropTypes.bool, | |
/** | |
* If set to true, the body content of the `Dialog` will be scrollable. | |
*/ | |
autoScrollBodyContent: _react.PropTypes.bool, | |
/** | |
* The `className` to add to the content's root element under the title. | |
*/ | |
bodyClassName: _react.PropTypes.string, | |
/** | |
* Overrides the inline-styles of the content's root element under the title. | |
*/ | |
bodyStyle: _react.PropTypes.object, | |
/** | |
* The contents of the `Dialog`. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* The `className` to add to the content container. | |
*/ | |
contentClassName: _react.PropTypes.string, | |
/** | |
* Overrides the inline-styles of the content container. | |
*/ | |
contentStyle: _react.PropTypes.object, | |
/** | |
* Force the user to use one of the actions in the `Dialog`. | |
* Clicking outside the `Dialog` will not trigger the `onRequestClose`. | |
*/ | |
modal: _react.PropTypes.bool, | |
/** | |
* Fired when the `Dialog` is requested to be closed by a click outside the `Dialog` or on the buttons. | |
* | |
* @param {bool} buttonClicked Determines whether a button click triggered this request. | |
*/ | |
onRequestClose: _react.PropTypes.func, | |
/** | |
* Controls whether the Dialog is opened or not. | |
*/ | |
open: _react.PropTypes.bool.isRequired, | |
/** | |
* The `className` to add to the `Overlay` component that is rendered behind the `Dialog`. | |
*/ | |
overlayClassName: _react.PropTypes.string, | |
/** | |
* Overrides the inline-styles of the `Overlay` component that is rendered behind the `Dialog`. | |
*/ | |
overlayStyle: _react.PropTypes.object, | |
/** | |
* Determines whether the `Dialog` should be repositioned when it's contents are updated. | |
*/ | |
repositionOnUpdate: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The title to display on the `Dialog`. Could be number, string, element or an array containing these types. | |
*/ | |
title: _react.PropTypes.node, | |
/** | |
* The `className` to add to the title's root container element. | |
*/ | |
titleClassName: _react.PropTypes.string, | |
/** | |
* Overrides the inline-styles of the title's root container element. | |
*/ | |
titleStyle: _react.PropTypes.object | |
}; | |
Dialog.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
Dialog.defaultProps = { | |
autoDetectWindowHeight: true, | |
autoScrollBodyContent: false, | |
modal: false, | |
repositionOnUpdate: true | |
}; | |
exports.default = Dialog; | |
/***/ }, | |
/* 122 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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 propTypes = { | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* If true, the `Divider` will be indented `72px`. | |
*/ | |
inset: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
var defaultProps = { | |
inset: false | |
}; | |
var contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
var Divider = function Divider(props, context) { | |
var inset = props.inset; | |
var style = props.style; | |
var other = _objectWithoutProperties(props, ['inset', 'style']); | |
var muiTheme = context.muiTheme; | |
var prepareStyles = muiTheme.prepareStyles; | |
var styles = { | |
root: { | |
margin: 0, | |
marginTop: -1, | |
marginLeft: inset ? 72 : 0, | |
height: 1, | |
border: 'none', | |
backgroundColor: muiTheme.baseTheme.palette.borderColor | |
} | |
}; | |
return _react2.default.createElement('hr', _extends({}, other, { style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, style)) })); | |
}; | |
Divider.muiName = 'Divider'; | |
Divider.propTypes = propTypes; | |
Divider.defaultProps = defaultProps; | |
Divider.contextTypes = contextTypes; | |
exports.default = Divider; | |
/***/ }, | |
/* 123 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactDom = __webpack_require__(4); | |
var _reactDom2 = _interopRequireDefault(_reactDom); | |
var _reactEventListener = __webpack_require__(13); | |
var _reactEventListener2 = _interopRequireDefault(_reactEventListener); | |
var _keycode = __webpack_require__(10); | |
var _keycode2 = _interopRequireDefault(_keycode); | |
var _autoPrefix = __webpack_require__(14); | |
var _autoPrefix2 = _interopRequireDefault(_autoPrefix); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _Overlay = __webpack_require__(80); | |
var _Overlay2 = _interopRequireDefault(_Overlay); | |
var _Paper = __webpack_require__(8); | |
var _Paper2 = _interopRequireDefault(_Paper); | |
var _propTypes = __webpack_require__(9); | |
var _propTypes2 = _interopRequireDefault(_propTypes); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var openNavEventHandler = null; | |
var Drawer = function (_Component) { | |
_inherits(Drawer, _Component); | |
function Drawer() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, Drawer); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Drawer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleTouchTapOverlay = function (event) { | |
event.preventDefault(); | |
_this.close('clickaway'); | |
}, _this.handleKeyUp = function (event) { | |
if (_this.state.open && !_this.props.docked && (0, _keycode2.default)(event) === 'esc') { | |
_this.close('escape'); | |
} | |
}, _this.onBodyTouchStart = function (event) { | |
var swipeAreaWidth = _this.props.swipeAreaWidth; | |
var touchStartX = event.touches[0].pageX; | |
var touchStartY = event.touches[0].pageY; | |
// Open only if swiping from far left (or right) while closed | |
if (swipeAreaWidth !== null && !_this.state.open) { | |
if (_this.props.openSecondary) { | |
// If openSecondary is true calculate from the far right | |
if (touchStartX < document.body.offsetWidth - swipeAreaWidth) return; | |
} else { | |
// If openSecondary is false calculate from the far left | |
if (touchStartX > swipeAreaWidth) return; | |
} | |
} | |
if (!_this.state.open && (openNavEventHandler !== _this.onBodyTouchStart || _this.props.disableSwipeToOpen)) { | |
return; | |
} | |
_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); | |
}, _this.onBodyTouchMove = function (event) { | |
var currentX = event.touches[0].pageX; | |
var currentY = event.touches[0].pageY; | |
if (_this.state.swiping) { | |
event.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(); | |
} | |
} | |
}, _this.onBodyTouchEnd = function (event) { | |
if (_this.state.swiping) { | |
var currentX = event.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('swipe'); | |
} | |
} else { | |
if (swiping === 'opening') { | |
_this.open('swipe'); | |
} 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); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(Drawer, [{ | |
key: 'componentWillMount', | |
value: function componentWillMount() { | |
this.maybeSwiping = false; | |
this.touchStartX = null; | |
this.touchStartY = null; | |
this.swipeStartX = null; | |
this.setState({ | |
open: this.props.open !== null ? this.props.open : this.props.docked, | |
swiping: null | |
}); | |
} | |
}, { | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
this.enableSwipeHandling(); | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
// If controlled then the open prop takes precedence. | |
if (nextProps.open !== null) { | |
this.setState({ | |
open: nextProps.open | |
}); | |
// Otherwise, if docked is changed, change the open state for when uncontrolled. | |
} else if (this.props.docked !== nextProps.docked) { | |
this.setState({ | |
open: nextProps.docked | |
}); | |
} | |
} | |
}, { | |
key: 'componentDidUpdate', | |
value: function componentDidUpdate() { | |
this.enableSwipeHandling(); | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
this.disableSwipeHandling(); | |
} | |
}, { | |
key: 'getStyles', | |
value: function getStyles() { | |
var muiTheme = this.context.muiTheme; | |
var theme = muiTheme.drawer; | |
var x = this.getTranslateMultiplier() * (this.state.open ? 0 : this.getMaxTranslateX()); | |
var styles = { | |
root: { | |
height: '100%', | |
width: this.props.width || theme.width, | |
position: 'fixed', | |
zIndex: muiTheme.zIndex.drawer, | |
left: 0, | |
top: 0, | |
transform: 'translate3d(' + x + 'px, 0, 0)', | |
transition: !this.state.swiping && _transitions2.default.easeOut(null, 'transform', null), | |
backgroundColor: theme.color, | |
overflow: 'auto', | |
WebkitOverflowScrolling: 'touch' }, | |
// iOS momentum scrolling | |
overlay: { | |
zIndex: muiTheme.zIndex.drawerOverlay, | |
pointerEvents: this.state.open ? 'auto' : 'none' }, | |
// Bypass mouse events when left nav is closing. | |
rootWhenOpenRight: { | |
left: 'auto', | |
right: 0 | |
} | |
}; | |
return styles; | |
} | |
}, { | |
key: 'shouldShow', | |
value: function shouldShow() { | |
return this.state.open || !!this.state.swiping; // component is swiping | |
} | |
}, { | |
key: 'close', | |
value: function close(reason) { | |
if (this.props.open === null) this.setState({ open: false }); | |
if (this.props.onRequestChange) this.props.onRequestChange(false, reason); | |
return this; | |
} | |
}, { | |
key: 'open', | |
value: function open(reason) { | |
if (this.props.open === null) this.setState({ open: true }); | |
if (this.props.onRequestChange) this.props.onRequestChange(true, reason); | |
return this; | |
} | |
}, { | |
key: 'getMaxTranslateX', | |
value: function getMaxTranslateX() { | |
var width = this.props.width || this.context.muiTheme.drawer.width; | |
return width + 10; | |
} | |
}, { | |
key: 'getTranslateMultiplier', | |
value: function getTranslateMultiplier() { | |
return this.props.openSecondary ? 1 : -1; | |
} | |
}, { | |
key: 'enableSwipeHandling', | |
value: function enableSwipeHandling() { | |
if (!this.props.docked) { | |
document.body.addEventListener('touchstart', this.onBodyTouchStart); | |
if (!openNavEventHandler) { | |
openNavEventHandler = this.onBodyTouchStart; | |
} | |
} else { | |
this.disableSwipeHandling(); | |
} | |
} | |
}, { | |
key: 'disableSwipeHandling', | |
value: function disableSwipeHandling() { | |
document.body.removeEventListener('touchstart', this.onBodyTouchStart); | |
if (openNavEventHandler === this.onBodyTouchStart) { | |
openNavEventHandler = null; | |
} | |
} | |
}, { | |
key: 'setPosition', | |
value: function setPosition(translateX) { | |
var drawer = _reactDom2.default.findDOMNode(this.refs.clickAwayableElement); | |
var transformCSS = 'translate3d(' + this.getTranslateMultiplier() * translateX + 'px, 0, 0)'; | |
this.refs.overlay.setOpacity(1 - translateX / this.getMaxTranslateX()); | |
_autoPrefix2.default.set(drawer.style, 'transform', transformCSS); | |
} | |
}, { | |
key: 'getTranslateX', | |
value: 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()); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var children = _props.children; | |
var className = _props.className; | |
var containerClassName = _props.containerClassName; | |
var containerStyle = _props.containerStyle; | |
var docked = _props.docked; | |
var openSecondary = _props.openSecondary; | |
var overlayClassName = _props.overlayClassName; | |
var overlayStyle = _props.overlayStyle; | |
var style = _props.style; | |
var zDepth = _props.zDepth; | |
var styles = this.getStyles(); | |
var overlay = void 0; | |
if (!docked) { | |
overlay = _react2.default.createElement(_Overlay2.default, { | |
ref: 'overlay', | |
show: this.shouldShow(), | |
className: overlayClassName, | |
style: (0, _simpleAssign2.default)(styles.overlay, overlayStyle), | |
transitionEnabled: !this.state.swiping, | |
onTouchTap: this.handleTouchTapOverlay | |
}); | |
} | |
return _react2.default.createElement( | |
'div', | |
{ | |
className: className, | |
style: style | |
}, | |
_react2.default.createElement(_reactEventListener2.default, { target: 'window', onKeyUp: this.handleKeyUp }), | |
overlay, | |
_react2.default.createElement( | |
_Paper2.default, | |
{ | |
ref: 'clickAwayableElement', | |
zDepth: zDepth, | |
rounded: false, | |
transitionEnabled: !this.state.swiping, | |
className: containerClassName, | |
style: (0, _simpleAssign2.default)(styles.root, openSecondary && styles.rootWhenOpenRight, containerStyle) | |
}, | |
children | |
) | |
); | |
} | |
}]); | |
return Drawer; | |
}(_react.Component); | |
Drawer.propTypes = { | |
/** | |
* The contents of the `Drawer` | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The CSS class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* The CSS class name of the container element. | |
*/ | |
containerClassName: _react.PropTypes.string, | |
/** | |
* Override the inline-styles of the container element. | |
*/ | |
containerStyle: _react.PropTypes.object, | |
/** | |
* If true, swiping sideways when the `Drawer` is closed will not open it. | |
*/ | |
disableSwipeToOpen: _react.PropTypes.bool, | |
/** | |
* If true, the `Drawer` will be docked. In this state, the overlay won't show and | |
* clicking on a menu item will not close the `Drawer`. | |
*/ | |
docked: _react.PropTypes.bool, | |
/** | |
* Callback function fired when the `open` state of the `Drawer` is requested to be changed. | |
* | |
* @param {boolean} open If true, the `Drawer` was requested to be opened. | |
* @param {string} reason The reason for the open or close request. Possible values are | |
* 'swipe' for open requests; 'clickaway' (on overlay clicks), | |
* 'escape' (on escape key press), and 'swipe' for close requests. | |
*/ | |
onRequestChange: _react.PropTypes.func, | |
/** | |
* If true, the `Drawer` is opened. Providing a value will turn the `Drawer` | |
* into a controlled component. | |
*/ | |
open: _react.PropTypes.bool, | |
/** | |
* If true, the `Drawer` is positioned to open from the opposite side. | |
*/ | |
openSecondary: _react.PropTypes.bool, | |
/** | |
* The CSS class name to add to the `Overlay` component that is rendered behind the `Drawer`. | |
*/ | |
overlayClassName: _react.PropTypes.string, | |
/** | |
* Override the inline-styles of the `Overlay` component that is rendered behind the `Drawer`. | |
*/ | |
overlayStyle: _react.PropTypes.object, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The width of the left most (or right most) area in pixels where the `Drawer` can be | |
* swiped open from. Setting this to `null` spans that area to the entire page | |
* (**CAUTION!** Setting this property to `null` might cause issues with sliders and | |
* swipeable `Tabs`: use at your own risk). | |
*/ | |
swipeAreaWidth: _react.PropTypes.number, | |
/** | |
* The width of the `Drawer` in pixels. Defaults to using the values from theme. | |
*/ | |
width: _react.PropTypes.number, | |
/** | |
* The zDepth of the `Drawer`. | |
*/ | |
zDepth: _propTypes2.default.zDepth | |
}; | |
Drawer.defaultProps = { | |
disableSwipeToOpen: false, | |
docked: true, | |
open: null, | |
openSecondary: false, | |
swipeAreaWidth: 30, | |
width: null, | |
zDepth: 2 | |
}; | |
Drawer.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = Drawer; | |
/***/ }, | |
/* 124 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _Drawer = __webpack_require__(123); | |
var _Drawer2 = _interopRequireDefault(_Drawer); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _Drawer2.default; | |
/***/ }, | |
/* 125 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _arrowDropDown = __webpack_require__(200); | |
var _arrowDropDown2 = _interopRequireDefault(_arrowDropDown); | |
var _Menu = __webpack_require__(28); | |
var _Menu2 = _interopRequireDefault(_Menu); | |
var _ClearFix = __webpack_require__(79); | |
var _ClearFix2 = _interopRequireDefault(_ClearFix); | |
var _Popover = __webpack_require__(18); | |
var _Popover2 = _interopRequireDefault(_Popover); | |
var _PopoverAnimationVertical = __webpack_require__(39); | |
var _PopoverAnimationVertical2 = _interopRequireDefault(_PopoverAnimationVertical); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var anchorOrigin = { | |
vertical: 'top', | |
horizontal: 'left' | |
}; | |
function getStyles(props, context) { | |
var disabled = props.disabled; | |
var spacing = context.muiTheme.baseTheme.spacing; | |
var palette = context.muiTheme.baseTheme.palette; | |
var accentColor = context.muiTheme.dropDownMenu.accentColor; | |
return { | |
control: { | |
cursor: disabled ? 'not-allowed' : 'pointer', | |
height: '100%', | |
position: 'relative', | |
width: '100%' | |
}, | |
icon: { | |
fill: accentColor, | |
position: 'absolute', | |
right: spacing.desktopGutterLess, | |
top: (spacing.desktopToolbarHeight - 24) / 2 | |
}, | |
label: { | |
color: disabled ? palette.disabledColor : palette.textColor, | |
lineHeight: spacing.desktopToolbarHeight + 'px', | |
opacity: 1, | |
position: 'relative', | |
paddingLeft: spacing.desktopGutter, | |
paddingRight: spacing.iconSize + spacing.desktopGutterLess + spacing.desktopGutterMini, | |
top: 0 | |
}, | |
labelWhenOpen: { | |
opacity: 0, | |
top: spacing.desktopToolbarHeight / 8 | |
}, | |
root: { | |
display: 'inline-block', | |
fontSize: spacing.desktopDropDownMenuFontSize, | |
height: spacing.desktopSubheaderHeight, | |
fontFamily: context.muiTheme.baseTheme.fontFamily, | |
outline: 'none', | |
position: 'relative', | |
transition: _transitions2.default.easeOut() | |
}, | |
rootWhenOpen: { | |
opacity: 1 | |
}, | |
underline: { | |
borderTop: 'solid 1px ' + accentColor, | |
bottom: 1, | |
left: 0, | |
margin: '-1px ' + spacing.desktopGutter + 'px', | |
right: 0, | |
position: 'absolute' | |
} | |
}; | |
} | |
var DropDownMenu = function (_Component) { | |
_inherits(DropDownMenu, _Component); | |
function DropDownMenu() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, DropDownMenu); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DropDownMenu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
open: false | |
}, _this.handleTouchTapControl = function (event) { | |
event.preventDefault(); | |
if (!_this.props.disabled) { | |
_this.setState({ | |
open: !_this.state.open, | |
anchorEl: _this.refs.root | |
}); | |
} | |
}, _this.handleRequestCloseMenu = function () { | |
_this.setState({ | |
open: false, | |
anchorEl: null | |
}); | |
}, _this.handleItemTouchTap = function (event, child, index) { | |
_this.props.onChange(event, index, child.props.value); | |
_this.setState({ | |
open: false | |
}); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
// 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. | |
_createClass(DropDownMenu, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
var _this2 = this; | |
if (this.props.autoWidth) { | |
this.setWidth(); | |
} | |
if (this.props.openImmediately) { | |
// TODO: Temporary fix to make openImmediately work with popover. | |
/* eslint-disable react/no-did-mount-set-state */ | |
setTimeout(function () { | |
return _this2.setState({ open: true, anchorEl: _this2.refs.root }); | |
}); | |
setTimeout(function () { | |
return _this2.setState({ | |
open: true, | |
anchorEl: _this2.refs.root | |
}); | |
}, 0); | |
/* eslint-enable react/no-did-mount-set-state */ | |
} | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps() { | |
if (this.props.autoWidth) { | |
this.setWidth(); | |
} | |
} | |
/** | |
* This method is deprecated but still here because the TextField | |
* need it in order to work. TODO: That will be addressed later. | |
*/ | |
}, { | |
key: 'getInputNode', | |
value: function getInputNode() { | |
var _this3 = this; | |
var root = this.refs.root; | |
root.focus = function () { | |
if (!_this3.props.disabled) { | |
_this3.setState({ | |
open: !_this3.state.open, | |
anchorEl: _this3.refs.root | |
}); | |
} | |
}; | |
return root; | |
} | |
}, { | |
key: 'setWidth', | |
value: function setWidth() { | |
var el = this.refs.root; | |
if (!this.props.style || !this.props.style.hasOwnProperty('width')) { | |
el.style.width = 'auto'; | |
} | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var autoWidth = _props.autoWidth; | |
var children = _props.children; | |
var className = _props.className; | |
var iconStyle = _props.iconStyle; | |
var labelStyle = _props.labelStyle; | |
var listStyle = _props.listStyle; | |
var maxHeight = _props.maxHeight; | |
var menuStyleProps = _props.menuStyle; | |
var style = _props.style; | |
var underlineStyle = _props.underlineStyle; | |
var value = _props.value; | |
var other = _objectWithoutProperties(_props, ['autoWidth', 'children', 'className', 'iconStyle', 'labelStyle', 'listStyle', 'maxHeight', 'menuStyle', 'style', 'underlineStyle', 'value']); | |
var _state = this.state; | |
var anchorEl = _state.anchorEl; | |
var open = _state.open; | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var displayValue = ''; | |
_react2.default.Children.forEach(children, function (child) { | |
if (value === child.props.value) { | |
// This will need to be improved (in case primaryText is a node) | |
displayValue = child.props.label || child.props.primaryText; | |
} | |
}); | |
var menuStyle = void 0; | |
if (anchorEl && !autoWidth) { | |
menuStyle = (0, _simpleAssign2.default)({ | |
width: anchorEl.clientWidth | |
}, menuStyleProps); | |
} else { | |
menuStyle = menuStyleProps; | |
} | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { | |
ref: 'root', | |
className: className, | |
style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, open && styles.rootWhenOpen, style)) | |
}), | |
_react2.default.createElement( | |
_ClearFix2.default, | |
{ style: styles.control, onTouchTap: this.handleTouchTapControl }, | |
_react2.default.createElement( | |
'div', | |
{ | |
style: prepareStyles((0, _simpleAssign2.default)({}, styles.label, open && styles.labelWhenOpen, labelStyle)) | |
}, | |
displayValue | |
), | |
_react2.default.createElement(_arrowDropDown2.default, { style: (0, _simpleAssign2.default)({}, styles.icon, iconStyle) }), | |
_react2.default.createElement('div', { style: prepareStyles((0, _simpleAssign2.default)({}, styles.underline, underlineStyle)) }) | |
), | |
_react2.default.createElement( | |
_Popover2.default, | |
{ | |
anchorOrigin: anchorOrigin, | |
anchorEl: anchorEl, | |
animation: _PopoverAnimationVertical2.default, | |
open: open, | |
onRequestClose: this.handleRequestCloseMenu | |
}, | |
_react2.default.createElement( | |
_Menu2.default, | |
{ | |
maxHeight: maxHeight, | |
desktop: true, | |
value: value, | |
style: menuStyle, | |
listStyle: listStyle, | |
onItemTouchTap: this.handleItemTouchTap | |
}, | |
children | |
) | |
) | |
); | |
} | |
}]); | |
return DropDownMenu; | |
}(_react.Component); | |
DropDownMenu.muiName = 'DropDownMenu'; | |
DropDownMenu.propTypes = { | |
/** | |
* The width will automatically be set according to the items inside the menu. | |
* To control this width in css instead, set this prop to `false`. | |
*/ | |
autoWidth: _react.PropTypes.bool, | |
/** | |
* The `MenuItem`s to populate the `Menu` with. If the `MenuItems` have the | |
* prop `label` that value will be used to render the representation of that | |
* item within the field. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* Disables the menu. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* Overrides the styles of icon element. | |
*/ | |
iconStyle: _react.PropTypes.object, | |
/** | |
* Overrides the styles of label when the `DropDownMenu` is inactive. | |
*/ | |
labelStyle: _react.PropTypes.object, | |
/** | |
* The style object to use to override underlying list style. | |
*/ | |
listStyle: _react.PropTypes.object, | |
/** | |
* The maximum height of the `Menu` when it is displayed. | |
*/ | |
maxHeight: _react.PropTypes.number, | |
/** | |
* Overrides the styles of `Menu` when the `DropDownMenu` is displayed. | |
*/ | |
menuStyle: _react.PropTypes.object, | |
/** | |
* Callback function fired when a menu item is clicked, other than the one currently selected. | |
* | |
* @param {object} event TouchTap event targeting the menu item that was clicked. | |
* @param {number} key The index of the clicked menu item in the `children` collection. | |
* @param {any} payload The `value` prop of the clicked menu item. | |
*/ | |
onChange: _react.PropTypes.func, | |
/** | |
* Set to true to have the `DropDownMenu` automatically open on mount. | |
*/ | |
openImmediately: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* Overrides the inline-styles of the underline. | |
*/ | |
underlineStyle: _react.PropTypes.object, | |
/** | |
* The value that is currently selected. | |
*/ | |
value: _react.PropTypes.any | |
}; | |
DropDownMenu.defaultProps = { | |
autoWidth: true, | |
disabled: false, | |
openImmediately: false, | |
maxHeight: 500 | |
}; | |
DropDownMenu.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = DropDownMenu; | |
/***/ }, | |
/* 126 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _childUtils = __webpack_require__(24); | |
var _colorManipulator = __webpack_require__(12); | |
var _EnhancedButton = __webpack_require__(11); | |
var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); | |
var _FlatButtonLabel = __webpack_require__(127); | |
var _FlatButtonLabel2 = _interopRequireDefault(_FlatButtonLabel); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function validateLabel(props, propName, componentName) { | |
if (!props.children && !props.label && !props.icon) { | |
return new Error('Required prop label or children or icon was not specified in ' + componentName + '.'); | |
} | |
} | |
var FlatButton = function (_Component) { | |
_inherits(FlatButton, _Component); | |
function FlatButton() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, FlatButton); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(FlatButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
hovered: false, | |
isKeyboardFocused: false, | |
touch: false | |
}, _this.handleKeyboardFocus = function (event, isKeyboardFocused) { | |
_this.setState({ isKeyboardFocused: isKeyboardFocused }); | |
_this.props.onKeyboardFocus(event, isKeyboardFocused); | |
}, _this.handleMouseEnter = function (event) { | |
// Cancel hover styles for touch devices | |
if (!_this.state.touch) _this.setState({ hovered: true }); | |
_this.props.onMouseEnter(event); | |
}, _this.handleMouseLeave = function (event) { | |
_this.setState({ hovered: false }); | |
_this.props.onMouseLeave(event); | |
}, _this.handleTouchStart = function (event) { | |
_this.setState({ touch: true }); | |
_this.props.onTouchStart(event); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(FlatButton, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var children = _props.children; | |
var disabled = _props.disabled; | |
var hoverColor = _props.hoverColor; | |
var backgroundColor = _props.backgroundColor; | |
var icon = _props.icon; | |
var label = _props.label; | |
var labelStyle = _props.labelStyle; | |
var labelPosition = _props.labelPosition; | |
var primary = _props.primary; | |
var rippleColor = _props.rippleColor; | |
var secondary = _props.secondary; | |
var style = _props.style; | |
var other = _objectWithoutProperties(_props, ['children', 'disabled', 'hoverColor', 'backgroundColor', 'icon', 'label', 'labelStyle', 'labelPosition', 'primary', 'rippleColor', 'secondary', 'style']); | |
var _context$muiTheme = this.context.muiTheme; | |
var _context$muiTheme$but = _context$muiTheme.button; | |
var buttonHeight = _context$muiTheme$but.height; | |
var buttonMinWidth = _context$muiTheme$but.minWidth; | |
var buttonTextTransform = _context$muiTheme$but.textTransform; | |
var _context$muiTheme$fla = _context$muiTheme.flatButton; | |
var buttonFilterColor = _context$muiTheme$fla.buttonFilterColor; | |
var buttonColor = _context$muiTheme$fla.color; | |
var disabledTextColor = _context$muiTheme$fla.disabledTextColor; | |
var fontSize = _context$muiTheme$fla.fontSize; | |
var fontWeight = _context$muiTheme$fla.fontWeight; | |
var primaryTextColor = _context$muiTheme$fla.primaryTextColor; | |
var secondaryTextColor = _context$muiTheme$fla.secondaryTextColor; | |
var textColor = _context$muiTheme$fla.textColor; | |
var _context$muiTheme$fla2 = _context$muiTheme$fla.textTransform; | |
var textTransform = _context$muiTheme$fla2 === undefined ? buttonTextTransform || 'uppercase' : _context$muiTheme$fla2; | |
var defaultTextColor = disabled ? disabledTextColor : primary ? primaryTextColor : secondary ? secondaryTextColor : textColor; | |
var defaultHoverColor = (0, _colorManipulator.fade)(buttonFilterColor, 0.2); | |
var defaultRippleColor = buttonFilterColor; | |
var buttonHoverColor = hoverColor || defaultHoverColor; | |
var buttonRippleColor = rippleColor || defaultRippleColor; | |
var buttonBackgroundColor = backgroundColor || buttonColor; | |
var hovered = (this.state.hovered || this.state.isKeyboardFocused) && !disabled; | |
var mergedRootStyles = (0, _simpleAssign2.default)({}, { | |
height: buttonHeight, | |
lineHeight: buttonHeight + 'px', | |
minWidth: buttonMinWidth, | |
color: defaultTextColor, | |
transition: _transitions2.default.easeOut(), | |
borderRadius: 2, | |
userSelect: 'none', | |
position: 'relative', | |
overflow: 'hidden', | |
backgroundColor: hovered ? buttonHoverColor : buttonBackgroundColor, | |
padding: 0, | |
margin: 0, | |
textAlign: 'center' | |
}, style); | |
var iconCloned = void 0; | |
var labelStyleIcon = {}; | |
if (icon) { | |
iconCloned = _react2.default.cloneElement(icon, { | |
color: icon.props.color || mergedRootStyles.color, | |
style: { | |
verticalAlign: 'middle', | |
marginLeft: label && labelPosition !== 'before' ? 12 : 0, | |
marginRight: label && labelPosition === 'before' ? 12 : 0 | |
} | |
}); | |
if (labelPosition === 'before') { | |
labelStyleIcon.paddingRight = 8; | |
} else { | |
labelStyleIcon.paddingLeft = 8; | |
} | |
} | |
var mergedLabelStyles = (0, _simpleAssign2.default)({ | |
letterSpacing: 0, | |
textTransform: textTransform, | |
fontWeight: fontWeight, | |
fontSize: fontSize | |
}, labelStyleIcon, labelStyle); | |
var labelElement = label ? _react2.default.createElement(_FlatButtonLabel2.default, { label: label, style: mergedLabelStyles }) : undefined; | |
// Place label before or after children. | |
var childrenFragment = labelPosition === 'before' ? { | |
labelElement: labelElement, | |
iconCloned: iconCloned, | |
children: children | |
} : { | |
children: children, | |
iconCloned: iconCloned, | |
labelElement: labelElement | |
}; | |
var enhancedButtonChildren = (0, _childUtils.createChildFragment)(childrenFragment); | |
return _react2.default.createElement( | |
_EnhancedButton2.default, | |
_extends({}, other, { | |
disabled: disabled, | |
focusRippleColor: buttonRippleColor, | |
focusRippleOpacity: 0.3, | |
onKeyboardFocus: this.handleKeyboardFocus, | |
onMouseLeave: this.handleMouseLeave, | |
onMouseEnter: this.handleMouseEnter, | |
onTouchStart: this.handleTouchStart, | |
style: mergedRootStyles, | |
touchRippleColor: buttonRippleColor, | |
touchRippleOpacity: 0.3 | |
}), | |
enhancedButtonChildren | |
); | |
} | |
}]); | |
return FlatButton; | |
}(_react.Component); | |
FlatButton.muiName = 'FlatButton'; | |
FlatButton.propTypes = { | |
/** | |
* Color of button when mouse is not hovering over it. | |
*/ | |
backgroundColor: _react.PropTypes.string, | |
/** | |
* This is what will be displayed inside the button. | |
* If a label is specified, the text within the label prop will | |
* be displayed. Otherwise, the component will expect children | |
* which will then be displayed. (In our example, | |
* we are nesting an `<input type="file" />` and a `span` | |
* that acts as our label to be displayed.) This only | |
* applies to flat and raised buttons. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* Disables the button if set to true. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* Color of button when mouse hovers over. | |
*/ | |
hoverColor: _react.PropTypes.string, | |
/** | |
* The URL to link to when the button is clicked. | |
*/ | |
href: _react.PropTypes.string, | |
/** | |
* Use this property to display an icon. | |
*/ | |
icon: _react.PropTypes.node, | |
/** | |
* Label for the button. | |
*/ | |
label: validateLabel, | |
/** | |
* Place label before or after the passed children. | |
*/ | |
labelPosition: _react.PropTypes.oneOf(['before', 'after']), | |
/** | |
* Override the inline-styles of the button's label element. | |
*/ | |
labelStyle: _react.PropTypes.object, | |
/** | |
* Callback function fired when the element is focused or blurred by the keyboard. | |
* | |
* @param {object} event `focus` or `blur` event targeting the element. | |
* @param {boolean} isKeyboardFocused Indicates whether the element is focused. | |
*/ | |
onKeyboardFocus: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse enters the element. | |
* | |
* @param {object} event `mouseenter` event targeting the element. | |
*/ | |
onMouseEnter: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse leaves the element. | |
* | |
* @param {object} event `mouseleave` event targeting the element. | |
*/ | |
onMouseLeave: _react.PropTypes.func, | |
/** | |
* Callback function fired when the element is touched. | |
* | |
* @param {object} event `touchstart` event targeting the element. | |
*/ | |
onTouchStart: _react.PropTypes.func, | |
/** | |
* If true, colors button according to | |
* primaryTextColor from the Theme. | |
*/ | |
primary: _react.PropTypes.bool, | |
/** | |
* Color for the ripple after button is clicked. | |
*/ | |
rippleColor: _react.PropTypes.string, | |
/** | |
* If true, colors button according to secondaryTextColor from the theme. | |
* The primary prop has precendent if set to true. | |
*/ | |
secondary: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
FlatButton.defaultProps = { | |
disabled: false, | |
labelStyle: {}, | |
labelPosition: 'after', | |
onKeyboardFocus: function onKeyboardFocus() {}, | |
onMouseEnter: function onMouseEnter() {}, | |
onMouseLeave: function onMouseLeave() {}, | |
onTouchStart: function onTouchStart() {}, | |
primary: false, | |
secondary: false | |
}; | |
FlatButton.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = FlatButton; | |
/***/ }, | |
/* 127 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var baseTheme = context.muiTheme.baseTheme; | |
return { | |
root: { | |
position: 'relative', | |
paddingLeft: baseTheme.spacing.desktopGutterLess, | |
paddingRight: baseTheme.spacing.desktopGutterLess, | |
verticalAlign: 'middle' | |
} | |
}; | |
} | |
var FlatButtonLabel = function (_Component) { | |
_inherits(FlatButtonLabel, _Component); | |
function FlatButtonLabel() { | |
_classCallCheck(this, FlatButtonLabel); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(FlatButtonLabel).apply(this, arguments)); | |
} | |
_createClass(FlatButtonLabel, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var label = _props.label; | |
var style = _props.style; | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
return _react2.default.createElement( | |
'span', | |
{ style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, | |
label | |
); | |
} | |
}]); | |
return FlatButtonLabel; | |
}(_react.Component); | |
FlatButtonLabel.propTypes = { | |
label: _react.PropTypes.node, | |
style: _react.PropTypes.object | |
}; | |
FlatButtonLabel.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = FlatButtonLabel; | |
/***/ }, | |
/* 128 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _colorManipulator = __webpack_require__(12); | |
var _EnhancedButton = __webpack_require__(11); | |
var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); | |
var _FontIcon = __webpack_require__(34); | |
var _FontIcon2 = _interopRequireDefault(_FontIcon); | |
var _Paper = __webpack_require__(8); | |
var _Paper2 = _interopRequireDefault(_Paper); | |
var _childUtils = __webpack_require__(24); | |
var _warning = __webpack_require__(6); | |
var _warning2 = _interopRequireDefault(_warning); | |
var _propTypes = __webpack_require__(9); | |
var _propTypes2 = _interopRequireDefault(_propTypes); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var floatingActionButton = context.muiTheme.floatingActionButton; | |
var backgroundColor = props.backgroundColor || floatingActionButton.color; | |
var iconColor = floatingActionButton.iconColor; | |
if (props.disabled) { | |
backgroundColor = props.disabledColor || floatingActionButton.disabledColor; | |
iconColor = floatingActionButton.disabledTextColor; | |
} else if (props.secondary) { | |
backgroundColor = floatingActionButton.secondaryColor; | |
iconColor = floatingActionButton.secondaryIconColor; | |
} | |
return { | |
root: { | |
transition: _transitions2.default.easeOut(), | |
display: 'inline-block' | |
}, | |
container: { | |
backgroundColor: backgroundColor, | |
transition: _transitions2.default.easeOut(), | |
position: 'relative', | |
height: floatingActionButton.buttonSize, | |
width: floatingActionButton.buttonSize, | |
padding: 0, | |
overflow: 'hidden', | |
borderRadius: '50%', | |
textAlign: 'center', | |
verticalAlign: 'bottom' | |
}, | |
containerWhenMini: { | |
height: floatingActionButton.miniSize, | |
width: floatingActionButton.miniSize | |
}, | |
overlay: { | |
transition: _transitions2.default.easeOut(), | |
top: 0 | |
}, | |
overlayWhenHovered: { | |
backgroundColor: (0, _colorManipulator.fade)(iconColor, 0.4) | |
}, | |
icon: { | |
height: floatingActionButton.buttonSize, | |
lineHeight: floatingActionButton.buttonSize + 'px', | |
fill: iconColor, | |
color: iconColor | |
}, | |
iconWhenMini: { | |
height: floatingActionButton.miniSize, | |
lineHeight: floatingActionButton.miniSize + 'px' | |
} | |
}; | |
} | |
var FloatingActionButton = function (_Component) { | |
_inherits(FloatingActionButton, _Component); | |
function FloatingActionButton() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, FloatingActionButton); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(FloatingActionButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
hovered: false, | |
touch: false, | |
zDepth: undefined | |
}, _this.handleMouseDown = function (event) { | |
// only listen to left clicks | |
if (event.button === 0) { | |
_this.setState({ zDepth: _this.props.zDepth + 1 }); | |
} | |
if (_this.props.onMouseDown) _this.props.onMouseDown(event); | |
}, _this.handleMouseUp = function (event) { | |
_this.setState({ zDepth: _this.props.zDepth }); | |
if (_this.props.onMouseUp) _this.props.onMouseUp(event); | |
}, _this.handleMouseLeave = function (event) { | |
if (!_this.refs.container.isKeyboardFocused()) _this.setState({ zDepth: _this.props.zDepth, hovered: false }); | |
if (_this.props.onMouseLeave) _this.props.onMouseLeave(event); | |
}, _this.handleMouseEnter = function (event) { | |
if (!_this.refs.container.isKeyboardFocused() && !_this.state.touch) { | |
_this.setState({ hovered: true }); | |
} | |
if (_this.props.onMouseEnter) _this.props.onMouseEnter(event); | |
}, _this.handleTouchStart = function (event) { | |
_this.setState({ | |
touch: true, | |
zDepth: _this.props.zDepth + 1 | |
}); | |
if (_this.props.onTouchStart) _this.props.onTouchStart(event); | |
}, _this.handleTouchEnd = function (event) { | |
_this.setState({ zDepth: _this.props.zDepth }); | |
if (_this.props.onTouchEnd) _this.props.onTouchEnd(event); | |
}, _this.handleKeyboardFocus = function (event, keyboardFocused) { | |
if (keyboardFocused && !_this.props.disabled) { | |
_this.setState({ zDepth: _this.props.zDepth + 1 }); | |
_this.refs.overlay.style.backgroundColor = (0, _colorManipulator.fade)(getStyles(_this.props, _this.context).icon.color, 0.4); | |
} else if (!_this.state.hovered) { | |
_this.setState({ zDepth: _this.props.zDepth }); | |
_this.refs.overlay.style.backgroundColor = 'transparent'; | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(FloatingActionButton, [{ | |
key: 'componentWillMount', | |
value: function componentWillMount() { | |
this.setState({ | |
zDepth: this.props.disabled ? 0 : this.props.zDepth | |
}); | |
} | |
}, { | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
true ? (0, _warning2.default)(!this.props.iconClassName || !this.props.children, 'You have set both an iconClassName and a child icon. ' + 'It is recommended you use only one method when adding ' + 'icons to FloatingActionButtons.') : void 0; | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
if (nextProps.disabled !== this.props.disabled) { | |
this.setState({ | |
zDepth: nextProps.disabled ? 0 : this.props.zDepth | |
}); | |
} | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var className = _props.className; | |
var disabled = _props.disabled; | |
var mini = _props.mini; | |
var secondary = _props.secondary; | |
var // eslint-disable-line no-unused-vars | |
iconStyle = _props.iconStyle; | |
var iconClassName = _props.iconClassName; | |
var other = _objectWithoutProperties(_props, ['className', 'disabled', 'mini', 'secondary', 'iconStyle', 'iconClassName']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var iconElement = void 0; | |
if (iconClassName) { | |
iconElement = _react2.default.createElement(_FontIcon2.default, { | |
className: iconClassName, | |
style: (0, _simpleAssign2.default)({}, styles.icon, mini && styles.iconWhenMini, iconStyle) | |
}); | |
} | |
var children = (0, _childUtils.extendChildren)(this.props.children, { | |
style: (0, _simpleAssign2.default)({}, 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 _react2.default.createElement( | |
_Paper2.default, | |
{ | |
className: className, | |
style: (0, _simpleAssign2.default)(styles.root, this.props.style), | |
zDepth: this.state.zDepth, | |
circle: true | |
}, | |
_react2.default.createElement( | |
_EnhancedButton2.default, | |
_extends({}, other, buttonEventHandlers, { | |
ref: 'container', | |
disabled: disabled, | |
style: (0, _simpleAssign2.default)(styles.container, this.props.mini && styles.containerWhenMini, iconStyle), | |
focusRippleColor: styles.icon.color, | |
touchRippleColor: styles.icon.color | |
}), | |
_react2.default.createElement( | |
'div', | |
{ | |
ref: 'overlay', | |
style: prepareStyles((0, _simpleAssign2.default)(styles.overlay, this.state.hovered && !this.props.disabled && styles.overlayWhenHovered)) | |
}, | |
iconElement, | |
children | |
) | |
) | |
); | |
} | |
}]); | |
return FloatingActionButton; | |
}(_react.Component); | |
FloatingActionButton.propTypes = { | |
/** | |
* This value will override the default background color for the button. | |
* However it will not override the default disabled background color. | |
* This has to be set separately using the disabledColor attribute. | |
*/ | |
backgroundColor: _react.PropTypes.string, | |
/** | |
* This is what displayed inside the floating action button; for example, a SVG Icon. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* Disables the button if set to true. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* This value will override the default background color for the button when it is disabled. | |
*/ | |
disabledColor: _react.PropTypes.string, | |
/** | |
* The URL to link to when the button is clicked. | |
*/ | |
href: _react.PropTypes.string, | |
/** | |
* The icon within the FloatingActionButton is a FontIcon component. | |
* This property is the classname of the icon to be displayed inside the button. | |
* An alternative to adding an iconClassName would be to manually insert a | |
* FontIcon component or custom SvgIcon component or as a child of FloatingActionButton. | |
*/ | |
iconClassName: _react.PropTypes.string, | |
/** | |
* This is the equivalent to iconClassName except that it is used for | |
* overriding the inline-styles of the FontIcon component. | |
*/ | |
iconStyle: _react.PropTypes.object, | |
/** | |
* If true, the button will be a small floating action button. | |
*/ | |
mini: _react.PropTypes.bool, | |
/** | |
* Callback function fired when a mouse button is pressed down on the element. | |
* | |
* @param {object} event `mousedown` event targeting the element. | |
*/ | |
onMouseDown: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse enters the element. | |
* | |
* @param {object} event `mouseenter` event targeting the element. | |
*/ | |
onMouseEnter: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse leaves the element. | |
* | |
* @param {object} event `mouseleave` event targeting the element. | |
*/ | |
onMouseLeave: _react.PropTypes.func, | |
/** | |
* Callback function fired when a mouse button is released on the element. | |
* | |
* @param {object} event `mouseup` event targeting the element. | |
*/ | |
onMouseUp: _react.PropTypes.func, | |
/** | |
* Callback function fired when a touch point is removed from the element. | |
* | |
* @param {object} event `touchend` event targeting the element. | |
*/ | |
onTouchEnd: _react.PropTypes.func, | |
/** | |
* Callback function fired when the element is touched. | |
* | |
* @param {object} event `touchstart` event targeting the element. | |
*/ | |
onTouchStart: _react.PropTypes.func, | |
/** | |
* If true, the button will use the secondary button colors. | |
*/ | |
secondary: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The zDepth of the underlying `Paper` component. | |
*/ | |
zDepth: _propTypes2.default.zDepth | |
}; | |
FloatingActionButton.defaultProps = { | |
disabled: false, | |
mini: false, | |
secondary: false, | |
zDepth: 2 | |
}; | |
FloatingActionButton.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = FloatingActionButton; | |
/***/ }, | |
/* 129 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _FloatingActionButton = __webpack_require__(128); | |
var _FloatingActionButton2 = _interopRequireDefault(_FloatingActionButton); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _FloatingActionButton2.default; | |
/***/ }, | |
/* 130 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context, state) { | |
var color = props.color; | |
var hoverColor = props.hoverColor; | |
var baseTheme = context.muiTheme.baseTheme; | |
var offColor = color || baseTheme.palette.textColor; | |
var onColor = hoverColor || offColor; | |
return { | |
root: { | |
color: state.hovered ? onColor : offColor, | |
position: 'relative', | |
fontSize: baseTheme.spacing.iconSize, | |
display: 'inline-block', | |
userSelect: 'none', | |
transition: _transitions2.default.easeOut() | |
} | |
}; | |
} | |
var FontIcon = function (_Component) { | |
_inherits(FontIcon, _Component); | |
function FontIcon() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, FontIcon); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(FontIcon)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
hovered: false | |
}, _this.handleMouseLeave = function (event) { | |
// 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(event); | |
} | |
}, _this.handleMouseEnter = function (event) { | |
// 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(event); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(FontIcon, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var onMouseLeave = _props.onMouseLeave; | |
var // eslint-disable-line no-unused-vars | |
onMouseEnter = _props.onMouseEnter; | |
var // eslint-disable-line no-unused-vars | |
style = _props.style; | |
var other = _objectWithoutProperties(_props, ['onMouseLeave', 'onMouseEnter', 'style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context, this.state); | |
return _react2.default.createElement('span', _extends({}, other, { | |
onMouseLeave: this.handleMouseLeave, | |
onMouseEnter: this.handleMouseEnter, | |
style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) | |
})); | |
} | |
}]); | |
return FontIcon; | |
}(_react.Component); | |
FontIcon.muiName = 'FontIcon'; | |
FontIcon.propTypes = { | |
/** | |
* This is the font color of the font icon. If not specified, | |
* this component will default to muiTheme.palette.textColor. | |
*/ | |
color: _react.PropTypes.string, | |
/** | |
* This is the icon color when the mouse hovers over the icon. | |
*/ | |
hoverColor: _react.PropTypes.string, | |
/** | |
* Callback function fired when the mouse enters the element. | |
* | |
* @param {object} event `mouseenter` event targeting the element. | |
*/ | |
onMouseEnter: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse leaves the element. | |
* | |
* @param {object} event `mouseleave` event targeting the element. | |
*/ | |
onMouseLeave: _react.PropTypes.func, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
FontIcon.defaultProps = { | |
onMouseEnter: function onMouseEnter() {}, | |
onMouseLeave: function onMouseLeave() {} | |
}; | |
FontIcon.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = FontIcon; | |
/***/ }, | |
/* 131 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props) { | |
return { | |
root: { | |
display: 'flex', | |
flexWrap: 'wrap', | |
margin: -props.padding / 2 | |
}, | |
item: { | |
boxSizing: 'border-box', | |
padding: props.padding / 2 | |
} | |
}; | |
} | |
var GridList = function (_Component) { | |
_inherits(GridList, _Component); | |
function GridList() { | |
_classCallCheck(this, GridList); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(GridList).apply(this, arguments)); | |
} | |
_createClass(GridList, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var cols = _props.cols; | |
var padding = _props.padding; | |
var cellHeight = _props.cellHeight; | |
var children = _props.children; | |
var style = _props.style; | |
var other = _objectWithoutProperties(_props, ['cols', 'padding', 'cellHeight', 'children', 'style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style); | |
var wrappedChildren = _react2.default.Children.map(children, function (currentChild) { | |
if (_react2.default.isValidElement(currentChild) && currentChild.type.muiName === 'Subheader') { | |
return currentChild; | |
} | |
var childCols = currentChild.props.cols || 1; | |
var childRows = currentChild.props.rows || 1; | |
var itemStyle = (0, _simpleAssign2.default)({}, styles.item, { | |
width: 100 / cols * childCols + '%', | |
height: cellHeight * childRows + padding | |
}); | |
return _react2.default.createElement( | |
'div', | |
{ style: prepareStyles(itemStyle) }, | |
currentChild | |
); | |
}); | |
return _react2.default.createElement( | |
'div', | |
_extends({ style: prepareStyles(mergedRootStyles) }, other), | |
wrappedChildren | |
); | |
} | |
}]); | |
return GridList; | |
}(_react.Component); | |
GridList.propTypes = { | |
/** | |
* Number of px for one cell height. | |
*/ | |
cellHeight: _react.PropTypes.number, | |
/** | |
* Grid Tiles that will be in Grid List. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* Number of columns. | |
*/ | |
cols: _react.PropTypes.number, | |
/** | |
* Number of px for the padding/spacing between items. | |
*/ | |
padding: _react.PropTypes.number, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
GridList.defaultProps = { | |
cols: 2, | |
padding: 4, | |
cellHeight: 180 | |
}; | |
GridList.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = GridList; | |
/***/ }, | |
/* 132 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = exports.GridTile = exports.GridList = undefined; | |
var _GridList2 = __webpack_require__(131); | |
var _GridList3 = _interopRequireDefault(_GridList2); | |
var _GridTile2 = __webpack_require__(62); | |
var _GridTile3 = _interopRequireDefault(_GridTile2); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.GridList = _GridList3.default; | |
exports.GridTile = _GridTile3.default; | |
exports.default = _GridList3.default; | |
/***/ }, | |
/* 133 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _propTypes = __webpack_require__(9); | |
var _propTypes2 = _interopRequireDefault(_propTypes); | |
var _EnhancedButton = __webpack_require__(11); | |
var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); | |
var _FontIcon = __webpack_require__(34); | |
var _FontIcon2 = _interopRequireDefault(_FontIcon); | |
var _Tooltip = __webpack_require__(82); | |
var _Tooltip2 = _interopRequireDefault(_Tooltip); | |
var _childUtils = __webpack_require__(24); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var baseTheme = context.muiTheme.baseTheme; | |
return { | |
root: { | |
position: 'relative', | |
boxSizing: 'border-box', | |
overflow: 'visible', | |
transition: _transitions2.default.easeOut(), | |
padding: baseTheme.spacing.iconSize / 2, | |
width: baseTheme.spacing.iconSize * 2, | |
height: baseTheme.spacing.iconSize * 2, | |
fontSize: 0 | |
}, | |
tooltip: { | |
boxSizing: 'border-box' | |
}, | |
icon: { | |
color: baseTheme.palette.textColor, | |
fill: baseTheme.palette.textColor | |
}, | |
overlay: { | |
position: 'relative', | |
top: 0, | |
width: '100%', | |
height: '100%', | |
background: baseTheme.palette.disabledColor | |
}, | |
disabled: { | |
color: baseTheme.palette.disabledColor, | |
fill: baseTheme.palette.disabledColor | |
} | |
}; | |
} | |
var IconButton = function (_Component) { | |
_inherits(IconButton, _Component); | |
function IconButton() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, IconButton); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
tooltipShown: false | |
}, _this.handleBlur = function (event) { | |
_this.hideTooltip(); | |
if (_this.props.onBlur) _this.props.onBlur(event); | |
}, _this.handleFocus = function (event) { | |
_this.showTooltip(); | |
if (_this.props.onFocus) _this.props.onFocus(event); | |
}, _this.handleMouseLeave = function (event) { | |
if (!_this.refs.button.isKeyboardFocused()) _this.hideTooltip(); | |
if (_this.props.onMouseLeave) _this.props.onMouseLeave(event); | |
}, _this.handleMouseOut = function (event) { | |
if (_this.props.disabled) _this.hideTooltip(); | |
if (_this.props.onMouseOut) _this.props.onMouseOut(event); | |
}, _this.handleMouseEnter = function (event) { | |
_this.showTooltip(); | |
if (_this.props.onMouseEnter) _this.props.onMouseEnter(event); | |
}, _this.handleKeyboardFocus = function (event, keyboardFocused) { | |
if (keyboardFocused && !_this.props.disabled) { | |
_this.showTooltip(); | |
if (_this.props.onFocus) _this.props.onFocus(event); | |
} else if (!_this.state.hovered) { | |
_this.hideTooltip(); | |
if (_this.props.onBlur) _this.props.onBlur(event); | |
} | |
if (_this.props.onKeyboardFocus) _this.props.onKeyboardFocus(event, keyboardFocused); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(IconButton, [{ | |
key: 'setKeyboardFocus', | |
value: function setKeyboardFocus() { | |
this.refs.button.setKeyboardFocus(); | |
} | |
}, { | |
key: 'showTooltip', | |
value: function showTooltip() { | |
if (this.props.tooltip) { | |
this.setState({ tooltipShown: true }); | |
} | |
} | |
}, { | |
key: 'hideTooltip', | |
value: function hideTooltip() { | |
if (this.props.tooltip) this.setState({ tooltipShown: false }); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var disabled = _props.disabled; | |
var disableTouchRipple = _props.disableTouchRipple; | |
var iconClassName = _props.iconClassName; | |
var tooltip = _props.tooltip; | |
var touch = _props.touch; | |
var iconStyle = _props.iconStyle; | |
var other = _objectWithoutProperties(_props, ['disabled', 'disableTouchRipple', 'iconClassName', 'tooltip', 'touch', 'iconStyle']); | |
var fonticon = void 0; | |
var styles = getStyles(this.props, this.context); | |
var tooltipPosition = this.props.tooltipPosition.split('-'); | |
var tooltipElement = tooltip ? _react2.default.createElement(_Tooltip2.default, { | |
ref: 'tooltip', | |
label: tooltip, | |
show: this.state.tooltipShown, | |
touch: touch, | |
style: (0, _simpleAssign2.default)(styles.tooltip, this.props.tooltipStyles), | |
verticalPosition: tooltipPosition[0], | |
horizontalPosition: tooltipPosition[1] | |
}) : null; | |
if (iconClassName) { | |
var iconHoverColor = iconStyle.iconHoverColor; | |
var iconStyleFontIcon = _objectWithoutProperties(iconStyle, ['iconHoverColor']); | |
fonticon = _react2.default.createElement( | |
_FontIcon2.default, | |
{ | |
className: iconClassName, | |
hoverColor: disabled ? null : iconHoverColor, | |
style: (0, _simpleAssign2.default)(styles.icon, disabled && styles.disabled, iconStyleFontIcon) | |
}, | |
this.props.children | |
); | |
} | |
var childrenStyle = disabled ? (0, _simpleAssign2.default)({}, iconStyle, styles.disabled) : iconStyle; | |
return _react2.default.createElement( | |
_EnhancedButton2.default, | |
_extends({}, other, { | |
ref: 'button', | |
centerRipple: true, | |
disabled: disabled, | |
style: (0, _simpleAssign2.default)(styles.root, this.props.style), | |
disableTouchRipple: disableTouchRipple, | |
onBlur: this.handleBlur, | |
onFocus: this.handleFocus, | |
onMouseLeave: this.handleMouseLeave, | |
onMouseEnter: this.handleMouseEnter, | |
onMouseOut: this.handleMouseOut, | |
onKeyboardFocus: this.handleKeyboardFocus | |
}), | |
tooltipElement, | |
fonticon, | |
(0, _childUtils.extendChildren)(this.props.children, { | |
style: childrenStyle | |
}) | |
); | |
} | |
}]); | |
return IconButton; | |
}(_react.Component); | |
IconButton.muiName = 'IconButton'; | |
IconButton.propTypes = { | |
/** | |
* Can be used to pass a `FontIcon` element as the icon for the button. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The CSS class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* If true, the element's ripple effect will be disabled. | |
*/ | |
disableTouchRipple: _react.PropTypes.bool, | |
/** | |
* If true, the element will be disabled. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* The URL to link to when the button is clicked. | |
*/ | |
href: _react.PropTypes.string, | |
/** | |
* The CSS class name of the icon. Used for setting the icon with a stylesheet. | |
*/ | |
iconClassName: _react.PropTypes.string, | |
/** | |
* Override the inline-styles of the icon element. | |
*/ | |
iconStyle: _react.PropTypes.object, | |
/** | |
* Callback function fired when the element loses focus. | |
* @param {object} event `blur` event targeting the element. | |
*/ | |
onBlur: _react.PropTypes.func, | |
/** | |
* Callback function fired when the element gains focus. | |
* @param {object} event `focus` event targeting the element. | |
*/ | |
onFocus: _react.PropTypes.func, | |
/** | |
* Callback function fired when the element is focused or blurred by the keyboard. | |
* | |
* @param {object} event `focus` or `blur` event targeting the element. | |
* @param {boolean} keyboardFocused Indicates whether the element is focused. | |
*/ | |
onKeyboardFocus: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse enters the element. | |
* | |
* @param {object} event `mouseenter` event targeting the element. | |
*/ | |
onMouseEnter: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse leaves the element. | |
* | |
* @param {object} event `mouseleave` event targeting the element. | |
*/ | |
onMouseLeave: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse leaves the element. Unlike `onMouseLeave`, | |
* this callback will fire on disabled icon buttons. | |
* | |
* @param {object} event `mouseout` event targeting the element. | |
*/ | |
onMouseOut: _react.PropTypes.func, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The text to supply to the element's tooltip. | |
*/ | |
tooltip: _react.PropTypes.node, | |
/** | |
* The vertical and horizontal positions, respectively, of the element's tooltip. | |
* Possible values are: "bottom-center", "top-center", "bottom-right", "top-right", | |
* "bottom-left", and "top-left". | |
*/ | |
tooltipPosition: _propTypes2.default.cornersAndCenter, | |
/** | |
* Override the inline-styles of the tooltip element. | |
*/ | |
tooltipStyles: _react.PropTypes.object, | |
/** | |
* If true, increase the tooltip element's size. Useful for increasing tooltip | |
* readability on mobile devices. | |
*/ | |
touch: _react.PropTypes.bool | |
}; | |
IconButton.defaultProps = { | |
disabled: false, | |
disableTouchRipple: false, | |
iconStyle: {}, | |
tooltipPosition: 'bottom-center', | |
touch: false | |
}; | |
IconButton.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = IconButton; | |
/***/ }, | |
/* 134 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactDom = __webpack_require__(4); | |
var _reactDom2 = _interopRequireDefault(_reactDom); | |
var _events = __webpack_require__(47); | |
var _events2 = _interopRequireDefault(_events); | |
var _propTypes = __webpack_require__(9); | |
var _propTypes2 = _interopRequireDefault(_propTypes); | |
var _Menu = __webpack_require__(28); | |
var _Menu2 = _interopRequireDefault(_Menu); | |
var _Popover = __webpack_require__(18); | |
var _Popover2 = _interopRequireDefault(_Popover); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var IconMenu = function (_Component) { | |
_inherits(IconMenu, _Component); | |
function IconMenu() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, IconMenu); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconMenu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
menuInitiallyKeyboardFocused: false, | |
open: false | |
}, _this.handleItemTouchTap = function (event, child) { | |
if (_this.props.touchTapCloseDelay !== 0 && !child.props.hasOwnProperty('menuItems')) { | |
(function () { | |
var isKeyboard = _events2.default.isKeyboard(event); | |
_this.timerCloseId = setTimeout(function () { | |
_this.close(isKeyboard ? 'enter' : 'itemTap', isKeyboard); | |
}, _this.props.touchTapCloseDelay); | |
})(); | |
} | |
_this.props.onItemTouchTap(event, child); | |
}, _this.handleRequestClose = function (reason) { | |
_this.close(reason); | |
}, _this.handleEscKeyDownMenu = function (event) { | |
_this.close('escape', event); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(IconMenu, [{ | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
if (nextProps.open != null) { | |
this.setState({ | |
open: nextProps.open, | |
anchorEl: this.refs.iconMenuContainer | |
}); | |
} | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
clearTimeout(this.timerCloseId); | |
} | |
}, { | |
key: 'isOpen', | |
value: function isOpen() { | |
return this.state.open; | |
} | |
}, { | |
key: 'close', | |
value: function close(reason, isKeyboard) { | |
var _this2 = this; | |
if (!this.state.open) { | |
return; | |
} | |
if (this.props.open !== null) { | |
this.props.onRequestChange(false, reason); | |
} | |
this.setState({ open: false }, function () { | |
// Set focus on the icon button when the menu close | |
if (isKeyboard) { | |
var iconButton = _this2.refs.iconButton; | |
_reactDom2.default.findDOMNode(iconButton).focus(); | |
iconButton.setKeyboardFocus(); | |
} | |
}); | |
} | |
}, { | |
key: 'open', | |
value: function open(reason, event) { | |
if (this.props.open !== null) { | |
this.props.onRequestChange(true, reason); | |
return this.setState({ | |
menuInitiallyKeyboardFocused: _events2.default.isKeyboard(event), | |
anchorEl: event.currentTarget | |
}); | |
} | |
this.setState({ | |
open: true, | |
menuInitiallyKeyboardFocused: _events2.default.isKeyboard(event), | |
anchorEl: event.currentTarget | |
}); | |
event.preventDefault(); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _this3 = this; | |
var _props = this.props; | |
var anchorOrigin = _props.anchorOrigin; | |
var className = _props.className; | |
var iconButtonElement = _props.iconButtonElement; | |
var iconStyle = _props.iconStyle; | |
var onItemTouchTap = _props.onItemTouchTap; | |
var // eslint-disable-line no-unused-vars | |
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 targetOrigin = _props.targetOrigin; | |
var useLayerForClickAway = _props.useLayerForClickAway; | |
var other = _objectWithoutProperties(_props, ['anchorOrigin', 'className', 'iconButtonElement', 'iconStyle', 'onItemTouchTap', 'onKeyboardFocus', 'onMouseDown', 'onMouseLeave', 'onMouseEnter', 'onMouseUp', 'onTouchTap', 'menuStyle', 'style', 'targetOrigin', 'useLayerForClickAway']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var _state = this.state; | |
var open = _state.open; | |
var anchorEl = _state.anchorEl; | |
var styles = { | |
root: { | |
display: 'inline-block', | |
position: 'relative' | |
}, | |
menu: { | |
position: 'relative' | |
} | |
}; | |
var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style); | |
var mergedMenuStyles = (0, _simpleAssign2.default)(styles.menu, menuStyle); | |
var iconButton = _react2.default.cloneElement(iconButtonElement, { | |
onKeyboardFocus: onKeyboardFocus, | |
iconStyle: (0, _simpleAssign2.default)({}, iconStyle, iconButtonElement.props.iconStyle), | |
onTouchTap: function onTouchTap(event) { | |
_this3.open(_events2.default.isKeyboard(event) ? 'keyboard' : 'iconTap', event); | |
if (iconButtonElement.props.onTouchTap) iconButtonElement.props.onTouchTap(event); | |
}, | |
ref: 'iconButton' | |
}); | |
var menu = _react2.default.createElement( | |
_Menu2.default, | |
_extends({}, other, { | |
animateOpen: true, | |
initiallyKeyboardFocused: this.state.menuInitiallyKeyboardFocused, | |
onEscKeyDown: this.handleEscKeyDownMenu, | |
onItemTouchTap: this.handleItemTouchTap, | |
style: mergedMenuStyles | |
}), | |
this.props.children | |
); | |
return _react2.default.createElement( | |
'div', | |
{ | |
ref: 'iconMenuContainer', | |
className: className, | |
onMouseDown: onMouseDown, | |
onMouseLeave: onMouseLeave, | |
onMouseEnter: onMouseEnter, | |
onMouseUp: onMouseUp, | |
onTouchTap: onTouchTap, | |
style: prepareStyles(mergedRootStyles) | |
}, | |
iconButton, | |
_react2.default.createElement( | |
_Popover2.default, | |
{ | |
anchorOrigin: anchorOrigin, | |
targetOrigin: targetOrigin, | |
open: open, | |
anchorEl: anchorEl, | |
childContextTypes: this.constructor.childContextTypes, | |
useLayerForClickAway: useLayerForClickAway, | |
onRequestClose: this.handleRequestClose, | |
context: this.context | |
}, | |
menu | |
) | |
); | |
} | |
}]); | |
return IconMenu; | |
}(_react.Component); | |
IconMenu.muiName = 'IconMenu'; | |
IconMenu.propTypes = { | |
/** | |
* This is the point on the icon where the menu | |
* `targetOrigin` will attach. | |
* Options: | |
* vertical: [top, middle, bottom] | |
* horizontal: [left, center, right]. | |
*/ | |
anchorOrigin: _propTypes2.default.origin, | |
/** | |
* Should be used to pass `MenuItem` components. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The CSS class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* This is the `IconButton` to render. This button will open the menu. | |
*/ | |
iconButtonElement: _react.PropTypes.element.isRequired, | |
/** | |
* Override the inline-styles of the underlying icon element. | |
*/ | |
iconStyle: _react.PropTypes.object, | |
/** | |
* Override the inline-styles of the menu element. | |
*/ | |
menuStyle: _react.PropTypes.object, | |
/** | |
* If true, the value can an be array and allow the menu to be a multi-select. | |
*/ | |
multiple: _react.PropTypes.bool, | |
/** | |
* Callback function fired when a menu item is selected with a touch-tap. | |
* | |
* @param {object} event TouchTap event targeting the selected menu item element. | |
* @param {object} child The selected element. | |
*/ | |
onItemTouchTap: _react.PropTypes.func, | |
/** | |
* Callback function fired when the `IconButton` element is focused or blurred by the keyboard. | |
* | |
* @param {object} event `focus` or `blur` event targeting the `IconButton` element. | |
* @param {boolean} keyboardFocused If true, the `IconButton` element is focused. | |
*/ | |
onKeyboardFocus: _react.PropTypes.func, | |
/** | |
* Callback function fired when a mouse button is pressed down on the `IconButton` element. | |
* | |
* @param {object} event `mousedown` event targeting the `IconButton` element. | |
*/ | |
onMouseDown: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse enters the `IconButton` element. | |
* | |
* @param {object} event `mouseenter` event targeting the `IconButton` element. | |
*/ | |
onMouseEnter: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse leaves the `IconButton` element. | |
* | |
* @param {object} event `mouseleave` event targeting the `IconButton` element. | |
*/ | |
onMouseLeave: _react.PropTypes.func, | |
/** | |
* Callback function fired when a mouse button is released on the `IconButton` element. | |
* | |
* @param {object} event `mouseup` event targeting the `IconButton` element. | |
*/ | |
onMouseUp: _react.PropTypes.func, | |
/** | |
* Callback function fired when the `open` state of the menu is requested to be changed. | |
* | |
* @param {boolean} open If true, the menu was requested to be opened. | |
* @param {string} reason The reason for the open or close request. Possible values are | |
* 'keyboard' and 'iconTap' for open requests; 'enter', 'escape', 'itemTap', and 'clickAway' | |
* for close requests. | |
*/ | |
onRequestChange: _react.PropTypes.func, | |
/** | |
* Callback function fired when the `IconButton` element is touch-tapped. | |
* | |
* @param {object} event TouchTap event targeting the `IconButton` element. | |
*/ | |
onTouchTap: _react.PropTypes.func, | |
/** | |
* If true, the `IconMenu` is opened. | |
*/ | |
open: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* This is the point on the menu which will stick to the menu | |
* origin. | |
* Options: | |
* vertical: [top, middle, bottom] | |
* horizontal: [left, center, right]. | |
*/ | |
targetOrigin: _propTypes2.default.origin, | |
/** | |
* Sets the delay in milliseconds before closing the | |
* menu when an item is clicked. | |
* If set to 0 then the auto close functionality | |
* will be disabled. | |
*/ | |
touchTapCloseDelay: _react.PropTypes.number, | |
/** | |
* If true, the popover will render on top of an invisible | |
* layer, which will prevent clicks to the underlying elements. | |
*/ | |
useLayerForClickAway: _react.PropTypes.bool | |
}; | |
IconMenu.defaultProps = { | |
anchorOrigin: { | |
vertical: 'top', | |
horizontal: 'left' | |
}, | |
multiple: false, | |
open: null, | |
onItemTouchTap: function onItemTouchTap() {}, | |
onKeyboardFocus: function onKeyboardFocus() {}, | |
onMouseDown: function onMouseDown() {}, | |
onMouseLeave: function onMouseLeave() {}, | |
onMouseEnter: function onMouseEnter() {}, | |
onMouseUp: function onMouseUp() {}, | |
onTouchTap: function onTouchTap() {}, | |
onRequestChange: function onRequestChange() {}, | |
targetOrigin: { | |
vertical: 'top', | |
horizontal: 'left' | |
}, | |
touchTapCloseDelay: 200, | |
useLayerForClickAway: false | |
}; | |
IconMenu.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = IconMenu; | |
/***/ }, | |
/* 135 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = exports.MenuItem = exports.IconMenu = undefined; | |
var _IconMenu2 = __webpack_require__(134); | |
var _IconMenu3 = _interopRequireDefault(_IconMenu2); | |
var _MenuItem2 = __webpack_require__(37); | |
var _MenuItem3 = _interopRequireDefault(_MenuItem2); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.IconMenu = _IconMenu3.default; | |
exports.MenuItem = _MenuItem3.default; | |
exports.default = _IconMenu3.default; | |
/***/ }, | |
/* 136 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getRelativeValue(value, min, 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; | |
} | |
function getStyles(props, context) { | |
var max = props.max; | |
var min = props.min; | |
var value = props.value; | |
var palette = context.muiTheme.baseTheme.palette; | |
var styles = { | |
root: { | |
position: 'relative', | |
height: 4, | |
display: 'block', | |
width: '100%', | |
backgroundColor: palette.primary3Color, | |
borderRadius: 2, | |
margin: 0, | |
overflow: 'hidden' | |
}, | |
bar: { | |
height: '100%' | |
}, | |
barFragment1: {}, | |
barFragment2: {} | |
}; | |
if (props.mode === 'indeterminate') { | |
styles.barFragment1 = { | |
position: 'absolute', | |
backgroundColor: props.color || palette.primary1Color, | |
top: 0, | |
left: 0, | |
bottom: 0, | |
transition: _transitions2.default.create('all', '840ms', null, 'cubic-bezier(0.650, 0.815, 0.735, 0.395)') | |
}; | |
styles.barFragment2 = { | |
position: 'absolute', | |
backgroundColor: props.color || palette.primary1Color, | |
top: 0, | |
left: 0, | |
bottom: 0, | |
transition: _transitions2.default.create('all', '840ms', null, 'cubic-bezier(0.165, 0.840, 0.440, 1.000)') | |
}; | |
} else { | |
styles.bar.backgroundColor = props.color || palette.primary1Color; | |
styles.bar.transition = _transitions2.default.create('width', '.3s', null, 'linear'); | |
styles.bar.width = getRelativeValue(value, min, max) + '%'; | |
} | |
return styles; | |
} | |
var LinearProgress = function (_Component) { | |
_inherits(LinearProgress, _Component); | |
function LinearProgress() { | |
_classCallCheck(this, LinearProgress); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(LinearProgress).apply(this, arguments)); | |
} | |
_createClass(LinearProgress, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
var _this2 = this; | |
this.timers = {}; | |
this.timers.bar1 = this.barUpdate('bar1', 0, this.refs.bar1, [[-35, 100], [100, -90]]); | |
this.timers.bar2 = setTimeout(function () { | |
_this2.barUpdate('bar2', 0, _this2.refs.bar2, [[-200, 100], [107, -8]]); | |
}, 850); | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
clearTimeout(this.timers.bar1); | |
clearTimeout(this.timers.bar2); | |
} | |
}, { | |
key: 'barUpdate', | |
value: function barUpdate(id, step, barElement, stepValues) { | |
var _this3 = this; | |
if (this.props.mode !== 'indeterminate') return; | |
step = step || 0; | |
step %= 4; | |
var right = this.context.muiTheme.isRtl ? 'left' : 'right'; | |
var left = this.context.muiTheme.isRtl ? 'right' : 'left'; | |
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'; | |
} | |
this.timers[id] = setTimeout(function () { | |
return _this3.barUpdate(id, step + 1, barElement, stepValues); | |
}, 420); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var style = _props.style; | |
var other = _objectWithoutProperties(_props, ['style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), | |
_react2.default.createElement( | |
'div', | |
{ style: prepareStyles(styles.bar) }, | |
_react2.default.createElement('div', { ref: 'bar1', style: prepareStyles(styles.barFragment1) }), | |
_react2.default.createElement('div', { ref: 'bar2', style: prepareStyles(styles.barFragment2) }) | |
) | |
); | |
} | |
}]); | |
return LinearProgress; | |
}(_react.Component); | |
LinearProgress.propTypes = { | |
/** | |
* The mode of show your progress, indeterminate for | |
* when there is no value for progress. | |
*/ | |
color: _react.PropTypes.string, | |
/** | |
* The max value of progress, only works in determinate mode. | |
*/ | |
max: _react.PropTypes.number, | |
/** | |
* The min value of progress, only works in determinate mode. | |
*/ | |
min: _react.PropTypes.number, | |
/** | |
* The mode of show your progress, indeterminate for when | |
* there is no value for progress. | |
*/ | |
mode: _react.PropTypes.oneOf(['determinate', 'indeterminate']), | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The value of progress, only works in determinate mode. | |
*/ | |
value: _react.PropTypes.number | |
}; | |
LinearProgress.defaultProps = { | |
mode: 'indeterminate', | |
value: 0, | |
min: 0, | |
max: 100 | |
}; | |
LinearProgress.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = LinearProgress; | |
/***/ }, | |
/* 137 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _LinearProgress = __webpack_require__(136); | |
var _LinearProgress2 = _interopRequireDefault(_LinearProgress); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _LinearProgress2.default; | |
/***/ }, | |
/* 138 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _List = __webpack_require__(35); | |
var _List2 = _interopRequireDefault(_List); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var NestedList = function (_Component) { | |
_inherits(NestedList, _Component); | |
function NestedList() { | |
_classCallCheck(this, NestedList); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(NestedList).apply(this, arguments)); | |
} | |
_createClass(NestedList, [{ | |
key: 'render', | |
value: 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 _react2.default.createElement( | |
_List2.default, | |
{ style: (0, _simpleAssign2.default)({}, styles.root, style) }, | |
_react2.default.Children.map(children, function (child) { | |
return _react2.default.isValidElement(child) ? _react2.default.cloneElement(child, { | |
nestedLevel: nestedLevel + 1 | |
}) : child; | |
}) | |
); | |
} | |
}]); | |
return NestedList; | |
}(_react.Component); | |
NestedList.propTypes = { | |
children: _react.PropTypes.node, | |
nestedLevel: _react.PropTypes.number, | |
open: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
NestedList.defaultProps = { | |
nestedLevel: 1, | |
open: false | |
}; | |
exports.default = NestedList; | |
/***/ }, | |
/* 139 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = exports.MakeSelectable = exports.ListItem = exports.List = undefined; | |
var _List2 = __webpack_require__(35); | |
var _List3 = _interopRequireDefault(_List2); | |
var _ListItem2 = __webpack_require__(36); | |
var _ListItem3 = _interopRequireDefault(_ListItem2); | |
var _MakeSelectable2 = __webpack_require__(63); | |
var _MakeSelectable3 = _interopRequireDefault(_MakeSelectable2); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.List = _List3.default; | |
exports.ListItem = _ListItem3.default; | |
exports.MakeSelectable = _MakeSelectable3.default; | |
exports.default = _List3.default; | |
/***/ }, | |
/* 140 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _propTypes = __webpack_require__(9); | |
var _propTypes2 = _interopRequireDefault(_propTypes); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var circle = props.circle; | |
var rounded = props.rounded; | |
var transitionEnabled = props.transitionEnabled; | |
var zDepth = props.zDepth; | |
var _context$muiTheme = context.muiTheme; | |
var baseTheme = _context$muiTheme.baseTheme; | |
var paper = _context$muiTheme.paper; | |
return { | |
root: { | |
color: paper.color, | |
backgroundColor: paper.backgroundColor, | |
transition: transitionEnabled && _transitions2.default.easeOut(), | |
boxSizing: 'border-box', | |
fontFamily: baseTheme.fontFamily, | |
WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated) | |
boxShadow: paper.zDepthShadows[zDepth - 1], // No shadow for 0 depth papers | |
borderRadius: circle ? '50%' : rounded ? '2px' : '0px' | |
} | |
}; | |
} | |
var Paper = function (_Component) { | |
_inherits(Paper, _Component); | |
function Paper() { | |
_classCallCheck(this, Paper); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(Paper).apply(this, arguments)); | |
} | |
_createClass(Paper, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var children = _props.children; | |
var style = _props.style; | |
var other = _objectWithoutProperties(_props, ['children', 'style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), | |
children | |
); | |
} | |
}]); | |
return Paper; | |
}(_react.Component); | |
Paper.propTypes = { | |
/** | |
* Children passed into the paper element. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* Set to true to generate a circlular paper container. | |
*/ | |
circle: _react.PropTypes.bool, | |
/** | |
* By default, the paper container will have a border radius. | |
* Set this to false to generate a container with sharp corners. | |
*/ | |
rounded: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* Set to false to disable CSS transitions for the paper element. | |
*/ | |
transitionEnabled: _react.PropTypes.bool, | |
/** | |
* This number represents the zDepth of the paper shadow. | |
*/ | |
zDepth: _propTypes2.default.zDepth | |
}; | |
Paper.defaultProps = { | |
circle: false, | |
rounded: true, | |
transitionEnabled: true, | |
zDepth: 1 | |
}; | |
Paper.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = Paper; | |
/***/ }, | |
/* 141 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _propTypes = __webpack_require__(9); | |
var _propTypes2 = _interopRequireDefault(_propTypes); | |
var _Paper = __webpack_require__(8); | |
var _Paper2 = _interopRequireDefault(_Paper); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context, state) { | |
var targetOrigin = props.targetOrigin; | |
var open = state.open; | |
var muiTheme = context.muiTheme; | |
var horizontal = targetOrigin.horizontal.replace('middle', 'vertical'); | |
return { | |
root: { | |
opacity: open ? 1 : 0, | |
transform: open ? 'scale(1, 1)' : 'scale(0, 0)', | |
transformOrigin: horizontal + ' ' + targetOrigin.vertical, | |
position: 'fixed', | |
zIndex: muiTheme.zIndex.popover, | |
transition: _transitions2.default.easeOut('250ms', ['transform', 'opacity']), | |
maxHeight: '100%' | |
}, | |
horizontal: { | |
maxHeight: '100%', | |
overflowY: 'auto', | |
transform: open ? 'scaleX(1)' : 'scaleX(0)', | |
opacity: open ? 1 : 0, | |
transformOrigin: horizontal + ' ' + targetOrigin.vertical, | |
transition: _transitions2.default.easeOut('250ms', ['transform', 'opacity']) | |
}, | |
vertical: { | |
opacity: open ? 1 : 0, | |
transform: open ? 'scaleY(1)' : 'scaleY(0)', | |
transformOrigin: horizontal + ' ' + targetOrigin.vertical, | |
transition: _transitions2.default.easeOut('500ms', ['transform', 'opacity']) | |
} | |
}; | |
} | |
var PopoverDefaultAnimation = function (_Component) { | |
_inherits(PopoverDefaultAnimation, _Component); | |
function PopoverDefaultAnimation() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, PopoverDefaultAnimation); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(PopoverDefaultAnimation)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
open: false | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(PopoverDefaultAnimation, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
this.setState({ open: true }); // eslint-disable-line react/no-did-mount-set-state | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
this.setState({ | |
open: nextProps.open | |
}); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var className = _props.className; | |
var style = _props.style; | |
var zDepth = _props.zDepth; | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context, this.state); | |
return _react2.default.createElement( | |
_Paper2.default, | |
{ | |
style: (0, _simpleAssign2.default)(styles.root, style), | |
zDepth: zDepth, | |
className: className | |
}, | |
_react2.default.createElement( | |
'div', | |
{ style: prepareStyles(styles.horizontal) }, | |
_react2.default.createElement( | |
'div', | |
{ style: prepareStyles(styles.vertical) }, | |
this.props.children | |
) | |
) | |
); | |
} | |
}]); | |
return PopoverDefaultAnimation; | |
}(_react.Component); | |
PopoverDefaultAnimation.propTypes = { | |
children: _react.PropTypes.node, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
open: _react.PropTypes.bool.isRequired, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
targetOrigin: _propTypes2.default.origin, | |
zDepth: _propTypes2.default.zDepth | |
}; | |
PopoverDefaultAnimation.defaultProps = { | |
style: {}, | |
zDepth: 1 | |
}; | |
PopoverDefaultAnimation.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = PopoverDefaultAnimation; | |
/***/ }, | |
/* 142 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = exports.PopoverAnimationVertical = exports.Popover = undefined; | |
var _Popover2 = __webpack_require__(18); | |
var _Popover3 = _interopRequireDefault(_Popover2); | |
var _PopoverAnimationVertical2 = __webpack_require__(39); | |
var _PopoverAnimationVertical3 = _interopRequireDefault(_PopoverAnimationVertical2); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.Popover = _Popover3.default; | |
exports.PopoverAnimationVertical = _PopoverAnimationVertical3.default; | |
exports.default = _Popover3.default; | |
/***/ }, | |
/* 143 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _EnhancedSwitch = __webpack_require__(42); | |
var _EnhancedSwitch2 = _interopRequireDefault(_EnhancedSwitch); | |
var _radioButtonUnchecked = __webpack_require__(210); | |
var _radioButtonUnchecked2 = _interopRequireDefault(_radioButtonUnchecked); | |
var _radioButtonChecked = __webpack_require__(209); | |
var _radioButtonChecked2 = _interopRequireDefault(_radioButtonChecked); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var radioButton = context.muiTheme.radioButton; | |
return { | |
icon: { | |
height: radioButton.size, | |
width: radioButton.size | |
}, | |
target: { | |
transition: _transitions2.default.easeOut(), | |
position: 'absolute', | |
opacity: 1, | |
transform: 'scale(1)', | |
fill: radioButton.borderColor | |
}, | |
fill: { | |
position: 'absolute', | |
opacity: 1, | |
transform: 'scale(0)', | |
transformOrigin: '50% 50%', | |
transition: _transitions2.default.easeOut(), | |
fill: radioButton.checkedColor | |
}, | |
targetWhenChecked: { | |
opacity: 0, | |
transform: 'scale(0)' | |
}, | |
fillWhenChecked: { | |
opacity: 1, | |
transform: 'scale(1)' | |
}, | |
targetWhenDisabled: { | |
fill: radioButton.disabledColor | |
}, | |
fillWhenDisabled: { | |
fill: radioButton.disabledColor | |
}, | |
label: { | |
color: props.disabled ? radioButton.labelDisabledColor : radioButton.labelColor | |
}, | |
ripple: { | |
color: props.checked ? radioButton.checkedColor : radioButton.borderColor | |
} | |
}; | |
} | |
var RadioButton = function (_Component) { | |
_inherits(RadioButton, _Component); | |
function RadioButton() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, RadioButton); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleStateChange = function () {}, _this.handleSwitch = function (event) { | |
if (_this.props.onCheck) _this.props.onCheck(event, _this.props.value); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
// Only called when selected, not when unselected. | |
_createClass(RadioButton, [{ | |
key: 'isChecked', | |
value: function isChecked() { | |
return this.refs.enhancedSwitch.isSwitched(); | |
} | |
// Use RadioButtonGroup.setSelectedValue(newSelectionValue) to set a | |
// RadioButton's checked value. | |
}, { | |
key: 'setChecked', | |
value: function setChecked(newCheckedValue) { | |
this.refs.enhancedSwitch.setSwitched(newCheckedValue); | |
} | |
}, { | |
key: 'getValue', | |
value: function getValue() { | |
return this.refs.enhancedSwitch.getValue(); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var checkedIcon = _props.checkedIcon; | |
var checked = _props.checked; | |
var iconStyle = _props.iconStyle; | |
var labelStyle = _props.labelStyle; | |
var labelPosition = _props.labelPosition; | |
var onCheck = _props.onCheck; | |
var // eslint-disable-line no-unused-vars | |
uncheckedIcon = _props.uncheckedIcon; | |
var disabled = _props.disabled; | |
var other = _objectWithoutProperties(_props, ['checkedIcon', 'checked', 'iconStyle', 'labelStyle', 'labelPosition', 'onCheck', 'uncheckedIcon', 'disabled']); | |
var styles = getStyles(this.props, this.context); | |
var uncheckedStyles = (0, _simpleAssign2.default)(styles.target, checked && styles.targetWhenChecked, iconStyle, disabled && styles.targetWhenDisabled); | |
var checkedStyles = (0, _simpleAssign2.default)(styles.fill, checked && styles.fillWhenChecked, iconStyle, disabled && styles.fillWhenDisabled); | |
var uncheckedElement = _react2.default.isValidElement(uncheckedIcon) ? _react2.default.cloneElement(uncheckedIcon, { | |
style: (0, _simpleAssign2.default)(uncheckedStyles, uncheckedIcon.props.style) | |
}) : _react2.default.createElement(_radioButtonUnchecked2.default, { style: uncheckedStyles }); | |
var checkedElement = _react2.default.isValidElement(checkedIcon) ? _react2.default.cloneElement(checkedIcon, { | |
style: (0, _simpleAssign2.default)(checkedStyles, checkedIcon.props.style) | |
}) : _react2.default.createElement(_radioButtonChecked2.default, { style: checkedStyles }); | |
var mergedIconStyle = (0, _simpleAssign2.default)(styles.icon, iconStyle); | |
var mergedLabelStyle = (0, _simpleAssign2.default)(styles.label, labelStyle); | |
return _react2.default.createElement(_EnhancedSwitch2.default, _extends({}, other, { | |
ref: 'enhancedSwitch', | |
inputType: 'radio', | |
checked: checked, | |
switched: checked, | |
disabled: disabled, | |
rippleColor: styles.ripple.color, | |
iconStyle: mergedIconStyle, | |
labelStyle: mergedLabelStyle, | |
labelPosition: labelPosition, | |
onParentShouldUpdate: this.handleStateChange, | |
onSwitch: this.handleSwitch, | |
switchElement: _react2.default.createElement( | |
'div', | |
null, | |
uncheckedElement, | |
checkedElement | |
) | |
})); | |
} | |
}]); | |
return RadioButton; | |
}(_react.Component); | |
RadioButton.propTypes = { | |
/** | |
* @ignore | |
* checked if true | |
* Used internally by `RadioButtonGroup`. | |
*/ | |
checked: _react.PropTypes.bool, | |
/** | |
* The icon element to show when the radio button is checked. | |
*/ | |
checkedIcon: _react.PropTypes.element, | |
/** | |
* If true, the radio button is disabled. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the icon element. | |
*/ | |
iconStyle: _react.PropTypes.object, | |
/** | |
* Override the inline-styles of the input element. | |
*/ | |
inputStyle: _react.PropTypes.object, | |
/** | |
* @ignore | |
* Used internally by `RadioButtonGroup`. Use the `labelPosition` property of `RadioButtonGroup` instead. | |
* Where the label will be placed next to the radio button. | |
*/ | |
labelPosition: _react.PropTypes.oneOf(['left', 'right']), | |
/** | |
* Override the inline-styles of the label element. | |
*/ | |
labelStyle: _react.PropTypes.object, | |
/** | |
* @ignore | |
* Callback function fired when the radio button is checked. Note that this | |
* function will not be called if the radio button is part of a | |
* radio button group: in this case, use the `onChange` property of | |
* `RadioButtonGroup`. | |
* | |
* @param {object} event `change` event targeting the element. | |
* @param {string} value The element's `value`. | |
*/ | |
onCheck: _react.PropTypes.func, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The icon element to show when the radio button is unchecked. | |
*/ | |
uncheckedIcon: _react.PropTypes.element, | |
/** | |
* The value of the radio button. | |
*/ | |
value: _react.PropTypes.string | |
}; | |
RadioButton.defaultProps = { | |
checked: false, | |
disabled: false, | |
labelPosition: 'right' | |
}; | |
RadioButton.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = RadioButton; | |
/***/ }, | |
/* 144 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _colorManipulator = __webpack_require__(12); | |
var _childUtils = __webpack_require__(24); | |
var _EnhancedButton = __webpack_require__(11); | |
var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); | |
var _Paper = __webpack_require__(8); | |
var _Paper2 = _interopRequireDefault(_Paper); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function validateLabel(props, propName, componentName) { | |
if (!props.children && !props.label && !props.icon) { | |
return new Error('Required prop label or children or icon was not specified in ' + componentName + '.'); | |
} | |
} | |
function getStyles(props, context, state) { | |
var _context$muiTheme = context.muiTheme; | |
var baseTheme = _context$muiTheme.baseTheme; | |
var button = _context$muiTheme.button; | |
var raisedButton = _context$muiTheme.raisedButton; | |
var disabled = props.disabled; | |
var disabledBackgroundColor = props.disabledBackgroundColor; | |
var disabledLabelColor = props.disabledLabelColor; | |
var fullWidth = props.fullWidth; | |
var icon = props.icon; | |
var label = props.label; | |
var labelPosition = props.labelPosition; | |
var primary = props.primary; | |
var secondary = props.secondary; | |
var style = props.style; | |
var amount = primary || secondary ? 0.4 : 0.08; | |
var backgroundColor = raisedButton.color; | |
var labelColor = raisedButton.textColor; | |
if (disabled) { | |
backgroundColor = disabledBackgroundColor || raisedButton.disabledColor; | |
labelColor = disabledLabelColor || raisedButton.disabledTextColor; | |
} else if (primary) { | |
backgroundColor = raisedButton.primaryColor; | |
labelColor = raisedButton.primaryTextColor; | |
} else if (secondary) { | |
backgroundColor = raisedButton.secondaryColor; | |
labelColor = raisedButton.secondaryTextColor; | |
} else { | |
if (props.backgroundColor) { | |
backgroundColor = props.backgroundColor; | |
} | |
if (props.labelColor) { | |
labelColor = props.labelColor; | |
} | |
} | |
var buttonHeight = style && style.height || button.height; | |
var borderRadius = 2; | |
return { | |
root: { | |
display: 'inline-block', | |
transition: _transitions2.default.easeOut() | |
}, | |
button: { | |
position: 'relative', | |
minWidth: fullWidth ? '100%' : button.minWidth, | |
height: buttonHeight, | |
lineHeight: buttonHeight + 'px', | |
width: '100%', | |
padding: 0, | |
borderRadius: borderRadius, | |
transition: _transitions2.default.easeOut(), | |
backgroundColor: backgroundColor, | |
// That's the default value for a button but not a link | |
textAlign: 'center' | |
}, | |
label: { | |
position: 'relative', | |
opacity: 1, | |
fontSize: raisedButton.fontSize, | |
letterSpacing: 0, | |
textTransform: raisedButton.textTransform || button.textTransform || 'uppercase', | |
fontWeight: raisedButton.fontWeight, | |
margin: 0, | |
userSelect: 'none', | |
paddingLeft: icon && labelPosition !== 'before' ? 8 : baseTheme.spacing.desktopGutterLess, | |
paddingRight: icon && labelPosition === 'before' ? 8 : baseTheme.spacing.desktopGutterLess, | |
color: labelColor | |
}, | |
icon: { | |
verticalAlign: 'middle', | |
marginLeft: label && labelPosition !== 'before' ? 12 : 0, | |
marginRight: label && labelPosition === 'before' ? 12 : 0 | |
}, | |
overlay: { | |
height: buttonHeight, | |
borderRadius: borderRadius, | |
backgroundColor: (state.keyboardFocused || state.hovered) && !disabled && (0, _colorManipulator.fade)(labelColor, amount), | |
transition: _transitions2.default.easeOut(), | |
top: 0 | |
}, | |
ripple: { | |
color: labelColor, | |
opacity: !(primary || secondary) ? 0.1 : 0.16 | |
} | |
}; | |
} | |
var RaisedButton = function (_Component) { | |
_inherits(RaisedButton, _Component); | |
function RaisedButton() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, RaisedButton); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RaisedButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
hovered: false, | |
keyboardFocused: false, | |
touched: false, | |
initialZDepth: 0, | |
zDepth: 0 | |
}, _this.handleMouseDown = function (event) { | |
// only listen to left clicks | |
if (event.button === 0) { | |
_this.setState({ | |
zDepth: _this.state.initialZDepth + 1 | |
}); | |
} | |
if (_this.props.onMouseDown) { | |
_this.props.onMouseDown(event); | |
} | |
}, _this.handleMouseUp = function (event) { | |
_this.setState({ | |
zDepth: _this.state.initialZDepth | |
}); | |
if (_this.props.onMouseUp) { | |
_this.props.onMouseUp(event); | |
} | |
}, _this.handleMouseLeave = function (event) { | |
if (!_this.state.keyboardFocused) { | |
_this.setState({ | |
zDepth: _this.state.initialZDepth, | |
hovered: false | |
}); | |
} | |
if (_this.props.onMouseLeave) { | |
_this.props.onMouseLeave(event); | |
} | |
}, _this.handleMouseEnter = function (event) { | |
if (!_this.state.keyboardFocused && !_this.state.touched) { | |
_this.setState({ hovered: true }); | |
} | |
if (_this.props.onMouseEnter) { | |
_this.props.onMouseEnter(event); | |
} | |
}, _this.handleTouchStart = function (event) { | |
_this.setState({ | |
touched: true, | |
zDepth: _this.state.initialZDepth + 1 | |
}); | |
if (_this.props.onTouchStart) { | |
_this.props.onTouchStart(event); | |
} | |
}, _this.handleTouchEnd = function (event) { | |
_this.setState({ | |
zDepth: _this.state.initialZDepth | |
}); | |
if (_this.props.onTouchEnd) { | |
_this.props.onTouchEnd(event); | |
} | |
}, _this.handleKeyboardFocus = function (event, keyboardFocused) { | |
var zDepth = keyboardFocused && !_this.props.disabled ? _this.state.initialZDepth + 1 : _this.state.initialZDepth; | |
_this.setState({ | |
zDepth: zDepth, | |
keyboardFocused: keyboardFocused | |
}); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(RaisedButton, [{ | |
key: 'componentWillMount', | |
value: function componentWillMount() { | |
var zDepth = this.props.disabled ? 0 : 1; | |
this.setState({ | |
zDepth: zDepth, | |
initialZDepth: zDepth | |
}); | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
var zDepth = nextProps.disabled ? 0 : 1; | |
this.setState({ | |
zDepth: zDepth, | |
initialZDepth: zDepth | |
}); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var children = _props.children; | |
var className = _props.className; | |
var disabled = _props.disabled; | |
var icon = _props.icon; | |
var label = _props.label; | |
var labelPosition = _props.labelPosition; | |
var labelStyle = _props.labelStyle; | |
var primary = _props.primary; | |
var // eslint-disable-line no-unused-vars | |
rippleStyle = _props.rippleStyle; | |
var secondary = _props.secondary; | |
var other = _objectWithoutProperties(_props, ['children', 'className', 'disabled', 'icon', 'label', 'labelPosition', 'labelStyle', 'primary', 'rippleStyle', 'secondary']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context, this.state); | |
var mergedRippleStyles = (0, _simpleAssign2.default)({}, styles.ripple, rippleStyle); | |
var buttonEventHandlers = disabled ? {} : { | |
onMouseDown: this.handleMouseDown, | |
onMouseUp: this.handleMouseUp, | |
onMouseLeave: this.handleMouseLeave, | |
onMouseEnter: this.handleMouseEnter, | |
onTouchStart: this.handleTouchStart, | |
onTouchEnd: this.handleTouchEnd, | |
onKeyboardFocus: this.handleKeyboardFocus | |
}; | |
var labelElement = label && _react2.default.createElement( | |
'span', | |
{ style: prepareStyles((0, _simpleAssign2.default)(styles.label, labelStyle)) }, | |
label | |
); | |
var iconCloned = icon && _react2.default.cloneElement(icon, { | |
color: styles.label.color, | |
style: styles.icon | |
}); | |
// Place label before or after children. | |
var childrenFragment = labelPosition === 'before' ? { | |
labelElement: labelElement, | |
iconCloned: iconCloned, | |
children: children | |
} : { | |
children: children, | |
iconCloned: iconCloned, | |
labelElement: labelElement | |
}; | |
var enhancedButtonChildren = (0, _childUtils.createChildFragment)(childrenFragment); | |
return _react2.default.createElement( | |
_Paper2.default, | |
{ | |
className: className, | |
style: (0, _simpleAssign2.default)(styles.root, this.props.style), | |
zDepth: this.state.zDepth | |
}, | |
_react2.default.createElement( | |
_EnhancedButton2.default, | |
_extends({}, other, buttonEventHandlers, { | |
ref: 'container', | |
disabled: disabled, | |
style: styles.button, | |
focusRippleColor: mergedRippleStyles.color, | |
touchRippleColor: mergedRippleStyles.color, | |
focusRippleOpacity: mergedRippleStyles.opacity, | |
touchRippleOpacity: mergedRippleStyles.opacity | |
}), | |
_react2.default.createElement( | |
'div', | |
{ | |
ref: 'overlay', | |
style: prepareStyles(styles.overlay) | |
}, | |
enhancedButtonChildren | |
) | |
) | |
); | |
} | |
}]); | |
return RaisedButton; | |
}(_react.Component); | |
RaisedButton.muiName = 'RaisedButton'; | |
RaisedButton.propTypes = { | |
/** | |
* Override the default background color for the button, | |
* but not the default disabled background color | |
* (use `disabledBackgroundColor` for this). | |
*/ | |
backgroundColor: _react.PropTypes.string, | |
/** | |
* The content of the button. | |
* If a label is provided via the `label` prop, the text within the label | |
* will be displayed in addition to the content provided here. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The CSS class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* If true, the button will be disabled. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* Override the default background color for the button | |
* when it is disabled. | |
*/ | |
disabledBackgroundColor: _react.PropTypes.string, | |
/** | |
* The color of the button's label when the button is disabled. | |
*/ | |
disabledLabelColor: _react.PropTypes.string, | |
/** | |
* If true, the button will take up the full width of its container. | |
*/ | |
fullWidth: _react.PropTypes.bool, | |
/** | |
* The URL to link to when the button is clicked. | |
*/ | |
href: _react.PropTypes.string, | |
/** | |
* An icon to be displayed within the button. | |
*/ | |
icon: _react.PropTypes.node, | |
/** | |
* The label to be displayed within the button. | |
* If content is provided via the `children` prop, that content will be | |
* displayed in addition to the label provided here. | |
*/ | |
label: validateLabel, | |
/** | |
* The color of the button's label. | |
*/ | |
labelColor: _react.PropTypes.string, | |
/** | |
* The position of the button's label relative to the button's `children`. | |
*/ | |
labelPosition: _react.PropTypes.oneOf(['before', 'after']), | |
/** | |
* Override the inline-styles of the button's label element. | |
*/ | |
labelStyle: _react.PropTypes.object, | |
/** | |
* Callback function fired when a mouse button is pressed down on | |
* the element. | |
* | |
* @param {object} event `mousedown` event targeting the element. | |
*/ | |
onMouseDown: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse enters the element. | |
* | |
* @param {object} event `mouseenter` event targeting the element. | |
*/ | |
onMouseEnter: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse leaves the element. | |
* | |
* @param {object} event `mouseleave` event targeting the element. | |
*/ | |
onMouseLeave: _react.PropTypes.func, | |
/** | |
* Callback function fired when a mouse button is released on the element. | |
* | |
* @param {object} event `mouseup` event targeting the element. | |
*/ | |
onMouseUp: _react.PropTypes.func, | |
/** | |
* Callback function fired when a touch point is removed from the element. | |
* | |
* @param {object} event `touchend` event targeting the element. | |
*/ | |
onTouchEnd: _react.PropTypes.func, | |
/** | |
* Callback function fired when the element is touched. | |
* | |
* @param {object} event `touchstart` event targeting the element. | |
*/ | |
onTouchStart: _react.PropTypes.func, | |
/** | |
* If true, the button will use the theme's primary color. | |
*/ | |
primary: _react.PropTypes.bool, | |
/** | |
* Override the inline style of the ripple element. | |
*/ | |
rippleStyle: _react.PropTypes.object, | |
/** | |
* If true, the button will use the theme's secondary color. | |
* If both `secondary` and `primary` are true, the button will use | |
* the theme's primary color. | |
*/ | |
secondary: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
RaisedButton.defaultProps = { | |
disabled: false, | |
labelPosition: 'after', | |
fullWidth: false, | |
primary: false, | |
secondary: false | |
}; | |
RaisedButton.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = RaisedButton; | |
/***/ }, | |
/* 145 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _RaisedButton = __webpack_require__(144); | |
var _RaisedButton2 = _interopRequireDefault(_RaisedButton); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _RaisedButton2.default; | |
/***/ }, | |
/* 146 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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; }; | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _autoPrefix = __webpack_require__(14); | |
var _autoPrefix2 = _interopRequireDefault(_autoPrefix); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _Paper = __webpack_require__(8); | |
var _Paper2 = _interopRequireDefault(_Paper); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var VIEWBOX_SIZE = 32; | |
function getStyles(props) { | |
var padding = props.size * 0.1; // same implementation of `this.getPaddingSize()` | |
return { | |
root: { | |
position: 'absolute', | |
zIndex: 2, | |
width: props.size, | |
height: props.size, | |
padding: padding, | |
top: -10000, | |
left: -10000, | |
transform: 'translate3d(' + (10000 + props.left) + 'px, ' + (10000 + props.top) + 'px, 0)', | |
opacity: props.status === 'hide' ? 0 : 1, | |
transition: props.status === 'hide' ? _transitions2.default.create('all', '.3s', 'ease-out') : 'none' | |
} | |
}; | |
} | |
var RefreshIndicator = function (_Component) { | |
_inherits(RefreshIndicator, _Component); | |
function RefreshIndicator() { | |
_classCallCheck(this, RefreshIndicator); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(RefreshIndicator).apply(this, arguments)); | |
} | |
_createClass(RefreshIndicator, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
this.scalePath(this.refs.path, 0); | |
this.rotateWrapper(this.refs.wrapper); | |
} | |
}, { | |
key: 'componentDidUpdate', | |
value: function componentDidUpdate() { | |
clearTimeout(this.scalePathTimer); | |
clearTimeout(this.rotateWrapperTimer); | |
clearTimeout(this.rotateWrapperSecondTimer); | |
this.scalePath(this.refs.path, 0); | |
this.rotateWrapper(this.refs.wrapper); | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
clearTimeout(this.scalePathTimer); | |
clearTimeout(this.rotateWrapperTimer); | |
clearTimeout(this.rotateWrapperSecondTimer); | |
} | |
}, { | |
key: 'renderChildren', | |
value: function renderChildren() { | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
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: prepareStyles({ | |
transition: _transitions2.default.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: prepareStyles((0, _simpleAssign2.default)(circleStyle.style, { | |
transition: _transitions2.default.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: prepareStyles(_circleStyle.style) | |
}, _circleStyle.attr)), | |
_react2.default.createElement('polygon', _extends({ | |
style: prepareStyles(polygonStyle.style) | |
}, polygonStyle.attr)) | |
); | |
} | |
return childrenCmp; | |
} | |
}, { | |
key: 'getTheme', | |
value: function getTheme() { | |
return this.context.muiTheme.refreshIndicator; | |
} | |
}, { | |
key: 'getPaddingSize', | |
value: function getPaddingSize() { | |
var padding = this.props.size * 0.1; | |
return padding; | |
} | |
}, { | |
key: 'getPaperSize', | |
value: function getPaperSize() { | |
return this.props.size - this.getPaddingSize() * 2; | |
} | |
}, { | |
key: 'getCircleAttr', | |
value: function getCircleAttr() { | |
return { | |
radiu: VIEWBOX_SIZE / 2 - 5, | |
originX: VIEWBOX_SIZE / 2, | |
originY: VIEWBOX_SIZE / 2, | |
strokeWidth: 3 | |
}; | |
} | |
}, { | |
key: 'getArcDeg', | |
value: function getArcDeg() { | |
var p = this.props.percentage / 100; | |
var beginDeg = p * 120; | |
var endDeg = p * 410; | |
return [beginDeg, endDeg]; | |
} | |
}, { | |
key: 'getFactor', | |
value: function getFactor() { | |
var p = this.props.percentage / 100; | |
var p1 = Math.min(1, p / 0.4); | |
return p1; | |
} | |
}, { | |
key: 'getCircleStyle', | |
value: 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 _getArcDeg = this.getArcDeg(); | |
var _getArcDeg2 = _slicedToArray(_getArcDeg, 2); | |
var beginDeg = _getArcDeg2[0]; | |
var endDeg = _getArcDeg2[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 ? this.props.loadingColor || theme.loadingStrokeColor : this.props.color || theme.strokeColor, | |
strokeLinecap: 'round', | |
opacity: p1, | |
strokeWidth: circle.strokeWidth * p1, | |
fill: 'none' | |
}, | |
attr: { | |
cx: circle.originX, | |
cy: circle.originY, | |
r: circle.radiu | |
} | |
}; | |
} | |
}, { | |
key: 'getPolygonStyle', | |
value: 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 _getArcDeg4 = _slicedToArray(_getArcDeg3, 2); | |
var endDeg = _getArcDeg4[1]; | |
var theme = this.getTheme(); | |
return { | |
style: { | |
fill: this.props.percentage === 100 ? this.props.loadingColor || theme.loadingStrokeColor : this.props.color || theme.strokeColor, | |
transform: 'rotate(' + endDeg + 'deg)', | |
transformOrigin: circle.originX + 'px ' + circle.originY + 'px', | |
opacity: p1 | |
}, | |
attr: { | |
points: trianglePath | |
} | |
}; | |
} | |
}, { | |
key: 'scalePath', | |
value: function scalePath(path, step) { | |
var _this2 = this; | |
if (this.props.status !== 'loading') return; | |
var currStep = (step || 0) % 3; | |
var circle = this.getCircleAttr(); | |
var perimeter = Math.PI * 2 * circle.radiu; | |
var arcLen = perimeter * 0.64; | |
var strokeDasharray = void 0; | |
var strokeDashoffset = void 0; | |
var transitionDuration = void 0; | |
if (currStep === 0) { | |
strokeDasharray = '1, 200'; | |
strokeDashoffset = 0; | |
transitionDuration = '0ms'; | |
} else if (currStep === 1) { | |
strokeDasharray = arcLen + ', 200'; | |
strokeDashoffset = -15; | |
transitionDuration = '750ms'; | |
} else { | |
strokeDasharray = arcLen + ', 200'; | |
strokeDashoffset = -(perimeter - 1); | |
transitionDuration = '850ms'; | |
} | |
_autoPrefix2.default.set(path.style, 'strokeDasharray', strokeDasharray); | |
_autoPrefix2.default.set(path.style, 'strokeDashoffset', strokeDashoffset); | |
_autoPrefix2.default.set(path.style, 'transitionDuration', transitionDuration); | |
this.scalePathTimer = setTimeout(function () { | |
return _this2.scalePath(path, currStep + 1); | |
}, currStep ? 750 : 250); | |
} | |
}, { | |
key: 'rotateWrapper', | |
value: function rotateWrapper(wrapper) { | |
var _this3 = this; | |
if (this.props.status !== 'loading') return; | |
_autoPrefix2.default.set(wrapper.style, 'transform', null); | |
_autoPrefix2.default.set(wrapper.style, 'transform', 'rotate(0deg)'); | |
_autoPrefix2.default.set(wrapper.style, 'transitionDuration', '0ms'); | |
this.rotateWrapperSecondTimer = setTimeout(function () { | |
_autoPrefix2.default.set(wrapper.style, 'transform', 'rotate(1800deg)'); | |
_autoPrefix2.default.set(wrapper.style, 'transitionDuration', '10s'); | |
_autoPrefix2.default.set(wrapper.style, 'transitionTimingFunction', 'linear'); | |
}, 50); | |
this.rotateWrapperTimer = setTimeout(function () { | |
return _this3.rotateWrapper(wrapper); | |
}, 10050); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var style = this.props.style; | |
var styles = getStyles(this.props, this.context); | |
return _react2.default.createElement( | |
_Paper2.default, | |
{ | |
circle: true, | |
style: (0, _simpleAssign2.default)(styles.root, style), | |
ref: 'indicatorCt' | |
}, | |
this.renderChildren() | |
); | |
} | |
}]); | |
return RefreshIndicator; | |
}(_react.Component); | |
RefreshIndicator.propTypes = { | |
/** | |
* Override the theme's color of the indicator while it's status is | |
* "ready" and it's percentage is less than 100. | |
*/ | |
color: _react.PropTypes.string, | |
/** | |
* The absolute left position of the indicator in pixels. | |
*/ | |
left: _react.PropTypes.number.isRequired, | |
/** | |
* Override the theme's color of the indicator while | |
* it's status is "loading" or when it's percentage is 100. | |
*/ | |
loadingColor: _react.PropTypes.string, | |
/** | |
* The confirmation progress to fetch data. Max value is 100. | |
*/ | |
percentage: _react.PropTypes.number, | |
/** | |
* Size in pixels. | |
*/ | |
size: _react.PropTypes.number, | |
/** | |
* The display status of the indicator. If the status is | |
* "ready", the indicator will display the ready state | |
* arrow. If the status is "loading", it will display | |
* the loading progress indicator. If the status is "hide", | |
* the indicator will be hidden. | |
*/ | |
status: _react.PropTypes.oneOf(['ready', 'loading', 'hide']), | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The absolute top position of the indicator in pixels. | |
*/ | |
top: _react.PropTypes.number.isRequired | |
}; | |
RefreshIndicator.defaultProps = { | |
percentage: 0, | |
size: 40, | |
status: 'hide' | |
}; | |
RefreshIndicator.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = RefreshIndicator; | |
/***/ }, | |
/* 147 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _RefreshIndicator = __webpack_require__(146); | |
var _RefreshIndicator2 = _interopRequireDefault(_RefreshIndicator); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _RefreshIndicator2.default; | |
/***/ }, | |
/* 148 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _TextField = __webpack_require__(21); | |
var _TextField2 = _interopRequireDefault(_TextField); | |
var _DropDownMenu = __webpack_require__(61); | |
var _DropDownMenu2 = _interopRequireDefault(_DropDownMenu); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props) { | |
return { | |
label: { | |
paddingLeft: 0, | |
top: props.floatingLabelText ? 6 : -4 | |
}, | |
icon: { | |
right: 0, | |
top: props.floatingLabelText ? 22 : 14 | |
}, | |
hideDropDownUnderline: { | |
borderTop: 'none' | |
} | |
}; | |
} | |
var SelectField = function (_Component) { | |
_inherits(SelectField, _Component); | |
function SelectField() { | |
_classCallCheck(this, SelectField); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(SelectField).apply(this, arguments)); | |
} | |
_createClass(SelectField, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var autoWidth = _props.autoWidth; | |
var children = _props.children; | |
var style = _props.style; | |
var labelStyle = _props.labelStyle; | |
var iconStyle = _props.iconStyle; | |
var id = _props.id; | |
var underlineDisabledStyle = _props.underlineDisabledStyle; | |
var underlineFocusStyle = _props.underlineFocusStyle; | |
var underlineStyle = _props.underlineStyle; | |
var errorStyle = _props.errorStyle; | |
var selectFieldRoot = _props.selectFieldRoot; | |
var disabled = _props.disabled; | |
var floatingLabelText = _props.floatingLabelText; | |
var floatingLabelStyle = _props.floatingLabelStyle; | |
var hintStyle = _props.hintStyle; | |
var hintText = _props.hintText; | |
var fullWidth = _props.fullWidth; | |
var errorText = _props.errorText; | |
var onFocus = _props.onFocus; | |
var onBlur = _props.onBlur; | |
var onChange = _props.onChange; | |
var value = _props.value; | |
var other = _objectWithoutProperties(_props, ['autoWidth', 'children', 'style', 'labelStyle', 'iconStyle', 'id', 'underlineDisabledStyle', 'underlineFocusStyle', 'underlineStyle', 'errorStyle', 'selectFieldRoot', 'disabled', 'floatingLabelText', 'floatingLabelStyle', 'hintStyle', 'hintText', 'fullWidth', 'errorText', 'onFocus', 'onBlur', 'onChange', 'value']); | |
var styles = getStyles(this.props, this.context); | |
return _react2.default.createElement( | |
_TextField2.default, | |
{ | |
style: style, | |
floatingLabelText: floatingLabelText, | |
floatingLabelStyle: floatingLabelStyle, | |
hintStyle: hintStyle, | |
hintText: !hintText && !floatingLabelText ? ' ' : hintText, | |
fullWidth: fullWidth, | |
errorText: errorText, | |
underlineStyle: underlineStyle, | |
errorStyle: errorStyle, | |
onFocus: onFocus, | |
onBlur: onBlur, | |
id: id, | |
underlineDisabledStyle: underlineDisabledStyle, | |
underlineFocusStyle: underlineFocusStyle | |
}, | |
_react2.default.createElement( | |
_DropDownMenu2.default, | |
_extends({ | |
disabled: disabled, | |
style: selectFieldRoot, | |
labelStyle: (0, _simpleAssign2.default)(styles.label, labelStyle), | |
iconStyle: (0, _simpleAssign2.default)(styles.icon, iconStyle), | |
underlineStyle: styles.hideDropDownUnderline, | |
autoWidth: autoWidth, | |
value: value, | |
onChange: onChange | |
}, other), | |
children | |
) | |
); | |
} | |
}]); | |
return SelectField; | |
}(_react.Component); | |
SelectField.propTypes = { | |
/** | |
* If true, the width will automatically be set according to the | |
* items inside the menu. | |
* To control the width in CSS instead, leave this prop set to `false`. | |
*/ | |
autoWidth: _react.PropTypes.bool, | |
/** | |
* The `MenuItem` elements to populate the select field with. | |
* If the menu items have a `label` prop, that value will | |
* represent the selected menu item in the rendered select field. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* If true, the select field will be disabled. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the error element. | |
*/ | |
errorStyle: _react.PropTypes.object, | |
/** | |
* The error content to display. | |
*/ | |
errorText: _react.PropTypes.node, | |
/** | |
* Override the inline-styles of the floating label. | |
*/ | |
floatingLabelStyle: _react.PropTypes.object, | |
/** | |
* The content of the floating label. | |
*/ | |
floatingLabelText: _react.PropTypes.node, | |
/** | |
* If true, the select field will take up the full width of its container. | |
*/ | |
fullWidth: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the hint element. | |
*/ | |
hintStyle: _react.PropTypes.object, | |
/** | |
* The hint content to display. | |
*/ | |
hintText: _react.PropTypes.node, | |
/** | |
* Override the inline-styles of the icon element. | |
*/ | |
iconStyle: _react.PropTypes.object, | |
/** | |
* The id prop for the text field. | |
*/ | |
id: _react.PropTypes.string, | |
/** | |
* Override the label style when the select field is inactive. | |
*/ | |
labelStyle: _react.PropTypes.object, | |
/** | |
* Callback function fired when the select field loses focus. | |
* | |
* @param {object} event `blur` event targeting the select field. | |
*/ | |
onBlur: _react.PropTypes.func, | |
/** | |
* Callback function fired when a menu item is selected. | |
* | |
* @param {object} event TouchTap event targeting the menu item | |
* that was selected. | |
* @param {number} key The index of the selected menu item. | |
* @param {any} payload The `value` prop of the selected menu item. | |
*/ | |
onChange: _react.PropTypes.func, | |
/** | |
* Callback function fired when the select field gains focus. | |
* | |
* @param {object} event `focus` event targeting the select field. | |
*/ | |
onFocus: _react.PropTypes.func, | |
/** | |
* Override the inline-styles of the underlying `DropDownMenu` element. | |
*/ | |
selectFieldRoot: _react.PropTypes.object, // Must be changed! | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* Override the inline-styles of the underline element when the select | |
* field is disabled. | |
*/ | |
underlineDisabledStyle: _react.PropTypes.object, | |
/** | |
* Override the inline-styles of the underline element when the select field | |
* is focused. | |
*/ | |
underlineFocusStyle: _react.PropTypes.object, | |
/** | |
* Override the inline-styles of the underline element. | |
*/ | |
underlineStyle: _react.PropTypes.object, | |
/** | |
* The value that is currently selected. | |
*/ | |
value: _react.PropTypes.any | |
}; | |
SelectField.defaultProps = { | |
autoWidth: false, | |
disabled: false, | |
fullWidth: false | |
}; | |
SelectField.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = SelectField; | |
/***/ }, | |
/* 149 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _SelectField = __webpack_require__(148); | |
var _SelectField2 = _interopRequireDefault(_SelectField); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _SelectField2.default; | |
/***/ }, | |
/* 150 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _keycode = __webpack_require__(10); | |
var _keycode2 = _interopRequireDefault(_keycode); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _FocusRipple = __webpack_require__(43); | |
var _FocusRipple2 = _interopRequireDefault(_FocusRipple); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
/** | |
* 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 getStyles = function getStyles(props, context, state) { | |
var slider = context.muiTheme.slider; | |
var fillGutter = slider.handleSize / 2; | |
var disabledGutter = slider.trackSize + slider.handleSizeDisabled / 2; | |
var calcDisabledSpacing = props.disabled ? ' - ' + disabledGutter + 'px' : ''; | |
var styles = { | |
slider: { | |
touchCallout: 'none', | |
userSelect: 'none', | |
cursor: 'default', | |
height: slider.handleSizeActive, | |
position: 'relative', | |
marginTop: 24, | |
marginBottom: 48 | |
}, | |
track: { | |
position: 'absolute', | |
top: (slider.handleSizeActive - slider.trackSize) / 2, | |
left: 0, | |
width: '100%', | |
height: slider.trackSize | |
}, | |
filledAndRemaining: { | |
position: 'absolute', | |
top: 0, | |
height: '100%', | |
transition: _transitions2.default.easeOut(null, 'margin') | |
}, | |
handle: { | |
boxSizing: 'border-box', | |
position: 'absolute', | |
cursor: 'pointer', | |
pointerEvents: 'inherit', | |
top: 0, | |
left: state.percent === 0 ? '0%' : state.percent * 100 + '%', | |
zIndex: 1, | |
margin: slider.trackSize / 2 + 'px 0 0 0', | |
width: slider.handleSize, | |
height: slider.handleSize, | |
backgroundColor: slider.selectionColor, | |
backgroundClip: 'padding-box', | |
border: '0px solid transparent', | |
borderRadius: '50%', | |
transform: 'translate(-50%, -50%)', | |
transition: _transitions2.default.easeOut('450ms', 'background') + ', ' + _transitions2.default.easeOut('450ms', 'border-color') + ', ' + _transitions2.default.easeOut('450ms', 'width') + ', ' + _transitions2.default.easeOut('450ms', 'height'), | |
overflow: 'visible', | |
outline: 'none' | |
}, | |
handleWhenDisabled: { | |
boxSizing: 'content-box', | |
cursor: 'not-allowed', | |
backgroundColor: slider.trackColor, | |
width: slider.handleSizeDisabled, | |
height: slider.handleSizeDisabled, | |
border: 'none' | |
}, | |
handleWhenPercentZero: { | |
border: slider.trackSize + 'px solid ' + slider.handleColorZero, | |
backgroundColor: slider.handleFillColor, | |
boxShadow: 'none' | |
}, | |
handleWhenPercentZeroAndDisabled: { | |
cursor: 'not-allowed', | |
width: slider.handleSizeDisabled, | |
height: slider.handleSizeDisabled | |
}, | |
handleWhenPercentZeroAndFocused: { | |
border: slider.trackSize + 'px solid ' + slider.trackColorSelected | |
}, | |
handleWhenActive: { | |
width: slider.handleSizeActive, | |
height: slider.handleSizeActive | |
}, | |
ripple: { | |
height: slider.handleSize, | |
width: slider.handleSize, | |
overflow: 'visible' | |
}, | |
rippleWhenPercentZero: { | |
top: -slider.trackSize, | |
left: -slider.trackSize | |
}, | |
rippleInner: { | |
height: '300%', | |
width: '300%', | |
top: -slider.handleSize, | |
left: -slider.handleSize | |
}, | |
rippleColor: { | |
fill: state.percent === 0 ? slider.handleColorZero : slider.rippleColor | |
} | |
}; | |
styles.filled = (0, _simpleAssign2.default)({}, styles.filledAndRemaining, { | |
left: 0, | |
backgroundColor: props.disabled ? slider.trackColor : slider.selectionColor, | |
marginRight: fillGutter, | |
width: 'calc(' + state.percent * 100 + '%' + calcDisabledSpacing + ')' | |
}); | |
styles.remaining = (0, _simpleAssign2.default)({}, styles.filledAndRemaining, { | |
right: 0, | |
backgroundColor: (state.hovered || state.focused) && !props.disabled ? slider.trackColorSelected : slider.trackColor, | |
marginLeft: fillGutter, | |
width: 'calc(' + (1 - state.percent) * 100 + '%' + calcDisabledSpacing + ')' | |
}); | |
return styles; | |
}; | |
var Slider = function (_Component) { | |
_inherits(Slider, _Component); | |
function Slider() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, Slider); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Slider)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
active: false, | |
dragging: false, | |
focused: false, | |
hovered: false, | |
percent: 0, | |
value: 0 | |
}, _this.onHandleTouchStart = function (event) { | |
if (document) { | |
document.addEventListener('touchmove', _this.dragTouchHandler, false); | |
document.addEventListener('touchup', _this.dragTouchEndHandler, false); | |
document.addEventListener('touchend', _this.dragTouchEndHandler, false); | |
document.addEventListener('touchcancel', _this.dragTouchEndHandler, false); | |
} | |
_this.onDragStart(event); | |
// Cancel scroll and context menu | |
event.preventDefault(); | |
}, _this.onHandleMouseDown = function (event) { | |
if (document) { | |
document.addEventListener('mousemove', _this.dragHandler, false); | |
document.addEventListener('mouseup', _this.dragEndHandler, false); | |
// Cancel text selection | |
event.preventDefault(); | |
// Set focus manually since we called preventDefault() | |
_this.refs.handle.focus(); | |
} | |
_this.onDragStart(event); | |
}, _this.onHandleKeyDown = function (event) { | |
var _this$props = _this.props; | |
var min = _this$props.min; | |
var max = _this$props.max; | |
var step = _this$props.step; | |
var action = void 0; | |
switch ((0, _keycode2.default)(event)) { | |
case 'page down': | |
case 'left': | |
case 'down': | |
action = 'decrease'; | |
break; | |
case 'page up': | |
case 'right': | |
case 'up': | |
action = 'increase'; | |
break; | |
case 'home': | |
action = 'home'; | |
break; | |
case 'end': | |
action = 'end'; | |
break; | |
} | |
if (action) { | |
var newValue = void 0; | |
var newPercent = void 0; | |
// Cancel scroll | |
event.preventDefault(); | |
// When pressing home or end the handle should be taken to the | |
// beginning or end of the track respectively | |
switch (action) { | |
case 'decrease': | |
newValue = Math.max(min, _this.state.value - step); | |
newPercent = (newValue - min) / (max - min); | |
break; | |
case 'increase': | |
newValue = Math.min(max, _this.state.value + step); | |
newPercent = (newValue - min) / (max - min); | |
break; | |
case 'home': | |
newValue = min; | |
newPercent = 0; | |
break; | |
case 'end': | |
newValue = max; | |
newPercent = 1; | |
break; | |
} | |
// We need to use toFixed() because of float point errors. | |
// For example, 0.01 + 0.06 = 0.06999999999999999 | |
if (_this.state.value !== newValue) { | |
_this.setState({ | |
percent: newPercent, | |
value: parseFloat(newValue.toFixed(5)) | |
}, function () { | |
if (_this.props.onChange) _this.props.onChange(event, _this.state.value); | |
}); | |
} | |
} | |
}, _this.dragHandler = function (event) { | |
if (_this.dragRunning) { | |
return; | |
} | |
_this.dragRunning = true; | |
requestAnimationFrame(function () { | |
_this.onDragUpdate(event, event.clientX - _this.getTrackLeft()); | |
_this.dragRunning = false; | |
}); | |
}, _this.dragTouchHandler = function (event) { | |
if (_this.dragRunning) { | |
return; | |
} | |
_this.dragRunning = true; | |
requestAnimationFrame(function () { | |
_this.onDragUpdate(event, event.touches[0].clientX - _this.getTrackLeft()); | |
_this.dragRunning = false; | |
}); | |
}, _this.dragEndHandler = function (event) { | |
if (document) { | |
document.removeEventListener('mousemove', _this.dragHandler, false); | |
document.removeEventListener('mouseup', _this.dragEndHandler, false); | |
} | |
_this.onDragStop(event); | |
}, _this.dragTouchEndHandler = function (event) { | |
if (document) { | |
document.removeEventListener('touchmove', _this.dragTouchHandler, false); | |
document.removeEventListener('touchup', _this.dragTouchEndHandler, false); | |
document.removeEventListener('touchend', _this.dragTouchEndHandler, false); | |
document.removeEventListener('touchcancel', _this.dragTouchEndHandler, false); | |
} | |
_this.onDragStop(event); | |
}, _this.handleTouchStart = function (event) { | |
if (!_this.props.disabled && !_this.state.dragging) { | |
var pos = event.touches[0].clientX - _this.getTrackLeft(); | |
_this.dragX(event, pos); | |
// Since the touch event fired for the track and handle is child of | |
// track, we need to manually propagate the event to the handle. | |
_this.onHandleTouchStart(event); | |
} | |
}, _this.handleFocus = function (event) { | |
_this.setState({ focused: true }); | |
if (_this.props.onFocus) _this.props.onFocus(event); | |
}, _this.handleBlur = function (event) { | |
_this.setState({ focused: false, active: false }); | |
if (_this.props.onBlur) _this.props.onBlur(event); | |
}, _this.handleMouseDown = function (event) { | |
if (!_this.props.disabled && !_this.state.dragging) { | |
var pos = event.clientX - _this.getTrackLeft(); | |
_this.dragX(event, pos); | |
// Since the click event fired for the track and handle is child of | |
// track, we need to manually propagate the event to the handle. | |
_this.onHandleMouseDown(event); | |
} | |
}, _this.handleMouseUp = function () { | |
if (!_this.props.disabled) _this.setState({ active: false }); | |
}, _this.handleMouseEnter = function () { | |
_this.setState({ hovered: true }); | |
}, _this.handleMouseLeave = function () { | |
_this.setState({ hovered: false }); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(Slider, [{ | |
key: 'componentWillMount', | |
value: function componentWillMount() { | |
var value = this.props.value; | |
if (value === undefined) { | |
value = this.props.defaultValue !== undefined ? this.props.defaultValue : this.props.min; | |
} | |
var percent = (value - this.props.min) / (this.props.max - this.props.min); | |
if (isNaN(percent)) percent = 0; | |
this.setState({ | |
percent: percent, | |
value: value | |
}); | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
if (nextProps.value !== undefined && !this.state.dragging) { | |
this.setValue(nextProps.value); | |
} | |
} | |
}, { | |
key: 'getValue', | |
value: function getValue() { | |
return this.state.value; | |
} | |
}, { | |
key: 'setValue', | |
value: 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 | |
}); | |
} | |
}, { | |
key: 'getPercent', | |
value: function getPercent() { | |
return this.state.percent; | |
} | |
}, { | |
key: 'setPercent', | |
value: function setPercent(percent, callback) { | |
var value = this.alignValue(this.percentToValue(percent)); | |
var _props = this.props; | |
var min = _props.min; | |
var max = _props.max; | |
var alignedPercent = (value - min) / (max - min); | |
if (this.state.value !== value) { | |
this.setState({ value: value, percent: alignedPercent }, callback); | |
} | |
} | |
}, { | |
key: 'clearValue', | |
value: function clearValue() { | |
this.setValue(this.props.min); | |
} | |
}, { | |
key: 'alignValue', | |
value: function alignValue(val) { | |
var _props2 = this.props; | |
var step = _props2.step; | |
var min = _props2.min; | |
var alignValue = Math.round((val - min) / step) * step + min; | |
return parseFloat(alignValue.toFixed(5)); | |
} | |
}, { | |
key: 'getTrackLeft', | |
value: function getTrackLeft() { | |
return this.refs.track.getBoundingClientRect().left; | |
} | |
}, { | |
key: 'onDragStart', | |
value: function onDragStart(event) { | |
this.setState({ | |
dragging: true, | |
active: true | |
}); | |
if (this.props.onDragStart) this.props.onDragStart(event); | |
} | |
}, { | |
key: 'onDragStop', | |
value: function onDragStop(event) { | |
this.setState({ | |
dragging: false, | |
active: false | |
}); | |
if (this.props.onDragStop) this.props.onDragStop(event); | |
} | |
}, { | |
key: 'onDragUpdate', | |
value: function onDragUpdate(event, pos) { | |
if (!this.state.dragging) return; | |
if (!this.props.disabled) this.dragX(event, pos); | |
} | |
}, { | |
key: 'dragX', | |
value: function dragX(event, pos) { | |
var max = this.refs.track.clientWidth; | |
if (pos < 0) pos = 0;else if (pos > max) pos = max; | |
this.updateWithChangeEvent(event, pos / max); | |
} | |
}, { | |
key: 'updateWithChangeEvent', | |
value: function updateWithChangeEvent(event, percent) { | |
var _this2 = this; | |
this.setPercent(percent, function () { | |
if (_this2.props.onChange) _this2.props.onChange(event, _this2.state.value); | |
}); | |
} | |
}, { | |
key: 'percentToValue', | |
value: function percentToValue(percent) { | |
return percent * (this.props.max - this.props.min) + this.props.min; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props3 = this.props; | |
var description = _props3.description; | |
var disabled = _props3.disabled; | |
var disableFocusRipple = _props3.disableFocusRipple; | |
var error = _props3.error; | |
var max = _props3.max; | |
var min = _props3.min; | |
var name = _props3.name; | |
var required = _props3.required; | |
var step = _props3.step; | |
var style = _props3.style; | |
var others = _objectWithoutProperties(_props3, ['description', 'disabled', 'disableFocusRipple', 'error', 'max', 'min', 'name', 'required', 'step', 'style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context, this.state); | |
var sliderStyles = styles.slider; | |
var handleStyles = {}; | |
var percent = this.state.percent; | |
if (percent > 1) percent = 1;else if (percent < 0) percent = 0; | |
if (percent === 0) { | |
handleStyles = (0, _simpleAssign2.default)({}, styles.handle, styles.handleWhenPercentZero, this.state.active && styles.handleWhenActive, (this.state.hovered || this.state.focused) && !disabled && styles.handleWhenPercentZeroAndFocused, disabled && styles.handleWhenPercentZeroAndDisabled); | |
} else { | |
handleStyles = (0, _simpleAssign2.default)({}, styles.handle, this.state.active && styles.handleWhenActive, disabled && styles.handleWhenDisabled); | |
} | |
var rippleStyle = (0, _simpleAssign2.default)({}, styles.ripple, percent === 0 && styles.rippleWhenPercentZero); | |
var rippleShowCondition = (this.state.hovered || this.state.focused) && !this.state.active; | |
var focusRipple = void 0; | |
if (!disabled && !disableFocusRipple) { | |
focusRipple = _react2.default.createElement(_FocusRipple2.default, { | |
ref: 'focusRipple', | |
key: 'focusRipple', | |
style: rippleStyle, | |
innerStyle: styles.rippleInner, | |
show: rippleShowCondition, | |
muiTheme: this.context.muiTheme, | |
color: styles.rippleColor.fill | |
}); | |
} | |
var handleDragProps = void 0; | |
if (!disabled) { | |
handleDragProps = { | |
onTouchStart: this.onHandleTouchStart, | |
onMouseDown: this.onHandleMouseDown, | |
onKeyDown: this.onHandleKeyDown | |
}; | |
} | |
return _react2.default.createElement( | |
'div', | |
_extends({}, others, { style: prepareStyles((0, _simpleAssign2.default)({}, style)) }), | |
_react2.default.createElement( | |
'span', | |
null, | |
description | |
), | |
_react2.default.createElement( | |
'span', | |
null, | |
error | |
), | |
_react2.default.createElement( | |
'div', | |
{ | |
style: prepareStyles(sliderStyles), | |
onFocus: this.handleFocus, | |
onBlur: this.handleBlur, | |
onMouseDown: this.handleMouseDown, | |
onMouseEnter: this.handleMouseEnter, | |
onMouseLeave: this.handleMouseLeave, | |
onMouseUp: this.handleMouseUp, | |
onTouchStart: this.handleTouchStart | |
}, | |
_react2.default.createElement( | |
'div', | |
{ ref: 'track', style: prepareStyles(styles.track) }, | |
_react2.default.createElement('div', { style: prepareStyles(styles.filled) }), | |
_react2.default.createElement('div', { style: prepareStyles(styles.remaining) }), | |
_react2.default.createElement( | |
'div', | |
_extends({ | |
ref: 'handle', | |
style: prepareStyles(handleStyles), | |
tabIndex: 0 | |
}, handleDragProps), | |
focusRipple | |
) | |
) | |
), | |
_react2.default.createElement('input', { | |
ref: 'input', | |
type: 'hidden', | |
name: name, | |
value: this.state.value, | |
required: required, | |
min: min, | |
max: max, | |
step: step | |
}) | |
); | |
} | |
}]); | |
return Slider; | |
}(_react.Component); | |
Slider.propTypes = { | |
/** | |
* The default value of the slider. | |
*/ | |
defaultValue: valueInRangePropType, | |
/** | |
* Describe the slider. | |
*/ | |
description: _react.PropTypes.string, | |
/** | |
* Disables focus ripple if set to true. | |
*/ | |
disableFocusRipple: _react.PropTypes.bool, | |
/** | |
* If true, the slider will not be interactable. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* An error message for the slider. | |
*/ | |
error: _react.PropTypes.string, | |
/** | |
* The maximum value the slider can slide to on | |
* a scale from 0 to 1 inclusive. Cannot be equal to min. | |
*/ | |
max: minMaxPropType, | |
/** | |
* The minimum value the slider can slide to on a scale | |
* from 0 to 1 inclusive. Cannot be equal to max. | |
*/ | |
min: minMaxPropType, | |
/** | |
* The name of the slider. Behaves like the name attribute | |
* of an input element. | |
*/ | |
name: _react.PropTypes.string, | |
/** | |
* Callback function that is fired when the focus has left the slider. | |
*/ | |
onBlur: _react.PropTypes.func, | |
/** | |
* Callback function that is fired when the user changes the slider's value. | |
*/ | |
onChange: _react.PropTypes.func, | |
/** | |
* Callback function that is fired when the slider has begun to move. | |
*/ | |
onDragStart: _react.PropTypes.func, | |
/** | |
* Callback function that is fried when the slide has stopped moving. | |
*/ | |
onDragStop: _react.PropTypes.func, | |
/** | |
* Callback fired when the user has focused on the slider. | |
*/ | |
onFocus: _react.PropTypes.func, | |
/** | |
* Whether or not the slider is required in a form. | |
*/ | |
required: _react.PropTypes.bool, | |
/** | |
* The granularity the slider can step through values. | |
*/ | |
step: _react.PropTypes.number, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* The value of the slider. | |
*/ | |
value: valueInRangePropType | |
}; | |
Slider.defaultProps = { | |
disabled: false, | |
disableFocusRipple: false, | |
max: 1, | |
min: 0, | |
required: true, | |
step: 0.01, | |
style: {} | |
}; | |
Slider.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = Slider; | |
/***/ }, | |
/* 151 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _Slider = __webpack_require__(150); | |
var _Slider2 = _interopRequireDefault(_Slider); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _Slider2.default; | |
/***/ }, | |
/* 152 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _ClickAwayListener = __webpack_require__(41); | |
var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener); | |
var _SnackbarBody = __webpack_require__(153); | |
var _SnackbarBody2 = _interopRequireDefault(_SnackbarBody); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context, state) { | |
var _context$muiTheme = context.muiTheme; | |
var desktopSubheaderHeight = _context$muiTheme.baseTheme.spacing.desktopSubheaderHeight; | |
var zIndex = _context$muiTheme.zIndex; | |
var open = state.open; | |
var styles = { | |
root: { | |
position: 'fixed', | |
left: 0, | |
display: 'flex', | |
right: 0, | |
bottom: 0, | |
zIndex: zIndex.snackbar, | |
visibility: open ? 'visible' : 'hidden', | |
transform: open ? 'translate3d(0, 0, 0)' : 'translate3d(0, ' + desktopSubheaderHeight + 'px, 0)', | |
transition: _transitions2.default.easeOut('400ms', 'transform') + ', ' + _transitions2.default.easeOut('400ms', 'visibility') | |
} | |
}; | |
return styles; | |
} | |
var Snackbar = function (_Component) { | |
_inherits(Snackbar, _Component); | |
function Snackbar() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, Snackbar); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Snackbar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.componentClickAway = function () { | |
if (_this.timerTransitionId) { | |
// If transitioning, don't close the snackbar. | |
return; | |
} | |
if (_this.props.open !== null && _this.props.onRequestClose) { | |
_this.props.onRequestClose('clickaway'); | |
} else { | |
_this.setState({ open: false }); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(Snackbar, [{ | |
key: 'componentWillMount', | |
value: function componentWillMount() { | |
this.setState({ | |
open: this.props.open, | |
message: this.props.message, | |
action: this.props.action | |
}); | |
} | |
}, { | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
if (this.state.open) { | |
this.setAutoHideTimer(); | |
this.setTransitionTimer(); | |
} | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(nextProps) { | |
var _this2 = this; | |
if (this.state.open && nextProps.open === this.props.open && (nextProps.message !== this.props.message || nextProps.action !== this.props.action)) { | |
this.setState({ | |
open: false | |
}); | |
clearTimeout(this.timerOneAtTheTimeId); | |
this.timerOneAtTheTimeId = setTimeout(function () { | |
_this2.setState({ | |
message: nextProps.message, | |
action: nextProps.action, | |
open: true | |
}); | |
}, 400); | |
} else { | |
var open = nextProps.open; | |
this.setState({ | |
open: open !== null ? open : this.state.open, | |
message: nextProps.message, | |
action: nextProps.action | |
}); | |
} | |
} | |
}, { | |
key: 'componentDidUpdate', | |
value: function componentDidUpdate(prevProps, prevState) { | |
if (prevState.open !== this.state.open) { | |
if (this.state.open) { | |
this.setAutoHideTimer(); | |
this.setTransitionTimer(); | |
} else { | |
clearTimeout(this.timerAutoHideId); | |
} | |
} | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
clearTimeout(this.timerAutoHideId); | |
clearTimeout(this.timerTransitionId); | |
clearTimeout(this.timerOneAtTheTimeId); | |
} | |
}, { | |
key: 'setAutoHideTimer', | |
// Timer that controls delay before snackbar auto hides | |
value: function setAutoHideTimer() { | |
var _this3 = this; | |
var autoHideDuration = this.props.autoHideDuration; | |
if (autoHideDuration > 0) { | |
clearTimeout(this.timerAutoHideId); | |
this.timerAutoHideId = setTimeout(function () { | |
if (_this3.props.open !== null && _this3.props.onRequestClose) { | |
_this3.props.onRequestClose('timeout'); | |
} else { | |
_this3.setState({ open: false }); | |
} | |
}, autoHideDuration); | |
} | |
} | |
// Timer that controls delay before click-away events are captured (based on when animation completes) | |
}, { | |
key: 'setTransitionTimer', | |
value: function setTransitionTimer() { | |
var _this4 = this; | |
this.timerTransitionId = setTimeout(function () { | |
_this4.timerTransitionId = undefined; | |
}, 400); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var onActionTouchTap = _props.onActionTouchTap; | |
var style = _props.style; | |
var bodyStyle = _props.bodyStyle; | |
var others = _objectWithoutProperties(_props, ['onActionTouchTap', 'style', 'bodyStyle']); | |
var _state = this.state; | |
var action = _state.action; | |
var message = _state.message; | |
var open = _state.open; | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context, this.state); | |
return _react2.default.createElement( | |
_ClickAwayListener2.default, | |
{ onClickAway: open && this.componentClickAway }, | |
_react2.default.createElement( | |
'div', | |
_extends({}, others, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), | |
_react2.default.createElement(_SnackbarBody2.default, { | |
open: open, | |
message: message, | |
action: action, | |
style: bodyStyle, | |
onActionTouchTap: onActionTouchTap | |
}) | |
) | |
); | |
} | |
}]); | |
return Snackbar; | |
}(_react.Component); | |
Snackbar.propTypes = { | |
/** | |
* The label for the action on the snackbar. | |
*/ | |
action: _react.PropTypes.string, | |
/** | |
* The number of milliseconds to wait before automatically dismissing. | |
* If no value is specified the snackbar will dismiss normally. | |
* If a value is provided the snackbar can still be dismissed normally. | |
* If a snackbar is dismissed before the timer expires, the timer will be cleared. | |
*/ | |
autoHideDuration: _react.PropTypes.number, | |
/** | |
* Override the inline-styles of the body element. | |
*/ | |
bodyStyle: _react.PropTypes.object, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* The message to be displayed. | |
* | |
* (Note: If the message is an element or array, and the `Snackbar` may re-render while it is still open, | |
* ensure that the same object remains as the `message` property if you want to avoid the `Snackbar` hiding and | |
* showing again) | |
*/ | |
message: _react.PropTypes.node.isRequired, | |
/** | |
* Fired when the action button is touchtapped. | |
* | |
* @param {object} event Action button event. | |
*/ | |
onActionTouchTap: _react.PropTypes.func, | |
/** | |
* Fired when the `Snackbar` is requested to be closed by a click outside the `Snackbar`, or after the | |
* `autoHideDuration` timer expires. | |
* | |
* Typically `onRequestClose` is used to set state in the parent component, which is used to control the `Snackbar` | |
* `open` prop. | |
* | |
* The `reason` parameter can optionally be used to control the response to `onRequestClose`, | |
* for example ignoring `clickaway`. | |
* | |
* @param {string} reason Can be:`"timeout"` (`autoHideDuration` expired) or: `"clickaway"` | |
*/ | |
onRequestClose: _react.PropTypes.func, | |
/** | |
* Controls whether the `Snackbar` is opened or not. | |
*/ | |
open: _react.PropTypes.bool.isRequired, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
Snackbar.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = Snackbar; | |
/***/ }, | |
/* 153 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.SnackbarBody = undefined; | |
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 _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _withWidth = __webpack_require__(214); | |
var _withWidth2 = _interopRequireDefault(_withWidth); | |
var _FlatButton = __webpack_require__(27); | |
var _FlatButton2 = _interopRequireDefault(_FlatButton); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function getStyles(props, context) { | |
var open = props.open; | |
var width = props.width; | |
var _context$muiTheme = context.muiTheme; | |
var _context$muiTheme$bas = _context$muiTheme.baseTheme.spacing; | |
var desktopGutter = _context$muiTheme$bas.desktopGutter; | |
var desktopSubheaderHeight = _context$muiTheme$bas.desktopSubheaderHeight; | |
var _context$muiTheme$sna = _context$muiTheme.snackbar; | |
var backgroundColor = _context$muiTheme$sna.backgroundColor; | |
var textColor = _context$muiTheme$sna.textColor; | |
var actionColor = _context$muiTheme$sna.actionColor; | |
var isSmall = width === _withWidth.SMALL; | |
var styles = { | |
root: { | |
backgroundColor: backgroundColor, | |
padding: '0 ' + desktopGutter + 'px', | |
height: desktopSubheaderHeight, | |
lineHeight: desktopSubheaderHeight + 'px', | |
borderRadius: isSmall ? 0 : 2, | |
maxWidth: isSmall ? 'inherit' : 568, | |
minWidth: isSmall ? 'inherit' : 288, | |
flexGrow: isSmall ? 1 : 0, | |
margin: 'auto' | |
}, | |
content: { | |
fontSize: 14, | |
color: textColor, | |
opacity: open ? 1 : 0, | |
transition: open ? _transitions2.default.easeOut('500ms', 'opacity', '100ms') : _transitions2.default.easeOut('400ms', 'opacity') | |
}, | |
action: { | |
color: actionColor, | |
float: 'right', | |
marginTop: 6, | |
marginRight: -16, | |
marginLeft: desktopGutter, | |
backgroundColor: 'transparent' | |
} | |
}; | |
return styles; | |
} | |
var SnackbarBody = exports.SnackbarBody = function SnackbarBody(props, context) { | |
var open = props.open; | |
var // eslint-disable-line no-unused-vars | |
action = props.action; | |
var message = props.message; | |
var onActionTouchTap = props.onActionTouchTap; | |
var style = props.style; | |
var other = _objectWithoutProperties(props, ['open', 'action', 'message', 'onActionTouchTap', 'style']); | |
var prepareStyles = context.muiTheme.prepareStyles; | |
var styles = getStyles(props, context); | |
var actionButton = action && _react2.default.createElement(_FlatButton2.default, { | |
style: styles.action, | |
label: action, | |
onTouchTap: onActionTouchTap | |
}); | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), | |
_react2.default.createElement( | |
'div', | |
{ style: prepareStyles(styles.content) }, | |
_react2.default.createElement( | |
'span', | |
null, | |
message | |
), | |
actionButton | |
) | |
); | |
}; | |
SnackbarBody.propTypes = { | |
/** | |
* The label for the action on the snackbar. | |
*/ | |
action: _react.PropTypes.string, | |
/** | |
* The message to be displayed. | |
* | |
* (Note: If the message is an element or array, and the `Snackbar` may re-render while it is still open, | |
* ensure that the same object remains as the `message` property if you want to avoid the `Snackbar` hiding and | |
* showing again) | |
*/ | |
message: _react.PropTypes.node.isRequired, | |
/** | |
* Fired when the action button is touchtapped. | |
* | |
* @param {object} event Action button event. | |
*/ | |
onActionTouchTap: _react.PropTypes.func, | |
/** | |
* @ignore | |
* Controls whether the `Snackbar` is opened or not. | |
*/ | |
open: _react.PropTypes.bool.isRequired, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* @ignore | |
* Width of the screen. | |
*/ | |
width: _react.PropTypes.number.isRequired | |
}; | |
SnackbarBody.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = (0, _withWidth2.default)()(SnackbarBody); | |
/***/ }, | |
/* 154 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = undefined; | |
var _Snackbar = __webpack_require__(152); | |
var _Snackbar2 = _interopRequireDefault(_Snackbar); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.default = _Snackbar2.default; | |
/***/ }, | |
/* 155 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var getStyles = function getStyles(_ref, _ref2) { | |
var index = _ref.index; | |
var stepper = _ref2.stepper; | |
var orientation = stepper.orientation; | |
var styles = { | |
root: { | |
flex: '0 0 auto' | |
} | |
}; | |
if (index > 0) { | |
if (orientation === 'horizontal') { | |
styles.root.marginLeft = -6; | |
} else if (orientation === 'vertical') { | |
styles.root.marginTop = -14; | |
} | |
} | |
return styles; | |
}; | |
var Step = function (_Component) { | |
_inherits(Step, _Component); | |
function Step() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, Step); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Step)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.renderChild = function (child) { | |
var _this$props = _this.props; | |
var active = _this$props.active; | |
var completed = _this$props.completed; | |
var disabled = _this$props.disabled; | |
var index = _this$props.index; | |
var last = _this$props.last; | |
var icon = index + 1; | |
return _react2.default.cloneElement(child, (0, _simpleAssign2.default)({ active: active, completed: completed, disabled: disabled, icon: icon, last: last }, child.props)); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(Step, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var children = _props.children; | |
var style = _props.style; | |
var other = _objectWithoutProperties(_props, ['children', 'style']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
return _react2.default.createElement( | |
'div', | |
_extends({ style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, other), | |
_react2.default.Children.map(children, this.renderChild) | |
); | |
} | |
}]); | |
return Step; | |
}(_react.Component); | |
Step.propTypes = { | |
/** | |
* Sets the step as active. Is passed to child components. | |
*/ | |
active: _react.PropTypes.bool, | |
/** | |
* Should be `Step` sub-components such as `StepLabel`. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* Mark the step as completed. Is passed to child components. | |
*/ | |
completed: _react.PropTypes.bool, | |
/** | |
* Mark the step as disabled, will also disable the button if | |
* `StepButton` is a child of `Step`. Is passed to child components. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* @ignore | |
* Used internally for numbering. | |
*/ | |
index: _react.PropTypes.number, | |
/** | |
* @ignore | |
*/ | |
last: _react.PropTypes.bool, | |
/** | |
* Override the inline-style of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
Step.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired, | |
stepper: _react.PropTypes.object | |
}; | |
exports.default = Step; | |
/***/ }, | |
/* 156 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
var _EnhancedButton = __webpack_require__(11); | |
var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); | |
var _StepLabel = __webpack_require__(67); | |
var _StepLabel2 = _interopRequireDefault(_StepLabel); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var isLabel = function isLabel(child) { | |
return child && child.type && child.type.muiName === 'StepLabel'; | |
}; | |
var getStyles = function getStyles(props, context, state) { | |
var hovered = state.hovered; | |
var _context$muiTheme$ste = context.muiTheme.stepper; | |
var backgroundColor = _context$muiTheme$ste.backgroundColor; | |
var hoverBackgroundColor = _context$muiTheme$ste.hoverBackgroundColor; | |
var styles = { | |
root: { | |
padding: 0, | |
backgroundColor: hovered ? hoverBackgroundColor : backgroundColor, | |
transition: _transitions2.default.easeOut() | |
} | |
}; | |
if (context.stepper.orientation === 'vertical') { | |
styles.root.width = '100%'; | |
} | |
return styles; | |
}; | |
var StepButton = function (_Component) { | |
_inherits(StepButton, _Component); | |
function StepButton() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, StepButton); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(StepButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
hovered: false, | |
touched: false | |
}, _this.handleMouseEnter = function (event) { | |
var onMouseEnter = _this.props.onMouseEnter; | |
// Cancel hover styles for touch devices | |
if (!_this.state.touched) { | |
_this.setState({ hovered: true }); | |
} | |
if (typeof onMouseEnter === 'function') { | |
onMouseEnter(event); | |
} | |
}, _this.handleMouseLeave = function (event) { | |
var onMouseLeave = _this.props.onMouseLeave; | |
_this.setState({ hovered: false }); | |
if (typeof onMouseLeave === 'function') { | |
onMouseLeave(event); | |
} | |
}, _this.handleTouchStart = function (event) { | |
var onTouchStart = _this.props.onTouchStart; | |
if (!_this.state.touched) { | |
_this.setState({ touched: true }); | |
} | |
if (typeof onTouchStart === 'function') { | |
onTouchStart(event); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(StepButton, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var active = _props.active; | |
var children = _props.children; | |
var completed = _props.completed; | |
var disabled = _props.disabled; | |
var icon = _props.icon; | |
var onMouseEnter = _props.onMouseEnter; | |
var // eslint-disable-line no-unused-vars | |
onMouseLeave = _props.onMouseLeave; | |
var // eslint-disable-line no-unused-vars | |
onTouchStart = _props.onTouchStart; | |
var // eslint-disable-line no-unused-vars | |
style = _props.style; | |
var other = _objectWithoutProperties(_props, ['active', 'children', 'completed', 'disabled', 'icon', 'onMouseEnter', 'onMouseLeave', 'onTouchStart', 'style']); | |
var styles = getStyles(this.props, this.context, this.state); | |
var child = isLabel(children) ? children : _react2.default.createElement( | |
_StepLabel2.default, | |
null, | |
children | |
); | |
return _react2.default.createElement( | |
_EnhancedButton2.default, | |
_extends({ | |
disabled: disabled, | |
style: (0, _simpleAssign2.default)(styles.root, style), | |
onMouseEnter: this.handleMouseEnter, | |
onMouseLeave: this.handleMouseLeave, | |
onTouchStart: this.handleTouchStart | |
}, other), | |
_react2.default.cloneElement(child, { active: active, completed: completed, disabled: disabled, icon: icon }) | |
); | |
} | |
}]); | |
return StepButton; | |
}(_react.Component); | |
StepButton.propTypes = { | |
/** | |
* Passed from `Step` Is passed to StepLabel. | |
*/ | |
active: _react.PropTypes.bool, | |
/** | |
* Can be a `StepLabel` or a node to place inside `StepLabel` as children. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* Sets completed styling. Is passed to StepLabel. | |
*/ | |
completed: _react.PropTypes.bool, | |
/** | |
* Disables the button and sets disabled styling. Is passed to StepLabel. | |
*/ | |
disabled: _react.PropTypes.bool, | |
/** | |
* The icon displayed by the step label. | |
*/ | |
icon: _react.PropTypes.oneOfType([_react.PropTypes.element, _react.PropTypes.string, _react.PropTypes.number]), | |
/** | |
* Callback function fired when the mouse enters the element. | |
* | |
* @param {object} event `mouseenter` event targeting the element. | |
*/ | |
onMouseEnter: _react.PropTypes.func, | |
/** | |
* Callback function fired when the mouse leaves the element. | |
* | |
* @param {object} event `mouseleave` event targeting the element. | |
*/ | |
onMouseLeave: _react.PropTypes.func, | |
/** | |
* Callback function fired when the element is touched. | |
* | |
* @param {object} event `touchstart` event targeting the element. | |
*/ | |
onTouchStart: _react.PropTypes.func, | |
/** | |
* Override the inline-style of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
StepButton.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired, | |
stepper: _react.PropTypes.object | |
}; | |
exports.default = StepButton; | |
/***/ }, | |
/* 157 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.PlainStepConnector = undefined; | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _pure = __webpack_require__(7); | |
var _pure2 = _interopRequireDefault(_pure); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
var propTypes = { | |
/** | |
* Override the inline-style of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
var contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired, | |
stepper: _react.PropTypes.object | |
}; | |
var StepConnector = function StepConnector(props, context) { | |
var muiTheme = context.muiTheme; | |
var stepper = context.stepper; | |
var styles = { | |
wrapper: { | |
flex: '1 1 auto' | |
}, | |
line: { | |
display: 'block', | |
borderColor: muiTheme.stepper.connectorLineColor | |
} | |
}; | |
/** | |
* Clean up once we can use CSS pseudo elements | |
*/ | |
if (stepper.orientation === 'horizontal') { | |
styles.line.marginLeft = -6; | |
styles.line.borderTopStyle = 'solid'; | |
styles.line.borderTopWidth = 1; | |
} else if (stepper.orientation === 'vertical') { | |
styles.wrapper.marginLeft = 14 + 11; // padding + 1/2 icon | |
styles.line.borderLeftStyle = 'solid'; | |
styles.line.borderLeftWidth = 1; | |
styles.line.minHeight = 28; | |
} | |
var prepareStyles = muiTheme.prepareStyles; | |
return _react2.default.createElement( | |
'div', | |
{ style: prepareStyles(styles.wrapper) }, | |
_react2.default.createElement('span', { style: prepareStyles(styles.line) }) | |
); | |
}; | |
StepConnector.propTypes = propTypes; | |
StepConnector.contextTypes = contextTypes; | |
exports.PlainStepConnector = StepConnector; | |
exports.default = (0, _pure2.default)(StepConnector); | |
/***/ }, | |
/* 158 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _ExpandTransition = __webpack_require__(188); | |
var _ExpandTransition2 = _interopRequireDefault(_ExpandTransition); | |
var _warning = __webpack_require__(6); | |
var _warning2 = _interopRequireDefault(_warning); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function ExpandTransition(props) { | |
return _react2.default.createElement(_ExpandTransition2.default, props); | |
} | |
var getStyles = function getStyles(props, context) { | |
var styles = { | |
root: { | |
marginTop: -14, | |
marginLeft: 14 + 11, // padding + 1/2 icon | |
paddingLeft: 24 - 11 + 8, | |
paddingRight: 16, | |
overflow: 'hidden' | |
} | |
}; | |
if (!props.last) { | |
styles.root.borderLeft = '1px solid ' + context.muiTheme.stepper.connectorLineColor; | |
} | |
return styles; | |
}; | |
var StepContent = function (_Component) { | |
_inherits(StepContent, _Component); | |
function StepContent() { | |
_classCallCheck(this, StepContent); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(StepContent).apply(this, arguments)); | |
} | |
_createClass(StepContent, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var active = _props.active; | |
var children = _props.children; | |
var last = _props.last; | |
var // eslint-disable-line no-unused-vars | |
style = _props.style; | |
var transition = _props.transition; | |
var transitionDuration = _props.transitionDuration; | |
var other = _objectWithoutProperties(_props, ['active', 'children', 'last', 'style', 'transition', 'transitionDuration']); | |
var _context = this.context; | |
var stepper = _context.stepper; | |
var prepareStyles = _context.muiTheme.prepareStyles; | |
if (stepper.orientation !== 'vertical') { | |
true ? (0, _warning2.default)(false, '<StepContent /> is only designed for use with the vertical stepper.') : void 0; | |
return null; | |
} | |
var styles = getStyles(this.props, this.context); | |
var transitionProps = { | |
enterDelay: transitionDuration, | |
transitionDuration: transitionDuration, | |
open: active | |
}; | |
return _react2.default.createElement( | |
'div', | |
_extends({ style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, other), | |
_react2.default.createElement(transition, transitionProps, _react2.default.createElement( | |
'div', | |
{ style: { overflow: 'hidden' } }, | |
children | |
)) | |
); | |
} | |
}]); | |
return StepContent; | |
}(_react.Component); | |
StepContent.propTypes = { | |
/** | |
* Expands the content | |
*/ | |
active: _react.PropTypes.bool, | |
/** | |
* Step content | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* @ignore | |
*/ | |
last: _react.PropTypes.bool, | |
/** | |
* Override the inline-style of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* ReactTransitionGroup component. | |
*/ | |
transition: _react.PropTypes.func, | |
/** | |
* Adjust the duration of the content expand transition. Passed as a prop to the transition component. | |
*/ | |
transitionDuration: _react.PropTypes.number | |
}; | |
StepContent.defaultProps = { | |
transition: ExpandTransition, | |
transitionDuration: 450 | |
}; | |
StepContent.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired, | |
stepper: _react.PropTypes.object | |
}; | |
exports.default = StepContent; | |
/***/ }, | |
/* 159 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _StepConnector = __webpack_require__(157); | |
var _StepConnector2 = _interopRequireDefault(_StepConnector); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var getStyles = function getStyles(props) { | |
var orientation = props.orientation; | |
return { | |
root: { | |
display: 'flex', | |
flexDirection: orientation === 'horizontal' ? 'row' : 'column', | |
alignContent: 'center', | |
alignItems: orientation === 'horizontal' ? 'center' : 'stretch', | |
justifyContent: 'space-between' | |
} | |
}; | |
}; | |
var Stepper = function (_Component) { | |
_inherits(Stepper, _Component); | |
function Stepper() { | |
_classCallCheck(this, Stepper); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(Stepper).apply(this, arguments)); | |
} | |
_createClass(Stepper, [{ | |
key: 'getChildContext', | |
value: function getChildContext() { | |
var orientation = this.props.orientation; | |
return { stepper: { orientation: orientation } }; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var activeStep = _props.activeStep; | |
var children = _props.children; | |
var linear = _props.linear; | |
var style = _props.style; | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
/** | |
* One day, we may be able to use real CSS tools | |
* For now, we need to create our own "pseudo" elements | |
* and nth child selectors, etc | |
* That's what some of this garbage is for :) | |
*/ | |
var steps = _react2.default.Children.map(children, function (step, index) { | |
var controlProps = { index: index }; | |
if (activeStep === index) { | |
controlProps.active = true; | |
} else if (linear && activeStep > index) { | |
controlProps.completed = true; | |
} else if (linear && activeStep < index) { | |
controlProps.disabled = true; | |
} | |
if (index + 1 === children.length) { | |
controlProps.last = true; | |
} | |
return [index > 0 && _react2.default.createElement(_StepConnector2.default, null), _react2.default.cloneElement(step, (0, _simpleAssign2.default)(controlProps, step.props))]; | |
}); | |
return _react2.default.createElement( | |
'div', | |
{ style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, | |
steps | |
); | |
} | |
}]); | |
return Stepper; | |
}(_react.Component); | |
Stepper.propTypes = { | |
/** | |
* Set the active step (zero based index). This will enable `Step` control helpers. | |
*/ | |
activeStep: _react.PropTypes.number, | |
/** | |
* Should be two or more `<Step />` components | |
*/ | |
children: _react.PropTypes.arrayOf(_react.PropTypes.element), | |
/** | |
* If set to `true`, the `Stepper` will assist in controlling steps for linear flow | |
*/ | |
linear: _react.PropTypes.bool, | |
/** | |
* The stepper orientation (layout flow direction) | |
*/ | |
orientation: _react.PropTypes.oneOf(['horizontal', 'vertical']), | |
/** | |
* Override the inline-style of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
Stepper.defaultProps = { | |
orientation: 'horizontal', | |
linear: true | |
}; | |
Stepper.contextTypes = { muiTheme: _react.PropTypes.object.isRequired }; | |
Stepper.childContextTypes = { stepper: _react.PropTypes.object }; | |
exports.default = Stepper; | |
/***/ }, | |
/* 160 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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 propTypes = { | |
/** | |
* Node that will be placed inside the `Subheader`. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* If true, the `Subheader` will be indented by `72px`. | |
*/ | |
inset: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object | |
}; | |
var defaultProps = { | |
inset: false | |
}; | |
var contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
var Subheader = function Subheader(props, context) { | |
var children = props.children; | |
var inset = props.inset; | |
var style = props.style; | |
var other = _objectWithoutProperties(props, ['children', 'inset', 'style']); | |
var _context$muiTheme = context.muiTheme; | |
var prepareStyles = _context$muiTheme.prepareStyles; | |
var subheader = _context$muiTheme.subheader; | |
var styles = { | |
root: { | |
boxSizing: 'border-box', | |
color: subheader.color, | |
fontSize: 14, | |
fontWeight: subheader.fontWeight, | |
lineHeight: '48px', | |
paddingLeft: inset ? 72 : 16, | |
width: '100%' | |
} | |
}; | |
return _react2.default.createElement( | |
'div', | |
_extends({}, other, { style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, style)) }), | |
children | |
); | |
}; | |
Subheader.muiName = 'Subheader'; | |
Subheader.propTypes = propTypes; | |
Subheader.defaultProps = defaultProps; | |
Subheader.contextTypes = contextTypes; | |
exports.default = Subheader; | |
/***/ }, | |
/* 161 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var SvgIcon = function (_Component) { | |
_inherits(SvgIcon, _Component); | |
function SvgIcon() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, SvgIcon); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(SvgIcon)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
hovered: false | |
}, _this.handleMouseLeave = function (event) { | |
_this.setState({ hovered: false }); | |
_this.props.onMouseLeave(event); | |
}, _this.handleMouseEnter = function (event) { | |
_this.setState({ hovered: true }); | |
_this.props.onMouseEnter(event); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(SvgIcon, [{ | |
key: 'render', | |
value: function render() { | |
var _props = this.props; | |
var children = _props.children; | |
var color = _props.color; | |
var hoverColor = _props.hoverColor; | |
var onMouseEnter = _props.onMouseEnter; | |
var // eslint-disable-line no-unused-vars | |
onMouseLeave = _props.onMouseLeave; | |
var // eslint-disable-line no-unused-vars | |
style = _props.style; | |
var viewBox = _props.viewBox; | |
var other = _objectWithoutProperties(_props, ['children', 'color', 'hoverColor', 'onMouseEnter', 'onMouseLeave', 'style', 'viewBox']); | |
var _context$muiTheme = this.context.muiTheme; | |
var baseTheme = _context$muiTheme.baseTheme; | |
var prepareStyles = _context$muiTheme.prepareStyles; | |
var offColor = color ? color : style && style.fill ? style.fill : baseTheme.palette.textColor; | |
var onColor = hoverColor ? hoverColor : offColor; | |
var mergedStyles = (0, _simpleAssign2.default)({ | |
display: 'inline-block', | |
fill: this.state.hovered ? onColor : offColor, | |
height: 24, | |
width: 24, | |
userSelect: 'none', | |
transition: _transitions2.default.easeOut() | |
}, style); | |
return _react2.default.createElement( | |
'svg', | |
_extends({}, other, { | |
onMouseEnter: this.handleMouseEnter, | |
onMouseLeave: this.handleMouseLeave, | |
style: prepareStyles(mergedStyles), | |
viewBox: viewBox | |
}), | |
children | |
); | |
} | |
}]); | |
return SvgIcon; | |
}(_react.Component); | |
SvgIcon.muiName = 'SvgIcon'; | |
SvgIcon.propTypes = { | |
/** | |
* Elements passed into the SVG Icon. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* This is the fill color of the svg icon. | |
* If not specified, this component will default | |
* to muiTheme.palette.textColor. | |
*/ | |
color: _react.PropTypes.string, | |
/** | |
* This is the icon color when the mouse hovers over the icon. | |
*/ | |
hoverColor: _react.PropTypes.string, | |
/** | |
* Function called when mouse enters this element. | |
*/ | |
onMouseEnter: _react.PropTypes.func, | |
/** | |
* Function called when mouse leaves this element. | |
*/ | |
onMouseLeave: _react.PropTypes.func, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* Allows you to redifine what the coordinates | |
* without units mean inside an svg element. For example, | |
* if the SVG element is 500 (width) by 200 (height), and you | |
* pass viewBox="0 0 50 20", this means that the coordinates inside | |
* the svg will go from the top left corner (0,0) to bottom right (50,20) | |
* and each unit will be worth 10px. | |
*/ | |
viewBox: _react.PropTypes.string | |
}; | |
SvgIcon.defaultProps = { | |
onMouseEnter: function onMouseEnter() {}, | |
onMouseLeave: function onMouseLeave() {}, | |
viewBox: '0 0 24 24' | |
}; | |
SvgIcon.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = SvgIcon; | |
/***/ }, | |
/* 162 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var _context$muiTheme = context.muiTheme; | |
var baseTheme = _context$muiTheme.baseTheme; | |
var table = _context$muiTheme.table; | |
return { | |
root: { | |
backgroundColor: table.backgroundColor, | |
padding: '0 ' + baseTheme.spacing.desktopGutter + 'px', | |
width: '100%', | |
borderCollapse: 'collapse', | |
borderSpacing: 0, | |
tableLayout: 'fixed', | |
fontFamily: baseTheme.fontFamily | |
}, | |
bodyTable: { | |
height: props.fixedHeader || props.fixedFooter ? props.height : 'auto', | |
overflowX: 'hidden', | |
overflowY: 'auto' | |
}, | |
tableWrapper: { | |
height: props.fixedHeader || props.fixedFooter ? 'auto' : props.height, | |
overflow: 'auto' | |
} | |
}; | |
} | |
var Table = function (_Component) { | |
_inherits(Table, _Component); | |
function Table() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, Table); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Table)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { | |
allRowsSelected: _this.props.allRowsSelected | |
}, _this.onCellClick = function (rowNumber, columnNumber, event) { | |
if (_this.props.onCellClick) _this.props.onCellClick(rowNumber, columnNumber, event); | |
}, _this.onCellHover = function (rowNumber, columnNumber, event) { | |
if (_this.props.onCellHover) _this.props.onCellHover(rowNumber, columnNumber, event); | |
}, _this.onCellHoverExit = function (rowNumber, columnNumber, event) { | |
if (_this.props.onCellHoverExit) _this.props.onCellHoverExit(rowNumber, columnNumber, event); | |
}, _this.onRowHover = function (rowNumber) { | |
if (_this.props.onRowHover) _this.props.onRowHover(rowNumber); | |
}, _this.onRowHoverExit = function (rowNumber) { | |
if (_this.props.onRowHoverExit) _this.props.onRowHoverExit(rowNumber); | |
}, _this.onRowSelection = function (selectedRows) { | |
if (_this.state.allRowsSelected) _this.setState({ allRowsSelected: false }); | |
if (_this.props.onRowSelection) _this.props.onRowSelection(selectedRows); | |
}, _this.onSelectAll = function () { | |
if (_this.props.onRowSelection) { | |
if (!_this.state.allRowsSelected) { | |
_this.props.onRowSelection('all'); | |
} else { | |
_this.props.onRowSelection('none'); | |
} | |
} | |
_this.setState({ allRowsSelected: !_this.state.allRowsSelected }); | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(Table, [{ | |
key: 'isScrollbarVisible', | |
value: function isScrollbarVisible() { | |
var tableDivHeight = this.refs.tableDiv.clientHeight; | |
var tableBodyHeight = this.refs.tableBody.clientHeight; | |
return tableBodyHeight > tableDivHeight; | |
} | |
}, { | |
key: 'createTableHeader', | |
value: function createTableHeader(base) { | |
return _react2.default.cloneElement(base, { | |
enableSelectAll: base.props.enableSelectAll && this.props.selectable && this.props.multiSelectable, | |
onSelectAll: this.onSelectAll, | |
selectAllSelected: this.state.allRowsSelected | |
}); | |
} | |
}, { | |
key: 'createTableBody', | |
value: function createTableBody(base) { | |
return _react2.default.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: (0, _simpleAssign2.default)({ height: this.props.height }, base.props.style) | |
}); | |
} | |
}, { | |
key: 'createTableFooter', | |
value: function createTableFooter(base) { | |
return base; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _this2 = this; | |
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 wrapperStyle = _props.wrapperStyle; | |
var headerStyle = _props.headerStyle; | |
var bodyStyle = _props.bodyStyle; | |
var footerStyle = _props.footerStyle; | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var tHead = void 0; | |
var tFoot = void 0; | |
var tBody = void 0; | |
_react2.default.Children.forEach(children, function (child) { | |
if (!_react2.default.isValidElement(child)) return; | |
var muiName = child.type.muiName; | |
if (muiName === 'TableBody') { | |
tBody = _this2.createTableBody(child); | |
} else if (muiName === 'TableHeader') { | |
tHead = _this2.createTableHeader(child); | |
} else if (muiName === 'TableFooter') { | |
tFoot = _this2.createTableFooter(child); | |
} | |
}); | |
// If we could not find a table-header and a table-body, do not attempt to display anything. | |
if (!tBody && !tHead) return null; | |
var mergedTableStyle = (0, _simpleAssign2.default)(styles.root, style); | |
var headerTable = void 0; | |
var footerTable = void 0; | |
var inlineHeader = void 0; | |
var inlineFooter = void 0; | |
if (fixedHeader) { | |
headerTable = _react2.default.createElement( | |
'div', | |
{ style: prepareStyles((0, _simpleAssign2.default)({}, headerStyle)) }, | |
_react2.default.createElement( | |
'table', | |
{ className: className, style: mergedTableStyle }, | |
tHead | |
) | |
); | |
} else { | |
inlineHeader = tHead; | |
} | |
if (tFoot !== undefined) { | |
if (fixedFooter) { | |
footerTable = _react2.default.createElement( | |
'div', | |
{ style: prepareStyles((0, _simpleAssign2.default)({}, footerStyle)) }, | |
_react2.default.createElement( | |
'table', | |
{ className: className, style: prepareStyles(mergedTableStyle) }, | |
tFoot | |
) | |
); | |
} else { | |
inlineFooter = tFoot; | |
} | |
} | |
return _react2.default.createElement( | |
'div', | |
{ style: prepareStyles((0, _simpleAssign2.default)(styles.tableWrapper, wrapperStyle)) }, | |
headerTable, | |
_react2.default.createElement( | |
'div', | |
{ style: prepareStyles((0, _simpleAssign2.default)(styles.bodyTable, bodyStyle)), ref: 'tableDiv' }, | |
_react2.default.createElement( | |
'table', | |
{ className: className, style: mergedTableStyle, ref: 'tableBody' }, | |
inlineHeader, | |
inlineFooter, | |
tBody | |
) | |
), | |
footerTable | |
); | |
} | |
}]); | |
return Table; | |
}(_react.Component); | |
Table.propTypes = { | |
/** | |
* Set to true to indicate that all rows should be selected. | |
*/ | |
allRowsSelected: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the body's table element. | |
*/ | |
bodyStyle: _react.PropTypes.object, | |
/** | |
* Children passed to table. | |
*/ | |
children: _react.PropTypes.node, | |
/** | |
* The css class name of the root element. | |
*/ | |
className: _react.PropTypes.string, | |
/** | |
* If true, the footer will appear fixed below the table. | |
* The default value is true. | |
*/ | |
fixedFooter: _react.PropTypes.bool, | |
/** | |
* If true, the header will appear fixed above the table. | |
* The default value is true. | |
*/ | |
fixedHeader: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the footer's table element. | |
*/ | |
footerStyle: _react.PropTypes.object, | |
/** | |
* Override the inline-styles of the header's table element. | |
*/ | |
headerStyle: _react.PropTypes.object, | |
/** | |
* The height of the table. | |
*/ | |
height: _react.PropTypes.string, | |
/** | |
* If true, multiple table rows can be selected. | |
* CTRL/CMD+Click and SHIFT+Click are valid actions. | |
* The default value is false. | |
*/ | |
multiSelectable: _react.PropTypes.bool, | |
/** | |
* Called when a row cell is clicked. | |
* rowNumber is the row number and columnId is | |
* the column number or the column key. | |
*/ | |
onCellClick: _react.PropTypes.func, | |
/** | |
* Called when a table cell is hovered. | |
* rowNumber is the row number of the hovered row | |
* and columnId is the column number or the column key of the cell. | |
*/ | |
onCellHover: _react.PropTypes.func, | |
/** | |
* Called when a table cell is no longer hovered. | |
* rowNumber is the row number of the row and columnId | |
* is the column number or the column key of the cell. | |
*/ | |
onCellHoverExit: _react.PropTypes.func, | |
/** | |
* Called when a table row is hovered. | |
* rowNumber is the row number of the hovered row. | |
*/ | |
onRowHover: _react.PropTypes.func, | |
/** | |
* Called when a table row is no longer hovered. | |
* rowNumber is the row number of the row that is no longer hovered. | |
*/ | |
onRowHoverExit: _react.PropTypes.func, | |
/** | |
* Called when a row is selected. | |
* selectedRows is an array of all row selections. | |
* IF all rows have been selected, the string "all" | |
* will be returned instead to indicate that all rows have been selected. | |
*/ | |
onRowSelection: _react.PropTypes.func, | |
/** | |
* If true, table rows can be selected. | |
* If multiple row selection is desired, enable multiSelectable. | |
* The default value is true. | |
*/ | |
selectable: _react.PropTypes.bool, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
/** | |
* Override the inline-styles of the table's wrapper element. | |
*/ | |
wrapperStyle: _react.PropTypes.object | |
}; | |
Table.defaultProps = { | |
allRowsSelected: false, | |
fixedFooter: true, | |
fixedHeader: true, | |
height: 'inherit', | |
multiSelectable: false, | |
selectable: true | |
}; | |
Table.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = Table; | |
/***/ }, | |
/* 163 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
exports.default = exports.TableRowColumn = exports.TableRow = exports.TableHeaderColumn = exports.TableHeader = exports.TableFooter = exports.TableBody = exports.Table = undefined; | |
var _Table2 = __webpack_require__(162); | |
var _Table3 = _interopRequireDefault(_Table2); | |
var _TableBody2 = __webpack_require__(69); | |
var _TableBody3 = _interopRequireDefault(_TableBody2); | |
var _TableFooter2 = __webpack_require__(70); | |
var _TableFooter3 = _interopRequireDefault(_TableFooter2); | |
var _TableHeader2 = __webpack_require__(71); | |
var _TableHeader3 = _interopRequireDefault(_TableHeader2); | |
var _TableHeaderColumn2 = __webpack_require__(40); | |
var _TableHeaderColumn3 = _interopRequireDefault(_TableHeaderColumn2); | |
var _TableRow2 = __webpack_require__(72); | |
var _TableRow3 = _interopRequireDefault(_TableRow2); | |
var _TableRowColumn2 = __webpack_require__(29); | |
var _TableRowColumn3 = _interopRequireDefault(_TableRowColumn2); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
exports.Table = _Table3.default; | |
exports.TableBody = _TableBody3.default; | |
exports.TableFooter = _TableFooter3.default; | |
exports.TableHeader = _TableHeader3.default; | |
exports.TableHeaderColumn = _TableHeaderColumn3.default; | |
exports.TableRow = _TableRow3.default; | |
exports.TableRowColumn = _TableRowColumn3.default; | |
exports.default = _Table3.default; | |
/***/ }, | |
/* 164 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _transitions = __webpack_require__(3); | |
var _transitions2 = _interopRequireDefault(_transitions); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var inkBar = context.muiTheme.inkBar; | |
return { | |
root: { | |
left: props.left, | |
width: props.width, | |
bottom: 0, | |
display: 'block', | |
backgroundColor: props.color || inkBar.backgroundColor, | |
height: 2, | |
marginTop: -2, | |
position: 'relative', | |
transition: _transitions2.default.easeOut('1s', 'left') | |
} | |
}; | |
} | |
var InkBar = function (_Component) { | |
_inherits(InkBar, _Component); | |
function InkBar() { | |
_classCallCheck(this, InkBar); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(InkBar).apply(this, arguments)); | |
} | |
_createClass(InkBar, [{ | |
key: 'render', | |
value: function render() { | |
var style = this.props.style; | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
return _react2.default.createElement('div', { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }); | |
} | |
}]); | |
return InkBar; | |
}(_react.Component); | |
InkBar.propTypes = { | |
color: _react.PropTypes.string, | |
left: _react.PropTypes.string.isRequired, | |
/** | |
* Override the inline-styles of the root element. | |
*/ | |
style: _react.PropTypes.object, | |
width: _react.PropTypes.string.isRequired | |
}; | |
InkBar.contextTypes = { | |
muiTheme: _react.PropTypes.object.isRequired | |
}; | |
exports.default = InkBar; | |
/***/ }, | |
/* 165 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var TabTemplate = function (_Component) { | |
_inherits(TabTemplate, _Component); | |
function TabTemplate() { | |
_classCallCheck(this, TabTemplate); | |
return _possibleConstructorReturn(this, Object.getPrototypeOf(TabTemplate).apply(this, arguments)); | |
} | |
_createClass(TabTemplate, [{ | |
key: 'render', | |
value: function render() { | |
var styles = { | |
width: '100%', | |
position: 'relative', | |
textAlign: 'initial' | |
}; | |
if (!this.props.selected) { | |
styles.height = 0; | |
styles.overflow = 'hidden'; | |
} | |
return _react2.default.createElement( | |
'div', | |
{ style: styles }, | |
this.props.children | |
); | |
} | |
}]); | |
return TabTemplate; | |
}(_react.Component); | |
TabTemplate.propTypes = { | |
children: _react.PropTypes.node, | |
selected: _react.PropTypes.bool | |
}; | |
exports.default = TabTemplate; | |
/***/ }, | |
/* 166 */ | |
/***/ function(module, exports, __webpack_require__) { | |
'use strict'; | |
Object.defineProperty(exports, "__esModule", { | |
value: true | |
}); | |
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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | |
var _simpleAssign = __webpack_require__(2); | |
var _simpleAssign2 = _interopRequireDefault(_simpleAssign); | |
var _react = __webpack_require__(1); | |
var _react2 = _interopRequireDefault(_react); | |
var _reactDom = __webpack_require__(4); | |
var _reactDom2 = _interopRequireDefault(_reactDom); | |
var _TabTemplate = __webpack_require__(165); | |
var _TabTemplate2 = _interopRequireDefault(_TabTemplate); | |
var _InkBar = __webpack_require__(164); | |
var _InkBar2 = _interopRequireDefault(_InkBar); | |
var _warning = __webpack_require__(6); | |
var _warning2 = _interopRequireDefault(_warning); | |
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
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; } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
function getStyles(props, context) { | |
var tabs = context.muiTheme.tabs; | |
return { | |
tabItemContainer: { | |
width: '100%', | |
backgroundColor: tabs.backgroundColor, | |
whiteSpace: 'nowrap' | |
} | |
}; | |
} | |
var Tabs = function (_Component) { | |
_inherits(Tabs, _Component); | |
function Tabs() { | |
var _Object$getPrototypeO; | |
var _temp, _this, _ret; | |
_classCallCheck(this, Tabs); | |
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
args[_key] = arguments[_key]; | |
} | |
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tabs)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { selectedIndex: 0 }, _this.handleTabTouchTap = function (value, event, 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, event, tab); | |
} | |
_this.setState({ selectedIndex: tabIndex }); | |
if (tab.props.onActive) { | |
tab.props.onActive(tab); | |
} | |
}, _temp), _possibleConstructorReturn(_this, _ret); | |
} | |
_createClass(Tabs, [{ | |
key: 'componentWillMount', | |
value: function componentWillMount() { | |
var valueLink = this.getValueLink(this.props); | |
var initialIndex = this.props.initialSelectedIndex; | |
this.setState({ | |
selectedIndex: valueLink.value !== undefined ? this.getSelectedIndex(this.props) : initialIndex < this.getTabCount() ? initialIndex : 0 | |
}); | |
} | |
}, { | |
key: 'componentWillReceiveProps', | |
value: function componentWillReceiveProps(newProps, nextContext) { | |
var valueLink = this.getValueLink(newProps); | |
var newState = { | |
muiTheme: nextContext.muiTheme || this.context.muiTheme | |
}; | |
if (valueLink.value !== undefined) { | |
newState.selectedIndex = this.getSelectedIndex(newProps); | |
} | |
this.setState(newState); | |
} | |
}, { | |
key: 'getEvenWidth', | |
value: function getEvenWidth() { | |
return parseInt(window.getComputedStyle(_reactDom2.default.findDOMNode(this)).getPropertyValue('width'), 10); | |
} | |
}, { | |
key: 'getTabs', | |
value: function getTabs() { | |
var tabs = []; | |
_react2.default.Children.forEach(this.props.children, function (tab) { | |
if (_react2.default.isValidElement(tab)) { | |
tabs.push(tab); | |
} | |
}); | |
return tabs; | |
} | |
}, { | |
key: 'getTabCount', | |
value: function getTabCount() { | |
return this.getTabs().length; | |
} | |
// Do not use outside of this component, it will be removed once valueLink is deprecated | |
}, { | |
key: 'getValueLink', | |
value: function getValueLink(props) { | |
return props.valueLink || { | |
value: props.value, | |
requestChange: props.onChange | |
}; | |
} | |
}, { | |
key: 'getSelectedIndex', | |
value: function getSelectedIndex(props) { | |
var valueLink = this.getValueLink(props); | |
var selectedIndex = -1; | |
this.getTabs().forEach(function (tab, index) { | |
if (valueLink.value === tab.props.value) { | |
selectedIndex = index; | |
} | |
}); | |
return selectedIndex; | |
} | |
}, { | |
key: 'getSelected', | |
value: function getSelected(tab, index) { | |
var valueLink = this.getValueLink(this.props); | |
return valueLink.value ? valueLink.value === tab.props.value : this.state.selectedIndex === index; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var _this2 = this; | |
var _props = this.props; | |
var contentContainerClassName = _props.contentContainerClassName; | |
var contentContainerStyle = _props.contentContainerStyle; | |
var initialSelectedIndex = _props.initialSelectedIndex; | |
var // eslint-disable-line no-unused-vars | |
inkBarStyle = _props.inkBarStyle; | |
var style = _props.style; | |
var tabItemContainerStyle = _props.tabItemContainerStyle; | |
var tabTemplate = _props.tabTemplate; | |
var other = _objectWithoutProperties(_props, ['contentContainerClassName', 'contentContainerStyle', 'initialSelectedIndex', 'inkBarStyle', 'style', 'tabItemContainerStyle', 'tabTemplate']); | |
var prepareStyles = this.context.muiTheme.prepareStyles; | |
var styles = getStyles(this.props, this.context); | |
var valueLink = this.getValueLink(this.props); | |
var tabValue = valueLink.value; | |
var tabContent = []; | |
var width = 100 / this.getTabCount(); | |
var tabs = this.getTabs().map(function (tab, index) { | |
true ? (0, _warning2.default)(tab.type && tab.type.muiName === 'Tab', 'Tabs only accepts Tab Components as children.\n Found ' + (tab.type.muiName || tab.type) + ' as child number ' + (index + 1) + ' of Tabs') : void 0; | |
true ? (0, _warning2.default)(!tabValue || tab.props.value !== undefined, 'Tabs value prop has been passed, but Tab ' + index + '\n does not have a value prop. Needs value if Tabs is going\n to be a controlled component.') : void 0; | |
tabContent.push(tab.props.children ? _react2.default.createElement(tabTemplate || _TabTemplate2.default, { | |
key: index, | |
selected: _this2.getSelected(tab, index) | |
}, tab.props.children) : undefined); | |
return _react2.default.cloneElement(tab, { | |
key: index, | |
selected: _this2.getSelected(tab, index), | |
tabIndex: index, | |
width: width + '%', |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment