@alfalab/core-components-date-time-input 1.1.0

package/esm/Component.js

@@ -0,0 +1,170 @@
+import React, { useRef, useState, useEffect } from 'react';
+import cn from 'classnames';
+import mergeRefs from 'react-merge-refs';
+import { useMedia } from '@alfalab/hooks';
+import { Input } from '@alfalab/core-components-input/esm';
+import { CalendarMobile, dateInLimits, Calendar } from '@alfalab/core-components-calendar/esm';
+import { Popover } from '@alfalab/core-components-popover/esm';
+import { IconButton } from '@alfalab/core-components-icon-button/esm';
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import 'date-fns/parse';
+import 'date-fns/isValid';
+import { getDateWithoutTime, setTimeToDate, DATE_MASK, format, getFullDateTime, isCompleteDateInput, isValid, parseTimestampToDate } from './utils/format.js';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(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);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var styles = {"component":"date-time-input__component_m484y","calendarContainer":"date-time-input__calendarContainer_m484y","calendarResponsive":"date-time-input__calendarResponsive_m484y","block":"date-time-input__block_m484y"};
+require('./index.css')
+
+/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
+var DateTimeInput = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var _d;
+    var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, picker = _a.picker, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _f = _a.popoverPosition, popoverPosition = _f === void 0 ? 'bottom-start' : _f, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip, _g = _a.Calendar, Calendar$1 = _g === void 0 ? Calendar : _g, _h = _a.calendarProps, calendarProps = _h === void 0 ? {} : _h, defaultMonth = _a.defaultMonth, _j = _a.minDate, minDate = _j === void 0 ? calendarProps.minDate : _j, _k = _a.maxDate, maxDate = _k === void 0 ? calendarProps.maxDate : _k, _l = _a.offDays, offDays = _l === void 0 ? calendarProps.offDays || [] : _l, _m = _a.events, events = _m === void 0 ? calendarProps.events || [] : _m, _o = _a.defaultOpen, defaultOpen = _o === void 0 ? false : _o, error = _a.error, restProps = __rest(_a, ["className", "inputClassName", "popoverClassName", "disabled", "readOnly", "picker", "defaultValue", "value", "onChange", "onComplete", "rightAddons", "useAnchorWidth", "block", "popoverPosition", "zIndexPopover", "preventFlip", "Calendar", "calendarProps", "defaultMonth", "minDate", "maxDate", "offDays", "events", "defaultOpen", "error"]);
+    var view = useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop')[0];
+    var inputRef = useRef(null);
+    var calendarRef = useRef(null);
+    var _p = useState(propValue || defaultValue), value = _p[0], setValue = _p[1];
+    var _q = useState(false), open = _q[0], setOpen = _q[1];
+    var calendarValue = value ? getDateWithoutTime(value).getTime() : undefined;
+    var inputDisabled = disabled || readOnly;
+    var CalendarComponent = view === 'desktop' ? Calendar$1 : CalendarMobile;
+    var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
+    useEffect(function () {
+        setOpen(defaultOpen);
+    }, [defaultOpen]);
+    var checkInputValueIsValid = function (newInputValue) {
+        if (!newInputValue || error)
+            return false;
+        var dateValue = getDateWithoutTime(newInputValue).getTime();
+        return (dateValue &&
+            dateInLimits(dateValue, minDate, maxDate) &&
+            !offDays.includes(dateValue));
+    };
+    var handleInputWrapperFocus = function (event) {
+        if (view === 'desktop') {
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
+        }
+    };
+    var handleBlur = function (event) {
+        if (view === 'desktop') {
+            var target = (event.relatedTarget || document.activeElement);
+            if (calendarRef.current && calendarRef.current.contains(target) === false) {
+                setOpen(false);
+                setValue(function (prevValue) { return setTimeToDate(prevValue); });
+            }
+        }
+    };
+    var handleChange = function (event) {
+        var newValue = event.target.value;
+        if (newValue.length > DATE_MASK.length)
+            return;
+        // Позволяем вводить только цифры, точки, запятую, двоеточие и пробел
+        if (/[^\d., :\d.]/.test(newValue)) {
+            return;
+        }
+        var dots = newValue.match(/\./g);
+        var colon = newValue.match(/\:/g);
+        var comma = newValue.match(/\,/g);
+        // Не даем вводить больше, чем 2 точки, 1 двоеточие и 1 запятую
+        if ((dots && dots.length > 2) ||
+            (colon && colon.length > 1) ||
+            (comma && comma.length > 1)) {
+            return;
+        }
+        var formattedValue = format(newValue);
+        var date = getFullDateTime(formattedValue);
+        setValue(formattedValue);
+        if (onChange)
+            onChange(event, { date: date, value: formattedValue });
+        if (isCompleteDateInput(formattedValue)) {
+            var valid = isValid(formattedValue);
+            if (!valid)
+                return;
+            if (onComplete) {
+                onComplete(event, { date: date, value: formattedValue });
+            }
+        }
+    };
+    var handleCalendarClose = function () {
+        setOpen(false);
+    };
+    var handleClear = function () {
+        setValue('');
+    };
+    var handleCalendarChange = function (date) {
+        if (date) {
+            setValue(parseTimestampToDate(date));
+        }
+    };
+    var handleCalendarWrapperMouseDown = function (event) {
+        // Не дает инпуту терять фокус при выборе даты
+        event.preventDefault();
+    };
+    var handleInputWrapperClick = function () {
+        if (view === 'desktop' && !open) {
+            setOpen(true);
+        }
+    };
+    var handleIconButtonClick = function () {
+        if (!open)
+            setOpen(true);
+    };
+    var renderCalendar = function () { return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
+        React.createElement(CalendarComponent, __assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(value) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
+    return (React.createElement("div", { className: cn(styles.component, className, (_b = {},
+            _b[styles.block] = block,
+            _b)), onClick: inputDisabled ? undefined : handleInputWrapperClick, onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
+        React.createElement(Input, __assign({}, restProps, { block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, error: error, rightAddons: React.createElement(React.Fragment, null,
+                rightAddons,
+                picker && (React.createElement(IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) })),
+        picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, (_c = {},
+                _c[styles.calendarResponsive] = calendarResponsive,
+                _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+});
+
+export { DateTimeInput };

package/esm/index.css

@@ -0,0 +1,64 @@
+/* hash: z39zw */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-m: 16px;
+}
+:root {
+    --border-radius-s: 4px;
+}
+:root {
+    --calendar-width: 344px;
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* holidays */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+:root {
+    --calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
+}
+.date-time-input__component_m484y {
+    display: inline-block;
+    outline: none;
+    position: relative;
+}
+.date-time-input__calendarContainer_m484y {
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: var(--calendar-popover-border-radius)
+}
+@media (max-width: 374px) {
+.date-time-input__calendarContainer_m484y {
+        width: 100%;
+        min-width: 288px
+}
+    }
+.date-time-input__calendarResponsive_m484y {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
+.date-time-input__block_m484y {
+    width: 100%;
+}

package/esm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/esm/index.js

@@ -0,0 +1,13 @@
+export { DateTimeInput } from './Component.js';
+import 'react';
+import 'classnames';
+import 'react-merge-refs';
+import '@alfalab/hooks';
+import '@alfalab/core-components-input/esm';
+import '@alfalab/core-components-calendar/esm';
+import '@alfalab/core-components-popover/esm';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import 'date-fns/parse';
+import 'date-fns/isValid';
+import './utils/format.js';

package/esm/utils/format.d.ts

@@ -0,0 +1,12 @@
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const DATE_MASK: (string | RegExp)[];
+declare const isCompleteDateInput: (input: string) => boolean;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+declare const isValidTimeFormat: (value: string) => boolean;
+declare const isValid: (inputValue: string) => boolean;
+declare const format: (value: string) => string;
+declare const parseTimestampToDate: (timestamp: number) => string;
+declare const getDateWithoutTime: (value: string) => Date;
+declare const getFullDateTime: (value: string) => Date;
+declare const setTimeToDate: (value: string) => string;
+export { DATE_FORMAT, DATE_MASK, isCompleteDateInput, parseDateString, isValidTimeFormat, isValid, format, parseTimestampToDate, getDateWithoutTime, getFullDateTime, setTimeToDate };

package/esm/utils/format.js

@@ -0,0 +1,128 @@
+import parse from 'date-fns/parse';
+import dateFnsIsValid from 'date-fns/isValid';
+
+/* eslint-disable no-useless-escape */
+var DATE_FORMAT = 'dd.MM.yyyy';
+var DATE_MASK = [
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    ',',
+    ' ',
+    /\d/,
+    /\d/,
+    ':',
+    /\d/,
+    /\d/,
+];
+var isCompleteDateInput = function (input) { return input.length === DATE_MASK.length; };
+var parseDateString = function (value, dateFormat) {
+    if (dateFormat === void 0) { dateFormat = DATE_FORMAT; }
+    return parse(value, dateFormat, new Date());
+};
+var isValidTimeFormat = function (value) {
+    var timeArr = value.split(':');
+    var hours = timeArr[0];
+    var mins = timeArr[1];
+    if (hours.length !== 2 || Number(hours) > 23) {
+        return false;
+    }
+    if (mins.length !== 2 || Number(mins) > 59) {
+        return false;
+    }
+    return true;
+};
+var isValid = function (inputValue) {
+    var inputValueArr = inputValue.split(', ');
+    var date = inputValueArr[0];
+    var time = inputValueArr[1];
+    return (!inputValue ||
+        (isCompleteDateInput(inputValue) &&
+            dateFnsIsValid(parseDateString(date)) &&
+            isValidTimeFormat(time)));
+};
+var format = function (value) {
+    return value
+        .replace(/^(\d\d)(\d)$/, '$1.$2') // 121 => 12.1
+        .replace(/^(\d\d)\.(\d\d)(\d)$/, '$1.$2.$3') // 12.122 => 12.12.2
+        .replace(/^(\d\d)\d\.(.*)/, '$1.$2') // 123.12.2005 => 12.12.2005
+        .replace(/^(\d\d\.\d\d)\d\.(.*)/, '$1.$2') // 12.123.2005 => 12.12.2005
+        .replace(/\.$/, '') // 12. => 12
+        .replace(/\ $/, '') // 1 2 => 12
+        .replace(/\:$/, '') // 1:2 => 12
+        .replace(/^(\d\d)(\d.*)/, '$1.$2') // 1212 => 12.12
+        .replace(/^(\d\d.\d\d)(\d.*)/, '$1.$2') // 12.122 => 12.12.2
+        .replace(/^(\d\d\.\d\d)(\d\d\d\d)/, '$1.$2') // 12.122005 => 12.12.2005
+        .replace(/^(\d\d)(\d\d\.\d\d\d\d)/, '$1.$2') // 1212.2005 => 12.12.2005
+        .replace(/^(\d\d.\d\d\.\d\d\d\d),/, '$1') // 12.12.2005 => 12.12.2005
+        .replace(/^(\d\d.\d\d\.\d\d\d\d)(\d)/, '$1, $2') // 12.12.20050 => 12.12.2005, 0
+        .replace(/^(\d\d.\d\d\.\d\d\d\d),(\d.*)/, '$1, $2') // 12.12.2005,00:00 => 12.12.2005, 00:00
+        .replace(/^(\d\d.\d\d\.\d\d\d\d) (\d.*)/, '$1, $2') // 12.12.2005 00:00 => 12.12.2005, 00:00
+        .replace(/^(\d\d.\d\d\.\d\d\d\d)(\d.*)/, '$1, $2') // 12.12.200500:00=> 12.12.2005, 00:00
+        .replace(/^(\d\d.\d\d\.\d\d\d\d), (\d\d):/, '$1, $2') // 12.12.2005, 00: => 12.12.2005, 00
+        .replace(/^(\d\d.\d\d\.\d\d\d\d), (\d\d)(\d)/, '$1, $2:$3');
+}; // 12.12.2005, 000 => 12.12.2005, 00:0
+var parseTimestampToDate = function (timestamp) {
+    var date = new Date(timestamp);
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var day = date.getDate();
+    if (month < 10) {
+        month = "0" + month;
+    }
+    if (day < 10) {
+        day = "0" + day;
+    }
+    return day + "." + month + "." + year;
+};
+var getDateWithoutTime = function (value) {
+    var valueArr = value.split(', ');
+    var day;
+    var month;
+    var year;
+    if (valueArr[0]) {
+        var date_1 = valueArr[0].split('.');
+        day = date_1[0], month = date_1[1], year = date_1[2];
+    }
+    var date = new Date();
+    date.setFullYear(Number(year), Number(month) - 1, Number(day));
+    date.setHours(0, 0, 0, 0);
+    return date;
+};
+var getFullDateTime = function (value) {
+    var valueArr = value.split(', ');
+    var day;
+    var month;
+    var year;
+    var hours;
+    var mins;
+    if (valueArr[0]) {
+        var date = valueArr[0].split('.');
+        day = date[0], month = date[1], year = date[2];
+    }
+    if (valueArr[1]) {
+        var time = valueArr[1].split(':');
+        hours = Number(time[0]);
+        mins = Number(time[1]);
+    }
+    var fullDate = new Date();
+    fullDate.setFullYear(Number(year), Number(month) - 1, Number(day));
+    fullDate.setHours(Number(hours) || 0);
+    fullDate.setMinutes(Number(mins) || 0);
+    return fullDate;
+};
+var setTimeToDate = function (value) {
+    if (value.length === 10 && dateFnsIsValid(parseDateString(value))) {
+        return value + ", 00:00";
+    }
+    return value;
+};
+
+export { DATE_FORMAT, DATE_MASK, format, getDateWithoutTime, getFullDateTime, isCompleteDateInput, isValid, isValidTimeFormat, parseDateString, parseTimestampToDate, setTimeToDate };

package/esm/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./format";

package/esm/utils/index.js

@@ -0,0 +1,3 @@
+import 'date-fns/parse';
+import 'date-fns/isValid';
+export { DATE_FORMAT, DATE_MASK, format, getDateWithoutTime, getFullDateTime, isCompleteDateInput, isValid, isValidTimeFormat, parseDateString, parseTimestampToDate, setTimeToDate } from './format.js';

package/index.css

@@ -0,0 +1,64 @@
+/* hash: z39zw */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-m: 16px;
+}
+:root {
+    --border-radius-s: 4px;
+}
+:root {
+    --calendar-width: 344px;
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* holidays */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+:root {
+    --calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
+}
+.date-time-input__component_m484y {
+    display: inline-block;
+    outline: none;
+    position: relative;
+}
+.date-time-input__calendarContainer_m484y {
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: var(--calendar-popover-border-radius)
+}
+@media (max-width: 374px) {
+.date-time-input__calendarContainer_m484y {
+        width: 100%;
+        min-width: 288px
+}
+    }
+.date-time-input__calendarResponsive_m484y {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
+.date-time-input__block_m484y {
+    width: 100%;
+}

package/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+require('react');
+require('classnames');
+require('react-merge-refs');
+require('@alfalab/hooks');
+require('@alfalab/core-components-input');
+require('@alfalab/core-components-calendar');
+require('@alfalab/core-components-popover');
+require('@alfalab/core-components-icon-button');
+require('@alfalab/icons-glyph/CalendarMIcon');
+require('date-fns/parse');
+require('date-fns/isValid');
+require('./utils/format.js');
+
+
+
+exports.DateTimeInput = Component.DateTimeInput;