import React from "react"; export interface BaseTabUIProps { variant?: "underline" | "buttons"; /** * 表示されるスクリーンとタブの見出しを指定します。 * * 非同期でスクリーンの数は増減するような、このpropが後から変更されるケースは想定していません。 * もしそういったケースが発生したら、Issueを立ててください。 * * @default [] */ tabs?: { title: React.ReactNode; screen: React.ReactNode; icon?: React.ReactNode; data?: T; }[]; /** * Tabの描画に利用するコンポーネントを指定します。 * 基本的にスタイルの指定は行わないでください。 */ renderTab?: (props: T & { children: React.ReactNode; }) => React.ReactElement | null; /** * タブをどのような位置に表示するかを指定します。 * @default "start" */ tabPosition?: "start" | "center" | "end" | "evenly"; /** * タブの下に付く装飾を指定します。 * @default "default" */ underline?: "default" | "shadow"; /** * 最初に表示するタブのインデックスを指定します。 * * インデックスはtabs propに指定された配列のうち、現在表示されているスクリーンのインデックスです。 * @default 0 */ defaultIndex?: number; /** * タブがクリックされるなどしてインデックスが更新された際に発火するメソッドを指定します。 * * 例えば、これが返すインデックスをローカルストレージなどに保存しておいて、 * defaultIndexに渡すような実装をしておくとルーターライブラリを使わず、 * 再読み込み時に前回表示していたタブを表示することができます。 * * ただしURLのシェアなどで他のユーザーと同じタブを見るといったことはルーターライブラリを使う必要があります。詳しい実装はサンプルとなるStoryが用意されているので見てください。 */ onChange?: (index: number) => void; } export interface TabUIProps extends BaseTabUIProps { children?: never; } export interface TabUIHasChildrenProps extends Omit, "tabs"> { tabs?: { title: React.ReactNode; screen?: never; icon?: React.ReactNode; data?: T; }[]; children: React.ReactNode; } interface TabUIUnderlineHeaderProps { tabs: TabUIHasChildrenProps["tabs"] | TabUIProps["tabs"]; underline: BaseTabUIProps["underline"]; tabPosition: BaseTabUIProps["tabPosition"]; onChange: BaseTabUIProps["onChange"]; currentIndex: number; renderTab?: BaseTabUIProps["renderTab"]; } export declare const TabUIUnderlineHeader: ({ tabs, underline, tabPosition, onChange, currentIndex, renderTab: TabContent, }: TabUIUnderlineHeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element; export declare const TabUI: ({ tabs, variant, underline, tabPosition, defaultIndex, onChange, children, renderTab, }: TabUIProps | TabUIHasChildrenProps) => import("@emotion/react/jsx-runtime").JSX.Element | null; export {};