@shopgate/pwa-ui-shared 7.25.0 → 7.25.1-beta.1

package/ScannerOverlay/components/ScannerBar/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeShadows,themeColors,themeVariables}from'@shopgate/pwa-common/helpers/config';var container=css({bottom:0,backgroundColor:themeColors.overlay,boxShadow:themeShadows.scannerBar,fontSize:14,alignItems:'center'}).toString();var column=css({margin:"".concat(themeVariables.gap.big,"px"),':not(:first-child)':{marginLeft:0}}).toString();export default{container:container,column:column};
+import{css}from'glamor';import{themeShadows,themeColors,themeVariables}from'@shopgate/pwa-common/helpers/config';var container=css({bottom:0,backgroundColor:themeColors.overlay,boxShadow:themeShadows.scannerBar,fontSize:14,alignItems:'center',paddingBottom:'var(--safe-area-inset-bottom)'}).toString();var column=css({margin:"".concat(themeVariables.gap.big,"px"),':not(:first-child)':{marginLeft:0}}).toString();export default{container:container,column:column};

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "7.25.0",
+  "version": "7.25.1-beta.1",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "7.25.0",
-    "@shopgate/pwa-ui-material": "7.25.0",
+    "@shopgate/pwa-ui-ios": "7.25.1-beta.1",
+    "@shopgate/pwa-ui-material": "7.25.1-beta.1",
     "react-day-picker": "^7.4.8"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "7.25.0",
-    "@shopgate/pwa-common-commerce": "7.25.0",
+    "@shopgate/pwa-common": "7.25.1-beta.1",
+    "@shopgate/pwa-common-commerce": "7.25.1-beta.1",
     "classnames": "2.5.1",
     "react": "~16.14.0"
   },

package/Footer/index.js

@@ -1,25 +0,0 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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;}import React,{Component}from'react';import PropTypes from'prop-types';import Portal from'@shopgate/pwa-common/components/Portal';import{logger}from'@shopgate/pwa-core/helpers';import UIEvents from'@shopgate/pwa-core/emitters/ui';import{APP_FOOTER_CONTENT_BEFORE,APP_FOOTER_CONTENT_AFTER}from'@shopgate/pwa-common/constants/Portals';import{getAbsoluteHeight,getStyle}from'@shopgate/pwa-common/helpers/dom';import{SHEET_EVENTS}from"../Sheet";import{footer,withInset,updateInsetBackgroundColor,updateFooterHeight}from"./style";var APP_FOOTER_ID='AppFooter';var DATA_IGNORED='data-footer-inset-update-ignore';/**
- * The Footer Component
- * @deprecated
- */var Footer=/*#__PURE__*/function(_Component){function Footer(){var _this2;_classCallCheck(this,Footer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Footer,[].concat(args));_defineProperty(_this2,"ref",React.createRef());/** Perform hide action */_defineProperty(_this2,"hide",function(){if(_this2.ref.current){updateFooterHeight(0);}});/** Perform show action */_defineProperty(_this2,"show",function(){if(_this2.ref.current){updateFooterHeight(getAbsoluteHeight(_this2.ref.current));}});return _this2;}_inherits(Footer,_Component);return _createClass(Footer,[{key:"componentDidMount",value:function componentDidMount(){var _this3=this;logger.warn('DEPRECATED: @shopgate/pwa-ui-shared/Footer is deprecated. Please use: import { Footer } from \'@shopgate/engage/components.\'');this.performFooterUpdate();var observer=new MutationObserver(function(mutations){var update=mutations.filter(function(mutation){return mutation.target.getAttribute(DATA_IGNORED)!=='true';}).length>0;if(update){_this3.performFooterUpdate();}});observer.observe(this.ref.current,{attributes:true,childList:true,subtree:true});UIEvents.addListener(SHEET_EVENTS.OPEN,this.hide);UIEvents.addListener(SHEET_EVENTS.CLOSE,this.show);}/** @inheritDoc */},{key:"componentWillUnmount",value:function componentWillUnmount(){UIEvents.removeListener(SHEET_EVENTS.OPEN,this.hide);UIEvents.removeListener(SHEET_EVENTS.CLOSE,this.show);}},{key:"getInsetBackgroundColor",value:/**
-   * Retrieves the background color for the footer inset.
-   * @param {NodeList} elements The DOM elements to inspect.
-   * @returns {string|null}
-   */function getInsetBackgroundColor(elements){var _this4=this;/**
-     * The background color of the bottom inset needs to identical to the last entry of the footer.
-     * So we loop backwards to the elements to find the first visible one.
-     */var color=Array.from(elements).reverse().reduce(function(result,element){var ignore=element.getAttribute(DATA_IGNORED)==='true';if(result||ignore){// Nothing to do, since the color was already determined or the element can be ignored.
-return result;}if(element.id===APP_FOOTER_ID){// Inspect core portal.
-return _this4.getInsetBackgroundColor(element.children);}if(element.clientHeight){// Take the background color of the last visible element from the end of the footer.
-return getStyle(element,'backgroundColor');}// Nothing happened within this loop - proceed with the next one.
-return result;},null);if(color==='rgba(0, 0, 0, 0)'||color==='transparent'){return null;}return color||null;}},{key:"performFooterUpdate",value:/**
-   * Performs an update of the footer: background color, height.
-   */function performFooterUpdate(){if(this.ref.current){this.ref.current.classList.toggle(withInset,this.hasVisibleContent());updateFooterHeight(getAbsoluteHeight(this.ref.current));updateInsetBackgroundColor(this.getInsetBackgroundColor(this.ref.current.children));}}/**
-   * Checks if the footer has visible content.
-   * @returns {boolean}
-   */},{key:"hasVisibleContent",value:function hasVisibleContent(){if(this.ref.current){var elements=this.ref.current.parentElement.querySelectorAll("div.".concat(footer.toString()," > *:not(#").concat(APP_FOOTER_ID,"), #").concat(APP_FOOTER_ID," > *"));return Array.from(elements).filter(function(element){return element.getAttribute(DATA_IGNORED)!=='true'&&element.clientHeight>0;}).length>0;}return false;}/**
-   * @returns {JSX}
-   */},{key:"render",value:function render(){return React.createElement("div",{className:"".concat(footer," ui-shared__footer"),ref:this.ref},React.createElement(Portal,{name:APP_FOOTER_CONTENT_BEFORE}),React.createElement("div",{id:APP_FOOTER_ID},this.props.children),React.createElement(Portal,{name:APP_FOOTER_CONTENT_AFTER}));}}]);}(Component);_defineProperty(Footer,"defaultProps",{children:null/**
-   * Sets up the DOM Mutation Observer to take care that the footer inset always has the correct
-   * background color, which matches the background color of the last element within the footer.
-   */});export default Footer;

package/Footer/style.js

@@ -1,7 +0,0 @@
-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;}import{css}from'glamor';var style=document.documentElement.style;/**
- * Updates the background color of the bottom inset.
- * @param {string} color The new background color
- */export var updateInsetBackgroundColor=function updateInsetBackgroundColor(color){if(style.getPropertyValue('--footer-inset-background-color')!==color){style.setProperty('--footer-inset-background-color',color);}};/**
- * Update the footer height
- * @param {number} height height
- */export var updateFooterHeight=function updateFooterHeight(height){var inset=Number(style.getPropertyValue('--safe-area-inset-bottom').replace(/\D/g,''));var footerHeight="".concat(inset+height,"px");if(style.getPropertyValue('--footer-height')!==footerHeight){style.setProperty('--footer-height',footerHeight);}};export var footer=css({bottom:0,flexShrink:1,position:'relative',zIndex:1});export var withInset=css(_defineProperty({},".".concat(footer.toString(),":after"),{backgroundColor:'var(--footer-inset-background-color, var(--page-background-color))',height:'var(--safe-area-inset-bottom)',content:' ',display:'inherit',position:'relative',zIndex:15}));