@steroidsjs/core 3.0.4 → 3.0.5

package/components/MetaComponent.d.ts

@@ -157,6 +157,7 @@ export default class MetaComponent implements IMetaComponent {
         time: {
             jsType: string;
             field: string;
+            formatter: string;
         };
     };
 }

package/components/MetaComponent.js

@@ -166,7 +166,8 @@ var MetaComponent = /** @class */ (function () {
             },
             time: {
                 jsType: 'string',
-                field: 'TimeField'
+                field: 'TimeField',
+                formatter: 'TimeFormatter'
             }
         };
     };

package/docs-autogen-result.json

@@ -15423,6 +15423,15 @@
                     "example": "items",
                     "defaultValue": null
                 },
+                {
+                    "name": "hasOnlyLeafCheckboxes",
+                    "decorators": [],
+                    "description": "Отображать чекбоксы только на узлах, не имеющих вложенных элементов",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "hint",
                     "decorators": [],
@@ -15697,6 +15706,14 @@
                     "type": "string",
                     "example": null
                 },
+                {
+                    "name": "hasOnlyLeafCheckboxes",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
                 {
                     "name": "input",
                     "decorators": [],
@@ -31130,6 +31147,45 @@
             ],
             "methods": []
         },
+        "ITimeFormatterProps": {
+            "name": "ITimeFormatterProps",
+            "moduleName": "ui/format/TimeFormatter/TimeFormatter",
+            "title": "TimeFormatter",
+            "description": "\nКомпонент TimeFormatter предназначен для форматирования времени с использованием заданного формата.\nОн позволяет кастомизировать отображение времени, используя переданный view React компонент.\n",
+            "tags": {},
+            "defaultProps": null,
+            "extends": [],
+            "properties": [
+                {
+                    "name": "format",
+                    "decorators": [],
+                    "description": "Формат времени",
+                    "required": false,
+                    "type": "string",
+                    "example": "HH:mm",
+                    "defaultValue": null
+                },
+                {
+                    "name": "value",
+                    "decorators": [],
+                    "description": "Время",
+                    "required": false,
+                    "type": "string",
+                    "example": "16:15",
+                    "defaultValue": null
+                },
+                {
+                    "name": "view",
+                    "decorators": [],
+                    "description": "Переопределение view React компонента для кастомизации отображения колонки",
+                    "required": false,
+                    "type": "React.ReactNode | {}",
+                    "example": "MyCustomView",
+                    "defaultValue": null
+                }
+            ],
+            "methods": []
+        },
         "IHeaderProps": {
             "name": "IHeaderProps",
             "moduleName": "ui/layout/Header/Header",
@@ -38879,6 +38935,14 @@
                     "required": false,
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
+                },
+                {
+                    "name": "withoutPointerOnLabel",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
                 }
             ],
             "methods": [
@@ -38925,6 +38989,15 @@
                             "example": null
                         }
                     ]
+                },
+                {
+                    "name": "onNestedItemClick",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "void",
+                    "example": null,
+                    "parameters": []
                 }
             ]
         },
@@ -43098,6 +43171,13 @@
             "description": "",
             "tags": {}
         },
+        "ui/format/TimeFormatter/TimeFormatter": {
+            "name": "default",
+            "moduleName": "ui/format/TimeFormatter/TimeFormatter",
+            "title": "",
+            "description": "",
+            "tags": {}
+        },
         "ui/layout/Header/Header": {
             "name": "default",
             "moduleName": "ui/layout/Header/Header",

package/en.json

@@ -955,23 +955,17 @@
     "Будет ли отображён item?": "",
     "Устанавливать ли фокус и показывать панель времени сразу после рендера страницы": "",
     "Флаг, определяющий раскрывать вложенные элементы по клику на весь элемент или только на иконку": "",
-    "\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": "",
     "\nКомпонент для создания пошаговой формы. Предоставляет управление и синхронизацию состояния формы,\nа также список шагов формы для удобной навигации.\nПоля для шагов можно передавать как в виде компонентов, так и в виде объекта с названием поля.\nПозволяет выполнять отправку данных формы на сервер с возможностью валидации и перехода к неверно заполненным полям.\n\n": "",
+    "\nКомпонент TimeFormatter предназначен для форматирования времени с использованием заданного формата.\nОн позволяет кастомизировать отображение времени, используя переданный view React компонент.\n": "",
     "При повторном нажатии на выбранный элемент из дерева, он продолжит отображаться как активный.": "",
     "Дополнительные свойства, которые передаются во view компонента": "",
     "Пропсы для инпута загрузки файлов": "",
     "Переопределение view React компонента для кастомизации отображения элемента инпута": "",
     "Кастомный placeholder для инпута": "",
-    "Компоненты для подключения wysiwyg редактора": "",
     "Если true, то location.pathname будет совпадать с теми путями, которые содержат слеш в конце.\nНапример, если указать путь '/catalog/', тогда совпадение будет с '/catalog/' и '/catalog/chapter', но не '/catalog'.": "",
     "Кастомная иконка, заменяющая иконку раскрытия по умолчанию": "",
     "Опции маски для полей": "",
-    "Размер компонента и вложенных полей": "",
     "Дополнительные кнопки": "",
-    "Параметры для кнопки отправки формы": "",
-    "Конструктор редактора 'ckeditor5-react' из библиотеки @steroidsjs/ckeditor5/packages/ckeditor5-build-classic\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
-    "Компонент редактора 'ckeditor5-react' из библиотеки @ckeditor\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
     "Свойства для Form": "",
     "Свойства для кнопки продолжить/отправить": "",
     "Свойства для кнопки возврата": "",
@@ -979,7 +973,17 @@
     "Ориентация списка шагов формы": "",
     "Коллекция полей и аттрибутов для каждого шага формы. Можно передавать как компонент, так и объект с полями.\nГлавное, чтобы внутри шага использовался один из способов.": "",
     "Свойства для Steps": "",
-    "CSS-класс для элемента навигации.": "",
+    "Формат времени": "",
+    "Время": "",
     "Флаг, который позволяет использовать вложенные роуты c указанием вложенного пути": "",
-    "Скрыть иконку c лева от элемента": ""
+    "Скрыть иконку 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": "",
+    "Компоненты для подключения wysiwyg редактора": "",
+    "Отображать чекбоксы только на узлах, не имеющих вложенных элементов": "",
+    "Размер компонента и вложенных полей": "",
+    "Параметры для кнопки отправки формы": "",
+    "Конструктор редактора 'ckeditor5-react' из библиотеки @steroidsjs/ckeditor5/packages/ckeditor5-build-classic\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
+    "Компонент редактора 'ckeditor5-react' из библиотеки @ckeditor\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
+    "CSS-класс для элемента навигации.": ""
 }

package/package.json

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

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

@@ -46,6 +46,10 @@ export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<I
      * Первичный ключ для доступа к вложенным элементам
      */
     primaryKey?: string;
+    /**
+     * Отображать чекбоксы только на узлах, не имеющих вложенных элементов
+     */
+    hasOnlyLeafCheckboxes?: boolean;
     [key: string]: any;
 }
 export interface ICheckboxTreeFieldViewProps extends IFieldWrapperOutputProps, Pick<ITreeProps, 'levelPadding' | 'customIcon'> {
@@ -61,6 +65,7 @@ export interface ICheckboxTreeFieldViewProps extends IFieldWrapperOutputProps, P
     onItemSelect: (checkbox: IPreparedTreeItem) => void;
     renderCheckbox: (checkboxProps: ICheckboxFieldViewProps) => JSX.Element;
     size?: Size;
+    hasOnlyLeafCheckboxes?: boolean;
 }
 export declare const getNestedItemsIds: (item: any, groupAttribute: any) => any[];
 declare const _default: import("../../../ui/form/Field/fieldWrapper").FieldWrapperComponent<ICheckboxTreeFieldProps>;

package/ui/form/CheckboxTreeField/CheckboxTreeField.js

@@ -41,6 +41,7 @@ exports.getNestedItemsIds = void 0;
 var react_1 = __importStar(require("react"));
 var react_use_1 = require("react-use");
 var isArray_1 = __importDefault(require("lodash-es/isArray"));
+var 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) {
@@ -68,7 +69,9 @@ function CheckboxTreeField(props) {
     var inputSelectedIds = (0, react_1.useMemo)(function () { return props.selectedIds || [].concat(props.input.value || []); }, [props.input.value, props.selectedIds]);
     // Data Provider
     var items = (0, hooks_1.useDataProvider)({
-        items: props.items
+        items: props.items,
+        initialSelectedIds: inputSelectedIds,
+        dataProvider: props.dataProvider
     }).items;
     // Tree items
     var treeItems = (0, hooks_1.useTree)({
@@ -85,24 +88,27 @@ function CheckboxTreeField(props) {
         inputValue: props.input.value
     }), selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
     var onItemSelect = (0, react_1.useCallback)(function (checkbox) {
-        if (checkbox.hasItems) {
+        if (checkbox.hasItems && !props.hasOnlyLeafCheckboxes) {
             var selectedItemIds = (0, exports.getNestedItemsIds)(checkbox, props.primaryKey);
             setSelectedIds(selectedItemIds);
         }
-        else {
+        else if (checkbox.id && !checkbox.hasItems) {
             setSelectedIds(checkbox.id);
         }
-    }, [props.primaryKey, setSelectedIds]);
-    // Sync with form
-    (0, react_1.useEffect)(function () {
-        props.input.onChange.call(null, selectedIds);
-        if (props.onChange) {
-            props.onChange(selectedIds);
-        }
-    }, [props, props.input.onChange, selectedIds]);
+    }, [props.hasOnlyLeafCheckboxes, props.primaryKey, setSelectedIds]);
     var onReset = (0, react_1.useCallback)(function () {
         setSelectedIds([]);
     }, [setSelectedIds]);
+    // Sync with form
+    var prevSelectedIds = (0, react_use_1.usePrevious)(selectedIds);
+    (0, react_1.useEffect)(function () {
+        if (!(0, isEqual_1["default"])(prevSelectedIds || [], selectedIds)) {
+            props.input.onChange.call(null, selectedIds);
+            if (props.onChange) {
+                props.onChange.call(null, selectedIds);
+            }
+        }
+    }, [prevSelectedIds, props.input.onChange, props.multiple, props.onChange, selectedIds]);
     // Reset selected ids on form reset
     var prevInputValue = (0, react_use_1.usePrevious)(props.input.value);
     (0, react_use_1.useUpdateEffect)(function () {
@@ -119,8 +125,9 @@ function CheckboxTreeField(props) {
         selectedIds: selectedIds,
         renderCheckbox: renderCheckbox,
         size: props.size,
-        levelPadding: props.levelPadding
-    }); }, [onItemSelect, props.levelPadding, props.size, renderCheckbox, selectedIds, treeItems]);
+        levelPadding: props.levelPadding,
+        hasOnlyLeafCheckboxes: props.hasOnlyLeafCheckboxes
+    }); }, [onItemSelect, props.levelPadding, props.hasOnlyLeafCheckboxes, props.size, renderCheckbox, selectedIds, treeItems]);
     return components.ui.renderView(props.view || 'form.CheckboxTreeFieldView', viewProps);
 }
 CheckboxTreeField.defaultProps = {
@@ -129,6 +136,7 @@ CheckboxTreeField.defaultProps = {
     className: '',
     levelPadding: 32,
     alwaysOpened: false,
-    primaryKey: 'items'
+    primaryKey: 'items',
+    hasOnlyLeafCheckboxes: false
 };
 exports["default"] = (0, fieldWrapper_1["default"])('CheckboxTreeField', CheckboxTreeField);

package/ui/format/TimeFormatter/TimeFormatter.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+/**
+ * TimeFormatter
+ *
+ * Компонент TimeFormatter предназначен для форматирования времени с использованием заданного формата.
+ * Он позволяет кастомизировать отображение времени, используя переданный view React компонент.
+ **/
+export interface ITimeFormatterProps {
+    /**
+     * Формат времени
+     * @example HH:mm
+     */
+    format?: string;
+    /**
+     * Время
+     * @example 16:15
+     */
+    value?: string;
+    /**
+     * Переопределение view React компонента для кастомизации отображения колонки
+     * @example MyCustomView
+     */
+    view?: CustomView;
+    [key: string]: any;
+}
+export default function TimeFormatter(props: ITimeFormatterProps): JSX.Element;

package/ui/format/TimeFormatter/TimeFormatter.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var hooks_1 = require("@steroidsjs/core/hooks");
+var dayjs_1 = __importDefault(require("dayjs"));
+var defaultProps = {
+    format: 'HH:mm'
+};
+function TimeFormatter(props) {
+    var components = (0, hooks_1.useComponents)();
+    if (!props.value) {
+        return null;
+    }
+    var time = (0, dayjs_1["default"])(props.value).format(props.format || defaultProps.format);
+    return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
+        value: time
+    });
+}
+exports["default"] = TimeFormatter;

package/ui/format/TimeFormatter/index.d.ts

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

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

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

@@ -6,6 +6,8 @@ export interface ITreeViewProps extends ITreeProps {
 export interface ITreeItemViewProps extends ITreeProps {
     item: IPreparedTreeItem;
     children?: JSX.Element;
+    onNestedItemClick?: () => void;
+    withoutPointerOnLabel?: boolean;
 }
 /**
  * Tree