scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Refactor tab component

Browse source
This commit is contained in:
Paul Clue 2022-12-08 14:59:21 -05:00
parent 479e2d363e
commit 6e22ee068f
2 changed files with 76 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/components/tabs/tabs.jsx
View file

@ -10,17 +10,37 @@ require('./tabs.scss');
* Container for a custom, horizontal list of navigation elements
* that can be displayed within a view or component.
*/
const Tabs = props => (
<div className="tab-background">
<SubNavigation className={classNames('tabs', props.className)}>
{props.children}
</SubNavigation>
</div>
);
const Tabs = ({ items, activeTabName }) => {
const itemsRendered = items.map(({ name, onTrigger, getContent }) => {
const isActive = name === activeTabName
return (
<li
className={`${isActive ? 'active' : ''}`}
onClick={onTrigger}
key={name}
>
{getContent(isActive)}
</li>
)
})
return (
<div className="tab-background">
<SubNavigation className="tabs">
{itemsRendered}
</SubNavigation>
</div>
)
};
Tabs.propTypes = {
children: PropTypes.node,
className: PropTypes.string
items: PropTypes.arrayOf(
PropTypes.shape({
name: PropTypes.string.isRequired,
onTrigger: PropTypes.func.isRequired,
getContent: PropTypes.func.isRequired
})
).isRequired,
activeTabName: PropTypes.string.isRequired,
};
module.exports = Tabs;

85
src/views/explore/explore.jsx
View file

@ -27,7 +27,6 @@ class Explore extends React.Component {
'handleGetExploreMore',
'handleChangeSortMode',
'getBubble',
'getTab'
]);
this.state = this.getExploreState();
@ -125,45 +124,55 @@ class Explore extends React.Component {
</h1>
</div>
</TitleBanner>
{/* <Tabs>
{this.getTab('projects')}
{this.getTab('studios')}
</Tabs> */}
<Tabs
items={
[
{
name: 'projects',
onTrigger: () => {
window.location = `${window.location.origin}/explore/projects/${this.state.category}/${this.state.mode}`;
},
getContent: () =>(
<li className={classes}>
{this.state.itemType === type ? [
<img
className={`tab-icon ${type}`}
key={`tab-${type}`}
src={`/svgs/tabs/${type}-active.svg`}
/>
] : [
<img
className={`tab-icon ${type}`}
key={`tab-${type}`}
src={`/svgs/tabs/${type}-inactive.svg`}
/>
]}
<FormattedMessage id={`general.${type}`} />
</li>
)
items={[
{
name: 'projects',
onTrigger: () => {
window.location = `${window.location.origin}/explore/projects/${this.state.category}/${this.state.mode}`;
},
{
name: 'studios',
onTrigger: () => {
window.location = `${window.location.origin}/explore/studios/${this.state.tab}/${this.state.mode}`;
},
content: 'studios'
}
]}
getContent: (isActive) => (
<div>
{isActive ? (
<img
className="tab-icon projects"
src="/svgs/tabs/projects-active.svg"
/>
) : (
<img
className="tab-icon projects"
src="/svgs/tabs/projects-inactive.svg"
/>
)
}
<FormattedMessage id="general.projects" />
</div>
)
},
{
name: 'studios',
onTrigger: () => {
window.location = `${window.location.origin}/explore/studios/${this.state.category}/${this.state.mode}`;
},
getContent: (isActive) => (
<div>
{isActive ? (
<img
className="tab-icon studios"
src="/svgs/tabs/studios-active.svg"
/>
) : (
<img
className="tab-icon studios"
src="/svgs/tabs/studios-inactive.svg"
/>
)
}
<FormattedMessage id="general.studios" />
</div>
)
}
]}
activeTabName={ this.state.itemType }
/>
<div className="sort-controls">