@amaui/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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { useLocation } from 'react-router-dom';
import { hash } from '@amaui/utils';
import { classNames, style as styleMethod, useAmauiTheme } from '@amaui/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: 'amaui-PageTransition'
});
const PageTransition = /*#__PURE__*/React.forwardRef((props_, ref) => {
  const theme = useAmauiTheme();
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiPageTransition?.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) && [`amaui-PageTransition-root`, `amaui-PageTransition-transition-${transition}`], className, classes.root, classNamesToUse[transition]])
  }, other), /*#__PURE__*/React.cloneElement(children, {
    location: locationUsed
  }));
});
PageTransition.displayName = 'amaui-PageTransition';
export default PageTransition;