Skip to content

Commit d2f97e0

Browse files
committed
refactor for readability
1 parent e87d66f commit d2f97e0

File tree

1 file changed

+20
-12
lines changed

1 file changed

+20
-12
lines changed

packages/components/tabs/src/tabs.tsx

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,19 @@ const Tabs = forwardRef(function Tabs<T extends object>(
7474
[variant],
7575
);
7676

77+
const withAnimationReset = useCallback(
78+
(callback: () => void) => {
79+
if (variant !== previousVariant.current || isVertical !== previousIsVertical.current) {
80+
cursorRef.current?.removeAttribute("data-initialized");
81+
}
82+
callback();
83+
previousVariant.current = variant;
84+
previousIsVertical.current = isVertical;
85+
requestAnimationFrame(() => cursorRef.current?.setAttribute("data-initialized", "true"));
86+
},
87+
[isVertical, variant],
88+
);
89+
7790
const updateCursorPosition = useCallback(
7891
(selectedTab: HTMLElement) => {
7992
if (!cursorRef.current) return;
@@ -87,19 +100,14 @@ const Tabs = forwardRef(function Tabs<T extends object>(
87100

88101
const styles = getCursorStyles(tabRect);
89102

90-
if (variant !== previousVariant.current || isVertical !== previousIsVertical.current) {
91-
cursorRef.current.removeAttribute("data-initialized");
92-
}
93-
cursorRef.current.style.left = styles.left;
94-
cursorRef.current.style.top = styles.top;
95-
cursorRef.current.style.width = styles.width;
96-
cursorRef.current.style.height = styles.height;
97-
previousVariant.current = variant;
98-
previousIsVertical.current = isVertical;
99-
100-
requestAnimationFrame(() => cursorRef.current?.setAttribute("data-initialized", "true"));
103+
withAnimationReset(() => {
104+
cursorRef.current!.style.left = styles.left;
105+
cursorRef.current!.style.top = styles.top;
106+
cursorRef.current!.style.width = styles.width;
107+
cursorRef.current!.style.height = styles.height;
108+
});
101109
},
102-
[cursorRef.current, getCursorStyles, isVertical, variant],
110+
[cursorRef.current, getCursorStyles, withAnimationReset],
103111
);
104112

105113
const onResize = useCallback(

0 commit comments

Comments
 (0)