pds-dev-kit-web-test 2.2.84 → 2.2.86

package/dist/src/sub/DynamicLayout/flexGridLayout/FlexGridLayout.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function FlexGridLayout(): JSX.Element;
+export default FlexGridLayout;

package/dist/src/sub/DynamicLayout/flexGridLayout/FlexGridLayout.js

@@ -0,0 +1,18 @@
+"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 __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");
+require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+function FlexGridLayout() {
+    return (0, jsx_runtime_1.jsx)(S_Layout, { children: "FlexGridLayout" });
+}
+var S_Layout = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: white;\n"], ["\n  background-color: white;\n"])));
+exports.default = FlexGridLayout;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/pagesPreviewMock.js

@@ -5416,7 +5416,7 @@ exports.sampleCustomsectionOnlyText = {
                         CB_CONTENT_PROP_CLINK_SPEC_SRC: 'https://publ.co',
                         CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'DISABLED'
                     },
-                    CB_CONTENT_PROP_TEXTOPTION: { CB_CONTENT_PROP_TEXTOPTION_SPEC_FITCONTENT: true },
+                    CB_CONTENT_PROP_TEXTOPTION: { CB_CONTENT_PROP_TEXTOPTION_SPEC_FITCONTENT: false },
                     CB_CONTENT_PROP_HOVER: {
                         CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
                     },

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

@@ -358,13 +358,20 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         var viewport = width + ((_a = padding === null || padding === void 0 ? void 0 : padding.left) !== null && _a !== void 0 ? _a : 0) + ((_b = padding === null || padding === void 0 ? void 0 : padding.right) !== null && _b !== void 0 ? _b : 0);
         if (device === 'MOBILE') {
             var cellWidth_1 = viewport / MOBILE_GRID_COLS;
-            var baseViewPort = 375;
-            var gap = baseViewPort - viewport;
-            if (gap > 0) {
-                var magicNumber = Math.pow((gap / 23.5), 1.1);
-                var resSize = 16 - magicNumber;
-                setBaseFontSize(resSize);
-            }
+            // const cellHeight = cellWidth * 0.56;
+            // const baseViewPort = 375;
+            // const gap = baseViewPort - viewport;
+            // // NOTE: 임시
+            // if (viewport > 480) {
+            //   setBaseFontSize(22);
+            // }
+            // if (gap > 0) {
+            //   const magicNumber = (gap / 22) ** 1.1;
+            //   const resSize = 16 - magicNumber;
+            //   console.log(resSize);
+            //   console.log(cellHeight / 1.641);
+            //   setBaseFontSize(resSize);
+            // }
             setRowHeight(cellWidth_1 * 0.56);
             return;
         }

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js

@@ -33,6 +33,7 @@ var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverB
 var S_CB_Box_1 = require("../components/S_CB_Box");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
+var useMaxFontAdjustment_1 = __importDefault(require("./useMaxFontAdjustment"));
 function Text(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var index = props.index, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
@@ -61,7 +62,10 @@ function Text(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box cb-text-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), effectCssProperties), layoutStyle), { cursor: CLINKCursor, paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0 }), hoverStyle: __assign(__assign({}, textHoverStyle), propsHoverStyle), onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_TextContent, __assign({ className: "cb-text-content", style: {
+    var baseFontSize = (0, useMaxFontAdjustment_1.default)(cbRef, textStyle.fontSize, mode);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: {
+                    fontSize: "".concat(baseFontSize, "px")
+                } }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box cb-text-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), effectCssProperties), layoutStyle), { cursor: CLINKCursor, paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0 }), hoverStyle: __assign(__assign({}, textHoverStyle), propsHoverStyle), onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_TextContent, __assign({ className: "cb-text-content", style: {
                             whiteSpace: 'pre-wrap',
                             wordBreak: 'break-word',
                             height: 'fit-content',

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/useMaxFontAdjustment.d.ts

@@ -0,0 +1,3 @@
+import type { DynamicLayoutProps } from '../../../../../../../DynamicLayout/types';
+declare const useMaxFontAdjustment: (ref: any, defaultSize: string, mode: DynamicLayoutProps['mode']) => number;
+export default useMaxFontAdjustment;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/useMaxFontAdjustment.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var DEFAULT_BASE_FONT = 16;
+var useMaxFontAdjustment = function (ref, defaultSize, mode) {
+    var _a = (0, react_1.useState)(DEFAULT_BASE_FONT), fontSize = _a[0], setFontSize = _a[1];
+    (0, react_1.useEffect)(function () {
+        if (mode !== 'PREVIEW') {
+            return;
+        }
+        if (!ref.current)
+            return;
+        var resizeObserver = new ResizeObserver(function (callback) {
+            var object = callback[0];
+            var height = object.contentRect.height;
+            var contentHeight = object.target.children[0].children[0].clientHeight;
+            var isOverflow = contentHeight > height;
+            if (isOverflow) {
+                setFontSize(function (prev) { return prev - 0.3; });
+                // setFontSize((prev) => {
+                //   const value = parseEmToNumber(prev);
+                //   if (value === null) {
+                //     return prev;
+                //   }
+                //   return `${(value - 0.3).toFixed(3)}em`;
+                // });
+            }
+        });
+        resizeObserver.observe(ref.current);
+        return function () { return resizeObserver.disconnect(); }; // clean u
+    }, [ref, fontSize, mode]);
+    console.log({ defaultSize: defaultSize, fontSize: fontSize });
+    return fontSize;
+};
+exports.default = useMaxFontAdjustment;
+function parseEmToNumber(value) {
+    var numericPart = value.replace('em', '').trim();
+    var result = parseFloat(numericPart);
+    if (isNaN(result)) {
+        return null;
+    }
+    return result;
+}

package/package.json

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