fk-react-ui-components/components/GroupButtons/index.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

/**
 * Created by manoraj.k on 17/08/17.
 */
import React from "react";
import styled from "styled-components";
import {GroupButtonsContainer} from "./styles/GroupButtons"

class GroupButtons extends React.Component {
    constructor() {
        super();
        this.state = {
            selected: 0
        }
    }
    onSelected(index) {
        this.setState({selected: index})
        this.props.onButtonClick && this.props.onButtonClick(index);
    }
    componentWillMount(){
        if(this.props.selected !== undefined) {
            this.setState({selected: this.props.selected});
        } else {
            this.setState({selected: 0});
        }
    }

    componentWillReceiveProps(nextProps) {
        if((nextProps.selected !== undefined) && (nextProps.selected !== this.state.selected)) {
            this.setState({selected: nextProps.selected})
        }
    }

    render() {
        return (
            <GroupButtonsContainer height={this.props.height} className={this.props.className}>
                {this.props.children.map((btn, index) => <button key={index} className={(index === this.state.selected) ? "selected" : ""} onClick={this.onSelected.bind(this, index)}>{btn}</button>)}
            </GroupButtonsContainer>
        )
    }
}

export default GroupButtons