w.i.p. Multiple selection and subtraction

melihsahtulek · Jun 22, 2023 · 1cda885 · 1cda885
1 parent d9c348e
commit 1cda885
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 11 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,7 +1,7 @@
 {
   "semi": true,
   "tabWidth": 2,
-  "printWidth": 100,
+  "printWidth": 120,
   "singleQuote": true,
   "trailingComma": "none",
   "jsxBracketSameLine": true,

diff --git a/src/components/MultiSelect/index.tsx b/src/components/MultiSelect/index.tsx
@@ -1,10 +1,11 @@
-import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import styles from '@/components/MultiSelect/multi-select.module.css';
 
 export const MultiSelectContext = createContext<any>(null);
 
-function SelectButton() {
-  const { setSearchValue, selectedItems, setSelectedItems } = useContext(MultiSelectContext);
+const SelectButton = () => {
+  const { searchValue, setSearchValue, selectedItems, setSelectedItems, filtered, optionList, setOptionList, ref } =
+    useContext(MultiSelectContext);
   const [inputFocus, setInputFocus] = useState(false);
 
   return (
@@ -16,15 +17,30 @@ function SelectButton() {
       }}>
       <div className={styles.selected_items}>
         {selectedItems?.map((item: Option, index: number) => (
-          <span key={index} className={styles.selected_item} onClick={() => {}}>
+          <span
+            key={index}
+            className={styles.selected_item}
+            onClick={(e) => {
+              e.preventDefault();
+              const unselectItemIndex = selectedItems.findIndex((elem: Option) => elem.value === item.value);
+              if (unselectItemIndex > -1) {
+                const copyArr = [...selectedItems];
+                const elem = copyArr.splice(unselectItemIndex, 1);
+                setSelectedItems(copyArr);
+                setOptionList([...optionList, ...elem]);
+                ref.current.focus();
+              }
+            }}>
             {item.label}
           </span>
         ))}
       </div>
       <input
+        ref={ref}
         id="search_inp"
         type="text"
         autoFocus={true}
+        value={searchValue}
         onFocus={() => {
           setInputFocus(true);
         }}
@@ -38,15 +54,14 @@ function SelectButton() {
       />
     </label>
   );
-}
+};
 
 function SelectBody() {
-  const { optionList, setOptionList, filtered, selectedItems, setSelectedItems } =
+  const { optionList, setOptionList, filtered, selectedItems, setSelectedItems, setSearchValue, ref } =
     useContext(MultiSelectContext);
 
-  console.log('filtered body', filtered);
-  if (filtered.length === 0) {
-    return <div>Bitti</div>;
+  if (!(filtered.length > 0)) {
+    return <div className={styles.noItemAreThere}>No Data...</div>;
   }
 
   return (
@@ -63,6 +78,8 @@ function SelectBody() {
               const copyArr = [...filtered];
               copyArr.splice(itemIndex, 1);
               setOptionList(copyArr);
+              setSearchValue('');
+              ref.current.focus();
             }
           }}>
           {item.label}
@@ -85,6 +102,7 @@ type MultiSelectProps = {
 };
 
 export default function MultiSelect({ options }: MultiSelectProps) {
+  const ref = useRef(null);
   const [selectIsOpen, setSelectIsOpen] = useState<boolean>(false);
   const [optionList, setOptionList] = useState<Option[]>(options);
 
@@ -109,7 +127,8 @@ export default function MultiSelect({ options }: MultiSelectProps) {
         setSearchValue,
         filtered,
         selectedItems,
-        setSelectedItems
+        setSelectedItems,
+        ref
       }}>
       <div className={styles.container}>
         <SelectButton />

diff --git a/src/components/MultiSelect/multi-select.module.css b/src/components/MultiSelect/multi-select.module.css
@@ -6,6 +6,7 @@
   --gray-300: #d1d5db;
   --gray-900: #030712;
   --blue: #1d4ed8;
+  --red: #dc2626;
 }
 
 .container {
@@ -40,6 +41,10 @@
   gap: 5px;
 }
 
+.selected_item:hover {
+  cursor: pointer;
+}
+
 .selected_item {
   background-color: var(--gray-100);
   border: 1px solid var(--gray-900);
@@ -87,3 +92,13 @@
   background-color: var(--blue);
   color: var(--white);
 }
+
+.noItemAreThere {
+  background-color: var(--red);
+  color: var(--white);
+  padding: 0.5rem;
+  text-align: center;
+  margin-top: 10px;
+  border-radius: 3px;
+  font-weight: 600;
+}