From 4cb78bb6562c4d4db15e6946b8c81beb5f652cad Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 19 Nov 2022 20:26:24 -0800
Subject: [PATCH] Add multiselect component

---
 src/renderer/components/select/index.tsx | 78 ++++++++++++++++++++++++
 1 file changed, 78 insertions(+)

diff --git a/src/renderer/components/select/index.tsx b/src/renderer/components/select/index.tsx
index 907ef52fe..97762270d 100644
--- a/src/renderer/components/select/index.tsx
+++ b/src/renderer/components/select/index.tsx
@@ -1,6 +1,8 @@
 import {
   Select as MantineSelect,
   SelectProps as MantineSelectProps,
+  MultiSelect as MantineMultiSelect,
+  MultiSelectProps as MantineMultiSelectProps,
 } from '@mantine/core';
 import styled from 'styled-components';
 
@@ -9,6 +11,11 @@ interface SelectProps extends MantineSelectProps {
   width?: number | string;
 }
 
+interface MultiSelectProps extends MantineMultiSelectProps {
+  maxWidth?: number | string;
+  width?: number | string;
+}
+
 const StyledSelect = styled(MantineSelect)`
   & [data-selected='true'] {
     background: var(--input-select-bg);
@@ -68,7 +75,78 @@ export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
   );
 };
 
+const StyledMultiSelect = styled(MantineMultiSelect)`
+  & [data-selected='true'] {
+    background: var(--input-select-bg);
+  }
+
+  & .mantine-MultiSelect-disabled {
+    background: var(--input-select-bg);
+    opacity: 0.6;
+  }
+
+  & .mantine-MultiSelect-itemsWrapper {
+    & .mantine-Select-item {
+      padding: 40px;
+    }
+  }
+`;
+
+export const MultiSelect = ({
+  width,
+  maxWidth,
+  ...props
+}: MultiSelectProps) => {
+  return (
+    <StyledMultiSelect
+      withinPortal
+      styles={{
+        dropdown: {
+          background: 'var(--dropdown-menu-bg)',
+          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 20%))',
+        },
+        input: {
+          background: 'var(--input-bg)',
+          color: 'var(--input-fg)',
+        },
+        item: {
+          '&:hover': {
+            background: 'var(--dropdown-menu-bg-hover)',
+          },
+          '&[data-hovered]': {
+            background: 'var(--dropdown-menu-bg-hover)',
+          },
+          '&[data-selected="true"]': {
+            '&:hover': {
+              background: 'var(--dropdown-menu-bg-hover)',
+            },
+            background: 'none',
+            color: 'var(--primary-color)',
+          },
+          color: 'var(--dropdown-menu-fg)',
+          padding: '.5rem .1rem',
+        },
+        value: {
+          margin: '.2rem',
+          paddingBottom: '1rem',
+          paddingLeft: '1rem',
+          paddingTop: '1rem',
+        },
+      }}
+      sx={{ maxWidth, width }}
+      transition="pop"
+      transitionDuration={100}
+      {...props}
+    />
+  );
+};
+
 Select.defaultProps = {
   maxWidth: undefined,
   width: undefined,
 };
+
+MultiSelect.defaultProps = {
+  maxWidth: undefined,
+  width: undefined,
+};