nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 22:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Reset trade quantity, fix template

Browse Source
This commit is contained in:
Bill 2022-08-14 00:28:02 -04:00
parent e4da1d5535
commit c0326644ad
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/inventory/views/furniture/InventoryTradeView.tsx
View File

@ -12,7 +12,6 @@ interface InventoryTradeViewProps
} }
const MAX_ITEMS_TO_TRADE: number = 9; const MAX_ITEMS_TO_TRADE: number = 9;
const MIN_VALUE: number = 1;
export const InventoryTradeView: FC<InventoryTradeViewProps> = props => export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
{ {
@ -22,7 +21,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
const [ otherGroupItem, setOtherGroupItem ] = useState<GroupItem>(null); const [ otherGroupItem, setOtherGroupItem ] = useState<GroupItem>(null);
const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>(null); const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>(null);
const [ countdownTick, setCountdownTick ] = useState(3); const [ countdownTick, setCountdownTick ] = useState(3);
const [ quantity, setQuantity ] = useState<number | string>(1); const [ quantity, setQuantity ] = useState<number>(1);
const { ownUser = null, otherUser = null, groupItems = [], tradeState = TradeState.TRADING_STATE_READY, progressTrade = null, removeItem = null, setTradeState = null } = useInventoryTrade(); const { ownUser = null, otherUser = null, groupItems = [], tradeState = TradeState.TRADING_STATE_READY, progressTrade = null, removeItem = null, setTradeState = null } = useInventoryTrade();
const { simpleAlert = null } = useNotification(); const { simpleAlert = null } = useNotification();
@ -120,11 +119,11 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
return <FontAwesomeIcon icon={ iconName } className={ 'text-' + textColor } /> return <FontAwesomeIcon icon={ iconName } className={ 'text-' + textColor } />
} }
const updateQuantity = (value: number | string, totalItemCount: number) => const updateQuantity = (value: number, totalItemCount: number) =>
{ {
if(isNaN(Number(value)) || Number(value) < 0 || value == '') value = 1; if(isNaN(Number(value)) || Number(value) < 0 || !value) value = 1;
value = Math.max(Number(value), MIN_VALUE); value = Math.max(Number(value), 1);
value = Math.min(Number(value), totalItemCount); value = Math.min(Number(value), totalItemCount);
if(value === quantity) return; if(value === quantity) return;
@ -134,10 +133,15 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
const changeCount = (totalItemCount: number) => const changeCount = (totalItemCount: number) =>
{ {
updateQuantity(Number(quantity), totalItemCount); updateQuantity(quantity, totalItemCount);
attemptItemOffer(Number(quantity)); attemptItemOffer(quantity);
} }
useEffect(() =>
{
setQuantity(1);
}, [ groupItem ]);
useEffect(() => useEffect(() =>
{ {
if(tradeState !== TradeState.TRADING_STATE_COUNTDOWN) return; if(tradeState !== TradeState.TRADING_STATE_COUNTDOWN) return;
@ -192,7 +196,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
<Column gap={ 1 } alignItems="end"> <Column gap={ 1 } alignItems="end">
<Grid overflow="hidden"> <Grid overflow="hidden">
<Column size={ 6 } overflow="hidden"> <Column size={ 6 } overflow="hidden">
<input type="number" className="form-control form-control-sm quantity-input" placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } disabled={ !groupItem } value={ quantity } onChange={ event => setQuantity(event.target.value == '' || isNaN(event.target.valueAsNumber) || event.target.valueAsNumber < 0 ? '' : event.target.valueAsNumber) } /> <input type="number" className="form-control form-control-sm quantity-input" placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } disabled={ !groupItem } value={ quantity } onChange={ event => setQuantity(event.target.valueAsNumber) } />
</Column> </Column>
<Column size={ 6 } overflow="hidden"> <Column size={ 6 } overflow="hidden">
<Button variant="secondary" disabled={ !groupItem } onClick={ event => changeCount(groupItem.getUnlockedCount()) }>{ LocalizeText('inventory.trading.areoffering') }</Button> <Button variant="secondary" disabled={ !groupItem } onClick={ event => changeCount(groupItem.getUnlockedCount()) }>{ LocalizeText('inventory.trading.areoffering') }</Button>
@ -219,11 +223,11 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
if(!item) return <LayoutGridItem key={ i } />; if(!item) return <LayoutGridItem key={ i } />;
return ( return (
<LayoutGridItem key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) } onDoubleClick={ event => removeItem(item)> <LayoutGridItem key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) } onDoubleClick={ event => removeItem(item) }>
{ (ownGroupItem === item) && { (ownGroupItem === item) &&
<Button position="absolute" variant="danger" className="trade-button bottom-1 start-1" onClick={ event => removeItem(item) }> <Button position="absolute" variant="danger" className="trade-button bottom-1 start-1" onClick={ event => removeItem(item) }>
<FontAwesomeIcon icon="chevron-left" /> <FontAwesomeIcon icon="chevron-left" />
</Button> } </Button> }
</LayoutGridItem> </LayoutGridItem>
); );
}) } }) }