@shopgate/pwa-ui-shared 7.29.1-beta.1 → 7.30.0-alpha.2

package/Ripple/components/RippleAnimation/index.js

@@ -1,6 +1,19 @@
-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 Transition from'react-inline-transition-group';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import style from"../../style";/**
- * The ripple animation component.
- */var RippleAnimation=/*#__PURE__*/function(_Component){function RippleAnimation(){var _this2;_classCallCheck(this,RippleAnimation);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,RippleAnimation,[].concat(args));_defineProperty(_this2,"handlePhaseEnd",function(){_this2.props.onComplete();});return _this2;}_inherits(RippleAnimation,_Component);return _createClass(RippleAnimation,[{key:"render",value:/**
-   * Renders the component.
-   * @returns {JSX}
-   */function render(){var duration=this.props.duration;return React.createElement(Transition,{childrenStyles:{base:{backgroundColor:this.props.color,height:this.props.size,width:this.props.size,transform:'translate3d(-50%, -50%, 0) scale3d(0, 0, 1)',transition:"opacity ".concat(duration,"ms cubic-bezier(0.25, 0.1, 0.25, 1), transform ").concat(duration,"ms cubic-bezier(0.25, 0.1, 0.25, 1)"),left:this.props.x,top:this.props.y,opacity:0.25},appear:{transform:'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',opacity:0},enter:{transform:'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',opacity:0},leave:{}},onPhaseEnd:this.handlePhaseEnd},React.createElement("div",{className:style.ripple}));}}]);}(Component);_defineProperty(RippleAnimation,"defaultProps",{color:themeConfig.colors.dark,duration:300,onComplete:function onComplete(){},size:48,x:0,y:0});export default RippleAnimation;
+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 React,{useEffect,useRef,useMemo}from'react';import PropTypes from'prop-types';import{Transition}from'react-transition-group';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import style from"../../style";/**
+ * The RippleAnimation component
+ *
+ * Plays a one-shot ripple animation and calls `onComplete` when finished.
+ * @param {Object} props The component props.
+ * @param {string} props.color The ripple color.
+ * @param {number} props.duration The animation duration in milliseconds.
+ * @param {Function} props.onComplete The callback to be called when the animation is complete.
+ * @param {number} props.size The size of the ripple in pixels.
+ * @param {number} props.x The x coordinate of the ripple center.
+ * @param {number} props.y The y coordinate of the ripple center.
+ * @returns {JSX.Element}
+ */function RippleAnimation(_ref){var color=_ref.color,duration=_ref.duration,onComplete=_ref.onComplete,size=_ref.size,x=_ref.x,y=_ref.y;var nodeRef=useRef(null);// Trigger the animation immediately
+var inProp=true;var baseStyle=useMemo(function(){return{position:'absolute',backgroundColor:color,height:size,width:size,left:x,top:y,borderRadius:'50%',transform:'translate3d(-50%, -50%, 0) scale3d(0, 0, 1)',opacity:0.25,transition:"opacity ".concat(duration,"ms cubic-bezier(0.25, 0.1, 0.25, 1), transform ").concat(duration,"ms cubic-bezier(0.25, 0.1, 0.25, 1)"),pointerEvents:'none'};},[color,duration,size,x,y]);var transitionStyles=useMemo(function(){return{entering:{transform:'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',opacity:0},entered:{transform:'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',opacity:0},exiting:{},exited:{},unmounted:{}};},[]);// Run callback when transition ends
+useEffect(function(){var el=nodeRef.current;if(!el)return undefined;/**
+     * Handles the transition end event and calls onComplete for relevant properties.
+     * @param {TransitionEvent} e - The transition event object
+     */var handleEnd=function handleEnd(e){// Only handle transform or opacity transitions
+if(e.propertyName==='transform'||e.propertyName==='opacity'){onComplete();}};el.addEventListener('transitionend',handleEnd);return function(){return el.removeEventListener('transitionend',handleEnd);};},[onComplete]);return React.createElement(Transition,{"in":inProp,timeout:duration,appear:true,mountOnEnter:true,unmountOnExit:true,nodeRef:nodeRef},function(state){return React.createElement("div",{ref:nodeRef,className:style.ripple,style:_extends({},baseStyle,{},transitionStyles[state])});});}RippleAnimation.defaultProps={color:themeConfig.colors.dark,duration:300,onComplete:function onComplete(){},size:48,x:0,y:0};export default React.memo(RippleAnimation);

package/package.json

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