package.src.components.Modal.ModalBox.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of react-core Show documentation

This library provides a set of common React components for use with the PatternFly reference implementation.

The newest version!

import * as React from 'react';
import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
import topSpacer from '@patternfly/react-tokens/dist/esm/c_modal_box_m_align_top_spacer';

export interface ModalBoxProps extends React.HTMLProps {
  /** Id to use for the modal box description. */
  'aria-describedby': string;
  /** Accessible descriptor of the modal. */
  'aria-label'?: string;
  /** Id to use for the modal box label. */
  'aria-labelledby'?: string;
  /** Content rendered inside the modal box. */
  children: React.ReactNode;
  /** Additional classes added to the modal box. */
  className?: string;
  /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */
  position?: 'default' | 'top';
  /** Offset from alternate position. Can be any valid CSS length/percentage. */
  positionOffset?: string;
  /** Variant of the modal. */
  variant?: 'small' | 'medium' | 'large' | 'default';
}

export const ModalBox: React.FunctionComponent = ({
  children,
  className = '',
  variant = 'default',
  position,
  positionOffset,
  'aria-labelledby': ariaLabelledby,
  'aria-label': ariaLabel = '',
  'aria-describedby': ariaDescribedby,
  style,
  ...props
}: ModalBoxProps) => {
  if (positionOffset) {
    style = style || {};
    (style as any)[topSpacer.name] = positionOffset;
  }
  return (
    
      {children}
    
  );
};
ModalBox.displayName = 'ModalBox';