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): add tooltip to IAISwitch

Browse Source
This commit is contained in:
psychedelicious 2023-06-03 22:47:51 +10:00
parent 4f7820719b
commit 2270c270ef
1 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
invokeai/frontend/web/src/common/components/IAISwitch.tsx
View File

@ -5,6 +5,7 @@ import {
FormLabelProps, FormLabelProps,
Switch, Switch,
SwitchProps, SwitchProps,
Tooltip,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { memo } from 'react'; import { memo } from 'react';
@ -13,6 +14,7 @@ interface Props extends SwitchProps {
width?: string | number; width?: string | number;
formControlProps?: FormControlProps; formControlProps?: FormControlProps;
formLabelProps?: FormLabelProps; formLabelProps?: FormLabelProps;
tooltip?: string;
} }
/** /**
@ -25,24 +27,27 @@ const IAISwitch = (props: Props) => {
width = 'auto', width = 'auto',
formControlProps, formControlProps,
formLabelProps, formLabelProps,
tooltip,
...rest ...rest
} = props; } = props;
return ( return (
<FormControl <Tooltip label={tooltip} hasArrow placement="top" isDisabled={!tooltip}>
isDisabled={isDisabled} <FormControl
width={width} isDisabled={isDisabled}
display="flex" width={width}
gap={4} display="flex"
alignItems="center" gap={4}
{...formControlProps} alignItems="center"
> {...formControlProps}
{label && ( >
<FormLabel my={1} flexGrow={1} {...formLabelProps}> {label && (
{label} <FormLabel my={1} flexGrow={1} {...formLabelProps}>
</FormLabel> {label}
)} </FormLabel>
<Switch {...rest} /> )}
</FormControl> <Switch {...rest} />
</FormControl>
</Tooltip>
); );
}; };