vcc-ui/lib/components/loading-bar/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

"use strict";

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

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

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

var _block = require("../block");

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

var LoadingBar = _react.default.forwardRef(function (_ref, ref) {
  var isLoading = _ref.isLoading,
      _ref$transitionDurati = _ref.transitionDuration,
      transitionDuration = _ref$transitionDurati === void 0 ? 1500 : _ref$transitionDurati;
  return _react.default.createElement(_block.Block, {
    extend: styles.container,
    ref: ref
  }, isLoading ? _react.default.createElement(_block.Block, {
    extend: styles.bar({
      transitionDuration: transitionDuration
    })
  }, _react.default.createElement(_block.Block, {
    extend: styles.loadingBar
  }), _react.default.createElement(_block.Block, {
    extend: styles.transparentBar
  })) : null);
});

exports.LoadingBar = LoadingBar;
LoadingBar.displayName = 'LoadingBar';
var styles = {
  container: function container(_ref2) {
    var secondary = _ref2.theme.color.background.secondary;
    return {
      backgroundColor: secondary,
      width: '100%',
      overflow: 'hidden'
    };
  },
  bar: function bar(_ref3) {
    var transitionDuration = _ref3.transitionDuration;
    return {
      width: '100%',
      height: 3,
      position: 'relative',
      display: 'flex',
      animationName: {
        from: {
          transform: 'translateX(-70%)'
        },
        to: {
          transform: 'translateX(120%)'
        }
      },
      animationDuration: transitionDuration + 'ms',
      animationTimingFunction: 'linear',
      animationIterationCount: 'infinite'
    };
  },
  transparentBar: function transparentBar(_ref4) {
    var secondary = _ref4.theme.color.background.secondary;
    return {
      backgroundColor: secondary,
      flexGrow: 3
    };
  },
  loadingBar: function loadingBar(_ref5) {
    var highlight = _ref5.theme.color.ornament.highlight;
    return {
      backgroundColor: highlight,
      flexGrow: 7
    };
  }
};
LoadingBar.propTypes = {
  /** Determines whether the LoadingBar is shown or not */
  isLoading: _propTypes.default.bool,

  /** Optional prop to customize the transition duration for showing/hiding the LoadingBar */
  transitionDuration: _propTypes.default.number
};