Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-14 17:26:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix filtering and data array for integration options select

Browse Source
This commit is contained in:
Manuel Ruwe
2023-01-03 21:23:37 +01:00
parent 501714113f
commit 8a91edbd59
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx
View File

@@ -36,7 +36,7 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
label: 'Transmission', label: 'Transmission',
}, },
{ {
value: 'qbittorrent', value: 'qBittorrent',
image: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/qbittorrent.png', image: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/qbittorrent.png',
label: 'qBittorrent', label: 'qBittorrent',
}, },
@@ -100,16 +100,20 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
placeholder={t('integration.type.placeholder')} placeholder={t('integration.type.placeholder')}
itemComponent={SelectItemComponent} itemComponent={SelectItemComponent}
data={data} data={data}
maxDropdownHeight={150} maxDropdownHeight={250}
dropdownPosition="bottom" dropdownPosition="bottom"
clearable clearable
variant="default" variant="default"
searchable searchable
filter={(value, item) =>
item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
item.description?.toLowerCase().includes(value.toLowerCase().trim())
}
icon={ icon={
form.values.integration?.type && ( form.values.integration?.type && (
<img <img
src={data.find((x) => x.value === form.values.integration?.type)?.image} src={data.find((x) => x.value === form.values.integration?.type)?.image}
alt="test" alt="integration"
width={20} width={20}
height={20} height={20}
/> />
@@ -119,6 +123,7 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
form.setFieldValue('integration.properties', getNewProperties(value)); form.setFieldValue('integration.properties', getNewProperties(value));
inputProps.onChange(value); inputProps.onChange(value);
}} }}
withinPortal
{...inputProps} {...inputProps}
/> />
); );
@@ -126,17 +131,23 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
interface ItemProps extends React.ComponentPropsWithoutRef<'div'> { interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
image: string; image: string;
description: string;
label: string; label: string;
} }
const SelectItemComponent = forwardRef<HTMLDivElement, ItemProps>( const SelectItemComponent = forwardRef<HTMLDivElement, ItemProps>(
({ image, label, ...others }: ItemProps, ref) => ( ({ image, label, description, ...others }: ItemProps, ref) => (
<div ref={ref} {...others}> <div ref={ref} {...others}>
<Group noWrap> <Group noWrap>
<img src={image} alt="integration icon" width={20} height={20} /> <img src={image} alt="integration icon" width={20} height={20} />
<div> <div>
<Text size="sm">{label}</Text> <Text size="sm">{label}</Text>
{description && (
<Text size="xs" color="dimmed">
{description}
</Text>
)}
</div> </div>
</Group> </Group>
</div> </div>