@jannie-shao/components-antd4/es/inline-list/index.js

基于 Antd 4 的组件封装

import "antd/es/card/style";
import _Card from "antd/es/card";
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { rootPrefix } from "../style/config";
var prefix = rootPrefix + "-inline-list";
var InlineList = function InlineList(_ref) {
  var _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    columns = _ref.columns,
    columnsMore = _ref.columnsMore,
    dataSource = _ref.dataSource;
  var makeEle = function makeEle(items) {
    return items.map(function (item) {
      // 校验当前场景，是否需要展示信息
      if (item.checkShow && !item.checkShow(dataSource)) {
        return null;
      }
      var val = dataSource[item.dataIndex];
      if (item.render) {
        val = item.render(val, dataSource);
      }
      // 校验值为空时，是否需要展示信息
      if (item.hideEmpty && !val) {
        return null;
      }
      return /*#__PURE__*/React.createElement("div", {
        key: item.dataIndex,
        className: prefix + "-item"
      }, /*#__PURE__*/React.createElement("div", {
        className: prefix + "-item-key"
      }, item.title, " :"), /*#__PURE__*/React.createElement("div", {
        className: prefix + "-item-value"
      }, val));
    });
  };
  return /*#__PURE__*/React.createElement(_Card, {
    className: classnames(prefix, className)
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + "-info"
  }, makeEle(columns)), /*#__PURE__*/React.createElement("div", {
    className: prefix + "-more"
  }, makeEle(columnsMore)));
};
InlineList.propTypes = {
  columns: PropTypes.array,
  columnsMore: PropTypes.array,
  dataSource: PropTypes.object
};
InlineList.defaultProps = {
  columns: [],
  columnsMore: [],
  dataSource: {}
};
export default InlineList;