@steroidsjs/core 3.0.0-beta.99 → 3.0.1

package/ui/form/CheckboxTreeField/CheckboxTreeField.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+import { IPreparedTreeItem } from '../../../hooks/useTree';
+import Enum from '../../../base/Enum';
+import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../../ui/form/Field/fieldWrapper';
+import { IDataProviderConfig } from '../../../hooks/useDataProvider';
+import { IDataSelectConfig } from '../../../hooks/useDataSelect';
+import { ICheckboxFieldViewProps } from '../CheckboxField/CheckboxField';
+import { ITreeProps } from '../../nav/Tree/Tree';
+type CheckboxTreeItems = string | ({
+    new (): Enum;
+}) | (string | number | {
+    id: string | number | boolean;
+    label: string;
+    color?: string;
+    [key: string]: any;
+})[];
+/**
+ * CheckboxTreeField
+ *
+ * Список с вложенными чекбоксами. Используется в формах для создания иерархической структуры и выбора нескольких значений.
+ */
+export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent, Pick<ITreeProps, 'levelPadding' | 'alwaysOpened' | 'showIcon' | 'customIcon'> {
+    /**
+     * Свойства для элемента input
+     * @example { onKeyDown: ... }
+     */
+    inputProps?: any;
+    /**
+     * Коллекция элементов
+     * @example
+     * [
+     *  {
+     *      id: 1,
+     *      label: 'Krasnoyarsk',
+     *      color: 'red'
+     *  },
+     *  {
+     *      id: 2,
+     *      label: 'Moscow',
+     *      color: 'purple'
+     *  }
+     * ]
+     */
+    items: CheckboxTreeItems;
+    /**
+     * Первичный ключ для доступа к вложенным элементам
+     */
+    primaryKey?: string;
+    [key: string]: any;
+}
+export interface ICheckboxTreeFieldViewProps extends IFieldWrapperOutputProps, Pick<ITreeProps, 'levelPadding' | 'customIcon'> {
+    items: {
+        id: number | string | boolean;
+        label?: string;
+        isHovered: boolean;
+        color?: string;
+        disabled?: boolean;
+        required?: boolean;
+    } & IPreparedTreeItem[];
+    selectedIds: (PrimaryKey | any)[];
+    onItemSelect: (checkbox: IPreparedTreeItem) => void;
+    renderCheckbox: (checkboxProps: ICheckboxFieldViewProps) => JSX.Element;
+    size?: Size;
+}
+export declare const getNestedItemsIds: (item: any, groupAttribute: any) => any[];
+declare const _default: import("../../../ui/form/Field/fieldWrapper").FieldWrapperComponent<ICheckboxTreeFieldProps>;
+export default _default;

package/ui/form/CheckboxTreeField/CheckboxTreeField.js

@@ -0,0 +1,126 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+exports.getNestedItemsIds = void 0;
+var react_1 = __importStar(require("react"));
+var react_use_1 = require("react-use");
+var isArray_1 = __importDefault(require("lodash-es/isArray"));
+var hooks_1 = require("../../../hooks");
+var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
+var getNestedItemsIds = function (item, groupAttribute) {
+    if (item.disabled) {
+        return [];
+    }
+    var _a = item, _b = groupAttribute, _c = _a[_b], nestedItems = _c === void 0 ? [] : _c;
+    var result = [item.id];
+    if (groupAttribute && (0, isArray_1["default"])(nestedItems)) {
+        nestedItems.reduce(function (acc, nestedItem) {
+            if ((0, isArray_1["default"])(nestedItem[groupAttribute])) {
+                acc.push.apply(acc, (0, exports.getNestedItemsIds)(nestedItem, groupAttribute));
+            }
+            else if (!nestedItem.disabled) {
+                acc.push(nestedItem.id);
+            }
+            return acc;
+        }, result);
+    }
+    return result.sort();
+};
+exports.getNestedItemsIds = getNestedItemsIds;
+function CheckboxTreeField(props) {
+    var components = (0, hooks_1.useComponents)();
+    var inputSelectedIds = (0, react_1.useMemo)(function () { return props.selectedIds || [].concat(props.input.value || []); }, [props.input.value, props.selectedIds]);
+    // Data Provider
+    var items = (0, hooks_1.useDataProvider)({
+        items: props.items
+    }).items;
+    // Tree items
+    var treeItems = (0, hooks_1.useTree)({
+        items: items,
+        autoOpenLevels: 0,
+        alwaysOpened: props.alwaysOpened
+    }).treeItems;
+    // Data select
+    var _a = (0, hooks_1.useDataSelect)({
+        selectedIds: inputSelectedIds,
+        multiple: true,
+        primaryKey: props.primaryKey,
+        items: treeItems,
+        inputValue: props.input.value
+    }), selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
+    var onItemSelect = (0, react_1.useCallback)(function (checkbox) {
+        if (checkbox.hasItems) {
+            var selectedItemIds = (0, exports.getNestedItemsIds)(checkbox, props.primaryKey);
+            setSelectedIds(selectedItemIds);
+        }
+        else {
+            setSelectedIds(checkbox.id);
+        }
+    }, [props.primaryKey, setSelectedIds]);
+    // Sync with form
+    (0, react_1.useEffect)(function () {
+        props.input.onChange.call(null, selectedIds);
+        if (props.onChange) {
+            props.onChange(selectedIds);
+        }
+    }, [props, props.input.onChange, selectedIds]);
+    var onReset = (0, react_1.useCallback)(function () {
+        setSelectedIds([]);
+    }, [setSelectedIds]);
+    // Reset selected ids on form reset
+    var prevInputValue = (0, react_use_1.usePrevious)(props.input.value);
+    (0, react_use_1.useUpdateEffect)(function () {
+        // if form reset
+        if (prevInputValue && props.input.value === undefined && selectedIds.length > 0) {
+            onReset();
+        }
+    }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
+    var CheckboxFieldView = components.ui.getView('form.CheckboxFieldView');
+    var renderCheckbox = function (checkboxProps) { return (react_1["default"].createElement(CheckboxFieldView, __assign({}, checkboxProps))); };
+    return components.ui.renderView(props.view || 'form.CheckboxTreeFieldView', __assign(__assign({}, props), { items: treeItems, onItemSelect: onItemSelect, selectedIds: selectedIds, renderCheckbox: renderCheckbox }));
+}
+CheckboxTreeField.defaultProps = {
+    disabled: false,
+    required: false,
+    className: '',
+    levelPadding: 32,
+    alwaysOpened: false,
+    primaryKey: 'items'
+};
+exports["default"] = (0, fieldWrapper_1["default"])('CheckboxTreeField', CheckboxTreeField);

package/ui/form/CheckboxTreeField/index.d.ts

@@ -0,0 +1,2 @@
+import CheckboxTreeField from './CheckboxTreeField';
+export default CheckboxTreeField;

package/ui/form/CheckboxTreeField/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var CheckboxTreeField_1 = __importDefault(require("./CheckboxTreeField"));
+exports["default"] = CheckboxTreeField_1["default"];

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

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { MaskitoOptions } from '@maskito/core';
+import { IAbsolutePositioningInputProps } from '@steroidsjs/core/hooks/useAbsolutePositioning';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateInputStateInput, IDateInputStateOutput } from './useDateInputState';
 /**
@@ -11,7 +12,7 @@ import { IDateInputStateInput, IDateInputStateOutput } from './useDateInputState
  * Он предоставляет пользователю удобный интерфейс для выбора даты с помощью календаря,
  * а также поддерживает настройку формата отображения даты и другие параметры.
  */
-export interface IDateFieldProps extends IDateInputStateInput, IUiComponent {
+export interface IDateFieldProps extends IDateInputStateInput, IUiComponent, Pick<IAbsolutePositioningInputProps, 'autoPositioning'> {
     /**
      * Свойства для view компонента
      */
@@ -26,7 +27,7 @@ export interface IDateFieldProps extends IDateInputStateInput, IUiComponent {
     maskOptions?: MaskitoOptions;
     [key: string]: any;
 }
-export interface IDateFieldViewProps extends IDateInputStateOutput, Pick<IDateFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'className' | 'calendarProps'> {
+export interface IDateFieldViewProps extends IDateInputStateOutput, Pick<IDateFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'className' | 'calendarProps' | 'autoPositioning'> {
     /**
      * Ref для input элемента, который накладывает маску
      */

package/ui/form/DateField/DateField.js

@@ -39,7 +39,7 @@ function DateField(props) {
     }), onClear = _a.onClear, onClose = _a.onClose, isOpened = _a.isOpened, inputProps = _a.inputProps;
     // Calendar props
     var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: props.input.value, onChange: props.input.onChange, valueFormat: props.valueFormat }, props.calendarProps)); }, [props.calendarProps, props.input.onChange, props.input.value, props.valueFormat]);
-    return components.ui.renderView(props.view || 'form.DateFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, calendarProps: calendarProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove, style: props.style, maskInputRef: maskInputRef }));
+    return components.ui.renderView(props.view || 'form.DateFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, calendarProps: calendarProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove, style: props.style, autoPositioning: props.autoPositioning, maskInputRef: maskInputRef }));
 }
 DateField.defaultProps = {
     disabled: false,
@@ -47,8 +47,12 @@ DateField.defaultProps = {
     icon: true,
     required: false,
     showRemove: true,
+    autoPositioning: true,
     valueFormat: 'YYYY-MM-DD',
-    maskOptions: (0, kit_1.maskitoDateOptionsGenerator)({ mode: 'dd/mm/yyyy', separator: '.' }),
+    maskOptions: (0, kit_1.maskitoDateOptionsGenerator)({
+        mode: 'dd/mm/yyyy',
+        separator: '.'
+    }),
     size: 'md'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateField', DateField);

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

@@ -9,6 +9,7 @@ interface IUseDateRangeProps extends Pick<IDateInputStateInput, 'displayFormat'
     inputTo: any;
     inputFrom: any;
     useSmartFocus: boolean;
+    hasInitialFocus: boolean;
 }
 export default function useDateRange(props: IUseDateRangeProps): {
     focus: "to" | "from";

package/ui/form/DateField/useDateRange.js

@@ -16,12 +16,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var react_1 = require("react");
 var react_use_1 = require("react-use");
+var isNil_1 = __importDefault(require("lodash-es/isNil"));
 var dayjs_1 = __importDefault(require("dayjs"));
 var calendar_1 = require("@steroidsjs/core/utils/calendar");
 function useDateRange(props) {
     // Tracking focus for input being edited
     var _a = (0, react_1.useState)('from'), focus = _a[0], setFocus = _a[1];
-    // Local refs to handle auto-focus
+    var isFirstMount = (0, react_use_1.useFirstMountState)();
+    // Refs to handle auto-focus
     var valueFromRef = (0, react_1.useRef)('');
     var valueToRef = (0, react_1.useRef)('');
     // Close handler
@@ -57,6 +59,12 @@ function useDateRange(props) {
     var prevValueFrom = (0, react_use_1.usePrevious)(props.inputFrom.value);
     var prevValueTo = (0, react_use_1.usePrevious)(props.inputTo.value);
     (0, react_1.useEffect)(function () {
+        if (!props.hasInitialFocus && isFirstMount) {
+            return;
+        }
+        if ((0, isNil_1["default"])(props.inputFrom.value) && (0, isNil_1["default"])(props.inputTo.value)) {
+            return;
+        }
         if (props.useSmartFocus) {
             if (focus === 'from' && !valueToRef.current && prevValueFrom !== props.inputFrom.value) {
                 valueFromRef.current = props.inputFrom.value;
@@ -67,8 +75,11 @@ function useDateRange(props) {
                 inputFromRef.current.focus();
             }
         }
+        else if (props.hasInitialFocus && isFirstMount) {
+            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]);
+    }, [focus, isFirstMount, onClose, prevValueFrom, prevValueTo, props, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange, props.inputTo.value]);
     // Swap start and end dates if start date is later than end date
     (0, react_1.useEffect)(function () {
         if (props.inputFrom.value

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

@@ -1,3 +1,5 @@
+import React from 'react';
+import { MaskitoOptions } from '@maskito/core';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateInputStateInput, IDateInputStateOutput } from '../DateField/useDateInputState';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
@@ -22,7 +24,12 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
     attributeTo?: string;
     /**
      * Свойства для компонента DayPickerInput
-     * @example {dayPickerProps: {showWeekNumbers: true}}
+     * @example
+     * {
+     *  dayPickerProps: {
+     *   showWeekNumbers: true
+     *  }
+     * }
      */
     pickerProps?: any;
     /**
@@ -62,6 +69,24 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
      * Свойства для компонента Calendar
      */
     calendarProps?: ICalendarProps;
+    /**
+     * Устанавливать ли фокус и показывать календарь сразу после рендера страницы
+     * @example true
+     */
+    hasInitialFocus?: boolean;
+    /**
+    * Опции маски для полей
+    */
+    maskOptions?: {
+        /**
+        * Опции маски для поля from
+        */
+        from: MaskitoOptions;
+        /**
+        * Опции маски для поля to
+        */
+        to: MaskitoOptions;
+    };
     [key: string]: any;
 }
 export interface IDateRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style'> {
@@ -69,6 +94,14 @@ export interface IDateRangeFieldViewProps extends IDateInputStateOutput, Omit<IF
     inputPropsTo?: any;
     errorsFrom?: string[];
     errorsTo?: string[];
+    /**
+     * Ref для input элемента, который накладывает маску на поле from
+     */
+    maskInputFromRef?: React.RefCallback<HTMLElement>;
+    /**
+     * Ref для input элемента, который накладывает маску на поле to
+     */
+    maskInputFromTo?: React.RefCallback<HTMLElement>;
 }
 declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDateRangeFieldProps>;
 export default _default;

package/ui/form/DateRangeField/DateRangeField.js

@@ -10,17 +10,45 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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_1 = require("react");
+var react_1 = __importStar(require("react"));
+var kit_1 = require("@maskito/kit");
+var react_2 = require("@maskito/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 _a, _b;
     var components = (0, hooks_1.useComponents)();
+    var maskInputFromRef = (0, react_2.useMaskito)({ options: (_a = props.maskOptions) === null || _a === void 0 ? void 0 : _a.from });
+    var maskInputToRef = (0, react_2.useMaskito)({ options: (_b = props.maskOptions) === null || _b === void 0 ? void 0 : _b.to });
     // Global onChange (from props)
     var onChange = (0, react_1.useCallback)(function () {
         var _a;
@@ -32,7 +60,7 @@ function DateRangeField(props) {
         }
     }, [props.attributeFrom, props.attributeTo, props.inputFrom.value, props.inputTo.value, props.onChange]);
     // Input 'from'
-    var _a = (0, useDateInputState_1["default"])({
+    var _c = (0, useDateInputState_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         input: props.inputFrom,
@@ -41,9 +69,9 @@ function DateRangeField(props) {
         required: props.required,
         inputProps: props.inputPropsFrom,
         onChange: onChange
-    }), isOpenedFrom = _a.isOpened, onCloseFrom = _a.onClose, inputPropsFrom = _a.inputProps, onClearFrom = _a.onClear;
+    }), isOpenedFrom = _c.isOpened, onCloseFrom = _c.onClose, inputPropsFrom = _c.inputProps, onClearFrom = _c.onClear;
     // Input 'to'
-    var _b = (0, useDateInputState_1["default"])({
+    var _d = (0, useDateInputState_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         input: props.inputTo,
@@ -52,8 +80,8 @@ function DateRangeField(props) {
         required: props.required,
         inputProps: props.inputPropsTo,
         onChange: onChange
-    }), isOpenedTo = _b.isOpened, onCloseTo = _b.onClose, inputPropsTo = _b.inputProps, onClearTo = _b.onClear;
-    var _c = (0, useDateRange_1["default"])({
+    }), isOpenedTo = _d.isOpened, onCloseTo = _d.onClose, inputPropsTo = _d.inputProps, onClearTo = _d.onClear;
+    var _e = (0, useDateRange_1["default"])({
         onClearFrom: onClearFrom,
         onCloseTo: onCloseTo,
         onCloseFrom: onCloseFrom,
@@ -63,9 +91,21 @@ function DateRangeField(props) {
         inputFrom: props.inputFrom,
         inputTo: props.inputTo,
         useSmartFocus: true,
+        hasInitialFocus: props.hasInitialFocus,
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat
-    }), focus = _c.focus, onClose = _c.onClose, onClear = _c.onClear, extendedInputPropsFrom = _c.extendedInputPropsFrom, extendedInputPropsTo = _c.extendedInputPropsTo;
+    }), focus = _e.focus, onClose = _e.onClose, onClear = _e.onClear, extendedInputPropsFrom = _e.extendedInputPropsFrom, extendedInputPropsTo = _e.extendedInputPropsTo;
+    react_1["default"].useEffect(function () {
+        if (extendedInputPropsFrom.ref && extendedInputPropsTo.ref) {
+            maskInputFromRef(extendedInputPropsFrom.ref.current);
+            maskInputToRef(extendedInputPropsTo.ref.current);
+        }
+    }, [
+        extendedInputPropsFrom.ref,
+        extendedInputPropsTo.ref,
+        maskInputFromRef,
+        maskInputToRef,
+    ]);
     // Calendar props
     var calendarProps = (0, react_1.useMemo)(function () { return ({
         value: [props.inputFrom.value, props.inputTo.value],
@@ -84,8 +124,19 @@ DateRangeField.defaultProps = {
     displayFormat: 'DD.MM.YYYY',
     valueFormat: 'YYYY-MM-DD',
     showRemove: true,
+    hasInitialFocus: false,
     icon: true,
     noBorder: false,
-    size: 'md'
+    size: 'md',
+    maskOptions: {
+        from: (0, kit_1.maskitoDateOptionsGenerator)({
+            mode: 'dd/mm/yyyy',
+            separator: '.'
+        }),
+        to: (0, kit_1.maskitoDateOptionsGenerator)({
+            mode: 'dd/mm/yyyy',
+            separator: '.'
+        })
+    }
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateRangeField', DateRangeField, { attributeSuffixes: ['from', 'to'] });

package/ui/form/DateTimeField/DateTimeField.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import { MaskitoOptions } from '@maskito/core';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateInputStateInput, IDateInputStateOutput } from '../../form/DateField/useDateInputState';
 /**
@@ -17,9 +19,17 @@ export interface IDateTimeFieldProps extends IDateInputStateInput, IUiComponent
      * Свойства для компонента панели времени
      */
     timePanelViewProps?: any;
+    /**
+     * Опции маски для поля ввода
+     */
+    maskOptions?: MaskitoOptions;
     [key: string]: any;
 }
 export interface IDateTimeFieldViewProps extends IDateInputStateOutput, Pick<IDateTimeFieldProps, 'size' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'timePanelViewProps'> {
+    /**
+     * Ref для input элемента, который накладывает маску
+     */
+    maskInputRef?: React.RefCallback<HTMLElement>;
     [key: string]: any;
 }
 declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDateTimeFieldProps>;

package/ui/form/DateTimeField/DateTimeField.js

@@ -15,17 +15,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var react_1 = require("react");
+var kit_1 = require("@maskito/kit");
+var react_2 = require("@maskito/react");
 var useDateTime_1 = __importDefault(require("../DateField/useDateTime"));
 var useDateInputState_1 = __importDefault(require("../../form/DateField/useDateInputState"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
-var DATE_TIME_SEPARATOR = ' ';
+var DATE_TIME_SEPARATOR = ', ';
 /**
  * DateTimeField
  * Поля ввода с выпадающими списками для выбора даты и времени
  */
 function DateTimeField(props) {
     var components = (0, hooks_1.useComponents)();
+    var maskInputRef = (0, react_2.useMaskito)({ options: props.maskOptions });
     var _a = (0, useDateInputState_1["default"])({
         input: props.input,
         disabled: props.disabled,
@@ -56,7 +59,7 @@ function DateTimeField(props) {
         value: timeValue,
         onSelect: onTimeSelect
     }); }, [onClose, onTimeSelect, timeValue]);
-    return components.ui.renderView(props.view || 'form.DateTimeFieldView', __assign(__assign({}, props.viewProps), { isOpened: isOpened, onClear: onClear, onClose: onClose, inputProps: inputProps, calendarProps: calendarProps, timePanelViewProps: timePanelViewProps, size: props.size, icon: props.icon, label: props.label, errors: props.errors, className: props.className, showRemove: props.showRemove, isInvalid: props.isInvalid, disabled: props.disabled, style: props.style }));
+    return components.ui.renderView(props.view || 'form.DateTimeFieldView', __assign(__assign({}, props.viewProps), { isOpened: isOpened, onClear: onClear, onClose: onClose, inputProps: inputProps, calendarProps: calendarProps, timePanelViewProps: timePanelViewProps, size: props.size, icon: props.icon, label: props.label, errors: props.errors, className: props.className, showRemove: props.showRemove, isInvalid: props.isInvalid, disabled: props.disabled, style: props.style, maskInputRef: maskInputRef }));
 }
 DateTimeField.defaultProps = {
     disabled: false,
@@ -67,6 +70,11 @@ DateTimeField.defaultProps = {
     useUTC: false,
     dateInUTC: false,
     size: 'md',
-    icon: true
+    icon: true,
+    maskOptions: (0, kit_1.maskitoDateTimeOptionsGenerator)({
+        dateMode: 'dd/mm/yyyy',
+        timeMode: 'HH:MM',
+        dateSeparator: '.'
+    })
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateTimeField', DateTimeField);

package/ui/form/DateTimeRangeField/DateTimeRangeField.d.ts

@@ -1,3 +1,4 @@
+import { MaskitoOptions } from '@maskito/core';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateRangeFieldProps } from '../../form/DateRangeField/DateRangeField';
 import { IDateInputStateInput, IDateInputStateOutput } from '../../form/DateField/useDateInputState';
@@ -24,7 +25,12 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
     attributeTo?: string;
     /**
      * Свойства для компонента DayPickerInput
-     * @example {dayPickerProps: {showWeekNumbers: true}}
+     * @example
+     * {
+     *  dayPickerProps: {
+     *   showWeekNumbers: true
+     *  }
+     * }
      */
     pickerProps?: any;
     /**
@@ -43,6 +49,24 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
      * Свойства для компонента Calendar
      */
     calendarProps?: ICalendarProps;
+    /**
+     * Устанавливать ли фокус и показывать календарь сразу после рендера страницы
+     * @example true
+     */
+    hasInitialFocus?: boolean;
+    /**
+    * Опции маски для полей
+    */
+    maskOptions?: {
+        /**
+        * Опции маски для поля from
+        */
+        from: MaskitoOptions;
+        /**
+        * Опции маски для поля to
+        */
+        to: MaskitoOptions;
+    };
     [key: string]: any;
 }
 export interface IDateTimeRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style'> {