@moxy/react-page-swapper/lib/layout.js

An orchestrator that eases out the implementation of page transitions

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.buildExitStyle = exports.buildEnterStyle = exports.lockContainerSize = void 0;

const lockContainerSize = element => {
  const {
    width,
    height
  } = getComputedStyle(element);
  element.style.minWidth = width;
  element.style.minHeight = height;
  return () => {
    element.style.minWidth = '';
    element.style.minHeight = '';
  };
};

exports.lockContainerSize = lockContainerSize;

const buildEnterStyle = () => ({
  position: 'relative'
});

exports.buildEnterStyle = buildEnterStyle;

const buildExitStyle = element => {
  if (!element) {
    return {};
  }

  const {
    width,
    height
  } = getComputedStyle(element);
  const {
    top,
    left
  } = element.getBoundingClientRect();
  return {
    position: 'fixed',
    top,
    left,
    width: parseInt(width, 10),
    height: parseInt(height, 10),
    pointerEvents: 'none'
  };
};

exports.buildExitStyle = buildExitStyle;