@ganpatiinfo/gids-web-dom-reference 11.0.0 → 13.0.0

package/src/components/GidsTable/GidsTable.ts

@@ -0,0 +1,203 @@
+import {
+	GidsTableEntryTypographyStyle,
+	GidsTableWebProps,
+	GidsTableWebUtils,
+	isValidChildren,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+import { HtmlInputAttributes } from '../GidsInput/GidsInput';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import {
+	GidsInputStatus,
+	GidsTableActionEvent,
+	GidsTableToolbarSettings,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+	GidsTableToolbarDom,
+	GidsTableToolbarDomProps,
+} from '../GidsTableToolbar/GidsTableToolbar';
+import {
+	GidsTableHeaderActionBaseEvent,
+	GidsTableHeaderDom,
+} from '../GidsTableHeader/GidsTableHeader';
+import {
+	GidsTableBodyActionBaseEvent,
+	GidsTableBodyDom,
+} from '../GidsTableBody/GidsTableBody';
+
+const {
+	getGidsTableClassNames,
+	getCustomisedTableHeaderEntries,
+	getTableBodyBorder,
+} = GidsTableWebUtils;
+
+export type GidsTableToolbarBaseSettings = GidsTableToolbarSettings<
+	DomChildren,
+	Event,
+	Element,
+	HtmlInputAttributes,
+	GidsInputStatus
+> &
+	Pick<
+		GidsTableToolbarDomProps,
+		'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'onGidsSearchBarClear'
+	>;
+
+type GidsTableBaseWebProps = Omit<
+	GidsTableWebProps<
+		DomChildren,
+		GidsTableEntryTypographyStyle,
+		IconName,
+		IconAppearance,
+		DomChildren,
+		Event,
+		Element,
+		HtmlInputAttributes
+	>,
+	'toolbarSettings'
+> & {
+	toolbarSettings?: GidsTableToolbarBaseSettings;
+};
+
+type GidsTableActionBaseEvent = GidsTableActionEvent<
+	Event,
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+export interface GidsTableDomProps extends GidsTableBaseWebProps {
+	extraClasses?: string;
+	onTableAction?: (event: GidsTableActionBaseEvent) => void;
+}
+
+export const GidsTableDom = ({
+	toolbar,
+	toolbarChildren,
+	children,
+	headerItems,
+	bodyContent,
+	isHeaderVisible,
+	isToolbarVisible,
+	bodySettings,
+	toolbarSettings,
+	headerSettings,
+	tableBorders,
+	tableBorderRadius,
+	tableBodyMaxHeight = 200,
+	horizontalScroll = false,
+	onTableAction,
+	extraClasses,
+}: GidsTableDomProps): HTMLDivElement => {
+	const tableDiv = document.createElement('div');
+
+	tableDiv.className = getGidsTableClassNames(
+		{ tableBorders, tableBorderRadius },
+		extraClasses,
+	);
+
+	/*
+	 * Toolbar
+	 */
+	if (isValidChildren(toolbar)) {
+		appendAsChildren(tableDiv, toolbar);
+	} else if (isToolbarVisible) {
+		tableDiv.append(
+			GidsTableToolbarDom({
+				...toolbarSettings,
+				children: toolbarChildren as Element,
+			}),
+		);
+	}
+
+	/*
+	 * Scroll container
+	 */
+	const tableScrollContainer = document.createElement('div');
+
+	tableScrollContainer.className = [
+		'gids-table__scroll-container',
+		horizontalScroll ? 'gids-table__scroll-container--horizontal-scroll' : '',
+	]
+		.filter(Boolean)
+		.join(' ');
+
+	if (tableBodyMaxHeight) {
+		tableScrollContainer.style.maxHeight = `${tableBodyMaxHeight}px`;
+	}
+
+	/*
+	 * Table
+	 */
+	const table = document.createElement('table');
+
+	table.className = 'gids-table--main-table';
+
+	/*
+	 * Custom children
+	 */
+	if (isValidChildren(children)) {
+		appendAsChildren(table, children);
+	} else {
+		function onActionBtnClick(
+			event: GidsTableHeaderActionBaseEvent | GidsTableBodyActionBaseEvent,
+		) {
+			if (onTableAction) {
+				onTableAction({
+					...event,
+					details: {
+						...event.details,
+						columnIndex: event?.details?.entryIndex,
+					},
+				});
+			}
+		}
+
+		/*
+		 * Header
+		 */
+		if (isHeaderVisible && headerItems && headerItems.length > 0) {
+			table.append(
+				GidsTableHeaderDom({
+					...headerSettings,
+					headerItems: getCustomisedTableHeaderEntries({
+						headerItems,
+						tableBorders,
+					}),
+					onHeaderAction: onActionBtnClick,
+				}),
+			);
+		}
+
+		/*
+		 * Body
+		 */
+		if (bodyContent && bodyContent.length > 0) {
+			table.append(
+				GidsTableBodyDom({
+					bodyBorder: getTableBodyBorder({
+						tableBorders,
+					}),
+					bodyContent,
+					bodySettings,
+					onBodyAction: onActionBtnClick,
+				}),
+			);
+		}
+	}
+
+	/*
+	 * Final DOM:
+	 *
+	 * tableDiv
+	 *   └── scrollContainer
+	 *         └── table
+	 */
+	tableScrollContainer.appendChild(table);
+	tableDiv.appendChild(tableScrollContainer);
+
+	return tableDiv;
+};

package/src/components/GidsTableBody/GidsTableBody.ts

@@ -0,0 +1,137 @@
+import {
+	GidsTableBodyWebProps,
+	GidsTableBodyWebUtils,
+	GidsTableEntryTypographyStyle,
+	isValidChildren,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	GidsTableRowActionBaseEvent,
+	GidsTableRowDom,
+} from '../GidsTableRow/GidsTableRow';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import { GidsTableBodyActionEvent } from '@ganpatiinfo/gids-core-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils';
+
+const {
+	getGidsTableBodyClassNames,
+	getConstructedTableBodyContent,
+	getTableBodyRowEntryBackgroundColor,
+	getTableBodyRowEntryContentColor,
+	getTableBodyRowEntryActionsBackgroundColor,
+	getTableBodyRowEntryActionsContentColor,
+} = GidsTableBodyWebUtils;
+
+type GidsTableBodyBaseWebProps = GidsTableBodyWebProps<
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance,
+	DomChildren
+>;
+export type GidsTableBodyActionBaseEvent = GidsTableBodyActionEvent<
+	Event,
+	GidsTableEntryTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+export interface GidsTableBodyDomProps extends GidsTableBodyBaseWebProps {
+	extraClasses?: string;
+	onBodyAction?: (event: GidsTableBodyActionBaseEvent) => void;
+}
+
+export const GidsTableBodyDom = ({
+	bodySettings,
+	bodyContent = [],
+	bodyBorder = 'none',
+	children,
+	onBodyAction,
+	extraClasses,
+}: GidsTableBodyDomProps): HTMLElement => {
+	const tableBody = document.createElement('tbody');
+	tableBody.className = getGidsTableBodyClassNames(extraClasses);
+
+	if (isValidChildren(children)) {
+		appendAsChildren(tableBody, children);
+	} else {
+		if (bodyContent && bodyContent.length > 0) {
+			const constructedTableBodyContent = getConstructedTableBodyContent({
+				bodyContent,
+				bodyBorder,
+			});
+
+			function onRowActionBtnClick({
+				event,
+				rowIndex,
+			}: {
+				event: GidsTableRowActionBaseEvent;
+				rowIndex: number;
+			}) {
+				if (onBodyAction) {
+					onBodyAction({
+						...event,
+						details: {
+							...event.details,
+							rowIndex,
+						},
+					});
+				}
+			}
+
+			constructedTableBodyContent.forEach((constructedBody, indexI) => {
+				const constructedBodyRowItems = constructedBody?.rowItems ?? [];
+
+				const rowBgColor = getTableBodyRowEntryBackgroundColor<
+					GidsTableEntryTypographyStyle,
+					IconName,
+					IconAppearance
+				>({
+					bodySettings,
+					rowIndex: indexI,
+				});
+				const rowContentColor = getTableBodyRowEntryContentColor<
+					GidsTableEntryTypographyStyle,
+					IconName,
+					IconAppearance
+				>({
+					bodySettings,
+					rowIndex: indexI,
+				});
+				const rowActionsBgColor = getTableBodyRowEntryActionsBackgroundColor<
+					GidsTableEntryTypographyStyle,
+					IconName,
+					IconAppearance
+				>({
+					bodySettings,
+					rowIndex: indexI,
+				});
+				const rowActionsContentColor = getTableBodyRowEntryActionsContentColor<
+					GidsTableEntryTypographyStyle,
+					IconName,
+					IconAppearance
+				>({
+					bodySettings,
+					rowIndex: indexI,
+				});
+
+				tableBody.append(
+					GidsTableRowDom({
+						...bodySettings,
+						actionsBackgroundColor: rowActionsBgColor,
+						actionsContentColor: rowActionsContentColor,
+						backgroundColor: rowBgColor,
+						contentColor: rowContentColor,
+						rowType: 'body',
+						rows: constructedBodyRowItems,
+						onRowAction: (event: GidsTableRowActionBaseEvent) =>
+							onRowActionBtnClick({ event, rowIndex: indexI }),
+					}),
+				);
+			});
+		}
+	}
+
+	return tableBody;
+};

package/src/components/GidsTableCell/GidsTableCell.ts

@@ -0,0 +1,276 @@
+import {
+	GidsTableCellTypographyStyle,
+	GidsTableCellWebProps,
+	GidsTableCellWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren } from '../../utils/domUtils';
+import {
+	IconAppearance,
+	IconName,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import { GidsDisplayTagDom } from '../GidsDisplayTag/GidsDisplayTag';
+import { GidsIconDom } from '../GidsIcon/GidsIcon';
+import {
+	GetTableCellButtonIconNeedType,
+	GidsTableCellActionButtonEvent,
+	GidsTableCellActionButtonSharedTypes,
+	GidsTableCellCommonUtils,
+	GidsTableCellActionButtonPosition,
+} from '@ganpatiinfo/gids-core-shared';
+import { GidsButtonDom } from '../GidsButton/GidsButton';
+
+const { getGidsTableCellClassNames, getGidsTableCellLabelTypographyClass } =
+	GidsTableCellWebUtils;
+const { isTableCellActionButtonVisible, getTableCellBtnIcon } =
+	GidsTableCellCommonUtils;
+
+/**
+ * @deprecated
+ * Use `GidsTableEntry` and its props and functions
+ */
+type GidsTableCellBaseWebProps = GidsTableCellWebProps<
+	GidsTableCellTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+/**
+ * @deprecated
+ * Use `GidsTableEntry` and its props and functions
+ */
+export type GidsTableCellActionButtonBaseEvent = GidsTableCellActionButtonEvent<
+	Event,
+	GidsTableCellTypographyStyle,
+	IconName,
+	IconAppearance
+>;
+
+/**
+ * @deprecated
+ * Use `GidsTableEntry` and its props and functions
+ */
+export interface GidsTableCellDomProps extends GidsTableCellBaseWebProps {
+	extraClasses?: string;
+	onClickCellActionBtn?: (event: GidsTableCellActionButtonBaseEvent) => void;
+}
+
+/**
+ * @deprecated
+ * Use `GidsTableEntry` and its props and functions
+ */
+export const GidsTableCellDom = ({
+	id,
+	uniqueKey,
+	extraData,
+	label,
+	cellDataType = 'text',
+	displayTags = [],
+	width = 'full',
+	borderSides = [],
+	borderRadiusSides = [],
+	appearance = 'none',
+	textAlignment = 'center',
+	labelTypography = 'label-medium',
+	isHeaderCell = false,
+	cellPrimaryActionButtons = [],
+	cellSecondaryActionButtons = [],
+	onClickCellActionBtn,
+	extraClasses,
+}: GidsTableCellDomProps): HTMLElement => {
+	const cellTag = isHeaderCell ? 'th' : 'td';
+	const tableCell = document.createElement(cellTag);
+	tableCell.className = getGidsTableCellClassNames(
+		{ borderSides, borderRadiusSides, appearance, textAlignment, width },
+		extraClasses,
+	);
+
+	if (id) {
+		tableCell.setAttribute('id', id);
+	}
+
+	if (uniqueKey) {
+		tableCell.setAttribute('unique-key', uniqueKey);
+	}
+
+	if (extraData) {
+		tableCell.setAttribute('extra-data', JSON.stringify(extraData));
+	}
+
+	function makeCellActionBtnIcon({
+		cellActionBtn,
+		neededIconType = 'leading',
+	}: {
+		cellActionBtn?: GidsTableCellActionButtonSharedTypes<
+			IconName,
+			IconAppearance
+		>;
+		neededIconType?: GetTableCellButtonIconNeedType;
+	}) {
+		const tableCellBtnIcon = getTableCellBtnIcon<IconName, IconAppearance>({
+			cellActionButton: cellActionBtn,
+			neededIconType,
+		});
+
+		return tableCellBtnIcon?.cellIconName &&
+			tableCellBtnIcon.cellIconName.toString() !== ''
+			? GidsIconDom({
+					name: tableCellBtnIcon.cellIconName,
+					size: tableCellBtnIcon.cellIconSize,
+					appearance: tableCellBtnIcon.cellIconAppearance,
+				})
+			: undefined;
+	}
+
+	function onActionBtnClick({
+		event,
+		actionBtnIndex,
+		actionBtnPosition,
+	}: {
+		event: Event;
+		actionBtnIndex: number;
+		actionBtnPosition: GidsTableCellActionButtonPosition;
+	}) {
+		if (onClickCellActionBtn) {
+			onClickCellActionBtn({
+				originalEvent: event,
+				details: {
+					appearance,
+					cellDataType,
+					displayTags,
+					label,
+					id,
+					extraData,
+					isHeaderCell,
+					uniqueKey,
+					actionBtnNumber: `action-btn-${actionBtnIndex + 1}`,
+					actionBtnIndex: actionBtnIndex,
+					actionBtnPosition: actionBtnPosition ?? 'secondary',
+				},
+			});
+		}
+	}
+
+	function makeCellActionButton({
+		cellActionBtn,
+		actionBtnIndex,
+		actionBtnPosition,
+	}: {
+		cellActionBtn?: GidsTableCellActionButtonSharedTypes<
+			IconName,
+			IconAppearance
+		>;
+		actionBtnIndex: number;
+		actionBtnPosition: GidsTableCellActionButtonPosition;
+	}) {
+		return GidsButtonDom({
+			as: 'button',
+			appearance: cellActionBtn?.appearance ?? 'default',
+			size: cellActionBtn?.size ?? 'md',
+			disabled: cellActionBtn?.disabled,
+			destructive: cellActionBtn?.destructive,
+			positive: cellActionBtn?.positive,
+			loading: cellActionBtn?.loading,
+			width: cellActionBtn?.width ?? 'intrinsic',
+			children: cellActionBtn?.buttonLabel ?? '',
+			type: 'button',
+			leadingIcon: makeCellActionBtnIcon({
+				cellActionBtn,
+				neededIconType: 'leading',
+			}),
+			trailingIcon: makeCellActionBtnIcon({
+				cellActionBtn,
+				neededIconType: 'trailing',
+			}),
+			onClick: (event: Event) =>
+				onActionBtnClick({ event, actionBtnIndex, actionBtnPosition }),
+		});
+	}
+
+	if (cellPrimaryActionButtons && cellPrimaryActionButtons.length > 0) {
+		const cellPrimaryActionBtnContainer = document.createElement('div');
+		cellPrimaryActionBtnContainer.className =
+			'gids-table-cell__primary-action-btn-container';
+
+		Array.from({ length: cellPrimaryActionButtons.length }, (_, indexI) => {
+			const cellPrimaryActionBtnIndex =
+				cellPrimaryActionButtons.length - indexI - 1;
+			const cellPrimaryActionBtn =
+				cellPrimaryActionButtons[cellPrimaryActionBtnIndex];
+			const cellActionBtnVisible = isTableCellActionButtonVisible<
+				IconName,
+				IconAppearance
+			>(cellPrimaryActionBtn);
+			if (cellActionBtnVisible) {
+				cellPrimaryActionBtnContainer.append(
+					makeCellActionButton({
+						cellActionBtn: cellPrimaryActionBtn,
+						actionBtnIndex: cellPrimaryActionBtnIndex,
+						actionBtnPosition: 'primary',
+					}),
+				);
+			}
+		});
+
+		tableCell.appendChild(cellPrimaryActionBtnContainer);
+	}
+
+	if (cellDataType === 'text' && label && label !== '') {
+		const labelSpan = document.createElement('span');
+		labelSpan.textContent = label;
+		labelSpan.className = `${getGidsTableCellLabelTypographyClass(labelTypography)}`;
+
+		appendAsChildren(tableCell, labelSpan);
+	}
+
+	if (cellDataType === 'display-tag' && displayTags && displayTags.length > 0) {
+		const displayTagsContainer = document.createElement('div');
+		displayTagsContainer.className = 'gids-table-cell__display-tags-container';
+
+		displayTags.forEach((displayTag) => {
+			displayTagsContainer.append(
+				GidsDisplayTagDom({
+					label: displayTag?.label ?? '',
+					appearance: displayTag?.displayTagAppearance ?? 'subtle',
+					size: displayTag?.displayTagSize ?? 'xs',
+					icon: displayTag?.displayTagIcon
+						? GidsIconDom({
+								name: displayTag.displayTagIcon,
+								size: displayTag?.displayTagSize ?? 'xs',
+								appearance: displayTag?.displayTagIconAppearance ?? 'regular',
+							})
+						: undefined,
+					color: displayTag?.displayTagColor ?? 'accent-5',
+				}),
+			);
+		});
+
+		appendAsChildren(tableCell, displayTagsContainer);
+	}
+
+	if (cellSecondaryActionButtons && cellSecondaryActionButtons.length > 0) {
+		const cellSecondaryActionBtnContainer = document.createElement('div');
+		cellSecondaryActionBtnContainer.className =
+			'gids-table-cell__secondary-action-btn-container';
+
+		Array.from({ length: cellSecondaryActionButtons.length }, (_, indexJ) => {
+			const cellSecondaryActionBtn = cellSecondaryActionButtons[indexJ];
+			const cellActionBtnVisible = isTableCellActionButtonVisible<
+				IconName,
+				IconAppearance
+			>(cellSecondaryActionBtn);
+			if (cellActionBtnVisible) {
+				cellSecondaryActionBtnContainer.append(
+					makeCellActionButton({
+						cellActionBtn: cellSecondaryActionBtn,
+						actionBtnIndex: indexJ,
+						actionBtnPosition: 'secondary',
+					}),
+				);
+			}
+		});
+
+		tableCell.appendChild(cellSecondaryActionBtnContainer);
+	}
+
+	return tableCell;
+};