From 9d27b7ca7d419dabbbf59807f3a0b78ed0ecaacf Mon Sep 17 00:00:00 2001 From: Vitalii Nobis <77202393+neatbyte-vnobis@users.noreply.github.com> Date: Mon, 12 Feb 2024 11:04:02 +0200 Subject: [PATCH] feat: upgrade to react 18 - fix build #9 (#3860) --- packages/app-page-builder/package.json | 2 +- .../admin/views/Menus/MenusForm/MenuItems.tsx | 171 ++++++------- .../MenusForm/MenuItems/MenuItemRenderer.tsx | 231 ++++-------------- .../MenusForm/MenuItems/MenuItemsList.tsx | 91 +++---- .../views/Menus/MenusForm/MenuItems/Styled.ts | 65 ++++- .../src/admin/views/Menus/types.ts | 6 + yarn.lock | 76 +++--- 7 files changed, 266 insertions(+), 376 deletions(-) diff --git a/packages/app-page-builder/package.json b/packages/app-page-builder/package.json index a16d4296836..d08b7608eb5 100644 --- a/packages/app-page-builder/package.json +++ b/packages/app-page-builder/package.json @@ -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", @@ -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", diff --git a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems.tsx b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems.tsx index c30d492e0a8..39cc4a78c4e 100644 --- a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems.tsx +++ b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems.tsx @@ -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"; @@ -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 { - public form = React.createRef(); - public override state: MenuItemsState = { - currentMenuItem: null +type MenuItemsState = MenuTreeItem | null; +const MenuItems = (props: MenuItemsProps) => { + const [currentMenuItem, setCurrentMenuItem] = useState(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("pb-menu-item"); - - return ( - <> - - - ("pb-menu-item"); + return ( + <> + + + + + + {currentMenuItem && canSave && ( + <> + + + To build your menu you need to create menu items! Begin by + clicking the "Add menu item" button + + + + + Add menu item + + } + anchor={"topEnd"} + data-testid="pb.menu.create.items.button" + > + + {pbMenuItemPlugins.map(pl => ( + addItem(pl)} + style={{ whiteSpace: "nowrap" }} + > + + + + {pl.menuItem.title} + + ))} + + + + + + )} + {currentMenuItem && ( + - - - - {!currentMenuItem && canSave && ( - <> - - - To build your menu you need to create menu items! Begin by - clicking the "Add menu item" button - - - - - + Add menu item - - } - anchor={"topEnd"} - data-testid="pb.menu.create.items.button" - > - - {pbMenuItemPlugins.map(pl => ( - this.addItem(pl)} - style={{ whiteSpace: "nowrap" }} - > - - - - {pl.menuItem.title} - - ))} - - - - - - )} - {currentMenuItem && ( - - )} - - - - ); - } -} - + )} + + + + ); +}; export default MenuItems; diff --git a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/MenuItemRenderer.tsx b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/MenuItemRenderer.tsx index 35608ec42a3..697d0d907de 100644 --- a/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/MenuItemRenderer.tsx +++ b/packages/app-page-builder/src/admin/views/Menus/MenusForm/MenuItems/MenuItemRenderer.tsx @@ -2,199 +2,64 @@ * TODO @ts-refactor * verify that all types are correct. */ -import React from "react"; -/** - * - * Package react-sortable-tree does not have types - */ -// @ts-expect-error -import { isDescendant } from "react-sortable-tree"; +import React, { forwardRef } from "react"; +// import { TreeItemComponentProps } from "dnd-kit-sortable-tree"; import classnames from "classnames"; -import { plugins } from "@webiny/plugins"; import { IconButton } from "@webiny/ui/Button"; import { Typography } from "@webiny/ui/Typography"; import { Icon } from "@webiny/ui/Icon"; -import "react-sortable-tree/style.css"; -import { rowHandle, fieldContainer, Row, RowContainer } from "./Styled"; - +import { rowHandle, fieldContainer, Row, RowContainer, FolderTreeItemWrapper } from "./Styled"; import { ReactComponent as EditIcon } from "./icons/round-edit-24px.svg"; import { ReactComponent as DeleteIcon } from "./icons/round-delete-24px.svg"; import { ReactComponent as HandleIcon } from "./icons/round-drag_indicator-24px.svg"; -import { PbMenuItemPlugin } from "~/types"; -import { MenuTreeItem } from "~/admin/views/Menus/types"; -import { ConnectDragPreview, ConnectDragSource } from "react-dnd"; - -interface ToggleChildrenVisibilityCallableParams { - node: MenuTreeItem; - path: string; - treeIndex: string; -} -interface ToggleChildrenVisibilityCallable { - (params: ToggleChildrenVisibilityCallableParams): void; -} -interface NodeRendererDefaultProps { - scaffoldBlockPxWidth: number; - toggleChildrenVisibility: ToggleChildrenVisibilityCallable | null; - connectDragPreview: ConnectDragPreview; - connectDragSource: ConnectDragSource; - isDragging: string; - canDrop: boolean; - canDrag: boolean; - node: MenuTreeItem; - title: string | null; - draggedNode: MenuTreeItem | null; - path: string; - treeIndex: string; +import { TreeItemComponentProps, MenuTreeItem } from "~/admin/views/Menus/types"; +export interface NodeRendererDefaultProps { editItem: (item: MenuTreeItem) => void; deleteItem: (item: MenuTreeItem) => void; - className: string; - style: React.CSSProperties; - didDrop: string; - canSave: boolean; } -class NodeRendererDefault extends React.Component { - static defaultProps: Partial = { - canDrag: false, - toggleChildrenVisibility: null, - className: "", - style: {}, - draggedNode: null, - canDrop: false, - title: null, - canSave: false - }; - - public override render() { - const { - scaffoldBlockPxWidth, - toggleChildrenVisibility, - connectDragPreview, - connectDragSource, - isDragging, - canDrop, - canDrag, - node, - title, - draggedNode, - path, - treeIndex, - editItem, - deleteItem, - className, - style, - didDrop, - canSave - } = this.props; - - const nodeTitle = title || node.title; - - const menuItemPlugins = plugins.byType("pb-menu-item"); - const plugin = menuItemPlugins.find(pl => pl.menuItem.type === node.type); - if (!plugin) { - return null; - } - - const handle = connectDragSource( -
- } /> -
, - { - dropEffect: "copy" - } - ); - - const isDraggedDescendant = draggedNode && isDescendant(draggedNode, node); - const isLandingPadActive = !didDrop && isDragging; - - const buttonStyle = { left: -0.5 * scaffoldBlockPxWidth }; - - return ( -
- {toggleChildrenVisibility && - node.children && - (node.children.length > 0 || typeof node.children === "function") && ( -
-