Skip to content

Commit

Permalink
fix(app-page-builder): improve rendering of block selection overlay (#…
Browse files Browse the repository at this point in the history 
…3657)
  • Loading branch information
@Pavel910
Pavel910 committed Nov 1, 2023
1 parent ddbf234 commit cbdb296
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 90 deletions.
1 change: 1 addition & 0 deletions packages/app-page-builder/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/app-page-builder/src/admin/views/PageBlocks/PageBlocksDataList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const ListItem = styled.div`
}
`;

const ListItemText = styled("span")({
const ListItemText = styled("div")({
textTransform: "uppercase",
alignSelf: "start",
marginTop: "15px"
Expand Down
139 changes: 51 additions & 88 deletions packages/app-page-builder/src/pageEditor/config/blockEditing/BlocksList.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<string, any>;
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<HTMLDivElement | null>(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 (
<div key={key} style={style} data-testid="pb-editor-page-blocks-list-item">
<BlockPreview
plugin={plugin}
onEdit={() => onEdit(plugin)}
onDelete={() => onDelete(plugin)}
addBlockToContent={addBlock}
/>
<div ref={dom => (myRef.current = dom)}>
{wasVisible ? (
<BlockPreview
plugin={plugin}
onEdit={() => onEdit(plugin)}
onDelete={() => onDelete(plugin)}
addBlockToContent={addBlock}
/>
) : (
<BlockSkeleton />
)}
</div>
);
};
Expand All @@ -62,15 +52,13 @@ interface BlocksListProps extends Omit<RenderRowProps, "index" | "key" | "style"
}

const BlocksList: React.FC<BlocksListProps> = props => {
const [, setTimestamp] = useState<number>(-1);
const rightPanelElement = useRef<HTMLElement | null>(null);
const prevProps = useRef<BlocksListProps | null>(null);

useEffect(() => {
rightPanelElement.current = document.querySelector(
".webiny-split-view__right-panel-wrapper"
);
setTimestamp(new Date().getTime());
}, []);

useEffect(() => {
Expand All @@ -86,61 +74,36 @@ const BlocksList: React.FC<BlocksListProps> = 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 (
<WindowScroller scrollElement={rightPanelElement.current}>
{({ isScrolling, registerChild, onChildScroll, scrollTop }) => (
<div style={{ flex: "1 1 auto" }}>
<div
style={{ width: "800px", margin: "0 auto" }}
ref={registerChild}
data-testid={"pb-editor-page-blocks-list"}
>
<List
className={listStyle}
key={category}
autoHeight
height={window.innerHeight - 70}
isScrolling={isScrolling}
onScroll={onChildScroll}
rowCount={blocks.length}
rowHeight={rowHeightParams => {
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}
/>
</div>
</div>
)}
</WindowScroller>
<div style={{ flex: "1 1 auto" }}>
<div
style={{ width: "800px", margin: "0 auto" }}
data-testid={"pb-editor-page-blocks-list"}
>
{blocks.map((block, index) => (
<BlockRow
key={block.name}
index={index}
blocks={blocks}
addBlock={props.addBlock}
onEdit={props.onEdit}
onDelete={props.onDelete}
/>
))}
</div>
</div>
);
};

Expand Down
15 changes: 14 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit cbdb296

Please sign in to comment.