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 && ( )); const render_datasheet_link = (datasheet_file && datasheet_name && (
{datasheet_name}
)); return (

{name}

{name_codename ? (

{name_codename}

) : null }
{`${currency} ${formatMoney(price)}`}
{render_specs} {render_datasheet_link}
{(provided, snapshot) => ( {/* Allows to simulate a clone */} {snapshot.isDragging && ( )} )}
); } }