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

A React library for building user interfaces at Volvo Cars

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LoadingBar = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _block = require("../block");
/**
 * @deprecated Use `<progress>` element instead. See [Spinner](https://developer.volvocars.com/design-system/web/?path=/docs/components-spinner--docs)
 */
const LoadingBar = exports.LoadingBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
  let {
    isLoading,
    transitionDuration = 1500
  } = _ref;
  return /*#__PURE__*/_react.default.createElement(_block.Block, {
    extend: styles.container,
    ref: ref
  }, isLoading ? /*#__PURE__*/_react.default.createElement(_block.Block, {
    extend: styles.bar({
      transitionDuration
    })
  }, /*#__PURE__*/_react.default.createElement(_block.Block, {
    extend: styles.loadingBar
  }), /*#__PURE__*/_react.default.createElement(_block.Block, {
    extend: styles.transparentBar
  })) : null);
});
LoadingBar.displayName = 'LoadingBar';
const styles = {
  container: _ref2 => {
    let {
      theme: {
        color: {
          background: {
            secondary
          }
        }
      }
    } = _ref2;
    return {
      backgroundColor: secondary,
      width: '100%',
      overflow: 'hidden'
    };
  },
  bar: _ref3 => {
    let {
      transitionDuration
    } = _ref3;
    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: _ref4 => {
    let {
      theme: {
        color: {
          background: {
            secondary
          }
        }
      }
    } = _ref4;
    return {
      backgroundColor: secondary,
      flexGrow: 3
    };
  },
  loadingBar: _ref5 => {
    let {
      theme: {
        color: {
          ornament: {
            highlight
          }
        }
      }
    } = _ref5;
    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
};