jc-biz-components/components/display-item/index.js

jc component library based on Antd

import React from 'react'
import classNames from 'classnames'
import { Tooltip, Form } from 'antd'
import { isNumber, isString } from '../_utils/lang'
import './style'

const FormItem = Form.Item

// todo text 支持所有类型，media.eg.
class DisplayItem extends React.PureComponent {
  static defaultProps = {
    mode: 'view', // 模式 view || edit
    labelAlign: 'left', // label对齐 left || right
    // tooltip: false, // text 是否显示tooltip(view下)
    maxLength: 30,
    expand: true, // true 是显示全部文字且显示展开收起
    label: '', // label文字
    text: '', // text <String><Number>
    labelWidth: '5' // label的宽度 支持 4，5，6，7,8
  }

  render() {
    const prefixCls = 'jc-display-item'
    const { mode, text, children, labelAlign, labelWidth, className, maxLength } = this.props

    const labelClass = `${prefixCls}-label-width-${labelWidth}`

    const classes = classNames(prefixCls, className, labelClass, {
      [`${prefixCls}-label-left`]: labelAlign === 'left',
      [`${prefixCls}-label-right`]: labelAlign === 'right'
    })

    const renderText = () => {
      if (text && (isNumber(text) || isString(text))) {
        return (
          <div className={`${prefixCls}-item-text`}>
            {text.toString().length < maxLength ? (
              <span>{text}</span>
            ) : (
              <Tooltip placement='topLeft' title={text}>
                <span style={{ cursor: 'pointer' }}>{text && text.toString().substring(0, maxLength)}...</span>
              </Tooltip>
            )}
          </div>
        )
      } else {
        return ''
      }
    }
    return (
      <FormItem className={classes} {...this.props}>
        {mode === 'view' && renderText()}
        {mode === 'edit' && <div>{children}</div>}
      </FormItem>
    )
  }
}

export default DisplayItem