src/grid/Row.js File

import React from 'react'
import PropTypes from 'prop-types'
import Component from '../utils/Component'
import classnames from 'classnames'
import Logger from '../utils/logger'

import '../style'
import 'phoenix-styles/less/modules/grid.less'

/**
 * 行组件<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'
        }
    }

    constructor(props, context) {
        super(props, context);
        new Logger('Row');
    }

    renderRow(){
        let {className, children} = this.props

        return (
            <div {...this.otherProps} className={classnames(
                this.getProperty(true),
                className
            )} >
                {children}
            </div>
        )
    }

    render(){
        return this.renderRow()
    }
}