@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
78 lines (77 loc) • 2.62 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const useLabels = require("../../hooks/useLabels.cjs");
const icons = require("../../icons.cjs");
const Button = require("../../Button/Button.cjs");
const Typography = require("../../Typography/Typography.cjs");
const DEFAULT_LABELS = {
expandRowButtonAriaLabel: "Expand this row",
collapseRowButtonAriaLabel: "Collapse this row"
};
const CellWithExpandButton = ({
row,
cell,
labels: labelsProp
}) => {
const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
const rowProps = row.getToggleRowExpandedProps?.();
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
Button.HvButton,
{
icon: true,
"aria-label": row.isExpanded ? labels.collapseRowButtonAriaLabel : labels.expandRowButtonAriaLabel,
"aria-expanded": row.isExpanded,
onClick: rowProps?.onClick,
children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: row.isExpanded })
}
),
cell?.value && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "label", component: "span", children: cell.value })
] });
};
const visibleColumnsHook = (columns, { instance }) => {
if (instance.disableCreateExpandButton) {
return columns;
}
const firstDataColumnIndex = columns.findIndex(
(c) => !c.id?.startsWith("_hv_")
);
if (firstDataColumnIndex !== -1) {
const firstDataColumn = columns[firstDataColumnIndex];
if (firstDataColumn.Cell === CellWithExpandButton) return columns;
if (firstDataColumn.Cell == null) {
firstDataColumn.Cell = CellWithExpandButton;
firstDataColumn.variant = "expand";
return columns;
}
}
const expandColumn = {
id: "_hv_expand",
variant: "none",
width: 32,
// this will only work when using useHvTableSticky
// but ensures it stays left of any sticky column
sticky: "left",
Cell: CellWithExpandButton
};
const columnsCopy = [...columns];
columnsCopy.splice(
firstDataColumnIndex !== -1 ? firstDataColumnIndex : 0,
0,
expandColumn
);
return columnsCopy;
};
const getRowPropsHook = (props, { row }) => {
const nextProps = {
expanded: row.isExpanded
};
return [props, nextProps];
};
const useHvRowExpand = (hooks) => {
hooks.visibleColumns.push(visibleColumnsHook);
hooks.getRowProps.push(getRowPropsHook);
};
useHvRowExpand.pluginName = "useHvRowExpand";
exports.useHvRowExpand = useHvRowExpand;