@alfalab/core-components-date-time-input 3.0.5 → 3.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-date-time-input",
-    "version": "3.0.5",
+    "version": "3.0.7",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -15,11 +15,12 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-calendar": "^6.2.7",
-        "@alfalab/core-components-input": "^11.1.5",
-        "@alfalab/core-components-icon-button": "^6.0.5",
-        "@alfalab/core-components-popover": "^6.0.6",
+        "@alfalab/core-components-calendar": "^6.2.9",
+        "@alfalab/core-components-input": "^11.1.7",
+        "@alfalab/core-components-icon-button": "^6.0.7",
+        "@alfalab/core-components-popover": "^6.0.7",
         "@alfalab/hooks": "^1.13.0",
-        "classnames": "^2.3.1"
+        "classnames": "^2.3.1",
+        "tslib": "^2.4.0"
     }
 }

package/responsive.js

@@ -1,20 +1,21 @@
 'use strict';
 
 var Component_responsive = require('./Component.responsive.js');
-require('./Component-f6972855.js');
+require('tslib');
 require('react');
+require('@alfalab/hooks');
+require('./Component.desktop.js');
+require('./components/date-time-input/Component.js');
 require('react-merge-refs');
 require('classnames');
 require('@alfalab/core-components-calendar');
 require('@alfalab/core-components-icon-button');
 require('@alfalab/core-components-input');
 require('@alfalab/core-components-popover');
-require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('./utils/format.js');
 require('date-fns/isValid');
 require('date-fns/parse');
-require('./Component.desktop.js');
 require('./Component.mobile.js');
 
 

package/Component-f6972855.d.ts

@@ -1,225 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ChangeEvent, ElementType } from "react";
-import { CalendarMobileProps, CalendarProps } from "@alfalab/core-components-calendar";
-import { InputProps } from "@alfalab/core-components-input";
-import { PopoverProps } from "@alfalab/core-components-popover";
-declare function __extends(d: any, b: any): void;
-declare function __rest(s: any, e: any): {};
-declare function __decorate(decorators: any, target: any, key: any, desc: any, ...args: any[]): any;
-declare function __param(paramIndex: any, decorator: any): (target: any, key: any) => void;
-declare function __metadata(metadataKey: any, metadataValue: any): any;
-declare function __awaiter(thisArg: any, _arguments: any, P: any, generator: any): any;
-declare function __generator(thisArg: any, body: any): {
-    next: (v: any) => any;
-    throw: (v: any) => any;
-    return: (v: any) => any;
-};
-declare function __exportStar(m: any, o: any): void;
-declare function __values(o: any): any;
-declare function __read(o: any, n: any): any;
-declare function __spread(...args: any[]): any[];
-declare function __spreadArrays(...args: any[]): any[];
-declare function __spreadArray(to: any, from: any, pack: any, ...args: any[]): any;
-declare function __await(v: any): __await;
-declare class __await {
-    constructor(v: any);
-    v: any;
-}
-declare function __asyncGenerator(thisArg: any, _arguments: any, generator: any): {};
-declare function __asyncDelegator(o: any): {};
-declare function __asyncValues(o: any): any;
-declare function __makeTemplateObject(cooked: any, raw: any): any;
-declare function __importStar(mod: any): any;
-declare function __importDefault(mod: any): any;
-declare function __classPrivateFieldGet(receiver: any, state: any, kind: any, f: any): any;
-declare function __classPrivateFieldSet(receiver: any, state: any, value: any, kind: any, f: any): any;
-declare function __classPrivateFieldIn(state: any, receiver: any): any;
-declare function __assign(...args: any[]): any;
-declare function __createBinding(o: any, m: any, k: any, k2: any): void;
-type DateTimeInputProps = Omit<InputProps, 'onChange'> & {
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс для инпута
-     */
-    inputClassName?: string;
-    /**
-     * Дополнительный класс для поповера
-     */
-    popoverClassName?: string;
-    /**
-     * Обработчик изменения значения
-     */
-    picker?: boolean;
-    /**
-     * Обработчик изменения значения
-     */
-    onChange?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
-        date: Date;
-        value: string;
-    }) => void;
-    /**
-     * Обработчик окончания ввода
-     */
-    onComplete?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
-        date: Date;
-        value: string;
-    }) => void;
-    /**
-     * Компонент календаря
-     */
-    Calendar?: ElementType;
-    /**
-     * Доп. пропсы для календаря
-     */
-    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
-    /**
-     * Месяц в календаре по умолчанию (timestamp)
-     */
-    defaultMonth?: number;
-    /**
-     * Минимальная дата, доступная для выбора (timestamp)
-     */
-    minDate?: number;
-    /**
-     * Максимальная дата, доступная для выбора (timestamp)
-     */
-    maxDate?: number;
-    /**
-     * Список событий
-     */
-    events?: Array<Date | number>;
-    /**
-     * Список выходных
-     */
-    offDays?: Array<Date | number>;
-    /**
-     * Состояние открытия по умолчанию
-     */
-    defaultOpen?: boolean;
-    /**
-     * Позиционирование поповера с календарем
-     */
-    popoverPosition?: PopoverProps['position'];
-    /**
-     * z-index Popover
-     */
-    zIndexPopover?: PopoverProps['zIndex'];
-    /**
-     * Запрещает поповеру менять свою позицию.
-     * Например, если места снизу недостаточно,то он все равно будет показан снизу
-     */
-    preventFlip?: boolean;
-    /**
-     * Календарь будет принимать ширину инпута
-     */
-    useAnchorWidth?: boolean;
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean;
-    /**
-     * Отображение компонента в мобильном или десктопном виде
-     */
-    view?: 'desktop' | 'mobile';
-};
-declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange"> & {
-    /**
-     * Дополнительный класс
-     */
-    className?: string | undefined;
-    /**
-     * Дополнительный класс для инпута
-     */
-    inputClassName?: string | undefined;
-    /**
-     * Дополнительный класс для поповера
-     */
-    popoverClassName?: string | undefined;
-    /**
-     * Обработчик изменения значения
-     */
-    picker?: boolean | undefined;
-    /**
-     * Обработчик изменения значения
-     */
-    onChange?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
-        date: Date;
-        value: string;
-    }) => void) | undefined;
-    /**
-     * Обработчик окончания ввода
-     */
-    onComplete?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
-        date: Date;
-        value: string;
-    }) => void) | undefined;
-    /**
-     * Компонент календаря
-     */
-    Calendar?: React.ElementType<any> | undefined;
-    /**
-     * Доп. пропсы для календаря
-     */
-    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
-        open: boolean;
-        title?: string | undefined;
-        onClose?: (() => void) | undefined;
-        yearsAmount?: number | undefined;
-        hasHeader?: boolean | undefined;
-        allowSelectionFromEmptyRange?: boolean | undefined;
-    } & Record<string, unknown>) | undefined;
-    /**
-     * Месяц в календаре по умолчанию (timestamp)
-     */
-    defaultMonth?: number | undefined;
-    /**
-     * Минимальная дата, доступная для выбора (timestamp)
-     */
-    minDate?: number | undefined;
-    /**
-     * Максимальная дата, доступная для выбора (timestamp)
-     */
-    maxDate?: number | undefined;
-    /**
-     * Список событий
-     */
-    events?: (number | Date)[] | undefined;
-    /**
-     * Список выходных
-     */
-    offDays?: (number | Date)[] | undefined;
-    /**
-     * Состояние открытия по умолчанию
-     */
-    defaultOpen?: boolean | undefined;
-    /**
-     * Позиционирование поповера с календарем
-     */
-    popoverPosition?: PopoverProps['position'];
-    /**
-     * z-index Popover
-     */
-    zIndexPopover?: PopoverProps['zIndex'];
-    /**
-     * Запрещает поповеру менять свою позицию.
-     * Например, если места снизу недостаточно,то он все равно будет показан снизу
-     */
-    preventFlip?: boolean | undefined;
-    /**
-     * Календарь будет принимать ширину инпута
-     */
-    useAnchorWidth?: boolean | undefined;
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean | undefined;
-    /**
-     * Отображение компонента в мобильном или десктопном виде
-     */
-    view?: "desktop" | "mobile" | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
-export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __spreadArray, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __classPrivateFieldIn, __assign, __createBinding, DateTimeInputProps, DateTimeInput };

package/Component-f6972855.js

@@ -1,192 +0,0 @@
-'use strict';
-
-var React = require('react');
-var mergeRefs = require('react-merge-refs');
-var cn = require('classnames');
-var coreComponentsCalendar = require('@alfalab/core-components-calendar');
-var coreComponentsIconButton = require('@alfalab/core-components-icon-button');
-var coreComponentsInput = require('@alfalab/core-components-input');
-var coreComponentsPopover = require('@alfalab/core-components-popover');
-var hooks = require('@alfalab/hooks');
-var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
-var utils_format = require('./utils/format.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-
-/******************************************************************************
-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.
-***************************************************************************** */
-exports.__assign = function () {
-    exports.__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 exports.__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_18gez","calendarContainer":"date-time-input__calendarContainer_18gez","calendarResponsive":"date-time-input__calendarResponsive_18gez","block":"date-time-input__block_18gez"};
-require('./components/date-time-input/index.css')
-
-/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
-var DateTimeInput = React__default.default.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 = _g === void 0 ? coreComponentsCalendar.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, _p = _a.view, view = _p === void 0 ? 'desktop' : _p, 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", "view"]);
-    var inputRef = React.useRef(null);
-    var calendarRef = React.useRef(null);
-    var _q = React.useState(propValue || defaultValue), value = _q[0], setValue = _q[1];
-    var _r = React.useState(false), open = _r[0], setOpen = _r[1];
-    var calendarValue = value ? utils_format.getDateWithoutTime(value).getTime() : undefined;
-    var inputDisabled = disabled || readOnly;
-    var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
-    React.useEffect(function () {
-        setOpen(defaultOpen);
-    }, [defaultOpen]);
-    hooks.useDidUpdateEffect(function () {
-        var newPropValue = propValue || '';
-        setValue(function (prevValue) { return (prevValue === propValue ? prevValue : newPropValue); });
-    }, [propValue]);
-    var checkInputValueIsValid = function (newInputValue) {
-        if (!newInputValue || error)
-            return false;
-        var dateValue = utils_format.getDateWithoutTime(newInputValue).getTime();
-        return (dateValue &&
-            coreComponentsCalendar.dateInLimits(dateValue, minDate, maxDate) &&
-            !offDays.includes(dateValue));
-    };
-    var setTimeToDate = function () {
-        setValue(function (prevValue) {
-            var dateWithTime = utils_format.addTimeToDate(prevValue);
-            if (dateWithTime !== prevValue && dateWithTime.length === utils_format.DATE_WITH_TIME_LENGTH) {
-                onComplete === null || onComplete === void 0 ? void 0 : onComplete(null, {
-                    date: utils_format.getFullDateTime(dateWithTime),
-                    value: dateWithTime,
-                });
-            }
-            return dateWithTime;
-        });
-    };
-    var handleInputWrapperFocus = function (event) {
-        if (view === 'desktop') {
-            if (picker) {
-                setOpen(true);
-            }
-            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);
-                setTimeToDate();
-            }
-        }
-    };
-    var handleChange = function (event) {
-        var newValue = event.target.value;
-        if (newValue.length > utils_format.DATE_WITH_TIME_LENGTH)
-            return;
-        // Позволяем вводить только цифры, точки, запятую, двоеточие и пробел
-        if (/[^\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 = utils_format.format(newValue);
-        var date = utils_format.getFullDateTime(formattedValue);
-        setValue(formattedValue);
-        if (onChange)
-            onChange(event, { date: date, value: formattedValue });
-        if (utils_format.isCompleteDateInput(formattedValue)) {
-            var valid = utils_format.isValid(formattedValue);
-            if (!valid)
-                return;
-            if (onComplete) {
-                onComplete(event, { date: date, value: formattedValue });
-            }
-        }
-    };
-    var handleMobileCalendarClose = function () {
-        setOpen(false);
-        setTimeToDate();
-    };
-    var handleClear = function () {
-        setValue('');
-    };
-    var handleCalendarChange = function (date) {
-        if (date) {
-            var newValue = utils_format.parseTimestampToDate(date);
-            setValue(newValue);
-            onChange === null || onChange === void 0 ? void 0 : onChange(null, { date: utils_format.getFullDateTime(newValue), value: newValue });
-        }
-    };
-    var handleCalendarWrapperMouseDown = function (event) {
-        // Не дает инпуту терять фокус при выборе даты
-        event.preventDefault();
-    };
-    var handleIconButtonClick = function () {
-        if (!open)
-            setOpen(true);
-        if (view === 'desktop' && inputRef.current) {
-            inputRef.current.focus();
-        }
-    };
-    var renderCalendar = function () { return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React__default.default.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
-        React__default.default.createElement(Calendar, exports.__assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleMobileCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(value) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
-    return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className, (_b = {},
-            _b[styles.block] = block,
-            _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
-        React__default.default.createElement(coreComponentsInput.Input, exports.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
-                rightAddons,
-                picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
-        picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles.calendarContainer, (_c = {},
-                _c[styles.calendarResponsive] = calendarResponsive,
-                _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
-});
-
-exports.DateTimeInput = DateTimeInput;
-exports.__rest = __rest;