@mailstep/design-system 0.8.30 → 0.8.31-beta.2

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

@@ -1,140 +1,151 @@
-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
-			})]
-		}) }) });
-	}
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import React from 'react';
+import { DateRepeater } from '../components/DateRepeater';
+import { Timepicker } from '../components/Timepicker';
+import ViewNavigation from '../components/ViewNavigation';
+var DaysView = /** @class */ (function (_super) {
+    __extends(DaysView, _super);
+    function DaysView() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._setDate = function (e) {
+            _this.props.updateDate(e);
+        };
+        return _this;
+    }
+    DaysView.prototype.render = function () {
+        return (_jsx("div", { className: "rdtDays", children: _jsxs("table", { children: [_jsxs("thead", { children: [this.renderNavigation(), this.renderDayHeaders()] }), _jsx("tbody", { children: this.renderDays() }), this.renderFooter()] }) }));
+    };
+    DaysView.prototype.renderNavigation = function () {
+        var _this = this;
+        var date = this.props.viewDate;
+        var locale = date.localeData();
+        var label = this.props.label;
+        return (_jsx(ViewNavigation, { onClickPrev: function () { return _this.props.navigate(-1, 'months'); }, onClickSwitch: function () { return _this.props.showView('months'); }, onClickNext: function () { return _this.props.navigate(1, 'months'); }, switchContent: locale.months(date, 'DD[]MMMM') + ' ' + date.year(), switchColSpan: 3, label: label, switchProps: { 'data-value': this.props.viewDate.month() } }));
+    };
+    DaysView.prototype.renderDayHeaders = function () {
+        var locale = this.props.viewDate.localeData();
+        var dayItems = getDaysOfWeek(locale).map(function (day, index) { return (_jsx("th", { className: "dow", children: day }, day + index)); });
+        return _jsx("tr", { children: dayItems });
+    };
+    DaysView.prototype.renderDays = function () {
+        var date = this.props.viewDate;
+        var startOfMonth = date.clone().startOf('month');
+        var endOfMonth = date.clone().endOf('month');
+        // We need 42 days in 6 rows
+        // starting in the last week of the previous month
+        var rows = [[], [], [], [], [], []];
+        var startDate = date.clone().subtract(1, 'months');
+        startDate.date(startDate.daysInMonth()).startOf('week');
+        var endDate = startDate.clone().add(42, 'd');
+        var i = 0;
+        while (startDate.isBefore(endDate)) {
+            var row = getRow(rows, i++);
+            row.push(this.renderDay(startDate, startOfMonth, endOfMonth));
+            startDate.add(1, 'd');
+        }
+        return rows.map(function (r, i) { return _jsx("tr", { children: r }, "".concat(endDate.month(), "_").concat(i)); });
+    };
+    DaysView.prototype.renderDay = function (date, startOfMonth, endOfMonth) {
+        var _a, _b;
+        var selectedDate = this.props.selectedDate;
+        var secondValue = this.props.secondValue;
+        var dayProps = {
+            key: date.format('M_D'),
+            'data-value': date.date(),
+            'data-month': date.month(),
+            'data-year': date.year()
+        };
+        var 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) && !((_a = this.props.others) === null || _a === void 0 ? void 0 : _a.dateTypeRepeater) && !this.props.disabled) {
+            dayProps.onClick = this._setDate;
+        }
+        else {
+            className += ' rdtDisabled';
+        }
+        if (((_b = this.props.others) === null || _b === void 0 ? void 0 : _b.dateTypeRepeater) || this.props.disabled) {
+            className += ' rdtDisabled';
+        }
+        dayProps.className = className;
+        return this.props.renderDay(dayProps, date.clone(), selectedDate && selectedDate.clone());
+    };
+    DaysView.prototype.renderFooter = function () {
+        var setTime = this.props.setTime;
+        var onChangeOthers = this.props.onChangeOthers;
+        var reset = this.props.reset;
+        var value = this.props.value;
+        var others = this.props.others;
+        var disabled = this.props.disabled;
+        return (_jsx("tfoot", { children: _jsx("tr", { children: _jsxs("td", { colSpan: 7, children: [onChangeOthers && _jsx(DateRepeater, { onChangeOthers: onChangeOthers, others: others, reset: reset }), this.props.timeFormat && (_jsx(Timepicker, { setTime: setTime, value: value, disabled: disabled || (!value && !(others === null || others === void 0 ? void 0 : others.dateTypeRepeater)), others: others, onChangeOthers: onChangeOthers, isSecondDatePicker: this.props.isSecondDatePicker }))] }) }) }));
+    };
+    DaysView.defaultProps = {
+        isValidDate: function () { return true; },
+        renderDay: function (props, date) { return _jsx("td", __assign({}, props, { children: date.date() })); }
+    };
+    return DaysView;
+}(React.Component));
+export default DaysView;
 function getRow(rows, day) {
-	return rows[Math.floor(day / 7)];
+    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
-*/
+ * 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;
+    var first = locale.firstDayOfWeek();
+    var dow = [];
+    var 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,4 +1,5 @@
-import React from 'react';
+import { default as 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

@@ -1,77 +1,111 @@
-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));
-	}
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import React from 'react';
+import ViewNavigation from '../components/ViewNavigation';
+var MonthsView = /** @class */ (function (_super) {
+    __extends(MonthsView, _super);
+    function MonthsView() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._updateSelectedMonth = function (event) {
+            _this.props.updateDate(event);
+        };
+        return _this;
+    }
+    MonthsView.prototype.render = function () {
+        return (_jsxs("div", { className: "rdtMonths", children: [_jsx("table", { children: _jsx("thead", { children: this.renderNavigation() }) }), _jsx("table", { children: _jsx("tbody", { children: this.renderMonths() }) })] }));
+    };
+    MonthsView.prototype.renderNavigation = function () {
+        var _this = this;
+        var year = this.props.viewDate.year();
+        return (_jsx(ViewNavigation, { onClickPrev: function () { return _this.props.navigate(-1, 'years'); }, onClickSwitch: function () { return _this.props.showView('years'); }, onClickNext: function () { return _this.props.navigate(1, 'years'); }, switchContent: year, switchColSpan: "2" }));
+    };
+    MonthsView.prototype.renderMonths = function () {
+        // 12 months in 3 rows for every view
+        var rows = [[], [], []];
+        for (var month = 0; month < 12; month++) {
+            var row = getRow(rows, month);
+            row.push(this.renderMonth(month));
+        }
+        return rows.map(function (months, i) { return _jsx("tr", { children: months }, i); });
+    };
+    MonthsView.prototype.renderMonth = function (month) {
+        var selectedDate = this.props.selectedDate;
+        var className = 'rdtMonth';
+        var onClick;
+        if (this.isDisabledMonth(month)) {
+            className += ' rdtDisabled';
+        }
+        else {
+            onClick = this._updateSelectedMonth;
+        }
+        if (selectedDate && selectedDate.year() === this.props.viewDate.year() && selectedDate.month() === month) {
+            className += ' rdtActive';
+        }
+        var props = { key: month, className: className, 'data-value': month, onClick: onClick };
+        if (this.props.renderMonth) {
+            return this.props.renderMonth(props, month, this.props.viewDate.year(), this.props.selectedDate && this.props.selectedDate.clone());
+        }
+        return _jsx("td", __assign({}, props, { children: this.getMonthText(month) }));
+    };
+    MonthsView.prototype.isDisabledMonth = function (month) {
+        var isValidDate = this.props.isValidDate;
+        if (!isValidDate) {
+            // If no validator is set, all days are valid
+            return false;
+        }
+        // If one day in the month is valid, the year should be clickable
+        var date = this.props.viewDate.clone().set({ month: month });
+        var day = date.endOf('month').date() + 1;
+        while (day-- > 1) {
+            if (isValidDate(date.date(day))) {
+                return false;
+            }
+        }
+        return true;
+    };
+    MonthsView.prototype.getMonthText = function (month) {
+        var localMoment = this.props.viewDate;
+        var monthStr = localMoment.localeData().monthsShort(localMoment.month(month));
+        return capitalize(monthStr.substring(0, 3));
+    };
+    return MonthsView;
+}(React.Component));
+export default MonthsView;
 function getRow(rows, year) {
-	if (year < 4) return rows[0];
-	if (year < 8) return rows[1];
-	return rows[2];
+    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);
+    return str.charAt(0).toUpperCase() + str.slice(1);
 }
-//#endregion
-export { MonthsView as default };

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

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