themable selected items

jitunayak · Nov 28, 2022 · b99e349 · b99e349
1 parent ad17531
commit b99e349
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 5 deletions.
diff --git a/public/snapshot2.jpeg b/public/snapshot2.jpeg
diff --git a/public/snapshot2.png b/public/snapshot2.png
diff --git a/src/components/MultiSelect.tsx b/src/components/MultiSelect.tsx
@@ -5,11 +5,10 @@ export type Item = { label: string; key: string };
 export type IProps = {
   placeholder?: string;
   list: Item[];
-  //   selectedItems: Item[];
-  //   setselectedItems: any;
   selectedItems: Item[];
   setSelectedItems: any;
   enableSearch?: boolean;
+  colorSelectedItem?: { border: string; background: string };
 };
 
 function MultiSelect({
@@ -23,18 +22,17 @@ function MultiSelect({
   selectedItems,
   setSelectedItems: setselectedItems,
   enableSearch = true,
+  colorSelectedItem = { border: "red", background: "rgb(254 242 242)" },
 }: IProps) {
-  //   const [selectedItems, setselectedItems] = useState<Item[]>([]);
   const [showDropDownBox, setshowDropDownBox] = useState(false);
   const [filtertext, setFiltertext] = useState("");
   const [allItem, setAllItem] = useState(list);
+
   const handleAddItem = (itemToBeAdded: Item) => {
     const doesItemAlreadyExist = selectedItems.find(
       (item) => item.key === itemToBeAdded.key
     );
-
     if (doesItemAlreadyExist) return;
-
     setselectedItems([...selectedItems, itemToBeAdded]);
   };
 
@@ -50,6 +48,10 @@ function MultiSelect({
         {selectedItems.length === 0 && (
           <div
             className="selectedItem"
+            style={{
+              borderColor: `${colorSelectedItem.border}`,
+              backgroundColor: `${colorSelectedItem.background}`,
+            }}
             onClick={() => setshowDropDownBox(!showDropDownBox)}
           >
             {placeholder} ...{" "}
@@ -59,6 +61,10 @@ function MultiSelect({
           <div
             key={item.key}
             className="selectedItem"
+            style={{
+              borderColor: `${colorSelectedItem.border}`,
+              backgroundColor: `${colorSelectedItem.background}`,
+            }}
             onClick={() => handleRemoveItem(item)}
           >
             {item.label} ｘ{" "}

diff --git a/src/components/README.md b/src/components/README.md
@@ -39,3 +39,26 @@ yarn add slick-react-multiselect-dropdown # yarn
         setSelectedItems={setSelectedItem}
     />
 ```
+
+## 💄 Themable
+
+color values for selected Items could be in all css accepted formats. such as `#cece` `rgb(254 242 242)` `green`
+
+```ts
+
+  const colorSelectedItem = {
+    { border: "red", background: "rgb(254 242 242)" }
+  }
+
+   <MultiSelect
+        placeholder="Select from list"
+        list= {listItems}
+        selectedItems= {selectedItem}
+        setSelectedItems= {setSelectedItem}
+        colorSelectedItem= {colorSelectedItem}
+    />
+```
+
+## Result
+
+!["demo snapshot"](https://github.com/jitunayak/slick-react-multiselect-dropdown/blob/main/public/snapshot2.jpeg?raw=true)