React Components

/**
 * Portal component for rendering children in a different DOM container
 */
class Portal extends React.Component {
  static propTypes: {
    /** Function that returns the container element */
    getContainer: PropTypes.func.isRequired,
    /** Content to render in the portal */
    children: PropTypes.node.isRequired,
    /** Optional callback fired after component updates */
    didUpdate: PropTypes.func
  }
  
  /** Create and get the container on mount */
  componentDidMount(): void;
  
  /** Call didUpdate callback if provided */
  componentDidUpdate(prevProps: object): void;
  
  /** Clean up container on unmount */
  componentWillUnmount(): void;
  
  /** Render children into portal container */
  render(): React.ReactPortal | null;
}

import Portal from 'rc-util/lib/Portal';

// Basic modal portal
function Modal({ children, visible }) {
  if (!visible) return null;
  
  return (
    <Portal getContainer={() => document.body}>
      <div className="modal-overlay">
        <div className="modal-content">
          {children}
        </div>
      </div>
    </Portal>
  );
}

// Portal to specific container
function Tooltip({ children, content }) {
  return (
    <div>
      {children}
      <Portal getContainer={() => document.getElementById('tooltip-root')}>
        <div className="tooltip">{content}</div>
      </Portal>
    </div>
  );
}

// With update callback
<Portal 
  getContainer={() => modalContainer}
  didUpdate={(prevProps) => {
    console.log('Portal updated', prevProps);
  }}
>
  <div>Portal content</div>
</Portal>

/**
 * Get the width of the scrollbar
 * @param {boolean} [fresh] - If true, recalculate instead of using cached value
 * @returns {number} Scrollbar width in pixels
 */
function getScrollBarSize(fresh?: boolean): number;

import getScrollBarSize from 'rc-util/lib/getScrollBarSize';

// Get cached scrollbar size
const scrollbarWidth = getScrollBarSize(); // e.g., 17

// Force recalculation
const freshWidth = getScrollBarSize(true);

// Use in CSS calculations
const modalWidth = `calc(100vw - ${scrollbarWidth}px)`;

/**
 * Improve shake when page scroll bar is hidden by adjusting body styles
 * @param {boolean} [close] - If true, restore original styles and remove effect
 */
function switchScrollingEffect(close?: boolean): void;

import switchScrollingEffect from 'rc-util/lib/switchScrollingEffect';

// Enable scrolling effect (typically when opening modal)
switchScrollingEffect();
// Adds 'ant-scrolling-effect' class to body and adjusts width

// Disable scrolling effect (typically when closing modal)
switchScrollingEffect(true);
// Removes class and restores original styles

/**
 * Generate a mixin for rendering components into containers
 * @param {object} config - Configuration object
 * @returns {object} Mixin object for React components
 */
function getContainerRenderMixin(config: {
  /** Whether to render component into container automatically */
  autoMount?: boolean;
  /** Whether to remove container automatically on unmount */
  autoDestroy?: boolean;
  /** Function to determine if component is visible */
  isVisible?: (instance: object) => boolean;
  /** Function to determine if component should force render */
  isForceRender?: (instance: object) => boolean;
  /** Function to get component to render */
  getComponent?: (instance: object, extra?: any) => React.ReactNode;
  /** Function to get the container element */
  getContainer?: (instance: object) => HTMLElement;
}): object;

class ContainerRender extends React.Component {
  // Legacy component for container rendering
}

class PortalWrapper extends React.Component {
  // Legacy portal wrapper with enhanced features
}