@amsterdam/bmi-component-library/es/common/src/ConfirmDialog/ConfirmDialog.js

A React component library based on ASC and Material-UI aimed at repurposing and sharing components across BMI projects

function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Heading}from"@amsterdam/asc-ui";import{useEffect,useState,useRef}from"react";import{BehaviorSubject}from"rxjs";import Modal from"../Modal/Modal";import{ButtonStyles,MessageStyle}from"./ConfirmDialogStyles";export const initialState={message:"",onConfirm:()=>{}};const subject=new BehaviorSubject(initialState);export const confirm=({title="Waarschuwing",message="Weet u zeker dat u dit item definitief wilt verwijderen?",textConfirmButton="Ja",textCancelButton="Nee",onConfirm=()=>{},onCancel},store=subject)=>{store.next({title,message,textConfirmButton,textCancelButton,onCancel,onConfirm})};const ConfirmDialog=({size="sm",hideCloseButton=true,backdropOpacity=.3,zIndexOffset=1,disablePortal=false,open=false,store=subject})=>{const mounted=useRef(false);const[state,setState]=useState(initialState);const[isVisible,setIsVisible]=useState(open);useEffect(()=>{mounted.current=true;store.subscribe(props=>{if(mounted.current===false)return;setState(_object_spread({},props));if(props.message){setIsVisible(true)}});return()=>{mounted.current=false;setIsVisible(false);store.next(initialState)}},[]);return _jsxs(Modal,{id:"confirm-dialog","data-testid":"confirm-dialog",open:isVisible,size:size,backdropOpacity:backdropOpacity,zIndexOffset:zIndexOffset,disablePortal:disablePortal,children:[_jsx(Modal.TopBar,{onCloseButton:()=>{setIsVisible(false);state.onCancel&&state.onCancel()},hideCloseButton:hideCloseButton,children:_jsx(Heading,{forwardedAs:"h1",children:state.title})}),_jsx(Modal.Content,{children:_jsx(MessageStyle,{message:state.message,children:state.message})}),_jsxs(Modal.Actions,{children:[_jsxs(Modal.Actions.Left,{children:[_jsx(ButtonStyles,{"data-testid":"confirm-button",variant:"primary",style:{marginRight:"8px"},onClick:()=>{setIsVisible(false);state.onConfirm()},children:state.textConfirmButton}),_jsx(ButtonStyles,{"data-testid":"cancel-button",variant:"primaryInverted",onClick:()=>{setIsVisible(false);state.onCancel&&state.onCancel()},children:state.textCancelButton})]}),_jsx(Modal.Actions.Right,{children:"\xa0"})]})]})};export default ConfirmDialog;
//# sourceMappingURL=ConfirmDialog.js.map