{"size": 3345, "ext": "js", "max_stars_repo_path": "packages/Takeover/src/Takeover.js", "max_stars_repo_name": "michelle714/paprika", "max_stars_repo_stars_event_min_datetime": "2019-04-30T00:48:35.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-26T09:50:07.000Z", "max_issues_repo_path": "packages/Takeover/src/Takeover.js", "max_issues_repo_name": "michelle714/paprika", "max_issues_repo_issues_event_min_datetime": "2019-04-30T19:57:02.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-28T23:03:20.000Z", "max_forks_repo_path": "packages/Takeover/src/Takeover.js", "max_forks_repo_name": "michelle714/paprika", "max_forks_repo_forks_event_min_datetime": "2020-01-08T05:17:15.000Z", "max_forks_repo_forks_event_max_datetime": "2022-01-17T19:07:52.000Z"}
{"max_stars_count": 37, "max_issues_count": 700, "max_forks_count": 6, "avg_line_length": 27.4180327869, "max_line_length": 134, "alphanum_fraction": 0.6585949178}
import React from "react";
import PropTypes from "prop-types";
import { zValue } from "@paprika/stylers/lib/helpers";
import { extractChildren } from "@paprika/helpers";
import OriginalOverlay from "@paprika/overlay";
import Overlay from "./components/Overlay";
import FocusLock from "./components/FocusLock";
import Header from "./components/Header/Header";
import Content from "./components/Content/Content";
import * as sc from "./Takeover.styles";

const propTypes = {
  /* Description of the Takeover dialog for assistive technology */
  a11yText: PropTypes.string,

  /** The content for the Takeover */
  children: PropTypes.node.isRequired,

  /** Control the visibility of the Takeover */
  isOpen: PropTypes.bool.isRequired,

  /** Callback once the Takeover has been closed event */
  onAfterClose: PropTypes.func,

  /** Callback once the Takeover has been opened event */
  onAfterOpen: PropTypes.func,

  /** Callback triggered when the takeover needs to be close */
  onClose: PropTypes.func,

  /** The z-index of the Takeover content */
  zIndex: PropTypes.number,
};

const defaultProps = {
  a11yText: null,
  onClose: () => {},
  onAfterClose: () => {},
  onAfterOpen: () => {},
  zIndex: zValue(5),
};

export default function Takeover(props) {
  const { a11yText, isOpen, onClose, onAfterClose, onAfterOpen, zIndex, ...moreProps } = props;

  const {
    "Takeover.Content": contentExtracted,
    "Takeover.FocusLock": focusLockExtracted,
    "Takeover.Header": headerExtracted,
    "Takeover.Overlay": overlayExtracted,
    children,
  } = extractChildren(moreProps.children, [
    "Takeover.Content",
    "Takeover.FocusLock",
    "Takeover.Header",
    "Takeover.Overlay",
  ]);

  const focusLockProps = focusLockExtracted ? focusLockExtracted.props : {};
  const focusLockOptions = {
    as: sc.FocusLock,
    ...(focusLockProps || {}),
  };

  const overlayProps = {
    "data-pka-anchor": "takeover.overlay",
    hasBackdrop: false,
    focusLockOptions,
    ...(overlayExtracted && overlayExtracted.props),
    isOpen,
    onAfterClose,
    onAfterOpen,
    onClose,
    zIndex,
  };

  function getAriaLabel() {
    if (a11yText) return a11yText;
    if (!headerExtracted || typeof headerExtracted.props.children !== "string") {
      console.error(
        "Accessibility is important 😇\nThe Takeover requires either an a11yText prop or a Takeover.Header with a string for children."
      );
      return null;
    }

    return headerExtracted.props.children;
  }

  return (
    <OriginalOverlay {...overlayProps}>
      {state => (
        <sc.Takeover
          state={state}
          {...moreProps}
          aria-label={getAriaLabel()}
          aria-modal
          data-pka-anchor="takeover"
          role="dialog"
          zIndex={zIndex}
        >
          {headerExtracted && <sc.Header {...headerExtracted.props} onClose={onClose} />}
          {contentExtracted && (
            <sc.Content role="region" tabIndex="0">
              {contentExtracted}
            </sc.Content>
          )}
          {children}
        </sc.Takeover>
      )}
    </OriginalOverlay>
  );
}

Takeover.displayName = "Takeover";
Takeover.propTypes = propTypes;
Takeover.defaultProps = defaultProps;

Takeover.Header = Header;
Takeover.Content = Content;
Takeover.FocusLock = FocusLock;
Takeover.Overlay = Overlay;
