slick-table 0.0.13 → 0.0.14

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

@@ -1,12 +0,0 @@
-import { Box, styled } from "@mui/material";
-
-const Wrapper = styled(Box)({
-	display: "flex",
-	flexDirection: "column",
-	rowGap: "0.5em",
-	width: "12em",
-});
-
-export default {
-	Wrapper,
-};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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";