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

UI for React

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
import React from 'react';
import { useLocation } from 'react-router-dom';
import { hash } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import LineElement from '../Line';
import { staticClassName } from '../utils';
const useStyle = styleMethod(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 = /*#__PURE__*/React.forwardRef((props_, ref) => {
  const theme = useOnesyTheme();
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPageTransition?.props?.default), props_), [props_]);
  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
  const {
      add,
      classNames: classNames_,
      duration = 254,
      Component = 'div',
      className,
      children
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const {
    classes
  } = useStyle();
  const location = useLocation();
  const [locationUsed, setLocationUsed] = React.useState(location);
  const [transition, setTransition] = React.useState(add ? 'in' : undefined);
  const refs = {
    location: React.useRef(location),
    transition: React.useRef(transition),
    inProgress: React.useRef(false),
    timeout: React.useRef(undefined),
    duration: React.useRef(duration)
  };
  refs.location.current = location;
  refs.transition.current = transition;
  refs.duration.current = duration;
  const classNamesToUse = {
    in: classNames_?.in || classes.in,
    out: classNames_?.out || classes.out
  };
  const hashLocation = React.useCallback(value => {
    return hash([value.hash, value.pathname, value.search]);
  }, []);
  const onUpdate = React.useCallback(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);
    }
  }, [location, locationUsed]);
  React.useEffect(() => {
    onUpdate();
  }, [location, locationUsed]);
  return /*#__PURE__*/React.createElement(Line, _extends({
    ref: ref,
    direction: "column",
    align: "unset",
    justify: "unset",
    flex: true,
    fullWidth: true,
    Component: Component,
    className: classNames([staticClassName('PageTransition', theme) && [`onesy-PageTransition-root`, `onesy-PageTransition-transition-${transition}`], className, classes.root, classNamesToUse[transition]])
  }, other), /*#__PURE__*/React.cloneElement(children, {
    location: locationUsed
  }));
});
PageTransition.displayName = 'onesy-PageTransition';
export default PageTransition;