[components] Refactor dialogs to use new portal component

sanity-io · Oct 6, 2020 · 6cb3b92 · 6cb3b92
1 parent 2f13f6c
commit 6cb3b92
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 18 deletions.
diff --git a/packages/@sanity/components/src/dialogs/ConfirmDialog.js b/packages/@sanity/components/src/dialogs/ConfirmDialog.js
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import DefaultDialog from 'part:@sanity/components/dialogs/default'
 import styles from './styles/ConfirmDialog.css'
-import Button from 'part:@sanity/components/buttons/default'
 
 export default class ConfirmDialog extends React.PureComponent {
   static propTypes = {

diff --git a/packages/@sanity/components/src/dialogs/DefaultDialog.js b/packages/@sanity/components/src/dialogs/DefaultDialog.js
@@ -5,8 +5,8 @@ import CloseIcon from 'part:@sanity/base/close-icon'
 import styles from 'part:@sanity/components/dialogs/default-style'
 import Button from 'part:@sanity/components/buttons/default'
 import ButtonGrid from 'part:@sanity/components/buttons/button-grid'
-import {partition, debounce} from 'lodash'
-import {Portal} from '../utilities/Portal'
+import {Portal} from 'part:@sanity/components/portal'
+import {partition} from 'lodash'
 import Escapable from '../utilities/Escapable'
 import CaptureOutsideClicks from '../utilities/CaptureOutsideClicks'
 import Stacked from '../utilities/Stacked'
@@ -123,6 +123,7 @@ export default class DefaultDialog extends React.PureComponent {
     return (
       <Portal>
         <Stacked>
+          {/* eslint-disable-next-line complexity */}
           {isActive => (
             <div className={className}>
               <div className={styles.overlay} />

diff --git a/packages/@sanity/components/src/dialogs/FullscreenDialog.js b/packages/@sanity/components/src/dialogs/FullscreenDialog.js
@@ -4,9 +4,9 @@ import styles from 'part:@sanity/components/dialogs/fullscreen-style'
 import CloseIcon from 'part:@sanity/base/close-icon'
 import Button from 'part:@sanity/components/buttons/default'
 import ButtonGrid from 'part:@sanity/components/buttons/button-grid'
+import {Portal} from 'part:@sanity/components/portal'
 import PropTypes from 'prop-types'
 import React from 'react'
-import {Portal} from '../utilities/Portal'
 import StackedEscapable from '../utilities/StackedEscapable'
 
 const noop = () => {}
@@ -82,6 +82,7 @@ export default class FullScreenDialog extends React.PureComponent {
     )
   }
 
+  // eslint-disable-next-line complexity
   render() {
     const {title, cardClassName, className, onClose, onEscape, isOpen, actions} = this.props
 

diff --git a/packages/@sanity/components/src/dialogs/stories/confirm.js b/packages/@sanity/components/src/dialogs/stories/confirm.js
@@ -4,8 +4,9 @@ import {action} from 'part:@sanity/storybook/addons/actions'
 import {text, select} from 'part:@sanity/storybook/addons/knobs'
 import DialogContent from 'part:@sanity/components/dialogs/content'
 import ConfirmDialog from 'part:@sanity/components/dialogs/confirm'
+import {PortalProvider} from 'part:@sanity/components/portal'
 import Sanity from 'part:@sanity/storybook/addons/sanity'
-import React from 'react'
+import React, {useEffect, useRef} from 'react'
 
 const chance = new Chance()
 
@@ -41,7 +42,7 @@ export function ConfirmStory() {
   const contentTest = select('content', dialogTestContent, 'minimal')
   return (
     <Sanity part="part:@sanity/components/dialogs/confirm" propTables={[ConfirmDialog]}>
-      <ConfirmDialog
+      <DialogExample
         color={select(
           'color',
           ['default', 'danger', 'success', 'info', 'warning'],
@@ -57,7 +58,24 @@ export function ConfirmStory() {
         title={text('title', 'Confirm', 'props')}
       >
         {contentTest && renderContent(contentTest)}
-      </ConfirmDialog>
+      </DialogExample>
     </Sanity>
   )
 }
+
+function DialogExample(props) {
+  const {children, ...restProps} = props
+  const portalRef = useRef(document.createElement('div'))
+
+  useEffect(() => {
+    portalRef.current.setAttribute('data-portal', '')
+    document.body.appendChild(portalRef.current)
+    return () => document.body.removeChild(portalRef.current)
+  }, [])
+
+  return (
+    <PortalProvider element={portalRef.current}>
+      <ConfirmDialog {...restProps}>{children}</ConfirmDialog>
+    </PortalProvider>
+  )
+}
diff --git a/packages/@sanity/components/src/dialogs/stories/default.js b/packages/@sanity/components/src/dialogs/stories/default.js
@@ -4,8 +4,9 @@ import {action} from 'part:@sanity/storybook/addons/actions'
 import {text, select, boolean} from 'part:@sanity/storybook/addons/knobs'
 import DefaultDialog from 'part:@sanity/components/dialogs/default'
 import DialogContent from 'part:@sanity/components/dialogs/content'
+import {PortalProvider} from 'part:@sanity/components/portal'
 import Sanity from 'part:@sanity/storybook/addons/sanity'
-import React from 'react'
+import React, {useRef, useEffect} from 'react'
 
 const chance = new Chance()
 
@@ -59,9 +60,10 @@ export function DefaultStory() {
 
   const dialogActions = boolean('Show actions', false, 'test') ? actions : []
   const contentTest = select('content', dialogTestContent, 'minimal')
+
   return (
     <Sanity part="part:@sanity/components/dialogs/default" propTables={[DefaultDialog]}>
-      <DefaultDialog
+      <DialogExample
         title={text('title', undefined, 'props')}
         color={select(
           'color',
@@ -76,7 +78,24 @@ export function DefaultStory() {
         actions={dialogActions}
       >
         {contentTest && renderContent(contentTest)}
-      </DefaultDialog>
+      </DialogExample>
     </Sanity>
   )
 }
+
+function DialogExample(props) {
+  const {children, ...restProps} = props
+  const portalRef = useRef(document.createElement('div'))
+
+  useEffect(() => {
+    portalRef.current.setAttribute('data-portal', '')
+    document.body.appendChild(portalRef.current)
+    return () => document.body.removeChild(portalRef.current)
+  }, [])
+
+  return (
+    <PortalProvider element={portalRef.current}>
+      <DefaultDialog {...restProps}>{children}</DefaultDialog>
+    </PortalProvider>
+  )
+}
diff --git a/packages/@sanity/components/src/dialogs/stories/dialogContent.js b/packages/@sanity/components/src/dialogs/stories/dialogContent.js
@@ -2,8 +2,9 @@ import {action} from 'part:@sanity/storybook/addons/actions'
 import {text, select, boolean} from 'part:@sanity/storybook/addons/knobs'
 import DefaultDialog from 'part:@sanity/components/dialogs/default'
 import DialogContent from 'part:@sanity/components/dialogs/content'
+import {PortalProvider} from 'part:@sanity/components/portal'
 import Sanity from 'part:@sanity/storybook/addons/sanity'
-import React from 'react'
+import React, {useEffect, useRef} from 'react'
 
 export function DialogContentStory() {
   const actions = [
@@ -29,7 +30,7 @@ export function DialogContentStory() {
 
   return (
     <Sanity part="part:@sanity/components/dialogs/default" propTables={[DefaultDialog]}>
-      <DefaultDialog
+      <DialogExample
         title={text('title', undefined, 'dialog props')}
         color={select(
           'color',
@@ -56,7 +57,24 @@ export function DialogContentStory() {
         >
           {text('content', 'This is the raw content. use DialogContent to size it', 'props')}
         </DialogContent>
-      </DefaultDialog>
+      </DialogExample>
     </Sanity>
   )
 }
+
+function DialogExample(props) {
+  const {children, ...restProps} = props
+  const portalRef = useRef(document.createElement('div'))
+
+  useEffect(() => {
+    portalRef.current.setAttribute('data-portal', '')
+    document.body.appendChild(portalRef.current)
+    return () => document.body.removeChild(portalRef.current)
+  }, [])
+
+  return (
+    <PortalProvider element={portalRef.current}>
+      <DefaultDialog {...restProps}>{children}</DefaultDialog>
+    </PortalProvider>
+  )
+}
diff --git a/packages/@sanity/components/src/dialogs/stories/fullscreen.js b/packages/@sanity/components/src/dialogs/stories/fullscreen.js
@@ -4,8 +4,9 @@ import {action} from 'part:@sanity/storybook/addons/actions'
 import {text, select, boolean} from 'part:@sanity/storybook/addons/knobs'
 import DialogContent from 'part:@sanity/components/dialogs/content'
 import FullscreenDialog from 'part:@sanity/components/dialogs/fullscreen'
+import {PortalProvider} from 'part:@sanity/components/portal'
 import Sanity from 'part:@sanity/storybook/addons/sanity'
-import React from 'react'
+import React, {useEffect, useRef} from 'react'
 
 const chance = new Chance()
 
@@ -55,7 +56,7 @@ export function FullscreenStory() {
   const contentTest = select('content', dialogTestContent, 'minimal')
   return (
     <Sanity part="part:@sanity/components/dialogs/fullscreen" propTables={[FullscreenDialog]}>
-      <FullscreenDialog
+      <DialogExample
         title={text('title', undefined, 'props')}
         onClose={boolean('Has onClose', false, 'test') && action('onClose')}
         centered={boolean('centered', false, 'props')}
@@ -69,7 +70,24 @@ export function FullscreenStory() {
         onAction={action('onAction')}
       >
         {contentTest && renderFullscreenContent(contentTest)}
-      </FullscreenDialog>
+      </DialogExample>
     </Sanity>
   )
 }
+
+function DialogExample(props) {
+  const {children, ...restProps} = props
+  const portalRef = useRef(document.createElement('div'))
+
+  useEffect(() => {
+    portalRef.current.setAttribute('data-portal', '')
+    document.body.appendChild(portalRef.current)
+    return () => document.body.removeChild(portalRef.current)
+  }, [])
+
+  return (
+    <PortalProvider element={portalRef.current}>
+      <FullscreenDialog {...restProps}>{children}</FullscreenDialog>
+    </PortalProvider>
+  )
+}
diff --git a/packages/@sanity/components/src/dialogs/styles/DefaultDialog.css b/packages/@sanity/components/src/dialogs/styles/DefaultDialog.css
@@ -30,7 +30,8 @@
 
 .root {
   composes: flexCenter from 'part:@sanity/base/theme/layout/positioning-style';
-  position: fixed;
+  /* position: fixed; */
+  position: absolute;
   z-index: var(--zindex-portal);
   top: 0;
   left: 0;
@@ -299,7 +300,7 @@
   z-index: 10;
   display: flex;
   align-items: center;
-  flex-shrink: 0; 
+  flex-shrink: 0;
 
   @nest &::before {
     content: '';