package.src.components.Tabs.TabContent.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of react-core Show documentation

This library provides a set of common React components for use with the PatternFly reference implementation.

The newest version!

import * as React from 'react';
import styles from '@patternfly/react-styles/css/components/TabContent/tab-content';
import { css } from '@patternfly/react-styles';
import { getOUIAProps, OUIAProps } from '../../helpers';
import { TabsContextConsumer, TabsContextProps } from './TabsContext';

export interface TabContentProps extends Omit, 'ref'>, OUIAProps {
  /** content rendered inside the tab content area if used outside Tabs component */
  children?: any;
  /** Child to show in the content area */
  child?: React.ReactElement;
  /** class of tab content area if used outside Tabs component */
  className?: string;
  /** Identifies the active Tab  */
  activeKey?: number | string;
  /** uniquely identifies the controlling Tab if used outside Tabs component */
  eventKey?: number | string;
  /** @hide Callback for the section ref */
  innerRef?: React.Ref;
  /** id passed from parent to identify the content section */
  id: string;
  /** title of controlling Tab if used outside Tabs component */
  'aria-label'?: string;
  /** Value to overwrite the randomly generated data-ouia-component-id.*/
  ouiaId?: number | string;
  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
  ouiaSafe?: boolean;
}

const variantStyle = {
  default: '',
  light300: styles.modifiers.light_300
};

const TabContentBase: React.FunctionComponent = ({
  id,
  activeKey,
  'aria-label': ariaLabel,
  child,
  children,
  className,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  eventKey,
  innerRef,
  ouiaId,
  ouiaSafe,
  ...props
}: TabContentProps) => {
  if (children || child) {
    let labelledBy: string;
    if (ariaLabel) {
      labelledBy = null;
    } else {
      labelledBy = children ? `${id}` : `pf-tab-${child.props.eventKey}-${id}`;
    }

    return (
      
        {({ variant }: TabsContextProps) => (
          
            {children || child.props.children}
          
        )}
      
    );
  }
  return null;
};

export const TabContent = React.forwardRef((props: TabContentProps, ref: React.Ref) => (
  
));