beta-parity-react/ui/Toast/Toast.js

Beta Parity React Components

"use strict";function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}Object.defineProperty(exports,"__esModule",{value:true});exports.ToastTitle=exports.ToastProgressBar=exports.ToastMessage=exports.ToastIcon=exports.ToastCloseButton=exports.ToastBody=exports.ToastAction=exports.Toast=void 0;var _react=_interopRequireWildcard(require("react"));var _classnames=_interopRequireDefault(require("classnames"));var _lucideReact=require("lucide-react");require("./index.css");var _useHoverFocus2=_interopRequireDefault(require("../hooks/useHoverFocus"));var _Spinner=require("../Spinner");var _useDidMountEffect=_interopRequireDefault(require("../hooks/useDidMountEffect"));var _jsxRuntime=require("react/jsx-runtime");var _excluded=["id","removeToast","className","title","message","action","icon","height","emphasis","kind","position","dismissButton","importance","pending","autoDismiss","progressBar","duration","pauseOnHover","onDismissed"],_excluded2=["children"],_excluded3=["children"],_excluded4=["children"],_excluded5=["children"],_excluded6=["children"],_excluded7=["children","duration"],_excluded8=["kind","icon","pending"];function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap,t=new WeakMap;return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r})(e)}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=_typeof(e)&&"function"!=typeof e)return{"default":e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u]}return n["default"]=e,t&&t.set(e,n),n}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}function _defineProperty(obj,key,value){key=_toPropertyKey(key);if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t["return"]&&(u=t["return"](),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}}return target}var positions=["top-right","top-center","bottom-right","bottom-center"];var openAnimations={"top-right":"animate-slide-in-left","top-center":"animate-slide-in-top","bottom-right":"animate-slide-in-left","bottom-center":"animate-slide-in-bottom"};var closeAnimations={"top-right":"animate-fade-out","top-center":"animate-fade-out","bottom-right":"animate-fade-out","bottom-center":"animate-fade-out"};var emphasisClasses={normal:"emphasis-normal",high:"emphasis-high"};var heightClasses={flexible:"height-flexible",compact:"height-compact"};var Toast=exports.Toast=function Toast(_ref){var id=_ref.id,removeToast=_ref.removeToast,className=_ref.className,title=_ref.title,message=_ref.message,action=_ref.action,icon=_ref.icon,_ref$height=_ref.height,height=_ref$height===void 0?"flexible":_ref$height,_ref$emphasis=_ref.emphasis,emphasis=_ref$emphasis===void 0?"high":_ref$emphasis,_ref$kind=_ref.kind,kind=_ref$kind===void 0?"generic":_ref$kind,_ref$position=_ref.position,position=_ref$position===void 0?"top-right":_ref$position,_ref$dismissButton=_ref.dismissButton,dismissButton=_ref$dismissButton===void 0?true:_ref$dismissButton,_ref$importance=_ref.importance,importance=_ref$importance===void 0?0:_ref$importance,_ref$pending=_ref.pending,pending=_ref$pending===void 0?false:_ref$pending,_ref$autoDismiss=_ref.autoDismiss,autoDismiss=_ref$autoDismiss===void 0?false:_ref$autoDismiss,_ref$progressBar=_ref.progressBar,progressBar=_ref$progressBar===void 0?false:_ref$progressBar,_ref$duration=_ref.duration,duration=_ref$duration===void 0?5000:_ref$duration,_ref$pauseOnHover=_ref.pauseOnHover,pauseOnHover=_ref$pauseOnHover===void 0?true:_ref$pauseOnHover,_ref$onDismissed=_ref.onDismissed,onDismissed=_ref$onDismissed===void 0?function(){}:_ref$onDismissed,props=_objectWithoutProperties(_ref,_excluded);var _useHoverFocus=(0,_useHoverFocus2["default"])(),isHovered=_useHoverFocus.isHovered,isFocused=_useHoverFocus.isFocused,getEventHandlers=_useHoverFocus.getEventHandlers;var combinedEventHandlers=getEventHandlers(props);var _React$useState=_react["default"].useState(false),_React$useState2=_slicedToArray(_React$useState,2),closing=_React$useState2[0],setClosing=_React$useState2[1];var _React$useState3=_react["default"].useState(duration),_React$useState4=_slicedToArray(_React$useState3,2),remaining=_React$useState4[0],setRemaining=_React$useState4[1];var _React$useState5=_react["default"].useState(Date.now()+duration),_React$useState6=_slicedToArray(_React$useState5,2),end=_React$useState6[0],setEnd=_React$useState6[1];var isCompact=height==="compact";var handleCloseToast=(0,_react.useCallback)(function(){setClosing(true);setTimeout(function(){removeToast(id);onDismissed&&onDismissed()},250)},[id,onDismissed,removeToast]);(0,_react.useEffect)(function(){if(!autoDismiss||!pauseOnHover||pending)return;var timer;if(isHovered){clearTimeout(timer);setRemaining(end-Date.now())}if(!isHovered){if(remaining>0){timer=setTimeout(function(){handleCloseToast()},remaining);setEnd(Date.now()+remaining)}}return function(){if(timer)clearTimeout(timer)}},[isHovered,duration,autoDismiss,pauseOnHover,pending]);(0,_react.useEffect)(function(){if(!autoDismiss||pauseOnHover||pending)return;var timer;timer=setTimeout(function(){handleCloseToast()},duration);return function(){if(timer)clearTimeout(timer)}},[duration,autoDismiss,pauseOnHover,pending]);(0,_useDidMountEffect["default"])(function(){setEnd(Date.now()+duration);setRemaining(duration)},[pending]);return(0,_jsxRuntime.jsxs)("div",_objectSpread(_objectSpread(_objectSpread({tabIndex:0,className:(0,_classnames["default"])("toast",pending?"generic":kind,emphasisClasses[emphasis],heightClasses[height],className,_objectSpread(_defineProperty(_defineProperty({active:true},openAnimations[position],!closing),closeAnimations[position],closing),pauseOnHover&&{paused:closing?false:isHovered}))},props),combinedEventHandlers),{},{children:[(0,_jsxRuntime.jsx)(ToastIcon,{kind:kind,icon:icon,pending:pending}),(0,_jsxRuntime.jsxs)(ToastBody,{children:[!isCompact&&title&&(0,_jsxRuntime.jsx)(ToastTitle,{children:title}),message&&(0,_jsxRuntime.jsx)(ToastMessage,{children:message}),!isCompact&&action&&(0,_jsxRuntime.jsx)(ToastAction,{children:action})]}),(0,_jsxRuntime.jsxs)("div",{className:"action-section",children:[isCompact&&action&&(0,_jsxRuntime.jsx)(ToastAction,{children:action}),isCompact&&action&&dismissButton&&(0,_jsxRuntime.jsx)("span",{className:"toast-action-divider"}),dismissButton&&!pending&&(0,_jsxRuntime.jsx)(ToastCloseButton,{onClick:function onClick(){return handleCloseToast()},children:(0,_jsxRuntime.jsx)(_lucideReact.X,{})})]}),autoDismiss&&!pending&&progressBar&&(0,_jsxRuntime.jsx)(ToastProgressBar,{duration:duration})]}))};var ToastBody=exports.ToastBody=_react["default"].forwardRef(function(_ref2,ref){var children=_ref2.children,props=_objectWithoutProperties(_ref2,_excluded2);return(0,_jsxRuntime.jsx)("div",_objectSpread(_objectSpread({className:"toast-body",ref:ref},props),{},{children:children}))});ToastBody.displayName="ToastBody";var ToastTitle=exports.ToastTitle=_react["default"].forwardRef(function(_ref3,ref){var children=_ref3.children,props=_objectWithoutProperties(_ref3,_excluded3);return(0,_jsxRuntime.jsx)("div",_objectSpread(_objectSpread({className:"toast-title",ref:ref},props),{},{children:children}))});ToastTitle.displayName="ToastTitle";var ToastMessage=exports.ToastMessage=_react["default"].forwardRef(function(_ref4,ref){var children=_ref4.children,props=_objectWithoutProperties(_ref4,_excluded4);return(0,_jsxRuntime.jsx)("div",_objectSpread(_objectSpread({className:"toast-message",ref:ref},props),{},{children:children}))});ToastMessage.displayName="ToastMessage";var ToastAction=exports.ToastAction=_react["default"].forwardRef(function(_ref5,ref){var children=_ref5.children,props=_objectWithoutProperties(_ref5,_excluded5);return children?(0,_jsxRuntime.jsx)("div",_objectSpread(_objectSpread({className:"toast-action",ref:ref},props),{},{children:children})):null});ToastAction.displayName="ToastAction";var ToastCloseButton=exports.ToastCloseButton=_react["default"].forwardRef(function(_ref6,ref){var children=_ref6.children,props=_objectWithoutProperties(_ref6,_excluded6);return(0,_jsxRuntime.jsx)("button",_objectSpread(_objectSpread({className:"toast-close",ref:ref},props),{},{children:children}))});ToastCloseButton.displayName="ToastCloseButton";var ToastProgressBar=exports.ToastProgressBar=_react["default"].forwardRef(function(_ref7,ref){var children=_ref7.children,duration=_ref7.duration,props=_objectWithoutProperties(_ref7,_excluded7);return(0,_jsxRuntime.jsx)("span",_objectSpread(_objectSpread({className:"toast-progress-bar",ref:ref},props),{},{style:{animationDuration:"".concat(duration,"ms")},children:children}))});ToastProgressBar.displayName="ToastProgressBar";var ToastIcon=exports.ToastIcon=_react["default"].forwardRef(function(_ref8,ref){var _ref8$kind=_ref8.kind,kind=_ref8$kind===void 0?"generic":_ref8$kind,icon=_ref8.icon,pending=_ref8.pending,props=_objectWithoutProperties(_ref8,_excluded8);if(icon)return(0,_jsxRuntime.jsx)("span",_objectSpread(_objectSpread({className:"toast-icon",ref:ref},props),{},{children:icon}));if(pending)return(0,_jsxRuntime.jsx)("span",_objectSpread(_objectSpread({className:"toast-icon",ref:ref},props),{},{children:(0,_jsxRuntime.jsx)(_Spinner.Spinner,{size:"sm"})}));switch(kind){case"generic":return null;case"information":return(0,_jsxRuntime.jsx)("span",_objectSpread(_objectSpread({className:"toast-icon",ref:ref},props),{},{children:(0,_jsxRuntime.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,viewBox:"0 0 20 20",fill:"none",children:[(0,_jsxRuntime.jsx)("path",{d:"M10 18.3333C14.5833 18.3333 18.3333 14.5833 18.3333 9.99996C18.3333 5.41663 14.5833 1.66663 10 1.66663C5.41667 1.66663 1.66667 5.41663 1.66667 9.99996C1.66667 14.5833 5.41667 18.3333 10 18.3333Z",fill:"var(--par-color-text-helper-info)",stroke:"var(--par-color-text-helper-info)",strokeWidth:"1.33",strokeLinecap:"round",strokeLinejoin:"round"}),(0,_jsxRuntime.jsx)("path",{d:"M10 10V14.1667",stroke:"var(--par-color-text-primary-inverse)",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),(0,_jsxRuntime.jsx)("path",{d:"M10 6.25H10.0075",stroke:"var(--par-color-text-primary-inverse)",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}));case"affirmative":return(0,_jsxRuntime.jsx)("span",_objectSpread(_objectSpread({className:"toast-icon",ref:ref},props),{},{children:(0,_jsxRuntime.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,viewBox:"0 0 20 20",fill:"none",children:[(0,_jsxRuntime.jsx)("path",{d:"M10 18.3333C14.5833 18.3333 18.3333 14.5833 18.3333 9.99996C18.3333 5.41663 14.5833 1.66663 10 1.66663C5.41667 1.66663 1.66667 5.41663 1.66667 9.99996C1.66667 14.5833 5.41667 18.3333 10 18.3333Z",fill:"var(--par-color-text-helper-affirmative)",stroke:"var(--par-color-text-helper-affirmative)",strokeWidth:"1.33",strokeLinecap:"round",strokeLinejoin:"round"}),(0,_jsxRuntime.jsx)("path",{d:"M6.45833 10.0001L8.81667 12.3584L13.5417 7.64172",stroke:"var(--par-color-text-primary-inverse)",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}));case"cautionary":return(0,_jsxRuntime.jsx)("span",_objectSpread(_objectSpread({className:"toast-icon",ref:ref},props),{},{children:(0,_jsxRuntime.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,viewBox:"0 0 20 20",fill:"none",children:[(0,_jsxRuntime.jsx)("path",{d:"M10 17.8417H4.95C2.05833 17.8417 0.85 15.775 2.25 13.25L4.85 8.56665L7.3 4.16665C8.78333 1.49165 11.2167 1.49165 12.7 4.16665L15.15 8.57498L17.75 13.2583C19.15 15.7833 17.9333 17.85 15.05 17.85H10V17.8417Z",fill:"var(--par-color-text-helper-cautionary)",stroke:"var(--par-color-text-helper-cautionary)",strokeWidth:"1.33",strokeLinecap:"round",strokeLinejoin:"round"}),(0,_jsxRuntime.jsx)("path",{d:"M10 7.5V11.6667",stroke:"var(--par-color-text-primary-inverse)",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),(0,_jsxRuntime.jsx)("path",{d:"M9.99542 14.1667H10.0029",stroke:"var(--par-color-text-primary-inverse)",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}));case"adverse":return(0,_jsxRuntime.jsx)("span",_objectSpread(_objectSpread({className:"toast-icon",ref:ref},props),{},{children:(0,_jsxRuntime.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,viewBox:"0 0 20 20",fill:"none",children:[(0,_jsxRuntime.jsx)("path",{d:"M9.93333 18.3334C14.5167 18.3334 18.2667 14.5834 18.2667 10.0001C18.2667 5.41675 14.5167 1.66675 9.93333 1.66675C5.35 1.66675 1.6 5.41675 1.6 10.0001C1.6 14.5834 5.35 18.3334 9.93333 18.3334Z",fill:"var(--par-color-text-helper-adverse)",stroke:"var(--par-color-text-helper-adverse)",strokeWidth:"1.33",strokeLinecap:"round",strokeLinejoin:"round"}),(0,_jsxRuntime.jsx)("path",{d:"M6.6 10H13.2667",stroke:"var(--par-color-text-primary-inverse)",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}));default:return null}});ToastIcon.displayName="ToastIcon";