TASK-121 buttons dropdown

src/assets/styles/styles-all.scss

@@ -32,3 +32,4 @@
 @import "styles/custom/route-buttons.module";
 @import "styles/custom/body";
 @import "styles/custom/span-errors";
+@import "styles/custom/dropdown";

src/assets/styles/styles/custom/_dropdown.scss

@@ -0,0 +1,44 @@
+.dropdown-buttons-container {
+  background-color: white;
+  mix-blend-mode: multiply;
+  overflow: hidden;
+  border-bottom-left-radius: $btn-border-radius;
+  border-bottom-right-radius: $btn-border-radius;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  box-shadow: 0 2.8px 2.2px $gray-400, 0 6.7px 5.3px $gray-400;
+  position: relative;
+  top: -63px;
+  right: -10px;
+  padding-bottom: 10px;
+  padding-top: 25px;
+  max-width: 119px;
+
+  button {
+    width: 100%;
+    text-align: left;
+    border-radius: 0px;
+    &:hover {
+      cursor: pointer;
+      font-weight: 600;
+      box-shadow: 0px 0px;
+    }
+    float: left;
+    clear: left;
+    margin-left: 7px;
+    padding: 5px 7px 5px;
+    line-height: 20px;
+    background-color: white;
+    color: $primary;
+  }
+}
+
+.display-main-button {
+  position: relative;
+  top: -43px;
+}
+
+.display-main-button-outlined {
+  position: relative;
+  top: -45px;
+}

src/components/common-components/button-component/button.component.tsx

@@ -1,8 +1,9 @@
 import { ButtonProps } from "@material-ui/core";
 import React, { Ref } from "react";
 
+export type ButtonVariant = "primary" | "secondary" | "outlined" | "circle-outlined";
 export type ButtonOptions = Omit<ButtonProps, "variant"> & {
-  variant?: "primary" | "secondary" | "outlined" | "circle-outlined";
+  variant?: ButtonVariant;
 };
 
 export const Button = React.forwardRef(

src/components/common-components/dropdown-buttons/dropdown-buttons.component.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useRef } from "react";
+import { Button, ButtonVariant } from "../button-component/button.component";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
+import Popper from "@material-ui/core/Popper";
+
+export interface ButtonData {
+  label: string;
+  action: () => void;
+}
+
+interface DropdownOptions {
+  buttons: ButtonData[];
+  mainLabel: string;
+  variant?: ButtonVariant;
+}
+
+export function DropdownButtons({ buttons, mainLabel, variant }: DropdownOptions): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+
+  function handleToggle(): void {
+    setOpen((prevVal) => !prevVal);
+  }
+
+  function handleClickAway(): void {
+    setOpen(false);
+  }
+
+  return (
+    <div>
+      <Button variant={variant} onClick={handleToggle} ref={anchorRef}>
+        {mainLabel}
+        <ArrowDropDownIcon />
+      </Button>
+      <Popper open={open} placement="bottom" anchorEl={anchorRef.current}>
+        <div
+          className={`${
+            variant === "outlined" ? "display-main-button-outlined" : "display-main-button"
+          }`}
+        >
+          <Button variant={variant}>
+            {mainLabel}
+            <ArrowDropDownIcon />
+          </Button>
+        </div>
+        <ClickAwayListener onClickAway={handleClickAway}>
+          <div className="dropdown-buttons-container">
+            {buttons.map((item) => (
+              <Button onClick={item.action}>{item.label}</Button>
+            ))}
+          </div>
+        </ClickAwayListener>
+      </Popper>
+    </div>
+  );
+}

src/components/schedule-page/import-buttons/import-buttons.component.tsx

@@ -1,8 +1,4 @@
-import ButtonGroup from "@material-ui/core/ButtonGroup";
-import ClickAwayListener from "@material-ui/core/ClickAwayListener";
-import Popper from "@material-ui/core/Popper";
-import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
-import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import React, { ChangeEvent, useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useScheduleConverter } from "./hooks/use-schedule-converter";
 import { ActionModel } from "../../../state/models/action.model";
@@ -12,20 +8,26 @@ import { ScheduleError } from "../../../common-models/schedule-error.model";
 import { ScheduleDataActionType } from "../../../state/reducers/schedule-data.reducer";
 import { ScheduleErrorActionType } from "../../../state/reducers/schedule-errors.reducer";
 import { ScheduleExportLogic } from "../../../logic/schedule-exporter/schedule-export.logic";
-import { Button } from "../../common-components";
+import {
+  ButtonData,
+  DropdownButtons,
+} from "../../common-components/dropdown-buttons/dropdown-buttons.component";
 
 export function ImportButtonsComponent(): JSX.Element {
   const DEFAULT_FILENAME = "grafik.xlsx";
-  const [open, setOpen] = useState(false);
   const { scheduleModel, setSrcFile, scheduleErrors, errorOccurred } = useScheduleConverter();
-  const anchorRef = useRef(null);
   const fileUpload = useRef<HTMLInputElement>(null);
 
   const stateScheduleModel = useSelector(
     (state: ApplicationStateModel) => state.scheduleData?.present
   );
   const scheduleDipatcher = useDispatch();
 
+  const btnData1: ButtonData = { label: "Wczytaj", action: () => fileUpload.current?.click() };
+  const btnData2: ButtonData = { label: "Zapisz jako...", action: (): void => handleExport() };
+
+  const btnData = [btnData1, btnData2];
+
   useEffect(() => {
     if (scheduleModel) {
       scheduleDipatcher({
@@ -55,39 +57,18 @@ export function ImportButtonsComponent(): JSX.Element {
     }
   }
 
-  function handleToggle(): void {
-    setOpen((prevVal) => !prevVal);
-  }
-
   return (
     <div>
-      <Button variant="outlined" onClick={handleToggle} ref={anchorRef}>
-        Plik
-        <ArrowDropDownIcon />
-      </Button>
-      <Popper open={open} anchorEl={anchorRef.current}>
-        <ClickAwayListener
-          onClickAway={(): void => {
-            setOpen(false);
-          }}
-        >
-          <ButtonGroup orientation="vertical">
-            <Button onClick={(): void => fileUpload.current?.click()}>
-              Wczytaj
-              <input
-                ref={fileUpload}
-                id="file-input"
-                data-cy="file-input"
-                onChange={(event): void => handleImport(event)}
-                style={{ display: "none" }}
-                type="file"
-                accept=".xlsx"
-              />
-            </Button>
-            <Button onClick={(): void => handleExport()}>Zapisz jako...</Button>
-          </ButtonGroup>
-        </ClickAwayListener>
-      </Popper>
+      <DropdownButtons buttons={btnData} mainLabel="Plik" variant="primary" />
+      <input
+        ref={fileUpload}
+        id="file-input"
+        data-cy="file-input"
+        onChange={(event): void => handleImport(event)}
+        style={{ display: "none" }}
+        type="file"
+        accept=".xlsx"
+      />
     </div>
   );
 }