Skip to content

Commit

Permalink
feat: upgrade to react 18 - fix build #9 (#3860)
Browse files Browse the repository at this point in the history
  • Loading branch information
@neatbyte-vnobis @brunozoric
neatbyte-vnobis authored and brunozoric committed Mar 28, 2024
1 parent f76a782 commit c6c82ee
Show file tree
Hide file tree
Showing 6 changed files with 238 additions and 328 deletions.
2 changes: 1 addition & 1 deletion packages/app-page-builder/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"apollo-utilities": "^1.3.4",
"classnames": "^2.2.6",
"dnd-core": "^16.0.1",
"dnd-kit-sortable-tree": "^0.1.73",
"dot-prop-immutable": "^2.1.0",
"emotion": "^10.0.17",
"graphql": "^15.7.2",
Expand All @@ -75,7 +76,6 @@
"react-images": "^0.5.19",
"react-in-viewport": "^1.0.0-alpha.30",
"react-sortable": "^2.0.0",
"react-sortable-tree": "^2.6.0",
"react-transition-group": "^4.3.0",
"react-virtualized": "^9.21.0",
"recoil": "^0.7.7",
Expand Down
171 changes: 74 additions & 97 deletions packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import { css } from "emotion";
import styled from "@emotion/styled";
import uniqid from "uniqid";
Expand All @@ -14,132 +14,109 @@ import findObject from "./MenuItems/findObject";
import { PbMenuItemPlugin } from "~/types";
import { Typography } from "@webiny/ui/Typography";
import { MenuTreeItem } from "~/admin/views/Menus/types";

const leftPanel = css({
padding: 25,
backgroundColor: "var(--mdc-theme-background)",
overflow: "auto"
});

const menuItems = css({
width: 170
});

const MenuHolder = styled("div")({
textAlign: "center",
color: "var(--mdc-theme-text-primary-on-background)"
});

const AddMenu = styled("div")({
width: 180,
margin: "25px auto 0 auto"
});

interface MenuItemsProps {
canSave: boolean;
onChange: (items: MenuTreeItem[]) => void;
value: MenuTreeItem[];
}

interface MenuItemsState {
currentMenuItem: MenuTreeItem | null;
}

class MenuItems extends React.Component<MenuItemsProps, MenuItemsState> {
public form = React.createRef();
public override state: MenuItemsState = {
currentMenuItem: null
type MenuItemsState = MenuTreeItem | null;
const MenuItems = (props: MenuItemsProps) => {
const [currentMenuItem, setCurrentMenuItem] = useState<MenuItemsState>(null);
const editItem = (data: MenuTreeItem | null): void => {
setCurrentMenuItem(data);
};

private readonly addItem = (plugin: PbMenuItemPlugin): void => {
const { onChange, value } = this.props;
const addItem = (plugin: PbMenuItemPlugin): void => {
const { onChange, value } = props;
const newItem: MenuTreeItem = { type: plugin.menuItem.type, id: uniqid(), __new: true };
onChange([...value, newItem]);
this.editItem(newItem);
};

private readonly editItem = (data: MenuTreeItem | null): void => {
this.setState({ currentMenuItem: data });
editItem(newItem);
};

private readonly deleteItem = (item: MenuTreeItem): void => {
const { value, onChange } = this.props;
const deleteItem = (item: MenuTreeItem): void => {
const { value, onChange } = props;
const target = findObject(value, item.id);
target && target.source.splice(target.index, 1);
onChange(value);
this.editItem(null);
editItem(null);
};

public override render() {
const { value: items, onChange, canSave } = this.props;
const { currentMenuItem } = this.state;
const pbMenuItemPlugins = plugins.byType<PbMenuItemPlugin>("pb-menu-item");

return (
<>
<Grid>
<Cell span={7} className={leftPanel}>
<MenuItemsList
canSave={canSave}
const { value: items, onChange, canSave } = props;
const pbMenuItemPlugins = plugins.byType<PbMenuItemPlugin>("pb-menu-item");
return (
<>
<Grid>
<Cell span={7} className={leftPanel}>
<MenuItemsList
canSave={canSave}
items={items}
onChange={onChange}
editItem={editItem}
deleteItem={deleteItem}
/>
</Cell>
<Cell span={5}>
{currentMenuItem && canSave && (
<>
<MenuHolder>
<Typography use={"body2"}>
To build your menu you need to create menu items! Begin by
clicking the &quot;Add menu item&quot; button
</Typography>
<AddMenu>
<Menu
handle={
<ButtonPrimary data-testid="pb.menu.add.addmenuitem">
+ Add menu item
</ButtonPrimary>
}
anchor={"topEnd"}
data-testid="pb.menu.create.items.button"
>
<List className={menuItems}>
{pbMenuItemPlugins.map(pl => (
<ListItem
key={pl.name}
onClick={() => addItem(pl)}
style={{ whiteSpace: "nowrap" }}
>
<ListItemGraphic>
<Icon icon={pl.menuItem.icon} />
</ListItemGraphic>
{pl.menuItem.title}
</ListItem>
))}
</List>
</Menu>
</AddMenu>
</MenuHolder>
</>
)}
{currentMenuItem && (
<MenuItemForm
currentMenuItem={currentMenuItem}
editItem={editItem}
deleteItem={deleteItem}
items={items}
onChange={onChange}
editItem={this.editItem}
deleteItem={this.deleteItem}
/>
</Cell>

<Cell span={5}>
{!currentMenuItem && canSave && (
<>
<MenuHolder>
<Typography use={"body2"}>
To build your menu you need to create menu items! Begin by
clicking the &quot;Add menu item&quot; button
</Typography>

<AddMenu>
<Menu
handle={
<ButtonPrimary data-testid="pb.menu.add.addmenuitem">
+ Add menu item
</ButtonPrimary>
}
anchor={"topEnd"}
data-testid="pb.menu.create.items.button"
>
<List className={menuItems}>
{pbMenuItemPlugins.map(pl => (
<ListItem
key={pl.name}
onClick={() => this.addItem(pl)}
style={{ whiteSpace: "nowrap" }}
>
<ListItemGraphic>
<Icon icon={pl.menuItem.icon} />
</ListItemGraphic>
{pl.menuItem.title}
</ListItem>
))}
</List>
</Menu>
</AddMenu>
</MenuHolder>
</>
)}
{currentMenuItem && (
<MenuItemForm
currentMenuItem={currentMenuItem}
editItem={this.editItem}
deleteItem={this.deleteItem}
items={items}
onChange={onChange}
/>
)}
</Cell>
</Grid>
</>
);
}
}

)}
</Cell>
</Grid>
</>
);
};
export default MenuItems;

0 comments on commit c6c82ee

Please sign in to comment.