Skip to content

Commit

Permalink
feat: add TooltipWrapper React Component (spicetify#1968)
Browse files Browse the repository at this point in the history
  • Loading branch information
kyrie25 authored Oct 4, 2022
1 parent 909c5bb commit 3342d92
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 0 deletions.
44 changes: 44 additions & 0 deletions globals.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1294,6 +1294,42 @@ declare namespace Spicetify {
*/
icon?: React.ReactNode;
};
type TooltipProps = {
/**
* Label to display in the tooltip
*/
label: string;
/**
* The child element that the tooltip will be attached to
* and will display when hovered over
*/
children: React.ReactNode;
/**
* Decide whether to use the global singleton tooltip (rendered in `<body>`)
* or a new inline tooltip (rendered in a sibling
* element to `children`)
*/
renderInline?: boolean;
/**
* Delay in milliseconds before the tooltip is displayed
* after the user hovers over the child element
*/
showDelay?: number;
/**
* Determine whether the tooltip should be displayed
*/
disabled?: boolean;
/**
* The preferred placement of the context menu when it opens.
* Relative to trigger element.
* @default 'top'
*/
placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
/**
* Class name to apply to the tooltip
*/
labelClassName?: string;
};
/**
* Generic context menu provider
*
Expand Down Expand Up @@ -1335,6 +1371,14 @@ declare namespace Spicetify {
const PodcastShowMenu: any;
const ArtistMenu: any;
const PlaylistMenu: any;
/**
* Component to display tooltip when hovering over element
* Useful for accessibility
*
* Props:
* @see Spicetify.ReactComponent.TooltipProps
*/
const TooltipWrapper: any;
};

/**
Expand Down
6 changes: 6 additions & 0 deletions src/preprocess/preprocess.go
Original file line number Diff line number Diff line change
Expand Up @@ -372,6 +372,12 @@ Spicetify.React.useEffect(() => {
`(\w+)(=\w+[\(\)]*\.memo\(\((?:function\([\{\w\}:,]+\)|\()?\{(?:\w+ ?[\w\{\}\(\)=,:]*)?(?:[\w=\.]*(?:uri|isEnhanced|onRemoveCallback)[:\w]*,?){3,})`,
`${1}=Spicetify.ReactComponent.PlaylistMenu${2}`)

// React Component: Tooltip Wrapper
utils.Replace(
&input,
`(\w+)(=(?:function\([\{\w\}:,]+\)|\()\{(?:[\w. =]*(?:label|children|renderInline|showDelay)[\w:]*,?){4})`,
`${1}=Spicetify.ReactComponent.TooltipWrapper${2}`)

// Locale
utils.Replace(
&input,
Expand Down

0 comments on commit 3342d92

Please sign in to comment.