sforkowany z mirror/soapbox
86 wiersze
2.5 KiB
TypeScript
86 wiersze
2.5 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
|
|
import { Select } from 'soapbox/components/ui';
|
|
|
|
const messages = defineMessages({
|
|
minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
|
|
hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' },
|
|
days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' },
|
|
});
|
|
|
|
interface IDurationSelector {
|
|
onDurationChange(expiresIn: number): void
|
|
}
|
|
|
|
const DurationSelector = ({ onDurationChange }: IDurationSelector) => {
|
|
const intl = useIntl();
|
|
|
|
const [days, setDays] = useState<number>(2);
|
|
const [hours, setHours] = useState<number>(0);
|
|
const [minutes, setMinutes] = useState<number>(0);
|
|
|
|
const value = (days * 24 * 60 * 60) + (hours * 60 * 60) + (minutes * 60);
|
|
|
|
useEffect(() => {
|
|
if (days === 7) {
|
|
setHours(0);
|
|
setMinutes(0);
|
|
}
|
|
}, [days]);
|
|
|
|
useEffect(() => {
|
|
onDurationChange(value);
|
|
}, [value]);
|
|
|
|
return (
|
|
<div className='grid grid-cols-1 gap-2 sm:grid-cols-3'>
|
|
<div className='sm:col-span-1'>
|
|
<Select
|
|
value={days}
|
|
onChange={(event) => setDays(Number(event.target.value))}
|
|
data-testid='duration-selector-days'
|
|
>
|
|
{[...Array(8).fill(undefined)].map((_, number) => (
|
|
<option value={number} key={number}>
|
|
{intl.formatMessage(messages.days, { number })}
|
|
</option>
|
|
))}
|
|
</Select>
|
|
</div>
|
|
|
|
<div className='sm:col-span-1'>
|
|
<Select
|
|
value={hours}
|
|
onChange={(event) => setHours(Number(event.target.value))}
|
|
disabled={days === 7}
|
|
data-testid='duration-selector-hours'
|
|
>
|
|
{[...Array(24).fill(undefined)].map((_, number) => (
|
|
<option value={number} key={number}>
|
|
{intl.formatMessage(messages.hours, { number })}
|
|
</option>
|
|
))}
|
|
</Select>
|
|
</div>
|
|
|
|
<div className='sm:col-span-1'>
|
|
<Select
|
|
value={minutes}
|
|
onChange={(event) => setMinutes(Number(event.target.value))}
|
|
disabled={days === 7}
|
|
data-testid='duration-selector-minutes'
|
|
>
|
|
{[0, 15, 30, 45].map((number) => (
|
|
<option value={number} key={number}>
|
|
{intl.formatMessage(messages.minutes, { number })}
|
|
</option>
|
|
))}
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DurationSelector;
|