@age/quantum/RangeSlider/RangeSlider.js

Catho react components

"use strict";

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

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Slider = _interopRequireDefault(require("@material-ui/core/Slider"));

var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));

var _theme = require("../shared/theme");

var _shared = require("../shared");

var _valueValidator = _interopRequireDefault(require("./valueValidator"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

var SliderWrapper = _styledComponents.default.div.withConfig({
  displayName: "RangeSlider__SliderWrapper",
  componentId: "gs0ics-0"
})(["width:auto;", ""], function (_ref) {
  var large = _ref.theme.spacing.large;
  return "\n      padding: 0 ".concat(large / 2, "px;\n    ");
});

var RangeSlider = function RangeSlider(props) {
  var ariaLabelledby = props['aria-labelledby'],
      defaultValue = props.defaultValue,
      disabled = props.disabled,
      marks = props.marks,
      max = props.max,
      min = props.min,
      onChange = props.onChange,
      onChangeCommitted = props.onChangeCommitted,
      step = props.step,
      theme = props.theme,
      tipFormatter = props.tipFormatter,
      track = props.track,
      value = props.value,
      valueLabelDisplay = props.valueLabelDisplay;
  var _theme$colors = theme.colors,
      neutral = _theme$colors.neutral,
      primary = _theme$colors.primary,
      _theme$spacing = theme.spacing,
      xsmall = _theme$spacing.xsmall,
      small = _theme$spacing.small,
      large = _theme$spacing.large,
      baseFontSize = theme.baseFontSize;
  var arrowSize = xsmall - 1;
  var halfMeasure = '50%';
  var StyledSlider = (0, _withStyles.default)({
    root: {
      color: primary[600],
      height: 8
    },
    thumb: {
      backgroundColor: disabled ? neutral[500] : primary[700],
      border: 'none',
      height: "".concat(large, "px !important"),
      width: "".concat(large, "px !important"),
      marginTop: "-".concat(xsmall, "px !important"),
      marginLeft: "-".concat(large / 2, "px !important"),
      '&:focus,&:hover': {
        '& > *': {
          transform: "scale(1) translateX(-".concat(halfMeasure, ") !important")
        }
      }
    },
    valueLabel: {
      width: 'auto',
      top: '-50px',
      left: halfMeasure,
      transform: valueLabelDisplay === 'on' ? "scale(1) translateX(-".concat(halfMeasure, ") !important") : 'scale(0)',
      '&:focus,&:hover': {
        transform: "scale(1) translateX(-".concat(halfMeasure, ") !important")
      },
      '&::after': {
        borderLeft: "".concat(arrowSize, "px solid transparent"),
        borderRight: "".concat(arrowSize, "px solid transparent"),
        borderTop: "".concat(arrowSize, "px solid ").concat(neutral[700]),
        bottom: "-".concat(arrowSize, "px"),
        content: "\" \"",
        height: 0,
        left: halfMeasure,
        position: 'absolute',
        transform: "translateX(-".concat(halfMeasure, ") !important"),
        width: 0
      },
      '& > *': {
        background: neutral[700],
        color: neutral[0],
        fontSize: "".concat(baseFontSize, "px"),
        padding: "".concat(xsmall, "px ").concat(small, "px"),
        borderRadius: '4px',
        height: "".concat(large, "px"),
        transform: 'none',
        width: 'auto',
        whiteSpace: 'nowrap',
        '& > *': {
          width: 'auto',
          transform: 'none'
        }
      }
    },
    mark: {
      display: 'none'
    },
    markLabel: {
      marginTop: "".concat(xsmall, "px")
    },
    track: {
      height: 8,
      borderRadius: 4,
      backgroundColor: (0, _shared.hexToRgba)(primary[700], 0.5)
    },
    rail: {
      height: 8,
      borderRadius: 4
    }
  })(_Slider.default);
  StyledSlider.displayName = 'SliderComponent';
  var formatedValue = _typeof(value) === 'object' ? [value.from, value.to] : value;
  var formatedDefaultValue = _typeof(defaultValue) === 'object' ? [defaultValue.from, defaultValue.to] : defaultValue;
  return _react.default.createElement(SliderWrapper, {
    theme: theme
  }, _react.default.createElement(StyledSlider, {
    "aria-labelledby": ariaLabelledby,
    defaultValue: disabled ? 0 : formatedDefaultValue,
    disabled: disabled,
    getAriaLabel: tipFormatter,
    getAriaValueText: tipFormatter,
    marks: marks,
    max: max,
    min: min,
    onChange: onChange,
    onChangeCommitted: onChangeCommitted,
    ref: _react.default.createRef(),
    step: step,
    track: track,
    value: disabled ? 0 : formatedValue,
    valueLabelDisplay: disabled ? 'off' : valueLabelDisplay,
    valueLabelFormat: tipFormatter
  }));
};

SliderWrapper.displayName = 'RangeSliderWrapper';
RangeSlider.defaultProps = {
  step: 1,
  max: 100,
  min: 0,
  value: undefined,
  defaultValue: 30,
  marks: undefined,
  disabled: false,
  onChange: function onChange() {},
  onChangeCommitted: function onChangeCommitted() {},
  tipFormatter: function tipFormatter(value) {
    return value.toString();
  },
  track: 'normal',
  'aria-labelledby': undefined,
  valueLabelDisplay: 'auto',
  theme: {
    spacing: _theme.spacing,
    colors: _theme.colors,
    baseFontSize: _theme.baseFontSize
  }
};
RangeSlider.propTypes = {
  /** The number that the slider will use as interval of each value */
  step: _propTypes.default.number,

  /** The max value possible in slider */
  max: _propTypes.default.number,

  /** The min value possible in slider */
  min: _propTypes.default.number,
  disabled: _propTypes.default.bool,

  /** Trigger a function on value change, evict to use controlled values, because the component will re-render before change the value */
  onChange: _propTypes.default.func,

  /** Trigger a function after value completely changes */
  onChangeCommitted: _propTypes.default.func,

  /** The min value possible in slider */
  marks: _propTypes.default.arrayOf(_propTypes.default.shape({
    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
    label: _propTypes.default.string
  })),

  /* *Set if the tooltip label is by default visible. 'auto' the value label will display when the thumb is hovered or focused. 'on' will display persistently. 'off' will never display. */
  valueLabelDisplay: _propTypes.default.oneOf(['auto', 'on', 'off']),

  /** The track presentation:- normal the track will render a bar representing the slider value. - inverted the track will render a bar representing the remaining slider value. - false the track will render without a bar. */
  track: _propTypes.default.oneOf(['normal', false, 'inverted']),
  'aria-labelledby': _propTypes.default.string,

  /** RangeSlider will pass its value to tipFormatter, display its value in Tooltip */
  tipFormatter: _propTypes.default.func,

  /** It receives a Number to display a slider or an Object with from and to properties to display a range. Example: `value={10}` or `value={{ from: 20, to: 40 }}` */
  value: _valueValidator.default,
  defaultValue: _valueValidator.default,
  theme: _propTypes.default.shape({
    spacing: _propTypes.default.object,
    colors: _propTypes.default.object,
    baseFontSize: _propTypes.default.number
  })
};
var _default = RangeSlider;
exports.default = _default;