@atlaskit/profilecard
Version:
A React component to display a card with user information.
78 lines • 3.34 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["triggerRef", "isSelected", "testId"];
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 var ACTION_OVERFLOW_THRESHOLD = 2;
export var OverflowProfileCardButtons = function OverflowProfileCardButtons(props) {
var intl = useIntl();
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
setOpen = _useState2[1];
var actions = props.actions,
onItemClick = props.onItemClick,
fireAnalyticsWithDuration = props.fireAnalyticsWithDuration;
var numActions = actions.length + ACTION_OVERFLOW_THRESHOLD;
var onOpenChange = useCallback(function (_ref) {
var nextOpen = _ref.isOpen;
setOpen(function (prevOpen) {
if (nextOpen && !prevOpen) {
fireAnalyticsWithDuration(function (duration) {
return moreActionsClicked('user', {
duration: duration,
numActions: numActions
});
});
}
return nextOpen;
});
}, [numActions, fireAnalyticsWithDuration]);
return /*#__PURE__*/React.createElement(OverflowActionButtonsWrapper, {
testId: "profilecard-actions-overflow"
}, /*#__PURE__*/React.createElement(DropdownMenu, {
onOpenChange: onOpenChange,
placement: 'bottom-end',
trigger: function trigger(_ref2) {
var triggerRef = _ref2.triggerRef,
isSelected = _ref2.isSelected,
testId = _ref2.testId,
providedProps = _objectWithoutProperties(_ref2, _excluded);
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(function (action, index) {
return /*#__PURE__*/React.createElement(DropdownItem, {
key: action.id,
onClick: function onClick(event) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
onItemClick(action, args, event, index);
},
href: action.link
}, action.label);
}))));
};