@activecollab/components
Version:
ActiveCollab Components
119 lines (118 loc) • 6.14 kB
JavaScript
import React, { useCallback, useState } from "react";
import styled from "styled-components";
import { Checkbox } from "../../components/Checkbox";
import { IconButton } from "../../components/IconButton";
import { ArrowRightIcon, CopyIcon, DuplicateIcon, EditIcon, RecurringCheckmarkIcon, TaskListCompleteIcon, TrashIcon, TreeDotsIcon } from "../../components/Icons";
import { List, ListItem, ListSeparator } from "../../components/List";
import { Menu } from "../../components/Menu";
import { Tooltip } from "../../components/Tooltip";
/* Task three-dot options menu — same component as the real TaskItem
(Menu in "normal" mode = 260px, List/ListItem + TreeDots target), shared by
the List view and Column view presentations. Spacing is styled-components
(this Storybook has no runtime Tailwind). Clicks are intentionally no-ops. */
const StyledTaskMenu = styled.div.withConfig({
displayName: "TaskOptionsMenu__StyledTaskMenu",
componentId: "sc-1hrykzg-0"
})([".menu-list{padding:8px 0;}.menu-item{justify-content:space-between;}.menu-item .label{min-width:0;padding-right:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.menu-bottom{display:flex;justify-content:space-between;padding:0 16px;margin:16px 0 12px;}"]);
const MENU_PICKER_ITEMS = ["Task List", "Assignees", "Due Date", "Label", "Estimate"];
export const TaskOptionsMenu = _ref => {
let targetClassName = _ref.targetClassName,
size = _ref.size;
const _useState = useState(false),
open = _useState[0],
setOpen = _useState[1];
const handleOpen = useCallback(() => setOpen(true), []);
const handleClose = useCallback(() => setOpen(false), []);
const triggerClassName = [targetClassName, open ? "open" : ""].filter(Boolean).join(" ") || undefined;
return /*#__PURE__*/React.createElement(Menu, {
open: open,
onOpen: handleOpen,
onClose: handleClose,
position: "bottom-end",
target: /*#__PURE__*/React.createElement(IconButton, {
type: "button",
variant: "text gray",
size: size,
className: triggerClassName,
active: open
}, /*#__PURE__*/React.createElement(TreeDotsIcon, null))
}, /*#__PURE__*/React.createElement(StyledTaskMenu, null, /*#__PURE__*/React.createElement(List, {
className: "menu-list",
tabIndex: 0
}, MENU_PICKER_ITEMS.map(name => /*#__PURE__*/React.createElement(ListItem, {
key: name,
className: "menu-item"
}, /*#__PURE__*/React.createElement("div", {
className: "label"
}, name), /*#__PURE__*/React.createElement(ArrowRightIcon, null))), /*#__PURE__*/React.createElement(ListSeparator, null), /*#__PURE__*/React.createElement(ListItem, {
className: "menu-item"
}, /*#__PURE__*/React.createElement("div", {
className: "label"
}, "Hidden from clients"), /*#__PURE__*/React.createElement(Checkbox, {
id: "task-menu-hidden-from-clients",
onChange: () => undefined
})), /*#__PURE__*/React.createElement(ListItem, {
className: "menu-item"
}, /*#__PURE__*/React.createElement("div", {
className: "label"
}, "High priority"), /*#__PURE__*/React.createElement(Checkbox, {
id: "task-menu-high-priority",
onChange: () => undefined
})), /*#__PURE__*/React.createElement(ListSeparator, null), /*#__PURE__*/React.createElement("div", {
className: "menu-bottom"
}, /*#__PURE__*/React.createElement(Tooltip, {
title: "Edit"
}, /*#__PURE__*/React.createElement(IconButton, {
type: "button",
variant: "text gray"
}, /*#__PURE__*/React.createElement(EditIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
title: "Duplicate"
}, /*#__PURE__*/React.createElement(IconButton, {
type: "button",
variant: "text gray"
}, /*#__PURE__*/React.createElement(DuplicateIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
title: "Create Recurring Task"
}, /*#__PURE__*/React.createElement(IconButton, {
type: "button",
variant: "text gray"
}, /*#__PURE__*/React.createElement(RecurringCheckmarkIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
title: "Delete"
}, /*#__PURE__*/React.createElement(IconButton, {
type: "button",
variant: "text gray"
}, /*#__PURE__*/React.createElement(TrashIcon, null)))))));
};
TaskOptionsMenu.displayName = "TaskOptionsMenu";
/* Task-LIST three-dot menu (Menu + List with leading-icon items) — same
options as the real TaskListOptions. Shared by List & Column views.
Clicks are intentionally no-ops. */
export const TaskListOptionsMenu = _ref2 => {
let targetClassName = _ref2.targetClassName,
size = _ref2.size;
const _useState2 = useState(false),
open = _useState2[0],
setOpen = _useState2[1];
const handleOpen = useCallback(() => setOpen(true), []);
const handleClose = useCallback(() => setOpen(false), []);
const triggerClassName = [targetClassName, open ? "open" : ""].filter(Boolean).join(" ") || undefined;
return /*#__PURE__*/React.createElement(Menu, {
open: open,
onOpen: handleOpen,
onClose: handleClose,
position: "bottom-end",
target: /*#__PURE__*/React.createElement(IconButton, {
type: "button",
variant: "text gray",
size: size,
className: triggerClassName,
active: open
}, /*#__PURE__*/React.createElement(TreeDotsIcon, null))
}, /*#__PURE__*/React.createElement(List, {
style: {
padding: "8px 0"
},
tabIndex: -1
}, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(EditIcon, null), "Rename"), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(DuplicateIcon, null), "Duplicate"), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(CopyIcon, null), "Move/Copy to Project"), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(TaskListCompleteIcon, null), "Complete"), /*#__PURE__*/React.createElement(ListSeparator, null), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(TrashIcon, null), "Delete")));
};
TaskListOptionsMenu.displayName = "TaskListOptionsMenu";
//# sourceMappingURL=TaskOptionsMenu.js.map