web2019/static/js/shop/ProductCartItem.jsx

187 lines
6.5 KiB
JavaScript

import React, {PureComponent} from 'react'
import PropTypes from "prop-types";
import {Draggable} from "@hello-pangea/dnd";
import {DialogPopup} from "./options/DialogPopup.jsx";
import {productStyle} from "./utils";
import {Resources} from "./Resources.jsx";
import {Warnings} from "./Warnings.jsx";
/**
* Component that renders a product.
* Used in the crate
*/
export class ProductCartItem extends PureComponent {
static get propTypes() {
return {
isMobile: PropTypes.bool,
isTouch: PropTypes.bool,
hovered: PropTypes.bool,
first: PropTypes.bool,
last: PropTypes.bool,
index: PropTypes.number.isRequired,
model: PropTypes.object.isRequired,
data: PropTypes.object,
ext_data: PropTypes.object,
resources: PropTypes.object,
onToggleOverlayRemove: PropTypes.func,
onClickRemoveItem: PropTypes.func,
onClickItem: PropTypes.func,
onCardUpdate: PropTypes.func,
};
}
static get defaultProps() {
return {
hovered: false,
};
}
constructor(props) {
super(props);
this.handleOnMouseEnterRemoveItem = this.handleOnMouseEnterRemoveItem.bind(this);
this.handleOnMouseLeaveRemoveItem = this.handleOnMouseLeaveRemoveItem.bind(this);
this.handleOnClickRemoveItem = this.handleOnClickRemoveItem.bind(this);
this.handleOnClickItem = this.handleOnClickItem.bind(this);
}
handleOnMouseEnterRemoveItem(index, e) {
if (this.props.onToggleOverlayRemove && !this.props.isMobile) {
this.props.onToggleOverlayRemove(index, true);
}
e.preventDefault();
}
handleOnMouseLeaveRemoveItem(index, e) {
if (this.props.onToggleOverlayRemove && !this.props.isMobile) {
this.props.onToggleOverlayRemove(index, false);
}
e.preventDefault();
}
handleOnClickItem(index, e) {
if (this.props.onClickItem && this.props.isTouch) {
this.props.onClickItem(index);
}
e.preventDefault();
}
handleOnClickRemoveItem(index, e) {
if (this.props.onClickRemoveItem) {
this.props.onClickRemoveItem(index);
}
}
render() {
const {
hovered,
model,
data,
index,
first,
last,
ext_data,
onCardUpdate,
} = this.props;
let options, options_data;
const warnings = data && data.show_warnings;
const resources = data && data.counted_resources;
if (data && data.options) {
options = data.options;
if (!data.options_data) data.options_data = {};
options_data = data.options_data;
options_data.ext_data = ext_data;
}
return (
<Draggable draggableId={model.id} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{ ...productStyle(
provided.draggableProps.style,
snapshot,
true,
!!hovered,
!!model.selected,
true
)}}
onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
onMouseLeave={this.handleOnMouseLeaveRemoveItem.bind(this, index)}
>
{/* warning container */}
<div className="progress-container warning d-flex justify-content-evenly">
{warnings && warnings.length > 0 &&
(<Warnings warnings={warnings} />)
}
{options && (
<DialogPopup
options={options}
data={options_data}
options_class={model.options_class}
key={"popover" + index}
id={"popover" + index}
big={model.size === "big"}
first={first}
last={last}
target={{
construct: ((outvar, value) => {
// console.log("construct", outvar, value, options_data);
options_data[outvar] = value;
}),
update: ((outvar, value) => {
// console.log("update", outvar, value, options_data);
if (outvar in options_data) options_data[outvar] = value;
onCardUpdate();
})
}}
/>
)}
</div>
<h6>{model.name_number}</h6>
<div
onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
onClick={this.handleOnClickItem.bind(this, index)}
>
<img
className='item-cart'
src={`/images${model.image}`} />
</div>
{/* remove container */}
<div
style={{'display': model.showOverlayRemove ? 'flex':'none'}}
className="overlayRemove"
onClick={this.handleOnClickRemoveItem.bind(this, index)}>
<img src="/images/shop/icon-remove.svg" alt="rm"/>
<p>Remove</p>
</div>
{/* progression container */}
{resources && (
<Resources resources={resources}/>
)}
</div>
)}
</Draggable>
);
}
}