From 7725d3dfbb62e39c7201683699b193c38ca9292a Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 30 Oct 2022 20:18:38 -0700
Subject: [PATCH] Add fileinput, popover

---
 src/renderer/components/input/index.tsx   | 37 +++++++++++++++++++++++
 src/renderer/components/popover/index.tsx | 29 ++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 src/renderer/components/popover/index.tsx

diff --git a/src/renderer/components/input/index.tsx b/src/renderer/components/input/index.tsx
index 356b042f9..d46c03c28 100644
--- a/src/renderer/components/input/index.tsx
+++ b/src/renderer/components/input/index.tsx
@@ -5,6 +5,8 @@ import {
   TextInputProps as MantineTextInputProps,
   PasswordInput as MantinePasswordInput,
   PasswordInputProps as MantinePasswordInputProps,
+  FileInput as MantineFileInput,
+  FileInputProps as MantineFileInputProps,
 } from '@mantine/core';
 
 interface TextInputProps extends MantineTextInputProps {
@@ -15,6 +17,10 @@ interface PasswordInputProps extends MantinePasswordInputProps {
   children?: React.ReactNode;
 }
 
+interface FileInputProps extends MantineFileInputProps {
+  children?: React.ReactNode;
+}
+
 const StyledTextInput = styled(MantineTextInput)<TextInputProps>`
   &:focus,
   &:focus-within {
@@ -69,6 +75,23 @@ const StyledPasswordInput = styled(MantinePasswordInput)<PasswordInputProps>`
   }
 `;
 
+const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
+  & .mantine-FileInput-input {
+    &:focus,
+    &:focus-within {
+      border-color: var(--primary-color);
+    }
+  }
+
+  & .mantine-FileInput-required {
+    color: var(--secondary-color);
+  }
+
+  & .mantine-FileInput-label {
+    font-family: var(--label-font-faimly);
+  }
+`;
+
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
   ({ children, ...props }: TextInputProps, ref) => {
     return (
@@ -89,6 +112,16 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
   }
 );
 
+export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
+  ({ children, ...props }: FileInputProps, ref) => {
+    return (
+      <StyledFileInput ref={ref} spellCheck={false} {...props}>
+        {children}
+      </StyledFileInput>
+    );
+  }
+);
+
 TextInput.defaultProps = {
   children: null,
 };
@@ -96,3 +129,7 @@ TextInput.defaultProps = {
 PasswordInput.defaultProps = {
   children: null,
 };
+
+FileInput.defaultProps = {
+  children: null,
+};
diff --git a/src/renderer/components/popover/index.tsx b/src/renderer/components/popover/index.tsx
new file mode 100644
index 000000000..3efbea1b3
--- /dev/null
+++ b/src/renderer/components/popover/index.tsx
@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+import {
+  Popover as MantinePopover,
+  PopoverProps as MantinePopoverProps,
+  PopoverDropdownProps as MantinePopoverDropdownProps,
+} from '@mantine/core';
+
+type PopoverProps = MantinePopoverProps;
+type PopoverDropdownProps = MantinePopoverDropdownProps;
+
+const StyledPopover = styled(MantinePopover)``;
+
+const StyledDropdown = styled(MantinePopover.Dropdown)<PopoverDropdownProps>`
+  padding: 0.5rem;
+  font-size: 0.9em;
+  font-family: var(--label-font-family);
+  background-color: var(--dropdown-menu-bg);
+
+  & .mantine-Menu-itemIcon {
+    margin-right: 0.5rem;
+  }
+`;
+
+export const Popover = ({ children, ...props }: PopoverProps) => {
+  return <StyledPopover {...props}>{children}</StyledPopover>;
+};
+
+Popover.Target = MantinePopover.Target;
+Popover.Dropdown = StyledDropdown;