yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Drag collection into starred section to star

Browse Source
This commit is contained in:
Tom Moor
2023-12-19 10:27:31 -05:00
parent c1b2d3c4a7
commit 6616276e4b
7 changed files with 165 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/components/Sidebar/components/Starred.tsx
View File

@@ -1,7 +1,5 @@
import fractionalIndex from "fractional-index";
import { observer } from "mobx-react";
import * as React from "react";
import { useDrop } from "react-dnd";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";
import Star from "~/models/Star";
@@ -13,50 +11,22 @@ import DropCursor from "./DropCursor";
import Header from "./Header";
import PlaceholderCollections from "./PlaceholderCollections";
import Relative from "./Relative";
import SidebarLink, { DragObject } from "./SidebarLink";
import SidebarLink from "./SidebarLink";
import StarredContext from "./StarredContext";
import StarredLink from "./StarredLink";
import { useDropToCreateStar, useDropToReorderStar } from "./useDragAndDrop";
const STARRED_PAGINATION_LIMIT = 10;
function Starred() {
const { documents, stars } = useStores();
const { stars } = useStores();
const { t } = useTranslation();
const { loading, next, end, error, page } = usePaginatedRequest<Star>(
stars.fetchPage,
{
limit: STARRED_PAGINATION_LIMIT,
}
stars.fetchPage
);
// Drop to reorder star
const [{ isOverReorder, isDraggingAnyStar }, dropToReorder] = useDrop({
accept: "star",
drop: async (item: { star: Star }) => {
void item.star.save({
index: fractionalIndex(null, stars.orderedData[0].index),
});
},
collect: (monitor) => ({
isOverReorder: !!monitor.isOver(),
isDraggingAnyStar: monitor.getItemType() === "star",
}),
});
// Drop to star document
const [{ documentIsOverReorder, isDraggingAnyDocument }, dropToStar] =
useDrop({
accept: "document",
drop: async (item: DragObject) => {
const document = documents.get(item.id);
await document?.star(fractionalIndex(null, stars.orderedData[0].index));
},
collect: (monitor) => ({
documentIsOverReorder: !!monitor.isOver(),
isDraggingAnyDocument: monitor.getItemType() === "document",
}),
});
const [reorderStarMonitor, dropToReorder] = useDropToReorderStar();
const [createStarMonitor, dropToStarRef] = useDropToCreateStar();
React.useEffect(() => {
if (error) {
@@ -73,17 +43,17 @@ function Starred() {
<Flex column>
<Header id="starred" title={t("Starred")}>
<Relative>
{isDraggingAnyStar && (
{reorderStarMonitor.isDragging && (
<DropCursor
isActiveDrop={isOverReorder}
isActiveDrop={reorderStarMonitor.isOverCursor}
innerRef={dropToReorder}
position="top"
/>
)}
{isDraggingAnyDocument && (
{createStarMonitor.isDragging && (
<DropCursor
isActiveDrop={documentIsOverReorder}
innerRef={dropToStar}
isActiveDrop={createStarMonitor.isOverCursor}
innerRef={dropToStarRef}
position="top"
/>
)}

134
app/components/Sidebar/components/StarredLink.tsx
View File

@@ -1,17 +1,12 @@
import fractionalIndex from "fractional-index";
import { Location } from "history";
import { observer } from "mobx-react";
import { StarredIcon } from "outline-icons";
import * as React from "react";
import { useEffect, useState } from "react";
import { useDrag, useDrop } from "react-dnd";
import { getEmptyImage } from "react-dnd-html5-backend";
import { useLocation } from "react-router-dom";
import styled, { useTheme } from "styled-components";
import styled from "styled-components";
import Star from "~/models/Star";
import Fade from "~/components/Fade";
import CollectionIcon from "~/components/Icons/CollectionIcon";
import EmojiIcon from "~/components/Icons/EmojiIcon";
import useBoolean from "~/hooks/useBoolean";
import useStores from "~/hooks/useStores";
import DocumentMenu from "~/menus/DocumentMenu";
@@ -21,7 +16,13 @@ import DocumentLink from "./DocumentLink";
import DropCursor from "./DropCursor";
import Folder from "./Folder";
import Relative from "./Relative";
import SidebarLink, { DragObject } from "./SidebarLink";
import SidebarLink from "./SidebarLink";
import {
useDragStar,
useDropToCreateStar,
useDropToReorderStar,
} from "./useDragAndDrop";
import { useStarLabelAndIcon } from "./useStarLabelAndIcon";
type Props = {
star: Star;
@@ -34,40 +35,6 @@ function useLocationStateStarred() {
return location.state?.starred;
}
function useLabelAndIcon({ documentId, collectionId }: Star) {
const { collections, documents } = useStores();
const theme = useTheme();
if (documentId) {
const document = documents.get(documentId);
if (document) {
return {
label: document.titleWithDefault,
icon: document.emoji ? (
<EmojiIcon emoji={document.emoji} />
) : (
<StarredIcon color={theme.yellow} />
),
};
}
}
if (collectionId) {
const collection = collections.get(collectionId);
if (collection) {
return {
label: collection.name,
icon: <CollectionIcon collection={collection} />,
};
}
}
return {
label: "",
icon: <StarredIcon color={theme.yellow} />,
};
}
function StarredLink({ star }: Props) {
const { ui, collections, documents } = useStores();
const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
@@ -99,70 +66,29 @@ function StarredLink({ star }: Props) {
[]
);
const { label, icon } = useLabelAndIcon(star);
// Draggable
const [{ isDragging }, drag, preview] = useDrag({
type: "star",
item: () => ({
star,
title: label,
icon,
}),
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
canDrag: () => true,
});
React.useEffect(() => {
preview(getEmptyImage(), { captureDraggingState: true });
}, [preview]);
// Drop to reorder
const [{ isOverReorder, isDraggingAny }, dropToReorder] = useDrop({
accept: "star",
drop: (item: { star: Star }) => {
const next = star?.next();
void item.star.save({
index: fractionalIndex(star?.index || null, next?.index || null),
});
},
collect: (monitor) => ({
isOverReorder: !!monitor.isOver(),
isDraggingAny: !!monitor.canDrop(),
}),
});
// Drop to star document
const [{ documentIsOverReorder, isDraggingAnyDocument }, dropToStar] =
useDrop({
accept: "document",
drop: async (item: DragObject) => {
const next = star?.next();
const document = documents.get(item.id);
await document?.star(
fractionalIndex(star?.index || null, next?.index || null)
);
},
collect: (monitor) => ({
documentIsOverReorder: !!monitor.isOver(),
isDraggingAnyDocument: monitor.getItemType() === "document",
}),
});
const getIndex = () => {
const next = star?.next();
return fractionalIndex(star?.index || null, next?.index || null);
};
const { label, icon } = useStarLabelAndIcon(star);
const [{ isDragging }, draggableRef] = useDragStar(star);
const [reorderStarMonitor, dropToReorderRef] = useDropToReorderStar(getIndex);
const [createStarMonitor, dropToStarRef] = useDropToCreateStar(getIndex);
const displayChildDocuments = expanded && !isDragging;
const cursor = (
<>
{isDraggingAny && (
<DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
)}
{isDraggingAnyDocument && (
{reorderStarMonitor.isDragging && (
<DropCursor
isActiveDrop={documentIsOverReorder}
innerRef={dropToStar}
isActiveDrop={reorderStarMonitor.isOverCursor}
innerRef={dropToReorderRef}
/>
)}
{createStarMonitor.isDragging && (
<DropCursor
isActiveDrop={createStarMonitor.isOverCursor}
innerRef={dropToStarRef}
/>
)}
</>
@@ -174,10 +100,6 @@ function StarredLink({ star }: Props) {
return null;
}
const { emoji } = document;
const label = emoji
? document.title.replace(emoji, "")
: document.titleWithDefault;
const collection = document.collectionId
? collections.get(document.collectionId)
: undefined;
@@ -188,7 +110,7 @@ function StarredLink({ star }: Props) {
return (
<>
<Draggable key={star.id} ref={drag} $isDragging={isDragging}>
<Draggable key={star.id} ref={draggableRef} $isDragging={isDragging}>
<SidebarLink
depth={0}
to={{
@@ -240,13 +162,13 @@ function StarredLink({ star }: Props) {
if (collection) {
return (
<>
<Draggable key={star?.id} ref={drag} $isDragging={isDragging}>
<Draggable key={star?.id} ref={draggableRef} $isDragging={isDragging}>
<CollectionLink
collection={collection}
expanded={isDragging ? undefined : displayChildDocuments}
activeDocument={documents.active}
onDisclosureClick={handleDisclosureClick}
isDraggingAnyCollection={isDraggingAny}
isDraggingAnyCollection={reorderStarMonitor.isDragging}
/>
</Draggable>
<Relative>

81
app/components/Sidebar/components/useDragAndDrop.ts Normal file
View File

@@ -0,0 +1,81 @@
import fractionalIndex from "fractional-index";
import * as React from "react";
import { ConnectDragSource, useDrag, useDrop } from "react-dnd";
import { getEmptyImage } from "react-dnd-html5-backend";
import Star from "~/models/Star";
import useStores from "~/hooks/useStores";
import { DragObject } from "./SidebarLink";
import { useStarLabelAndIcon } from "./useStarLabelAndIcon";
/**
* Hook for shared logic that allows dragging a Starred item
*
* @param star The related Star model.
*/
export function useDragStar(
star: Star
): [{ isDragging: boolean }, ConnectDragSource] {
const { label: title, icon } = useStarLabelAndIcon(star);
const [{ isDragging }, draggableRef, preview] = useDrag({
type: "star",
item: () => ({ icon, title, star }),
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
canDrag: () => true,
});
React.useEffect(() => {
preview(getEmptyImage(), { captureDraggingState: true });
}, [preview]);
return [{ isDragging }, draggableRef];
}
/**
* Hook for shared logic that allows dropping documents and collections to create a star
*
* @param getIndex A function to get the index of the current item where the star should be inserted.
*/
export function useDropToCreateStar(getIndex?: () => string) {
const { documents, stars, collections } = useStores();
return useDrop({
accept: ["document", "collection"],
drop: async (item: DragObject) => {
const model = documents.get(item.id) ?? collections?.get(item.id);
await model?.star(
getIndex?.() ?? fractionalIndex(null, stars.orderedData[0].index)
);
},
collect: (monitor) => ({
isOverCursor: !!monitor.isOver(),
isDragging: ["document", "collection"].includes(
String(monitor.getItemType())
),
}),
});
}
/**
* Hook for shared logic that allows dropping stars to reorder
*
* @param getIndex A function to get the index of the current item where the star should be inserted.
*/
export function useDropToReorderStar(getIndex?: () => string) {
const { stars } = useStores();
return useDrop({
accept: "star",
drop: async (item: { star: Star }) => {
void item.star.save({
index:
getIndex?.() ?? fractionalIndex(null, stars.orderedData[0].index),
});
},
collect: (monitor) => ({
isOverCursor: !!monitor.isOver(),
isDragging: monitor.getItemType() === "star",
}),
});
}

41
app/components/Sidebar/components/useStarLabelAndIcon.tsx Normal file
View File

@@ -0,0 +1,41 @@
import { StarredIcon } from "outline-icons";
import * as React from "react";
import { useTheme } from "styled-components";
import Star from "~/models/Star";
import CollectionIcon from "~/components/Icons/CollectionIcon";
import EmojiIcon from "~/components/Icons/EmojiIcon";
import useStores from "~/hooks/useStores";
export function useStarLabelAndIcon({ documentId, collectionId }: Star) {
const { collections, documents } = useStores();
const theme = useTheme();
if (documentId) {
const document = documents.get(documentId);
if (document) {
return {
label: document.titleWithDefault,
icon: document.emoji ? (
<EmojiIcon emoji={document.emoji} />
) : (
<StarredIcon color={theme.yellow} />
),
};
}
}
if (collectionId) {
const collection = collections.get(collectionId);
if (collection) {
return {
label: collection.name,
icon: <CollectionIcon collection={collection} />,
};
}
}
return {
label: "",
icon: <StarredIcon color={theme.yellow} />,
};
}

2
app/hooks/usePaginatedRequest.ts
View File

@@ -32,7 +32,7 @@ const DEFAULT_LIMIT = 10;
*/
export default function usePaginatedRequest<T = unknown>(
requestFn: (params?: PaginationParams | undefined) => Promise<T[]>,
params: PaginationParams
params: PaginationParams = {}
): RequestResponse<T> {
const [data, setData] = React.useState<T[]>();
const [offset, setOffset] = React.useState(INITIAL_OFFSET);

2
app/models/Collection.ts
View File

@@ -275,7 +275,7 @@ export default class Collection extends ParanoidModel {
}
@action
star = async () => this.store.star(this);
star = async (index?: string) => this.store.star(this, index);
@action
unstar = async () => this.store.unstar(this);

3
app/stores/CollectionsStore.ts
View File

@@ -196,9 +196,10 @@ export default class CollectionsStore extends Store<Collection> {
);
}
star = async (collection: Collection) => {
star = async (collection: Collection, index?: string) => {
await this.rootStore.stars.create({
collectionId: collection.id,
index,
});
};