nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-19 05:46:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

added color_grouping catalog layout

Browse Source
This commit is contained in:
dank074 2022-07-14 15:44:45 -05:00
parent 5412f3d3b3
commit 4e94e5b111
3 changed files with 157 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/navigator/index.ts
View File

@ -7,7 +7,6 @@ export * from './IRoomModel';
export * from './IRoomModerationSettings'; export * from './IRoomModerationSettings';
export * from './NavigatorSearchResultViewDisplayMode'; export * from './NavigatorSearchResultViewDisplayMode';
export * from './RoomInfoData'; export * from './RoomInfoData';
export * from './RoomSettingsData';
export * from './RoomSettingsUtils'; export * from './RoomSettingsUtils';
export * from './SearchFilterOptions'; export * from './SearchFilterOptions';
export * from './TryVisitRoom'; export * from './TryVisitRoom';

236
src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx
View File

@ -1,4 +1,16 @@
import { FC, useState } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ColorConverter, IFurnitureData } 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'; import { CatalogLayoutProps } from './CatalogLayout.types';
export interface CatalogLayoutColorGroupViewProps extends CatalogLayoutProps export interface CatalogLayoutColorGroupViewProps extends CatalogLayoutProps
@ -10,79 +22,153 @@ export const CatalogLayoutColorGroupingView : FC<CatalogLayoutColorGroupViewProp
{ {
const { page = null } = props; const { page = null } = props;
const [ colorableItems, setColorableItems ] = useState<Map<string, number[]>>(new Map<string, number[]>()); 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 sortByColorIndex = (a: IPurchasableOffer, b: IPurchasableOffer) =>
// { {
// const offers: CatalogPageMessageOfferData[] = []; if (((!(a.product.furnitureData.colorIndex)) || (!(b.product.furnitureData.colorIndex))))
// const addedColorableItems = new Map<string, boolean>(); {
return 1;
// pageParser.offers.forEach(offer => }
// { if (a.product.furnitureData.colorIndex > b.product.furnitureData.colorIndex)
// const product = offer.products[0]; {
// if(!product) return; return 1;
}
// let furniData: IFurnitureData = null; if (a == b)
{
// if(product.productType === ProductTypeEnum.FLOOR) return 0;
// { }
// furniData = GetSessionDataManager().getFloorItemData(product.furniClassId); return -1;
// } }
// else if(product.productType === ProductTypeEnum.WALL)
// { const sortyByFurnitureClassName = (a: IPurchasableOffer, b: IPurchasableOffer) =>
// furniData = GetSessionDataManager().getWallItemData(product.furniClassId); {
// } if (a.product.furnitureData.className > b.product.furnitureData.className)
{
// if(((!(furniData)) || ((furniData.fullName.indexOf('*') === -1)))) return 1;
// { }
// offers.push(offer); if (a == b)
// } {
// else return 0;
// { }
// const name = furniData.fullName.split('*')[0]; return -1;
// const colorIndex = parseInt(furniData.fullName.split('*')[1]); }
// if(!colorableItems[name]) const selectOffer = (offer: IPurchasableOffer) =>
// { {
// colorableItems[name] = []; offer.activate();
// } setCurrentOffer(offer);
}
// let selectedColor = 0;
// if(furniData.colors) const selectColor = (colorIndex: number, productName: string) =>
// { {
// for(let color of furniData.colors) const fullName = `${ productName }*${ colorIndex }`;
// { const index = page.offers.findIndex(offer => offer.product.furnitureData.fullName === fullName);
// if(color !== 0xFFFFFF) if (index > -1)
// { {
// selectedColor = color; selectOffer(page.offers[index]);
// } }
// } }
// if(colorableItems[name].indexOf(selectedColor) === -1)
// { const offers = useMemo(() =>
// colorableItems[name][colorIndex] = selectedColor; {
// } const offers: IPurchasableOffer[] = [];
// } const addedColorableItems = new Map<string, boolean>();
// if(!addedColorableItems.has(name)) page.offers.sort(sortByColorIndex);
// {
// offers.push(offer); let selectedColor = 0;
// addedColorableItems.set(name, true);
// } page.offers.forEach(offer =>
// } {
// }); if(!offer.product) return;
// console.log(colorableItems);
// return offers; let furniData: IFurnitureData = offer.product.furnitureData;
// }, [colorableItems, pageParser.offers]);
if(((!(furniData)) || (!furniData.hasIndexedColor)))
return null; {
offers.push(offer);
// return ( }
// <NitroLayoutGrid> else
// <NitroLayoutGridColumn size={ 7 }> {
// <CatalogPageOffersView offers={ offers } /> const name = furniData.fullName.split('*')[0];
// </NitroLayoutGridColumn> const colorIndex = parseInt(furniData.fullName.split('*')[1]);
// <NitroLayoutGridColumn size={ 5 }>
if(!colorableItems.has(name))
// </NitroLayoutGridColumn> {
// </NitroLayoutGrid> colorableItems.set(name, []);
// ); }
if(furniData.colors)
{
for(let color of furniData.colors)
{
if(color !== 0xFFFFFF)
{
selectedColor = color;
}
}
if(colorableItems.get(name).indexOf(selectedColor) === -1)
{
colorableItems.get(name)[colorIndex] = selectedColor;
}
}
if(!addedColorableItems.has(name))
{
offers.push(offer);
addedColorableItems.set(name, true);
}
}
});
offers.sort(sortyByFurnitureClassName);
return offers;
}, [ colorableItems, 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>
);
} }

5
src/components/catalog/views/page/layout/GetCatalogLayout.tsx
View File

@ -1,6 +1,7 @@
import { ICatalogPage } from '../../../../../api'; import { ICatalogPage } from '../../../../../api';
import { CatalogLayoutProps } from './CatalogLayout.types'; import { CatalogLayoutProps } from './CatalogLayout.types';
import { CatalogLayoutBadgeDisplayView } from './CatalogLayoutBadgeDisplayView'; import { CatalogLayoutBadgeDisplayView } from './CatalogLayoutBadgeDisplayView';
import { CatalogLayoutColorGroupingView } from './CatalogLayoutColorGroupingView';
import { CatalogLayoutDefaultView } from './CatalogLayoutDefaultView'; import { CatalogLayoutDefaultView } from './CatalogLayoutDefaultView';
import { CatalogLayouGuildCustomFurniView } from './CatalogLayoutGuildCustomFurniView'; import { CatalogLayouGuildCustomFurniView } from './CatalogLayoutGuildCustomFurniView';
import { CatalogLayouGuildForumView } from './CatalogLayoutGuildForumView'; import { CatalogLayouGuildForumView } from './CatalogLayoutGuildForumView';
@ -66,8 +67,8 @@ export const GetCatalogLayout = (page: ICatalogPage, hideNavigation: () => void)
return <CatalogLayoutBadgeDisplayView { ...layoutProps } />; return <CatalogLayoutBadgeDisplayView { ...layoutProps } />;
case 'roomads': case 'roomads':
return <CatalogLayoutRoomAdsView { ...layoutProps } />; return <CatalogLayoutRoomAdsView { ...layoutProps } />;
//case 'default_3x3_color_grouping': case 'default_3x3_color_grouping':
//return <CatalogLayoutColorGroupingView { ...layoutProps } />; return <CatalogLayoutColorGroupingView { ...layoutProps } />;
case 'bots': case 'bots':
case 'default_3x3': case 'default_3x3':
default: default: