src/Row.js File

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

/**
 * 行组件<br/>
 * - 搭配Col列组件可实现自适应宽度布局。
 * - 可通过align定义项目在交叉轴上的对齐方式, 可选top、bottom、center、baseline、stretch。
 *
 * 主要属性和接口：
 * - align:项目在交叉轴上的对齐方式, 默认stretch
 * ```code
 *     <Row align="baseline">
 *         <Col>
 *             <div className='col-demo'>baseline</div>
 *         </Col>
 *         <Col>
 *             <div className='col-demo'>baseline<br />baseline</div>
 *         </Col>
 *     </Row>
 * ```
 *
 * @class Row
 * @module 布局组件
 * @extends Component
 * @constructor
 * @demo grid|grid.js {展示}
 * @since 0.1.0
 * @show true
 * */

export default class Row extends Component{

    static propTypes={
        /**
         * 样式前缀
         * @property classPrefix
         * @type String
         * @default 'row'
         * */
        classPrefix: PropTypes.string,
        /**
         * 竖直方向的排列是靠上、居中、靠下、拉伸至父容器最大高度还是基于text的baseline对齐
         * @property align
         * @type String
         * */
        align: PropTypes.string
    };

    static defaultProps = {
        classPrefix: 'row',
        classMapping : {
            'top':'top',
            'bottom':'bottom',
            'center':'center',
            'stretch':'stretch',
            'baseline':'baseline'
        }
    };

    render(){
        let  { ...others } = this.props;
        return (
            <div {...others} className={classnames(
                this.getProperty(true),
                this.props.className
            )} >
                {this.props.children}
            </div>
        );
    }
}