@evenicanpm/admin-integrate 1.1.0 → 1.2.0

package/src/components/list-filter/date-range-filter.tsx

@@ -6,96 +6,97 @@ import React, { useState } from "react";
 import { DateRangeFilter, FilterProps } from "./list-filter-types";
 
 const DateRangeFilterComponent: React.FC<FilterProps<DateRangeFilter>> = ({
-  filter,
-  onSet,
-  onError,
-  current,
+	filter,
+	onSet,
+	onError,
+	current,
 }) => {
-  const t = useTranslations("Integrate.Filter");
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const t = useTranslations("Integrate");
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  const [value, setValue] = useState(current);
-  const [error, setError] = useState<{ start?: string; end?: string } | null>(
-    null,
-  );
+	const [value, setValue] = useState(current);
+	const [error, setError] = useState<{
+		start?: string | null;
+		end?: string | null;
+	} | null>(null);
 
-  const updateValue = (part: "start" | "end", date: null | Date | string) => {
-    const dateValue =
-      typeof date !== "string" && !isNaN(date?.getTime())
-        ? date.toISOString()
-        : null;
+	const updateValue = (part: "start" | "end", date: null | Date | string) => {
+		const dateValue: string | null =
+			date !== null && typeof date !== "string" && !isNaN(date?.getTime())
+				? date.toISOString()
+				: null;
 
-    let dateRangeValue = {
-      start: null,
-      end: null,
-      ...value,
-      [part]: dateValue,
-    };
+		let dateRangeValue: typeof current = {
+			start: null,
+			end: null,
+			...value,
+			[part]: dateValue,
+		};
 
-    if (!dateRangeValue.start && !dateRangeValue.end) dateRangeValue = null;
+		if (!dateRangeValue.start && !dateRangeValue.end) dateRangeValue = null;
 
-    setValue(dateRangeValue);
-    onSet(dateRangeValue);
-  };
+		setValue(dateRangeValue);
+		onSet(dateRangeValue);
+	};
 
-  const updateError = (part: "start" | "end", newError: string | null) => {
-    let errorValue = {
-      start: null,
-      end: null,
-      ...(error ? error : {}),
-      [part]: newError ? t("invalidDate") : null,
-    };
+	const updateError = (part: "start" | "end", newError: string | null) => {
+		let errorValue: typeof error = {
+			start: null,
+			end: null,
+			...(error ? error : {}),
+			[part]: newError ? t("Filter.invalidDate") : null,
+		};
 
-    if (!errorValue.start && !errorValue.end) errorValue = null;
+		if (!errorValue.start && !errorValue.end) errorValue = null;
 
-    setError(errorValue);
-    onError(!!errorValue);
-  };
+		setError(errorValue);
+		onError(!!errorValue);
+	};
 
-  return (
-    <FormControl>
-      <Typography>{filter.label}</Typography>
-      <Box sx={styles.dateRange}>
-        <DatePicker
-          value={value?.start ? new Date(value.start) : null}
-          label={t("dateStartLabel")}
-          onChange={(v) => updateValue("start", v)}
-          onError={(e) => updateError("start", e)}
-          slotProps={{
-            field: { clearable: true },
-            textField: {
-              helperText: error?.start || "",
-            },
-          }}
-          maxDate={(value?.end && new Date(value.end)) || ""}
-        />
-        <DatePicker
-          value={value?.end ? new Date(value.end) : null}
-          label={t("dateEndLabel")}
-          onChange={(v) => updateValue("end", v)}
-          onError={(e) => updateError("end", e)}
-          slotProps={{
-            field: { clearable: true },
-            textField: {
-              helperText: error?.end || "",
-            },
-          }}
-          minDate={(value?.start && new Date(value.start)) || ""}
-        />
-      </Box>
-    </FormControl>
-  );
+	return (
+		<FormControl>
+			<Typography>{t(filter.label)}</Typography>
+			<Box sx={styles.dateRange}>
+				<DatePicker
+					value={value?.start ? new Date(value.start) : null}
+					label={t("Filter.dateStartLabel")}
+					onChange={(v) => updateValue("start", v)}
+					onError={(e) => updateError("start", e)}
+					slotProps={{
+						field: { clearable: true },
+						textField: {
+							helperText: error?.start || "",
+						},
+					}}
+					maxDate={(value?.end && new Date(value.end)) || ""}
+				/>
+				<DatePicker
+					value={value?.end ? new Date(value.end) : null}
+					label={t("Filter.dateEndLabel")}
+					onChange={(v) => updateValue("end", v)}
+					onError={(e) => updateError("end", e)}
+					slotProps={{
+						field: { clearable: true },
+						textField: {
+							helperText: error?.end || "",
+						},
+					}}
+					minDate={(value?.start && new Date(value.start)) || ""}
+				/>
+			</Box>
+		</FormControl>
+	);
 };
 
 const getStyles = (theme: Theme) => ({
-  dateRange: {
-    display: "flex",
-    width: "100%",
-    columnGap: theme.spacing(2),
-    marginTop: theme.spacing(1),
-    "& > *": { flex: "1" },
-  },
+	dateRange: {
+		display: "flex",
+		width: "100%",
+		columnGap: theme.spacing(2),
+		marginTop: theme.spacing(1),
+		"& > *": { flex: "1" },
+	},
 });
 
 export default DateRangeFilterComponent;

package/src/components/list-filter/list-filter-types.ts

@@ -1,70 +1,70 @@
 export interface FilterOption {
-  id: number | string;
-  value: string;
+	id: number | string;
+	value: string;
 }
 
 interface FilterBase {
-  label: string;
-  sort?: number;
+	label: string;
+	sort?: number;
 }
 
 export interface DateFilter extends FilterBase {
-  type: "date";
-  value: string | null;
+	type: "date";
+	value: string | null;
 }
 
 export interface DateRangeFilter extends FilterBase {
-  type: "dateRange";
-  value: { start: string | null; end: string | null } | null;
+	type: "dateRange";
+	value: { start: string | null; end: string | null } | null;
 }
 
 export interface SelectFilter extends FilterBase {
-  type: "select";
-  value: [FilterOption] | null;
-  options: FilterOption[];
+	type: "select";
+	value: [FilterOption] | null;
+	options: FilterOption[];
 }
 
 export interface MultiSelectFilter extends FilterBase {
-  type: "multiSelect";
-  value: FilterOption[] | null;
-  options: FilterOption[];
+	type: "multiSelect";
+	value: FilterOption[] | null;
+	options: FilterOption[];
 }
 
 export interface Filters {
-  [filterName: string]:
-    | DateFilter
-    | DateRangeFilter
-    | SelectFilter
-    | MultiSelectFilter;
+	[filterName: string]:
+		| DateFilter
+		| DateRangeFilter
+		| SelectFilter
+		| MultiSelectFilter;
 }
 
 export type FilterResult<FilterShape extends Filters> = {
-  [Property in keyof FilterShape]: FilterShape[Property]["value"];
+	[Property in keyof FilterShape]: FilterShape[Property]["value"];
 };
 
 export interface ListFilterOutput<FilterShape extends Filters> {
-  filters: FilterResult<FilterShape>;
-  search: string | null;
-  itemsPerPage: number | null;
+	filters: FilterResult<FilterShape>;
+	search: string | null;
+	itemsPerPage: number | null;
 }
 
 export interface FilterConfig {
-  pagination:
-    | {
-        pageOptions?: number[];
-        pageDefault?: number;
-      }
-    | false;
-  search?:
-    | {
-        label?: string;
-      }
-    | false;
+	pagination:
+		| {
+				pageOptions?: number[];
+				pageDefault?: number;
+		  }
+		| false;
+	search?:
+		| {
+				label?: string;
+		  }
+		| false;
 }
 
 export interface FilterProps<Filter extends { value: unknown }> {
-  filter: Filter;
-  onSet: (value: Filter["value"]) => void;
-  onError: (error: boolean) => void;
-  current: Filter["value"];
+	filter: Filter;
+	onSet: (value: Filter["value"]) => void;
+	onError: (error: boolean) => void;
+	current: Filter["value"];
 }