@material-ui/lab/node/SliderStyled/ValueLabelStyled.js

Material-UI Lab - Incubator for Material-UI React components.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var React = _interopRequireWildcard(require("react"));

var _styles = require("@material-ui/core/styles");

var _SliderUnstyled = require("@material-ui/unstyled/SliderUnstyled");

const overridesResolver = (_, styles) => {
  const componentName = 'MuiSlider-valueLabel';
  const styleOverrides = (0, _extends2.default)({}, styles.root, {
    [`&.${componentName}Open`]: styles.open,
    [`&.${componentName}Offset`]: styles.offset,
    [`& .${componentName}Circle`]: styles.circle,
    [`& .${componentName}Label`]: styles.label
  });
  return styleOverrides;
};

const ValueLabelRoot = (0, _styles.experimentalStyled)('span', {}, {
  muiName: 'PrivateValueLabel',
  overridesResolver
})(props => ({
  '&.MuiSlider-valueLabelOffset': (0, _extends2.default)({
    '&.MuiSlider-valueLabelOpen': {
      transform: 'scale(1) translateY(-10px)'
    },
    zIndex: 1
  }, props.theme.typography.body2, {
    fontSize: props.theme.typography.pxToRem(12),
    lineHeight: 1.2,
    transition: props.theme.transitions.create(['transform'], {
      duration: props.theme.transitions.duration.shortest
    }),
    top: -34,
    transformOrigin: 'bottom center',
    transform: 'scale(0)',
    position: 'absolute'
  }),
  '& .MuiSlider-valueLabelCircle': {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: 32,
    height: 32,
    borderRadius: '50% 50% 50% 0',
    backgroundColor: 'currentColor',
    transform: 'rotate(-45deg)'
  },
  '& .MuiSlider-valueLabelLabel': {
    color: props.theme.palette.primary.contrastText,
    transform: 'rotate(45deg)',
    textAlign: 'center'
  }
}));
/**
 * @ignore - internal component.
 */

const ValueLabel = /*#__PURE__*/React.forwardRef(function ValueLabel(inputProps, ref) {
  const props = (0, _styles.useThemeProps)({
    props: inputProps,
    name: 'PrivateValueLabel'
  });
  /* eslint-disable react/prop-types */

  const {
    components = {}
  } = props,
        other = (0, _objectWithoutPropertiesLoose2.default)(props, ["components"]);
  return /*#__PURE__*/React.createElement(_SliderUnstyled.ValueLabelUnstyled, (0, _extends2.default)({}, other, {
    components: {
      Root: ValueLabelRoot || components.Root
    },
    ref: ref
  }));
});
var _default = ValueLabel;
exports.default = _default;