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

package/esm/Component.js

@@ -0,0 +1,209 @@
+import React, { useRef, useState, useEffect } from 'react';
+import cn from 'classnames';
+import mergeRefs from 'react-merge-refs';
+import dateFnsIsValid from 'date-fns/isValid';
+import { useMedia } from '@alfalab/hooks';
+import { Input } from '@alfalab/core-components-input/esm';
+import { usePeriod, CalendarMobile, 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 { parseTimestampToDate, DATE_FORMAT, DATE_MASK, format, parseDateString, isCompleteDateInput, isValid } 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-range-input__component_kztbp","calendarContainer":"date-range-input__calendarContainer_kztbp","calendarResponsive":"date-range-input__calendarResponsive_kztbp","block":"date-range-input__block_kztbp"};
+require('./index.css')
+
+/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
+var DateRangeInput = 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, 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"]);
+    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 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 handlePeriodChange = function (selectedFrom, selectedTo) {
+        if (selectedFrom && !selectedTo && value.length === DATE_MASK.length) {
+            setValue(parseTimestampToDate(selectedFrom));
+        }
+        else if ((!selectedFrom && !selectedTo && value.length === DATE_FORMAT.length) ||
+            (selectedFrom === selectedTo && value.length === DATE_MASK.length)) {
+            setValue('');
+        }
+        if (onChange) {
+            onChange({
+                dateFrom: selectedFrom ? new Date(selectedFrom) : undefined,
+                dateTo: selectedTo ? new Date(selectedTo) : undefined,
+                value: value,
+            });
+        }
+        if (onComplete && selectedFrom && selectedTo) {
+            onComplete({
+                dateFrom: new Date(selectedFrom),
+                dateTo: new Date(selectedTo),
+                value: value,
+            });
+        }
+    };
+    var _r = usePeriod({ onPeriodChange: handlePeriodChange }), selectedFrom = _r.selectedFrom, selectedTo = _r.selectedTo, updatePeriod = _r.updatePeriod, resetPeriod = _r.resetPeriod, setStart = _r.setStart, setEnd = _r.setEnd;
+    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);
+            }
+        }
+    };
+    var handleChange = function (event) {
+        var _a, _b;
+        var newValue = event.target.value;
+        if (newValue.length > DATE_MASK.length)
+            return;
+        // Позволяем вводить только цифры, точки, дефис и пробелы
+        if (/[^\d. \- \d.]/.test(newValue)) {
+            return;
+        }
+        var dots = newValue.match(/\./g);
+        var hyphen = newValue.match(/\-/g);
+        // Не даем вводить больше, чем 4 точки и 1 дефис
+        if ((dots && dots.length > 4) || (hyphen && hyphen.length > 1)) {
+            return;
+        }
+        var formattedValue = format(newValue);
+        var dateArr = formattedValue.split(' - ');
+        var dateFrom = parseDateString(dateArr[0]);
+        var dateTo = parseDateString(dateArr[1]);
+        if (selectedFrom && formattedValue.length < DATE_FORMAT.length) {
+            setStart();
+        }
+        else if (selectedFrom && selectedTo) {
+            setEnd();
+        }
+        else if (dateFnsIsValid(dateFrom) &&
+            ((_a = dateArr[0]) === null || _a === void 0 ? void 0 : _a.length) === DATE_FORMAT.length &&
+            dateFrom.getTime() !== selectedFrom) {
+            setStart(dateFrom.getTime());
+        }
+        else if (dateFnsIsValid(dateTo) &&
+            ((_b = dateArr[1]) === null || _b === void 0 ? void 0 : _b.length) === DATE_FORMAT.length &&
+            dateTo.getTime() !== selectedTo) {
+            setEnd(dateTo.getTime());
+        }
+        setValue(formattedValue);
+        if (onChange)
+            onChange({ dateFrom: dateFrom, dateTo: dateTo, value: formattedValue }, event);
+        if (isCompleteDateInput(formattedValue)) {
+            var valid = isValid(formattedValue, dateArr[0], dateArr[1]);
+            if (!valid)
+                return;
+            if (onComplete) {
+                onComplete({ dateFrom: dateFrom, dateTo: dateTo, value: formattedValue }, event);
+            }
+        }
+    };
+    var handleCalendarClose = function () {
+        setOpen(false);
+    };
+    var handleClear = function () {
+        setValue('');
+        resetPeriod();
+    };
+    var handleCalendarChange = function (date) {
+        if (date) {
+            updatePeriod(date);
+        }
+    };
+    useEffect(function () {
+        if (selectedFrom && selectedTo) {
+            setValue(parseTimestampToDate(selectedFrom) + " - " + parseTimestampToDate(selectedTo));
+        }
+        else if (selectedFrom && value.length < DATE_FORMAT.length) {
+            setValue(parseTimestampToDate(selectedFrom));
+        }
+    }, [selectedFrom, selectedTo, value]);
+    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, selectedFrom: selectedFrom, selectedTo: selectedTo, 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, 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 { DateRangeInput };

package/esm/index.css

@@ -0,0 +1,64 @@
+/* hash: in3xf */
+: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-range-input__component_kztbp {
+    display: inline-block;
+    outline: none;
+    position: relative;
+}
+.date-range-input__calendarContainer_kztbp {
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: var(--calendar-popover-border-radius)
+}
+@media (max-width: 374px) {
+.date-range-input__calendarContainer_kztbp {
+        width: 100%;
+        min-width: 288px
+}
+    }
+.date-range-input__calendarResponsive_kztbp {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
+.date-range-input__block_kztbp {
+    width: 100%;
+}

package/esm/index.d.ts

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

package/esm/index.js

@@ -0,0 +1,13 @@
+export { DateRangeInput } from './Component.js';
+import 'react';
+import 'classnames';
+import 'react-merge-refs';
+import 'date-fns/isValid';
+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 './utils/format.js';

package/esm/utils/format.d.ts

@@ -0,0 +1,8 @@
+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 isValid: (inputValue: string, dateFrom: string, dateTo: string) => boolean;
+declare const format: (value: string) => string;
+declare const parseTimestampToDate: (timestamp: number) => string;
+export { DATE_FORMAT, DATE_MASK, isCompleteDateInput, parseDateString, isValid, format, parseTimestampToDate };

package/esm/utils/format.js

@@ -0,0 +1,83 @@
+import dateFnsIsValid from 'date-fns/isValid';
+import parse from 'date-fns/parse';
+
+/* 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/,
+    '.',
+    /\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 isValid = function (inputValue, dateFrom, dateTo) {
+    return !inputValue ||
+        (isCompleteDateInput(inputValue) &&
+            dateFnsIsValid(parseDateString(dateFrom)) &&
+            dateFnsIsValid(parseDateString(dateTo)));
+};
+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(/^(\d\d\.\d\d\.\d\d\d\d)(\d) - (\d.*)/, '$1 - $3') // 12.12.20051 - 12.12.200 => 12.12.2005 - 12.12.200
+        .replace(/^(\d\d\.\d\d\.\d\d\d\d) (\d)- (\d.*)/, '$1 - $3') // 12.12.2005 1- 12.12.200 => 12.12.2005 - 12.12.200
+        .replace(/^(\d\d\.\d\d\.\d\d\d\d) -(\d) (\d.*)/, '$1 - $3') // 12.12.2005 -1 12.12.200 => 12.12.2005 - 12.12.200
+        .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d)(\d\d.\d\d.\d\d\d)/, '$1 - $3') // 12.12.2005 - 112.12.200 => 12.12.2005 - 12.12.200
+        .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d)(\d\d.\d.\d\d\d\d)/, '$1 - $3') // 12.12.2005 - 112.1.2001 => 12.12.2005 - 12.1.2001
+        .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.*)/, '$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)(\d)/, '$1 - $2') // 12.12.20056 => 12.12.2005 - 6
+        .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d\d)(\d)/, '$1 - $2.$3') // 12.12.2005 - 123 => 12.12.2005 - 12.3
+        .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d\d).(\d\d)(\d)/, '$1 - $2.$3.$4') // 12.12.2005 - 12.123 => 12.12.2005 - 12.12.3
+        .replace(/^(\d\d\.\d\d\.\d\d\d\d)- (\d.*)/, '$1 - $2') // 12.12.2005- 12.12.2005 => 12.12.2005 - 12.12.2005
+        .replace(/^(\d\d\.\d\d\.\d\d\d\d) -(\d.*)/, '$1 - $2') // 12.12.2005 -12.12.2005 => 12.12.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.2005 12.12.2005 => 12.12.2005 - 12.12.2005
+        .replace(/^(\d\d\.\d\d\.\d\d\d\d)  {2}(\d.*)/, '$1 - $2') // 12.12.2005  12.12.2005 => 12.12.2005 - 12.12.2005
+        .replace(/^(\d\d\.\d\d\.\d\d\d\d)-/, '$1');
+}; // 12.12.2005- => 12.12.2005
+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;
+};
+
+export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate };

package/esm/utils/index.d.ts

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

package/esm/utils/index.js

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

package/index.css

@@ -0,0 +1,64 @@
+/* hash: in3xf */
+: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-range-input__component_kztbp {
+    display: inline-block;
+    outline: none;
+    position: relative;
+}
+.date-range-input__calendarContainer_kztbp {
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: var(--calendar-popover-border-radius)
+}
+@media (max-width: 374px) {
+.date-range-input__calendarContainer_kztbp {
+        width: 100%;
+        min-width: 288px
+}
+    }
+.date-range-input__calendarResponsive_kztbp {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
+.date-range-input__block_kztbp {
+    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('date-fns/isValid');
+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('./utils/format.js');
+
+
+
+exports.DateRangeInput = Component.DateRangeInput;