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

kara项目移动端react组件库

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

class Cell extends Component {
  static propTypes = {
    title: node.isRequired, // 左侧的格子名称
    prefixCls: string,
    className: string,
    children: node.isRequired,
    spaceBetween: bool,
    onClick: func,
  }

  static defaultProps = {
    prefixCls: 'kara-cell',
    className: '',
    spaceBetween: false,
    onClick: () => {},
  }

  render() {
    const { title, prefixCls, className, children, spaceBetween } = this.props

    const classnames = classNames({
      [`${prefixCls}-container`]: true,
      [`${prefixCls}-space`]: spaceBetween,
    }, className)

    return (<div className={classnames}>
      <div className={`${prefixCls}-title`}>{title}</div>
      <div className={`${prefixCls}-content`} onClick={() => this.props.onClick()}>{children}</div>
    </div>)
  }
}

export default Cell