@enact/limestone 1.3.0

package/TabLayout/TabLayout.d.ts

@@ -0,0 +1,161 @@
+// Type definitions for limestone/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 {
+  /**
+   * Prevents the tab list from automatically collapsing when the screen orientation changes to portrait mode.
+   *
+   * Only applies to `orientation="vertical".
+   */
+  blockCollapseOnPortrait?: boolean;
+  /**
+   * 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;
+  /**
+ * The offset of the tabs area from the left and right edges of the screen.
+This option is only applicable when  `orientation`  is set to  `horizontal` .
+The default value set to  `36`  to have the right position of the tabs in the normal panel.
+If the tabs are supposed to scroll, this value should be set to  `132`  and the panel should have no padding.
+ */
+  offset?: 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";
+  /**
+ * The index of the primary tab.
+When this prop is set, the initial focus will be on the primary tab when rendered.
+Also, when pressing the back key from other tabs, the focus will be moved to the primary tab.
+If the  `primaryIndex`  is not provided, the initial focus will default to the first tab during the initial render.
+ */
+  primaryIndex?: number;
+  /**
+   * The size of the horizontal tab.
+   */
+  size?: "small" | "large";
+  /**
+ * 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;