material-ui 0.7.3.1

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

@@ -0,0 +1,46 @@
+var React = require('react');
+var Classable = require('./mixins/classable');
+var EnhancedButton = require('./enhanced-button');
+
+var FlatButton = 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 + '`.')
+      }
+    },
+    primary: React.PropTypes.bool,
+    secondary: React.PropTypes.bool
+  },
+
+  render: function() {
+    var {
+        label,
+        primary,
+        secondary,
+        ...other
+      } = this.props;
+    var classes = this.getClasses('mui-flat-button', {
+      'mui-is-primary': !this.props.disabled && primary,
+      'mui-is-secondary': !this.props.disabled && !primary && secondary
+    });
+    var children;
+
+    if (label) children = <span className="mui-flat-button-label">{label}</span>;
+    else children = this.props.children;
+
+    return (
+      <EnhancedButton {...other}
+        className={classes}>
+        {children}
+      </EnhancedButton>
+    );
+  }
+
+});
+
+module.exports = FlatButton;

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

@@ -0,0 +1,123 @@
+var React = require('react');
+var Classable = require('./mixins/classable');
+var EnhancedButton = require('./enhanced-button');
+var FontIcon = require('./font-icon');
+var Paper = require('./paper');
+
+var getZDepth = function(disabled) {
+  var zDepth = disabled ? 0 : 2;
+  return {
+    zDepth: zDepth,
+    initialZDepth: zDepth
+  };
+};
+
+
+var RaisedButton = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    className: React.PropTypes.string,
+    iconClassName: React.PropTypes.string,
+    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
+  },
+
+  componentWillMount: function() {
+    this.setState(getZDepth(this.props.disabled));
+  },
+
+  componentWillReceiveProps: function(newProps) {
+    if(newProps.disabled !== this.props.disabled){
+      this.setState(getZDepth(newProps.disabled));
+    }
+  },
+
+  componentDidMount: function() {
+    if (process.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);
+      }
+    }
+  },
+
+
+  render: function() {
+    var {
+      icon,
+      mini,
+      secondary,
+      ...other } = this.props;
+    var classes = this.getClasses('mui-floating-action-button', {
+      'mui-is-mini': mini,
+      'mui-is-secondary': !this.props.disabled && secondary
+    });
+
+    var icon;
+    if (this.props.iconClassName) icon = <FontIcon className={"mui-floating-action-button-icon " + this.props.iconClassName} />
+
+
+    return (
+      <Paper
+        className={classes}
+        innerClassName="mui-floating-action-button-inner"
+        zDepth={this.state.zDepth}
+        circle={true}>
+
+        <EnhancedButton {...other}
+          className="mui-floating-action-button-container"
+          onMouseDown={this._handleMouseDown}
+          onMouseUp={this._handleMouseUp}
+          onMouseOut={this._handleMouseOut}
+          onTouchStart={this._handleTouchStart}
+          onTouchEnd={this._handleTouchEnd}>
+
+          {icon}
+          {this.props.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;

data/vendor/assets/javascripts/material-ui/components/font-icon.jsx

@@ -0,0 +1,23 @@
+var React = require('react');
+var Classable = require('./mixins/classable');
+
+var FontIcon = React.createClass({
+
+  mixins: [Classable],
+
+  render: function() {
+
+    var {
+      className,
+      ...other
+    } = this.props;
+    var classes = this.getClasses('mui-font-icon');
+
+    return (
+      <span {...other} className={classes} />
+    );
+  }
+
+});
+
+module.exports = FontIcon;

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

@@ -0,0 +1,123 @@
+var React = require('react');
+var Classable = require('./mixins/classable');
+var EnhancedButton = require('./enhanced-button');
+var FontIcon = require('./font-icon');
+var Tooltip = require('./tooltip');
+
+var IconButton = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    className: React.PropTypes.string,
+    disabled: React.PropTypes.bool,
+    iconClassName: React.PropTypes.string,
+    onBlur: React.PropTypes.func,
+    onFocus: React.PropTypes.func,
+    tooltip: React.PropTypes.string,
+    touch: React.PropTypes.bool
+  },
+
+  getInitialState: function() {
+    return {
+      tooltipShown: false 
+    };
+  },
+
+  componentDidMount: function() {
+    if (this.props.tooltip) {
+      this._positionTooltip();
+    }
+    if (process.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);
+      }
+    }
+  },
+
+  render: function() {
+    var {
+      tooltip,
+      touch,
+      ...other } = this.props;
+    var classes = this.getClasses('mui-icon-button');
+    var tooltip;
+    var fonticon;
+
+    if (this.props.tooltip) {
+      tooltip = (
+        <Tooltip
+          ref="tooltip"
+          className="mui-icon-button-tooltip"
+          label={tooltip}
+          show={this.state.tooltipShown}
+          touch={touch} />
+      );
+    }
+
+    if (this.props.iconClassName) {
+      fonticon = (
+        <FontIcon className={this.props.iconClassName}/>
+      );
+    }
+
+    return (
+      <EnhancedButton {...other}
+        ref="button"
+        centerRipple={true}
+        className={classes}
+        onBlur={this._handleBlur}
+        onFocus={this._handleFocus}
+        onMouseOut={this._handleMouseOut}
+        onMouseOver={this._handleMouseOver}>
+
+        {tooltip}
+        {fonticon}
+        {this.props.children}
+
+      </EnhancedButton>
+    );
+  },
+
+  _positionTooltip: function() {
+    var tooltip = this.refs.tooltip.getDOMNode();
+    var tooltipWidth = tooltip.offsetWidth;
+    var buttonWidth = 48;
+
+    tooltip.style.left = (tooltipWidth - buttonWidth) / 2 * -1 + 'px';
+  },
+
+  _showTooltip: function() {
+    if (!this.props.disabled) this.setState({ tooltipShown: true });
+  },
+
+  _hideTooltip: function() {
+    this.setState({ tooltipShown: false });
+  },
+
+  _handleBlur: function(e) {
+    this._hideTooltip();
+    if (this.props.onBlur) this.props.onBlur(e);
+  },
+
+  _handleFocus: function(e) {
+    this._showTooltip();
+    if (this.props.onFocus) this.props.onFocus(e);
+  },
+
+  _handleMouseOut: function(e) {
+    if (!this.refs.button.isKeyboardFocused()) this._hideTooltip();
+    if (this.props.onMouseOut) this.props.onMouseOut(e);
+  },
+
+  _handleMouseOver: function(e) {
+    this._showTooltip();
+    if (this.props.onMouseOver) this.props.onMouseOver(e);
+  }
+
+});
+
+module.exports = IconButton;

data/vendor/assets/javascripts/material-ui/components/ink-bar.jsx

@@ -0,0 +1,25 @@
+var React = require('react');
+
+var InkBar = React.createClass({
+  
+  propTypes: {
+    position: React.PropTypes.string
+  },
+  
+  render: function() {
+
+    var styles = {
+      left: this.props.left,
+      width: this.props.width
+    }
+
+    return (
+      <div className='mui-ink-bar' style={styles}>
+        &nbsp;
+      </div>
+    );
+  }
+
+});
+
+module.exports = InkBar;

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

@@ -0,0 +1,143 @@
+var React = require('react');
+var Classable = require('./mixins/classable');
+var ClassNames = require('classnames');
+
+var Input = React.createClass({
+
+  propTypes: {
+    multiline: React.PropTypes.bool,
+    inlinePlaceholder: React.PropTypes.bool,
+    rows: React.PropTypes.number,
+    inputStyle: React.PropTypes.string,
+    error: React.PropTypes.string,
+    description: React.PropTypes.string,
+    placeholder: React.PropTypes.string,
+    type: React.PropTypes.string,
+    onChange: React.PropTypes.func
+  },
+
+  mixins: [Classable],
+
+  getInitialState: function() {
+    return {
+      value: this.props.defaultValue,
+      rows: this.props.rows
+    };
+  },
+
+  getDefaultProps: function() {
+    return {
+      multiline: false,
+      type: "text"
+    };
+  },
+
+  componentDidMount: function() {
+    if (process.NODE_ENV !== 'production') {
+      console.warn('Input has been deprecated. Please use TextField instead. See http://material-ui.com/#/components/text-fields');
+    }
+  },
+
+  render: function() {
+    var classes = this.getClasses('mui-input', {
+      'mui-floating': this.props.inputStyle === 'floating',
+      'mui-text': this.props.type === 'text',
+      'mui-error': this.props.error || false,
+      'mui-disabled': !!this.props.disabled,
+    });
+    var placeholder = this.props.inlinePlaceholder ? this.props.placeholder : "";
+    var inputIsNotEmpty = !!this.state.value;
+    var inputClassName = ClassNames({
+      'mui-is-not-empty': inputIsNotEmpty
+    });
+    var textareaClassName = ClassNames({
+      'mui-input-textarea': true,
+      'mui-is-not-empty': inputIsNotEmpty
+    });
+    var inputElement = this.props.multiline ?
+      this.props.valueLink ?
+        <textarea {...this.props} ref="input" 
+          className={textareaClassName} 
+          placeholder={placeholder}
+          rows={this.state.rows} /> :
+        <textarea {...this.props} ref="input" 
+          value={this.state.value} 
+          className={textareaClassName}
+          placeholder={placeholder} 
+          rows={this.state.rows} 
+          onChange={this._onTextAreaChange} /> :
+        this.props.valueLink ?
+          <input {...this.props} ref="input" 
+            className={inputClassName} 
+            placeholder={placeholder} /> :
+          <input {...this.props} ref="input"
+            className={inputClassName} 
+            value={this.state.value} 
+            placeholder={placeholder}
+            onChange={this._onInputChange} />;
+    var placeholderSpan = this.props.inlinePlaceholder ? null : 
+      <span className="mui-input-placeholder" onClick={this._onPlaceholderClick}>
+        {this.props.placeholder}
+      </span>;
+
+    return (
+      <div ref={this.props.ref} className={classes}>
+        {inputElement}
+        {placeholderSpan}
+        <span className="mui-input-highlight"></span>
+        <span className="mui-input-bar"></span>
+        <span className="mui-input-description">{this.props.description}</span>
+        <span className="mui-input-error">{this.props.error}</span>
+      </div>
+    );
+  },
+
+  getValue: function() {
+    return this.state.value;
+  },
+
+  setValue: function(txt) {
+    this.setState({value: txt});
+  },
+
+  clearValue: function() {
+    this.setValue('');
+  },
+
+  blur: function() {
+    if(this.isMounted()) this.refs.input.getDOMNode().blur();
+  },
+  
+  focus: function() {
+    if (this.isMounted()) this.refs.input.getDOMNode().focus();
+  },
+
+  _onInputChange: function(e) {
+    var value = e.target.value;
+    this.setState({value: value});
+    if (this.props.onChange) this.props.onChange(e, value);
+  },
+
+  _onPlaceholderClick: function(e) {
+    this.focus();
+  },
+
+  _onTextAreaChange: function(e) {
+    this._onInputChange(e);
+    this._onLineBreak(e);
+  },
+
+  _onLineBreak: function(e) {
+    var value = e.target.value;
+    var lines = value.split('\n').length;
+
+    if (lines > this.state.rows) {
+      if (this.state.rows !== 20) {
+        this.setState({ rows: ((this.state.rows) + 1)});
+      }
+    }
+  }
+
+});
+
+module.exports = Input;