mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-07-28 13:47:43 +02:00
Convert to drop down
This commit is contained in:
Connor Yoh
parent
fabf2c5310
commit
2291b14d79
@ -1,6 +1,8 @@
|
||||
import React from "react";
|
||||
import { Stack, Text, Select, NumberInput, Group, Divider } from "@mantine/core";
|
||||
import { Stack, Text, Select, NumberInput, Group, Divider, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
|
||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import GroupedFormatDropdown from "./GroupedFormatDropdown";
|
||||
import { ConvertParameters } from "../../../hooks/tools/convert/useConvertParameters";
|
||||
import {
|
||||
FROM_FORMAT_OPTIONS,
|
||||
@ -23,6 +25,8 @@ const ConvertSettings = ({
|
||||
disabled = false
|
||||
}: ConvertSettingsProps) => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useMantineTheme();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
|
||||
const handleFromExtensionChange = (value: string | null) => {
|
||||
if (value) {
|
||||
@ -38,18 +42,17 @@ const ConvertSettings = ({
|
||||
}
|
||||
};
|
||||
|
||||
const handleToExtensionChange = (value: string | null) => {
|
||||
if (value) {
|
||||
onParameterChange('toExtension', value);
|
||||
// Reset format-specific options when target extension changes
|
||||
onParameterChange('imageOptions', {
|
||||
colorType: COLOR_TYPES.COLOR,
|
||||
dpi: 300,
|
||||
singleOrMultiple: OUTPUT_OPTIONS.MULTIPLE,
|
||||
});
|
||||
}
|
||||
const handleToExtensionChange = (value: string) => {
|
||||
onParameterChange('toExtension', value);
|
||||
// Reset format-specific options when target extension changes
|
||||
onParameterChange('imageOptions', {
|
||||
colorType: COLOR_TYPES.COLOR,
|
||||
dpi: 300,
|
||||
singleOrMultiple: OUTPUT_OPTIONS.MULTIPLE,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Stack gap="md">
|
||||
{/* Format Selection */}
|
||||
@ -72,15 +75,37 @@ const ConvertSettings = ({
|
||||
<Text size="sm" fw={500}>
|
||||
{t("convert.convertTo", "Convert to")}:
|
||||
</Text>
|
||||
<Select
|
||||
value={parameters.toExtension}
|
||||
onChange={handleToExtensionChange}
|
||||
data={(getAvailableToExtensions(parameters.fromExtension) || []).map(option => ({ value: option.value, label: option.label }))}
|
||||
disabled={!parameters.fromExtension || disabled}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="Select target file format"
|
||||
/>
|
||||
{!parameters.fromExtension ? (
|
||||
<UnstyledButton
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
border: `1px solid ${theme.colors.gray[4]}`,
|
||||
borderRadius: theme.radius.sm,
|
||||
backgroundColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
|
||||
color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
|
||||
cursor: 'not-allowed'
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Text size="sm">Select a source format first</Text>
|
||||
<KeyboardArrowDownIcon
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
) : (
|
||||
<GroupedFormatDropdown
|
||||
value={parameters.toExtension}
|
||||
placeholder="Select target file format"
|
||||
options={getAvailableToExtensions(parameters.fromExtension) || []}
|
||||
onChange={handleToExtensionChange}
|
||||
disabled={disabled}
|
||||
minWidth="350px"
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
{/* Format-specific options */}
|
||||
|
||||
143
frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
Normal file
143
frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
Normal file
@ -0,0 +1,143 @@
|
||||
import React, { useState, useMemo } from "react";
|
||||
import { Stack, Text, Group, Button, Box, Popover, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
|
||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
||||
|
||||
interface FormatOption {
|
||||
value: string;
|
||||
label: string;
|
||||
group: string;
|
||||
}
|
||||
|
||||
interface GroupedFormatDropdownProps {
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
options: FormatOption[];
|
||||
onChange: (value: string) => void;
|
||||
disabled?: boolean;
|
||||
minWidth?: string;
|
||||
}
|
||||
|
||||
const GroupedFormatDropdown = ({
|
||||
value,
|
||||
placeholder = "Select an option",
|
||||
options,
|
||||
onChange,
|
||||
disabled = false,
|
||||
minWidth = "300px"
|
||||
}: GroupedFormatDropdownProps) => {
|
||||
const [dropdownOpened, setDropdownOpened] = useState(false);
|
||||
const theme = useMantineTheme();
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
|
||||
// Group options by category
|
||||
const groupedOptions = useMemo(() => {
|
||||
const groups: Record<string, FormatOption[]> = {};
|
||||
|
||||
options.forEach(option => {
|
||||
if (!groups[option.group]) {
|
||||
groups[option.group] = [];
|
||||
}
|
||||
groups[option.group].push(option);
|
||||
});
|
||||
|
||||
return groups;
|
||||
}, [options]);
|
||||
|
||||
// Get selected option label for display
|
||||
const selectedLabel = useMemo(() => {
|
||||
if (!value) return placeholder;
|
||||
const selected = options.find(opt => opt.value === value);
|
||||
return selected ? selected.label : value;
|
||||
}, [value, options, placeholder]);
|
||||
|
||||
const handleOptionSelect = (selectedValue: string) => {
|
||||
onChange(selectedValue);
|
||||
setDropdownOpened(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover
|
||||
opened={dropdownOpened}
|
||||
onClose={() => setDropdownOpened(false)}
|
||||
position="bottom-start"
|
||||
withArrow
|
||||
shadow="sm"
|
||||
disabled={disabled}
|
||||
>
|
||||
<Popover.Target>
|
||||
<UnstyledButton
|
||||
onClick={() => setDropdownOpened(!dropdownOpened)}
|
||||
disabled={disabled}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
border: `1px solid ${theme.colors.gray[4]}`,
|
||||
borderRadius: theme.radius.sm,
|
||||
backgroundColor: disabled
|
||||
? theme.colors.gray[1]
|
||||
: colorScheme === 'dark'
|
||||
? theme.colors.dark[6]
|
||||
: theme.white,
|
||||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||
width: '100%',
|
||||
color: colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.dark[9]
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between">
|
||||
<Text size="sm" c={value ? undefined : 'dimmed'}>
|
||||
{selectedLabel}
|
||||
</Text>
|
||||
<KeyboardArrowDownIcon
|
||||
style={{
|
||||
fontSize: 16,
|
||||
transform: dropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',
|
||||
transition: 'transform 0.2s ease',
|
||||
color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown
|
||||
style={{
|
||||
minWidth,
|
||||
backgroundColor: colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
|
||||
border: `1px solid ${colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]}`,
|
||||
}}
|
||||
>
|
||||
<Stack gap="md">
|
||||
{Object.entries(groupedOptions).map(([groupName, groupOptions]) => (
|
||||
<Box key={groupName}>
|
||||
<Text
|
||||
size="sm"
|
||||
fw={600}
|
||||
c={colorScheme === 'dark' ? 'dark.2' : 'gray.6'}
|
||||
mb="xs"
|
||||
>
|
||||
{groupName}
|
||||
</Text>
|
||||
<Group gap="xs">
|
||||
{groupOptions.map((option) => (
|
||||
<Button
|
||||
key={option.value}
|
||||
variant={value === option.value ? "filled" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => handleOptionSelect(option.value)}
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
height: '32px',
|
||||
padding: '0 12px'
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
))}
|
||||
</Group>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupedFormatDropdown;
|
||||
Loading…
Reference in New Issue
Block a user