chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
57 lines (54 loc) • 1.64 kB
JavaScript
/**
* @component
*/
import PropTypes from 'prop-types';
import React, { useMemo } from 'react';
import { CSSTransition } from 'react-transition-group';
import AutoProgressBar from './AutoProgressBar';
import { isNumber } from '../../utils/is';
/**
* An animated progress bar that can show an actions progress or an
* indeterminate state like a loading spinner.
*/
const ProgressBar = _ref => {
let {
children = null,
value,
ready = false
} = _ref;
const className = useMemo(() => "cc__progress-bar " + (isNumber(value) ? 'cc__progress-bar--determinate' : 'cc__progress-bar--indeterminate'), [value]);
return /*#__PURE__*/React.createElement("div", {
className: className
}, /*#__PURE__*/React.createElement(CSSTransition, {
timeout: 300,
classNames: "cc__progress-bar--animation-1",
in: !ready,
unmountOnExit: true
}, /*#__PURE__*/React.createElement(AutoProgressBar, {
value: value
})), /*#__PURE__*/React.createElement(CSSTransition, {
timeout: 300,
classNames: "cc__progress-bar--animation-2",
in: ready
}, /*#__PURE__*/React.createElement("div", {
className: "cc__progress-bar__text"
}, children)));
};
ProgressBar.propTypes = {
/**
* The progress in percent (`0` - `100`).
*/
value: PropTypes.number,
/**
* A label that is shown beneath the progress bar.
*/
children: PropTypes.node,
/**
* When toggled on it will hide the progress bar in an animated transition
* and only show its children.
*/
ready: PropTypes.bool
};
ProgressBar.displayName = 'ProgressBar';
export default ProgressBar;
//# sourceMappingURL=ProgressBar.js.map