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

kara项目移动端react组件库

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

class Row extends Component {
  static propTypes = {
    children: node.isRequired,
    style: shape(),
    type: string,
    className: string,
    prefixCls: string,
    direction: string,
  };

  static defaultProps = {
    style: {},
    type: 'flex',
    className: '',
    prefixCls: 'kara-row',
    direction: 'row',
  };

  render() {
    const { children, style, type, prefixCls, className, direction } = this.props
    const classnames = classNames({
      [`${prefixCls}-${type}`]: type,
      [`${prefixCls}-${type}-${direction}`]: type && direction,
    }, className)
    const cols = Children.map(children, (col: React.createElement) => {
      if (!col) {
        return null
      }
      if (col.props) {
        return cloneElement(col)
      }
      return col
    })

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

export default Row