scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-12-02 11:59:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

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

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