Skip to content

Instantly share code, notes, and snippets.

/.js
Created Oct 29, 2017

Embed
What would you like to do?
class Main extends React.component{
constructor(props){
super(props);
this.updateDimensions = this.updateDimensions.bind(this);
}
componentDidMount() {
this.updateDimensions();
window.addEventListener("resize", this.updateDimensions);
}
updateDimensions() {
if(window.innerWidth < 768) {
if(this.state.formView != "mobile"){
this.setState({
formView: "mobile",
});
}
}
else{
if(this.state.formView != "desktop"){
this.setState({
formView: "desktop",
});
}
}
}
render(){
return(
<Button fontColor={this.state.formView === "desktop" ? "grey" : "blue"} />
)
}
}
export default Main;
class Button extends React.Component {
backgroundColor = "white";
fontColor = "#4a4a4a"
activeBackgroundColor = "#ff5122";
activeFontColor = "white";
constructor(props){
super(props);
this.handleToggle = this.handleToggle.bind(this);
}
handleToggle(id,value){
if(typeof this.props.onClick === "function"){
this.props.onClick(this.props.id, this.props.value)
}
}
shouldComponentUpdate(nextProps,nextState){
if(nextProps == this.props){
return false
}else{
return true
}
}
initStyle(){
if(this.props.backgroundColor != undefined && this.props.backgroundColor != this.backgroundColor){
this.backgroundColor = this.props.backgroundColor;
}
if(this.props.fontColor != undefined && this.props.fontColor != this.fontColor){
this.fontColor = this.props.fontColor;
}
if(this.props.activeBackgroundColor != undefined && this.props.activeBackgroundColor != this.activeBackgroundColor){
this.activeBackgroundColor = this.props.activeBackgroundColor;
}
if(this.props.activeFontColor != undefined && this.props.activeFontColor != this.activeFontColor){
this.activeFontColor = this.props.activeFontColor;
}
if(this.props.backgroundColor != undefined && this.props.backgroundColor != this.backgroundColor){
this.backgroundColor = this.props.backgroundColor;
}
}
render(){
this.initStyle();
return (
<div className={this.props.id == this.props.activeToggle ? 'toggle active':'toggle inactive'} onClick={this.handleToggle}>
{this.props.value}
<style jsx>
{`
.toggle {
width: 50%;
height: 50px;
border-radius: 100px;
line-height: 50px;
float: left
}
.active{
color: ${this.activeFontColor};
background-color: ${this.activeBackgroundColor}
border-radius:100px;
}
.inactive{
cursor: pointer;
color: ${this.fontColor};
}
`}
</style>
</div>
)
}
}
export default Button;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.