2021-11-02 08:34:15 +00:00
|
|
|
import React from "react";
|
2023-06-26 12:24:25 +00:00
|
|
|
import styled, { css } from "styled-components";
|
2021-11-02 08:34:15 +00:00
|
|
|
import MainButtonMobile from ".";
|
|
|
|
import { useEffect, useReducer, useState } from "react";
|
2023-01-27 14:08:30 +00:00
|
|
|
import MobileActionsFolderReactSvgUrl from "PUBLIC_DIR/images/mobile.actions.folder.react.svg?url";
|
|
|
|
import MobileActionsRemoveReactSvgUrl from "PUBLIC_DIR/images/mobile.actions.remove.react.svg?url";
|
|
|
|
import MobileStartReactSvgUrl from "PUBLIC_DIR/images/mobile.star.react.svg?url";
|
2023-07-17 12:57:33 +00:00
|
|
|
import { useTheme } from "styled-components";
|
2023-05-31 08:55:27 +00:00
|
|
|
import MobileMainButtonDocs from "./main-button-mobile-docs.mdx";
|
|
|
|
|
2021-11-02 08:34:15 +00:00
|
|
|
export default {
|
|
|
|
title: "Components/MainButtonMobile",
|
|
|
|
component: MainButtonMobile,
|
2023-05-31 08:55:27 +00:00
|
|
|
tags: ["autodocs"],
|
2021-11-18 09:10:58 +00:00
|
|
|
parameters: {
|
2023-05-31 08:55:27 +00:00
|
|
|
docs: {
|
|
|
|
page: MobileMainButtonDocs,
|
|
|
|
},
|
2021-11-18 09:10:58 +00:00
|
|
|
},
|
2021-11-02 08:34:15 +00:00
|
|
|
};
|
|
|
|
|
2023-05-31 08:55:27 +00:00
|
|
|
const actionOptions = [
|
|
|
|
{
|
|
|
|
key: "1",
|
|
|
|
label: "New document",
|
|
|
|
icon: MobileActionsFolderReactSvgUrl,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "2",
|
|
|
|
label: "New presentation",
|
|
|
|
icon: MobileActionsFolderReactSvgUrl,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "3",
|
|
|
|
label: "New spreadsheet",
|
|
|
|
icon: MobileActionsFolderReactSvgUrl,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "4",
|
|
|
|
label: "New folder",
|
|
|
|
icon: MobileActionsFolderReactSvgUrl,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const buttonOptions = [
|
|
|
|
{
|
|
|
|
key: "1",
|
|
|
|
label: "Import point",
|
|
|
|
icon: MobileStartReactSvgUrl,
|
|
|
|
onClick: () => setIsOpenButton(false),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "2",
|
|
|
|
label: "Import point",
|
|
|
|
icon: MobileStartReactSvgUrl,
|
|
|
|
onClick: () => setIsOpenButton(false),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "3",
|
|
|
|
label: "Import point",
|
|
|
|
isSeparator: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "4",
|
|
|
|
label: "Import point",
|
|
|
|
icon: MobileStartReactSvgUrl,
|
|
|
|
onClick: () => setIsOpenButton(false),
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
2023-06-26 12:24:25 +00:00
|
|
|
const StyledWrapper = styled.div`
|
|
|
|
width: 500px;
|
|
|
|
height: 600px;
|
|
|
|
|
|
|
|
${(props) =>
|
|
|
|
props.isAutoDocs &&
|
|
|
|
css`
|
|
|
|
width: calc(100% + 40px);
|
|
|
|
height: 500px;
|
|
|
|
position: relative;
|
|
|
|
margin: 0 0 -20px -20px;
|
|
|
|
`}
|
|
|
|
|
|
|
|
${(props) =>
|
|
|
|
props.isMobile &&
|
|
|
|
css`
|
|
|
|
.mainBtnDropdown {
|
|
|
|
right: 5px !important;
|
|
|
|
bottom: 5px !important;
|
|
|
|
}
|
|
|
|
`}
|
|
|
|
`;
|
|
|
|
|
2021-11-18 09:10:58 +00:00
|
|
|
const Template = ({ ...args }) => {
|
2021-11-02 08:34:15 +00:00
|
|
|
const maxUploads = 10;
|
|
|
|
const maxOperations = 7;
|
|
|
|
|
|
|
|
const [isOpenUploads, setIsOpenUploads] = useState(false);
|
|
|
|
const [isOpenOperations, setIsOpenOperations] = useState(false);
|
|
|
|
|
|
|
|
const [isOpenButton, setIsOpenButton] = useState(false);
|
|
|
|
const [opened, setOpened] = useState(null);
|
|
|
|
|
|
|
|
const [isUploading, setIsUploading] = useState(false);
|
|
|
|
|
|
|
|
const [initialState, setInitialState] = useState({
|
|
|
|
uploads: 0,
|
|
|
|
operations: 0,
|
|
|
|
});
|
|
|
|
const onUploadClick = () => {
|
|
|
|
setInitialState({ uploads: 0, operations: 0 });
|
|
|
|
setIsUploading(true);
|
|
|
|
setIsOpenUploads(true);
|
|
|
|
setIsOpenOperations(true);
|
|
|
|
setIsOpenButton(true);
|
|
|
|
// setOpened(false);
|
|
|
|
};
|
|
|
|
|
|
|
|
function reducer(state, action) {
|
|
|
|
switch (action.type) {
|
|
|
|
case "start":
|
|
|
|
if (
|
|
|
|
state.uploads === maxUploads &&
|
|
|
|
state.operations === maxOperations
|
|
|
|
) {
|
|
|
|
setIsUploading(false);
|
|
|
|
return {
|
|
|
|
...state,
|
|
|
|
uploads: state.uploads,
|
|
|
|
operations: state.operations,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
...state,
|
|
|
|
uploads:
|
|
|
|
state.uploads !== maxUploads ? state.uploads + 1 : state.uploads,
|
|
|
|
operations:
|
|
|
|
state.operations !== maxOperations
|
|
|
|
? state.operations + 1
|
|
|
|
: state.operations,
|
|
|
|
};
|
|
|
|
default:
|
|
|
|
return state;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const [state, dispatch] = useReducer(reducer, initialState);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
setOpened(null);
|
|
|
|
if (isUploading) {
|
|
|
|
const id = setInterval(() => {
|
|
|
|
dispatch({ type: "start" });
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
return () => clearInterval(id);
|
|
|
|
}
|
|
|
|
}, [dispatch, isUploading]);
|
|
|
|
|
|
|
|
const uploadPercent = (state.uploads / maxUploads) * 100;
|
|
|
|
const operationPercent = (state.operations / maxOperations) * 100;
|
|
|
|
|
|
|
|
const progressOptions = [
|
|
|
|
{
|
|
|
|
key: "1",
|
|
|
|
label: "Uploads",
|
2023-01-16 12:47:16 +00:00
|
|
|
icon: MobileActionsRemoveReactSvgUrl,
|
2021-11-02 08:34:15 +00:00
|
|
|
percent: uploadPercent,
|
|
|
|
status: `${state.uploads}/${maxUploads}`,
|
|
|
|
open: isOpenUploads,
|
|
|
|
onCancel: () => setIsOpenUploads(false),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "2",
|
|
|
|
label: "Other operations",
|
2023-01-16 12:47:16 +00:00
|
|
|
icon: MobileActionsRemoveReactSvgUrl,
|
2021-11-02 08:34:15 +00:00
|
|
|
percent: operationPercent,
|
2021-11-19 09:34:01 +00:00
|
|
|
status: `3 files not loaded`,
|
2021-11-02 08:34:15 +00:00
|
|
|
open: isOpenOperations,
|
|
|
|
onCancel: () => setIsOpenOperations(false),
|
2021-11-19 09:34:01 +00:00
|
|
|
error: true,
|
2021-11-02 08:34:15 +00:00
|
|
|
},
|
|
|
|
];
|
|
|
|
|
2023-06-26 12:24:25 +00:00
|
|
|
const [isMobile, setIsMobile] = useState(window.innerWidth < 1245);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const handleResize = () => {
|
|
|
|
isMobile !== window.innerWidth && setIsMobile(window.innerWidth < 1025);
|
|
|
|
};
|
|
|
|
|
|
|
|
window.addEventListener("resize", handleResize);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
window.removeEventListener("resize", handleResize);
|
|
|
|
};
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const isAutoDocs =
|
|
|
|
typeof window !== "undefined" && window?.location?.href.includes("docs");
|
2023-07-17 12:57:33 +00:00
|
|
|
const { interfaceDirection } = useTheme();
|
|
|
|
const style = {
|
|
|
|
position: "absolute",
|
|
|
|
bottom: "26px",
|
|
|
|
[interfaceDirection === "rtl" ? "left" : "right"]: "44px",
|
|
|
|
};
|
|
|
|
const dropdownStyle = {
|
|
|
|
position: "absolute",
|
|
|
|
[interfaceDirection === "rtl" ? "left" : "right"]: "60px",
|
|
|
|
bottom: "25px",
|
|
|
|
};
|
2021-11-02 08:34:15 +00:00
|
|
|
return (
|
2023-06-26 12:24:25 +00:00
|
|
|
<StyledWrapper isAutoDocs={isAutoDocs} isMobile={isMobile}>
|
2023-05-31 08:55:27 +00:00
|
|
|
<MainButtonMobile
|
|
|
|
{...args}
|
2023-07-17 12:57:33 +00:00
|
|
|
style={style}
|
2023-05-31 08:55:27 +00:00
|
|
|
actionOptions={actionOptions}
|
2023-07-17 12:57:33 +00:00
|
|
|
dropdownStyle={dropdownStyle}
|
2023-05-31 08:55:27 +00:00
|
|
|
progressOptions={progressOptions}
|
|
|
|
buttonOptions={buttonOptions}
|
|
|
|
onUploadClick={onUploadClick}
|
|
|
|
withButton={true}
|
|
|
|
isOpenButton={isOpenButton}
|
|
|
|
isDefaultMode={false}
|
|
|
|
title="Upload"
|
|
|
|
percent={uploadPercent}
|
|
|
|
opened={opened}
|
|
|
|
/>
|
2023-06-26 12:24:25 +00:00
|
|
|
</StyledWrapper>
|
2021-11-02 08:34:15 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export const Default = Template.bind({});
|
2021-11-18 09:10:58 +00:00
|
|
|
Default.args = {
|
|
|
|
title: "Upload",
|
|
|
|
percent: 0,
|
|
|
|
opened: null,
|
|
|
|
};
|