From c64420bbc59747109d681e71bcae4ae040bf5dee Mon Sep 17 00:00:00 2001
From: gabriellesc <gabrielle.singhcadieux@mail.utoronto.ca>
Date: Fri, 25 Aug 2017 00:37:53 -0400
Subject: [PATCH] added checkbox range selection

---
 app/javascript/app/components/controlPanel.js | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/app/javascript/app/components/controlPanel.js b/app/javascript/app/components/controlPanel.js
index 6821974..f30cb52 100644
--- a/app/javascript/app/components/controlPanel.js
+++ b/app/javascript/app/components/controlPanel.js
@@ -13,6 +13,13 @@ const getSelectedOffers = () =>
         .map(box => box.id);
 
 class ControlPanel extends React.Component {
+    constructor(props) {
+        super(props);
+
+        // most recently-clicked checkbox, stored to allow range selection
+        this.lastClicked = null;
+    }
+
     render() {
         let nullCheck = this.props.appState.isOffersListNull();
         if (nullCheck) {
@@ -43,6 +50,28 @@ class ControlPanel extends React.Component {
                         defaultChecked={false}
                         className="offer-checkbox"
                         id={p.offerId}
+                        onClick={event => {
+			    // range selection using shift key
+			    if (this.lastClicked && event.shiftKey) {
+				let first = false, last = false;
+				
+				Array.prototype.forEach.call(getCheckboxElements(), box => {
+				    if (!first && (box.id == p.offerId || box.id == this.lastClicked)) {
+					first = true;
+					box.checked = true;
+				    }
+					
+				    if (first && !last) {
+					if (box.id == p.offerId || box.id == this.lastClicked) {
+					    last = true;
+					}
+					box.checked = true;
+				    }
+				});
+			    }
+
+			    this.lastClicked = p.offerId;
+                        }}
                     />,
 
                 style: { width: 0.01, textAlign: 'center' },