publ-echo 0.0.118 → 0.0.119
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.
|
@@ -36,7 +36,6 @@ var GridItem = function (_a) {
|
|
|
36
36
|
var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
|
|
37
37
|
var _p = useState(false), isDragging = _p[0], setIsDragging = _p[1];
|
|
38
38
|
var _q = useState(false), isResizing = _q[0], setIsResizing = _q[1];
|
|
39
|
-
var _r = useState(false), pointerEventsNone = _r[0], setPointerEventsNone = _r[1];
|
|
40
39
|
var elementRef = useRef(null);
|
|
41
40
|
var isSelected = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.classList.contains('react-grid-item-selected');
|
|
42
41
|
useEffect(function () {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { PropsWithChildren } from
|
|
3
|
-
import { ResizableProps } from
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PropsWithChildren } from '../Draggable/types';
|
|
3
|
+
import { ResizableProps } from './types';
|
|
4
4
|
type Props = ResizableProps;
|
|
5
5
|
declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, isResizing, autoResize, colWidth, margin, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
6
6
|
export default Resizable;
|
|
@@ -31,12 +31,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
31
31
|
};
|
|
32
32
|
import { createElement as _createElement } from "react";
|
|
33
33
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
34
|
-
import React, { useEffect, useRef } from
|
|
35
|
-
import { cloneElement } from
|
|
36
|
-
import { DraggableCore } from
|
|
37
|
-
import classNames from
|
|
34
|
+
import React, { useEffect, useRef, } from 'react';
|
|
35
|
+
import { cloneElement } from './utils/cloneElement';
|
|
36
|
+
import { DraggableCore } from '../Draggable';
|
|
37
|
+
import classNames from '../../external-lib/classnames';
|
|
38
38
|
var Resizable = function (_a) {
|
|
39
|
-
var children = _a.children, _b = _a.axis, axis = _b === void 0 ?
|
|
39
|
+
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, colWidth = _a.colWidth, margin = _a.margin, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize", "colWidth", "margin"]);
|
|
40
40
|
var handleRefs = useRef({
|
|
41
41
|
s: useRef(null),
|
|
42
42
|
n: useRef(null),
|
|
@@ -87,7 +87,8 @@ var Resizable = function (_a) {
|
|
|
87
87
|
else {
|
|
88
88
|
extendedHeightRef.current = null;
|
|
89
89
|
}
|
|
90
|
-
if (shouldShrinkRef.current &&
|
|
90
|
+
if (shouldShrinkRef.current &&
|
|
91
|
+
target.clientHeight < elementRef.current.clientHeight) {
|
|
91
92
|
minHeight.current = target.clientHeight;
|
|
92
93
|
}
|
|
93
94
|
var minWidthStyle = target.computedStyleMap().get('min-width');
|
|
@@ -95,7 +96,7 @@ var Resizable = function (_a) {
|
|
|
95
96
|
var minWidthBase = minWidthStyle.value;
|
|
96
97
|
var minColWidth = (minWidthBase + margin[0]) / (colWidth + margin[0]);
|
|
97
98
|
var minW = Math.ceil(minColWidth);
|
|
98
|
-
var minWidthPx =
|
|
99
|
+
var minWidthPx = minW * colWidth + (minW - 1) * margin[0];
|
|
99
100
|
minWidth.current = Math.round(minWidthPx);
|
|
100
101
|
}
|
|
101
102
|
}, [isResizing, autoResize, children, elementRef]);
|
|
@@ -156,28 +157,28 @@ var Resizable = function (_a) {
|
|
|
156
157
|
var resizableLeft = startPosition.current.left + (startSize.current.width - width);
|
|
157
158
|
var resizableTop = startPosition.current.top + (startSize.current.height - height);
|
|
158
159
|
if (deltaX < 0) {
|
|
159
|
-
if (handleAxis ===
|
|
160
|
+
if (handleAxis === 'nw' || handleAxis === 'w' || handleAxis === 'sw') {
|
|
160
161
|
if (currentSumOfLeftAndWidth > startSumOfLeftAndWidth) {
|
|
161
162
|
newLeft = Math.min(left, resizableLeft);
|
|
162
163
|
}
|
|
163
164
|
}
|
|
164
165
|
}
|
|
165
166
|
if (deltaY < 0) {
|
|
166
|
-
if (handleAxis ===
|
|
167
|
+
if (handleAxis === 'nw' || handleAxis === 'n' || handleAxis === 'ne') {
|
|
167
168
|
if (currentSumOfTopAndHeight > startSumOfTopAndHeight) {
|
|
168
169
|
newTop = Math.min(top, resizableTop);
|
|
169
170
|
}
|
|
170
171
|
}
|
|
171
172
|
}
|
|
172
173
|
if (deltaX > 0) {
|
|
173
|
-
if (handleAxis ===
|
|
174
|
+
if (handleAxis === 'nw' || handleAxis === 'w' || handleAxis === 'sw') {
|
|
174
175
|
if (width >= minConstraints[0]) {
|
|
175
176
|
newLeft = Math.max(left, resizableLeft);
|
|
176
177
|
}
|
|
177
178
|
}
|
|
178
179
|
}
|
|
179
180
|
if (deltaY > 0) {
|
|
180
|
-
if (handleAxis ===
|
|
181
|
+
if (handleAxis === 'nw' || handleAxis === 'n' || handleAxis === 'ne') {
|
|
181
182
|
if (height >= minConstraints[1]) {
|
|
182
183
|
newTop = Math.max(top, resizableTop);
|
|
183
184
|
}
|
|
@@ -190,7 +191,7 @@ var Resizable = function (_a) {
|
|
|
190
191
|
var _b, _c;
|
|
191
192
|
var _d, _e, _f, _g, _h, _j;
|
|
192
193
|
var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
|
|
193
|
-
if (handlerName ===
|
|
194
|
+
if (handlerName === 'onResizeStart') {
|
|
194
195
|
var position = { top: (_d = props.top) !== null && _d !== void 0 ? _d : 0, left: (_e = props.left) !== null && _e !== void 0 ? _e : 0 };
|
|
195
196
|
startPosition.current = position;
|
|
196
197
|
startSize.current = {
|
|
@@ -199,12 +200,12 @@ var Resizable = function (_a) {
|
|
|
199
200
|
};
|
|
200
201
|
resetData();
|
|
201
202
|
}
|
|
202
|
-
var canDragX = (axis ===
|
|
203
|
-
handleAxis !==
|
|
204
|
-
handleAxis !==
|
|
205
|
-
var canDragY = (axis ===
|
|
206
|
-
handleAxis !==
|
|
207
|
-
handleAxis !==
|
|
203
|
+
var canDragX = (axis === 'both' || axis === 'x') &&
|
|
204
|
+
handleAxis !== 'n' &&
|
|
205
|
+
handleAxis !== 's';
|
|
206
|
+
var canDragY = (axis === 'both' || axis === 'y') &&
|
|
207
|
+
handleAxis !== 'e' &&
|
|
208
|
+
handleAxis !== 'w';
|
|
208
209
|
if (!canDragX && !canDragY)
|
|
209
210
|
return;
|
|
210
211
|
var axisV = handleAxis[0];
|
|
@@ -222,21 +223,20 @@ var Resizable = function (_a) {
|
|
|
222
223
|
// }
|
|
223
224
|
// }
|
|
224
225
|
lastHandleRectRef.current = handleRect;
|
|
225
|
-
if (axisH ===
|
|
226
|
+
if (axisH === 'w') {
|
|
226
227
|
deltaX = -deltaX;
|
|
227
228
|
}
|
|
228
|
-
if (axisV ===
|
|
229
|
+
if (axisV === 'n') {
|
|
229
230
|
deltaY = -deltaY;
|
|
230
231
|
}
|
|
231
|
-
console.log(deltaX);
|
|
232
232
|
var width = props.width + (canDragX ? deltaX / transformScale : 0);
|
|
233
233
|
var height = props.height + (canDragY ? deltaY / transformScale : 0);
|
|
234
234
|
var left = (_h = props === null || props === void 0 ? void 0 : props.left) !== null && _h !== void 0 ? _h : 0;
|
|
235
235
|
var top = (_j = props === null || props === void 0 ? void 0 : props.top) !== null && _j !== void 0 ? _j : 0;
|
|
236
|
-
if (axisV ===
|
|
236
|
+
if (axisV === 'n') {
|
|
237
237
|
top = top - deltaY;
|
|
238
238
|
}
|
|
239
|
-
if (axisH ===
|
|
239
|
+
if (axisH === 'w') {
|
|
240
240
|
left = left - deltaX;
|
|
241
241
|
}
|
|
242
242
|
_b = checkConstraints(width, height), width = _b[0], height = _b[1];
|
|
@@ -245,12 +245,12 @@ var Resizable = function (_a) {
|
|
|
245
245
|
}
|
|
246
246
|
_c = checkTopLeft(deltaX, deltaY, top, left, width, height, handleAxis), top = _c[0], left = _c[1];
|
|
247
247
|
var isDimensionsChanged = width !== props.width || height !== props.height;
|
|
248
|
-
var cb = typeof props[handlerName] ===
|
|
249
|
-
var isCbSkipped = handlerName ===
|
|
248
|
+
var cb = typeof props[handlerName] === 'function' ? props[handlerName] : null;
|
|
249
|
+
var isCbSkipped = handlerName === 'onResize' && !isDimensionsChanged;
|
|
250
250
|
if (cb && !isCbSkipped) {
|
|
251
251
|
cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis });
|
|
252
252
|
}
|
|
253
|
-
if (handlerName ===
|
|
253
|
+
if (handlerName === 'onResizeStop') {
|
|
254
254
|
startPosition.current = null;
|
|
255
255
|
startSize.current = null;
|
|
256
256
|
resetData();
|
|
@@ -261,10 +261,10 @@ var Resizable = function (_a) {
|
|
|
261
261
|
if (!handle) {
|
|
262
262
|
return (_jsx("span", { className: "react-resizable-handle react-resizable-handle-".concat(handleAxis), ref: ref }));
|
|
263
263
|
}
|
|
264
|
-
if (typeof handle ===
|
|
264
|
+
if (typeof handle === 'function') {
|
|
265
265
|
return handle(handleAxis, ref);
|
|
266
266
|
}
|
|
267
|
-
var isDOMElement = typeof handle.type ===
|
|
267
|
+
var isDOMElement = typeof handle.type === 'string';
|
|
268
268
|
var props = __assign({ ref: ref }, (isDOMElement ? {} : { handleAxis: handleAxis }));
|
|
269
269
|
return React.cloneElement(handle, props);
|
|
270
270
|
};
|
|
@@ -273,7 +273,7 @@ var Resizable = function (_a) {
|
|
|
273
273
|
React.Children.map(children.props.children, function (child) { return child; })
|
|
274
274
|
], resizeHandles.map(function (handleAxis) {
|
|
275
275
|
var ref = (handleRefs === null || handleRefs === void 0 ? void 0 : handleRefs.current) && handleRefs.current[handleAxis];
|
|
276
|
-
return (_createElement(DraggableCore, __assign({}, draggableOpts, { nodeRef: ref, key: "resizableHandle-".concat(handleAxis), onStop: resizeHandler(
|
|
276
|
+
return (_createElement(DraggableCore, __assign({}, draggableOpts, { nodeRef: ref, key: "resizableHandle-".concat(handleAxis), onStop: resizeHandler('onResizeStop', handleAxis), onStart: resizeHandler('onResizeStart', handleAxis), onDrag: resizeHandler('onResize', handleAxis) }), renderResizeHandle(handleAxis, ref)));
|
|
277
277
|
}), true) }));
|
|
278
278
|
};
|
|
279
279
|
function removeNorthHandle(axis) {
|