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 inventory

Browse Source
This commit is contained in:
Bill 2021-12-04 01:27:54 -05:00
parent e062b6cf37
commit b486f17e3f
4 changed files with 27 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/views/inventory/views/furniture/InventoryFurnitureView.tsx
View File

@ -1,12 +1,12 @@
import { FurnitureListComposer, RoomObjectVariable, Vector3d } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { GetRoomEngine, GetSessionDataManager, LocalizeText } from '../../../../api';
import { Column } from '../../../../common/Column';
import { Grid } from '../../../../common/Grid';
import { Text } from '../../../../common/Text';
import { SendMessageHook } from '../../../../hooks/messages';
import { NitroLayoutButton } from '../../../../layout';
import { NitroLayoutBase } from '../../../../layout/base';
import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView';
import { RarityLevelView } from '../../../shared/rarity-level/RarityLevelView';
import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
@ -107,13 +107,13 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.title') } desc={ LocalizeText('inventory.empty.desc') } />;
return (
<NitroLayoutGrid>
<NitroLayoutGridColumn size={ 7 }>
<Grid>
<Column size={ 7 } overflow="hidden">
<InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
<InventoryFurnitureResultsView groupItems={ filteredGroupItems } />
</NitroLayoutGridColumn>
<NitroLayoutGridColumn size={ 5 } overflow="auto">
<NitroLayoutFlexColumn overflow="hidden" position="relative">
</Column>
<Column size={ 5 } overflow="auto">
<Column overflow="hidden" position="relative">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
{ groupItem && groupItem.stuffData.isUnique &&
<NitroLayoutBase className="top-2 end-2" position="absolute">
@ -123,16 +123,16 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
<NitroLayoutBase className="top-2 end-2" position="absolute">
<RarityLevelView level={ groupItem.stuffData.rarityLevel } />
</NitroLayoutBase> }
</NitroLayoutFlexColumn>
</Column>
{ groupItem &&
<NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
<NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ groupItem.name }</NitroLayoutBase>
<Column grow justifyContent="between" gap={ 2 }>
<Text>{ groupItem.name }</Text>
{ !!roomSession &&
<NitroLayoutButton variant="success" size="sm" onClick={ event => attemptItemPlacement(groupItem) }>
{ LocalizeText('inventory.furni.placetoroom') }
</NitroLayoutButton> }
</NitroLayoutFlexColumn> }
</NitroLayoutGridColumn>
</NitroLayoutGrid>
</Column> }
</Column>
</Grid>
);
}

8
src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
View File

@ -1,18 +1,18 @@
import { FC } from 'react';
import { NitroCardGridView } from '../../../../../layout/card/grid/NitroCardGridView';
import { Grid } from '../../../../../common/Grid';
import { InventoryFurnitureItemView } from '../item/InventoryFurnitureItemView';
import { InventoryFurnitureResultsViewProps } from './InventoryFurnitureResultsView.types';
export const InventoryFurnitureResultsView: FC<InventoryFurnitureResultsViewProps> = props =>
{
const { groupItems = [], columns = 5 } = props;
const { groupItems = [] } = props;
return (
<NitroCardGridView>
<Grid grow columnCount={ 5 } overflow="auto">
{ groupItems && (groupItems.length > 0) && groupItems.map((item, index) =>
{
return <InventoryFurnitureItemView key={ index } groupItem={ item } />
}) }
</NitroCardGridView>
</Grid>
);
}

1
src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.types.ts
View File

@ -3,5 +3,4 @@ import { GroupItem } from '../../../common/GroupItem';
export interface InventoryFurnitureResultsViewProps
{
groupItems: GroupItem[];
columns?: number;
}

19
src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
View File

@ -1,5 +1,8 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../../api';
import { Button } from '../../../../../common/Button';
import { Flex } from '../../../../../common/Flex';
import { InventoryFurnitureSearchViewProps } from './InventoryFurnitureSearchView.types';
export const InventoryFurnitureSearchView: FC<InventoryFurnitureSearchViewProps> = props =>
@ -30,15 +33,11 @@ export const InventoryFurnitureSearchView: FC<InventoryFurnitureSearchViewProps>
}, [ groupItems, setGroupItems, searchValue ]);
return (
<div className="d-flex">
<div className="d-flex flex-grow-1 me-1">
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
</div>
<div className="d-flex">
<button type="button" className="btn btn-primary btn-sm">
<i className="fas fa-search"></i>
</button>
</div>
</div>
<Flex gap={ 1 }>
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
<Button variant="primary" size="sm">
<FontAwesomeIcon icon="search" />
</Button>
</Flex>
);
}