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): Basic IAIOption Component & Fix Select Dropdown

Browse Source
This commit is contained in:
blessedcoolant 2023-03-12 16:36:29 +13:00 committed by psychedelicious
parent 4bb5785f29
commit 220f7373c8
2 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
invokeai/frontend/web/src/common/components/IAIOption.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useToken } from '@chakra-ui/react';
import { ReactNode } from 'react';
type IAIOptionProps = {
children: ReactNode | string | number;
value: string | number;
key: string | number;
};
export default function IAIOption(props: IAIOptionProps) {
const { children, value, key } = props;
const [base800, base200] = useToken('colors', ['base.800', 'base.200']);
return (
<option
key={key}
value={value}
style={{ background: base800, color: base200 }}
>
{children}
</option>
);
}

9
invokeai/frontend/web/src/common/components/IAISelect.tsx
View File

@ -7,6 +7,7 @@ import {
TooltipProps,
} from '@chakra-ui/react';
import { memo, MouseEvent } from 'react';
import IAIOption from './IAIOption';
type IAISelectProps = SelectProps & {
label?: string;
@ -37,13 +38,13 @@ const IAISelect = (props: IAISelectProps) => {
<Select {...rest}>
{validValues.map((opt) => {
return typeof opt === 'string' || typeof opt === 'number' ? (
<option key={opt} value={opt}>
<IAIOption key={opt} value={opt}>
{opt}
</option>
</IAIOption>
) : (
<option key={opt.value} value={opt.value}>
<IAIOption key={opt.value} value={opt.value}>
{opt.key}
</option>
</IAIOption>
);
})}
</Select>