@kiwicom/orbit-components/lib/Toast/helpers.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createRectRef = exports.getPositionStyle = exports.fadeOut = exports.fadeIn = exports.lightAnimation = void 0;

var _styledComponents = require("styled-components");

var _rtl = require("../utils/rtl");

const lightAnimation = ({
  theme
}) => (0, _styledComponents.keyframes)(["0%{transform:", ";}100%{transform:", ";}"], (0, _rtl.translate3d)("-100%, 0, 0")({
  theme
}), (0, _rtl.translate3d)("0%, 0, 0")({
  theme
}));

exports.lightAnimation = lightAnimation;
const fadeIn = (0, _styledComponents.keyframes)(["0%{opacity:0;transform:translateY(-20px);}100%{transform:translateY(0px);opacity:1;}"]);
exports.fadeIn = fadeIn;
const fadeOut = (0, _styledComponents.keyframes)(["0%{opacity:1;transform:translateY(0px);}100%{opacity:0;transform:translateY(-20px);}"]);
exports.fadeOut = fadeOut;

const resolveHorizontal = placement => {
  if (placement.includes("right")) return "flex-end";
  if (placement.includes("center")) return "center";
  return "flex-start";
};

const getPositionStyle = placement => {
  return (0, _styledComponents.css)(["left:0;right:0;display:flex;position:absolute;justify-content:", ";", ";"], resolveHorizontal(placement), placement.includes("top") ? "top: 0" : "bottom: 0");
};

exports.getPositionStyle = getPositionStyle;

// https://github.com/timolins/react-hot-toast/blob/main/src/components/toaster.tsx#L100
const createRectRef = onRect => el => {
  if (el) {
    setTimeout(() => {
      const boundingRect = el.getBoundingClientRect();
      onRect(boundingRect);
    });
  }
};

exports.createRectRef = createRectRef;