pds-dev-kit-web 2.2.49 → 2.2.50

package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, shortcutKeyMode, dynamicLayoutRef }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

package/dist/src/sub/DynamicLayout/DynamicLayout.js

@@ -25,7 +25,7 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
@@ -36,8 +36,9 @@ function DynamicLayout(_a) {
             navigationHandler: navigationHandler,
             sectionActionHandler: sectionActionHandler,
             editingSectionId: editingSectionId,
-            programmedSectionComponents: programmedSectionComponents
-        } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
+            programmedSectionComponents: programmedSectionComponents,
+            shortcutKeyMode: shortcutKeyMode
+        } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { dynamicLayoutRef: dynamicLayoutRef, editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
                 (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] })));
 }
 exports.default = DynamicLayout;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import type { ISection } from '../../types';
-export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, onClickEditSection }: {
+import type { DynamicLayoutProps, ISection } from '../../types';
+export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, dynamicLayoutRef, onClickEditSection }: {
     filteredSortedSection: ISection[];
     scrollDownTargetSectionId?: number;
     editingSectionId?: number;
+    dynamicLayoutRef: DynamicLayoutProps['dynamicLayoutRef'];
     onClickEditSection: (section: ISection) => void;
 }): JSX.Element;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.js

@@ -26,19 +26,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var sections_1 = require("../../../DynamicLayout/sections");
 var SectionBox_1 = __importDefault(require("./SectionBox"));
 function EditModeSectionMatcher(_a) {
-    var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, onClickEditSection = _a.onClickEditSection;
+    var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, dynamicLayoutRef = _a.dynamicLayoutRef, onClickEditSection = _a.onClickEditSection;
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iframeSection ? ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isIframeSection: true, isEditing: editingSectionId === iframeSection.id, scrollIntoThisSection: iframeSection.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(iframeSection); } }, { children: (0, jsx_runtime_1.jsx)(Matcher, __assign({}, iframeSection)) }), iframeSection.id)) : (filteredSortedSection.map(function (section) { return ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(section); } }, { children: (0, jsx_runtime_1.jsx)(Matcher, __assign({}, section)) }), section.id)); })) }));
+    var _b = (0, react_1.useState)(null), selectedSectionRef = _b[0], setSelectedSectionRef = _b[1];
+    var refCallback = (0, react_1.useCallback)(function (node) {
+        setSelectedSectionRef(node);
+    }, []);
+    (0, react_1.useImperativeHandle)(dynamicLayoutRef, function () {
+        return {
+            selectCB: function (cb) {
+                selectedSectionRef === null || selectedSectionRef === void 0 ? void 0 : selectedSectionRef.selectCB(cb);
+            },
+            selectCBInBulk: function (cbIds) {
+                selectedSectionRef === null || selectedSectionRef === void 0 ? void 0 : selectedSectionRef.selectCBInBulk(cbIds);
+            }
+        };
+    }, [selectedSectionRef]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iframeSection ? ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isIframeSection: true, isEditing: editingSectionId === iframeSection.id, scrollIntoThisSection: iframeSection.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(iframeSection); } }, { children: (0, jsx_runtime_1.jsx)(DesignedSectionsMatcher, __assign({}, iframeSection)) }), iframeSection.id)) : (filteredSortedSection.map(function (section) { return ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(section); } }, { children: section.type === 'CUSTOM' ? ((0, jsx_runtime_1.jsx)(sections_1.CustomSection, __assign({}, section, { ref: editingSectionId === section.id ? refCallback : null }))) : ((0, jsx_runtime_1.jsx)(DesignedSectionsMatcher, __assign({}, section))) }), section.id)); })) }));
 }
 exports.default = EditModeSectionMatcher;
-function Matcher(_a) {
+function DesignedSectionsMatcher(_a) {
     var props = __rest(_a, []);
-    if (props.type === 'CUSTOM') {
-        return (0, jsx_runtime_1.jsx)(sections_1.CustomSection, __assign({}, props));
-    }
     var schema = props.manifest.schema;
     switch (schema) {
         case 'BASE_INTRO':

package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackground.js

@@ -30,8 +30,9 @@ function CustomSectionBackground(_a) {
     var context = (0, react_1.useContext)(sectionContext_1.sectionContext);
     var id = context.id, jsonProperties = context.jsonProperties;
     var backgroundRef = (0, react_1.useRef)(null);
-    var _c = jsonProperties || {}, CB_STYLE_PROP_BGOVERLAY = _c.CB_STYLE_PROP_BGOVERLAY, CB_STYLE_PROP_BGMEDIA = _c.CB_STYLE_PROP_BGMEDIA;
-    var _d = (0, util_1.parseJsonProperties)(jsonProperties, isMobile ? 'MOBILE' : 'DESKTOP'), style = _d.style, overlayStyle = _d.overlayStyle, effect = _d.effect;
+    var data = jsonProperties.data;
+    var CB_STYLE_PROP_BGOVERLAY = data.CB_STYLE_PROP_BGOVERLAY, CB_STYLE_PROP_BGMEDIA = data.CB_STYLE_PROP_BGMEDIA;
+    var _c = (0, util_1.parseJsonProperties)(data, isMobile ? 'MOBILE' : 'DESKTOP'), style = _c.style, overlayStyle = _c.overlayStyle, effect = _c.effect;
     var isOverlay = getIsOverlay(isMobile, CB_STYLE_PROP_BGOVERLAY);
     var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
     var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);

package/dist/src/sub/DynamicLayout/hooks/useCustomSectionShortcut/useCustomSectionShortcut.d.ts

@@ -0,0 +1,6 @@
+export declare const CUSTOMSECTION_SHORTCUT_KEYS: string[];
+export type CustomSectionShortcutType = 'BULK_SELECT' | 'COLLISION_SELECT' | 'SELECT_ALL' | null;
+declare function useCustomSectionShortcut(): {
+    shortcut: CustomSectionShortcutType;
+};
+export default useCustomSectionShortcut;

package/dist/src/sub/DynamicLayout/hooks/useCustomSectionShortcut/useCustomSectionShortcut.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CUSTOMSECTION_SHORTCUT_KEYS = void 0;
+var react_1 = require("react");
+exports.CUSTOMSECTION_SHORTCUT_KEYS = ['Shift', 'Meta', 'A', 'ㅁ'];
+function useCustomSectionShortcut() {
+    var _a = (0, react_1.useState)(null), shortcut = _a[0], setShortcut = _a[1];
+    (0, react_1.useEffect)(function () {
+        var keys = new Map();
+        function onKeyDown(e) {
+            if (!exports.CUSTOMSECTION_SHORTCUT_KEYS.includes(e.key)) {
+                return;
+            }
+            keys.set(e.key, true);
+            var isShiftOn = keys.get('Shift');
+            var isMetaOn = keys.get('Meta');
+            var isAOn = keys.get('A') || keys.get('ㅁ');
+            if (isShiftOn && isAOn) {
+                setShortcut('SELECT_ALL');
+                return;
+            }
+            if (isShiftOn && isMetaOn) {
+                setShortcut('COLLISION_SELECT');
+                return;
+            }
+            if (isShiftOn) {
+                setShortcut('BULK_SELECT');
+            }
+        }
+        function onKeyUp(e) {
+            if (e.key === 'a') {
+                keys.delete('A');
+            }
+            else {
+                keys.delete(e.key);
+            }
+            setShortcut(null);
+        }
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('keyup', onKeyUp);
+        return function () {
+            document.removeEventListener('keydown', onKeyDown);
+            document.removeEventListener('keyup', onKeyUp);
+        };
+    }, []);
+    return {
+        shortcut: shortcut
+    };
+}
+exports.default = useCustomSectionShortcut;