@enact/sandstone/FlexiblePopupPanels/index.d.ts

Large-screen/TV support library for Enact, containing a variety of UI components.

// Type definitions for sandstone/FlexiblePopupPanels

import { HeaderProps as sandstone_Panels_HeaderProps } from "@enact/sandstone/Panels";
import { PanelProps as sandstone_Panels_PanelProps } from "@enact/sandstone/Panels";
import * as React from "react";

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 FlexiblePopupPanelsProps {
  /**
 * Specifies when and how to show  `nextButton`  on  `FlexiblePopupPanels.Panel` .
 * *  `'auto'`  will display the  `nextButton`  if more than one  `FlexiblePopupPanels.Panel`  exists
 * *  `'always'`  will always display the  `nextButton`
 * *  `'never'`  will always hide the  `nextButton`
 * 
 * Note, children values will override the generalized parent visibility settings. In this
case, a customized  `nextButton`  on  `FlexiblePopupPanels.Panel`  will take precedence over the
 `nextButtonVisibility`  value.
 */
  nextButtonVisibility?: "auto" | "always" | "never";
  /**
   * Called when the index value is changed.
   */
  onChange?: Function;
  /**
   * Called when the next button is clicked in  `FlexiblePopupPanels.Panel` .
   *
   * Calling  `preventDefault`  on the passed event will prevent advancing to the next panel.
   */
  onNextClick?: Function;
  /**
   * Called when the previous button is clicked in  `FlexiblePopupPanels.Panel` .
   *
   * Calling  `preventDefault`  on the passed event will prevent navigation to the previous panel.
   */
  onPrevClick?: Function;
  /**
 * Specifies when and how to show  `prevButton`  on  `FlexiblePopupPanels.Panel` .
 * *  `'auto'`  will display the  `prevButton`  if more than one  `FlexiblePopupPanels.Panel`  exists
 * *  `'always'`  will always display the  `prevButton`
 * *  `'never'`  will always hide the  `prevButton`
 * 
 * Note, children values will override the generalized parent visibility settings. In this case,
if user provides a customized  `prevButton`  on  `FlexiblePopupPanels.Panel`  will take precedence over the  `prevButtonVisibility`  value.
 */
  prevButtonVisibility?: "auto" | "always" | "never";
}
/**
 * An instance of    which restricts the  `Panel`  to the left
or right side of the screen inside a popup. This panel flexes both horizontally and vertically,
with the Header positioned outside the Panel background area. This is typically used for a single
setting or control at a time, for maximum background area viewing.
 */

export class FlexiblePopupPanels extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, FlexiblePopupPanelsProps>
> {
  /**
   * A shortcut to access
   */
  Panel: Panel;

  /**
   * A shortcut to access
   */
  Header: Header;
}

export interface HeaderProps extends sandstone_Panels_HeaderProps {
  /**
   * Hint string read when focusing the application close button.
   */
  closeButtonAriaLabel?: string;
  /**
   * Background opacity of the application close button.
   */
  closeButtonBackgroundOpacity?: "opaque" | "transparent";
  /**
   * Omits the close button.
   */
  noCloseButton?: boolean;
  /**
   * Called when the app close button is clicked.
   */
  onClose?: Function;
}
/**
 * A header component for  `FlexiblePopupPanels.Panel`  with a  `title`  and  `subtitle` , supporting several configurable
   for components.
 */

export class Header extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, HeaderProps>
> {}

export interface PanelProps extends sandstone_Panels_PanelProps {
  /**
 * The button to use in place of the standard next button.
 * 
 * This prop accepts a component (e.g.  `Button` ), a component instance or a boolean value.
 * 
 * If  `false` , the button will not show. If set to a component, or  `true` , the button will
show. This will override the setting of
  .
 * 
 * Example:
 * ```
nextButton={<Button icon="closex" aria-label="Quit">Close</Button>}
```
 */
  nextButton?: boolean | React.ComponentType;
  /**
 * The button to use in place of the standard prev button.
 * 
 * This prop accepts a component (e.g.  `Button` ), a component instance or a boolean value.
 * 
 * If  `false` , the button will not show. If set to a component, or  `true` , the button will
show. This will override the setting of
  .
 * 
 * Example:
 * ```
prevButton={<Button icon="closex" aria-label="Back">Back</Button>}
```
 */
  prevButton?: boolean | React.ComponentType;
  /**
 * Sets a pre-determined width on this panel.
 * 
 * The 'auto' value will attempt to adjust the panel size to the content size.
Note: the  `title`  may not match in width.
 */
  size?: "auto" | "small" | "large";
}
/**
 * The standard view container used inside a    view
manager instance.
 */

export class Panel extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, PanelProps>
> {}

export default FlexiblePopupPanels;