fix: Add ability to collapse and expand collections that are not active (#3102)
* fix: add disclosure and transition * fix: keep collections expanded * fix: tune transition and collapsing conditions * fix: collectionIcon expanded props is no longer driven by expanded state * fix: sync issue * fix: managing state together * fix: remove comment * fix: simplify expanded state * fix: remove extra state * fix: remove animation and retain expanded state * fix: remove isCollectionDropped * fix: don't use ref * review suggestions * fix many functional and design issues * don't render every single document in the sidebar, just ones that the user has seen before * chore: Sidebar refinement (#3154) * stash * wip: More sidebar tweaks * Simplify draft bubble * disclosure refactor * wip wip * lint * tweak menu position * Use document emoji for starred docs where available * feat: Trigger cmd+k from sidebar (#3149) * feat: Trigger cmd+k from sidebar * Add hint when opening command bar from sidebar * fix: Clicking internal links in shared documents sometimes reroutes to Login * fix: Spacing issues on connected slack channels list * Merge * fix: Do not prefetch JS bundles on public share links * fix: Buttons show on collection empty state when user does not have permission to edit * fix: the hover area for the "collections" subheading was being obfuscated by the initial collection drop cursor * fix: top-align disclosures * fix: Disclosure color PR feedback fix: Starred no longer draggable * fix: Overflow on sidebar button * fix: Scrollbar in sidebar when command menu is open * Minor alignment issues, clarify back in settings sidebar * fix: Fade component causes SidebarButton missizing Co-authored-by: Nan Yu <thenanyu@gmail.com> Co-authored-by: Tom Moor <tom.moor@gmail.com> Co-authored-by: Nan Yu <thenanyu@gmail.com>
This commit is contained in:
Saumya Pandey
GitHub
@@ -1,7 +1,7 @@
|
||||
import fractionalIndex from "fractional-index";
|
||||
import { observer } from "mobx-react";
|
||||
import * as React from "react";
|
||||
import { useDrop, useDrag } from "react-dnd";
|
||||
import { useDrop, useDrag, DropTargetMonitor } from "react-dnd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useLocation, useHistory } from "react-router-dom";
|
||||
import styled from "styled-components";
|
||||
@@ -70,6 +70,13 @@ function CollectionLink({
|
||||
collection.id === ui.activeCollectionId
|
||||
);
|
||||
|
||||
const [openedOnce, setOpenedOnce] = React.useState(expanded);
|
||||
React.useEffect(() => {
|
||||
if (expanded) {
|
||||
setOpenedOnce(true);
|
||||
}
|
||||
}, [expanded]);
|
||||
|
||||
const manualSort = collection.sort.field === "index";
|
||||
const can = policies.abilities(collection.id);
|
||||
const belowCollectionIndex = belowCollection ? belowCollection.index : null;
|
||||
@@ -118,7 +125,7 @@ function CollectionLink({
|
||||
// Drop to reorder document
|
||||
const [{ isOverReorder }, dropToReorder] = useDrop({
|
||||
accept: "document",
|
||||
drop: async (item: DragObject) => {
|
||||
drop: (item: DragObject) => {
|
||||
if (!collection) {
|
||||
return;
|
||||
}
|
||||
@@ -131,11 +138,11 @@ function CollectionLink({
|
||||
|
||||
// Drop to reorder collection
|
||||
const [
|
||||
{ isCollectionDropping, isDraggingAnotherCollection },
|
||||
{ isCollectionDropping, isDraggingAnyCollection },
|
||||
dropToReorderCollection,
|
||||
] = useDrop({
|
||||
accept: "collection",
|
||||
drop: async (item: DragObject) => {
|
||||
drop: (item: DragObject) => {
|
||||
collections.move(
|
||||
item.id,
|
||||
fractionalIndex(collection.index, belowCollectionIndex)
|
||||
@@ -147,9 +154,9 @@ function CollectionLink({
|
||||
(!belowCollection || item.id !== belowCollection.id)
|
||||
);
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
collect: (monitor: DropTargetMonitor<Collection, Collection>) => ({
|
||||
isCollectionDropping: monitor.isOver(),
|
||||
isDraggingAnotherCollection: monitor.canDrop(),
|
||||
isDraggingAnyCollection: monitor.getItemType() === "collection",
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -194,8 +201,7 @@ function CollectionLink({
|
||||
collection.sort,
|
||||
]);
|
||||
|
||||
const isDraggingAnyCollection =
|
||||
isDraggingAnotherCollection || isCollectionDragging;
|
||||
const displayDocumentLinks = expanded && !isCollectionDragging;
|
||||
|
||||
React.useEffect(() => {
|
||||
// If we're viewing a starred document through the starred menu then don't
|
||||
@@ -204,21 +210,14 @@ function CollectionLink({
|
||||
return;
|
||||
}
|
||||
|
||||
if (isDraggingAnyCollection) {
|
||||
setExpanded(false);
|
||||
} else {
|
||||
setExpanded(collection.id === ui.activeCollectionId);
|
||||
if (collection.id === ui.activeCollectionId) {
|
||||
setExpanded(true);
|
||||
}
|
||||
}, [isDraggingAnyCollection, collection.id, ui.activeCollectionId, search]);
|
||||
}, [collection.id, ui.activeCollectionId, search]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
ref={drop}
|
||||
style={{
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Relative ref={drop}>
|
||||
<Draggable
|
||||
key={collection.id}
|
||||
ref={dragToReorderCollection}
|
||||
@@ -228,8 +227,16 @@ function CollectionLink({
|
||||
<DropToImport collectionId={collection.id}>
|
||||
<SidebarLink
|
||||
to={collection.url}
|
||||
expanded={displayDocumentLinks}
|
||||
onDisclosureClick={(event) => {
|
||||
event.preventDefault();
|
||||
setExpanded((prev) => !prev);
|
||||
}}
|
||||
icon={
|
||||
<CollectionIcon collection={collection} expanded={expanded} />
|
||||
<CollectionIcon
|
||||
collection={collection}
|
||||
expanded={displayDocumentLinks}
|
||||
/>
|
||||
}
|
||||
showActions={menuOpen}
|
||||
isActiveDrop={isOver && canDrop}
|
||||
@@ -242,12 +249,13 @@ function CollectionLink({
|
||||
/>
|
||||
}
|
||||
exact={false}
|
||||
depth={0.5}
|
||||
depth={0}
|
||||
menu={
|
||||
!isEditing && (
|
||||
!isEditing &&
|
||||
!isDraggingAnyCollection && (
|
||||
<>
|
||||
{can.update && (
|
||||
<CollectionSortMenuWithMargin
|
||||
{can.update && displayDocumentLinks && (
|
||||
<CollectionSortMenu
|
||||
collection={collection}
|
||||
onOpen={handleMenuOpen}
|
||||
onClose={handleMenuClose}
|
||||
@@ -264,8 +272,31 @@ function CollectionLink({
|
||||
/>
|
||||
</DropToImport>
|
||||
</Draggable>
|
||||
{expanded && manualSort && (
|
||||
<DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
|
||||
</Relative>
|
||||
<Relative>
|
||||
{openedOnce && (
|
||||
<Folder $open={displayDocumentLinks}>
|
||||
{manualSort && (
|
||||
<DropCursor
|
||||
isActiveDrop={isOverReorder}
|
||||
innerRef={dropToReorder}
|
||||
position="top"
|
||||
/>
|
||||
)}
|
||||
{collectionDocuments.map((node, index) => (
|
||||
<DocumentLink
|
||||
key={node.id}
|
||||
node={node}
|
||||
collection={collection}
|
||||
activeDocument={activeDocument}
|
||||
prefetchDocument={prefetchDocument}
|
||||
canUpdate={canUpdate}
|
||||
isDraft={node.isDraft}
|
||||
depth={2}
|
||||
index={index}
|
||||
/>
|
||||
))}
|
||||
</Folder>
|
||||
)}
|
||||
{isDraggingAnyCollection && (
|
||||
<DropCursor
|
||||
@@ -273,21 +304,8 @@ function CollectionLink({
|
||||
innerRef={dropToReorderCollection}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{expanded &&
|
||||
collectionDocuments.map((node, index) => (
|
||||
<DocumentLink
|
||||
key={node.id}
|
||||
node={node}
|
||||
collection={collection}
|
||||
activeDocument={activeDocument}
|
||||
prefetchDocument={prefetchDocument}
|
||||
canUpdate={canUpdate}
|
||||
isDraft={node.isDraft}
|
||||
depth={2}
|
||||
index={index}
|
||||
/>
|
||||
))}
|
||||
</Relative>
|
||||
|
||||
<Modal
|
||||
title={t("Move document")}
|
||||
onRequestClose={handlePermissionClose}
|
||||
@@ -306,13 +324,17 @@ function CollectionLink({
|
||||
);
|
||||
}
|
||||
|
||||
const Relative = styled.div`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const Folder = styled.div<{ $open?: boolean }>`
|
||||
display: ${(props) => (props.$open ? "block" : "none")};
|
||||
`;
|
||||
|
||||
const Draggable = styled("div")<{ $isDragging: boolean; $isMoving: boolean }>`
|
||||
opacity: ${(props) => (props.$isDragging || props.$isMoving ? 0.5 : 1)};
|
||||
pointer-events: ${(props) => (props.$isMoving ? "none" : "auto")};
|
||||
`;
|
||||
|
||||
const CollectionSortMenuWithMargin = styled(CollectionSortMenu)`
|
||||
margin-right: 4px;
|
||||
`;
|
||||
|
||||
export default observer(CollectionLink);
|
||||
|
||||
Reference in New Issue
Block a user