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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

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

var React = _interopRequireWildcard(require("react"));

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

var _mediaQuery = _interopRequireDefault(require("../utils/mediaQuery"));

var _Stack = _interopRequireDefault(require("../Stack"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _Text = _interopRequireDefault(require("../Text"));

var _helpers = require("./helpers");

var _useTheme = _interopRequireDefault(require("../hooks/useTheme"));

var _useSwipe = _interopRequireDefault(require("./hooks/useSwipe"));

var _mergeRefs = _interopRequireDefault(require("../utils/mergeRefs"));

const StyledWrapper = (0, _styledComponents.default)(({
  className,
  children,
  dataTest,
  ariaLive
}) => /*#__PURE__*/React.createElement("div", {
  className: className,
  "data-test": dataTest,
  "aria-live": ariaLive,
  role: "status"
}, children)).withConfig({
  displayName: "ToastMessage__StyledWrapper",
  componentId: "sc-16dx2jq-0"
})(["", ""], ({
  theme,
  placement,
  offsetY,
  offsetX,
  opacity
}) => (0, _styledComponents.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, (0, _helpers.getPositionStyle)(placement))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledWrapper.defaultProps = {
  theme: _defaultTheme.default
};

const StyledInnerWrapper = _styledComponents.default.div.withConfig({
  displayName: "ToastMessage__StyledInnerWrapper",
  componentId: "sc-16dx2jq-1"
})(["", ""], ({
  theme,
  visible,
  duration,
  isPaused
}) => (0, _styledComponents.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 ? _helpers.fadeIn : _helpers.fadeOut, theme.orbit.durationNormal, isPaused ? "paused" : "running", _mediaQuery.default.largeMobile((0, _styledComponents.css)(["max-width:360px;width:initial;padding:", ";"], theme.orbit.spaceSmall)), (0, _styledComponents.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, _helpers.lightAnimation, duration, isPaused ? "paused" : "running"))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledInnerWrapper.defaultProps = {
  theme: _defaultTheme.default
};

const ToastMessage = ({
  id,
  onUpdateHeight,
  onMouseEnter,
  onMouseLeave,
  visible,
  onDismiss,
  dismissTimeout,
  placement,
  icon,
  children,
  offset,
  ariaLive
}) => {
  const theme = (0, _useTheme.default)();
  const measurerRef = React.useMemo(() => (0, _helpers.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(() => (0, _mergeRefs.default)([measurerRef, innerRef]), [measurerRef]);
  const [isPaused, setPaused] = React.useState(false);
  const {
    swipeOffset,
    swipeOpacity
  } = (0, _useSwipe.default)(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.default, {
    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.default, {
    type: "white"
  }, children))));
};

var _default = ToastMessage;
exports.default = _default;