@steroidsjs/core 2.3.0-beta.7 → 3.0.0-beta.2

package/ui/form/DateField/useDateRange.js

@@ -1,74 +1,75 @@
-"use strict";
-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);
-};
-exports.__esModule = true;
-var react_1 = require("react");
-var react_use_1 = require("react-use");
-function useDateRange(props) {
-    // Tracking focus for input being edited
-    var _a = react_1.useState('from'), focus = _a[0], setFocus = _a[1];
-    // Local refs to handle auto-focus
-    var valueFromRef = react_1.useRef('');
-    var valueToRef = react_1.useRef('');
-    // Close handler
-    var onClose = react_1.useCallback(function () {
-        if (focus === 'from') {
-            props.onCloseFrom();
-        }
-        else {
-            props.onCloseTo();
-        }
-        valueFromRef.current = '';
-        valueToRef.current = '';
-    }, [focus, props]);
-    // Clear handler
-    var onClear = react_1.useCallback(function () {
-        props.onClearFrom();
-        props.onClearTo();
-    }, [props]);
-    // Custom onFocus for inputFrom
-    var inputFromRef = react_1.useRef(null);
-    var onFocusFrom = react_1.useCallback(function (e) {
-        props.inputPropsFrom.onFocus.call(null, e);
-        setFocus('from');
-    }, [props.inputPropsFrom.onFocus]);
-    var extendedInputPropsFrom = react_1.useMemo(function () { return (__assign(__assign({}, props.inputPropsFrom), { onFocus: onFocusFrom, ref: inputFromRef })); }, [onFocusFrom, props.inputPropsFrom]);
-    // Custom onFocus for inputTo
-    var inputToRef = react_1.useRef(null);
-    var onFocusTo = react_1.useCallback(function (e) {
-        props.inputPropsTo.onFocus.call(null, e);
-        setFocus('to');
-    }, [props.inputPropsTo.onFocus]);
-    var extendedInputPropsTo = react_1.useMemo(function () { return (__assign(__assign({}, props.inputPropsTo), { onFocus: onFocusTo, ref: inputToRef })); }, [onFocusTo, props.inputPropsTo]);
-    var prevValueFrom = react_use_1.usePrevious(props.inputFrom.value);
-    var prevValueTo = react_use_1.usePrevious(props.inputTo.value);
-    react_1.useEffect(function () {
-        if (props.useSmartFocus) {
-            if (focus === 'from' && !valueToRef.current && prevValueFrom !== props.inputFrom.value) {
-                valueFromRef.current = props.inputFrom.value;
-                inputToRef.current.focus();
-            }
-            if (focus === 'to' && !valueFromRef.current && prevValueTo !== props.inputTo.value) {
-                valueToRef.current = props.inputTo.value;
-                inputFromRef.current.focus();
-            }
-        }
-    }, [focus, onClose, prevValueFrom, prevValueTo, props, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange, props.inputTo.value]);
-    return {
-        focus: focus,
-        onClose: onClose,
-        onClear: onClear,
-        extendedInputPropsFrom: extendedInputPropsFrom,
-        extendedInputPropsTo: extendedInputPropsTo
-    };
-}
-exports["default"] = useDateRange;
+"use strict";
+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);
+};
+exports.__esModule = true;
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+function useDateRange(props) {
+    // Tracking focus for input being edited
+    var _a = react_1.useState('from'), focus = _a[0], setFocus = _a[1];
+    // Local refs to handle auto-focus
+    var valueFromRef = react_1.useRef('');
+    var valueToRef = react_1.useRef('');
+    // Close handler
+    var onClose = react_1.useCallback(function () {
+        if (focus === 'from') {
+            props.onCloseFrom();
+        }
+        else {
+            props.onCloseTo();
+        }
+        valueFromRef.current = '';
+        valueToRef.current = '';
+    }, [focus, props]);
+    // Clear handler
+    var onClear = react_1.useCallback(function () {
+        props.onClearFrom();
+        props.onClearTo();
+    }, [props]);
+    // Custom onFocus for inputFrom
+    var inputFromRef = react_1.useRef(null);
+    var onFocusFrom = react_1.useCallback(function (e) {
+        props.inputPropsFrom.onFocus.call(null, e);
+        setFocus('from');
+    }, [props.inputPropsFrom.onFocus]);
+    var extendedInputPropsFrom = react_1.useMemo(function () { return (__assign(__assign({}, props.inputPropsFrom), { onFocus: onFocusFrom, ref: inputFromRef })); }, [onFocusFrom, props.inputPropsFrom]);
+    // Custom onFocus for inputTo
+    var inputToRef = react_1.useRef(null);
+    var onFocusTo = react_1.useCallback(function (e) {
+        props.inputPropsTo.onFocus.call(null, e);
+        setFocus('to');
+    }, [props.inputPropsTo.onFocus]);
+    var extendedInputPropsTo = react_1.useMemo(function () { return (__assign(__assign({}, props.inputPropsTo), { onFocus: onFocusTo, ref: inputToRef })); }, [onFocusTo, props.inputPropsTo]);
+    var prevValueFrom = react_use_1.usePrevious(props.inputFrom.value);
+    var prevValueTo = react_use_1.usePrevious(props.inputTo.value);
+    react_1.useEffect(function () {
+        if (props.useSmartFocus) {
+            if (focus === 'from' && !valueToRef.current && prevValueFrom !== props.inputFrom.value) {
+                valueFromRef.current = props.inputFrom.value;
+                inputToRef.current.focus();
+            }
+            if (focus === 'to' && !valueFromRef.current && prevValueTo !== props.inputTo.value) {
+                valueToRef.current = props.inputTo.value;
+                inputFromRef.current.focus();
+            }
+        }
+        // eslint-disable-next-line max-len
+    }, [focus, onClose, prevValueFrom, prevValueTo, props, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange, props.inputTo.value]);
+    return {
+        focus: focus,
+        onClose: onClose,
+        onClear: onClear,
+        extendedInputPropsFrom: extendedInputPropsFrom,
+        extendedInputPropsTo: extendedInputPropsTo
+    };
+}
+exports["default"] = useDateRange;

package/ui/form/DateField/useDateTime.d.ts

@@ -1,18 +1,18 @@
-import { IDateInputStateInput } from '../../form/DateField/useDateInputState';
-interface IUseDateTimeProps extends Pick<IDateInputStateInput, 'displayFormat' | 'valueFormat' | 'input' | 'useUTC' | 'dateInUTC'> {
-    dateTimeSeparator: string;
-}
-/**
- * useDateTime
- * Хук работает с полем, где используется значение даты и времени.
- * Возвращает значения и обработчики для передачи в Calendar и TimePanel
- */
-export default function useDateTime(props: IUseDateTimeProps): {
-    dateValue: any;
-    timeValue: any;
-    onDateSelect: (date: any) => void;
-    onTimeSelect: (time: any) => void;
-    dateValueFormat: string;
-    timeValueFormat: string;
-};
-export {};
+import { IDateInputStateInput } from '../../form/DateField/useDateInputState';
+interface IUseDateTimeProps extends Pick<IDateInputStateInput, 'displayFormat' | 'valueFormat' | 'input' | 'useUTC' | 'dateInUTC'> {
+    dateTimeSeparator: string;
+}
+/**
+ * useDateTime
+ * Хук работает с полем, где используется значение даты и времени.
+ * Возвращает значения и обработчики для передачи в Calendar и TimePanel
+ */
+export default function useDateTime(props: IUseDateTimeProps): {
+    dateValue: any;
+    timeValue: any;
+    onDateSelect: (date: any) => void;
+    onTimeSelect: (time: any) => void;
+    dateValueFormat: string;
+    timeValueFormat: string;
+};
+export {};

package/ui/form/DateField/useDateTime.js

@@ -1,44 +1,46 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var react_1 = require("react");
-var moment_1 = __importDefault(require("moment"));
-var calendar_1 = require("../../../utils/calendar");
-/**
- * useDateTime
- * Хук работает с полем, где используется значение даты и времени.
- * Возвращает значения и обработчики для передачи в Calendar и TimePanel
- */
-function useDateTime(props) {
-    var _a = props.valueFormat.split(props.dateTimeSeparator), dateValueFormat = _a[0], timeValueFormat = _a[1];
-    var dateValue = react_1.useMemo(function () { return calendar_1.convertDate(props.input.value, [props.valueFormat, props.displayFormat], dateValueFormat, props.useUTC, props.dateInUTC); }, [dateValueFormat, props.displayFormat, props.input.value, props.valueFormat]);
-    var timeValue = react_1.useMemo(function () { return calendar_1.convertDate(props.input.value, [props.displayFormat, props.valueFormat], timeValueFormat, props.useUTC, props.dateInUTC); }, [props.displayFormat, props.input.value, props.valueFormat, timeValueFormat]);
-    // Handler for calendar and time picker changes
-    var onDateSelect = react_1.useCallback(function (date) {
-        var result = date + props.dateTimeSeparator + (timeValue || '00:00');
-        props.input.onChange.call(null, calendar_1.convertDate(result, [props.valueFormat, 'YYYY-MM-DD HH:mm'], props.valueFormat, 
-        // converting to UTC here depends on whether the date is stored in UTC
-        props.dateInUTC, 
-        // whether the date provided from onSelect is in UTC or not depends on this flag
-        props.useUTC));
-    }, [props.dateTimeSeparator, props.input.onChange, props.valueFormat, timeValue]);
-    var onTimeSelect = react_1.useCallback(function (time) {
-        var result = (dateValue || moment_1["default"]().format(dateValueFormat)) + props.dateTimeSeparator + time;
-        props.input.onChange.call(null, calendar_1.convertDate(result, [props.valueFormat, 'YYYY-MM-DD HH:mm'], props.valueFormat, 
-        // converting to UTC here depends on whether the date is stored in UTC
-        props.dateInUTC, 
-        // whether the date provided from onSelect is in UTC or not depends on this flag
-        props.useUTC));
-    }, [dateValue, dateValueFormat, props.dateTimeSeparator, props.input.onChange, props.valueFormat]);
-    return {
-        dateValue: dateValue,
-        timeValue: timeValue,
-        onDateSelect: onDateSelect,
-        onTimeSelect: onTimeSelect,
-        dateValueFormat: dateValueFormat,
-        timeValueFormat: timeValueFormat
-    };
-}
-exports["default"] = useDateTime;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = require("react");
+var moment_1 = __importDefault(require("moment"));
+var calendar_1 = require("../../../utils/calendar");
+/**
+ * useDateTime
+ * Хук работает с полем, где используется значение даты и времени.
+ * Возвращает значения и обработчики для передачи в Calendar и TimePanel
+ */
+function useDateTime(props) {
+    var _a = props.valueFormat.split(props.dateTimeSeparator), dateValueFormat = _a[0], timeValueFormat = _a[1];
+    var dateValue = react_1.useMemo(function () { return calendar_1.convertDate(props.input.value, [props.valueFormat, props.displayFormat], dateValueFormat, props.useUTC, props.dateInUTC); }, [dateValueFormat, props.displayFormat, props.input.value, props.valueFormat]);
+    var timeValue = react_1.useMemo(function () { return calendar_1.convertDate(props.input.value, [props.displayFormat, props.valueFormat], timeValueFormat, props.useUTC, props.dateInUTC); }, [props.displayFormat, props.input.value, props.valueFormat, timeValueFormat]);
+    // Handler for calendar and time picker changes
+    var onDateSelect = react_1.useCallback(function (date) {
+        var result = date + props.dateTimeSeparator + (timeValue || '00:00');
+        props.input.onChange.call(null, calendar_1.convertDate(result, [props.valueFormat, 'YYYY-MM-DD HH:mm'], props.valueFormat, 
+        // converting to UTC here depends on whether the date is stored in UTC
+        props.dateInUTC, 
+        // whether the date provided from onSelect is in UTC or not depends on this flag
+        props.useUTC));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.dateTimeSeparator, props.input.onChange, props.valueFormat, timeValue]);
+    var onTimeSelect = react_1.useCallback(function (time) {
+        var result = (dateValue || moment_1["default"]().format(dateValueFormat)) + props.dateTimeSeparator + time;
+        props.input.onChange.call(null, calendar_1.convertDate(result, [props.valueFormat, 'YYYY-MM-DD HH:mm'], props.valueFormat, 
+        // converting to UTC here depends on whether the date is stored in UTC
+        props.dateInUTC, 
+        // whether the date provided from onSelect is in UTC or not depends on this flag
+        props.useUTC));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dateValue, dateValueFormat, props.dateTimeSeparator, props.input.onChange, props.valueFormat]);
+    return {
+        dateValue: dateValue,
+        timeValue: timeValue,
+        onDateSelect: onDateSelect,
+        onTimeSelect: onTimeSelect,
+        dateValueFormat: dateValueFormat,
+        timeValueFormat: timeValueFormat
+    };
+}
+exports["default"] = useDateTime;

package/ui/form/DateRangeField/DateRangeField.d.ts

@@ -1,83 +1,83 @@
-import { ICalendarProps } from '../../content/Calendar/Calendar';
-import { IDateInputStateInput, IDateInputStateOutput } from '../DateField/useDateInputState';
-import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
-/**
- * DateRangeField
- * Поле ввода дипазона двух дат с выпадающим календарём
- */
-export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldWrapperInputProps, 'attribute'> {
-    /**
-     * Аттрибут (название) поля в форме
-     * @example 'fromTime'
-     */
-    attributeFrom?: string;
-    /**
-     * Аттрибут (название) поля в форме
-     * @example 'toTime'
-     */
-    attributeTo?: string;
-    /**
-     * Свойства для компонента DayPickerInput
-     * @example {dayPickerProps: {showWeekNumbers: true}}
-     */
-    pickerProps?: any;
-    /**
-     * Формат даты показываемый пользователю
-     * @example DD.MM.YYYY
-     */
-    displayFormat?: string;
-    /**
-     * Формат даты отправляемый на сервер
-     * @example YYYY-MM-DD
-     */
-    valueFormat?: string;
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-    /**
-     * Placeholder подсказка
-     * @example Your text...
-     */
-    placeholder?: any;
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
-    /**
-     * Иконка
-     * @example calendar-day
-     */
-    icon?: boolean | string;
-    /**
-     * Отображение кнопки для сброса значения поля
-     * @example true
-     */
-    showRemove?: boolean;
-    inputPropsFrom?: any;
-    inputPropsTo?: any;
-    /**
-     * Свойства для компонента Calendar
-     */
-    calendarProps?: ICalendarProps;
-    /**
-     * Отключить border вокруг элемента
-     * @example 'true'
-     */
-    noBorder?: boolean;
-    [key: string]: any;
-}
-export interface IDateRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style'> {
-    inputPropsFrom?: any;
-    inputPropsTo?: any;
-    errorsFrom?: string[];
-    errorsTo?: string[];
-}
-declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDateRangeFieldProps>;
-export default _default;
+import { ICalendarProps } from '../../content/Calendar/Calendar';
+import { IDateInputStateInput, IDateInputStateOutput } from '../DateField/useDateInputState';
+import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
+/**
+ * DateRangeField
+ * Поле ввода дипазона двух дат с выпадающим календарём
+ */
+export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldWrapperInputProps, 'attribute'> {
+    /**
+     * Аттрибут (название) поля в форме
+     * @example 'fromTime'
+     */
+    attributeFrom?: string;
+    /**
+     * Аттрибут (название) поля в форме
+     * @example 'toTime'
+     */
+    attributeTo?: string;
+    /**
+     * Свойства для компонента DayPickerInput
+     * @example {dayPickerProps: {showWeekNumbers: true}}
+     */
+    pickerProps?: any;
+    /**
+     * Формат даты показываемый пользователю
+     * @example DD.MM.YYYY
+     */
+    displayFormat?: string;
+    /**
+     * Формат даты отправляемый на сервер
+     * @example YYYY-MM-DD
+     */
+    valueFormat?: string;
+    /**
+     * Дополнительный CSS-класс
+     */
+    className?: CssClassName;
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+    /**
+     * Placeholder подсказка
+     * @example Your text...
+     */
+    placeholder?: any;
+    /**
+     * Объект CSS стилей
+     * @example {width: '45%'}
+     */
+    style?: any;
+    /**
+     * Иконка
+     * @example calendar-day
+     */
+    icon?: boolean | string;
+    /**
+     * Отображение кнопки для сброса значения поля
+     * @example true
+     */
+    showRemove?: boolean;
+    inputPropsFrom?: any;
+    inputPropsTo?: any;
+    /**
+     * Свойства для компонента Calendar
+     */
+    calendarProps?: ICalendarProps;
+    /**
+     * Отключить border вокруг элемента
+     * @example 'true'
+     */
+    noBorder?: boolean;
+    [key: string]: any;
+}
+export interface IDateRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style'> {
+    inputPropsFrom?: any;
+    inputPropsTo?: any;
+    errorsFrom?: string[];
+    errorsTo?: string[];
+}
+declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDateRangeFieldProps>;
+export default _default;

package/ui/form/DateRangeField/DateRangeField.js

@@ -1,90 +1,90 @@
-"use strict";
-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);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var react_1 = require("react");
-var useDateRange_1 = __importDefault(require("../../form/DateField/useDateRange"));
-var hooks_1 = require("../../../hooks");
-var useDateInputState_1 = __importDefault(require("../DateField/useDateInputState"));
-var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
-function DateRangeField(props) {
-    var components = hooks_1.useComponents();
-    // Global onChange (from props)
-    var onChange = react_1.useCallback(function () {
-        var _a;
-        if (props.onChange) {
-            props.onChange.call(null, (_a = {},
-                _a[props.attributeFrom] = props.inputFrom.value,
-                _a[props.attributeTo] = props.inputTo.value,
-                _a));
-        }
-    }, [props.attributeFrom, props.attributeTo, props.inputFrom.value, props.inputTo.value, props.onChange]);
-    // Input 'from'
-    var _a = useDateInputState_1["default"]({
-        displayFormat: props.displayFormat,
-        valueFormat: props.valueFormat,
-        input: props.inputFrom,
-        disabled: props.disabled,
-        placeholder: props.placeholder,
-        required: props.required,
-        inputProps: props.inputPropsFrom,
-        onChange: onChange
-    }), isOpenedFrom = _a.isOpened, onCloseFrom = _a.onClose, inputPropsFrom = _a.inputProps, onClearFrom = _a.onClear;
-    // Input 'to'
-    var _b = useDateInputState_1["default"]({
-        displayFormat: props.displayFormat,
-        valueFormat: props.valueFormat,
-        input: props.inputTo,
-        disabled: props.disabled,
-        placeholder: props.placeholder,
-        required: props.required,
-        inputProps: props.inputPropsTo,
-        onChange: onChange
-    }), isOpenedTo = _b.isOpened, onCloseTo = _b.onClose, inputPropsTo = _b.inputProps, onClearTo = _b.onClear;
-    var _c = useDateRange_1["default"]({
-        onClearFrom: onClearFrom,
-        onCloseTo: onCloseTo,
-        onCloseFrom: onCloseFrom,
-        onClearTo: onClearTo,
-        inputPropsFrom: inputPropsFrom,
-        inputPropsTo: inputPropsTo,
-        inputFrom: props.inputFrom,
-        inputTo: props.inputTo,
-        useSmartFocus: true
-    }), focus = _c.focus, onClose = _c.onClose, onClear = _c.onClear, extendedInputPropsFrom = _c.extendedInputPropsFrom, extendedInputPropsTo = _c.extendedInputPropsTo;
-    // Calendar props
-    var calendarProps = react_1.useMemo(function () { return ({
-        value: [props.inputFrom.value, props.inputTo.value],
-        onChange: focus === 'from' ? props.inputFrom.onChange : props.inputTo.onChange,
-        valueFormat: props.valueFormat,
-        numberOfMonths: 2,
-        showFooter: false
-    }); }, [focus, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange,
-        props.inputTo.value, props.valueFormat]);
-    return components.ui.renderView(props.view || 'form.DateRangeFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear,
-        onClose: onClose,
-        calendarProps: calendarProps, icon: props.icon, size: props.size, errorsTo: props.errorsTo, disabled: props.disabled, noBorder: props.noBorder, className: props.className, showRemove: props.showRemove, errorsFrom: props.errorsFrom, inputPropsTo: extendedInputPropsTo, inputPropsFrom: extendedInputPropsFrom, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo }));
-}
-DateRangeField.defaultProps = {
-    disabled: false,
-    required: false,
-    className: '',
-    displayFormat: 'DD.MM.YYYY',
-    valueFormat: 'YYYY-MM-DD',
-    showRemove: true,
-    icon: true,
-    noBorder: false
-};
-exports["default"] = fieldWrapper_1["default"]('DateRangeField', DateRangeField, { attributeSuffixes: ['from', 'to'] });
+"use strict";
+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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = require("react");
+var useDateRange_1 = __importDefault(require("../../form/DateField/useDateRange"));
+var hooks_1 = require("../../../hooks");
+var useDateInputState_1 = __importDefault(require("../DateField/useDateInputState"));
+var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
+function DateRangeField(props) {
+    var components = hooks_1.useComponents();
+    // Global onChange (from props)
+    var onChange = react_1.useCallback(function () {
+        var _a;
+        if (props.onChange) {
+            props.onChange.call(null, (_a = {},
+                _a[props.attributeFrom] = props.inputFrom.value,
+                _a[props.attributeTo] = props.inputTo.value,
+                _a));
+        }
+    }, [props.attributeFrom, props.attributeTo, props.inputFrom.value, props.inputTo.value, props.onChange]);
+    // Input 'from'
+    var _a = useDateInputState_1["default"]({
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat,
+        input: props.inputFrom,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        required: props.required,
+        inputProps: props.inputPropsFrom,
+        onChange: onChange
+    }), isOpenedFrom = _a.isOpened, onCloseFrom = _a.onClose, inputPropsFrom = _a.inputProps, onClearFrom = _a.onClear;
+    // Input 'to'
+    var _b = useDateInputState_1["default"]({
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat,
+        input: props.inputTo,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        required: props.required,
+        inputProps: props.inputPropsTo,
+        onChange: onChange
+    }), isOpenedTo = _b.isOpened, onCloseTo = _b.onClose, inputPropsTo = _b.inputProps, onClearTo = _b.onClear;
+    var _c = useDateRange_1["default"]({
+        onClearFrom: onClearFrom,
+        onCloseTo: onCloseTo,
+        onCloseFrom: onCloseFrom,
+        onClearTo: onClearTo,
+        inputPropsFrom: inputPropsFrom,
+        inputPropsTo: inputPropsTo,
+        inputFrom: props.inputFrom,
+        inputTo: props.inputTo,
+        useSmartFocus: true
+    }), focus = _c.focus, onClose = _c.onClose, onClear = _c.onClear, extendedInputPropsFrom = _c.extendedInputPropsFrom, extendedInputPropsTo = _c.extendedInputPropsTo;
+    // Calendar props
+    var calendarProps = react_1.useMemo(function () { return ({
+        value: [props.inputFrom.value, props.inputTo.value],
+        onChange: focus === 'from' ? props.inputFrom.onChange : props.inputTo.onChange,
+        valueFormat: props.valueFormat,
+        numberOfMonths: 2,
+        showFooter: false
+    }); }, [focus, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange,
+        props.inputTo.value, props.valueFormat]);
+    return components.ui.renderView(props.view || 'form.DateRangeFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear,
+        onClose: onClose,
+        calendarProps: calendarProps, icon: props.icon, size: props.size, errorsTo: props.errorsTo, disabled: props.disabled, noBorder: props.noBorder, className: props.className, showRemove: props.showRemove, errorsFrom: props.errorsFrom, inputPropsTo: extendedInputPropsTo, inputPropsFrom: extendedInputPropsFrom, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo }));
+}
+DateRangeField.defaultProps = {
+    disabled: false,
+    required: false,
+    className: '',
+    displayFormat: 'DD.MM.YYYY',
+    valueFormat: 'YYYY-MM-DD',
+    showRemove: true,
+    icon: true,
+    noBorder: false
+};
+exports["default"] = fieldWrapper_1["default"]('DateRangeField', DateRangeField, { attributeSuffixes: ['from', 'to'] });

package/ui/form/DateRangeField/demo/basic.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-declare const _default: () => JSX.Element;
-/**
- * Обычный пример использования DateRangeField.
- * @order 1
- * @col 6
- */
-export default _default;
+declare const _default: () => JSX.Element;
+/**
+ * Обычный пример использования DateRangeField.
+ * @order 1
+ * @col 6
+ */
+export default _default;