material-ui 0.7.3.1

data/vendor/assets/javascripts/material-ui/components/left-nav.jsx

@@ -0,0 +1,105 @@
+var React = require('react'),
+  KeyCode = require('./utils/key-code'),
+  Classable = require('./mixins/classable'),
+  WindowListenable = require('./mixins/window-listenable'),
+  Overlay = require('./overlay'),
+  Paper = require('./paper'),
+  Menu = require('./menu/menu');
+
+var LeftNav = React.createClass({
+
+  mixins: [Classable, WindowListenable],
+
+  propTypes: {
+    docked: React.PropTypes.bool,
+    header: React.PropTypes.element,
+    onChange: React.PropTypes.func,
+    menuItems: React.PropTypes.array.isRequired,
+    selectedIndex: React.PropTypes.number
+  },
+
+  windowListeners: {
+    'keyup': '_onWindowKeyUp'
+  },
+
+  getDefaultProps: function() {
+    return {
+      docked: true
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      open: this.props.docked
+    };
+  },
+
+  toggle: function() {
+    this.setState({ open: !this.state.open });
+    return this;
+  },
+
+  close: function() {
+    this.setState({ open: false });
+    return this;
+  },
+
+  open: function() {
+    this.setState({ open: true });
+    return this;
+  },
+
+  render: function() {
+    var classes = this.getClasses('mui-left-nav', {
+        'mui-closed': !this.state.open
+      }),
+      selectedIndex = this.props.selectedIndex,
+      overlay;
+
+    if (!this.props.docked) overlay = <Overlay show={this.state.open} onTouchTap={this._onOverlayTouchTap} />;
+
+    return (
+      <div className={classes}>
+
+        {overlay}
+        <Paper
+          ref="clickAwayableElement"
+          className="mui-left-nav-menu"
+          zDepth={2}
+          rounded={false}>
+          
+          {this.props.header}
+          <Menu 
+            ref="menuItems"
+            zDepth={0}
+            menuItems={this.props.menuItems}
+            selectedIndex={selectedIndex}
+            onItemClick={this._onMenuItemClick} />
+
+        </Paper>
+      </div>
+    );
+  },
+
+  _onMenuItemClick: function(e, key, payload) {
+    if (this.props.onChange && this.props.selectedIndex !== key) {
+      this.props.onChange(e, key, payload);
+    }
+    if (!this.props.docked) this.close();
+  },
+
+  _onOverlayTouchTap: function() {
+    this.close();
+  },
+
+  _onWindowKeyUp: function(e) {
+    if (e.keyCode == KeyCode.ESC &&
+        !this.props.docked &&
+        this.state.open) {
+      this.close();
+    }
+  }
+
+});
+
+module.exports = LeftNav;

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

@@ -0,0 +1,42 @@
+var React = require('react');
+var Classable = require('../mixins/classable');
+
+var LinkMenuItem = React.createClass({
+
+    mixins: [Classable],
+    
+    propTypes: {
+        index: React.PropTypes.number.isRequired,
+        payload: React.PropTypes.string.isRequired,
+        text: React.PropTypes.string.isRequired,
+        target: React.PropTypes.string,
+        disabled: React.PropTypes.bool
+    },
+    
+    getDefaultProps: function() {
+        return {
+            disabled: false
+        };
+    },
+    
+    render: function() {
+        var classes = this.getClasses('mui-menu-item', {
+          'mui-is-disabled': this.props.disabled
+        });
+        var onClickHandler = (this.props.disabled) ? this._stopLink : undefined;
+        // Prevent context menu 'Open In New Tab/Window'
+        var linkAttribute = (this.props.disabled) ? 'data-href' : 'href';
+        var link = {};
+        link[linkAttribute] = this.props.payload
+        
+        return (
+            <a key={this.props.index} className={classes} {...link} target={this.props.target} onClick={onClickHandler}>{this.props.text}</a>
+        );
+    },
+    
+    _stopLink: function(event) {
+      event.preventDefault();
+    }
+});
+
+module.exports = LinkMenuItem;

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

@@ -0,0 +1,105 @@
+var React = require('react');
+var Classable = require('../mixins/classable');
+var FontIcon = require('../font-icon');
+var Toggle = require('../toggle');
+
+var Types = {
+  LINK: 'LINK',
+  SUBHEADER: 'SUBHEADER',
+  NESTED: 'NESTED'
+};
+
+var MenuItem = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    index: React.PropTypes.number.isRequired,
+    iconClassName: React.PropTypes.string,
+    iconRightClassName: React.PropTypes.string,
+    attribute: React.PropTypes.string,
+    number: React.PropTypes.string,
+    data: React.PropTypes.string,
+    toggle: React.PropTypes.bool,
+    disabled: React.PropTypes.bool,
+    onTouchTap: React.PropTypes.func,
+    onClick: React.PropTypes.func,
+    onToggle: React.PropTypes.func,
+    selected: React.PropTypes.bool
+  },
+  
+  statics: {
+    Types: Types
+  },
+
+  getDefaultProps: function() {
+    return {
+      toggle: false,
+      disabled: false
+    };
+  },
+
+  render: function() {
+    var classes = this.getClasses('mui-menu-item', {
+      'mui-is-selected': this.props.selected,
+      'mui-is-disabled': this.props.disabled
+    });
+    var icon;
+    var data;
+    var iconRight;
+    var attribute;
+    var number;
+    var toggle;
+
+    if (this.props.iconClassName) icon = <FontIcon className={'mui-menu-item-icon ' + this.props.iconClassName} />;
+    if (this.props.iconRightClassName) iconRight = <FontIcon className={'mui-menu-item-icon-right ' + this.props.iconRightClassName} />;
+    if (this.props.data) data = <span className="mui-menu-item-data">{this.props.data}</span>;
+    if (this.props.number !== undefined) number = <span className="mui-menu-item-number">{this.props.number}</span>;
+    if (this.props.attribute !== undefined) attribute = <span className="mui-menu-item-attribute">{this.props.attribute}</span>;
+    
+    if (this.props.toggle) {
+      var {
+        toggle,
+        onClick,
+        onToggle,
+        children,
+        label,
+        ...other
+      } = this.props;
+      toggle = <Toggle {...other} onToggle={this._handleToggle}/>;
+    }
+
+    return (
+      <div
+        key={this.props.index}
+        className={classes}
+        onTouchTap={this._handleTouchTap}
+        onClick={this._handleOnClick}>
+
+        {icon}
+        {this.props.children}
+        {data}
+        {attribute}
+        {number}
+        {toggle}
+        {iconRight}
+        
+      </div>
+    );
+  },
+
+  _handleTouchTap: function(e) {
+    if (!this.props.disabled && this.props.onTouchTap) this.props.onTouchTap(e, this.props.index);
+  },
+
+  _handleOnClick: function(e) {
+    if (!this.props.disabled && this.props.onClick) this.props.onClick(e, this.props.index);
+  },
+
+  _handleToggle: function(e, toggled) {
+    if (!this.props.disabled && this.props.onToggle) this.props.onToggle(e, this.props.index, toggled);
+  }
+
+});
+
+module.exports = MenuItem;

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

@@ -0,0 +1,325 @@
+var React = require('react');
+var CssEvent = require('../utils/css-event');
+var Dom = require('../utils/dom');
+var KeyLine = require('../utils/key-line');
+var Classable = require('../mixins/classable');
+var ClickAwayable = require('../mixins/click-awayable');
+var Paper = require('../paper');
+var MenuItem = require('./menu-item');
+var LinkMenuItem = require('./link-menu-item');
+var SubheaderMenuItem = require('./subheader-menu-item');
+
+/***********************
+* Nested Menu Component
+***********************/
+var NestedMenuItem = React.createClass({
+
+  mixins: [Classable, ClickAwayable],
+
+  propTypes: {
+    index: React.PropTypes.number.isRequired,
+    text: React.PropTypes.string,
+    menuItems: React.PropTypes.array.isRequired,
+    zDepth: React.PropTypes.number,
+    disabled: React.PropTypes.bool,
+    onItemClick: React.PropTypes.func,
+    onItemTap: React.PropTypes.func
+  },
+  
+  getDefaultProps: function() {
+    return {
+      disabled: false
+    };
+  },
+
+  getInitialState: function() {
+    return { open: false }
+  },
+
+  componentClickAway: function() {
+    this._closeNestedMenu();
+  },
+
+  componentDidMount: function() {
+    this._positionNestedMenu();
+  },
+
+  componentDidUpdate: function(prevProps, prevState) {
+    this._positionNestedMenu();
+  },
+
+  render: function() {
+    var classes = this.getClasses('mui-nested-menu-item', {
+      'mui-open': this.state.open,
+      'mui-is-disabled': this.props.disabled
+    });
+
+    return (
+      <div className={classes} onMouseEnter={this._openNestedMenu} onMouseLeave={this._closeNestedMenu}>
+        <MenuItem index={this.props.index} disabled={this.props.disabled} iconRightClassName="muidocs-icon-custom-arrow-drop-right" onClick={this._onParentItemClick}>
+          {this.props.text}
+        </MenuItem>
+        <Menu
+          ref="nestedMenu"
+          menuItems={this.props.menuItems}
+          onItemClick={this._onMenuItemClick}
+          onItemTap={this._onMenuItemTap}
+          hideable={true}
+          visible={this.state.open}
+          zDepth={this.props.zDepth + 1} />
+      </div>
+    );
+  },
+
+  _positionNestedMenu: function() {
+    var el = this.getDOMNode(),
+      nestedMenu = this.refs.nestedMenu.getDOMNode();
+
+    nestedMenu.style.left = el.offsetWidth + 'px';
+  },
+  
+  _openNestedMenu: function() {
+    if (!this.props.disabled) this.setState({ open: true });
+  },
+  
+  _closeNestedMenu: function() {
+    this.setState({ open: false });
+  },
+  
+  _toggleNestedMenu: function() {
+    if (!this.props.disabled) this.setState({ open: !this.state.open });
+  },
+
+  _onParentItemClick: function() {
+    this._toggleNestedMenu();
+  },
+
+  _onMenuItemClick: function(e, index, menuItem) {
+    if (this.props.onItemClick) this.props.onItemClick(e, index, menuItem);
+    this._closeNestedMenu();
+  },
+  
+  _onMenuItemTap: function(e, index, menuItem) {
+    if (this.props.onItemTap) this.props.onItemTap(e, index, menuItem);
+    this._closeNestedMenu();
+  }
+
+});
+
+
+/****************
+* Menu Component
+****************/
+var Menu = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    autoWidth: React.PropTypes.bool,
+    onItemTap: React.PropTypes.func,
+    onItemClick: React.PropTypes.func,
+    onToggleClick: React.PropTypes.func,
+    menuItems: React.PropTypes.array.isRequired,
+    selectedIndex: React.PropTypes.number,
+    hideable: React.PropTypes.bool,
+    visible: React.PropTypes.bool,
+    zDepth: React.PropTypes.number
+  },
+
+  getInitialState: function() {
+    return { nestedMenuShown: false }
+  },
+
+  getDefaultProps: function() {
+    return {
+      autoWidth: true,
+      hideable: false,
+      visible: true,
+      zDepth: 1
+    };
+  },
+
+  componentDidMount: function() {
+    var el = this.getDOMNode();
+
+    //Set the menu with
+    this._setKeyWidth(el);
+
+    //Save the initial menu height for later
+    this._initialMenuHeight = el.offsetHeight + KeyLine.Desktop.GUTTER_LESS;
+
+    //Show or Hide the menu according to visibility
+    this._renderVisibility();
+  },
+
+  componentDidUpdate: function(prevProps, prevState) {
+    if (this.props.visible !== prevProps.visible) this._renderVisibility();
+  },
+
+  render: function() {
+    var classes = this.getClasses('mui-menu', {
+      'mui-menu-hideable': this.props.hideable,
+      'mui-visible': this.props.visible
+    });
+
+    return (
+      <Paper ref="paperContainer" zDepth={this.props.zDepth} className={classes}>
+        {this._getChildren()}
+      </Paper>
+    );
+  },
+
+  _getChildren: function() {
+    var children = [],
+      menuItem,
+      itemComponent,
+      isSelected,
+      isDisabled;
+
+    //This array is used to keep track of all nested menu refs
+    this._nestedChildren = [];
+
+    for (var i=0; i < this.props.menuItems.length; i++) {
+      menuItem = this.props.menuItems[i];
+      isSelected = i === this.props.selectedIndex;
+      isDisabled = (menuItem.disabled === undefined) ? false : menuItem.disabled;
+
+      var {
+        icon,
+        data,
+        attribute,
+        number,
+        toggle,
+        onClick,
+        ...other
+      } = menuItem;
+
+      switch (menuItem.type) {
+
+        case MenuItem.Types.LINK:
+          itemComponent = (
+            <LinkMenuItem 
+              key={i}
+              index={i}
+              payload={menuItem.payload}
+              target={menuItem.target}
+              text={menuItem.text}
+              disabled={isDisabled} />
+          );
+          break;
+
+        case MenuItem.Types.SUBHEADER:
+          itemComponent = (
+            <SubheaderMenuItem 
+              key={i}
+              index={i}
+              text={menuItem.text} />
+          );
+          break;
+
+        case MenuItem.Types.NESTED:
+          itemComponent = (
+            <NestedMenuItem
+              ref={i}
+              key={i}
+              index={i}
+              text={menuItem.text}
+              disabled={isDisabled}
+              menuItems={menuItem.items}
+              zDepth={this.props.zDepth}
+              onItemClick={this._onNestedItemClick}
+              onItemTap={this._onNestedItemClick} />
+          );
+          this._nestedChildren.push(i);
+          break;
+
+        default:
+          itemComponent = (
+            <MenuItem
+              {...other}
+              selected={isSelected}
+              key={i}
+              index={i}
+              icon={menuItem.icon}
+              data={menuItem.data}
+              attribute={menuItem.attribute}
+              number={menuItem.number}
+              toggle={menuItem.toggle}
+              disabled={isDisabled}
+              onClick={this._onItemClick}
+              onTouchTap={this._onItemTap}>
+              {menuItem.text}
+            </MenuItem>
+          );
+      }
+      children.push(itemComponent);
+    }
+
+    return children;
+  },
+
+  _setKeyWidth: function(el) {
+    var menuWidth = this.props.autoWidth ?
+      KeyLine.getIncrementalDim(el.offsetWidth) + 'px' :
+      '100%';
+
+    //Update the menu width
+    Dom.withoutTransition(el, function() {
+      el.style.width = menuWidth;
+    });
+  },
+
+  _renderVisibility: function() {
+    var el;
+
+    if (this.props.hideable) {
+      el = this.getDOMNode();
+      var innerContainer = this.refs.paperContainer.getInnerContainer().getDOMNode();
+      
+      if (this.props.visible) {
+
+        //Open the menu
+        el.style.height = this._initialMenuHeight + 'px';
+
+        //Set the overflow to visible after the animation is done so
+        //that other nested menus can be shown
+        CssEvent.onTransitionEnd(el, function() {
+          //Make sure the menu is open before setting the overflow.
+          //This is to accout for fast clicks
+          if (this.props.visible) innerContainer.style.overflow = 'visible';
+        }.bind(this));
+
+      } else {
+
+        //Close the menu
+        el.style.height = '0px';
+
+        //Set the overflow to hidden so that animation works properly
+        innerContainer.style.overflow = 'hidden';
+      }
+    }
+  },
+
+  _onNestedItemClick: function(e, index, menuItem) {
+    if (this.props.onItemClick) this.props.onItemClick(e, index, menuItem);
+  },
+
+  _onNestedItemTap: function(e, index, menuItem) {
+    if (this.props.onItemTap) this.props.onItemTap(e, index, menuItem);
+  },
+
+  _onItemClick: function(e, index) {
+    if (this.props.onItemClick) this.props.onItemClick(e, index, this.props.menuItems[index]);
+  },
+
+  _onItemTap: function(e, index) {
+    if (this.props.onItemTap) this.props.onItemTap(e, index, this.props.menuItems[index]);
+  },
+
+  _onItemToggle: function(e, index, toggled) {
+    if (this.props.onItemToggle) this.props.onItemToggle(e, index, this.props.menuItems[index], toggled);
+  }
+
+});
+
+module.exports = Menu;