Commit fc2c8161 authored by tom's avatar tom

some tweaks

parent 3e0134e7
...@@ -47,14 +47,6 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => { ...@@ -47,14 +47,6 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
setActiveTab(index); setActiveTab(index);
}, [ tabs, router ]); }, [ tabs, router ]);
const handleItemInMenuClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
const tabIndex = (event.target as HTMLButtonElement).getAttribute('data-index');
if (tabIndex) {
handleTabChange(tabsCut + Number(tabIndex));
}
}, [ handleTabChange, tabsCut ]);
return ( return (
<Tabs variant="soft-rounded" colorScheme="blue" isLazy onChange={ handleTabChange } index={ activeTab }> <Tabs variant="soft-rounded" colorScheme="blue" isLazy onChange={ handleTabChange } index={ activeTab }>
<TabList marginBottom={{ base: 6, lg: 8 }} flexWrap="nowrap" whiteSpace="nowrap" ref={ listRef }> <TabList marginBottom={{ base: 6, lg: 8 }} flexWrap="nowrap" whiteSpace="nowrap" ref={ listRef }>
...@@ -74,7 +66,7 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => { ...@@ -74,7 +66,7 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
{ opacity: tabsCut === 0 ? 0 : 1 } : { opacity: tabsCut === 0 ? 0 : 1 } :
hiddenItemStyles hiddenItemStyles
} }
onItemClick={ handleItemInMenuClick } onItemClick={ handleTabChange }
buttonRef={ tabsRefs[index] } buttonRef={ tabsRefs[index] }
/> />
); );
......
...@@ -18,12 +18,20 @@ interface Props { ...@@ -18,12 +18,20 @@ interface Props {
tabsCut: number; tabsCut: number;
isActive: boolean; isActive: boolean;
styles?: StyleProps; styles?: StyleProps;
onItemClick: (event: React.MouseEvent<HTMLButtonElement>) => void; onItemClick: (index: number) => void;
buttonRef: React.RefObject<HTMLButtonElement>; buttonRef: React.RefObject<HTMLButtonElement>;
} }
const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRef, activeTab }: Props) => { const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRef, activeTab }: Props) => {
const { isOpen, onToggle } = useDisclosure(); const { isOpen, onToggle, onClose } = useDisclosure();
const handleItemClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
onClose();
const tabIndex = (event.target as HTMLButtonElement).getAttribute('data-index');
if (tabIndex) {
onItemClick(tabsCut + Number(tabIndex));
}
}, [ onClose, onItemClick, tabsCut ]);
return ( return (
<Popover isLazy placement="bottom-end" key="more"> <Popover isLazy placement="bottom-end" key="more">
...@@ -44,7 +52,7 @@ const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRe ...@@ -44,7 +52,7 @@ const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRe
<Button <Button
key={ tab.routeName } key={ tab.routeName }
variant="subtle" variant="subtle"
onClick={ onItemClick } onClick={ handleItemClick }
isActive={ activeTab.routeName === tab.routeName } isActive={ activeTab.routeName === tab.routeName }
justifyContent="left" justifyContent="left"
data-index={ index } data-index={ index }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment