choerodon-ui/es/list/Item.js

An enterprise-class UI design language and React-based implementation

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["prefixCls", "className", "avatar", "title", "description"],
    _excluded2 = ["prefixCls", "children", "actions", "extra", "className", "renderCheckBox"];
import React, { Children, memo, useContext } from 'react';
import classNames from 'classnames';
import { Col } from '../grid';
import ConfigContext from '../config-provider/ConfigContext';
import ListContext from './ListContext';

var ListMeta = function ListMeta(props) {
  var customizePrefixCls = props.prefixCls,
      className = props.className,
      avatar = props.avatar,
      title = props.title,
      description = props.description,
      others = _objectWithoutProperties(props, _excluded);

  var _useContext = useContext(ConfigContext),
      getPrefixCls = _useContext.getPrefixCls;

  var prefixCls = getPrefixCls('list', customizePrefixCls);
  var classString = classNames("".concat(prefixCls, "-item-meta"), className);
  var content = /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-item-meta-content")
  }, title && /*#__PURE__*/React.createElement("h4", {
    className: "".concat(prefixCls, "-item-meta-title")
  }, title), description && /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-item-meta-description")
  }, description));
  return /*#__PURE__*/React.createElement("div", _extends({}, others, {
    className: classString
  }), avatar && /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-item-meta-avatar")
  }, avatar), (title || description) && content);
};

ListMeta.displayName = 'ListMeta';
export var Meta = /*#__PURE__*/memo(ListMeta);

function getGrid(grid, t) {
  return grid[t] && Math.floor(24 / grid[t]);
}

var ListItem = function ListItem(props) {
  var _classNames;

  var _useContext2 = useContext(ListContext),
      grid = _useContext2.grid,
      getPrefixCls = _useContext2.getPrefixCls;

  var customizePrefixCls = props.prefixCls,
      children = props.children,
      actions = props.actions,
      extra = props.extra,
      className = props.className,
      renderCheckBox = props.renderCheckBox,
      others = _objectWithoutProperties(props, _excluded2);

  var prefixCls = getPrefixCls('list', customizePrefixCls);
  var classString = classNames("".concat(prefixCls, "-item"), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-selection"), renderCheckBox), _defineProperty(_classNames, "".concat(prefixCls, "-selected"), renderCheckBox && renderCheckBox.isChecked), _classNames));
  var metaContent = [];
  var otherContent = [];
  Children.forEach(children, function (element) {
    if (element && element.type && element.type === Meta) {
      metaContent.push(element);
    } else {
      otherContent.push(element);
    }
  });
  var contentClassString = classNames("".concat(prefixCls, "-item-content"), _defineProperty({}, "".concat(prefixCls, "-item-content-single"), metaContent.length < 1));
  var content = otherContent.length > 0 ? /*#__PURE__*/React.createElement("div", {
    className: contentClassString
  }, otherContent) : null;
  var actionsContent;

  if (actions && actions.length > 0) {
    var actionsContentItem = function actionsContentItem(action, i) {
      return /*#__PURE__*/React.createElement("li", {
        key: "".concat(prefixCls, "-item-action-").concat(i)
      }, action, i !== actions.length - 1 && /*#__PURE__*/React.createElement("em", {
        className: "".concat(prefixCls, "-item-action-split")
      }));
    };

    actionsContent = /*#__PURE__*/React.createElement("ul", {
      className: "".concat(prefixCls, "-item-action")
    }, actions.map(function (action, i) {
      return actionsContentItem(action, i);
    }));
  }

  var extraContent = /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-item-extra-wrap")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-item-main")
  }, metaContent, content, actionsContent), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-item-extra")
  }, extra));
  var mainContent = grid ? /*#__PURE__*/React.createElement(Col, {
    span: getGrid(grid, 'column'),
    xs: getGrid(grid, 'xs'),
    sm: getGrid(grid, 'sm'),
    md: getGrid(grid, 'md'),
    lg: getGrid(grid, 'lg'),
    xl: getGrid(grid, 'xl'),
    xxl: getGrid(grid, 'xxl')
  }, /*#__PURE__*/React.createElement("div", _extends({}, others, {
    className: classString
  }), extra && extraContent, !extra && metaContent, !extra && content, !extra && actionsContent)) : /*#__PURE__*/React.createElement("div", _extends({}, others, {
    className: classString
  }), renderCheckBox && renderCheckBox.element(), /*#__PURE__*/React.createElement(React.Fragment, null, extra && extraContent, !extra && metaContent, !extra && content, !extra && actionsContent));
  return mainContent;
};

ListItem.displayName = 'ListItem';
ListItem.Meta = Meta;
export default ListItem;
//# sourceMappingURL=Item.js.map