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

Refactored css into js for date-picker day button

src/js/date-picker/calendar.jsx

@@ -160,7 +160,6 @@ var Calendar = React.createClass({
 
   _setSelectedDate: function(d) {
     var newDisplayDate = DateTime.getFirstDayOfMonth(d);
-
     if (newDisplayDate !== this.state.displayDate) {
       this._setDisplayDate(newDisplayDate, d);
     } else {

src/js/date-picker/date-picker-dialog.jsx

@@ -54,7 +54,7 @@ var DatePickerDialog = React.createClass({
         fontSize: '14px',
         color: CustomVariables.datePickerCalendarTextColor
       },
-
+      
       dialogContents: {
         width: this.props.mode === 'landscape' ? '560px' : '280px'
       }

src/js/date-picker/date-picker.jsx

@@ -68,6 +68,7 @@ var DatePicker = React.createClass({
           onTouchTap={this._handleInputTouchTap} />
         <DatePickerDialog
           ref="dialogWindow"
+          mode={this.props.mode}
           initialDate={this.state.dialogDate}
           onAccept={this._handleDialogAccept}
           onShow={onShow}

src/js/date-picker/day-button.jsx

@@ -1,11 +1,13 @@
 var React = require('react');
-var Classable = require('../mixins/classable');
+var StylePropable = require('../mixins/style-propable');
+var Transition = require('../styles/mixins/transitions');
+var CustomVariables = require('../styles/variables/custom-variables');
 var DateTime = require('../utils/date-time');
 var EnhancedButton = require('../enhanced-button');
 
 var DayButton = React.createClass({
 
-  mixins: [Classable],
+  mixins: [StylePropable],
 
   propTypes: {
     date: React.PropTypes.object,
@@ -21,28 +23,62 @@ var DayButton = React.createClass({
       selected,
       ...other
     } = this.props;
-    var classes = this.getClasses('mui-date-picker-day-button', { 
-      'mui-is-current-date': DateTime.isEqualDate(this.props.date, new Date()),
-      'mui-is-selected': this.props.selected
-    });
+
+    var styles = {
+      root: {
+        position: 'relative',
+        float: 'left',
+        width: 36,
+        padding: '4px 2px',
+      },
+
+      label: {
+        position: 'relative',
+      },
+
+      select: {
+        position: 'absolute',
+        height: 32,
+        width: 32,
+        opacity: 0,
+        borderRadius: '50%',
+        transform: 'scale(0)',
+        transition: Transition.easeOut(),
+        backgroundColor: CustomVariables.datePickerSelectColor,
+      },
+    };
+
+    if (this.props.selected) {
+      styles.label.color = CustomVariables.datePickerSelectTextColor;
+      styles.select.opacity = 1;
+      styles.select.transform = 'scale(1)';
+      if (DateTime.isEqualDate(this.props.date, new Date())) {
+        styles.root.color = CustomVariables.datePickerColor;
+      }
+    }
 
     return this.props.date ? (
       <EnhancedButton {...other}
-        className={classes}
+        style={styles.root}
         disableFocusRipple={true}
         disableTouchRipple={true}
-        onTouchTap={this._handleTouchTap}>
-        <div className="mui-date-picker-day-button-select" />
-        <span className="mui-date-picker-day-button-label">{this.props.date.getDate()}</span>
+        onTouchTap={this._handleTouchTap}
+        onKeyboardFocus={this._handleKeyboardFocus}>
+        <div style={styles.select}/>
+        <span style={styles.label}>{this.props.date.getDate()}</span>
       </EnhancedButton>
     ) : (
-      <span className={classes} />
+      <span style={styles.root} />
     );
   },
 
   _handleTouchTap: function(e) {
     if (this.props.onTouchTap) this.props.onTouchTap(e, this.props.date);
-  }
+  },
+
+  _handleKeyboardFocus: function(e, keyboardFocused) {
+    if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, keyboardFocused, this.props.date);
+  } 
 
 });
 

src/js/enhanced-button.jsx

@@ -22,7 +22,8 @@ var EnhancedButton = React.createClass({
     touchRippleOpacity: React.PropTypes.number,
     onBlur: React.PropTypes.func,
     onFocus: React.PropTypes.func,
-    onTouchTap: React.PropTypes.func
+    onTouchTap: React.PropTypes.func,
+    onKeyboardFocus: React.PropTypes.func,
   },
 
   windowListeners: {
@@ -141,8 +142,7 @@ var EnhancedButton = React.createClass({
     this.setState({
       isKeyboardFocused: false
     });
-    this.props.onKeyboardFocus(false);
-
+    if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, false);
     if (this.props.onBlur) this.props.onBlur(e);
   },
 
@@ -156,7 +156,7 @@ var EnhancedButton = React.createClass({
         this.setState({
           isKeyboardFocused: true
         });
-        this.props.onKeyboardFocus(true);
+        if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, true);
       }
     }.bind(this), 150);
 
@@ -173,8 +173,7 @@ var EnhancedButton = React.createClass({
     this.setState({
       isKeyboardFocused: false
     });
-    this.props.onKeyboardFocus(false);
-
+    if (this.props.onKeyboardFocus) this.props.onKeyboardFocus(e, false);
     if (this.props.onTouchTap) this.props.onTouchTap(e);
   }
 

src/js/flat-button.jsx

@@ -120,7 +120,7 @@ var FlatButton = React.createClass({
     if (this.props.onMouseOut) this.props.onMouseOut(e);
   },
 
-  _handleKeyboardFocus: function(keyboardFocused) {
+  _handleKeyboardFocus: function(e, keyboardFocused) {
 
     if (keyboardFocused && !this.props.disabled) {
       this.getDOMNode().style.backgroundColor = ColorManipulator.fade(ColorManipulator.lighten(this._main().color, 0.4), 0.15);

src/js/floating-action-button.jsx

@@ -209,7 +209,7 @@ var RaisedButton = React.createClass({
     if (this.props.onTouchEnd) this.props.onTouchEnd(e);
   },
 
-  _handleKeyboardFocus: function(keyboardFocused) {
+  _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._icon().color, 0.4);

src/js/icon-button.jsx

@@ -154,7 +154,7 @@ var IconButton = React.createClass({
     if (this.props.onMouseOver) this.props.onMouseOver(e);
   },
 
-  _handleKeyboardFocus: function(keyboardFocused) {
+  _handleKeyboardFocus: function(e, keyboardFocused) {
     if (keyboardFocused && !this.props.disabled) {
       this._showTooltip();
       if (this.props.onFocus) this.props.onFocus(e);

src/js/raised-button.jsx

@@ -188,7 +188,7 @@ var RaisedButton = React.createClass({
     if (this.props.onTouchEnd) this.props.onTouchEnd(e);
   },
 
-  _handleKeyboardFocus: function(keyboardFocused) {
+  _handleKeyboardFocus: function(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;

src/less/components/components.less

@@ -1,3 +1,2 @@
-@import "date-picker/date-picker.less";
 @import "paper.less";
 @import "toolbar.less";

src/less/variables/custom-variables.less

@@ -30,13 +30,6 @@
 //Disabled Colors
 @disabled-color: fade(@body-text-color, 30%);
 
-//Date Picker
-@date-picker-color: @primary-1-color;
-@date-picker-text-color: @white;
-@date-picker-calendar-text-color: @body-text-color;
-@date-picker-select-color: @primary-2-color;
-@date-picker-select-text-color: @white;
-
 // buttons
 @button-height: 36px;
 @button-min-width: 88px;