import * as React from "react" ; import { useEffect , useState } from 'react' ; import styles from './AnimatedDialog.module.scss' ; import { Dialog , IDialogProps , IDialogContentProps } from 'office-ui-fabric-react/lib/Dialog' ; import { Icon } from 'office-ui-fabric-react/lib/Icon' ; import { DefaultButton , PrimaryButton } from 'office-ui-fabric-react/lib/Button' ; import { Spinner , SpinnerSize } from 'office-ui-fabric-react/lib/Spinner' ; require ( 'animate.css/animate.min.css' ) ; export interface IAnimatedDialogProps extends IDialogProps { dialogAnimationInType ? : string ; dialogAnimationOutType ? : string ; iconName ? : string ; iconAnimationType ? : string ; showAnimatedDialogFooter ? : boolean ; okButtonText ? : string ; onOkClick ? : ( ) => void ; cancelButtonText ? : string ; onSuccess ? : ( ) => void ; onError ? : ( ) => void ; } const animationPrefix = `animate__` ; const mainAnimationClass = `${ animationPrefix }animated` ; const defaultDialogAnimationClass = `${ animationPrefix }bounceIn` ; const defaultIconAnimationClass = `${ animationPrefix }zoomIn` ; export function AnimatedDialog ( props ) { const [ dialogProps , setDialogProps ] = useState < IDialogProps > ( props ) ; const [ animatedDialogContentProps , setAnimatedDialogContentProps ] = useState < IDialogContentProps > ( props . dialogContentProps ) ; const [ animatedDialogFooter , setAnimatedDialogFooter ] = useState < JSX . Element > ( null ) ; const [ loading , setLoading ] = useState < boolean > ( false ) ; const { dialogAnimationInType , dialogAnimationOutType , iconName , iconAnimationType , modalProps , dialogContentProps , showAnimatedDialogFooter , okButtonText , cancelButtonText } = props ; const currentContainerClass = modalProps && modalProps . containerClassName ; const containerAnimationClass = `${ currentContainerClass } ${ mainAnimationClass } ${ animationPrefix }fast` ; const getAnimatedDialogFooter = ( ) : JSX . Element => { return showAnimatedDialogFooter ? < div className = { styles . animatedDialogFooter } > < PrimaryButton onClick = { async ( ) => { setLoading ( true ) ; try { await props . onOkClick ( ) ; props . onSuccess ( ) ; } catch ( error ) { props . onError ( ) ; } setLoading ( false ) ; } } disabled = { loading } text = { ! loading && ( okButtonText ? okButtonText : "Ok" ) } iconProps = { ! loading && { iconName : 'CheckMark' } } > { loading && < Spinner size = { SpinnerSize . medium } />} < /PrimaryButton> < DefaultButton onClick = { props . onDismiss } text = { cancelButtonText ? cancelButtonText : "Cancel" } disabled = { loading } iconProps = { { iconName : 'Cancel' } } /> < /div> : null; } ; useEffect ( ( ) => { let title = dialogContentProps && dialogContentProps . title ; if ( iconName ) { title = < div className = { styles . animatedDialogTitleContainer } > < Icon iconName = { iconName } className = { iconAnimationType ? `${ mainAnimationClass } ${ animationPrefix }${ iconAnimationType }` : `${ mainAnimationClass } ${ defaultIconAnimationClass }` } /> < br / > < span > { dialogContentProps && dialogContentProps . title } < /span> < /div>; } setAnimatedDialogContentProps ( { ... dialogContentProps , title } ) ; } , [ ] ) ; useEffect ( ( ) => { setAnimatedDialogFooter ( getAnimatedDialogFooter ( ) ) ; } , [ loading ] ) ; useEffect ( ( ) => { let containerClassName = `${ containerAnimationClass } ${ defaultDialogAnimationClass }` ; if ( props . dialogAnimationInType ) { containerClassName = `${ containerAnimationClass } ${ animationPrefix }${ dialogAnimationInType }` ; } if ( props . hidden ) { containerClassName = `${ containerAnimationClass } ` ; containerClassName += dialogAnimationOutType ? `${ animationPrefix }${ dialogAnimationOutType }` : `${ animationPrefix }zoomOut` ; } setDialogProps ( { ... props , dialogContentProps : animatedDialogContentProps , modalProps : { ... modalProps , containerClassName } } ) ; } , [ props . hidden ] ) ; return ( < Dialog { ... dialogProps } > { props . children } { animatedDialogFooter } < /Dialog>); }