material-ui 0.7.3.1

data/vendor/assets/javascripts/material-ui/components/date-picker/day-button.jsx

@@ -0,0 +1,49 @@
+var React = require('react');
+var Classable = require('../mixins/classable');
+var DateTime = require('../utils/date-time');
+var EnhancedButton = require('../enhanced-button');
+
+var DayButton = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    date: React.PropTypes.object,
+    onTouchTap: React.PropTypes.func,
+    selected: React.PropTypes.bool
+  },
+
+  render: function() {
+    var {
+      className,
+      date,
+      onTouchTap,
+      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
+    });
+
+    return this.props.date ? (
+      <EnhancedButton {...other}
+        className={classes}
+        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>
+      </EnhancedButton>
+    ) : (
+      <span className={classes} />
+    );
+  },
+
+  _handleTouchTap: function(e) {
+    if (this.props.onTouchTap) this.props.onTouchTap(e, this.props.date);
+  }
+
+});
+
+module.exports = DayButton;

data/vendor/assets/javascripts/material-ui/components/dialog-window.jsx

@@ -0,0 +1,183 @@
+var React = require('react');
+var WindowListenable = require('./mixins/window-listenable');
+var CssEvent = require('./utils/css-event');
+var KeyCode = require('./utils/key-code');
+var Classable = require('./mixins/classable');
+var FlatButton = require('./flat-button');
+var Overlay = require('./overlay');
+var Paper = require('./paper');
+
+var DialogWindow = React.createClass({
+
+  mixins: [Classable, WindowListenable],
+
+  propTypes: {
+    actions: React.PropTypes.array,
+    contentClassName: React.PropTypes.string,
+    openImmediately: React.PropTypes.bool,
+    onClickAway: React.PropTypes.func,
+    onDismiss: React.PropTypes.func,
+    onShow: React.PropTypes.func,
+    repositionOnUpdate: React.PropTypes.bool
+  },
+
+  windowListeners: {
+    'keyup': '_handleWindowKeyUp'
+  },
+
+  getDefaultProps: function() {
+    return {
+      actions: [],
+      repositionOnUpdate: true
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      open: this.props.openImmediately || false
+    };
+  },
+
+  componentDidMount: function() {
+    this._positionDialog();
+    if (this.props.openImmediately) {
+      this.refs.dialogOverlay.preventScrolling();
+      this._onShow();
+    }
+  },
+
+  componentDidUpdate: function (prevProps, prevState) {
+    this._positionDialog();
+  },
+
+  render: function() {
+    var classes = this.getClasses('mui-dialog-window', { 
+      'mui-is-shown': this.state.open
+    });
+    var contentClasses = 'mui-dialog-window-contents';
+    var actions = this._getActionsContainer(this.props.actions);
+
+    if (this.props.contentClassName) {
+      contentClasses += ' ' + this.props.contentClassName;
+    }
+
+    return (
+      <div className={classes}>
+        <Paper ref="dialogWindow" className={contentClasses} zDepth={4}>
+          {this.props.children}
+          {actions}
+        </Paper>
+        <Overlay ref="dialogOverlay" show={this.state.open} autoLockScrolling={false} onTouchTap={this._handleOverlayTouchTap} />
+      </div>
+    );
+  },
+
+  isOpen: function() {
+    return this.state.open;
+  },
+
+  dismiss: function() {
+    CssEvent.onTransitionEnd(this.getDOMNode(), function() {
+      this.refs.dialogOverlay.allowScrolling();
+    }.bind(this));
+
+    this.setState({ open: false });
+    this._onDismiss();
+  },
+
+  show: function() {
+    this.refs.dialogOverlay.preventScrolling();
+
+    this.setState({ open: true });
+    this._onShow();
+  },
+
+  _addClassName: function(reactObject, className) {
+    var originalClassName = reactObject.props.className;
+
+    reactObject.props.className = originalClassName ?
+      originalClassName + ' ' + className : className;
+  },
+
+  _getAction: function(actionJSON, key) {
+    var onClickHandler = actionJSON.onClick ? actionJSON.onClick : this.dismiss;
+    return (
+      <FlatButton
+        key={key}
+        secondary={true}
+        onClick={onClickHandler}
+        label={actionJSON.text} />
+    );
+  },
+
+  _getActionsContainer: function(actions) {
+    var actionContainer;
+    var actionObjects = [];
+
+    if (actions.length) {
+      for (var i = 0; i < actions.length; i++) {
+        currentAction = actions[i];
+
+        //if the current action isn't a react object, create one
+        if (!React.isValidElement(currentAction)) {
+          currentAction = this._getAction(currentAction, i);
+        }
+
+        this._addClassName(currentAction, 'mui-dialog-window-action');
+        actionObjects.push(currentAction);
+      };
+
+      actionContainer = (
+        <div className="mui-dialog-window-actions">
+          {actionObjects}
+        </div>
+      );
+    }
+
+    return actionContainer;
+  },
+
+  _positionDialog: function() {
+    var container, dialogWindow, containerHeight, dialogWindowHeight;
+
+    if (this.state.open) {
+
+      container = this.getDOMNode(),
+      dialogWindow = this.refs.dialogWindow.getDOMNode(),
+      containerHeight = container.offsetHeight,
+
+      //Reset the height in case the window was resized.
+      dialogWindow.style.height = '';
+      dialogWindowHeight = dialogWindow.offsetHeight;
+
+      //Vertically center the dialog window, but make sure it doesn't
+      //transition to that position.
+      if (this.props.repositionOnUpdate || !container.style.paddingTop) {
+        container.style.paddingTop = 
+          ((containerHeight - dialogWindowHeight) / 2) - 64 + 'px';
+      }
+    }
+  },
+  
+  _onShow: function() {
+    if (this.props.onShow) this.props.onShow();
+  },
+  
+  _onDismiss: function() {
+    if (this.props.onDismiss) this.props.onDismiss();
+  },
+
+  _handleOverlayTouchTap: function() {
+    this.dismiss();
+    if (this.props.onClickAway) this.props.onClickAway();
+  },
+
+  _handleWindowKeyUp: function(e) {
+    if (e.keyCode == KeyCode.ESC) {
+      this.dismiss();
+    }
+  }
+
+});
+
+module.exports = DialogWindow;

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

@@ -0,0 +1,54 @@
+var React = require('react');
+var Classable = require('./mixins/classable');
+var DialogWindow = require('./dialog-window');
+
+var Dialog = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    title: React.PropTypes.node
+  },
+
+  render: function() {
+    var {
+      className,
+      ...other
+    } = this.props;
+    var classes = this.getClasses('mui-dialog');
+    var title;
+
+    if (this.props.title) {
+      // If the title is a string, wrap in an h3 tag.
+      // If not, just use it as a node.
+      title = toString.call(this.props.title) === '[object String]' ?
+        <h3 className="mui-dialog-title">{this.props.title}</h3> :
+        this.props.title;
+    }
+
+    return (
+      <DialogWindow
+        {...other}
+        ref="dialogWindow"
+        className={classes}>
+
+        {title}
+        <div ref="dialogContent" className="mui-dialog-content">
+          {this.props.children}
+        </div>
+
+      </DialogWindow>
+    );
+  },
+
+  dismiss: function() {
+    this.refs.dialogWindow.dismiss();
+  },
+
+  show: function() {
+    this.refs.dialogWindow.show();
+  }
+
+});
+
+module.exports = Dialog;

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

@@ -0,0 +1,68 @@
+var React = require('react');
+var Classable = require('./mixins/classable');
+var ClickAwayable = require('./mixins/click-awayable');
+var KeyLine = require('./utils/key-line');
+var Paper = require('./paper');
+var FontIcon = require('./font-icon');
+var Menu = require('./menu/menu');
+
+var DropDownIcon = React.createClass({
+
+  mixins: [Classable, ClickAwayable],
+
+  propTypes: {
+    onChange: React.PropTypes.func,
+    menuItems: React.PropTypes.array.isRequired,
+    closeOnMenuItemClick: React.PropTypes.bool
+  },
+
+  getInitialState: function() {
+    return {
+      open: false
+    }
+  },
+  
+  getDefaultProps: function() {
+    return {
+      closeOnMenuItemClick: true
+    }
+  },
+
+  componentClickAway: function() {
+    this.setState({ open: false });
+  },
+
+  render: function() {
+    var classes = this.getClasses('mui-drop-down-icon', {
+      'mui-open': this.state.open
+    });
+
+    var icon;
+    if (this.props.iconClassName) icon = <FontIcon className={this.props.iconClassName} />;
+   
+    return (
+      <div className={classes}>
+          <div className="mui-menu-control" onClick={this._onControlClick}>
+              {icon}
+              {this.props.children}
+          </div>
+          <Menu ref="menuItems" menuItems={this.props.menuItems} hideable={true} visible={this.state.open} onItemClick={this._onMenuItemClick} />
+        </div>
+    );
+  },
+
+  _onControlClick: function(e) {
+    this.setState({ open: !this.state.open });
+  },
+
+  _onMenuItemClick: function(e, key, payload) {
+    if (this.props.onChange) this.props.onChange(e, key, payload);
+    
+    if (this.props.closeOnMenuItemClick) {
+      this.setState({ open: false });
+    }
+  }
+
+});
+
+module.exports = DropDownIcon;

data/vendor/assets/javascripts/material-ui/components/drop-down-menu.jsx

@@ -0,0 +1,94 @@
+var React = require('react');
+var Classable = require('./mixins/classable');
+var ClickAwayable = require('./mixins/click-awayable');
+var DropDownArrow = require('./svg-icons/drop-down-arrow');
+var KeyLine = require('./utils/key-line');
+var Paper = require('./paper');
+var Menu = require('./menu/menu');
+
+var DropDownMenu = React.createClass({
+
+  mixins: [Classable, ClickAwayable],
+
+  propTypes: {
+    autoWidth: React.PropTypes.bool,
+    onChange: React.PropTypes.func,
+    menuItems: React.PropTypes.array.isRequired
+  },
+
+  getDefaultProps: function() {
+    return {
+      autoWidth: true
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      open: false,
+      selectedIndex: this.props.selectedIndex || 0
+    }
+  },
+
+  componentClickAway: function() {
+    this.setState({ open: false });
+  },
+
+  componentDidMount: function() {
+    if (this.props.autoWidth) this._setWidth();
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    if (nextProps.hasOwnProperty('selectedIndex')) {
+      this.setState({selectedIndex: nextProps.selectedIndex});
+    }
+  },
+
+  render: function() {
+    var classes = this.getClasses('mui-drop-down-menu', {
+      'mui-open': this.state.open
+    });
+
+    return (
+      <div className={classes}>
+        <div className="mui-menu-control" onClick={this._onControlClick}>
+          <Paper className="mui-menu-control-bg" zDepth={0} />
+          <div className="mui-menu-label">
+            {this.props.menuItems[this.state.selectedIndex].text}
+          </div>
+          <DropDownArrow className="mui-menu-drop-down-icon" />
+          <div className="mui-menu-control-underline" />
+        </div>
+        <Menu
+          ref="menuItems"
+          autoWidth={this.props.autoWidth}
+          selectedIndex={this.state.selectedIndex}
+          menuItems={this.props.menuItems}
+          hideable={true}
+          visible={this.state.open}
+          onItemClick={this._onMenuItemClick} />
+      </div>
+    );
+  },
+
+  _setWidth: function() {
+    var el = this.getDOMNode(),
+      menuItemsDom = this.refs.menuItems.getDOMNode();
+
+    el.style.width = menuItemsDom.offsetWidth + 'px';
+  },
+
+  _onControlClick: function(e) {
+    this.setState({ open: !this.state.open });
+  },
+
+  _onMenuItemClick: function(e, key, payload) {
+    if (this.props.onChange && this.state.selectedIndex !== key) this.props.onChange(e, key, payload);
+    this.setState({
+      selectedIndex: key,
+      open: false
+    });
+  }
+
+});
+
+module.exports = DropDownMenu;