@enact/sandstone/Steps/Steps.d.ts

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

// Type definitions for sandstone/Steps

import { SkinnableProps as sandstone_Skinnable_SkinnableProps } from "@enact/sandstone/Skinnable";
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 StepsBaseProps {
  /**
 * Customizes the component by mapping the supplied collection of CSS class names to the
corresponding internal elements and states of this component.
 * 
 * The following classes are supported:
 * *  `steps`  - The root class name
 * *  `step`  - Applied to each individual step
 * *  `numbers`  - Applied on the steps designated as "numbers" special case (See:  `Icon`  related props below)
 * *  `past`  - Applied to the steps preceding the current step
 * *  `current`  - Applied to the current step
 * *  `future`  - Applied to the steps following the current step
 * 
 * When providing a custom  `iconComponent`  it will receive the classes:
'step' (always), 'numbers' (conditionally, based on the "numbers" value), and one of the
following three, based on the  `current`  step: 'past', 'current', and 'future'.
 */
  css?: object;
  /**
   * Indicate the current step.
   *
   * This is 1-based, not 0-based; as in the first step is  `1` .
   */
  current?: number;
  /**
 * The icon to use for indicating the current step.
 * 
 * This accepts any icon supported by   , in addition to a special
value: "numbers", which instead of a standard icon, shows the number of the step.
 */
  currentIcon?: string;
  /**
 * The icon to use for indicating all steps following the current step.
 * 
 * This accepts any icon supported by   , in addition to a special
value: "numbers", which instead of a standard icon, shows the number of the step.
 */
  futureIcon?: string;
  /**
 * Defines how to represent the current step.
 * 
 * When  `true` , highlight effect will be applied only to the current icon.
When  `false` , highlight effect will be applied to past and current icons.
 */
  highlightCurrentOnly?: boolean;
  /**
 * Defines a custom element to use as the icon component.
 * 
 * Use the  `css`  prop and public class name override system to target the classes applied to
this component. This component will be repeated  `total`  number of times and will also
receive the  `children`  and  `size`  props.
 */
  iconComponent?: React.ComponentType;
  /**
 * The icon to use for indicating all steps preceding the current step.
 * 
 * This accepts any icon supported by   , in addition to a special
value: "numbers", which instead of a standard icon, shows the number of the step.
 */
  pastIcon?: string;
  /**
   * The size of the step icons.
   *
   * This accepts any  `size`  supported by   .
   */
  size?: "large" | "medium" | "small" | "tiny" | number;
  /**
   * Indicate which steps to skip.
   *
   * A number or array of step numbers is acceptable.
   */
  skip?: number | number[];
  /**
 * The icon to use for any skipped steps, past or future.
 * 
 * This accepts any icon supported by   .
 * 
 * The current step will always show the  `currentIcon`  regardless of whether it has been
skipped. It's the developer's responsibility to not set  `current`  to a skipped step.
 */
  skipIcon?: string;
  /**
   * Indicate the total number of steps.
   */
  total?: number;
}
/**
 * Renders a sandstone-styled steps component only basic behavior.
 */

export class StepsBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, StepsBaseProps>
> {}

export interface StepsDecoratorProps
  extends sandstone_Skinnable_SkinnableProps {}
export function StepsDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & StepsDecoratorProps>;

export interface StepsProps
  extends Merge<StepsBaseProps, StepsDecoratorProps> {}
/**
 * A full-featured Sandstone-styled step component.
 */

export class Steps extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, StepsProps>
> {}

export default Steps;