@razorpay/blade
Version:
The Design System that powers Razorpay
150 lines (147 loc) • 7 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import 'react';
import toast from 'react-hot-toast';
import styled, { keyframes, css } from 'styled-components';
import '../Box/index.js';
import '../Button/index.js';
import '../Button/IconButton/index.js';
import '../Icons/index.js';
import '../Box/BaseBox/index.js';
import '../Typography/index.js';
import '../../utils/index.js';
import getIn from '../../utils/lodashButBetter/get.js';
import '../../utils/makeAccessible/index.js';
import '../../utils/metaAttribute/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import CheckCircleIcon from '../Icons/CheckCircleIcon/CheckCircleIcon.js';
import AlertOctagonIcon from '../Icons/AlertOctagonIcon/AlertOctagonIcon.js';
import InfoIcon from '../Icons/InfoIcon/InfoIcon.js';
import AlertTriangleIcon from '../Icons/AlertTriangleIcon/AlertTriangleIcon.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import useTheme from '../BladeProvider/useTheme.js';
import { Box } from '../Box/Box.js';
import Button from '../Button/Button/Button.js';
import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
import { castWebType } from '../../utils/platform/castUtils.js';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { Text } from '../Typography/Text/Text.js';
import { IconButton } from '../Button/IconButton/IconButton.js';
import CloseIcon from '../Icons/CloseIcon/CloseIcon.js';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var iconMap = {
positive: CheckCircleIcon,
negative: AlertOctagonIcon,
information: InfoIcon,
neutral: InfoIcon,
notice: AlertTriangleIcon
};
var borderColorMap = {
positive: 'feedback.border.positive.intense',
negative: 'feedback.border.negative.intense',
notice: 'feedback.border.notice.intense',
information: 'feedback.border.information.intense',
neutral: 'feedback.border.neutral.intense'
};
var slideIn = /*#__PURE__*/keyframes(["from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:translateY(0);}"]);
var slideOut = /*#__PURE__*/keyframes(["from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(100%);}"]);
var AnimatedFade = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "Toastweb__AnimatedFade",
componentId: "lbyqty-0"
})(function (_ref) {
var animationType = _ref.animationType,
toastBorderColor = _ref.toastBorderColor;
return css(["overflow:hidden;border:1px solid ", ";", ""], toastBorderColor, animationType);
});
var Toast = function Toast(_ref2) {
var type = _ref2.type,
_ref2$color = _ref2.color,
color = _ref2$color === void 0 ? 'neutral' : _ref2$color,
leading = _ref2.leading,
action = _ref2.action,
content = _ref2.content,
onDismissButtonClick = _ref2.onDismissButtonClick,
isVisible = _ref2.isVisible,
id = _ref2.id;
var _useTheme = useTheme(),
theme = _useTheme.theme;
var Icon = leading || iconMap[color];
var isPromotional = type === 'promotional';
var actionButton = action ? /*#__PURE__*/jsx(Box, {
children: /*#__PURE__*/jsx(Button, {
size: "xsmall",
variant: isPromotional ? 'secondary' : 'tertiary',
color: isPromotional ? 'primary' : 'white',
onClick: function onClick(event) {
var _action$onClick;
event.stopPropagation();
action === null || action === void 0 ? void 0 : (_action$onClick = action.onClick) === null || _action$onClick === void 0 ? void 0 : _action$onClick.call(action, {
event: event,
toastId: id
});
},
isLoading: action === null || action === void 0 ? void 0 : action.isLoading,
children: action === null || action === void 0 ? void 0 : action.text
})
}) : null;
var enter = /*#__PURE__*/css(["opacity:0;animation:", " ", " ", " forwards;"], slideIn, makeMotionTime(theme.motion.duration.gentle), castWebType(theme.motion.easing.entrance));
var exit = /*#__PURE__*/css(["opacity:1;animation:", " ", " ", " forwards;"], slideOut, makeMotionTime(theme.motion.duration.moderate), castWebType(theme.motion.easing.exit));
return /*#__PURE__*/jsxs(AnimatedFade, _objectSpread(_objectSpread(_objectSpread({}, makeAccessible({
role: 'status',
liveRegion: 'polite'
})), metaAttribute({
name: MetaConstants.Toast
})), {}, {
toastBorderColor: getIn(theme.colors, isPromotional ? 'surface.border.gray.muted' : borderColorMap[color]),
animationType: isVisible ? enter : exit,
width: "100%",
display: "flex",
gap: "spacing.3",
paddingX: "spacing.4",
paddingY: isPromotional ? 'spacing.4' : 'spacing.3',
borderRadius: "medium",
alignItems: "center",
backgroundColor: isPromotional ? 'surface.background.gray.intense' : "feedback.background.".concat(color, ".intense"),
children: [Icon ? /*#__PURE__*/jsx(Box, {
flexShrink: 0,
display: "flex",
alignItems: "center",
alignSelf: isPromotional ? 'start' : 'center',
children: /*#__PURE__*/jsx(Icon, {
color: isPromotional ? 'surface.icon.gray.normal' : 'surface.icon.staticWhite.normal'
})
}) : null, /*#__PURE__*/jsxs(Box, {
display: "flex",
flexDirection: "column",
gap: "spacing.3",
children: [isPromotional ? content : /*#__PURE__*/jsx(Text, {
as: "span",
size: "small",
color: "surface.text.staticWhite.normal",
children: content
}), isPromotional && actionButton]
}), /*#__PURE__*/jsxs(Box, {
alignSelf: "start",
marginLeft: "auto",
display: "flex",
gap: "spacing.4",
children: [!isPromotional && actionButton, /*#__PURE__*/jsx(IconButton, {
emphasis: isPromotional ? 'intense' : 'subtle',
accessibilityLabel: "Dismiss toast",
onClick: function onClick(event) {
event.stopPropagation();
onDismissButtonClick === null || onDismissButtonClick === void 0 ? void 0 : onDismissButtonClick({
event: event,
toastId: id
});
toast.dismiss(id);
},
icon: CloseIcon
})]
})]
}));
};
export { Toast };
//# sourceMappingURL=Toast.web.js.map