@steroidsjs/core 3.0.0-beta.81 → 3.0.0-beta.83

package/ui/list/Grid/Grid.js

@@ -69,7 +69,8 @@ function Grid(props) {
         items: props.items,
         initialItems: props.initialItems,
         initialTotal: props.initialTotal,
-        autoFetchOnFormChanges: props.autoFetchOnFormChanges
+        autoFetchOnFormChanges: props.autoFetchOnFormChanges,
+        hasTreeItems: props.hasTreeItems
     }), 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/TreeTable/TreeTable.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+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 declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[]) => IGridColumn[];
+export default function TreeTable(props: ITreeTableProps): JSX.Element;

package/ui/list/TreeTable/TreeTable.js

@@ -0,0 +1,69 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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.addTreeColumnFieldsToFirstColumn = void 0;
+var React = __importStar(require("react"));
+var react_1 = require("react");
+var merge_1 = __importDefault(require("lodash-es/merge"));
+var Grid_1 = __importDefault(require("../Grid"));
+var TREE_COLUMN_VIEW_FIELDS = {
+    valueView: 'TreeColumnView',
+    headerClassName: 'TreeColumnHeader'
+};
+var addTreeColumnFieldsToFirstColumn = function (columns) {
+    var newColumns = __spreadArray([], columns, true);
+    // Add tree view to the first column
+    (0, merge_1["default"])(newColumns[0], TREE_COLUMN_VIEW_FIELDS);
+    return newColumns;
+};
+exports.addTreeColumnFieldsToFirstColumn = addTreeColumnFieldsToFirstColumn;
+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 })));
+}
+exports["default"] = TreeTable;

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

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

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

package/ui/nav/Tree/Tree.js

@@ -43,9 +43,9 @@ var omit_1 = __importDefault(require("lodash-es/omit"));
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var keys_1 = __importDefault(require("lodash-es/keys"));
 var react_1 = require("react");
+var list_1 = require("../../../utils/list");
 var hooks_1 = require("../../../hooks");
 var router_1 = require("../../../reducers/router");
-var resolveId = function (item, index, parentId) { return (parentId ? parentId + '.' : '') + String(item.id || index); };
 function Tree(props) {
     var components = (0, hooks_1.useComponents)();
     var STORAGE_KEY_PREFIX = 'tree_';
@@ -90,7 +90,7 @@ function Tree(props) {
             return null;
         }
         (sourceItems || []).forEach(function (item, index) {
-            var uniqId = resolveId(item, index, parentId);
+            var uniqId = (0, list_1.getTreeItemUniqId)(item, index, parentId);
             if (!foundItem && (item.id === itemId || uniqId === itemId)) {
                 foundItem = __assign(__assign({}, item), { uniqId: uniqId, level: level });
             }
@@ -105,7 +105,7 @@ function Tree(props) {
         if (level === void 0) { level = 1; }
         var opened = {};
         (sourceItems || []).forEach(function (item, index) {
-            var uniqId = resolveId(item, index, parentId);
+            var uniqId = (0, list_1.getTreeItemUniqId)(item, index, parentId);
             if (props.autoOpenLevels >= level) {
                 opened[uniqId] = true;
             }
@@ -159,7 +159,7 @@ function Tree(props) {
                 return [];
             }
             (sourceItems || []).forEach(function (item, index) {
-                var uniqId = resolveId(item, index, parentId);
+                var uniqId = (0, list_1.getTreeItemUniqId)(item, index, parentId);
                 var isOpened = props.alwaysOpened || !!openedItems[uniqId];
                 var hasItems = item[props.itemsKey] && item[props.itemsKey].length > 0;
                 if (props.level && (level === props.level - 1)) {

package/utils/calculateComponentAbsolutePosition.d.ts

@@ -0,0 +1,6 @@
+import { IComponentArrowPosition, IComponentStylePosition } from '../hooks/useAbsolutePositioning';
+export default function calculateComponentAbsolutePosition(gap: any, position: any, parentRef: any, componentSize: any, arrowSize?: any, hasAutoPositioning?: boolean): {
+    style: IComponentStylePosition;
+    position: any;
+    arrowPosition: IComponentArrowPosition;
+};

package/{ui/layout/Tooltip/calculate.js → utils/calculateComponentAbsolutePosition.js}

@@ -1,6 +1,9 @@
 "use strict";
 exports.__esModule = true;
-function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
+var useAbsolutePositioning_1 = require("../hooks/useAbsolutePositioning");
+function calculateComponentAbsolutePosition(gap, position, parentRef, componentSize, arrowSize, hasAutoPositioning) {
+    if (arrowSize === void 0) { arrowSize = null; }
+    if (hasAutoPositioning === void 0) { hasAutoPositioning = true; }
     if (process.env.IS_SSR) {
         return null;
     }
@@ -11,54 +14,57 @@ function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
     parentDimensions.top += window.scrollY;
     // eslint-disable-next-line default-case
     switch (position) {
-        case 'top':
-        case 'topLeft':
-        case 'topRight':
+        case useAbsolutePositioning_1.Position.TOP:
+        case useAbsolutePositioning_1.Position.TOP_LEFT:
+        case useAbsolutePositioning_1.Position.TOP_RIGHT:
             // Проверка - выходит ли tooltip за верхний край страницы?
             // Если да - меняем позицию на bottom
-            if ((parentDimensions.top - window.scrollY) <= Math.round(tooltipSize.height + gap)) {
+            if (hasAutoPositioning
+                && ((parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + gap))) {
                 style.top = parentDimensions.top + parentDimensions.height;
-                position = position.replace('top', 'bottom');
+                position = position.replace(useAbsolutePositioning_1.Position.TOP, useAbsolutePositioning_1.Position.BOTTOM);
             }
             else {
-                style.top = parentDimensions.top - tooltipSize.height;
+                style.top = parentDimensions.top - componentSize.height;
             }
             break;
-        case 'bottom':
-        case 'bottomLeft':
-        case 'bottomRight':
+        case useAbsolutePositioning_1.Position.BOTTOM:
+        case useAbsolutePositioning_1.Position.BOTTOM_LEFT:
+        case useAbsolutePositioning_1.Position.BOTTOM_RIGHT:
             /// Проверка - выходит ли tooltip за нижний край страницы?
             // Если да - меняем позицию на top
-            if ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY))
-                <= Math.round(tooltipSize.height + gap)) {
-                style.top = parentDimensions.top - tooltipSize.height;
-                position = position.replace('bottom', 'top');
+            if (hasAutoPositioning
+                && ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY))
+                    <= Math.round(componentSize.height + gap))) {
+                style.top = parentDimensions.top - componentSize.height;
+                position = position.replace(useAbsolutePositioning_1.Position.BOTTOM, useAbsolutePositioning_1.Position.TOP);
             }
             else {
                 style.top = parentDimensions.top + parentDimensions.height;
             }
             break;
-        case 'left':
-        case 'leftTop':
-        case 'leftBottom':
+        case useAbsolutePositioning_1.Position.LEFT:
+        case useAbsolutePositioning_1.Position.LEFT_TOP:
+        case useAbsolutePositioning_1.Position.LEFT_BOTTOM:
             // Проверка - выходит ли tooltip за левый край страницы?
             // Если да - меняем позицию на right
-            if (parentDimensions.left <= Math.round(tooltipSize.width + gap)) {
+            if (hasAutoPositioning && (parentDimensions.left <= Math.round(componentSize.width + gap))) {
                 style.left = parentDimensions.right;
-                position = position.replace('left', 'right');
+                position = position.replace(useAbsolutePositioning_1.Position.LEFT, useAbsolutePositioning_1.Position.RIGHT);
             }
             else {
-                style.left = parentDimensions.left - tooltipSize.width;
+                style.left = parentDimensions.left - componentSize.width;
             }
             break;
-        case 'right':
-        case 'rightTop':
-        case 'rightBottom':
+        case useAbsolutePositioning_1.Position.RIGHT:
+        case useAbsolutePositioning_1.Position.RIGHT_TOP:
+        case useAbsolutePositioning_1.Position.RIGHT_BOTTOM:
             // Проверка - выходит ли tooltip за правый край страницы?
             // Если да - меняем позицию на left
-            if (document.body.clientWidth - parentDimensions.right <= Math.round(tooltipSize.width + gap)) {
-                style.left = parentDimensions.left - tooltipSize.width;
-                position = position.replace('right', 'left');
+            if (hasAutoPositioning
+                && (document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + gap))) {
+                style.left = parentDimensions.left - componentSize.width;
+                position = position.replace(useAbsolutePositioning_1.Position.RIGHT, useAbsolutePositioning_1.Position.LEFT);
             }
             else {
                 style.left = parentDimensions.right;
@@ -67,45 +73,45 @@ function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
     }
     // eslint-disable-next-line default-case
     switch (position) {
-        case 'top':
-        case 'bottom':
+        case useAbsolutePositioning_1.Position.TOP:
+        case useAbsolutePositioning_1.Position.BOTTOM:
             // Выравнивание по середине
-            style.left = (parentDimensions.left + (parentDimensions.width / 2)) - (tooltipSize.width / 2);
+            style.left = (parentDimensions.left + (parentDimensions.width / 2)) - (componentSize.width / 2);
             break;
-        case 'topLeft':
-        case 'bottomLeft':
+        case useAbsolutePositioning_1.Position.TOP_LEFT:
+        case useAbsolutePositioning_1.Position.BOTTOM_LEFT:
             // Ширина tooltip больше родителя - стрелка на середину родителя
             style.left = parentDimensions.left;
-            if (parentDimensions.width < tooltipSize.width) {
+            if (arrowSize && (parentDimensions.width < componentSize.width)) {
                 arrowPosition = { left: parentDimensions.width / 2 };
             }
             break;
-        case 'topRight':
-        case 'bottomRight':
+        case useAbsolutePositioning_1.Position.TOP_RIGHT:
+        case useAbsolutePositioning_1.Position.BOTTOM_RIGHT:
             // Ширина tooltip больше родителя - стрелка на середину родителя
-            style.left = parentDimensions.right - tooltipSize.width;
-            if (parentDimensions.width < tooltipSize.width) {
+            style.left = parentDimensions.right - componentSize.width;
+            if (arrowSize && (parentDimensions.width < componentSize.width)) {
                 arrowPosition = {
                     left: null,
                     right: (parentDimensions.width / 2) - (arrowSize.width / 2)
                 };
             }
             break;
-        case 'left':
-        case 'right':
-            style.top = (parentDimensions.top + (parentDimensions.height / 2)) - (tooltipSize.height / 2);
+        case useAbsolutePositioning_1.Position.LEFT:
+        case useAbsolutePositioning_1.Position.RIGHT:
+            style.top = (parentDimensions.top + (parentDimensions.height / 2)) - (componentSize.height / 2);
             break;
-        case 'leftTop':
-        case 'rightTop':
+        case useAbsolutePositioning_1.Position.LEFT_TOP:
+        case useAbsolutePositioning_1.Position.RIGHT_TOP:
             style.top = parentDimensions.top;
-            if (parentDimensions.height < (tooltipSize.height)) {
+            if (arrowSize && (parentDimensions.height < componentSize.height)) {
                 arrowPosition = { top: parentDimensions.height / 2 };
             }
             break;
-        case 'leftBottom':
-        case 'rightBottom':
-            style.top = parentDimensions.top + parentDimensions.height - tooltipSize.height;
-            if (parentDimensions.height < tooltipSize.height) {
+        case useAbsolutePositioning_1.Position.LEFT_BOTTOM:
+        case useAbsolutePositioning_1.Position.RIGHT_BOTTOM:
+            style.top = parentDimensions.top + parentDimensions.height - componentSize.height;
+            if (arrowSize && (parentDimensions.height < componentSize.height)) {
                 arrowPosition = {
                     bottom: (parentDimensions.height / 2) - (arrowSize.height / 2)
                 };
@@ -115,20 +121,20 @@ function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
     // Проверка - при позиционировании top/bottom tooltip не выходит за пределы страницы по горизонтали
     if (position.includes('top') || position.includes('bottom')) {
         if (!position.includes('Left')
-            && (style.left < 0 || parentDimensions.left <= Math.round((tooltipSize.width - parentDimensions.width) + gap))) {
+            && (style.left < 0 || parentDimensions.left <= Math.round((componentSize.width - parentDimensions.width) + gap))) {
             style.right = null;
             position = position.replace('Right', 'Left');
             // Если ширина tooltip больше ширины родителя - выставить стрелку на середину родителя
-            if (parentDimensions.left < tooltipSize.width) {
+            if (parentDimensions.left < componentSize.width) {
                 arrowPosition = { left: parentDimensions.width / 2 };
             }
             style.left = parentDimensions.left;
         }
-        if (!position.includes('Right')
+        else if (!position.includes('Right')
             && (document.body.clientWidth - parentDimensions.right
-                <= Math.round((tooltipSize.width - parentDimensions.width) + gap))) {
+                <= Math.round((componentSize.width - parentDimensions.width) + gap))) {
             position = position.replace('Left', 'Right');
-            if (parentDimensions.width < tooltipSize.width) {
+            if (arrowSize && (parentDimensions.width < componentSize.width)) {
                 arrowPosition = {
                     left: null,
                     right: (parentDimensions.width / 2) - (arrowSize.width / 2)
@@ -141,25 +147,25 @@ function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
     // Проверка - при позиционировании left/right tooltip не выходит за пределы страницы по вертикали
     if (position.includes('left') || position.includes('right')) {
         if (!position.includes('Top')
-            && parentDimensions.top - window.scrollY <= Math.round((tooltipSize.height - parentDimensions.height) + gap)) {
+            && parentDimensions.top - window.scrollY <= Math.round((componentSize.height - parentDimensions.height) + gap)) {
             position = position.replace('Bottom', 'Top');
-            if (parentDimensions.height < tooltipSize.height) {
+            if (parentDimensions.height < componentSize.height) {
                 arrowPosition = { top: parentDimensions.height / 2 };
             }
             style.top = parentDimensions.top;
         }
-        if (!position.includes('Bottom')
+        else if (!position.includes('Bottom')
             && (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)
-                <= Math.round((tooltipSize.height - parentDimensions.height) + gap))) {
+                <= Math.round((componentSize.height - parentDimensions.height) + gap))) {
             position = position.replace('Top', 'Bottom');
-            if (parentDimensions.height < tooltipSize.height) {
+            if (arrowSize && (parentDimensions.height < componentSize.height)) {
                 arrowPosition = {
                     bottom: (parentDimensions.height / 2) - (arrowSize.height / 2)
                 };
             }
-            style.top = parentDimensions.top + parentDimensions.height - tooltipSize.height;
+            style.top = parentDimensions.top + parentDimensions.height - componentSize.height;
         }
     }
     return { style: style, position: position, arrowPosition: arrowPosition };
 }
-exports["default"] = calculate;
+exports["default"] = calculateComponentAbsolutePosition;

package/utils/calendar.js

@@ -8,7 +8,9 @@ exports.convertDate = void 0;
 /* eslint-disable import/prefer-default-export */
 var dayjs_1 = __importDefault(require("dayjs"));
 var utc_1 = __importDefault(require("dayjs/plugin/utc"));
+var customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 dayjs_1["default"].extend(utc_1["default"]);
+dayjs_1["default"].extend(customParseFormat_1["default"]);
 var convertDate = function (date, fromFormats, toFormat, isUtc, dateInUtc) {
     if (toFormat === void 0) { toFormat = null; }
     if (isUtc === void 0) { isUtc = false; }

package/utils/list.d.ts

@@ -0,0 +1 @@
+export declare const getTreeItemUniqId: (item: any, index: any, parentId: any) => string;

package/utils/list.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+exports.getTreeItemUniqId = void 0;
+var getTreeItemUniqId = function (item, index, parentId) { return (parentId || '0') + '.' + String(item.id || index); };
+exports.getTreeItemUniqId = getTreeItemUniqId;

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

@@ -1,6 +0,0 @@
-import { ITooltipArrowPosition, ITooltipStylePosition } from '../Tooltip/Tooltip';
-export default function calculate(gap: any, position: any, parentRef: any, tooltipSize: any, arrowSize: any): {
-    style: ITooltipStylePosition;
-    position: any;
-    arrowPosition: ITooltipArrowPosition;
-};