EN · DE · RU · FR · ES

#2658 : FormattedTimeRange.jsx

projectforge-webapp/src/components/design/input/calendar/FormattedTimeRange.jsx Type : JavaScript/React · Rôle : Calendrier · Source : projectforge-webapp/src/components/design/input/calendar/FormattedTimeRange.jsx 61 lignes · 54 code · 0 commentaires · 7 vides
Composant calendrier React affichant des événements avec infobulles, navigation et intégration au calendrier d'équipe.

Structure du code

Hooks utilisés : State, State, Ref, Ref, ClickOutsideHandler, ClickOutsideHandler

Importations depuis : ../../../../utilities/hooks, ./FormattedDateTime, prop-types, react

Possède PropTypes pour : FormattedTimeRange

Code source (abrégé)

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;

Historique Git

3685edd6c mise à niveau vers react 18 wip
bbd81edc3 es-lint, nouvelles versions js.
fe961d7e3 #101 implémente le filtre magique de date
e87a066b1 supprime todo terminé
1a139a08c wip : refactorisation de formattedtimerange