package.src.components.ToggleGroup.ToggleGroupItem.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 { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group';
import { ToggleGroupItemVariant, ToggleGroupItemElement } from './ToggleGroupItemElement';

export interface ToggleGroupItemProps extends Omit, 'onChange'> {
  /** Text rendered inside the toggle group item */
  text?: React.ReactNode;
  /** Icon rendered inside the toggle group item */
  icon?: React.ReactNode;
  /** Additional classes added to the toggle group item */
  className?: string;
  /** Flag indicating if the toggle group item is disabled */
  isDisabled?: boolean;
  /** Flag indicating if the toggle group item is selected */
  isSelected?: boolean;
  /** required when icon is used with no supporting text */
  'aria-label'?: string;
  /** Optional id for the button within the toggle group item */
  buttonId?: string;
  /** A callback for when the toggle group item selection changes. */
  onChange?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, selected: boolean) => void;
}

export const ToggleGroupItem: React.FunctionComponent = ({
  text,
  icon,
  className,
  isDisabled = false,
  isSelected = false,
  'aria-label': ariaLabel = '',
  onChange = () => {},
  buttonId = '',
  ...props
}: ToggleGroupItemProps) => {
  const handleChange = (event: any): void => {
    onChange(event, !isSelected);
  };

  if (!ariaLabel && icon && !text) {
    /* eslint-disable no-console */
    console.warn('An accessible aria-label is required when using the toggle group item icon variant.');
  }

  return (
    
      
    
  );
};
ToggleGroupItem.displayName = 'ToggleGroupItem';