Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): upgrade IAICustomSelect to optionally display tooltips for each item

Browse Source
This commit is contained in:
psychedelicious 2023-05-30 22:50:42 +10:00 committed by Kent Keirsey
parent e1ae7842ff
commit 7c7ffddb2b
1 changed files with 52 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
invokeai/frontend/web/src/common/components/IAICustomSelect.tsx
View File

@ -21,9 +21,12 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { memo } from 'react'; import { memo } from 'react';
export type ItemTooltips = { [key: string]: string };
type IAICustomSelectProps = { type IAICustomSelectProps = {
label?: string; label?: string;
items: string[]; items: string[];
itemTooltips?: ItemTooltips;
selectedItem: string; selectedItem: string;
setSelectedItem: (v: string | null | undefined) => void; setSelectedItem: (v: string | null | undefined) => void;
withCheckIcon?: boolean; withCheckIcon?: boolean;
@ -37,6 +40,7 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
const { const {
label, label,
items, items,
itemTooltips,
setSelectedItem, setSelectedItem,
selectedItem, selectedItem,
withCheckIcon, withCheckIcon,
@ -118,6 +122,13 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
> >
<OverlayScrollbarsComponent> <OverlayScrollbarsComponent>
{items.map((item, index) => ( {items.map((item, index) => (
<Tooltip
isDisabled={!itemTooltips}
key={`${item}${index}`}
label={itemTooltips?.[item]}
hasArrow
placement="right"
>
<ListItem <ListItem
sx={{ sx={{
bg: highlightedIndex === index ? 'base.700' : undefined, bg: highlightedIndex === index ? 'base.700' : undefined,
@ -160,6 +171,7 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
</Text> </Text>
)} )}
</ListItem> </ListItem>
</Tooltip>
))} ))}
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
</List> </List>