@reltio/components 1.4.1996 → 1.4.1997
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.
|
@@ -91,10 +91,9 @@ var ResizablePanes = function (_a) {
|
|
|
91
91
|
(0, react_1.useEffect)(function () {
|
|
92
92
|
actualizeSizes();
|
|
93
93
|
}, [actualizeSizes, percentageMaxSize, percentageMinSize]);
|
|
94
|
-
var handleChange = (0, react_1.useCallback)((0, mdm_sdk_1.debounce)(function (size) {
|
|
95
|
-
if (size === undefined)
|
|
94
|
+
var handleChange = (0, react_1.useCallback)((0, mdm_sdk_1.debounce)(function (size, containerSize) {
|
|
95
|
+
if (size === undefined || containerSize === 0)
|
|
96
96
|
return;
|
|
97
|
-
var containerSize = getContainerSize();
|
|
98
97
|
onChange({
|
|
99
98
|
percentageSize: size + '%',
|
|
100
99
|
isMaxSize: +percentageMaxSize > 0
|
|
@@ -103,7 +102,7 @@ var ResizablePanes = function (_a) {
|
|
|
103
102
|
isMinSize: isEqualSize(size, percentageMinSize),
|
|
104
103
|
size: Math.round((size * containerSize) / 100)
|
|
105
104
|
});
|
|
106
|
-
}, debounceInterval), [onChange, percentageMaxSize, percentageMinSize
|
|
105
|
+
}, debounceInterval), [onChange, percentageMaxSize, percentageMinSize]);
|
|
107
106
|
var handleDragging = (0, react_1.useCallback)(function (isDragging) {
|
|
108
107
|
if (isDragging) {
|
|
109
108
|
// Why do we need handleChange() here?
|
|
@@ -113,10 +112,10 @@ var ResizablePanes = function (_a) {
|
|
|
113
112
|
disableAnimation();
|
|
114
113
|
}
|
|
115
114
|
else {
|
|
116
|
-
handleChange(panelRef.current.getSize());
|
|
115
|
+
handleChange(panelRef.current.getSize(), getContainerSize());
|
|
117
116
|
enableAnimation();
|
|
118
117
|
}
|
|
119
|
-
}, [disableAnimation, enableAnimation, handleChange]);
|
|
118
|
+
}, [disableAnimation, enableAnimation, handleChange, getContainerSize]);
|
|
120
119
|
var paneAnimationStyle = (0, react_1.useMemo)(function () { return ({
|
|
121
120
|
transition: theme.transitions.create('flex', {
|
|
122
121
|
easing: theme.transitions.easing.sharp,
|
|
@@ -62,10 +62,9 @@ export var ResizablePanes = function (_a) {
|
|
|
62
62
|
useEffect(function () {
|
|
63
63
|
actualizeSizes();
|
|
64
64
|
}, [actualizeSizes, percentageMaxSize, percentageMinSize]);
|
|
65
|
-
var handleChange = useCallback(debounce(function (size) {
|
|
66
|
-
if (size === undefined)
|
|
65
|
+
var handleChange = useCallback(debounce(function (size, containerSize) {
|
|
66
|
+
if (size === undefined || containerSize === 0)
|
|
67
67
|
return;
|
|
68
|
-
var containerSize = getContainerSize();
|
|
69
68
|
onChange({
|
|
70
69
|
percentageSize: size + '%',
|
|
71
70
|
isMaxSize: +percentageMaxSize > 0
|
|
@@ -74,7 +73,7 @@ export var ResizablePanes = function (_a) {
|
|
|
74
73
|
isMinSize: isEqualSize(size, percentageMinSize),
|
|
75
74
|
size: Math.round((size * containerSize) / 100)
|
|
76
75
|
});
|
|
77
|
-
}, debounceInterval), [onChange, percentageMaxSize, percentageMinSize
|
|
76
|
+
}, debounceInterval), [onChange, percentageMaxSize, percentageMinSize]);
|
|
78
77
|
var handleDragging = useCallback(function (isDragging) {
|
|
79
78
|
if (isDragging) {
|
|
80
79
|
// Why do we need handleChange() here?
|
|
@@ -84,10 +83,10 @@ export var ResizablePanes = function (_a) {
|
|
|
84
83
|
disableAnimation();
|
|
85
84
|
}
|
|
86
85
|
else {
|
|
87
|
-
handleChange(panelRef.current.getSize());
|
|
86
|
+
handleChange(panelRef.current.getSize(), getContainerSize());
|
|
88
87
|
enableAnimation();
|
|
89
88
|
}
|
|
90
|
-
}, [disableAnimation, enableAnimation, handleChange]);
|
|
89
|
+
}, [disableAnimation, enableAnimation, handleChange, getContainerSize]);
|
|
91
90
|
var paneAnimationStyle = useMemo(function () { return ({
|
|
92
91
|
transition: theme.transitions.create('flex', {
|
|
93
92
|
easing: theme.transitions.easing.sharp,
|