slick-table 0.0.13 → 0.0.14

package/src/shared/lib/slickgrid/ui/HeaderButtons/model/event/eventOpenColumnFilters.ts

@@ -1,13 +0,0 @@
-import { AnEvent } from "shared/lib/an-event";
-import { EColumnFiltersGroup } from "shared/model/enums";
-import { ISlickTable } from "shared/model/types";
-
-class OpenColumnFilters extends AnEvent {
-	columnId: string | number = "";
-	group: EColumnFiltersGroup = EColumnFiltersGroup.Text;
-	table?: ISlickTable | undefined;
-	target: HTMLElement | null = null;
-	x = 0;
-	y = 0;
-}
-export const eventOpenColumnFilters = new OpenColumnFilters();

package/src/shared/lib/slickgrid/ui/HeaderButtons/model/event/index.ts

@@ -1 +0,0 @@
-export { eventOpenColumnFilters } from "./eventOpenColumnFilters";

package/src/shared/lib/slickgrid/ui/HeaderButtons/model/index.ts

@@ -1,2 +0,0 @@
-export { openColumnFilter } from "./buttons";
-export { eventOpenColumnFilters } from "./event";

package/src/shared/lib/slickgrid/ui/SlickgridTable/index.ts

@@ -1 +0,0 @@
-export { SlickgridTable } from "./ui";

package/src/shared/lib/slickgrid/ui/SlickgridTable/lib/callbacks/index.ts

@@ -1 +0,0 @@
-export { onAddNewRow } from "./onAddNewRow";

package/src/shared/lib/slickgrid/ui/SlickgridTable/lib/callbacks/onAddNewRow.ts

@@ -1,34 +0,0 @@
-import {
-	Handler,
-	OnAddNewRowEventArgs,
-	SlickDataView,
-	SlickGrid,
-} from "slickgrid";
-
-import { ISlickTable } from "shared/model/types";
-
-import { getLastRow, getMaxId } from "../../../../lib";
-
-export const onAddNewRow =
-	(table: ISlickTable): Handler<OnAddNewRowEventArgs> =>
-	(_e, { grid, item }): void => {
-		addNewRow(grid, item);
-		grid.updateRowCount();
-		grid.invalidate();
-		table.isEdited = true;
-		table.hotKeysBehavior.pushToCommandQueue(grid);
-	};
-
-const addNewRow = (grid: SlickGrid, item: Record<string, any>): void => {
-	const dataView: SlickDataView = grid.getData();
-	const lastRow = getLastRow<Record<string, any>>(dataView);
-	const maxId = getMaxId(grid);
-	const newRow = {
-		...lastRow,
-		...item,
-		id: maxId + 1,
-		isEdited: true,
-		isNew: true,
-	};
-	dataView.addItem(newRow);
-};

package/src/shared/lib/slickgrid/ui/SlickgridTable/lib/hooks/index.ts

@@ -1 +0,0 @@
-export { useGrid } from "./useGrid";

package/src/shared/lib/slickgrid/ui/SlickgridTable/lib/hooks/useGrid.ts

@@ -1,140 +0,0 @@
-import { useEffect } from "react";
-import {
-	Handler,
-	OnAddNewRowEventArgs,
-	OnCellChangeEventArgs,
-	SlickCheckboxSelectColumn,
-	SlickGroupItemMetadataProvider,
-	SlickHeaderButtons,
-	SlickHeaderMenu,
-	SlickResizer,
-	SlickRowSelectionModel,
-	SlickDataView as SlickgridDataView,
-} from "slickgrid";
-
-import { CHECKBOX_SELECTOR } from "shared/model/consts";
-
-import {
-	onRowsChanged,
-	columnSorter as sorter,
-	onRowCountChanged as updateRowCount,
-	updateTotals,
-} from "../../../../lib";
-import { openContextMenu } from "../../../../lib/contextMenu";
-import { handleHeaderButtons, headerButtons } from "../../../HeaderButtons";
-import { Props, defaultOptions } from "../../model";
-
-export function useGrid({
-	SlickDataView = SlickgridDataView,
-	applyCellCssStyles,
-	columnSorter = sorter,
-	columns,
-	getItemMetadata,
-	groups,
-	items,
-	onAddNewRow,
-	onBeforeEditCell,
-	onCellChange,
-	onClick,
-	onDblClick,
-	onHeaderMenuCommand,
-	onRowCountChanged = updateRowCount,
-	options = {},
-	table,
-}: Props & {
-	onAddNewRow: Handler<OnAddNewRowEventArgs>;
-	onCellChange: Handler<OnCellChangeEventArgs>;
-}) {
-	useEffect(() => {
-		const groupItemMetadataProvider = new SlickGroupItemMetadataProvider();
-		const headerButtonsPlugin = new SlickHeaderButtons({});
-		const headerMenuPlugin = new SlickHeaderMenu({});
-		const dataView = new SlickDataView({
-			groupItemMetadataProvider: groups ? groupItemMetadataProvider : undefined,
-		});
-		const grid = table.createGrid(dataView, [], options);
-
-		const resizer = new SlickResizer({
-			container: table.id,
-		});
-		grid.setSelectionModel(
-			new SlickRowSelectionModel({ selectActiveRow: false }),
-		);
-		grid.registerPlugin(resizer);
-		grid.registerPlugin(headerButtonsPlugin);
-		grid.registerPlugin(groupItemMetadataProvider);
-
-		if (getItemMetadata) dataView.getItemMetadata = getItemMetadata(dataView);
-		dataView.setItems(items.map((item) => ({ ...item })));
-		grid.invalidate();
-
-		dataView.onRowCountChanged.subscribe(onRowCountChanged(table));
-		dataView.onRowsChanged.subscribe(onRowsChanged(grid));
-		grid.onAddNewRow.subscribe(onAddNewRow);
-		grid.onCellChange.subscribe(onCellChange);
-		onBeforeEditCell && grid.onBeforeEditCell.subscribe(onBeforeEditCell);
-		onClick && grid.onClick.subscribe(onClick);
-		onDblClick && grid.onDblClick.subscribe(onDblClick);
-		grid.onSort.subscribe(columnSorter.onSort());
-		grid.onContextMenu.subscribe(openContextMenu(table));
-		const onHeaderButtonCommand = handleHeaderButtons(table);
-		headerButtonsPlugin.onCommand.subscribe(onHeaderButtonCommand);
-
-		if (onHeaderMenuCommand) {
-			headerMenuPlugin.onCommand.subscribe(onHeaderMenuCommand);
-			grid.registerPlugin(headerMenuPlugin);
-		}
-
-		if (groups) {
-			table.grouping = {
-				groups,
-				isGrouped: table.grouping.isGrouped ?? true,
-			};
-		}
-		applyCellCssStyles?.(grid);
-
-		table.hotKeysBehavior.pushToCommandQueue(grid);
-		// table.notifyObservers();
-
-		return () => {
-			headerButtonsPlugin.onCommand.unsubscribe(onHeaderButtonCommand);
-			onHeaderMenuCommand &&
-				headerMenuPlugin.onCommand.unsubscribe(onHeaderMenuCommand);
-			grid.onAddNewRow.unsubscribe(onAddNewRow);
-			grid.onCellChange.unsubscribe(onCellChange);
-			onBeforeEditCell && grid.onBeforeEditCell.unsubscribe(onBeforeEditCell);
-			onClick && grid.onClick.unsubscribe(onClick);
-			onDblClick && grid.onDblClick.unsubscribe(onDblClick);
-			table.reset();
-		};
-	}, [items]);
-
-	useEffect(() => {
-		const grid = table.grid;
-		if (!grid || !options) return;
-		grid.setOptions({ ...defaultOptions, ...options });
-		grid.render();
-	}, [options, items]);
-
-	useEffect(() => {
-		const grid = table.grid;
-		if (!grid) return;
-		if (!columns.length) return;
-		if (columns[0].id === CHECKBOX_SELECTOR) {
-			const checkboxSelector = new SlickCheckboxSelectColumn();
-			grid.setColumns([
-				// @ts-ignore
-				{ ...checkboxSelector.getColumnDefinition(), focusable: false },
-				...columns.slice(1),
-			]);
-			grid.registerPlugin(checkboxSelector);
-		} else {
-			grid.setColumns(columns);
-		}
-		headerButtons.highlightAllColumns(table.filter.args, table.id);
-		table.filter.register(grid, table.id);
-		grid.invalidate();
-		updateTotals(grid);
-		table.notifyObservers();
-	}, [columns, items]);
-}

package/src/shared/lib/slickgrid/ui/SlickgridTable/lib/index.ts

@@ -1,2 +0,0 @@
-export { useGrid } from "./hooks";
-export { onAddNewRow } from "./callbacks";

package/src/shared/lib/slickgrid/ui/SlickgridTable/model/defaultOptions.ts

@@ -1,8 +0,0 @@
-import { GridAutosizeColsMode, GridOption } from "slickgrid";
-
-export const defaultOptions: GridOption = {
-	asyncEditorLoading: false, // increases keyboard navigation speed
-	autosizeColsMode: GridAutosizeColsMode.LegacyForceFit,
-	enableAutoSizeColumns: true,
-	enableColumnReorder: false,
-};

package/src/shared/lib/slickgrid/ui/SlickgridTable/model/index.ts

@@ -1,2 +0,0 @@
-export { defaultOptions } from "./defaultOptions";
-export type { Props } from "./types";

package/src/shared/lib/slickgrid/ui/SlickgridTable/model/types/Props.ts

@@ -1,42 +0,0 @@
-import {
-	GridOption,
-	Grouping,
-	Handler,
-	ItemMetadata,
-	MenuCommandItemCallbackArgs,
-	OnAddNewRowEventArgs,
-	OnBeforeEditCellEventArgs,
-	OnCellChangeEventArgs,
-	OnClickEventArgs,
-	OnDblClickEventArgs,
-	OnRowCountChangedEventArgs,
-	SlickDataView,
-	SlickGrid,
-} from "slickgrid";
-
-import { IColumn, ISlickTable } from "shared/model/types";
-
-import { ColumnSorter } from "../../../../lib";
-
-export interface Props {
-	SlickDataView?: typeof SlickDataView;
-	applyCellCssStyles?: (grid: SlickGrid) => void;
-	columnSorter?: ColumnSorter;
-	columns: IColumn[];
-	getItemMetadata?: (
-		dataView: SlickDataView,
-	) => (row: number) => ItemMetadata | null;
-	groups?: Grouping[];
-	items: Record<string, any>[];
-	onAddNewRow?: Handler<OnAddNewRowEventArgs>;
-	onBeforeEditCell?: Handler<OnBeforeEditCellEventArgs>;
-	onCellChange?: Handler<OnCellChangeEventArgs>;
-	onClick?: Handler<OnClickEventArgs>;
-	onDblClick?: Handler<OnDblClickEventArgs>;
-	onHeaderMenuCommand?: Handler<MenuCommandItemCallbackArgs>;
-	onRowCountChanged?: (
-		table: ISlickTable,
-	) => Handler<OnRowCountChangedEventArgs>;
-	options?: GridOption;
-	table: ISlickTable;
-}

package/src/shared/lib/slickgrid/ui/SlickgridTable/model/types/index.ts

@@ -1 +0,0 @@
-export type { Props } from "./Props";

package/src/shared/lib/slickgrid/ui/SlickgridTable/ui/SlickgridTable.tsx

@@ -1,51 +0,0 @@
-import { FC } from "react";
-
-import {
-	onCellChange as cellChange,
-	useHotKeys,
-	useUpdateTotal,
-} from "../../../lib";
-import { onAddNewRow as addNewRow, useGrid } from "../lib";
-import { Props } from "../model";
-
-export const SlickgridTable: FC<Props> = ({
-	SlickDataView,
-	applyCellCssStyles,
-	columnSorter,
-	columns,
-	getItemMetadata,
-	groups,
-	items,
-	onAddNewRow,
-	onBeforeEditCell,
-	onCellChange,
-	onClick,
-	onDblClick,
-	onHeaderMenuCommand,
-	onRowCountChanged,
-	options,
-	table,
-}) => {
-	useGrid({
-		SlickDataView,
-		applyCellCssStyles,
-		columnSorter,
-		columns,
-		getItemMetadata,
-		groups,
-		items,
-		onAddNewRow: onAddNewRow || addNewRow(table),
-		onBeforeEditCell,
-		onCellChange: onCellChange || cellChange(table),
-		onClick,
-		onDblClick,
-		onHeaderMenuCommand,
-		onRowCountChanged,
-		options,
-		table,
-	});
-	useHotKeys(table);
-	useUpdateTotal(table);
-
-	return <div id={table.id} className={"slick-container"}></div>;
-};

package/src/shared/lib/slickgrid/ui/SlickgridTable/ui/index.ts

@@ -1 +0,0 @@
-export { SlickgridTable } from "./SlickgridTable";

package/src/shared/lib/slickgrid/ui/columns/columnCheckboxSelector/columnCheckboxSelector.ts

@@ -1,7 +0,0 @@
-import { CHECKBOX_SELECTOR } from "shared/model/consts";
-import { IColumn } from "shared/model/types";
-
-export const columnCheckboxSelector: IColumn = {
-	id: CHECKBOX_SELECTOR,
-	field: CHECKBOX_SELECTOR,
-};

package/src/shared/lib/slickgrid/ui/columns/columnCheckboxSelector/index.ts

@@ -1 +0,0 @@
-export { columnCheckboxSelector } from "./columnCheckboxSelector";

package/src/shared/lib/slickgrid/ui/columns/columnIsEdited/index.ts

@@ -1 +0,0 @@
-export { columnIsEdited } from "./ui";

package/src/shared/lib/slickgrid/ui/columns/columnIsEdited/lib/index.ts

@@ -1 +0,0 @@
-export { setEditedMark } from "./setEditedMark";

package/src/shared/lib/slickgrid/ui/columns/columnIsEdited/lib/setEditedMark.spec.ts

@@ -1,11 +0,0 @@
-import { setEditedMark } from "./setEditedMark";
-
-const rowIndex = 1;
-const columnIndex = 2;
-
-test("Return expected values", () => {
-	expect(setEditedMark(rowIndex, columnIndex, undefined)).toBe("");
-	expect(setEditedMark(rowIndex, columnIndex, true)).toBe(
-		"<span>&#9998;</span>",
-	);
-});

package/src/shared/lib/slickgrid/ui/columns/columnIsEdited/lib/setEditedMark.ts

@@ -1,7 +0,0 @@
-export function setEditedMark(
-	_row: number,
-	_cell: number,
-	value: true | undefined,
-): string {
-	return value ? "<span>&#9998;</span>" : "";
-}

package/src/shared/lib/slickgrid/ui/columns/columnIsEdited/ui/columnIsEdited.ts

@@ -1,16 +0,0 @@
-import { ESortType } from "shared/model/enums";
-import { IColumn } from "shared/model/types";
-
-import { setEditedMark } from "../lib";
-
-export const columnIsEdited: IColumn = {
-	id: "isEdited",
-	name: "✎",
-	field: "isEdited",
-	formatter: setEditedMark,
-	focusable: false,
-	sortable: true,
-	sortAs: ESortType.NUMBER,
-	cssClass: "text-center",
-	maxWidth: 30,
-};

package/src/shared/lib/slickgrid/ui/columns/columnIsEdited/ui/index.ts

@@ -1 +0,0 @@
-export { columnIsEdited } from "./columnIsEdited";

package/src/shared/lib/slickgrid/ui/columns/index.ts

@@ -1,2 +0,0 @@
-export { columnCheckboxSelector } from "./columnCheckboxSelector";
-export { columnIsEdited } from "./columnIsEdited";

package/src/shared/lib/slickgrid/ui/index.ts

@@ -1,9 +0,0 @@
-export {
-	eventOpenColumnFilters,
-	handleHeaderButtons,
-	headerButtons,
-	openColumnFilter,
-} from "./HeaderButtons";
-export { SlickgridTable } from "./SlickgridTable";
-export { WithTableStyles } from "./styles";
-export { columnCheckboxSelector, columnIsEdited } from "./columns";

package/src/shared/lib/slickgrid/ui/styles/WithTableStyles/WithTableStyles.style.ts

@@ -1,156 +0,0 @@
-import { Box, styled } from "@mui/material";
-
-import { wink } from "../keyframes";
-
-const Wrapper = styled(Box)(({ theme }) => ({
-	"& .slick-container": {
-		userSelect: "none",
-		maxWidth: "100%",
-		maxHeight: "100%",
-		color: theme.palette.text.primary,
-		borderColor: theme.palette.background.paper,
-		fontFamily: "inherit",
-		fontSize: "0.75rem",
-
-		"& .slick-header-column": {
-			"&.filter-active .slick-header-button::after": {
-				width: "7px",
-				height: "7px",
-				content: "''",
-				backgroundColor: "#2196f3",
-				position: "absolute",
-				borderRadius: "50%",
-				border: "2px solid #f8f8f8",
-				top: "3px",
-				right: "3px",
-			},
-			"&:not([data-id=_checkbox_selector]):not([data-id=isEdited])": {
-				"& .slick-column-name": {
-					textOverflow: "ellipsis",
-					whiteSpace: "nowrap",
-					overflow: "hidden",
-					maxWidth: "calc(100% - 16px)",
-				},
-			},
-			"&.slick-state-hover": {
-				"&.filter-active .slick-header-button::after": {
-					border: "2px solid #e8e8e8",
-				},
-				"& .slick-header-button": {
-					"&::before": {
-						backgroundColor: "#e8e8e8",
-					},
-				},
-			},
-			"& .slick-header-button": {
-				width: "19px",
-				height: "12px",
-				"&::before": {
-					position: "absolute",
-					content: "''",
-					width: "19px",
-					height: "12px",
-					top: "6px",
-					right: "5px",
-					backgroundImage:
-						"repeating-linear-gradient(0deg, #808080, #808080 2px, transparent 2px, transparent 4px)",
-					clipPath: "polygon(0% 0%, 100% 0%, 50% 110%)",
-					backgroundColor: "#f8f8f8",
-				},
-			},
-		},
-		"& .slick-viewport": {
-			backgroundColor: theme.palette.background.paper,
-			"& .grid-canvas": {
-				"& .ui-widget-content.slick-row": {
-					"&.even": {
-						backgroundColor: theme.palette.background.default,
-					},
-					// "&.odd": {
-					// 	backgroundColor: theme.palette.background.secondary,
-					// },
-					// "&:hover": {
-					// 	backgroundColor: theme.palette.background.row_hover,
-					// },
-					// "&.active": {
-					// 	backgroundColor: theme.palette.background.row_hover,
-					// },
-					"& .slick-cell": {
-						"&.active": {
-							// backgroundColor: theme.palette.background.row_hover,
-							borderColor: "#007bff",
-							"& input": {
-								// backgroundColor: theme.palette.background.row_hover,
-								color: theme.palette.text.primary,
-							},
-						},
-						"&.selected": {
-							// backgroundColor: theme.palette.background.cell_selected,
-							color: theme.palette.text.primary,
-						},
-						"&.text-right": {
-							textAlign: "right",
-						},
-						"&.bold": {
-							fontWeight: "bold",
-						},
-						"&.wink": {
-							animation: `${wink} infinite 0.5s linear`,
-							"& input": {
-								animation: `${wink} infinite 0.5s linear`,
-							},
-						},
-						"& input.editor-text": {
-							textAlign: "inherit",
-						},
-						"& select": {
-							color: theme.palette.text.primary,
-							backgroundColor: theme.palette.background.default,
-						},
-						"& #autocomplete": {
-							margin: 0,
-							padding: 0,
-							maxHeight: "300px",
-							width: "100%",
-							overflow: "auto",
-							backgroundColor: theme.palette.background.default,
-							fontSize: "12px",
-							boxShadow: "0 0 5px 1px gray",
-							"& div": {
-								"&:hover": {
-									// backgroundColor: theme.palette.background.row_hover,
-									cursor: "pointer",
-								},
-								"&.active": {
-									// backgroundColor: theme.palette.background.row_hover,
-								},
-								"& strong": {
-									color: "#007bff",
-								},
-							},
-						},
-					},
-				},
-			},
-		},
-
-		"& .slick-footerrow": {
-			backgroundColor: theme.palette.background.default,
-			borderTop: "1px solid silver",
-			"& .slick-footerrow-column": {
-				height: "100%",
-				display: "flex",
-				justifyContent: "flex-end",
-				alignItems: "center",
-				paddingRight: "5px",
-				borderBottom: "none",
-				fontWeight: "bold",
-				"&:last-child": {
-					borderRight: "none",
-				},
-			},
-		},
-	},
-}));
-
-export default { Wrapper };

package/src/shared/lib/slickgrid/ui/styles/WithTableStyles/WithTableStyles.tsx

@@ -1,11 +0,0 @@
-import { FC, ReactNode } from "react";
-
-import Styled from "./WithTableStyles.style";
-
-export const WithTableStyles: FC<IProps> = ({ children }) => {
-	return <Styled.Wrapper>{children}</Styled.Wrapper>;
-};
-
-interface IProps {
-	children: ReactNode;
-}

package/src/shared/lib/slickgrid/ui/styles/WithTableStyles/index.ts

@@ -1 +0,0 @@
-export { WithTableStyles } from "./WithTableStyles";

package/src/shared/lib/slickgrid/ui/styles/index.ts

@@ -1 +0,0 @@
-export { WithTableStyles } from "./WithTableStyles";

package/src/shared/lib/slickgrid/ui/styles/keyframes/index.ts

@@ -1 +0,0 @@
-export { wink } from "./wink";

package/src/shared/lib/slickgrid/ui/styles/keyframes/wink.ts

@@ -1,7 +0,0 @@
-import { keyframes } from "@mui/material";
-
-export const wink = keyframes`
-  50% {
-    background-color: #ffb1b1;
-  }
-`;

package/src/shared/lib/sorting/Sort.ts

@@ -1,26 +0,0 @@
-import { getTime } from "../datetime";
-
-class Sort implements ISort {
-	emptyValue = "1/1/1970";
-	dates(a: string, b: string): number {
-		const value1 = getTime(a || this.emptyValue);
-		const value2 = getTime(b || this.emptyValue);
-		return value1 - value2;
-	}
-	numbers(a?: string | number | null, b?: string | number | null): number {
-		return Number(a || 0) - Number(b || 0);
-	}
-	strings(a?: string, b?: string): number {
-		if ((a || "").toLowerCase() > (b || "").toLowerCase()) return 1;
-		if ((a || "").toLowerCase() < (b || "").toLowerCase()) return -1;
-		return 0;
-	}
-}
-
-export const sort = new Sort();
-
-interface ISort {
-	strings(): number;
-	numbers(a?: string | number | null, b?: string | number | null): number;
-	dates(a: string, b: string): number;
-}

package/src/shared/lib/sorting/index.ts

@@ -1 +0,0 @@
-export { sort } from "./Sort";

package/src/shared/lib/stringCalculator/index.ts

@@ -1,2 +0,0 @@
-// @ts-ignore
-export { stringCalculator } from "./stringCalculator";