Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Badge] Remove style-propable mixin #3185

Merged
merged 1 commit into from
Feb 5, 2016
Merged

[Badge] Remove style-propable mixin #3185

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 68 additions & 52 deletions src/badge.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,61 @@
import React from 'react';
import Typography from './styles/typography';
import getMuiTheme from './styles/getMuiTheme';
import StylePropable from './mixins/style-propable';

// Badge
function getStyles(props, state) {
const {
primary,
secondary,
} = props;

const {
badge,
} = state.muiTheme;

let badgeBackgroundColor;
let badgeTextColor;

if (primary) {
badgeBackgroundColor = badge.primaryColor;
badgeTextColor = badge.primaryTextColor;
} else if (secondary) {
badgeBackgroundColor = badge.secondaryColor;
badgeTextColor = badge.secondaryTextColor;
} else {
badgeBackgroundColor = badge.color;
badgeTextColor = badge.textColor;
}

const radius = 12;
const radius2x = Math.floor(2 * radius);

return {
root: {
position: 'relative',
display: 'inline-block',
padding: [radius2x + 'px', radius2x + 'px', radius + 'px', radius + 'px'].join(' '),
},
badge: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
position: 'absolute',
top: 0,
right: 0,
fontWeight: Typography.fontWeightMedium,
fontSize: radius,
width: radius2x,
height: radius2x,
borderRadius: '50%',
backgroundColor: badgeBackgroundColor,
color: badgeTextColor,
},
};
}

const Badge = React.createClass({
propTypes: {
/**
Expand Down Expand Up @@ -41,80 +93,40 @@ const Badge = React.createClass({
*/
style: React.PropTypes.object,
},

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't worry too much about this. The es6 class codmode add them automatically.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point! Thanks for reminding me. I'd say 80+% of the components I've switched so far are candidates/ready to be switched to classes using the codemod 👍

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

childContextTypes: {
muiTheme: React.PropTypes.object,
},
mixins: [StylePropable],

getDefaultProps() {
return {
primary: false,
secondary: false,
};
},

getInitialState() {
return {
muiTheme: this.context.muiTheme || getMuiTheme(),
};
},

getChildContext() {
return {
muiTheme: this.state.muiTheme,
};
},

componentWillReceiveProps(nextProps, nextContext) {
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({
muiTheme: newMuiTheme,
muiTheme: nextContext.muiTheme || this.state.muiTheme,
});
},
getStyles() {
const theme = this.state.muiTheme.badge;

const badgeBackgroundColor = this.props.primary
? theme.primaryColor
: this.props.secondary
? theme.secondaryColor
: theme.color;

const badgeTextColor = this.props.primary
? theme.primaryTextColor
: this.props.secondary
? theme.secondaryTextColor
: theme.textColor;

const radius = 12;
const radius2x = Math.floor(2 * radius);

return {
root: {
position: 'relative',
display: 'inline-block',
padding: [radius2x + 'px', radius2x + 'px', radius + 'px', radius + 'px'].join(' '),
},
badge: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
position: 'absolute',
top: 0,
right: 0,
fontWeight: Typography.fontWeightMedium,
fontSize: radius,
width: radius2x,
height: radius2x,
borderRadius: '50%',
backgroundColor: badgeBackgroundColor,
color: badgeTextColor,
},
};
},
render() {
const {
style,
Expand All @@ -124,12 +136,16 @@ const Badge = React.createClass({
...other,
} = this.props;

const styles = this.getStyles();
const {
prepareStyles,
} = this.state.muiTheme;

const styles = getStyles(this.props, this.state);

return (
<div {...other} style={this.prepareStyles(styles.root, style)}>
<div {...other} style={prepareStyles(Object.assign({}, styles.root, style))}>
{children}
<span style={this.prepareStyles(styles.badge, badgeStyle)}>
<span style={prepareStyles(Object.assign({}, styles.badge, badgeStyle))}>
{badgeContent}
</span>
</div>
Expand Down