@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
189 lines (188 loc) • 7.71 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { MoreSize16Px } from '@coveord/plasma-react-icons';
import { ActionIcon, Box, Button, Menu, Tooltip, useProps } from '@mantine/core';
import { useState } from 'react';
import { InlineConfirm } from '../../inline-confirm';
import { useTableContext } from '../TableContext';
import { TableActionProvider } from './TableActionContext';
const defaultProps = {
label: 'More',
primaryGroupLabel: '',
icon: /*#__PURE__*/ _jsx(MoreSize16Px, {
height: 16
})
};
export const TableActionsList = (props)=>{
const { getStyles } = useTableContext();
const { actions, icon, label, primaryGroupLabel, classNames, styles, vars: _vars, variant, ...others } = useProps('PlasmaTableActionsListColumn', defaultProps, props);
const [opened, setOpened] = useState(false);
const onClick = (e)=>{
e.preventDefault();
e.stopPropagation();
setOpened((prevState)=>!prevState);
};
const onChange = (newOpened)=>{
if (!newOpened) {
setOpened(false);
}
};
const actionsGroups = actions.reduce((acc, action)=>{
if (action.group === '$$primary') {
acc.$$primary.push(action);
} else if (action.group === '$$confirmPrompt') {
acc.$$confirmPrompt.push(action);
} else {
if (acc.secondary[action.group]) {
acc.secondary[action.group].push(action.component);
} else {
acc.secondary[action.group] = [
action.component
];
}
}
return acc;
}, {
$$primary: [],
$$confirmPrompt: [],
secondary: {}
});
const primaryActions = actionsGroups.$$primary.map((action)=>action.component);
const confirmPrompts = actionsGroups.$$confirmPrompt.map((confirmPromptAction)=>confirmPromptAction.component);
const secondaryActionGroups = Object.entries(actionsGroups.secondary).map(([group, groupActions])=>({
name: group,
actions: groupActions
}));
if (variant === 'split') {
return /*#__PURE__*/ _jsxs(InlineConfirm, {
children: [
confirmPrompts,
/*#__PURE__*/ _jsx(TableActionProvider, {
value: {
primary: true
},
children: primaryActions
}),
secondaryActionGroups.length > 0 ? /*#__PURE__*/ _jsx(TableActionProvider, {
value: {
primary: false
},
children: /*#__PURE__*/ _jsxs(Menu, {
withinPortal: false,
...others,
keepMounted: true,
children: [
/*#__PURE__*/ _jsx(Menu.Target, {
children: /*#__PURE__*/ _jsx(Button, {
...getStyles('actionsTarget', {
styles,
classNames
}),
variant: "subtle",
leftSection: icon,
children: label
})
}),
/*#__PURE__*/ _jsx(Menu.Dropdown, {
...getStyles('actionsDropdown', {
styles,
classNames
}),
children: /*#__PURE__*/ _jsx(ActionsGroupsMenuItems, {
classNames: classNames,
styles: styles,
actionGroups: secondaryActionGroups
})
})
]
})
}) : null
]
});
}
return /*#__PURE__*/ _jsxs(InlineConfirm, {
children: [
confirmPrompts,
/*#__PURE__*/ _jsx(TableActionProvider, {
value: {
primary: false
},
children: /*#__PURE__*/ _jsxs(Menu, {
opened: opened,
onChange: onChange,
...others,
keepMounted: true,
children: [
/*#__PURE__*/ _jsx(Menu.Target, {
children: /*#__PURE__*/ _jsx(Tooltip, {
label: label,
...getStyles('actionsTooltip', {
styles,
classNames
}),
children: /*#__PURE__*/ _jsx(ActionIcon, {
...getStyles('actionsTarget', {
styles,
classNames
}),
onClick: onClick,
variant: "subtle",
children: icon
})
})
}),
/*#__PURE__*/ _jsx(Menu.Dropdown, {
...getStyles('actionsDropdown', {
styles,
classNames
}),
children: /*#__PURE__*/ _jsx(ActionsGroupsMenuItems, {
classNames: classNames,
styles: styles,
actionGroups: primaryActions.length > 0 ? [
{
name: primaryGroupLabel,
actions: primaryActions
},
...secondaryActionGroups
] : secondaryActionGroups
})
})
]
})
})
]
});
};
const ActionsGroupsMenuItems = ({ styles, classNames, actionGroups })=>{
const { getStyles } = useTableContext();
return actionGroups.map(({ name, actions }, index)=>/*#__PURE__*/ _jsxs(Box, {
...getStyles('actionsGroup', {
styles,
classNames
}),
children: [
actionGroups.length > 1 ? /*#__PURE__*/ _jsx(Menu.Label, {
...getStyles('actionsGroupLabel', {
styles,
classNames
}),
children: name
}) : null,
/*#__PURE__*/ _jsx(Box, {
...getStyles('actionsGroupItems', {
styles,
classNames
}),
children: actions
}),
index < actionGroups.length - 1 ? /*#__PURE__*/ _jsx(Menu.Divider, {
...getStyles('actionsGroupDivider', {
styles,
classNames
})
}) : null
]
}, name));
};
TableActionsList.extend = (input)=>input;
//# sourceMappingURL=TableActionsList.js.map