organism-react-scroll-animate/build/es/src/ui/organisms/ScrollAnimate.mjs

React Animate When You Scroll

import _objectSpread from "reshow-runtime/es/helpers/objectSpread2";
import _objectWithoutProperties from "reshow-runtime/es/helpers/objectWithoutProperties";
var _excluded = ["once", "isKeep", "minHeight", "children", "targetInfo", "style", "onEntered"],
  _excluded2 = ["monitorScroll", "container"];
import React, { useRef, useCallback, useEffect } from "react";
import { build } from "react-atomic-molecule";
import Animate from "organism-react-animate";
import { ScrollInfo, scrollStore } from "organism-react-scroll-nav";
import callfunc from "call-func";
import { jsx as _jsx } from "react/jsx-runtime";
var useScrollContent = function useScrollContent(props) {
  var {
      once = true,
      //will not update monitorScroll 
      isKeep = false,
      // will keep update monitorScroll if monitorScroll set to true
      minHeight = 155,
      //need great than browser minHeigh 150px
      children,
      targetInfo,
      style,
      onEntered
    } = props,
    otherProps = _objectWithoutProperties(props, _excluded);
  var {
    isShown,
    isOnScreen,
    targetId
  } = targetInfo;
  var lastShown = useRef();
  useEffect(function () {
    if (once && isShown) {
      var node = scrollStore.scroller.getNode(targetId);
      if (node && !callfunc(node.getMonitorScroll)) {
        node.detach();
      }
    }
  }, [once, isShown, targetId]);
  var handler = {
    entered: useCallback(function (node, isAppear) {
      setTimeout(function () {
        callfunc(onEntered, [node, isAppear]);
        if (once && !lastShown.current) {
          lastShown.current = true;
        }
      });
    }, [once, onEntered])
  };

  /*handle el*/
  var el;
  var thisStyle = _objectSpread({}, style);
  if (isOnScreen || (once || isKeep) && isShown) {
    el = build(children, {
      doCallFunction: true
    })();
  } else {
    thisStyle.minHeight = minHeight;
  }
  return {
    otherProps,
    handler,
    el,
    style: thisStyle
  };
};
var ScrollContent = function ScrollContent(props) {
  var {
    otherProps,
    handler,
    el,
    style
  } = useScrollContent(props);
  return /*#__PURE__*/_jsx(Animate, _objectSpread(_objectSpread({}, otherProps), {}, {
    style: style,
    onEntered: handler.entered,
    children: el
  }));
};
var ScrollAnimate = function ScrollAnimate(_ref) {
  var {
      monitorScroll = false,
      container = ScrollContent
    } = _ref,
    others = _objectWithoutProperties(_ref, _excluded2);
  return /*#__PURE__*/_jsx(ScrollInfo, _objectSpread(_objectSpread({}, others), {}, {
    monitorScroll: monitorScroll,
    container: container
  }));
};
export default ScrollAnimate;