pds-dev-kit-web-test 0.0.22 → 0.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/common/assets/icons/fill/Chat.js +1 -1
- package/dist/src/common/assets/icons/fill/ChatOff.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/ChatOff.js +34 -0
- package/dist/src/common/assets/icons/fill/MicOff.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/MicOff.js +34 -0
- package/dist/src/common/assets/icons/fill/index.d.ts +2 -0
- package/dist/src/common/assets/icons/fill/index.js +4 -0
- package/dist/src/common/assets/icons/line/ChatOff.d.ts +4 -0
- package/dist/src/common/assets/icons/line/ChatOff.js +34 -0
- package/dist/src/common/assets/icons/line/Pages.js +2 -3
- package/dist/src/common/assets/icons/line/index.d.ts +1 -0
- package/dist/src/common/assets/icons/line/index.js +2 -0
- package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +6 -1
- package/dist/src/common/styles/colorSet/PaletteColor_light.json +6 -1
- package/dist/src/common/styles/colorSet/UIColor.json +5 -3
- package/dist/src/common/styles/colorSet/index.d.ts +14 -2
- package/dist/src/common/styles/colorSet/index.js +2 -2
- package/dist/src/common/styles/colorSet/ui-type.d.ts +2 -0
- package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts +1 -1
- package/dist/src/sub/DynamicLayout/DynamicLayout.js +66 -3
- package/dist/src/sub/DynamicLayout/components/Section/Section.js +12 -12
- package/dist/src/sub/DynamicLayout/components/{desktop/common → YouTubeIframe}/YouTubeIframe.d.ts +0 -0
- package/dist/src/sub/DynamicLayout/components/{desktop/common → YouTubeIframe}/YouTubeIframe.js +96 -51
- package/dist/src/sub/DynamicLayout/components/YouTubeIframe/index.d.ts +1 -0
- package/dist/src/sub/DynamicLayout/components/YouTubeIframe/index.js +8 -0
- package/dist/src/sub/DynamicLayout/components/desktop/common/index.d.ts +0 -1
- package/dist/src/sub/DynamicLayout/components/desktop/common/index.js +1 -3
- package/dist/src/sub/DynamicLayout/components/mobile/common/index.d.ts +0 -1
- package/dist/src/sub/DynamicLayout/components/mobile/common/index.js +1 -3
- package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/FooterSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/FooterSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/InfoBoxSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateC/desktop/D_TemplateC.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateD/desktop/D_TemplateD.js +1 -1
- package/dist/src/sub/DynamicLayout/types.d.ts +3 -1
- package/dist/storybook-static/{0.bd0d6a01.iframe.bundle.d.ts → 0.1e64cc00.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{0.bd0d6a01.iframe.bundle.js → 0.1e64cc00.iframe.bundle.js} +7 -7
- package/dist/storybook-static/{4.7657c50b.iframe.bundle.d.ts → 4.08a6743e.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{4.7657c50b.iframe.bundle.js → 4.08a6743e.iframe.bundle.js} +71 -71
- package/dist/storybook-static/{5.e4508546.iframe.bundle.d.ts → 5.fd119510.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{5.e4508546.iframe.bundle.js → 5.fd119510.iframe.bundle.js} +13 -13
- package/dist/storybook-static/{6.1ef60cd5.iframe.bundle.d.ts → 6.ed855029.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{6.1ef60cd5.iframe.bundle.js → 6.ed855029.iframe.bundle.js} +6 -6
- package/dist/storybook-static/{7.a68f8114.iframe.bundle.d.ts → 7.acdfc1e4.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{7.a68f8114.iframe.bundle.js → 7.acdfc1e4.iframe.bundle.js} +2 -2
- package/dist/storybook-static/{main.2acdfcf3.iframe.bundle.d.ts → main.3a848f92.iframe.bundle.d.ts} +200 -299
- package/dist/storybook-static/{main.2acdfcf3.iframe.bundle.js → main.3a848f92.iframe.bundle.js} +6301 -857
- package/dist/storybook-static/{runtime~main.13ad5ca1.iframe.bundle.d.ts → runtime~main.c94cafde.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{runtime~main.13ad5ca1.iframe.bundle.js → runtime~main.c94cafde.iframe.bundle.js} +1 -1
- package/dist/storybook-static/{vendors~main.ae66b3ac.iframe.bundle.d.ts → vendors~main.6ff7334c.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{vendors~main.ae66b3ac.iframe.bundle.js → vendors~main.6ff7334c.iframe.bundle.js} +2567 -665
- package/package.json +1 -1
- package/release-note.md +4 -9
- package/dist/src/sub/DynamicLayout/components/mobile/common/YouTubeIframe.d.ts +0 -7
- package/dist/src/sub/DynamicLayout/components/mobile/common/YouTubeIframe.js +0 -120
|
@@ -29,6 +29,6 @@ var react_1 = __importDefault(require("react"));
|
|
|
29
29
|
var Chat = function (_a) {
|
|
30
30
|
var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
|
|
31
31
|
return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
|
|
32
|
-
react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M16.
|
|
32
|
+
react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M16.2851,11.1978 C15.6311,11.1978 15.1011,10.6678 15.1011,10.0138 C15.1011,9.3598 15.6311,8.8298 16.2851,8.8298 C16.9391,8.8298 17.4691,9.3598 17.4691,10.0138 C17.4691,10.6678 16.9391,11.1978 16.2851,11.1978 M12.0001,11.1978 C11.3461,11.1978 10.8161,10.6678 10.8161,10.0138 C10.8161,9.3598 11.3461,8.8298 12.0001,8.8298 C12.6541,8.8298 13.1841,9.3598 13.1841,10.0138 C13.1841,10.6678 12.6541,11.1978 12.0001,11.1978 M7.7151,11.1978 C7.0611,11.1978 6.5311,10.6678 6.5311,10.0138 C6.5311,9.3598 7.0611,8.8298 7.7151,8.8298 C8.3691,8.8298 8.8991,9.3598 8.8991,10.0138 C8.8991,10.6678 8.3691,11.1978 7.7151,11.1978 M18.7361,2.0178 L5.2641,2.0178 C3.3311,2.0178 1.7641,3.5848 1.7641,5.5178 L1.7641,14.5708 C1.7641,16.5038 3.3311,18.0708 5.2641,18.0708 L10.9171,18.0708 L14.3671,21.2068 C15.3871,22.1338 17.0241,21.4098 17.0241,20.0308 L17.0241,18.0708 L18.7361,18.0708 C20.6691,18.0708 22.2361,16.5038 22.2361,14.5708 L22.2361,5.5178 C22.2361,3.5848 20.6691,2.0178 18.7361,2.0178" })));
|
|
33
33
|
};
|
|
34
34
|
exports.default = Chat;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
var react_1 = __importDefault(require("react"));
|
|
29
|
+
var ChatOff = function (_a) {
|
|
30
|
+
var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
|
|
31
|
+
return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
|
|
32
|
+
react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M2.038,4.1588 L6.984,9.1048 C6.714,9.3218 6.531,9.6408 6.531,10.0138 C6.531,10.6678 7.061,11.1978 7.715,11.1978 C8.088,11.1978 8.407,11.0148 8.624,10.7448 L17.024,19.1448 L17.024,20.0308 C17.024,21.4098 15.387,22.1338 14.367,21.2068 L10.917,18.0708 L5.264,18.0708 C3.331,18.0708 1.764,16.5038 1.764,14.5708 L1.764,5.5178 C1.764,5.0358 1.862,4.5768 2.038,4.1588 Z M2.6416,1.5809 L20.4186,19.3589 C20.7116,19.6519 20.7116,20.1259 20.4186,20.4189 C20.2726,20.5659 20.0806,20.6389 19.8886,20.6389 C19.6966,20.6389 19.5046,20.5659 19.3586,20.4189 L1.5806,2.6419 C1.2876,2.3489 1.2876,1.8739 1.5806,1.5809 C1.8736,1.2879 2.3486,1.2879 2.6416,1.5809 Z M18.7361,2.0178 C20.6691,2.0178 22.2361,3.5848 22.2361,5.5178 L22.2361,14.5708 C22.2361,16.0718 21.2861,17.3408 19.9591,17.8388 L12.8911,10.7708 C13.0671,10.5638 13.1841,10.3058 13.1841,10.0138 C13.1841,9.3598 12.6541,8.8298 12.0001,8.8298 C11.7081,8.8298 11.4501,8.9468 11.2431,9.1218 L4.2921,2.1708 C4.6021,2.0808 4.9241,2.0178 5.2641,2.0178 Z M16.2851,8.8298 C15.6311,8.8298 15.1011,9.3598 15.1011,10.0138 C15.1011,10.6678 15.6311,11.1978 16.2851,11.1978 C16.9391,11.1978 17.4691,10.6678 17.4691,10.0138 C17.4691,9.3598 16.9391,8.8298 16.2851,8.8298 Z" })));
|
|
33
|
+
};
|
|
34
|
+
exports.default = ChatOff;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
var react_1 = __importDefault(require("react"));
|
|
29
|
+
var MicOff = function (_a) {
|
|
30
|
+
var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
|
|
31
|
+
return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
|
|
32
|
+
react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M5.4514,8.6793 C5.8654,8.6793 6.2014,9.0153 6.2014,9.4293 L6.2014,12.4583 C6.2014,15.6553 8.8034,18.2573 12.0004,18.2573 C13.1744,18.2573 14.2664,17.9033 15.1804,17.3013 L16.2554,18.3763 C15.2474,19.1033 14.0504,19.5853 12.7504,19.7183 L12.7504,22.1143 L17.4284,22.1143 C17.8424,22.1143 18.1784,22.4503 18.1784,22.8643 C18.1784,23.2783 17.8424,23.6143 17.4284,23.6143 L6.5714,23.6143 C6.1574,23.6143 5.8214,23.2783 5.8214,22.8643 C5.8214,22.4503 6.1574,22.1143 6.5714,22.1143 L11.2504,22.1143 L11.2504,19.7183 C7.5764,19.3413 4.7014,16.2293 4.7014,12.4583 L4.7014,9.4293 C4.7014,9.0153 5.0374,8.6793 5.4514,8.6793 Z M3.6421,2.5814 L21.4191,20.3584 C21.7121,20.6514 21.7121,21.1264 21.4191,21.4194 C21.2731,21.5654 21.0811,21.6384 20.8891,21.6384 C20.6971,21.6384 20.5051,21.5654 20.3581,21.4194 L2.5811,3.6414 C2.2881,3.3484 2.2881,2.8744 2.5811,2.5814 C2.8741,2.2884 3.3491,2.2884 3.6421,2.5814 Z M7.6042,9.725 L14.1082,16.229 C13.4792,16.575 12.7682,16.79 12.0002,16.79 C9.5722,16.79 7.6042,14.822 7.6042,12.394 L7.6042,9.725 Z M18.5485,8.679 C18.9625,8.679 19.2985,9.015 19.2985,9.429 L19.2985,12.458 C19.2985,13.81 18.9245,15.073 18.2815,16.16 L17.1765,15.056 C17.5705,14.273 17.7985,13.392 17.7985,12.458 L17.7985,9.429 C17.7985,9.015 18.1345,8.679 18.5485,8.679 Z M11.9997,1.1355 C14.4277,1.1355 16.3957,3.1035 16.3957,5.5315 L16.3957,12.3945 C16.3957,12.9515 16.2807,13.4805 16.0917,13.9705 L7.6087,5.4875 C7.6327,3.0805 9.5877,1.1355 11.9997,1.1355 Z" })));
|
|
33
|
+
};
|
|
34
|
+
exports.default = MicOff;
|
|
@@ -8,6 +8,7 @@ declare const fillIcons: {
|
|
|
8
8
|
readonly ic_chat: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
9
9
|
readonly ic_chat_counseling: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
10
10
|
readonly ic_chat_crm: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
11
|
+
readonly ic_chat_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
11
12
|
readonly ic_checkbox_indeterminate: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
12
13
|
readonly ic_checkbox_on: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
13
14
|
readonly ic_cloud_download: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
@@ -21,6 +22,7 @@ declare const fillIcons: {
|
|
|
21
22
|
readonly ic_help_window: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
22
23
|
readonly ic_live: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
23
24
|
readonly ic_login: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
25
|
+
readonly ic_mic_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
24
26
|
readonly ic_mic_on: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
25
27
|
readonly ic_more: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
26
28
|
readonly ic_paper_plane: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
@@ -11,6 +11,7 @@ var Camera_1 = __importDefault(require("./Camera"));
|
|
|
11
11
|
var Chat_1 = __importDefault(require("./Chat"));
|
|
12
12
|
var ChatCounseling_1 = __importDefault(require("./ChatCounseling"));
|
|
13
13
|
var ChatCrm_1 = __importDefault(require("./ChatCrm"));
|
|
14
|
+
var ChatOff_1 = __importDefault(require("./ChatOff"));
|
|
14
15
|
var CheckboxIndeterminate_1 = __importDefault(require("./CheckboxIndeterminate"));
|
|
15
16
|
var CheckboxOn_1 = __importDefault(require("./CheckboxOn"));
|
|
16
17
|
var CloudDownload_1 = __importDefault(require("./CloudDownload"));
|
|
@@ -24,6 +25,7 @@ var Heart_1 = __importDefault(require("./Heart"));
|
|
|
24
25
|
var HelpWindow_1 = __importDefault(require("./HelpWindow"));
|
|
25
26
|
var Live_1 = __importDefault(require("./Live"));
|
|
26
27
|
var Login_1 = __importDefault(require("./Login"));
|
|
28
|
+
var MicOff_1 = __importDefault(require("./MicOff"));
|
|
27
29
|
var MicOn_1 = __importDefault(require("./MicOn"));
|
|
28
30
|
var More_1 = __importDefault(require("./More"));
|
|
29
31
|
var PaperPlane_1 = __importDefault(require("./PaperPlane"));
|
|
@@ -64,6 +66,7 @@ var fillIcons = {
|
|
|
64
66
|
ic_chat: Chat_1.default,
|
|
65
67
|
ic_chat_counseling: ChatCounseling_1.default,
|
|
66
68
|
ic_chat_crm: ChatCrm_1.default,
|
|
69
|
+
ic_chat_off: ChatOff_1.default,
|
|
67
70
|
ic_checkbox_indeterminate: CheckboxIndeterminate_1.default,
|
|
68
71
|
ic_checkbox_on: CheckboxOn_1.default,
|
|
69
72
|
ic_cloud_download: CloudDownload_1.default,
|
|
@@ -77,6 +80,7 @@ var fillIcons = {
|
|
|
77
80
|
ic_help_window: HelpWindow_1.default,
|
|
78
81
|
ic_live: Live_1.default,
|
|
79
82
|
ic_login: Login_1.default,
|
|
83
|
+
ic_mic_off: MicOff_1.default,
|
|
80
84
|
ic_mic_on: MicOn_1.default,
|
|
81
85
|
ic_more: More_1.default,
|
|
82
86
|
ic_paper_plane: PaperPlane_1.default,
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
var react_1 = __importDefault(require("react"));
|
|
29
|
+
var ChatOff = function (_a) {
|
|
30
|
+
var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
|
|
31
|
+
return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
|
|
32
|
+
react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M2.0375,4.1596 L3.2765,5.3976 C3.2735,5.4376 3.2635,5.4766 3.2635,5.5176 L3.2635,14.5706 C3.2635,15.6736 4.1615,16.5706 5.2635,16.5706 L11.4965,16.5706 L11.9255,16.9606 L15.3755,20.0966 C15.4045,20.1226 15.4165,20.1226 15.4255,20.1226 C15.4355,20.1226 15.5235,20.1196 15.5235,20.0306 L15.5235,17.6446 L17.0235,19.1446 L17.0235,20.0306 C17.0235,20.9826 16.2435,21.6226 15.4255,21.6226 C15.0575,21.6226 14.6825,21.4936 14.3665,21.2066 L10.9165,18.0706 L5.2635,18.0706 C3.3315,18.0706 1.7635,16.5036 1.7635,14.5706 L1.7635,5.5176 C1.7635,5.0356 1.8615,4.5766 2.0375,4.1596 Z M1.5804,1.5813 C1.8734,1.2883 2.3484,1.2883 2.6414,1.5813 L20.4184,19.3583 C20.7114,19.6513 20.7114,20.1263 20.4184,20.4193 C20.2724,20.5653 20.0804,20.6393 19.8884,20.6393 C19.6964,20.6393 19.5044,20.5653 19.3584,20.4193 L1.5804,2.6423 C1.2874,2.3493 1.2874,1.8743 1.5804,1.5813 Z M18.7359,2.0173 C20.6689,2.0173 22.2359,3.5843 22.2359,5.5173 L22.2359,14.5703 C22.2359,16.0713 21.2869,17.3413 19.9589,17.8383 L18.6909,16.5703 L18.7359,16.5703 C19.8389,16.5703 20.7359,15.6733 20.7359,14.5703 L20.7359,5.5173 C20.7359,4.4143 19.8389,3.5173 18.7359,3.5173 L5.6379,3.5173 L4.2919,2.1713 C4.6029,2.0813 4.9239,2.0173 5.2639,2.0173 Z M6.9839,9.1052 L8.6239,10.7452 C8.4069,11.0142 8.0879,11.1982 7.7149,11.1982 C7.0609,11.1982 6.5309,10.6672 6.5309,10.0132 C6.5309,9.6402 6.7139,9.3222 6.9839,9.1052 Z M16.2851,8.8297 C16.9391,8.8297 17.4691,9.3597 17.4691,10.0137 C17.4691,10.6677 16.9391,11.1977 16.2851,11.1977 C15.6311,11.1977 15.1011,10.6677 15.1011,10.0137 C15.1011,9.3597 15.6311,8.8297 16.2851,8.8297 Z M12.0001,8.8295 C12.6541,8.8295 13.1841,9.3595 13.1841,10.0135 C13.1841,10.3055 13.0671,10.5645 12.8911,10.7705 L11.2431,9.1225 C11.4491,8.9465 11.7081,8.8295 12.0001,8.8295 Z" })));
|
|
33
|
+
};
|
|
34
|
+
exports.default = ChatOff;
|
|
@@ -30,8 +30,7 @@ var Pages = function (_a) {
|
|
|
30
30
|
var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
|
|
31
31
|
return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
|
|
32
32
|
react_1.default.createElement("g", { fill: "none", fillRule: "evenodd" },
|
|
33
|
-
react_1.default.createElement("path", { fill: color, d: "M16.0157,10.3251
|
|
34
|
-
react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "
|
|
35
|
-
react_1.default.createElement("polyline", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", points: "19.729 8.408 14.013 8.408 14.013 2.692" }))));
|
|
33
|
+
react_1.default.createElement("path", { fill: color, d: "M16.0157,10.3251 L7.9847,10.3251 C7.4327,10.3251 6.9847,10.7731 6.9847,11.3251 L6.9847,15.3241 C6.9847,15.8761 7.4327,16.3241 7.9847,16.3241 L16.0157,16.3241 C16.5677,16.3241 17.0157,15.8761 17.0157,15.3241 L17.0157,11.3251 C17.0157,10.7731 16.5677,10.3251 16.0157,10.3251 L16.0157,10.3251 Z" }),
|
|
34
|
+
react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M14.071,2.691 C14.339,2.691 14.595,2.798 14.783,2.989 L19.818,8.093 C20.003,8.281 20.106,8.533 20.106,8.796 L20.106,18.309 C20.106,19.966 18.763,21.309 17.106,21.309 L6.894,21.309 C5.237,21.309 3.894,19.966 3.894,18.309 L3.894,5.691 C3.894,4.034 5.237,2.691 6.894,2.691 L14.071,2.691 Z M14.0133,2.6915 L14.0133,8.4075 L19.7293,8.4075 L14.0133,2.6915 Z M7.6223,18.3237 L16.3773,18.3237" }))));
|
|
36
35
|
};
|
|
37
36
|
exports.default = Pages;
|
|
@@ -30,6 +30,7 @@ declare const lineIcons: {
|
|
|
30
30
|
readonly ic_chat: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
31
31
|
readonly ic_chat_counseling: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
32
32
|
readonly ic_chat_crm: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
33
|
+
readonly ic_chat_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
33
34
|
readonly ic_check: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
34
35
|
readonly ic_checkbox_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
35
36
|
readonly ic_clip: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
@@ -33,6 +33,7 @@ var ChannelSetting_1 = __importDefault(require("./ChannelSetting"));
|
|
|
33
33
|
var Chat_1 = __importDefault(require("./Chat"));
|
|
34
34
|
var ChatCounseling_1 = __importDefault(require("./ChatCounseling"));
|
|
35
35
|
var ChatCrm_1 = __importDefault(require("./ChatCrm"));
|
|
36
|
+
var ChatOff_1 = __importDefault(require("./ChatOff"));
|
|
36
37
|
var Check_1 = __importDefault(require("./Check"));
|
|
37
38
|
var CheckboxOff_1 = __importDefault(require("./CheckboxOff"));
|
|
38
39
|
var Clip_1 = __importDefault(require("./Clip"));
|
|
@@ -212,6 +213,7 @@ var lineIcons = {
|
|
|
212
213
|
ic_chat: Chat_1.default,
|
|
213
214
|
ic_chat_counseling: ChatCounseling_1.default,
|
|
214
215
|
ic_chat_crm: ChatCrm_1.default,
|
|
216
|
+
ic_chat_off: ChatOff_1.default,
|
|
215
217
|
ic_check: Check_1.default,
|
|
216
218
|
ic_checkbox_off: CheckboxOff_1.default,
|
|
217
219
|
ic_clip: Clip_1.default,
|
|
@@ -228,5 +228,10 @@
|
|
|
228
228
|
"sys_component_base_19": "white/opacity65",
|
|
229
229
|
"sys_cpnt_pagination_dot_01": "white",
|
|
230
230
|
"sys_cpnt_pagination_dot_02": "white/opacity50",
|
|
231
|
-
"sys_component_base_white_opacity50": "white/opacity50"
|
|
231
|
+
"sys_component_base_white_opacity50": "white/opacity50",
|
|
232
|
+
"sys_component_base_20": "white/opacity08",
|
|
233
|
+
"sys_component_base_22": "grey950",
|
|
234
|
+
"sys_component_base_21": "darkred500/opacity40",
|
|
235
|
+
"sys_component_border_white_opacity20": "white/opacity20",
|
|
236
|
+
"sys_component_base_23": "darkgrey100/opacity65"
|
|
232
237
|
}
|
|
@@ -228,5 +228,10 @@
|
|
|
228
228
|
"sys_component_base_19": "white/opacity65",
|
|
229
229
|
"sys_cpnt_pagination_dot_01": "grey400",
|
|
230
230
|
"sys_cpnt_pagination_dot_02": "white/opacity50",
|
|
231
|
-
"sys_component_base_white_opacity50": "white/opacity50"
|
|
231
|
+
"sys_component_base_white_opacity50": "white/opacity50",
|
|
232
|
+
"sys_component_base_20": "white/opacity08",
|
|
233
|
+
"sys_component_base_22": "grey950",
|
|
234
|
+
"sys_component_base_21": "red500/opacity40",
|
|
235
|
+
"sys_component_border_white_opacity20": "white/opacity20",
|
|
236
|
+
"sys_component_base_23": "darkgrey100/opacity65"
|
|
232
237
|
}
|
|
@@ -645,8 +645,10 @@
|
|
|
645
645
|
"ui_cpnt_refund_text_status_issued": "sys_widget_orange_01",
|
|
646
646
|
"ui_cpnt_refund_text_status_refunded": "sys_widget_success_01",
|
|
647
647
|
"ui_cpnt_divider_white_01": "sys_component_base_19",
|
|
648
|
-
"ui_cpnt_timer_base_01": "
|
|
649
|
-
"ui_cpnt_timer_base_timeup": "
|
|
648
|
+
"ui_cpnt_timer_base_01": "sys_component_base_23",
|
|
649
|
+
"ui_cpnt_timer_base_timeup": "sys_component_base_21",
|
|
650
650
|
"ui_66": "sys_component_base_black_opacity50",
|
|
651
|
-
"ui_67": "sys_component_base_white_opacity50"
|
|
651
|
+
"ui_67": "sys_component_base_white_opacity50",
|
|
652
|
+
"ui_cpnt_videoplayer_gradient_3": "sys_component_base_black_opacity50",
|
|
653
|
+
"ui_68": "sys_component_base_22"
|
|
652
654
|
}
|
|
@@ -79,7 +79,7 @@ declare const colorSet: {
|
|
|
79
79
|
opacity90: string;
|
|
80
80
|
facebookblue: string;
|
|
81
81
|
};
|
|
82
|
-
readonly
|
|
82
|
+
readonly PaletteColor_light: {
|
|
83
83
|
sys_container_background_01: string;
|
|
84
84
|
sys_container_background_02: string;
|
|
85
85
|
sys_container_background_03: string;
|
|
@@ -310,8 +310,13 @@ declare const colorSet: {
|
|
|
310
310
|
sys_cpnt_pagination_dot_01: string;
|
|
311
311
|
sys_cpnt_pagination_dot_02: string;
|
|
312
312
|
sys_component_base_white_opacity50: string;
|
|
313
|
+
sys_component_base_20: string;
|
|
314
|
+
sys_component_base_22: string;
|
|
315
|
+
sys_component_base_21: string;
|
|
316
|
+
sys_component_border_white_opacity20: string;
|
|
317
|
+
sys_component_base_23: string;
|
|
313
318
|
};
|
|
314
|
-
readonly
|
|
319
|
+
readonly PaletteColor_Dark: {
|
|
315
320
|
sys_container_background_01: string;
|
|
316
321
|
sys_container_background_02: string;
|
|
317
322
|
sys_container_background_03: string;
|
|
@@ -542,6 +547,11 @@ declare const colorSet: {
|
|
|
542
547
|
sys_cpnt_pagination_dot_01: string;
|
|
543
548
|
sys_cpnt_pagination_dot_02: string;
|
|
544
549
|
sys_component_base_white_opacity50: string;
|
|
550
|
+
sys_component_base_20: string;
|
|
551
|
+
sys_component_base_22: string;
|
|
552
|
+
sys_component_base_21: string;
|
|
553
|
+
sys_component_border_white_opacity20: string;
|
|
554
|
+
sys_component_base_23: string;
|
|
545
555
|
};
|
|
546
556
|
readonly UIColor: {
|
|
547
557
|
ui_cpnt_button_fill_base_primary: string;
|
|
@@ -1194,6 +1204,8 @@ declare const colorSet: {
|
|
|
1194
1204
|
ui_cpnt_timer_base_timeup: string;
|
|
1195
1205
|
ui_66: string;
|
|
1196
1206
|
ui_67: string;
|
|
1207
|
+
ui_cpnt_videoplayer_gradient_3: string;
|
|
1208
|
+
ui_68: string;
|
|
1197
1209
|
};
|
|
1198
1210
|
};
|
|
1199
1211
|
export default colorSet;
|
|
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
/* eslint-disable import/order */
|
|
7
7
|
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
|
8
|
-
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
9
8
|
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
9
|
+
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
10
10
|
var UIColor_json_1 = __importDefault(require("./UIColor.json"));
|
|
11
11
|
var colorSet = {
|
|
12
12
|
SemanticColor: SemanticColor_json_1.default,
|
|
13
|
-
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
|
14
13
|
PaletteColor_light: PaletteColor_light_json_1.default,
|
|
14
|
+
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
|
15
15
|
UIColor: UIColor_json_1.default
|
|
16
16
|
};
|
|
17
17
|
exports.default = colorSet;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DynamicLayoutProps } from './types';
|
|
3
|
-
declare function DynamicLayout({ device, mode, isPreview, sections, navigationHandler }: DynamicLayoutProps): JSX.Element;
|
|
3
|
+
declare function DynamicLayout({ device, mode, isPreview, sections, navigationHandler, scrollDownTargetSectionId, onClickEditSection }: DynamicLayoutProps): JSX.Element;
|
|
4
4
|
export default DynamicLayout;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
2
6
|
var __assign = (this && this.__assign) || function () {
|
|
3
7
|
__assign = Object.assign || function(t) {
|
|
4
8
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -10,6 +14,25 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
14
|
};
|
|
11
15
|
return __assign.apply(this, arguments);
|
|
12
16
|
};
|
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
|
+
if (k2 === undefined) k2 = k;
|
|
19
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
13
36
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
37
|
var t = {};
|
|
15
38
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -34,14 +57,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
34
57
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
35
58
|
};
|
|
36
59
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
-
var react_1 =
|
|
60
|
+
var react_1 = __importStar(require("react"));
|
|
61
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
38
62
|
var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
|
|
39
63
|
var sections_1 = require("./sections");
|
|
40
64
|
function DynamicLayout(_a) {
|
|
41
|
-
var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler;
|
|
65
|
+
var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, onClickEditSection = _a.onClickEditSection;
|
|
42
66
|
var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
|
|
43
67
|
.sort(function (a, b) { return a.order - b.order; });
|
|
44
|
-
return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler } },
|
|
68
|
+
return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler } },
|
|
69
|
+
mode === 'EDIT' && onClickEditSection && (react_1.default.createElement(EditModeSections, { scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })),
|
|
70
|
+
mode !== 'EDIT' &&
|
|
71
|
+
filteredSortedSection.map(function (section) { return react_1.default.createElement(SectionMatcher, __assign({ key: section.id }, section)); })));
|
|
45
72
|
}
|
|
46
73
|
function SectionMatcher(_a) {
|
|
47
74
|
var props = __rest(_a, []);
|
|
@@ -62,3 +89,39 @@ function SectionMatcher(_a) {
|
|
|
62
89
|
}
|
|
63
90
|
}
|
|
64
91
|
exports.default = DynamicLayout;
|
|
92
|
+
function EditModeSections(_a) {
|
|
93
|
+
var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, onClickEditSection = _a.onClickEditSection;
|
|
94
|
+
return (react_1.default.createElement(react_1.default.Fragment, null, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionBox, { scrollIntoThisSection: section.id === scrollDownTargetSectionId, key: section.id, onClick: function () { return onClickEditSection(section); } },
|
|
95
|
+
react_1.default.createElement(SectionMatcher, __assign({ key: section.id }, section)))); })));
|
|
96
|
+
}
|
|
97
|
+
function SectionBox(_a) {
|
|
98
|
+
var scrollIntoThisSection = _a.scrollIntoThisSection, children = _a.children, onClick = _a.onClick;
|
|
99
|
+
var _b = (0, react_1.useState)(false), isHover = _b[0], setHover = _b[1];
|
|
100
|
+
var sectionRef = (0, react_1.useRef)(null);
|
|
101
|
+
(0, react_1.useEffect)(function () {
|
|
102
|
+
var _a;
|
|
103
|
+
if (!sectionRef) {
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
if (scrollIntoThisSection) {
|
|
107
|
+
(_a = sectionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
|
|
108
|
+
}
|
|
109
|
+
}, [scrollIntoThisSection]);
|
|
110
|
+
var onMouseEnter = function () {
|
|
111
|
+
setHover(true);
|
|
112
|
+
};
|
|
113
|
+
var onMouseLeave = function () {
|
|
114
|
+
setHover(false);
|
|
115
|
+
};
|
|
116
|
+
return (react_1.default.createElement(S_SectionBox, { ref: sectionRef, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
|
|
117
|
+
isHover && (react_1.default.createElement(DimmedEditOverlay, null,
|
|
118
|
+
react_1.default.createElement(S_EditButton, null, "\uC774 Section \uC218\uC815\uD558\uAE30"))),
|
|
119
|
+
children));
|
|
120
|
+
}
|
|
121
|
+
var S_EditButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: #ddf68c;\n font-weight: bold;\n padding: ", ";\n"], ["\n background-color: #ddf68c;\n font-weight: bold;\n padding: ", ";\n"])), function (_a) {
|
|
122
|
+
var theme = _a.theme;
|
|
123
|
+
return theme.spacing.spacingE;
|
|
124
|
+
});
|
|
125
|
+
var S_SectionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
126
|
+
var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n background-color: #f7f7f7c4;\n z-index: 10;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n position: absolute;\n background-color: #f7f7f7c4;\n z-index: 10;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
127
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -50,8 +50,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
50
50
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
51
51
|
var react_1 = __importStar(require("react"));
|
|
52
52
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
53
|
-
var desktop_1 = require("../desktop");
|
|
54
53
|
var pdsOriginal_1 = require("../pdsOriginal");
|
|
54
|
+
var YouTubeIframe_1 = require("../YouTubeIframe");
|
|
55
55
|
var sectionContext_1 = require("./sectionContext");
|
|
56
56
|
function Section(_a) {
|
|
57
57
|
var children = _a.children, props = __rest(_a, ["children"]);
|
|
@@ -69,18 +69,13 @@ function Background() {
|
|
|
69
69
|
var _a = context.styles, backgroundMediaSrc = _a.backgroundMediaSrc, backgroundColorInHex = _a.backgroundColorInHex, backgroundOverlayColorInHex = _a.backgroundOverlayColorInHex, backgroundMediaType = _a.backgroundMediaType;
|
|
70
70
|
var backgroundRef = (0, react_1.useRef)(null);
|
|
71
71
|
var _b = (0, react_1.useState)({ width: 0, height: 0 }), youtubeSize = _b[0], setYoutubeSize = _b[1];
|
|
72
|
-
(0, react_1.
|
|
73
|
-
if (backgroundMediaType !== 'YOUTUBE')
|
|
74
|
-
return;
|
|
75
|
-
setYoutubeSize(getResponsiveYoutubeSize());
|
|
76
|
-
}, []);
|
|
77
|
-
var getResponsiveYoutubeSize = function () {
|
|
72
|
+
var getResponsiveYoutubeSize = (0, react_1.useCallback)(function () {
|
|
78
73
|
var backgroundWrapper = backgroundRef.current;
|
|
79
74
|
if (!backgroundWrapper)
|
|
80
75
|
return { width: 0, height: 0 };
|
|
81
76
|
var backgroundSize = {
|
|
82
|
-
width: backgroundWrapper.
|
|
83
|
-
height: backgroundWrapper.
|
|
77
|
+
width: backgroundWrapper.getBoundingClientRect().width,
|
|
78
|
+
height: backgroundWrapper.getBoundingClientRect().height
|
|
84
79
|
};
|
|
85
80
|
var isHorizontal = backgroundSize.width / backgroundSize.height > 1;
|
|
86
81
|
var isOverRatio = backgroundSize.width / backgroundSize.height > 16 / 9;
|
|
@@ -88,7 +83,12 @@ function Background() {
|
|
|
88
83
|
? { width: backgroundSize.width, height: backgroundSize.width * (9 / 16) }
|
|
89
84
|
: { width: backgroundSize.height * (16 / 9), height: backgroundSize.height };
|
|
90
85
|
return youtubeSize;
|
|
91
|
-
};
|
|
86
|
+
}, [backgroundRef.current]);
|
|
87
|
+
(0, react_1.useEffect)(function () {
|
|
88
|
+
if (backgroundMediaType !== 'YOUTUBE')
|
|
89
|
+
return;
|
|
90
|
+
setYoutubeSize(getResponsiveYoutubeSize());
|
|
91
|
+
}, [getResponsiveYoutubeSize]);
|
|
92
92
|
(0, react_1.useEffect)(function () {
|
|
93
93
|
if (backgroundMediaType !== 'YOUTUBE')
|
|
94
94
|
return;
|
|
@@ -109,11 +109,11 @@ function Background() {
|
|
|
109
109
|
// return <></>;
|
|
110
110
|
case 'YOUTUBE':
|
|
111
111
|
return (react_1.default.createElement(S_YoutubeContainer, __assign({}, youtubeSize),
|
|
112
|
-
react_1.default.createElement(
|
|
112
|
+
react_1.default.createElement(YouTubeIframe_1.YouTubeIframe, { id: id, src: backgroundMediaSrc })));
|
|
113
113
|
default:
|
|
114
114
|
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
115
115
|
}
|
|
116
|
-
}, [youtubeSize]);
|
|
116
|
+
}, [youtubeSize, id, backgroundMediaSrc]);
|
|
117
117
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
118
118
|
react_1.default.createElement(S_BackgroundWrapper, { ref: backgroundRef, color: backgroundColorInHex }, backgroundMediaSrc && backgroundMedia),
|
|
119
119
|
react_1.default.createElement(S_BackgroundOverlay, { color: backgroundOverlayColorInHex })));
|
package/dist/src/sub/DynamicLayout/components/{desktop/common → YouTubeIframe}/YouTubeIframe.d.ts
RENAMED
|
File without changes
|