pds-dev-kit-web-test 2.5.644 → 2.5.647

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.
Files changed (4) hide show
  1. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js +48 -20
  2. package/package.json +1 -1
  3. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/propComponent/CBBackgroundOverlay.d.ts +0 -2
  4. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/propComponent/CBBackgroundOverlay.js +0 -13
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js CHANGED
@@ -20,12 +20,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
22
  var react_1 = require("react");
23
+ var CustomSectionBackgroundMedia_1 = require("../../../../../../../DynamicLayout/components/Section/components/CustomSectionBackgroundMedia");
23
24
  var createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");
24
25
  var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
25
26
  var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
26
27
  var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
28
+ var isNullOrUndefined_1 = __importDefault(require("../../../../../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
27
29
  var styled_components_1 = __importDefault(require("styled-components"));
28
- var CBBackgroundMedia_1 = __importDefault(require("../../propComponent/CBBackgroundMedia"));
30
+ require("../../ComponentBlock");
31
+ require("../../propComponent/CBBackgroundMedia");
29
32
  var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
30
33
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
31
34
  var CustomPagination_1 = require("./components/CustomPagination");
@@ -48,7 +51,7 @@ var createComponent = function (type, getDesignType, getLocation) {
48
51
  function ContentsList(props) {
49
52
  var _a, _b, _c, _d;
50
53
  var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _e.device, mode = _e.mode, queryData = _e.queryData;
51
- var index = props.index, compositions = props.compositions, CB_CONTENT_PROP_CONTENTSLIST = props.CB_CONTENT_PROP_CONTENTSLIST, CB_STYLE_PROP_CONTENTSLIST = props.CB_STYLE_PROP_CONTENTSLIST, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_LAYOUT_PROP_PADDING = props.CB_LAYOUT_PROP_PADDING;
54
+ var index = props.index, compositions = props.compositions, CB_CONTENT_PROP_CONTENTSLIST = props.CB_CONTENT_PROP_CONTENTSLIST, CB_STYLE_PROP_CONTENTSLIST = props.CB_STYLE_PROP_CONTENTSLIST, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_LAYOUT_PROP_PADDING = props.CB_LAYOUT_PROP_PADDING, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA;
52
55
  var CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS;
53
56
  var _f = (0, react_1.useState)(false), isHovered = _f[0], setIsHovered = _f[1];
54
57
  var _g = (0, react_1.useState)(1), currentPage = _g[0], setCurrentPage = _g[1];
@@ -127,6 +130,10 @@ function ContentsList(props) {
127
130
  return null;
128
131
  }
129
132
  };
133
+ var backgroundRef = (0, react_1.useRef)(null);
134
+ var isMobile = device === 'MOBILE';
135
+ var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
136
+ var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
130
137
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Object.entries(componentGroups).map(function (_a) {
131
138
  var position = _a[0], groupComponents = _a[1];
132
139
  return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-button-group", ref: function (el) {
@@ -137,24 +144,45 @@ function ContentsList(props) {
137
144
  delete positionRefs.current[position];
138
145
  }
139
146
  }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3 }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) { return renderElements(component); }) })) }), position));
140
- }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-items": CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS, "data-number-of-columns": CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, "data-min-width": listMinWidth, "data-min-height": listMinHeight, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: (0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsListWrapper, __assign({ className: "cb-contentslist-wrapper",
141
- // ccbInset={ccbInset}
142
- ccbInset: {
143
- top: '0px',
144
- right: '0px',
145
- bottom: '0px',
146
- left: '0px'
147
- }, contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss }, { children: [(0, jsx_runtime_1.jsx)(CBBackgroundMedia_1.default, {}), (0, createCompositions_1.createCompositions)({
148
- valueType: CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE,
149
- queryPath: CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA,
150
- limit: CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS,
151
- queryData: queryData,
152
- compositions: compositions
153
- }).slice(startIndex, endIndex), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle })] })) })) })) }))] }));
147
+ }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-items": CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS, "data-number-of-columns": CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, "data-min-width": listMinWidth, "data-min-height": listMinHeight, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsxs)(S_ContentsListWrapper, __assign({ className: "cb-contentslist-wrapper",
148
+ // ccbInset={ccbInset}
149
+ ccbInset: {
150
+ top: '0px',
151
+ right: '0px',
152
+ bottom: '0px',
153
+ left: '0px'
154
+ }, contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss }, { children: [(0, createCompositions_1.createCompositions)({
155
+ valueType: CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE,
156
+ queryPath: CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA,
157
+ limit: CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS,
158
+ queryData: queryData,
159
+ compositions: compositions
160
+ }).slice(startIndex, endIndex), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle })] }))] })) })) }))] }));
154
161
  }
155
- var S_Overlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n"])));
156
- var S_ContentsListLayout = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n margin: 0 auto;\n position: relative;\n width: 100%;\n"], ["\n height: 100%;\n margin: 0 auto;\n position: relative;\n width: 100%;\n"])));
157
- var S_ContentsListWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n bottom: ", ";\n display: grid;\n left: ", ";\n /* position: absolute; */\n position: relative;\n right: ", ";\n top: ", ";\n\n ", ";\n ", ";\n"], ["\n bottom: ", ";\n display: grid;\n left: ", ";\n /* position: absolute; */\n position: relative;\n right: ", ";\n top: ", ";\n\n ", ";\n ", ";\n"])), function (_a) {
162
+ function getIsBgMedia(isMobile, specs) {
163
+ if (!specs) {
164
+ return false;
165
+ }
166
+ if (isMobile) {
167
+ return specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'] !== 'NONE';
168
+ }
169
+ return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE !== 'NONE';
170
+ }
171
+ function getMediaType(isMobile, specs) {
172
+ if (!specs) {
173
+ return 'NONE';
174
+ }
175
+ if (isMobile) {
176
+ return (0, isNullOrUndefined_1.default)(specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'])
177
+ ? specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE
178
+ : specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'];
179
+ }
180
+ return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE;
181
+ }
182
+ var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n bottom: 0;\n display: flex;\n justify-content: center;\n left: 0;\n overflow: hidden;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -2;\n"], ["\n align-items: center;\n bottom: 0;\n display: flex;\n justify-content: center;\n left: 0;\n overflow: hidden;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -2;\n"])));
183
+ var S_Overlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n"])));
184
+ var S_ContentsListLayout = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 100%;\n margin: 0 auto;\n position: relative;\n width: 100%;\n"], ["\n height: 100%;\n margin: 0 auto;\n position: relative;\n width: 100%;\n"])));
185
+ var S_ContentsListWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n bottom: ", ";\n display: grid;\n left: ", ";\n /* position: absolute; */\n position: relative;\n right: ", ";\n top: ", ";\n\n ", ";\n ", ";\n"], ["\n bottom: ", ";\n display: grid;\n left: ", ";\n /* position: absolute; */\n position: relative;\n right: ", ";\n top: ", ";\n\n ", ";\n ", ";\n"])), function (_a) {
158
186
  var ccbInset = _a.ccbInset;
159
187
  return ccbInset.bottom;
160
188
  }, function (_a) {
@@ -220,4 +248,4 @@ function getCompositionMinValue(composition, device) {
220
248
  }
221
249
  }
222
250
  exports.default = ContentsList;
223
- var templateObject_1, templateObject_2, templateObject_3;
251
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.5.644",
3
+ "version": "2.5.647",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/propComponent/CBBackgroundOverlay.d.ts DELETED
@@ -1,2 +0,0 @@
1
- /// <reference types="react" />
2
- export default function CBBackgroundOverlay(): JSX.Element;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/propComponent/CBBackgroundOverlay.js DELETED
@@ -1,13 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var jsx_runtime_1 = require("react/jsx-runtime");
4
- require("../../../util");
5
- function CBBackgroundOverlay() {
6
- // console.log('ccb background overlay', jsonProperties);
7
- // const { style, overlayStyle, effect } = parseJsonProperties(
8
- // data,
9
- // isMobile ? 'MOBILE' : 'DESKTOP'
10
- // );
11
- return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "CB- background-overlay" });
12
- }
13
- exports.default = CBBackgroundOverlay;