material-ui 0.7.3.1

data/vendor/assets/javascripts/material-ui/components/text-field.jsx

@@ -0,0 +1,215 @@
+var React = require('react');
+var Classable = require('./mixins/classable');
+var UniqueId = require('./utils/unique-id');
+var EnhancedTextarea = require('./enhanced-textarea');
+
+var TextField = React.createClass({
+
+  mixins: [Classable],
+
+  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
+  },
+
+  getDefaultProps: function() {
+    return {
+      type: 'text'
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      errorText: this.props.errorText,
+      hasValue: this.props.value || this.props.defaultValue ||
+        (this.props.valueLink && this.props.valueLink.value)
+    };
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    var hasErrorProp = nextProps.hasOwnProperty('errorText');
+    var hasValueLinkProp = nextProps.hasOwnProperty('valueLink');
+    var hasValueProp = nextProps.hasOwnProperty('value');
+    var hasNewDefaultValue = nextProps.defaultValue !== this.props.defaultValue;
+    var newState = {};
+
+    if (hasValueProp) {
+      newState.hasValue = nextProps.value;
+    } else if (hasValueLinkProp) {
+      newState.hasValue = nextProps.valueLink.value;
+    } else if (hasNewDefaultValue) {
+      newState.hasValue = nextProps.defaultValue;
+    }
+
+    if (hasErrorProp) newState.errorText = nextProps.errorText;
+    if (newState) this.setState(newState);
+  },
+
+  render: function() {
+    var {
+      className,
+      errorText,
+      floatingLabelText,
+      hintText,
+      id,
+      multiLine,
+      onBlur,
+      onChange,
+      onFocus,
+      type,
+      ...other
+    } = this.props;
+
+    var classes = this.getClasses('mui-text-field', {
+      'mui-has-error': this.props.errorText,
+      'mui-has-floating-labels': this.props.floatingLabelText,
+      'mui-has-value': this.state.hasValue,
+      'mui-is-disabled': this.props.disabled,
+      'mui-is-focused': this.state.isFocused,
+      'mui-is-multiLine': this.props.multiLine
+    });
+
+    var inputId = this.props.id || UniqueId.generate();
+
+    var errorTextElement = this.state.errorText ? (
+      <div className="mui-text-field-error">{this.state.errorText}</div>
+    ) : null;
+
+    var hintTextElement = this.props.hintText ? (
+      <div className="mui-text-field-hint">{this.props.hintText}</div>
+    ) : null;
+
+    var floatingLabelTextElement = this.props.floatingLabelText ? (
+      <label
+        className="mui-text-field-floating-label"
+        htmlFor={inputId}>
+        {this.props.floatingLabelText}
+      </label>
+    ) : null;
+
+    var inputProps;
+    var inputElement;
+
+    inputProps = {
+      ref: 'input',
+      className: 'mui-text-field-input',
+      id: inputId,
+      onBlur: this._handleInputBlur,
+      onFocus: this._handleInputFocus,
+      onKeyDown: this._handleInputKeyDown
+    };
+
+    if (!this.props.hasOwnProperty('valueLink')) {
+      inputProps.onChange = this._handleInputChange;
+    }
+
+    inputElement = this.props.multiLine ? (
+      <EnhancedTextarea
+        {...other}
+        {...inputProps}
+        onHeightChange={this._handleTextAreaHeightChange}
+        textareaClassName="mui-text-field-textarea" />
+    ) : (
+      <input
+        {...other}
+        {...inputProps}
+        type={this.props.type} />
+    );
+
+    return (
+      <div className={classes}>
+
+        {floatingLabelTextElement}
+        {hintTextElement}
+        {inputElement}
+
+        <hr className="mui-text-field-underline" />
+        <hr className="mui-text-field-focus-underline" />
+
+        {errorTextElement}
+
+      </div>
+    );
+  },
+
+  blur: function() {
+    if (this.isMounted()) this._getInputNode().blur();
+  },
+
+  clearValue: function() {
+    this.setValue('');
+  },
+
+  focus: function() {
+    if (this.isMounted()) this._getInputNode().focus();
+  },
+
+  getValue: function() {
+    return this.isMounted() ? this._getInputNode().value : undefined;
+  },
+
+  setErrorText: function(newErrorText) {
+    if (process.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(newValue) {
+    if (process.NODE_ENV !== 'production' && this._isControlled()) {
+      console.error('Cannot call TextField.setValue when value or valueLink is defined as a property.');
+    } else if (this.isMounted()) {
+      this._getInputNode().value = newValue;
+      this.setState({hasValue: newValue});
+    }
+  },
+
+  _getInputNode: function() {
+    return this.props.multiLine ?
+      this.refs.input.getInputNode() : this.refs.input.getDOMNode();
+  },
+
+  _handleInputBlur: function(e) {
+    this.setState({isFocused: false});
+    if (this.props.onBlur) this.props.onBlur(e);
+  },
+
+  _handleInputChange: function(e) {
+    this.setState({hasValue: e.target.value});
+    if (this.props.onChange) this.props.onChange(e);
+  },
+
+  _handleInputFocus: function(e) {
+    this.setState({isFocused: true});
+    if (this.props.onFocus) this.props.onFocus(e);
+  },
+
+  _handleInputKeyDown: function(e) {
+    if (e.keyCode === 13 && this.props.onEnterKeyDown) this.props.onEnterKeyDown(e);
+    if (this.props.onKeyDown) this.props.onKeyDown(e);
+  },
+
+  _handleTextAreaHeightChange: function(e, height) {
+    var newHeight = height + 24;
+    if (this.props.floatingLabelText) newHeight += 24;
+    this.getDOMNode().style.height = newHeight + 'px';
+  },
+
+  _isControlled: function() {
+    return this.props.hasOwnProperty('value') ||
+      this.props.hasOwnProperty('valueLink');
+  }
+
+});
+
+module.exports = TextField;

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

@@ -0,0 +1,62 @@
+var React = require('react');
+var Classable = require('./mixins/classable');
+var Paper = require('./paper');
+var EnhancedSwitch = require('./enhanced-switch');
+
+var Toggle = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    onToggle: React.PropTypes.func,
+    toggled: React.PropTypes.bool,
+    defaultToggled: React.PropTypes.bool
+  },
+
+  render: function() {
+    var {
+      onToggle,
+      ...other
+    } = this.props;
+
+    var toggleElement = (
+      <div>
+        <div className="mui-toggle-track" />
+        <Paper className="mui-toggle-thumb" zDepth={1}/>
+      </div>
+    );
+
+    var enhancedSwitchProps = {
+      ref: "enhancedSwitch",
+      inputType: "checkbox",
+      switchElement: toggleElement,
+      className: "mui-toggle",
+      iconClassName: "mui-toggle-icon",
+      onSwitch: this._handleToggle,
+      defaultSwitched: this.props.defaultToggled,
+      labelPosition: (this.props.labelPosition) ? this.props.labelPosition : "left"
+    };
+
+    if (this.props.hasOwnProperty('toggled')) enhancedSwitchProps.checked = this.props.toggled;
+
+    return (
+      <EnhancedSwitch 
+        {...other}
+        {...enhancedSwitchProps}/>
+    );
+  },
+
+  isToggled: function() {
+    return this.refs.enhancedSwitch.isSwitched();
+  },
+
+  setToggled: function(newToggledValue) {
+    this.refs.enhancedSwitch.setSwitched(newToggledValue);
+  },
+
+  _handleToggle: function(e, isInputChecked) {
+    if (this.props.onToggle) this.props.onToggle(e, isInputChecked);
+  }
+});
+
+module.exports = Toggle;

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

@@ -0,0 +1,28 @@
+var Classable = require('./mixins/classable');
+var React = require('react');
+
+var ToolbarGroup = React.createClass({
+
+  propTypes: {
+    float: React.PropTypes.string
+  },
+
+  mixins: [Classable],
+
+  render: function() {
+
+    var classes = this.getClasses('mui-toolbar-group', {
+      'mui-left': this.props.float === 'left',
+      'mui-right': this.props.float === 'right'
+    });
+
+    return (
+      <div className={classes}>
+        {this.props.children}
+      </div>
+    );
+  }
+
+});
+
+module.exports = ToolbarGroup;

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

@@ -0,0 +1,21 @@
+var Classable = require('./mixins/classable');
+var React = require('react');
+
+var Toolbar = React.createClass({
+
+  mixins: [Classable],
+
+  render: function() {
+    var classes = this.getClasses('mui-toolbar', {
+    });
+
+    return (
+      <div className={classes}>
+        {this.props.children}
+      </div>
+    );
+  }
+
+});
+
+module.exports = Toolbar;

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

@@ -0,0 +1,58 @@
+var React = require('react');
+var Classable = require('./mixins/classable');
+
+var Tooltip = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    className: React.PropTypes.string,
+    label: React.PropTypes.string.isRequired,
+    show: React.PropTypes.bool,
+    touch: React.PropTypes.bool
+  },
+
+  componentDidMount: function() {
+    this._setRippleSize();
+  },
+
+  componentDidUpdate: function(prevProps, prevState) {
+    this._setRippleSize();
+  },
+
+  render: function() {
+    var {
+      className,
+      label,
+      ...other } = this.props;
+    var classes = this.getClasses('mui-tooltip', {
+      'mui-is-shown': this.props.show,
+      'mui-is-touch': this.props.touch
+    });
+
+    return (
+      <div {...other} className={classes}>
+        <div ref="ripple" className="mui-tooltip-ripple" />
+        <span className="mui-tooltip-label">{this.props.label}</span>
+      </div>
+    );
+  },
+
+  _setRippleSize: function() {
+    var ripple = this.refs.ripple.getDOMNode();
+    var tooltipSize = this.getDOMNode().offsetWidth;
+    var ripplePadding = this.props.touch ? 45 : 20;
+    var rippleSize = tooltipSize + ripplePadding + 'px';
+
+    if (this.props.show) {
+      ripple.style.height = rippleSize;
+      ripple.style.width = rippleSize;
+    } else {
+      ripple.style.width = '0px';
+      ripple.style.height = '0px';
+    }
+  }
+
+});
+
+module.exports = Tooltip;

data/vendor/assets/javascripts/material-ui/components/transition-groups/slide-in.jsx

@@ -0,0 +1,48 @@
+var React = require('react/addons');
+var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
+var Classable = require('../mixins/classable');
+
+var SlideIn = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    direction: React.PropTypes.oneOf(['left', 'right', 'up', 'down'])
+  },
+
+  getDefaultProps: function() {
+    return {
+      direction: 'left'
+    };
+  },
+
+  render: function() {
+    var {
+      className,
+      direction,
+      ...other
+    } = this.props;
+    var classes = this.getClasses('mui-transition-slide-in');
+
+    classes += ' mui-is-' + this.props.direction;
+
+    //Add a custom className to every child
+    React.Children.forEach(this.props.children, function(child) {
+      child.props.className = child.props.className ?
+        child.props.className + ' mui-transition-slide-in-child':
+        'mui-transition-slide-in-child';
+    });
+
+    return (
+      <ReactCSSTransitionGroup {...other}
+        className={classes}
+        transitionName="mui-transition-slide-in"
+        component="div">
+        {this.props.children}
+      </ReactCSSTransitionGroup>
+    );
+  }
+
+});
+
+module.exports = SlideIn;

data/vendor/assets/javascripts/material-ui/components/utils/css-event.js

@@ -0,0 +1,52 @@
+var Events = require('./events');
+
+module.exports = {
+
+  _testSupportedProps: function(props) {
+    var i,
+      undefined,
+      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() {
+    return this._testSupportedProps({
+      'transition':'transitionend',
+      'OTransition':'otransitionend',  
+      'MozTransition':'transitionend',
+      'WebkitTransition':'webkitTransitionEnd'
+    });
+  },
+
+  animationEndEventName: function() {
+    return this._testSupportedProps({
+      'animation': 'animationend',
+      '-o-animation': 'oAnimationEnd',
+      '-moz-animation': 'animationend',
+      '-webkit-animation': 'webkitAnimationEnd'
+    });
+  },
+
+  onTransitionEnd: function (el, callback) {
+    var transitionEnd = this.transitionEndEventName();
+
+    Events.once(el, transitionEnd, function() {
+      return callback();
+    });
+  },
+
+  onAnimationEnd: function (el, callback) {
+    var animationEnd = this.animationEndEventName();
+
+    Events.once(el, animationEnd, function() {
+      return callback();
+    });
+  }
+
+};