Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-04-29 12:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix always loading docker stats block

Browse Source
This commit is contained in:
Ben Phelps 2022-09-26 14:42:40 +03:00
parent 4d790feaae
commit e4c82b5e8d
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/services/item.jsx
View File

@ -28,6 +28,18 @@ export default function Item({ service }) {
const hasLink = service.href && service.href !== "#"; const hasLink = service.href && service.href !== "#";
const { settings } = useContext(SettingsContext); const { settings } = useContext(SettingsContext);
const [statsOpen, setStatsOpen] = useState(false); const [statsOpen, setStatsOpen] = useState(false);
const [statsClosing, setStatsClosing] = useState(false);
// set stats to closed after 300ms
const closeStats = () => {
if (statsOpen) {
setStatsClosing(true);
setTimeout(() => {
setStatsOpen(false);
setStatsClosing(false);
}, 300);
}
};
return ( return (
<li key={service.name}> <li key={service.name}>
@ -77,7 +89,7 @@ export default function Item({ service }) {
{service.container && ( {service.container && (
<button <button
type="button" type="button"
onClick={() => setStatsOpen(!statsOpen)} onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center w-12 cursor-pointer" className="flex-shrink-0 flex items-center justify-center w-12 cursor-pointer"
> >
<Status service={service} /> <Status service={service} />
@ -88,11 +100,11 @@ export default function Item({ service }) {
{service.container && service.server && ( {service.container && service.server && (
<div <div
className={classNames( className={classNames(
statsOpen ? "max-h-[55px] opacity-100" : " max-h-[0] opacity-0", statsOpen && !statsClosing ? "max-h-[55px] opacity-100" : " max-h-[0] opacity-0",
"w-full overflow-hidden transition-all duration-300 ease-in-out" "w-full overflow-hidden transition-all duration-300 ease-in-out"
)} )}
> >
<Docker service={{ widget: { container: service.container, server: service.server } }} /> {statsOpen && <Docker service={{ widget: { container: service.container, server: service.server } }} />}
</div> </div>
)} )}