EN · DE · RU · FR · ES

#2716: CalendarEventTooltip.jsx

projectforge-webapp/src/containers/panel/calendar/CalendarEventTooltip.jsx Typ: JavaScript/React · Rolle: Kalender · Quelle: projectforge-webapp/src/containers/panel/calendar/CalendarEventTooltip.jsx 49 Zeilen · 42 Code · 3 Kommentare · 4 leer
React-Kalenderkomponente, die Ereignisse mit Tooltips, Navigation und Integration in den Teamkalender anzeigt.

Codestruktur

Importiert von: ../../../components/design, ./CalendarEventTooltip.module.scss, classnames, prop-types, react, reactstrap

Enthält PropTypes für: CalendarEventTooltip

Verwendet CSS-Module für das Styling.

Quellcode (gekürzt)

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { CardFooter } from 'reactstrap';
import styles from './CalendarEventTooltip.module.scss';
import { CardHeader, CardBody } from '../../../components/design';

function CalendarEventTooltip({ forwardRef, event = null }) {
    const extendedProps = event?.extendedProps;
    const tooltip = extendedProps?.tooltip;

    return (
        <div
            ref={forwardRef}
            className={classNames('card', styles.eventTooltip, !event && styles.hidden)}
        >
            {tooltip?.title && (
                <CardHeader>
                    <b>{tooltip?.title}</b>
                </CardHeader>
            ) }
            <CardBody>
                <div
                    /* eslint-disable-next-line react/no-danger */
                    dangerouslySetInnerHTML={{ __html: tooltip?.text }}
                />
            </CardBody>
            {extendedProps?.duration && (
                <CardFooter>
                    {extendedProps?.duration}
                </CardFooter>
            )}
        </div>
    );
}

CalendarEventTooltip.propTypes = {
    forwardRef: PropTypes.oneOfType([
        // Entweder eine Funktion
        PropTypes.func,
        // Oder die Instanz eines nativen DOM-Elements (siehe Hinweis zu SSR)
        PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
    ]).isRequired,
    event: PropTypes.shape({
        extendedProps: PropTypes.shape({}),
    }),
};

export default CalendarEventTooltip;

Git-Verlauf

958c2f0ff jsx: eslint-Warnungen behoben.
3685edd6c Upgrade auf React 18 (Work-in-Progress)
31d46c691 React: PropTypes
c47405865 Button: Als gelöscht markieren -> Löschen.
3ea4ecb63 React: PropTypes korrigiert, urlParams -> urlparams