-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New Tabs
component implementation
#2061
Conversation
…o Mil4n0r/new_tabs_implementation
Tabs
component implementation
Good job @Jialecl. Changes look legit. The only thing to improve I can think of would be to improve the typings so that only legacy behavior or new behavior are allowed, not both at once. However, I am not sure if that is worth it taking into account that the legacy behavior will eventually be removed. Let me know what you guys think @Jialecl @GomezIvann. |
…dxc-technology/halstack-react into Mil4n0r/new_tabs_implementation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just a general thought. There are too many variables depending on each other (because of useMemo
) inside Tabs.tsx
which are only use once or twice. For example:
hasActiveChild
,initialActiveTabLabel
can be transformed into an initialization function inside theuseState
ofactiveTabLabel
:
const childrenArray: ReactElement<TabProps>[] = useMemo(
() => Children.toArray(children) as ReactElement<TabProps>[],
[children]
);
const hasLabelAndIcon = useMemo(
() => childrenArray.some((child) => isValidElement(child) && child.props.icon && child.props.label),
[childrenArray]
);
const [activeTabLabel, setActiveTabLabel] = useState(() => {
const hasActiveChild = childrenArray.some(
(child) => isValidElement(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
);
const initialActiveTab = hasActiveChild
? childrenArray.find(
(child) => isValidElement(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
)
: childrenArray.find((child) => isValidElement(child) && !child.props.disabled);
return isValidElement(initialActiveTab) ? initialActiveTab.props.label : "";
});
- You can directly pass a function to
aria-disabled
fromActiveIndicator
in order to remove another const (isActiveIndicatorDisabled
).
aria-disabled={childrenArray.some((child) =>
isValidElement(child) ? activeTabLabel === child.props.label && child.props.disabled : false
)}
Since you are already memorizing the value of childrenArray
, all this changes make sense and don't trigger rerenders.
Checklist
(Check off all the items before submitting)
/lib
directory./website
as needed.Description
Current
DxcTabs
API is confusing, as it is expected to work in a similar way as DxcNavTabs, but it does not provide Compound Components, so we have no access to onClick/onHover events separately for each Tab.For consistency purposes and easier implementation of the wrappers required in Halstack Studio and UXPin, it is convenient to redo it.
For now, we are maintaining the old API available to prevent adding breaking changes, however, those props will be marked as LEGACY/DEPRECATED to not encourage using them in the future (and eventually, removing them).