publ-echo-test 0.0.60 → 0.0.61
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/Draggable/DraggableCore.js +0 -1
- package/dist/lib/Draggable/types.d.ts +0 -2
- package/dist/lib/GridItem/GridItem.js +1 -0
- package/dist/lib/GridItem/GroupItem.d.ts +1 -5
- package/dist/lib/GridItem/GroupItem.js +5 -14
- package/dist/lib/GridLayoutEditor/ReactGridLayout.js +32 -28
- package/dist/lib/GridLayoutEditor/group.js +3 -0
- package/dist/lib/GridLayoutEditor/types.d.ts +5 -3
- package/package.json +1 -1
@@ -260,7 +260,6 @@ var DraggableCore = function (_a) {
|
|
260
260
|
onMouseDown: handleMouseDown,
|
261
261
|
onMouseUp: handleMouseUp,
|
262
262
|
onTouchEnd: handleTouchEnd,
|
263
|
-
onDoubleClick: props.onDoubleClick,
|
264
263
|
ref: (_b = props.nodeRef) !== null && _b !== void 0 ? _b : draggableCoreRef,
|
265
264
|
});
|
266
265
|
};
|
@@ -23,8 +23,6 @@ export type DraggableCoreDefaultProps = {
|
|
23
23
|
onDrag?: DraggableEventHandler | Function;
|
24
24
|
onStop?: DraggableEventHandler | Function;
|
25
25
|
onMouseDown?: (e: MouseEvent) => void;
|
26
|
-
onDoubleClick?: () => void;
|
27
|
-
onClick?: () => void;
|
28
26
|
scale?: number;
|
29
27
|
cancel?: string;
|
30
28
|
children: ReactElement<any>;
|
@@ -248,6 +248,7 @@ var GridItem = function (_a) {
|
|
248
248
|
var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
|
249
249
|
var bottomBoundary = offsetParent.clientHeight -
|
250
250
|
calcGridItemWHPx(h, rowHeightNumber, margin[1]);
|
251
|
+
console.log('bb', bottomBoundary);
|
251
252
|
top = clamp(top, 0, bottomBoundary);
|
252
253
|
var rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
|
253
254
|
left = clamp(left, 0, rightBoundary);
|
@@ -1,9 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { GridItemProps } from "./types";
|
3
3
|
import { PropsWithChildren } from "../types";
|
4
|
-
|
5
|
-
onDoubleClick: (id: string) => void;
|
6
|
-
onClick: (id: string) => void;
|
7
|
-
};
|
8
|
-
declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps & GroupItemProp>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
4
|
+
declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
9
5
|
export default GroupItem;
|
@@ -30,7 +30,7 @@ import { Resizable } from "../Resizable";
|
|
30
30
|
var GroupItem = function (_a) {
|
31
31
|
var _b;
|
32
32
|
var children = _a.children, props = __rest(_a, ["children"]);
|
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
|
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
34
|
var _l = useState(), resizing = _l[0], setResizing = _l[1];
|
35
35
|
var _m = useState(), dragging = _m[0], setDragging = _m[1];
|
36
36
|
var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
|
@@ -135,12 +135,6 @@ var GroupItem = function (_a) {
|
|
135
135
|
// });
|
136
136
|
// }
|
137
137
|
// };
|
138
|
-
var handleDoubleClick = function () {
|
139
|
-
onDoubleClick(props.i);
|
140
|
-
};
|
141
|
-
var handleClick = function () {
|
142
|
-
onClick(props.i);
|
143
|
-
};
|
144
138
|
var getPositionParams = function (prop) {
|
145
139
|
if (prop === void 0) { prop = props; }
|
146
140
|
return {
|
@@ -177,7 +171,7 @@ var GroupItem = function (_a) {
|
|
177
171
|
* @return {Element} Child wrapped in Draggable.
|
178
172
|
*/
|
179
173
|
var mixinDraggable = function (child, isDraggable) {
|
180
|
-
return (_jsx(DraggableCore, {
|
174
|
+
return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
|
181
175
|
};
|
182
176
|
/**
|
183
177
|
* Mix a Resizable instance into a child.
|
@@ -254,6 +248,7 @@ var GroupItem = function (_a) {
|
|
254
248
|
var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
|
255
249
|
var bottomBoundary = offsetParent.clientHeight -
|
256
250
|
calcGridItemWHPx(h, rowHeightNumber, margin[1]);
|
251
|
+
console.log('bb', bottomBoundary);
|
257
252
|
top = clamp(top, 0, bottomBoundary);
|
258
253
|
var rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
|
259
254
|
left = clamp(left, 0, rightBoundary);
|
@@ -385,17 +380,13 @@ var GroupItem = function (_a) {
|
|
385
380
|
var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
|
386
381
|
handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
|
387
382
|
};
|
388
|
-
var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
|
389
|
-
dragging: dragging,
|
390
|
-
resizing: resizing,
|
391
|
-
}, colWidth);
|
383
|
+
var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {}, colWidth);
|
392
384
|
var child = React.Children.only(children);
|
393
|
-
// console.log(child, className)
|
394
385
|
var newChild = React.cloneElement(child, {
|
395
386
|
key: i,
|
396
387
|
ref: elementRef,
|
397
388
|
'data-grid-id': i,
|
398
|
-
className: classNames("react-
|
389
|
+
className: classNames("react-group-item", child.props.className, className, {
|
399
390
|
static: props.static,
|
400
391
|
isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
|
401
392
|
resizing: Boolean(resizing),
|
@@ -39,6 +39,7 @@ import GridItem from "../GridItem/GridItem";
|
|
39
39
|
import isEqual from "../../external-lib/lodash.isEqual";
|
40
40
|
import { findAllChildrenButGroup, findAllChildrenIds, findChildrenIds, findGroupBlocks, getBlockType } from "./group";
|
41
41
|
import GroupItem from "../GridItem/GroupItem";
|
42
|
+
import OutsideClickHandler from "../GridItem/OutsideClickHandler";
|
42
43
|
var layoutClassName = "react-grid-layout";
|
43
44
|
var ReactGridLayout = function (_a) {
|
44
45
|
var children = _a.children, props = __rest(_a, ["children"]);
|
@@ -48,7 +49,7 @@ var ReactGridLayout = function (_a) {
|
|
48
49
|
w: 1,
|
49
50
|
} : _w, // TODO fix
|
50
51
|
_x = props.resizeHandles, // TODO fix
|
51
|
-
resizeHandles = _x === void 0 ? ["se"] : _x, _y = props.width, width = _y === void 0 ? 0 : _y, resizeHandle = props.resizeHandle, _z = props.isHiddenVisibility, isHiddenVisibility = _z === void 0 ? true : _z, innerRef = props.innerRef, minNbRow = props.minNbRow, customColWidth = props.customColWidth, blockStructure = props.blockStructure, onDoubleClickGroup = props.onDoubleClickGroup, _0 = props.
|
52
|
+
resizeHandles = _x === void 0 ? ["se"] : _x, _y = props.width, width = _y === void 0 ? 0 : _y, resizeHandle = props.resizeHandle, _z = props.isHiddenVisibility, isHiddenVisibility = _z === void 0 ? true : _z, innerRef = props.innerRef, minNbRow = props.minNbRow, customColWidth = props.customColWidth, blockStructure = props.blockStructure, onDoubleClickGroup = props.onDoubleClickGroup, _0 = props.editingGroupBlock, editingGroupBlock = _0 === void 0 ? '1' : _0, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds, onDoubleClickOutsideGroup = props.onDoubleClickOutsideGroup, selectedGroupBlock = props.selectedGroupBlock;
|
52
53
|
var _1 = useState(), activeDrag = _1[0], setActiveDrag = _1[1];
|
53
54
|
var _2 = useState(), oldDragItem = _2[0], setOldDragItem = _2[1];
|
54
55
|
var _3 = useState(), oldLayout = _3[0], setOldLayout = _3[1];
|
@@ -57,7 +58,7 @@ var ReactGridLayout = function (_a) {
|
|
57
58
|
var _6 = useState(), droppingPosition = _6[0], setDroppingPosition = _6[1];
|
58
59
|
var _7 = useState(false), isMounted = _7[0], setIsMounted = _7[1];
|
59
60
|
// const [selectedGroup, setSelectedGroup] = useState<string>('1');
|
60
|
-
var editableItems = blockStructure ? findChildrenIds(blockStructure,
|
61
|
+
var editableItems = blockStructure ? findChildrenIds(blockStructure, editingGroupBlock) : [];
|
61
62
|
var _8 = useState([]), oldGroupChildren = _8[0], setOldGroupChildren = _8[1];
|
62
63
|
var _9 = useState(function () {
|
63
64
|
return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
|
@@ -201,6 +202,7 @@ var ReactGridLayout = function (_a) {
|
|
201
202
|
var _b;
|
202
203
|
var e = _a.e, node = _a.node;
|
203
204
|
var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
|
205
|
+
console.log(y);
|
204
206
|
if (!l)
|
205
207
|
return;
|
206
208
|
if (!oldDragItem) {
|
@@ -578,11 +580,11 @@ var ReactGridLayout = function (_a) {
|
|
578
580
|
if (!groupItem) {
|
579
581
|
return _jsx(_Fragment, {});
|
580
582
|
}
|
581
|
-
var isEditingGroup = block.id ===
|
583
|
+
var isEditingGroup = block.id === editingGroupBlock;
|
582
584
|
var type = getBlockType(block.id);
|
583
585
|
var z = (function () {
|
584
586
|
if (isEditingGroup && type === 'GROUP') {
|
585
|
-
return 1000
|
587
|
+
return 1000;
|
586
588
|
}
|
587
589
|
if (type === 'GROUP') {
|
588
590
|
return 1000;
|
@@ -592,16 +594,13 @@ var ReactGridLayout = function (_a) {
|
|
592
594
|
}
|
593
595
|
return 1000;
|
594
596
|
})();
|
595
|
-
var handleClick = function (
|
596
|
-
onClickGroup && onClickGroup(id);
|
597
|
+
var handleClick = function (e) {
|
598
|
+
onClickGroup && onClickGroup(e, block.id, type);
|
597
599
|
};
|
598
|
-
var handleDoubleClick = function (
|
599
|
-
|
600
|
-
onDoubleClickGroup && onDoubleClickGroup(id);
|
601
|
-
}
|
600
|
+
var handleDoubleClick = function (e) {
|
601
|
+
onDoubleClickGroup && onDoubleClickGroup(e, block.id, type);
|
602
602
|
};
|
603
|
-
|
604
|
-
// <OutsideClickHandler onOutsideClick={() => {
|
603
|
+
// () => {
|
605
604
|
// if (isEditingGroup) {
|
606
605
|
// const parent = findParentGroupByGroupId(blockStructure, block.id)
|
607
606
|
// parent && setSelectedGroup(parent)
|
@@ -609,24 +608,29 @@ var ReactGridLayout = function (_a) {
|
|
609
608
|
// setSelectedGroup('1')
|
610
609
|
// }
|
611
610
|
// }
|
612
|
-
// }
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
|
619
|
-
|
620
|
-
|
621
|
-
|
622
|
-
|
623
|
-
|
624
|
-
|
611
|
+
// }
|
612
|
+
var classname = (function () {
|
613
|
+
if (editingGroupBlock === block.id) {
|
614
|
+
return 'group editing';
|
615
|
+
}
|
616
|
+
if (selectedGroupBlock === block.id) {
|
617
|
+
return 'group selected';
|
618
|
+
}
|
619
|
+
return type.toLowerCase();
|
620
|
+
})();
|
621
|
+
return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classname, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly && !isEditingGroup, isResizable: !viewOnly && !isEditingGroup, isBounded: false, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, z: z, i: block.id.toString(),
|
622
|
+
// minH={l.minH}
|
623
|
+
// minW={l.minW}
|
624
|
+
// maxH={l.maxH}
|
625
|
+
// maxW={l.maxW}
|
626
|
+
// static={l.static}
|
627
|
+
// droppingPosition={isDroppingItem ? droppingPosition : undefined}
|
628
|
+
// resizeHandles={resizeHandlesOptions}
|
629
|
+
// resizeHandle={resizeHandle}
|
630
|
+
isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.id) }));
|
625
631
|
};
|
626
|
-
var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure,
|
632
|
+
var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, editingGroupBlock) : [];
|
627
633
|
// const groupsParentsGroups = findAllParentGroups(blockStructure, selectedGroup);
|
628
|
-
console.log('bs', blockStructure);
|
629
|
-
console.log('current', currentGroupBlocks);
|
630
634
|
return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDrag && (_jsx("div", { className: "grid-placeholder", style: {
|
631
635
|
marginTop: margin[1] + "px",
|
632
636
|
marginBottom: margin[1] + "px",
|
@@ -155,6 +155,9 @@ export var addBulkToTarget = function (blockStructure, targetId, bulkIds) {
|
|
155
155
|
if (bulkBlocks.length !== bulkIds.length) {
|
156
156
|
throw new Error("Some bulkIds do not exist as children of the target block.");
|
157
157
|
}
|
158
|
+
if (bulkBlocks.length === 0) {
|
159
|
+
return blockStructure;
|
160
|
+
}
|
158
161
|
// Remove bulk blocks from target's children
|
159
162
|
targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.id); });
|
160
163
|
// Create the new bulkBlock
|
@@ -74,10 +74,12 @@ export type ReactGridLayoutProps = {
|
|
74
74
|
customColWidth?: number;
|
75
75
|
onFitToContent?: OnFitContentCallBack;
|
76
76
|
blockStructure?: Block[];
|
77
|
-
onDoubleClickGroup?: (id: string) => void;
|
78
|
-
selectedGroupBlock?: string;
|
79
|
-
|
77
|
+
onDoubleClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
|
78
|
+
selectedGroupBlock?: string | null;
|
79
|
+
editingGroupBlock?: string;
|
80
|
+
onClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
|
80
81
|
bulkIds?: string[];
|
82
|
+
onDoubleClickOutsideGroup: () => void;
|
81
83
|
};
|
82
84
|
export type DragOverEvent = MouseEvent & {
|
83
85
|
nativeEvent: {
|