@steroidsjs/core 3.0.0-beta.80 → 3.0.0-beta.82

package/en.json

@@ -782,5 +782,27 @@
     "  Элементы меню": " Menu Items",
     "При указании данного свойства, после нажатия на кнопку и до выполнения действия будет отображено нативное\nокно с текстом подтверждения - `window.confirm('Ваш текст')`.": "When this property is specified, after clicking the button and before performing the action, a native \nwindow with the confirmation text will be displayed - `window.confirm('Your text')`.",
     "Контент, который отобразиться, если элемент навигации будет активен": "The content that will be displayed if the navigation element is active",
-    " Используется для управления раскрытием всех элементов в дереве": " Used to control the expansion of all items in the tree"
+    " Используется для управления раскрытием всех элементов в дереве": " Used to control the expansion of all items in the tree",
+    "\nСписок с чекбоксами. Используется в формах для выбора нескольких значений.\n": "",
+    "Разница времени с бекендом (в микросекундах)": "",
+    "Временная зона бекенда": "",
+    "Исходный язык": "",
+    "Переводы сообщений": "",
+    "Показывать ли компонент сразу после рендера страницы": "",
+    "Объект стилей для позиционирования стрелки": "",
+    "Позиция компонента слева": "",
+    "Позиция компонента справа": "",
+    "Позиция компонента сверху": "",
+    "Обработчик события загрузки файлов": "",
+    "Если в форме есть элементы \\<input\\>, то произойдет автоматическая фокусировка на первом из них": "",
+    "Варианты абсолютного позиционирования": "",
+    "Получение экземпляра `dayjs` с учетом временной зоны бекенда": "",
+    "Алиас для метода `translate`": "",
+    "Перевод сообщения": "",
+    "Компонент графика из библиотеки nivo": "",
+    "Конфигурация, настройки отображения графика": "",
+    "Данные для графика": "",
+    "Фиксированная высота графика в пикселях": "",
+    "Использовать ли дефолтную конфигурацию для графика типа line": "",
+    "Этот компонент позволяет создавать в проекте графики разных типов. Под капотом для графиков используется библиотека nivo.\nДля работы этого компонента необходимо установить в проекте зависимости @nivo/core и пакет конкретного графика nivo, например @nivo/line.\nКомпонент графика nivo нужно передать в пропс chartComponent": ""
 }

package/hooks/useAbsolutePositioning.d.ts

@@ -1,14 +1,55 @@
 import * as React from 'react';
-interface IStyleObj {
+export interface IComponentStylePosition {
+    /**
+     * Позиция компонента слева
+     */
     left: 'unset' | number;
+    /**
+     * Позиция компонента справа
+     */
     right: 'unset' | number;
+    /**
+     * Позиция компонента сверху
+     */
     top: 'unset' | number;
 }
+export interface IComponentArrowPosition {
+    /**
+     * Позиция стрелки слева
+     */
+    left?: number | string;
+    /**
+     * Позиция стрелки справа
+     */
+    right?: number | string;
+    /**
+     * Позиция стрелки сверху
+     */
+    top?: number | string;
+    /**
+     * Позиция стрелки снизу
+     */
+    bottom?: number | string;
+}
+export declare const enum Position {
+    TOP = "top",
+    TOP_LEFT = "topLeft",
+    TOP_RIGHT = "topRight",
+    BOTTOM = "bottom",
+    BOTTOM_LEFT = "bottomLeft",
+    BOTTOM_RIGHT = "bottomRight",
+    LEFT = "left",
+    LEFT_TOP = "leftTop",
+    LEFT_BOTTOM = "leftBottom",
+    RIGHT = "right",
+    RIGHT_TOP = "rightTop",
+    RIGHT_BOTTOM = "rightBottom"
+}
 /**
  * Варианты абсолютного позиционирования
  * @example 'top'
  */
-type Position = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
+export type PositionType = keyof typeof Position | string;
 export interface IAbsolutePositioningInputProps {
     /**
      * Включает "умное" позиционирование - если компонент не может быть помещен в промежуток между целевым компонентом
@@ -32,13 +73,17 @@ export interface IAbsolutePositioningInputProps {
     /**
      * Позиционирование компонента, относительно целевого элемента
      */
-    position: Position;
+    position: PositionType;
     /**
      * Отобразить или скрыть компонент.
      * Включает "ручной режим", при котором можно задать логику отображения компонента извне,
      * через измененение данного свойства.
      */
     visible?: boolean;
+    /**
+     * Показывать ли компонент сразу после рендера страницы
+     */
+    defaultVisible?: boolean;
     /**
      * Обработчик изменения свойства isComponentVisible (отображение на странице).
      * Возвращает значение isComponentVisible.
@@ -62,15 +107,19 @@ export interface IAbsolutePositioningOutputProps {
     /**
      * Объект стилей для абсолютного позиционирования
      */
-    style: IStyleObj;
+    style: IComponentStylePosition;
+    /**
+     * Объект стилей для позиционирования стрелки
+     */
+    arrowPosition?: IComponentArrowPosition;
 }
 export default function useAbsolutePositioning(props: IAbsolutePositioningInputProps): {
     isComponentExist: boolean;
     isComponentVisible: boolean;
-    style: IStyleObj;
+    style: IComponentStylePosition;
     position: string;
-    calculateAbsolutePosition: (newPosition: Position, childRef: any, componentSize: any) => void;
+    arrowPosition: IComponentArrowPosition;
+    calculateAbsolutePosition: (newPosition: PositionType, parentRef: any, componentSize: any, arrowSize?: any) => void;
     onShow: () => void;
     onHide: () => void;
 };
-export {};

package/hooks/useAbsolutePositioning.js

@@ -1,146 +1,53 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
+exports.Position = void 0;
 var react_1 = require("react");
+var calculateComponentAbsolutePosition_1 = __importDefault(require("../utils/calculateComponentAbsolutePosition"));
+var Position;
+(function (Position) {
+    Position["TOP"] = "top";
+    Position["TOP_LEFT"] = "topLeft";
+    Position["TOP_RIGHT"] = "topRight";
+    Position["BOTTOM"] = "bottom";
+    Position["BOTTOM_LEFT"] = "bottomLeft";
+    Position["BOTTOM_RIGHT"] = "bottomRight";
+    Position["LEFT"] = "left";
+    Position["LEFT_TOP"] = "leftTop";
+    Position["LEFT_BOTTOM"] = "leftBottom";
+    Position["RIGHT"] = "right";
+    Position["RIGHT_TOP"] = "rightTop";
+    Position["RIGHT_BOTTOM"] = "rightBottom";
+})(Position = exports.Position || (exports.Position = {}));
+var DEFAULT_AUTO_POSITIONING_VALUE = true;
 function useAbsolutePositioning(props) {
     var _a = (0, react_1.useState)(props.visible), isComponentExist = _a[0], setIsComponentExist = _a[1];
-    var _b = (0, react_1.useState)(props.visible), isComponentVisible = _b[0], setIsComponentVisible = _b[1];
+    var _b = (0, react_1.useState)(props.visible || props.defaultVisible), isComponentVisible = _b[0], setIsComponentVisible = _b[1];
     var _c = (0, react_1.useState)(props.position), position = _c[0], setPosition = _c[1];
     var _d = (0, react_1.useState)({
+        left: null,
+        right: null,
+        top: null,
+        bottom: null
+    }), arrowPosition = _d[0], setArrowPosition = _d[1];
+    var _e = (0, react_1.useState)({
         left: null,
         right: null,
         top: null
-    }), style = _d[0], setStyle = _d[1];
+    }), style = _e[0], setStyle = _e[1];
+    var hasAutoPositioning = (0, react_1.useMemo)(function () { var _a; return (_a = props.autoPositioning) !== null && _a !== void 0 ? _a : DEFAULT_AUTO_POSITIONING_VALUE; }, [props.autoPositioning]);
     var timerRef = (0, react_1.useRef)(null);
-    var calculateAbsolutePosition = (0, react_1.useCallback)(function (newPosition, childRef, componentSize) {
-        var newStyle = { left: null, right: null, top: null };
-        var _a = childRef.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, width = _a.width, height = _a.height;
-        var parentDimensions = { top: top, right: right, left: left, width: width, height: height };
-        parentDimensions.top += window.scrollY;
-        var useAutoPositioning = props.autoPositioning;
-        // eslint-disable-next-line default-case
-        switch (newPosition) {
-            case 'top':
-            case 'topLeft':
-            case 'topRight':
-                // Проверка - выходит ли tooltip за верхний край страницы?
-                // Если да - меняем позицию на bottom
-                if (useAutoPositioning
-                    && ((parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + props.gap))) {
-                    newStyle.top = parentDimensions.top + parentDimensions.height;
-                    newPosition = newPosition.replace('top', 'bottom');
-                }
-                else {
-                    newStyle.top = parentDimensions.top - componentSize.height;
-                }
-                break;
-            case 'bottom':
-            case 'bottomLeft':
-            case 'bottomRight':
-                // Проверка - выходит ли tooltip за нижний край страницы?
-                // Если да - меняем позицию на top
-                if (useAutoPositioning
-                    && ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY))) <= Math.round(componentSize.height + props.gap)) {
-                    newStyle.top = parentDimensions.top - componentSize.height;
-                    newPosition = newPosition.replace('bottom', 'top');
-                }
-                else {
-                    newStyle.top = parentDimensions.top + parentDimensions.height;
-                }
-                break;
-            case 'left':
-            case 'leftTop':
-            case 'leftBottom':
-                // Проверка - выходит ли tooltip за левый край страницы?
-                // Если да - меняем позицию на right
-                if (useAutoPositioning && (parentDimensions.left <= Math.round(componentSize.width + props.gap))) {
-                    newStyle.left = parentDimensions.right;
-                    newPosition = newPosition.replace('left', 'right');
-                }
-                else {
-                    newStyle.left = parentDimensions.left - componentSize.width;
-                }
-                break;
-            case 'right':
-            case 'rightTop':
-            case 'rightBottom':
-                // Проверка - выходит ли tooltip за правый край страницы?
-                // Если да - меняем позицию на left
-                if (useAutoPositioning
-                    && (document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + props.gap))) {
-                    newStyle.left = parentDimensions.left - componentSize.width;
-                    newPosition = newPosition.replace('right', 'left');
-                }
-                else {
-                    newStyle.left = parentDimensions.right;
-                }
-                break;
-        }
-        // eslint-disable-next-line default-case
-        switch (newPosition) {
-            case 'top':
-            case 'bottom':
-                // Выравнивание по середине
-                newStyle.left = (parentDimensions.left + (parentDimensions.width / 2)) - (componentSize.width / 2);
-                break;
-            case 'topLeft':
-            case 'bottomLeft':
-                // Ширина tooltip больше родителя - стрелка на середину родителя
-                newStyle.left = parentDimensions.left;
-                break;
-            case 'topRight':
-            case 'bottomRight':
-                // Ширина tooltip больше родителя - стрелка на середину родителя
-                newStyle.right = document.body.clientWidth - parentDimensions.right;
-                break;
-            case 'left':
-            case 'right':
-                newStyle.top = (parentDimensions.top + (parentDimensions.height / 2)) - (componentSize.height / 2);
-                break;
-            case 'leftTop':
-            case 'rightTop':
-                newStyle.top = parentDimensions.top;
-                break;
-            case 'leftBottom':
-            case 'rightBottom':
-                newStyle.top = parentDimensions.top + parentDimensions.height - componentSize.height;
-                break;
-        }
-        // Проверка - при позиционировании top/bottom tooltip не выходит за пределы страницы по горизонтали
-        if (newPosition.includes('top') || newPosition.includes('bottom')) {
-            if (!newPosition.includes('Left')
-                && (newStyle.left < 0 || parentDimensions.left
-                    <= Math.round((componentSize.width - parentDimensions.width) + props.gap))) {
-                newStyle.right = null;
-                newPosition = newPosition.replace('Right', 'Left');
-                newStyle.left = parentDimensions.left;
-            }
-            if (!newPosition.includes('Right')
-                && (document.body.clientWidth - parentDimensions.right
-                    <= Math.round((componentSize.width - parentDimensions.width) + props.gap))) {
-                newPosition = newPosition.replace('Left', 'Right');
-                newStyle.left = null;
-                newStyle.right = document.body.clientWidth - parentDimensions.right;
-            }
-        }
-        // Проверка - при позиционировании left/right tooltip не выходит за пределы страницы по вертикали
-        if (newPosition.includes('left') || newPosition.includes('right')) {
-            if (!newPosition.includes('Top')
-                && parentDimensions.top - window.scrollY
-                    <= Math.round((componentSize.height - parentDimensions.height) + props.gap)) {
-                newPosition = newPosition.replace('Bottom', 'Top');
-                newStyle.top = parentDimensions.top;
-            }
-            if (!newPosition.includes('Bottom')
-                && (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)
-                    <= Math.round((componentSize.height - parentDimensions.height) + props.gap))) {
-                newPosition = newPosition.replace('Top', 'Bottom');
-                newStyle.top = parentDimensions.top + parentDimensions.height - componentSize.height;
-            }
-        }
+    var calculateAbsolutePosition = (0, react_1.useCallback)(function (newPosition, parentRef, componentSize, arrowSize) {
+        if (arrowSize === void 0) { arrowSize = null; }
+        var _a = (0, calculateComponentAbsolutePosition_1["default"])(props.gap, newPosition, parentRef, componentSize, arrowSize, hasAutoPositioning), newStyle = _a.style, calculatedPosition = _a.position, calculatedArrowPosition = _a.arrowPosition;
         setStyle(newStyle);
-        setPosition(newPosition);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.gap]);
+        setPosition(calculatedPosition);
+        if (calculatedArrowPosition) {
+            setArrowPosition(calculatedArrowPosition);
+        }
+    }, [hasAutoPositioning, props.gap]);
     var onShow = (0, react_1.useCallback)(function () {
         if (timerRef.current) {
             clearTimeout(timerRef.current);
@@ -180,6 +87,7 @@ function useAbsolutePositioning(props) {
         isComponentVisible: isComponentVisible,
         style: style,
         position: position,
+        arrowPosition: arrowPosition,
         calculateAbsolutePosition: calculateAbsolutePosition,
         onShow: onShow,
         onHide: onHide

package/hooks/useApplication.js

@@ -55,6 +55,7 @@ var merge_1 = __importDefault(require("lodash-es/merge"));
 var react_1 = require("react");
 var relativeTime_1 = __importDefault(require("dayjs/plugin/relativeTime"));
 var localizedFormat_1 = __importDefault(require("dayjs/plugin/localizedFormat"));
+var customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 var dayjs_1 = __importDefault(require("dayjs"));
 var utc_1 = __importDefault(require("dayjs/plugin/utc"));
 var ThemeProvider_1 = __importDefault(require("../providers/ThemeProvider"));
@@ -99,6 +100,7 @@ function useApplication(config) {
     var useGlobal = config.useGlobal !== false;
     //Extending dayjs / day.js with modules that used in steroids
     dayjs_1["default"].extend(relativeTime_1["default"]);
+    dayjs_1["default"].extend(customParseFormat_1["default"]);
     dayjs_1["default"].extend(localizedFormat_1["default"]);
     dayjs_1["default"].extend(utc_1["default"]);
     var components = (0, useComponents_1["default"])();

package/hooks/useDataSelect.js

@@ -102,6 +102,9 @@ function useDataSelect(config) {
                 if (selectedIds.length !== 1 || selectedIds[0] !== id_1) {
                     setSelectedIdsInternal([id_1]);
                 }
+                else if (selectedIds.length === 1 && selectedIds[0] === id_1) {
+                    setSelectedIdsInternal([]);
+                }
                 setIsOpened(false);
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.80",
+ "version": "3.0.0-beta.82",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {

package/ui/content/Chart/Chart.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+/**
+ * Chart
+ * Этот компонент позволяет создавать в проекте графики разных типов. Под капотом для графиков используется библиотека nivo.
+ * Для работы этого компонента необходимо установить в проекте зависимости @nivo/core и пакет конкретного графика nivo, например @nivo/line.
+ * Компонент графика nivo нужно передать в пропс chartComponent
+ */
+export interface IChartProps extends IUiComponent {
+    /**
+     * Компонент графика из библиотеки nivo
+     * @example ResponsiveLine
+     */
+    chartComponent: any;
+    /**
+     * Данные для графика
+     * @example [{id: 1, value: 15}, {id: 2, value: 30}]
+     */
+    data: Record<string, any>[];
+    /**
+     * Конфигурация, настройки отображения графика
+     * @example {lineWidth: 3, pointSize: 10}
+     */
+    config?: Record<string, any>;
+    /**
+     * Фиксированная высота графика в пикселях
+     * @example 500
+     */
+    height?: number;
+    /**
+     * Использовать ли дефолтную конфигурацию для графика типа line
+     * @example ResponsiveLine
+     */
+    useDefaultLineChartConfig?: boolean;
+    [key: string]: any;
+}
+export type IChartViewProps = IChartProps;
+export default function Chart(props: IChartProps): JSX.Element;

package/ui/content/Chart/Chart.js

@@ -0,0 +1,19 @@
+"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 hooks_1 = require("../../../hooks");
+function Chart(props) {
+    var components = (0, hooks_1.useComponents)();
+    return components.ui.renderView(props.view || 'content.ChartView', __assign({}, props));
+}
+exports["default"] = Chart;

package/ui/content/Chart/index.d.ts

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

package/ui/content/Chart/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 Chart_1 = __importDefault(require("./Chart"));
+exports["default"] = Chart_1["default"];

package/ui/content/DropDown/DropDown.d.ts

@@ -16,7 +16,7 @@ export interface IDropDownProps extends IAbsolutePositioningInputProps {
      * В каком случае закрывать DropDown. По-умолчанию - `click-away`
      * @example click-any
      */
-    closeMode?: 'click-away' | 'click-any';
+    closeMode?: 'click-away' | 'click-any' | string;
     /**
     * Позволяет управлять отображением указателя
     * @example true

package/ui/content/DropDown/DropDown.js

@@ -96,7 +96,7 @@ function DropDown(props) {
             React.createElement(DropDownView, __assign({}, props, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide }))))));
 }
 DropDown.defaultProps = {
-    autoPositioning: false,
+    autoPositioning: true,
     componentDestroyDelay: 300,
     defaultVisible: false,
     gap: 15,

package/ui/content/index.d.ts

@@ -8,5 +8,6 @@ import { Detail, DetailItem } from './Detail';
 import Icon from './Icon';
 import Menu from './Menu';
 import CopyToClipboard from './CopyToClipboard';
+import Chart from './Chart';
 import Slider from './Slider';
-export { Avatar, AvatarGroup, Accordion, AccordionItem, Alert, Card, DropDown, Badge, Detail, DetailItem, Icon, Menu, CopyToClipboard, Slider, };
+export { Avatar, AvatarGroup, Accordion, AccordionItem, Alert, Card, DropDown, Badge, Detail, DetailItem, Icon, Menu, CopyToClipboard, Chart, Slider, };

package/ui/content/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.Slider = exports.CopyToClipboard = exports.Menu = exports.Icon = exports.DetailItem = exports.Detail = exports.Badge = exports.DropDown = exports.Card = exports.Alert = exports.AccordionItem = exports.Accordion = exports.AvatarGroup = exports.Avatar = void 0;
+exports.Slider = exports.Chart = exports.CopyToClipboard = exports.Menu = exports.Icon = exports.DetailItem = exports.Detail = exports.Badge = exports.DropDown = exports.Card = exports.Alert = exports.AccordionItem = exports.Accordion = exports.AvatarGroup = exports.Avatar = void 0;
 var Avatar_1 = require("./Avatar");
 exports.Avatar = Avatar_1.Avatar;
 exports.AvatarGroup = Avatar_1.AvatarGroup;
@@ -27,5 +27,7 @@ var Menu_1 = __importDefault(require("./Menu"));
 exports.Menu = Menu_1["default"];
 var CopyToClipboard_1 = __importDefault(require("./CopyToClipboard"));
 exports.CopyToClipboard = CopyToClipboard_1["default"];
+var Chart_1 = __importDefault(require("./Chart"));
+exports.Chart = Chart_1["default"];
 var Slider_1 = __importDefault(require("./Slider"));
 exports.Slider = Slider_1["default"];

package/ui/form/CheckboxListField/CheckboxListField.d.ts

@@ -7,7 +7,6 @@ import { ICheckboxFieldViewProps } from '../CheckboxField/CheckboxField';
  * CheckboxListField
  *
  * Список с чекбоксами. Используется в формах для выбора нескольких значений.
- *
  */
 export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, IDataProviderConfig, Omit<IDataSelectConfig, 'items'>, IUiComponent {
     /**
@@ -39,6 +38,7 @@ export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps {
     orientation?: Orientation;
     disabled?: boolean;
     renderCheckbox: (checkboxProps: ICheckboxFieldViewProps) => JSX.Element;
+    size?: Size;
 }
 declare const _default: import("../../../ui/form/Field/fieldWrapper").FieldWrapperComponent<ICheckboxListFieldProps>;
 export default _default;

package/ui/form/CheckboxListField/CheckboxListField.js

@@ -77,7 +77,7 @@ function CheckboxListField(props) {
         }
     }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
     var CheckboxFieldView = components.ui.getView('form.CheckboxFieldView');
-    var renderCheckbox = function (checkboxProps) { return React.createElement(CheckboxFieldView, __assign({}, checkboxProps)); };
+    var renderCheckbox = function (checkboxProps) { return (React.createElement(CheckboxFieldView, __assign({}, checkboxProps))); };
     return components.ui.renderView(props.view || 'form.CheckboxListFieldView', __assign(__assign({}, props), { items: items, inputProps: inputProps, onItemSelect: onItemSelect, selectedIds: selectedIds, renderCheckbox: renderCheckbox }));
 }
 CheckboxListField.defaultProps = {

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

@@ -1,4 +1,5 @@
-interface IUseDateRangeProps {
+import { IDateInputStateInput } from '@steroidsjs/core/ui/form/DateField/useDateInputState';
+interface IUseDateRangeProps extends Pick<IDateInputStateInput, 'displayFormat' | 'valueFormat' | 'useUTC' | 'dateInUTC'> {
     onCloseFrom: any;
     onCloseTo: any;
     onClearFrom: any;

package/ui/form/DateField/useDateRange.js

@@ -10,9 +10,14 @@ var __assign = (this && this.__assign) || function () {
     };
     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 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];
@@ -64,6 +69,24 @@ function useDateRange(props) {
         }
         // eslint-disable-next-line max-len
     }, [focus, 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
+            && props.inputTo.value
+            && ((0, dayjs_1["default"])(props.inputTo.value).isBefore((0, dayjs_1["default"])(props.inputFrom.value)))) {
+            var convertedDateFrom = (0, calendar_1.convertDate)(props.inputFrom.value, props.valueFormat, props.valueFormat, props.useUTC, props.dateInUTC);
+            var convertedDateTo = (0, calendar_1.convertDate)(props.inputTo.value, props.valueFormat, props.valueFormat, props.useUTC, props.dateInUTC);
+            props.inputFrom.onChange.call(null, convertedDateTo);
+            props.inputTo.onChange.call(null, convertedDateFrom);
+        }
+    }, [props.dateInUTC,
+        props.inputFrom.onChange,
+        props.inputFrom.value,
+        props.inputTo.onChange,
+        props.inputTo.value,
+        props.useUTC,
+        props.valueFormat,
+    ]);
     return {
         focus: focus,
         onClose: onClose,

package/ui/form/DateRangeField/DateRangeField.js

@@ -62,7 +62,9 @@ function DateRangeField(props) {
         inputPropsTo: inputPropsTo,
         inputFrom: props.inputFrom,
         inputTo: props.inputTo,
-        useSmartFocus: true
+        useSmartFocus: true,
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat
     }), focus = _c.focus, onClose = _c.onClose, onClear = _c.onClear, extendedInputPropsFrom = _c.extendedInputPropsFrom, extendedInputPropsTo = _c.extendedInputPropsTo;
     // Calendar props
     var calendarProps = (0, react_1.useMemo)(function () { return ({

package/ui/form/DateTimeRangeField/DateTimeRangeField.js

@@ -76,7 +76,9 @@ function DateTimeRangeField(props) {
         inputPropsTo: inputPropsTo,
         inputFrom: props.inputFrom,
         inputTo: props.inputTo,
-        useSmartFocus: false
+        useSmartFocus: false,
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat
     }), focus = _e.focus, onClose = _e.onClose, onClear = _e.onClear, extendedInputPropsFrom = _e.extendedInputPropsFrom, extendedInputPropsTo = _e.extendedInputPropsTo;
     // Calendar props
     var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: [dateValueFrom, dateValueTo], onChange: focus === 'from' ? onDateFromSelect : onDateToSelect, valueFormat: dateValueFormat }, props.calendarProps)); }, [dateValueFormat, dateValueFrom, dateValueTo, focus, onDateFromSelect, onDateToSelect, props.calendarProps]);

package/ui/form/FileField/FileField.d.ts

@@ -94,6 +94,11 @@ export interface IFileFieldItemViewProps extends IFileFieldCommonProps {
          */
         height: string;
     };
+    /**
+     * Обработчик события загрузки файлов
+     * @param e
+     */
+    onLoad?: () => void;
     progress?: {
         bytesUploaded: number;
         percent: number;

package/ui/form/FileField/FileField.js

@@ -42,6 +42,7 @@ var React = __importStar(require("react"));
 var File_1 = __importDefault(require("fileup-core/lib/models/File"));
 var first_1 = __importDefault(require("lodash-es/first"));
 var values_1 = __importDefault(require("lodash-es/values"));
+var react_1 = require("react");
 var useFile_1 = __importDefault(require("../../../hooks/useFile"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
@@ -50,11 +51,21 @@ var FilesLayout;
     FilesLayout["list"] = "list";
     FilesLayout["wall"] = "wall";
 })(FilesLayout = exports.FilesLayout || (exports.FilesLayout = {}));
+var FILE_STATUS_END = 'end';
 function FileFieldComponent(props) {
     var components = (0, hooks_1.useComponents)();
     var _a = (0, useFile_1["default"])(props), files = _a.files, onBrowse = _a.onBrowse, onRemove = _a.onRemove;
+    var _b = React.useState(false), isFilesLoaded = _b[0], setIsFilesLoaded = _b[1];
     var FileFieldView = props.view || components.ui.getView('form.FileFieldView');
     var FileFieldItemView = props.itemView || components.ui.getView('form.FileFieldItemView');
+    (0, react_1.useEffect)(function () {
+        setIsFilesLoaded(files.filter(function (file) { return file._status === FILE_STATUS_END; }).length === files.length);
+    }, [files]);
+    (0, react_1.useEffect)(function () {
+        if (isFilesLoaded && props.onLoad) {
+            props.onLoad();
+        }
+    }, [isFilesLoaded, props]);
     return (React.createElement(FileFieldView, __assign({}, props, { buttonView: props.buttonView, buttonProps: __assign({ label: props.filesLayout === FilesLayout.wall
                 ? __('Upload')
                 : __('Click to Upload'), size: props.size, disabled: props.disabled, onClick: onBrowse }, props.buttonProps), itemView: FileFieldItemView, items: files.map(function (file) {

package/ui/form/RadioListField/RadioListField.js

@@ -82,7 +82,7 @@ RadioListField.defaultProps = {
     disabled: false,
     required: false,
     className: '',
-    multiple: false,
+    multiple: true,
     errors: null,
     size: 'md',
     orientation: 'vertical'