mirror of
https://github.com/Unleash/unleash.git
synced 2025-08-13 13:48:59 +02:00
Add simple placeholder for locale setting format
This commit is contained in:
parent
1d3aea47dc
commit
bd8c0414f0
@ -1,4 +1,4 @@
|
|||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useId, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
FormControl,
|
FormControl,
|
||||||
@ -15,12 +15,13 @@ import { useProfile } from 'hooks/api/getters/useProfile/useProfile';
|
|||||||
import { useLocationSettings } from 'hooks/useLocationSettings';
|
import { useLocationSettings } from 'hooks/useLocationSettings';
|
||||||
import type { IUser } from 'interfaces/user';
|
import type { IUser } from 'interfaces/user';
|
||||||
import TopicOutlinedIcon from '@mui/icons-material/TopicOutlined';
|
import TopicOutlinedIcon from '@mui/icons-material/TopicOutlined';
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { PageContent } from 'component/common/PageContent/PageContent';
|
import { PageContent } from 'component/common/PageContent/PageContent';
|
||||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||||
import { RoleBadge } from 'component/common/RoleBadge/RoleBadge';
|
import { RoleBadge } from 'component/common/RoleBadge/RoleBadge';
|
||||||
import { useUiFlag } from 'hooks/useUiFlag';
|
import { useUiFlag } from 'hooks/useUiFlag';
|
||||||
import { ProductivityEmailSubscription } from './ProductivityEmailSubscription.tsx';
|
import { ProductivityEmailSubscription } from './ProductivityEmailSubscription.tsx';
|
||||||
|
import { formatDateYMDHM } from 'utils/formatDate.ts';
|
||||||
|
|
||||||
const StyledHeader = styled('div')(({ theme }) => ({
|
const StyledHeader = styled('div')(({ theme }) => ({
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
@ -79,7 +80,6 @@ const StyledDivider = styled('div')(({ theme }) => ({
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
const StyledFormControl = styled(FormControl)(({ theme }) => ({
|
const StyledFormControl = styled(FormControl)(({ theme }) => ({
|
||||||
marginTop: theme.spacing(1.5),
|
|
||||||
width: theme.spacing(30),
|
width: theme.spacing(30),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
@ -99,11 +99,21 @@ const ProjectList = styled('ul')(({ theme }) => ({
|
|||||||
gap: theme.spacing(1),
|
gap: theme.spacing(1),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
const exampleDate = new Date('2014-09-29T14:50:46');
|
||||||
|
|
||||||
|
const LocaleSelector = styled('div')(({ theme }) => ({
|
||||||
|
marginTop: theme.spacing(1.5),
|
||||||
|
display: 'flex',
|
||||||
|
flexFlow: 'row wrap',
|
||||||
|
gap: theme.spacing(1),
|
||||||
|
alignItems: 'center',
|
||||||
|
}));
|
||||||
|
|
||||||
export const ProfileTab = ({ user }: IProfileTabProps) => {
|
export const ProfileTab = ({ user }: IProfileTabProps) => {
|
||||||
const { profile, refetchProfile } = useProfile();
|
const { profile, refetchProfile } = useProfile();
|
||||||
const navigate = useNavigate();
|
|
||||||
const { locationSettings, setLocationSettings } = useLocationSettings();
|
const { locationSettings, setLocationSettings } = useLocationSettings();
|
||||||
const [currentLocale, setCurrentLocale] = useState<string>();
|
const [currentLocale, setCurrentLocale] = useState<string>();
|
||||||
|
const exampleDateId = useId();
|
||||||
|
|
||||||
const [possibleLocales, setPossibleLocales] = useState([
|
const [possibleLocales, setPossibleLocales] = useState([
|
||||||
'en-US',
|
'en-US',
|
||||||
@ -215,30 +225,36 @@ export const ProfileTab = ({ user }: IProfileTabProps) => {
|
|||||||
<Typography variant='body2'>
|
<Typography variant='body2'>
|
||||||
This is the format used across the system for time and date
|
This is the format used across the system for time and date
|
||||||
</Typography>
|
</Typography>
|
||||||
<StyledFormControl variant='outlined' size='small'>
|
<LocaleSelector>
|
||||||
<StyledInputLabel htmlFor='locale-select'>
|
<StyledFormControl variant='outlined' size='small'>
|
||||||
Date/Time formatting
|
<StyledInputLabel htmlFor='locale-select'>
|
||||||
</StyledInputLabel>
|
Date/Time formatting
|
||||||
<Select
|
</StyledInputLabel>
|
||||||
id='locale-select'
|
<Select
|
||||||
value={currentLocale || ''}
|
aria-details={exampleDateId}
|
||||||
native
|
id='locale-select'
|
||||||
onChange={changeLocale}
|
value={currentLocale || ''}
|
||||||
MenuProps={{
|
native
|
||||||
style: {
|
onChange={changeLocale}
|
||||||
zIndex: 9999,
|
MenuProps={{
|
||||||
},
|
style: {
|
||||||
}}
|
zIndex: 9999,
|
||||||
>
|
},
|
||||||
{possibleLocales.map((locale) => {
|
}}
|
||||||
return (
|
>
|
||||||
<option key={locale} value={locale}>
|
{possibleLocales.map((locale) => {
|
||||||
{locale}
|
return (
|
||||||
</option>
|
<option key={locale} value={locale}>
|
||||||
);
|
{locale}
|
||||||
})}
|
</option>
|
||||||
</Select>
|
);
|
||||||
</StyledFormControl>
|
})}
|
||||||
|
</Select>
|
||||||
|
</StyledFormControl>
|
||||||
|
<span id={exampleDateId}>
|
||||||
|
Example: {formatDateYMDHM(exampleDate, currentLocale)}
|
||||||
|
</span>
|
||||||
|
</LocaleSelector>
|
||||||
{productivityReportEmailEnabled ? (
|
{productivityReportEmailEnabled ? (
|
||||||
<>
|
<>
|
||||||
<StyledDivider />
|
<StyledDivider />
|
||||||
|
@ -14,7 +14,7 @@ export const formatDateYMDHMS = (
|
|||||||
|
|
||||||
export const formatDateYMDHM = (
|
export const formatDateYMDHM = (
|
||||||
date: number | string | Date,
|
date: number | string | Date,
|
||||||
locale: string,
|
locale?: string,
|
||||||
timeZone?: string,
|
timeZone?: string,
|
||||||
): string => {
|
): string => {
|
||||||
return new Date(date).toLocaleString(locale, {
|
return new Date(date).toLocaleString(locale, {
|
||||||
|
Loading…
Reference in New Issue
Block a user