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

Grid updates

Browse Source
This commit is contained in:
Bill 2022-02-16 01:40:54 -05:00
parent 1ff34384e3
commit 88853ada48
27 changed files with 116 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/common/AutoGrid.tsx Normal file
View File

@ -0,0 +1,28 @@
import { CSSProperties, FC, useMemo } from 'react';
import { Grid, GridProps } from './Grid';
export interface AutoGridProps extends GridProps
{
columnMinWidth?: number;
columnMinHeight?: number;
}
export const AutoGrid: FC<AutoGridProps> = props =>
{
const { columnMinWidth = 40, columnMinHeight = 40, columnCount = 0, fullHeight = false, overflow = 'auto', style = {}, ...rest } = props;
const getStyle = useMemo(() =>
{
let newStyle: CSSProperties = {};
newStyle['--nitro-grid-column-min-height'] = (columnMinHeight + 'px');
if(columnCount > 1) newStyle.gridTemplateColumns = `repeat(auto-fill, minmax(${ columnMinWidth }px, 1fr))`;
if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
return newStyle;
}, [ columnMinWidth, columnMinHeight, columnCount, style ]);
return <Grid columnCount={ columnCount } fullHeight={ fullHeight } overflow={ overflow } style={ getStyle } { ...rest } />;
}

26
src/common/Grid.tsx
View File

@ -1,22 +1,20 @@
import { CSSProperties, FC, useMemo } from 'react';
import { FC, useMemo } from 'react';
import { CSSProperties } from 'styled-components';
import { Base, BaseProps } from './Base';
import { GridContextProvider } from './GridContext';
import { SpacingType } from './types';
export interface GridProps extends BaseProps<HTMLDivElement>
{
columnCount?: number;
columnMinWidth?: number;
columnMinHeight?: number;
grow?: boolean;
inline?: boolean;
gap?: SpacingType;
maxContent?: boolean;
columnCount?: number;
}
export const Grid: FC<GridProps> = props =>
{
const { columnCount = 0, columnMinWidth = 40, columnMinHeight = 40, grow = false, fullHeight = undefined, inline = false, gap = 2, maxContent = false, classNames = [], style = {}, ...rest } = props;
const { inline = false, gap = 2, maxContent = false, columnCount = 0, fullHeight = true, classNames = [], style = {}, ...rest } = props;
const getClassNames = useMemo(() =>
{
@ -37,28 +35,18 @@ export const Grid: FC<GridProps> = props =>
{
let newStyle: CSSProperties = {};
if(columnCount)
{
newStyle['--bs-columns'] = columnCount.toString();
}
if(grow && (!columnCount || (columnCount > 1)))
{
newStyle['--nitro-grid-column-min-width'] = (columnMinWidth + 'px');
newStyle['--nitro-grid-column-min-height'] = (columnMinHeight + 'px');
newStyle.gridTemplateColumns = 'repeat(auto-fill, minmax(var(--nitro-grid-column-min-width, 45px), 1fr)';
}
if(columnCount) newStyle['--bs-columns'] = columnCount.toString();
if(maxContent) newStyle.gridTemplateRows = 'max-content';
if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
return newStyle;
}, [ columnCount, columnMinWidth, columnMinHeight, grow, maxContent, style ]);
}, [ columnCount, maxContent, style ]);
return (
<GridContextProvider value={ { isCssGrid: true } }>
<Base classNames={ getClassNames } style={ getStyle } fullHeight={ ((fullHeight !== undefined) ? fullHeight : !grow) } { ...rest } />
<Base fullHeight={ fullHeight } classNames={ getClassNames } style={ getStyle } { ...rest } />
</GridContextProvider>
);
}

2
src/components/achievements/AchievementsView.tsx
View File

@ -229,7 +229,7 @@ export const AchievementsView: FC<{}> = props =>
<NitroCardContentView>
{ !getSelectedCategory &&
<>
<AchievementsCategoryListView categories={ achievementCategories } selectedCategoryCode={ selectedCategoryCode } setSelectedCategoryCode={ setSelectedCategoryCode } overflow="auto" />
<AchievementsCategoryListView categories={ achievementCategories } selectedCategoryCode={ selectedCategoryCode } setSelectedCategoryCode={ setSelectedCategoryCode } />
<Column grow justifyContent="end">
<Base className="progress" position="relative">
<Flex fit center position="absolute" className="text-black">{ LocalizeText('achievements.categories.totalprogress', [ 'progress', 'limit' ], [ getProgress.toString(), getMaxProgress.toString() ]) }</Flex>

10
src/components/achievements/views/achievement-list/AchievementListView.tsx
View File

@ -1,9 +1,9 @@
import { AchievementData } from '@nitrots/nitro-renderer';
import { Dispatch, FC, SetStateAction } from 'react';
import { Grid, GridProps } from '../../../../common/Grid';
import { AutoGrid } from '../../../../common/AutoGrid';
import { AchievementListItemView } from './AchievementListItemView';
export interface AchievementListViewProps extends GridProps
export interface AchievementListViewProps
{
achievements: AchievementData[];
selectedAchievementId: number;
@ -12,15 +12,15 @@ export interface AchievementListViewProps extends GridProps
export const AchievementListView: FC<AchievementListViewProps> = props =>
{
const { achievements = null, selectedAchievementId = 0, setSelectedAchievementId = null, children = null, ...rest } = props;
const { achievements = null, selectedAchievementId = 0, setSelectedAchievementId = null, children = null } = props;
return (
<Grid grow columnCount={ 6 } columnMinWidth={ 50 } columnMinHeight={ 50 } overflow="auto" { ...rest }>
<AutoGrid columnCount={ 6 } columnMinWidth={ 50 } columnMinHeight={ 50 }>
{ achievements && (achievements.length > 0) && achievements.map((achievement, index) =>
{
return <AchievementListItemView key={ index } achievement={ achievement } itemActive={ (selectedAchievementId === achievement.achievementId) } onClick={ event => setSelectedAchievementId(achievement.achievementId) } />;
}) }
{ children }
</Grid>
</AutoGrid>
);
}

10
src/components/achievements/views/category-list/AchievementsCategoryListView.tsx
View File

@ -1,9 +1,9 @@
import { Dispatch, FC, SetStateAction } from 'react';
import { Grid, GridProps } from '../../../../common/Grid';
import { AutoGrid } from '../../../../common/AutoGrid';
import { AchievementCategory } from '../../common/AchievementCategory';
import { AchievementsCategoryListItemView } from './AchievementsCategoryListItemView';
export interface AchievementsCategoryListViewProps extends GridProps
export interface AchievementsCategoryListViewProps
{
categories: AchievementCategory[];
selectedCategoryCode: string;
@ -12,12 +12,12 @@ export interface AchievementsCategoryListViewProps extends GridProps
export const AchievementsCategoryListView: FC<AchievementsCategoryListViewProps> = props =>
{
const { categories = null, selectedCategoryCode = null, setSelectedCategoryCode = null, children = null, ...rest } = props;
const { categories = null, selectedCategoryCode = null, setSelectedCategoryCode = null, children = null } = props;
return (
<Grid grow columnMinWidth={ 90 } columnMinHeight={ 100 } { ...rest }>
<AutoGrid columnMinWidth={ 90 } columnMinHeight={ 100 }>
{ categories && (categories.length > 0) && categories.map((category, index) => <AchievementsCategoryListItemView key={ index } category={ category } itemActive={ (selectedCategoryCode === category.code) } onClick={ event => setSelectedCategoryCode(category.code) } /> ) }
{ children }
</Grid>
</AutoGrid>
);
};

6
src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
View File

@ -1,5 +1,5 @@
import { Dispatch, FC, SetStateAction, useCallback } from 'react';
import { Grid } from '../../../../common/Grid';
import { AutoGrid } from '../../../../common/AutoGrid';
import { AvatarEditorGridPartItem } from '../../common/AvatarEditorGridPartItem';
import { CategoryData } from '../../common/CategoryData';
import { IAvatarEditorCategoryModel } from '../../common/IAvatarEditorCategoryModel';
@ -30,9 +30,9 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
}, [ model, category, setMaxPaletteCount ]);
return (
<Grid grow columnCount={ 3 } columnMinHeight={ 50 } overflow="auto">
<AutoGrid grow columnCount={ 3 } columnMinHeight={ 50 } overflow="auto">
{ (category.parts.length > 0) && category.parts.map((item, index) =>
<AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ event => selectPart(item) } />) }
</Grid>
</AutoGrid>
);
}

6
src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
View File

@ -1,5 +1,5 @@
import { FC, useCallback } from 'react';
import { Grid } from '../../../../common/Grid';
import { AutoGrid } from '../../../../common/AutoGrid';
import { AvatarEditorGridColorItem } from '../../common/AvatarEditorGridColorItem';
import { CategoryData } from '../../common/CategoryData';
import { IAvatarEditorCategoryModel } from '../../common/IAvatarEditorCategoryModel';
@ -27,9 +27,9 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
}, [ model, category, paletteSet, paletteIndex ]);
return (
<Grid grow columnCount={ 4 } columnMinWidth={ 30 } overflow="auto">
<AutoGrid grow columnCount={ 4 } columnMinWidth={ 30 } overflow="auto">
{ (paletteSet.length > 0) && paletteSet.map((item, index) =>
<AvatarEditorPaletteSetItem key={ index } colorItem={ item } onClick={ event => selectColor(item) } />) }
</Grid>
</AutoGrid>
);
}

6
src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
View File

@ -2,7 +2,7 @@ import { IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer } from '@nitr
import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react';
import { Button } from 'react-bootstrap';
import { GetAvatarRenderManager, GetSessionDataManager } from '../../../../api';
import { Grid } from '../../../../common/Grid';
import { AutoGrid } from '../../../../common/AutoGrid';
import { LayoutGridItem } from '../../../../common/layout/LayoutGridItem';
import { SendMessageHook } from '../../../../hooks';
import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
@ -74,8 +74,8 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
}, [ savedFigures, saveFigureAtWardrobeIndex, wearFigureAtIndex ]);
return (
<Grid grow columnCount={ 5 } overflow="auto" columnMinWidth={ 80 } columnMinHeight={ 140 }>
<AutoGrid grow columnCount={ 5 } overflow="auto" columnMinWidth={ 80 } columnMinHeight={ 140 }>
{ figures }
</Grid>
</AutoGrid>
);
}

6
src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx
View File

@ -1,6 +1,6 @@
import { IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { Grid } from '../../../../../common/Grid';
import { AutoGrid } from '../../../../../common/AutoGrid';
import { CameraPictureThumbnail } from '../../../common/CameraPictureThumbnail';
import { CameraWidgetEffectListItemView } from './CameraWidgetEffectListItemView';
@ -18,7 +18,7 @@ export const CameraWidgetEffectListView: FC<CameraWidgetEffectListViewProps> = p
const { myLevel = 0, selectedEffects = [], effects = [], thumbnails = [], processAction = null } = props;
return (
<Grid columnCount={ 2 } overflow="auto" columnMinHeight={ 60 }>
<AutoGrid columnCount={ 2 } columnMinHeight={ 60 }>
{ effects && (effects.length > 0) && effects.map((effect, index) =>
{
const thumbnailUrl = (thumbnails.find(thumbnail => (thumbnail.effectName === effect.name)));
@ -26,6 +26,6 @@ export const CameraWidgetEffectListView: FC<CameraWidgetEffectListViewProps> = p
return <CameraWidgetEffectListItemView key={ index } effect={ effect } thumbnailUrl={ ((thumbnailUrl && thumbnailUrl.thumbnailUrl) || null) } isActive={ isActive } isLocked={ (effect.minLevel > myLevel) } selectEffect={ () => processAction('select_effect', effect.name) } removeEffect={ () => processAction('remove_effect', effect.name) } />
}) }
</Grid>
</AutoGrid>
);
}

2
src/components/catalog/views/navigation/CatalogNavigationView.tsx
View File

@ -21,7 +21,7 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
<>
<CatalogSearchView />
<Column fullHeight className="nitro-catalog-navigation-grid-container p-1" overflow="hidden">
<Grid grow columnCount={ 1 } gap={ 1 } overflow="auto">
<Grid gap={ 1 } columnCount={ 1 } overflow="auto">
{ searchResult && (searchResult.filteredNodes.length > 0) && searchResult.filteredNodes.map((n, index) =>
{
return <CatalogNavigationItemView key={ index } node={ n } />;

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

@ -1,6 +1,7 @@
import { ClubOfferData, GetClubOffersMessageComposer, PurchaseFromCatalogComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { LocalizeText } from '../../../../../api';
import { AutoGrid } from '../../../../../common/AutoGrid';
import { Button } from '../../../../../common/Button';
import { Column } from '../../../../../common/Column';
import { Flex } from '../../../../../common/Flex';
@ -147,7 +148,7 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
return (
<Grid>
<Column fullHeight size={ 7 } overflow="hidden" justifyContent="between">
<Grid grow columnCount={ 1 } className="nitro-catalog-layout-vip-buy-grid" overflow="auto">
<AutoGrid columnCount={ 1 } className="nitro-catalog-layout-vip-buy-grid">
{ clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) =>
{
return (
@ -171,7 +172,7 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
</LayoutGridItem>
);
}) }
</Grid>
</AutoGrid>
<Text center dangerouslySetInnerHTML={{ __html: LocalizeText('catalog.vip.buy.hccenter') }}></Text>
</Column>
<Column size={ 5 } overflow="hidden">

2
src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceOwnItemsView.tsx
View File

@ -106,7 +106,7 @@ export const CatalogLayoutMarketplaceOwnItemsView: FC<CatalogLayoutProps> = prop
<Text truncate shrink fontWeight="bold">
{ LocalizeText('catalog.marketplace.items_found', [ 'count' ], [ offers.length.toString() ]) }
</Text>
<Grid columnCount={ 1 } overflow="auto" className="nitro-catalog-layout-marketplace-grid">
<Grid overflow="auto" className="nitro-catalog-layout-marketplace-grid">
{ (offers.length > 0) && offers.map(offer => <CatalogLayoutMarketplaceItemView key={ offer.offerId } offerData={ offer } type={ OWN_OFFER } onClick={ takeItemBack } />) }
</Grid>
</Column>

2
src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx
View File

@ -163,7 +163,7 @@ export const CatalogLayoutMarketplacePublicItemsView: FC<CatalogLayoutMarketplac
<Text truncate shrink fontWeight="bold">
{ LocalizeText('catalog.marketplace.items_found', [ 'count' ], [ offers.size.toString() ]) }
</Text>
<Grid columnCount={ 1 } className="nitro-catalog-layout-marketplace-grid" overflow="auto">
<Grid className="nitro-catalog-layout-marketplace-grid" overflow="auto">
{
Array.from(offers.values()).map( (entry, index) => <CatalogLayoutMarketplaceItemView key={ index } offerData={ entry } type={ PUBLIC_OFFER } onClick={purchaseItem} />)
}

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

@ -2,6 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ApproveNameMessageComposer, ColorConverter, GetSellablePetPalettesComposer, PurchaseFromCatalogComposer, SellablePetPaletteData } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { LocalizeText } from '../../../../../../api';
import { AutoGrid } from '../../../../../../common/AutoGrid';
import { Base } from '../../../../../../common/Base';
import { Button } from '../../../../../../common/Button';
import { Column } from '../../../../../../common/Column';
@ -218,7 +219,7 @@ export const CatalogLayoutPetView: FC<CatalogLayoutProps> = props =>
return (
<Grid>
<Column size={ 7 } overflow="hidden">
<Grid grow columnCount={ 5 } overflow="auto">
<AutoGrid columnCount={ 5 }>
{ !colorsShowing && (sellablePalettes.length > 0) && sellablePalettes.map((palette, index) =>
{
return (
@ -228,7 +229,7 @@ export const CatalogLayoutPetView: FC<CatalogLayoutProps> = props =>
);
})}
{ colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) => <LayoutGridItem key={ index } itemActive={ (selectedColorIndex === index) } itemColor={ ColorConverter.int2rgb(colorSet[0]) } onClick={ event => setSelectedColorIndex(index) } />) }
</Grid>
</AutoGrid>
</Column>
<Column center={ !currentOffer } size={ 5 } overflow="hidden">
{ !currentOffer &&

2
src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx
View File

@ -45,7 +45,7 @@ export const CatalogLayoutVipGiftsView: FC<CatalogLayoutProps> = props =>
return (
<>
<Text truncate shrink fontWeight="bold">{ giftsAvailable() }</Text>
<Grid columnCount={ 1 } className="nitro-catalog-layout-vip-gifts-grid" overflow="auto">
<Grid className="nitro-catalog-layout-vip-gifts-grid" overflow="auto">
{ (clubGifts.offers.length > 0) && clubGifts.offers.map(offer => <VipGiftItem key={ offer.offerId } offer={ offer } isAvailable={ (clubGifts.getOfferExtraData(offer.offerId).isSelectable && (clubGifts.giftsAvailable > 0)) } onSelect={ selectGift }/>) }
</Grid>
</>

8
src/components/catalog/views/page/widgets/CatalogBadgeSelectorWidgetView.tsx
View File

@ -1,6 +1,6 @@
import { StringDataType } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { Grid, GridProps } from '../../../../../common/Grid';
import { AutoGrid, AutoGridProps } from '../../../../../common/AutoGrid';
import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem';
import { InventoryBadgesUpdatedEvent } from '../../../../../events';
import { InventoryBadgesRequestEvent } from '../../../../../events/inventory/InventoryBadgesRequestEvent';
@ -10,7 +10,7 @@ import { useCatalogContext } from '../../../CatalogContext';
const EXCLUDED_BADGE_CODES: string[] = [];
interface CatalogBadgeSelectorWidgetViewProps extends GridProps
interface CatalogBadgeSelectorWidgetViewProps extends AutoGridProps
{
}
@ -59,7 +59,7 @@ export const CatalogBadgeSelectorWidgetView: FC<CatalogBadgeSelectorWidgetViewPr
}, []);
return (
<Grid grow={ grow } columnCount={ columnCount } overflow={ overflow } { ...rest }>
<AutoGrid grow={ grow } columnCount={ columnCount } overflow={ overflow } { ...rest }>
{ badges && (badges.length > 0) && badges.map(code =>
{
return (
@ -68,6 +68,6 @@ export const CatalogBadgeSelectorWidgetView: FC<CatalogBadgeSelectorWidgetViewPr
</LayoutGridItem>
);
}) }
</Grid>
</AutoGrid>
);
}

8
src/components/catalog/views/page/widgets/CatalogBundleGridWidgetView.tsx
View File

@ -1,9 +1,9 @@
import { FC } from 'react';
import { Grid, GridProps } from '../../../../../common/Grid';
import { AutoGrid, AutoGridProps } from '../../../../../common/AutoGrid';
import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem';
import { useCatalogContext } from '../../../CatalogContext';
interface CatalogBundleGridWidgetViewProps extends GridProps
interface CatalogBundleGridWidgetViewProps extends AutoGridProps
{
}
@ -16,9 +16,9 @@ export const CatalogBundleGridWidgetView: FC<CatalogBundleGridWidgetViewProps> =
if(!currentOffer) return null;
return (
<Grid grow columnCount={ 5 } overflow="auto" { ...rest }>
<AutoGrid grow columnCount={ 5 } overflow="auto" { ...rest }>
{ currentOffer.products && (currentOffer.products.length > 0) && currentOffer.products.map((product, index) => <LayoutGridItem key={ index } itemImage={ product.getIconUrl() } itemCount={ product.productCount } />) }
{ children }
</Grid>
</AutoGrid>
);
}

10
src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
View File

@ -1,5 +1,5 @@
import { FC } from 'react';
import { Grid, GridProps } from '../../../../../common/Grid';
import { AutoGrid, AutoGridProps } from '../../../../../common/AutoGrid';
import { CatalogSetExtraPurchaseParameterEvent } from '../../../../../events';
import { dispatchUiEvent } from '../../../../../hooks';
import { useCatalogContext } from '../../../CatalogContext';
@ -7,14 +7,14 @@ import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
interface CatalogItemGridWidgetViewProps extends GridProps
interface CatalogItemGridWidgetViewProps extends AutoGridProps
{
}
export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = props =>
{
const { children = null, ...rest } = props;
const { columnCount = 5, children = null, ...rest } = props;
const { currentOffer = null, setCurrentOffer = null, currentPage = null } = useCatalogContext();
if(!currentPage) return null;
@ -30,12 +30,12 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
}
return (
<Grid grow columnCount={ 5 } overflow="auto" { ...rest }>
<AutoGrid columnCount={ columnCount } { ...rest }>
{ currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) =>
{
return <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) } offer={ offer } onClick={ event => selectOffer(offer) } />;
}) }
{ children }
</Grid>
</AutoGrid>
);
}

10
src/components/catalog/views/page/widgets/CatalogSpacesWidgetView.tsx
View File

@ -1,8 +1,8 @@
import { FC, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../../api';
import { AutoGrid, AutoGridProps } from '../../../../../common/AutoGrid';
import { Button } from '../../../../../common/Button';
import { ButtonGroup } from '../../../../../common/ButtonGroup';
import { Grid, GridProps } from '../../../../../common/Grid';
import { BatchUpdates } from '../../../../../hooks';
import { useCatalogContext } from '../../../CatalogContext';
import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
@ -10,7 +10,7 @@ import { Offer } from '../../../common/Offer';
import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
interface CatalogSpacesWidgetViewProps extends GridProps
interface CatalogSpacesWidgetViewProps extends AutoGridProps
{
}
@ -19,7 +19,7 @@ const SPACES_GROUP_NAMES = [ 'floors', 'walls', 'views' ];
export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =>
{
const { children = null, ...rest } = props;
const { columnCount = 5, children = null, ...rest } = props;
const [ groupedOffers, setGroupedOffers ] = useState<IPurchasableOffer[][]>(null);
const [ selectedGroupIndex, setSelectedGroupIndex ] = useState(-1);
const [ selectedOfferForGroup, setSelectedOfferForGroup ] = useState<IPurchasableOffer[]>(null);
@ -93,7 +93,7 @@ export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =
<ButtonGroup>
{ SPACES_GROUP_NAMES.map((name, index) => <Button key={ index } active={ (selectedGroupIndex === index) } onClick={ event => setSelectedGroupIndex(index) }>{ LocalizeText(`catalog.spaces.tab.${ name }`) }</Button>) }
</ButtonGroup>
<Grid grow columnCount={ 5 } overflow="auto" { ...rest }>
<AutoGrid columnCount={ columnCount } { ...rest }>
{ offers && (offers.length > 0) && offers.map((offer, index) =>
{
const setSelectedOffer = () =>
@ -111,7 +111,7 @@ export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =
return <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer === offer)) } offer={ offer } onClick={ setSelectedOffer } />;
}) }
{ children }
</Grid>
</AutoGrid>
</>
);
}

6
src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx
View File

@ -1,8 +1,8 @@
import { Vector3d } from '@nitrots/nitro-renderer';
import { FC, useEffect } from 'react';
import { GetAvatarRenderManager, GetSessionDataManager } from '../../../../../api';
import { AutoGrid } from '../../../../../common/AutoGrid';
import { Column } from '../../../../../common/Column';
import { Grid } from '../../../../../common/Grid';
import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem';
import { RoomPreviewerView } from '../../../../../views/shared/room-previewer/RoomPreviewerView';
import { useCatalogContext } from '../../../CatalogContext';
@ -92,12 +92,12 @@ export const CatalogViewProductWidgetView: FC<{}> = props =>
{
return (
<Column fit overflow="hidden" className="bg-muted p-2 rounded">
<Grid fullWidth grow columnCount={ 4 } overflow="auto" className="nitro-catalog-layout-bundle-grid">
<AutoGrid fullWidth grow columnCount={ 4 } overflow="auto" className="nitro-catalog-layout-bundle-grid">
{ (currentOffer.products.length > 0) && currentOffer.products.map((product, index) =>
{
return <LayoutGridItem key={ index } itemImage={ product.getIconUrl(currentOffer) } itemCount={ product.productCount } />;
}) }
</Grid>
</AutoGrid>
</Column>
);
}

1
src/components/inventory/InventoryView.scss
View File

@ -12,5 +12,6 @@
min-height: 0;
font-size: 8px;
padding: 1px 2px;
z-index: 5;
}
}

9
src/components/inventory/views/badge/InventoryBadgeView.tsx
View File

@ -1,6 +1,7 @@
import { RequestBadgesComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect } from 'react';
import { LocalizeBadgeName, LocalizeText } from '../../../../api';
import { AutoGrid } from '../../../../common/AutoGrid';
import { Button } from '../../../../common/Button';
import { Column } from '../../../../common/Column';
import { Flex } from '../../../../common/Flex';
@ -77,21 +78,21 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
return (
<Grid>
<Column size={ 7 } overflow="hidden">
<Grid grow columnCount={ 5 } overflow="auto">
<AutoGrid columnCount={ 5 }>
{ badges && (badges.length > 0) && badges.map((code, index) =>
{
if(activeBadges.indexOf(code) >= 0) return null;
return <InventoryBadgeItemView key={ code } badgeCode={ code } />
}) }
</Grid>
</AutoGrid>
</Column>
<Column className="justify-content-between" size={ 5 } overflow="auto">
<Column overflow="hidden" gap={ 2 }>
<Text>{ LocalizeText('inventory.badges.activebadges') }</Text>
<Grid grow columnCount={ 3 } overflow="auto">
<AutoGrid columnCount={ 3 }>
{ activeBadges && (activeBadges.length > 0) && activeBadges.map((code, index) => <InventoryBadgeItemView key={ code } badgeCode={ code } />) }
</Grid>
</AutoGrid>
</Column>
{ badge && (badge.length > 0) &&
<Column grow justifyContent="end" gap={ 2 }>

5
src/components/inventory/views/bot/InventoryBotView.tsx
View File

@ -1,6 +1,7 @@
import { GetBotInventoryComposer, IRoomSession, RoomObjectVariable, RoomPreviewer } from '@nitrots/nitro-renderer';
import { FC, useEffect } from 'react';
import { GetRoomEngine, LocalizeText } from '../../../../api';
import { AutoGrid } from '../../../../common/AutoGrid';
import { Button } from '../../../../common/Button';
import { Column } from '../../../../common/Column';
import { Grid } from '../../../../common/Grid';
@ -77,9 +78,9 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
return (
<Grid>
<Column size={ 7 } overflow="hidden">
<Grid grow columnCount={ 5 } overflow="auto">
<AutoGrid columnCount={ 5 }>
{ botItems && (botItems.length > 0) && botItems.map(item => <InventoryBotItemView key={ item.id } botItem={ item } />) }
</Grid>
</AutoGrid>
</Column>
<Column size={ 5 } overflow="auto">
<Column overflow="hidden" position="relative">

5
src/components/inventory/views/furniture/InventoryFurnitureView.tsx
View File

@ -1,6 +1,7 @@
import { FurnitureListComposer, IRoomSession, RoomObjectVariable, RoomPreviewer, Vector3d } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { GetRoomEngine, GetSessionDataManager, LocalizeText } from '../../../../api';
import { AutoGrid } from '../../../../common/AutoGrid';
import { Button } from '../../../../common/Button';
import { Column } from '../../../../common/Column';
import { Grid } from '../../../../common/Grid';
@ -114,9 +115,9 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
<Grid>
<Column size={ 7 } overflow="hidden">
<InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
<Grid grow columnCount={ 5 } overflow="auto">
<AutoGrid columnCount={ 5 }>
{ filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) => <InventoryFurnitureItemView key={ index } groupItem={ item } />) }
</Grid>
</AutoGrid>
</Column>
<Column size={ 5 } overflow="auto">
<Column overflow="hidden" position="relative">

5
src/components/inventory/views/pet/InventoryPetView.tsx
View File

@ -1,6 +1,7 @@
import { IRoomSession, RequestPetsComposer, RoomObjectVariable, RoomPreviewer } from '@nitrots/nitro-renderer';
import { FC, useEffect } from 'react';
import { GetRoomEngine, LocalizeText } from '../../../../api';
import { AutoGrid } from '../../../../common/AutoGrid';
import { Button } from '../../../../common/Button';
import { Column } from '../../../../common/Column';
import { Grid } from '../../../../common/Grid';
@ -76,9 +77,9 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
return (
<Grid>
<Column size={ 7 } overflow="hidden">
<Grid grow columnCount={ 5 } overflow="auto">
<AutoGrid columnCount={ 5 }>
{ petItems && (petItems.length > 0) && petItems.map(item => <InventoryPetItemView key={ item.id } petItem={ item } />) }
</Grid>
</AutoGrid>
</Column>
<Column size={ 5 } overflow="auto">
<Column overflow="hidden" position="relative">

13
src/components/inventory/views/trade/InventoryTradeView.tsx
View File

@ -2,6 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FurnitureListComposer, IObjectData, TradingAcceptComposer, TradingConfirmationComposer, TradingListAddItemComposer, TradingListAddItemsComposer, TradingListItemRemoveComposer, TradingUnacceptComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../api';
import { AutoGrid } from '../../../../common/AutoGrid';
import { Base } from '../../../../common/Base';
import { Button } from '../../../../common/Button';
import { Column } from '../../../../common/Column';
@ -229,7 +230,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
<Column size={ 4 } overflow="hidden">
<InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
<Flex column fullHeight justifyContent="between" overflow="hidden" gap={ 2 }>
<Grid grow columnCount={ 3 } overflow="auto">
<AutoGrid columnCount={ 3 }>
{ filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) =>
{
const count = item.getUnlockedCount();
@ -243,7 +244,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
</LayoutGridItem>
);
}) }
</Grid>
</AutoGrid>
<Base fullWidth className="badge bg-muted">
{ groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }
</Base>
@ -256,7 +257,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
<Text>{ LocalizeText('inventory.trading.you') } { LocalizeText('inventory.trading.areoffering') }:</Text>
{ getLockIcon(tradeData.ownUser.accepts) }
</Flex>
<Grid grow columnCount={ 3 } overflow="auto">
<AutoGrid columnCount={ 3 }>
{ Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
{
const item = (tradeData.ownUser.items.getWithIndex(i) || null);
@ -272,7 +273,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
</LayoutGridItem>
);
}) }
</Grid>
</AutoGrid>
<Base fullWidth className="badge bg-muted">
{ ownGroupItem ? ownGroupItem.name : LocalizeText('catalog_selectproduct') }
</Base>
@ -282,7 +283,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
<Text>{ tradeData.otherUser.userName } { LocalizeText('inventory.trading.isoffering') }:</Text>
{ getLockIcon(tradeData.otherUser.accepts) }
</Flex>
<Grid grow columnCount={ 3 } overflow="auto">
<AutoGrid columnCount={ 3 }>
{ Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
{
const item = (tradeData.otherUser.items.getWithIndex(i) || null);
@ -291,7 +292,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
return <LayoutGridItem key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
}) }
</Grid>
</AutoGrid>
<Base fullWidth className="badge bg-muted w-100">
{ otherGroupItem ? otherGroupItem.name : LocalizeText('catalog_selectproduct') }
</Base>

10
src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx
View File

@ -160,13 +160,13 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
}) }
</Flex> }
</Column>
<Grid maxContent columnCount={ 2 } gap={ 1 }>
<i onClick={ () => processAction('set_home_room') } className={ 'flex-shrink-0 icon icon-house-small cursor-pointer' + classNames({ ' gray': homeRoomId !== roomInfoData.enteredGuestRoom.roomId }) } />
<FontAwesomeIcon icon="link" title={ LocalizeText('navigator.embed.caption') } className="cursor-pointer" onClick={ event => dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK)) } />
<Grid maxContent gap={ 1 }>
<i onClick={ () => processAction('set_home_room') } className={ 'g-col-6 flex-shrink-0 icon icon-house-small cursor-pointer' + classNames({ ' gray': homeRoomId !== roomInfoData.enteredGuestRoom.roomId }) } />
<FontAwesomeIcon icon="link" title={ LocalizeText('navigator.embed.caption') } className="cursor-pointer g-col-6" onClick={ event => dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK)) } />
{ hasPermission('settings') &&
<>
<FontAwesomeIcon icon="cogs" title={ LocalizeText('navigator.room.popup.info.room.settings') } className="cursor-pointer" onClick={ event => processAction('open_room_settings') } />
<FontAwesomeIcon icon="tools" title={ LocalizeText('open.floor.plan.editor') } className="cursor-pointer" onClick={ event => processAction('open_floorplan_editor') } />
<FontAwesomeIcon icon="cogs" title={ LocalizeText('navigator.room.popup.info.room.settings') } className="g-col-6 cursor-pointer" onClick={ event => processAction('open_room_settings') } />
<FontAwesomeIcon icon="tools" title={ LocalizeText('open.floor.plan.editor') } className="g-col-6 cursor-pointer" onClick={ event => processAction('open_floorplan_editor') } />
</> }
</Grid>
</Flex>