Skip to content
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.

Sign up for GitHub

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

Update TabView Component to change tab when activeTab changes #585

Merged
merged 2 commits into from
Sep 16, 2024
Merged

Update TabView Component to change tab when activeTab changes #585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
25dcc03
Update TabView Component to change tab when activeTab changes
LucasFlaquer Sep 12, 2024
ac24733
extract variable
LucasFlaquer Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 67 additions & 78 deletions components/TabbedView/TabbedView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, Children } from 'react';
import { useState, useEffect, Children } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import {
Expand Down Expand Up @@ -159,86 +159,88 @@ const TabPanel = styled.div`

const RenderIf = ({ conditional, children }) => conditional && children;

class TabbedView extends Component {
static Tab = Tab;

constructor(props) {
super(props);

const { children, activeTab } = props;
function TabbedView({
children,
activeTab = undefined,
skin = 'neutral',
theme = {
components,
baseFontSize: defaultBaseFontSize,
breakpoints: defaultBreakpoints,
spacing: defaultSpacing,
},
fluid = false,
onTabClick = () => {},
}) {
const [currentTab, setCurrentTab] = useState(activeTab);
const tabTitles = Children.toArray(children).map((tab) => tab.props.title);
function setDefaultTab() {
setCurrentTab(tabTitles[0]);
}

if (activeTab) {
this.state = { activeTab };
useEffect(() => {
if (tabTitles.includes(activeTab)) {
setCurrentTab(activeTab);
} else {
const [
{
props: { title },
},
] = Children.toArray(children);
this.state = { activeTab: title };
setDefaultTab();
}
}
}, [activeTab]);

onTabClick = (tab, onTabClick) => {
this.setState({ activeTab: tab });
const handleTabClick = (tab) => {
setCurrentTab(tab);
onTabClick(tab);
};

sanitize = (str) =>
const sanitize = (str) =>
str
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.replace(' ', '-')
.toLowerCase();

render() {
const { children, skin, theme, fluid, onTabClick } = this.props;
const { activeTab } = this.state;

return (
<>
<Navbar theme={theme} skin={skin} fluid={fluid}>
{Children.map(children, ({ props: { title, badge, icon } }) => (
<NavItem
fluid={fluid}
quantityOfItems={Children.count(children)}
key={title}
onClick={() => this.onTabClick(title, onTabClick)}
skin={skin}
theme={theme}
id={`${this.sanitize(title)}-tab`}
aria-controls={`${this.sanitize(title)}-panel`}
aria-selected={title === activeTab}
>
{icon && <IconContainer>{icon}</IconContainer>}
{title && <TitleContainer>{title}</TitleContainer>}
{badge && <BadgeContainer>{badge}</BadgeContainer>}
</NavItem>
))}
</Navbar>

{Children.map(
children,
({ props: { title, children: tabContent } }) => (
<RenderIf conditional={title === activeTab}>
<TabPanel
role="tabpanel"
key={`${this.sanitize(title)}-panel-key`}
id={`${this.sanitize(title)}-panel`}
aria-labelledby={`${this.sanitize(title)}-tab`}
>
{tabContent}
</TabPanel>
</RenderIf>
),
)}
</>
);
}
const quantityOfItems = Children.count(children);

return (
<>
<Navbar theme={theme} skin={skin} fluid={fluid}>
{Children.map(children, ({ props: { title, badge, icon } }) => (
<NavItem
fluid={fluid}
quantityOfItems={quantityOfItems}
key={title}
onClick={() => handleTabClick(title)}
skin={skin}
theme={theme}
id={`${sanitize(title)}-tab`}
aria-controls={`${sanitize(title)}-panel`}
aria-selected={title === currentTab}
>
{icon && <IconContainer>{icon}</IconContainer>}
{title && <TitleContainer>{title}</TitleContainer>}
{badge && <BadgeContainer>{badge}</BadgeContainer>}
</NavItem>
))}
</Navbar>

{Children.map(children, ({ props: { title, children: tabContent } }) => (
<RenderIf conditional={title === currentTab}>
<TabPanel
role="tabpanel"
key={`${sanitize(title)}-panel-key`}
id={`${sanitize(title)}-panel`}
aria-labelledby={`${sanitize(title)}-tab`}
>
{tabContent}
</TabPanel>
</RenderIf>
))}
</>
);
}

TabbedView.Tab = Tab;

TabbedView.propTypes = {
/** Used to expand all tabs along all the parent width */
fluid: PropTypes.bool,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
Expand All @@ -257,19 +259,6 @@ TabbedView.propTypes = {
onTabClick: PropTypes.func,
};

TabbedView.defaultProps = {
fluid: false,
activeTab: undefined,
skin: 'neutral',
theme: {
components,
baseFontSize: defaultBaseFontSize,
breakpoints: defaultBreakpoints,
spacing: defaultSpacing,
},
onTabClick: () => {},
};

TabbedView.displayName = 'TabbedView';

export default TabbedView;
44 changes: 44 additions & 0 deletions components/TabbedView/TabbedView.unit.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,50 @@ describe('<TabbedView /> ', () => {
render(<Tab title="Candidates">Candidates content</Tab>);
expect(screen.getByText('Candidates content')).toBeInTheDocument();
});
it('should be able to change active tab when activeTab props change', () => {
const { rerender } = render(
<TabbedView activeTab="Empresas">
<Tab title="Candidatos">Candidatos content</Tab>
<Tab title="Empresas">Empresas content</Tab>
<Tab title="Educação">Educação content</Tab>
</TabbedView>,
);
expect(screen.queryByText('Candidatos content')).not.toBeInTheDocument();
expect(screen.getByText('Empresas content')).toBeInTheDocument();
expect(screen.queryByText('Educação content')).not.toBeInTheDocument();
rerender(
<TabbedView activeTab="Candidatos">
<Tab title="Candidatos">Candidatos content</Tab>
<Tab title="Empresas">Empresas content</Tab>
<Tab title="Educação">Educação content</Tab>
</TabbedView>,
);
expect(screen.getByText('Candidatos content')).toBeInTheDocument();
expect(screen.queryByText('Empresas content')).not.toBeInTheDocument();
expect(screen.queryByText('Educação content')).not.toBeInTheDocument();
});
it('should not be able to change the active tab when active tab props change to a invalid tab', () => {
const { rerender } = render(
<TabbedView activeTab="Empresas">
<Tab title="Candidatos">Candidatos content</Tab>
<Tab title="Empresas">Empresas content</Tab>
<Tab title="Educação">Educação content</Tab>
</TabbedView>,
);
expect(screen.queryByText('Candidatos content')).not.toBeInTheDocument();
expect(screen.getByText('Empresas content')).toBeInTheDocument();
expect(screen.queryByText('Educação content')).not.toBeInTheDocument();
rerender(
<TabbedView activeTab="invalid tab">
<Tab title="Candidatos">Candidatos content</Tab>
<Tab title="Empresas">Empresas content</Tab>
<Tab title="Educação">Educação content</Tab>
</TabbedView>,
);
expect(screen.getByText('Candidatos content')).toBeInTheDocument();
expect(screen.queryByText('Empresas content')).not.toBeInTheDocument();
expect(screen.queryByText('Educação content')).not.toBeInTheDocument();
});
});

describe('events', () => {
Expand Down