update edit creation time date picker
This commit is contained in:
parent
f17204f776
commit
0d86a0dc3f
|
@ -1,50 +1,37 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import DatePicker from 'react-datepicker';
|
|
||||||
import 'react-datepicker/dist/react-datepicker.css';
|
|
||||||
import {
|
import {
|
||||||
MIN_EDITED_CREATION_TIME,
|
MIN_EDITED_CREATION_TIME,
|
||||||
MAX_EDITED_CREATION_TIME,
|
MAX_EDITED_CREATION_TIME,
|
||||||
ALL_TIME,
|
|
||||||
} from 'constants/file';
|
} from 'constants/file';
|
||||||
|
import { TextField } from '@mui/material';
|
||||||
const isSameDay = (first, second) =>
|
import {
|
||||||
first.getFullYear() === second.getFullYear() &&
|
LocalizationProvider,
|
||||||
first.getMonth() === second.getMonth() &&
|
DesktopDateTimePicker,
|
||||||
first.getDate() === second.getDate();
|
} from '@mui/x-date-pickers';
|
||||||
|
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
loading?: boolean;
|
loading?: boolean;
|
||||||
isInEditMode: boolean;
|
value: Date;
|
||||||
pickedTime: Date;
|
label?: string;
|
||||||
handleChange: (date: Date) => void;
|
onChange: (date: Date) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const EnteDateTimePicker = ({
|
const EnteDateTimePicker = ({ loading, value, onChange }: Props) => (
|
||||||
loading,
|
<>
|
||||||
isInEditMode,
|
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||||
pickedTime,
|
<DesktopDateTimePicker
|
||||||
handleChange,
|
maxDateTime={MAX_EDITED_CREATION_TIME}
|
||||||
}: Props) => (
|
minDateTime={MIN_EDITED_CREATION_TIME}
|
||||||
<DatePicker
|
disabled={loading}
|
||||||
disabled={loading}
|
PopperProps={{ sx: { zIndex: '1502' } }}
|
||||||
open={isInEditMode}
|
value={value}
|
||||||
selected={pickedTime}
|
onChange={onChange}
|
||||||
onChange={handleChange}
|
renderInput={(params) => <TextField {...params} />}
|
||||||
timeInputLabel="Time:"
|
/>
|
||||||
dateFormat="dd/MM/yyyy h:mm aa"
|
</LocalizationProvider>
|
||||||
showTimeSelect
|
</>
|
||||||
autoFocus
|
|
||||||
minDate={MIN_EDITED_CREATION_TIME}
|
|
||||||
maxDate={MAX_EDITED_CREATION_TIME}
|
|
||||||
maxTime={
|
|
||||||
isSameDay(pickedTime, new Date())
|
|
||||||
? MAX_EDITED_CREATION_TIME
|
|
||||||
: ALL_TIME
|
|
||||||
}
|
|
||||||
minTime={MIN_EDITED_CREATION_TIME}
|
|
||||||
fixedHeight
|
|
||||||
withPortal></DatePicker>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
export default EnteDateTimePicker;
|
export default EnteDateTimePicker;
|
||||||
|
|
|
@ -69,9 +69,8 @@ export default function FixCreationTimeOptions({ handleChange, values }) {
|
||||||
{Number(values.option) === FIX_OPTIONS.CUSTOM_TIME && (
|
{Number(values.option) === FIX_OPTIONS.CUSTOM_TIME && (
|
||||||
<Value width="40%">
|
<Value width="40%">
|
||||||
<EnteDateTimePicker
|
<EnteDateTimePicker
|
||||||
isInEditMode
|
value={new Date(values.customTime)}
|
||||||
pickedTime={new Date(values.customTime)}
|
onChange={(x: Date) =>
|
||||||
handleChange={(x: Date) =>
|
|
||||||
handleChange('customTime')(x.toUTCString())
|
handleChange('customTime')(x.toUTCString())
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -12,8 +12,8 @@ import { IconButton, Label, Row, Value } from 'components/Container';
|
||||||
import { logError } from 'utils/sentry';
|
import { logError } from 'utils/sentry';
|
||||||
import CloseIcon from '@mui/icons-material/Close';
|
import CloseIcon from '@mui/icons-material/Close';
|
||||||
import TickIcon from '@mui/icons-material/Done';
|
import TickIcon from '@mui/icons-material/Done';
|
||||||
import EnteDateTimePicker from 'components/EnteDateTimePicker';
|
|
||||||
import { SmallLoadingSpinner } from '../styledComponents/SmallLoadingSpinner';
|
import { SmallLoadingSpinner } from '../styledComponents/SmallLoadingSpinner';
|
||||||
|
import EnteDateTimePicker from 'components/EnteDateTimePicker';
|
||||||
|
|
||||||
export function RenderCreationTime({
|
export function RenderCreationTime({
|
||||||
shouldDisableEdits,
|
shouldDisableEdits,
|
||||||
|
@ -81,12 +81,13 @@ export function RenderCreationTime({
|
||||||
: '70%'
|
: '70%'
|
||||||
}>
|
}>
|
||||||
{isInEditMode ? (
|
{isInEditMode ? (
|
||||||
<EnteDateTimePicker
|
<>
|
||||||
loading={loading}
|
<EnteDateTimePicker
|
||||||
isInEditMode={isInEditMode}
|
loading={loading}
|
||||||
pickedTime={pickedTime}
|
value={pickedTime}
|
||||||
handleChange={handleChange}
|
onChange={handleChange}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
) : (
|
) : (
|
||||||
formatDateTime(pickedTime)
|
formatDateTime(pickedTime)
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
export const MIN_EDITED_CREATION_TIME = new Date(1800, 0, 1);
|
export const MIN_EDITED_CREATION_TIME = new Date(1800, 0, 1);
|
||||||
export const MAX_EDITED_CREATION_TIME = new Date();
|
export const MAX_EDITED_CREATION_TIME = new Date();
|
||||||
export const ALL_TIME = new Date(1800, 0, 1, 23, 59, 59);
|
|
||||||
|
|
||||||
export const MAX_EDITED_FILE_NAME_LENGTH = 100;
|
export const MAX_EDITED_FILE_NAME_LENGTH = 100;
|
||||||
export const MAX_TRASH_BATCH_SIZE = 1000;
|
export const MAX_TRASH_BATCH_SIZE = 1000;
|
||||||
|
|
|
@ -202,7 +202,7 @@ export function formatDateTime(date: number | Date) {
|
||||||
day: 'numeric',
|
day: 'numeric',
|
||||||
});
|
});
|
||||||
const timeFormat = new Intl.DateTimeFormat('en-IN', {
|
const timeFormat = new Intl.DateTimeFormat('en-IN', {
|
||||||
timeStyle: 'medium',
|
timeStyle: 'short',
|
||||||
});
|
});
|
||||||
return `${dateTimeFormat.format(date)} ${timeFormat.format(date)}`;
|
return `${dateTimeFormat.format(date)} ${timeFormat.format(date)}`;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue