pds-dev-kit-web-test 0.2.4 → 0.2.5

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 (8) hide show
  1. package/dist/src/sub/DynamicLayout/sectionActionTypes.d.ts +9 -1
  2. package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js +31 -5
  3. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js +1 -1
  4. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Twitter/Twitter.js +2 -1
  5. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_HiddenCover.js +1 -1
  6. package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useRefDimensions.d.ts +5 -0
  7. package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useRefDimensions.js +19 -0
  8. package/package.json +2 -2
package/dist/src/sub/DynamicLayout/sectionActionTypes.d.ts CHANGED
@@ -8,7 +8,15 @@ declare type ActionHandlerPayload = {
8
8
  event: React.SyntheticEvent<HTMLIFrameElement, Event>;
9
9
  multiPurposeUrl: string;
10
10
  };
11
- '@CUSTOMSECTION/CB_DRAG_OR_RESIZE_STOP': {
11
+ '@CUSTOMSECTION/CB_DRAG_STOP': {
12
+ layout: Layout;
13
+ prev?: LayoutItem;
14
+ item?: LayoutItem;
15
+ placeholder?: LayoutItem;
16
+ e?: ResizeEventType;
17
+ node?: HTMLElement;
18
+ };
19
+ '@CUSTOMSECTION/CB_RESIZE_STOP': {
12
20
  layout: Layout;
13
21
  prev?: LayoutItem;
14
22
  item?: LayoutItem;
package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js CHANGED
@@ -42,6 +42,18 @@ function CustomSection(props) {
42
42
  var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, sectionActionHandler = _a.sectionActionHandler, editingSectionId = _a.editingSectionId;
43
43
  var componentBlocks = props.componentBlocks;
44
44
  var _b = (0, react_1.useState)(null), selectedCB = _b[0], setSelectedCB = _b[1];
45
+ var gleRef = (0, react_1.useRef)(null);
46
+ var _c = (0, react_1.useState)(function () {
47
+ var _a = (0, parsePlacement_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
48
+ return {
49
+ lg: lg,
50
+ sm: sm
51
+ };
52
+ }), layouts = _c[0], setLayouts = _c[1];
53
+ (0, react_1.useEffect)(function () {
54
+ var _a = (0, parsePlacement_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
55
+ setLayouts({ lg: lg, sm: sm });
56
+ }, [componentBlocks]);
45
57
  (0, react_1.useEffect)(function () {
46
58
  if (editingSectionId !== props.id) {
47
59
  setSelectedCB(null);
@@ -60,7 +72,6 @@ function CustomSection(props) {
60
72
  };
61
73
  var customMinHeight = rows * 50 + "px";
62
74
  var breakpoint = device === 'MOBILE' ? 'sm' : 'lg';
63
- var _c = (0, parsePlacement_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), sm = _c.sm, lg = _c.lg;
64
75
  var onClickCB = function (id) {
65
76
  setSelectedCB(id);
66
77
  sectionActionHandler &&
@@ -78,8 +89,23 @@ function CustomSection(props) {
78
89
  payload: props
79
90
  });
80
91
  }
92
+ setLayouts(props.layouts);
93
+ };
94
+ var onDragStop = function (props) {
95
+ var _a;
96
+ var numberId = Number((_a = props.item) === null || _a === void 0 ? void 0 : _a.i);
97
+ var isIdNumber = !Number.isNaN(numberId);
98
+ if (isIdNumber) {
99
+ setSelectedCB(numberId);
100
+ }
101
+ if (sectionActionHandler && isIdNumber) {
102
+ sectionActionHandler({
103
+ type: '@CUSTOMSECTION/CB_DRAG_STOP',
104
+ payload: props
105
+ });
106
+ }
81
107
  };
82
- var onDragOrResizeStop = function (props) {
108
+ var onResizeStop = function (props) {
83
109
  var _a;
84
110
  var numberId = Number((_a = props.item) === null || _a === void 0 ? void 0 : _a.i);
85
111
  var isIdNumber = !Number.isNaN(numberId);
@@ -88,7 +114,7 @@ function CustomSection(props) {
88
114
  }
89
115
  if (sectionActionHandler && isIdNumber) {
90
116
  sectionActionHandler({
91
- type: '@CUSTOMSECTION/CB_DRAG_OR_RESIZE_STOP',
117
+ type: '@CUSTOMSECTION/CB_RESIZE_STOP',
92
118
  payload: props
93
119
  });
94
120
  }
@@ -96,10 +122,10 @@ function CustomSection(props) {
96
122
  var onClickSection = function () {
97
123
  setSelectedCB(null);
98
124
  };
99
- return ((0, jsx_runtime_1.jsx)(S_gleStyles, __assign({ customHeight: customMinHeight }, { children: (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { overrideStyles: customsectionStyles }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: { lg: lg, sm: sm }, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: { lg: 800, sm: 480 }, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: 50, margin: [10, 10], style: {
125
+ return ((0, jsx_runtime_1.jsx)(S_gleStyles, __assign({ customHeight: customMinHeight }, { children: (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(components_1.Section, __assign({}, props, { overrideStyles: customsectionStyles }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: { lg: layouts.lg, sm: layouts.sm }, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: { lg: 800, sm: 480 }, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: 50, margin: [10, 10], style: {
100
126
  width: isFullWidth ? '100%' : maxWidth,
101
127
  minHeight: customMinHeight
102
- }, onLayoutChange: onLayoutChange, onDragStop: onDragOrResizeStop, onResizeStop: onDragOrResizeStop }, { children: componentBlocks ? (componentBlocks.map(function (each) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === each.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
128
+ }, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop }, { children: componentBlocks ? (componentBlocks.map(function (each) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === each.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
103
129
  width: '100%',
104
130
  height: '100%',
105
131
  overflow: 'hidden'
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js CHANGED
@@ -42,7 +42,7 @@ function Text(props) {
42
42
  var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 1, freezeOnceVisible: true });
43
43
  var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
44
44
  var effectCssProperties = isVisible ? effect : {};
45
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), hoverStyle: __assign(__assign({}, textHoverStyle), propsHoverStyle), onClick: onClickBox, ref: cbRef }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0)] }, void 0));
45
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), hoverStyle: __assign(__assign({}, textHoverStyle), propsHoverStyle), onClick: mode !== 'EDIT' ? onClickBox : undefined, ref: cbRef }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0)] }, void 0));
46
46
  }
47
47
  function getTextStyles(props, device) {
48
48
  var availableSpecCodes = [
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Twitter/Twitter.js CHANGED
@@ -38,6 +38,7 @@ function Twitter(props) {
38
38
  var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 1, freezeOnceVisible: true });
39
39
  var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
40
40
  var effectCssProperties = isVisible ? effect : {};
41
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), { overflowY: 'auto' }), hoverStyle: hoverStyle, ref: cbRef }, { children: (0, jsx_runtime_1.jsx)(ComponentBlocks_1.TwitterTimeline, { userId: userId, theme: theme }, void 0) }), void 0) }, void 0));
41
+ var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
42
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), { overflowY: 'auto' }), editModeStyle), hoverStyle: hoverStyle, ref: cbRef }, { children: (0, jsx_runtime_1.jsx)(ComponentBlocks_1.TwitterTimeline, { userId: userId, theme: theme }, void 0) }), void 0) }, void 0));
42
43
  }
43
44
  exports.default = Twitter;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_HiddenCover.js CHANGED
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.S_HiddenCover = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
- exports.S_HiddenCover = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: repeating-linear-gradient(\n -60deg,\n #ffffff26,\n #ffffff26 12px,\n #0000001a 12px,\n #0000001a 25px\n );\n height: 100%;\n pointer-events: none;\n position: absolute;\n width: 100%;\n"], ["\n background: repeating-linear-gradient(\n -60deg,\n #ffffff26,\n #ffffff26 12px,\n #0000001a 12px,\n #0000001a 25px\n );\n height: 100%;\n pointer-events: none;\n position: absolute;\n width: 100%;\n"])));
12
+ exports.S_HiddenCover = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: repeating-linear-gradient(\n -60deg,\n #ffffff26,\n #ffffff26 12px,\n #0000001a 12px,\n #0000001a 25px\n );\n height: 100%;\n pointer-events: none;\n position: absolute;\n width: 100%;\n z-index: 2;\n"], ["\n background: repeating-linear-gradient(\n -60deg,\n #ffffff26,\n #ffffff26 12px,\n #0000001a 12px,\n #0000001a 25px\n );\n height: 100%;\n pointer-events: none;\n position: absolute;\n width: 100%;\n z-index: 2;\n"])));
13
13
  var templateObject_1;
package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useRefDimensions.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ declare const useRefDimensions: (ref: any) => {
2
+ width: number;
3
+ height: number;
4
+ };
5
+ export default useRefDimensions;
package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useRefDimensions.js ADDED
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var react_1 = require("react");
4
+ var useRefDimensions = function (ref) {
5
+ var _a = (0, react_1.useState)({ width: 0, height: 0 }), dimensions = _a[0], setDimensions = _a[1];
6
+ (0, react_1.useEffect)(function () {
7
+ if (!ref.current)
8
+ return;
9
+ var resizeObserver = new ResizeObserver(function (callback) {
10
+ var object = callback[0];
11
+ var _a = object.contentRect, width = _a.width, height = _a.height;
12
+ setDimensions({ width: width, height: height });
13
+ });
14
+ resizeObserver.observe(ref.current);
15
+ return function () { return resizeObserver.disconnect(); }; // clean u
16
+ }, [ref]);
17
+ return dimensions;
18
+ };
19
+ exports.default = useRefDimensions;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.2.4",
3
+ "version": "0.2.5",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
@@ -22,7 +22,7 @@
22
22
  "i18next-intervalplural-postprocessor": "^3.0.0",
23
23
  "lottie-react": "^2.3.1",
24
24
  "nuka-carousel": "^4.8.4",
25
- "publ-echo": "^0.0.20",
25
+ "publ-echo": "^0.0.21",
26
26
  "react-hook-form": "^7.28.1",
27
27
  "react-i18next": "^11.12.0",
28
28
  "react-router-dom": "^5.2.0",