@gravityforms/components/react/admin/utils/ConfirmDialog.js

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

import { React, PropTypes } from '@gravityforms/libraries';
import Dialog from '../modules/Dialog';

/**
 * @module ConfirmDialog
 * @description A confirmation dialog recipe.
 *
 * @since 4.1.2
 *
 * @param {object}   props                   Component props.
 * @param {string}   props.confirmButtonType The type of the confirm button.
 * @param {object}   props.customAttributes  Custom attributes for the component.
 * @param {object}   props.i18n              I18n data for the component.
 * @param {boolean}  props.isOpen            If the dialog is open.
 * @param {Function} props.onCancel          On cancel function handler.
 * @param {Function} props.onClose           On close function handler.
 * @param {Function} props.onConfirm         On confirm function handler.
 *
 * @return {JSX.Element} The change integration component.
 */
const ConfirmDialog = ( {
	confirmButtonType = 'primary-new',
	customAttributes = {},
	i18n = {},
	isOpen = false,
	onCancel = () => {},
	onClose = () => {},
	onConfirm = () => {},
} ) => {
	const {
		confirm_change_cancel: confirmChangeCancelI18n,
		confirm_change_confirm: confirmChangeConfirmI18n,
		confirm_change_content: confirmChangeContentI18n,
		confirm_change_heading: confirmChangeHeadingI18n,
	} = i18n || {};

	const dialogProps = {
		alignment: 'top',
		buttonWidth: 'half',
		cancelButtonAttributes: {
			onClick() {
				onCancel();
			},
		},
		cancelButtonText: confirmChangeCancelI18n,
		closeOnMaskClick: false,
		confirmButtonAttributes: {
			onClick() {
				onConfirm();
			},
		},
		confirmButtonText: confirmChangeConfirmI18n,
		confirmButtonType,
		customWrapperClasses: [ 'gravitysmtp-confirm__dialog' ],
		description: confirmChangeContentI18n,
		isOpen,
		maskTheme: 'light',
		maxHeight: '90vh',
		mode: 'dialog',
		onClose: () => {
			onClose();
		},
		padContent: false,
		position: 'absolute',
		showCloseButton: false,
		theme: 'cosmos',
		title: confirmChangeHeadingI18n,
		titleIndicatorAttributes: {
			iconPrefix: 'gravitysmtp-admin-icon',
			size: 'small',
		},
		titleIndicatorType: 'confirm',
		...customAttributes,
	};

	return (
		<Dialog { ...dialogProps } />
	);
};

ConfirmDialog.propTypes = {
	confirmButtonType: PropTypes.string,
	customAttributes: PropTypes.object,
	i18n: PropTypes.object,
	isOpen: PropTypes.bool,
	onCancel: PropTypes.func,
	onClose: PropTypes.func,
	onConfirm: PropTypes.func,
};

ConfirmDialog.displayName = 'ConfirmDialog';

export default ConfirmDialog;