Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
342 lines
12 KiB
Plaintext
342 lines
12 KiB
Plaintext
'use client';
|
|
|
|
import { c as _c } from "react/compiler-runtime";
|
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
import { useDndMonitor } from '@dnd-kit/core';
|
|
import { getTranslation } from '@payloadcms/translations';
|
|
import { useRouter } from 'next/navigation.js';
|
|
import { PREFERENCE_KEYS } from 'payload/shared';
|
|
import React, { Fragment } from 'react';
|
|
import { DroppableBreadcrumb } from '../../elements/FolderView/Breadcrumbs/index.js';
|
|
import { ColoredFolderIcon } from '../../elements/FolderView/ColoredFolderIcon/index.js';
|
|
import { CurrentFolderActions } from '../../elements/FolderView/CurrentFolderActions/index.js';
|
|
import { DragOverlaySelection } from '../../elements/FolderView/DragOverlaySelection/index.js';
|
|
import { FilterFolderTypePill } from '../../elements/FolderView/FilterFolderTypePill/index.js';
|
|
import { FolderFileTable } from '../../elements/FolderView/FolderFileTable/index.js';
|
|
import { ItemCardGrid } from '../../elements/FolderView/ItemCardGrid/index.js';
|
|
import { SortByPill } from '../../elements/FolderView/SortByPill/index.js';
|
|
import { ToggleViewButtons } from '../../elements/FolderView/ToggleViewButtons/index.js';
|
|
import { Gutter } from '../../elements/Gutter/index.js';
|
|
import { ListHeader } from '../../elements/ListHeader/index.js';
|
|
import { ListCreateNewDocInFolderButton } from '../../elements/ListHeader/TitleActions/index.js';
|
|
import { NoListResults } from '../../elements/NoListResults/index.js';
|
|
import { SearchBar } from '../../elements/SearchBar/index.js';
|
|
import { useStepNav } from '../../elements/StepNav/index.js';
|
|
import { useEditDepth } from '../../providers/EditDepth/index.js';
|
|
import { FolderProvider, useFolder } from '../../providers/Folders/index.js';
|
|
import { usePreferences } from '../../providers/Preferences/index.js';
|
|
import { useRouteCache } from '../../providers/RouteCache/index.js';
|
|
import { useRouteTransition } from '../../providers/RouteTransition/index.js';
|
|
import { useTranslation } from '../../providers/Translation/index.js';
|
|
import { useWindowInfo } from '../../providers/WindowInfo/index.js';
|
|
import { ListSelection } from '../CollectionFolder/ListSelection/index.js';
|
|
import './index.scss';
|
|
const baseClass = 'folder-list';
|
|
export function DefaultBrowseByFolderView({
|
|
activeCollectionFolderSlugs,
|
|
allCollectionFolderSlugs,
|
|
allowCreateCollectionSlugs,
|
|
baseFolderPath,
|
|
breadcrumbs,
|
|
documents,
|
|
folderFieldName,
|
|
folderID,
|
|
FolderResultsComponent,
|
|
search,
|
|
subfolders,
|
|
...restOfProps
|
|
}) {
|
|
return /*#__PURE__*/_jsx(FolderProvider, {
|
|
activeCollectionFolderSlugs: activeCollectionFolderSlugs,
|
|
allCollectionFolderSlugs: allCollectionFolderSlugs,
|
|
allowCreateCollectionSlugs: allowCreateCollectionSlugs,
|
|
baseFolderPath: baseFolderPath,
|
|
breadcrumbs: breadcrumbs,
|
|
documents: documents,
|
|
folderFieldName: folderFieldName,
|
|
folderID: folderID,
|
|
FolderResultsComponent: FolderResultsComponent,
|
|
search: search,
|
|
subfolders: subfolders,
|
|
children: /*#__PURE__*/_jsx(BrowseByFolderViewInContext, {
|
|
...restOfProps
|
|
})
|
|
});
|
|
}
|
|
function BrowseByFolderViewInContext(props) {
|
|
const $ = _c(20);
|
|
const {
|
|
AfterFolderList,
|
|
AfterFolderListTable,
|
|
BeforeFolderList,
|
|
BeforeFolderListTable,
|
|
Description,
|
|
disableBulkDelete,
|
|
disableBulkEdit,
|
|
folderAssignedCollections,
|
|
viewPreference
|
|
} = props;
|
|
const router = useRouter();
|
|
const {
|
|
i18n,
|
|
t
|
|
} = useTranslation();
|
|
const drawerDepth = useEditDepth();
|
|
const {
|
|
setStepNav
|
|
} = useStepNav();
|
|
const {
|
|
startRouteTransition
|
|
} = useRouteTransition();
|
|
const {
|
|
clearRouteCache
|
|
} = useRouteCache();
|
|
const {
|
|
breakpoints: t0
|
|
} = useWindowInfo();
|
|
const {
|
|
s: smallBreak
|
|
} = t0;
|
|
const {
|
|
setPreference
|
|
} = usePreferences();
|
|
const {
|
|
allowCreateCollectionSlugs,
|
|
breadcrumbs,
|
|
documents,
|
|
dragOverlayItem,
|
|
folderCollectionConfig,
|
|
folderID,
|
|
folderType,
|
|
getFolderRoute,
|
|
getSelectedItems,
|
|
moveToFolder,
|
|
refineFolderData,
|
|
search,
|
|
selectedItemKeys,
|
|
setIsDragging,
|
|
subfolders
|
|
} = useFolder();
|
|
const [activeView, setActiveView] = React.useState(viewPreference || "grid");
|
|
let t1;
|
|
if ($[0] !== breadcrumbs || $[1] !== folderCollectionConfig || $[2] !== i18n || $[3] !== t) {
|
|
t1 = () => {
|
|
const locationLabel = breadcrumbs.length === 0 ? getTranslation(folderCollectionConfig.labels?.plural, i18n) : breadcrumbs[breadcrumbs.length - 1].name;
|
|
return t("folder:searchByNameInFolder", {
|
|
folderName: locationLabel
|
|
});
|
|
};
|
|
$[0] = breadcrumbs;
|
|
$[1] = folderCollectionConfig;
|
|
$[2] = i18n;
|
|
$[3] = t;
|
|
$[4] = t1;
|
|
} else {
|
|
t1 = $[4];
|
|
}
|
|
const [searchPlaceholder] = React.useState(t1);
|
|
let t2;
|
|
if ($[5] !== clearRouteCache || $[6] !== getSelectedItems || $[7] !== moveToFolder) {
|
|
t2 = async event => {
|
|
if (!event.over) {
|
|
return;
|
|
}
|
|
if (event.over.data.current.type === "folder" && "id" in event.over.data.current) {
|
|
await moveToFolder({
|
|
itemsToMove: getSelectedItems(),
|
|
toFolderID: event.over.data.current.id || null
|
|
});
|
|
clearRouteCache();
|
|
}
|
|
};
|
|
$[5] = clearRouteCache;
|
|
$[6] = getSelectedItems;
|
|
$[7] = moveToFolder;
|
|
$[8] = t2;
|
|
} else {
|
|
t2 = $[8];
|
|
}
|
|
const onDragEnd = t2;
|
|
const totalDocsAndSubfolders = documents.length + subfolders.length;
|
|
const listHeaderTitle = !breadcrumbs.length ? t("folder:browseByFolder") : breadcrumbs[breadcrumbs.length - 1].name;
|
|
const handleSetViewType = view => {
|
|
setPreference(PREFERENCE_KEYS.BROWSE_BY_FOLDER, {
|
|
viewPreference: view
|
|
});
|
|
setActiveView(view);
|
|
};
|
|
let t3;
|
|
let t4;
|
|
if ($[9] !== breadcrumbs || $[10] !== drawerDepth || $[11] !== getFolderRoute || $[12] !== router || $[13] !== setStepNav || $[14] !== startRouteTransition || $[15] !== t) {
|
|
t3 = () => {
|
|
if (!drawerDepth) {
|
|
setStepNav([!breadcrumbs.length ? {
|
|
label: _jsxs("div", {
|
|
className: `${baseClass}__step-nav-icon-label`,
|
|
children: [_jsx(ColoredFolderIcon, {}), t("folder:browseByFolder")]
|
|
}, "root")
|
|
} : {
|
|
label: _jsxs(DroppableBreadcrumb, {
|
|
className: [`${baseClass}__step-nav-droppable`, `${baseClass}__step-nav-icon-label`].filter(Boolean).join(" "),
|
|
id: null,
|
|
onClick: () => {
|
|
startRouteTransition(() => {
|
|
router.push(getFolderRoute(null));
|
|
});
|
|
},
|
|
children: [_jsx(ColoredFolderIcon, {}), t("folder:browseByFolder")]
|
|
}, "root")
|
|
}, ...breadcrumbs.map((crumb, crumbIndex) => ({
|
|
label: crumbIndex === breadcrumbs.length - 1 ? crumb.name : _jsx(DroppableBreadcrumb, {
|
|
className: `${baseClass}__step-nav-droppable`,
|
|
id: crumb.id,
|
|
onClick: () => {
|
|
startRouteTransition(() => {
|
|
router.push(getFolderRoute(crumb.id));
|
|
});
|
|
},
|
|
children: crumb.name
|
|
}, crumb.id)
|
|
}))]);
|
|
}
|
|
};
|
|
t4 = [breadcrumbs, drawerDepth, getFolderRoute, router, setStepNav, startRouteTransition, t];
|
|
$[9] = breadcrumbs;
|
|
$[10] = drawerDepth;
|
|
$[11] = getFolderRoute;
|
|
$[12] = router;
|
|
$[13] = setStepNav;
|
|
$[14] = startRouteTransition;
|
|
$[15] = t;
|
|
$[16] = t3;
|
|
$[17] = t4;
|
|
} else {
|
|
t3 = $[16];
|
|
t4 = $[17];
|
|
}
|
|
React.useEffect(t3, t4);
|
|
const nonFolderCollectionSlugs = allowCreateCollectionSlugs.filter(slug => slug !== folderCollectionConfig.slug);
|
|
let t5;
|
|
if ($[18] !== refineFolderData) {
|
|
t5 = search_0 => refineFolderData({
|
|
query: {
|
|
search: search_0
|
|
},
|
|
updateURL: true
|
|
});
|
|
$[18] = refineFolderData;
|
|
$[19] = t5;
|
|
} else {
|
|
t5 = $[19];
|
|
}
|
|
return _jsxs(Fragment, {
|
|
children: [_jsx(DndEventListener, {
|
|
onDragEnd,
|
|
setIsDragging
|
|
}), _jsxs("div", {
|
|
className: `${baseClass} ${baseClass}--folders`,
|
|
children: [BeforeFolderList, _jsxs(Gutter, {
|
|
className: `${baseClass}__wrap`,
|
|
children: [_jsx(ListHeader, {
|
|
Actions: [!smallBreak && _jsx(ListSelection, {
|
|
disableBulkDelete,
|
|
disableBulkEdit,
|
|
folderAssignedCollections
|
|
}, "list-selection")].filter(Boolean),
|
|
AfterListHeaderContent: Description,
|
|
title: listHeaderTitle,
|
|
TitleActions: [allowCreateCollectionSlugs.length && _jsx(ListCreateNewDocInFolderButton, {
|
|
buttonLabel: allowCreateCollectionSlugs.length > 1 ? t("general:createNew") : `${t("general:create")} ${getTranslation(folderCollectionConfig.labels?.singular, i18n).toLowerCase()}`,
|
|
collectionSlugs: allowCreateCollectionSlugs,
|
|
folderAssignedCollections: Array.isArray(folderType) ? folderType : [],
|
|
onCreateSuccess: clearRouteCache,
|
|
slugPrefix: "create-document--header-pill"
|
|
}, "create-new-button")].filter(Boolean)
|
|
}), _jsx(SearchBar, {
|
|
Actions: [_jsx(SortByPill, {}, "sort-by-pill"), folderID && _jsx(FilterFolderTypePill, {}, "collection-type"), _jsx(ToggleViewButtons, {
|
|
activeView,
|
|
setActiveView: handleSetViewType
|
|
}, "toggle-view-buttons"), _jsx(CurrentFolderActions, {}, "current-folder-actions")].filter(Boolean),
|
|
label: searchPlaceholder,
|
|
onSearchChange: t5,
|
|
searchQueryParam: search
|
|
}), BeforeFolderListTable, totalDocsAndSubfolders > 0 && _jsx(_Fragment, {
|
|
children: activeView === "grid" ? _jsxs("div", {
|
|
children: [subfolders.length ? _jsx(_Fragment, {
|
|
children: _jsx(ItemCardGrid, {
|
|
items: subfolders,
|
|
title: "Folders",
|
|
type: "folder"
|
|
})
|
|
}) : null, documents.length ? _jsx(_Fragment, {
|
|
children: _jsx(ItemCardGrid, {
|
|
items: documents,
|
|
subfolderCount: subfolders.length,
|
|
title: "Documents",
|
|
type: "file"
|
|
})
|
|
}) : null]
|
|
}) : _jsx(FolderFileTable, {})
|
|
}), totalDocsAndSubfolders === 0 && _jsx(NoListResults, {
|
|
Actions: [allowCreateCollectionSlugs.includes(folderCollectionConfig.slug) && _jsx(ListCreateNewDocInFolderButton, {
|
|
buttonLabel: `${t("general:create")} ${getTranslation(folderCollectionConfig.labels?.singular, i18n).toLowerCase()}`,
|
|
buttonSize: "medium",
|
|
buttonStyle: "primary",
|
|
collectionSlugs: [folderCollectionConfig.slug],
|
|
folderAssignedCollections: Array.isArray(folderType) ? folderType : [],
|
|
onCreateSuccess: clearRouteCache,
|
|
slugPrefix: "create-folder--no-results"
|
|
}, "create-folder"), folderID && nonFolderCollectionSlugs.length > 0 && _jsx(ListCreateNewDocInFolderButton, {
|
|
buttonLabel: `${t("general:create")} ${t("general:document").toLowerCase()}`,
|
|
buttonSize: "medium",
|
|
buttonStyle: "primary",
|
|
collectionSlugs: nonFolderCollectionSlugs,
|
|
folderAssignedCollections: Array.isArray(folderType) ? folderType : [],
|
|
onCreateSuccess: clearRouteCache,
|
|
slugPrefix: "create-document--no-results"
|
|
}, "create-document")].filter(Boolean),
|
|
Message: _jsxs(_Fragment, {
|
|
children: [_jsx("h3", {
|
|
children: i18n.t("general:noResultsFound")
|
|
}), _jsx("p", {
|
|
children: i18n.t("general:noResultsDescription")
|
|
})]
|
|
})
|
|
}), AfterFolderListTable]
|
|
}), AfterFolderList]
|
|
}), selectedItemKeys.size > 0 && dragOverlayItem && _jsx(DragOverlaySelection, {
|
|
item: dragOverlayItem,
|
|
selectedCount: selectedItemKeys.size
|
|
})]
|
|
});
|
|
}
|
|
function DndEventListener(t0) {
|
|
const $ = _c(3);
|
|
const {
|
|
onDragEnd,
|
|
setIsDragging
|
|
} = t0;
|
|
let t1;
|
|
if ($[0] !== onDragEnd || $[1] !== setIsDragging) {
|
|
t1 = {
|
|
onDragCancel() {
|
|
setIsDragging(false);
|
|
},
|
|
onDragEnd(event) {
|
|
setIsDragging(false);
|
|
onDragEnd(event);
|
|
},
|
|
onDragStart() {
|
|
setIsDragging(true);
|
|
}
|
|
};
|
|
$[0] = onDragEnd;
|
|
$[1] = setIsDragging;
|
|
$[2] = t1;
|
|
} else {
|
|
t1 = $[2];
|
|
}
|
|
useDndMonitor(t1);
|
|
return null;
|
|
}
|
|
//# sourceMappingURL=index.js.map |