mirrors/Vencord
1
0
Fork 1
mirror of https://github.com/Vendicated/Vencord.git synced 2025-01-11 10:26:21 +00:00
Code Activity

Refactor NoteBookTab component

Browse source
This commit is contained in:
Wolfie 2024-03-15 12:07:08 -04:00
parent af8649223b
commit 4bf59cd1d8
No known key found for this signature in database
GPG key ID: DE384EE9BF2D909A
1 changed files with 10 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/plugins/holynotes/components/modals/NoteBookTab.tsx
View file

@ -6,18 +6,18 @@
import { classes } from "@utils/misc"; import { classes } from "@utils/misc";
import { findByProps } from "@webpack"; import { findByProps } from "@webpack";
import { Button, Clickable, Menu, Popout, React, TabBar } from "@webpack/common"; import { Button, Clickable, Menu, Popout, React } from "@webpack/common";
import { SvgOverFlowIcon } from "../icons/overFlowIcon"; import { SvgOverFlowIcon } from "../icons/overFlowIcon";
export function NoteBookTabs({ tabs, selectedTabId, onSelectTab }) { export function NoteBookTabs({ tabs, selectedTabId, onSelectTab }: { tabs: string[], selectedTabId: string, onSelectTab: (tab: string) => void }) {
const tabBarRef = React.useRef<HTMLDivElement>(null); const tabBarRef = React.useRef<HTMLDivElement>(null);
const widthRef = React.useRef<number>(0); const widthRef = React.useRef<number>(0);
const tabWidthMapRef = React.useRef(new Map()); const tabWidthMapRef = React.useRef(new Map());
const [overflowedTabs, setOverflowedTabs] = React.useState([]); const [overflowedTabs, setOverflowedTabs] = React.useState<string[]>([]);
const resizeObserverRef = React.useRef(null); const resizeObserverRef = React.useRef<ResizeObserver | null>(null);
const [show, setShow] = React.useState(false); const [show, setShow] = React.useState(false);
const { isNotNullish } = findByProps("isNotNullish"); const { isNotNullish } = findByProps("isNotNullish");
@ -25,7 +25,7 @@ export function NoteBookTabs({ tabs, selectedTabId, onSelectTab }) {
const handleResize = React.useCallback(() => { const handleResize = React.useCallback(() => {
if (!tabBarRef.current) return; if (!tabBarRef.current) return;
const overflowed = []; const overflowed = [] as string[];
const totalWidth = tabBarRef.current.clientWidth; const totalWidth = tabBarRef.current.clientWidth;
if (totalWidth !== widthRef.current) { if (totalWidth !== widthRef.current) {
@ -61,11 +61,12 @@ export function NoteBookTabs({ tabs, selectedTabId, onSelectTab }) {
}; };
}, [handleResize]); }, [handleResize]);
const TabItem = React.forwardRef(function ({ id, selected, onClick, children }, ref) { const TabItem = React.forwardRef(function ({ id, selected, onClick, children }: { id: string, selected: boolean, onClick: () => void, children: React.ReactNode }, ref) {
return ( return (
<Clickable <Clickable
className={classes("vc-notebook-tabbar-item", selected ? "vc-notebook-selected" : "")} className={classes("vc-notebook-tabbar-item", selected ? "vc-notebook-selected" : "")}
data-tab-id={id} data-tab-id={id}
// @ts-expect-error
innerRef={ref} innerRef={ref}
onClick={onClick} onClick={onClick}
> >
@ -109,14 +110,14 @@ export function NoteBookTabs({ tabs, selectedTabId, onSelectTab }) {
<TabItem <TabItem
id={tab} id={tab}
selected={selectedTabId === tab} selected={selectedTabId === tab}
ref={el => { ref={(el: HTMLElement | null) => {
const width = tabWidthMapRef.current.get(tab)?.width ?? 0; const width = tabWidthMapRef.current.get(tab)?.width ?? 0;
tabWidthMapRef.current.set(tab, { tabWidthMapRef.current.set(tab, {
node: el, node: el,
width: el ? el.getBoundingClientRect().width : width width: el ? el.getBoundingClientRect().width : width
}); });
}} }}
onClick={selectedTabId !== tab ? () => onSelectTab(tab) : undefined} onClick={selectedTabId !== tab ? () => onSelectTab(tab) : () => {}}
> >
{tab} {tab}
</TabItem> </TabItem>
@ -177,7 +178,7 @@ export function CreateTabBar({ tabs, firstSelectedTab, onChangeTab }) {
TabBar: <NoteBookTabs TabBar: <NoteBookTabs
tabs={tabKeys} tabs={tabKeys}
selectedTabId={selectedTab} selectedTabId={selectedTab}
onSelectTab={(tab) => { onSelectTab={tab => {
setSelectedTab(tab); setSelectedTab(tab);
if (onChangeTab) onChangeTab(tab); if (onChangeTab) onChangeTab(tab);
}} />, }} />,