feat(ui): add tooltip to IAIMantineSelect

This commit is contained in:
psychedelicious 2023-06-12 22:11:56 +10:00
parent 4a991b4daa
commit 4ba5086b9a
3 changed files with 52 additions and 45 deletions

View File

@ -1,16 +1,20 @@
import { forwardRef } from '@chakra-ui/react';
import { Tooltip, forwardRef } from '@chakra-ui/react';
import { Select, SelectProps } from '@mantine/core';
import { memo } from 'react';
type IAISelectProps = SelectProps;
type IAISelectProps = SelectProps & {
tooltip?: string;
};
const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
const { searchable = true, ...rest } = props;
const { searchable = true, tooltip, ...rest } = props;
return (
<Tooltip label={tooltip} placement="top" hasArrow>
<Select
ref={ref}
searchable={searchable}
styles={() => ({
root: {},
label: {
color: 'var(--invokeai-colors-base-300)',
fontWeight: 'normal',
@ -57,6 +61,7 @@ const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
})}
{...rest}
/>
</Tooltip>
);
});

View File

@ -54,6 +54,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
value={model}
onChange={handleModelChanged}
disabled={!isReady}
tooltip={model}
/>
);
// return (

View File

@ -63,6 +63,7 @@ const ModelSelect = () => {
return (
<IAIMantineSelect
tooltip={selectedModel?.description}
label={t('modelManager.model')}
value={selectedModel?.name ?? ''}
placeholder="Pick one"