Skip to content

Commit

Permalink
chore: context data management update
Browse files Browse the repository at this point in the history
  • Loading branch information
@henrynoowah
henrynoowah committed Jan 17, 2025
1 parent ada9934 commit 080fe55
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 131 deletions.
4 changes: 2 additions & 2 deletions apps/docs/data/test-data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export const data: Page = {
},
{
id: "section-2",
order: 1,
order: 2,
style: {
width: "1280px",
maxWidth: "100%",
Expand Down Expand Up @@ -191,7 +191,7 @@ export const data: Page = {
},
{
id: "section-3",
order: 1,
order: 3,
style: {
width: "100%",
maxWidth: "100%",
Expand Down
88 changes: 53 additions & 35 deletions packages/ui/src/components/context-menu/context-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,23 @@ import * as RadixContextMenu from "@radix-ui/react-context-menu";

interface ContextMenuProps {
children: React.ReactNode;
items: {
label: string;
onClick: () => void;
sub?: {
items?: ({
label?: string;
items: {
label: string;
onClick: () => void;
onClick?: () => void;
sub?: {
label: string;
onClick?: () => void;
}[];
}[];
}[];
} | null)[];
onOpenChange: (open: boolean) => void;
}

export const ContextMenu = ({
children,
items,
items: contextGroups,
onOpenChange,
}: ContextMenuProps) => {
return (
Expand All @@ -25,37 +28,52 @@ export const ContextMenu = ({
</RadixContextMenu.Trigger>
<RadixContextMenu.Portal>
<RadixContextMenu.Content className="nwcb-min-w-[220px] nwcb-bg-white nwcb-rounded-md nwcb-p-1 nwcb-shadow-md nwcb-z-50">
{items.map((item, index) =>
item.sub ? (
<RadixContextMenu.Sub key={index}>
<RadixContextMenu.SubTrigger
key={index}
onClick={item.onClick}
className="nwcb-text-sm nwcb-leading-none nwcb-rounded-sm nwcb-flex nwcb-items-center nwcb-h-8 nwcb-px-2 nwcb-relative nwcb-select-none nwcb-outline-none hover:nwcb-bg-blue-500 hover:nwcb-text-white"
>
{item.label}
</RadixContextMenu.SubTrigger>
<RadixContextMenu.SubContent>
{item.sub.map((subItem, subIndex) => (
{contextGroups
?.filter((x) => !!x)
.map((group, i, arr) => (
<>
{group.label && (
<RadixContextMenu.Label className="nwcb-text-sm nwcb-leading-none nwcb-rounded-sm nwcb-flex nwcb-items-center nwcb-h-8 nwcb-px-2 nwcb-relative nwcb-select-none nwcb-outline-none nwcb-font-semibold">
{group.label}
</RadixContextMenu.Label>
)}
{group.items.map((item, index) =>
item.sub ? (
<RadixContextMenu.Sub key={index}>
<RadixContextMenu.SubTrigger
key={index}
onClick={item.onClick}
className="nwcb-text-sm nwcb-leading-none nwcb-rounded-sm nwcb-flex nwcb-items-center nwcb-h-8 nwcb-px-2 nwcb-relative nwcb-select-none nwcb-outline-none hover:nwcb-bg-blue-500 hover:nwcb-text-white"
>
{item.label}
</RadixContextMenu.SubTrigger>
<RadixContextMenu.SubContent>
{item.sub.map((subItem, subIndex) => (
<RadixContextMenu.Item
key={subIndex}
onClick={subItem.onClick}
>
{subItem.label}
</RadixContextMenu.Item>
))}
</RadixContextMenu.SubContent>
</RadixContextMenu.Sub>
) : (
<RadixContextMenu.Item
key={subIndex}
onClick={subItem.onClick}
key={index}
onClick={item.onClick}
className="nwcb-text-sm nwcb-leading-none nwcb-rounded-sm nwcb-flex nwcb-items-center nwcb-h-8 nwcb-px-2 nwcb-relative nwcb-select-none nwcb-outline-none hover:nwcb-bg-blue-500 hover:nwcb-text-white"
>
{subItem.label}
{item.label}
</RadixContextMenu.Item>
))}
</RadixContextMenu.SubContent>
</RadixContextMenu.Sub>
) : (
<RadixContextMenu.Item
key={index}
onClick={item.onClick}
className="nwcb-text-sm nwcb-leading-none nwcb-rounded-sm nwcb-flex nwcb-items-center nwcb-h-8 nwcb-px-2 nwcb-relative nwcb-select-none nwcb-outline-none hover:nwcb-bg-blue-500 hover:nwcb-text-white"
>
{item.label}
</RadixContextMenu.Item>
)
)}
)
)}

{i < arr.length - 1 && (
<RadixContextMenu.Separator className="nwcb-w-full nwcb-h-[1px] nwcb-bg-gray-200" />
)}
</>
))}
</RadixContextMenu.Content>
</RadixContextMenu.Portal>
</RadixContextMenu.Root>
Expand Down
188 changes: 95 additions & 93 deletions packages/ui/src/components/editor/Editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const Editor = ({ view = "web", data, onSubmit, children }: EditorProps) => {
values: data,
});

const { handleSubmit, control, setValue } = methods;
const { handleSubmit, control, setValue, reset } = methods;

const {
fields: sections,
Expand Down Expand Up @@ -91,7 +91,7 @@ const Editor = ({ view = "web", data, onSubmit, children }: EditorProps) => {
selectedSectionRef.current?.addBlock(block);
};

const addSectionHandler = (section: Section, index: number) => {
const insertSectionHandler = (index: number, section: Section) => {
insertSection(index, section);
};

Expand Down Expand Up @@ -119,7 +119,13 @@ const Editor = ({ view = "web", data, onSubmit, children }: EditorProps) => {
const newPos = getPosition(over.id);

if (originalPos !== -1 && newPos !== -1) {
setValue("sections", arrayMove<Section>(sections, originalPos, newPos));
const newSectionOrder = arrayMove<Section>(
sections,
originalPos,
newPos
).map((s, i) => ({ ...s, order: i + 1 }));
setValue("sections", newSectionOrder);
setSelectedSection(newSectionOrder[newPos]);
}

setActiveId(null);
Expand All @@ -134,7 +140,7 @@ const Editor = ({ view = "web", data, onSubmit, children }: EditorProps) => {
updateSelectedSection: updateSectionHandler,
updateSelectedBlock: updateBlockHandler,
addBlock: addBlockHandler,
addSection: addSectionHandler,
insertSection: insertSectionHandler,
}}
>
<FormProvider {...methods}>
Expand All @@ -158,7 +164,7 @@ const Editor = ({ view = "web", data, onSubmit, children }: EditorProps) => {
>
<SortableContext items={sections} strategy={rectSortingStrategy}>
{sections
// .sort((a, b) => Number(a.order) - Number(b.order))
.sort((a, b) => Number(a.order) - Number(b.order))
.map((section, i) => {
const style = convertJSONToCSS(section.style);
const style_mobile = convertJSONToCSS(section.style_mobile);
Expand Down Expand Up @@ -254,7 +260,7 @@ export default Editor;
const RootContextMenu = ({ children }: { children: React.ReactNode }) => {
const {
data,
addSection,
insertSection,
addBlock,
selectedSection,
selectedBlock,
Expand All @@ -263,100 +269,96 @@ const RootContextMenu = ({ children }: { children: React.ReactNode }) => {
return (
<ContextMenu
items={[
selectedBlock
? {
label: "Block",
items: [
{ label: "Move to front", onClick: () => {} },
{ label: "Send to back", onClick: () => {} },
],
}
: null,
{
label: "Block",
onClick: () => {},
sub: [
{ label: "Move to front", onClick: () => {} },
{ label: "Send to back", onClick: () => {} },
],
},
{
label: "Insert Section",
onClick: () => {
const sections = data?.sections || [];
const selectedIndex = sections.findIndex(
(s) => s.id === selectedSection?.id
);
const order =
selectedIndex >= 0 ? selectedIndex + 1 : sections.length;

addSection?.(
{
id: "section-" + uuidv4(),
blocks: [
{
items: [
{
label: "Insert Section",
onClick: () => {
const order = selectedSection?.order ?? 0;
insertSection?.(order, {
order,
id: "section-" + uuidv4(),
blocks: [
{
id: "block-" + uuidv4(),
type: "html",
content: "<h1>New Block</h1>",
style: {
width: "50%",
height: "50%",
backgroundColor: "white",
borderRadius: "12px",
display: "flex",
justifyContent: "center",
alignItems: "center",
position: "absolute",
top: "25%",
left: "25%",
padding: "24px",
},
},
],
style: {
width: "100%",
maxWidth: "1920px",
margin: "0 auto",
height: "420px",
backgroundColor: "#848484",
position: "relative",
},
});
},
},
{
label: "Add New Block",
onClick: () => {
if (selectedSection) {
const nextIndex = selectedSection.blocks.length + 1;
const block: Block = {
id: "block-" + uuidv4(),
type: "html",
content: "<h1>New Block</h1>",
content: `<h1>New Block ${nextIndex}</h1>`,
style: {
width: "50%",
height: "50%",
backgroundColor: "white",
borderRadius: "12px",
display: "flex",
justifyContent: "center",
alignItems: "center",
position: "absolute",
top: "25%",
left: "25%",
padding: "24px",
backgroundColor: "red",
zIndex: nextIndex,
order: nextIndex,
},
},
],
order,
style: {
width: "100%",
maxWidth: "1920px",
margin: "0 auto",
height: "420px",
backgroundColor: "#848484",
position: "relative",
},
};
if (selectedSection.style?.display === "grid") {
addBlock?.({
...block,
id: "block-" + uuidv4(),
style: {
...block.style,
},
});
} else {
addBlock?.({
...block,
style: {
...block.style,
position: "absolute",
top: "25%",
left: "25%",
width: "50%",
height: "50%",
},
});
}
}
},
order
);
},
},
{
label: "Add New Block",
onClick: () => {
if (selectedSection) {
const nextIndex = selectedSection.blocks.length + 1;
const block: Block = {
id: "block-" + uuidv4(),
type: "html",
content: `<h1>New Block ${nextIndex}</h1>`,
style: {
padding: "24px",
backgroundColor: "red",
zIndex: nextIndex,
order: nextIndex,
},
};
if (selectedSection.style?.display === "grid") {
addBlock?.({
...block,
id: "block-" + uuidv4(),
style: {
...block.style,
},
});
} else {
addBlock?.({
...block,
style: {
...block.style,
position: "absolute",
top: "25%",
left: "25%",
width: "50%",
height: "50%",
},
});
}
}
},
},
],
},
]}
onOpenChange={() => {
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ interface EditorContextProps {
updateSelectedSection?: (section: Section) => void;
updateSelectedBlock?: (block: Block) => void;
addBlock?: (block: Block) => void;
addSection?: (section: Section, index: number) => void;
insertSection?: (index: number, section: Section) => void;
}

type Page = {
Expand Down

0 comments on commit 080fe55

Please sign in to comment.