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 ( {(provided, snapshot) => (
{/* warning container */}
{warnings && warnings.length > 0 && () } {options && ( { // 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(); }) }} /> )}
{model.name_number}
{/* remove container */}
rm

Remove

{/* progression container */} {resources && ( )}
)}
); } }