Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor lazy tile to not include sortable rendering

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-06-18 10:48:52 +10:00
parent 264e298e25
commit 5e69ffcef8
3 changed files with 127 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/tile/LazyTile.js Normal file
View File

@ -0,0 +1,33 @@
import React from "react";
import { Box } from "theme-ui";
import { useInView } from "react-intersection-observer";
function LazyTile({ children }) {
const [ref, inView] = useInView({ triggerOnce: false });
const sx = inView
? {}
: { width: "100%", height: "0", paddingTop: "100%", position: "relative" };
return (
<Box sx={sx} ref={ref}>
{inView ? (
children
) : (
<Box
sx={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
borderRadius: "4px",
}}
bg="background"
/>
)}
</Box>
);
}
export default LazyTile;

24
src/components/tile/SortableTiles.js
View File

@ -5,6 +5,7 @@ import { moveGroupsInto } from "../../helpers/group";
import { keyBy } from "../../helpers/shared";
import SortableTile from "./SortableTile";
import LazyTile from "./LazyTile";
import {
useTileDragId,
@ -76,17 +77,18 @@ function SortableTiles({ renderTile, subgroup }) {
const disableTileGrouping =
disableGrouping || isDragging || hasSelectedContainerGroup;
return (
<SortableTile
id={group.id}
key={group.id}
disableGrouping={disableTileGrouping}
disableSorting={disableSorting}
hidden={group.id === openGroupId}
isDragging={isDragging}
cursor={dragCursor}
>
{renderSortableGroup(group, selectedGroups)}
</SortableTile>
<LazyTile key={group.id}>
<SortableTile
id={group.id}
disableGrouping={disableTileGrouping}
disableSorting={disableSorting}
hidden={group.id === openGroupId}
isDragging={isDragging}
cursor={dragCursor}
>
{renderSortableGroup(group, selectedGroups)}
</SortableTile>
</LazyTile>
);
});
}

169
src/components/tile/Tile.js
View File

@ -1,6 +1,5 @@
import React from "react";
import { Flex, IconButton, Box, Text, Badge } from "theme-ui";
import { useInView } from "react-intersection-observer";
import EditTileIcon from "../../icons/EditTileIcon";
@ -15,7 +14,6 @@ function Tile({
editTitle,
children,
}) {
const [ref, inView] = useInView({ triggerOnce: true });
return (
<Box
sx={{
@ -34,96 +32,91 @@ function Tile({
}}
onDoubleClick={onDoubleClick}
aria-label={title}
ref={ref}
>
{inView && (
<>
<Box
sx={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
}}
<Box
sx={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
}}
>
{children}
</Box>
<Flex
sx={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
background:
"linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%);",
alignItems: "flex-end",
justifyContent: "center",
}}
p={2}
>
<Text
as="p"
variant="heading"
color="hsl(210, 50%, 96%)"
sx={{ textAlign: "center" }}
>
{title}
</Text>
</Flex>
<Box
sx={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
borderColor: "primary",
borderStyle: isSelected ? "solid" : "none",
borderWidth: "4px",
pointerEvents: "none",
borderRadius: "4px",
}}
/>
<Flex
sx={{
position: "absolute",
top: "6px",
left: "6px",
}}
>
{badges.map((badge, i) => (
<Badge
m="2px"
key={i}
bg="overlay"
color="text"
sx={{ width: "fit-content" }}
>
{children}
</Box>
<Flex
sx={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
background:
"linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%);",
alignItems: "flex-end",
justifyContent: "center",
{badge}
</Badge>
))}
</Flex>
{canEdit && (
<Box sx={{ position: "absolute", top: 0, right: 0 }}>
<IconButton
aria-label={editTitle}
title={editTitle}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onEdit();
}}
p={2}
bg="overlay"
sx={{ borderRadius: "50%" }}
m={2}
>
<Text
as="p"
variant="heading"
color="hsl(210, 50%, 96%)"
sx={{ textAlign: "center" }}
>
{title}
</Text>
</Flex>
<Box
sx={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
borderColor: "primary",
borderStyle: isSelected ? "solid" : "none",
borderWidth: "4px",
pointerEvents: "none",
borderRadius: "4px",
}}
/>
<Flex
sx={{
position: "absolute",
top: "6px",
left: "6px",
}}
>
{badges.map((badge, i) => (
<Badge
m="2px"
key={i}
bg="overlay"
color="text"
sx={{ width: "fit-content" }}
>
{badge}
</Badge>
))}
</Flex>
{canEdit && (
<Box sx={{ position: "absolute", top: 0, right: 0 }}>
<IconButton
aria-label={editTitle}
title={editTitle}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onEdit();
}}
bg="overlay"
sx={{ borderRadius: "50%" }}
m={2}
>
<EditTileIcon />
</IconButton>
</Box>
)}
</>
<EditTileIcon />
</IconButton>
</Box>
)}
</Box>
);