pds-dev-kit-web-test 2.5.487 → 2.5.489
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/sections/CustomSection/CustomSection.js +1 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/FlexGridItem.js +10 -10
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parsePlacement.js +8 -8
- package/dist/src/sub/DynamicLayout/sections/FlexGridCustomSection.js +2 -2
- package/package.json +1 -1
|
@@ -98,7 +98,6 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
|
|
|
98
98
|
sm: sm
|
|
99
99
|
};
|
|
100
100
|
}), layouts = _m[0], setLayouts = _m[1];
|
|
101
|
-
console.log(layouts);
|
|
102
101
|
var _o = (0, react_1.useState)('ROOT'), editingGroupBlock = _o[0], setEditingGroupBlock = _o[1];
|
|
103
102
|
var _p = (0, react_1.useState)([]), bulkBlockIds = _p[0], setBulkBlockIds = _p[1];
|
|
104
103
|
(0, react_1.useEffect)(function () {
|
|
@@ -1048,7 +1047,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
|
|
|
1048
1047
|
paddingLeft: padding.left
|
|
1049
1048
|
} }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ sectionId: props.id.toString(), innerRef: innerRef, className: (0, clsx_1.clsx)({
|
|
1050
1049
|
'selected-grid-layout': editingSectionId === props.id
|
|
1051
|
-
}), allowOverlap: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: colsDesktop, sm: colsMobile }, rowHeight: rowHeight, margin: [
|
|
1050
|
+
}), allowOverlap: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: colsDesktop, sm: colsMobile }, rowHeight: rowHeight, margin: [5, 5], style: {
|
|
1052
1051
|
width: customSectionStyles.width,
|
|
1053
1052
|
maxWidth: customSectionStyles.maxWidth,
|
|
1054
1053
|
minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
|
|
@@ -50,10 +50,10 @@ function clamp(num, min, max) {
|
|
|
50
50
|
}
|
|
51
51
|
function getGridAreaFromCB(props, device) {
|
|
52
52
|
var CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX, CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY, cols = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS, rows = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS;
|
|
53
|
-
var startXDesktop = CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX
|
|
54
|
-
var startYDesktop = CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY
|
|
55
|
-
var colsDesktop = cols
|
|
56
|
-
var rowsDesktop = rows
|
|
53
|
+
var startXDesktop = CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX;
|
|
54
|
+
var startYDesktop = CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY;
|
|
55
|
+
var colsDesktop = cols;
|
|
56
|
+
var rowsDesktop = rows;
|
|
57
57
|
if (device === 'DESKTOP') {
|
|
58
58
|
var colStart_1 = clamp(startXDesktop + 1, 1, Math.max(1, MAX_COL_DESKTOP - colsDesktop));
|
|
59
59
|
var rowStart_1 = clamp(startYDesktop + 1, 1, Infinity);
|
|
@@ -61,17 +61,17 @@ function getGridAreaFromCB(props, device) {
|
|
|
61
61
|
var colEnd_1 = clamp(colStart_1 + colsDesktop, colStart_1 + 1, MAX_COL_DESKTOP);
|
|
62
62
|
return "".concat(rowStart_1, " / ").concat(colStart_1, " / ").concat(rowEnd_1, " / ").concat(colEnd_1);
|
|
63
63
|
}
|
|
64
|
-
var startXMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE']
|
|
65
|
-
var startYMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE']
|
|
66
|
-
var colsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE']
|
|
67
|
-
var rowsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE']
|
|
64
|
+
var startXMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE'];
|
|
65
|
+
var startYMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE'];
|
|
66
|
+
var colsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE'];
|
|
67
|
+
var rowsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'];
|
|
68
68
|
var colStart = clamp(startXMobile + 1, 1, Math.max(1, MAX_COL_MOBILE - colsMobile));
|
|
69
69
|
var rowStart = clamp(startYMobile + 1, 1, Infinity);
|
|
70
70
|
var rowEnd = clamp(rowsMobile + rowStart, rowStart + 1, Infinity);
|
|
71
71
|
var colEnd = clamp(colStart + colsMobile, colStart + 1, MAX_COL_MOBILE);
|
|
72
72
|
return "".concat(rowStart, " / ").concat(colStart, " / ").concat(rowEnd, " / ").concat(colEnd);
|
|
73
73
|
}
|
|
74
|
-
var MAX_COL_MOBILE = 9;
|
|
75
|
-
var MAX_COL_DESKTOP = 25;
|
|
74
|
+
var MAX_COL_MOBILE = 9 * 2;
|
|
75
|
+
var MAX_COL_DESKTOP = 25 * 2;
|
|
76
76
|
exports.default = FlexGridItem;
|
|
77
77
|
var templateObject_1;
|
|
@@ -30,10 +30,10 @@ function parsePropPlacement(props, id, cbCode, zOrders, cbRestriction) {
|
|
|
30
30
|
var _a, _b, _c, _d;
|
|
31
31
|
var desktopLayout = {
|
|
32
32
|
i: id.toString(),
|
|
33
|
-
x: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX
|
|
34
|
-
y: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY
|
|
35
|
-
w: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS
|
|
36
|
-
h: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS
|
|
33
|
+
x: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX,
|
|
34
|
+
y: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY,
|
|
35
|
+
w: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS,
|
|
36
|
+
h: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS,
|
|
37
37
|
z: zOrders.desktop[id],
|
|
38
38
|
autoResize: cbCode === types_1.CB_ALL_CODES.CB_TEXT || cbCode === types_1.CB_ALL_CODES.CB_LIST,
|
|
39
39
|
minH: (_a = cbRestriction === null || cbRestriction === void 0 ? void 0 : cbRestriction.rowHMin) !== null && _a !== void 0 ? _a : 1,
|
|
@@ -41,10 +41,10 @@ function parsePropPlacement(props, id, cbCode, zOrders, cbRestriction) {
|
|
|
41
41
|
};
|
|
42
42
|
var mobileLayout = {
|
|
43
43
|
i: id.toString(),
|
|
44
|
-
x: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE']
|
|
45
|
-
y: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE']
|
|
46
|
-
w: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE']
|
|
47
|
-
h: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE']
|
|
44
|
+
x: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE'],
|
|
45
|
+
y: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE'],
|
|
46
|
+
w: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE'],
|
|
47
|
+
h: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'],
|
|
48
48
|
z: zOrders.mobile[id],
|
|
49
49
|
autoResize: cbCode === types_1.CB_ALL_CODES.CB_TEXT || cbCode === types_1.CB_ALL_CODES.CB_LIST,
|
|
50
50
|
minH: (_c = cbRestriction === null || cbRestriction === void 0 ? void 0 : cbRestriction.rowHMin) !== null && _c !== void 0 ? _c : 1,
|
|
@@ -191,7 +191,7 @@ var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props
|
|
|
191
191
|
paddingBottom: padding.bottom,
|
|
192
192
|
paddingRight: padding.right,
|
|
193
193
|
paddingLeft: padding.left
|
|
194
|
-
} }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ ref: containerRef, cols: isMobile ? 8 : 24, rowHeight: rowHeight, sectionRow: sectionRow !== null && sectionRow !== void 0 ? sectionRow : 0, style: {
|
|
194
|
+
} }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ ref: containerRef, cols: isMobile ? 8 * 2 : 24 * 2, rowHeight: rowHeight, sectionRow: sectionRow !== null && sectionRow !== void 0 ? sectionRow : 0, style: {
|
|
195
195
|
width: customSectionStyles.width,
|
|
196
196
|
maxWidth: customSectionStyles.maxWidth,
|
|
197
197
|
minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
|
|
@@ -201,7 +201,7 @@ var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props
|
|
|
201
201
|
return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
|
|
202
202
|
}) })) })) })) }) }));
|
|
203
203
|
});
|
|
204
|
-
var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid; /* Space between grid items */\n gap:
|
|
204
|
+
var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid; /* Space between grid items */\n gap: 5px;\n grid-auto-rows: minmax(", ", auto);\n grid-template-columns: repeat(", ", 1fr);\n grid-template-rows: repeat(\n ", ",\n minmax(", ", auto)\n );\n padding: 10px 10px;\n\n * {\n box-sizing: border-box;\n }\n"], ["\n display: grid; /* Space between grid items */\n gap: 5px;\n grid-auto-rows: minmax(", ", auto);\n grid-template-columns: repeat(", ", 1fr);\n grid-template-rows: repeat(\n ", ",\n minmax(", ", auto)\n );\n padding: 10px 10px;\n\n * {\n box-sizing: border-box;\n }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
|
|
205
205
|
var S_SectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
206
206
|
exports.default = react_1.default.memo(FlexGridCustomSection);
|
|
207
207
|
function getDefensiveFontSize(device, width) {
|