Skip to content

Commit

Permalink
fix: tabs: use tab value to set the current active tab(#100)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ychhabra-eightfold
ychhabra-eightfold authored May 3, 2022
1 parent 5b3456a commit 5e0ec1f
Show file tree
Hide file tree
Showing 9 changed files with 266 additions and 189 deletions.
56 changes: 28 additions & 28 deletions src/__snapshots__/storybook.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3524,7 +3524,7 @@ exports[`Storyshots ConfigProvider Theming 1`] = `
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -3563,7 +3563,7 @@ exports[`Storyshots ConfigProvider Theming 1`] = `
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -3596,7 +3596,7 @@ exports[`Storyshots ConfigProvider Theming 1`] = `
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -3630,7 +3630,7 @@ exports[`Storyshots ConfigProvider Theming 1`] = `
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -10749,7 +10749,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -10788,7 +10788,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -10821,7 +10821,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -10855,7 +10855,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -10898,7 +10898,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -10942,7 +10942,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -10980,7 +10980,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -11019,7 +11019,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -11390,7 +11390,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -11429,7 +11429,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -11462,7 +11462,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -11496,7 +11496,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -11539,7 +11539,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -11583,7 +11583,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -11621,7 +11621,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -11660,7 +11660,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -11871,7 +11871,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -11910,7 +11910,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -11943,7 +11943,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -11977,7 +11977,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -12020,7 +12020,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -12064,7 +12064,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -12102,7 +12102,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down Expand Up @@ -12141,7 +12141,7 @@ Array [
>
<span
aria-hidden={false}
className="iconWrapper"
className="icon iconWrapper"
role="presentation"
>
<svg
Expand Down
12 changes: 4 additions & 8 deletions src/components/ConfigProvider/ConfigProvider.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,32 +164,28 @@ const ThemedComponents = () => {
</div>
<br />
<br />
<Tabs onChange={click} activeTab={'tab1'}>
<Tabs onChange={click} value={'tab1'}>
{tabs.map((tab) => (
<Tab key={tab.value} {...tab} />
))}
</Tabs>
<br />
<br />
<Tabs onChange={click} activeTab={'tab1'}>
<Tabs onChange={click} value={'tab1'}>
{iconTabs.map((tab) => (
<Tab key={tab.value} {...tab} />
))}
</Tabs>
<br />
<br />
<Tabs
onChange={click}
activeTab={'tab1'}
variant={TabVariant.small}
>
<Tabs onChange={click} value={'tab1'} variant={TabVariant.small}>
{tabs.map((tab) => (
<Tab key={tab.value} {...tab} />
))}
</Tabs>
<br />
<br />
<Tabs onChange={click} activeTab={'tab1'} variant={TabVariant.pill}>
<Tabs onChange={click} value={'tab1'} variant={TabVariant.pill}>
{tabs.map((tab) => (
<Tab key={tab.value} {...tab} />
))}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Tabs/Tab/Tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const Tab: FC<TabProps> = ({
]);

const getIcon = (): JSX.Element =>
iconExists && <Icon path={icon} className={styles.icon} />;
iconExists && <Icon path={icon} classNames={styles.icon} />;

const getLabel = (): JSX.Element =>
labelExists && <span className={styles.label}>{label}</span>;
Expand Down
12 changes: 7 additions & 5 deletions src/components/Tabs/Tabs.context.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { createContext, useState } from 'react';
import React, { createContext, useEffect, useState } from 'react';
import {
TabsContextProps,
ITabsContext,
Expand All @@ -8,12 +8,14 @@ import {

const TabsContext = createContext<Partial<ITabsContext>>({});

const TabsProvider = ({ children, onChange, activeTab }: TabsContextProps) => {
const [currentActiveTab, setCurrentActiveTab] =
useState<TabValue>(activeTab);
const TabsProvider = ({ children, onChange, value }: TabsContextProps) => {
const [currentActiveTab, setCurrentActiveTab] = useState<TabValue>(value);

const onTabClick = (value: TabValue, e: SelectTabEvent) => {
useEffect(() => {
setCurrentActiveTab(value);
}, [value]);

const onTabClick = (value: TabValue, e: SelectTabEvent) => {
onChange(value, e);
};

Expand Down
Loading

0 comments on commit 5e0ec1f

Please sign in to comment.