@ant-design/x/lib/conversations/index.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.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _util = require("@rc-component/util");
var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
var _antd = require("antd");
var _clsx = require("clsx");
var _react = _interopRequireDefault(require("react"));
var _useCollapsible = _interopRequireDefault(require("../_util/hooks/use-collapsible"));
var _useProxyImperativeHandle = _interopRequireDefault(require("../_util/hooks/use-proxy-imperative-handle"));
var _useShortcutKeys = _interopRequireDefault(require("../_util/hooks/use-shortcut-keys"));
var _useXComponentConfig = _interopRequireDefault(require("../_util/hooks/use-x-component-config"));
var _xProvider = require("../x-provider");
var _Creation = _interopRequireDefault(require("./Creation"));
var _GroupTitle = _interopRequireWildcard(require("./GroupTitle"));
var _useGroupable = _interopRequireDefault(require("./hooks/useGroupable"));
var _Item = _interopRequireDefault(require("./Item"));
var _style = _interopRequireDefault(require("./style"));
/**
 * @desc 会话列表组件参数
 * @descEN Props for the conversation list component
 */

const ForwardConversations = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  const {
    prefixCls: customizePrefixCls,
    shortcutKeys: customizeShortcutKeys,
    rootClassName,
    items,
    activeKey,
    defaultActiveKey,
    onActiveChange,
    menu,
    styles = {},
    classNames = {},
    groupable,
    className,
    style,
    creation,
    ...restProps
  } = props;
  const domProps = (0, _pickAttrs.default)(restProps, {
    attr: true,
    aria: true,
    data: true
  });

  // ============================= Refs =============================
  const containerRef = _react.default.useRef(null);
  (0, _useProxyImperativeHandle.default)(ref, () => {
    return {
      nativeElement: containerRef.current
    };
  });

  // ============================ ActiveKey ============================

  const [mergedActiveKey, setMergedActiveKey] = (0, _util.useControlledState)(defaultActiveKey, activeKey);

  // ============================ Groupable ============================
  const [groupList, collapsibleOptions, keyList] = (0, _useGroupable.default)(groupable, items);

  // ============================ Prefix ============================
  const {
    getPrefixCls,
    direction
  } = (0, _xProvider.useXProviderContext)();
  const prefixCls = getPrefixCls('conversations', customizePrefixCls);

  // ===================== Component Config =========================
  const contextConfig = (0, _useXComponentConfig.default)('conversations');

  // ============================ Style ============================
  const [hashId, cssVarCls] = (0, _style.default)(prefixCls);
  const mergedCls = (0, _clsx.clsx)(prefixCls, contextConfig.className, contextConfig.classNames.root, className, classNames.root, rootClassName, hashId, cssVarCls, {
    [`${prefixCls}-rtl`]: direction === 'rtl'
  });

  // ============================ Events ============================
  const onConversationItemClick = key => {
    setMergedActiveKey(key);
    onActiveChange?.(key, items?.find(item => item.key === key));
  };

  // ============================ Short Key =========================
  const [_, shortcutKeysInfo, subscribe] = (0, _useShortcutKeys.default)('conversations', customizeShortcutKeys);
  const shortKeyAction = shortcutKeyAction => {
    switch (shortcutKeyAction?.name) {
      case 'items':
        {
          const index = shortcutKeyAction?.actionKeyCodeNumber ?? shortcutKeyAction?.index;
          if (typeof index === 'number' && !keyList?.[index]?.disabled && keyList?.[index]?.key) {
            setMergedActiveKey(keyList?.[index]?.key);
            onActiveChange?.(keyList?.[index]?.key, items?.find(item => item.key === keyList?.[index]?.key));
          }
        }
        break;
      case 'creation':
        {
          if (typeof creation?.onClick === 'function' && !creation?.disabled) {
            creation.onClick();
          }
        }
        break;
    }
  };
  subscribe(shortKeyAction);

  // ============================ Item Node ============================
  const getItemNode = itemData => itemData.map((conversationInfo, conversationIndex) => {
    if (conversationInfo.type === 'divider') {
      return /*#__PURE__*/_react.default.createElement(_antd.Divider, {
        key: `key-divider-${conversationIndex}`,
        className: `${prefixCls}-divider`,
        dashed: conversationInfo.dashed
      });
    }
    const baseConversationInfo = conversationInfo;
    const {
      label: _,
      disabled: __,
      icon: ___,
      ...restInfo
    } = baseConversationInfo;
    return /*#__PURE__*/_react.default.createElement(_Item.default, (0, _extends2.default)({}, restInfo, {
      key: baseConversationInfo.key || `key-${conversationIndex}`,
      info: baseConversationInfo,
      prefixCls: prefixCls,
      direction: direction,
      className: (0, _clsx.clsx)(classNames.item, contextConfig.classNames.item, baseConversationInfo.className),
      style: {
        ...contextConfig.styles.item,
        ...styles.item,
        ...baseConversationInfo.style
      },
      menu: typeof menu === 'function' ? menu(baseConversationInfo) : menu,
      active: mergedActiveKey === baseConversationInfo.key,
      onClick: onConversationItemClick
    }));
  });

  //  ============================ Item Collapsible ============================
  const rootPrefixCls = getPrefixCls();
  const [enableCollapse, expandedKeys, onItemExpand, collapseMotion] = (0, _useCollapsible.default)(collapsibleOptions, prefixCls, rootPrefixCls);

  // ============================ Render ============================
  return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({}, domProps, {
    style: {
      ...contextConfig.style,
      ...style,
      ...contextConfig.styles.root,
      ...styles.root
    },
    className: mergedCls,
    ref: containerRef
  }), !!creation && /*#__PURE__*/_react.default.createElement(_Creation.default, (0, _extends2.default)({
    className: (0, _clsx.clsx)(contextConfig.classNames.creation, classNames.creation),
    style: {
      ...contextConfig.styles.creation,
      ...styles.creation
    },
    shortcutKeyInfo: shortcutKeysInfo?.creation,
    prefixCls: `${prefixCls}-creation`
  }, creation)), groupList.map((groupInfo, groupIndex) => {
    const itemNode = getItemNode(groupInfo.data);
    return groupInfo.enableGroup ? /*#__PURE__*/_react.default.createElement(_GroupTitle.GroupTitleContext.Provider, {
      key: groupInfo.name || `key-${groupIndex}`,
      value: {
        prefixCls,
        groupInfo,
        enableCollapse,
        expandedKeys,
        onItemExpand,
        collapseMotion
      }
    }, /*#__PURE__*/_react.default.createElement(_GroupTitle.default, {
      className: (0, _clsx.clsx)(contextConfig.classNames.group, classNames.group)
    }, /*#__PURE__*/_react.default.createElement("ul", {
      className: (0, _clsx.clsx)(`${prefixCls}-list`, {
        [`${prefixCls}-group-collapsible-list`]: groupInfo.collapsible
      }),
      style: {
        ...contextConfig.styles.group,
        ...styles.group
      }
    }, itemNode))) : itemNode;
  }));
});
const Conversations = ForwardConversations;
if (process.env.NODE_ENV !== 'production') {
  Conversations.displayName = 'Conversations';
}
Conversations.Creation = _Creation.default;
var _default = exports.default = Conversations;