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

Shopgate's ENGAGE library.

function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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}
 */var SimulatedInsets=function SimulatedInsets(_ref){var children=_ref.children;var hasSimulatedSafeAreaInsets=useSelector(getAreSimulatedInsetsInjected);var dispatch=useDispatch();var highlightInset=useSelector(getIsInsetHighlightVisible);var handleClick=useCallback(function(){dispatch(toggleInsetHighlight(!highlightInset));},[dispatch,highlightInset]);var attrs=useLongPress(function(){dispatch(toggleInsets(!hasSimulatedSafeAreaInsets));});return React.createElement(React.Fragment,null,hasSimulatedSafeAreaInsets&&React.createElement(SimulatedInsetTop,_extends({onClick:handleClick,highlightInset:highlightInset},attrs)),children,hasSimulatedSafeAreaInsets&&React.createElement(SimulatedInsetBottom,_extends({onClick:handleClick,highlightInset:highlightInset},attrs)));};export default SimulatedInsets;