@material-ui/unstyled/modern/SliderUnstyled/ValueLabelUnstyled.js

Material-UI Unstyled - collection of unstyled React components.

import * as React from 'react';
import clsx from 'clsx';
import { unstable_capitalize as capitalize } from '@material-ui/utils';

const getUtilityClass = name => {
  return `MuiSlider-valueLabel${capitalize(name)}`;
};

const useValueLabelClasses = props => {
  const {
    open,
    valueLabelDisplay
  } = props;
  const utilityClasses = {
    offset: clsx('MuiSlider-valueLabel', getUtilityClass('offset'), (open || valueLabelDisplay === 'on') && getUtilityClass('open')),
    circle: getUtilityClass('circle'),
    label: getUtilityClass('label')
  };
  return utilityClasses;
};
/**
 * @ignore - internal component.
 */


function ValueLabel(props) {
  const {
    children,
    className,
    value,
    valueLabelDisplay,
    components = {},
    theme
  } = props;
  const classes = useValueLabelClasses(props);

  if (valueLabelDisplay === 'off') {
    return children;
  }

  const Root = components.Root || 'span';
  return /*#__PURE__*/React.cloneElement(children, {
    className: clsx(children.props.className)
  }, /*#__PURE__*/React.createElement(Root, {
    className: clsx(classes.offset, className),
    theme: theme
  }, /*#__PURE__*/React.createElement("span", {
    className: classes.circle
  }, /*#__PURE__*/React.createElement("span", {
    className: classes.label
  }, value))));
}

export default ValueLabel;