-
Notifications
You must be signed in to change notification settings - Fork 2
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
feat: allow overriding the selectedTab on Tabs component #186
Conversation
size-limit report 📦
|
src/tabs/Tabs.tsx
Outdated
/** | ||
* If specified, the index of the selected tab is controlled by the parent component rather than the internal state. | ||
*/ | ||
selectedTabIndex?: number; |
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.
Let's switch this to be index
as that's the most aria compliant naming: https://github.com/reach/reach-ui/blob/43f450db7bcb25a743121fe31355f2294065a049/packages/tabs/src/reach-tabs.tsx#L82
src/tabs/Tabs.tsx
Outdated
const selectedIndex = | ||
typeof selectedTabIndex == "number" ? selectedTabIndex : selectedStateIndex; |
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.
Not blocking but you could encapsulate all this in a hook like useControlledState
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.
done!
src/tabs/Tabs.tsx
Outdated
const [selectedIndex, setSelectedIndex] = useControlledState( | ||
index, | ||
defaultValue, | ||
() => {} |
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.
I think you can simplify this even further
export function useControlledState<T, C = T>(value: Exclude<T, undefined>, defaultValue: Exclude<T, undefined> | undefined, onChange?: (v: C, ...args: any[]) => void): [T, (value: T) => void];
() => {} | |
onChange |
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.
This should allow you to fully remove the explicit call to onChange below
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.
wow, amazing
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.
Nice cleanup!
Brings to parity with our current
Tabs
component in the arizeweb library which lets you control the selectedTab. Without this, you can't change the selectedTab outside of just clicking the tab itself, example as a callback on a button.https://github.com/Arize-ai/arize/blob/main/arizeweb/src/app/components/shared/Tabs.tsx#L86-L88