pds-dev-kit-web-test 2.7.356 → 2.7.357
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/src/sub/DynamicLayout/CompositionRenderer/FlexGridItem.d.ts +2 -2
- package/dist/src/sub/DynamicLayout/CompositionRenderer/FlexGridItem.js +11 -11
- package/dist/src/sub/DynamicLayout/CompositionRenderer/FlexGridItemForCCB.js +3 -3
- package/dist/src/sub/DynamicLayout/GridAutoRowEditor/GridAutoRowEditorForDL.js +2 -2
- package/dist/src/sub/DynamicLayout/utils/groupUtils.d.ts +2 -2
- package/dist/src/sub/DynamicLayout/utils/groupUtils.js +6 -6
- package/package.json +1 -1
|
@@ -10,9 +10,9 @@ type Props = {
|
|
|
10
10
|
zIndex: number;
|
|
11
11
|
showPinned?: boolean;
|
|
12
12
|
style?: React.CSSProperties;
|
|
13
|
-
|
|
13
|
+
isParentGroupHeightVariable: boolean;
|
|
14
14
|
block: Block;
|
|
15
15
|
};
|
|
16
|
-
declare function FlexGridItem({ cb, index, device, rowHeight, zIndex, showPinned, block, style,
|
|
16
|
+
declare function FlexGridItem({ cb, index, device, rowHeight, zIndex, showPinned, block, style, isParentGroupHeightVariable }: Props): JSX.Element;
|
|
17
17
|
export declare function getGridAreaFromCB(props: CB_PLACEMENT_PROP_SPECS, device: Device): string;
|
|
18
18
|
export default FlexGridItem;
|
|
@@ -24,12 +24,12 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
24
24
|
var ComponentBlockMatcherWithCCB_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/ComponentBlockMatcherWithCCB"));
|
|
25
25
|
var gap = 10;
|
|
26
26
|
function FlexGridItem(_a) {
|
|
27
|
-
var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight, zIndex = _a.zIndex, showPinned = _a.showPinned, block = _a.block, style = _a.style,
|
|
27
|
+
var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight, zIndex = _a.zIndex, showPinned = _a.showPinned, block = _a.block, style = _a.style, isParentGroupHeightVariable = _a.isParentGroupHeightVariable;
|
|
28
28
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
29
29
|
var defaultHeight = getMaxHeight(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, rowHeight);
|
|
30
30
|
var gridArea = getGridAreaFromCB(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device);
|
|
31
|
-
var
|
|
32
|
-
var
|
|
31
|
+
var isCBHeightVariable = device === 'DESKTOP' ? block.isHeightVariableDesktop : block.isHeightVariableMobile;
|
|
32
|
+
var isHeightVariable = isParentGroupHeightVariable || isCBHeightVariable;
|
|
33
33
|
var getHeightFitContent = function () {
|
|
34
34
|
var _a, _b, _c, _d;
|
|
35
35
|
if ('CB_STYLE_PROP_TEXT' in cb.jsonProperties.data) {
|
|
@@ -42,26 +42,26 @@ function FlexGridItem(_a) {
|
|
|
42
42
|
};
|
|
43
43
|
var heightFitContent = getHeightFitContent();
|
|
44
44
|
var getHeightStyles = function () {
|
|
45
|
-
if (heightFitContent &&
|
|
45
|
+
if (heightFitContent && isHeightVariable) {
|
|
46
46
|
return {
|
|
47
|
-
height: '
|
|
47
|
+
height: 'auto',
|
|
48
48
|
maxHeight: 'none'
|
|
49
49
|
};
|
|
50
50
|
}
|
|
51
|
-
if (heightFitContent && !
|
|
51
|
+
if (heightFitContent && !isHeightVariable) {
|
|
52
52
|
return {
|
|
53
|
-
height: '
|
|
53
|
+
height: 'fit-content',
|
|
54
54
|
maxHeight: 'none'
|
|
55
55
|
};
|
|
56
56
|
}
|
|
57
|
-
if (!heightFitContent &&
|
|
57
|
+
if (!heightFitContent && isHeightVariable) {
|
|
58
58
|
return {
|
|
59
|
-
height:
|
|
60
|
-
maxHeight: defaultHeight
|
|
59
|
+
height: '100%'
|
|
61
60
|
};
|
|
62
61
|
}
|
|
63
62
|
return {
|
|
64
|
-
height:
|
|
63
|
+
height: defaultHeight,
|
|
64
|
+
maxHeight: defaultHeight
|
|
65
65
|
};
|
|
66
66
|
};
|
|
67
67
|
return ((0, jsx_runtime_1.jsx)(GridItem, __assign({ style: __assign(__assign({ zIndex: zIndex, gridArea: gridArea, position: 'relative' }, style), getHeightStyles()), className: "flex-grid-item", "data-show-pinned": showPinned, "data-height-fit-content": "true" }, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcherWithCCB_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index }) })));
|
|
@@ -27,9 +27,9 @@ function FlexGridItem(_a) {
|
|
|
27
27
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
28
28
|
var defaultHeight = getMaxHeight(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, rowHeight);
|
|
29
29
|
var gridArea = getGridAreaFromCB(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, maxCols);
|
|
30
|
-
var
|
|
31
|
-
var
|
|
32
|
-
return ((0, jsx_runtime_1.jsx)(GridItem, __assign({ style: __assign({ zIndex: zIndex, gridArea: gridArea, position: 'relative', maxHeight:
|
|
30
|
+
var isCBHeightVariable = device === 'DESKTOP' ? block.isHeightVariableDesktop : block.isHeightVariableMobile;
|
|
31
|
+
var isHeightVariable = isParentGroupPinned || isCBHeightVariable;
|
|
32
|
+
return ((0, jsx_runtime_1.jsx)(GridItem, __assign({ style: __assign({ zIndex: zIndex, gridArea: gridArea, position: 'relative', maxHeight: isHeightVariable ? 'none' : defaultHeight }, style) }, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index }) })));
|
|
33
33
|
}
|
|
34
34
|
var GridItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: auto;\n word-break: break-word;\n"], ["\n height: auto;\n word-break: break-word;\n"])));
|
|
35
35
|
function getMaxHeight(props, device, rowHeight) {
|
|
@@ -270,7 +270,7 @@ var GridAutoRowEditor = (0, react_1.forwardRef)(function CustomSection(props, re
|
|
|
270
270
|
isEditMode: true }, child.blockId)); })] })) })) })) }) })) }));
|
|
271
271
|
});
|
|
272
272
|
function GroupBlockRender(_a) {
|
|
273
|
-
var block = _a.block, layouts = _a.layouts, pedigree = _a.pedigree, isEditing = _a.isEditing,
|
|
273
|
+
var block = _a.block, layouts = _a.layouts, pedigree = _a.pedigree, isEditing = _a.isEditing, isHeightVariable = _a.isHeightVariable, componentBlocks = _a.componentBlocks, onTogglePinned = _a.onTogglePinned, onDoubleClick = _a.onDoubleClick, onDoubleClickOutside = _a.onDoubleClickOutside;
|
|
274
274
|
var childrenIds = (0, group_1.findAllChildrenCbIds)(pedigree, block.blockId).map(function (i) { return i.toString(); });
|
|
275
275
|
var bounding = (0, renderHelpers_1.getBoundingArea)(layouts, childrenIds);
|
|
276
276
|
(0, react_1.useEffect)(function () {
|
|
@@ -312,7 +312,7 @@ function GroupBlockRender(_a) {
|
|
|
312
312
|
right: 0,
|
|
313
313
|
bottom: 0,
|
|
314
314
|
boxShadow: '0 0 0 3px #027aff'
|
|
315
|
-
} }), children === null || children === void 0 ? void 0 : children.map(function (cb, index) { return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: "DESKTOP", rowHeight: 50, zIndex: 0, style: { pointerEvents: 'none', opacity: isEditing ? 1 : 0.3 }, showPinned: isEditing, block: block,
|
|
315
|
+
} }), children === null || children === void 0 ? void 0 : children.map(function (cb, index) { return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: "DESKTOP", rowHeight: 50, zIndex: 0, style: { pointerEvents: 'none', opacity: isEditing ? 1 : 0.3 }, showPinned: isEditing, block: block, isParentGroupHeightVariable: isHeightVariable }) }, cb.id)); })] })));
|
|
316
316
|
}
|
|
317
317
|
var S_Pinned = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n pointer-events: auto;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 9999999;\n"], ["\n pointer-events: auto;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 9999999;\n"])));
|
|
318
318
|
function getGridAreaFromGroup(position) {
|
|
@@ -4,7 +4,7 @@ import type { Device } from '../sections/CustomSection/util/types';
|
|
|
4
4
|
import type { Block } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
|
|
5
5
|
import type { LayoutItem } from 'publ-echo/dist/lib';
|
|
6
6
|
export declare function findAllChildrenCbIds(block: Block, targetGroupId: string): number[];
|
|
7
|
-
export default function RenderPedigreeRecursively({ isEditMode, block, layoutItems, cbs, parentGroupArea, rowHeight, device, selectedRows,
|
|
7
|
+
export default function RenderPedigreeRecursively({ isEditMode, block, layoutItems, cbs, parentGroupArea, rowHeight, device, selectedRows, isParentGroupHeightVariable }: {
|
|
8
8
|
isEditMode: boolean;
|
|
9
9
|
block: Block;
|
|
10
10
|
layoutItems: LayoutItem[];
|
|
@@ -12,7 +12,7 @@ export default function RenderPedigreeRecursively({ isEditMode, block, layoutIte
|
|
|
12
12
|
rowHeight: number;
|
|
13
13
|
device: Device;
|
|
14
14
|
selectedRows: number[];
|
|
15
|
-
|
|
15
|
+
isParentGroupHeightVariable?: boolean;
|
|
16
16
|
parentGroupArea?: {
|
|
17
17
|
rowStart: number;
|
|
18
18
|
colStart: number;
|
|
@@ -80,9 +80,9 @@ exports.findAllChildrenCbIds = findAllChildrenCbIds;
|
|
|
80
80
|
function RenderPedigreeRecursively(_a) {
|
|
81
81
|
var isEditMode = _a.isEditMode, block = _a.block, layoutItems = _a.layoutItems, cbs = _a.cbs, parentGroupArea = _a.parentGroupArea, rowHeight = _a.rowHeight, device = _a.device, selectedRows = _a.selectedRows,
|
|
82
82
|
// pinnedGBs,
|
|
83
|
-
_b = _a.
|
|
83
|
+
_b = _a.isParentGroupHeightVariable,
|
|
84
84
|
// pinnedGBs,
|
|
85
|
-
|
|
85
|
+
isParentGroupHeightVariable = _b === void 0 ? false : _b;
|
|
86
86
|
var type = block.type;
|
|
87
87
|
if (type === 'GROUP_BLOCK') {
|
|
88
88
|
var childrenIds = findAllChildrenCbIds(block, block.blockId).map(function (i) { return i.toString(); });
|
|
@@ -103,7 +103,7 @@ function RenderPedigreeRecursively(_a) {
|
|
|
103
103
|
var relativeSelectedRows_1 = selectedRows
|
|
104
104
|
.map(function (row) { return row - gridArea_1.rowStart + 1; })
|
|
105
105
|
.filter(function (row) { return row >= 0 && row <= bounding_1.h; });
|
|
106
|
-
var
|
|
106
|
+
var isGBHeightVariable_1 = device === 'DESKTOP' ? block.isHeightVariableDesktop : block.isHeightVariableMobile;
|
|
107
107
|
var defaultHeight = getMaxHeight({ cols: bounding_1.w, rows: bounding_1.h, x: bounding_1.x, y: bounding_1.y }, rowHeight);
|
|
108
108
|
return ((0, jsx_runtime_1.jsx)(S_GroupItem, __assign({ cols: bounding_1.w, sectionRow: bounding_1.h, isEditMode: isEditMode, rowHeight: rowHeight, selectedRows: relativeSelectedRows_1, style: {
|
|
109
109
|
gridArea: gridAreaObjToString(relativeGridArea_1),
|
|
@@ -111,11 +111,11 @@ function RenderPedigreeRecursively(_a) {
|
|
|
111
111
|
zIndex: device === 'DESKTOP'
|
|
112
112
|
? block.zOrderDesktopInternal
|
|
113
113
|
: block.zOrderMobileInternal,
|
|
114
|
-
maxHeight:
|
|
114
|
+
maxHeight: isGBHeightVariable_1 ? 'none' : defaultHeight
|
|
115
115
|
}, className: "flex-grid-item", "data-show-pinned": isEditMode }, { children: block.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(RenderPedigreeRecursively, { rowHeight: rowHeight, block: child, layoutItems: layoutItems, cbs: cbs, parentGroupArea: gridArea_1, device: device, selectedRows: relativeSelectedRows_1,
|
|
116
116
|
// pinnedGBs={pinnedGBs}
|
|
117
117
|
// onToggleGBPinned={onToggleGBPinned}
|
|
118
|
-
isEditMode: isEditMode,
|
|
118
|
+
isEditMode: isEditMode, isParentGroupHeightVariable: isGBHeightVariable_1 }, child.blockId)); }) })));
|
|
119
119
|
}
|
|
120
120
|
// default: TYPE === 'COMPONENT_BLOCK'
|
|
121
121
|
var cbIndex = cbs.findIndex(function (c) { return c.blockId === block.blockId; });
|
|
@@ -143,7 +143,7 @@ function RenderPedigreeRecursively(_a) {
|
|
|
143
143
|
gridArea: gridAreaObjToString(relativeGridArea),
|
|
144
144
|
pointerEvents: isEditMode ? 'none' : 'auto',
|
|
145
145
|
boxShadow: isEditMode ? '0 0 0 3px #027aff' : ''
|
|
146
|
-
}, showPinned: isEditMode && !parentGroupArea,
|
|
146
|
+
}, showPinned: isEditMode && !parentGroupArea, isParentGroupHeightVariable: isParentGroupHeightVariable }) }, cb.id)
|
|
147
147
|
// </S_GridItem>
|
|
148
148
|
);
|
|
149
149
|
}
|