fix: force default values

This commit is contained in:
Daniel
2025-11-25 21:51:00 +01:00
parent 5a891483b6
commit bcd1f66c9c
2 changed files with 50 additions and 39 deletions

View File

@@ -23,6 +23,8 @@ export interface SheetTabBarProps {
onSheetDeleted: () => void; onSheetDeleted: () => void;
onHideSheet: () => void; onHideSheet: () => void;
onOpenWorkbookSettings: () => void; onOpenWorkbookSettings: () => void;
initialLocale: string;
initialTimezone: string;
} }
function SheetTabBar(props: SheetTabBarProps) { function SheetTabBar(props: SheetTabBarProps) {
@@ -124,6 +126,8 @@ function SheetTabBar(props: SheetTabBarProps) {
<WorkbookSettingsDialog <WorkbookSettingsDialog
open={workbookSettingsOpen} open={workbookSettingsOpen}
onClose={() => setWorkbookSettingsOpen(false)} onClose={() => setWorkbookSettingsOpen(false)}
initialLocale={props.initialLocale}
initialTimezone={props.initialTimezone}
/> />
</Container> </Container>
); );

View File

@@ -16,18 +16,30 @@ import { theme } from "../../theme";
type WorkbookSettingsDialogProps = { type WorkbookSettingsDialogProps = {
open: boolean; open: boolean;
onClose: () => void; onClose: () => void;
initialLocale?: string; initialLocale: string;
initialTimezone?: string; initialTimezone: string;
onSave?: (locale: string, timezone: string) => void; onSave?: (locale: string, timezone: string) => void;
}; };
const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => { const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const locales = ["en-US", "en-GB", "de-DE", "fr-FR", "es-ES"];
const timezones = [
"Berlin, Germany (GMT+1)",
"New York, USA (GMT-5)",
"Tokyo, Japan (GMT+9)",
"London, UK (GMT+0)",
"Sydney, Australia (GMT+10)",
];
const [selectedLocale, setSelectedLocale] = useState<string>( const [selectedLocale, setSelectedLocale] = useState<string>(
properties.initialLocale || "", properties.initialLocale && locales.includes(properties.initialLocale)
? properties.initialLocale
: locales[0],
); );
const [selectedTimezone, setSelectedTimezone] = useState<string>( const [selectedTimezone, setSelectedTimezone] = useState<string>(
properties.initialTimezone || "", properties.initialTimezone && timezones.includes(properties.initialTimezone)
? properties.initialTimezone
: timezones[0],
); );
const handleSave = () => { const handleSave = () => {
@@ -37,15 +49,17 @@ const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => {
properties.onClose(); properties.onClose();
}; };
const timezones = [ // Ensure selectedLocale is always a valid locale
"Berlin, Germany (GMT+1)", const validSelectedLocale =
"New York, USA (GMT-5)", selectedLocale && locales.includes(selectedLocale)
"Tokyo, Japan (GMT+9)", ? selectedLocale
"London, UK (GMT+0)", : locales[0];
"Sydney, Australia (GMT+10)",
];
const locales = ["en-US", "en-GB", "de-DE", "fr-FR", "es-ES"]; // Ensure selectedTimezone is always a valid timezone
const validSelectedTimezone =
selectedTimezone && timezones.includes(selectedTimezone)
? selectedTimezone
: timezones[0];
return ( return (
<StyledDialog <StyledDialog
@@ -85,11 +99,10 @@ const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => {
<FormControl fullWidth> <FormControl fullWidth>
<StyledSelect <StyledSelect
id="locale" id="locale"
value={selectedLocale} value={validSelectedLocale}
onChange={(event) => { onChange={(event) => {
setSelectedLocale(event.target.value as string); setSelectedLocale(event.target.value as string);
}} }}
displayEmpty
MenuProps={{ MenuProps={{
PaperProps: { PaperProps: {
sx: menuPaperStyles, sx: menuPaperStyles,
@@ -99,18 +112,15 @@ const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => {
}, },
}} }}
> >
{locales.map((locale) => { {locales.map((locale) => (
const isSelected = locale === selectedLocale; <StyledMenuItem
return ( key={locale}
<StyledMenuItem value={locale}
key={locale} $isSelected={locale === selectedLocale}
value={locale} >
$isSelected={isSelected} {locale}
> </StyledMenuItem>
{locale} ))}
</StyledMenuItem>
);
})}
</StyledSelect> </StyledSelect>
<HelperBox> <HelperBox>
<Row> <Row>
@@ -139,24 +149,21 @@ const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => {
<FormControl fullWidth> <FormControl fullWidth>
<StyledAutocomplete <StyledAutocomplete
id="timezone" id="timezone"
value={selectedTimezone} value={validSelectedTimezone}
onChange={(_event, newValue) => { onChange={(_event, newValue) => {
setSelectedTimezone((newValue as string) || ""); setSelectedTimezone((newValue as string) || "");
}} }}
options={timezones} options={timezones}
renderInput={(params) => <TextField {...params} />} renderInput={(params) => <TextField {...params} />}
renderOption={(props, option) => { renderOption={(props, option) => (
const isSelected = option === selectedTimezone; <StyledMenuItem
return ( {...props}
<StyledMenuItem key={option as string}
{...props} $isSelected={option === validSelectedTimezone}
key={option as string} >
$isSelected={isSelected} {option as string}
> </StyledMenuItem>
{option as string} )}
</StyledMenuItem>
);
}}
disableClearable disableClearable
slotProps={{ slotProps={{
paper: { paper: {