Изменение всплывающей подсказки в реагировать на большой календарь - PullRequest
Новая
       8

Изменение всплывающей подсказки в реагировать на большой календарь

0 голосов
/ 29 октября 2019

Как изменить всплывающую подсказку, появляющуюся при наведении курсора на событие? Я хотел бы включить больше информации (дата начала, дата окончания, идентификатор, кнопки (редактировать, удалить). Я пробовал: 

function Event({ event }) {
  return (
    <span>
      <strong>{event.title}</strong>
      {event.desc && ':  ' + event.desc}
    </span>
  )
}

 <Calendar
    events={events}
    localizer={localizer}
    defaultDate={new Date(2015, 3, 1)}
    components={{
      event: Event
    }}
  />

, но это только меняет событие, а не подсказку, которая появляется при наведении курсоранад событием. Возможно ли вообще изменить подсказку?

1 Ответ

1 голос
/ 30 октября 2019

Похоже, что всплывающая подсказка события не настраивается в react-big-calendar

Поскольку у вас есть пользовательский компонент Event, и если вы используете загрузчик, вы можете попытаться добиться этого, используя Наложение и Подсказка из react-bootstrap.

Все становится сложнее, когда наложения / всплывающие подсказки закрываются, как только вы удаляетесь от целевого элемента ,

Поскольку ваша всплывающая подсказка содержит кнопки delete , edit , вам необходимо иметь некоторую логику, чтобы подсказка оставалась на экране и обрабатывать когда закрывать всплывающую подсказку.

Пример реализации ниже ..

Открывает всплывающую подсказку о событии при наведении курсора.

Закрывает всплывающую подсказку при нажатии кнопки закрытиявнутренняя всплывающая подсказка.

Закрывает всплывающую подсказку в любом месте за пределами всплывающей подсказки (включая цель).

Кстати, я не вижу это как хорошее решение, но может быть хорошим началом. 

const IconStyle = {
  cursor: "pointer"
};

const TooltipContent = ({ onClose, event }) => {
  return (
    <React.Fragment>
      <FontAwesomeIcon
        icon={faWindowClose}
        className="pull-right"
        style={IconStyle}
        onClick={onClose}
      />
      <div>{event.title}</div>
      <div>Some other Info</div>
      <Row>
        <Button variant="light">Button 1</Button>
        <Button variant="light">Button 2</Button>
      </Row>
    </React.Fragment>
  );
};

function Event(event) {
  const [showTooltip, setShowTooltip] = useState(false);

  const closeTooltip = () => {
    setShowTooltip(false);
  };

  const openTooltip = () => {
    setShowTooltip(true);
  };
  const ref = useRef(null);

  const getTarget = () => {
    return ReactDOM.findDOMNode(ref.current);
  };

  return (
    <div ref={ref}>
      <span onMouseOver={openTooltip}>{event.title}</span>
      <Overlay
        rootClose
        target={getTarget}
        show={showTooltip}
        placement="top"
        onHide={closeTooltip}
      >
        <Tooltip id="test">
          <TooltipContent event={event} onClose={closeTooltip} />
        </Tooltip>
      </Overlay>
    </div>
  );
}

Я добавил демонстрацию stackblitz в качестве комментария

...