@fle-ui/pro-layout/es/components/proCard/index.js

@fle-ui/pro-layout

import "@fle-ui/next/es/card/style";
import _Card from "@fle-ui/next/es/card";
import "@fle-ui/next/es/col/style";
import _Col from "@fle-ui/next/es/col";
import "@fle-ui/next/es/row/style";
import _Row from "@fle-ui/next/es/row";
import "@fle-ui/next/es/space/style";
import _Space from "@fle-ui/next/es/space";
import "@fle-ui/next/es/tooltip/style";
import _Tooltip from "@fle-ui/next/es/tooltip";
import "@fle-ui/next/es/tabs/style";
import _Tabs from "@fle-ui/next/es/tabs";
var _excluded = ["colSpan", "gutter", "justify", "align", "wrap", "dividertype", "spaceSize", "cardSize", "tooltip", "children", "title", "style", "headBordered", "ghost", "direction", "contentLayout"];

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { Children } from 'react';
import { QuestionCircleOutlined } from '@ant-design/icons';
import classnames from 'classnames';
import './index.less';
var TabPane = _Tabs.TabPane;

var ProCard = function ProCard(props) {
  var _classnames;

  var colSpan = props.colSpan,
      gutter = props.gutter,
      justify = props.justify,
      align = props.align,
      wrap = props.wrap,
      dividertype = props.dividertype,
      spaceSize = props.spaceSize,
      cardSize = props.cardSize,
      tooltip = props.tooltip,
      children = props.children,
      title = props.title,
      style = props.style,
      headBordered = props.headBordered,
      ghost = props.ghost,
      direction = props.direction,
      contentLayout = props.contentLayout,
      resetCardProps = _objectWithoutProperties(props, _excluded);

  var renderCardTitle = function renderCardTitle(title, tooltip) {
    if (tooltip) {
      return /*#__PURE__*/React.createElement(_Space, null, /*#__PURE__*/React.createElement("span", null, title), /*#__PURE__*/React.createElement(_Tooltip, {
        placement: "top",
        title: tooltip
      }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(QuestionCircleOutlined, null))));
    }

    return title;
  };

  var getBodyStyle = function getBodyStyle() {
    if (dividertype || ghost) {
      return {
        padding: 0
      };
    }

    return {};
  };

  var cardProps = _objectSpread(_objectSpread({}, resetCardProps), {}, {
    size: cardSize,
    title: renderCardTitle(title, tooltip),
    style: _objectSpread({}, style),
    headStyle: {
      borderBottom: headBordered ? '1px solid rgb(240, 240, 240)' : 'none'
    },
    bodyStyle: {
      padding: getBodyStyle()
    }
  });

  var containerCardProps = _objectSpread({}, cardProps);

  var rowProps = {
    gutter: gutter,
    justify: justify,
    align: align,
    wrap: wrap
  };
  var colProps = {
    span: colSpan
  };
  var prefixCls = 'pro-card';
  var containerClass = classnames(prefixCls, (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-ghost"), ghost), _defineProperty(_classnames, "".concat(prefixCls, "-").concat(contentLayout), contentLayout), _classnames));
  var classNames = classnames("".concat(prefixCls, "-wrapper"), _defineProperty({}, "".concat(prefixCls, "-").concat(direction, "-wrapper"), direction));

  var renderLayoutRow = function renderLayoutRow(rowProps, colProps, children) {
    return /*#__PURE__*/React.createElement(_Row, _extends({}, rowProps, {
      className: classNames
    }), renderLayoutCols(colProps, children));
  };

  var renderLayoutCols = function renderLayoutCols(colProps, children) {
    return Children.map(children, function (child) {
      return /*#__PURE__*/React.createElement(_Col, colProps, child);
    });
  }; // 只要在card内部进行嵌套card时才会渲染布局


  var renderCardInnerLayout = function renderCardInnerLayout(children) {
    var reactNodes = Children.toArray(children);
    var ComponentName = 'ProCard'; // 内部只要出现了procard嵌套就会开启响应式布局渲染

    var hasRenderLayout = reactNodes.some(function (reactNode) {
      var _reactNode$type = reactNode.type,
          type = _reactNode$type === void 0 ? {} : _reactNode$type;
      var displayName = type.displayName,
          name = type.name;
      return displayName === ComponentName || name === ComponentName;
    });

    if (hasRenderLayout) {
      return renderLayoutRow(rowProps, colProps, children);
    }

    return children;
  };

  return /*#__PURE__*/React.createElement(_Card, _extends({
    className: containerClass
  }, containerCardProps), renderCardInnerLayout(children));
};

ProCard.defaultProps = {
  colSpan: 24,
  gutter: 0,
  justify: 'start',
  align: 'top',
  wrap: true,
  spaceSize: 'small',
  bordered: true,
  hoverable: false,
  loading: false,
  cardSize: 'default',
  headBordered: true,
  ghost: false
};
ProCard.displayName = 'ProCard';
export default ProCard;