preact-material-components/Slider/index.js

preact wrapper for "Material Components for the web"

"use strict";

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

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

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

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

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

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

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

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

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

var _slider = require("@material/slider");

var _bindDecorator = require("bind-decorator");

var _preact = require("preact");

var _MaterialComponent2 = _interopRequireDefault(require("../Base/MaterialComponent"));

var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
  var c = arguments.length,
      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
      d;
  if ((typeof Reflect === "undefined" ? "undefined" : (0, _typeof2.default)(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
    if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  }
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};

var __rest = void 0 && (void 0).__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

var Slider =
/*#__PURE__*/
function (_MaterialComponent) {
  (0, _inherits2.default)(Slider, _MaterialComponent);

  function Slider() {
    var _this;

    (0, _classCallCheck2.default)(this, Slider);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Slider).apply(this, arguments));
    _this.componentName = 'slider';
    _this.mdcProps = ['discrete'];
    return _this;
  }

  (0, _createClass2.default)(Slider, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      (0, _get2.default)((0, _getPrototypeOf2.default)(Slider.prototype), "componentDidMount", this).call(this);

      if (this.control) {
        this.MDComponent = new _slider.MDCSlider(this.control);
        this.MDComponent.listen('MDCSlider:change', this.onChange);
        this.MDComponent.listen('MDCSlider:input', this.onInput);
      }

      this.setValue(this.props.value); // set initial value programatically because of error if min is greater than initial max
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      (0, _get2.default)((0, _getPrototypeOf2.default)(Slider.prototype), "componentWillUnmount", this).call(this);

      if (this.MDComponent) {
        this.MDComponent.unlisten('MDCSlider:change', this.onChange);
        this.MDComponent.unlisten('MDCSlider:input', this.onInput);
        this.MDComponent.destroy();
      }
    }
  }, {
    key: "getValue",
    value: function getValue() {
      if (this.MDComponent) {
        return this.MDComponent.value;
      }
    }
  }, {
    key: "setValue",
    value: function setValue(value) {
      var _this$props = this.props,
          _this$props$disabled = _this$props.disabled,
          disabled = _this$props$disabled === void 0 ? false : _this$props$disabled,
          _this$props$min = _this$props.min,
          min = _this$props$min === void 0 ? 0 : _this$props$min,
          _this$props$max = _this$props.max,
          max = _this$props$max === void 0 ? 100 : _this$props$max,
          step = _this$props.step;

      if (this.MDComponent) {
        if (min > this.MDComponent.max) {
          this.MDComponent.max = max;
          this.MDComponent.min = min;
        } else {
          this.MDComponent.min = min;
          this.MDComponent.max = max;
        }

        if (value) {
          this.MDComponent.value = value;
        }

        this.MDComponent.disabled = disabled;

        if (step) {
          this.MDComponent.step = step;
        }
      }
    }
  }, {
    key: "onChange",
    value: function onChange(e) {
      if (this.props.onChange) {
        this.props.onChange(e);
      }
    }
  }, {
    key: "onInput",
    value: function onInput(e) {
      if (this.props.onInput) {
        this.props.onInput(e);
      }
    }
  }, {
    key: "materialDom",
    value: function materialDom(allprops) {
      var _allprops$tabindex = allprops.tabindex,
          tabIndex = _allprops$tabindex === void 0 ? 0 : _allprops$tabindex,
          props = __rest(allprops, ["tabindex"]);

      this.setValue(allprops);
      return (0, _preact.h)("div", Object.assign({
        tabIndex: tabIndex,
        role: "slider",
        "aria-label": "Select Value",
        ref: this.setControlRef
      }, props), (0, _preact.h)("div", {
        class: "mdc-slider__track-container"
      }, (0, _preact.h)("div", {
        class: "mdc-slider__track"
      })), (0, _preact.h)("div", {
        class: "mdc-slider__thumb-container"
      }, props.discrete && (0, _preact.h)("div", {
        class: "mdc-slider__pin"
      }, (0, _preact.h)("span", {
        class: "mdc-slider__pin-value-marker"
      })), (0, _preact.h)("svg", {
        class: "mdc-slider__thumb",
        width: "21",
        height: "21"
      }, (0, _preact.h)("circle", {
        cx: "10.5",
        cy: "10.5",
        r: "7.875"
      })), (0, _preact.h)("div", {
        class: "mdc-slider__focus-ring"
      })));
    }
  }]);
  return Slider;
}(_MaterialComponent2.default);

exports.Slider = Slider;

__decorate([_bindDecorator.bind], Slider.prototype, "onChange", null);

__decorate([_bindDecorator.bind], Slider.prototype, "onInput", null);

var _default = Slider;
exports.default = _default;
//# sourceMappingURL=index.js.map