@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 { Dropdown, Tooltip, Typography } from 'antd';
import classnames from 'classnames';
import React, { useMemo } from 'react';
import pickAttrs from "rc-util/es/pickAttrs";
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;

  // =========================== Ellipsis ===========================
  const [inEllipsis, onEllipsis] = React.useState(false);

  // =========================== Tooltip ============================
  const [opened, setOpened] = React.useState(false);

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

  // ============================ Events ============================
  const onInternalClick = () => {
    if (!disabled && onClick) {
      onClick(info);
    }
  };
  const onOpenChange = open => {
    if (open) {
      setOpened(!open);
    }
  };

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

  const [trigger, dropdownMenu] = useMemo(() => {
    const {
      trigger,
      ...dropdownMenu
    } = menu || {};
    return [trigger, dropdownMenu];
  }, [menu]);
  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(Tooltip, {
    title: info.label,
    open: inEllipsis && opened,
    onOpenChange: setOpened,
    placement: direction === 'rtl' ? 'left' : 'right'
  }, /*#__PURE__*/React.createElement("li", _extends({}, domProps, {
    className: mergedCls,
    onClick: onInternalClick
  }), info.icon && /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-icon`
  }, info.icon), /*#__PURE__*/React.createElement(Typography.Text, {
    className: `${prefixCls}-label`,
    ellipsis: {
      onEllipsis
    }
  }, info.label), !disabled && menu && /*#__PURE__*/React.createElement(Dropdown, {
    menu: dropdownMenu,
    placement: direction === 'rtl' ? 'bottomLeft' : 'bottomRight',
    trigger: ['click'],
    disabled: disabled,
    onOpenChange: onOpenChange
  }, renderMenuTrigger(info))));
};
export default ConversationsItem;