2020-03-11 13:12:04 +00:00
|
|
|
import React, { useState } from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2021-02-09 10:44:12 +00:00
|
|
|
|
2020-03-11 13:12:04 +00:00
|
|
|
import DropDown from "../drop-down";
|
|
|
|
import Link from "./link";
|
2021-03-10 07:58:21 +00:00
|
|
|
import StyledProgressBar from "./styled-progress-bar";
|
2020-03-11 13:12:04 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const ProgressBar = (props) => {
|
2020-04-28 08:56:48 +00:00
|
|
|
const { percent, label, dropDownContent, ...rest } = props;
|
2020-07-03 08:41:38 +00:00
|
|
|
const progressPercent = percent > 100 ? 100 : percent;
|
|
|
|
const remainPercent = 100 - progressPercent;
|
2020-03-11 13:12:04 +00:00
|
|
|
|
2020-07-03 08:41:38 +00:00
|
|
|
const ref = React.createRef();
|
2020-03-11 13:12:04 +00:00
|
|
|
const [isOpen, setIsOpen] = useState(false);
|
2020-07-03 08:41:38 +00:00
|
|
|
|
2020-03-11 13:12:04 +00:00
|
|
|
const onLinkClick = () => setIsOpen(!isOpen);
|
2020-07-03 08:41:38 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const onClose = (e) => {
|
2020-03-11 13:12:04 +00:00
|
|
|
if (ref.current.contains(e.target)) return;
|
|
|
|
setIsOpen(!isOpen);
|
|
|
|
};
|
|
|
|
|
2020-03-11 14:18:12 +00:00
|
|
|
//console.log("ProgressBar render");
|
2020-03-11 13:12:04 +00:00
|
|
|
return (
|
2020-10-16 13:16:01 +00:00
|
|
|
<StyledProgressBar
|
|
|
|
ref={ref}
|
|
|
|
{...rest}
|
|
|
|
uploadedPercent={progressPercent}
|
|
|
|
remainPercent={remainPercent}
|
|
|
|
>
|
2020-03-11 13:12:04 +00:00
|
|
|
<Link
|
|
|
|
className="progress-bar_full-text"
|
|
|
|
color="#333"
|
|
|
|
onClick={onLinkClick}
|
|
|
|
isOpen={isOpen}
|
2020-07-24 10:51:10 +00:00
|
|
|
showIcon={dropDownContent}
|
2020-03-11 13:12:04 +00:00
|
|
|
>
|
|
|
|
{label}
|
|
|
|
</Link>
|
|
|
|
<div className="progress-bar_percent">
|
|
|
|
<div className="progress-bar_text">
|
|
|
|
<Link
|
|
|
|
className="progress-bar_progress-text"
|
|
|
|
color="#fff"
|
|
|
|
onClick={onLinkClick}
|
|
|
|
isOpen={isOpen}
|
2020-07-24 10:51:10 +00:00
|
|
|
showIcon={dropDownContent}
|
2020-03-11 13:12:04 +00:00
|
|
|
>
|
|
|
|
{label}
|
|
|
|
</Link>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="progress-bar_field" />
|
2020-07-24 10:51:10 +00:00
|
|
|
{dropDownContent && (
|
|
|
|
<DropDown open={isOpen} clickOutsideAction={onClose}>
|
|
|
|
<div className="progress-bar_drop-down">{dropDownContent}</div>
|
|
|
|
</DropDown>
|
|
|
|
)}
|
2020-03-11 13:12:04 +00:00
|
|
|
</StyledProgressBar>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
ProgressBar.propTypes = {
|
2021-03-10 07:58:21 +00:00
|
|
|
/** Progress value. */
|
2020-04-28 08:56:48 +00:00
|
|
|
percent: PropTypes.number.isRequired,
|
2021-03-10 07:58:21 +00:00
|
|
|
/** Text in progress-bar. */
|
2020-03-11 13:12:04 +00:00
|
|
|
label: PropTypes.string,
|
2021-03-10 07:58:21 +00:00
|
|
|
/** Drop-down content. */
|
2020-03-11 13:12:04 +00:00
|
|
|
dropDownContent: PropTypes.any,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ProgressBar;
|