slick-table 0.0.12 → 0.0.14

package/src/features/column-filters/lib/hooks/useOpenMenu.ts

@@ -1,45 +0,0 @@
-import { Dispatch, SetStateAction, useEffect } from "react";
-
-import {
-	IColumnFilterValue,
-	eventOpenColumnFilters,
-} from "shared/lib/slickgrid";
-import { EColumnFilter } from "shared/model/enums";
-
-import { PORTAL_ID, makeVisible } from "entities/portal";
-
-import { defaultValue } from "../../model";
-import { firstIn } from "../select";
-
-export function useOpenMenu(
-	isOpened: boolean,
-	setFilterId: Dispatch<SetStateAction<EColumnFilter>>,
-	setValue: Dispatch<SetStateAction<IColumnFilterValue>>,
-) {
-	useEffect(() => {
-		if (!isOpened) return;
-		const menu = document.getElementById(PORTAL_ID);
-		if (!menu) return;
-		const { columnId, group, table, x, y } = eventOpenColumnFilters;
-		const grid = table?.grid;
-		if (!grid) return;
-		const args = table.filter.args;
-		makeVisible(menu, x, y);
-		const { filterId, value } = args.columnFilters?.[columnId] || {};
-		const initialFilterId = filterId || firstIn(group);
-		const initialValue = value || defaultValue;
-		table.filter.args = {
-			...args,
-			columnFilters: {
-				...args.columnFilters,
-				[columnId]: {
-					filterId: initialFilterId,
-					group,
-					value: initialValue,
-				},
-			},
-		};
-		setFilterId(initialFilterId);
-		setValue(initialValue);
-	}, [isOpened]);
-}

package/src/features/column-filters/lib/hooks/useSubscribeToEvent.ts

@@ -1,17 +0,0 @@
-import { Dispatch, SetStateAction, useEffect } from "react";
-
-import { eventOpenColumnFilters } from "shared/lib/slickgrid";
-
-export function useSubscribeToEvent(
-	setIsOpened: Dispatch<SetStateAction<boolean>>,
-) {
-	useEffect(() => {
-		function callback() {
-			setIsOpened(true);
-		}
-		eventOpenColumnFilters.subscribe(callback);
-		return () => {
-			eventOpenColumnFilters.unsubscribe(callback);
-		};
-	}, []);
-}

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

@@ -1,4 +0,0 @@
-export { applyFilter } from "./filter";
-export { useOpenMenu, useSubscribeToEvent } from "./hooks";
-export { datePickerProps } from "./props";
-export { firstIn } from "./select";

package/src/features/column-filters/lib/props/datePickerProps.tsx

@@ -1,11 +0,0 @@
-import moment from "moment";
-
-import { dateFormats } from "shared/model/consts";
-import { EDateFormat } from "shared/model/enums";
-
-export function datePickerProps(value: string) {
-	return {
-		format: EDateFormat.ui,
-		value: value ? moment(value, dateFormats) : null,
-	};
-}

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

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

package/src/features/column-filters/lib/select/firstIn.ts

@@ -1,22 +0,0 @@
-import { EColumnFilter, EColumnFiltersGroup } from "shared/model/enums";
-
-export function firstIn(group: EColumnFiltersGroup): EColumnFilter {
-	switch (group) {
-		case EColumnFiltersGroup.Boolean: {
-			return EColumnFilter.Boolean;
-		}
-		case EColumnFiltersGroup.Date: {
-			return EColumnFilter.DateEqual;
-		}
-		case EColumnFiltersGroup.MultipleSelect: {
-			return EColumnFilter.MultipleSelect;
-		}
-		case EColumnFiltersGroup.Number:
-		case EColumnFiltersGroup.NumberFormatted: {
-			return EColumnFilter.NumberEqual;
-		}
-		case EColumnFiltersGroup.Text: {
-			return EColumnFilter.TextContain;
-		}
-	}
-}

package/src/features/column-filters/lib/select/index.ts

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

package/src/features/column-filters/model/consts/defaultValue.ts

@@ -1,6 +0,0 @@
-import { IColumnFilterValue } from "shared/lib/slickgrid";
-
-export const defaultValue: IColumnFilterValue = {
-	1: "",
-	2: "",
-};

package/src/features/column-filters/model/consts/index.ts

@@ -1,2 +0,0 @@
-export { defaultValue } from "./defaultValue";
-export { label } from "./label";

package/src/features/column-filters/model/consts/label.ts

@@ -1,5 +0,0 @@
-export const label = {
-	filter: "🔎︎ Filter...",
-	from: "🔎︎ From...",
-	to: "🔎︎ To...",
-};

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

@@ -1,2 +0,0 @@
-export { defaultValue, label } from "./consts";
-export { type IProps } from "./types";

package/src/features/column-filters/model/types/IProps.ts

@@ -1,9 +0,0 @@
-import { Dispatch, SetStateAction } from "react";
-
-import { IColumnFilterValue } from "shared/lib/slickgrid";
-
-export interface IProps {
-	label: string;
-	setValue: Dispatch<SetStateAction<IColumnFilterValue>>;
-	value: IColumnFilterValue;
-}

package/src/features/column-filters/model/types/index.ts

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

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

@@ -1,10 +0,0 @@
-import { Checkbox, FormGroup, styled } from "@mui/material";
-
-const CheckboxStyled = styled(Checkbox)({
-	padding: 0,
-});
-const FormGroupStyled = styled(FormGroup)({
-	margin: "0.5em 0 0 1em",
-});
-
-export default { Checkbox: CheckboxStyled, FormGroup: FormGroupStyled };

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

@@ -1,53 +0,0 @@
-import { FormControlLabel } from "@mui/material";
-import { FC } from "react";
-
-import { IColumnFilterValue } from "shared/lib/slickgrid";
-
-import { applyFilter } from "../../lib";
-import { IProps } from "../../model";
-
-import Styled from "./BooleanInput.style";
-
-export const BooleanInput: FC<Props> = ({ setValue, value }) => {
-	function onClick(newValue: IColumnFilterValue) {
-		setValue(newValue);
-		applyFilter(newValue);
-	}
-
-	return (
-		<Styled.FormGroup>
-			<FormControlLabel
-				control={
-					<Styled.Checkbox
-						checked={!value[1] && !value[2]}
-						onClick={() => onClick({ 1: "", 2: "" })}
-						size="small"
-					/>
-				}
-				label={"All"}
-			/>
-			<FormControlLabel
-				control={
-					<Styled.Checkbox
-						checked={Boolean(value[1])}
-						onClick={() => onClick({ 1: "true", 2: "" })}
-						size="small"
-					/>
-				}
-				label={"Yes"}
-			/>
-			<FormControlLabel
-				control={
-					<Styled.Checkbox
-						checked={Boolean(value[2])}
-						onClick={() => onClick({ 1: "", 2: "true" })}
-						size="small"
-					/>
-				}
-				label={"No"}
-			/>
-		</Styled.FormGroup>
-	);
-};
-
-type Props = Omit<IProps, "label">;

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

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

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

@@ -1,10 +0,0 @@
-import { Button, styled } from "@mui/material";
-
-const ButtonStyled = styled(Button)({
-	width: "5em",
-	alignSelf: "flex-end",
-});
-
-export default {
-	Button: ButtonStyled,
-};

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

@@ -1,42 +0,0 @@
-import { Dispatch, FC, SetStateAction } from "react";
-
-import {
-	IColumnFilterValue,
-	eventOpenColumnFilters,
-	headerButtons,
-} from "shared/lib/slickgrid";
-
-import { defaultValue } from "../../model";
-
-import Styled from "./ButtonReset.style";
-
-export const ButtonReset: FC<IProps> = ({ setIsOpened, setValue, value }) => {
-	function reset() {
-		const { columnId, table } = eventOpenColumnFilters;
-		if (!table) return;
-		const grid = table.grid;
-		if (!grid) return;
-		const args = table.filter.args;
-		delete args.columnFilters?.[columnId];
-		table.filter.args = args;
-		headerButtons.resetColumn(table, columnId);
-		setValue(defaultValue);
-		setIsOpened(false);
-	}
-	return (
-		<Styled.Button
-			disabled={!value[1] && !value[2]}
-			onClick={reset}
-			variant={"outlined"}
-			size={"small"}
-		>
-			Reset
-		</Styled.Button>
-	);
-};
-
-interface IProps {
-	setIsOpened: Dispatch<SetStateAction<boolean>>;
-	setValue: Dispatch<SetStateAction<IColumnFilterValue>>;
-	value: IColumnFilterValue;
-}

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

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

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 { IColumnFilterValue } from "shared/lib/slickgrid";
-import { EColumnFilter } from "shared/model/enums";
-
-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";