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

Shopgate's ENGAGE library.

var _excluded=["highlightInset","onClick"];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);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useMemo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{css}from'glamor';var classes={container:css({position:'fixed',bottom:0,display:'flex',justifyContent:'center',alignItems:'center',height:'var(--safe-area-inset-bottom)',width:'100%',zIndex:10000000,pointerEvents:'auto',transition:'background 0.2s ease'}),containerHighlight:css({background:'rgba(255, 0, 0, 0.7)'}),handle:css({width:120,height:3,borderRadius:3,background:'rgba(0, 0, 0, 0.4)',border:'1px solid rgba(255, 255, 255, 0.5)',boxSizing:'content-box'})};/**
 * Renders a simulated iOS bottom inset in development.
 * @param {Object} props The component props.
 * @param {boolean} props.highlightInset Whether the inset is highlighted.
 * @param {Function} props.onClick The function to call when the inset is clicked.
 * @returns {JSX.Element}
 */var SimulatedInsetBottom=function SimulatedInsetBottom(_ref){var highlightInset=_ref.highlightInset,onClick=_ref.onClick,props=_objectWithoutProperties(_ref,_excluded);var containerClasses=useMemo(function(){return classNames(classes.container,_defineProperty({},classes.containerHighlight,highlightInset));},[highlightInset]);return React.createElement("div",_extends({"aria-hidden":true,role:"presentation",className:containerClasses},props,{onClick:onClick}),React.createElement("div",{className:classes.handle}));};export default SimulatedInsetBottom;