Merge pull request #65 from tutorcruncher/dependabot/npm_and_yarn/react-select-3.0.4

Bump react-select from 1.2.1 to 3.0.4

Author: tomhamiltonstubber

package.json

@@ -47,7 +47,7 @@
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "1.1.5",
-    "react-select": "~1.2.1",
+    "react-select": "^3.0.8",
     "react-tooltip": "^3.11.1",
     "sass-loader": "^7.3.1",
     "shelljs": "0.8.3",

public/index.html

@@ -79,7 +79,7 @@
       router_mode: 'history',
       mode: 'enquiry-modal',
       api_root: api_root,
-      modal_parent: 'footer',
+      modal_container: 'footer',
     })
   </script>
 </html>

src/components/contractors/Filters.js

@@ -7,11 +7,13 @@ export const SubjectSelect = ({get_text, show, subjects, selected_subject, subje
     <div className="tcs-contractor-filter">
       <If v={show}>
         <Select
-          value={selected_subject && selected_subject.id}
+          value={selected_subject}
           onChange={subject_change}
           placeholder={get_text('subject_filter_placeholder')}
-          labelKey='name'
-          valueKey='id'
+          classNamePrefix='multiselect'
+          getOptionLabel={({name}) => name}
+          getOptionValue={({id}) => id}
+          isClearable={true}
           options={subjects}/>
       </If>
     </div>

src/styles/contractors.scss

@@ -149,19 +149,13 @@ $pagination-radius: 4px;
   }
 }
 
-@import '~react-select/dist/react-select.min';
-
 .multiselect__select {
   cursor: default;
   right: 16px;
 }
 
-.multiselect__option--highlight {
-  background: $brand-colour;
-}
-
-.multiselect__option--selected.multiselect__option--highlight {
-  background: darken($brand-colour, 10%);
+.multiselect__option--is-selected {
+  background: $brand-colour !important;
 }
 
 .tcs-filters-container {
@@ -181,15 +175,17 @@ $pagination-radius: 4px;
   margin-left: 4px;
 }
 
-.tcs-location-filter {
+.tcs-location-filter, .multiselect__control {
   margin-right: 4px;
   border-radius: 4px;
-  border: 1px solid $dft-border-color;
-  height: 36px;
+  border: 1px solid $dft-border-color !important;
+  height: 36px !important;
+  min-height: 36px !important;
   padding: 0 2px;
   background: white;
 }
 
+
 .tcs-location-input {
   width: calc(100% - 50px);
   border: none;
@@ -201,6 +197,7 @@ $pagination-radius: 4px;
     color: #aaa;
   }
 }
+
 .tcs-location-clear {
   padding: 6px;
   width: 30px;