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";
import { isMobile, isTablet } from "react-device-detect";
import Backdrop from "../backdrop";
const ProgressBarMobile = ({
label,
status,
percent,
open,
onCancel,
icon,
onClickAction,
hideButton,
error,
}) => {
const uploadPercent = percent > 100 ? 100 : percent;
const onClickHeaderAction = () => {
onClickAction && onClickAction();
hideButton();
};
return (
{label}
{status}
);
};
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 */
onClickAction: PropTypes.func,
/** The function that hide button */
hideButton: PropTypes.func,
/** If true the progress bar changes color */
error: PropTypes.bool,
};
const MainButtonMobile = (props) => {
const {
className,
style,
opened,
onUploadClick,
actionOptions,
progressOptions,
buttonOptions,
percent,
title,
withButton,
manualWidth,
isOpenButton,
onClose,
sectionWidth,
} = props;
const [isOpen, setIsOpen] = useState(opened);
const [isUploading, setIsUploading] = useState(false);
const [height, setHeight] = useState("90vh");
const divRef = useRef();
useEffect(() => {
if (opened !== isOpen) {
setIsOpen(opened);
}
}, [opened]);
useEffect(() => {
let height =
divRef?.current?.getBoundingClientRect()?.height || window.innerHeight;
height >= window.innerHeight ? setHeight("90vh") : setHeight(height + "px");
}, [isOpen, isOpenButton, window.innerHeight, isUploading]);
const ref = useRef();
const dropDownRef = useRef();
const toggle = (isOpen) => {
if (isOpenButton && onClose) {
onClose();
}
return setIsOpen(isOpen);
};
const onMainButtonClick = (e) => {
toggle(!isOpen);
};
const outsideClick = (e) => {
if (isOpen && ref.current.contains(e.target)) return;
toggle(false);
};
React.useEffect(() => {
if (progressOptions) {
const openProgressOptions = progressOptions.filter(
(option) => option.open
);
setIsUploading(openProgressOptions.length > 0);
}
}, [progressOptions]);
const renderItems = () => {
return (
{actionOptions.map((option) => {
const optionOnClickAction = () => {
toggle(false);
option.onClick && option.onClick({ action: option.action });
};
return (
);
})}
{progressOptions &&
progressOptions.map((option) => (
toggle(false)}
error={option.error}
/>
))}
{buttonOptions
? buttonOptions.map((option) =>
option.isSeparator ? (
) : (
)
)
: ""}
);
};
const children = renderItems();
return (
<>
{isMobile || isTablet ? (
{children}
) : (
children
)}
>
);
};
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,
/** Section width */
sectionWidth: PropTypes.number,
/** 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,
/** If you need close drop down */
onClose: PropTypes.func,
};
export default MainButtonMobile;