kara-react-components-mobileweb/src/components/col/index.js

kara项目移动端react组件库

import React, { Component } from 'react'
import { node, shape, string, number } from 'prop-types'
import classNames from 'classnames'

export default class Col extends Component {
  static propTypes = {
    size: number, // 列数
    children: node.isRequired,
    style: shape(),
    className: string,
    prefixCls: string,
  }

  static defaultProps = {
    style: {},
    className: '',
    prefixCls: 'kara-col',
    size: 10,
  }

  // 根据Props中的num 去计算flex值 计算公式(10/num 按照10个格计算 最大值为10 大于10的时候 全按照flex:1处理)
  countCell = (size) => {
    if (size > 10) {
      return 10
    }
    return size
  }

  render() {
    const { children, style, prefixCls, className, size } = this.props
    const getSize = this.countCell(size)
    const classnames = classNames({
      [`${prefixCls}-${getSize}`]: true,
    }, className)

    return (<div style={style} className={classnames}>
      {children}
    </div>)
  }
}