Skip to content

Instantly share code, notes, and snippets.

@Mimieam
Created November 7, 2017 18:03
Show Gist options
  • Save Mimieam/b0d2829e74abd1d9063dd3c2fc0ece63 to your computer and use it in GitHub Desktop.
Save Mimieam/b0d2829e74abd1d9063dd3c2fc0ece63 to your computer and use it in GitHub Desktop.
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
import RaisedButton from 'material-ui/RaisedButton';
import ToggleButtonGroup from './ToggleButtonGroup'
...
<ToggleButtonGroup>
<RaisedButton
label="Beginner"
style={styles.customStyle}
/>
<RaisedButton
label="Intermediate"
labelPosition="before"
style={styles.anotherCustomStyle}
/>
<RaisedButton
href=""
target="_blank"
label="Expert"
style={styles.button}
icon={""}
/>
</ToggleButtonGroup>
// compatible with http://www.material-ui.com
// the radius style can be change at each button lvl
// please mention the original Gist if you find this useful, Thank you :)
const ToggledGroupStyles = {
radius: 4,
button: {
left: {
borderRadius: '4px 0px 0px 4px'
},
middle: {
borderRadius: 0
},
right: {
borderRadius: '0px 4px 4px 0px'
}
}
}
export default class ToggleButtonGroup extends Component {
onToggleButtonClick(idx, e) {
this.setState({ selectedIndex: idx })
}
constructor(props) {
super(props)
this.state = {
selectedIndex: this.props.selectedIndex || 1,
}
this.styles = ToggledGroupStyles
this.buttonType = this.props.buttonType || "primary"
}
render() {
let { children } = this.props
const newChildren = children.map((child, idx) => {
// select the right style depending on child position
let buttonStyle = (![0, children.length - 1].includes(idx)) ?
this.styles.button.middle : idx == 0 ? this.styles.button.left : this.styles.button.right
return React.cloneElement(child, {
key: idx,
primary: ((this.state.selectedIndex === idx) &&(this.buttonType=="primary") ? true : false),
secondary: ((this.state.selectedIndex === idx) &&(this.buttonType=="secondary") ? true : false),
buttonStyle: Object.assign({}, buttonStyle, child.buttonStyle),
style: Object.assign({}, buttonStyle, child.style),
onClick : this.onToggleButtonClick.bind(this, idx )
})
})
return (
<div>
{newChildren}
</div>
)
}
}
@Mimieam
Copy link
Author

Mimieam commented Nov 7, 2017

Demo 1
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment