nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02: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 { FurnitureListComposer, RoomObjectVariable, Vector3d } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { GetRoomEngine, GetSessionDataManager, LocalizeText } from '../../../../api'; 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 { SendMessageHook } from '../../../../hooks/messages';
import { NitroLayoutButton } from '../../../../layout'; import { NitroLayoutButton } from '../../../../layout';
import { NitroLayoutBase } from '../../../../layout/base'; 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 { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView';
import { RarityLevelView } from '../../../shared/rarity-level/RarityLevelView'; import { RarityLevelView } from '../../../shared/rarity-level/RarityLevelView';
import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView'; 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') } />; if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.title') } desc={ LocalizeText('inventory.empty.desc') } />;
return ( return (
<NitroLayoutGrid> <Grid>
<NitroLayoutGridColumn size={ 7 }> <Column size={ 7 } overflow="hidden">
<InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } /> <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
<InventoryFurnitureResultsView groupItems={ filteredGroupItems } /> <InventoryFurnitureResultsView groupItems={ filteredGroupItems } />
</NitroLayoutGridColumn> </Column>
<NitroLayoutGridColumn size={ 5 } overflow="auto"> <Column size={ 5 } overflow="auto">
<NitroLayoutFlexColumn overflow="hidden" position="relative"> <Column overflow="hidden" position="relative">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } /> <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
{ groupItem && groupItem.stuffData.isUnique && { groupItem && groupItem.stuffData.isUnique &&
<NitroLayoutBase className="top-2 end-2" position="absolute"> <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"> <NitroLayoutBase className="top-2 end-2" position="absolute">
<RarityLevelView level={ groupItem.stuffData.rarityLevel } /> <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
</NitroLayoutBase> } </NitroLayoutBase> }
</NitroLayoutFlexColumn> </Column>
{ groupItem && { groupItem &&
<NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }> <Column grow justifyContent="between" gap={ 2 }>
<NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ groupItem.name }</NitroLayoutBase> <Text>{ groupItem.name }</Text>
{ !!roomSession && { !!roomSession &&
<NitroLayoutButton variant="success" size="sm" onClick={ event => attemptItemPlacement(groupItem) }> <NitroLayoutButton variant="success" size="sm" onClick={ event => attemptItemPlacement(groupItem) }>
{ LocalizeText('inventory.furni.placetoroom') } { LocalizeText('inventory.furni.placetoroom') }
</NitroLayoutButton> } </NitroLayoutButton> }
</NitroLayoutFlexColumn> } </Column> }
</NitroLayoutGridColumn> </Column>
</NitroLayoutGrid> </Grid>
); );
} }

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

@ -1,18 +1,18 @@
import { FC } from 'react'; import { FC } from 'react';
import { NitroCardGridView } from '../../../../../layout/card/grid/NitroCardGridView'; import { Grid } from '../../../../../common/Grid';
import { InventoryFurnitureItemView } from '../item/InventoryFurnitureItemView'; import { InventoryFurnitureItemView } from '../item/InventoryFurnitureItemView';
import { InventoryFurnitureResultsViewProps } from './InventoryFurnitureResultsView.types'; import { InventoryFurnitureResultsViewProps } from './InventoryFurnitureResultsView.types';
export const InventoryFurnitureResultsView: FC<InventoryFurnitureResultsViewProps> = props => export const InventoryFurnitureResultsView: FC<InventoryFurnitureResultsViewProps> = props =>
{ {
const { groupItems = [], columns = 5 } = props; const { groupItems = [] } = props;
return ( return (
<NitroCardGridView> <Grid grow columnCount={ 5 } overflow="auto">
{ groupItems && (groupItems.length > 0) && groupItems.map((item, index) => { groupItems && (groupItems.length > 0) && groupItems.map((item, index) =>
{ {
return <InventoryFurnitureItemView key={ index } groupItem={ item } /> 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 export interface InventoryFurnitureResultsViewProps
{ {
groupItems: GroupItem[]; 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 { FC, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../../api'; import { LocalizeText } from '../../../../../api';
import { Button } from '../../../../../common/Button';
import { Flex } from '../../../../../common/Flex';
import { InventoryFurnitureSearchViewProps } from './InventoryFurnitureSearchView.types'; import { InventoryFurnitureSearchViewProps } from './InventoryFurnitureSearchView.types';
export const InventoryFurnitureSearchView: FC<InventoryFurnitureSearchViewProps> = props => export const InventoryFurnitureSearchView: FC<InventoryFurnitureSearchViewProps> = props =>
@ -30,15 +33,11 @@ export const InventoryFurnitureSearchView: FC<InventoryFurnitureSearchViewProps>
}, [ groupItems, setGroupItems, searchValue ]); }, [ groupItems, setGroupItems, searchValue ]);
return ( return (
<div className="d-flex"> <Flex gap={ 1 }>
<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) } />
<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">
</div> <FontAwesomeIcon icon="search" />
<div className="d-flex"> </Button>
<button type="button" className="btn btn-primary btn-sm"> </Flex>
<i className="fas fa-search"></i>
</button>
</div>
</div>
); );
} }