EN · DE · RU · FR · ES

#2716: CalendarEventTooltip.jsx

projectforge-webapp/src/containers/panel/calendar/CalendarEventTooltip.jsx Tipo: JavaScript/React · Rol: Calendario · Fuente: projectforge-webapp/src/containers/panel/calendar/CalendarEventTooltip.jsx 49 líneas · 42 código · 3 comentarios · 4 en blanco
Componente de calendario en React que muestra eventos con tooltips, navegación e integración con el calendario del equipo.

Estructura del código

Importaciones de: ../../../components/design, ./CalendarEventTooltip.module.scss, classnames, prop-types, react, reactstrap

Tiene PropTypes para: CalendarEventTooltip

Usa Módulos CSS para el estilo.

Código fuente (resumido)

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([
        // Ya sea una función
        PropTypes.func,
        // O la instancia de un elemento DOM nativo (ver nota sobre SSR)
        PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
    ]).isRequired,
    event: PropTypes.shape({
        extendedProps: PropTypes.shape({}),
    }),
};

export default CalendarEventTooltip;

Historial de Git

958c2f0ff jsx: advertencias de eslint corregidas.
3685edd6c actualización a react 18 wip
31d46c691 React: PropTypes
c47405865 Botón: Marcado como eliminado -> Eliminar.
3ea4ecb63 React: PropTypes corregido, urlParams -> urlparams