@hitachivantara/uikit-react-core/dist/Table/hooks/useHvSticky.js

UI Kit Core React components.

import { theme } from "@hitachivantara/uikit-styles";
import { makePropGetter, useGetLatest } from "react-table";
//#region src/Table/hooks/useHvSticky.ts
var isSticky = (value) => /left|right/i.test(value);
var getStickyValue = ({ sticky, parent }) => {
	if (isSticky(sticky)) return sticky;
	if (parent != null) {
		sticky = getStickyValue(parent);
		if (isSticky(sticky)) return sticky;
		const { columns } = parent;
		if (columns?.length > 0) {
			sticky = columns?.find((col) => col.sticky != null)?.sticky;
			if (isSticky(sticky)) return sticky;
		}
	}
};
var updateColumnAndParent = (column, props) => {
	Object.assign(column, props);
	if (column.parent != null) updateColumnAndParent(column.parent, props);
};
var visibleColumnsHook = (columns, { instance }) => {
	const toTheLeft = [];
	const toTheRight = [];
	const others = [];
	columns.forEach((column) => {
		const sticky = getStickyValue(column)?.toLowerCase();
		updateColumnAndParent(column, { sticky });
		if (sticky === "left") toTheLeft.push(column);
		else if (sticky === "right") toTheRight.push(column);
		else others.push(column);
	});
	if (others.length > 0) {
		const [firstNotSticky] = others;
		updateColumnAndParent(firstNotSticky, { isFirstNotSticky: true });
		const lastNotSticky = others[others.length - 1];
		updateColumnAndParent(lastNotSticky, { isLastNotSticky: true });
	}
	const hasLeftSticky = toTheLeft.length > 0;
	if (hasLeftSticky) {
		const lastLeftSticky = toTheLeft[toTheLeft.length - 1];
		updateColumnAndParent(lastLeftSticky, { isLastLeftSticky: true });
	}
	const hasRightSticky = toTheRight.length > 0;
	if (hasRightSticky) {
		const [firstRightSticky] = toTheRight;
		updateColumnAndParent(firstRightSticky, { isFirstRightSticky: true });
	}
	instance.hasStickyColumns = hasLeftSticky || hasRightSticky;
	return [
		...toTheLeft,
		...others,
		...toTheRight
	];
};
var calculateHeaderWidthsToTheRight = (headers, right = 0) => {
	if (!headers?.length) return;
	for (let i = headers.length - 1; i !== -1; i -= 1) {
		const header = headers[i];
		header.totalRight = right;
		const { headers: subHeaders } = header;
		if (subHeaders?.length > 0) calculateHeaderWidthsToTheRight(subHeaders, right);
		if (header.isVisible) right += header.totalWidth;
	}
};
var useInstanceHook = (instance) => {
	calculateHeaderWidthsToTheRight(instance.headers);
	const getInstance = useGetLatest(instance);
	instance.getTableHeadProps = makePropGetter(instance.getHooks().getTableHeadProps, { instance: getInstance() });
};
var getRowProps = () => ({ style: {
	display: "flex",
	flex: "1 0 auto"
} });
var getCellProps = (header, isHeaderCell) => {
	const props = { style: {
		display: "inline-flex",
		flex: `${header.totalWidth} ${header.totalMinWidth} auto`,
		alignItems: isHeaderCell ? "start" : "center",
		justifyContent: header.align,
		width: `${header.totalWidth}px`,
		minWidth: `${header.totalMinWidth}px`,
		...isHeaderCell && { backgroundColor: theme.colors.bgPage }
	} };
	if (header.sticky != null) {
		props.stickyColumn = true;
		const margin = header.sticky === "left" ? header.totalLeft : header.totalRight;
		props.style[header.sticky] = `${margin}px`;
		if (header.isLastLeftSticky) props.stickyColumnMostLeft = true;
		if (header.isFirstRightSticky) props.stickyColumnLeastRight = true;
	} else {
		if (header.isFirstNotSticky) props.style.borderLeft = 0;
		if (header.isLastNotSticky) props.style.borderRight = 0;
	}
	return props;
};
var getTablePropsHook = (props, { instance }) => {
	return [props, {
		stickyHeader: instance.stickyHeader,
		stickyColumns: instance.hasStickyColumns
	}];
};
var getTableHeadPropsHook = (props, { instance }) => {
	return [props, { stickyHeader: instance.stickyHeader }];
};
var getHeaderGroupPropsHook = (props, { instance }) => {
	return [props, instance.hasStickyColumns ? getRowProps() : {}];
};
var getHeaderPropsHook = (props, { instance, column }) => {
	return [props, instance.hasStickyColumns ? getCellProps(column, true) : {}];
};
var getRowPropsHook = (props, { instance }) => {
	return [props, instance.hasStickyColumns ? getRowProps() : {}];
};
var getCellPropsHook = (props, { instance, cell }) => {
	return [props, instance.hasStickyColumns ? getCellProps(cell.column, false) : {}];
};
var useHvTableSticky = (hooks) => {
	hooks.visibleColumns.push(visibleColumnsHook);
	hooks.useInstance.push(useInstanceHook);
	hooks.getTableProps.push(getTablePropsHook);
	hooks.getTableHeadProps = [getTableHeadPropsHook];
	hooks.getHeaderGroupProps.push(getHeaderGroupPropsHook);
	hooks.getHeaderProps.push(getHeaderPropsHook);
	hooks.getRowProps.push(getRowPropsHook);
	hooks.getCellProps.push(getCellPropsHook);
};
useHvTableSticky.pluginName = "useHvTableSticky";
//#endregion
export { useHvTableSticky };