starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-27 20:01:10 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Add React hooks eslint

Browse Source
This commit is contained in:
Gregory Schier
2023-04-01 15:26:57 -07:00
parent 604254257d
commit b23e56c3af
23 changed files with 151 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src-web/components/core/Tabs/Tabs.tsx
View File

@@ -1,6 +1,6 @@
import classnames from 'classnames';
import type { ReactNode } from 'react';
import { memo, useEffect, useRef } from 'react';
import { memo, useCallback, useEffect, useRef } from 'react';
import { Button } from '../Button';
import { Icon } from '../Icon';
import type { RadioDropdownProps } from '../RadioDropdown';
@@ -38,28 +38,31 @@ export function Tabs({
}: Props) {
const ref = useRef<HTMLDivElement | null>(null);
const handleTabChange = (value: string) => {
const tabs = ref.current?.querySelectorAll<HTMLDivElement>(`[data-tab]`);
for (const tab of tabs ?? []) {
const v = tab.getAttribute('data-tab');
if (v === value) {
tab.setAttribute('tabindex', '-1');
tab.setAttribute('data-state', 'active');
tab.setAttribute('aria-hidden', 'false');
tab.style.display = 'block';
} else {
tab.setAttribute('data-state', 'inactive');
tab.setAttribute('aria-hidden', 'true');
tab.style.display = 'none';
const handleTabChange = useCallback(
(value: string) => {
const tabs = ref.current?.querySelectorAll<HTMLDivElement>(`[data-tab]`);
for (const tab of tabs ?? []) {
const v = tab.getAttribute('data-tab');
if (v === value) {
tab.setAttribute('tabindex', '-1');
tab.setAttribute('data-state', 'active');
tab.setAttribute('aria-hidden', 'false');
tab.style.display = 'block';
} else {
tab.setAttribute('data-state', 'inactive');
tab.setAttribute('aria-hidden', 'true');
tab.style.display = 'none';
}
}
}
onChangeValue(value);
};
onChangeValue(value);
},
[onChangeValue],
);
useEffect(() => {
if (value === undefined) return;
handleTabChange(value);
}, [value]);
}, [handleTabChange, value]);
return (
<div