@cainiaofe/cn-ui-charts/es/components/cn-tile/index.js

菜鸟图表组件

import React, { useMemo, useState } from 'react';
import classNames from 'classnames';
import { CnMenuButton, CnIcon } from '@alife/cn-ui';
import Title from "./title";
import "./index.scss";

/**
 * CnTile 组件 TODO
 * @param {*} props
 * @returns
 */
function CnTile(props) {
  var className = props.className,
    style = props.style,
    _props$headStyle = props.headStyle,
    headStyle = _props$headStyle === void 0 ? {} : _props$headStyle,
    _props$bodyStyle = props.bodyStyle,
    bodyStyle = _props$bodyStyle === void 0 ? {} : _props$bodyStyle,
    title = props.title,
    titleTip = props.titleTip,
    titleSlot = props.titleSlot,
    extra = props.extra,
    collapsible = props.collapsible,
    onCollapse = props.onCollapse,
    _props$defaultCollaps = props.defaultCollapsed,
    defaultCollapsed = _props$defaultCollaps === void 0 ? false : _props$defaultCollaps,
    menu = props.menu,
    children = props.children,
    _props$size = props.size,
    size = _props$size === void 0 ? 'medium' : _props$size,
    _props$border = props.border,
    border = _props$border === void 0 ? false : _props$border;
  var _useState = useState(defaultCollapsed),
    collapsed = _useState[0],
    setCollapsed = _useState[1];
  var hasToolTip = useMemo(function () {
    return menu || extra;
  }, [extra, menu]);
  var hasHead = useMemo(function () {
    return hasToolTip || title || collapsible;
  }, [collapsible, hasToolTip, title]);
  var tooltip = function tooltip() {
    if (hasToolTip) {
      return /*#__PURE__*/React.createElement("div", {
        className: "cn-tile-header-tool"
      }, /*#__PURE__*/React.createElement("div", {
        className: "right-slot"
      }, extra, menu && /*#__PURE__*/React.createElement(CnMenuButton, {
        size: "large",
        text: true,
        className: "cn-tile-header-menu",
        label: /*#__PURE__*/React.createElement(CnIcon, {
          type: "icon-menu",
          size: "small"
        })
      }, menu)));
    }
    return null;
  };

  // 头部区域，包含标题、右上角自定义内容、filter
  var head = function head() {
    if (hasHead) {
      return /*#__PURE__*/React.createElement("div", {
        className: "cn-tile-header",
        style: headStyle
      }, /*#__PURE__*/React.createElement(Title, {
        title: title,
        titleTip: titleTip,
        titleSlot: titleSlot,
        collapsible: collapsible,
        onCollapse: onCollapse,
        collapsed: collapsed,
        setCollapsed: setCollapsed
      }), tooltip());
    }
    return null;
  };
  var body = function body() {
    return /*#__PURE__*/React.createElement("div", {
      className: classNames('cn-tile-body'),
      style: bodyStyle
    }, children);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: classNames('cn-tile', {
      'cn-tile-collapsed': collapsed,
      'cn-tile-has-tooltip': hasToolTip,
      'cn-tile-no-head': !hasHead,
      'cn-tile-small': size === 'small',
      border: border,
      shadow: !border
    }, className),
    style: style
  }, head(), body());
}
export { CnTile };