src/ButtonGroup.js File

import React,{PropTypes} from 'react';
import Component from './utils/Component';
import classnames from 'classnames';

/**
 * 按钮组组件<br/>
 * - 按钮组组件配合Button组件,提供了横、竖两种排列方式, 可选justify,tacked。
 * - 可通过onButtongroupChange实现点击回调。
 *
 * 主要属性和接口：
 * - phType:是否自适应宽度或者垂直排列, 默认justify <br/>
 * 如:
 * ```code
 *     <ButtonGroup phType="tacked">
 *         <Button block>tacked1</Button>
 *         <Button block>tacked2</Button>
 *     </ButtonGroup>
 * ```
 * - onButtongroupChange:点击按钮组的回调函数。<br/>
 * ```code
 *     <ButtonGroup onButtongroupChange={function(target,html){console.log(target,html);}}>
 *         <Button>tacked1</Button>
 *         <Button>tacked2</Button>
 *     </ButtonGroup>
 * ```
 *
 * @class ButtonGroup
 * @module 基础组件
 * @extends Component
 * @constructor
 * @since 0.1.4
 * @demo buttongroup|button-group.js {展示}
 * @show true
 * */
export default class ButtonGroup extends Component{

    static propTypes={
        /**
         * 样式前缀
         * @property classPrefix
         * @type String
         * @default 'button-group'
         * */
        classPrefix: PropTypes.string,
        /**
         * 是否有自适应宽度，垂直排列等属性，取值为justify(水平排列)或者tacked(垂直排列)
         * @property phType
         * @type String
         * @default 'justify'
         * */
        phType:PropTypes.string,
        /**
         * 按钮被按下后的回调
         * @method onButtongroupChange
         * @type Function
         * */
        onButtongroupChange:PropTypes.func
    };

    static defaultProps = {
        classPrefix:'button-group',
        phType:'justify',
        componentTag:'div',
        classMapping : {
            'justify':'justify',
            'tacked':'tacked'
        }
    };

    constructor(props, context) {
        super(props, context);

        this.state = {
            active:this.props.active
        };
    }

    clickHandler(e){
        let target = e.target;
        this.props.onButtongroupChange&&this.props.onButtongroupChange(target,target.innerHTML);
        this.setState({
            active:target.innerHTML
        })
    }

    render(){
        const {componentTag:Component} = this.props;

        let options = React.Children.map(this.props.children,(option)=>{
            
            let opt = React.cloneElement(option,{
                clickHandle:this.clickHandler.bind(this),
                active:this.state.active == option.props.children
            });
            return opt;

        },this);

        return (
            <Component {...this.props} className={
                classnames(
                    this.getProperty(true),
                    'clearfix'
                )}>{options}</Component>
        );
    }
}