@enact/sandstone/TabLayout/TabLayout.d.ts

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

// Type definitions for sandstone/TabLayout

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 TabProps {
  /**
   * Title of the tab.
   */
  title: string;
  /**
   * The contents to show when the tab is selected.
   */
  children?: React.ReactNode;
  /**
   * The icon content of the tab.
   */
  icon?: string | object;
  /**
   * Called when a tab is clicked.
   */
  onTabClick?: Function;
  /**
 * Configuration props for a    icon.
 * 
 * All props on    are supported here. By default,
 `stopped`  will be set to  `false`  when the tab is focused and  `true`  otherwise. To
override, pass  `stopped`  in this object.
 */
  sprite?: object;
  /**
 * Key for the tab.
 * 
 * Note:  `TabLayout`  automatically generates a key based on the title and icon combination.
If this combination is not unique for all items,  `tabKey`  must be specified to make each
tab have a unique (and persistent) key.
 */
  tabKey: string | number;
}
/**
 * An item for the TabLayout.
 *
 * Configures the tab title and icon.
 */

export class Tab extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, TabProps>
> {}

export interface TabLayoutProps {
  /**
   * Collection of    to render.
   */
  children?: React.ReactNode;
  /**
 * Collapses the vertical tab list into icons only.
 * 
 * Only applies to  `orientation="vertical"` .  If the tabs do not include icons, a single
collapsed icon will be shown.
 */
  collapsed?: boolean;
  /**
 * 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:
 */
  css?: object;
  /**
   * The currently selected tab.
   */
  index?: number;
  /**
   * Called when the tabs are collapsed.
   */
  onCollapse?: Function;
  /**
   * Called when the tabs are expanded.
   */
  onExpand?: Function;
  /**
   * Called when a tab is selected
   */
  onSelect?: Function;
  /**
   * Called when the tab collapse or expand animation completes.
   *
   * Event payload includes:
   * *  `type`  - Always set to "onTabAnimationEnd"
   * *  `collapsed`  -  `true`  when the tabs are collapsed
   */
  onTabAnimationEnd?: Function;
  /**
   * Orientation of the tabs.
   */
  orientation?: "horizontal" | "vertical";
  /**
 * Assign a custom size to horizontal tabs.
 * 
 * Tabs in the horizontal orientation automatically stretch to fill the available width.
Leave this prop blank to use the default auto-sizing behavior.
Tabs may also be set to a finite width using this property. This accepts numeric pixel
values. Be mindful of the value you provide as values that are too wide will run off the
edge of the screen.
 * 
 * Only applies to  `orientation="horizontal"`  at this time.
 */
  tabSize?: number;
}
/**
 * Tabbed Layout component.
 * 
 * Example:
 * ```
	<TabLayout>
		<Tab title="Tab One">
			<Item>Hello</Item>
		</Tab>
		<Tab title="Tab Two">
			<Item>Goodbye</Item>
		</Tab>
	</TabLayout>
```
 */

export class TabLayout extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, TabLayoutProps>
> {
  /**
   * A shortcut to access
   */
  Tab: Tab;
}

export default TabLayout;