File size: 2,759 Bytes
8a37e0a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import { Flex } from '@invoke-ai/ui-library';
import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppSelector } from 'app/store/storeHooks';
import { StylePresetExportButton } from 'features/stylePresets/components/StylePresetExportButton';
import { StylePresetImportButton } from 'features/stylePresets/components/StylePresetImportButton';
import { selectStylePresetSearchTerm } from 'features/stylePresets/store/stylePresetSlice';
import { selectAllowPrivateStylePresets } from 'features/system/store/configSlice';
import { useTranslation } from 'react-i18next';
import type { StylePresetRecordWithImage } from 'services/api/endpoints/stylePresets';
import { useListStylePresetsQuery } from 'services/api/endpoints/stylePresets';
import { StylePresetCreateButton } from './StylePresetCreateButton';
import { StylePresetList } from './StylePresetList';
import StylePresetSearch from './StylePresetSearch';
export const StylePresetMenu = () => {
const searchTerm = useAppSelector(selectStylePresetSearchTerm);
const allowPrivateStylePresets = useAppSelector(selectAllowPrivateStylePresets);
const { data } = useListStylePresetsQuery(undefined, {
selectFromResult: ({ data }) => {
const filteredData =
data?.filter((preset) => preset.name.toLowerCase().includes(searchTerm.toLowerCase())) || EMPTY_ARRAY;
const groupedData = filteredData.reduce(
(
acc: {
defaultPresets: StylePresetRecordWithImage[];
sharedPresets: StylePresetRecordWithImage[];
presets: StylePresetRecordWithImage[];
},
preset
) => {
if (preset.type === 'default') {
acc.defaultPresets.push(preset);
} else if (preset.type === 'project') {
acc.sharedPresets.push(preset);
} else {
acc.presets.push(preset);
}
return acc;
},
{ defaultPresets: [], sharedPresets: [], presets: [] }
);
return {
data: groupedData,
};
},
});
const { t } = useTranslation();
return (
<Flex flexDir="column" gap={2} padding={3} layerStyle="second" borderRadius="base">
<Flex alignItems="center" gap={2} w="full" justifyContent="space-between">
<StylePresetSearch />
<StylePresetCreateButton />
<StylePresetImportButton />
<StylePresetExportButton />
</Flex>
<StylePresetList title={t('stylePresets.myTemplates')} data={data.presets} />
{allowPrivateStylePresets && (
<StylePresetList title={t('stylePresets.sharedTemplates')} data={data.sharedPresets} />
)}
<StylePresetList title={t('stylePresets.defaultTemplates')} data={data.defaultPresets} />
</Flex>
);
};
|