import React, { Component } from 'react' import '../../_internals/closest' import { componentSizes, pxToInteger } from '../../_utils/branding' export type MainContentProps = Readonly<{ readonly children: React.ReactNode readonly topBarSelector?: string // document query selector readonly topBarHeight?: string // ex: "24px" - for CSS only readonly tag?: string // Allow
related attribute to be set. readonly onSubmit?: (e: React.FormEvent) => void readonly noValidate?: string readonly method?: string }> export class MainContent extends Component { mainContentRef = React.createRef() resizeTimeout: NodeJS.Timeout = null setContentHeight: (element?: HTMLElement) => void = (element = this.mainContentRef.current) => { const contentElement = element if (!contentElement) { return null } const topBar: HTMLElement = document.querySelector(this.props.topBarSelector) let minus = 0 if (this.mainContentRef.current.closest('.kirk-modal--hasCloseButton')) { minus = pxToInteger(componentSizes.modalTopPadding) } else if (topBar) { minus = topBar.offsetHeight } const height = Math.floor(window.innerHeight - minus) contentElement.style.minHeight = `${height}px` contentElement.style.height = 'auto' if (contentElement.parentElement) { this.setContentHeight(contentElement.parentElement) } return null } onWindowResize: () => void = () => { clearTimeout(this.resizeTimeout) this.resizeTimeout = setTimeout(this.setContentHeight, 100) } componentDidMount(): void { if (window) { this.setContentHeight() window.addEventListener('resize', this.onWindowResize) } } componentWillUnmount(): void { if (window) { window.removeEventListener('resize', this.onWindowResize) } } render(): JSX.Element { const { children, tag = 'div', topBarSelector, topBarHeight, ...props } = this.props return React.createElement( tag, { ref: this.mainContentRef, className: 'page-wrapper', ...props, }, children, ) } }