LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(dashboard-v2): fix active tab indicator after window resize

This commit is contained in:
Michał Leszczyk 2022-02-23 10:41:20 +01:00
parent 143c6a94e5
commit 0c275a8f3e
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
1 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/dashboard-v2/src/components/Tabs/ActiveTabIndicator.js
View File

@ -1,6 +1,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import styled from "styled-components"; import styled from "styled-components";
import { useWindowSize } from "react-use";
const Wrapper = styled.div.attrs({ const Wrapper = styled.div.attrs({
className: "absolute left-0 bottom-0 w-full h-0.5 bg-palette-200", className: "absolute left-0 bottom-0 w-full h-0.5 bg-palette-200",
@ -15,6 +16,7 @@ const Indicator = styled.div.attrs({
export const ActiveTabIndicator = ({ tabRef }) => { export const ActiveTabIndicator = ({ tabRef }) => {
const [position, setPosition] = useState(0); const [position, setPosition] = useState(0);
const [width, setWidth] = useState(0); const [width, setWidth] = useState(0);
const { width: windowWidth } = useWindowSize();
useEffect(() => { useEffect(() => {
if (!tabRef?.current) { if (!tabRef?.current) {
@ -24,7 +26,7 @@ export const ActiveTabIndicator = ({ tabRef }) => {
const { offsetLeft, offsetWidth } = tabRef.current; const { offsetLeft, offsetWidth } = tabRef.current;
setPosition(offsetLeft); setPosition(offsetLeft);
setWidth(offsetWidth); setWidth(offsetWidth);
}, [tabRef]); }, [tabRef, windowWidth]);
return ( return (
<Wrapper> <Wrapper>