Merge pull request #87 from nuxxapp/feat/scroll-view

Implement scroll view

services/frontend/src/components/Modal/network/CreateNetworkModal.tsx

@@ -7,6 +7,7 @@ import { getInitialValues, tabs, validationSchema } from "./form-utils";
 import { classNames } from "../../../utils/styles";
 import { Button, styled } from "@mui/joy";
 import { reportErrorsAndSubmit } from "../../../utils/forms";
+import { ScrollView } from "../../ScrollView";
 
 interface ICreateNetworkModalProps {
   onCreateNetwork: CallbackFunction;
@@ -64,10 +65,10 @@ const CreateNetworkModal: FunctionComponent<ICreateNetworkModalProps> = (
             </nav>
           </div>
 
-          <div className="relative px-4 py-3 flex-auto">
+          <ScrollView height="500px" className="relative px-4 py-3 flex-auto">
             {openTab === "General" && <General />}
             {openTab === "IPAM" && <IPAM />}
-          </div>
+          </ScrollView>
 
           <Actions>
             <Button

services/frontend/src/components/Modal/network/EditNetworkModal.tsx

@@ -7,6 +7,7 @@ import { getInitialValues, tabs, validationSchema } from "./form-utils";
 import { classNames } from "../../../utils/styles";
 import { Button, styled } from "@mui/joy";
 import { reportErrorsAndSubmit } from "../../../utils/forms";
+import { ScrollView } from "../../ScrollView";
 
 interface IEditNetworkModalProps {
   onUpdateNetwork: CallbackFunction;
@@ -63,10 +64,13 @@ const EditNetworkModal = (props: IEditNetworkModalProps) => {
             </nav>
           </div>
 
-          <div className="relative px-4 py-3 flex-auto max-h-96 overflow-y-auto">
+          <ScrollView
+            height="500px"
+            className="relative px-4 py-3 flex-auto max-h-96 overflow-y-auto"
+          >
             {openTab === "General" && <General />}
             {openTab === "IPAM" && <IPAM />}
-          </div>
+          </ScrollView>
 
           <Actions>
             <Button

services/frontend/src/components/ScrollView.tsx

@@ -0,0 +1,46 @@
+import { styled } from "@mui/joy";
+import { FunctionComponent, HTMLProps, ReactElement, ReactNode } from "react";
+
+export interface IScrollViewProps extends HTMLProps<HTMLDivElement> {
+  children: ReactNode;
+  height: string;
+}
+
+interface IRootProps extends HTMLProps<HTMLDivElement> {
+  fixedHeight: string;
+}
+
+const Root = styled("div", {
+  shouldForwardProp: (propName) => propName !== "height"
+})<IRootProps>`
+  overflow: auto;
+  height: ${({ height }) => height};
+
+  ::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #999;
+    border: #aaa;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+` as any;
+
+export const ScrollView: FunctionComponent<IScrollViewProps> = (
+  props: IScrollViewProps
+): ReactElement => {
+  const { height, children, ...otherProps } = props;
+  return (
+    <Root height={height} {...otherProps}>
+      {children}
+    </Root>
+  );
+};