pds-dev-kit-web-test 0.2.17 → 0.2.18

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

@@ -28,20 +28,14 @@ var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Button(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var CB_STYLE_PROP_BTNCOLOR = props.CB_STYLE_PROP_BTNCOLOR, _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_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
-    var onClickBox = (0, useCLINK_1.default)({
+    var _c = (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
-    });
-    var handleOnClick = function () {
-        if (mode === 'EDIT') {
-            return;
-        }
-        onClickBox();
-    };
-    var _c = getBTNStyles(props.CB_STYLE_PROP_BTNTEXT, device), btnTextStyle = _c.style, btnTextHoverStyle = _c.hoverStyle;
-    var _d = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _d.style, btnColorHoverStyle = _d.hoverStyle;
-    var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect;
+    }), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
+    var _d = getBTNStyles(props.CB_STYLE_PROP_BTNTEXT, device), btnTextStyle = _d.style, btnTextHoverStyle = _d.hoverStyle;
+    var _e = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _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';
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';
@@ -50,7 +44,7 @@ function Button(props) {
     var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 1, freezeOnceVisible: true });
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), hoverStyle: __assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: handleOnClick, ref: cbRef }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK, ref: cbRef }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0)] }, void 0));
 }
 function getBTNStyles(props, device) {
     var availableSpecCodes = [

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

@@ -46,40 +46,35 @@ var util_1 = require("../../../../util");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Image(props) {
-    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _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_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
-    var onClickBox = (0, useCLINK_1.default)({
+    var device = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext).device;
+    var CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _a = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _a.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _a.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _a.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
+    var _b = (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
-    });
+    }), onClickCLINK = _b.onClickCLINK, CLINKCursor = _b.CLINKCursor;
     var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, effect = _c.effect;
     var cbRef = (0, react_1.useRef)(null);
     var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 1, freezeOnceVisible: true });
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
-    var handleOnClick = function () {
-        if (mode === 'EDIT')
-            return;
-        onClickBox();
-    };
-    return ((0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign({}, layout), effectCssProperties), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, ref: cbRef, onClick: handleOnClick }, { children: (0, jsx_runtime_1.jsx)(S_Image, __assign({ src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: style, hoverStyle: hoverStyle }, { children: (0, jsx_runtime_1.jsx)("img", { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, style: { visibility: 'hidden', width: '100%', height: '100%' } }, void 0) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign({}, layout), effectCssProperties), { cursor: CLINKCursor }), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, ref: cbRef, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, __assign({ src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: style, hoverStyle: hoverStyle }, { children: (0, jsx_runtime_1.jsx)("img", { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, style: { visibility: 'hidden', width: '100%', height: '100%' } }, void 0) }), void 0) }), void 0));
 }
-var S_Image = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-image: ", ";\n  background-repeat: no-repeat;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"], ["\n  background-image: ", ";\n  background-repeat: no-repeat;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"])), function (_a) {
+var S_Image = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"], ["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"])), function (_a) {
     var src = _a.src;
     return "url(" + src + ")";
 }, function (_a) {
     var normalStyle = _a.normalStyle;
     var isContain = normalStyle.backgroundSize === 'contain';
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, normalStyle), { backgroundPosition: isContain ? 'unset' : normalStyle.backgroundPosition, height: isContain ? 'auto' : '100%', width: isContain ? 'auto' : '100%' }));
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, normalStyle), { backgroundPosition: isContain ? 'center' : normalStyle.backgroundPosition }));
 }, function (_a) {
     var hoverStyle = _a.hoverStyle, normalStyle = _a.normalStyle;
     var isContain = hoverStyle.backgroundSize
         ? hoverStyle.backgroundSize === 'contain'
         : normalStyle.backgroundSize === 'contain';
     return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), __assign(__assign({}, hoverStyle), { backgroundPosition: isContain
-            ? 'unset'
-            : hoverStyle.backgroundPosition || normalStyle.backgroundPosition, height: isContain ? 'auto' : '100%', width: isContain ? 'auto' : '100%' }));
+            ? 'center'
+            : hoverStyle.backgroundPosition || normalStyle.backgroundPosition }));
 }, function (_a) {
     var normalStyle = _a.normalStyle;
     var isContain = normalStyle.backgroundSize === 'contain';

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

@@ -27,13 +27,13 @@ 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 _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;
-    var onClickBox = (0, useCLINK_1.default)({
+    var _c = (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
-    });
-    var _c = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _c.style, textHoverStyle = _c.hoverStyle;
-    var _d = (0, util_1.parseProperties)(props, device), propsStyle = _d.style, propsHoverStyle = _d.hoverStyle, layoutStyle = _d.layout, effect = _d.effect;
+    }), 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;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';
@@ -41,11 +41,8 @@ function Text(props) {
     var cbRef = (0, react_1.useRef)(null);
     var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 1, freezeOnceVisible: true });
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
-    var isOnClickUsable = CB_CONTENT_PROP_CLINK_SPEC_TYPE !== 'DISABLED' &&
-        mode !== 'EDIT' &&
-        CB_CONTENT_PROP_CLINK_SPEC_SRC.length > 0;
     var effectCssProperties = isVisible ? effect : {};
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (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), { display: 'flex', whiteSpace: 'pre' }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { display: 'flex', whiteSpace: 'pre' }), onClick: isOnClickUsable ? onClickBox : undefined, ref: cbRef }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (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', wordBreak: 'keep-all', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre', wordBreak: 'keep-all' }), onClick: onClickCLINK, ref: cbRef }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0)] }, void 0));
 }
 function getTextStyles(props, device) {
     var availableSpecCodes = [

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/hooks/useCLINK.d.ts

@@ -4,5 +4,8 @@ declare type Props = {
     openNewTab: boolean;
     type: CB_CONTENT_PROP_CLINK['CB_CONTENT_PROP_CLINK_SPEC_TYPE'];
 };
-export default function useCLINK(props: Props): () => void;
+export default function useCLINK(props: Props): {
+    CLINKCursor: string;
+    onClickCLINK: () => void;
+};
 export {};

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

@@ -5,23 +5,21 @@ var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamic
 // NOTE: link기능은 탄력적일 필요가 없음.
 function useCLINK(props) {
     var src = props.src, openNewTab = props.openNewTab, type = props.type;
-    var navigationHandler = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).navigationHandler;
+    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), navigationHandler = _a.navigationHandler, mode = _a.mode;
     var navType = type === 'INTERNAL' ? 'INTERNAL_LINK' : 'WEB_LINK';
+    var CLINKCursor = mode === 'EDIT' || type === 'DISABLED' ? 'auto' : 'pointer';
     function onClickCLINK() {
-        if (!src || type === 'DISABLED') {
-            return;
-        }
-        // NOTE: EDIT 모드에서는 작동 안해야함. cursor..?
-        if (openNewTab) {
-            window.open(src, '_blank', 'noopener');
+        if (!src || type === 'DISABLED' || mode === 'EDIT') {
             return;
         }
         if (typeof navigationHandler === 'function') {
-            navigationHandler(navType, src);
+            navigationHandler(navType, src, { openNewTab: openNewTab });
             return;
         }
-        // NOTE: error or do other action.
     }
-    return onClickCLINK;
+    return {
+        CLINKCursor: CLINKCursor,
+        onClickCLINK: onClickCLINK
+    };
 }
 exports.default = useCLINK;

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

@@ -88,12 +88,12 @@ function parseStyleTextToCSSProp(_a) {
         if (cssPropertyKey === 'alignItems') {
             if (hoverValue === null || hoverValue === undefined) {
                 return {
-                    style: __assign(__assign({}, acc.style), (_o = {}, _o[cssPropertyKey] = getVerticalPositionValue(String(value)), _o)),
+                    style: __assign(__assign({}, acc.style), (_o = {}, _o[cssPropertyKey] = getVerticalPositionValue(String(value)), _o.display = 'flex', _o)),
                     hoverStyle: __assign({}, acc.hoverStyle)
                 };
             }
             return {
-                style: __assign(__assign({}, acc.style), (_p = {}, _p[cssPropertyKey] = getVerticalPositionValue(String(value)), _p)),
+                style: __assign(__assign({}, acc.style), (_p = {}, _p[cssPropertyKey] = getVerticalPositionValue(String(value)), _p.display = 'flex', _p)),
                 hoverStyle: __assign(__assign({}, acc.hoverStyle), (_q = {}, _q[cssPropertyKey] = getVerticalPositionValue(String(hoverValue)), _q))
             };
         }
@@ -175,11 +175,11 @@ function getFontName(value) {
 function getHorizontalPositionValue(value) {
     switch (value) {
         case 'LEFT':
-            return { justifyContent: 'flex-start', textAlign: 'left' };
+            return { display: 'flex', justifyContent: 'flex-start', textAlign: 'left' };
         case 'RIGHT':
-            return { justifyContent: 'flex-end', textAlign: 'right' };
+            return { display: 'flex', justifyContent: 'flex-end', textAlign: 'right' };
         case 'CENTER':
-            return { justifyContent: 'center', textAlign: 'center' };
+            return { display: 'flex', justifyContent: 'center', textAlign: 'center' };
         default:
             return {};
     }

package/dist/src/sub/DynamicLayout/types.d.ts

@@ -219,11 +219,14 @@ export declare type DynamicLayoutProps = {
     sections: ISection[];
     scrollDownTargetSectionId?: number;
     editingSectionId?: number;
-    navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
+    navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string, action?: NavHandlerAction) => void;
     onClickEditSection?: (section: ISection) => void;
     sectionActionHandler?: (action: TypeOfSectionAction) => void;
     programmedSectionComponents?: IProgrammedSectionComponents;
 };
+export declare type NavHandlerAction = {
+    openNewTab: boolean;
+};
 export declare type SubscriptionProductType = 'FREE_INFINITE' | 'FREE_FINITE' | 'ONCE_INFINITE' | 'ONCE_FINITE' | 'COUPON_FREE_INFINITE' | 'COUPON_FREE_FINITE' | 'COUPON_ONCE_INFINITE' | 'COUPON_ONCE_FINITE' | 'SUBSCRIPTION_30DAYS' | 'SUBSCRIPTION_90DAYS' | 'SUBSCRIPTION_180DAYS' | 'SUBSCRIPTION_365DAYS';
 declare type ExpiryPeriodInDaysType = 1 | 3 | 7 | 14 | 30;
 export declare type IMembershipCardTemplate = {

package/package.json

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