cjd-parkball/src/components/panel/index.js

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

import React, { PureComponent } from 'react'
import { Row, Col, Tooltip } from 'antd'
import get from 'lodash/get'
import './index.scss'

function calcSizeByColumn (column) {
  return Math.round(24 / column)
}

function hit (...values) {
  const arr = [...values]
  let result
  for (let i = 0; i < arr.length; i += 1) {
    if (arr[i] !== undefined && arr[i] !== null) {
      result = arr[i]
      break
    }
  }

  return result
}

function calcRowByItems (children = [], column) {
  const rowLength = Math.ceil([].concat(children).length / column)
  const rows = Array.from(new Array(rowLength), (val, index) => index)
  return rows
}

export default class Panel extends PureComponent {
  static Item (props) {
    const {
      label, labelExtra, value, valueExtra, span, hasColon, align, valueItem,
    } = props

    const labelNode = () => (
      <span className="pk-panel-label pk-font-content" style={{ textAlign: align }}>
        {label}{hasColon ? ':' : null}
      </span>
    )
    const valueNode = () => (
      <span className="pk-panel-value pk-font-content">{valueItem ? valueItem(props) : value}</span>
    )
    return (
      <Col key={label + value} span={span}>
        {
          labelExtra ?
            <Tooltip placement="topRight" key={labelExtra || label} title={labelExtra || label}>
              {labelNode()}
            </Tooltip>
          : labelNode()
        }
        {
          valueExtra ?
            <Tooltip placement="topLeft" key={valueExtra || value} title={valueExtra || value}>
              {valueNode()}
            </Tooltip>
          : valueNode()
        }
      </Col>
    )
  }

  render () {
    const {
      fields = [], column = 2, hasColon = true, align = 'right', data = {}, valueItem = null,
    } = this.props
    const rows = calcRowByItems(fields, column)
    return (
      <div className="pk-panel">
        {
          rows.map((i, index) => (
            <Row key={`panel-row-${index}`} className="pk-panel-row">
              {
                fields.map((field, fieldIndex) => {
                  const {
                    valueKey, labelKey, value, label,
                  } = field
                  const props = {
                    key: fieldIndex,
                    span: calcSizeByColumn(column),
                    hasColon,
                    value: hit(get(field, valueKey), get(data, valueKey), value),
                    label: hit(get(field, labelKey), get(data, labelKey), label),
                    data,
                    valueItem,
                    align,
                    ...field,
                  }
                  if (fieldIndex >= i * column && fieldIndex < (i + 1) * column) {
                    if (field.item) {
                      if (field.item instanceof Function) {
                        return field.item(props)
                      }

                      return React.cloneElement(field.item, { props })
                    }
                    return (<Panel.Item {...props} />)
                  }
                  return null
                })
              }
            </Row>
          ))
        }
      </div>

    )
  }
}