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

fix(ui): revert IAICustomSelect usage to IAISelect

Browse Source 
There are some bugs with it that I cannot figure out related to `floating-ui` and `downshift`'s handling of refs.

Will need to revisit this component in the future.
This commit is contained in:
psychedelicious
2023-06-12 16:17:54 +10:00
parent 2e42a4bdd9
commit a3fa38b353
4 changed files with 149 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { memo, useCallback } from 'react';
import { ChangeEvent, memo, useCallback } from 'react';
import { isEqual } from 'lodash-es';
import { useTranslation } from 'react-i18next';
@ -11,6 +11,7 @@ import { generationSelector } from 'features/parameters/store/generationSelector
import IAICustomSelect, {
IAICustomSelectOption,
} from 'common/components/IAICustomSelect';
import IAISelect from 'common/components/IAISelect';
const selector = createSelector(
[(state: RootState) => state, generationSelector],
@ -18,12 +19,18 @@ const selector = createSelector(
const selectedModel = selectModelsById(state, generation.model);
const modelData = selectModelsAll(state)
.map<IAICustomSelectOption>((m) => ({
.map((m) => ({
value: m.name,
label: m.name,
tooltip: m.description,
key: m.name,
}))
.sort((a, b) => a.label.localeCompare(b.label));
.sort((a, b) => a.key.localeCompare(b.key));
// const modelData = selectModelsAll(state)
// .map<IAICustomSelectOption>((m) => ({
// value: m.name,
// label: m.name,
// tooltip: m.description,
// }))
// .sort((a, b) => a.label.localeCompare(b.label));
return {
selectedModel,
modelData,
@ -41,26 +48,43 @@ const ModelSelect = () => {
const { t } = useTranslation();
const { selectedModel, modelData } = useAppSelector(selector);
const handleChangeModel = useCallback(
(v: string | null | undefined) => {
if (!v) {
return;
}
dispatch(modelSelected(v));
(e: ChangeEvent<HTMLSelectElement>) => {
dispatch(modelSelected(e.target.value));
},
[dispatch]
);
// const handleChangeModel = useCallback(
// (v: string | null | undefined) => {
// if (!v) {
// return;
// }
// dispatch(modelSelected(v));
// },
// [dispatch]
// );
return (
<IAICustomSelect
<IAISelect
label={t('modelManager.model')}
tooltip={selectedModel?.description}
data={modelData}
validValues={modelData}
value={selectedModel?.name ?? ''}
onChange={handleChangeModel}
withCheckIcon={true}
tooltipProps={{ placement: 'top', hasArrow: true }}
/>
);
// return (
// <IAICustomSelect
// label={t('modelManager.model')}
// tooltip={selectedModel?.description}
// data={modelData}
// value={selectedModel?.name ?? ''}
// onChange={handleChangeModel}
// withCheckIcon={true}
// tooltipProps={{ placement: 'top', hasArrow: true }}
// />
// );
};
export default memo(ModelSelect);