@steroidsjs/core 3.0.8 → 3.0.10

package/docs-autogen-result.json

@@ -4526,6 +4526,14 @@
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
                 },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Дополнительный свойства для view части компонента",
+                    "required": false,
+                    "type": "Record",
+                    "example": null
+                },
                 {
                     "name": "visible",
                     "decorators": [],
@@ -4926,6 +4934,14 @@
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
                 },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Дополнительный свойства для view части компонента",
+                    "required": false,
+                    "type": "Record",
+                    "example": null
+                },
                 {
                     "name": "visible",
                     "decorators": [],
@@ -14120,6 +14136,15 @@
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView",
                     "defaultValue": null
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Дополнительный свойства для view части компонента",
+                    "required": false,
+                    "type": "Record",
+                    "example": null,
+                    "defaultValue": null
                 }
             ],
             "methods": [
@@ -14385,6 +14410,14 @@
                     "required": false,
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Дополнительный свойства для view части компонента",
+                    "required": false,
+                    "type": "Record",
+                    "example": null
                 }
             ],
             "methods": []
@@ -15159,6 +15192,15 @@
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView",
                     "defaultValue": null
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Свойства для компонента отображения",
+                    "required": false,
+                    "type": "{}",
+                    "example": "{\n customHandler: () => {...}\n}",
+                    "defaultValue": null
                 }
             ],
             "methods": [
@@ -15190,9 +15232,18 @@
             "tags": {},
             "defaultProps": null,
             "extends": [
-                "IFieldWrapperOutputProps"
+                "IFieldWrapperOutputProps",
+                "IUiComponent"
             ],
             "properties": [
+                {
+                    "name": "className",
+                    "decorators": [],
+                    "description": "Дополнительный CSS-класс для элемента отображения",
+                    "required": false,
+                    "type": "string",
+                    "example": null
+                },
                 {
                     "name": "componentId",
                     "decorators": [],
@@ -15246,7 +15297,7 @@
                     "decorators": [],
                     "description": "",
                     "required": true,
-                    "type": "{color: string, id: string | number | boolean, isHovered: boolean, isSelected: boolean, label: string, required: boolean, size: string}[]",
+                    "type": "{color: string, disabled: boolean, id: string | number | boolean, isHovered: boolean, isSelected: boolean, label: string, required: boolean, size: string}[]",
                     "example": null
                 },
                 {
@@ -15272,6 +15323,22 @@
                     "required": false,
                     "type": "string",
                     "example": null
+                },
+                {
+                    "name": "style",
+                    "decorators": [],
+                    "description": "Объект CSS стилей",
+                    "required": false,
+                    "type": "CSSProperties",
+                    "example": "{width: '45%'}"
+                },
+                {
+                    "name": "view",
+                    "decorators": [],
+                    "description": "Переопределение view React компонента для кастомизации отображения",
+                    "required": false,
+                    "type": "React.ReactNode | {}",
+                    "example": "MyCustomView"
                 }
             ],
             "methods": [
@@ -32086,6 +32153,14 @@
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
                 },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Дополнительный свойства для view части компонента",
+                    "required": false,
+                    "type": "Record",
+                    "example": null
+                },
                 {
                     "name": "visible",
                     "decorators": [],
@@ -33336,6 +33411,14 @@
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
                 },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Дополнительный свойства для view части компонента",
+                    "required": false,
+                    "type": "Record",
+                    "example": null
+                },
                 {
                     "name": "visible",
                     "decorators": [],
@@ -37337,6 +37420,15 @@
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView",
                     "defaultValue": null
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Свойства для компонента отображения",
+                    "required": false,
+                    "type": "{}",
+                    "example": "{\n customHandler: () => {...}\n}",
+                    "defaultValue": null
                 }
             ],
             "methods": []
@@ -37424,6 +37516,14 @@
                     "required": false,
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Свойства для компонента отображения",
+                    "required": false,
+                    "type": "{}",
+                    "example": "{\n customHandler: () => {...}\n}"
                 }
             ],
             "methods": []
@@ -37671,6 +37771,14 @@
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
                 },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Дополнительный свойства для view части компонента",
+                    "required": false,
+                    "type": "Record",
+                    "example": null
+                },
                 {
                     "name": "visible",
                     "decorators": [],
@@ -38048,6 +38156,15 @@
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView",
                     "defaultValue": null
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Дополнительный свойства для view части компонента",
+                    "required": false,
+                    "type": "Record",
+                    "example": null,
+                    "defaultValue": null
                 }
             ],
             "methods": [
@@ -38338,6 +38455,14 @@
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
                 },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Дополнительный свойства для view части компонента",
+                    "required": false,
+                    "type": "Record",
+                    "example": null
+                },
                 {
                     "name": "visible",
                     "decorators": [],

package/en.json

@@ -979,6 +979,7 @@
     "Скрыть иконку 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": "",
+    "Дополнительный свойства для view части компонента": "",
     "Идентификатор (ключ) для сохранения в LocalStorage коллекции.": "",
     "Сохранение в localStorage уровней вложенности.": "",
     "Компоненты для подключения wysiwyg редактора": "",

package/package.json

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

package/ui/form/Button/Button.d.ts

@@ -149,6 +149,10 @@ export interface IButtonProps extends IUiComponent {
      * Цвет текста кнопки или ссылки
      */
     textColor?: string;
+    /**
+    * Дополнительный свойства для view части компонента
+    */
+    viewProps?: Record<string, any>;
     [key: string]: any;
 }
 export interface IButtonViewProps extends IButtonProps {

package/ui/form/Button/Button.js

@@ -147,10 +147,11 @@ function Button(props) {
         onClick: !disabled ? onClick : undefined,
         children: props.label || props.children,
         className: props.className,
-        style: props.style
+        style: props.style,
+        viewProps: props.viewProps
     }); }, [badge, context === null || context === void 0 ? void 0 : context.formId, disabled, isFailed, isLoading, onClick, props.block,
         props.children, props.className, props.color, props.hint, props.icon, props.label,
-        props.link, props.outline, props.size, props.style, props.target, props.type, submitting, tag, url]);
+        props.link, props.outline, props.size, props.style, props.target, props.type, submitting, tag, url, props.viewProps]);
     return components.ui.renderView(props.view || 'form.ButtonView', viewProps);
 }
 Button.defaultProps = {

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

@@ -48,9 +48,19 @@ export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, Omit<I
      * Кастомная вьюшка для элемента
      */
     itemView?: CustomView;
+    /**
+     * Свойства для компонента отображения
+     * @example
+     * {
+     *  customHandler: () => {...}
+     * }
+     */
+    viewProps?: {
+        [key: string]: any;
+    };
     [key: string]: any;
 }
-export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps {
+export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps, IUiComponent {
     inputProps: {
         name: string;
         type: string;
@@ -65,6 +75,7 @@ export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps {
         color?: string;
         required?: boolean;
         size?: Size;
+        disabled?: boolean;
     }[];
     selectedIds: (PrimaryKey | any)[];
     onItemSelect: (id: PrimaryKey | any) => void;

package/ui/form/CheckboxListField/CheckboxListField.js

@@ -79,7 +79,7 @@ function CheckboxListField(props) {
         }
     }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
     var CheckboxFieldView = props.itemView || components.ui.getView('form.CheckboxFieldView');
-    var renderCheckbox = function (checkboxProps) { return (react_1["default"].createElement(CheckboxFieldView, __assign({}, checkboxProps))); };
+    var renderCheckbox = (0, react_1.useCallback)(function (checkboxProps) { return (react_1["default"].createElement(CheckboxFieldView, __assign({}, checkboxProps))); }, [CheckboxFieldView]);
     var viewProps = (0, react_1.useMemo)(function () { return ({
         items: items,
         inputProps: inputProps,
@@ -88,8 +88,23 @@ function CheckboxListField(props) {
         renderCheckbox: renderCheckbox,
         orientation: props.orientation,
         size: props.size,
-        disabled: props.disabled
-    }); }, [inputProps, items, onItemSelect, props.disabled, props.orientation, props.size, renderCheckbox, selectedIds]);
+        disabled: props.disabled,
+        className: props.className,
+        style: props.style,
+        viewProps: props.viewProps
+    }); }, [
+        inputProps,
+        items,
+        onItemSelect,
+        props.className,
+        props.disabled,
+        props.orientation,
+        props.size,
+        props.style,
+        props.viewProps,
+        renderCheckbox,
+        selectedIds,
+    ]);
     return components.ui.renderView(props.view || 'form.CheckboxListFieldView', viewProps);
 }
 CheckboxListField.defaultProps = {

package/ui/form/RadioListField/RadioListField.js

@@ -74,7 +74,7 @@ function RadioListField(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.input.onChange, selectedIds]);
     var RadioFieldView = components.ui.getView('form.RadioFieldView');
-    var renderRadio = function (radioProps) { return react_1["default"].createElement(RadioFieldView, __assign({}, radioProps)); };
+    var renderRadio = (0, react_1.useCallback)(function (radioProps) { return react_1["default"].createElement(RadioFieldView, __assign({}, radioProps)); }, [RadioFieldView]);
     var viewProps = (0, react_1.useMemo)(function () { return ({
         items: items,
         inputProps: inputProps,

package/ui/nav/ButtonGroup/ButtonGroup.d.ts

@@ -40,6 +40,16 @@ export interface IButtonGroupProps extends IUiComponent {
      * }
      */
     buttonProps?: IButtonProps;
+    /**
+     * Свойства для компонента отображения
+     * @example
+     * {
+     *  customHandler: () => {...}
+     * }
+     */
+    viewProps?: {
+        [key: string]: any;
+    };
 }
 export interface IButtonGroupViewProps extends Omit<IButtonGroupProps, 'items'> {
     items: {

package/ui/nav/ButtonGroup/ButtonGroup.js

@@ -32,9 +32,10 @@ function ButtonGroup(props) {
             size: ((_a = props.buttonProps) === null || _a === void 0 ? void 0 : _a.size) || DEFAULT_BUTTON_GROUP_SIZE,
             activeButton: activeButton,
             items: items,
-            onClick: onClick
+            onClick: onClick,
+            viewProps: props.viewProps
         });
-    }, [activeButton, items, onClick, props.buttonProps, props.className, props.style]);
+    }, [activeButton, items, onClick, props.buttonProps, props.className, props.style, props.viewProps]);
     return components.ui.renderView(props.view || 'nav.ButtonGroupView', viewProps);
 }
 exports["default"] = ButtonGroup;