@bindu-dashing/dam-solution-v2 5.8.180 → 5.8.182

package/build/MyDrive/DriveContainer.js

@@ -72,33 +72,33 @@ function DriveContainer({ parentFolderId, setSelectedFile, setParentFolderId, pi
         }
         return params;
     };
-    console.log('## folderId', parentFolderId);
+    const effectiveFolderId = parentFolderId || folderId || id || rootFolderId || '';
+    const prevEffectiveFolderIdRef = useRef(null);
+    const folderIdChanged = prevEffectiveFolderIdRef.current !== null &&
+        prevEffectiveFolderIdRef.current !== effectiveFolderId;
+    prevEffectiveFolderIdRef.current = effectiveFolderId;
     const folderParams = merge({}, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ page: DEFAULT_PAGE }, (type ? { category: type } : {})), (!!imagePicker
         ? {
             includeSubFolders: get(imagePicker, "includeSubFolders", true),
             teamVisibility: get(imagePicker, "teamVisibility", true),
         }
-        : {})), (!!searchKey && !!searchValue ? getSearchParams() : {})), (!!metadataKey && !!metadataValue
+        : {})), (!folderIdChanged && !!searchKey && !!searchValue ? getSearchParams() : {})), (!folderIdChanged && !!metadataKey && !!metadataValue
         ? { metadataKey: metadataKey, metadataValue: metadataValue }
-        : {})), (!!folderSearch ? { name: folderSearch } : {})), (!!globalSearch && ((parentFolderId || folderId || id) === rootFolderId || !(parentFolderId || folderId || id))
+        : {})), (!folderIdChanged && !!folderSearch ? { name: folderSearch } : {})), (!folderIdChanged && !!globalSearch && ((parentFolderId || folderId || id) === rootFolderId || !(parentFolderId || folderId || id))
         ? { globalSearch }
-        : {})), { sortBy: sortBy, sortOrder: sortOrder }), Object.assign(Object.assign({}, (selectedDateKey === "custom" && customDateRange && customDateRange[0] && customDateRange[1]
+        : {})), { sortBy: sortBy, sortOrder: sortOrder }), Object.assign(Object.assign({}, (!folderIdChanged && selectedDateKey === "custom" && customDateRange && customDateRange[0] && customDateRange[1]
         ? {
             startDate: dayjs(customDateRange[0]).format(DATE_FORMAT),
             endDate: dayjs(customDateRange[1]).format(DATE_FORMAT),
         }
-        : getDateRangeFromKey(selectedDateKey))), (!!selectedType ? { type: selectedType } : {})));
-    const effectiveFolderId = parentFolderId || folderId || id || rootFolderId || '';
-    const prevEffectiveFolderIdRef = useRef(null);
+        : folderIdChanged ? {} : getDateRangeFromKey(selectedDateKey))), (!folderIdChanged && !!selectedType ? { type: selectedType } : {})));
     useEffect(() => {
-        const prev = prevEffectiveFolderIdRef.current;
-        prevEffectiveFolderIdRef.current = effectiveFolderId;
-        if (prev != null && prev !== effectiveFolderId) {
+        if (folderIdChanged) {
             setState((prevState) => (Object.assign(Object.assign({}, prevState), { selectedType: "", selectedDateKey: "", customDateRange: null, searchKey: "", searchValue: "", metadataKey: "", metadataValue: "", folderSearch: "" })));
             if (setGlobalSearch)
                 setGlobalSearch("");
         }
-    }, [effectiveFolderId, setGlobalSearch]);
+    }, [effectiveFolderId, folderIdChanged, setGlobalSearch]);
     const { data: foldersPaginatedData, isLoading, hasNextPage, fetchNextPage, refetch, isFetching, error, } = useFolders(api, generateFoldersQueryKey(type), folderParams, effectiveFolderId);
     useEffect(() => {
         if (typeof window !== "undefined") {

package/build/MyDrive/fileDetails/FileDetails.js

@@ -31,6 +31,7 @@ const FileDetails = ({ open, handleClose, file, files, fileIds, onCloseSelection
     console.log("## FileDetails - files:", files, "file:", file, "initialFile:", initialFile, "fileIds:", fileIds, "initialFileId:", initialFileId);
     const { id } = useAppParams();
     const damConfig = useDamConfig();
+    const headerHeight = get(damConfig, "headerHeight", 0) || 0;
     const api = useMemo(() => createApiClient(damConfig), [damConfig]);
     const [state, setState] = useState({
         visible: false,
@@ -108,18 +109,34 @@ const FileDetails = ({ open, handleClose, file, files, fileIds, onCloseSelection
             setState((prevState) => (Object.assign(Object.assign({}, prevState), { visible: false })));
         }
     }, [open]);
+    // Lock body scroll when preview modal is open so drive page files don't scroll behind it
+    useEffect(() => {
+        if (open && visible) {
+            const prevBodyOverflow = document.body.style.overflow;
+            const prevHtmlOverflow = document.documentElement.style.overflow;
+            document.body.style.overflow = "hidden";
+            document.documentElement.style.overflow = "hidden";
+            return () => {
+                document.body.style.overflow = prevBodyOverflow;
+                document.documentElement.style.overflow = prevHtmlOverflow;
+            };
+        }
+    }, [open, visible]);
     if (!open && !visible)
         return null;
-    const modalContent = (_jsxs("div", { className: `md-lib-fixed md-lib-inset-0 md-lib-z-[1000] md-lib-w-screen md-lib-h-screen md-lib-bg-white dark:md-lib-bg-darkPrimary md-lib-text-black dark:md-lib-text-white md-lib-overflow-auto md-lib-transform md-lib-transition-all md-lib-duration-300 md-lib-ease-in-out ${open && visible
+    const modalStyle = headerHeight > 0
+        ? { top: headerHeight, left: 0, right: 0, bottom: 0, height: `calc(100vh - ${headerHeight}px)` }
+        : undefined;
+    const modalContent = (_jsxs("div", { className: `md-lib-fixed md-lib-z-[1000] md-lib-w-screen md-lib-bg-white dark:md-lib-bg-darkPrimary md-lib-text-black dark:md-lib-text-white md-lib-flex md-lib-flex-col md-lib-transform md-lib-transition-all md-lib-duration-300 md-lib-ease-in-out ${headerHeight === 0 ? "md-lib-inset-0 md-lib-h-screen" : ""} ${open && visible
             ? "md-lib-opacity-100 md-lib-translate-y-0"
-            : "md-lib-opacity-0 md-lib-translate-y-4"}`, onTransitionEnd: () => {
+            : "md-lib-opacity-0 md-lib-translate-y-4"}`, style: modalStyle, onTransitionEnd: () => {
             if (!open)
                 setState((prevState) => (Object.assign(Object.assign({}, prevState), { visible: false })));
-        }, children: [_jsx(FileDetailsHeader, { handleClose: handleClose, file: currentFile, onCloseSelection: onCloseSelection }), isFetching ? (_jsx(Loader, {})) : (_jsx(FileViewer, { file: currentFile, hasPrev: (!!files && currentIndex > 0) ||
-                    (!!fileIds && fileIds.length > 1 && currentIndex > 0) ||
-                    !!get(currentFile, "prevFileId"), hasNext: (!!files && currentIndex < get(files, "length", 0) - 1) ||
-                    (!!fileIds && fileIds.length > 1 && currentIndex < fileIds.length - 1) ||
-                    !!get(currentFile, "nextFileId"), onPrev: handlePrevious, onNext: handleNext, handleClose: handleClose }))] }));
+        }, children: [_jsx("div", { className: "md-lib-shrink-0", children: _jsx(FileDetailsHeader, { handleClose: handleClose, file: currentFile, onCloseSelection: onCloseSelection }) }), _jsx("div", { className: "md-lib-flex-1 md-lib-min-h-0 md-lib-overflow-auto", children: isFetching ? (_jsx(Loader, {})) : (_jsx(FileViewer, { file: currentFile, hasPrev: (!!files && currentIndex > 0) ||
+                        (!!fileIds && fileIds.length > 1 && currentIndex > 0) ||
+                        !!get(currentFile, "prevFileId"), hasNext: (!!files && currentIndex < get(files, "length", 0) - 1) ||
+                        (!!fileIds && fileIds.length > 1 && currentIndex < fileIds.length - 1) ||
+                        !!get(currentFile, "nextFileId"), onPrev: handlePrevious, onNext: handleNext, handleClose: handleClose })) })] }));
     return ReactDOM.createPortal(modalContent, document.body);
 };
 export default FileDetails;

package/build/MyDrive/index.d.ts

@@ -12,5 +12,7 @@ declare function App(props: {
     showSubfolders?: boolean;
     userEmail?: string;
     onFolderChange?: (folderId: string) => void;
+    /** Height of host app header (e.g. navbar) in px. When set, preview modal positions below it instead of covering. */
+    headerHeight?: number;
 }): JSX.Element;
 export default App;

package/build/MyDrive/index.js

@@ -23,6 +23,7 @@ function App(props) {
         parentId: props === null || props === void 0 ? void 0 : props.parentId,
         showSubfolders: props === null || props === void 0 ? void 0 : props.showSubfolders,
         routerVersion: props === null || props === void 0 ? void 0 : props.routerVersion,
+        headerHeight: props === null || props === void 0 ? void 0 : props.headerHeight,
     }), [
         props === null || props === void 0 ? void 0 : props.accessKey,
         props === null || props === void 0 ? void 0 : props.secretKey,
@@ -35,6 +36,7 @@ function App(props) {
         props === null || props === void 0 ? void 0 : props.id,
         props === null || props === void 0 ? void 0 : props.parentId,
         props === null || props === void 0 ? void 0 : props.showSubfolders,
+        props === null || props === void 0 ? void 0 : props.headerHeight,
     ]);
     const [folders, setFolders] = useState([]);
     if (typeof window !== "undefined" && !window.process) {

package/build/hocs/DamConfigContext.js

@@ -19,7 +19,7 @@ import { SUBSCRIPTION_EXPIRED_ERROR_MESSAGE } from "./appConstants";
 const DamConfigContext = createContext(null);
 export const DamConfigProvider = ({ children, config }) => {
     // console.log(config);
-    const { damAccessKey, secretKey, subdomain, teamIds, appType, initialRootFolderId } = config;
+    const { damAccessKey, secretKey, subdomain, teamIds, appType, initialRootFolderId, headerHeight } = config;
     const [accessToken, setAccessToken] = useState(null);
     const [user, setDamUser] = useState(null);
     const [brand, setBrand] = useState(null);
@@ -148,6 +148,7 @@ export const DamConfigProvider = ({ children, config }) => {
             rootFolderId,
             teams,
             isAdmin,
+            headerHeight: headerHeight !== null && headerHeight !== void 0 ? headerHeight : 0,
         }, children: loading ? (_jsx(Loader, {})) : (_jsx(_Fragment, { children: showPaymentErr ? (_jsx("div", { className: "flex items-center justify-center h-[calc(100vh-200px)]", children: _jsx("p", { className: "text-sm font-medium text-textColor dark:text-darkTextColor", children: SUBSCRIPTION_EXPIRED_ERROR_MESSAGE }) })) : (children) })) }));
 };
 export const useDamConfig = () => useContext(DamConfigContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bindu-dashing/dam-solution-v2",
-  "version": "5.8.180",
+  "version": "5.8.182",
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@emoji-mart/data": "^1.2.1",