import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Slider/slider'; import { css } from '@patternfly/react-styles'; import sliderStepInsetInlineStart from '@patternfly/react-tokens/dist/esm/c_slider__step_InsetInlineStart'; 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 = { [sliderStepInsetInlineStart.name]: `${value ? value : sliderStepInsetInlineStart.value}%` } as React.CSSProperties; return (
{!isTickHidden &&
} {!isLabelHidden && label &&
{label}
}
); }; SliderStep.displayName = 'SliderStep';