scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-30 10:58:23 -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

32
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 }) => {
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"> <div className="tab-background">
<SubNavigation className={classNames('tabs', props.className)}> <SubNavigation className="tabs">
{props.children} {itemsRendered}
</SubNavigation> </SubNavigation>
</div> </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;

53
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,43 +124,53 @@ 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: () =>( getContent: (isActive) => (
<li className={classes}> <div>
{this.state.itemType === type ? [ {isActive ? (
<img <img
className={`tab-icon ${type}`} className="tab-icon projects"
key={`tab-${type}`} src="/svgs/tabs/projects-active.svg"
src={`/svgs/tabs/${type}-active.svg`}
/> />
] : [ ) : (
<img <img
className={`tab-icon ${type}`} className="tab-icon projects"
key={`tab-${type}`} src="/svgs/tabs/projects-inactive.svg"
src={`/svgs/tabs/${type}-inactive.svg`}
/> />
]} )
<FormattedMessage id={`general.${type}`} /> }
</li> <FormattedMessage id="general.projects" />
</div>
) )
}, },
{ {
name: 'studios', name: 'studios',
onTrigger: () => { onTrigger: () => {
window.location = `${window.location.origin}/explore/studios/${this.state.tab}/${this.state.mode}`; window.location = `${window.location.origin}/explore/studios/${this.state.category}/${this.state.mode}`;
}, },
content: 'studios' 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 }