@geist-ui/react
Version:
Modern and minimalist React UI library.
123 lines (111 loc) • 6.89 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _JSXStyle from "../styled-jsx.es.js";
import React, { useEffect, useMemo, useState } from 'react';
import useTheme from '../use-theme';
import Button from '../button';
var toastActions = function toastActions(actions, cancelHandle) {
var handler = function handler(event, userHandler) {
userHandler && userHandler(event, cancelHandle);
};
if (!actions || !actions.length) return null;
return actions.map(function (action, index) {
return /*#__PURE__*/React.createElement(Button, {
auto: true,
scale: 2 / 3,
type: action.passive ? 'default' : 'secondary',
key: "action-".concat(index),
onClick: function onClick(event) {
return handler(event, action.handler);
}
}, action.name);
});
};
var getColors = function getColors(palette, type) {
var colors = {
"default": palette.background,
secondary: palette.secondary,
success: palette.success,
warning: palette.warning,
error: palette.error
};
var isDefault = !type || type === 'default';
if (isDefault) return {
bgColor: colors["default"],
color: palette.foreground
};
/**
* Prevent main color change in special types.
* The color will only follow the theme when it is in the default type.
*/
return {
bgColor: colors[type],
color: 'white'
};
};
var ToastItem = /*#__PURE__*/React.memo(function (_ref) {
var index = _ref.index,
total = _ref.total,
toast = _ref.toast,
onHover = _ref.onHover;
var theme = useTheme();
var _useMemo = useMemo(function () {
return getColors(theme.palette, toast.type);
}, [theme.palette, toast.type]),
color = _useMemo.color,
bgColor = _useMemo.bgColor;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
hide = _useState4[0],
setHide = _useState4[1];
var reverseIndex = useMemo(function () {
return total - (index + 1);
}, [total, index]);
var translate = useMemo(function () {
var calc = "100% + -75px + -".concat(20 * reverseIndex, "px");
if (reverseIndex >= 4) return "translate3d(0, -75px, -".concat(reverseIndex, "px) scale(.7)");
if (onHover) {
return "translate3d(0, ".concat(reverseIndex * -75, "px, -").concat(reverseIndex, "px) scale(").concat(total === 1 ? 1 : 0.98205, ")");
}
return "translate3d(0, calc(".concat(calc, "), -").concat(reverseIndex, "px) scale(").concat(1 - 0.05 * reverseIndex, ")");
}, [onHover, index, total, reverseIndex]);
useEffect(function () {
var timer = setTimeout(function () {
setVisible(true);
clearTimeout(timer);
}, 10);
return function () {
return clearTimeout(timer);
};
}, []);
useEffect(function () {
var unMount = false;
var shouldBeHide = reverseIndex > 2 || toast.willBeDestroy;
if (!shouldBeHide || unMount) return;
var timer = setTimeout(function () {
setHide(true);
clearTimeout(timer);
}, 150);
return function () {
unMount = true;
clearTimeout(timer);
};
}, [reverseIndex, toast.willBeDestroy]);
/* istanbul ignore next */
if (reverseIndex > 10) return null;
return /*#__PURE__*/React.createElement("div", {
key: "".concat(toast.id, "-").concat(index),
className: _JSXStyle.dynamic([["1202405835", [theme.palette.foreground, bgColor, color, theme.layout.radius, theme.layout.gap, reverseIndex > 4 ? 0 : 1, reverseIndex > 4 ? 'none' : theme.expressiveness.shadowSmall, translate, theme.layout.gapHalf, theme.layout.gapQuarter]]]) + " " + "toast ".concat(visible ? 'visible' : '', " ").concat(hide ? 'hide' : '')
}, /*#__PURE__*/React.createElement("div", {
className: _JSXStyle.dynamic([["1202405835", [theme.palette.foreground, bgColor, color, theme.layout.radius, theme.layout.gap, reverseIndex > 4 ? 0 : 1, reverseIndex > 4 ? 'none' : theme.expressiveness.shadowSmall, translate, theme.layout.gapHalf, theme.layout.gapQuarter]]]) + " " + "message"
}, toast.text), /*#__PURE__*/React.createElement("div", {
className: _JSXStyle.dynamic([["1202405835", [theme.palette.foreground, bgColor, color, theme.layout.radius, theme.layout.gap, reverseIndex > 4 ? 0 : 1, reverseIndex > 4 ? 'none' : theme.expressiveness.shadowSmall, translate, theme.layout.gapHalf, theme.layout.gapQuarter]]]) + " " + "action"
}, toastActions(toast.actions, toast.cancel)), /*#__PURE__*/React.createElement(_JSXStyle, {
id: "1202405835",
dynamic: [theme.palette.foreground, bgColor, color, theme.layout.radius, theme.layout.gap, reverseIndex > 4 ? 0 : 1, reverseIndex > 4 ? 'none' : theme.expressiveness.shadowSmall, translate, theme.layout.gapHalf, theme.layout.gapQuarter]
}, ".toast.__jsx-style-dynamic-selector{width:420px;max-width:90vw;max-height:75px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(theme.palette.foreground, ";background-color:").concat(bgColor, ";color:").concat(color, ";border:0;border-radius:").concat(theme.layout.radius, ";padding:").concat(theme.layout.gap, ";position:absolute;bottom:0;right:0;opacity:").concat(reverseIndex > 4 ? 0 : 1, ";box-shadow:").concat(reverseIndex > 4 ? 'none' : theme.expressiveness.shadowSmall, ";-webkit-transform:translate3d(0,100%,0px) scale(1);-ms-transform:translate3d(0,100%,0px) scale(1);transform:translate3d(0,100%,0px) scale(1);-webkit-transition:-webkit-transform 400ms ease 0ms,visibility 200ms ease 0ms, opacity 200ms ease 0ms;-webkit-transition:transform 400ms ease 0ms,visibility 200ms ease 0ms, opacity 200ms ease 0ms;transition:transform 400ms ease 0ms,visibility 200ms ease 0ms, opacity 200ms ease 0ms;}.toast.visible.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:").concat(translate, ";-ms-transform:").concat(translate, ";transform:").concat(translate, ";}.toast.hide.__jsx-style-dynamic-selector{opacity:0;visibility:hidden;pointer-events:none;}.message.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-transition:opacity 0.4s ease;transition:opacity 0.4s ease;font-size:0.875rem;display:-webkit-box;word-break:break-all;padding-right:").concat(theme.layout.gapHalf, ";overflow:hidden;max-height:100%;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.1rem;}.toast.__jsx-style-dynamic-selector button + button{margin-left:").concat(theme.layout.gapQuarter, ";}")));
});
export default ToastItem;