@steroidsjs/core 3.0.90 → 3.0.92

package/actions/list.js

@@ -42,26 +42,6 @@ exports.LIST_CHANGE_ACTION = '@list/change_action';
 exports.LIST_SELECT_ITEM = '@list/select_item';
 //const STORAGE_LAYOUT_KEY_PREFIX = 'listLayout_';
 var lazyTimers = {};
-var createList = function (listId, props) { return ({
-    action: props.action || props.action === '' ? props.action : null,
-    actionMethod: props.actionMethod || 'get',
-    onFetch: props.onFetch,
-    onError: props.onError,
-    condition: props.condition,
-    scope: props.scope,
-    total: props.total || null,
-    items: null,
-    sourceItems: props.items || null,
-    isRemote: !props.items,
-    loadMore: props._pagination.loadMore,
-    primaryKey: props.primaryKey,
-    listId: listId,
-    formId: (0, get_1["default"])(props, 'searchForm.formId') || listId,
-    pageAttribute: (0, get_1["default"])(props, '_pagination.attribute') || null,
-    pageSizeAttribute: (0, get_1["default"])(props, '_paginationSize.attribute') || null,
-    sortAttribute: (0, get_1["default"])(props, '_sort.attribute') || null,
-    layoutAttribute: (0, get_1["default"])(props, '_layout.attribute') || null
-}); };
 var httpFetchHandler = function (list, query, _a, options) {
     var http = _a.http;
     if (options === void 0) { options = {}; }

package/actions/notifications.d.ts

@@ -9,5 +9,8 @@ export declare const closeNotification: (id?: string | null) => {
     type: string;
     id: string;
 };
-export declare const showNotification: (message: string, level?: ColorName, params?: IShowNotificationParameters) => (dispatch: any) => void;
+export declare const showNotification: (message: string | {
+    message: string;
+    description?: string;
+}, level?: ColorName, params?: IShowNotificationParameters) => (dispatch: any) => void;
 export declare const setFlashes: (flashes: any) => ((dispatch: any) => void)[][];

package/components/ClientStorageComponent.d.ts

@@ -1,11 +1,6 @@
 export interface IClientStorageComponentConfig {
     /**
-     * Кастомный домен для куки
-     */
-    domain?: string;
-    /**
-     *  Автоматически устанавливает куку для всех поддоменов текущего домена,
-     *  но только если параметр domain не указан явно
+     * Позволяет использовать cookie на всех поддоменах (по умолчанию, false)
      */
     shareBetweenSubdomains?: boolean;
     /**
@@ -49,7 +44,6 @@ export default class ClientStorageComponent implements IClientStorageComponent {
     STORAGE_SESSION: any;
     localStorageAvailable: boolean;
     sessionStorageAvailable: boolean;
-    domain?: string;
     shareBetweenSubdomains?: boolean;
     private _ssrCookie;
     constructor(components: any, config: any);

package/components/ClientStorageComponent.js

@@ -62,7 +62,6 @@ var ClientStorageComponent = /** @class */ (function () {
                 this.sessionStorageAvailable = false;
             }
         }
-        this.domain = (config === null || config === void 0 ? void 0 : config.domain) || null;
         this.shareBetweenSubdomains = (_a = config === null || config === void 0 ? void 0 : config.shareBetweenSubdomains) !== null && _a !== void 0 ? _a : false;
         this._ssrCookie = config === null || config === void 0 ? void 0 : config.ssrCookie;
     }
@@ -88,10 +87,13 @@ var ClientStorageComponent = /** @class */ (function () {
             window.sessionStorage.setItem(name, value);
         }
         else {
+            var domain = this._getDomain();
             var options = {
-                expires: expires,
-                domain: this._getDomain()
+                expires: expires
             };
+            if (domain) {
+                options.domain = domain;
+            }
             if (expires && process.env.IS_SSR) {
                 options.expires = (0, dayjs_1["default"])().add(options.expires, 'days').utc().toDate();
             }
@@ -108,27 +110,27 @@ var ClientStorageComponent = /** @class */ (function () {
             window.sessionStorage.removeItem(name);
         }
         else {
-            var options = {
-                domain: this._getDomain()
-            };
+            var domain = this._getDomain();
+            var options = {};
+            if (domain) {
+                options.domain = domain;
+            }
             process.env.IS_SSR ? this._ssrCookie.remove(name, options) : cookie.remove(name, options);
         }
     };
     ClientStorageComponent.prototype._getDomain = function () {
-        if (this.domain) {
-            return this.domain;
-        }
-        var host = typeof window !== 'undefined' ? window.location.hostname : '';
         if (this.shareBetweenSubdomains) {
+            var host = typeof window !== 'undefined' ? window.location.hostname : '';
             var isIp = /^\d{1,3}(\.\d{1,3}){3}$/.test(host);
-            if (!isIp) {
+            var isLocalhost = host === 'localhost';
+            if (!isIp && !isLocalhost) {
                 return host
                     .split('.')
                     .slice(-2)
                     .join('.');
             }
         }
-        return host;
+        return null;
     };
     return ClientStorageComponent;
 }());

package/docs-autogen-result.json

@@ -298,18 +298,10 @@
                 "IClientStorageComponentConfig"
             ],
             "properties": [
-                {
-                    "name": "domain",
-                    "decorators": [],
-                    "description": "Кастомный домен для куки",
-                    "required": false,
-                    "type": "string",
-                    "example": null
-                },
                 {
                     "name": "shareBetweenSubdomains",
                     "decorators": [],
-                    "description": " Автоматически устанавливает куку для всех поддоменов текущего домена,\n но только если параметр domain не указан явно",
+                    "description": "Позволяет использовать cookie на всех поддоменах (по умолчанию, false)",
                     "required": false,
                     "type": "boolean",
                     "example": null
@@ -429,18 +421,10 @@
             "defaultProps": null,
             "extends": [],
             "properties": [
-                {
-                    "name": "domain",
-                    "decorators": [],
-                    "description": "Кастомный домен для куки",
-                    "required": false,
-                    "type": "string",
-                    "example": null
-                },
                 {
                     "name": "shareBetweenSubdomains",
                     "decorators": [],
-                    "description": " Автоматически устанавливает куку для всех поддоменов текущего домена,\n но только если параметр domain не указан явно",
+                    "description": "Позволяет использовать cookie на всех поддоменах (по умолчанию, false)",
                     "required": false,
                     "type": "boolean",
                     "example": null
@@ -6241,7 +6225,7 @@
                 {
                     "name": "description",
                     "decorators": [],
-                    "description": "Дополнительное содрежание сообщения.",
+                    "description": "Дополнительное содержание сообщения.",
                     "required": false,
                     "type": "string",
                     "example": "'Please, check your email.'",
@@ -6360,7 +6344,7 @@
                 {
                     "name": "description",
                     "decorators": [],
-                    "description": "Дополнительное содрежание сообщения.",
+                    "description": "Дополнительное содержание сообщения.",
                     "required": false,
                     "type": "string",
                     "example": "'Please, check your email.'"
@@ -19628,6 +19612,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "itemViewProps",
+                    "decorators": [],
+                    "description": "Пропсы для отображения элемента",
+                    "required": false,
+                    "type": "any",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "items",
                     "decorators": [],
@@ -20162,6 +20155,14 @@
                     "type": "React.ReactNode | {}",
                     "example": null
                 },
+                {
+                    "name": "itemViewProps",
+                    "decorators": [],
+                    "description": "Пропсы для отображения элемента",
+                    "required": false,
+                    "type": "any",
+                    "example": null
+                },
                 {
                     "name": "items",
                     "decorators": [],
@@ -32365,6 +32366,14 @@
                 "INotificationItem"
             ],
             "properties": [
+                {
+                    "name": "description",
+                    "decorators": [],
+                    "description": "Дополнительное содержание сообщения.",
+                    "required": false,
+                    "type": "string",
+                    "example": "'Успешно сохранено'"
+                },
                 {
                     "name": "id",
                     "decorators": [],
@@ -33553,6 +33562,15 @@
                     "type": "ITooltipStylePosition",
                     "example": null,
                     "defaultValue": null
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Пропсы для отображения элемента",
+                    "required": false,
+                    "type": "any",
+                    "example": null,
+                    "defaultValue": null
                 }
             ],
             "methods": [
@@ -33710,6 +33728,14 @@
                     "required": true,
                     "type": "ITooltipStylePosition",
                     "example": null
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Пропсы для отображения элемента",
+                    "required": false,
+                    "type": "any",
+                    "example": null
                 }
             ],
             "methods": [
@@ -37901,12 +37927,14 @@
             "defaultProps": {
                 "alwaysOpened": "false",
                 "collapseChildItems": "false",
+                "hasAlternatingColors": "false",
                 "levelPadding": "32",
-                "saveInClientStorage": "false"
+                "saveInClientStorage": "false",
+                "size": "'md'"
             },
             "extends": [
                 "Omit<IGridProps",
-                "'items'>",
+                "'items' | 'itemsIndexing'>",
                 "Pick<ITreeProps",
                 "'alwaysOpened' | 'levelPadding' | 'customIcon' | 'saveInClientStorage' | 'collapseChildItems'>"
             ],
@@ -37956,6 +37984,24 @@
                     "example": "[\n {\n  id: 1,\n  name: 'Jane'\n },\n {\n  id: 2,\n  name: 'John',\n  items: [...]\n }\n]",
                     "defaultValue": null
                 },
+                {
+                    "name": "itemsIndexing",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "never",
+                    "example": null,
+                    "defaultValue": null
+                },
+                {
+                    "name": "itemsKey",
+                    "decorators": [],
+                    "description": "Ключ для доступа к вложенным элементам узла",
+                    "required": false,
+                    "type": "string",
+                    "example": "'items'",
+                    "defaultValue": null
+                },
                 {
                     "name": "levelPadding",
                     "decorators": [],
@@ -41348,18 +41394,10 @@
             "description": "Слой хранения данных в браузере (cookie, local/session storage) или ReactNative",
             "tags": {},
             "properties": [
-                {
-                    "name": "domain",
-                    "decorators": [],
-                    "description": "Кастомный домен для куки",
-                    "required": false,
-                    "type": "string",
-                    "example": null
-                },
                 {
                     "name": "shareBetweenSubdomains",
                     "decorators": [],
-                    "description": " Автоматически устанавливает куку для всех поддоменов текущего домена,\n но только если параметр domain не указан явно",
+                    "description": "Позволяет использовать cookie на всех поддоменах (по умолчанию, false)",
                     "required": false,
                     "type": "boolean",
                     "example": null

package/en.json

@@ -1045,9 +1045,9 @@
     "\nКомпонент поля ввода текста с маской.\n": "A text input field component with a mask.",
     "\nКомпонент Tooltip предоставляет всплывающую подсказку для дочерних элементов.\nВнутри компонента, то есть между тегами Tooltip можно использовать только html теги, например div, span и тд\n": "The Tooltip component provides a popup hint for child elements.\nInside the component, that is, between the Tooltip tags, you can only use HTML tags, e.g., div, span, etc.",
     "Логическое значение, указывающее, есть ли еще элементы в списке с бесконечным скроллом": "",
-    "Кастомный домен для куки": "",
-    " Автоматически устанавливает куку для всех поддоменов текущего домена,\n но только если параметр domain не указан явно": "",
+    "Позволяет использовать cookie на всех поддоменах (по умолчанию, false)": "",
     "Задержка в мс": "",
+    "Дополнительное содержание сообщения.": "",
     "Задержка применения введённого значения": "",
     "Флаг, который указывает, что высота поля должна быть равна высоте контента": ""
 }

package/hooks/useList.js

@@ -280,7 +280,7 @@ function useList(config) {
         dispatch([
             (0, list_2.listSetItems)(config.listId, config.items),
         ]);
-    }, [dispatch, config.items, config.listId]);
+    }, [dispatch, config.items, config.listId, list === null || list === void 0 ? void 0 : list.isFetched]);
     // Check change action
     var prevAction = (0, react_use_1.usePrevious)(config.action);
     (0, react_use_1.useUpdateEffect)(function () {

package/package.json

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

package/ui/content/Alert/Alert.d.ts

@@ -30,7 +30,7 @@ export interface IAlertProps extends IUiComponent {
      * @example 'Sending is confirmed!'
      */
     message?: string;
-    /** Дополнительное содрежание сообщения.
+    /** Дополнительное содержание сообщения.
      * @example 'Please, check your email.'
      */
     description?: string;

package/ui/form/DropDownField/DropDownField.d.ts

@@ -174,6 +174,10 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
      * Сигнал, запрещающий отправку запроса на получение данных
      */
     isFetchDisabled?: boolean;
+    /**
+     * Пропсы для отображения элемента
+     */
+    itemViewProps?: CustomViewProps;
     [key: string]: any;
 }
 export interface IDropDownFieldViewProps extends IDropDownFieldProps {

package/ui/form/DropDownField/DropDownField.js

@@ -228,7 +228,8 @@ function DropDownField(props) {
         childIndex: item.id,
         toggleCollapse: toggleCollapse,
         isItemToSelectAll: item.id === (normalizedItemToSelectAll === null || normalizedItemToSelectAll === void 0 ? void 0 : normalizedItemToSelectAll.id),
-        isSelectedAll: isSelectedAll
+        isSelectedAll: isSelectedAll,
+        itemViewProps: props.itemViewProps
     }); };
     var renderItem = (0, react_1.useCallback)(function (item) {
         if (hasGroup && Array.isArray(item[props.groupAttribute])) {

package/ui/layout/Notifications/Notifications.d.ts

@@ -28,6 +28,10 @@ interface INotificationItem {
      * @example Сохранено!
      */
     message?: string;
+    /** Дополнительное содержание сообщения.
+     * @example 'Успешно сохранено'
+     */
+    description?: string;
     isClosing?: boolean;
 }
 /**

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

@@ -87,6 +87,10 @@ export interface ITooltipProps {
      * Дополнительный CSS-класс для элемента отображения
      */
     className?: CssClassName;
+    /**
+     * Пропсы для отображения элемента
+     */
+    viewProps?: CustomViewProps;
     [key: string]: any;
 }
 export interface ITooltipViewProps extends ITooltipProps {

package/ui/layout/Tooltip/Tooltip.js

@@ -77,7 +77,7 @@ function Tooltip(props) {
             })
             : (React.createElement("span", { ref: childRef, onFocus: onShow, onMouseOver: onShow, onBlur: onHide, onMouseOut: onHide }, props.children)),
         isComponentExist && (React.createElement(TooltipPortalInner_1["default"], null,
-            React.createElement(TooltipView, { isTooltipVisible: isComponentVisible, content: props.content, position: position, style: style, arrowPosition: arrowPosition, calculatePosition: calculatePosition, className: props.className })))));
+            React.createElement(TooltipView, { isTooltipVisible: isComponentVisible, content: props.content, position: position, style: style, arrowPosition: arrowPosition, calculatePosition: calculatePosition, className: props.className, viewProps: props.viewProps })))));
 }
 Tooltip.defaultProps = {
     content: '',

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' | 'saveInClientStorage' | 'collapseChildItems'> {
+export interface ITreeTableProps extends Omit<IGridProps, 'items' | 'itemsIndexing'>, Pick<ITreeProps, 'alwaysOpened' | 'levelPadding' | 'customIcon' | 'saveInClientStorage' | 'collapseChildItems'> {
     /**
      * Элементы коллекции
      * @example
@@ -37,6 +37,12 @@ export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreePr
      * @example 'arrow'
      */
     customIcon?: string | React.ReactElement;
+    /**
+     * Ключ для доступа к вложенным элементам узла
+     * @example 'items'
+     */
+    itemsKey?: string;
+    itemsIndexing?: never;
 }
 export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[], levelPadding: string | number, customIcon?: string | React.ReactElement) => IGridColumn[];
 declare function TreeTable(props: ITreeTableProps): JSX.Element;
@@ -46,6 +52,8 @@ declare namespace TreeTable {
         alwaysOpened: boolean;
         saveInClientStorage: boolean;
         collapseChildItems: boolean;
+        size: string;
+        hasAlternatingColors: boolean;
     };
 }
 export default TreeTable;

package/ui/list/TreeTable/TreeTable.js

@@ -50,10 +50,13 @@ 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 Format_1 = __importDefault(require("@steroidsjs/core/ui/format/Format"));
+var ControlsColumn_1 = __importDefault(require("@steroidsjs/core/ui/list/ControlsColumn"));
+var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
+var isString_1 = __importDefault(require("lodash-es/isString"));
+var hooks_1 = require("@steroidsjs/core/hooks");
 var useTree_1 = __importDefault(require("../../../hooks/useTree"));
-var Grid_1 = __importDefault(require("../Grid"));
-var useSelector_1 = __importDefault(require("../../../hooks/useSelector"));
+var useList_1 = __importDefault(require("../../../hooks/useList"));
 var TREE_COLUMN_VIEW_FIELDS = {
     valueView: 'TreeColumnView',
     headerClassName: 'TreeColumnHeader'
@@ -66,25 +69,104 @@ var addTreeColumnFieldsToFirstColumn = function (columns, levelPadding, customIc
 };
 exports.addTreeColumnFieldsToFirstColumn = addTreeColumnFieldsToFirstColumn;
 function TreeTable(props) {
-    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"])({
+    var components = (0, hooks_1.useComponents)();
+    var mergedColumns = (0, react_1.useMemo)(function () { return (0, exports.addTreeColumnFieldsToFirstColumn)(props.columns, props.levelPadding, props.customIcon); }, [props.columns, props.customIcon, props.levelPadding]);
+    var _a = (0, useList_1["default"])({
+        listId: props.listId,
+        primaryKey: props.primaryKey,
+        action: props.action,
+        actionMethod: props.actionMethod,
+        pagination: props.pagination,
+        paginationSize: props.paginationSize,
+        infiniteScroll: props.infiniteScroll,
+        sort: props.sort,
+        layout: props.layout,
+        empty: props.empty,
+        searchForm: props.searchForm,
+        autoDestroy: props.autoDestroy,
+        onFetch: props.onFetch,
+        condition: props.condition,
+        addressBar: props.addressBar,
+        scope: props.scope,
+        query: props.query,
+        model: props.model,
+        searchModel: props.searchModel,
         items: props.items,
+        initialItems: props.initialItems,
+        initialTotal: props.initialTotal,
+        autoFetchOnFormChanges: props.autoFetchOnFormChanges
+    }), list = _a.list, model = _a.model, searchModel = _a.searchModel, paginationPosition = _a.paginationPosition, paginationSizePosition = _a.paginationSizePosition, layoutNamesPosition = _a.layoutNamesPosition, renderList = _a.renderList, renderLoading = _a.renderLoading, renderEmpty = _a.renderEmpty, renderPagination = _a.renderPagination, renderPaginationSize = _a.renderPaginationSize, renderLayoutNames = _a.renderLayoutNames, renderSearchForm = _a.renderSearchForm, renderInfiniteScroll = _a.renderInfiniteScroll, onFetch = _a.onFetch, onSort = _a.onSort, sort = _a.sort;
+    var items = (0, react_1.useMemo)(function () { return (list === null || list === void 0 ? void 0 : list.items) || []; }, [list === null || list === void 0 ? void 0 : list.items]);
+    var treeItems = (0, useTree_1["default"])({
+        items: 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,
         collapseChildItems: props.collapseChildItems,
         saveInClientStorage: props.saveInClientStorage,
         clientStorageId: props.listId,
-        isSinglePageItems: props.isSinglePageItems
+        isSinglePageItems: props.isSinglePageItems,
+        itemsKey: props.itemsKey
     }).treeItems;
-    return (React.createElement(Grid_1["default"], __assign({}, props, { columns: columns, items: treeItems, itemsIndexing: false })));
+    var renderLabel = (0, react_1.useCallback)(function (column) {
+        if (column.headerView) {
+            var HeaderView = column.headerView;
+            return (React.createElement(HeaderView, __assign({}, column, column.headerProps, { listId: props.listId })));
+        }
+        if (column.label || column.label === '') {
+            return column.label;
+        }
+        var attributeMeta = []
+            .concat((model === null || model === void 0 ? void 0 : model.attributes) || [])
+            .concat((searchModel === null || searchModel === void 0 ? void 0 : searchModel.attributes) || [])
+            .find(function (item) { return column.attribute && item.attribute === column.attribute; });
+        return attributeMeta ? attributeMeta.label : (0, upperFirst_1["default"])(column.attribute);
+    }, [model, props.listId, searchModel]);
+    var renderValue = (0, react_1.useCallback)(function (item, column) {
+        // Custom component
+        if (column.valueView) {
+            var isValueViewString = typeof column.valueView === 'string';
+            var ValueView = isValueViewString ? components.ui.getView("list.".concat(column.valueView)) : column.valueView;
+            var viewProps_1 = __assign(__assign(__assign({}, column), column.valueProps), { listId: props.listId, primaryKey: props.primaryKey, item: item, size: props.size });
+            if (isValueViewString) {
+                return components.ui.renderView(ValueView, viewProps_1);
+            }
+            return (React.createElement(ValueView, __assign({}, viewProps_1)));
+        }
+        return (React.createElement(Format_1["default"], __assign({ item: item, model: props.model }, column, (column.formatter || {}))));
+    }, [props.listId, props.model, props.primaryKey]);
+    // Columns
+    var columns = (0, react_1.useMemo)(function () { return []
+        .concat({
+        label: __('№'),
+        valueView: function (_a) {
+            var item = _a.item;
+            return item.index + 1;
+        },
+        visible: false
+    })
+        .concat(mergedColumns)
+        .concat({
+        valueView: ControlsColumn_1["default"],
+        valueProps: {
+            controls: props.controls
+        },
+        visible: !!props.controls
+    })
+        .map(function (column) { return ((0, isString_1["default"])(column) ? { attribute: column } : column); })
+        .filter(function (column) { return column.visible !== false; })
+        .map(function (column) { return (__assign(__assign({}, column), { label: renderLabel(column) })); }); }, [mergedColumns, props.controls, renderLabel]);
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { list: list, paginationPosition: paginationPosition, paginationSizePosition: paginationSizePosition, layoutNamesPosition: layoutNamesPosition, renderList: renderList, renderLoading: renderLoading, renderEmpty: renderEmpty, renderPagination: renderPagination, renderPaginationSize: renderPaginationSize, renderLayoutNames: renderLayoutNames, renderSearchForm: renderSearchForm, renderInfiniteScroll: renderInfiniteScroll, renderValue: renderValue, columns: columns, onFetch: onFetch, onSort: onSort, sort: sort, items: treeItems, searchForm: props.searchForm, listId: props.listId, isLoading: props.isLoading, size: props.size, hasAlternatingColors: props.hasAlternatingColors, className: props.className, primaryKey: props.primaryKey })); }, [treeItems, list, paginationPosition, paginationSizePosition, layoutNamesPosition, renderList, renderLoading, renderEmpty,
+        renderPagination, renderPaginationSize, renderLayoutNames, renderSearchForm, renderInfiniteScroll, renderValue,
+        columns, onFetch, onSort, sort, props.searchForm, props.listId, props.isLoading, props.size, props.hasAlternatingColors,
+        props.className, props.primaryKey, props.viewProps]);
+    return components.ui.renderView(props.view || 'list.GridView', viewProps);
 }
 exports["default"] = TreeTable;
 TreeTable.defaultProps = {
     levelPadding: 32,
     alwaysOpened: false,
     saveInClientStorage: false,
-    collapseChildItems: false
+    collapseChildItems: false,
+    size: 'md',
+    hasAlternatingColors: false
 };