@websolutespa/bom-mixer-ui 1.7.3 → 1.7.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.7.4
+
+### Patch Changes
+
+- aa41666: Added: SvgAnimation
+- Updated dependencies [aa41666]
+  - @websolutespa/bom-mixer-hooks@1.7.1
+
 ## 1.7.3
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -15,6 +15,7 @@ var bomMixerStore = require('@websolutespa/bom-mixer-store');
 var bomMixerModels = require('@websolutespa/bom-mixer-models');
 var Head = require('next/head');
 var router = require('next/router');
+var LottiePlayerLight = require('react-lottie-player/dist/LottiePlayerLight');
 var bomMixerForms = require('@websolutespa/bom-mixer-forms');
 var dynamic = require('next/dynamic');
 var jsApiLoader = require('@googlemaps/js-api-loader');
@@ -28,6 +29,7 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
 var NextLink__default = /*#__PURE__*/_interopDefault(NextLink);
 var swiperCss__default = /*#__PURE__*/_interopDefault(swiperCss);
 var Head__default = /*#__PURE__*/_interopDefault(Head);
+var LottiePlayerLight__default = /*#__PURE__*/_interopDefault(LottiePlayerLight);
 var dynamic__default = /*#__PURE__*/_interopDefault(dynamic);
 var MarkerClustererPlus__default = /*#__PURE__*/_interopDefault(MarkerClustererPlus);
 
@@ -6684,6 +6686,146 @@ const Skeleton = _a => {
   }));
 };
 
+const StyledSvgAnimation = styled__default.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  & > div {
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
+  }
+  ${props => getCssResponsive(props)}
+`;
+const SvgAnimation = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+  var {
+      className,
+      as = 'div',
+      href,
+      animation,
+      loop = false,
+      scrollable = false,
+      scrollableRef,
+      width,
+      height
+    } = _a,
+    props = __rest(_a, ["className", "as", "href", "animation", "loop", "scrollable", "scrollableRef", "width", "height"]);
+  if (!href && !animation) {
+    throw 'SvgAnimation.error: please submit an animation loader or a href';
+  }
+  const elementRef = React.useRef();
+  React.useImperativeHandle(forwardedRef, () => {
+    return elementRef.current;
+  }, [elementRef]);
+  const isIntersecting = bomMixerHooks.useIntersectionObserver(elementRef, {
+    threshold: 0,
+    root: null,
+    rootMargin: '0px'
+  });
+  const playerRef = React.useRef();
+  const [shouldLoad, setShouldLoad] = React.useState(false);
+  const [animationData, setAnimationData] = React.useState();
+  const [animationPath, setAnimationPath] = React.useState();
+  const [animationPosition, setAnimationPosition] = React.useState();
+  // load animation on shouldLoad
+  React.useEffect(() => {
+    if (shouldLoad) {
+      // console.log('SvgAnimation.shouldLoad');
+      if (typeof animation === 'function') {
+        animation().then(setAnimationData);
+      } else {
+        setAnimationPath(href);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shouldLoad]);
+  // handle intersection
+  React.useEffect(() => {
+    if (isIntersecting) {
+      if (!shouldLoad) {
+        setShouldLoad(true);
+      } else {
+        if (!scrollable && playerRef.current) {
+          // console.log('SvgAnimation.play');
+          playerRef.current.goToAndPlay(0);
+        }
+      }
+    } else {
+      if (!scrollable && playerRef.current) {
+        // console.log('SvgAnimation.stop');
+        playerRef.current.stop();
+      }
+    }
+  }, [isIntersecting, scrollable, shouldLoad]);
+  // handle scroll
+  React.useEffect(() => {
+    const scrollElement = scrollable ? scrollableRef ? scrollableRef.current : window : undefined;
+    const onScroll = () => {
+      if (elementRef.current && playerRef.current) {
+        let top = 0;
+        const rect = elementRef.current.getBoundingClientRect();
+        if (scrollableRef && scrollableRef.current) {
+          const scrollableRect = scrollableRef.current.getBoundingClientRect();
+          top = 1 - (rect.top - scrollableRect.top) / (scrollableRect.height + rect.height);
+        } else {
+          top = 1 - rect.top / (window.innerHeight + rect.height);
+        }
+        const position = Math.max(0, Math.min(1, top));
+        const frame = Math.round(playerRef.current.totalFrames * position);
+        setAnimationPosition(frame);
+      }
+    };
+    if (scrollable) {
+      if (scrollElement) {
+        scrollElement.addEventListener('scroll', onScroll, {
+          passive: true
+        });
+      }
+    }
+    return () => {
+      if (scrollable && scrollElement) {
+        scrollElement.removeEventListener('scroll', onScroll);
+      }
+    };
+  }, [scrollable, scrollableRef]);
+  const onLoad = () => {
+    if (!scrollable && playerRef.current) {
+      playerRef.current.goToAndPlay(0);
+    }
+  };
+  const classNames = bomCore.getClassNames('lottie', className, {
+    loading: !animationData
+  });
+  return jsxRuntime.jsxs(StyledSvgAnimation, Object.assign({
+    ref: elementRef,
+    className: classNames,
+    as: as
+  }, props, {
+    children: [animationData && jsxRuntime.jsx(LottiePlayerLight__default.default, {
+      ref: playerRef,
+      animationData: animationData,
+      goTo: animationPosition,
+      onLoad: onLoad,
+      loop: loop,
+      style: {
+        width,
+        height
+      }
+    }), animationPath && jsxRuntime.jsx(LottiePlayerLight__default.default, {
+      ref: playerRef,
+      path: animationPath,
+      goTo: animationPosition,
+      onLoad: onLoad,
+      loop: loop,
+      style: {
+        width,
+        height
+      }
+    })]
+  }));
+});
+SvgAnimation.displayName = 'SvgAnimation';
+
 const Svg = styled__default.default.svg.attrs({
   version: '1.1',
   xmlns: 'http://www.w3.org/2000/svg',
@@ -20543,6 +20685,7 @@ exports.Skeleton = Skeleton;
 exports.Split = Split;
 exports.StoreLocatorSearch = StoreLocatorSearch;
 exports.Svg = Svg;
+exports.SvgAnimation = SvgAnimation;
 exports.SwiperComponent = SwiperComponent;
 exports.SwiperHero = SwiperHero;
 exports.Tabs = Tabs;