12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- import 'intersection-observer'; // polyfill
- import {createContext, useState} from 'react';
- import styled from '@emotion/styled';
- import type {AriaTabListOptions} from '@react-aria/tabs';
- import type {TabListState, TabListStateOptions} from '@react-stately/tabs';
- import type {Orientation} from '@react-types/shared';
- import {tabsShouldForwardProp} from './utils';
- export {TabList, type TabListProps} from './tabList';
- export {TabPanels} from './tabPanels';
- export interface TabsProps<T>
- extends Omit<
- AriaTabListOptions<any>,
- 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'isDisabled'
- >,
- Omit<
- TabListStateOptions<any>,
- | 'children'
- | 'selectedKey'
- | 'defaultSelectedKey'
- | 'onSelectionChange'
- | 'isDisabled'
- > {
- children?: React.ReactNode;
- className?: string;
- /**
- * [Uncontrolled] Default selected tab. Must match the `key` prop on the
- * selected tab item.
- */
- defaultValue?: T;
- disabled?: boolean;
- /**
- * Callback when the selected tab changes.
- */
- onChange?: (key: T) => void;
- /**
- * [Controlled] Selected tab . Must match the `key` prop on the selected tab
- * item.
- */
- value?: T;
- }
- interface TabContext {
- rootProps: Omit<TabsProps<any>, 'children' | 'className'>;
- setTabListState: (state: TabListState<any>) => void;
- tabListState?: TabListState<any>;
- }
- export const TabsContext = createContext<TabContext>({
- rootProps: {orientation: 'horizontal'},
- setTabListState: () => {},
- });
- /**
- * Root tabs component. Provides the necessary data (via React context) for
- * child components (TabList and TabPanels) to work together. See example
- * usage in tabs.stories.js
- */
- export function Tabs<T extends string | number>({
- orientation = 'horizontal',
- className,
- children,
- ...props
- }: TabsProps<T>) {
- const [tabListState, setTabListState] = useState<TabListState<any>>();
- return (
- <TabsContext.Provider
- value={{rootProps: {...props, orientation}, tabListState, setTabListState}}
- >
- <TabsWrap orientation={orientation} className={className}>
- {children}
- </TabsWrap>
- </TabsContext.Provider>
- );
- }
- const TabsWrap = styled('div', {shouldForwardProp: tabsShouldForwardProp})<{
- orientation: Orientation;
- }>`
- display: flex;
- flex-direction: ${p => (p.orientation === 'horizontal' ? 'column' : 'row')};
- flex-grow: 1;
- ${p =>
- p.orientation === 'vertical' &&
- `
- height: 100%;
- align-items: stretch;
- `};
- `;
|