@shopgate/engage 7.27.2-beta.2 → 7.27.2-beta.4

package/components/ScrollHeader/index.js

@@ -1,5 +1,23 @@
-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;}import React,{useState}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{useScrollDirectionChange}from'@shopgate/engage/core/hooks';import{root,scrolledIn,scrolledOut,transition}from"./style";/**
- * Scroll Header component
- * @param {Object} props props
- * @returns {JSX}
- */function ScrollHeader(_ref){var className=_ref.className,children=_ref.children,hideOnScroll=_ref.hideOnScroll,scrollOffset=_ref.scrollOffset;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldHideHeader=_useState2[0],setShouldHideHeader=_useState2[1];useScrollDirectionChange({enabled:hideOnScroll,offset:scrollOffset,onScrollDown:function onScrollDown(){setShouldHideHeader(true);},onScrollUp:function onScrollUp(){setShouldHideHeader(false);}});return React.createElement("div",{className:classNames(root,transition,className,_defineProperty(_defineProperty({},scrolledIn,!shouldHideHeader),scrolledOut,shouldHideHeader))},children);}ScrollHeader.defaultProps={className:null,hideOnScroll:true,scrollOffset:100};export default ScrollHeader;
+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;}import React,{useState,forwardRef,useEffect}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{useScrollDirectionChange}from'@shopgate/engage/core/hooks';import{root,scrolledIn,scrolledOut,transition}from"./style";/* eslint-disable react/prop-types */ /**
+ * A container component that hides its content on scroll down and shows it on scroll up.
+ *
+ * @param {Object} props The component props.
+ * @param {boolean}  [props.hideOnScroll] Toggle hide-on-scroll (default: true).
+ * @param {number} [props.scrollOffset] Pixels to scroll before toggling (default: 100).
+ * @param {boolean} [props.onlyShowAtTop] When set to true, the component content will not be shown
+ * till the user scrolls to the top of the page again.
+ * @param {number} [props.onlyShowAtTopOffset] Pixel threshold from the top of the page at which the
+ * component content will reappear when `showOnScrollToTop` is enabled. The content shows again once
+ * the scroll position is less than or equal to this value.
+ * @param {Function} [props.onChange] Callback function that is called when the header changes
+ * @param {string} [props.className] Extra CSS classes on the root element.
+ * @param {Object} [props.classes] Override internal class names.
+ * @param {string} [props.classes.scrolledIn] Override class for the scrolled-in state
+ * (content is hidden).
+ * @param {string} [props.classes.scrolledOut] Override class for the scrolled-out state
+ * (content is visible).
+ * visibility. Contains a boolean indicating whether the header is visible.
+ * @param {React.ReactNode} props.children  Content of the header.
+ * @param {React.Ref<HTMLDivElement>} ref   Forwarded ref to the header `<div>`.
+ * @returns {JSX.Element}
+ */function ScrollHeaderBase(_ref,ref){var className=_ref.className,children=_ref.children,_ref$hideOnScroll=_ref.hideOnScroll,hideOnScroll=_ref$hideOnScroll===void 0?true:_ref$hideOnScroll,_ref$scrollOffset=_ref.scrollOffset,scrollOffset=_ref$scrollOffset===void 0?100:_ref$scrollOffset,_ref$onlyShowAtTop=_ref.onlyShowAtTop,onlyShowAtTop=_ref$onlyShowAtTop===void 0?false:_ref$onlyShowAtTop,_ref$onlyShowAtTopOff=_ref.onlyShowAtTopOffset,onlyShowAtTopOffset=_ref$onlyShowAtTopOff===void 0?0:_ref$onlyShowAtTopOff,onChange=_ref.onChange,classes=_ref.classes;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldHideHeader=_useState2[0],setShouldHideHeader=_useState2[1];useScrollDirectionChange({enabled:hideOnScroll,offset:scrollOffset,onlyFireOnScrollUpAtTop:onlyShowAtTop,onlyFireOnScrollUpAtTopOffset:onlyShowAtTopOffset,onScrollDown:function onScrollDown(){setShouldHideHeader(true);},onScrollUp:function onScrollUp(){setShouldHideHeader(false);}});useEffect(function(){if(typeof onChange!=='function'){return;}onChange(!shouldHideHeader);},[onChange,shouldHideHeader]);return React.createElement("div",{ref:ref,className:classNames(root,transition,className,_defineProperty(_defineProperty({},classNames(scrolledIn,classes===null||classes===void 0?void 0:classes.scrolledIn),!shouldHideHeader),classNames(scrolledOut,classes===null||classes===void 0?void 0:classes.scrolledOut),shouldHideHeader))},children);}/* eslint-enable react/prop-types */var ScrollHeader=forwardRef(ScrollHeaderBase);ScrollHeader.displayName='ScrollHeader';ScrollHeader.propTypes={children:PropTypes.node.isRequired,classes:PropTypes.shape({scrolledIn:PropTypes.string,scrolledOut:PropTypes.string}),className:PropTypes.string,hideOnScroll:PropTypes.bool,onChange:PropTypes.func,onlyShowAtTop:PropTypes.bool,onlyShowAtTopOffset:PropTypes.number,scrollOffset:PropTypes.number};ScrollHeader.defaultProps={className:null,hideOnScroll:true,scrollOffset:100,classes:{},onChange:null,onlyShowAtTop:false,onlyShowAtTopOffset:0};export default ScrollHeader;

package/core/hooks/events/useScrollDirectionChange.d.ts

@@ -43,6 +43,20 @@ export interface UseScrollDirectionChangeParams {
    */
   onlyFireOnDirectionChange?: boolean;
 
+  /**
+   * If true, onScrollUp fires only when scrollTop is below or equal to
+   * `onlyFireOnScrollUpAtTopOffset`.
+   * @default false
+   */
+  onlyFireOnScrollUpAtTop?: boolean;
+
+  /**
+   * Maximum scrollTop at which `onScrollUp` may fire when
+   * `onlyFireOnScrollUpAtTop` is true.
+   * @default 0
+   */
+  onlyFireOnScrollUpAtTopOffset?: number;
+
   /** Callback triggered on scroll up */
   onScrollUp?: ScrollCallback;
 

package/core/hooks/events/useScrollDirectionChange.js

@@ -6,11 +6,13 @@ import{useEffect,useRef,useCallback}from'react';import{viewScroll$}from'@shopgat
  * UI elements based on scroll behavior.
  *
  * @param {UseScrollDirectionChangeParams} params The hook parameters
- */export default function useScrollDirectionChange(_ref){var enabled=_ref.enabled,_ref$offset=_ref.offset,offset=_ref$offset===void 0?100:_ref$offset,_ref$onlyFireOnDirect=_ref.onlyFireOnDirectionChange,onlyFireOnDirectionChange=_ref$onlyFireOnDirect===void 0?true:_ref$onlyFireOnDirect,onScrollUp=_ref.onScrollUp,onScrollDown=_ref.onScrollDown;var lastDirectionRef=useRef(null);var downTriggeredRef=useRef(false);var upTriggeredRef=useRef(false);/**
+ */export default function useScrollDirectionChange(_ref){var enabled=_ref.enabled,_ref$offset=_ref.offset,offset=_ref$offset===void 0?100:_ref$offset,_ref$onlyFireOnDirect=_ref.onlyFireOnDirectionChange,onlyFireOnDirectionChange=_ref$onlyFireOnDirect===void 0?true:_ref$onlyFireOnDirect,_ref$onlyFireOnScroll=_ref.onlyFireOnScrollUpAtTop,onlyFireOnScrollUpAtTop=_ref$onlyFireOnScroll===void 0?false:_ref$onlyFireOnScroll,_ref$onlyFireOnScroll2=_ref.onlyFireOnScrollUpAtTopOffset,onlyFireOnScrollUpAtTopOffset=_ref$onlyFireOnScroll2===void 0?0:_ref$onlyFireOnScroll2,onScrollUp=_ref.onScrollUp,onScrollDown=_ref.onScrollDown;var lastDirectionRef=useRef(null);var downTriggeredRef=useRef(false);var upTriggeredRef=useRef(false);/**
    * Scroll event handler.
    * Uses `event.direction` and triggers callbacks accordingly.
    */var handleScroll=useCallback(/** @param {ViewScrollEvent} event The event */function(event){if(!enabled||!event.scrolled||!event.direction)return;var scrollTop=event.scrollTop,direction=event.direction;var prevDirection=lastDirectionRef.current;var directionChanged=direction!==prevDirection;// Store current direction and reset flags if direction changed
-if(directionChanged){lastDirectionRef.current=direction;if(direction==='down')downTriggeredRef.current=false;if(direction==='up')upTriggeredRef.current=false;}// 🔽 Handle downward scroll
+if(directionChanged){// @ts-expect-error
+lastDirectionRef.current=direction;if(direction==='down')downTriggeredRef.current=false;if(direction==='up')upTriggeredRef.current=false;}// 🔽 Handle downward scroll
 if(direction==='down'){var shouldFire=(!onlyFireOnDirectionChange||directionChanged||!downTriggeredRef.current)&&scrollTop>=offset;if(shouldFire&&typeof onScrollDown==='function'){downTriggeredRef.current=true;// Strip internal/legacy properties
 var scrollIn=event.scrollIn,scrollOut=event.scrollOut,scrolled=event.scrolled,publicEvent=_objectWithoutProperties(event,_excluded);onScrollDown(publicEvent);}}// 🔼 Handle upward scroll
-if(direction==='up'){var _shouldFire=!onlyFireOnDirectionChange||directionChanged||!upTriggeredRef.current;if(_shouldFire&&typeof onScrollUp==='function'){upTriggeredRef.current=true;var _scrollIn=event.scrollIn,_scrollOut=event.scrollOut,_scrolled=event.scrolled,_publicEvent=_objectWithoutProperties(event,_excluded2);onScrollUp(_publicEvent);}}},[enabled,offset,onlyFireOnDirectionChange,onScrollUp,onScrollDown]);useEffect(function(){if(!enabled)return undefined;var subscription=viewScroll$.subscribe(handleScroll);return function(){return subscription.unsubscribe();};},[enabled,handleScroll]);}
+if(direction==='up'){// if user wants “only fire at the very top” and we’re not at 0, skip
+if(onlyFireOnScrollUpAtTop&&scrollTop>onlyFireOnScrollUpAtTopOffset){return;}var _shouldFire=!onlyFireOnDirectionChange||directionChanged||!upTriggeredRef.current;if(_shouldFire&&typeof onScrollUp==='function'){upTriggeredRef.current=true;var _scrollIn=event.scrollIn,_scrollOut=event.scrollOut,_scrolled=event.scrolled,_publicEvent=_objectWithoutProperties(event,_excluded2);onScrollUp(_publicEvent);}}},[enabled,onlyFireOnDirectionChange,offset,onScrollDown,onlyFireOnScrollUpAtTop,onlyFireOnScrollUpAtTopOffset,onScrollUp]);useEffect(function(){if(!enabled)return undefined;var subscription=viewScroll$.subscribe(handleScroll);return function(){return subscription.unsubscribe();};},[enabled,handleScroll]);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.27.2-beta.2",
+  "version": "7.27.2-beta.4",
   "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.27.2-beta.2",
-    "@shopgate/pwa-common-commerce": "7.27.2-beta.2",
-    "@shopgate/pwa-core": "7.27.2-beta.2",
-    "@shopgate/pwa-ui-ios": "7.27.2-beta.2",
-    "@shopgate/pwa-ui-material": "7.27.2-beta.2",
-    "@shopgate/pwa-ui-shared": "7.27.2-beta.2",
+    "@shopgate/pwa-common": "7.27.2-beta.4",
+    "@shopgate/pwa-common-commerce": "7.27.2-beta.4",
+    "@shopgate/pwa-core": "7.27.2-beta.4",
+    "@shopgate/pwa-ui-ios": "7.27.2-beta.4",
+    "@shopgate/pwa-ui-material": "7.27.2-beta.4",
+    "@shopgate/pwa-ui-shared": "7.27.2-beta.4",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",