Description.jsx

import React from 'react';
import {Tooltip} from 'antd'
import classname from 'classnames'
import _ from 'lodash'
import style from './index.less';

const ToolTipList = (props) => {
  const {title} = props
  if (_.isNil(title)) return <div/>
  if (typeof title === "object") return title
  return (
    <Tooltip title={title}>
      <span className="ellipsis_list">{title}</span>
    </Tooltip>
  )
}

const Index = (props) => {
  const {columns, dataSource = {}, data = []} = props;
  const getRowEven = (num) => {
    const rowIndex = Math.ceil(num/columns);
    return rowIndex % 2 === 0
  }
  const getChildren = (record) => {
    if (record.auto) return record.auto;
    const value = record.name && dataSource[record.name]
    if (record.render) {
      return record.render(value, dataSource)
    }
    return value
  }
  const finalData = data?.filter(item => (item?.show || _.isUndefined(item.show)))
  return (
    <ul className={style.description_ul}>
      {finalData?.map((item, index) => (
        <li style={{width: `${columns && (100/columns).toFixed(2) || 100}%`}} key={index}>
          <div
            className={classname(
              style.des_item,
              getRowEven(index + 1) ? style.des_even : style.des_odd
            )}
          >
            <span style={{flex: 1}} className={style.des_title}>
              <ToolTipList title={item.title || item.label}/>
            </span>
            <span style={{flex: 2}} className={style.des_content}>
              <ToolTipList title={getChildren(item)}/>
            </span>
          </div>
        </li>
      ))}
    </ul>
  );
};

export default Index;