box-ui-elements
Version:
Box UI Elements
73 lines • 3.28 kB
JavaScript
import * as React from 'react';
import { useIntl } from 'react-intl';
import { DropdownMenu, TriggerButton } from '@box/blueprint-web';
import { ApprovalTask } from '@box/blueprint-web-assets/icons/Fill';
import { Tasks } from '@box/blueprint-web-assets/icons/MediumFilled';
import messages from './messages';
import { TASK_TYPE_APPROVAL, TASK_TYPE_GENERAL } from '../../constants';
import './AddTaskMenuV2.scss';
const AddTaskMenuV2 = ({
isDisabled,
onMenuItemClick,
setAddTaskButtonRef
}) => {
const {
formatMessage
} = useIntl();
const [isOpen, setIsOpen] = React.useState(false);
const handleMenuItemClick = React.useCallback(taskType => {
// Open the modal first
onMenuItemClick(taskType);
// Then close the dropdown. We rely on onCloseAutoFocus to prevent focus restoration.
setIsOpen(false);
}, [onMenuItemClick]);
return /*#__PURE__*/React.createElement(DropdownMenu.Root, {
open: isOpen,
onOpenChange: setIsOpen
}, /*#__PURE__*/React.createElement(DropdownMenu.Trigger, null, /*#__PURE__*/React.createElement(TriggerButton, {
variant: "secondary",
disabled: isDisabled,
ref: setAddTaskButtonRef,
caretDirection: isOpen ? 'up' : 'down',
label: formatMessage(messages.tasksAddTask)
})), /*#__PURE__*/React.createElement(DropdownMenu.Content, {
align: "end",
className: "bcs-AddTaskMenu-v-two",
onCloseAutoFocus: event => {
// Prevent focus from returning to the trigger button when the menu closes.
// This allows the Modal (which was just opened) to keep focus on its input field
// without having it stolen back, which would trigger a blur validation error.
event.preventDefault();
}
}, /*#__PURE__*/React.createElement(DropdownMenu.Item, {
onClick: () => handleMenuItemClick(TASK_TYPE_GENERAL)
}, /*#__PURE__*/React.createElement("div", {
className: "bcs-AddTaskMenu-v-two-menuItem"
}, /*#__PURE__*/React.createElement("div", {
className: "bcs-AddTaskMenu-v-two-icon"
}, /*#__PURE__*/React.createElement(Tasks, {
color: "black",
width: 20,
height: 20
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: "bcs-AddTaskMenu-v-two-title"
}, formatMessage(messages.taskAddTaskGeneral)), /*#__PURE__*/React.createElement("div", {
className: "bcs-AddTaskMenu-v-two-description"
}, formatMessage(messages.taskAddTaskGeneralDescription))))), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
onClick: () => handleMenuItemClick(TASK_TYPE_APPROVAL)
}, /*#__PURE__*/React.createElement("div", {
className: "bcs-AddTaskMenu-v-two-menuItem"
}, /*#__PURE__*/React.createElement("div", {
className: "bcs-AddTaskMenu-v-two-icon"
}, /*#__PURE__*/React.createElement(ApprovalTask, {
color: "black",
width: 20,
height: 20
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: "bcs-AddTaskMenu-v-two-title"
}, formatMessage(messages.taskAddTaskApproval)), /*#__PURE__*/React.createElement("div", {
className: "bcs-AddTaskMenu-v-two-description"
}, formatMessage(messages.taskAddTaskApprovalDescription)))))));
};
export default AddTaskMenuV2;
//# sourceMappingURL=AddTaskMenuV2.js.map