pds-dev-kit-web-test 0.0.20 → 0.0.22

package/dist/src/sub/DynamicLayout/components/mobile/Section/Section.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ISectionTitle, ISectionDescription, ISectionButton } from '../../../types';
+import { ImageViewProps } from '../../pdsOriginal/hybrid/ImageView/ImageView';
+import { TextLabelProps } from '../../pdsOriginal/mobile/TextLabel/TextLabel';
+interface SectionSubComponents {
+    Title: React.FunctionComponent<ISectionTitle & TextLabelProps & {
+        lineHeight?: number;
+    }>;
+    Description: React.FunctionComponent<ISectionDescription & TextLabelProps & {
+        fontWeight?: string;
+    }>;
+    Image: React.FunctionComponent<ImageViewProps>;
+    Button: React.FunctionComponent<ISectionButton>;
+}
+declare const Section: SectionSubComponents;
+export default Section;

package/dist/src/sub/DynamicLayout/{mobile/components → components/mobile}/Section/Section.js

@@ -50,107 +50,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var pdsOriginal_1 = require("../../../common/components/pdsOriginal");
 var dynamicLayoutContext_1 = require("../../../dynamicLayoutContext");
-var YouTubeIframe_1 = __importDefault(require("../common/YouTubeIframe"));
-// SECTION
-var sectionContext = (0, react_1.createContext)(null);
-function Section(_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (react_1.default.createElement(sectionContext.Provider, { value: props },
-        react_1.default.createElement(S_MarginCollapsingBoundary, null,
-            react_1.default.createElement(S_Section, null,
-                react_1.default.createElement(Background, null),
-                children))));
-}
-var S_MarginCollapsingBoundary = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_Section = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  position: relative;\n  z-index: 0;\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  position: relative;\n  z-index: 0;\n"])));
-function Background() {
-    var context = (0, react_1.useContext)(sectionContext);
-    var id = context.id;
-    var _a = context.styles, backgroundMediaSrc = _a.backgroundMediaSrc, backgroundColorInHex = _a.backgroundColorInHex, backgroundOverlayColorInHex = _a.backgroundOverlayColorInHex, backgroundMediaType = _a.backgroundMediaType;
-    var backgroundRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)({ width: 0, height: 0 }), youtubeSize = _b[0], setYoutubeSize = _b[1];
-    (0, react_1.useEffect)(function () {
-        if (backgroundMediaType !== 'YOUTUBE')
-            return;
-        setYoutubeSize(getResponsiveYoutubeSize());
-    }, []);
-    var getResponsiveYoutubeSize = function () {
-        var backgroundWrapper = backgroundRef.current;
-        if (!backgroundWrapper)
-            return { width: 0, height: 0 };
-        var backgroundSize = {
-            width: backgroundWrapper.offsetWidth,
-            height: backgroundWrapper.offsetHeight
-        };
-        if (backgroundSize.width * backgroundSize.height === 0)
-            return { width: 0, height: 0 };
-        var isHorizontal = backgroundSize.width / backgroundSize.height > 1;
-        var isOverRatio = backgroundSize.width / backgroundSize.height > 16 / 9;
-        var youtubeSize = isHorizontal && isOverRatio
-            ? { width: backgroundSize.width, height: backgroundSize.width * (9 / 16) }
-            : { width: backgroundSize.height * (16 / 9), height: backgroundSize.height };
-        return youtubeSize;
-    };
-    (0, react_1.useEffect)(function () {
-        var _a;
-        if (backgroundMediaType !== 'YOUTUBE')
-            return;
-        function onResize() {
-            setYoutubeSize(getResponsiveYoutubeSize());
-        }
-        function onTouchMove(e) {
-            e.preventDefault();
-        }
-        window.addEventListener('resize', onResize);
-        (_a = backgroundRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('touchmove', onTouchMove, { passive: false });
-        return function () {
-            var _a;
-            window.removeEventListener('resize', onResize);
-            (_a = backgroundRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchmove', onTouchMove);
-        };
-    }, []);
-    var backgroundMedia = (0, react_1.useMemo)(function () {
-        switch (backgroundMediaType) {
-            case 'IMAGE':
-                return (react_1.default.createElement(pdsOriginal_1.ImageView, { src: backgroundMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }));
-            // case 'VIDEO':
-            // NOTE VIDEO타입 배경은 최초 scope에서 제외
-            // return <></>;
-            case 'YOUTUBE':
-                return (react_1.default.createElement(S_YoutubeContainer, __assign({}, youtubeSize),
-                    react_1.default.createElement(YouTubeIframe_1.default, { id: id, src: backgroundMediaSrc })));
-            default:
-                return react_1.default.createElement(react_1.default.Fragment, null);
-        }
-    }, [youtubeSize]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BackgroundWrapper, { ref: backgroundRef, color: backgroundColorInHex }, backgroundMediaSrc && backgroundMedia),
-        react_1.default.createElement(S_BackgroundOverlay, { color: backgroundOverlayColorInHex })));
-}
-var S_BackgroundWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  z-index: -2;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n"], ["\n  z-index: -2;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n"])), function (_a) {
-    var color = _a.color;
-    return color;
-});
-var S_BackgroundOverlay = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  z-index: -1;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n"], ["\n  z-index: -1;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n"])), function (_a) {
-    var color = _a.color;
-    return color;
-});
-var S_YoutubeContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n"])), function (_a) {
-    var height = _a.height;
-    return height + "px";
-}, function (_a) {
-    var width = _a.width;
-    return width + "px";
-});
+var pdsOriginal_1 = require("../../pdsOriginal");
 // TITLE
-function Title(_a) {
+function SectionTitle(_a) {
     var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.4 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
     return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-section-element-name": "Title", color: color, lineHeight: lineHeight },
         react_1.default.createElement(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
 }
-var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
+var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
 }, function (_a) {
@@ -158,12 +66,12 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (t
     return lineHeight;
 });
 // DESCRIPTION
-function Description(_a) {
+function SectionDescription(_a) {
     var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
     return (react_1.default.createElement(S_DescriptionStyleWrapper, { "x-dlayout-section-element-name": "Description", color: color, fontWeight: fontWeight },
         react_1.default.createElement(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
 }
-var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    ", ";\n  }\n"])), function (_a) {
+var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
 }, function (_a) {
@@ -171,16 +79,16 @@ var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7
     return fontWeight && "font-weight : " + fontWeight + ";";
 });
 // IMAGE
-function Image(_a) {
+function SectionImage(_a) {
     var imageViewProps = __rest(_a, []);
     return react_1.default.createElement(pdsOriginal_1.ImageView, __assign({ "x-dlayout-section-element-name": "Image" }, imageViewProps, { scaleType: "cover" }));
 }
 // BUTTON
-function Button(_a) {
+function SectionButton(_a) {
     var buttonType = _a.buttonType, backgroundColor = _a.backgroundColor, textColor = _a.textColor, text = _a.text, _b = _a.linkType, linkType = _b === void 0 ? 'NONE' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, borderColor = _a.borderColor;
-    var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), isPreview = _e.isPreview, navigationHandler = _e.navigationHandler;
+    var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), mode = _e.mode, isPreview = _e.isPreview, navigationHandler = _e.navigationHandler;
     var handleClickButton = function (e) {
-        if (isPreview)
+        if (isPreview !== null && isPreview !== void 0 ? isPreview : mode === 'PREVIEW')
             return;
         e.preventDefault();
         e.stopPropagation();
@@ -218,7 +126,7 @@ function Button(_a) {
             return react_1.default.createElement("button", { type: "button" }, "wrong type");
     }
 }
-var S_MainButtonBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  & > button {\n    border: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"], ["\n  & > button {\n    border: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+var S_MainButtonBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > button {\n    border: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"], ["\n  & > button {\n    border: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
     var borderWidth = _a.borderWidth, borderColor = _a.borderColor, state = _a.state, type = _a.type, theme = _a.theme;
     if (type === 'E' || type === 'F' || type === 'G' || type === 'H') {
         if (borderWidth && borderColor && state === 'normal') {
@@ -245,17 +153,18 @@ var S_MainButtonBox = styled_components_1.default.div(templateObject_8 || (templ
     }
     return theme.ui_cpnt_textlabel_sys_tertiary;
 });
-var S_TextButtonBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  & > button {\n    box-sizing: border-box;\n    background: none;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"], ["\n  & > button {\n    box-sizing: border-box;\n    background: none;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"])), function (_a) {
+var S_TextButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > button {\n    box-sizing: border-box;\n    background: none;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"], ["\n  & > button {\n    box-sizing: border-box;\n    background: none;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"])), function (_a) {
     var color = _a.color, state = _a.state, theme = _a.theme;
     if (state === 'normal') {
         return color;
     }
     return theme.ui_cpnt_textlabel_sys_tertiary;
 });
-Section.Title = Title;
-Section.Description = Description;
-Section.Image = Image;
-Section.Button = Button;
-Section.context = sectionContext;
+var Section = {
+    Title: SectionTitle,
+    Description: SectionDescription,
+    Image: SectionImage,
+    Button: SectionButton
+};
 exports.default = Section;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/sub/DynamicLayout/{mobile/components → components/mobile}/common/YouTubeIframe.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var TouTubeLinkParser_1 = __importDefault(require("../../../common/utils/TouTubeLinkParser"));
+var TouTubeLinkParser_1 = __importDefault(require("../../../utils/TouTubeLinkParser"));
 function YouTubeIframe(_a) {
     var id = _a.id, src = _a.src;
     var _b = (0, react_1.useState)(true), isYoutubeLoading = _b[0], setIsYoutubeLoading = _b[1];