@magaya/react-components
Version:
Magaya React Components Library
100 lines (99 loc) • 5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Notification = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
var _react = _interopRequireDefault(require("react"));
var _SvgIcon = require("../SvgIcon");
var SuccessIcon = function SuccessIcon() {
return /*#__PURE__*/_react["default"].createElement(_SvgIcon.SvgIcon, {
width: "24",
height: "24",
viewBox: "0 0 24 24"
}, /*#__PURE__*/_react["default"].createElement("path", {
d: "M11.3906 15.9375C10.875 16.4531 10.0781 16.4531 9.5625 15.9375L6.5625 12.9375C6.04688 12.4219 6.04688 11.625 6.5625 11.1094C7.07812 10.5938 7.875 10.5938 8.39062 11.1094L10.5 13.1719L15.5625 8.10938C16.0781 7.59375 16.875 7.59375 17.3906 8.10938C17.9062 8.625 17.9062 9.42188 17.3906 9.9375L11.3906 15.9375ZM24 12C24 18.6562 18.6094 24 12 24C5.34375 24 0 18.6562 0 12C0 5.39062 5.34375 0 12 0C18.6094 0 24 5.39062 24 12ZM12 2.25C6.60938 2.25 2.25 6.65625 2.25 12C2.25 17.3906 6.60938 21.75 12 21.75C17.3438 21.75 21.75 17.3906 21.75 12C21.75 6.65625 17.3438 2.25 12 2.25Z",
fill: "#379E60"
}));
};
var ErrorIcon = function ErrorIcon() {
return /*#__PURE__*/_react["default"].createElement(_SvgIcon.SvgIcon, {
width: "24",
height: "24",
viewBox: "0 0 24 24"
}, /*#__PURE__*/_react["default"].createElement("path", {
d: "M8.20312 8.20312C8.625 7.78125 9.32812 7.78125 9.75 8.20312L11.9531 10.4531L14.2031 8.20312C14.625 7.78125 15.3281 7.78125 15.75 8.20312C16.2188 8.67188 16.2188 9.375 15.75 9.79688L13.5469 12L15.75 14.2031C16.2188 14.6719 16.2188 15.375 15.75 15.7969C15.3281 16.2656 14.625 16.2656 14.2031 15.7969L11.9531 13.5938L9.75 15.7969C9.32812 16.2656 8.625 16.2656 8.20312 15.7969C7.73438 15.375 7.73438 14.6719 8.20312 14.2031L10.4062 12L8.20312 9.79688C7.73438 9.375 7.73438 8.67188 8.20312 8.20312ZM24 12C24 18.6562 18.6094 24 12 24C5.34375 24 0 18.6562 0 12C0 5.39062 5.34375 0 12 0C18.6094 0 24 5.39062 24 12ZM12 2.25C6.60938 2.25 2.25 6.65625 2.25 12C2.25 17.3906 6.60938 21.75 12 21.75C17.3438 21.75 21.75 17.3906 21.75 12C21.75 6.65625 17.3438 2.25 12 2.25Z",
fill: "#D46159"
}));
};
var WarningIcon = function WarningIcon() {
return /*#__PURE__*/_react["default"].createElement(_SvgIcon.SvgIcon, {
width: "26",
height: "22",
viewBox: "0 0 26 22"
}, /*#__PURE__*/_react["default"].createElement("path", {
d: "M13 0.5C13.6562 0.5 14.2656 0.875 14.5938 1.4375L24.7188 18.6875C25.0469 19.2969 25.0469 20 24.7188 20.5625C24.3906 21.1719 23.7812 21.5 23.125 21.5H2.875C2.17188 21.5 1.5625 21.1719 1.23438 20.5625C0.90625 20 0.90625 19.2969 1.23438 18.6875L11.3594 1.4375C11.6875 0.875 12.2969 0.5 13 0.5ZM13 6.5C12.3438 6.5 11.875 7.01562 11.875 7.625V12.875C11.875 13.5312 12.3438 14 13 14C13.6094 14 14.125 13.5312 14.125 12.875V7.625C14.125 7.01562 13.6094 6.5 13 6.5ZM14.5 17C14.5 16.2031 13.7969 15.5 13 15.5C12.1562 15.5 11.5 16.2031 11.5 17C11.5 17.8438 12.1562 18.5 13 18.5C13.7969 18.5 14.5 17.8438 14.5 17Z"
}));
};
var positions = {
topLeft: {
top: '1rem',
left: '1rem',
alignItems: 'flex-start'
},
top: {
top: '1rem',
left: '50%',
transform: 'translateX(-50%)'
},
topRight: {
position: 'absolute',
top: '1rem',
right: '1rem',
alignItems: 'flex-end'
},
bottomLeft: {
bottom: '1rem',
left: '1rem',
alignItems: 'flex-start'
},
bottom: {
bottom: '1rem',
left: '50%',
transform: 'translateX(-50%)'
},
bottomRight: {
bottom: '1rem',
right: '1rem',
alignItems: 'flex-end'
}
};
var Notification = function Notification(_ref) {
var children = _ref.children,
variant = _ref.variant,
onClose = _ref.onClose,
position = _ref.position;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "k-notification-container",
style: (0, _objectSpread2["default"])({
position: 'absolute'
}, positions[position])
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "k-widget k-notification k-notification-".concat(variant, " k-notification-closable")
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "k-notification-wrap"
}, variant === 'success' && /*#__PURE__*/_react["default"].createElement(SuccessIcon, null), variant === 'error' && /*#__PURE__*/_react["default"].createElement(ErrorIcon, null), variant === 'warning' && /*#__PURE__*/_react["default"].createElement(WarningIcon, null), /*#__PURE__*/_react["default"].createElement("div", {
className: "k-notification-content"
}, children), /*#__PURE__*/_react["default"].createElement("a", {
className: "k-icon k-i-close",
title: "Close",
onClick: onClose
}))));
};
exports.Notification = Notification;
Notification.displayName = 'Notification';
Notification.defaultProps = {
variant: 'success',
position: 'topRight'
};