@steroidsjs/core 3.0.5 → 3.0.6

package/docs-autogen-result.json

@@ -4581,6 +4581,14 @@
                     "type": "number",
                     "example": "1"
                 },
+                {
+                    "name": "clientStorageId",
+                    "decorators": [],
+                    "description": "Идентификатор (ключ) для сохранения в LocalStorage коллекции.",
+                    "required": false,
+                    "type": "string",
+                    "example": "'exampleTree'"
+                },
                 {
                     "name": "currentPage",
                     "decorators": [],
@@ -4629,6 +4637,14 @@
                     "type": "any",
                     "example": null
                 },
+                {
+                    "name": "saveInClientStorage",
+                    "decorators": [],
+                    "description": "Сохранение в localStorage уровней вложенности.",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
                 {
                     "name": "selectedItemId",
                     "decorators": [],
@@ -15312,7 +15328,7 @@
                 "'items'>",
                 "IUiComponent",
                 "Pick<ITreeProps",
-                "'levelPadding' | 'alwaysOpened' | 'customIcon'>"
+                "'levelPadding' | 'alwaysOpened' | 'hasIconExpandOnly' | 'customIcon' | 'saveInClientStorage'>"
             ],
             "properties": [
                 {
@@ -15423,6 +15439,15 @@
                     "example": "items",
                     "defaultValue": null
                 },
+                {
+                    "name": "hasIconExpandOnly",
+                    "decorators": [],
+                    "description": "Флаг, определяющий раскрывать вложенные элементы по клику на весь элемент или только на иконку",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "false",
+                    "defaultValue": null
+                },
                 {
                     "name": "hasOnlyLeafCheckboxes",
                     "decorators": [],
@@ -15576,6 +15601,15 @@
                     "example": "true",
                     "defaultValue": null
                 },
+                {
+                    "name": "saveInClientStorage",
+                    "decorators": [],
+                    "description": "Сохранение в localStorage уровней вложенности.",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true",
+                    "defaultValue": null
+                },
                 {
                     "name": "selectFirst",
                     "decorators": [],
@@ -15671,7 +15705,7 @@
             "extends": [
                 "IFieldWrapperOutputProps",
                 "Pick<ITreeProps",
-                "'levelPadding' | 'customIcon'>"
+                "'levelPadding' | 'hasIconExpandOnly' | 'customIcon'>"
             ],
             "properties": [
                 {
@@ -15706,6 +15740,14 @@
                     "type": "string",
                     "example": null
                 },
+                {
+                    "name": "hasIconExpandOnly",
+                    "decorators": [],
+                    "description": "Флаг, определяющий раскрывать вложенные элементы по клику на весь элемент или только на иконку",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "false"
+                },
                 {
                     "name": "hasOnlyLeafCheckboxes",
                     "decorators": [],
@@ -36567,7 +36609,7 @@
             "extends": [
                 "IColumnViewProps",
                 "Pick<ITreeTableProps",
-                "'levelPadding' | 'customIcon'>"
+                "'levelPadding' | 'customIcon' >"
             ],
             "properties": [
                 {
@@ -36773,13 +36815,14 @@
             "tags": {},
             "defaultProps": {
                 "alwaysOpened": "false",
-                "levelPadding": "32"
+                "levelPadding": "32",
+                "saveInClientStorage": "false"
             },
             "extends": [
                 "Omit<IGridProps",
                 "'items'>",
                 "Pick<ITreeProps",
-                "'alwaysOpened' | 'levelPadding' | 'customIcon'>"
+                "'alwaysOpened' | 'levelPadding' | 'customIcon' | 'saveInClientStorage'>"
             ],
             "properties": [
                 {
@@ -36817,6 +36860,15 @@
                     "type": "number",
                     "example": "32",
                     "defaultValue": "32"
+                },
+                {
+                    "name": "saveInClientStorage",
+                    "decorators": [],
+                    "description": "Сохранение в localStorage уровней вложенности.",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true",
+                    "defaultValue": "false"
                 }
             ],
             "methods": []
@@ -38832,6 +38884,14 @@
                     "type": "string",
                     "example": null
                 },
+                {
+                    "name": "clientStorageId",
+                    "decorators": [],
+                    "description": "Идентификатор (ключ) для сохранения в LocalStorage коллекции.",
+                    "required": false,
+                    "type": "string",
+                    "example": "'exampleTree'"
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -38912,6 +38972,14 @@
                     "type": "any",
                     "example": null
                 },
+                {
+                    "name": "saveInClientStorage",
+                    "decorators": [],
+                    "description": "Сохранение в localStorage уровней вложенности.",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
                 {
                     "name": "selectedItemId",
                     "decorators": [],
@@ -38989,15 +39057,6 @@
                             "example": null
                         }
                     ]
-                },
-                {
-                    "name": "onNestedItemClick",
-                    "decorators": [],
-                    "description": "",
-                    "required": false,
-                    "type": "void",
-                    "example": null,
-                    "parameters": []
                 }
             ]
         },
@@ -39015,6 +39074,7 @@
                 "itemsKey": "'items'",
                 "level": "0",
                 "levelPadding": "32",
+                "saveInClientStorage": "false",
                 "useSameSelectedItemId": "true"
             },
             "extends": [
@@ -39058,6 +39118,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "clientStorageId",
+                    "decorators": [],
+                    "description": "Идентификатор (ключ) для сохранения в LocalStorage коллекции.",
+                    "required": false,
+                    "type": "string",
+                    "example": "'exampleTree'",
+                    "defaultValue": null
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -39139,6 +39208,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "saveInClientStorage",
+                    "decorators": [],
+                    "description": "Сохранение в localStorage уровней вложенности.",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true",
+                    "defaultValue": "false"
+                },
                 {
                     "name": "selectedItemId",
                     "decorators": [],
@@ -39257,6 +39335,14 @@
                     "type": "string",
                     "example": null
                 },
+                {
+                    "name": "clientStorageId",
+                    "decorators": [],
+                    "description": "Идентификатор (ключ) для сохранения в LocalStorage коллекции.",
+                    "required": false,
+                    "type": "string",
+                    "example": "'exampleTree'"
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -39329,6 +39415,14 @@
                     "type": "any",
                     "example": null
                 },
+                {
+                    "name": "saveInClientStorage",
+                    "decorators": [],
+                    "description": "Сохранение в localStorage уровней вложенности.",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
                 {
                     "name": "selectedItemId",
                     "decorators": [],

package/en.json

@@ -979,6 +979,8 @@
     "Скрыть иконку c лева от элемента": "",
     "\nКомпонент `Kanban` позволяет создать доску для управления задачами.\nКоличество столбцов задается с помощью пропа `columns`.\nЗадачи на доске можно создавать, редактировать и перемещать с визуальным отображением.\n\nДля работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`\nи передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`\nкомпоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.\n\nДля корректной работы функционала создания задач,\nнеобходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nИмпортированные компоненты нужно передать в проп `createTaskEditorConfig`,\nв поле `htmlComponent` передать `CKEditor`, а в `editorConstructor` передать `ClassicEditor`.\n": "",
     "Компонент для создания HTML-разметки, использующий WYSIWYG редактор.\n\nДля использования WYSIWYG редактора, необходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nКомпонент `CKEditor` нужно передать в проп `htmlComponent`, а конструктор `ClassicEditor` в проп `editorConstructor`.\n\nПри передаче `HtmlField` с бэкенда, необходимо переопределить `view` компонента, указав локальный.\nВ локальном компоненте добавить вместо пропсов `htmlComponent` и `editorConstructor` импорты `CKEditor` и `ClassicEditor` соотвественно.\n": "",
+    "Идентификатор (ключ) для сохранения в LocalStorage коллекции.": "",
+    "Сохранение в localStorage уровней вложенности.": "",
     "Компоненты для подключения wysiwyg редактора": "",
     "Отображать чекбоксы только на узлах, не имеющих вложенных элементов": "",
     "Размер компонента и вложенных полей": "",

package/hooks/useTree.d.ts

@@ -100,5 +100,15 @@ export interface ITreeConfig {
      * @example true
     */
     useSameSelectedItemId?: boolean;
+    /**
+     * Сохранение в localStorage уровней вложенности.
+     * @example true
+    */
+    saveInClientStorage?: boolean;
+    /**
+     * Идентификатор (ключ) для сохранения в LocalStorage коллекции.
+     * @example 'exampleTree'
+     */
+    clientStorageId?: string;
 }
 export default function useTree(config: ITreeConfig): ITreeOutput;

package/hooks/useTree.js

@@ -22,12 +22,15 @@ var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 var isNil_1 = __importDefault(require("lodash-es/isNil"));
 var keys_1 = __importDefault(require("lodash-es/keys"));
+var react_use_1 = require("react-use");
+var useComponents_1 = __importDefault(require("./useComponents"));
 var useSelector_1 = __importDefault(require("./useSelector"));
 var router_1 = require("../reducers/router");
 var INITIAL_CURRENT_LEVEL = 0;
 var DOT_SEPARATOR = '.';
 var EMPTY_PARENT_ID = '';
 var FIRST_LEVEL_PARENT_ID = '0';
+var CLIENT_STORAGE_KEY = '_tree';
 var defaultProps = {
     itemsKey: 'items',
     autoOpenLevels: 0
@@ -96,6 +99,7 @@ function useTree(config) {
     var primaryKey = config.itemsKey || defaultProps.itemsKey;
     var _a = (0, react_1.useState)(null), selectedUniqueId = _a[0], setSelectedUniqueId = _a[1];
     var _b = (0, react_1.useState)({}), expandedItems = _b[0], setExpandedItems = _b[1];
+    var clientStorage = (0, useComponents_1["default"])().clientStorage;
     //Redux connection
     var _c = (0, useSelector_1["default"])(function (state) { return ({
         routes: (0, isString_1["default"])(config.items) ? (0, router_1.getNavItems)(state, config.items) : null,
@@ -116,11 +120,32 @@ function useTree(config) {
     }, [config.items, config.routerParams, routes]);
     // Initial expanded items
     (0, react_1.useEffect)(function () {
-        // TODO add clientStorage
         setExpandedItems(getAutoExpandedItems(items, selectedItemId, primaryKey, config.autoOpenLevels));
         var selectedItem = findChildById(items, selectedItemId, primaryKey);
         setSelectedUniqueId(selectedItem ? selectedItem.uniqueId : null);
     }, [items]);
+    var localTree = JSON.parse(clientStorage.get(CLIENT_STORAGE_KEY)) || {};
+    var saveInClientStorage = function () {
+        if (config.saveInClientStorage) {
+            localTree[config.clientStorageId] = expandedItems;
+            clientStorage.set(CLIENT_STORAGE_KEY, JSON.stringify(localTree));
+        }
+    };
+    (0, react_use_1.useMount)(function () {
+        if (config.saveInClientStorage) {
+            var treeData = localTree[config.clientStorageId];
+            if (treeData) {
+                setExpandedItems(treeData);
+            }
+        }
+    });
+    (0, react_use_1.useUnmount)(function () {
+        saveInClientStorage();
+    });
+    (0, react_use_1.useBeforeUnload)(function () {
+        saveInClientStorage();
+        return true;
+    });
     var onExpand = (0, react_1.useCallback)(function (e, uniqueId, item) {
         var _a;
         e.preventDefault();

package/package.json

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

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' | 'customIcon'> {
+export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent, Pick<ITreeProps, 'levelPadding' | 'alwaysOpened' | 'hasIconExpandOnly' | 'customIcon' | 'saveInClientStorage'> {
     /**
      * Свойства для элемента input
      * @example { onKeyDown: ... }
@@ -52,7 +52,7 @@ export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<I
     hasOnlyLeafCheckboxes?: boolean;
     [key: string]: any;
 }
-export interface ICheckboxTreeFieldViewProps extends IFieldWrapperOutputProps, Pick<ITreeProps, 'levelPadding' | 'customIcon'> {
+export interface ICheckboxTreeFieldViewProps extends IFieldWrapperOutputProps, Pick<ITreeProps, 'levelPadding' | 'hasIconExpandOnly' | 'customIcon'> {
     items: {
         id: number | string | boolean;
         label?: string;
@@ -67,6 +67,6 @@ export interface ICheckboxTreeFieldViewProps extends IFieldWrapperOutputProps, P
     size?: Size;
     hasOnlyLeafCheckboxes?: boolean;
 }
-export declare const getNestedItemsIds: (item: any, groupAttribute: any) => any[];
+export declare const getNestedItemsIds: (item: any, groupAttribute: any, hasOnlyLeafCheckboxes?: boolean) => any[];
 declare const _default: import("../../../ui/form/Field/fieldWrapper").FieldWrapperComponent<ICheckboxTreeFieldProps>;
 export default _default;

package/ui/form/CheckboxTreeField/CheckboxTreeField.js

@@ -44,12 +44,13 @@ var isArray_1 = __importDefault(require("lodash-es/isArray"));
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
-var getNestedItemsIds = function (item, groupAttribute) {
+var getNestedItemsIds = function (item, groupAttribute, hasOnlyLeafCheckboxes) {
+    if (hasOnlyLeafCheckboxes === void 0) { hasOnlyLeafCheckboxes = false; }
     if (item.disabled) {
         return [];
     }
     var _a = item, _b = groupAttribute, _c = _a[_b], nestedItems = _c === void 0 ? [] : _c;
-    var result = [item.id];
+    var result = hasOnlyLeafCheckboxes ? [] : [item.id];
     if (groupAttribute && (0, isArray_1["default"])(nestedItems)) {
         nestedItems.reduce(function (acc, nestedItem) {
             if ((0, isArray_1["default"])(nestedItem[groupAttribute])) {
@@ -88,8 +89,8 @@ function CheckboxTreeField(props) {
         inputValue: props.input.value
     }), selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
     var onItemSelect = (0, react_1.useCallback)(function (checkbox) {
-        if (checkbox.hasItems && !props.hasOnlyLeafCheckboxes) {
-            var selectedItemIds = (0, exports.getNestedItemsIds)(checkbox, props.primaryKey);
+        if (checkbox.hasItems) {
+            var selectedItemIds = (0, exports.getNestedItemsIds)(checkbox, props.primaryKey, props.hasOnlyLeafCheckboxes);
             setSelectedIds(selectedItemIds);
         }
         else if (checkbox.id && !checkbox.hasItems) {
@@ -126,8 +127,9 @@ function CheckboxTreeField(props) {
         renderCheckbox: renderCheckbox,
         size: props.size,
         levelPadding: props.levelPadding,
-        hasOnlyLeafCheckboxes: props.hasOnlyLeafCheckboxes
-    }); }, [onItemSelect, props.levelPadding, props.hasOnlyLeafCheckboxes, props.size, renderCheckbox, selectedIds, treeItems]);
+        hasOnlyLeafCheckboxes: props.hasOnlyLeafCheckboxes,
+        hasIconExpandOnly: props.hasIconExpandOnly
+    }); }, [treeItems, onItemSelect, selectedIds, renderCheckbox, props.size, props.levelPadding, props.hasOnlyLeafCheckboxes, props.hasIconExpandOnly]);
     return components.ui.renderView(props.view || 'form.CheckboxTreeFieldView', viewProps);
 }
 CheckboxTreeField.defaultProps = {
@@ -137,6 +139,8 @@ CheckboxTreeField.defaultProps = {
     levelPadding: 32,
     alwaysOpened: false,
     primaryKey: 'items',
-    hasOnlyLeafCheckboxes: false
+    hasOnlyLeafCheckboxes: false,
+    hasIconExpandOnly: true,
+    saveInClientStorage: false
 };
 exports["default"] = (0, fieldWrapper_1["default"])('CheckboxTreeField', CheckboxTreeField);

package/ui/form/NumberField/NumberField.js

@@ -50,7 +50,8 @@ function NumberField(props) {
     var onInputChange = (0, useInputTypeNumber_1["default"])(currentInputRef, {
         max: props.max,
         min: props.min,
-        value: props.input.value
+        value: props.input.value,
+        required: props.required
     }, onChange).onInputChange;
     var onStep = (0, react_1.useCallback)(function (isIncrement) {
         var _a;

package/ui/form/NumberField/hooks/useInputTypeNumber.d.ts

@@ -3,6 +3,7 @@ interface IInputTypeNumberProps {
     max: any;
     min: any;
     value: string | undefined | null;
+    required?: boolean;
 }
 declare const useInputTypeNumber: (currentInputRef: React.MutableRefObject<HTMLInputElement>, inputTypeNumberProps: IInputTypeNumberProps, onChange: (event: React.ChangeEvent<HTMLInputElement>, value?: any) => void) => {
     onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;

package/ui/form/NumberField/hooks/useInputTypeNumber.js

@@ -7,14 +7,15 @@ var react_1 = __importDefault(require("react"));
 var useInputTypeNumber = function (currentInputRef, inputTypeNumberProps, onChange) {
     react_1["default"].useEffect(function () {
         var _a;
-        var defaultValidity = 'The number is not valid.';
-        var errorMessage = inputTypeNumberProps.value > inputTypeNumberProps.max
-            || inputTypeNumberProps.value < inputTypeNumberProps.min
-            || !inputTypeNumberProps.value
-            ? __(defaultValidity)
+        var defaultValidity = __('The number is not valid.');
+        var errorMessage = inputTypeNumberProps.required
+            && (inputTypeNumberProps.value > inputTypeNumberProps.max
+                || inputTypeNumberProps.value < inputTypeNumberProps.min
+                || !inputTypeNumberProps.value)
+            ? defaultValidity
             : '';
         (_a = currentInputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(errorMessage);
-    }, [currentInputRef, inputTypeNumberProps.value, inputTypeNumberProps.max, inputTypeNumberProps.min]);
+    }, [currentInputRef, inputTypeNumberProps.value, inputTypeNumberProps.max, inputTypeNumberProps.min, inputTypeNumberProps.required]);
     var isValueNumeric = function (value) {
         if (!value) {
             return true;

package/ui/list/TreeTable/TreeTable.d.ts

@@ -10,7 +10,7 @@ export interface ITreeColumnViewProps extends IColumnViewProps, Pick<ITreeTableP
  *
  * Компонент для представления данных коллекции в виде иерархической структуры.
  */
-export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreeProps, 'alwaysOpened' | 'levelPadding' | 'customIcon'> {
+export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreeProps, 'alwaysOpened' | 'levelPadding' | 'customIcon' | 'saveInClientStorage'> {
     /**
      * Элементы коллекции
      * @example
@@ -35,6 +35,7 @@ declare namespace TreeTable {
     var defaultProps: {
         levelPadding: number;
         alwaysOpened: boolean;
+        saveInClientStorage: boolean;
     };
 }
 export default TreeTable;

package/ui/list/TreeTable/TreeTable.js

@@ -73,12 +73,15 @@ function TreeTable(props) {
         autoOpenLevels: 0,
         alwaysOpened: props.alwaysOpened,
         currentPage: list === null || list === void 0 ? void 0 : list.page,
-        itemsOnPage: list === null || list === void 0 ? void 0 : list.pageSize
+        itemsOnPage: list === null || list === void 0 ? void 0 : list.pageSize,
+        saveInClientStorage: props.saveInClientStorage,
+        clientStorageId: props.listId
     }).treeItems;
     return (React.createElement(Grid_1["default"], __assign({}, props, { columns: columns, items: treeItems, itemsIndexing: false })));
 }
 exports["default"] = TreeTable;
 TreeTable.defaultProps = {
     levelPadding: 32,
-    alwaysOpened: false
+    alwaysOpened: false,
+    saveInClientStorage: false
 };

package/ui/nav/Tree/Tree.d.ts

@@ -6,7 +6,6 @@ export interface ITreeViewProps extends ITreeProps {
 export interface ITreeItemViewProps extends ITreeProps {
     item: IPreparedTreeItem;
     children?: JSX.Element;
-    onNestedItemClick?: () => void;
     withoutPointerOnLabel?: boolean;
 }
 /**
@@ -70,6 +69,7 @@ declare namespace Tree {
         hasIconExpandOnly: boolean;
         useSameSelectedItemId: boolean;
         hideIcon: boolean;
+        saveInClientStorage: boolean;
     };
 }
 export default Tree;

package/ui/nav/Tree/Tree.js

@@ -13,7 +13,9 @@ function Tree(props) {
         onExpand: props.onItemClick,
         level: props.level,
         alwaysOpened: props.alwaysOpened,
-        useSameSelectedItemId: props.useSameSelectedItemId
+        useSameSelectedItemId: props.useSameSelectedItemId,
+        saveInClientStorage: props.autoSave,
+        clientStorageId: props.id
     }).treeItems;
     var viewProps = (0, react_1.useMemo)(function () { return ({
         items: treeItems,
@@ -34,5 +36,6 @@ Tree.defaultProps = {
     levelPadding: 32,
     hasIconExpandOnly: false,
     useSameSelectedItemId: true,
-    hideIcon: false
+    hideIcon: false,
+    saveInClientStorage: false
 };