Merge pull request #4 from devklick/dev

Refactor FileBrowser popup, context menus for FSObjects

Author: devklick

src/common/keyCode.ts

@@ -0,0 +1,15 @@
+export const KeyCodes = {
+  Escape: "Escape",
+  Enter: "Enter",
+  NumpadEnter: "NumpadEnter",
+} as const;
+
+export const allKeyCodes = Object.values(KeyCodes);
+
+export type KeyCode = (typeof KeyCodes)[keyof typeof KeyCodes];
+
+export function isKeyCode(value: unknown): value is KeyCode {
+  return (
+    typeof value === "string" && Object.values<string>(KeyCodes).includes(value)
+  );
+}

…ponents/FullAppPrompt/FullAppPrompt.scss src/components/AppPopup/AppPopup.scsssrc/components/FullAppPrompt/FullAppPrompt.scss renamed to src/components/AppPopup/AppPopup.scss src/components/FullAppPrompt/FullAppPrompt.scss renamed to src/components/AppPopup/AppPopup.scss

@@ -1,12 +1,12 @@
-.full-app-prompt {
-  backdrop-filter: brightness(80%) blur(1px);
+.app-popup {
+  backdrop-filter: brightness(80%);
   position: fixed;
   z-index: 9999;
   display: flex;
   justify-content: center;
   align-items: center;
 
-  &-content {
+  &__content {
     width: 300px;
     display: flex;
     flex-direction: column;

src/components/AppPopup/AppPopup.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Rect } from "../../hooks/useDragToResize";
+import useDetectMouseDownOutside from "../../hooks/useDetectMouseDownOutside";
+import useSystemSettings from "../../stores/systemSettingsStore";
+
+import "./AppPopup.scss";
+
+interface AppPopupProps<Element extends HTMLElement> {
+  appRef: React.RefObject<Element>;
+  close: () => void;
+}
+
+function AppPopup<Element extends HTMLElement>({
+  appRef,
+  children,
+  close,
+}: React.PropsWithChildren<AppPopupProps<Element>>) {
+  const thisRef = useRef<HTMLDivElement>(null);
+  const settings = useSystemSettings();
+  const [rect, setRect] = useState<Rect>({
+    height: 0,
+    left: 0,
+    top: 0,
+    width: 0,
+  });
+
+  useDetectMouseDownOutside({ elementRef: thisRef, onMouseDown: close });
+
+  useEffect(() => {
+    if (appRef.current) {
+      const bounds = appRef.current.getBoundingClientRect();
+      setRect({
+        height: bounds.height ?? 0,
+        left: bounds.left ?? 0,
+        top: bounds.top ?? 0,
+        width: bounds.width ?? 0,
+      });
+    }
+  }, [appRef]);
+
+  function handleContextMenu(e: React.MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
+  return (
+    <div
+      className="app-popup"
+      ref={thisRef}
+      style={{ ...rect }}
+      onContextMenu={handleContextMenu}
+      onClick={(e) => e.stopPropagation()}
+      onDoubleClick={(e) => e.stopPropagation()}
+    >
+      <div
+        className="app-popup__content"
+        style={{ backgroundColor: settings.mainColor }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default AppPopup;

src/components/AppPopup/index.ts

@@ -0,0 +1,3 @@
+import AppPopup from "./AppPopup";
+
+export default AppPopup;

src/components/Box/Box.scss

@@ -0,0 +1,30 @@
+import "./Box.scss";
+
+interface BoxProps {
+  flow?: "horizontal" | "vertical";
+  gap?: number;
+}
+
+function Box({
+  flow = "vertical",
+  gap = 10,
+  children,
+}: React.PropsWithChildren<BoxProps>) {
+  return (
+    <div
+      className="box"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        flexDirection: flow == "horizontal" ? "row" : "column",
+        gap,
+        padding: gap,
+        boxSizing: "border-box",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Box;

src/components/Box/Box.tsx

@@ -0,0 +1,3 @@
+import Box from "./Box";
+
+export default Box;

src/components/Box/index.ts

@@ -0,0 +1,16 @@
+import "./Button.scss";
+
+interface ButtonProps {
+  name: string;
+  onClick: () => void;
+  width?: string | number;
+}
+
+function Button({ name, width = "100%", onClick }: ButtonProps) {
+  return (
+    <button style={{ width }} onClick={onClick}>
+      {name}
+    </button>
+  );
+}
+export default Button;

src/components/Button/Button.scss

@@ -0,0 +1,2 @@
+import Button from "./Button";
+export default Button;