Merge pull request #578 from mmrtnz/css-in-js

Merge with master 2

CHANGELOG.md

@@ -1,3 +1,30 @@
+## 0.7.4
+###### _Apr. 21, 2015_
+
+##### General
+- Updated to react v0.13
+
+##### Components
+- AppBar
+  - Fixed IE toString.Call() issue (#518, #468)
+- Buttons
+  - Button events now do not fire on disabled buttons (#512)
+  - Fixed rapid keyboard tabbing issue (#528)
+- DatePicker
+  - Added autoOk, minDate, and maxDate props (#538)
+- Dialog
+  - Fixed IE toString.Call() issue (#518, #468)
+  - Added modal prop (#523)
+  - Fixed warnings caused by overwriting props (#500)
+  - Added ability to give an action button autofocus (#552)
+- DropDownMenu
+  - Handle selectIndex less than 0 (#480)
+  - Fixed issue of using this component outside strict mode (#533)
+- LeftNav
+  - Added onNavOpen & onNavClose events (#495)
+- Switches
+  - Fixed errors on disabled switches on mobile (#476)
+
 ## 0.7.3
 ###### _Apr. 1, 2015_
 

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-ui-docs",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "Documentation site for material-ui",
   "repository": {
     "type": "git",

docs/src/app/components/pages/components/buttons.jsx

@@ -48,6 +48,7 @@ class ButtonPage extends React.Component {
       '<FloatingActionButton iconClassName="muidocs-icon-action-grade" />\n' +
       '<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} />\n' +
       '<FloatingActionButton iconClassName="muidocs-icon-action-grade" disabled={true} />\n' +
+      '<FloatingActionButton iconClassName="muidocs-icon-custom-github" linkButton={true} href="https://github.com/callemall/material-ui" mini={true} secondary={true}/>' +
       '<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} disabled={true} />\n' +
       '<FloatingActionButton iconClassName="muidocs-icon-action-grade" secondary={true} />\n' +
       '<FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} secondary={true} />';          

package.json

@@ -1,7 +1,7 @@
 {
   "name": "material-ui",
   "author": "Call-em-all Engineering Team",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Material Design UI components built with React",
   "main": "./lib",
   "scripts": {

src/app-bar.jsx

@@ -34,7 +34,7 @@ var AppBar = React.createClass({
   },
 
   componentDidMount: function() {
-    if (process.NODE_ENV !== 'production' && 
+    if (process.env.NODE_ENV !== 'production' && 
        (this.props.iconElementLeft && this.props.iconClassNameLeft)) {
         var warning = 'Properties iconClassNameLeft and iconElementLeft cannot be simultaneously ' +
                       'defined. Please use one or the other.';

src/dialog-window.jsx

@@ -132,7 +132,7 @@ var DialogWindow = React.createClass({
   },
 
   dismiss: function() {
-    CssEvent.onTransitionEnd(this.getDOMNode(), function() {
+    CssEvent.onTransitionEnd(React.findDOMNode(this), function() {
       this.refs.dialogOverlay.allowScrolling();
     }.bind(this));
 
@@ -203,13 +203,13 @@ var DialogWindow = React.createClass({
 
   _positionDialog: function() {
 
-    var container = this.getDOMNode();
-    var dialogWindow = this.refs.dialogWindow.getDOMNode();
+    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 dialogWindowHeight = dialogWindow.offsetHeight;
 
     var paddingTop = ((containerHeight - dialogWindowHeight) / 2) - 64;
 
@@ -223,7 +223,7 @@ var DialogWindow = React.createClass({
 
   _focusOnAction: function() {
     if (this.props.actionFocus) {
-      this.refs[this.props.actionFocus].getDOMNode().focus();
+      React.findDOMNode(this.refs[this.props.actionFocus]).focus();
     }
   },
 

src/drop-down-menu.jsx

@@ -162,7 +162,7 @@ var DropDownMenu = React.createClass({
   },
 
   _setWidth: function() {
-    var el = this.getDOMNode(),
+    var el = React.findDOMNode(this),
       menuItemsDom = this.refs.menuItems.getDOMNode();
 
     el.style.width = menuItemsDom.offsetWidth + 'px';
@@ -171,7 +171,7 @@ var DropDownMenu = React.createClass({
   _setSelectedIndex: function(props) {
     var selectedIndex = props.selectedIndex;
 
-    if (process.NODE_ENV !== 'production' && selectedIndex < 0) {
+    if (process.env.NODE_ENV !== 'production' && selectedIndex < 0) {
       console.warn('Cannot set selectedIndex to a negative index.', selectedIndex);
     }
 

src/enhanced-switch.jsx

@@ -290,22 +290,22 @@ var EnhancedSwitch = React.createClass({
 
 
   isSwitched: function() {
-    return this.refs.checkbox.getDOMNode().checked;
+    return React.findDOMNode(this.refs.checkbox).checked;
   },
 
   // no callback here because there is no event
   setSwitched: function(newSwitchedValue) {
     if (!this.props.hasOwnProperty('checked') || this.props.checked == false) {
       this.props.onParentShouldUpdate(newSwitchedValue);  
-      this.refs.checkbox.getDOMNode().checked = newSwitchedValue;
-    } else if (process.NODE_ENV !== 'production') {
+      React.findDOMNode(this.refs.checkbox).checked = newSwitchedValue;
+    } else if (process.env.NODE_ENV !== 'production') {
       var message = 'Cannot call set method while checked is defined as a property.';
       console.error(message);
     }
   },
 
   getValue: function() {
-    return this.refs.checkbox.getDOMNode().value;
+    return React.findDOMNode(this.refs.checkbox).value;
   },
 
   isKeyboardFocused: function() {

src/enhanced-textarea.jsx

@@ -103,11 +103,11 @@ var EnhancedTextarea = React.createClass({
   },
 
   getInputNode: function() {
-    return this.refs.input.getDOMNode();
+    return React.findDOMNode(this.refs.input);
   },
 
   _syncHeightWithShadow: function(newValue, e) {
-    var shadow = this.refs.shadow.getDOMNode();
+    var shadow = React.findDOMNode(this.refs.shadow);
     var currentHeight = this.state.height;
     var newHeight;
 

src/floating-action-button.jsx

@@ -57,7 +57,7 @@ var RaisedButton = React.createClass({
   },
 
   componentDidMount: function() {
-    if (process.NODE_ENV !== 'production') {
+    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 ' +
@@ -227,10 +227,10 @@ var RaisedButton = React.createClass({
   _handleKeyboardFocus: function(e, keyboardFocused) {
     if (keyboardFocused && !this.props.disabled) {
       this.setState({ zDepth: this.state.initialZDepth + 1 });
-      this.refs.overlay.getDOMNode().style.backgroundColor = ColorManipulator.fade(this.getStyles().icon.color, 0.4);
+      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 });
-      this.refs.overlay.getDOMNode().style.backgroundColor = 'transparent';
+      React.findOMNode(this.refs.overlay).style.backgroundColor = 'transparent';
     }
   },
 

src/icon-button.jsx

@@ -34,8 +34,7 @@ var IconButton = React.createClass({
     if (this.props.tooltip) {
       this._positionTooltip();
     }
-
-    if (process.NODE_ENV !== 'production') {
+    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 ' +
@@ -158,7 +157,7 @@ var IconButton = React.createClass({
   },
 
   _positionTooltip: function() {
-    var tooltip = this.refs.tooltip.getDOMNode();
+    var tooltip = React.findDOMNode(this.refs.tooltip);
     var tooltipWidth = tooltip.offsetWidth;
     var buttonWidth = 48;
 

src/input.jsx

@@ -33,7 +33,7 @@ var Input = React.createClass({
   },
 
   componentDidMount: function() {
-    if (process.NODE_ENV !== 'production') {
+    if (process.env.NODE_ENV !== 'production') {
       console.warn('Input has been deprecated. Please use TextField instead. See http://material-ui.com/#/components/text-fields');
     }
   },
@@ -105,11 +105,11 @@ var Input = React.createClass({
   },
 
   blur: function() {
-    if(this.isMounted()) this.refs.input.getDOMNode().blur();
+    if(this.isMounted()) React.findDOMNode(this.refs.input).blur();
   },
 
   focus: function() {
-    if (this.isMounted()) this.refs.input.getDOMNode().focus();
+    if (this.isMounted()) React.findDOMNode(this.refs.input).focus();
   },
 
   _onInputChange: function(e) {

src/menu/menu.jsx

@@ -98,8 +98,14 @@ var NestedMenuItem = React.createClass({
   },
 
   _positionNestedMenu: function() {
+// <<<<<<< HEAD:src/menu/menu.jsx
     var el = this.getDOMNode();
     var nestedMenu = React.findDOMNode(this.refs.nestedMenu);
+// =======
+//     var el = React.findDOMNode(this),
+//       nestedMenu = React.findDOMNode(this.refs.nestedMenu);
+
+// >>>>>>> master:src/js/menu/menu.jsx
     nestedMenu.style.left = el.offsetWidth + 'px';
   },
 
@@ -175,7 +181,7 @@ var Menu = React.createClass({
   },
 
   componentDidMount: function() {
-    var el = this.getDOMNode();
+    var el = React.findDOMNode(this);
 
     //Set the menu width
     this._setKeyWidth(el);
@@ -369,8 +375,8 @@ var Menu = React.createClass({
     var el;
 
     if (this.props.hideable) {    
-      el = this.getDOMNode();
-      var innerContainer = this.refs.paperContainer.getInnerContainer().getDOMNode();
+      el = React.findDOMNode(this);
+      var innerContainer = React.findDOMNode(this.refs.paperContainer.getInnerContainer());
 
       if (this.props.visible) {
         //Open the menu

src/mixins/click-awayable.js

@@ -1,3 +1,4 @@
+var React = require('react');
 var Events = require('../utils/events');
 var Dom = require('../utils/dom');
 
@@ -34,4 +35,4 @@ module.exports = {
     Events.off(document, 'click', this._checkClickAway);
   }
 
-};
+};

src/radio-button-group.jsx

@@ -76,8 +76,8 @@ var RadioButtonGroup = React.createClass({
   _updateRadioButtons: function(newSelection) {
     if (this.state.numberCheckedRadioButtons == 0) {
       this.setState({selected: newSelection});
-    } else if (process.NODE_ENV !== 'production') {
-      var message = "Cannot select a different radio button while another radio button " + 
+    } 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);
     }

src/ripples/focus-ripple.jsx

@@ -62,7 +62,7 @@ var FocusRipple = React.createClass({
 
     var startScale = 'scale(0.75)';
     var endScale = 'scale(0.85)';
-    var innerCircle = this.refs.innerCircle.getDOMNode();
+    var innerCircle = React.findDOMNode(this.refs.innerCircle);
     var currentScale = innerCircle.style.transform;
     var nextScale;
 
@@ -75,7 +75,7 @@ var FocusRipple = React.createClass({
   },
 
   _setRippleSize: function() {
-    var el = this.getDOMNode();
+    var el = React.findDOMNode(this);
     var height = el.offsetHeight;
     var width = el.offsetWidth;
     var size = Math.max(height, width);

src/ripples/touch-ripple.jsx

@@ -18,7 +18,8 @@ var TouchRipple = React.createClass({
         key: 0,
         started: false,
         ending: false
-      }]
+      }],
+      touchInProgress: false
     };
   },
 
@@ -112,33 +113,41 @@ var TouchRipple = React.createClass({
 
   _handleMouseDown: function(e) {
     //only listen to left clicks
-    if (e.button === 0) this.start(e);
+    if (e.button === 0 && !this.state.touchInProgress) this.start(e);
   },
 
   _handleMouseUp: function(e) {
-    this.end();
+    if (!this.state.touchInProgress) this.end();
   },
 
   _handleMouseOut: function(e) {
-    this.end();
+    if (!this.state.touchInProgress) this.end();
   },
 
   _handleTouchStart: function(e) {
     this.start(e);
   },
 
   _handleTouchEnd: function(e) {
+    this.setState({ touchInProgress: true });
+    setTimeout(function () {
+      if (this.isMounted()) {
+        this.setState({ touchInProgress: false });
+      }
+    }.bind(this), 100);
+
     this.end();
   },
 
   _getRippleStyle: function(e) {
     var style = {};
-    var el = this.getDOMNode();
+    var el = React.findDOMNode(this);
     var elHeight = el.offsetHeight;
     var elWidth = el.offsetWidth;
     var offset = Dom.offset(el);
-    var pageX = e.pageX == undefined ? e.nativeEvent.pageX : e.pageX;
-    var pageY = e.pageY == undefined ? e.nativeEvent.pageY : e.pageY;
+    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);

src/slider.jsx

@@ -303,7 +303,7 @@ var Slider = React.createClass({
     // let draggable handle the slider
     if (this.state.dragging || this.props.disabled) return;
     var value = this.state.value;
-    var node = this.refs.track.getDOMNode();
+    var node = React.findDOMNode(this.refs.track);
     var boundingClientRect = node.getBoundingClientRect();
     var offset = e.clientX - boundingClientRect.left;
     this._updateWithChangeEvent(e, offset / node.clientWidth);
@@ -355,7 +355,7 @@ var Slider = React.createClass({
   },
 
   _dragX: function(e, pos) {
-    var max = this.refs.track.getDOMNode().clientWidth;
+    var max = React.findDOMNode(this.refs.track).clientWidth;
     if (pos < 0) pos = 0; else if (pos > max) pos = max;
     this._updateWithChangeEvent(e, pos / max);
   },

src/snackbar.jsx

@@ -36,7 +36,7 @@ var Snackbar = React.createClass({
     if (prevState.open != this.state.open) {
       if (this.state.open) {
         //Only Bind clickaway after transition finishes
-        CssEvent.onTransitionEnd(React.findDOMNode(this.refs.root), function() {
+        CssEvent.onTransitionEnd(React.findDOMNode(this), function() {
           this._bindClickAway();
         }.bind(this));
       } else {
@@ -117,7 +117,7 @@ var Snackbar = React.createClass({
     if (this.state.open) rootStyles = this.mergeStyles(styles.root, styles.rootWhenOpen, this.props.style);
 
     return (
-      <span ref="root" style={rootStyles}>
+      <span style={rootStyles}>
           <span>{this.props.message}</span>
           {action}
       </span>