@steroidsjs/core 3.0.0-beta.113 → 3.0.0-beta.115

package/en.json

@@ -954,5 +954,13 @@
     "Заголовок для колонки таблицы": "",
     "Будет ли отображён item?": "",
     "Устанавливать ли фокус и показывать панель времени сразу после рендера страницы": "",
-    "Флаг, определяющий раскрывать вложенные элементы по клику на весь элемент или только на иконку": ""
+    "Флаг, определяющий раскрывать вложенные элементы по клику на весь элемент или только на иконку": "",
+    "При повторном нажатии на выбранный элемент из дерева, он продолжит отображаться как активный.": "",
+    "Дополнительные свойства, которые передаются во view компонента": "",
+    "Пропсы для инпута загрузки файлов": "",
+    "Переопределение view React компонента для кастомизации отображения элемента инпута": "",
+    "Кастомный placeholder для инпута": "",
+    "Кастомная иконка, заменяющая иконку раскрытия по умолчанию": "",
+    "Показать иконку c лева от элемента": "",
+    "Флаг, который позволяет использовать вложенные роуты c указанием вложенного пути": ""
 }

package/package.json

@@ -1,96 +1,96 @@
 {
- "name": "@steroidsjs/core",
- "version": "3.0.0-beta.113",
- "description": "",
- "author": "Vladimir Kozhin <hello@kozhindev.com>",
- "repository": {
-  "type": "git",
-  "url": "https://github.com/steroids/react"
- },
- "main": "dist/index.ts",
- "types": "dist/index.d.ts",
- "exports": {
-  "./": "./dist"
- },
- "license": "MIT",
- "homepage": "https://github.com/steroids/react",
- "bugs": {
-  "url": "https://github.com/steroids/react/issues"
- },
- "scripts": {
-  "docs": "node docs/docs-autogen.js",
-  "test": "jest",
-  "lint": "eslint -c ./.eslintrc --ext .js,.jsx,.ts,.tsx ./src ./tests --quiet",
-  "build": "tsc && cp ./{package.json,LICENSE,README.md} dist/ && cp src/index.d.ts dist/ && cp docs/docs-autogen-result.json dist/ && cp docs/locales/en.json dist/",
-  "watch": "tsc -p tsconfig-debug.json"
- },
- "dependencies": {
-  "@maskito/core": "1.7.0",
-  "@maskito/kit": "1.7.0",
-  "@maskito/react": "^0.12.1",
-  "@splidejs/react-splide": "^0.7.12",
-  "axios": "^0.21.1",
-  "connected-react-router": "^6.9.3",
-  "dayjs": "^1.11.9",
-  "domready": "^1.0.8",
-  "dot-prop-immutable": "^2.1.0",
-  "fileup-core": "^1.2.7",
-  "history": "^4.10.1",
-  "intl-messageformat": "^10.1.4",
-  "js-cookie": "^2.2.1",
-  "load-js": "^3.0.3",
-  "lodash": "^4.17.21",
-  "lodash-es": "^4.17.21",
-  "path-to-regexp": "^1.7.0",
-  "qs": "^6.9.4",
-  "query-string": "^6.14.0",
-  "react": "^18.2.0",
-  "react-click-outside": "^3.0.1",
-  "react-day-picker": "^8.7.1",
-  "react-dom": "^18.2.0",
-  "react-grid-gallery": "^0.4.8",
-  "react-helmet": "^6.1.0",
-  "react-image-crop": "^9.0.2",
-  "react-redux": "^8.0.5",
-  "react-router": "^5.2.0",
-  "react-router-dom": "^5.2.0",
-  "react-use": "^17.4.0",
-  "redux": "^4.0.4",
-  "redux-mock-store": "^1.5.4",
-  "set-cookie-parser": "^2.4.8"
- },
- "devDependencies": {
-  "@babel/cli": "^7.13.14",
-  "@babel/core": "^7.13.15",
-  "@babel/preset-env": "^7.13.15",
-  "@babel/preset-react": "^7.13.13",
-  "@babel/preset-typescript": "^7.13.0",
-  "@steroidsjs/eslint-config": "^2.1.4",
-  "@testing-library/dom": "^8.20.0",
-  "@testing-library/jest-dom": "^5.16.5",
-  "@testing-library/react": "^13.4.0",
-  "@testing-library/user-event": "^14.4.3",
-  "@types/enzyme": "^3.10.8",
-  "@types/enzyme-adapter-react-16": "^1.0.6",
-  "@types/jest": "^26.0.22",
-  "@types/markdown-to-jsx": "^7.0.1",
-  "@types/reach__router": "^1.3.7",
-  "@types/react": "^18.0.20",
-  "@types/react-color": "^3.0.4",
-  "@types/react-dom": "^18.0.6",
-  "@types/react-syntax-highlighter": "^13.5.0",
-  "@types/webpack-env": "^1.16.0",
-  "@typescript-eslint/eslint-plugin": "^5.51.0",
-  "@typescript-eslint/parser": "^4.15.0",
-  "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
-  "enzyme": "^3.11.0",
-  "eslint": "^8.34.0",
-  "jest": "^26.6.3",
-  "jest-environment-jsdom-fifteen": "^1.0.2",
-  "jest-enzyme": "^7.1.2",
-  "rc-slider": "9.7.4",
-  "ts-jest": "^26.5.1",
-  "typedoc": "^0.21.0",
-  "typescript": "^4.9.5"
- }
+    "name": "@steroidsjs/core",
+    "version": "3.0.0-beta.115",
+    "description": "",
+    "author": "Vladimir Kozhin <hello@kozhindev.com>",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/steroids/react"
+    },
+    "main": "dist/index.ts",
+    "types": "dist/index.d.ts",
+    "exports": {
+        "./": "./dist"
+    },
+    "license": "MIT",
+    "homepage": "https://github.com/steroids/react",
+    "bugs": {
+        "url": "https://github.com/steroids/react/issues"
+    },
+    "scripts": {
+        "docs": "node docs/docs-autogen.js",
+        "test": "jest",
+        "lint": "eslint -c ./.eslintrc --ext .js,.jsx,.ts,.tsx ./src ./tests --quiet",
+        "build": "tsc && cp ./{package.json,LICENSE,README.md} dist/ && cp src/index.d.ts dist/ && cp docs/docs-autogen-result.json dist/ && cp docs/locales/en.json dist/",
+        "watch": "tsc -p tsconfig-debug.json"
+    },
+    "dependencies": {
+        "@maskito/core": "1.7.0",
+        "@maskito/kit": "1.7.0",
+        "@maskito/react": "^0.12.1",
+        "@splidejs/react-splide": "^0.7.12",
+        "axios": "^0.21.1",
+        "connected-react-router": "^6.9.3",
+        "dayjs": "^1.11.9",
+        "domready": "^1.0.8",
+        "dot-prop-immutable": "^2.1.0",
+        "fileup-core": "^1.2.7",
+        "history": "^4.10.1",
+        "intl-messageformat": "^10.1.4",
+        "js-cookie": "^2.2.1",
+        "load-js": "^3.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "path-to-regexp": "^1.7.0",
+        "qs": "^6.9.4",
+        "query-string": "^6.14.0",
+        "react": "^18.2.0",
+        "react-click-outside": "^3.0.1",
+        "react-day-picker": "^8.7.1",
+        "react-dom": "^18.2.0",
+        "react-grid-gallery": "^0.4.8",
+        "react-helmet": "^6.1.0",
+        "react-image-crop": "^9.0.2",
+        "react-redux": "^8.0.5",
+        "react-router": "^5.2.0",
+        "react-router-dom": "^5.2.0",
+        "react-use": "^17.4.0",
+        "redux": "^4.0.4",
+        "redux-mock-store": "^1.5.4",
+        "set-cookie-parser": "^2.4.8"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.13.14",
+        "@babel/core": "^7.13.15",
+        "@babel/preset-env": "^7.13.15",
+        "@babel/preset-react": "^7.13.13",
+        "@babel/preset-typescript": "^7.13.0",
+        "@steroidsjs/eslint-config": "^2.1.4",
+        "@testing-library/dom": "^8.20.0",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^14.4.3",
+        "@types/enzyme": "^3.10.8",
+        "@types/enzyme-adapter-react-16": "^1.0.6",
+        "@types/jest": "^26.0.22",
+        "@types/markdown-to-jsx": "^7.0.1",
+        "@types/reach__router": "^1.3.7",
+        "@types/react": "^18.0.20",
+        "@types/react-color": "^3.0.4",
+        "@types/react-dom": "^18.0.6",
+        "@types/react-syntax-highlighter": "^13.5.0",
+        "@types/webpack-env": "^1.16.0",
+        "@typescript-eslint/eslint-plugin": "^5.51.0",
+        "@typescript-eslint/parser": "^4.15.0",
+        "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
+        "enzyme": "^3.11.0",
+        "eslint": "^8.34.0",
+        "jest": "^26.6.3",
+        "jest-environment-jsdom-fifteen": "^1.0.2",
+        "jest-enzyme": "^7.1.2",
+        "rc-slider": "9.7.4",
+        "ts-jest": "^26.5.1",
+        "typedoc": "^0.21.0",
+        "typescript": "^4.9.5"
+    }
 }

package/ui/content/Chat/Chat.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IFileFieldProps } from '../../form/FileField/FileField';
 import { IAvatarProps } from '../Avatar/Avatar';
 import { IGroupedMessagesByDates } from './hooks/useChat';
 export interface IChatUser {
@@ -7,11 +8,21 @@ export interface IChatUser {
     lastName?: string;
     avatar?: IAvatarProps;
 }
+export interface IMessageFile {
+    uid?: string;
+    title?: string;
+    size?: number;
+    url?: string;
+    downloadUrl?: string;
+    fullHeight?: number;
+    fullWidth?: number;
+}
 export interface IChatMessage {
     id: number;
     user: IChatUser;
     text: string;
     timestamp: Date | string;
+    files?: IMessageFile[];
 }
 /**
  * Chat
@@ -31,6 +42,15 @@ export interface IChatProps extends IUiComponent {
      *  {
      *   id: 1,
      *   text: 'Всем привет!',
+     *   files: [
+     *      {
+     *       id: 929,
+     *       uid: 'c46f3d14-5891-4601-9e98-06f2c1e70a07',
+     *       title: 'image.jpg',
+     *       url: 'https://kozhin.dev/files/uploaded/c46f3d14-5891-4601-9e98-06f2c1e70a07.jpg',
+     *       size: 47305,
+     *      }
+     *   ],
      *   user: {
      *     id: 1,
      *     firstName: 'Olga',
@@ -63,9 +83,27 @@ export interface IChatProps extends IUiComponent {
      * Обработчик события отправки сообщения
      */
     onSendMessage?: (chatId: string, message: IChatMessage) => void;
+    /**
+     * Переопределение view React компонента для кастомизации отображения элемента инпута
+     * @example MyCustomView
+     */
+    customChatInputView?: React.ReactNode;
+    /**
+     * Кастомный placeholder для инпута
+     */
+    customInputPlaceholder?: string;
+    /**
+     * Пропсы для инпута загрузки файлов
+     */
+    fileFieldProps?: IFileFieldProps;
 }
-export interface IChatViewProps extends Omit<IChatProps, 'messages'> {
+export interface IChatViewProps extends Pick<IChatProps, 'currentUser'> {
     groupedMessagesByDates: IGroupedMessagesByDates;
+    renderChatInput: () => JSX.Element;
+}
+export interface IChatInputViewProps extends Pick<IChatProps, 'chatId' | 'fileFieldProps'> {
     onSendMessage: (data: any) => void;
+    onUploadFiles: (files: any) => void;
+    inputPlaceholder: string;
 }
 export default function Chat(props: IChatProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/ui/content/Chat/Chat.js

@@ -1,19 +1,32 @@
 "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;
+var react_1 = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var useChat_1 = __importDefault(require("./hooks/useChat"));
 function Chat(props) {
@@ -23,7 +36,14 @@ function Chat(props) {
         messages: props.messages,
         currentUser: props.currentUser,
         onSendMessage: props.onSendMessage
-    }), onSendMessage = _a.onSendMessage, groupedMessagesByDates = _a.groupedMessagesByDates;
-    return components.ui.renderView(props.view || 'content.ChatView', __assign(__assign({}, props), { groupedMessagesByDates: groupedMessagesByDates, onSendMessage: onSendMessage }));
+    }), onSendMessage = _a.onSendMessage, onUploadFiles = _a.onUploadFiles, groupedMessagesByDates = _a.groupedMessagesByDates;
+    var ChatInputView = props.customChatInputView || components.ui.getView('content.ChatInputView');
+    var renderChatInput = (0, react_1.useCallback)(function () { return (react_1["default"].createElement(ChatInputView, { chatId: props.chatId, onSendMessage: onSendMessage, onUploadFiles: onUploadFiles, fileFieldProps: props.fileFieldProps, inputPlaceholder: props.customInputPlaceholder || __('Введите сообщение') })); }, [ChatInputView, onSendMessage, onUploadFiles, props.chatId, props.customInputPlaceholder, props.fileFieldProps]);
+    return components.ui.renderView(props.view || 'content.ChatView', {
+        currentUser: props.currentUser,
+        groupedMessagesByDates: groupedMessagesByDates,
+        onSendMessage: onSendMessage,
+        renderChatInput: renderChatInput
+    });
 }
 exports["default"] = Chat;

package/ui/content/Chat/hooks/useChat.d.ts

@@ -5,8 +5,8 @@ export interface IGroupedMessage extends IChatMessage {
     isLastMessage?: boolean;
 }
 export type IGroupedMessagesByDates = Record<string, IGroupedMessage[][]>;
-declare const useChat: (config: IChatConfig) => {
+export default function useChat(config: IChatConfig): {
     groupedMessagesByDates: {};
     onSendMessage: (rawMessage: any) => void;
+    onUploadFiles: (files: any) => void;
 };
-export default useChat;

package/ui/content/Chat/hooks/useChat.js

@@ -17,25 +17,42 @@ exports.__esModule = true;
 var react_1 = require("react");
 var dayjs_1 = __importDefault(require("dayjs"));
 var uniqueId_1 = __importDefault(require("lodash-es/uniqueId"));
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var File_1 = __importDefault(require("fileup-core/lib/models/File"));
 var hooks_1 = require("../../../../hooks");
 var form_1 = require("../../../../actions/form");
 var utils_1 = require("../utils");
 var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
-var useChat = function (config) {
+function useChat(config) {
+    var dispatch = (0, hooks_1.useDispatch)();
     var _a = (0, react_1.useState)({}), groupedMessagesByDates = _a[0], setGroupedMessagesByDates = _a[1];
+    var _b = (0, react_1.useState)([]), uploadedFiles = _b[0], setUploadedFiles = _b[1];
     (0, react_1.useEffect)(function () { return setGroupedMessagesByDates((0, utils_1.getMessagesGroupedByDate)(config.messages)); }, [config.messages]);
-    var dispatch = (0, hooks_1.useDispatch)();
+    var onUploadFiles = (0, react_1.useCallback)(function (files) {
+        if (!(0, isEqual_1["default"])(uploadedFiles, files)) {
+            setUploadedFiles(files);
+        }
+    }, [uploadedFiles]);
     var onSendMessage = (0, react_1.useCallback)(function (rawMessage) {
-        var newMessage = __assign(__assign({}, rawMessage), { id: (0, uniqueId_1["default"])(), user: config.currentUser, timestamp: (0, dayjs_1["default"])().format(timeTemplatesAndUnits_1.ISO_TIMESTAMP_TEMPLATE) });
+        if (!rawMessage) {
+            return;
+        }
+        var newMessage = __assign(__assign({}, rawMessage), { id: (0, uniqueId_1["default"])(), user: config.currentUser, timestamp: (0, dayjs_1["default"])().format(timeTemplatesAndUnits_1.ISO_TIMESTAMP_TEMPLATE), files: (uploadedFiles === null || uploadedFiles === void 0 ? void 0 : uploadedFiles.reduce(function (acc, file) {
+                if (file.getResult() !== File_1["default"].RESULT_ERROR) {
+                    acc.push(__assign({}, file._resultHttpMessage));
+                }
+                return acc;
+            }, [])) || null });
         if (config.onSendMessage) {
             config.onSendMessage(config.chatId, newMessage);
         }
         setGroupedMessagesByDates(function (prevGroupedMessagesByDates) { return (0, utils_1.addNewMessageIntoGroupedMessages)(newMessage, prevGroupedMessagesByDates); });
         dispatch((0, form_1.formReset)(config.chatId));
-    }, [config, dispatch]);
+    }, [config, dispatch, uploadedFiles]);
     return {
         groupedMessagesByDates: groupedMessagesByDates,
-        onSendMessage: onSendMessage
+        onSendMessage: onSendMessage,
+        onUploadFiles: onUploadFiles
     };
-};
+}
 exports["default"] = useChat;

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

@@ -19,7 +19,7 @@ type CheckboxTreeItems = string | ({
  *
  * Список с вложенными чекбоксами. Используется в формах для создания иерархической структуры и выбора нескольких значений.
  */
-export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent, Pick<ITreeProps, 'levelPadding' | 'alwaysOpened' | 'hasIcon' | 'customIcon'> {
+export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent, Pick<ITreeProps, 'levelPadding' | 'alwaysOpened' | 'showIcon' | 'customIcon'> {
     /**
      * Свойства для элемента input
      * @example { onKeyDown: ... }

package/ui/form/CheckboxTreeField/CheckboxTreeField.js

@@ -38,8 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 exports.getNestedItemsIds = void 0;
-var React = __importStar(require("react"));
-var react_1 = require("react");
+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");
@@ -113,7 +112,7 @@ function CheckboxTreeField(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_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 = {

package/ui/form/FileField/FileField.js

@@ -66,6 +66,11 @@ function FileFieldComponent(props) {
             props.onLoad();
         }
     }, [isFilesLoaded, props]);
+    (0, react_1.useEffect)(function () {
+        if (props.onChange) {
+            props.onChange(files);
+        }
+    }, [files, 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/nav/Tree/Tree.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { IPreparedTreeItem, ITreeConfig, ITreeItem } from '../../../hooks/useTree';
 export interface ITreeViewProps extends ITreeProps {
     items: IPreparedTreeItem[];