mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-30 00:50:50 +01:00
Fix calendar
This commit is contained in:
parent
85c344a4f1
commit
9beebe58ba
@ -1,6 +1,7 @@
|
|||||||
import { FC } from 'react';
|
import { FC } from 'react';
|
||||||
import { GetRoomEngine, GetSessionDataManager } from '../../api';
|
import { GetConfiguration, GetRoomEngine, GetSessionDataManager } from '../../api';
|
||||||
import { Base, Column, Flex, LayoutImage } from '../../common';
|
import { Base, Column, Flex, LayoutImage } from '../../common';
|
||||||
|
import { CalendarItem } from './common/CalendarItem';
|
||||||
import { CalendarItemState } from './common/CalendarItemState';
|
import { CalendarItemState } from './common/CalendarItemState';
|
||||||
|
|
||||||
interface CalendarItemViewProps
|
interface CalendarItemViewProps
|
||||||
@ -8,13 +9,13 @@ interface CalendarItemViewProps
|
|||||||
itemId: number;
|
itemId: number;
|
||||||
state: number;
|
state: number;
|
||||||
active?: boolean;
|
active?: boolean;
|
||||||
productName?: string;
|
product?: CalendarItem;
|
||||||
onClick: (itemId: number) => void;
|
onClick: (itemId: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const CalendarItemView: FC<CalendarItemViewProps> = props =>
|
export const CalendarItemView: FC<CalendarItemViewProps> = props =>
|
||||||
{
|
{
|
||||||
const { itemId = -1, state = null, productName = null, active = false, onClick = null } = props;
|
const { itemId = -1, state = null, product = null, active = false, onClick = null } = props;
|
||||||
|
|
||||||
const getFurnitureIcon = (name: string) =>
|
const getFurnitureIcon = (name: string) =>
|
||||||
{
|
{
|
||||||
@ -37,8 +38,8 @@ export const CalendarItemView: FC<CalendarItemViewProps> = props =>
|
|||||||
{ (state === CalendarItemState.STATE_UNLOCKED) &&
|
{ (state === CalendarItemState.STATE_UNLOCKED) &&
|
||||||
<Flex center className="campaign-spritesheet unlocked-bg">
|
<Flex center className="campaign-spritesheet unlocked-bg">
|
||||||
<Flex center className="campaign-spritesheet campaign-opened">
|
<Flex center className="campaign-spritesheet campaign-opened">
|
||||||
{ productName &&
|
{ product &&
|
||||||
<LayoutImage imageUrl={ getFurnitureIcon(productName) } /> }
|
<LayoutImage imageUrl={ product.customImage ? GetConfiguration<string>('image.library.url') + product.customImage : getFurnitureIcon(product.productName) } /> }
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex> }
|
</Flex> }
|
||||||
{ (state !== CalendarItemState.STATE_UNLOCKED) &&
|
{ (state !== CalendarItemState.STATE_UNLOCKED) &&
|
||||||
|
@ -2,13 +2,14 @@ import { FC, useState } from 'react';
|
|||||||
import { GetSessionDataManager, LocalizeText } from '../../api';
|
import { GetSessionDataManager, LocalizeText } from '../../api';
|
||||||
import { Base, Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
|
import { Base, Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
|
||||||
import { CalendarItemView } from './CalendarItemView';
|
import { CalendarItemView } from './CalendarItemView';
|
||||||
|
import { CalendarItem } from './common/CalendarItem';
|
||||||
import { CalendarItemState } from './common/CalendarItemState';
|
import { CalendarItemState } from './common/CalendarItemState';
|
||||||
|
|
||||||
interface CalendarViewProps
|
interface CalendarViewProps
|
||||||
{
|
{
|
||||||
close(): void;
|
close(): void;
|
||||||
openPackage(id: number, asStaff: boolean): void;
|
openPackage(id: number, asStaff: boolean): void;
|
||||||
receivedProducts: Map<number, string>;
|
receivedProducts: Map<number, CalendarItem>;
|
||||||
campaignName: string;
|
campaignName: string;
|
||||||
currentDay: number;
|
currentDay: number;
|
||||||
numDays: number;
|
numDays: number;
|
||||||
@ -128,7 +129,7 @@ export const CalendarView: FC<CalendarViewProps> = props =>
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Column key={ i } overflow="hidden">
|
<Column key={ i } overflow="hidden">
|
||||||
<CalendarItemView itemId={ day } state={ getDayState(day) } active={ (selectedDay === day) } productName={ receivedProducts.has(day) ? receivedProducts.get(day) : null } onClick={ onClickItem } />
|
<CalendarItemView itemId={ day } state={ getDayState(day) } active={ (selectedDay === day) } product={ receivedProducts.has(day) ? receivedProducts.get(day) : null } onClick={ onClickItem } />
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
}) }
|
}) }
|
||||||
|
@ -3,12 +3,13 @@ import { FC, useCallback, useEffect, useState } from 'react';
|
|||||||
import { AddEventLinkTracker, RemoveLinkEventTracker, SendMessageComposer } from '../../api';
|
import { AddEventLinkTracker, RemoveLinkEventTracker, SendMessageComposer } from '../../api';
|
||||||
import { BatchUpdates, UseMessageEventHook } from '../../hooks';
|
import { BatchUpdates, UseMessageEventHook } from '../../hooks';
|
||||||
import { CalendarView } from './CalendarView';
|
import { CalendarView } from './CalendarView';
|
||||||
|
import { CalendarItem } from './common/CalendarItem';
|
||||||
|
|
||||||
export const CampaignView: FC<{}> = props =>
|
export const CampaignView: FC<{}> = props =>
|
||||||
{
|
{
|
||||||
const [ calendarData, setCalendarData ] = useState<CampaignCalendarData>(null);
|
const [ calendarData, setCalendarData ] = useState<CampaignCalendarData>(null);
|
||||||
const [ lastOpenAttempt, setLastOpenAttempt ] = useState<number>(-1);
|
const [ lastOpenAttempt, setLastOpenAttempt ] = useState<number>(-1);
|
||||||
const [ receivedProducts, setReceivedProducts ] = useState<Map<number, string>>(new Map());
|
const [ receivedProducts, setReceivedProducts ] = useState<Map<number, CalendarItem>>(new Map());
|
||||||
const [ isCalendarOpen, setCalendarOpen ] = useState(false);
|
const [ isCalendarOpen, setCalendarOpen ] = useState(false);
|
||||||
|
|
||||||
const onCampaignCalendarDataMessageEvent = useCallback((event: CampaignCalendarDataMessageEvent) =>
|
const onCampaignCalendarDataMessageEvent = useCallback((event: CampaignCalendarDataMessageEvent) =>
|
||||||
@ -44,7 +45,7 @@ export const CampaignView: FC<{}> = props =>
|
|||||||
setReceivedProducts(prev =>
|
setReceivedProducts(prev =>
|
||||||
{
|
{
|
||||||
const copy = new Map(prev);
|
const copy = new Map(prev);
|
||||||
copy.set(lastAttempt, parser.furnitureClassName);
|
copy.set(lastAttempt, new CalendarItem(parser.productName, parser.customImage,parser.furnitureClassName));
|
||||||
|
|
||||||
return copy;
|
return copy;
|
||||||
});
|
});
|
||||||
|
30
src/components/campaign/common/CalendarItem.ts
Normal file
30
src/components/campaign/common/CalendarItem.ts
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { ICalendarItem } from './ICalendarItem';
|
||||||
|
|
||||||
|
export class CalendarItem implements ICalendarItem
|
||||||
|
{
|
||||||
|
private _productName: string;
|
||||||
|
private _customImage: string;
|
||||||
|
private _furnitureClassName: string;
|
||||||
|
|
||||||
|
constructor(productName: string, customImage: string, furnitureClassName: string)
|
||||||
|
{
|
||||||
|
this._productName = productName;
|
||||||
|
this._customImage = customImage;
|
||||||
|
this._furnitureClassName = furnitureClassName;
|
||||||
|
}
|
||||||
|
|
||||||
|
public get productName(): string
|
||||||
|
{
|
||||||
|
return this._productName;
|
||||||
|
}
|
||||||
|
|
||||||
|
public get customImage(): string
|
||||||
|
{
|
||||||
|
return this._customImage;
|
||||||
|
}
|
||||||
|
|
||||||
|
public get furnitureClassName(): string
|
||||||
|
{
|
||||||
|
return this._furnitureClassName;
|
||||||
|
}
|
||||||
|
}
|
6
src/components/campaign/common/ICalendarItem.ts
Normal file
6
src/components/campaign/common/ICalendarItem.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export interface ICalendarItem
|
||||||
|
{
|
||||||
|
readonly productName: string;
|
||||||
|
readonly customImage: string;
|
||||||
|
readonly furnitureClassName: string;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user