@reltio/components 1.4.840 → 1.4.844

package/components/BasicView/styles.js

@@ -1,13 +1,18 @@
 "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);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
-    'basic-view__paper': {
-        display: 'flex',
-        flexDirection: 'column',
-        boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
-        borderRadius: '3px',
-        backgroundColor: '#FFFFFF'
-    }
-});
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    'basic-view__paper': __assign({ display: 'flex', flexDirection: 'column' }, theme.basicView)
+}); });

package/components/ReltioGridLayout/ReltioGridLayout.d.ts

@@ -1,5 +1,5 @@
 declare var _default: React.MemoExoticComponent<{
-    ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable }: {
+    ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable, classes }: {
         views: any;
         layout: any;
         layoutOptions: any;
@@ -10,6 +10,7 @@ declare var _default: React.MemoExoticComponent<{
         onDrop: any;
         droppingItem: any;
         isDroppable: any;
+        classes: any;
     }): JSX.Element;
     defaultProps: {
         layoutOptions: {
@@ -19,6 +20,7 @@ declare var _default: React.MemoExoticComponent<{
         };
         onConfigChanged: any;
         onLayoutChanged: any;
+        classes: {};
     };
     propTypes: {
         views: PropTypes.Requireable<any[]>;
@@ -32,6 +34,9 @@ declare var _default: React.MemoExoticComponent<{
         draggableHandle: PropTypes.Requireable<string>;
         isDroppable: PropTypes.Requireable<boolean>;
         droppingItem: PropTypes.Requireable<object>;
+        classes: PropTypes.Requireable<PropTypes.InferProps<{
+            item: PropTypes.Requireable<string>;
+        }>>;
     };
 }>;
 export default _default;

package/components/ReltioGridLayout/ReltioGridLayout.js

@@ -1,4 +1,15 @@
 "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;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -32,14 +43,14 @@ var helpers_1 = require("./helpers");
 var styles_1 = require("./styles");
 var ReltioGridLayout = function (_a) {
     var _b;
-    var views = _a.views, layout = _a.layout, layoutOptions = _a.layoutOptions, onLayoutChanged = _a.onLayoutChanged, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable;
+    var views = _a.views, layout = _a.layout, layoutOptions = _a.layoutOptions, onLayoutChanged = _a.onLayoutChanged, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, classes = _a.classes;
     var ref = react_1.useRef();
     var styles = styles_1.useStyles();
     var _c = react_1.useState(null), fullscreenItemId = _c[0], setFullscreenItemId = _c[1];
     var _d = react_1.useState(0), width = _d[0], setWidth = _d[1];
     var cols = layoutOptions.cols, rowHeight = layoutOptions.rowHeight, margin = layoutOptions.margin;
     var processedLayout = react_1.useMemo(function () { return helpers_1.reltioLayoutToReactGridLayout(layout); }, [layout]);
-    var onReltioLayoutChanged = ramda_1.pipe(helpers_1.reactGridLayoutToReltioLayout, onLayoutChanged);
+    var onReltioLayoutChanged = ramda_1.pipe(helpers_1.reactGridLayoutToReltioLayout, helpers_1.copyPropsFromPreviousLayout(['autosizing'], layout), onLayoutChanged);
     var handleDrop = function (layout, layoutItem, e) {
         if (onDrop) {
             onDrop(helpers_1.reactGridLayoutToReltioLayout(layout), helpers_1.reactGridLayoutItemToReltioLayoutItem(layoutItem), e);
@@ -47,11 +58,34 @@ var ReltioGridLayout = function (_a) {
     };
     var onToggleFullscreen = react_1.useCallback(function (id) { return setFullscreenItemId(function (prevId) { return (prevId ? null : id); }); }, []);
     var isFullscreenEnabled = fullscreenItemId !== null;
+    var onItemHeightResize = react_1.useCallback(function (height, layoutId) {
+        var isLayoutChanged = false;
+        var newLayout = layout.map(function (layoutItem) {
+            if (layoutItem.id === layoutId && height) {
+                var newHeight = helpers_1.calcHeight(height, layoutOptions);
+                if (layoutItem.height !== newHeight) {
+                    isLayoutChanged = true;
+                    return __assign(__assign({}, layoutItem), { minHeight: newHeight, maxHeight: newHeight, height: newHeight });
+                }
+            }
+            return layoutItem;
+        });
+        if (isLayoutChanged) {
+            onLayoutChanged(newLayout);
+        }
+    }, [layout, layoutOptions, onLayoutChanged]);
+    var getAutosizeComponent = function (layoutItemId) {
+        return (react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: function (width, height) {
+                onItemHeightResize(height, layoutItemId);
+            } }));
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_resize_detector_1.default, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
         react_1.default.createElement(react_grid_layout_1.default, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: onReltioLayoutChanged, isResizable: !isFullscreenEnabled, isDraggable: !isFullscreenEnabled, className: classnames_1.default(styles.gridLayout, (_b = {}, _b[styles.gridFullscreen] = isFullscreenEnabled, _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable }, processedLayout.map(function (layoutItem) {
             var isItemFullscreen = fullscreenItemId === layoutItem.i;
-            return (react_1.default.createElement(LayoutItem, { key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames_1.default({ fullscreen: isItemFullscreen }), isFullscreen: isItemFullscreen }));
+            var isAutosize = (helpers_1.getReltioLayoutItemById(layout, layoutItem.i) || {}).autosizing;
+            var autosizeComponent = isAutosize ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) } : {};
+            return (react_1.default.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames_1.default({ fullscreen: isItemFullscreen }, classes.item), isFullscreen: isItemFullscreen }, autosizeComponent)));
         }))));
 };
 ReltioGridLayout.defaultProps = {
@@ -61,7 +95,8 @@ ReltioGridLayout.defaultProps = {
         margin: [15, 15]
     },
     onConfigChanged: ramda_1.identity,
-    onLayoutChanged: ramda_1.identity
+    onLayoutChanged: ramda_1.identity,
+    classes: {}
 };
 ReltioGridLayout.propTypes = {
     views: prop_types_1.default.array,
@@ -74,6 +109,9 @@ ReltioGridLayout.propTypes = {
     LayoutItem: prop_types_1.default.elementType,
     draggableHandle: prop_types_1.default.string,
     isDroppable: prop_types_1.default.bool,
-    droppingItem: prop_types_1.default.object
+    droppingItem: prop_types_1.default.object,
+    classes: prop_types_1.default.shape({
+        item: prop_types_1.default.string
+    })
 };
 exports.default = react_1.memo(ReltioGridLayout);

package/components/ReltioGridLayout/helpers.d.ts

@@ -47,3 +47,6 @@ export function reactGridLayoutItemToReltioLayoutItem({ x, y, w, h, maxW, minW,
 };
 export function reltioLayoutToReactGridLayout(layout: any): any;
 export function reactGridLayoutToReltioLayout(layout: any): any;
+export const getReltioLayoutItemById: any;
+export const copyPropsFromPreviousLayout: any;
+export function calcHeight(height: any, options: any): number;

package/components/ReltioGridLayout/helpers.js

@@ -11,7 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reactGridLayoutToReltioLayout = exports.reltioLayoutToReactGridLayout = exports.reactGridLayoutItemToReltioLayoutItem = exports.reltioLayoutItemToReactGridLayoutItem = exports.getReltioViewId = void 0;
+exports.calcHeight = exports.copyPropsFromPreviousLayout = exports.getReltioLayoutItemById = exports.reactGridLayoutToReltioLayout = exports.reltioLayoutToReactGridLayout = exports.reactGridLayoutItemToReltioLayoutItem = exports.reltioLayoutItemToReactGridLayoutItem = exports.getReltioViewId = void 0;
+var ramda_1 = require("ramda");
 var getReltioViewId = function (id) { return id.split(/\d+_/)[1]; };
 exports.getReltioViewId = getReltioViewId;
 var reltioLayoutItemToReactGridLayoutItem = function (_a) {
@@ -50,3 +51,15 @@ var reltioLayoutToReactGridLayout = function (layout) { return (layout || []).ma
 exports.reltioLayoutToReactGridLayout = reltioLayoutToReactGridLayout;
 var reactGridLayoutToReltioLayout = function (layout) { return (layout || []).map(exports.reactGridLayoutItemToReltioLayoutItem); };
 exports.reactGridLayoutToReltioLayout = reactGridLayoutToReltioLayout;
+exports.getReltioLayoutItemById = ramda_1.curry(function (layout, id) { return (layout || []).find(ramda_1.propEq('id', id)); });
+var updateExtraPropsInLayoutItem = ramda_1.curry(function (props, from, to) { return ramda_1.mergeAll([to, ramda_1.pick(props, from)]); });
+exports.copyPropsFromPreviousLayout = ramda_1.curry(function (props, oldReltioLayout, reltioLayout) {
+    return (reltioLayout || []).map(function (layoutItem) {
+        return ramda_1.pipe(ramda_1.prop('id'), exports.getReltioLayoutItemById(oldReltioLayout), ramda_1.defaultTo({}), updateExtraPropsInLayoutItem(props, ramda_1.__, layoutItem))(layoutItem);
+    });
+});
+var calcHeight = function (height, options) {
+    var margin = options.margin, rowHeight = options.rowHeight;
+    return Math.ceil((height + margin[1]) / (rowHeight + margin[1]));
+};
+exports.calcHeight = calcHeight;

package/hooks/useCollaboration.js

@@ -40,7 +40,7 @@ var useCollaboration = function (objectIds, objectTypes) {
     var _e = react_1.useState(false), sending = _e[0], setSending = _e[1];
     var _f = react_1.useState(false), loading = _f[0], setLoading = _f[1];
     react_1.useEffect(function () {
-        if (isCollaborationEnabled && entity) {
+        if (isCollaborationEnabled && entity && !mdm_sdk_1.isTempUri(entity.uri)) {
             var onError = function (e) {
                 console.warn('Collaboration error', e);
                 setCommentsMap(null);

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.840",
+  "version": "1.4.844",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "^2.7.0",
-    "@reltio/mdm-module": "^1.4.840",
-    "@reltio/mdm-sdk": "^1.4.840",
+    "@reltio/mdm-module": "^1.4.844",
+    "@reltio/mdm-sdk": "^1.4.844",
     "classnames": "^2.2.5",
     "frontend-collective-react-dnd-scrollzone": "^1.0.2",
     "nanoid": "^2.0.0",

package/types/index.d.ts

@@ -20,4 +20,6 @@ export declare type ReltioGridLayoutItem = {
     minHeight?: number;
     maxWidth?: number;
     maxHeight?: number;
+    isStatic?: boolean;
+    autosizing?: boolean;
 };