2022-05-30 12:32:28 +00:00
|
|
|
import React, { useEffect, useState } from "react";
|
2022-01-31 13:40:43 +00:00
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import styled from "styled-components";
|
2021-02-20 14:54:12 +00:00
|
|
|
|
2020-11-18 14:09:48 +00:00
|
|
|
import {
|
2022-05-16 15:03:21 +00:00
|
|
|
StyledFloatingButtonWrapper,
|
2020-11-18 14:09:48 +00:00
|
|
|
StyledFloatingButton,
|
|
|
|
StyledAlertIcon,
|
|
|
|
StyledCircleWrap,
|
|
|
|
StyledCircle,
|
2021-03-10 17:10:09 +00:00
|
|
|
IconBox,
|
2022-01-31 13:40:43 +00:00
|
|
|
} from "./StyledFloatingButton";
|
2020-12-15 15:40:27 +00:00
|
|
|
|
2022-01-31 13:40:43 +00:00
|
|
|
import ButtonUploadIcon from "../../../../public/images/button.upload.react.svg";
|
|
|
|
import ButtonFileIcon from "../../../../public/images/button.file.react.svg";
|
|
|
|
import ButtonTrashIcon from "../../../../public/images/button.trash.react.svg";
|
|
|
|
import ButtonMoveIcon from "../../../../public/images/button.move.react.svg";
|
|
|
|
import ButtonDuplicateIcon from "../../../../public/images/button.duplicate.react.svg";
|
|
|
|
import ButtonAlertIcon from "../../../../public/images/button.alert.react.svg";
|
|
|
|
import commonIconsStyles from "@appserver/components/utils/common-icons-style";
|
|
|
|
import ButtonPlusIcon from "../../../../public/images/actions.button.plus.react.svg";
|
|
|
|
import ButtonMinusIcon from "../../../../public/images/actions.button.minus.react.svg";
|
2022-05-16 15:03:21 +00:00
|
|
|
import CloseIcon from "../../../../public/images/close-icon.react.svg";
|
2021-02-20 14:54:12 +00:00
|
|
|
|
|
|
|
const StyledButtonAlertIcon = styled(ButtonAlertIcon)`
|
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
2022-06-02 08:49:28 +00:00
|
|
|
|
|
|
|
const Delay = 1000;
|
2020-11-16 11:47:30 +00:00
|
|
|
const FloatingButton = ({ id, className, style, ...rest }) => {
|
2022-05-16 15:03:21 +00:00
|
|
|
const {
|
|
|
|
icon,
|
|
|
|
alert,
|
|
|
|
percent,
|
|
|
|
onClick,
|
|
|
|
color,
|
2022-05-18 11:15:54 +00:00
|
|
|
clearUploadedFilesHistory,
|
2022-05-16 15:03:21 +00:00
|
|
|
} = rest;
|
|
|
|
|
2022-05-30 12:32:28 +00:00
|
|
|
const [animationCompleted, setAnimationCompleted] = useState(false);
|
|
|
|
|
2022-05-16 15:03:21 +00:00
|
|
|
const onProgressClear = () => {
|
2022-05-18 11:15:54 +00:00
|
|
|
clearUploadedFilesHistory && clearUploadedFilesHistory();
|
2022-05-16 15:03:21 +00:00
|
|
|
};
|
2020-11-16 11:47:30 +00:00
|
|
|
|
2022-06-02 08:49:28 +00:00
|
|
|
let timerId = null;
|
|
|
|
|
2022-05-30 12:32:28 +00:00
|
|
|
useEffect(() => {
|
2022-06-02 08:49:28 +00:00
|
|
|
timerId = setTimeout(
|
|
|
|
() => setAnimationCompleted(percent === 100 ? true : false),
|
|
|
|
Delay
|
|
|
|
);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
clearTimeout(timerId);
|
|
|
|
};
|
2022-05-30 12:32:28 +00:00
|
|
|
}, [percent, setAnimationCompleted]);
|
|
|
|
|
2020-11-16 11:47:30 +00:00
|
|
|
return (
|
2022-05-16 15:03:21 +00:00
|
|
|
<StyledFloatingButtonWrapper>
|
|
|
|
<StyledCircleWrap
|
|
|
|
color={color}
|
|
|
|
id={id}
|
|
|
|
className={`${className} not-selectable`}
|
|
|
|
style={style}
|
|
|
|
icon={icon}
|
|
|
|
onClick={onClick}
|
|
|
|
>
|
2022-05-17 07:54:11 +00:00
|
|
|
<StyledCircle
|
2022-05-30 12:32:28 +00:00
|
|
|
displayProgress={
|
|
|
|
!(percent === 100 && animationCompleted) && icon != "minus"
|
|
|
|
}
|
2022-05-17 07:54:11 +00:00
|
|
|
percent={percent}
|
|
|
|
>
|
2022-05-16 15:03:21 +00:00
|
|
|
<div className="circle__mask circle__full">
|
|
|
|
<div className="circle__fill"></div>
|
|
|
|
</div>
|
|
|
|
<div className="circle__mask">
|
|
|
|
<div className="circle__fill"></div>
|
|
|
|
</div>
|
2020-11-18 14:09:48 +00:00
|
|
|
|
2022-05-16 15:03:21 +00:00
|
|
|
<StyledFloatingButton className="circle__background" color={color}>
|
|
|
|
<IconBox>
|
|
|
|
{icon == "upload" ? (
|
|
|
|
<ButtonUploadIcon />
|
|
|
|
) : icon == "file" ? (
|
|
|
|
<ButtonFileIcon />
|
|
|
|
) : icon == "trash" ? (
|
|
|
|
<ButtonTrashIcon />
|
|
|
|
) : icon == "move" ? (
|
|
|
|
<ButtonMoveIcon />
|
|
|
|
) : icon == "plus" ? (
|
|
|
|
<ButtonPlusIcon />
|
|
|
|
) : icon == "minus" ? (
|
|
|
|
<ButtonMinusIcon />
|
|
|
|
) : (
|
|
|
|
<ButtonDuplicateIcon />
|
|
|
|
)}
|
|
|
|
</IconBox>
|
|
|
|
<StyledAlertIcon>
|
|
|
|
{alert ? <StyledButtonAlertIcon size="medium" /> : <></>}
|
|
|
|
</StyledAlertIcon>
|
|
|
|
</StyledFloatingButton>
|
|
|
|
</StyledCircle>
|
|
|
|
</StyledCircleWrap>
|
2022-05-18 11:15:54 +00:00
|
|
|
{clearUploadedFilesHistory && percent === 100 && (
|
2022-05-18 08:22:18 +00:00
|
|
|
<CloseIcon
|
|
|
|
className="layout-progress-bar_close-icon"
|
|
|
|
onClick={onProgressClear}
|
|
|
|
/>
|
|
|
|
)}
|
2022-05-16 15:03:21 +00:00
|
|
|
</StyledFloatingButtonWrapper>
|
2020-11-16 11:47:30 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
FloatingButton.propTypes = {
|
|
|
|
id: PropTypes.string,
|
|
|
|
className: PropTypes.string,
|
|
|
|
style: PropTypes.object,
|
2022-01-31 13:40:43 +00:00
|
|
|
icon: PropTypes.oneOf([
|
|
|
|
"upload",
|
|
|
|
"file",
|
|
|
|
"trash",
|
|
|
|
"move",
|
|
|
|
"duplicate",
|
|
|
|
"plus",
|
|
|
|
"minus",
|
|
|
|
]),
|
2020-11-16 11:47:30 +00:00
|
|
|
alert: PropTypes.bool,
|
2020-11-16 15:49:54 +00:00
|
|
|
percent: PropTypes.number,
|
2021-01-19 11:14:15 +00:00
|
|
|
onClick: PropTypes.func,
|
2021-11-17 12:37:01 +00:00
|
|
|
color: PropTypes.string,
|
2020-11-16 11:47:30 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
FloatingButton.defaultProps = {
|
|
|
|
id: undefined,
|
|
|
|
className: undefined,
|
|
|
|
style: undefined,
|
2022-01-31 13:40:43 +00:00
|
|
|
icon: "upload",
|
2020-11-16 11:47:30 +00:00
|
|
|
alert: false,
|
2020-11-16 15:49:54 +00:00
|
|
|
percent: 0,
|
2020-11-16 11:47:30 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default FloatingButton;
|