Source: toast/commands/OpenToast.es.js

  1. /**
  2.  * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
  3.  *
  4.  * This library is free software; you can redistribute it and/or modify it under
  5.  * the terms of the GNU Lesser General Public License as published by the Free
  6.  * Software Foundation; either version 2.1 of the License, or (at your option)
  7.  * any later version.
  8.  *
  9.  * This library is distributed in the hope that it will be useful, but WITHOUT
  10.  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  11.  * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
  12.  * details.
  13.  */
  15. import ClayAlert from '@clayui/alert';
  16. import {render} from '@liferay/frontend-js-react-web';
  17. import React from 'react';
  18. import {unmountComponentAtNode} from 'react-dom';
  20. import buildFragment from '../../util/build_fragment';
  22. const DEFAULT_ALERT_CONTAINER_ID = 'ToastAlertContainer';
  24. const DEFAULT_RENDER_DATA = {
  25. 	portletId: 'UNKNOWN_PORTLET_ID',
  26. };
  28. const DEFAULT_TOAST_TYPE_TITLES = {
  29. 	danger: Liferay.Language.get('error'),
  30. 	info: Liferay.Language.get('info'),
  31. 	success: Liferay.Language.get('success'),
  32. 	warning: Liferay.Language.get('warning'),
  33. };
  35. const TOAST_AUTO_CLOSE_INTERVAL = 5000;
  37. const TPL_ALERT_CONTAINER = `
  38. 	<div class="alert-container container">
  39. 		<div class="alert-notifications alert-notifications-fixed" id=${DEFAULT_ALERT_CONTAINER_ID}></div>
  40. 	</div>
  41. `;
  43. const getRootElement = ({container, containerId}) => {
  44. 	if (container || containerId) {
  45. 		container = container || document.getElementById(containerId);
  47. 		if (container) {
  48. 			const child = document.createElement('div');
  50. 			container.appendChild(child);
  52. 			return child;
  53. 		}
  54. 	}
  56. 	let alertFixed = document.getElementById(DEFAULT_ALERT_CONTAINER_ID);
  58. 	if (!alertFixed) {
  59. 		alertFixed = buildFragment(TPL_ALERT_CONTAINER).querySelector(
  60. 			'.alert-container.container'
  61. 		);
  63. 		alertFixed = document.body.appendChild(alertFixed);
  64. 	}
  66. 	// Creates a fragment to prevent React from unmounting the alert container
  68. 	container = document.createElement('div');
  69. 	container.className = 'mb-3';
  71. 	const fragmentContainer = document.querySelector(
  72. 		`.alert-notifications.alert-notifications-fixed`
  73. 	);
  75. 	fragmentContainer.appendChild(container);
  77. 	return container;
  78. };
  80. /**
  81.  * Function that implements the Toast pattern, which allows to present feedback
  82.  * to user actions as a toast message in the lower left corner of the page
  83.  *
  84.  * @param {number|boolean} autoClose Flag to indicate alert should automatically call onClose.
  85.  * It also accepts a duration (in ms) which indicates how long to wait. If true is passed in, the
  86.  * timeout will be 10000ms. See https://clayui.com/docs/components/alert.html for more details.
  87.  * @param {HTMLElement} container Target element where the toast React component should be mounted.
  88.  * @param {string} containerId The id of the element where the toast React component should be mounted.
  89.  * @param {string|HTML} message The message to show in the toast notification
  90.  * @param {string|HTML} title The title associated with the message
  91.  * @param {string} displayType The displayType of notification to show. It can be one of the
  92.  * following: 'danger', 'info', 'success', 'warning'
  93.  * @return {ClayToast} The Alert toast created
  94.  * @review
  95.  */
  97. function openToast({
  98. 	autoClose = TOAST_AUTO_CLOSE_INTERVAL,
  99. 	container,
  100. 	containerId,
  101. 	message = '',
  102. 	onClick = () => {},
  103. 	onClose = () => {},
  104. 	renderData = DEFAULT_RENDER_DATA,
  105. 	title,
  106. 	toastProps = {},
  107. 	type = 'success',
  108. 	variant,
  109. }) {
  110. 	const rootElement = getRootElement({container, containerId});
  112. 	unmountComponentAtNode(rootElement);
  114. 	const onCloseFn = (event) => {
  115. 		if (onClose) {
  116. 			onClose({event});
  117. 		}
  119. 		if (!event || !event.defaultPrevented) {
  120. 			if (!container || !containerId) {
  121. 				rootElement.parentNode.removeChild(rootElement);
  122. 			}
  124. 			unmountComponentAtNode(rootElement);
  125. 		}
  126. 	};
  128. 	let titleHTML =
  129. 		title === undefined ? DEFAULT_TOAST_TYPE_TITLES[type] : title;
  131. 	if (titleHTML) {
  132. 		titleHTML = titleHTML.replace(/:$/, '');
  133. 		titleHTML = `<strong class="lead">${titleHTML}:</strong>`;
  134. 	}
  135. 	else {
  136. 		titleHTML = '';
  137. 	}
  139. 	render(
  140. 		<ClayAlert
  141. 			autoClose={autoClose}
  142. 			displayType={type}
  143. 			onClick={(event) => onClick({event, onClose: onCloseFn})}
  144. 			onClose={onCloseFn}
  145. 			variant={variant}
  146. 			{...toastProps}
  147. 		>
  148. 			<div
  149. 				dangerouslySetInnerHTML={{
  150. 					__html: `${titleHTML}${message}`,
  151. 				}}
  152. 			/>
  153. 		</ClayAlert>,
  154. 		renderData,
  155. 		rootElement
  156. 	);
  157. }
  159. export {openToast};
  160. export default openToast;