github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): rename user-provided extra ctx for picker from ctx to extra to be less confusing

Browse Source
This commit is contained in:
psychedelicious
2025-04-22 19:56:38 +10:00
parent ed81a13eb4
commit 66eb73088e
2 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -148,6 +148,7 @@ type PickerProps<T extends object, U, C> = {
/**
* An optional object that can be used to pass additional data to custom picker components.
*/
extra: C;
};
type PickerContextState<T extends object, U, C> = {
@@ -163,7 +164,7 @@ type PickerContextState<T extends object, U, C> = {
noMatchesFallback?: React.ReactNode;
OptionComponent: React.ComponentType<{ option: T } & BoxProps>;
GroupComponent: React.ComponentType<PropsWithChildren<{ group: Group<T, U> } & BoxProps>>;
ctx: C;
extra: C;
};
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -260,7 +261,7 @@ export const Picker = typedMemo(<T extends object, U = undefined, C = undefined>
noOptionsFallback,
OptionComponent = DefaultOptionComponent,
GroupComponent = DefaultGroupComponent,
ctx: ctxProp,
extra,
} = props;
const [activeOptionId, setActiveOptionId, getActiveOptionId] = useStateImperative(() =>
getFirstOptionId(options, getOptionId)
@@ -427,7 +428,7 @@ export const Picker = typedMemo(<T extends object, U = undefined, C = undefined>
noMatchesFallback,
OptionComponent,
GroupComponent,
ctx: ctxProp,
extra,
setSearchTerm,
}) satisfies PickerContextState<T, U, C>,
[
@@ -442,7 +443,7 @@ export const Picker = typedMemo(<T extends object, U = undefined, C = undefined>
noMatchesFallback,
OptionComponent,
GroupComponent,
ctxProp,
extra,
]
);

18
invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/MainModelPicker.tsx
View File

@@ -95,7 +95,7 @@ export const MainModelPicker = memo(() => {
},
[basesWithModels]
);
const ctx = useMemo(
const extra = useMemo(
() => ({ toggleBaseModelTypeFilter, basesWithModels, baseModelTypeFilters }),
[toggleBaseModelTypeFilter, basesWithModels, baseModelTypeFilters]
);
@@ -201,7 +201,7 @@ export const MainModelPicker = memo(() => {
SearchBarComponent={SearchBarComponent}
noOptionsFallback={t('modelManager.noModelsInstalled')}
noMatchesFallback={t('modelManager.noMatchingModels')}
ctx={ctx}
extra={extra}
/>
</PopoverBody>
</PopoverContent>
@@ -216,7 +216,7 @@ const SearchBarComponent = typedMemo(
const { t } = useTranslation();
const dispatch = useAppDispatch();
const compactModelPicker = useAppSelector(selectCompactModelPicker);
const { ctx, setSearchTerm } = usePickerContext<AnyModelConfig, GroupData, PickerExtraContext>();
const { extra, setSearchTerm } = usePickerContext<AnyModelConfig, GroupData, PickerExtraContext>();
const onToggleCompact = useCallback(() => {
dispatch(compactModelPickerToggled());
}, [dispatch]);
@@ -251,7 +251,7 @@ const SearchBarComponent = typedMemo(
/>
</Flex>
<Flex gap={2} alignItems="center">
{ctx.basesWithModels.map((base) => (
{extra.basesWithModels.map((base) => (
<ModelBaseFilterButton key={base} base={base} />
))}
</Flex>
@@ -262,11 +262,11 @@ const SearchBarComponent = typedMemo(
SearchBarComponent.displayName = 'SearchBarComponent';
const ModelBaseFilterButton = memo(({ base }: { base: BaseModelType }) => {
const { ctx } = usePickerContext<AnyModelConfig, GroupData, PickerExtraContext>();
const { extra } = usePickerContext<AnyModelConfig, GroupData, PickerExtraContext>();
const onClick = useCallback(() => {
ctx.toggleBaseModelTypeFilter(base);
}, [base, ctx]);
extra.toggleBaseModelTypeFilter(base);
}, [base, extra]);
return (
<Badge
@@ -274,8 +274,8 @@ const ModelBaseFilterButton = memo(({ base }: { base: BaseModelType }) => {
size="xs"
variant="solid"
userSelect="none"
bg={ctx.baseModelTypeFilters[base] ? `${BASE_COLOR_MAP[base]}.300` : 'transparent'}
color={ctx.baseModelTypeFilters[base] ? undefined : 'base.200'}
bg={extra.baseModelTypeFilters[base] ? `${BASE_COLOR_MAP[base]}.300` : 'transparent'}
color={extra.baseModelTypeFilters[base] ? undefined : 'base.200'}
borderColor={`${BASE_COLOR_MAP[base]}.300`}
borderWidth={1}
onClick={onClick}