forked from M-Labs/web2019
48 lines
1.2 KiB
React
48 lines
1.2 KiB
React
|
import React, {PureComponent} from 'react';
|
||
|
|
import PropTypes from "prop-types";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Component that displays crate modes
|
||
|
|
*/
|
||
|
|
export class CrateMode extends PureComponent {
|
||
|
|
|
||
|
|
static get propTypes() {
|
||
|
|
return {
|
||
|
|
items: PropTypes.array.isRequired,
|
||
|
|
mode: PropTypes.string.isRequired,
|
||
|
|
onClickMode: PropTypes.func,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.handleOnClickMode = this.handleOnClickMode.bind(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
handleOnClickMode(mode, e) {
|
||
|
|
if (this.props.onClickMode) {
|
||
|
|
this.props.onClickMode(mode);
|
||
|
|
}
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {
|
||
|
|
mode,
|
||
|
|
items,
|
||
|
|
} = this.props;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="crate-mode">
|
||
|
|
{items.map(item => (
|
||
|
|
<a
|
||
|
|
key={item.id}
|
||
|
|
className={mode == item.id ? 'active' : ''}
|
||
|
|
onClick={this.handleOnClickMode.bind(this, item.id)}
|
||
|
|
href="#"
|
||
|
|
role="button">{item.name}</a>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|