@enact/ui/Spinner/Spinner.d.ts

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

// Type definitions for ui/Spinner

import { ForwardRefProps as ui_ForwardRef_ForwardRefProps } from "@enact/ui/ForwardRef";
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 SpinnerBaseProps {
  /**
 * A theme-supplied component that performs the animation.
 * 
 * Theme authors can use the  `css.running`  class to attach the animation CSS.
This element should accept a  `children`  prop which takes the form of an optional message
for the user.
 * 
 * Unlike most other components, this does  _not_  represent the root rendered element, and
instead refers to the "spinner" part of this component. The presence of  `blockClickOn` 
changes the rendering tree and where this is used.
 */
  component: string | React.ComponentType;
  /**
 * Determines how far the click-blocking should extend.
 * *  `null`  does not block clicking
 * *  'screen' blocks entire screen
 * *  'container' blocks up to the nearest ancestor with absolute or relative positioning
 * 
 * When  `blockClickOn`  is either  `'screen'`  or  `'container'` , a translucent scrim can be added
by setting    prop to  `true` .
 */
  blockClickOn?: string | any;
  /**
   * Centers the spinner horizontally and vertically relative to its containing component.
   */
  centered?: boolean;
  /**
 * Called with a reference to the root component.
 * 
 * When using   , the  `ref`  prop is forwarded to this component
as  `componentRef` .
 */
  componentRef?: object | Function;
  /**
 * 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:
 * *  `spinner`  - The root  `component`  class
 * *  `spinnerContainer`  - Added as a parent in the case of `blockOnClick="container"
 * *  `blockClickOn`  - Applied if interaction should be blocked
 * *  `centered`  - Applied if the  `centered`  prop is present
 * *  `running`  - Always applied to  `component` . Attach animation name property to this class.
 * *  `scrim`  - The blocking layer behind the Spinner
 */
  css?: object;
  /**
   * Halts the animation of the spinner
   */
  paused?: boolean;
  /**
 * Sets a scrim behind the spinner with the  `css.scrim`  class applied.
 * 
 * Only has an effect when  `blockClickOn`  is  `'screen'`  or  `'container'`  and has no effect
by default or when blockClickOn is  `null` .
 */
  scrim?: boolean;
}
/**
 * A minimally styled component that controls  `Spinner`  positioning and interaction states, without
   applied.
 */

export class SpinnerBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, SpinnerBaseProps>
> {}

export interface SpinnerDecoratorProps extends ui_ForwardRef_ForwardRefProps {}
export function SpinnerDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & SpinnerDecoratorProps>;

export interface SpinnerProps
  extends Omit<
    Merge<SpinnerBaseProps, SpinnerDecoratorProps>,
    "componentRef"
  > {}
/**
 * A minimally styled component that controls  `Spinner`  positioning and interaction states.
 */

export class Spinner extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, SpinnerProps>
> {}

export default Spinner;