scrolling-based-progressbar/dist/index.es.js

Progress bar whose value changes based on scrolling

import React, { Component } from 'react';

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

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 _extends = Object.assign || function (target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];

    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }

  return target;
};

var inherits = function (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 possibleConstructorReturn = function (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;
};

var ProgressBar = function (_Component) {
    inherits(ProgressBar, _Component);

    function ProgressBar() {
        classCallCheck(this, ProgressBar);
        return possibleConstructorReturn(this, (ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).apply(this, arguments));
    }

    createClass(ProgressBar, [{
        key: 'scrollBar',
        value: function scrollBar() {
            var scrollTop = document.documentElement.scrollTop;
            var docHeight = document.documentElement.scrollHeight;
            var windHeight = document.documentElement.clientHeight;
            var scrollPercent = scrollTop / (docHeight - windHeight);
            var scrollBar = document.getElementById('scroolbar');
            scrollBar.style.width = scrollPercent * 100 + '%';
        }
    }, {
        key: 'componentDidMount',
        value: function componentDidMount() {
            window.addEventListener('scroll', this.scrollBar);
        }
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            window.removeEventListener('scroll', this.scrollBar);
        }
    }, {
        key: 'render',
        value: function render() {
            var _props = this.props,
                _props$color = _props.color,
                color = _props$color === undefined ? 'red' : _props$color,
                _props$height = _props.height,
                height = _props$height === undefined ? '5px' : _props$height,
                _props$bgColor = _props.bgColor,
                bgColor = _props$bgColor === undefined ? 'transparent' : _props$bgColor,
                _props$borderRadius = _props.borderRadius,
                borderRadius = _props$borderRadius === undefined ? '0' : _props$borderRadius,
                _props$zIndex = _props.zIndex,
                zIndex = _props$zIndex === undefined ? '100000000' : _props$zIndex,
                _props$top = _props.top,
                top = _props$top === undefined ? '0' : _props$top,
                _props$left = _props.left,
                left = _props$left === undefined ? '0' : _props$left,
                _props$position = _props.position,
                position = _props$position === undefined ? 'fixed' : _props$position,
                ContainerStyle = _props.ContainerStyle,
                ProgressBarStyle = _props.ProgressBarStyle;

            return React.createElement(
                'div',
                {
                    style: _extends({
                        zIndex: zIndex,
                        position: position,
                        top: top,
                        left: left,
                        width: '100%',
                        height: height,
                        backgroundColor: bgColor,
                        overflow: 'hidden'
                    }, ContainerStyle) },
                React.createElement('div', {
                    id: 'scroolbar',
                    style: _extends({
                        height: '100%',
                        width: 0,
                        backgroundColor: color,
                        borderRadius: borderRadius
                    }, ProgressBarStyle) })
            );
        }
    }]);
    return ProgressBar;
}(Component);

export { ProgressBar };
//# sourceMappingURL=index.es.js.map