fix: Drag and drop images in editor, conflict with sidebar react-dnd (#…

…1918) * fix: Drag and drop images in editor, conflict with sidebar react-dnd see: react-dnd/react-dnd#3052 * Bump to non-canary * Upgrade react-dnd * react-dnd api changes * lint * fix: dnd doesn't work on first render * remove unneccessary async * chore: Update react-dnd (API changed again) * restore fade
outline · Mar 10, 2021 · bac7a36 · bac7a36
1 parent ed2a42a
commit bac7a36
Show file tree

Hide file tree

Showing 8 changed files with 328 additions and 330 deletions.
diff --git a/app/components/Flex.js b/app/components/Flex.js
@@ -16,20 +16,26 @@ type AlignValues =
   | "flex-start"
   | "flex-end";
 
-type Props = {
+type Props = {|
   column?: ?boolean,
   shrink?: ?boolean,
   align?: AlignValues,
   justify?: JustifyValues,
   auto?: ?boolean,
   className?: string,
   children?: React.Node,
-};
+  role?: string,
+|};
 
-const Flex = (props: Props) => {
+const Flex = React.forwardRef<Props, HTMLDivElement>((props: Props, ref) => {
   const { children, ...restProps } = props;
-  return <Container {...restProps}>{children}</Container>;
-};
+
+  return (
+    <Container ref={ref} {...restProps}>
+      {children}
+    </Container>
+  );
+});
 
 const Container = styled.div`
   display: flex;

diff --git a/app/components/Sidebar/Main.js b/app/components/Sidebar/Main.js
@@ -12,6 +12,8 @@ import {
   SettingsIcon,
 } from "outline-icons";
 import * as React from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import CollectionNew from "scenes/CollectionNew";
@@ -63,126 +65,142 @@ function MainSidebar() {
     setInviteModalOpen(false);
   }, []);
 
+  const [dndArea, setDndArea] = React.useState();
+  const handleSidebarRef = React.useCallback((node) => setDndArea(node), []);
+  const html5Options = React.useMemo(() => ({ rootElement: dndArea }), [
+    dndArea,
+  ]);
+
   const { user, team } = auth;
   if (!user || !team) return null;
 
   const can = policies.abilities(team.id);
 
   return (
-    <Sidebar>
-      <AccountMenu>
-        {(props) => (
-          <TeamButton
-            {...props}
-            subheading={user.name}
-            teamName={team.name}
-            logoUrl={team.avatarUrl}
-            showDisclosure
-          />
-        )}
-      </AccountMenu>
-      <Scrollable flex topShadow>
-        <Section>
-          <SidebarLink
-            to="/home"
-            icon={<HomeIcon color="currentColor" />}
-            exact={false}
-            label={t("Home")}
-          />
-          <SidebarLink
-            to={{
-              pathname: "/search",
-              state: { fromMenu: true },
-            }}
-            icon={<SearchIcon color="currentColor" />}
-            label={t("Search")}
-            exact={false}
-          />
-          <SidebarLink
-            to="/starred"
-            icon={<StarredIcon color="currentColor" />}
-            exact={false}
-            label={t("Starred")}
-          />
-          <SidebarLink
-            to="/templates"
-            icon={<ShapesIcon color="currentColor" />}
-            exact={false}
-            label={t("Templates")}
-            active={documents.active ? documents.active.template : undefined}
-          />
-          <SidebarLink
-            to="/drafts"
-            icon={<EditIcon color="currentColor" />}
-            label={
-              <Drafts align="center">
-                {t("Drafts")}
-                <Bubble count={documents.totalDrafts} />
-              </Drafts>
-            }
-            active={
-              documents.active
-                ? !documents.active.publishedAt &&
-                  !documents.active.isDeleted &&
-                  !documents.active.isTemplate
-                : undefined
-            }
-          />
-        </Section>
-        <Section auto>
-          <Collections onCreateCollection={handleCreateCollectionModalOpen} />
-        </Section>
-        <Section>
-          <SidebarLink
-            to="/archive"
-            icon={<ArchiveIcon color="currentColor" />}
-            exact={false}
-            label={t("Archive")}
-            active={
-              documents.active
-                ? documents.active.isArchived && !documents.active.isDeleted
-                : undefined
-            }
-          />
-          <SidebarLink
-            to="/trash"
-            icon={<TrashIcon color="currentColor" />}
-            exact={false}
-            label={t("Trash")}
-            active={documents.active ? documents.active.isDeleted : undefined}
-          />
-          <SidebarLink
-            to="/settings"
-            icon={<SettingsIcon color="currentColor" />}
-            exact={false}
-            label={t("Settings")}
-          />
+    <Sidebar ref={handleSidebarRef}>
+      {dndArea && (
+        <DndProvider backend={HTML5Backend} options={html5Options}>
+          <AccountMenu>
+            {(props) => (
+              <TeamButton
+                {...props}
+                subheading={user.name}
+                teamName={team.name}
+                logoUrl={team.avatarUrl}
+                showDisclosure
+              />
+            )}
+          </AccountMenu>
+          <Scrollable flex topShadow>
+            <Section>
+              <SidebarLink
+                to="/home"
+                icon={<HomeIcon color="currentColor" />}
+                exact={false}
+                label={t("Home")}
+              />
+              <SidebarLink
+                to={{
+                  pathname: "/search",
+                  state: { fromMenu: true },
+                }}
+                icon={<SearchIcon color="currentColor" />}
+                label={t("Search")}
+                exact={false}
+              />
+              <SidebarLink
+                to="/starred"
+                icon={<StarredIcon color="currentColor" />}
+                exact={false}
+                label={t("Starred")}
+              />
+              <SidebarLink
+                to="/templates"
+                icon={<ShapesIcon color="currentColor" />}
+                exact={false}
+                label={t("Templates")}
+                active={
+                  documents.active ? documents.active.template : undefined
+                }
+              />
+              <SidebarLink
+                to="/drafts"
+                icon={<EditIcon color="currentColor" />}
+                label={
+                  <Drafts align="center">
+                    {t("Drafts")}
+                    <Bubble count={documents.totalDrafts} />
+                  </Drafts>
+                }
+                active={
+                  documents.active
+                    ? !documents.active.publishedAt &&
+                      !documents.active.isDeleted &&
+                      !documents.active.isTemplate
+                    : undefined
+                }
+              />
+            </Section>
+            <Section auto>
+              <Collections
+                onCreateCollection={handleCreateCollectionModalOpen}
+              />
+            </Section>
+            <Section>
+              <SidebarLink
+                to="/archive"
+                icon={<ArchiveIcon color="currentColor" />}
+                exact={false}
+                label={t("Archive")}
+                active={
+                  documents.active
+                    ? documents.active.isArchived && !documents.active.isDeleted
+                    : undefined
+                }
+              />
+              <SidebarLink
+                to="/trash"
+                icon={<TrashIcon color="currentColor" />}
+                exact={false}
+                label={t("Trash")}
+                active={
+                  documents.active ? documents.active.isDeleted : undefined
+                }
+              />
+              <SidebarLink
+                to="/settings"
+                icon={<SettingsIcon color="currentColor" />}
+                exact={false}
+                label={t("Settings")}
+              />
+              {can.invite && (
+                <SidebarLink
+                  to="/settings/people"
+                  onClick={handleInviteModalOpen}
+                  icon={<PlusIcon color="currentColor" />}
+                  label={`${t("Invite people")}…`}
+                />
+              )}
+            </Section>
+          </Scrollable>
           {can.invite && (
-            <SidebarLink
-              to="/settings/people"
-              onClick={handleInviteModalOpen}
-              icon={<PlusIcon color="currentColor" />}
-              label={`${t("Invite people")}…`}
-            />
+            <Modal
+              title={t("Invite people")}
+              onRequestClose={handleInviteModalClose}
+              isOpen={inviteModalOpen}
+            >
+              <Invite onSubmit={handleInviteModalClose} />
+            </Modal>
           )}
-        </Section>
-      </Scrollable>
-      {can.invite && (
-        <Modal
-          title={t("Invite people")}
-          onRequestClose={handleInviteModalClose}
-          isOpen={inviteModalOpen}
-        >
-          <Invite onSubmit={handleInviteModalClose} />
-        </Modal>
+          <Modal
+            title={t("Create a collection")}
+            onRequestClose={handleCreateCollectionModalClose}
+            isOpen={createCollectionModalOpen}
+          >
+            <CollectionNew onSubmit={handleCreateCollectionModalClose} />
+          </Modal>
+        </DndProvider>
       )}
-      <Modal
-        title={t("Create a collection")}
-        onRequestClose={handleCreateCollectionModalClose}
-        isOpen={createCollectionModalOpen}
-      >
-        <CollectionNew onSubmit={handleCreateCollectionModalClose} />
-      </Modal>
     </Sidebar>
   );
 }