@shopgate/engage/components/View/index.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import { themeConfig } from '@shopgate/pwa-common/helpers/config';
import { RouteContext } from '@shopgate/pwa-common/context';
import { setPageBackgroundColor } from "../../styles";
import Content from "./components/Content";
import ViewProvider from "./provider";
import { ViewContext } from "./context";
import styles from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
const {
  colors
} = themeConfig;

// api: import { ViewContext } from '@shopgate/engage/components/View';
export { ViewContext };

/**
 * The View container component.
 * @param {Object} props The component props.
 * @return {JSX.Element}
 */
function ViewContainer({
  background,
  children,
  noScrollOnKeyboard,
  visible,
  'aria-hidden': ariaHidden,
  noContentPortal,
  noKeyboardListener
}) {
  if (visible) {
    setPageBackgroundColor(background);
  }
  const style = {
    display: visible ? 'flex' : 'none'
  };
  return /*#__PURE__*/_jsx(ViewProvider, {
    children: /*#__PURE__*/_jsx(ViewContext.Consumer, {
      children: ({
        setContentRef,
        ariaHidden: ariaHiddenContext
      }) => /*#__PURE__*/_jsx("section", {
        className: `${styles} engage__view`,
        style: style,
        "aria-hidden": ariaHidden || ariaHiddenContext,
        children: /*#__PURE__*/_jsx(Content, {
          noScrollOnKeyboard: noScrollOnKeyboard,
          noKeyboardListener: noKeyboardListener,
          setContentRef: setContentRef,
          noContentPortal: noContentPortal,
          children: children
        })
      })
    })
  });
}
ViewContainer.defaultProps = {
  'aria-hidden': false,
  background: colors.light,
  children: null,
  noScrollOnKeyboard: false,
  noContentPortal: false,
  noKeyboardListener: false
};

/**
 * @param {Object} props The component props.
 * @returns {JSX.Element}
 */
export default function View(props) {
  return /*#__PURE__*/_jsx(RouteContext.Consumer, {
    children: ({
      visible
    }) => /*#__PURE__*/_jsx(ViewContainer, {
      ...props,
      visible: visible
    })
  });
}