Skip to content

Commit

Permalink
fix: add placeholder info box for index page editing
Browse files Browse the repository at this point in the history
  • Loading branch information
@dcshzj
dcshzj committed Nov 18, 2024
1 parent b10b306 commit 65812ec
Showing 1 changed file with 114 additions and 97 deletions.
211 changes: 114 additions & 97 deletions apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { DropResult } from "@hello-pangea/dnd"
import { useCallback } from "react"
import { Box, Button, Flex, Icon, Text, VStack } from "@chakra-ui/react"
import { DragDropContext, Droppable } from "@hello-pangea/dnd"
import { useToast } from "@opengovsg/design-system-react"
import { Infobox, useToast } from "@opengovsg/design-system-react"
import { BiPin, BiPlus, BiPlusCircle } from "react-icons/bi"

import { BlockEditingPlaceholder } from "~/components/Svg"
Expand Down Expand Up @@ -155,107 +155,124 @@ export default function RootStateDrawer() {
)}
</VStack>

<VStack w="100%" h="100%" gap="1rem">
{/* Custom Blocks Section */}
<Flex flexDirection="row" w="100%">
<VStack gap="0.25rem" align="start" flex={1}>
<Text textStyle="subhead-1">Custom blocks</Text>
<Text textStyle="caption-2" color="base.content.medium">
Use blocks to display your content in various ways
{pageLayout === "index" && savedPageState.content.length === 0 ? (
<Infobox variant="warning" size="sm">
<Box>
<Text textStyle="subhead-2" mb="0.25rem">
Why can’t I add anything else to this page?
</Text>
</VStack>
<Button
size="xs"
flexShrink={0}
leftIcon={<BiPlusCircle fontSize="1.25rem" />}
variant="clear"
onClick={() => setDrawerState({ state: "addBlock" })}
>
Add block
</Button>
</Flex>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="blocks">
{(provided) => (
<VStack
{...provided.droppableProps}
w="100%"
ref={provided.innerRef}
>
<Box w="100%">
{((isHeroFixedBlock && savedPageState.content.length === 1) ||
savedPageState.content.length === 0) && (
<>
<VStack
justifyContent="center"
spacing={0}
mt="2.75rem"
mb="1.5rem"
>
<BlockEditingPlaceholder />
<Text
mt="0.75rem"
textStyle="subhead-1"
color="base.content.default"
>
Blocks you add will appear here
</Text>
<Text
mt="0.25rem"
textStyle="caption-2"
color="base.content.medium"

<Text textStyle="body-2">
Content for this page is auto-generated. We’re introducing editing
for this page type soon, so that you can add custom content
alongside the page links.
</Text>
</Box>
</Infobox>
) : (
<VStack w="100%" h="100%" gap="1rem">
{/* Custom Blocks Section */}
<Flex flexDirection="row" w="100%">
<VStack gap="0.25rem" align="start" flex={1}>
<Text textStyle="subhead-1">Custom blocks</Text>
<Text textStyle="caption-2" color="base.content.medium">
Use blocks to display your content in various ways
</Text>
</VStack>
<Button
size="xs"
flexShrink={0}
leftIcon={<BiPlusCircle fontSize="1.25rem" />}
variant="clear"
onClick={() => setDrawerState({ state: "addBlock" })}
>
Add block
</Button>
</Flex>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="blocks">
{(provided) => (
<VStack
{...provided.droppableProps}
w="100%"
ref={provided.innerRef}
>
<Box w="100%">
{((isHeroFixedBlock &&
savedPageState.content.length === 1) ||
savedPageState.content.length === 0) && (
<>
<VStack
justifyContent="center"
spacing={0}
mt="2.75rem"
mb="1.5rem"
>
Click the ‘Add block’ button above to add blocks to
this page
</Text>
</VStack>
<BlockEditingPlaceholder />
<Text
mt="0.75rem"
textStyle="subhead-1"
color="base.content.default"
>
Blocks you add will appear here
</Text>
<Text
mt="0.25rem"
textStyle="caption-2"
color="base.content.medium"
>
Click the ‘Add block’ button above to add blocks to
this page
</Text>
</VStack>

<Button
variant="outline"
w="100%"
onClick={() => setDrawerState({ state: "addBlock" })}
leftIcon={<Icon as={BiPlus} fontSize="1.25rem" />}
>
Add a new block
</Button>
</>
)}
<Button
variant="outline"
w="100%"
onClick={() => setDrawerState({ state: "addBlock" })}
leftIcon={<Icon as={BiPlus} fontSize="1.25rem" />}
>
Add a new block
</Button>
</>
)}

<Flex flexDirection="column" mt="-0.25rem">
{savedPageState.content.map((block, index) => {
if (isHeroFixedBlock && index === 0) {
return <></>
}
<Flex flexDirection="column" mt="-0.25rem">
{savedPageState.content.map((block, index) => {
if (isHeroFixedBlock && index === 0) {
return <></>
}

return (
<DraggableBlock
block={block}
// TODO: Generate a block ID instead of index
key={`${block.type}-${index}`}
// TODO: Use block ID when instead of index for uniquely identifying blocks
draggableId={`${block.type}-${index}`}
index={index}
onClick={() => {
setCurrActiveIdx(index)
// TODO: we should automatically do this probably?
const nextState =
savedPageState.content[index]?.type === "prose"
? "nativeEditor"
: "complexEditor"
// NOTE: SNAPSHOT
setDrawerState({ state: nextState })
}}
/>
)
})}
</Flex>
</Box>
{provided.placeholder}
</VStack>
)}
</Droppable>
</DragDropContext>
</VStack>
return (
<DraggableBlock
block={block}
// TODO: Generate a block ID instead of index
key={`${block.type}-${index}`}
// TODO: Use block ID when instead of index for uniquely identifying blocks
draggableId={`${block.type}-${index}`}
index={index}
onClick={() => {
setCurrActiveIdx(index)
// TODO: we should automatically do this probably?
const nextState =
savedPageState.content[index]?.type === "prose"
? "nativeEditor"
: "complexEditor"
// NOTE: SNAPSHOT
setDrawerState({ state: nextState })
}}
/>
)
})}
</Flex>
</Box>
{provided.placeholder}
</VStack>
)}
</Droppable>
</DragDropContext>
</VStack>
)}
</VStack>
)
}

0 comments on commit 65812ec

Please sign in to comment.