pds-dev-kit-web-test 2.7.110 → 2.7.111

package/dist/src/sub/DynamicLayout/utils/groupUtils.js

@@ -101,7 +101,7 @@ function RenderPedigreeRecursively(_a) {
             .filter(function (row) { return row >= 0 && row <= bounding_1.h; });
         var isGBPinned_1 = pinnedGBs.includes(block.blockId);
         var defaultHeight = getMaxHeight({ cols: bounding_1.w, rows: bounding_1.h, x: bounding_1.x, y: bounding_1.y }, rowHeight);
-        return ((0, jsx_runtime_1.jsxs)(S_GroupItem, __assign({ cols: bounding_1.w, sectionRow: bounding_1.h, rowHeight: rowHeight, selectedRows: relativeSelectedRows_1, style: {
+        return ((0, jsx_runtime_1.jsxs)(S_GroupItem, __assign({ cols: bounding_1.w, sectionRow: bounding_1.h, isEditMode: isEditMode, rowHeight: rowHeight, selectedRows: relativeSelectedRows_1, style: {
                 gridArea: gridAreaObjToString(relativeGridArea_1),
                 display: 'grid',
                 zIndex: device === 'DESKTOP'
@@ -136,7 +136,7 @@ function RenderPedigreeRecursively(_a) {
                 gridArea: gridAreaObjToString(relativeGridArea),
                 pointerEvents: isEditMode ? 'none' : 'auto',
                 boxShadow: isEditMode ? '0 0 0 2px red' : ''
-            }, showPinned: parentGroupArea ? false : true, isParentGroupPinned: isParentGroupPinned }) }, cb.id)
+            }, showPinned: isEditMode && !parentGroupArea ? false : true, isParentGroupPinned: isParentGroupPinned }) }, cb.id)
     // </S_GridItem>
     );
 }
@@ -209,7 +209,7 @@ function getMaxHeight(props, rowHeight) {
     // const height = rowsMobile * rowHeight + (rowsMobile - 1) * gap;
     // return height;
 }
-var S_GroupItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-shadow: 0 0 0 3px blue;\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  position: relative; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n"], ["\n  box-shadow: 0 0 0 3px blue;\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  position: relative; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n"])), function (props) { return props.cols; }, function (props) {
+var S_GroupItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-shadow: ", ";\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  position: relative; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n"], ["\n  box-shadow: ", ";\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  position: relative; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n"])), function (props) { return (props.isEditMode ? '0 0 0 2px blue' : 'none'); }, function (props) { return props.cols; }, function (props) {
     //     // 전체 행 개수만큼 배열을 생성하여 각 행의 CSS 값을 정의합니다.
     return Array.from({ length: props.sectionRow })
         .map(function (_, index) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.7.110",
+  "version": "2.7.111",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/dist/src/sub/DynamicLayout/sections/CustomSectionWithGroup.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { ISection } from '../types';
-import type { Layout } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
-export type LayoutsType = {
-    sm: Layout;
-    lg: Layout;
-};
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISection & React.RefAttributes<unknown>>>;
-export default _default;

package/dist/src/sub/DynamicLayout/sections/CustomSectionWithGroup.js

@@ -1,213 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/no-unused-vars */
-var react_1 = __importStar(require("react"));
-var ErrorBoundary_1 = require("../../DynamicLayout/components/Section/ErrorBoundary");
-var dynamicLayoutContext_1 = require("../../DynamicLayout/dynamicLayoutContext");
-var styled_components_1 = __importDefault(require("styled-components"));
-var components_1 = require("../components");
-var gleStyles_1 = require("../gleStyles");
-var FlexGridItem_1 = __importDefault(require("./CustomSection/FlexGridItem"));
-var useResizableObserver_1 = require("./CustomSection/hooks/useResizableObserver");
-var util_1 = require("./CustomSection/util");
-var parseSectionPadding_1 = __importDefault(require("./CustomSection/util/layoutPropParsers/parseSectionPadding"));
-var GRID_CELL_MIN = 24;
-var DESKTOP_GRID_COLS = 24;
-var MOBILE_GRID_COLS = 8;
-var GLE_MIN_WIDTH_DESKTOP_PX = "".concat(GRID_CELL_MIN * DESKTOP_GRID_COLS, "px");
-var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
-var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
-    var _a;
-    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, editingSectionId = _b.editingSectionId, mode = _b.mode, shortcutKeyMode = _b.shortcutKeyMode, sectionActionHandler = _b.sectionActionHandler;
-    var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    var _c = jsonProperties, _d = _c.data, CB_PLACEMENT_PROP_SECTION = _d.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _d.CB_LAYOUT_PROP_PADDING, zOrders = _c.zOrders;
-    var containerRef = (0, react_1.useRef)(null);
-    var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
-    var _e = (0, react_1.useState)(null), selectedCB = _e[0], setSelectedCB = _e[1];
-    var gleRef = (0, react_1.useRef)(null);
-    var isMobile = device === 'MOBILE';
-    var isEditMode = mode === 'EDIT';
-    // const layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
-    // const [layouts] = useState<LayoutsType>(() => {
-    //   const { lg, sm } = parsePlacement(componentBlocks ?? []);
-    //   return {
-    //     lg,
-    //     sm
-    //   };
-    // });
-    (0, react_1.useEffect)(function () {
-        if (editingSectionId !== props.id) {
-            setSelectedCB(null);
-            // breakGroupCB();
-        }
-    }, [editingSectionId]);
-    // NOTE: 추후에 event를 외부에서 전달받게하거나, 아예 상태를 끌어올리거나 해야합니다.
-    (0, react_1.useLayoutEffect)(function () {
-        if (props.id !== editingSectionId) {
-            return;
-        }
-        if (!shortcutKeyMode) {
-            return;
-        }
-        if (shortcutKeyMode === 'SELECT_ALL') {
-            if ((componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.length) === 1) {
-                setSelectedCB(componentBlocks[0].id);
-                return;
-            }
-            // makeAllInOneGroup();
-            return;
-        }
-        if (shortcutKeyMode === 'MANUAL_BULK_BREAK') {
-            // breakGroupCB();
-            setSelectedCB(null);
-            return;
-        }
-    }, [shortcutKeyMode, setSelectedCB]);
-    (0, react_1.useLayoutEffect)(function () {
-        if (props.id !== editingSectionId) {
-            return;
-        }
-        if (shortcutKeyMode === 'MANUAL_COLLISION_SELECT') {
-            if (!selectedCB || selectedCB === 'BULK') {
-                return;
-            }
-            // makeCollisionGroup(selectedCB);
-            // sectionActionHandler &&
-            //   sectionActionHandler({
-            //     type: '@CUSTOMSECTION/BLOCK_CLICKED',
-            //     payload: {
-            //      block:
-            //     }
-            //   });
-            setSelectedCB('BULK');
-        }
-    }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
-    var _f = (0, util_1.parseCustomSectionPlacement)({
-        isMobile: isMobile,
-        customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
-    var customSectionStyles = {
-        minHeight: "".concat(minHeight, "vh"),
-        width: '100%',
-        maxWidth: isFullWidth ? '' : "".concat(width, "px")
-    };
-    var onClickSection = function () {
-        if (!isEditMode) {
-            return;
-        }
-        setSelectedCB(null);
-        sectionActionHandler &&
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/SECTION_CLICKED',
-                payload: {
-                    sectionId: props.id
-                }
-            });
-    };
-    var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
-    var sectionRow = CB_PLACEMENT_PROP_SECTION[device === 'DESKTOP'
-        ? 'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS'
-        : 'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE'];
-    var rowHeight = (function () {
-        if (!size.width) {
-            return 50;
-        }
-        if (device === 'MOBILE') {
-            var cellWidth_1 = size.width / MOBILE_GRID_COLS;
-            return cellWidth_1 * 0.56;
-        }
-        var cellWidth = size.width / DESKTOP_GRID_COLS;
-        return cellWidth * 0.56;
-    })();
-    var baseFontSize = (function () {
-        var _a, _b;
-        if (!size.width) {
-            return 16;
-        }
-        var responsiveFontMode = !!((_b = (_a = props.jsonProperties) === null || _a === void 0 ? void 0 : _a.data.CB_CONTENT_PROP_SECTION) === null || _b === void 0 ? void 0 : _b.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE);
-        if (device === 'MOBILE') {
-            if (responsiveFontMode) {
-                return size.width * 0.0421;
-            }
-            if (size.width < 327) {
-                return Math.max(getDefensiveFontSize(device, size.width), 14);
-            }
-            return 16;
-        }
-        // NOTE: Desktop
-        if (responsiveFontMode) {
-            return size.width * 0.0133;
-        }
-        if (size.width < 1200) {
-            return Math.max(getDefensiveFontSize(device, size.width), 16);
-        }
-        return 16;
-    })();
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, { children: (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
-                        minHeight: customSectionStyles.minHeight,
-                        paddingTop: padding.top,
-                        paddingBottom: padding.bottom,
-                        paddingRight: padding.right,
-                        paddingLeft: padding.left
-                    } }, { 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: {
-                            width: customSectionStyles.width,
-                            maxWidth: customSectionStyles.maxWidth,
-                            minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
-                            fontSize: "".concat(baseFontSize, "px")
-                        } }, { children: (_a = props.componentBlocks) === null || _a === void 0 ? void 0 : _a.map(function (cb, index) {
-                            var _a;
-                            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));
-                        }) })) })) })) }) }));
-});
-var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\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: 10px;\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"); });
-var S_SectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-exports.default = react_1.default.memo(FlexGridCustomSection);
-function getDefensiveFontSize(device, width) {
-    if (device === 'MOBILE') {
-        return width * (0.0000868 * width + 0.0202);
-    }
-    return width * (0.0000246 * width - 0.01618);
-}
-var templateObject_1, templateObject_2;