@enact/ui/FloatingLayer/index.d.ts

A collection of simplified unstyled cross-platform UI components for Enact

// Type definitions for ui/FloatingLayer

import * as React from "react";
import { CancelableProps as ui_Cancelable_CancelableProps } from "@enact/ui/Cancelable";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

export interface FloatingLayerDecoratorConfig extends Object {
  /**
   * Element Id of the floatLayer
   */
  floatLayerId?: string;
  /**
 * Class name to be applied to wrapped component.
 * 
 * It can be used when you want to only apply
certain styles to the wrapped component and not to the float layer.
 */
  wrappedClassName?: string;
}
export interface FloatingLayerDecoratorProps {}
export function FloatingLayerDecorator<P>(
  config: FloatingLayerDecoratorConfig,
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & FloatingLayerDecoratorProps>;

export function FloatingLayerDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & FloatingLayerDecoratorProps>;

export interface FloatingLayerBaseProps {
  /**
   * CSS classes for FloatingLayer.
   */
  floatLayerClassName?: string;
  /**
   * Element id for floating layer.
   */
  floatLayerId?: string;
  /**
 * Prevents FloatingLayer from hiding when the user presses cancel/back (e.g.  `ESC` ) key or
clicks outside the floating layer.
 */
  noAutoDismiss?: boolean;
  /**
   * Called when floating layer is closed.
   */
  onClose?: Function;
  /**
 * Called when a closing action is invoked.
 * 
 * These actions may include pressing cancel/back (e.g.  `ESC` ) key or programmatically closing
by  `FloatingLayerDecorator` . When cancel key is pressed, the function will only invoke if
 `noAutoDismiss`  is set to  `false` .
 * 
 * When pressing  `ESC`  key, event payload carries  `detail`  property containing  `inputType` 
value of  `'key'` .
When clicking outside the boundary of the popup, event payload carries  `detail`  property
containing  `inputType`  value of  `'click'` .
 */
  onDismiss?: Function;
  /**
   * Called when floating layer is opened. It will only be invoked for the first render.
   */
  onOpen?: Function;
  /**
   * Renders the floating layer and its components.
   */
  open?: boolean;
  /**
   * The scrim type that overlays FloatingLayer.
   *
   * It can be either  `'transparent'` ,  `'translucent'` , or  `'none'` .
   */
  scrimType?: string;
}
/**
 * A component that creates an entry point to the new render tree.
 *
 * This is used for modal components such as popups.
 */

export class FloatingLayerBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, FloatingLayerBaseProps>
> {}

export interface FloatingLayerProps
  extends Merge<FloatingLayerBaseProps, ui_Cancelable_CancelableProps> {}
/**
 * FloatingLayer that mixes    to handle FloatingLayer dismissal.
 *
 * This is used for modal components such as popups.
 */

export class FloatingLayer extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, FloatingLayerProps>
> {}

export default FloatingLayer;