110 lines
3.4 KiB
JavaScript
110 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
import HeadlineGroup from './HeadlineGroup';
|
|
import HeroHeadline from './HeroHeadline';
|
|
import { groupByFirstLetter } from '../../common/model';
|
|
import { translate } from '../../common/config';
|
|
|
|
const rings = ['all', 'assess', 'trial', 'hold', 'adopt'];
|
|
|
|
class PageOverview extends React.Component {
|
|
|
|
constructor(...args) {
|
|
super(...args);
|
|
this.state = {
|
|
ring: rings[0],
|
|
};
|
|
}
|
|
|
|
handleRingClick = (ring) => (e) => {
|
|
e.preventDefault();
|
|
|
|
this.setState({
|
|
...this.state,
|
|
ring,
|
|
});
|
|
}
|
|
|
|
isRingActive(ringName) {
|
|
return this.state.ring === ringName;
|
|
}
|
|
|
|
getFilteredAndGroupedItems() {
|
|
const groups = groupByFirstLetter(this.props.items);
|
|
const groupsFiltered = groups.map(group => ({
|
|
...group,
|
|
items: group.items.filter(item => this.state.ring === 'all' || item.ring === this.state.ring),
|
|
}));
|
|
const nonEmptyGroups = groupsFiltered.filter(group => group.items.length > 0);
|
|
return nonEmptyGroups;
|
|
}
|
|
|
|
render() {
|
|
const groups = this.getFilteredAndGroupedItems();
|
|
|
|
return (
|
|
<div>
|
|
<HeadlineGroup>
|
|
<HeroHeadline>Technologies Overview</HeroHeadline>
|
|
</HeadlineGroup>
|
|
<div className="filter">
|
|
<div className="nav">
|
|
{
|
|
rings.map(ringName => (
|
|
<div className="nav__item" key={ringName}>
|
|
<a
|
|
className={classNames('badge badge--big', {
|
|
'badge--empty': !this.isRingActive(ringName),
|
|
[`badge--${ringName}`]: this.isRingActive(ringName),
|
|
})}
|
|
onClick={this.handleRingClick(ringName)}
|
|
href="#"
|
|
>
|
|
{ringName}
|
|
</a>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="letter-index">
|
|
{
|
|
groups.map(({ letter, items }) => (
|
|
<div key={letter} className="letter-index__group">
|
|
<div className="letter-index__letter">{letter}</div>
|
|
<div className="letter-index__items">
|
|
<div className="item-list">
|
|
<div className="item-list__list">
|
|
{
|
|
items.map((item) => (
|
|
<a key={item.name} className="item item--big item--no-leading-border item--no-trailing-border" href="/platforms-and-aoe-services/bar.html">
|
|
<div className="split split--overview">
|
|
<div className="split__left">
|
|
<div className="item__title">{item.title}</div>
|
|
</div>
|
|
<div className="split__right">
|
|
<div className="nav">
|
|
<div className="nav__item">{translate(item.quadrant)}</div>
|
|
<div className="nav__item"><span className={`badge badge--${item.ring}`}>{item.ring}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default PageOverview;
|