beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor date picker into seperate component

Browse source
This commit is contained in:
Abhinav 2021-11-18 22:20:53 +05:30
parent e913615f57
commit 91cbbfc3eb
2 changed files with 43 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/EnteDateTimePicker.tsx Normal file
View file

@ -0,0 +1,37 @@
import React from 'react';
import {
MIN_EDITED_CREATION_TIME,
MAX_EDITED_CREATION_TIME,
ALL_TIME,
} from 'services/fileService';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
const isSameDay = (first, second) =>
first.getFullYear() === second.getFullYear() &&
first.getMonth() === second.getMonth() &&
first.getDate() === second.getDate();
const EnteDateTimePicker = ({ isInEditMode, pickedTime, handleChange }) => (
<DatePicker
open={isInEditMode}
selected={pickedTime}
onChange={handleChange}
timeInputLabel="Time:"
dateFormat="dd/MM/yyyy h:mm aa"
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;

34
src/components/PhotoSwipe/PhotoSwipe.tsx
View file

@ -8,11 +8,8 @@ import {
removeFromFavorites,
} from 'services/collectionService';
import {
ALL_TIME,
File,
MAX_EDITED_FILE_NAME_LENGTH,
MAX_EDITED_CREATION_TIME,
MIN_EDITED_CREATION_TIME,
updatePublicMagicMetadata,
} from 'services/fileService';
import constants from 'utils/strings/constants';
@ -41,14 +38,13 @@ import {
} from 'components/Container';
import { logError } from 'utils/sentry';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import CloseIcon from 'components/icons/CloseIcon';
import TickIcon from 'components/icons/TickIcon';
import { FreeFlowText } from 'components/RecoveryKeyModal';
import { Formik } from 'formik';
import * as Yup from 'yup';
import EnteSpinner from 'components/EnteSpinner';
import EnteDateTimePicker from 'components/EnteDateTimePicker';
interface Iprops {
isOpen: boolean;
@ -87,11 +83,6 @@ const renderInfoItem = (label: string, value: string | JSX.Element) => (
</Row>
);
const isSameDay = (first, second) =>
first.getFullYear() === second.getFullYear() &&
first.getMonth() === second.getMonth() &&
first.getDate() === second.getDate();
function RenderCreationTime({
file,
scheduleUpdate,
@ -145,24 +136,11 @@ function RenderCreationTime({
<Label width="30%">{constants.CREATION_TIME}</Label>
<Value width={isInEditMode ? '50%' : '60%'}>
{isInEditMode ? (
<DatePicker
open={isInEditMode}
selected={pickedTime}
onChange={handleChange}
timeInputLabel="Time:"
dateFormat="dd/MM/yyyy h:mm aa"
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>
<EnteDateTimePicker
isInEditMode={isInEditMode}
pickedTime={pickedTime}
handleChange={handleChange}
/>
) : (
formatDateTime(pickedTime)
)}