@atlaskit/profilecard
Version:
A React component to display a card with user information.
70 lines • 2.57 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React, { useCallback, useState } from 'react';
import { useIntl } from 'react-intl-next';
import Button from '@atlaskit/button/custom-theme-button';
import { IconButton } from '@atlaskit/button/new';
import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
import { fg } from '@atlaskit/platform-feature-flags';
import messages from '../../messages';
import { OverflowActionButtonsWrapper } from '../../styled/Card';
import { moreActionsClicked } from '../../util/analytics';
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(duration => moreActionsClicked('user', {
duration,
numActions
}));
}
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 fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(IconButton, _extends({
type: "button"
}, providedProps, {
ref: triggerRef,
label: intl.formatMessage(messages.profileCardMoreIconLabel),
icon: MoreIcon
})) : /*#__PURE__*/React.createElement(Button, _extends({
type: "button"
}, providedProps, {
ref: triggerRef,
iconBefore: /*#__PURE__*/React.createElement(MoreIcon, {
color: "currentColor",
spacing: "spacious",
label: intl.formatMessage(messages.profileCardMoreIconLabel)
})
}));
}
}, /*#__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
}, action.label)))));
};