Skip to content

Commit

Permalink
fix(editable): shift out contxt to allow nested dnd (#1448)
Browse files Browse the repository at this point in the history 
Co-authored-by: seaerchin <[email protected]>
  • Loading branch information
@seaerchin
seaerchin and seaerchin authored Aug 24, 2023
1 parent e2e9eb7 commit 19b6a36
Show file tree
Hide file tree
Showing 4 changed files with 337 additions and 329 deletions.
168 changes: 90 additions & 78 deletions src/layouts/EditHomepage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
VStack,
Divider,
} from "@chakra-ui/react"
import { DragDropContext } from "@hello-pangea/dnd"
import { Button, Tag } from "@opengovsg/design-system-react"
import update from "immutability-helper"
import _ from "lodash"
Expand Down Expand Up @@ -1021,88 +1022,99 @@ const EditHomepage = ({ match }) => {
</>
)
})}
<Editable.Droppable
width="100%"
editableId="leftPane"
onDragEnd={onDragEnd}
>
<Editable.EmptySection
title="Sections you add will appear here"
subtitle="Add informative content to your website from images to text by
clicking “Add section” below"
image={<HomepageStartEditingImage />}
// NOTE: It's empty if there is only 1 section and it's a hero section
// as the hero section displays above the custom sections
// and has a fixed display
isEmpty={
frontMatter.sections.length === 1 &&
heroSection.length === 1
}
<DragDropContext onDragEnd={onDragEnd}>
<Editable.Droppable
width="100%"
editableId="leftPane"
onDragEnd={onDragEnd}
>
<VStack p={0} spacing="1.5rem">
{frontMatter.sections.map((section, sectionIndex) => (
<>
{section.resources && (
<Editable.DraggableAccordionItem
index={sectionIndex}
tag={<Tag variant="subtle">Resources</Tag>}
title="New resource widget"
isInvalid={_.some(
errors.sections[sectionIndex].resources
<Editable.EmptySection
title="Sections you add will appear here"
subtitle="Add informative content to your website from images to text by
clicking “Add section” below"
image={<HomepageStartEditingImage />}
// NOTE: It's empty if there is only 1 section and it's a hero section
// as the hero section displays above the custom sections
// and has a fixed display
isEmpty={
frontMatter.sections.length === 1 &&
heroSection.length === 1
}
>
<VStack p={0} spacing="1.5rem">
{frontMatter.sections.map(
(section, sectionIndex) => (
<>
{section.resources && (
<Editable.DraggableAccordionItem
index={sectionIndex}
tag={
<Tag variant="subtle">Resources</Tag>
}
title="New resource widget"
isInvalid={_.some(
errors.sections[sectionIndex].resources
)}
>
<ResourcesBody
{...section.resources}
index={sectionIndex}
errors={
errors.sections[sectionIndex]
.resources
}
/>
</Editable.DraggableAccordionItem>
)}
>
<ResourcesBody
{...section.resources}
index={sectionIndex}
errors={
errors.sections[sectionIndex].resources
}
/>
</Editable.DraggableAccordionItem>
)}

{section.infobar && (
<Editable.DraggableAccordionItem
index={sectionIndex}
tag={<Tag variant="subtle">Infobar</Tag>}
title={section.infobar.title || "New infobar"}
isInvalid={_.some(
errors.sections[sectionIndex].infobar

{section.infobar && (
<Editable.DraggableAccordionItem
index={sectionIndex}
tag={<Tag variant="subtle">Infobar</Tag>}
title={
section.infobar.title || "New infobar"
}
isInvalid={_.some(
errors.sections[sectionIndex].infobar
)}
>
<InfobarBody
{...section.infobar}
index={sectionIndex}
errors={
errors.sections[sectionIndex].infobar
}
/>
</Editable.DraggableAccordionItem>
)}
>
<InfobarBody
{...section.infobar}
index={sectionIndex}
errors={
errors.sections[sectionIndex].infobar
}
/>
</Editable.DraggableAccordionItem>
)}

{section.infopic && (
<Editable.DraggableAccordionItem
index={sectionIndex}
tag={<Tag variant="subtle">Infopic</Tag>}
title={section.infopic.title || "New infopic"}
isInvalid={_.some(
errors.sections[sectionIndex].infopic

{section.infopic && (
<Editable.DraggableAccordionItem
index={sectionIndex}
tag={<Tag variant="subtle">Infopic</Tag>}
title={
section.infopic.title || "New infopic"
}
isInvalid={_.some(
errors.sections[sectionIndex].infopic
)}
>
<InfopicBody
index={sectionIndex}
errors={
errors.sections[sectionIndex].infopic
}
{...section.infopic}
/>
</Editable.DraggableAccordionItem>
)}
>
<InfopicBody
index={sectionIndex}
errors={
errors.sections[sectionIndex].infopic
}
{...section.infopic}
/>
</Editable.DraggableAccordionItem>
)}
</>
))}
</VStack>
</Editable.EmptySection>
</Editable.Droppable>
</>
)
)}
</VStack>
</Editable.EmptySection>
</Editable.Droppable>
</DragDropContext>
</VStack>
</Editable.Accordion>
{/* NOTE: Set the padding here -
Expand Down
42 changes: 15 additions & 27 deletions src/layouts/components/Editable/Editable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,7 @@ import {
Box,
FlexProps,
} from "@chakra-ui/react"
import {
OnDragEndResponder,
Droppable,
DragDropContext,
Draggable,
} from "@hello-pangea/dnd"
import { Droppable, Draggable } from "@hello-pangea/dnd"
import { IconButton } from "@opengovsg/design-system-react"
import { PropsWithChildren } from "react"
import { v4 as uuid } from "uuid"
Expand Down Expand Up @@ -130,8 +125,7 @@ const getDroppableInfo = (editableId: HomepageDroppableZone): DropInfo => {
}
}

export interface EditableDraggableProps extends Omit<BoxProps, "onDragEnd"> {
onDragEnd: OnDragEndResponder
export interface EditableDraggableProps extends BoxProps {
editableId: HomepageDroppableZone
}
/**
Expand All @@ -145,29 +139,23 @@ export interface EditableDraggableProps extends Omit<BoxProps, "onDragEnd"> {
* @param editableId this determines the zone that the child draggables will be in.
*/
export const EditableDroppable = ({
onDragEnd,
children,
editableId,
children,
...rest
}: PropsWithChildren<EditableDraggableProps>) => {
return (
// NOTE: According to the dnd docs,
// there CANNOT be more than 1
// `DragDropContext` in the component tree.
<DragDropContext onDragEnd={onDragEnd}>
<Droppable {...getDroppableInfo(editableId)}>
{(droppableProvided) => (
<Box
ref={droppableProvided.innerRef}
{...droppableProvided.droppableProps}
{...rest}
>
{children}
{droppableProvided.placeholder}
</Box>
)}
</Droppable>
</DragDropContext>
<Droppable {...getDroppableInfo(editableId)}>
{(droppableProvided) => (
<Box
ref={droppableProvided.innerRef}
{...droppableProvided.droppableProps}
{...rest}
>
{children}
{droppableProvided.placeholder}
</Box>
)}
</Droppable>
)
}

Expand Down
Loading

0 comments on commit 19b6a36

Please sign in to comment.