@kiwicom/orbit-components/es/Toast/ToastMessage.js

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

import * as React from "react";
import styled, { css } from "styled-components";
import mq from "../utils/mediaQuery";
import Stack from "../Stack";
import defaultTheme from "../defaultTheme";
import Text from "../Text";
import { fadeIn, fadeOut, lightAnimation, getPositionStyle, createRectRef } from "./helpers";
import useTheme from "../hooks/useTheme";
import useSwipe from "./hooks/useSwipe";
import mergeRefs from "../utils/mergeRefs";
const StyledWrapper = styled(({
  className,
  children,
  ariaLive
}) => /*#__PURE__*/React.createElement("div", {
  className: className,
  "aria-live": ariaLive,
  role: "status"
}, children)).withConfig({
  displayName: "ToastMessage__StyledWrapper",
  componentId: "sc-16dx2jq-0"
})(["", ""], ({
  theme,
  placement,
  offsetY,
  offsetX,
  opacity
}) => css(["z-index:", ";will-change:transform;cursor:grab;opacity:", ";transition:all ", " ease-in-out;transform:translate(", "px,", "px);", ";"], theme.orbit.zIndexOnTheTop, opacity, theme.orbit.durationNormal, offsetX, offsetY, getPositionStyle(placement))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledWrapper.defaultProps = {
  theme: defaultTheme
};
const StyledInnerWrapper = styled.div.withConfig({
  displayName: "ToastMessage__StyledInnerWrapper",
  componentId: "sc-16dx2jq-1"
})(["", ""], ({
  theme,
  visible,
  duration,
  isPaused
}) => css(["position:relative;border-radius:", ";background:", ";padding:", ";width:100%;overflow:hidden;will-change:transform;pointer-events:", ";animation:", " ", " forwards;animation-play-state:", ";svg{min-height:20px;}", "}", ""], theme.orbit.borderRadiusLarge, theme.orbit.paletteInkNormal, theme.orbit.spaceXSmall, visible ? "auto" : "none", visible ? fadeIn : fadeOut, theme.orbit.durationNormal, isPaused ? "paused" : "running", mq.largeMobile(css(["max-width:360px;width:initial;padding:", ";"], theme.orbit.spaceSmall)), css(["&:before{content:\"\";will-change:transform;position:absolute;border-radius:", ";top:0;z-index:1;left:0;width:100%;height:100%;background:", ";opacity:0.1;animation:", " ", "ms linear;animation-play-state:", ";}"], theme.orbit.borderRadiusLarge, theme.orbit.paletteWhite, lightAnimation, duration, isPaused ? "paused" : "running"))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledInnerWrapper.defaultProps = {
  theme: defaultTheme
};

const ToastMessage = ({
  id,
  onUpdateHeight,
  onMouseEnter,
  onMouseLeave,
  visible,
  onDismiss,
  dismissTimeout,
  placement,
  icon,
  children,
  offset,
  ariaLive
}) => {
  const theme = useTheme();
  const measurerRef = React.useMemo(() => createRectRef(({
    height
  }) => onUpdateHeight(id, height)), // it's safer to include children as well because if they change then we need to remeasure
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [onUpdateHeight, id, children]);
  const innerRef = React.useRef(null);
  const mergedRef = React.useMemo(() => mergeRefs([measurerRef, innerRef]), [measurerRef]);
  const [isPaused, setPaused] = React.useState(false);
  const {
    swipeOffset,
    swipeOpacity
  } = useSwipe(innerRef, onDismiss, 50, placement.match(/right|center/) ? "right" : "left");
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    ariaLive: ariaLive,
    opacity: swipeOpacity,
    visible: visible,
    offsetY: offset,
    offsetX: swipeOffset,
    placement: placement
  }, /*#__PURE__*/React.createElement(StyledInnerWrapper, {
    visible: visible,
    ref: mergedRef,
    isPaused: isPaused,
    duration: dismissTimeout,
    onMouseEnter: () => {
      onMouseEnter();
      setPaused(true);
    },
    onMouseLeave: () => {
      onMouseLeave();
      setPaused(false);
    }
  }, /*#__PURE__*/React.createElement(Stack, {
    flex: true,
    shrink: true,
    spacing: "XSmall"
  }, icon && /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/React.cloneElement(icon, {
    size: "small",
    customColor: theme.orbit.paletteWhite
  }), /*#__PURE__*/React.createElement(Text, {
    type: "white"
  }, children))));
};

export default ToastMessage;