From 8c575ba59d387e6653f859867a9324f0bdb7bb08 Mon Sep 17 00:00:00 2001 From: Ericat Date: Wed, 1 Jul 2015 01:33:55 +0100 Subject: [PATCH] First commit --- react-map/app.js | 18 + react-map/bin/get_data | 8 + react-map/client/react/app.jsx | 66 + react-map/client/react/components/header.jsx | 15 + .../client/react/components/location.jsx | 47 + react-map/client/react/components/map.jsx | 55 + react-map/client/react/components/sidebar.jsx | 74 + react-map/client/react/styles/styles.jsx | 54 + react-map/dist/bundle.js | 42257 ++++++++++++++++ react-map/gulpfile.js | 48 + react-map/package.json | 42 + react-map/public/css/screen.css | 32 + react-map/public/groups.json | 3034 ++ react-map/public/img/meetup-icon.png | Bin 0 -> 3037 bytes react-map/public/js/app.js | 3 + react-map/public/js/jquery.min.js | 5 + react-map/public/lib/all.js | 17 + react-map/public/lib/all.min.js | 4 + react-map/public/sass/screen.scss | 32 + react-map/server.js | 6 + react-map/views/index.jade | 10 + 21 files changed, 45827 insertions(+) create mode 100644 react-map/app.js create mode 100644 react-map/bin/get_data create mode 100644 react-map/client/react/app.jsx create mode 100644 react-map/client/react/components/header.jsx create mode 100644 react-map/client/react/components/location.jsx create mode 100644 react-map/client/react/components/map.jsx create mode 100644 react-map/client/react/components/sidebar.jsx create mode 100644 react-map/client/react/styles/styles.jsx create mode 100644 react-map/dist/bundle.js create mode 100644 react-map/gulpfile.js create mode 100644 react-map/package.json create mode 100644 react-map/public/css/screen.css create mode 100644 react-map/public/groups.json create mode 100644 react-map/public/img/meetup-icon.png create mode 100644 react-map/public/js/app.js create mode 100644 react-map/public/js/jquery.min.js create mode 100644 react-map/public/lib/all.js create mode 100644 react-map/public/lib/all.min.js create mode 100644 react-map/public/sass/screen.scss create mode 100644 react-map/server.js create mode 100644 react-map/views/index.jade diff --git a/react-map/app.js b/react-map/app.js new file mode 100644 index 0000000..b4a0a39 --- /dev/null +++ b/react-map/app.js @@ -0,0 +1,18 @@ +var path = require('path'); +var express = require('express'); +var app = express(); +var morgan = require('morgan'); +var env = process.env.NODE_ENV || 'development'; + +module.exports = app; + +app.set('env', process.env.NODE_ENV || 'development'); +app.set('port', process.env.PORT || 3000); +app.set('views', path.join(__dirname, 'views')); +app.use(express.static(path.join(__dirname, 'public'))); +app.use(express.static(path.join(__dirname, 'dist'))); +app.set('view engine', 'jade'); + +app.get('/', function(req, res, next) { + res.render('index'); +}); diff --git a/react-map/bin/get_data b/react-map/bin/get_data new file mode 100644 index 0000000..c694837 --- /dev/null +++ b/react-map/bin/get_data @@ -0,0 +1,8 @@ +#!/usr/bin/env node + +var app = require(__dirname + '/../app'); +var request = require('request'); +var fs = require('fs'); + +request('http://reactjs.meetup.com/newest/json/New+reactjs+Groups').pipe(fs.createWriteStream('./public/groups.json')); + diff --git a/react-map/client/react/app.jsx b/react-map/client/react/app.jsx new file mode 100644 index 0000000..b532ef2 --- /dev/null +++ b/react-map/client/react/app.jsx @@ -0,0 +1,66 @@ +'use strict'; + +import React from 'react/addons'; +import Header from './components/header'; +import MapContainer from './components/map'; +import CitiesContainer from './components/sidebar'; +import {MapContainerStyle, CitiesContainerStyle} from './styles/styles'; + +class App extends React.Component { + constructor(props) { + super(props); + this.state = { + locations: [], + currentLocation: { + lat: 48.86, + lng: 2.34, + id: 779 + } + }; + } + + componentDidMount() { + $.ajax({ + url: this.props.url, + dataType: 'json', + cache: false, + success: function(res) { + this.setState({ locations: res }); + }.bind(this), + error: function(xhr, status, err) { + console.error(status, err.toString()); + }.bind(this) + }); + } + + _handleClick(locationInfo) { + return this.setState({ currentLocation: locationInfo }); + } + + render() { + let coordsCentre = [this.state.currentLocation.lat, this.state.currentLocation.lng]; + + return ( +
+
+
+
+ +
+
+ +
+
+
+ ) + } +} + +React.render(, document.getElementById('main')); diff --git a/react-map/client/react/components/header.jsx b/react-map/client/react/components/header.jsx new file mode 100644 index 0000000..e734f1c --- /dev/null +++ b/react-map/client/react/components/header.jsx @@ -0,0 +1,15 @@ +'use strict'; + +import React from 'react/addons'; + +class Header extends React.Component { + render() { + return ( +
+

React.JS Meetup

+
+ ) + } +} + +export default Header; diff --git a/react-map/client/react/components/location.jsx b/react-map/client/react/components/location.jsx new file mode 100644 index 0000000..6fe7ce1 --- /dev/null +++ b/react-map/client/react/components/location.jsx @@ -0,0 +1,47 @@ +'use strict'; + +import React from 'react/addons'; +import {PropTypes} from 'react/addons'; +import PureComponent from 'react-pure-render/component'; +import {LocationContainerStyle} from './../styles/styles'; + +class LocationContainer extends PureComponent { + constructor(props) { + super(props); + this.state = { 'hover': false }; + } + + _handleMouseEnter() { + this.setState({ 'hover': true }); + } + + _handleMouseLeave() { + this.setState({ 'hover': false }); + } + + render() { + let locationData; + let imgUrl = this.props.img; + let id = this.props.id; + let pinClass = this.state.hover ? 'selected ' : ''; + + LocationContainerStyle.backgroundImage = `url(${imgUrl})`; + LocationContainerStyle.border = this.props.selectedClass ? '2px solid #000' : '2px solid #f44336'; + + if (this.props.selectedClass) { + pinClass += 'selected'; + } + + return ( +
+ ); + } +} + +LocationContainer.defaultProps = {}; + +export default LocationContainer; diff --git a/react-map/client/react/components/map.jsx b/react-map/client/react/components/map.jsx new file mode 100644 index 0000000..9d163bd --- /dev/null +++ b/react-map/client/react/components/map.jsx @@ -0,0 +1,55 @@ +'use strict'; + +import React from 'react/addons'; +import GoogleMap from 'google-map-react'; +import LocationContainer from './location.jsx'; +import PureComponent from 'react-pure-render/component'; +let coordsCentre = [50.938043, 10.337157]; + +class MapContainer extends PureComponent { + constructor(props) { + super(props); + } + + _renderLocations() { + let locationImg; + let selectedClass; + let locationsContainers = []; + let locations = this.props.locations; + + for (let location of locations) { + locationImg = location.photo_urls.thumb === undefined ? + '/img/meetup-icon.png' : + location.photo_urls.thumb; + + selectedClass = this.props.currentLocation.id === location.number ? 'selected' : ''; + + locationsContainers.push( + + ) + } + return locationsContainers; + } + + render() { + let locationsContainers = this._renderLocations(); + let currentLocation = this.props.currentLocation; + + return ( + + {locationsContainers} + + ); + } +} + +export default MapContainer; diff --git a/react-map/client/react/components/sidebar.jsx b/react-map/client/react/components/sidebar.jsx new file mode 100644 index 0000000..82f45af --- /dev/null +++ b/react-map/client/react/components/sidebar.jsx @@ -0,0 +1,74 @@ +'use strict'; + +import React from 'react/addons'; +import { List, ListItem, Avatar } from 'material-ui'; +import {cityStyle, membersStyle} from './../styles/styles'; + +let mui = require('material-ui'); +let ThemeManager = new mui.Styles.ThemeManager(); +let injectTapEventPlugin = require('react-tap-event-plugin'); + +injectTapEventPlugin(); +window.React = React; + +class CitiesContainer extends React.Component { + constructor(props) { + super(props); + } + + getChildContext() { + return { muiTheme: ThemeManager.getCurrentTheme() }; + } + + _handleClick(locationData) { + this.props.onChildClick(locationData); + } + + _renderCities() { + let locationImg; + let locationData; + let citiesContainers = []; + let locations = this.props.locations; + let currentLocation = this.props.currentLocation; + + for (let location of locations) { + locationImg = location.photo_urls.thumb === undefined ? + '/img/meetup-icon.png' : + location.photo_urls.thumb; + + locationData = { + lat: location.lat, + lng: location.lon, + id: location.number + }; + + citiesContainers.push( + } + secondaryText={ +

+ {location.city} +   {location.member_count} members +

+ } + key={locations.indexOf(location)}>{location.name}  + ) + } + return citiesContainers; + } + + render() { + let cityListItems = this._renderCities(); + + return ( + + {cityListItems} + + ); + } +} + +CitiesContainer.childContextTypes = { muiTheme: React.PropTypes.object }; + +export default CitiesContainer; diff --git a/react-map/client/react/styles/styles.jsx b/react-map/client/react/styles/styles.jsx new file mode 100644 index 0000000..0bdf917 --- /dev/null +++ b/react-map/client/react/styles/styles.jsx @@ -0,0 +1,54 @@ +const K_WIDTH = 40; +const K_HEIGHT = 40; + +let Colors = require('material-ui/lib/styles/colors'); + +export const LocationContainerStyle = { + position: 'absolute', + width: K_WIDTH, + height: K_HEIGHT, + left: -K_WIDTH / 2, + top: -K_HEIGHT / 2, + + borderRadius: '50%', + textAlign: 'center', + color: '#3f51b5', + fontSize: 16, + fontWeight: 'bold', + padding: 4, + backgroundSize: '100%', + backgroundColor: 'white' +}; + +export const MapContainerStyle = { + zIndex: -1, + position: 'absolute', + width: '70%', + right: 0, + height: 700, + paddingTop: 30, + borderBottom: '3px solid #f44336' +}; + +export const CitiesContainerStyle = { + zIndex: -1, + position: 'absolute', + width: '30%', + left: 0, + height: 700, + paddingTop: 30, + borderBottom: '3px solid #f44336', + overflow: 'scroll' +} + +export const cityStyle = { + color: Colors.darkBlack, + textTransform: 'uppercase', + fontWeight: '500', + fontSize: '13px' +}; +export const membersStyle = { + fontStyle: 'italic', + fontSize: '12px' +}; + diff --git a/react-map/dist/bundle.js b/react-map/dist/bundle.js new file mode 100644 index 0000000..a4a825d --- /dev/null +++ b/react-map/dist/bundle.js @@ -0,0 +1,42257 @@ +(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o 1) { + for (var i = 1; i < arguments.length; i++) { + args[i - 1] = arguments[i]; + } + } + queue.push(new Item(fun, args)); + if (queue.length === 1 && !draining) { + setTimeout(drainQueue, 0); + } +}; + +// v8 likes predictible objects +function Item(fun, array) { + this.fun = fun; + this.array = array; +} +Item.prototype.run = function () { + this.fun.apply(null, this.array); +}; +process.title = 'browser'; +process.browser = true; +process.env = {}; +process.argv = []; +process.version = ''; // empty string to avoid regexp issues +process.versions = {}; + +function noop() {} + +process.on = noop; +process.addListener = noop; +process.once = noop; +process.off = noop; +process.removeListener = noop; +process.removeAllListeners = noop; +process.emit = noop; + +process.binding = function (name) { + throw new Error('process.binding is not supported'); +}; + +// TODO(shtylman) +process.cwd = function () { return '/' }; +process.chdir = function (dir) { + throw new Error('process.chdir is not supported'); +}; +process.umask = function() { return 0; }; + +},{}],8:[function(require,module,exports){ +(function (process){ +'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 _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; + +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 _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) subClass.__proto__ = superClass; } + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _reactPureRenderFunction = require('react-pure-render/function'); + +var _reactPureRenderFunction2 = _interopRequireDefault(_reactPureRenderFunction); + +var _marker_dispatcherJs = require('./marker_dispatcher.js'); + +var _marker_dispatcherJs2 = _interopRequireDefault(_marker_dispatcherJs); + +var _google_map_mapJs = require('./google_map_map.js'); + +var _google_map_mapJs2 = _interopRequireDefault(_google_map_mapJs); + +var _google_map_markersJs = require('./google_map_markers.js'); + +var _google_map_markersJs2 = _interopRequireDefault(_google_map_markersJs); + +var _google_map_markers_prerenderJs = require('./google_map_markers_prerender.js'); + +var _google_map_markers_prerenderJs2 = _interopRequireDefault(_google_map_markers_prerenderJs); + +var _utilsLoadersGoogle_map_loaderJs = require('./utils/loaders/google_map_loader.js'); + +var _utilsLoadersGoogle_map_loaderJs2 = _interopRequireDefault(_utilsLoadersGoogle_map_loaderJs); + +var _utilsDetectJs = require('./utils/detect.js'); + +var _utilsDetectJs2 = _interopRequireDefault(_utilsDetectJs); + +var _utilsGeoJs = require('./utils/geo.js'); + +var _utilsGeoJs2 = _interopRequireDefault(_utilsGeoJs); + +var _utilsArray_helperJs = require('./utils/array_helper.js'); + +var _utilsArray_helperJs2 = _interopRequireDefault(_utilsArray_helperJs); + +var _lodashIsfunction = require('lodash.isfunction'); + +var _lodashIsfunction2 = _interopRequireDefault(_lodashIsfunction); + +var _lodashIsplainobject = require('lodash.isplainobject'); + +var _lodashIsplainobject2 = _interopRequireDefault(_lodashIsplainobject); + +var _lodashPick = require('lodash.pick'); + +var _lodashPick2 = _interopRequireDefault(_lodashPick); + +var _lodashAssign = require('lodash.assign'); + +var _lodashAssign2 = _interopRequireDefault(_lodashAssign); + +var _lodashIsnumber = require('lodash.isnumber'); + +var _lodashIsnumber2 = _interopRequireDefault(_lodashIsnumber); + +var kEPS = 0.00001; +var K_GOOGLE_TILE_SIZE = 256; + +function defaultOptions_() { + return { + overviewMapControl: false, + streetViewControl: false, + rotateControl: true, + mapTypeControl: false, + // disable poi + styles: [{ featureType: 'poi', elementType: 'labels', stylers: [{ visibility: 'off' }] }], + minZoom: 3 // i need to dynamically calculate possible zoom value + }; +} + +var style = { + width: '100%', + height: '100%', + margin: 0, + padding: 0, + position: 'relative' +}; + +var GoogleMap = (function (_Component) { + function GoogleMap(props) { + var _this = this; + + _classCallCheck(this, GoogleMap); + + _get(Object.getPrototypeOf(GoogleMap.prototype), 'constructor', this).call(this, props); + this.shouldComponentUpdate = _reactPureRenderFunction2['default']; + + this._initMap = function () { + var center = _this.props.center; + _this.geoService_.setView(center, _this.props.zoom, 0); + + _this._onBoundsChanged(); // now we can calculate map bounds center etc... + + _this.props.googleMapLoader(_this.props.apiKey).then(function (maps) { + if (!_this.mounted_) { + return; + } + + var centerLatLng = _this.geoService_.getCenter(); + + var propsOptions = { + zoom: _this.props.zoom, + center: new maps.LatLng(centerLatLng.lat, centerLatLng.lng) + }; + + // prevent to exapose full api + // next props must be exposed (console.log(Object.keys(pick(maps, isPlainObject)))) + // "Animation", "ControlPosition", "MapTypeControlStyle", "MapTypeId", + // "NavigationControlStyle", "ScaleControlStyle", "StrokePosition", "SymbolPath", "ZoomControlStyle", + // "event", "DirectionsStatus", "DirectionsTravelMode", "DirectionsUnitSystem", "DistanceMatrixStatus", + // "DistanceMatrixElementStatus", "ElevationStatus", "GeocoderLocationType", "GeocoderStatus", "KmlLayerStatus", + // "MaxZoomStatus", "StreetViewStatus", "TransitMode", "TransitRoutePreference", "TravelMode", "UnitSystem" + var mapPlainObjects = (0, _lodashPick2['default'])(maps, _lodashIsplainobject2['default']); + var options = (0, _lodashIsfunction2['default'])(_this.props.options) ? _this.props.options(mapPlainObjects) : _this.props.options; + var defaultOptions = defaultOptions_(mapPlainObjects); + + var mapOptions = _extends({}, defaultOptions, options, propsOptions); + + var map = new maps.Map(_react2['default'].findDOMNode(_this.refs.google_map_dom), mapOptions); + _this.map_ = map; + _this.maps_ = maps; + + // render in overlay + var this_ = _this; + var overlay = (0, _lodashAssign2['default'])(new maps.OverlayView(), { + onAdd: function onAdd() { + var K_MAX_WIDTH = typeof screen !== 'undefined' ? '' + screen.width + 'px' : '2000px'; + var K_MAX_HEIGHT = typeof screen !== 'undefined' ? '' + screen.height + 'px' : '2000px'; + + var div = document.createElement('div'); + this.div = div; + div.style.backgroundColor = 'transparent'; + div.style.position = 'absolute'; + div.style.left = '0px'; + div.style.top = '0px'; + div.style.width = K_MAX_WIDTH; // prevents some chrome draw defects + div.style.height = K_MAX_HEIGHT; + + var panes = this.getPanes(); + panes.overlayMouseTarget.appendChild(div); + + _react2['default'].render(_react2['default'].createElement(_google_map_markersJs2['default'], { + onChildClick: this_._onChildClick, + onChildMouseEnter: this_._onChildMouseEnter, + onChildMouseLeave: this_._onChildMouseLeave, + geoService: this_.geoService_, + projectFromLeftTop: true, + distanceToMouse: this_.props.distanceToMouse, + hoverDistance: this_.props.hoverDistance, + dispatcher: this_.markersDispatcher_ }), div, function () { + // remove prerendered markers + this_.setState({ overlayCreated: true }); + }); + }, + + draw: function draw() { + var div = overlay.div; + var overlayProjection = overlay.getProjection(); + var bounds = map.getBounds(); + var ne = bounds.getNorthEast(); + var sw = bounds.getSouthWest(); + var ptx = overlayProjection.fromLatLngToDivPixel(new maps.LatLng(ne.lat(), sw.lng())); + + // need round for safari still can't find what need for firefox + var ptxRounded = (0, _utilsDetectJs2['default'])().isSafari ? { x: Math.round(ptx.x), y: Math.round(ptx.y) } : { x: ptx.x, y: ptx.y }; + + this_.updateCounter_++; + this_._onBoundsChanged(map, maps, !this_.props.debounced); + + div.style.left = '' + ptxRounded.x + 'px'; + div.style.top = '' + ptxRounded.y + 'px'; + if (this_.markersDispatcher_) { + this_.markersDispatcher_.emit('kON_CHANGE'); + } + } + }); + + overlay.setMap(map); + + maps.event.addListener(map, 'idle', function () { + if (_this.resetSizeOnIdle_) { + _this._setViewSize(); + _this.resetSizeOnIdle_ = false; + } + + var div = overlay.div; + var overlayProjection = overlay.getProjection(); + var bounds = map.getBounds(); + var ne = bounds.getNorthEast(); + var sw = bounds.getSouthWest(); + var ptx = overlayProjection.fromLatLngToDivPixel(new maps.LatLng(ne.lat(), sw.lng())); + // need round for safari still can't find what need for firefox + var ptxRounded = (0, _utilsDetectJs2['default'])().isSafari ? { x: Math.round(ptx.x), y: Math.round(ptx.y) } : { x: ptx.x, y: ptx.y }; + + this_.updateCounter_++; + this_._onBoundsChanged(map, maps); + + this_.dragTime_ = 0; + div.style.left = '' + ptxRounded.x + 'px'; + div.style.top = '' + ptxRounded.y + 'px'; + if (this_.markersDispatcher_) { + this_.markersDispatcher_.emit('kON_CHANGE'); + if (this_.fireMouseEventOnIdle_) { + this_.markersDispatcher_.emit('kON_MOUSE_POSITION_CHANGE'); + } + } + }); + + maps.event.addListener(map, 'mouseover', function () { + // has advantage over div MouseLeave + this_.mouseInMap_ = true; + }); + + maps.event.addListener(map, 'mouseout', function () { + // has advantage over div MouseLeave + this_.mouseInMap_ = false; + this_.mouse_ = null; + this_.markersDispatcher_.emit('kON_MOUSE_POSITION_CHANGE'); + }); + + maps.event.addListener(map, 'drag', function () { + this_.dragTime_ = new Date().getTime(); + }); + })['catch'](function (e) { + console.error(e); // eslint-disable-line no-console + throw e; + }); + }; + + this._onChildClick = function () { + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + if (_this.props.onChildClick) { + var _props; + + return (_props = _this.props).onChildClick.apply(_props, args); + } + }; + + this._onChildMouseEnter = function () { + for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { + args[_key2] = arguments[_key2]; + } + + if (_this.props.onChildMouseEnter) { + var _props2; + + return (_props2 = _this.props).onChildMouseEnter.apply(_props2, args); + } + }; + + this._onChildMouseLeave = function () { + for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { + args[_key3] = arguments[_key3]; + } + + if (_this.props.onChildMouseLeave) { + var _props3; + + return (_props3 = _this.props).onChildMouseLeave.apply(_props3, args); + } + }; + + this._setViewSize = function () { + var mapDom = _react2['default'].findDOMNode(_this.refs.google_map_dom); + _this.geoService_.setViewSize(mapDom.clientWidth, mapDom.clientHeight); + _this._onBoundsChanged(); + }; + + this._onWindowResize = function () { + _this.resetSizeOnIdle_ = true; + }; + + this._onBoundsChanged = function (map, maps, callExtBoundsChange) { + if (map) { + var gmC = map.getCenter(); + _this.geoService_.setView([gmC.lat(), gmC.lng()], map.getZoom(), 0); + } + + if (_this.props.onBoundsChange && _this.geoService_.canProject()) { + var zoom = _this.geoService_.getZoom(); + var bounds = _this.geoService_.getBounds(); + var centerLatLng = _this.geoService_.getCenter(); + + if (!(0, _utilsArray_helperJs2['default'])(bounds, _this.prevBounds_, kEPS)) { + if (callExtBoundsChange !== false) { + var marginBounds = _this.geoService_.getBounds(_this.props.margin); + _this.props.onBoundsChange([centerLatLng.lat, centerLatLng.lng], zoom, bounds, marginBounds); + _this.prevBounds_ = bounds; + } + } + // uncomment for strange bugs + if (process.env.NODE_ENV !== 'production') { + // compare with google calculations + if (map) { + var locBounds = map.getBounds(); + var ne = locBounds.getNorthEast(); + var sw = locBounds.getSouthWest(); + + var gmC = map.getCenter(); + // compare with google map + + if (!(0, _utilsArray_helperJs2['default'])([centerLatLng.lat, centerLatLng.lng], [gmC.lat(), gmC.lng()], kEPS)) { + console.info('GoogleMap center not eq:', [centerLatLng.lat, centerLatLng.lng], [gmC.lat(), gmC.lng()]); // eslint-disable-line no-console + } + + if (!(0, _utilsArray_helperJs2['default'])(bounds, [ne.lat(), sw.lng(), sw.lat(), ne.lng()], kEPS)) { + // this is normal if this message occured on resize + console.info('GoogleMap bounds not eq:', '\n', bounds, '\n', [ne.lat(), sw.lng(), sw.lat(), ne.lng()]); // eslint-disable-line no-console + } + } + } + } + }; + + this._onMouseMove = function (e) { + if (!_this.mouseInMap_) return; + + var currTime = new Date().getTime(); + var K_RECALC_CLIENT_RECT_MS = 3000; + + if (currTime - _this.mouseMoveTime_ > K_RECALC_CLIENT_RECT_MS) { + _this.boundingRect_ = e.currentTarget.getBoundingClientRect(); + } + _this.mouseMoveTime_ = currTime; + + var mousePosX = e.clientX - _this.boundingRect_.left; + var mousePosY = e.clientY - _this.boundingRect_.top; + + if (!_this.mouse_) { + _this.mouse_ = { x: 0, y: 0, lat: 0, lng: 0 }; + } + var K_IDLE_TIMEOUT = 100; + + _this.mouse_.x = mousePosX; + _this.mouse_.y = mousePosY; + + var latLng = _this.geoService_.unproject(_this.mouse_, true); + _this.mouse_.lat = latLng.lat; + _this.mouse_.lng = latLng.lng; + + if (currTime - _this.dragTime_ < K_IDLE_TIMEOUT) { + _this.fireMouseEventOnIdle_ = true; + } else { + _this.markersDispatcher_.emit('kON_MOUSE_POSITION_CHANGE'); + _this.fireMouseEventOnIdle_ = false; + } + }; + + this._onMapClick = function () { + if (_this.markersDispatcher_) { + var K_IDLE_TIMEOUT = 100; + var currTime = new Date().getTime(); + if (currTime - _this.dragTime_ > K_IDLE_TIMEOUT) { + _this.markersDispatcher_.emit('kON_CLICK'); + } + } + }; + + this._isCenterDefined = function (center) { + return center && center.length === 2 && (0, _lodashIsnumber2['default'])(center[0]) && (0, _lodashIsnumber2['default'])(center[1]); + }; + + this.mounted_ = false; + + this.map_ = null; + this.maps_ = null; + this.prevBounds_ = null; + + this.mouse_ = null; + this.mouseMoveTime_ = 0; + this.boundingRect_ = null; + this.mouseInMap_ = true; + + this.dragTime_ = 0; + this.fireMouseEventOnIdle_ = false; + this.updateCounter_ = 0; + + this.markersDispatcher_ = new _marker_dispatcherJs2['default'](this); + this.geoService_ = new _utilsGeoJs2['default'](K_GOOGLE_TILE_SIZE); + if (this._isCenterDefined(this.props.center)) { + this.geoService_.setView(this.props.center, this.props.zoom, 0); + } + + this.state = { + overlayCreated: false + }; + } + + _inherits(GoogleMap, _Component); + + _createClass(GoogleMap, [{ + key: 'componentDidMount', + value: function componentDidMount() { + var _this2 = this; + + this.mounted_ = true; + window.addEventListener('resize', this._onWindowResize); + + setTimeout(function () { + // to detect size + _this2._setViewSize(); + if (_this2._isCenterDefined(_this2.props.center)) { + _this2._initMap(); + } else { + _this2.props.googleMapLoader(_this2.props.apiKey); // начать подгружать можно уже сейчас + } + }, 0, this); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this.mounted_ = false; + + window.removeEventListener('resize', this._onWindowResize); + + if (this.maps_ && this.map_) { + this.maps_.event.clearInstanceListeners(this.map_); + } + + this.map_ = null; + this.maps_ = null; + this.markersDispatcher_.dispose(); + + this.resetSizeOnIdle_ = false; + + delete this.map_; + delete this.markersDispatcher_; + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + var _this3 = this; + + if (!this._isCenterDefined(this.props.center) && this._isCenterDefined(nextProps.center)) { + setTimeout(function () { + return _this3._initMap(); + }, 0); + } + + if (this.map_) { + var centerLatLng = this.geoService_.getCenter(); + if (nextProps.center) { + if (Math.abs(nextProps.center[0] - centerLatLng.lat) + Math.abs(nextProps.center[1] - centerLatLng.lng) > kEPS) { + this.map_.panTo({ lat: nextProps.center[0], lng: nextProps.center[1] }); + } + } + + // if zoom chaged by user + if (Math.abs(nextProps.zoom - this.props.zoom) > 0) { + this.map_.setZoom(nextProps.zoom); + } + } + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + this.markersDispatcher_.emit('kON_CHANGE'); + } + }, { + key: 'render', + value: function render() { + var mapMarkerPrerender = !this.state.overlayCreated ? _react2['default'].createElement(_google_map_markers_prerenderJs2['default'], { + onChildClick: this._onChildClick, + onChildMouseEnter: this._onChildMouseEnter, + onChildMouseLeave: this._onChildMouseLeave, + geoService: this.geoService_, + projectFromLeftTop: false, + distanceToMouse: this.props.distanceToMouse, + hoverDistance: this.props.hoverDistance, + dispatcher: this.markersDispatcher_ }) : null; + + return _react2['default'].createElement( + 'div', + { style: style, onMouseMove: this._onMouseMove, onClick: this._onMapClick }, + _react2['default'].createElement(_google_map_mapJs2['default'], { ref: 'google_map_dom' }), + mapMarkerPrerender + ); + } + }], [{ + key: 'propTypes', + value: { + apiKey: _react.PropTypes.string, + center: _react.PropTypes.array.isRequired, + zoom: _react.PropTypes.number.isRequired, + onBoundsChange: _react.PropTypes.func, + onChildClick: _react.PropTypes.func, + onChildMouseEnter: _react.PropTypes.func, + onChildMouseLeave: _react.PropTypes.func, + options: _react.PropTypes.any, + distanceToMouse: _react.PropTypes.func, + hoverDistance: _react.PropTypes.number, + debounced: _react.PropTypes.bool, + margin: _react.PropTypes.array, + googleMapLoader: _react.PropTypes.any + }, + enumerable: true + }, { + key: 'defaultProps', + value: { + distanceToMouse: function distanceToMouse(pt, mousePos /*, markerProps*/) { + var x = pt.x; + var y = pt.y; // - 20; + return Math.sqrt((x - mousePos.x) * (x - mousePos.x) + (y - mousePos.y) * (y - mousePos.y)); + }, + hoverDistance: 30, + debounced: true, + options: defaultOptions_, + googleMapLoader: _utilsLoadersGoogle_map_loaderJs2['default'] + }, + enumerable: true + }]); + + return GoogleMap; +})(_react.Component); + +exports['default'] = GoogleMap; +module.exports = exports['default']; +/*maps*/ /*render markers before map load done*/ +}).call(this,require('_process')) + +},{"./google_map_map.js":9,"./google_map_markers.js":10,"./google_map_markers_prerender.js":11,"./marker_dispatcher.js":13,"./utils/array_helper.js":14,"./utils/detect.js":15,"./utils/geo.js":16,"./utils/loaders/google_map_loader.js":20,"_process":7,"lodash.assign":22,"lodash.isfunction":33,"lodash.isnumber":34,"lodash.isplainobject":35,"lodash.pick":41,"react":357,"react-pure-render/function":54}],9:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, '__esModule', { + value: true +}); + +var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); + +var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; + +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 _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) subClass.__proto__ = superClass; } + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var style = { + width: '100%', + height: '100%', + left: 0, + top: 0, + margin: 0, + padding: 0, + position: 'absolute' +}; + +var GoogleMapMap = (function (_Component) { + function GoogleMapMap(props) { + _classCallCheck(this, GoogleMapMap); + + _get(Object.getPrototypeOf(GoogleMapMap.prototype), 'constructor', this).call(this, props); + } + + _inherits(GoogleMapMap, _Component); + + _createClass(GoogleMapMap, [{ + key: 'shouldComponentUpdate', + value: function shouldComponentUpdate() { + return false; // disable react on this div + } + }, { + key: 'render', + value: function render() { + return _react2['default'].createElement('div', { style: style }); + } + }]); + + return GoogleMapMap; +})(_react.Component); + +exports['default'] = GoogleMapMap; +module.exports = exports['default']; +},{"react":357}],10:[function(require,module,exports){ +'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 _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; + +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 _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) subClass.__proto__ = superClass; } + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _reactPureRenderFunction = require('react-pure-render/function'); + +var _reactPureRenderFunction2 = _interopRequireDefault(_reactPureRenderFunction); + +var mainStyle = { + width: '100%', + height: '100%', + left: 0, + top: 0, + margin: 0, + padding: 0, + position: 'absolute' +}; + +var style = { + width: 0, + height: 0, + left: 0, + top: 0, + backgroundColor: 'transparent', + position: 'absolute' +}; + +var GoogleMapMarkers = (function (_Component) { + function GoogleMapMarkers(props) { + var _this = this; + + _classCallCheck(this, GoogleMapMarkers); + + _get(Object.getPrototypeOf(GoogleMapMarkers.prototype), 'constructor', this).call(this, props); + this.shouldComponentUpdate = _reactPureRenderFunction2['default']; + + this._getState = function () { + return { + children: _this.props.dispatcher.getChildren(), + updateCounter: _this.props.dispatcher.getUpdateCounter() + }; + }; + + this._onChangeHandler = function () { + if (!_this.dimesionsCache_) { + return; + } + + var state = _this._getState(); + _this.setState(state); + }; + + this._onChildClick = function () { + if (_this.props.onChildClick) { + if (_this.hoverChildProps_) { + var hoverKey = _this.hoverKey_; + var childProps = _this.hoverChildProps_; + // click works only on hovered item + _this.props.onChildClick(hoverKey, childProps); + } + } + }; + + this._onChildMouseEnter = function (hoverKey, childProps) { + if (!_this.dimesionsCache_) { + return; + } + + if (_this.props.onChildMouseEnter) { + _this.props.onChildMouseEnter(hoverKey, childProps); + } + + _this.hoverChildProps_ = childProps; + _this.hoverKey_ = hoverKey; + _this.setState({ hoverKey: hoverKey }); + }; + + this._onChildMouseLeave = function () { + if (!_this.dimesionsCache_) { + return; + } + + var hoverKey = _this.hoverKey_; + var childProps = _this.hoverChildProps_; + + if (hoverKey !== undefined && hoverKey !== null) { + if (_this.props.onChildMouseLeave) { + _this.props.onChildMouseLeave(hoverKey, childProps); + } + + _this.hoverKey_ = null; + _this.hoverChildProps_ = null; + _this.setState({ hoverKey: null }); + } + }; + + this._onMouseAllow = function (value) { + if (!value) { + _this._onChildMouseLeave(); + } + + _this.allowMouse_ = value; + }; + + this._onMouseChangeHandler = function () { + if (_this.allowMouse_) { + _this._onMouseChangeHandler_raf(); + } + }; + + this._onMouseChangeHandler_raf = function () { + if (!_this.dimesionsCache_) { + return; + } + + var mp = _this.props.dispatcher.getMousePosition(); + + if (mp) { + (function () { + var distances = []; + + _react2['default'].Children.forEach(_this.state.children, function (child, childIndex) { + var childKey = child.key !== undefined && child.key !== null ? child.key : childIndex; + var dist = _this.props.distanceToMouse(_this.dimesionsCache_[childKey], mp, child.props); + if (dist < _this.props.hoverDistance) { + distances.push({ + key: childKey, + dist: dist, + props: child.props + }); + } + }); + + if (distances.length) { + distances.sort(function (a, b) { + return a.dist - b.dist; + }); + var hoverKey = distances[0].key; + var childProps = distances[0].props; + + if (_this.hoverKey_ !== hoverKey) { + _this._onChildMouseLeave(); + + _this._onChildMouseEnter(hoverKey, childProps); + } + } else { + _this._onChildMouseLeave(); + } + })(); + } else { + _this._onChildMouseLeave(); + } + }; + + this._getDimensions = function (key) { + var childKey = key; + return _this.dimesionsCache_[childKey]; + }; + + this.props.dispatcher.on('kON_CHANGE', this._onChangeHandler); + this.props.dispatcher.on('kON_MOUSE_POSITION_CHANGE', this._onMouseChangeHandler); + this.props.dispatcher.on('kON_CLICK', this._onChildClick); + + this.dimesionsCache_ = {}; + this.hoverKey_ = null; + this.hoverChildProps_ = null; + this.allowMouse_ = true; + + this.state = _extends({}, this._getState(), { hoverKey: null }); + } + + _inherits(GoogleMapMarkers, _Component); + + _createClass(GoogleMapMarkers, [{ + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this.props.dispatcher.removeListener('kON_CHANGE', this._onChangeHandler); + this.props.dispatcher.removeListener('kON_MOUSE_POSITION_CHANGE', this._onMouseChangeHandler); + this.props.dispatcher.removeListener('kON_CLICK', this._onChildClick); + + this.dimesionsCache_ = null; + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var mainElementStyle = this.props.style || mainStyle; + + this.dimesionsCache_ = {}; + + var markers = _react2['default'].Children.map(this.state.children, function (child, childIndex) { + var pt = _this2.props.geoService.project({ lat: child.props.lat, lng: child.props.lng }, _this2.props.projectFromLeftTop); + var stylePtPos = { + left: pt.x, + top: pt.y + }; + + var dx = 0; + var dy = 0; + + if (!_this2.props.projectFromLeftTop) { + // center projection + if (_this2.props.geoService.hasSize()) { + dx = _this2.props.geoService.getWidth() / 2; + dy = _this2.props.geoService.getHeight() / 2; + } + } + + // to prevent rerender on child element i need to pass const params $getDimensions and $dimensionKey instead of dimension object + var childKey = child.key !== undefined && child.key !== null ? child.key : childIndex; + _this2.dimesionsCache_[childKey] = { x: pt.x + dx, y: pt.y + dy, lat: child.props.lat, lng: child.props.lng }; + + return _react2['default'].createElement( + 'div', + { key: childKey, style: _extends({}, style, stylePtPos) }, + _react2['default'].cloneElement(child, { + $hover: childKey === _this2.state.hoverKey, + $getDimensions: _this2._getDimensions, + $dimensionKey: childKey, + $geoService: _this2.props.geoService, + $onMouseAllow: _this2._onMouseAllow + }) + ); + }); + + return _react2['default'].createElement( + 'div', + { style: mainElementStyle }, + markers + ); + } + }], [{ + key: 'propTypes', + value: { + geoService: _react.PropTypes.any, + style: _react.PropTypes.any, + distanceToMouse: _react.PropTypes.func, + dispatcher: _react.PropTypes.any, + onChildClick: _react.PropTypes.func, + onChildMouseLeave: _react.PropTypes.func, + onChildMouseEnter: _react.PropTypes.func, + hoverDistance: _react.PropTypes.number, + projectFromLeftTop: _react.PropTypes.bool + }, + enumerable: true + }, { + key: 'defaultProps', + value: { + projectFromLeftTop: false + }, + enumerable: true + }]); + + return GoogleMapMarkers; +})(_react.Component); + +exports['default'] = GoogleMapMarkers; +module.exports = exports['default']; +},{"react":357,"react-pure-render/function":54}],11:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, '__esModule', { + value: true +}); + +var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); + +var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; + +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 _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) subClass.__proto__ = superClass; } + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _google_map_markersJs = require('./google_map_markers.js'); + +var _google_map_markersJs2 = _interopRequireDefault(_google_map_markersJs); + +var style = { + width: '50%', + height: '50%', + left: '50%', + top: '50%', + // backgroundColor: 'red', + margin: 0, + padding: 0, + position: 'absolute' + // opacity: 0.3 +}; + +var GoogleMapMarkersPrerender = (function (_Component) { + function GoogleMapMarkersPrerender(props) { + _classCallCheck(this, GoogleMapMarkersPrerender); + + _get(Object.getPrototypeOf(GoogleMapMarkersPrerender.prototype), 'constructor', this).call(this, props); + } + + _inherits(GoogleMapMarkersPrerender, _Component); + + _createClass(GoogleMapMarkersPrerender, [{ + key: 'render', + value: function render() { + return _react2['default'].createElement( + 'div', + { style: style }, + _react2['default'].createElement(_google_map_markersJs2['default'], this.props) + ); + } + }]); + + return GoogleMapMarkersPrerender; +})(_react.Component); + +exports['default'] = GoogleMapMarkersPrerender; +module.exports = exports['default']; +},{"./google_map_markers.js":10,"react":357}],12:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, '__esModule', { + value: true +}); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +var _google_mapJs = require('./google_map.js'); + +_defaults(exports, _interopRequireWildcard(_google_mapJs)); +},{"./google_map.js":8}],13:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, '__esModule', { + value: true +}); + +var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); + +var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; + +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 _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) subClass.__proto__ = superClass; } + +var _eventemitter3 = require('eventemitter3'); + +var _eventemitter32 = _interopRequireDefault(_eventemitter3); + +var MarkerDispatcher = (function (_EventEmitter) { + function MarkerDispatcher(gmapInstance) { + _classCallCheck(this, MarkerDispatcher); + + _get(Object.getPrototypeOf(MarkerDispatcher.prototype), 'constructor', this).call(this); + this.gmapInstance = gmapInstance; + } + + _inherits(MarkerDispatcher, _EventEmitter); + + _createClass(MarkerDispatcher, [{ + key: 'getChildren', + value: function getChildren() { + return this.gmapInstance.props.children; + } + }, { + key: 'getMousePosition', + value: function getMousePosition() { + return this.gmapInstance.mouse_; + } + }, { + key: 'getUpdateCounter', + value: function getUpdateCounter() { + return this.gmapInstance.updateCounter_; + } + }, { + key: 'dispose', + value: function dispose() { + this.gmapInstance = null; + this.removeAllListeners(); + } + }]); + + return MarkerDispatcher; +})(_eventemitter32['default']); + +exports['default'] = MarkerDispatcher; +module.exports = exports['default']; +},{"eventemitter3":21}],14:[function(require,module,exports){ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = isArraysEqualEps; + +function isArraysEqualEps(arrayA, arrayB, eps) { + if (arrayA && arrayB) { + for (var i = 0; i !== arrayA.length; ++i) { + if (Math.abs(arrayA[i] - arrayB[i]) > eps) { + return false; + } + } + return true; + } + return false; +} + +module.exports = exports["default"]; +},{}],15:[function(require,module,exports){ +// code here http://stackoverflow.com/questions/5899783/detect-safari-chrome-ie-firefox-opera-with-user-agent +'use strict'; + +Object.defineProperty(exports, '__esModule', { + value: true +}); +exports['default'] = detectBrowser; +var detectBrowserResult_ = null; + +function detectBrowser() { + if (detectBrowserResult_) { + return detectBrowserResult_; + } + + if (typeof navigator !== 'undefined') { + var isExplorer = navigator.userAgent.indexOf('MSIE') > -1; + var isFirefox = navigator.userAgent.indexOf('Firefox') > -1; + var isOpera = navigator.userAgent.toLowerCase().indexOf('op') > -1; + + var isChrome = navigator.userAgent.indexOf('Chrome') > -1; + var isSafari = navigator.userAgent.indexOf('Safari') > -1; + + if (isChrome && isSafari) { + isSafari = false; + } + + if (isChrome && isOpera) { + isChrome = false; + } + + detectBrowserResult_ = { isExplorer: isExplorer, isFirefox: isFirefox, isOpera: isOpera, isChrome: isChrome, isSafari: isSafari }; + return detectBrowserResult_; + } + + detectBrowserResult_ = { isChrome: true, isExplorer: false, isFirefox: false, isOpera: false, isSafari: false }; + return detectBrowserResult_; +} + +module.exports = exports['default']; +},{}],16:[function(require,module,exports){ +'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; }; })(); + +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'); } } + +var _lib_geoLat_lngJs = require('./lib_geo/lat_lng.js'); + +var _lib_geoLat_lngJs2 = _interopRequireDefault(_lib_geoLat_lngJs); + +var _pointGeometry = require('point-geometry'); + +var _pointGeometry2 = _interopRequireDefault(_pointGeometry); + +var _lib_geoTransformJs = require('./lib_geo/transform.js'); + +var _lib_geoTransformJs2 = _interopRequireDefault(_lib_geoTransformJs); + +var Geo = (function () { + function Geo(tileSize) { + _classCallCheck(this, Geo); + + // left_top view пользует гугл + // super(); + this.hasSize_ = false; + this.hasView_ = false; + this.transform_ = new _lib_geoTransformJs2['default'](tileSize || 512); + } + + _createClass(Geo, [{ + key: 'setView', + value: function setView(center, zoom, bearing) { + this.transform_.center = _lib_geoLat_lngJs2['default'].convert(center); + this.transform_.zoom = +zoom; + this.transform_.bearing = +bearing; + this.hasView_ = true; + } + }, { + key: 'setViewSize', + value: function setViewSize(width, height) { + this.transform_.width = width; + this.transform_.height = height; + this.hasSize_ = true; + } + }, { + key: 'canProject', + value: function canProject() { + return this.hasSize_ && this.hasView_; + } + }, { + key: 'hasSize', + value: function hasSize() { + return this.hasSize_; + } + }, { + key: 'unproject', + value: function unproject(ptXY, viewFromLeftTop) { + var ptRes = undefined; + if (viewFromLeftTop) { + var ptxy = _extends({}, ptXY); + ptxy.x -= this.transform_.width / 2; + ptxy.y -= this.transform_.height / 2; + ptRes = this.transform_.pointLocation(_pointGeometry2['default'].convert(ptxy)); + } else { + ptRes = this.transform_.pointLocation(_pointGeometry2['default'].convert(ptXY)); + } + + ptRes.lng -= 360 * Math.round(ptRes.lng / 360); // convert 2 google format + return ptRes; + } + }, { + key: 'project', + value: function project(ptLatLng, viewFromLeftTop) { + if (viewFromLeftTop) { + var pt = this.transform_.locationPoint(_lib_geoLat_lngJs2['default'].convert(ptLatLng)); + pt.x -= this.transform_.worldSize * Math.round(pt.x / this.transform_.worldSize); + + pt.x += this.transform_.width / 2; + pt.y += this.transform_.height / 2; + + return pt; + } + + return this.transform_.locationPoint(_lib_geoLat_lngJs2['default'].convert(ptLatLng)); + } + }, { + key: 'getWidth', + value: function getWidth() { + return this.transform_.width; + } + }, { + key: 'getHeight', + value: function getHeight() { + return this.transform_.height; + } + }, { + key: 'getZoom', + value: function getZoom() { + return this.transform_.zoom; + } + }, { + key: 'getCenter', + value: function getCenter() { + var ptRes = this.transform_.pointLocation({ x: 0, y: 0 }); + + return ptRes; + } + }, { + key: 'getBounds', + value: function getBounds(margins, roundFactor) { + var bndT = margins && margins[0] || 0; + var bndR = margins && margins[1] || 0; + var bndB = margins && margins[2] || 0; + var bndL = margins && margins[3] || 0; + + if (this.getWidth() - bndR - bndL > 0 && this.getHeight() - bndT - bndB > 0) { + var topLeftCorner = this.unproject({ x: bndL - this.getWidth() / 2, y: bndT - this.getHeight() / 2 }); + var bottomRightCorner = this.unproject({ x: this.getWidth() / 2 - bndR, y: this.getHeight() / 2 - bndB }); + + var res = [topLeftCorner.lat, topLeftCorner.lng, bottomRightCorner.lat, bottomRightCorner.lng]; + + if (roundFactor) { + res = res.map(function (r) { + return Math.round(r * roundFactor) / roundFactor; + }); + } + return res; + } + + return [0, 0, 0, 0]; + } + }]); + + return Geo; +})(); + +exports['default'] = Geo; +module.exports = exports['default']; +},{"./lib_geo/lat_lng.js":17,"./lib_geo/transform.js":18,"point-geometry":53}],17:[function(require,module,exports){ +'use strict'; + +module.exports = LatLng; + +var wrap = require('./wrap.js').wrap; + +function LatLng(lat, lng) { + if (isNaN(lat) || isNaN(lng)) { + throw new Error('Invalid LatLng object: (' + lat + ', ' + lng + ')'); + } + this.lat = +lat; + this.lng = +lng; +} + +LatLng.prototype.wrap = function () { + return new LatLng(this.lat, wrap(this.lng, -180, 180)); +}; + +// constructs LatLng from an array if necessary + +LatLng.convert = function (a) { + if (a instanceof LatLng) { + return a; + } + if (Array.isArray(a)) { + return new LatLng(a[0], a[1]); + } + return a; +}; +},{"./wrap.js":19}],18:[function(require,module,exports){ +'use strict'; + +var LatLng = require('./lat_lng'); +var Point = require('point-geometry'); +var wrap = require('./wrap.js').wrap; + +// A single transform, generally used for a single tile to be scaled, rotated, and zoomed. + +function Transform(tileSize, minZoom, maxZoom) { + this.tileSize = tileSize || 512; // constant + + this._minZoom = minZoom || 0; + this._maxZoom = maxZoom || 52; + + this.latRange = [-85.05113, 85.05113]; + + this.width = 0; + this.height = 0; + this.zoom = 0; + this.center = new LatLng(0, 0); + this.angle = 0; +} + +Transform.prototype = Object.defineProperties({ + + zoomScale: function zoomScale(zoom) { + return Math.pow(2, zoom); + }, + scaleZoom: function scaleZoom(scale) { + return Math.log(scale) / Math.LN2; + }, + + project: function project(latlng, worldSize) { + return new Point(this.lngX(latlng.lng, worldSize), this.latY(latlng.lat, worldSize)); + }, + + unproject: function unproject(point, worldSize) { + return new LatLng(this.yLat(point.y, worldSize), this.xLng(point.x, worldSize)); + }, + + // lat/lon <-> absolute pixel coords convertion + lngX: function lngX(lon, worldSize) { + return (180 + lon) * (worldSize || this.worldSize) / 360; + }, + // latitude to absolute y coord + latY: function latY(lat, worldSize) { + var y = 180 / Math.PI * Math.log(Math.tan(Math.PI / 4 + lat * Math.PI / 360)); + return (180 - y) * (worldSize || this.worldSize) / 360; + }, + + xLng: function xLng(x, worldSize) { + return x * 360 / (worldSize || this.worldSize) - 180; + }, + yLat: function yLat(y, worldSize) { + var y2 = 180 - y * 360 / (worldSize || this.worldSize); + return 360 / Math.PI * Math.atan(Math.exp(y2 * Math.PI / 180)) - 90; + }, + + locationPoint: function locationPoint(latlng) { + var p = this.project(latlng); + return this.centerPoint._sub(this.point._sub(p)._rotate(this.angle)); + }, + + pointLocation: function pointLocation(p) { + var p2 = this.centerPoint._sub(p)._rotate(-this.angle); + return this.unproject(this.point.sub(p2)); + } + +}, { + minZoom: { + get: function () { + return this._minZoom; + }, + set: function (zoom) { + this._minZoom = zoom; + this.zoom = Math.max(this.zoom, zoom); + }, + configurable: true, + enumerable: true + }, + maxZoom: { + get: function () { + return this._maxZoom; + }, + set: function (zoom) { + this._maxZoom = zoom; + this.zoom = Math.min(this.zoom, zoom); + }, + configurable: true, + enumerable: true + }, + worldSize: { + get: function () { + return this.tileSize * this.scale; + }, + configurable: true, + enumerable: true + }, + centerPoint: { + get: function () { + return new Point(0, 0); // this.size._div(2); + }, + configurable: true, + enumerable: true + }, + size: { + get: function () { + return new Point(this.width, this.height); + }, + configurable: true, + enumerable: true + }, + bearing: { + get: function () { + return -this.angle / Math.PI * 180; + }, + set: function (bearing) { + this.angle = -wrap(bearing, -180, 180) * Math.PI / 180; + }, + configurable: true, + enumerable: true + }, + zoom: { + get: function () { + return this._zoom; + }, + set: function (zoom) { + zoom = Math.min(Math.max(zoom, this.minZoom), this.maxZoom); + this._zoom = zoom; + this.scale = this.zoomScale(zoom); + this.tileZoom = Math.floor(zoom); + this.zoomFraction = zoom - this.tileZoom; + }, + configurable: true, + enumerable: true + }, + x: { + get: function () { + return this.lngX(this.center.lng); + }, + configurable: true, + enumerable: true + }, + y: { + get: function () { + return this.latY(this.center.lat); + }, + configurable: true, + enumerable: true + }, + point: { + get: function () { + return new Point(this.x, this.y); + }, + configurable: true, + enumerable: true + } +}); + +module.exports = Transform; +},{"./lat_lng":17,"./wrap.js":19,"point-geometry":53}],19:[function(require,module,exports){ +'use strict'; + +exports.wrap = function (n, min, max) { + var d = max - min; + return n === max ? n : ((n - min) % d + d) % d + min; +}; +},{}],20:[function(require,module,exports){ +'use strict'; + +var $script_ = null; + +var _loadPromise = undefined; + +// TODO add libraries language and other map options +module.exports = function googleMapLoader(apiKey) { + if (!$script_) { + $script_ = require('scriptjs'); + } + + if (_loadPromise) { + return _loadPromise; + } + + _loadPromise = new Promise(function (resolve, reject) { + if (typeof window === 'undefined') { + reject(new Error('google map cannot be loaded outside browser env')); + return; + } + + if (window.google && window.google.maps) { + resolve(window.google.maps); + return; + } + + if (typeof window._$_google_map_initialize_$_ !== 'undefined') { + reject(new Error('google map initialization error')); + } + + window._$_google_map_initialize_$_ = function () { + delete window._$_google_map_initialize_$_; + resolve(window.google.maps); + }; + + var apiKeyString = apiKey ? '&key=' + apiKey : ''; + + $script_('https://maps.googleapis.com/maps/api/js?callback=_$_google_map_initialize_$_' + apiKeyString, function () { + if (typeof window.google === 'undefined') { + reject(new Error('google map initialization error (not loaded)')); + } + }); + }); + + return _loadPromise; +}; +},{"scriptjs":56}],21:[function(require,module,exports){ +'use strict'; + +// +// We store our EE objects in a plain object whose properties are event names. +// If `Object.create(null)` is not supported we prefix the event names with a +// `~` to make sure that the built-in object properties are not overridden or +// used as an attack vector. +// We also assume that `Object.create(null)` is available when the event name +// is an ES6 Symbol. +// +var prefix = typeof Object.create !== 'function' ? '~' : false; + +/** + * Representation of a single EventEmitter function. + * + * @param {Function} fn Event handler to be called. + * @param {Mixed} context Context for function execution. + * @param {Boolean} once Only emit once + * @api private + */ +function EE(fn, context, once) { + this.fn = fn; + this.context = context; + this.once = once || false; +} + +/** + * Minimal EventEmitter interface that is molded against the Node.js + * EventEmitter interface. + * + * @constructor + * @api public + */ +function EventEmitter() { /* Nothing to set */ } + +/** + * Holds the assigned EventEmitters by name. + * + * @type {Object} + * @private + */ +EventEmitter.prototype._events = undefined; + +/** + * Return a list of assigned event listeners. + * + * @param {String} event The events that should be listed. + * @param {Boolean} exists We only need to know if there are listeners. + * @returns {Array|Boolean} + * @api public + */ +EventEmitter.prototype.listeners = function listeners(event, exists) { + var evt = prefix ? prefix + event : event + , available = this._events && this._events[evt]; + + if (exists) return !!available; + if (!available) return []; + if (available.fn) return [available.fn]; + + for (var i = 0, l = available.length, ee = new Array(l); i < l; i++) { + ee[i] = available[i].fn; + } + + return ee; +}; + +/** + * Emit an event to all registered event listeners. + * + * @param {String} event The name of the event. + * @returns {Boolean} Indication if we've emitted an event. + * @api public + */ +EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) { + var evt = prefix ? prefix + event : event; + + if (!this._events || !this._events[evt]) return false; + + var listeners = this._events[evt] + , len = arguments.length + , args + , i; + + if ('function' === typeof listeners.fn) { + if (listeners.once) this.removeListener(event, listeners.fn, undefined, true); + + switch (len) { + case 1: return listeners.fn.call(listeners.context), true; + case 2: return listeners.fn.call(listeners.context, a1), true; + case 3: return listeners.fn.call(listeners.context, a1, a2), true; + case 4: return listeners.fn.call(listeners.context, a1, a2, a3), true; + case 5: return listeners.fn.call(listeners.context, a1, a2, a3, a4), true; + case 6: return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true; + } + + for (i = 1, args = new Array(len -1); i < len; i++) { + args[i - 1] = arguments[i]; + } + + listeners.fn.apply(listeners.context, args); + } else { + var length = listeners.length + , j; + + for (i = 0; i < length; i++) { + if (listeners[i].once) this.removeListener(event, listeners[i].fn, undefined, true); + + switch (len) { + case 1: listeners[i].fn.call(listeners[i].context); break; + case 2: listeners[i].fn.call(listeners[i].context, a1); break; + case 3: listeners[i].fn.call(listeners[i].context, a1, a2); break; + default: + if (!args) for (j = 1, args = new Array(len -1); j < len; j++) { + args[j - 1] = arguments[j]; + } + + listeners[i].fn.apply(listeners[i].context, args); + } + } + } + + return true; +}; + +/** + * Register a new EventListener for the given event. + * + * @param {String} event Name of the event. + * @param {Functon} fn Callback function. + * @param {Mixed} context The context of the function. + * @api public + */ +EventEmitter.prototype.on = function on(event, fn, context) { + var listener = new EE(fn, context || this) + , evt = prefix ? prefix + event : event; + + if (!this._events) this._events = prefix ? {} : Object.create(null); + if (!this._events[evt]) this._events[evt] = listener; + else { + if (!this._events[evt].fn) this._events[evt].push(listener); + else this._events[evt] = [ + this._events[evt], listener + ]; + } + + return this; +}; + +/** + * Add an EventListener that's only called once. + * + * @param {String} event Name of the event. + * @param {Function} fn Callback function. + * @param {Mixed} context The context of the function. + * @api public + */ +EventEmitter.prototype.once = function once(event, fn, context) { + var listener = new EE(fn, context || this, true) + , evt = prefix ? prefix + event : event; + + if (!this._events) this._events = prefix ? {} : Object.create(null); + if (!this._events[evt]) this._events[evt] = listener; + else { + if (!this._events[evt].fn) this._events[evt].push(listener); + else this._events[evt] = [ + this._events[evt], listener + ]; + } + + return this; +}; + +/** + * Remove event listeners. + * + * @param {String} event The event we want to remove. + * @param {Function} fn The listener that we need to find. + * @param {Mixed} context Only remove listeners matching this context. + * @param {Boolean} once Only remove once listeners. + * @api public + */ +EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) { + var evt = prefix ? prefix + event : event; + + if (!this._events || !this._events[evt]) return this; + + var listeners = this._events[evt] + , events = []; + + if (fn) { + if (listeners.fn) { + if ( + listeners.fn !== fn + || (once && !listeners.once) + || (context && listeners.context !== context) + ) { + events.push(listeners); + } + } else { + for (var i = 0, length = listeners.length; i < length; i++) { + if ( + listeners[i].fn !== fn + || (once && !listeners[i].once) + || (context && listeners[i].context !== context) + ) { + events.push(listeners[i]); + } + } + } + } + + // + // Reset the array, or remove it completely if we have no more listeners. + // + if (events.length) { + this._events[evt] = events.length === 1 ? events[0] : events; + } else { + delete this._events[evt]; + } + + return this; +}; + +/** + * Remove all listeners or only the listeners for the specified event. + * + * @param {String} event The event want to remove all listeners for. + * @api public + */ +EventEmitter.prototype.removeAllListeners = function removeAllListeners(event) { + if (!this._events) return this; + + if (event) delete this._events[prefix ? prefix + event : event]; + else this._events = prefix ? {} : Object.create(null); + + return this; +}; + +// +// Alias methods names because people roll like that. +// +EventEmitter.prototype.off = EventEmitter.prototype.removeListener; +EventEmitter.prototype.addListener = EventEmitter.prototype.on; + +// +// This function doesn't apply anymore. +// +EventEmitter.prototype.setMaxListeners = function setMaxListeners() { + return this; +}; + +// +// Expose the prefix. +// +EventEmitter.prefixed = prefix; + +// +// Expose the module. +// +if ('undefined' !== typeof module) { + module.exports = EventEmitter; +} + +},{}],22:[function(require,module,exports){ +/** + * lodash 3.2.0 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ +var baseAssign = require('lodash._baseassign'), + createAssigner = require('lodash._createassigner'), + keys = require('lodash.keys'); + +/** + * A specialized version of `_.assign` for customizing assigned values without + * support for argument juggling, multiple sources, and `this` binding `customizer` + * functions. + * + * @private + * @param {Object} object The destination object. + * @param {Object} source The source object. + * @param {Function} customizer The function to customize assigned values. + * @returns {Object} Returns `object`. + */ +function assignWith(object, source, customizer) { + var index = -1, + props = keys(source), + length = props.length; + + while (++index < length) { + var key = props[index], + value = object[key], + result = customizer(value, source[key], key, object, source); + + if ((result === result ? (result !== value) : (value === value)) || + (value === undefined && !(key in object))) { + object[key] = result; + } + } + return object; +} + +/** + * Assigns own enumerable properties of source object(s) to the destination + * object. Subsequent sources overwrite property assignments of previous sources. + * If `customizer` is provided it is invoked to produce the assigned values. + * The `customizer` is bound to `thisArg` and invoked with five arguments: + * (objectValue, sourceValue, key, object, source). + * + * **Note:** This method mutates `object` and is based on + * [`Object.assign`](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.assign). + * + * @static + * @memberOf _ + * @alias extend + * @category Object + * @param {Object} object The destination object. + * @param {...Object} [sources] The source objects. + * @param {Function} [customizer] The function to customize assigned values. + * @param {*} [thisArg] The `this` binding of `customizer`. + * @returns {Object} Returns `object`. + * @example + * + * _.assign({ 'user': 'barney' }, { 'age': 40 }, { 'user': 'fred' }); + * // => { 'user': 'fred', 'age': 40 } + * + * // using a customizer callback + * var defaults = _.partialRight(_.assign, function(value, other) { + * return _.isUndefined(value) ? other : value; + * }); + * + * defaults({ 'user': 'barney' }, { 'age': 36 }, { 'user': 'fred' }); + * // => { 'user': 'barney', 'age': 36 } + */ +var assign = createAssigner(function(object, source, customizer) { + return customizer + ? assignWith(object, source, customizer) + : baseAssign(object, source); +}); + +module.exports = assign; + +},{"lodash._baseassign":23,"lodash._createassigner":25,"lodash.keys":29}],23:[function(require,module,exports){ +/** + * lodash 3.2.0 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ +var baseCopy = require('lodash._basecopy'), + keys = require('lodash.keys'); + +/** + * The base implementation of `_.assign` without support for argument juggling, + * multiple sources, and `customizer` functions. + * + * @private + * @param {Object} object The destination object. + * @param {Object} source The source object. + * @returns {Object} Returns `object`. + */ +function baseAssign(object, source) { + return source == null + ? object + : baseCopy(source, keys(source), object); +} + +module.exports = baseAssign; + +},{"lodash._basecopy":24,"lodash.keys":29}],24:[function(require,module,exports){ +/** + * lodash 3.0.1 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ + +/** + * 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 baseCopy(source, props, object) { + object || (object = {}); + + var index = -1, + length = props.length; + + while (++index < length) { + var key = props[index]; + object[key] = source[key]; + } + return object; +} + +module.exports = baseCopy; + +},{}],25:[function(require,module,exports){ +/** + * lodash 3.1.1 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ +var bindCallback = require('lodash._bindcallback'), + isIterateeCall = require('lodash._isiterateecall'), + restParam = require('lodash.restparam'); + +/** + * Creates a function that assigns properties of source object(s) to a given + * destination object. + * + * **Note:** This function is used to create `_.assign`, `_.defaults`, and `_.merge`. + * + * @private + * @param {Function} assigner The function to assign values. + * @returns {Function} Returns the new assigner function. + */ +function createAssigner(assigner) { + return restParam(function(object, sources) { + var index = -1, + length = object == null ? 0 : sources.length, + customizer = length > 2 ? sources[length - 2] : undefined, + guard = length > 2 ? sources[2] : undefined, + thisArg = length > 1 ? sources[length - 1] : undefined; + + if (typeof customizer == 'function') { + customizer = bindCallback(customizer, thisArg, 5); + length -= 2; + } else { + customizer = typeof thisArg == 'function' ? thisArg : undefined; + length -= (customizer ? 1 : 0); + } + if (guard && isIterateeCall(sources[0], sources[1], guard)) { + customizer = length < 3 ? undefined : customizer; + length = 1; + } + while (++index < length) { + var source = sources[index]; + if (source) { + assigner(object, source, customizer); + } + } + return object; + }); +} + +module.exports = createAssigner; + +},{"lodash._bindcallback":26,"lodash._isiterateecall":27,"lodash.restparam":28}],26:[function(require,module,exports){ +/** + * lodash 3.0.1 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ + +/** + * A specialized version of `baseCallback` which only supports `this` binding + * and specifying the number of arguments to provide to `func`. + * + * @private + * @param {Function} func The function to bind. + * @param {*} thisArg The `this` binding of `func`. + * @param {number} [argCount] The number of arguments to provide to `func`. + * @returns {Function} Returns the callback. + */ +function bindCallback(func, thisArg, argCount) { + if (typeof func != 'function') { + return identity; + } + if (thisArg === undefined) { + return func; + } + switch (argCount) { + case 1: return function(value) { + return func.call(thisArg, value); + }; + case 3: return function(value, index, collection) { + return func.call(thisArg, value, index, collection); + }; + case 4: return function(accumulator, value, index, collection) { + return func.call(thisArg, accumulator, value, index, collection); + }; + case 5: return function(value, other, key, object, source) { + return func.call(thisArg, value, other, key, object, source); + }; + } + return function() { + return func.apply(thisArg, arguments); + }; +} + +/** + * This method returns the first argument provided to it. + * + * @static + * @memberOf _ + * @category Utility + * @param {*} value Any value. + * @returns {*} Returns `value`. + * @example + * + * var object = { 'user': 'fred' }; + * + * _.identity(object) === object; + * // => true + */ +function identity(value) { + return value; +} + +module.exports = bindCallback; + +},{}],27:[function(require,module,exports){ +/** + * lodash 3.0.9 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ + +/** Used to detect unsigned integer values. */ +var reIsUint = /^\d+$/; + +/** + * Used as the [maximum length](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-number.max_safe_integer) + * of an array-like value. + */ +var MAX_SAFE_INTEGER = 9007199254740991; + +/** + * 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]; + }; +} + +/** + * 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 `value` is array-like. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is array-like, else `false`. + */ +function isArrayLike(value) { + return value != null && isLength(getLength(value)); +} + +/** + * 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; +} + +/** + * Checks if the provided 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)) { + var other = object[index]; + return value === value ? (value === other) : (other !== other); + } + return false; +} + +/** + * Checks if `value` is a valid array-like length. + * + * **Note:** This function is based on [`ToLength`](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-tolength). + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a valid length, else `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(1); + * // => false + */ +function isObject(value) { + // Avoid a V8 JIT bug in Chrome 19-20. + // See https://code.google.com/p/v8/issues/detail?id=2291 for more details. + var type = typeof value; + return !!value && (type == 'object' || type == 'function'); +} + +module.exports = isIterateeCall; + +},{}],28:[function(require,module,exports){ +/** + * lodash 3.6.1 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ + +/** Used as the `TypeError` message for "Functions" methods. */ +var FUNC_ERROR_TEXT = 'Expected a function'; + +/* Native method references for those with the same name as other `lodash` methods. */ +var nativeMax = Math.max; + +/** + * Creates a function that invokes `func` with the `this` binding of the + * created function and arguments from `start` and beyond provided as an array. + * + * **Note:** This method is based on the [rest parameter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters). + * + * @static + * @memberOf _ + * @category Function + * @param {Function} func The function to apply a rest parameter to. + * @param {number} [start=func.length-1] The start position of the rest parameter. + * @returns {Function} Returns the new function. + * @example + * + * var say = _.restParam(function(what, names) { + * return what + ' ' + _.initial(names).join(', ') + + * (_.size(names) > 1 ? ', & ' : '') + _.last(names); + * }); + * + * say('hello', 'fred', 'barney', 'pebbles'); + * // => 'hello fred, barney, & pebbles' + */ +function restParam(func, start) { + if (typeof func != 'function') { + throw new TypeError(FUNC_ERROR_TEXT); + } + start = nativeMax(start === undefined ? (func.length - 1) : (+start || 0), 0); + return function() { + var args = arguments, + index = -1, + length = nativeMax(args.length - start, 0), + rest = Array(length); + + while (++index < length) { + rest[index] = args[start + index]; + } + switch (start) { + case 0: return func.call(this, rest); + case 1: return func.call(this, args[0], rest); + case 2: return func.call(this, args[0], args[1], rest); + } + var otherArgs = Array(start + 1); + index = -1; + while (++index < start) { + otherArgs[index] = args[index]; + } + otherArgs[start] = rest; + return func.apply(this, otherArgs); + }; +} + +module.exports = restParam; + +},{}],29:[function(require,module,exports){ +/** + * lodash 3.1.1 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ +var getNative = require('lodash._getnative'), + isArguments = require('lodash.isarguments'), + isArray = require('lodash.isarray'); + +/** Used to detect unsigned integer values. */ +var reIsUint = /^\d+$/; + +/** Used for native method references. */ +var objectProto = Object.prototype; + +/** Used to check objects for own properties. */ +var hasOwnProperty = objectProto.hasOwnProperty; + +/* Native method references for those with the same name as other `lodash` methods. */ +var nativeKeys = getNative(Object, 'keys'); + +/** + * Used as the [maximum length](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-number.max_safe_integer) + * of an array-like value. + */ +var MAX_SAFE_INTEGER = 9007199254740991; + +/** + * 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]; + }; +} + +/** + * 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 `value` is array-like. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is array-like, else `false`. + */ +function isArrayLike(value) { + return value != null && isLength(getLength(value)); +} + +/** + * 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; +} + +/** + * Checks if `value` is a valid array-like length. + * + * **Note:** This function is based on [`ToLength`](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-tolength). + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a valid length, else `false`. + */ +function isLength(value) { + return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER; +} + +/** + * A fallback implementation of `Object.keys` which creates an array of the + * own enumerable property names of `object`. + * + * @private + * @param {Object} object The object to query. + * @returns {Array} Returns the array of property names. + */ +function shimKeys(object) { + var props = keysIn(object), + propsLength = props.length, + length = propsLength && object.length; + + var allowIndexes = !!length && isLength(length) && + (isArray(object) || isArguments(object)); + + var index = -1, + result = []; + + while (++index < propsLength) { + var key = props[index]; + if ((allowIndexes && isIndex(key, length)) || hasOwnProperty.call(object, key)) { + result.push(key); + } + } + return result; +} + +/** + * 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(1); + * // => false + */ +function isObject(value) { + // Avoid a V8 JIT bug in Chrome 19-20. + // See https://code.google.com/p/v8/issues/detail?id=2291 for more details. + var type = typeof value; + return !!value && (type == 'object' || type == 'function'); +} + +/** + * Creates an array of the own enumerable property names of `object`. + * + * **Note:** Non-object values are coerced to objects. See the + * [ES spec](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.keys) + * for more details. + * + * @static + * @memberOf _ + * @category Object + * @param {Object} object The object to query. + * @returns {Array} Returns the array of property names. + * @example + * + * function Foo() { + * this.a = 1; + * this.b = 2; + * } + * + * Foo.prototype.c = 3; + * + * _.keys(new Foo); + * // => ['a', 'b'] (iteration order is not guaranteed) + * + * _.keys('hi'); + * // => ['0', '1'] + */ +var keys = !nativeKeys ? shimKeys : function(object) { + var Ctor = object == null ? null : object.constructor; + if ((typeof Ctor == 'function' && Ctor.prototype === object) || + (typeof object != 'function' && isArrayLike(object))) { + return shimKeys(object); + } + return isObject(object) ? nativeKeys(object) : []; +}; + +/** + * Creates an array of the own and inherited enumerable property names of `object`. + * + * **Note:** Non-object values are coerced to objects. + * + * @static + * @memberOf _ + * @category Object + * @param {Object} object The object to query. + * @returns {Array} Returns the array of property names. + * @example + * + * function Foo() { + * this.a = 1; + * this.b = 2; + * } + * + * Foo.prototype.c = 3; + * + * _.keysIn(new Foo); + * // => ['a', 'b', 'c'] (iteration order is not guaranteed) + */ +function keysIn(object) { + if (object == null) { + return []; + } + if (!isObject(object)) { + object = Object(object); + } + var length = object.length; + length = (length && isLength(length) && + (isArray(object) || isArguments(object)) && length) || 0; + + var Ctor = object.constructor, + index = -1, + isProto = typeof Ctor == 'function' && Ctor.prototype === object, + result = Array(length), + skipIndexes = length > 0; + + while (++index < length) { + result[index] = (index + ''); + } + for (var key in object) { + if (!(skipIndexes && isIndex(key, length)) && + !(key == 'constructor' && (isProto || !hasOwnProperty.call(object, key)))) { + result.push(key); + } + } + return result; +} + +module.exports = keys; + +},{"lodash._getnative":30,"lodash.isarguments":31,"lodash.isarray":32}],30:[function(require,module,exports){ +/** + * lodash 3.9.0 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ + +/** `Object#toString` result references. */ +var funcTag = '[object Function]'; + +/** + * Used to match `RegExp` [special characters](http://www.regular-expressions.info/characters.html#special). + * In addition to special characters the forward slash is escaped to allow for + * easier `eval` use and `Function` compilation. + */ +var reRegExpChars = /[.*+?^${}()|[\]\/\\]/g, + reHasRegExpChars = RegExp(reRegExpChars.source); + +/** Used to detect host constructors (Safari > 5). */ +var reIsHostCtor = /^\[object .+?Constructor\]$/; + +/** + * Converts `value` to a string if it's not one. An empty string is returned + * for `null` or `undefined` values. + * + * @private + * @param {*} value The value to process. + * @returns {string} Returns the string. + */ +function baseToString(value) { + if (typeof value == 'string') { + return value; + } + return value == null ? '' : (value + ''); +} + +/** + * Checks if `value` is object-like. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is object-like, else `false`. + */ +function isObjectLike(value) { + return !!value && typeof value == 'object'; +} + +/** Used for native method references. */ +var objectProto = Object.prototype; + +/** Used to resolve the decompiled source of functions. */ +var fnToString = Function.prototype.toString; + +/** Used to check objects for own properties. */ +var hasOwnProperty = objectProto.hasOwnProperty; + +/** + * Used to resolve the [`toStringTag`](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.prototype.tostring) + * of values. + */ +var objToString = objectProto.toString; + +/** Used to detect if a method is native. */ +var reIsNative = RegExp('^' + + escapeRegExp(fnToString.call(hasOwnProperty)) + .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$' +); + +/** + * Gets the native function at `key` of `object`. + * + * @private + * @param {Object} object The object to query. + * @param {string} key The key of the method to get. + * @returns {*} Returns the function if it's native, else `undefined`. + */ +function getNative(object, key) { + var value = object == null ? undefined : object[key]; + return isNative(value) ? value : undefined; +} + +/** + * Checks if `value` is a native function. + * + * @static + * @memberOf _ + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a native function, else `false`. + * @example + * + * _.isNative(Array.prototype.push); + * // => true + * + * _.isNative(_); + * // => false + */ +function isNative(value) { + if (value == null) { + return false; + } + if (objToString.call(value) == funcTag) { + return reIsNative.test(fnToString.call(value)); + } + return isObjectLike(value) && reIsHostCtor.test(value); +} + +/** + * Escapes the `RegExp` special characters "\", "/", "^", "$", ".", "|", "?", + * "*", "+", "(", ")", "[", "]", "{" and "}" in `string`. + * + * @static + * @memberOf _ + * @category String + * @param {string} [string=''] The string to escape. + * @returns {string} Returns the escaped string. + * @example + * + * _.escapeRegExp('[lodash](https://lodash.com/)'); + * // => '\[lodash\]\(https:\/\/lodash\.com\/\)' + */ +function escapeRegExp(string) { + string = baseToString(string); + return (string && reHasRegExpChars.test(string)) + ? string.replace(reRegExpChars, '\\$&') + : string; +} + +module.exports = getNative; + +},{}],31:[function(require,module,exports){ +/** + * lodash 3.0.3 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ + +/** `Object#toString` result references. */ +var argsTag = '[object Arguments]'; + +/** + * Checks if `value` is object-like. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is object-like, else `false`. + */ +function isObjectLike(value) { + return !!value && typeof value == 'object'; +} + +/** Used for native method references. */ +var objectProto = Object.prototype; + +/** + * Used to resolve the [`toStringTag`](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.prototype.tostring) + * of values. + */ +var objToString = objectProto.toString; + +/** + * Used as the [maximum length](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-number.max_safe_integer) + * of an array-like value. + */ +var MAX_SAFE_INTEGER = 9007199254740991; + +/** + * 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]; + }; +} + +/** + * 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 `value` is array-like. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is array-like, else `false`. + */ +function isArrayLike(value) { + return value != null && isLength(getLength(value)); +} + +/** + * Checks if `value` is a valid array-like length. + * + * **Note:** This function is based on [`ToLength`](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-tolength). + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a valid length, else `false`. + */ +function isLength(value) { + return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER; +} + +/** + * Checks if `value` is classified as 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) { + return isObjectLike(value) && isArrayLike(value) && objToString.call(value) == argsTag; +} + +module.exports = isArguments; + +},{}],32:[function(require,module,exports){ +/** + * lodash 3.0.3 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ + +/** `Object#toString` result references. */ +var arrayTag = '[object Array]', + funcTag = '[object Function]'; + +/** + * Used to match `RegExp` [special characters](http://www.regular-expressions.info/characters.html#special). + * In addition to special characters the forward slash is escaped to allow for + * easier `eval` use and `Function` compilation. + */ +var reRegExpChars = /[.*+?^${}()|[\]\/\\]/g, + reHasRegExpChars = RegExp(reRegExpChars.source); + +/** Used to detect host constructors (Safari > 5). */ +var reIsHostCtor = /^\[object .+?Constructor\]$/; + +/** + * Converts `value` to a string if it's not one. An empty string is returned + * for `null` or `undefined` values. + * + * @private + * @param {*} value The value to process. + * @returns {string} Returns the string. + */ +function baseToString(value) { + if (typeof value == 'string') { + return value; + } + return value == null ? '' : (value + ''); +} + +/** + * Checks if `value` is object-like. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is object-like, else `false`. + */ +function isObjectLike(value) { + return !!value && typeof value == 'object'; +} + +/** Used for native method references. */ +var objectProto = Object.prototype; + +/** Used to resolve the decompiled source of functions. */ +var fnToString = Function.prototype.toString; + +/** Used to check objects for own properties. */ +var hasOwnProperty = objectProto.hasOwnProperty; + +/** + * Used to resolve the [`toStringTag`](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.prototype.tostring) + * of values. + */ +var objToString = objectProto.toString; + +/** Used to detect if a method is native. */ +var reIsNative = RegExp('^' + + escapeRegExp(fnToString.call(hasOwnProperty)) + .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$' +); + +/* Native method references for those with the same name as other `lodash` methods. */ +var nativeIsArray = getNative(Array, 'isArray'); + +/** + * Used as the [maximum length](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-number.max_safe_integer) + * of an array-like value. + */ +var MAX_SAFE_INTEGER = 9007199254740991; + +/** + * Gets the native function at `key` of `object`. + * + * @private + * @param {Object} object The object to query. + * @param {string} key The key of the method to get. + * @returns {*} Returns the function if it's native, else `undefined`. + */ +function getNative(object, key) { + var value = object == null ? undefined : object[key]; + return isNative(value) ? value : undefined; +} + +/** + * Checks if `value` is a valid array-like length. + * + * **Note:** This function is based on [`ToLength`](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-tolength). + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a valid length, else `false`. + */ +function isLength(value) { + return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER; +} + +/** + * Checks if `value` is classified as an `Array` object. + * + * @static + * @memberOf _ + * @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(function() { return arguments; }()); + * // => false + */ +var isArray = nativeIsArray || function(value) { + return isObjectLike(value) && isLength(value.length) && objToString.call(value) == arrayTag; +}; + +/** + * Checks if `value` is a native function. + * + * @static + * @memberOf _ + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a native function, else `false`. + * @example + * + * _.isNative(Array.prototype.push); + * // => true + * + * _.isNative(_); + * // => false + */ +function isNative(value) { + if (value == null) { + return false; + } + if (objToString.call(value) == funcTag) { + return reIsNative.test(fnToString.call(value)); + } + return isObjectLike(value) && reIsHostCtor.test(value); +} + +/** + * Escapes the `RegExp` special characters "\", "/", "^", "$", ".", "|", "?", + * "*", "+", "(", ")", "[", "]", "{" and "}" in `string`. + * + * @static + * @memberOf _ + * @category String + * @param {string} [string=''] The string to escape. + * @returns {string} Returns the escaped string. + * @example + * + * _.escapeRegExp('[lodash](https://lodash.com/)'); + * // => '\[lodash\]\(https:\/\/lodash\.com\/\)' + */ +function escapeRegExp(string) { + string = baseToString(string); + return (string && reHasRegExpChars.test(string)) + ? string.replace(reRegExpChars, '\\$&') + : string; +} + +module.exports = isArray; + +},{}],33:[function(require,module,exports){ +(function (global){ +/** + * lodash 3.0.5 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ + +/** `Object#toString` result references. */ +var funcTag = '[object Function]'; + +/** + * Used to match `RegExp` [special characters](http://www.regular-expressions.info/characters.html#special). + * In addition to special characters the forward slash is escaped to allow for + * easier `eval` use and `Function` compilation. + */ +var reRegExpChars = /[.*+?^${}()|[\]\/\\]/g, + reHasRegExpChars = RegExp(reRegExpChars.source); + +/** Used to detect host constructors (Safari > 5). */ +var reIsHostCtor = /^\[object .+?Constructor\]$/; + +/** + * The base implementation of `_.isFunction` without support for environments + * with incorrect `typeof` results. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is correctly classified, else `false`. + */ +function baseIsFunction(value) { + // Avoid a Chakra JIT bug in compatibility modes of IE 11. + // See https://github.com/jashkenas/underscore/issues/1621 for more details. + return typeof value == 'function' || false; +} + +/** + * Converts `value` to a string if it's not one. An empty string is returned + * for `null` or `undefined` values. + * + * @private + * @param {*} value The value to process. + * @returns {string} Returns the string. + */ +function baseToString(value) { + if (typeof value == 'string') { + return value; + } + return value == null ? '' : (value + ''); +} + +/** + * Checks if `value` is object-like. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is object-like, else `false`. + */ +function isObjectLike(value) { + return !!value && typeof value == 'object'; +} + +/** Used for native method references. */ +var objectProto = Object.prototype; + +/** Used to resolve the decompiled source of functions. */ +var fnToString = Function.prototype.toString; + +/** Used to check objects for own properties. */ +var hasOwnProperty = objectProto.hasOwnProperty; + +/** + * Used to resolve the [`toStringTag`](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.prototype.tostring) + * of values. + */ +var objToString = objectProto.toString; + +/** Used to detect if a method is native. */ +var reIsNative = RegExp('^' + + escapeRegExp(fnToString.call(hasOwnProperty)) + .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$' +); + +/** Native method references. */ +var Uint8Array = getNative(global, 'Uint8Array'); + +/** + * Gets the native function at `key` of `object`. + * + * @private + * @param {Object} object The object to query. + * @param {string} key The key of the method to get. + * @returns {*} Returns the function if it's native, else `undefined`. + */ +function getNative(object, key) { + var value = object == null ? undefined : object[key]; + return isNative(value) ? value : undefined; +} + +/** + * 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 + */ +var isFunction = !(baseIsFunction(/x/) || (Uint8Array && !baseIsFunction(Uint8Array))) ? baseIsFunction : function(value) { + // The use of `Object#toString` avoids issues with the `typeof` operator + // in older versions of Chrome and Safari which return 'function' for regexes + // and Safari 8 equivalents which return 'object' for typed array constructors. + return objToString.call(value) == funcTag; +}; + +/** + * Checks if `value` is a native function. + * + * @static + * @memberOf _ + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a native function, else `false`. + * @example + * + * _.isNative(Array.prototype.push); + * // => true + * + * _.isNative(_); + * // => false + */ +function isNative(value) { + if (value == null) { + return false; + } + if (objToString.call(value) == funcTag) { + return reIsNative.test(fnToString.call(value)); + } + return isObjectLike(value) && reIsHostCtor.test(value); +} + +/** + * Escapes the `RegExp` special characters "\", "/", "^", "$", ".", "|", "?", + * "*", "+", "(", ")", "[", "]", "{" and "}" in `string`. + * + * @static + * @memberOf _ + * @category String + * @param {string} [string=''] The string to escape. + * @returns {string} Returns the escaped string. + * @example + * + * _.escapeRegExp('[lodash](https://lodash.com/)'); + * // => '\[lodash\]\(https:\/\/lodash\.com\/\)' + */ +function escapeRegExp(string) { + string = baseToString(string); + return (string && reHasRegExpChars.test(string)) + ? string.replace(reRegExpChars, '\\$&') + : string; +} + +module.exports = isFunction; + +}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) + +},{}],34:[function(require,module,exports){ +/** + * lodash 3.0.1 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.2 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ + +/** `Object#toString` result references. */ +var numberTag = '[object Number]'; + +/** + * Checks if `value` is object-like. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is object-like, else `false`. + */ +function isObjectLike(value) { + return !!value && typeof value == 'object'; +} + +/** Used for native method references. */ +var objectProto = Object.prototype; + +/** + * Used to resolve the [`toStringTag`](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.prototype.tostring) + * of values. + */ +var objToString = objectProto.toString; + +/** + * Checks if `value` is classified as a `Number` primitive or object. + * + * **Note:** To exclude `Infinity`, `-Infinity`, and `NaN`, which are classified + * as numbers, use the `_.isFinite` method. + * + * @static + * @memberOf _ + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is correctly classified, else `false`. + * @example + * + * _.isNumber(8.4); + * // => true + * + * _.isNumber(NaN); + * // => true + * + * _.isNumber('8.4'); + * // => false + */ +function isNumber(value) { + return typeof value == 'number' || (isObjectLike(value) && objToString.call(value) == numberTag); +} + +module.exports = isNumber; + +},{}],35:[function(require,module,exports){ +/** + * lodash 3.1.0 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ +var baseFor = require('lodash._basefor'), + getNative = require('lodash._getnative'), + keysIn = require('lodash.keysin'); + +/** `Object#toString` result references. */ +var objectTag = '[object Object]'; + +/** + * Checks if `value` is object-like. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is object-like, else `false`. + */ +function isObjectLike(value) { + return !!value && typeof value == 'object'; +} + +/** Used for native method references. */ +var objectProto = Object.prototype; + +/** Used to check objects for own properties. */ +var hasOwnProperty = objectProto.hasOwnProperty; + +/** + * Used to resolve the [`toStringTag`](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.prototype.tostring) + * of values. + */ +var objToString = objectProto.toString; + +/** Native method references. */ +var getPrototypeOf = getNative(Object, 'getPrototypeOf'); + +/** + * The base implementation of `_.forIn` without support for callback + * shorthands and `this` binding. + * + * @private + * @param {Object} object The object to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @returns {Object} Returns `object`. + */ +function baseForIn(object, iteratee) { + return baseFor(object, iteratee, keysIn); +} + +/** + * A fallback implementation of `_.isPlainObject` which checks if `value` + * is an object created by the `Object` constructor or has a `[[Prototype]]` + * of `null`. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a plain object, else `false`. + */ +function shimIsPlainObject(value) { + var Ctor; + + // Exit early for non `Object` objects. + if (!(isObjectLike(value) && objToString.call(value) == objectTag) || + (!hasOwnProperty.call(value, 'constructor') && + (Ctor = value.constructor, typeof Ctor == 'function' && !(Ctor instanceof Ctor)))) { + return false; + } + // IE < 9 iterates inherited properties before own properties. If the first + // iterated property is an object's own property then there are no inherited + // enumerable properties. + var result; + // In most environments an object's own properties are iterated before + // its inherited properties. If the last iterated property is an object's + // own property then there are no inherited enumerable properties. + baseForIn(value, function(subValue, key) { + result = key; + }); + return result === undefined || hasOwnProperty.call(value, result); +} + +/** + * Checks if `value` is a plain object, that is, an object created by the + * `Object` constructor or one with a `[[Prototype]]` of `null`. + * + * **Note:** This method assumes objects created by the `Object` constructor + * have no inherited enumerable properties. + * + * @static + * @memberOf _ + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a plain object, else `false`. + * @example + * + * function Foo() { + * this.a = 1; + * } + * + * _.isPlainObject(new Foo); + * // => false + * + * _.isPlainObject([1, 2, 3]); + * // => false + * + * _.isPlainObject({ 'x': 0, 'y': 0 }); + * // => true + * + * _.isPlainObject(Object.create(null)); + * // => true + */ +var isPlainObject = !getPrototypeOf ? shimIsPlainObject : function(value) { + if (!(value && objToString.call(value) == objectTag)) { + return false; + } + var valueOf = getNative(value, 'valueOf'), + objProto = valueOf && (objProto = getPrototypeOf(valueOf)) && getPrototypeOf(objProto); + + return objProto + ? (value == objProto || getPrototypeOf(value) == objProto) + : shimIsPlainObject(value); +}; + +module.exports = isPlainObject; + +},{"lodash._basefor":36,"lodash._getnative":37,"lodash.keysin":38}],36:[function(require,module,exports){ +/** + * lodash 3.0.2 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ + +/** + * The base implementation of `baseForIn` and `baseForOwn` which iterates + * over `object` properties returned by `keysFunc` invoking `iteratee` for + * each property. Iteratee functions may exit iteration early by explicitly + * returning `false`. + * + * @private + * @param {Object} object The object to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @param {Function} keysFunc The function to get the keys of `object`. + * @returns {Object} Returns `object`. + */ +var baseFor = createBaseFor(); + +/** + * Creates a base function for `_.forIn` or `_.forInRight`. + * + * @private + * @param {boolean} [fromRight] Specify iterating from right to left. + * @returns {Function} Returns the new base function. + */ +function createBaseFor(fromRight) { + return function(object, iteratee, keysFunc) { + var iterable = toObject(object), + props = keysFunc(object), + length = props.length, + index = fromRight ? length : -1; + + while ((fromRight ? index-- : ++index < length)) { + var key = props[index]; + if (iteratee(iterable[key], key, iterable) === false) { + break; + } + } + return object; + }; +} + +/** + * Converts `value` to an object if it's not one. + * + * @private + * @param {*} value The value to process. + * @returns {Object} Returns the object. + */ +function toObject(value) { + return isObject(value) ? value : Object(value); +} + +/** + * 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(1); + * // => false + */ +function isObject(value) { + // Avoid a V8 JIT bug in Chrome 19-20. + // See https://code.google.com/p/v8/issues/detail?id=2291 for more details. + var type = typeof value; + return !!value && (type == 'object' || type == 'function'); +} + +module.exports = baseFor; + +},{}],37:[function(require,module,exports){ +arguments[4][30][0].apply(exports,arguments) +},{"dup":30}],38:[function(require,module,exports){ +/** + * lodash 3.0.8 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ +var isArguments = require('lodash.isarguments'), + isArray = require('lodash.isarray'); + +/** Used to detect unsigned integer values. */ +var reIsUint = /^\d+$/; + +/** Used for native method references. */ +var objectProto = Object.prototype; + +/** Used to check objects for own properties. */ +var hasOwnProperty = objectProto.hasOwnProperty; + +/** + * Used as the [maximum length](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-number.max_safe_integer) + * of an array-like value. + */ +var MAX_SAFE_INTEGER = 9007199254740991; + +/** + * 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; +} + +/** + * Checks if `value` is a valid array-like length. + * + * **Note:** This function is based on [`ToLength`](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-tolength). + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a valid length, else `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(1); + * // => false + */ +function isObject(value) { + // Avoid a V8 JIT bug in Chrome 19-20. + // See https://code.google.com/p/v8/issues/detail?id=2291 for more details. + var type = typeof value; + return !!value && (type == 'object' || type == 'function'); +} + +/** + * Creates an array of the own and inherited enumerable property names of `object`. + * + * **Note:** Non-object values are coerced to objects. + * + * @static + * @memberOf _ + * @category Object + * @param {Object} object The object to query. + * @returns {Array} Returns the array of property names. + * @example + * + * function Foo() { + * this.a = 1; + * this.b = 2; + * } + * + * Foo.prototype.c = 3; + * + * _.keysIn(new Foo); + * // => ['a', 'b', 'c'] (iteration order is not guaranteed) + */ +function keysIn(object) { + if (object == null) { + return []; + } + if (!isObject(object)) { + object = Object(object); + } + var length = object.length; + length = (length && isLength(length) && + (isArray(object) || isArguments(object)) && length) || 0; + + var Ctor = object.constructor, + index = -1, + isProto = typeof Ctor == 'function' && Ctor.prototype === object, + result = Array(length), + skipIndexes = length > 0; + + while (++index < length) { + result[index] = (index + ''); + } + for (var key in object) { + if (!(skipIndexes && isIndex(key, length)) && + !(key == 'constructor' && (isProto || !hasOwnProperty.call(object, key)))) { + result.push(key); + } + } + return result; +} + +module.exports = keysIn; + +},{"lodash.isarguments":39,"lodash.isarray":40}],39:[function(require,module,exports){ +arguments[4][31][0].apply(exports,arguments) +},{"dup":31}],40:[function(require,module,exports){ +arguments[4][32][0].apply(exports,arguments) +},{"dup":32}],41:[function(require,module,exports){ +/** + * lodash 3.1.0 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.2 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ +var baseFlatten = require('lodash._baseflatten'), + bindCallback = require('lodash._bindcallback'), + pickByArray = require('lodash._pickbyarray'), + pickByCallback = require('lodash._pickbycallback'), + restParam = require('lodash.restparam'); + +/** + * Creates an object composed of the picked `object` properties. Property + * names may be specified as individual arguments or as arrays of property + * names. If `predicate` is provided it is invoked for each property of `object` + * picking the properties `predicate` returns truthy for. The predicate is + * bound to `thisArg` and invoked with three arguments: (value, key, object). + * + * @static + * @memberOf _ + * @category Object + * @param {Object} object The source object. + * @param {Function|...(string|string[])} [predicate] The function invoked per + * iteration or property names to pick, specified as individual property + * names or arrays of property names. + * @param {*} [thisArg] The `this` binding of `predicate`. + * @returns {Object} Returns the new object. + * @example + * + * var object = { 'user': 'fred', 'age': 40 }; + * + * _.pick(object, 'user'); + * // => { 'user': 'fred' } + * + * _.pick(object, _.isString); + * // => { 'user': 'fred' } + */ +var pick = restParam(function(object, props) { + if (object == null) { + return {}; + } + return typeof props[0] == 'function' + ? pickByCallback(object, bindCallback(props[0], props[1], 3)) + : pickByArray(object, baseFlatten(props)); +}); + +module.exports = pick; + +},{"lodash._baseflatten":42,"lodash._bindcallback":45,"lodash._pickbyarray":46,"lodash._pickbycallback":47,"lodash.restparam":52}],42:[function(require,module,exports){ +/** + * lodash 3.1.3 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ +var isArguments = require('lodash.isarguments'), + isArray = require('lodash.isarray'); + +/** + * Checks if `value` is object-like. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is object-like, else `false`. + */ +function isObjectLike(value) { + return !!value && typeof value == 'object'; +} + +/** + * Used as the [maximum length](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-number.max_safe_integer) + * of an array-like value. + */ +var MAX_SAFE_INTEGER = 9007199254740991; + +/** + * The base implementation of `_.flatten` with added support for restricting + * flattening and specifying the start index. + * + * @private + * @param {Array} array The array to flatten. + * @param {boolean} [isDeep] Specify a deep flatten. + * @param {boolean} [isStrict] Restrict flattening to arrays-like objects. + * @returns {Array} Returns the new flattened array. + */ +function baseFlatten(array, isDeep, isStrict) { + var index = -1, + length = array.length, + resIndex = -1, + result = []; + + while (++index < length) { + var value = array[index]; + if (isObjectLike(value) && isArrayLike(value) && + (isStrict || isArray(value) || isArguments(value))) { + if (isDeep) { + // Recursively flatten arrays (susceptible to call stack limits). + value = baseFlatten(value, isDeep, isStrict); + } + var valIndex = -1, + valLength = value.length; + + while (++valIndex < valLength) { + result[++resIndex] = value[valIndex]; + } + } else if (!isStrict) { + result[++resIndex] = value; + } + } + return result; +} + +/** + * 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]; + }; +} + +/** + * 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 `value` is array-like. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is array-like, else `false`. + */ +function isArrayLike(value) { + return value != null && isLength(getLength(value)); +} + +/** + * Checks if `value` is a valid array-like length. + * + * **Note:** This function is based on [`ToLength`](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-tolength). + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a valid length, else `false`. + */ +function isLength(value) { + return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER; +} + +module.exports = baseFlatten; + +},{"lodash.isarguments":43,"lodash.isarray":44}],43:[function(require,module,exports){ +arguments[4][31][0].apply(exports,arguments) +},{"dup":31}],44:[function(require,module,exports){ +arguments[4][32][0].apply(exports,arguments) +},{"dup":32}],45:[function(require,module,exports){ +arguments[4][26][0].apply(exports,arguments) +},{"dup":26}],46:[function(require,module,exports){ +/** + * lodash 3.0.2 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.8.3 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ + +/** + * A specialized version of `_.pick` which picks `object` properties specified + * by `props`. + * + * @private + * @param {Object} object The source object. + * @param {string[]} props The property names to pick. + * @returns {Object} Returns the new object. + */ +function pickByArray(object, props) { + object = toObject(object); + + var index = -1, + length = props.length, + result = {}; + + while (++index < length) { + var key = props[index]; + if (key in object) { + result[key] = object[key]; + } + } + return result; +} + +/** + * Converts `value` to an object if it's not one. + * + * @private + * @param {*} value The value to process. + * @returns {Object} Returns the object. + */ +function toObject(value) { + return isObject(value) ? value : Object(value); +} + +/** + * 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(1); + * // => false + */ +function isObject(value) { + // Avoid a V8 JIT bug in Chrome 19-20. + // See https://code.google.com/p/v8/issues/detail?id=2291 for more details. + var type = typeof value; + return !!value && (type == 'object' || type == 'function'); +} + +module.exports = pickByArray; + +},{}],47:[function(require,module,exports){ +/** + * lodash 3.0.0 (Custom Build) + * Build: `lodash modern modularize exports="npm" -o ./` + * Copyright 2012-2015 The Dojo Foundation + * Based on Underscore.js 1.7.0 + * Copyright 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + * Available under MIT license + */ +var baseFor = require('lodash._basefor'), + keysIn = require('lodash.keysin'); + +/** + * The base implementation of `_.forIn` without support for callback + * shorthands and `this` binding. + * + * @private + * @param {Object} object The object to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @returns {Object} Returns `object`. + */ +function baseForIn(object, iteratee) { + return baseFor(object, iteratee, keysIn); +} + +/** + * A specialized version of `_.pick` that picks `object` properties `predicate` + * returns truthy for. + * + * @private + * @param {Object} object The source object. + * @param {Function} predicate The function invoked per iteration. + * @returns {Object} Returns the new object. + */ +function pickByCallback(object, predicate) { + var result = {}; + baseForIn(object, function(value, key, object) { + if (predicate(value, key, object)) { + result[key] = value; + } + }); + return result; +} + +module.exports = pickByCallback; + +},{"lodash._basefor":48,"lodash.keysin":49}],48:[function(require,module,exports){ +arguments[4][36][0].apply(exports,arguments) +},{"dup":36}],49:[function(require,module,exports){ +arguments[4][38][0].apply(exports,arguments) +},{"dup":38,"lodash.isarguments":50,"lodash.isarray":51}],50:[function(require,module,exports){ +arguments[4][31][0].apply(exports,arguments) +},{"dup":31}],51:[function(require,module,exports){ +arguments[4][32][0].apply(exports,arguments) +},{"dup":32}],52:[function(require,module,exports){ +arguments[4][28][0].apply(exports,arguments) +},{"dup":28}],53:[function(require,module,exports){ +'use strict'; + +module.exports = Point; + +function Point(x, y) { + this.x = x; + this.y = y; +} + +Point.prototype = { + clone: function() { return new Point(this.x, this.y); }, + + add: function(p) { return this.clone()._add(p); }, + sub: function(p) { return this.clone()._sub(p); }, + mult: function(k) { return this.clone()._mult(k); }, + div: function(k) { return this.clone()._div(k); }, + rotate: function(a) { return this.clone()._rotate(a); }, + matMult: function(m) { return this.clone()._matMult(m); }, + unit: function() { return this.clone()._unit(); }, + perp: function() { return this.clone()._perp(); }, + round: function() { return this.clone()._round(); }, + + mag: function() { + return Math.sqrt(this.x * this.x + this.y * this.y); + }, + + equals: function(p) { + return this.x === p.x && + this.y === p.y; + }, + + dist: function(p) { + return Math.sqrt(this.distSqr(p)); + }, + + distSqr: function(p) { + var dx = p.x - this.x, + dy = p.y - this.y; + return dx * dx + dy * dy; + }, + + angle: function() { + return Math.atan2(this.y, this.x); + }, + + angleTo: function(b) { + return Math.atan2(this.y - b.y, this.x - b.x); + }, + + angleWith: function(b) { + return this.angleWithSep(b.x, b.y); + }, + + // Find the angle of the two vectors, solving the formula for the cross product a x b = |a||b|sin(θ) for θ. + angleWithSep: function(x, y) { + return Math.atan2( + this.x * y - this.y * x, + this.x * x + this.y * y); + }, + + _matMult: function(m) { + var x = m[0] * this.x + m[1] * this.y, + y = m[2] * this.x + m[3] * this.y; + this.x = x; + this.y = y; + return this; + }, + + _add: function(p) { + this.x += p.x; + this.y += p.y; + return this; + }, + + _sub: function(p) { + this.x -= p.x; + this.y -= p.y; + return this; + }, + + _mult: function(k) { + this.x *= k; + this.y *= k; + return this; + }, + + _div: function(k) { + this.x /= k; + this.y /= k; + return this; + }, + + _unit: function() { + this._div(this.mag()); + return this; + }, + + _perp: function() { + var y = this.y; + this.y = this.x; + this.x = -y; + return this; + }, + + _rotate: function(angle) { + var cos = Math.cos(angle), + sin = Math.sin(angle), + x = cos * this.x - sin * this.y, + y = sin * this.x + cos * this.y; + this.x = x; + this.y = y; + return this; + }, + + _round: function() { + this.x = Math.round(this.x); + this.y = Math.round(this.y); + return this; + } +}; + +// constructs Point from an array if necessary +Point.convert = function (a) { + if (a instanceof Point) { + return a; + } + if (Array.isArray(a)) { + return new Point(a[0], a[1]); + } + return a; +}; + +},{}],54:[function(require,module,exports){ +'use strict'; + +exports.__esModule = true; +exports['default'] = shouldPureComponentUpdate; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +var _shallowEqual = require('./shallowEqual'); + +var _shallowEqual2 = _interopRequireDefault(_shallowEqual); + +function shouldPureComponentUpdate(nextProps, nextState) { + return !(0, _shallowEqual2['default'])(this.props, nextProps) || !(0, _shallowEqual2['default'])(this.state, nextState); +} + +module.exports = exports['default']; +},{"./shallowEqual":55}],55:[function(require,module,exports){ +'use strict'; + +exports.__esModule = true; +exports['default'] = shallowEqual; + +function shallowEqual(objA, objB) { + if (objA === objB) { + return true; + } + + if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) { + return false; + } + + var keysA = Object.keys(objA); + var keysB = Object.keys(objB); + + if (keysA.length !== keysB.length) { + return false; + } + + // Test for A's keys different from B. + var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB); + for (var i = 0; i < keysA.length; i++) { + if (!bHasOwnProperty(keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) { + return false; + } + } + + return true; +} + +module.exports = exports['default']; +},{}],56:[function(require,module,exports){ +/*! + * $script.js JS loader & dependency manager + * https://github.com/ded/script.js + * (c) Dustin Diaz 2014 | License MIT + */ + +(function (name, definition) { + if (typeof module != 'undefined' && module.exports) module.exports = definition() + else if (typeof define == 'function' && define.amd) define(definition) + else this[name] = definition() +})('$script', function () { + var doc = document + , head = doc.getElementsByTagName('head')[0] + , s = 'string' + , f = false + , push = 'push' + , readyState = 'readyState' + , onreadystatechange = 'onreadystatechange' + , list = {} + , ids = {} + , delay = {} + , scripts = {} + , scriptpath + , urlArgs + + function every(ar, fn) { + for (var i = 0, j = ar.length; i < j; ++i) if (!fn(ar[i])) return f + return 1 + } + function each(ar, fn) { + every(ar, function (el) { + return !fn(el) + }) + } + + function $script(paths, idOrDone, optDone) { + paths = paths[push] ? paths : [paths] + var idOrDoneIsDone = idOrDone && idOrDone.call + , done = idOrDoneIsDone ? idOrDone : optDone + , id = idOrDoneIsDone ? paths.join('') : idOrDone + , queue = paths.length + function loopFn(item) { + return item.call ? item() : list[item] + } + function callback() { + if (!--queue) { + list[id] = 1 + done && done() + for (var dset in delay) { + every(dset.split('|'), loopFn) && !each(delay[dset], loopFn) && (delay[dset] = []) + } + } + } + setTimeout(function () { + each(paths, function loading(path, force) { + if (path === null) return callback() + path = !force && path.indexOf('.js') === -1 && !/^https?:\/\//.test(path) && scriptpath ? scriptpath + path + '.js' : path + if (scripts[path]) { + if (id) ids[id] = 1 + return (scripts[path] == 2) ? callback() : setTimeout(function () { loading(path, true) }, 0) + } + + scripts[path] = 1 + if (id) ids[id] = 1 + create(path, callback) + }) + }, 0) + return $script + } + + function create(path, fn) { + var el = doc.createElement('script'), loaded + el.onload = el.onerror = el[onreadystatechange] = function () { + if ((el[readyState] && !(/^c|loade/.test(el[readyState]))) || loaded) return; + el.onload = el[onreadystatechange] = null + loaded = 1 + scripts[path] = 2 + fn() + } + el.async = 1 + el.src = urlArgs ? path + (path.indexOf('?') === -1 ? '?' : '&') + urlArgs : path; + head.insertBefore(el, head.lastChild) + } + + $script.get = create + + $script.order = function (scripts, id, done) { + (function callback(s) { + s = scripts.shift() + !scripts.length ? $script(s, id, done) : $script(s, callback) + }()) + } + + $script.path = function (p) { + scriptpath = p + } + $script.urlArgs = function (str) { + urlArgs = str; + } + $script.ready = function (deps, ready, req) { + deps = deps[push] ? deps : [deps] + var missing = []; + !each(deps, function (dep) { + list[dep] || missing[push](dep); + }) && every(deps, function (dep) {return list[dep]}) ? + ready() : !function (key) { + delay[key] = delay[key] || [] + delay[key][push](ready) + req && req(missing) + }(deps.join('|')) + return $script + } + + $script.done = function (idOrDone) { + $script([null], idOrDone) + } + + return $script +}); + +},{}],57:[function(require,module,exports){ +(function (process){ +'use strict'; + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Typography = require('./styles/typography'); +var IconButton = require('./icon-button'); +var NavigationMenu = require('./svg-icons/navigation-menu'); +var Paper = require('./paper'); + +var AppBar = React.createClass({ + displayName: 'AppBar', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + onLeftIconButtonTouchTap: React.PropTypes.func, + onRightIconButtonTouchTap: React.PropTypes.func, + showMenuIconButton: React.PropTypes.bool, + iconClassNameLeft: React.PropTypes.string, + iconClassNameRight: React.PropTypes.string, + iconElementLeft: React.PropTypes.element, + iconElementRight: React.PropTypes.element, + iconStyleRight: React.PropTypes.object, + title: React.PropTypes.node, + zDepth: React.PropTypes.number + }, + + getDefaultProps: function getDefaultProps() { + return { + showMenuIconButton: true, + title: '', + zDepth: 1 + }; + }, + + componentDidMount: function componentDidMount() { + if (process.env.NODE_ENV !== 'production' && this.props.iconElementLeft && this.props.iconClassNameLeft) { + + console.warn('Properties iconClassNameLeft and iconElementLeft cannot be simultaneously ' + 'defined. Please use one or the other.'); + } + }, + + getStyles: function getStyles() { + var spacing = this.context.muiTheme.spacing; + var themeVariables = this.context.muiTheme.component.appBar; + var iconButtonSize = this.context.muiTheme.component.button.iconButtonSize; + var styles = { + root: { + zIndex: 5, + width: '100%', + display: '-webkit-box; display: flex', + minHeight: themeVariables.height, + backgroundColor: themeVariables.color, + paddingLeft: spacing.desktopGutter, + paddingRight: spacing.desktopGutter + }, + title: { + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + margin: 0, + paddingTop: 0, + letterSpacing: 0, + fontSize: 24, + fontWeight: Typography.fontWeightNormal, + color: themeVariables.textColor, + lineHeight: themeVariables.height + 'px' + }, + mainElement: { + boxFlex: 1, + flex: '1' + }, + iconButton: { + style: { + marginTop: (themeVariables.height - iconButtonSize) / 2, + marginRight: 8, + marginLeft: -16 + }, + iconStyle: { + fill: themeVariables.textColor, + color: themeVariables.textColor + } + } + }; + return styles; + }, + + render: function render() { + var styles = this.getStyles(); + + var iconRightStyle = this.mergeAndPrefix(styles.iconButton.style, { + marginRight: -16, + marginLeft: 'auto' + }, this.props.iconStyleRight); + + var title = this.props.title; + + var titleElement; + var menuElementLeft; + var menuElementRight; + + if (title) { + // If the title is a string, wrap in an h1 tag. + // If not, just use it as a node. + titleElement = typeof title === 'string' || title instanceof String ? React.createElement( + 'h1', + { style: this.mergeAndPrefix(styles.title, styles.mainElement) }, + title + ) : React.createElement( + 'div', + { style: this.mergeAndPrefix(styles.mainElement) }, + title + ); + } + + if (this.props.showMenuIconButton) { + if (this.props.iconElementLeft) { + menuElementLeft = React.createElement( + 'div', + { style: styles.iconButton.style }, + this.props.iconElementLeft + ); + } else { + var child = this.props.iconClassNameLeft ? '' : React.createElement(NavigationMenu, { style: this.mergeAndPrefix(styles.iconButton.iconStyle) }); + menuElementLeft = React.createElement( + IconButton, + { + style: this.mergeAndPrefix(styles.iconButton.style), + iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle), + iconClassName: this.props.iconClassNameLeft, + onTouchTap: this._onLeftIconButtonTouchTap }, + child + ); + } + + if (this.props.iconElementRight) { + menuElementRight = React.createElement( + 'div', + { style: iconRightStyle }, + this.props.iconElementRight + ); + } else if (this.props.iconClassNameRight) { + menuElementRight = React.createElement(IconButton, { + style: iconRightStyle, + iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle), + iconClassName: this.props.iconClassNameRight, + onTouchTap: this._onRightIconButtonTouchTap }); + } + } + + return React.createElement( + Paper, + { + rounded: false, + className: this.props.className, + style: this.mergeAndPrefix(styles.root, this.props.style), + zDepth: this.props.zDepth }, + menuElementLeft, + titleElement, + menuElementRight, + this.props.children + ); + }, + + _onLeftIconButtonTouchTap: function _onLeftIconButtonTouchTap(event) { + if (this.props.onLeftIconButtonTouchTap) { + this.props.onLeftIconButtonTouchTap(event); + } + }, + + _onRightIconButtonTouchTap: function _onRightIconButtonTouchTap(event) { + if (this.props.onRightIconButtonTouchTap) { + this.props.onRightIconButtonTouchTap(event); + } + } + +}); + +module.exports = AppBar; +}).call(this,require('_process')) + +},{"./icon-button":89,"./mixins/style-propable":103,"./paper":107,"./styles/typography":125,"./svg-icons/navigation-menu":132,"_process":7,"react":357}],58:[function(require,module,exports){ +'use strict'; + +var React = require('react'); + +var AppCanvas = React.createClass({ + displayName: 'AppCanvas', + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + render: function render() { + + var styles = { + height: '100%', + backgroundColor: this.context.muiTheme.palette.canvasColor, + WebkitFontSmoothing: 'antialiased' + }; + + var newChildren = React.Children.map(this.props.children, function (currentChild) { + if (!currentChild) { + // If undefined, skip it + return; + } + + switch (currentChild.type.displayName) { + case 'AppBar': + return React.cloneElement(currentChild, { + style: { + position: 'fixed' + } + }); + default: + return currentChild; + } + }, this); + + return React.createElement( + 'div', + { style: styles }, + newChildren + ); + } + +}); + +module.exports = AppCanvas; +},{"react":357}],59:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react/addons'); +var StylePropable = require('./mixins/style-propable'); +var Colors = require('./styles/colors'); +var Typography = require('./styles/typography'); + +var SvgIcon = React.createClass({ + displayName: 'SvgIcon', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + icon: React.PropTypes.element, + backgroundColor: React.PropTypes.string, + color: React.PropTypes.string, + src: React.PropTypes.string + }, + + getDefaultProps: function getDefaultProps() { + return { + backgroundColor: Colors.grey400, + color: Colors.white + }; + }, + + render: function render() { + var _props = this.props; + var icon = _props.icon; + var backgroundColor = _props.backgroundColor; + var color = _props.color; + var src = _props.src; + var style = _props.style; + + var other = _objectWithoutProperties(_props, ['icon', 'backgroundColor', 'color', 'src', 'style']); + + var styles = { + root: { + height: src ? 38 : 40, + width: src ? 38 : 40, + userSelect: 'none', + backgroundColor: backgroundColor, + borderRadius: '50%', + border: src ? 'solid 1px' : 'none', + borderColor: this.context.muiTheme.palette.borderColor, + display: 'inline-block', + + //Needed for letter avatars + textAlign: 'center', + lineHeight: '40px', + fontSize: 24, + color: color + }, + + iconStyles: { + margin: 8 + } + }; + + var mergedRootStyles = this.mergeAndPrefix(styles.root, style); + var mergedIconStyles = icon ? this.mergeStyles(styles.iconStyles, icon.props.style) : null; + + var iconElement = icon ? React.cloneElement(icon, { + color: color, + style: mergedIconStyles + }) : null; + + return src ? React.createElement('img', _extends({}, other, { src: src, style: mergedRootStyles })) : React.createElement( + 'div', + _extends({}, other, { style: mergedRootStyles }), + iconElement, + this.props.children + ); + } +}); + +module.exports = SvgIcon; +},{"./mixins/style-propable":103,"./styles/colors":118,"./styles/typography":125,"react/addons":185}],60:[function(require,module,exports){ +'use strict'; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var AutoPrefix = require('./styles/auto-prefix'); + +/** + * BeforeAfterWrapper + * An alternative for the ::before and ::after css pseudo-elements for + * components whose styles are defined in javascript instead of css. + * + * Usage: For the element that we want to apply before and after elements to, + * wrap its children with BeforeAfterWrapper. For example: + * + * + *
// See notice + * renders
// before element + * [children of paper] ------> [children of paper] + *
// after element + *
+ * + * + * Notice: Notice that this div bundles together our elements. If the element + * that we want to apply before and after elements is a HTML tag (i.e. a + * div, p, or button tag), we can avoid this extra nesting by passing using + * the BeforeAfterWrapper in place of said tag like so: + * + *

+ * do this instead + * [children of p] ------> [children of p] + * + *

+ * + * BeforeAfterWrapper features spread functionality. This means that we can + * pass HTML tag properties directly into the BeforeAfterWrapper tag. + * + * When using BeforeAfterWrapper, ensure that the parent of the beforeElement + * and afterElement have a defined style position. + */ + +var BeforeAfterWrapper = React.createClass({ + displayName: 'BeforeAfterWrapper', + + mixins: [StylePropable], + + propTypes: { + beforeStyle: React.PropTypes.object, + afterStyle: React.PropTypes.object, + beforeElementType: React.PropTypes.string, + afterElementType: React.PropTypes.string, + elementType: React.PropTypes.string + }, + + getDefaultProps: function getDefaultProps() { + return { + beforeElementType: 'div', + afterElementType: 'div', + elementType: 'div' + }; + }, + + render: function render() { + var _props = this.props; + var beforeStyle = _props.beforeStyle; + var afterStyle = _props.afterStyle; + var beforeElementType = _props.beforeElementType; + var afterElementType = _props.afterElementType; + var elementType = _props.elementType; + + var other = _objectWithoutProperties(_props, ['beforeStyle', 'afterStyle', 'beforeElementType', 'afterElementType', 'elementType']); + + var beforeElement, afterElement; + + beforeStyle = AutoPrefix.all({ boxSizing: 'border-box' }); + afterStyle = AutoPrefix.all({ boxSizing: 'border-box' }); + + if (this.props.beforeStyle) beforeElement = React.createElement(this.props.beforeElementType, { style: this.mergeAndPrefix(beforeStyle, this.props.beforeStyle), + key: '::before' }); + if (this.props.afterStyle) afterElement = React.createElement(this.props.afterElementType, { style: this.mergeAndPrefix(afterStyle, this.props.afterStyle), + key: '::after' }); + + var children = [beforeElement, this.props.children, afterElement]; + + var props = other; + props.style = this.props.style; + + return React.createElement(this.props.elementType, props, children); + } + +}); + +module.exports = BeforeAfterWrapper; +},{"./mixins/style-propable":103,"./styles/auto-prefix":117,"react":357}],61:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var Styles = require('../styles'); + +var CardActions = React.createClass({ + displayName: 'CardActions', + + getStyles: function getStyles() { + return { + root: { + padding: 8 + } + }; + }, + render: function render() { + var styles = this.getStyles(); + + var children = React.Children.map(this.props.children, function (child) { + return React.cloneElement(child, { + style: { marginRight: 8 } + }); + }); + + return React.createElement( + 'div', + _extends({}, this.props, { style: styles.root }), + children + ); + } +}); + +module.exports = CardActions; +},{"../styles":119,"react":357}],62:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var Styles = require('../styles'); +var Avatar = require('../avatar'); +var StylePropable = require('../mixins/style-propable'); + +var CardHeader = React.createClass({ + displayName: 'CardHeader', + + mixins: [StylePropable], + + propTypes: { + title: React.PropTypes.string, + titleColor: React.PropTypes.string, + titleStyle: React.PropTypes.object, + subtitle: React.PropTypes.string, + subtitleColor: React.PropTypes.string, + subtitleStyle: React.PropTypes.object, + textStyle: React.PropTypes.object + }, + + getDefaultProps: function getDefaultProps() { + return { + titleColor: Styles.Colors.darkBlack, + subtitleColor: Styles.Colors.lightBlack + }; + }, + + getStyles: function getStyles() { + return { + root: { + height: 72, + padding: 16, + fontWeight: Styles.Typography.fontWeightMedium, + boxSizing: 'border-box' + }, + text: { + display: 'inline-block', + verticalAlign: 'top' + }, + avatar: { + marginRight: 16 + }, + title: { + color: this.props.titleColor, + display: 'block', + fontSize: 15 + }, + subtitle: { + color: this.props.subtitleColor, + display: 'block', + fontSize: 14 + } + }; + }, + + render: function render() { + var styles = this.getStyles(); + var rootStyle = this.mergeAndPrefix(styles.root, this.props.style); + var textStyle = this.mergeAndPrefix(styles.text, this.props.textStyle); + var titleStyle = this.mergeAndPrefix(styles.title, this.props.titleStyle); + var subtitleStyle = this.mergeAndPrefix(styles.subtitle, this.props.subtitleStyle); + + var avatar = this.props.avatar; + if (React.isValidElement(this.props.avatar)) { + var avatarMergedStyle = this.mergeStyles(styles.avatar, avatar.props.style); + avatar = React.cloneElement(avatar, { style: avatarMergedStyle }); + } else avatar = React.createElement(Avatar, { src: this.props.avatar, style: styles.avatar }); + + return React.createElement( + 'div', + _extends({}, this.props, { style: rootStyle }), + avatar, + React.createElement( + 'div', + { style: textStyle }, + React.createElement( + 'span', + { style: titleStyle }, + this.props.title + ), + React.createElement( + 'span', + { style: subtitleStyle }, + this.props.subtitle + ) + ) + ); + } +}); + +module.exports = CardHeader; +},{"../avatar":59,"../mixins/style-propable":103,"../styles":119,"react":357}],63:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var Styles = require('../styles'); +var StylePropable = require('../mixins/style-propable'); + +var CardMedia = React.createClass({ + displayName: 'CardMedia', + + mixins: [StylePropable], + + propTypes: { + overlay: React.PropTypes.node, + style: React.PropTypes.object, + overlayStyle: React.PropTypes.object, + overlayContainerStyle: React.PropTypes.object, + overlayContentStyle: React.PropTypes.object, + mediaStyle: React.PropTypes.object + }, + + getStyles: function getStyles() { + return { + root: { + position: 'relative' + }, + overlayContainer: { + position: 'absolute', + top: 0, + bottom: 0, + right: 0, + left: 0 + }, + overlay: { + height: '100%', + position: 'relative' + }, + overlayContent: { + position: 'absolute', + bottom: 0, + right: 0, + left: 0, + paddingTop: 8, + background: Styles.Colors.lightBlack + } + }; + }, + + render: function render() { + var styles = this.getStyles(); + var rootStyle = this.mergeAndPrefix(styles.root, this.props.style); + var mediaStyle = this.mergeAndPrefix(styles.media, this.props.mediaStyle); + var overlayContainerStyle = this.mergeAndPrefix(styles.overlayContainer, this.props.overlayContainerStyle); + var overlayContentStyle = this.mergeAndPrefix(styles.overlayContent, this.props.overlayContentStyle); + var overlayStyle = this.mergeAndPrefix(styles.overlay, this.props.overlayStyle); + + var children = React.Children.map(this.props.children, function (child) { + return React.cloneElement(child, { + style: { + verticalAlign: 'top', + maxWidth: '100%', + minWidth: '100%' + } + }); + }); + + var overlayChildren = React.Children.map(this.props.overlay, function (child) { + if (child.type.displayName === 'CardHeader' || child.type.displayName === 'CardTitle') { + return React.cloneElement(child, { + titleColor: Styles.Colors.darkWhite, + subtitleColor: Styles.Colors.lightWhite + }); + } else if (child.type.displayName === 'CardText') { + return React.cloneElement(child, { + color: Styles.Colors.darkWhite + }); + } else { + return child; + } + }); + + return React.createElement( + 'div', + _extends({}, this.props, { style: rootStyle }), + React.createElement( + 'div', + { style: mediaStyle }, + children + ), + this.props.overlay ? React.createElement( + 'div', + { style: overlayContainerStyle }, + React.createElement( + 'div', + { style: overlayStyle }, + React.createElement( + 'div', + { style: overlayContentStyle }, + overlayChildren + ) + ) + ) : '' + ); + } +}); + +module.exports = CardMedia; +},{"../mixins/style-propable":103,"../styles":119,"react":357}],64:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var Styles = require('../styles'); +var StylePropable = require('../mixins/style-propable'); + +var CardText = React.createClass({ + displayName: 'CardText', + + mixins: [StylePropable], + + propTypes: { + color: React.PropTypes.string, + style: React.PropTypes.object + }, + + getDefaultProps: function getDefaultProps() { + return { + color: Styles.Colors.ck + }; + }, + + getStyles: function getStyles() { + return { + root: { + padding: 16, + fontSize: '14px', + color: this.props.color + } + }; + }, + + render: function render() { + var styles = this.getStyles(); + var rootStyle = this.mergeAndPrefix(styles.root, this.props.style); + + return React.createElement( + 'div', + _extends({}, this.props, { style: rootStyle }), + this.props.children + ); + } +}); + +module.exports = CardText; +},{"../mixins/style-propable":103,"../styles":119,"react":357}],65:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var Styles = require('../styles'); +var StylePropable = require('../mixins/style-propable'); + +var CardTitle = React.createClass({ + displayName: 'CardTitle', + + mixins: [StylePropable], + + propTypes: { + title: React.PropTypes.string, + titleColor: React.PropTypes.string, + titleStyle: React.PropTypes.object, + subtitle: React.PropTypes.string, + subtitleColor: React.PropTypes.string, + subtitleStyle: React.PropTypes.object + }, + + getDefaultProps: function getDefaultProps() { + return { + titleColor: Styles.Colors.darkBlack, + subtitleColor: Styles.Colors.lightBlack + }; + }, + getStyles: function getStyles() { + return { + root: { + padding: 16 + }, + title: { + fontSize: 24, + color: this.props.titleColor, + display: 'block', + lineHeight: '36px' + }, + subtitle: { + fontSize: 14, + color: this.props.subtitleColor, + display: 'block' + } + }; + }, + render: function render() { + var styles = this.getStyles(); + var rootStyle = this.mergeAndPrefix(styles.root, this.props.style); + var titleStyle = this.mergeAndPrefix(styles.title, this.props.titleStyle); + var subtitleStyle = this.mergeAndPrefix(styles.subtitle, this.props.subtitleStyle); + + return React.createElement( + 'div', + _extends({}, this.props, { style: rootStyle }), + React.createElement( + 'span', + { style: titleStyle }, + this.props.title + ), + React.createElement( + 'span', + { style: subtitleStyle }, + this.props.subtitle + ) + ); + } +}); + +module.exports = CardTitle; +},{"../mixins/style-propable":103,"../styles":119,"react":357}],66:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var Paper = require('../paper'); +var StylePropable = require('../mixins/style-propable'); + +var Card = React.createClass({ + displayName: 'Card', + + mixins: [StylePropable], + + propTypes: { + style: React.PropTypes.object + }, + + render: function render() { + var lastElement = React.Children.count(this.props.children) > 1 ? this.props.children[this.props.children.length - 1] : this.props.children; + + // If the last element is text or a title we should add + // 8px padding to the bottom of the card + var addBottomPadding = lastElement.type.displayName === 'CardText' || lastElement.type.displayName === 'CardTitle'; + var _props = this.props; + var style = _props.style; + + var other = _objectWithoutProperties(_props, ['style']); + + var mergedStyles = this.mergeAndPrefix({ + overflow: 'hidden', + zIndex: 1 + }, style); + + return React.createElement( + Paper, + _extends({}, other, { style: mergedStyles }), + React.createElement( + 'div', + { style: { paddingBottom: addBottomPadding ? 8 : 0 } }, + this.props.children + ) + ); + } +}); + +module.exports = Card; +},{"../mixins/style-propable":103,"../paper":107,"react":357}],67:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var EnhancedSwitch = require('./enhanced-switch'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var CheckboxOutline = require('./svg-icons/toggle-check-box-outline-blank'); +var CheckboxChecked = require('./svg-icons/toggle-check-box-checked'); + +var Checkbox = React.createClass({ + displayName: 'Checkbox', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + iconStyle: React.PropTypes.object, + labelStyle: React.PropTypes.object, + onCheck: React.PropTypes.func, + checkedIcon: React.PropTypes.element, + unCheckedIcon: React.PropTypes.element + }, + + getInitialState: function getInitialState() { + return { + switched: this.props.checked || this.props.defaultChecked || this.props.valueLink && this.props.valueLink.value || false + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.checkbox; + }, + + getStyles: function getStyles() { + var checkboxSize = 24; + var styles = { + icon: { + height: checkboxSize, + width: checkboxSize + }, + check: { + position: 'absolute', + opacity: 0, + transform: 'scale(0)', + transitionOrigin: '50% 50%', + transition: Transitions.easeOut('450ms', 'opacity', '0ms') + ', ' + Transitions.easeOut('0ms', 'transform', '450ms'), + fill: this.getTheme().checkedColor + }, + box: { + position: 'absolute', + opacity: 1, + fill: this.getTheme().boxColor, + transition: Transitions.easeOut('2s', null, '200ms') + }, + checkWhenSwitched: { + opacity: 1, + transform: 'scale(1)', + transition: Transitions.easeOut('0ms', 'opacity', '0ms') + ', ' + Transitions.easeOut('800ms', 'transform', '0ms') + }, + boxWhenSwitched: { + transition: Transitions.easeOut('100ms', null, '0ms'), + fill: this.getTheme().checkedColor + }, + checkWhenDisabled: { + fill: this.getTheme().disabledColor + }, + boxWhenDisabled: { + fill: this.getTheme().disabledColor + }, + label: { + color: this.props.disabled ? this.getTheme().labelDisabledColor : this.getTheme().labelColor + } + }; + return styles; + }, + + render: function render() { + var _props = this.props; + var iconStyle = _props.iconStyle; + var onCheck = _props.onCheck; + var checkedIcon = _props.checkedIcon; + var unCheckedIcon = _props.unCheckedIcon; + + var other = _objectWithoutProperties(_props, ['iconStyle', 'onCheck', 'checkedIcon', 'unCheckedIcon']); + + var styles = this.getStyles(); + var boxStyles = this.mergeAndPrefix(styles.box, this.state.switched && styles.boxWhenSwitched, iconStyle, this.props.disabled && styles.boxWhenDisabled); + var checkStyles = this.mergeAndPrefix(styles.check, this.state.switched && styles.checkWhenSwitched, iconStyle, this.props.disabled && styles.checkWhenDisabled); + + var checkedElement = checkedIcon ? React.cloneElement(checkedIcon, { + style: this.mergeAndPrefix(checkStyles, checkedIcon.props.style) + }) : React.createElement(CheckboxChecked, { + style: checkStyles + }); + + var unCheckedElement = unCheckedIcon ? React.cloneElement(unCheckedIcon, { + style: this.mergeAndPrefix(boxStyles, unCheckedIcon.props.style) + }) : React.createElement(CheckboxOutline, { + style: boxStyles + }); + + var checkboxElement = React.createElement( + 'div', + null, + unCheckedElement, + checkedElement + ); + + var rippleColor = this.state.switched ? checkStyles.fill : boxStyles.fill; + var mergedIconStyle = this.mergeAndPrefix(styles.icon, iconStyle); + + var labelStyle = this.mergeAndPrefix(styles.label, this.props.labelStyle); + + var enhancedSwitchProps = { + ref: 'enhancedSwitch', + inputType: 'checkbox', + switched: this.state.switched, + switchElement: checkboxElement, + rippleColor: rippleColor, + iconStyle: mergedIconStyle, + onSwitch: this._handleCheck, + labelStyle: labelStyle, + onParentShouldUpdate: this._handleStateChange, + defaultSwitched: this.props.defaultChecked, + labelPosition: this.props.labelPosition ? this.props.labelPosition : 'right' + }; + + return React.createElement(EnhancedSwitch, _extends({}, other, enhancedSwitchProps)); + }, + + isChecked: function isChecked() { + return this.refs.enhancedSwitch.isSwitched(); + }, + + setChecked: function setChecked(newCheckedValue) { + this.refs.enhancedSwitch.setSwitched(newCheckedValue); + }, + + _handleCheck: function _handleCheck(e, isInputChecked) { + if (this.props.onCheck) this.props.onCheck(e, isInputChecked); + }, + + _handleStateChange: function _handleStateChange(newSwitched) { + this.setState({ switched: newSwitched }); + } + +}); + +module.exports = Checkbox; +},{"./enhanced-switch":84,"./mixins/style-propable":103,"./styles/transitions":124,"./svg-icons/toggle-check-box-checked":133,"./svg-icons/toggle-check-box-outline-blank":134,"react":357}],68:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); + +var CircularProgress = React.createClass({ + displayName: 'CircularProgress', + + mixins: [StylePropable], + + propTypes: { + mode: React.PropTypes.oneOf(['determinate', 'indeterminate']), + value: React.PropTypes.number, + min: React.PropTypes.number, + max: React.PropTypes.number, + size: React.PropTypes.number + }, + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + _getRelativeValue: function _getRelativeValue() { + var value = this.props.value; + var min = this.props.min; + var max = this.props.max; + + var clampedValue = Math.min(Math.max(min, value), max); + var rangeValue = max - min; + var relValue = Math.round(clampedValue / rangeValue * 10000) / 10000; + return relValue * 100; + }, + + componentDidMount: function componentDidMount() { + + var wrapper = React.findDOMNode(this.refs.wrapper); + var path = React.findDOMNode(this.refs.path); + + this._scalePath(path); + this._rotateWrapper(wrapper); + }, + _scalePath: function _scalePath(path, step) { + step = step || 0; + step %= 3; + + setTimeout(this._scalePath.bind(this, path, step + 1), step ? 750 : 250); + + if (!this.isMounted()) return; + if (this.props.mode != 'indeterminate') return; + + if (step === 0) { + + path.style.strokeDasharray = '1, 200'; + path.style.strokeDashoffset = 0; + path.style.transitionDuration = '0ms'; + } else if (step == 1) { + + path.style.strokeDasharray = '89, 200'; + path.style.strokeDashoffset = -35; + path.style.transitionDuration = '750ms'; + } else { + + path.style.strokeDasharray = '89,200'; + path.style.strokeDashoffset = -124; + path.style.transitionDuration = '850ms'; + } + }, + _rotateWrapper: function _rotateWrapper(wrapper) { + + setTimeout(this._rotateWrapper.bind(this, wrapper), 10050); + + if (!this.isMounted()) return; + if (this.props.mode != 'indeterminate') return; + + wrapper.style.transform = null; + wrapper.style.transform = 'rotate(0deg)'; + wrapper.style.transitionDuration = '0ms'; + + setTimeout(function () { + wrapper.style.transform = 'rotate(1800deg)'; + wrapper.style.transitionDuration = '10s'; + }, 50); + }, + + getDefaultProps: function getDefaultProps() { + return { + mode: 'indeterminate', + value: 0, + min: 0, + max: 100, + size: 1 + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.palette; + }, + + getStyles: function getStyles(zoom) { + zoom *= 1.4; + var size = '50px'; + + var margin = Math.round((50 * zoom - 50) / 2); + + if (margin < 0) margin = 0; + + var styles = { + root: { + position: 'relative', + margin: margin + 'px', + display: 'inline-block', + width: size, + height: size + + }, + wrapper: { + + width: size, + height: size, + margin: '5px', + display: 'inline-block', + transition: Transitions.create('transform', '20s', null, 'linear') + }, + svg: { + height: size, + position: 'relative', + transform: 'scale(' + zoom + ')', + width: size + }, + path: { + strokeDasharray: '89,200', + strokeDashoffset: 0, + stroke: this.getTheme().primary1Color, + strokeLinecap: 'round', + transition: Transitions.create('all', '1.5s', null, 'ease-in-out') + } + }; + + if (this.props.mode == 'determinate') { + var relVal = this._getRelativeValue(); + styles.path.transition = Transitions.create('all', '0.3s', null, 'linear'); + styles.path.strokeDasharray = Math.round(relVal * 1.25) + ',200'; + } else {} + + return styles; + }, + + render: function render() { + var _props = this.props; + var style = _props.style; + var size = _props.size; + + var other = _objectWithoutProperties(_props, ['style', 'size']); + + var styles = this.getStyles(size || 1); + + return React.createElement( + 'div', + _extends({}, other, { style: this.mergeAndPrefix(styles.root, style) }), + React.createElement( + 'div', + { ref: 'wrapper', style: this.mergeAndPrefix(styles.wrapper) }, + React.createElement( + 'svg', + { style: this.mergeAndPrefix(styles.svg) }, + React.createElement('circle', { ref: 'path', style: this.mergeAndPrefix(styles.path), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '2.5', strokeMiterlimit: '10' }) + ) + ) + ); + } +}); + +module.exports = CircularProgress; +},{"./mixins/style-propable":103,"./styles/transitions":124,"react":357}],69:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var BeforeAfterWrapper = require('./before-after-wrapper'); + +var ClearFix = React.createClass({ + displayName: 'ClearFix', + + render: function render() { + var _props = this.props; + var style = _props.style; + + var other = _objectWithoutProperties(_props, ['style']); + + var before = function before() { + return { + content: '\' \'', + display: 'table' + }; + }; + + var after = before(); + after.clear = 'both'; + + return React.createElement( + BeforeAfterWrapper, + _extends({}, other, { + beforeStyle: before(), + afterStyle: after, + style: this.props.style }), + this.props.children + ); + } +}); + +module.exports = ClearFix; +},{"./before-after-wrapper":60,"react":357}],70:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var DateTime = require('../utils/date-time'); +var DayButton = require('./day-button'); +var ClearFix = require('../clearfix'); + +var CalendarMonth = React.createClass({ + displayName: 'CalendarMonth', + + propTypes: { + displayDate: React.PropTypes.object.isRequired, + onDayTouchTap: React.PropTypes.func, + selectedDate: React.PropTypes.object.isRequired, + minDate: React.PropTypes.object, + maxDate: React.PropTypes.object, + shouldDisableDate: React.PropTypes.func, + autoOk: React.PropTypes.bool + }, + + render: function render() { + var styles = { + lineHeight: '32px', + textAlign: 'center', + padding: '8px 14px 0 14px' + }; + + return React.createElement( + 'div', + { style: styles }, + this._getWeekElements() + ); + }, + + isSelectedDateDisabled: function isSelectedDateDisabled() { + return this._selectedDateDisabled; + }, + + _getWeekElements: function _getWeekElements() { + var weekArray = DateTime.getWeekArray(this.props.displayDate); + + return weekArray.map(function (week, i) { + return React.createElement( + ClearFix, + { key: i }, + this._getDayElements(week, i) + ); + }, this); + }, + + _getDayElements: function _getDayElements(week, i) { + return week.map(function (day, j) { + var isSameDate = DateTime.isEqualDate(this.props.selectedDate, day); + var disabled = this._shouldDisableDate(day); + var selected = !disabled && isSameDate; + + if (isSameDate) { + if (disabled) { + this._selectedDateDisabled = true; + } else { + this._selectedDateDisabled = false; + } + } + + return React.createElement(DayButton, { + key: 'db' + i + j, + date: day, + onTouchTap: this._handleDayTouchTap, + selected: selected, + disabled: disabled }); + }, this); + }, + + _handleDayTouchTap: function _handleDayTouchTap(e, date) { + if (this.props.onDayTouchTap) this.props.onDayTouchTap(e, date); + }, + + _shouldDisableDate: function _shouldDisableDate(day) { + if (day === null) return false; + var disabled = !DateTime.isBetweenDates(day, this.props.minDate, this.props.maxDate); + if (!disabled && this.props.shouldDisableDate) disabled = this.props.shouldDisableDate(day); + + return disabled; + } + +}); + +module.exports = CalendarMonth; +},{"../clearfix":69,"../utils/date-time":168,"./day-button":77,"react":357}],71:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var DateTime = require('../utils/date-time'); +var IconButton = require('../icon-button'); +var Toolbar = require('../toolbar/toolbar'); +var ToolbarGroup = require('../toolbar/toolbar-group'); +var DropDownMenu = require('../drop-down-menu'); +var NavigationChevronLeft = require('../svg-icons/navigation-chevron-left'); +var NavigationChevronLeftDouble = require('../svg-icons/navigation-chevron-left-double'); +var NavigationChevronRight = require('../svg-icons/navigation-chevron-right'); +var NavigationChevronRightDouble = require('../svg-icons/navigation-chevron-right-double'); +var SlideInTransitionGroup = require('../transition-groups/slide-in'); + +var CalendarToolbar = React.createClass({ + displayName: 'CalendarToolbar', + + propTypes: { + displayDate: React.PropTypes.object.isRequired, + onMonthChange: React.PropTypes.func, + onYearChange: React.PropTypes.func, + prevYear: React.PropTypes.bool, + nextYear: React.PropTypes.bool, + prevMonth: React.PropTypes.bool, + nextMonth: React.PropTypes.bool, + hideYearChangeButtons: React.PropTypes.bool + }, + + getDefaultProps: function getDefaultProps() { + return { + prevYear: true, + nextYear: true, + prevMonth: true, + nextMonth: true, + hideYearChangeButtons: false + }; + }, + + getInitialState: function getInitialState() { + return { + transitionDirection: 'up' + }; + }, + + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + var direction; + + if (nextProps.displayDate !== this.props.displayDate) { + direction = nextProps.displayDate > this.props.displayDate ? 'up' : 'down'; + this.setState({ + transitionDirection: direction + }); + } + }, + + _styles: function _styles() { + return { + root: { + position: 'relative', + padding: 0, + backgroundColor: 'inherit' + }, + + title: { + position: 'absolute', + top: '17px', + lineHeight: '14px', + fontSize: '14px', + height: '14px', + width: '100%', + fontWeight: '500', + textAlign: 'center', + zIndex: -1 + } + }; + }, + + render: function render() { + var month = DateTime.getFullMonth(this.props.displayDate); + var year = this.props.displayDate.getFullYear(); + var prevYearChangeButton = this._getPrevYearChangeButton(); + var nextYearChangeButton = this._getNextYearChangeButton(); + var styles = this._styles(); + + return React.createElement( + Toolbar, + { className: 'mui-date-picker-calendar-toolbar', style: styles.root, noGutter: true }, + React.createElement( + ToolbarGroup, + { key: 0, float: 'left' }, + prevYearChangeButton, + React.createElement( + IconButton, + { + disabled: !this.props.prevMonth, + onTouchTap: this._prevMonthTouchTap }, + React.createElement(NavigationChevronLeft, null) + ) + ), + React.createElement( + ToolbarGroup, + { key: 1, float: 'right' }, + React.createElement( + IconButton, + { + disabled: !this.props.nextMonth, + onTouchTap: this._nextMonthTouchTap }, + React.createElement(NavigationChevronRight, null) + ), + nextYearChangeButton + ), + React.createElement( + SlideInTransitionGroup, + { + style: styles.title, + direction: this.state.transitionDirection }, + React.createElement( + 'div', + { key: month + '_' + year }, + month, + ' ', + year + ) + ) + ); + }, + + _getPrevYearChangeButton: function _getPrevYearChangeButton() { + var style = { + display: this.props.hideYearChangeButtons ? 'none' : '' + }; + + return React.createElement( + IconButton, + { + style: style, + disabled: !this.props.prevYear, + onTouchTap: this._prevYearTouchTap }, + React.createElement(NavigationChevronLeftDouble, null) + ); + }, + + _getNextYearChangeButton: function _getNextYearChangeButton() { + var style = { + display: this.props.hideYearChangeButtons ? 'none' : '' + }; + + return React.createElement( + IconButton, + { + style: style, + disabled: !this.props.nextYear, + onTouchTap: this._nextYearTouchTap }, + React.createElement(NavigationChevronRightDouble, null) + ); + }, + + _prevYearTouchTap: function _prevYearTouchTap() { + if (this.props.onYearChange && this.props.prevYear) this.props.onYearChange(-1); + }, + + _nextYearTouchTap: function _nextYearTouchTap() { + if (this.props.onYearChange && this.props.nextYear) this.props.onYearChange(1); + }, + + _prevMonthTouchTap: function _prevMonthTouchTap() { + if (this.props.onMonthChange && this.props.prevMonth) this.props.onMonthChange(-1); + }, + + _nextMonthTouchTap: function _nextMonthTouchTap() { + if (this.props.onMonthChange && this.props.nextMonth) this.props.onMonthChange(1); + } + +}); + +module.exports = CalendarToolbar; +},{"../drop-down-menu":82,"../icon-button":89,"../svg-icons/navigation-chevron-left":129,"../svg-icons/navigation-chevron-left-double":128,"../svg-icons/navigation-chevron-right":131,"../svg-icons/navigation-chevron-right-double":130,"../toolbar/toolbar":162,"../toolbar/toolbar-group":159,"../transition-groups/slide-in":165,"../utils/date-time":168,"react":357}],72:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var Colors = require('../styles/colors'); +var DateTime = require('../utils/date-time'); +var YearButton = require('./year-button'); + +var CalendarYear = React.createClass({ + displayName: 'CalendarYear', + + mixins: [StylePropable], + + propTypes: { + displayDate: React.PropTypes.object.isRequired, + onYearTouchTap: React.PropTypes.func, + selectedDate: React.PropTypes.object.isRequired, + minDate: React.PropTypes.object, + maxDate: React.PropTypes.object + }, + + componentDidMount: function componentDidMount() { + this._scrollToSelectedYear(); + }, + + componentDidUpdate: function componentDidUpdate(prevProps, prevState) { + this._scrollToSelectedYear(); + }, + + render: function render() { + var years = this._getYears(); + var styles = { + position: 'relative', + height: 'inherit', + lineHeight: '36px', + textAlign: 'center', + padding: '8px 14px 0 14px', + backgroundColor: Colors.white, + overflowX: 'hidden', + overflowY: 'scroll' + }; + + return React.createElement( + 'div', + { style: styles }, + years + ); + }, + + _getYears: function _getYears() { + var minYear = this.props.minDate.getFullYear(); + var maxYear = this.props.maxDate.getFullYear(); + + var years = []; + var dateCheck = DateTime.clone(this.props.selectedDate); + for (var year = minYear; year <= maxYear; year++) { + dateCheck.setFullYear(year); + if (!DateTime.isBetweenDates(dateCheck, this.props.minDate, this.props.maxDate)) continue; + var selected = this.props.selectedDate.getFullYear() === year; + var selectedProps = {}; + if (selected) { + selectedProps = { ref: 'selectedYearButton' }; + } + + var yearButton = React.createElement(YearButton, _extends({ + key: 'yb' + year, + year: year, + onTouchTap: this._handleYearTouchTap, + selected: selected + }, selectedProps)); + + years.push(yearButton); + } + + return years; + }, + + _scrollToSelectedYear: function _scrollToSelectedYear() { + if (this.refs.selectedYearButton === undefined) return; + + var container = this.getDOMNode(); + var yearButtonNode = this.refs.selectedYearButton.getDOMNode(); + + var containerHeight = container.clientHeight; + var yearButtonNodeHeight = yearButtonNode.clientHeight || 32; + + var scrollYOffset = yearButtonNode.offsetTop + yearButtonNodeHeight / 2 - containerHeight / 2; + container.scrollTop = scrollYOffset; + }, + + _handleYearTouchTap: function _handleYearTouchTap(e, year) { + if (this.props.onYearTouchTap) this.props.onYearTouchTap(e, year); + } + +}); + +module.exports = CalendarYear; +},{"../mixins/style-propable":103,"../styles/colors":118,"../utils/date-time":168,"./year-button":78,"react":357}],73:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var WindowListenable = require('../mixins/window-listenable'); +var DateTime = require('../utils/date-time'); +var KeyCode = require('../utils/key-code'); +var Transitions = require('../styles/transitions'); +var CalendarMonth = require('./calendar-month'); +var CalendarYear = require('./calendar-year'); +var CalendarToolbar = require('./calendar-toolbar'); +var DateDisplay = require('./date-display'); +var SlideInTransitionGroup = require('../transition-groups/slide-in'); +var ClearFix = require('../clearfix'); + +var Calendar = React.createClass({ + displayName: 'Calendar', + + mixins: [StylePropable, WindowListenable], + + propTypes: { + initialDate: React.PropTypes.object, + isActive: React.PropTypes.bool, + minDate: React.PropTypes.object, + maxDate: React.PropTypes.object, + shouldDisableDate: React.PropTypes.func, + hideToolbarYearChange: React.PropTypes.bool, + shouldShowMonthDayPickerFirst: React.PropTypes.bool, + shouldShowYearPickerFirst: React.PropTypes.bool, + showYearSelector: React.PropTypes.bool, + onSelectedDate: React.PropTypes.func + }, + + windowListeners: { + 'keydown': '_handleWindowKeyDown' + }, + + getDefaultProps: function getDefaultProps() { + return { + initialDate: new Date(), + minDate: DateTime.addYears(new Date(), -100), + maxDate: DateTime.addYears(new Date(), 100), + hideToolbarYearChange: false, + shouldShowMonthDayPickerFirst: true, + shouldShowYearPickerFirst: false, + showYearSelector: false + }; + }, + + getInitialState: function getInitialState() { + return { + displayDate: DateTime.getFirstDayOfMonth(this.props.initialDate), + selectedDate: this.props.initialDate, + transitionDirection: 'left', + displayMonthDay: this.props.shouldShowMonthDayPickerFirst || this.props.shouldShowYearPickerFirst || true, + transitionEnter: true + }; + }, + + getStyles: function getStyles() {}, + + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + if (nextProps.initialDate !== this.props.initialDate) { + var d = nextProps.initialDate || new Date(); + this.setState({ + displayDate: DateTime.getFirstDayOfMonth(d), + selectedDate: d + }); + } + + if (nextProps.shouldShowMonthDayPickerFirst) { + this.setState({ displayMonthDay: nextProps.shouldShowMonthDayPickerFirst }); + } + }, + + render: function render() { + var yearCount = DateTime.yearDiff(this.props.maxDate, this.props.minDate) + 1; + var weekCount = DateTime.getWeekArray(this.state.displayDate).length; + var toolbarInteractions = this._getToolbarInteractions(); + var hideYearChangeButtons = this.props.hideToolbarYearChange || !this.props.showYearSelector; + var isMultiYearRange = yearCount > 2; // Want a year range greater than 1. Ex. [2014,2016] has a count of 3 + var isLandscape = this.props.mode === 'landscape'; + var styles = { + root: { + fontSize: '12px' + }, + calendarContainer: { + width: isLandscape ? '280px' : '100%', + height: weekCount === 5 ? '268px' : weekCount === 6 ? '308px' : '228px', + float: isLandscape ? 'right' : 'none', + transition: Transitions.easeOut('150ms', 'height') + }, + yearContainer: { + width: '280px', + overflow: 'hidden', + height: yearCount < 6 ? yearCount * 56 + 10 : weekCount === 5 ? '268px' : weekCount === 6 ? '308px' : '228px', + float: isLandscape ? 'right' : 'none' + }, + dateDisplay: { + width: isLandscape ? '280px' : '100%', + height: '100%', + float: isLandscape ? 'left' : 'none' + }, + weekTitle: { + padding: '0 14px', + lineHeight: '12px', + opacity: '0.5', + height: '12px', + fontWeight: '500', + margin: 0 + }, + weekTitleDay: { + listStyle: 'none', + float: 'left', + width: '32px', + textAlign: 'center', + margin: '0 2px' + } + }; + + if (this.state.displayMonthDay || !this.props.showYearSelector) { + styles.yearContainer.display = 'none'; + } else { + styles.calendarContainer.display = 'none'; + } + + return React.createElement( + ClearFix, + { style: this.mergeAndPrefix(styles.root) }, + React.createElement(DateDisplay, { + style: styles.dateDisplay, + selectedDate: this.state.selectedDate, + handleMonthDayClick: this._handleMonthDayClick, + handleYearClick: this._handleYearClick, + yearSelectionAvailable: this.props.showYearSelector && isMultiYearRange, + monthDaySelected: this.state.displayMonthDay, + mode: this.props.mode, + weekCount: weekCount }), + React.createElement( + 'div', + { style: styles.calendarContainer }, + React.createElement(CalendarToolbar, { + displayDate: this.state.displayDate, + onMonthChange: this._handleMonthChange, + onYearChange: this._handleYearChange, + prevMonth: toolbarInteractions.prevMonth, + nextMonth: toolbarInteractions.nextMonth, + prevYear: toolbarInteractions.prevYear, + nextYear: toolbarInteractions.nextYear, + hideYearChangeButtons: hideYearChangeButtons }), + React.createElement( + ClearFix, + { + elementType: 'ul', + style: styles.weekTitle }, + React.createElement( + 'li', + { style: styles.weekTitleDay }, + 'S' + ), + React.createElement( + 'li', + { style: styles.weekTitleDay }, + 'M' + ), + React.createElement( + 'li', + { style: styles.weekTitleDay }, + 'T' + ), + React.createElement( + 'li', + { style: styles.weekTitleDay }, + 'W' + ), + React.createElement( + 'li', + { style: styles.weekTitleDay }, + 'T' + ), + React.createElement( + 'li', + { style: styles.weekTitleDay }, + 'F' + ), + React.createElement( + 'li', + { style: styles.weekTitleDay }, + 'S' + ) + ), + React.createElement( + SlideInTransitionGroup, + { + direction: this.state.transitionDirection }, + React.createElement(CalendarMonth, { + key: this.state.displayDate.toDateString(), + ref: 'calendar', + displayDate: this.state.displayDate, + onDayTouchTap: this._handleDayTouchTap, + selectedDate: this.state.selectedDate, + minDate: this.props.minDate, + maxDate: this.props.maxDate, + shouldDisableDate: this.props.shouldDisableDate }) + ) + ), + React.createElement( + 'div', + { style: styles.yearContainer }, + this._yearSelector() + ) + ); + }, + + _yearSelector: function _yearSelector() { + if (this.props.showYearSelector) { + return React.createElement(CalendarYear, { + key: 'years', + displayDate: this.state.displayDate, + onYearTouchTap: this._handleYearTouchTap, + selectedDate: this.state.selectedDate, + minDate: this.props.minDate, + maxDate: this.props.maxDate }); + } + }, + + getSelectedDate: function getSelectedDate() { + return this.state.selectedDate; + }, + + isSelectedDateDisabled: function isSelectedDateDisabled() { + return this.refs.calendar.isSelectedDateDisabled(); + }, + + _addSelectedDays: function _addSelectedDays(days) { + this._setSelectedDate(DateTime.addDays(this.state.selectedDate, days)); + }, + + _addSelectedMonths: function _addSelectedMonths(months) { + this._setSelectedDate(DateTime.addMonths(this.state.selectedDate, months)); + }, + + _addSelectedYears: function _addSelectedYears(years) { + this._setSelectedDate(DateTime.addYears(this.state.selectedDate, years)); + }, + + _setDisplayDate: function _setDisplayDate(d, newSelectedDate) { + var newDisplayDate = DateTime.getFirstDayOfMonth(d); + var direction = newDisplayDate > this.state.displayDate ? 'left' : 'right'; + + if (newDisplayDate !== this.state.displayDate) { + this.setState({ + displayDate: newDisplayDate, + transitionDirection: direction, + selectedDate: newSelectedDate || this.state.selectedDate + }); + } + }, + + _setSelectedDate: function _setSelectedDate(date, e) { + var adjustedDate = date; + if (DateTime.isBeforeDate(date, this.props.minDate)) { + adjustedDate = this.props.minDate; + } else if (DateTime.isAfterDate(date, this.props.maxDate)) { + adjustedDate = this.props.maxDate; + } + + var newDisplayDate = DateTime.getFirstDayOfMonth(adjustedDate); + if (newDisplayDate !== this.state.displayDate) { + this._setDisplayDate(newDisplayDate, adjustedDate); + } else { + this.setState({ + selectedDate: adjustedDate + }); + } + if (this.props.onSelectedDate) this.props.onSelectedDate(e, date); + }, + + _handleDayTouchTap: function _handleDayTouchTap(e, date) { + this._setSelectedDate(date, e); + }, + + _handleMonthChange: function _handleMonthChange(months) { + this._addSelectedMonths(months); + }, + + _handleYearChange: function _handleYearChange(years) { + this._addSelectedYears(years); + }, + + _handleYearTouchTap: function _handleYearTouchTap(e, year) { + var date = DateTime.clone(this.state.selectedDate); + date.setFullYear(year); + this._setSelectedDate(date, e); + }, + + _getToolbarInteractions: function _getToolbarInteractions() { + return { + prevMonth: DateTime.monthDiff(this.state.selectedDate, this.props.minDate) > 0, + nextMonth: DateTime.monthDiff(this.state.selectedDate, this.props.maxDate) < 0, + prevYear: DateTime.yearDiff(this.state.selectedDate, this.props.minDate) > 0, + nextYear: DateTime.yearDiff(this.state.selectedDate, this.props.maxDate) < 0 + }; + }, + + _handleMonthDayClick: function _handleMonthDayClick() { + this.setState({ displayMonthDay: true }); + }, + + _handleYearClick: function _handleYearClick() { + this.setState({ displayMonthDay: false }); + }, + + _handleWindowKeyDown: function _handleWindowKeyDown(e) { + if (this.props.isActive) { + + switch (e.keyCode) { + case KeyCode.UP: + if (e.altKey && e.shiftKey) { + this._addSelectedYears(-1); + } else if (e.shiftKey) { + this._addSelectedMonths(-1); + } else { + this._addSelectedDays(-7); + } + break; + + case KeyCode.DOWN: + if (e.altKey && e.shiftKey) { + this._addSelectedYears(1); + } else if (e.shiftKey) { + this._addSelectedMonths(1); + } else { + this._addSelectedDays(7); + } + break; + + case KeyCode.RIGHT: + if (e.altKey && e.shiftKey) { + this._addSelectedYears(1); + } else if (e.shiftKey) { + this._addSelectedMonths(1); + } else { + this._addSelectedDays(1); + } + break; + + case KeyCode.LEFT: + if (e.altKey && e.shiftKey) { + this._addSelectedYears(-1); + } else if (e.shiftKey) { + this._addSelectedMonths(-1); + } else { + this._addSelectedDays(-1); + } + break; + } + } + } + +}); + +module.exports = Calendar; +},{"../clearfix":69,"../mixins/style-propable":103,"../mixins/window-listenable":105,"../styles/transitions":124,"../transition-groups/slide-in":165,"../utils/date-time":168,"../utils/key-code":172,"./calendar-month":70,"./calendar-toolbar":71,"./calendar-year":72,"./date-display":74,"react":357}],74:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var DateTime = require('../utils/date-time'); +var Transitions = require('../styles/transitions'); +var AutoPrefix = require('../styles/auto-prefix'); +var SlideInTransitionGroup = require('../transition-groups/slide-in'); + +var DateDisplay = React.createClass({ + displayName: 'DateDisplay', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + selectedDate: React.PropTypes.object.isRequired, + weekCount: React.PropTypes.number, + yearSelectionAvailable: React.PropTypes.bool, + monthDaySelected: React.PropTypes.bool + }, + + getDefaultProps: function getDefaultProps() { + return { + weekCount: 4, + yearSelectionAvailable: true, + monthDaySelected: true + }; + }, + + getInitialState: function getInitialState() { + return { + transitionDirection: 'up', + selectedYear: !this.props.monthDaySelected + }; + }, + + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + var direction; + + if (nextProps.selectedDate !== this.props.selectedDate) { + direction = nextProps.selectedDate > this.props.selectedDate ? 'up' : 'down'; + this.setState({ + transitionDirection: direction + }); + } + + if (nextProps.monthDaySelected !== undefined) { + this.setState({ selectedYear: !nextProps.monthDaySelected }); + } + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.datePicker; + }, + + render: function render() { + var _props = this.props; + var selectedDate = _props.selectedDate; + var style = _props.style; + + var other = _objectWithoutProperties(_props, ['selectedDate', 'style']); + + var dayOfWeek = DateTime.getDayOfWeek(this.props.selectedDate); + var month = DateTime.getShortMonth(this.props.selectedDate); + var day = this.props.selectedDate.getDate(); + var year = this.props.selectedDate.getFullYear(); + + var isLandscape = this.props.mode === 'landscape'; + var dateYPosition = '0px'; + var dayYPosition = '30px'; + var yearYPosition = '95px'; + + if (isLandscape) { + dateYPosition = this.props.weekCount === 5 ? '14px' : this.props.weekCount === 6 ? '34px' : '8px'; + yearYPosition = this.props.weekCount === 4 ? '114px' : '150px'; + if (this.props.weekCount > 4) dayYPosition = '50px'; + } + + var styles = { + root: { + textAlign: 'center', + position: 'relative' + }, + + dateContainer: { + backgroundColor: this.getTheme().color, + height: isLandscape ? this.props.weekCount * 40 + 36 + 'px' : '150px', + padding: '16px 0', + transition: Transitions.easeOut(), + boxSizing: 'border-box' + }, + + date: { + position: 'relative', + color: this.getTheme().textColor, + transition: Transitions.easeOut(), + transform: 'translate3d(0,' + dateYPosition + ',0)' + }, + + dowContainer: { + height: '32px', + backgroundColor: this.getTheme().selectColor, + borderRadius: isLandscape ? '2px 0 0 0' : '2px 2px 0 0', + paddingTop: '9px', + boxSizing: 'border-box' + }, + + dow: { + fontSize: '13px', + lineHeight: '13px', + height: '100%', + color: this.getTheme().selectTextColor + }, + + day: { + root: { + position: 'absolute', + lineHeight: isLandscape ? '76px' : '58px', + fontSize: isLandscape ? '76px' : '58px', + height: isLandscape ? '76px' : '58px', + width: '100%', + opacity: this.state.selectedYear ? '0.7' : '1.0', + transition: Transitions.easeOut(), + transform: 'translate3d(0,' + dayYPosition + ',0)' + }, + + title: { + width: '100px', + marginLeft: 'auto', + marginRight: 'auto', + cursor: !this.state.selectedYear ? 'default' : 'pointer' + } + }, + + month: { + root: { + position: 'absolute', + top: isLandscape ? '0px' : '1px', + fontSize: isLandscape ? '26px' : '22px', + lineHeight: isLandscape ? '26px' : '22px', + height: isLandscape ? '26px' : '22px', + width: '100%', + textTransform: 'uppercase', + opacity: this.state.selectedYear ? '0.7' : '1.0' + }, + + title: { + width: '100px', + marginLeft: 'auto', + marginRight: 'auto', + cursor: !this.state.selectedYear ? 'default' : 'pointer' + } + }, + + year: { + root: { + position: 'absolute', + margin: '0px', + fontSize: isLandscape ? '26px' : '22px', + lineHeight: isLandscape ? '26px' : '22px', + height: isLandscape ? '26px' : '22px', + width: '100%', + textTransform: 'uppercase', + opacity: this.state.selectedYear ? '1.0' : '0.7', + transition: Transitions.easeOut(), + transform: 'translate3d(0,' + yearYPosition + ',0)' + }, + + title: { + width: '100px', + marginLeft: 'auto', + marginRight: 'auto', + cursor: !this.props.yearSelectionAvailable || this.state.selectedYear ? 'default' : 'pointer' + } + } + }; + + return React.createElement( + 'div', + _extends({}, other, { style: this.mergeAndPrefix(styles.root, this.props.style) }), + React.createElement( + 'div', + { style: styles.dowContainer }, + React.createElement( + SlideInTransitionGroup, + { + style: styles.dow, + direction: this.state.transitionDirection }, + React.createElement( + 'div', + { key: dayOfWeek }, + dayOfWeek + ) + ) + ), + React.createElement( + 'div', + { style: AutoPrefix.all(styles.dateContainer) }, + React.createElement( + 'div', + { style: AutoPrefix.all(styles.date) }, + React.createElement( + SlideInTransitionGroup, + { + style: styles.month.root, + direction: this.state.transitionDirection }, + React.createElement( + 'div', + { key: month, style: styles.month.title, onTouchTap: this._handleMonthDayClick }, + month + ) + ), + React.createElement( + SlideInTransitionGroup, + { + style: styles.day.root, + direction: this.state.transitionDirection }, + React.createElement( + 'div', + { key: day, style: styles.day.title, onTouchTap: this._handleMonthDayClick }, + day + ) + ), + React.createElement( + SlideInTransitionGroup, + { + style: styles.year.root, + direction: this.state.transitionDirection }, + React.createElement( + 'div', + { key: year, style: styles.year.title, onTouchTap: this._handleYearClick }, + year + ) + ) + ) + ) + ); + }, + + _handleMonthDayClick: function _handleMonthDayClick() { + if (this.props.handleMonthDayClick && this.state.selectedYear) { + this.props.handleMonthDayClick(); + } + + if (this.props.yearSelectionAvailable) this.setState({ selectedYear: false }); + }, + + _handleYearClick: function _handleYearClick() { + if (this.props.handleYearClick && !this.state.selectedYear && this.props.yearSelectionAvailable) { + this.props.handleYearClick(); + } + + if (this.props.yearSelectionAvailable) this.setState({ selectedYear: true }); + } + +}); + +module.exports = DateDisplay; +},{"../mixins/style-propable":103,"../styles/auto-prefix":117,"../styles/transitions":124,"../transition-groups/slide-in":165,"../utils/date-time":168,"react":357}],75:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var WindowListenable = require('../mixins/window-listenable'); +var CssEvent = require('../utils/css-event'); +var KeyCode = require('../utils/key-code'); +var Calendar = require('./calendar'); +var DialogWindow = require('../dialog-window'); +var FlatButton = require('../flat-button'); + +var DatePickerDialog = React.createClass({ + displayName: 'DatePickerDialog', + + mixins: [StylePropable, WindowListenable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + initialDate: React.PropTypes.object, + onAccept: React.PropTypes.func, + onShow: React.PropTypes.func, + onDismiss: React.PropTypes.func, + onClickAway: React.PropTypes.func, + minDate: React.PropTypes.object, + maxDate: React.PropTypes.object, + shouldDisableDate: React.PropTypes.func, + hideToolbarYearChange: React.PropTypes.bool, + showYearSelector: React.PropTypes.bool + }, + + windowListeners: { + 'keyup': '_handleWindowKeyUp' + }, + + getInitialState: function getInitialState() { + return { + isCalendarActive: false, + showMonthDayPicker: true + }; + }, + + render: function render() { + var _props = this.props; + var initialDate = _props.initialDate; + var onAccept = _props.onAccept; + var style = _props.style; + + var other = _objectWithoutProperties(_props, ['initialDate', 'onAccept', 'style']); + + var styles = { + root: { + fontSize: '14px', + color: this.context.muiTheme.component.datePicker.calendarTextColor + }, + + dialogContents: { + width: this.props.mode === 'landscape' ? '560px' : '280px' + }, + + actions: { + marginRight: 8 + } + }; + + var actions = [React.createElement(FlatButton, { + key: 0, + label: 'Cancel', + secondary: true, + style: styles.actions, + onTouchTap: this._handleCancelTouchTap }), React.createElement(FlatButton, { + key: 1, + label: 'OK', + secondary: true, + disabled: this.refs.calendar !== undefined && this.refs.calendar.isSelectedDateDisabled(), + style: styles.actions, + onTouchTap: this._handleOKTouchTap })]; + + if (this.props.autoOk) { + actions = actions.slice(0, 1); + } + + return React.createElement( + DialogWindow, + _extends({}, other, { + ref: 'dialogWindow', + style: styles.root, + contentStyle: styles.dialogContents, + actions: actions, + onDismiss: this._handleDialogDismiss, + onShow: this._handleDialogShow, + onClickAway: this._handleDialogClickAway, + repositionOnUpdate: false }), + React.createElement(Calendar, { + ref: 'calendar', + onSelectedDate: this._onSelectedDate, + initialDate: this.props.initialDate, + isActive: this.state.isCalendarActive, + minDate: this.props.minDate, + maxDate: this.props.maxDate, + shouldDisableDate: this.props.shouldDisableDate, + shouldShowMonthDayPickerFirst: this.state.showMonthDayPicker, + hideToolbarYearChange: this.props.hideToolbarYearChange, + showYearSelector: this.props.showYearSelector, + mode: this.props.mode }) + ); + }, + + show: function show() { + this.refs.dialogWindow.show(); + }, + + dismiss: function dismiss() { + this.refs.dialogWindow.dismiss(); + }, + + _onSelectedDate: function _onSelectedDate(e) { + if (this.props.autoOk) { + setTimeout(this._handleOKTouchTap, 300); + } + }, + + _handleCancelTouchTap: function _handleCancelTouchTap() { + this.dismiss(); + }, + + _handleOKTouchTap: function _handleOKTouchTap() { + if (this.props.onAccept && !this.refs.calendar.isSelectedDateDisabled()) { + this.props.onAccept(this.refs.calendar.getSelectedDate()); + } + + this.dismiss(); + }, + + _handleDialogShow: function _handleDialogShow() { + this.setState({ + isCalendarActive: true + }); + + if (this.props.onShow) this.props.onShow(); + }, + + _handleDialogDismiss: function _handleDialogDismiss() { + CssEvent.onTransitionEnd(this.refs.dialogWindow.getDOMNode(), (function () { + this.setState({ + isCalendarActive: false, + showMonthDayPicker: true + }); + }).bind(this)); + + if (this.props.onDismiss) this.props.onDismiss(); + }, + + _handleDialogClickAway: function _handleDialogClickAway() { + CssEvent.onTransitionEnd(this.refs.dialogWindow.getDOMNode(), (function () { + this.setState({ + isCalendarActive: false, + showMonthDayPicker: true + }); + }).bind(this)); + + if (this.props.onClickAway) this.props.onClickAway(); + }, + + _handleWindowKeyUp: function _handleWindowKeyUp(e) { + if (this.refs.dialogWindow.isOpen()) { + switch (e.keyCode) { + case KeyCode.ENTER: + this._handleOKTouchTap(); + break; + } + } + } + +}); + +module.exports = DatePickerDialog; +},{"../dialog-window":79,"../flat-button":86,"../mixins/style-propable":103,"../mixins/window-listenable":105,"../utils/css-event":167,"../utils/key-code":172,"./calendar":73,"react":357}],76:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var WindowListenable = require('../mixins/window-listenable'); +var DateTime = require('../utils/date-time'); +var DatePickerDialog = require('./date-picker-dialog'); +var TextField = require('../text-field'); + +var DatePicker = React.createClass({ + displayName: 'DatePicker', + + mixins: [StylePropable, WindowListenable], + + propTypes: { + defaultDate: React.PropTypes.object, + formatDate: React.PropTypes.func, + mode: React.PropTypes.oneOf(['portrait', 'landscape', 'inline']), + onFocus: React.PropTypes.func, + onTouchTap: React.PropTypes.func, + onChange: React.PropTypes.func, + onShow: React.PropTypes.func, + onDismiss: React.PropTypes.func, + minDate: React.PropTypes.object, + maxDate: React.PropTypes.object, + shouldDisableDate: React.PropTypes.func, + hideToolbarYearChange: React.PropTypes.bool, + autoOk: React.PropTypes.bool, + showYearSelector: React.PropTypes.bool + }, + + windowListeners: { + 'keyup': '_handleWindowKeyUp' + }, + + getDefaultProps: function getDefaultProps() { + return { + formatDate: DateTime.format, + autoOk: false, + showYearSelector: false + }; + }, + + getInitialState: function getInitialState() { + return { + date: this.props.defaultDate, + dialogDate: new Date() + }; + }, + + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + if (this.props.defaultDate !== nextProps.defaultDate) { + this.setDate(nextProps.defaultDate); + } + }, + + render: function render() { + var _props = this.props; + var formatDate = _props.formatDate; + var mode = _props.mode; + var onFocus = _props.onFocus; + var onTouchTap = _props.onTouchTap; + var onShow = _props.onShow; + var onDismiss = _props.onDismiss; + var minDate = _props.minDate; + var maxDate = _props.maxDate; + var autoOk = _props.autoOk; + var showYearSelector = _props.showYearSelector; + + var other = _objectWithoutProperties(_props, ['formatDate', 'mode', 'onFocus', 'onTouchTap', 'onShow', 'onDismiss', 'minDate', 'maxDate', 'autoOk', 'showYearSelector']); + + var defaultInputValue; + + if (this.props.defaultDate) { + defaultInputValue = this.props.formatDate(this.props.defaultDate); + } + + return React.createElement( + 'div', + { style: this.props.style }, + React.createElement(TextField, _extends({}, other, { + ref: 'input', + defaultValue: defaultInputValue, + onFocus: this._handleInputFocus, + onTouchTap: this._handleInputTouchTap })), + React.createElement(DatePickerDialog, { + ref: 'dialogWindow', + mode: this.props.mode, + initialDate: this.state.dialogDate, + onAccept: this._handleDialogAccept, + onShow: onShow, + onDismiss: this._handleDialogDismiss, + minDate: minDate, + maxDate: maxDate, + autoOk: autoOk, + showYearSelector: showYearSelector, + shouldDisableDate: this.props.shouldDisableDate, + hideToolbarYearChange: this.props.hideToolbarYearChange }) + ); + }, + + getDate: function getDate() { + return this.state.date; + }, + + setDate: function setDate(d) { + this.setState({ + date: d + }); + this.refs.input.setValue(this.props.formatDate(d)); + }, + + _handleDialogAccept: function _handleDialogAccept(d) { + this.setDate(d); + if (this.props.onChange) this.props.onChange(null, d); + }, + + _handleDialogDismiss: function _handleDialogDismiss() { + if (this.props.onDismiss) this.props.onDismiss(); + }, + + _handleInputFocus: function _handleInputFocus(e) { + e.target.blur(); + if (this.props.onFocus) this.props.onFocus(e); + }, + + _handleInputTouchTap: function _handleInputTouchTap(e) { + this.setState({ + dialogDate: this.getDate() + }); + + this.refs.dialogWindow.show(); + if (this.props.onTouchTap) this.props.onTouchTap(e); + }, + + _handleWindowKeyUp: function _handleWindowKeyUp() {} + +}); + +module.exports = DatePicker; + +//TO DO: open the dialog if input has focus +},{"../mixins/style-propable":103,"../mixins/window-listenable":105,"../text-field":146,"../utils/date-time":168,"./date-picker-dialog":75,"react":357}],77:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var Transition = require('../styles/transitions'); +var DateTime = require('../utils/date-time'); +var EnhancedButton = require('../enhanced-button'); + +var DayButton = React.createClass({ + displayName: 'DayButton', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + date: React.PropTypes.object, + onTouchTap: React.PropTypes.func, + selected: React.PropTypes.bool, + disabled: React.PropTypes.bool + }, + + getDefaultProps: function getDefaultProps() { + return { + selected: false, + disabled: false + }; + }, + + getInitialState: function getInitialState() { + return { + hover: false + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.datePicker; + }, + + render: function render() { + var _props = this.props; + var date = _props.date; + var onTouchTap = _props.onTouchTap; + var selected = _props.selected; + + var other = _objectWithoutProperties(_props, ['date', 'onTouchTap', 'selected']); + + var styles = { + root: { + boxSizing: 'border-box', + WebkitTapHighlightColor: 'rgba(0,0,0,0)', + position: 'relative', + float: 'left', + width: 36, + padding: '4px 2px' + }, + + label: { + position: 'relative', + color: this.context.muiTheme.palette.textColor + }, + + buttonState: { + position: 'absolute', + height: 32, + width: 32, + opacity: 0, + borderRadius: '50%', + transform: 'scale(0)', + transition: Transition.easeOut(), + backgroundColor: this.getTheme().selectColor + } + }; + + if (this.state.hover) { + styles.label.color = this.getTheme().selectTextColor; + styles.buttonState.opacity = '0.6'; + styles.buttonState.transform = 'scale(1)'; + } + + if (this.props.selected) { + styles.label.color = this.getTheme().selectTextColor; + styles.buttonState.opacity = 1; + styles.buttonState.transform = 'scale(1)'; + } else if (this.props.disabled) { + styles.root.opacity = '0.6'; + } + + if (DateTime.isEqualDate(this.props.date, new Date()) && !this.props.selected) { + styles.label.color = this.getTheme().color; + } + + return this.props.date ? React.createElement( + EnhancedButton, + _extends({}, other, { + style: styles.root, + hoverStyle: styles.hover, + disabled: this.props.disabled, + disableFocusRipple: true, + disableTouchRipple: true, + onMouseOver: this._handleMouseOver, + onMouseOut: this._handleMouseOut, + onTouchTap: this._handleTouchTap, + onKeyboardFocus: this._handleKeyboardFocus }), + React.createElement('div', { style: styles.buttonState }), + React.createElement( + 'span', + { style: styles.label }, + this.props.date.getDate() + ) + ) : React.createElement('span', { style: styles.root }); + }, + + _handleMouseOver: function _handleMouseOver() { + if (!this.props.disabled) this.setState({ hover: true }); + }, + + _handleMouseOut: function _handleMouseOut() { + if (!this.props.disabled) this.setState({ hover: false }); + }, + + _handleTouchTap: function _handleTouchTap(e) { + if (!this.props.disabled && this.props.onTouchTap) this.props.onTouchTap(e, this.props.date); + }, + + _handleKeyboardFocus: function _handleKeyboardFocus(e, keyboardFocused) { + if (!this.props.disabled && this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, keyboardFocused, this.props.date); + } + +}); + +module.exports = DayButton; +},{"../enhanced-button":83,"../mixins/style-propable":103,"../styles/transitions":124,"../utils/date-time":168,"react":357}],78:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var DateTime = require('../utils/date-time'); +var EnhancedButton = require('../enhanced-button'); + +var YearButton = React.createClass({ + displayName: 'YearButton', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + year: React.PropTypes.number, + onTouchTap: React.PropTypes.func, + selected: React.PropTypes.bool + }, + + getDefaultProps: function getDefaultProps() { + return { + selected: false + }; + }, + + getInitialState: function getInitialState() { + return { + hover: false + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.datePicker; + }, + + render: function render() { + var _props = this.props; + var className = _props.className; + var year = _props.year; + var onTouchTap = _props.onTouchTap; + var selected = _props.selected; + + var other = _objectWithoutProperties(_props, ['className', 'year', 'onTouchTap', 'selected']); + + var styles = { + root: { + boxSizing: 'border-box', + WebkitTapHighlightColor: 'rgba(0,0,0,0)', + position: 'relative', + display: 'block', + margin: '0 auto', + width: 36, + fontSize: '14px', + padding: '8px 2px' + }, + + label: { + position: 'relative', + top: '-1px', + color: this.context.muiTheme.palette.textColor + }, + + buttonState: { + position: 'absolute', + height: 32, + width: 32, + opacity: 0, + borderRadius: '50%', + transform: 'scale(0)', + backgroundColor: this.getTheme().selectColor + } + }; + + if (this.state.hover) { + styles.label.color = this.getTheme().selectTextColor; + styles.buttonState.opacity = '0.6'; + styles.buttonState.transform = 'scale(1.5)'; + } + + if (selected) { + styles.label.color = this.getTheme().selectTextColor; + styles.buttonState.opacity = 1; + styles.buttonState.transform = 'scale(1.5)'; + } + + if (year === new Date().getFullYear()) { + styles.root.color = this.getTheme().color; + } + + return React.createElement( + EnhancedButton, + _extends({}, other, { + style: styles.root, + disableFocusRipple: true, + disableTouchRipple: true, + onMouseOver: this._handleMouseOver, + onMouseOut: this._handleMouseOut, + onTouchTap: this._handleTouchTap }), + React.createElement('div', { style: styles.buttonState }), + React.createElement( + 'span', + { style: styles.label }, + year + ) + ); + }, + + _handleMouseOver: function _handleMouseOver() { + this.setState({ hover: true }); + }, + + _handleMouseOut: function _handleMouseOut() { + this.setState({ hover: false }); + }, + + _handleTouchTap: function _handleTouchTap(e) { + if (this.props.onTouchTap) this.props.onTouchTap(e, this.props.year); + } + +}); + +module.exports = YearButton; +},{"../enhanced-button":83,"../mixins/style-propable":103,"../utils/date-time":168,"react":357}],79:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var WindowListenable = require('./mixins/window-listenable'); +var CssEvent = require('./utils/css-event'); +var KeyCode = require('./utils/key-code'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var FlatButton = require('./flat-button'); +var Overlay = require('./overlay'); +var Paper = require('./paper'); + +var DialogWindow = React.createClass({ + displayName: 'DialogWindow', + + closeable: false, + + mixins: [WindowListenable, StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + actions: React.PropTypes.array, + actionFocus: React.PropTypes.string, + contentClassName: React.PropTypes.string, + contentStyle: React.PropTypes.object, + openImmediately: React.PropTypes.bool, + onClickAway: React.PropTypes.func, + onDismiss: React.PropTypes.func, + onShow: React.PropTypes.func, + repositionOnUpdate: React.PropTypes.bool, + modal: React.PropTypes.bool + }, + + windowListeners: { + 'keyup': '_handleWindowKeyUp', + 'resize': '_positionDialog' + }, + + getDefaultProps: function getDefaultProps() { + return { + actions: [], + repositionOnUpdate: true, + modal: false + }; + }, + + getInitialState: function getInitialState() { + return { + open: this.props.openImmediately || false + }; + }, + + componentDidMount: function componentDidMount() { + this._positionDialog(); + if (this.props.openImmediately) { + this.show(); + } + }, + + componentDidUpdate: function componentDidUpdate(prevProps, prevState) { + this._positionDialog(); + this._focusOnAction(); + }, + + getTheme: function getTheme() { + return this.context.muiTheme; + }, + + getSpacing: function getSpacing() { + return this.context.muiTheme.spacing; + }, + + getStyles: function getStyles() { + var styles = { + root: { + position: 'fixed', + boxSizing: 'border-box', + WebkitTapHighlightColor: 'rgba(0,0,0,0)', + zIndex: 10, + top: 0, + left: -10000, + width: '100%', + height: '100%', + transition: Transitions.easeOut('0ms', 'left', '450ms'), + color: this.getTheme().palette.textColor + }, + contents: { + boxSizing: 'border-box', + WebkitTapHighlightColor: 'rgba(0,0,0,0)', + transition: Transitions.easeOut(), + position: 'relative', + width: '75%', + maxWidth: this.getSpacing().desktopKeylineIncrement * 12, + margin: '0 auto', + zIndex: 10, + background: this.getTheme().palette.canvasColor, + opacity: 0 + }, + rootWhenOpen: { + left: 2, + transition: Transitions.easeOut('0ms', 'left', '0ms') + }, + contentsWhenOpen: { + opacity: 1, + top: 0, + transform: 'translate3d(0, ' + this.getSpacing().desktopKeylineIncrement + 'px, 0)' + } + }; + return styles; + }, + + render: function render() { + var actions = this._getActionsContainer(this.props.actions); + var styles = this.getStyles(); + + return React.createElement( + 'div', + { ref: 'container', style: this.mergeAndPrefix(styles.root, this.props.style, this.state.open && styles.rootWhenOpen) }, + React.createElement( + Paper, + { + ref: 'dialogWindow', + style: this.mergeAndPrefix(styles.contents, this.props.contentStyle, this.state.open && styles.contentsWhenOpen), + className: this.props.contentClassName, + zDepth: 4 }, + this.props.children, + actions + ), + React.createElement(Overlay, { ref: 'dialogOverlay', show: this.state.open, autoLockScrolling: false, onTouchTap: this._handleOverlayTouchTap }) + ); + }, + + isOpen: function isOpen() { + return this.state.open; + }, + + dismiss: function dismiss() { + if (this.closeable) { + CssEvent.onTransitionEnd(React.findDOMNode(this), (function () { + this.refs.dialogOverlay.allowScrolling(); + }).bind(this)); + + this.setState({ open: false }); + this._onDismiss(); + } + }, + + show: function show() { + // prevent rapid show/hide + setTimeout((function () { + this.closeable = true; + }).bind(this), 250); + + this.refs.dialogOverlay.preventScrolling(); + this._focusOnAction(); + this.setState({ open: true }); + this._onShow(); + }, + + _getAction: function _getAction(actionJSON, key) { + var _this = this; + + var styles = { marginRight: 8 }; + var props = { + key: key, + secondary: true, + onClick: actionJSON.onClick, + onTouchTap: function onTouchTap() { + if (actionJSON.onTouchTap) { + actionJSON.onTouchTap.call(undefined); + } + if (!(actionJSON.onClick || actionJSON.onTouchTap)) { + _this.dismiss(); + } + }, + label: actionJSON.text, + style: styles + }; + if (actionJSON.ref) { + props.ref = actionJSON.ref; + props.keyboardFocused = actionJSON.ref === this.props.actionFocus; + } + + return React.createElement(FlatButton, props); + }, + + _getActionsContainer: function _getActionsContainer(actions) { + //json w/ refs + var actionContainer; + var actionObjects = []; + var actionStyle = { + boxSizing: 'border-box', + WebkitTapHighlightColor: 'rgba(s0,0,0,0)', + padding: 8, + marginBottom: 8, + width: '100%', + textAlign: 'right' + }; + + if (actions.length) { + for (var i = 0; i < actions.length; i++) { + var currentAction = actions[i]; + + //if the current action isn't a react object, create one + if (!React.isValidElement(currentAction)) { + currentAction = this._getAction(currentAction, i); + } + actionObjects.push(currentAction); + } + + actionContainer = React.createElement( + 'div', + { style: actionStyle }, + actionObjects + ); + } + + return actionContainer; + }, + + _positionDialog: function _positionDialog() { + var container = React.findDOMNode(this); + var dialogWindow = React.findDOMNode(this.refs.dialogWindow); + var containerHeight = container.offsetHeight; + var dialogWindowHeight = dialogWindow.offsetHeight; + + //Reset the height in case the window was resized. + dialogWindow.style.height = ''; + + var paddingTop = Math.max((containerHeight - dialogWindowHeight) / 2 - 64, 0); + + //Vertically center the dialog window, but make sure it doesn't + //transition to that position. + if (this.props.repositionOnUpdate || !container.style.paddingTop) { + container.style.paddingTop = paddingTop + 'px'; + } + }, + + _focusOnAction: function _focusOnAction() { + if (this.props.actionFocus) { + React.findDOMNode(this.refs[this.props.actionFocus]).focus(); + } + }, + + _onShow: function _onShow() { + if (this.props.onShow) this.props.onShow(); + }, + + _onDismiss: function _onDismiss() { + if (this.props.onDismiss) this.props.onDismiss(); + }, + + _handleOverlayTouchTap: function _handleOverlayTouchTap() { + if (!this.props.modal && this.closeable) { + this.dismiss(); + if (this.props.onClickAway) this.props.onClickAway(); + } + }, + + _handleWindowKeyUp: function _handleWindowKeyUp(e) { + if (!this.props.modal && e.keyCode == KeyCode.ESC) { + this.dismiss(); + } + } + +}); + +module.exports = DialogWindow; +},{"./flat-button":86,"./mixins/style-propable":103,"./mixins/window-listenable":105,"./overlay":106,"./paper":107,"./styles/transitions":124,"./utils/css-event":167,"./utils/key-code":172,"react":357}],80:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var DialogWindow = require('./dialog-window'); + +var Dialog = React.createClass({ + displayName: 'Dialog', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + title: React.PropTypes.node, + contentInnerStyle: React.PropTypes.object + }, + + getStyles: function getStyles() { + var spacing = this.context.muiTheme.spacing; + var gutter = spacing.desktopGutter + 'px '; + var styles = { + title: { + margin: 0, + padding: gutter + gutter + '0 ' + gutter, + color: this.context.muiTheme.palette.textColor, + fontSize: '24px', + lineHeight: '32px', + fontWeight: '400' + }, + content: { + padding: spacing.desktopGutter + } + }; + return styles; + }, + + render: function render() { + var _props = this.props; + var className = _props.className; + var contentInnerStyle = _props.contentInnerStyle; + + var other = _objectWithoutProperties(_props, ['className', 'contentInnerStyle']); + + var styles = this.getStyles(); + + var title; + if (this.props.title) { + // If the title is a string, wrap in an h3 tag. + // If not, just use it as a node. + title = Object.prototype.toString.call(this.props.title) === '[object String]' ? React.createElement( + 'h3', + { style: styles.title }, + this.props.title + ) : this.props.title; + } + + return React.createElement( + DialogWindow, + _extends({}, other, { + ref: 'dialogWindow', + className: className, + style: this.props.style }), + title, + React.createElement( + 'div', + { ref: 'dialogContent', style: this.mergeAndPrefix(styles.content, contentInnerStyle) }, + this.props.children + ) + ); + }, + + dismiss: function dismiss() { + this.refs.dialogWindow.dismiss(); + }, + + show: function show() { + this.refs.dialogWindow.show(); + } + +}); + +module.exports = Dialog; +},{"./dialog-window":79,"./mixins/style-propable":103,"react":357}],81:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var ClickAwayable = require('./mixins/click-awayable'); +var FontIcon = require('./font-icon'); +var Menu = require('./menu/menu'); + +var DropDownIcon = React.createClass({ + displayName: 'DropDownIcon', + + mixins: [StylePropable, ClickAwayable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + onChange: React.PropTypes.func, + menuItems: React.PropTypes.array.isRequired, + closeOnMenuItemTouchTap: React.PropTypes.bool, + iconStyle: React.PropTypes.object, + iconClassName: React.PropTypes.string, + iconLigature: React.PropTypes.string + }, + + getInitialState: function getInitialState() { + return { + open: false + }; + }, + + getDefaultProps: function getDefaultProps() { + return { + closeOnMenuItemTouchTap: true + }; + }, + + componentClickAway: function componentClickAway() { + this.setState({ open: false }); + }, + + getStyles: function getStyles() { + var spacing = this.context.muiTheme.spacing; + var iconWidth = 48; + var styles = { + root: { + display: 'inline-block', + width: iconWidth + 'px !important', + position: 'relative', + height: spacing.desktopToolbarHeight, + fontSize: spacing.desktopDropDownMenuFontSize, + cursor: 'pointer' + }, + menu: { + transition: Transitions.easeOut(), + right: '-14px !important', + top: '9px !important', + opacity: this.state.open ? 1 : 0 + }, + menuItem: { // similair to drop down menu's menu item styles + paddingRight: spacing.iconSize + spacing.desktopGutterLess * 2, + height: spacing.desktopDropDownMenuItemHeight, + lineHeight: spacing.desktopDropDownMenuItemHeight + 'px' + } + }; + return styles; + }, + + render: function render() { + var _props = this.props; + var style = _props.style; + var children = _props.children; + var menuItems = _props.menuItems; + var closeOnMenuItemTouchTap = _props.closeOnMenuItemTouchTap; + var iconStyle = _props.iconStyle; + var iconClassName = _props.iconClassName; + + var other = _objectWithoutProperties(_props, ['style', 'children', 'menuItems', 'closeOnMenuItemTouchTap', 'iconStyle', 'iconClassName']); + + var styles = this.getStyles(); + + return React.createElement( + 'div', + _extends({}, other, { style: this.mergeAndPrefix(styles.root, this.props.style) }), + React.createElement( + 'div', + { onTouchTap: this._onControlClick }, + React.createElement( + FontIcon, + { + className: iconClassName, + style: iconStyle }, + this.props.iconLigature + ), + this.props.children + ), + React.createElement(Menu, { + ref: 'menuItems', + style: this.mergeAndPrefix(styles.menu), + menuItems: menuItems, + menuItemStyle: styles.menuItem, + hideable: true, + visible: this.state.open, + onItemTap: this._onMenuItemClick }) + ); + }, + + _onControlClick: function _onControlClick() { + this.setState({ open: !this.state.open }); + }, + + _onMenuItemClick: function _onMenuItemClick(e, key, payload) { + if (this.props.onChange) this.props.onChange(e, key, payload); + + if (this.props.closeOnMenuItemTouchTap) { + this.setState({ open: false }); + } + } +}); + +module.exports = DropDownIcon; +},{"./font-icon":88,"./menu/menu":99,"./mixins/click-awayable":102,"./mixins/style-propable":103,"./styles/transitions":124,"react":357}],82:[function(require,module,exports){ +(function (process){ +'use strict'; + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var ClickAwayable = require('./mixins/click-awayable'); +var KeyCode = require('./utils/key-code'); +var DropDownArrow = require('./svg-icons/drop-down-arrow'); +var Paper = require('./paper'); +var Menu = require('./menu/menu'); +var ClearFix = require('./clearfix'); +var DropDownMenu = React.createClass({ + displayName: 'DropDownMenu', + + mixins: [StylePropable, ClickAwayable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + // The nested styles for drop-down-menu are modified by toolbar and possibly + // other user components, so it will give full access to its js styles rather + // than just the parent. + propTypes: { + className: React.PropTypes.string, + displayMember: React.PropTypes.string, + valueMember: React.PropTypes.string, + autoWidth: React.PropTypes.bool, + onChange: React.PropTypes.func, + menuItems: React.PropTypes.array.isRequired, + menuItemStyle: React.PropTypes.object, + underlineStyle: React.PropTypes.object, + iconStyle: React.PropTypes.object, + labelStyle: React.PropTypes.object, + selectedIndex: React.PropTypes.number + }, + + getDefaultProps: function getDefaultProps() { + return { + autoWidth: true, + valueMember: 'payload', + displayMember: 'text' + }; + }, + + getInitialState: function getInitialState() { + return { + open: false, + isHovered: false, + selectedIndex: this.props.hasOwnProperty('value') || this.props.hasOwnProperty('valueLink') ? null : this.props.selectedIndex || 0 + }; + }, + + componentClickAway: function componentClickAway() { + this.setState({ open: false }); + }, + + componentDidMount: function componentDidMount() { + if (this.props.autoWidth) this._setWidth(); + if (this.props.hasOwnProperty('selectedIndex')) this._setSelectedIndex(this.props); + }, + + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + if (nextProps.hasOwnProperty('value') || nextProps.hasOwnProperty('valueLink')) { + return; + } else if (nextProps.hasOwnProperty('selectedIndex')) { + this._setSelectedIndex(nextProps); + } + }, + + getSpacing: function getSpacing() { + return this.context.muiTheme.spacing; + }, + + getTextColor: function getTextColor() { + return this.context.muiTheme.palette.textColor; + }, + + getStyles: function getStyles() { + var accentColor = this.context.muiTheme.component.dropDownMenu.accentColor; + var backgroundColor = this.context.muiTheme.component.menu.backgroundColor; + var styles = { + root: { + transition: Transitions.easeOut(), + position: 'relative', + display: 'inline-block', + height: this.getSpacing().desktopToolbarHeight, + fontSize: this.getSpacing().desktopDropDownMenuFontSize, + outline: 'none' + }, + control: { + cursor: 'pointer', + position: 'static', + height: '100%' + }, + controlBg: { + transition: Transitions.easeOut(), + backgroundColor: backgroundColor, + height: '100%', + width: '100%', + opacity: 0 + }, + icon: { + position: 'absolute', + top: (this.getSpacing().desktopToolbarHeight - 24) / 2, + right: this.getSpacing().desktopGutterLess, + fill: this.context.muiTheme.component.dropDownMenu.accentColor + }, + label: { + transition: Transitions.easeOut(), + lineHeight: this.getSpacing().desktopToolbarHeight + 'px', + position: 'absolute', + paddingLeft: this.getSpacing().desktopGutter, + top: 0, + opacity: 1, + color: this.getTextColor() + }, + underline: { + borderTop: 'solid 1px ' + accentColor, + margin: '-1px ' + this.getSpacing().desktopGutter + 'px' + }, + menuItem: { + paddingRight: this.getSpacing().iconSize + this.getSpacing().desktopGutterLess + this.getSpacing().desktopGutterMini, + height: this.getSpacing().desktopDropDownMenuItemHeight, + lineHeight: this.getSpacing().desktopDropDownMenuItemHeight + 'px', + whiteSpace: 'nowrap' + }, + rootWhenOpen: { + opacity: 1 + }, + labelWhenOpen: { + opacity: 0, + top: this.getSpacing().desktopToolbarHeight / 2 + } + }; + return styles; + }, + + getInputNode: function getInputNode() { + var root = this.refs.root; + var item = this.props.menuItems[this.state.selectedIndex]; + if (item) root.value = item[this.props.displayMember]; + return root; + }, + + render: function render() { + var _this = this; + var styles = this.getStyles(); + var selectedIndex = this.state.selectedIndex; + var displayValue = ''; + if (selectedIndex) { + if (process.env.NODE_ENV !== 'production') { + console.assert(!!this.props.menuItems[selectedIndex], 'SelectedIndex of ' + selectedIndex + ' does not exist in menuItems.'); + } + } else { + if (this.props.valueMember && (this.props.valueLink || this.props.value)) { + var value = this.props.value || this.props.valueLink.value; + for (var i in this.props.menuItems) if (this.props.menuItems[i][this.props.valueMember] === value) selectedIndex = i; + } + } + + var selectedItem = this.props.menuItems[selectedIndex]; + if (selectedItem) displayValue = selectedItem[this.props.displayMember]; + + var menuItems = this.props.menuItems.map(function (item) { + item.text = item[_this.props.displayMember]; + item.payload = item[_this.props.valueMember]; + return item; + }); + + return React.createElement( + 'div', + { + ref: 'root', + onMouseOut: this._handleMouseOut, + onMouseOver: this._handleMouseOver, + onKeyDown: this._onKeyDown, + onFocus: this.props.onFocus, + onBlur: this.props.onBlur, + className: this.props.className, + style: this.mergeAndPrefix(styles.root, this.state.open && styles.rootWhenOpen, this.props.style) }, + React.createElement( + ClearFix, + { style: this.mergeAndPrefix(styles.control), onTouchTap: this._onControlClick }, + React.createElement(Paper, { style: this.mergeAndPrefix(styles.controlBg), zDepth: 0 }), + React.createElement( + 'div', + { style: this.mergeAndPrefix(styles.label, this.state.open && styles.labelWhenOpen, this.props.labelStyle) }, + displayValue + ), + React.createElement(DropDownArrow, { style: this.mergeAndPrefix(styles.icon, this.props.iconStyle) }), + React.createElement('div', { style: this.mergeAndPrefix(styles.underline, this.props.underlineStyle) }) + ), + React.createElement(Menu, { + ref: 'menuItems', + autoWidth: this.props.autoWidth, + selectedIndex: selectedIndex, + menuItems: menuItems, + menuItemStyle: this.mergeAndPrefix(styles.menuItem, this.props.menuItemStyle), + hideable: true, + visible: this.state.open, + onRequestClose: this._onMenuRequestClose, + onItemTap: this._onMenuItemClick }) + ); + }, + + _setWidth: function _setWidth() { + var el = React.findDOMNode(this); + var menuItemsDom = React.findDOMNode(this.refs.menuItems); + if (!this.props.style || !this.props.style.hasOwnProperty('width')) { + el.style.width = menuItemsDom.offsetWidth + 'px'; + } + }, + + _setSelectedIndex: function _setSelectedIndex(props) { + var selectedIndex = props.selectedIndex; + + if (process.env.NODE_ENV !== 'production' && selectedIndex < 0) { + console.warn('Cannot set selectedIndex to a negative index.', selectedIndex); + } + + this.setState({ selectedIndex: selectedIndex > -1 ? selectedIndex : 0 }); + }, + + _onControlClick: function _onControlClick() { + this.setState({ open: !this.state.open }); + }, + + _onKeyDown: function _onKeyDown(e) { + switch (e.which) { + case KeyCode.UP: + if (!this.state.open) this._selectPreviousItem();else if (e.altKey) this.setState({ open: false }); + break; + case KeyCode.DOWN: + if (!this.state.open) if (e.altKey) this.setState({ open: true });else this._selectNextItem(); + break; + case KeyCode.ENTER: + case KeyCode.SPACE: + this.setState({ open: true }); + break; + default: + return; //important + } + e.preventDefault(); + }, + + _onMenuItemClick: function _onMenuItemClick(e, key, payload) { + if (this.props.onChange && this.state.selectedIndex !== key) { + var selectedItem = this.props.menuItems[key]; + if (selectedItem) e.target.value = selectedItem[this.props.valueMember]; + + if (this.props.valueLink) this.props.valueLink.requestChange(e.target.value);else this.props.onChange(e, key, payload); + } + + this.setState({ + selectedIndex: key, + value: e.target.value, + open: false, + isHovered: false + }); + }, + + _onMenuRequestClose: function _onMenuRequestClose() { + this.setState({ open: false }); + }, + + _handleMouseOver: function _handleMouseOver() { + this.setState({ isHovered: true }); + }, + + _handleMouseOut: function _handleMouseOut() { + this.setState({ isHovered: false }); + }, + + _selectPreviousItem: function _selectPreviousItem() { + this.setState({ selectedIndex: Math.max(this.state.selectedIndex - 1, 0) }); + }, + + _selectNextItem: function _selectNextItem() { + this.setState({ selectedIndex: Math.min(this.state.selectedIndex + 1, this.props.menuItems.length - 1) }); + } + +}); + +module.exports = DropDownMenu; +}).call(this,require('_process')) + +},{"./clearfix":69,"./menu/menu":99,"./mixins/click-awayable":102,"./mixins/style-propable":103,"./paper":107,"./styles/transitions":124,"./svg-icons/drop-down-arrow":127,"./utils/key-code":172,"_process":7,"react":357}],83:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var KeyCode = require('./utils/key-code'); +var StylePropable = require('./mixins/style-propable'); +var WindowListenable = require('./mixins/window-listenable'); +var FocusRipple = require('./ripples/focus-ripple'); +var TouchRipple = require('./ripples/touch-ripple'); + +var EnhancedButton = React.createClass({ + displayName: 'EnhancedButton', + + mixins: [StylePropable, WindowListenable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + centerRipple: React.PropTypes.bool, + containerElement: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]), + disabled: React.PropTypes.bool, + disableFocusRipple: React.PropTypes.bool, + disableTouchRipple: React.PropTypes.bool, + keyboardFocused: React.PropTypes.bool, + linkButton: React.PropTypes.bool, + focusRippleColor: React.PropTypes.string, + touchRippleColor: React.PropTypes.string, + focusRippleOpacity: React.PropTypes.number, + touchRippleOpacity: React.PropTypes.number, + onBlur: React.PropTypes.func, + onFocus: React.PropTypes.func, + onMouseOut: React.PropTypes.func, + onMouseOver: React.PropTypes.func, + onTouchTap: React.PropTypes.func, + onKeyboardFocus: React.PropTypes.func + }, + + getDefaultProps: function getDefaultProps() { + return { + containerElement: 'button' + }; + }, + + windowListeners: { + 'keydown': '_handleWindowKeydown', + 'keyup': '_handleWindowKeyup' + }, + + getInitialState: function getInitialState() { + return { + isKeyboardFocused: !this.props.disabled && this.props.keyboardFocused + }; + }, + + // Remove inner padding and border in Firefox 4+. + componentDidMount: function componentDidMount() { + if (!EnhancedButton.hasStyleBeenInjected) { + var style = document.createElement('style'); + style.innerHTML = 'button::-moz-focus-inner,' + 'input::-moz-focus-inner {' + ' border: 0;' + ' padding: 0;' + ' }'; + document.body.appendChild(style); + EnhancedButton.hasStyleBeenInjected = true; + } + }, + + getStyles: function getStyles() { + var styles = { + root: { + border: 10, + background: 'none', + boxSizing: 'border-box', + font: 'inherit', + fontFamily: this.context.muiTheme.contentFontFamily, + WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)', + WebkitAppearance: !this.props.linkButton && 'button', + cursor: 'pointer' + }, + rootWhenLinkButton: { + display: 'inline-block', + cursor: this.props.disabled ? 'default' : 'pointer', + textDecoration: 'none' + }, + rootWhenDisabled: { + cursor: 'default' + } + }; + return styles; + }, + + render: function render() { + var _props = this.props; + var centerRipple = _props.centerRipple; + var containerElement = _props.containerElement; + var disabled = _props.disabled; + var disableFocusRipple = _props.disableFocusRipple; + var disableTouchRipple = _props.disableTouchRipple; + var focusRippleColor = _props.focusRippleColor; + var focusRippleOpacity = _props.focusRippleOpacity; + var linkButton = _props.linkButton; + var touchRippleColor = _props.touchRippleColor; + var touchRippleOpacity = _props.touchRippleOpacity; + var onBlur = _props.onBlur; + var onFocus = _props.onFocus; + var onMouseOver = _props.onMouseOver; + var onMouseOut = _props.onMouseOut; + var onTouchTap = _props.onTouchTap; + var style = _props.style; + + var other = _objectWithoutProperties(_props, ['centerRipple', 'containerElement', 'disabled', 'disableFocusRipple', 'disableTouchRipple', 'focusRippleColor', 'focusRippleOpacity', 'linkButton', 'touchRippleColor', 'touchRippleOpacity', 'onBlur', 'onFocus', 'onMouseOver', 'onMouseOut', 'onTouchTap', 'style']); + + var styles = this.getStyles(); + + var mergedStyles = this.mergeAndPrefix(styles.root, linkButton && styles.rootWhenLinkButton, disabled && styles.rootWhenDisabled, style); + + var buttonProps = _extends({}, other, { + style: mergedStyles, + disabled: disabled, + onBlur: this._handleBlur, + onFocus: this._handleFocus, + onMouseOver: this._handleMouseOver, + onMouseOut: this._handleMouseOut, + onTouchTap: this._handleTouchTap + }); + + var buttonChildren = []; + + // Create ripples if we need to + buttonChildren.push(disabled || disableTouchRipple ? this.props.children : React.createElement( + TouchRipple, + { + ref: 'touchRipple', + key: 'touchRipple', + centerRipple: centerRipple, + color: touchRippleColor, + opacity: touchRippleOpacity }, + this.props.children + )); + buttonChildren.push(disabled || disableFocusRipple ? null : React.createElement(FocusRipple, { + key: 'focusRipple', + color: focusRippleColor, + opacity: focusRippleOpacity, + show: this.state.isKeyboardFocused })); + + if (disabled && linkButton) { + return React.createElement( + 'span', + _extends({}, other, { + style: mergedStyles }), + this.props.children + ); + } + + return React.isValidElement(containerElement) ? React.cloneElement(containerElement, buttonProps, buttonChildren) : React.createElement(linkButton ? 'a' : containerElement, buttonProps, buttonChildren); + }, + + isKeyboardFocused: function isKeyboardFocused() { + return this.state.isKeyboardFocused; + }, + + _handleWindowKeydown: function _handleWindowKeydown(e) { + if (!this.props.disabled) { + if (e.keyCode == KeyCode.TAB) this._tabPressed = true; + if (e.keyCode == KeyCode.ENTER && this.state.isKeyboardFocused) { + this._handleTouchTap(e); + } + } + }, + + _handleWindowKeyup: function _handleWindowKeyup(e) { + if (!this.props.disabled && e.keyCode == KeyCode.SPACE && this.state.isKeyboardFocused) { + this._handleTouchTap(e); + } + }, + + _handleBlur: function _handleBlur(e) { + this._cancelFocusTimeout(); + if (!this.props.disabled) { + this.setState({ + isKeyboardFocused: false + }); + if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, false); + if (this.props.onBlur) this.props.onBlur(e); + } + }, + + _handleFocus: function _handleFocus(e) { + React.findDOMNode(this).style.outline = 'none'; + if (!this.props.disabled) { + //setTimeout is needed because the focus event fires first + //Wait so that we can capture if this was a keyboard focus + //or touch focus + this._focusTimeout = setTimeout((function () { + if (this._tabPressed) { + this.setState({ + isKeyboardFocused: true + }); + if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, true); + } + }).bind(this), 150); + + if (this.props.onFocus) this.props.onFocus(e); + } + }, + + _handleMouseOver: function _handleMouseOver(e) { + React.findDOMNode(this).style.textDecoration = 'none'; + if (this.props.onMouseOver) this.props.onMouseOver(e); + }, + + _handleMouseOut: function _handleMouseOut(e) { + if (this.props.onMouseOut) this.props.onMouseOut(e); + }, + + _handleTouchTap: function _handleTouchTap(e) { + this._cancelFocusTimeout(); + if (!this.props.disabled) { + this._tabPressed = false; + this.setState({ + isKeyboardFocused: false + }); + if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, false); + if (this.props.onTouchTap) this.props.onTouchTap(e); + } + }, + + _cancelFocusTimeout: function _cancelFocusTimeout() { + if (this._focusTimeout) { + clearTimeout(this._focusTimeout); + this._focusTimeout = null; + } + } + +}); + +EnhancedButton.hasStyleBeenInjected = false; + +module.exports = EnhancedButton; +},{"./mixins/style-propable":103,"./mixins/window-listenable":105,"./ripples/focus-ripple":112,"./ripples/touch-ripple":113,"./utils/key-code":172,"react":357}],84:[function(require,module,exports){ +(function (process){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var KeyCode = require('./utils/key-code'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var UniqueId = require('./utils/unique-id'); +var WindowListenable = require('./mixins/window-listenable'); +var ClearFix = require('./clearfix'); +var FocusRipple = require('./ripples/focus-ripple'); +var TouchRipple = require('./ripples/touch-ripple'); +var Paper = require('./paper'); + +var EnhancedSwitch = React.createClass({ + displayName: 'EnhancedSwitch', + + mixins: [WindowListenable, StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + id: React.PropTypes.string, + inputType: React.PropTypes.string.isRequired, + switchElement: React.PropTypes.element.isRequired, + onParentShouldUpdate: React.PropTypes.func.isRequired, + switched: React.PropTypes.bool.isRequired, + rippleStyle: React.PropTypes.object, + rippleColor: React.PropTypes.string, + iconStyle: React.PropTypes.object, + thumbStyle: React.PropTypes.object, + trackStyle: React.PropTypes.object, + labelStyle: React.PropTypes.object, + name: React.PropTypes.string, + value: React.PropTypes.string, + label: React.PropTypes.string, + onSwitch: React.PropTypes.func, + required: React.PropTypes.bool, + disabled: React.PropTypes.bool, + defaultSwitched: React.PropTypes.bool, + labelPosition: React.PropTypes.oneOf(['left', 'right']), + disableFocusRipple: React.PropTypes.bool, + disableTouchRipple: React.PropTypes.bool + }, + + windowListeners: { + 'keydown': '_handleWindowKeydown', + 'keyup': '_handleWindowKeyup' + }, + + getInitialState: function getInitialState() { + return { + isKeyboardFocused: false, + parentWidth: 100 + }; + }, + + getEvenWidth: function getEvenWidth() { + return parseInt(window.getComputedStyle(React.findDOMNode(this.refs.root)).getPropertyValue('width'), 10); + }, + + componentDidMount: function componentDidMount() { + var inputNode = React.findDOMNode(this.refs.checkbox); + if (!this.props.switched || inputNode.checked != this.props.switched) this.props.onParentShouldUpdate(inputNode.checked); + + window.addEventListener('resize', this._handleResize); + + this._handleResize(); + }, + + componentWillUnmount: function componentWillUnmount() { + window.removeEventListener('resize', this._handleResize); + }, + + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + var hasCheckedLinkProp = nextProps.hasOwnProperty('checkedLink'); + var hasCheckedProp = nextProps.hasOwnProperty('checked'); + var hasToggledProp = nextProps.hasOwnProperty('toggled'); + var hasNewDefaultProp = nextProps.hasOwnProperty('defaultSwitched') && nextProps.defaultSwitched != this.props.defaultSwitched; + var newState = {}; + + if (hasCheckedProp) { + newState.switched = nextProps.checked; + } else if (hasToggledProp) { + newState.switched = nextProps.toggled; + } else if (hasCheckedLinkProp) { + newState.switched = nextProps.checkedLink.value; + } else if (hasNewDefaultProp) { + newState.switched = nextProps.defaultSwitched; + } + + if (newState.switched !== undefined && newState.switched != this.props.switched) this.props.onParentShouldUpdate(newState.switched); + }, + + getTheme: function getTheme() { + return this.context.muiTheme.palette; + }, + + getStyles: function getStyles() { + var spacing = this.context.muiTheme.spacing; + var switchWidth = 60 - spacing.desktopGutterLess; + var labelWidth = 'calc(100% - 60px)'; + + var styles = { + root: { + position: 'relative', + cursor: this.props.disabled ? 'default' : 'pointer', + overflow: 'visible', + display: 'table', + height: 'auto', + width: '100%' + }, + input: { + position: 'absolute', + cursor: this.props.disabled ? 'default' : 'pointer', + pointerEvents: 'all', + opacity: 0, + width: '100%', + height: '100%', + zIndex: 2, + left: 0, + boxSizing: 'border-box', + padding: 0, + margin: 0 + }, + controls: { + width: '100%', + height: '100%' + }, + label: { + float: 'left', + position: 'relative', + display: 'block', + width: labelWidth, + lineHeight: '24px', + color: this.getTheme().textColor + }, + wrap: { + transition: Transitions.easeOut(), + float: 'left', + position: 'relative', + display: 'block', + width: switchWidth, + marginRight: this.props.labelPosition == 'right' ? spacing.desktopGutterLess : 0, + marginLeft: this.props.labelPosition == 'left' ? spacing.desktopGutterLess : 0 + }, + ripple: { + height: '200%', + width: '200%', + top: '-12', + left: '-12' + } + }; + return styles; + }, + + render: function render() { + var _props = this.props; + var type = _props.type; + var name = _props.name; + var value = _props.value; + var label = _props.label; + var onSwitch = _props.onSwitch; + var defaultSwitched = _props.defaultSwitched; + var onBlur = _props.onBlur; + var onFocus = _props.onFocus; + var onMouseUp = _props.onMouseUp; + var onMouseDown = _props.onMouseDown; + var onMouseOut = _props.onMouseOut; + var onTouchStart = _props.onTouchStart; + var onTouchEnd = _props.onTouchEnd; + var disableTouchRipple = _props.disableTouchRipple; + var disableFocusRipple = _props.disableFocusRipple; + var className = _props.className; + + var other = _objectWithoutProperties(_props, ['type', 'name', 'value', 'label', 'onSwitch', 'defaultSwitched', 'onBlur', 'onFocus', 'onMouseUp', 'onMouseDown', 'onMouseOut', 'onTouchStart', 'onTouchEnd', 'disableTouchRipple', 'disableFocusRipple', 'className']); + + var styles = this.getStyles(); + + var wrapStyles = this.mergeAndPrefix(styles.wrap, this.props.iconStyle); + var rippleStyle = this.mergeAndPrefix(styles.ripple, this.props.rippleStyle); + var rippleColor = this.props.hasOwnProperty('rippleColor') ? this.props.rippleColor : this.getTheme().primary1Color; + + if (this.props.thumbStyle) { + wrapStyles.marginLeft /= 2; + wrapStyles.marginRight /= 2; + } + + var inputId = this.props.id || UniqueId.generate(); + + var labelStyle = this.mergeAndPrefix(styles.label, this.props.labelStyle); + + var labelElement = this.props.label ? React.createElement( + 'label', + { style: labelStyle, htmlFor: inputId }, + this.props.label + ) : null; + + var inputProps = { + ref: 'checkbox', + type: this.props.inputType, + style: this.mergeAndPrefix(styles.input), + name: this.props.name, + value: this.props.value, + defaultChecked: this.props.defaultSwitched, + onBlur: this._handleBlur, + onFocus: this._handleFocus + }; + + var hideTouchRipple = this.props.disabled || disableTouchRipple; + + if (!hideTouchRipple) { + inputProps.onMouseUp = this._handleMouseUp; + inputProps.onMouseDown = this._handleMouseDown; + inputProps.onMouseOut = this._handleMouseOut; + inputProps.onTouchStart = this._handleTouchStart; + inputProps.onTouchEnd = this._handleTouchEnd; + } + + if (!this.props.hasOwnProperty('checkedLink')) { + inputProps.onChange = this._handleChange; + } + + var inputElement = React.createElement('input', _extends({}, other, inputProps)); + + var touchRipple = React.createElement(TouchRipple, { + ref: 'touchRipple', + key: 'touchRipple', + style: rippleStyle, + color: rippleColor, + centerRipple: true }); + + var focusRipple = React.createElement(FocusRipple, { + key: 'focusRipple', + innerStyle: rippleStyle, + color: rippleColor, + show: this.state.isKeyboardFocused }); + + var ripples = [hideTouchRipple ? null : touchRipple, this.props.disabled || disableFocusRipple ? null : focusRipple]; + + // If toggle component (indicated by whether the style includes thumb) manually lay out + // elements in order to nest ripple elements + var switchElement = !this.props.thumbStyle ? React.createElement( + 'div', + { style: wrapStyles }, + this.props.switchElement, + ripples + ) : React.createElement( + 'div', + { style: wrapStyles }, + React.createElement('div', { style: this.props.trackStyle }), + React.createElement( + Paper, + { style: this.props.thumbStyle, zDepth: 1, circle: true }, + ' ', + ripples, + ' ' + ) + ); + + var labelPositionExist = this.props.labelPosition; + + // Position is left if not defined or invalid. + var elementsInOrder = labelPositionExist && this.props.labelPosition.toUpperCase() === 'RIGHT' ? React.createElement( + ClearFix, + { style: this.mergeAndPrefix(styles.controls) }, + switchElement, + labelElement + ) : React.createElement( + ClearFix, + { style: this.mergeAndPrefix(styles.controls) }, + labelElement, + switchElement + ); + + return React.createElement( + 'div', + { ref: 'root', className: className, style: this.mergeAndPrefix(styles.root, this.props.style) }, + inputElement, + elementsInOrder + ); + }, + + isSwitched: function isSwitched() { + return React.findDOMNode(this.refs.checkbox).checked; + }, + + // no callback here because there is no event + setSwitched: function setSwitched(newSwitchedValue) { + if (!this.props.hasOwnProperty('checked') || this.props.checked === false) { + this.props.onParentShouldUpdate(newSwitchedValue); + React.findDOMNode(this.refs.checkbox).checked = newSwitchedValue; + } else if (process.env.NODE_ENV !== 'production') { + var message = 'Cannot call set method while checked is defined as a property.'; + console.error(message); + } + }, + + getValue: function getValue() { + return React.findDOMNode(this.refs.checkbox).value; + }, + + isKeyboardFocused: function isKeyboardFocused() { + return this.state.isKeyboardFocused; + }, + + _handleChange: function _handleChange(e) { + this._tabPressed = false; + this.setState({ + isKeyboardFocused: false + }); + + var isInputChecked = React.findDOMNode(this.refs.checkbox).checked; + + if (!this.props.hasOwnProperty('checked')) this.props.onParentShouldUpdate(isInputChecked); + if (this.props.onSwitch) this.props.onSwitch(e, isInputChecked); + }, + + /** + * Because both the ripples and the checkbox input cannot share pointer + * events, the checkbox input takes control of pointer events and calls + * ripple animations manually. + */ + + // Checkbox inputs only use SPACE to change their state. Using ENTER will + // update the ui but not the input. + _handleWindowKeydown: function _handleWindowKeydown(e) { + if (e.keyCode == KeyCode.TAB) this._tabPressed = true; + if (e.keyCode == KeyCode.SPACE && this.state.isKeyboardFocused) { + this._handleChange(e); + } + }, + + _handleWindowKeyup: function _handleWindowKeyup(e) { + if (e.keyCode == KeyCode.SPACE && this.state.isKeyboardFocused) { + this._handleChange(e); + } + }, + + _handleMouseDown: function _handleMouseDown(e) { + //only listen to left clicks + if (e.button === 0) this.refs.touchRipple.start(e); + }, + + _handleMouseUp: function _handleMouseUp() { + this.refs.touchRipple.end(); + }, + + _handleMouseOut: function _handleMouseOut() { + this.refs.touchRipple.end(); + }, + + _handleTouchStart: function _handleTouchStart(e) { + this.refs.touchRipple.start(e); + }, + + _handleTouchEnd: function _handleTouchEnd() { + this.refs.touchRipple.end(); + }, + + _handleBlur: function _handleBlur(e) { + this.setState({ + isKeyboardFocused: false + }); + + if (this.props.onBlur) this.props.onBlur(e); + }, + + _handleFocus: function _handleFocus(e) { + //setTimeout is needed becuase the focus event fires first + //Wait so that we can capture if this was a keyboard focus + //or touch focus + setTimeout((function () { + if (this._tabPressed) { + this.setState({ + isKeyboardFocused: true + }); + } + }).bind(this), 150); + + if (this.props.onFocus) this.props.onFocus(e); + }, + + _handleResize: function _handleResize() { + this.setState({ parentWidth: this.getEvenWidth() }); + } + +}); + +module.exports = EnhancedSwitch; +}).call(this,require('_process')) + +},{"./clearfix":69,"./mixins/style-propable":103,"./mixins/window-listenable":105,"./paper":107,"./ripples/focus-ripple":112,"./ripples/touch-ripple":113,"./styles/transitions":124,"./utils/key-code":172,"./utils/unique-id":175,"_process":7,"react":357}],85:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var AutoPrefix = require('./styles/auto-prefix'); + +var EnhancedTextarea = React.createClass({ + displayName: 'EnhancedTextarea', + + mixins: [StylePropable], + + propTypes: { + onChange: React.PropTypes.func, + onHeightChange: React.PropTypes.func, + textareaStyle: React.PropTypes.object, + rows: React.PropTypes.number + }, + + getDefaultProps: function getDefaultProps() { + return { + rows: 1 + }; + }, + + getInitialState: function getInitialState() { + return { + height: this.props.rows * 24 + }; + }, + + componentDidMount: function componentDidMount() { + this._syncHeightWithShadow(); + }, + + getStyles: function getStyles() { + var styles = { + root: { + width: '100%', + resize: 'none', + overflow: 'hidden', + font: 'inherit', + padding: 0 + } + }; + return styles; + }, + + render: function render() { + var _props = this.props; + var onChange = _props.onChange; + var onHeightChange = _props.onHeightChange; + var rows = _props.rows; + var style = _props.style; + var textareaStyle = _props.textareaStyle; + var valueLink = _props.valueLink; + + var other = _objectWithoutProperties(_props, ['onChange', 'onHeightChange', 'rows', 'style', 'textareaStyle', 'valueLink']); + + var styles = this.getStyles().root; + + var textAreaStyles = { + width: '100%', + resize: 'none', + overflow: 'hidden', + font: 'inherit', + padding: 0 + }; + + var inputStyles = this.mergeAndPrefix(styles, { + height: this.state.height + 'px' + }); + + inputStyles = this.mergeAndPrefix(inputStyles, textareaStyle); + + // Overflow also needed to here to remove the extra row + // added to textareas in Firefox. + var shadowStyles = this.mergeAndPrefix(textAreaStyles, { + position: 'absolute', + opacity: 0 + }); + + if (this.props.hasOwnProperty('valueLink')) other.value = this.props.valueLink.value; + if (this.props.disabled) style.cursor = 'default'; + + return React.createElement( + 'div', + { style: this.props.style }, + React.createElement('textarea', { + ref: 'shadow', + style: AutoPrefix.all(shadowStyles), + tabIndex: '-1', + rows: this.props.rows, + defaultValue: this.props.defaultValue, + readOnly: true, + value: this.props.value, + valueLink: this.props.valueLink }), + React.createElement('textarea', _extends({}, other, { + ref: 'input', + rows: this.props.rows, + style: AutoPrefix.all(inputStyles), + onChange: this._handleChange })) + ); + }, + + getInputNode: function getInputNode() { + return React.findDOMNode(this.refs.input); + }, + + setValue: function setValue(value) { + this.refs.input.value = value; + this._syncHeightWithShadow(value); + }, + + _syncHeightWithShadow: function _syncHeightWithShadow(newValue, e) { + var shadow = React.findDOMNode(this.refs.shadow); + var currentHeight = this.state.height; + var newHeight; + + if (newValue !== undefined) shadow.value = newValue; + newHeight = shadow.scrollHeight; + + if (currentHeight !== newHeight) { + this.setState({ height: newHeight }); + if (this.props.onHeightChange) this.props.onHeightChange(e, newHeight); + } + }, + + _handleChange: function _handleChange(e) { + this._syncHeightWithShadow(e.target.value); + + if (this.props.hasOwnProperty('valueLink')) { + this.props.valueLink.requestChange(e.target.value); + } + + if (this.props.onChange) this.props.onChange(e); + }, + + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + if (nextProps.value != this.props.value) { + this._syncHeightWithShadow(nextProps.value); + } + } +}); + +module.exports = EnhancedTextarea; +},{"./mixins/style-propable":103,"./styles/auto-prefix":117,"react":357}],86:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var ColorManipulator = require('./utils/color-manipulator'); +var Typography = require('./styles/typography'); +var EnhancedButton = require('./enhanced-button'); + +var FlatButton = React.createClass({ + displayName: 'FlatButton', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + className: React.PropTypes.string, + disabled: React.PropTypes.bool, + hoverColor: React.PropTypes.string, + label: function label(props, propName, componentName) { + if (!props.children && !props.label) { + return new Error('Warning: Required prop `label` or `children` was not specified in `' + componentName + '`.'); + } + }, + labelStyle: React.PropTypes.object, + primary: React.PropTypes.bool, + rippleColor: React.PropTypes.string, + secondary: React.PropTypes.bool + }, + + getDefaultProps: function getDefaultProps() { + return { + labelStyle: {} + }; + }, + + getInitialState: function getInitialState() { + return { + hovered: false, + isKeyboardFocused: false + }; + }, + + getThemeButton: function getThemeButton() { + return this.context.muiTheme.component.button; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.flatButton; + }, + + _getColor: function _getColor() { + var theme = this.getTheme(); + var color = this.props.disabled ? theme.disabledTextColor : this.props.primary ? theme.primaryTextColor : this.props.secondary ? theme.secondaryTextColor : theme.textColor; + + return { + 'default': color, + hover: this.props.hoverColor || ColorManipulator.fade(ColorManipulator.lighten(color, 0.4), 0.15), + ripple: this.props.rippleColor || ColorManipulator.fade(color, 0.8) + }; + }, + + getStyles: function getStyles() { + var color = this._getColor(); + var styles = { + root: { + color: color['default'], + transition: Transitions.easeOut(), + fontSize: Typography.fontStyleButtonFontSize, + letterSpacing: 0, + textTransform: 'uppercase', + fontWeight: Typography.fontWeightMedium, + borderRadius: 2, + userSelect: 'none', + position: 'relative', + overflow: 'hidden', + backgroundColor: this.getTheme().color, + lineHeight: this.getThemeButton().height + 'px', + minWidth: this.getThemeButton().minWidth, + padding: 0, + margin: 0, + //This is need so that ripples do not bleed past border radius. + //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil + transform: 'translate3d(0, 0, 0)' + }, + label: { + position: 'relative', + padding: '0px ' + this.context.muiTheme.spacing.desktopGutterLess + 'px' + }, + rootWhenHovered: { + backgroundColor: color.hover + }, + rippleColor: color.ripple + }; + + return styles; + }, + + render: function render() { + var _props = this.props; + var children = _props.children; + var hoverColor = _props.hoverColor; + var label = _props.label; + var labelStyle = _props.labelStyle; + var onBlur = _props.onBlur; + var onMouseOut = _props.onMouseOut; + var onMouseOver = _props.onMouseOver; + var primary = _props.primary; + var rippleColor = _props.rippleColor; + var secondary = _props.secondary; + var style = _props.style; + + var other = _objectWithoutProperties(_props, ['children', 'hoverColor', 'label', 'labelStyle', 'onBlur', 'onMouseOut', 'onMouseOver', 'primary', 'rippleColor', 'secondary', 'style']); + + var styles = this.getStyles(); + + var labelElement; + if (label) { + labelElement = React.createElement( + 'span', + { style: this.mergeAndPrefix(styles.label, this.props.labelStyle) }, + label + ); + } + + return React.createElement( + EnhancedButton, + _extends({}, other, { + ref: 'enhancedButton', + style: this.mergeStyles(styles.root, (this.state.hovered || this.state.isKeyboardFocused) && !this.props.disabled && styles.rootWhenHovered, this.props.style), + onMouseOver: this._handleMouseOver, + onMouseOut: this._handleMouseOut, + focusRippleColor: styles.rippleColor, + touchRippleColor: styles.rippleColor, + onKeyboardFocus: this._handleKeyboardFocus }), + labelElement, + this.props.children + ); + }, + + _handleMouseOver: function _handleMouseOver(e) { + this.setState({ hovered: true }); + if (this.props.onMouseOver) { + this.props.onMouseOver(e); + } + }, + + _handleMouseOut: function _handleMouseOut(e) { + this.setState({ hovered: false }); + if (this.props.onMouseOut) { + this.props.onMouseOut(e); + } + }, + + _handleKeyboardFocus: function _handleKeyboardFocus(e, isKeyboardFocused) { + this.setState({ isKeyboardFocused: isKeyboardFocused }); + }, + + _handleOnBlur: function _handleOnBlur(e) { + this.setState({ hovered: false }); + if (this.props.onBlur) { + this.props.onBlur(e); + } + } +}); + +module.exports = FlatButton; +},{"./enhanced-button":83,"./mixins/style-propable":103,"./styles/transitions":124,"./styles/typography":125,"./utils/color-manipulator":166,"react":357}],87:[function(require,module,exports){ +(function (process){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var ColorManipulator = require('./utils/color-manipulator'); +var EnhancedButton = require('./enhanced-button'); +var FontIcon = require('./font-icon'); +var Paper = require('./paper'); + +var getZDepth = function getZDepth(disabled) { + var zDepth = disabled ? 0 : 2; + return { + zDepth: zDepth, + initialZDepth: zDepth + }; +}; + +var RaisedButton = React.createClass({ + displayName: 'RaisedButton', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + disabled: React.PropTypes.bool, + iconClassName: React.PropTypes.string, + iconStyle: React.PropTypes.object, + mini: React.PropTypes.bool, + onMouseDown: React.PropTypes.func, + onMouseUp: React.PropTypes.func, + onMouseOut: React.PropTypes.func, + onTouchEnd: React.PropTypes.func, + onTouchStart: React.PropTypes.func, + secondary: React.PropTypes.bool + }, + + getInitialState: function getInitialState() { + var zDepth = this.props.disabled ? 0 : 2; + return { + zDepth: zDepth, + initialZDepth: zDepth, + hovered: false + }; + }, + + componentWillMount: function componentWillMount() { + this.setState(getZDepth(this.props.disabled)); + }, + + componentWillReceiveProps: function componentWillReceiveProps(newProps) { + if (newProps.disabled !== this.props.disabled) { + this.setState(getZDepth(newProps.disabled)); + } + }, + + componentDidMount: function componentDidMount() { + if (process.env.NODE_ENV !== 'production') { + if (this.props.iconClassName && this.props.children) { + var warning = 'You have set both an iconClassName and a child icon. ' + 'It is recommended you use only one method when adding ' + 'icons to FloatingActionButtons.'; + console.warn(warning); + } + } + }, + + _getBackgroundColor: function _getBackgroundColor() { + return this.props.disabled ? this.getTheme().disabledColor : this.props.secondary ? this.getTheme().secondaryColor : this.getTheme().color; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.floatingActionButton; + }, + + _getIconColor: function _getIconColor() { + return this.props.disabled ? this.getTheme().disabledTextColor : this.props.secondary ? this.getTheme().secondaryIconColor : this.getTheme().iconColor; + }, + + getStyles: function getStyles() { + var styles = { + root: { + transition: Transitions.easeOut(), + display: 'inline-block' + }, + container: { + transition: Transitions.easeOut(), + position: 'relative', + height: this.getTheme().buttonSize, + width: this.getTheme().buttonSize, + padding: 0, + overflow: 'hidden', + backgroundColor: this._getBackgroundColor(), + borderRadius: '50%', + textAlign: 'center', + verticalAlign: 'bottom', + //This is need so that ripples do not bleed + //past border radius. + //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil + transform: 'translate3d(0, 0, 0)' + }, + icon: { + lineHeight: this.getTheme().buttonSize + 'px', + fill: this.getTheme().iconColor, + color: this._getIconColor() + }, + overlay: { + transition: Transitions.easeOut(), + top: 0 + }, + containerWhenMini: { + height: this.getTheme().miniSize, + width: this.getTheme().miniSize + }, + iconWhenMini: { + lineHeight: this.getTheme().miniSize + 'px' + }, + overlayWhenHovered: { + backgroundColor: ColorManipulator.fade(this._getIconColor(), 0.4) + } + }; + return styles; + }, + + render: function render() { + var _props = this.props; + var disabled = _props.disabled; + var icon = _props.icon; + var mini = _props.mini; + var secondary = _props.secondary; + + var other = _objectWithoutProperties(_props, ['disabled', 'icon', 'mini', 'secondary']); + + var styles = this.getStyles(); + + var iconElement; + if (this.props.iconClassName) { + iconElement = React.createElement(FontIcon, { + className: this.props.iconClassName, + style: this.mergeAndPrefix(styles.icon, mini && styles.iconWhenMini, this.props.iconStyle) }); + } + + var rippleColor = styles.icon.color; + + var buttonEventHandlers = disabled ? null : { + onMouseDown: this._handleMouseDown, + onMouseUp: this._handleMouseUp, + onMouseOut: this._handleMouseOut, + onMouseOver: this._handleMouseOver, + onTouchStart: this._handleTouchStart, + onTouchEnd: this._handleTouchEnd, + onKeyboardFocus: this._handleKeyboardFocus + }; + + return React.createElement( + Paper, + { + style: this.mergeAndPrefix(styles.root, this.props.style), + zDepth: this.state.zDepth, + circle: true }, + React.createElement( + EnhancedButton, + _extends({}, other, buttonEventHandlers, { + ref: 'container', + disabled: disabled, + style: this.mergeAndPrefix(styles.container, this.props.mini && styles.containerWhenMini), + focusRippleColor: rippleColor, + touchRippleColor: rippleColor }), + React.createElement( + 'div', + { + ref: 'overlay', + style: this.mergeAndPrefix(styles.overlay, this.state.hovered && !this.props.disabled && styles.overlayWhenHovered) }, + iconElement, + this.props.children + ) + ) + ); + }, + + _handleMouseDown: function _handleMouseDown(e) { + //only listen to left clicks + if (e.button === 0) { + this.setState({ zDepth: this.state.initialZDepth + 1 }); + } + if (this.props.onMouseDown) this.props.onMouseDown(e); + }, + + _handleMouseUp: function _handleMouseUp(e) { + this.setState({ zDepth: this.state.initialZDepth }); + if (this.props.onMouseUp) this.props.onMouseUp(e); + }, + + _handleMouseOut: function _handleMouseOut(e) { + if (!this.refs.container.isKeyboardFocused()) this.setState({ zDepth: this.state.initialZDepth, hovered: false }); + if (this.props.onMouseOut) this.props.onMouseOut(e); + }, + + _handleMouseOver: function _handleMouseOver(e) { + if (!this.refs.container.isKeyboardFocused()) this.setState({ hovered: true }); + if (this.props.onMouseOver) this.props.onMouseOver(e); + }, + + _handleTouchStart: function _handleTouchStart(e) { + this.setState({ zDepth: this.state.initialZDepth + 1 }); + if (this.props.onTouchStart) this.props.onTouchStart(e); + }, + + _handleTouchEnd: function _handleTouchEnd(e) { + this.setState({ zDepth: this.state.initialZDepth }); + if (this.props.onTouchEnd) this.props.onTouchEnd(e); + }, + + _handleKeyboardFocus: function _handleKeyboardFocus(e, keyboardFocused) { + if (keyboardFocused && !this.props.disabled) { + this.setState({ zDepth: this.state.initialZDepth + 1 }); + React.findDOMNode(this.refs.overlay).style.backgroundColor = ColorManipulator.fade(this.getStyles().icon.color, 0.4); + } else if (!this.state.hovered) { + this.setState({ zDepth: this.state.initialZDepth }); + React.findDOMNode(this.refs.overlay).style.backgroundColor = 'transparent'; + } + } + +}); + +module.exports = RaisedButton; +}).call(this,require('_process')) + +},{"./enhanced-button":83,"./font-icon":88,"./mixins/style-propable":103,"./paper":107,"./styles/transitions":124,"./utils/color-manipulator":166,"_process":7,"react":357}],88:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); + +var FontIcon = React.createClass({ + displayName: 'FontIcon', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + color: React.PropTypes.string, + hoverColor: React.PropTypes.string, + onMouseOut: React.PropTypes.func, + onMouseOver: React.PropTypes.func + }, + + getInitialState: function getInitialState() { + return { + hovered: false + }; + }, + + render: function render() { + var _props = this.props; + var color = _props.color; + var hoverColor = _props.hoverColor; + var onMouseOut = _props.onMouseOut; + var onMouseOver = _props.onMouseOver; + var style = _props.style; + + var other = _objectWithoutProperties(_props, ['color', 'hoverColor', 'onMouseOut', 'onMouseOver', 'style']); + + var spacing = this.context.muiTheme.spacing; + var offColor = color ? color : style && style.color ? style.color : this.context.muiTheme.palette.textColor; + var onColor = hoverColor ? hoverColor : offColor; + + var mergedStyles = this.mergeAndPrefix({ + position: 'relative', + fontSize: spacing.iconSize, + display: 'inline-block', + userSelect: 'none', + transition: Transitions.easeOut() + }, style, { + color: this.state.hovered ? onColor : offColor + }); + + return React.createElement('span', _extends({}, other, { + onMouseOut: this._handleMouseOut, + onMouseOver: this._handleMouseOver, + style: mergedStyles })); + }, + + _handleMouseOut: function _handleMouseOut(e) { + this.setState({ hovered: false }); + if (this.props.onMouseOut) { + this.props.onMouseOut(e); + } + }, + + _handleMouseOver: function _handleMouseOver(e) { + this.setState({ hovered: true }); + if (this.props.onMouseOver) { + this.props.onMouseOver(e); + } + } +}); + +module.exports = FontIcon; +},{"./mixins/style-propable":103,"./styles/transitions":124,"react":357}],89:[function(require,module,exports){ +(function (process){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var EnhancedButton = require('./enhanced-button'); +var FontIcon = require('./font-icon'); +var Tooltip = require('./tooltip'); + +var IconButton = React.createClass({ + displayName: 'IconButton', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + className: React.PropTypes.string, + disabled: React.PropTypes.bool, + iconClassName: React.PropTypes.string, + iconStyle: React.PropTypes.object, + onBlur: React.PropTypes.func, + onFocus: React.PropTypes.func, + tooltip: React.PropTypes.string, + touch: React.PropTypes.bool + }, + + getInitialState: function getInitialState() { + return { + tooltipShown: false + }; + }, + + getDefaultProps: function getDefaultProps() { + return { + iconStyle: {} + }; + }, + + componentDidMount: function componentDidMount() { + if (this.props.tooltip) { + this._positionTooltip(); + } + if (process.env.NODE_ENV !== 'production') { + if (this.props.iconClassName && this.props.children) { + var warning = 'You have set both an iconClassName and a child icon. ' + 'It is recommended you use only one method when adding ' + 'icons to IconButtons.'; + console.warn(warning); + } + } + }, + + getStyles: function getStyles() { + var spacing = this.context.muiTheme.spacing; + var palette = this.context.muiTheme.palette; + + var styles = { + root: { + position: 'relative', + boxSizing: 'border-box', + transition: Transitions.easeOut(), + padding: spacing.iconSize / 2, + width: spacing.iconSize * 2, + height: spacing.iconSize * 2 + }, + tooltip: { + boxSizing: 'border-box', + marginTop: this.context.muiTheme.component.button.iconButtonSize + 4 + }, + icon: { + color: palette.textColor, + fill: palette.textColor + }, + overlay: { + position: 'relative', + top: 0, + width: '100%', + height: '100%', + background: palette.disabledColor + }, + disabled: { + color: palette.disabledColor, + fill: palette.disabledColor + } + }; + return styles; + }, + + render: function render() { + var _props = this.props; + var disabled = _props.disabled; + var iconClassName = _props.iconClassName; + var tooltip = _props.tooltip; + var touch = _props.touch; + + var other = _objectWithoutProperties(_props, ['disabled', 'iconClassName', 'tooltip', 'touch']); + + var fonticon; + + var styles = this.getStyles(); + + var tooltipElement = tooltip ? React.createElement(Tooltip, { + ref: 'tooltip', + label: tooltip, + show: this.state.tooltipShown, + touch: touch, + style: this.mergeStyles(styles.tooltip) }) : null; + + if (iconClassName) { + var _props$iconStyle = this.props.iconStyle; + var iconHoverColor = _props$iconStyle.iconHoverColor; + + var iconStyle = _objectWithoutProperties(_props$iconStyle, ['iconHoverColor']); + + fonticon = React.createElement(FontIcon, { + className: iconClassName, + hoverColor: disabled ? null : iconHoverColor, + style: this.mergeStyles(styles.icon, disabled ? styles.disabled : {}, iconStyle) }); + } + + var children = disabled ? this._addStylesToChildren(styles.disabled) : this.props.children; + + return React.createElement( + EnhancedButton, + _extends({}, other, { + ref: 'button', + centerRipple: true, + disabled: disabled, + style: this.mergeStyles(styles.root, this.props.style), + onBlur: this._handleBlur, + onFocus: this._handleFocus, + onMouseOut: this._handleMouseOut, + onMouseOver: this._handleMouseOver, + onKeyboardFocus: this._handleKeyboardFocus }), + tooltipElement, + fonticon, + children + ); + }, + + _addStylesToChildren: function _addStylesToChildren(styles) { + var children = []; + + React.Children.forEach(this.props.children, function (child) { + children.push(React.cloneElement(child, { + key: child.props.key ? child.props.key : children.length, + style: styles + })); + }); + + return children; + }, + + _positionTooltip: function _positionTooltip() { + var tooltip = React.findDOMNode(this.refs.tooltip); + var tooltipWidth = tooltip.offsetWidth; + var buttonWidth = 48; + + tooltip.style.left = (tooltipWidth - buttonWidth) / 2 * -1 + 'px'; + }, + + _showTooltip: function _showTooltip() { + if (!this.props.disabled && this.props.tooltip) { + this.setState({ tooltipShown: true }); + } + }, + + _hideTooltip: function _hideTooltip() { + if (this.props.tooltip) this.setState({ tooltipShown: false }); + }, + + _handleBlur: function _handleBlur(e) { + this._hideTooltip(); + if (this.props.onBlur) this.props.onBlur(e); + }, + + _handleFocus: function _handleFocus(e) { + this._showTooltip(); + if (this.props.onFocus) this.props.onFocus(e); + }, + + _handleMouseOut: function _handleMouseOut(e) { + if (!this.refs.button.isKeyboardFocused()) this._hideTooltip(); + if (this.props.onMouseOut) this.props.onMouseOut(e); + }, + + _handleMouseOver: function _handleMouseOver(e) { + this._showTooltip(); + if (this.props.onMouseOver) this.props.onMouseOver(e); + }, + + _handleKeyboardFocus: function _handleKeyboardFocus(e, keyboardFocused) { + if (keyboardFocused && !this.props.disabled) { + this._showTooltip(); + if (this.props.onFocus) this.props.onFocus(e); + } else if (!this.state.hovered) { + this._hideTooltip(); + if (this.props.onBlur) this.props.onBlur(e); + } + } + +}); + +module.exports = IconButton; +}).call(this,require('_process')) + +},{"./enhanced-button":83,"./font-icon":88,"./mixins/style-propable":103,"./styles/transitions":124,"./tooltip":163,"_process":7,"react":357}],90:[function(require,module,exports){ +'use strict'; + +module.exports = { + AppBar: require('./app-bar'), + AppCanvas: require('./app-canvas'), + Avatar: require('./avatar'), + BeforeAfterWrapper: require('./before-after-wrapper'), + Card: require('./card/card'), + CardActions: require('./card/card-actions'), + CardHeader: require('./card/card-header'), + CardMedia: require('./card/card-media'), + CardText: require('./card/card-text'), + CardTitle: require('./card/card-title'), + Checkbox: require('./checkbox'), + CircularProgress: require('./circular-progress'), + ClearFix: require('./clearfix'), + DatePicker: require('./date-picker/date-picker'), + Dialog: require('./dialog'), + DialogWindow: require('./dialog-window'), + DropDownIcon: require('./drop-down-icon'), + DropDownMenu: require('./drop-down-menu'), + EnhancedButton: require('./enhanced-button'), + FlatButton: require('./flat-button'), + FloatingActionButton: require('./floating-action-button'), + FontIcon: require('./font-icon'), + IconButton: require('./icon-button'), + LeftNav: require('./left-nav'), + LinearProgress: require('./linear-progress'), + List: require('./lists/list'), + ListDivider: require('./lists/list-divider'), + ListItem: require('./lists/list-item'), + Menu: require('./menu/menu'), + MenuItem: require('./menu/menu-item'), + Mixins: { + Classable: require('./mixins/classable'), + ClickAwayable: require('./mixins/click-awayable'), + WindowListenable: require('./mixins/window-listenable'), + StylePropable: require('./mixins/style-propable'), + StyleResizable: require('./mixins/style-resizable') + }, + Paper: require('./paper'), + RadioButton: require('./radio-button'), + RadioButtonGroup: require('./radio-button-group'), + RaisedButton: require('./raised-button'), + SelectField: require('./select-field'), + Slider: require('./slider'), + SvgIcon: require('./svg-icon'), + Icons: { + NavigationMenu: require('./svg-icons/navigation-menu'), + NavigationChevronLeft: require('./svg-icons/navigation-chevron-left'), + NavigationChevronRight: require('./svg-icons/navigation-chevron-right') + }, + Styles: { + AutoPrefix: require('./styles/auto-prefix'), + Colors: require('./styles/colors'), + Spacing: require('./styles/spacing'), + ThemeManager: require('./styles/theme-manager'), + Transitions: require('./styles/transitions'), + Typography: require('./styles/typography') + }, + Snackbar: require('./snackbar'), + Tab: require('./tabs/tab'), + Table: require('./table/table'), + Tabs: require('./tabs/tabs'), + Theme: require('./theme'), + Toggle: require('./toggle'), + TimePicker: require('./time-picker'), + TextField: require('./text-field'), + Toolbar: require('./toolbar/toolbar'), + ToolbarGroup: require('./toolbar/toolbar-group'), + ToolbarSeparator: require('./toolbar/toolbar-separator'), + ToolbarTitle: require('./toolbar/toolbar-title'), + Tooltip: require('./tooltip'), + Utils: { + CssEvent: require('./utils/css-event'), + Dom: require('./utils/dom'), + Events: require('./utils/events'), + KeyCode: require('./utils/key-code'), + KeyLine: require('./utils/key-line'), + ColorManipulator: require('./utils/color-manipulator'), + Extend: require('./utils/extend'), + UniqueId: require('./utils/unique-id') + } +}; +},{"./app-bar":57,"./app-canvas":58,"./avatar":59,"./before-after-wrapper":60,"./card/card":66,"./card/card-actions":61,"./card/card-header":62,"./card/card-media":63,"./card/card-text":64,"./card/card-title":65,"./checkbox":67,"./circular-progress":68,"./clearfix":69,"./date-picker/date-picker":76,"./dialog":80,"./dialog-window":79,"./drop-down-icon":81,"./drop-down-menu":82,"./enhanced-button":83,"./flat-button":86,"./floating-action-button":87,"./font-icon":88,"./icon-button":89,"./left-nav":92,"./linear-progress":93,"./lists/list":96,"./lists/list-divider":94,"./lists/list-item":95,"./menu/menu":99,"./menu/menu-item":98,"./mixins/classable":101,"./mixins/click-awayable":102,"./mixins/style-propable":103,"./mixins/style-resizable":104,"./mixins/window-listenable":105,"./paper":107,"./radio-button":109,"./radio-button-group":108,"./raised-button":110,"./select-field":114,"./slider":115,"./snackbar":116,"./styles/auto-prefix":117,"./styles/colors":118,"./styles/spacing":120,"./styles/theme-manager":121,"./styles/transitions":124,"./styles/typography":125,"./svg-icon":126,"./svg-icons/navigation-chevron-left":129,"./svg-icons/navigation-chevron-right":131,"./svg-icons/navigation-menu":132,"./table/table":142,"./tabs/tab":143,"./tabs/tabs":145,"./text-field":146,"./theme":147,"./time-picker":154,"./toggle":158,"./toolbar/toolbar":162,"./toolbar/toolbar-group":159,"./toolbar/toolbar-separator":160,"./toolbar/toolbar-title":161,"./tooltip":163,"./utils/color-manipulator":166,"./utils/css-event":167,"./utils/dom":169,"./utils/events":170,"./utils/extend":171,"./utils/key-code":172,"./utils/key-line":173,"./utils/unique-id":175}],91:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var Transitions = require('./styles/transitions'); +var StylePropable = require('./mixins/style-propable'); + +var InkBar = React.createClass({ + displayName: 'InkBar', + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + left: React.PropTypes.string.isRequired, + width: React.PropTypes.string.isRequired + }, + + mixins: [StylePropable], + + render: function render() { + var palette = this.context.muiTheme.palette; + + var styles = this.mergeAndPrefix({ + left: this.props.left, + width: this.props.width, + bottom: 0, + display: 'block', + backgroundColor: palette.accent1Color, + height: 2, + marginTop: -2, + position: 'relative', + transition: Transitions.easeOut('1s', 'left') + }); + + return React.createElement( + 'div', + { style: styles }, + ' ' + ); + } + +}); + +module.exports = InkBar; +},{"./mixins/style-propable":103,"./styles/transitions":124,"react":357}],92:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var KeyCode = require('./utils/key-code'); +var StylePropable = require('./mixins/style-propable'); +var AutoPrefix = require('./styles/auto-prefix'); +var Transitions = require('./styles/transitions'); +var WindowListenable = require('./mixins/window-listenable'); +var Overlay = require('./overlay'); +var Paper = require('./paper'); +var Menu = require('./menu/menu'); + +var LeftNav = React.createClass({ + displayName: 'LeftNav', + + mixins: [StylePropable, WindowListenable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + className: React.PropTypes.string, + docked: React.PropTypes.bool, + header: React.PropTypes.element, + menuItems: React.PropTypes.array.isRequired, + onChange: React.PropTypes.func, + onNavOpen: React.PropTypes.func, + onNavClose: React.PropTypes.func, + openRight: React.PropTypes.bool, + selectedIndex: React.PropTypes.number + }, + + windowListeners: { + 'keyup': '_onWindowKeyUp', + 'resize': '_onWindowResize' + }, + + getDefaultProps: function getDefaultProps() { + return { + docked: true + }; + }, + + getInitialState: function getInitialState() { + return { + open: this.props.docked, + maybeSwiping: false, + swiping: false + }; + }, + + componentDidMount: function componentDidMount() { + this._updateMenuHeight(); + this._enableSwipeHandling(); + }, + + componentDidUpdate: function componentDidUpdate(prevProps, prevState) { + this._updateMenuHeight(); + this._enableSwipeHandling(); + }, + + componentWillUnmount: function componentWillUnmount() { + this._disableSwipeHandling(); + }, + + toggle: function toggle() { + this.setState({ open: !this.state.open }); + return this; + }, + + close: function close() { + this.setState({ open: false }); + if (this.props.onNavClose) this.props.onNavClose(); + return this; + }, + + open: function open() { + this.setState({ open: true }); + if (this.props.onNavOpen) this.props.onNavOpen(); + return this; + }, + + getThemePalette: function getThemePalette() { + return this.context.muiTheme.palette; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.leftNav; + }, + + getStyles: function getStyles() { + var x = this._getTranslateMultiplier() * (this.state.open ? 0 : this._getMaxTranslateX()) + 'px'; + var styles = { + root: { + height: '100%', + width: this.getTheme().width, + position: 'fixed', + zIndex: 10, + left: 0, + top: 0, + transform: 'translate3d(' + x + ', 0, 0)', + transition: !this.state.swiping && Transitions.easeOut(), + backgroundColor: this.getTheme().color, + overflow: 'hidden' + }, + menu: { + overflowY: 'auto', + overflowX: 'hidden', + height: '100%' + }, + menuItem: { + height: this.context.muiTheme.spacing.desktopLeftNavMenuItemHeight, + lineHeight: this.context.muiTheme.spacing.desktopLeftNavMenuItemHeight + 'px' + }, + rootWhenOpenRight: { + left: 'auto', + right: '0' + } + }; + styles.menuItemLink = this.mergeAndPrefix(styles.menuItem, { + display: 'block', + textDecoration: 'none', + color: this.getThemePalette().textColor + }); + styles.menuItemSubheader = this.mergeAndPrefix(styles.menuItem, { + overflow: 'hidden' + }); + + return styles; + }, + + render: function render() { + var selectedIndex = this.props.selectedIndex; + var overlay; + + var styles = this.getStyles(); + if (!this.props.docked) { + overlay = React.createElement(Overlay, { ref: 'overlay', + show: this.state.open, + transitionEnabled: !this.state.swiping, + onTouchTap: this._onOverlayTouchTap }); + } + + return React.createElement( + 'div', + { className: this.props.className }, + overlay, + React.createElement( + Paper, + { + ref: 'clickAwayableElement', + zDepth: 2, + rounded: false, + transitionEnabled: !this.state.swiping, + style: this.mergeAndPrefix(styles.root, this.props.openRight && styles.rootWhenOpenRight, this.props.style) }, + this.props.header, + React.createElement(Menu, { + ref: 'menuItems', + style: this.mergeAndPrefix(styles.menu), + zDepth: 0, + menuItems: this.props.menuItems, + menuItemStyle: this.mergeAndPrefix(styles.menuItem), + menuItemStyleLink: this.mergeAndPrefix(styles.menuItemLink), + menuItemStyleSubheader: this.mergeAndPrefix(styles.menuItemSubheader), + selectedIndex: selectedIndex, + onItemTap: this._onMenuItemClick }) + ) + ); + }, + + _updateMenuHeight: function _updateMenuHeight() { + if (this.props.header) { + var container = React.findDOMNode(this.refs.clickAwayableElement); + var menu = React.findDOMNode(this.refs.menuItems); + var menuHeight = container.clientHeight - menu.offsetTop; + menu.style.height = menuHeight + 'px'; + } + }, + + _onMenuItemClick: function _onMenuItemClick(e, key, payload) { + if (this.props.onChange && this.props.selectedIndex !== key) { + this.props.onChange(e, key, payload); + } + if (!this.props.docked) this.close(); + }, + + _onOverlayTouchTap: function _onOverlayTouchTap() { + this.close(); + }, + + _onWindowKeyUp: function _onWindowKeyUp(e) { + if (e.keyCode == KeyCode.ESC && !this.props.docked && this.state.open) { + this.close(); + } + }, + + _onWindowResize: function _onWindowResize(e) { + this._updateMenuHeight(); + }, + + _getMaxTranslateX: function _getMaxTranslateX() { + return this.getTheme().width + 10; + }, + + _getTranslateMultiplier: function _getTranslateMultiplier() { + return this.props.openRight ? 1 : -1; + }, + + _enableSwipeHandling: function _enableSwipeHandling() { + if (this.state.open && !this.props.docked) { + document.body.addEventListener('touchstart', this._onBodyTouchStart); + } else { + this._disableSwipeHandling(); + } + }, + + _disableSwipeHandling: function _disableSwipeHandling() { + document.body.removeEventListener('touchstart', this._onBodyTouchStart); + }, + + _onBodyTouchStart: function _onBodyTouchStart(e) { + var touchStartX = e.touches[0].pageX; + var touchStartY = e.touches[0].pageY; + this.setState({ + maybeSwiping: true, + touchStartX: touchStartX, + touchStartY: touchStartY + }); + + document.body.addEventListener('touchmove', this._onBodyTouchMove); + document.body.addEventListener('touchend', this._onBodyTouchEnd); + document.body.addEventListener('touchcancel', this._onBodyTouchEnd); + }, + + _onBodyTouchMove: function _onBodyTouchMove(e) { + var currentX = e.touches[0].pageX; + var currentY = e.touches[0].pageY; + + if (this.state.swiping) { + e.preventDefault(); + var translateX = Math.min(Math.max(this._getTranslateMultiplier() * (currentX - this.state.swipeStartX), 0), this._getMaxTranslateX()); + + var leftNav = React.findDOMNode(this.refs.clickAwayableElement); + leftNav.style[AutoPrefix.single('transform')] = 'translate3d(' + this._getTranslateMultiplier() * translateX + 'px, 0, 0)'; + this.refs.overlay.setOpacity(1 - translateX / this._getMaxTranslateX()); + } else if (this.state.maybeSwiping) { + var dXAbs = Math.abs(currentX - this.state.touchStartX); + var dYAbs = Math.abs(currentY - this.state.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.setState({ + swiping: true, + swipeStartX: currentX + }); + } else if (dXAbs <= threshold && dYAbs > threshold) { + this._onBodyTouchEnd(); + } + } + }, + + _onBodyTouchEnd: function _onBodyTouchEnd() { + var shouldClose = false; + + if (this.state.swiping) shouldClose = true; + + this.setState({ + maybeSwiping: false, + swiping: false + }); + + // We have to call close() after setting swiping to false, + // because only then CSS transition is enabled. + if (shouldClose) this.close(); + + document.body.removeEventListener('touchmove', this._onBodyTouchMove); + document.body.removeEventListener('touchend', this._onBodyTouchEnd); + document.body.removeEventListener('touchcancel', this._onBodyTouchEnd); + } + +}); + +module.exports = LeftNav; +},{"./menu/menu":99,"./mixins/style-propable":103,"./mixins/window-listenable":105,"./overlay":106,"./paper":107,"./styles/auto-prefix":117,"./styles/transitions":124,"./utils/key-code":172,"react":357}],93:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); + +var LinearProgress = React.createClass({ + displayName: 'LinearProgress', + + mixins: [StylePropable], + + propTypes: { + mode: React.PropTypes.oneOf(['determinate', 'indeterminate']), + value: React.PropTypes.number, + min: React.PropTypes.number, + max: React.PropTypes.number + }, + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + _getRelativeValue: function _getRelativeValue() { + var value = this.props.value; + var min = this.props.min; + var max = this.props.max; + + var clampedValue = Math.min(Math.max(min, value), max); + var rangeValue = max - min; + var relValue = Math.round(clampedValue / rangeValue * 10000) / 10000; + return relValue * 100; + }, + + componentDidMount: function componentDidMount() { + + var bar1 = React.findDOMNode(this.refs.bar1); + var bar2 = React.findDOMNode(this.refs.bar2); + + this._barUpdate(0, bar1, [[-35, 100], [100, -90]]); + + setTimeout((function () { + + this._barUpdate(0, bar2, [[-200, 100], [107, -8]]); + }).bind(this), 850); + }, + + _barUpdate: function _barUpdate(step, barElement, stepValues) { + step = step || 0; + step %= 4; + setTimeout(this._barUpdate.bind(this, step + 1, barElement, stepValues), 420); + if (!this.isMounted()) return; + if (this.props.mode != 'indeterminate') return; + + if (step === 0) { + barElement.style.left = stepValues[0][0] + '%'; + barElement.style.right = stepValues[0][1] + '%'; + } else if (step == 1) { + + barElement.style.transitionDuration = '840ms'; + } else if (step == 2) { + + barElement.style.left = stepValues[1][0] + '%'; + barElement.style.right = stepValues[1][1] + '%'; + } else if (step == 3) { + barElement.style.transitionDuration = '0ms'; + } + }, + + getDefaultProps: function getDefaultProps() { + return { + mode: 'indeterminate', + value: 0, + min: 0, + max: 100 + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.palette; + }, + + getStyles: function getStyles() { + + var styles = { + root: { + position: 'relative', + height: '4px', + display: 'block', + width: '100%', + backgroundColor: this.getTheme().primary3Color, + borderRadius: '2px', + margin: 0, + overflow: 'hidden' + }, + bar: { + height: '100%' + }, + barFragment1: {}, + barFragment2: {} + }; + + if (this.props.mode == 'indeterminate') { + styles.barFragment1 = { + position: 'absolute', + backgroundColor: this.getTheme().primary1Color, + top: 0, + left: 0, + bottom: 0, + transition: Transitions.create('all', '840ms', null, 'cubic-bezier(0.650, 0.815, 0.735, 0.395)') + }; + + styles.barFragment2 = { + position: 'absolute', + backgroundColor: this.getTheme().primary1Color, + top: 0, + left: 0, + bottom: 0, + transition: Transitions.create('all', '840ms', null, 'cubic-bezier(0.165, 0.840, 0.440, 1.000)') + }; + } else { + styles.bar.backgroundColor = this.getTheme().primary1Color; + styles.bar.transition = Transitions.create('width', '.3s', null, 'linear'); + styles.bar.width = this._getRelativeValue() + '%'; + } + + return styles; + }, + + render: function render() { + var _props = this.props; + var style = _props.style; + + var other = _objectWithoutProperties(_props, ['style']); + + var styles = this.getStyles(); + + return React.createElement( + 'div', + _extends({}, other, { style: this.mergeAndPrefix(styles.root, style) }), + React.createElement( + 'div', + { style: this.mergeAndPrefix(styles.bar) }, + React.createElement('div', { ref: 'bar1', style: this.mergeAndPrefix(styles.barFragment1) }), + React.createElement('div', { ref: 'bar2', style: this.mergeAndPrefix(styles.barFragment2) }) + ) + ); + } +}); + +module.exports = LinearProgress; +},{"./mixins/style-propable":103,"./styles/transitions":124,"react":357}],94:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react/addons'); +var StylePropable = require('../mixins/style-propable'); + +var ListDivider = React.createClass({ + displayName: 'ListDivider', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + inset: React.PropTypes.bool + }, + + render: function render() { + var _props = this.props; + var inset = _props.inset; + var style = _props.style; + + var other = _objectWithoutProperties(_props, ['inset', 'style']); + + var mergedStyles = this.mergeAndPrefix({ + margin: 0, + marginTop: -1, + marginLeft: inset ? 72 : 0, + height: 1, + border: 'none', + backgroundColor: this.context.muiTheme.palette.borderColor + }, style); + + return React.createElement('hr', _extends({}, other, { style: mergedStyles })); + } +}); + +module.exports = ListDivider; +},{"../mixins/style-propable":103,"react/addons":185}],95:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react/addons'); +var ColorManipulator = require('../utils/color-manipulator'); +var StylePropable = require('../mixins/style-propable'); +var Colors = require('../styles/colors'); +var Transitions = require('../styles/transitions'); +var Typography = require('../styles/typography'); +var EnhancedButton = require('../enhanced-button'); + +var ListItem = React.createClass({ + displayName: 'ListItem', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + disableTouchTap: React.PropTypes.bool, + insetChildren: React.PropTypes.bool, + leftAvatar: React.PropTypes.element, + leftCheckbox: React.PropTypes.element, + leftIcon: React.PropTypes.element, + onMouseOut: React.PropTypes.func, + onMouseOver: React.PropTypes.func, + rightAvatar: React.PropTypes.element, + rightIcon: React.PropTypes.element, + rightIconButton: React.PropTypes.element, + rightToggle: React.PropTypes.element, + secondaryText: React.PropTypes.node, + secondaryTextLines: React.PropTypes.oneOf([1, 2]) + }, + + getDefaultProps: function getDefaultProps() { + return { + secondaryTextLines: 1 + }; + }, + + getInitialState: function getInitialState() { + return { + hovered: false, + rightIconButtonHovered: false + }; + }, + + render: function render() { + var _props = this.props; + var disableTouchTap = _props.disableTouchTap; + var insetChildren = _props.insetChildren; + var leftAvatar = _props.leftAvatar; + var leftCheckbox = _props.leftCheckbox; + var leftIcon = _props.leftIcon; + var onMouseOut = _props.onMouseOut; + var onMouseOver = _props.onMouseOver; + 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 style = _props.style; + + var other = _objectWithoutProperties(_props, ['disableTouchTap', 'insetChildren', 'leftAvatar', 'leftCheckbox', 'leftIcon', 'onMouseOut', 'onMouseOver', 'rightAvatar', 'rightIcon', 'rightIconButton', 'rightToggle', 'secondaryText', 'secondaryTextLines', 'style']); + + var textColor = this.context.muiTheme.palette.textColor; + var hoverColor = ColorManipulator.fade(textColor, 0.03); + var singleAvatar = !secondaryText && (leftAvatar || rightAvatar); + var singleNoAvatar = !secondaryText && !(leftAvatar || rightAvatar); + var twoLine = secondaryText && secondaryTextLines === 1; + var threeLine = secondaryText && secondaryTextLines > 1; + var hasCheckbox = leftCheckbox || rightToggle; + + var styles = { + root: { + backgroundColor: this.state.hovered && !this.state.rightIconButtonHovered ? hoverColor : null, + color: textColor, + display: 'block', + fontSize: 16, + lineHeight: '16px', + overflow: 'hidden', + position: 'relative', + transition: Transitions.easeOut() + }, + + //This inner div is need so that ripples will span the entire container + innerDiv: { + paddingLeft: leftIcon || leftAvatar || leftCheckbox || insetChildren ? 72 : 16, + paddingRight: rightIcon || rightAvatar || rightIconButton ? 56 : rightToggle ? 72 : 16, + paddingBottom: singleAvatar ? 20 : 16, + paddingTop: singleNoAvatar || threeLine ? 16 : 20 + }, + + label: { + cursor: 'pointer' + }, + + icons: { + height: 24, + width: 24, + display: 'block', + position: 'absolute', + top: twoLine ? 12 : singleAvatar ? 4 : 0, + padding: 12 + }, + + leftIcon: { + color: Colors.grey600, + fill: Colors.grey600, + left: 4 + }, + + rightIcon: { + color: Colors.grey400, + fill: Colors.grey400, + right: 4 + }, + + avatars: { + position: 'absolute', + top: singleAvatar ? 8 : 16 + }, + + leftAvatar: { + left: 16 + }, + + rightAvatar: { + right: 16 + }, + + leftCheckbox: { + position: 'absolute', + display: 'block', + width: 24, + top: twoLine ? 24 : singleAvatar ? 16 : 12, + left: 16 + }, + + rightIconButton: { + position: 'absolute', + display: 'block', + top: twoLine ? 12 : singleAvatar ? 4 : 0, + right: 4 + }, + + rightToggle: { + position: 'absolute', + display: 'block', + width: 54, + top: twoLine ? 25 : singleAvatar ? 17 : 13, + right: 8 + }, + + secondaryText: { + fontSize: 14, + lineHeight: threeLine ? '18px' : '16px', + height: threeLine ? 36 : 16, + margin: 0, + marginTop: 4, + color: Typography.textLightBlack, + + //needed for 2 and 3 line ellipsis + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: threeLine ? null : 'nowrap', + display: threeLine ? '-webkit-box' : null, + WebkitLineClamp: threeLine ? 2 : null, + WebkitBoxOrient: threeLine ? 'vertical' : null + } + }; + + var secondaryTextIsAnElement = React.isValidElement(secondaryText); + + var mergedRootStyles = this.mergeAndPrefix(styles.root, style); + var mergedDivStyles = this.mergeAndPrefix(styles.root, styles.innerDiv, style); + var mergedLabelStyles = this.mergeAndPrefix(styles.root, styles.innerDiv, styles.label, style); + var mergedSecondaryTextStyles = secondaryTextIsAnElement ? this.mergeStyles(styles.secondaryText, secondaryText.props.style) : null; + + var contentChildren = []; + + this._pushElement(contentChildren, leftIcon, this.mergeStyles(styles.icons, styles.leftIcon)); + this._pushElement(contentChildren, rightIcon, this.mergeStyles(styles.icons, styles.rightIcon)); + this._pushElement(contentChildren, leftAvatar, this.mergeStyles(styles.avatars, styles.leftAvatar)); + this._pushElement(contentChildren, rightAvatar, this.mergeStyles(styles.avatars, styles.rightAvatar)); + this._pushElement(contentChildren, leftCheckbox, this.mergeStyles(styles.leftCheckbox)); + this._pushElement(contentChildren, rightIconButton, this.mergeStyles(styles.rightIconButton), { + onMouseOver: this._handleRightIconButtonMouseOver, + onMouseOut: this._handleRightIconButtonMouseOut, + onTouchTap: this._handleRightIconButtonTouchTap, + onMouseDown: this._handleRightIconButtonMouseUp, + onMouseUp: this._handleRightIconButtonMouseUp + }); + this._pushElement(contentChildren, rightToggle, this.mergeStyles(styles.rightToggle)); + + if (this.props.children) contentChildren.push(this.props.children); + if (secondaryText) contentChildren.push(React.isValidElement(secondaryText) ? React.cloneElement(secondaryText, { key: 'secondaryText', style: mergedSecondaryTextStyles }) : React.createElement( + 'div', + { key: 'secondaryText', style: styles.secondaryText }, + secondaryText + )); + + return hasCheckbox || disableTouchTap ? React.createElement(hasCheckbox ? 'label' : 'div', { style: hasCheckbox ? mergedLabelStyles : mergedDivStyles }, contentChildren) : React.createElement( + EnhancedButton, + _extends({}, other, { + linkButton: true, + onMouseOut: this._handleMouseOut, + onMouseOver: this._handleMouseOver, + style: mergedRootStyles }), + React.createElement( + 'div', + { style: styles.innerDiv }, + contentChildren + ) + ); + }, + + _pushElement: function _pushElement(children, element, baseStyles, additionalProps) { + if (element) { + var styles = this.mergeStyles(baseStyles, element.props.style); + children.push(React.cloneElement(element, _extends({ + key: children.length, + style: styles + }, additionalProps))); + } + }, + + _handleRightIconButtonMouseDown: function _handleRightIconButtonMouseDown(e) { + var iconButton = this.props.rightIconButton; + e.stopPropagation(); + if (iconButton.onMouseDown) iconButton.onDown(e); + }, + + _handleRightIconButtonMouseOut: function _handleRightIconButtonMouseOut(e) { + var iconButton = this.props.rightIconButton; + this.setState({ rightIconButtonHovered: false }); + if (iconButton.onMouseOut) iconButton.onMouseOut(e); + }, + + _handleRightIconButtonMouseOver: function _handleRightIconButtonMouseOver(e) { + var iconButton = this.props.rightIconButton; + this.setState({ rightIconButtonHovered: true }); + if (iconButton.onMouseOver) iconButton.onMouseOver(e); + }, + + _handleRightIconButtonMouseUp: function _handleRightIconButtonMouseUp(e) { + var iconButton = this.props.rightIconButton; + e.stopPropagation(); + if (iconButton.onMouseUp) iconButton.onUp(e); + }, + + _handleRightIconButtonTouchTap: function _handleRightIconButtonTouchTap(e) { + var iconButton = this.props.rightIconButton; + + //Stop the event from bubbling up to the list-item + e.stopPropagation(); + if (iconButton.onTouchTap) iconButton.onTouchTap(e); + }, + + _handleMouseOver: function _handleMouseOver(e) { + this.setState({ hovered: true }); + if (this.props.onMouseOver) { + this.props.onMouseOver(e); + } + }, + + _handleMouseOut: function _handleMouseOut(e) { + this.setState({ hovered: false }); + if (this.props.onMouseOut) { + this.props.onMouseOut(e); + } + } + +}); + +module.exports = ListItem; +},{"../enhanced-button":83,"../mixins/style-propable":103,"../styles/colors":118,"../styles/transitions":124,"../styles/typography":125,"../utils/color-manipulator":166,"react/addons":185}],96:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react/addons'); +var StylePropable = require('../mixins/style-propable'); +var Typography = require('../styles/typography'); + +var List = React.createClass({ + displayName: 'List', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + insetSubheader: React.PropTypes.bool, + subheader: React.PropTypes.string, + subheaderStyle: React.PropTypes.object + }, + + getDefaultProps: function getDefaultProps() { + return {}; + }, + + render: function render() { + var _props = this.props; + var insetSubheader = _props.insetSubheader; + var style = _props.style; + var subheader = _props.subheader; + var subheaderStyle = _props.subheaderStyle; + + var other = _objectWithoutProperties(_props, ['insetSubheader', 'style', 'subheader', 'subheaderStyle']); + + var styles = { + root: { + padding: 0, + paddingBottom: 8, + paddingTop: subheader ? 0 : 8 + }, + + subheader: { + color: Typography.textLightBlack, + fontSize: 14, + fontWeight: Typography.fontWeightMedium, + lineHeight: '48px', + paddingLeft: insetSubheader ? 72 : 16 + } + }; + + var mergedRootStyles = this.mergeAndPrefix(styles.root, style); + var mergedSubheaderStyles = this.mergeAndPrefix(styles.subheader, subheaderStyle); + + var subheaderElement = subheader ? React.createElement( + 'div', + { style: mergedSubheaderStyles }, + subheader + ) : null; + + return React.createElement( + 'div', + _extends({}, other, { + style: mergedRootStyles }), + subheaderElement, + this.props.children + ); + } +}); + +module.exports = List; +},{"../mixins/style-propable":103,"../styles/typography":125,"react/addons":185}],97:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); + +var LinkMenuItem = React.createClass({ + displayName: 'LinkMenuItem', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + index: React.PropTypes.number.isRequired, + payload: React.PropTypes.string.isRequired, + text: React.PropTypes.string.isRequired, + target: React.PropTypes.string, + active: React.PropTypes.bool, + disabled: React.PropTypes.bool, + className: React.PropTypes.string + }, + + getDefaultProps: function getDefaultProps() { + return { + active: false, + disabled: false + }; + }, + + getInitialState: function getInitialState() { + return { + hovered: false + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.menuItem; + }, + + getStyles: function getStyles() { + var style = { + root: { + userSelect: 'none', + cursor: 'pointer', + display: 'block', + lineHeight: this.getTheme().height + 'px', + paddingLeft: this.getTheme().padding, + paddingRight: this.getTheme().padding + }, + rootWhenHovered: { + backgroundColor: this.getTheme().hoverColor + }, + rootWhenSelected: { + color: this.getTheme().selectedTextColor + }, + rootWhenDisabled: { + cursor: 'default', + color: this.context.muiTheme.palette.disabledColor + } + }; + return style; + }, + + render: function render() { + var onClickHandler = this.props.disabled ? this._stopLink : undefined; + // Prevent context menu 'Open In New Tab/Window' + var linkAttribute = this.props.disabled ? 'data-href' : 'href'; + var link = {}; + link[linkAttribute] = this.props.payload; + + var styles = this.getStyles(); + + var linkStyles = this.mergeAndPrefix(styles.root, this.props.selected && styles.rootWhenSelected, this.props.selected && styles.rootWhenSelected, this.props.active && !this.props.disabled && styles.rootWhenHovered, this.props.style, this.props.disabled && styles.rootWhenDisabled); + + return React.createElement( + 'a', + _extends({ + key: this.props.index, + target: this.props.target, + style: linkStyles }, link, { + className: this.props.className, + onClick: onClickHandler, + onMouseOver: this._handleMouseOver, + onMouseOut: this._handleMouseOut }), + this.props.text + ); + }, + + _stopLink: function _stopLink(event) { + event.preventDefault(); + }, + + _handleMouseOver: function _handleMouseOver(e) { + this.setState({ hovered: true }); + if (!this.props.disabled && this.props.onMouseOver) this.props.onMouseOver(e); + }, + + _handleMouseOut: function _handleMouseOut(e) { + this.setState({ hovered: false }); + if (!this.props.disabled && this.props.onMouseOut) this.props.onMouseOut(e); + } +}); + +module.exports = LinkMenuItem; +},{"../mixins/style-propable":103,"react":357}],98:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var FontIcon = require('../font-icon'); +var Toggle = require('../toggle'); + +var Types = { + LINK: 'LINK', + SUBHEADER: 'SUBHEADER', + NESTED: 'NESTED' +}; + +var MenuItem = React.createClass({ + displayName: 'MenuItem', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + index: React.PropTypes.number.isRequired, + className: React.PropTypes.string, + iconClassName: React.PropTypes.string, + iconRightClassName: React.PropTypes.string, + iconStyle: React.PropTypes.object, + iconRightStyle: React.PropTypes.object, + attribute: React.PropTypes.string, + number: React.PropTypes.string, + data: React.PropTypes.string, + toggle: React.PropTypes.bool, + disabled: React.PropTypes.bool, + onTouchTap: React.PropTypes.func, + onToggle: React.PropTypes.func, + selected: React.PropTypes.bool, + active: React.PropTypes.bool + }, + + statics: { + Types: Types + }, + + getDefaultProps: function getDefaultProps() { + return { + toggle: false, + disabled: false, + active: false + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.menuItem; + }, + + getSpacing: function getSpacing() { + return this.context.muiTheme.spacing; + }, + + getStyles: function getStyles() { + var styles = { + root: { + userSelect: 'none', + cursor: 'pointer', + lineHeight: this.getTheme().height + 'px', + paddingLeft: this.getTheme().padding, + paddingRight: this.getTheme().padding, + color: this.context.muiTheme.palette.textColor + }, + number: { + float: 'right', + width: 24, + textAlign: 'center' + }, + attribute: { + float: 'right' + }, + iconRight: { + lineHeight: this.getTheme().height + 'px', + float: 'right' + }, + icon: { + float: 'left', + lineHeight: this.getTheme().height + 'px', + marginRight: this.getSpacing().desktopGutter + }, + data: { + display: 'block', + paddingLeft: this.getSpacing().desktopGutter * 2, + lineHeight: this.getTheme().dataHeight + 'px', + height: this.getTheme().dataHeight + 'px', + verticalAlign: 'top', + top: -12, + position: 'relative', + fontWeight: 300, + color: this.context.muiTheme.palette.textColor + }, + toggle: { + marginTop: (this.getTheme().height - this.context.muiTheme.component.radioButton.size) / 2, + float: 'right', + width: 42 + }, + rootWhenHovered: { + backgroundColor: this.getTheme().hoverColor + }, + rootWhenSelected: { + color: this.getTheme().selectedTextColor + }, + rootWhenDisabled: { + cursor: 'default', + color: this.context.muiTheme.palette.disabledColor + } + }; + return styles; + }, + + render: function render() { + var icon; + var data; + var iconRight; + var attribute; + var number; + var toggleElement; + + var styles = this.getStyles(); + + if (this.props.iconClassName) icon = React.createElement(FontIcon, { style: this.mergeAndPrefix(styles.icon, this.props.iconStyle), className: this.props.iconClassName }); + if (this.props.iconRightClassName) iconRight = React.createElement(FontIcon, { style: this.mergeAndPrefix(styles.iconRight, this.props.iconRightStyle), className: this.props.iconRightClassName }); + if (this.props.data) data = React.createElement( + 'span', + { style: this.mergeAndPrefix(styles.data) }, + this.props.data + ); + if (this.props.number !== undefined) number = React.createElement( + 'span', + { style: this.mergeAndPrefix(styles.number) }, + this.props.number + ); + if (this.props.attribute !== undefined) attribute = React.createElement( + 'span', + { style: this.mergeAndPrefix(styles.style) }, + this.props.attribute + ); + + if (this.props.toggle) { + var _props = this.props; + var toggle = _props.toggle; + var onTouchTap = _props.onTouchTap; + var onToggle = _props.onToggle; + var onMouseOver = _props.onMouseOver; + var onMouseOut = _props.onMouseOut; + var children = _props.children; + var label = _props.label; + var style = _props.style; + + var other = _objectWithoutProperties(_props, ['toggle', 'onTouchTap', 'onToggle', 'onMouseOver', 'onMouseOut', 'children', 'label', 'style']); + + toggleElement = React.createElement(Toggle, _extends({}, other, { onToggle: this._handleToggle, style: styles.toggle })); + } + + return React.createElement( + 'div', + { + key: this.props.index, + className: this.props.className, + onTouchTap: this._handleTouchTap, + onMouseOver: this._handleMouseOver, + onMouseOut: this._handleMouseOut, f: true, + style: this.mergeAndPrefix(styles.root, this.props.selected && styles.rootWhenSelected, this.props.active && !this.props.disabled && styles.rootWhenHovered, this.props.style, this.props.disabled && styles.rootWhenDisabled) }, + icon, + this.props.children, + data, + attribute, + number, + toggleElement, + iconRight + ); + }, + + _handleTouchTap: function _handleTouchTap(e) { + if (!this.props.disabled && this.props.onTouchTap) this.props.onTouchTap(e, this.props.index); + }, + + _handleToggle: function _handleToggle(e, toggled) { + if (!this.props.disabled && this.props.onToggle) this.props.onToggle(e, this.props.index, toggled); + }, + + _handleMouseOver: function _handleMouseOver(e) { + if (!this.props.disabled && this.props.onMouseOver) this.props.onMouseOver(e, this.props.index); + }, + + _handleMouseOut: function _handleMouseOut(e) { + if (!this.props.disabled && this.props.onMouseOut) this.props.onMouseOut(e, this.props.index); + } +}); + +module.exports = MenuItem; +},{"../font-icon":88,"../mixins/style-propable":103,"../toggle":158,"react":357}],99:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var CssEvent = require('../utils/css-event'); +var Dom = require('../utils/dom'); +var KeyLine = require('../utils/key-line'); +var KeyCode = require('../utils/key-code'); +var StylePropable = require('../mixins/style-propable'); +var Transitions = require('../styles/transitions'); +var ClickAwayable = require('../mixins/click-awayable'); +var Paper = require('../paper'); +var MenuItem = require('./menu-item'); +var LinkMenuItem = require('./link-menu-item'); +var SubheaderMenuItem = require('./subheader-menu-item'); +var WindowListenable = require('../mixins/window-listenable'); + +/*********************** +* Nested Menu Component +***********************/ +var NestedMenuItem = React.createClass({ + displayName: 'NestedMenuItem', + + mixins: [ClickAwayable, StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + index: React.PropTypes.number.isRequired, + text: React.PropTypes.string, + menuItems: React.PropTypes.array.isRequired, + zDepth: React.PropTypes.number, + disabled: React.PropTypes.bool, + active: React.PropTypes.bool, + onItemTap: React.PropTypes.func, + menuItemStyle: React.PropTypes.object + }, + + getDefaultProps: function getDefaultProps() { + return { + disabled: false + }; + }, + + getInitialState: function getInitialState() { + return { + open: false, + activeIndex: 0 + }; + }, + + componentClickAway: function componentClickAway() { + this._closeNestedMenu(); + }, + + componentDidMount: function componentDidMount() { + this._positionNestedMenu(); + var el = this.getDOMNode(); + el.focus(); + }, + + componentDidUpdate: function componentDidUpdate() { + this._positionNestedMenu(); + }, + + getSpacing: function getSpacing() { + return this.context.muiTheme.spacing; + }, + + getStyles: function getStyles() { + var styles = { + root: { + userSelect: 'none', + cursor: 'pointer', + lineHeight: this.getTheme().height + 'px', + color: this.context.muiTheme.palette.textColor + }, + icon: { + float: 'left', + lineHeight: this.getTheme().height + 'px', + marginRight: this.getSpacing().desktopGutter + }, + toggle: { + marginTop: (this.getTheme().height - this.context.muiTheme.component.radioButton.size) / 2, + float: 'right', + width: 42 + }, + rootWhenHovered: { + backgroundColor: this.getTheme().hoverColor + }, + rootWhenSelected: { + color: this.getTheme().selectedTextColor + }, + rootWhenDisabled: { + cursor: 'default', + color: this.context.muiTheme.palette.disabledColor + } + }; + return styles; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.menuItem; + }, + + render: function render() { + + var styles = this.getStyles(); + styles = this.mergeAndPrefix(styles.root, this.props.active && !this.props.disabled && styles.rootWhenHovered, { + position: 'relative' + }, this.props.style); + + var iconCustomArrowDropRight = { + marginRight: this.getSpacing().desktopGutterMini * -1, + color: this.context.muiTheme.component.dropDownMenu.accentColor + }; + + var _props = this.props; + var index = _props.index; + var menuItemStyle = _props.menuItemStyle; + + var other = _objectWithoutProperties(_props, ['index', 'menuItemStyle']); + + return React.createElement( + 'div', + { + ref: 'root', + style: styles, + onMouseEnter: this._openNestedMenu, + onMouseLeave: this._closeNestedMenu, + onMouseOver: this._handleMouseOver, + onMouseOut: this._handleMouseOut }, + React.createElement( + MenuItem, + { + index: index, + style: menuItemStyle, + disabled: this.props.disabled, + iconRightStyle: iconCustomArrowDropRight, + iconRightClassName: 'muidocs-icon-custom-arrow-drop-right', + onTouchTap: this._onParentItemTap }, + this.props.text + ), + React.createElement(Menu, _extends({}, other, { + ref: 'nestedMenu', + menuItems: this.props.menuItems, + menuItemStyle: menuItemStyle, + onItemTap: this._onMenuItemTap, + hideable: true, + visible: this.state.open, + onRequestClose: this._closeNestedMenu, + zDepth: this.props.zDepth + 1 })) + ); + }, + + toggleNestedMenu: function toggleNestedMenu() { + if (!this.props.disabled) this.setState({ open: !this.state.open }); + }, + + isOpen: function isOpen() { + return this.state.open; + }, + + _positionNestedMenu: function _positionNestedMenu() { + var el = React.findDOMNode(this); + var nestedMenu = React.findDOMNode(this.refs.nestedMenu); + nestedMenu.style.left = el.offsetWidth + 'px'; + }, + + _openNestedMenu: function _openNestedMenu() { + if (!this.props.disabled) this.setState({ open: true }); + }, + + _closeNestedMenu: function _closeNestedMenu() { + this.setState({ open: false }); + React.findDOMNode(this).focus(); + }, + + _onParentItemTap: function _onParentItemTap() { + this.toggleNestedMenu(); + }, + + _onMenuItemTap: function _onMenuItemTap(e, index, menuItem) { + if (this.props.onItemTap) this.props.onItemTap(e, index, menuItem); + this._closeNestedMenu(); + }, + _handleMouseOver: function _handleMouseOver(e) { + if (!this.props.disabled && this.props.onMouseOver) this.props.onMouseOver(e, this.props.index); + }, + + _handleMouseOut: function _handleMouseOut(e) { + if (!this.props.disabled && this.props.onMouseOut) this.props.onMouseOut(e, this.props.index); + } + +}); + +/**************** +* Menu Component +****************/ +var Menu = React.createClass({ + displayName: 'Menu', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + autoWidth: React.PropTypes.bool, + onItemTap: React.PropTypes.func, + onToggle: React.PropTypes.func, + onRequestClose: React.PropTypes.func, + menuItems: React.PropTypes.array.isRequired, + selectedIndex: React.PropTypes.number, + hideable: React.PropTypes.bool, + visible: React.PropTypes.bool, + zDepth: React.PropTypes.number, + menuItemStyle: React.PropTypes.object, + menuItemStyleSubheader: React.PropTypes.object, + menuItemStyleLink: React.PropTypes.object, + menuItemClassName: React.PropTypes.string, + menuItemClassNameSubheader: React.PropTypes.string, + menuItemClassNameLink: React.PropTypes.string + }, + + getInitialState: function getInitialState() { + return { + nestedMenuShown: false, + activeIndex: 0 + }; + }, + + getDefaultProps: function getDefaultProps() { + return { + autoWidth: true, + hideable: false, + visible: true, + zDepth: 1, + onRequestClose: function onRequestClose() {} + }; + }, + + componentDidMount: function componentDidMount() { + var el = React.findDOMNode(this); + + //Set the menu width + this._setKeyWidth(el); + + //Save the initial menu item height for later + this._initialMenuItemHeight = el.offsetHeight / Math.max(1, this.props.menuItems.length); + + //Show or Hide the menu according to visibility + this._renderVisibility(); + }, + + componentDidUpdate: function componentDidUpdate(prevProps) { + if (this.props.visible !== prevProps.visible) this._renderVisibility(); + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.menu; + }, + + getSpacing: function getSpacing() { + return this.context.muiTheme.spacing; + }, + + getStyles: function getStyles() { + var styles = { + root: { + backgroundColor: this.getTheme().containerBackgroundColor, + paddingTop: this.getSpacing().desktopGutterMini, + paddingBottom: this.getSpacing().desktopGutterMini, + transition: Transitions.easeOut(null, 'height'), + outline: 'none !important' + }, + subheader: { + paddingLeft: this.context.muiTheme.component.menuSubheader.padding, + paddingRight: this.context.muiTheme.component.menuSubheader.padding + }, + hideable: { + opacity: this.props.visible ? 1 : 0, + overflow: 'hidden', + position: 'absolute', + top: 0, + zIndex: 1 + } + }; + return styles; + }, + + render: function render() { + var styles = this.getStyles(); + return React.createElement( + Paper, + { + ref: 'paperContainer', + tabIndex: '0', + onKeyDown: this._onKeyDown, + zDepth: this.props.zDepth, + style: this.mergeAndPrefix(styles.root, this.props.hideable && styles.hideable, this.props.style) }, + this._getChildren() + ); + }, + + _getChildren: function _getChildren() { + var menuItem, itemComponent, isSelected, isDisabled; + + var styles = this.getStyles(); + + this._children = []; + //This array is used to keep track of all nested menu refs + this._nestedChildren = []; + + for (var i = 0; i < this.props.menuItems.length; i++) { + menuItem = this.props.menuItems[i]; + isSelected = i === this.props.selectedIndex; + isDisabled = menuItem.disabled === undefined ? false : menuItem.disabled; + + var icon = menuItem.icon; + var data = menuItem.data; + var attribute = menuItem.attribute; + var number = menuItem.number; + var toggle = menuItem.toggle; + var onTouchTap = menuItem.onTouchTap; + + var other = _objectWithoutProperties(menuItem, ['icon', 'data', 'attribute', 'number', 'toggle', 'onTouchTap']); + + switch (menuItem.type) { + + case MenuItem.Types.LINK: + itemComponent = React.createElement(LinkMenuItem, { + key: i, + index: i, + active: this.state.activeIndex == i, + text: menuItem.text, + disabled: isDisabled, + className: this.props.menuItemClassNameLink, + style: this.props.menuItemStyleLink, + payload: menuItem.payload, + target: menuItem.target }); + break; + + case MenuItem.Types.SUBHEADER: + itemComponent = React.createElement(SubheaderMenuItem, { + key: i, + index: i, + className: this.props.menuItemClassNameSubheader, + style: this.mergeAndPrefix(styles.subheader), + firstChild: i === 0, + text: menuItem.text }); + break; + + case MenuItem.Types.NESTED: + var _props2 = this.props, + ref = _props2.ref, + key = _props2.key, + index = _props2.index, + zDepth = _props2.zDepth, + other = _objectWithoutProperties(_props2, ['ref', 'key', 'index', 'zDepth']); + + itemComponent = React.createElement(NestedMenuItem, _extends({}, other, { + ref: i, + key: i, + index: i, + nested: true, + active: this.state.activeIndex == i, + text: menuItem.text, + disabled: isDisabled, + menuItems: menuItem.items, + menuItemStyle: this.props.menuItemStyle, + zDepth: this.props.zDepth, + onMouseOver: this._onItemActivated, + onMouseOut: this._onItemDeactivated, + onItemTap: this._onNestedItemTap })); + this._nestedChildren.push(i); + break; + + default: + itemComponent = React.createElement( + MenuItem, + _extends({}, other, { + selected: isSelected, + key: i, + index: i, + active: this.state.activeIndex == i, + icon: menuItem.icon, + data: menuItem.data, + className: this.props.menuItemClassName, + style: this.props.menuItemStyle, + attribute: menuItem.attribute, + number: menuItem.number, + toggle: menuItem.toggle, + onToggle: this.props.onToggle, + disabled: isDisabled, + onTouchTap: this._onItemTap, + onMouseOver: this._onItemActivated, + onMouseOut: this._onItemDeactivated + }), + menuItem.text + ); + } + this._children.push(itemComponent); + } + + return this._children; + }, + + _setKeyWidth: function _setKeyWidth(el) { + var menuWidth = this.props.autoWidth ? KeyLine.getIncrementalDim(el.offsetWidth) + 'px' : '100%'; + + //Update the menu width + Dom.withoutTransition(el, function () { + el.style.width = menuWidth; + }); + }, + + _getCurrentHeight: function _getCurrentHeight() { + var totalItens = Math.max(1, this.props.menuItems.length); + var newHeight = this._initialMenuItemHeight * totalItens; + + return newHeight; + }, + + _renderVisibility: function _renderVisibility() { + var el; + + if (this.props.hideable) { + el = React.findDOMNode(this); + var container = React.findDOMNode(this.refs.paperContainer); + + if (this.props.visible) { + //Open the menu + el.style.transition = Transitions.easeOut(); + el.style.height = this._getCurrentHeight() + 'px'; + + //Set the overflow to visible after the animation is done so + //that other nested menus can be shown + CssEvent.onTransitionEnd(el, (function () { + //Make sure the menu is open before setting the overflow. + //This is to accout for fast clicks + if (this.props.visible) container.style.overflow = 'visible'; + el.focus(); + }).bind(this)); + } else { + + //Close the menu + el.style.height = '0px'; + + //Set the overflow to hidden so that animation works properly + container.style.overflow = 'hidden'; + } + } + }, + + _onNestedItemTap: function _onNestedItemTap(e, index, menuItem) { + if (this.props.onItemTap) this.props.onItemTap(e, index, menuItem); + }, + + _onItemTap: function _onItemTap(e, index) { + if (this.props.onItemTap) this.props.onItemTap(e, index, this.props.menuItems[index]); + }, + + _onItemToggle: function _onItemToggle(e, index, toggled) { + if (this.props.onItemToggle) this.props.onItemToggle(e, index, this.props.menuItems[index], toggled); + }, + _onItemActivated: function _onItemActivated(e, index) { + this.setState({ activeIndex: index }); + }, + _onItemDeactivated: function _onItemDeactivated(e, index) { + if (this.state.activeKey == index) this.setState({ activeIndex: 0 }); + }, + + _onKeyDown: function _onKeyDown(e) { + if (!(this.state.open || this.props.visible)) return; + + var nested = this._children[this.state.activeIndex]; + if (nested && nested.props.nested && this.refs[this.state.activeIndex].isOpen()) return; + + switch (e.which) { + case KeyCode.UP: + this._activatePreviousItem(); + break; + case KeyCode.DOWN: + this._activateNextItem(); + break; + case KeyCode.RIGHT: + this._tryToggleNested(this.state.activeIndex); + break; + case KeyCode.LEFT: + this._close(); + break; + case KeyCode.ESC: + this._close(); + break; + case KeyCode.TAB: + this._close(); + return; // so the tab key can propagate + case KeyCode.ENTER: + case KeyCode.SPACE: + e.stopPropagation(); // needs called before the close + this._triggerSelection(e); + break; + default: + return; //important + } + e.preventDefault(); + e.stopPropagation(); + }, + + _activatePreviousItem: function _activatePreviousItem() { + var active = this.state.activeIndex || 0; + active = Math.max(active - 1, 0); + this.setState({ activeIndex: active }); + }, + + _activateNextItem: function _activateNextItem() { + var active = this.state.activeIndex || 0; + active = Math.min(active + 1, this._children.length - 1); + this.setState({ activeIndex: active }); + }, + + _triggerSelection: function _triggerSelection(e) { + var index = this.state.activeIndex || 0; + this._onItemTap(e, index); + }, + + _close: function _close() { + this.props.onRequestClose(); + }, + + _tryToggleNested: function _tryToggleNested(index) { + var item = this.refs[index]; + var toggleMenu = item.toggleNestedMenu; + if (item && item.toggleNestedMenu) item.toggleNestedMenu(); + } + +}); + +module.exports = Menu; +},{"../mixins/click-awayable":102,"../mixins/style-propable":103,"../mixins/window-listenable":105,"../paper":107,"../styles/transitions":124,"../utils/css-event":167,"../utils/dom":169,"../utils/key-code":172,"../utils/key-line":173,"./link-menu-item":97,"./menu-item":98,"./subheader-menu-item":100,"react":357}],100:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var Typography = require('../styles/typography'); + +var SubheaderMenuItem = React.createClass({ + displayName: 'SubheaderMenuItem', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + index: React.PropTypes.number.isRequired, + text: React.PropTypes.string.isRequired, + firstChild: React.PropTypes.bool, + className: React.PropTypes.string + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.menuSubheader; + }, + + getSpacing: function getSpacing() { + return this.context.muiTheme.spacing; + }, + + getStyles: function getStyles() { + var gutterMini = this.getSpacing().desktopGutterMini; + var subheaderHeight = this.getSpacing().desktopSubheaderHeight; + var styles = { + root: { + boxSizing: 'border-box', + fontSize: '13px', + letterSpacing: 0, + fontWeight: Typography.fontWeightMedium, + margin: 0, + height: subheaderHeight + gutterMini, + lineHeight: subheaderHeight + 'px', + color: this.getTheme().textColor, + borderTop: 'solid 1px ' + this.getTheme().borderColor, + paddingTop: gutterMini, + marginTop: gutterMini + }, + rootWhenFirstChild: { + height: subheaderHeight, + borderTop: 'none', + paddingTop: 0, + marginTop: 0 + } + }; + return styles; + }, + + render: function render() { + return React.createElement( + 'div', + { + key: this.props.index, + className: this.props.className, + style: this.mergeAndPrefix(this.getStyles().root, this.props.firstChild && this.getStyles().rootWhenFirstChild, this.props.style) }, + this.props.text + ); + } + +}); + +module.exports = SubheaderMenuItem; +},{"../mixins/style-propable":103,"../styles/typography":125,"react":357}],101:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var classNames = require('classnames'); + +module.exports = { + + propTypes: { + className: React.PropTypes.string + }, + + getDefaultProps: function getDefaultProps() { + return { + className: '' + }; + }, + + getClasses: function getClasses(initialClasses, additionalClassObj) { + var classString = ''; + + //Initialize the classString with the classNames that were passed in + if (this.props.className.length) classString += ' ' + this.props.className; + + //Add in initial classes + if (typeof initialClasses === 'object') { + classString += ' ' + classNames(initialClasses); + } else { + classString += ' ' + initialClasses; + } + + //Add in additional classes + if (additionalClassObj) classString += ' ' + classNames(additionalClassObj); + + //Convert the class string into an object and run it through the class set + return classNames(this.getClassSet(classString)); + }, + + getClassSet: function getClassSet(classString) { + var classObj = {}; + + if (classString) { + classString.split(' ').forEach(function (className) { + if (className) classObj[className] = true; + }); + } + + return classObj; + } + +}; +},{"classnames":176,"react":357}],102:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var Events = require('../utils/events'); +var Dom = require('../utils/dom'); + +module.exports = { + + //When the component mounts, listen to click events and check if we need to + //Call the componentClickAway function. + componentDidMount: function componentDidMount() { + if (!this.manuallyBindClickAway) this._bindClickAway(); + }, + + componentWillUnmount: function componentWillUnmount() { + this._unbindClickAway(); + }, + + _checkClickAway: function _checkClickAway(e) { + var el = React.findDOMNode(this); + + // Check if the target is inside the current component + if (e.target != el && !Dom.isDescendant(el, e.target) && document.documentElement.contains(e.target)) { + if (this.componentClickAway) this.componentClickAway(); + } + }, + + _bindClickAway: function _bindClickAway() { + // On touch-enabled devices, both events fire, and the handler is called twice, + // but it's fine since all operations for which the mixin is used + // are idempotent. + Events.on(document, 'mouseup', this._checkClickAway); + Events.on(document, 'touchend', this._checkClickAway); + }, + + _unbindClickAway: function _unbindClickAway() { + Events.off(document, 'mouseup', this._checkClickAway); + Events.off(document, 'touchend', this._checkClickAway); + } + +}; +},{"../utils/dom":169,"../utils/events":170,"react":357}],103:[function(require,module,exports){ +'use strict'; + +var React = require('react/addons'); +var AutoPrefix = require('../styles/auto-prefix'); +var Extend = require('../utils/extend'); + +/** + * @params: + * styles = Current styles. + * props = New style properties that will override the current style. + */ +module.exports = { + + propTypes: { + style: React.PropTypes.object + }, + + mergeStyles: function mergeStyles() { + var args = Array.prototype.slice.call(arguments, 0); + var base = args[0]; + for (var i = 1; i < args.length; i++) { + if (args[i]) base = Extend(base, args[i]); + } + return base; + }, + + /** + * loops through all properties defined in the first argument, so overrides + * of undefined properties will not take place. + */ + mergeAndPrefix: function mergeAndPrefix() { + var mergedStyles = this.mergeStyles.apply(this, arguments); + return AutoPrefix.all(mergedStyles); + } +}; +},{"../styles/auto-prefix":117,"../utils/extend":171,"react/addons":185}],104:[function(require,module,exports){ +'use strict'; + +var Events = require('../utils/events'); + +var Sizes = { + SMALL: 1, + MEDIUM: 2, + LARGE: 3 +}; + +module.exports = { + + statics: { + Sizes: Sizes + }, + + getInitialState: function getInitialState() { + return { + deviceSize: Sizes.SMALL + }; + }, + + componentDidMount: function componentDidMount() { + this._updateDeviceSize(); + if (!this.manuallyBindResize) this._bindResize(); + }, + + componentWillUnmount: function componentWillUnmount() { + this._unbindResize(); + }, + + isDeviceSize: function isDeviceSize(desiredSize) { + return this.state.deviceSize >= desiredSize; + }, + + _updateDeviceSize: function _updateDeviceSize() { + var width = window.innerWidth; + if (width >= 992) this.setState({ deviceSize: Sizes.LARGE });else if (width >= 768) this.setState({ deviceSize: Sizes.MEDIUM });else this.setState({ deviceSize: Sizes.SMALL }); // width >= 375 + }, + + _bindResize: function _bindResize() { + Events.on(window, 'resize', this._updateDeviceSize); + }, + + _unbindResize: function _unbindResize() { + Events.off(window, 'resize', this._updateDeviceSize); + } +}; +},{"../utils/events":170}],105:[function(require,module,exports){ +'use strict'; + +var Events = require('../utils/events'); + +module.exports = { + + componentDidMount: function componentDidMount() { + var listeners = this.windowListeners; + + for (var eventName in listeners) { + var callbackName = listeners[eventName]; + Events.on(window, eventName, this[callbackName]); + } + }, + + componentWillUnmount: function componentWillUnmount() { + var listeners = this.windowListeners; + + for (var eventName in listeners) { + var callbackName = listeners[eventName]; + Events.off(window, eventName, this[callbackName]); + } + } + +}; +},{"../utils/events":170}],106:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var Colors = require('./styles/colors'); + +var Overlay = React.createClass({ + displayName: 'Overlay', + + mixins: [StylePropable], + + propTypes: { + show: React.PropTypes.bool, + autoLockScrolling: React.PropTypes.bool, + transitionEnabled: React.PropTypes.bool + }, + + getDefaultProps: function getDefaultProps() { + return { + autoLockScrolling: true, + transitionEnabled: true + }; + }, + + componentDidUpdate: function componentDidUpdate() { + if (this.props.autoLockScrolling) this.props.show ? this._preventScrolling() : this._allowScrolling(); + }, + + setOpacity: function setOpacity(opacity) { + var overlay = React.findDOMNode(this); + overlay.style.opacity = opacity; + }, + + getStyles: function getStyles() { + var styles = { + root: { + position: 'fixed', + height: '100%', + width: '100%', + zIndex: 9, + top: 0, + left: '-100%', + opacity: 0, + backgroundColor: Colors.lightBlack, + WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)', + + // Two ways to promote overlay to its own render layer + willChange: 'opacity', + transform: 'translateZ(0)', + + transition: this.props.transitionEnabled && Transitions.easeOut('0ms', 'left', '400ms') + ',' + Transitions.easeOut('400ms', 'opacity') + }, + rootWhenShown: { + left: '0', + opacity: 1, + transition: this.props.transitionEnabled && Transitions.easeOut('0ms', 'left') + ',' + Transitions.easeOut('400ms', 'opacity') + } + }; + return styles; + }, + + render: function render() { + var _props = this.props; + var show = _props.show; + var style = _props.style; + + var other = _objectWithoutProperties(_props, ['show', 'style']); + + var styles = this.mergeAndPrefix(this.getStyles().root, this.props.style, this.props.show && this.getStyles().rootWhenShown); + + return React.createElement('div', _extends({}, other, { style: styles })); + }, + + preventScrolling: function preventScrolling() { + if (!this.props.autoLockScrolling) this._preventScrolling(); + }, + + allowScrolling: function allowScrolling() { + if (!this.props.autoLockScrolling) this._allowScrolling(); + }, + + _preventScrolling: function _preventScrolling() { + var body = document.getElementsByTagName('body')[0]; + body.style.overflow = 'hidden'; + }, + + _allowScrolling: function _allowScrolling() { + var body = document.getElementsByTagName('body')[0]; + body.style.overflow = ''; + } + +}); + +module.exports = Overlay; +},{"./mixins/style-propable":103,"./styles/colors":118,"./styles/transitions":124,"react":357}],107:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var Paper = React.createClass({ + displayName: 'Paper', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + circle: React.PropTypes.bool, + rounded: React.PropTypes.bool, + zDepth: React.PropTypes.oneOf([0, 1, 2, 3, 4, 5]), + transitionEnabled: React.PropTypes.bool + }, + + getDefaultProps: function getDefaultProps() { + return { + rounded: true, + zDepth: 1, + transitionEnabled: true + }; + }, + + getStyles: function getStyles() { + var styles = { + root: { + backgroundColor: this.context.muiTheme.component.paper.backgroundColor, + transition: this.props.transitionEnabled && Transitions.easeOut(), + boxSizing: 'border-box', + fontFamily: this.context.muiTheme.contentFontFamily, + WebkitTapHighlightColor: 'rgba(0,0,0,0)', + boxShadow: this._getZDepthShadows(this.props.zDepth), + borderRadius: this.props.circle ? '50%' : this.props.rounded ? '2px' : '0px' + } + }; + return styles; + }, + + render: function render() { + var _props = this.props; + var style = _props.style; + var circle = _props.circle; + var rounded = _props.rounded; + var zDepth = _props.zDepth; + + var other = _objectWithoutProperties(_props, ['style', 'circle', 'rounded', 'zDepth']); + + var styles = this.getStyles(); + + return React.createElement( + 'div', + _extends({}, other, { style: this.mergeAndPrefix(styles.root, this.props.style) }), + this.props.children + ); + }, + + _getZDepthShadows: function _getZDepthShadows(zDepth) { + var shadows = ['', '0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24)', '0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23)', '0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23)', '0 14px 45px rgba(0, 0, 0, 0.25), 0 10px 18px rgba(0, 0, 0, 0.22)', '0 19px 60px rgba(0, 0, 0, 0.30), 0 15px 20px rgba(0, 0, 0, 0.22)']; + + return shadows[zDepth]; + } + +}); + +module.exports = Paper; +},{"./mixins/style-propable":103,"./styles/transitions":124,"react":357}],108:[function(require,module,exports){ +(function (process){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var RadioButton = require('./radio-button'); + +var RadioButtonGroup = React.createClass({ + displayName: 'RadioButtonGroup', + + propTypes: { + name: React.PropTypes.string.isRequired, + valueSelected: React.PropTypes.string, + defaultSelected: React.PropTypes.string, + labelPosition: React.PropTypes.oneOf(['left', 'right']), + onChange: React.PropTypes.func + }, + + _hasCheckAttribute: function _hasCheckAttribute(radioButton) { + return radioButton.props.hasOwnProperty('checked') && radioButton.props.checked; + }, + + getInitialState: function getInitialState() { + return { + numberCheckedRadioButtons: 0, + selected: this.props.valueSelected || this.props.defaultSelected || '' + }; + }, + + componentWillMount: function componentWillMount() { + var cnt = 0; + + React.Children.forEach(this.props.children, function (option) { + if (this._hasCheckAttribute(option)) cnt++; + }, this); + + this.setState({ numberCheckedRadioButtons: cnt }); + }, + + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + if (nextProps.hasOwnProperty('valueSelected')) { + this.setState({ selected: nextProps.valueSelected }); + } + }, + + render: function render() { + + var options = React.Children.map(this.props.children, function (option) { + var _option$props = option.props; + var name = _option$props.name; + var value = _option$props.value; + var label = _option$props.label; + var onCheck = _option$props.onCheck; + + var other = _objectWithoutProperties(_option$props, ['name', 'value', 'label', 'onCheck']); + + return React.createElement(RadioButton, _extends({}, other, { + ref: option.props.value, + name: this.props.name, + key: option.props.value, + value: option.props.value, + label: option.props.label, + labelPosition: this.props.labelPosition, + onCheck: this._onChange, + checked: option.props.value == this.state.selected })); + }, this); + + return React.createElement( + 'div', + { + style: this.props.style, + className: this.props.className || '' }, + options + ); + }, + + _updateRadioButtons: function _updateRadioButtons(newSelection) { + if (this.state.numberCheckedRadioButtons === 0) { + this.setState({ selected: newSelection }); + } else if (process.env.NODE_ENV !== 'production') { + var message = 'Cannot select a different radio button while another radio button ' + 'has the \'checked\' property set to true.'; + console.error(message); + } + }, + + _onChange: function _onChange(e, newSelection) { + this._updateRadioButtons(newSelection); + + // Successful update + if (this.state.numberCheckedRadioButtons === 0) { + if (this.props.onChange) this.props.onChange(e, newSelection); + } + }, + + getSelectedValue: function getSelectedValue() { + return this.state.selected; + }, + + setSelectedValue: function setSelectedValue(newSelectionValue) { + this._updateRadioButtons(newSelectionValue); + }, + + clearValue: function clearValue() { + this.setSelectedValue(''); + } + +}); + +module.exports = RadioButtonGroup; +}).call(this,require('_process')) + +},{"./radio-button":109,"_process":7,"react":357}],109:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var EnhancedSwitch = require('./enhanced-switch'); +var RadioButtonOff = require('./svg-icons/toggle-radio-button-off'); +var RadioButtonOn = require('./svg-icons/toggle-radio-button-on'); + +var RadioButton = React.createClass({ + displayName: 'RadioButton', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + iconStyle: React.PropTypes.object, + labelStyle: React.PropTypes.object, + onCheck: React.PropTypes.func + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.radioButton; + }, + + getStyles: function getStyles() { + var styles = { + icon: { + height: this.getTheme().size, + width: this.getTheme().size + }, + target: { + transition: Transitions.easeOut(), + position: 'absolute', + opacity: 1, + transform: 'scale(1)', + fill: this.getTheme().borderColor + }, + fill: { + position: 'absolute', + opacity: 1, + transform: 'scale(0)', + transformOrigin: '50% 50%', + transition: Transitions.easeOut(), + fill: this.getTheme().checkedColor + }, + targetWhenChecked: { + opacity: 0, + transform: 'scale(0)' + }, + fillWhenChecked: { + opacity: 1, + transform: 'scale(1)' + }, + targetWhenDisabled: { + fill: this.getTheme().disabledColor + }, + fillWhenDisabled: { + fill: this.getTheme().disabledColor + }, + label: { + color: this.props.disabled ? this.getTheme().labelDisabledColor : this.getTheme().labelColor + } + }; + return styles; + }, + + render: function render() { + var _props = this.props; + var onCheck = _props.onCheck; + + var other = _objectWithoutProperties(_props, ['onCheck']); + + var styles = this.getStyles(); + var onStyles = this.mergeAndPrefix(styles.target, this.props.checked && styles.targetWhenChecked, this.props.iconStyle, this.props.disabled && styles.targetWhenDisabled); + var offStyles = this.mergeAndPrefix(styles.fill, this.props.checked && styles.fillWhenChecked, this.props.iconStyle, this.props.disabled && styles.fillWhenDisabled); + + var radioButtonElement = React.createElement( + 'div', + null, + React.createElement(RadioButtonOff, { style: onStyles }), + React.createElement(RadioButtonOn, { style: offStyles }) + ); + + var rippleColor = this.props.checked ? this.getTheme().checkedColor : this.getTheme().borderColor; + + var iconStyle = this.mergeAndPrefix(styles.icon, this.props.iconStyle); + + var labelStyle = this.mergeAndPrefix(styles.label, this.props.labelStyle); + + var enhancedSwitchProps = { + ref: 'enhancedSwitch', + inputType: 'radio', + switched: this.props.checked || false, + switchElement: radioButtonElement, + rippleColor: rippleColor, + iconStyle: iconStyle, + labelStyle: labelStyle, + onSwitch: this._handleCheck, + onParentShouldUpdate: this._handleStateChange, + labelPosition: this.props.labelPosition ? this.props.labelPosition : 'right' + }; + + return React.createElement(EnhancedSwitch, _extends({}, other, enhancedSwitchProps)); + }, + + // Only called when selected, not when unselected. + _handleCheck: function _handleCheck(e) { + if (this.props.onCheck) this.props.onCheck(e, this.props.value); + }, + + _handleStateChange: function _handleStateChange() {}, + + isChecked: function isChecked() { + return this.refs.enhancedSwitch.isSwitched(); + }, + + // Use RadioButtonGroup.setSelectedValue(newSelectionValue) to set a + // RadioButton's checked value. + setChecked: function setChecked(newCheckedValue) { + this.refs.enhancedSwitch.setSwitched(newCheckedValue); + }, + + getValue: function getValue() { + return this.refs.enhancedSwitch.getValue(); + } + +}); + +module.exports = RadioButton; +},{"./enhanced-switch":84,"./mixins/style-propable":103,"./styles/transitions":124,"./svg-icons/toggle-radio-button-off":135,"./svg-icons/toggle-radio-button-on":136,"react":357}],110:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var ColorManipulator = require('./utils/color-manipulator'); +var Typography = require('./styles/typography'); +var EnhancedButton = require('./enhanced-button'); +var Paper = require('./paper'); + +var RaisedButton = React.createClass({ + displayName: 'RaisedButton', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + className: React.PropTypes.string, + disabled: React.PropTypes.bool, + label: function label(props, propName, componentName) { + if (!props.children && !props.label) { + return new Error('Warning: Required prop `label` or `children` was not specified in `' + componentName + '`.'); + } + }, + onMouseDown: React.PropTypes.func, + onMouseUp: React.PropTypes.func, + onMouseOut: React.PropTypes.func, + onTouchEnd: React.PropTypes.func, + onTouchStart: React.PropTypes.func, + primary: React.PropTypes.bool, + secondary: React.PropTypes.bool, + labelStyle: React.PropTypes.object + }, + + getInitialState: function getInitialState() { + var zDepth = this.props.disabled ? 0 : 1; + return { + zDepth: zDepth, + initialZDepth: zDepth, + hovered: false + }; + }, + + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + var zDepth = nextProps.disabled ? 0 : 1; + this.setState({ + zDepth: zDepth, + initialZDepth: zDepth + }); + }, + + _getBackgroundColor: function _getBackgroundColor() { + return this.props.disabled ? this.getTheme().disabledColor : this.props.primary ? this.getTheme().primaryColor : this.props.secondary ? this.getTheme().secondaryColor : this.getTheme().color; + }, + + _getLabelColor: function _getLabelColor() { + return this.props.disabled ? this.getTheme().disabledTextColor : this.props.primary ? this.getTheme().primaryTextColor : this.props.secondary ? this.getTheme().secondaryTextColor : this.getTheme().textColor; + }, + + getThemeButton: function getThemeButton() { + return this.context.muiTheme.component.button; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.raisedButton; + }, + + getStyles: function getStyles() { + var amount = this.props.primary || this.props.secondary ? 0.4 : 0.08; + var styles = { + root: { + display: 'inline-block', + minWidth: this.getThemeButton().minWidth, + height: this.getThemeButton().height, + transition: Transitions.easeOut() + }, + container: { + position: 'relative', + height: '100%', + width: '100%', + padding: 0, + overflow: 'hidden', + borderRadius: 2, + transition: Transitions.easeOut(), + backgroundColor: this._getBackgroundColor(), + + //This is need so that ripples do not bleed + //past border radius. + //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil + transform: 'translate3d(0, 0, 0)' + }, + label: { + position: 'relative', + opacity: 1, + fontSize: '14px', + letterSpacing: 0, + textTransform: 'uppercase', + fontWeight: Typography.fontWeightMedium, + margin: 0, + padding: '0px ' + this.context.muiTheme.spacing.desktopGutterLess + 'px', + userSelect: 'none', + lineHeight: this.getThemeButton().height + 'px', + color: this._getLabelColor() + }, + overlay: { + transition: Transitions.easeOut(), + top: 0 + }, + overlayWhenHovered: { + backgroundColor: ColorManipulator.fade(this._getLabelColor(), amount) + } + }; + return styles; + }, + + render: function render() { + var _props = this.props; + var disabled = _props.disabled; + var label = _props.label; + var primary = _props.primary; + var secondary = _props.secondary; + + var other = _objectWithoutProperties(_props, ['disabled', 'label', 'primary', 'secondary']); + + var styles = this.getStyles(); + + var labelElement; + if (label) { + labelElement = React.createElement( + 'span', + { style: this.mergeAndPrefix(styles.label, this.props.labelStyle) }, + label + ); + } + + var rippleColor = styles.label.color; + var rippleOpacity = !(primary || secondary) ? 0.1 : 0.16; + + var buttonEventHandlers = disabled ? null : { + onMouseDown: this._handleMouseDown, + onMouseUp: this._handleMouseUp, + onMouseOut: this._handleMouseOut, + onMouseOver: this._handleMouseOver, + onTouchStart: this._handleTouchStart, + onTouchEnd: this._handleTouchEnd, + onKeyboardFocus: this._handleKeyboardFocus + }; + + return React.createElement( + Paper, + { + style: this.mergeAndPrefix(styles.root, this.props.style), + zDepth: this.state.zDepth }, + React.createElement( + EnhancedButton, + _extends({}, other, buttonEventHandlers, { + ref: 'container', + disabled: disabled, + style: this.mergeAndPrefix(styles.container), + focusRippleColor: rippleColor, + touchRippleColor: rippleColor, + focusRippleOpacity: rippleOpacity, + touchRippleOpacity: rippleOpacity }), + React.createElement( + 'div', + { ref: 'overlay', style: this.mergeAndPrefix(styles.overlay, this.state.hovered && !this.props.disabled && styles.overlayWhenHovered) }, + labelElement, + this.props.children + ) + ) + ); + }, + + _handleMouseDown: function _handleMouseDown(e) { + //only listen to left clicks + if (e.button === 0) { + this.setState({ zDepth: this.state.initialZDepth + 1 }); + } + if (this.props.onMouseDown) this.props.onMouseDown(e); + }, + + _handleMouseUp: function _handleMouseUp(e) { + this.setState({ zDepth: this.state.initialZDepth }); + if (this.props.onMouseUp) this.props.onMouseUp(e); + }, + + _handleMouseOut: function _handleMouseOut(e) { + if (!this.refs.container.isKeyboardFocused()) this.setState({ zDepth: this.state.initialZDepth, hovered: false }); + if (this.props.onMouseOut) this.props.onMouseOut(e); + }, + + _handleMouseOver: function _handleMouseOver(e) { + if (!this.refs.container.isKeyboardFocused()) this.setState({ hovered: true }); + if (this.props.onMouseOver) this.props.onMouseOver(e); + }, + + _handleTouchStart: function _handleTouchStart(e) { + this.setState({ zDepth: this.state.initialZDepth + 1 }); + if (this.props.onTouchStart) this.props.onTouchStart(e); + }, + + _handleTouchEnd: function _handleTouchEnd(e) { + this.setState({ zDepth: this.state.initialZDepth }); + if (this.props.onTouchEnd) this.props.onTouchEnd(e); + }, + + _handleKeyboardFocus: function _handleKeyboardFocus(e, keyboardFocused) { + if (keyboardFocused && !this.props.disabled) { + this.setState({ zDepth: this.state.initialZDepth + 1 }); + var amount = this.props.primary || this.props.secondary ? 0.4 : 0.08; + React.findDOMNode(this.refs.overlay).style.backgroundColor = ColorManipulator.fade(this.mergeAndPrefix(this.getStyles().label, this.props.labelStyle).color, amount); + } else if (!this.state.hovered) { + this.setState({ zDepth: this.state.initialZDepth }); + React.findDOMNode(this.refs.overlay).style.backgroundColor = 'transparent'; + } + } +}); + +module.exports = RaisedButton; +},{"./enhanced-button":83,"./mixins/style-propable":103,"./paper":107,"./styles/transitions":124,"./styles/typography":125,"./utils/color-manipulator":166,"react":357}],111:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var Transitions = require('../styles/transitions'); +var Colors = require('../styles/colors'); + +var RippleCircle = React.createClass({ + displayName: 'RippleCircle', + + mixins: [StylePropable], + + propTypes: { + color: React.PropTypes.string, + opacity: React.PropTypes.number, + started: React.PropTypes.bool, + ending: React.PropTypes.bool + }, + + getDefaultProps: function getDefaultProps() { + return { + color: Colors.darkBlack + }; + }, + + render: function render() { + var _props = this.props; + var color = _props.color; + var started = _props.started; + var ending = _props.ending; + var style = _props.style; + + var other = _objectWithoutProperties(_props, ['color', 'started', 'ending', 'style']); + + var styles = this.mergeAndPrefix({ + position: 'absolute', + top: 0, + left: 0, + height: '100%', + width: '100%', + opacity: this.props.ending ? 0 : this.props.opacity ? this.props.opacity : 0.16, + borderRadius: '50%', + transform: this.props.started ? 'scale(1)' : 'scale(0)', + backgroundColor: this.props.color, + transition: Transitions.easeOut('2s', 'opacity') + ',' + Transitions.easeOut('1s', 'transform') + }, this.props.style); + + return React.createElement('div', _extends({}, other, { style: styles })); + } + +}); + +module.exports = RippleCircle; +},{"../mixins/style-propable":103,"../styles/colors":118,"../styles/transitions":124,"react":357}],112:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var Transitions = require('../styles/transitions'); +var Colors = require('../styles/colors'); +var AutoPrefix = require('../styles/auto-prefix'); + +var pulsateDuration = 750; + +var FocusRipple = React.createClass({ + displayName: 'FocusRipple', + + mixins: [StylePropable], + + propTypes: { + color: React.PropTypes.string, + opacity: React.PropTypes.number, + show: React.PropTypes.bool, + innerStyle: React.PropTypes.object + }, + + getDefaultProps: function getDefaultProps() { + return { + color: Colors.darkBlack + }; + }, + + componentDidMount: function componentDidMount() { + this._setRippleSize(); + this._pulsate(); + }, + + render: function render() { + + var outerStyles = this.mergeAndPrefix({ + height: '100%', + width: '100%', + position: 'absolute', + top: 0, + left: 0, + transition: Transitions.easeOut(), + transform: this.props.show ? 'scale(1)' : 'scale(0)', + opacity: this.props.show ? 1 : 0 + }, this.props.style); + + var innerStyles = this.mergeAndPrefix({ + position: 'absolute', + height: '100%', + width: '100%', + borderRadius: '50%', + opacity: this.props.opacity ? this.props.opacity : 0.16, + backgroundColor: this.props.color, + transition: Transitions.easeOut(pulsateDuration + 'ms', null, null, Transitions.easeInOutFunction) + }, this.props.innerStyle); + + return React.createElement( + 'div', + { style: outerStyles }, + React.createElement('div', { ref: 'innerCircle', style: innerStyles }) + ); + }, + + _pulsate: function _pulsate() { + if (!this.isMounted() || !this.props.show) return; + + var startScale = 'scale(0.75)'; + var endScale = 'scale(0.85)'; + var innerCircle = React.findDOMNode(this.refs.innerCircle); + var currentScale = innerCircle.style[AutoPrefix.single('transform')]; + var nextScale; + + currentScale = currentScale || startScale; + nextScale = currentScale === startScale ? endScale : startScale; + + innerCircle.style[AutoPrefix.single('transform')] = nextScale; + setTimeout(this._pulsate, pulsateDuration); + }, + + _setRippleSize: function _setRippleSize() { + var el = React.findDOMNode(this); + var height = el.offsetHeight; + var width = el.offsetWidth; + var size = Math.max(height, width); + + el.style.height = size + 'px'; + el.style.top = size / 2 * -1 + height / 2 + 'px'; + } + +}); + +module.exports = FocusRipple; +},{"../mixins/style-propable":103,"../styles/auto-prefix":117,"../styles/colors":118,"../styles/transitions":124,"react":357}],113:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var Dom = require('../utils/dom'); +var RippleCircle = require('./circle'); +var TouchRipple = React.createClass({ + displayName: 'TouchRipple', + + mixins: [StylePropable], + + propTypes: { + centerRipple: React.PropTypes.bool, + color: React.PropTypes.string, + opacity: React.PropTypes.number + }, + + getInitialState: function getInitialState() { + return { + ripples: [{ + key: 0, + started: false, + ending: false + }] + }; + }, + + render: function render() { + + var styles = this.mergeAndPrefix({ + height: '100%', + width: '100%', + position: 'absolute', + top: 0, + left: 0 + }, this.props.style); + + return React.createElement( + 'div', + { + onMouseUp: this._handleMouseUp, + onMouseDown: this._handleMouseDown, + onMouseOut: this._handleMouseOut, + onTouchStart: this._handleTouchStart, + onTouchEnd: this._handleTouchEnd }, + React.createElement( + 'div', + { style: styles }, + this._getRippleElements() + ), + this.props.children + ); + }, + + start: function start(e, isRippleTouchGenerated) { + var ripples = this.state.ripples; + var nextKey = ripples[ripples.length - 1].key + 1; + var style = !this.props.centerRipple ? this._getRippleStyle(e) : {}; + var ripple; + + //Do nothing if we're starting a click-event-generated ripple + //while having touch-generated ripples + if (!isRippleTouchGenerated) { + for (var i = 0; i < ripples.length; i++) { + if (ripples[i].touchGenerated) return; + } + } + + //Start the next unstarted ripple + for (var i = 0; i < ripples.length; i++) { + ripple = ripples[i]; + if (!ripple.started) { + ripple.started = true; + ripple.touchGenerated = isRippleTouchGenerated; + ripple.style = style; + break; + } + } + + //Add an unstarted ripple at the end + ripples.push({ + key: nextKey, + started: false, + ending: false + }); + + //Re-render + this.setState({ + ripples: ripples + }); + }, + + end: function end() { + var ripples = this.state.ripples; + var ripple; + var endingRipple; + + //End the the next un-ended ripple + for (var i = 0; i < ripples.length; i++) { + ripple = ripples[i]; + if (ripple.started && !ripple.ending) { + ripple.ending = true; + endingRipple = ripple; + break; + } + } + + //Only update if a ripple was found + if (endingRipple) { + //Re-render + this.setState({ + ripples: ripples + }); + + //Wait 2 seconds and remove the ripple from DOM + setTimeout((function () { + ripples.shift(); + if (this.isMounted()) { + this.setState({ + ripples: ripples + }); + } + }).bind(this), 2000); + } + }, + + _handleMouseDown: function _handleMouseDown(e) { + //only listen to left clicks + if (e.button === 0) this.start(e, false); + }, + + _handleMouseUp: function _handleMouseUp() { + this.end(); + }, + + _handleMouseOut: function _handleMouseOut() { + this.end(); + }, + + _handleTouchStart: function _handleTouchStart(e) { + this.start(e, true); + }, + + _handleTouchEnd: function _handleTouchEnd() { + this.end(); + }, + + _getRippleStyle: function _getRippleStyle(e) { + var style = {}; + var el = React.findDOMNode(this); + var elHeight = el.offsetHeight; + var elWidth = el.offsetWidth; + var offset = Dom.offset(el); + var isTouchEvent = e.touches && e.touches.length; + var pageX = isTouchEvent ? e.touches[0].pageX : e.pageX; + var pageY = isTouchEvent ? e.touches[0].pageY : e.pageY; + var pointerX = pageX - offset.left; + var pointerY = pageY - offset.top; + var topLeftDiag = this._calcDiag(pointerX, pointerY); + var topRightDiag = this._calcDiag(elWidth - pointerX, pointerY); + var botRightDiag = this._calcDiag(elWidth - pointerX, elHeight - pointerY); + var botLeftDiag = this._calcDiag(pointerX, elHeight - pointerY); + var rippleRadius = Math.max(topLeftDiag, topRightDiag, botRightDiag, botLeftDiag); + var rippleSize = rippleRadius * 2; + var left = pointerX - rippleRadius; + var top = pointerY - rippleRadius; + + style.height = rippleSize + 'px'; + style.width = rippleSize + 'px'; + style.top = top + 'px'; + style.left = left + 'px'; + + return style; + }, + + _calcDiag: function _calcDiag(a, b) { + return Math.sqrt(a * a + b * b); + }, + + _getRippleElements: function _getRippleElements() { + return this.state.ripples.map((function (ripple) { + return React.createElement(RippleCircle, { + key: ripple.key, + started: ripple.started, + ending: ripple.ending, + style: ripple.style, + color: this.props.color, + opacity: this.props.opacity }); + }).bind(this)); + } + +}); + +module.exports = TouchRipple; +},{"../mixins/style-propable":103,"../utils/dom":169,"./circle":111,"react":357}],114:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var TextField = require('./text-field'); +var DropDownMenu = require('./drop-down-menu'); + +var SelectField = React.createClass({ + displayName: 'SelectField', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + errorText: React.PropTypes.string, + floatingLabelText: React.PropTypes.string, + hintText: React.PropTypes.string, + id: React.PropTypes.string, + multiLine: React.PropTypes.bool, + onBlur: React.PropTypes.func, + onChange: React.PropTypes.func, + onFocus: React.PropTypes.func, + onKeyDown: React.PropTypes.func, + onEnterKeyDown: React.PropTypes.func, + type: React.PropTypes.string, + rows: React.PropTypes.number, + inputStyle: React.PropTypes.object, + floatingLabelStyle: React.PropTypes.object, + autoWidth: React.PropTypes.bool, + menuItems: React.PropTypes.array.isRequired, + menuItemStyle: React.PropTypes.object, + selectedIndex: React.PropTypes.number + }, + + getDefaultProps: function getDefaultProps() { + return {}; + }, + + getStyles: function getStyles() { + var styles = { + selectfield: { + root: { + height: 'auto', + position: 'relative', + width: '100%' + }, + label: { + paddingLeft: 0, + top: 4, + width: '100%' + }, + icon: { + top: 20, + right: 0 + }, + underline: { + borderTop: 'none' + } + } + }; + return styles; + }, + + onChange: function onChange(e, index, payload) { + e.target.value = payload; + if (this.props.onChange) this.props.onChange(e); + }, + + render: function render() { + var styles = this.getStyles(); + return React.createElement( + TextField, + this.props, + React.createElement(DropDownMenu, _extends({}, this.props, { + onChange: this.onChange, + style: styles.selectfield.root, + labelStyle: styles.selectfield.label, + iconStyle: styles.selectfield.icon, + underlineStyle: styles.selectfield.underline, + autoWidth: false + })) + ); + } +}); + +module.exports = SelectField; +},{"./drop-down-menu":82,"./mixins/style-propable":103,"./styles/transitions":124,"./text-field":146,"react":357}],115:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Draggable = require('react-draggable2'); +var Transitions = require('./styles/transitions.js'); +var FocusRipple = require('./ripples/focus-ripple'); + +var Slider = React.createClass({ + displayName: 'Slider', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + required: React.PropTypes.bool, + disabled: React.PropTypes.bool, + min: React.PropTypes.number, + max: React.PropTypes.number, + step: React.PropTypes.number, + error: React.PropTypes.string, + description: React.PropTypes.string, + name: React.PropTypes.string.isRequired, + onChange: React.PropTypes.func, + onFocus: React.PropTypes.func, + onBlur: React.PropTypes.func, + onDragStart: React.PropTypes.func, + onDragStop: React.PropTypes.func + }, + + getDefaultProps: function getDefaultProps() { + return { + required: true, + disabled: false, + defaultValue: 0, + step: 0.01, + min: 0, + max: 1, + dragging: false + }; + }, + + getInitialState: function getInitialState() { + var value = this.props.value; + if (value == null) value = this.props.defaultValue; + var percent = (value - this.props.min) / (this.props.max - this.props.min); + if (isNaN(percent)) percent = 0; + return { + value: value, + percent: percent, + focused: false, + active: false, + hovered: false + }; + }, + + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + if (nextProps.value != null) { + this.setValue(nextProps.value); + } + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.slider; + }, + + getStyles: function getStyles() { + var size = this.getTheme().handleSize + this.getTheme().trackSize; + var gutter = (this.getTheme().handleSizeDisabled + this.getTheme().trackSize) / 2; + var fillGutter = this.getTheme().handleSizeDisabled - this.getTheme().trackSize; + var styles = { + root: { + touchCallout: 'none', + userSelect: 'none', + cursor: 'default', + height: this.getTheme().handleSizeActive, + position: 'relative', + marginTop: 24, + marginBottom: 48 + }, + track: { + position: 'absolute', + top: (this.getTheme().handleSizeActive - this.getTheme().trackSize) / 2, + left: 0, + width: '100%', + height: this.getTheme().trackSize + }, + filledAndRemaining: { + position: 'absolute', + top: 0, + height: '100%', + transition: Transitions.easeOut(null, 'margin') + }, + percentZeroRemaining: { + left: 1, + marginLeft: gutter + }, + handle: { + boxSizing: 'border-box', + position: 'absolute', + cursor: 'pointer', + pointerEvents: 'inherit', + top: (this.getTheme().handleSizeActive - this.getTheme().trackSize) / 2 + 'px', + left: '0%', + zIndex: 1, + margin: this.getTheme().trackSize / 2 + 'px 0 0 0', + width: this.getTheme().handleSize, + height: this.getTheme().handleSize, + backgroundColor: this.getTheme().selectionColor, + backgroundClip: 'padding-box', + border: '0px solid transparent', + borderRadius: '50%', + transform: 'translate(-50%, -50%)', + transition: Transitions.easeOut('450ms', 'border') + ',' + Transitions.easeOut('450ms', 'width') + ',' + Transitions.easeOut('450ms', 'height'), + overflow: 'visible' + }, + handleWhenDisabled: { + boxSizing: 'content-box', + cursor: 'not-allowed', + backgroundColor: this.getTheme().trackColor, + width: this.getTheme().handleSizeDisabled, + height: this.getTheme().handleSizeDisabled, + border: '2px solid white' + }, + handleWhenPercentZero: { + border: this.getTheme().trackSize + 'px solid ' + this.getTheme().trackColor, + backgroundColor: this.getTheme().handleFillColor, + boxShadow: 'none' + }, + handleWhenActive: { + borderColor: this.getTheme().trackColorSelected, + width: this.getTheme().handleSizeActive, + height: this.getTheme().handleSizeActive, + transition: Transitions.easeOut('450ms', 'backgroundColor') + ',' + Transitions.easeOut('450ms', 'width') + ',' + Transitions.easeOut('450ms', 'height') + }, + ripples: { + height: '300%', + width: '300%', + top: '-12px', + left: '-12px' + }, + handleWhenDisabledAndZero: { + width: size / 2 + 'px', + height: size / 2 + 'px' + }, + handleWhenPercentZeroAndHovered: { + border: this.getTheme().trackSize + 'px solid ' + this.getTheme().handleColorZero, + width: size + 'px', + height: size + 'px' + } + }; + styles.filled = this.mergeAndPrefix(styles.filledAndRemaining, { + left: 0, + backgroundColor: this.props.disabled ? this.getTheme().trackColor : this.getTheme().selectionColor, + marginRight: fillGutter, + width: this.state.percent * 100 + (this.props.disabled ? -1 : 0) + '%' + }); + styles.remaining = this.mergeAndPrefix(styles.filledAndRemaining, { + right: 0, + backgroundColor: this.getTheme().trackColor, + marginLeft: fillGutter, + width: (1 - this.state.percent) * 100 + (this.props.disabled ? -1 : 0) + '%' + }); + + styles.percentZeroRemaining.width = styles.remaining.width - styles.percentZeroRemaining.left; + + return styles; + }, + + render: function render() { + var percent = this.state.percent; + if (percent > 1) percent = 1;else if (percent < 0) percent = 0; + var gutter = (this.getTheme().handleSizeDisabled + this.getTheme().trackSize) / 2; + var fillGutter = this.getTheme().handleSizeDisabled - this.getTheme().trackSize; + + var styles = this.getStyles(); + var sliderStyles = this.mergeAndPrefix(styles.root, this.props.style); + var trackStyles = styles.track; + var filledStyles = styles.filled; + var remainingStyles = this.mergeAndPrefix(styles.remaining, percent === 0 && styles.percentZeroRemaining); + var handleStyles = percent === 0 ? this.mergeAndPrefix(styles.handle, styles.handleWhenPercentZero, this.state.active && styles.handleWhenActive, this.state.focused && { outline: 'none' }, this.state.hovered && styles.handleWhenPercentZeroAndHovered, this.props.disabled && styles.handleWhenDisabledAndZero) : this.mergeAndPrefix(styles.handle, this.state.active && styles.handleWhenActive, this.state.focused && { outline: 'none' }, this.props.disabled && styles.handleWhenDisabled); + + var rippleStyle = { height: '12px', width: '12px' }; + + if ((this.state.hovered || this.state.focused) && !this.props.disabled) { + remainingStyles.backgroundColor = this.getTheme().trackColorSelected; + } + + if (percent === 0) filledStyles.marginRight = gutter; + if (this.state.percent === 0 && this.state.active) remainingStyles.marginLeft = fillGutter; + + var rippleShowCondition = (this.state.hovered || this.state.focused) && !this.state.active && this.state.percent !== 0; + var rippleColor = this.state.percent === 0 ? this.getTheme().handleColorZero : this.getTheme().rippleColor; + var focusRipple; + if (!this.props.disabled && !this.props.disableFocusRipple) { + focusRipple = React.createElement(FocusRipple, { + ref: 'focusRipple', + key: 'focusRipple', + style: rippleStyle, + innerStyle: styles.ripples, + show: rippleShowCondition, + color: rippleColor }); + } + + return React.createElement( + 'div', + { style: this.props.style }, + React.createElement('span', { className: 'mui-input-highlight' }), + React.createElement('span', { className: 'mui-input-bar' }), + React.createElement( + 'span', + { className: 'mui-input-description' }, + this.props.description + ), + React.createElement( + 'span', + { className: 'mui-input-error' }, + this.props.error + ), + React.createElement( + 'div', + { style: sliderStyles, + onFocus: this._onFocus, + onBlur: this._onBlur, + onMouseOver: this._onMouseOver, + onMouseOut: this._onMouseOut, + onMouseUp: this._onMouseUp }, + React.createElement( + 'div', + { ref: 'track', style: trackStyles }, + React.createElement('div', { style: filledStyles }), + React.createElement('div', { style: remainingStyles }), + React.createElement( + Draggable, + { axis: 'x', bound: 'point', + cancel: this.props.disabled ? '*' : null, + start: { x: percent * 100 + '%' }, + constrain: this._constrain(), + onStart: this._onDragStart, + onStop: this._onDragStop, + onDrag: this._onDragUpdate, + onMouseDown: this._onMouseDown }, + React.createElement( + 'div', + { style: handleStyles, tabIndex: 0 }, + focusRipple + ) + ) + ) + ), + React.createElement('input', { ref: 'input', type: 'hidden', + name: this.props.name, + value: this.state.value, + required: this.props.required, + min: this.props.min, + max: this.props.max, + step: this.props.step }) + ); + }, + + getValue: function getValue() { + return this.state.value; + }, + + setValue: function setValue(i) { + // calculate percentage + var percent = (i - this.props.min) / (this.props.max - this.props.min); + if (isNaN(percent)) percent = 0; + // update state + this.setState({ + value: i, + percent: percent + }); + }, + + getPercent: function getPercent() { + return this.state.percent; + }, + + setPercent: function setPercent(percent) { + var value = this._alignValue(this._percentToValue(percent)); + this.setState({ value: value, percent: percent }); + }, + + clearValue: function clearValue() { + this.setValue(0); + }, + + _alignValue: function _alignValue(val) { + var _props = this.props; + var step = _props.step; + var min = _props.min; + + var valModStep = (val - min) % step; + var alignValue = val - valModStep; + + if (Math.abs(valModStep) * 2 >= step) { + alignValue += valModStep > 0 ? step : -step; + } + + return parseFloat(alignValue.toFixed(5)); + }, + + _constrain: function _constrain() { + var _this = this; + + var _props2 = this.props; + var min = _props2.min; + var max = _props2.max; + var step = _props2.step; + + return function (pos) { + var pixelMax = React.findDOMNode(_this.refs.track).clientWidth; + var pixelStep = pixelMax / ((max - min) / step); + + var cursor = min; + var i; + for (i = 0; i < (max - min) / step; i++) { + var distance = pos.left - cursor; + var nextDistance = cursor + pixelStep - pos.left; + if (Math.abs(distance) > Math.abs(nextDistance)) { + cursor += pixelStep; + } else { + break; + } + } + return { + left: cursor + }; + }; + }, + + _onFocus: function _onFocus(e) { + this.setState({ focused: true }); + if (this.props.onFocus) this.props.onFocus(e); + }, + + _onBlur: function _onBlur(e) { + this.setState({ focused: false, active: false }); + if (this.props.onBlur) this.props.onBlur(e); + }, + + _onMouseOver: function _onMouseOver() { + this.setState({ hovered: true }); + }, + + _onMouseOut: function _onMouseOut() { + this.setState({ hovered: false }); + }, + + _onMouseUp: function _onMouseUp() { + if (!this.props.disabled) this.setState({ active: false }); + }, + + _onMouseDown: function _onMouseDown() { + if (!this.props.disabled) this.setState({ active: true }); + }, + + _onDragStart: function _onDragStart(e, ui) { + this.setState({ + dragging: true, + active: true + }); + if (this.props.onDragStart) this.props.onDragStart(e, ui); + }, + + _onDragStop: function _onDragStop(e, ui) { + this.setState({ + dragging: false, + active: false + }); + if (this.props.onDragStop) this.props.onDragStop(e, ui); + }, + + _onDragUpdate: function _onDragUpdate(e, ui) { + if (!this.state.dragging) return; + if (!this.props.disabled) this._dragX(e, ui.position.left); + }, + + _dragX: function _dragX(e, pos) { + var max = React.findDOMNode(this.refs.track).clientWidth; + if (pos < 0) pos = 0;else if (pos > max) pos = max; + this._updateWithChangeEvent(e, pos / max); + }, + + _updateWithChangeEvent: function _updateWithChangeEvent(e, percent) { + if (this.state.percent === percent) return; + this.setPercent(percent); + var value = this._alignValue(this._percentToValue(percent)); + if (this.props.onChange) this.props.onChange(e, value); + }, + + _percentToValue: function _percentToValue(percent) { + return percent * (this.props.max - this.props.min) + this.props.min; + } + +}); + +module.exports = Slider; +},{"./mixins/style-propable":103,"./ripples/focus-ripple":112,"./styles/transitions.js":124,"react":357,"react-draggable2":177}],116:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var CssEvent = require('./utils/css-event'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var ClickAwayable = require('./mixins/click-awayable'); +var FlatButton = require('./flat-button'); + +var Snackbar = React.createClass({ + displayName: 'Snackbar', + + mixins: [StylePropable, ClickAwayable], + + manuallyBindClickAway: true, + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + action: React.PropTypes.string, + message: React.PropTypes.string.isRequired, + openOnMount: React.PropTypes.bool, + onActionTouchTap: React.PropTypes.func + }, + + getInitialState: function getInitialState() { + return { + open: this.props.openOnMount || false + }; + }, + + componentClickAway: function componentClickAway() { + this.dismiss(); + }, + + componentDidUpdate: function componentDidUpdate(prevProps, prevState) { + if (prevState.open != this.state.open) { + if (this.state.open) { + //Only Bind clickaway after transition finishes + CssEvent.onTransitionEnd(React.findDOMNode(this), (function () { + this._bindClickAway(); + }).bind(this)); + } else { + this._unbindClickAway(); + } + } + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.snackbar; + }, + + getSpacing: function getSpacing() { + return this.context.muiTheme.spacing; + }, + + getStyles: function getStyles() { + var styles = { + root: { + color: this.getTheme().textColor, + backgroundColor: this.getTheme().backgroundColor, + borderRadius: 2, + padding: '0px ' + this.getSpacing().desktopGutter + 'px', + height: this.getSpacing().desktopSubheaderHeight, + lineHeight: this.getSpacing().desktopSubheaderHeight + 'px', + minWidth: 288, + maxWidth: 568, + + position: 'fixed', + zIndex: 10, + bottom: this.getSpacing().desktopGutter, + marginLeft: this.getSpacing().desktopGutter, + + left: -10000, + opacity: 0, + transform: 'translate3d(0, 20px, 0)', + transition: Transitions.easeOut('0ms', 'left', '400ms') + ',' + Transitions.easeOut('400ms', 'opacity') + ',' + Transitions.easeOut('400ms', 'transform') + }, + action: { + color: this.getTheme().actionColor, + float: 'right', + marginTop: 6, + marginRight: -16, + marginLeft: this.getSpacing().desktopGutter, + backgroundColor: 'transparent' + }, + rootWhenOpen: { + left: '0px', + opacity: 1, + transform: 'translate3d(0, 0, 0)', + transition: Transitions.easeOut('0ms', 'left', '0ms') + ',' + Transitions.easeOut('400ms', 'opacity', '0ms') + ',' + Transitions.easeOut('400ms', 'transform', '0ms') + } + }; + return styles; + }, + + render: function render() { + + var styles = this.getStyles(); + + var action; + if (this.props.action) { + action = React.createElement(FlatButton, { + style: styles.action, + label: this.props.action, + onTouchTap: this.props.onActionTouchTap }); + } + + var rootStyles = styles.root; + if (this.state.open) rootStyles = this.mergeStyles(styles.root, styles.rootWhenOpen, this.props.style); + + return React.createElement( + 'span', + { style: rootStyles }, + React.createElement( + 'span', + null, + this.props.message + ), + action + ); + }, + + show: function show() { + this.setState({ open: true }); + }, + + dismiss: function dismiss() { + this.setState({ open: false }); + } + +}); + +module.exports = Snackbar; +},{"./flat-button":86,"./mixins/click-awayable":102,"./mixins/style-propable":103,"./styles/transitions":124,"./utils/css-event":167,"react":357}],117:[function(require,module,exports){ +'use strict'; + +var isBrowser = typeof window !== 'undefined'; +var Modernizr = isBrowser ? require('../utils/modernizr.custom') : undefined; + +module.exports = { + + all: function all(styles) { + var prefixedStyle = {}; + for (var key in styles) { + prefixedStyle[this.single(key)] = styles[key]; + } + return prefixedStyle; + }, + + set: function set(style, key, value) { + style[this.single(key)] = value; + }, + + single: function single(key) { + return isBrowser ? Modernizr.prefixed(key) : key; + }, + + singleHyphened: function singleHyphened(key) { + var str = this.single(key); + + return !str ? key : str.replace(/([A-Z])/g, function (str, m1) { + return '-' + m1.toLowerCase(); + }).replace(/^ms-/, '-ms-'); + } + +}; +},{"../utils/modernizr.custom":174}],118:[function(require,module,exports){ +// To include this file in your project: +// var mui = require('mui'); +// var Colors = mui.Styles.Colors; + +'use strict'; + +module.exports = { + + red50: '#ffebee', + red100: '#ffcdd2', + red200: '#ef9a9a', + red300: '#e57373', + red400: '#ef5350', + red500: '#f44336', + red600: '#e53935', + red700: '#d32f2f', + red800: '#c62828', + red900: '#b71c1c', + redA100: '#ff8a80', + redA200: '#ff5252', + redA400: '#ff1744', + redA700: '#d50000', + + pink50: '#fce4ec', + pink100: '#f8bbd0', + pink200: '#f48fb1', + pink300: '#f06292', + pink400: '#ec407a', + pink500: '#e91e63', + pink600: '#d81b60', + pink700: '#c2185b', + pink800: '#ad1457', + pink900: '#880e4f', + pinkA100: '#ff80ab', + pinkA200: '#ff4081', + pinkA400: '#f50057', + pinkA700: '#c51162', + + purple50: '#f3e5f5', + purple100: '#e1bee7', + purple200: '#ce93d8', + purple300: '#ba68c8', + purple400: '#ab47bc', + purple500: '#9c27b0', + purple600: '#8e24aa', + purple700: '#7b1fa2', + purple800: '#6a1b9a', + purple900: '#4a148c', + purpleA100: '#ea80fc', + purpleA200: '#e040fb', + purpleA400: '#d500f9', + purpleA700: '#aa00ff', + + deepPurple50: '#ede7f6', + deepPurple100: '#d1c4e9', + deepPurple200: '#b39ddb', + deepPurple300: '#9575cd', + deepPurple400: '#7e57c2', + deepPurple500: '#673ab7', + deepPurple600: '#5e35b1', + deepPurple700: '#512da8', + deepPurple800: '#4527a0', + deepPurple900: '#311b92', + deepPurpleA100: '#b388ff', + deepPurpleA200: '#7c4dff', + deepPurpleA400: '#651fff', + deepPurpleA700: '#6200ea', + + indigo50: '#e8eaf6', + indigo100: '#c5cae9', + indigo200: '#9fa8da', + indigo300: '#7986cb', + indigo400: '#5c6bc0', + indigo500: '#3f51b5', + indigo600: '#3949ab', + indigo700: '#303f9f', + indigo800: '#283593', + indigo900: '#1a237e', + indigoA100: '#8c9eff', + indigoA200: '#536dfe', + indigoA400: '#3d5afe', + indigoA700: '#304ffe', + + blue50: '#e3f2fd', + blue100: '#bbdefb', + blue200: '#90caf9', + blue300: '#64b5f6', + blue400: '#42a5f5', + blue500: '#2196f3', + blue600: '#1e88e5', + blue700: '#1976d2', + blue800: '#1565c0', + blue900: '#0d47a1', + blueA100: '#82b1ff', + blueA200: '#448aff', + blueA400: '#2979ff', + blueA700: '#2962ff', + + lightBlue50: '#e1f5fe', + lightBlue100: '#b3e5fc', + lightBlue200: '#81d4fa', + lightBlue300: '#4fc3f7', + lightBlue400: '#29b6f6', + lightBlue500: '#03a9f4', + lightBlue600: '#039be5', + lightBlue700: '#0288d1', + lightBlue800: '#0277bd', + lightBlue900: '#01579b', + lightBlueA100: '#80d8ff', + lightBlueA200: '#40c4ff', + lightBlueA400: '#00b0ff', + lightBlueA700: '#0091ea', + + cyan50: '#e0f7fa', + cyan100: '#b2ebf2', + cyan200: '#80deea', + cyan300: '#4dd0e1', + cyan400: '#26c6da', + cyan500: '#00bcd4', + cyan600: '#00acc1', + cyan700: '#0097a7', + cyan800: '#00838f', + cyan900: '#006064', + cyanA100: '#84ffff', + cyanA200: '#18ffff', + cyanA400: '#00e5ff', + cyanA700: '#00b8d4', + + teal50: '#e0f2f1', + teal100: '#b2dfdb', + teal200: '#80cbc4', + teal300: '#4db6ac', + teal400: '#26a69a', + teal500: '#009688', + teal600: '#00897b', + teal700: '#00796b', + teal800: '#00695c', + teal900: '#004d40', + tealA100: '#a7ffeb', + tealA200: '#64ffda', + tealA400: '#1de9b6', + tealA700: '#00bfa5', + + green50: '#e8f5e9', + green100: '#c8e6c9', + green200: '#a5d6a7', + green300: '#81c784', + green400: '#66bb6a', + green500: '#4caf50', + green600: '#43a047', + green700: '#388e3c', + green800: '#2e7d32', + green900: '#1b5e20', + greenA100: '#b9f6ca', + greenA200: '#69f0ae', + greenA400: '#00e676', + greenA700: '#00c853', + + lightGreen50: '#f1f8e9', + lightGreen100: '#dcedc8', + lightGreen200: '#c5e1a5', + lightGreen300: '#aed581', + lightGreen400: '#9ccc65', + lightGreen500: '#8bc34a', + lightGreen600: '#7cb342', + lightGreen700: '#689f38', + lightGreen800: '#558b2f', + lightGreen900: '#33691e', + lightGreenA100: '#ccff90', + lightGreenA200: '#b2ff59', + lightGreenA400: '#76ff03', + lightGreenA700: '#64dd17', + + lime50: '#f9fbe7', + lime100: '#f0f4c3', + lime200: '#e6ee9c', + lime300: '#dce775', + lime400: '#d4e157', + lime500: '#cddc39', + lime600: '#c0ca33', + lime700: '#afb42b', + lime800: '#9e9d24', + lime900: '#827717', + limeA100: '#f4ff81', + limeA200: '#eeff41', + limeA400: '#c6ff00', + limeA700: '#aeea00', + + yellow50: '#fffde7', + yellow100: '#fff9c4', + yellow200: '#fff59d', + yellow300: '#fff176', + yellow400: '#ffee58', + yellow500: '#ffeb3b', + yellow600: '#fdd835', + yellow700: '#fbc02d', + yellow800: '#f9a825', + yellow900: '#f57f17', + yellowA100: '#ffff8d', + yellowA200: '#ffff00', + yellowA400: '#ffea00', + yellowA700: '#ffd600', + + amber50: '#fff8e1', + amber100: '#ffecb3', + amber200: '#ffe082', + amber300: '#ffd54f', + amber400: '#ffca28', + amber500: '#ffc107', + amber600: '#ffb300', + amber700: '#ffa000', + amber800: '#ff8f00', + amber900: '#ff6f00', + amberA100: '#ffe57f', + amberA200: '#ffd740', + amberA400: '#ffc400', + amberA700: '#ffab00', + + orange50: '#fff3e0', + orange100: '#ffe0b2', + orange200: '#ffcc80', + orange300: '#ffb74d', + orange400: '#ffa726', + orange500: '#ff9800', + orange600: '#fb8c00', + orange700: '#f57c00', + orange800: '#ef6c00', + orange900: '#e65100', + orangeA100: '#ffd180', + orangeA200: '#ffab40', + orangeA400: '#ff9100', + orangeA700: '#ff6d00', + + deepOrange50: '#fbe9e7', + deepOrange100: '#ffccbc', + deepOrange200: '#ffab91', + deepOrange300: '#ff8a65', + deepOrange400: '#ff7043', + deepOrange500: '#ff5722', + deepOrange600: '#f4511e', + deepOrange700: '#e64a19', + deepOrange800: '#d84315', + deepOrange900: '#bf360c', + deepOrangeA100: '#ff9e80', + deepOrangeA200: '#ff6e40', + deepOrangeA400: '#ff3d00', + deepOrangeA700: '#dd2c00', + + brown50: '#efebe9', + brown100: '#d7ccc8', + brown200: '#bcaaa4', + brown300: '#a1887f', + brown400: '#8d6e63', + brown500: '#795548', + brown600: '#6d4c41', + brown700: '#5d4037', + brown800: '#4e342e', + brown900: '#3e2723', + + blueGrey50: '#eceff1', + blueGrey100: '#cfd8dc', + blueGrey200: '#b0bec5', + blueGrey300: '#90a4ae', + blueGrey400: '#78909c', + blueGrey500: '#607d8b', + blueGrey600: '#546e7a', + blueGrey700: '#455a64', + blueGrey800: '#37474f', + blueGrey900: '#263238', + + grey50: '#fafafa', + grey100: '#f5f5f5', + grey200: '#eeeeee', + grey300: '#e0e0e0', + grey400: '#bdbdbd', + grey500: '#9e9e9e', + grey600: '#757575', + grey700: '#616161', + grey800: '#424242', + grey900: '#212121', + + black: '#000000', + white: '#ffffff', + + transparent: 'rgba(0, 0, 0, 0)', + fullBlack: 'rgba(0, 0, 0, 1)', + darkBlack: 'rgba(0, 0, 0, 0.87)', + lightBlack: 'rgba(0, 0, 0, 0.54)', + minBlack: 'rgba(0, 0, 0, 0.26)', + faintBlack: 'rgba(0, 0, 0, 0.12)', + fullWhite: 'rgba(255, 255, 255, 1)', + darkWhite: 'rgba(255, 255, 255, 0.87)', + lightWhite: 'rgba(255, 255, 255, 0.54)' + +}; +},{}],119:[function(require,module,exports){ +'use strict'; + +module.exports = { + AutoPrefix: require('./auto-prefix'), + Colors: require('./colors'), + Spacing: require('./spacing'), + ThemeManager: require('./theme-manager'), + Transitions: require('./transitions'), + Typography: require('./typography') +}; +},{"./auto-prefix":117,"./colors":118,"./spacing":120,"./theme-manager":121,"./transitions":124,"./typography":125}],120:[function(require,module,exports){ +"use strict"; + +module.exports = { + iconSize: 24, + + desktopGutter: 24, + desktopGutterMore: 32, + desktopGutterLess: 16, + desktopGutterMini: 8, + desktopKeylineIncrement: 64, + desktopDropDownMenuItemHeight: 32, + desktopDropDownMenuFontSize: 15, + desktopLeftNavMenuItemHeight: 48, + desktopSubheaderHeight: 48, + desktopToolbarHeight: 56 +}; +},{}],121:[function(require,module,exports){ +'use strict'; + +var Extend = require('../utils/extend'); + +var Types = { + LIGHT: require('./themes/light-theme'), + DARK: require('./themes/dark-theme') +}; + +var ThemeManager = function ThemeManager() { + return { + types: Types, + template: Types.LIGHT, + + spacing: Types.LIGHT.spacing, + contentFontFamily: 'Roboto, sans-serif', + + palette: Types.LIGHT.getPalette(), + component: Types.LIGHT.getComponentThemes(Types.LIGHT.getPalette()), + + getCurrentTheme: function getCurrentTheme() { + return this; + }, + + // Component gets updated to reflect palette changes. + setTheme: function setTheme(newTheme) { + this.setSpacing(newTheme.spacing); + this.setPalette(newTheme.getPalette()); + this.setComponentThemes(newTheme.getComponentThemes(newTheme.getPalette())); + }, + + setSpacing: function setSpacing(newSpacing) { + this.spacing = Extend(this.spacing, newSpacing); + this.component = Extend(this.component, this.template.getComponentThemes(this.palette, this.spacing)); + }, + + setPalette: function setPalette(newPalette) { + this.palette = Extend(this.palette, newPalette); + this.component = Extend(this.component, this.template.getComponentThemes(this.palette)); + }, + + setComponentThemes: function setComponentThemes(overrides) { + this.component = Extend(this.component, overrides); + } + }; +}; + +module.exports = ThemeManager; +},{"../utils/extend":171,"./themes/dark-theme":122,"./themes/light-theme":123}],122:[function(require,module,exports){ +'use strict'; + +var Colors = require('../colors'); +var ColorManipulator = require('../../utils/color-manipulator'); + +var DarkTheme = { + getPalette: function getPalette() { + return { + textColor: Colors.fullWhite, + canvasColor: '#303030', + borderColor: ColorManipulator.fade(Colors.fullWhite, 0.3), //Colors.grey300 + disabledColor: ColorManipulator.fade(Colors.fullWhite, 0.3) + }; + }, + getComponentThemes: function getComponentThemes(palette) { + var cardColor = Colors.grey800; + return { + floatingActionButton: { + disabledColor: ColorManipulator.fade(palette.textColor, 0.12) + }, + leftNav: { + color: cardColor + }, + menu: { + backgroundColor: cardColor, + containerBackgroundColor: cardColor + }, + menuItem: { + hoverColor: 'rgba(255, 255, 255, .03)' + }, + menuSubheader: { + borderColor: 'rgba(255, 255, 255, 0.3)' + }, + paper: { + backgroundColor: cardColor + }, + raisedButton: { + color: Colors.grey500 + }, + toggle: { + thumbOnColor: Colors.cyan200, + thumbOffColor: Colors.grey400, + thumbDisabledColor: Colors.grey800, + thumbRequiredColor: Colors.cyan200, + trackOnColor: ColorManipulator.fade(Colors.cyan200, 0.5), + trackOffColor: 'rgba(255, 255, 255, 0.3)', + trackDisabledColor: 'rgba(255, 255, 255, 0.1)' + }, + slider: { + trackColor: Colors.minBlack, + handleColorZero: cardColor, + handleFillColor: cardColor, + selectionColor: Colors.cyan200 + } + }; + } +}; + +module.exports = DarkTheme; +},{"../../utils/color-manipulator":166,"../colors":118}],123:[function(require,module,exports){ +'use strict'; + +var Colors = require('../colors'); +var Spacing = require('../spacing'); +var ColorManipulator = require('../../utils/color-manipulator'); + +/** + * Light Theme is the default theme used in material-ui. It is guaranteed to + * have all theme variables needed for every component. Variables not defined + * in a custom theme will default to these values. + */ + +var LightTheme = { + spacing: Spacing, + contentFontFamily: 'Roboto, sans-serif', + getPalette: function getPalette() { + return { + primary1Color: Colors.cyan500, + primary2Color: Colors.cyan700, + primary3Color: Colors.cyan100, + accent1Color: Colors.pinkA200, + accent2Color: Colors.pinkA400, + accent3Color: Colors.pinkA100, + textColor: Colors.darkBlack, + canvasColor: Colors.white, + borderColor: Colors.grey300, + disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3) + }; + }, + getComponentThemes: function getComponentThemes(palette, spacing) { + spacing = spacing || Spacing; + var obj = { + appBar: { + color: palette.primary1Color, + textColor: Colors.darkWhite, + height: spacing.desktopKeylineIncrement + }, + button: { + height: 36, + minWidth: 88, + iconButtonSize: spacing.iconSize * 2 + }, + checkbox: { + boxColor: palette.textColor, + checkedColor: palette.primary1Color, + requiredColor: palette.primary1Color, + disabledColor: palette.disabledColor, + labelColor: palette.textColor, + labelDisabledColor: palette.disabledColor + }, + datePicker: { + color: palette.primary1Color, + textColor: Colors.white, + calendarTextColor: palette.textColor, + selectColor: palette.primary2Color, + selectTextColor: Colors.white + }, + dropDownMenu: { + accentColor: palette.borderColor + }, + flatButton: { + color: palette.canvasColor, + textColor: palette.textColor, + primaryTextColor: palette.accent1Color, + secondaryTextColor: palette.primary1Color + }, + floatingActionButton: { + buttonSize: 56, + miniSize: 40, + color: palette.accent1Color, + iconColor: Colors.white, + secondaryColor: palette.primary1Color, + secondaryIconColor: Colors.white + }, + leftNav: { + width: spacing.desktopKeylineIncrement * 4, + color: Colors.white + }, + menu: { + backgroundColor: Colors.white, + containerBackgroundColor: Colors.white + }, + menuItem: { + dataHeight: 32, + height: 48, + hoverColor: 'rgba(0, 0, 0, .035)', + padding: spacing.desktopGutter, + selectedTextColor: palette.accent1Color + }, + menuSubheader: { + padding: spacing.desktopGutter, + borderColor: palette.borderColor, + textColor: palette.primary1Color + }, + paper: { + backgroundColor: Colors.white + }, + radioButton: { + borderColor: palette.textColor, + backgroundColor: Colors.white, + checkedColor: palette.primary1Color, + requiredColor: palette.primary1Color, + disabledColor: palette.disabledColor, + size: 24, + labelColor: palette.textColor, + labelDisabledColor: palette.disabledColor + }, + raisedButton: { + color: Colors.white, + textColor: palette.textColor, + primaryColor: palette.accent1Color, + primaryTextColor: Colors.white, + secondaryColor: palette.primary1Color, + secondaryTextColor: Colors.white + }, + slider: { + trackSize: 2, + trackColor: Colors.minBlack, + trackColorSelected: Colors.grey500, + handleSize: 12, + handleSizeDisabled: 8, + handleColorZero: Colors.grey400, + handleFillColor: Colors.white, + selectionColor: palette.primary3Color, + rippleColor: palette.primary1Color + }, + snackbar: { + textColor: Colors.white, + backgroundColor: '#323232', + actionColor: palette.accent1Color + }, + table: { + backgroundColor: Colors.white + }, + tableHeader: { + borderColor: palette.borderColor + }, + tableHeaderColumn: { + textColor: Colors.lightBlack, + height: 56, + spacing: 28 + }, + tableFooter: { + borderColor: palette.borderColor, + textColor: Colors.lightBlack + }, + tableRow: { + hoverColor: Colors.grey200, + stripeColor: ColorManipulator.lighten(palette.primary1Color, 0.55), + selectedColor: Colors.grey300, + textColor: Colors.darkBlack, + borderColor: palette.borderColor + }, + tableRowColumn: { + height: 48, + spacing: 28 + }, + timePicker: { + color: Colors.white, + textColor: Colors.grey600, + accentColor: palette.primary1Color, + clockColor: Colors.black, + selectColor: palette.primary2Color, + selectTextColor: Colors.white + }, + toggle: { + thumbOnColor: palette.primary1Color, + thumbOffColor: Colors.grey50, + thumbDisabledColor: Colors.grey400, + thumbRequiredColor: palette.primary1Color, + trackOnColor: ColorManipulator.fade(palette.primary1Color, 0.5), + trackOffColor: Colors.minBlack, + trackDisabledColor: Colors.faintBlack, + labelColor: palette.textColor, + labelDisabledColor: palette.disabledColor + }, + toolbar: { + backgroundColor: ColorManipulator.darken('#eeeeee', 0.05), + height: 56, + titleFontSize: 20, + iconColor: 'rgba(0, 0, 0, .40)', + separatorColor: 'rgba(0, 0, 0, .175)', + menuHoverColor: 'rgba(0, 0, 0, .10)' + }, + tabs: { + backgroundColor: palette.primary1Color + }, + textField: { + textColor: palette.textColor, + hintColor: palette.disabledColor, + floatingLabelColor: palette.textColor, + disabledTextColor: palette.disabledColor, + errorColor: Colors.red500, + focusColor: palette.primary1Color, + backgroundColor: 'transparent', + borderColor: palette.borderColor + } + }; + + // Properties based on previous properties + obj.flatButton.disabledTextColor = ColorManipulator.fade(obj.flatButton.textColor, 0.3), obj.floatingActionButton.disabledColor = ColorManipulator.darken(Colors.white, 0.1), obj.floatingActionButton.disabledTextColor = ColorManipulator.fade(palette.textColor, 0.3); + obj.raisedButton.disabledColor = ColorManipulator.darken(obj.raisedButton.color, 0.1), obj.raisedButton.disabledTextColor = ColorManipulator.fade(obj.raisedButton.textColor, 0.3); + obj.slider.handleSizeActive = obj.slider.handleSize * 2; + obj.toggle.trackRequiredColor = ColorManipulator.fade(obj.toggle.thumbRequiredColor, 0.5); + + return obj; + } +}; + +module.exports = LightTheme; +},{"../../utils/color-manipulator":166,"../colors":118,"../spacing":120}],124:[function(require,module,exports){ +'use strict'; + +var AutoPrefix = require('./auto-prefix'); + +module.exports = { + + easeOutFunction: 'cubic-bezier(0.23, 1, 0.32, 1)', + easeInOutFunction: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)', + + easeOut: function easeOut(duration, property, delay, easeFunction) { + + easeFunction = easeFunction || this.easeOutFunction; + + return this.create(duration, property, delay, easeFunction); + }, + + create: function create(duration, property, delay, easeFunction) { + + duration = duration || '450ms'; + property = property || 'all'; + delay = delay || '0ms'; + easeFunction = easeFunction || 'linear'; + + return AutoPrefix.singleHyphened(property) + ' ' + duration + ' ' + easeFunction + ' ' + delay; + } +}; +},{"./auto-prefix":117}],125:[function(require,module,exports){ +'use strict'; + +var Colors = require('./colors'); + +var Typography = function Typography() { + + // text colors + this.textFullBlack = Colors.fullBlack; + this.textDarkBlack = Colors.darkBlack; + this.textLightBlack = Colors.lightBlack; + this.textMinBlack = Colors.minBlack; + this.textFullWhite = Colors.fullWhite; + this.textDarkWhite = Colors.darkWhite; + this.textLightWhite = Colors.lightWhite; + + // font weight + this.fontWeightLight = 300; + this.fontWeightNormal = 400; + this.fontWeightMedium = 500; + + this.fontStyleButtonFontSize = 14; +}; + +module.exports = new Typography(); +},{"./colors":118}],126:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react/addons'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); + +var SvgIcon = React.createClass({ + displayName: 'SvgIcon', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + color: React.PropTypes.string, + hoverColor: React.PropTypes.string, + onMouseOut: React.PropTypes.func, + onMouseOver: React.PropTypes.func, + viewBox: React.PropTypes.string + }, + + getInitialState: function getInitialState() { + return { + hovered: false + }; + }, + + getDefaultProps: function getDefaultProps() { + return { + viewBox: '0 0 24 24' + }; + }, + + render: function render() { + var _props = this.props; + var color = _props.color; + var hoverColor = _props.hoverColor; + var viewBox = _props.viewBox; + var style = _props.style; + + var other = _objectWithoutProperties(_props, ['color', 'hoverColor', 'viewBox', 'style']); + + var offColor = color ? color : style && style.fill ? style.fill : this.context.muiTheme.palette.textColor; + var onColor = hoverColor ? hoverColor : offColor; + + //remove the fill prop so that it doesn't override our computed + //fill from above + if (style) delete style.fill; + + var mergedStyles = this.mergeAndPrefix({ + display: 'inline-block', + height: 24, + width: 24, + userSelect: 'none', + transition: Transitions.easeOut(), + fill: this.state.hovered ? onColor : offColor + }, style); + + return React.createElement( + 'svg', + _extends({}, other, { + onMouseOut: this._handleMouseOut, + onMouseOver: this._handleMouseOver, + style: mergedStyles, + viewBox: viewBox }), + this.props.children + ); + }, + + _handleMouseOut: function _handleMouseOut(e) { + this.setState({ hovered: false }); + if (this.props.onMouseOut) { + this.props.onMouseOut(e); + } + }, + + _handleMouseOver: function _handleMouseOver(e) { + this.setState({ hovered: true }); + if (this.props.onMouseOver) { + this.props.onMouseOver(e); + } + } +}); + +module.exports = SvgIcon; +},{"./mixins/style-propable":103,"./styles/transitions":124,"react/addons":185}],127:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var SvgIcon = require('../svg-icon'); + +var DropDownArrow = React.createClass({ + displayName: 'DropDownArrow', + + render: function render() { + return React.createElement( + SvgIcon, + this.props, + React.createElement('polygon', { points: '7,9.5 12,14.5 17,9.5 ' }) + ); + } + +}); + +module.exports = DropDownArrow; +},{"../svg-icon":126,"react":357}],128:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var SvgIcon = require('../svg-icon'); + +var NavigationChevronLeftDouble = React.createClass({ + displayName: 'NavigationChevronLeftDouble', + + render: function render() { + return React.createElement( + SvgIcon, + this.props, + React.createElement('path', { d: 'M11.41 7.41 L10 6 l-6 6 6 6 1.41-1.41 L6.83 12z' }), + React.createElement('path', { d: 'M18.41 7.41 L17 6 l-6 6 6 6 1.41-1.41 L13.83 12z' }) + ); + } + +}); + +module.exports = NavigationChevronLeftDouble; +},{"../svg-icon":126,"react":357}],129:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var SvgIcon = require('../svg-icon'); + +var NavigationChevronLeft = React.createClass({ + displayName: 'NavigationChevronLeft', + + render: function render() { + return React.createElement( + SvgIcon, + this.props, + React.createElement('path', { d: 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z' }) + ); + } + +}); + +module.exports = NavigationChevronLeft; +},{"../svg-icon":126,"react":357}],130:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var SvgIcon = require('../svg-icon'); + +var NavigationChevronRightDouble = React.createClass({ + displayName: 'NavigationChevronRightDouble', + + render: function render() { + return React.createElement( + SvgIcon, + this.props, + React.createElement('path', { d: 'M6 6 L4.59 7.41 9.17 12 l-4.58 4.59 L6 18 l6 -6z' }), + React.createElement('path', { d: 'M13 6 L11.59 7.41 16.17 12 l-4.58 4.59 L13 18 l6 -6z' }) + ); + } + +}); + +module.exports = NavigationChevronRightDouble; +},{"../svg-icon":126,"react":357}],131:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var SvgIcon = require('../svg-icon'); + +var NavigationChevronLeft = React.createClass({ + displayName: 'NavigationChevronLeft', + + render: function render() { + return React.createElement( + SvgIcon, + this.props, + React.createElement('path', { d: 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z' }) + ); + } + +}); + +module.exports = NavigationChevronLeft; +},{"../svg-icon":126,"react":357}],132:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var SvgIcon = require('../svg-icon'); + +var NavigationMenu = React.createClass({ + displayName: 'NavigationMenu', + + render: function render() { + return React.createElement( + SvgIcon, + this.props, + React.createElement('path', { d: 'M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z' }) + ); + } + +}); + +module.exports = NavigationMenu; +},{"../svg-icon":126,"react":357}],133:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var SvgIcon = require('../svg-icon'); + +var ToggleCheckBoxChecked = React.createClass({ + displayName: 'ToggleCheckBoxChecked', + + render: function render() { + return React.createElement( + SvgIcon, + this.props, + React.createElement('path', { d: 'M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M10,17l-5-5l1.4-1.4 l3.6,3.6l7.6-7.6L19,8L10,17z' }) + ); + } + +}); + +module.exports = ToggleCheckBoxChecked; +},{"../svg-icon":126,"react":357}],134:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var SvgIcon = require('../svg-icon'); + +var ToggleCheckBoxOutlineBlank = React.createClass({ + displayName: 'ToggleCheckBoxOutlineBlank', + + render: function render() { + return React.createElement( + SvgIcon, + this.props, + React.createElement('path', { d: 'M19,5v14H5V5H19 M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z' }) + ); + } + +}); + +module.exports = ToggleCheckBoxOutlineBlank; +},{"../svg-icon":126,"react":357}],135:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var SvgIcon = require('../svg-icon'); + +var RadioButtonOff = React.createClass({ + displayName: 'RadioButtonOff', + + render: function render() { + return React.createElement( + SvgIcon, + this.props, + React.createElement('path', { d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' }) + ); + } + +}); + +module.exports = RadioButtonOff; +},{"../svg-icon":126,"react":357}],136:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var SvgIcon = require('../svg-icon'); + +var RadioButtonOn = React.createClass({ + displayName: 'RadioButtonOn', + + render: function render() { + return React.createElement( + SvgIcon, + this.props, + React.createElement('path', { d: 'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' }) + ); + } + +}); + +module.exports = RadioButtonOn; +},{"../svg-icon":126,"react":357}],137:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); + +var TableFooter = React.createClass({ + displayName: 'TableFooter', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + columns: React.PropTypes.array.isRequired + }, + + getDefaultProps: function getDefaultProps() { + return {}; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.tableFooter; + }, + + getStyles: function getStyles() { + + var styles = { + cell: { + borderTop: '1px solid ' + this.getTheme().borderColor, + verticalAlign: 'bottom', + padding: 20, + textAlign: 'left', + whiteSpace: 'nowrap' + } + }; + + return styles; + }, + + render: function render() { + var className = 'mui-table-footer'; + + return React.createElement( + 'tfoot', + { className: className }, + this._getFooterRow() + ); + }, + + _getFooterRow: function _getFooterRow() { + return React.createElement( + 'tr', + { className: 'mui-table-footer-row' }, + this._getColumnHeaders(this.props.columns, 'f') + ); + }, + + _getColumnHeaders: function _getColumnHeaders(footerData, keyPrefix) { + var footers = []; + var styles = this.getStyles(); + + for (var index = 0; index < footerData.length; index++) { + var _footerData$index = footerData[index]; + var content = _footerData$index.content; + + var props = _objectWithoutProperties(_footerData$index, ['content']); + + if (content === undefined) content = footerData[index]; + var key = keyPrefix + index; + props.style = props.style !== undefined ? this.mergeAndPrefix(props.style, styles.cell) : styles.cell; + + footers.push(React.createElement( + 'td', + _extends({ key: key, className: 'mui-table-footer-column' }, props), + content + )); + } + + return footers; + } + +}); + +module.exports = TableFooter; +},{"../mixins/style-propable":103,"react":357}],138:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var Checkbox = require('../checkbox'); +var StylePropable = require('../mixins/style-propable'); +var Tooltip = require('../tooltip'); + +var TableHeaderColumn = React.createClass({ + displayName: 'TableHeaderColumn', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + tooltip: React.PropTypes.string, + columnNumber: React.PropTypes.number.isRequired, + onClick: React.PropTypes.func + }, + + getInitialState: function getInitialState() { + return { + hovered: false + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.tableHeaderColumn; + }, + + getStyles: function getStyles() { + var theme = this.getTheme(); + var styles = { + root: { + fontWeight: 'normal', + fontSize: 12, + paddingLeft: theme.spacing, + paddingRight: theme.spacing, + height: theme.height, + textAlign: 'left', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + color: this.getTheme().textColor, + position: 'relative' + }, + tooltip: { + boxSizing: 'border-box', + marginTop: theme.height + } + }; + + return styles; + }, + + render: function render() { + var className = 'mui-table-header-column'; + var styles = this.getStyles(); + var handlers = { + onMouseOver: this._onMouseOver, + onMouseOut: this._onMouseOut, + onClick: this._onClick + }; + var tooltip = undefined; + + if (this.props.tooltip !== undefined) { + tooltip = React.createElement(Tooltip, { + label: this.props.tooltip, + show: this.state.hovered, + style: this.mergeStyles(styles.tooltip) }); + } + + return React.createElement( + 'th', + _extends({ + key: this.props.key, + className: className, + style: this.mergeAndPrefix(styles.root, this.props.style) + }, handlers), + tooltip, + this.props.children + ); + }, + + _onMouseOver: function _onMouseOver() { + if (this.props.tooltip !== undefined) this.setState({ hovered: true }); + }, + + _onMouseOut: function _onMouseOut() { + if (this.props.tooltip !== undefined) this.setState({ hovered: false }); + }, + + _onClick: function _onClick(e) { + if (this.props.onClick) this.props.onClick(e, this.props.columnNumber); + } + +}); + +module.exports = TableHeaderColumn; +},{"../checkbox":67,"../mixins/style-propable":103,"../tooltip":163,"react":357}],139:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var Checkbox = require('../checkbox'); +var StylePropable = require('../mixins/style-propable'); +var TableHeaderColumn = require('./table-header-column'); + +var TableHeader = React.createClass({ + displayName: 'TableHeader', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + columns: React.PropTypes.array.isRequired, + superHeaderColumns: React.PropTypes.array, + onSelectAll: React.PropTypes.func, + displaySelectAll: React.PropTypes.bool, + enableSelectAll: React.PropTypes.bool, + fixed: React.PropTypes.bool + }, + + getDefaultProps: function getDefaultProps() { + return { + displaySelectAll: true, + enableSelectAll: true, + fixed: true + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.tableHeader; + }, + + getStyles: function getStyles() { + var styles = { + root: { + borderBottom: '1px solid ' + this.getTheme().borderColor + } + }; + + return styles; + }, + + render: function render() { + var className = 'mui-table-header'; + + return React.createElement( + 'thead', + { className: className, style: this.getStyles().root }, + this._getSuperHeaderRow(), + this._getHeaderRow() + ); + }, + + getSuperHeaderRow: function getSuperHeaderRow() { + return this.refs.superHeader; + }, + + getHeaderRow: function getHeaderRow() { + return this.refs.header; + }, + + _getSuperHeaderRow: function _getSuperHeaderRow() { + if (this.props.superHeaderColumns !== undefined) { + return React.createElement( + 'tr', + { className: 'mui-table-super-header-row', ref: 'superHeader' }, + this._getColumnHeaders(this.props.superHeaderColumns, 'sh') + ); + } + }, + + _getHeaderRow: function _getHeaderRow() { + var columns = this.props.columns.slice(); + if (this.props.displaySelectAll) { + columns.splice(0, 0, this._getSelectAllCheckbox()); + } + + return React.createElement( + 'tr', + { className: 'mui-table-header-row', ref: 'header' }, + this._getHeaderColumns(columns, 'h') + ); + }, + + _getHeaderColumns: function _getHeaderColumns(headerData, keyPrefix) { + var styles = this.getStyles(); + var headers = []; + + for (var index = 0; index < headerData.length; index++) { + var _headerData$index = headerData[index]; + var content = _headerData$index.content; + var tooltip = _headerData$index.tooltip; + var style = _headerData$index.style; + + var props = _objectWithoutProperties(_headerData$index, ['content', 'tooltip', 'style']); + + var key = keyPrefix + index; + + headers.push(React.createElement( + TableHeaderColumn, + _extends({ key: key, style: style, tooltip: tooltip, columnNumber: index }, props), + content + )); + } + + return headers; + }, + + _getSelectAllCheckbox: function _getSelectAllCheckbox() { + var checkbox = React.createElement(Checkbox, { + name: 'selectallcb', + value: 'selected', + disabled: !this.props.enableSelectAll, + onCheck: this._onSelectAll }); + + return { + content: checkbox, + style: { + paddingLeft: 24, + paddingRight: 24 + } + }; + }, + + _onSelectAll: function _onSelectAll() { + if (this.props.onSelectAll) this.props.onSelectAll(); + }, + + _onColumnClick: function _onColumnClick(e, columnNumber) { + if (this.props.onColumnClick) this.props.onColumnClick(e, columnNumber); + } + +}); + +module.exports = TableHeader; +},{"../checkbox":67,"../mixins/style-propable":103,"./table-header-column":138,"react":357}],140:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); + +var TableRowColumn = React.createClass({ + displayName: 'TableRowColumn', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + columnNumber: React.PropTypes.number.isRequired, + onClick: React.PropTypes.func, + onHover: React.PropTypes.func, + onHoverExit: React.PropTypes.func, + hoverable: React.PropTypes.bool + }, + + getDefaultProps: function getDefaultProps() { + return { + hoverable: false + }; + }, + + getInitialState: function getInitialState() { + return { + hovered: false + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.tableRowColumn; + }, + + getStyles: function getStyles() { + var theme = this.getTheme(); + var styles = { + paddingLeft: theme.spacing, + paddingRight: theme.spacing, + height: theme.height, + textAlign: 'left', + fontSize: 13, + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis' + }; + + if (React.Children.count(this.props.children) === 1 && !isNaN(this.props.children)) { + styles.textAlign = 'right'; + } + + return styles; + }, + + render: function render() { + var className = 'mui-table-row-column'; + var styles = this.getStyles(); + var handlers = { + onClick: this._onClick, + onMouseOver: this._onMouseOver, + onMouseOut: this._onMouseOut + }; + + return React.createElement( + 'td', + _extends({ + key: this.props.key, + className: className, + style: this.mergeAndPrefix(styles, this.props.style) + }, handlers), + this.props.children + ); + }, + + _onClick: function _onClick(e) { + if (this.props.onClick) this.props.onClick(e, this.props.columnNumber); + }, + + _onMouseOver: function _onMouseOver(e) { + if (this.props.hoverable) { + this.setState({ hovered: true }); + if (this.props.onHover) this.props.onHover(e, this.props.columnNumber); + } + }, + + _onMouseOut: function _onMouseOut(e) { + if (this.props.hoverable) { + this.setState({ hovered: false }); + if (this.props.onHoverExit) this.props.onHoverExit(e, this.props.columnNumber); + } + } + +}); + +module.exports = TableRowColumn; +},{"../mixins/style-propable":103,"react":357}],141:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var Checkbox = require('../checkbox'); +var StylePropable = require('../mixins/style-propable'); +var TableRowColumn = require('./table-row-column'); +var Tooltip = require('../tooltip'); + +var TableRow = React.createClass({ + displayName: 'TableRow', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + rowNumber: React.PropTypes.number.isRequired, + columns: React.PropTypes.array.isRequired, + onRowClick: React.PropTypes.func, + onCellClick: React.PropTypes.func, + onRowHover: React.PropTypes.func, + onRowHoverExit: React.PropTypes.func, + onCellHover: React.PropTypes.func, + onCellHoverExit: React.PropTypes.func, + selected: React.PropTypes.bool, + selectable: React.PropTypes.bool, + striped: React.PropTypes.bool, + hoverable: React.PropTypes.bool, + displayBorder: React.PropTypes.bool, + displayRowCheckbox: React.PropTypes.bool + }, + + getDefaultProps: function getDefaultProps() { + return { + selected: false, + selectable: true, + striped: false, + hoverable: false, + displayBorder: true, + displayRowCheckbox: true + }; + }, + + getInitialState: function getInitialState() { + return { + hovered: false + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.tableRow; + }, + + getStyles: function getStyles() { + var theme = this.getTheme(); + var cellBgColor = 'inherit'; + if (this.state.hovered) { + cellBgColor = theme.hoverColor; + } else if (this.props.selected) { + cellBgColor = theme.selectedColor; + } else if (this.props.striped) { + cellBgColor = theme.stripeColor; + } + + var styles = { + root: { + borderBottom: '1px solid ' + this.getTheme().borderColor + }, + cell: { + backgroundColor: cellBgColor, + color: this.getTheme().textColor + } + }; + + if (!this.props.displayBorder) { + styles.root.borderBottom = ''; + } + + return styles; + }, + + render: function render() { + var className = 'mui-table-row'; + var columns = this.props.columns.slice(); + if (this.props.displayRowCheckbox) { + columns.splice(0, 0, this._getRowCheckbox()); + } + + return React.createElement( + 'tr', + { className: className, onClick: this._onRowClick, style: this.getStyles().root }, + this._getColumns(columns) + ); + }, + + _getColumns: function _getColumns(columns) { + var rowColumns = []; + var styles = this.getStyles(); + + for (var index = 0; index < columns.length; index++) { + var key = this.props.rowNumber + '-' + index; + var _columns$index = columns[index]; + var content = _columns$index.content; + var style = _columns$index.style; + + if (content === undefined) content = columns[index]; + + var columnComponent = React.createElement( + TableRowColumn, + { + key: key, + columnNumber: index, + style: this.mergeStyles(styles.cell, style), + hoverable: this.props.hoverable, + onClick: this._onCellClick, + onHover: this._onCellHover, + onHoverExit: this._onCellHoverExit }, + content + ); + + rowColumns.push(columnComponent); + } + + return rowColumns; + }, + + _getRowCheckbox: function _getRowCheckbox() { + var key = this.props.rowNumber + '-cb'; + var checkbox = React.createElement(Checkbox, { + ref: 'rowSelectCB', + name: key, + value: 'selected', + disabled: !this.props.selectable, + defaultChecked: this.props.selected, + onCheck: this._onCheck }); + + return { + content: checkbox, + style: { + paddingLeft: 24, + paddingRight: 24 + } + }; + }, + + _onRowClick: function _onRowClick(e) { + if (this.props.onRowClick) this.props.onRowClick(e, this.props.rowNumber); + }, + + _onRowHover: function _onRowHover(e) { + if (this.props.onRowHover) this.props.onRowHover(e, this.props.rowNumber); + }, + + _onRowHoverExit: function _onRowHoverExit(e) { + if (this.props.onRowHoverExit) this.props.onRowHoverExit(e, this.props.rowNumber); + }, + + _onCellClick: function _onCellClick(e, columnIndex) { + if (this.props.selectable && this.props.onCellClick) this.props.onCellClick(e, this.props.rowNumber, columnIndex); + if (this.refs.rowSelectCB !== undefined) this.refs.rowSelectCB.setChecked(!this.refs.rowSelectCB.isChecked()); + this._onRowClick(e); + }, + + _onCellHover: function _onCellHover(e, columnIndex) { + if (this.props.hoverable) { + this.setState({ hovered: true }); + if (this.props.onCellHover) this.props.onCellHover(e, this.props.rowNumber, columnIndex); + this._onRowHover(e); + } + }, + + _onCellHoverExit: function _onCellHoverExit(e, columnIndex) { + if (this.props.hoverable) { + this.setState({ hovered: false }); + if (this.props.onCellHoverExit) this.props.onCellHoverExit(e, this.props.rowNumber, columnIndex); + this._onRowHoverExit(e); + } + }, + + _onCheck: function _onCheck(e) { + e.ctrlKey = true; + this._onCellClick(e, 0); + } + +}); + +module.exports = TableRow; +},{"../checkbox":67,"../mixins/style-propable":103,"../tooltip":163,"./table-row-column":140,"react":357}],142:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var ClickAwayable = require('../mixins/click-awayable'); +var TableHeader = require('./table-header'); +var TableRow = require('./table-row'); +var TableFooter = require('./table-footer'); +var DOM = require('../utils/dom'); + +var Table = React.createClass({ + displayName: 'Table', + + mixins: [StylePropable, ClickAwayable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + rowData: React.PropTypes.array.isRequired, + columnOrder: React.PropTypes.array, + headerColumns: React.PropTypes.object, + footerColumns: React.PropTypes.object, + header: React.PropTypes.element, + footer: React.PropTypes.element, + height: React.PropTypes.string, + defaultColumnWidth: React.PropTypes.string, + fixedHeader: React.PropTypes.bool, + fixedFooter: React.PropTypes.bool, + stripedRows: React.PropTypes.bool, + showRowHover: React.PropTypes.bool, + selectable: React.PropTypes.bool, + multiSelectable: React.PropTypes.bool, + showRowSelectCheckbox: React.PropTypes.bool, + canSelectAll: React.PropTypes.bool, + displaySelectAll: React.PropTypes.bool, + onRowSelection: React.PropTypes.func, + onCellClick: React.PropTypes.func, + onRowHover: React.PropTypes.func, + onRowHoverExit: React.PropTypes.func, + onCellHover: React.PropTypes.func, + onCellHoverExit: React.PropTypes.func + }, + + getDefaultProps: function getDefaultProps() { + return { + fixedHeader: true, + fixedFooter: true, + height: 'inherit', + defaultColumnWidth: '50px', + stripedRows: false, + showRowHover: false, + selectable: true, + showRowSelectCheckbox: true, + multiSelectable: false, + canSelectAll: false, + displaySelectAll: true + }; + }, + + getInitialState: function getInitialState() { + return { + selectedRows: [] + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.table; + }, + + getStyles: function getStyles() { + var styles = { + root: { + backgroundColor: this.getTheme().backgroundColor, + padding: '0 ' + this.context.muiTheme.spacing.desktopGutter + 'px', + width: '100%', + borderCollapse: 'collapse', + borderSpacing: 0, + tableLayout: 'fixed' + }, + bodyTable: { + height: this.props.fixedHeader || this.props.fixedFooter ? this.props.height : 'auto', + overflowX: 'hidden', + overflowY: 'auto' + }, + tableWrapper: { + height: this.props.fixedHeader || this.props.fixedFooter ? 'auto' : this.props.height, + overflow: 'auto' + } + }; + + return styles; + }, + + componentClickAway: function componentClickAway() { + if (this.state.selectedRows.length) this.setState({ selectedRows: [] }); + }, + + render: function render() { + var className = 'mui-table'; + var styles = this.getStyles(); + + var tHead = this._getHeader(); + var tBody = this._getBody(); + var tFoot = this._getFooter(); + + var headerTable = undefined, + footerTable = undefined; + var inlineHeader = undefined, + inlineFooter = undefined; + if (tHead !== undefined) { + if (this.props.fixedHeader) { + headerTable = React.createElement( + 'div', + { className: 'mui-header-table' }, + React.createElement( + 'table', + { ref: 'headerTable', className: className, style: styles.root }, + tHead + ) + ); + } else { + inlineHeader = tHead; + } + } + if (tFoot !== undefined) { + if (this.props.fixedFooter) { + footerTable = React.createElement( + 'div', + { className: 'mui-footer-table' }, + React.createElement( + 'table', + { ref: 'footerTable', className: className, style: styles.root }, + tFoot + ) + ); + } else { + inlineFooter = tFoot; + } + } + + return React.createElement( + 'div', + { className: 'mui-table-wrapper', style: styles.tableWrapper }, + headerTable, + React.createElement( + 'div', + { className: 'mui-body-table', style: styles.bodyTable }, + React.createElement( + 'table', + { ref: 'bodyTable', className: className, style: styles.root }, + inlineHeader, + inlineFooter, + tBody + ) + ), + footerTable + ); + }, + + _getHeader: function _getHeader() { + if (this.props.header) return this.props.header; + + if (this.props.headerColumns !== undefined) { + var orderedHeaderColumns = this._orderColumnBasedData(this.props.headerColumns); + return React.createElement(TableHeader, { + columns: orderedHeaderColumns, + enableSelectAll: this.props.canSelectAll && this.props.selectable, + displaySelectAll: this.props.displaySelectAll, + onSelectAll: this._onSelectAll }); + } + }, + + _getFooter: function _getFooter() { + if (this.props.footer) return this.props.footer; + + if (this.props.footerColumns !== undefined) { + var orderedFooterColumns = this._orderColumnBasedData(this.props.footerColumns); + if (this.props.displaySelectAll) { + orderedFooterColumns.splice(0, 0, { content: '' }); + } + + return React.createElement(TableFooter, { columns: orderedFooterColumns }); + } + }, + + _getBody: function _getBody() { + var body = this._orderColumnBasedData(this.props.rowData, (function (rowData, rowNumber) { + var selected = this._isRowSelected(rowNumber); + var striped = this.props.stripedRows && rowNumber % 2 === 0; + var border = true; + if (rowNumber === this.props.rowData.length - 1) { + border = false; + } + + var row = React.createElement(TableRow, { + key: 'r-' + rowNumber, + rowNumber: rowNumber, + columns: rowData, + selected: selected, + striped: striped, + hoverable: this.props.showRowHover, + displayBorder: border, + selectable: this.props.selectable, + onRowClick: this._handleRowClick, + onCellClick: this._handleCellClick, + onRowHover: this._handleRowHover, + onRowHoverExit: this._handleRowHoverExit, + onCellHover: this._handleCellHover, + onCellHoverExit: this._handleCellHoverExit }); + + return row; + }).bind(this)); + + return React.createElement( + 'tbody', + { style: { height: this.props.height } }, + body + ); + }, + + _orderColumnBasedData: function _orderColumnBasedData(columnBasedData, cb) { + // If we do not have a columnOrder, return. + if (this.props.columnOrder === undefined) return; + + var data = Object.prototype.toString.call(columnBasedData) !== '[object Array]' ? [columnBasedData] : columnBasedData; + var orderedData = []; + + for (var rowIdx = 0; rowIdx < data.length; rowIdx++) { + var rowData = data[rowIdx]; + var orderedRowData = []; + + for (var colIdx = 0; colIdx < this.props.columnOrder.length; colIdx++) { + var columnId = this.props.columnOrder[colIdx]; + var columnData = rowData[columnId] || {}; + + orderedRowData.push(columnData); + } + + if (orderedRowData.length) { + rowData = orderedRowData; + } + + // Fixed table layout only requires widths on first row. + if (rowIdx === 1 && data.length > 1) { + rowData = this._setColumnWidths(rowData); + } + + orderedData.push(cb !== undefined ? cb(rowData, rowIdx) : rowData); + } + + return data.length === 1 ? orderedData[0] : orderedData; + }, + + _setColumnWidths: function _setColumnWidths(columnData) { + columnData.forEach((function (column) { + if (column.style === undefined) { + column.style = { + width: this.props.defaultColumnWidth, + maxWidth: this.props.defaultColumnWidth + }; + } else { + if (column.style.width === undefined) column.style.width = this.props.defaultColumnWidth; + if (column.style.maxWidth === undefined) column.style.maxWidth = this.props.defaultColumnWidth; + } + }).bind(this)); + + return columnData; + }, + + _isRowSelected: function _isRowSelected(rowNumber) { + if (this.state.allRowsSelected) { + return true; + } + + for (var i = 0; i < this.state.selectedRows.length; i++) { + var selection = this.state.selectedRows[i]; + + if (typeof selection === 'object') { + if (this._isValueInRange(rowNumber, selection)) return true; + } else { + if (selection === rowNumber) return true; + } + } + + return false; + }, + + _isValueInRange: function _isValueInRange(value, range) { + if (range.start <= value && value <= range.end || range.end <= value && value <= range.start) { + return true; + } + + return false; + }, + + _handleRowClick: function _handleRowClick(e, rowNumber) { + // Prevent text selection while selecting rows. + window.getSelection().removeAllRanges(); + + if (this.props.selectable) { + this._processRowSelection(e, rowNumber); + } + }, + + _processRowSelection: function _processRowSelection(e, rowNumber) { + var selectedRows = this.state.selectedRows; + + if (e.shiftKey && this.props.multiSelectable && selectedRows.length) { + var lastSelection = selectedRows[selectedRows.length - 1]; + var start = undefined, + end = undefined, + direction = undefined; + + if (typeof lastSelection === 'object') { + lastSelection.end = rowNumber; + } else { + selectedRows.push({ start: lastSelection, end: rowNumber }); + } + } else if ((e.ctrlKey && !e.metaKey || e.metaKey && !e.ctrlKey) && this.props.multiSelectable) { + var idx = selectedRows.indexOf(rowNumber); + if (idx < 0) { + 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(selectedRows); + }, + + _handleCellClick: function _handleCellClick(e, rowNumber, columnNumber) { + if (this.props.onCellClick) this.props.onCellClick(rowNumber, this._getColumnId(columnNumber)); + this._handleRowClick(e, rowNumber); + }, + + _handleRowHover: function _handleRowHover(e, rowNumber) { + if (this.props.onRowHover) this.props.onRowHover(rowNumber); + }, + + _handleRowHoverExit: function _handleRowHoverExit(e, rowNumber) { + if (this.props.onRowHoverExit) this.props.onRowHoverExit(rowNumber); + }, + + _handleCellHover: function _handleCellHover(e, rowNumber, columnNumber) { + if (this.props.onCellHover) this.props.onCellHover(rowNumber, this._getColumnId(columnNumber)); + this._handleRowHover(e, rowNumber); + }, + + _handleCellHoverExit: function _handleCellHoverExit(e, rowNumber, columnNumber) { + if (this.props.onCellHoverExit) this.props.onCellHoverExit(rowNumber, this._getColumnId(columnNumber)); + this._handleRowHoverExit(e, rowNumber); + }, + + _onSelectAll: function _onSelectAll() { + this.setState({ allRowsSelected: !this.state.allRowsSelected }); + }, + + _getColumnId: function _getColumnId(columnNumber) { + var columnId = columnNumber; + if (this.props.displayRowCheckbox) columnId--; + columnId = this.props.columnOrder.length ? this.props.columnOrder[columnId] : columnId; + + return columnId; + } + +}); + +module.exports = Table; +},{"../mixins/click-awayable":102,"../mixins/style-propable":103,"../utils/dom":169,"./table-footer":137,"./table-header":139,"./table-row":141,"react":357}],143:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable.js'); +var Colors = require('../styles/colors.js'); +var Tab = React.createClass({ + displayName: 'Tab', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + handleTouchTap: React.PropTypes.func, + selected: React.PropTypes.bool, + width: React.PropTypes.string + }, + + handleTouchTap: function handleTouchTap() { + this.props.handleTouchTap(this.props.tabIndex, this); + }, + + render: function render() { + var styles = this.mergeAndPrefix({ + 'display': 'table-cell', + 'cursor': 'pointer', + 'textAlign': 'center', + 'verticalAlign': 'middle', + 'height': '48px', + 'color': Colors.white, + 'opacity': '.6', + 'fontSize': '14px', + 'fontWeight': '500', + 'whiteSpace': 'initial', + 'fontFamily': this.context.muiTheme.contentFontFamily, + 'boxSizing': 'border-box', + 'width': this.props.width + }, this.props.style); + + if (this.props.selected) styles.opacity = '1'; + + return React.createElement( + 'div', + { style: styles, onTouchTap: this.handleTouchTap, routeName: this.props.route }, + this.props.label + ); + } + +}); + +module.exports = Tab; +},{"../mixins/style-propable.js":103,"../styles/colors.js":118,"react":357}],144:[function(require,module,exports){ +'use strict'; + +var React = require('react'); + +var TabTemplate = React.createClass({ + displayName: 'TabTemplate', + + render: function render() { + + var styles = { + 'height': '0px', + 'overflow': 'hidden', + 'width': '100%', + 'position': 'relative', + 'textAlign': 'initial' + }; + + if (this.props.selected) { + delete styles.height; + delete styles.overflow; + } + + return React.createElement( + 'div', + { style: styles }, + this.props.children + ); + } +}); + +module.exports = TabTemplate; +},{"react":357}],145:[function(require,module,exports){ +'use strict'; + +var React = require('react/addons'); +var TabTemplate = require('./tabTemplate'); +var InkBar = require('../ink-bar'); +var StylePropable = require('../mixins/style-propable.js'); +var Events = require('../utils/events'); + +var Tabs = React.createClass({ + displayName: 'Tabs', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + initialSelectedIndex: React.PropTypes.number, + onActive: React.PropTypes.func, + tabWidth: React.PropTypes.number, + tabItemContainerStyle: React.PropTypes.object + }, + + getInitialState: function getInitialState() { + var selectedIndex = 0; + if (this.props.initialSelectedIndex && this.props.initialSelectedIndex < this.props.children.length) { + selectedIndex = this.props.initialSelectedIndex; + } + return { + selectedIndex: selectedIndex + }; + }, + + getEvenWidth: function getEvenWidth() { + return parseInt(window.getComputedStyle(React.findDOMNode(this)).getPropertyValue('width'), 10); + }, + + componentDidMount: function componentDidMount() { + this._updateTabWidth(); + Events.on(window, 'resize', this._updateTabWidth); + }, + + componentWillUnmount: function componentWillUnmount() { + Events.off(window, 'resize', this._updateTabWidth); + }, + + componentWillReceiveProps: function componentWillReceiveProps(newProps) { + if (newProps.hasOwnProperty('style')) this._updateTabWidth(); + }, + + handleTouchTap: function handleTouchTap(tabIndex, tab) { + if (this.props.onChange && this.state.selectedIndex !== tabIndex) { + this.props.onChange(tabIndex, tab); + } + + this.setState({ selectedIndex: tabIndex }); + //default CB is _onActive. Can be updated in tab.jsx + if (tab.props.onActive) tab.props.onActive(tab); + }, + + getStyles: function getStyles() { + var themeVariables = this.context.muiTheme.component.tabs; + + return { + tabItemContainer: { + margin: '0', + padding: '0', + width: '100%', + height: '48px', + backgroundColor: themeVariables.backgroundColor, + whiteSpace: 'nowrap', + display: 'table' + } + }; + }, + + render: function render() { + var styles = this.getStyles(); + + var tabContent = []; + var width = this.state.fixedWidth ? 100 / this.props.children.length + '%' : this.props.tabWidth + 'px'; + + var left = 'calc(' + width + '*' + this.state.selectedIndex + ')'; + + var tabs = React.Children.map(this.props.children, function (tab, index) { + if (tab.type.displayName === 'Tab') { + + if (tab.props.children) { + tabContent.push(React.createElement(TabTemplate, { + key: index, + selected: this.state.selectedIndex === index + }, tab.props.children)); + } else { + tabContent.push(undefined); + } + + return React.addons.cloneWithProps(tab, { + key: index, + selected: this.state.selectedIndex === index, + tabIndex: index, + width: width, + handleTouchTap: this.handleTouchTap + }); + } else { + var type = tab.type.displayName || tab.type; + throw 'Tabs only accepts Tab Components as children. Found ' + type + ' as child number ' + (index + 1) + ' of Tabs'; + } + }, this); + return React.createElement( + 'div', + { style: this.mergeAndPrefix(this.props.style) }, + React.createElement( + 'div', + { style: this.mergeAndPrefix(styles.tabItemContainer, this.props.tabItemContainerStyle) }, + tabs + ), + React.createElement(InkBar, { left: left, width: width }), + React.createElement( + 'div', + null, + tabContent + ) + ); + }, + + _tabWidthPropIsValid: function _tabWidthPropIsValid() { + return this.props.tabWidth && this.props.tabWidth * this.props.children.length <= this.getEvenWidth(); + }, + + // Validates that the tabWidth can fit all tabs on the tab bar. If not, the + // tabWidth is recalculated and fixed. + _updateTabWidth: function _updateTabWidth() { + if (this._tabWidthPropIsValid()) { + this.setState({ + fixedWidth: false + }); + } else { + this.setState({ + fixedWidth: true + }); + } + } + +}); + +module.exports = Tabs; +},{"../ink-bar":91,"../mixins/style-propable.js":103,"../utils/events":170,"./tabTemplate":144,"react/addons":185}],146:[function(require,module,exports){ +(function (process){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var ColorManipulator = require('./utils/color-manipulator'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var UniqueId = require('./utils/unique-id'); +var EnhancedTextarea = require('./enhanced-textarea'); + +var TextField = React.createClass({ + displayName: 'TextField', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + errorText: React.PropTypes.string, + floatingLabelText: React.PropTypes.string, + fullWidth: React.PropTypes.bool, + hintText: React.PropTypes.string, + id: React.PropTypes.string, + multiLine: React.PropTypes.bool, + onBlur: React.PropTypes.func, + onChange: React.PropTypes.func, + onFocus: React.PropTypes.func, + onKeyDown: React.PropTypes.func, + onEnterKeyDown: React.PropTypes.func, + type: React.PropTypes.string, + rows: React.PropTypes.number, + inputStyle: React.PropTypes.object, + floatingLabelStyle: React.PropTypes.object + }, + + getDefaultProps: function getDefaultProps() { + return { + fullWidth: false, + type: 'text', + rows: 1 + }; + }, + + getInitialState: function getInitialState() { + var props = this.props; + if (props.children) props = props.children.props; + return { + errorText: this.props.errorText, + hasValue: props.value || props.defaultValue || props.valueLink && props.valueLink.value + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.textField; + }, + + componentDidMount: function componentDidMount() { + this._uniqueId = UniqueId.generate(); + }, + + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + var hasErrorProp = nextProps.hasOwnProperty('errorText'); + var newState = {}; + + if (hasErrorProp) newState.errorText = nextProps.errorText; + if (nextProps.children && nextProps.children.props) { + nextProps = nextProps.children.props; + } + + var hasValueLinkProp = nextProps.hasOwnProperty('valueLink'); + var hasValueProp = nextProps.hasOwnProperty('value'); + var hasNewDefaultValue = nextProps.defaultValue !== this.props.defaultValue; + + if (hasValueLinkProp) { + newState.hasValue = nextProps.valueLink.value; + } else if (hasValueProp) { + newState.hasValue = nextProps.value; + } else if (hasNewDefaultValue) { + newState.hasValue = nextProps.defaultValue; + } + + if (newState) this.setState(newState); + }, + + getStyles: function getStyles() { + var props = this.props; + var theme = this.getTheme(); + + var styles = { + root: { + fontSize: 16, + lineHeight: '24px', + width: props.fullWidth ? '100%' : 256, + height: (props.rows - 1) * 24 + (props.floatingLabelText ? 72 : 48), + display: 'inline-block', + position: 'relative', + fontFamily: this.context.muiTheme.contentFontFamily, + transition: Transitions.easeOut('200ms', 'height') + }, + error: { + position: 'absolute', + bottom: -10, + fontSize: 12, + lineHeight: '12px', + color: theme.errorColor, + transition: Transitions.easeOut() + }, + hint: { + position: 'absolute', + lineHeight: '48px', + opacity: 1, + color: theme.hintColor, + transition: Transitions.easeOut() + }, + input: { + WebkitTapHighlightColor: 'rgba(0,0,0,0)', + position: 'relative', + width: '100%', + height: '100%', + border: 'none', + outline: 'none', + backgroundColor: theme.backgroundColor, + color: props.disabled ? theme.disabledTextColor : theme.textColor, + font: 'inherit' + }, + underline: { + border: 'none', + borderBottom: 'solid 1px ' + theme.borderColor, + position: 'absolute', + width: '100%', + bottom: 8, + margin: 0, + MozBoxSizing: 'content-box', + boxSizing: 'content-box', + height: 0 + }, + underlineAfter: { + position: 'absolute', + width: '100%', + overflow: 'hidden', + userSelect: 'none', + cursor: 'default', + bottom: 8, + borderBottom: 'dotted 2px ' + theme.disabledTextColor + } + }; + + styles.floatingLabel = this.mergeStyles(styles.hint, { + top: 24, + opacity: 1, + transform: 'scale(1) translate3d(0, 0, 0)', + transformOrigin: 'left top' + }); + + styles.textarea = this.mergeStyles(styles.input, { + marginTop: props.floatingLabelText ? 36 : 12, + marginBottom: props.floatingLabelText ? -36 : -12, + boxSizing: 'border-box', + font: 'inherit' + }); + + styles.focusUnderline = this.mergeStyles(styles.underline, { + borderBottom: 'solid 2px', + borderColor: theme.focusColor, + transform: 'scaleX(0)', + transition: Transitions.easeOut() + }); + + if (this.state.isFocused) { + styles.floatingLabel.color = theme.focusColor; + styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(0, -18px, 0)'; + styles.focusUnderline.transform = 'scaleX(1)'; + } + + if (this.state.hasValue) { + styles.floatingLabel.color = ColorManipulator.fade(props.disabled ? theme.disabledTextColor : theme.floatingLabelColor, 0.5); + styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(0, -18px, 0)'; + styles.hint.opacity = 0; + } + + if (props.floatingLabelText) { + styles.hint.top = 24; + styles.hint.opacity = 0; + styles.input.boxSizing = 'border-box'; + if (this.state.isFocused && !this.state.hasValue) styles.hint.opacity = 1; + } + + if (props.style && props.style.height) { + styles.hint.lineHeight = props.style.height; + } + + if (this.state.errorText && this.state.isFocused) styles.floatingLabel.color = theme.errorColor; + if (props.floatingLabelText && !props.multiLine) styles.input.paddingTop = 26; + + if (this.state.errorText) { + styles.focusUnderline.borderColor = theme.errorColor; + styles.focusUnderline.transform = 'scaleX(1)'; + } + + return styles; + }, + + render: function render() { + var _props = this.props; + var className = _props.className; + var errorText = _props.errorText; + var floatingLabelText = _props.floatingLabelText; + var fullWidth = _props.fullWidth; + var hintText = _props.hintText; + var id = _props.id; + var multiLine = _props.multiLine; + var onBlur = _props.onBlur; + var onChange = _props.onChange; + var onFocus = _props.onFocus; + var type = _props.type; + var rows = _props.rows; + + var other = _objectWithoutProperties(_props, ['className', 'errorText', 'floatingLabelText', 'fullWidth', 'hintText', 'id', 'multiLine', 'onBlur', 'onChange', 'onFocus', 'type', 'rows']); + + var styles = this.getStyles(); + + var inputId = this.props.id || this._uniqueId; + + var errorTextElement = this.state.errorText ? React.createElement( + 'div', + { style: this.mergeAndPrefix(styles.error) }, + this.state.errorText + ) : null; + + var hintTextElement = this.props.hintText ? React.createElement( + 'div', + { style: this.mergeAndPrefix(styles.hint) }, + this.props.hintText + ) : null; + + var floatingLabelTextElement = this.props.floatingLabelText ? React.createElement( + 'label', + { + style: this.mergeAndPrefix(styles.floatingLabel, this.props.floatingLabelStyle), + htmlFor: inputId }, + this.props.floatingLabelText + ) : null; + + var inputProps; + var inputElement; + + inputProps = { + id: inputId, + ref: this._getRef(), + style: this.mergeAndPrefix(styles.input, this.props.inputStyle), + onBlur: this._handleInputBlur, + onFocus: this._handleInputFocus, + disabled: this.props.disabled, + onKeyDown: this._handleInputKeyDown + }; + + if (!this.props.hasOwnProperty('valueLink')) { + inputProps.onChange = this._handleInputChange; + } + if (this.props.children) { + inputElement = React.cloneElement(this.props.children, _extends({}, inputProps, this.props.children.props)); + } else { + inputElement = this.props.multiLine ? React.createElement(EnhancedTextarea, _extends({}, other, inputProps, { + rows: this.props.rows, + onHeightChange: this._handleTextAreaHeightChange, + textareaStyle: this.mergeAndPrefix(styles.textarea) })) : React.createElement('input', _extends({}, other, inputProps, { + type: this.props.type })); + } + + var underlineElement = this.props.disabled ? React.createElement('div', { style: this.mergeAndPrefix(styles.underlineAfter) }) : React.createElement('hr', { style: this.mergeAndPrefix(styles.underline) }); + var focusUnderlineElement = React.createElement('hr', { style: this.mergeAndPrefix(styles.focusUnderline) }); + + return React.createElement( + 'div', + { className: this.props.className, style: this.mergeAndPrefix(styles.root, this.props.style) }, + floatingLabelTextElement, + hintTextElement, + inputElement, + underlineElement, + focusUnderlineElement, + errorTextElement + ); + }, + + blur: function blur() { + if (this.isMounted()) this._getInputNode().blur(); + }, + + clearValue: function clearValue() { + this.setValue(''); + }, + + focus: function focus() { + if (this.isMounted()) this._getInputNode().focus(); + }, + + getValue: function getValue() { + return this.isMounted() ? this._getInputNode().value : undefined; + }, + + setErrorText: function setErrorText(newErrorText) { + if (process.env.NODE_ENV !== 'production' && this.props.hasOwnProperty('errorText')) { + console.error('Cannot call TextField.setErrorText when errorText is defined as a property.'); + } else if (this.isMounted()) { + this.setState({ errorText: newErrorText }); + } + }, + + setValue: function setValue(newValue) { + if (process.env.NODE_ENV !== 'production' && this._isControlled()) { + console.error('Cannot call TextField.setValue when value or valueLink is defined as a property.'); + } else if (this.isMounted()) { + + if (this.props.multiLine) { + this.refs[this._getRef()].setValue(newValue); + } else { + this._getInputNode().value = newValue; + } + + this.setState({ hasValue: newValue }); + } + }, + + _getRef: function _getRef() { + return this.props.ref ? this.props.ref : 'input'; + }, + + _getInputNode: function _getInputNode() { + return this.props.children || this.props.multiLine ? this.refs[this._getRef()].getInputNode() : React.findDOMNode(this.refs[this._getRef()]); + }, + + _handleInputBlur: function _handleInputBlur(e) { + this.setState({ isFocused: false }); + if (this.props.onBlur) this.props.onBlur(e); + }, + + _handleInputChange: function _handleInputChange(e) { + this.setState({ hasValue: e.target.value }); + if (this.props.onChange) this.props.onChange(e); + }, + + _handleInputFocus: function _handleInputFocus(e) { + if (this.props.disabled) return; + this.setState({ isFocused: true }); + if (this.props.onFocus) this.props.onFocus(e); + }, + + _handleInputKeyDown: function _handleInputKeyDown(e) { + if (e.keyCode === 13 && this.props.onEnterKeyDown) this.props.onEnterKeyDown(e); + if (this.props.onKeyDown) this.props.onKeyDown(e); + }, + + _handleTextAreaHeightChange: function _handleTextAreaHeightChange(e, height) { + var newHeight = height + 24; + if (this.props.floatingLabelText) newHeight += 24; + React.findDOMNode(this).style.height = newHeight + 'px'; + }, + + _isControlled: function _isControlled() { + return this.props.hasOwnProperty('value') || this.props.hasOwnProperty('valueLink'); + } + +}); + +module.exports = TextField; +}).call(this,require('_process')) + +},{"./enhanced-textarea":85,"./mixins/style-propable":103,"./styles/transitions":124,"./utils/color-manipulator":166,"./utils/unique-id":175,"_process":7,"react":357}],147:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var React = require('react'); +var ThemeManager = require('./styles/theme-manager'); + +var Theme = React.createClass({ + displayName: 'Theme', + + propTypes: { + theme: React.PropTypes.object + }, + + childContextTypes: { + muiTheme: React.PropTypes.object.isRequired, + muiThemeManager: React.PropTypes.object.isRequired + }, + + getChildContext: function getChildContext() { + return { + muiTheme: this.themeManager.getCurrentTheme(), + muiThemeManager: this.themeManager + }; + }, + + componentWillMount: function componentWillMount() { + this.themeManager = new ThemeManager(); + + if (this.props.theme) { + this.themeManager.setTheme(this.props.theme); + } + }, + + render: function render() { + return this.props.children({ + muiTheme: this.themeManager.getCurrentTheme(), + muiThemeManager: this.themeManager + }); + } +}); + +function getDisplayName(Component) { + return Component.displayName || Component.name || 'Component'; +} + +function theme(customTheme) { + return function (Component) { + return React.createClass({ + + displayName: 'Theme(' + getDisplayName(Component) + ')', + + render: function render() { + return React.createElement( + Theme, + { theme: customTheme }, + (function (props) { + return React.createElement(Component, _extends({}, this.props, props)); + }).bind(this) + ); + } + }); + }; +} + +module.exports = Theme; +module.exports.theme = theme; +},{"./styles/theme-manager":121,"react":357}],148:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var EnhancedButton = require('../enhanced-button'); +var Transitions = require('../styles/transitions'); + +var ClockButton = React.createClass({ + displayName: 'ClockButton', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + position: React.PropTypes.oneOf(['left', 'right']) + }, + + getDefaultProps: function getDefaultProps() { + return { + position: 'left' + }; + }, + _handleTouchTap: function _handleTouchTap() { + + this.setState({ + selected: true + }); + this.props.onTouchTap(); + }, + getTheme: function getTheme() { + return this.context.muiTheme.component.timePicker; + }, + render: function render() { + var _props = this.props; + var className = _props.className; + + var other = _objectWithoutProperties(_props, ['className']); + + var styles = { + root: { + position: 'absolute', + bottom: '65px', + pointerEvents: 'auto', + height: '50px', + width: '50px', + borderRadius: '100%' + }, + + label: { + position: 'absolute', + top: '17px', + left: '14px' + }, + + select: { + position: 'absolute', + height: 50, + width: 50, + top: '0px', + left: '0px', + opacity: 0, + borderRadius: '50%', + transform: 'scale(0)', + transition: Transitions.easeOut(), + backgroundColor: this.getTheme().accentColor + } + }; + + if (this.props.selected) { + styles.label.color = this.getTheme().selectTextColor; + styles.select.opacity = 1; + styles.select.transform = 'scale(1)'; + } + + if (this.props.position == 'right') { + styles.root.right = '5px'; + } else { + styles.root.left = '5px'; + } + + return React.createElement( + EnhancedButton, + _extends({}, other, { + style: this.mergeAndPrefix(styles.root), + disableFocusRipple: true, + disableTouchRipple: true, + onTouchTap: this._handleTouchTap }), + React.createElement('span', { style: this.mergeAndPrefix(styles.select) }), + React.createElement( + 'span', + { style: this.mergeAndPrefix(styles.label) }, + this.props.children + ) + ); + } +}); + +module.exports = ClockButton; +},{"../enhanced-button":83,"../mixins/style-propable":103,"../styles/transitions":124,"react":357}],149:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var ClockNumber = require('./clock-number'); +var ClockPointer = require('./clock-pointer'); + +function rad2deg(rad) { + return rad * 57.29577951308232; +} + +function getTouchEventOffsetValues(e) { + var el = e.target; + var boundingRect = el.getBoundingClientRect(); + + var offset = { + offsetX: e.clientX - boundingRect.left, + offsetY: e.clientY - boundingRect.top + }; + + return offset; +} + +var ClockHours = React.createClass({ + displayName: 'ClockHours', + + mixins: [StylePropable], + + propTypes: { + initialHours: React.PropTypes.number, + onChange: React.PropTypes.func, + format: React.PropTypes.oneOf(['ampm', '24hr']) + }, + + center: { x: 0, y: 0 }, + basePoint: { x: 0, y: 0 }, + isMousePressed: function isMousePressed(e) { + + if (typeof e.buttons == 'undefined') { + return e.nativeEvent.which; + } + + return e.buttons; + }, + getDefaultProps: function getDefaultProps() { + return { + initialHours: new Date().getHours(), + onChange: function onChange() {}, + format: 'ampm' + }; + }, + + componentDidMount: function componentDidMount() { + var clockElement = React.findDOMNode(this.refs.mask); + + this.center = { + x: clockElement.offsetWidth / 2, + y: clockElement.offsetHeight / 2 + }; + + this.basePoint = { + x: this.center.x, + y: 0 + }; + }, + handleUp: function handleUp(e) { + e.preventDefault(); + this.setClock(e.nativeEvent, true); + }, + handleMove: function handleMove(e) { + e.preventDefault(); + if (this.isMousePressed(e) != 1) return; + this.setClock(e.nativeEvent, false); + }, + handleTouchMove: function handleTouchMove(e) { + e.preventDefault(); + this.setClock(e.changedTouches[0], false); + }, + handleTouchEnd: function handleTouchEnd(e) { + e.preventDefault(); + this.setClock(e.changedTouches[0], true); + }, + setClock: function setClock(e, finish) { + if (typeof e.offsetX === 'undefined') { + var offset = getTouchEventOffsetValues(e); + + e.offsetX = offset.offsetX; + e.offsetY = offset.offsetY; + } + + var hours = this.getHours(e.offsetX, e.offsetY); + + this.props.onChange(hours, finish); + }, + getHours: function getHours(x, y) { + + var step = 30; + x = x - this.center.x; + y = y - this.center.y; + var cx = this.basePoint.x - this.center.x; + var cy = this.basePoint.y - this.center.y; + + var atan = Math.atan2(cx, cy) - Math.atan2(x, y); + + var deg = rad2deg(atan); + deg = Math.round(deg / step) * step; + deg %= 360; + + var value = Math.floor(deg / step) || 0; + + var delta = Math.pow(x, 2) + Math.pow(y, 2); + var distance = Math.sqrt(delta); + + value = value || 12; + if (this.props.format == '24hr') { + if (distance < 90) { + value += 12; + value %= 24; + } + } else { + value %= 12; + } + + return value; + }, + _getSelected: function _getSelected() { + + var hour = this.props.initialHours; + + if (this.props.format == 'ampm') { + hour %= 12; + hour = hour || 12; + } + + return hour; + }, + _getHourNumbers: function _getHourNumbers() { + var style = { + pointerEvents: 'none' + }; + + var hourSize = this.props.format == 'ampm' ? 12 : 24; + + var hours = []; + + for (var i = 1; i <= hourSize; i++) { + hours.push(i % 24); + } + + return hours.map((function (hour) { + + var isSelected = this._getSelected() == hour; + return React.createElement(ClockNumber, { style: style, isSelected: isSelected, type: 'hour', value: hour }); + }).bind(this)); + }, + + render: function render() { + + var styles = { + root: { + height: '100%', + width: '100%', + borderRadius: '100%', + position: 'relative', + pointerEvents: 'none', + boxSizing: 'border-box' + }, + + hitMask: { + height: '100%', + width: '100%', + pointerEvents: 'auto' + } + + }; + + var hours = this._getSelected(); + var numbers = this._getHourNumbers(); + + return React.createElement( + 'div', + { ref: 'clock', style: this.mergeAndPrefix(styles.root) }, + React.createElement(ClockPointer, { hasSelected: true, value: hours, type: 'hour' }), + numbers, + React.createElement('div', { ref: 'mask', style: this.mergeAndPrefix(styles.hitMask), onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onMouseUp: this.handleUp, onMouseMove: this.handleMove }) + ); + } +}); + +module.exports = ClockHours; +},{"../mixins/style-propable":103,"./clock-number":151,"./clock-pointer":152,"react":357}],150:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); + +var ClockNumber = require('./clock-number'); +var ClockPointer = require('./clock-pointer'); + +function rad2deg(rad) { + return rad * 57.29577951308232; +} + +function getTouchEventOffsetValues(e) { + var el = e.target; + var boundingRect = el.getBoundingClientRect(); + + var offset = { + offsetX: e.clientX - boundingRect.left, + offsetY: e.clientY - boundingRect.top + }; + + return offset; +} + +var ClockMinutes = React.createClass({ + displayName: 'ClockMinutes', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + initialMinutes: React.PropTypes.number, + onChange: React.PropTypes.func + }, + + center: { x: 0, y: 0 }, + basePoint: { x: 0, y: 0 }, + isMousePressed: function isMousePressed(e) { + + if (typeof e.buttons == 'undefined') { + return e.nativeEvent.which; + } + return e.buttons; + }, + getDefaultProps: function getDefaultProps() { + return { + initialMinutes: new Date().getMinutes(), + onChange: function onChange() {} + }; + }, + + componentDidMount: function componentDidMount() { + var clockElement = React.findDOMNode(this.refs.mask); + + this.center = { + x: clockElement.offsetWidth / 2, + y: clockElement.offsetHeight / 2 + }; + + this.basePoint = { + x: this.center.x, + y: 0 + }; + }, + handleUp: function handleUp(e) { + e.preventDefault(); + this.setClock(e.nativeEvent, true); + }, + handleMove: function handleMove(e) { + e.preventDefault(); + if (this.isMousePressed(e) != 1) return; + this.setClock(e.nativeEvent, false); + }, + handleTouch: function handleTouch(e) { + e.preventDefault(); + this.setClock(e.changedTouches[0], false); + }, + setClock: function setClock(e, finish) { + if (typeof e.offsetX === 'undefined') { + var offset = getTouchEventOffsetValues(e); + + e.offsetX = offset.offsetX; + e.offsetY = offset.offsetY; + } + + var minutes = this.getMinutes(e.offsetX, e.offsetY); + + this.props.onChange(minutes, finish); + }, + getMinutes: function getMinutes(x, y) { + + var step = 6; + x = x - this.center.x; + y = y - this.center.y; + var cx = this.basePoint.x - this.center.x; + var cy = this.basePoint.y - this.center.y; + + var atan = Math.atan2(cx, cy) - Math.atan2(x, y); + + var deg = rad2deg(atan); + deg = Math.round(deg / step) * step; + deg %= 360; + + var value = Math.floor(deg / step) || 0; + + return value; + }, + _getMinuteNumbers: function _getMinuteNumbers() { + + var minutes = []; + for (var i = 0; i < 12; i++) { + minutes.push(i * 5); + } + var selectedMinutes = this.props.initialMinutes; + + var hasSelected = false; + + var numbers = minutes.map((function (minute) { + var isSelected = selectedMinutes == minute; + if (isSelected) hasSelected = true; + return React.createElement(ClockNumber, { isSelected: isSelected, type: 'minute', value: minute }); + }).bind(this)); + + return { + numbers: numbers, + hasSelected: hasSelected, + selected: selectedMinutes + }; + }, + render: function render() { + + var styles = { + root: { + height: '100%', + width: '100%', + borderRadius: '100%', + position: 'relative', + pointerEvents: 'none', + boxSizing: 'border-box' + }, + + hitMask: { + height: '100%', + width: '100%', + pointerEvents: 'auto' + } + + }; + + var minutes = this._getMinuteNumbers(); + + return React.createElement( + 'div', + { ref: 'clock', style: this.mergeAndPrefix(styles.root) }, + React.createElement(ClockPointer, { value: minutes.selected, type: 'minute' }), + minutes.numbers, + React.createElement('div', { ref: 'mask', style: this.mergeAndPrefix(styles.hitMask), hasSelected: minutes.hasSelected, onTouchMove: this.handleTouch, onTouchEnd: this.handleTouch, onMouseUp: this.handleUp, onMouseMove: this.handleMove }) + ); + } +}); + +module.exports = ClockMinutes; +},{"../mixins/style-propable":103,"./clock-number":151,"./clock-pointer":152,"react":357}],151:[function(require,module,exports){ +'use strict'; + +function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { 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; } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } } + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); + +var ClockNumber = React.createClass({ + displayName: 'ClockNumber', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + value: React.PropTypes.number, + type: React.PropTypes.oneOf(['hour', 'minute']), + onSelected: React.PropTypes.func, + isSelected: React.PropTypes.bool + }, + getDefaultProps: function getDefaultProps() { + return { + value: 0, + type: 'minute', + isSelected: false + }; + }, + getTheme: function getTheme() { + return this.context.muiTheme.component.timePicker; + }, + render: function render() { + + var pos = this.props.value; + + var inner = false; + + if (this.props.type == 'hour') { + inner = pos < 1 || pos > 12; + pos %= 12; + } else { + pos = pos / 5; + } + + var positions = [[0, 5], [54.5, 16.6], [94.4, 59.5], [109, 114], [94.4, 168.5], [54.5, 208.4], [0, 223], [-54.5, 208.4], [-94.4, 168.5], [-109, 114], [-94.4, 59.5], [-54.5, 19.6]]; + + var innerPositions = [[0, 40], [36.9, 49.9], [64, 77], [74, 114], [64, 151], [37, 178], [0, 188], [-37, 178], [-64, 151], [-74, 114], [-64, 77], [-37, 50]]; + + var styles = { + root: { + display: 'inline-block', + position: 'absolute', + width: '32px', + height: '32px', + borderRadius: '100%', + left: 'calc(50% - 16px)', + top: '10px', + textAlign: 'center', + paddingTop: '5px', + userSelect: 'none', /* Chrome all / Safari all */ + fontSize: '1.1em', + pointerEvents: 'none', + boxSizing: 'border-box' + } + + }; + + if (this.props.isSelected) { + styles.root.backgroundColor = this.getTheme().accentColor; + styles.root.color = this.getTheme().selectTextColor; + } + + var transformPos = positions[pos]; + + if (inner) { + styles.root.width = '28px'; + styles.root.height = '28px'; + styles.root.left = 'calc(50% - 14px)'; + transformPos = innerPositions[pos]; + } + + var _transformPos = _slicedToArray(transformPos, 2); + + var x = _transformPos[0]; + var y = _transformPos[1]; + + styles.root.transform = 'translate(' + x + 'px, ' + y + 'px)'; + + return React.createElement( + 'span', + { style: this.mergeAndPrefix(styles.root) }, + this.props.value + ); + } +}); + +module.exports = ClockNumber; +},{"../mixins/style-propable":103,"react":357}],152:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); + +var ClockPointer = React.createClass({ + displayName: 'ClockPointer', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + value: React.PropTypes.number, + type: React.PropTypes.oneOf(['hour', 'minute']) + }, + + getInitialState: function getInitialState() { + return { + inner: this.isInner(this.props.value) + }; + }, + getDefaultProps: function getDefaultProps() { + return { + value: null, + type: 'minute', + hasSelected: false + }; + }, + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + + this.setState({ + inner: this.isInner(nextProps.value) + }); + }, + isInner: function isInner(value) { + if (this.props.type != 'hour') { + return false; + } + return value < 1 || value > 12; + }, + getAngle: function getAngle() { + + if (this.props.type == 'hour') { + return this.calcAngle(this.props.value, 12); + } + + return this.calcAngle(this.props.value, 60); + }, + calcAngle: function calcAngle(value, base) { + value %= base; + var angle = 360 / base * value; + return angle; + }, + getTheme: function getTheme() { + return this.context.muiTheme.component.timePicker; + }, + render: function render() { + + if (this.props.value == null) { + return React.createElement('span', null); + } + + var angle = this.getAngle(); + + var styles = { + root: { + height: '30%', + background: this.getTheme().accentColor, + width: '2px', + left: 'calc(50% - 1px)', + position: 'absolute', + bottom: '50%', + transformOrigin: 'bottom', + pointerEvents: 'none', + transform: 'rotateZ(' + angle + 'deg)' + }, + mark: { + background: this.getTheme().selectTextColor, + border: '4px solid ' + this.getTheme().accentColor, + width: '7px', + height: '7px', + position: 'absolute', + top: '-5px', + left: '-6px', + borderRadius: '100%' + } + }; + + if (!this.state.inner) { + styles.root.height = '40%'; + } + + if (this.props.hasSelected) { + styles.mark.display = 'none'; + } + + return React.createElement( + 'div', + { style: this.mergeAndPrefix(styles.root) }, + React.createElement('div', { style: styles.mark }) + ); + } +}); + +module.exports = ClockPointer; +},{"../mixins/style-propable":103,"react":357}],153:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); + +var TimeDisplay = require('./time-display'); +var ClockButton = require('./clock-button'); +var ClockHours = require('./clock-hours'); +var ClockMinutes = require('./clock-minutes'); + +var Clock = React.createClass({ + displayName: 'Clock', + + mixins: [StylePropable], + + propTypes: { + initialTime: React.PropTypes.object, + mode: React.PropTypes.oneOf(['hour', 'minute']), + format: React.PropTypes.oneOf(['ampm', '24hr']), + isActive: React.PropTypes.bool + }, + + init: function init() { + this.setState({ + mode: 'hour' + }); + }, + + getDefaultProps: function getDefaultProps() { + return { + initialTime: new Date() + }; + }, + + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + + this.setState({ + selectedTime: nextProps.initialTime + }); + }, + + getInitialState: function getInitialState() { + + return { + selectedTime: this.props.initialTime, + mode: 'hour' + }; + }, + + _setMode: function _setMode(mode) { + setTimeout((function () { + this.setState({ + mode: mode + }); + }).bind(this), 100); + }, + + _setAffix: function _setAffix(affix) { + + if (affix == this._getAffix()) return; + + var hours = this.state.selectedTime.getHours(); + + if (affix == 'am') { + this.handleChangeHours(hours - 12); + return; + } + + this.handleChangeHours(hours + 12); + }, + + _getAffix: function _getAffix() { + + if (this.props.format != 'ampm') return ''; + + var hours = this.state.selectedTime.getHours(); + if (hours < 12) { + return 'am'; + } + + return 'pm'; + }, + + _getButtons: function _getButtons() { + var buttons = []; + var isAM = this._getIsAM(); + + if (this.props.format == 'ampm') { + buttons = [React.createElement( + ClockButton, + { position: 'left', onTouchTap: this._setAffix.bind(this, 'am'), selected: isAM }, + 'AM' + ), React.createElement( + ClockButton, + { position: 'right', onTouchTap: this._setAffix.bind(this, 'pm'), selected: !isAM }, + 'PM' + )]; + } + return buttons; + }, + + _getIsAM: function _getIsAM() { + + return this._getAffix() == 'am'; + }, + + render: function render() { + + var clock = null; + var buttons = this._getButtons(); + + var styles = { + root: {}, + + container: { + height: '280px', + padding: '10px' + } + }; + + if (this.state.mode == 'hour') { + clock = React.createElement(ClockHours, { key: 'hours', + format: this.props.format, + onChange: this.handleChangeHours, + initialHours: this.state.selectedTime.getHours() }); + } else { + clock = React.createElement(ClockMinutes, { key: 'minutes', + onChange: this.handleChangeMinutes, + initialMinutes: this.state.selectedTime.getMinutes() }); + } + + return React.createElement( + 'div', + { style: styles.root }, + React.createElement(TimeDisplay, { + selectedTime: this.state.selectedTime, + mode: this.state.mode, + format: this.props.format, + affix: this._getAffix(), + onSelectHour: this._setMode.bind(this, 'hour'), + onSelectMin: this._setMode.bind(this, 'minute') + }), + React.createElement( + 'div', + { + style: styles.container }, + clock + ), + buttons + ); + }, + handleChangeHours: function handleChangeHours(hours, finished) { + var time = new Date(this.state.selectedTime); + + time.setHours(hours); + this.setState({ + selectedTime: time + }); + + if (finished) { + setTimeout((function () { + this.setState({ + mode: 'minute' + }); + }).bind(this), 100); + } + }, + handleChangeMinutes: function handleChangeMinutes(minutes) { + var time = new Date(this.state.selectedTime); + time.setMinutes(minutes); + this.setState({ + selectedTime: time + }); + }, + getSelectedTime: function getSelectedTime() { + return this.state.selectedTime; + } +}); + +module.exports = Clock; +},{"../mixins/style-propable":103,"./clock-button":148,"./clock-hours":149,"./clock-minutes":150,"./time-display":155,"react":357}],154:[function(require,module,exports){ +'use strict'; + +module.exports = require('./time-picker'); +},{"./time-picker":157}],155:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { 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; } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } } + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); + +var TimeDisplay = React.createClass({ + displayName: 'TimeDisplay', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + selectedTime: React.PropTypes.object.isRequired, + format: React.PropTypes.oneOf(['ampm', '24hr']), + mode: React.PropTypes.oneOf(['hour', 'minute']), + affix: React.PropTypes.oneOf(['', 'pm', 'am']) + }, + + getInitialState: function getInitialState() { + return { + transitionDirection: 'up' + }; + }, + getDefaultProps: function getDefaultProps() { + return { + mode: 'hour', + affix: '' + }; + }, + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { + var direction; + + if (nextProps.selectedTime !== this.props.selectedTime) { + direction = nextProps.selectedTime > this.props.selectedTime ? 'up' : 'down'; + this.setState({ + transitionDirection: direction + }); + } + }, + sanitizeTime: function sanitizeTime() { + var hour = this.props.selectedTime.getHours(); + var min = this.props.selectedTime.getMinutes().toString(); + + if (this.props.format == 'ampm') { + + hour %= 12; + hour = hour || 12; + } + + hour = hour.toString(); + if (hour.length < 2) hour = '0' + hour; + if (min.length < 2) min = '0' + min; + + return [hour, min]; + }, + getTheme: function getTheme() { + return this.context.muiTheme.component.timePicker; + }, + render: function render() { + var _props = this.props; + var selectedTime = _props.selectedTime; + var mode = _props.mode; + + var other = _objectWithoutProperties(_props, ['selectedTime', 'mode']); + + var styles = { + root: { + textAlign: 'center', + position: 'relative', + width: '280px', + height: '100%' + }, + + time: { + margin: '6px 0', + lineHeight: '58px', + height: '58px', + fontSize: '58px' + }, + + box: { + padding: '16px 0', + backgroundColor: this.getTheme().color, + color: this.getTheme().textColor + }, + + hour: {}, + + minute: {} + }; + + var _sanitizeTime = this.sanitizeTime(); + + var _sanitizeTime2 = _slicedToArray(_sanitizeTime, 2); + + var hour = _sanitizeTime2[0]; + var min = _sanitizeTime2[1]; + + styles[mode].color = this.getTheme().accentColor; + + return React.createElement( + 'div', + _extends({}, other, { style: this.mergeAndPrefix(styles.root) }), + React.createElement( + 'div', + { style: this.mergeAndPrefix(styles.box) }, + React.createElement( + 'div', + { style: this.mergeAndPrefix(styles.time) }, + React.createElement( + 'span', + { style: this.mergeAndPrefix(styles.hour), onTouchTap: this.props.onSelectHour }, + hour + ), + React.createElement( + 'span', + null, + ':' + ), + React.createElement( + 'span', + { style: this.mergeAndPrefix(styles.minute), onTouchTap: this.props.onSelectMin }, + min + ) + ), + React.createElement( + 'span', + { key: 'affix' }, + this.props.affix.toUpperCase() + ) + ) + ); + } + +}); + +module.exports = TimeDisplay; +},{"../mixins/style-propable":103,"react":357}],156:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); +var WindowListenable = require('../mixins/window-listenable'); +var KeyCode = require('../utils/key-code'); +var Clock = require('./clock'); +var DialogWindow = require('../dialog-window'); +var FlatButton = require('../flat-button'); + +var TimePickerDialog = React.createClass({ + displayName: 'TimePickerDialog', + + mixins: [StylePropable, WindowListenable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + initialTime: React.PropTypes.object, + onAccept: React.PropTypes.func, + onShow: React.PropTypes.func, + onDismiss: React.PropTypes.func + }, + + windowListeners: { + 'keyup': '_handleWindowKeyUp' + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.timePicker; + }, + render: function render() { + var _props = this.props; + var initialTime = _props.initialTime; + var onAccept = _props.onAccept; + var format = _props.format; + + var other = _objectWithoutProperties(_props, ['initialTime', 'onAccept', 'format']); + + var styles = { + root: { + fontSize: '14px', + color: this.getTheme().clockColor + }, + dialogContent: { + width: '280px' + } + }; + + var actions = [React.createElement(FlatButton, { + key: 0, + label: 'Cancel', + secondary: true, + onTouchTap: this._handleCancelTouchTap }), React.createElement(FlatButton, { + key: 1, + label: 'OK', + secondary: true, + onTouchTap: this._handleOKTouchTap })]; + + return React.createElement( + DialogWindow, + _extends({}, other, { + ref: 'dialogWindow', + style: this.mergeAndPrefix(styles.root), + actions: actions, + contentStyle: styles.dialogContent, + onDismiss: this._handleDialogDismiss, + onShow: this._handleDialogShow, + repositionOnUpdate: false }), + React.createElement(Clock, { + ref: 'clock', + format: format, + initialTime: initialTime }) + ); + }, + + show: function show() { + this.refs.dialogWindow.show(); + this.refs.clock.init(); + }, + + dismiss: function dismiss() { + this.refs.dialogWindow.dismiss(); + }, + + _handleCancelTouchTap: function _handleCancelTouchTap() { + this.dismiss(); + }, + + _handleOKTouchTap: function _handleOKTouchTap() { + this.dismiss(); + if (this.props.onAccept) { + this.props.onAccept(this.refs.clock.getSelectedTime()); + } + }, + + _handleDialogShow: function _handleDialogShow() { + + if (this.props.onShow) { + this.props.onShow(); + } + }, + + _handleDialogDismiss: function _handleDialogDismiss() { + + if (this.props.onDismiss) { + this.props.onDismiss(); + } + }, + + _handleWindowKeyUp: function _handleWindowKeyUp(e) { + if (this.refs.dialogWindow.isOpen()) { + switch (e.keyCode) { + case KeyCode.ENTER: + this._handleOKTouchTap(); + break; + } + } + } + +}); + +module.exports = TimePickerDialog; +},{"../dialog-window":79,"../flat-button":86,"../mixins/style-propable":103,"../mixins/window-listenable":105,"../utils/key-code":172,"./clock":153,"react":357}],157:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); + +var WindowListenable = require('../mixins/window-listenable'); +var TimePickerDialog = require('./time-picker-dialog'); +var TextField = require('../text-field'); + +var emptyTime = new Date(); +emptyTime.setHours(0); +emptyTime.setMinutes(0); + +var TimePicker = React.createClass({ + displayName: 'TimePicker', + + mixins: [StylePropable, WindowListenable], + + propTypes: { + defaultTime: React.PropTypes.object, + format: React.PropTypes.oneOf(['ampm', '24hr']), + onFocus: React.PropTypes.func, + onTouchTap: React.PropTypes.func, + onChange: React.PropTypes.func, + onShow: React.PropTypes.func, + onDismiss: React.PropTypes.func + }, + + windowListeners: { + 'keyup': '_handleWindowKeyUp' + }, + + getDefaultProps: function getDefaultProps() { + return { + defaultTime: emptyTime, + format: 'ampm' + }; + }, + + getInitialState: function getInitialState() { + return { + time: this.props.defaultTime, + dialogTime: new Date() + }; + }, + formatTime: function formatTime(date) { + + var hours = date.getHours(); + var mins = date.getMinutes(); + var aditional = ''; + + if (this.props.format == 'ampm') { + var isAM = hours < 12; + hours = hours % 12; + aditional += isAM ? ' am' : ' pm'; + hours = hours || 12; + } + + hours = hours.toString(); + mins = mins.toString(); + + if (hours.length < 2) hours = '0' + hours; + if (mins.length < 2) mins = '0' + mins; + + return hours + ':' + mins + aditional; + }, + render: function render() { + var _props = this.props; + var format = _props.format; + var onFocus = _props.onFocus; + var onTouchTap = _props.onTouchTap; + var onShow = _props.onShow; + var onDismiss = _props.onDismiss; + + var other = _objectWithoutProperties(_props, ['format', 'onFocus', 'onTouchTap', 'onShow', 'onDismiss']); + + var defaultInputValue; + + if (this.props.defaultTime) { + defaultInputValue = this.formatTime(this.props.defaultTime); + } + + return React.createElement( + 'div', + null, + React.createElement(TextField, _extends({}, other, { + ref: 'input', + defaultValue: defaultInputValue, + onFocus: this._handleInputFocus, + onTouchTap: this._handleInputTouchTap })), + React.createElement(TimePickerDialog, { + ref: 'dialogWindow', + initialTime: this.state.dialogTime, + onAccept: this._handleDialogAccept, + onShow: onShow, + onDismiss: onDismiss, + format: format }) + ); + }, + + getTime: function getTime() { + return this.state.time; + }, + + setTime: function setTime(t) { + this.setState({ + time: t + }); + this.refs.input.setValue(this.formatTime(t)); + }, + + _handleDialogAccept: function _handleDialogAccept(t) { + + this.setTime(t); + if (this.props.onChange) this.props.onChange(null, t); + }, + + _handleInputFocus: function _handleInputFocus(e) { + e.target.blur(); + if (this.props.onFocus) this.props.onFocus(e); + }, + + _handleInputTouchTap: function _handleInputTouchTap(e) { + e.preventDefault(); + + this.setState({ + dialogTime: this.getTime() + }); + + this.refs.dialogWindow.show(); + if (this.props.onTouchTap) this.props.onTouchTap(e); + } + +}); + +module.exports = TimePicker; +},{"../mixins/style-propable":103,"../mixins/window-listenable":105,"../text-field":146,"./time-picker-dialog":156,"react":357}],158:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var Paper = require('./paper'); +var EnhancedSwitch = require('./enhanced-switch'); + +var Toggle = React.createClass({ + displayName: 'Toggle', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + elementStyle: React.PropTypes.object, + labelStyle: React.PropTypes.object, + onToggle: React.PropTypes.func, + toggled: React.PropTypes.bool, + defaultToggled: React.PropTypes.bool + }, + + getInitialState: function getInitialState() { + return { + switched: this.props.toggled || this.props.defaultToggled || this.props.valueLink && this.props.valueLink.value || false + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.toggle; + }, + + getStyles: function getStyles() { + var toggleSize = 20; + var toggleTrackWidth = 36; + var styles = { + icon: { + width: 36, + padding: '4px 0px 6px 2px' + }, + toggleElemet: { + width: toggleTrackWidth + }, + track: { + transition: Transitions.easeOut(), + width: '100%', + height: 14, + borderRadius: 30, + backgroundColor: this.getTheme().trackOffColor + }, + thumb: { + transition: Transitions.easeOut(), + position: 'absolute', + top: 1, + left: 0, + width: toggleSize, + height: toggleSize, + lineHeight: '24px', + borderRadius: '50%', + backgroundColor: this.getTheme().thumbOffColor + }, + trackWhenSwitched: { + backgroundColor: this.getTheme().trackOnColor + }, + thumbWhenSwitched: { + backgroundColor: this.getTheme().thumbOnColor, + left: '100%' + }, + trackWhenDisabled: { + backgroundColor: this.getTheme().trackDisabledColor + }, + thumbWhenDisabled: { + backgroundColor: this.getTheme().thumbDisabledColor + }, + label: { + color: this.props.disabled ? this.getTheme().labelDisabledColor : this.getTheme().labelColor + } + }; + return styles; + }, + + render: function render() { + var _props = this.props; + var onToggle = _props.onToggle; + + var other = _objectWithoutProperties(_props, ['onToggle']); + + var styles = this.getStyles(); + + var trackStyles = this.mergeAndPrefix(styles.track, this.props.trackStyle, this.state.switched && styles.trackWhenSwitched, this.props.disabled && styles.trackWhenDisabled); + + var thumbStyles = this.mergeAndPrefix(styles.thumb, this.props.thumbStyle, this.state.switched && styles.thumbWhenSwitched, this.props.disabled && styles.thumbWhenDisabled); + + if (this.state.switched) { + thumbStyles.marginLeft = '-' + thumbStyles.width; + } + + var toggleElemetStyles = this.mergeAndPrefix(styles.toggleElemet, this.props.elementStyle); + + var toggleElement = React.createElement( + 'div', + { style: toggleElemetStyles }, + React.createElement('div', { style: trackStyles }), + React.createElement(Paper, { style: thumbStyles, circle: true, zDepth: 1 }) + ); + + var customRippleStyle = this.mergeAndPrefix({ + top: '-10', + left: '-10' + }, this.props.rippleStyle); + + var rippleColor = this.state.switched ? this.getTheme().thumbOnColor : this.context.muiTheme.component.textColor; + + var iconStyle = this.mergeAndPrefix(styles.icon, this.props.iconStyle); + + var labelStyle = this.mergeAndPrefix(styles.label, this.props.labelStyle); + + var enhancedSwitchProps = { + ref: 'enhancedSwitch', + inputType: 'checkbox', + switchElement: toggleElement, + rippleStyle: customRippleStyle, + rippleColor: rippleColor, + iconStyle: iconStyle, + trackStyle: trackStyles, + thumbStyle: thumbStyles, + labelStyle: labelStyle, + switched: this.state.switched, + onSwitch: this._handleToggle, + onParentShouldUpdate: this._handleStateChange, + defaultSwitched: this.props.defaultToggled, + labelPosition: this.props.labelPosition ? this.props.labelPosition : 'left' + }; + + if (this.props.hasOwnProperty('toggled')) enhancedSwitchProps.checked = this.props.toggled; + + return React.createElement(EnhancedSwitch, _extends({}, other, enhancedSwitchProps)); + }, + + isToggled: function isToggled() { + return this.refs.enhancedSwitch.isSwitched(); + }, + + setToggled: function setToggled(newToggledValue) { + this.refs.enhancedSwitch.setSwitched(newToggledValue); + }, + + _handleToggle: function _handleToggle(e, isInputChecked) { + if (this.props.onToggle) this.props.onToggle(e, isInputChecked); + }, + + _handleStateChange: function _handleStateChange(newSwitched) { + this.setState({ switched: newSwitched }); + } + +}); + +module.exports = Toggle; +},{"./enhanced-switch":84,"./mixins/style-propable":103,"./paper":107,"./styles/transitions":124,"react":357}],159:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var Colors = require('../styles/colors'); +var StylePropable = require('../mixins/style-propable'); + +var ToolbarGroup = React.createClass({ + displayName: 'ToolbarGroup', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + className: React.PropTypes.string, + float: React.PropTypes.string + }, + + getDefaultProps: function getDefaultProps() { + return { + float: 'left' + }; + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.toolbar; + }, + + getSpacing: function getSpacing() { + return this.context.muiTheme.spacing.desktopGutter; + }, + + getStyles: function getStyles() { + var marginHorizontal = this.getSpacing(); + var marginVertical = (this.getTheme().height - this.context.muiTheme.component.button.height) / 2; + var styles = { + root: { + position: 'relative', + float: this.props.float + }, + dropDownMenu: { + root: { + float: 'left', + color: Colors.lightBlack, // removes hover color change, we want to keep it + display: 'inline-block', + marginRight: this.getSpacing() + }, + controlBg: { + backgroundColor: this.getTheme().menuHoverColor, + borderRadius: 0 + }, + underline: { + display: 'none' + } + }, + button: { + float: 'left', + margin: marginVertical + 'px ' + marginHorizontal + 'px', + position: 'relative' + }, + icon: { + root: { + float: 'left', + cursor: 'pointer', + color: this.getTheme().iconColor, + lineHeight: this.getTheme().height + 'px', + paddingLeft: this.getSpacing() + }, + hover: { + zIndex: 1, + color: Colors.darkBlack + } + }, + span: { + float: 'left', + color: this.getTheme().iconColor, + lineHeight: this.getTheme().height + 'px' + } + }; + return styles; + }, + + render: function render() { + var styles = this.getStyles(); + + if (this.props.firstChild) styles.marginLeft = -24; + if (this.props.lastChild) styles.marginRight = -24; + + var newChildren = React.Children.map(this.props.children, function (currentChild) { + if (!currentChild) { + return null; + } + switch (currentChild.type.displayName) { + case 'DropDownMenu': + return React.cloneElement(currentChild, { + style: styles.dropDownMenu.root, + styleControlBg: styles.dropDownMenu.controlBg, + styleUnderline: styles.dropDownMenu.underline + }); + case 'DropDownIcon': + return React.cloneElement(currentChild, { + style: { float: 'left' }, + iconStyle: styles.icon.root, + onMouseOver: this._handleMouseOverDropDownMenu, + onMouseOut: this._handleMouseOutDropDownMenu + }); + case 'RaisedButton':case 'FlatButton': + return React.cloneElement(currentChild, { + style: styles.button + }); + case 'FontIcon': + return React.cloneElement(currentChild, { + style: styles.icon.root, + onMouseOver: this._handleMouseOverFontIcon, + onMouseOut: this._handleMouseOutFontIcon + }); + case 'ToolbarSeparator':case 'ToolbarTitle': + return React.cloneElement(currentChild, { + style: this.mergeStyles(styles.span, currentChild.props.style) + }); + default: + return currentChild; + } + }, this); + + return React.createElement( + 'div', + { className: this.props.className, style: this.mergeAndPrefix(styles.root, this.props.style) }, + newChildren + ); + }, + + _handleMouseOverDropDownMenu: function _handleMouseOverDropDownMenu(e) { + e.target.style.zIndex = this.getStyles().icon.hover.zIndex; + e.target.style.color = this.getStyles().icon.hover.color; + }, + + _handleMouseOutDropDownMenu: function _handleMouseOutDropDownMenu(e) { + e.target.style.zIndex = 'auto'; + e.target.style.color = this.getStyles().icon.root.color; + }, + + _handleMouseOverFontIcon: function _handleMouseOverFontIcon(e) { + e.target.style.zIndex = this.getStyles().icon.hover.zIndex; + e.target.style.color = this.getStyles().icon.hover.color; + }, + + _handleMouseOutFontIcon: function _handleMouseOutFontIcon(e) { + e.target.style.zIndex = 'auto'; + e.target.style.color = this.getStyles().icon.root.color; + } +}); + +module.exports = ToolbarGroup; +},{"../mixins/style-propable":103,"../styles/colors":118,"react":357}],160:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); + +var ToolbarSeparator = React.createClass({ + displayName: 'ToolbarSeparator', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.toolbar; + }, + + getSpacing: function getSpacing() { + return this.context.muiTheme.spacing; + }, + + render: function render() { + + var styles = this.mergeAndPrefix({ + backgroundColor: this.getTheme().separatorColor, + display: 'inline-block', + height: this.getSpacing().desktopGutterMore, + marginLeft: this.getSpacing().desktopGutter, + position: 'relative', + top: (this.getTheme().height - this.getSpacing().desktopGutterMore) / 2, + width: 1 + }, this.props.style); + + return React.createElement('span', { className: this.props.className, style: styles }); + } + +}); + +module.exports = ToolbarSeparator; +},{"../mixins/style-propable":103,"react":357}],161:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); + +var ToolbarTitle = React.createClass({ + displayName: 'ToolbarTitle', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + text: React.PropTypes.string + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.toolbar; + }, + + render: function render() { + var _props = this.props; + var style = _props.style; + var text = _props.text; + + var other = _objectWithoutProperties(_props, ['style', 'text']); + + var styles = this.mergeAndPrefix({ + paddingRight: this.context.muiTheme.spacing.desktopGutterLess, + lineHeight: this.getTheme().height + 'px', + fontSize: this.getTheme().titleFontSize + 'px', + display: 'inline-block', + position: 'relative' + }, style); + + return React.createElement( + 'span', + _extends({ style: styles }, other), + text + ); + } + +}); + +module.exports = ToolbarTitle; +},{"../mixins/style-propable":103,"react":357}],162:[function(require,module,exports){ +'use strict'; + +var React = require('react'); +var StylePropable = require('../mixins/style-propable'); + +var Toolbar = React.createClass({ + displayName: 'Toolbar', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + className: React.PropTypes.string, + style: React.PropTypes.object + }, + + getTheme: function getTheme() { + return this.context.muiTheme.component.toolbar; + }, + + getStyles: function getStyles() { + return this.mergeAndPrefix({ + boxSizing: 'border-box', + WebkitTapHighlightColor: 'rgba(0,0,0,0)', + backgroundColor: this.getTheme().backgroundColor, + height: this.getTheme().height, + width: '100%', + padding: this.props.noGutter ? 0 : '0px ' + this.context.muiTheme.spacing.desktopGutter + 'px' + }, this.props.style); + }, + + render: function render() { + return React.createElement( + 'div', + { className: this.props.className, style: this.getStyles() }, + this.props.children + ); + } + +}); + +module.exports = Toolbar; +},{"../mixins/style-propable":103,"react":357}],163:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/transitions'); +var Colors = require('./styles/colors'); + +var Tooltip = React.createClass({ + displayName: 'Tooltip', + + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object + }, + + propTypes: { + className: React.PropTypes.string, + label: React.PropTypes.string.isRequired, + show: React.PropTypes.bool, + touch: React.PropTypes.bool + }, + + componentDidMount: function componentDidMount() { + this._setRippleSize(); + }, + + componentDidUpdate: function componentDidUpdate() { + this._setRippleSize(); + }, + + getStyles: function getStyles() { + var styles = { + root: { + position: 'absolute', + fontFamily: this.context.muiTheme.contentFontFamily, + fontSize: '10px', + lineHeight: '22px', + padding: '0 8px', + color: Colors.white, + overflow: 'hidden', + top: -10000, + borderRadius: 2, + userSelect: 'none', + opacity: 0, + transition: Transitions.easeOut('0ms', 'top', '450ms') + ',' + Transitions.easeOut('450ms', 'transform', '0ms') + ',' + Transitions.easeOut('450ms', 'opacity', '0ms') + }, + label: { + position: 'relative', + whiteSpace: 'nowrap' + }, + ripple: { + position: 'absolute', + left: '50%', + top: 0, + transform: 'translate(-50%, -50%)', + borderRadius: '50%', + backgroundColor: 'transparent', + transition: Transitions.easeOut('0ms', 'width', '450ms') + ',' + Transitions.easeOut('0ms', 'height', '450ms') + ',' + Transitions.easeOut('450ms', 'backgroundColor', '0ms') + }, + rootWhenShown: { + top: -16, + opacity: 1, + transform: 'translate3d(0px, 16px, 0px)', + transition: Transitions.easeOut('0ms', 'top', '0ms') + ',' + Transitions.easeOut('450ms', 'transform', '0ms') + ',' + Transitions.easeOut('450ms', 'opacity', '0ms') + }, + rootWhenTouched: { + fontSize: '14px', + lineHeight: '44px', + padding: '0 16px' + }, + rippleWhenShown: { + backgroundColor: Colors.grey600, + transition: Transitions.easeOut('450ms', 'width', '0ms') + ',' + Transitions.easeOut('450ms', 'height', '0ms') + ',' + Transitions.easeOut('450ms', 'backgroundColor', '0ms') + } + }; + return styles; + }, + + render: function render() { + var _props = this.props; + var label = _props.label; + + var other = _objectWithoutProperties(_props, ['label']); + + var styles = this.getStyles(); + return React.createElement( + 'div', + _extends({}, other, { + style: this.mergeAndPrefix(styles.root, this.props.show && styles.rootWhenShown, this.props.touch && styles.rootWhenTouched, this.props.style) }), + React.createElement('div', { + ref: 'ripple', + style: this.mergeAndPrefix(styles.ripple, this.props.show && styles.rippleWhenShown) }), + React.createElement( + 'span', + { style: this.mergeAndPrefix(styles.label) }, + this.props.label + ) + ); + }, + + _setRippleSize: function _setRippleSize() { + var ripple = React.findDOMNode(this.refs.ripple); + var tooltip = window.getComputedStyle(React.findDOMNode(this)); + var tooltipWidth = parseInt(tooltip.getPropertyValue('width'), 10); + var tooltipHeight = parseInt(tooltip.getPropertyValue('height'), 10); + + var rippleDiameter = Math.sqrt(Math.pow(tooltipHeight, 2) + Math.pow(tooltipWidth / 2, 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'; + } + } + +}); + +module.exports = Tooltip; +},{"./mixins/style-propable":103,"./styles/colors":118,"./styles/transitions":124,"react":357}],164:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react/addons'); +var StylePropable = require('../mixins/style-propable'); +var AutoPrefix = require('../styles/auto-prefix'); +var Transitions = require('../styles/transitions'); + +var SlideInChild = React.createClass({ + displayName: 'SlideInChild', + + mixins: [StylePropable], + + propTypes: { + //This callback is needed bacause the direction could change + //when leaving the dom + getLeaveDirection: React.PropTypes.func.isRequired + }, + + componentWillEnter: function componentWillEnter(callback) { + var style = React.findDOMNode(this).style; + var x = this.props.direction === 'left' ? '100%' : this.props.direction === 'right' ? '-100%' : '0'; + var y = this.props.direction === 'up' ? '100%' : this.props.direction === 'down' ? '-100%' : '0'; + + style.opacity = '0'; + AutoPrefix.set(style, 'transform', 'translate3d(' + x + ',' + y + ',0)'); + + setTimeout(callback, 0); + }, + + componentDidEnter: function componentDidEnter() { + var style = React.findDOMNode(this).style; + style.opacity = '1'; + AutoPrefix.set(style, 'transform', 'translate3d(0,0,0)'); + }, + + componentWillLeave: function componentWillLeave(callback) { + var style = React.findDOMNode(this).style; + var direction = this.props.getLeaveDirection(); + var x = direction === 'left' ? '-100%' : direction === 'right' ? '100%' : '0'; + var y = direction === 'up' ? '-100%' : direction === 'down' ? '100%' : '0'; + + style.opacity = '0'; + AutoPrefix.set(style, 'transform', 'translate3d(' + x + ',' + y + ',0)'); + + setTimeout(callback, 450); + }, + + render: function render() { + var _props = this.props; + var styles = _props.styles; + + var other = _objectWithoutProperties(_props, ['styles']); + + styles = this.mergeAndPrefix({ + position: 'absolute', + height: '100%', + width: '100%', + top: '0px', + left: '0px', + transition: Transitions.easeOut() + }, this.props.style); + + return React.createElement( + 'div', + _extends({}, other, { + style: styles }), + this.props.children + ); + } + +}); + +module.exports = SlideInChild; +},{"../mixins/style-propable":103,"../styles/auto-prefix":117,"../styles/transitions":124,"react/addons":185}],165:[function(require,module,exports){ +'use strict'; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +var React = require('react/addons'); +var ReactTransitionGroup = React.addons.TransitionGroup; +var StylePropable = require('../mixins/style-propable'); +var SlideInChild = require('./slide-in-child'); + +var SlideIn = React.createClass({ + displayName: 'SlideIn', + + mixins: [StylePropable], + + propTypes: { + direction: React.PropTypes.oneOf(['left', 'right', 'up', 'down']) + }, + + getDefaultProps: function getDefaultProps() { + return { + direction: 'left' + }; + }, + + render: function render() { + var _props = this.props; + var direction = _props.direction; + + var other = _objectWithoutProperties(_props, ['direction']); + + var styles = this.mergeAndPrefix({ + position: 'relative', + overflow: 'hidden', + height: '100%' + }, this.props.style); + + return React.createElement( + ReactTransitionGroup, + _extends({}, other, { + style: styles, + component: 'div' }), + this._getSlideInChildren() + ); + }, + + _getSlideInChildren: function _getSlideInChildren() { + return React.Children.map(this.props.children, function (child) { + return React.createElement( + SlideInChild, + { + key: child.key, + direction: this.props.direction, + getLeaveDirection: this._getLeaveDirection }, + child + ); + }, this); + }, + + _getLeaveDirection: function _getLeaveDirection() { + return this.props.direction; + } + +}); + +module.exports = SlideIn; +},{"../mixins/style-propable":103,"./slide-in-child":164,"react/addons":185}],166:[function(require,module,exports){ +'use strict'; + +module.exports = { + + /** + * The relative brightness of any point in a colorspace, normalized to 0 for + * darkest black and 1 for lightest white. RGB colors only. Does not take + * into account alpha values. + * + * TODO: + * - Take into account alpha values. + * - Identify why there are minor discrepancies for some use cases + * (i.e. #F0F & #FFF). Note that these cases rarely occur. + * + * Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef + */ + _luminance: function _luminance(color) { + color = this._decomposeColor(color); + + if (color.type.indexOf('rgb') > -1) { + var rgb = color.values.map(function (val) { + val /= 255; // normalized + return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4); + }); + + return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]; + } else { + var message = 'Calculating the relative luminance is not available for ' + 'HSL and HSLA.'; + console.error(message); + return -1; + } + }, + + /** + * @params: + * additionalValue = An extra value that has been calculated but not included + * with the original color object, such as an alpha value. + */ + _convertColorToString: function _convertColorToString(color, additonalValue) { + var str = color.type + '(' + parseInt(color.values[0]) + ',' + parseInt(color.values[1]) + ',' + parseInt(color.values[2]); + + if (additonalValue !== undefined) { + str += ',' + additonalValue + ')'; + } else if (color.values.length == 4) { + str += ',' + color.values[3] + ')'; + } else { + str += ')'; + } + + return str; + }, + + // Converts a color from hex format to rgb format. + _convertHexToRGB: function _convertHexToRGB(color) { + if (color.length === 4) { + var extendedColor = '#'; + for (var i = 1; i < color.length; i++) { + extendedColor += color.charAt(i) + color.charAt(i); + } + color = extendedColor; + } + + var values = { + r: parseInt(color.substr(1, 2), 16), + g: parseInt(color.substr(3, 2), 16), + b: parseInt(color.substr(5, 2), 16) + }; + + return 'rgb(' + values.r + ',' + values.g + ',' + values.b + ')'; + }, + + // Returns the type and values of a color of any given type. + _decomposeColor: function _decomposeColor(color) { + if (color.charAt(0) === '#') { + return this._decomposeColor(this._convertHexToRGB(color)); + } + + var marker = color.indexOf('('); + var type = color.substring(0, marker); + var values = color.substring(marker + 1, color.length - 1).split(','); + + return { type: type, values: values }; + }, + + // Set the absolute transparency of a color. + // Any existing alpha values are overwritten. + fade: function fade(color, amount) { + color = this._decomposeColor(color); + if (color.type == 'rgb' || color.type == 'hsl') color.type += 'a'; + return this._convertColorToString(color, amount); + }, + + // Desaturates rgb and sets opacity to 0.15 + lighten: function lighten(color, amount) { + color = this._decomposeColor(color); + + if (color.type.indexOf('hsl') > -1) { + color.values[2] += amount; + return this._decomposeColor(this._convertColorToString(color)); + } else if (color.type.indexOf('rgb') > -1) { + for (var i = 0; i < 3; i++) { + color.values[i] *= 1 + amount; + if (color.values[i] > 255) color.values[i] = 255; + } + } + + if (color.type.indexOf('a') <= -1) color.type += 'a'; + + return this._convertColorToString(color, '0.15'); + }, + + darken: function darken(color, amount) { + color = this._decomposeColor(color); + + if (color.type.indexOf('hsl') > -1) { + color.values[2] += amount; + return this._decomposeColor(this._convertColorToString(color)); + } else if (color.type.indexOf('rgb') > -1) { + for (var i = 0; i < 3; i++) { + color.values[i] *= 1 - amount; + if (color.values[i] < 0) color.values[i] = 0; + } + } + + return this._convertColorToString(color); + }, + + // Calculates the contrast ratio between two colors. + // + // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef + contrastRatio: function contrastRatio(background, foreground) { + var lumA = this._luminance(background); + var lumB = this._luminance(foreground); + + if (lumA >= lumB) { + return ((lumA + 0.05) / (lumB + 0.05)).toFixed(2); + } else { + return ((lumB + 0.05) / (lumA + 0.05)).toFixed(2); + } + }, + + /** + * Determines how readable a color combination is based on its level. + * Levels are defined from @LeaVerou: + * https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/contrast-ratio.js + */ + contrastRatioLevel: function contrastRatioLevel(background, foreground) { + var levels = { + 'fail': { + range: [0, 3], + color: 'hsl(0, 100%, 40%)' + }, + 'aa-large': { + range: [3, 4.5], + color: 'hsl(40, 100%, 45%)' + }, + 'aa': { + range: [4.5, 7], + color: 'hsl(80, 60%, 45%)' + }, + 'aaa': { + range: [7, 22], + color: 'hsl(95, 60%, 41%)' + } + }; + + var ratio = this.contrastRatio(background, foreground); + + for (var level in levels) { + var range = levels[level].range; + if (ratio >= range[0] && ratio <= range[1]) return level; + } + } + +}; +},{}],167:[function(require,module,exports){ +'use strict'; + +var Events = require('./events'); + +module.exports = { + + _testSupportedProps: function _testSupportedProps(props) { + var i, + el = document.createElement('div'); + + for (i in props) { + if (props.hasOwnProperty(i) && el.style[i] !== undefined) { + return props[i]; + } + } + }, + + //Returns the correct event name to use + transitionEndEventName: function transitionEndEventName() { + return this._testSupportedProps({ + 'transition': 'transitionend', + 'OTransition': 'otransitionend', + 'MozTransition': 'transitionend', + 'WebkitTransition': 'webkitTransitionEnd' + }); + }, + + animationEndEventName: function animationEndEventName() { + return this._testSupportedProps({ + 'animation': 'animationend', + '-o-animation': 'oAnimationEnd', + '-moz-animation': 'animationend', + '-webkit-animation': 'webkitAnimationEnd' + }); + }, + + onTransitionEnd: function onTransitionEnd(el, callback) { + var transitionEnd = this.transitionEndEventName(); + + Events.once(el, transitionEnd, function () { + return callback(); + }); + }, + + onAnimationEnd: function onAnimationEnd(el, callback) { + var animationEnd = this.animationEndEventName(); + + Events.once(el, animationEnd, function () { + return callback(); + }); + } + +}; +},{"./events":170}],168:[function(require,module,exports){ +'use strict'; + +module.exports = { + + addDays: function addDays(d, days) { + var newDate = this.clone(d); + newDate.setDate(d.getDate() + days); + return newDate; + }, + + addMonths: function addMonths(d, months) { + var newDate = this.clone(d); + newDate.setMonth(d.getMonth() + months); + return newDate; + }, + + addYears: function addYears(d, years) { + var newDate = this.clone(d); + newDate.setFullYear(d.getFullYear() + years); + return newDate; + }, + + clone: function clone(d) { + return new Date(d.getTime()); + }, + + cloneAsDate: function cloneAsDate(d) { + var clonedDate = this.clone(d); + clonedDate.setHours(0, 0, 0, 0); + return clonedDate; + }, + + getDaysInMonth: function getDaysInMonth(d) { + var resultDate = this.getFirstDayOfMonth(d); + + resultDate.setMonth(resultDate.getMonth() + 1); + resultDate.setDate(resultDate.getDate() - 1); + + return resultDate.getDate(); + }, + + getFirstDayOfMonth: function getFirstDayOfMonth(d) { + return new Date(d.getFullYear(), d.getMonth(), 1); + }, + + getFullMonth: function getFullMonth(d) { + var month = d.getMonth(); + switch (month) { + case 0: + return 'January'; + case 1: + return 'February'; + case 2: + return 'March'; + case 3: + return 'April'; + case 4: + return 'May'; + case 5: + return 'June'; + case 6: + return 'July'; + case 7: + return 'August'; + case 8: + return 'September'; + case 9: + return 'October'; + case 10: + return 'November'; + case 11: + return 'December'; + } + }, + + getShortMonth: function getShortMonth(d) { + var month = d.getMonth(); + switch (month) { + case 0: + return 'Jan'; + case 1: + return 'Feb'; + case 2: + return 'Mar'; + case 3: + return 'Apr'; + case 4: + return 'May'; + case 5: + return 'Jun'; + case 6: + return 'Jul'; + case 7: + return 'Aug'; + case 8: + return 'Sep'; + case 9: + return 'Oct'; + case 10: + return 'Nov'; + case 11: + return 'Dec'; + } + }, + + getDayOfWeek: function getDayOfWeek(d) { + var dow = d.getDay(); + switch (dow) { + case 0: + return 'Sunday'; + case 1: + return 'Monday'; + case 2: + return 'Tuesday'; + case 3: + return 'Wednesday'; + case 4: + return 'Thursday'; + case 5: + return 'Friday'; + case 6: + return 'Saturday'; + } + }, + + getWeekArray: function getWeekArray(d) { + var dayArray = []; + var daysInMonth = this.getDaysInMonth(d); + var daysInWeek; + var emptyDays; + var firstDayOfWeek; + var week; + var weekArray = []; + + for (var i = 1; i <= daysInMonth; i++) { + dayArray.push(new Date(d.getFullYear(), d.getMonth(), i)); + } + + while (dayArray.length) { + firstDayOfWeek = dayArray[0].getDay(); + daysInWeek = 7 - firstDayOfWeek; + emptyDays = 7 - daysInWeek; + week = dayArray.splice(0, daysInWeek); + + for (var i = 0; i < emptyDays; i++) { + week.unshift(null); + } + + weekArray.push(week); + } + + return weekArray; + }, + + format: function format(date) { + var m = date.getMonth() + 1; + var d = date.getDate(); + var y = date.getFullYear(); + return m + '/' + d + '/' + y; + }, + + isEqualDate: function isEqualDate(d1, d2) { + return d1 && d2 && d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate(); + }, + + isBeforeDate: function isBeforeDate(d1, d2) { + var date1 = this.cloneAsDate(d1); + var date2 = this.cloneAsDate(d2); + + return date1.getTime() < date2.getTime(); + }, + + isAfterDate: function isAfterDate(d1, d2) { + var date1 = this.cloneAsDate(d1); + var date2 = this.cloneAsDate(d2); + + return date1.getTime() > date2.getTime(); + }, + + isBetweenDates: function isBetweenDates(dateToCheck, startDate, endDate) { + return !this.isBeforeDate(dateToCheck, startDate) && !this.isAfterDate(dateToCheck, endDate); + }, + + monthDiff: function monthDiff(d1, d2) { + var m; + m = (d1.getFullYear() - d2.getFullYear()) * 12; + m += d1.getMonth(); + m -= d2.getMonth(); + return m; + }, + + yearDiff: function yearDiff(d1, d2) { + return ~ ~(this.monthDiff(d1, d2) / 12); + } + +}; +},{}],169:[function(require,module,exports){ +'use strict'; + +module.exports = { + + isDescendant: function isDescendant(parent, child) { + var node = child.parentNode; + + while (node != null) { + if (node == parent) return true; + node = node.parentNode; + } + + return false; + }, + + offset: function offset(el) { + var rect = el.getBoundingClientRect(); + return { + top: rect.top + document.body.scrollTop, + left: rect.left + document.body.scrollLeft + }; + }, + + addClass: function addClass(el, className) { + if (el.classList) el.classList.add(className);else el.className += ' ' + className; + }, + + removeClass: function removeClass(el, className) { + if (el.classList) el.classList.remove(className);else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); + }, + + hasClass: function hasClass(el, className) { + if (el.classList) return el.classList.contains(className);else return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); + }, + + toggleClass: function toggleClass(el, className) { + if (this.hasClass(el, className)) this.removeClass(el, className);else this.addClass(el, className); + }, + + forceRedraw: function forceRedraw(el) { + var originalDisplay = el.style.display; + + el.style.display = 'none'; + el.offsetHeight; + el.style.display = originalDisplay; + }, + + withoutTransition: function withoutTransition(el, callback) { + //turn off transition + el.style.transition = 'none'; + + callback(); + + //force a redraw + this.forceRedraw(el); + + //put the transition back + el.style.transition = ''; + } + +}; +},{}],170:[function(require,module,exports){ +'use strict'; + +module.exports = { + + once: function once(el, type, callback) { + var typeArray = type.split(' '); + var recursiveFunction = function recursiveFunction(e) { + e.target.removeEventListener(e.type, recursiveFunction); + return callback(e); + }; + + for (var i = typeArray.length - 1; i >= 0; i--) { + this.on(el, typeArray[i], recursiveFunction); + } + }, + + // IE8+ Support + on: function on(el, type, callback) { + if (el.addEventListener) { + el.addEventListener(type, callback); + } else { + el.attachEvent('on' + type, function () { + callback.call(el); + }); + } + }, + + // IE8+ Support + off: function off(el, type, callback) { + if (el.removeEventListener) { + el.removeEventListener(type, callback); + } else { + el.detachEvent('on' + type, callback); + } + } +}; +},{}],171:[function(require,module,exports){ +'use strict'; + +function isObject(obj) { + return typeof obj === 'object' && obj !== null; +} + +/** +* A recursive merge between two objects. +* +* @param base - the object whose properties are to be overwritten. It +* should be either the root level or some nested level. +* @param override - an object containing properties to be overwritten. It +* should have the same structure as the object object. +*/ +var extend = function extend(base, override) { + + var mergedObject = {}; + + //Loop through each key in the base object + Object.keys(base).forEach(function (key) { + + var baseProp = base[key]; + var overrideProp; + + if (isObject(override)) overrideProp = override[key]; + + //Recursive call extend if the prop is another object, else just copy it over + mergedObject[key] = isObject(baseProp) && !Array.isArray(baseProp) ? extend(baseProp, overrideProp) : baseProp; + }); + + //Loop through each override key and override the props in the + //base object + if (isObject(override)) { + + Object.keys(override).forEach(function (overrideKey) { + + var overrideProp = override[overrideKey]; + + //Only copy over props that are not objects + if (!isObject(overrideProp) || Array.isArray(overrideProp)) { + mergedObject[overrideKey] = overrideProp; + } + }); + } + + return mergedObject; +}; + +module.exports = extend; +},{}],172:[function(require,module,exports){ +"use strict"; + +module.exports = { + DOWN: 40, + ESC: 27, + ENTER: 13, + LEFT: 37, + RIGHT: 39, + SPACE: 32, + TAB: 9, + UP: 38 +}; +},{}],173:[function(require,module,exports){ +"use strict"; + +module.exports = { + + Desktop: { + GUTTER: 24, + GUTTER_LESS: 16, + INCREMENT: 64, + MENU_ITEM_HEIGHT: 32 + }, + + getIncrementalDim: function getIncrementalDim(dim) { + return Math.ceil(dim / this.Desktop.INCREMENT) * this.Desktop.INCREMENT; + } +}; +},{}],174:[function(require,module,exports){ +/* Modernizr 2.8.3 (Custom Build) | MIT & BSD + * Build: http://modernizr.com/download/#-borderradius-boxshadow-opacity-csstransforms-csstransforms3d-csstransitions-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes + */ +'use strict'; + +; + +module.exports = (function (window, document, undefined) { + + var version = '2.8.3', + Modernizr = {}, + docElement = document.documentElement, + mod = 'modernizr', + modElem = document.createElement(mod), + mStyle = modElem.style, + inputElem, + toString = ({}).toString, + prefixes = ' -webkit- -moz- -o- -ms- '.split(' '), + omPrefixes = 'Webkit Moz O ms', + cssomPrefixes = omPrefixes.split(' '), + domPrefixes = omPrefixes.toLowerCase().split(' '), + tests = {}, + inputs = {}, + attrs = {}, + classes = [], + slice = classes.slice, + featureName, + injectElementWithStyles = function injectElementWithStyles(rule, callback, nodes, testnames) { + + var style, + ret, + node, + docOverflow, + div = document.createElement('div'), + body = document.body, + fakeBody = body || document.createElement('body'); + + if (parseInt(nodes, 10)) { + while (nodes--) { + node = document.createElement('div'); + node.id = testnames ? testnames[nodes] : mod + (nodes + 1); + div.appendChild(node); + } + } + + style = ['­', ''].join(''); + div.id = mod; + (body ? div : fakeBody).innerHTML += style; + fakeBody.appendChild(div); + if (!body) { + fakeBody.style.background = ''; + fakeBody.style.overflow = 'hidden'; + docOverflow = docElement.style.overflow; + docElement.style.overflow = 'hidden'; + docElement.appendChild(fakeBody); + } + + ret = callback(div, rule); + if (!body) { + fakeBody.parentNode.removeChild(fakeBody); + docElement.style.overflow = docOverflow; + } else { + div.parentNode.removeChild(div); + } + + return !!ret; + }, + _hasOwnProperty = ({}).hasOwnProperty, + hasOwnProp; + + if (!is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined')) { + hasOwnProp = function (object, property) { + return _hasOwnProperty.call(object, property); + }; + } else { + hasOwnProp = function (object, property) { + return property in object && is(object.constructor.prototype[property], 'undefined'); + }; + } + + if (!Function.prototype.bind) { + Function.prototype.bind = function bind(that) { + + var target = this; + + if (typeof target != 'function') { + throw new TypeError(); + } + + var args = slice.call(arguments, 1), + bound = function bound() { + + if (this instanceof bound) { + + var F = function F() {}; + F.prototype = target.prototype; + var self = new F(); + + var result = target.apply(self, args.concat(slice.call(arguments))); + if (Object(result) === result) { + return result; + } + return self; + } else { + + return target.apply(that, args.concat(slice.call(arguments))); + } + }; + + return bound; + }; + } + + function setCss(str) { + mStyle.cssText = str; + } + + function setCssAll(str1, str2) { + return setCss(prefixes.join(str1 + ';') + (str2 || '')); + } + + function is(obj, type) { + return typeof obj === type; + } + + function contains(str, substr) { + return !! ~('' + str).indexOf(substr); + } + + function testProps(props, prefixed) { + for (var i in props) { + var prop = props[i]; + if (!contains(prop, '-') && mStyle[prop] !== undefined) { + return prefixed == 'pfx' ? prop : true; + } + } + return false; + } + + function testDOMProps(props, obj, elem) { + for (var i in props) { + var item = obj[props[i]]; + if (item !== undefined) { + + if (elem === false) return props[i]; + + if (is(item, 'function')) { + return item.bind(elem || obj); + } + + return item; + } + } + return false; + } + + function testPropsAll(prop, prefixed, elem) { + + var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1), + props = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' '); + + if (is(prefixed, 'string') || is(prefixed, 'undefined')) { + return testProps(props, prefixed); + } else { + props = (prop + ' ' + domPrefixes.join(ucProp + ' ') + ucProp).split(' '); + return testDOMProps(props, prefixed, elem); + } + } + + tests['borderradius'] = function () { + return testPropsAll('borderRadius'); + }; + + tests['boxshadow'] = function () { + return testPropsAll('boxShadow'); + }; + + tests['opacity'] = function () { + setCssAll('opacity:.55'); + + return /^0.55$/.test(mStyle.opacity); + }; + tests['csstransforms'] = function () { + return !!testPropsAll('transform'); + }; + + tests['csstransforms3d'] = function () { + + var ret = !!testPropsAll('perspective'); + + if (ret && 'webkitPerspective' in docElement.style) { + + injectElementWithStyles('@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}', function (node, rule) { + ret = node.offsetLeft === 9 && node.offsetHeight === 3; + }); + } + return ret; + }; + + tests['csstransitions'] = function () { + return testPropsAll('transition'); + }; + + for (var feature in tests) { + if (hasOwnProp(tests, feature)) { + featureName = feature.toLowerCase(); + Modernizr[featureName] = tests[feature](); + + classes.push((Modernizr[featureName] ? '' : 'no-') + featureName); + } + } + + Modernizr.addTest = function (feature, test) { + if (typeof feature == 'object') { + for (var key in feature) { + if (hasOwnProp(feature, key)) { + Modernizr.addTest(key, feature[key]); + } + } + } else { + + feature = feature.toLowerCase(); + + if (Modernizr[feature] !== undefined) { + return Modernizr; + } + + test = typeof test == 'function' ? test() : test; + + if (typeof enableClasses !== 'undefined' && enableClasses) { + docElement.className += ' ' + (test ? '' : 'no-') + feature; + } + Modernizr[feature] = test; + } + + return Modernizr; + }; + + setCss(''); + modElem = inputElem = null; + + Modernizr._version = version; + + Modernizr._prefixes = prefixes; + Modernizr._domPrefixes = domPrefixes; + Modernizr._cssomPrefixes = cssomPrefixes; + + Modernizr.testProp = function (prop) { + return testProps([prop]); + }; + + Modernizr.testAllProps = testPropsAll; + + Modernizr.testStyles = injectElementWithStyles; + Modernizr.prefixed = function (prop, obj, elem) { + if (!obj) { + return testPropsAll(prop, 'pfx'); + } else { + return testPropsAll(prop, obj, elem); + } + }; + + return Modernizr; +})(window, window.document); +; +},{}],175:[function(require,module,exports){ +"use strict"; + +var index = 0; + +module.exports = { + generate: function generate() { + return "mui-id-" + index++; + } +}; +},{}],176:[function(require,module,exports){ +/*! + Copyright (c) 2015 Jed Watson. + Licensed under the MIT License (MIT), see + http://jedwatson.github.io/classnames +*/ + +function classNames() { + var classes = ''; + var arg; + + for (var i = 0; i < arguments.length; i++) { + arg = arguments[i]; + if (!arg) { + continue; + } + + if ('string' === typeof arg || 'number' === typeof arg) { + classes += ' ' + arg; + } else if (Object.prototype.toString.call(arg) === '[object Array]') { + classes += ' ' + classNames.apply(null, arg); + } else if ('object' === typeof arg) { + for (var key in arg) { + if (!arg.hasOwnProperty(key) || !arg[key]) { + continue; + } + classes += ' ' + key; + } + } + } + return classes.substr(1); +} + +// safely export classNames for node / browserify +if (typeof module !== 'undefined' && module.exports) { + module.exports = classNames; +} + +// safely export classNames for RequireJS +if (typeof define !== 'undefined' && define.amd) { + define('classnames', [], function() { + return classNames; + }); +} + +},{}],177:[function(require,module,exports){ +'use strict'; + +var React = require('react/addons'); +var emptyFunction = function () {}; + +// for accessing browser globals +var root = typeof window !== 'undefined' ? window : this; +var bodyElement; +if (typeof document !== 'undefined' && 'body' in document) { + bodyElement = document.body; +} + +function updateBoundState (state, bound) { + if (!bound) return state; + bound = String(bound); + var boundTop = !!~bound.indexOf('top'); + var boundRight = !!~bound.indexOf('right'); + var boundBottom = !!~bound.indexOf('bottom'); + var boundLeft = !!~bound.indexOf('left'); + var boundAll = !!~bound.indexOf('all') || + !(boundTop || boundRight || boundBottom || boundLeft); + var boundBox = !~bound.indexOf('point'); + state.boundTop = boundAll || boundTop; + state.boundRight = boundAll || boundRight; + state.boundBottom = boundAll || boundBottom; + state.boundLeft = boundAll || boundLeft; + state.boundBox = boundBox; + return state; +}; + +function createUIEvent(draggable) { + return { + position: { + top: draggable.state.offsetTop, + left: draggable.state.offsetLeft + } + }; +} + +function canDragY(draggable) { + return draggable.props.axis === 'both' || + draggable.props.axis === 'y'; +} + +function canDragX(draggable) { + return draggable.props.axis === 'both' || + draggable.props.axis === 'x'; +} + +function isFunction(func) { + return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]' +} + +// @credits https://gist.github.com/rogozhnikoff/a43cfed27c41e4e68cdc +function findInArray(array, callback) { + for (var i = 0, length = array.length, element = null; i < length, element = array[i]; i++) { + if (callback.apply(callback, [element, i, array])) return element; + } +} + +function matchesSelector(el, selector) { + var method = findInArray([ + 'matches', + 'webkitMatchesSelector', + 'mozMatchesSelector', + 'msMatchesSelector', + 'oMatchesSelector' + ], function(method){ + return isFunction(el[method]); + }); + + return el[method].call(el, selector); +} + +// @credits: http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript/4819886#4819886 +var isTouchDevice = 'ontouchstart' in root // works on most browsers + || 'onmsgesturechange' in root; // works on ie10 on ms surface + +// look ::handleDragStart +//function isMultiTouch(e) { +// return e.touches && Array.isArray(e.touches) && e.touches.length > 1 +//} + +/** + * simple abstraction for dragging events names + * */ +var dragEventFor = (function () { + var eventsFor = { + touch: { + start: 'touchstart', + move: 'touchmove', + end: 'touchend' + }, + mouse: { + start: 'mousedown', + move: 'mousemove', + end: 'mouseup' + } + }; + return eventsFor[isTouchDevice ? 'touch' : 'mouse']; +})(); + +/** + * get {clientX, clientY} positions of control + * */ +function getControlPosition(e) { + var position = (e.touches && e.touches[0]) || e; + return { + clientX: position.clientX, + clientY: position.clientY + } +} + +function addEvent(el, event, handler) { + if (!el) { return; } + if (el.attachEvent) { + el.attachEvent('on' + event, handler); + } else if (el.addEventListener) { + el.addEventListener(event, handler, true); + } else { + el['on' + event] = handler; + } +} + +function removeEvent(el, event, handler) { + if (!el) { return; } + if (el.detachEvent) { + el.detachEvent('on' + event, handler); + } else if (el.removeEventListener) { + el.removeEventListener(event, handler, true); + } else { + el['on' + event] = null; + } +} + +module.exports = React.createClass({ + displayName: 'Draggable', + mixins: [React.addons.PureRenderMixin], + + propTypes: { + /** + * `axis` determines which axis the draggable can move. + * + * 'both' allows movement horizontally and vertically. + * 'x' limits movement to horizontal axis. + * 'y' limits movement to vertical axis. + * + * Defaults to 'both'. + */ + axis: React.PropTypes.oneOf(['both', 'x', 'y']), + + /** + * `handle` specifies a selector to be used as the handle that initiates drag. + * + * Example: + * + * ```jsx + * var App = React.createClass({ + * render: function () { + * return ( + * + *
+ *
Click me to drag
+ *
This is some other content
+ *
+ * + * ); + * } + * }); + * ``` + */ + handle: React.PropTypes.string, + + /** + * `cancel` specifies a selector to be used to prevent drag initialization. + * + * Example: + * + * ```jsx + * var App = React.createClass({ + * render: function () { + * return( + * + *
+ *
You can't drag from here
+ *
Dragging here works fine
+ *
+ * + * ); + * } + * }); + * ``` + */ + cancel: React.PropTypes.string, + + /** + * `bound` determines whether to bound the movement to the parent box. + * + * The property takes a list of space-separated strings. The Draggable + * is bounded by the nearest DOMNode.offsetParent. To set the offset + * parent, give it a position value other than 'static'. + * + * Optionally choose one or more bounds from: + * 'top' bounds movement to the top edge of the parent box. + * 'right' bounds movement to the right edge of the parent box. + * 'bottom' bounds movement to the bottom edge of the parent box. + * 'left' bounds movement to the left edge of the parent box. + * 'all' bounds movement to all edges (default if not specified). + * + * Optionally choose one anchor from: + * 'point' to constrain only the top-left corner. + * 'box' to constrain the entire box (default if not specified). + * + * You may use more than one bound, e.g. 'top left point'. Set to a + * falsy value to disable. + * + * Defaults to 'all box'. + */ + bound: React.PropTypes.string, + + /** + * `grid` specifies the x and y that dragging should snap to. + * + * Example: + * + * ```jsx + * var App = React.createClass({ + * render: function () { + * return ( + * + *
I snap to a 25 x 25 grid
+ * + * ); + * } + * }); + * ``` + */ + grid: React.PropTypes.arrayOf(React.PropTypes.number), + + /** + * `constrain` takes a function to constrain the dragging. + * + * Example: + * + * ```jsx + * function constrain (snap) { + * function constrainOffset (offset, prev) { + * var delta = offset - prev; + * if (Math.abs(delta) >= snap) { + * return prev + (delta < 0 ? -snap : snap); + * } + * return prev; + * } + * return function (pos) { + * return { + * top: constrainOffset(pos.top, pos.prevTop), + * left: constrainOffset(pos.left, pos.prevLeft) + * }; + * }; + * } + * var App = React.createClass({ + * render: function () { + * return ( + * + *
I snap to a 25 x 25 grid
+ * + * ); + * } + * }); + * ``` + */ + constrain: React.PropTypes.func, + + /** + * `start` specifies the x and y that the dragged item should start at + * + * Example: + * + * ```jsx + * var App = React.createClass({ + * render: function () { + * return ( + * + *
I start with left: 25px; top: 25px;
+ * + * ); + * } + * }); + * ``` + */ + start: React.PropTypes.object, + + /** + * `zIndex` specifies the zIndex to use while dragging. + * + * Example: + * + * ```jsx + * var App = React.createClass({ + * render: function () { + * return ( + * + *
I have a zIndex
+ * + * ); + * } + * }); + * ``` + */ + zIndex: React.PropTypes.number, + + /** + * `useChild` determines whether to use the first child as root. + * + * If false, a div is created. This option is required if any children + * have a ref. + * + * Defaults to true. + */ + useChild: React.PropTypes.bool, + + /** + * Called when dragging starts. + * + * Example: + * + * ```js + * function (event, ui) {} + * ``` + * + * `event` is the Event that was triggered. + * `ui` is an object: + * + * ```js + * { + * position: {top: 0, left: 0} + * } + * ``` + */ + onStart: React.PropTypes.func, + + /** + * Called while dragging. + * + * Example: + * + * ```js + * function (event, ui) {} + * ``` + * + * `event` is the Event that was triggered. + * `ui` is an object: + * + * ```js + * { + * position: {top: 0, left: 0} + * } + * ``` + */ + onDrag: React.PropTypes.func, + + /** + * Called when dragging stops. + * + * Example: + * + * ```js + * function (event, ui) {} + * ``` + * + * `event` is the Event that was triggered. + * `ui` is an object: + * + * ```js + * { + * position: {top: 0, left: 0} + * } + * ``` + */ + onStop: React.PropTypes.func, + + /** + * A workaround option which can be passed if onMouseDown needs to be accessed, since it'll always be blocked (due to that there's internal use of onMouseDown) + * + */ + onMouseDown: React.PropTypes.func + }, + + getDefaultProps: function () { + return { + axis: 'both', + bound: null, + handle: null, + cancel: null, + grid: null, + start: {}, + zIndex: NaN, + useChild: true, + onStart: emptyFunction, + onDrag: emptyFunction, + onStop: emptyFunction, + onMouseDown: emptyFunction + }; + }, + + getInitialState: function () { + var state = { + // Whether or not currently dragging + dragging: false, + + // Pointer offset on screen + clientX: 0, clientY: 0, + + // DOMNode offset relative to parent + offsetLeft: this.props.start.x || 0, offsetTop: this.props.start.y || 0 + }; + + updateBoundState(state, this.props.bound); + + return state; + }, + + componentWillReceiveProps: function (nextProps) { + var state = updateBoundState({}, nextProps.bound); + if (nextProps.start) { + if (nextProps.start.x != null) { + state.offsetLeft = nextProps.start.x || 0; + } + if (nextProps.start.y != null) { + state.offsetTop = nextProps.start.y || 0; + } + } + this.setState(state); + }, + + componentWillUnmount: function() { + // Remove any leftover event handlers + removeEvent(root, dragEventFor['move'], this.handleDrag); + removeEvent(root, dragEventFor['end'], this.handleDragEnd); + }, + + handleDragStart: function (e) { + // todo: write right implementation to prevent multitouch drag + // prevent multi-touch events + // if (isMultiTouch(e)) { + // this.handleDragEnd.apply(e, arguments); + // return + // } + + // Make it possible to attach event handlers on top of this one + this.props.onMouseDown(e); + + // Short circuit if handle or cancel prop was provided and selector doesn't match + if ((this.props.handle && !matchesSelector(e.target, this.props.handle)) || + (this.props.cancel && matchesSelector(e.target, this.props.cancel))) { + return; + } + + var dragPoint = getControlPosition(e); + + // Initiate dragging + this.setState({ + dragging: true, + clientX: dragPoint.clientX, + clientY: dragPoint.clientY + }); + + // Call event handler + this.props.onStart(e, createUIEvent(this)); + + // Add event handlers + addEvent(root, dragEventFor['move'], this.handleDrag); + addEvent(root, dragEventFor['end'], this.handleDragEnd); + + // Add dragging class to body element + if (bodyElement) bodyElement.className += ' react-draggable-dragging'; + }, + + handleDragEnd: function (e) { + // Short circuit if not currently dragging + if (!this.state.dragging) { + return; + } + + // Turn off dragging + this.setState({ + dragging: false + }); + + // Call event handler + this.props.onStop(e, createUIEvent(this)); + + // Remove event handlers + removeEvent(root, dragEventFor['move'], this.handleDrag); + removeEvent(root, dragEventFor['end'], this.handleDragEnd); + + // Remove dragging class from body element + if (bodyElement) { + var className = bodyElement.className; + bodyElement.className = + className.replace(/(?:^|\s+)react-draggable-dragging\b/, ' '); + } + }, + + handleDrag: function (e) { + var dragPoint = getControlPosition(e); + var offsetLeft = this._toPixels(this.state.offsetLeft); + var offsetTop = this._toPixels(this.state.offsetTop); + + var state = { + offsetLeft: offsetLeft, + offsetTop: offsetTop + }; + + // Get parent DOM node + var node = this.getDOMNode(); + var offsetParent = node.offsetParent; + var offset, boundingValue; + + if (canDragX(this)) { + // Calculate updated position + offset = offsetLeft + dragPoint.clientX - this.state.clientX; + + // Bound movement to parent box + if (this.state.boundLeft) { + boundingValue = state.offsetLeft - node.offsetLeft; + if (offset < boundingValue) { + offset = boundingValue; + } + } + if (this.state.boundRight) { + boundingValue += offsetParent.clientWidth; + if (this.state.boundBox) { + boundingValue -= node.offsetWidth; + } + if (offset > boundingValue) { + offset = boundingValue; + } + } + // Update left + state.offsetLeft = offset; + } + + if (canDragY(this)) { + // Calculate updated position + offset = offsetTop + dragPoint.clientY - this.state.clientY; + // Bound movement to parent box + if (this.state.boundTop) { + boundingValue = state.offsetTop - node.offsetTop; + if (offset < boundingValue) { + offset = boundingValue; + } + } + if (this.state.boundBottom) { + boundingValue += offsetParent.clientHeight; + if (this.state.boundBox) { + boundingValue -= node.offsetHeight; + } + if (offset > boundingValue) { + offset = boundingValue; + } + } + // Update top + state.offsetTop = offset; + } + + var constrain = this.props.constrain; + var grid = this.props.grid; + + // Backwards-compatibility for snap to grid + if (!constrain && Array.isArray(grid)) { + var constrainOffset = function (offset, prev, snap) { + var delta = offset - prev; + if (Math.abs(delta) >= snap) { + return prev + parseInt(delta / snap, 10) * snap; + } + return prev; + }; + constrain = function (pos) { + return { + left: constrainOffset(pos.left, pos.prevLeft, grid[0]), + top: constrainOffset(pos.top, pos.prevTop, grid[1]) + }; + }; + } + + // Constrain if function has been provided + var positions; + if (constrain) { + // Constrain positions + positions = constrain({ + prevLeft: this.state.offsetLeft, + prevTop: this.state.offsetTop, + left: state.offsetLeft, + top: state.offsetTop + }); + if (positions) { + // Update left + if ('left' in positions && !isNaN(positions.left)) { + state.offsetLeft = positions.left; + } + // Update top + if ('top' in positions && !isNaN(positions.top)) { + state.offsetTop = positions.top; + } + } + } + + // Save new state + state.clientX = this.state.clientX + (state.offsetLeft - offsetLeft); + state.clientY = this.state.clientY + (state.offsetTop - offsetTop); + this.setState(state); + + // Call event handler + this.props.onDrag(e, createUIEvent(this)); + }, + + onTouchStart: function (e) { + e.preventDefault(); // prevent for scroll + return this.handleDragStart.apply(this, arguments); + }, + + render: function () { + var style = { + top: this.state.offsetTop, + left: this.state.offsetLeft + }; + + // Set zIndex if currently dragging and prop has been provided + if (this.state.dragging && !isNaN(this.props.zIndex)) { + style.zIndex = this.props.zIndex; + } + + var props = { + style: style, + className: 'react-draggable', + + onMouseDown: this.handleDragStart, + onTouchStart: this.onTouchStart, + + onMouseUp: this.handleDragEnd, + onTouchEnd: this.handleDragEnd + }; + + // Reuse the child provided + // This makes it flexible to use whatever element is wanted (div, ul, etc) + if (this.props.useChild) { + return React.addons.cloneWithProps(React.Children.only(this.props.children), props); + } + + return React.DOM.div(props, this.props.children); + }, + + _toPixels: function (value) { + + // Support percentages + if (typeof value == 'string' && value.slice(-1) == '%') { + return parseInt((+value.replace('%', '') / 100) * + this.getDOMNode().offsetParent.clientWidth, 10) || 0; + } + + // Invalid values become zero + var i = parseInt(value, 10); + if (isNaN(i) || !isFinite(i)) return 0; + + return i; + } + +}); + +},{"react/addons":185}],178:[function(require,module,exports){ +'use strict'; + +exports.__esModule = true; + +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 _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) subClass.__proto__ = superClass; } + +var _function = require('./function'); + +var _function2 = _interopRequireDefault(_function); + +var _react = require('react'); + +var PureComponent = (function (_Component) { + function PureComponent() { + _classCallCheck(this, PureComponent); + + if (_Component != null) { + _Component.apply(this, arguments); + } + } + + _inherits(PureComponent, _Component); + + return PureComponent; +})(_react.Component); + +exports['default'] = PureComponent; + +PureComponent.prototype.shouldComponentUpdate = _function2['default']; +module.exports = exports['default']; +},{"./function":179,"react":357}],179:[function(require,module,exports){ +arguments[4][54][0].apply(exports,arguments) +},{"./shallowEqual":180,"dup":54}],180:[function(require,module,exports){ +arguments[4][55][0].apply(exports,arguments) +},{"dup":55}],181:[function(require,module,exports){ +/** + * Copyright 2013-2014, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule ResponderEventPlugin + */ + +"use strict"; + +var EventConstants = require('react/lib/EventConstants'); +var EventPluginUtils = require('react/lib/EventPluginUtils'); +var EventPropagators = require('react/lib/EventPropagators'); +var SyntheticEvent = require('react/lib/SyntheticEvent'); + +var accumulateInto = require('react/lib/accumulateInto'); +var keyOf = require('react/lib/keyOf'); + +var isStartish = EventPluginUtils.isStartish; +var isMoveish = EventPluginUtils.isMoveish; +var isEndish = EventPluginUtils.isEndish; +var executeDirectDispatch = EventPluginUtils.executeDirectDispatch; +var hasDispatches = EventPluginUtils.hasDispatches; +var executeDispatchesInOrderStopAtTrue = + EventPluginUtils.executeDispatchesInOrderStopAtTrue; + +/** + * ID of element that should respond to touch/move types of interactions, as + * indicated explicitly by relevant callbacks. + */ +var responderID = null; +var isPressing = false; + +var eventTypes = { + /** + * On a `touchStart`/`mouseDown`, is it desired that this element become the + * responder? + */ + startShouldSetResponder: { + phasedRegistrationNames: { + bubbled: keyOf({onStartShouldSetResponder: null}), + captured: keyOf({onStartShouldSetResponderCapture: null}) + } + }, + + /** + * On a `scroll`, is it desired that this element become the responder? This + * is usually not needed, but should be used to retroactively infer that a + * `touchStart` had occured during momentum scroll. During a momentum scroll, + * a touch start will be immediately followed by a scroll event if the view is + * currently scrolling. + */ + scrollShouldSetResponder: { + phasedRegistrationNames: { + bubbled: keyOf({onScrollShouldSetResponder: null}), + captured: keyOf({onScrollShouldSetResponderCapture: null}) + } + }, + + /** + * On a `touchMove`/`mouseMove`, is it desired that this element become the + * responder? + */ + moveShouldSetResponder: { + phasedRegistrationNames: { + bubbled: keyOf({onMoveShouldSetResponder: null}), + captured: keyOf({onMoveShouldSetResponderCapture: null}) + } + }, + + /** + * Direct responder events dispatched directly to responder. Do not bubble. + */ + responderMove: {registrationName: keyOf({onResponderMove: null})}, + responderRelease: {registrationName: keyOf({onResponderRelease: null})}, + responderTerminationRequest: { + registrationName: keyOf({onResponderTerminationRequest: null}) + }, + responderGrant: {registrationName: keyOf({onResponderGrant: null})}, + responderReject: {registrationName: keyOf({onResponderReject: null})}, + responderTerminate: {registrationName: keyOf({onResponderTerminate: null})} +}; + +/** + * Performs negotiation between any existing/current responder, checks to see if + * any new entity is interested in becoming responder, performs that handshake + * and returns any events that must be emitted to notify the relevant parties. + * + * A note about event ordering in the `EventPluginHub`. + * + * Suppose plugins are injected in the following order: + * + * `[R, S, C]` + * + * To help illustrate the example, assume `S` is `SimpleEventPlugin` (for + * `onClick` etc) and `R` is `ResponderEventPlugin`. + * + * "Deferred-Dispatched Events": + * + * - The current event plugin system will traverse the list of injected plugins, + * in order, and extract events by collecting the plugin's return value of + * `extractEvents()`. + * - These events that are returned from `extractEvents` are "deferred + * dispatched events". + * - When returned from `extractEvents`, deferred-dispatched events contain an + * "accumulation" of deferred dispatches. + * - These deferred dispatches are accumulated/collected before they are + * returned, but processed at a later time by the `EventPluginHub` (hence the + * name deferred). + * + * In the process of returning their deferred-dispatched events, event plugins + * themselves can dispatch events on-demand without returning them from + * `extractEvents`. Plugins might want to do this, so that they can use event + * dispatching as a tool that helps them decide which events should be extracted + * in the first place. + * + * "On-Demand-Dispatched Events": + * + * - On-demand-dispatched events are not returned from `extractEvents`. + * - On-demand-dispatched events are dispatched during the process of returning + * the deferred-dispatched events. + * - They should not have side effects. + * - They should be avoided, and/or eventually be replaced with another + * abstraction that allows event plugins to perform multiple "rounds" of event + * extraction. + * + * Therefore, the sequence of event dispatches becomes: + * + * - `R`s on-demand events (if any) (dispatched by `R` on-demand) + * - `S`s on-demand events (if any) (dispatched by `S` on-demand) + * - `C`s on-demand events (if any) (dispatched by `C` on-demand) + * - `R`s extracted events (if any) (dispatched by `EventPluginHub`) + * - `S`s extracted events (if any) (dispatched by `EventPluginHub`) + * - `C`s extracted events (if any) (dispatched by `EventPluginHub`) + * + * In the case of `ResponderEventPlugin`: If the `startShouldSetResponder` + * on-demand dispatch returns `true` (and some other details are satisfied) the + * `onResponderGrant` deferred dispatched event is returned from + * `extractEvents`. The sequence of dispatch executions in this case + * will appear as follows: + * + * - `startShouldSetResponder` (`ResponderEventPlugin` dispatches on-demand) + * - `touchStartCapture` (`EventPluginHub` dispatches as usual) + * - `touchStart` (`EventPluginHub` dispatches as usual) + * - `responderGrant/Reject` (`EventPluginHub` dispatches as usual) + * + * @param {string} topLevelType Record from `EventConstants`. + * @param {string} topLevelTargetID ID of deepest React rendered element. + * @param {object} nativeEvent Native browser event. + * @return {*} An accumulation of synthetic events. + */ +function setResponderAndExtractTransfer( + topLevelType, + topLevelTargetID, + nativeEvent) { + var shouldSetEventType = + isStartish(topLevelType) ? eventTypes.startShouldSetResponder : + isMoveish(topLevelType) ? eventTypes.moveShouldSetResponder : + eventTypes.scrollShouldSetResponder; + + var bubbleShouldSetFrom = responderID || topLevelTargetID; + var shouldSetEvent = SyntheticEvent.getPooled( + shouldSetEventType, + bubbleShouldSetFrom, + nativeEvent + ); + EventPropagators.accumulateTwoPhaseDispatches(shouldSetEvent); + var wantsResponderID = executeDispatchesInOrderStopAtTrue(shouldSetEvent); + if (!shouldSetEvent.isPersistent()) { + shouldSetEvent.constructor.release(shouldSetEvent); + } + + if (!wantsResponderID || wantsResponderID === responderID) { + return null; + } + var extracted; + var grantEvent = SyntheticEvent.getPooled( + eventTypes.responderGrant, + wantsResponderID, + nativeEvent + ); + + EventPropagators.accumulateDirectDispatches(grantEvent); + if (responderID) { + var terminationRequestEvent = SyntheticEvent.getPooled( + eventTypes.responderTerminationRequest, + responderID, + nativeEvent + ); + EventPropagators.accumulateDirectDispatches(terminationRequestEvent); + var shouldSwitch = !hasDispatches(terminationRequestEvent) || + executeDirectDispatch(terminationRequestEvent); + if (!terminationRequestEvent.isPersistent()) { + terminationRequestEvent.constructor.release(terminationRequestEvent); + } + + if (shouldSwitch) { + var terminateType = eventTypes.responderTerminate; + var terminateEvent = SyntheticEvent.getPooled( + terminateType, + responderID, + nativeEvent + ); + EventPropagators.accumulateDirectDispatches(terminateEvent); + extracted = accumulateInto(extracted, [grantEvent, terminateEvent]); + responderID = wantsResponderID; + } else { + var rejectEvent = SyntheticEvent.getPooled( + eventTypes.responderReject, + wantsResponderID, + nativeEvent + ); + EventPropagators.accumulateDirectDispatches(rejectEvent); + extracted = accumulateInto(extracted, rejectEvent); + } + } else { + extracted = accumulateInto(extracted, grantEvent); + responderID = wantsResponderID; + } + return extracted; +} + +/** + * A transfer is a negotiation between a currently set responder and the next + * element to claim responder status. Any start event could trigger a transfer + * of responderID. Any move event could trigger a transfer, so long as there is + * currently a responder set (in other words as long as the user is pressing + * down). + * + * @param {string} topLevelType Record from `EventConstants`. + * @return {boolean} True if a transfer of responder could possibly occur. + */ +function canTriggerTransfer(topLevelType) { + return topLevelType === EventConstants.topLevelTypes.topScroll || + isStartish(topLevelType) || + (isPressing && isMoveish(topLevelType)); +} + +/** + * Event plugin for formalizing the negotiation between claiming locks on + * receiving touches. + */ +var ResponderEventPlugin = { + + getResponderID: function() { + return responderID; + }, + + eventTypes: eventTypes, + + /** + * @param {string} topLevelType Record from `EventConstants`. + * @param {DOMEventTarget} topLevelTarget The listening component root node. + * @param {string} topLevelTargetID ID of `topLevelTarget`. + * @param {object} nativeEvent Native browser event. + * @return {*} An accumulation of synthetic events. + * @see {EventPluginHub.extractEvents} + */ + extractEvents: function( + topLevelType, + topLevelTarget, + topLevelTargetID, + nativeEvent) { + var extracted; + // Must have missed an end event - reset the state here. + if (responderID && isStartish(topLevelType)) { + responderID = null; + } + if (isStartish(topLevelType)) { + isPressing = true; + } else if (isEndish(topLevelType)) { + isPressing = false; + } + if (canTriggerTransfer(topLevelType)) { + var transfer = setResponderAndExtractTransfer( + topLevelType, + topLevelTargetID, + nativeEvent + ); + if (transfer) { + extracted = accumulateInto(extracted, transfer); + } + } + // Now that we know the responder is set correctly, we can dispatch + // responder type events (directly to the responder). + var type = isMoveish(topLevelType) ? eventTypes.responderMove : + isEndish(topLevelType) ? eventTypes.responderRelease : + isStartish(topLevelType) ? eventTypes.responderStart : null; + if (type) { + var gesture = SyntheticEvent.getPooled( + type, + responderID || '', + nativeEvent + ); + EventPropagators.accumulateDirectDispatches(gesture); + extracted = accumulateInto(extracted, gesture); + } + if (type === eventTypes.responderRelease) { + responderID = null; + } + return extracted; + } + +}; + +module.exports = ResponderEventPlugin; + +},{"react/lib/EventConstants":200,"react/lib/EventPluginUtils":204,"react/lib/EventPropagators":205,"react/lib/SyntheticEvent":293,"react/lib/accumulateInto":303,"react/lib/keyOf":342}],182:[function(require,module,exports){ +/** + * Copyright 2013-2014 Facebook, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * @providesModule TapEventPlugin + * @typechecks static-only + */ + +"use strict"; + +var EventConstants = require('react/lib/EventConstants'); +var EventPluginUtils = require('react/lib/EventPluginUtils'); +var EventPropagators = require('react/lib/EventPropagators'); +var SyntheticUIEvent = require('react/lib/SyntheticUIEvent'); +var TouchEventUtils = require('./TouchEventUtils'); +var ViewportMetrics = require('react/lib/ViewportMetrics'); + +var keyOf = require('react/lib/keyOf'); +var topLevelTypes = EventConstants.topLevelTypes; + +var isStartish = EventPluginUtils.isStartish; +var isEndish = EventPluginUtils.isEndish; + +var isTouch = function(topLevelType) { + var touchTypes = [ + topLevelTypes.topTouchCancel, + topLevelTypes.topTouchEnd, + topLevelTypes.topTouchStart, + topLevelTypes.topTouchMove + ]; + return touchTypes.indexOf(topLevelType) >= 0; +} + +/** + * Number of pixels that are tolerated in between a `touchStart` and `touchEnd` + * in order to still be considered a 'tap' event. + */ +var tapMoveThreshold = 10; +var ignoreMouseThreshold = 750; +var startCoords = {x: null, y: null}; +var lastTouchEvent = null; + +var Axis = { + x: {page: 'pageX', client: 'clientX', envScroll: 'currentPageScrollLeft'}, + y: {page: 'pageY', client: 'clientY', envScroll: 'currentPageScrollTop'} +}; + +function getAxisCoordOfEvent(axis, nativeEvent) { + var singleTouch = TouchEventUtils.extractSingleTouch(nativeEvent); + if (singleTouch) { + return singleTouch[axis.page]; + } + return axis.page in nativeEvent ? + nativeEvent[axis.page] : + nativeEvent[axis.client] + ViewportMetrics[axis.envScroll]; +} + +function getDistance(coords, nativeEvent) { + var pageX = getAxisCoordOfEvent(Axis.x, nativeEvent); + var pageY = getAxisCoordOfEvent(Axis.y, nativeEvent); + return Math.pow( + Math.pow(pageX - coords.x, 2) + Math.pow(pageY - coords.y, 2), + 0.5 + ); +} + +var dependencies = [ + topLevelTypes.topMouseDown, + topLevelTypes.topMouseMove, + topLevelTypes.topMouseUp +]; + +if (EventPluginUtils.useTouchEvents) { + dependencies.push( + topLevelTypes.topTouchEnd, + topLevelTypes.topTouchStart, + topLevelTypes.topTouchMove + ); +} + +var eventTypes = { + touchTap: { + phasedRegistrationNames: { + bubbled: keyOf({onTouchTap: null}), + captured: keyOf({onTouchTapCapture: null}) + }, + dependencies: dependencies + } +}; + +var now = function() { + if (Date.now) { + return Date.now(); + } else { + // IE8 support: http://stackoverflow.com/questions/9430357/please-explain-why-and-how-new-date-works-as-workaround-for-date-now-in + return +new Date; + } +} + +var TapEventPlugin = { + + tapMoveThreshold: tapMoveThreshold, + + ignoreMouseThreshold: ignoreMouseThreshold, + + eventTypes: eventTypes, + + /** + * @param {string} topLevelType Record from `EventConstants`. + * @param {DOMEventTarget} topLevelTarget The listening component root node. + * @param {string} topLevelTargetID ID of `topLevelTarget`. + * @param {object} nativeEvent Native browser event. + * @return {*} An accumulation of synthetic events. + * @see {EventPluginHub.extractEvents} + */ + extractEvents: function( + topLevelType, + topLevelTarget, + topLevelTargetID, + nativeEvent) { + + if (isTouch(topLevelType)) { + lastTouchEvent = now(); + } else { + if (lastTouchEvent && (now() - lastTouchEvent) < ignoreMouseThreshold) { + return null; + } + } + + if (!isStartish(topLevelType) && !isEndish(topLevelType)) { + return null; + } + var event = null; + var distance = getDistance(startCoords, nativeEvent); + if (isEndish(topLevelType) && distance < tapMoveThreshold) { + event = SyntheticUIEvent.getPooled( + eventTypes.touchTap, + topLevelTargetID, + nativeEvent + ); + } + if (isStartish(topLevelType)) { + startCoords.x = getAxisCoordOfEvent(Axis.x, nativeEvent); + startCoords.y = getAxisCoordOfEvent(Axis.y, nativeEvent); + } else if (isEndish(topLevelType)) { + startCoords.x = 0; + startCoords.y = 0; + } + EventPropagators.accumulateTwoPhaseDispatches(event); + return event; + } + +}; + +module.exports = TapEventPlugin; + +},{"./TouchEventUtils":183,"react/lib/EventConstants":200,"react/lib/EventPluginUtils":204,"react/lib/EventPropagators":205,"react/lib/SyntheticUIEvent":299,"react/lib/ViewportMetrics":302,"react/lib/keyOf":342}],183:[function(require,module,exports){ +/** + * Copyright 2013-2014 Facebook, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * @providesModule TouchEventUtils + */ + +var TouchEventUtils = { + /** + * Utility function for common case of extracting out the primary touch from a + * touch event. + * - `touchEnd` events usually do not have the `touches` property. + * http://stackoverflow.com/questions/3666929/ + * mobile-sarai-touchend-event-not-firing-when-last-touch-is-removed + * + * @param {Event} nativeEvent Native event that may or may not be a touch. + * @return {TouchesObject?} an object with pageX and pageY or null. + */ + extractSingleTouch: function(nativeEvent) { + var touches = nativeEvent.touches; + var changedTouches = nativeEvent.changedTouches; + var hasTouches = touches && touches.length > 0; + var hasChangedTouches = changedTouches && changedTouches.length > 0; + + return !hasTouches && hasChangedTouches ? changedTouches[0] : + hasTouches ? touches[0] : + nativeEvent; + } +}; + +module.exports = TouchEventUtils; + +},{}],184:[function(require,module,exports){ +module.exports = function injectTapEventPlugin () { + var React = require("react"); + React.initializeTouchEvents(true); + + require('react/lib/EventPluginHub').injection.injectEventPluginsByName({ + "ResponderEventPlugin": require('./ResponderEventPlugin.js'), + "TapEventPlugin": require('./TapEventPlugin.js') + }); +}; + +},{"./ResponderEventPlugin.js":181,"./TapEventPlugin.js":182,"react":357,"react/lib/EventPluginHub":202}],185:[function(require,module,exports){ +module.exports = require('./lib/ReactWithAddons'); + +},{"./lib/ReactWithAddons":285}],186:[function(require,module,exports){ +/** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule AutoFocusMixin + * @typechecks static-only + */ + +'use strict'; + +var focusNode = require("./focusNode"); + +var AutoFocusMixin = { + componentDidMount: function() { + if (this.props.autoFocus) { + focusNode(this.getDOMNode()); + } + } +}; + +module.exports = AutoFocusMixin; + +},{"./focusNode":319}],187:[function(require,module,exports){ +/** + * Copyright 2013-2015 Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule BeforeInputEventPlugin + * @typechecks static-only + */ + +'use strict'; + +var EventConstants = require("./EventConstants"); +var EventPropagators = require("./EventPropagators"); +var ExecutionEnvironment = require("./ExecutionEnvironment"); +var FallbackCompositionState = require("./FallbackCompositionState"); +var SyntheticCompositionEvent = require("./SyntheticCompositionEvent"); +var SyntheticInputEvent = require("./SyntheticInputEvent"); + +var keyOf = require("./keyOf"); + +var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space +var START_KEYCODE = 229; + +var canUseCompositionEvent = ( + ExecutionEnvironment.canUseDOM && + 'CompositionEvent' in window +); + +var documentMode = null; +if (ExecutionEnvironment.canUseDOM && 'documentMode' in document) { + documentMode = document.documentMode; +} + +// Webkit offers a very useful `textInput` event that can be used to +// directly represent `beforeInput`. The IE `textinput` event is not as +// useful, so we don't use it. +var canUseTextInputEvent = ( + ExecutionEnvironment.canUseDOM && + 'TextEvent' in window && + !documentMode && + !isPresto() +); + +// In IE9+, we have access to composition events, but the data supplied +// by the native compositionend event may be incorrect. Japanese ideographic +// spaces, for instance (\u3000) are not recorded correctly. +var useFallbackCompositionData = ( + ExecutionEnvironment.canUseDOM && + ( + (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11) + ) +); + +/** + * Opera <= 12 includes TextEvent in window, but does not fire + * text input events. Rely on keypress instead. + */ +function isPresto() { + var opera = window.opera; + return ( + typeof opera === 'object' && + typeof opera.version === 'function' && + parseInt(opera.version(), 10) <= 12 + ); +} + +var SPACEBAR_CODE = 32; +var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE); + +var topLevelTypes = EventConstants.topLevelTypes; + +// Events and their corresponding property names. +var eventTypes = { + beforeInput: { + phasedRegistrationNames: { + bubbled: keyOf({onBeforeInput: null}), + captured: keyOf({onBeforeInputCapture: null}) + }, + dependencies: [ + topLevelTypes.topCompositionEnd, + topLevelTypes.topKeyPress, + topLevelTypes.topTextInput, + topLevelTypes.topPaste + ] + }, + compositionEnd: { + phasedRegistrationNames: { + bubbled: keyOf({onCompositionEnd: null}), + captured: keyOf({onCompositionEndCapture: null}) + }, + dependencies: [ + topLevelTypes.topBlur, + topLevelTypes.topCompositionEnd, + topLevelTypes.topKeyDown, + topLevelTypes.topKeyPress, + topLevelTypes.topKeyUp, + topLevelTypes.topMouseDown + ] + }, + compositionStart: { + phasedRegistrationNames: { + bubbled: keyOf({onCompositionStart: null}), + captured: keyOf({onCompositionStartCapture: null}) + }, + dependencies: [ + topLevelTypes.topBlur, + topLevelTypes.topCompositionStart, + topLevelTypes.topKeyDown, + topLevelTypes.topKeyPress, + topLevelTypes.topKeyUp, + topLevelTypes.topMouseDown + ] + }, + compositionUpdate: { + phasedRegistrationNames: { + bubbled: keyOf({onCompositionUpdate: null}), + captured: keyOf({onCompositionUpdateCapture: null}) + }, + dependencies: [ + topLevelTypes.topBlur, + topLevelTypes.topCompositionUpdate, + topLevelTypes.topKeyDown, + topLevelTypes.topKeyPress, + topLevelTypes.topKeyUp, + topLevelTypes.topMouseDown + ] + } +}; + +// Track whether we've ever handled a keypress on the space key. +var hasSpaceKeypress = false; + +/** + * Return whether a native keypress event is assumed to be a command. + * This is required because Firefox fires `keypress` events for key commands + * (cut, copy, select-all, etc.) even though no character is inserted. + */ +function isKeypressCommand(nativeEvent) { + return ( + (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) && + // ctrlKey && altKey is equivalent to AltGr, and is not a command. + !(nativeEvent.ctrlKey && nativeEvent.altKey) + ); +} + + +/** + * Translate native top level events into event types. + * + * @param {string} topLevelType + * @return {object} + */ +function getCompositionEventType(topLevelType) { + switch (topLevelType) { + case topLevelTypes.topCompositionStart: + return eventTypes.compositionStart; + case topLevelTypes.topCompositionEnd: + return eventTypes.compositionEnd; + case topLevelTypes.topCompositionUpdate: + return eventTypes.compositionUpdate; + } +} + +/** + * Does our fallback best-guess model think this event signifies that + * composition has begun? + * + * @param {string} topLevelType + * @param {object} nativeEvent + * @return {boolean} + */ +function isFallbackCompositionStart(topLevelType, nativeEvent) { + return ( + topLevelType === topLevelTypes.topKeyDown && + nativeEvent.keyCode === START_KEYCODE + ); +} + +/** + * Does our fallback mode think that this event is the end of composition? + * + * @param {string} topLevelType + * @param {object} nativeEvent + * @return {boolean} + */ +function isFallbackCompositionEnd(topLevelType, nativeEvent) { + switch (topLevelType) { + case topLevelTypes.topKeyUp: + // Command keys insert or clear IME input. + return (END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1); + case topLevelTypes.topKeyDown: + // Expect IME keyCode on each keydown. If we get any other + // code we must have exited earlier. + return (nativeEvent.keyCode !== START_KEYCODE); + case topLevelTypes.topKeyPress: + case topLevelTypes.topMouseDown: + case topLevelTypes.topBlur: + // Events are not possible without cancelling IME. + return true; + default: + return false; + } +} + +/** + * Google Input Tools provides composition data via a CustomEvent, + * with the `data` property populated in the `detail` object. If this + * is available on the event object, use it. If not, this is a plain + * composition event and we have nothing special to extract. + * + * @param {object} nativeEvent + * @return {?string} + */ +function getDataFromCustomEvent(nativeEvent) { + var detail = nativeEvent.detail; + if (typeof detail === 'object' && 'data' in detail) { + return detail.data; + } + return null; +} + +// Track the current IME composition fallback object, if any. +var currentComposition = null; + +/** + * @param {string} topLevelType Record from `EventConstants`. + * @param {DOMEventTarget} topLevelTarget The listening component root node. + * @param {string} topLevelTargetID ID of `topLevelTarget`. + * @param {object} nativeEvent Native browser event. + * @return {?object} A SyntheticCompositionEvent. + */ +function extractCompositionEvent( + topLevelType, + topLevelTarget, + topLevelTargetID, + nativeEvent +) { + var eventType; + var fallbackData; + + if (canUseCompositionEvent) { + eventType = getCompositionEventType(topLevelType); + } else if (!currentComposition) { + if (isFallbackCompositionStart(topLevelType, nativeEvent)) { + eventType = eventTypes.compositionStart; + } + } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) { + eventType = eventTypes.compositionEnd; + } + + if (!eventType) { + return null; + } + + if (useFallbackCompositionData) { + // The current composition is stored statically and must not be + // overwritten while composition continues. + if (!currentComposition && eventType === eventTypes.compositionStart) { + currentComposition = FallbackCompositionState.getPooled(topLevelTarget); + } else if (eventType === eventTypes.compositionEnd) { + if (currentComposition) { + fallbackData = currentComposition.getData(); + } + } + } + + var event = SyntheticCompositionEvent.getPooled( + eventType, + topLevelTargetID, + nativeEvent + ); + + if (fallbackData) { + // Inject data generated from fallback path into the synthetic event. + // This matches the property of native CompositionEventInterface. + event.data = fallbackData; + } else { + var customData = getDataFromCustomEvent(nativeEvent); + if (customData !== null) { + event.data = customData; + } + } + + EventPropagators.accumulateTwoPhaseDispatches(event); + return event; +} + +/** + * @param {string} topLevelType Record from `EventConstants`. + * @param {object} nativeEvent Native browser event. + * @return {?string} The string corresponding to this `beforeInput` event. + */ +function getNativeBeforeInputChars(topLevelType, nativeEvent) { + switch (topLevelType) { + case topLevelTypes.topCompositionEnd: + return getDataFromCustomEvent(nativeEvent); + case topLevelTypes.topKeyPress: + /** + * If native `textInput` events are available, our goal is to make + * use of them. However, there is a special case: the spacebar key. + * In Webkit, preventing default on a spacebar `textInput` event + * cancels character insertion, but it *also* causes the browser + * to fall back to its default spacebar behavior of scrolling the + * page. + * + * Tracking at: + * https://code.google.com/p/chromium/issues/detail?id=355103 + * + * To avoid this issue, use the keypress event as if no `textInput` + * event is available. + */ + var which = nativeEvent.which; + if (which !== SPACEBAR_CODE) { + return null; + } + + hasSpaceKeypress = true; + return SPACEBAR_CHAR; + + case topLevelTypes.topTextInput: + // Record the characters to be added to the DOM. + var chars = nativeEvent.data; + + // If it's a spacebar character, assume that we have already handled + // it at the keypress level and bail immediately. Android Chrome + // doesn't give us keycodes, so we need to blacklist it. + if (chars === SPACEBAR_CHAR && hasSpaceKeypress) { + return null; + } + + return chars; + + default: + // For other native event types, do nothing. + return null; + } +} + +/** + * For browsers that do not provide the `textInput` event, extract the + * appropriate string to use for SyntheticInputEvent. + * + * @param {string} topLevelType Record from `EventConstants`. + * @param {object} nativeEvent Native browser event. + * @return {?string} The fallback string for this `beforeInput` event. + */ +function getFallbackBeforeInputChars(topLevelType, nativeEvent) { + // If we are currently composing (IME) and using a fallback to do so, + // try to extract the composed characters from the fallback object. + if (currentComposition) { + if ( + topLevelType === topLevelTypes.topCompositionEnd || + isFallbackCompositionEnd(topLevelType, nativeEvent) + ) { + var chars = currentComposition.getData(); + FallbackCompositionState.release(currentComposition); + currentComposition = null; + return chars; + } + return null; + } + + switch (topLevelType) { + case topLevelTypes.topPaste: + // If a paste event occurs after a keypress, throw out the input + // chars. Paste events should not lead to BeforeInput events. + return null; + case topLevelTypes.topKeyPress: + /** + * As of v27, Firefox may fire keypress events even when no character + * will be inserted. A few possibilities: + * + * - `which` is `0`. Arrow keys, Esc key, etc. + * + * - `which` is the pressed key code, but no char is available. + * Ex: 'AltGr + d` in Polish. There is no modified character for + * this key combination and no character is inserted into the + * document, but FF fires the keypress for char code `100` anyway. + * No `input` event will occur. + * + * - `which` is the pressed key code, but a command combination is + * being used. Ex: `Cmd+C`. No character is inserted, and no + * `input` event will occur. + */ + if (nativeEvent.which && !isKeypressCommand(nativeEvent)) { + return String.fromCharCode(nativeEvent.which); + } + return null; + case topLevelTypes.topCompositionEnd: + return useFallbackCompositionData ? null : nativeEvent.data; + default: + return null; + } +} + +/** + * Extract a SyntheticInputEvent for `beforeInput`, based on either native + * `textInput` or fallback behavior. + * + * @param {string} topLevelType Record from `EventConstants`. + * @param {DOMEventTarget} topLevelTarget The listening component root node. + * @param {string} topLevelTargetID ID of `topLevelTarget`. + * @param {object} nativeEvent Native browser event. + * @return {?object} A SyntheticInputEvent. + */ +function extractBeforeInputEvent( + topLevelType, + topLevelTarget, + topLevelTargetID, + nativeEvent +) { + var chars; + + if (canUseTextInputEvent) { + chars = getNativeBeforeInputChars(topLevelType, nativeEvent); + } else { + chars = getFallbackBeforeInputChars(topLevelType, nativeEvent); + } + + // If no characters are being inserted, no BeforeInput event should + // be fired. + if (!chars) { + return null; + } + + var event = SyntheticInputEvent.getPooled( + eventTypes.beforeInput, + topLevelTargetID, + nativeEvent + ); + + event.data = chars; + EventPropagators.accumulateTwoPhaseDispatches(event); + return event; +} + +/** + * Create an `onBeforeInput` event to match + * http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents. + * + * This event plugin is based on the native `textInput` event + * available in Chrome, Safari, Opera, and IE. This event fires after + * `onKeyPress` and `onCompositionEnd`, but before `onInput`. + * + * `beforeInput` is spec'd but not implemented in any browsers, and + * the `input` event does not provide any useful information about what has + * actually been added, contrary to the spec. Thus, `textInput` is the best + * available event to identify the characters that have actually been inserted + * into the target node. + * + * This plugin is also responsible for emitting `composition` events, thus + * allowing us to share composition fallback code for both `beforeInput` and + * `composition` event types. + */ +var BeforeInputEventPlugin = { + + eventTypes: eventTypes, + + /** + * @param {string} topLevelType Record from `EventConstants`. + * @param {DOMEventTarget} topLevelTarget The listening component root node. + * @param {string} topLevelTargetID ID of `topLevelTarget`. + * @param {object} nativeEvent Native browser event. + * @return {*} An accumulation of synthetic events. + * @see {EventPluginHub.extractEvents} + */ + extractEvents: function( + topLevelType, + topLevelTarget, + topLevelTargetID, + nativeEvent + ) { + return [ + extractCompositionEvent( + topLevelType, + topLevelTarget, + topLevelTargetID, + nativeEvent + ), + extractBeforeInputEvent( + topLevelType, + topLevelTarget, + topLevelTargetID, + nativeEvent + ) + ]; + } +}; + +module.exports = BeforeInputEventPlugin; + +},{"./EventConstants":200,"./EventPropagators":205,"./ExecutionEnvironment":206,"./FallbackCompositionState":207,"./SyntheticCompositionEvent":291,"./SyntheticInputEvent":295,"./keyOf":342}],188:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule CSSCore + * @typechecks + */ + +var invariant = require("./invariant"); + +/** + * The CSSCore module specifies the API (and implements most of the methods) + * that should be used when dealing with the display of elements (via their + * CSS classes and visibility on screen. It is an API focused on mutating the + * display and not reading it as no logical state should be encoded in the + * display of elements. + */ + +var CSSCore = { + + /** + * Adds the class passed in to the element if it doesn't already have it. + * + * @param {DOMElement} element the element to set the class on + * @param {string} className the CSS className + * @return {DOMElement} the element passed in + */ + addClass: function(element, className) { + ("production" !== process.env.NODE_ENV ? invariant( + !/\s/.test(className), + 'CSSCore.addClass takes only a single class name. "%s" contains ' + + 'multiple classes.', className + ) : invariant(!/\s/.test(className))); + + if (className) { + if (element.classList) { + element.classList.add(className); + } else if (!CSSCore.hasClass(element, className)) { + element.className = element.className + ' ' + className; + } + } + return element; + }, + + /** + * Removes the class passed in from the element + * + * @param {DOMElement} element the element to set the class on + * @param {string} className the CSS className + * @return {DOMElement} the element passed in + */ + removeClass: function(element, className) { + ("production" !== process.env.NODE_ENV ? invariant( + !/\s/.test(className), + 'CSSCore.removeClass takes only a single class name. "%s" contains ' + + 'multiple classes.', className + ) : invariant(!/\s/.test(className))); + + if (className) { + if (element.classList) { + element.classList.remove(className); + } else if (CSSCore.hasClass(element, className)) { + element.className = element.className + .replace(new RegExp('(^|\\s)' + className + '(?:\\s|$)', 'g'), '$1') + .replace(/\s+/g, ' ') // multiple spaces to one + .replace(/^\s*|\s*$/g, ''); // trim the ends + } + } + return element; + }, + + /** + * Helper to add or remove a class from an element based on a condition. + * + * @param {DOMElement} element the element to set the class on + * @param {string} className the CSS className + * @param {*} bool condition to whether to add or remove the class + * @return {DOMElement} the element passed in + */ + conditionClass: function(element, className, bool) { + return (bool ? CSSCore.addClass : CSSCore.removeClass)(element, className); + }, + + /** + * Tests whether the element has the class specified. + * + * @param {DOMNode|DOMWindow} element the element to set the class on + * @param {string} className the CSS className + * @return {boolean} true if the element has the class, false if not + */ + hasClass: function(element, className) { + ("production" !== process.env.NODE_ENV ? invariant( + !/\s/.test(className), + 'CSS.hasClass takes only a single class name.' + ) : invariant(!/\s/.test(className))); + if (element.classList) { + return !!className && element.classList.contains(className); + } + return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1; + } + +}; + +module.exports = CSSCore; + +}).call(this,require('_process')) + +},{"./invariant":335,"_process":7}],189:[function(require,module,exports){ +/** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule CSSProperty + */ + +'use strict'; + +/** + * CSS properties which accept numbers but are not in units of "px". + */ +var isUnitlessNumber = { + boxFlex: true, + boxFlexGroup: true, + columnCount: true, + flex: true, + flexGrow: true, + flexPositive: true, + flexShrink: true, + flexNegative: true, + fontWeight: true, + lineClamp: true, + lineHeight: true, + opacity: true, + order: true, + orphans: true, + widows: true, + zIndex: true, + zoom: true, + + // SVG-related properties + fillOpacity: true, + strokeDashoffset: true, + strokeOpacity: true, + strokeWidth: true +}; + +/** + * @param {string} prefix vendor-specific prefix, eg: Webkit + * @param {string} key style name, eg: transitionDuration + * @return {string} style name prefixed with `prefix`, properly camelCased, eg: + * WebkitTransitionDuration + */ +function prefixKey(prefix, key) { + return prefix + key.charAt(0).toUpperCase() + key.substring(1); +} + +/** + * Support style names that may come passed in prefixed by adding permutations + * of vendor prefixes. + */ +var prefixes = ['Webkit', 'ms', 'Moz', 'O']; + +// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an +// infinite loop, because it iterates over the newly added props too. +Object.keys(isUnitlessNumber).forEach(function(prop) { + prefixes.forEach(function(prefix) { + isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop]; + }); +}); + +/** + * Most style properties can be unset by doing .style[prop] = '' but IE8 + * doesn't like doing that with shorthand properties so for the properties that + * IE8 breaks on, which are listed here, we instead unset each of the + * individual properties. See http://bugs.jquery.com/ticket/12385. + * The 4-value 'clock' properties like margin, padding, border-width seem to + * behave without any problems. Curiously, list-style works too without any + * special prodding. + */ +var shorthandPropertyExpansions = { + background: { + backgroundImage: true, + backgroundPosition: true, + backgroundRepeat: true, + backgroundColor: true + }, + border: { + borderWidth: true, + borderStyle: true, + borderColor: true + }, + borderBottom: { + borderBottomWidth: true, + borderBottomStyle: true, + borderBottomColor: true + }, + borderLeft: { + borderLeftWidth: true, + borderLeftStyle: true, + borderLeftColor: true + }, + borderRight: { + borderRightWidth: true, + borderRightStyle: true, + borderRightColor: true + }, + borderTop: { + borderTopWidth: true, + borderTopStyle: true, + borderTopColor: true + }, + font: { + fontStyle: true, + fontVariant: true, + fontWeight: true, + fontSize: true, + lineHeight: true, + fontFamily: true + } +}; + +var CSSProperty = { + isUnitlessNumber: isUnitlessNumber, + shorthandPropertyExpansions: shorthandPropertyExpansions +}; + +module.exports = CSSProperty; + +},{}],190:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule CSSPropertyOperations + * @typechecks static-only + */ + +'use strict'; + +var CSSProperty = require("./CSSProperty"); +var ExecutionEnvironment = require("./ExecutionEnvironment"); + +var camelizeStyleName = require("./camelizeStyleName"); +var dangerousStyleValue = require("./dangerousStyleValue"); +var hyphenateStyleName = require("./hyphenateStyleName"); +var memoizeStringOnly = require("./memoizeStringOnly"); +var warning = require("./warning"); + +var processStyleName = memoizeStringOnly(function(styleName) { + return hyphenateStyleName(styleName); +}); + +var styleFloatAccessor = 'cssFloat'; +if (ExecutionEnvironment.canUseDOM) { + // IE8 only supports accessing cssFloat (standard) as styleFloat + if (document.documentElement.style.cssFloat === undefined) { + styleFloatAccessor = 'styleFloat'; + } +} + +if ("production" !== process.env.NODE_ENV) { + // 'msTransform' is correct, but the other prefixes should be capitalized + var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/; + + // style values shouldn't contain a semicolon + var badStyleValueWithSemicolonPattern = /;\s*$/; + + var warnedStyleNames = {}; + var warnedStyleValues = {}; + + var warnHyphenatedStyleName = function(name) { + if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) { + return; + } + + warnedStyleNames[name] = true; + ("production" !== process.env.NODE_ENV ? warning( + false, + 'Unsupported style property %s. Did you mean %s?', + name, + camelizeStyleName(name) + ) : null); + }; + + var warnBadVendoredStyleName = function(name) { + if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) { + return; + } + + warnedStyleNames[name] = true; + ("production" !== process.env.NODE_ENV ? warning( + false, + 'Unsupported vendor-prefixed style property %s. Did you mean %s?', + name, + name.charAt(0).toUpperCase() + name.slice(1) + ) : null); + }; + + var warnStyleValueWithSemicolon = function(name, value) { + if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) { + return; + } + + warnedStyleValues[value] = true; + ("production" !== process.env.NODE_ENV ? warning( + false, + 'Style property values shouldn\'t contain a semicolon. ' + + 'Try "%s: %s" instead.', + name, + value.replace(badStyleValueWithSemicolonPattern, '') + ) : null); + }; + + /** + * @param {string} name + * @param {*} value + */ + var warnValidStyle = function(name, value) { + if (name.indexOf('-') > -1) { + warnHyphenatedStyleName(name); + } else if (badVendoredStyleNamePattern.test(name)) { + warnBadVendoredStyleName(name); + } else if (badStyleValueWithSemicolonPattern.test(value)) { + warnStyleValueWithSemicolon(name, value); + } + }; +} + +/** + * Operations for dealing with CSS properties. + */ +var CSSPropertyOperations = { + + /** + * Serializes a mapping of style properties for use as inline styles: + * + * > createMarkupForStyles({width: '200px', height: 0}) + * "width:200px;height:0;" + * + * Undefined values are ignored so that declarative programming is easier. + * The result should be HTML-escaped before insertion into the DOM. + * + * @param {object} styles + * @return {?string} + */ + createMarkupForStyles: function(styles) { + var serialized = ''; + for (var styleName in styles) { + if (!styles.hasOwnProperty(styleName)) { + continue; + } + var styleValue = styles[styleName]; + if ("production" !== process.env.NODE_ENV) { + warnValidStyle(styleName, styleValue); + } + if (styleValue != null) { + serialized += processStyleName(styleName) + ':'; + serialized += dangerousStyleValue(styleName, styleValue) + ';'; + } + } + return serialized || null; + }, + + /** + * Sets the value for multiple styles on a node. If a value is specified as + * '' (empty string), the corresponding style property will be unset. + * + * @param {DOMElement} node + * @param {object} styles + */ + setValueForStyles: function(node, styles) { + var style = node.style; + for (var styleName in styles) { + if (!styles.hasOwnProperty(styleName)) { + continue; + } + if ("production" !== process.env.NODE_ENV) { + warnValidStyle(styleName, styles[styleName]); + } + var styleValue = dangerousStyleValue(styleName, styles[styleName]); + if (styleName === 'float') { + styleName = styleFloatAccessor; + } + if (styleValue) { + style[styleName] = styleValue; + } else { + var expansion = CSSProperty.shorthandPropertyExpansions[styleName]; + if (expansion) { + // Shorthand property that IE8 won't like unsetting, so unset each + // component to placate it + for (var individualStyleName in expansion) { + style[individualStyleName] = ''; + } + } else { + style[styleName] = ''; + } + } + } + } + +}; + +module.exports = CSSPropertyOperations; + +}).call(this,require('_process')) + +},{"./CSSProperty":189,"./ExecutionEnvironment":206,"./camelizeStyleName":306,"./dangerousStyleValue":313,"./hyphenateStyleName":333,"./memoizeStringOnly":344,"./warning":356,"_process":7}],191:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule CallbackQueue + */ + +'use strict'; + +var PooledClass = require("./PooledClass"); + +var assign = require("./Object.assign"); +var invariant = require("./invariant"); + +/** + * A specialized pseudo-event module to help keep track of components waiting to + * be notified when their DOM representations are available for use. + * + * This implements `PooledClass`, so you should never need to instantiate this. + * Instead, use `CallbackQueue.getPooled()`. + * + * @class ReactMountReady + * @implements PooledClass + * @internal + */ +function CallbackQueue() { + this._callbacks = null; + this._contexts = null; +} + +assign(CallbackQueue.prototype, { + + /** + * Enqueues a callback to be invoked when `notifyAll` is invoked. + * + * @param {function} callback Invoked when `notifyAll` is invoked. + * @param {?object} context Context to call `callback` with. + * @internal + */ + enqueue: function(callback, context) { + this._callbacks = this._callbacks || []; + this._contexts = this._contexts || []; + this._callbacks.push(callback); + this._contexts.push(context); + }, + + /** + * Invokes all enqueued callbacks and clears the queue. This is invoked after + * the DOM representation of a component has been created or updated. + * + * @internal + */ + notifyAll: function() { + var callbacks = this._callbacks; + var contexts = this._contexts; + if (callbacks) { + ("production" !== process.env.NODE_ENV ? invariant( + callbacks.length === contexts.length, + 'Mismatched list of contexts in callback queue' + ) : invariant(callbacks.length === contexts.length)); + this._callbacks = null; + this._contexts = null; + for (var i = 0, l = callbacks.length; i < l; i++) { + callbacks[i].call(contexts[i]); + } + callbacks.length = 0; + contexts.length = 0; + } + }, + + /** + * Resets the internal queue. + * + * @internal + */ + reset: function() { + this._callbacks = null; + this._contexts = null; + }, + + /** + * `PooledClass` looks for this. + */ + destructor: function() { + this.reset(); + } + +}); + +PooledClass.addPoolingTo(CallbackQueue); + +module.exports = CallbackQueue; + +}).call(this,require('_process')) + +},{"./Object.assign":213,"./PooledClass":214,"./invariant":335,"_process":7}],192:[function(require,module,exports){ +/** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule ChangeEventPlugin + */ + +'use strict'; + +var EventConstants = require("./EventConstants"); +var EventPluginHub = require("./EventPluginHub"); +var EventPropagators = require("./EventPropagators"); +var ExecutionEnvironment = require("./ExecutionEnvironment"); +var ReactUpdates = require("./ReactUpdates"); +var SyntheticEvent = require("./SyntheticEvent"); + +var isEventSupported = require("./isEventSupported"); +var isTextInputElement = require("./isTextInputElement"); +var keyOf = require("./keyOf"); + +var topLevelTypes = EventConstants.topLevelTypes; + +var eventTypes = { + change: { + phasedRegistrationNames: { + bubbled: keyOf({onChange: null}), + captured: keyOf({onChangeCapture: null}) + }, + dependencies: [ + topLevelTypes.topBlur, + topLevelTypes.topChange, + topLevelTypes.topClick, + topLevelTypes.topFocus, + topLevelTypes.topInput, + topLevelTypes.topKeyDown, + topLevelTypes.topKeyUp, + topLevelTypes.topSelectionChange + ] + } +}; + +/** + * For IE shims + */ +var activeElement = null; +var activeElementID = null; +var activeElementValue = null; +var activeElementValueProp = null; + +/** + * SECTION: handle `change` event + */ +function shouldUseChangeEvent(elem) { + return ( + elem.nodeName === 'SELECT' || + (elem.nodeName === 'INPUT' && elem.type === 'file') + ); +} + +var doesChangeEventBubble = false; +if (ExecutionEnvironment.canUseDOM) { + // See `handleChange` comment below + doesChangeEventBubble = isEventSupported('change') && ( + (!('documentMode' in document) || document.documentMode > 8) + ); +} + +function manualDispatchChangeEvent(nativeEvent) { + var event = SyntheticEvent.getPooled( + eventTypes.change, + activeElementID, + nativeEvent + ); + EventPropagators.accumulateTwoPhaseDispatches(event); + + // If change and propertychange bubbled, we'd just bind to it like all the + // other events and have it go through ReactBrowserEventEmitter. Since it + // doesn't, we manually listen for the events and so we have to enqueue and + // process the abstract event manually. + // + // Batching is necessary here in order to ensure that all event handlers run + // before the next rerender (including event handlers attached to ancestor + // elements instead of directly on the input). Without this, controlled + // components don't work properly in conjunction with event bubbling because + // the component is rerendered and the value reverted before all the event + // handlers can run. See https://github.com/facebook/react/issues/708. + ReactUpdates.batchedUpdates(runEventInBatch, event); +} + +function runEventInBatch(event) { + EventPluginHub.enqueueEvents(event); + EventPluginHub.processEventQueue(); +} + +function startWatchingForChangeEventIE8(target, targetID) { + activeElement = target; + activeElementID = targetID; + activeElement.attachEvent('onchange', manualDispatchChangeEvent); +} + +function stopWatchingForChangeEventIE8() { + if (!activeElement) { + return; + } + activeElement.detachEvent('onchange', manualDispatchChangeEvent); + activeElement = null; + activeElementID = null; +} + +function getTargetIDForChangeEvent( + topLevelType, + topLevelTarget, + topLevelTargetID) { + if (topLevelType === topLevelTypes.topChange) { + return topLevelTargetID; + } +} +function handleEventsForChangeEventIE8( + topLevelType, + topLevelTarget, + topLevelTargetID) { + if (topLevelType === topLevelTypes.topFocus) { + // stopWatching() should be a noop here but we call it just in case we + // missed a blur event somehow. + stopWatchingForChangeEventIE8(); + startWatchingForChangeEventIE8(topLevelTarget, topLevelTargetID); + } else if (topLevelType === topLevelTypes.topBlur) { + stopWatchingForChangeEventIE8(); + } +} + + +/** + * SECTION: handle `input` event + */ +var isInputEventSupported = false; +if (ExecutionEnvironment.canUseDOM) { + // IE9 claims to support the input event but fails to trigger it when + // deleting text, so we ignore its input events + isInputEventSupported = isEventSupported('input') && ( + (!('documentMode' in document) || document.documentMode > 9) + ); +} + +/** + * (For old IE.) Replacement getter/setter for the `value` property that gets + * set on the active element. + */ +var newValueProp = { + get: function() { + return activeElementValueProp.get.call(this); + }, + set: function(val) { + // Cast to a string so we can do equality checks. + activeElementValue = '' + val; + activeElementValueProp.set.call(this, val); + } +}; + +/** + * (For old IE.) Starts tracking propertychange events on the passed-in element + * and override the value property so that we can distinguish user events from + * value changes in JS. + */ +function startWatchingForValueChange(target, targetID) { + activeElement = target; + activeElementID = targetID; + activeElementValue = target.value; + activeElementValueProp = Object.getOwnPropertyDescriptor( + target.constructor.prototype, + 'value' + ); + + Object.defineProperty(activeElement, 'value', newValueProp); + activeElement.attachEvent('onpropertychange', handlePropertyChange); +} + +/** + * (For old IE.) Removes the event listeners from the currently-tracked element, + * if any exists. + */ +function stopWatchingForValueChange() { + if (!activeElement) { + return; + } + + // delete restores the original property definition + delete activeElement.value; + activeElement.detachEvent('onpropertychange', handlePropertyChange); + + activeElement = null; + activeElementID = null; + activeElementValue = null; + activeElementValueProp = null; +} + +/** + * (For old IE.) Handles a propertychange event, sending a `change` event if + * the value of the active element has changed. + */ +function handlePropertyChange(nativeEvent) { + if (nativeEvent.propertyName !== 'value') { + return; + } + var value = nativeEvent.srcElement.value; + if (value === activeElementValue) { + return; + } + activeElementValue = value; + + manualDispatchChangeEvent(nativeEvent); +} + +/** + * If a `change` event should be fired, returns the target's ID. + */ +function getTargetIDForInputEvent( + topLevelType, + topLevelTarget, + topLevelTargetID) { + if (topLevelType === topLevelTypes.topInput) { + // In modern browsers (i.e., not IE8 or IE9), the input event is exactly + // what we want so fall through here and trigger an abstract event + return topLevelTargetID; + } +} + +// For IE8 and IE9. +function handleEventsForInputEventIE( + topLevelType, + topLevelTarget, + topLevelTargetID) { + if (topLevelType === topLevelTypes.topFocus) { + // In IE8, we can capture almost all .value changes by adding a + // propertychange handler and looking for events with propertyName + // equal to 'value' + // In IE9, propertychange fires for most input events but is buggy and + // doesn't fire when text is deleted, but conveniently, selectionchange + // appears to fire in all of the remaining cases so we catch those and + // forward the event if the value has changed + // In either case, we don't want to call the event handler if the value + // is changed from JS so we redefine a setter for `.value` that updates + // our activeElementValue variable, allowing us to ignore those changes + // + // stopWatching() should be a noop here but we call it just in case we + // missed a blur event somehow. + stopWatchingForValueChange(); + startWatchingForValueChange(topLevelTarget, topLevelTargetID); + } else if (topLevelType === topLevelTypes.topBlur) { + stopWatchingForValueChange(); + } +} + +// For IE8 and IE9. +function getTargetIDForInputEventIE( + topLevelType, + topLevelTarget, + topLevelTargetID) { + if (topLevelType === topLevelTypes.topSelectionChange || + topLevelType === topLevelTypes.topKeyUp || + topLevelType === topLevelTypes.topKeyDown) { + // On the selectionchange event, the target is just document which isn't + // helpful for us so just check activeElement instead. + // + // 99% of the time, keydown and keyup aren't necessary. IE8 fails to fire + // propertychange on the first input event after setting `value` from a + // script and fires only keydown, keypress, keyup. Catching keyup usually + // gets it and catching keydown lets us fire an event for the first + // keystroke if user does a key repeat (it'll be a little delayed: right + // before the second keystroke). Other input methods (e.g., paste) seem to + // fire selectionchange normally. + if (activeElement && activeElement.value !== activeElementValue) { + activeElementValue = activeElement.value; + return activeElementID; + } + } +} + + +/** + * SECTION: handle `click` event + */ +function shouldUseClickEvent(elem) { + // Use the `click` event to detect changes to checkbox and radio inputs. + // This approach works across all browsers, whereas `change` does not fire + // until `blur` in IE8. + return ( + elem.nodeName === 'INPUT' && + (elem.type === 'checkbox' || elem.type === 'radio') + ); +} + +function getTargetIDForClickEvent( + topLevelType, + topLevelTarget, + topLevelTargetID) { + if (topLevelType === topLevelTypes.topClick) { + return topLevelTargetID; + } +} + +/** + * This plugin creates an `onChange` event that normalizes change events + * across form elements. This event fires at a time when it's possible to + * change the element's value without seeing a flicker. + * + * Supported elements are: + * - input (see `isTextInputElement`) + * - textarea + * - select + */ +var ChangeEventPlugin = { + + eventTypes: eventTypes, + + /** + * @param {string} topLevelType Record from `EventConstants`. + * @param {DOMEventTarget} topLevelTarget The listening component root node. + * @param {string} topLevelTargetID ID of `topLevelTarget`. + * @param {object} nativeEvent Native browser event. + * @return {*} An accumulation of synthetic events. + * @see {EventPluginHub.extractEvents} + */ + extractEvents: function( + topLevelType, + topLevelTarget, + topLevelTargetID, + nativeEvent) { + + var getTargetIDFunc, handleEventFunc; + if (shouldUseChangeEvent(topLevelTarget)) { + if (doesChangeEventBubble) { + getTargetIDFunc = getTargetIDForChangeEvent; + } else { + handleEventFunc = handleEventsForChangeEventIE8; + } + } else if (isTextInputElement(topLevelTarget)) { + if (isInputEventSupported) { + getTargetIDFunc = getTargetIDForInputEvent; + } else { + getTargetIDFunc = getTargetIDForInputEventIE; + handleEventFunc = handleEventsForInputEventIE; + } + } else if (shouldUseClickEvent(topLevelTarget)) { + getTargetIDFunc = getTargetIDForClickEvent; + } + + if (getTargetIDFunc) { + var targetID = getTargetIDFunc( + topLevelType, + topLevelTarget, + topLevelTargetID + ); + if (targetID) { + var event = SyntheticEvent.getPooled( + eventTypes.change, + targetID, + nativeEvent + ); + EventPropagators.accumulateTwoPhaseDispatches(event); + return event; + } + } + + if (handleEventFunc) { + handleEventFunc( + topLevelType, + topLevelTarget, + topLevelTargetID + ); + } + } + +}; + +module.exports = ChangeEventPlugin; + +},{"./EventConstants":200,"./EventPluginHub":202,"./EventPropagators":205,"./ExecutionEnvironment":206,"./ReactUpdates":284,"./SyntheticEvent":293,"./isEventSupported":336,"./isTextInputElement":338,"./keyOf":342}],193:[function(require,module,exports){ +/** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule ClientReactRootIndex + * @typechecks + */ + +'use strict'; + +var nextReactRootIndex = 0; + +var ClientReactRootIndex = { + createReactRootIndex: function() { + return nextReactRootIndex++; + } +}; + +module.exports = ClientReactRootIndex; + +},{}],194:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule DOMChildrenOperations + * @typechecks static-only + */ + +'use strict'; + +var Danger = require("./Danger"); +var ReactMultiChildUpdateTypes = require("./ReactMultiChildUpdateTypes"); + +var setTextContent = require("./setTextContent"); +var invariant = require("./invariant"); + +/** + * Inserts `childNode` as a child of `parentNode` at the `index`. + * + * @param {DOMElement} parentNode Parent node in which to insert. + * @param {DOMElement} childNode Child node to insert. + * @param {number} index Index at which to insert the child. + * @internal + */ +function insertChildAt(parentNode, childNode, index) { + // By exploiting arrays returning `undefined` for an undefined index, we can + // rely exclusively on `insertBefore(node, null)` instead of also using + // `appendChild(node)`. However, using `undefined` is not allowed by all + // browsers so we must replace it with `null`. + parentNode.insertBefore( + childNode, + parentNode.childNodes[index] || null + ); +} + +/** + * Operations for updating with DOM children. + */ +var DOMChildrenOperations = { + + dangerouslyReplaceNodeWithMarkup: Danger.dangerouslyReplaceNodeWithMarkup, + + updateTextContent: setTextContent, + + /** + * Updates a component's children by processing a series of updates. The + * update configurations are each expected to have a `parentNode` property. + * + * @param {array} updates List of update configurations. + * @param {array} markupList List of markup strings. + * @internal + */ + processUpdates: function(updates, markupList) { + var update; + // Mapping from parent IDs to initial child orderings. + var initialChildren = null; + // List of children that will be moved or removed. + var updatedChildren = null; + + for (var i = 0; i < updates.length; i++) { + update = updates[i]; + if (update.type === ReactMultiChildUpdateTypes.MOVE_EXISTING || + update.type === ReactMultiChildUpdateTypes.REMOVE_NODE) { + var updatedIndex = update.fromIndex; + var updatedChild = update.parentNode.childNodes[updatedIndex]; + var parentID = update.parentID; + + ("production" !== process.env.NODE_ENV ? invariant( + updatedChild, + 'processUpdates(): Unable to find child %s of element. This ' + + 'probably means the DOM was unexpectedly mutated (e.g., by the ' + + 'browser), usually due to forgetting a when using tables, ' + + 'nesting tags like
,

, or , or using non-SVG elements ' + + 'in an parent. Try inspecting the child nodes of the element ' + + 'with React ID `%s`.', + updatedIndex, + parentID + ) : invariant(updatedChild)); + + initialChildren = initialChildren || {}; + initialChildren[parentID] = initialChildren[parentID] || []; + initialChildren[parentID][updatedIndex] = updatedChild; + + updatedChildren = updatedChildren || []; + updatedChildren.push(updatedChild); + } + } + + var renderedMarkup = Danger.dangerouslyRenderMarkup(markupList); + + // Remove updated children first so that `toIndex` is consistent. + if (updatedChildren) { + for (var j = 0; j < updatedChildren.length; j++) { + updatedChildren[j].parentNode.removeChild(updatedChildren[j]); + } + } + + for (var k = 0; k < updates.length; k++) { + update = updates[k]; + switch (update.type) { + case ReactMultiChildUpdateTypes.INSERT_MARKUP: + insertChildAt( + update.parentNode, + renderedMarkup[update.markupIndex], + update.toIndex + ); + break; + case ReactMultiChildUpdateTypes.MOVE_EXISTING: + insertChildAt( + update.parentNode, + initialChildren[update.parentID][update.fromIndex], + update.toIndex + ); + break; + case ReactMultiChildUpdateTypes.TEXT_CONTENT: + setTextContent( + update.parentNode, + update.textContent + ); + break; + case ReactMultiChildUpdateTypes.REMOVE_NODE: + // Already removed by the for-loop above. + break; + } + } + } + +}; + +module.exports = DOMChildrenOperations; + +}).call(this,require('_process')) + +},{"./Danger":197,"./ReactMultiChildUpdateTypes":263,"./invariant":335,"./setTextContent":350,"_process":7}],195:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule DOMProperty + * @typechecks static-only + */ + +/*jslint bitwise: true */ + +'use strict'; + +var invariant = require("./invariant"); + +function checkMask(value, bitmask) { + return (value & bitmask) === bitmask; +} + +var DOMPropertyInjection = { + /** + * Mapping from normalized, camelcased property names to a configuration that + * specifies how the associated DOM property should be accessed or rendered. + */ + MUST_USE_ATTRIBUTE: 0x1, + MUST_USE_PROPERTY: 0x2, + HAS_SIDE_EFFECTS: 0x4, + HAS_BOOLEAN_VALUE: 0x8, + HAS_NUMERIC_VALUE: 0x10, + HAS_POSITIVE_NUMERIC_VALUE: 0x20 | 0x10, + HAS_OVERLOADED_BOOLEAN_VALUE: 0x40, + + /** + * Inject some specialized knowledge about the DOM. This takes a config object + * with the following properties: + * + * isCustomAttribute: function that given an attribute name will return true + * if it can be inserted into the DOM verbatim. Useful for data-* or aria-* + * attributes where it's impossible to enumerate all of the possible + * attribute names, + * + * Properties: object mapping DOM property name to one of the + * DOMPropertyInjection constants or null. If your attribute isn't in here, + * it won't get written to the DOM. + * + * DOMAttributeNames: object mapping React attribute name to the DOM + * attribute name. Attribute names not specified use the **lowercase** + * normalized name. + * + * DOMPropertyNames: similar to DOMAttributeNames but for DOM properties. + * Property names not specified use the normalized name. + * + * DOMMutationMethods: Properties that require special mutation methods. If + * `value` is undefined, the mutation method should unset the property. + * + * @param {object} domPropertyConfig the config as described above. + */ + injectDOMPropertyConfig: function(domPropertyConfig) { + var Properties = domPropertyConfig.Properties || {}; + var DOMAttributeNames = domPropertyConfig.DOMAttributeNames || {}; + var DOMPropertyNames = domPropertyConfig.DOMPropertyNames || {}; + var DOMMutationMethods = domPropertyConfig.DOMMutationMethods || {}; + + if (domPropertyConfig.isCustomAttribute) { + DOMProperty._isCustomAttributeFunctions.push( + domPropertyConfig.isCustomAttribute + ); + } + + for (var propName in Properties) { + ("production" !== process.env.NODE_ENV ? invariant( + !DOMProperty.isStandardName.hasOwnProperty(propName), + 'injectDOMPropertyConfig(...): You\'re trying to inject DOM property ' + + '\'%s\' which has already been injected. You may be accidentally ' + + 'injecting the same DOM property config twice, or you may be ' + + 'injecting two configs that have conflicting property names.', + propName + ) : invariant(!DOMProperty.isStandardName.hasOwnProperty(propName))); + + DOMProperty.isStandardName[propName] = true; + + var lowerCased = propName.toLowerCase(); + DOMProperty.getPossibleStandardName[lowerCased] = propName; + + if (DOMAttributeNames.hasOwnProperty(propName)) { + var attributeName = DOMAttributeNames[propName]; + DOMProperty.getPossibleStandardName[attributeName] = propName; + DOMProperty.getAttributeName[propName] = attributeName; + } else { + DOMProperty.getAttributeName[propName] = lowerCased; + } + + DOMProperty.getPropertyName[propName] = + DOMPropertyNames.hasOwnProperty(propName) ? + DOMPropertyNames[propName] : + propName; + + if (DOMMutationMethods.hasOwnProperty(propName)) { + DOMProperty.getMutationMethod[propName] = DOMMutationMethods[propName]; + } else { + DOMProperty.getMutationMethod[propName] = null; + } + + var propConfig = Properties[propName]; + DOMProperty.mustUseAttribute[propName] = + checkMask(propConfig, DOMPropertyInjection.MUST_USE_ATTRIBUTE); + DOMProperty.mustUseProperty[propName] = + checkMask(propConfig, DOMPropertyInjection.MUST_USE_PROPERTY); + DOMProperty.hasSideEffects[propName] = + checkMask(propConfig, DOMPropertyInjection.HAS_SIDE_EFFECTS); + DOMProperty.hasBooleanValue[propName] = + checkMask(propConfig, DOMPropertyInjection.HAS_BOOLEAN_VALUE); + DOMProperty.hasNumericValue[propName] = + checkMask(propConfig, DOMPropertyInjection.HAS_NUMERIC_VALUE); + DOMProperty.hasPositiveNumericValue[propName] = + checkMask(propConfig, DOMPropertyInjection.HAS_POSITIVE_NUMERIC_VALUE); + DOMProperty.hasOverloadedBooleanValue[propName] = + checkMask(propConfig, DOMPropertyInjection.HAS_OVERLOADED_BOOLEAN_VALUE); + + ("production" !== process.env.NODE_ENV ? invariant( + !DOMProperty.mustUseAttribute[propName] || + !DOMProperty.mustUseProperty[propName], + 'DOMProperty: Cannot require using both attribute and property: %s', + propName + ) : invariant(!DOMProperty.mustUseAttribute[propName] || + !DOMProperty.mustUseProperty[propName])); + ("production" !== process.env.NODE_ENV ? invariant( + DOMProperty.mustUseProperty[propName] || + !DOMProperty.hasSideEffects[propName], + 'DOMProperty: Properties that have side effects must use property: %s', + propName + ) : invariant(DOMProperty.mustUseProperty[propName] || + !DOMProperty.hasSideEffects[propName])); + ("production" !== process.env.NODE_ENV ? invariant( + !!DOMProperty.hasBooleanValue[propName] + + !!DOMProperty.hasNumericValue[propName] + + !!DOMProperty.hasOverloadedBooleanValue[propName] <= 1, + 'DOMProperty: Value can be one of boolean, overloaded boolean, or ' + + 'numeric value, but not a combination: %s', + propName + ) : invariant(!!DOMProperty.hasBooleanValue[propName] + + !!DOMProperty.hasNumericValue[propName] + + !!DOMProperty.hasOverloadedBooleanValue[propName] <= 1)); + } + } +}; +var defaultValueCache = {}; + +/** + * DOMProperty exports lookup objects that can be used like functions: + * + * > DOMProperty.isValid['id'] + * true + * > DOMProperty.isValid['foobar'] + * undefined + * + * Although this may be confusing, it performs better in general. + * + * @see http://jsperf.com/key-exists + * @see http://jsperf.com/key-missing + */ +var DOMProperty = { + + ID_ATTRIBUTE_NAME: 'data-reactid', + + /** + * Checks whether a property name is a standard property. + * @type {Object} + */ + isStandardName: {}, + + /** + * Mapping from lowercase property names to the properly cased version, used + * to warn in the case of missing properties. + * @type {Object} + */ + getPossibleStandardName: {}, + + /** + * Mapping from normalized names to attribute names that differ. Attribute + * names are used when rendering markup or with `*Attribute()`. + * @type {Object} + */ + getAttributeName: {}, + + /** + * Mapping from normalized names to properties on DOM node instances. + * (This includes properties that mutate due to external factors.) + * @type {Object} + */ + getPropertyName: {}, + + /** + * Mapping from normalized names to mutation methods. This will only exist if + * mutation cannot be set simply by the property or `setAttribute()`. + * @type {Object} + */ + getMutationMethod: {}, + + /** + * Whether the property must be accessed and mutated as an object property. + * @type {Object} + */ + mustUseAttribute: {}, + + /** + * Whether the property must be accessed and mutated using `*Attribute()`. + * (This includes anything that fails ` in `.) + * @type {Object} + */ + mustUseProperty: {}, + + /** + * Whether or not setting a value causes side effects such as triggering + * resources to be loaded or text selection changes. We must ensure that + * the value is only set if it has changed. + * @type {Object} + */ + hasSideEffects: {}, + + /** + * Whether the property should be removed when set to a falsey value. + * @type {Object} + */ + hasBooleanValue: {}, + + /** + * Whether the property must be numeric or parse as a + * numeric and should be removed when set to a falsey value. + * @type {Object} + */ + hasNumericValue: {}, + + /** + * Whether the property must be positive numeric or parse as a positive + * numeric and should be removed when set to a falsey value. + * @type {Object} + */ + hasPositiveNumericValue: {}, + + /** + * Whether the property can be used as a flag as well as with a value. Removed + * when strictly equal to false; present without a value when strictly equal + * to true; present with a value otherwise. + * @type {Object} + */ + hasOverloadedBooleanValue: {}, + + /** + * All of the isCustomAttribute() functions that have been injected. + */ + _isCustomAttributeFunctions: [], + + /** + * Checks whether a property name is a custom attribute. + * @method + */ + isCustomAttribute: function(attributeName) { + for (var i = 0; i < DOMProperty._isCustomAttributeFunctions.length; i++) { + var isCustomAttributeFn = DOMProperty._isCustomAttributeFunctions[i]; + if (isCustomAttributeFn(attributeName)) { + return true; + } + } + return false; + }, + + /** + * Returns the default property value for a DOM property (i.e., not an + * attribute). Most default values are '' or false, but not all. Worse yet, + * some (in particular, `type`) vary depending on the type of element. + * + * TODO: Is it better to grab all the possible properties when creating an + * element to avoid having to create the same element twice? + */ + getDefaultValueForProperty: function(nodeName, prop) { + var nodeDefaults = defaultValueCache[nodeName]; + var testElement; + if (!nodeDefaults) { + defaultValueCache[nodeName] = nodeDefaults = {}; + } + if (!(prop in nodeDefaults)) { + testElement = document.createElement(nodeName); + nodeDefaults[prop] = testElement[prop]; + } + return nodeDefaults[prop]; + }, + + injection: DOMPropertyInjection +}; + +module.exports = DOMProperty; + +}).call(this,require('_process')) + +},{"./invariant":335,"_process":7}],196:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule DOMPropertyOperations + * @typechecks static-only + */ + +'use strict'; + +var DOMProperty = require("./DOMProperty"); + +var quoteAttributeValueForBrowser = require("./quoteAttributeValueForBrowser"); +var warning = require("./warning"); + +function shouldIgnoreValue(name, value) { + return value == null || + (DOMProperty.hasBooleanValue[name] && !value) || + (DOMProperty.hasNumericValue[name] && isNaN(value)) || + (DOMProperty.hasPositiveNumericValue[name] && (value < 1)) || + (DOMProperty.hasOverloadedBooleanValue[name] && value === false); +} + +if ("production" !== process.env.NODE_ENV) { + var reactProps = { + children: true, + dangerouslySetInnerHTML: true, + key: true, + ref: true + }; + var warnedProperties = {}; + + var warnUnknownProperty = function(name) { + if (reactProps.hasOwnProperty(name) && reactProps[name] || + warnedProperties.hasOwnProperty(name) && warnedProperties[name]) { + return; + } + + warnedProperties[name] = true; + var lowerCasedName = name.toLowerCase(); + + // data-* attributes should be lowercase; suggest the lowercase version + var standardName = ( + DOMProperty.isCustomAttribute(lowerCasedName) ? + lowerCasedName : + DOMProperty.getPossibleStandardName.hasOwnProperty(lowerCasedName) ? + DOMProperty.getPossibleStandardName[lowerCasedName] : + null + ); + + // For now, only warn when we have a suggested correction. This prevents + // logging too much when using transferPropsTo. + ("production" !== process.env.NODE_ENV ? warning( + standardName == null, + 'Unknown DOM property %s. Did you mean %s?', + name, + standardName + ) : null); + + }; +} + +/** + * Operations for dealing with DOM properties. + */ +var DOMPropertyOperations = { + + /** + * Creates markup for the ID property. + * + * @param {string} id Unescaped ID. + * @return {string} Markup string. + */ + createMarkupForID: function(id) { + return DOMProperty.ID_ATTRIBUTE_NAME + '=' + + quoteAttributeValueForBrowser(id); + }, + + /** + * Creates markup for a property. + * + * @param {string} name + * @param {*} value + * @return {?string} Markup string, or null if the property was invalid. + */ + createMarkupForProperty: function(name, value) { + if (DOMProperty.isStandardName.hasOwnProperty(name) && + DOMProperty.isStandardName[name]) { + if (shouldIgnoreValue(name, value)) { + return ''; + } + var attributeName = DOMProperty.getAttributeName[name]; + if (DOMProperty.hasBooleanValue[name] || + (DOMProperty.hasOverloadedBooleanValue[name] && value === true)) { + return attributeName; + } + return attributeName + '=' + quoteAttributeValueForBrowser(value); + } else if (DOMProperty.isCustomAttribute(name)) { + if (value == null) { + return ''; + } + return name + '=' + quoteAttributeValueForBrowser(value); + } else if ("production" !== process.env.NODE_ENV) { + warnUnknownProperty(name); + } + return null; + }, + + /** + * Sets the value for a property on a node. + * + * @param {DOMElement} node + * @param {string} name + * @param {*} value + */ + setValueForProperty: function(node, name, value) { + if (DOMProperty.isStandardName.hasOwnProperty(name) && + DOMProperty.isStandardName[name]) { + var mutationMethod = DOMProperty.getMutationMethod[name]; + if (mutationMethod) { + mutationMethod(node, value); + } else if (shouldIgnoreValue(name, value)) { + this.deleteValueForProperty(node, name); + } else if (DOMProperty.mustUseAttribute[name]) { + // `setAttribute` with objects becomes only `[object]` in IE8/9, + // ('' + value) makes it output the correct toString()-value. + node.setAttribute(DOMProperty.getAttributeName[name], '' + value); + } else { + var propName = DOMProperty.getPropertyName[name]; + // Must explicitly cast values for HAS_SIDE_EFFECTS-properties to the + // property type before comparing; only `value` does and is string. + if (!DOMProperty.hasSideEffects[name] || + ('' + node[propName]) !== ('' + value)) { + // Contrary to `setAttribute`, object properties are properly + // `toString`ed by IE8/9. + node[propName] = value; + } + } + } else if (DOMProperty.isCustomAttribute(name)) { + if (value == null) { + node.removeAttribute(name); + } else { + node.setAttribute(name, '' + value); + } + } else if ("production" !== process.env.NODE_ENV) { + warnUnknownProperty(name); + } + }, + + /** + * Deletes the value for a property on a node. + * + * @param {DOMElement} node + * @param {string} name + */ + deleteValueForProperty: function(node, name) { + if (DOMProperty.isStandardName.hasOwnProperty(name) && + DOMProperty.isStandardName[name]) { + var mutationMethod = DOMProperty.getMutationMethod[name]; + if (mutationMethod) { + mutationMethod(node, undefined); + } else if (DOMProperty.mustUseAttribute[name]) { + node.removeAttribute(DOMProperty.getAttributeName[name]); + } else { + var propName = DOMProperty.getPropertyName[name]; + var defaultValue = DOMProperty.getDefaultValueForProperty( + node.nodeName, + propName + ); + if (!DOMProperty.hasSideEffects[name] || + ('' + node[propName]) !== defaultValue) { + node[propName] = defaultValue; + } + } + } else if (DOMProperty.isCustomAttribute(name)) { + node.removeAttribute(name); + } else if ("production" !== process.env.NODE_ENV) { + warnUnknownProperty(name); + } + } + +}; + +module.exports = DOMPropertyOperations; + +}).call(this,require('_process')) + +},{"./DOMProperty":195,"./quoteAttributeValueForBrowser":348,"./warning":356,"_process":7}],197:[function(require,module,exports){ +(function (process){ +/** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule Danger + * @typechecks static-only + */ + +/*jslint evil: true, sub: true */ + +'use strict'; + +var ExecutionEnvironment = require("./ExecutionEnvironment"); + +var createNodesFromMarkup = require("./createNodesFromMarkup"); +var emptyFunction = require("./emptyFunction"); +var getMarkupWrap = require("./getMarkupWrap"); +var invariant = require("./invariant"); + +var OPEN_TAG_NAME_EXP = /^(<[^ \/>]+)/; +var RESULT_INDEX_ATTR = 'data-danger-index'; + +/** + * Extracts the `nodeName` from a string of markup. + * + * NOTE: Extracting the `nodeName` does not require a regular expression match + * because we make assumptions about React-generated markup (i.e. there are no + * spaces surrounding the opening tag and there is at least one attribute). + * + * @param {string} markup String of markup. + * @return {string} Node name of the supplied markup. + * @see http://jsperf.com/extract-nodename + */ +function getNodeName(markup) { + return markup.substring(1, markup.indexOf(' ')); +} + +var Danger = { + + /** + * Renders markup into an array of nodes. The markup is expected to render + * into a list of root nodes. Also, the length of `resultList` and + * `markupList` should be the same. + * + * @param {array} markupList List of markup strings to render. + * @return {array} List of rendered nodes. + * @internal + */ + dangerouslyRenderMarkup: function(markupList) { + ("production" !== process.env.NODE_ENV ? invariant( + ExecutionEnvironment.canUseDOM, + 'dangerouslyRenderMarkup(...): Cannot render markup in a worker ' + + 'thread. Make sure `window` and `document` are available globally ' + + 'before requiring React when unit testing or use ' + + 'React.renderToString for server rendering.' + ) : invariant(ExecutionEnvironment.canUseDOM)); + var nodeName; + var markupByNodeName = {}; + // Group markup by `nodeName` if a wrap is necessary, else by '*'. + for (var i = 0; i < markupList.length; i++) { + ("production" !== process.env.NODE_ENV ? invariant( + markupList[i], + 'dangerouslyRenderMarkup(...): Missing markup.' + ) : invariant(markupList[i])); + nodeName = getNodeName(markupList[i]); + nodeName = getMarkupWrap(nodeName) ? nodeName : '*'; + markupByNodeName[nodeName] = markupByNodeName[nodeName] || []; + markupByNodeName[nodeName][i] = markupList[i]; + } + var resultList = []; + var resultListAssignmentCount = 0; + for (nodeName in markupByNodeName) { + if (!markupByNodeName.hasOwnProperty(nodeName)) { + continue; + } + var markupListByNodeName = markupByNodeName[nodeName]; + + // This for-in loop skips the holes of the sparse array. The order of + // iteration should follow the order of assignment, which happens to match + // numerical index order, but we don't rely on that. + var resultIndex; + for (resultIndex in markupListByNodeName) { + if (markupListByNodeName.hasOwnProperty(resultIndex)) { + var markup = markupListByNodeName[resultIndex]; + + // Push the requested markup with an additional RESULT_INDEX_ATTR + // attribute. If the markup does not start with a < character, it + // will be discarded below (with an appropriate console.error). + markupListByNodeName[resultIndex] = markup.replace( + OPEN_TAG_NAME_EXP, + // This index will be parsed back out below. + '$1 ' + RESULT_INDEX_ATTR + '="' + resultIndex + '" ' + ); + } + } + + // Render each group of markup with similar wrapping `nodeName`. + var renderNodes = createNodesFromMarkup( + markupListByNodeName.join(''), + emptyFunction // Do nothing special with

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