organism-react-scroll-animate/build/cjs/src/ui/organisms/ScrollAnimate.js

React Animate When You Scroll

"use strict";

var _interopRequireDefault = require("reshow-runtime/helpers/interopRequireDefault");
var _interopRequireWildcard = require("reshow-runtime/helpers/interopRequireWildcard");
exports.__esModule = true;
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("reshow-runtime/helpers/objectSpread2"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("reshow-runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var _reactAtomicMolecule = require("react-atomic-molecule");
var _organismReactAnimate = _interopRequireDefault(require("organism-react-animate"));
var _organismReactScrollNav = require("organism-react-scroll-nav");
var _callFunc = _interopRequireDefault(require("call-func"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["once", "isKeep", "minHeight", "children", "targetInfo", "style", "onEntered"],
  _excluded2 = ["monitorScroll", "container"];
var useScrollContent = function useScrollContent(props) {
  var _props$once = props.once,
    once = _props$once === void 0 ? true : _props$once,
    _props$isKeep = props.isKeep,
    isKeep = _props$isKeep === void 0 ? false : _props$isKeep,
    _props$minHeight = props.minHeight,
    minHeight = _props$minHeight === void 0 ? 155 : _props$minHeight,
    children = props.children,
    targetInfo = props.targetInfo,
    style = props.style,
    onEntered = props.onEntered,
    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
  var isShown = targetInfo.isShown,
    isOnScreen = targetInfo.isOnScreen,
    targetId = targetInfo.targetId;
  var lastShown = (0, _react.useRef)();
  (0, _react.useEffect)(function () {
    if (once && isShown) {
      var node = _organismReactScrollNav.scrollStore.scroller.getNode(targetId);
      if (node && !(0, _callFunc["default"])(node.getMonitorScroll)) {
        node.detach();
      }
    }
  }, [once, isShown, targetId]);
  var handler = {
    entered: (0, _react.useCallback)(function (node, isAppear) {
      setTimeout(function () {
        (0, _callFunc["default"])(onEntered, [node, isAppear]);
        if (once && !lastShown.current) {
          lastShown.current = true;
        }
      });
    }, [once, onEntered])
  };

  /*handle el*/
  var el;
  var thisStyle = (0, _objectSpread2["default"])({}, style);
  if (isOnScreen || (once || isKeep) && isShown) {
    el = (0, _reactAtomicMolecule.build)(children, {
      doCallFunction: true
    })();
  } else {
    thisStyle.minHeight = minHeight;
  }
  return {
    otherProps: otherProps,
    handler: handler,
    el: el,
    style: thisStyle
  };
};
var ScrollContent = function ScrollContent(props) {
  var _useScrollContent = useScrollContent(props),
    otherProps = _useScrollContent.otherProps,
    handler = _useScrollContent.handler,
    el = _useScrollContent.el,
    style = _useScrollContent.style;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_organismReactAnimate["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, otherProps), {}, {
    style: style,
    onEntered: handler.entered,
    children: el
  }));
};
var ScrollAnimate = function ScrollAnimate(_ref) {
  var _ref$monitorScroll = _ref.monitorScroll,
    monitorScroll = _ref$monitorScroll === void 0 ? false : _ref$monitorScroll,
    _ref$container = _ref.container,
    container = _ref$container === void 0 ? ScrollContent : _ref$container,
    others = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded2);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_organismReactScrollNav.ScrollInfo, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {
    monitorScroll: monitorScroll,
    container: container
  }));
};
var _default = ScrollAnimate;
exports["default"] = _default;
module.exports = exports.default;