@steroidsjs/core 3.0.77 → 3.0.79

package/docs-autogen-result.json

@@ -3673,6 +3673,22 @@
                     "type": "string",
                     "example": "'/api/v1/user/avatar/crop'"
                 },
+                {
+                    "name": "dropRef",
+                    "decorators": [],
+                    "description": "Ref для drop area",
+                    "required": false,
+                    "type": "RefObject",
+                    "example": null
+                },
+                {
+                    "name": "hasDropArea",
+                    "decorators": [],
+                    "description": "Использовать drop area",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
                 {
                     "name": "imagesExactSize",
                     "decorators": [],
@@ -22009,6 +22025,14 @@
                     "type": "boolean",
                     "example": null
                 },
+                {
+                    "name": "dropRef",
+                    "decorators": [],
+                    "description": "Ref для drop area",
+                    "required": false,
+                    "type": "RefObject",
+                    "example": null
+                },
                 {
                     "name": "error",
                     "decorators": [],
@@ -22033,6 +22057,14 @@
                     "type": "string",
                     "example": "'list'"
                 },
+                {
+                    "name": "hasDropArea",
+                    "decorators": [],
+                    "description": "Использовать drop area",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
                 {
                     "name": "image",
                     "decorators": [],
@@ -22276,6 +22308,15 @@
                     "example": "true",
                     "defaultValue": null
                 },
+                {
+                    "name": "dropRef",
+                    "decorators": [],
+                    "description": "Ref для drop area",
+                    "required": false,
+                    "type": "RefObject",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "errors",
                     "decorators": [],
@@ -22303,6 +22344,15 @@
                     "example": "'list'",
                     "defaultValue": null
                 },
+                {
+                    "name": "hasDropArea",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "hint",
                     "decorators": [],
@@ -22625,6 +22675,14 @@
                     "type": "boolean",
                     "example": "true"
                 },
+                {
+                    "name": "dropRef",
+                    "decorators": [],
+                    "description": "Ref для drop area",
+                    "required": false,
+                    "type": "RefObject",
+                    "example": null
+                },
                 {
                     "name": "errors",
                     "decorators": [],
@@ -22649,6 +22707,14 @@
                     "type": "string",
                     "example": "'list'"
                 },
+                {
+                    "name": "hasDropArea",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
                 {
                     "name": "hint",
                     "decorators": [],
@@ -24421,6 +24487,15 @@
                     "example": "true",
                     "defaultValue": null
                 },
+                {
+                    "name": "dropRef",
+                    "decorators": [],
+                    "description": "Ref для drop area",
+                    "required": false,
+                    "type": "RefObject",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "errors",
                     "decorators": [],
@@ -24439,6 +24514,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "hasDropArea",
+                    "decorators": [],
+                    "description": "Использовать drop area",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "hint",
                     "decorators": [],
@@ -24717,6 +24801,14 @@
                     "type": "boolean",
                     "example": "true"
                 },
+                {
+                    "name": "dropRef",
+                    "decorators": [],
+                    "description": "Ref для drop area",
+                    "required": false,
+                    "type": "RefObject",
+                    "example": null
+                },
                 {
                     "name": "errors",
                     "decorators": [],
@@ -24733,6 +24825,14 @@
                     "type": "string",
                     "example": null
                 },
+                {
+                    "name": "hasDropArea",
+                    "decorators": [],
+                    "description": "Использовать drop area",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
                 {
                     "name": "hint",
                     "decorators": [],
@@ -39051,6 +39151,15 @@
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView",
                     "defaultValue": null
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Свойства для view компонента",
+                    "required": false,
+                    "type": "any",
+                    "example": null,
+                    "defaultValue": null
                 }
             ],
             "methods": [
@@ -39148,6 +39257,14 @@
                     "required": false,
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Свойства для view компонента",
+                    "required": false,
+                    "type": "any",
+                    "example": null
                 }
             ],
             "methods": [

package/en.json

@@ -987,6 +987,8 @@
     "Логическое значение, указывающее, можно ли загрузить еще элементы для списка при скролле.": "",
     " Ref autocomplete поиска": "",
     "Нужно ли закрывать выпадающий список после выбора элемента": "",
+    "Ref для drop area": "",
+    "Использовать drop area": "",
     "Подключение бесконечного скролла": "",
     "Флаг определяет необходимо ли передавать query параметры в URL": "",
     "Дополнительный свойства для view части компонента": "",

package/hooks/useFile.d.ts

@@ -1,15 +1,16 @@
+import { RefObject } from 'react';
 export interface IFileInput {
     /**
-    * Параметры для input элемента
-    */
+     * Параметры для input элемента
+     */
     input?: FormInputType;
     /**
-    * Множественный выбор файлов
-    */
+     * Множественный выбор файлов
+     */
     multiple?: boolean;
     /**
-    * Позволяет указать uploader
-    */
+     * Позволяет указать uploader
+     */
     uploader?: any;
     /**
      * Экшен для отправки на бэкенд
@@ -17,29 +18,37 @@ export interface IFileInput {
      */
     backendUrl?: string;
     /**
-    * Список mime-типов
-    */
+     * Список mime-типов
+     */
     mimeTypes?: string[];
     /**
-    * Использовать только изображения
-    */
+     * Использовать только изображения
+     */
     imagesOnly?: boolean;
     imagesProcessor?: string;
     /**
-    * Точные размеры изображений
-    */
+     * Точные размеры изображений
+     */
     imagesExactSize?: string;
     /**
-    * Начальные файлы
-    */
+     * Начальные файлы
+     */
     initialFiles?: any;
     /**
-    * Параметры для uploader
-    */
+     * Параметры для uploader
+     */
     uploaderConfig?: {
         useFormData?: boolean;
         fileFieldName?: string;
     } | any;
+    /**
+     * Ref для drop area
+     */
+    dropRef?: RefObject<HTMLDivElement>;
+    /**
+     * Использовать drop area
+     */
+    hasDropArea?: boolean;
 }
 export interface IFileOutput {
     uploader?: any;

package/hooks/useFile.js

@@ -58,7 +58,13 @@ function useFile(props) {
     http.getAccessToken(); // TODO Run promise..
     var uploader = (0, useInitial_1["default"])(function () {
         var _a;
-        return new fileup_core_1["default"](__assign(__assign({ dropArea: {}, backendUrl: generateBackendUrl(props), uploaderConfig: __assign(__assign({}, props.uploaderConfig), { headers: __assign(__assign({}, (_a = props.uploaderConfig) === null || _a === void 0 ? void 0 : _a.headers), { Authorization: 'Bearer ' + http._accessToken }) }) }, props.uploader), { form: __assign(__assign({}, (props.uploader && props.uploader.form)), { multiple: props.multiple, accept: generateAcceptString(props) }) }));
+        return new fileup_core_1["default"](__assign(__assign({ backendUrl: generateBackendUrl(props), uploaderConfig: __assign(__assign({}, props.uploaderConfig), { headers: __assign(__assign({}, (_a = props.uploaderConfig) === null || _a === void 0 ? void 0 : _a.headers), { Authorization: 'Bearer ' + http._accessToken }) }) }, props.uploader), { dropArea: (props === null || props === void 0 ? void 0 : props.hasDropArea)
+                ? {
+                    className: props.uploader.dropArea.className,
+                    container: props.dropRef.current,
+                    enable: true
+                }
+                : {}, form: __assign(__assign({}, (props.uploader && props.uploader.form)), { multiple: props.multiple, accept: generateAcceptString(props) }) }));
     });
     /**
      * Force component update when file status or progress changes

package/package.json

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

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

@@ -58,6 +58,7 @@ export interface IFileFieldProps extends IFieldWrapperInputProps, IFileFieldComm
      * @example true
      */
     itemProps?: Record<string, any>;
+    hasDropArea?: boolean;
     [key: string]: any;
 }
 export interface IFileFieldItemViewProps extends IFileFieldCommonProps {

package/ui/form/FileField/FileField.js

@@ -54,7 +54,8 @@ var 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 dropRef = (0, react_1.useRef)(null);
+    var _a = (0, useFile_1["default"])(__assign(__assign({}, props), { dropRef: props.hasDropArea ? dropRef : null })), files = _a.files, onBrowse = _a.onBrowse, onRemove = _a.onRemove, uploader = _a.uploader;
     var _b = react_1["default"].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');
@@ -84,6 +85,9 @@ function FileFieldComponent(props) {
         className: props.className,
         itemProps: props.itemProps,
         loadingText: props.loadingText,
+        dropRef: dropRef,
+        uploader: uploader,
+        hasDropArea: props.hasDropArea,
         items: files.map(function (file) {
             var data = file.getResultHttpMessage() || {};
             var item = {
@@ -127,7 +131,7 @@ function FileFieldComponent(props) {
             }
             return item;
         })
-    }); }, [FileFieldItemView, files, onBrowse, onRemove, props.buttonProps, props.buttonView, props.className, props.disabled, props.filesLayout, props.imagesOnly, props.imagesProcessor, props.input, props.itemProps, props.loadingText, props.multiple, props.showRemove, props.size]);
+    }); }, [FileFieldItemView, files, onBrowse, onRemove, props.buttonProps, props.buttonView, props.className, props.disabled, props.filesLayout, props.hasDropArea, props.imagesOnly, props.imagesProcessor, props.input, props.itemProps, props.loadingText, props.multiple, props.showRemove, props.size, uploader]);
     return (react_1["default"].createElement(FileFieldView, __assign({}, viewProps)));
 }
 function FileField(props) {
@@ -146,6 +150,7 @@ FileField.defaultProps = {
         color: 'basic',
         outline: true
     },
-    multiple: false
+    multiple: false,
+    hasDropArea: false
 };
 exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.FILE_FIELD, FileField);

package/ui/form/ImageField/ImageField.js

@@ -54,6 +54,7 @@ function ImageField(props) {
     var _a;
     var components = (0, hooks_1.useComponents)();
     var dispatch = (0, useDispatch_1["default"])();
+    var dropRef = (0, react_1.useRef)(null);
     // Add cropping option
     var _b = (0, react_1.useState)(null), croppedImage = _b[0], setCroppedImage = _b[1];
     var modalId = (0, react_1.useMemo)(function () { var _a; return ((_a = props.modalProps) === null || _a === void 0 ? void 0 : _a.modalId) || (0, uniqueId_1["default"])('cropModal'); }, [props.modalProps.modalId]);
@@ -72,7 +73,7 @@ function ImageField(props) {
                 xhr: {
                     responseParser: props.crop ? responseParser : null
                 }
-            } }, props.uploader) })), files = _c.files, onBrowse = _c.onBrowse, onRemove = _c.onRemove, onAdd = _c.onAdd;
+            } }, props.uploader), dropRef: props.hasDropArea ? dropRef : null })), files = _c.files, onBrowse = _c.onBrowse, onRemove = _c.onRemove, onAdd = _c.onAdd, uploader = _c.uploader;
     var oldCroppedImage = (0, react_use_1.usePrevious)(croppedImage);
     // Fetch cropped image
     (0, react_1.useEffect)(function () {
@@ -141,8 +142,11 @@ function ImageField(props) {
         item: item,
         onClick: onBrowse,
         buttonProps: props.buttonProps,
-        label: props.label
-    }); }, [item, onBrowse, props.buttonProps, props.label]);
+        label: props.label,
+        dropRef: dropRef,
+        uploader: uploader,
+        hasDropArea: props.hasDropArea
+    }); }, [item, onBrowse, props.buttonProps, props.hasDropArea, props.label, uploader]);
     return (React.createElement(ImageFieldView, __assign({}, viewProps)));
 }
 ImageField.defaultProps = {

package/ui/nav/Nav/Nav.d.ts

@@ -99,6 +99,10 @@ export interface INavProps {
      * @example MyCustomView
      */
     view?: CustomView;
+    /**
+     * Свойства для view компонента
+     */
+    viewProps?: CustomViewProps;
     /**
      * Обработчик, который вызывается при смене активного элемента навигации
      * @param args

package/ui/nav/Nav/Nav.js

@@ -110,16 +110,7 @@ function Nav(props) {
             .filter(function (item) { return item.visible !== false; });
     }, [activeRouteIds, activeTab, props.items, routerParams, routes]);
     var items = (0, react_1.useMemo)(function () { return formatItems(); }, [formatItems]);
-    var viewProps = (0, react_1.useMemo)(function () { return ({
-        items: items,
-        onClick: onClick,
-        disabled: props.disabled,
-        size: props.size,
-        icon: props.icon,
-        className: props.className,
-        navClassName: props.navClassName,
-        children: renderContent()
-    }); }, [items, onClick, props.className, props.disabled, props.icon, props.navClassName, props.size, renderContent]);
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { items: items, onClick: onClick, disabled: props.disabled, size: props.size, icon: props.icon, className: props.className, navClassName: props.navClassName, children: renderContent() })); }, [items, onClick, props.className, props.disabled, props.icon, props.navClassName, props.size, props.viewProps, renderContent]);
     return components.ui.renderView(props.view || defaultViewMap[props.layout], viewProps);
 }
 Nav.defaultProps = {