@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.7

package/ui/form/DateField/useDateInputState.js

@@ -0,0 +1,89 @@
+"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 react_use_1 = require("react-use");
+var moment_1 = __importDefault(require("moment"));
+var calendar_1 = require("../../../utils/calendar");
+function useDateInputState(props) {
+    // Get props value
+    var propsDisplayValue = react_1.useMemo(function () { return calendar_1.convertDate(props.input.value, [
+        props.valueFormat,
+        props.displayFormat,
+    ], props.displayFormat, props.useUTC, props.dateInUTC) || ''; }, [props.displayFormat, props.input.value, props.valueFormat]);
+    // Display value state
+    var _a = react_1.useState(propsDisplayValue), displayValue = _a[0], setDisplayValue = _a[1];
+    // Update display value on update props input value
+    react_use_1.useUpdateEffect(function () {
+        if (displayValue !== propsDisplayValue) {
+            setDisplayValue(propsDisplayValue);
+            if (props.onChange) {
+                props.onChange.call(null, propsDisplayValue);
+            }
+        }
+        // Subscribe on props value changed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [propsDisplayValue]);
+    // Display input change handler
+    var onDisplayValueChange = react_1.useCallback(function (value) {
+        value = value.replace(/[^0-9:. ]/g, '');
+        setDisplayValue(value);
+        var parsedValue = calendar_1.convertDate(value, props.displayFormat, props.valueFormat, props.useUTC, props.dateInUTC);
+        var newValue = parsedValue || !value ? parsedValue || null : false;
+        if (newValue && newValue !== props.input.value) {
+            props.input.onChange.call(null, newValue);
+            if (props.onChange) {
+                props.onChange.call(null, value);
+            }
+        }
+    }, [props.displayFormat, props.input.onChange, props.input.value, props.onChange, props.valueFormat, props.useUTC, props.dateInUTC]);
+    // Dropdown opened state
+    var _b = react_1.useState(false), isOpened = _b[0], setIsOpened = _b[1];
+    // Focus/blur handlers
+    var onFocus = react_1.useCallback(function (e) {
+        e.preventDefault();
+        setIsOpened(true);
+    }, [setIsOpened]);
+    var onBlur = react_1.useCallback(function () {
+        if (propsDisplayValue !== displayValue) {
+            setDisplayValue(propsDisplayValue);
+        }
+    }, [displayValue, propsDisplayValue]);
+    var onClose = react_1.useCallback(function () {
+        setIsOpened(false);
+        if (propsDisplayValue !== displayValue) {
+            setDisplayValue(propsDisplayValue);
+        }
+    }, [displayValue, propsDisplayValue]);
+    var onClear = react_1.useCallback(function () {
+        onDisplayValueChange('');
+    }, [onDisplayValueChange]);
+    var onNow = react_1.useCallback(function () {
+        onDisplayValueChange(moment_1["default"]().format(props.displayFormat));
+    }, [onDisplayValueChange, props.displayFormat]);
+    // Display input props
+    var inputProps = react_1.useMemo(function () { return (__assign({ value: displayValue, onChange: onDisplayValueChange, onFocus: onFocus,
+        onBlur: onBlur, disabled: props.disabled, placeholder: props.placeholder || props.displayFormat, required: props.required, name: props.input.name, autoComplete: 'off', type: 'text' }, props.inputProps)); }, [displayValue, onBlur, onDisplayValueChange, onFocus, props.disabled, props.displayFormat,
+        props.input.name, props.inputProps, props.placeholder, props.required]);
+    return {
+        isOpened: isOpened,
+        inputProps: inputProps,
+        onClear: onClear,
+        onClose: onClose,
+        onNow: onNow
+    };
+}
+exports["default"] = useDateInputState;

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

@@ -0,0 +1,19 @@
+interface IUseDateRangeProps {
+    onCloseFrom: any;
+    onCloseTo: any;
+    onClearFrom: any;
+    onClearTo: any;
+    inputPropsFrom: any;
+    inputPropsTo: any;
+    inputTo: any;
+    inputFrom: any;
+    useSmartFocus: boolean;
+}
+export default function useDateRange(props: IUseDateRangeProps): {
+    focus: "from" | "to";
+    onClose: () => void;
+    onClear: () => void;
+    extendedInputPropsFrom: any;
+    extendedInputPropsTo: any;
+};
+export {};

package/ui/form/DateField/useDateRange.js

@@ -0,0 +1,74 @@
+"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;

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

@@ -0,0 +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 {};

package/ui/form/DateField/useDateTime.js

@@ -0,0 +1,44 @@
+"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;

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

@@ -0,0 +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;

package/ui/form/DateRangeField/DateRangeField.js

@@ -0,0 +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'] });

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

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

package/ui/form/DateRangeField/demo/basic.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var DateRangeField_1 = __importDefault(require("../DateRangeField"));
+/**
+ * Обычный пример использования DateRangeField.
+ * @order 1
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(DateRangeField_1["default"], { attributeFrom: 'fromTime', attributeTo: 'toTime' }))); });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Выключенный или недоступный для использования.
+ * @order 2
+ * @col 6
+ */
+export default _default;

package/ui/form/DateRangeField/demo/disabled.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var DateRangeField_1 = __importDefault(require("../DateRangeField"));
+/**
+ * Выключенный или недоступный для использования.
+ * @order 2
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(DateRangeField_1["default"], { label: 'Disabled', disabled: true }))); });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Обработка ошибок.
+ * @order 4
+ * @col 6
+ */
+export default _default;

package/ui/form/DateRangeField/demo/errors.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var DateRangeField_1 = __importDefault(require("../DateRangeField"));
+/**
+ * Обработка ошибок.
+ * @order 4
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(DateRangeField_1["default"], { label: 'Errors', errors: ['Error 1 text', 'Error 2 text'], layout: true }))); });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * С использованием кастомной иконкой.
+ * @order 5
+ * @col 6
+ */
+export default _default;

package/ui/form/DateRangeField/demo/icon.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var DateRangeField_1 = __importDefault(require("../DateRangeField"));
+/**
+ * С использованием кастомной иконкой.
+ * @order 5
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(DateRangeField_1["default"], { label: 'Default', icon: true }),
+    React.createElement(DateRangeField_1["default"], { label: 'With error', icon: 'plane', errors: ['Error 1 text'] }),
+    React.createElement(DateRangeField_1["default"], { label: 'Custom', icon: 'dizzy' }))); });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * С сообщением для пользователя по контексту использования.
+ * @order 6
+ * @col 6
+ */
+export default _default;

package/ui/form/DateRangeField/demo/placeholder.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var DateRangeField_1 = __importDefault(require("../DateRangeField"));
+/**
+ * С сообщением для пользователя по контексту использования.
+ * @order 6
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(DateRangeField_1["default"], { label: 'Placeholder', placeholder: 'Your date...' }))); });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Как обязательное поле для заполнения.
+ * @order 3
+ * @col 6
+ */
+export default _default;