Use Item Tooltip everywhere item cannot be popped

src/app/dim-ui/PressTip.tsx

@@ -29,6 +29,10 @@ interface Props {
  * constructing the tree until the tooltip is shown.
  */
  tooltip: React.ReactNode | (() => React.ReactNode);
+ /**
+ * Whether the presstip should be shown or not.
+ */
+ disabled?: boolean;
  /**
  * The children of this component define the content that will trigger the tooltip.
  */
@@ -41,6 +45,7 @@ interface Props {
 
 type ControlProps = Props &
  React.HTMLAttributes<HTMLDivElement> & {
+ events: React.HTMLAttributes<HTMLDivElement>;
  open: boolean;
  triggerRef: React.RefObject<HTMLDivElement>;
  };
@@ -65,10 +70,12 @@ type ControlProps = Props &
 function Control({
  tooltip,
  open,
+ disabled,
  triggerRef,
  children,
  elementType: Component = 'div',
  className,
+ events,
  ...rest
 }: ControlProps) {
  const tooltipContents = useRef<HTMLDivElement>(null);
@@ -94,8 +101,10 @@ function Control({
  // TODO: or use framer motion layout animations?
  return (
  <Component ref={triggerRef} className={clsx(styles.control, className)} {...rest}>
- {children}
+ <div {...events}>{children}</div>
  {open &&
+ !disabled &&
+ tooltip &&
  ReactDOM.createPortal(
  <div className={styles.tooltip} ref={tooltipContents}>
  <div className={styles.content}>{_.isFunction(tooltip) ? tooltip() : tooltip}</div>
@@ -142,14 +151,17 @@ function PressTip(props: Props) {
  timer.current = 0;
  }, []);
 
- const hover = useCallback((e: React.MouseEvent | React.TouchEvent | TouchEvent) => {
- e.preventDefault();
- clearTimeout(timer.current);
- timer.current = window.setTimeout(() => {
- setOpen(true);
- }, hoverDelay);
- touchStartTime.current = performance.now();
- }, []);
+ const hover = useCallback(
+ (e: React.MouseEvent | React.TouchEvent | TouchEvent) => {
+ e.preventDefault();
+ clearTimeout(timer.current);
+ timer.current = window.setTimeout(() => {
+ setOpen(!props.disabled);
+ }, hoverDelay);
+ touchStartTime.current = performance.now();
+ },
+ [props.disabled]
+ );
 
  // Stop the hover timer when the component unmounts
  useEffect(() => () => clearTimeout(timer.current), []);
@@ -181,12 +193,12 @@ function PressTip(props: Props) {
  onClick: absorbClick,
  }
  : {
- onMouseEnter: hover,
+ onMouseOver: hover,
  onMouseUp: closeToolTip,
  onMouseLeave: closeToolTip,
  };
 
- return <Control open={open} triggerRef={ref} {...events} {...props} />;
+ return <Control open={open} triggerRef={ref} events={events} {...props} />;
 }
 
 export default PressTip;

src/app/infuse/InfusionFinder.tsx

@@ -229,15 +229,23 @@ export default function InfusionFinder() {
  <div className="infusionControls">
  <div className="infuseTopRow">
  <div className="infusionEquation">
- {effectiveTarget ? <ConnectedInventoryItem item={effectiveTarget} /> : missingItem}
+ {effectiveTarget ? (
+ <ConnectedInventoryItem item={effectiveTarget} includeTooltip />
+ ) : (
+ missingItem
+ )}
  <div className="icon">
  <AppIcon icon={plusIcon} />
  </div>
- {effectiveSource ? <ConnectedInventoryItem item={effectiveSource} /> : missingItem}
+ {effectiveSource ? (
+ <ConnectedInventoryItem item={effectiveSource} includeTooltip />
+ ) : (
+ missingItem
+ )}
  <div className="icon">
  <AppIcon icon={faEquals} />
  </div>
- {result ? <ConnectedInventoryItem item={result} /> : missingItem}
+ {result ? <ConnectedInventoryItem item={result} includeTooltip /> : missingItem}
  </div>
  <div className="infuseActions">
  <button type="button" className="dim-button" onClick={switchDirection}>
@@ -269,7 +277,7 @@ export default function InfusionFinder() {
  className={clsx({ 'infuse-selected': item === target })}
  onClick={() => selectItem(item)}
  >
- <ConnectedInventoryItem item={item} />
+ <ConnectedInventoryItem includeTooltip item={item} />
  </div>
  );
 

src/app/inventory/InventoryItem.tsx

@@ -134,9 +134,9 @@ export default function InventoryItem({
  </div>
  );
 
- if (tooltip) {
- return <PressTip tooltip={() => <DimItemTooltip item={item} />}>{inner}</PressTip>;
- } else {
- return inner;
- }
+ return (
+ <PressTip disabled={!tooltip} tooltip={() => <DimItemTooltip item={item} />}>
+  {inner}
+ </PressTip>
+ );
 }

src/app/inventory/ItemTooltip.m.scss

@@ -5,6 +5,9 @@
  flex-flow: column;
  margin: 4px 0;
 
+ border-left: 2px solid #888;
+ padding-left: 3px;
+
  > div {
  display: flex;
  flex-flow: row;
@@ -17,9 +20,26 @@
  }
 }
 
+.perkSelected {
+ font-weight: bold;
+}
+
+.notes {
+ margin-left: 4px;
+}
+
+.note {
+ margin-left: -4px;
+}
+
+.noteIcon {
+ height: 24px;
+ width: 24px;
+}
+
 .stats {
  margin: 4px 0 0 0;
  :global(.stat) {
- line-height: 8px;
+ line-height: 12px;
  }
 }

src/app/inventory/ItemTooltip.tsx

@@ -2,32 +2,43 @@ import BungieImage from 'app/dim-ui/BungieImage';
 import { DimItem, DimStat } from 'app/inventory/item-types';
 import { DefItemIcon } from 'app/inventory/ItemIcon';
 import { useD2Definitions } from 'app/manifest/selectors';
+import { AppIcon, stickyNoteIcon } from 'app/shell/icons';
 import { isKillTrackerSocket } from 'app/utils/item-utils';
 import { DestinyInventoryItemDefinition } from 'bungie-api-ts/destiny2';
 import clsx from 'clsx';
 import _ from 'lodash';
 import React from 'react';
+import { useSelector } from 'react-redux';
+import { itemNoteSelector } from './dim-item-info';
 import styles from './ItemTooltip.m.scss';
 
 export function DimItemTooltip({ item }: { item: DimItem }) {
  const defs = useD2Definitions()!;
  const itemDef = defs.InventoryItem.get(item.hash);
+ const savedNotes = useSelector(itemNoteSelector(item));
+
  if (item.bucket.sort === 'Weapons' && item.sockets) {
  const perkSockets = item.sockets?.allSockets.filter((s) => s.isPerk && !isKillTrackerSocket(s));
- const perks = _.takeRight(perkSockets, 2).flatMap((s) => {
- const perk = s.plugged?.plugDef;
- return perk ? [perk] : [];
- });
- const contents = perks.length ? (
- <div className={clsx(styles.perks)}>
- {perks.map((perk, index) => (
- <div key={index}>
- <DefItemIcon itemDef={perk} borderless={true} /> {perk.displayProperties.name}
+ const sockets = _.takeRight(perkSockets, 2);
+
+ const contents = sockets.map((socket) => (
+ <div key={socket.socketIndex} className={clsx(styles.perks)}>
+ {socket.plugOptions.map((p) => (
+ <div
+ key={p.plugDef.hash}
+ className={clsx(undefined, {
+ [styles.perkSelected]:
+ socket.isPerk && socket.plugOptions.length > 1 && p === socket.plugged,
+ })}
+ data-perk-name={p.plugDef.displayProperties.name}
+ >
+ <DefItemIcon itemDef={p.plugDef} borderless={true} /> {p.plugDef.displayProperties.name}
  </div>
  ))}
  </div>
- ) : undefined;
- return <Tooltip def={itemDef} contents={contents} />;
+ ));
+
+ return <Tooltip def={itemDef} notes={savedNotes} contents={contents} />;
  } else if (item.bucket.sort === 'Armor' && item.stats?.length) {
  const renderStat = (stat: DimStat) => (
  <div key={stat.statHash} className="stat">
@@ -41,29 +52,39 @@ export function DimItemTooltip({ item }: { item: DimItem }) {
  {stat.base}
  </div>
  );
+
  const contents = (
  <div className={clsx(styles.stats, 'stat-bars', 'destiny2')}>
  <div className="stat-row">{item.stats?.filter((s) => s.statHash > 0).map(renderStat)}</div>
  <div className="stat-row">{item.stats?.filter((s) => s.statHash < 0).map(renderStat)}</div>
  </div>
  );
- return <Tooltip def={itemDef} contents={contents} />;
+
+ return <Tooltip def={itemDef} notes={savedNotes} contents={contents} />;
  } else {
- return <Tooltip def={itemDef} contents={undefined} />;
+ return <Tooltip def={itemDef} notes={savedNotes} contents={undefined} />;
  }
 }
 
 function Tooltip({
  def,
+ notes,
  contents,
 }: {
  def: DestinyInventoryItemDefinition;
+ notes?: string;
  contents?: React.ReactNode;
 }) {
  return (
  <>
  <h2>{def.displayProperties.name}</h2>
  {def.itemTypeDisplayName && <h3>{def.itemTypeDisplayName}</h3>}
+ {notes && (
+ <div className={clsx(styles.notes)}>
+ <AppIcon className={styles.noteIcon} icon={stickyNoteIcon} />
+ <span className={clsx(styles.note)}>{notes}</span>
+ </div>
+ )}
  {contents}
  </>
  );

src/app/inventory/StoreInventoryItem.tsx

@@ -1,5 +1,7 @@
+import { compareOpenSelector } from 'app/compare/selectors';
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
 import React from 'react';
+import { useSelector } from 'react-redux';
 import ConnectedInventoryItem from './ConnectedInventoryItem';
 import DraggableInventoryItem from './DraggableInventoryItem';
 import { DimItem } from './item-types';
@@ -15,6 +17,7 @@ interface Props {
  */
 export default function StoreInventoryItem({ item }: Props) {
  const dispatch = useThunkDispatch();
+ const compareOpen = useSelector(compareOpenSelector);
  const doubleClicked = (e: React.MouseEvent) => {
  dispatch(moveItemToCurrentStore(item, e));
  };
@@ -27,6 +30,7 @@ export default function StoreInventoryItem({ item }: Props) {
  item={item}
  allowFilter={true}
  innerRef={ref}
+ includeTooltip={compareOpen}
  onClick={onClick}
  onDoubleClick={doubleClicked}
  // for only StoreInventoryItems (the main inventory page)