sforkowany z mirror/soapbox
99 wiersze
3.1 KiB
TypeScript
99 wiersze
3.1 KiB
TypeScript
'use strict';
|
|
|
|
import classNames from 'clsx';
|
|
import { enUS, it } from 'date-fns/locale';
|
|
import React from 'react';
|
|
import { registerLocale } from 'react-datepicker';
|
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
|
|
import { setSchedule, removeSchedule } from 'soapbox/actions/compose';
|
|
import IconButton from 'soapbox/components/icon-button';
|
|
import { HStack, Stack, Text } from 'soapbox/components/ui';
|
|
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
|
import { DatePicker } from 'soapbox/features/ui/util/async-components';
|
|
import { useAppDispatch, useCompose } from 'soapbox/hooks';
|
|
|
|
|
|
export const isCurrentOrFutureDate = (date: Date) => {
|
|
return date && new Date().setHours(0, 0, 0, 0) <= new Date(date).setHours(0, 0, 0, 0);
|
|
};
|
|
|
|
const isFiveMinutesFromNow = (time: Date) => {
|
|
const fiveMinutesFromNow = new Date(new Date().getTime() + 300000); // now, plus five minutes (Pleroma won't schedule posts )
|
|
const selectedDate = new Date(time);
|
|
|
|
return fiveMinutesFromNow.getTime() < selectedDate.getTime();
|
|
};
|
|
|
|
const messages = defineMessages({
|
|
schedule: { id: 'schedule.post_time', defaultMessage: 'Post Date/Time' },
|
|
remove: { id: 'schedule.remove', defaultMessage: 'Remove schedule' },
|
|
});
|
|
|
|
export interface IScheduleForm {
|
|
composeId: string,
|
|
}
|
|
|
|
const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
|
|
const dispatch = useAppDispatch();
|
|
const intl = useIntl();
|
|
|
|
if ('it' === intl.locale) {
|
|
registerLocale(intl.locale, it);
|
|
} else {
|
|
registerLocale(intl.locale, enUS);
|
|
}
|
|
|
|
const scheduledAt = useCompose(composeId).schedule;
|
|
const active = !!scheduledAt;
|
|
|
|
const onSchedule = (date: Date) => {
|
|
dispatch(setSchedule(composeId, date));
|
|
};
|
|
|
|
const handleRemove = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
dispatch(removeSchedule(composeId));
|
|
e.preventDefault();
|
|
};
|
|
|
|
if (!active) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Stack className='mb-2' space={1}>
|
|
<Text theme='muted'>
|
|
<FormattedMessage id='datepicker.hint' defaultMessage='Scheduled to post at…' />
|
|
</Text>
|
|
<HStack space={2} alignItems='center'>
|
|
<BundleContainer fetchComponent={DatePicker}>
|
|
{Component => (<Component
|
|
locale={intl.locale}
|
|
selected={scheduledAt}
|
|
showTimeSelect
|
|
dateFormat='PPPPp'
|
|
timeIntervals={15}
|
|
wrapperClassName='react-datepicker-wrapper'
|
|
onChange={onSchedule}
|
|
placeholderText={intl.formatMessage(messages.schedule)}
|
|
filterDate={isCurrentOrFutureDate}
|
|
filterTime={isFiveMinutesFromNow}
|
|
className={classNames({
|
|
'has-error': !isFiveMinutesFromNow(scheduledAt),
|
|
})}
|
|
/>)}
|
|
</BundleContainer>
|
|
<IconButton
|
|
iconClassName='w-4 h-4'
|
|
className='bg-transparent text-gray-400 hover:text-gray-600'
|
|
src={require('@tabler/icons/x.svg')}
|
|
onClick={handleRemove}
|
|
title={intl.formatMessage(messages.remove)}
|
|
/>
|
|
</HStack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default ScheduleForm;
|