@ant-design/x/lib/sender/SenderHeader.js

Craft AI-driven interfaces effortlessly

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SendHeaderContext = void 0;
exports.default = SenderHeader;
var _icons = require("@ant-design/icons");
var _motion = _interopRequireDefault(require("@rc-component/motion"));
var _antd = require("antd");
var _clsx = require("clsx");
var React = _interopRequireWildcard(require("react"));
var _xProvider = require("../x-provider");
const SendHeaderContext = exports.SendHeaderContext = /*#__PURE__*/React.createContext({});
const collapseHeight = () => ({
  height: 0
});
const expandedHeight = ele => ({
  height: ele.scrollHeight
});
function SenderHeader(props) {
  const {
    title,
    onOpenChange,
    open,
    children,
    className,
    style,
    classNames: classes = {},
    styles = {},
    prefixCls: customizePrefixCls,
    closable,
    forceRender
  } = props;
  const {
    prefixCls: contextPrefixCls
  } = React.useContext(SendHeaderContext);
  const {
    direction,
    getPrefixCls
  } = (0, _xProvider.useXProviderContext)();
  const prefixCls = getPrefixCls('sender', customizePrefixCls || contextPrefixCls);
  const headerCls = `${prefixCls}-header`;
  const onOpenClick = () => {
    onOpenChange?.(!open);
  };
  return /*#__PURE__*/React.createElement(_motion.default, {
    motionEnter: true,
    motionLeave: true,
    motionName: `${headerCls}-motion`,
    leavedClassName: `${headerCls}-motion-hidden`,
    onEnterStart: collapseHeight,
    onEnterActive: expandedHeight,
    onLeaveStart: expandedHeight,
    onLeaveActive: collapseHeight,
    visible: open,
    forceRender: forceRender
  }, ({
    className: motionClassName,
    style: motionStyle
  }) => {
    return /*#__PURE__*/React.createElement("div", {
      className: (0, _clsx.clsx)(prefixCls, headerCls, motionClassName, className, {
        [`${headerCls}-rtl`]: direction === 'rtl'
      }),
      style: {
        ...motionStyle,
        ...style
      }
    }, (closable !== false || title) && /*#__PURE__*/React.createElement("div", {
      className:
      // We follow antd naming standard here.
      // So the header part is use `-header` suffix.
      // Though its little bit weird for double `-header`.
      (0, _clsx.clsx)(`${headerCls}-header`, classes.header),
      style: {
        ...styles.header
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: `${headerCls}-title`
    }, title), closable !== false && /*#__PURE__*/React.createElement("div", {
      className: `${headerCls}-close`
    }, /*#__PURE__*/React.createElement(_antd.Button, {
      type: "text",
      icon: /*#__PURE__*/React.createElement(_icons.CloseOutlined, null),
      size: "small",
      onClick: onOpenClick
    }))), children && /*#__PURE__*/React.createElement("div", {
      className: (0, _clsx.clsx)(`${headerCls}-content`, classes.content),
      style: {
        ...styles.content
      }
    }, children));
  });
}