84d6bf8ddf
* Migrations, models, commands * ui * Move starred hint to location state * lint * tsc * refactor * Add collection empty state in expanded sidebar * Add empty placeholder within starred collections * Drag and drop improves, Relative refactor * fix: Starring untitled draft leaves empty space * fix: Creating draft in starred collection shouldnt open main * fix: Dupe drop cursor * Final fixes * fix: Canonical redirect replaces starred location state * fix: Don't show reorder cursor at the top of collection with no permission to edit when dragging
92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
import { observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import { useDrop } from "react-dnd";
|
|
import { useTranslation } from "react-i18next";
|
|
import Collection from "~/models/Collection";
|
|
import Document from "~/models/Document";
|
|
import usePolicy from "~/hooks/usePolicy";
|
|
import useStores from "~/hooks/useStores";
|
|
import useToasts from "~/hooks/useToasts";
|
|
import DocumentLink from "./DocumentLink";
|
|
import DropCursor from "./DropCursor";
|
|
import EmptyCollectionPlaceholder from "./EmptyCollectionPlaceholder";
|
|
import Folder from "./Folder";
|
|
import { DragObject } from "./SidebarLink";
|
|
import useCollectionDocuments from "./useCollectionDocuments";
|
|
|
|
type Props = {
|
|
collection: Collection;
|
|
expanded: boolean;
|
|
prefetchDocument?: (documentId: string) => Promise<Document | void>;
|
|
};
|
|
|
|
function CollectionLinkChildren({
|
|
collection,
|
|
expanded,
|
|
prefetchDocument,
|
|
}: Props) {
|
|
const can = usePolicy(collection.id);
|
|
const { showToast } = useToasts();
|
|
const manualSort = collection.sort.field === "index";
|
|
const { documents } = useStores();
|
|
const { t } = useTranslation();
|
|
|
|
const childDocuments = useCollectionDocuments(collection, documents.active);
|
|
|
|
// Drop to reorder document
|
|
const [{ isOverReorder, isDraggingAnyDocument }, dropToReorder] = useDrop({
|
|
accept: "document",
|
|
drop: (item: DragObject) => {
|
|
if (!manualSort) {
|
|
showToast(
|
|
t(
|
|
"You can't reorder documents in an alphabetically sorted collection"
|
|
),
|
|
{
|
|
type: "info",
|
|
timeout: 5000,
|
|
}
|
|
);
|
|
return;
|
|
}
|
|
|
|
if (!collection) {
|
|
return;
|
|
}
|
|
documents.move(item.id, collection.id, undefined, 0);
|
|
},
|
|
collect: (monitor) => ({
|
|
isOverReorder: !!monitor.isOver(),
|
|
isDraggingAnyDocument: !!monitor.canDrop(),
|
|
}),
|
|
});
|
|
|
|
return (
|
|
<Folder expanded={expanded}>
|
|
{isDraggingAnyDocument && can.update && (
|
|
<DropCursor
|
|
disabled={!manualSort}
|
|
isActiveDrop={isOverReorder}
|
|
innerRef={dropToReorder}
|
|
position="top"
|
|
/>
|
|
)}
|
|
{childDocuments.map((node, index) => (
|
|
<DocumentLink
|
|
key={node.id}
|
|
node={node}
|
|
collection={collection}
|
|
activeDocument={documents.active}
|
|
prefetchDocument={prefetchDocument}
|
|
isDraft={node.isDraft}
|
|
depth={2}
|
|
index={index}
|
|
/>
|
|
))}
|
|
{childDocuments.length === 0 && <EmptyCollectionPlaceholder />}
|
|
</Folder>
|
|
);
|
|
}
|
|
|
|
export default observer(CollectionLinkChildren);
|