diff --git a/src/components/inventory/views/furniture/InventoryTradeView.tsx b/src/components/inventory/views/furniture/InventoryTradeView.tsx index 3de9eef8..9825dc28 100644 --- a/src/components/inventory/views/furniture/InventoryTradeView.tsx +++ b/src/components/inventory/views/furniture/InventoryTradeView.tsx @@ -12,6 +12,7 @@ interface InventoryTradeViewProps } const MAX_ITEMS_TO_TRADE: number = 9; +const MIN_VALUE: number = 1; export const InventoryTradeView: FC = props => { @@ -21,6 +22,7 @@ export const InventoryTradeView: FC = props => const [ otherGroupItem, setOtherGroupItem ] = useState(null); const [ filteredGroupItems, setFilteredGroupItems ] = useState(null); const [ countdownTick, setCountdownTick ] = useState(3); + const [ quantity, setQuantity ] = useState(1); const { ownUser = null, otherUser = null, groupItems = [], tradeState = TradeState.TRADING_STATE_READY, progressTrade = null, removeItem = null, setTradeState = null } = useInventoryTrade(); const { simpleAlert = null } = useNotification(); @@ -118,6 +120,24 @@ export const InventoryTradeView: FC = props => return } + const updateQuantity = (value: number | string, totalItemCount: number) => + { + if(isNaN(Number(value)) || Number(value) < 0 || value == '') value = 1; + + value = Math.max(Number(value), MIN_VALUE); + value = Math.min(Number(value), totalItemCount); + + if(value === quantity) return; + + setQuantity(value); + } + + const changeCount = (totalItemCount: number) => + { + updateQuantity(Number(quantity), totalItemCount); + attemptItemOffer(Number(quantity)); + } + useEffect(() => { if(tradeState !== TradeState.TRADING_STATE_COUNTDOWN) return; @@ -159,18 +179,29 @@ export const InventoryTradeView: FC = props => const count = item.getUnlockedCount(); return ( - (count && setGroupItem(item)) }> + (count && setGroupItem(item)) } onDoubleClick={ event => attemptItemOffer(1) }> { ((count > 0) && (groupItem === item)) && - } + + } ); }) } - - { groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') } - + + + + setQuantity(event.target.value == '' || isNaN(event.target.valueAsNumber) || event.target.valueAsNumber < 0 ? '' : event.target.valueAsNumber) } /> + + + + + + + { groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') } + + @@ -188,7 +219,7 @@ export const InventoryTradeView: FC = props => if(!item) return ; return ( - setOwnGroupItem(item) }> + setOwnGroupItem(item) } onDoubleClick={ event => removeItem(item)> { (ownGroupItem === item) &&