Modal: Remove Fabric Core dep by moving to local transitions.

common/changes/modal-remove-core-dep_2017-04-20-21-53.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Modal: Updated animation to use local transition and removed Fabric Core dependency",
+      "type": "patch"
+    }
+  ],
+  "email": "micahgodbolt@gmail.com"
+}

packages/office-ui-fabric-react/src/components/Dialog/Dialog.test.tsx

@@ -25,15 +25,13 @@ describe('Dialog', () => {
     const div = document.createElement('div');
     ReactDOM.render(<Dialog isOpen={ true } onDismissed={ handleDismissed } />, div);
     ReactDOM.render(<Dialog isOpen={ false } onDismissed={ handleDismissed } />, div);
-    const event = document.createEvent('CustomEvent'); // AnimationEvent is not supported by PhantomJS
-    event.initCustomEvent('animationend', true, true, {});
-    (event as any).animationName = 'fadeOut';
 
-    const dialog = document.querySelector('.ms-Dialog');
-    expect(dialog).not.to.be.null;
+    setTimeout(() => {
+      const dialog = document.querySelector('.ms-Dialog');
+      expect(dialog).to.be.null;
 
-    dialog.dispatchEvent(event);
+      expect(dismissedCalled).to.be.true;
+    }, 400);
 
-    expect(dismissedCalled).to.be.true;
   });
 });

packages/office-ui-fabric-react/src/components/Modal/Modal.scss

@@ -7,17 +7,20 @@
 // --------------------------------------------------
 // Modal styles
 
+:export { duration: $ms-duration2 }
 
 .root {
   @include ms-baseFont;
   background-color: transparent;
   position: fixed;
   height: 100%;
   width:  100%;
+  display: flex;
   align-items: center;
   justify-content: center;
-  display: none; // Hidden by default
-
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity $ms-duration2;
   :global(.ms-Button.ms-Button--compound) {
     display: block;
     @include margin-left(0);
@@ -30,9 +33,9 @@
   }
 }
 
-// State: The dialog is open
-.root.isOpen {
-  display: flex;
+.rootIsVisible {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 // The actual dialog element

packages/office-ui-fabric-react/src/components/Modal/Modal.tsx

@@ -16,8 +16,8 @@ import styles = require('./Modal.scss');
 
 export interface IDialogState {
   isOpen?: boolean;
-  isAnimatingOpen?: boolean;
-  isAnimatingClose?: boolean;
+  isVisible?: boolean;
+  isVisibleClose?: boolean;
   id?: string;
 }
 
@@ -32,34 +32,48 @@ export class Modal extends BaseComponent<IModalProps, IDialogState> {
     containerClassName: '',
   };
 
+  private _onModalCloseTimer: number;
+
   constructor(props: IModalProps) {
     super(props);
-
-    this._onDialogRef = this._onDialogRef.bind(this);
-
     this.state = {
       id: getId('Modal'),
       isOpen: props.isOpen,
-      isAnimatingOpen: props.isOpen,
-      isAnimatingClose: false
+      isVisible: props.isOpen,
     };
   }
 
   public componentWillReceiveProps(newProps: IModalProps) {
+    clearTimeout(this._onModalCloseTimer);
+
     // Opening the dialog
-    if (newProps.isOpen && !this.state.isOpen) {
-      this.setState({
-        isOpen: true,
-        isAnimatingOpen: true,
-        isAnimatingClose: false
-      });
+    if (newProps.isOpen) {
+      if (!this.state.isOpen) {
+        // First Open
+        this.setState({
+          isOpen: true
+        });
+      } else {
+        // Reopen during closing
+        this.setState({
+          isVisible: true
+        });
+      }
     }
 
     // Closing the dialog
     if (!newProps.isOpen && this.state.isOpen) {
+      this._onModalCloseTimer = this._async.setTimeout(this._onModalClose, parseFloat(styles.duration) * 1000);
       this.setState({
-        isAnimatingOpen: false,
-        isAnimatingClose: true
+        isVisible: false
+      });
+    }
+  }
+
+  public componentDidUpdate(prevState: IDialogState, prevProps: IModalProps) {
+    if (!prevProps.isOpen && !prevState.isVisible) {
+      this.setState({
+        isVisible: true
       });
     }
   }
@@ -79,20 +93,17 @@ export class Modal extends BaseComponent<IModalProps, IDialogState> {
       titleAriaId,
       subtitleAriaId,
     } = this.props;
-    let { id, isOpen, isAnimatingOpen, isAnimatingClose } = this.state;
+    let { id, isOpen, isVisible } = this.state;
+
+    const modalClassName = css('ms-Dialog', styles.root, this.props.className, {
+      ['is-open ']: isOpen,
+      [styles.rootIsVisible]: isVisible,
+    });
 
-    // @TODO - the discussion on whether the Modal contain a property for rendering itself is still being discussed
     if (!isOpen) {
       return null;
     }
 
-    let subTextContent;
-    const modalClassName = css('ms-Dialog', styles.root, this.props.className, {
-      ['is-open ' + styles.isOpen]: isOpen,
-      'ms-u-fadeIn200': isAnimatingOpen,
-      'ms-u-fadeOut200': isAnimatingClose
-    });
-
     // @temp tuatology - Will adjust this to be a panel at certain breakpoints
     if (responsiveMode >= ResponsiveMode.small) {
       return (
@@ -103,9 +114,7 @@ export class Modal extends BaseComponent<IModalProps, IDialogState> {
             ariaDescribedBy={ subtitleAriaId }
             onDismiss={ onDismiss }
           >
-            <div
-              className={ modalClassName }
-              ref={ this._onDialogRef }>
+            <div className={ modalClassName }>
               <Overlay isDarkThemed={ isDarkOverlay } onClick={ isBlocking ? null : onDismiss } />
               <FocusTrapZone
                 className={ css('ms-Dialog-main', styles.main, this.props.containerClassName) }
@@ -123,36 +132,15 @@ export class Modal extends BaseComponent<IModalProps, IDialogState> {
     }
   }
 
-  private _onDialogRef(ref: HTMLDivElement) {
-    if (ref) {
-      this._events.on(ref, 'animationend', this._onAnimationEnd);
-    } else {
-      this._events.off();
-    }
-  }
-
   // Watch for completed animations and set the state
-  private _onAnimationEnd(ev: AnimationEvent) {
-
-    // The dialog has just opened (faded in)
-    if (ev.animationName.indexOf('fadeIn') > -1) {
-      this.setState({
-        isOpen: true,
-        isAnimatingOpen: false
-      });
-    }
-
-    // The dialog has just closed (faded out)
-    if (ev.animationName.indexOf('fadeOut') > -1) {
-      this.setState({
-        isOpen: false,
-        isAnimatingClose: false
-      });
+  private _onModalClose() {
+    this.setState({
+      isOpen: false
+    });
 
-      // Call the onDismiss callback
-      if (this.props.onDismissed) {
-        this.props.onDismissed();
-      }
+    // Call the onDismiss callback
+    if (this.props.onDismissed) {
+      this.props.onDismissed();
     }
   }
 }