@steroidsjs/core 3.0.0-beta.98 → 3.0.0

package/ui/form/WizardForm/utils.js

@@ -0,0 +1,111 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.getModifiedSteps = exports.normalizeSteps = exports.generateFieldStepMap = void 0;
+var has_1 = __importDefault(require("lodash-es/has"));
+var get_1 = __importDefault(require("lodash-es/get"));
+var assign_1 = __importDefault(require("lodash-es/assign"));
+var isArray_1 = __importDefault(require("lodash-es/isArray"));
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
+var indexOf_1 = __importDefault(require("lodash-es/indexOf"));
+var Steps_1 = require("../../list/Steps/Steps");
+var getComponentAttributes = function (component, index) {
+    var componentAttributesStepMap = {};
+    if (Array.isArray(component)) {
+        component.forEach(function (field) {
+            (0, assign_1["default"])(componentAttributesStepMap, getComponentAttributes(field, index));
+        });
+    }
+    else {
+        var attribute = (0, get_1["default"])(component, ['props', 'attribute']) || (0, get_1["default"])(component, ['attribute']) || null;
+        if (attribute) {
+            componentAttributesStepMap[attribute] = index;
+        }
+        else {
+            var children = (0, get_1["default"])(component, ['props', 'children']) || null;
+            if ((0, isArray_1["default"])(children)) {
+                children.forEach(function (field) { return (0, assign_1["default"])(componentAttributesStepMap, getComponentAttributes(field, index)); });
+            }
+            else if (children) {
+                (0, assign_1["default"])(componentAttributesStepMap, getComponentAttributes(children, index));
+            }
+        }
+    }
+    return componentAttributesStepMap;
+};
+var getFieldsAttributes = function (fields, index) {
+    var fieldAttributesStepMap = {};
+    if ((0, isArray_1["default"])(fields)) {
+        fields.forEach(function (field) { return (0, assign_1["default"])(fieldAttributesStepMap, getFieldsAttributes(field, index)); });
+    }
+    else {
+        var attribute = (0, get_1["default"])(fields, ['attribute']) || null;
+        if (attribute) {
+            fieldAttributesStepMap[attribute] = index;
+        }
+        if ((0, has_1["default"])(fields, ['attributeFrom']) && (0, has_1["default"])(fields, ['attributeTo'])) {
+            fieldAttributesStepMap[(0, get_1["default"])(fields, 'attributeFrom')] = index;
+            fieldAttributesStepMap[(0, get_1["default"])(fields, 'attributeFrom')] = index;
+        }
+        if ((0, has_1["default"])(fields, ['items'])) {
+            var children = (0, get_1["default"])(fields, ['items']) || null;
+            if (children) {
+                (0, assign_1["default"])(fieldAttributesStepMap, getFieldsAttributes(children, index));
+            }
+        }
+    }
+    return fieldAttributesStepMap;
+};
+var generateFieldStepMap = function (arr) {
+    if (arr === void 0) { arr = []; }
+    return arr.reduce(function (fieldStepMap, step, index) {
+        if ((0, has_1["default"])(step, 'fields')) {
+            return __assign(__assign({}, fieldStepMap), getFieldsAttributes(step.fields, index));
+        }
+        if ((0, has_1["default"])(step, 'component')) {
+            return __assign(__assign({}, fieldStepMap), getComponentAttributes(step.component, index));
+        }
+        return fieldStepMap;
+    }, {});
+};
+exports.generateFieldStepMap = generateFieldStepMap;
+var normalizeSteps = function (steps) { return steps.map(function (step, index) { return ({
+    id: index,
+    title: step.stepLabel || null,
+    description: step.description || null,
+    subtitle: step.subtitle || null,
+    icon: step.icon || null,
+    status: index === 0 ? Steps_1.ACTIVE_STATUS : Steps_1.WAIT_STATUS
+}); }); };
+exports.normalizeSteps = normalizeSteps;
+var getModifiedSteps = function (prevStepsState, errorSteps, currentStep, nextStep) {
+    var newStepsState = __spreadArray([], prevStepsState, true);
+    newStepsState[currentStep].status = (0, isEmpty_1["default"])(errorSteps)
+        ? Steps_1.WAIT_STATUS
+        : ((0, indexOf_1["default"])(errorSteps, currentStep) !== -1 ? Steps_1.ERROR_STATUS : Steps_1.FINISH_STATUS);
+    newStepsState[nextStep].status = Steps_1.ACTIVE_STATUS;
+    return newStepsState;
+};
+exports.getModifiedSteps = getModifiedSteps;

package/ui/form/index.d.ts

@@ -4,6 +4,7 @@ import BlankField from './BlankField';
 import Button from './Button';
 import CheckboxField from './CheckboxField';
 import CheckboxListField from './CheckboxListField';
+import CheckboxTreeField from './CheckboxTreeField';
 import DateField from './DateField';
 import DateRangeField from './DateRangeField';
 import DateTimeField from './DateTimeField';
@@ -30,13 +31,14 @@ import TimeField from './TimeField';
 import RateField from './RateField';
 import MaskField from './MaskField';
 import EmailField from './EmailField';
-export { AutoCompleteField, BlankField, Button, CheckboxField, CheckboxListField, DateField, DateRangeField, DateTimeField, DateTimeRangeField, DropDownField, Field, FieldLayout, FieldList, FieldSet, FileField, Form, HtmlField, InputField, NavField, NumberField, PasswordField, RadioField, RadioListField, ReCaptchaField, SliderField, SwitcherField, TextField, TimeField, RateField, MaskField, EmailField, };
+export { AutoCompleteField, BlankField, Button, CheckboxField, CheckboxListField, CheckboxTreeField, DateField, DateRangeField, DateTimeField, DateTimeRangeField, DropDownField, Field, FieldLayout, FieldList, FieldSet, FileField, Form, HtmlField, InputField, NavField, NumberField, PasswordField, RadioField, RadioListField, ReCaptchaField, SliderField, SwitcherField, TextField, TimeField, RateField, MaskField, EmailField, };
 declare const _default: {
     AutoCompleteField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./AutoCompleteField/AutoCompleteField").IAutoCompleteFieldProps>;
     BlankField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./BlankField/BlankField").IBlankFieldProps>;
     Button: typeof Button;
     CheckboxField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./CheckboxField/CheckboxField").ICheckboxFieldProps>;
     CheckboxListField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./CheckboxListField/CheckboxListField").ICheckboxListFieldProps>;
+    CheckboxTreeField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./CheckboxTreeField/CheckboxTreeField").ICheckboxTreeFieldProps>;
     DateField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./DateField/DateField").IDateFieldProps>;
     DateRangeField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./DateRangeField/DateRangeField").IDateRangeFieldProps>;
     DateTimeField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./DateTimeField/DateTimeField").IDateTimeFieldProps>;

package/ui/form/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.EmailField = exports.MaskField = exports.RateField = exports.TimeField = exports.TextField = exports.SwitcherField = exports.SliderField = exports.ReCaptchaField = exports.RadioListField = exports.RadioField = exports.PasswordField = exports.NumberField = exports.NavField = exports.InputField = exports.HtmlField = exports.Form = exports.FileField = exports.FieldSet = exports.FieldList = exports.FieldLayout = exports.Field = exports.DropDownField = exports.DateTimeRangeField = exports.DateTimeField = exports.DateRangeField = exports.DateField = exports.CheckboxListField = exports.CheckboxField = exports.Button = exports.BlankField = exports.AutoCompleteField = void 0;
+exports.EmailField = exports.MaskField = exports.RateField = exports.TimeField = exports.TextField = exports.SwitcherField = exports.SliderField = exports.ReCaptchaField = exports.RadioListField = exports.RadioField = exports.PasswordField = exports.NumberField = exports.NavField = exports.InputField = exports.HtmlField = exports.Form = exports.FileField = exports.FieldSet = exports.FieldList = exports.FieldLayout = exports.Field = exports.DropDownField = exports.DateTimeRangeField = exports.DateTimeField = exports.DateRangeField = exports.DateField = exports.CheckboxTreeField = exports.CheckboxListField = exports.CheckboxField = exports.Button = exports.BlankField = exports.AutoCompleteField = void 0;
 var AutoCompleteField_1 = __importDefault(require("./AutoCompleteField"));
 exports.AutoCompleteField = AutoCompleteField_1["default"];
 var BlankField_1 = __importDefault(require("./BlankField"));
@@ -14,6 +14,8 @@ var CheckboxField_1 = __importDefault(require("./CheckboxField"));
 exports.CheckboxField = CheckboxField_1["default"];
 var CheckboxListField_1 = __importDefault(require("./CheckboxListField"));
 exports.CheckboxListField = CheckboxListField_1["default"];
+var CheckboxTreeField_1 = __importDefault(require("./CheckboxTreeField"));
+exports.CheckboxTreeField = CheckboxTreeField_1["default"];
 var DateField_1 = __importDefault(require("./DateField"));
 exports.DateField = DateField_1["default"];
 var DateRangeField_1 = __importDefault(require("./DateRangeField"));
@@ -72,6 +74,7 @@ exports["default"] = {
     Button: Button_1["default"],
     CheckboxField: CheckboxField_1["default"],
     CheckboxListField: CheckboxListField_1["default"],
+    CheckboxTreeField: CheckboxTreeField_1["default"],
     DateField: DateField_1["default"],
     DateRangeField: DateRangeField_1["default"],
     DateTimeField: DateTimeField_1["default"],

package/ui/layout/ProgressBar/ProgressBar.js

@@ -47,9 +47,15 @@ function ProgressBar(props) {
         return props.label(props.percent);
     });
     if (props.type === 'line') {
-        return components.ui.renderView('layout.LineProgressBarView', { percent: props.percent, status: props.status, size: props.size, label: getLabel() });
+        return components.ui.renderView('layout.LineProgressBarView', { percent: props.percent,
+            status: props.status,
+            size: props.size,
+            label: getLabel() });
     }
-    return components.ui.renderView('layout.CircleProgressBarView', { percent: props.percent, status: props.status, size: props.size, label: getLabel() });
+    return components.ui.renderView('layout.CircleProgressBarView', { percent: props.percent,
+        status: props.status,
+        size: props.size,
+        label: getLabel() });
 }
 ProgressBar.defaultProps = {
     status: 'normal',

package/ui/layout/Skeleton/Skeleton.d.ts

@@ -8,7 +8,9 @@ export interface ISkeletonViewProps {
     width?: string | number;
 }
 /**
- * Компонент Skeleton представляет собой заглушку для отображения временных данных
+ * Skeleton
+ *
+ * Компонент `Skeleton` представляет собой заглушку для отображения временных данных
  * во время загрузки или ожидания загрузки реальных данных.
  **/
 export interface ISkeletonProps {

package/ui/layout/Tooltip/Tooltip.d.ts

@@ -72,7 +72,10 @@ export interface ITooltipProps {
     style?: ITooltipStylePosition;
     /**
      * Стили для позиционирования стрелки
-     * @example {left: 10}
+     * @example
+     * {
+     *  left: 10
+     * }
      */
     arrowPosition?: ITooltipArrowPosition;
     /**

package/ui/list/ControlsColumn/ControlsColumn.d.ts

@@ -8,7 +8,7 @@ export interface IControlsColumnItem extends IButtonProps {
 /**
  * ControlsColumn
  *
- * Компонент ControlsColumn предоставляет колонку с контролами.
+ * Компонент `ControlsColumn` предоставляет колонку с контролами.
  **/
 export interface IControlsColumnProps {
     /**
@@ -17,13 +17,27 @@ export interface IControlsColumnProps {
     primaryKey?: string;
     /**
      * Коллекция с контролами
-     * @example [{id: 'delete'}, {id: 'view', position: 'left'}]
+     * @example
+     * [
+     *  {
+     *   id: 'delete'
+     *  },
+     *  {
+     *   id: 'view',
+     *   position: 'left'
+     *  }
+     * ]
      */
     controls?: IControlItem[] | ((item: any, primaryKey: string) => IControlItem[]);
     /**
      * Элемент, для которого будет отображаться список с контролами, в нём можно задать видимость контрола
      * с помощью свойства 'can' + _upperFirst(control.id)
-     * @example {name: 'Ivan', work: 'development', canView: false}
+     * @example
+     * {
+     *  name: 'Ivan',
+     *  work: 'development',
+     *  canView: false
+     * }
      */
     item?: any;
     /**

package/ui/list/FlexGrid/FlexGrid.d.ts

@@ -36,7 +36,17 @@ export interface IFlexGridItem {
 export interface IFlexGridProps extends IUiComponent {
     /**
      * Элементы FlexGrid
-     * @example [{content: 'Block1', col: 4}, {content: 'Block2', col: 6}]
+     * @example
+     * [
+     *  {
+     *   content: 'Block1',
+     *   col: 4
+     *  },
+     *  {
+     *   content: 'Block2',
+     *   col: 6
+     *  }
+     * ]
      */
     items?: IFlexGridItem[];
     /**

package/ui/list/Grid/Grid.d.ts

@@ -18,7 +18,11 @@ export interface IGridColumn {
     attribute?: string;
     /**
      * Свойства для компонента форматирования
-     * @example {component: DateFormatter, format: 'DD MMMM'}
+     * @example
+     * {
+     *  component: DateFormatter,
+     *  format: 'DD MMMM'
+     * }
      */
     formatter?: Record<string, any>;
     /**
@@ -74,7 +78,12 @@ export interface IGridColumn {
     subtitleAttribute?: string;
     /**
      * Параметры для ссылки в колонке
-    * @example {attribute: 'name', linkProps: {target: 'blank'}, url: 'https://kozhindev.com'}
+    * @example
+     * {
+     *  attribute: 'name',
+     *  linkProps: {target: 'blank'},
+     *  url: 'https://kozhindev.com'
+     * }
     */
     link?: {
         attribute: string;
@@ -83,7 +92,11 @@ export interface IGridColumn {
     };
     /**
     * Параметры для иконки в колонке
-    * @example {attribute: 'icon', isLeft: true}
+    * @example
+     * {
+     *  attribute: 'icon',
+     *  isLeft: true
+     * }
     */
     icon?: {
         attribute: string;
@@ -91,7 +104,11 @@ export interface IGridColumn {
     };
     /**
     *  Параметры для картинки в колонке
-    * @example {attribute: 'icon', isLeft: true}
+    * @example
+     * {
+     *  attribute: 'icon',
+     *  isLeft: true
+     * }
     */
     picture?: {
         attribute: string;
@@ -122,13 +139,32 @@ export interface IGridProps extends IListConfig {
     view?: CustomView;
     /**
      * Коллекция с наименованиями и свойствами колонок в таблице
-     * @example [{label: 'Name', attribute: 'name'}, {label: 'Work', attribute: 'work'}]
+     * @example
+     * [
+     *  {
+     *   label: 'Name',
+     *   attribute: 'name'
+     *  },
+     *  {
+     *   label: 'Work',
+     *   attribute: 'work'
+     *  }
+     * ]
      */
     columns: (string | IGridColumn)[];
     /**
      * Коллекция с элементами управления. Данная коллекция отобразится в колонке рядом с каждой записью в таблице.
      * Например, кнопки для удаления и детального просмотра записи.
-     * @example [{id: 'delete'}, {id: 'view', position: 'left'}]
+     * @example
+     * [
+     *  {
+     *   id: 'delete'
+     *  },
+     *  {
+     *   id: 'view',
+     *   position: 'left'
+     *  }
+     * ]
      */
     controls?: IControlItem[] | ((item: any, primaryKey: string) => IControlItem[]);
     /**

package/ui/list/Grid/Grid.js

@@ -69,8 +69,7 @@ function Grid(props) {
         items: props.items,
         initialItems: props.initialItems,
         initialTotal: props.initialTotal,
-        autoFetchOnFormChanges: props.autoFetchOnFormChanges,
-        hasTreeItems: props.hasTreeItems
+        autoFetchOnFormChanges: props.autoFetchOnFormChanges
     }), list = _a.list, model = _a.model, searchModel = _a.searchModel, paginationPosition = _a.paginationPosition, paginationSizePosition = _a.paginationSizePosition, layoutNamesPosition = _a.layoutNamesPosition, renderList = _a.renderList, renderEmpty = _a.renderEmpty, renderPagination = _a.renderPagination, renderPaginationSize = _a.renderPaginationSize, renderLayoutNames = _a.renderLayoutNames, renderSearchForm = _a.renderSearchForm, onFetch = _a.onFetch, onSort = _a.onSort;
     var renderLabel = (0, react_1.useCallback)(function (column) {
         if (column.headerView) {

package/ui/list/LayoutNames/LayoutNames.d.ts

@@ -34,7 +34,17 @@ export interface ILayoutNamesProps {
     position?: ListControlPosition;
     /**
      * Коллекция с шаблонами
-     * @example [{id: 'list', label: 'List'}, {id: 'grid', label: 'Grid'}]
+     * @example
+     * [
+     *  {
+     *   id: 'list',
+     *   label: 'List'
+     *  },
+     *  {
+     *   id: 'grid',
+     *   label: 'Grid'
+     *  }
+     * ]
      */
     items?: INavItem[];
     /**

package/ui/list/Steps/Steps.d.ts

@@ -2,34 +2,46 @@ import React from 'react';
 /**
  * Компонент Steps предоставляет шаги для выполнения определенного процесса.
  **/
-interface IStepsProps {
-    stepItems: IStepItem[];
+export interface IStepsProps extends IUiComponent {
+    stepItems: number | IStepItem[];
     currentStep: number;
     isChangeable?: boolean;
-    className?: CssClassName;
     onChange?: (index: number) => void;
+    showDivider?: boolean;
+    stepTitleOrientation?: Orientation;
+    stepItemView?: React.ReactNode;
 }
 export interface IStepsViewProps {
     className?: CssClassName;
     children?: React.ReactNode;
 }
-export interface IStepItemViewProps {
+export interface IStepItemViewProps extends Pick<IStepsProps, 'showDivider' | 'stepTitleOrientation' | 'onChange'>, IUiComponent {
     stepItem: IStepItem;
-    className?: CssClassName;
     index: number;
     status: string;
     disabled: boolean;
-    onChange: () => void;
+    showDivider?: boolean;
 }
 export interface IStepItem {
+    id: number;
     title?: string;
     subtitle?: string;
     description?: string;
+    status?: string;
     icon?: string | React.ReactNode;
     isError?: boolean;
 }
+export declare const ERROR_STATUS = "error";
+export declare const WAIT_STATUS = "wait";
+export declare const ACTIVE_STATUS = "active";
+export declare const FINISH_STATUS = "finish";
+export declare const HORIZONTAL_STEP_LAYOUT = "horizontal";
+export declare const VERTICAL_STEP_LAYOUT = "vertical";
 declare function Steps(props: IStepsProps): JSX.Element;
 declare namespace Steps {
-    var defaultProps: {};
+    var defaultProps: {
+        showDivider: boolean;
+        stepTitleOrientation: string;
+    };
 }
 export default Steps;

package/ui/list/Steps/Steps.js

@@ -1,38 +1,58 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
+exports.VERTICAL_STEP_LAYOUT = exports.HORIZONTAL_STEP_LAYOUT = exports.FINISH_STATUS = exports.ACTIVE_STATUS = exports.WAIT_STATUS = exports.ERROR_STATUS = void 0;
 var react_1 = require("react");
+var range_1 = __importDefault(require("lodash-es/range"));
 var hooks_1 = require("../../../hooks");
+exports.ERROR_STATUS = 'error';
+exports.WAIT_STATUS = 'wait';
+exports.ACTIVE_STATUS = 'active';
+exports.FINISH_STATUS = 'finish';
+exports.HORIZONTAL_STEP_LAYOUT = 'horizontal';
+exports.VERTICAL_STEP_LAYOUT = 'vertical';
+var getStepStatus = function (index, stepItem, currentStep) {
+    if (stepItem.isError) {
+        return exports.ERROR_STATUS;
+    }
+    if (currentStep < index) {
+        return exports.WAIT_STATUS;
+    }
+    if (currentStep === index) {
+        return exports.ACTIVE_STATUS;
+    }
+    return exports.FINISH_STATUS;
+};
 function Steps(props) {
+    var components = (0, hooks_1.useComponents)();
     var _a = (0, react_1.useState)(false), isChangeable = _a[0], setIsChangeable = _a[1];
     (0, react_1.useEffect)(function () { return setIsChangeable(props.isChangeable); }, [props.isChangeable]);
-    function getStepStatus(index, stepItem) {
-        if (stepItem.isError) {
-            return 'error';
-        }
-        if (props.currentStep < index) {
-            return 'wait';
-        }
-        if (props.currentStep === index) {
-            return 'active';
+    var toStep = (0, react_1.useCallback)(function (stepItem, index) { return components.ui.renderView(props.stepItemView || 'list.StepItemView', {
+        key: stepItem.id,
+        stepItem: stepItem,
+        index: index + 1,
+        status: (stepItem === null || stepItem === void 0 ? void 0 : stepItem.status) || getStepStatus(index, stepItem, props.currentStep),
+        disabled: !isChangeable,
+        showDivider: props.showDivider,
+        stepTitleOrientation: props.stepTitleOrientation,
+        onChange: function () {
+            if (isChangeable) {
+                props.onChange(index);
+            }
         }
-        return 'finish';
-    }
-    return (0, hooks_1.useComponents)().ui.renderView('list.StepsView', {
+    }); }, [components.ui, isChangeable, props]);
+    return components.ui.renderView(props.view || 'list.StepsView', {
         className: props.className,
-        children: props.stepItems.map(
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        function (stepItem, index) { return (0, hooks_1.useComponents)().ui.renderView('list.StepItemView', {
-            stepItem: stepItem,
-            index: index + 1,
-            status: getStepStatus(index, stepItem),
-            disabled: !isChangeable,
-            onChange: function () {
-                if (isChangeable) {
-                    props.onChange(index);
-                }
-            }
-        }); })
+        children: (Array.isArray(props.stepItems)
+            ? props.stepItems
+            : (0, range_1["default"])(props.stepItems || 0))
+            .map(toStep)
     });
 }
-Steps.defaultProps = {};
 exports["default"] = Steps;
+Steps.defaultProps = {
+    showDivider: true,
+    stepTitleOrientation: 'vertical'
+};

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

@@ -1,39 +1,40 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { ITreeProps } from '@steroidsjs/core/ui/nav/Tree/Tree';
+import { IPreparedTreeItem, ITreeItem } from '../../../hooks/useTree';
 import { IColumnViewProps, IGridColumn, IGridProps } from '../Grid/Grid';
-export interface ITreeColumnViewProps extends IColumnViewProps {
-    item: {
-        onTreeItemClick?: (uniqueId: string, item: {
-            [key: string]: any;
-        }) => void;
-        [key: string]: any;
-    };
-}
-export interface ITreeTableItem {
-    /**
-     * Идентификатор узла
-     */
-    id?: string | number;
-    /**
-     * Вложенные элементы
-     * @example items: [{id: 3, name: 'Ivan'}]
-     */
-    items?: any[];
-    /**
-     * Уникальный идентификатор,
-     * используется для сохранения состояния открыта или закрыта ячейка
-     */
-    uniqueId?: string;
-}
-export interface ITreeTableProps extends Omit<IGridProps, 'items'> {
-    /**
-     * Элементы коллекции
-     * @example [{id: 1, name: 'Jane'}, {id: 2, name: 'John', items: [...]}]
-     */
-    items?: ITreeTableItem[];
+export interface ITreeColumnViewProps extends IColumnViewProps, Pick<ITreeTableProps, 'levelPadding' | 'customIcon'> {
+    item: IPreparedTreeItem;
 }
-export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[]) => IGridColumn[];
 /**
  * TreeTable
+ *
  * Компонент для представления данных коллекции в виде иерархической структуры.
  */
-export default function TreeTable(props: ITreeTableProps): JSX.Element;
+export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreeProps, 'alwaysOpened' | 'levelPadding' | 'customIcon'> {
+    /**
+     * Элементы коллекции
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   name: 'Jane'
+     *  },
+     *  {
+     *   id: 2,
+     *   name: 'John',
+     *   items: [...]
+     *  }
+     * ]
+     */
+    items?: ITreeItem[];
+    customIcon?: string | React.ReactElement;
+}
+export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[], levelPadding: string | number, customIcon?: string | React.ReactElement) => IGridColumn[];
+declare function TreeTable(props: ITreeTableProps): JSX.Element;
+declare namespace TreeTable {
+    var defaultProps: {
+        levelPadding: number;
+        alwaysOpened: boolean;
+    };
+}
+export default TreeTable;

package/ui/list/TreeTable/TreeTable.js

@@ -50,24 +50,35 @@ exports.addTreeColumnFieldsToFirstColumn = void 0;
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var merge_1 = __importDefault(require("lodash-es/merge"));
+var list_1 = require("@steroidsjs/core/reducers/list");
+var useTree_1 = __importDefault(require("../../../hooks/useTree"));
 var Grid_1 = __importDefault(require("../Grid"));
+var useSelector_1 = __importDefault(require("../../../hooks/useSelector"));
 var TREE_COLUMN_VIEW_FIELDS = {
     valueView: 'TreeColumnView',
     headerClassName: 'TreeColumnHeader'
 };
-var addTreeColumnFieldsToFirstColumn = function (columns) {
+var addTreeColumnFieldsToFirstColumn = function (columns, levelPadding, customIcon) {
     var newColumns = __spreadArray([], columns, true);
     // Add tree view to the first column
-    (0, merge_1["default"])(newColumns[0], TREE_COLUMN_VIEW_FIELDS);
+    (0, merge_1["default"])(newColumns[0], __assign(__assign({}, TREE_COLUMN_VIEW_FIELDS), { levelPadding: levelPadding, customIcon: customIcon }));
     return newColumns;
 };
 exports.addTreeColumnFieldsToFirstColumn = addTreeColumnFieldsToFirstColumn;
-/**
- * TreeTable
- * Компонент для представления данных коллекции в виде иерархической структуры.
- */
 function TreeTable(props) {
-    var columns = (0, react_1.useMemo)(function () { return (0, exports.addTreeColumnFieldsToFirstColumn)(props.columns); }, [props.columns]);
-    return (React.createElement(Grid_1["default"], __assign({}, props, { columns: columns, items: props.items, itemsIndexing: false, hasTreeItems: true })));
+    var columns = (0, react_1.useMemo)(function () { return (0, exports.addTreeColumnFieldsToFirstColumn)(props.columns, props.levelPadding, props.customIcon); }, [props.columns, props.customIcon, props.levelPadding]);
+    var list = (0, useSelector_1["default"])(function (state) { return (0, list_1.getList)(state, props.listId); });
+    var treeItems = (0, useTree_1["default"])({
+        items: props.items,
+        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
+    }).treeItems;
+    return (React.createElement(Grid_1["default"], __assign({}, props, { columns: columns, items: treeItems, itemsIndexing: false })));
 }
 exports["default"] = TreeTable;
+TreeTable.defaultProps = {
+    levelPadding: 32,
+    alwaysOpened: false
+};

package/ui/modal/Modal/Modal.d.ts

@@ -21,7 +21,13 @@ export interface IModalProps {
     componentProps?: any;
     /**
      * Коллекция кнопок, которая отобразится в нижней секции Modal
-     * @example [{label: __(('Закрыть')), onClick: () => props.onClose()}]
+     * @example
+     * [
+     *  {
+     *   label: __(('Закрыть')),
+     *   onClick: () => props.onClose()
+     *  }
+     * ]
      */
     buttons?: IButtonProps[];
     /**