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

92
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,48 +122,56 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
> >
<OverlayScrollbarsComponent> <OverlayScrollbarsComponent>
{items.map((item, index) => ( {items.map((item, index) => (
<ListItem <Tooltip
sx={{ isDisabled={!itemTooltips}
bg: highlightedIndex === index ? 'base.700' : undefined,
py: 1,
paddingInlineStart: 3,
paddingInlineEnd: 6,
cursor: 'pointer',
transitionProperty: 'common',
transitionDuration: '0.15s',
}}
key={`${item}${index}`} key={`${item}${index}`}
{...getItemProps({ item, index })} label={itemTooltips?.[item]}
hasArrow
placement="right"
> >
{withCheckIcon ? ( <ListItem
<Grid gridTemplateColumns="1.25rem auto"> sx={{
<GridItem> bg: highlightedIndex === index ? 'base.700' : undefined,
{selectedItem === item && <CheckIcon boxSize={2} />} py: 1,
</GridItem> paddingInlineStart: 3,
<GridItem> paddingInlineEnd: 6,
<Text cursor: 'pointer',
sx={{ transitionProperty: 'common',
fontSize: 'sm', transitionDuration: '0.15s',
color: 'base.100', }}
fontWeight: 500, key={`${item}${index}`}
}} {...getItemProps({ item, index })}
> >
{item} {withCheckIcon ? (
</Text> <Grid gridTemplateColumns="1.25rem auto">
</GridItem> <GridItem>
</Grid> {selectedItem === item && <CheckIcon boxSize={2} />}
) : ( </GridItem>
<Text <GridItem>
sx={{ <Text
fontSize: 'sm', sx={{
color: 'base.100', fontSize: 'sm',
fontWeight: 500, color: 'base.100',
}} fontWeight: 500,
> }}
{item} >
</Text> {item}
)} </Text>
</ListItem> </GridItem>
</Grid>
) : (
<Text
sx={{
fontSize: 'sm',
color: 'base.100',
fontWeight: 500,
}}
>
{item}
</Text>
)}
</ListItem>
</Tooltip>
))} ))}
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
</List> </List>