From cbdb2968b96ecd037b08614ef75e22e1a4fd853d Mon Sep 17 00:00:00 2001 From: Pavel Denisjuk Date: Wed, 1 Nov 2023 13:52:11 +0100 Subject: [PATCH] fix(app-page-builder): improve rendering of block selection overlay (#3657) --- packages/app-page-builder/package.json | 1 + .../views/PageBlocks/PageBlocksDataList.tsx | 2 +- .../config/blockEditing/BlocksList.tsx | 139 +++++++----------- yarn.lock | 15 +- 4 files changed, 67 insertions(+), 90 deletions(-) diff --git a/packages/app-page-builder/package.json b/packages/app-page-builder/package.json index 54a749d6866..9d8dfc58a81 100644 --- a/packages/app-page-builder/package.json +++ b/packages/app-page-builder/package.json @@ -70,6 +70,7 @@ "react-dom": "17.0.2", "react-helmet": "^6.1.0", "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", diff --git a/packages/app-page-builder/src/admin/views/PageBlocks/PageBlocksDataList.tsx b/packages/app-page-builder/src/admin/views/PageBlocks/PageBlocksDataList.tsx index 3521cb8e6d2..564dbaeb854 100644 --- a/packages/app-page-builder/src/admin/views/PageBlocks/PageBlocksDataList.tsx +++ b/packages/app-page-builder/src/admin/views/PageBlocks/PageBlocksDataList.tsx @@ -57,7 +57,7 @@ const ListItem = styled.div` } `; -const ListItemText = styled("span")({ +const ListItemText = styled("div")({ textTransform: "uppercase", alignSelf: "start", marginTop: "15px" diff --git a/packages/app-page-builder/src/pageEditor/config/blockEditing/BlocksList.tsx b/packages/app-page-builder/src/pageEditor/config/blockEditing/BlocksList.tsx index 8d7c11370b5..d21025d23f0 100644 --- a/packages/app-page-builder/src/pageEditor/config/blockEditing/BlocksList.tsx +++ b/packages/app-page-builder/src/pageEditor/config/blockEditing/BlocksList.tsx @@ -1,58 +1,48 @@ -import React, { useState, useEffect, useRef } from "react"; -import get from "lodash/get"; -import { List, WindowScroller } from "react-virtualized"; +import React, { useEffect, useRef, useState } from "react"; +import { useInViewport } from "react-in-viewport"; +import styled from "@emotion/styled"; import BlockPreview from "./BlockPreview"; -import { css } from "emotion"; import { PbEditorBlockPlugin } from "~/types"; -const listStyle = css({ - "& .ReactVirtualized__Grid__innerScrollContainer": { - overflow: "auto !important" - } -}); - -const listWidth = 800; - -interface GetRowHeightParams { - index: number; - blocks: PbEditorBlockPlugin[]; -} - -const getRowHeight = (params: GetRowHeightParams): number => { - const { index, blocks } = params; - let height = get(blocks[index], "image.meta.height", 50); - - const width = get(blocks[index], "image.meta.width", 50); - if (width > listWidth) { - const downscaleRatio = width / listWidth; - height = height / downscaleRatio; - } - return height + 100; -}; - interface RenderRowProps { index: number; - key: string; - style: Record; onEdit: (plugin: PbEditorBlockPlugin) => void; onDelete: (plugin: PbEditorBlockPlugin) => void; blocks: PbEditorBlockPlugin[]; - // deactivatePlugin: (plugin: PbEditorBlockPlugin) => void; addBlock: (plugin: PbEditorBlockPlugin) => void; } -const renderRow = (props: RenderRowProps): React.ReactNode => { - const { index, key, style, blocks, onEdit, onDelete, addBlock } = props; +const BlockSkeleton = styled.div` + height: 250px; + width: 100%; +`; + +const BlockRow = (props: RenderRowProps) => { + const myRef = useRef(null); + const [wasVisible, setWasVisible] = useState(false); + + const { inViewport } = useInViewport(myRef); + const { index, blocks, onEdit, onDelete, addBlock } = props; const plugin = blocks[index]; + useEffect(() => { + if (inViewport) { + setWasVisible(true); + } + }, [inViewport]); + return ( -
- onEdit(plugin)} - onDelete={() => onDelete(plugin)} - addBlockToContent={addBlock} - /> +
(myRef.current = dom)}> + {wasVisible ? ( + onEdit(plugin)} + onDelete={() => onDelete(plugin)} + addBlockToContent={addBlock} + /> + ) : ( + + )}
); }; @@ -62,7 +52,6 @@ interface BlocksListProps extends Omit = props => { - const [, setTimestamp] = useState(-1); const rightPanelElement = useRef(null); const prevProps = useRef(null); @@ -70,7 +59,6 @@ const BlocksList: React.FC = props => { rightPanelElement.current = document.querySelector( ".webiny-split-view__right-panel-wrapper" ); - setTimestamp(new Date().getTime()); }, []); useEffect(() => { @@ -86,61 +74,36 @@ const BlocksList: React.FC = props => { } rightPanelElement.current.scroll(0, 0); } - }, []); + }, [props]); useEffect(() => { prevProps.current = props; - }, []); + }, [props]); - const { blocks, category } = props; + const { blocks } = props; if (!rightPanelElement.current) { return null; } return ( - - {({ isScrolling, registerChild, onChildScroll, scrollTop }) => ( -
-
- { - return getRowHeight({ - ...rowHeightParams, - blocks - }); - }} - rowRenderer={rendererProps => { - return renderRow({ - ...rendererProps, - blocks, - addBlock: props.addBlock, - onEdit: props.onEdit, - onDelete: props.onDelete, - style: { - position: "static" - } - }); - }} - scrollTop={scrollTop} - width={listWidth} - overscanRowCount={10} - /> -
-
- )} - +
+
+ {blocks.map((block, index) => ( + + ))} +
+
); }; diff --git a/yarn.lock b/yarn.lock index 4c161e7c8a6..7df99610ffb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15274,6 +15274,7 @@ __metadata: react-dom: 17.0.2 react-helmet: ^6.1.0 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 @@ -27966,7 +27967,7 @@ __metadata: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2": +"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" dependencies: @@ -37986,6 +37987,18 @@ __metadata: languageName: node linkType: hard +"react-in-viewport@npm:^1.0.0-alpha.30": + version: 1.0.0-alpha.30 + resolution: "react-in-viewport@npm:1.0.0-alpha.30" + dependencies: + hoist-non-react-statics: ^3.0.0 + peerDependencies: + react: ^16.8.3 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.3 || ^17.0.0 || ^18.0.0 + checksum: 1098ccdab9a10b8aadabf1a53f5809507e26db687a4243bd2dde2bdbecd1a8df66f4e9d00ee2a04bfd1542f937e758ef256d5fb6d637b4de5496e6252f84ce9e + languageName: node + linkType: hard + "react-input-autosize@npm:^3.0.0": version: 3.0.0 resolution: "react-input-autosize@npm:3.0.0"