@ant-design/x/lib/sources/Sources.js

Craft AI-driven interfaces effortlessly

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _icons = require("@ant-design/icons");
var _motion = _interopRequireDefault(require("@rc-component/motion"));
var _useMergedState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useMergedState"));
var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
var _antd = require("antd");
var _clsx = require("clsx");
var _react = _interopRequireDefault(require("react"));
var _useProxyImperativeHandle = _interopRequireDefault(require("../_util/hooks/use-proxy-imperative-handle"));
var _useXComponentConfig = _interopRequireDefault(require("../_util/hooks/use-x-component-config"));
var _motion2 = _interopRequireDefault(require("../_util/motion"));
var _xProvider = require("../x-provider");
var _CarouselCard = _interopRequireDefault(require("./components/CarouselCard"));
var _style = _interopRequireDefault(require("./style"));
const Sources = (props, ref) => {
  const {
    prefixCls: customizePrefixCls,
    style,
    styles = {},
    className,
    rootClassName,
    classNames = {},
    title,
    expandIconPosition = 'start',
    children,
    inline = false,
    expanded,
    defaultExpanded,
    onExpand,
    activeKey,
    items,
    popoverOverlayWidth = 300,
    ...restProps
  } = props;

  // ============================ Prefix ============================

  const {
    direction,
    getPrefixCls
  } = (0, _xProvider.useXProviderContext)();
  const prefixCls = getPrefixCls('sources', customizePrefixCls);
  const [hashId, cssVarCls] = (0, _style.default)(prefixCls);

  // ======================= Component Config =======================

  const contextConfig = (0, _useXComponentConfig.default)('sources');
  const domProps = (0, _pickAttrs.default)(restProps, {
    attr: true,
    aria: true,
    data: true
  });

  // ============================= Refs =============================
  const sourcesRef = _react.default.useRef(null);
  (0, _useProxyImperativeHandle.default)(ref, () => {
    return {
      nativeElement: sourcesRef.current
    };
  });
  const mergedCls = (0, _clsx.clsx)(prefixCls, contextConfig.className, className, rootClassName, classNames.root, hashId, cssVarCls, {
    [`${prefixCls}-inline`]: inline,
    [`${prefixCls}-rtl`]: direction === 'rtl'
  });

  // ============================  Collapsible ============================

  const [isExpand, setIsExpand] = (0, _useMergedState.default)(defaultExpanded ?? true, {
    value: expanded,
    onChange: onExpand
  });
  const collapseMotion = {
    ...(0, _motion2.default)(),
    motionAppear: false,
    leavedClassName: `${prefixCls}-content-hidden`
  };
  const ContentNode = items ? /*#__PURE__*/_react.default.createElement("ul", {
    className: `${prefixCls}-list`
  }, items.map((item, index) => /*#__PURE__*/_react.default.createElement("li", {
    key: item.key || index,
    className: `${prefixCls}-list-item`,
    onClick: () => props.onClick?.(item)
  }, /*#__PURE__*/_react.default.createElement("a", {
    className: `${prefixCls}-link`,
    href: item.url,
    target: "_blank",
    rel: "noopener noreferrer"
  }, item.icon && /*#__PURE__*/_react.default.createElement("span", {
    className: `${prefixCls}-link-icon`
  }, item.icon), /*#__PURE__*/_react.default.createElement("span", {
    className: `${prefixCls}-link-title`
  }, item.title))))) : children;
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    ref: sourcesRef
  }, domProps, {
    className: mergedCls,
    style: {
      ...contextConfig.style,
      ...contextConfig.styles.root,
      ...style,
      ...styles.root
    }
  }), inline ? /*#__PURE__*/_react.default.createElement(_antd.Popover, {
    content: /*#__PURE__*/_react.default.createElement(_CarouselCard.default, {
      className: (0, _clsx.clsx)(prefixCls, hashId, cssVarCls, classNames.content),
      style: styles.content,
      activeKey: activeKey,
      prefixCls: prefixCls,
      items: items,
      onClick: props.onClick
    }),
    open: inline ? undefined : false,
    styles: {
      container: {
        width: popoverOverlayWidth
      }
    },
    placement: "top",
    forceRender: true
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx.clsx)(prefixCls, `${prefixCls}-title-wrapper`, classNames.title),
    style: styles.title
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: `${prefixCls}-title`
  }, title))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx.clsx)(`${prefixCls}-title-wrapper`, `${prefixCls}-icon-position-${expandIconPosition}`, classNames.title),
    onClick: () => setIsExpand(!isExpand),
    style: styles.title
  }, /*#__PURE__*/_react.default.createElement(_icons.RightOutlined, {
    className: `${prefixCls}-title-down-icon`,
    rotate: isExpand ? 90 : 0
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: `${prefixCls}-title`
  }, title)), /*#__PURE__*/_react.default.createElement(_motion.default, (0, _extends2.default)({}, collapseMotion, {
    visible: isExpand
  }), ({
    className: motionClassName,
    style
  }, motionRef) => /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx.clsx)(`${prefixCls}-content`, motionClassName, classNames.content),
    ref: motionRef,
    style: {
      ...style,
      ...styles.content
    }
  }, ContentNode))));
};
const ForwardSources = /*#__PURE__*/_react.default.forwardRef(Sources);
if (process.env.NODE_ENV !== 'production') {
  ForwardSources.displayName = 'Sources';
}
var _default = exports.default = ForwardSources;