OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

grid-combine

Browse Source
This commit is contained in:
lukylix 2023-07-10 15:11:59 +02:00
parent 6dc931f233
commit 34d9fcfb74
2 changed files with 145 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/services/list.jsx
View File

@ -1,7 +1,7 @@
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import classNames from "classnames";
import Item from "components/services/item";
import { useEffect, useRef, useState } from "react";
const columnMap = [
"grid-cols-1 md:grid-cols-1 lg:grid-cols-1",
@ -29,23 +29,74 @@ const subcolumnMap = [
const itemRemSizeMap = [1, 1, 9, 8, 7, 7, 7, 7, 7];
export default function List({ group, services, layout, isGroup = false }) {
function areArraysEqual(array1, array2) {
if (array1.length === 0 && array2.length === 0) return true;
if (array1.length !== array2.length) {
return false;
}
const sortedArray1 = JSON.stringify(array1.slice().sort());
const sortedArray2 = JSON.stringify(array2.slice().sort());
return sortedArray1 === sortedArray2;
}
// eslint-disable-next-line react/display-name
const List = memo(
({ group, services, layout, isGroup = false, propagate = [], setPropagate, isStyleCombined = false }) => {
const containerRef = useRef(null);
const [childrensToSlice, setChildrensToSlice] = useState(0);
const [servicesToPropagate, setServicesToPropagate] = useState({});
const numberOfServices = services.filter((e) => e).length;
const servicesTopRows = services.filter((v) => v).slice(0, numberOfServices - childrensToSlice);
const servicesBottomRows = services.filter((v) => v).slice(numberOfServices - childrensToSlice);
if (servicesBottomRows.length > 0) console.log(servicesBottomRows);
const setPropagateWrapper = (id) => (value) => {
if (areArraysEqual(servicesToPropagate[id] || [], value)) return;
setServicesToPropagate((prev) => ({ ...prev, [id]: value }));
};
const numberOfServices = useMemo(() => [...propagate, ...services].filter((e) => e).length, [propagate, services]);
const servicesTopRows = useMemo(
() => [...propagate, ...services].filter((v) => v).slice(0, numberOfServices - childrensToSlice),
[propagate, services, childrensToSlice, numberOfServices]
);
const servicesBottomRows = useMemo(
() => [...propagate, ...services].filter((v) => v).slice(numberOfServices - childrensToSlice),
[propagate, services, childrensToSlice, numberOfServices]
);
const setPropagateCallback = useCallback(setPropagate, [setPropagate]);
useEffect(() => {
if (typeof setPropagateCallback !== "function") return;
setPropagateCallback(servicesBottomRows.length > 0 ? servicesBottomRows : []);
}, [servicesBottomRows, setPropagateCallback]);
const isStyleCombinedValue = useMemo(
() => layout?.style === undefined || layout?.style === "grid-combine" || isStyleCombined,
[layout?.style, isStyleCombined]
);
const servicesTopAfterPropagate = useMemo(() => {
const groupedServiceIndexReverse = [...servicesTopRows].reverse().findIndex((e) => e.type === "grouped-service");
const groupedServiceIndex = servicesTopRows.length - groupedServiceIndexReverse;
const insertIndex = groupedServiceIndex || servicesTopRows.length;
const servicesToAdd = servicesToPropagate[groupedServiceIndex] || [];
return [
...servicesTopRows.slice(0, insertIndex),
...servicesToAdd,
...servicesTopRows.slice(insertIndex, servicesTopRows.length),
];
}, [servicesTopRows, servicesToPropagate]);
const [gridClassNameTop, gridClassNameBottom] = useMemo(() => {
let gridClassName = isGroup ? subcolumnMap[layout.columns] : columnMap[layout?.columns];
let gridClassNameBottom = isGroup
let gridClassNameB = isGroup
? subcolumnMap[servicesBottomRows?.length]
: servicesBottomRows[servicesTopRows?.length];
if (gridClassName) gridClassName = ` grid auto-rows-max ${gridClassName} gap-x-2`;
if (gridClassNameBottom) gridClassNameBottom = ` grid auto-rows-max ${gridClassNameBottom} gap-x-2`;
if (gridClassNameB) gridClassNameB = ` grid auto-rows-max ${gridClassNameB} gap-x-2`;
if (!gridClassName) gridClassName = " flex flex-wrap gap-x-2";
if (!gridClassNameBottom) gridClassNameBottom = " flex flex-wrap gap-x-2";
if (!gridClassNameB) gridClassNameB = " flex flex-wrap gap-x-2";
return [gridClassName, gridClassNameB];
}, [layout?.columns, servicesBottomRows, servicesTopRows, isGroup]);
useEffect(() => {
const resizeObserver = new ResizeObserver((entries) => {
@ -54,16 +105,14 @@ export default function List({ group, services, layout, isGroup = false }) {
const { width } = entry.contentRect;
const remSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
const itemRemSize = itemRemSizeMap[parseInt(layout?.columns, 10)];
const itemRemSize = itemRemSizeMap[parseInt(layout?.columns || 1, 10)];
const remWidth = width / remSize;
const maxChildrenFit = Math.floor(remWidth / itemRemSize);
if (!itemRemSize || !maxChildrenFit || numberOfServices < maxChildrenFit || !(remWidth / itemRemSize > 1))
return setChildrensToSlice(0);
if (numberOfServices < maxChildrenFit) return setChildrensToSlice(0);
const toSlice =
remWidth / itemRemSize > 1 && numberOfServices > Math.min(maxChildrenFit, layout.columns)
? numberOfServices % Math.min(maxChildrenFit, layout.columns)
: 0;
const toSlice = numberOfServices % Math.min(maxChildrenFit, layout.columns || 1);
setChildrensToSlice(toSlice);
}
return true;
@ -76,35 +125,39 @@ export default function List({ group, services, layout, isGroup = false }) {
return () => {
resizeObserver.disconnect();
};
}, [numberOfServices]);
}, [numberOfServices, layout?.columns]);
return (
<ul
className={classNames(
layout?.style === "row" ? gridClassName : "flex flex-col",
layout?.style === "row" ? gridClassNameTop : "flex flex-col",
isGroup ? undefined : "mt-3",
"@container"
)}
ref={containerRef}
>
{servicesTopRows.length > 0 &&
servicesTopRows.map((service) =>
{servicesTopAfterPropagate.length > 0 &&
servicesTopAfterPropagate.map((service, i) =>
service.type === "grouped-service" ? (
<List
key={service.name}
group={service.name}
services={service.services}
layout={{
...layout,
columns: parseInt(service.name, 10) || 1,
style: "row",
}}
setPropagate={setPropagate || setPropagateWrapper(i + 1)}
propagate={(isStyleCombinedValue && servicesToPropagate[i]) || []}
isGroup
isStyleCombined={isStyleCombinedValue}
/>
) : (
<Item key={service.container ?? service.app ?? service.name} service={service} group={group} />
)
)}
{servicesBottomRows.length > 0 && (
{servicesBottomRows.length > 0 && !isStyleCombined && (
<ul
className={classNames(
layout?.style === "row" ? gridClassNameBottom : "flex flex-col",
@ -112,7 +165,7 @@ export default function List({ group, services, layout, isGroup = false }) {
"col-span-full"
)}
>
{servicesBottomRows.map((service) =>
{servicesBottomRows.map((service, i) =>
service.type === "grouped-service" ? (
<List
key={service.name}
@ -122,14 +175,21 @@ export default function List({ group, services, layout, isGroup = false }) {
columns: service.services?.length,
style: "row",
}}
setPropagate={setPropagate || setPropagateWrapper(i + 1)}
propagate={servicesToPropagate[i] || []}
isGroup
isStyleCombined={isStyleCombinedValue}
isDeep={isGroup}
/>
) : (
<Item key={service.container ?? service.app ?? service.name} service={service} group={group} />
)
)}
{}
</ul>
)}
</ul>
);
}
);
export default List;

2
src/components/services/widget/container.jsx
View File

@ -59,7 +59,7 @@ export default function Container({ error = false, children, service }) {
if (numberOfChildren > 1 && remWidth > 12) {
if (numberOfChildren <= maxChildrenFit) return setChildrensToSlice(0);
setChildrensToSlice(remWidth / 6 > 1 ? parseInt(numberOfChildren / maxChildrenFit, 10) : 0);
setChildrensToSlice(remWidth / 6 > 1 ? numberOfChildren % maxChildrenFit : 0);
}
}
return true;