@reltio/components 1.4.1909 → 1.4.1911

package/esm/ProfileResizablePanes/ProfileResizablePanes.spec.js

@@ -94,11 +94,28 @@ var setUp = function (props) {
         React.createElement(PaneStub, { key: 0, id: "content" }),
         React.createElement(PaneStub, { key: 1, id: "rightPanel" })), { wrapper: Providers })), { user: user });
 };
-var getSplitPane1 = function (container) { return container.getElementsByClassName('Pane1')[0]; };
-var getSplitPane2 = function (container) { return container.getElementsByClassName('Pane2')[0]; };
-var getSplitPanesResizer = function (container) { return container.getElementsByClassName('Resizer')[0]; };
-var isResizingDisabled = function (container) { return getSplitPanesResizer(container).classList.contains('disabled'); };
+var getSplitPane1 = function (container) { return container.querySelectorAll('[data-panel-id]')[0]; };
+var getSplitPane2 = function (container) { return container.querySelectorAll('[data-panel-id]')[1]; };
+var getSplitPanesResizer = function (container) { return container.querySelector('[data-resize-handle]'); };
+var isResizingDisabled = function (container) {
+    return getSplitPanesResizer(container).getAttribute('data-panel-resize-handle-enabled') === 'false';
+};
+var checkPanelSize = function (panel, size) { return expect(panel.getAttribute('data-panel-size')).toBe(size); };
 describe('ProfileResizablePanes tests', function () {
+    beforeAll(function () {
+        jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(1000);
+        jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
+            width: 1000,
+            height: 1000,
+            top: 0,
+            left: 0,
+            right: 1000,
+            bottom: 1000,
+            x: 0,
+            y: 0,
+            toJSON: function () { return ''; }
+        });
+    });
     it('should render resizable panes with closed second pane (active is undefined)', function () {
         var container = setUp().container;
         expect(screen.getByTestId('content')).toBeInTheDocument();
@@ -106,10 +123,11 @@ describe('ProfileResizablePanes tests', function () {
         expect(getSplitPane1(container)).toBeInTheDocument();
         expect(getSplitPane2(container)).toBeInTheDocument();
         expect(isResizingDisabled(container)).toBe(true);
-        expect(getSplitPane2(container).style.width).toBe('0px');
+        checkPanelSize(getSplitPane1(container), '100.0');
+        checkPanelSize(getSplitPane2(container), '0.0');
         expect(screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
         expect(screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
-        expect(screen.getByRole('presentation')).toBeInTheDocument();
+        expect(screen.getByRole('separator')).toBeInTheDocument();
     });
     it('should render resizable panes with open second pane', function () { return __awaiter(void 0, void 0, void 0, function () {
         var _a, container, user, button2;
@@ -122,7 +140,8 @@ describe('ProfileResizablePanes tests', function () {
                     expect(getSplitPane1(container)).toBeInTheDocument();
                     expect(getSplitPane2(container)).toBeInTheDocument();
                     expect(isResizingDisabled(container)).toBe(true);
-                    expect(getSplitPane2(container).style.width).toBe('0px');
+                    checkPanelSize(getSplitPane1(container), '100.0');
+                    checkPanelSize(getSplitPane2(container), '0.0');
                     expect(screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
                     expect(screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
                     button2 = screen.getByRole('button', { name: 'Button 2' });
@@ -130,7 +149,8 @@ describe('ProfileResizablePanes tests', function () {
                 case 1:
                     _b.sent();
                     expect(isResizingDisabled(container)).toBe(false);
-                    expect(getSplitPane2(container).style.width).toBe('480px');
+                    checkPanelSize(getSplitPane1(container), '52.0');
+                    checkPanelSize(getSplitPane2(container), '48.0');
                     expect(screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
                     expect(screen.getByTestId('reltio-profile-right-side-button-2')).toBeInTheDocument();
                     return [2 /*return*/];
@@ -141,11 +161,11 @@ describe('ProfileResizablePanes tests', function () {
         var container;
         return __generator(this, function (_a) {
             container = setUp(__assign(__assign({}, defaultProps), { disabled: true })).container;
-            expect(getSplitPane2(container).style.width).toBe('0px');
+            checkPanelSize(getSplitPane2(container), '0.0');
             expect(screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
             expect(screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
             expect(isResizingDisabled(container)).toBe(true);
-            expect(getSplitPane2(container).style.width).toBe('0px');
+            checkPanelSize(getSplitPane2(container), '0.0');
             expect(screen.getByRole('button', { name: 'Button 1' }).hasAttribute('disabled')).toBe(true);
             expect(screen.getByRole('button', { name: 'Button 2' }).hasAttribute('disabled')).toBe(true);
             return [2 /*return*/];
@@ -158,80 +178,105 @@ describe('ProfileResizablePanes tests', function () {
                 case 0:
                     _a = setUp(__assign(__assign({}, defaultProps), { perspectiveId: 'graph' })), container = _a.container, user = _a.user;
                     expect(isResizingDisabled(container)).toBe(false);
-                    expect(getSplitPane2(container).style.width).toBe('320px');
+                    checkPanelSize(getSplitPane1(container), '68.0');
+                    checkPanelSize(getSplitPane2(container), '32.0');
                     expect(screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
                     expect(screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
-                    Divider = screen.getByRole('presentation');
+                    Divider = screen.getByRole('separator');
                     expect(Divider).toBeInTheDocument();
                     // move mouse to an x-coordinate between MIN_R_PANE_SIZE and MAX_R_PANE_SIZE
-                    return [4 /*yield*/, user.pointer({
-                            keys: '[MouseLeft>]',
-                            target: Divider,
-                            coords: {
-                                x: 0,
-                                y: 0
+                    return [4 /*yield*/, user.pointer([
+                            {
+                                keys: '[MouseLeft>]',
+                                target: Divider,
+                                coords: {
+                                    x: 680,
+                                    y: 0
+                                }
+                            },
+                            {
+                                target: Divider,
+                                coords: {
+                                    x: 500,
+                                    y: 20
+                                }
+                            },
+                            {
+                                keys: '[/MouseLeft]',
+                                target: Divider,
+                                coords: {
+                                    x: 500,
+                                    y: 20
+                                }
                             }
-                        })];
+                        ])];
                 case 1:
                     // move mouse to an x-coordinate between MIN_R_PANE_SIZE and MAX_R_PANE_SIZE
                     _b.sent();
-                    return [4 /*yield*/, user.pointer({
-                            keys: '[/MouseLeft]',
-                            target: Divider,
-                            coords: {
-                                x: -500,
-                                y: 20
-                            }
-                        })];
-                case 2:
-                    _b.sent();
-                    expect(getSplitPane2(container).style.width).toBe('500px');
+                    checkPanelSize(getSplitPane1(container), '50.0');
+                    checkPanelSize(getSplitPane2(container), '50.0');
                     // move mouse to a larger x-coordinate than MAX_R_PANE_SIZE
-                    return [4 /*yield*/, user.pointer({
-                            keys: '[MouseLeft>]',
-                            target: Divider,
-                            coords: {
-                                x: 0,
-                                y: 0
+                    return [4 /*yield*/, user.pointer([
+                            {
+                                keys: '[MouseLeft>]',
+                                target: Divider,
+                                coords: {
+                                    x: 500,
+                                    y: 0
+                                }
+                            },
+                            {
+                                target: Divider,
+                                coords: {
+                                    x: 300,
+                                    y: 20
+                                }
+                            },
+                            {
+                                keys: '[/MouseLeft]',
+                                target: Divider,
+                                coords: {
+                                    x: 300,
+                                    y: 20
+                                }
                             }
-                        })];
-                case 3:
+                        ])];
+                case 2:
                     // move mouse to a larger x-coordinate than MAX_R_PANE_SIZE
                     _b.sent();
-                    return [4 /*yield*/, user.pointer({
-                            keys: '[/MouseLeft]',
-                            target: Divider,
-                            coords: {
-                                x: -650,
-                                y: 0
-                            }
-                        })];
-                case 4:
-                    _b.sent();
-                    expect(getSplitPane2(container).style.width).toBe('640px');
+                    checkPanelSize(getSplitPane1(container), '36.0');
+                    checkPanelSize(getSplitPane2(container), '64.0');
                     // move mouse to a smaller x-coordinate than MIN_R_PANE_SIZE
-                    return [4 /*yield*/, user.pointer({
-                            keys: '[MouseLeft>]',
-                            target: Divider,
-                            coords: {
-                                x: 0,
-                                y: 0
+                    return [4 /*yield*/, user.pointer([
+                            {
+                                keys: '[MouseLeft>]',
+                                target: Divider,
+                                coords: {
+                                    x: 360,
+                                    y: 0
+                                }
+                            },
+                            {
+                                target: Divider,
+                                coords: {
+                                    x: 690,
+                                    y: 20
+                                }
+                            },
+                            {
+                                keys: '[/MouseLeft]',
+                                target: Divider,
+                                coords: {
+                                    x: 690,
+                                    y: 20
+                                }
                             }
-                        })];
-                case 5:
+                        ])];
+                case 3:
                     // move mouse to a smaller x-coordinate than MIN_R_PANE_SIZE
                     _b.sent();
-                    return [4 /*yield*/, user.pointer({
-                            keys: '[/MouseLeft]',
-                            target: Divider,
-                            coords: {
-                                x: -310,
-                                y: 0
-                            }
-                        })];
-                case 6:
-                    _b.sent();
-                    expect(getSplitPane2(container).style.width).toBe('320px');
+                    checkPanelSize(getSplitPane1(container), '68.0');
+                    checkPanelSize(getSplitPane2(container), '32.0');
                     return [2 /*return*/];
             }
         });

package/esm/ResizablePanes/ResizablePanes.d.ts

@@ -12,15 +12,16 @@ type Props = {
     allowResize?: boolean;
     primary?: 'first' | 'second';
     minSize?: Size;
+    /** if you set the maxSize to negative value (e.g. -200), then the splitter stops 200px before the border (in other words it sets the minimal size of the 'resizable' pane in this case) */
     maxSize?: Size;
-    defaultSize?: Size;
     debounceInterval?: number;
+    /** Can be a positive or negative number (e.g., 250, -250), a percentage string (e.g., "50%"), or a string with pixels (e.g., "50px") */
     size?: Size;
     orientation?: 'vertical' | 'horizontal';
     onChange?: ({ size, percentageSize, isMaxSize, isMinSize }: OnChange) => void;
 };
 export declare const ResizablePanes: {
-    ({ className, children, orientation, primary, defaultSize, size, minSize, maxSize, allowResize, debounceInterval, onChange }: Props): JSX.Element;
+    ({ className, children, orientation, primary, size, minSize, maxSize, allowResize, debounceInterval, onChange }: Props): JSX.Element;
     displayName: string;
 };
 export {};

package/esm/ResizablePanes/ResizablePanes.js

@@ -1,39 +1,106 @@
-import React, { useCallback, useMemo, useState } from 'react';
+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);
+};
+import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
 import classnames from 'classnames';
-import SplitPane from 'react-split-pane';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import { useTheme } from '@mui/material/styles';
+import ReactResizeDetector from 'react-resize-detector';
 import { debounce } from '@reltio/mdm-sdk';
 import { useStyles } from './styles';
 var HANDLE_CHANGE_DEBOUNCE_INTERVAL = 250;
 var isHorizontal = function (orientation) { return orientation === 'horizontal'; };
+var isEqualSize = function (a, b) { return a.toFixed(2) === b.toFixed(2); };
 export var ResizablePanes = function (_a) {
-    var className = _a.className, children = _a.children, orientation = _a.orientation, primary = _a.primary, defaultSize = _a.defaultSize, size = _a.size, minSize = _a.minSize, maxSize = _a.maxSize, allowResize = _a.allowResize, _b = _a.debounceInterval, debounceInterval = _b === void 0 ? HANDLE_CHANGE_DEBOUNCE_INTERVAL : _b, onChange = _a.onChange;
+    var _b;
+    var className = _a.className, children = _a.children, _c = _a.orientation, orientation = _c === void 0 ? 'vertical' : _c, _d = _a.primary, primary = _d === void 0 ? 'first' : _d, size = _a.size, minSize = _a.minSize, maxSize = _a.maxSize, allowResize = _a.allowResize, _e = _a.debounceInterval, debounceInterval = _e === void 0 ? HANDLE_CHANGE_DEBOUNCE_INTERVAL : _e, onChange = _a.onChange;
     var styles = useStyles();
     var theme = useTheme();
-    var _c = useState(null), containerEl = _c[0], setContainerEl = _c[1];
-    var _d = useState(true), isPaneAnimationEnabled = _d[0], setIsPaneAnimationEnabled = _d[1];
+    var panelRef = useRef();
+    var _f = useState(null), containerEl = _f[0], setContainerEl = _f[1];
+    var _g = useState(0), percentageMinSize = _g[0], setPercentageMinSize = _g[1];
+    var _h = useState(0), percentageMaxSize = _h[0], setPercentageMaxSize = _h[1];
+    var _j = useState(true), isPaneAnimationEnabled = _j[0], setIsPaneAnimationEnabled = _j[1];
     var enableAnimation = useCallback(function () { return setIsPaneAnimationEnabled(true); }, []);
     var disableAnimation = useCallback(function () { return setIsPaneAnimationEnabled(false); }, []);
-    var getContainerSize = function () { return (isHorizontal(orientation) ? containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientHeight : containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientWidth); };
+    var getContainerSize = useCallback(function () { return (isHorizontal(orientation) ? containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientHeight : containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientWidth); }, [containerEl, orientation]);
+    if (typeof size === 'number' && size < 0) {
+        size = (getContainerSize() || 0) + size;
+    }
+    var convertSize = useCallback(function (size) {
+        if (typeof size === 'string' && size.endsWith('%')) {
+            return +size.replace('%', '');
+        }
+        if (typeof size === 'string' && size.endsWith('px')) {
+            size = size.replace('px', '');
+        }
+        return isNaN(+size) ? null : (+size / getContainerSize()) * 100;
+    }, [getContainerSize]);
+    var convertMinMaxSize = useCallback(function (size, minMaxSize) {
+        if (size === 0 || size === 100)
+            return 0;
+        return convertSize(minMaxSize) || 0;
+    }, [convertSize]);
+    var actualizeSizes = useCallback(function () {
+        if (containerEl && panelRef.current) {
+            var convertedSize = convertSize(size);
+            if (convertedSize != null && !isNaN(convertedSize)) {
+                setPercentageMaxSize(convertMinMaxSize(convertedSize, maxSize));
+                setPercentageMinSize(convertMinMaxSize(convertedSize, minSize));
+                panelRef.current.resize(convertedSize);
+            }
+        }
+    }, [convertSize, convertMinMaxSize, minSize, maxSize, size, containerEl]);
+    useEffect(function () {
+        actualizeSizes();
+    }, [actualizeSizes, percentageMaxSize, percentageMinSize]);
     var handleChange = useCallback(debounce(function (size) {
+        if (size === undefined)
+            return;
         var containerSize = getContainerSize();
         onChange({
-            percentageSize: "".concat((size / containerSize) * 100, "%"),
-            isMaxSize: +maxSize > 0 ? size === maxSize : size === containerSize + maxSize,
-            isMinSize: size === minSize,
-            size: size
+            percentageSize: size + '%',
+            isMaxSize: +percentageMaxSize > 0
+                ? isEqualSize(size, percentageMaxSize)
+                : isEqualSize(size, 100 + percentageMaxSize),
+            isMinSize: isEqualSize(size, percentageMinSize),
+            size: Math.round((size * containerSize) / 100)
         });
-    }, debounceInterval), [onChange, orientation, maxSize, containerEl]);
+    }, debounceInterval), [onChange, percentageMaxSize, percentageMinSize, getContainerSize]);
+    var handleDragging = useCallback(function (isDragging) {
+        if (isDragging) {
+            // Why do we need handleChange() here?
+            // Case - user resized panels, and then immediately started resizing again.
+            // We need to prevent onChange calling with "previous" data (handleChange is debounced calling of onChange)
+            handleChange();
+            disableAnimation();
+        }
+        else {
+            handleChange(panelRef.current.getSize());
+            enableAnimation();
+        }
+    }, [disableAnimation, enableAnimation, handleChange]);
     var paneAnimationStyle = useMemo(function () { return ({
-        transition: theme.transitions.create(isHorizontal(orientation) ? 'height' : 'width', {
+        transition: theme.transitions.create('flex', {
             easing: theme.transitions.easing.sharp,
             duration: theme.transitions.duration.leavingScreen
         })
-    }); }, [orientation, theme]);
-    if (typeof size === 'number' && size < 0) {
-        size = (getContainerSize() || 0) + size;
-    }
+    }); }, [theme]);
+    var primaryPanelProps = __assign(__assign({ className: styles.panel, minSize: percentageMinSize }, (percentageMaxSize > 0 ? { maxSize: percentageMaxSize } : {})), { ref: panelRef, style: isPaneAnimationEnabled ? paneAnimationStyle : undefined });
+    var secondaryPanelProps = __assign({ className: styles.panel, style: isPaneAnimationEnabled ? paneAnimationStyle : undefined }, (percentageMaxSize < 0 ? { minSize: -percentageMaxSize } : {}));
     return (React.createElement("div", { ref: setContainerEl, className: classnames(styles.container, className) },
-        React.createElement(SplitPane, { split: orientation, size: size, primary: primary, allowResize: allowResize, onChange: handleChange, defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, onDragStarted: disableAnimation, onDragFinished: enableAnimation, pane1Style: isPaneAnimationEnabled ? paneAnimationStyle : undefined }, children)));
+        React.createElement(ReactResizeDetector, { handleHeight: isHorizontal(orientation), handleWidth: !isHorizontal(orientation), onResize: actualizeSizes, refreshMode: "debounce", refreshRate: 50 }),
+        React.createElement(PanelGroup, { direction: isHorizontal(orientation) ? 'vertical' : 'horizontal' },
+            React.createElement(Panel, __assign({}, (primary === 'first' ? primaryPanelProps : secondaryPanelProps)), children[0]),
+            React.createElement(PanelResizeHandle, { className: classnames(styles.resizer, styles[orientation], (_b = {}, _b[styles.disabled] = !allowResize, _b)), disabled: !allowResize, hitAreaMargins: { coarse: 0, fine: 0 }, onDragging: handleDragging }),
+            React.createElement(Panel, __assign({}, (primary === 'second' ? primaryPanelProps : secondaryPanelProps)), children[1]))));
 };
 ResizablePanes.displayName = 'ResizablePanes';