package.src.components.Slider.SliderStep.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/Slider/slider';
import { css } from '@patternfly/react-styles';
import sliderStepLeft from '@patternfly/react-tokens/dist/esm/c_slider__step_Left';

export interface SliderStepProps extends Omit, 'label'> {
  /** Additional classes added to the slider step. */
  className?: string;
  /** Flag indicating the step is active. */
  isActive?: boolean;
  /** Flag indicating that the label should be hidden. */
  isLabelHidden?: boolean;
  /** Flag indicating that the tick should be hidden. */
  isTickHidden?: boolean;
  /** Step label. **/
  label?: string;
  /** Step value. **/
  value?: number;
}

export const SliderStep: React.FunctionComponent = ({
  className,
  label,
  value,
  isTickHidden = false,
  isLabelHidden = false,
  isActive = false,
  ...props
}: SliderStepProps) => {
  const style = { [sliderStepLeft.name]: `${value ? value : sliderStepLeft.value}%` } as React.CSSProperties;
  return (
    
      {!isTickHidden && }
      {!isLabelHidden && label && {label}}
    
  );
};
SliderStep.displayName = 'SliderStep';