publ-echo-test 0.0.20 → 0.0.22
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.
- package/dist/lib/GridItem/GridItem.js +9 -14
- package/dist/lib/GridItem/utils/calculateUtils.d.ts +1 -1
- package/dist/lib/GridItem/utils/calculateUtils.js +4 -3
- package/dist/lib/Resizable/Resizable.d.ts +1 -1
- package/dist/lib/Resizable/Resizable.js +6 -10
- package/dist/lib/Resizable/types.d.ts +1 -0
- package/package.json +1 -1
@@ -31,19 +31,16 @@ var GridItem = function (_a) {
|
|
31
31
|
var _b;
|
32
32
|
var children = _a.children, props = __rest(_a, ["children"]);
|
33
33
|
var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? "" : _d, _e = props.handle, handle = _e === void 0 ? "" : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize;
|
34
|
-
var _l = useState(
|
35
|
-
var _m = useState(
|
36
|
-
var _o = useState(),
|
37
|
-
var _p = useState(),
|
38
|
-
var _q = useState(),
|
39
|
-
var _r = useState(false), isDragging = _r[0], setIsDragging = _r[1];
|
40
|
-
var _s = useState(false), isResizing = _s[0], setIsResizing = _s[1];
|
34
|
+
var _l = useState(), resizing = _l[0], setResizing = _l[1];
|
35
|
+
var _m = useState(), dragging = _m[0], setDragging = _m[1];
|
36
|
+
var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
|
37
|
+
var _p = useState(false), isDragging = _p[0], setIsDragging = _p[1];
|
38
|
+
var _q = useState(false), isResizing = _q[0], setIsResizing = _q[1];
|
41
39
|
var elementRef = useRef(null);
|
42
|
-
// const isSelected = className?.includes('react-grid-item-selected');
|
43
40
|
var isSelected = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.classList.contains('react-grid-item-selected');
|
44
41
|
useEffect(function () {
|
45
42
|
var _a;
|
46
|
-
if (!isSelected) {
|
43
|
+
if (!isSelected || !autoResize) {
|
47
44
|
return;
|
48
45
|
}
|
49
46
|
var targetNode = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.children[0].children[0].children[0];
|
@@ -60,7 +57,7 @@ var GridItem = function (_a) {
|
|
60
57
|
var _a = calcWH(getPositionParams(), {
|
61
58
|
width: targetNode.clientWidth,
|
62
59
|
height: height,
|
63
|
-
}, x, y, 'e', props.w, props.h), w_1 = _a.w, h_1 = _a.h;
|
60
|
+
}, x, y, 'e', props.w, props.h, true), w_1 = _a.w, h_1 = _a.h;
|
64
61
|
var _b = getResizableXYPosition('e', w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
|
65
62
|
props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY);
|
66
63
|
}
|
@@ -75,7 +72,7 @@ var GridItem = function (_a) {
|
|
75
72
|
return function () {
|
76
73
|
observer.disconnect();
|
77
74
|
};
|
78
|
-
}, [isSelected, isDragging, isResizing, props.w, props.h, x, y]);
|
75
|
+
}, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
|
79
76
|
// const moveDroppingItem = (prevProps: GridItemProps) => {
|
80
77
|
// const { droppingPosition } = props;
|
81
78
|
// if (!droppingPosition) return;
|
@@ -168,7 +165,7 @@ var GridItem = function (_a) {
|
|
168
165
|
];
|
169
166
|
return (_jsx(Resizable, { draggableOpts: {
|
170
167
|
disabled: !isResizable,
|
171
|
-
}, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, resizeHandles: props.resizeHandles, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, handle: resizeHandle, isResizing: isResizing, children: child }));
|
168
|
+
}, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, resizeHandles: props.resizeHandles, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, handle: resizeHandle, isResizing: isResizing, autoResize: autoResize, children: child }));
|
172
169
|
};
|
173
170
|
/**
|
174
171
|
* onDragStart event handler
|
@@ -301,7 +298,6 @@ var GridItem = function (_a) {
|
|
301
298
|
* @param {Object} callbackData an object with node and size information
|
302
299
|
*/
|
303
300
|
var onResize = function (e, callbackData) {
|
304
|
-
console.log('setting resizing true');
|
305
301
|
setIsResizing(true);
|
306
302
|
onResizeHandler(e, callbackData, "onResize");
|
307
303
|
};
|
@@ -325,7 +321,6 @@ var GridItem = function (_a) {
|
|
325
321
|
var onResizeHandler = function (e, _a, handlerName) {
|
326
322
|
var node = _a.node, size = _a.size, handle = _a.handle;
|
327
323
|
var handler = props[handlerName];
|
328
|
-
console.log(handlerName);
|
329
324
|
if (!handler)
|
330
325
|
return;
|
331
326
|
var prevW = props.w, prevH = props.h;
|
@@ -23,7 +23,7 @@ export declare function calcXY(positionParams: PositionParams, top: number, left
|
|
23
23
|
export declare function calcWH(positionParams: PositionParams, { width, height }: {
|
24
24
|
width: number;
|
25
25
|
height: number;
|
26
|
-
}, x: number, y: number, handleAxis?: ResizeHandleAxis, prevW?: number, prevH?: number): {
|
26
|
+
}, x: number, y: number, handleAxis?: ResizeHandleAxis, prevW?: number, prevH?: number, shouldCeil?: boolean): {
|
27
27
|
w: number;
|
28
28
|
h: number;
|
29
29
|
};
|
@@ -52,13 +52,14 @@ export function calcXY(positionParams, top, left, w, h) {
|
|
52
52
|
y = clamp(y, 0, maxRows - h);
|
53
53
|
return { x: x, y: y };
|
54
54
|
}
|
55
|
-
export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH) {
|
55
|
+
export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH, shouldCeil) {
|
56
56
|
var width = _a.width, height = _a.height;
|
57
57
|
var margin = positionParams.margin, maxRows = positionParams.maxRows, cols = positionParams.cols, rowHeight = positionParams.rowHeight;
|
58
58
|
var colWidth = calcGridColWidth(positionParams);
|
59
59
|
var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
|
60
|
-
var
|
61
|
-
var
|
60
|
+
var roundOrCeil = shouldCeil ? Math.ceil : Math.round;
|
61
|
+
var w = roundOrCeil((width + margin[0]) / (colWidth + margin[0]));
|
62
|
+
var h = roundOrCeil((height + margin[1]) / (rowHeightNumber + margin[1]));
|
62
63
|
// // Capping
|
63
64
|
// w = clamp(w, 0, cols - x);
|
64
65
|
// h = clamp(h, 0, maxRows - y);
|
@@ -2,5 +2,5 @@ import React from "react";
|
|
2
2
|
import { PropsWithChildren } from "../Draggable/types";
|
3
3
|
import { ResizableProps } from "./types";
|
4
4
|
type Props = ResizableProps;
|
5
|
-
declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, isResizing, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
5
|
+
declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, isResizing, autoResize, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
6
6
|
export default Resizable;
|
@@ -35,7 +35,7 @@ import React, { useEffect, useRef } from "react";
|
|
35
35
|
import DraggableCore from "../Draggable/DraggableCore";
|
36
36
|
import { cloneElement } from "./utils/cloneElement";
|
37
37
|
var Resizable = function (_a) {
|
38
|
-
var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, isResizing = _a.isResizing, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing"]);
|
38
|
+
var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, isResizing = _a.isResizing, autoResize = _a.autoResize, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize"]);
|
39
39
|
var handleRefs = useRef({
|
40
40
|
s: useRef(null),
|
41
41
|
n: useRef(null),
|
@@ -56,6 +56,9 @@ var Resizable = function (_a) {
|
|
56
56
|
var minWidth = useRef(0);
|
57
57
|
useEffect(function () {
|
58
58
|
var _a;
|
59
|
+
if (!autoResize) {
|
60
|
+
return;
|
61
|
+
}
|
59
62
|
if (!isResizing) {
|
60
63
|
extendedHeightRef.current = null;
|
61
64
|
minWidth.current = 0;
|
@@ -76,11 +79,10 @@ var Resizable = function (_a) {
|
|
76
79
|
extendedHeightRef.current = null;
|
77
80
|
}
|
78
81
|
var minWidthStyle = target.computedStyleMap().get('min-width');
|
79
|
-
console.log('minwidth Style: ', minWidthStyle);
|
80
82
|
if (typeof minWidthStyle.value === 'number') {
|
81
83
|
minWidth.current = minWidthStyle.value;
|
82
84
|
}
|
83
|
-
}, [isResizing, children]);
|
85
|
+
}, [isResizing, autoResize, children, elementRef]);
|
84
86
|
var resetData = function () {
|
85
87
|
lastHandleRect = slack = null;
|
86
88
|
};
|
@@ -200,8 +202,6 @@ var Resizable = function (_a) {
|
|
200
202
|
}
|
201
203
|
var width = props.width + (canDragX ? deltaX / transformScale : 0);
|
202
204
|
var height = props.height + (canDragY ? deltaY / transformScale : 0);
|
203
|
-
// console.log('height from Resize:', height)
|
204
|
-
// console.log('node', node)
|
205
205
|
var left = (_h = props === null || props === void 0 ? void 0 : props.left) !== null && _h !== void 0 ? _h : 0;
|
206
206
|
var top = (_j = props === null || props === void 0 ? void 0 : props.top) !== null && _j !== void 0 ? _j : 0;
|
207
207
|
if (axisV === "n") {
|
@@ -241,11 +241,7 @@ var Resizable = function (_a) {
|
|
241
241
|
var props = __assign({ ref: ref }, (isDOMElement ? {} : { handleAxis: handleAxis }));
|
242
242
|
return React.cloneElement(handle, props);
|
243
243
|
};
|
244
|
-
|
245
|
-
// console.log(childRefs)
|
246
|
-
return cloneElement(children, __assign(__assign({}, restProps), {
|
247
|
-
// ref: null,
|
248
|
-
className: "".concat(className ? "".concat(className, " ") : "", "react-resizable"), children: __spreadArray([
|
244
|
+
return cloneElement(children, __assign(__assign({}, restProps), { className: "".concat(className ? "".concat(className, " ") : "", "react-resizable"), children: __spreadArray([
|
249
245
|
// ...children.props.children,
|
250
246
|
React.Children.map(children.props.children, function (child) { return child; })
|
251
247
|
], resizeHandles.map(function (handleAxis) {
|