pds-dev-kit-web-test 2.4.44 → 2.4.45

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

@@ -367,13 +367,14 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         if (device === 'MOBILE') {
             var cellWidth_1 = width / MOBILE_GRID_COLS;
             setRowHeight(cellWidth_1 * 0.56);
-            baseFontSize !== 16 && setBaseFontSize(16);
+            baseFontSize !== 16 && setBaseFontSize(width * 0.0133);
             return;
         }
         var cellWidth = width / DESKTOP_GRID_COLS;
         setRowHeight(cellWidth * 0.56);
-        responsiveFontMode ? setBaseFontSize(cellWidth / 2.35) : setBaseFontSize(16);
+        responsiveFontMode ? setBaseFontSize(cellWidth / 2.35) : setBaseFontSize(width * 0.0133);
     };
+    console.log('basefontsize: ', baseFontSize);
     var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
     var breakpoints = device === 'DESKTOP' ? { lg: 100, sm: 0 } : { lg: 1200, sm: 480 };
     var innerRef = (0, react_1.useRef)(null);

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

@@ -29,16 +29,20 @@ 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"));
 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;
-    var _c = (0, useCLINK_1.default)({
+    var _a;
+    var _b = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _b.device, mode = _b.mode;
+    var index = props.index, _c = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _c.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _c.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _c.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _c.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_PLACEMENT_PROP_PLACEMENT = props.CB_PLACEMENT_PROP_PLACEMENT;
+    var cols = device === 'DESKTOP'
+        ? CB_PLACEMENT_PROP_PLACEMENT.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS
+        : CB_PLACEMENT_PROP_PLACEMENT['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE'];
+    var _d = (0, useCLINK_1.default)({
         src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
         openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
         internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
-    }), CLINKCursor = _c.CLINKCursor, onClickCLINK = _c.onClickCLINK;
-    var _d = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _d.style, textHoverStyle = _d.hoverStyle;
-    var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect;
+    }), CLINKCursor = _d.CLINKCursor, onClickCLINK = _d.onClickCLINK;
+    var _e = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _e.style, textHoverStyle = _e.hoverStyle;
+    var _f = (0, util_1.parseProperties)(props, device), propsStyle = _f.style, propsHoverStyle = _f.hoverStyle, layoutStyle = _f.layout, effect = _f.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     var googleFonts = (0, getGoogleFonts_1.getGoogleFontsFromTextCB)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
     (0, useGoogleFonts_1.default)({ fonts: googleFonts });
@@ -56,6 +60,11 @@ 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 } : {};
+    var rect = (_a = cbRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    var baseWidth = getBaseWidth(cols);
+    var fontsize = textStyle.fontSize;
+    console.log(fontsize);
+    // const rate = fontsize / baseWidth;
     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({ style: __assign(__assign({ height: 'fit-content' }, textStyle), { minWidth: '2ch' }), ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor, height: 'fit-content', minWidth: '2ch' }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
 }
 function getTextStyles(props, device) {
@@ -71,4 +80,10 @@ function getTextStyles(props, device) {
     ];
     return (0, textUtil_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'TEXT' });
 }
+function getBaseWidth(cols) {
+    if (cols === 1) {
+        return 40;
+    }
+    return 40 * cols + 10 * (cols - 1);
+}
 exports.default = Text;

package/package.json

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