slick-table 0.0.16 → 0.0.18

package/src/features/context-menu/lib/hooks/useSubscribeToEvent.ts

@@ -1,25 +0,0 @@
-import { Dispatch, SetStateAction, useEffect } from "react";
-
-import { eventContextMenu } from "shared/lib/slickgrid";
-
-import { PORTAL_ID, makeVisible } from "entities/portal";
-
-export function useSubscribeToEvent(
-	setIsOpened: Dispatch<SetStateAction<boolean>>,
-) {
-	useEffect(() => {
-		function callback() {
-			setIsOpened(true);
-			setTimeout(() => {
-				const menu = document.getElementById(PORTAL_ID);
-				if (!menu) return;
-				const { x, y } = eventContextMenu;
-				makeVisible(menu, x, y);
-			}, 0);
-		}
-		eventContextMenu.subscribe(callback);
-		return () => {
-			eventContextMenu.unsubscribe(callback);
-		};
-	}, []);
-}

package/src/features/context-menu/lib/index.ts

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

package/src/features/context-menu/ui/ButtonDownloadCSV/ButtonDownloadCSV.tsx

@@ -1,34 +0,0 @@
-import { Dispatch, FC, SetStateAction } from "react";
-
-import { eventContextMenu } from "shared/lib/slickgrid";
-
-import Styled from "../ContextMenu.style";
-
-export const ButtonDownloadCSV: FC<TProps> = ({
-	clientId,
-	clientName,
-	setIsOpened,
-}) => {
-	const onClick = (): void => {
-		const table = eventContextMenu.table;
-		const grid = table?.grid;
-		if (!table || !grid) {
-			setIsOpened(false);
-			return;
-		}
-		table.downloadManager.download(table, clientId, clientName);
-		setIsOpened(false);
-	};
-
-	return (
-		<Styled.Li onClick={onClick}>
-			<Styled.Icon className={"sgi sgi-download"}></Styled.Icon>Download as CSV
-		</Styled.Li>
-	);
-};
-
-type TProps = {
-	clientId: number;
-	clientName: string;
-	setIsOpened: Dispatch<SetStateAction<boolean>>;
-};

package/src/features/context-menu/ui/ButtonDownloadCSV/index.ts

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

package/src/features/context-menu/ui/ButtonGroup/ButtonGroup.tsx

@@ -1,28 +0,0 @@
-import { Dispatch, FC, SetStateAction } from "react";
-
-import { eventContextMenu } from "shared/lib/slickgrid";
-
-import Styled from "../ContextMenu.style";
-
-export const ButtonGroup: FC<IProps> = ({ setIsOpened }) => {
-	const table = eventContextMenu.table;
-
-	function group() {
-		if (!table) return;
-		table.grouping = { isGrouped: true };
-		setIsOpened(false);
-	}
-
-	if (table?.grouping.isGrouped !== false) return null;
-
-	return (
-		<Styled.Li onClick={group}>
-			<Styled.Icon className={"sgi sgi-link"}></Styled.Icon>
-			Group
-		</Styled.Li>
-	);
-};
-
-interface IProps {
-	setIsOpened: Dispatch<SetStateAction<boolean>>;
-}

package/src/features/context-menu/ui/ButtonGroup/index.ts

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

package/src/features/context-menu/ui/ButtonResetFilters/index.ts

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

package/src/features/context-menu/ui/ButtonResetFilters/lib/index.ts

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

package/src/features/context-menu/ui/ButtonResetFilters/lib/visibility/hasFiltersApplied.ts

@@ -1,8 +0,0 @@
-import { ISlickTable } from "shared/model/types";
-
-export function hasFiltersApplied(table?: ISlickTable): boolean {
-	if (!table) return false;
-	return Object.values(table.filter.args.columnFilters || {}).some(
-		({ value }) => value[1] || value[2],
-	);
-}

package/src/features/context-menu/ui/ButtonResetFilters/lib/visibility/index.ts

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

package/src/features/context-menu/ui/ButtonResetFilters/ui/ButtonResetFilters.tsx

@@ -1,39 +0,0 @@
-import { Divider } from "@mui/material";
-import { Dispatch, FC, Fragment, SetStateAction } from "react";
-
-import { eventContextMenu, headerButtons } from "shared/lib/slickgrid";
-
-import { hasFiltersApplied } from "../lib";
-
-import Styled from "../../ContextMenu.style";
-
-export const ButtonResetFilters: FC<IProps> = ({ setIsOpened }) => {
-	const table = eventContextMenu.table;
-	function onClick() {
-		if (!table) {
-			setIsOpened(false);
-			return;
-		}
-		const args = table.filter.args;
-		delete args.columnFilters;
-		table.filter.args = args;
-		headerButtons.highlightAllColumns(args, table.id);
-		setIsOpened(false);
-	}
-
-	if (!hasFiltersApplied(table)) return null;
-
-	return (
-		<Fragment>
-			<Divider />
-			<Styled.Li onClick={onClick}>
-				<Styled.Icon className={"sgi sgi-notification-clear-all"}></Styled.Icon>
-				Reset column filters
-			</Styled.Li>
-		</Fragment>
-	);
-};
-
-interface IProps {
-	setIsOpened: Dispatch<SetStateAction<boolean>>;
-}

package/src/features/context-menu/ui/ButtonResetFilters/ui/index.ts

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

package/src/features/context-menu/ui/ButtonUngroup/ButtonUngroup.tsx

@@ -1,28 +0,0 @@
-import { Dispatch, FC, SetStateAction } from "react";
-
-import { eventContextMenu } from "shared/lib/slickgrid";
-
-import Styled from "../ContextMenu.style";
-
-export const ButtonUngroup: FC<IProps> = ({ setIsOpened }) => {
-	const table = eventContextMenu.table;
-
-	function group() {
-		if (!table) return;
-		table.grouping = { isGrouped: false };
-		setIsOpened(false);
-	}
-
-	if (!table?.grouping.isGrouped) return null;
-
-	return (
-		<Styled.Li onClick={group}>
-			<Styled.Icon className={"sgi sgi-link-off"}></Styled.Icon>
-			Ungroup
-		</Styled.Li>
-	);
-};
-
-interface IProps {
-	setIsOpened: Dispatch<SetStateAction<boolean>>;
-}

package/src/features/context-menu/ui/ButtonUngroup/index.ts

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

package/src/features/context-menu/ui/CollapseAll/CollapseAll.tsx

@@ -1,31 +0,0 @@
-import React, { Dispatch, SetStateAction } from "react";
-import { SlickDataView } from "slickgrid";
-
-import { eventContextMenu } from "shared/lib/slickgrid";
-
-import Styled from "../ContextMenu.style";
-
-export const CollapseAll: React.FC<Props> = ({ setIsOpened }) => {
-	const table = eventContextMenu.table;
-
-	function onClick() {
-		const grid = table?.grid;
-		if (!grid) return;
-		const dataView: SlickDataView = grid.getData();
-		dataView.collapseAllGroups();
-		setIsOpened(false);
-	}
-
-	if (!table?.grouping.isGrouped) return null;
-
-	return (
-		<Styled.Li onClick={onClick}>
-			<Styled.Icon className={"sgi sgi-collapse-all-outline"}></Styled.Icon>
-			Collapse all groups
-		</Styled.Li>
-	);
-};
-
-interface Props {
-	setIsOpened: Dispatch<SetStateAction<boolean>>;
-}

package/src/features/context-menu/ui/CollapseAll/index.ts

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

package/src/features/context-menu/ui/ContextMenu.style.ts

@@ -1,29 +0,0 @@
-import { styled } from "@mui/material";
-
-const UlStyled = styled("ul")({
-	display: "flex",
-	flexDirection: "column",
-	rowGap: "0.5em",
-	margin: "0",
-	paddingLeft: "0.5em",
-});
-
-const LiStyled = styled("li")({
-	display: "flex",
-	alignItems: "center",
-	columnGap: "0.5em",
-	cursor: "pointer",
-	"&:hover": {
-		scale: "1.05",
-	},
-});
-
-const Icon = styled("span")(({ theme }) => ({
-	backgroundColor: theme.palette.text.primary,
-}));
-
-export default {
-	Ul: UlStyled,
-	Li: LiStyled,
-	Icon,
-};

package/src/features/context-menu/ui/ContextMenu.tsx

@@ -1,51 +0,0 @@
-import { FC, useState } from "react";
-
-import { Portal } from "entities/portal";
-
-import { useSubscribeToEvent } from "../lib";
-import { ButtonDownloadCSV } from "./ButtonDownloadCSV";
-import { ButtonGroup } from "./ButtonGroup";
-import { ButtonResetFilters } from "./ButtonResetFilters";
-import { ButtonUngroup } from "./ButtonUngroup";
-import { CollapseAll } from "./CollapseAll";
-import { CopyToClipboard } from "./CopyToClipboard";
-import { ExpandAll } from "./ExpandAll";
-import { Print } from "./Print";
-
-import Styled from "./ContextMenu.style";
-
-export const ContextMenu: FC<Props> = ({ clientId, clientName }) => {
-	const [isOpened, setIsOpened] = useState(false);
-
-	useSubscribeToEvent(setIsOpened);
-
-	if (!isOpened) return null;
-
-	return (
-		<Portal setIsOpened={setIsOpened}>
-			<Styled.Ul>
-				<Print
-					clientId={clientId}
-					clientName={clientName}
-					setIsOpened={setIsOpened}
-				/>
-				<CopyToClipboard setIsOpened={setIsOpened} />
-				<ButtonDownloadCSV
-					clientId={clientId}
-					clientName={clientName}
-					setIsOpened={setIsOpened}
-				/>
-				<ButtonResetFilters setIsOpened={setIsOpened} />
-				<ButtonUngroup setIsOpened={setIsOpened} />
-				<ButtonGroup setIsOpened={setIsOpened} />
-				<ExpandAll setIsOpened={setIsOpened} />
-				<CollapseAll setIsOpened={setIsOpened} />
-			</Styled.Ul>
-		</Portal>
-	);
-};
-
-interface Props {
-	clientId: number;
-	clientName: string;
-}

package/src/features/context-menu/ui/CopyToClipboard/CopyToClipboard.tsx

@@ -1,42 +0,0 @@
-import { Dispatch, FC, SetStateAction } from "react";
-
-import { eventContextMenu } from "shared/lib/slickgrid";
-import { showNotification } from "shared/ui/notification";
-
-import Styled from "../ContextMenu.style";
-
-export const CopyToClipboard: FC<IProps> = ({ setIsOpened }) => {
-	function onClick() {
-		const table = eventContextMenu.table;
-		const grid = table?.grid;
-		if (!grid || !table) {
-			setIsOpened(false);
-			return;
-		}
-
-		window.navigator.clipboard
-			.writeText(table.downloadManager.createCSV(table))
-			.then((): void => {
-				showNotification("Copied to clipboard", "info");
-			})
-			.catch((): void => {
-				showNotification("Failed to copy to clipboard", "warning");
-			});
-
-		if (grid.getSelectionModel()) {
-			grid.setSelectedRows([]);
-		}
-		setIsOpened(false);
-	}
-
-	return (
-		<Styled.Li onClick={onClick}>
-			<Styled.Icon className={"sgi sgi-content-copy"}></Styled.Icon>Copy to
-			clipboard
-		</Styled.Li>
-	);
-};
-
-interface IProps {
-	setIsOpened: Dispatch<SetStateAction<boolean>>;
-}

package/src/features/context-menu/ui/CopyToClipboard/index.ts

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

package/src/features/context-menu/ui/ExpandAll/ExpandAll.tsx

@@ -1,30 +0,0 @@
-import React, { Dispatch, SetStateAction } from "react";
-import { SlickDataView } from "slickgrid";
-
-import { eventContextMenu } from "shared/lib/slickgrid";
-
-import Styled from "../ContextMenu.style";
-
-export const ExpandAll: React.FC<Props> = ({ setIsOpened }) => {
-	const table = eventContextMenu.table;
-	function onClick() {
-		const grid = table?.grid;
-		if (!grid) return;
-		const dataView: SlickDataView = grid.getData();
-		dataView.expandAllGroups();
-		setIsOpened(false);
-	}
-
-	if (!table?.grouping.isGrouped) return null;
-
-	return (
-		<Styled.Li onClick={onClick}>
-			<Styled.Icon className={"sgi sgi-expand-all-outline"}></Styled.Icon>Expand
-			all groups
-		</Styled.Li>
-	);
-};
-
-interface Props {
-	setIsOpened: Dispatch<SetStateAction<boolean>>;
-}

package/src/features/context-menu/ui/ExpandAll/index.ts

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

package/src/features/context-menu/ui/Print/index.ts

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

package/src/features/context-menu/ui/Print/ui/Print.tsx

@@ -1,25 +0,0 @@
-import { Dispatch, FC, SetStateAction } from "react";
-
-import { eventContextMenu } from "shared/lib/slickgrid";
-
-import Styled from "../../ContextMenu.style";
-
-export const Print: FC<IProps> = ({ clientId, clientName, setIsOpened }) => {
-	function onClick(): void {
-		const table = eventContextMenu.table;
-		table?.printer.print(table, clientId, clientName);
-		setIsOpened(false);
-	}
-
-	return (
-		<Styled.Li onClick={onClick}>
-			<Styled.Icon className={"sgi sgi-printer"}></Styled.Icon>Print
-		</Styled.Li>
-	);
-};
-
-interface IProps {
-	clientId: number;
-	clientName: string;
-	setIsOpened: Dispatch<SetStateAction<boolean>>;
-}

package/src/features/context-menu/ui/Print/ui/index.ts

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

package/src/features/context-menu/ui/index.ts

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

package/src/index.scss

@@ -1,2 +0,0 @@
-@use './app/styles/slickgrid' as *;
-@use './app/styles/global' as *;

package/src/index.ts

@@ -1,2 +0,0 @@
-export { DeletedRowsFilter, WithoutHotKeys } from "shared/lib/slickgrid";
-export { SlickTable } from "shared/lib/slickgrid/model/SlickTable/table/SlickTable";

package/src/main.tsx

@@ -1,15 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import Sortable from "sortablejs";
-
-import App from "./App";
-import "./index.scss";
-
-createRoot(document.getElementById("root")!).render(
-	<StrictMode>
-		<App />
-	</StrictMode>,
-);
-
-// SortableJS is a hard dependency for the "slickgrid" library
-window.Sortable = Sortable;

package/src/pages/main/index.ts

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

package/src/pages/main/lib/columns.ts

@@ -1,33 +0,0 @@
-import { TextEditor } from "slickgrid";
-
-import {
-	DateFormatter,
-	EditorAmount,
-	EditorDate,
-	columnCheckboxSelector,
-	columnIsEdited,
-} from "shared/lib/slickgrid";
-import { IColumn } from "shared/model/types";
-
-export const columns: IColumn[] = [
-	columnCheckboxSelector,
-	columnIsEdited,
-	{ editor: TextEditor, field: "event", id: "event", name: "Event" },
-	{
-		cssClass: "text-center",
-		editor: EditorDate,
-		field: "date",
-		formatter: DateFormatter,
-		id: "date",
-		name: "Date",
-		width: 50,
-	},
-	{
-		cssClass: "text-right",
-		editor: EditorAmount,
-		field: "hours",
-		id: "hours",
-		name: "Hours",
-		width: 50,
-	},
-];

package/src/pages/main/lib/index.ts

@@ -1,3 +0,0 @@
-export { columns } from "./columns";
-export { options } from "./options";
-export { table } from "./table";

package/src/pages/main/lib/options.ts

@@ -1,6 +0,0 @@
-import { GridOption } from "slickgrid";
-
-export const options: GridOption = {
-	editable: true,
-	enableAddRow: true,
-};

package/src/pages/main/lib/table.ts

@@ -1,11 +0,0 @@
-import {
-	DefaultHotKeys,
-	DeletedRowsFilter,
-	SlickTable,
-} from "shared/lib/slickgrid";
-
-export const table = new SlickTable({
-	id: "slick-table",
-	hotKeys: new DefaultHotKeys(),
-	filter: new DeletedRowsFilter(),
-});

package/src/pages/main/ui/Main.style.ts

@@ -1,18 +0,0 @@
-import { Box, styled } from "@mui/material";
-
-const Wrapper = styled(Box)({
-	alignItems: "center",
-	display: "flex",
-	height: "100vh",
-	justifyContent: "center",
-	width: "100vw",
-});
-
-const Container = styled(Box)({
-	height: "70vh",
-	padding: "1em",
-	position: "relative",
-	width: "80vw",
-});
-
-export default { Container, Wrapper };

package/src/pages/main/ui/Main.tsx

@@ -1,30 +0,0 @@
-import { FC } from "react";
-
-import { SlickgridTable, WithTableStyles } from "shared/lib/slickgrid";
-
-import { columns, options, table } from "../lib";
-
-import Styled from "./Main.style";
-
-const items = [
-	{ date: "2025-01-15", event: "Festival", hours: 5, id: 1 },
-	{ date: "2025-03-24", event: "Holiday", hours: 7, id: 2 },
-	{ date: "2025-06-17", event: "Analysis", hours: 11, id: 3 },
-];
-
-export const Main: FC = () => {
-	return (
-		<WithTableStyles>
-			<Styled.Wrapper>
-				<Styled.Container>
-					<SlickgridTable
-						columns={columns}
-						items={items}
-						options={options}
-						table={table}
-					/>
-				</Styled.Container>
-			</Styled.Wrapper>
-		</WithTableStyles>
-	);
-};

package/src/pages/main/ui/index.ts

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

package/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom";

package/src/shared/lib/an-event/index.ts

@@ -1,31 +0,0 @@
-export class AnEvent implements Observable {
-	private readonly observers: Observer[];
-	constructor() {
-		this.observers = [];
-	}
-	subscribe(observer: Observer) {
-		const index = this.observers.indexOf(observer);
-		if (!~index) {
-			this.observers.push(observer);
-		}
-	}
-	unsubscribe(observer: Observer) {
-		const index = this.observers.indexOf(observer);
-		if (~this.observers.indexOf(observer)) {
-			this.observers.splice(index, 1);
-		}
-	}
-	notify() {
-		for (const observer of this.observers) {
-			observer();
-		}
-	}
-}
-
-interface Observable {
-	subscribe(observer: () => void): void;
-	unsubscribe(observer: () => void): void;
-	notify(): void;
-}
-
-type Observer = () => void;

package/src/shared/lib/datetime/dateToString.spec.ts

@@ -1,11 +0,0 @@
-import { dateToString } from "./dateToString";
-
-test("Return expected values", () => {
-	expect(dateToString("12/25/95")).toBe("12/25/95");
-	expect(dateToString("1/1/95")).toBe("01/01/95");
-	expect(dateToString("1/1/21")).toBe("01/01/21");
-	expect(dateToString("2022-05-25")).toBe("05/25/22");
-	expect(dateToString("2022-5-5")).toBe("05/05/22");
-	expect(dateToString("2022-11-15T00:00:00.000Z")).toBe("11/15/22");
-	expect(dateToString("2022-11-15T00:00:00.000Z")).toBe("11/15/22");
-});

package/src/shared/lib/datetime/dateToString.ts

@@ -1,8 +0,0 @@
-import moment from "moment";
-
-import { dateFormats } from "shared/model/consts";
-import { EDateFormat } from "shared/model/enums";
-
-export const dateToString = (date: Date | string | null): string => {
-	return date ? moment(date, dateFormats).format(EDateFormat.ui) : "";
-};

package/src/shared/lib/datetime/getTime.spec.ts

@@ -1,10 +0,0 @@
-import { getTime } from "./getTime";
-
-describe("getTime function", () => {
-	it("should return milliseconds", () => {
-		expect(getTime("2019-02-01")).toBe(1548979200000);
-	});
-	it("should return NaN", () => {
-		expect(getTime("")).toBe(NaN);
-	});
-});

package/src/shared/lib/datetime/getTime.ts

@@ -1,3 +0,0 @@
-export function getTime(date: string): number {
-	return new Date(date).getTime();
-}

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

@@ -1,2 +0,0 @@
-export { dateToString } from "./dateToString";
-export { getTime } from "./getTime";