Skip to content

Commit

Permalink
Remove style-propable from raised-button
Browse files Browse the repository at this point in the history
  • Loading branch information
@newoga
newoga committed Feb 11, 2016
1 parent ec20b4a commit 0cfbfb0
Showing 1 changed file with 109 additions and 141 deletions.
250 changes: 109 additions & 141 deletions src/raised-button.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import React from 'react';
import ReactDOM from 'react-dom';
import StylePropable from './mixins/style-propable';
import Transitions from './styles/transitions';
import ColorManipulator from './utils/color-manipulator';
import Children from './utils/children';
Expand All @@ -15,6 +13,84 @@ function validateLabel(props, propName, componentName) {
}
}

function getStyles(props, state) {
const {
baseTheme,
button,
raisedButton,
} = state.muiTheme;

const {
disabled,
disabledBackgroundColor,
disabledLabelColor,
icon,
labelPosition,
primary,
secondary,
} = props;

const amount = (primary || secondary) ? 0.4 : 0.08;

let backgroundColor = raisedButton.color;
let labelColor = raisedButton.textColor;

if (disabled) {
backgroundColor = disabledBackgroundColor || raisedButton.disabledColor;
labelColor = disabledLabelColor || raisedButton.disabledTextColor;
} else if (primary) {
backgroundColor = raisedButton.primaryColor;
labelColor = raisedButton.primaryTextColor;
} else if (secondary) {
backgroundColor = raisedButton.secondaryColor;
labelColor = raisedButton.secondaryTextColor;
}

return {
root: {
display: 'inline-block',
minWidth: props.fullWidth ? '100%' : button.minWidth,
height: button.height,
transition: Transitions.easeOut(),
},
container: {
position: 'relative',
height: '100%',
width: '100%',
padding: 0,
overflow: 'hidden',
borderRadius: 2,
transition: Transitions.easeOut(),
backgroundColor: backgroundColor,
},
label: {
position: 'relative',
opacity: 1,
fontSize: '14px',
letterSpacing: 0,
textTransform: raisedButton.textTransform || button.textTransform || 'uppercase',
fontWeight: Typography.fontWeightMedium,
margin: 0,
userSelect: 'none',
paddingLeft: icon && labelPosition !== 'before' ? 8 : baseTheme.spacing.desktopGutterLess,
paddingRight: icon && labelPosition === 'before' ? 8 : baseTheme.spacing.desktopGutterLess,
lineHeight: props.style && props.style.height || `${button.height}px`,
color: labelColor,
},
overlay: {
backgroundColor: state.hovered && !disabled && ColorManipulator.fade(labelColor, amount),
transition: Transitions.easeOut(),
top: 0,
},
overlayWhenHovered: {
},
ripple: {
color: labelColor,
opacity: !(primary || secondary) ? 0.1 : 0.16,
},
};
}

const RaisedButton = React.createClass({

propTypes: {
Expand Down Expand Up @@ -151,15 +227,10 @@ const RaisedButton = React.createClass({
muiTheme: React.PropTypes.object,
},

//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},

mixins: [
StylePropable,
],

getDefaultProps: function() {
return {
disabled: false,
Expand Down Expand Up @@ -189,107 +260,13 @@ const RaisedButton = React.createClass({

componentWillReceiveProps(nextProps, nextContext) {
let zDepth = nextProps.disabled ? 0 : 1;
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({
zDepth: zDepth,
initialZDepth: zDepth,
muiTheme: newMuiTheme,
muiTheme: nextContext.muiTheme || this.state.muiTheme,
});
},

_getBackgroundColor() {
let disabledColor = this.props.disabledBackgroundColor ? this.props.disabledBackgroundColor :
this.getTheme().disabledColor;

return this.props.disabled ? disabledColor :
this.props.backgroundColor ? this.props.backgroundColor :
this.props.primary ? this.getTheme().primaryColor :
this.props.secondary ? this.getTheme().secondaryColor :
this.getTheme().color;
},

_getLabelColor() {
let disabledColor = this.props.disabledLabelColor ? this.props.disabledLabelColor :
this.getTheme().disabledTextColor;

return this.props.disabled ? disabledColor :
this.props.labelColor ? this.props.labelColor :
this.props.primary ? this.getTheme().primaryTextColor :
this.props.secondary ? this.getTheme().secondaryTextColor :
this.getTheme().textColor;
},

getThemeButton() {
return this.state.muiTheme.button;
},

getTheme() {
return this.state.muiTheme.raisedButton;
},

getStyles() {
const {
icon,
labelPosition,
primary,
secondary,
} = this.props;

let amount = (primary || secondary) ? 0.4 : 0.08;
let styles = {
root: {
display: 'inline-block',
minWidth: this.props.fullWidth ? '100%' : this.getThemeButton().minWidth,
height: this.getThemeButton().height,
transition: Transitions.easeOut(),
},
container: {
position: 'relative',
height: '100%',
width: '100%',
padding: 0,
overflow: 'hidden',
borderRadius: 2,
transition: Transitions.easeOut(),
backgroundColor: this._getBackgroundColor(),
},
label: {
position: 'relative',
opacity: 1,
fontSize: '14px',
letterSpacing: 0,
textTransform: this.getTheme().textTransform ? this.getTheme().textTransform :
(this.getThemeButton().textTransform ? this.getThemeButton().textTransform : 'uppercase'),
fontWeight: Typography.fontWeightMedium,
margin: 0,
userSelect: 'none',
paddingLeft: this.state.muiTheme.rawTheme.spacing.desktopGutterLess,
paddingRight: this.state.muiTheme.rawTheme.spacing.desktopGutterLess,
lineHeight: (this.props.style && this.props.style.height) ?
this.props.style.height : `${this.getThemeButton().height}px`,
color: this._getLabelColor(),
},
overlay: {
transition: Transitions.easeOut(),
top: 0,
},
overlayWhenHovered: {
backgroundColor: ColorManipulator.fade(this._getLabelColor(), amount),
},
};

if (icon) {
if (labelPosition === 'before') {
styles.label.paddingRight = 8;
} else {
styles.label.paddingLeft = 8;
}
}

return styles;
},


_handleMouseDown(e) {
//only listen to left clicks
if (e.button === 0) {
Expand Down Expand Up @@ -328,15 +305,15 @@ const RaisedButton = React.createClass({
if (this.props.onTouchEnd) this.props.onTouchEnd(e);
},

_handleKeyboardFocus(e, keyboardFocused) {
_handleKeyboardFocus: (styles) => (e, keyboardFocused) => {
if (keyboardFocused && !this.props.disabled) {
this.setState({zDepth: this.state.initialZDepth + 1});
let amount = (this.props.primary || this.props.secondary) ? 0.4 : 0.08;
ReactDOM.findDOMNode(this.refs.overlay).style.backgroundColor =
ColorManipulator.fade(this.prepareStyles(this.getStyles().label, this.props.labelStyle).color, amount);
this.refs.overlay.style.backgroundColor =
ColorManipulator.fade(Object.assign({}, styles.label, this.props.labelStyle).color, amount);
} else if (!this.state.hovered) {
this.setState({zDepth: this.state.initialZDepth});
ReactDOM.findDOMNode(this.refs.overlay).style.backgroundColor = 'transparent';
this.refs.overlay.style.backgroundColor = 'transparent';
}
},

Expand All @@ -354,21 +331,13 @@ const RaisedButton = React.createClass({
...other,
} = this.props;

let styles = this.getStyles();

let labelElement;
if (label) {
labelElement = (
<span style={this.prepareStyles(styles.label, labelStyle)}>
{label}
</span>
);
}
const {
prepareStyles,
} = this.state.muiTheme;

let rippleColor = styles.label.color;
let rippleOpacity = !(primary || secondary) ? 0.1 : 0.16;
const styles = getStyles(this.props, this.state);

let buttonEventHandlers = disabled ? null : {
const buttonEventHandlers = disabled && {
onMouseDown: this._handleMouseDown,
onMouseUp: this._handleMouseUp,
onMouseLeave: this._handleMouseLeave,
Expand All @@ -378,18 +347,20 @@ const RaisedButton = React.createClass({
onKeyboardFocus: this._handleKeyboardFocus,
};

let iconCloned;

if (icon) {
iconCloned = React.cloneElement(icon, {
color: styles.label.color,
style: {
verticalAlign: 'middle',
marginLeft: labelPosition === 'before' ? 0 : 12,
marginRight: labelPosition === 'before' ? 12 : 0,
},
});
}
const labelElement = label && (
<span style={prepareStyles(Object.assign(styles.label, labelStyle))}>
{label}
</span>
);

const iconCloned = icon && React.cloneElement(icon, {
color: styles.label.color,
style: {
verticalAlign: 'middle',
marginLeft: labelPosition === 'before' ? 0 : 12,
marginRight: labelPosition === 'before' ? 12 : 0,
},
});

// Place label before or after children.
const childrenFragment = labelPosition === 'before' ?
Expand All @@ -409,26 +380,23 @@ const RaisedButton = React.createClass({
return (
<Paper
className={className}
style={this.mergeStyles(styles.root, this.props.style)}
style={Object.assign(styles.root, this.props.style)}
zDepth={this.state.zDepth}
>
<EnhancedButton
{...other}
{...buttonEventHandlers}
ref="container"
disabled={disabled}
style={this.mergeStyles(styles.container)}
focusRippleColor={rippleColor}
touchRippleColor={rippleColor}
focusRippleOpacity={rippleOpacity}
touchRippleOpacity={rippleOpacity}
style={styles.container}
focusRippleColor={styles.ripple.color}
touchRippleColor={styles.ripple.color}
focusRippleOpacity={styles.ripple.opacity}
touchRippleOpacity={styles.ripple.opacity}
>
<div
ref="overlay"
style={this.prepareStyles(
styles.overlay,
(this.state.hovered && !this.props.disabled) && styles.overlayWhenHovered
)}
style={prepareStyles(styles.overlay)}
>
{enhancedButtonChildren}
</div>
Expand Down

0 comments on commit 0cfbfb0

Please sign in to comment.