slick-table 0.0.14 → 0.0.16

package/src/features/column-filters/ui/ColumnFilters.tsx

@@ -0,0 +1,41 @@
+import { FC, useState } from "react";
+
+import { EColumnFilter } from "shared/model/enums";
+import { IColumnFilterValue } from "shared/model/types";
+
+import { Portal } from "entities/portal";
+
+import { useOpenMenu, useSubscribeToEvent } from "../lib";
+import { defaultValue } from "../model";
+import { ButtonReset } from "./ButtonReset";
+import { InputArea } from "./InputArea";
+import { SelectFilter } from "./SelectFilter";
+
+import Styled from "./ColumnFilters.style";
+
+export const ColumnFilters: FC = () => {
+	const [value, setValue] = useState<IColumnFilterValue>(defaultValue);
+	const [filterId, setFilterId] = useState<EColumnFilter>(
+		EColumnFilter.TextContain,
+	);
+	const [isOpened, setIsOpened] = useState(false);
+
+	useSubscribeToEvent(setIsOpened);
+	useOpenMenu(isOpened, setFilterId, setValue);
+
+	if (!isOpened) return null;
+
+	return (
+		<Portal setIsOpened={setIsOpened}>
+			<Styled.Wrapper>
+				<SelectFilter filterId={filterId} setFilterId={setFilterId} />
+				<InputArea filterId={filterId} setValue={setValue} value={value} />
+				<ButtonReset
+					setIsOpened={setIsOpened}
+					setValue={setValue}
+					value={value}
+				/>
+			</Styled.Wrapper>
+		</Portal>
+	);
+};

package/src/features/column-filters/ui/DateBetween/DateBetween.tsx

@@ -0,0 +1,52 @@
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { Moment } from "moment/moment";
+import { FC } from "react";
+
+import { INVALID_DATE } from "shared/model/consts";
+import { EDateFormat } from "shared/model/enums";
+import { WithDatePickerStyles } from "shared/ui/styles";
+
+import { applyFilter, datePickerProps } from "../../lib";
+import { IProps, defaultValue, label } from "../../model";
+
+export const DateBetween: FC<Omit<IProps, "label">> = ({ setValue, value }) => {
+	function onChange1(date: Moment | null) {
+		const dayString = date?.format(EDateFormat.db) || "";
+		const newValue = {
+			...value,
+			1: dayString === INVALID_DATE ? defaultValue[1] : dayString,
+		};
+		setValue(newValue);
+		applyFilter(newValue);
+	}
+	function onChange2(date: Moment | null) {
+		const dayString = date?.format(EDateFormat.db) || "";
+		const newValue = {
+			...value,
+			2: dayString === INVALID_DATE ? defaultValue[2] : dayString,
+		};
+		setValue(newValue);
+		applyFilter(newValue);
+	}
+
+	return (
+		<LocalizationProvider dateAdapter={AdapterMoment}>
+			<WithDatePickerStyles>
+				<DatePicker
+					label={label.from}
+					onChange={onChange1}
+					{...datePickerProps(value[1])}
+				/>
+			</WithDatePickerStyles>
+			<WithDatePickerStyles>
+				<DatePicker
+					label={label.to}
+					onChange={onChange2}
+					{...datePickerProps(value[2])}
+				/>
+			</WithDatePickerStyles>
+		</LocalizationProvider>
+	);
+};

package/src/features/column-filters/ui/DateBetween/index.ts

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

package/src/features/column-filters/ui/DateInput/DateInput.tsx

@@ -0,0 +1,36 @@
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { Moment } from "moment/moment";
+import { FC } from "react";
+
+import { INVALID_DATE } from "shared/model/consts";
+import { EDateFormat } from "shared/model/enums";
+import { WithDatePickerStyles } from "shared/ui/styles";
+
+import { applyFilter, datePickerProps } from "../../lib";
+import { IProps, defaultValue } from "../../model";
+
+export const DateInput: FC<IProps> = ({ label, setValue, value }) => {
+	function onChange(date: Moment | null) {
+		const dayString = date?.format(EDateFormat.db) || "";
+		const newValue = {
+			...value,
+			1: dayString === INVALID_DATE ? defaultValue[1] : dayString,
+		};
+		setValue(newValue);
+		applyFilter(newValue);
+	}
+
+	return (
+		<LocalizationProvider dateAdapter={AdapterMoment}>
+			<WithDatePickerStyles>
+				<DatePicker
+					label={label}
+					onChange={onChange}
+					{...datePickerProps(value[1])}
+				/>
+			</WithDatePickerStyles>
+		</LocalizationProvider>
+	);
+};

package/src/features/column-filters/ui/DateInput/index.ts

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

package/src/features/column-filters/ui/InputArea/InputArea.tsx

@@ -0,0 +1,63 @@
+import { FC, Fragment } from "react";
+
+import { EColumnFilter } from "shared/model/enums";
+
+import { IProps, label } from "../../model";
+import { BooleanInput } from "../BooleanInput";
+import { DateBetween } from "../DateBetween";
+import { DateInput } from "../DateInput";
+import { MultipleSelect } from "../MultipleSelect";
+import { NumberBetween } from "../NumberBetween";
+import { NumberInput } from "../NumberInput";
+import { TextInput } from "../TextInput";
+
+export const InputArea: FC<Props> = ({ filterId, setValue, value }) => {
+	return (
+		<Fragment>
+			{filterId === EColumnFilter.Boolean && (
+				<BooleanInput setValue={setValue} value={value} />
+			)}
+			{filterId === EColumnFilter.TextEqual && (
+				<TextInput setValue={setValue} value={value} />
+			)}
+			{filterId === EColumnFilter.TextNotEqual && (
+				<TextInput setValue={setValue} value={value} />
+			)}
+			{filterId === EColumnFilter.TextContain && (
+				<TextInput setValue={setValue} value={value} />
+			)}
+			{filterId === EColumnFilter.TextNotContain && (
+				<TextInput setValue={setValue} value={value} />
+			)}
+			{filterId === EColumnFilter.MultipleSelect && (
+				<MultipleSelect setValue={setValue} value={value} />
+			)}
+			{filterId === EColumnFilter.NumberEqual && (
+				<NumberInput label={label.filter} setValue={setValue} value={value} />
+			)}
+			{filterId === EColumnFilter.NumberFrom && (
+				<NumberInput label={label.from} setValue={setValue} value={value} />
+			)}
+			{filterId === EColumnFilter.NumberTo && (
+				<NumberInput label={label.to} setValue={setValue} value={value} />
+			)}
+			{filterId === EColumnFilter.NumberBetween && (
+				<NumberBetween setValue={setValue} value={value} />
+			)}
+			{filterId === EColumnFilter.DateEqual && (
+				<DateInput label={label.filter} setValue={setValue} value={value} />
+			)}
+			{filterId === EColumnFilter.DateFrom && (
+				<DateInput label={label.from} setValue={setValue} value={value} />
+			)}
+			{filterId === EColumnFilter.DateTo && (
+				<DateInput label={label.to} setValue={setValue} value={value} />
+			)}
+			{filterId === EColumnFilter.DateBetween && (
+				<DateBetween setValue={setValue} value={value} />
+			)}
+		</Fragment>
+	);
+};
+
+type Props = Omit<IProps, "label"> & { filterId: EColumnFilter };

package/src/features/column-filters/ui/InputArea/index.ts

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

package/src/features/column-filters/ui/MultipleSelect/index.ts

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

package/src/features/column-filters/ui/MultipleSelect/lib/index.ts

@@ -0,0 +1,2 @@
+export { props } from "./props";
+export { ascending } from "./sorting";

package/src/features/column-filters/ui/MultipleSelect/lib/props/index.ts

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

package/src/features/column-filters/ui/MultipleSelect/lib/props/props.ts

@@ -0,0 +1,36 @@
+import { SlickDataView } from "slickgrid";
+
+import { eventOpenColumnFilters } from "shared/lib/slickgrid";
+
+import { IValue } from "../../model";
+
+const emptyProps = { label: "", options: [] };
+
+/**
+ * Molds label and options list for multiple select.
+ *
+ * @returns {Object} contains "label" and "options" fields.
+ */
+export function props(): { label: string; options: IValue[] } {
+	const { columnId, table } = eventOpenColumnFilters;
+	const grid = table?.grid;
+	if (!grid) return emptyProps;
+	const column = grid?.getColumns().find(({ id }) => id === columnId);
+	if (!column) return emptyProps;
+	const label = column.name as string;
+
+	const options: IValue[] = [];
+	const { formatter, id } = column;
+	const dataView: SlickDataView = grid.getData();
+	const optionsSet = new Set<IValue>();
+	const items = dataView.getItems();
+	items.forEach((item) => {
+		optionsSet.add(
+			formatter ? formatter(0, 0, item[id], column, null, grid) : item[id],
+		);
+	});
+	for (const option of optionsSet) {
+		options.push(option);
+	}
+	return { label, options };
+}

package/src/features/column-filters/ui/MultipleSelect/lib/sorting/ascending.ts

@@ -0,0 +1,17 @@
+import { IValue } from "../../model";
+
+/**
+ * Callback for sorting array elements ascending.
+ *
+ * @param {Number | String} a element of an array.
+ * @param {Number | String} b element of an array.
+ * @returns Sorting result.
+ */
+export function ascending(a: IValue, b: IValue): number {
+	if (typeof a === "string" && typeof b === "string") {
+		return a.localeCompare(b);
+	} else if (typeof a === "number" && typeof b === "number") {
+		return a - b;
+	}
+	return 0;
+}

package/src/features/column-filters/ui/MultipleSelect/lib/sorting/index.ts

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

package/src/features/column-filters/ui/MultipleSelect/model/IValue.ts

@@ -0,0 +1 @@
+export type IValue = number | string;

package/src/features/column-filters/ui/MultipleSelect/model/index.ts

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

package/src/features/column-filters/ui/MultipleSelect/ui/MultipleSelect.style.ts

@@ -0,0 +1,9 @@
+import { Checkbox, styled } from "@mui/material";
+
+const CheckboxStyled = styled(Checkbox)({
+	padding: 0,
+});
+
+export default {
+	Checkbox: CheckboxStyled,
+};

package/src/features/column-filters/ui/MultipleSelect/ui/MultipleSelect.tsx

@@ -0,0 +1,72 @@
+import {
+	FormControl,
+	InputLabel,
+	ListItemText,
+	MenuItem,
+	OutlinedInput,
+	Select,
+	SelectChangeEvent,
+} from "@mui/material";
+import React from "react";
+
+import { applyFilter } from "../../../lib";
+import { IProps } from "../../../model";
+import { ascending, props } from "../lib";
+import { IValue } from "../model";
+
+import Styled from "./MultipleSelect.style";
+
+/**
+ * Generates multiple select based on values represented in the column
+ */
+export const MultipleSelect: React.FC<Props> = ({ setValue, value }) => {
+	const selectedValues = JSON.parse(value[1] || '["All"]');
+
+	const { label, options } = props();
+
+	const handleChange = (event: SelectChangeEvent<unknown>) => {
+		const targetValue = event.target.value as string[];
+		let newValue;
+		if (targetValue[targetValue.length - 1] === "All" || !targetValue.length) {
+			newValue = { 1: "", 2: "" };
+		} else {
+			if (targetValue.length > 1 && targetValue[0] === "All") {
+				targetValue.shift();
+			}
+			newValue = {
+				...value,
+				1: JSON.stringify(targetValue),
+			};
+		}
+		setValue(newValue);
+		applyFilter(newValue);
+	};
+
+	return (
+		<FormControl size={"small"}>
+			<InputLabel id="column-filter-multiple-select-label">{label}</InputLabel>
+			<Select
+				labelId="column-filter-multiple-select-label"
+				id="column-filter-multiple-select"
+				multiple
+				value={selectedValues}
+				onChange={handleChange}
+				input={<OutlinedInput label={label} />}
+				renderValue={(selected: unknown) => (selected as IValue[]).join(", ")}
+			>
+				<MenuItem key={0} value={"All"}>
+					<Styled.Checkbox checked={selectedValues.indexOf("All") > -1} />
+					<ListItemText primary={"All"} />
+				</MenuItem>
+				{options.sort(ascending).map((option) => (
+					<MenuItem key={option} value={option}>
+						<Styled.Checkbox checked={selectedValues.indexOf(option) > -1} />
+						<ListItemText primary={option} />
+					</MenuItem>
+				))}
+			</Select>
+		</FormControl>
+	);
+};
+
+type Props = Omit<IProps, "label">;

package/src/features/column-filters/ui/MultipleSelect/ui/index.ts

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

package/src/features/column-filters/ui/NumberBetween/NumberBetween.tsx

@@ -0,0 +1,42 @@
+import { TextField } from "@mui/material";
+import { ChangeEvent, FC, Fragment } from "react";
+
+import { applyFilter } from "../../lib";
+import { IProps, label } from "../../model";
+
+export const NumberBetween: FC<Omit<IProps, "label">> = ({
+	setValue,
+	value,
+}) => {
+	function onChange1(event: ChangeEvent<HTMLInputElement>) {
+		const newValue = { ...value, 1: event.target.value };
+		setValue(newValue);
+		applyFilter(newValue);
+	}
+	function onChange2(event: ChangeEvent<HTMLInputElement>) {
+		const newValue = { ...value, 2: event.target.value };
+		setValue(newValue);
+		applyFilter(newValue);
+	}
+
+	return (
+		<Fragment>
+			<TextField
+				label={label.from}
+				value={value[1]}
+				type={"number"}
+				onChange={onChange1}
+				size={"small"}
+				autoComplete={"off"}
+			/>
+			<TextField
+				label={label.to}
+				value={value[2]}
+				type={"number"}
+				onChange={onChange2}
+				size={"small"}
+				autoComplete={"off"}
+			/>
+		</Fragment>
+	);
+};

package/src/features/column-filters/ui/NumberBetween/index.ts

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

package/src/features/column-filters/ui/NumberInput/NumberInput.tsx

@@ -0,0 +1,24 @@
+import { TextField } from "@mui/material";
+import { ChangeEvent, FC } from "react";
+
+import { applyFilter } from "../../lib";
+import { IProps } from "../../model";
+
+export const NumberInput: FC<IProps> = ({ label, setValue, value }) => {
+	function onChange(event: ChangeEvent<HTMLInputElement>) {
+		const newValue = { ...value, 1: event.target.value };
+		setValue(newValue);
+		applyFilter(newValue);
+	}
+
+	return (
+		<TextField
+			label={label}
+			value={value[1]}
+			type={"number"}
+			onChange={onChange}
+			size={"small"}
+			autoComplete={"off"}
+		/>
+	);
+};

package/src/features/column-filters/ui/NumberInput/index.ts

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

package/src/features/column-filters/ui/SelectFilter/index.ts

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

package/src/features/column-filters/ui/SelectFilter/model/index.ts

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

package/src/features/column-filters/ui/SelectFilter/model/options/index.ts

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

package/src/features/column-filters/ui/SelectFilter/model/options/options.ts

@@ -0,0 +1,66 @@
+import { EColumnFilter, EColumnFiltersGroup } from "shared/model/enums";
+import { IContextSelectValue } from "shared/ui/ContextSelect";
+
+const dateBetween: IContextSelectValue = {
+	id: EColumnFilter.DateBetween,
+	name: "Between",
+};
+const dateEqual: IContextSelectValue = {
+	id: EColumnFilter.DateEqual,
+	name: "Equal",
+};
+const dateFrom: IContextSelectValue = {
+	id: EColumnFilter.DateFrom,
+	name: "From",
+};
+const dateTo: IContextSelectValue = { id: EColumnFilter.DateTo, name: "To" };
+const numberBetween: IContextSelectValue = {
+	id: EColumnFilter.NumberBetween,
+	name: "Between",
+};
+const numberEqual: IContextSelectValue = {
+	id: EColumnFilter.NumberEqual,
+	name: "Equal",
+};
+const numberFrom: IContextSelectValue = {
+	id: EColumnFilter.NumberFrom,
+	name: "From",
+};
+const numberTo: IContextSelectValue = {
+	id: EColumnFilter.NumberTo,
+	name: "To",
+};
+const textContain: IContextSelectValue = {
+	id: EColumnFilter.TextContain,
+	name: "Contains",
+};
+const textEqual: IContextSelectValue = {
+	id: EColumnFilter.TextEqual,
+	name: "Equal",
+};
+const textNotContain: IContextSelectValue = {
+	id: EColumnFilter.TextNotContain,
+	name: "Does not contain",
+};
+const textNotEqual: IContextSelectValue = {
+	id: EColumnFilter.TextNotEqual,
+	name: "Not equal",
+};
+
+const numberFilters = [numberEqual, numberFrom, numberTo, numberBetween];
+
+export const options: IOptions = {
+	[EColumnFiltersGroup.Boolean]: [],
+	[EColumnFiltersGroup.Date]: [dateEqual, dateFrom, dateTo, dateBetween],
+	[EColumnFiltersGroup.MultipleSelect]: [],
+	[EColumnFiltersGroup.Number]: numberFilters,
+	[EColumnFiltersGroup.NumberFormatted]: numberFilters,
+	[EColumnFiltersGroup.Text]: [
+		textContain,
+		textNotContain,
+		textEqual,
+		textNotEqual,
+	],
+};
+
+type IOptions = Record<EColumnFiltersGroup, IContextSelectValue[]>;

package/src/features/column-filters/ui/SelectFilter/ui/SelectFilter.tsx

@@ -0,0 +1,50 @@
+import { SelectChangeEvent } from "@mui/material";
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { eventOpenColumnFilters } from "shared/lib/slickgrid";
+import { EColumnFilter } from "shared/model/enums";
+import { ContextSelect } from "shared/ui/ContextSelect";
+
+import { options } from "../model";
+
+export const SelectFilter: FC<IProps> = ({ filterId, setFilterId }) => {
+	const list = options[eventOpenColumnFilters.group];
+	const value = list.some(({ id }) => id === filterId) ? filterId : list[0]?.id;
+
+	function onChange(event: SelectChangeEvent<string | number>) {
+		const { columnId, table } = eventOpenColumnFilters;
+		if (!columnId || !table) return;
+		const args = table.filter.args;
+		const id = event.target.value as number;
+		if (!args.columnFilters) return;
+		table.filter.args = {
+			...args,
+			columnFilters: {
+				...args.columnFilters,
+				[columnId]: {
+					...args.columnFilters[columnId],
+					filterId: id,
+				},
+			},
+		};
+		setFilterId(id);
+	}
+
+	if (!value) return null;
+
+	return (
+		<ContextSelect
+			name={""}
+			list={list}
+			onChange={onChange}
+			width={"100%"}
+			showSelect={false}
+			value={value}
+		/>
+	);
+};
+
+interface IProps {
+	filterId: EColumnFilter;
+	setFilterId: Dispatch<SetStateAction<EColumnFilter>>;
+}

package/src/features/column-filters/ui/SelectFilter/ui/index.ts

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

package/src/features/column-filters/ui/TextInput/TextInput.tsx

@@ -0,0 +1,23 @@
+import { TextField } from "@mui/material";
+import { ChangeEvent, FC } from "react";
+
+import { applyFilter } from "../../lib";
+import { IProps, label } from "../../model";
+
+export const TextInput: FC<Omit<IProps, "label">> = ({ setValue, value }) => {
+	function onChange(event: ChangeEvent<HTMLInputElement>) {
+		const newValue = { ...value, 1: event.target.value };
+		setValue(newValue);
+		applyFilter(newValue);
+	}
+
+	return (
+		<TextField
+			label={label.filter}
+			value={value[1]}
+			onChange={onChange}
+			size={"small"}
+			autoComplete={"off"}
+		/>
+	);
+};

package/src/features/column-filters/ui/TextInput/index.ts

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

package/src/features/column-filters/ui/index.ts

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

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

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

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

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

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

@@ -0,0 +1,25 @@
+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

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