2021-11-02 08:34:15 +00:00
|
|
|
import React, { useState, useRef, useEffect } from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import {
|
|
|
|
StyledFloatingButton,
|
|
|
|
StyledDropDown,
|
|
|
|
StyledDropDownItem,
|
|
|
|
StyledContainerAction,
|
|
|
|
StyledProgressBarContainer,
|
|
|
|
StyledMobileProgressBar,
|
|
|
|
StyledProgressContainer,
|
|
|
|
StyledBar,
|
|
|
|
StyledButtonWrapper,
|
|
|
|
StyledButtonOptions,
|
|
|
|
} from "./styled-main-button";
|
|
|
|
import IconButton from "../icon-button";
|
|
|
|
import Button from "../button";
|
|
|
|
import Text from "../text";
|
|
|
|
import Scrollbar from "@appserver/components/scrollbar";
|
2021-11-17 12:39:18 +00:00
|
|
|
import { isMobile, isTablet } from "react-device-detect";
|
2022-01-27 09:14:55 +00:00
|
|
|
import Backdrop from "../backdrop";
|
2021-11-02 08:34:15 +00:00
|
|
|
|
|
|
|
const ProgressBarMobile = ({
|
|
|
|
label,
|
|
|
|
status,
|
|
|
|
percent,
|
|
|
|
open,
|
|
|
|
onCancel,
|
|
|
|
icon,
|
2022-01-31 13:42:59 +00:00
|
|
|
onClickAction,
|
|
|
|
hideButton,
|
2021-11-19 09:34:01 +00:00
|
|
|
error,
|
2021-11-02 08:34:15 +00:00
|
|
|
}) => {
|
|
|
|
const uploadPercent = percent > 100 ? 100 : percent;
|
|
|
|
|
2022-01-31 13:42:59 +00:00
|
|
|
const onClickHeaderAction = () => {
|
|
|
|
onClickAction && onClickAction();
|
|
|
|
hideButton();
|
|
|
|
};
|
|
|
|
|
2021-11-02 08:34:15 +00:00
|
|
|
return (
|
|
|
|
<StyledProgressBarContainer isUploading={open}>
|
2022-01-27 09:14:55 +00:00
|
|
|
<Text
|
2022-01-31 13:42:59 +00:00
|
|
|
onClick={onClickHeaderAction}
|
2022-01-27 09:14:55 +00:00
|
|
|
className="progress-header"
|
|
|
|
fontSize={`14`}
|
2022-02-07 13:28:49 +00:00
|
|
|
// color="#657077"
|
2022-01-27 09:14:55 +00:00
|
|
|
>
|
2021-11-02 08:34:15 +00:00
|
|
|
{label}
|
|
|
|
</Text>
|
2022-02-07 13:28:49 +00:00
|
|
|
<Text className="progress_count" fontSize={`13`}>
|
2021-11-02 08:34:15 +00:00
|
|
|
{status}
|
|
|
|
</Text>
|
2022-02-07 13:28:49 +00:00
|
|
|
<IconButton
|
|
|
|
className="progress_icon"
|
|
|
|
onClick={onCancel}
|
|
|
|
iconName={icon}
|
|
|
|
size={14}
|
|
|
|
/>
|
2021-11-02 08:34:15 +00:00
|
|
|
<StyledMobileProgressBar>
|
2021-11-19 09:34:01 +00:00
|
|
|
<StyledBar uploadPercent={uploadPercent} error={error} />
|
2021-11-02 08:34:15 +00:00
|
|
|
</StyledMobileProgressBar>
|
|
|
|
</StyledProgressBarContainer>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
ProgressBarMobile.propTypes = {
|
|
|
|
label: PropTypes.string,
|
|
|
|
status: PropTypes.string,
|
|
|
|
percent: PropTypes.number,
|
|
|
|
open: PropTypes.bool,
|
|
|
|
onCancel: PropTypes.func,
|
|
|
|
icon: PropTypes.string,
|
|
|
|
/** The function that will be called after the progress header click */
|
2022-01-31 13:42:59 +00:00
|
|
|
onClickAction: PropTypes.func,
|
2022-02-07 13:28:49 +00:00
|
|
|
/** The function that hide button */
|
|
|
|
hideButton: PropTypes.func,
|
2021-11-19 09:34:01 +00:00
|
|
|
/** If true the progress bar changes color */
|
|
|
|
error: PropTypes.bool,
|
2021-11-02 08:34:15 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const MainButtonMobile = (props) => {
|
|
|
|
const {
|
|
|
|
className,
|
|
|
|
style,
|
|
|
|
opened,
|
|
|
|
onUploadClick,
|
|
|
|
actionOptions,
|
|
|
|
progressOptions,
|
|
|
|
buttonOptions,
|
|
|
|
percent,
|
|
|
|
title,
|
|
|
|
withButton,
|
|
|
|
manualWidth,
|
|
|
|
isOpenButton,
|
|
|
|
onClose,
|
2022-01-27 09:14:55 +00:00
|
|
|
sectionWidth,
|
2021-11-02 08:34:15 +00:00
|
|
|
} = props;
|
|
|
|
|
|
|
|
const [isOpen, setIsOpen] = useState(opened);
|
2022-01-27 09:14:55 +00:00
|
|
|
const [isUploading, setIsUploading] = useState(false);
|
2021-11-19 09:34:01 +00:00
|
|
|
const [height, setHeight] = useState("90vh");
|
|
|
|
|
|
|
|
const divRef = useRef();
|
2021-11-02 08:34:15 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (opened !== isOpen) {
|
|
|
|
setIsOpen(opened);
|
|
|
|
}
|
|
|
|
}, [opened]);
|
|
|
|
|
2021-11-19 09:34:01 +00:00
|
|
|
useEffect(() => {
|
2022-03-01 10:50:26 +00:00
|
|
|
let height =
|
|
|
|
divRef?.current?.getBoundingClientRect()?.height || window.innerHeight;
|
2021-11-19 09:34:01 +00:00
|
|
|
height >= window.innerHeight ? setHeight("90vh") : setHeight(height + "px");
|
2022-01-27 09:14:55 +00:00
|
|
|
}, [isOpen, isOpenButton, window.innerHeight, isUploading]);
|
2021-11-19 09:34:01 +00:00
|
|
|
|
2021-11-02 08:34:15 +00:00
|
|
|
const ref = useRef();
|
|
|
|
|
|
|
|
const dropDownRef = useRef();
|
|
|
|
|
|
|
|
const toggle = (isOpen) => {
|
2022-01-27 09:14:55 +00:00
|
|
|
if (isOpenButton && onClose) {
|
2021-11-19 09:34:01 +00:00
|
|
|
onClose();
|
|
|
|
}
|
2022-01-31 13:42:59 +00:00
|
|
|
|
2021-11-02 08:34:15 +00:00
|
|
|
return setIsOpen(isOpen);
|
|
|
|
};
|
|
|
|
|
|
|
|
const onMainButtonClick = (e) => {
|
|
|
|
if (isOpen && ref.current.contains(e.target)) return;
|
|
|
|
toggle(!isOpen);
|
|
|
|
};
|
|
|
|
|
|
|
|
const outsideClick = (e) => {
|
|
|
|
if (isOpen && ref.current.contains(e.target)) return;
|
|
|
|
toggle(false);
|
|
|
|
};
|
|
|
|
|
2022-01-27 09:14:55 +00:00
|
|
|
React.useEffect(() => {
|
2022-02-08 09:04:09 +00:00
|
|
|
if (progressOptions) {
|
|
|
|
const openProgressOptions = progressOptions.filter(
|
|
|
|
(option) => option.open
|
|
|
|
);
|
2022-01-27 09:14:55 +00:00
|
|
|
|
2022-02-08 09:04:09 +00:00
|
|
|
setIsUploading(openProgressOptions.length > 0);
|
|
|
|
}
|
2022-01-27 09:14:55 +00:00
|
|
|
}, [progressOptions]);
|
2021-11-02 08:34:15 +00:00
|
|
|
|
2021-11-17 12:39:18 +00:00
|
|
|
const renderItems = () => {
|
2021-11-02 08:34:15 +00:00
|
|
|
return (
|
2021-11-19 09:34:01 +00:00
|
|
|
<div ref={divRef}>
|
2021-11-02 08:34:15 +00:00
|
|
|
<StyledContainerAction>
|
2022-01-27 09:14:55 +00:00
|
|
|
{actionOptions.map((option) => {
|
|
|
|
const optionOnClickAction = () => {
|
|
|
|
toggle(false);
|
|
|
|
option.onClick && option.onClick({ action: option.action });
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<StyledDropDownItem
|
|
|
|
key={option.key}
|
|
|
|
label={option.label}
|
2022-02-08 09:04:09 +00:00
|
|
|
className={`${option.className} ${
|
|
|
|
option.isSeparator && "is-separator"
|
|
|
|
}`}
|
2022-01-27 09:14:55 +00:00
|
|
|
onClick={optionOnClickAction}
|
|
|
|
icon={option.icon ? option.icon : ""}
|
|
|
|
action={option.action}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
})}
|
2021-11-02 08:34:15 +00:00
|
|
|
</StyledContainerAction>
|
|
|
|
<StyledProgressContainer
|
2022-01-27 09:14:55 +00:00
|
|
|
isUploading={isUploading}
|
2021-11-02 08:34:15 +00:00
|
|
|
isOpenButton={isOpenButton}
|
|
|
|
>
|
|
|
|
{progressOptions &&
|
|
|
|
progressOptions.map((option) => (
|
|
|
|
<ProgressBarMobile
|
|
|
|
key={option.key}
|
|
|
|
label={option.label}
|
|
|
|
icon={option.icon}
|
|
|
|
className={option.className}
|
|
|
|
percent={option.percent}
|
|
|
|
status={option.status}
|
|
|
|
open={option.open}
|
|
|
|
onCancel={option.onCancel}
|
2022-01-31 13:42:59 +00:00
|
|
|
onClickAction={option.onClick}
|
|
|
|
hideButton={() => toggle(false)}
|
2021-11-19 09:34:01 +00:00
|
|
|
error={option.error}
|
2021-11-02 08:34:15 +00:00
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</StyledProgressContainer>
|
|
|
|
<StyledButtonOptions isOpenButton={isOpenButton}>
|
|
|
|
{isOpenButton && buttonOptions
|
|
|
|
? buttonOptions.map((option) =>
|
|
|
|
option.isSeparator ? (
|
|
|
|
<div key={option.key} className="separator-wrapper">
|
|
|
|
<div className="is-separator" />
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<StyledDropDownItem
|
|
|
|
className={`drop-down-item-button ${
|
|
|
|
option.isSeparator ? "is-separator" : ""
|
|
|
|
}`}
|
|
|
|
key={option.key}
|
|
|
|
label={option.label}
|
|
|
|
onClick={option.onClick}
|
|
|
|
icon={option.icon ? option.icon : ""}
|
2022-01-27 09:14:55 +00:00
|
|
|
action={option.action}
|
2021-11-02 08:34:15 +00:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
: ""}
|
|
|
|
</StyledButtonOptions>
|
|
|
|
{withButton && (
|
|
|
|
<StyledButtonWrapper
|
2022-01-27 09:14:55 +00:00
|
|
|
isUploading={isUploading}
|
2021-11-02 08:34:15 +00:00
|
|
|
isOpenButton={isOpenButton}
|
|
|
|
>
|
|
|
|
<Button
|
|
|
|
label={title}
|
|
|
|
className="action-mobile-button"
|
|
|
|
primary
|
2022-03-11 10:41:20 +00:00
|
|
|
size="medium"
|
2021-11-02 08:34:15 +00:00
|
|
|
onClick={onUploadClick}
|
|
|
|
/>
|
|
|
|
</StyledButtonWrapper>
|
|
|
|
)}
|
2021-11-19 09:34:01 +00:00
|
|
|
</div>
|
2021-11-02 08:34:15 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2021-11-17 12:39:18 +00:00
|
|
|
const children = renderItems();
|
2021-11-02 08:34:15 +00:00
|
|
|
|
|
|
|
return (
|
2022-01-27 09:14:55 +00:00
|
|
|
<>
|
|
|
|
<Backdrop zIndex={200} visible={isOpen} onClick={outsideClick} />
|
|
|
|
<div ref={ref} className={className} style={{ zIndex: "201", ...style }}>
|
|
|
|
<StyledFloatingButton
|
|
|
|
icon={isOpen ? "minus" : "plus"}
|
|
|
|
isOpen={isOpen}
|
|
|
|
onClick={onMainButtonClick}
|
|
|
|
percent={percent}
|
|
|
|
/>
|
|
|
|
<StyledDropDown
|
|
|
|
open={isOpen}
|
|
|
|
withBackdrop={false}
|
|
|
|
manualWidth={manualWidth || "400px"}
|
|
|
|
directionY="top"
|
|
|
|
directionX="right"
|
|
|
|
isMobile={isMobile || isTablet}
|
|
|
|
heightProp={height}
|
|
|
|
sectionWidth={sectionWidth}
|
2022-03-05 13:56:50 +00:00
|
|
|
isDefaultMode={false}
|
2022-01-27 09:14:55 +00:00
|
|
|
>
|
|
|
|
{isMobile || isTablet ? (
|
|
|
|
<Scrollbar
|
|
|
|
scrollclass="section-scroll"
|
|
|
|
stype="mediumBlack"
|
|
|
|
ref={dropDownRef}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Scrollbar>
|
|
|
|
) : (
|
|
|
|
children
|
|
|
|
)}
|
|
|
|
</StyledDropDown>
|
|
|
|
</div>
|
|
|
|
</>
|
2021-11-02 08:34:15 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
MainButtonMobile.propTypes = {
|
|
|
|
/** Accepts css style */
|
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
|
|
/** Options for drop down items */
|
|
|
|
actionOptions: PropTypes.array.isRequired,
|
|
|
|
/** If you need display progress bar components */
|
|
|
|
progressOptions: PropTypes.array,
|
|
|
|
/** Menu that opens by clicking on the button */
|
|
|
|
buttonOptions: PropTypes.array,
|
|
|
|
/** The function that will be called after the button click */
|
|
|
|
onUploadClick: PropTypes.func,
|
|
|
|
/** Show button inside drop down */
|
|
|
|
withButton: PropTypes.bool,
|
|
|
|
/** The parameter that is used with buttonOptions is needed to open the menu by clicking on the button */
|
|
|
|
isOpenButton: PropTypes.bool,
|
|
|
|
/** The name of the button in the drop down */
|
|
|
|
title: PropTypes.string,
|
|
|
|
/** Loading indicator */
|
|
|
|
percent: PropTypes.number,
|
2022-01-27 09:14:55 +00:00
|
|
|
/** Section width */
|
|
|
|
sectionWidth: PropTypes.number,
|
2021-11-02 08:34:15 +00:00
|
|
|
/** Required if you need to specify the exact width of the drop down component */
|
|
|
|
manualWidth: PropTypes.string,
|
|
|
|
className: PropTypes.string,
|
|
|
|
/** Tells when the dropdown should be opened */
|
|
|
|
opened: PropTypes.bool,
|
2021-11-19 09:34:01 +00:00
|
|
|
/** If you need close drop down */
|
|
|
|
onClose: PropTypes.func,
|
2021-11-02 08:34:15 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default MainButtonMobile;
|