web2019/static/js/shop/CrateMode.jsx

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>
        );
    }
}