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 _reactTransitionGroup = require("react-transition-group");

var _reactFela = require("react-fela");

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

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

var LoadingBar = function LoadingBar(_ref) {
  var isLoading = _ref.isLoading,
      _ref$transitionDurati = _ref.transitionDuration,
      transitionDuration = _ref$transitionDurati === void 0 ? 300 : _ref$transitionDurati;

  var _useFela = (0, _reactFela.useFela)(),
      theme = _useFela.theme;

  return _react.default.createElement(_reactTransitionGroup.Transition, {
    in: isLoading,
    timeout: isLoading ? 50 : transitionDuration,
    mountOnEnter: true,
    unmountOnExit: true
  }, function (state) {
    return _react.default.createElement(_block.Block, {
      extend: styles.container({
        transitionDuration: transitionDuration,
        state: state,
        theme: theme
      })
    }, _react.default.createElement(_block.Block, {
      extend: styles.loadingBar({
        theme: theme
      })
    }));
  });
};

exports.LoadingBar = LoadingBar;
var styles = {
  container: function container(_ref2) {
    var transitionDuration = _ref2.transitionDuration,
        state = _ref2.state,
        grey7 = _ref2.theme.colors.grey7;
    return {
      width: "100%",
      height: 3,
      background: grey7,
      overflow: "hidden",
      transition: "opacity ".concat(transitionDuration, "ms cubic-bezier(0.23, 1, 0.32, 1)"),
      opacity: state === "entered" ? 1 : 0
    };
  },
  loadingBar: function loadingBar(_ref3) {
    var primary = _ref3.theme.colors.primary;
    return {
      right: "auto",
      width: "75%",
      height: "100%",
      background: primary,
      transform: "translateX(-100vw)",
      animationName: {
        from: {
          transform: "translateX(-100%)"
        },
        to: {
          transform: "translateX(134%)"
        }
      },
      animationDelay: ".3s",
      animationDuration: "1500ms",
      animationFillMode: "forwards",
      animationTimingFunction: "linear",
      animationIterationCount: "infinite"
    };
  }
};
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
};