From fc77712477d370c9adfc1a41b4af53af441063ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20Mar=C3=ADn=20S=C3=A1nchez?= <46426271+fermarinsanchez@users.noreply.github.com> Date: Tue, 29 Oct 2024 09:56:24 +0100 Subject: [PATCH] fix(components): update Tabs Menu to v5 syntax and tweak useVisibleRange Ticket: issue/Transversal-314 Reviewed-by: @MIGUELez11 Refs: #201 --- .../src/form/IconButton/IconButton.js | 4 +- .../navigation/Tabs/TabNavList/Dropdown.js | 88 ++++++------------- .../Tabs/TabNavList/Dropdown.styles.js | 32 +++++-- .../navigation/Tabs/hooks/useVisibleRange.js | 17 ++-- 4 files changed, 62 insertions(+), 79 deletions(-) diff --git a/packages/components/src/form/IconButton/IconButton.js b/packages/components/src/form/IconButton/IconButton.js index 1146da042..61357e0cb 100644 --- a/packages/components/src/form/IconButton/IconButton.js +++ b/packages/components/src/form/IconButton/IconButton.js @@ -34,7 +34,7 @@ const IconButton = forwardRef( const variant = ICON_BUTTON_VARIANTS.includes(variantProp) ? variantProp : ICON_BUTTON_DEFAULT_PROPS.variant; - const { classes } = IconButtonStyles({ color, size, variant }); + const { classes, cx } = IconButtonStyles({ color, size, variant }); return ( diff --git a/packages/components/src/navigation/Tabs/TabNavList/Dropdown.js b/packages/components/src/navigation/Tabs/TabNavList/Dropdown.js index f37d0fee4..3c8a6e7a7 100644 --- a/packages/components/src/navigation/Tabs/TabNavList/Dropdown.js +++ b/packages/components/src/navigation/Tabs/TabNavList/Dropdown.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; import { isFunction } from 'lodash'; import { Menu, Box } from '@mantine/core'; @@ -7,63 +7,31 @@ import { IconButton } from '../../../form/IconButton'; import { DropdownStyles } from './Dropdown.styles'; const Dropdown = forwardRef(({ tabs, onTabClick }, ref) => { - // ········································································ - // Dropdown - const [open, setOpen] = useState(false); - const [selectedKey, setSelectedKey] = useState(null); - - const popupId = `more-popup`; - const selectedItemId = selectedKey !== null ? `${popupId}-${selectedKey}` : null; - - // ········································································ - // Effect - useEffect(() => { - // We use query element here to avoid React strict warning - const elem = document.getElementById(selectedItemId); - if (elem?.scrollIntoView) { - elem.scrollIntoView(false); - } - }, [selectedKey]); - - useEffect(() => { - if (!open) { - setSelectedKey(null); - } - }, [open]); - - // ········································································ - // Render - const { classes, cx } = DropdownStyles({}, { name: 'Dropdown' }); return ( - setOpen(true)} icon={} />} - withArrow - closeOnScroll={false} - position="bottom" - placement="end" - opened={open} - onOpen={() => setOpen(true)} - onClose={() => setOpen(false)} - styles={() => ({ - body: { - maxHeight: 300, - overflowY: 'auto', - }, - })} - > - {tabs.map((tab) => ( - { - if (isFunction(onTabClick)) onTabClick(tab.key, e); - }} - > - {tab.label} - - ))} + + + } + /> + + + + {tabs.map((tab) => ( + { + if (isFunction(onTabClick)) onTabClick(tab.key, e); + }} + > + {tab.label} + + ))} + ); @@ -72,13 +40,13 @@ const Dropdown = forwardRef(({ tabs, onTabClick }, ref) => { Dropdown.displayName = 'Dropdown'; Dropdown.propTypes = { - id: PropTypes.string, - tabs: PropTypes.any, - rtl: PropTypes.bool, - tabBarGutter: PropTypes.number, - activeKey: PropTypes.string, + tabs: PropTypes.arrayOf( + PropTypes.shape({ + key: PropTypes.string.isRequired, + label: PropTypes.node.isRequired, + }), + ).isRequired, onTabClick: PropTypes.func, - tabMoving: PropTypes.bool, }; export { Dropdown }; diff --git a/packages/components/src/navigation/Tabs/TabNavList/Dropdown.styles.js b/packages/components/src/navigation/Tabs/TabNavList/Dropdown.styles.js index 3f74ea650..e0d53caf8 100644 --- a/packages/components/src/navigation/Tabs/TabNavList/Dropdown.styles.js +++ b/packages/components/src/navigation/Tabs/TabNavList/Dropdown.styles.js @@ -1,12 +1,26 @@ import { createStyles } from '@mantine/styles'; -export const DropdownStyles = createStyles((theme, {}, getRef) => { - return { - root: { - paddingLeft: theme.spacing['3'], - display: 'flex', - alignItems: 'center', - // paddingBottom: theme.spacing['2'], +const DropdownStyles = createStyles((theme, {}, getRef) => ({ + root: { + paddingLeft: theme.spacing['3'], + display: 'flex', + alignItems: 'center', + zIndex: 1000, + // paddingBottom: theme.spacing['2'], + }, + item: { + '&:hover': { + backgroundColor: theme.other.button.content.color.terciary.default, }, - }; -}); + }, + buttonIcon: { + '&:hover': { + backgroundColor: theme.other.buttonIcon.background.color.ghost.hover, + '& > svg': { + color: theme.other.buttonIcon.background.color.secondary.down, + }, + }, + }, +})); + +export { DropdownStyles }; diff --git a/packages/components/src/navigation/Tabs/hooks/useVisibleRange.js b/packages/components/src/navigation/Tabs/hooks/useVisibleRange.js index df9f36a97..862d4b962 100644 --- a/packages/components/src/navigation/Tabs/hooks/useVisibleRange.js +++ b/packages/components/src/navigation/Tabs/hooks/useVisibleRange.js @@ -1,18 +1,19 @@ import { useMemo } from 'react'; const DEFAULT_SIZE = { width: 0, height: 0, left: 0, top: 0, right: 0 }; +const TOLERANCE = 5; // píxeles de tolerancia export const useVisibleRange = ( tabOffsets, // Map containerSize, // { width: number, height: number, left: number, top: number }, tabContentNodeSize, // { width: number, height: number }, addNodeSize, // { width: number, height: number }, - { tabs, rtl } + { tabs, rtl }, ) => { // { tabs: Tab[] } & TabNavListProps - let unit = 'width'; // 'width' | 'height'; - let position = rtl ? 'right' : 'left'; // 'left' | 'top' | 'right'; - let transformSize = Math.abs(containerSize.left); // number; + const unit = 'width'; // 'width' | 'height'; + const position = rtl ? 'right' : 'left'; // 'left' | 'top' | 'right'; + const transformSize = Math.abs(containerSize.left); // number; const basicSize = containerSize[unit]; const tabContentSize = tabContentNodeSize[unit]; @@ -29,7 +30,7 @@ export const useVisibleRange = ( } const len = tabs.length; - let endIndex = len; + let endIndex = len - 1; for (let i = 0; i < len; i += 1) { const offset = tabOffsets.get(tabs[i].key) || DEFAULT_SIZE; if (offset[position] + offset[unit] > transformSize + mergedBasicSize) { @@ -39,10 +40,10 @@ export const useVisibleRange = ( } let startIndex = 0; - for (let i = len - 1; i >= 0; i -= 1) { + for (let i = 0; i < len; i += 1) { const offset = tabOffsets.get(tabs[i].key) || DEFAULT_SIZE; - if (offset[position] < transformSize) { - startIndex = i + 1; + if (offset[position] + offset[unit] >= transformSize) { + startIndex = i; break; } }