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: Standardize IAIMantineSelect Component

Browse Source
This commit is contained in:
blessedcoolant 2023-06-12 21:25:37 +12:00 committed by psychedelicious
parent 32200efce8
commit 5fe674e223
4 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
View File

@ -53,7 +53,7 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
}, [direction]); }, [direction]);
return ( return (
<MantineProvider withGlobalStyles withNormalizeCSS theme={mantineTheme}> <MantineProvider withGlobalStyles theme={mantineTheme}>
<ChakraProvider theme={theme} colorModeManager={manager}> <ChakraProvider theme={theme} colorModeManager={manager}>
{children} {children}
</ChakraProvider> </ChakraProvider>

11
invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Select, SelectProps } from '@mantine/core';
import { memo } from 'react';
type IAISelectProps = SelectProps;
const IAIMantineSelect = (props: IAISelectProps) => {
const { searchable = true, ...rest } = props;
return <Select searchable={searchable} {...rest} />;
};
export default memo(IAIMantineSelect);

5
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx
View File

@ -1,8 +1,8 @@
import { Select } from '@mantine/core';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { Scheduler } from 'app/constants'; import { Scheduler } from 'app/constants';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { generationSelector } from 'features/parameters/store/generationSelectors'; import { generationSelector } from 'features/parameters/store/generationSelectors';
import { setScheduler } from 'features/parameters/store/generationSlice'; import { setScheduler } from 'features/parameters/store/generationSlice';
import { uiSelector } from 'features/ui/store/uiSelectors'; import { uiSelector } from 'features/ui/store/uiSelectors';
@ -51,12 +51,11 @@ const ParamScheduler = () => {
// ); // );
return ( return (
<Select <IAIMantineSelect
label={t('parameters.scheduler')} label={t('parameters.scheduler')}
value={scheduler} value={scheduler}
validValues={allSchedulers} validValues={allSchedulers}
onChange={handleChange} onChange={handleChange}
searchable
/> />
); );

5
invokeai/frontend/web/src/features/system/components/ModelSelect.tsx
View File

@ -3,10 +3,10 @@ import { isEqual } from 'lodash-es';
import { ChangeEvent, memo, useCallback } from 'react'; import { ChangeEvent, memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Select } from '@mantine/core';
import { RootState } from 'app/store/store'; import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { IAICustomSelectOption } from 'common/components/IAICustomSelect'; import { IAICustomSelectOption } from 'common/components/IAICustomSelect';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { generationSelector } from 'features/parameters/store/generationSelectors'; import { generationSelector } from 'features/parameters/store/generationSelectors';
import { modelSelected } from 'features/parameters/store/generationSlice'; import { modelSelected } from 'features/parameters/store/generationSlice';
import { selectModelsAll, selectModelsById } from '../store/modelSlice'; import { selectModelsAll, selectModelsById } from '../store/modelSlice';
@ -62,12 +62,11 @@ const ModelSelect = () => {
// ); // );
return ( return (
<Select <IAIMantineSelect
label={t('modelManager.model')} label={t('modelManager.model')}
value={selectedModel?.name ?? ''} value={selectedModel?.name ?? ''}
placeholder="Pick one" placeholder="Pick one"
data={modelData} data={modelData}
searchable
onChange={handleChangeModel} onChange={handleChangeModel}
/> />
); );