# src/FormGroup.js File

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

    /**
     * 表单元素布局方式，整齐的排列一组表单元素<br/>
     *
     * 示例:
     * - 单列, 如:
     * ```code
     *     <FormGroup>
     *         <Row single>
     *             <Col>
     *                 <Input type="text" placeholder="姓名" />
     *             </Col>
     *         </Row>
     *     </FormGroup>
     * ```
     * - 多列, 如:
     * ```code
     *     <FormGroup>
     *         <Row>
     *             <Col>
     *                 <label>省</label>
     *                 <Input type="text" placeholder="省" />
     *             </Col>
     *             <Col>
     *                 <label>市</label>
     *                 <Input type="text" placeholder="市" />
     *             </Col>
     *         </Row>
     *     </FormGroup>
     * ```
     *
     * @class FormGroup
     * @module 表单组件
     * @extends Component
     * @constructor
     * @since 0.1.0
     * @demo formgroup|form-group.js {展示}
     * @show true
     * */

    export default class FormGroup extends Component{

        static propTypes = {
            /**
             * 样式前缀
             * @property classPrefix
             * @type String
             * @default 'form-group'
             * */
            classPrefix:PropTypes.string,
            /**
             * 标签tagName
             * @property componentTag
             * @type String
             * */
            componentTag:PropTypes.string
        };

        static defaultProps = {
            classPrefix:'form-group',
            componentTag:'form',
            classMapping : {}
        };

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

        renderItem(){
            let items = React.Children.map(this.props.children, (options, index)=> {

                return  React.cloneElement(options, {
                        className:classnames(
                            !options.props.single? 'ph-form-row':'',
                            options.props.className
                        )
                    });
            }, this);

            return items;
        }

        render(){
            let {componentTag:Component,className,...other} = this.props;
            return (
                <Component className={
                    classnames(
                        this.getProperty(true),
                        setPhoenixPrefix('row-no-padding'),
                        this.props.className
                    )
                } {...other}>
                    {this.renderItem() }
                </Component>
            );
        }

    }