ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use browser language as dayjs locale

Browse Source
This commit is contained in:
schroda
2024-05-02 22:14:34 +02:00
parent fc9a849c1b
commit e54a98001a
3 changed files with 12 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/settings/DateSetting.tsx
View File

@@ -20,7 +20,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { loadDayJsLocale } from '@/util/language.tsx';
export const DateSetting = ({
settingName,
@@ -35,19 +34,11 @@ export const DateSetting = ({
handleChange: (path?: string | null) => void;
remove?: boolean;
}) => {
const { t, i18n } = useTranslation();
const { t } = useTranslation();
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [dialogValue, setDialogValue] = useState(value ?? defaultValue);
const [locale, setLocale] = useState('en');
const currentLocale = i18n.language;
useEffect(() => {
loadDayJsLocale(currentLocale).then((wasLoaded) => setLocale(wasLoaded ? currentLocale : 'en'));
}, [currentLocale]);
useEffect(() => {
if (!value) {
return;
@@ -90,7 +81,7 @@ export const DateSetting = ({
<ListItemButton onClick={() => setIsDialogOpen(true)}>
<ListItemText
primary={settingName}
secondary={value ? dayjs(Number(value)).locale(currentLocale).format('L') : '-'}
secondary={value ? dayjs(Number(value)).format('L') : '-'}
secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
/>
</ListItemButton>
@@ -98,7 +89,7 @@ export const DateSetting = ({
<Dialog open={isDialogOpen} onClose={closeDialog}>
<DialogContent>
<DialogTitle sx={{ paddingLeft: 0 }}>{settingName}</DialogTitle>
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={locale}>
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={navigator.language}>
<DatePicker
value={dialogValue ? dayjs(Number(dialogValue)) : null}
onChange={(date) => {

17
src/components/settings/TimeSetting.tsx
View File

@@ -19,7 +19,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import dayjs from 'dayjs';
import { loadDayJsLocale } from '@/util/language.tsx';
export const TimeSetting = ({
settingName,
@@ -32,19 +31,11 @@ export const TimeSetting = ({
defaultValue: string;
handleChange: (path: string) => void;
}) => {
const { t, i18n } = useTranslation();
const { t } = useTranslation();
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [dialogValue, setDialogValue] = useState(value);
const [locale, setLocale] = useState('en');
const currentLocale = i18n.language;
useEffect(() => {
loadDayJsLocale(currentLocale).then((wasLoaded) => setLocale(wasLoaded ? currentLocale : 'en'));
}, [currentLocale]);
useEffect(() => {
if (!value) {
return;
@@ -81,13 +72,13 @@ export const TimeSetting = ({
},
[value, handleChange, closeDialog],
);
console.log(navigator.language);
return (
<>
<ListItemButton onClick={() => setIsDialogOpen(true)}>
<ListItemText
primary={settingName}
secondary={dayjs(value, 'HH:mm').locale(currentLocale).format('LT')}
secondary={dayjs(value, 'HH:mm').format('LT')}
secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
/>
</ListItemButton>
@@ -95,7 +86,7 @@ export const TimeSetting = ({
<Dialog open={isDialogOpen} onClose={closeDialog}>
<DialogContent>
<DialogTitle sx={{ paddingLeft: 0 }}>{settingName}</DialogTitle>
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={locale}>
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={navigator.language}>
<TimePicker
value={dayjs(dialogValue, 'HH:mm')}
defaultValue={dayjs(defaultValue, 'HH:mm')}