pds-dev-kit-web-test 2.5.370 → 2.5.372
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/desktop/components/BasicListItem/BasicListItem.d.ts +2 -1
- package/dist/src/desktop/components/BasicListItem/BasicListItem.js +11 -2
- package/dist/src/desktop/components/BasicListItem/Contents.d.ts +3 -1
- package/dist/src/desktop/components/BasicListItem/Contents.js +2 -2
- package/dist/src/mobile/components/BasicListItem/BasicListItem.d.ts +2 -1
- package/dist/src/mobile/components/BasicListItem/BasicListItem.js +11 -2
- package/dist/src/mobile/components/BasicListItem/Contents.d.ts +3 -1
- package/dist/src/mobile/components/BasicListItem/Contents.js +2 -2
- package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js +1 -1
- package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js +1 -11
- package/dist/src/sub/DynamicLayout/components/Section/util/parseSectionBackgroundMediaData.js +1 -3
- package/dist/src/sub/DynamicLayout/mocks.d.ts +0 -184
- package/dist/src/sub/DynamicLayout/mocks.js +3 -14
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.js +0 -3
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/types.d.ts +0 -10
- package/dist/src/sub/DynamicLayout/sections/CustomSection/types.d.ts +4 -11
- package/dist/src/sub/DynamicLayout/sections/CustomSection/types.js +0 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseProperties.d.ts +2 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts +1 -11
- package/dist/src/sub/DynamicLayout/sections/FlexGridCustomSection.js +2 -2
- package/dist/src/sub/DynamicLayout/types.d.ts +0 -4
- package/package.json +1 -1
- package/release-note.md +2 -2
- package/dist/src/sub/DynamicLayout/components/Section/components/VideoBGMedia.d.ts +0 -8
- package/dist/src/sub/DynamicLayout/components/Section/components/VideoBGMedia.js +0 -62
- package/dist/src/sub/DynamicLayout/mock_video_cb.d.ts +0 -368
- package/dist/src/sub/DynamicLayout/mock_video_cb.js +0 -371
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/VideoPlayer.d.ts +0 -5
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/VideoPlayer.js +0 -104
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/index.d.ts +0 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/index.js +0 -8
@@ -15,6 +15,7 @@ export type BasicListItemProps = {
|
|
15
15
|
iconFillType?: 'fill' | 'line';
|
16
16
|
displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
|
17
17
|
captionText?: PDSTextType;
|
18
|
+
captionTextColorTheme?: 'none' | 'active' | 'inactive';
|
18
19
|
iBtn1IconName?: PDSIconType;
|
19
20
|
iBtn1IconFillType?: 'fill' | 'line';
|
20
21
|
iBtn2IconName?: PDSIconType;
|
@@ -51,5 +52,5 @@ export type StyleProps = {
|
|
51
52
|
onlyLeftArea?: boolean;
|
52
53
|
dividerType?: 'none' | 'solid';
|
53
54
|
};
|
54
|
-
declare function BasicListItem({ selectionMode, state, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, mBtnState, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
|
55
|
+
declare function BasicListItem({ selectionMode, state, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, captionTextColorTheme, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, mBtnState, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
|
55
56
|
export default BasicListItem;
|
@@ -25,7 +25,7 @@ var Contents_1 = __importDefault(require("./Contents"));
|
|
25
25
|
var LeftBox_1 = require("./LeftBox");
|
26
26
|
var RightBox_1 = require("./RightBox");
|
27
27
|
function BasicListItem(_a) {
|
28
|
-
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, titleText = _a.titleText, _d = _a.titleTextColorTheme, titleTextColorTheme = _d === void 0 ? 'none' : _d, descText = _a.descText, _e = _a.badgeMode, badgeMode = _e === void 0 ? 'none' : _e, _f = _a.badgeStatus, badgeStatus = _f === void 0 ? 'inactive' : _f, _g = _a.imageIconMode, imageIconMode = _g === void 0 ? 'none' : _g, _h = _a.imageShapeType, imageShapeType = _h === void 0 ? 'round' : _h, imageSrc = _a.imageSrc, iconName = _a.iconName, _j = _a.iconFillType, iconFillType = _j === void 0 ? 'line' : _j, _k = _a.displayType, displayType = _k === void 0 ? 'none' : _k, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName,
|
28
|
+
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, titleText = _a.titleText, _d = _a.titleTextColorTheme, titleTextColorTheme = _d === void 0 ? 'none' : _d, descText = _a.descText, _e = _a.badgeMode, badgeMode = _e === void 0 ? 'none' : _e, _f = _a.badgeStatus, badgeStatus = _f === void 0 ? 'inactive' : _f, _g = _a.imageIconMode, imageIconMode = _g === void 0 ? 'none' : _g, _h = _a.imageShapeType, imageShapeType = _h === void 0 ? 'round' : _h, imageSrc = _a.imageSrc, iconName = _a.iconName, _j = _a.iconFillType, iconFillType = _j === void 0 ? 'line' : _j, _k = _a.displayType, displayType = _k === void 0 ? 'none' : _k, captionText = _a.captionText, _l = _a.captionTextColorTheme, captionTextColorTheme = _l === void 0 ? 'none' : _l, iBtn1IconName = _a.iBtn1IconName, _m = _a.iBtn1IconFillType, iBtn1IconFillType = _m === void 0 ? 'line' : _m, iBtn2IconName = _a.iBtn2IconName, _o = _a.iBtn2IconFillType, iBtn2IconFillType = _o === void 0 ? 'line' : _o, _p = _a.mBtnFillType, mBtnFillType = _p === void 0 ? 'fill' : _p, mBtnText = _a.mBtnText, _q = _a.mBtnState, mBtnState = _q === void 0 ? 'normal' : _q, _r = _a.dividerType, dividerType = _r === void 0 ? 'none' : _r, _s = _a.titleFontWeight, titleFontWeight = _s === void 0 ? 'regular' : _s, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _t = _a.switchState, switchState = _t === void 0 ? 'normal' : _t, _u = _a.switchStatus, switchStatus = _u === void 0 ? 'off' : _u, _v = _a.spacingMode, spacingMode = _v === void 0 ? 'use' : _v, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch;
|
29
29
|
var methods = (0, react_hook_form_1.useFormContext)();
|
30
30
|
var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
|
31
31
|
var handleIBtn1Click = function (e) {
|
@@ -75,7 +75,16 @@ function BasicListItem(_a) {
|
|
75
75
|
}
|
76
76
|
return 'sysTextError';
|
77
77
|
}
|
78
|
-
|
78
|
+
function captionTextColor() {
|
79
|
+
if (state === 'disabled') {
|
80
|
+
return 'sysTextTertiary';
|
81
|
+
}
|
82
|
+
if (captionTextColorTheme === 'active') {
|
83
|
+
return 'sysTextBrandSeconVariant';
|
84
|
+
}
|
85
|
+
return 'sysTextTertiary';
|
86
|
+
}
|
87
|
+
return ((0, jsx_runtime_1.jsx)(S_BasicListItem, __assign({ "x-pds-name": "BasicListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", state: state, displayType: displayType, selectionMode: selectionMode, isSelected: isSelected, onClick: handleClick, hasOnClick: !!onClick, spacingMode: spacingMode }, { children: (0, jsx_runtime_1.jsxs)(S_BasicListItemBox, __assign({ imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode, dividerType: dividerType }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' }, { children: [selectionMode === 'check' && checkboxId && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { id: checkboxId }), selectionMode === 'radio' && radioValue && radioId && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Radio, { id: radioId, value: radioValue, onChange: onClickRadio })), badgeMode === 'left' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Badge, { status: badgeStatus }), imageIconMode === 'image' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { src: imageSrc, shape: imageShapeType }), imageIconMode === 'icon' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Icon, { name: iconName, fill: iconFillType === 'fill' })), (0, jsx_runtime_1.jsxs)(Contents_1.default, { children: [(0, jsx_runtime_1.jsx)(Contents_1.default.Title, { text: titleText, colorTheme: titleTextColor(), font: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular' }), captionText && (0, jsx_runtime_1.jsx)(Contents_1.default.Caption, { text: captionText, colorTheme: captionTextColor() })] })] })), (0, jsx_runtime_1.jsxs)(RightBox_1.RightBox, __assign({ hasFixedHeight: displayType === 'text' }, { children: [(displayType === 'text' || displayType === 'ibtn_text') && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Description, { text: descText, icon: displayType === 'ibtn_text' ? ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click, state: state })) : undefined })), displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click, state: state })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn2IconName, fill: iBtn2IconFillType === 'fill', onClick: onClickIBtn2, state: state }), (0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click, state: state })] })), displayType === 'mbtn' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.MainButton, { text: mBtnText, fill: mBtnFillType === 'fill', state: state === 'disabled' ? 'disabled' : mBtnState, onClick: onClickMBtn })), displayType === 'switch' && switchName && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Switch, { name: switchName, state: state === 'disabled' ? 'disabled' : switchState, status: switchStatus, onClick: onClickSwitch }))] }))] })) })));
|
79
88
|
}
|
80
89
|
var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n cursor: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n cursor: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: ", ";\n"])), function (_a) {
|
81
90
|
var theme = _a.theme, isSelected = _a.isSelected, state = _a.state;
|
@@ -1,4 +1,5 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
+
import type { TextLabelProps } from '../TextLabel/TextLabel';
|
2
3
|
import type { PDSTextType } from '../../../common/types';
|
3
4
|
type ContentsPropTypes = React.FunctionComponent & {
|
4
5
|
Title: React.FC<TitlePropTypes>;
|
@@ -6,11 +7,12 @@ type ContentsPropTypes = React.FunctionComponent & {
|
|
6
7
|
};
|
7
8
|
type TitlePropTypes = {
|
8
9
|
text: PDSTextType;
|
9
|
-
colorTheme: '
|
10
|
+
colorTheme: TextLabelProps['colorTheme'];
|
10
11
|
font: 'body2Bold' | 'body2Regular';
|
11
12
|
};
|
12
13
|
type CaptionPropTypes = {
|
13
14
|
text: PDSTextType;
|
15
|
+
colorTheme: TextLabelProps['colorTheme'];
|
14
16
|
};
|
15
17
|
declare const Contents: ContentsPropTypes;
|
16
18
|
export default Contents;
|
@@ -20,8 +20,8 @@ var Title = function (_a) {
|
|
20
20
|
return ((0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, colorTheme: colorTheme, styleTheme: font, singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) }));
|
21
21
|
};
|
22
22
|
var Caption = function (_a) {
|
23
|
-
var text = _a.text;
|
24
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, colorTheme:
|
23
|
+
var text = _a.text, colorTheme = _a.colorTheme;
|
24
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, colorTheme: colorTheme, styleTheme: "caption1Regular", textAlign: "left", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })] }));
|
25
25
|
};
|
26
26
|
var S_TextBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n"], ["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n"])));
|
27
27
|
var S_TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n justify-content: center;\n width: 100%;\n"], ["\n justify-content: center;\n width: 100%;\n"])));
|
@@ -15,6 +15,7 @@ export type BasicListItemProps = {
|
|
15
15
|
iconFillType?: 'fill' | 'line';
|
16
16
|
displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
|
17
17
|
captionText?: PDSTextType;
|
18
|
+
captionTextColorTheme?: 'none' | 'active' | 'inactive';
|
18
19
|
iBtn1IconName?: PDSIconType;
|
19
20
|
iBtn1IconFillType?: 'fill' | 'line';
|
20
21
|
iBtn2IconName?: PDSIconType;
|
@@ -50,5 +51,5 @@ export type StyleProps = {
|
|
50
51
|
spacingMode?: 'none' | 'use';
|
51
52
|
onlyLeftArea?: boolean;
|
52
53
|
};
|
53
|
-
declare function BasicListItem({ selectionMode, state, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, mBtnState, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
|
54
|
+
declare function BasicListItem({ selectionMode, state, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, captionTextColorTheme, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, mBtnState, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, spacingMode, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
|
54
55
|
export default BasicListItem;
|
@@ -25,7 +25,7 @@ var Contents_1 = __importDefault(require("./Contents"));
|
|
25
25
|
var LeftBox_1 = require("./LeftBox");
|
26
26
|
var RightBox_1 = require("./RightBox");
|
27
27
|
function BasicListItem(_a) {
|
28
|
-
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, titleText = _a.titleText, _d = _a.titleTextColorTheme, titleTextColorTheme = _d === void 0 ? 'none' : _d, descText = _a.descText, _e = _a.badgeMode, badgeMode = _e === void 0 ? 'none' : _e, _f = _a.badgeStatus, badgeStatus = _f === void 0 ? 'inactive' : _f, _g = _a.imageIconMode, imageIconMode = _g === void 0 ? 'none' : _g, _h = _a.imageShapeType, imageShapeType = _h === void 0 ? 'round' : _h, imageSrc = _a.imageSrc, iconName = _a.iconName, _j = _a.iconFillType, iconFillType = _j === void 0 ? 'line' : _j, _k = _a.displayType, displayType = _k === void 0 ? 'none' : _k, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName,
|
28
|
+
var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, titleText = _a.titleText, _d = _a.titleTextColorTheme, titleTextColorTheme = _d === void 0 ? 'none' : _d, descText = _a.descText, _e = _a.badgeMode, badgeMode = _e === void 0 ? 'none' : _e, _f = _a.badgeStatus, badgeStatus = _f === void 0 ? 'inactive' : _f, _g = _a.imageIconMode, imageIconMode = _g === void 0 ? 'none' : _g, _h = _a.imageShapeType, imageShapeType = _h === void 0 ? 'round' : _h, imageSrc = _a.imageSrc, iconName = _a.iconName, _j = _a.iconFillType, iconFillType = _j === void 0 ? 'line' : _j, _k = _a.displayType, displayType = _k === void 0 ? 'none' : _k, captionText = _a.captionText, _l = _a.captionTextColorTheme, captionTextColorTheme = _l === void 0 ? 'none' : _l, iBtn1IconName = _a.iBtn1IconName, _m = _a.iBtn1IconFillType, iBtn1IconFillType = _m === void 0 ? 'line' : _m, iBtn2IconName = _a.iBtn2IconName, _o = _a.iBtn2IconFillType, iBtn2IconFillType = _o === void 0 ? 'line' : _o, _p = _a.mBtnFillType, mBtnFillType = _p === void 0 ? 'fill' : _p, mBtnText = _a.mBtnText, _q = _a.mBtnState, mBtnState = _q === void 0 ? 'normal' : _q, _r = _a.dividerType, dividerType = _r === void 0 ? 'none' : _r, _s = _a.titleFontWeight, titleFontWeight = _s === void 0 ? 'regular' : _s, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _t = _a.switchState, switchState = _t === void 0 ? 'normal' : _t, _u = _a.switchStatus, switchStatus = _u === void 0 ? 'off' : _u, _v = _a.spacingMode, spacingMode = _v === void 0 ? 'use' : _v, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
|
29
29
|
var methods = (0, react_hook_form_1.useFormContext)();
|
30
30
|
var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
|
31
31
|
var handleIBtn1Click = function (e) {
|
@@ -75,7 +75,16 @@ function BasicListItem(_a) {
|
|
75
75
|
}
|
76
76
|
return 'sysTextError';
|
77
77
|
}
|
78
|
-
|
78
|
+
function captionTextColor() {
|
79
|
+
if (state === 'disabled') {
|
80
|
+
return 'sysTextTertiary';
|
81
|
+
}
|
82
|
+
if (captionTextColorTheme === 'active') {
|
83
|
+
return 'sysTextBrandSeconVariant';
|
84
|
+
}
|
85
|
+
return 'sysTextTertiary';
|
86
|
+
}
|
87
|
+
return ((0, jsx_runtime_1.jsx)(S_BasicListItem, __assign({ "x-pds-name": "BasicListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", state: state, isSelected: isSelected, onClick: handleClick, spacingMode: spacingMode }, { children: (0, jsx_runtime_1.jsxs)(S_BasicListItemBox, __assign({ imageIconMode: imageIconMode, captionText: captionText, spacingMode: spacingMode, dividerType: dividerType }, { children: [(0, jsx_runtime_1.jsxs)(LeftBox_1.LeftBox, __assign({ hasRightBox: displayType !== 'none' }, { children: [selectionMode === 'check' && checkboxId && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Checkbox, { id: checkboxId }), selectionMode === 'radio' && radioValue && radioId && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Radio, { id: radioId, value: radioValue, onChange: onClickRadio })), badgeMode === 'left' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Badge, { status: badgeStatus }), imageIconMode === 'image' && (0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Image, { src: imageSrc, shape: imageShapeType }), imageIconMode === 'icon' && ((0, jsx_runtime_1.jsx)(LeftBox_1.LeftBox.Icon, { name: iconName, fill: iconFillType === 'fill' })), (0, jsx_runtime_1.jsxs)(Contents_1.default, { children: [(0, jsx_runtime_1.jsx)(Contents_1.default.Title, { text: titleText, colorTheme: titleTextColor(), font: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular' }), captionText && (0, jsx_runtime_1.jsx)(Contents_1.default.Caption, { text: captionText, colorTheme: captionTextColor() })] })] })), (0, jsx_runtime_1.jsxs)(RightBox_1.RightBox, __assign({ hasFixedHeight: displayType === 'text' }, { children: [(displayType === 'text' || displayType === 'ibtn_text') && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Description, { text: descText, icon: displayType === 'ibtn_text' ? ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })) : undefined })), displayType === 'ibtn_amount1' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click })), displayType === 'ibtn_amount2' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn2IconName, fill: iBtn2IconFillType === 'fill', onClick: onClickIBtn2, state: state }), (0, jsx_runtime_1.jsx)(RightBox_1.RightBox.IconButton, { iconName: iBtn1IconName, fill: iBtn1IconFillType === 'fill', onClick: handleIBtn1Click, state: state })] })), displayType === 'mbtn' && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.MainButton, { text: mBtnText, fill: mBtnFillType === 'fill', state: state === 'disabled' ? 'disabled' : mBtnState, onClick: onClickMBtn })), displayType === 'switch' && switchName && ((0, jsx_runtime_1.jsx)(RightBox_1.RightBox.Switch, { name: switchName, state: state === 'disabled' ? 'disabled' : switchState, status: switchStatus, onClick: onClickSwitch }))] }))] })) })));
|
79
88
|
}
|
80
89
|
var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: ", ";\n"])), function (_a) {
|
81
90
|
var theme = _a.theme, isSelected = _a.isSelected, state = _a.state;
|
@@ -1,4 +1,5 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
+
import type { TextLabelProps } from '../TextLabel/TextLabel';
|
2
3
|
import type { PDSTextType } from '../../../common/types';
|
3
4
|
type ContentsPropTypes = React.FunctionComponent & {
|
4
5
|
Title: React.FC<TitlePropTypes>;
|
@@ -6,11 +7,12 @@ type ContentsPropTypes = React.FunctionComponent & {
|
|
6
7
|
};
|
7
8
|
type TitlePropTypes = {
|
8
9
|
text: PDSTextType;
|
9
|
-
colorTheme: '
|
10
|
+
colorTheme: TextLabelProps['colorTheme'];
|
10
11
|
font: 'body2Bold' | 'body2Regular';
|
11
12
|
};
|
12
13
|
type CaptionPropTypes = {
|
13
14
|
text: PDSTextType;
|
15
|
+
colorTheme: TextLabelProps['colorTheme'];
|
14
16
|
};
|
15
17
|
declare const Contents: ContentsPropTypes;
|
16
18
|
export default Contents;
|
@@ -20,8 +20,8 @@ var Title = function (_a) {
|
|
20
20
|
return ((0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, colorTheme: colorTheme, styleTheme: font, singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) }));
|
21
21
|
};
|
22
22
|
var Caption = function (_a) {
|
23
|
-
var text = _a.text;
|
24
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, colorTheme:
|
23
|
+
var text = _a.text, colorTheme = _a.colorTheme;
|
24
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, colorTheme: colorTheme, styleTheme: "caption1Regular", textAlign: "left", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })] }));
|
25
25
|
};
|
26
26
|
var S_TextBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n"], ["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n"])));
|
27
27
|
var S_TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n justify-content: center;\n width: 100%;\n"], ["\n justify-content: center;\n width: 100%;\n"])));
|
@@ -180,7 +180,7 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
|
|
180
180
|
return size.width * 0.0133;
|
181
181
|
}
|
182
182
|
if (size.width < 1200) {
|
183
|
-
return Math.max(getDefensiveFontSize(device, size.width),
|
183
|
+
return Math.max(getDefensiveFontSize(device, size.width), 16);
|
184
184
|
}
|
185
185
|
return 16;
|
186
186
|
})();
|
package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js
CHANGED
@@ -37,9 +37,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
37
37
|
__setModuleDefault(result, mod);
|
38
38
|
return result;
|
39
39
|
};
|
40
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
41
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
42
|
-
};
|
43
40
|
Object.defineProperty(exports, "__esModule", { value: true });
|
44
41
|
exports.CustomSectionBackgroundMedia = void 0;
|
45
42
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
@@ -48,10 +45,9 @@ var utils_1 = require("../../../../DynamicLayout/utils");
|
|
48
45
|
var styled_components_1 = __importStar(require("styled-components"));
|
49
46
|
var YouTubeIframe_1 = require("../../YouTubeIframe");
|
50
47
|
var util_1 = require("../util");
|
51
|
-
var VideoBGMedia_1 = __importDefault(require("./VideoBGMedia"));
|
52
48
|
function CustomSectionBackgroundMedia(_a) {
|
53
49
|
var specs = _a.specs, playerId = _a.playerId, mediaType = _a.mediaType, componentStyle = _a.componentStyle, device = _a.device, backgroundRef = _a.backgroundRef;
|
54
|
-
var _b = (0, util_1.parseSectionBackgroundMediaData)(specs, device), CB_STYLE_PROP_BGMEDIA_SPEC_YSRC = _b.CB_STYLE_PROP_BGMEDIA_SPEC_YSRC, CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY = _b.CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME, CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR = _b.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR
|
50
|
+
var _b = (0, util_1.parseSectionBackgroundMediaData)(specs, device), CB_STYLE_PROP_BGMEDIA_SPEC_YSRC = _b.CB_STYLE_PROP_BGMEDIA_SPEC_YSRC, CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY = _b.CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME, CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR = _b.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR;
|
55
51
|
var _c = (0, react_1.useState)({ width: 0, height: 0 }), youtubeSize = _c[0], setYoutubeSize = _c[1];
|
56
52
|
var youTubeIframeKey = (0, react_1.useMemo)(function () {
|
57
53
|
return "".concat(utils_1.YouTubeLinkParser.getId(String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC)), "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME);
|
@@ -108,12 +104,6 @@ function CustomSectionBackgroundMedia(_a) {
|
|
108
104
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR && ((0, jsx_runtime_1.jsx)(S_Image, __assign({ src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), normalStyle: componentStyle }, { children: (0, jsx_runtime_1.jsx)("img", { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), style: { visibility: 'hidden', width: '100%', height: '100%' } }) }))) }));
|
109
105
|
case 'YOUTUBE':
|
110
106
|
return ((0, jsx_runtime_1.jsx)(S_YoutubeContainer, __assign({}, youtubeSize, { children: youtubeSize.height > 0 && youtubeSize.width > 0 && ((0, jsx_runtime_1.jsx)(YouTubeIframe_1.YouTubeIframe, { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC), id: playerId, loopMode: CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY ? 'use' : 'none', startSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME), endSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME), customHeight: youtubeSize.height, customWidth: youtubeSize.width }, youTubeIframeKey)) })));
|
111
|
-
case 'VIDEO':
|
112
|
-
return ((0, jsx_runtime_1.jsx)(VideoBGMedia_1.default
|
113
|
-
// autoPlayOnMobile={}
|
114
|
-
, {
|
115
|
-
// autoPlayOnMobile={}
|
116
|
-
src: String(CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR), startTime: Number(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME), endTime: Number(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME), loop: !!CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY }));
|
117
107
|
case 'NONE':
|
118
108
|
default:
|
119
109
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
package/dist/src/sub/DynamicLayout/components/Section/util/parseSectionBackgroundMediaData.js
CHANGED
@@ -25,9 +25,7 @@ var AVAILABLE_SPECS = [
|
|
25
25
|
'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION',
|
26
26
|
'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR',
|
27
27
|
'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT',
|
28
|
-
'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME'
|
29
|
-
'CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR'
|
30
|
-
// 'CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY'
|
28
|
+
'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME'
|
31
29
|
];
|
32
30
|
function UseCustomSectionBackgroundMediaData(specs, device) {
|
33
31
|
return AVAILABLE_SPECS.reduce(function (acc, cur) {
|
@@ -2,189 +2,6 @@ export declare const MOCK_SECTIONS: {
|
|
2
2
|
administrativeTitle: string;
|
3
3
|
appearanceTemplate: string;
|
4
4
|
componentBlocks: ({
|
5
|
-
availablePlugins: never[];
|
6
|
-
blockId: string;
|
7
|
-
componentBlockCode: string;
|
8
|
-
componentBlockType: string;
|
9
|
-
compositions: never[];
|
10
|
-
dynamicLayoutSectionId: number;
|
11
|
-
id: number;
|
12
|
-
insertedAt: string;
|
13
|
-
jsonProperties: {
|
14
|
-
currentVersion: string;
|
15
|
-
data: {
|
16
|
-
CB_CONTENT_PROP_HOVER: {
|
17
|
-
CB_CONTENT_PROP_HOVER_SPEC_MUSE: boolean;
|
18
|
-
};
|
19
|
-
CB_CONTENT_PROP_VIDEO: {
|
20
|
-
CB_CONTENT_PROP_VIDEO_SPEC_CONNECTDATA: string;
|
21
|
-
CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME: number;
|
22
|
-
CB_CONTENT_PROP_VIDEO_SPEC_MPLAY: boolean;
|
23
|
-
CB_CONTENT_PROP_VIDEO_SPEC_REPLAY: boolean;
|
24
|
-
CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR: string;
|
25
|
-
CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME: number;
|
26
|
-
CB_CONTENT_PROP_VIDEO_SPEC_THUMB: string;
|
27
|
-
CB_CONTENT_PROP_VIDEO_SPEC_TYPE: string;
|
28
|
-
CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE: string;
|
29
|
-
};
|
30
|
-
CB_CONTENT_PROP_VISIBILITY: {
|
31
|
-
CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: boolean;
|
32
|
-
CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: boolean;
|
33
|
-
};
|
34
|
-
CB_EFFECT_PROP_ENTANIM: {
|
35
|
-
CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: number;
|
36
|
-
'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': null;
|
37
|
-
CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: number;
|
38
|
-
'CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT:MOBILE': null;
|
39
|
-
CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC: string;
|
40
|
-
'CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC:MOBILE': null;
|
41
|
-
CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: string;
|
42
|
-
'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': null;
|
43
|
-
};
|
44
|
-
CB_EFFECT_PROP_HOVERANIM: {
|
45
|
-
CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION: number;
|
46
|
-
'CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION:MOBILE': null;
|
47
|
-
CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT: number;
|
48
|
-
'CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT:MOBILE': null;
|
49
|
-
CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC: string;
|
50
|
-
'CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC:MOBILE': null;
|
51
|
-
CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE: string;
|
52
|
-
'CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE:MOBILE': null;
|
53
|
-
};
|
54
|
-
CB_LAYOUT_PROP_ARRANGE: {
|
55
|
-
CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL: string;
|
56
|
-
'CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL:MOBILE': null;
|
57
|
-
CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL: string;
|
58
|
-
'CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL:MOBILE': null;
|
59
|
-
};
|
60
|
-
CB_LAYOUT_PROP_PADDING: {
|
61
|
-
CB_LAYOUT_PROP_PADDING_SPEC_FIX: boolean;
|
62
|
-
'CB_LAYOUT_PROP_PADDING_SPEC_FIX:MOBILE': null;
|
63
|
-
CB_LAYOUT_PROP_PADDING_SPEC_PADDING: {
|
64
|
-
bottom: number;
|
65
|
-
left: number;
|
66
|
-
right: number;
|
67
|
-
top: number;
|
68
|
-
};
|
69
|
-
'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': null;
|
70
|
-
};
|
71
|
-
CB_PLACEMENT_PROP_PLACEMENT: {
|
72
|
-
CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: number;
|
73
|
-
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': number;
|
74
|
-
CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: number;
|
75
|
-
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': number;
|
76
|
-
CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: number;
|
77
|
-
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': number;
|
78
|
-
CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: number;
|
79
|
-
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': number;
|
80
|
-
CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: number;
|
81
|
-
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': number;
|
82
|
-
};
|
83
|
-
CB_STYLE_PROP_BGCOLOR: {
|
84
|
-
CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE: number;
|
85
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:HOVER': null;
|
86
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:MOBILE': null;
|
87
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:MOBILE:HOVER': null;
|
88
|
-
CB_STYLE_PROP_BGCOLOR_SPEC_COLOR: string;
|
89
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:HOVER': null;
|
90
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:MOBILE': null;
|
91
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:MOBILE:HOVER': null;
|
92
|
-
CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR: string;
|
93
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:HOVER': null;
|
94
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:MOBILE': null;
|
95
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:MOBILE:HOVER': null;
|
96
|
-
CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC: number;
|
97
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:HOVER': null;
|
98
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:MOBILE': null;
|
99
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:MOBILE:HOVER': null;
|
100
|
-
CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT: string;
|
101
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:HOVER': null;
|
102
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:MOBILE': null;
|
103
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:MOBILE:HOVER': null;
|
104
|
-
CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR: string;
|
105
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:HOVER': null;
|
106
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:MOBILE': null;
|
107
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:MOBILE:HOVER': null;
|
108
|
-
CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC: number;
|
109
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:HOVER': null;
|
110
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:MOBILE': null;
|
111
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:MOBILE:HOVER': null;
|
112
|
-
CB_STYLE_PROP_BGCOLOR_SPEC_TYPE: string;
|
113
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:HOVER': null;
|
114
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:MOBILE': null;
|
115
|
-
'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:MOBILE:HOVER': null;
|
116
|
-
};
|
117
|
-
CB_STYLE_PROP_BORDER: {
|
118
|
-
CB_STYLE_PROP_BORDER_SPEC_COLOR: string;
|
119
|
-
'CB_STYLE_PROP_BORDER_SPEC_COLOR:HOVER': null;
|
120
|
-
'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE': null;
|
121
|
-
'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE:HOVER': null;
|
122
|
-
CB_STYLE_PROP_BORDER_SPEC_RADIUS: {
|
123
|
-
bl: number;
|
124
|
-
br: number;
|
125
|
-
tl: number;
|
126
|
-
tr: number;
|
127
|
-
};
|
128
|
-
'CB_STYLE_PROP_BORDER_SPEC_RADIUS:HOVER': null;
|
129
|
-
'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE': null;
|
130
|
-
'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE:HOVER': null;
|
131
|
-
CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX: boolean;
|
132
|
-
'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:HOVER': null;
|
133
|
-
'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE': null;
|
134
|
-
'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE:HOVER': null;
|
135
|
-
CB_STYLE_PROP_BORDER_SPEC_STYLE: string;
|
136
|
-
'CB_STYLE_PROP_BORDER_SPEC_STYLE:HOVER': null;
|
137
|
-
'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE': null;
|
138
|
-
'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE:HOVER': null;
|
139
|
-
CB_STYLE_PROP_BORDER_SPEC_WIDTH: number;
|
140
|
-
'CB_STYLE_PROP_BORDER_SPEC_WIDTH:HOVER': null;
|
141
|
-
'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE': null;
|
142
|
-
'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE:HOVER': null;
|
143
|
-
};
|
144
|
-
CB_STYLE_PROP_OPACITY: {
|
145
|
-
CB_STYLE_PROP_OPACITY_SPEC_OPACITY: number;
|
146
|
-
'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:HOVER': null;
|
147
|
-
'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE': null;
|
148
|
-
'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE:HOVER': null;
|
149
|
-
};
|
150
|
-
CB_STYLE_PROP_SHADOW: {
|
151
|
-
CB_STYLE_PROP_SHADOW_SPEC_BLUR: number;
|
152
|
-
'CB_STYLE_PROP_SHADOW_SPEC_BLUR:HOVER': null;
|
153
|
-
'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE': null;
|
154
|
-
'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE:HOVER': null;
|
155
|
-
CB_STYLE_PROP_SHADOW_SPEC_COLOR: string;
|
156
|
-
'CB_STYLE_PROP_SHADOW_SPEC_COLOR:HOVER': null;
|
157
|
-
'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE': null;
|
158
|
-
'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE:HOVER': null;
|
159
|
-
CB_STYLE_PROP_SHADOW_SPEC_OPACITY: number;
|
160
|
-
'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER': null;
|
161
|
-
'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE': null;
|
162
|
-
'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER': null;
|
163
|
-
CB_STYLE_PROP_SHADOW_SPEC_SPREAD: number;
|
164
|
-
'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:HOVER': null;
|
165
|
-
'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE': null;
|
166
|
-
'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE:HOVER': null;
|
167
|
-
CB_STYLE_PROP_SHADOW_SPEC_TYPE: string;
|
168
|
-
'CB_STYLE_PROP_SHADOW_SPEC_TYPE:HOVER': null;
|
169
|
-
'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE': null;
|
170
|
-
'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE:HOVER': null;
|
171
|
-
CB_STYLE_PROP_SHADOW_SPEC_X: number;
|
172
|
-
'CB_STYLE_PROP_SHADOW_SPEC_X:HOVER': null;
|
173
|
-
'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE': null;
|
174
|
-
'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE:HOVER': null;
|
175
|
-
CB_STYLE_PROP_SHADOW_SPEC_Y: number;
|
176
|
-
'CB_STYLE_PROP_SHADOW_SPEC_Y:HOVER': null;
|
177
|
-
'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE': null;
|
178
|
-
'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': null;
|
179
|
-
};
|
180
|
-
};
|
181
|
-
minVersion: string;
|
182
|
-
version: string;
|
183
|
-
};
|
184
|
-
queryableDefinitionPreset: string;
|
185
|
-
queryableTapSrc: string;
|
186
|
-
updatedAt: string;
|
187
|
-
} | {
|
188
5
|
availablePlugins: never[];
|
189
6
|
blockId: string;
|
190
7
|
componentBlockCode: string;
|
@@ -1094,7 +911,6 @@ export declare const MOCK_SECTIONS: {
|
|
1094
911
|
'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE': null;
|
1095
912
|
'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:HOVER': null;
|
1096
913
|
'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:MOBILE:HOVER': null;
|
1097
|
-
CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR: string;
|
1098
914
|
};
|
1099
915
|
CB_STYLE_PROP_BGOVERLAY: {
|
1100
916
|
CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE: number;
|
@@ -1,13 +1,11 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
3
|
exports.MOCK_SECTIONS = void 0;
|
4
|
-
var mock_video_cb_1 = require("./mock_video_cb");
|
5
4
|
exports.MOCK_SECTIONS = [
|
6
5
|
{
|
7
6
|
administrativeTitle: 'Daily Pages',
|
8
7
|
appearanceTemplate: 'GENERAL_A',
|
9
8
|
componentBlocks: [
|
10
|
-
mock_video_cb_1.MOCK_VIDEO_CB,
|
11
9
|
{
|
12
10
|
availablePlugins: [],
|
13
11
|
blockId: 'CB_188265',
|
@@ -4340,7 +4338,7 @@ exports.MOCK_SECTIONS = [
|
|
4340
4338
|
CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY: true,
|
4341
4339
|
'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:MOBILE': null,
|
4342
4340
|
'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:HOVER': null,
|
4343
|
-
CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:
|
4341
|
+
CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME: 600,
|
4344
4342
|
CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT: 'COVER',
|
4345
4343
|
'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER': null,
|
4346
4344
|
'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:MOBILE': null,
|
@@ -4358,7 +4356,7 @@ exports.MOCK_SECTIONS = [
|
|
4358
4356
|
'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE:HOVER': null,
|
4359
4357
|
'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:HOVER': null,
|
4360
4358
|
'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:HOVER': null,
|
4361
|
-
CB_STYLE_PROP_BGMEDIA_SPEC_TYPE: '
|
4359
|
+
CB_STYLE_PROP_BGMEDIA_SPEC_TYPE: 'NONE',
|
4362
4360
|
'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:HOVER': null,
|
4363
4361
|
CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY: true,
|
4364
4362
|
'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:HOVER': null,
|
@@ -4373,8 +4371,7 @@ exports.MOCK_SECTIONS = [
|
|
4373
4371
|
'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:MOBILE': null,
|
4374
4372
|
'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE': null,
|
4375
4373
|
'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:HOVER': null,
|
4376
|
-
'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:MOBILE:HOVER': null
|
4377
|
-
CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR: 'https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4'
|
4374
|
+
'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:MOBILE:HOVER': null
|
4378
4375
|
},
|
4379
4376
|
CB_STYLE_PROP_BGOVERLAY: {
|
4380
4377
|
CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE: 90,
|
@@ -4420,14 +4417,6 @@ exports.MOCK_SECTIONS = [
|
|
4420
4417
|
pedigree: {
|
4421
4418
|
blockId: 'ROOT',
|
4422
4419
|
children: [
|
4423
|
-
{
|
4424
|
-
blockId: 'CB_191877',
|
4425
|
-
children: [],
|
4426
|
-
componentBlockId: 191877,
|
4427
|
-
type: 'COMPONENT_BLOCK',
|
4428
|
-
zOrderDesktopInternal: 0,
|
4429
|
-
zOrderMobileInternal: 6
|
4430
|
-
},
|
4431
4420
|
{
|
4432
4421
|
blockId: 'CB_188263',
|
4433
4422
|
children: [],
|
@@ -26,7 +26,6 @@ var Image_1 = __importDefault(require("./componentBlocks/Image/Image"));
|
|
26
26
|
var RichText_1 = require("./componentBlocks/RichText");
|
27
27
|
var Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
|
28
28
|
var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
|
29
|
-
var VideoPlayer_1 = require("./componentBlocks/VideoPlayer");
|
30
29
|
var Youtube_1 = require("./componentBlocks/Youtube");
|
31
30
|
function ComponentBlockMatcher(_a) {
|
32
31
|
var cbProps = _a.cbProps, device = _a.device, index = _a.index;
|
@@ -49,8 +48,6 @@ function ComponentBlockMatcher(_a) {
|
|
49
48
|
return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue, { index: index }));
|
50
49
|
case types_1.CB_ALL_CODES.CB_EMBED:
|
51
50
|
return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
|
52
|
-
case types_1.CB_ALL_CODES.CB_VIDEOPLAYER:
|
53
|
-
return (0, jsx_runtime_1.jsx)(VideoPlayer_1.VideoPlayer, __assign({}, propsWithValue, { index: index }));
|
54
51
|
case types_1.CB_ALL_CODES.CB_CONTENTS_CAROUSEL: {
|
55
52
|
var compositions = cbProps.compositions;
|
56
53
|
return ((0, jsx_runtime_1.jsx)(ContentsCarousel_1.default, __assign({}, propsWithValue, { compositions: compositions, index: index })));
|
@@ -100,13 +100,3 @@ export type CB_STYLE_PROP_COLOR_SPECS = CB_STYLE_PROP_COLOR_SPECS_BASE & {
|
|
100
100
|
'CB_STYLE_PROP_COLOR_SPEC_TYPE:MOBILE': CB_STYLE_PROP_COLOR_ENUM_TYPE | null | undefined;
|
101
101
|
'CB_STYLE_PROP_COLOR_SPEC_TYPE:MOBILE:HOVER': CB_STYLE_PROP_COLOR_ENUM_TYPE | null | undefined;
|
102
102
|
};
|
103
|
-
export type CB_CONTENT_PROP_VIDEO = {
|
104
|
-
CB_CONTENT_PROP_VIDEO_SPEC_CONNECTDATA: STRING_PLAIN;
|
105
|
-
CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME: number;
|
106
|
-
CB_CONTENT_PROP_VIDEO_SPEC_MPLAY: boolean;
|
107
|
-
CB_CONTENT_PROP_VIDEO_SPEC_REPLAY: boolean;
|
108
|
-
CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR: string;
|
109
|
-
CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME: number;
|
110
|
-
CB_CONTENT_PROP_VIDEO_SPEC_THUMB: string;
|
111
|
-
CB_CONTENT_PROP_VIDEO_SPEC_TYPE: 'FILE' | 'URL';
|
112
|
-
};
|
@@ -1,7 +1,7 @@
|
|
1
|
-
import type { CB_BTN_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_TEXT_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE,
|
1
|
+
import type { CB_BTN_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_TEXT_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE } from './util/types';
|
2
2
|
import type { IComposition } from '../../../DynamicLayout/types';
|
3
3
|
export type CB_TYPES = 'GENERAL';
|
4
|
-
export type ComponentBlock = CB_TEXT_TYPE | CB_BTN_TYPE | CB_RICHTEXT | CB_DIVIDER | CB_IMG | CB_YOUTUBE | CB_TWITTER | CB_IFRAME | CB_GROUP | CB_CONTENTS_CAROUSEL
|
4
|
+
export type ComponentBlock = CB_TEXT_TYPE | CB_BTN_TYPE | CB_RICHTEXT | CB_DIVIDER | CB_IMG | CB_YOUTUBE | CB_TWITTER | CB_IFRAME | CB_GROUP | CB_CONTENTS_CAROUSEL;
|
5
5
|
type GeneralCustomSectionType = {
|
6
6
|
id: number;
|
7
7
|
type: 'GENERAL';
|
@@ -18,7 +18,7 @@ export type GroupCustomSectionType = {
|
|
18
18
|
queryableDefinitionPreset: string;
|
19
19
|
dynamicLayoutSectionId: number;
|
20
20
|
};
|
21
|
-
export type AllCBProperties = CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE
|
21
|
+
export type AllCBProperties = CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE;
|
22
22
|
export type CB_TEXT_TYPE = GeneralCustomSectionType & {
|
23
23
|
componentBlockCode: CB_ALL_CODES.CB_TEXT;
|
24
24
|
jsonProperties: {
|
@@ -80,12 +80,6 @@ export type CB_CONTENTS_CAROUSEL = GeneralCustomSectionType & {
|
|
80
80
|
};
|
81
81
|
compositions: Array<IComposition>;
|
82
82
|
};
|
83
|
-
export type CB_VIDEOPLAYER = GeneralCustomSectionType & {
|
84
|
-
componentBlockCode: CB_ALL_CODES.CB_VIDEOPLAYER;
|
85
|
-
jsonProperties: {
|
86
|
-
data: CB_VIDEOPLAYER_PROPERTIES_TYPE;
|
87
|
-
};
|
88
|
-
};
|
89
83
|
export declare enum CB_ALL_CODES {
|
90
84
|
CB_TEXT = "CB_TEXT",
|
91
85
|
CB_BTN = "CB_BTN",
|
@@ -96,7 +90,6 @@ export declare enum CB_ALL_CODES {
|
|
96
90
|
CB_TWITTER = "CB_TWITTER",
|
97
91
|
CB_EMBED = "CB_EMBED",
|
98
92
|
CB_GROUP = "CB_GROUP",
|
99
|
-
CB_CONTENTS_CAROUSEL = "CB_CONTENTS_CAROUSEL"
|
100
|
-
CB_VIDEOPLAYER = "CB_VIDEOPLAYER"
|
93
|
+
CB_CONTENTS_CAROUSEL = "CB_CONTENTS_CAROUSEL"
|
101
94
|
}
|
102
95
|
export {};
|
@@ -13,5 +13,4 @@ var CB_ALL_CODES;
|
|
13
13
|
CB_ALL_CODES["CB_EMBED"] = "CB_EMBED";
|
14
14
|
CB_ALL_CODES["CB_GROUP"] = "CB_GROUP";
|
15
15
|
CB_ALL_CODES["CB_CONTENTS_CAROUSEL"] = "CB_CONTENTS_CAROUSEL";
|
16
|
-
CB_ALL_CODES["CB_VIDEOPLAYER"] = "CB_VIDEOPLAYER";
|
17
16
|
})(CB_ALL_CODES = exports.CB_ALL_CODES || (exports.CB_ALL_CODES = {}));
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { CB_LAYOUT_PROP_KEYS } from './layoutPropParsers/types';
|
2
2
|
import { CB_STYLE_PROP_KEYS } from './stylePropParsers/types';
|
3
|
-
import type { Device, ParserResult, CB_TEXT_PROPERTIES_TYPE, CB_BTN_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE
|
3
|
+
import type { Device, ParserResult, CB_TEXT_PROPERTIES_TYPE, CB_BTN_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE } from './types';
|
4
4
|
export type specTypes = CB_LAYOUT_PROP_KEYS | CB_STYLE_PROP_KEYS;
|
5
|
-
export default function parseProperties(properties: CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE
|
5
|
+
export default function parseProperties(properties: CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE, device: Device): ParserResult;
|