@mailstep/design-system 0.8.26 → 0.8.27-beta.0

package/ui/Elements/DatePicker/Datetime/components/Timepicker.js

@@ -0,0 +1,164 @@
+import Icon from "../../../Icon/Icon.js";
+import { FooterRow } from "./FooterRow.js";
+import { FooterRowLabel } from "./FooterRowLabel.js";
+import { useCallback, useEffect, useState } from "react";
+import styled$1, { x } from "@xstyled/styled-components";
+import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker.tsx
+const Btn = styled$1.button`
+  transform: rotate(90deg);
+  font-size: 18px;
+  margin: -4px 0;
+  background-color: transparent !important;
+  border: none;
+  color: ${th$1("colors.lightGray4")};
+  &:disabled:hover {
+    color: ${th$1("colors.lightGray4")};
+    cursor: default;
+  }
+  &:hover {
+    color: ${th$1("colors.red2")};
+    background-color: transparent !important;
+  }
+`;
+const TimeWrapper = styled$1.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  border: 1px solid ${th$1("colors.lightGray2")};
+  border-radius: 6px;
+  padding: 0 4px;
+  margin: 0 4px;
+`;
+const Hours = styled$1.input`
+  font-size: 14px;
+  font-weight: 600;
+  width: 17px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  &:disabled {
+    opacity: 0.5;
+  }
+`;
+const Minutes = styled$1.input`
+  font-weight: 600;
+  font-size: 14px;
+  width: 18px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  &:disabled {
+    opacity: 0.5;
+  }
+`;
+const regExp = "^[0-9]*$";
+const Timepicker = ({ setTime, value, disabled }) => {
+	const initialHours = value?.getHours?.() ?? 0;
+	const initialMinutes = value?.getMinutes?.() ?? 0;
+	const [hours, setHours] = useState(initialHours);
+	const [minutes, setMinutes] = useState(initialMinutes);
+	const increaseHour = useCallback(() => {
+		setHours((prev) => (prev + 1) % 24);
+	}, []);
+	const decreaseHour = useCallback(() => {
+		setHours((prev) => prev === 0 ? 23 : prev - 1);
+	}, []);
+	const increaseMinutes = useCallback(() => {
+		setMinutes((prev) => (prev + 5) % 60);
+	}, []);
+	const decreaseMinutes = useCallback(() => {
+		setMinutes((prev) => (prev - 5 + 60) % 60);
+	}, []);
+	const onHoursChange = useCallback((e) => {
+		if (e.target.value.match(regExp) && Number(e.target.value) <= 23) setHours(Number(e.target.value));
+		else setHours(0);
+	}, []);
+	const onMinutesChange = useCallback((e) => {
+		if (e.target.value.match(regExp) && Number(e.target.value) <= 59) setMinutes(Number(e.target.value));
+		else setMinutes(0);
+	}, []);
+	useEffect(() => {
+		value && setTime("hours", hours);
+	}, [hours]);
+	useEffect(() => {
+		value && setTime("minutes", minutes);
+	}, [minutes]);
+	useEffect(() => {
+		setHours(initialHours);
+	}, [initialHours]);
+	useEffect(() => {
+		setMinutes(initialMinutes);
+	}, [initialMinutes]);
+	return /* @__PURE__ */ jsxs(FooterRow, {
+		disabled,
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Icon, { icon: "clock" }), /* @__PURE__ */ jsx(FooterRowLabel, { children: i18n._({
+			id: "dataGrid.filterCell.time",
+			message: "Time"
+		}) })] }), /* @__PURE__ */ jsx(x.div, {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "flex-start",
+			pt: "4px",
+			w: "fit-content",
+			children: /* @__PURE__ */ jsxs(x.div, {
+				display: "flex",
+				alignItems: "center",
+				children: [
+					/* @__PURE__ */ jsxs(x.div, {
+						display: "flex",
+						flexDirection: "column",
+						children: [/* @__PURE__ */ jsx(Btn, {
+							disabled,
+							onClick: increaseHour,
+							type: "button",
+							children: "‹"
+						}), /* @__PURE__ */ jsx(Btn, {
+							disabled,
+							onClick: decreaseHour,
+							type: "button",
+							children: "›"
+						})]
+					}),
+					/* @__PURE__ */ jsxs(TimeWrapper, { children: [
+						/* @__PURE__ */ jsx(Hours, {
+							value: String(hours).padStart(2, "0"),
+							disabled,
+							onChange: onHoursChange
+						}),
+						/* @__PURE__ */ jsx(x.div, {
+							mx: "1px",
+							children: ":"
+						}),
+						/* @__PURE__ */ jsx(Minutes, {
+							value: String(minutes).padStart(2, "0"),
+							disabled,
+							onChange: onMinutesChange
+						})
+					] }),
+					/* @__PURE__ */ jsxs(x.div, {
+						display: "flex",
+						flexDirection: "column",
+						children: [/* @__PURE__ */ jsx(Btn, {
+							disabled,
+							onClick: increaseMinutes,
+							type: "button",
+							children: "‹"
+						}), /* @__PURE__ */ jsx(Btn, {
+							disabled,
+							onClick: decreaseMinutes,
+							type: "button",
+							children: "›"
+						})]
+					})
+				]
+			})
+		})]
+	});
+};
+//#endregion
+export { Timepicker };

package/ui/Elements/DatePicker/Datetime/components/ViewNavigation.js

@@ -0,0 +1,31 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/DatePicker/Datetime/components/ViewNavigation.tsx
+function ViewNavigation({ onClickPrev, onClickSwitch, onClickNext, switchContent, switchColSpan, switchProps, label }) {
+	return /* @__PURE__ */ jsxs("tr", { children: [
+		/* @__PURE__ */ jsx("th", {
+			className: "rdtPrev",
+			onClick: onClickPrev,
+			children: /* @__PURE__ */ jsx("span", { children: "‹" })
+		}),
+		/* @__PURE__ */ jsx("th", {
+			className: "rdtSwitch",
+			colSpan: switchColSpan,
+			onClick: onClickSwitch,
+			...switchProps,
+			children: switchContent
+		}),
+		/* @__PURE__ */ jsx("th", {
+			className: "rdtNext",
+			onClick: onClickNext,
+			children: /* @__PURE__ */ jsx("span", { children: "›" })
+		}),
+		/* @__PURE__ */ jsx("th", {
+			colSpan: 2,
+			className: "rdtLabel",
+			children: label && label
+		})
+	] });
+}
+//#endregion
+export { ViewNavigation as default };

package/ui/Elements/DatePicker/Datetime/types.d.ts

@@ -1,6 +1,5 @@
-import { FocusEvent, FocusEventHandler, ReactNode } from 'react';
-import { Moment } from 'moment';
-
+import type { FocusEvent, FocusEventHandler, ReactNode } from 'react';
+import type { Moment } from 'moment';
 export type ViewMode = 'years' | 'months' | 'days' | 'time';
 export interface TimeConstraint {
     min: number;

package/ui/Elements/DatePicker/Datetime/types.js

@@ -0,0 +1,14 @@
+//#region packages/ui/Elements/DatePicker/Datetime/types.ts
+let DatePickerRepeat = /* @__PURE__ */ function(DatePickerRepeat) {
+	DatePickerRepeat["EVERY_TODAY"] = "every-today";
+	DatePickerRepeat["EVERY_YESTERDAY"] = "every-yesterday";
+	return DatePickerRepeat;
+}({});
+let TimePickerRepeat = /* @__PURE__ */ function(TimePickerRepeat) {
+	TimePickerRepeat["FROM"] = "from";
+	TimePickerRepeat["TO"] = "to";
+	TimePickerRepeat["AT"] = "at";
+	return TimePickerRepeat;
+}({});
+//#endregion
+export { DatePickerRepeat, TimePickerRepeat };

package/ui/Elements/DatePicker/Datetime/views/DaysView.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 export default class DaysView extends React.Component {
     static defaultProps: {
         isValidDate: () => boolean;

package/ui/Elements/DatePicker/Datetime/views/DaysView.js

@@ -0,0 +1,140 @@
+import { DateRepeater } from "../components/DateRepeater.js";
+import { Timepicker } from "../components/Timepicker.js";
+import ViewNavigation from "../components/ViewNavigation.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/DatePicker/Datetime/views/DaysView.tsx
+var DaysView = class extends React.Component {
+	constructor(..._args) {
+		super(..._args);
+		this._setDate = (e) => {
+			this.props.updateDate(e);
+		};
+	}
+	static {
+		this.defaultProps = {
+			isValidDate: () => true,
+			renderDay: (props, date) => /* @__PURE__ */ jsx("td", {
+				...props,
+				children: date.date()
+			})
+		};
+	}
+	render() {
+		return /* @__PURE__ */ jsx("div", {
+			className: "rdtDays",
+			children: /* @__PURE__ */ jsxs("table", { children: [
+				/* @__PURE__ */ jsxs("thead", { children: [this.renderNavigation(), this.renderDayHeaders()] }),
+				/* @__PURE__ */ jsx("tbody", { children: this.renderDays() }),
+				this.renderFooter()
+			] })
+		});
+	}
+	renderNavigation() {
+		const date = this.props.viewDate;
+		const locale = date.localeData();
+		const label = this.props.label;
+		return /* @__PURE__ */ jsx(ViewNavigation, {
+			onClickPrev: () => this.props.navigate(-1, "months"),
+			onClickSwitch: () => this.props.showView("months"),
+			onClickNext: () => this.props.navigate(1, "months"),
+			switchContent: locale.months(date, "DD[]MMMM") + " " + date.year(),
+			switchColSpan: 3,
+			label,
+			switchProps: { "data-value": this.props.viewDate.month() }
+		});
+	}
+	renderDayHeaders() {
+		return /* @__PURE__ */ jsx("tr", { children: getDaysOfWeek(this.props.viewDate.localeData()).map((day, index) => /* @__PURE__ */ jsx("th", {
+			className: "dow",
+			children: day
+		}, day + index)) });
+	}
+	renderDays() {
+		const date = this.props.viewDate;
+		const startOfMonth = date.clone().startOf("month");
+		const endOfMonth = date.clone().endOf("month");
+		let rows = [
+			[],
+			[],
+			[],
+			[],
+			[],
+			[]
+		];
+		let startDate = date.clone().subtract(1, "months");
+		startDate.date(startDate.daysInMonth()).startOf("week");
+		let endDate = startDate.clone().add(42, "d");
+		let i = 0;
+		while (startDate.isBefore(endDate)) {
+			getRow(rows, i++).push(this.renderDay(startDate, startOfMonth, endOfMonth));
+			startDate.add(1, "d");
+		}
+		return rows.map((r, i) => /* @__PURE__ */ jsx("tr", { children: r }, `${endDate.month()}_${i}`));
+	}
+	renderDay(date, startOfMonth, endOfMonth) {
+		let selectedDate = this.props.selectedDate;
+		let secondValue = this.props.secondValue;
+		let dayProps = {
+			key: date.format("M_D"),
+			"data-value": date.date(),
+			"data-month": date.month(),
+			"data-year": date.year()
+		};
+		let className = "rdtDay";
+		if (date.isBefore(startOfMonth)) className += " rdtOld";
+		else if (date.isAfter(endOfMonth)) className += " rdtNew";
+		if (secondValue && date.isBefore(secondValue) && date.isAfter(selectedDate)) className += " rdtActiveRange";
+		if (secondValue && date.isAfter(secondValue) && date.isBefore(selectedDate)) className += " rdtActiveRange";
+		if (selectedDate && date.isSame(selectedDate, "day")) className += " rdtActive";
+		if (secondValue && date.isSame(secondValue, "day")) className += " rdtActiveSecond";
+		if (date.isSame(this.props.moment(), "day")) className += " rdtToday";
+		if (this.props.isValidDate(date) && !this.props.others?.dateTypeRepeater && !this.props.disabled) dayProps.onClick = this._setDate;
+		else className += " rdtDisabled";
+		if (this.props.others?.dateTypeRepeater || this.props.disabled) className += " rdtDisabled";
+		dayProps.className = className;
+		return this.props.renderDay(dayProps, date.clone(), selectedDate && selectedDate.clone());
+	}
+	renderFooter() {
+		const setTime = this.props.setTime;
+		const onChangeOthers = this.props.onChangeOthers;
+		const reset = this.props.reset;
+		const value = this.props.value;
+		const others = this.props.others;
+		const disabled = this.props.disabled;
+		return /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
+			colSpan: 7,
+			children: [onChangeOthers && /* @__PURE__ */ jsx(DateRepeater, {
+				onChangeOthers,
+				others,
+				reset
+			}), this.props.timeFormat && /* @__PURE__ */ jsx(Timepicker, {
+				setTime,
+				value,
+				disabled: disabled || !value && !others?.dateTypeRepeater,
+				others,
+				onChangeOthers,
+				isSecondDatePicker: this.props.isSecondDatePicker
+			})]
+		}) }) });
+	}
+};
+function getRow(rows, day) {
+	return rows[Math.floor(day / 7)];
+}
+/**
+* Get a list of the days of the week
+* depending on the current locale
+* @return {array} A list with the shortname of the days
+*/
+function getDaysOfWeek(locale) {
+	const first = locale.firstDayOfWeek();
+	let dow = [];
+	let i = 0;
+	locale._weekdaysMin.forEach(function(day) {
+		dow[(7 + i++ - first) % 7] = day;
+	});
+	return dow;
+}
+//#endregion
+export { DaysView as default };

package/ui/Elements/DatePicker/Datetime/views/MonthsView.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 export default class MonthsView extends React.Component {
     render(): import("react/jsx-runtime").JSX.Element;
     renderNavigation(): import("react/jsx-runtime").JSX.Element;

package/ui/Elements/DatePicker/Datetime/views/MonthsView.js

@@ -0,0 +1,77 @@
+import ViewNavigation from "../components/ViewNavigation.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/DatePicker/Datetime/views/MonthsView.tsx
+var MonthsView = class extends React.Component {
+	constructor(..._args) {
+		super(..._args);
+		this._updateSelectedMonth = (event) => {
+			this.props.updateDate(event);
+		};
+	}
+	render() {
+		return /* @__PURE__ */ jsxs("div", {
+			className: "rdtMonths",
+			children: [/* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("thead", { children: this.renderNavigation() }) }), /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: this.renderMonths() }) })]
+		});
+	}
+	renderNavigation() {
+		return /* @__PURE__ */ jsx(ViewNavigation, {
+			onClickPrev: () => this.props.navigate(-1, "years"),
+			onClickSwitch: () => this.props.showView("years"),
+			onClickNext: () => this.props.navigate(1, "years"),
+			switchContent: this.props.viewDate.year(),
+			switchColSpan: "2"
+		});
+	}
+	renderMonths() {
+		let rows = [
+			[],
+			[],
+			[]
+		];
+		for (let month = 0; month < 12; month++) getRow(rows, month).push(this.renderMonth(month));
+		return rows.map((months, i) => /* @__PURE__ */ jsx("tr", { children: months }, i));
+	}
+	renderMonth(month) {
+		const selectedDate = this.props.selectedDate;
+		let className = "rdtMonth";
+		let onClick;
+		if (this.isDisabledMonth(month)) className += " rdtDisabled";
+		else onClick = this._updateSelectedMonth;
+		if (selectedDate && selectedDate.year() === this.props.viewDate.year() && selectedDate.month() === month) className += " rdtActive";
+		let props = {
+			key: month,
+			className,
+			"data-value": month,
+			onClick
+		};
+		if (this.props.renderMonth) return this.props.renderMonth(props, month, this.props.viewDate.year(), this.props.selectedDate && this.props.selectedDate.clone());
+		return /* @__PURE__ */ jsx("td", {
+			...props,
+			children: this.getMonthText(month)
+		});
+	}
+	isDisabledMonth(month) {
+		let isValidDate = this.props.isValidDate;
+		if (!isValidDate) return false;
+		let date = this.props.viewDate.clone().set({ month });
+		let day = date.endOf("month").date() + 1;
+		while (day-- > 1) if (isValidDate(date.date(day))) return false;
+		return true;
+	}
+	getMonthText(month) {
+		const localMoment = this.props.viewDate;
+		return capitalize(localMoment.localeData().monthsShort(localMoment.month(month)).substring(0, 3));
+	}
+};
+function getRow(rows, year) {
+	if (year < 4) return rows[0];
+	if (year < 8) return rows[1];
+	return rows[2];
+}
+function capitalize(str) {
+	return str.charAt(0).toUpperCase() + str.slice(1);
+}
+//#endregion
+export { MonthsView as default };

package/ui/Elements/DatePicker/Datetime/views/YearsView.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 export default class YearsView extends React.Component {
     static defaultProps: {
         renderYear: (props: any, year: any) => import("react/jsx-runtime").JSX.Element;

package/ui/Elements/DatePicker/Datetime/views/YearsView.js

@@ -0,0 +1,86 @@
+import ViewNavigation from "../components/ViewNavigation.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/DatePicker/Datetime/views/YearsView.tsx
+var YearsView = class extends React.Component {
+	constructor(..._args) {
+		super(..._args);
+		this.disabledYearsCache = {};
+		this._updateSelectedYear = (event) => {
+			this.props.updateDate(event);
+		};
+	}
+	static {
+		this.defaultProps = { renderYear: (props, year) => /* @__PURE__ */ jsx("td", {
+			...props,
+			children: year
+		}) };
+	}
+	render() {
+		return /* @__PURE__ */ jsxs("div", {
+			className: "rdtYears",
+			children: [/* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("thead", { children: this.renderNavigation() }) }), /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: this.renderYears() }) })]
+		});
+	}
+	renderNavigation() {
+		const viewYear = this.getViewYear();
+		return /* @__PURE__ */ jsx(ViewNavigation, {
+			onClickPrev: () => this.props.navigate(-10, "years"),
+			onClickSwitch: () => this.props.showView("years"),
+			onClickNext: () => this.props.navigate(10, "years"),
+			switchContent: `${viewYear}-${viewYear + 9}`
+		});
+	}
+	renderYears() {
+		const viewYear = this.getViewYear();
+		let rows = [
+			[],
+			[],
+			[]
+		];
+		for (let year = viewYear - 1; year < viewYear + 11; year++) getRow(rows, year - viewYear).push(this.renderYear(year));
+		return rows.map((years, i) => /* @__PURE__ */ jsx("tr", { children: years }, i));
+	}
+	renderYear(year) {
+		const selectedYear = this.getSelectedYear();
+		let className = "rdtYear";
+		let onClick;
+		if (this.isDisabledYear(year)) className += " rdtDisabled";
+		else onClick = this._updateSelectedYear;
+		if (selectedYear === year) className += " rdtActive";
+		let props = {
+			key: year,
+			className,
+			"data-value": year,
+			onClick
+		};
+		return this.props.renderYear(props, year, this.props.selectedDate && this.props.selectedDate.clone());
+	}
+	getViewYear() {
+		return parseInt(this.props.viewDate.year() / 10, 10) * 10;
+	}
+	getSelectedYear() {
+		return this.props.selectedDate && this.props.selectedDate.year();
+	}
+	isDisabledYear(year) {
+		let cache = this.disabledYearsCache;
+		if (cache[year] !== void 0) return cache[year];
+		let isValidDate = this.props.isValidDate;
+		if (!isValidDate) return false;
+		let date = this.props.viewDate.clone().set({ year });
+		let day = date.endOf("year").dayOfYear() + 1;
+		while (day-- > 1) if (isValidDate(date.dayOfYear(day))) {
+			cache[year] = false;
+			return false;
+		}
+		cache[year] = true;
+		return true;
+	}
+};
+function getRow(rows, year) {
+	if (year < 3) return rows[0];
+	if (year < 7) return rows[1];
+	return rows[2];
+}
+//#endregion
+export { YearsView as default };

package/ui/Elements/DatePicker/index.d.ts

@@ -1,4 +1,3 @@
-import { default as DatePicker } from './DatePicker';
-
+import DatePicker from './DatePicker';
 export { DatePickerRepeat, TimePickerRepeat } from './Datetime/types';
 export default DatePicker;

package/ui/Elements/DatePicker/index.js

@@ -0,0 +1,6 @@
+import { DatePickerRepeat, TimePickerRepeat } from "./Datetime/types.js";
+import DatePicker_default$1 from "./DatePicker.js";
+//#region packages/ui/Elements/DatePicker/index.ts
+var DatePicker_default = DatePicker_default$1;
+//#endregion
+export { DatePickerRepeat, TimePickerRepeat, DatePicker_default as default };

package/ui/Elements/DatePicker/styles.d.ts

@@ -1 +1 @@
-export declare const DatePickerBase: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+export declare const DatePickerBase: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;