101 lines
3.3 KiB
React
101 lines
3.3 KiB
React
|
import React, {PureComponent} from 'react'
|
||
|
|
import PropTypes from "prop-types";
|
||
|
|
import {Droppable} from "react-beautiful-dnd";
|
||
|
|
import {cartStyle, nbrOccupiedSlotsInCrate} from "./utils";
|
||
|
|
import {ProductCartItem} from "./ProductCartItem.jsx";
|
||
|
|
import {FakePlaceholder} from "./FakePlaceholder.jsx";
|
||
|
|
import {FillExtData} from "./options/utils";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Component that displays a list of <ProductCartItem>
|
||
|
|
*/
|
||
|
|
export class Cart extends PureComponent {
|
||
|
|
|
||
|
|
static get propTypes() {
|
||
|
|
return {
|
||
|
|
isMobile: PropTypes.bool,
|
||
|
|
isTouch: PropTypes.bool,
|
||
|
|
nbrSlots: PropTypes.number,
|
||
|
|
itemHovered: PropTypes.string,
|
||
|
|
data: PropTypes.object.isRequired,
|
||
|
|
onToggleOverlayRemove: PropTypes.func,
|
||
|
|
onClickRemoveItem: PropTypes.func,
|
||
|
|
onCardUpdate: PropTypes.func,
|
||
|
|
onClickItem: PropTypes.func,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {
|
||
|
|
isMobile,
|
||
|
|
isTouch,
|
||
|
|
nbrSlots,
|
||
|
|
itemHovered,
|
||
|
|
data,
|
||
|
|
onToggleOverlayRemove,
|
||
|
|
onClickRemoveItem,
|
||
|
|
onClickItem,
|
||
|
|
onCardUpdate,
|
||
|
|
} = this.props;
|
||
|
|
|
||
|
|
const nbrOccupied = nbrOccupiedSlotsInCrate(data.items);
|
||
|
|
|
||
|
|
const products = data.items.map((item, index) => {
|
||
|
|
let itemData;
|
||
|
|
let ext_data = FillExtData(data.itemsData, index);
|
||
|
|
if (data.itemsData && index in data.itemsData) {
|
||
|
|
itemData = data.itemsData[index];
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<ProductCartItem
|
||
|
|
isMobile={isMobile}
|
||
|
|
isTouch={isTouch}
|
||
|
|
hovered={item.id === itemHovered}
|
||
|
|
key={item.id}
|
||
|
|
id={item.id}
|
||
|
|
index={index}
|
||
|
|
first={index === 0}
|
||
|
|
last={index === data.items.length - 1 && nbrOccupied >= nbrSlots}
|
||
|
|
data={itemData}
|
||
|
|
ext_data={ext_data}
|
||
|
|
onToggleOverlayRemove={onToggleOverlayRemove}
|
||
|
|
onClickRemoveItem={onClickRemoveItem}
|
||
|
|
onCardUpdate={onCardUpdate}
|
||
|
|
onClickItem={onClickItem}
|
||
|
|
model={item}>
|
||
|
|
</ProductCartItem>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Droppable droppableId={data.id} direction="horizontal">
|
||
|
|
|
||
|
|
{(provided, snapshot) => (
|
||
|
|
<div
|
||
|
|
ref={provided.innerRef}
|
||
|
|
{...provided.droppableProps}
|
||
|
|
style={cartStyle(
|
||
|
|
provided.droppableProps.style,
|
||
|
|
snapshot,
|
||
|
|
)}
|
||
|
|
className="items-cart-list">
|
||
|
|
|
||
|
|
{products}
|
||
|
|
|
||
|
|
{provided.placeholder && (
|
||
|
|
<div style={{ display: 'none' }}>
|
||
|
|
{provided.placeholder}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<FakePlaceholder
|
||
|
|
nbrSlots={nbrSlots}
|
||
|
|
items={data.items}
|
||
|
|
isDraggingOver={snapshot.isDraggingOver} />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
</Droppable>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|