@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
86 lines (85 loc) • 3.58 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Stack = _interopRequireDefault(require("../Stack"));
var _Text = _interopRequireDefault(require("../Text"));
var _useTheme = _interopRequireDefault(require("../hooks/useTheme"));
var _useSwipe = _interopRequireDefault(require("./hooks/useSwipe"));
const placements = {
"top-right": "justify-end top-0",
"top-center": "justify-center top-0",
"top-left": "justify-start top-0",
"bottom-right": "justify-end bottom-0",
"bottom-center": "justify-center bottom-0",
"bottom-left": "justify-start bottom-0"
};
const ToastMessage = ({
onMouseEnter,
onMouseLeave,
visible,
onDismiss,
dismissTimeout,
placement,
icon,
children,
offset,
ariaLive
}) => {
const theme = (0, _useTheme.default)();
const ref = React.useRef(null);
const [isPaused, setPaused] = React.useState(false);
const {
swipeOffset,
swipeOpacity
} = (0, _useSwipe.default)(ref, onDismiss, 50, placement === "top-left" || placement === "bottom-left" ? "left" : "right");
return /*#__PURE__*/React.createElement("div", {
"aria-live": ariaLive,
role: "status",
className: (0, _clsx.default)("z-onTop duration-normal absolute left-0 right-0 flex cursor-grab transition-all ease-in-out will-change-transform", "translate-x-[var(--toast-message-offset-x)] translate-y-[var(--toast-message-offset-y)] opacity-[var(--toast-message-opacity)]", placements[placement]),
style: {
"--toast-message-offset-x": `${swipeOffset}px`,
"--toast-message-offset-y": `${offset}px`,
"--toast-message-opacity": swipeOpacity
}
}, /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("rounded-large bg-ink-dark p-xs relative w-full overflow-hidden will-change-transform", "lm:max-w-[360px] lm:w-auto lm:p-sm [&_svg]:min-h-[20px]", visible && "pointer-events-auto animate-[toast-fade-in_theme(transitionDuration.normal)_forwards]", !visible && "pointer-events-none animate-[toast-fade-out_theme(transitionDuration.normal)_forwards]"),
style: {
// Tailwind has no class for this yet
animationPlayState: isPaused ? "paused" : "running"
},
ref: ref,
onMouseEnter: () => {
onMouseEnter();
setPaused(true);
},
onMouseLeave: () => {
onMouseLeave();
setPaused(false);
}
}, /*#__PURE__*/React.createElement("div", {
className: "rounded-large bg-white-normal absolute left-0 top-0 z-[1] h-full w-full animate-[toast-light_var(--toast-message-duration)_linear] opacity-10 will-change-transform rtl:animate-[toast-light-rtl_var(--toast-message-duration)_linear]",
style: {
"--toast-message-duration": `${dismissTimeout}ms`,
// Tailwind has no class for this yet
animationPlayState: isPaused ? "paused" : "running"
}
}), /*#__PURE__*/React.createElement(_Stack.default, {
flex: true,
shrink: true,
spacing: "XSmall"
}, icon && /*#__PURE__*/React.isValidElement(icon) &&
/*#__PURE__*/
// @ts-expect-error TODO: fix this
React.cloneElement(icon, {
size: "small",
customColor: theme.orbit.paletteWhite
}), /*#__PURE__*/React.createElement(_Text.default, {
type: "white"
}, children))));
};
var _default = ToastMessage;
exports.default = _default;