import React, {PureComponent} from 'react' import PropTypes from "prop-types"; import {Draggable} from "react-beautiful-dnd"; import {OverlayTrigger} from "react-bootstrap"; import {DialogPopup} from "./options/DialogPopup.jsx"; import {nbrClocksStyle, nbrConnectorsStyle, productStyle} from "./utils"; /** * 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, 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 warning, options, options_data; if (data && data.warnings) { const warningsKeys = Object.keys(data.warnings); if (warningsKeys && warningsKeys.length > 0) { // we display only the first warning warning = data.warnings[warningsKeys[0]]; } } 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; } let render_progress; if (data) { switch(model.type) { case 'kasli': render_progress = [ (

{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}

), (

{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}

) ]; break; case 'vhdcicarrier': render_progress = (

{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}

); break; case 'zotino': case 'hd68': render_progress = (

{`${data.nbrCurrentSlot}/${model.nbrSlotMax} connectors used`}

); break; case 'clocker': render_progress = (

{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}

); break; default: break; } } return ( {(provided, snapshot) => (
{/* warning container */}
{warning && ( (

{warning.message}

) } rootClose >
) } {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 */} {render_progress && ( (
{render_progress}
)} rootClose >
{model.nbrSlotMax > 0 && (
)} {model.nbrClockMax > 0 && (
)}
)}
)}
); } }