162 lines
		
	
	
		
			4.4 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
			
		
		
	
	
			162 lines
		
	
	
		
			4.4 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
import css from 'dom-helpers/style';
 | 
						|
import ownerDocument from 'dom-helpers/ownerDocument';
 | 
						|
import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
 | 
						|
import isOverflowing from './isOverflowing';
 | 
						|
import { ariaHidden, hideSiblings, showSiblings } from './manageAriaHidden';
 | 
						|
 | 
						|
function findIndexOf(data, callback) {
 | 
						|
  let idx = -1;
 | 
						|
  data.some((item, index) => {
 | 
						|
    if (callback(item)) {
 | 
						|
      idx = index;
 | 
						|
      return true;
 | 
						|
    }
 | 
						|
    return false;
 | 
						|
  });
 | 
						|
  return idx;
 | 
						|
}
 | 
						|
 | 
						|
function findContainer(data, modal) {
 | 
						|
  return findIndexOf(data, item => item.modals.indexOf(modal) !== -1);
 | 
						|
}
 | 
						|
 | 
						|
function getPaddingRight(node) {
 | 
						|
  return parseInt(css(node, 'paddingRight') || 0, 10);
 | 
						|
}
 | 
						|
 | 
						|
function setContainerStyle(data, container) {
 | 
						|
  const style = { overflow: 'hidden' };
 | 
						|
 | 
						|
  // We are only interested in the actual `style` here because we will override it.
 | 
						|
  data.style = {
 | 
						|
    overflow: container.style.overflow,
 | 
						|
    paddingRight: container.style.paddingRight,
 | 
						|
  };
 | 
						|
 | 
						|
  if (data.overflowing) {
 | 
						|
    const scrollbarSize = getScrollbarSize();
 | 
						|
 | 
						|
    // Use computed style, here to get the real padding to add our scrollbar width.
 | 
						|
    style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`;
 | 
						|
 | 
						|
    // .mui-fixed is a global helper.
 | 
						|
    const fixedNodes = ownerDocument(container).querySelectorAll('.mui-fixed');
 | 
						|
    for (let i = 0; i < fixedNodes.length; i += 1) {
 | 
						|
      const paddingRight = getPaddingRight(fixedNodes[i]);
 | 
						|
      data.prevPaddings.push(paddingRight);
 | 
						|
      fixedNodes[i].style.paddingRight = `${paddingRight + scrollbarSize}px`;
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  Object.keys(style).forEach(key => {
 | 
						|
    container.style[key] = style[key];
 | 
						|
  });
 | 
						|
}
 | 
						|
 | 
						|
function removeContainerStyle(data, container) {
 | 
						|
  Object.keys(data.style).forEach(key => {
 | 
						|
    container.style[key] = data.style[key];
 | 
						|
  });
 | 
						|
 | 
						|
  const fixedNodes = ownerDocument(container).querySelectorAll('.mui-fixed');
 | 
						|
  for (let i = 0; i < fixedNodes.length; i += 1) {
 | 
						|
    fixedNodes[i].style.paddingRight = `${data.prevPaddings[i]}px`;
 | 
						|
  }
 | 
						|
}
 | 
						|
/**
 | 
						|
 * @ignore - do not document.
 | 
						|
 *
 | 
						|
 * Proper state managment for containers and the modals in those containers.
 | 
						|
 * Simplified, but inspired by react-overlay's ModalManager class
 | 
						|
 * Used by the Modal to ensure proper styling of containers.
 | 
						|
 */
 | 
						|
class ModalManager {
 | 
						|
  constructor({ hideSiblingNodes = true, handleContainerOverflow = true } = {}) {
 | 
						|
    this.hideSiblingNodes = hideSiblingNodes;
 | 
						|
    this.handleContainerOverflow = handleContainerOverflow;
 | 
						|
    // this.modals[modalIdx] = modal
 | 
						|
    this.modals = [];
 | 
						|
    // this.containers[containerIdx] = container
 | 
						|
    this.containers = [];
 | 
						|
    // this.data[containerIdx] = {
 | 
						|
    //   modals: [],
 | 
						|
    // }
 | 
						|
    this.data = [];
 | 
						|
  }
 | 
						|
 | 
						|
  add = (modal, container) => {
 | 
						|
    let modalIdx = this.modals.indexOf(modal);
 | 
						|
    const containerIdx = this.containers.indexOf(container);
 | 
						|
 | 
						|
    if (modalIdx !== -1) {
 | 
						|
      return modalIdx;
 | 
						|
    }
 | 
						|
 | 
						|
    modalIdx = this.modals.length;
 | 
						|
    this.modals.push(modal);
 | 
						|
 | 
						|
    if (this.hideSiblingNodes) {
 | 
						|
      hideSiblings(container, modal.mountNode);
 | 
						|
    }
 | 
						|
 | 
						|
    if (containerIdx !== -1) {
 | 
						|
      this.data[containerIdx].modals.push(modal);
 | 
						|
      return modalIdx;
 | 
						|
    }
 | 
						|
 | 
						|
    const data = {
 | 
						|
      modals: [modal],
 | 
						|
      overflowing: isOverflowing(container),
 | 
						|
      prevPaddings: [],
 | 
						|
    };
 | 
						|
 | 
						|
    if (this.handleContainerOverflow) {
 | 
						|
      setContainerStyle(data, container);
 | 
						|
    }
 | 
						|
 | 
						|
    this.containers.push(container);
 | 
						|
    this.data.push(data);
 | 
						|
 | 
						|
    return modalIdx;
 | 
						|
  };
 | 
						|
 | 
						|
  remove = modal => {
 | 
						|
    const modalIdx = this.modals.indexOf(modal);
 | 
						|
 | 
						|
    if (modalIdx === -1) {
 | 
						|
      return modalIdx;
 | 
						|
    }
 | 
						|
 | 
						|
    const containerIdx = findContainer(this.data, modal);
 | 
						|
    const data = this.data[containerIdx];
 | 
						|
    const container = this.containers[containerIdx];
 | 
						|
 | 
						|
    data.modals.splice(data.modals.indexOf(modal), 1);
 | 
						|
    this.modals.splice(modalIdx, 1);
 | 
						|
 | 
						|
    // If that was the last modal in a container, clean up the container.
 | 
						|
    if (data.modals.length === 0) {
 | 
						|
      if (this.handleContainerOverflow) {
 | 
						|
        removeContainerStyle(data, container);
 | 
						|
      }
 | 
						|
 | 
						|
      if (this.hideSiblingNodes) {
 | 
						|
        showSiblings(container, modal.mountNode);
 | 
						|
      }
 | 
						|
      this.containers.splice(containerIdx, 1);
 | 
						|
      this.data.splice(containerIdx, 1);
 | 
						|
    } else if (this.hideSiblingNodes) {
 | 
						|
      // Otherwise make sure the next top modal is visible to a SR.
 | 
						|
      ariaHidden(false, data.modals[data.modals.length - 1].mountNode);
 | 
						|
    }
 | 
						|
 | 
						|
    return modalIdx;
 | 
						|
  };
 | 
						|
 | 
						|
  isTopModal = modal => {
 | 
						|
    return !!this.modals.length && this.modals[this.modals.length - 1] === modal;
 | 
						|
  };
 | 
						|
}
 | 
						|
 | 
						|
export default ModalManager;
 |