Skip to content
Permalink
Browse files
feat(overlay): created and exported the default timeout and classnames
  • Loading branch information
mlaursen committed Aug 20, 2020
1 parent 32bacc9 commit 48cd9d584342d2050ce154755ca7927cd9f90a72
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 11 deletions.
@@ -1,16 +1,19 @@
/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
import React, { forwardRef, HTMLAttributes } from "react";
import cn from "classnames";
import CSSTransition, {
CSSTransitionClassNames,
} from "react-transition-group/CSSTransition";
import CSSTransition from "react-transition-group/CSSTransition";
import {
ConditionalPortal,
RenderConditionalPortalProps,
} from "@react-md/portal";
import { OverridableCSSTransitionProps } from "@react-md/transition";
import { bem } from "@react-md/utils";

import {
DEFAULT_OVERLAY_TIMEOUT,
DEFAULT_OVERLAY_CLASSNAMES,
} from "./constants";

export interface OverlayProps
extends OverridableCSSTransitionProps,
RenderConditionalPortalProps,
@@ -46,12 +49,6 @@ export interface OverlayProps

const block = bem("rmd-overlay");

const DEFAULT_OVERLAY_CLASSNAMES: CSSTransitionClassNames = {
appearActive: "rmd-overlay--active",
enterActive: "rmd-overlay--active",
enterDone: "rmd-overlay--active",
};

/**
* The `Overlay` component is a simple component used to render a full page
* overlay in the page with an enter and exit animation. If there are overflow
@@ -64,7 +61,8 @@ const Overlay = forwardRef<HTMLDivElement, OverlayProps>(function Overlay(
visible,
hidden = false,
clickable = true,
timeout = 150,
timeout = DEFAULT_OVERLAY_TIMEOUT,
classNames = DEFAULT_OVERLAY_CLASSNAMES,
children,
mountOnEnter = true,
unmountOnExit = true,
@@ -78,7 +76,6 @@ const Overlay = forwardRef<HTMLDivElement, OverlayProps>(function Overlay(
portal,
portalInto,
portalIntoId,
classNames = DEFAULT_OVERLAY_CLASSNAMES,
tabIndex = -1,
...props
},
@@ -0,0 +1,9 @@
import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
import { TransitionTimeout } from "@react-md/transition";

export const DEFAULT_OVERLAY_TIMEOUT: TransitionTimeout = 150;
export const DEFAULT_OVERLAY_CLASSNAMES: CSSTransitionClassNames = {
appearActive: "rmd-overlay--active",
enterActive: "rmd-overlay--active",
enterDone: "rmd-overlay--active",
};
@@ -1,2 +1,4 @@
export { default as Overlay } from "./Overlay";
export * from "./Overlay";

export * from "./constants";

0 comments on commit 48cd9d5

Please sign in to comment.