#2658: FormattedTimeRange.jsx

Структура кода

Используемые хуки: State, State, Ref, Ref, ClickOutsideHandler, ClickOutsideHandler

Импорты из: ../../../../utilities/hooks, ./FormattedDateTime, prop-types, react

Имеет PropTypes для: FormattedTimeRange

Исходный код (сокращённый)

import PropTypes from 'prop-types';
import React from 'react';
import { useClickOutsideHandler } from '../../../../utilities/hooks';
import FormattedDateTime from './FormattedDateTime';

function FormattedTimeRange(
    {
        children,
        from,
        setFrom,
        setTo,
        to,
    },
) {
    const [fromInEditMode, setFromInEditMode] = React.useState(false);
    const [toInEditMode, setToInEditMode] = React.useState(false);

    const fromEditRef = React.useRef(null);
    const toEditRef = React.useRef(null);

    const handleFromClick = () => {
        if (setFrom) {
            setFromInEditMode(true);
        }
    };
    const handleToClick = () => {
        if (setTo) {
            setToInEditMode(true);
        }
    };

    useClickOutsideHandler(fromEditRef, () => setFromInEditMode(false), fromInEditMode);
    useClickOutsideHandler(toEditRef, () => setToInEditMode(false), toInEditMode);

    return (
        <>
            {children}
            <FormattedDateTime
                slot="FROM"
                date={from}
                onClick={handleFromClick}
            />
            -
            <FormattedDateTime
                slot="TO"
                date={to}
                onClick={handleToClick}
            />
        </>
    );
}

FormattedTimeRange.propTypes = {
    from: PropTypes.instanceOf(Date).isRequired,
    to: PropTypes.instanceOf(Date).isRequired,
    children: PropTypes.node,
    setFrom: PropTypes.func,
    setTo: PropTypes.func,
};

export default FormattedTimeRange;

История Git

3685edd6c переход на react 18 wip
bbd81edc3 es-lint, новые версии js.
fe961d7e3 #101 реализация магического фильтра дат
e87a066b1 удалить выполненное todo
1a139a08c wip: рефакторинг formattedtimerange