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

Update exchange credit widget

Browse Source
This commit is contained in:
Bill 2021-10-07 01:43:01 -04:00
parent df11039759
commit 5b8b576950
3 changed files with 39 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/room-widgets/exchange-credit/exchange-credit-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

7
src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss
View File

@ -1,3 +1,8 @@
.nitro-exchange-credit { .nitro-exchange-credit {
width: 290px;
.exchange-image {
background-image: url('../../../../../assets/images/room-widgets/exchange-credit/exchange-credit-image.png');
width: 103px;
height: 103px;
}
} }

44
src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
View File

@ -2,7 +2,8 @@ import { FC, useCallback, useState } from 'react';
import { LocalizeText, RoomWidgetCreditFurniRedeemMessage, RoomWidgetUpdateCreditFurniEvent } from '../../../../../api'; import { LocalizeText, RoomWidgetCreditFurniRedeemMessage, RoomWidgetUpdateCreditFurniEvent } from '../../../../../api';
import { BatchUpdates } from '../../../../../hooks'; import { BatchUpdates } from '../../../../../hooks';
import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base'; import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
import { NitroLayoutBase } from '../../../../../layout/base';
import { useRoomContext } from '../../../context/RoomContext'; import { useRoomContext } from '../../../context/RoomContext';
export const FurnitureExchangeCreditView: FC<{}> = props => export const FurnitureExchangeCreditView: FC<{}> = props =>
@ -19,35 +20,46 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
CreateEventDispatcherHook(RoomWidgetUpdateCreditFurniEvent.CREDIT_FURNI_UPDATE, eventDispatcher, onRoomWidgetUpdateCreditFurniEvent); CreateEventDispatcherHook(RoomWidgetUpdateCreditFurniEvent.CREDIT_FURNI_UPDATE, eventDispatcher, onRoomWidgetUpdateCreditFurniEvent);
const processAction = useCallback((type: string, value: string = null) => const close = useCallback(() =>
{ {
switch(type)
{
case 'close':
BatchUpdates(() => BatchUpdates(() =>
{ {
setObjectId(-1); setObjectId(-1);
setValue(0); setValue(0);
}); });
return; }, []);
case 'redeem':
const redeem = useCallback(() =>
{
widgetHandler.processWidgetMessage(new RoomWidgetCreditFurniRedeemMessage(RoomWidgetCreditFurniRedeemMessage.REDEEM, objectId)); widgetHandler.processWidgetMessage(new RoomWidgetCreditFurniRedeemMessage(RoomWidgetCreditFurniRedeemMessage.REDEEM, objectId));
processAction('close'); close();
return; }, [ widgetHandler, objectId, close ]);
}
}, [ widgetHandler, objectId ]);
if(objectId === -1) return null; if(objectId === -1) return null;
return ( return (
<NitroCardView className="nitro-exchange-credit" simple={ true }> <NitroCardView className="nitro-exchange-credit" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ event => processAction('close') } /> <NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ close } />
<NitroCardContentView> <NitroCardContentView>
<div className="text-black mb-2"> <NitroLayoutGrid>
{ LocalizeText('widgets.furniture.credit.redeem.value', [ 'value' ], [ value.toString() ]) } <NitroLayoutGridColumn className="justify-content-center align-items-center" overflow="hidden" size={ 4 }>
</div> <NitroLayoutBase className="exchange-image" />
<button className="btn btn-success w-100" onClick={ event => processAction('redeem') }>{ LocalizeText('catalog.redeem.dialog.button.exchange') }</button> </NitroLayoutGridColumn>
<NitroLayoutGridColumn className="justify-content-between" overflow="hidden" size={ 8 }>
<NitroLayoutFlexColumn gap={ 1 } overflow="auto">
<NitroLayoutBase className="text-black fw-bold">
{ LocalizeText('creditfurni.description', [ 'credits' ], [ value.toString() ]) }
</NitroLayoutBase>
<NitroLayoutBase className="text-black">
{ LocalizeText('creditfurni.prompt') }
</NitroLayoutBase>
</NitroLayoutFlexColumn>
<NitroLayoutButton variant="success" onClick={ redeem }>
{ LocalizeText('catalog.redeem.dialog.button.exchange') }
</NitroLayoutButton>
</NitroLayoutGridColumn>
</NitroLayoutGrid>
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>
); );