♻️ return complete object as onChange

Author: harshzalavadiya

README.md

@@ -62,7 +62,7 @@ export default App;
 | --------------------- | --------------------------------- | ------------------ | ------- |
 | `labelledBy`          | value for `aria-labelledby`       | `string`           |         |
 | `options`             | options for dropdown              | `[{label, value}]` |         |
-| `selected`            | pre-selected rows                 | `[value]`          | `[]`    |
+| `selected`            | pre-selected rows                 | `[{label, value}]` | `[]`    |
 | `hasSelectAll`        | toggle 'Select All' option        | `boolean`          | `true`  |
 | `isLoading`           | show spinner on select            | `boolean`          | `false` |
 | `shouldToggleOnHover` | toggle dropdown on hover option   | `boolean`          | `false` |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-multi-select-component",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "Simple multiple selection dropdown component with checkboxes, search and select-al`",
   "author": "harshzalavadiya",
   "license": "MIT",

preview.gif

@@ -17,9 +17,9 @@ export interface IStyledProps {
 
 export interface ISelectProps {
   options: Option[];
-  selected: any[];
+  selected: Option[];
   onChange?;
-  valueRenderer?: (selected: any[], options: Option[]) => string;
+  valueRenderer?: (selected: Option[], options: Option[]) => string;
   ItemRenderer?: Function;
   selectAllLabel?: string;
   isLoading?: boolean;

src/lib/interfaces.ts

@@ -12,12 +12,7 @@ const DropdownHeader = ({
   const allSelected = selected.length === options.length;
   const customText = valueRenderer && valueRenderer(selected, options);
 
-  const getSelectedText = () => {
-    const selectedOptions = selected.map(s =>
-      options.find((o: any) => o.value === s)
-    );
-    return selectedOptions.map((s: any) => (s ? s.label : "")).join(", ");
-  };
+  const getSelectedText = () => selected.map(s => s.label).join(", ");
 
   if (noneSelected) {
     return (

src/multi-select/header.tsx

@@ -15,9 +15,9 @@ import SelectList from "./select-list";
 interface ISelectPanelProps {
   ItemRenderer?: Function;
   options: Option[];
-  selected: any[];
+  selected: Option[];
   selectAllLabel?: string;
-  onChange: (selected: Array<any>) => void;
+  onChange: (selected: Option[]) => void;
   disabled?: boolean;
   disableSearch?: boolean;
   hasSelectAll: boolean;
@@ -58,7 +58,7 @@ export const SelectPanel = (props: ISelectPanelProps) => {
     value: ""
   };
 
-  const selectAll = () => onChange(options.map(o => o.value));
+  const selectAll = () => onChange(options);
 
   const selectNone = () => onChange([]);
 

src/select-panel/index.tsx

@@ -56,7 +56,6 @@ const SelectItem = ({
 
   const updateFocus = () => {
     if (focused && itemRef) {
-      console.log(itemRef);
       itemRef.current.focus();
     }
   };

src/select-panel/select-item.tsx

@@ -10,9 +10,9 @@ import SelectItem from "./select-item";
 interface ISelectListProps {
   focusIndex: number;
   ItemRenderer?: Function;
-  options: object[];
-  selected: object[];
-  onChange: (selected: any) => void;
+  options: Option[];
+  selected: Option[];
+  onChange: (selected: Option[]) => void;
   onClick: Function;
   disabled?: boolean;
 }
@@ -38,16 +38,11 @@ const SelectList = ({
     if (disabled) {
       return;
     }
-    if (checked) {
-      onChange([...selected, option.value]);
-    } else {
-      const index = selected.indexOf(option.value);
-      const removed = [
-        ...selected.slice(0, index),
-        ...selected.slice(index + 1)
-      ];
-      onChange(removed);
-    }
+    onChange(
+      checked
+        ? [...selected, option]
+        : selected.filter((o: any) => o.value !== option.value)
+    );
   };
 
   return (
@@ -58,7 +53,7 @@ const SelectList = ({
             focused={focusIndex === i}
             option={o}
             onSelectionChanged={c => handleSelectionChanged(o, c)}
-            checked={selected.includes(o.value)}
+            checked={selected.find(s => s.value === o.value) ? true : false}
             onClick={e => onClick(e, i)}
             itemRenderer={ItemRenderer}
             disabled={o.disabled || disabled}