Added new prop: keepSelectionOrder

Author: baptwaels

README.md

@@ -105,6 +105,7 @@ class Example extends Component {
 | `responsiveHeight`            | `string`    | 400px          | Responsive height of the wrapping component, can send percent for example: `70%`                        |
 | `withGrouping`                | `boolean`   | false          | Your items will be grouped by the group prop values - see "item grouping" section below                 |
 | `showSelectedItemsSearch`     | `boolean`   | false          | toggle to show search option in detination list.                                                        |
+| `keepSelectionOrder`          | `boolean`   | false          | keep selection order in the detination list                                                             |
 | `searchSelectedItemsValue`    | `string`    |                | The value of the search field for destination list.                                                     |
 | `searchSelectedItemsChanged`  | `function`  |                | Function to handle the change of search field for destination list. Accepts value as a single argument. |
 | `selectedItemsFilterFunction` | `function`  | based on label | Is the same as filterFunction by default to filter items based on the search query in destination list. |

src/components/multi_select.js

@@ -26,6 +26,7 @@ export class MultiSelect extends PureComponent {
     showSearch: PropTypes.bool,
     showSelectAll: PropTypes.bool,
     showSelectedItems: PropTypes.bool,
+    keepSelectionOrder: PropTypes.bool,
     searchIcon: PropTypes.string,
     deleteIcon: PropTypes.string,
     searchRenderer: PropTypes.func,
@@ -55,7 +56,8 @@ export class MultiSelect extends PureComponent {
     loaderRenderer: Loader,
     withGrouping: false,
     generateClassName: defaultGenerateClassName,
-    showSelectedItemsSearch: false
+    showSelectedItemsSearch: false,
+    keepSelectionOrder: false
   };
 
   calculateHeight() {
@@ -112,7 +114,8 @@ export class MultiSelect extends PureComponent {
       searchSelectedItemsValue,
       filterSelectedItems,
       filteredSelectedItems,
-      isLocked
+      isLocked,
+      keepSelectionOrder
     } = this.props;
     const calculatedHeight = this.calculateHeight();
     const selectedIds = selectedItems.map(item => item.id);
@@ -151,6 +154,7 @@ export class MultiSelect extends PureComponent {
               withGrouping={withGrouping}
               listRenderer={listRenderer}
               isLocked={isLocked}
+              keepSelectionOrder={keepSelectionOrder}
             />
           )}
           {!loading && showSelectedItems && (

src/components/multi_select_state.js

@@ -115,7 +115,7 @@ const withMultiSelectState = WrappedComponent =>
     }
 
     selectItem(event, id) {
-      const { items } = this.props;
+      const { items, keepSelectionOrder } = this.props;
       const { selectedItems, firstItemShiftSelected } = this.state;
       if (!selectedItems.find(item => item.id === id)) {
         if (event.shiftKey && firstItemShiftSelected !== undefined) {
@@ -125,15 +125,25 @@ const withMultiSelectState = WrappedComponent =>
             const index = items.findIndex(item => item.id === id);
             this.setState({ firstItemShiftSelected: index });
           }
-          this.setNewItemsBySelectItem(id, items, selectedItems);
+          this.setNewItemsBySelectItem(
+            id,
+            items,
+            selectedItems,
+            keepSelectionOrder
+          );
         }
       } else {
         this.unselectItems([id]);
       }
     }
 
-    setNewItemsBySelectItem(id, items, selectedItems) {
-      const newSelectedItems = getNewSelectedItems(id, items, selectedItems);
+    setNewItemsBySelectItem(id, items, selectedItems, keepSelectionOrder) {
+      const newSelectedItems = getNewSelectedItems(
+        id,
+        items,
+        selectedItems,
+        keepSelectionOrder
+      );
       const newFilteredSelectedItems = this.getNewFilteredSelectedItems(
         newSelectedItems
       );

src/components/multi_select_state_utils.js

@@ -40,12 +40,26 @@ export const getMinMaxIndexes = (currentIndex, firstItemShiftSelected) =>
 export const isWithin = (index, { minIndex, maxIndex }) =>
   index >= minIndex && index <= maxIndex;
 
-export const getNewSelectedItems = (itemId, items, selectedItems) => {
-  const sourceItems = items.filter(
-    item => item.id === itemId || findItem(item, selectedItems)
-  );
-  const destinationItems = selectedItems.filter(
-    selectedItem => !findItem(selectedItem, items)
-  );
-  return [...destinationItems, ...sourceItems];
+export const getNewSelectedItems = (
+  itemId,
+  items,
+  selectedItems,
+  keepSelectionOrder
+) => {
+  let alreadySelectedItems = [];
+  let sourceItems = [];
+  let destinationItems = [];
+
+  if (keepSelectionOrder) {
+    // In order to keep selection order on the list,
+    // First, iterate threw already selectedItems
+    alreadySelectedItems = selectedItems.filter(item => findItem(item, items));
+    sourceItems = items.filter(item => item.id === itemId);
+  } else {
+    sourceItems = items.filter(
+      item => item.id === itemId || findItem(item, selectedItems)
+    );
+  }
+
+  return [...alreadySelectedItems, ...sourceItems];
 };

stories/multi-select.stories.js

@@ -80,6 +80,21 @@ storiesOf("React Multi Select", module)
       );
     })
   )
+  .add(
+    "with keep selection order",
+    withReadme(Readme, () => {
+      return (
+        <ReactMultiSelect
+          items={utils.items}
+          loading={boolean("Loading", false)}
+          onChange={action("onChange")}
+          showSearch={boolean("Show search", true)}
+          showSelectAll={boolean("Show select all", true)}
+          keepSelectionOrder={boolean("keep selection order", true)}
+        />
+      );
+    })
+  )
   .add(
     "With some of the items disabled",
     withReadme(Readme, () => {
@@ -363,15 +378,12 @@ storiesOf("React Multi Select", module)
     withReadme(Readme, () => {
       class SelectedItemsController extends React.Component {
         SINGLE_ITEM = [{ id: 1, label: "Item 1" }];
-        MULTI_ITEMS = [
-          { id: 2, label: "Item 2" },
-          { id: 4, label: "Item 4" }
-        ]
+        MULTI_ITEMS = [{ id: 2, label: "Item 2" }, { id: 4, label: "Item 4" }];
 
         constructor(props) {
           super(props);
           this.state = {
-            selectedItems: this.SINGLE_ITEM,
+            selectedItems: this.SINGLE_ITEM
           };
         }
 
@@ -384,7 +396,10 @@ storiesOf("React Multi Select", module)
                 type="button"
                 onClick={() => {
                   this.setState({
-                    selectedItems: this.state.selectedItems.length > 1 ? this.SINGLE_ITEM : this.MULTI_ITEMS
+                    selectedItems:
+                      this.state.selectedItems.length > 1
+                        ? this.SINGLE_ITEM
+                        : this.MULTI_ITEMS
                   });
                 }}
               />