@shopgate/engage 7.28.0-beta.4 → 7.28.0-beta.5

package/components/View/components/Content/index.js

@@ -1,12 +1,15 @@
-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 _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 Helmet from'react-helmet';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import appConfig from'@shopgate/pwa-common/helpers/config';import event from'@shopgate/pwa-core/classes/Event';import{router}from'@virtuous/conductor';import{RouteContext}from'@shopgate/pwa-common/context';import{EVENT_KEYBOARD_WILL_CHANGE}from'@shopgate/pwa-core/constants/AppEvents';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{VIEW_CONTENT}from'@shopgate/pwa-common/constants/Portals';import{useScrollContainer}from'@shopgate/engage/core';import{ConditionalWrapper}from"../../../ConditionalWrapper";import Above from"../Above";import Below from"../Below";import styles from"./style";/**
+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 _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 Helmet from'react-helmet';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import appConfig from'@shopgate/pwa-common/helpers/config';import event from'@shopgate/pwa-core/classes/Event';import{router}from'@virtuous/conductor';import{RouteContext}from'@shopgate/pwa-common/context';import{EVENT_KEYBOARD_WILL_CHANGE}from'@shopgate/pwa-core/constants/AppEvents';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{VIEW_CONTENT}from'@shopgate/pwa-common/constants/Portals';import{useScrollContainer,isIOs}from'@shopgate/engage/core/helpers';import{ConditionalWrapper}from"../../../ConditionalWrapper";import Above from"../Above";import Below from"../Below";import{container,containerInner}from"./style";/**
  * The ViewContent component.
  */var ViewContent=/*#__PURE__*/function(_Component){/**
    * @param {Object} props The component props.
    */function ViewContent(props){var _this2;_classCallCheck(this,ViewContent);_this2=_callSuper(this,ViewContent,[props]);/**
+   * Handles focus changes on the window to detect if an input is focused.
+   * @param {FocusEvent} e The event payload
+   */_defineProperty(_this2,"handleInputFocusChange",function(e){var el=e.target;var isInputTarget=el.tagName==='INPUT'&&['text','password','email','number','search','tel','url'].includes(el.type)||el.tagName==='TEXTAREA'||el.isContentEditable;if(isInputTarget){_this2.setState({isInputFocused:e.type==='focusin'});}});/**
    * Handles a keyboard change event.
    * @param {boolean} open If the keyboard is now open.
    * @param {boolean} overlap The height of the keyboard.
-   */_defineProperty(_this2,"handleKeyboardChange",function(_ref){var open=_ref.open,overlap=_ref.overlap;if(_this2.props.noKeyboardListener){return;}var height=open?overlap:0;if(_this2.props.visible&&height!==_this2.state.keyboardHeight){_this2.setState({keyboardHeight:height});}});_this2.ref=React.createRef();_this2.state={keyboardHeight:0};_this2.scrollContainer=useScrollContainer();if(!_this2.scrollContainer){_this2.ref.current=window;}_this2.props.setContentRef(_this2.ref);event.addCallback(EVENT_KEYBOARD_WILL_CHANGE,_this2.handleKeyboardChange);return _this2;}/**
+   */_defineProperty(_this2,"handleKeyboardChange",function(_ref){var open=_ref.open,overlap=_ref.overlap;if(_this2.props.noKeyboardListener){return;}var height=open?overlap:0;if(_this2.props.visible&&height!==_this2.state.keyboardHeight){_this2.setState({keyboardHeight:height});}});_this2.ref=React.createRef();_this2.state={keyboardHeight:0,isInputFocused:false};_this2.scrollContainer=useScrollContainer();if(!_this2.scrollContainer){_this2.ref.current=window;}_this2.props.setContentRef(_this2.ref);event.addCallback(EVENT_KEYBOARD_WILL_CHANGE,_this2.handleKeyboardChange);if(isIOs){window.addEventListener('focusin',_this2.handleInputFocusChange);window.addEventListener('focusout',_this2.handleInputFocusChange);}return _this2;}/**
    * @param {Object} props The component props.
    * @param {Object} state The component state.
    * @returns {Object}
@@ -14,8 +17,11 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
    * Restore the scroll position of the page.
    */function componentDidMount(){var scrollTop=this.context.state.scrollTop;if(this.ref.current===window){window.scrollTo(0,scrollTop||0);}else{this.ref.current.scrollTop=scrollTop;}}/**
    * Removes the keyboardWillChange listener.
-   */},{key:"componentWillUnmount",value:function componentWillUnmount(){var scrollTop;if(this.ref.current===window){scrollTop=window.scrollY;}else{scrollTop=this.ref.current.scrollTop;}router.update(this.context.id,{scrollTop:scrollTop},false);event.removeCallback(EVENT_KEYBOARD_WILL_CHANGE,this.handleKeyboardChange);}/**
+   */},{key:"componentWillUnmount",value:function componentWillUnmount(){var scrollTop;if(this.ref.current===window){scrollTop=window.scrollY;}else{scrollTop=this.ref.current.scrollTop;}router.update(this.context.id,{scrollTop:scrollTop},false);event.removeCallback(EVENT_KEYBOARD_WILL_CHANGE,this.handleKeyboardChange);if(isIOs){window.removeEventListener('focusin',this.handleInputFocusChange);window.removeEventListener('focusout',this.handleInputFocusChange);}}/**
    * @returns {Object}
-   */},{key:"style",get:function get(){var noScrollOnKeyboard=this.props.noScrollOnKeyboard;var keyboardHeight=this.state.keyboardHeight;var overflow='inherit';if(this.scrollContainer){overflow=noScrollOnKeyboard&&keyboardHeight>0?'hidden':'auto';}return{overflow:overflow,paddingBottom:"calc(var(--page-content-offset-bottom) + ".concat(keyboardHeight,"px)")};}},{key:"render",value:/**
+   */},{key:"style",get:function get(){var noScrollOnKeyboard=this.props.noScrollOnKeyboard;var _this$state=this.state,keyboardHeight=_this$state.keyboardHeight,isInputFocused=_this$state.isInputFocused;var overflow='inherit';if(this.scrollContainer){overflow=noScrollOnKeyboard&&keyboardHeight>0?'hidden':'auto';}return{'--keyboard-height':"".concat(keyboardHeight,"px"),// Used on iOS devices to make the scroll container content always a bit taller than the
+// scroll container to enforce rubber band effect. Needs to be deactivated when input
+// is focused to prevent side effects (multiple scrollable content areas).
+'--extra-ios-scroll-space':isInputFocused?0:'12px',overflow:overflow};}},{key:"render",value:/**
    * @return {JSX.Element}
-   */function render(){return React.createElement("article",{className:"".concat(styles," engage__view__content ").concat(this.props.className),ref:this.scrollContainer?this.ref:null,style:this.style,role:"none"},React.createElement(Helmet,{title:appConfig.shopName}),React.createElement(Above,null),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},this.props.visible?React.createElement("div",{id:"PageHeaderBelow"}):null),React.createElement(ConditionalWrapper,{condition:!this.props.noContentPortal,wrapper:function wrapper(children){return React.createElement(SurroundPortals,{portalName:VIEW_CONTENT},children);}},this.props.children),React.createElement(Below,null));}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(props,state){if(props.visible||state.keyboardHeight===0){return null;}return{keyboardHeight:0};}}]);}(Component);_defineProperty(ViewContent,"contextType",RouteContext);_defineProperty(ViewContent,"defaultProps",{className:'',children:null,noScrollOnKeyboard:false,noContentPortal:false,noKeyboardListener:false});export default(function(props){return React.createElement(RouteContext.Consumer,null,function(_ref2){var visible=_ref2.visible,_ref2$pattern=_ref2.pattern,pattern=_ref2$pattern===void 0?'':_ref2$pattern,_ref2$is=_ref2.is404,is404=_ref2$is===void 0?false:_ref2$is;return React.createElement(ViewContent,_extends({},props,{visible:visible,className:"route_".concat(is404?'404':pattern.replace(/[:/]/g,'_'))}));});});
+   */function render(){return React.createElement("article",{className:"".concat(container," engage__view__content ").concat(this.props.className),ref:this.scrollContainer?this.ref:null,style:this.style,role:"none"},React.createElement("div",{className:containerInner},React.createElement(Helmet,{title:appConfig.shopName}),React.createElement(Above,null),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},this.props.visible?React.createElement("div",{id:"PageHeaderBelow"}):null),React.createElement(ConditionalWrapper,{condition:!this.props.noContentPortal,wrapper:function wrapper(children){return React.createElement(SurroundPortals,{portalName:VIEW_CONTENT},children);}},this.props.children),React.createElement(Below,null)));}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(props,state){if(props.visible||state.keyboardHeight===0){return null;}return{keyboardHeight:0};}}]);}(Component);_defineProperty(ViewContent,"contextType",RouteContext);_defineProperty(ViewContent,"defaultProps",{className:'',children:null,noScrollOnKeyboard:false,noContentPortal:false,noKeyboardListener:false});export default(function(props){return React.createElement(RouteContext.Consumer,null,function(_ref2){var visible=_ref2.visible,_ref2$pattern=_ref2.pattern,pattern=_ref2$pattern===void 0?'':_ref2$pattern,_ref2$is=_ref2.is404,is404=_ref2$is===void 0?false:_ref2$is;return React.createElement(ViewContent,_extends({},props,{visible:visible,className:"route_".concat(is404?'404':pattern.replace(/[:/]/g,'_'))}));});});

package/components/View/components/Content/style.js

@@ -1 +1,3 @@
-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 _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{css}from'glamor';import{useScrollContainer}from'@shopgate/engage/core';import{responsiveMediaQuery}from'@shopgate/engage/styles';export default css(_extends({display:'flex',flexDirection:'column',width:'100vw'},useScrollContainer()?{bottom:0,top:0,overflowScrolling:'touch',position:'absolute',WebkitOverflowScrolling:'touch'}:{height:'100%',backgroundColor:'var(--page-background-color)'},_defineProperty({},responsiveMediaQuery('>xs',{webOnly:true}),{width:'var(--page-content-width)'})));
+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 _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{css}from'glamor';import{useScrollContainer,isIOs}from'@shopgate/engage/core/helpers';import{responsiveMediaQuery}from'@shopgate/engage/styles';export var container=css(_extends({display:'flex',flexDirection:'column',width:'100vw'},useScrollContainer()?{bottom:0,top:0,overflowScrolling:'touch',position:'absolute',WebkitOverflowScrolling:'touch'}:{height:'100%',backgroundColor:'var(--page-background-color)'},_defineProperty({},responsiveMediaQuery('>xs',{webOnly:true}),{width:'var(--page-content-width)'})));export var containerInner=css(_extends({},isIOs&&useScrollContainer()?{// Make the scroll container content a bit higher than the actual scroll container to
+// get a rubber band effect in all situations
+minHeight:'calc(100% + var(--extra-ios-scroll-space, 0px))'}:{},{':after':{content:"''",display:'block',pointerEvents:'none',paddingBottom:'calc(var(--page-content-offset-bottom) + var(--keyboard-height))'}}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.28.0-beta.4",
+  "version": "7.28.0-beta.5",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -16,12 +16,12 @@
   ],
   "dependencies": {
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.28.0-beta.4",
-    "@shopgate/pwa-common-commerce": "7.28.0-beta.4",
-    "@shopgate/pwa-core": "7.28.0-beta.4",
-    "@shopgate/pwa-ui-ios": "7.28.0-beta.4",
-    "@shopgate/pwa-ui-material": "7.28.0-beta.4",
-    "@shopgate/pwa-ui-shared": "7.28.0-beta.4",
+    "@shopgate/pwa-common": "7.28.0-beta.5",
+    "@shopgate/pwa-common-commerce": "7.28.0-beta.5",
+    "@shopgate/pwa-core": "7.28.0-beta.5",
+    "@shopgate/pwa-ui-ios": "7.28.0-beta.5",
+    "@shopgate/pwa-ui-material": "7.28.0-beta.5",
+    "@shopgate/pwa-ui-shared": "7.28.0-beta.5",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",