OMCHighlightSlot.jsx

Enable keyboard shortcuts

/* This Source Code Form is subject to the terms of the Mozilla Public

 * License, v. 2.0. If a copy of the MPL was not distributed with this file,

 * You can obtain one at http://mozilla.org/MPL/2.0/. */

import React, { useCallback } from "react";

import { useSelector } from "react-redux";

import { MessageWrapper } from "content-src/components/MessageWrapper/MessageWrapper";

import { FeatureHighlight } from "./FeatureHighlight";

import { HighlightPopoverBody } from "./HighlightPopoverBody";

import {

  DISMISS_MODES,

  SHELLS,

  getRegistryEntry,

} from "./OMCHighlightRegistry.mjs";

const PopoverShell = ({ entry, content, handleDismiss, handleBlock }) => {

  const dismissCallback = useCallback(() => {

    handleDismiss?.();

    if (entry.dismiss === DISMISS_MODES.BLOCK) {

      handleBlock?.();

  }, [entry.dismiss, handleDismiss, handleBlock]);

  return (

    <FeatureHighlight

      position={entry.chrome.position}

      arrowPosition={entry.chrome.arrowPosition}

      modalClassName={entry.chrome.modalClassName}

      openedOverride={true}

      showButtonIcon={false}

      message={<HighlightPopoverBody body={entry.body} content={content} />}

      dismissCallback={dismissCallback}

      outsideClickCallback={handleDismiss}

/>

);

};

export const OMCHighlightSlot = ({ slot, dispatch }) => {

  const { messageData } = useSelector(state => state.Messages);

  const content = messageData?.content;

  const entry = getRegistryEntry(content?.messageType);

  if (!entry || entry.slot !== slot) {

    return null;

  if (entry.shell === SHELLS.POPOVER) {

    return (

      <MessageWrapper dispatch={dispatch} wrapperClassName="omc-highlight-slot">

        <PopoverShell entry={entry} content={content} />

      </MessageWrapper>

);

  return null;

};