import React, { useContext, useRef } from 'react' import { useDrop } from 'react-dnd' import _ from 'lodash' import InventoryItem from './InventoryItem' import InventoryContext from './InventoryContext' const InventoryItemsLayer = props => { const ref = useRef(null) const { inv } = useContext(InventoryContext) const [, drop] = useDrop({ accept: 'card', canDrop(item, monitor) { //console.log(`ItemsLayer: ${JSON.stringify(item)}`) let hasError = false // проверка для сумок, что можно в них класть if (Object.prototype.hasOwnProperty.call(props, 'itemId')) { if (Object.prototype.hasOwnProperty.call(inv.forbiddenItems, props.itemId)) { if (_.includes(inv.forbiddenItems[props.itemId], item.itemId)) { hasError = true } } } if (item.width > props.width || item.height > props.height) { hasError = true } // проверка повтора if (!Object.prototype.hasOwnProperty.call(props, 'itemId')) { const itemExists = _.find( inv.personInventory, singleItem => (singleItem.parentId === -1 && singleItem.itemId === item.itemId)) if (itemExists) hasError = true if (item.itemId > 16 && item.itemId !== 54 && item.itemId !== 59) hasError = true } if (Object.prototype.hasOwnProperty.call(props, 'itemId')) { if (props.itemId === item.itemId) hasError = true } if (props.type === 'vehicle') { hasError = false // проверка есть ли вещи внутри if (Object.prototype.hasOwnProperty.call(inv.forbiddenItems, item.itemId)) { let curItem = inv.findItemBySqlId(item.sqlId) if (!curItem) curItem = inv.findVehItemBySqlId(inv.vehicleInventory, item.sqlId) if (!curItem) return if (Object.prototype.hasOwnProperty.call(curItem, 'items')) { if (curItem.items.length > 0) { hasError = true } } } } //console.log(`hasError: ${hasError}`) if (hasError) { return false } return true }, hover(item, monitor) { if (item.type === 'card') { const hoverItem = props const { x, y } = monitor.getClientOffset() const groupItemBoundingRect = ref.current.getBoundingClientRect() const groupItemX = groupItemBoundingRect.left const groupItemY = groupItemBoundingRect.top props.onCardHoverInGroupItem(item, hoverItem, x - groupItemX, y - groupItemY) } }, drop: (item, monitor) => { if (item.type === 'card') { const hoverItem = props const offset = monitor.getClientOffset() if (!offset) return {} const { x, y } = offset const groupItemBoundingRect = ref.current.getBoundingClientRect() const groupItemX = groupItemBoundingRect.left const groupItemY = groupItemBoundingRect.top props.onCardDropInGroupItem(item, hoverItem, x - groupItemX, y - groupItemY) } }, collect: monitor => ({ isOver: !!monitor.isOver(), }), }) const createCards = (cards, groupID, index) => { const { layout } = props const itemDoms = [] _.forEach(cards, (c, i) => { itemDoms.push( <InventoryItem dragCardID={-1} type="card" card={c} sqlId={c.sqlId} inVehicle={c.inVehicle} itemId={c.itemId} index={i} gridX={c.gridX} gridY={c.gridY} width={c.width} height={c.height} parentId={c.parentId} key={`${groupID}_${c.sqlId}`} layout={layout} /> ) }) return itemDoms } const { id, index, cards, } = props drop(ref) return ( <div ref={ref} className="itemsGrid" > {createCards(cards, id, index)} </div> ) } export default InventoryItemsLayer