fix: fix #modal scroll behaviour on fullscreen + overlay animation en…

…hancements
dnbexperience · Nov 27, 2020 · 5439fc3 · 5439fc3
1 parent 9f12579
commit 5439fc3
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 138 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/demos.md
@@ -92,7 +92,8 @@ With placement on the left side.
   hide_close_button="true"
   on_open={(e) => console.log('on_open', e)}
   on_close={(e) => console.log('on_close', e)}
-  on_close_prevent={({ close }) => {
+  on_close_prevent={({ close, triggeredBy }) => {
+    console.log('triggeredBy', triggeredBy)
     const timeout = setTimeout(close, 1e3)
     return () => clearTimeout(timeout) // clear timeout on unmount
   }}

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/info.md
@@ -111,7 +111,7 @@ You have the properties `min_width` and `max_width`. But by using these, the wid
   --modal-spacing: var(--spacing-small);
 }
 
-/* Change the Modal fullscreen height calculation  */
+/* Change the Modal fullscreen height calculation if needed  */
 :root {
   /* Defaults to 0 */
   --modal-height-offset: 3rem;

diff --git a/packages/dnb-ui-lib/src/components/modal/Modal.js b/packages/dnb-ui-lib/src/components/modal/Modal.js
@@ -136,8 +136,8 @@ export default class Modal extends React.PureComponent {
     no_animation: false,
     no_animation_on_mobile: false,
     fullscreen: 'auto',
-    align_content: 'left',
-    container_placement: 'right',
+    align_content: null,
+    container_placement: null,
     open_state: null,
     direct_dom_return: false,
     class: null,
@@ -296,33 +296,6 @@ export default class Modal extends React.PureComponent {
     }
   }
 
-  addToIndex() {
-    if (typeof window !== 'undefined') {
-      try {
-        window.__modalStack = window.__modalStack || []
-        window.__modalStack.push(this)
-      } catch (e) {
-        warn(e)
-      }
-    }
-  }
-
-  removeFromIndex() {
-    if (typeof window !== 'undefined') {
-      try {
-        window.__modalStack = window.__modalStack || []
-        window.__modalStack = window.__modalStack.filter(
-          (cur) => cur !== this
-        )
-        if (!window.__modalStack.length) {
-          delete window.__modalStack
-        }
-      } catch (e) {
-        warn(e)
-      }
-    }
-  }
-
   toggleOpenClose = (showModal = null, event = null) => {
     if (event && event.preventDefault) {
       event.preventDefault()
@@ -410,18 +383,6 @@ export default class Modal extends React.PureComponent {
         }
       }
 
-      const id = this._id
-      const wasActive = this.wasActive
-      this.wasActive = modalActive
-
-      if (modalActive) {
-        this.addToIndex()
-        dispatchCustomElementEvent(this, 'on_open', { id })
-      } else if (wasActive) {
-        dispatchCustomElementEvent(this, 'on_close', { id })
-        this.removeFromIndex()
-      }
-
       if (modalActive === false) {
         if (this._triggerRef && this._triggerRef.current) {
           this._triggerRef.current.focus()
@@ -591,6 +552,7 @@ export default class Modal extends React.PureComponent {
           {modalActive && modal_content && (
             <ModalRoot
               {...rest}
+              id={this._id}
               root_id={root_id}
               content_id={content_id || `dnb-modal-${this._id}`}
               labelled_by={labelled_by || this._id}
@@ -613,6 +575,7 @@ export default class Modal extends React.PureComponent {
 class ModalRoot extends React.PureComponent {
   static propTypes = {
     id: PropTypes.string,
+    root_id: PropTypes.string,
     direct_dom_return: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.bool
@@ -625,6 +588,7 @@ class ModalRoot extends React.PureComponent {
   }
   static defaultProps = {
     id: null,
+    root_id: null,
     direct_dom_return: false,
     children: null
   }
@@ -635,7 +599,7 @@ class ModalRoot extends React.PureComponent {
 
   componentDidMount() {
     if (!isTrue(this.props.direct_dom_return)) {
-      Modal.insertModalRoot(this.props.id)
+      Modal.insertModalRoot(this.props.root_id)
 
       try {
         if (!this.portalElem) {

diff --git a/packages/dnb-ui-lib/src/components/modal/ModalContent.js b/packages/dnb-ui-lib/src/components/modal/ModalContent.js
@@ -19,7 +19,8 @@ import {
   InteractionInvalidation,
   extendPropsWithContext,
   combineDescribedBy,
-  validateDOMAttributes
+  validateDOMAttributes,
+  dispatchCustomElementEvent
 } from '../../shared/component-helper'
 import Button from '../button/Button'
 import ScrollView from '../../fragments/scroll-view/ScrollView'
@@ -28,8 +29,9 @@ import Context from '../../shared/Context'
 export default class ModalContent extends React.PureComponent {
   static propTypes = {
     modal_content: PropTypes.node.isRequired,
-    mode: PropTypes.string,
+    mode: PropTypes.oneOf(['modal', 'drawer']),
     hide: PropTypes.bool,
+    id: PropTypes.string,
     root_id: PropTypes.string,
     labelled_by: PropTypes.string,
     content_id: PropTypes.string,
@@ -75,6 +77,7 @@ export default class ModalContent extends React.PureComponent {
   static defaultProps = {
     mode: null,
     hide: null,
+    id: null,
     root_id: null,
     labelled_by: null,
     content_id: null,
@@ -113,17 +116,55 @@ export default class ModalContent extends React.PureComponent {
   }
 
   componentDidMount() {
+    this.addToIndex()
+
     this.removeScrollPossibility()
     this._ii.activate()
     this.setFocus()
+
+    const id = this.props.id
+    dispatchCustomElementEvent(this, 'on_open', { id })
   }
 
   componentWillUnmount() {
     clearTimeout(this._focusTimeout)
+
+    this.removeFromIndex()
+
     if (getListOfModalRoots().length <= 1) {
       this.revertScrollPossibility()
       this._ii.revert()
     }
+
+    const id = this.props.id
+    dispatchCustomElementEvent(this, 'on_close', { id })
+  }
+
+  addToIndex() {
+    if (typeof window !== 'undefined') {
+      try {
+        window.__modalStack = window.__modalStack || []
+        window.__modalStack.push(this)
+      } catch (e) {
+        warn(e)
+      }
+    }
+  }
+
+  removeFromIndex() {
+    if (typeof window !== 'undefined') {
+      try {
+        window.__modalStack = window.__modalStack || []
+        window.__modalStack = window.__modalStack.filter(
+          (cur) => cur !== this
+        )
+        if (!window.__modalStack.length) {
+          delete window.__modalStack
+        }
+      } catch (e) {
+        warn(e)
+      }
+    }
   }
 
   setFocus() {
@@ -233,8 +274,9 @@ export default class ModalContent extends React.PureComponent {
         isTrue(hide) && 'dnb-modal__content--hide',
         isTrue(spacing) && 'dnb-modal__content--spacing',
         align_content && `dnb-modal__content__align--${align_content}`,
-        container_placement &&
-          `dnb-modal__content--${container_placement}`,
+        container_placement || mode === 'drawer'
+          ? `dnb-modal__content--${container_placement || 'right'}`
+          : null,
         isTrue(fullscreen)
           ? 'dnb-modal__content--fullscreen'
           : fullscreen === 'auto' && 'dnb-modal__content--auto-fullscreen',