@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
218 lines (217 loc) • 10 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TableActionsList", {
enumerable: true,
get: function() {
return TableActionsList;
}
});
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
var _jsxruntime = require("react/jsx-runtime");
var _plasmareacticons = require("@coveord/plasma-react-icons");
var _core = require("@mantine/core");
var _react = require("react");
var _ActionIcon = require("../../ActionIcon/ActionIcon.js");
var _Button = require("../../Button/Button.js");
var _InlineConfirm = require("../../InlineConfirm/InlineConfirm.js");
var _TableContext = require("../TableContext.js");
var _TableActionContext = require("./TableActionContext.js");
var defaultProps = {
label: 'More',
primaryGroupLabel: '',
icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.MoreSize16Px, {
height: 16
})
};
var TableActionsList = function TableActionsList(props) {
var getStyles = (0, _TableContext.useTableContext)().getStyles;
var _useProps = (0, _core.useProps)('PlasmaTableActionsListColumn', defaultProps, props), actions = _useProps.actions, icon = _useProps.icon, label = _useProps.label, primaryGroupLabel = _useProps.primaryGroupLabel, classNames = _useProps.classNames, styles = _useProps.styles, _vars = _useProps.vars, variant = _useProps.variant, others = _object_without_properties._(_useProps, [
"actions",
"icon",
"label",
"primaryGroupLabel",
"classNames",
"styles",
"vars",
"variant"
]);
var _useState = _sliced_to_array._((0, _react.useState)(false), 2), opened = _useState[0], setOpened = _useState[1];
var onClick = function onClick(e) {
e.preventDefault();
e.stopPropagation();
setOpened(function(prevState) {
return !prevState;
});
};
var onChange = function onChange(newOpened) {
if (!newOpened) {
setOpened(false);
}
};
var actionsGroups = actions.reduce(function(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: {}
});
var primaryActions = actionsGroups.$$primary.map(function(action) {
return action.component;
});
var confirmPrompts = actionsGroups.$$confirmPrompt.map(function(confirmPromptAction) {
return confirmPromptAction.component;
});
var secondaryActionGroups = Object.entries(actionsGroups.secondary).map(function(param) {
var _param = _sliced_to_array._(param, 2), group = _param[0], groupActions = _param[1];
return {
name: group,
actions: groupActions
};
});
if (variant === 'split') {
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_InlineConfirm.InlineConfirm, {
children: [
confirmPrompts,
/*#__PURE__*/ (0, _jsxruntime.jsx)(_TableActionContext.TableActionProvider, {
value: {
primary: true
},
children: primaryActions
}),
secondaryActionGroups.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableActionContext.TableActionProvider, {
value: {
primary: false
},
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Menu, _object_spread_props._(_object_spread._({
withinPortal: false
}, others), {
keepMounted: true,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Menu.Target, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button.Quaternary, _object_spread_props._(_object_spread._({}, getStyles('actionsTarget', {
styles: styles,
classNames: classNames
})), {
leftSection: icon,
children: label
}))
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Menu.Dropdown, _object_spread_props._(_object_spread._({}, getStyles('actionsDropdown', {
styles: styles,
classNames: classNames
})), {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ActionsGroupsMenuItems, {
classNames: classNames,
styles: styles,
actionGroups: secondaryActionGroups
})
}))
]
}))
}) : null
]
});
}
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_InlineConfirm.InlineConfirm, {
children: [
confirmPrompts,
/*#__PURE__*/ (0, _jsxruntime.jsx)(_TableActionContext.TableActionProvider, {
value: {
primary: false
},
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Menu, _object_spread_props._(_object_spread._({
opened: opened,
onChange: onChange
}, others), {
keepMounted: true,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Menu.Target, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, _object_spread_props._(_object_spread._({
label: label
}, getStyles('actionsTooltip', {
styles: styles,
classNames: classNames
})), {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionIcon.ActionIcon.Quaternary, _object_spread_props._(_object_spread._({}, getStyles('actionsTarget', {
styles: styles,
classNames: classNames
})), {
onClick: onClick,
children: icon
}))
}))
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Menu.Dropdown, _object_spread_props._(_object_spread._({}, getStyles('actionsDropdown', {
styles: styles,
classNames: classNames
})), {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ActionsGroupsMenuItems, {
classNames: classNames,
styles: styles,
actionGroups: primaryActions.length > 0 ? [
{
name: primaryGroupLabel,
actions: primaryActions
}
].concat(_to_consumable_array._(secondaryActionGroups)) : secondaryActionGroups
})
}))
]
}))
})
]
});
};
var ActionsGroupsMenuItems = function ActionsGroupsMenuItems(param) {
var styles = param.styles, classNames = param.classNames, actionGroups = param.actionGroups;
var getStyles = (0, _TableContext.useTableContext)().getStyles;
return actionGroups.map(function(param, index) {
var name = param.name, actions = param.actions;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Box, _object_spread_props._(_object_spread._({}, getStyles('actionsGroup', {
styles: styles,
classNames: classNames
})), {
children: [
actionGroups.length > 1 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Menu.Label, _object_spread_props._(_object_spread._({}, getStyles('actionsGroupLabel', {
styles: styles,
classNames: classNames
})), {
children: name
})) : null,
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, _object_spread_props._(_object_spread._({}, getStyles('actionsGroupItems', {
styles: styles,
classNames: classNames
})), {
children: actions
})),
index < actionGroups.length - 1 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Menu.Divider, _object_spread._({}, getStyles('actionsGroupDivider', {
styles: styles,
classNames: classNames
}))) : null
]
}), name);
});
};
TableActionsList.extend = function(input) {
return input;
};
//# sourceMappingURL=TableActionsList.js.map