@enact/sandstone/PopupTabLayout/PopupTabLayout.d.ts

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

// Type definitions for sandstone/PopupTabLayout

import { SkinnableProps as sandstone_Skinnable_SkinnableProps } from "@enact/sandstone/Skinnable";
import { TabProps as sandstone_TabLayout_TabProps } from "@enact/sandstone/TabLayout";
import * as React from "react";
import { PanelsProps as sandstone_Panels_PanelsProps } from "@enact/sandstone/Panels";
import { PanelProps as sandstone_Panels_PanelProps } from "@enact/sandstone/Panels";
import { PopupProps as sandstone_Popup_PopupProps } from "@enact/sandstone/Popup";
import { TabLayoutProps as sandstone_TabLayout_TabLayoutProps } from "@enact/sandstone/TabLayout";

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 PopupTabLayoutBaseProps
  extends Merge<
    sandstone_Popup_PopupProps,
    sandstone_TabLayout_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;
  /**
   * The currently selected tab.
   */
  index?: number;
  /**
   * Disables transition animation.
   */
  noAnimation?: boolean;
  /**
   * Called when the tabs are collapsed.
   */
  onCollapse?: Function;
  /**
   * Called when the tabs are expanded.
   */
  onExpand?: Function;
  /**
   * Called after the popup's "hide" transition finishes.
   */
  onHide?: Function;
  /**
   * Called when a tab is selected
   */
  onSelect?: Function;
  /**
   * Called after the popup's "show" transition finishes.
   */
  onShow?: 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;
  /**
   * Controls the visibility of the Popup.
   *
   * By default, the Popup and its contents are not rendered until  `open` .
   */
  open?: boolean;
  /**
 * Scrim type.
 * *  Values:  `'transparent'` ,  `'translucent'` , or  `'none'` .
 * 
 * `'none'`  is not compatible with  `spotlightRestrict`  of  `'self-only'` , use a transparent scrim
to prevent mouse focus when using popup.
 */
  scrimType?: "transparent" | "translucent" | "none";
  /**
   * The container id for   .
   */
  spotlightId?: string;
  /**
 * Restricts or prioritizes navigation when focus attempts to leave the popup.
 * 
 * It can be either  `'none'` ,  `'self-first'` , or  `'self-only'` .
 * 
 * Note: The ready-to-use    component only supports
 `'self-first'`  and  `'self-only'` .
 */
  spotlightRestrict?: "none" | "self-first" | "self-only";
}
/**
 * Tabbed Layout component in a floating Popup.
 */

export class PopupTabLayoutBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, PopupTabLayoutBaseProps>
> {}

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

export interface PopupTabLayoutProps {}
/**
 * An instance of    which restricts the  `TabLayout`  content to
the left side of the screen. The content of  `TabLayout`  can flex vertically, but not horizontally
(fixed width). This is typically used to switch between several collections of managed views
( `TabPanels`  and  `TabPanel` , also exported from this module).
 * 
 * Example:
 * ```
	<PopupTabLayout>
		<Tab title="Tab One">
			<TabPanels>
				<TabPanel>
					<Header title="First Panel" type="compact" />
					<Item>Item 1 in Panel 1</Item>
					<Item>Item 2 in Panel 1</Item>
				</TabPanel>
				<TabPanel>
					<Header title="Second Panel" type="compact" />
					<Item>Item 1 in Panel 2</Item>
					<Item>Item 2 in Panel 2</Item>
				</TabPanel>
			</TabPanels>
		</Tab>
		<Tab title="Tab Two">
			<Item>Goodbye</Item>
		</Tab>
	</PopupTabLayout>
```
 */

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

export interface TabProps extends sandstone_TabLayout_TabProps {}
/**
 * A Tab for use inside this component.
 */

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

export interface TabPanelsBaseProps extends sandstone_Panels_PanelsProps {}
/**
 * A base component for    which has
left key handler to navigate panels.
 */

export class TabPanelsBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, TabPanelsBaseProps>
> {}

export interface TabPanelsProps extends TabPanelsBaseProps {
  /**
 * Omits the close button.
 * 
 * Unlike most components, this prop defaults to  `true` . To show the close button, the prop must
explicitly set it to  `false` :
 * ```
<TabPanels noCloseButton={false} />
```
 */
  noCloseButton?: boolean;
}
/**
 * A customized version of Panels for use inside this component.
 */

export class TabPanels extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, TabPanelsProps>
> {}

export interface TabPanelProps extends sandstone_Panels_PanelProps {}
/**
 * A customized version of Panel for use inside this component.
 */

export class TabPanel extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, TabPanelProps>
> {}

export default PopupTabLayout;