@atlaskit/profilecard/dist/es2019/components/User/OverflowProfileCardButtons.js

A React component to display a card with user information.

import _extends from "@babel/runtime/helpers/extends";
import React, { useCallback, useState } from 'react';
import { useIntl } from 'react-intl-next';
import { IconButton } from '@atlaskit/button/new';
import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
import MoreIcon from '@atlaskit/icon/core/show-more-horizontal';
import { fg } from '@atlaskit/platform-feature-flags';
import messages from '../../messages';
import { OverflowActionButtonsWrapper } from '../../styled/Card';
import { PACKAGE_META_DATA } from '../../util/analytics';
import { getPageTime } from '../../util/performance';
export const ACTION_OVERFLOW_THRESHOLD = 2;
export const OverflowProfileCardButtons = props => {
  const intl = useIntl();
  const [, setOpen] = useState(false);
  const {
    actions,
    onItemClick,
    fireAnalyticsWithDuration
  } = props;
  const numActions = actions.length + ACTION_OVERFLOW_THRESHOLD;
  const onOpenChange = useCallback(({
    isOpen: nextOpen
  }) => {
    setOpen(prevOpen => {
      if (nextOpen && !prevOpen) {
        fireAnalyticsWithDuration('ui.profilecard.clicked.moreActions', duration => ({
          duration,
          numActions,
          firedAt: Math.round(getPageTime()),
          ...PACKAGE_META_DATA
        }));
      }
      return nextOpen;
    });
  }, [numActions, fireAnalyticsWithDuration]);
  return /*#__PURE__*/React.createElement(OverflowActionButtonsWrapper, {
    testId: "profilecard-actions-overflow"
  }, /*#__PURE__*/React.createElement(DropdownMenu, {
    onOpenChange: onOpenChange,
    placement: 'bottom-end',
    trigger: ({
      triggerRef,
      isSelected,
      testId,
      ...providedProps
    }) => {
      return /*#__PURE__*/React.createElement(IconButton, _extends({
        type: "button"
      }, providedProps, {
        ref: triggerRef,
        label: fg('jfp_a11y_team_profile_card_actions_label') ? intl.formatMessage(messages.profileCardMoreIconLabelWithName, {
          fullName: props.fullName
        }) : intl.formatMessage(messages.profileCardMoreIconLabel),
        icon: MoreIcon
      }));
    }
  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, actions.map((action, index) => /*#__PURE__*/React.createElement(DropdownItem, {
    key: action.id,
    onClick: (event, ...args) => {
      onItemClick(action, args, event, index);
    },
    href: action.link,
    target: action.target
  }, action.label)))));
};