fix(ui-modal): save modal from unnecessary rerender

INSTUI-4575

Author: joyenjoyer

packages/ui-modal/src/Modal/ModalBody/styles.ts

@@ -53,10 +53,13 @@ const generateStyle = (
       label: 'modalBody',
       boxSizing: 'border-box',
       flex: '1 1 auto',
-      overflowY: 'auto',
       '&:focus': {
         outline: 'none'
       },
+      // ModalBody is set to scrollable above 20rem height
+      '@media (min-height: 20rem)': {
+        overflowY: 'auto'
+      },
       ...backgroundStyle
     }
   }

packages/ui-modal/src/Modal/ModalHeader/props.ts

@@ -36,7 +36,6 @@ type ModalHeaderOwnProps = {
   children?: React.ReactNode
   variant?: 'default' | 'inverse'
   spacing?: 'default' | 'compact'
-  smallViewPort?: boolean
 }
 
 type ModalHeaderStyleProps = {
@@ -56,8 +55,7 @@ type ModalHeaderStyle = ComponentStyle<'modalHeader'>
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node,
   variant: PropTypes.oneOf(['default', 'inverse']),
-  spacing: PropTypes.oneOf(['default', 'compact']),
-  smallViewPort: PropTypes.bool
+  spacing: PropTypes.oneOf(['default', 'compact'])
 }
 
 const allowedProps: AllowedPropKeys = ['children', 'variant', 'spacing']

packages/ui-modal/src/Modal/ModalHeader/styles.ts

@@ -44,7 +44,7 @@ const generateStyle = (
   props: ModalHeaderProps,
   state: ModalHeaderStyleProps
 ): ModalHeaderStyle => {
-  const { variant, spacing, smallViewPort } = props
+  const { variant, spacing } = props
   const { withCloseButton } = state
 
   const sizeVariants = {
@@ -83,9 +83,13 @@ const generateStyle = (
       borderBottomWidth: '0.0625rem',
       borderBottomStyle: 'solid',
       borderBottomColor: componentTheme.borderColor,
-      ...(smallViewPort ? { position: 'relative' } : {}),
       ...sizeVariants[spacing!],
-      ...inverseStyle
+      ...inverseStyle,
+
+      // Position is set to relative for small viewports to ensure proper close button positioning during scrolling
+      '@media (max-height: 20rem)': {
+        position: 'relative'
+      }
     }
   }
 }

packages/ui-modal/src/Modal/index.tsx

@@ -22,12 +22,11 @@
  * SOFTWARE.
  */
 
-import { Children, Component, isValidElement, ReactElement } from 'react'
+import { Children, Component, isValidElement } from 'react'
 
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
 import { createChainedFunction } from '@instructure/ui-utils'
 import { testable } from '@instructure/ui-testable'
-import { canUseDOM } from '@instructure/ui-dom-utils'
 
 import { Transition } from '@instructure/ui-motion'
 import { Portal } from '@instructure/ui-portal'
@@ -156,69 +155,31 @@ class Modal extends Component<ModalProps, ModalState> {
     }
   }
 
-  getWindowHeightInRem = (): number => {
-    if (!canUseDOM) {
-      return Infinity
-    }
-    const rootFontSize = parseFloat(
-      getComputedStyle(document.documentElement)?.fontSize || '16'
-    )
-    if (isNaN(rootFontSize) || rootFontSize <= 0) {
-      return Infinity
-    }
-    return window.innerHeight / rootFontSize
-  }
-
   renderChildren() {
-    const { children, variant, overflow } = this.props
-
-    // header should be non-sticky for small viewport height (ca. 320px)
-    if (this.getWindowHeightInRem() <= 20) {
-      return this.renderForSmallViewportHeight()
-    }
-
-    return Children.map(children as ReactElement, (child) => {
-      if (!child) return // ignore null, falsy children
-      return this.cloneChildWithProps(child, variant, overflow)
-    })
-  }
-
-  renderForSmallViewportHeight() {
     const { children, variant, overflow, styles } = this.props
+    const childrenArray = Children.toArray(children)
 
     const headerAndBody: React.ReactNode[] = []
+    const others: React.ReactNode[] = []
 
-    const childrenArray = Children.toArray(children)
-
-    // Separate header and body elements
-    const filteredChildren = childrenArray.filter((child) => {
+    childrenArray.forEach((child) => {
       if (isValidElement(child)) {
         if (child.type === Modal.Header || child.type === Modal.Body) {
-          if (child.type === Modal.Header) {
-            const headerWithProp = safeCloneElement(child, {
-              smallViewPort: true
-            })
-            headerAndBody.push(headerWithProp)
-          } else {
-            headerAndBody.push(child)
-          }
-          return false
+          headerAndBody.push(this.cloneChildWithProps(child, variant, overflow))
+        } else {
+          others.push(this.cloneChildWithProps(child, variant, overflow))
         }
       }
-      return true
     })
 
-    // Adds the <div> to the beginning of the filteredChildren array
-    if (headerAndBody.length > 0) {
-      filteredChildren.unshift(
+    // Putting ModalHeader and ModalBody into the same container, so they can be styled together;
+    // this is needed to apply a media query breakpoint
+    const wrappedHeaderAndBody =
+      headerAndBody.length > 0 ? (
         <div css={styles?.joinedHeaderAndBody}>{headerAndBody}</div>
-      )
-    }
+      ) : null
 
-    return Children.map(filteredChildren as ReactElement[], (child) => {
-      if (!child) return // ignore null, falsy children
-      return this.cloneChildWithProps(child, variant, overflow)
-    })
+    return [...(wrappedHeaderAndBody ? [wrappedHeaderAndBody] : []), ...others]
   }
 
   cloneChildWithProps(

packages/ui-modal/src/Modal/styles.ts

@@ -111,7 +111,15 @@ const generateStyle = (
     },
     joinedHeaderAndBody: {
       borderRadius: componentTheme.borderRadius,
-      overflowY: 'scroll'
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+
+      // ModalHeader and ModalBody is set to scrollable above 20rem height instead of just the ModalBody
+      '@media (max-height: 20rem)': {
+        overflowY: 'auto',
+        maxHeight: '20rem'
+      }
     }
   }
 }