@shopgate/engage/development/components/SimulatedInsets/SimulatedInsets.js

Shopgate's ENGAGE library.

import React, { useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import PropTypes from 'prop-types';
import { useLongPress } from '@shopgate/engage/core/hooks';
import { getAreSimulatedInsetsInjected, getIsInsetHighlightVisible } from '@shopgate/engage/development/selectors';
import { toggleInsetHighlight, toggleInsets } from '@shopgate/engage/development/action-creators';
import SimulatedInsetTop from "./SimulatedInsetTop";
import SimulatedInsetBottom from "./SimulatedInsetBottom";

/**
 * Simulates iOS insets in development mode.
 * @param {Object} props The component props.
 * @param {React.ReactNode} props.children The child components.
 * @returns {JSX.Element}
 */
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const SimulatedInsets = ({
  children
}) => {
  const hasSimulatedSafeAreaInsets = useSelector(getAreSimulatedInsetsInjected);
  const dispatch = useDispatch();
  const highlightInset = useSelector(getIsInsetHighlightVisible);
  const handleClick = useCallback(() => {
    dispatch(toggleInsetHighlight(!highlightInset));
  }, [dispatch, highlightInset]);
  const attrs = useLongPress(() => {
    dispatch(toggleInsets(!hasSimulatedSafeAreaInsets));
  });
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [hasSimulatedSafeAreaInsets && /*#__PURE__*/_jsx(SimulatedInsetTop, {
      onClick: handleClick,
      highlightInset: highlightInset,
      ...attrs
    }), children, hasSimulatedSafeAreaInsets && /*#__PURE__*/_jsx(SimulatedInsetBottom, {
      onClick: handleClick,
      highlightInset: highlightInset,
      ...attrs
    })]
  });
};
export default SimulatedInsets;