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

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

// Type definitions for sandstone/WizardPanels

import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
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 WizardPanelsProps
  extends Merge<WizardPanelsBaseProps, ui_Changeable_ChangeableProps> {
  /**
 * Called when the back button is pressed.
 * 
 * If  `ev.preventDefault`  is called,  `WizardPanels`  will not process the event further. If it is
not called, the index of the panel will be decremented unless  `noPrevButton`  is set.
 */
  onBack?: Function;
}
/**
 * A WizardPanels that can step through different panels.
Expects    as children.
 */

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

export interface WizardPanelsBaseProps {
  /**
 * The "aria-label" for the Panel.
 * 
 * By default, the panel will be labeled by its   .
When  `aria-label`  is set, it will be used instead to provide an accessibility label for
the panel.
 */
  "aria-label"?: string;
  /**
   * Obtains a reference to the root node.
   */
  componentRef?: Function | object;
  /**
 * The current step.
 * 
 * This is 1-based, not 0-based; as in the first step is  `1` . If omitted, this will equal
the currently selected panel.
 */
  current?: number;
  /**
   * Components to be included under the primary content.
   *
   * Typically, up to 2 buttons may be included.
   */
  footer?: JSX.Element | JSX.Element[];
  /**
 * Specifies when and how to show  `nextButton`  on WizardPanel.
 * *  `'auto'`  will display the  `nextButton`  on every  `WizardPanels.Panel`  except the last
 * *  `'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 WizardPanels.Panel will take precedence over the
 `nextButtonVisibility`  value.
 */
  nextButtonVisibility?: "auto" | "always" | "never";
  /**
   * Disables panel transitions.
   */
  noAnimation?: boolean;
  /**
   * Omits the steps component.
   */
  noSteps?: boolean;
  /**
   * Omits the subtitle area.
   */
  noSubtitle?: boolean;
  /**
   * Called when the index value is changed.
   */
  onChange?: Function;
  /**
   * Called when the next button is clicked in WizardPanel.
   *
   * Calling  `preventDefault`  on the passed event will prevent advancing to the next panel.
   */
  onNextClick?: Function;
  /**
   * Called when previous button is clicked in WizardPanel.
   *
   * Calling  `preventDefault`  on the passed event will prevent navigation to the previous panel.
   */
  onPrevClick?: Function;
  /**
   * Called when a transition completes.
   */
  onTransition?: Function;
  /**
   * Called before a transition begins.
   */
  onWillTransition?: Function;
  /**
 * Specifies when and how to show  `prevButton`  on WizardPanel.
 * *  `'auto'`  will display the  `prevButton`  on every  `WizardPanels.Panel`  except the first
 * *  `'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 WizardPanels.Panel will take precedence over the  `prevButtonVisibility`  value.
 */
  prevButtonVisibility?: "auto" | "always" | "never";
  /**
   * The subtitle to display.
   *
   * If    is  `true` , this prop is ignored.
   */
  subtitle?: string;
  /**
   * The title to display.
   */
  title?: string;
  /**
   * The total number of steps.
   *
   * If omitted, this will equal the total number of Panels.
   */
  total?: number;
}
/**
 * A WizardPanels that has steps with corresponding panels.
 */

export class WizardPanelsBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, WizardPanelsBaseProps>
> {}

export interface 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;
}
/**
 * Panel that sets the children, footer, subtitle, and title for
  .
 */

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

export default WizardPanels;