Skip to content

Commit

Permalink
Merge pull request #360 from mmrtnz/snackbar
Browse files Browse the repository at this point in the history 
Refractored css into js for Snackbar
  • Loading branch information
@mmrtnz
mmrtnz committed Feb 23, 2015
2 parents a2c0d88 + 10618ce commit 48572ec
Show file tree
Hide file tree
Showing 9 changed files with 251 additions and 201 deletions.
113 changes: 100 additions & 13 deletions src/js/menu-item.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
var React = require('react');
var Classable = require('./mixins/classable');
var StylePropable = require('./mixins/style-propable');
var CustomVariables = require('./styles/variables/custom-variables');
var FontIcon = require('./font-icon');
var Toggle = require('./toggle');

Expand All @@ -11,12 +12,14 @@ var Types = {

var MenuItem = React.createClass({

mixins: [Classable],
mixins: [StylePropable],

propTypes: {
index: React.PropTypes.number.isRequired,
iconClassName: React.PropTypes.string,
iconRightClassName: React.PropTypes.string,
iconStyle: React.PropTypes.object,
iconRightStyle: React.PropTypes.object,
attribute: React.PropTypes.string,
number: React.PropTypes.string,
data: React.PropTypes.string,
Expand All @@ -37,41 +40,115 @@ var MenuItem = React.createClass({
};
},

render: function() {
var classes = this.getClasses('mui-menu-item', {
'mui-is-selected': this.props.selected
getInitialState: function() {
return {
hovered: false
}
},

/** Styles */
_main: function() {
var style = this.mergeAndPrefix({
userSelect: 'none',
cursor: 'pointer',
lineHeight: CustomVariables.menuItemHeight + 'px',
paddingLeft: CustomVariables.menuItemPadding,
paddingRight: CustomVariables.menuItemPadding,
});

if (this.state.hovered) style.backgroundColor = CustomVariables.menuItemHoverColor;
if (this.props.selected) style.color = CustomVariables.menuItemSelectedTextColor;

return style;
},

_number: function() {
return {
float: 'right',
width: 24,
textAlign: 'center'
}
},

_attribute: function() {
return {
float: 'right'
}
},

_iconRight: function() {
return this.mergeStyles({
lineHeight: CustomVariables.menuItemHeight + 'px',
float: 'right'
}, this.props.iconRightStyle);
},

_icon: function () {
return this.mergeStyles({
float: 'left',
lineHeight: CustomVariables.menuItemHeight + 'px',
marginRight: CustomVariables.spacing.desktopGutter
}, this.props.iconStyle);
},

_data: function() {
return {
display: 'block',
paddingLeft: CustomVariables.spacing.desktopGutter * 2,
lineHeight: CustomVariables.menuItemDataHeight + 'px',
height: CustomVariables.menuItemDataHeight + 'px',
verticalAlign: 'top',
top: -12,
position: 'relative',
fontWeight: 300,
}
},

_toggle: function() {
return {
marginTop: ((CustomVariables.menuItemHeight - CustomVariables.radioButtonSize) / 2),
float: 'right',
width: 42,
}
},

render: function() {
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.iconClassName) icon = <FontIcon style={this._icon()} className={this.props.iconClassName} />;
if (this.props.iconRightClassName) iconRight = <FontIcon style={this._iconRight()} className={this.props.iconRightClassName} />;
if (this.props.data) data = <span style={this._data()}>{this.props.data}</span>;
if (this.props.number !== undefined) number = <span style={this._number()}>{this.props.number}</span>;
if (this.props.attribute !== undefined) attribute = <span style={this._style()}>{this.props.attribute}</span>;

if (this.props.toggle) {
var {
toggle,
onClick,
onToggle,
onMouseOver,
onMouseOut,
children,
label,
style,
...other
} = this.props;
toggle = <Toggle {...other} onToggle={this._handleToggle}/>;
toggle = <Toggle {...other} onToggle={this._handleToggle} style={this._toggle()}/>;
}

return (
<div
key={this.props.index}
className={classes}
style={this._main()}
onTouchTap={this._handleTouchTap}
onClick={this._handleOnClick}>
onClick={this._handleOnClick}
onMouseOver={this._handleMouseOver}
onMouseOut={this._handleMouseOut}>

{icon}
{this.props.children}
Expand All @@ -95,6 +172,16 @@ var MenuItem = React.createClass({

_handleToggle: function(e, toggled) {
if (this.props.onToggle) this.props.onToggle(e, this.props.index, toggled);
},

_handleMouseOver: function(e) {
this.setState({hovered: true});
if (this.props.onMouseOver) this.props.onMouseOver(e);
},

_handleMouseOut: function(e) {
this.setState({hovered: false});
if (this.props.onMouseOut) this.props.onMouseOut(e);
}

});
Expand Down
82 changes: 64 additions & 18 deletions src/js/menu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ var CssEvent = require('./utils/css-event');
var Dom = require('./utils/dom');
var KeyLine = require('./utils/key-line');
var Classable = require('./mixins/classable');
var StylePropable = require('./mixins/style-propable');
var Transitions = require('./styles/mixins/transitions');
var CustomVariables = require('./styles/variables/custom-variables');
var ClickAwayable = require('./mixins/click-awayable');
var Paper = require('./paper');
var MenuItem = require('./menu-item');
Expand All @@ -12,7 +15,7 @@ var MenuItem = require('./menu-item');
***********************/
var NestedMenuItem = React.createClass({

mixins: [Classable, ClickAwayable],
mixins: [Classable, ClickAwayable, StylePropable],

propTypes: {
index: React.PropTypes.number.isRequired,
Expand Down Expand Up @@ -40,14 +43,23 @@ var NestedMenuItem = React.createClass({
},

render: function() {
var classes = this.getClasses('mui-nested-menu-item', {
'mui-open': this.state.open
var styles = this.mergeStyles({
position: 'relative',
});

var iconCustomArrowDropRight = {
marginRight: CustomVariables.spacing.desktopGutterMini * -1,
color: CustomVariables.dropDownMenuIconColor
}

return (
<div className={classes}>
<MenuItem index={this.props.index} iconRightClassName="muidocs-icon-custom-arrow-drop-right" onClick={this._onParentItemClick}>
{this.props.text}
<div style={styles}>
<MenuItem
index={this.props.index}
iconRightStyle={iconCustomArrowDropRight}
iconRightClassName="muidocs-icon-custom-arrow-drop-right"
onClick={this._onParentItemClick}>
{this.props.text}
</MenuItem>
<Menu
ref="nestedMenu"
Expand All @@ -62,9 +74,8 @@ var NestedMenuItem = React.createClass({
},

_positionNestedMenu: function() {
var el = this.getDOMNode(),
nestedMenu = this.refs.nestedMenu.getDOMNode();

var el = this.getDOMNode();
var nestedMenu = this.refs.nestedMenu.getDOMNode();
nestedMenu.style.left = el.offsetWidth + 'px';
},

Expand All @@ -89,7 +100,7 @@ var NestedMenuItem = React.createClass({
****************/
var Menu = React.createClass({

mixins: [Classable],
mixins: [Classable, StylePropable],

propTypes: {
autoWidth: React.PropTypes.bool,
Expand Down Expand Up @@ -133,14 +144,49 @@ var Menu = React.createClass({
if (this.props.visible !== prevProps.visible) this._renderVisibility();
},


/** Styles */
_hideable: function() {
return {
opacity: (this.props.visible) ? 1 : 0,
position: 'absolute',
top: 0,
zIndex: 1,
}
},

// Main Style
_paperContainer: function() {
var styles = {
paddingTop: CustomVariables.desktopGutterMini,
paddingBottom: CustomVariables.desktopGutterMini,
backgroundColor: CustomVariables.menuBackgroundColor,
transition: Transitions.easeOut(null, 'height'),
};

if (this.props.hideable) {
this.mergeStyles(styles, {
overflow: 'hidden',
padding: 0,
});
}

return this.mergeAndPrefix(styles);
},

_subheader: function() {
return {
paddingLeft: CustomVariables.menuSubheaderPadding,
paddingRight: CustomVariables.menuSubheaderPadding,
}
},

render: function() {
var classes = this.getClasses('mui-menu', {
'mui-menu-hideable': this.props.hideable,
'mui-visible': this.props.visible
});
var styles = this._paperContainer();
if (this.props.hideable) styles = this.mergeStyles(styles, this._hideable());

return (
<Paper ref="paperContainer" zDepth={this.props.zDepth} className={classes}>
<Paper ref="paperContainer" zDepth={this.props.zDepth} style={styles}>
{this._getChildren()}
</Paper>
);
Expand Down Expand Up @@ -179,7 +225,7 @@ var Menu = React.createClass({

case MenuItem.Types.SUBHEADER:
itemComponent = (
<div key={i} index={i} className="mui-subheader">{menuItem.text}</div>
<div key={i} index={i} style={this._subheader()}>{menuItem.text}</div>
);
break;

Expand Down Expand Up @@ -236,13 +282,13 @@ var Menu = React.createClass({
_renderVisibility: function() {
var el;

if (this.props.hideable) {
if (this.props.hideable) {
el = this.getDOMNode();
var innerContainer = this.refs.paperContainer.getInnerContainer().getDOMNode();

if (this.props.visible) {

//Open the menu
el.style.transition = Transitions.easeOut();
el.style.height = this._initialMenuHeight + 'px';

//Set the overflow to visible after the animation is done so
Expand Down
Loading

0 comments on commit 48572ec

Please sign in to comment.