material-ui 0.7.3.1

data/vendor/assets/javascripts/material-ui/components/menu/subheader-menu-item.jsx

@@ -0,0 +1,18 @@
+var React = require('react');
+
+var SubheaderMenuItem = React.createClass({
+    
+    propTypes: {
+        index: React.PropTypes.number.isRequired,
+        text: React.PropTypes.string.isRequired
+    },
+    
+    render: function() {
+        return (
+            <div key={this.props.index} className="mui-subheader">{this.props.text}</div>
+        );
+    }
+    
+});
+
+module.exports = SubheaderMenuItem;

data/vendor/assets/javascripts/material-ui/components/mixins/classable.js

@@ -0,0 +1,42 @@
+var React = require('react');
+var classNames = require('classnames');
+
+module.exports = {
+
+  propTypes: {
+    className: React.PropTypes.string
+  },
+
+  getClasses: function(initialClasses, additionalClassObj) {
+    var classString = '';
+
+    //Initialize the classString with the classNames that were passed in
+    if (this.props.className) 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(classString) {
+    var classObj = {};
+
+    if (classString) {
+      classString.split(' ').forEach(function(className) {
+        if (className) classObj[className] = true;
+      });
+    }
+
+    return classObj;
+  }
+
+}

data/vendor/assets/javascripts/material-ui/components/mixins/click-awayable.js

@@ -0,0 +1,35 @@
+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() {
+    if (!this.manuallyBindClickAway) this._bindClickAway();
+  },
+
+  componentWillUnmount: function() {
+    this._unbindClickAway();
+  },
+
+  _checkClickAway: function(e) {
+    var el = this.getDOMNode();
+
+    // Check if the target is inside the current component
+    if (this.isMounted() && 
+      e.target != el &&
+      !Dom.isDescendant(el, e.target)) {
+      if (this.componentClickAway) this.componentClickAway();
+    }
+  },
+
+  _bindClickAway: function() {
+    Events.on(document, 'click', this._checkClickAway);
+  },
+
+  _unbindClickAway: function() {
+    Events.off(document, 'click', this._checkClickAway);
+  }
+
+};

data/vendor/assets/javascripts/material-ui/components/mixins/window-listenable.js

@@ -0,0 +1,23 @@
+var Events = require('../utils/events');
+
+module.exports = {
+
+  componentDidMount: function() {
+    var listeners = this.windowListeners;
+
+    for (var eventName in listeners) {
+       var callbackName = listeners[eventName];
+       Events.on(window, eventName, this[callbackName]);
+    }
+  },
+
+  componentWillUnmount: function() {
+    var listeners = this.windowListeners;
+
+    for (var eventName in listeners) {
+       var callbackName = listeners[eventName];
+       Events.off(window, eventName, this[callbackName]);
+    }
+  }
+  
+}

data/vendor/assets/javascripts/material-ui/components/overlay.jsx

@@ -0,0 +1,58 @@
+var React = require('react'),
+  Classable = require('./mixins/classable');
+
+var Overlay = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    show: React.PropTypes.bool,
+    autoLockScrolling: React.PropTypes.bool
+  },
+  
+  getDefaultProps: function() {
+    return {
+      autoLockScrolling: true
+    };
+  },
+  
+  componentDidUpdate: function(prevProps, prevState) {
+    if (this.props.autoLockScrolling) (this.props.show) ? this._preventScrolling() : this._allowScrolling();
+  },
+
+  render: function() {
+    var 
+      {
+        className,
+        ...other
+      } = this.props,
+      classes = this.getClasses('mui-overlay', {
+        'mui-is-shown': this.props.show
+      });
+
+    return (
+      <div {...other} className={classes} />
+    );
+  },
+  
+  preventScrolling: function() {
+    if (!this.props.autoLockScrolling) this._preventScrolling();
+  },
+  
+  allowScrolling: function() {
+    if (!this.props.autoLockScrolling) this._allowScrolling();
+  },
+  
+  _preventScrolling: function() {
+    var body = document.getElementsByTagName('body')[0];
+    body.style.overflow = 'hidden';
+  },
+  
+  _allowScrolling: function() {
+    var body = document.getElementsByTagName('body')[0];
+    body.style.overflow = '';
+  }
+
+});
+
+module.exports = Overlay;

data/vendor/assets/javascripts/material-ui/components/paper.jsx

@@ -0,0 +1,58 @@
+var React = require('react'),
+  Classable = require('./mixins/classable');
+
+var Paper = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    circle: React.PropTypes.bool,
+    innerClassName: React.PropTypes.string,
+    innerStyle: React.PropTypes.object,
+    rounded: React.PropTypes.bool,
+    zDepth: React.PropTypes.oneOf([0,1,2,3,4,5])
+  },
+
+  getDefaultProps: function() {
+    return {
+      innerClassName: '',
+      rounded: true,
+      zDepth: 1
+    };
+  },
+
+  render: function() {
+    var {
+      className,
+      circle,
+      innerClassName,
+      rounded,
+      zDepth,
+      ...other } = this.props,
+      classes = this.getClasses(
+        'mui-paper ' +
+        'mui-z-depth-' + this.props.zDepth, { 
+        'mui-rounded': this.props.rounded,
+        'mui-circle': this.props.circle
+      }),
+      insideClasses = 
+        this.props.innerClassName + ' ' +
+        'mui-paper-container ' +
+        'mui-z-depth-bottom';
+
+    return (
+      <div {...other} className={classes}>
+        <div ref="innerContainer" className={insideClasses} style={this.props.innerStyle || {}}>
+          {this.props.children}
+        </div>
+      </div>
+    );
+  },
+
+  getInnerContainer: function() {
+    return this.refs.innerContainer;
+  }
+
+});
+
+module.exports = Paper;

data/vendor/assets/javascripts/material-ui/components/radio-button-group.jsx

@@ -0,0 +1,112 @@
+var React = require('react');
+var Paper = require('./paper');
+var Classable = require('./mixins/classable');
+var EnhancedSwitch = require('./enhanced-switch');
+var RadioButton = require('./radio-button');
+
+var RadioButtonGroup = React.createClass({
+
+	mixins: [Classable],
+
+	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(radioButton) {
+    return radioButton.props.hasOwnProperty('checked') && 
+      radioButton.props.checked; 
+  },
+
+  getInitialState: function() {
+    return {
+      numberCheckedRadioButtons: 0,
+      selected: this.props.valueSelected || this.props.defaultSelected || ''
+    };
+  },
+
+  componentWillMount: function() {
+    var cnt = 0;
+    
+    this.props.children.forEach(function(option) {
+      if (this._hasCheckAttribute(option)) cnt++;
+    }, this);
+
+    this.setState({numberCheckedRadioButtons: cnt});
+  }, 
+
+  componentWillReceiveProps: function(nextProps) {
+    if (nextProps.hasOwnProperty('valueSelected')) {
+      this.setState({selected: nextProps.valueSelected});
+    }
+  },
+
+	render: function() {
+
+    var options = this.props.children.map(function(option) {
+      
+      var {
+        name,
+        value, 
+        label,
+        onCheck,
+        ...other
+      } = option.props;
+
+      return <RadioButton
+        {...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 (
+			<div>
+				{options}
+			</div>
+		);
+	},
+
+  _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 " + 
+                    "has the 'checked' property set to true.";
+      console.error(message);
+    }
+  },
+
+	_onChange: function(e, newSelection) {
+    this._updateRadioButtons(newSelection);
+
+    // Successful update
+    if (this.state.numberCheckedRadioButtons == 0) {
+      if (this.props.onChange) this.props.onChange(e, newSelection);
+    }
+	},
+
+  getSelectedValue: function() {
+    return this.state.selected;
+  },
+
+  setSelectedValue: function(newSelection) {
+    this._updateRadioButtons(newSelection);  
+  },
+
+  clearValue: function() {
+    this.setSelectedValue('');  
+  }
+
+});
+
+module.exports = RadioButtonGroup;

data/vendor/assets/javascripts/material-ui/components/radio-button.jsx

@@ -0,0 +1,65 @@
+var React = require('react');
+var Classable = require('./mixins/classable');
+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({
+
+  mixins: [Classable],
+
+  propTypes: {
+    onCheck: React.PropTypes.func
+  },
+
+  render: function() {
+
+    var {
+      onCheck,
+      ...other
+    } = this.props;
+
+    var radioButtonElement = (
+      <div>
+          <RadioButtonOff className="mui-radio-button-target" />
+          <RadioButtonOn className="mui-radio-button-fill" />
+      </div>
+    );
+
+    var enhancedSwitchProps = {
+      ref: "enhancedSwitch",
+      inputType: "radio",
+      switchElement: radioButtonElement,
+      className: "mui-radio-button",
+      iconClassName: "mui-radio-button-icon",
+      onSwitch: this._handleCheck,
+      labelPosition: (this.props.labelPosition) ? this.props.labelPosition : "right"
+    };
+
+    return (
+      <EnhancedSwitch 
+        {...other}
+        {...enhancedSwitchProps}/>
+    );
+  },
+
+  // Only called when selected, not when unselected.
+  _handleCheck: function(e) {
+    if (this.props.onCheck) this.props.onCheck(e, this.props.value);
+  },
+
+  isChecked: function() {
+    return this.refs.enhancedSwitch.isSwitched();
+  },
+
+  setChecked: function(newCheckedValue) {
+    this.refs.enhancedSwitch.setSwitched(newCheckedValue);
+    this.setState({switched: newCheckedValue});
+  },
+  
+  getValue: function() {
+    return this.refs.enhancedSwitch.getValue();
+  }
+});
+
+module.exports = RadioButton;

data/vendor/assets/javascripts/material-ui/components/raised-button.jsx

@@ -0,0 +1,102 @@
+var React = require('react');
+var Classable = require('./mixins/classable');
+var EnhancedButton = require('./enhanced-button');
+var Paper = require('./paper');
+
+var RaisedButton = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    className: React.PropTypes.string,
+    label: function(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
+  },
+
+  getInitialState: function() {
+    var zDepth = this.props.disabled ? 0 : 1;
+    return {
+      zDepth: zDepth,
+      initialZDepth: zDepth
+    };
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    var zDepth = nextProps.disabled ? 0 : 1;
+    this.setState({
+      zDepth: zDepth,
+      initialZDepth: zDepth
+    });
+  },
+
+  render: function() {
+    var {
+      label,
+      primary,
+      secondary,
+      ...other } = this.props;
+    var classes = this.getClasses('mui-raised-button', {
+      'mui-is-primary': !this.props.disabled && primary,
+      'mui-is-secondary': !this.props.disabled && !primary && secondary
+    });
+    var children;
+
+    if (label) children = <span className="mui-raised-button-label">{label}</span>;
+    else children = this.props.children;
+
+    return (
+      <Paper className={classes} zDepth={this.state.zDepth}>
+        <EnhancedButton {...other}
+          className="mui-raised-button-container" 
+          onMouseUp={this._handleMouseUp}
+          onMouseDown={this._handleMouseDown}
+          onMouseOut={this._handleMouseOut}
+          onTouchStart={this._handleTouchStart}
+          onTouchEnd={this._handleTouchEnd}>
+          {children}
+        </EnhancedButton>
+      </Paper>
+    );
+  },
+
+  _handleMouseDown: function(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(e) {
+    this.setState({ zDepth: this.state.initialZDepth });
+    if (this.props.onMouseUp) this.props.onMouseUp(e);
+  },
+
+  _handleMouseOut: function(e) {
+    this.setState({ zDepth: this.state.initialZDepth });
+    if (this.props.onMouseOut) this.props.onMouseOut(e);
+  },
+
+  _handleTouchStart: function(e) {
+    this.setState({ zDepth: this.state.initialZDepth + 1 });
+    if (this.props.onTouchStart) this.props.onTouchStart(e);
+  },
+
+  _handleTouchEnd: function(e) {
+    this.setState({ zDepth: this.state.initialZDepth });
+    if (this.props.onTouchEnd) this.props.onTouchEnd(e);
+  }
+
+});
+
+module.exports = RaisedButton;