src/Col.js File

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

/**
 * 列组件<br/>
 * - 搭配Row行组件可实现自适应宽度布局。
 * - 可通过align定义单个项目在交叉轴上的对齐方式, 可选auto、top、bottom、center。
 * - 可通过width设置单个项目宽度的百分比, 目前支持5-100之间5的倍数、33（1\3）和66(2\3)。
 * - 可通过offset设置单个项目左边外边距。
 *
 * 主要属性和接口：
 * - align:单个项目在交叉轴上的对齐方式, 默认auto <br/>
 * ```code
 *     <Row>
 *         <Col align="top">
 *             <div className="col-demo">top</div>
 *         </Col>
 *         <Col align="center">
 *             <div className="col-demo">center</div>
 *         </Col>
 *         <Col align="bottom">
 *             <div className="col-demo">bottom</div>
 *         </Col>
 *     </Row>
 * ```
 * - width:单个项目的宽度百分比 <br/>
 * ```code
 *     <Row>
 *         <Col width="15">
 *             <div className="col-demo">15</div>
 *         </Col>
 *     </Row>
 * ```
 * - offset:单个项目的偏移值,即左边外边距 <br/>
 * ```code
 *     <Row>
 *         <Col width="20" offset="10">
 *             <div className="col-demo">10</div>
 *         </Col>
 *     </Row>
 * ```
 *
 * @class Col
 * @module 布局组件
 * @extends Component
 * @constructor
 * @demo grid|grid.js {展示}
 * @since 0.1.0
 * @show true
 * */

export default class Col extends Component{

    static propTypes = {
        /**
         * 样式前缀
         * @property classPrefix
         * @type String
         * @default 'col'
         * */
        classPrefix: PropTypes.string,
        /**
         * 占100份的多少份，目前支持5-100之间5的倍数、33（1\3）和66(2\3)
         * @property width
         * @type Integer
         * */
        width: PropTypes.string,
        /**
         * 偏移多少，目前支持5-100之间5的倍数、33（1\3）和66(2\3)，默认不偏移
         * @property offset
         * @type Integer
         * */
        offset: PropTypes.string,
        /**
         * 竖直方向的排列是靠上、居中还是靠下
         * @property align
         * @type Integer
         * */
        align: React.PropTypes.oneOf(['top', 'bottom','center'])
    };

    static defaultProps = {
        classPrefix:'col',
        classMapping : {
            'top':'top',
            'bottom':'bottom',
            'center':'center'
        }
    };

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