1
0
Fork 0
web2019/static/js/shop/ProductItem.jsx

120 lines
3.8 KiB
JavaScript

import React, {PureComponent} from 'react';
import PropTypes from "prop-types";
import {Draggable} from "@hello-pangea/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>
);
}
}