@reltio/components 1.4.1537 → 1.4.1538

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/cjs/components/ReltioGridLayout/ReltioGridLayout.d.ts +21 -33
  2. package/cjs/components/ReltioGridLayout/ReltioGridLayout.js +20 -24
  3. package/cjs/components/ReltioGridLayout/helpers.d.ts +10 -52
  4. package/cjs/components/ReltioGridLayout/helpers.js +39 -6
  5. package/cjs/components/ReltioGridLayout/styles.d.ts +1 -1
  6. package/cjs/types/index.d.ts +5 -0
  7. package/esm/components/ReltioGridLayout/ReltioGridLayout.d.ts +21 -33
  8. package/esm/components/ReltioGridLayout/ReltioGridLayout.js +22 -26
  9. package/esm/components/ReltioGridLayout/helpers.d.ts +10 -52
  10. package/esm/components/ReltioGridLayout/helpers.js +38 -4
  11. package/esm/components/ReltioGridLayout/styles.d.ts +1 -1
  12. package/esm/types/index.d.ts +5 -0
  13. package/package.json +3 -3
package/cjs/components/ReltioGridLayout/ReltioGridLayout.d.ts CHANGED
@@ -1,45 +1,33 @@
1
+ import React, { DragEvent, ElementType } from 'react';
2
+ import { ReltioGridLayoutItem } from '@reltio/mdm-sdk';
3
+ import { ReactGridLayoutItem, ReltioGridLayoutOptions } from '../../types';
4
+ declare type Props<ViewConfig = Record<string, unknown>> = {
5
+ layout: ReltioGridLayoutItem[];
6
+ views?: ViewConfig[];
7
+ layoutOptions?: ReltioGridLayoutOptions;
8
+ onLayoutChanged?: (layout: ReltioGridLayoutItem[]) => void;
9
+ onDrop?: (layout: ReltioGridLayoutItem[], layoutItem: ReltioGridLayoutItem, e: DragEvent<HTMLDivElement>) => void;
10
+ onRemove?: (id: string) => void;
11
+ LayoutItem: ElementType;
12
+ draggableHandle?: string;
13
+ isDroppable?: boolean;
14
+ isStatic?: boolean;
15
+ droppingItem?: ReactGridLayoutItem;
16
+ classes?: {
17
+ root?: string;
18
+ item?: string;
19
+ };
20
+ };
1
21
  declare const _default: React.MemoExoticComponent<{
2
- ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable, classes }: {
3
- views: any;
4
- layout: any;
5
- layoutOptions: any;
6
- onLayoutChanged: any;
7
- draggableHandle: any;
8
- LayoutItem: any;
9
- onRemove: any;
10
- onDrop: any;
11
- droppingItem: any;
12
- isDroppable: any;
13
- classes: any;
14
- }): JSX.Element;
22
+ ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable, isStatic, classes }: Props<Record<string, unknown>>): JSX.Element;
15
23
  defaultProps: {
16
24
  layoutOptions: {
17
25
  cols: number;
18
26
  rowHeight: number;
19
27
  margin: number[];
20
28
  };
21
- onConfigChanged: any;
22
29
  onLayoutChanged: any;
23
30
  classes: {};
24
31
  };
25
- propTypes: {
26
- views: PropTypes.Requireable<any[]>;
27
- layout: PropTypes.Requireable<any[]>;
28
- layoutOptions: PropTypes.Requireable<object>;
29
- onConfigChanged: PropTypes.Requireable<(...args: any[]) => any>;
30
- onLayoutChanged: PropTypes.Requireable<(...args: any[]) => any>;
31
- onDrop: PropTypes.Requireable<(...args: any[]) => any>;
32
- onRemove: PropTypes.Requireable<(...args: any[]) => any>;
33
- LayoutItem: PropTypes.Requireable<PropTypes.ReactComponentLike>;
34
- draggableHandle: PropTypes.Requireable<string>;
35
- isDroppable: PropTypes.Requireable<boolean>;
36
- droppingItem: PropTypes.Requireable<object>;
37
- classes: PropTypes.Requireable<PropTypes.InferProps<{
38
- root: PropTypes.Requireable<string>;
39
- item: PropTypes.Requireable<string>;
40
- }>>;
41
- };
42
32
  }>;
43
33
  export default _default;
44
- import PropTypes from "prop-types";
45
- import React from "react";
package/cjs/components/ReltioGridLayout/ReltioGridLayout.js CHANGED
@@ -37,7 +37,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
37
37
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
38
  };
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
- var prop_types_1 = __importDefault(require("prop-types"));
41
40
  var react_1 = __importStar(require("react"));
42
41
  var react_grid_layout_1 = __importDefault(require("react-grid-layout"));
43
42
  var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
@@ -47,8 +46,9 @@ var helpers_1 = require("./helpers");
47
46
  var styles_1 = require("./styles");
48
47
  var ReltioGridLayout = function (_a) {
49
48
  var _b;
50
- 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;
49
+ 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, isStatic = _a.isStatic, classes = _a.classes;
51
50
  var ref = (0, react_1.useRef)();
51
+ var heightsMap = (0, react_1.useRef)({});
52
52
  var styles = (0, styles_1.useStyles)();
53
53
  var _c = (0, react_1.useState)(null), resizingItemId = _c[0], setResizingItemId = _c[1];
54
54
  var _d = (0, react_1.useState)(null), fullscreenItemId = _d[0], setFullscreenItemId = _d[1];
@@ -63,6 +63,15 @@ var ReltioGridLayout = function (_a) {
63
63
  };
64
64
  var onToggleFullscreen = (0, react_1.useCallback)(function (id) { return setFullscreenItemId(function (prevId) { return (prevId ? null : id); }); }, []);
65
65
  var isFullscreenEnabled = fullscreenItemId !== null;
66
+ var onItemHeightResizeInGroupingMode = (0, react_1.useCallback)(function (height, layoutId) {
67
+ if (height) {
68
+ heightsMap.current[layoutId] = (0, helpers_1.calcHeight)(height, layoutOptions);
69
+ var alignedLayout = (0, helpers_1.alignGroupedItemsHeights)(heightsMap.current, layout);
70
+ if (!(0, ramda_1.equals)(alignedLayout, layout)) {
71
+ onLayoutChanged(alignedLayout);
72
+ }
73
+ }
74
+ }, [layout, layoutOptions, onLayoutChanged]);
66
75
  var onItemHeightResize = (0, react_1.useCallback)(function (height, layoutId) {
67
76
  var isLayoutChanged = false;
68
77
  var newLayout = layout.map(function (layoutItem) {
@@ -81,14 +90,19 @@ var ReltioGridLayout = function (_a) {
81
90
  }, [layout, layoutOptions, onLayoutChanged]);
82
91
  var getAutosizeComponent = function (layoutItemId) {
83
92
  return (react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: function (width, height) {
84
- onItemHeightResize(height, layoutItemId);
93
+ if (isStatic) {
94
+ onItemHeightResizeInGroupingMode(height, layoutItemId);
95
+ }
96
+ else {
97
+ onItemHeightResize(height, layoutItemId);
98
+ }
85
99
  } }));
86
100
  };
87
101
  return (react_1.default.createElement(react_1.default.Fragment, null,
88
102
  react_1.default.createElement(react_resize_detector_1.default, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
89
- !!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: (0, classnames_1.default)(classes.root, styles.gridLayout, (_b = {},
103
+ !!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: isStatic ? undefined : onReltioLayoutChanged, isResizable: !isStatic && !isFullscreenEnabled, isDraggable: !isStatic && !isFullscreenEnabled, className: (0, classnames_1.default)(classes.root, styles.gridLayout, (_b = {},
90
104
  _b[styles.gridFullscreen] = isFullscreenEnabled,
91
- _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); }, "data-reltio-id": "reltio-grid-layout" }, processedLayout.map(function (layoutItem) {
105
+ _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: !isStatic && isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); }, "data-reltio-id": "reltio-grid-layout" }, processedLayout.map(function (layoutItem) {
92
106
  var _a;
93
107
  var isItemFullscreen = fullscreenItemId === layoutItem.i;
94
108
  var isResizing = resizingItemId === layoutItem.i;
@@ -96,7 +110,7 @@ var ReltioGridLayout = function (_a) {
96
110
  var autosizeComponent = isAutosize
97
111
  ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) }
98
112
  : {};
99
- return (react_1.default.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: (0, classnames_1.default)((_a = { fullscreen: isItemFullscreen }, _a[styles.isResizing] = isResizing, _a), classes.item), isFullscreen: isItemFullscreen }, autosizeComponent)));
113
+ return (react_1.default.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: (0, classnames_1.default)((_a = { fullscreen: isItemFullscreen }, _a[styles.isResizing] = isResizing, _a), classes.item, { static: isStatic }), isFullscreen: isItemFullscreen }, autosizeComponent)));
100
114
  })))));
101
115
  };
102
116
  ReltioGridLayout.defaultProps = {
@@ -105,25 +119,7 @@ ReltioGridLayout.defaultProps = {
105
119
  rowHeight: 30,
106
120
  margin: [15, 15]
107
121
  },
108
- onConfigChanged: ramda_1.identity,
109
122
  onLayoutChanged: ramda_1.identity,
110
123
  classes: {}
111
124
  };
112
- ReltioGridLayout.propTypes = {
113
- views: prop_types_1.default.array,
114
- layout: prop_types_1.default.array,
115
- layoutOptions: prop_types_1.default.object,
116
- onConfigChanged: prop_types_1.default.func,
117
- onLayoutChanged: prop_types_1.default.func,
118
- onDrop: prop_types_1.default.func,
119
- onRemove: prop_types_1.default.func,
120
- LayoutItem: prop_types_1.default.elementType,
121
- draggableHandle: prop_types_1.default.string,
122
- isDroppable: prop_types_1.default.bool,
123
- droppingItem: prop_types_1.default.object,
124
- classes: prop_types_1.default.shape({
125
- root: prop_types_1.default.string,
126
- item: prop_types_1.default.string
127
- })
128
- };
129
125
  exports.default = (0, react_1.memo)(ReltioGridLayout);
package/cjs/components/ReltioGridLayout/helpers.d.ts CHANGED
@@ -1,52 +1,10 @@
1
- export function getReltioViewId(id: any): any;
2
- export function reltioLayoutItemToReactGridLayoutItem({ x, y, width, height, id, minWidth, minHeight, maxWidth, maxHeight, isStatic }: {
3
- x: any;
4
- y: any;
5
- width: any;
6
- height: any;
7
- id: any;
8
- minWidth: any;
9
- minHeight: any;
10
- maxWidth: any;
11
- maxHeight: any;
12
- isStatic: any;
13
- }): {
14
- x: any;
15
- y: any;
16
- w: any;
17
- h: any;
18
- minW: any;
19
- minH: any;
20
- maxW: any;
21
- maxH: any;
22
- i: any;
23
- static: any;
24
- };
25
- export function reactGridLayoutItemToReltioLayoutItem({ x, y, w, h, maxW, minW, minH, maxH, i, ...obj }: {
26
- [x: string]: any;
27
- x: any;
28
- y: any;
29
- w: any;
30
- h: any;
31
- maxW: any;
32
- minW: any;
33
- minH: any;
34
- maxH: any;
35
- i: any;
36
- }): {
37
- x: any;
38
- y: any;
39
- width: any;
40
- height: any;
41
- minWidth: any;
42
- minHeight: any;
43
- maxWidth: any;
44
- maxHeight: any;
45
- id: any;
46
- isStatic: any;
47
- };
48
- export function reltioLayoutToReactGridLayout(layout: any): any;
49
- export function reactGridLayoutToReltioLayout(layout: any): any;
50
- export const getReltioLayoutItemById: any;
51
- export const copyPropsFromPreviousLayout: any;
52
- export function calcHeight(height: any, options: any): number;
1
+ import { ReltioGridLayoutItem } from '@reltio/mdm-sdk';
2
+ import { ReactGridLayoutItem, ReltioGridLayoutOptions } from '../../types';
3
+ export declare const reltioLayoutItemToReactGridLayoutItem: ({ x, y, width, height, id, minWidth, minHeight, maxWidth, maxHeight, isStatic }: ReltioGridLayoutItem) => ReactGridLayoutItem;
4
+ export declare const reactGridLayoutItemToReltioLayoutItem: ({ x, y, w, h, maxW, minW, minH, maxH, i, ...obj }: ReactGridLayoutItem) => ReltioGridLayoutItem;
5
+ export declare const reltioLayoutToReactGridLayout: (layout: ReltioGridLayoutItem[]) => ReactGridLayoutItem[];
6
+ export declare const reactGridLayoutToReltioLayout: (layout: ReactGridLayoutItem[]) => ReltioGridLayoutItem[];
7
+ export declare const getReltioLayoutItemById: any;
8
+ export declare const copyPropsFromPreviousLayout: any;
9
+ export declare const calcHeight: (height: number, options: ReltioGridLayoutOptions) => number;
10
+ export declare const alignGroupedItemsHeights: any;
package/cjs/components/ReltioGridLayout/helpers.js CHANGED
@@ -1,4 +1,15 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
2
13
  var __rest = (this && this.__rest) || function (s, e) {
3
14
  var t = {};
4
15
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -11,10 +22,8 @@ var __rest = (this && this.__rest) || function (s, e) {
11
22
  return t;
12
23
  };
13
24
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.calcHeight = exports.copyPropsFromPreviousLayout = exports.getReltioLayoutItemById = exports.reactGridLayoutToReltioLayout = exports.reltioLayoutToReactGridLayout = exports.reactGridLayoutItemToReltioLayoutItem = exports.reltioLayoutItemToReactGridLayoutItem = exports.getReltioViewId = void 0;
25
+ exports.alignGroupedItemsHeights = exports.calcHeight = exports.copyPropsFromPreviousLayout = exports.getReltioLayoutItemById = exports.reactGridLayoutToReltioLayout = exports.reltioLayoutToReactGridLayout = exports.reactGridLayoutItemToReltioLayoutItem = exports.reltioLayoutItemToReactGridLayoutItem = void 0;
15
26
  var ramda_1 = require("ramda");
16
- var getReltioViewId = function (id) { return id.split(/\d+_/)[1]; };
17
- exports.getReltioViewId = getReltioViewId;
18
27
  var reltioLayoutItemToReactGridLayoutItem = function (_a) {
19
28
  var x = _a.x, y = _a.y, width = _a.width, height = _a.height, id = _a.id, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, isStatic = _a.isStatic;
20
29
  return ({
@@ -47,11 +56,17 @@ var reactGridLayoutItemToReltioLayoutItem = function (_a) {
47
56
  });
48
57
  };
49
58
  exports.reactGridLayoutItemToReltioLayoutItem = reactGridLayoutItemToReltioLayoutItem;
50
- var reltioLayoutToReactGridLayout = function (layout) { return (layout || []).map(exports.reltioLayoutItemToReactGridLayoutItem); };
59
+ var reltioLayoutToReactGridLayout = function (layout) {
60
+ return (layout || []).map(exports.reltioLayoutItemToReactGridLayoutItem);
61
+ };
51
62
  exports.reltioLayoutToReactGridLayout = reltioLayoutToReactGridLayout;
52
- var reactGridLayoutToReltioLayout = function (layout) { return (layout || []).map(exports.reactGridLayoutItemToReltioLayoutItem); };
63
+ var reactGridLayoutToReltioLayout = function (layout) {
64
+ return (layout || []).map(exports.reactGridLayoutItemToReltioLayoutItem);
65
+ };
53
66
  exports.reactGridLayoutToReltioLayout = reactGridLayoutToReltioLayout;
54
- exports.getReltioLayoutItemById = (0, ramda_1.curry)(function (layout, id) { return (layout || []).find((0, ramda_1.propEq)('id', id)); });
67
+ exports.getReltioLayoutItemById = (0, ramda_1.curry)(function (layout, id) {
68
+ return (layout || []).find((0, ramda_1.propEq)('id', id));
69
+ });
55
70
  var updateExtraPropsInLayoutItem = (0, ramda_1.curry)(function (props, from, to) { return (0, ramda_1.mergeAll)([to, (0, ramda_1.pick)(props, from)]); });
56
71
  exports.copyPropsFromPreviousLayout = (0, ramda_1.curry)(function (props, oldReltioLayout, reltioLayout) {
57
72
  return (reltioLayout || []).map(function (layoutItem) {
@@ -63,3 +78,21 @@ var calcHeight = function (height, options) {
63
78
  return Math.ceil((height + margin[1]) / (rowHeight + margin[1]));
64
79
  };
65
80
  exports.calcHeight = calcHeight;
81
+ exports.alignGroupedItemsHeights = (0, ramda_1.curry)(function (heightsMap, layout) {
82
+ return layout.map(function (layoutItem) {
83
+ var oneRowItemsHeights = layout
84
+ .filter(function (item) { return item.y === layoutItem.y; })
85
+ .map(function (item) { return heightsMap[item.id] || (!item.autosizing && item.minHeight) || 0; });
86
+ var newHeight = Math.max.apply(Math, oneRowItemsHeights);
87
+ if (layoutItem.height !== newHeight && newHeight) {
88
+ var minMaxHeights = layoutItem.autosizing
89
+ ? {
90
+ minHeight: newHeight,
91
+ maxHeight: newHeight
92
+ }
93
+ : {};
94
+ return __assign(__assign(__assign({}, layoutItem), minMaxHeights), { height: newHeight });
95
+ }
96
+ return layoutItem;
97
+ });
98
+ });
package/cjs/components/ReltioGridLayout/styles.d.ts CHANGED
@@ -1 +1 @@
1
- export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"gridLayout" | "gridFullscreen" | "isResizing">;
1
+ export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"gridLayout" | "gridFullscreen" | "isResizing">;
package/cjs/types/index.d.ts CHANGED
@@ -12,6 +12,11 @@ export declare type ReactGridLayoutItem = {
12
12
  maxH?: number;
13
13
  static?: boolean;
14
14
  };
15
+ export declare type ReltioGridLayoutOptions = {
16
+ cols: number;
17
+ rowHeight: number;
18
+ margin: [number, number];
19
+ };
15
20
  export declare type AttributeOption = {
16
21
  label: string;
17
22
  value: string;
package/esm/components/ReltioGridLayout/ReltioGridLayout.d.ts CHANGED
@@ -1,45 +1,33 @@
1
+ import React, { DragEvent, ElementType } from 'react';
2
+ import { ReltioGridLayoutItem } from '@reltio/mdm-sdk';
3
+ import { ReactGridLayoutItem, ReltioGridLayoutOptions } from '../../types';
4
+ declare type Props<ViewConfig = Record<string, unknown>> = {
5
+ layout: ReltioGridLayoutItem[];
6
+ views?: ViewConfig[];
7
+ layoutOptions?: ReltioGridLayoutOptions;
8
+ onLayoutChanged?: (layout: ReltioGridLayoutItem[]) => void;
9
+ onDrop?: (layout: ReltioGridLayoutItem[], layoutItem: ReltioGridLayoutItem, e: DragEvent<HTMLDivElement>) => void;
10
+ onRemove?: (id: string) => void;
11
+ LayoutItem: ElementType;
12
+ draggableHandle?: string;
13
+ isDroppable?: boolean;
14
+ isStatic?: boolean;
15
+ droppingItem?: ReactGridLayoutItem;
16
+ classes?: {
17
+ root?: string;
18
+ item?: string;
19
+ };
20
+ };
1
21
  declare const _default: React.MemoExoticComponent<{
2
- ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable, classes }: {
3
- views: any;
4
- layout: any;
5
- layoutOptions: any;
6
- onLayoutChanged: any;
7
- draggableHandle: any;
8
- LayoutItem: any;
9
- onRemove: any;
10
- onDrop: any;
11
- droppingItem: any;
12
- isDroppable: any;
13
- classes: any;
14
- }): JSX.Element;
22
+ ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable, isStatic, classes }: Props<Record<string, unknown>>): JSX.Element;
15
23
  defaultProps: {
16
24
  layoutOptions: {
17
25
  cols: number;
18
26
  rowHeight: number;
19
27
  margin: number[];
20
28
  };
21
- onConfigChanged: any;
22
29
  onLayoutChanged: any;
23
30
  classes: {};
24
31
  };
25
- propTypes: {
26
- views: PropTypes.Requireable<any[]>;
27
- layout: PropTypes.Requireable<any[]>;
28
- layoutOptions: PropTypes.Requireable<object>;
29
- onConfigChanged: PropTypes.Requireable<(...args: any[]) => any>;
30
- onLayoutChanged: PropTypes.Requireable<(...args: any[]) => any>;
31
- onDrop: PropTypes.Requireable<(...args: any[]) => any>;
32
- onRemove: PropTypes.Requireable<(...args: any[]) => any>;
33
- LayoutItem: PropTypes.Requireable<PropTypes.ReactComponentLike>;
34
- draggableHandle: PropTypes.Requireable<string>;
35
- isDroppable: PropTypes.Requireable<boolean>;
36
- droppingItem: PropTypes.Requireable<object>;
37
- classes: PropTypes.Requireable<PropTypes.InferProps<{
38
- root: PropTypes.Requireable<string>;
39
- item: PropTypes.Requireable<string>;
40
- }>>;
41
- };
42
32
  }>;
43
33
  export default _default;
44
- import PropTypes from "prop-types";
45
- import React from "react";
package/esm/components/ReltioGridLayout/ReltioGridLayout.js CHANGED
@@ -9,18 +9,18 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
- import PropTypes from 'prop-types';
13
12
  import React, { useCallback, useMemo, useRef, useState, memo } from 'react';
14
13
  import GridLayout from 'react-grid-layout';
15
14
  import ReactResizeDetector from 'react-resize-detector';
16
- import { identity, pipe } from 'ramda';
15
+ import { equals, identity, pipe } from 'ramda';
17
16
  import classnames from 'classnames';
18
- import { reltioLayoutToReactGridLayout, reactGridLayoutToReltioLayout, reactGridLayoutItemToReltioLayoutItem, copyPropsFromPreviousLayout, calcHeight, getReltioLayoutItemById } from './helpers';
17
+ import { alignGroupedItemsHeights, reltioLayoutToReactGridLayout, reactGridLayoutToReltioLayout, reactGridLayoutItemToReltioLayoutItem, copyPropsFromPreviousLayout, calcHeight, getReltioLayoutItemById } from './helpers';
19
18
  import { useStyles } from './styles';
20
19
  var ReltioGridLayout = function (_a) {
21
20
  var _b;
22
- 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;
21
+ 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, isStatic = _a.isStatic, classes = _a.classes;
23
22
  var ref = useRef();
23
+ var heightsMap = useRef({});
24
24
  var styles = useStyles();
25
25
  var _c = useState(null), resizingItemId = _c[0], setResizingItemId = _c[1];
26
26
  var _d = useState(null), fullscreenItemId = _d[0], setFullscreenItemId = _d[1];
@@ -35,6 +35,15 @@ var ReltioGridLayout = function (_a) {
35
35
  };
36
36
  var onToggleFullscreen = useCallback(function (id) { return setFullscreenItemId(function (prevId) { return (prevId ? null : id); }); }, []);
37
37
  var isFullscreenEnabled = fullscreenItemId !== null;
38
+ var onItemHeightResizeInGroupingMode = useCallback(function (height, layoutId) {
39
+ if (height) {
40
+ heightsMap.current[layoutId] = calcHeight(height, layoutOptions);
41
+ var alignedLayout = alignGroupedItemsHeights(heightsMap.current, layout);
42
+ if (!equals(alignedLayout, layout)) {
43
+ onLayoutChanged(alignedLayout);
44
+ }
45
+ }
46
+ }, [layout, layoutOptions, onLayoutChanged]);
38
47
  var onItemHeightResize = useCallback(function (height, layoutId) {
39
48
  var isLayoutChanged = false;
40
49
  var newLayout = layout.map(function (layoutItem) {
@@ -53,14 +62,19 @@ var ReltioGridLayout = function (_a) {
53
62
  }, [layout, layoutOptions, onLayoutChanged]);
54
63
  var getAutosizeComponent = function (layoutItemId) {
55
64
  return (React.createElement(ReactResizeDetector, { handleHeight: true, onResize: function (width, height) {
56
- onItemHeightResize(height, layoutItemId);
65
+ if (isStatic) {
66
+ onItemHeightResizeInGroupingMode(height, layoutItemId);
67
+ }
68
+ else {
69
+ onItemHeightResize(height, layoutItemId);
70
+ }
57
71
  } }));
58
72
  };
59
73
  return (React.createElement(React.Fragment, null,
60
74
  React.createElement(ReactResizeDetector, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
61
- !!width && (React.createElement(GridLayout, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: onReltioLayoutChanged, isResizable: !isFullscreenEnabled, isDraggable: !isFullscreenEnabled, className: classnames(classes.root, styles.gridLayout, (_b = {},
75
+ !!width && (React.createElement(GridLayout, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: isStatic ? undefined : onReltioLayoutChanged, isResizable: !isStatic && !isFullscreenEnabled, isDraggable: !isStatic && !isFullscreenEnabled, className: classnames(classes.root, styles.gridLayout, (_b = {},
62
76
  _b[styles.gridFullscreen] = isFullscreenEnabled,
63
- _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); }, "data-reltio-id": "reltio-grid-layout" }, processedLayout.map(function (layoutItem) {
77
+ _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: !isStatic && isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); }, "data-reltio-id": "reltio-grid-layout" }, processedLayout.map(function (layoutItem) {
64
78
  var _a;
65
79
  var isItemFullscreen = fullscreenItemId === layoutItem.i;
66
80
  var isResizing = resizingItemId === layoutItem.i;
@@ -68,7 +82,7 @@ var ReltioGridLayout = function (_a) {
68
82
  var autosizeComponent = isAutosize
69
83
  ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) }
70
84
  : {};
71
- return (React.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames((_a = { fullscreen: isItemFullscreen }, _a[styles.isResizing] = isResizing, _a), classes.item), isFullscreen: isItemFullscreen }, autosizeComponent)));
85
+ return (React.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames((_a = { fullscreen: isItemFullscreen }, _a[styles.isResizing] = isResizing, _a), classes.item, { static: isStatic }), isFullscreen: isItemFullscreen }, autosizeComponent)));
72
86
  })))));
73
87
  };
74
88
  ReltioGridLayout.defaultProps = {
@@ -77,25 +91,7 @@ ReltioGridLayout.defaultProps = {
77
91
  rowHeight: 30,
78
92
  margin: [15, 15]
79
93
  },
80
- onConfigChanged: identity,
81
94
  onLayoutChanged: identity,
82
95
  classes: {}
83
96
  };
84
- ReltioGridLayout.propTypes = {
85
- views: PropTypes.array,
86
- layout: PropTypes.array,
87
- layoutOptions: PropTypes.object,
88
- onConfigChanged: PropTypes.func,
89
- onLayoutChanged: PropTypes.func,
90
- onDrop: PropTypes.func,
91
- onRemove: PropTypes.func,
92
- LayoutItem: PropTypes.elementType,
93
- draggableHandle: PropTypes.string,
94
- isDroppable: PropTypes.bool,
95
- droppingItem: PropTypes.object,
96
- classes: PropTypes.shape({
97
- root: PropTypes.string,
98
- item: PropTypes.string
99
- })
100
- };
101
97
  export default memo(ReltioGridLayout);
package/esm/components/ReltioGridLayout/helpers.d.ts CHANGED
@@ -1,52 +1,10 @@
1
- export function getReltioViewId(id: any): any;
2
- export function reltioLayoutItemToReactGridLayoutItem({ x, y, width, height, id, minWidth, minHeight, maxWidth, maxHeight, isStatic }: {
3
- x: any;
4
- y: any;
5
- width: any;
6
- height: any;
7
- id: any;
8
- minWidth: any;
9
- minHeight: any;
10
- maxWidth: any;
11
- maxHeight: any;
12
- isStatic: any;
13
- }): {
14
- x: any;
15
- y: any;
16
- w: any;
17
- h: any;
18
- minW: any;
19
- minH: any;
20
- maxW: any;
21
- maxH: any;
22
- i: any;
23
- static: any;
24
- };
25
- export function reactGridLayoutItemToReltioLayoutItem({ x, y, w, h, maxW, minW, minH, maxH, i, ...obj }: {
26
- [x: string]: any;
27
- x: any;
28
- y: any;
29
- w: any;
30
- h: any;
31
- maxW: any;
32
- minW: any;
33
- minH: any;
34
- maxH: any;
35
- i: any;
36
- }): {
37
- x: any;
38
- y: any;
39
- width: any;
40
- height: any;
41
- minWidth: any;
42
- minHeight: any;
43
- maxWidth: any;
44
- maxHeight: any;
45
- id: any;
46
- isStatic: any;
47
- };
48
- export function reltioLayoutToReactGridLayout(layout: any): any;
49
- export function reactGridLayoutToReltioLayout(layout: any): any;
50
- export const getReltioLayoutItemById: any;
51
- export const copyPropsFromPreviousLayout: any;
52
- export function calcHeight(height: any, options: any): number;
1
+ import { ReltioGridLayoutItem } from '@reltio/mdm-sdk';
2
+ import { ReactGridLayoutItem, ReltioGridLayoutOptions } from '../../types';
3
+ export declare const reltioLayoutItemToReactGridLayoutItem: ({ x, y, width, height, id, minWidth, minHeight, maxWidth, maxHeight, isStatic }: ReltioGridLayoutItem) => ReactGridLayoutItem;
4
+ export declare const reactGridLayoutItemToReltioLayoutItem: ({ x, y, w, h, maxW, minW, minH, maxH, i, ...obj }: ReactGridLayoutItem) => ReltioGridLayoutItem;
5
+ export declare const reltioLayoutToReactGridLayout: (layout: ReltioGridLayoutItem[]) => ReactGridLayoutItem[];
6
+ export declare const reactGridLayoutToReltioLayout: (layout: ReactGridLayoutItem[]) => ReltioGridLayoutItem[];
7
+ export declare const getReltioLayoutItemById: any;
8
+ export declare const copyPropsFromPreviousLayout: any;
9
+ export declare const calcHeight: (height: number, options: ReltioGridLayoutOptions) => number;
10
+ export declare const alignGroupedItemsHeights: any;
package/esm/components/ReltioGridLayout/helpers.js CHANGED
@@ -1,3 +1,14 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
1
12
  var __rest = (this && this.__rest) || function (s, e) {
2
13
  var t = {};
3
14
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -10,7 +21,6 @@ var __rest = (this && this.__rest) || function (s, e) {
10
21
  return t;
11
22
  };
12
23
  import { curry, defaultTo, mergeAll, pick, pipe, prop, propEq, __ } from 'ramda';
13
- export var getReltioViewId = function (id) { return id.split(/\d+_/)[1]; };
14
24
  export var reltioLayoutItemToReactGridLayoutItem = function (_a) {
15
25
  var x = _a.x, y = _a.y, width = _a.width, height = _a.height, id = _a.id, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, isStatic = _a.isStatic;
16
26
  return ({
@@ -41,9 +51,15 @@ export var reactGridLayoutItemToReltioLayoutItem = function (_a) {
41
51
  isStatic: obj.static
42
52
  });
43
53
  };
44
- export var reltioLayoutToReactGridLayout = function (layout) { return (layout || []).map(reltioLayoutItemToReactGridLayoutItem); };
45
- export var reactGridLayoutToReltioLayout = function (layout) { return (layout || []).map(reactGridLayoutItemToReltioLayoutItem); };
46
- export var getReltioLayoutItemById = curry(function (layout, id) { return (layout || []).find(propEq('id', id)); });
54
+ export var reltioLayoutToReactGridLayout = function (layout) {
55
+ return (layout || []).map(reltioLayoutItemToReactGridLayoutItem);
56
+ };
57
+ export var reactGridLayoutToReltioLayout = function (layout) {
58
+ return (layout || []).map(reactGridLayoutItemToReltioLayoutItem);
59
+ };
60
+ export var getReltioLayoutItemById = curry(function (layout, id) {
61
+ return (layout || []).find(propEq('id', id));
62
+ });
47
63
  var updateExtraPropsInLayoutItem = curry(function (props, from, to) { return mergeAll([to, pick(props, from)]); });
48
64
  export var copyPropsFromPreviousLayout = curry(function (props, oldReltioLayout, reltioLayout) {
49
65
  return (reltioLayout || []).map(function (layoutItem) {
@@ -54,3 +70,21 @@ export var calcHeight = function (height, options) {
54
70
  var margin = options.margin, rowHeight = options.rowHeight;
55
71
  return Math.ceil((height + margin[1]) / (rowHeight + margin[1]));
56
72
  };
73
+ export var alignGroupedItemsHeights = curry(function (heightsMap, layout) {
74
+ return layout.map(function (layoutItem) {
75
+ var oneRowItemsHeights = layout
76
+ .filter(function (item) { return item.y === layoutItem.y; })
77
+ .map(function (item) { return heightsMap[item.id] || (!item.autosizing && item.minHeight) || 0; });
78
+ var newHeight = Math.max.apply(Math, oneRowItemsHeights);
79
+ if (layoutItem.height !== newHeight && newHeight) {
80
+ var minMaxHeights = layoutItem.autosizing
81
+ ? {
82
+ minHeight: newHeight,
83
+ maxHeight: newHeight
84
+ }
85
+ : {};
86
+ return __assign(__assign(__assign({}, layoutItem), minMaxHeights), { height: newHeight });
87
+ }
88
+ return layoutItem;
89
+ });
90
+ });
package/esm/components/ReltioGridLayout/styles.d.ts CHANGED
@@ -1 +1 @@
1
- export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"gridLayout" | "gridFullscreen" | "isResizing">;
1
+ export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"gridLayout" | "gridFullscreen" | "isResizing">;
package/esm/types/index.d.ts CHANGED
@@ -12,6 +12,11 @@ export declare type ReactGridLayoutItem = {
12
12
  maxH?: number;
13
13
  static?: boolean;
14
14
  };
15
+ export declare type ReltioGridLayoutOptions = {
16
+ cols: number;
17
+ rowHeight: number;
18
+ margin: [number, number];
19
+ };
15
20
  export declare type AttributeOption = {
16
21
  label: string;
17
22
  value: string;
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.1537",
3
+ "version": "1.4.1538",
4
4
  "license": "SEE LICENSE IN LICENSE FILE",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./esm/index.js",
7
7
  "dependencies": {
8
8
  "@date-io/moment": "^1.3.5",
9
9
  "@react-google-maps/api": "2.7.0",
10
- "@reltio/mdm-module": "^1.4.1537",
11
- "@reltio/mdm-sdk": "^1.4.1537",
10
+ "@reltio/mdm-module": "^1.4.1538",
11
+ "@reltio/mdm-sdk": "^1.4.1538",
12
12
  "classnames": "^2.2.5",
13
13
  "d3-cloud": "^1.2.5",
14
14
  "d3-geo": "^2.0.1",