rmwc/Slider/index.js

A thin React wrapper for Material Design (Web) Components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Slider = exports.SliderFocusRing = exports.SliderThumb = exports.SliderPinValueMarker = exports.SliderPin = exports.SliderThumbContainer = exports.SliderTrackMarkerContainer = exports.SliderTrack = exports.SliderTrackContainer = exports.SliderRoot = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _mdc = require('@material/slider/dist/mdc.slider');

var _Base = require('../Base');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var SliderRoot = exports.SliderRoot = (0, _Base.simpleTag)({
  displayName: 'SliderRoot',
  classNames: function classNames(props) {
    return ['mdc-slider', {
      'mdc-slider--discrete': props.discrete,
      'mdc-slider--display-markers': props.displayMarkers && props.discrete
    }];
  },
  consumeProps: ['discrete', 'displayMarkers']
});

var SliderTrackContainer = exports.SliderTrackContainer = (0, _Base.simpleTag)({
  displayName: 'SliderTrackContainer',
  classNames: 'mdc-slider__track-container'
});

var SliderTrack = exports.SliderTrack = (0, _Base.simpleTag)({
  displayName: 'SliderTrack',
  classNames: 'mdc-slider__track'
});

var SliderTrackMarkerContainer = exports.SliderTrackMarkerContainer = (0, _Base.simpleTag)({
  displayName: 'SliderTrackMarkerContainer',
  classNames: 'mdc-slider__track-marker-container'
});

var SliderThumbContainer = exports.SliderThumbContainer = (0, _Base.simpleTag)({
  displayName: 'SliderThumbContainer',
  classNames: 'mdc-slider__thumb-container'
});

var SliderPin = exports.SliderPin = (0, _Base.simpleTag)({
  displayName: 'SliderPin',
  classNames: 'mdc-slider__pin'
});

var SliderPinValueMarker = exports.SliderPinValueMarker = (0, _Base.simpleTag)({
  displayName: 'SliderPinValueMarker',
  tag: 'span',
  classNames: 'mdc-slider__pin-value-marker'
});

var SliderThumb = exports.SliderThumb = function SliderThumb() {
  return React.createElement(
    'svg',
    { className: 'mdc-slider__thumb', width: '21', height: '21' },
    React.createElement('circle', { cx: '10.5', cy: '10.5', r: '7.875' })
  );
};

var SliderFocusRing = exports.SliderFocusRing = (0, _Base.simpleTag)({
  displayName: 'SliderFocusRing',
  classNames: 'mdc-slider__focus-ring'
});

var Slider = exports.Slider = function (_withFoundation) {
  _inherits(Slider, _withFoundation);

  function Slider() {
    _classCallCheck(this, Slider);

    return _possibleConstructorReturn(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).apply(this, arguments));
  }

  _createClass(Slider, [{
    key: 'syncWithProps',
    value: function syncWithProps(nextProps) {
      var _this2 = this;

      // value
      (0, _Base.syncFoundationProp)(nextProps.value, this.value, function () {
        return _this2.value = nextProps.value;
      });

      // max
      (0, _Base.syncFoundationProp)(nextProps.max, this.max, function () {
        return _this2.max = nextProps.max !== undefined ? +nextProps.max : _this2.max;
      });

      // min
      (0, _Base.syncFoundationProp)(nextProps.min, this.min, function () {
        return _this2.min = nextProps.min !== undefined ? +nextProps.min : _this2.min;
      });

      // step
      (0, _Base.syncFoundationProp)(nextProps.step, this.step, function () {
        return _this2.step = nextProps.step !== undefined ? +nextProps.step : _this2.step;
      });

      // disabled
      (0, _Base.syncFoundationProp)(nextProps.disabled, this.disabled, function () {
        return _this2.disabled = !!nextProps.disabled;
      });

      // discrete
      (0, _Base.syncFoundationProp)(nextProps.discrete, this.discrete, function () {
        return _this2.discrete = !!nextProps.discrete;
      });

      //eslint-disable-next-line eqeqeq
      if (this.discrete && this.foundation_ && this.foundation_.getStep() == 0) {
        this.step = 1;
      }

      // displayMarkers
      (0, _Base.syncFoundationProp)(nextProps.displayMarkers, this.displayMarkers, function () {
        _this2.displayMarkers = !!nextProps.displayMarkers;
        window.requestAnimationFrame(function () {
          return _this2.foundation_ && _this2.foundation_.setupTrackMarker();
        });
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          value = _props.value,
          min = _props.min,
          max = _props.max,
          discrete = _props.discrete,
          displayMarkers = _props.displayMarkers,
          step = _props.step,
          disabled = _props.disabled,
          onChange = _props.onChange,
          onInput = _props.onInput,
          className = _props.className,
          children = _props.children,
          apiRef = _props.apiRef,
          rest = _objectWithoutProperties(_props, ['value', 'min', 'max', 'discrete', 'displayMarkers', 'step', 'disabled', 'onChange', 'onInput', 'className', 'children', 'apiRef']);

      var _foundationRefs = this.foundationRefs,
          root_ = _foundationRefs.root_,
          thumbContainer_ = _foundationRefs.thumbContainer_,
          track_ = _foundationRefs.track_,
          pinValueMarker_ = _foundationRefs.pinValueMarker_,
          trackMarkerContainer_ = _foundationRefs.trackMarkerContainer_;


      if (displayMarkers && !discrete) {
        console.warn('The \'displayMarkers\' prop on rmwc Slider will \n        only work in conjunction with the \'discrete\' prop');
      }

      var dataStep = step ? { 'data-step': step } : {};

      return React.createElement(
        SliderRoot,
        Object.assign({
          tabIndex: '0'
          //eslint-disable-next-line jsx-a11y/role-has-required-aria-props
          , role: 'slider',
          'aria-valuemax': max,
          'aria-valuenow': value,
          'aria-label': 'Select Value',
          elementRef: root_,
          discrete: discrete,
          displayMarkers: displayMarkers
        }, disabled ? { 'aria-disabled': disabled } : {}, dataStep, rest),
        React.createElement(
          SliderTrackContainer,
          null,
          React.createElement(SliderTrack, { elementRef: track_ }),
          displayMarkers && React.createElement(SliderTrackMarkerContainer, { elementRef: trackMarkerContainer_ })
        ),
        React.createElement(
          SliderThumbContainer,
          { elementRef: thumbContainer_ },
          discrete && React.createElement(
            SliderPin,
            null,
            React.createElement(SliderPinValueMarker, { elementRef: pinValueMarker_ })
          ),
          React.createElement(SliderThumb, null),
          React.createElement(SliderFocusRing, null)
        ),
        children
      );
    }
  }, {
    key: 'discrete',
    get: function get() {
      return !!(this.foundation_ && this.foundation_.isDiscrete_);
    },
    set: function set(isDiscrete) {
      if (this.foundation_) {
        this.foundation_.isDiscrete_ = isDiscrete;
      }
    }
  }, {
    key: 'displayMarkers',
    get: function get() {
      return !!this.foundation_ && this.foundation_.hasTrackMarker_;
    },
    set: function set(isDisplayMarkers) {
      if (this.foundation_) {
        this.foundation_.hasTrackMarker_ = isDisplayMarkers;
      }
    }
  }]);

  return Slider;
}((0, _Base.withFoundation)({
  constructor: _mdc.MDCSlider,
  refs: ['root_', 'thumbContainer_', 'track_', 'pinValueMarker_', 'trackMarkerContainer_'],
  adapter: {}
}));

Object.defineProperty(Slider, 'displayName', {
  enumerable: true,
  writable: true,
  value: 'Slider'
});
exports.default = Slider;