mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 06:40:50 +01:00
Merge remote-tracking branch 'origin/navigator-packets' into @update/room-widgets
This commit is contained in:
Bill
commit
93b86fa4e0
@ -1,4 +1,16 @@
|
||||
import { FC, useState } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { ColorConverter } from '@nitrots/nitro-renderer';
|
||||
import { FC, useMemo, useState } from 'react';
|
||||
import { IPurchasableOffer } from '../../../../../api';
|
||||
import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, Text } from '../../../../../common';
|
||||
import { useCatalog } from '../../../../../hooks';
|
||||
import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
|
||||
import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
|
||||
import { CatalogLimitedItemWidgetView } from '../widgets/CatalogLimitedItemWidgetView';
|
||||
import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
|
||||
import { CatalogSpinnerWidgetView } from '../widgets/CatalogSpinnerWidgetView';
|
||||
import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';
|
||||
import { CatalogViewProductWidgetView } from '../widgets/CatalogViewProductWidgetView';
|
||||
import { CatalogLayoutProps } from './CatalogLayout.types';
|
||||
|
||||
export interface CatalogLayoutColorGroupViewProps extends CatalogLayoutProps
|
||||
@ -10,79 +22,155 @@ export const CatalogLayoutColorGroupingView : FC<CatalogLayoutColorGroupViewProp
|
||||
{
|
||||
const { page = null } = props;
|
||||
const [ colorableItems, setColorableItems ] = useState<Map<string, number[]>>(new Map<string, number[]>());
|
||||
const { currentOffer = null, setCurrentOffer = null } = useCatalog();
|
||||
const [ colorsShowing, setColorsShowing ] = useState<boolean>(false);
|
||||
|
||||
// const offers = useMemo(() =>
|
||||
// {
|
||||
// const offers: CatalogPageMessageOfferData[] = [];
|
||||
// const addedColorableItems = new Map<string, boolean>();
|
||||
|
||||
// pageParser.offers.forEach(offer =>
|
||||
// {
|
||||
// const product = offer.products[0];
|
||||
// if(!product) return;
|
||||
|
||||
// let furniData: IFurnitureData = null;
|
||||
|
||||
// if(product.productType === ProductTypeEnum.FLOOR)
|
||||
// {
|
||||
// furniData = GetSessionDataManager().getFloorItemData(product.furniClassId);
|
||||
// }
|
||||
// else if(product.productType === ProductTypeEnum.WALL)
|
||||
// {
|
||||
// furniData = GetSessionDataManager().getWallItemData(product.furniClassId);
|
||||
// }
|
||||
|
||||
// if(((!(furniData)) || ((furniData.fullName.indexOf('*') === -1))))
|
||||
// {
|
||||
// offers.push(offer);
|
||||
// }
|
||||
// else
|
||||
// {
|
||||
// const name = furniData.fullName.split('*')[0];
|
||||
// const colorIndex = parseInt(furniData.fullName.split('*')[1]);
|
||||
|
||||
// if(!colorableItems[name])
|
||||
// {
|
||||
// colorableItems[name] = [];
|
||||
// }
|
||||
|
||||
// let selectedColor = 0;
|
||||
// if(furniData.colors)
|
||||
// {
|
||||
// for(let color of furniData.colors)
|
||||
// {
|
||||
// if(color !== 0xFFFFFF)
|
||||
// {
|
||||
// selectedColor = color;
|
||||
// }
|
||||
// }
|
||||
// if(colorableItems[name].indexOf(selectedColor) === -1)
|
||||
// {
|
||||
// colorableItems[name][colorIndex] = selectedColor;
|
||||
// }
|
||||
// }
|
||||
|
||||
// if(!addedColorableItems.has(name))
|
||||
// {
|
||||
// offers.push(offer);
|
||||
// addedColorableItems.set(name, true);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// console.log(colorableItems);
|
||||
// return offers;
|
||||
// }, [colorableItems, pageParser.offers]);
|
||||
|
||||
return null;
|
||||
|
||||
// return (
|
||||
// <NitroLayoutGrid>
|
||||
// <NitroLayoutGridColumn size={ 7 }>
|
||||
// <CatalogPageOffersView offers={ offers } />
|
||||
// </NitroLayoutGridColumn>
|
||||
// <NitroLayoutGridColumn size={ 5 }>
|
||||
|
||||
// </NitroLayoutGridColumn>
|
||||
// </NitroLayoutGrid>
|
||||
// );
|
||||
const sortByColorIndex = (a: IPurchasableOffer, b: IPurchasableOffer) =>
|
||||
{
|
||||
if (((!(a.product.furnitureData.colorIndex)) || (!(b.product.furnitureData.colorIndex))))
|
||||
{
|
||||
return 1;
|
||||
}
|
||||
if (a.product.furnitureData.colorIndex > b.product.furnitureData.colorIndex)
|
||||
{
|
||||
return 1;
|
||||
}
|
||||
if (a == b)
|
||||
{
|
||||
return 0;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
const sortyByFurnitureClassName = (a: IPurchasableOffer, b: IPurchasableOffer) =>
|
||||
{
|
||||
if (a.product.furnitureData.className > b.product.furnitureData.className)
|
||||
{
|
||||
return 1;
|
||||
}
|
||||
if (a == b)
|
||||
{
|
||||
return 0;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
const selectOffer = (offer: IPurchasableOffer) =>
|
||||
{
|
||||
offer.activate();
|
||||
setCurrentOffer(offer);
|
||||
}
|
||||
|
||||
const selectColor = (colorIndex: number, productName: string) =>
|
||||
{
|
||||
const fullName = `${ productName }*${ colorIndex }`;
|
||||
const index = page.offers.findIndex(offer => offer.product.furnitureData.fullName === fullName);
|
||||
if (index > -1)
|
||||
{
|
||||
selectOffer(page.offers[index]);
|
||||
}
|
||||
}
|
||||
|
||||
const offers = useMemo(() =>
|
||||
{
|
||||
const offers: IPurchasableOffer[] = [];
|
||||
const addedColorableItems = new Map<string, boolean>();
|
||||
const updatedColorableItems = new Map<string, number[]>();
|
||||
|
||||
page.offers.sort(sortByColorIndex);
|
||||
|
||||
let selectedColor = 0;
|
||||
|
||||
page.offers.forEach(offer =>
|
||||
{
|
||||
if(!offer.product) return;
|
||||
|
||||
const furniData = offer.product.furnitureData;
|
||||
|
||||
if(((!(furniData)) || (!furniData.hasIndexedColor)))
|
||||
{
|
||||
offers.push(offer);
|
||||
}
|
||||
else
|
||||
{
|
||||
const name = furniData.className;
|
||||
const colorIndex = furniData.colorIndex;
|
||||
|
||||
if(!updatedColorableItems.has(name))
|
||||
{
|
||||
updatedColorableItems.set(name, []);
|
||||
}
|
||||
|
||||
if(furniData.colors)
|
||||
{
|
||||
for(let color of furniData.colors)
|
||||
{
|
||||
if(color !== 0xFFFFFF) // for some reason we hate the color white
|
||||
{
|
||||
selectedColor = color;
|
||||
}
|
||||
}
|
||||
|
||||
if(updatedColorableItems.get(name).indexOf(selectedColor) === -1)
|
||||
{
|
||||
updatedColorableItems.get(name)[colorIndex] = selectedColor;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(!addedColorableItems.has(name))
|
||||
{
|
||||
offers.push(offer);
|
||||
addedColorableItems.set(name, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
offers.sort(sortyByFurnitureClassName);
|
||||
setColorableItems(updatedColorableItems);
|
||||
return offers;
|
||||
}, [ page.offers ]);
|
||||
|
||||
return (
|
||||
<Grid>
|
||||
<Column size={ 7 } overflow="hidden">
|
||||
<AutoGrid columnCount={ 5 }>
|
||||
{ (!colorsShowing || !currentOffer || !colorableItems.has(currentOffer.product.furnitureData.className)) &&
|
||||
offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.product.furnitureData.hasIndexedColor ? currentOffer.product.furnitureData.className === offer.product.furnitureData.className : currentOffer.offerId === offer.offerId)) } offer={ offer } selectOffer={ selectOffer }/>)
|
||||
}
|
||||
{ (colorsShowing && currentOffer && colorableItems.has(currentOffer.product.furnitureData.className)) &&
|
||||
colorableItems.get(currentOffer.product.furnitureData.className).map((color, index) => <LayoutGridItem itemHighlight key={ index } itemActive={ (currentOffer.product.furnitureData.colorIndex === index) } itemColor={ ColorConverter.int2rgb(color) } className="clear-bg" onClick={ event => selectColor(index, currentOffer.product.furnitureData.className) } />)
|
||||
}
|
||||
</AutoGrid>
|
||||
</Column>
|
||||
<Column center={ !currentOffer } size={ 5 } overflow="hidden">
|
||||
{ !currentOffer &&
|
||||
<>
|
||||
{ !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
|
||||
<Text center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
|
||||
</> }
|
||||
{ currentOffer &&
|
||||
<>
|
||||
<Base position="relative" overflow="hidden">
|
||||
<CatalogViewProductWidgetView />
|
||||
<CatalogLimitedItemWidgetView fullWidth position="absolute" className="top-1" />
|
||||
<CatalogAddOnBadgeWidgetView position="absolute" className="bg-muted rounded bottom-1 end-1" />
|
||||
{ currentOffer.product.furnitureData.hasIndexedColor &&
|
||||
<Button position="absolute" className="bottom-1 start-1" onClick={ event =>setColorsShowing(prev => !prev) }>
|
||||
<FontAwesomeIcon icon="fill-drip" />
|
||||
</Button> }
|
||||
</Base>
|
||||
<Column grow gap={ 1 }>
|
||||
<Text grow truncate>{ currentOffer.localizationName }</Text>
|
||||
<Flex justifyContent="between">
|
||||
<Column gap={ 1 }>
|
||||
<CatalogSpinnerWidgetView />
|
||||
</Column>
|
||||
<CatalogTotalPriceWidget justifyContent="end" alignItems="end" />
|
||||
</Flex>
|
||||
<CatalogPurchaseWidgetView />
|
||||
</Column>
|
||||
</> }
|
||||
</Column>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { ICatalogPage } from '../../../../../api';
|
||||
import { CatalogLayoutProps } from './CatalogLayout.types';
|
||||
import { CatalogLayoutBadgeDisplayView } from './CatalogLayoutBadgeDisplayView';
|
||||
import { CatalogLayoutColorGroupingView } from './CatalogLayoutColorGroupingView';
|
||||
import { CatalogLayoutDefaultView } from './CatalogLayoutDefaultView';
|
||||
import { CatalogLayouGuildCustomFurniView } from './CatalogLayoutGuildCustomFurniView';
|
||||
import { CatalogLayouGuildForumView } from './CatalogLayoutGuildForumView';
|
||||
@ -66,8 +67,8 @@ export const GetCatalogLayout = (page: ICatalogPage, hideNavigation: () => void)
|
||||
return <CatalogLayoutBadgeDisplayView { ...layoutProps } />;
|
||||
case 'roomads':
|
||||
return <CatalogLayoutRoomAdsView { ...layoutProps } />;
|
||||
//case 'default_3x3_color_grouping':
|
||||
//return <CatalogLayoutColorGroupingView { ...layoutProps } />;
|
||||
case 'default_3x3_color_grouping':
|
||||
return <CatalogLayoutColorGroupingView { ...layoutProps } />;
|
||||
case 'bots':
|
||||
case 'default_3x3':
|
||||
default:
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer/src/core/events/NitroEvent';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class HelpNameChangeEvent extends NitroEvent
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user