@onesy/ui-react/PageTransition/PageTransition.js

UI for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _reactRouterDom = require("react-router-dom");
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _Line = _interopRequireDefault(require("../Line"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["add", "classNames", "duration", "Component", "className", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(theme => ({
  '@keyframes fadeIn': {
    from: {
      opacity: 0
    },
    to: {
      opacity: 1
    }
  },
  '@keyframes fadeOut': {
    from: {
      opacity: 1
    },
    to: {
      opacity: 0
    }
  },
  root: {},
  in: {
    animation: '$fadeIn 0.24s forwards'
  },
  out: {
    animation: '$fadeOut 0.24s forwards'
  }
}), {
  name: 'onesyTransition'
});
const PageTransition = props_ => {
  var _theme$ui, _theme$ui2, _theme$elements;
  const theme = (0, _styleReact.useOnesyTheme)();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyPageTransition) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
  const {
      add,
      classNames: classNames_,
      duration = 254,
      Component = 'div',
      className,
      children
    } = props,
    other = (0, _objectWithoutProperties2.default)(props, _excluded);
  const {
    classes
  } = useStyle();
  const location = (0, _reactRouterDom.useLocation)();
  const [locationUsed, setLocationUsed] = _react.default.useState(location);
  const [transition, setTransition] = _react.default.useState(add ? 'in' : undefined);
  const refs = {
    location: _react.default.useRef(location),
    transition: _react.default.useRef(transition),
    inProgress: _react.default.useRef(false),
    timeout: _react.default.useRef(undefined),
    duration: _react.default.useRef(duration)
  };
  refs.location.current = location;
  refs.transition.current = transition;
  refs.duration.current = duration;
  const classNamesToUse = {
    in: (classNames_ === null || classNames_ === void 0 ? void 0 : classNames_.in) || classes.in,
    out: (classNames_ === null || classNames_ === void 0 ? void 0 : classNames_.out) || classes.out
  };
  const hashLocation = value => {
    return (0, _utils.hash)([value.hash, value.pathname, value.search]);
  };
  const onUpdate = async () => {
    if (refs.inProgress.current) return;
    if (hashLocation(location) !== hashLocation(locationUsed)) {
      setTransition('out');
      clearTimeout(refs.timeout.current);
      refs.timeout.current = setTimeout(() => {
        setLocationUsed(refs.location.current);
        setTransition('in');
        refs.inProgress.current = false;
      }, refs.duration.current);
    }
  };
  _react.default.useEffect(() => {
    onUpdate();
  }, [location, locationUsed]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
    direction: "column",
    align: "unset",
    justify: "unset",
    flex: true,
    fullWidth: true,
    Component: Component,
    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('PageTransition', theme) && [`onesy-PageTransition-root`, `onesy-PageTransition-transition-${transition}`], className, classes.root, classNamesToUse[transition]])
  }, other), {}, {
    children: /*#__PURE__*/_react.default.cloneElement(children, {
      location: locationUsed
    })
  }));
};
PageTransition.displayName = 'onesy-PageTransition';
var _default = exports.default = PageTransition;