@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
112 lines (111 loc) • 4.18 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const icons = require("../icons.cjs");
const setId = require("../utils/setId.cjs");
const ActionsGeneric_styles = require("./ActionsGeneric.styles.cjs");
const DropDownMenu = require("../DropDownMenu/DropDownMenu.cjs");
const IconButton = require("../IconButton/IconButton.cjs");
const Button = require("../Button/Button.cjs");
const HvActionsGeneric = React.forwardRef(function HvActionsGeneric2(props, ref) {
const {
id: idProp,
classes: classesProp,
className,
category = "secondaryGhost",
// TODO - remove and update variant default in v6
variant: variantProp,
disabled = false,
actions = [],
actionsCallback,
// TODO - remove in v6
onAction,
maxVisibleActions = Infinity,
iconOnly: iconOnlyProp,
dropdownMenuProps: dropdownMenuPropsProp,
...others
} = uikitReactUtils.useDefaultProps("HvActionsGeneric", props);
const { onClick: onClickDropdownMenu, ...dropdownMenuProps } = dropdownMenuPropsProp || {};
const variant = variantProp || category;
const { classes, cx } = ActionsGeneric_styles.useClasses(classesProp);
const handleCallback = (event, id, action) => {
actionsCallback?.(event, id, action);
onAction?.(event, action);
};
if (!Array.isArray(actions)) return React.isValidElement(actions) ? actions : null;
const renderButton = (action, idx) => {
const {
disabled: actDisabled,
id: actId,
icon,
label,
iconOnly,
...other
} = action;
const actionId = setId.setId(idProp, idx, "action", action.id);
const renderedIcon = React.isValidElement(icon) ? icon : icon?.({ isDisabled: disabled });
const commonButtonProps = {
id: actionId,
variant,
className: classes.button,
disabled: actDisabled ?? disabled,
onClick: (event) => handleCallback(event, idProp || "", action),
...other
};
const key = actionId || idx;
const isIcon = iconOnly ?? iconOnlyProp;
if (isIcon) {
return /* @__PURE__ */ jsxRuntime.jsx(IconButton.HvIconButton, { ...commonButtonProps, title: label, children: renderedIcon }, key);
}
return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { ...commonButtonProps, startIcon: renderedIcon, children: label }, key);
};
const renderActionsGrid = () => {
const actsVisible = actions.slice(0, maxVisibleActions);
const actsDropdown = actions.slice(maxVisibleActions);
const iconColor = variant === "semantic" && "textDark" || void 0;
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
actsVisible.map((action, idx) => renderButton(action, idx)),
/* @__PURE__ */ jsxRuntime.jsx(
DropDownMenu.HvDropDownMenu,
{
id: setId.setId(idProp, "menu"),
disabled,
variant,
classes: {
root: classes.dropDownMenu,
icon: classes.dropDownMenuButton,
iconSelected: classes.dropDownMenuButtonSelected
},
icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "DotsVertical", color: iconColor }),
placement: "left",
onClick: (event, action) => {
handleCallback(event, idProp || "", action);
onClickDropdownMenu?.(event, action);
},
dataList: actsDropdown,
keepOpened: false,
disablePortal: false,
...dropdownMenuProps
}
)
] });
};
const actionOverflow = actions.length > maxVisibleActions;
return /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
ref,
className: cx(
classes.root,
{ [classes.actionContainer]: actionOverflow },
className
),
...others,
children: actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx))
}
);
});
exports.actionsGenericClasses = ActionsGeneric_styles.staticClasses;
exports.HvActionsGeneric = HvActionsGeneric;