material-ui 0.7.3.1

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

@@ -0,0 +1,147 @@
+var React = require('react');
+var KeyCode = require('./utils/key-code');
+var Classable = require('./mixins/classable');
+var WindowListenable = require('./mixins/window-listenable');
+var FocusRipple = require('./ripples/focus-ripple');
+var TouchRipple = require('./ripples/touch-ripple');
+
+var EnhancedButton = React.createClass({
+
+  mixins: [Classable, WindowListenable],
+
+  propTypes: {
+    centerRipple: React.PropTypes.bool,
+    className: React.PropTypes.string,
+    disabled: React.PropTypes.bool,
+    disableFocusRipple: React.PropTypes.bool,
+    disableTouchRipple: React.PropTypes.bool,
+    linkButton: React.PropTypes.bool,
+    onBlur: React.PropTypes.func,
+    onFocus: React.PropTypes.func,
+    onTouchTap: React.PropTypes.func
+  },
+
+  windowListeners: {
+    'keydown': '_handleWindowKeydown',
+    'keyup': '_handleWindowKeyup'
+  },
+
+  getInitialState: function() {
+    return {
+      isKeyboardFocused: false 
+    };
+  },
+
+  render: function() {
+    var {
+      centerRipple,
+      disabled,
+      disableFocusRipple,
+      disableTouchRipple,
+      linkButton,
+      onBlur,
+      onFocus,
+      onTouchTap,
+      ...other } = this.props;
+    var classes = this.getClasses('mui-enhanced-button', {
+      'mui-is-disabled': disabled,
+      'mui-is-keyboard-focused': this.state.isKeyboardFocused,
+      'mui-is-link-button': linkButton
+    });
+    var touchRipple = (
+      <TouchRipple
+        ref="touchRipple"
+        key="touchRipple"
+        centerRipple={centerRipple}>
+        {this.props.children}
+        </TouchRipple>
+    );
+    var focusRipple = (
+      <FocusRipple
+        key="focusRipple"
+        show={this.state.isKeyboardFocused} />
+    );
+    var buttonProps = {
+      className: classes,
+      disabled: disabled,
+      onBlur: this._handleBlur,
+      onFocus: this._handleFocus,
+      onTouchTap: this._handleTouchTap
+    };
+    var buttonChildren = [
+      disabled || disableTouchRipple ? this.props.children : touchRipple,
+      disabled || disableFocusRipple ? null : focusRipple
+    ];
+
+    if (disabled && linkButton) {
+      return (
+        <span {...other} 
+          className={classes} 
+          disabled={disabled}>
+          {this.props.children}
+        </span>
+      );
+    }
+
+    return linkButton ? (
+      <a {...other} {...buttonProps}>
+        {buttonChildren}
+      </a>
+    ) : (
+      <button {...other} {...buttonProps}>
+        {buttonChildren}
+      </button>
+    );
+  },
+
+  isKeyboardFocused: function() {
+    return this.state.isKeyboardFocused;
+  },
+
+  _handleWindowKeydown: function(e) {
+    if (e.keyCode == KeyCode.TAB) this._tabPressed = true;
+    if (e.keyCode == KeyCode.ENTER && this.state.isKeyboardFocused) {
+      this._handleTouchTap(e);
+    }
+  },
+
+  _handleWindowKeyup: function(e) {
+    if (e.keyCode == KeyCode.SPACE && this.state.isKeyboardFocused) {
+      this._handleTouchTap(e);
+    }
+  },
+
+  _handleBlur: function(e) {
+    this.setState({
+      isKeyboardFocused: false
+    });
+
+    if (this.props.onBlur) this.props.onBlur(e);
+  },
+
+  _handleFocus: function(e) {
+    //setTimeout is needed becuase the focus event fires first
+    //Wait so that we can capture if this was a keyboard focus
+    //or touch focus
+    setTimeout(function() {
+      if (this._tabPressed) {
+        this.setState({
+          isKeyboardFocused: true
+        });
+      }
+    }.bind(this), 150);
+    
+    if (this.props.onFocus) this.props.onFocus(e);
+  },
+
+  _handleTouchTap: function(e) {
+    this._tabPressed = false;
+    this.setState({
+      isKeyboardFocused: false
+    });
+    if (this.props.onTouchTap) this.props.onTouchTap(e);
+  }
+
+});
+
+module.exports = EnhancedButton;

data/vendor/assets/javascripts/material-ui/components/enhanced-switch.jsx

@@ -0,0 +1,296 @@
+var React = require('react');
+var KeyCode = require('./utils/key-code');
+var Classable = require('./mixins/classable');
+var UniqueId = require('./utils/unique-id');
+var WindowListenable = require('./mixins/window-listenable');
+var FocusRipple = require('./ripples/focus-ripple');
+var TouchRipple = require('./ripples/touch-ripple');
+var Paper = require('./paper');
+
+var EnhancedSwitch = React.createClass({
+
+  mixins: [Classable, WindowListenable],
+
+	propTypes: {
+      id: React.PropTypes.string,
+      inputType: React.PropTypes.string.isRequired,
+      switchElement: React.PropTypes.element.isRequired,
+      iconClassName: React.PropTypes.string.isRequired,
+      name: React.PropTypes.string,
+	    value: React.PropTypes.string,
+	    label: React.PropTypes.string,
+	    onSwitch: React.PropTypes.func,
+	    required: React.PropTypes.bool,
+	    disabled: React.PropTypes.bool,
+	    defaultSwitched: React.PropTypes.bool,
+      labelPosition: React.PropTypes.oneOf(['left', 'right']),
+      disableFocusRipple: React.PropTypes.bool,
+      disableTouchRipple: React.PropTypes.bool
+	  },
+
+  windowListeners: {
+    'keydown': '_handleWindowKeydown',
+    'keyup': '_handleWindowKeyup'
+  },
+
+  getDefaultProps: function() {
+    return {
+      iconClassName: ''
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      switched: this.props.defaultSwitched ||
+        (this.props.valueLink && this.props.valueLink.value),
+      isKeyboardFocused: false
+    }
+  },
+
+  componentDidMount: function() {
+    var inputNode = this.refs.checkbox.getDOMNode();
+    this.setState({switched: inputNode.checked});
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    var hasCheckedLinkProp = nextProps.hasOwnProperty('checkedLink');
+    var hasCheckedProp = nextProps.hasOwnProperty('checked');
+    var hasToggledProp = nextProps.hasOwnProperty('toggled');
+    var hasNewDefaultProp =
+      (nextProps.hasOwnProperty('defaultSwitched') &&
+      (nextProps.defaultSwitched != this.props.defaultSwitched));
+    var newState = {};
+
+    if (hasCheckedProp) {
+      newState.switched = nextProps.checked;
+    } else if (hasToggledProp) {
+      newState.switched = nextProps.toggled;
+    } else if (hasCheckedLinkProp) {
+      newState.switched = nextProps.checkedLink.value;
+    }
+
+    if (newState) this.setState(newState);
+  },
+
+  render: function() {
+    var {
+      type,
+      name,
+      value,
+      label,
+      onSwitch,
+      defaultSwitched,
+      onBlur,
+      onFocus,
+      onMouseUp,
+      onMouseDown,
+      onMouseOut,
+      onTouchStart,
+      onTouchEnd,
+      disableTouchRipple,
+      disableFocusRipple,
+      iconClassName,
+      ...other
+    } = this.props;
+
+    var classes = this.getClasses('mui-enhanced-switch', {
+      'mui-is-switched': this.state.switched,
+      'mui-is-disabled': this.props.disabled,
+      'mui-is-required': this.props.required
+    });
+
+    var inputId = this.props.id || UniqueId.generate();
+
+    var labelElement = this.props.label ? (
+      <label className="mui-switch-label" htmlFor={inputId}>
+        {this.props.label}
+      </label>
+    ) : null;
+
+    var inputProps = {
+      ref: "checkbox",
+      type: this.props.inputType,
+      name: this.props.name,
+      value: this.props.value,
+      defaultChecked: this.props.defaultSwitched,
+      onBlur: this._handleBlur,
+      onFocus: this._handleFocus,
+      onMouseUp: this._handleMouseUp,
+      onMouseDown: this._handleMouseDown,
+      onMouseOut: this._handleMouseOut,
+      onTouchStart: this._handleTouchStart,
+      onTouchEnd: this._handleTouchEnd
+    };
+
+    if (!this.props.hasOwnProperty('checkedLink')) {
+      inputProps.onChange = this._handleChange;
+    }
+
+    var inputElement = (
+      <input
+        {...other}
+        {...inputProps}
+        className="mui-enhanced-switch-input"/>
+    );
+
+    var touchRipple = (
+      <TouchRipple
+        ref="touchRipple"
+        key="touchRipple"
+        centerRipple={true} />
+    );
+
+    var focusRipple = (
+      <FocusRipple
+        key="focusRipple"
+        show={this.state.isKeyboardFocused} />
+    );
+
+    var ripples = [
+      this.props.disabled || disableTouchRipple ? null : touchRipple,
+      this.props.disabled || disableFocusRipple ? null : focusRipple
+    ];
+
+    iconClassName += ' mui-enhanced-switch-wrap';
+
+    var switchElement = (this.props.iconClassName.indexOf("toggle") == -1) ? (
+        <div className={iconClassName}>
+          {this.props.switchElement}
+          {ripples}
+        </div>
+      ) : (
+        <div className={iconClassName}>
+          <div className="mui-toggle-track" />
+          <Paper className="mui-toggle-thumb" zDepth={1}> {ripples} </Paper>
+        </div>
+    );
+
+    var labelPositionExist = this.props.labelPosition;
+
+    // Position is left if not defined or invalid.
+    var elementsInOrder = (labelPositionExist &&
+      (this.props.labelPosition.toUpperCase() === "RIGHT")) ? (
+        <div>
+          {switchElement}
+          {labelElement}
+        </div>
+      ) : (
+        <div>
+          {labelElement}
+          {switchElement}
+        </div>
+    );
+
+    return (
+      <div className={classes}>
+          {inputElement}
+          {elementsInOrder}
+      </div>
+    );
+  },
+
+
+  isSwitched: function() {
+    return this.refs.checkbox.getDOMNode().checked;
+  },
+
+  // no callback here because there is no event
+  setSwitched: function(newSwitchedValue) {
+    if (!this.props.hasOwnProperty('checked') || this.props.checked == false) {
+      this.setState({switched: newSwitchedValue});
+      this.refs.checkbox.getDOMNode().checked = newSwitchedValue;
+    } else if (process.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;
+  },
+
+  isKeyboardFocused: function() {
+    return this.state.isKeyboardFocused;
+  },
+
+  _handleChange: function(e) {
+
+    this._tabPressed = false;
+    this.setState({
+      isKeyboardFocused: false
+    });
+
+    var isInputChecked = this.refs.checkbox.getDOMNode().checked;
+
+    if (!this.props.hasOwnProperty('checked')) this.setState({switched: isInputChecked});
+    if (this.props.onSwitch) this.props.onSwitch(e, isInputChecked);
+  },
+
+  /**
+   * Because both the ripples and the checkbox input cannot share pointer
+   * events, the checkbox input takes control of pointer events and calls
+   * ripple animations manually.
+   */
+
+  // Checkbox inputs only use SPACE to change their state. Using ENTER will
+  // update the ui but not the input.
+  _handleWindowKeydown: function(e) {
+    if (e.keyCode == KeyCode.TAB) this._tabPressed = true;
+    if (e.keyCode == KeyCode.SPACE && this.state.isKeyboardFocused) {
+      this._handleChange(e);
+    }
+  },
+
+  _handleWindowKeyup: function(e) {
+    if (e.keyCode == KeyCode.SPACE && this.state.isKeyboardFocused) {
+      this._handleChange(e);
+    }
+  },
+
+  _handleMouseDown: function(e) {
+    //only listen to left clicks
+    if (e.button === 0) this.refs.touchRipple.start(e);
+  },
+
+  _handleMouseUp: function(e) {
+    this.refs.touchRipple.end();
+  },
+
+  _handleMouseOut: function(e) {
+    this.refs.touchRipple.end();
+  },
+
+  _handleTouchStart: function(e) {
+    this.refs.touchRipple.start(e);
+  },
+
+  _handleTouchEnd: function(e) {
+    this.refs.touchRipple.end();
+  },
+
+  _handleBlur: function(e) {
+    this.setState({
+      isKeyboardFocused: false
+    });
+
+    if (this.props.onBlur) this.props.onBlur(e);
+  },
+
+  _handleFocus: function(e) {
+    //setTimeout is needed becuase the focus event fires first
+    //Wait so that we can capture if this was a keyboard focus
+    //or touch focus
+    setTimeout(function() {
+      if (this._tabPressed) {
+        this.setState({
+          isKeyboardFocused: true
+        });
+      }
+    }.bind(this), 150);
+
+    if (this.props.onFocus) this.props.onFocus(e);
+  }
+
+});
+
+module.exports = EnhancedSwitch;

data/vendor/assets/javascripts/material-ui/components/enhanced-textarea.jsx

@@ -0,0 +1,113 @@
+var React = require('react');
+var Classable = require('./mixins/classable');
+
+var EnhancedTextarea = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    onChange: React.PropTypes.func,
+    onHeightChange: React.PropTypes.func,
+    textareaClassName: React.PropTypes.string,
+    rows: React.PropTypes.number
+  },
+
+  getDefaultProps: function() {
+    return {
+      rows: 1
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      height: this.props.rows * 24
+    };
+  },
+
+  componentDidMount: function() {
+    this._syncHeightWithShadow();
+  },
+
+  render: function() {
+
+    var {
+      className,
+      onChange,
+      onHeightChange,
+      textareaClassName,
+      rows,
+      valueLink,
+      ...other,
+    } = this.props;
+
+    var classes = this.getClasses('mui-enhanced-textarea');
+    var textareaClassName = 'mui-enhanced-textarea-input';
+    var style = {
+      height: this.state.height + 'px'
+    };
+
+    if (this.props.textareaClassName) {
+      textareaClassName += ' ' + this.props.textareaClassName;
+    }
+
+    if (this.props.hasOwnProperty('valueLink')) {
+      other.value = this.props.valueLink.value;
+    }
+
+    return (
+      <div className={classes}>
+        <textarea
+          ref="shadow"
+          className="mui-enhanced-textarea-shadow"
+          tabIndex="-1"
+          rows={this.props.rows}
+          defaultValue={this.props.defaultValue}
+          readOnly={true}
+          value={this.props.value} />
+        <textarea
+          {...other}
+          ref="input"
+          className={textareaClassName}
+          rows={this.props.rows}
+          style={style}
+          onChange={this._handleChange} />
+      </div>
+    );
+  },
+
+  getInputNode: function() {
+    return this.refs.input.getDOMNode();
+  },
+
+  _syncHeightWithShadow: function(newValue, e) {
+    var shadow = this.refs.shadow.getDOMNode();
+    var currentHeight = this.state.height;
+    var newHeight;
+
+    if (newValue !== undefined) shadow.value = newValue;
+    newHeight = shadow.scrollHeight;
+
+    if (currentHeight !== newHeight) {
+      this.setState({height: newHeight});
+      if (this.props.onHeightChange) this.props.onHeightChange(e, newHeight);
+    }
+  },
+
+  _handleChange: function(e) {
+    this._syncHeightWithShadow(e.target.value);
+
+    if (this.props.hasOwnProperty('valueLink')) {
+      this.props.valueLink.requestChange(e.target.value);
+    }
+
+    if (this.props.onChange) this.props.onChange(e);
+  },
+  
+  componentWillReceiveProps: function(nextProps) {
+    if (nextProps.value != this.props.value) {
+      this._syncHeightWithShadow(nextProps.value);
+    }
+  }
+});
+
+module.exports = EnhancedTextarea;