mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
e41e8606b5
- Accordions now may be opened or closed regardless of whether or not their contents are enabled or active - Accordions have a short text indicator alerting the user if their contents are enabled, either a simple `Enabled` or, for accordions like LoRA or ControlNet, `X Active` if any are active
63 lines
1.3 KiB
TypeScript
63 lines
1.3 KiB
TypeScript
import {
|
|
FormControl,
|
|
FormControlProps,
|
|
FormLabel,
|
|
FormLabelProps,
|
|
Switch,
|
|
SwitchProps,
|
|
Tooltip,
|
|
} from '@chakra-ui/react';
|
|
import { memo } from 'react';
|
|
|
|
interface Props extends SwitchProps {
|
|
label?: string;
|
|
width?: string | number;
|
|
formControlProps?: FormControlProps;
|
|
formLabelProps?: FormLabelProps;
|
|
tooltip?: string;
|
|
}
|
|
|
|
/**
|
|
* Customized Chakra FormControl + Switch multi-part component.
|
|
*/
|
|
const IAISwitch = (props: Props) => {
|
|
const {
|
|
label,
|
|
isDisabled = false,
|
|
width = 'auto',
|
|
formControlProps,
|
|
formLabelProps,
|
|
tooltip,
|
|
...rest
|
|
} = props;
|
|
return (
|
|
<Tooltip label={tooltip} hasArrow placement="top" isDisabled={!tooltip}>
|
|
<FormControl
|
|
isDisabled={isDisabled}
|
|
width={width}
|
|
display="flex"
|
|
alignItems="center"
|
|
{...formControlProps}
|
|
>
|
|
{label && (
|
|
<FormLabel
|
|
my={1}
|
|
flexGrow={1}
|
|
sx={{
|
|
cursor: isDisabled ? 'not-allowed' : 'pointer',
|
|
...formLabelProps?.sx,
|
|
pe: 4,
|
|
}}
|
|
{...formLabelProps}
|
|
>
|
|
{label}
|
|
</FormLabel>
|
|
)}
|
|
<Switch {...rest} />
|
|
</FormControl>
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
export default memo(IAISwitch);
|