diff --git a/src/app/inventory/ConnectedInventoryItem.tsx b/src/app/inventory/ConnectedInventoryItem.tsx index 9938fda756..b5bdab1b1d 100644 --- a/src/app/inventory/ConnectedInventoryItem.tsx +++ b/src/app/inventory/ConnectedInventoryItem.tsx @@ -16,6 +16,7 @@ interface ProvidedProps { id?: string; // defaults to item.index - id is typically used for `itemPop` allowFilter?: boolean; ignoreSelectedPerks?: boolean; + includeTooltip?: boolean; innerRef?: React.Ref; onClick?(e: React.MouseEvent): void; onShiftClick?(e: React.MouseEvent): void; @@ -71,6 +72,7 @@ function ConnectedInventoryItem({ onDoubleClick, searchHidden, ignoreSelectedPerks, + includeTooltip, innerRef, }: Props) { return ( @@ -86,6 +88,7 @@ function ConnectedInventoryItem({ onDoubleClick={onDoubleClick} searchHidden={searchHidden} ignoreSelectedPerks={ignoreSelectedPerks} + includeTooltip={includeTooltip} innerRef={innerRef} /> ); diff --git a/src/app/inventory/InventoryItem.tsx b/src/app/inventory/InventoryItem.tsx index 90dabf85c7..4f6a97fb99 100644 --- a/src/app/inventory/InventoryItem.tsx +++ b/src/app/inventory/InventoryItem.tsx @@ -1,3 +1,4 @@ +import PressTip from 'app/dim-ui/PressTip'; import clsx from 'clsx'; import React, { useMemo } from 'react'; import BungieImage from '../dim-ui/BungieImage'; @@ -9,6 +10,7 @@ import { TagValue } from './dim-item-info'; import styles from './InventoryItem.m.scss'; import { DimItem } from './item-types'; import ItemIcon from './ItemIcon'; +import { DimItemTooltip } from './ItemTooltip'; import NewItemIndicator from './NewItemIndicator'; import { selectedSubclassPath } from './subclass'; import TagIcon from './TagIcon'; @@ -28,6 +30,8 @@ interface Props { wishlistRoll?: InventoryWishListRoll; /** Don't show information that relates to currently selected perks (only used for subclasses currently) */ ignoreSelectedPerks?: boolean; + /** Don't show information that relates to currently selected perks (only used for subclasses currently) */ + includeTooltip?: boolean; innerRef?: React.Ref; /** TODO: item locked needs to be passed in */ onClick?(e: React.MouseEvent): void; @@ -43,6 +47,7 @@ export default function InventoryItem({ notes, searchHidden, wishlistRoll, + includeTooltip, ignoreSelectedPerks, onClick, onShiftClick, @@ -115,16 +120,23 @@ export default function InventoryItem({ ); }, [isNew, item, notes, subclassPath, tag, wishlistRoll]); - return ( + const tooltip = includeTooltip ?? false; + const inner = (
{contents}
); + + if (tooltip) { + return }>{inner}; + } else { + return inner; + } } diff --git a/src/app/item-picker/ItemTooltip.m.scss b/src/app/inventory/ItemTooltip.m.scss similarity index 85% rename from src/app/item-picker/ItemTooltip.m.scss rename to src/app/inventory/ItemTooltip.m.scss index 4062a59f87..b3252d5a7a 100644 --- a/src/app/item-picker/ItemTooltip.m.scss +++ b/src/app/inventory/ItemTooltip.m.scss @@ -19,9 +19,6 @@ .stats { margin: 4px 0 0 0; - :global(.stat-row) { - margin-bottom: 8px; - } :global(.stat) { line-height: 8px; } diff --git a/src/app/item-picker/ItemTooltip.m.scss.d.ts b/src/app/inventory/ItemTooltip.m.scss.d.ts similarity index 100% rename from src/app/item-picker/ItemTooltip.m.scss.d.ts rename to src/app/inventory/ItemTooltip.m.scss.d.ts diff --git a/src/app/item-picker/ItemTooltip.tsx b/src/app/inventory/ItemTooltip.tsx similarity index 92% rename from src/app/item-picker/ItemTooltip.tsx rename to src/app/inventory/ItemTooltip.tsx index d7d9bada79..ccfa3f2c3e 100644 --- a/src/app/item-picker/ItemTooltip.tsx +++ b/src/app/inventory/ItemTooltip.tsx @@ -18,7 +18,7 @@ export function DimItemTooltip({ item }: { item: DimItem }) { const perk = s.plugged?.plugDef; return perk ? [perk] : []; }); - const contents = ( + const contents = perks.length ? (
{perks.map((perk, index) => (
@@ -26,9 +26,9 @@ export function DimItemTooltip({ item }: { item: DimItem }) {
))}
- ); + ) : undefined; return ; - } else if (item.bucket.sort === 'Armor' && item.stats) { + } else if (item.bucket.sort === 'Armor' && item.stats?.length) { const renderStat = (stat: DimStat) => (
{stat.displayProperties.hasIcon ? ( @@ -49,7 +49,7 @@ export function DimItemTooltip({ item }: { item: DimItem }) { ); return ; } else { - return } />; + return ; } } diff --git a/src/app/item-picker/ItemPicker.tsx b/src/app/item-picker/ItemPicker.tsx index a8c4ab7bf3..e0b6dc3bf9 100644 --- a/src/app/item-picker/ItemPicker.tsx +++ b/src/app/item-picker/ItemPicker.tsx @@ -1,5 +1,4 @@ import ClassIcon from 'app/dim-ui/ClassIcon'; -import PressTip from 'app/dim-ui/PressTip'; import { t } from 'app/i18next-t'; import { ItemFilter } from 'app/search/filter-types'; import SearchBar from 'app/search/SearchBar'; @@ -17,7 +16,6 @@ import { itemSortOrderSelector } from '../settings/item-sort'; import { sortItems } from '../shell/filters'; import { ItemPickerState } from './item-picker'; import './ItemPicker.scss'; -import { DimItemTooltip } from './ItemTooltip'; type ProvidedProps = ItemPickerState & { onSheetClosed(): void; @@ -103,13 +101,12 @@ function ItemPicker({
{items.map((item) => (
- }> - onItemSelectedFn(item, onClose)} - ignoreSelectedPerks={ignoreSelectedPerks} - /> - + onItemSelectedFn(item, onClose)} + includeTooltip + ignoreSelectedPerks={ignoreSelectedPerks} + /> {item.type === 'Class' && ( )}