#2658: FormattedTimeRange.jsx

Codestruktur

Verwendete Hooks: State, State, Ref, Ref, ClickOutsideHandler, ClickOutsideHandler

Importe von: ../../../../utilities/hooks, ./FormattedDateTime, prop-types, react

Hat PropTypes für: FormattedTimeRange

Quellcode (gekürzt)

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-Verlauf

3685edd6c Lift auf React 18 (Work-in-Progress)
bbd81edc3 ES-Lint, neue JS-Versionen.
fe961d7e3 #101 Datums-Magie-Filter implementiert
e87a066b1 Erledigte Aufgaben entfernt
1a139a08c WIP: FormattedTimeRange umgestaltet