vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
102 lines (101 loc) • 2.3 kB
JavaScript
import PropTypes from 'prop-types';
import React from 'react';
import { Block } from '../block';
/**
* @deprecated Use `<progress>` element instead. See [Spinner](https://developer.volvocars.com/design-system/web/?path=/docs/components-spinner--docs)
*/
export const LoadingBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
isLoading,
transitionDuration = 1500
} = _ref;
return /*#__PURE__*/React.createElement(Block, {
extend: styles.container,
ref: ref
}, isLoading ? /*#__PURE__*/React.createElement(Block, {
extend: styles.bar({
transitionDuration
})
}, /*#__PURE__*/React.createElement(Block, {
extend: styles.loadingBar
}), /*#__PURE__*/React.createElement(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.bool,
/** Optional prop to customize the transition duration for showing/hiding the LoadingBar */
transitionDuration: PropTypes.number
};