@shopgate/engage/development/components/SimulatedInsets/SimulatedInsetTop.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 _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}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,{useState,useEffect,useMemo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{useSelector}from'react-redux';import{css}from'glamor';import{getStatusBarStyleStorage}from'@shopgate/engage/development/selectors';var classes={container:css({position:'fixed',top:0,display:'flex',justifyContent:'space-between',alignItems:'center',height:'var(--safe-area-inset-top)',width:'100%',zIndex:10000000,pointerEvents:'auto',transition:'background 0.2s ease',fontSize:'16px'}),containerHighlight:css({background:'rgba(255, 0, 0, 0.7)'}),styleLight:css({color:'white'}),styleDark:css({color:'black'}),styleNone:css({color:'transparent'}),info:css({flex:1,textAlign:'center',fontWeight:500}),notch:css({flex:1,background:'black',height:'calc(var(--safe-area-inset-top) - 16px)',maxWidth:150,borderRadius:16,border:'1px solid rgba(255, 255, 255, 0.5)'})};/**
 * Creates a human readable time string to mimic the iOS clock.
 * @returns {string} The current time in a human readable format.
 */var getTime=function getTime(){var now=new Date();return now.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'});};/**
 * Renders a simulated iOS top 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 SimulatedInsetTop=function SimulatedInsetTop(_ref){var highlightInset=_ref.highlightInset,onClick=_ref.onClick,props=_objectWithoutProperties(_ref,_excluded);// State to hold the current time string for the status bar
var _useState=useState(getTime()),_useState2=_slicedToArray(_useState,2),time=_useState2[0],setTime=_useState2[1];// Effect to update the time on regular intervals
useEffect(function(){var interval=setInterval(function(){setTime(getTime());},10*1000);return function(){return clearInterval(interval);};},[]);var _useSelector=useSelector(getStatusBarStyleStorage),statusBarStyle=_useSelector.statusBarStyle;var containerClasses=useMemo(function(){return classNames(classes.container,_defineProperty(_defineProperty(_defineProperty(_defineProperty({},classes.containerHighlight,highlightInset),classes.styleDark,statusBarStyle==='dark'),classes.styleLight,statusBarStyle==='light'),classes.styleNone,statusBarStyle==='none'));},[highlightInset,statusBarStyle]);return React.createElement("div",_extends({"aria-hidden":true,role:"presentation",className:classNames(containerClasses)},props,{onClick:onClick}),React.createElement("div",{className:classes.info},time),React.createElement("div",{className:classes.notch}),React.createElement("div",{className:classes.info},"5G"));};export default SimulatedInsetTop;