fk-react-ui-components/lib/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 React.createElement(
            GroupButtonsContainer,
            { height: this.props.height, className: this.props.className },
            this.props.children.map((btn, index) => React.createElement(
                "button",
                { key: index, className: index === this.state.selected ? "selected" : "", onClick: this.onSelected.bind(this, index) },
                btn
            ))
        );
    }
}

export default GroupButtons;
//# sourceMappingURL=index.js.map