@ant-design/x/es/conversations/Item.js

Craft AI-driven interfaces effortlessly

import _extends from "@babel/runtime/helpers/esm/extends";
import { EllipsisOutlined } from '@ant-design/icons';
import pickAttrs from '@rc-component/util/lib/pickAttrs';
import { Dropdown, Typography } from 'antd';
import { clsx } from 'clsx';
import React from 'react';
const stopPropagation = e => {
  e.stopPropagation();
};
const ConversationsItem = props => {
  const {
    prefixCls,
    info,
    className,
    direction,
    onClick,
    active,
    menu,
    ...restProps
  } = props;
  const domProps = pickAttrs(restProps, {
    aria: true,
    data: true,
    attr: true
  });

  // ============================= MISC =============================
  const {
    disabled
  } = info;

  // ============================ Style =============================
  const mergedCls = clsx(className, `${prefixCls}-item`, {
    [`${prefixCls}-item-active`]: active && !disabled
  }, {
    [`${prefixCls}-item-disabled`]: disabled
  });

  // ============================ Events ============================
  const onInternalClick = () => {
    if (!disabled && onClick) {
      onClick(info.key);
    }
  };

  // ============================ Menu ============================

  const {
    trigger,
    ...dropdownMenu
  } = menu || {};
  const getPopupContainer = dropdownMenu?.getPopupContainer;
  const renderMenuTrigger = conversation => {
    const originTriggerNode = /*#__PURE__*/React.createElement(EllipsisOutlined, {
      onClick: stopPropagation,
      className: `${prefixCls}-menu-icon`
    });
    if (trigger) {
      return typeof trigger === 'function' ? trigger(conversation, {
        originNode: originTriggerNode
      }) : trigger;
    }
    return originTriggerNode;
  };

  // ============================ Render ============================
  return /*#__PURE__*/React.createElement("li", _extends({
    title: typeof info.label === 'object' ? undefined : `${info.label}`
  }, domProps, {
    className: mergedCls,
    onClick: onInternalClick
  }), info.icon && /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-icon`
  }, info.icon), /*#__PURE__*/React.createElement(Typography.Text, {
    className: `${prefixCls}-label`
  }, info.label), !disabled && menu && /*#__PURE__*/React.createElement("div", {
    onClick: stopPropagation
  }, /*#__PURE__*/React.createElement(Dropdown, {
    menu: dropdownMenu,
    placement: direction === 'rtl' ? 'bottomLeft' : 'bottomRight',
    trigger: ['click'],
    disabled: disabled,
    getPopupContainer: getPopupContainer
  }, renderMenuTrigger(info))));
};
export default ConversationsItem;