pds-dev-kit-web-test 2.5.318 → 2.5.319

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/CompositionEditor/CompositionEditor.js +22 -22
  2. package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.d.ts +3 -1
  3. package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js +22 -19
  4. package/package.json +1 -1
package/dist/src/sub/DynamicLayout/CompositionEditor/CompositionEditor.js CHANGED
@@ -67,42 +67,42 @@ var util_1 = require("../sections/CustomSection/util");
67
67
  var parseSectionPadding_1 = __importDefault(require("../sections/CustomSection/util/layoutPropParsers/parseSectionPadding"));
68
68
  var Responsive = (0, publ_echo_1.WidthProvider)(publ_echo_1.ResponsiveGridEditor);
69
69
  var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas(props, ref) {
70
- var _a, _b, _c, _d, _e;
71
- var _f = props.editorProps, device = _f.device, shortcutKeyMode = _f.shortcutKeyMode, compositionActionHandler = _f.compositionActionHandler;
72
- var rows = props.compositionData.jsonProperties.data.CB_PLACEMENT_PROP_SECTION
73
- .CB_PLACEMENT_PROP_SECTION_SPEC_ROWS;
74
- var cols = (_a = props.compositionData.jsonProperties.data.CB_PLACEMENT_PROP_SECTION
75
- .CB_PLACEMENT_PROP_SECTION_SPEC_COLS) !== null && _a !== void 0 ? _a : 12;
70
+ var _a, _b, _c, _d, _e, _f;
71
+ var _g = props.editorProps, device = _g.device, shortcutKeyMode = _g.shortcutKeyMode, compositionActionHandler = _g.compositionActionHandler;
76
72
  // const GLE_MIN_WIDTH_DESKTOP_PX = `${GRID_CELL_MIN * cols}px`;
77
73
  // const GLE_MIN_WIDTH_MOBILE_PX = `${GRID_CELL_MIN * rows}px`;
78
74
  var editingSectionId = props.compositionData.id;
79
75
  var mode = 'EDIT';
80
- var _g = props.compositionData, componentBlocks = _g.componentBlocks, jsonProperties = _g.jsonProperties;
76
+ var _h = props.compositionData, componentBlocks = _h.componentBlocks, jsonProperties = _h.jsonProperties;
81
77
  var sectionPedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
82
- var _h = (0, react_1.useState)(sectionPedigree), pedigreeState = _h[0], setPedigreeState = _h[1];
78
+ var _j = (0, react_1.useState)(sectionPedigree), pedigreeState = _j[0], setPedigreeState = _j[1];
83
79
  (0, react_1.useEffect)(function () {
84
80
  setPedigreeState(sectionPedigree);
85
81
  }, [sectionPedigree]);
86
- var _j = jsonProperties, _k = _j.data, CB_PLACEMENT_PROP_SECTION = _k.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _k.CB_LAYOUT_PROP_PADDING, CB_CONTENT_PROP_SECTION = _k.CB_CONTENT_PROP_SECTION, zOrders = _j.zOrders;
87
- var colsDesktop = (_b = CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_COLS) !== null && _b !== void 0 ? _b : 24;
88
- var colsMobile = (_c = CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_COLS:MOBILE']) !== null && _c !== void 0 ? _c : 8;
89
- var _l = (0, react_1.useState)(null), selectedBlockId = _l[0], setSelectedBlockId = _l[1];
82
+ var _k = jsonProperties, _l = _k.data, CB_PLACEMENT_PROP_SECTION = _l.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _l.CB_LAYOUT_PROP_PADDING, CB_CONTENT_PROP_SECTION = _l.CB_CONTENT_PROP_SECTION, zOrders = _k.zOrders;
83
+ var _m = (0, react_1.useState)(null), selectedBlockId = _m[0], setSelectedBlockId = _m[1];
90
84
  var gleRef = (0, react_1.useRef)(null);
91
- var _m = (0, react_1.useState)(50), rowHeight = _m[0], setRowHeight = _m[1];
92
- var _o = (0, react_1.useState)(16), baseFontSize = _o[0], setBaseFontSize = _o[1];
85
+ var _o = (0, react_1.useState)(50), rowHeight = _o[0], setRowHeight = _o[1];
86
+ var _p = (0, react_1.useState)(16), baseFontSize = _p[0], setBaseFontSize = _p[1];
93
87
  var isMobile = device === 'MOBILE';
94
88
  var isEditMode = mode === 'EDIT';
95
89
  var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
90
+ var colsDesktop = (_a = CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_COLS) !== null && _a !== void 0 ? _a : 24;
91
+ var colsMobile = (_b = CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_COLS:MOBILE']) !== null && _b !== void 0 ? _b : 8;
92
+ var rowsDesktop = (_c = CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_ROWS) !== null && _c !== void 0 ? _c : 26;
93
+ var rowsMobile = (_d = CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE']) !== null && _d !== void 0 ? _d : 26;
94
+ var rows = isMobile ? rowsMobile : rowsDesktop;
95
+ var cols = isMobile ? colsMobile : colsDesktop;
96
96
  var canvasWidth = 50 * cols;
97
- var _p = (0, react_1.useState)(function () {
97
+ var _q = (0, react_1.useState)(function () {
98
98
  var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders), lg = _a.lg, sm = _a.sm;
99
99
  return {
100
100
  lg: lg,
101
101
  sm: sm
102
102
  };
103
- }), layouts = _p[0], setLayouts = _p[1];
104
- var _q = (0, react_1.useState)('ROOT'), editingGroupBlock = _q[0], setEditingGroupBlock = _q[1];
105
- var _r = (0, react_1.useState)([]), bulkBlockIds = _r[0], setBulkBlockIds = _r[1];
103
+ }), layouts = _q[0], setLayouts = _q[1];
104
+ var _r = (0, react_1.useState)('ROOT'), editingGroupBlock = _r[0], setEditingGroupBlock = _r[1];
105
+ var _s = (0, react_1.useState)([]), bulkBlockIds = _s[0], setBulkBlockIds = _s[1];
106
106
  (0, react_1.useEffect)(function () {
107
107
  if (editingGroupBlock) {
108
108
  var found = (0, group_1.findBlockByBlockId)(sectionPedigree, editingGroupBlock);
@@ -160,7 +160,7 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
160
160
  setEditingGroupBlock('ROOT');
161
161
  }
162
162
  }, [editingSectionId]);
163
- var workDir = (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : '/ROOT';
163
+ var workDir = (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : '/ROOT';
164
164
  (0, react_1.useEffect)(function () {
165
165
  compositionActionHandler &&
166
166
  compositionActionHandler({
@@ -394,10 +394,10 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
394
394
  });
395
395
  return __spreadArray(__spreadArray([], collisions, true), [(0, group_1.formatCbIdToBlockId)(cdId1)], false);
396
396
  };
397
- var _s = (0, util_1.parseCustomSectionPlacement)({
397
+ var _t = (0, util_1.parseCustomSectionPlacement)({
398
398
  isMobile: isMobile,
399
399
  customSectionProps: CB_PLACEMENT_PROP_SECTION
400
- }), minHeight = _s.minHeight, isFullWidth = _s.isFullWidth;
400
+ }), minHeight = _t.minHeight, isFullWidth = _t.isFullWidth;
401
401
  var customSectionStyles = {
402
402
  minHeight: "".concat(minHeight, "vh"),
403
403
  width: "".concat(canvasWidth, "px"),
@@ -1066,7 +1066,7 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
1066
1066
  fontSize: "".concat(baseFontSize, "px")
1067
1067
  }, onLayoutChange: onLayoutChange, onDragStart: onDragStart, onDragStop: onDragStop, onResizeStop: onResizeStop, onDragStopForGroup: onBulkDragStop, onFitToContent: onAutoFitContent, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode, zoom: props.editorProps.zoomScale,
1068
1068
  // GROUP
1069
- selectedGroupBlock: (_e = selectedBlockId === null || selectedBlockId === void 0 ? void 0 : selectedBlockId.toString()) !== null && _e !== void 0 ? _e : 'ROOT', editingGroupBlock: editingGroupBlock, blockStructure: newblock, bulkIds: bulkBlockIds, onDoubleClickGroup: onDoubleClickGroup, onClickGroup: onClickGroup, onDoubleClickOutsideGroup: onDoubleClickOutsideGroup, onContextGroup: onContextGroup }, { children: layouts[layoutByDevice].map(function (each, index) {
1069
+ selectedGroupBlock: (_f = selectedBlockId === null || selectedBlockId === void 0 ? void 0 : selectedBlockId.toString()) !== null && _f !== void 0 ? _f : 'ROOT', editingGroupBlock: editingGroupBlock, blockStructure: newblock, bulkIds: bulkBlockIds, onDoubleClickGroup: onDoubleClickGroup, onClickGroup: onClickGroup, onDoubleClickOutsideGroup: onDoubleClickOutsideGroup, onContextGroup: onContextGroup }, { children: layouts[layoutByDevice].map(function (each, index) {
1070
1070
  var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === each.i; });
1071
1071
  var isInBulk = bulkBlockIds.includes((0, group_1.formatCbIdToBlockId)(Number(each.i)));
1072
1072
  if (!matchedCB) {
package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.d.ts CHANGED
@@ -5,5 +5,7 @@ export type LayoutsType = {
5
5
  sm: Layout;
6
6
  lg: Layout;
7
7
  };
8
- declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISection & React.RefAttributes<unknown>>>;
8
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISection & {
9
+ device?: "DESKTOP" | "MOBILE" | undefined;
10
+ } & React.RefAttributes<unknown>>>;
9
11
  export default _default;
package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js CHANGED
@@ -59,24 +59,26 @@ var MOBILE_GRID_COLS = 8;
59
59
  var GLE_MIN_WIDTH_DESKTOP_PX = "".concat(GRID_CELL_MIN * DESKTOP_GRID_COLS, "px");
60
60
  var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
61
61
  var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
62
- var _a;
63
- var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, editingSectionId = _b.editingSectionId, mode = _b.mode, shortcutKeyMode = _b.shortcutKeyMode, sectionActionHandler = _b.sectionActionHandler;
62
+ var _a, _b, _c, _d, _e, _f, _g;
63
+ var _h = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext),
64
+ // NOTE: 이것을 사용해야함
65
+ contextDevice = _h.device, editingSectionId = _h.editingSectionId, mode = _h.mode, shortcutKeyMode = _h.shortcutKeyMode, sectionActionHandler = _h.sectionActionHandler;
64
66
  var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
65
- var _c = jsonProperties, _d = _c.data, CB_PLACEMENT_PROP_SECTION = _d.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _d.CB_LAYOUT_PROP_PADDING, zOrders = _c.zOrders;
67
+ // NOTE: 임시. 테스트용.
68
+ var device = (_b = (_a = props.device) !== null && _a !== void 0 ? _a : contextDevice) !== null && _b !== void 0 ? _b : 'DESKTOP';
69
+ var isMobile = device === 'MOBILE';
70
+ var isEditMode = mode === 'EDIT';
71
+ var _j = jsonProperties, _k = _j.data, CB_PLACEMENT_PROP_SECTION = _k.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _k.CB_LAYOUT_PROP_PADDING, zOrders = _j.zOrders;
72
+ var colsDesktop = (_c = CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_COLS) !== null && _c !== void 0 ? _c : 24;
73
+ var colsMobile = (_d = CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_COLS:MOBILE']) !== null && _d !== void 0 ? _d : 8;
74
+ var rowsDesktop = (_e = CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_ROWS) !== null && _e !== void 0 ? _e : 26;
75
+ var rowsMobile = (_f = CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE']) !== null && _f !== void 0 ? _f : 26;
76
+ var rows = isMobile ? rowsMobile : rowsDesktop;
77
+ var cols = isMobile ? colsMobile : colsDesktop;
66
78
  var containerRef = (0, react_1.useRef)(null);
67
79
  var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
68
- var _e = (0, react_1.useState)(null), selectedCB = _e[0], setSelectedCB = _e[1];
80
+ var _l = (0, react_1.useState)(null), selectedCB = _l[0], setSelectedCB = _l[1];
69
81
  var gleRef = (0, react_1.useRef)(null);
70
- var isMobile = device === 'MOBILE';
71
- var isEditMode = mode === 'EDIT';
72
- // const layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
73
- // const [layouts] = useState<LayoutsType>(() => {
74
- // const { lg, sm } = parsePlacement(componentBlocks ?? []);
75
- // return {
76
- // lg,
77
- // sm
78
- // };
79
- // });
80
82
  (0, react_1.useEffect)(function () {
81
83
  if (editingSectionId !== props.id) {
82
84
  setSelectedCB(null);
@@ -124,14 +126,15 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
124
126
  setSelectedCB('BULK');
125
127
  }
126
128
  }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
127
- var _f = (0, util_1.parseCustomSectionPlacement)({
129
+ var _m = (0, util_1.parseCustomSectionPlacement)({
128
130
  isMobile: isMobile,
129
131
  customSectionProps: CB_PLACEMENT_PROP_SECTION
130
- }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
132
+ }), minHeight = _m.minHeight, isFullWidth = _m.isFullWidth;
133
+ var canvasWidth = 50 * cols;
131
134
  var customSectionStyles = {
132
135
  minHeight: "".concat(minHeight, "vh"),
133
- width: '100%',
134
- maxWidth: isFullWidth ? '' : "".concat(width, "px")
136
+ width: "".concat(canvasWidth, "px"),
137
+ maxWidth: isFullWidth ? '' : "".concat(canvasWidth, "px")
135
138
  };
136
139
  var onClickSection = function () {
137
140
  if (!isEditMode) {
@@ -200,7 +203,7 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
200
203
  maxWidth: customSectionStyles.maxWidth,
201
204
  minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
202
205
  fontSize: "".concat(baseFontSize, "px")
203
- } }, { children: (_a = props.componentBlocks) === null || _a === void 0 ? void 0 : _a.map(function (cb, index) {
206
+ } }, { children: (_g = props.componentBlocks) === null || _g === void 0 ? void 0 : _g.map(function (cb, index) {
204
207
  var _a;
205
208
  return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
206
209
  }) })) })) })) })) }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.5.318",
3
+ "version": "2.5.319",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",