web2019/static/js/shop/ProductItem.jsx

import React, {PureComponent} from 'react';
import PropTypes from "prop-types";
import {Draggable} from "react-beautiful-dnd";
import {formatMoney, productStyle} from "./utils";

/**
 * Component that renders a product.
 * Used in the aside (e.g backlog of product)
 */
export class ProductItem extends PureComponent {

    static get propTypes() {
        return {
            id: PropTypes.string.isRequired,
            index: PropTypes.number.isRequired,
            name: PropTypes.string.isRequired,
            name_codename: PropTypes.string,
            price: PropTypes.number.isRequired,
            currency: PropTypes.string.isRequired,
            image: PropTypes.string.isRequired,
            specs: PropTypes.array,
            datasheet_file: PropTypes.string,
            datasheet_name: PropTypes.string,
            onClickAddItem: PropTypes.func,
        };
    }

    constructor(props) {
        super(props);
        this.handleOnClickAddItem = this.handleOnClickAddItem.bind(this);
    }

    handleOnClickAddItem(id, tap, e) {
        if (this.props.onClickAddItem) {
            this.props.onClickAddItem(id, tap);
        }
        e.preventDefault();
    }

    render() {
        const {
            id,
            index,
            name,
            name_codename,
            price,
            currency,
            image,
            specs,
            datasheet_file,
            datasheet_name,
        } = this.props;

        const render_specs = (specs && specs.length > 0 && (
            <ul>
                {specs.map((spec, index) =>
                    <li key={index}>{spec}</li>
                )}
            </ul>
        ));

        const render_datasheet_link = (datasheet_file && datasheet_name && (
            <div className="ds">
                <span className='doc-icon'></span>
                <a href={datasheet_file} target="_blank" rel="noopener noreferrer">
                    {datasheet_name}
                </a>
            </div>
        ));

        return (
            <section className="productItem">

                <div className="content">
                    <h3 style={{ 'marginBottom': name_codename ? '5px' : '20px'}}>{name}</h3>
                    {name_codename ? (
                        <p>{name_codename}</p>
                    ) : null }

                    <div className="price">{`${currency} ${formatMoney(price)}`}</div>

                    {render_specs}

                    {render_datasheet_link}
                </div>

                <div className="content">

                    <button onClick={this.handleOnClickAddItem.bind(this, index, true)}>
                        <img src="/images/shop/icon-add.svg" alt="add" />
                    </button>

                    <Draggable draggableId={id} index={index}>
                        {(provided, snapshot) => (
                            <React.Fragment>
                                <img
                                    ref={provided.innerRef}
                                    {...provided.draggableProps}
                                    {...provided.dragHandleProps}
                                    style={productStyle(
                                        provided.draggableProps.style,
                                        snapshot,
                                        true,  // hack: remove weird animation after a drop
                                    )}
                                    src={image} />

                                {/* Allows to simulate a clone */}
                                {snapshot.isDragging && (
                                    <img className="simclone" src={image} />
                                )}
                            </React.Fragment>
                        )}
                    </Draggable>

                </div>

            </section>
        );
    }
}