@reltio/components 1.4.753 → 1.4.757

package/components/AutoSizeList/AutoSizeList.d.ts

@@ -4,10 +4,11 @@ declare type Props<T> = {
     height: number;
     data: T[];
     defaultItemSize: number;
+    itemKey?: (index: number, data: T[]) => string;
     children: ({ data, index }: {
         data: T[];
         index: number;
     }) => React.ReactNode;
 };
-declare const _default: React.MemoExoticComponent<(<T>({ width, height, defaultItemSize, data, children }: Props<T>) => JSX.Element)>;
+declare const _default: React.MemoExoticComponent<(<T extends unknown>({ width, height, defaultItemSize, data, children, itemKey }: Props<T>) => JSX.Element)>;
 export default _default;

package/components/AutoSizeList/AutoSizeList.js

@@ -38,29 +38,28 @@ var react_window_1 = require("react-window");
 var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var AutoSizeList = function (_a) {
-    var _b = _a.width, width = _b === void 0 ? 0 : _b, _c = _a.height, height = _c === void 0 ? 0 : _c, defaultItemSize = _a.defaultItemSize, data = _a.data, children = _a.children;
-    var listRef = react_1.useRef();
+    var _b = _a.width, width = _b === void 0 ? 0 : _b, _c = _a.height, height = _c === void 0 ? 0 : _c, defaultItemSize = _a.defaultItemSize, data = _a.data, children = _a.children, itemKey = _a.itemKey;
+    var rowHeightsCache = react_1.useRef({});
+    var cacheRowHeight = function (key, height) {
+        var _a;
+        rowHeightsCache.current = __assign(__assign({}, rowHeightsCache.current), (_a = {}, _a[key] = height, _a));
+    };
     var _d = react_1.useState({}), rowHeights = _d[0], setRowHeights = _d[1];
-    var getItemSize = function (index) { return rowHeights[index] || defaultItemSize; };
     var applyRowHeights = react_1.useCallback(mdm_sdk_1.debounce(function () {
         setRowHeights(__assign({}, rowHeightsCache.current));
-        listRef.current && listRef.current.resetAfterIndex(0);
     }), []);
-    var rowHeightsCache = react_1.useRef({});
-    var cacheRowHeight = function (index, height) {
-        var _a;
-        rowHeightsCache.current = __assign(__assign({}, rowHeightsCache.current), (_a = {}, _a[index] = height, _a));
-    };
-    react_1.useLayoutEffect(function () {
-        rowHeightsCache.current = {};
-    }, [width, data, defaultItemSize, children]);
-    return (react_1.default.createElement(react_window_1.VariableSizeList, { ref: listRef, width: width, height: height, itemCount: data.length, itemData: data, itemSize: getItemSize }, function (_a) {
+    var getItemKey = function (index) { return (itemKey ? itemKey(index, data) : index); };
+    var getItemSize = function (index) { return rowHeights[getItemKey(index)] || defaultItemSize; };
+    var listRef = react_1.useRef();
+    listRef.current && listRef.current.resetAfterIndex(0, false);
+    return (react_1.default.createElement(react_window_1.VariableSizeList, { ref: listRef, width: width, height: height, itemCount: data.length, itemData: data, itemSize: getItemSize, itemKey: itemKey }, function (_a) {
         var data = _a.data, index = _a.index, style = _a.style;
+        var key = getItemKey(index);
         return (react_1.default.createElement("div", { style: style },
-            react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { style: { visibility: key in rowHeights ? 'visible' : 'hidden' } },
                 react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: function (_, height) {
-                        if (rowHeightsCache.current[index] !== height) {
-                            cacheRowHeight(index, height);
+                        if (rowHeightsCache.current[key] !== height) {
+                            cacheRowHeight(key, height);
                             applyRowHeights();
                         }
                     } }),

package/components/activityLog/ActivityLog/ActivityLog.js

@@ -61,7 +61,7 @@ var ActivityLog = function (_a) {
     }, []); // eslint-disable-line
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(CollapsibleItemsContext_1.CollapsibleItemsProvider, null,
-            react_1.default.createElement(AutoSizeList_1.default, { width: width, height: height - PAGINATION_HEIGHT, data: flatItems, defaultItemSize: 40 }, renderRow)),
+            react_1.default.createElement(AutoSizeList_1.default, { width: width, height: height - PAGINATION_HEIGHT, data: flatItems, defaultItemSize: 40, itemKey: helpers_1.getItemKey }, renderRow)),
         react_1.default.createElement(BasicTablePagination_1.default, { count: count, onChangePage: onChangePage, page: page, rowsPerPage: rowsPerPage, onChangeRowsPerPage: onChangeRowsPerPage, rowsPerPageOptions: rowsPerPageOptions, labelRowsPerPage: ui_i18n_1.default.text('Events per page:') })));
 };
 exports.default = ActivityLog;

package/components/activityLog/ActivityLog/helpers.d.ts

@@ -1,8 +1,15 @@
+import { ActivityData } from '../types';
 export declare type GroupedItemData = {
     collapsed: boolean;
     timestamp: number;
     children: unknown[];
 };
 export declare const buildGroupedItems: any;
+export declare type GroupItemData = {
+    collapsed: boolean;
+    timestamp: number;
+    index: number;
+};
 export declare const flattenGroupedItems: any;
 export declare const isGroupItem: any;
+export declare const getItemKey: (index: number, data: (ActivityData | GroupItemData)[]) => string;

package/components/activityLog/ActivityLog/helpers.js

@@ -8,7 +8,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isGroupItem = exports.flattenGroupedItems = exports.buildGroupedItems = void 0;
+exports.getItemKey = exports.isGroupItem = exports.flattenGroupedItems = exports.buildGroupedItems = void 0;
 var ramda_1 = require("ramda");
 var moment_1 = __importDefault(require("moment"));
 var buildGroupedItem = function (_a) {
@@ -31,3 +31,8 @@ exports.flattenGroupedItems = chainIndexed(function (_a, index) {
     return collapsed ? [groupItem] : __spreadArray([groupItem], children);
 });
 exports.isGroupItem = ramda_1.has('collapsed');
+var getItemKey = function (index, data) {
+    var item = data[index];
+    return 'uri' in item ? item.uri : "" + item.index;
+};
+exports.getItemKey = getItemKey;

package/components/activityLog/ActivityLog/items/GroupItem/GroupItem.d.ts

@@ -1,10 +1,7 @@
 /// <reference types="react" />
+import { GroupItemData } from '../../helpers';
 declare type Props = {
-    item: {
-        index: number;
-        timestamp: number;
-        collapsed: boolean;
-    };
+    item: GroupItemData;
     onToggle: (index: number) => void;
 };
 declare const GroupItem: ({ item: { index, timestamp, collapsed }, onToggle }: Props) => JSX.Element;

package/package.json

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